/* ---- fonts, served from our own server (latin + latin-ext covers English and Turkish) ---- */
@font-face{
  font-family:"Bricolage Grotesque"; font-style:normal; font-weight:300 700;
  font-stretch:100%; font-display:swap;
  src:url("../fonts/bricolage-grotesque-300-700-latin-ext.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:"Bricolage Grotesque"; font-style:normal; font-weight:300 700;
  font-stretch:100%; font-display:swap;
  src:url("../fonts/bricolage-grotesque-300-700-latin.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:"Work Sans"; font-style:normal; font-weight:200 700; font-display:swap;
  src:url("../fonts/work-sans-200-700-latin-ext.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:"Work Sans"; font-style:normal; font-weight:200 700; font-display:swap;
  src:url("../fonts/work-sans-200-700-latin.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:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/ibm-plex-mono-400-latin-ext.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:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/ibm-plex-mono-400-latin.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:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/ibm-plex-mono-500-latin-ext.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:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/ibm-plex-mono-500-latin.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;
}

  :root{
    /* ---- ink & surface: warm-tinted neutrals (wood, not carbon) ---- */
    --ink:#12171A;
    --ink-soft:#4C555A;
    --mono-black:#0B0C0C;
    --mono-gray:#8B8880;
    --cream:#F7F5F1;
    --sand:#FAF6F0;   /* soft warm off-white — the footer's upper (brand) area */
    --deep:#04181E;
    --line: rgba(18,23,26,0.12);
    --mono-line: rgba(255,255,255,0.14);

    /* ---- one accent: aged brass. --brass on light, --brass-lift on dark ---- */
    --brass:#8A6D3B;
    --brass-lift:#C6A46A;

    /* ---- type roles ---- */
    --font-display:"Bricolage Grotesque", ui-sans-serif, system-ui, "Helvetica Neue", sans-serif;
    --font-body:"Work Sans", ui-sans-serif, system-ui, sans-serif;
    --font-mono:"IBM Plex Mono", ui-monospace, monospace;

    /* ---- z-index scale (no magic numbers) ---- */
    --z-hero:1; --z-curtain:2; --z-deck:3; --z-float:40; --z-nav:100; --z-grain:200;

    /* ---- corner radius: brand signature. Reference is 0 everywhere;
       Frida is round — like the winged-F mark and the hulls. ---- */
    --r-xs:8px; --r-sm:14px; --r-md:22px; --r-lg:34px; --r-pill:999px;

    /* page side gutter — used site-wide, not just in the hero pin */
    --edge: clamp(1.6rem, 5vw, 6rem);
  }
  *{box-sizing:border-box;}
  /* NOTE: no scroll-behavior:smooth here — it breaks GSAP ScrollTrigger's
     scrub/progress reading. Eased scrolling is done with Lenis (site.js). */
  html{-webkit-text-size-adjust:100%; overscroll-behavior-y:none;}

  /* Lenis smooth-scroll */
  html.lenis, html.lenis body{ height:auto; }
  .lenis.lenis-smooth{ scroll-behavior:auto !important; }
  .lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
  .lenis.lenis-stopped{ overflow:hidden; }
  .lenis.lenis-smooth iframe{ pointer-events:none; }
  body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:var(--font-body);
    font-optical-sizing:auto;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block;}
  ::selection{ background:var(--brass); color:#fff; }
  h1,h2,h3{ font-family:var(--font-display); margin:0; text-wrap:balance; }
  p{ text-wrap:pretty; }
  a{ color:inherit; }
  .wrap{ max-width:1180px; margin:0 auto; padding:0 1.6rem; }
  .eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }

  [data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
  [data-reveal].is-visible{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1; transform:none; transition:none; } }

  /* =========================================================
     CONCEPT C — "Usta Eli" (Sanlorenzo yönü)
     ========================================================= */
  /* white under the whole content column so pin-spacer gaps (Quote pin etc.)
     never flash the cream body colour between sections */
  main#content{ background:#fff; }
  .c-section{ background:#fff; color:var(--mono-black); font-family:var(--font-body); }
  .c-section h1, .c-section h2, .c-section h3{ font-family:var(--font-display); }

  .c-nav-bar{
    position:fixed; top:0; left:0; right:0; z-index:var(--z-nav);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    background: linear-gradient(180deg, rgba(10,10,10,.4), rgba(10,10,10,.04));
    transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
  }
  .c-nav-bar.on-light{
    background:rgba(255,255,255,.72);
    box-shadow:0 1px 0 rgba(16,24,27,.07);
    backdrop-filter:blur(18px) saturate(1.3);
    -webkit-backdrop-filter:blur(18px) saturate(1.3);
  }
  .c-nav{
    display:flex; align-items:center; justify-content:space-between; padding:.85rem 0;
    font-size:.86rem; position:relative; z-index:2; color:var(--mono-black); transition:color .3s ease;
  }
  .c-nav .mark{ display:flex; align-items:center; }
  .c-nav .mark img{ height:34px; width:auto; display:block; }
  .c-nav .links{ display:flex; gap:1.8rem; align-items:center; }
  .c-nav .links > a{ text-decoration:none; opacity:.75; }
  .c-nav .links > a:hover{ opacity:1; text-decoration:underline; }
  .c-nav.on-dark{ color:#fff; }

  /* ---- Models mega-menu (desktop) ---- */
  .c-has-menu{ position:relative; }
  .c-menu-trigger{
    display:inline-flex; align-items:center; gap:.32rem;
    text-decoration:none; opacity:.75; cursor:pointer; background:none; border:0;
    color:inherit; font:inherit; letter-spacing:inherit; padding:0;
  }
  .c-has-menu:hover .c-menu-trigger,
  .c-has-menu:focus-within .c-menu-trigger{ opacity:1; }
  .c-menu-trigger::after{
    content:""; width:5px; height:5px; border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor; transform:translateY(-1px) rotate(45deg);
    transition:transform .25s ease; opacity:.7;
  }
  .c-has-menu:hover .c-menu-trigger::after,
  .c-menu-trigger[aria-expanded="true"]::after{ transform:translateY(1px) rotate(-135deg); }

  .c-megamenu{
    position:absolute; top:100%; left:50%; transform:translateX(-50%);
    padding-top:14px; /* hover bridge */
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .2s ease, visibility 0s linear .2s, transform .22s ease;
  }
  .c-has-menu:hover .c-megamenu,
  .c-has-menu:focus-within .c-megamenu,
  .c-menu-trigger[aria-expanded="true"] + .c-megamenu{
    opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s;
  }
  .mm-inner{
    display:grid; grid-template-columns:1fr 1fr; gap:1.3rem 1.9rem;
    min-width:460px; padding:1.4rem 1.7rem 1.1rem;
    background:rgba(255,255,255,.95);
    -webkit-backdrop-filter:blur(22px) saturate(1.3); backdrop-filter:blur(22px) saturate(1.3);
    border-radius:var(--r-md); box-shadow:0 24px 60px rgba(8,24,30,.22);
    color:var(--ink); transform:translateY(-4px);
    transition:transform .22s ease;
  }
  .c-has-menu:hover .mm-inner,
  .c-has-menu:focus-within .mm-inner{ transform:translateY(0); }
  .mm-cat{
    display:block; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--brass); margin-bottom:.55rem;
  }
  .mm-col ul{ list-style:none; margin:0; padding:0; }
  .mm-col li a{
    display:block; padding:.34rem 0; font-size:.92rem; color:var(--ink); opacity:.78;
    text-decoration:none; transition:opacity .18s ease, color .18s ease, transform .18s ease;
  }
  .mm-col li a:hover{ opacity:1; color:var(--brass); transform:translateX(3px); }
  /* same family, different length (Sorrento 8/6, Frida 800/600…) sit on
     one row instead of stacking, so the pairing reads at a glance */
  .mm-col li.mm-pair{ display:flex; align-items:baseline; gap:.6rem; }
  .mm-col li.mm-pair a{ padding-right:0; white-space:nowrap; }
  .mm-col li.mm-pair a + a{ position:relative; padding-left:.7rem; }
  .mm-col li.mm-pair a + a::before{
    content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
    width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.4;
  }
  .mm-all{
    grid-column:1/-1; border-top:1px solid var(--line); margin-top:.3rem; padding-top:.85rem;
    font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-soft); text-decoration:none; transition:color .18s ease;
  }
  .mm-all:hover{ color:var(--brass); }
  .c-nav .enquire{
    border:1px solid currentColor; border-radius:var(--r-xs); padding:.5rem 1.15rem; font-size:.8rem; text-decoration:none; letter-spacing:.02em;
  }

  /* language switch — TR / EN. Behaviour comes later; this is the control. */
  .c-nav-right{ display:flex; align-items:center; gap:1.4rem; }
  .c-lang{ display:flex; align-items:center; gap:.4rem;
    font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; }
  .c-lang a{ color:inherit; text-decoration:none; opacity:.5; transition:opacity .2s ease, color .2s ease; }
  .c-lang a:hover{ opacity:.9; }
  .c-lang a.is-active{ opacity:1; color:var(--brass-lift); }
  .c-lang .sep{ opacity:.3; }
  .c-nav-bar.on-light .c-lang a.is-active{ color:var(--brass); }

  /* hamburger — two bars, morph to X. hidden on desktop */
  .c-burger{
    display:none; width:34px; height:34px; padding:0; border:0; background:none;
    cursor:pointer; position:relative; color:inherit;
  }
  .c-burger span{
    position:absolute; left:6px; right:6px; height:1.5px; background:currentColor;
    transition:transform .28s ease, opacity .2s ease;
  }
  .c-burger span:nth-child(1){ top:13px; }
  .c-burger span:nth-child(2){ top:20px; }
  .c-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
  .c-burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

  /* mobile drawer — full-screen, dark, large links */
  .c-drawer{
    position:fixed; inset:0; z-index:calc(var(--z-nav) - 1);
    background:rgba(10,10,10,.42); color:#fff;
    backdrop-filter:blur(16px) saturate(1.4);
    -webkit-backdrop-filter:blur(16px) saturate(1.4);
    display:flex; flex-direction:column; justify-content:safe center; gap:2rem;
    padding:5rem var(--edge) 3rem; overflow-y:auto; -webkit-overflow-scrolling:touch;
    opacity:0; transform:translateY(-8px); pointer-events:none; visibility:hidden;
    transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
  }
  .c-drawer.is-open{ opacity:1; transform:none; pointer-events:auto; visibility:visible; transition-delay:0s; }

  /* mobile-only nautical compass — bleeds off the lower-right, spins in when the
     drawer opens; the needle tracks real north (see site.js). Never on desktop. */
  .c-drawer-compass{
    position:absolute; right:-17vw; bottom:-16vw;
    width:min(74vw, 350px); aspect-ratio:1; z-index:0;
    pointer-events:none;
    opacity:0; transform:rotate(-24deg) scale(.86);
    transition:opacity .6s ease .08s, transform .95s cubic-bezier(.22,1,.36,1) .08s;
  }
  .c-drawer.is-open .c-drawer-compass{ opacity:.6; transform:rotate(0) scale(1); }
  .c-drawer-compass .cdc-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
  /* the rotating needle assembly — pivot is the SVG hub centre */
  .c-drawer-compass #cdc-needle{ transform-box:view-box; transform-origin:425.72px 419.47px; }
  /* fallback when there is no live heading: needle hunts for north a little */
  .c-drawer-compass:not(.is-live) #cdc-needle{ animation:cdcNeedle 11s ease-in-out infinite; }
  .c-drawer-compass.is-live #cdc-needle{ transition:transform .12s linear; }
  @keyframes cdcNeedle{
    0%,100%{ transform:rotate(8deg); } 42%{ transform:rotate(-10deg); } 68%{ transform:rotate(4deg); }
  }
  /* iOS: a quiet cue that the compass can be woken with a tap */
  .c-drawer-compass.needs-tap{ pointer-events:auto; }
  .c-drawer-compass.needs-tap::after{
    content:"tap"; position:absolute; left:34%; top:38%;
    font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--brass-lift); text-shadow:0 1px 6px rgba(0,0,0,.5);
    animation:cdcHint 2.4s ease-in-out infinite;
  }
  @keyframes cdcHint{ 0%,100%{ opacity:.3; } 50%{ opacity:.9; } }
  @media (prefers-reduced-motion: reduce){
    .c-drawer-compass{ transition:opacity .3s ease; transform:none; }
    .c-drawer.is-open .c-drawer-compass{ transform:none; }
    .c-drawer-compass #cdc-needle, .c-drawer-compass.needs-tap::after{ animation:none; }
  }
  @media (min-width:861px){ .c-drawer-compass{ display:none; } }

  .c-drawer-nav{ display:flex; flex-direction:column; gap:1.4rem; position:relative; z-index:1; }
  .c-drawer-nav > a,
  .c-drawer-toggle{
    font-family:var(--font-display); font-size:clamp(1.8rem,7vw,2.6rem); font-weight:600;
    text-decoration:none; color:#fff; letter-spacing:-.01em;
  }
  .c-drawer-nav > a:active{ color:var(--brass-lift); }
  .c-drawer-group{ display:flex; flex-direction:column; }
  .c-drawer-toggle{
    background:none; border:0; padding:0; cursor:pointer; text-align:left;
    display:inline-flex; align-items:center; gap:.55rem;
  }
  .cdt-mark{
    width:.62em; height:.62em; position:relative; flex:0 0 auto; opacity:.7;
  }
  .cdt-mark::before, .cdt-mark::after{
    content:""; position:absolute; background:currentColor; border-radius:2px;
  }
  .cdt-mark::before{ left:0; right:0; top:calc(50% - 1px); height:2px; }
  .cdt-mark::after{
    top:0; bottom:0; left:calc(50% - 1px); width:2px;
    transition:transform .28s ease, opacity .28s ease;
  }
  .c-drawer-toggle[aria-expanded="true"] .cdt-mark::after{ transform:scaleY(0); opacity:0; }
  .c-drawer-sub{
    overflow:hidden; max-height:0; opacity:0;
    display:flex; flex-direction:column; gap:.5rem;
    transition:max-height .38s ease, opacity .3s ease, margin-top .3s ease;
  }
  .c-drawer-toggle[aria-expanded="true"] + .c-drawer-sub{
    max-height:62vh; opacity:1; margin-top:1rem; overflow-y:auto;
  }
  .c-drawer-sub a{
    font-family:var(--font-body); font-size:1.15rem; font-weight:400;
    color:rgba(255,255,255,.86); text-decoration:none; letter-spacing:0;
  }
  .c-drawer-sub a:active{ color:var(--brass-lift); }
  .dsub-cat{
    font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--brass-lift); margin-top:.7rem;
  }
  .dsub-cat:first-child{ margin-top:0; }
  .dsub-pair{ display:flex; gap:1.2rem; }
  .dsub-all{
    margin-top:.9rem; font-family:var(--font-mono) !important; font-size:.78rem !important;
    letter-spacing:.06em; text-transform:uppercase; color:var(--brass-lift) !important;
  }
  .c-drawer-lang{
    display:flex; gap:.6rem; align-items:center; margin-top:1rem; position:relative; z-index:1;
    font-family:var(--font-mono); font-size:.9rem; letter-spacing:.12em;
  }
  .c-drawer-lang a{ color:#fff; text-decoration:none; opacity:.5; }
  .c-drawer-lang a.is-active{ opacity:1; color:var(--brass-lift); }
  .c-drawer-lang span{ opacity:.3; }

  @media (max-width:860px){
    .c-nav .links, .c-nav .c-lang{ display:none; }
    .c-burger{ display:block; }
  }

  /* ---- hero + manifesto: pinned hero, wipe-slider, curtain reveal on scroll (Sanlorenzo-style) ---- */
  .c-pin{
    position:relative;
    --gap: clamp(3rem, 5.5vh, 4.6rem);
    /* deep enough that the first two lines of the manifesto are already
       readable in the strip under the hero */
    --peek: min(25vh, 225px);
  }
  .c-hero{
    position:sticky; top:0; z-index:var(--z-hero); height:100vh;
    background:var(--mono-black); color:#fff; overflow:hidden;
  }
  .c-hero .stage{ position:absolute; inset:0; transform:translateZ(0); }
  .c-hero .hero-video{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    transform:translateZ(0); backface-visibility:hidden;
  }
  .c-hero .stage-veil{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(10,10,10,.32), rgba(10,10,10,.18) 32%, rgba(10,10,10,.5) 68%, rgba(10,10,10,.9));
  }
  .c-hero .stage-content{
    position:absolute; left:0; right:0; bottom:calc(var(--peek) + var(--gap)); max-width:none; padding:0; z-index:2;
  }
  .c-hero .hero-text{
    padding:0 var(--edge);
  }
  .c-hero .kicker{ font-size:.82rem; letter-spacing:.06em; color:var(--brass-lift); margin-bottom:.9rem; }
  .c-hero h1{
    font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif;
    font-weight:200; font-size:clamp(2.1rem,5.2vw,3.9rem); line-height:1.15; letter-spacing:.02em; max-width:22ch;
    text-transform:uppercase;
  }
  .c-hero h1 b{ font-weight:300; }
  .c-hero .discover{ margin-top:1.7rem; display:inline-flex; align-items:center; gap:.5rem; color:#fff; text-decoration:none; font-size:.92rem; }
  /* the hero clip is 16:9; a portrait phone centre-crops the boat (it rides
     the left third) out of frame — bias the crop left so it stays visible */
  @media (max-width:900px){
    .c-hero .hero-video{ object-position:28% center; }
  }
  @media (max-width:640px){
    .c-pin{ --peek: min(20vh, 180px); }
    .c-hero .stage-content{ bottom:calc(var(--peek) + 1.6rem); }
    .c-hero .hero-text{ padding:0 calc(var(--edge) + .9rem) 0; }
    .c-hero h1{ font-size:clamp(1.7rem,7.4vw,2.3rem); }
    .c-hero .hero-video{ object-position:22% center; }
  }
  .c-hero .discover .arr{ display:inline-block; transition:transform .2s ease; }
  .c-hero .discover:hover .arr{ transform:translateX(3px); }

  /* Must be a FULL viewport tall (Sanlorenzo does the same): the sticky hero
     releases when .c-pin ends, and if the white panel is shorter than the
     screen the hero is still visible in the strip above it at that moment —
     it snaps from "held" to "scrolling" and you see a jump. At 100vh the
     panel covers the whole screen before the release, so it's invisible. */
  .c-manifesto{
    position:relative; z-index:var(--z-curtain); box-sizing:border-box;
    min-height:100vh; margin-top:calc(-1 * var(--peek));
    display:flex; align-items:flex-start;
    padding:2rem var(--edge) 2rem calc(var(--edge) + 2.7rem);
    /* the curtain's own corner radius: at --r-lg's fixed 34px, the corner reads as a
       clear "oval" while the card is still narrow (early in the scroll) but goes
       visually flat/sharp once the card has opened out to the full viewport width, since
       the same 34px is now a tiny fraction of a much wider edge. Scale it with viewport
       width instead, so the corner stays just as visibly rounded at both ends of the scroll. */
    --mf-r: clamp(28px, 3.4vw, 68px);
  }
  @media (max-width:640px){
    /* symmetric gutters on a phone — the desktop's extra left inset
       throws the column badly off-centre at this width */
    .c-manifesto{ padding:2rem calc(var(--edge) + 1.4rem) 4.5rem calc(var(--edge) + 1.4rem); }
  }
  .c-manifesto .mf-bg{
    position:absolute; inset:0;
    background:#fff; z-index:0;
    /* only the top corners are rounded. The bottom edge sits flush against the next
       (boat/water) section with nothing behind it to reveal, so a bottom radius there
       never actually reads as a curve — it only shows up as an ugly flat sliver right
       where the panel finishes opening (looked like the corner "sharpens"). Rounding
       only the top, where the dark hero is always behind it, keeps one consistent
       look for the whole curtain instead of a corner that behaves differently top vs bottom. */
    border-radius:var(--mf-r) var(--mf-r) 0 0;
    /* curtain closes via clip-path (compositor) instead of left/right (layout
       every scroll frame) */
    clip-path: inset(0 var(--ci,0) 0 var(--ci,0) round var(--mf-r) var(--mf-r) 0 0);
    will-change: clip-path;
  }
  /* the copy is NOT nailed to the top of the panel: --mfy (driven by the
     curtain ScrollTrigger) walks it from the panel's top edge to the panel's
     vertical centre, so by the time the white fills the screen the text is
     centred — the way Sanlorenzo's does it. */
  .c-manifesto > .wrap{
    position:relative; z-index:1; width:auto; margin:0; padding:0;
    transform:translate3d(0, var(--mfy, 0px), 0); will-change:transform;
  }
  /* touch browsers with scroll-driven animations: the curtain follows the live scroll
     offset every frame (JS adds .mf-scrolldriven and the --mf-* values, see site.js 6a) */
  .c-manifesto.mf-scrolldriven .mf-bg{
    animation:mf-curtain linear both;
    animation-timeline:scroll(root block);
    animation-range:var(--mf-start,0px) var(--mf-end,100vh);
  }
  .c-manifesto.mf-scrolldriven > .wrap{
    animation:mf-copy linear both;
    animation-timeline:scroll(root block);
    animation-range:var(--mf-start,0px) var(--mf-end,100vh);
  }
  @keyframes mf-curtain{
    from{ clip-path:inset(0 var(--mf-inset,0px) 0 var(--mf-inset,0px) round var(--mf-r) var(--mf-r) 0 0); }
    to{ clip-path:inset(0 0 0 0 round var(--mf-r) var(--mf-r) 0 0); }
  }
  @keyframes mf-copy{
    from{ transform:translate3d(0,0,0); }
    to{ transform:translate3d(0,var(--mf-shift,0px),0); }
  }
  /* phones and tablets: let the two sentences flow as one paragraph and balance the lines, so no
     line ends on a lone word (the forced break made the second sentence wrap raggedly) */
  @media (max-width:900px){
    .c-manifesto p{ text-wrap:balance; }
    .c-manifesto p br{ display:none; }
  }
  .c-manifesto .kicker{ font-size:.82rem; letter-spacing:.06em; color:var(--brass); margin-bottom:1.2rem; }
  .c-manifesto p{
    font-family:var(--font-display);
    /* matched to Sanlorenzo's manifest type — 48px at desktop */
    font-size:clamp(1.35rem,3.4vw,3rem); line-height:1.42; font-weight:300;
    max-width:24em; margin:0 0 1.6rem; letter-spacing:-.005em;
  }
  .c-manifesto p b{ font-weight:600; }

  /* ---- boat/water reveal (AB Yachts-style): sticky water loop behind,
     static boat photo lifts up on scroll, heading blurs out under it ---- */
  .c-boatwater{
    /* tall on purpose: the boat rises 1:1 with the scroll (like ab-yachts) and
       still needs room to enter and fully clear the frame */
    position:relative; height:345vh; background:var(--deep); z-index:var(--z-deck);
    /* no overlap: the manifesto is a full 100vh panel and must be allowed to
       fill the screen on its own before this section arrives (Sanlorenzo does
       the same) — overlapping it here left the white looking half-finished */
    --bw-lap: 0px;
    margin-top: calc(-1 * var(--bw-lap));
  }
  .c-boatwater .bw-sticky{
    position:sticky; top:0; height:100vh; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    /* hint the compositor so the sticky hand-off from the manifesto doesn't
       hitch while the browser promotes the video layer (no transform here —
       that would change sticky's containing block) */
    will-change:transform;
  }
  .bw-video{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    transform:translateZ(0); backface-visibility:hidden;
  }
  .bw-overlay{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(4,24,30,.45), rgba(4,24,30,.1) 38%, rgba(4,24,30,.35) 62%, var(--deep) 96%);
  }
  .bw-heading{
    position:relative; z-index:1; text-align:center; color:#fff; padding:0 1.6rem;
    will-change:transform, opacity;
    /* iOS Safari rasterises a translate3d'd text layer at a soft/blurry
       subpixel offset unless backface-visibility forces a clean layer */
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
  }
  .bw-heading .kicker{ font-size:.82rem; letter-spacing:.06em; color:var(--brass-lift); margin-bottom:1rem; }
  .bw-heading h2{
    font-size:clamp(1.8rem,4.2vw,3.1rem); font-weight:500; line-height:1.16; letter-spacing:-.01em;
    max-width:19ch; margin:0 auto;
  }
  .bw-heading h2 b{ font-weight:700; }
  .bw-boat{
    /* centred with auto margins, NOT left:50% + translateX(-50%): the image starts as a 1x1
       placeholder (width = its height), and iOS Safari's scroll-driven animation kept the -50%
       resolved against that wrong width, so the boat sat off to the left of the foam.
       left/right reach past the screen so auto margins still centre when the box is wider than it */
    position:absolute; z-index:2; left:-100vh; right:-100vh; margin:0 auto; top:100vh;
    height:126vh; width:auto; max-width:none;
    transform:translate3d(0,0,0);
    filter:drop-shadow(0 30px 46px rgba(0,0,0,.45));
    pointer-events:none; will-change:transform;
  }
  .bw-wake{
    /* the clip already has both spray trails built in with the boat's own
       gap between them — the trails converge at the clip's own top edge,
       which must land exactly on the boat's bow (same top as .bw-boat),
       or a gap opens up between the bow and the foam. */
    position:absolute; z-index:1; left:-100vh; right:-100vh; margin:0 auto; top:77vh;
    /* explicit (not auto) width — stretched well past the clip's native
       aspect ratio, because the actual spray only fills a narrow band
       down the middle of the frame; at the native width it never reaches
       past the hull, so the wake reads as if it's hiding under the boat
       instead of alongside it.
       object-fit defaults to `contain` on <video> — that was silently
       capping the rendered width at the height-constrained natural size
       no matter how wide this box got, which is why every earlier width
       bump here did nothing visible. `fill` is what actually stretches
       the frame to the box. */
    height:210vh; width:142vh; max-width:none; object-fit:fill;
    transform:translate3d(0,0,0);
    pointer-events:none; will-change:transform;
    /* shot on black, no alpha channel — screen blend drops the black
       and adds the white spray on top. Works identically on every
       browser (iOS Safari included), unlike alpha-channel video, which
       iOS never composites correctly in a plain <video> element. */
    mix-blend-mode:screen;
    filter:brightness(1.15);
  }
  /* phone + scroll-driven animations: the same motion the JS applied, run off the live scroll
     offset (site.js 6b sets --bw-from / --bw-to / --bw-travel and the class) */
  .c-boatwater.bw-scrolldriven .bw-boat,
  .c-boatwater.bw-scrolldriven .bw-wake,
  .c-boatwater.bw-scrolldriven .bw-heading,
  .c-boatwater.bw-scrolldriven .bw-side{
    animation-timeline:scroll(root block);
    animation-range:var(--bw-from,0px) var(--bw-to,100vh);
    animation-timing-function:linear; animation-fill-mode:both;
  }
  .c-boatwater.bw-scrolldriven .bw-boat, .c-boatwater.bw-scrolldriven .bw-wake{ animation-name:bw-rise; }
  .c-boatwater.bw-scrolldriven .bw-heading{ animation-name:bw-head; }
  .c-boatwater.bw-scrolldriven .bw-side{ animation-name:bw-side; }
  @keyframes bw-rise{
    from{ transform:translate3d(0,0,0); }
    to{ transform:translate3d(0,calc(-1 * var(--bw-travel,0px)),0); }
  }
  @keyframes bw-head{
    from{ opacity:1; transform:translate3d(0,0,0); }
    76.9%{ opacity:0; }
    to{ opacity:0; transform:translate3d(0,-34px,0); }
  }
  @keyframes bw-side{
    0%,30%{ opacity:0; }
    55%,100%{ opacity:1; }
  }
  /* the frame-based wake (phones) replaces the video; both share .bw-wake so every rule above,
     including the scroll-driven ones, applies to whichever is showing */
  canvas.bw-wake{ display:none; }
  .c-boatwater.bw-frames canvas.bw-wake{ display:block; }
  .c-boatwater.bw-frames video.bw-wake{ display:none; }
  .bw-side{
    position:absolute; z-index:1; top:50%; width:min(25vw,300px);
    transform:translateY(-50%); color:#fff; opacity:0; will-change:opacity;
  }
  .bw-side.left{ left:5%; text-align:left; }
  .bw-side.right{ right:5%; text-align:right; }
  .bw-side .kicker{ font-size:.84rem; letter-spacing:.06em; color:var(--brass-lift); margin-bottom:.6rem; }
  .bw-side h3{ font-size:1.55rem; font-weight:600; letter-spacing:-.01em; margin-bottom:.6rem; }
  .bw-side p{ font-size:1rem; line-height:1.5; color:rgba(255,255,255,.78); margin:0; }
  @media (max-width:900px){
    /* no room beside the narrow boat on mobile — stack the captions
       above and below it as centred bands instead of hiding them */
    .bw-side{
      display:block; position:absolute; left:var(--edge); right:var(--edge);
      width:auto; transform:none;
    }
    .bw-side.left{ top:15%; text-align:center; }
    .bw-side.right{ top:auto; bottom:14%; text-align:center; }
    .bw-side .kicker{ margin-bottom:.4rem; }
    .bw-side h3{ font-size:1.28rem; margin-bottom:.35rem; }
    .bw-side p{ font-size:.9rem; max-width:32ch; margin:0 auto; }
  }
  @media (max-width:640px){
    .bw-side.left{ top:13%; }
    .bw-side.right{ bottom:10%; }
  }
  @media (max-width:640px){
    /* taller than desktop = the lift spread over more scroll = slower, more
       deliberate; you feel the section arrive before the boat moves */
    .c-boatwater{ --bw-lap: 0px; height:285vh; }
    /* smaller shadow blur = smaller layer texture to rasterise while it moves */
    .bw-boat{ height:74vh; filter:drop-shadow(0 14px 22px rgba(0,0,0,.42)); }
    /* the wake clip's top offset/height were tuned against the desktop
       boat (126vh) — scaled down 1:1 here the boat is much shorter (74vh)
       but the wake stayed full-size, so the foam sat far below the stern.
       Shrink and lift it by the same ratio so it hugs the smaller boat. */
    /* same widen-past-native-aspect-ratio as the desktop rule above,
       scaled down with the rest of the mobile boat/wake sizing */
    .bw-wake{ top:84.5vh; height:123vh; width:82vh; }
  }
  @media (prefers-reduced-motion: reduce){
    .c-boatwater{ height:auto; --bw-lap: 0px; }
    .c-boatwater .bw-sticky{ position:relative; }
    /* no lift to scroll through: show the end of the scene as a still. The boat used to wait
       below the frame (top:100vh) for a rise that never comes, so these visitors (e.g. Windows
       with "Animation effects" off) saw an empty sea */
    .bw-heading, .bw-wake{ display:none !important; }
    .bw-boat{ top:9vh; height:82vh; transform:none; }
    .bw-side{ opacity:1; }
  }
  @media (prefers-reduced-motion: reduce) and (max-width:900px){
    .c-boatwater .bw-sticky{ height:auto; min-height:100vh; padding:2.2rem 0; flex-direction:column; gap:1.4rem; }
    .bw-side, .bw-side.left, .bw-side.right{ position:relative; top:auto; bottom:auto; left:auto; right:auto; padding:0 var(--edge); }
    .bw-boat{ position:relative; top:auto; left:auto; right:auto; height:56vh; order:1; }
    .bw-side.right{ order:2; }
  }

  /* ---- how it's built: one hull, four stages; each photo slides up over the
     last as you scroll (Aerleum "Our sectors" style), the active step lights up ---- */
  .c-craft{ background:#fff; color:var(--mono-black); position:relative; }
  .craft-inner{ display:flex; flex-direction:column; }
  .craft-head{ padding:4.5rem 1.6rem 0; max-width:640px; margin:0 auto; }
  .craft-body{ padding:1rem 1.6rem 3.5rem; max-width:640px; margin:0 auto; }
  .craft-head .kicker{ font-size:.82rem; letter-spacing:.06em; color:var(--brass); margin-bottom:1rem; }
  .craft-head h2{
    font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif;
    font-size:clamp(1.6rem,3vw,2.3rem); font-weight:300; letter-spacing:-.01em;
    line-height:1.24; max-width:18ch; margin:0;
  }
  .craft-steps{ list-style:none; margin:0; padding:0; }
  .craft-step{
    position:relative; display:grid; grid-template-columns:auto 1fr; gap:1.1rem;
    padding:1.15rem 0 1.15rem 1.4rem; border-top:1px solid var(--line);
    transition:opacity .45s ease;
  }
  .craft-step:not(.is-on){ opacity:.42; }
  .craft-step.is-selectable{ cursor:pointer; }
  .craft-step .cs-text[role="button"]:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }
  .craft-step.is-selectable:hover:not(.is-on){ opacity:.7; }
  /* active marker: a brass bar that grows down the left edge */
  .craft-step::before{
    content:""; position:absolute; left:0; top:1.15rem; bottom:1.15rem; width:2px;
    background:var(--brass); border-radius:2px;
    transform:scaleY(0); transform-origin:top;
    transition:transform .5s cubic-bezier(.5,0,.15,1);
  }
  .craft-step.is-on::before{ transform:scaleY(1); }
  .cs-num{
    font-family:var(--font-mono); font-size:.78rem; color:var(--mono-gray);
    font-variant-numeric:tabular-nums; letter-spacing:.04em; padding-top:.24rem; flex:none;
    transition:color .4s ease;
  }
  .craft-step.is-on .cs-num{ color:var(--brass); }
  .cs-text{ display:flex; flex-direction:column; }
  .cs-label{
    font-family:var(--font-display); font-weight:500; font-size:1.08rem; letter-spacing:-.01em;
    transition:transform .45s cubic-bezier(.5,0,.15,1);
  }
  .craft-step.is-on .cs-label{ transform:translateX(.15rem); }
  /* the description only shows for the active step — the clearest 1-2-3-4 cue.
     Height is reserved so the centred rail never wobbles. */
  .cs-copy{
    font-size:.86rem; color:var(--mono-gray); line-height:1.5; max-width:38ch;
    height:2.8em; overflow:hidden;
    opacity:0; transform:translateY(5px);
    transition:opacity .4s ease, transform .45s cubic-bezier(.5,0,.15,1);
  }
  .craft-step.is-on .cs-copy{ opacity:1; transform:none; }
  .cs-photo{ display:none; }
  .craft-link{
    display:inline-block; margin-top:1.8rem; font-size:.9rem; color:var(--ink);
    text-decoration:none; border-bottom:1px solid var(--brass); padding-bottom:2px;
  }
  /* prev / next: step through the build stages by hand (desktop only) */
  .craft-nav-arrows{ display:none; gap:.5rem; margin-top:1.8rem; }
  .craft-nav-btn{
    width:2.2rem; height:2.2rem; flex:none; border-radius:50%; padding:0;
    display:grid; place-items:center; cursor:pointer; color:var(--ink);
    background:transparent; border:1px solid var(--line);
    transition:background .3s ease, border-color .3s ease, color .3s ease,
      opacity .3s ease, transform .2s ease;
  }
  .craft-nav-btn svg{ width:1rem; height:1rem; display:block; }
  .craft-nav-btn:hover:not(:disabled){ background:var(--brass); border-color:var(--brass); color:#fff; }
  .craft-nav-btn:active:not(:disabled){ transform:scale(.9); }
  .craft-nav-btn:disabled{ opacity:.3; cursor:default; }
  .craft-nav-btn:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

  /* the framed photo — smaller than full-bleed, rounded, a soft drop shadow */
  .craft-stage{ display:flex; align-items:center; justify-content:center; padding:1.5rem 1.6rem 0; }
  .craft-frame{
    position:relative; width:100%; aspect-ratio:5/6; overflow:hidden;
    border-radius:var(--r-lg); background:#0a1f25;
    clip-path:inset(0 round var(--r-lg));
    box-shadow:0 40px 90px -40px rgba(10,25,30,.5);
  }
  .craft-slide{
    position:absolute; inset:0; overflow:hidden; will-change:transform;
    transform:translateY(100%);
  }
  .craft-slide[data-idx="0"]{ transform:translateY(0); }
  .craft-slide img{
    /* anchored to the top: when the frame is shorter than the photo, the crop comes off the bottom */
    width:100%; height:100%; object-fit:cover; object-position:center top; display:block;
    transform:scale(1.06); transform-origin:center top;
  }
  /* per-photo framing (0% = crop only the bottom, 50% = centred) */
  .craft-slide[data-idx="0"] img{ object-position:center 34%; }
  .craft-slide[data-idx="1"] img{ object-position:center 0%; }
  .craft-slide[data-idx="2"] img{ object-position:center 38%; }
  .craft-slide[data-idx="3"] img{ object-position:center 38%; }
  /* fallback when JS/scroll effects don't run: plain crossfade on .is-on */
  @media (prefers-reduced-motion: reduce){
    .craft-slide{ transform:none; opacity:0; transition:opacity .3s ease; }
    .craft-slide.is-on{ opacity:1; }
    .cs-copy{ transition:opacity .2s ease; }
  }

  /* phone: no sticky frame — a plain stack, each stage its own photo + text */
  @media (max-width:900px){
    .craft-stage{ display:none; }
    .craft-head{ padding:4rem 1.6rem 1.5rem; }
    .craft-body{ padding:0 1.6rem 3.5rem; }
    .craft-step, .craft-step:not(.is-on){
      display:block; padding:2.4rem 0 0; border-top:0; opacity:1;
    }
    .craft-step::before{ display:none; }
    .craft-step .cs-num{ color:var(--brass); display:inline; margin-right:.7rem; }
    .cs-text{ display:inline; }
    .cs-label{ font-size:1.15rem; }
    .cs-copy{
      display:block; height:auto; overflow:visible; opacity:1; transform:none;
      margin:.5rem 0 0; max-width:none;
    }
    .cs-photo{
      display:block; width:100%; aspect-ratio:4/5; object-fit:cover;
      border-radius:var(--r-md); margin-top:1.1rem;
      box-shadow:0 24px 60px -30px rgba(10,25,30,.45);
    }
    .craft-link{ margin-top:2.6rem; }
  }

  /* phone with motion: the desktop effect, made to fit. The frame stays pinned between the
     title and the steps while the photos slide up; JS adds .is-pinned (and the scroll room). */
  @media (max-width:900px){
    .c-craft.is-pinned .craft-sticky{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; }
    .c-craft.is-pinned .craft-inner{
      height:100%; display:flex; flex-direction:column; gap:.9rem;
      padding:4.6rem 1.4rem 1.1rem;
    }
    .c-craft.is-pinned .craft-head{ padding:0; margin:0; max-width:none; flex:none; }
    .c-craft.is-pinned .craft-head .kicker{ margin-bottom:.45rem; }
    .c-craft.is-pinned .craft-head h2{ font-size:1.32rem; max-width:none; }
    .c-craft.is-pinned .craft-stage{ display:flex; padding:0; flex:1 1 auto; min-height:0; }
    .c-craft.is-pinned .craft-frame{ width:100%; height:100%; aspect-ratio:auto; max-height:none; border-radius:var(--r-md); clip-path:inset(0 round var(--r-md)); }
    .c-craft.is-pinned .craft-body{ padding:0; margin:0; flex:none; }
    .c-craft.is-pinned .craft-step,
    .c-craft.is-pinned .craft-step:not(.is-on){
      display:grid; grid-template-columns:auto 1fr; gap:.8rem;
      padding:.5rem 0 .5rem .9rem; border-top:1px solid var(--line);
    }
    .c-craft.is-pinned .craft-step:not(.is-on){ opacity:.42; }
    .c-craft.is-pinned .craft-step::before{ display:block; top:.5rem; bottom:.5rem; }
    .c-craft.is-pinned .craft-step .cs-num{ display:block; padding-top:.2rem; margin:0; color:var(--mono-gray); }
    .c-craft.is-pinned .craft-step.is-on .cs-num{ color:var(--brass); }
    .c-craft.is-pinned .cs-text{ display:flex; flex-direction:column; }
    .c-craft.is-pinned .cs-label{ font-size:1rem; }
    .c-craft.is-pinned .cs-copy{
      display:block; height:auto; max-height:0; overflow:hidden; opacity:0; margin:0; max-width:none;
      font-size:.82rem; line-height:1.45;
      transition:max-height .45s ease, opacity .4s ease, margin .4s ease;
    }
    .c-craft.is-pinned .craft-step.is-on .cs-copy{ max-height:6.2em; opacity:1; margin:.3rem 0 0; }
    .c-craft.is-pinned .cs-photo{ display:none; }
    .c-craft.is-measuring *{ transition:none !important; }
    .c-craft.is-pinned .craft-link{ margin-top:.7rem; font-size:.84rem; }
  }

  /* desktop: native sticky split, JS gives .c-craft the scroll room.
     The whole thing sits in a centred band so both page gutters match. */
  @media (min-width:901px){
    .craft-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; }
    .craft-inner{
      display:grid; height:100%;
      max-width:1240px; margin:0 auto;
      padding:0 clamp(1.6rem, 4vw, 3.4rem);
      grid-template-columns:minmax(0,26rem) minmax(0,1fr);
      grid-template-rows:1fr auto auto 1fr;
      grid-template-areas:".  stage" "head  stage" "body  stage" ".  stage";
      column-gap:clamp(2.5rem,5vw,5rem);
    }
    .craft-head{ grid-area:head; padding:0; margin:0; max-width:none; }
    .craft-body{ grid-area:body; padding:1.6rem 0 0; margin:0; max-width:none; }
    .craft-stage{ grid-area:stage; align-self:stretch; justify-content:flex-end; padding:0; }
    .craft-frame{
      width:min(100%, 560px); aspect-ratio:5/6; max-height:82vh;
    }
    .craft-nav-arrows{ display:flex; }
  }

  .c-fleet{ background:var(--deep); color:#fff; padding:6.6rem 0; overflow:hidden; }
  .c-fleet .kicker{ font-size:.82rem; letter-spacing:.06em; color:var(--brass-lift); margin-bottom:.9rem; }
  .c-fleet h2{ font-size:clamp(2rem,4.4vw,3.4rem); font-weight:600; letter-spacing:-.02em; line-height:1.02; }
  .c-fleet .fleet-lead{ font-size:.95rem; line-height:1.5; color:rgba(255,255,255,.62); max-width:34ch; margin:1.4rem 0 1.8rem; }
  .c-fleet .all{ color:#fff; font-size:.9rem; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:2px; align-self:flex-start; }
  /* the intro is the section's title block — a berth of its own */
  .fleet-intro{ display:flex; flex-direction:column; }

  /* horizontal-scroll cue — only shown in the pinned desktop mode (added below) */
  .fleet-nav{ display:none; }
  .fleet-nav-count{
    font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em;
    color:rgba(255,255,255,.5); font-variant-numeric:tabular-nums; white-space:nowrap;
  }
  .fleet-nav-count b{ color:var(--brass-lift); font-weight:500; }
  .fleet-nav-rail{
    position:relative; flex:1; min-width:70px; max-width:150px; height:2px;
    background:rgba(255,255,255,.16); border-radius:2px; overflow:hidden;
  }
  .fleet-nav-fill{
    position:absolute; left:0; top:0; bottom:0; width:var(--fleet-p,0%);
    background:var(--brass-lift); border-radius:2px;
  }
  /* prev / next: scroll the page to the neighbouring berth, the row follows */
  .fleet-nav-arrows{ display:flex; gap:.5rem; margin-left:.15rem; }
  .fleet-nav-btn{
    width:2.2rem; height:2.2rem; flex:none; border-radius:50%; padding:0;
    display:grid; place-items:center; cursor:pointer; color:#fff;
    background:transparent; border:1px solid rgba(255,255,255,.28);
    transition:background .3s ease, border-color .3s ease, color .3s ease,
      opacity .3s ease, transform .2s ease;
  }
  .fleet-nav-btn svg{ width:1rem; height:1rem; display:block; }
  .fleet-nav-btn:hover:not(:disabled){ background:var(--brass-lift); border-color:var(--brass-lift); color:#0a1f25; }
  .fleet-nav-btn:active:not(:disabled){ transform:scale(.9); }
  .fleet-nav-btn:disabled{ opacity:.26; cursor:default; }
  .fleet-nav-btn:focus-visible{ outline:2px solid var(--brass-lift); outline-offset:3px; }
  @keyframes fleetHint{ 0%,100%{ transform:translateX(0); opacity:.75; } 50%{ transform:translateX(4px); opacity:1; } }
  /* nudge Next until the visitor first moves the row */
  .fleet-nav:not(.is-moving) .fleet-nav-btn[data-dir="1"]:not(:disabled){ animation:fleetHint 1.7s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce){ .fleet-nav-btn{ animation:none !important; } }
  /* vertical (default / tablet / mobile): title block above a grid */
  .fleet-viewport{ max-width:1180px; margin:0 auto; padding:0 1.6rem; }
  .fleet-intro{ max-width:1180px; margin:0 auto 2.6rem; padding:0 1.6rem; }
  .c-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(8px,1.4vw,18px); align-items:start; }
  .fleet-intro h2 br{ display:none; }
  /* the "view all" link sits under the cards on phones and tablets (in the title panel on desktop) */
  .fleet-all-bottom{ display:none; }
  @media (max-width:1000px){
    .fleet-intro .all{ display:none; }
    .c-fleet .fleet-all-bottom{ display:inline-block; margin-top:2.2rem; }
  }
  @media (max-width:1000px){ .c-cards{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .c-cards{ grid-template-columns:1fr; gap:1.1rem; } .c-card__media{ height:clamp(340px,86vw,430px); } }
  /* horizontal scroll fleet — the title panel stays put on the left, the boats
     slide past it on the right like a row of berths */
  @media (min-width:1001px) and (prefers-reduced-motion: no-preference){
    /* native sticky holds the frame (JS sets the section's total height);
       no GSAP pin, so the vertical-to-horizontal hand-off never snaps */
    .c-fleet{ padding:0; overflow:visible; position:relative; }
    .fleet-pin{
      position:sticky; top:0; height:100vh; padding:0; overflow:hidden;
      /* the title column is the page gutter + a fixed content width */
      --intro-pad:max(1.6rem, calc((100vw - 1180px) / 2 + 1.6rem));
      --intro-w:calc(var(--intro-pad) + min(34vw, 420px));
    }
    .fleet-intro{
      position:absolute; left:0; top:0; bottom:0; z-index:2;
      width:var(--intro-w); max-width:none; margin:0;
      justify-content:center;
      padding:0 clamp(2rem,3vw,3.4rem) 0 var(--intro-pad);
      background:var(--deep); /* opaque — the berths slide in behind it */
      border-right:1px solid rgba(255,255,255,.14);
    }
    .fleet-intro h2 br{ display:inline; }
    .fleet-intro h2{ font-size:clamp(2.6rem,4.6vw,4rem); }
    .fleet-intro .fleet-lead{ max-width:26ch; }
    .fleet-nav{ display:flex; align-items:center; gap:1rem; margin-top:2.6rem; max-width:360px; }
    .fleet-viewport{
      max-width:none; margin:0 0 0 var(--intro-w); padding:0;
      height:100vh; display:flex; align-items:center; overflow:hidden;
    }
    .fleet-viewport .c-cards{
      display:flex; grid-template-columns:none; width:max-content; align-items:center; will-change:transform;
      gap:clamp(20px,2.2vw,32px);
      padding-left:clamp(1.6rem,2.6vw,2.6rem);
      padding-right:20vw;
    }
    .fleet-viewport .c-card{ flex:0 0 clamp(400px,38vw,540px); }
    .fleet-viewport .c-card__media{ height:clamp(360px,40vw,480px); }
  }
  .c-card{
    --d:0s; display:block; text-decoration:none; color:#fff;
    border-radius:var(--r-md); overflow:hidden;
    opacity:0; transform:translateY(26px); transition:opacity .8s ease var(--d), transform .8s ease var(--d);
  }
  .c-card.is-visible{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){ .c-card{ opacity:1; transform:none; transition:none; } }

  /* the photo fills the whole card; the caption lives inside it */
  .c-card__media{
    position:relative; display:block; width:100%; height:clamp(300px,42vw,430px);
    overflow:hidden; border-radius:var(--r-md); background:#0a1f25;
  }
  .c-card__media img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center; filter:contrast(1.03); display:block;
    clip-path:inset(0 100% 0 0); transform:scale(1.12);
    transition:filter .3s ease,
      clip-path 1s cubic-bezier(.65,0,.35,1) calc(var(--d) + .1s),
      transform 1.3s cubic-bezier(.19,1,.22,1) calc(var(--d) + .1s);
  }
  .c-card.is-visible .c-card__media img{ clip-path:inset(0 0 0 0); transform:scale(1); }

  /* frosted caption panel — always visible, inset inside the photo */
  .c-card__panel{
    position:absolute; left:.7rem; right:.7rem; bottom:.7rem; z-index:2;
    padding:.85rem .95rem .8rem; border-radius:calc(var(--r-md) - 4px);
    background:rgba(16,22,26,.42);
    -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 18px 42px -22px rgba(0,0,0,.6);
    color:#fff; transition:background .3s ease;
  }
  .cp-head{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
  .cp-name{
    text-wrap:wrap;   /* was an h4; the shared h3 rule would balance the line, keep the old wrapping */
    font-family:var(--font-display); font-weight:500; letter-spacing:-.01em; line-height:1.1;
    font-size:clamp(1.05rem,1.5vw,1.3rem); margin:0;
  }
  .cp-len{
    flex:none; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.05em;
    padding:.3em .65em; border-radius:999px; white-space:nowrap;
    background:rgba(255,255,255,.16); color:#fff;
  }
  .cp-spec{ margin:.4rem 0 0; font-size:.75rem; line-height:1.35; color:rgba(255,255,255,.72); }
  .cp-foot{
    display:flex; align-items:center; justify-content:space-between; gap:.8rem;
    margin-top:.7rem; padding-top:.65rem; border-top:1px solid rgba(255,255,255,.14);
  }
  .cp-note{
    font-family:var(--font-mono); font-size:.58rem; letter-spacing:.13em; text-transform:uppercase;
    color:rgba(255,255,255,.55);
  }
  .cp-go{
    flex:none; width:2rem; height:2rem; border-radius:.55rem; display:grid; place-items:center;
    font-size:.95rem; line-height:1;
    background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); color:#fff;
    transition:background .3s ease, border-color .3s ease, color .3s ease, transform .35s cubic-bezier(.22,1,.36,1);
  }
  /* stacked cards (phones and tablets): a slimmer glass caption so more of the boat shows.
     Same content and look, just tighter padding, spacing and a smaller arrow button. */
  @media (max-width:1000px){
    .c-card__panel{ left:.6rem; right:.6rem; bottom:.6rem; padding:.62rem .85rem .58rem; }
    .cp-head{ gap:.6rem; }
    .cp-name{ font-size:1.08rem; }
    .cp-spec{ margin-top:.25rem; }
    .cp-foot{ margin-top:.42rem; padding-top:.4rem; }
    .cp-go{ width:1.7rem; height:1.7rem; border-radius:.5rem; font-size:.85rem; }
  }
  .c-card:hover{ transform:translateY(-5px); transition:transform .45s cubic-bezier(.22,1,.36,1); }
  .c-card:hover .c-card__media img{ transform:scale(1.05); filter:brightness(1.03) contrast(1.03); transition:transform .6s cubic-bezier(.22,1,.36,1), filter .35s ease; }
  .c-card:hover .c-card__panel{ background:rgba(16,22,26,.52); }
  .c-card:hover .cp-go{ background:var(--brass-lift); border-color:var(--brass-lift); color:#0a1f25; transform:translate(2px,-2px); }
  @media (prefers-reduced-motion: reduce){
    .c-card__media img{ clip-path:none; transform:none; transition:filter .3s ease; }
    .c-card:hover, .c-card:hover .c-card__media img{ transform:none; }
  }
  @media (hover:none){ .c-card:hover{ transform:none; } }

  /* phones with scroll-driven animations: each berth fades in, its photo wipes in from the left
     and drifts, all off the live scroll offset (site.js 6f adds .fleet-sd). The card never moves,
     so the gap between berths stays constant. */
  /* clip, not hidden: overflow:hidden makes .c-fleet a scroll container and view() would then
     measure against it instead of the page */
  .c-fleet.fleet-sd{ overflow:clip; }
  .fleet-sd .c-card, .fleet-sd .c-card__media img{ transition:none; }
  .fleet-sd .c-card{
    animation:fc-in linear both; animation-timeline:view(); animation-range:entry 0% entry 100%;
    view-timeline:--fc block;
  }
  .fleet-sd .c-card__media img{
    animation:fc-wipe linear both, fc-drift linear both;
    animation-timeline:--fc, --fc;      /* the card's timeline: the photo's own view() would bind to .c-card__media (overflow:hidden) */
    animation-range:entry 8% cover 40%, cover 40% cover 100%;
  }
  @keyframes fc-in{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes fc-wipe{ from{ clip-path:inset(0 100% 0 0); scale:1.22; } to{ clip-path:inset(0 0 0 0); scale:1.1; } }
  @keyframes fc-drift{ from{ translate:0 -4.5%; } to{ translate:0 4.5%; } }

  /* isolate: keeps the map's inner z-indexes (fades 400, head 500, Leaflet
     panes 400-700) inside this box so they never paint over the fixed
     header / mobile drawer (z ~100). */
  .footer-map{ width:100%; max-width:none; margin:0 0 2.6rem; height:clamp(360px,44vh,480px); overflow:hidden; position:relative; isolation:isolate; z-index:0; background:#f5f5f3; border-radius:0; }
  .footer-map .fm-img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; display:block; }
  .footer-map .fm-map{ position:absolute; inset:0; width:100%; height:100%; }
  .footer-map .leaflet-container{
    width:100%; height:100%; background:#f5f5f3;
    font-family:var(--font-body); font-size:.75rem;
  }
  .footer-map .leaflet-tile-pane{ filter:brightness(1.05) contrast(1.03) saturate(.72); }
  .footer-map .leaflet-container a{ color:var(--brass); }
  .footer-map .leaflet-control-attribution{
    background:rgba(255,255,255,.55); font-size:.6rem; color:var(--mono-gray);
    padding:.1rem .45rem; border-radius:var(--r-xs) 0 0 0;
  }
  .footer-map .leaflet-control-attribution a{ color:var(--ink-soft); }
  /* Frida logo pin: wings mark above a pulsing brass point */
  .fm-pin{ position:relative; background:transparent; border:0; }
  .fm-pin .fm-pin-logo{
    position:absolute; left:50%; top:0; transform:translateX(-50%);
    width:88px !important; height:auto !important; max-width:none; pointer-events:none;
    filter:drop-shadow(0 2px 5px rgba(4,24,30,.32));
  }
  .fm-pin .fm-pin-dot{
    position:absolute; left:50%; bottom:0; width:12px; height:12px; margin-left:-6px;
    background:var(--brass); border:2px solid #fff; border-radius:50%;
    box-shadow:0 2px 6px rgba(4,24,30,.4);
  }
  .fm-pin .fm-pin-ring{
    position:absolute; left:50%; bottom:0; width:12px; height:12px; margin-left:-6px;
    border:2px solid var(--brass); border-radius:50%; opacity:.5;
    animation:fmPulse 2.6s ease-out infinite;
  }
  @keyframes fmPulse{ 0%{ transform:scale(1); opacity:.5; } 70%{ transform:scale(3); opacity:0; } 100%{ opacity:0; } }
  @media (prefers-reduced-motion: reduce){ .fm-pin .fm-pin-ring{ animation:none; } }
  /* full-bleed band — only a soft top/bottom blend into the white footer, no sides */
  .footer-map .fm-fade{ position:absolute; left:0; right:0; z-index:400; pointer-events:none; }
  .footer-map .fm-fade.top{ top:0; height:90px; background:linear-gradient(to bottom, #fff, rgba(255,255,255,0)); }
  .footer-map .fm-fade.bottom{ bottom:0; height:90px; background:linear-gradient(to top, #fff, rgba(255,255,255,0)); }
  .footer-map .fm-fade.side-l, .footer-map .fm-fade.side-r{ display:none; }
  .footer-map .fm-head{ position:absolute; left:var(--edge); top:2.2rem; z-index:500; max-width:26rem; pointer-events:none; }
  .footer-map .fm-head .kicker{ font-size:.8rem; letter-spacing:.06em; color:var(--brass); margin-bottom:.6rem; }
  .footer-map .fm-head h3{ font-size:clamp(1.3rem,2.3vw,1.7rem); font-weight:600; letter-spacing:-.01em; color:var(--ink); }
  .footer-map .fm-link{
    display:inline-block; margin-top:.7rem; pointer-events:auto;
    font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.72rem; letter-spacing:.06em;
    color:var(--brass); text-decoration:none; border-bottom:1px solid rgba(138,109,59,.4); padding-bottom:1px;
  }
  .footer-map .fm-link:hover{ border-bottom-color:var(--brass); }
  /* ---------- shared footer (light, follows the white Sized-to-Order section) ---------- */
  footer{
    position:relative; background:#fff; color:var(--ink-soft); padding:0;
    font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif;
  }
  footer .wrap > .top{ display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap; padding-bottom:2rem; border-bottom:1px solid var(--line); }
  footer .mark img{ height:34px; width:auto; display:block; }
  footer .brand-name{ font-family:var(--font-display); font-size:1.15rem; font-weight:600; letter-spacing:-.01em; color:var(--ink); margin-top:1.1rem; }
  footer .tagline{ font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif; font-size:.92rem; margin-top:.3rem; color:var(--ink-soft); opacity:.8; max-width:32ch; }
  footer .address{ font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif; font-size:.92rem; color:var(--ink-soft); text-align:right; opacity:.8; display:flex; flex-direction:column; gap:.4rem; }
  footer .address a{ color:inherit; text-decoration:none; }
  footer .address a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
  footer .wrap > .bottom{
    margin-top:0; padding-top:1.5rem; padding-bottom:1.5rem; border-bottom:1px solid var(--line);
    font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif; font-size:.86rem; letter-spacing:0;
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.8rem 1.6rem; color:var(--ink-soft);
  }
  footer .wrap > .bottom .bottom-links{ display:flex; align-items:center; flex-wrap:wrap; gap:1.3rem; }
  footer .wrap > .bottom .bottom-links a{ color:inherit; text-decoration:none; }
  footer .wrap > .bottom .bottom-links a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
  footer .wrap > .bottom .bottom-links .divider{ opacity:.4; }
  footer .wrap > .bottom .bottom-links .social{ display:inline-flex; align-items:center; color:inherit; }
  footer .wrap > .bottom .bottom-links .social:hover{ color:var(--ink); }
  footer .wrap > .bottom .bottom-links .social svg{ width:13px; height:13px; display:block; }

  /* mobile: stack the footer left-aligned — the right-aligned address column
     only makes sense beside the brand block on desktop */
  @media (max-width:640px){
    footer .wrap > .top{ flex-direction:column; align-items:flex-start; gap:1.8rem; }
    footer .address{ text-align:left; align-items:flex-start; }
    footer .wrap > .bottom{ flex-direction:column; align-items:flex-start; gap:1.1rem; }
  }

  /* ---- footer wave video: sand-toned top (text), sea fills the bottom (OMAYA-style) ---- */
  .footer-body{ position:relative; padding-bottom:clamp(12rem,26vw,18rem); }
  .footer-wave{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
    background:linear-gradient(180deg,#ffffff 0%,#f7efe2 34%,#bfe0dd 100%); }
  .footer-wave video{ position:absolute; left:50%; top:50%; width:100%; height:100%;
    transform:translate(-50%,-50%); object-fit:cover; object-position:center 6%; }
  .footer-wave .fw-veil{ position:absolute; inset:0; background:linear-gradient(180deg,
    #ffffff 0%, #fbf8f3 8%, #faf6f0 30%, rgba(250,246,240,.94) 42%,
    rgba(249,243,233,.55) 52%, rgba(249,243,233,.14) 60%, rgba(255,255,255,0) 68%, rgba(255,255,255,0) 100%); }
  .footer-body .wrap{ position:relative; z-index:1; }
  footer .wrap > .top{ border-bottom-color:rgba(16,24,27,.14); }
  footer .wrap > .bottom{ border-bottom-color:rgba(16,24,27,.16); }
  footer .wrap > .bottom span,
  footer .wrap > .bottom .bottom-links a,
  footer .wrap > .bottom .bottom-links .divider{ text-shadow:0 1px 3px rgba(250,247,242,.9); }
  footer .made-by{
    margin-top:1.15rem; text-align:left;
    font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif;
    font-size:.76rem; letter-spacing:.03em; color:var(--ink-soft); opacity:.72;
    text-shadow:0 1px 3px rgba(250,247,242,.95), 0 0 10px rgba(250,247,242,.7);
  }
  footer .made-by a{
    color:inherit; text-decoration:none;
    border-bottom:1px solid transparent; transition:color .2s ease, border-color .2s ease;
  }
  footer .made-by a:hover{ color:var(--ink); border-bottom-color:currentColor; }
  @media (prefers-reduced-motion: reduce){ .footer-wave video{ display:none; } }
  @media (max-width:640px){
    .footer-body{ padding-bottom:7.5rem; }
    .footer-wave video{ object-position:center 4%; }
    .footer-wave .fw-veil{ background:linear-gradient(180deg,
      #ffffff 0%, #fbf8f3 6%, #faf6f0 34%, rgba(250,246,240,.92) 48%, rgba(249,243,233,.62) 60%,
      rgba(249,243,233,.2) 70%, rgba(255,255,255,0) 80%, rgba(255,255,255,0) 100%); }
  }

  /* ---- legal / static text pages (Privacy, Cookie Policy, Cookie Manager) ---- */
  .legal{
    background:#fff; color:var(--ink);
    padding:clamp(7.5rem,15vh,11rem) var(--edge) clamp(4.5rem,9vh,7rem);
  }
  .legal-inner{ max-width:720px; margin:0 auto; }
  .legal .kicker{
    font-family:"IBM Plex Mono", ui-monospace, monospace;
    font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--brass); margin-bottom:1.1rem;
  }
  .legal h1{
    font-family:var(--font-display); font-weight:600;
    font-size:clamp(2rem,4.6vw,3rem); line-height:1.08; letter-spacing:-.02em;
    color:var(--ink); margin:0 0 .7rem;
  }
  .legal .updated{
    font-family:"IBM Plex Mono", ui-monospace, monospace;
    font-size:.78rem; color:var(--mono-gray); margin:0 0 3.2rem;
  }
  .legal .lead{ font-size:1.02rem; line-height:1.7; color:var(--ink-soft); margin:0 0 2.4rem; }
  .legal h2{
    font-family:var(--font-display); font-weight:600;
    font-size:clamp(1.25rem,2.4vw,1.5rem); letter-spacing:-.01em; color:var(--ink);
    margin:3rem 0 .9rem;
  }
  .legal h3{ font-size:1rem; font-weight:600; color:var(--ink); margin:1.8rem 0 .5rem; }
  .legal p, .legal li{ font-size:.94rem; line-height:1.72; color:var(--ink-soft); }
  .legal p{ margin:0 0 1.1rem; }
  .legal ul{ padding-left:1.2rem; margin:.5rem 0 1.4rem; }
  .legal li{ margin-bottom:.5rem; }
  .legal strong{ color:var(--ink); font-weight:600; }
  .legal a{ color:var(--brass); text-decoration:underline; text-underline-offset:2px; }
  .legal a:hover{ color:var(--ink); }
  .legal .ph{ color:var(--brass); background:rgba(138,109,59,.09); padding:0 .25em; border-radius:3px; font-style:normal; }
  .legal hr{ border:0; border-top:1px solid var(--line); margin:2.6rem 0; }
  .legal table{ width:100%; border-collapse:collapse; margin:.6rem 0 1.6rem; font-size:.86rem; }
  .legal th, .legal td{ text-align:left; vertical-align:top; padding:.7rem .8rem; border-bottom:1px solid var(--line); }
  .legal th{ font-weight:600; color:var(--ink); font-family:"Work Sans",ui-sans-serif,system-ui,sans-serif; }
  .legal td{ color:var(--ink-soft); }
  .legal .table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .legal .contact-block{ margin-top:2.4rem; padding:1.4rem 1.6rem; background:var(--cream); border-radius:var(--r-md); font-size:.9rem; line-height:1.7; }

  /* cookie manager toggles */
  .cm-group{ display:flex; flex-direction:column; gap:1rem; margin:2rem 0 2.4rem; }
  .cm-row{
    display:flex; justify-content:space-between; align-items:flex-start; gap:1.4rem;
    padding:1.3rem 1.5rem; border:1px solid var(--line); border-radius:var(--r-md);
  }
  .cm-row .cm-text h3{ margin:0 0 .35rem; }
  .cm-row .cm-text p{ margin:0; font-size:.86rem; }
  .cm-switch{ position:relative; flex:0 0 auto; width:46px; height:26px; }
  .cm-switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
  .cm-switch .track{
    position:absolute; inset:0; background:var(--mono-gray); border-radius:var(--r-pill);
    transition:background .2s ease;
  }
  .cm-switch .track::after{
    content:""; position:absolute; top:3px; left:3px; width:20px; height:20px;
    background:#fff; border-radius:50%; transition:transform .2s ease;
  }
  .cm-switch input:checked + .track{ background:var(--brass); }
  .cm-switch input:checked + .track::after{ transform:translateX(20px); }
  .cm-switch input:disabled + .track{ opacity:.5; }
  .cm-switch input:focus-visible + .track{ outline:2px solid var(--brass); outline-offset:2px; }
  .cm-actions{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
  .cm-save{
    font-family:"Work Sans",ui-sans-serif,system-ui,sans-serif; font-size:.98rem; font-weight:500; letter-spacing:.01em;
    padding:.95rem 2.3rem; border:0; border-radius:var(--r-xs); background:var(--ink); color:#fff; cursor:pointer;
    transition:background .2s ease;
  }
  .cm-save:hover{ background:var(--brass); }
  .cm-status{ font-size:.85rem; color:var(--brass); opacity:0; transition:opacity .2s ease; }
  .cm-status.show{ opacity:1; }
  @media (max-width:520px){
    .cm-row{ flex-direction:column-reverse; align-items:stretch; }
    .cm-switch{ align-self:flex-end; }
  }

  /* ---- first-visit cookie consent banner ---- */
  .c-cookie{
    position:fixed; left:0; right:0; bottom:0; z-index:var(--z-nav);
    background:var(--deep); color:#fff;
    padding:clamp(1rem,2.6vw,1.5rem) var(--edge);
    border-top:1px solid rgba(198,164,106,.28);
    box-shadow:0 -16px 44px -22px rgba(0,0,0,.55);
    animation:ccUp .5s cubic-bezier(.22,1,.36,1);
  }
  @keyframes ccUp{ from{ transform:translateY(102%); } to{ transform:none; } }
  .cc-inner{
    max-width:1120px; margin:0 auto;
    display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 2.2rem;
  }
  .cc-body{ flex:1 1 360px; }
  .cc-lead{ margin:0 0 .5rem; font-size:.9rem; line-height:1.6; color:rgba(255,255,255,.86); max-width:62ch; }
  .cc-links{ margin:0; font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.7rem; letter-spacing:.05em; }
  .cc-links a{
    color:var(--brass-lift); text-decoration:none; margin-right:1.3rem;
    border-bottom:1px solid rgba(198,164,106,.4); padding-bottom:1px;
  }
  .cc-links a:hover{ border-bottom-color:var(--brass-lift); }
  .cc-choose{
    flex:1 1 100%; display:flex; flex-direction:column; gap:.75rem;
    margin-top:.3rem; padding-top:.9rem; border-top:1px solid rgba(255,255,255,.13);
  }
  .cc-choose[hidden]{ display:none; }
  .cc-row{
    display:flex; justify-content:space-between; align-items:flex-start; gap:1.4rem;
    font-size:.82rem; line-height:1.5; color:rgba(255,255,255,.78); cursor:pointer;
  }
  .cc-row strong{ color:#fff; font-weight:600; }
  .cc-row input{ flex:0 0 auto; margin-top:.15rem; width:1.1rem; height:1.1rem; accent-color:var(--brass-lift); cursor:pointer; }
  .cc-row input:disabled{ cursor:not-allowed; opacity:.6; }
  .cc-actions{ flex:0 0 auto; display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
  .cc-btn{
    font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif; font-size:.86rem; font-weight:500;
    letter-spacing:.01em; padding:.72rem 1.45rem; border:1px solid var(--brass-lift); border-radius:var(--r-xs);
    background:var(--brass-lift); color:var(--deep); cursor:pointer;
    transition:background .18s ease, color .18s ease, border-color .18s ease;
  }
  .cc-btn:hover{ background:#d8bd8a; border-color:#d8bd8a; }
  .cc-btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.38); }
  .cc-btn--ghost:hover{ background:transparent; color:var(--brass-lift); border-color:var(--brass-lift); }
  @media (max-width:640px){
    .c-cookie{ padding:1rem 1.1rem calc(1rem + env(safe-area-inset-bottom)); }
    .cc-inner{ gap:.7rem; }
    .cc-lead{ font-size:.84rem; line-height:1.5; margin-bottom:.4rem; }
    .cc-actions{ width:100%; gap:.5rem; }
    .cc-btn{ flex:1 1 42%; text-align:center; padding:.72rem .8rem; }
    .cc-btn[data-cc="accept"]{ flex-basis:100%; }
  }
  @media (prefers-reduced-motion: reduce){ .c-cookie{ animation:none; } }

  /* ---- contact / enquiry page ---- */
  .contact-hero{
    position:relative; height:74vh; min-height:480px; max-height:800px; overflow:hidden;
    display:flex; align-items:flex-end; background:var(--deep);
  }
  .contact-hero-media{ position:absolute; inset:0; }
  .contact-hero-media img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
  .contact-hero-veil{
    position:absolute; inset:0; pointer-events:none;
    background:
      linear-gradient(0deg, rgba(4,24,30,.8) 0%, rgba(4,24,30,.18) 46%, rgba(4,24,30,0) 70%),
      linear-gradient(180deg, rgba(4,24,30,.35) 0%, rgba(4,24,30,0) 32%);
  }
  .contact-hero-inner{
    position:relative; z-index:1; color:#fff; width:100%; will-change:transform;
    padding:0 var(--edge) clamp(2.2rem,5vh,3.4rem);
  }
  .contact-hero-inner .kicker{
    font-family:"IBM Plex Mono", ui-monospace, monospace;
    font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-lift); margin-bottom:1rem;
  }
  .contact-hero-inner h1{
    font-family:var(--font-display); font-weight:600;
    font-size:clamp(2.1rem,5vw,3.6rem); line-height:1.08; letter-spacing:-.02em; color:#fff; margin:0; max-width:16ch;
  }
  @media (max-width:640px){ .contact-hero{ height:58vh; min-height:420px; } }
  @media (prefers-reduced-motion: reduce){ .contact-hero-media img{ transform:none !important; } .contact-hero-inner{ transform:none !important; } }

  .contact{
    background:#fff; color:var(--ink);
    padding:clamp(3.5rem,8vh,6rem) var(--edge) clamp(4.5rem,9vh,7rem);
  }
  .contact-inner{
    max-width:1120px; margin:0 auto;
    display:grid; grid-template-columns:minmax(0,0.82fr) minmax(0,1.08fr); gap:clamp(2.5rem,5vw,4.5rem);
    align-items:start;
  }
  .contact-aside{ position:sticky; top:clamp(6rem,14vh,9rem); }
  .contact .lead{ font-size:.98rem; line-height:1.72; color:var(--ink-soft); margin:0 0 2.4rem; max-width:42ch; }
  .contact-details{ display:flex; flex-direction:column; gap:1.3rem; padding-top:1.8rem; border-top:1px solid var(--line); }
  .contact-details .c-label{ display:block; margin-bottom:.3rem; }
  .contact-details a, .contact-details span{ font-size:.96rem; color:var(--ink); line-height:1.5; }
  .contact-details a{ text-decoration:none; border-bottom:1px solid var(--line); }
  .contact-details a:hover{ color:var(--brass); border-bottom-color:var(--brass); }
  .contact-note{ margin-top:1.6rem; font-size:.82rem; color:var(--mono-gray); }
  .contact-details > div{ display:flex; flex-direction:column; align-items:flex-start; }
  .contact-details .contact-map-link{
    display:block; margin-top:.8rem;
    font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.72rem; letter-spacing:.06em;
    color:var(--brass); text-decoration:none; border-bottom:1px solid rgba(138,109,59,.4); padding-bottom:1px;
  }
  .contact-details .contact-map-link:hover{ color:var(--brass); border-bottom-color:var(--brass); }

  /* shared small label — used as a caption in the aside; inside the field on the form */
  .c-label{
    font-family:"IBM Plex Mono", ui-monospace, monospace;
    font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
  }
  .c-label em{ font-style:normal; text-transform:none; letter-spacing:0; opacity:.6; }

  /* the form sits in its own warm panel — a considered object, not a stack of inputs */
  .contact-form-wrap{
    background:var(--cream);
    border:1px solid rgba(18,23,26,.06);
    border-radius:var(--r-md);
    padding:clamp(1.6rem,3.4vw,2.9rem);
    box-shadow:0 1px 2px rgba(18,23,26,.03), 0 18px 44px -30px rgba(18,23,26,.14);
  }

  .c-form{ display:flex; flex-direction:column; gap:1rem; }
  .c-form-summary:not(:empty){
    background:rgba(138,109,59,.08); border:1px solid rgba(138,109,59,.3); color:var(--brass);
    border-radius:var(--r-xs); padding:.8rem 1rem; font-size:.86rem; margin-bottom:.4rem;
  }
  .c-form-summary ul{ margin:0; padding-left:1.1rem; }

  .c-field{ position:relative; border:0; padding:0; margin:0; }
  .c-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }

  /* white fields, hairline border, near-square corners — label rides inside the top */
  .c-field input, .c-field textarea, .c-field select{
    width:100%; font-family:var(--font-body); font-size:1.06rem; color:var(--ink);
    background:#fff; border:1px solid var(--line); border-radius:var(--r-xs);
    padding:1.7rem 1rem .6rem;
    transition:border-color .18s ease, box-shadow .18s ease;
  }
  .c-field textarea{ resize:vertical; min-height:8rem; line-height:1.6; padding-top:1.8rem; }
  .c-field input::placeholder, .c-field textarea::placeholder{ color:transparent; }

  /* floating label — rests like a placeholder, shrinks up on focus / when filled */
  .c-field > .c-label{
    position:absolute; left:1rem; top:50%; transform:translateY(-50%); margin:0;
    font-family:var(--font-body); font-size:1.02rem; font-weight:400;
    letter-spacing:0; text-transform:none;
    color:var(--mono-gray); pointer-events:none;
    transition:top .16s ease, transform .16s ease, font-size .16s ease, color .16s ease, font-weight .16s ease;
    max-width:calc(100% - 1.9rem); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .c-field > .c-label em{ font-weight:400; opacity:.55; }
  .c-field textarea ~ .c-label{ top:1.15rem; transform:none; }
  .c-select > .c-label{ max-width:calc(100% - 3.6rem); }

  .c-field:focus-within > .c-label,
  .c-field.is-filled > .c-label{
    top:.6rem; transform:none;
    font-size:.78rem; font-weight:500; color:var(--ink-soft);
  }
  .c-field:focus-within > .c-label{ color:var(--brass); }

  .c-field input:focus, .c-field textarea:focus, .c-field select:focus{
    outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(138,109,59,.1);
  }
  .c-field input:-webkit-autofill{ -webkit-text-fill-color:var(--ink); transition:background-color 9999s; }

  /* select — same field, with a divider + chevron on the right */
  .c-select select{
    -webkit-appearance:none; appearance:none; cursor:pointer; padding-right:3rem;
  }
  .c-select::before{
    content:""; position:absolute; right:2.55rem; top:.85rem; bottom:.85rem; width:1px;
    background:var(--line); pointer-events:none;
  }
  .c-select::after{
    content:""; position:absolute; right:1.05rem; top:50%; width:.5rem; height:.5rem;
    border-right:1.5px solid var(--ink-soft); border-bottom:1.5px solid var(--ink-soft);
    transform:translateY(-60%) rotate(45deg); pointer-events:none;
  }
  .c-select:focus-within::after{ border-color:var(--brass); }

  /* pill radio group — the oval signature */
  .c-pills{ gap:.7rem; }
  .c-pills legend{ margin-bottom:.3rem; }
  .c-pills .pill{ display:inline-block; margin:.3rem .5rem 0 0; cursor:pointer; }
  .c-pills .pill input{ position:absolute; opacity:0; width:0; height:0; }
  .c-pills .pill span{
    display:inline-block; padding:.6rem 1.15rem; font-size:.88rem; color:var(--ink-soft);
    background:var(--cream); border:1px solid var(--line); border-radius:var(--r-pill);
    transition:border-color .18s ease, color .18s ease, background .18s ease;
  }
  .c-pills .pill:hover span{ border-color:var(--brass); color:var(--ink); }
  .c-pills .pill.is-selected span,
  .c-pills .pill input:checked + span{ background:var(--brass); border-color:var(--brass); color:#fff; }
  .c-pills .pill input:focus-visible + span{ outline:2px solid var(--brass); outline-offset:2px; }

  /* consent — quiet line under the fields, small custom checkbox */
  .c-consent{
    display:flex; align-items:flex-start; gap:.7rem; font-size:.86rem; line-height:1.55;
    color:var(--ink-soft); cursor:pointer; margin-top:.5rem;
    background:none; border:0; padding:0;
  }
  .c-consent input{
    -webkit-appearance:none; appearance:none; flex:0 0 auto; margin:.05rem 0 0;
    width:1.15rem; height:1.15rem; border:1px solid var(--mono-gray); border-radius:var(--r-xs);
    background:#fff; cursor:pointer; transition:background .15s ease, border-color .15s ease;
  }
  .c-consent input:checked{
    background:var(--brass); border-color:var(--brass);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-6' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size:78%; background-position:center; background-repeat:no-repeat;
  }
  .c-consent input:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }
  .c-consent a{ color:var(--brass); text-decoration:underline; text-underline-offset:2px; }

  .c-err{ display:block; margin-top:.4rem; font-size:.82rem; color:#a2402f; }
  .c-err:empty{ display:none; }
  .c-field input.input-validation-error, .c-field textarea.input-validation-error{ border-color:#a2402f; background:rgba(162,64,47,.04); }

  .c-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

  .c-form-foot{
    display:flex; align-items:center; justify-content:flex-end;
    margin-top:1rem; padding-top:1.3rem; border-top:1px solid rgba(18,23,26,.08);
  }
  .c-btn-send{
    font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif; font-size:.98rem; font-weight:500;
    letter-spacing:.01em; padding:.95rem 2.3rem; border:0; border-radius:var(--r-xs);
    background:var(--ink); color:#fff; cursor:pointer; transition:background .2s ease;
  }
  .c-btn-send:hover{ background:var(--brass); }

  /* back to top — small, out of the way, only after the hero is behind */
  .c-totop{
    position:fixed; right:clamp(1rem,2.4vw,2rem); bottom:clamp(1rem,2.4vw,2rem);
    z-index:calc(var(--z-nav) - 2);
    width:46px; height:46px; padding:0; display:grid; place-items:center;
    border:1px solid rgba(255,255,255,.14); border-radius:var(--r-xs);
    background:rgba(18,23,26,.78); color:var(--brass-lift); cursor:pointer;
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    opacity:0; visibility:hidden; transform:translateY(10px);
    transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s,
               background-color .2s ease, color .2s ease;
  }
  .c-totop svg{ width:20px; height:20px; }
  .c-totop.is-on{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
  .c-totop:hover{ background:var(--brass); color:#fff; }
  @media (prefers-reduced-motion: reduce){ .c-totop{ transition:none; } }

  /* ---- language switch cross-fade (cancelled in site.js for every other navigation) ---- */
  @view-transition{ navigation:auto; }
  ::view-transition-old(root), ::view-transition-new(root){ animation-duration:.32s; animation-timing-function:ease; }
  @media (prefers-reduced-motion: reduce){
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation:none !important; }
  }

  /* ---- careers page (hero + form reuse the contact styles) ---- */
  .careers-cta{
    display:inline-block; margin-top:1.6rem;
    font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--brass-lift); text-decoration:none; border-bottom:1px solid rgba(198,164,106,.5); padding-bottom:2px;
    transition:color .2s ease, border-color .2s ease;
  }
  .careers-cta:hover{ color:#fff; border-bottom-color:#fff; }

  .careers{ background:#fff; color:var(--ink); }
  .careers-sec{ padding:clamp(3.2rem,7vh,5.4rem) var(--edge); }
  .careers-sec + .careers-sec{ border-top:1px solid var(--line); }
  .careers-inner{ max-width:1120px; margin:0 auto; }
  .careers .kicker, .careers-apply-kicker{
    font-family:"IBM Plex Mono", ui-monospace, monospace;
    font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); margin-bottom:1rem;
  }
  .careers h2{
    font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; line-height:1.12;
    font-size:clamp(1.7rem,3.2vw,2.5rem); color:var(--ink); margin:0;
  }
  .careers p{ font-size:1rem; line-height:1.75; color:var(--ink-soft); margin:0; }

  .careers-intro .careers-inner{
    display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(2rem,5vw,4.5rem); align-items:start;
  }
  .careers-intro h2{ max-width:16ch; }

  .careers-list{ list-style:none; margin:clamp(1.6rem,3vw,2.4rem) 0 0; padding:0; }
  .careers-list li{
    display:grid; grid-template-columns:3.2rem minmax(0,1fr) minmax(0,1.3fr); gap:1rem clamp(1rem,3vw,2.5rem);
    align-items:baseline; padding:1.5rem 0; border-top:1px solid var(--line);
  }
  .careers-list li:last-child{ border-bottom:1px solid var(--line); }
  .careers-num{ font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.78rem; letter-spacing:.1em; color:var(--brass); }
  .careers-list h3{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.15rem,1.8vw,1.4rem); letter-spacing:-.01em; color:var(--ink); }
  .careers-list p{ font-size:.96rem; }

  .careers-ways-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.6rem,4vw,3.4rem); }
  .careers-way{ border-top:2px solid var(--brass); padding-top:1.1rem; }
  .careers-way h3{ font-family:var(--font-display); font-weight:600; font-size:1.3rem; letter-spacing:-.01em; color:var(--ink); margin-bottom:.6rem; }
  .careers-way p{ font-size:.96rem; }

  .careers-roles{ background:var(--cream); }
  .careers-roles h2{ margin-bottom:.9rem; }
  .careers-roles p{ max-width:52ch; }
  .careers-roles-list{ list-style:none; margin:0; padding:0; }
  .careers-roles-list li{
    display:flex; align-items:center; justify-content:space-between; gap:1.4rem;
    padding:1.3rem 0; border-top:1px solid var(--line);
  }
  .careers-roles-list li:last-child{ border-bottom:1px solid var(--line); }
  .careers-roles-list h3{ font-family:var(--font-display); font-weight:600; font-size:1.25rem; color:var(--ink); }
  .careers-role-meta{ display:block; margin-top:.3rem; font-size:.86rem; color:var(--mono-gray); }

  .careers-apply .contact-aside .lead{ margin-bottom:2rem; }
  @media (max-width:860px){
    .careers-intro .careers-inner{ grid-template-columns:1fr; }
    .careers-list li{ grid-template-columns:2.6rem minmax(0,1fr); }
    .careers-list li p{ grid-column:2; }
    .careers-ways-grid{ grid-template-columns:1fr; }
  }

  /* CV upload: a field-shaped drop target; the real file input sits invisibly on top */
  .c-file{ position:relative; margin-top:.2rem; }
  .c-file input[type="file"]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:1; font-size:0; }
  .c-file-box{
    display:flex; align-items:center; gap:1rem; padding:.85rem 1rem;
    background:#fff; border:1px dashed var(--mono-gray); border-radius:var(--r-xs);
    transition:border-color .18s ease, box-shadow .18s ease;
  }
  .c-file:hover .c-file-box{ border-color:var(--brass); }
  .c-file:focus-within .c-file-box{ border-color:var(--brass); box-shadow:0 0 0 3px rgba(138,109,59,.1); }
  .c-file-btn{
    flex:0 0 auto; font-size:.86rem; font-weight:500; color:var(--ink);
    padding:.5rem 1rem; border:1px solid var(--line); border-radius:var(--r-xs); background:var(--cream);
  }
  .c-file-text{ display:flex; flex-direction:column; min-width:0; gap:.1rem; }
  .c-file-name{ font-weight:400; font-size:.98rem; color:var(--mono-gray); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .c-file.has-file .c-file-name{ color:var(--ink); font-weight:500; }
  .c-file-text em{ font-style:normal; font-size:.78rem; color:var(--mono-gray); }

  .c-turnstile{ margin-top:.4rem; }
  .c-turnstile:empty{ display:none; }
  @media (max-width:420px){ .c-turnstile{ transform:scale(.88); transform-origin:0 0; } }

  .c-error{ background:#fff; color:var(--ink); padding:clamp(9rem,22vh,14rem) var(--edge) clamp(5rem,12vh,9rem); }
  .c-error-inner{ max-width:640px; margin:0 auto; }
  .c-error .kicker{ font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); margin-bottom:1rem; }
  .c-error h1{ font-family:var(--font-display); font-weight:300; font-size:clamp(2rem,5vw,3.4rem); line-height:1.1; letter-spacing:-.02em; margin:0 0 1.2rem; }
  .c-error p{ font-size:1.02rem; line-height:1.7; color:var(--ink-soft); margin:0 0 2rem; max-width:52ch; }
  .c-error-actions{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }
  .c-error-actions .c-btn-send{ text-decoration:none; display:inline-block; }
  .c-error-id{ margin-top:2.4rem !important; font-size:.8rem !important; color:var(--mono-gray) !important; }

  .contact-sent{ padding:2.4rem 0; }
  .contact-sent h2{
    font-family:var(--font-display); font-weight:600; font-size:clamp(1.4rem,2.6vw,1.9rem);
    letter-spacing:-.01em; color:var(--ink); margin:.4rem 0 1rem;
  }
  .contact-sent p{ font-size:.96rem; line-height:1.7; color:var(--ink-soft); max-width:44ch; margin:0 0 1.8rem; }
  .contact-sent a{ color:var(--brass); }
  .c-btn-ghost{
    display:inline-block; font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif; font-size:.9rem;
    padding:.75rem 1.6rem; border:1px solid var(--line); border-radius:var(--r-sm); color:var(--ink) !important;
    text-decoration:none; transition:border-color .2s ease, color .2s ease;
  }
  .c-btn-ghost:hover{ border-color:var(--brass); color:var(--brass) !important; }

  @media (max-width:820px){
    .contact-inner{ grid-template-columns:1fr; gap:2.6rem; }
    .contact-aside{ position:static; }
    .contact .lead{ max-width:none; }
  }
  @media (max-width:640px){
    .c-field-row{ grid-template-columns:1fr; gap:.85rem; }
    .contact-form-wrap{ padding:1.3rem 1.15rem; }
    .c-form-foot{ justify-content:stretch; }
    .c-btn-send{ width:100%; }
  }

  /* ---- news ---- */
  .news, .nw-article{ background:#fff; color:var(--ink); }
  .news{ padding:clamp(7.5rem,15vh,11rem) var(--edge) clamp(4.5rem,9vh,7rem); }
  .news-inner{ max-width:1060px; margin:0 auto; }

  .nw-head{ max-width:44ch; margin-bottom:clamp(2.6rem,6vh,4.4rem); }
  .nw-head .kicker{
    font-family:"IBM Plex Mono", ui-monospace, monospace;
    font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); margin-bottom:1.2rem;
  }
  .nw-head h1{
    font-family:var(--font-display); font-weight:600;
    font-size:clamp(2rem,3.6vw,2.9rem); line-height:1.1; letter-spacing:-.02em; color:var(--ink); margin:0 0 1.1rem;
  }
  .nw-head .lead{ font-size:1rem; line-height:1.7; color:var(--ink-soft); margin:0; }

  /* featured (latest) */
  .nw-featured{
    display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(1.6rem,3vw,3rem);
    align-items:center; text-decoration:none; color:inherit;
    padding-bottom:clamp(2.4rem,5vh,3.6rem); margin-bottom:clamp(2rem,4vh,3rem);
    border-bottom:1px solid var(--line);
  }
  .nw-featured-media{ border-radius:var(--r-md); overflow:hidden; aspect-ratio:4/3; background:var(--cream); }
  .nw-featured-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
  .nw-featured:hover .nw-featured-media img{ transform:scale(1.04); }
  .nw-featured-text h2{
    font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem,2.6vw,2.05rem);
    line-height:1.16; letter-spacing:-.015em; color:var(--ink); margin:.7rem 0 .7rem;
  }
  .nw-featured-text p{ font-size:.98rem; line-height:1.65; color:var(--ink-soft); margin:0 0 1.1rem; max-width:42ch; }
  .nw-more{
    font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.78rem; letter-spacing:.06em;
    color:var(--brass); border-bottom:1px solid rgba(138,109,59,.4); padding-bottom:1px;
  }
  .nw-featured:hover .nw-more{ border-bottom-color:var(--brass); }

  /* shared meta line */
  .nw-meta{
    display:flex; align-items:center; gap:.9rem;
    font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.72rem; letter-spacing:.06em; color:var(--mono-gray);
  }
  .nw-cat{
    color:var(--brass); text-transform:uppercase; letter-spacing:.1em;
    padding:.18rem .5rem; border:1px solid rgba(138,109,59,.28); border-radius:var(--r-xs);
  }
  .nw-meta time{ text-transform:uppercase; letter-spacing:.08em; }

  /* year-grouped list with the sticky year rail (the one "show") */
  .nw-year-group{
    display:grid; grid-template-columns:minmax(96px, 160px) 1fr; gap:clamp(1rem,3vw,3rem);
    align-items:start;
  }
  .nw-year{
    position:sticky; top:clamp(6rem,13vh,8.5rem); align-self:start;
    font-family:var(--font-display); font-weight:300; line-height:1;
    font-size:clamp(2.4rem,5vw,4.2rem); color:var(--brass); opacity:.32;
    letter-spacing:-.02em; pointer-events:none; user-select:none;
  }
  .nw-entries{ list-style:none; margin:0; padding:0; }
  .nw-entry{ border-top:1px solid var(--line); }
  .nw-entry:last-child{ border-bottom:1px solid var(--line); }
  .nw-entry a{
    display:grid; grid-template-columns:132px 1fr; gap:1.4rem; align-items:center;
    padding:1.6rem 0; text-decoration:none; color:inherit;
  }
  .nw-entry-media{ border-radius:var(--r-sm); overflow:hidden; aspect-ratio:3/2; background:var(--cream); }
  .nw-entry-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
  .nw-entry:hover .nw-entry-media img{ transform:scale(1.05); }
  .nw-entry-text{ display:flex; flex-direction:column; gap:.5rem; }
  .nw-entry-title{
    font-family:var(--font-display); font-weight:600; font-size:clamp(1.15rem,1.9vw,1.4rem);
    line-height:1.22; letter-spacing:-.01em; color:var(--ink); transition:color .18s ease;
  }
  .nw-entry:hover .nw-entry-title{ color:var(--brass); }
  .nw-entry-excerpt{ font-size:.92rem; line-height:1.55; color:var(--ink-soft); max-width:52ch; }

  @media (max-width:720px){
    .nw-featured{ grid-template-columns:1fr; }
    .nw-year-group{ grid-template-columns:1fr; gap:.4rem; }
    .nw-year{
      position:sticky; top:3.6rem; z-index:1;
      font-size:1.7rem; opacity:.85; font-weight:400;
      padding:.5rem 0 .3rem; background:linear-gradient(#fff 55%, rgba(255,255,255,0));
    }
    .nw-entry a{ grid-template-columns:88px 1fr; gap:1rem; padding:1.2rem 0; }
    .nw-entry-excerpt{ display:none; }
  }

  /* ---- news article ---- */
  .nw-article{ padding:clamp(7rem,14vh,10rem) var(--edge) clamp(4.5rem,9vh,7rem); }
  .nw-article-inner{ max-width:720px; margin:0 auto; }
  .nw-back{
    display:inline-block; margin-bottom:2.2rem;
    font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.74rem; letter-spacing:.06em;
    color:var(--brass); text-decoration:none; border-bottom:1px solid rgba(138,109,59,.4); padding-bottom:1px;
  }
  .nw-back:hover{ border-bottom-color:var(--brass); }
  .nw-article-head{ margin-bottom:2rem; }
  .nw-article-head h1{
    font-family:var(--font-display); font-weight:600; font-size:clamp(1.9rem,3.6vw,2.8rem);
    line-height:1.12; letter-spacing:-.02em; color:var(--ink); margin:.9rem 0 .9rem;
  }
  .nw-article-excerpt{ font-size:1.05rem; line-height:1.6; color:var(--ink-soft); margin:0; max-width:46ch; }
  .nw-article-cover{
    margin:0 0 2.6rem; border-radius:var(--r-md); overflow:hidden;
    aspect-ratio:16/10; background:var(--cream);
  }
  .nw-article-cover img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
  .nw-article-body p{
    font-size:1.05rem; line-height:1.78; color:var(--ink); margin:0 0 1.4rem; text-wrap:pretty;
  }
  .nw-article-body p:first-child{ font-size:1.15rem; color:var(--ink); }
  .nw-article-gallery{
    display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin:0 0 2.6rem;
  }
  .nw-article-gallery figure{
    margin:0; border-radius:var(--r-sm); overflow:hidden; aspect-ratio:4/3; background:var(--cream);
  }
  .nw-article-gallery img{ width:100%; height:100%; object-fit:cover; display:block; }
  @media (max-width:560px){ .nw-article-gallery{ grid-template-columns:1fr; } }

  .nw-article-nav{
    display:grid; grid-template-columns:1fr 1fr; gap:1.4rem;
    margin-top:3.4rem; padding-top:2rem; border-top:1px solid var(--line);
  }
  .nw-article-nav a{ text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:.35rem; }
  .nw-article-nav .nw-nav-newer{ text-align:right; align-items:flex-end; }
  .nw-article-nav span{
    font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.7rem; letter-spacing:.1em;
    text-transform:uppercase; color:var(--mono-gray);
  }
  .nw-article-nav strong{
    font-family:var(--font-display); font-weight:600; font-size:1rem; line-height:1.25;
    color:var(--ink); transition:color .18s ease;
  }
  .nw-article-nav a:hover strong{ color:var(--brass); }
  @media (max-width:560px){
    .nw-article-nav{ grid-template-columns:1fr; }
    .nw-article-nav .nw-nav-newer{ text-align:left; align-items:flex-start; }
  }

  /* ---- quote section: soft gradient, large centered quote, hover-reveal images on key phrases ---- */
  .c-quote{
    position:relative; overflow:hidden;
    min-height:100vh; display:flex; flex-direction:column; justify-content:center;
    padding:4rem 0;
    background:#fff;   /* matches the sections above and the footer — no colour band */
  }

  .c-quote .wrap{ max-width:900px; }
  .c-quote blockquote{
    margin:0; font-family:var(--font-display);
    font-size:clamp(1.5rem,3.4vw,2.4rem); line-height:1.42; text-align:center; letter-spacing:-.005em;
    color:var(--mono-gray);
  }
  .c-quote .q-hl{
    color:var(--ink); font-weight:600; position:relative; cursor:default;
    border-bottom:1px solid transparent; transition:border-color .25s ease;
  }
  /* the hovered word stays IN FRONT of its image while it drops down behind */
  .c-quote .q-hl:hover{ z-index:calc(var(--z-float) + 1); }
  /* reading-highlight sweep: the whole quote sits faint and readable, each
     word lifts to full ink left-to-right as you scroll through it */
  .c-quote blockquote .qw{
    display:inline; opacity:.15;
    will-change:opacity;
  }
  .c-quote cite{ opacity:0; transform:translateY(.4em); will-change:opacity, transform; }
  @media (prefers-reduced-motion: reduce){
    .c-quote blockquote .qw{ opacity:1 !important; }
    .c-quote cite{ opacity:1 !important; transform:none !important; }
  }
  @media (min-width:600px){ .c-quote .q-hl{ white-space:nowrap; } }
  .c-quote .q-hl:hover{ border-color:var(--line); }
  .c-quote cite{
    display:block; margin-top:2.2rem; font-style:normal; text-align:center;
    font-family:"IBM Plex Mono",monospace; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--mono-gray);
  }
  /* the image lives in the word: on hover it unrolls downward and settles;
     on leave it rolls back up and lifts away, never just blinks out */
  .c-quote .q-preview{
    position:fixed; top:0; left:0; width:clamp(200px,22vw,300px); aspect-ratio:4/5; z-index:var(--z-float);
    border-radius:var(--r-md); overflow:hidden; box-shadow:0 26px 60px rgba(18,23,26,.28);
    opacity:0; pointer-events:none; transform-origin:top center;
    clip-path:inset(0 0 100% 0 round var(--r-md));
    transform:translateY(-10px);
    transition:
      opacity .34s ease,
      clip-path .5s cubic-bezier(.5,0,.15,1),
      transform .5s cubic-bezier(.5,0,.15,1);
    will-change:clip-path, opacity, transform;
  }
  .c-quote .q-preview.is-on{
    opacity:1;
    clip-path:inset(0 0 0 0 round var(--r-md));
    transform:translateY(0);
  }
  .c-quote .q-preview img{
    width:100%; height:100%; object-fit:cover; display:block;
    transform:scale(1.09); transition:transform .7s cubic-bezier(.5,0,.15,1);
  }
  .c-quote .q-preview.is-on img{ transform:scale(1); }
  @media (prefers-reduced-motion: reduce){
    .c-quote .q-preview, .c-quote .q-preview img{ transition:opacity .2s ease; transform:none; clip-path:none; }
  }
  @media (max-width:640px){
    .c-quote{ padding:6.4rem 0; min-height:0; }
    .c-quote .q-preview{ display:none; }
  }


/* --- nav sits outside .c-section, so it needs its font set explicitly --- */
.c-nav-bar, .c-nav, .c-nav .links, .c-nav .enquire{
  font-family:var(--font-body);
}

/* =========================================================
   Redesign pass — interaction states, accessibility, texture
   ========================================================= */

/* ---- skip link: first tab stop, hidden until focused ---- */
.skip-link{
  position:fixed; top:0; left:0; z-index:calc(var(--z-nav) + 1);
  transform:translateY(-120%);
  background:var(--mono-black); color:#fff;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.85rem 1.4rem; text-decoration:none;
  transition:transform .2s ease;
}
.skip-link:focus{ transform:translateY(0); }

/* ---- focus: one visible ring everywhere (was missing entirely) ---- */
:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
  border-radius:var(--r-xs);
}
.c-hero :focus-visible,
.c-boatwater :focus-visible,
.c-fleet :focus-visible,
.c-carousel :focus-visible{ outline-color:var(--brass-lift); }

/* ---- pressed feedback: nothing had an :active state ---- */
.c-nav .enquire,
.c-carousel .carousel-nav button,
.c-fleet .all,
.c-hero .discover,
.c-carousel .cap a{ transition:color .2s ease, background .2s ease, border-color .2s ease, transform .12s ease; }

.c-nav .enquire:hover{ border-color:var(--brass-lift); color:var(--brass-lift); }
.c-nav-bar.on-light .c-nav .enquire:hover{ border-color:var(--brass); color:var(--brass); }
.c-nav .enquire:active,
.c-carousel .carousel-nav button:active,
.c-fleet .all:active,
.c-hero .discover:active,
.c-carousel .cap a:active{ transform:translateY(1px); }

/* ---- accent picks up the interactive edges ---- */
.c-fleet .all:hover{ color:var(--brass-lift); border-bottom-color:var(--brass-lift); }
.c-carousel .cap a:hover{ border-bottom-color:var(--brass-lift); }
.c-quote .q-hl:hover{ border-color:var(--brass); }
footer .address a:hover,
footer .wrap > .bottom .bottom-links a:hover,
footer .made-by a:hover{ color:var(--brass); }
footer .wrap > .bottom .bottom-links .social:hover{ color:var(--brass); }

/* ---- grain: breaks the flat digital surface. Wood and varnish, not glass ---- */
body::after{
  content:"";
  position:fixed; inset:0; z-index:var(--z-grain);
  pointer-events:none;
  opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}
@media (prefers-reduced-motion: reduce){ body::after{ opacity:.02; } }

/* ---- tabular figures wherever numbers line up ---- */
.c-card .num, .bw-side p, footer .address{ font-variant-numeric:tabular-nums; }

  /* ---- helm: the ship's wheel turns as you scroll. "you chart the course" ---- */
  .c-helm{
    background:var(--deep); color:#fff;
    padding:clamp(4rem,9vh,7rem) var(--edge);
    overflow:hidden;
  }
  .helm-inner{
    max-width:1180px; margin:0 auto;
    display:flex; flex-direction:column; align-items:center; text-align:center;
    gap:clamp(2.2rem,6vh,3.6rem);
  }
  .helm-stage{
    position:relative; width:clamp(200px,32vw,380px); aspect-ratio:1;
  }
  /* the photo's own ground is already ~#04181e — only soften the outer corners */
  .helm-stage::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
    background:radial-gradient(circle at 50% 50%, rgba(4,24,30,0) 78%, rgba(4,24,30,.7) 100%);
  }
  .helm-wheel{
    position:relative; z-index:1;
    width:100%; height:100%; object-fit:contain; display:block;
    filter:drop-shadow(0 22px 50px rgba(0,0,0,.5));
    will-change:transform;
  }
  /* the F hub sits still while the wheel turns underneath — a compass point */
  .helm-mark{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:25%; height:auto; z-index:3; pointer-events:none;
    filter:drop-shadow(0 3px 10px rgba(0,0,0,.45));
  }
  .helm-text .kicker{ font-size:.82rem; letter-spacing:.06em; color:var(--brass-lift); margin-bottom:1rem; }
  .helm-text h2{
    font-size:clamp(1.6rem,3.6vw,2.6rem); font-weight:600; line-height:1.22;
    letter-spacing:-.01em; max-width:20ch; margin:0 auto;
  }
  @media (prefers-reduced-motion: reduce){ .helm-wheel{ filter:none; } }
  @media (max-width:640px){
    .c-helm{ padding:5rem var(--edge); }
    .helm-inner{ gap:2rem; }
    .helm-stage{ width:clamp(170px,58vw,240px); }
  }

  /* =========================================================
     MODEL DETAIL — /models/{slug}
     ========================================================= */
  .md{ background:#fff; color:var(--mono-black); }
  .md .kicker{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em;
    text-transform:uppercase; color:var(--brass); }

  /* ---- 1. hero ---- */
  .md-hero{ position:relative; min-height:560px; background:#fff; }
  .md-hero-stage{
    position:relative; height:100svh; min-height:560px; overflow:hidden;
    display:flex; align-items:flex-end;
  }
  /* the frame is what "docks" — clip-path pulls it in from the edges on scroll */
  .md-hero-frame{
    position:absolute; inset:0; z-index:0; overflow:hidden;
    clip-path:inset(0px round 0px); will-change:clip-path;
  }
  .md-hero-media{ position:absolute; inset:0; }
  .md-hero-media img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
  .md-hero-veil{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      linear-gradient(180deg, rgba(4,24,30,.28) 0%, rgba(4,24,30,0) 26%),
      linear-gradient(0deg, rgba(4,24,30,.72) 0%, rgba(4,24,30,.10) 42%, rgba(4,24,30,0) 62%);
  }
  .md-hero-inner{
    position:relative; z-index:2; color:#fff;
    padding:0 var(--edge) clamp(3rem,7vh,5.5rem);
    width:100%; will-change:transform, opacity;
  }
  .md-hero-inner .kicker{ color:var(--brass-lift); margin-bottom:1rem; display:block; }
  .md-hero-title{
    font-family:var(--font-display); font-weight:300;
    font-size:clamp(3rem,11vw,8.5rem); line-height:.95; letter-spacing:-.02em;
    text-transform:uppercase; margin:0;
  }
  .md-hero-tagline{
    font-size:clamp(1rem,2vw,1.35rem); color:rgba(255,255,255,.82);
    margin:1.1rem 0 0; max-width:34ch; font-weight:300;
  }
  .md-film-btn{
    margin-top:1.6rem; display:inline-flex; align-items:center; gap:.6rem;
    background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.35);
    border-radius:var(--r-xs); padding:.7rem 1.25rem; font-family:var(--font-body);
    font-size:.86rem; cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    transition:background .2s ease;
  }
  .md-film-btn:hover{ background:rgba(255,255,255,.22); }
  .md-film-play{ width:0; height:0; border-style:solid; border-width:5px 0 5px 8px;
    border-color:transparent transparent transparent #fff; }
  .md-hero-cue{
    position:absolute; z-index:2; left:50%; bottom:1.4rem; transform:translateX(-50%);
    width:22px; height:34px; border:1px solid rgba(255,255,255,.5); border-radius:var(--r-pill);
  }
  .md-hero-cue span{
    position:absolute; left:50%; top:7px; width:2px; height:7px; margin-left:-1px;
    background:#fff; border-radius:1px; animation:mdCue 1.7s ease-in-out infinite;
  }
  @keyframes mdCue{ 0%{opacity:0; transform:translateY(0);} 40%{opacity:1;} 80%{opacity:0; transform:translateY(9px);} 100%{opacity:0;} }
  @media (prefers-reduced-motion: reduce){ .md-hero-cue span{ animation:none; } }

  /* touch + scroll-driven animations: sticky stage, dock animated off the live scroll offset
     (Detail.cshtml sets .md-scrolldriven and --md-from / --md-to / --md-drive / --md-pad) */
  .md-hero.md-scrolldriven::after, .md-hero.md-timed::after{ content:""; display:block; height:var(--md-drive,105svh); }
  .md-hero.md-scrolldriven .md-hero-stage, .md-hero.md-timed .md-hero-stage{ position:sticky; top:0; }
  /* older touch browsers: same sticky stage, but the dock is a short timed transition that a
     scroll threshold starts (Detail.cshtml adds .md-timed and toggles .is-docked) */
  .md-timed .md-hero-frame{ transition:clip-path .85s cubic-bezier(.22,.7,.2,1); }
  .md-timed .md-hero-media img{ transform:scale(1.12); transition:transform 1.1s cubic-bezier(.22,.7,.2,1); }
  .md-timed .md-hero-inner{ transition:transform .7s cubic-bezier(.22,.7,.2,1), opacity .5s ease; }
  .md-timed .md-hero-cue{ transition:opacity .35s ease; }
  .md-timed.is-docked .md-hero-frame{
    clip-path:inset(calc(var(--md-pad,14px) * .35) var(--md-pad,14px) calc(var(--md-pad,14px) * .7) var(--md-pad,14px) round 34px);
  }
  .md-timed.is-docked .md-hero-media img{ transform:scale(1); }
  .md-timed.is-docked .md-hero-inner{ transform:translate3d(0,-46%,0); opacity:0; }
  .md-timed.is-docked .md-hero-cue{ opacity:0; }
  .md-hero.md-scrolldriven .md-hero-frame,
  .md-hero.md-scrolldriven .md-hero-media img,
  .md-hero.md-scrolldriven .md-hero-inner,
  .md-hero.md-scrolldriven .md-hero-cue{
    animation-timeline:scroll(root block);
    animation-range:var(--md-from,0px) var(--md-to,100vh);
    animation-timing-function:linear; animation-fill-mode:both;
  }
  .md-hero.md-scrolldriven .md-hero-frame{ animation-name:md-dock-frame; }
  .md-hero.md-scrolldriven .md-hero-media img{ animation-name:md-dock-img; }
  .md-hero.md-scrolldriven .md-hero-inner{ animation-name:md-dock-inner; }
  .md-hero.md-scrolldriven .md-hero-cue{ animation-name:md-dock-cue; animation-composition:replace; }
  @keyframes md-dock-frame{
    from{ clip-path:inset(0px 0px 0px 0px round 0px); }
    to{ clip-path:inset(calc(var(--md-pad,14px) * .35) var(--md-pad,14px) calc(var(--md-pad,14px) * .7) var(--md-pad,14px) round 34px); }
  }
  @keyframes md-dock-img{ from{ transform:scale(1.12); } to{ transform:scale(1); } }
  @keyframes md-dock-inner{
    from{ transform:translate3d(0,0,0); opacity:1; }
    50%,100%{ transform:translate3d(0,-46%,0); opacity:0; }
  }
  @keyframes md-dock-cue{ from{ opacity:1; } 28%,100%{ opacity:0; } }

  /* ---- 2. intro + spec strip ---- */
  .md-intro{
    max-width:1080px; margin:0 auto; padding:clamp(5rem,12vh,9rem) var(--edge) clamp(3rem,7vh,5rem);
    text-align:center;
  }
  .md-intro-lead{
    font-family:var(--font-display); font-weight:300;
    font-size:clamp(1.4rem,3.2vw,2.35rem); line-height:1.3; letter-spacing:-.01em;
    color:var(--ink); margin:0 auto; max-width:24ch;
  }
  .md-intro-lead{ max-width:30ch; }
  .md-stats{
    display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(1.5rem,5vw,4rem);
    margin:clamp(2.5rem,6vh,4rem) 0 1.6rem; padding:0;
  }
  .md-stat{ text-align:center; }
  .md-stat dt{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em;
    text-transform:uppercase; color:var(--mono-gray); margin-bottom:.5rem; }
  .md-stat dd{ margin:0; font-family:var(--font-display); font-weight:300;
    font-size:clamp(1.7rem,4vw,2.7rem); line-height:1; letter-spacing:-.01em;
    color:var(--brass); font-variant-numeric:tabular-nums; }
  .md-jump{
    display:inline-block; font-family:var(--font-mono); font-size:.76rem; letter-spacing:.06em;
    text-transform:uppercase; color:var(--ink-soft); text-decoration:none;
    border-bottom:1px solid var(--line); padding-bottom:.2rem; transition:color .2s ease, border-color .2s ease;
  }
  .md-jump:hover{ color:var(--brass); border-color:var(--brass); }

  /* ---- 3. gallery — big main image + vertical thumbnail rail ---- */
  .md-gallery{ padding:clamp(2.5rem,6vh,4.5rem) var(--edge) clamp(2.5rem,6vh,4.5rem); position:relative; }
  .mg-sticky{ display:block; }
  /* desktop: the grid holds while the main photo steps through the rail on
     scroll (JS gives .md-gallery its height); the layout is unchanged */
  @media (min-width:821px) and (prefers-reduced-motion: no-preference){
    .mg-sticky{ position:sticky; top:clamp(68px,9vh,88px); }
    .mg-sticky .mg-main{ max-height:64vh; }
  }
  .mg-grid{
    max-width:1180px; margin:0 auto; display:grid;
    grid-template-columns:minmax(0,1fr) clamp(140px,14vw,200px);
    grid-template-rows:auto auto;
    column-gap:clamp(1rem,2vw,1.8rem); row-gap:clamp(1.2rem,2.6vh,2rem);
  }
  .mg-main{
    grid-column:1; grid-row:1;
    position:relative; aspect-ratio:16/9; max-height:56vh; border-radius:var(--r-md);
    overflow:hidden; background:var(--cream);
  }
  .mg-frame{
    position:absolute; left:0; right:0; top:-6%; height:112%; width:100%; object-fit:cover;
    opacity:0; transition:opacity .55s ease; will-change:opacity, transform;
  }
  .mg-frame.on{ opacity:1; }
  /* rail sits in the same grid row as the main image -> exactly its height,
     and the thumbs share that height evenly */
  .mg-rail{
    grid-column:2; grid-row:1;
    display:flex; flex-direction:column; gap:clamp(.4rem,.7vw,.7rem); min-height:0;
  }
  .mg-thumb{
    flex:1 1 0; min-height:0;
    border:0; padding:0; margin:0; background:var(--cream); cursor:pointer; position:relative;
    border-radius:var(--r-xs); overflow:visible; width:100%;
    opacity:.5; transition:opacity .35s ease, transform .45s cubic-bezier(.5,0,.15,1);
  }
  .mg-thumb img{
    width:100%; height:100%; object-fit:cover; display:block;
    border-radius:var(--r-xs); filter:brightness(.95);
    transition:filter .4s ease, box-shadow .4s ease;
  }
  .mg-thumb:hover{ opacity:.72; }
  /* active: the thumb eases a step toward the main photo, comes to full
     colour, and takes a brass edge — the same active-mark used on the
     atelier steps, so the whole site speaks one language */
  .mg-thumb.on{ opacity:1; transform:translateX(calc(-1 * clamp(.5rem,1vw,.9rem))); z-index:2; }
  .mg-thumb.on img{ filter:none; box-shadow:0 16px 34px -14px rgba(20,25,28,.42); }
  .mg-thumb::after{
    content:""; position:absolute; left:-9px; top:0; bottom:0; width:2px;
    background:var(--brass); border-radius:2px; pointer-events:none;
    transform:scaleY(0); transform-origin:center; opacity:0;
    transition:transform .45s cubic-bezier(.5,0,.15,1), opacity .3s ease;
  }
  .mg-thumb.on::after{ transform:scaleY(1); opacity:1; }
  @media (prefers-reduced-motion: reduce){
    .mg-thumb, .mg-thumb img, .mg-thumb::after{ transition:opacity .2s ease; }
    .mg-thumb, .mg-thumb.on{ transform:none; }
    .mg-thumb::after{ transform:scaleY(1); }
  }
  .mg-text{ grid-column:1; grid-row:2; max-width:52ch; }
  .mg-text .kicker{ display:block; margin-bottom:.7rem; }
  .mg-title{
    font-family:var(--font-display); font-weight:300; font-size:clamp(1.4rem,2.6vw,2rem);
    letter-spacing:-.01em; margin:0; color:var(--ink); transition:opacity .3s ease;
  }
  .mg-cap{
    font-size:.95rem; line-height:1.6; color:var(--ink-soft); margin:.7rem 0 0;
    transition:opacity .3s ease;
  }
  @media (max-width:820px){
    .mg-grid{ grid-template-columns:1fr; grid-template-rows:auto auto auto; column-gap:0; }
    .mg-main{ aspect-ratio:4/3; max-height:none; }
    .mg-rail{
      grid-column:1; grid-row:2; flex-direction:row; min-height:0;
      overflow-x:auto; -webkit-overflow-scrolling:touch;
      scroll-snap-type:x proximity; padding-bottom:.3rem; gap:.5rem;
    }
    .mg-thumb{ flex:0 0 30%; aspect-ratio:3/2; scroll-snap-align:start; }
    /* the rail runs sideways here: the desktop's "step toward the photo" shift would slide the
       active thumb over its neighbour, so it stays in place and the brass mark goes underneath */
    .mg-thumb.on{ transform:none; }
    .mg-thumb::after{
      left:0; right:0; top:auto; bottom:0; width:auto; height:3px;
      transform:scaleX(0); border-radius:0 0 var(--r-xs) var(--r-xs);
    }
    .mg-thumb.on::after{ transform:scaleX(1); }
    .mg-text{ grid-column:1; grid-row:3; }
  }
  @media (prefers-reduced-motion: reduce){ .mg-frame{ transition:none; } }

  /* ---- 4. feature blocks ---- */
  .md-feature{
    display:grid; grid-template-columns:1.05fr .95fr; align-items:center;
    gap:clamp(2rem,6vw,5rem);
    max-width:1200px; margin:0 auto; padding:clamp(3.5rem,9vh,7rem) var(--edge);
  }
  .md-feature.alt{ direction:rtl; }
  .md-feature.alt > *{ direction:ltr; }
  .md-feature-media{ overflow:hidden; border-radius:var(--r-md); aspect-ratio:4/5; }
  .md-feature-media img{ width:100%; height:100%; object-fit:cover; will-change:transform; transform:scale(1.11); }
  @media (prefers-reduced-motion: reduce){ .md-feature-media img{ transform:none; } }
  .md-feature-body .kicker{ display:block; margin-bottom:1rem; }
  .md-feature-body h2{
    font-family:var(--font-display); font-weight:300; font-size:clamp(1.6rem,3.6vw,2.6rem);
    line-height:1.18; letter-spacing:-.01em; margin:0 0 1rem; color:var(--ink);
  }
  .md-feature-body p{ font-size:1rem; line-height:1.68; color:var(--ink-soft); margin:0 0 1.3rem; max-width:42ch; }
  @media (max-width:820px){
    .md-feature{ grid-template-columns:1fr; gap:1.6rem; padding:clamp(3rem,7vh,4.5rem) var(--edge); }
    .md-feature.alt{ direction:ltr; }
    .md-feature-media{ aspect-ratio:4/3; }
  }

  /* ---- 5. technical + variants ---- */
  .md-plans{ max-width:1120px; margin:0 auto; padding:clamp(3.5rem,9vh,7rem) var(--edge) 0; }
  .md-plans .kicker{ display:block; margin-bottom:.9rem; }
  .md-plans h2{
    font-family:var(--font-display); font-weight:300; font-size:clamp(1.8rem,4vw,2.8rem);
    letter-spacing:-.01em; margin:0 0 1rem; color:var(--ink);
  }
  .md-plans-lead{ font-size:.98rem; line-height:1.7; color:var(--ink-soft); max-width:52ch; margin:0 0 clamp(1.6rem,4vw,2.6rem); }
  .md-plan{ margin:0; padding:clamp(1rem,2.4vw,1.8rem) 0; border-top:1px solid var(--line); }
  .md-plan:last-child{ border-bottom:1px solid var(--line); }
  .md-plan img{ display:block; width:100%; height:auto; mix-blend-mode:multiply; }

  .md-tech{ max-width:900px; margin:0 auto; padding:clamp(3.5rem,9vh,7rem) var(--edge) clamp(4rem,10vh,7rem); }
  .md-tech .kicker{ display:block; margin-bottom:.9rem; }
  .md-tech h2{
    font-family:var(--font-display); font-weight:300; font-size:clamp(1.8rem,4vw,2.8rem);
    letter-spacing:-.01em; margin:0 0 2rem; color:var(--ink);
  }
  .md-variants{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin:0 0 2.4rem; }
  .md-variant{
    font-family:var(--font-mono); font-size:.78rem; letter-spacing:.04em;
    padding:.55rem 1rem; border:1px solid var(--line); border-radius:var(--r-xs);
    background:#fff; color:var(--ink-soft); cursor:pointer; transition:all .2s ease;
  }
  .md-variant:hover{ border-color:var(--brass); color:var(--brass); }
  .md-variant.is-on{ background:var(--ink); border-color:var(--ink); color:#fff; }

  .md-profile{ color:var(--brass); margin:0 0 2.6rem; }
  .md-profile svg{ width:100%; height:auto; display:block; }

  .md-spectable{ display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(2rem,6vw,4rem); }
  .md-specgroup{ padding:1.4rem 0; border-top:1px solid var(--line); }
  .md-specgroup h3{
    font-family:var(--font-mono); font-weight:500; font-size:.72rem; letter-spacing:.1em;
    text-transform:uppercase; color:var(--brass); margin:0 0 .8rem;
  }
  .md-specgroup dl{ margin:0; }
  .md-specrow{ display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0;
    font-size:.9rem; border-bottom:1px solid var(--line); }
  .md-specrow:last-child{ border-bottom:0; }
  .md-specrow dt{ color:var(--ink-soft); }
  .md-specrow dd{ margin:0; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; }
  .md-tech-note{ font-size:.78rem; color:var(--mono-gray); margin:1.8rem 0 0; }
  .md-range-note{ font-size:.85rem; color:var(--ink-soft); margin:-.6rem 0 2rem; max-width:52ch; }
  .md-photo-note{
    max-width:1180px; margin:1rem auto 0; padding:0 var(--edge);
    font-size:.78rem; color:var(--mono-gray); font-style:italic;
  }
  @media (max-width:720px){ .md-spectable{ grid-template-columns:1fr; } }

  /* ---- 6. closing + cta ---- */
  .md-closing{
    background:var(--deep); color:#fff; text-align:center;
    padding:clamp(5rem,14vh,10rem) var(--edge);
  }
  .md-closing-line{
    font-family:var(--font-display); font-weight:300; font-size:clamp(1.5rem,3.6vw,2.6rem);
    line-height:1.34; letter-spacing:-.01em; max-width:26ch; margin:0 auto 2.4rem;
  }
  .md-closing-line .md-w{ transition:opacity .2s linear; }
  .md-cta{
    display:inline-block; background:var(--brass); color:#fff; text-decoration:none;
    font-size:.9rem; letter-spacing:.02em; padding:.95rem 2.2rem; border-radius:var(--r-xs);
    transition:background .2s ease, transform .2s ease;
  }
  .md-cta:hover{ background:var(--brass-lift); transform:translateY(-1px); }

  /* ---- 3b. in-motion — one vertical frame, clips crossfade on scroll.
     CSS position:sticky (not a GSAP pin) — rock-solid with Lenis, no spacer. ---- */
  .md-reel{
    background:var(--deep); color:#fff; position:relative;
    /* tall scroll track: one screen to read the frame + ~0.6 screen per clip */
    height:calc(100svh + (var(--reel-steps, 5) - 1) * 62vh);
  }
  .md-reel-sticky{
    position:sticky; top:0; height:100svh; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  .md-reel-inner{
    display:flex; align-items:center; justify-content:center;
    gap:clamp(2rem,6vw,5.5rem); padding:clamp(4rem,10vh,7rem) var(--edge);
    width:100%;
  }
  /* fixed width + reserved caption height so a 1- vs 2-line caption never
     nudges the video frame */
  .md-reel-text{ flex:0 0 auto; width:clamp(11rem,20vw,15rem); }
  .md-reel-text .kicker{ color:var(--brass-lift); display:block; margin-bottom:1rem; }
  .md-reel-caption{
    font-family:var(--font-display); font-weight:300; font-size:clamp(1.5rem,3.2vw,2.3rem);
    line-height:1.22; letter-spacing:-.01em; margin:0; color:#fff;
    min-height:2.6em; display:flex; align-items:flex-start;
    transition:opacity .35s ease;
  }
  .md-reel-dots{ display:flex; gap:.5rem; margin-top:1.6rem; }
  .md-reel-dots span{
    width:26px; height:2px; background:rgba(255,255,255,.24); border-radius:2px;
    transition:background .3s ease;
  }
  .md-reel-dots span.on{ background:var(--brass-lift); }
  .md-reel-arrows{ display:flex; gap:.6rem; margin-top:1.4rem; }
  .md-reel-btn{ width:2.6rem; height:2.6rem; }
  .md-reel-stage{
    position:relative; flex:0 0 auto; height:min(76vh,640px); aspect-ratio:9/16;
    border-radius:var(--r-md); overflow:hidden; background:#0a1f25;
    box-shadow:0 40px 90px rgba(0,0,0,.5);
  }
  .md-reel-v{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    opacity:0; transition:opacity .55s ease;
  }
  .md-reel-v.on{ opacity:1; }
  @media (max-width:820px){
    .md-reel{ height:calc(100svh + (var(--reel-steps, 5) - 1) * 52vh); }
    .md-reel-inner{ flex-direction:column; gap:1.6rem; padding:2.5rem var(--edge); }
    .md-reel-text{ width:auto; text-align:center; order:2; }
    .md-reel-caption{ min-height:0; justify-content:center; }
    .md-reel-dots{ justify-content:center; }
    .md-reel-arrows{ justify-content:center; }
    .md-reel-stage{ order:1; height:min(60vh,480px); }
  }
  @media (prefers-reduced-motion: reduce){
    .md-reel{ height:auto; }
    .md-reel-sticky{ position:static; height:auto; padding:clamp(4rem,10vh,7rem) 0; }
    .md-reel-v{ transition:none; }
  }

  /* ---- /models index (provisional) ---- */
  .mdx{ background:#fff; padding:clamp(7.5rem,15vh,11rem) var(--edge) clamp(5rem,10vh,8rem); }
  .mdx-head{ max-width:760px; margin:0 auto clamp(3rem,7vh,5rem); }
  .mdx-head .kicker{ display:block; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em;
    text-transform:uppercase; color:var(--brass); margin-bottom:1rem; }
  .mdx-head h1{ font-family:var(--font-display); font-weight:300; font-size:clamp(2rem,5vw,3.4rem);
    letter-spacing:-.02em; margin:0 0 1rem; color:var(--ink); }
  .mdx-head .lead{ font-size:1.02rem; line-height:1.7; color:var(--ink-soft); margin:0; }
  .mdx-group{ max-width:1180px; margin:0 auto clamp(3.5rem,8vh,6rem); }
  /* Modern reads clean and cool (white); Classic gets a warm, rounded
     "panel" in the footer's sand tone — the same material split the copy
     already draws (GRP hardtops vs hand-planked wood) made visible. */
  .mdx-group.is-classic{
    background:var(--sand); border-radius:var(--r-lg);
    padding:clamp(2.4rem,5vw,3.6rem);
  }
  .mdx-group-head{ display:flex; align-items:flex-start; gap:1.2rem; margin:0 0 clamp(1.8rem,4vh,2.6rem); }
  .mdx-num{
    font-family:var(--font-mono); font-size:1rem; letter-spacing:.04em; color:var(--brass);
    font-variant-numeric:tabular-nums; padding-top:.5rem; flex:none;
  }
  .mdx-cat{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.7rem,3vw,2.4rem);
    letter-spacing:-.01em; color:var(--ink); margin:0 0 .3rem; }
  .mdx-cat-sub{ font-size:.98rem; line-height:1.5; color:var(--ink-soft); margin:0; max-width:44ch; }
  /* flex, not the inherited grid — Chrome's CSS grid auto-row sizing was
     undersizing each row to just the photo's height and clean clipping
     off the caption block below it (couldn't pin down why; flex-wrap
     sidesteps it entirely, sizing each card to its own real content). */
  .mdx-group .c-cards{
    display:flex; flex-wrap:wrap; grid-template-columns:none; align-items:flex-start;
  }
  .mdx-group .c-card{ flex:1 1 calc(33.333% - 12px); min-width:260px; }
  @media (max-width:900px){ .mdx-group .c-card{ flex-basis:calc(50% - 9px); } }
  @media (max-width:560px){ .mdx-group .c-card{ flex-basis:100%; } }
  /* full boat, not a cropped slice — the carousel's tall portrait card
     works peeking off-screen mid-scroll, but a dedicated range page should
     show the whole hull, so this follows the photo's own 10:7 crop instead
     of a fixed viewport-relative height. */
  .mdx-group .c-card__media{ height:clamp(200px,24vw,300px); border-radius:var(--r-md) var(--r-md) 0 0; }
  /* the carousel's frosted panel sits INSET, floating over the bottom of
     the photo — fine when every source photo frames the hull large and
     centred, but this set doesn't (some boats sit low/small in frame with
     a lot of sky), so the panel end up covering the hull itself. Move the
     caption below the photo instead: it can never obscure the boat no
     matter how any given photo is framed.
     Also: .c-card's own overflow:hidden (needed elsewhere to clip the
     image to the card's rounded corners) makes Chrome's grid auto-row
     sizing ignore this now-static panel entirely and undersize the row to
     just the media's height, clipping the panel off — so the rounding
     moves onto media/panel individually and overflow:hidden comes off
     the card itself. */
  .mdx-group .c-card{
    background:#fff; border-radius:var(--r-md); overflow:visible;
    box-shadow:0 1px 3px rgba(18,23,26,.06), 0 16px 32px -20px rgba(18,23,26,.22);
  }
  .mdx-group .c-card__panel{
    position:static; margin:0; border-radius:0 0 var(--r-md) var(--r-md); box-shadow:none;
    background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none;
    border:0; border-top:1px solid var(--line);
    color:var(--ink); padding:1rem 1.1rem 1.05rem;
  }
  .mdx-group .cp-len{ background:var(--cream); color:var(--ink); }
  .mdx-group .cp-spec{ color:var(--ink-soft); }
  .mdx-group .cp-foot{ border-top-color:var(--line); }
  .mdx-group .cp-note{ color:var(--mono-gray); }
  .mdx-group .cp-go{ background:var(--cream); border-color:var(--line); color:var(--ink); }
  .mdx-group .c-card:hover .c-card__panel{ background:#fff; }
  .mdx-group .c-card:hover .cp-go{ background:var(--brass-lift); border-color:var(--brass-lift); color:#0a1f25; }

  /* =========================================================
     THE ATELIER — /atelier   (skeleton — grey placeholders)
     ========================================================= */
  .atl{ background:#fff; color:var(--mono-black); }
  .atl .kicker{
    font-family:var(--font-mono); font-size:.76rem; letter-spacing:.12em;
    text-transform:uppercase; color:var(--brass);
  }
  .atl-body[data-nav-theme]{ display:block; }

  /* placeholder block — every image slot until real photos arrive */
  .atl-ph{
    position:relative; background:
      repeating-linear-gradient(-45deg, rgba(18,23,26,.045) 0 12px, rgba(18,23,26,.02) 12px 24px);
    border:1px solid var(--line); border-radius:var(--r-md);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
    min-height:200px;
  }
  .atl-ph::after{
    content:attr(data-ph);
    font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em;
    color:var(--mono-gray); text-align:center; padding:1rem 1.4rem; max-width:32ch;
  }
  /* real image slots */
  .atl-stop-media, .atl-craft-media, .atl-person-photo{
    overflow:hidden; border-radius:var(--r-md); background:#ece9e3;
  }
  .atl-stop-media img, .atl-craft-media img, .atl-place-photo img,
  .atl-person-photo img, .atl-open-media img{
    display:block; width:100%; height:100%; object-fit:cover;
  }
  .atl-place-photo{ overflow:hidden; }
  .atl-place-photo img{ object-position:50% 48%; }   /* the hull and the workshop behind it, not the ceiling */

  /* ---- 1. opening — the line assembles over the full-bleed photo; then the
     photo draws in to a framed right-hand panel while the journey intro is
     revealed on the left (Sanlorenzo Arts & Culture style). ---- */
  .atl-pin{ position:relative; z-index:2; }
  .atl-open{
    position:relative; z-index:2; height:100vh; min-height:520px;
    overflow:hidden; background:var(--sand); color:var(--ink);
  }
  @media (min-width:901px){
    /* 250vh held the finished photo for a long stretch before the page moved on; 200vh keeps the move
       (it simply plays a little faster) and the wait after it is much shorter */
    .atl-pin{ height:200vh; }
    .atl-open{ position:sticky; top:0; }
  }
  .atl-open-frame{
    position:absolute; inset:0; z-index:1; overflow:hidden;
    clip-path:inset(0 0 0 0 round 0px); will-change:clip-path;
  }
  .atl-open-media{ position:absolute; inset:0; }
  .atl-open-media img{
    width:100%; height:100%; object-fit:cover;
    transform:translateZ(0); backface-visibility:hidden; will-change:transform;
  }
  .atl-open-veil{
    position:absolute; inset:0; pointer-events:none;
    background:
      linear-gradient(180deg, rgba(4,20,26,.42) 0%, rgba(4,20,26,.16) 26%, rgba(4,20,26,.58) 62%, rgba(4,20,26,.92) 100%),
      linear-gradient(90deg, rgba(4,20,26,.72) 0%, rgba(4,20,26,.3) 34%, rgba(4,20,26,0) 62%);
  }
  .atl-open-grain{
    position:absolute; inset:0; pointer-events:none; opacity:.45; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  }
  .atl-open-overcap{
    position:absolute; left:30%; bottom:9vh; z-index:2; max-width:30ch; color:#fff; opacity:0;
  }
  .atl-open-overcap p{
    font-family:var(--font-mono); font-size:.78rem; line-height:1.6; letter-spacing:.02em; margin:0;
    padding-left:.9rem; border-left:2px solid var(--brass-lift);
    text-shadow:0 1px 12px rgba(4,16,20,.6);
  }
  @media (max-width:900px){ .atl-open-overcap{ display:none; } }
  .atl-open-linewrap{
    position:absolute; left:0; right:0; bottom:0; z-index:3; color:#fff;
    padding:0 var(--edge) clamp(3.4rem,9vh,6rem);
  }
  .atl-open-linewrap .kicker{ color:var(--brass-lift); margin-bottom:1.1rem; display:block; }
  .atl-open-line{
    font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif;
    font-weight:200; color:#fff; margin:0;
    font-size:clamp(2rem,5.4vw,4rem); line-height:1.15; letter-spacing:.02em;
    text-transform:uppercase; max-width:20ch;
    text-shadow:0 2px 30px rgba(4,16,20,.5);
  }
  /* all-caps here — drop the descender-clip padding so the line spacing
     reads open, like the homepage hero */
  .atl-open-line .atl-wm{ padding-bottom:0; margin-bottom:0; }
  .atl-open-line .atl-w-em{ font-weight:500; }
  .atl-wm{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.16em; margin-bottom:-.16em; }
  .atl-w{ display:inline-block; will-change:transform; }

  .atl-open-reveal{
    position:absolute; left:0; top:0; bottom:0; z-index:2;
    width:clamp(260px, 26vw, 372px);
    padding:clamp(6rem,12vh,8.5rem) 0 clamp(2.4rem,6vh,4rem) var(--edge);
    display:flex; flex-direction:column; justify-content:space-between;
    opacity:0;
  }
  .atl-open-reveal .kicker{ color:var(--brass); margin-bottom:1rem; display:block; }
  .atl-open-reveal h2{
    font-family:var(--font-display); font-weight:600; color:var(--ink);
    font-size:clamp(1.9rem,3.6vw,2.8rem); line-height:1.04; letter-spacing:-.02em; margin:0 0 1rem;
  }
  .atl-open-reveal .atl-lead{
    font-size:.95rem; line-height:1.6; color:var(--ink-soft); margin:0;
  }
  .atl-open-thumb{
    margin:0; width:min(100%, 300px); aspect-ratio:1/1;
    border-radius:var(--r-md); overflow:hidden; position:relative;
    box-shadow:0 24px 50px -22px rgba(18,23,26,.42);
  }
  .atl-open-thumb video{ width:100%; height:100%; object-fit:cover; display:block; }
  .atl-open-thumb figcaption{
    position:absolute; left:0; right:0; bottom:0; padding:.7rem .8rem .55rem;
    font-family:var(--font-mono); font-size:.62rem; letter-spacing:.04em; color:#fff;
    background:linear-gradient(0deg, rgba(4,16,20,.72), rgba(4,16,20,0));
  }

  .atl-cue{
    position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%);
    width:26px; height:40px; border:1px solid rgba(255,255,255,.4); border-radius:var(--r-pill);
    display:flex; justify-content:center; padding-top:7px; z-index:4;
  }
  .atl-cue span{ width:2px; height:8px; background:#fff; border-radius:2px; animation:atlcue 1.6s ease-in-out infinite; }
  @keyframes atlcue{ 0%,100%{ opacity:0; transform:translateY(0); } 50%{ opacity:1; transform:translateY(6px); } }
  @media (prefers-reduced-motion: reduce){
    .atl-cue span{ animation:none; opacity:.7; }
    .atl-open-frame{ clip-path:inset(6vh 1.5vw 5vh 30% round 22px) !important; }
    .atl-open-reveal, .atl-open-overcap{ opacity:1 !important; }
    .atl-open-linewrap{ display:none; }
  }
  @media (max-width:900px) and (prefers-reduced-motion:reduce){
    /* reduced motion: no dock, so mobile keeps the desktop
       feel: a full-height photo hero with the line over its foot, then the
       journey intro + workshop loop below. */
    .atl-open{
      position:relative; height:auto; min-height:0;
      display:grid; grid-template-areas:"hero" "intro"; background:var(--sand);
    }
    .atl-open-frame{
      grid-area:hero; position:relative; clip-path:none !important;
      height:82svh; min-height:440px; aspect-ratio:auto;
    }
    .atl-open-linewrap{
      grid-area:hero; align-self:end; display:block; position:relative;
      padding:0 var(--edge) clamp(2rem,8vw,3.2rem);
    }
    .atl-open-line{ font-size:clamp(1.75rem,7vw,2.5rem); max-width:none; }
    .atl-open-reveal{
      grid-area:intro; position:static; width:auto; opacity:1 !important;
      padding:clamp(2.4rem,8vw,3.4rem) var(--edge);
      flex-direction:column; align-items:flex-start; gap:1.5rem;
    }
    /* the journey title lives on the reels section below — don't say it twice */
    .atl-open-reveal-head .kicker, .atl-open-reveal-head h2{ display:none; }
    .atl-open-reveal-head .atl-lead{ font-size:1rem; }
    .atl-open-thumb{ width:min(220px,58%); }
  }

  @media (max-width:900px) and (prefers-reduced-motion:no-preference){
    /* mobile dock: the same move as desktop. The full-bleed photo draws in to a
       framed panel at the foot while the journey intro is revealed above it. */
    .atl-pin{ height:185svh; }   /* was 230svh: the finished photo was held too long before the page moved on */
    .atl-open{ position:sticky; top:0; height:100svh; min-height:0; display:block; }
    .atl-open-frame{ position:absolute; inset:0; }
    .atl-open-linewrap{ position:absolute; left:0; right:0; bottom:0; padding:0 var(--edge) clamp(2.4rem,9vh,3.6rem); }
    .atl-open-line{ font-size:clamp(1.75rem,7vw,2.5rem); max-width:none; }
    .atl-open-reveal{
      position:absolute; left:0; right:0; top:0; bottom:auto; width:auto;
      padding:5.6rem var(--edge) 0; display:block; opacity:0;
    }
    .atl-open-reveal h2{ font-size:clamp(1.6rem,7.4vw,2.1rem); margin:0 0 .7rem; }
    .atl-open-reveal .kicker{ margin-bottom:.7rem; }
    .atl-open-reveal .atl-lead{ font-size:.92rem; line-height:1.5; }
    .atl-open-thumb{ display:none; }
  }

  /* ---- 2. the journey — five vertical reels, pinned, cinema-dark ---- */
  .atl-lead{ font-size:1rem; line-height:1.6; color:var(--ink-soft); max-width:40ch; margin:0; }

  .atl-reels{
    position:relative; z-index:1; background:var(--deep); color:#fff;
  }
  .atl-reels-pin{
    position:relative; height:100vh; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  /* big year, stacked; only the active one shows (JS toggles) */
  .atl-reels-year{
    position:absolute; inset:0; display:grid; place-items:center; z-index:0; pointer-events:none;
  }
  .atl-reels-year span{
    grid-area:1/1; font-family:var(--font-display); font-weight:600;
    font-size:clamp(9rem,34vw,30rem); line-height:1; letter-spacing:-.04em;
    color:rgba(255,255,255,.05); opacity:0; transition:opacity .4s ease;
  }
  .atl-reels-year span.on{ opacity:1; }

  .atl-reels-head{
    position:absolute; left:var(--edge); top:clamp(5.5rem,12vh,8rem); z-index:3; width:min(26vw,300px);
  }
  .atl-reels-head .kicker{ color:var(--brass-lift); display:block; margin-bottom:1rem; }
  .atl-reels-head h2{
    font-family:var(--font-display); font-weight:600; color:#fff;
    font-size:clamp(1.7rem,3.4vw,2.6rem); line-height:1.05; letter-spacing:-.02em; margin:0;
  }

  .atl-reels-rail{
    position:absolute; left:var(--edge); bottom:clamp(3rem,9vh,5.5rem); z-index:3;
    list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem;
  }
  .atl-reels-rail li{
    font-family:var(--font-mono); font-size:.74rem; letter-spacing:.1em;
    color:rgba(255,255,255,.34); font-variant-numeric:tabular-nums;
    padding-left:1.4rem; position:relative; transition:color .3s ease;
  }
  .atl-reels-rail li::before{
    content:""; position:absolute; left:0; top:.42em; width:6px; height:6px; border-radius:50%;
    background:rgba(255,255,255,.28); transition:background .3s ease, transform .3s ease;
  }
  .atl-reels-rail li.on{ color:#fff; }
  .atl-reels-rail li.on::before{ background:var(--brass-lift); transform:scale(1.5); }
  .atl-reels-progress{
    position:absolute; left:2px; top:.3em; bottom:.3em; width:2px;
    background:linear-gradient(var(--brass-lift), var(--brass-lift)) no-repeat;
    background-size:100% var(--rp, 0%); opacity:.5;
  }

  .atl-reels-stage{
    position:relative; z-index:2; width:min(34vw, 42vh, 420px); aspect-ratio:9/16;
  }
  .atl-reel{
    position:absolute; inset:0; margin:0; overflow:hidden;
    border-radius:var(--r-md); background:#0a1418;
    will-change:clip-path;
    box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
  }
  .atl-reel video{ width:100%; height:100%; object-fit:cover; display:block; }
  .atl-reel figcaption{
    position:absolute; left:0; right:0; bottom:0; padding:3.4rem 1.2rem 1rem;
    background:linear-gradient(0deg, rgba(4,20,26,.9) 0%, rgba(4,20,26,.5) 42%, rgba(4,20,26,0) 100%);
    opacity:0; transition:opacity .4s ease;
  }
  .atl-reel.on figcaption{ opacity:1; }
  .atl-reel-yr{
    font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; color:var(--brass-lift);
    display:block; margin-bottom:.5rem;
  }
  .atl-reel figcaption p{ font-size:.9rem; line-height:1.5; color:#fff; margin:0; max-width:32ch; text-shadow:0 1px 12px rgba(4,16,20,.5); }

  @media (max-width:900px){
    .atl-reels-pin{
      height:auto; flex-direction:column; align-items:stretch; justify-content:flex-start;
      padding:clamp(2.6rem,8vw,4rem) 0;
    }
    .atl-reels-year{ display:none; }
    .atl-reels-head{ position:static; padding:0 var(--edge); margin:0 0 2.2rem; width:100%; max-width:none; }
    .atl-reels-head h2{ font-size:clamp(1.9rem,7.5vw,2.5rem); }
    .atl-reels-rail{ display:none; }
    .atl-reels-stage{
      position:static; width:auto; aspect-ratio:auto;
      display:flex; flex-direction:column; gap:1.5rem; padding:0 var(--edge);
    }
    .atl-reel{
      position:relative; inset:auto; aspect-ratio:9/13;
      width:100%; max-width:340px; margin:0 auto;
    }
    .atl-reel figcaption{ opacity:1; }
  }
  @media (max-width:900px){
    /* phones with scroll-driven animations: the desktop's held stage. The section is tall, the
       pin sticks for its length, and each reel slides up over the last (Atelier.cshtml sets
       .atl-reels-sd, --rl-h and each reel's --rf / --rt scroll range). */
    .atl-reels.atl-reels-sd{ height:var(--rl-h,500svh); }
    .atl-reels-sd .atl-reels-pin{
      position:sticky; top:0; height:100svh; padding:4.6rem 0 1.6rem; overflow:hidden;
      justify-content:center; gap:1.3rem;
    }
    .atl-reels-sd .atl-reels-head{ margin:0; }
    /* the desktop's big faint year, at the head's right edge: one year at a time, it swaps as
       the reels change (a zero-height flex item so it needs no measuring) */
    .atl-reels-sd .atl-reels-year{
      display:block; position:relative; inset:auto; height:0; align-self:flex-end;
      margin:0 var(--edge) -1.3rem 0; overflow:visible; z-index:0;
    }
    .atl-reels-sd .atl-reels-year span{
      position:absolute; right:0; top:-.2rem; font-size:4.6rem; letter-spacing:-.04em;
      color:rgba(255,255,255,.16);
    }
    .atl-reels-sd .atl-reels-head{ position:relative; left:auto; top:auto; z-index:1; }
    .atl-reel-yr{ font-size:.8rem; }
    .atl-reels-sd .atl-reels-stage{
      display:block; position:relative; flex:none; padding:0;
      width:min(78vw, calc((100svh - 15rem) * 9 / 14)); aspect-ratio:9/14; margin:0 auto;
    }
    .atl-reels-sd .atl-reel{
      position:absolute; inset:0; width:auto; max-width:none; margin:0; aspect-ratio:auto;
    }
    .atl-reels-sd .atl-reel + .atl-reel{
      animation:atl-reel-up linear both; animation-timeline:scroll(root block);
      animation-range:var(--rf,0px) var(--rt,100vh);
    }
    .atl-reels-sd .atl-reel figcaption{ opacity:0; }
    .atl-reels-sd .atl-reel.on figcaption{ opacity:1; }
  }
  @keyframes atl-reel-up{ from{ clip-path:inset(100% 0 0 0); } to{ clip-path:inset(0 0 0 0); } }
  @media (prefers-reduced-motion: reduce){
    .atl-reel{ position:relative; inset:auto; clip-path:none !important; aspect-ratio:9/14; margin:0 auto 1.4rem; width:min(320px,80%); }
    .atl-reels-pin{ height:auto; flex-direction:column; padding:4rem 0; }
    .atl-reels-stage{ position:static; width:auto; aspect-ratio:auto; }
  }

  /* ---- 3. the craft ---- */
  .atl-craft{
    display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,5rem); align-items:center;
    max-width:1180px; margin:0 auto; padding:clamp(5rem,12vh,9rem) var(--edge);
  }
  .atl-craft-media{ aspect-ratio:4/5; min-height:0; }
  .atl-craft-body .kicker{ display:block; margin-bottom:1rem; }
  .atl-craft-body h2{
    font-family:var(--font-display); font-weight:600; color:var(--ink);
    font-size:clamp(2.2rem,5.5vw,3.8rem); line-height:1; letter-spacing:-.02em; margin:0 0 1.2rem;
  }
  .atl-craft-body p{ font-size:1rem; line-height:1.7; color:var(--ink-soft); margin:0; max-width:46ch; }
  .atl-craft-sub{
    margin-top:1.4rem !important; padding-top:1.4rem; border-top:1px solid var(--line);
    font-family:var(--font-mono); font-size:.82rem; line-height:1.7; letter-spacing:.02em;
    color:var(--mono-gray) !important; max-width:44ch;
  }

  /* ---- 2. the place — card in from the left, photo in from the right,
     meeting in the middle. No shadow on the card. ---- */
  .atl-place{
    position:relative; background:var(--cream); overflow:hidden;
    min-height:96vh; display:flex; align-items:center;
    padding:clamp(4rem,10vh,7rem) 0;
  }
  .atl-place-inner{ position:relative; width:100%; max-width:1240px; margin:0 auto; padding:0 var(--edge); }
  .atl-place-photo{
    width:min(66%,820px); margin-left:auto; aspect-ratio:3/2; min-height:0;
    border-radius:var(--r-lg); will-change:transform;
  }
  /* the card blends into the page — no frame, no shadow. Where it overlaps
     the photo it just hides that strip; against the ground it's invisible. */
  .atl-place-card{
    position:relative; z-index:1; margin:-12% 0 0; width:min(56%,540px);
    background:var(--cream); border-radius:var(--r-lg);
    padding:clamp(1.6rem,3vw,2.6rem) clamp(1.8rem,3.4vw,3rem) clamp(1.8rem,3.4vw,3rem) 0;
    will-change:transform;
  }
  .atl-place-card .kicker{ display:block; margin-bottom:1rem; }
  .atl-place-card h2{
    font-family:var(--font-display); font-weight:600; color:var(--ink);
    font-size:clamp(1.7rem,3.6vw,2.6rem); line-height:1.08; letter-spacing:-.01em; margin:0 0 1rem;
  }
  .atl-place-card p{ font-size:.98rem; line-height:1.7; color:var(--ink-soft); margin:0; }

  .atl-people{
    list-style:none; margin:clamp(3rem,7vh,5rem) 0 0; padding:0;
    display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.6rem);
  }
  .atl-person-photo{ aspect-ratio:1/1; min-height:0; border-radius:var(--r-md); }
  .atl-person-name{ margin-top:.9rem; font-weight:600; font-size:1rem; color:var(--ink); }
  .atl-person-role{ font-size:.86rem; color:var(--ink-soft); }
  .atl-jump{
    display:inline-block; margin-top:2.4rem; font-family:var(--font-mono); font-size:.82rem;
    letter-spacing:.04em; color:var(--brass); text-decoration:none;
    border-bottom:1px solid currentColor; padding-bottom:2px;
  }

  /* ---- 5. today + tomorrow — dark panel assembles as it enters ---- */
  .atl-close{
    position:relative; isolation:isolate; color:#fff; text-align:center;
    background:transparent;
    padding:clamp(6rem,16vh,11rem) var(--edge);
    margin-top:clamp(2rem,6vh,5rem);
  }
  .atl-close-bg{
    position:absolute; inset:0; z-index:-1;
    background:var(--deep); border-radius:var(--r-lg);
    clip-path: inset(0 var(--ci2,6vw) 0 var(--ci2,6vw) round var(--r-lg));
    will-change:clip-path;
  }
  .atl-close-inner{ position:relative; z-index:1; }
  .atl-close-line{
    font-family:var(--font-display); font-weight:600;
    font-size:clamp(1.7rem,4vw,2.9rem); line-height:1.18; letter-spacing:-.01em;
    max-width:22ch; margin:0 auto 2.4rem;
  }
  .atl-cta{
    display:inline-block; background:var(--brass-lift); color:var(--deep);
    font-family:var(--font-mono); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
    text-decoration:none; padding:1rem 2rem; border-radius:var(--r-xs);
    transition:background .2s ease;
  }
  .atl-cta:hover{ background:#fff; }

  /* ---- responsive ---- */
  @media (max-width:1000px){
    .atl-craft{ grid-template-columns:1fr; }
    .atl-craft-media{ aspect-ratio:4/3; }
    .atl-place{ min-height:0; display:block; padding:clamp(3rem,11vw,5rem) 0; }
    .atl-place-photo{ width:100%; }
    .atl-place-card{ width:92%; margin-top:-16%; }
    .atl-people{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:560px){
    .atl-cue{ display:none; }
    .atl-open-line{ font-size:clamp(1.8rem,7vw,2.4rem); }
    .atl-place-card{ width:100%; margin-top:-18%; border-radius:0 0 var(--r-lg) var(--r-lg); }
    .atl-people{ grid-template-columns:1fr 1fr; }
  }
  @media (prefers-reduced-motion: reduce){
    .atl-open-media{ transform:none !important; }
  }