@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600;700&display=swap');

/* Display font: Bai Jamjuree, self-hosted from resources/font. */
@font-face { font-family: "Bai Jamjuree"; font-style: normal; font-weight: 200; font-display: swap; src: url("../font/BaiJamjuree-ExtraLight.woff") format("woff"); }
@font-face { font-family: "Bai Jamjuree"; font-style: italic; font-weight: 200; font-display: swap; src: url("../font/BaiJamjuree-ExtraLightItalic.woff") format("woff"); }
@font-face { font-family: "Bai Jamjuree"; font-style: normal; font-weight: 300; font-display: swap; src: url("../font/BaiJamjuree-Light.woff") format("woff"); }
@font-face { font-family: "Bai Jamjuree"; font-style: italic; font-weight: 300; font-display: swap; src: url("../font/BaiJamjuree-LightItalic.woff") format("woff"); }
@font-face { font-family: "Bai Jamjuree"; font-style: normal; font-weight: 400; font-display: swap; src: url("../font/BaiJamjuree-Regular.woff") format("woff"); }
@font-face { font-family: "Bai Jamjuree"; font-style: italic; font-weight: 400; font-display: swap; src: url("../font/BaiJamjuree-Italic.woff") format("woff"); }
@font-face { font-family: "Bai Jamjuree"; font-style: normal; font-weight: 500; font-display: swap; src: url("../font/BaiJamjuree-Medium.woff") format("woff"); }
@font-face { font-family: "Bai Jamjuree"; font-style: italic; font-weight: 500; font-display: swap; src: url("../font/BaiJamjuree-MediumItalic.woff") format("woff"); }
@font-face { font-family: "Bai Jamjuree"; font-style: normal; font-weight: 600; font-display: swap; src: url("../font/BaiJamjuree-SemiBold.woff") format("woff"); }
@font-face { font-family: "Bai Jamjuree"; font-style: italic; font-weight: 600; font-display: swap; src: url("../font/BaiJamjuree-SemiBoldItalic.woff") format("woff"); }
@font-face { font-family: "Bai Jamjuree"; font-style: normal; font-weight: 700; font-display: swap; src: url("../font/BaiJamjuree-Bold.woff") format("woff"); }
@font-face { font-family: "Bai Jamjuree"; font-style: italic; font-weight: 700; font-display: swap; src: url("../font/BaiJamjuree-BoldItalic.woff") format("woff"); }

:root {
  --ocean: #177eaa;
  --ocean-light: #34a6d6;
  --deep-blue: #072533;
  --navy: #071820;
  --black: #090909;
  --white: #ffffff;
  --off-white: #f3f3f0;
  --gray: #9ca4a8;
  --font-display: "Bai Jamjuree", "Google Sans", Arial, sans-serif;
  --font-body: "Google Sans", Arial, sans-serif;
  --weight-display: 600;
  --container: 1480px;
  --header-height: 112px;
}
/* Translated pages: Latin text keeps the brand fonts, CJK falls through to Noto (loaded per language). */
html:lang(zh-Hans) { --font-display: "Bai Jamjuree", "Noto Sans SC", sans-serif; --font-body: "Google Sans", "Noto Sans SC", sans-serif; }
html:lang(zh-Hant) { --font-display: "Bai Jamjuree", "Noto Sans TC", sans-serif; --font-body: "Google Sans", "Noto Sans TC", sans-serif; }
html:lang(ko) { --font-display: "Bai Jamjuree", "Noto Sans KR", sans-serif; --font-body: "Google Sans", "Noto Sans KR", sans-serif; word-break: keep-all; }
html:lang(ja) { --font-display: "Bai Jamjuree", "Noto Sans JP", sans-serif; --font-body: "Google Sans", "Noto Sans JP", sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* No double-tap zoom (iOS Safari zooms on quick taps of cards and buttons); pinch zoom still works.
   Set on every element because scroll containers (galleries, carousels) start a fresh touch-action chain. */
*, *::before, *::after { touch-action: manipulation; }
body { margin: 0; color: var(--deep-blue); background: var(--off-white); font-family: var(--font-body); font-size: 16px; line-height: 1.55; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
body.lightbox-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
:focus-visible { outline: 3px solid var(--ocean-light); outline-offset: 4px; }
.container { width: min(100% - 64px, var(--container)); margin-inline: auto; }
.eyebrow { display: inline-block; color: var(--ocean); font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.button { display: inline-flex; min-height: 56px; align-items: center; justify-content: center; padding: 0 28px; border: 1px solid transparent; background: var(--ocean); color: var(--white); font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; transition: background .25s ease, color .25s ease, transform .25s ease; }
.button:hover { background: var(--ocean-light); transform: translateY(-2px); }
.button--outline { border: 2px solid var(--white); background: transparent; }
.button--outline:hover { background: var(--white); color: var(--black); }
.text-link { appearance: none; padding: 0; border: 0; background: transparent; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.text-link span { display: inline-block; margin-left: 10px; transition: transform .25s ease; }
.text-link:hover span { transform: translate(4px,-4px); }
.text-link--light { color: var(--white); }

.site-header { position: fixed; z-index: 100; inset: 0 0 auto; height: var(--header-height); color: var(--white); transition: height .3s ease, background .3s ease; }
/* Soft fade behind the nav over photos; runs a little past the bar so it has no edge. */
.site-header::before { position: absolute; z-index: -1; inset: 0 0 -48px; background: linear-gradient(180deg, rgba(3,15,22,.72) 0%, rgba(3,15,22,.38) 55%, rgba(3,15,22,0) 100%); content: ""; pointer-events: none; transition: opacity .3s ease; }
.site-header.is-scrolled::before, .page-booking .site-header::before, .sc-page .site-header::before { opacity: 0; }
.site-header.is-scrolled { height: 82px; background: rgba(7,24,32,.96); box-shadow: 0 1px rgba(255,255,255,.08); }
.site-nav { width: min(100% - 64px, var(--container)); height: 100%; margin-inline: auto; align-items: center; }
.site-nav--desktop { display: grid; grid-template-columns: 170px auto 1fr; gap: 44px; }
.site-nav--mobile { display: none; justify-content: space-between; }
.site-logo { position: relative; z-index: 3; display: inline-flex; width: 128px; align-items: center; }
.site-logo img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 2px 9px rgba(0,0,0,.3)); }
.site-nav__links { display: flex; gap: clamp(24px, 3.3vw, 58px); align-items: center; }
.site-nav a, .nav-book { position: relative; border: 0; padding: 8px 0; background: none; color: var(--white); font-size: .78rem; font-weight: 400; letter-spacing: .045em; text-transform: uppercase; cursor: pointer; }
.site-nav__links a::after, .nav-book::after, .site-nav__contact::after { content: ""; position: absolute; right: 0; bottom: 2px; left: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .25s ease; }
.site-nav a:hover::after, .nav-book:hover::after { transform: scaleX(1); transform-origin: left; }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav__end { display: flex; align-items: center; justify-self: end; gap: 28px; }
/* "Book charter" dropdown: opens on hover or keyboard focus */
.nav-drop { position: relative; display: flex; }
.nav-drop .nav-book { display: inline-flex; align-items: center; gap: 6px; }
.nav-book img { width: 10px; height: 10px; transition: transform .2s ease; }
.nav-drop:hover .nav-book img, .nav-drop:focus-within .nav-book img { transform: rotate(180deg); }
.nav-drop__panel { position: absolute; z-index: 5; top: calc(100% + 14px); left: -24px; display: grid; grid-template-columns: repeat(3, auto); gap: 6px 28px; padding: 22px 24px 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(7,24,32,.97); box-shadow: 0 24px 50px rgba(2,12,18,.45); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.nav-drop__panel::before { content: ""; position: absolute; right: 0; bottom: 100%; left: 0; height: 16px; }
.nav-drop:hover .nav-drop__panel, .nav-drop:focus-within .nav-drop__panel { opacity: 1; visibility: visible; transform: none; }
.nav-drop__group ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav-drop__title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 0 10px 10px; border-bottom: 1px solid rgba(255,255,255,.12); color: var(--ocean-light); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.nav-drop__icon { width: 16px; height: 16px; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }
.site-nav .nav-drop__group a { display: block; padding: 8px 10px; border-radius: 6px; color: #dbe5e8; font-size: .86rem; letter-spacing: 0; text-transform: none; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.site-nav .nav-drop__group a:hover, .site-nav .nav-drop__group a:focus-visible { background: rgba(52,166,214,.16); color: var(--white); }
.site-nav .nav-drop__panel a::after { content: none; }
.site-nav .nav-drop__all { grid-column: 1 / -1; justify-self: start; margin-top: 10px; padding: 12px 10px 0; color: var(--ocean-light); font-size: .78rem; letter-spacing: .06em; }
.site-nav .nav-drop__all:hover { color: var(--white); }
.lang-menu { position: relative; }
.lang-menu__toggle { display: inline-flex; white-space: nowrap; align-items: center; gap: 8px; padding: 8px 0; border: 0; background: transparent; color: var(--white); font-size: .78rem; font-weight: 400; letter-spacing: .045em; text-transform: uppercase; cursor: pointer; transition: opacity .2s ease; }
.lang-menu__toggle:hover, .lang-menu__toggle[aria-expanded="true"] { opacity: .78; }
.lang-menu__toggle img:first-child { width: 16px; height: 16px; }
.lang-menu__toggle img:last-child { width: 10px; height: 10px; transition: transform .2s ease; }
.lang-menu__toggle[aria-expanded="true"] img:last-child { transform: rotate(180deg); }
.lang-menu__list { position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px; margin: 0; padding: 6px; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; background: rgba(7,24,32,.6); box-shadow: 0 16px 40px rgba(7,24,32,.28), inset 0 1px rgba(255,255,255,.12); list-style: none; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lang-menu__list { background: rgba(7,24,32,.32); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
}
.lang-menu__list button { display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 4px; background: transparent; color: var(--white); font-size: .86rem; font-weight: 500; text-align: left; cursor: pointer; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.lang-menu__list button:hover, .lang-menu__list button:focus-visible { background: rgba(255,255,255,.16); }
.lang-menu__list button[aria-pressed="true"] { color: #9ddcf7; font-weight: 700; }

.menu-toggle { position: relative; z-index: 3; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.45); background: transparent; cursor: pointer; }
.menu-toggle span { position: absolute; left: 12px; width: 20px; height: 1px; background: white; transition: transform .25s ease, top .25s ease; }
.menu-toggle span:first-child { top: 18px; }
.menu-toggle span:last-child { top: 26px; }
.menu-toggle[aria-expanded="true"] span:first-child { top: 22px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { top: 22px; transform: rotate(-45deg); }
.mobile-book { position: relative; z-index: 3; display: none; align-items: center; min-height: 42px; margin-left: auto; margin-right: 10px; border: 0; padding: 0 15px; background: var(--ocean); color: white; font-size: .72rem; font-weight: 600; text-transform: uppercase; }
.mobile-menu { position: fixed; inset: 0; display: grid; align-content: center; padding: 110px 32px 42px; background: var(--navy); visibility: hidden; opacity: 0; transform: translateY(-12px); transition: .25s ease; }
.mobile-menu[aria-hidden="false"] { visibility: visible; opacity: 1; transform: none; }
.mobile-menu__links { display: grid; }
.mobile-menu__links a, .mobile-menu__links button { border: 0; border-bottom: 1px solid rgba(255,255,255,.16); padding: 9px 0; background: none; color: white; font-family: var(--font-display); font-size: clamp(2.4rem, 12vw, 4.5rem); line-height: 1; text-align: left; }
.mobile-menu p { align-self: end; color: var(--gray); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.mobile-menu__langs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.mobile-menu__langs button { border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 7px 14px; background: none; color: var(--white); font-size: .82rem; cursor: pointer; }
.mobile-menu__langs button[aria-pressed="true"] { border-color: var(--white); background: var(--white); color: var(--deep-blue); }

.hero { position: relative; display: grid; min-height: 100svh; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; background: var(--navy) url('../img/hero/hero-clean.jpg') center / cover no-repeat; color: white; isolation: isolate; }
.hero__video { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: opacity .3s ease; }
.hero__still { position: absolute; z-index: -2; inset: 0; background: center / cover no-repeat; opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.hero__still.is-shown { opacity: 1; }
.hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle, rgba(3,15,22,.62) 0, rgba(3,15,22,.62) .7px, transparent .85px) 0 0 / 3px 3px, linear-gradient(90deg, rgba(3,15,22,.91) 0%, rgba(3,15,22,.62) 28%, rgba(3,15,22,.08) 64%, rgba(3,15,22,0) 100%); pointer-events: none; }
.hero__inner { grid-row: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: end; padding: clamp(118px, 16vh, 172px) 0 clamp(28px, 4vh, 44px); }
.hero__content { min-width: 0; max-width: 640px; margin-bottom: clamp(24px, 7vh, 80px); }
.hero__title { margin: 0; }
.hero__logo { width: clamp(280px, 30vw, 540px); height: auto; filter: drop-shadow(0 4px 18px rgba(0,0,0,.35)); }
.hero__tagline { display: block; margin-top: 12px; font-family: var(--font-display); font-size: clamp(1.6rem, 2.3vw, 2.4rem); font-style: italic; font-weight: 700; line-height: 1; text-transform: uppercase; }
.hero__location { margin: clamp(20px, 3vh, 34px) 0 12px; color: var(--ocean-light); font-size: .86rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.hero__lead { margin: 0 0 10px; font-size: clamp(1rem, 1.15vw, 1.2rem); font-weight: 600; line-height: 1.3; text-transform: uppercase; }
.hero__description { max-width: 34rem; margin: 0 0 28px; line-height: 1.42; }
.hero__actions { display: flex; gap: 10px; }
.hero__actions .button { min-height: 50px; padding-inline: 24px; border-radius: 6px; }
.hero__credentials { grid-row: 2; margin-block: 0 clamp(20px, 3vh, 32px); color: var(--ocean-light); font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.hero__credentials span { margin-inline: 6px; }
/* Yacht cards: tab top-right, tab bottom-left, drawn with a fixed 226x300 clip path. */
.hero__yachts { display: flex; gap: 22px; }
.hero-yacht { position: relative; display: flex; flex: 0 0 226px; flex-direction: column; height: 300px; padding: 40px 15px 0; border: 0; background: #151515; color: var(--white); text-align: left; cursor: pointer; clip-path: path("M0 50 Q0 28 22 28 L88 28 C108 28 104 0 128 0 L204 0 Q226 0 226 22 L226 250 Q226 272 204 272 L170 272 C146 272 150 300 128 300 L22 300 Q0 300 0 278 Z"); transition: transform .3s ease; }
.hero-yacht::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #2178d6 0%, #0d3f86 100%); opacity: 0; transition: opacity .3s ease; }
.hero-yacht > * { position: relative; }
.hero-yacht:hover, .hero-yacht:focus-visible { transform: translateY(-4px); }
.hero-yacht:hover::before, .hero-yacht:focus-visible::before, .hero-yacht[aria-pressed="true"]::before { opacity: 1; }
.hero-yacht__tag { position: absolute; top: 7px; right: 16px; display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: .82rem; font-weight: 700; text-transform: uppercase; }
.hero-yacht__tag::after { content: ""; border-block: 4px solid transparent; border-left: 5px solid currentColor; }
.hero-yacht__img { width: 100%; height: 120px; border-radius: 8px; object-fit: cover; }
.hero-yacht__name { margin-top: 16px; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; line-height: 1.1; text-transform: uppercase; }
.hero-yacht__desc { margin-top: 6px; font-size: .74rem; line-height: 1.35; opacity: .9; }
.hero-yacht__dots { position: absolute; bottom: 14px; left: 22px; display: flex; gap: 4px; }
.hero-yacht__dots i { width: 7px; height: 7px; border-radius: 50%; background: #3a3a3a; transition: background .3s ease; }
.hero-yacht:hover .hero-yacht__dots i, .hero-yacht:focus-visible .hero-yacht__dots i, .hero-yacht[aria-pressed="true"] .hero-yacht__dots i { background: #5fb0ff; }

.service-carousel { position: relative; overflow: hidden; padding-block: clamp(88px, 9vw, 144px); background: var(--white); isolation: isolate; }
.service-carousel::before { content: ""; position: absolute; z-index: -1; top: 12%; left: 50%; width: min(72vw, 1100px); height: 58%; background: radial-gradient(circle, rgba(52,166,214,.12), transparent 68%); transform: translateX(-50%); pointer-events: none; }
.service-carousel__header { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .7fr); gap: clamp(28px, 4vw, 72px); align-items: end; margin-bottom: clamp(48px, 6vw, 88px); }
.service-carousel__header h2 { margin: 12px 0 0; font-family: var(--font-display); font-size: clamp(3.5625rem, 6.2vw, 6.8625rem); font-weight: var(--weight-display); line-height: .82; letter-spacing: -.03em; text-transform: uppercase; }
.service-carousel__header h2 span { display: block; color: var(--ocean); font-size: .72em; white-space: nowrap; }
.service-carousel__header > p { max-width: 470px; margin: 0; color: #52656d; font-size: 1rem; }
.service-carousel__band { padding-block: clamp(28px, 3vw, 40px); background: linear-gradient(90deg, #e8f3fa, #f4f9fc 70%, rgba(255,255,255,0)); }
.xp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
.xp-card { position: relative; min-height: 118px; border-radius: 8px; overflow: hidden; background: #122d3a; color: var(--white); isolation: isolate; transition: transform .25s ease, box-shadow .25s ease; }
.xp-card--cruise { background: #1f4d63; }
.xp-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(7, 24, 32, .18); }
.xp-card__img { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .35s ease, transform .5s ease; }
.xp-card__toggle { position: relative; z-index: 1; display: grid; align-content: space-between; gap: 14px; width: 100%; height: 100%; padding: 20px 22px 18px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 0 12px rgba(0, 0, 0, .35); transition: opacity .3s ease; }
.xp-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.xp-card__title { min-width: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.08; white-space: nowrap; }
.xp-card--fishing .xp-card__title { font-size: 1.1rem; }
.xp-card__sub { display: block; margin-top: 2px; font-size: .77em; font-weight: 400; }
.xp-card__badge { flex: none; margin-top: 4px; padding: 4px 16px; border-radius: 5px; background: rgba(16, 39, 51, .6); font-size: .64rem; font-weight: 700; letter-spacing: .06em; line-height: 1.4; text-transform: uppercase; }
.xp-card__desc { min-width: 0; font-size: .84rem; opacity: .9; white-space: nowrap; }
.xp-card__cta { position: absolute; z-index: 2; top: 50%; left: 50%; padding: 6px 0; color: var(--white); font-size: .9rem; font-weight: 700; letter-spacing: .4em; text-shadow: 0 2px 10px rgba(0, 0, 0, .45); text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translate(-50%, -50%); pointer-events: none; transition: opacity .35s ease, letter-spacing .55s cubic-bezier(.2, .8, .2, 1); }
.xp-card__cta::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.xp-card.is-open .xp-card__img { filter: blur(4px) brightness(.6); transform: scale(1.08); }
.xp-card.is-open .xp-card__toggle { opacity: 0; }
.xp-card.is-open .xp-card__cta { opacity: 1; letter-spacing: .06em; pointer-events: auto; }
.xp-card.is-open .xp-card__cta::after { transform: scaleX(1); transition-delay: .2s; }
/* Mouse users get the same reveal on hover; touch devices keep tap-to-open. */
@media (hover: hover) {
  .xp-card:hover .xp-card__img { filter: blur(4px) brightness(.6); transform: scale(1.08); }
  .xp-card:hover .xp-card__toggle { opacity: 0; }
  .xp-card:hover .xp-card__cta { opacity: 1; letter-spacing: .06em; pointer-events: auto; }
  .xp-card:hover .xp-card__cta::after { transform: scaleX(1); transition-delay: .2s; }
}

/* Floating contact dock */
.chat-dock { position: fixed; z-index: 250; right: clamp(16px, 2vw, 30px); bottom: max(18px, env(safe-area-inset-bottom)); display: grid; justify-items: end; gap: 14px; pointer-events: none; }
.chat-dock__panel { display: grid; width: min(204px, calc(100vw - 32px)); gap: 8px; visibility: hidden; transition: visibility 0s linear .42s; pointer-events: none; }
.chat-dock.is-open .chat-dock__panel { visibility: visible; transition-delay: 0s; pointer-events: auto; }
.chat-dock__channel { position: relative; display: flex; min-height: 54px; align-items: center; overflow: hidden; border-radius: 12px; padding: 5px 5px 5px 0; background: var(--channel, #10586a); box-shadow: 0 10px 24px rgba(2,23,32,.24); color: var(--white); opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .28s ease, transform .36s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease; }
.chat-dock__channel::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 58px; background: var(--white); clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 100%, 0 100%); }
.chat-dock__channel img { position: relative; z-index: 1; flex: 0 0 34px; width: 34px; height: 34px; margin-left: 12px; }
.chat-dock__channel > span { position: relative; z-index: 1; display: grid; flex: 1; min-width: 0; align-content: center; gap: 1px; padding: 5px 10px 5px 4px; text-align: right; text-transform: uppercase; }
.chat-dock__channel small { font-size: .55rem; font-weight: 700; line-height: 1.15; letter-spacing: .05em; }
.chat-dock__channel strong { font-size: .78rem; line-height: 1.15; letter-spacing: .02em; }
.chat-dock__channel--inquiries { --channel: #fd8b00; }
.chat-dock__channel--facebook { --channel: #0084ff; }
.chat-dock__channel--whatsapp { --channel: #29a71a; }
.chat-dock__channel--viber { --channel: #665cac; }
.chat-dock.is-open .chat-dock__channel { opacity: 1; transform: none; }
.chat-dock.is-open .chat-dock__channel:hover, .chat-dock.is-open .chat-dock__channel:focus-visible { transform: translateX(-6px); box-shadow: 0 14px 30px rgba(2,23,32,.3); }
/* Open: rise one by one from the trigger upward. Close: fall away from the top down. */
.chat-dock__channel:nth-child(1) { transition-delay: 0ms; }
.chat-dock__channel:nth-child(2) { transition-delay: 50ms; }
.chat-dock__channel:nth-child(3) { transition-delay: 100ms; }
.chat-dock__channel:nth-child(4) { transition-delay: 150ms; }
.chat-dock__channel:nth-child(5) { transition-delay: 200ms; }
.chat-dock.is-open .chat-dock__channel:nth-child(5) { transition-delay: 0ms; }
.chat-dock.is-open .chat-dock__channel:nth-child(4) { transition-delay: 60ms; }
.chat-dock.is-open .chat-dock__channel:nth-child(3) { transition-delay: 120ms; }
.chat-dock.is-open .chat-dock__channel:nth-child(2) { transition-delay: 180ms; }
.chat-dock.is-open .chat-dock__channel:nth-child(1) { transition-delay: 240ms; }
.chat-dock__trigger { border: 0; padding: 0; background: transparent; cursor: pointer; pointer-events: auto; }
.chat-dock__trigger-icon { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 50%; background: var(--white); box-shadow: 0 10px 24px rgba(2,23,32,.28); transition: transform .25s ease, box-shadow .25s ease; }
.chat-dock__trigger-icon img { width: 32px; height: 32px; }
.chat-dock__trigger:hover .chat-dock__trigger-icon, .chat-dock__trigger:focus-visible .chat-dock__trigger-icon { box-shadow: 0 14px 30px rgba(2,23,32,.34); transform: translateY(-3px); }
.chat-dock.is-open .chat-dock__trigger-icon { transform: rotate(-8deg) scale(.96); }

/* Showcase gallery */
.showcase { position: relative; overflow: hidden; padding-block: clamp(78px, 8vw, 132px); background: var(--off-white); --showcase-bleed: clamp(86px, 10vw, 158px); --showcase-stagger: clamp(18px, 3.4vw, 58px); --showcase-peek: 22px; --showcase-gutter: max(32px, calc((100vw - var(--container)) / 2)); }
.showcase__intro { width: min(100% - 64px, var(--container)); margin-inline: auto; margin-bottom: clamp(44px, 5vw, 78px); }
.showcase__intro h2 { margin: 10px 0 16px; text-wrap: balance; font-family: var(--font-display); font-size: clamp(3.4rem, 7vw, 6.6rem); font-weight: var(--weight-display); line-height: .86; letter-spacing: -.015em; }
.showcase__intro p { max-width: 620px; margin: 0; color: #536369; font-size: clamp(1rem, 1.3vw, 1.2rem); }
.showcase__row { display: grid; align-items: center; gap: clamp(26px, 3vw, 52px); }
.showcase__row + .showcase__row { margin-top: clamp(64px, 8vw, 128px); }
.showcase__row--right { grid-template-columns: minmax(0, 43vw) minmax(0, 1fr); }
.showcase__row--left { grid-template-columns: minmax(0, 1fr) minmax(0, 43vw); }
.showcase__row--left .showcase__copy { grid-column: 2; grid-row: 1; justify-self: end; margin-right: var(--showcase-gutter); }
.showcase__row--left .showcase__media { grid-column: 1; grid-row: 1; }
.showcase__row--right .showcase__copy { justify-self: start; margin-left: var(--showcase-gutter); }
.showcase__copy { position: relative; z-index: 1; max-width: 27rem; transition: opacity .45s ease; }
.showcase__copy h3 { margin: 10px 0 14px; text-wrap: balance; font-family: var(--font-display); font-size: clamp(2.6rem, 4.4vw, 4.4rem); font-weight: var(--weight-display); line-height: .9; letter-spacing: -.015em; }
.showcase__copy p { margin: 0 0 22px; text-wrap: pretty; color: #536369; font-size: .98rem; line-height: 1.55; }
.showcase__media { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(8px, 1vw, 14px); }
.showcase__band { display: flex; gap: clamp(8px, 1vw, 14px); --band-over: calc(var(--showcase-bleed) + var(--band-shift)); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.showcase__band--a { --band-shift: 0px; }
.showcase__band--b { --band-shift: var(--showcase-stagger); }
.showcase__row--right .showcase__band { width: calc(100% + var(--showcase-bleed)); margin-left: var(--band-shift); --band-slide: calc(-1 * (var(--band-over) + var(--showcase-peek))); }
.showcase__row--left .showcase__band { width: calc(100% + var(--band-over)); margin-left: calc(-1 * var(--band-over)); --band-slide: calc(var(--band-over) + var(--showcase-peek)); }
.showcase__media:hover .showcase__band, .showcase__media:focus-within .showcase__band { transform: translateX(var(--band-slide)); }
.showcase__row:has(.showcase__media:hover) .showcase__copy, .showcase__row:has(.showcase__media:focus-within) .showcase__copy { opacity: .42; }
.showcase__card { position: relative; flex: 1 1 0; min-width: 0; aspect-ratio: 16 / 10; overflow: hidden; border: 0; border-radius: 10px; padding: 0; background: var(--deep-blue); cursor: zoom-in; }
.showcase__card img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.showcase__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(3,15,22,.45)); opacity: 0; transition: opacity .35s ease; }
.showcase__card:hover img, .showcase__card:focus-visible img { transform: scale(1.05); }
.showcase__card:hover::after, .showcase__card:focus-visible::after { opacity: 1; }
.showcase__copy p:last-child { margin-bottom: 0; }

.showcase-lightbox { position: fixed; z-index: 420; inset: 0; display: grid; align-content: center; justify-items: center; gap: clamp(12px, 2vh, 22px); padding: 72px 20px 26px; visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility .3s ease; }
.showcase-lightbox.is-open { visibility: visible; opacity: 1; }
.showcase-lightbox__backdrop { position: absolute; inset: 0; border: 0; padding: 0; background: rgba(2,10,14,.96); cursor: zoom-out; }
.showcase-lightbox__close { position: fixed; z-index: 2; top: 22px; right: 22px; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.45); background: transparent; color: white; font-size: 1.9rem; line-height: 1; cursor: pointer; transition: background .25s ease, color .25s ease; }
.showcase-lightbox__close:hover { background: white; color: var(--black); }
.showcase-lightbox__stage { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2vw, 28px); width: 100%; }
.showcase-lightbox__nav { flex: 0 0 auto; width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.45); background: transparent; color: white; font-size: 1.3rem; cursor: pointer; transition: background .25s ease, color .25s ease; }
.showcase-lightbox__nav:hover { background: white; color: var(--black); }
.showcase-lightbox__frame { position: relative; flex: 0 1 auto; width: min(1920px, calc(100vw - 180px), calc(70svh * 16 / 9)); margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #05141c; transform: scale(.94); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.showcase-lightbox.is-open .showcase-lightbox__frame { transform: none; }
.showcase-lightbox__frame img { width: 100%; height: 100%; object-fit: contain; }
.showcase-lightbox__meta { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; color: white; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.showcase-lightbox__meta b { color: var(--ocean-light); font-weight: 700; }
.showcase-lightbox__thumbs { position: relative; z-index: 1; display: flex; gap: 8px; max-width: min(1920px, calc(100vw - 180px)); overflow-x: auto; padding-bottom: 2px; }
.showcase-lightbox__thumbs button { flex: 0 0 auto; width: 96px; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid transparent; border-radius: 6px; padding: 0; background: none; opacity: .45; cursor: pointer; transition: opacity .25s ease, border-color .25s ease; }
.showcase-lightbox__thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.showcase-lightbox__thumbs button:hover { opacity: .8; }
.showcase-lightbox__thumbs button[aria-current="true"] { border-color: var(--ocean-light); opacity: 1; }

/* Shared editorial sections */
.section { padding-block: clamp(80px, 9vw, 150px); }





/* Showcases page: fixed sidebar + masonry columns */
/* Showcases page: top nav, sticky category bar, masonry columns */
.sc-page { --sc-gap: 8px; padding-top: 82px; background: var(--black); color: var(--white); }
.sc-page .site-header, .sc-page .site-header.is-scrolled { height: 82px; background: rgba(7,24,32,.96); box-shadow: 0 1px rgba(255,255,255,.08); }
.sc-cats { position: sticky; z-index: 50; top: 82px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(7,24,32,.96); }
.sc-cats__inner { display: flex; justify-content: center; gap: 8px; padding-block: 12px; overflow-x: auto; scrollbar-width: none; }
.sc-cats button { flex: 0 0 auto; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 8px 18px; background: none; color: rgba(255,255,255,.72); font-size: .85rem; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.sc-cats button:hover { border-color: rgba(255,255,255,.45); color: var(--white); }
.sc-cats button[aria-pressed="true"] { border-color: var(--white); background: var(--white); color: var(--deep-blue); }
.sc-cats button:focus-visible { outline: 2px solid var(--ocean-light); outline-offset: 3px; }
.sc-main { min-height: 100vh; padding: var(--sc-gap); }
.sc-grid { columns: 4; column-gap: var(--sc-gap); transition: opacity .22s ease; }
.sc-grid.is-switching { opacity: 0; }
.sc-tile { display: block; width: 100%; margin: 0 0 var(--sc-gap); overflow: hidden; border: 0; padding: 0; background: var(--deep-blue); cursor: zoom-in; break-inside: avoid; }
.sc-tile[hidden] { display: none; }
.sc-tile img { width: 100%; height: auto; transition: transform .5s ease, opacity .3s ease; }
.sc-tile:hover img { transform: scale(1.03); }
.sc-tile:focus-visible { outline: 2px solid var(--ocean-light); outline-offset: -2px; }





/* Interior pages */
.page-booking .site-header, .page-booking .site-header:not(.is-scrolled) { background: var(--navy); box-shadow: 0 1px rgba(255,255,255,.08); }


.lightbox { position: fixed; z-index: 400; inset: 0; display: grid; place-items: center; visibility: hidden; opacity: 0; transition: .25s ease; }
.lightbox.is-open { visibility: visible; opacity: 1; }
.lightbox__backdrop { position: absolute; inset: 0; border: 0; background: rgba(2,10,14,.94); }
.lightbox__content { position: relative; z-index: 1; max-width: min(1100px, calc(100% - 40px)); max-height: 88svh; }
.lightbox__content img { max-height: 78svh; width: auto; margin-inline: auto; object-fit: contain; }
.lightbox__close { position: fixed; z-index: 2; top: 24px; right: 24px; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.5); background: transparent; color: white; font-size: 2rem; cursor: pointer; }



.location-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 50px; align-items: stretch; }
.location-details { padding: 45px; background: var(--deep-blue); color: white; }
.location-details h2 { margin: 12px 0 25px; font-family: var(--font-display); font-size: 4.2rem; font-weight: var(--weight-display); line-height: .85; }
.location-details address { font-style: normal; }
.location-contacts { display: grid; gap: 14px; margin: 24px 0; }
.location-contacts dt { color: #8fb4c4; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.location-contacts dd { display: grid; gap: 2px; margin: 4px 0 0; }
.location-contacts a:hover { color: var(--ocean-light); }
/* Contact hero: full-screen photo, form panel on the left */
.contact-hero { position: relative; display: flex; min-height: 100svh; isolation: isolate; color: var(--white); }
.contact-hero__bg { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(3,15,22,.55), rgba(3,15,22,.25)); }
.contact-panel { width: min(100%, 560px); padding: calc(var(--header-height) + 36px) clamp(24px, 4vw, 56px) 48px; background: rgba(7,24,32,.88); }
.contact-panel__head { display: flex; align-items: center; gap: 22px; margin-bottom: 22px; }
.contact-panel__head img { width: 150px; height: auto; border-right: 1px solid rgba(255,255,255,.25); padding-right: 22px; }
.contact-panel__head .eyebrow { color: var(--ocean-light); }
.contact-panel__head h1 { margin: 2px 0 0; font-family: var(--font-display); font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 700; line-height: 1; text-transform: uppercase; }
.contact-panel__intro { margin: 0 0 26px; color: #c9d4d8; line-height: 1.55; }
.contact-form { display: grid; gap: 14px; }
.contact-field { display: flex; align-items: baseline; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.28); }
.contact-field:focus-within { border-color: var(--ocean-light); }
.contact-field span { flex: none; font-family: var(--font-display); font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.contact-field input, .contact-field textarea { width: 100%; border: 0; padding: 10px 0; background: transparent; color: var(--white); }
.contact-field input:focus, .contact-field textarea:focus { outline: none; }
.contact-field--message { display: grid; gap: 10px; border: 0; }
.contact-field--message textarea { min-height: 130px; border: 1px solid rgba(255,255,255,.28); border-radius: 4px; padding: 12px; background: rgba(255,255,255,.04); resize: vertical; }
.contact-field--message textarea:focus { border-color: var(--ocean-light); }
.contact-form__send { min-height: 50px; margin-top: 8px; border: 0; border-radius: 4px; background: var(--ocean); color: var(--white); font-size: .9rem; font-weight: 700; cursor: pointer; transition: background .2s ease; }
.contact-form__send:hover { background: var(--ocean-light); }
.contact-form__status { margin: 0; font-size: .82rem; }
.contact-form__status[data-tone="error"] { color: #ffb4a8; }
.contact-form__status[data-tone="ok"] { color: #8be0b4; }
.contact-panel__note { margin: 22px 0; color: #8fa3ab; font-size: .78rem; line-height: 1.55; }
.contact-quick { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid rgba(52,166,214,.6); border-radius: 6px; padding: 16px 18px; background: rgba(23,126,170,.12); }
.contact-quick__text strong { display: block; font-size: .95rem; }
.contact-quick__text small { color: #a9bcc3; font-size: .78rem; }
.contact-quick__links { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.contact-quick__links a { display: grid; justify-items: center; gap: 4px; color: #c9d4d8; font-size: .66rem; }
.contact-quick__links img { width: 40px; height: 40px; transition: transform .2s ease; }
.contact-quick__links a:hover img, .contact-quick__links a:focus-visible img { transform: translateY(-3px); }
.location-map { min-height: 470px; border: 0; width: 100%; filter: saturate(.55) contrast(1.1); }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.aboutus { position: relative; background: var(--navy); color: white; }
.aboutus__track { position: relative; height: 250vh; }
.aboutus__pin { position: sticky; top: 0; display: grid; height: 100vh; height: 100svh; overflow: hidden; place-items: center; }
.aboutus__backdrop { position: absolute; inset: 0; opacity: var(--about-backdrop, 1); }
.aboutus__backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.aboutus__backdrop::after { position: absolute; inset: 0; background: rgba(4,18,26,.34); content: ""; }
.aboutus__frame { position: relative; z-index: 1; overflow: hidden; width: min(var(--about-width, 300px), 95vw); height: min(var(--about-height, 400px), 85vh); }
.aboutus__frame img { width: 100%; height: 100%; object-fit: contain; }
.aboutus__headline { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; }
.aboutus__headline h2 { display: flex; flex-direction: column; gap: 4px; margin: 0; font-family: var(--font-display); font-size: clamp(2.8rem, 7vw, 5.5rem); font-weight: var(--weight-display); line-height: .92; text-transform: uppercase; }
:is(:lang(zh), :lang(ko), :lang(ja)) .aboutus__headline h2 { line-height: 1.2; }
.aboutus__word { display: block; will-change: transform; }
.aboutus__word--start { transform: translateX(calc(var(--about-shift, 0px) * -1)); }
.aboutus__word--end { transform: translateX(var(--about-shift, 0px)); }
/* Top padding stays small: the pinned image already leaves slack below itself
   when it unsticks, so a full pad on top reads as dead space. */
.aboutus__content { position: relative; z-index: 1; padding: clamp(4px, 1vw, 14px) 0 clamp(62px, 8vw, 118px); background: var(--navy); }
/* Width tracks the fully expanded frame: min(1550px, 95vw), per about-expand.js. */
.aboutus__copy { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); align-items: start; width: min(1550px, 95vw); margin-inline: auto; }
.aboutus__intro .eyebrow { color: var(--white); }
.aboutus__lead { margin: 14px 0 24px; font-family: var(--font-display); font-size: clamp(1.7rem, 2.8vw, 2.6rem); font-weight: var(--weight-display); line-height: 1.12; text-wrap: balance; }
.aboutus__intro p:not(.aboutus__lead) { max-width: 44rem; margin: 0 0 16px; color: #bdc7ca; font-size: clamp(.98rem, 1.1vw, 1.08rem); line-height: 1.6; }
/* Certificate: cream paper, double gold rule (outline + inset ::before), MARINA logo under the list. */
.aboutus__credentials { --cert-gold: #b08d4f; position: relative; padding: clamp(40px, 3.6vw, 56px) clamp(32px, 3.4vw, 56px); border-radius: 3px; background: radial-gradient(ellipse at center, #fbf8f0 0%, #f3ecdb 100%); color: #26323a; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.4); outline: 2px solid var(--cert-gold); outline-offset: -12px; }
.aboutus__credentials::before { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(176,141,79,.55); pointer-events: none; }
.aboutus__credentials h3 { margin: 0 0 18px; color: var(--deep-blue); font-family: var(--font-display); font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: var(--weight-display); line-height: 1.1; }
.aboutus__credentials ul { position: relative; margin: 0; padding: 0; list-style: none; }
.aboutus__credentials li { padding: 11px 0; border-bottom: 1px dashed rgba(176,141,79,.45); color: #3c474d; font-size: clamp(.92rem, 1vw, 1rem); line-height: 1.5; text-wrap: balance; }
.aboutus__credentials li:last-child { border-bottom: 0; }
.aboutus__marina { display: block; width: 64px; height: auto; margin: 24px auto 0; }
.yachts { padding-block: clamp(70px, 8vw, 120px); background: var(--white); }
.yachts__head { margin-bottom: clamp(28px, 3.5vw, 48px); }
.yachts__head h2 { margin: 10px 0 0; font-family: var(--font-display); font-size: clamp(2.8rem, 5.6vw, 5rem); font-weight: var(--weight-display); line-height: .9; letter-spacing: -.015em; }
.yachts__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
.yacht-card { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--deep-blue); color: var(--white); }
.yacht-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(3,15,22,.78)); pointer-events: none; }
.yacht-card__main { width: 100%; height: 100%; object-fit: cover; transition: opacity .18s ease; }
.yacht-card__main.is-swapping { opacity: 0; }
.yacht-card__thumbs { position: absolute; z-index: 2; top: clamp(12px, 1.6vw, 22px); right: clamp(12px, 1.6vw, 22px); display: grid; gap: 8px; width: clamp(64px, 12%, 112px); }
.yacht-card__thumbs button { aspect-ratio: 4 / 3; overflow: hidden; border: 2px solid rgba(255,255,255,.55); border-radius: 8px; padding: 0; background: var(--deep-blue); opacity: .7; cursor: pointer; transition: opacity .25s ease, border-color .25s ease, transform .25s ease; }
.yacht-card__thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.yacht-card__thumbs button:hover { opacity: 1; transform: translateX(-3px); }
.yacht-card__thumbs button[aria-pressed="true"] { border-color: var(--white); opacity: 1; }
.yacht-card__thumbs button:focus-visible { outline: 2px solid var(--ocean-light); outline-offset: 2px; }
.yacht-card__copy { position: absolute; z-index: 1; right: calc(clamp(12px, 1.6vw, 22px) + clamp(64px, 12%, 112px) + 16px); bottom: clamp(20px, 3vw, 40px); left: clamp(20px, 3vw, 44px); max-width: 34rem; }
.yacht-card__copy h3 { margin: 0 0 10px; font-family: var(--font-display); font-size: clamp(1.9rem, 3vw, 3rem); font-weight: var(--weight-display); line-height: 1; }
.yacht-card__copy p { margin: 0; color: rgba(255,255,255,.88); font-size: clamp(.86rem, 1vw, .96rem); line-height: 1.5; }
/* Shop */
.shop { padding-top: var(--header-height); background: var(--navy); color: white; }
.shop-eyebrow { display: inline-block; color: var(--ocean-light); font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.shop-title { margin: 12px 0 0; font-family: var(--font-display); font-size: clamp(2.8rem, 5.6vw, 4.6rem); font-weight: var(--weight-display); line-height: .94; }
.shop-title--small { font-size: clamp(2.1rem, 3.4vw, 3.1rem); }

.shop-ticker { overflow: hidden; border-block: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); }
.shop-ticker__track { display: flex; width: max-content; align-items: center; gap: 22px; padding: 12px 0; animation: shop-ticker 34s linear infinite; }
.shop-ticker__track span { color: #a8bcc4; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.shop-ticker__track i { width: 4px; height: 4px; border-radius: 50%; background: var(--ocean); }
@keyframes shop-ticker { to { transform: translateX(-50%); } }

.shop-collection { padding-block: clamp(34px, 4vw, 56px) clamp(52px, 6vw, 84px); }
.shop-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(24px, 3vw, 40px); }
.shop-head__link { flex-shrink: 0; color: #a8bcc4; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.shop-head__link:hover { color: white; }
.shop-head__link span { display: inline-block; margin-left: 8px; transition: transform .25s ease; }
.shop-head__link:hover span { transform: translateX(4px); }

.shop-grid { display: grid; gap: clamp(14px, 1.6vw, 22px); }
.shop-grid--feature { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: clamp(14px, 1.6vw, 22px); }
.shop-card { display: grid; gap: 12px; }
.shop-card__media { position: relative; display: grid; overflow: hidden; aspect-ratio: 4 / 3; align-items: center; justify-items: center; border-radius: 12px; background: linear-gradient(170deg, #f6f9fa, #dfe9ed); }
/* Sits over the placeholder panel: drop a photo into resources/img/shop/ and it
   covers the label, leave the slot empty and the label shows instead. */
.shop-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.shop-card__media:hover img { transform: scale(1.04); }
.shop-card__placeholder { color: #8ba3ad; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.6rem); letter-spacing: .02em; }
.shop-card__badge { position: absolute; top: 12px; left: 12px; z-index: 1; border-radius: 999px; padding: 5px 12px; background: var(--ocean); color: white; font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.shop-card__foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.shop-card__foot strong { display: block; font-size: .92rem; }
.shop-card__foot small { display: block; margin-top: 2px; color: #8ba0a8; font-size: .74rem; }
.shop-card__meta { display: grid; gap: 3px; text-align: right; }
.shop-card__price { color: #c6d6dc; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.shop-card__meta a { color: var(--ocean-light); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.shop-card__meta a span { display: inline-block; margin-left: 5px; transition: transform .25s ease; }
.shop-card__meta a:hover span { transform: translateX(4px); }

.shop-specs { border-block: 1px solid rgba(255,255,255,.12); }
.shop-specs__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 48px); padding-block: clamp(26px, 3vw, 40px); }
.shop-specs__row small { display: block; color: var(--ocean-light); font-size: .64rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.shop-specs__row strong { display: block; margin: 6px 0 4px; font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: var(--weight-display); }
.shop-specs__row span { color: #8ba0a8; font-size: .8rem; }

.shop-detail { padding-block: clamp(56px, 7vw, 104px); }
.shop-detail__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 70px); align-items: start; }
.shop-detail p { max-width: 38rem; margin: 18px 0 26px; color: #b3c2c8; }
.shop-button { display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; border: 1px solid var(--ocean); background: var(--ocean); color: white; font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; transition: background .25s ease, border-color .25s ease; }
.shop-button:hover { border-color: var(--ocean-light); background: var(--ocean-light); }
.shop-button span { display: inline-block; margin-left: 10px; }
.shop-points { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.shop-points li { border-top: 1px solid rgba(255,255,255,.12); padding: 18px 0; }
.shop-points li:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.shop-points strong { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.shop-points span { display: block; margin-top: 5px; color: #8ba0a8; font-size: .85rem; }

.shop-contact { padding-block: clamp(52px, 6vw, 92px); border-top: 1px solid rgba(255,255,255,.12); }
.shop-contact__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: clamp(24px, 3vw, 40px); }
.shop-contact__row a { display: grid; gap: 4px; align-content: center; min-height: 88px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 16px 18px; transition: border-color .25s ease, background .25s ease; }
.shop-contact__row a:hover { border-color: var(--ocean); background: rgba(23,126,170,.14); }
.shop-contact__row strong { font-size: .88rem; overflow-wrap: anywhere; }
.shop-contact__row small { color: #8ba0a8; font-size: .72rem; }

/* Booking form */
.bf { padding-block: calc(var(--header-height) + 42px) clamp(64px, 8vw, 110px); background: var(--off-white); }
.bf__masthead { display: flex; align-items: center; gap: 22px; padding-bottom: clamp(24px, 3vw, 40px); }
.bf__brand small { display: block; color: #5d6b70; font-size: .84rem; letter-spacing: .02em; }
.bf__brand h1 { margin: 2px 0 0; font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
.bf__layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: clamp(18px, 2vw, 30px); align-items: start; }
.bf__steps { display: grid; gap: clamp(14px, 1.6vw, 22px); min-width: 0; }

.bf-step { overflow: hidden; border-radius: 10px; background: white; box-shadow: 0 1px 3px rgba(7,37,51,.07); }
.bf-step[hidden] { display: none; }
.bf-step__bar { margin: 0; padding: 12px 20px; background: var(--ocean-light); color: white; font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.bf-step__body { padding: clamp(16px, 2vw, 26px); }
.bf-intro { margin: 6px 0 22px; color: #68767a; font-size: .86rem; }
.bf-label { margin: 22px 0 12px; color: #8a979b; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.bf-label:first-child { margin-top: 0; }

.book-card__icon[data-icon="fishing"] { -webkit-mask-image: url(../img/icons/fishing.svg); mask-image: url(../img/icons/fishing.svg); }
.book-card__icon[data-icon="joiner"], .nav-drop__icon[data-icon="joiner"] { -webkit-mask-image: url(../img/icons/joiner.svg); mask-image: url(../img/icons/joiner.svg); }
.book-card__icon[data-icon="charter"], .nav-drop__icon[data-icon="charter"] { -webkit-mask-image: url(../img/icons/charter.svg); mask-image: url(../img/icons/charter.svg); }

.bf-schedule { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(18px, 2.4vw, 34px); }
.bf-calendar { border: 1px solid #e2e6e7; border-radius: 8px; padding: 16px; }
.bf-calendar__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; font-size: .9rem; }
.bf-calendar__nav { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #dfe4e5; border-radius: 6px; background: white; cursor: pointer; }
.bf-calendar__nav:hover { border-color: var(--ocean); }
.bf-calendar__nav::before { width: 13px; height: 13px; background-color: var(--deep-blue); -webkit-mask: url(../img/icons/arrow.svg) center/contain no-repeat; mask: url(../img/icons/arrow.svg) center/contain no-repeat; content: ""; }
.bf-calendar__nav--next::before { transform: scaleX(-1); }
.bf-calendar__weekdays, .bf-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bf-calendar__weekdays { margin-bottom: 6px; color: #96a2a6; font-size: .62rem; font-weight: 600; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.bf-day { display: grid; aspect-ratio: 1; place-items: center; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--deep-blue); font-size: .8rem; }
.bf-day--empty { visibility: hidden; }
.bf-day--open { background: #eef4f6; cursor: pointer; }
.bf-day--open:hover { background: #d7ecf5; }
.bf-day--past { color: #c6cdcf; cursor: default; }
.bf-day.is-today { border-color: #4caf7d; }
.bf-day.is-selected, .bf-day.is-selected:hover { background: #21b573; color: white; font-weight: 600; }
.bf-day--blocked { background: #fbe8e5; color: #b4584e; cursor: not-allowed; text-decoration: line-through; }
.bf-calendar__selected { margin: 14px 0 0; color: #68767a; font-size: .76rem; }
.bf-time.is-blocked { background: #f4f6f6; color: #b3bcbf; cursor: not-allowed; text-decoration: line-through; }
/* Fixed-schedule trips state their departure instead of offering a choice. */
.bf-fixed-time { display: grid; gap: 4px; border: 1px solid #b6e3c9; border-radius: 8px; padding: 14px 16px; background: #edf9f2; }
.bf-fixed-time strong { color: #1c7a4d; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.bf-fixed-time span { color: #1c7a4d; font-size: .95rem; font-weight: 600; }

.bf-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bf-time { min-height: 40px; border: 1px solid #dfe4e5; border-radius: 6px; background: white; font-size: .8rem; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.bf-time:hover { border-color: var(--ocean-light); }
.bf-time.is-active { border-color: #21b573; background: #21b573; color: white; font-weight: 600; }

.bf-rows { display: grid; gap: 8px; }
.bf-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid #e2e6e7; border-radius: 8px; padding: 12px 15px; background: #fafbfb; }
/* A class-level `display` beats the browser's [hidden] rule, so restate it. */
.bf-row[hidden], .bf-step[hidden] { display: none; }
.bf-row__text strong { display: block; font-size: .85rem; }
.bf-row__text small { color: #8a979b; font-size: .7rem; }
.bf-row__value { font-size: .95rem; font-weight: 600; white-space: nowrap; }
.bf-stepper { display: flex; align-items: center; gap: 4px; }
.bf-stepper button { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #dfe4e5; border-radius: 6px; background: white; font-size: 1rem; line-height: 1; cursor: pointer; }
.bf-stepper button:hover { border-color: var(--ocean); color: var(--ocean); }
.bf-stepper span { min-width: 26px; font-size: .9rem; font-weight: 600; text-align: center; }

.bf-addons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bf-addon { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #e2e6e7; border-radius: 8px; padding: 12px 14px; background: white; }
.bf-addon.is-active { border-color: #21b573; background: #f2fbf6; }
.bf-addon__text strong { display: block; font-size: .84rem; }
.bf-addon__text small { color: #8a979b; font-size: .72rem; }
.bf-addon__toggle { border: 1px solid #dfe4e5; border-radius: 6px; padding: 7px 13px; background: #f4f6f6; font-size: .74rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.bf-addon.is-active .bf-addon__toggle { border-color: #21b573; background: #21b573; color: white; }
.bf-continue { margin-top: 20px; border: 1px solid var(--deep-blue); border-radius: 6px; padding: 12px 24px; background: var(--deep-blue); color: white; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.bf-continue:hover { border-color: var(--ocean); background: var(--ocean); }

.bf-checks { display: grid; gap: 10px; margin-bottom: 24px; }
.bf-checks label { display: flex; align-items: flex-start; gap: 10px; font-size: .82rem; cursor: pointer; }
.bf-checks input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--ocean); flex-shrink: 0; }
/* Guest details: label stacked above its control, two per row on desktop. */
.bf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-bottom: 16px; }
.bf-grid label { display: flex; min-width: 0; flex-direction: column; gap: 7px; color: #58666c; font-size: .74rem; font-weight: 600; }
.bf-grid__caption { display: block; }
.bf-grid__caption b { color: var(--ocean); font-weight: 600; }
.bf-grid label small { color: #97a2a6; font-weight: 400; text-transform: none; }
.bf-grid input { width: 100%; min-height: 46px; border: 1px solid #dfe4e5; border-radius: 6px; padding: 0 14px; background: white; color: var(--deep-blue); font-weight: 400; }
.bf-grid input:hover { border-color: #c3cbce; }
.bf-grid input:focus-visible { border-color: var(--ocean); outline: 2px solid rgba(23,126,170,.18); outline-offset: 0; }
.bf-grid input::placeholder { color: #a9b3b7; }

.bf-field { margin-bottom: 20px; }
.bf-field label { display: block; margin-bottom: 7px; color: #58666c; font-size: .74rem; font-weight: 600; }
.bf-field input, .bf-field textarea { width: min(100%, 420px); min-height: 46px; border: 1px solid #dfe4e5; border-radius: 6px; padding: 0 14px; background: white; color: var(--deep-blue); font-weight: 400; }
.bf-field textarea { width: 100%; min-height: 92px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.bf-field input::placeholder, .bf-field textarea::placeholder { color: #a9b3b7; }
.bf-field input:focus-visible, .bf-field textarea:focus-visible { border-color: var(--ocean); outline: 2px solid rgba(23,126,170,.18); outline-offset: 0; }

.bf-error { margin: 0; color: #b4584e; font-size: .78rem; }
.bf-terms { max-height: 240px; overflow-y: auto; margin-bottom: 26px; border: 1px solid #e2e6e7; border-radius: 8px; padding: 16px 18px; background: #fafbfb; }
.bf-terms h4 { margin: 14px 0 4px; color: var(--ocean); font-size: .74rem; font-weight: 600; letter-spacing: .04em; }
.bf-terms h4:first-child { margin-top: 0; }
.bf-terms p { margin: 0; color: #5d6b70; font-size: .8rem; line-height: 1.5; }
.bf-review { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; margin: 0 0 22px; border: 1px solid #e2e6e7; border-radius: 8px; padding: 18px; background: #fafbfb; }
.bf-review dt { color: #97a2a6; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; }
.bf-review dd { margin: 3px 0 0; font-size: .86rem; font-weight: 600; overflow-wrap: anywhere; }
.bf-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bf-step--done { border: 1px solid #21b573; }
.bf-step__bar--done { background: #21b573; }
.bf-confirm__label { margin: 0; color: #97a2a6; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.bf-confirm__ref { margin: 6px 0 14px; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.9rem); font-weight: var(--weight-display); letter-spacing: .02em; }
.bf-confirm__next { margin: 0 0 20px; color: #68767a; font-size: .82rem; line-height: 1.5; }
.bf-summary__submit.is-busy { background: #7f9aa6; cursor: progress; }

.bf-summary { position: sticky; top: calc(var(--header-height) - 22px); overflow: hidden; border-radius: 10px; background: white; box-shadow: 0 1px 3px rgba(7,37,51,.07); }
.bf-summary__bar { margin: 0; padding: 12px 20px; background: var(--ocean); color: white; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.bf-summary__body { padding: 20px; }
.bf-summary__meta { display: grid; gap: 13px; margin: 0 0 18px; }
.bf-summary__meta dt { color: #97a2a6; font-size: .66rem; letter-spacing: .04em; }
.bf-summary__meta dd { margin: 2px 0 0; font-size: .84rem; font-weight: 600; line-height: 1.35; }
.bf-summary__lines { display: grid; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.bf-summary__lines li { display: flex; justify-content: space-between; gap: 10px; color: #68767a; font-size: .74rem; }
.bf-summary__totals { display: grid; gap: 8px; border-top: 1px solid #eceff0; padding-top: 16px; }
.bf-summary__line { display: flex; justify-content: space-between; gap: 10px; font-size: .82rem; }
.bf-summary__line--total { border-top: 1px solid #eceff0; padding-top: 10px; font-size: .95rem; font-weight: 600; }
.bf-summary__line--total span:last-child { color: #21b573; }
.bf-summary__line--muted { color: #8a979b; font-size: .74rem; }
.bf-summary__submit { width: 100%; margin-top: 18px; border: 0; border-radius: 6px; padding: 14px; background: var(--deep-blue); color: white; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .2s; }
.bf-summary__submit:hover:not(:disabled) { background: var(--ocean); }
.bf-summary__submit:disabled { background: #c3cbce; cursor: not-allowed; }
.bf-summary__note { margin: 10px 0 0; color: #97a2a6; font-size: .68rem; line-height: 1.45; text-align: center; }
/* Checkout (checkout.html) and booking status (booking-status.html) */
.co-steps { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 0 auto; padding: 0; color: #97a2a6; font-size: .76rem; font-weight: 600; list-style: none; counter-reset: step; }
.co-steps li { display: flex; align-items: center; gap: 8px; counter-increment: step; }
.co-steps li::before { content: counter(step); display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid #cfd6d8; border-radius: 50%; font-size: .7rem; }
.co-steps .is-done { color: #1c7a4d; }
.co-steps .is-done::before { border-color: #21b573; background: #21b573; color: white; }
.co-steps [aria-current="step"] { color: var(--deep-blue); }
.co-steps [aria-current="step"]::before { border-color: var(--ocean); background: var(--ocean); color: white; }
.co-missing { max-width: 620px; }
.co-notice { margin: 0 0 18px; border: 1px solid #f0d9a8; border-radius: 8px; padding: 12px 16px; background: #fdf6e6; color: #7a5410; font-size: .84rem; }
.co-trip-addons { grid-column: 1 / -1; }
.co-edit { color: var(--ocean); font-size: .8rem; font-weight: 600; text-decoration: underline; }
.co-keypoints { display: grid; gap: 8px; margin: 0 0 16px; padding-left: 18px; color: #3e4c52; font-size: .86rem; line-height: 1.5; }
.co-policies { margin-bottom: 18px; }
.co-policies summary { margin-bottom: 12px; color: var(--ocean); font-size: .8rem; font-weight: 600; cursor: pointer; }
.co-paynow { border-top: 1px solid #eceff0; padding-top: 10px; font-size: .9rem; font-weight: 700; }
.co-paynow span:last-child { color: var(--ocean); }
.co-error { margin-top: 12px; line-height: 1.45; }
.co-error a, .co-status a { color: inherit; font-weight: 600; text-decoration: underline; }
.co-methods { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.co-methods img { width: auto; height: 18px; object-fit: contain; }
.co-status { max-width: 760px; }
.co-secondary { margin-left: 10px; border-color: #cfd6d8; background: white; color: var(--deep-blue); }

/* Service pages (services/*.html): gallery strip, intro, packages, legend, policies */
.svc .bf-summary { top: calc(var(--header-height) + 16px); }
/* booking.html: experience listing */
.book-head { margin-bottom: 20px; }
.book-head h1 { margin: 0 0 6px; font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 700; line-height: 1; text-transform: uppercase; }
.book-head p { margin: 0; color: #52656d; }
.book-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.book-filters button { border: 1px solid #d7dcde; border-radius: 999px; padding: 8px 16px; background: white; color: var(--deep-blue); font-size: .8rem; font-weight: 600; cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.book-filters button:hover { border-color: var(--ocean); }
.book-filters button[aria-pressed="true"] { border-color: var(--deep-blue); background: var(--deep-blue); color: white; }
.book-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.book-card[hidden] { display: none; }
.book-card__link { display: flex; height: 100%; flex-direction: column; overflow: hidden; border-radius: 10px; background: white; box-shadow: 0 1px 3px rgba(7,37,51,.08); transition: transform .25s ease, box-shadow .25s ease; }
.book-card__link:hover, .book-card__link:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(7,37,51,.14); }
.book-card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--deep-blue); }
.book-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.book-card__link:hover .book-card__media img { transform: scale(1.04); }
.book-card__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.book-card__meta { color: var(--deep-blue); font-size: .74rem; font-weight: 600; }
.book-card__title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; line-height: 1.15; }
.book-card__summary { display: -webkit-box; overflow: hidden; color: #52656d; font-size: .86rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.book-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.book-card__tags span { border-radius: 4px; padding: 3px 9px; background: #eef1f2; color: #3e4c52; font-size: .72rem; }
.book-card__facts { color: #68767a; font-size: .76rem; }
.book-card__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: auto; border-top: 1px solid #e2e6e7; padding-top: 12px; color: #68767a; font-size: .76rem; }
.book-card__category { display: inline-flex; align-items: center; gap: 7px; color: var(--deep-blue); font-size: .78rem; font-weight: 600; }
.book-card__icon { flex: none; width: 20px; height: 20px; background-color: var(--ocean); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }
.book-card__price { color: var(--deep-blue); font-size: 1.35rem; font-weight: 700; white-space: nowrap; }
.book-card__price small { color: #8a979b; font-size: .74rem; font-weight: 500; }
/* services.html: three compact groups */
.sg-head { margin-bottom: 22px; }
.sg-head h1 { margin: 0 0 6px; font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 700; line-height: 1; text-transform: uppercase; }
.sg-head p { margin: 0 0 16px; color: #52656d; }
.sg-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-jump a { border: 1px solid #d7dcde; border-radius: 999px; padding: 8px 16px; background: white; font-size: .8rem; font-weight: 600; transition: border-color .2s ease, color .2s ease; }
.sg-jump a:hover { border-color: var(--ocean); color: var(--ocean); }
.sg { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); overflow: hidden; margin-bottom: 18px; border-radius: 12px; background: white; box-shadow: 0 1px 3px rgba(7,37,51,.08); scroll-margin-top: calc(var(--header-height) + 12px); }
.sg__media { position: relative; min-height: 260px; }
.sg__img { width: 100%; height: 100%; object-fit: cover; contain: size; }
.sg__gallery { position: absolute; bottom: 16px; left: 16px; border-radius: 999px; padding: 9px 18px; background: rgba(255,255,255,.92); box-shadow: 0 4px 14px rgba(2,12,18,.25); color: var(--deep-blue); font-size: .8rem; font-weight: 600; transition: background .2s ease, color .2s ease; }
.sg__gallery:hover, .sg__gallery:focus-visible { background: var(--deep-blue); color: var(--white); }
.sg__body { padding: clamp(20px, 2.4vw, 32px); }
.sg__body h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 700; line-height: 1.1; }
.sg__body > p { margin: 0 0 16px; color: #52656d; font-size: .92rem; line-height: 1.55; }
.sg-list { display: grid; margin: 0; padding: 0; border-top: 1px solid #e2e6e7; list-style: none; }
.sg-list a { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid #e2e6e7; padding: 11px 8px; transition: background .15s ease; }
.sg-list a:hover, .sg-list a:focus-visible { background: #f2fafd; }
.sg-list__text strong { display: block; font-size: .92rem; }
.sg-list__text small { color: #7b878b; font-size: .74rem; }
.sg-list__price { color: var(--deep-blue); font-size: .98rem; font-weight: 700; white-space: nowrap; }
.sg-list__price small { color: #8a979b; font-size: .7rem; font-weight: 500; }
.sg-more { margin: 6px 0 0; color: #52656d; font-size: .9rem; }
.sg-more a { color: var(--ocean); font-weight: 600; text-decoration: underline; }
.svc-gallery { display: flex; gap: 12px; height: clamp(260px, 30vw, 400px); margin: 0 0 clamp(28px, 3vw, 40px); padding: 0; list-style: none; }
.svc-gallery__item { flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 10px; background: var(--deep-blue); cursor: pointer; transition: flex-grow .55s cubic-bezier(.2, .8, .2, 1); }
.svc-gallery__item:hover, .svc-gallery__item:focus-visible { flex-grow: 3.4; }
.svc-gallery__item:focus-visible { outline: 3px solid var(--ocean-light); outline-offset: 2px; }
.svc-gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.svc-head { max-width: 62rem; margin-bottom: clamp(24px, 3vw, 36px); }
.svc-head__meta { margin: 0 0 6px; color: var(--ocean); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.svc-head h1 { margin: 0 0 12px; font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 700; line-height: 1; text-transform: uppercase; }
.svc-head__summary { margin: 0 0 20px; color: #3e4c52; font-size: 1rem; line-height: 1.6; }
.svc-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.svc-facts div { border-radius: 8px; padding: 10px 14px; background: white; box-shadow: 0 1px 3px rgba(7,37,51,.07); }
.svc-facts dt { color: #8a979b; font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.svc-facts dd { margin: 3px 0 0; font-size: .84rem; font-weight: 600; line-height: 1.35; }
.bf-day--closed { color: #c6cdcf; cursor: default; }
.svc-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 0; color: #68767a; font-size: .7rem; }
.svc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.svc-legend span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.svc-legend__open::before { background: #eef4f6; box-shadow: inset 0 0 0 1px #cfdde2; }
.svc-legend__booked::before { background: #fbe8e5; }
.svc-legend__closed::before { box-shadow: inset 0 0 0 1px #dfe4e5; }
.svc-addons__title { margin: 0 0 6px; font-size: 1.15rem; font-weight: 600; }
.svc-addons__intro { margin: 0 0 18px; color: #68767a; font-size: .86rem; }
.bf-addon__details { display: block; margin-top: 3px; line-height: 1.4; }
.svc-packages { display: grid; gap: 10px; }
.svc-package { overflow: hidden; border: 1px solid #d7dcde; border-radius: 8px; background: white; transition: border-color .2s ease, box-shadow .2s ease; }
.svc-package:hover { border-color: var(--ocean-light); }
.svc-package.is-active { border-color: var(--ocean); box-shadow: inset 0 0 0 1px var(--ocean); }
.svc-package__pick { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; border: 0; padding: 14px 16px; background: none; text-align: left; cursor: pointer; }
.svc-package.is-active .svc-package__pick { background: #f2fafd; }
.svc-package__text strong { display: block; font-size: .95rem; }
.svc-package__text small { color: #7b878b; font-size: .76rem; }
.svc-package__price { color: var(--deep-blue); font-size: 1.1rem; font-weight: 600; white-space: nowrap; }
.svc-package__price small { color: #7b878b; font-size: .72rem; font-weight: 500; }
.svc-package__details { border-top: 1px solid #e2e6e7; padding: 14px 16px 16px; }
.svc-package__details h3 { margin: 0 0 8px; color: #8a979b; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.svc-package__details ul { display: grid; gap: 6px; margin: 0; padding-left: 18px; color: #3e4c52; font-size: .84rem; line-height: 1.45; }
.svc-policies { display: grid; gap: 0; padding-block: 6px; }
.svc-policies details { border-bottom: 1px solid #eceff0; }
.svc-policies details:last-child { border-bottom: 0; }
.svc-policies summary { padding: 12px 0; font-size: .86rem; font-weight: 600; cursor: pointer; }
.svc-policies p { margin: 0 0 14px; color: #52656d; font-size: .84rem; line-height: 1.55; }

.site-footer { background: var(--black); color: var(--white); }
.site-footer__top { display: grid; grid-template-columns: minmax(220px, .75fr) 2fr; gap: 90px; padding-block: 80px 64px; }
.site-footer__brand img { width: 132px; height: auto; }
.site-footer__credentials { display: grid; gap: 4px; margin: 20px 0 0; padding: 0; list-style: none; color: #bbc2c5; font-size: .72rem; line-height: 1.4; }
.site-footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; }
.site-footer__nav div { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.site-footer h3 { margin: 0 0 12px; color: var(--gray); font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.site-footer a, .site-footer address { color: #e1e4e5; font-size: .84rem; font-style: normal; }
.site-footer a:hover { color: var(--ocean-light); }
.site-footer__bottom { display: flex; justify-content: space-between; border-top: 1px solid #293238; padding-block: 22px; color: #8c969b; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 768px) {
  .site-footer__top { grid-template-columns: 1fr; gap: 48px; }
  .site-footer__top, .site-footer__brand, .site-footer__nav, .site-footer__nav > div { min-width: 0; }
  .site-footer__nav { grid-template-columns: 1fr 1fr; gap: 24px; }
  .site-footer a, .site-footer address { overflow-wrap: anywhere; }
  .site-footer__bottom { gap: 20px; flex-direction: column; }
}