/* ============================================================
   MARÉE — Private Yacht Atelier
   Cinematic stylesheet
   ============================================================ */

:root{
  --black:      #05070a;
  --ink:        #0a0d12;
  --graphite:   #14181f;
  --slate:      #2a2f38;
  --mist:       #8b9099;
  --paper:      #f4f1ea;
  --paper-dim:  #d9d4c8;
  --gold:       #c6a86b;
  --gold-soft:  #d8c191;
  --line:       rgba(198,168,107,.28);
  --line-dark:  rgba(244,241,234,.12);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);

  --pad: clamp(1.5rem, 5vw, 6rem);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  overflow-x:clip;            /* clip (not hidden) → no scroll container, keeps sticky/ScrollTrigger honest */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:var(--gold); color:var(--black); }

/* ---------- scrollbar ---------- */
body::-webkit-scrollbar{ width:0; }

/* ---------- typography atoms ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:400;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-block;
}
.display{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.2rem, 6vw, 5.4rem);
  line-height:1.02;
  letter-spacing:-.01em;
}
[data-theme="dark"]{ color:var(--paper); }

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader{
  position:fixed; inset:0; z-index:1000;
  background:var(--black);
  display:flex; align-items:center; justify-content:center;
}
.preloader__inner{ text-align:center; width:min(360px, 70vw); }
.preloader__mark{
  font-family:var(--serif);
  font-size:clamp(2rem,7vw,3.4rem);
  letter-spacing:.5em;
  text-indent:.5em;
  color:var(--paper);
  opacity:0;
  transform:translateY(14px);
}
.preloader__line{
  height:1px; width:100%;
  background:var(--line-dark);
  margin:1.6rem 0 .9rem;
  overflow:hidden;
}
.preloader__line span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
}
.preloader__count{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.4em;
  color:var(--mist);
}
.preloader__count::after{ content:'%'; margin-left:.15em; }
body.loaded .preloader{ pointer-events:none; }

/* ============================================================
   SCROLL PROGRESS
   ============================================================ */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:900;
  background:transparent; mix-blend-mode:difference;
}
.scroll-progress span{
  display:block; height:100%; width:0%;
  background:var(--gold);
  transform-origin:left;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:800;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(1.1rem,2.4vw,1.8rem) var(--pad);
  color:var(--paper);
  opacity:0;
  transition:color .6s var(--ease), background .6s var(--ease), padding .5s var(--ease);
  mix-blend-mode:difference;
}
.nav.is-solid{ mix-blend-mode:normal; }
.nav__logo{ display:flex; flex-direction:column; line-height:1; }
.nav__logo-mark{
  font-family:var(--serif); font-size:1.86rem; letter-spacing:.34em; text-indent:.34em;
}
.nav__logo-sub{
  font-size:.55rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); opacity:.62; margin-top:.55rem; text-indent:.32em;
}
.nav__links{ display:flex; gap:clamp(1.4rem,2.6vw,2.8rem); }
.nav__links a{
  position:relative; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; font-weight:400;
  padding:.3rem 0;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); transition:width .5s var(--ease);
}
.nav__links a:hover::after{ width:100%; }
.nav__menu{ display:none; flex-direction:column; gap:5px; width:26px; }
.nav__menu span{ height:1px; width:100%; background:currentColor; display:block; }

/* ============================================================
   MEDIA FALLBACKS (gradient + optional photo)
   ============================================================ */
.media-fallback{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  background-repeat:no-repeat;
  will-change:transform;
}
/* Each scene: the photograph reads as the base image; a restrained,
   brand-tinted gradient sits on top only to hold mood + text contrast.
   The solid colour under the photo is the offline fallback. */
[data-media]{ background-color:#0b141d; }

[data-media="hero"]{
  background-image:
    linear-gradient(180deg, rgba(5,7,10,.30) 0%, rgba(5,7,10,.10) 42%, rgba(5,7,10,.55) 100%),
    url("https://images.unsplash.com/photo-1605281317010-fe5ffe798166?auto=format&fit=crop&w=2400&q=80");
}
[data-media="glide"]{
  background:radial-gradient(130% 100% at 50% -10%, #16597f 0%, #0a3450 38%, #041a2c 72%, #020e1a 100%);
}
[data-media="craft1"]{
  background-image:
    linear-gradient(160deg, rgba(13,10,7,.25), rgba(13,10,7,.35)),
    url("https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=1400&q=80");
}
[data-media="craft2"]{
  background-image:
    linear-gradient(160deg, rgba(12,9,6,.25), rgba(12,9,6,.35)),
    url("https://images.unsplash.com/photo-1618221118493-9cfa1a1c00da?auto=format&fit=crop&w=1600&q=80");
}
[data-media="int1"]{
  background-image:linear-gradient(160deg, rgba(11,10,8,.10), rgba(11,10,8,.30)),
    url("https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=2000&q=80");
}
[data-media="int2"]{
  background-image:linear-gradient(160deg, rgba(10,9,8,.10), rgba(10,9,8,.30)),
    url("https://images.unsplash.com/photo-1611892440504-42a792e24d32?auto=format&fit=crop&w=2000&q=80");
}
[data-media="int3"]{
  background-image:linear-gradient(160deg, rgba(8,13,18,.10), rgba(8,13,18,.30)),
    url("https://images.unsplash.com/photo-1540946485063-a40da27545f8?auto=format&fit=crop&w=2000&q=80");
}
[data-media="int4"]{
  background-image:linear-gradient(160deg, rgba(7,23,26,.10), rgba(7,23,26,.30)),
    url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=2000&q=80");
}
[data-media="int5"]{
  background-image:linear-gradient(160deg, rgba(10,8,6,.10), rgba(10,8,6,.30)),
    url("https://images.unsplash.com/photo-1550966871-3ed3cdb5ed0c?auto=format&fit=crop&w=2000&q=80");
}
[data-media="ship1"]{
  background-image:linear-gradient(170deg, rgba(7,13,19,.06), rgba(7,13,19,.20)),
    url("https://images.unsplash.com/photo-1569263979104-865ab7cd8d13?auto=format&fit=crop&w=1800&q=80");
}
[data-media="ship2"]{
  background-image:linear-gradient(170deg, rgba(7,13,19,.06), rgba(7,13,19,.20)),
    url("https://images.unsplash.com/photo-1621277224630-81d9af65e40c?auto=format&fit=crop&w=1800&q=80");
}
[data-media="ship3"]{
  background-image:linear-gradient(170deg, rgba(7,13,19,.06), rgba(7,13,19,.20)),
    url("https://images.unsplash.com/photo-1614350391736-ed8619d63c06?auto=format&fit=crop&w=1800&q=80");
}
/* Interiors — drop your own photos at media/interior-salon.jpg and
   media/interior-suite.jpg to replace the interim yacht interiors. */
[data-media="salon"]{
  background-color:#2a2018;
  background-image:
    url("../media/interior-salon.jpg"),
    url("https://images.pexels.com/photos/6510311/pexels-photo-6510311.jpeg?auto=compress&cs=tinysrgb&w=1700");
}
[data-media="suite"]{
  background-color:#241c14;
  background-image:
    url("../media/interior-suite.jpg"),
    url("https://images.pexels.com/photos/6752164/pexels-photo-6752164.jpeg?auto=compress&cs=tinysrgb&w=1400");
}
[data-media="craft-hero"]{
  background-color:#1c140c;
  /* Drop your own photo at media/craftsmanship.jpg and it takes over automatically;
     the warm helm below shows until then. */
  background-image:
    url("../media/craftsmanship.jpg"),
    url("https://images.pexels.com/photos/36539508/pexels-photo-36539508.jpeg?auto=compress&cs=tinysrgb&w=1900");
}

/* ---------- grain ---------- */
.grain{
  position:absolute; inset:-50%; pointer-events:none; opacity:.05; z-index:3;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; height:100svh; min-height:600px;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--pad);
  overflow:hidden;
  background:var(--black);
}
.hero__media{ position:absolute; inset:-8% 0; z-index:0; }
.hero__video,.hero__fallback{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(1.06) contrast(1.02) saturate(1.06);   /* gentle lift; footage is already bright */
}
.hero__video{ z-index:1; opacity:0; transition:opacity 1.4s var(--ease); }
.hero__video.is-ready{ opacity:1; }
.hero__scrim{
  position:absolute; inset:0; z-index:2;
  background:
    /* soft top strip — lifts the wordmark & nav off the bright sky */
    linear-gradient(180deg, rgba(5,7,10,.42) 0%, rgba(5,7,10,.08) 15%, transparent 27%),
    /* strong, full-width lower wash — seats the copy on every layout width */
    linear-gradient(0deg, rgba(5,7,10,.82) 0%, rgba(5,7,10,.55) 20%, rgba(5,7,10,.2) 42%, transparent 62%),
    /* extra depth toward the lower-right where the block sits on desktop */
    radial-gradient(90% 95% at 90% 106%, rgba(5,7,10,.45), transparent 68%);
}

/* Editorial content block — anchored in the lower-right quadrant */
.hero__content{
  position:absolute; z-index:5;
  right:var(--pad);
  bottom:clamp(2.5rem, 10vh, 6.5rem);   /* lowered ~60–80px for balance with the yacht */
  width:min(430px, 46vw);
  text-align:left;
}
/* soft blurred shadow bound to the copy — guarantees contrast on any frame,
   feathered + blurred so it never reads as a panel */
.hero__content::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  inset:-2.6rem -3.6rem -3.2rem -3rem;
  background:radial-gradient(120% 100% at 30% 54%,
    rgba(5,7,10,.66) 0%, rgba(5,7,10,.42) 38%, rgba(5,7,10,.16) 68%, transparent 100%);
  filter:blur(7px);
}
.hero__content .eyebrow{
  margin-bottom:1.6rem;
  text-shadow:0 1px 16px rgba(5,7,10,.98), 0 0 4px rgba(5,7,10,.9);
}
.hero__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.75rem, 2.8vw, 2.5rem);
  line-height:1.12; letter-spacing:-.004em;
  color:var(--paper);
  margin:0 0 1.7rem;
  text-shadow:0 2px 26px rgba(5,7,10,.99), 0 1px 6px rgba(5,7,10,.9), 0 0 2px rgba(5,7,10,.8);
}
.hero__title em{ font-style:italic; font-weight:400; color:var(--gold-soft); }
.mask{ display:block; overflow:hidden; padding-bottom:.06em; }
.mask__inner{ display:block; transform:translateY(105%); }
.hero__sub{
  font-size:clamp(.92rem, 1.02vw, 1.02rem);
  line-height:1.9;                       /* generous line spacing for readability */
  letter-spacing:.006em;
  color:var(--paper); font-weight:300;
  margin:0 0 1.9rem;
  text-shadow:0 1px 22px rgba(5,7,10,.99), 0 1px 5px rgba(5,7,10,.9), 0 0 2px rgba(5,7,10,.8);
}
.hero__closing{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.12rem, 1.55vw, 1.42rem);
  line-height:1.42; letter-spacing:.005em;
  color:var(--gold-soft);
  max-width:24ch;
  margin:0 0 2.4rem;
  text-shadow:0 1px 22px rgba(5,7,10,.96), 0 1px 5px rgba(5,7,10,.8), 0 0 2px rgba(5,7,10,.7);
}
.hero__cta{ margin-top:0; }

.hero__foot{
  position:absolute; left:var(--pad); right:var(--pad); bottom:clamp(1.4rem,3vh,2.4rem);
  z-index:5; display:flex; align-items:flex-end; justify-content:space-between;
  color:var(--paper-dim);
}
.hero__scroll{ display:flex; align-items:center; gap:1rem; font-size:.66rem; letter-spacing:.32em; text-transform:uppercase; }
.hero__scroll-line{ width:60px; height:1px; background:linear-gradient(90deg,var(--gold),transparent); position:relative; overflow:hidden; }
.hero__scroll-line::after{
  content:''; position:absolute; top:0; left:0; height:100%; width:30%;
  background:var(--paper); animation:scrollPulse 2.6s var(--ease) infinite;
}
@keyframes scrollPulse{ 0%{transform:translateX(-100%);} 60%,100%{transform:translateX(330%);} }
.hero__coord{ font-size:.66rem; letter-spacing:.24em; }

/* ---------- button ---------- */
.btn{ display:inline-flex; flex-direction:column; gap:.7rem; }
.btn__label{ font-size:.76rem; letter-spacing:.28em; text-transform:uppercase; font-weight:400; display:inline-flex; align-items:center; }
.btn__line{ height:1px; width:100%; background:var(--gold); transform-origin:left; transition:transform .6s var(--ease); }
.btn:hover .btn__line{ transform:scaleX(1.04); }
.btn__arrow{ display:inline-block; margin-left:.75em; color:var(--gold); transition:transform .5s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(4px); }
/* hero CTA: gentle colour transition on hover (scoped so the solid contact button is untouched) */
.hero__cta .btn__label,
.hero__cta .btn__arrow{ transition:color .5s var(--ease), transform .5s var(--ease); text-shadow:0 1px 16px rgba(5,7,10,.98), 0 0 3px rgba(5,7,10,.85); }
.hero__cta .btn__line{ box-shadow:0 1px 10px rgba(5,7,10,.6); }
.hero__cta .btn:hover .btn__label{ color:var(--gold-soft); }
.btn--solid{
  background:var(--gold); color:var(--black);
  padding:1.1rem 2.4rem; border-radius:2px; gap:0;
  transition:background .5s var(--ease), transform .5s var(--ease);
}
.btn--solid .btn__line{ display:none; }
.btn--solid:hover{ background:var(--gold-soft); transform:translateY(-2px); }

/* ============================================================
   CHAPTER (Discover)
   ============================================================ */
.chapter{
  padding:clamp(7rem,16vh,15rem) var(--pad);
  display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,4rem);
  max-width:1500px; margin:0 auto;
}
.chapter__index{ display:flex; align-items:center; gap:1.2rem; color:var(--gold); }
.chapter__num{ font-family:var(--serif); font-size:1.1rem; }
.chapter__label{ font-size:.66rem; letter-spacing:.4em; text-transform:uppercase; color:var(--slate); }
.chapter__lead{ max-width:20ch; }
.chapter__lead .display{ font-style:italic; font-weight:300; }
.chapter__body{ max-width:46ch; justify-self:end; align-self:end; }
.chapter__body p{ font-size:1.02rem; color:#4a4f57; margin-bottom:1.3rem; }
@media(min-width:900px){
  .chapter{ grid-template-columns:auto 1.1fr auto; align-items:start; }
}

/* ============================================================
   SPREAD — editorial image + text (Craftsmanship transition)
   ============================================================ */
.spread{
  display:grid;
  grid-template-columns:minmax(0,58%) minmax(0,42%);
  align-items:center;
  gap:clamp(2.5rem,5vw,6rem);
  /* no left padding → the image bleeds to the edge like a magazine plate */
  padding:clamp(6rem,15vh,12rem) var(--pad) clamp(6rem,15vh,12rem) 0;
}
.spread__media{
  position:relative; overflow:hidden; margin:0;
  height:clamp(420px,78vh,820px);
}
.spread__media-img{
  position:absolute; inset:-2.5% 0;      /* just enough overscan for the tiny parallax */
  background-position:center 47%;
  will-change:transform;
}
/* soft warm sunlight that drifts across the chrome as the section scrolls */
.spread__media-light{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(46% 40% at 56% 34%, rgba(255,241,214,.55), rgba(255,241,214,0) 62%);
  mix-blend-mode:screen;
  will-change:transform, opacity;
}
.spread__text{
  display:flex; flex-direction:column;
  max-width:440px;
}
.spread__text .chapter__index{ margin-bottom:2.4rem; }   /* generous kicker → headline */
.spread__text .chapter__lead{ margin-bottom:1rem; }      /* body pulled up, closer beneath the headline */
.spread__text .chapter__lead{ max-width:none; }
/* Editorial headline — upright elegant serif, like the opening page of a book */
.spread__text .display{
  font-style:normal; font-weight:500;
  font-size:clamp(2rem, 3.1vw, 2.9rem);
  line-height:1.15; letter-spacing:-.008em;
  color:var(--ink);
}
.spread__text .chapter__body{ max-width:30ch; }        /* narrower measure, more negative space */
.spread__text .chapter__body p{ line-height:1.95; }    /* calmer line spacing */
.spread__text .chapter__body p{ margin-bottom:1.7rem; }
.spread__text .spread__closing{ margin-bottom:0; }     /* keep generous spacing above the closing line */
@media(max-width:820px){
  .spread{ grid-template-columns:1fr; gap:clamp(2rem,5vw,3rem);
    padding:clamp(4.5rem,11vh,8rem) var(--pad); }
  .spread__media{ height:clamp(300px,52vh,480px); }
  .spread__text{ max-width:none; }
}

/* ============================================================
   PLATE (parallax scene)
   ============================================================ */
.plate{
  position:relative; height:120vh; min-height:700px; overflow:hidden;
  display:flex; align-items:center; padding:0 var(--pad);
}
.plate__media{ position:absolute; inset:-12% 0; z-index:0; }
.plate__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; opacity:0; transition:opacity 1.6s var(--ease); }
.plate__video.is-ready{ opacity:1; }
/* soft god-rays drifting through the water */
.plate__rays{
  position:absolute; inset:-25% -15%; z-index:2; pointer-events:none; mix-blend-mode:screen;
  background:
    linear-gradient(102deg, transparent 34%, rgba(188,224,255,.05) 40%, transparent 45%,
      rgba(188,224,255,.06) 55%, transparent 61%, rgba(188,224,255,.045) 72%, transparent 78%);
  will-change:transform;
}
.plate__life{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.plate__fish{
  position:absolute; width:52px; height:22px; opacity:.16; will-change:transform;
  background:no-repeat center/contain;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 42'><path d='M4 21 Q34 3 66 17 Q74 13 78 6 Q78 18 74 21 Q78 24 78 36 Q74 29 66 25 Q34 39 4 21 Z' fill='%23041826'/></svg>");
}
.plate__particles{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.plate__scrim{ position:absolute; inset:0; z-index:4; background:linear-gradient(90deg,rgba(4,14,24,.72) 0%,rgba(4,14,24,.18) 46%,transparent 62%),linear-gradient(0deg,rgba(3,11,20,.7),transparent 55%),linear-gradient(180deg,rgba(3,11,20,.5),transparent 30%); }
.plate__caption{ position:relative; z-index:5; max-width:min(620px,90vw); }
.plate__title{ font-family:var(--serif); font-weight:300; font-size:clamp(1.9rem,4.4vw,3.6rem); line-height:1.08; margin-top:1.2rem; }
/* editorial copy */
.plate__copy{ margin-top:1.6rem; }
.plate__lede{ font-family:var(--serif); font-weight:300; font-size:clamp(1.7rem,3.6vw,3rem); line-height:1.12; color:var(--paper); text-shadow:0 1px 30px rgba(3,11,20,.6); }
.plate__lede em{ font-style:italic; color:var(--gold-soft); }
.plate__sub{ max-width:42ch; margin-top:1.6rem; font-size:clamp(.92rem,1.1vw,1.05rem); line-height:1.85; color:var(--paper-dim); text-shadow:0 1px 20px rgba(3,11,20,.6); }
.plate__cta{ margin-top:2.6rem; }
.plate__meta{
  position:absolute; z-index:2; right:var(--pad); bottom:clamp(2.4rem,7vh,5rem);
  display:flex; gap:clamp(1.6rem,4vw,3.4rem);
}
.plate__meta div{ display:flex; flex-direction:column; gap:.3rem; }
.plate__meta span{ font-size:.6rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); }
.plate__meta strong{ font-family:var(--serif); font-weight:400; font-size:clamp(1.4rem,2.4vw,2rem); }

/* ============================================================
   CRAFT
   ============================================================ */
.craft{
  display:grid; grid-template-columns:1fr; gap:clamp(3rem,7vw,6rem);
  padding:clamp(7rem,14vh,12rem) var(--pad);
  max-width:1500px; margin:0 auto; align-items:center;
}
.craft__text{ max-width:46ch; }
.craft__text .display{ margin:1.4rem 0; }
.craft__p{ font-size:1.05rem; color:#4a4f57; }
.craft__stats{ display:flex; flex-wrap:wrap; gap:clamp(1.6rem,4vw,3rem); margin-top:3rem; }
.craft__stats div{ display:flex; flex-direction:column; gap:.4rem; min-width:110px; }
.craft__stats strong{ font-family:var(--serif); font-weight:400; font-size:clamp(1.8rem,3vw,2.6rem); color:var(--ink); }
.craft__stats span{ font-size:.72rem; letter-spacing:.06em; color:var(--mist); max-width:16ch; }
.craft__gallery{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.craft__fig{ position:relative; overflow:hidden; border-radius:2px; }
.craft__fig--tall{ aspect-ratio:3/4.4; margin-top:0; }
.craft__fig--wide{ aspect-ratio:3/4; margin-top:4rem; }
@media(min-width:960px){
  .craft{ grid-template-columns:1fr 1.05fr; }
}

/* ============================================================
   THE FLAGSHIP — plan-as-navigation experience
   ============================================================ */
.flagship{ background:var(--black); position:relative; height:200vh; }
.fs-sticky{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; flex-direction:column;
  padding:clamp(5rem,11vh,7.5rem) var(--pad) clamp(1rem,2.5vh,2rem);
}
.fs-head{ flex:0 0 auto; text-align:center; margin-bottom:clamp(.8rem,2vh,1.6rem); }
.fs-num{ font-family:var(--serif); color:var(--gold); margin-right:.9rem; }
.fs-name{
  font-family:var(--serif); font-weight:300; font-size:clamp(2rem,6vw,4.6rem);
  line-height:1.06; letter-spacing:.04em; color:var(--paper); margin:.5rem 0 .7rem;
}
.fs-name .mask__inner{ background:linear-gradient(180deg,#fff,#b7b2a6); -webkit-background-clip:text; background-clip:text; color:transparent; }
.fs-tag{ font-size:.64rem; letter-spacing:.3em; text-transform:uppercase; color:var(--mist); }

.fs-main{ flex:1 1 auto; display:grid; grid-template-columns:1.55fr 1fr; gap:clamp(1rem,3vw,3rem); align-items:center; min-height:0; }
/* the detail column top-aligns so a tall photo can never bleed up into the header */
.fs-detail{ align-self:start; }
.fs-plan{ position:relative; height:100%; min-height:0; display:flex; align-items:center; }
.fs-svg{ width:100%; height:100%; overflow:visible; display:block; }

.bp-frame{ fill:none; stroke:rgba(198,168,107,.14); stroke-width:1; }
.bp-corner{ fill:none; stroke:var(--gold); stroke-width:1.1; stroke-opacity:.55; stroke-linecap:round; }
.bp-station{ stroke:var(--gold); stroke-width:.6; stroke-opacity:.1; stroke-dasharray:1 7; }
.bp-fill{ fill:var(--gold); opacity:0; }
.bp-draw{ fill:none; stroke:var(--gold-soft); stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; }
.bp-draw.bp-dot{ fill:var(--gold-soft); stroke:none; }

/* decks behave as navigation */
.deck{ cursor:pointer; transition:opacity .55s var(--ease); }
.deck .bp-draw{ transition:stroke .5s var(--ease), stroke-width .5s var(--ease); }
.fs-hit{ fill:transparent; }
.fs-yacht.has-active .deck{ opacity:.28; }
.fs-yacht.has-active .deck.is-active{ opacity:1; }
.deck.is-active .bp-draw{ stroke:#f8ecca; stroke-width:1.9; }
.deck.is-active .bp-fill{ opacity:.34 !important; }
.fs-label{
  fill:var(--mist); font-family:var(--sans); font-size:15px; letter-spacing:.24em;
  text-transform:uppercase; opacity:0; transition:fill .45s var(--ease);
}
.deck.is-active .fs-label{ fill:var(--gold-soft); }
.fs-leader{ stroke:var(--gold); stroke-width:.7; stroke-opacity:.3; stroke-dasharray:2 5; opacity:0; }
.fs-radar{ stroke:var(--gold-soft); stroke-width:1.2; stroke-linecap:round; opacity:0; }
.fs-sweep{ opacity:0; mix-blend-mode:screen; pointer-events:none; }

/* the panel the plan drives */
.fs-detail{ display:flex; flex-direction:column; gap:clamp(.6rem,1.4vh,1rem); min-height:0; }
/* cinematic frame proportioned to the yacht photography; cover fills it edge to
   edge (no letterbox box), centred so the full vessel reads */
.fs-photo{ position:relative; margin:0; overflow:hidden; border-radius:4px; flex:0 0 auto; height:clamp(170px,25vh,230px); }
.fs-photo-img{ position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; transition:opacity .6s var(--ease), transform 1.4s var(--ease); }
.fs-photo-img.is-swapping{ opacity:0; transform:scale(1.05); }
.fs-detail-name{ font-family:var(--serif); font-weight:400; font-size:clamp(1.2rem,2vw,1.7rem); color:var(--paper); }
.fs-detail-desc{ font-size:.82rem; line-height:1.7; color:var(--mist); max-width:44ch; }
.fs-specs{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:.35rem .9rem; margin-top:auto; }
.fs-specs li{
  position:relative; padding:.55rem .8rem .6rem; border:1px solid transparent; border-radius:3px;
  transition:border-color .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.fs-specs li::before{ content:''; position:absolute; left:.8rem; right:.8rem; top:0; height:1px; background:rgba(198,168,107,.22); }
.fs-specs li:hover{ border-color:rgba(198,168,107,.45); background:rgba(198,168,107,.035); box-shadow:0 0 34px -12px rgba(198,168,107,.3); }
.fs-specs strong{ display:block; font-family:var(--serif); font-weight:400; font-size:clamp(1.3rem,2.2vw,1.9rem); line-height:1; color:var(--paper); font-variant-numeric:tabular-nums; }
.fs-specs span{ display:block; margin-top:.35rem; font-size:.54rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); }
.fs-specs em{ display:block; margin-top:.3rem; font-style:normal; font-size:.68rem; line-height:1.5; color:var(--mist); }

@media(max-width:900px){
  .flagship{ height:auto; }
  .fs-sticky{ position:relative; height:auto; padding-bottom:4rem; }
  .fs-main{ grid-template-columns:1fr; gap:2rem; }
  .fs-plan{ height:auto; aspect-ratio:1340/700; }
  .fs-photo{ flex:none; aspect-ratio:16/10; }
  .fs-specs{ margin-top:1.5rem; }
}

/* ============================================================
   SHOWCASE — "Life on Board" editorial feature
   ============================================================ */
.showcase{ background:var(--paper); padding:clamp(6rem,14vh,12rem) var(--pad); max-width:1500px; margin:0 auto; }
.showcase__grid{
  display:grid;
  grid-template-columns:0.9fr 1.85fr 0.8fr;
  grid-template-rows:1fr 1fr;
  gap:clamp(1rem,1.9vw,1.6rem);
  min-height:clamp(480px,66vh,720px);
  align-items:stretch;
}
.showcase__content{ grid-column:1; grid-row:1/3; align-self:center; padding-right:clamp(1rem,2vw,2rem); }
.showcase__content .eyebrow{ display:block; }
.showcase__num{ font-family:var(--serif); color:var(--gold); margin-right:1rem; }
.showcase__title{ font-family:var(--serif); font-weight:400; font-size:clamp(1.8rem,3.1vw,2.8rem); line-height:1.12; letter-spacing:-.008em; color:var(--ink); margin:1.6rem 0 1.8rem; }
.showcase__body p{ font-size:clamp(.92rem,1.02vw,1.02rem); line-height:1.9; color:#4a4f57; margin-bottom:1rem; max-width:34ch; }
.showcase__body p:first-child{ margin-bottom:1.6rem; }
.showcase__aside{ font-family:var(--serif); font-style:italic; font-size:clamp(1.05rem,1.4vw,1.35rem) !important; line-height:1.5 !important; color:var(--ink) !important; max-width:30ch; }
.showcase__cta{ margin-top:2.4rem; }

.showcase__fig{
  position:relative; margin:0; overflow:hidden;
  border-radius:14px;
  box-shadow:0 30px 60px -34px rgba(10,13,18,.4);
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15' cy='15' r='11' fill='none' stroke='%23c6a86b' stroke-width='1.4'/><circle cx='15' cy='15' r='1.6' fill='%23c6a86b'/></svg>") 15 15, pointer;
}
.showcase__fig--sundeck{ grid-column:2; grid-row:1/3; }
.showcase__fig--helm{ grid-column:3; grid-row:1; }
.showcase__fig--suite{ grid-column:3; grid-row:2; }
.showcase__parallax{ position:absolute; inset:-3%; will-change:transform; }
.showcase__img{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform 1.5s var(--ease-out); }
.showcase__fig:hover .showcase__img{ transform:scale(1.03); }
.showcase__fig::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:38%; z-index:1; pointer-events:none;
  background:linear-gradient(0deg, rgba(5,7,10,.4), transparent);
}
.showcase__sweep{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.16) 50%, transparent 58%);
  transform:translateX(-120%); transition:transform 1.15s var(--ease-out);
}
.showcase__fig:hover .showcase__sweep{ transform:translateX(120%); }
.showcase__label{
  position:absolute; left:clamp(.9rem,1.3vw,1.3rem); bottom:clamp(.8rem,1.2vw,1.2rem); z-index:3;
  font-size:.56rem; letter-spacing:.3em; text-transform:uppercase; color:var(--paper);
  text-shadow:0 1px 14px rgba(5,7,10,.7);
}
@media(max-width:900px){
  .showcase__grid{ grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto; min-height:0; }
  .showcase__content{ grid-column:1/3; grid-row:1; align-self:start; padding-right:0; margin-bottom:.5rem; }
  .showcase__fig--sundeck{ grid-column:1/3; grid-row:2; aspect-ratio:16/10; }
  .showcase__fig--helm{ grid-column:1; grid-row:3; aspect-ratio:4/3; }
  .showcase__fig--suite{ grid-column:2; grid-row:3; aspect-ratio:4/3; }
}

/* ============================================================
   THE MARÉE PROCESS — the acquisition journey (cream)
   ============================================================ */
.process{
  background:var(--paper);
  padding:clamp(9rem,20vh,17rem) var(--pad) clamp(10rem,22vh,18rem);
  max-width:1600px; margin:0 auto;
}
.process__head .eyebrow{ letter-spacing:.5em; text-indent:.5em; font-size:.66rem; }
.process__head{ max-width:1000px; margin:0 auto clamp(8rem,17vh,14rem); text-align:center; }
/* deliberately smaller than the site display scale — editorial, not oversized */
.process__title{
  font-size:clamp(1.5rem,3.6vw,3.3rem); line-height:1.14;
  margin:2.2rem 0 clamp(3.6rem,8vh,6rem);
}
.process__title .mask{ display:block; overflow:hidden; }
.process__intro{ max-width:52ch; margin:0 auto; }
.process__intro p{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.1rem,1.6vw,1.45rem); line-height:1.7;
  color:#3d424a;
}

/* the journey */
.process__journey{
  list-style:none; position:relative;
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(1.2rem,2.6vw,3rem);
  max-width:none; margin:0;
}
/* the gold rail runs behind the nodes, drawn left to right */
.process__rail{
  position:absolute; left:0; right:0; top:16.5px; height:2px;  /* centred on the 35px nodes */
  background:rgba(198,168,107,.16);
  order:-1; pointer-events:none;
  /* the last node sits a full column short of the right edge — let the line
     dissolve past it rather than stopping dead. */
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 84%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 84%,transparent 100%);
}
.process__rail-fill{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,rgba(198,168,107,.75),var(--gold) 45%,var(--gold-soft));
  box-shadow:0 0 14px -1px rgba(198,168,107,.7);
}

.stage{
  position:relative; padding:0 clamp(.2rem,1vw,1rem) 2rem;
  transition:transform .56s var(--ease-out);
}
.stage__node{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  width:35px; height:35px; border-radius:50%;
  background:var(--paper);
  border:1px solid rgba(198,168,107,.4);
  margin-bottom:clamp(1.3rem,2.4vh,1.75rem);
  transition:border-color .56s var(--ease), box-shadow .56s var(--ease),
             background .56s var(--ease), transform .56s var(--ease-out);
}
.stage__dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--gold); opacity:.22;
  transition:opacity .56s var(--ease), transform .56s var(--ease-out), box-shadow .56s var(--ease);
}
.stage.is-lit .stage__node{
  border-color:var(--gold);
  box-shadow:0 0 0 7px rgba(198,168,107,.06), 0 0 26px -6px rgba(198,168,107,.55);
}
.stage.is-lit .stage__dot{
  opacity:1; transform:scale(1.45);
  box-shadow:0 0 10px 1px rgba(198,168,107,.6);
}

.stage__num{
  display:block; font-family:var(--serif); font-size:.9rem;
  letter-spacing:.32em; color:var(--gold); margin-bottom:1.4rem;
}
.stage__name{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.1rem,1.5vw,1.42rem); line-height:1.3;
  color:#2f343c; margin-bottom:1.1rem;
  transition:color .56s var(--ease);   /* GSAP owns opacity here — see initProcess */
}
.stage__copy{
  font-size:.83rem; line-height:2; color:#6b7079; max-width:26ch;
  transition:color .56s var(--ease);   /* GSAP owns opacity here — see initProcess */
}

/* a gentle lift, nothing more */
@media(hover:hover) and (pointer:fine){
  .stage:hover{ transform:translateY(-8px); }
  .stage:hover .stage__node{
    background:rgba(198,168,107,.05);
    border-color:var(--gold);
    transform:scale(1.12);
    box-shadow:0 0 0 11px rgba(198,168,107,.05),
               0 0 34px -4px rgba(198,168,107,.75),
               0 14px 44px -18px rgba(198,168,107,.8);
  }
  .stage:hover .stage__dot{
    opacity:1; transform:scale(1.75);
    box-shadow:0 0 14px 2px rgba(198,168,107,.75);
  }
  .stage:hover .stage__name{ color:#0a0d12; }
  .stage:hover .stage__copy{ color:#3f444c; }
}

@media(max-width:1100px){
  .process__journey{ grid-template-columns:repeat(2,1fr); gap:clamp(3rem,7vw,5rem); }
  .process__rail{ display:none; }
  .stage__copy{ max-width:34ch; }
}
@media(max-width:640px){
  .process__journey{ grid-template-columns:1fr; }
}

/* ============================================================
   COLLECTION — a selection of exceptional vessels
   ============================================================ */
/* the process section ends on a long exhale, so the register begins soon after */
.collection{ padding:clamp(2rem,4.5vh,3.5rem) var(--pad) clamp(5rem,10vh,8rem); max-width:1720px; margin:0 auto; }

.collection__head{ max-width:60ch; margin:0 auto clamp(3rem,6vh,5rem); text-align:center; }
.collection__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.9rem,4vw,3.4rem); line-height:1.12; letter-spacing:-.005em;
  color:var(--ink);
}
.collection__sub{
  max-width:52ch; margin:1.6rem auto 0;
  font-size:clamp(.92rem,1.15vw,1.05rem); line-height:1.85; color:#5a5f68;
}

.collection__list{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,3.4vw,3.2rem); }
@media(min-width:760px){ .collection__list{ grid-template-columns:repeat(3,1fr); } }

.listing{ cursor:pointer; transition:transform .7s var(--ease-out); }
.listing__media{
  position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:2px;
  margin-bottom:1.5rem;
  transition:box-shadow .7s var(--ease);
}
.listing__media .media-fallback{ transition:transform 1.6s var(--ease); transform-origin:center; }

.listing__body{ position:relative; }
.listing__name{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem,2.2vw,2.05rem); line-height:1.1;
  color:var(--ink); margin-bottom:1rem;
  position:relative; display:inline-block;
}
/* the gold underline that draws on hover */
.listing__name::after{
  content:''; position:absolute; left:0; bottom:-.35rem; height:1px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--ease);
}
.listing__facts{
  list-style:none; border-top:1px solid rgba(10,13,18,.13); padding-top:1rem;
  transition:transform .7s var(--ease-out);
}
.listing__facts li{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mist); line-height:2.1;
}
.listing__len{ font-family:var(--serif); font-size:1rem !important; letter-spacing:.05em !important;
  text-transform:none !important; color:var(--gold) !important; line-height:1.7 !important; }

/* View Opportunity — hidden until hover, then rises into view */
.listing__view{
  display:inline-flex; align-items:center; gap:.55rem;
  margin-top:1rem;
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink);
  opacity:0; transform:translateY(10px);
  transition:opacity .7s var(--ease), transform .7s var(--ease-out);
}
.listing__view-arrow{ color:var(--gold); display:inline-block; transition:transform .6s var(--ease-out); }

@media(hover:hover) and (pointer:fine){
  .listing:hover{ transform:translateY(-8px); }
  .listing:hover .listing__media{ box-shadow:0 30px 66px -32px rgba(10,13,18,.55); }
  .listing:hover .listing__media .media-fallback{ transform:scale(1.05); }
  .listing:hover .listing__name::after{ transform:scaleX(1); }
  .listing:hover .listing__facts{ transform:translateY(-4px); }
  .listing:hover .listing__view{ opacity:1; transform:translateY(0); }
  .listing:hover .listing__view-arrow{ transform:translateX(6px); }
}

/* the register hands over quietly rather than stopping dead */
.collection__close{
  margin-top:clamp(3.5rem,8vh,6rem);
  padding-top:clamp(2rem,4vh,3rem);
  border-top:1px solid rgba(10,13,18,.1);
  max-width:70ch; margin-left:auto; margin-right:auto; text-align:center;
}
.collection__close p{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.1rem,1.8vw,1.5rem); line-height:1.7; color:#3d424a;
}

/* ============================================================
   WHERE OUR FLEET WAITS — private route map
   ============================================================ */
.world{
  background:var(--ink);
  /* generous above, restrained below so it flows into what follows */
  padding:clamp(5rem,10vh,8rem) var(--pad) clamp(3rem,6vh,4.5rem);
}
.world__head{ text-align:center; margin-bottom:clamp(2rem,4vh,3.2rem); max-width:60ch; margin-left:auto; margin-right:auto; }
.world__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.9rem,4vw,3.4rem); line-height:1.12; color:var(--paper);
}
.world__sub{
  max-width:54ch; margin:1.4rem auto 0;
  font-size:clamp(.9rem,1.15vw,1.02rem); line-height:1.85; color:var(--mist);
}

/* the map fills most of the viewport */
.world__map{ position:relative; width:100%; max-width:1400px; margin:0 auto; }
.world__svg{ width:100%; height:auto; min-height:min(74vh,720px); overflow:visible; }
.world__dots circle{ fill:rgba(244,241,234,.08); }

.world__routes .route{
  fill:none; stroke:var(--gold); stroke-width:1.1; opacity:.42;
  stroke-linecap:round;
}
.world__particles .route-particle{ fill:var(--gold-soft); }

.world__ports .port{ cursor:pointer; }
.world__ports .port-halo{ fill:url(#portGlow); opacity:0; transition:opacity .5s var(--ease); }
.world__ports .port-ring{ fill:none; stroke:var(--gold); stroke-width:1; opacity:.35; transition:opacity .5s var(--ease), r .5s var(--ease); }
.world__ports .port-core{ fill:var(--gold-soft); }
.world__ports .port-label{
  fill:var(--mist); font-family:var(--sans); font-size:11px;
  letter-spacing:.24em; text-transform:uppercase;
  transition:fill .5s var(--ease); pointer-events:none;
}
.world__ports .port:hover .port-halo,
.world__ports .port.is-active .port-halo{ opacity:.9; }
.world__ports .port:hover .port-ring,
.world__ports .port.is-active .port-ring{ opacity:.8; }
.world__ports .port:hover .port-label,
.world__ports .port.is-active .port-label{ fill:var(--gold-soft); }

/* the floating editorial card */
.world__card{
  position:absolute; z-index:6; pointer-events:none;
  transform:translate(-50%,-118%) translateY(8px);
  min-width:190px;
  background:rgba(5,7,10,.72); border:1px solid rgba(198,168,107,.35);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding:1.1rem 1.3rem 1.15rem; border-radius:3px;
  opacity:0; transition:opacity .5s var(--ease), transform .6s var(--ease-out);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.8);
}
.world__card.is-visible{ opacity:1; transform:translate(-50%,-118%) translateY(0); }
.world__card.is-flip{ transform:translate(-92%,-118%) translateY(8px); }
.world__card.is-flip.is-visible{ transform:translate(-92%,-118%) translateY(0); }
.world__card-yacht{ display:block; font-family:var(--serif); font-size:1.35rem; letter-spacing:.06em; color:var(--paper); }
.world__card-len{ display:block; font-size:.74rem; letter-spacing:.12em; color:var(--paper-dim); margin-top:.5rem; }
.world__card-region{ display:block; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mist); margin-top:.55rem; }
.world__card-view{
  display:inline-block; margin-top:.9rem; padding-top:.7rem;
  border-top:1px solid rgba(198,168,107,.25);
  font-size:.58rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold);
}

.world__note{
  text-align:center; margin:clamp(2.4rem,5vh,3.6rem) auto 0; max-width:44ch;
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(1.05rem,1.7vw,1.4rem); color:var(--paper-dim);
}

@media(max-width:640px){
  .world__svg{ min-height:56vh; }
  .world__ports .port-label{ font-size:13px; }
}

/* ============================================================
   CREED — the editorial statement before the enquiry
   ============================================================ */
.creed{
  background:var(--black);
  padding:clamp(6rem,13vh,10rem) var(--pad);
  text-align:center;
}
.creed__inner{ max-width:1100px; margin:0 auto; }
.creed__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.1rem,6vw,5rem); line-height:1.08; letter-spacing:-.01em;
  color:var(--paper);
}
.creed__line{ display:block; }
.creed__line:last-child{ color:var(--gold-soft); }
.creed__note{
  margin:clamp(2.4rem,5vh,3.6rem) auto 0; max-width:44ch;
  font-size:clamp(.9rem,1.15vw,1.02rem); line-height:1.85;
  letter-spacing:.02em; color:var(--mist);
}

/* ============================================================
   CONTACT — the conversation begins here
   ============================================================ */
.contact{ background:var(--black); padding:clamp(4rem,9vh,7rem) var(--pad) 0; }
.contact__inner{ max-width:1000px; margin:0 auto; text-align:center; }
.contact__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.2rem,6vw,5rem); line-height:1.04;
  color:var(--paper); margin:1.2rem 0 1.6rem;
}
.contact__lead{
  max-width:56ch; margin:0 auto clamp(3rem,6vh,4.5rem);
  font-size:clamp(.92rem,1.15vw,1.05rem); line-height:1.9; color:var(--mist);
}
.contact__form{ display:grid; grid-template-columns:1fr 1fr; gap:2.6rem 3rem; text-align:left; max-width:760px; margin:0 auto; }
.field{ position:relative; }
.field--full{ grid-column:1/-1; }
.field input{
  width:100%; background:transparent; border:none; color:var(--paper);
  font-family:var(--serif); font-size:1.3rem; padding:.6rem 0 .8rem; font-weight:300;
}
.field input:focus{ outline:none; }
.field label{
  position:absolute; left:0; top:.6rem; color:var(--mist); font-family:var(--sans);
  font-size:.82rem; letter-spacing:.06em; pointer-events:none;
  transition:transform .4s var(--ease), color .4s var(--ease), font-size .4s var(--ease);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label{
  transform:translateY(-1.5rem); font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold);
}
.field__line{ position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--line-dark); }
.field__line::after{ content:''; position:absolute; inset:0; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.field input:focus ~ .field__line::after{ transform:scaleX(1); }
.contact__submit{ grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.4rem; margin-top:1.4rem; }
.contact__note{ font-size:.74rem; letter-spacing:.06em; color:var(--gold-soft); }

/* the enquiry, once received, reads like a ledger entry rather than a "thanks" */
.contact__received{ display:none; max-width:600px; margin:0 auto; text-align:center; }
.contact__received.is-visible{ display:block; }
.contact__received-eyebrow{ font-size:.6rem; letter-spacing:.4em; text-transform:uppercase; color:var(--gold); margin-bottom:clamp(1.4rem,3vh,2.2rem); }
.contact__received-ref{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.3rem,2.4vw,2rem); line-height:1.5; color:var(--paper-dim);
}
.contact__received-ref span{
  display:inline-block; margin-top:.7rem;
  font-size:clamp(1.9rem,3.4vw,2.9rem); letter-spacing:.14em;
  color:var(--gold-soft); font-variant-numeric:tabular-nums;
}
.contact__received-note{
  margin:clamp(1.8rem,4vh,2.8rem) auto 0; max-width:42ch;
  font-size:.88rem; line-height:1.9; color:var(--mist);
}

/* ============================================================
   FOOTER — minimal, understated
   ============================================================ */
.footer{ max-width:1100px; margin:0 auto; padding:clamp(4.5rem,10vh,7rem) 0 clamp(2.5rem,5vh,3.5rem); text-align:center; }
.footer__brand{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(3rem,10vw,7rem); line-height:1; letter-spacing:.14em; text-indent:.14em;
  color:var(--paper);
}
.footer__tag{
  font-size:.6rem; letter-spacing:.4em; text-transform:uppercase;
  color:var(--gold); margin-top:1.1rem;
}
.footer__ports{
  display:flex; justify-content:center; flex-wrap:wrap; gap:1.1rem 2.2rem;
  margin:clamp(2.6rem,5.5vh,3.6rem) 0 1.6rem;
}
.footer__ports span{ font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--paper-dim); }
.footer__email{
  display:inline-block; font-family:var(--serif); font-size:1.05rem; color:var(--paper-dim);
  position:relative; padding-bottom:.25rem; transition:color .4s var(--ease);
}
.footer__email::after{ content:''; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.footer__email:hover{ color:var(--paper); }
.footer__email:hover::after{ transform:scaleX(1); }
.footer__social{ display:flex; justify-content:center; gap:2.2rem; margin-top:2rem; }
.footer__social a{
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--mist);
  position:relative; padding-bottom:.2rem; transition:color .4s var(--ease);
}
.footer__social a::after{ content:''; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.footer__social a:hover{ color:var(--paper); }
.footer__social a:hover::after{ transform:scaleX(1); }

/* ============================================================
   REVEAL PRIMITIVES
   ============================================================ */
.reveal-up{ opacity:0; transform:translateY(30px); }
.reveal-lines .line{ display:block; overflow:hidden; }
.reveal-lines .line > span{ display:block; transform:translateY(110%); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:820px){
  .nav__links{ display:none; }
  .nav__menu{ display:flex; }
  .plate{ height:100vh; }
  .plate__meta{ position:static; margin-top:2rem; padding:0 var(--pad) 3rem; }
  .plate{ flex-direction:column; justify-content:center; align-items:flex-start; }
  .craft__fig--wide{ margin-top:2rem; }
  .contact__form{ grid-template-columns:1fr; }
  .hero__coord{ display:none; }
  /* content spans the lower area on small screens */
  .hero__content{ right:var(--pad); left:var(--pad); width:auto; bottom:clamp(5rem,13vh,7.5rem); }
  .hero__scrim{
    background:
      linear-gradient(180deg, rgba(5,7,10,.44) 0%, rgba(5,7,10,.1) 15%, transparent 28%),
      linear-gradient(0deg, rgba(5,7,10,.88) 0%, rgba(5,7,10,.66) 26%, rgba(5,7,10,.32) 48%, transparent 70%);
  }
}

/* ============================================================
   MICRO-INTERACTIONS
   ============================================================ */
/* custom cursor (fine pointers only; native hidden except on text fields) */
html.has-cursor, html.has-cursor *:not(input):not(textarea){ cursor:none; }
.cursor-dot, .cursor-ring{ position:fixed; left:0; top:0; z-index:9999; pointer-events:none; opacity:0; will-change:transform; transition:opacity .35s var(--ease); }
.cursor-dot{ width:6px; height:6px; margin:-3px 0 0 -3px; background:#fff; border-radius:50%; mix-blend-mode:difference; }
.cursor-ring__i{ position:absolute; width:36px; height:36px; margin:-18px 0 0 -18px; border:1px solid #fff; border-radius:50%; mix-blend-mode:difference; transition:transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease); }
.cursor-ring.is-active .cursor-ring__i{ transform:scale(1.4); background:rgba(255,255,255,.14); border-color:transparent; }

.hero__coord,.nav__logo{ transition:opacity .5s var(--ease); }

/* collection listing hover is owned by the COLLECTION block above */
.listing__row h3{ transition:color .4s var(--ease); }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .mask__inner{ transform:none !important; }
  .reveal-up{ opacity:1 !important; transform:none !important; }
  .reveal-lines .line > span{ transform:none !important; }
  .flagship__specs li{ opacity:1 !important; transform:none !important; }
}