/* NATURA Holistic Experience — main stylesheet
   Type: Boska (display) + Switzer (text), self-hosted.
   Motion rules after Emil Kowalski: transform/opacity/clip-path only, custom ease-out, no bounce.
   States on <html>: .no-js (everything visible, accordions open) · .js (main.js is running) · .motion (js + no reduced-motion).
   Set by main.js: .in (reveals) · .is-live (near the viewport: animation runs, will-change is on) · .menu-open (mobile sheet). */

@font-face{font-family:"Boska";src:url("../fonts/Boska-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Boska";src:url("../fonts/Boska-300i.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Boska";src:url("../fonts/Boska-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url("../fonts/Switzer-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url("../fonts/Switzer-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url("../fonts/Switzer-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --sand:#F3EADB; --shell:#FBF7F0; --dune:#E8DAC4;
  --terra:#8A4D42; --clay:#B8745C; --ember:#C5683F;
  --terra-ink:#7A4036; /* terracotta for small labels on sand under the shade layer (AA with margin) */
  --ink:#2A201A; --ink-soft:#63524A; --line:rgba(42,32,26,.16);
  --olive:#565F43; --sea:#27595C; --sea-deep:#16393C; --sun:#D8A548; --night:#14100D;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-soft:cubic-bezier(.33,0,.2,1);
  --display:"Boska","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --text:"Switzer",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(20px,4.2vw,72px);
  --max:1480px;
  --header-h:72px;
  --radius:clamp(18px,2.2vw,34px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--text);font-weight:400;font-size:1.0625rem;line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,picture,video,canvas,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
address{font-style:normal}
[id]{scroll-margin-top:calc(var(--header-h) + 14px)}
/* a control reached with Tab (or Shift+Tab, when the header comes back) never lands under the fixed header */
a,button,input,[tabindex="0"]{scroll-margin-top:calc(var(--header-h) + 16px);scroll-margin-bottom:24px}
/* sections with generous top padding land flush with the viewport: the header sits over their own empty space (main.js reads this value too) */
.steps,.menu,.partner,.about,.purpose,.moments,.faq,.begin{scroll-margin-top:0}
::selection{background:var(--terra);color:var(--shell)}
:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}
/* filled controls: a two-tone ring (ink, shell, ink) so one band always contrasts, on sand, olive, terracotta, night or a photo */
.btn:focus-visible,.wa-fab:focus-visible{outline:2px solid var(--shell);outline-offset:2px;box-shadow:0 0 0 6px var(--ink)}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:var(--shell);padding:12px 18px;border-radius:999px;transition:top .2s var(--ease-out)}
.skip:focus{top:12px}
[tabindex="-1"]:focus{outline:none}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* film grain: one cheap fixed layer, no blend modes */
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;background:url("../img/grain.png") 0 0/220px 220px;opacity:.24}

/* ---------- type ---------- */
.display{font-family:var(--display);font-weight:300;line-height:.96;letter-spacing:-.022em}
.display em,.serif-i{font-style:italic;letter-spacing:-.012em}
h1,h2,h3{text-wrap:balance}
.d-xl{font-size:clamp(3.3rem,11.2vw,10.5rem)}
.d-l{font-size:clamp(2.5rem,6.4vw,5.9rem)}
.d-m{font-size:clamp(2rem,3.9vw,3.5rem);line-height:1.02}
.d-s{font-size:clamp(1.55rem,2.3vw,2.1rem);line-height:1.1;letter-spacing:-.012em}
.lead{font-size:clamp(1.14rem,1.45vw,1.36rem);line-height:1.52;font-weight:300}
.eyebrow{font-size:.72rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase}
.muted{color:var(--ink-soft)}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7em;min-height:52px;padding:0 1.7em;border-radius:999px;
  font-size:.95rem;font-weight:500;letter-spacing:.01em;white-space:nowrap;
  transition:transform .16s var(--ease-out),background-color .25s ease,color .25s ease,border-color .25s ease}
.btn:active{transform:scale(.97)}
.btn--solid{background:var(--ink);color:var(--shell)}
.btn--light{background:var(--shell);color:var(--ink)}
.btn--terra{background:var(--terra);color:var(--shell)}
.btn--ghost{border:1px solid currentColor}
.btn svg{width:18px;height:18px;flex:none}
.link{display:inline-flex;align-items:center;gap:.55em;font-weight:500;min-height:44px;padding-block:.45em;position:relative}
.link::after{content:"";position:absolute;left:0;right:0;bottom:.5em;height:1px;background:currentColor;transform-origin:left;transition:transform .5s var(--ease-out)}
.arr{flex:none;width:14px;height:14px;transition:transform .35s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .btn--solid:hover{background:var(--terra)}
  .btn--light:hover{background:var(--sand)}
  .btn--terra:hover{background:var(--ink)}
  .btn--ghost:hover{background:currentColor}
  .btn--ghost:hover>*{mix-blend-mode:difference}
  .link:hover::after{transform:scaleX(.0);transform-origin:right}
  .link:hover .arr{transform:translateX(4px)}
  .link:hover .arr--out{transform:translate(2px,-2px)}
}

/* ---------- reveal primitives (main.js adds .in) ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-out),transform 1.1s var(--ease-out);transition-delay:calc(var(--d,0)*70ms)}
[data-reveal].in{opacity:1;transform:none}
.lines .line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.lines .line>span{display:block;transform:translateY(112%);transition:transform 1.25s var(--ease-out);transition-delay:calc(var(--l,0)*110ms + var(--d,0)*70ms)}
.lines.in .line>span{transform:none}
.clip{overflow:hidden;clip-path:inset(0 0 100% 0 round var(--r,0px));transition:clip-path .9s var(--ease-in-out)}
.clip>img,.clip>picture>img,.clip>video{transform:scale(1.08);transition:transform 1.2s var(--ease-out)}
.clip.in{clip-path:inset(0 0 0 0 round var(--r,0px))}
.clip.in>img,.clip.in>picture>img,.clip.in>video{transform:scale(1)}
.no-js [data-reveal],.no-js .lines .line>span{opacity:1;transform:none}
.no-js .clip{clip-path:none}.no-js .clip img{transform:none}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:80;height:var(--header-h);display:flex;align-items:center;color:var(--ink);
  transition:transform .5s var(--ease-out),color .35s ease,background-color .35s ease,backdrop-filter .35s ease}
.no-js .site-header{position:absolute}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:none}
.site-header.is-light{color:var(--ink)}
.site-header.is-dark{color:var(--shell)}
/* frosted, not a slab: the colour of the section underneath shows through the blur */
.site-header.is-solid{background:color-mix(in srgb,var(--sand) 66%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.site-header.is-solid.is-dark{background:color-mix(in srgb,var(--night) 26%,transparent)}
.site-header.is-hidden{transform:translateY(-100%)}
.brand{display:flex;align-items:center;gap:12px;min-height:44px}
.brand__mark{width:21px;height:38px;background:currentColor;-webkit-mask:url("../img/logo-mark.svg") center/contain no-repeat;mask:url("../img/logo-mark.svg") center/contain no-repeat}
.brand__word{font-weight:400;font-size:.98rem;letter-spacing:.42em;margin-right:-.42em}
.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px)}
.nav a{font-size:.9rem;position:relative;padding-block:12px;opacity:.92}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.nav a:hover::after{transform:scaleX(1);transform-origin:left}}
.header__right{display:flex;align-items:center;gap:14px}
.lang{display:inline-flex;align-items:center;font-size:.78rem;font-weight:500;letter-spacing:.14em}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;opacity:.85}
.lang a[aria-current="true"]{opacity:1;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.lang>span{opacity:.4;margin-inline:-6px}
.site-header .btn{min-height:42px;padding:0 1.25em;font-size:.86rem;border:1px solid currentColor}
.site-header .btn svg{width:15px;height:15px}
.site-header .btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .site-header .btn:hover{background:var(--ink);color:var(--shell);border-color:var(--ink)}
  .site-header.is-dark .btn:hover{background:var(--shell);color:var(--ink);border-color:var(--shell)}
}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;margin-right:-10px}
.burger i{display:block;width:22px;height:1.5px;background:currentColor;position:relative;transition:background-color .2s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:22px;height:1.5px;background:currentColor;transition:transform .45s var(--ease-out)}
.burger i::before{transform:translateY(-6px)}.burger i::after{transform:translateY(6px)}
.menu-open .burger i{background:transparent}
.menu-open .burger i::before{transform:rotate(45deg)}.menu-open .burger i::after{transform:rotate(-45deg)}

/* mobile sheet (main.js toggles .menu-open on <html>; without JS it opens through :target) */
.sheet{position:fixed;inset:0;z-index:75;background:var(--terra);color:var(--shell);display:flex;flex-direction:column;justify-content:space-between;gap:28px;
  overflow-y:auto;overscroll-behavior:contain;
  padding:calc(var(--header-h) + 24px) var(--gutter) max(28px,env(safe-area-inset-bottom));
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .8s var(--ease-in-out),visibility 0s .8s}
.menu-open .sheet,.no-js .sheet:target{clip-path:inset(0);visibility:visible;transition:clip-path .8s var(--ease-in-out),visibility 0s}
.sheet nav a{display:block;font-family:var(--display);font-weight:300;font-size:clamp(2.3rem,10.5vw,3.6rem);line-height:1.16;letter-spacing:-.02em;
  opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease-out),transform .8s var(--ease-out)}
.menu-open .sheet nav a,.no-js .sheet:target nav a{opacity:1;transform:none;transition-delay:calc(.22s + var(--i)*55ms)}
.sheet__foot{display:flex;flex-direction:column;align-items:flex-start;gap:14px;font-size:.95rem}
.sheet__foot p{opacity:.8}
.sheet__close{display:none}
.no-js .sheet__close{display:inline-flex}
html.menu-open,html.menu-open body{overflow:hidden}
.menu-open .site-header{color:var(--shell)!important;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transform:none!important}
html.no-js:has(.sheet:target) .site-header{color:var(--shell)}

/* ---------- hero ----------
   Phones, tablets (<1000px): one screen, full-bleed portrait, H1 in the sky, text and CTAs at the foot. No pinning.
   Desktop (>=1000px): split layout on sand. .hero__media is a full-stage layer clipped to an arch-shaped window
   (the logo's shape). One custom property drives it: --p on .hero (0 = arch window, 1 = full bleed).
   main.js scrubs --p with ScrollTrigger while .hero__stage is sticky (only under .motion). */
.hero{position:relative;background:var(--sand);color:var(--ink);--p:0}
.hero__stage{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--sand)}
.hero .shade{display:none}
.hero__media{position:absolute;inset:0;z-index:2}
.hero__media picture{position:absolute;inset:0}
.hero__media img,.hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hero-pos,50% 0)}
.hero__media video{opacity:0;transition:opacity .9s ease}
.hero__media video.on{opacity:1}
.hero__scrim{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(243,234,219,.4) 0%,rgba(243,234,219,0) 26%),
  linear-gradient(180deg,rgba(20,16,13,0) 34%,rgba(20,16,13,.62) 58%,rgba(20,16,13,.86) 100%)}
.hero__copy{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--header-h) + 4px) var(--gutter) calc(clamp(18px,3vh,30px) + 38px)}
.hero__head{align-self:flex-end;text-align:right}
.hero__head .eyebrow{margin-bottom:12px}
.hero h1{font-size:clamp(2.6rem,11.6vw,6.4rem)}
/* the headline rises at first paint from CSS alone; it never waits for main.js (or for the libraries before it) */
.hero h1.lines .line>span{transform:none;animation:hero-line 1.25s var(--ease-out) calc(var(--l,0)*110ms) both}
@keyframes hero-line{from{transform:translateY(112%)}}
.hero__body{color:var(--shell)}
.hero__sub{max-width:31rem;font-size:1.02rem;line-height:1.46}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:16px}
.btn--hero{background:var(--shell);color:var(--ink)}
.hero__foot{position:absolute;z-index:3;left:var(--gutter);right:var(--gutter);bottom:clamp(18px,3vh,30px);display:flex;justify-content:space-between;align-items:center;gap:20px;
  color:var(--shell);font-size:.6875rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.award-line{display:inline-flex;align-items:center;gap:12px}
.award-line::before{content:"";flex:none;width:28px;height:1px;background:currentColor;opacity:.7;display:none}
.scrollhint{display:none;align-items:center;gap:10px;opacity:.8}
.scrollhint i{width:1px;height:34px;background:currentColor;transform-origin:top}
.motion .scrollhint i{animation:hint 2.6s var(--ease-in-out) infinite}
@keyframes hint{0%{transform:scaleY(0)}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hero__chapters{display:none}

@media (min-width:1000px){
  .hero{--win-t:12svh;--win-r:6vw;--win-b:10svh;--win-l:58vw;--win-rad:18vw;--win-rad-b:20px;--img-x:27.4vw;--img-y:10.8svh;--img-s:.06;--q:calc(1 - var(--p))}
  .hero__stage{min-height:620px}
  .motion .hero{height:210vh}
  .motion .hero__stage{position:sticky;top:0}
  .hero .shade{display:block;opacity:.3;-webkit-mask:linear-gradient(180deg,#000 55%,transparent 100%);mask:linear-gradient(180deg,#000 55%,transparent 100%)}
  .hero__media{clip-path:inset(calc(var(--win-t)*var(--q)) calc(var(--win-r)*var(--q)) calc(var(--win-b)*var(--q)) calc(var(--win-l)*var(--q)) round calc(var(--win-rad)*var(--q)) calc(var(--win-rad)*var(--q)) calc(var(--win-rad-b)*var(--q)) calc(var(--win-rad-b)*var(--q)))}
  .hero__media img,.hero__media video{object-position:50% 50%;transform-origin:0 0;
    transform:translate3d(calc(var(--img-x)*var(--q)),calc(var(--img-y)*var(--q)),0) scale(calc(1 + var(--img-s)*var(--q)))}
  /* open window: the sky stays bright and the header stays ink on it; only the corner under the three words is shaded */
  .hero__scrim{background:none}
  .hero__scrim::after{content:"";position:absolute;inset:0;opacity:var(--scrim,0);
    background:radial-gradient(85% 75% at 0% 100%,rgba(20,16,13,.72) 0%,rgba(20,16,13,.38) 45%,rgba(20,16,13,0) 78%)}
  .hero__copy{inset:0 auto 0 0;width:57vw;justify-content:center;padding:calc(var(--header-h) + 2vh) 0 13vh var(--gutter)}
  .hero__head{align-self:auto;text-align:left}
  .hero__head .eyebrow{color:var(--terra);margin-bottom:clamp(18px,3vh,32px)}
  .hero h1{font-size:clamp(4rem,min(10.4vw,18.5svh),11rem)}
  .hero__body{color:var(--ink)}
  .hero__sub{font-size:clamp(1.14rem,1.45vw,1.36rem);line-height:1.52;font-weight:300;max-width:33rem;margin-top:clamp(22px,3.6vh,40px);color:var(--ink-soft)}
  .hero__cta{gap:12px 28px;margin-top:clamp(24px,3.8vh,40px)}
  .btn--hero{background:var(--ink);color:var(--shell)}
  .hero__foot{right:auto;width:calc(54vw - var(--gutter));bottom:clamp(22px,4.2vh,40px);color:var(--ink);font-size:.72rem;letter-spacing:.2em}
  .award-line::before{display:block}
  .js .scrollhint{display:inline-flex}
  .js .hero__chapters{display:grid;position:absolute;z-index:4;left:var(--gutter);bottom:clamp(40px,9vh,96px);pointer-events:none;color:var(--shell)}
  .hero__chapters span{grid-area:1/1;font-family:var(--display);font-weight:300;font-style:italic;font-size:clamp(4rem,10vw,9.5rem);line-height:1;letter-spacing:-.02em;opacity:0}
  /* main.js scrubs --p: the arch window opens over the text like a curtain (Codrops clip-path wipe), so the copy sits under the media */
  .motion .hero__copy,.motion .hero__foot{z-index:1}
  .hero.is-live .hero__media{will-change:clip-path}
  .hero.is-live .hero__media img,.hero.is-live .hero__media video{will-change:transform}
  .hero.is-live .hero__chapters span{will-change:transform,opacity}
}
@media (min-width:1000px) and (hover:hover) and (pointer:fine){.btn--hero:hover{background:var(--terra)}}
/* short phones (iPhone SE, small Android): the plain line starts higher on her white shirt, so the dark scrim starts higher too */
@media (max-width:999px) and (max-height:620px){
  .hero__scrim{background:linear-gradient(180deg,rgba(243,234,219,.4) 0%,rgba(243,234,219,0) 24%),
    linear-gradient(180deg,rgba(20,16,13,0) 28%,rgba(20,16,13,.7) 48%,rgba(20,16,13,.88) 100%)}
}
/* phones held sideways: her face inside the first screen, a smaller headline */
@media (max-width:999px) and (orientation:landscape) and (max-height:480px){
  .hero{--hero-pos:50% 14%}
  .hero__stage{min-height:0}
  .hero h1{font-size:clamp(2rem,12svh,3.4rem)}
  /* the headline sits in the sky above the middle; the dark scrim starts below it, under the plain line */
  .hero__scrim{background:linear-gradient(180deg,rgba(243,234,219,.5) 0%,rgba(243,234,219,0) 46%),
    linear-gradient(180deg,rgba(20,16,13,0) 50%,rgba(20,16,13,.72) 60%,rgba(20,16,13,.88) 100%)}
  .hero__sub{max-width:40rem;font-size:.95rem;line-height:1.4}
  .hero__cta{margin-top:10px}
  .hero__foot{bottom:10px}
}

/* ---------- manifesto ---------- */
.manifesto{position:relative;padding:clamp(110px,19vh,230px) 0 clamp(90px,14vh,170px);background:var(--sand);overflow:hidden}
.manifesto .wrap{position:relative;z-index:2}
.manifesto__eyebrow{display:flex;align-items:center;gap:14px;color:var(--terra-ink);margin-bottom:clamp(28px,5vh,56px)}
.manifesto__eyebrow::before{content:"";width:34px;height:1px;background:currentColor}
.manifesto__text{font-family:var(--display);font-weight:300;font-size:clamp(2rem,5.3vw,5rem);line-height:1.08;letter-spacing:-.02em;max-width:25ch;text-wrap:balance}
.manifesto__text .w{opacity:.16;transition:opacity .2s linear}
.no-js .manifesto__text .w{opacity:1}
.manifesto__text em{font-style:italic}
.manifesto__by{display:flex;align-items:center;gap:18px;margin-top:clamp(36px,6vh,70px)}
.manifesto__by img{width:64px;height:84px;object-fit:cover;object-position:42% 22%;border-radius:999px 999px 10px 10px}
.manifesto__by strong{display:block;font-weight:500}
.manifesto__by span{font-size:.92rem;color:var(--ink-soft)}
.shade{position:absolute;inset:-12% -8%;z-index:1;pointer-events:none;background:url("../img/shade.webp") center/cover no-repeat;opacity:.34;translate:0 var(--sy,0px)}
/* the layer overscans the section by 12% and drifts on scroll: it is fully faded before the section's own edges, so no seam shows */
.manifesto .shade{-webkit-mask:linear-gradient(180deg,transparent 13%,#000 34%,#000 64%,transparent 85%);mask:linear-gradient(180deg,transparent 13%,#000 34%,#000 64%,transparent 85%)}
.motion .shade{animation:sway 46s ease-in-out infinite alternate;animation-play-state:paused}
.motion .shade.is-live{animation-play-state:running;will-change:transform}
@keyframes sway{0%{transform:translate3d(-1.6%,0,0) rotate(-1.2deg) scale(1.04)}100%{transform:translate3d(1.8%,1.4%,0) rotate(1.4deg) scale(1.09)}}

.glance{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);margin-top:clamp(64px,10vh,120px)}
.glance>div{padding:26px 26px 0 0}
.glance dt{font-size:.7rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--terra-ink);margin-bottom:10px}
.glance dd{font-size:1.02rem;line-height:1.45;max-width:24ch}

/* ---------- landscape band ---------- */
.band{background:var(--sand);padding-bottom:clamp(84px,13vh,160px)}
.band__frame{position:relative;overflow:hidden;aspect-ratio:4/3.3}
.band__media{position:absolute;inset:-7% 0;transform:translate3d(0,var(--py,0%),0)}
.band__media.is-live{will-change:transform}
.band__media picture{height:100%}
.band__media img{width:100%;height:100%;object-fit:cover;object-position:44% 62%}
.band__cap{display:flex;align-items:center;gap:14px;margin-top:18px;padding-inline:var(--gutter);font-size:.9rem;color:var(--ink-soft)}
.band__cap::before{content:"";flex:none;width:34px;height:1px;background:currentColor;opacity:.6}
@media (min-width:1000px){
  .band__fig{padding-inline:var(--gutter)}
  .band__frame{aspect-ratio:16/8.4;border-radius:var(--radius);--r:var(--radius)}
  .band__cap{padding-inline:0}
}

/* ---------- experiences: signature cards ---------- */
.xp{position:relative;background:var(--sand);padding-bottom:clamp(60px,9vh,120px)}
.xp__head{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,5vw,90px);align-items:end;padding-block:clamp(10px,3vh,40px) clamp(44px,8vh,96px)}
.xp__head .eyebrow,.menu__head .eyebrow,.steps__head .eyebrow,.moments__head .eyebrow,.faq__head .eyebrow{color:var(--terra);margin-bottom:clamp(16px,2.4vh,24px)}
.xp__head p{max-width:30rem}
.cards{position:relative}
.card{position:relative;margin-inline:auto;width:min(100% - 2*clamp(12px,2vw,28px),1640px);border-radius:var(--radius);overflow:hidden;
  color:var(--fg,var(--shell));background:var(--bg,var(--night));display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);min-height:min(82vh,800px);
  margin-bottom:clamp(18px,3vh,34px);transform-origin:50% 0}
.card--sea-deep{--bg:var(--sea-deep);--fg:var(--shell)}
.card--olive{--bg:var(--olive);--fg:var(--shell)}
.card--dune{--bg:var(--dune);--fg:var(--ink)}
.card--terra{--bg:var(--terra);--fg:var(--shell)}
.card:nth-child(even){grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.card:nth-child(even) .card__media{order:2}
.card__media{position:relative;min-height:340px;overflow:hidden}
.card__media img,.card__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.card__media video{opacity:0;transition:opacity .8s ease}.card__media video.on{opacity:1}
.card__media--arch{display:grid;place-items:center;padding:clamp(30px,4.4vw,72px)}
.card__media--arch .arch{width:min(100%,420px);aspect-ratio:4/5.1}
/* small source photo: her line, set large, leads; the photo is a quiet 240 px arch beneath it */
.card__media--small{grid-template-rows:1fr auto;place-items:end start;gap:clamp(24px,4vh,48px)}
.card__media--small .arch{width:min(100%,240px);justify-self:end}
.card__pull{font-style:italic;max-width:12ch;align-self:start}
.nw{white-space:nowrap}
.card__inset{position:absolute;z-index:2;left:clamp(12px,1.5vw,22px);bottom:clamp(12px,1.5vw,22px);width:clamp(104px,11.5vw,156px);
  background:var(--bg);color:var(--fg);border-radius:14px;padding:5px 5px 0;box-shadow:0 14px 34px rgba(20,16,13,.26)}
.card__inset .ph{position:relative;aspect-ratio:var(--ar,1);border-radius:10px;overflow:hidden}
.card__inset figcaption{font-size:.7rem;line-height:1.25;padding:8px 5px 9px;opacity:.9}
.card__body{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(24px,3.4vh,38px);padding:clamp(26px,3.8vw,62px)}
.card__top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;opacity:.86}
.card__num{font-family:var(--display);font-style:italic;font-size:1.25rem}
.card h3{margin-bottom:clamp(14px,2.2vh,24px)}
.card__text{max-width:31rem;opacity:.95}
.card__text+.card__text{margin-top:.8em}
.chips{display:flex;flex-wrap:wrap;gap:4px 0;margin-top:clamp(18px,2.8vh,28px);opacity:.82}
.chips li{font-size:.8rem;letter-spacing:.04em;line-height:1.5}
.chips li+li::before{content:"\00B7";margin:0 .65em;opacity:.55}
.card__thumbs{margin-top:clamp(18px,2.8vh,28px)}
.card__thumbrow{display:flex;gap:8px}
.card__thumbrow picture{position:relative;flex:none;width:clamp(68px,6.6vw,98px);aspect-ratio:3/4;border-radius:10px;overflow:hidden}
.card__thumbrow img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 30%)}
.card__thumbs figcaption{margin-top:10px;font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;opacity:.72}
.card__foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 28px;padding-top:18px;border-top:1px solid color-mix(in srgb,currentColor 24%,transparent)}
.card__where{font-size:.86rem;opacity:.88;max-width:30ch;line-height:1.4}
.card__where span{display:block}
.card__where span+span{margin-top:4px}
.card__links{display:flex;flex-wrap:wrap;gap:0 24px;font-size:.95rem}
/* sticky stack: main.js adds .is-stack to .cards only when every card fits the viewport (Olivier Larose "Cards Parallax") */
@media (min-width:1000px){
  .motion .cards.is-stack{display:flow-root} /* keeps the last card's margin inside, so all cards are released together */
  .motion .cards.is-stack .card{position:sticky;top:calc(var(--header-h) + 8px + var(--i)*10px);min-height:var(--stack-h,0px);margin-bottom:var(--stack-mb,clamp(18px,3vh,34px))}
  .motion .cards.is-stack.is-live .card{will-change:transform}
}
/* optional looping film in a card (only emitted when the file exists); main.js shows the control once the film plays */
.card__vtoggle{position:absolute;z-index:3;right:clamp(12px,1.5vw,22px);top:clamp(12px,1.5vw,22px);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(20,16,13,.46);color:var(--shell);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .16s var(--ease-out),background-color .2s ease}
.card__vtoggle[hidden]{display:none}
.card__vtoggle:active{transform:scale(.97)}
.card__vicon{width:11px;height:13px;background:currentColor;clip-path:polygon(0 0,34% 0,34% 100%,0 100%,0 0,66% 0,100% 0,100% 100%,66% 100%,66% 0)}
.card__vtoggle.is-paused .card__vicon{clip-path:polygon(8% 0,100% 50%,8% 100%)}
@media (hover:hover) and (pointer:fine){.card__vtoggle:hover{background:rgba(20,16,13,.66)}}

@media (min-width:1000px) and (max-height:860px){
  .card{min-height:0}
  .card__body{padding-block:clamp(24px,4.6vh,40px);gap:20px}
  .card h3{font-size:clamp(2rem,min(3.9vw,6.4vh),3.5rem);margin-bottom:14px}
  .card__text{font-size:1rem;line-height:1.55}
  .chips,.card__thumbs{margin-top:16px}
  .card__thumbrow picture{width:72px}
}

/* ---------- how it works ---------- */
.steps{background:var(--shell);padding:clamp(90px,14vh,180px) 0 0}
.steps__head{margin-bottom:clamp(40px,7vh,84px)}
.steps__list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3.4vw,56px)}
.step{border-top:1px solid var(--ink);padding-top:20px}
.step__num{display:block;font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(3.2rem,5.4vw,5rem);line-height:.95;color:var(--terra)}
.step h3{margin:clamp(14px,2.2vh,24px) 0 10px}
.step p{color:var(--ink-soft);max-width:30ch}
.steps__cta{margin-top:clamp(34px,5.4vh,60px)}

/* ---------- full menu ---------- */
.menu{background:var(--shell);padding:clamp(90px,14vh,180px) 0;position:relative}
.menu__head{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,5vw,90px);align-items:end;margin-bottom:clamp(40px,7vh,84px)}
.menu__head p{max-width:30rem}
.menu__group{display:grid;grid-template-columns:minmax(140px,.26fr) 1fr;gap:0 clamp(20px,4vw,70px);border-top:1px solid var(--ink)}
.menu__group+.menu__group{margin-top:clamp(34px,5vh,60px)}
.menu__label{padding-top:22px;color:var(--terra)}
.menu__label small{display:block;margin-top:10px;font-size:.9rem;letter-spacing:0;text-transform:none;font-weight:400;color:var(--ink-soft);max-width:22ch;line-height:1.4}
.mrow{border-bottom:1px solid var(--line)}
.mrow__h,.qa__h{font:inherit;letter-spacing:inherit}
.mrow__btn{display:grid;grid-template-columns:1fr auto 30px;align-items:center;gap:16px 24px;width:100%;text-align:left;padding:22px 0;min-height:64px}
.mrow__name{font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,2.5vw,2.25rem);line-height:1.08;letter-spacing:-.015em;transition:transform .5s var(--ease-out),color .3s ease}
.mrow__one{display:block;font-family:var(--text);font-size:.95rem;letter-spacing:0;color:var(--ink-soft);margin-top:7px;line-height:1.4;max-width:46ch}
.mrow__tag{font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.mrow__plus{position:relative;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;transition:background-color .3s ease,border-color .3s ease,color .3s ease}
.mrow__plus::before,.mrow__plus::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1px;background:currentColor;transform:translate(-50%,-50%);transition:transform .45s var(--ease-out)}
.mrow__plus::after{transform:translate(-50%,-50%) rotate(90deg)}
[aria-expanded="true"] .mrow__plus{background:var(--ink);border-color:var(--ink);color:var(--shell)}
[aria-expanded="true"] .mrow__plus::after{transform:translate(-50%,-50%) rotate(0)}
@media (hover:hover) and (pointer:fine){.js .mrow__btn:hover .mrow__name{transform:translateX(10px);color:var(--terra)}}
/* accordions: main.js sets aria-expanded on the button and .is-open on .mrow / .qa. Without JS every panel is open. */
.mrow__panel,.qa__panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .6s var(--ease-out),visibility 0s .6s}
.is-open>.mrow__panel,.is-open>.qa__panel,.no-js .mrow__panel,.no-js .qa__panel{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .6s var(--ease-out),visibility 0s}
.mrow__inner{overflow:hidden;min-height:0}
.mrow__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(20px,4vw,64px);padding:4px 0 34px}
.mrow__grid p{max-width:36rem}
.mrow__grid p+p{margin-top:.8em}
.facts{display:grid;gap:12px;align-content:start;font-size:.93rem}
.facts div{display:grid;grid-template-columns:86px 1fr;gap:12px;padding-top:12px;border-top:1px solid var(--line)}
.facts dt{font-size:.68rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--terra);padding-top:.25em}
.mrow__cta{display:flex;flex-wrap:wrap;gap:0 26px;margin-top:14px;font-size:.95rem}
.no-js .mrow__plus{display:none}
.no-js .mrow__btn,.no-js .qa__btn{cursor:default}

/* ---------- partner / award ---------- */
.partner{position:relative;background:var(--olive);color:var(--shell);padding:clamp(90px,15vh,190px) 0;overflow:hidden}
.partner .shade{opacity:.5;mix-blend-mode:multiply}
.partner .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,7vw,130px);align-items:center}
.seal{position:relative;width:min(100%,300px);aspect-ratio:1;margin-inline:auto}
.seal svg{width:100%;height:100%;overflow:visible}
.seal text{font-family:var(--text);font-size:14.5px;font-weight:500;fill:currentColor;text-transform:uppercase}
.seal circle{fill:none;stroke:currentColor;stroke-width:1;opacity:.34;vector-effect:non-scaling-stroke}
.seal__core{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:6px}
.seal__core b{font-family:var(--display);font-weight:300;font-style:italic;font-size:clamp(2.8rem,4.4vw,4rem);line-height:.9}
.seal__core span{font-size:.7rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase}
.seal__mark{width:24px;height:43px;background:currentColor;-webkit-mask:url("../img/logo-mark.svg") center/contain no-repeat;mask:url("../img/logo-mark.svg") center/contain no-repeat;margin-bottom:8px}
.partner h2{margin:18px 0 clamp(20px,3vh,30px);font-size:clamp(2.3rem,4.7vw,4.3rem);line-height:1}
.partner p{max-width:35rem}
.partner p+p{margin-top:.9em}
.partner__actions{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;margin-top:clamp(26px,4vh,40px)}
.partner__note{font-size:.84rem;opacity:.84;margin-top:16px;max-width:34rem}
.partner__meta{display:flex;flex-wrap:wrap;gap:4px 22px;align-items:center;font-size:.84rem;margin-top:clamp(20px,3vh,30px);padding-top:16px;border-top:1px solid rgba(251,247,240,.24);max-width:35rem}
.partner__meta address{opacity:.84}

/* ---------- about ---------- */
.about{position:relative;background:var(--sand);padding:clamp(100px,16vh,210px) 0;overflow:hidden}
.about .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(30px,7vw,130px);align-items:center}
.arch{position:relative;border-radius:999px 999px 16px 16px;overflow:hidden;aspect-ratio:4/5.2;--r:999px 999px 16px 16px;background:var(--dune)}
.arch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 30%)}
.about__fig{position:relative;max-width:520px;width:100%;justify-self:center}
.about .eyebrow{color:var(--terra)}
.about h2{margin:18px 0 clamp(20px,3vh,32px)}
.about__body p+p{margin-top:.95em}
.about__body{max-width:36rem}
.creds{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin-top:clamp(26px,4vh,42px);font-size:.93rem}
.creds li{padding:13px 0;border-top:1px solid var(--line);display:flex;gap:10px;align-items:baseline}
.creds li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--terra);transform:translateY(-2px)}
.quote{margin-top:clamp(28px,4.4vh,48px)}
.quote p{font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(1.5rem,2.5vw,2.2rem);line-height:1.2;color:var(--terra);max-width:24ch;letter-spacing:-.01em}
.quote footer{margin-top:14px;font-size:.7rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- purpose ---------- */
.purpose{background:var(--terra);color:var(--shell);padding:clamp(90px,14vh,180px) 0}
.purpose .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,110px);align-items:start}
.purpose h2{max-width:13ch;margin-top:18px}
.purpose__body p{max-width:36rem}
.purpose__body p+p{margin-top:.95em}
.purpose__list{margin-top:26px;display:grid;gap:0}
.purpose__list li{padding:14px 0;border-top:1px solid rgba(251,247,240,.28);display:flex;justify-content:space-between;align-items:baseline;gap:20px;font-size:.98rem}
.purpose__list li:last-child{border-bottom:1px solid rgba(251,247,240,.28)}
.purpose__list li span:last-child{opacity:.88;font-size:.84rem;text-align:right}
.purpose__actions{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;margin-top:32px}
.purpose__more{margin-top:10px;font-size:.95rem}

/* ---------- moments ---------- */
.moments{background:var(--shell);padding:clamp(90px,14vh,170px) 0 clamp(70px,11vh,140px);overflow:hidden}
.moments__head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:clamp(30px,5vh,56px)}
.moments__hint{font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.moments__hint--touch{display:none}
@media (hover:none) and (pointer:coarse){.moments__hint--mouse{display:none}.moments__hint--touch{display:inline}}
.strip{display:flex;gap:clamp(12px,1.6vw,24px);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);
  scroll-snap-type:x proximity;cursor:grab;-webkit-overflow-scrolling:touch;align-items:flex-end}
.strip::-webkit-scrollbar{display:none}
.strip:focus-visible{outline-offset:-2px}
.strip.dragging{cursor:grabbing;scroll-snap-type:none}
.strip.is-gliding{scroll-snap-type:none}
.strip.dragging *{pointer-events:none}
.shot{flex:none;width:min(var(--w,340px),74vw);user-select:none;scroll-snap-align:start}
.shot .ph{position:relative;aspect-ratio:var(--ar,4/5);border-radius:14px;overflow:hidden;background:var(--dune)}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);-webkit-user-drag:none}
.shot figcaption{font-size:.84rem;line-height:1.4;color:var(--ink-soft);padding-top:12px}
.shot figcaption b{display:block;font-weight:500;color:var(--ink)}
/* desktop: four photographs in one justified row of equal height (each tile's width follows its aspect ratio); no scrolling, no hint */
@media (min-width:1000px){
  .moments__hint{display:none}
  .strip{max-width:var(--max);margin-inline:auto;overflow:visible;cursor:auto;scroll-snap-type:none;align-items:flex-start}
  .shot{flex:var(--arn) 1 0;width:auto;min-width:0}
}
.moments__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 20px;margin-top:clamp(26px,4vh,44px);font-size:.9rem;color:var(--ink-soft)}
.moments__foot .link{color:var(--ink)}

/* ---------- faq ---------- */
.faq{background:var(--sand);padding:clamp(90px,14vh,180px) 0}
.faq .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,6vw,110px);align-items:start}
.faq__head{position:sticky;top:calc(var(--header-h) + 30px)}
.faq__head p{margin-top:20px;max-width:26rem}
.faq__head .link{margin-top:10px}
.qa{border-bottom:1px solid var(--line)}
.qa:first-child{border-top:1px solid var(--ink)}
.qa__btn{display:grid;grid-template-columns:1fr 30px;gap:0 20px;align-items:center;width:100%;text-align:left;padding:22px 0;min-height:64px;font-size:clamp(1.08rem,1.5vw,1.28rem);line-height:1.3}
.qa__panel>div{overflow:hidden;min-height:0}
.qa__panel p{padding:0 50px 26px 0;color:var(--ink-soft);max-width:44rem}

/* ---------- begin ---------- */
.begin{position:relative;background:var(--night);color:var(--shell);padding:clamp(110px,18vh,230px) 0 clamp(90px,14vh,170px);overflow:hidden;isolation:isolate}
/* the dusk photograph reads: rocks and breaking waves at the foot, darkened only behind the text and the picker */
.begin__bg{position:absolute;inset:0;z-index:-2;-webkit-mask:linear-gradient(180deg,transparent 0,#000 14%,#000 100%);mask:linear-gradient(180deg,transparent 0,#000 14%,#000 100%)}
.begin__bg picture{position:absolute;inset:0}
.begin__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--begin-pos,50% 100%)}
.begin__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,16,13,.5) 0%,rgba(20,16,13,.16) 46%,rgba(20,16,13,.3) 100%),linear-gradient(180deg,rgba(20,16,13,.3) 0%,rgba(20,16,13,.04) 45%,rgba(20,16,13,.45) 100%)}
.smoke{display:none;position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.3;pointer-events:none}
@media (min-width:1000px){.motion .smoke{display:block}}
.begin .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,110px);align-items:center}
.begin h2{margin-top:18px}
.begin h2 em{color:var(--dune)}
.begin__lead{margin-top:clamp(22px,3.4vh,34px);max-width:30rem;opacity:.92}
.picker{background:rgba(251,247,240,.07);border:1px solid rgba(251,247,240,.2);border-radius:26px;padding:clamp(22px,3vw,40px);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.picker fieldset{border:0;padding:0;margin:0 0 24px;min-width:0}
.picker legend,.picker__label{padding:0;margin-bottom:12px;font-size:.7rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative;display:inline-flex}
.opt input{position:absolute;inset:0;z-index:1;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}
.opt span{display:inline-flex;align-items:center;min-height:44px;padding:0 1.1em;border-radius:999px;border:1px solid rgba(251,247,240,.34);font-size:.92rem;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .16s var(--ease-out)}
.opt input:checked+span{background:var(--shell);color:var(--ink);border-color:var(--shell)}
.opt input:focus-visible+span{outline:2px solid var(--sun);outline-offset:3px}
.opt input:active+span{transform:scale(.97)}
.picker__out{padding-top:20px;border-top:1px solid rgba(251,247,240,.2)}
.picker__preview{font-family:var(--display);font-style:italic;font-weight:300;font-size:1.4rem;line-height:1.3;padding-bottom:22px;opacity:.95;min-height:5.2em}
.js .picker:not(.has-choice) .picker__preview{opacity:.8}
.picker__actions{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.picker__alt{font-size:.86rem;opacity:.86;margin-top:18px}
.picker__alt a{text-decoration:underline;text-underline-offset:3px;padding:14px 6px;margin-inline:-6px}
.picker__privacy{font-size:.78rem;opacity:.76;margin-top:8px}
/* without JS the chips cannot compose a message: show only the button and the alternatives */
.no-js .picker fieldset,.no-js .picker__label,.no-js .picker__preview,.no-js .picker__privacy{display:none}
.no-js .picker__out{padding-top:0;border-top:0}

/* ---------- footer ---------- */
.site-footer{background:var(--night);color:var(--shell);padding:clamp(60px,9vh,110px) 0 max(26px,env(safe-area-inset-bottom));position:relative;border-top:1px solid rgba(251,247,240,.14);overflow:hidden}
.footer__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:34px clamp(20px,4vw,70px)}
.footer__grid nav{display:contents}
.footer__grid h2{font-size:.7rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;opacity:.6;margin-bottom:8px}
.footer__grid li a,.footer__contact a{opacity:.92;display:inline-flex;align-items:center;min-height:44px;line-height:1.3}
@media (hover:hover) and (pointer:fine){
  .footer__grid li a,.footer__contact a{min-height:40px}
  .footer__grid a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
}
.footer__about p{max-width:26rem;opacity:.86;margin-top:18px}
.footer__contact{margin-top:14px;display:grid;justify-items:start}
.footer__word{font-family:var(--display);font-weight:300;font-size:clamp(3.6rem,19vw,20.5rem);letter-spacing:.04em;line-height:.9;text-align:center;margin:clamp(50px,9vh,110px) -.1em clamp(20px,3vh,36px) 0;
  opacity:.94;white-space:nowrap}
.footer__base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 24px;font-size:.8rem}
.footer__base>span{opacity:.62}

.wa-fab{position:fixed;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:70;display:none;align-items:center;gap:10px;min-height:52px;padding:0 20px;border-radius:999px;background:var(--terra);color:var(--shell);border:1px solid rgba(251,247,240,.3);
  font-size:.92rem;font-weight:500;box-shadow:0 10px 30px rgba(20,16,13,.28);transform:translateY(160%);visibility:hidden;transition:transform .6s var(--ease-out),visibility 0s .6s}
.wa-fab.show{transform:none;visibility:visible;transition:transform .6s var(--ease-out),visibility 0s}
.wa-fab:active{transform:scale(.97)}
.wa-fab svg{width:20px;height:20px}
.wa-fab.on-terra{background:var(--shell);color:var(--ink);border-color:transparent}

/* ---------- experience pages ---------- */
.page--sub{background:var(--shell)}
.xhead{padding:calc(var(--header-h) + clamp(18px,5vh,60px)) 0 clamp(60px,10vh,120px);background:var(--shell);position:relative;overflow:hidden}
.xhead .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);gap:clamp(30px,6vw,110px);align-items:center}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;font-size:.8rem;color:var(--ink-soft)}
.crumbs li{display:inline-flex;align-items:center;gap:10px;min-height:44px}
.crumbs li+li::before{content:"";width:14px;height:1px;background:currentColor;opacity:.6}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;padding-inline:8px;margin-inline:-8px}
.crumbs [aria-current]{color:var(--ink)}
@media (hover:hover) and (pointer:fine){.crumbs a:hover{color:var(--terra)}}
.xhead h1{font-size:clamp(2.45rem,5.1vw,4.9rem);line-height:1;max-width:15ch;margin:clamp(12px,2.4vh,26px) 0 clamp(20px,3.2vh,34px);text-wrap:balance}
.xhead h1 .xhead__sub{display:block;margin-top:.22em;font-size:.55em;font-style:italic;line-height:1.08;letter-spacing:-.012em}
.xhead__def{max-width:36rem;color:var(--ink-soft)}
.xhead__award{display:flex;margin-top:18px;font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.xhead__cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin-top:clamp(24px,4vh,40px)}
.xhead__fig{max-width:460px;width:100%;justify-self:center}
.xhead__fig--small{max-width:280px}
.xbody{background:var(--shell);padding-bottom:clamp(70px,11vh,140px)}
.xsec{display:grid;grid-template-columns:minmax(160px,.36fr) 1fr;gap:10px clamp(20px,4vw,70px);border-top:1px solid var(--line);padding:clamp(26px,4.4vh,48px) 0}
.xsec:first-child{border-top-color:var(--ink)}
.xsec p{max-width:40rem}
.xsec p+p{margin-top:.9em}
.xfaq{background:var(--sand);padding:clamp(80px,12vh,150px) 0}
.xfaq .wrap{display:grid;grid-template-columns:minmax(160px,.36fr) 1fr;gap:20px clamp(20px,4vw,70px);align-items:start}
.xcta{position:relative;background:var(--bg,var(--terra));color:var(--shell);padding:clamp(90px,15vh,190px) 0;overflow:hidden}
.xcta--sea-deep{--bg:var(--sea-deep)}.xcta--sea{--bg:var(--sea)}.xcta--olive{--bg:var(--olive)}.xcta--terra{--bg:var(--terra)}
.xcta .shade{opacity:.42;mix-blend-mode:multiply}
.xcta .wrap{position:relative;z-index:2}
.xcta h2{max-width:16ch}
.xcta p{margin-top:clamp(20px,3vh,30px);max-width:32rem;opacity:.92}
.xcta__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:clamp(26px,4vh,40px)}
.others{background:var(--shell);padding:clamp(80px,12vh,150px) 0}
.others h2{margin-bottom:clamp(26px,4vh,44px)}
.others li{border-top:1px solid var(--line)}
.others li:first-child{border-top-color:var(--ink)}
.others li:last-child{border-bottom:1px solid var(--line)}
.others a{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) 20px;gap:6px 24px;align-items:center;padding:20px 0;min-height:64px}
.others__name{font-family:var(--display);font-weight:300;font-size:clamp(1.45rem,2.3vw,2.1rem);line-height:1.1;letter-spacing:-.015em;transition:transform .5s var(--ease-out),color .3s ease}
.others__teaser{color:var(--ink-soft);font-size:.95rem}
@media (hover:hover) and (pointer:fine){.others a:hover .others__name{transform:translateX(10px);color:var(--terra)}.others a:hover .arr{transform:translateX(4px)}}

/* ---------- 404 ---------- */
.nf{min-height:100vh;min-height:100svh;display:grid;align-items:center;padding:calc(var(--header-h) + 40px) 0 80px;background:var(--sand);position:relative;overflow:hidden}
.nf .wrap{position:relative;z-index:2}
.nf .eyebrow{color:var(--terra);margin-bottom:18px}
.nf p.lead{margin-top:22px;max-width:30rem;color:var(--ink-soft)}
.nf__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:30px}
.nf__alt{margin-top:clamp(40px,7vh,70px);padding-top:18px;border-top:1px solid var(--line);max-width:30rem;color:var(--ink-soft);font-size:.95rem}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .nav{display:none}
  .js .burger--btn,.no-js .burger--link{display:flex}
  .glance{grid-template-columns:1fr 1fr}.glance>div{padding-bottom:22px}
}
@media (max-width:999px){
  .xp__head,.menu__head{grid-template-columns:1fr;align-items:start}
  .card,.card:nth-child(even){grid-template-columns:1fr;min-height:0}
  .card:nth-child(even) .card__media{order:0}
  .card__media{aspect-ratio:4/3.4;min-height:0}
  .card__media--arch{aspect-ratio:auto;padding:30px 30px 4px}
  .card__media--arch .arch{width:min(100%,220px)}
  .card__media--small{padding:30px 30px 6px;gap:20px}
  .card__media--small .arch{width:min(46%,160px)}
  .steps__list{grid-template-columns:1fr;gap:0}
  .step{display:grid;grid-template-columns:clamp(54px,14vw,84px) 1fr;column-gap:8px;padding:20px 0 26px}
  .step__num{grid-row:1/3}
  .step h3{margin:6px 0 8px}
  .step p{max-width:34rem}
  .menu__group{grid-template-columns:1fr}
  .menu__label{padding:20px 0 6px}
  .menu__label small{max-width:none}
  .mrow__grid{grid-template-columns:1fr}
  /* minmax(0,1fr): a long nowrap button must never widen the single column past the screen */
  .partner .wrap,.about .wrap,.purpose .wrap,.faq .wrap,.begin .wrap,.xhead .wrap,.xfaq .wrap{grid-template-columns:minmax(0,1fr)}
  .seal{width:min(64vw,260px)}
  .about__fig{max-width:420px}
  .faq__head{position:static}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__about{grid-column:1/-1}
  .footer__grid nav>div:last-child{grid-column:1/-1}
  .xhead__fig{max-width:400px;justify-self:start}
  .xhead__fig--small{max-width:240px}
  .begin__bg::after{background:linear-gradient(180deg,rgba(20,16,13,.5) 0%,rgba(20,16,13,.34) 40%,rgba(20,16,13,.72) 100%)}
  .xsec{grid-template-columns:1fr}
  .others a{grid-template-columns:1fr 20px}
  .others__teaser{grid-column:1;grid-row:2}
  .others .arr{grid-column:2;grid-row:1/3}
}
@media (max-width:640px){
  :root{--header-h:64px}
  body{font-size:1rem}
  .site-header .btn{display:none}
  .hero__cta .btn{flex:1 1 auto}
  .mrow__btn{grid-template-columns:1fr 30px}
  .mrow__btn .mrow__tag{grid-column:1;grid-row:2;margin-top:-8px}
  .mrow__btn .mrow__plus{grid-row:1/3;grid-column:2}
  .creds{grid-template-columns:1fr}
  .glance{grid-template-columns:1fr}
  .glance dd{max-width:none}
  .moments__head{flex-direction:column;align-items:flex-start}
  .strip{align-items:flex-start}
  .shot{width:min(86vw,calc(min(76vw,310px)*var(--arn,1)))}
  .qa__panel p{padding-right:0}
  .wa-fab{display:inline-flex}
  .no-js .wa-fab{display:none}
  .footer__base{flex-direction:column;align-items:flex-start}
  .footer__base .lang{margin-left:-12px}
  .card__foot{flex-direction:column;align-items:flex-start}
  .purpose__list li{flex-direction:column;gap:2px}
  .purpose__list li span:last-child{text-align:left}
  .partner__actions .btn,.purpose__actions .btn,.picker__actions .btn,.xhead__cta .btn,.xcta__actions .btn{flex:1 1 auto}
  .picker__actions .btn{white-space:normal;text-align:center;line-height:1.25;padding-block:.75em}
  /* experience pages: the arch photo shows on the first screen (the breadcrumb already links back to the experiences) */
  .xhead__cta .link{display:none}
  .xhead__award{letter-spacing:.12em}
  .xhead .wrap{gap:24px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal],.lines .line>span{transform:none!important;transition:opacity .5s ease!important}
  .hero h1.lines .line>span{animation:none}
  .clip{clip-path:none!important}.clip img,.clip video{transform:none!important}
  .manifesto__text .w{opacity:1!important}
  .scrollhint i{animation:none}
  .mrow__panel,.qa__panel{transition:none!important}
  .sheet{clip-path:none!important;opacity:0;transition:opacity .3s ease,visibility 0s .3s!important}
  .menu-open .sheet,.no-js .sheet:target{opacity:1;transition:opacity .3s ease,visibility 0s!important}
  .sheet nav a{transform:none!important}
  .wa-fab{transform:none!important;opacity:0;transition:opacity .3s ease,visibility 0s .3s!important}
  .wa-fab.show{opacity:1;transition:opacity .3s ease,visibility 0s!important}
  .site-header{transition:color .35s ease,background-color .35s ease}
  .mrow__name,.others__name,.arr{transition:color .3s ease!important;transform:none!important}
}

/* ---------- films (written by tools/video.py; the build emits them only when the files exist) ---------- */
.band__seq{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s ease}
.band__frame.seq-on .band__seq{opacity:1}
.begin__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
.begin__video.on{opacity:1}
@media (prefers-reduced-motion:reduce){.band__seq,.begin__video{display:none}}