/* ==========================================================================
   One Bain Boeuf
   Colours and copy come from One Arch's InDesign direction; the water surface
   is generated in the browser (js/water.js) rather than played from a video.
   ========================================================================== */

:root{
  --green:#4D574B;
  --ink:#1E1F1C;          /* a touch deeper than the artboard footer, for contrast */
  --ink-2:#292A26;
  --cream:#ECE9DA;
  --sand:#E7E6CE;
  --teal:#1B6669;
  --bronze:#AF8B5B;

  --display:'Cormorant Garamond', Georgia, serif;   /* stand-in for Albra */
  --body:'Jost', system-ui, -apple-system, sans-serif;

  --gut:clamp(1.4rem, 6vw, 8rem);
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--ink);color:var(--cream);
  font-family:var(--body);font-weight:300;
  font-size:clamp(.95rem,1.02vw,1.05rem);line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}   /* width/height attrs set the ratio, not a fixed height */
a{color:inherit}
::selection{background:var(--bronze);color:var(--ink)}

/* Lenis owns the scroll; these are its required styles */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}

/* ---------- type ---------- */
.display{
  font-family:var(--display);font-weight:300;margin:0;
  line-height:1.05;letter-spacing:.02em;
  font-size:clamp(2rem,4.4vw,3.9rem);
}
.display.caps{text-transform:uppercase;letter-spacing:.1em;font-size:clamp(1.35rem,2.5vw,2.3rem);line-height:1.25}
.display.italic{font-style:italic}
.eyebrow{
  font-size:.7rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  margin:0 0 2rem;   /* full opacity: .85 fell under 4.5:1 on the cream ground */
}
.lede{max-width:46ch;margin:1.8rem 0 0;opacity:.92}

/* ---------- progress + nav ---------- */
.progress{
  position:fixed;inset:0 0 auto;height:2px;z-index:200;
  background:var(--bronze);transform-origin:0 50%;transform:scaleX(0);
}
.nav{
  position:fixed;inset:0 0 auto;z-index:150;
  display:flex;align-items:center;gap:2rem;
  padding:clamp(1.1rem,2.2vw,2rem) var(--gut);
}
/* a scrim keeps the nav legible over bright CGI; difference blending did not */
.nav::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(30,31,28,.62),rgba(30,31,28,0));
  height:190%;
}
.nav .mark{display:block;text-decoration:none;line-height:0;flex:0 0 auto}
/* The real One Bain Boeuf lockup, vector-extracted from the supplied PDF.
   Masked rather than <img> so it inherits the surrounding text colour. */
.logo{
  display:block;width:clamp(150px,14vw,200px);aspect-ratio:445/70;
  background:currentColor;
  -webkit-mask:url('../img/logo.svg') no-repeat center/contain;
          mask:url('../img/logo.svg') no-repeat center/contain;
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nav ul{display:flex;gap:clamp(1rem,2.2vw,2.4rem);list-style:none;margin:0 0 0 auto;padding:0}
.nav a{
  text-decoration:none;font-size:.74rem;font-weight:400;letter-spacing:.18em;
  text-transform:uppercase;opacity:.96;transition:opacity .3s ease;
}
.nav a:hover{opacity:1}
.nav a.btn{
  background:var(--cream);color:var(--ink);border:1px solid var(--cream);
  padding:.72rem 1.5rem;opacity:1;font-weight:500;
  transition:background .3s ease,color .3s ease;
}
.nav a.btn:hover{background:transparent;color:var(--cream)}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;color:inherit;font:inherit;
  font-size:.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;padding:.5rem}

/* ---------- opening sequence ---------- */
/* The footer texture, run through the water shader, with the mark alone on top.
   It holds for ~2.5s and then clears to the hero. Nothing rippling after that. */
.intro{
  position:fixed;inset:0;z-index:300;overflow:hidden;background:var(--green);
  transition:opacity 1.1s cubic-bezier(.4,0,.2,1), visibility 1.1s;
}
.intro canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.intro::after{content:'';position:absolute;inset:0;background:rgba(30,31,28,.26);z-index:1}
.intro-mark{
  position:absolute;inset:0;z-index:2;display:grid;place-content:center;
  text-align:center;color:var(--cream);
  opacity:0;transform:translateY(14px);
  /* Animated by CSS, not gated on JS: the mark must appear on first paint even
     if the scripts are slow, rather than holding on a blank green field. */
  animation:intro-mark-in 1.2s cubic-bezier(.22,.61,.36,1) 120ms forwards;
}
@keyframes intro-mark-in{to{opacity:1;transform:none}}

/* Failsafe: if main.js never runs at all — blocked script, JS error — the opening
   must not trap the visitor. JS adds .js the moment it takes over, which cancels this. */
.intro{animation:intro-failsafe 400ms ease 9s forwards}
.intro.js{animation:none}
@keyframes intro-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
.intro-mark .logo{width:clamp(220px,34vw,470px);filter:drop-shadow(0 2px 50px rgba(0,0,0,.35))}
.intro.out{opacity:0;visibility:hidden;pointer-events:none}
body.intro-lock{overflow:hidden}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden}
.hero .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-copy{
  position:absolute;inset:0;z-index:3;display:grid;place-content:center;text-align:center;
  padding:0 1.5rem;pointer-events:none;
}
.hero-copy h1{font-size:clamp(2.3rem,6.4vw,5.6rem);text-shadow:0 2px 60px rgba(0,0,0,.3)}
.hero-copy .sub{font-size:.7rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;margin-top:2rem;opacity:.95}
.cue{
  position:absolute;left:50%;bottom:2.6rem;transform:translateX(-50%);z-index:3;
  font-size:.64rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;opacity:.92;
  text-align:center;text-decoration:none;
}
.cue::before{content:'';display:block;width:1px;height:52px;background:currentColor;margin:0 auto .9rem;opacity:.6}

/* ---------- sections ---------- */
.section{padding:clamp(5rem,14vh,11rem) var(--gut)}
.section.cream{background:var(--cream);color:var(--green)}
.section.cream .eyebrow{opacity:.6}
.section.tight{padding-block:clamp(3.5rem,9vh,7rem)}
.center{text-align:center}
.center .lede{margin-inline:auto}

/* statement — words rise in sequence */
.statement{max-width:22ch;margin:0 auto;text-align:center}
.statement .w{display:inline-block;opacity:0;transform:translateY(.5em);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1)}
.statement.in .w{opacity:1;transform:none}

/* ---------- pinned CGI sequence ---------- */
.sequence{position:relative;height:425vh}          /* scroll distance drives the cross-fade: ~85vh per frame */
.sequence .pin-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.sequence .frame{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.sequence .frame.on{opacity:1}
.sequence .frame img{width:100%;height:100%;object-fit:cover}
.sequence .frame::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,31,28,.45),rgba(30,31,28,.08) 38%,rgba(30,31,28,.52) 76%,rgba(30,31,28,.82))}
.sequence .caption{
  position:absolute;left:var(--gut);bottom:clamp(3rem,10vh,6rem);z-index:2;max-width:30ch;
}
.sequence .caption .n{
  font-size:.74rem;font-weight:500;letter-spacing:.26em;opacity:.95;
  display:block;margin-bottom:.9rem;
}
.seq-dots{position:absolute;right:var(--gut);bottom:clamp(3rem,10vh,6rem);z-index:2;display:grid;gap:.7rem}
.seq-dots span{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.28;transition:opacity .4s ease}
.seq-dots span.on{opacity:1}

/* ---------- splits ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,7rem);align-items:center}
.split .media{overflow:hidden}
.split .media img{width:100%;transform:scale(1.12);will-change:transform}  /* parallax target */

/* shader plate reused mid-page */
.plate{position:relative;min-height:clamp(420px,68vh,760px);display:grid;place-content:center;text-align:center;overflow:hidden;padding:var(--gut)}
.plate canvas,.plate img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.plate > *:not(canvas):not(img){position:relative;z-index:2}
.plate::after{content:'';position:absolute;inset:0;background:rgba(30,31,28,.22);z-index:1}

/* ---------- interactive locale map ---------- */
.map{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(1.5rem,3vw,3rem);align-items:start}
.map-stage{position:relative}
.map-stage > img{width:100%}
/* our panel sits exactly over the legend baked into the artwork */
/* The pins are ours now: the artwork was re-exported from the client's InDesign
   PDF with its baked-in pins and legend plate removed, so these are the only
   markers on the map and every state is ours to drive. */
.pin{
  position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;
  border-radius:50%;border:0;padding:0;cursor:pointer;
  background:var(--green);color:var(--cream);
  font:inherit;font-size:.72rem;font-weight:500;line-height:30px;text-align:center;
  font-variant-numeric:tabular-nums;
  box-shadow:0 2px 10px rgba(30,31,28,.28);
  transition:transform .28s cubic-bezier(.22,.61,.36,1), opacity .28s ease,
             background .28s ease, box-shadow .28s ease;
}
.pin::after{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  border:1px solid var(--green);opacity:0;transform:scale(.7);
  transition:opacity .3s ease, transform .3s ease;
}
.pin:hover,.pin.lit,.pin:focus-visible{
  transform:scale(1.25);background:var(--ink);z-index:3;
  box-shadow:0 4px 18px rgba(30,31,28,.4);
}
.pin:hover::after,.pin.lit::after,.pin:focus-visible::after{opacity:1;transform:scale(1)}
.pin.dim{opacity:.16;transform:scale(.82);box-shadow:none}
.pin .tip{
  position:absolute;left:50%;bottom:130%;transform:translateX(-50%) translateY(4px);
  background:var(--ink);color:var(--cream);padding:.5rem .8rem;white-space:nowrap;
  font-size:.68rem;letter-spacing:.08em;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;
}
.pin:hover .tip,.pin:focus-visible .tip{opacity:1;transform:translateX(-50%) translateY(0)}

.map-key{border-left:1px solid rgba(77,87,75,.22);padding-left:clamp(1rem,2vw,2rem)}
.map-key h3{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;margin:0 0 1.1rem;font-weight:500}
.filters{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.6rem}
.filters button{
  font:inherit;font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  padding:.55rem .9rem;border:1px solid rgba(77,87,75,.42);background:transparent;color:inherit;cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.filters button[aria-pressed=true]{background:var(--green);color:var(--cream);border-color:var(--green)}
.map-key ol{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}   /* all 16 fit now the legend is gone */
.map-key li{display:flex;gap:.7rem;font-size:.82rem;line-height:1.6;padding:.28rem 0;cursor:pointer;transition:opacity .25s ease}
.map-key li .n{min-width:1.6rem;font-variant-numeric:tabular-nums}
.map-key li.hide{display:none}
.map-key li:hover{opacity:1;color:var(--ink)}
.map-key li .n{transition:color .25s ease}

/* ---------- register ---------- */
.register{position:relative;overflow:hidden;padding:clamp(5rem,14vh,10rem) var(--gut)}
.register canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.register::after{content:'';position:absolute;inset:0;background:rgba(30,31,28,.34);z-index:1}
.register .inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:start}
form{display:grid;gap:1.6rem;max-width:32rem;margin-top:2.2rem}
.field{position:relative}
.field input{
  width:100%;background:transparent;border:0;border-bottom:1px solid rgba(236,233,218,.42);
  color:var(--cream);font:inherit;padding:.65rem 0;border-radius:0;
}
.field input:focus{outline:none;border-bottom-color:var(--cream)}
.field label{position:absolute;left:0;top:.65rem;pointer-events:none;opacity:.6;
  transition:transform .28s ease,font-size .28s ease,letter-spacing .28s ease}
.field input:focus + label,.field input:not(:placeholder-shown) + label{
  transform:translateY(-1.55rem);font-size:.64rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
}
form button[type=submit]{
  background:var(--cream);color:var(--ink);border:1px solid var(--cream);font:inherit;
  font-size:.72rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;padding:1.1rem;cursor:pointer;
  transition:background .3s ease,color .3s ease;
}
form button[type=submit]:hover{background:transparent;color:var(--cream)}
.note{font-size:.8rem;opacity:0;transition:opacity .3s ease;min-height:1.4em}
.note.show{opacity:.85}

/* ---------- footer ---------- */
footer{background:var(--ink-2);padding:clamp(3rem,8vh,5rem) var(--gut) 2rem}
.f-top{display:flex;flex-wrap:wrap;gap:clamp(1.4rem,4vw,3rem);align-items:center;padding-bottom:2.4rem}
.f-logo{width:clamp(210px,22vw,300px)}
.f-links{display:flex;gap:2rem;margin-left:auto;flex-wrap:wrap}
.f-links a{text-decoration:none;font-size:.68rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;opacity:.9}
.f-links a:hover{opacity:1}
.f-base{border-top:1px solid rgba(236,233,218,.18);padding-top:1.6rem;text-align:center;font-size:.78rem;opacity:.7}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(30px);transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav ul{
    position:fixed;inset:0;background:var(--ink);flex-direction:column;
    align-items:center;justify-content:center;gap:1.8rem;
    transform:translateX(100%);transition:transform .45s cubic-bezier(.22,.61,.36,1);
  }
  .nav ul.open{transform:none}
  .nav a{font-size:.9rem}
  .nav-toggle{display:block;z-index:160}
  .split,.register .inner,.map{grid-template-columns:1fr}
  .map-key{border-left:0;padding-left:0;border-top:1px solid rgba(77,87,75,.22);padding-top:1.6rem}
  .sequence{height:350vh}   /* five frames, same ~70vh dwell as before */
  .sequence .caption{right:var(--gut)}
  .seq-dots{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rv,.statement .w{opacity:1;transform:none;transition:none}
  .split .media img{transform:none}
}


/* ---------- skip link ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:400;
  background:var(--cream);color:var(--ink);padding:.9rem 1.4rem;
  font-size:.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}

/* ---------- questions ---------- */
.faq-section{padding-top:clamp(3rem,7vh,5rem)}
.faq-list{max-width:60rem;margin:0 auto;border-top:1px solid rgba(77,87,75,.22)}
.faq-item{border-bottom:1px solid rgba(77,87,75,.22)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:1.5rem 2.5rem 1.5rem 0;position:relative;
  font-family:var(--display);font-size:clamp(1.05rem,1.7vw,1.4rem);letter-spacing:.02em;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'';position:absolute;right:.4rem;top:50%;width:11px;height:11px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-70%) rotate(45deg);transition:transform .3s ease;
}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq-item p{margin:0 0 1.6rem;max-width:62ch;opacity:.9;line-height:1.9}

/* ---------- legal pages ---------- */
body.legal{background:var(--cream);color:var(--green)}
.nav--solid{background:var(--ink);color:var(--cream)}
.nav--solid::before{display:none}
.legal-main{
  max-width:52rem;margin:0 auto;
  padding:calc(var(--gut) + 5rem) var(--gut) clamp(4rem,10vh,7rem);
}
.legal-head{border-bottom:1px solid rgba(77,87,75,.22);padding-bottom:2.4rem;margin-bottom:1rem}
.legal-head h1{margin:0 0 1rem}
.legal-updated{
  font-size:.68rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  opacity:.65;margin:0 0 1.4rem;
}
.legal-block{padding:2.4rem 0;border-bottom:1px solid rgba(77,87,75,.14)}
.legal-block:last-child{border-bottom:0}
.legal-block h2{
  font-family:var(--display);font-weight:400;font-size:clamp(1.15rem,1.9vw,1.5rem);
  letter-spacing:.06em;text-transform:uppercase;margin:0 0 1rem;
}
.legal-block p{margin:0 0 1.1rem;line-height:1.95;max-width:66ch}
.legal-block p:last-child{margin-bottom:0}
.legal-block a{color:inherit;text-underline-offset:3px}
body.legal footer{background:var(--ink-2);color:var(--cream)}

/* ---------- form states ---------- */
.brochure-note{margin-top:0;opacity:.85}
form button[type=submit]:disabled{opacity:.6;cursor:default}
.cf-turnstile{margin:.4rem 0}


/* On touch, the map pins cluster far closer than the 24px minimum spacing, and
   tooltips need hover anyway. The filterable list beside the map is the same
   information in an accessible, comfortably tappable form, so the pins become
   a pointer-only decoration there. */
@media (pointer: coarse){
  .map-stage .pin{pointer-events:none}
  .map-stage .pin .tip{display:none}
}