/* ══════════════════════════════════════════════════════════════
   STUDIO 7.83 — v2
   One scroll story. Imagery carries it; type frames it; motion is
   tied to the scroll so the places move under the reader's hand.
   ══════════════════════════════════════════════════════════════ */

:root{
  --bg:      #0C0B0A;
  --bg-2:    #141312;
  --ivory:   #EDE8DF;
  --warm:    #E6D8BF;
  --muted:   rgba(237,232,223,.58);
  --faint:   rgba(237,232,223,.34);
  --rule:    rgba(237,232,223,.14);

  --sans:  'Inter Tight', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --serif: 'Accent', 'Cormorant Garamond', Georgia, serif;
  --num:   'Frequency', 'Cormorant Garamond', Georgia, serif;

  --gut:  clamp(20px, 4vw, 64px);
  --ease: cubic-bezier(.19, 1, .22, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  color-scheme: dark;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ivory);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
picture{ display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; text-align:inherit; }
p, h1, h2, h3, ul, ol, figure, dl, dd{ margin:0; }
ul, ol{ padding:0; list-style:none; }
em{ font-family:var(--serif); font-style:italic; font-weight:300; letter-spacing:-.005em; }
::selection{ background:rgba(230,216,191,.25); }
:where(a, button):focus-visible{ outline:1px solid var(--warm); outline-offset:5px; }
[hidden]{ display:none !important; }

/* lenis */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ── shared type ── */
.label{
  font-size:11px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}
.eyebrow{
  font-size:11.5px; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(237,232,223,.82);
}
.h2{
  font-weight:300;
  font-size:clamp(40px, 6.2vw, 108px);
  line-height:.98; letter-spacing:-.042em;
}
.h2 em{ font-size:1.04em; letter-spacing:-.01em; }

.link{
  display:inline-flex; align-items:baseline; gap:.55em;
  font-size:15px; font-weight:400;
  padding-bottom:.35em;
  background:linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition:background-size .6s var(--ease), color .3s;
}
.link i{ font-style:normal; transition:transform .5s var(--ease); }
.link:hover{ background-size:0 1px; background-position:100% 100%; }
.link:hover i{ transform:translateX(5px); }

/* ══════════ nav ══════════ */
.nav{
  position:fixed; z-index:50; top:0; left:0; right:0;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:clamp(16px, 2.4vh, 26px) var(--gut);
  transition:transform .7s var(--ease), background-color .5s, backdrop-filter .5s;
}
.nav.is-solid{
  background:rgba(12,11,10,.62);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
}
.nav.is-hidden{ transform:translateY(-100%); }
.nav:not(.is-solid) .nav__mark,
.nav:not(.is-solid) .nav__links a{ text-shadow:0 1px 14px rgba(0,0,0,.38); }
.nav__mark{
  justify-self:start;
  font-size:15px; font-weight:500; letter-spacing:-.005em;
}
.nav__mark span{
  font-family:var(--num); font-weight:300; font-size:1.32em;
  letter-spacing:.01em; margin-left:.08em; color:var(--warm);
}
.nav__links{ display:flex; gap:clamp(20px, 2.6vw, 40px); }
.nav__links a{
  position:relative; font-size:14px; font-weight:400; color:rgba(237,232,223,.82);
  transition:color .3s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .55s var(--ease);
}
.nav__links a:hover{ color:var(--ivory); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__cta{
  justify-self:end;
  font-size:13.5px; font-weight:400;
  padding:.72em 1.35em;
  border-radius:999px;
  border:1px solid rgba(237,232,223,.42);
  background:rgba(12,11,10,.18);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:background-color .35s, color .35s, border-color .35s;
}
.nav__cta:hover{ background:var(--ivory); color:#0C0B0A; border-color:var(--ivory); }
@media (max-width:860px){
  .nav{ grid-template-columns:1fr auto; }
  .nav__links{ display:none; }
}

/* ══════════ 01 · hero ══════════ */
.hero{
  position:relative; height:100svh; min-height:620px;
  overflow:hidden; background:#000;
}
.hero__media{
  position:absolute; inset:0;
  transform:translate3d(0, var(--hy, 0px), 0) scale(var(--hs, 1.04));
  will-change:transform;
}
.hero__media picture{ width:100%; height:100%; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:62% 50%;
  animation:heroIn 2.6s var(--ease) both;
}
.hero__film{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:62% 50%;
  opacity:0; transition:opacity 1.8s var(--ease);
}
.hero__film.is-rolling{ opacity:1; }
@keyframes heroIn{ from{ transform:scale(1.1); filter:brightness(.6); } to{ transform:none; filter:none; } }
.hero__shade{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 70% at 0% 100%, rgba(12,11,10,.62), transparent 70%),
    linear-gradient(180deg, rgba(12,11,10,.5) 0%, rgba(12,11,10,.12) 14%, transparent 24%, transparent 52%, rgba(12,11,10,.6) 100%);
  opacity:var(--hd, 1);
}
.hero__body{
  position:absolute; left:var(--gut); right:var(--gut);
  bottom:clamp(110px, 17vh, 190px);
  transform:translate3d(0, var(--hty, 0px), 0);
  opacity:var(--hto, 1);
}
.hero__body .eyebrow{ margin:0 0 clamp(14px, 2.2vh, 26px) .2em; }
.hero__title{
  font-weight:300;
  font-size:clamp(54px, 8.8vw, 164px);
  line-height:.9; letter-spacing:-.048em;
}
.hero__title em{ font-size:1.06em; letter-spacing:-.018em; color:var(--warm); }

.hero__foot{
  position:absolute; left:var(--gut); right:var(--gut); bottom:clamp(24px, 4vh, 44px);
  display:flex; justify-content:space-between; align-items:flex-end; gap:var(--gut);
  opacity:var(--hto, 1);
}
.hero__note{ max-width:38ch; font-size:14.5px; line-height:1.55; color:rgba(237,232,223,.78); }
.scrollcue{ display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(237,232,223,.75); }
.scrollcue i{ position:relative; width:1px; height:44px; background:rgba(237,232,223,.25); overflow:hidden; }
.scrollcue i::after{
  content:''; position:absolute; left:0; top:0; width:1px; height:40%;
  background:var(--ivory);
  animation:cue 2.2s var(--ease-io) infinite;
}
@keyframes cue{ from{ transform:translateY(-100%); } to{ transform:translateY(260%); } }

/* arrival — masked lines rise, fast, no waiting */
.mask{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
.mask > span{ display:block; }
[data-in]{
  opacity:0; transform:translate3d(0, 40px, 0);
  transition:opacity 1.1s var(--ease), transform 1.3s var(--ease);
  transition-delay:calc(.12s + var(--i, 0) * .09s);
}
.mask > [data-in]{ transform:translate3d(0, 105%, 0); opacity:1; }
.is-ready [data-in]{ opacity:1; transform:none; }

/* ══════════ 02 · intro ══════════ */
.intro{
  padding:clamp(120px, 24vh, 260px) var(--gut) clamp(100px, 20vh, 220px);
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:clamp(14px, 2vw, 32px);
}
.intro .label{ grid-column:1 / -1; margin-bottom:clamp(28px, 5vh, 56px); }
.intro__text{
  grid-column:1 / span 11;
  font-size:clamp(30px, 4.3vw, 72px);
  line-height:1.1; letter-spacing:-.034em;
}
.intro__text .w{ opacity:var(--o, .14); }
.intro__cols{
  grid-column:7 / -1;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px, 3vw, 48px);
  margin-top:clamp(70px, 14vh, 160px);
}
.intro__k{ font-size:15px; font-weight:400; margin-bottom:.7em; }
.intro__col p:last-child{ font-size:15px; line-height:1.6; color:var(--muted); }
@media (max-width:860px){
  .intro__text{ grid-column:1 / -1; }
  .intro__cols{ grid-column:1 / -1; grid-template-columns:1fr; }
}

/* in-view rise */
[data-up]{
  opacity:0; transform:translate3d(0, 46px, 0);
  transition:opacity 1.2s var(--ease), transform 1.4s var(--ease);
}
[data-up].is-in{ opacity:1; transform:none; }

/* ══════════ 03 · seasons — pinned, scroll-driven ══════════ */
.seasons{ position:relative; height:430vh; }
.seasons__pin{
  position:sticky; top:0; height:100svh; overflow:hidden; background:#000;
}
.seasons__stack{ position:absolute; inset:0; transform:scale(var(--ss, 1.08)); will-change:transform; }
.seasons__layer{ position:absolute; inset:0; opacity:0; will-change:opacity; }
.seasons__layer[data-layer="0"]{ opacity:1; }
.seasons__layer img{ width:100%; height:100%; object-fit:cover; object-position:62% 50%; }
.seasons__shade{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(55% 62% at 0% 12%, rgba(12,11,10,.62), transparent 72%),
    radial-gradient(48% 55% at 0% 100%, rgba(12,11,10,.7), transparent 75%),
    radial-gradient(42% 50% at 100% 100%, rgba(12,11,10,.55), transparent 75%),
    linear-gradient(180deg, rgba(12,11,10,.4) 0%, transparent 26%, transparent 62%, rgba(12,11,10,.45) 100%);
}
.seasons__head{ position:absolute; left:var(--gut); top:clamp(96px, 15vh, 160px); }
.seasons__head .label{ color:rgba(237,232,223,.75); }
.seasons__title{
  margin-top:clamp(14px, 2vh, 22px);
  font-weight:300; font-size:clamp(40px, 5.8vw, 100px);
  line-height:.96; letter-spacing:-.042em;
}
.seasons__title em{ color:var(--ivory); font-size:1.05em; }
.seasons__title, .seasons__list, .seasons__foot p{ text-shadow:0 1px 18px rgba(0,0,0,.35); }

.seasons__list{
  position:absolute; left:var(--gut); bottom:clamp(28px, 6vh, 64px);
  width:min(340px, calc(100% - 2 * var(--gut)));
}
.seasons__list li{
  position:relative;
  display:grid; grid-template-columns:2.4em 1fr auto; align-items:baseline;
  padding:.82em 0;
  font-size:14px;
  color:rgba(237,232,223,.55);
  transition:color .5s;
}
.seasons__list li::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(237,232,223,.18);
}
.seasons__list li i{
  position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--ivory); transform-origin:left; transform:scaleX(var(--f, 0));
}
.seasons__list .n{ font-size:11px; letter-spacing:.12em; }
.seasons__list .h{ font-variant-numeric:tabular-nums; font-size:12.5px; }
.seasons__list li.is-on{ color:var(--ivory); }

.seasons__foot{
  position:absolute; right:var(--gut); bottom:clamp(28px, 6vh, 64px);
  width:min(330px, 40vw);
  display:grid; gap:18px; justify-items:start;
}
.seasons__foot p{ font-size:14.5px; line-height:1.55; color:rgba(237,232,223,.8); }
@media (max-width:760px){
  .seasons__foot{ display:none; }
  .seasons__list{ width:auto; right:var(--gut); }
}

/* ══════════ the film — the page opens on its first frame ══════════ */
.film{ position:relative; height:640vh; }
.film__pin{ position:sticky; top:0; height:100svh; overflow:hidden; background:#000; }
.film__poster, .film__canvas{ position:absolute; inset:0; width:100%; height:100%; }
/* a 1 KB copy of the still is inlined on the picture, so the first paint
   is already the place; the full still settles over it */
.film__poster{
  display:block;
  background-size:cover; background-position:var(--focus, 50%) 50%; background-repeat:no-repeat;
  animation:heroIn 2.6s var(--ease) both;
}
.film__poster img{
  width:100%; height:100%; object-fit:cover; object-position:var(--focus, 50%) 50%;
}
/* the crisp 4K still holds the frame until the camera actually moves */
.film__canvas{ opacity:0; transition:opacity .35s linear; }
.film.is-moving .film__canvas{ opacity:1; }
.film__shade{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 70% at 0% 100%, rgba(12,11,10,.55), transparent 70%),
    linear-gradient(180deg, rgba(12,11,10,.45) 0%, rgba(12,11,10,.1) 14%, transparent 24%, transparent 60%, rgba(12,11,10,.45) 100%);
}

/* the words live inside the film and give way as it moves */
.beat{
  position:absolute; z-index:2; pointer-events:none;
  opacity:var(--bo, 0);
  transform:translate3d(0, var(--by, 0px), 0);
  will-change:opacity, transform;
}
.beat--open{ --bo:1; left:var(--gut); right:var(--gut); bottom:clamp(110px, 17vh, 190px); }
.beat--open .eyebrow{ margin:0 0 clamp(14px, 2.2vh, 26px) .2em; }
.beat__title{
  margin:0; font-weight:300;
  font-size:clamp(54px, 8.8vw, 164px); line-height:.9; letter-spacing:-.048em;
  text-shadow:0 2px 40px rgba(0,0,0,.25);
}
.beat__title em{ font-size:1.06em; letter-spacing:-.018em; color:var(--warm); }
.beat--mid{ left:var(--gut); top:50%; margin-top:-1.2em; }
.beat--right{ left:auto; right:var(--gut); text-align:right; }
.beat__line{
  font-weight:300; font-size:clamp(30px, 3.9vw, 66px); line-height:1.06; letter-spacing:-.035em;
  text-shadow:0 2px 30px rgba(0,0,0,.45);
}
.beat--end{ left:var(--gut); right:var(--gut); bottom:clamp(30px, 6vh, 64px); text-align:center; }
.beat__small{
  display:inline-block; font-size:14px; letter-spacing:.01em; color:rgba(237,232,223,.86);
  text-shadow:0 1px 16px rgba(0,0,0,.5);
}
.film__cue{
  position:absolute; z-index:2; right:var(--gut); bottom:clamp(24px, 4vh, 44px);
  display:flex; align-items:center; gap:14px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(237,232,223,.75);
  opacity:var(--co, 1);
}
.film__cue i{ position:relative; width:1px; height:44px; background:rgba(237,232,223,.25); overflow:hidden; }
.film__cue i::after{
  content:''; position:absolute; left:0; top:0; width:1px; height:40%; background:var(--ivory);
  animation:cue 2.2s var(--ease-io) infinite;
}
@media (max-width:760px){
  .beat--mid, .beat--right{ left:var(--gut); right:var(--gut); text-align:left; }
}

/* ══════════ arrival — the scroll plays the film ══════════ */
.arrival{ position:relative; height:540vh; }
.arrival__pin{ position:sticky; top:0; height:100svh; overflow:hidden; background:#000; }
.arrival__canvas{ display:block; width:100%; height:100%; }
.arrival__shade{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(12,11,10,.38) 0%, transparent 20%, transparent 78%, rgba(12,11,10,.5) 100%);
}
.arrival__cap{ position:absolute; left:var(--gut); bottom:clamp(26px, 5vh, 52px); }
.arrival__cap .label{ color:rgba(237,232,223,.8); text-shadow:0 1px 14px rgba(0,0,0,.4); }
.arrival__bar{
  position:absolute; right:var(--gut); bottom:clamp(30px, 5.4vh, 56px);
  width:min(220px, 30vw); height:1px; background:rgba(237,232,223,.22);
}
.arrival__bar i{ position:absolute; inset:0; background:var(--ivory); transform-origin:left; transform:scaleX(var(--ap, 0)); }

/* ══════════ 04 · services ══════════ */
.services{ position:relative; padding:clamp(130px, 22vh, 240px) var(--gut) clamp(110px, 18vh, 200px); }
.services__head{
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:clamp(14px, 2vw, 32px);
  align-items:end; margin-bottom:clamp(48px, 9vh, 100px);
}
.services__head .label{ grid-column:1 / span 4; padding-bottom:.9em; }
.services__head .h2{ grid-column:1 / -1; }

.svc{ border-top:1px solid var(--rule); }
.svc__item{ border-bottom:1px solid var(--rule); }
.svc__row{
  width:100%;
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:clamp(14px, 2vw, 32px);
  align-items:center;
  padding:clamp(22px, 3.4vw, 46px) 0;
}
.svc__n{ grid-column:1 / span 1; font-size:12px; letter-spacing:.12em; color:var(--faint); }
.svc__t{
  grid-column:2 / span 7;
  font-size:clamp(30px, 4.8vw, 84px); line-height:1; letter-spacing:-.04em;
  transition:transform .8s var(--ease), opacity .5s;
}
.svc__p{
  grid-column:9 / span 3; justify-self:end;
  font-size:15px; color:var(--muted); font-variant-numeric:tabular-nums;
  transition:opacity .5s;
}
.svc__p small{ font-size:12.5px; color:var(--faint); }
.svc__x{ grid-column:12; justify-self:end; position:relative; width:18px; height:18px; }
.svc__x::before, .svc__x::after{
  content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--ivory);
  transition:transform .6s var(--ease);
}
.svc__x::after{ transform:rotate(90deg); }
.svc__item.is-open .svc__x::after{ transform:rotate(0deg); }
.svc__item.is-open .svc__x::before{ transform:rotate(180deg); }

@media (hover:hover){
  .svc:hover .svc__item:not(:hover) .svc__t,
  .svc:hover .svc__item:not(:hover) .svc__p{ opacity:.32; }
  .svc__row:hover .svc__t{ transform:translateX(.18em); }
}

.svc__more{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .9s var(--ease);
}
.svc__item.is-open .svc__more{ grid-template-rows:1fr; }
.svc__more > div{
  overflow:hidden; min-height:0;
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:clamp(14px, 2vw, 32px);
}
.svc__more > div > *{ grid-column:2 / span 6; }
.svc__more p{ font-size:clamp(15px, 1.2vw, 18px); line-height:1.6; color:var(--muted); max-width:54ch; }
.svc__spec{
  grid-column:9 / -1 !important; grid-row:1 / span 2;
  display:grid; gap:0; align-self:start;
}
.svc__spec li{ font-size:14px; padding:.7em 0; border-top:1px solid var(--rule); color:rgba(237,232,223,.78); }
.svc__more .link{ justify-self:start; margin:clamp(22px, 3vh, 34px) 0 clamp(34px, 5vh, 56px); }
@media (max-width:860px){
  .services__head .label, .services__head .h2{ grid-column:1 / -1; }
  .services__head .label{ margin-bottom:18px; }
  .svc__n{ grid-column:1 / span 2; }
  .svc__t{ grid-column:3 / span 9; }
  .svc__p{ grid-column:3 / span 9; justify-self:start; grid-row:2; margin-top:.6em; }
  .svc__x{ grid-row:1; }
  .svc__more > div > *, .svc__spec{ grid-column:3 / -1 !important; grid-row:auto !important; }
  .svc__spec{ margin-top:20px; }
}

/* the image that follows the cursor over a service */
.svc__peek{
  position:fixed; z-index:20; left:0; top:0;
  width:clamp(220px, 20vw, 340px); aspect-ratio:4 / 5;
  pointer-events:none; overflow:hidden; border-radius:2px;
  opacity:0; transform:translate3d(var(--px, -999px), var(--py, -999px), 0) scale(.9);
  transition:opacity .45s var(--ease);
}
.svc__peek img{ width:100%; height:100%; object-fit:cover; transform:scale(1.08); transition:transform 1.2s var(--ease); }
.svc__peek.is-on{ opacity:1; }
.svc__peek.is-on img{ transform:none; }
@media (hover:none), (max-width:860px){ .svc__peek{ display:none; } }

/* ══════════ how it works ══════════ */
.process{ padding:clamp(40px, 6vh, 80px) var(--gut) clamp(40px, 6vh, 80px); }
.process__head{
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:clamp(14px, 2vw, 32px);
  align-items:end; margin-bottom:clamp(56px, 10vh, 110px);
}
.process__head .label{ grid-column:1 / span 4; padding-bottom:.9em; }
.process__head .h2{ grid-column:5 / -1; font-size:clamp(36px, 4.8vw, 84px); }
.process__steps{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(20px, 2.4vw, 40px); }
.process__steps li{ position:relative; padding-top:clamp(22px, 3vh, 32px); transition-delay:calc(var(--d, 0) * .12s); }
.process__steps li::before{
  content:''; position:absolute; left:0; right:0; top:0; height:1px; background:var(--ivory);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.4s var(--ease) calc(.15s + var(--d, 0) * .12s);
}
.process__steps li.is-in::before{ transform:scaleX(1); }
.process__n{ font-family:var(--num); font-size:22px; color:var(--warm); }
.process__t{ margin-top:clamp(26px, 5vh, 54px); font-size:clamp(19px, 1.6vw, 24px); letter-spacing:-.02em; }
.process__p{ margin-top:.8em; font-size:14.5px; line-height:1.6; color:var(--muted); max-width:30ch; }
@media (max-width:960px){
  .process__steps{ grid-template-columns:1fr 1fr; row-gap:56px; }
}
@media (max-width:600px){
  .process__head .label, .process__head .h2{ grid-column:1 / -1; }
  .process__head .label{ margin-bottom:18px; }
  .process__steps{ grid-template-columns:1fr; }
}

/* ══════════ 05 · visions — horizontal, pinned ══════════ */
.visions{ position:relative; height:var(--vh-total, 400vh); }
.visions__pin{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; grid-template-rows:auto 1fr auto; grid-template-columns:minmax(0, 1fr);
}
.visions__head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:var(--gut);
  padding:clamp(88px, 13vh, 140px) var(--gut) 0;
}
.visions__head .label{ display:block; margin-bottom:clamp(12px, 2vh, 20px); }
.visions__head .h2{ font-size:clamp(36px, 4.8vw, 84px); }
.visions__head > :first-child{ display:block; }
.visions__note{ max-width:26ch; font-size:14px; color:var(--muted); padding-bottom:.5em; text-align:right; }
.visions__track{
  display:flex; align-items:center; gap:clamp(16px, 2.2vw, 36px);
  padding:0 var(--gut);
  transform:translate3d(var(--tx, 0px), 0, 0);
  will-change:transform;
}
.card{ flex:0 0 auto; }
.card__img{
  height:min(58vh, 44vw); aspect-ratio:4 / 5;
  overflow:hidden; background:var(--bg-2);
}
.card__img picture{ width:100%; height:100%; }
.card__img img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.14) translate3d(var(--cx, 0%), 0, 0);
  will-change:transform;
}
.card figcaption{
  display:flex; justify-content:space-between; gap:1.4em;
  padding-top:14px; font-size:14px;
}
.card figcaption span:last-child{ color:var(--faint); }
.card{ cursor:pointer; outline:none; }
.card__name{ font-size:16px; letter-spacing:-.01em; transition:transform .6s var(--ease); }
.card__img picture{ transition:transform 1.4s var(--ease); }
.card:hover .card__img picture, .card:focus-visible .card__img picture{ transform:scale(1.05); }
.card:hover .card__name{ transform:translateX(.3em); }
.card:focus-visible .card__img{ outline:1px solid var(--warm); outline-offset:6px; }
.card--end{
  width:min(30vw, 420px); padding-left:clamp(10px, 3vw, 60px);
  display:grid; gap:24px; justify-items:start;
}
.card--end p{ font-size:clamp(24px, 2.4vw, 38px); line-height:1.15; letter-spacing:-.03em; }
.visions__bar{
  margin:0 var(--gut) clamp(26px, 5vh, 48px);
  height:1px; background:var(--rule); position:relative;
}
.visions__bar i{ position:absolute; inset:0; background:var(--ivory); transform-origin:left; transform:scaleX(var(--vp, 0)); }
@media (max-width:760px){
  .visions{ height:auto; }
  .visions__pin{ position:static; height:auto; display:block; padding-bottom:70px; }
  .visions__head{ display:block; padding-top:110px; }
  .visions__note{ text-align:left; margin-top:14px; }
  .visions__track{
    transform:none !important; overflow-x:auto; scroll-snap-type:x mandatory;
    padding:36px var(--gut) 8px; scrollbar-width:none;
  }
  .visions__track::-webkit-scrollbar{ display:none; }
  .card{ scroll-snap-align:center; }
  .card__img{ height:auto; width:78vw; }
  .card--end{ width:70vw; }
  .visions__bar{ display:none; }
}

/* ══════════ 06 · the name ══════════ */
.name__earth{ grid-column:1 / span 6; aspect-ratio:1 / 1; width:100%; max-width:720px; }
.earth__canvas{ display:block; width:100%; height:100%; }
.name .name__text{ grid-column:8 / -1; align-self:center; }
.name .name__num{ margin:0 0 .25em; font-size:clamp(96px, 11vw, 200px); }
.name .name__num span{ vertical-align:baseline; margin-left:.5em; }
@media (max-width:860px){
  .name__earth{ grid-column:1 / -1; max-width:none; }
  .name .name__text{ grid-column:1 / -1; margin-top:30px; }
}
.name{
  padding:clamp(140px, 24vh, 260px) var(--gut);
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:clamp(14px, 2vw, 32px);
  align-items:end;
}
.name__fig{ grid-column:1 / span 6; }
.name__num{
  margin-top:clamp(20px, 3vh, 34px);
  font-family:var(--num); font-weight:300;
  font-size:clamp(120px, 19vw, 340px); line-height:.78; letter-spacing:-.02em;
  color:var(--warm);
}
.name__num span{
  font-family:var(--sans); font-size:12px; font-weight:400;
  letter-spacing:.16em; vertical-align:top; margin-left:.6em; color:var(--muted);
}
.name__wave{ display:block; width:100%; height:52px; margin-top:clamp(40px, 5.6vw, 92px); overflow:visible; }
.name__wave path{ fill:none; stroke:rgba(237,232,223,.45); stroke-width:1; vector-effect:non-scaling-stroke; }
.name__text{ grid-column:8 / -1; display:grid; gap:1.2em; }
.name__text p{ font-size:clamp(16px, 1.25vw, 19px); line-height:1.62; color:var(--muted); }
.name__text b{ font-weight:400; color:var(--ivory); }
@media (max-width:860px){
  .name__fig, .name__text{ grid-column:1 / -1; }
  .name__text{ margin-top:60px; }
}

/* ══════════ 07 · start ══════════ */
.start{
  padding:clamp(120px, 22vh, 240px) var(--gut) clamp(60px, 10vh, 110px);
  border-top:1px solid var(--rule);
}
.start__q{ margin-top:clamp(28px, 5vh, 56px); font-size:clamp(20px, 1.8vw, 28px); color:var(--muted); letter-spacing:-.02em; }
.start__big{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  width:100%; margin-top:clamp(12px, 2vh, 24px);
  font-size:clamp(54px, 11.4vw, 220px); line-height:.95; letter-spacing:-.055em;
  padding-bottom:.08em;
}
.start__big::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--ivory);
  transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease);
}
.start__big i{ font-style:normal; font-size:.6em; transition:transform .7s var(--ease); }
.start__big:hover::after{ transform:scaleX(1); }
.start__big:hover i{ transform:translateX(.12em) rotate(-45deg); }
.start__meta{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px 40px;
  margin-top:clamp(56px, 10vh, 110px);
  font-size:14px; color:var(--muted);
}
.start__meta a{ color:var(--ivory); background:linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom:2px; }

.foot{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px 30px;
  padding:28px var(--gut) 34px;
  border-top:1px solid var(--rule);
  font-size:12.5px; color:var(--faint);
}
.foot a:hover{ color:var(--ivory); }
.foot__mark{
  font-size:clamp(64px, 22.6vw, 460px); line-height:.86; letter-spacing:-.06em;
  padding-bottom:.2em;                      /* Cormorant's 7 and 3 hang below the line */
  font-weight:300; color:rgba(237,232,223,.92);
  white-space:nowrap; margin-left:-.04em;
}
.foot__mark span{ font-family:var(--num); letter-spacing:-.02em; color:var(--warm); margin-left:.06em; }
.foot__row{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px 30px;
  margin-top:clamp(28px, 5vh, 52px);
  font-size:12.5px; color:var(--faint);
}
.foot a:hover{ color:var(--ivory); }

/* ══════════ the brief (Terra) ══════════ */
.sheet{ position:fixed; inset:0; z-index:100; }
.sheet__scrim{
  position:absolute; inset:0; background:rgba(8,7,6,.52);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .6s var(--ease);
}
.sheet.is-on .sheet__scrim{ opacity:1; }
.terra{
  position:absolute; top:0; right:0; bottom:0;
  width:min(520px, 100%);
  display:grid; grid-template-rows:auto auto minmax(0,1fr) auto auto;
  padding:clamp(22px, 3.2vh, 34px) clamp(24px, 2.6vw, 44px) clamp(24px, 3.4vh, 38px);
  background:var(--bg-2);
  border-left:1px solid var(--rule);
  transform:translateX(102%); transition:transform .9s var(--ease);
}
.sheet.is-on .terra{ transform:none; }
.terra__head{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:baseline; gap:1.4em;
  padding-bottom:1.1em; border-bottom:1px solid var(--rule);
}
.terra__mark{ font-size:14px; font-weight:500; }
.terra__mark i{ font-style:normal; font-weight:300; color:var(--faint); }
.terra__step{ font-family:var(--num); font-size:16px; color:var(--faint); font-variant-numeric:tabular-nums; }
.terra__close{ font-size:13px; color:var(--muted); }
.terra__back{ font-size:13px; color:var(--muted); margin-right:-.4em; transition:color .3s, transform .4s var(--ease); }
.terra__back:hover{ color:var(--ivory); transform:translateX(-3px); }
.terra__back[hidden] + .terra__mark{ grid-column:1 / span 2; }
/* the service chosen, and what it costs — held under the head */
.terra__offer{
  padding:.85em 0; border-bottom:1px solid var(--rule);
  font-size:13px; color:var(--warm);
}
.terra__offer:empty{ padding:0; border:0; }
.terra{ grid-template-rows:auto auto auto minmax(0,1fr) auto auto; }
.terra__close:hover{ color:var(--ivory); }

.terra__ledger{ max-height:34vh; overflow-y:auto; scrollbar-width:none; }
.terra__ledger::-webkit-scrollbar{ display:none; }
.rec{
  display:grid; grid-template-columns:7.2em 1fr; gap:1em; align-items:baseline;
  padding:.75em 0; border-bottom:1px solid rgba(237,232,223,.07);
  opacity:0; transform:translateY(-4px); transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.rec.is-on{ opacity:1; transform:none; }
.rec__k{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.rec__v{ font-size:14px; line-height:1.45; }

.terra__now{
  display:grid; align-content:start; gap:14px;
  padding-top:clamp(26px, 4vh, 40px);
  min-height:0; overflow-y:auto; scrollbar-width:none;
}
.terra__now::-webkit-scrollbar{ display:none; }
.terra__q{
  font-size:clamp(24px, 2vw, 32px); line-height:1.15; letter-spacing:-.03em;
  opacity:0; transform:translateY(8px); transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.terra__q.is-on{ opacity:1; transform:none; }
.terra__q.is-thinking{ opacity:.18; transform:none; transition-duration:.3s; }
.terra__hint{ font-size:13.5px; line-height:1.55; color:var(--muted); }
.terra__opts{ display:grid; margin-top:8px; border-top:1px solid var(--rule); }
.opt{
  display:flex; justify-content:space-between; align-items:center; gap:1em;
  width:100%; padding:1em .2em 1em 0;
  font-size:15.5px; color:rgba(237,232,223,.78);
  border-bottom:1px solid var(--rule);
  transition:color .3s, padding-left .45s var(--ease);
}
.opt::after{ content:'\2192'; color:var(--faint); opacity:0; transform:translateX(-6px); transition:opacity .3s, transform .45s var(--ease); }
.opt:hover{ color:var(--ivory); padding-left:.5em; }
.opt:hover::after{ opacity:1; transform:none; }
.opt.is-picked{ color:var(--ivory); }
.opt--big{
  display:grid; grid-template-columns:2.4em 1fr auto; align-items:center;
  padding:1.05em .2em 1.05em 0;
}
.opt__n{ font-size:11px; letter-spacing:.12em; color:var(--faint); align-self:start; padding-top:.35em; }
.opt__t{ display:grid; gap:.3em; }
.opt__t b{ font-weight:400; font-size:17px; letter-spacing:-.012em; color:var(--ivory); }
.opt__t small{ font-size:13px; line-height:1.45; color:var(--muted); }
.opt--big:hover{ padding-left:.4em; }
.terra.is-opening .terra__q{ font-size:clamp(28px, 2.4vw, 38px); }

.terra__form{ display:grid; gap:14px; margin-top:6px; }
.terra__form.is-wrong{ animation:nudge .5s var(--ease); }
@keyframes nudge{ 0%,100%{ transform:none; } 25%{ transform:translateX(-5px); } 75%{ transform:translateX(5px); } }
.terra__form textarea, .terra__form input{
  width:100%; padding:.6em 0 .7em;
  border:0; border-bottom:1px solid rgba(237,232,223,.25);
  background:none; color:var(--ivory); caret-color:var(--warm);
  font:inherit; font-size:17px; line-height:1.5; resize:none; overflow:hidden;
  transition:border-color .4s;
}
.terra__form textarea:focus, .terra__form input:focus{ outline:none; border-bottom-color:var(--ivory); }
.terra__form textarea::placeholder, .terra__form input::placeholder{ color:var(--faint); }
.pair{ display:grid; gap:4px; }
.pair span{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }

.terra__out{ overflow-y:auto; scrollbar-width:none; }
pre.brief{
  margin:.4em 0 0; padding:1.1em 1.2em;
  border:1px solid var(--rule);
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11px; line-height:1.7;
  color:var(--muted); white-space:pre-wrap;
  opacity:0; transition:opacity .8s var(--ease);
}
pre.brief.is-on{ opacity:1; }
.terra__send{
  margin-top:16px; width:100%;
  padding:1.05em 1.4em; border-radius:999px;
  font-size:14px; font-weight:400;
  background:var(--ivory); color:#0C0B0A;
  opacity:0; transform:translateY(8px); transition:opacity .7s var(--ease), transform .7s var(--ease), background-color .3s;
}
.terra__send.is-on{ opacity:1; transform:none; }
.terra__send:hover{ background:#fff; }

/* ══════════ a studio concept, opened ══════════ */
.case{
  position:fixed; inset:0; z-index:90;
  display:grid; grid-template-columns:58fr 42fr;
  background:var(--bg);
  visibility:hidden;
}
.case.is-on{ visibility:visible; }
.case__media{
  position:relative; overflow:hidden; height:100vh;
  clip-path:inset(100% 0 0 0);
  transition:clip-path 1.2s var(--ease);
}
.case.is-on .case__media{ clip-path:inset(0 0 0 0); }
.case__img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.18); transition:transform 1.8s var(--ease);
}
.case.is-on .case__img{ transform:none; }

/* the work, image after image */
.case__media{ overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; }
.case__media::-webkit-scrollbar{ display:none; }
.case__gallery{
  display:grid; grid-template-columns:1fr 1fr; grid-auto-flow:row dense;
  gap:clamp(6px, .6vw, 10px); padding:clamp(6px, .6vw, 10px);
}
.case__gallery picture{ display:block; overflow:hidden; background:#15130f; }
.case__gallery .is-across{ grid-column:1 / -1; }
.case__gallery img, .case__gallery .case__img{ display:block; width:100%; height:auto; object-fit:initial; }
.case__body{
  height:100vh; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none;
  padding:clamp(90px, 13vh, 140px) clamp(28px, 4vw, 72px) clamp(40px, 6vh, 64px);
  display:flex; flex-direction:column;
}
.case__body::-webkit-scrollbar{ display:none; }
.case__body > *{
  opacity:0; transform:translateY(24px);
  transition:opacity .9s var(--ease), transform 1.1s var(--ease);
}
.case.is-on .case__body > *{ opacity:1; transform:none; }
.case.is-on .case__body > :nth-child(2){ transition-delay:.18s; }
.case.is-on .case__body > :nth-child(3){ transition-delay:.24s; }
.case.is-on .case__body > :nth-child(4){ transition-delay:.3s; }
.case.is-on .case__body > :nth-child(5){ transition-delay:.38s; }
.case.is-on .case__body > :nth-child(6){ transition-delay:.46s; }
.case.is-on .case__body > :nth-child(7){ transition-delay:.54s; }
.case__k .case__n{ color:var(--faint); }
.case__name{
  margin-top:clamp(18px, 3vh, 30px);
  font-weight:300; font-size:clamp(56px, 6.6vw, 118px); line-height:.92; letter-spacing:-.05em;
}
.case__meaning{ margin-top:.5em; font-family:var(--serif); font-style:italic; font-size:clamp(18px, 1.4vw, 22px); color:var(--warm); }
.case__line{ margin-top:clamp(22px, 3.6vh, 38px); font-size:clamp(21px, 1.7vw, 27px); line-height:1.25; letter-spacing:-.022em; max-width:24ch; }
.case__facts{
  margin:clamp(26px, 4vh, 44px) 0 0; display:grid; grid-template-columns:1fr 1fr; gap:20px;
  padding-top:18px; border-top:1px solid var(--rule);
}
.case__facts dt{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.case__facts dd{ margin:6px 0 0; font-size:14.5px; }
.case__beats{ margin-top:clamp(26px, 4vh, 44px); display:grid; gap:22px; }
.case__beats > div{ display:grid; grid-template-columns:7.5em 1fr; gap:1em; padding-top:16px; border-top:1px solid var(--rule); }
.case__bk{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); padding-top:.3em; }
.case__beats p:last-child{ font-size:15px; line-height:1.6; color:var(--muted); }
.case__foot{
  margin-top:auto; padding-top:clamp(34px, 5vh, 56px);
  display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.case__nav{ display:flex; gap:10px; }
.case__nav button{
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--rule); font-size:16px;
  transition:border-color .3s, background-color .3s, color .3s;
}
.case__nav button:hover{ background:var(--ivory); color:#0C0B0A; border-color:var(--ivory); }
.case__close{
  position:fixed; top:clamp(18px, 2.6vh, 28px); right:var(--gut); z-index:2;
  font-size:13.5px; padding:.62em 1.2em; border-radius:999px;
  border:1px solid rgba(237,232,221,.4); background:rgba(12,11,10,.3);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:background-color .3s, color .3s;
}
.case__close:hover{ background:var(--ivory); color:#0C0B0A; }
@media (max-width:860px){
  .case{ grid-template-columns:1fr; grid-template-rows:auto 1fr; overflow-y:auto; display:block; }
  .case__media{ height:58vh; }
  .case__media:has(.case__gallery){ height:auto; overflow:visible; }
  .case__body{ height:auto; overflow:visible; padding-top:40px; }
  .case__beats > div{ grid-template-columns:1fr; gap:.5em; }
}

/* ══════════ the cursor over things you can open ══════════ */
.cursor{
  position:fixed; z-index:95; left:0; top:0; pointer-events:none;
  width:88px; height:88px; margin:-44px 0 0 -44px;
  display:grid; place-items:center;
  border-radius:50%; background:var(--ivory); color:#0C0B0A;
  font-size:11.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  translate:var(--mx, -200px) var(--my, -200px);
  scale:0;
  transition:scale .55s var(--ease);
}
.cursor.is-on{ scale:1; }
@media (hover:hover){ .card{ cursor:none; } }
@media (hover:none){ .cursor{ display:none; } }

/* ══════════ reduced motion ══════════ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  [data-in], [data-up]{ opacity:1 !important; transform:none !important; }
}