/* halkidikiyachts.com design tokens (🎨 Head of Design, DIRECTION.md 2026-11-11, «A + λίγο C»): the ONE place
   colours, typefaces, type sizes, radii and motion are defined. Declared in src/design-language.json. */
:root {
  /* palette — contrast pairs computed in DIRECTION.md §4 */
  --color-abyss: #08161E;
  --color-deep: #0F2A36;
  --color-hull: #F4F0E8;
  --color-sand: #E9DFCC;
  --color-brand: #009ACB;
  --color-sea-ink: #005E7F;
  --color-sun: #F26B3A;
  --color-sun-hover: #FF7D4D;
  --color-ink: #33454E;
  --color-teal-glow: #0E5A55;
  --color-teal-dark: #0A2F33;
  --color-white: #FFFFFF;
  --color-mist: rgb(244 240 232 / 0.72);
  --color-rule: rgb(244 240 232 / 0.16);
  --color-rule-dark: rgb(8 22 30 / 0.18);
  --color-abyss-92: rgb(8 22 30 / 0.92);
  --color-abyss-70: rgb(8 22 30 / 0.7);
  --color-abyss-0: rgb(8 22 30 / 0);
  --color-scrim: rgb(8 22 30 / 0.96);
  --color-scrim-soft: rgb(8 22 30 / 0.6);
  --color-ghost: rgb(0 154 203 / 0.5);

  /* typefaces: Sofia Sans Extra Condensed 800 (display caps), Sofia Sans (text), Piazzolla Italic (sand-band quote) */
  --font-display: 'Sofia Sans Extra Condensed', 'Arial Narrow', sans-serif;
  --font-text: 'Sofia Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-accent: 'Piazzolla', Georgia, serif;

  /* type scale */
  --text-label: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lead: clamp(1.0625rem, 1.6vw, 1.25rem);
  --text-nav: 1rem;
  --text-cta: 1.1875rem;
  --text-plate: clamp(1.375rem, 2vw, 1.75rem);
  --text-spec: clamp(1.625rem, 2.4vw, 2.125rem);
  --text-way: clamp(1.75rem, 2.4vw, 2.125rem);
  --text-quote: clamp(1.875rem, 3vw, 2.875rem);
  --text-card: clamp(2.75rem, 4.4vw, 4.5rem);
  --text-h2: clamp(3.25rem, 6.4vw, 6.5rem);
  --text-h1: clamp(3rem, 6.6vw, 6.25rem);
  --text-hero: clamp(3rem, 6vw, 6.5rem);
  --text-name: clamp(5.25rem, 12vw, 12.5rem);
  --text-ghost: clamp(4rem, 13.6vw, 13.5rem);
  --text-icon: 2rem;

  /* layout */
  --gut: clamp(16px, 4.4vw, 64px);
  --max: 100rem;
  --measure: 62ch;
  --tap: 44px;
  --sec: clamp(88px, 9.7vw, 140px);

  /* radius */
  --radius-cta: 2px;
  --radius-sm: 4px;
  --radius-arch: 999px;

  /* motion */
  --dur-fast: 150ms;
  --dur-base: 400ms;
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

/* halkidikiyachts.com — DIRECTION.md (🎨 Head of Design, 2026-11-11). Mobile first (390), zero CLS (every <img>
   sized, fixed-ratio boxes), 44 px targets, no third-party requests. Fonts: self-hosted WOFF2 subsets. */

@font-face { font-family: 'Sofia Sans Extra Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/ssec-800-latin.9e26fb6773.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Sofia Sans Extra Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/ssec-800-latin-ext.8ef92447c3.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Sofia Sans Extra Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/ssec-800-cyrillic.5a842e9615.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Sofia Sans Extra Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/ssec-800-greek.f9d0c1f11b.woff2) format('woff2'); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family: 'Sofia Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ss-400-latin.530c2b2550.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Sofia Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ss-400-latin-ext.bb5d8634f3.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Sofia Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ss-400-cyrillic.9d287b6265.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Sofia Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ss-400-greek.4f997180fe.woff2) format('woff2'); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family: 'Sofia Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/ss-600-latin.205a358fc6.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Sofia Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/ss-600-latin-ext.7109c9f5a7.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Sofia Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/ss-600-cyrillic.0f53a66440.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Sofia Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/ss-600-greek.38fb992489.woff2) format('woff2'); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family: 'Piazzolla'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/pz-400i-latin.0caceaa957.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Piazzolla'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/pz-400i-latin-ext.1ab517f199.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Piazzolla'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/pz-400i-cyrillic.114c23caa5.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Piazzolla'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/pz-400i-greek.b410edde05.woff2) format('woff2'); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--color-abyss); scroll-padding-top: 96px; }
body { margin: 0; background: var(--color-abyss); color: var(--color-hull); font: 400 var(--text-base)/1.6 var(--font-text); overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--color-hull); text-decoration: underline; text-decoration-color: var(--color-sun); text-decoration-thickness: 2px; text-underline-offset: 6px; }
a:hover { color: var(--color-white); }
:focus-visible { outline: 2px solid var(--color-hull); outline-offset: 3px; }
.light :focus-visible, .on-light :focus-visible { outline-color: var(--color-abyss); }
p { margin: 0 0 1em; }
h1, h2, h3, h4, h5, h6 { margin: 1.3em 0 0.5em; line-height: 1.1; }
.caps, h1, h2 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.88; }
.caps em, h1 em, h2 em { font-style: normal; color: var(--color-brand); }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow { display: block; font: 600 var(--text-label)/1.2 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-brand); }
.on-light .eyebrow { color: var(--color-sea-ink); }
.skip { position: absolute; left: 8px; top: -80px; z-index: 100; background: var(--color-sun); color: var(--color-abyss); padding: 12px 16px; font-weight: 600; text-decoration: none; }
.skip:focus, .skip:hover { top: 8px; color: var(--color-abyss); }

/* ── Enquire CTA and arrow links ───────────────────────────── */
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: var(--tap); padding: 15px 22px; background: var(--color-sun); color: var(--color-abyss); border-radius: var(--radius-cta); font: 800 var(--text-cta)/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; }
.cta:hover { background: var(--color-sun-hover); color: var(--color-abyss); }
.cta i, .more i { font-style: normal; font-family: var(--font-text); font-weight: 600; transition: transform var(--dur-fast) var(--ease-out-soft); }
.cta:hover i, .more:hover i { transform: translateX(4px); }
.more { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); margin-top: 24px; font: 800 var(--text-cta)/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-hull); text-decoration: none; border-bottom: 2px solid var(--color-sun); align-self: flex-start; }
.on-light .more { color: var(--color-abyss); }

/* ── Header ────────────────────────────────────────────────── */
.masthead { position: sticky; top: 0; z-index: 50; background: var(--color-abyss); border-bottom: 1px solid var(--color-rule); }
.has-hero .masthead { position: fixed; inset: 0 0 auto; background: linear-gradient(180deg, var(--color-abyss-70), var(--color-abyss-0)); border-bottom-color: transparent; transition: background-color var(--dur-fast) linear; }
.has-hero.is-scrolled .masthead, .menu-open .masthead { background: var(--color-abyss-92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: var(--color-rule); }
.masthead__bar { display: flex; align-items: center; gap: 24px; height: 72px; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.brand { display: inline-flex; align-items: center; gap: 14px; min-height: var(--tap); margin-right: auto; color: var(--color-hull); text-decoration: none; }
.brand img { width: 52px; height: auto; }
.brand span { font: 800 1.3125rem/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.brand:hover { color: var(--color-hull); }
.menu-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); color: var(--color-hull); text-decoration: none; }
.menu-btn__bars { display: block; width: 24px; height: 2px; background: currentColor; box-shadow: 0 7px 0 currentColor, 0 -7px 0 currentColor; }
.nav { display: none; }
.nav:target, .menu-open .nav { display: flex; flex-direction: column; position: fixed; inset: 72px 0 0 0; overflow-y: auto; background: var(--color-abyss); padding: 24px var(--gut) 32px; }
.menu-open body { overflow: hidden; }
.nav__list { list-style: none; margin: 0; padding: 0; }
.nav__list a { display: flex; align-items: center; min-height: 56px; font: 800 2.75rem/1 var(--font-display); text-transform: uppercase; color: var(--color-hull); text-decoration: none; }
.nav__list a[aria-current='page'] { color: var(--color-brand); }
.langs { display: flex; gap: 8px; list-style: none; margin: auto 0 0; padding: 24px 0 0; border-top: 1px solid var(--color-rule); }
.langs a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); font: 600 var(--text-label)/1 var(--font-text); letter-spacing: 0.1em; color: var(--color-hull); text-decoration: none; }
.langs a[aria-current='true'] { color: var(--color-brand); }
.nav .cta { margin-top: 24px; }
.nav__close { display: inline-flex; align-items: center; min-height: var(--tap); margin-top: 8px; color: var(--color-mist); }
.mb-close, .mb-open { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (min-width: 1024px) {
  .masthead__bar { height: 88px; gap: 32px; }
  .brand img { width: 64px; }
  .brand span { font-size: 1.5625rem; }
  .menu-btn, .nav .nav__close { display: none; }
  .nav, .nav:target { display: flex; flex-direction: row; align-items: center; gap: 28px; position: static; padding: 0; overflow: visible; background: none; }
  .nav__list { display: flex; gap: 28px; }
  .nav__list a { min-height: var(--tap); font: 500 var(--text-nav)/1 var(--font-text); text-transform: none; color: var(--color-hull); }
  .nav__list a[aria-current='page'] { color: var(--color-hull); text-decoration: underline; text-decoration-color: var(--color-sun); text-decoration-thickness: 2px; text-underline-offset: 8px; }
  .langs { margin: 0; padding: 0; border: 0; gap: 2px; }
  .langs a { min-width: 36px; }
  .nav .cta { margin: 0; }
}

/* ── Home hero: the boat from above, bow up ────────────────── */
.hero { position: relative; min-height: 640px; height: 100svh; overflow: hidden; background: radial-gradient(120% 90% at 78% 40%, var(--color-teal-glow) 0%, var(--color-teal-dark) 45%, var(--color-abyss) 80%); }
.hero__photo { position: absolute; inset: 0; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--color-scrim) 0%, var(--color-abyss-92) 42%, var(--color-abyss-0) 68%); }
.hero__copy { position: absolute; z-index: 2; left: var(--gut); right: var(--gut); bottom: 196px; max-width: 760px; }
.hero__copy .eyebrow { display: none; }
.hero h1 { margin: 0; font-size: var(--text-hero); }
.hero h1 span { display: block; }
.hero p { margin: 18px 0 0; max-width: 520px; font-size: var(--text-lead); line-height: 1.5; color: var(--color-mist); }
.plate { position: absolute; z-index: 2; inset: auto 0 0 0; border-top: 1px solid var(--color-rule); }
.plate__list, .specs { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding-block: 0; }
.plate__list, .specs { margin: 0; }
.plate__list div, .specs div { padding: 16px 0 18px 14px; border-left: 1px solid var(--color-rule); }
.plate__list div:nth-child(odd), .specs div:nth-child(odd) { border-left: 0; padding-left: 0; }
.plate__list div:nth-child(n+3), .specs div:nth-child(n+3) { border-top: 1px solid var(--color-rule); }
.plate__list dt, .specs dt { margin-bottom: 10px; font: 600 0.75rem/1.2 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-mist); }
.plate__list dd, .specs dd { margin: 0; font: 800 var(--text-plate)/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; }
@media (min-width: 900px) {
  .hero { min-height: 680px; }
  .hero__photo { inset: 0 4% 0 auto; aspect-ratio: 2722 / 3647; -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--color-abyss) 22%, var(--color-abyss) 82%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, var(--color-abyss) 22%, var(--color-abyss) 82%, transparent 100%); }
  .hero::after { background: linear-gradient(0deg, var(--color-abyss-92) 0%, var(--color-abyss-0) 26%); }
  .hero__copy { bottom: 168px; right: auto; }
  .hero__copy .eyebrow { display: block; margin-bottom: 22px; }
  .hero p { margin-top: 28px; }
  .plate__list { grid-template-columns: repeat(4, 1fr); }
  .plate__list div { padding: 24px 0 30px 22px; border-top: 0 !important; }
  .plate__list div:nth-child(odd) { border-left: 1px solid var(--color-rule); padding-left: 22px; }
  .plate__list div:first-child { border-left: 0; padding-left: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero h1 span { animation: rise 700ms var(--ease-out-soft) both; }
  .hero h1 span + span { animation-delay: 80ms; }
}
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ── Sections ─────────────────────────────────────────────── */
.sec { padding-block: var(--sec); }
.sec--tight { padding-top: 0; }
.sec-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: 40px; }
.sec-head h2 { margin: 0; font-size: var(--text-h2); max-width: 900px; }
.sec-head p { margin: 0; max-width: 380px; color: var(--color-mist); }
@media (min-width: 900px) { .sec-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 64px; } }

/* cruise cards: 7/5 alternating on deep */
.cruises { list-style: none; margin: 0; padding: 0; }
.cruise { display: grid; grid-template-columns: 1fr; margin-bottom: 24px; background: var(--color-deep); }
.cruise__ph { aspect-ratio: 4 / 3; overflow: hidden; }
.cruise__ph img { width: 100%; height: 100%; object-fit: cover; }
.cruise__tx { display: flex; flex-direction: column; padding: 28px 22px 32px; }
.cruise__n { font: 800 1.25rem/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-brand); }
.cruise h3 { margin: 20px 0 22px; font: 800 var(--text-card)/0.88 var(--font-display); text-transform: uppercase; }
.cruise h3 a { color: var(--color-hull); text-decoration: none; }
.cruise p { color: var(--color-mist); max-width: 440px; margin: 0; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 28px 0 0; margin-top: 28px; border-top: 1px solid var(--color-rule); font: 600 0.875rem/1.3 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; }
@media (min-width: 900px) {
  .cruise { grid-template-columns: 7fr 5fr; min-height: 560px; }
  .cruise:nth-child(even) { grid-template-columns: 5fr 7fr; }
  .cruise:nth-child(even) .cruise__ph { order: 2; }
  .cruise__ph { aspect-ratio: auto; }
  .cruise__tx { padding: 56px; }
  .tags { margin-top: auto; padding-top: 36px; }
}

/* sand band with the arch photo */
.riviera { background: var(--color-sand); color: var(--color-abyss); }
.riviera .wrap { display: grid; gap: 44px; align-items: center; padding-block: 88px; }
.riviera blockquote { margin: 0; font: italic 400 var(--text-quote)/1.25 var(--font-accent); letter-spacing: -0.005em; }
.riviera blockquote p { margin: 0 0 0.4em; }
.riviera blockquote strong { font-weight: 400; color: var(--color-sea-ink); }
.riviera .eyebrow { margin-bottom: 28px; }
.arch { aspect-ratio: 4 / 5; max-width: 320px; border-radius: var(--radius-arch) var(--radius-arch) 0 0; overflow: hidden; }
.arch img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .riviera .wrap { grid-template-columns: 1fr 1fr; gap: 80px; padding-block: 120px; } .arch { max-width: none; } }

/* fleet: full-bleed photo with the giant name, then the spec plate */
.fleet { position: relative; height: 68svh; min-height: 420px; max-height: 820px; overflow: hidden; }
.fleet img { width: 100%; height: 100%; object-fit: cover; }
.fleet::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--color-abyss-92), var(--color-abyss-0) 50%); }
.fleet__t { position: absolute; z-index: 2; left: var(--gut); right: var(--gut); bottom: 40px; }
.fleet__t h2, .fleet__t .name { margin: 8px 0 0; font: 800 var(--text-name)/0.88 var(--font-display); text-transform: uppercase; }
.fleet__t h2 a { color: var(--color-hull); text-decoration: none; }
.specs { border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
.specs dd { font-size: var(--text-spec); }
@media (min-width: 900px) {
  .fleet { height: 78svh; }
  .fleet__t { bottom: 56px; }
  .specs { grid-template-columns: repeat(4, 1fr); }
  .specs div { padding: 30px 0 34px 22px; border-top: 0 !important; }
  .specs div:nth-child(odd) { border-left: 1px solid var(--color-rule); padding-left: 22px; }
  .specs div:first-child { border-left: 0; padding-left: 0; }
}
.second { display: grid; gap: 32px; margin-top: 64px; align-items: center; }
.second__ph { aspect-ratio: 3 / 2; overflow: hidden; }
.second__ph img { width: 100%; height: 100%; object-fit: cover; }
.second h3 { margin: 16px 0 18px; font: 800 clamp(3rem, 5vw, 5rem)/0.88 var(--font-display); text-transform: uppercase; }
.second p { color: var(--color-mist); max-width: 480px; }
@media (min-width: 900px) { .second { grid-template-columns: 5fr 7fr; gap: 56px; margin-top: 96px; } }

/* "A day on …": one big + four */
.mosaic { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mosaic li { overflow: hidden; aspect-ratio: 1; }
.mosaic li:first-child { grid-column: span 2; aspect-ratio: 4 / 3; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .mosaic { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 300px 300px; } .mosaic li, .mosaic li:first-child { aspect-ratio: auto; } .mosaic li:first-child { grid-column: auto; grid-row: span 2; } }

/* the old page's own text, in full */
.story { padding-block: var(--sec); border-top: 1px solid var(--color-rule); }

/* ── Enquiry (hull) — the same component on every page ─────── */
.enq { background: var(--color-hull); color: var(--color-abyss); }
.enq .wrap { display: grid; gap: 44px; padding-block: 88px; }
.enq h2 { margin: 22px 0 0; font-size: clamp(3.5rem, 7vw, 7.25rem); }
.enq h2 em { color: var(--color-sea-ink); }
.enq p { margin-top: 24px; max-width: 460px; color: var(--color-ink); }
.ways { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--color-abyss); }
.ways a { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: var(--tap); padding: 26px 0; border-bottom: 1px solid var(--color-rule-dark); color: var(--color-abyss); text-decoration: none; font: 800 var(--text-way)/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; }
.ways a span { font: 500 var(--text-sm)/1.2 var(--font-text); letter-spacing: 0; text-transform: none; color: var(--color-ink); text-align: right; }
.ways .cta { width: 100%; margin-top: 32px; padding: 22px; font-size: 1.375rem; }
@media (min-width: 900px) { .enq .wrap { grid-template-columns: 6fr 5fr; gap: 80px; padding-block: 130px; } }

/* ── Inner pages ──────────────────────────────────────────── */
.page-hero { position: relative; height: 70svh; min-height: 460px; max-height: 860px; overflow: hidden; }
.page-hero > img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--color-scrim) 0%, var(--color-abyss-70) 38%, var(--color-abyss-0) 70%); }
.page-hero__t { position: absolute; z-index: 2; left: var(--gut); right: var(--gut); bottom: 40px; }
.page-hero h1 { margin: 12px 0 0; font-size: var(--text-h1); max-width: 18ch; }
.page-hero--yacht { height: 78svh; }
.page-hero--yacht .name { font: 800 var(--text-name)/0.88 var(--font-display); text-transform: uppercase; display: block; }
.page-hero--yacht h1 { font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1; max-width: 32ch; }
.page-head { padding-top: 56px; }
.page-head h1 { margin: 12px 0 0; font-size: var(--text-h1); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; list-style: none; margin: 0; padding: 0; font: 600 var(--text-label)/1.2 var(--font-text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-mist); }
.crumbs li + li::before { content: '/'; margin-right: 10px; }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--color-hull); text-decoration: none; }
.light .crumbs ol { color: var(--color-ink); }
.light .crumbs a { color: var(--color-abyss); }
.kicker { margin: 0; }
.body-grid { display: grid; gap: 40px; padding-block: 56px var(--sec); }
@media (min-width: 1024px) { .body-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; } }
.side { align-self: start; }
@media (min-width: 1024px) { .side { position: sticky; top: 112px; } }
.side__card { padding: 28px; background: var(--color-deep); }
.side__card .ways { border-top-color: var(--color-hull); }
.side__card .ways a { color: var(--color-hull); border-bottom-color: var(--color-rule); padding: 18px 0; font-size: 1.5rem; }
.side__card .ways a span { color: var(--color-mist); }
.side__card .ways .cta { color: var(--color-abyss); font-size: var(--text-cta); padding: 18px; }

/* the old content: 62-character column */
.prose { max-width: var(--measure); }
.prose h1, .prose h2 { font-size: clamp(2.25rem, 4vw, 3.5rem); margin: 1.2em 0 0.4em; }
.prose h3 { font: 800 clamp(1.75rem, 3vw, 2.25rem)/1 var(--font-display); text-transform: uppercase; margin: 1.3em 0 0.4em; }
.prose h4, .prose h5, .prose h6 { font: 600 var(--text-label)/1.3 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-brand); margin: 2em 0 0.6em; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1em; }
.prose li { margin: 0.25em 0; }
.prose img { margin: 8px 0 16px; width: 100%; }
.prose figure { margin: 0 0 16px; }
.prose table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; margin: 0 0 1.4em; }
.prose td, .prose th { border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); padding: 10px 12px 10px 0; text-align: left; vertical-align: top; }
.prose p > a + a { margin-left: 16px; }
.prose a { overflow-wrap: anywhere; }
.light { background: var(--color-hull); color: var(--color-abyss); }
.light .prose h4, .light .prose h5, .light .prose h6 { color: var(--color-sea-ink); }
.light .prose td, .light .prose th { border-color: var(--color-rule-dark); }
.light a { color: var(--color-abyss); }
.light a:hover { color: var(--color-sea-ink); }
.map-link { display: inline-flex; align-items: center; min-height: var(--tap); }
.contact-links { list-style: none; margin: 0 0 24px; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; }
.contact-links a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 16px; border: 1px solid currentColor; border-radius: var(--radius-cta); text-decoration: none; font-weight: 600; }

/* galleries: large photos, never small tiles for the story */
.grid { list-style: none; margin: 8px 0 24px; padding: 0 !important; display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.grid__item { margin: 0; }
.tile { display: block; overflow: hidden; background: var(--color-deep); }
.tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin: 0 !important; transition: transform var(--dur-base) var(--ease-out-soft); }
.tile:hover img { transform: scale(1.03); }
.lb { width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--color-scrim); color: var(--color-hull); }
.lb::backdrop { background: var(--color-scrim); }
.lb__stage { position: absolute; inset: 56px 8px 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lb__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; min-height: 0; flex: 0 1 auto; }
.lb__caption { margin: 10px 0 0; text-align: center; }
.lb__count { margin: 4px 0 0; font-size: var(--text-label); }
.lb__btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--color-rule); background: var(--color-scrim-soft); color: var(--color-hull); font-size: var(--text-icon); line-height: 1; cursor: pointer; }
.lb__close { top: 4px; right: 8px; }
.lb__prev { bottom: 12px; left: calc(50% - 60px); }
.lb__next { bottom: 12px; left: calc(50% + 12px); }
.lb-open body { overflow: hidden; }

/* destination / journal cards: big 4:3 photos, the name in display caps over a bottom gradient */
.dest { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 900px) { .dest { grid-template-columns: 1fr 1fr; gap: 24px; } }
.dest li { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-deep); }
.dest img { width: 100%; height: 100%; object-fit: cover; }
.dest li::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--color-scrim) 0%, var(--color-abyss-0) 60%); pointer-events: none; }
.dest a { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 22px; color: var(--color-hull); text-decoration: none; font: 800 clamp(2rem, 3.4vw, 3.5rem)/0.9 var(--font-display); text-transform: uppercase; }

/* video: click-to-play with the aerial poster */
.video { display: block; margin: 0 0 16px; }
.video__play { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; overflow: hidden; background: var(--color-deep); color: var(--color-hull); cursor: pointer; }
.video__play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0 !important; }
.video__icon { position: relative; z-index: 1; width: 72px; height: 72px; border-radius: 50%; background: var(--color-sun); }
.video__icon::after { content: ''; position: absolute; left: 28px; top: 22px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--color-abyss); }
.video__label { position: absolute; z-index: 1; left: 16px; bottom: 14px; padding: 6px 10px; background: var(--color-abyss-70); font-weight: 600; }
.video__frame { width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* ── Footer: the giant ghost name ─────────────────────────── */
.foot { padding-block: 90px 40px; }
.bigname { font: 800 var(--text-ghost)/0.82 var(--font-display); text-transform: uppercase; color: var(--color-deep); -webkit-text-stroke: 1px var(--color-ghost); white-space: normal; overflow-wrap: anywhere; }
.bigname::before { content: attr(data-name); }
.foot__cols { display: grid; gap: 24px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--color-rule); }
@media (min-width: 720px) { .foot__cols { grid-template-columns: repeat(3, 1fr); } .bigname { white-space: nowrap; } }
.foot__head { margin: 0 0 4px; font: 600 var(--text-label)/1.2 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-brand); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--color-hull); text-decoration: none; }
.foot a:hover { text-decoration: underline; text-decoration-color: var(--color-sun); }
.foot__label { min-height: var(--tap); display: flex; align-items: center; }
.foot__legal { margin: 32px 0 0; color: var(--color-mist); font-size: var(--text-sm); }
.missing { padding-block: 140px 88px; }
.missing h1 { font-size: var(--text-h1); }
.crumbs li { display: flex; align-items: center; min-height: var(--tap); }
.on-light a, .enq a { color: var(--color-abyss); }
.on-light a:hover, .enq a:hover, .enq .ways a:hover { color: var(--color-sea-ink); }
.enq .cta, .enq .cta:hover, .on-light .cta, .on-light .cta:hover { color: var(--color-abyss); }

/* ── HoD fixes 11/11 10:30 ─────────────────────────────────── */
/* phone: the data plate sits below the hero copy in normal flow (never under the lead text) */
@media (max-width: 899px) {
  .hero { display: flex; flex-direction: column; justify-content: flex-end; height: auto; min-height: 100svh; }
  .hero__copy { position: relative; z-index: 2; inset: auto; padding: 120px 0 32px; margin-inline: var(--gut); max-width: none; }
  .plate { position: relative; z-index: 2; inset: auto; }
}
/* cruise pages: photos at the column's full width */
.prose--post .grid { grid-template-columns: 1fr; }
/* About: the moved home text keeps at most 2 large photos per row */
.moved { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--color-rule-dark); }
.moved .grid { grid-template-columns: 1fr 1fr; }
/* Destinations: large 4:3 cards, 2 per row on desktop, the name in display caps over the bottom gradient */
.dest-group { margin: 64px 0 24px; font-size: var(--text-h2); }
.dest { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 32px 24px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .dest { grid-template-columns: 1fr 1fr; } }
.dest li { position: static; aspect-ratio: auto; overflow: visible; background: none; }
.dest li::after { content: none; }
.dest__card { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-deep); color: var(--color-hull); text-decoration: none; }
.dest__ph, .dest__ph img { display: block; width: 100%; height: 100%; margin: 0 !important; }
.dest__ph img { object-fit: cover; }
.dest__card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--color-scrim) 0%, var(--color-abyss-0) 60%); }
.dest__name { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 22px; font: 800 clamp(2rem, 3.4vw, 3.5rem)/0.9 var(--font-display); text-transform: uppercase; }
.dest li p { margin: 16px 0 0; color: var(--color-mist); max-width: 52ch; }
.dest li > .more { margin-top: 12px; }
.dest a { position: static; inset: auto; font: inherit; text-transform: none; }
.dest a.dest__card { position: relative; inset: auto; }
.dest a.more { font: 800 var(--text-cta)/1 var(--font-display); text-transform: uppercase; }
.body-grid--single { grid-template-columns: minmax(0, 1fr); }
/* Our Yachts: after each yacht block, the page's own text and its gallery across the full width (large photos) */
.prose--wide { max-width: none; }
.prose--wide > p, .prose--wide > h2, .prose--wide > h3, .prose--wide > h4 { max-width: var(--measure); }
.prose--wide .grid { grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 900px) { .prose--wide .grid { grid-template-columns: 1fr 1fr; } }
/* HoD notes 11/11 11:04: a text column without a sticky side card is centred; its photos fill the column, ≤ 2 per row */
.body-grid--single .prose, .prose--wide { max-width: var(--measure); margin-inline: auto; }
.prose--wide > p, .prose--wide > h2, .prose--wide > h3, .prose--wide > h4 { max-width: none; }
.body-grid--single .grid, .prose--wide .grid { grid-template-columns: 1fr 1fr; }