/* ==========================================================================
   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);
  transition:opacity 1.2s ease, transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.intro.ready .intro-mark{opacity:1;transform: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:340vh}          /* scroll distance drives the cross-fade */
.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 */
.legend-cover{
  position:absolute;left:70.89%;top:40.39%;width:23.00%;height:52.21%;
  background:#7E897B;color:var(--cream);
  display:flex;flex-direction:column;justify-content:center;gap:1.1rem;
  padding:clamp(.8rem,1.4vw,1.6rem);
}
.lc-title{font-family:var(--display);font-size:clamp(.95rem,1.5vw,1.5rem);line-height:1.2;margin:0;letter-spacing:.04em}
.lc-sub{font-size:clamp(.58rem,.72vw,.72rem);letter-spacing:.2em;text-transform:uppercase;line-height:1.7;margin:0;opacity:.8}
@container (max-width: 520px){ .legend-cover p{display:none} }
.pin{
  position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  background:transparent;border:0;padding:0;cursor:pointer;
}
.pin::after{
  content:'';position:absolute;inset:2px;border-radius:50%;
  border:1.5px solid var(--cream);opacity:0;transform:scale(.6);
  transition:opacity .3s ease, transform .3s ease;
}
.pin.lit::after,.pin:hover::after,.pin:focus-visible::after{opacity:1;transform:scale(1)}
.pin.dim{opacity:.25}
.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;max-height:26rem;overflow:auto}
.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:.6}

/* ---------- 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:280vh}
  .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}
}