:root{
  --black:#111111; --white:#FFFFFF; --ivory:#F5F3EF; --gold:#A96B2E; --stone:#E8E0D6;
  --display:"Cormorant Garamond",Georgia,serif;
  --text:"Inter","Söhne",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(0.32,0.72,0,1);
  --pad:clamp(20px,6vw,96px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ivory);color:var(--black);font-family:var(--text);font-weight:350;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
section{padding:clamp(72px,12vh,140px) var(--pad);position:relative}
.dark{background:var(--black);color:var(--ivory)}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:-0.015em;line-height:1.04}
h1{font-size:clamp(40px,7.6vw,104px)}
h2{font-size:clamp(32px,5.2vw,68px)}
h3{font-size:clamp(21px,2.3vw,30px);line-height:1.15}
h4{font-size:19px}
p{max-width:64ch}
a{color:inherit;text-decoration:none}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.meta{font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;opacity:.5}
.lede{font-size:clamp(17px,1.6vw,21px);line-height:1.55;margin-top:26px;opacity:.85}
.rule{width:56px;height:1px;background:var(--gold);margin:26px 0}
.mt{margin-top:22px}

#nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--pad);backdrop-filter:blur(14px) saturate(1.4);
  background:color-mix(in srgb,var(--black) 62%,transparent);color:var(--ivory);
  transition:background .5s var(--ease),color .5s var(--ease)}
#nav ul{display:flex;gap:clamp(12px,2.2vw,32px);list-style:none;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
#nav a{opacity:.62;transition:opacity .3s var(--ease)}
#nav a:hover,#nav a.on{opacity:1}
#nav a.on{color:var(--gold)}

.hero{min-height:82svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:120px}
.hero.tall{min-height:100svh}
.diag{position:absolute;top:-30%;right:-8%;width:2px;height:170%;background:linear-gradient(var(--gold),transparent);transform:rotate(38.7deg);transform-origin:top;opacity:.7}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.r{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.r.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.r{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

.grid{display:grid;gap:1px;background:currentColor;margin-top:56px}
.grid>*{background:var(--ivory);padding:32px 26px}
.dark .grid>*{background:var(--black)}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.g2,.g3,.g4{grid-template-columns:1fr}}

.svc{border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);padding:32px 0;display:grid;grid-template-columns:70px 1fr 1fr 40px;gap:24px;align-items:start;transition:padding-left .6s var(--ease)}
.svc:hover{padding-left:12px}
.svc:last-of-type{border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.svc .num{font-size:11px;letter-spacing:.2em;color:var(--gold);padding-top:9px}
.svc .arw{text-align:right;color:var(--gold);padding-top:6px;transition:transform .5s var(--ease)}
.svc:hover .arw{transform:translateX(8px)}
.sub{margin-top:18px;padding-left:18px;border-left:1px solid var(--gold)}
.tags{font-size:13px;opacity:.6;margin-top:10px}
@media(max-width:860px){.svc{grid-template-columns:1fr;gap:10px}.svc .num{padding:0}.svc .arw{display:none}}

.split{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
.card{padding:36px 30px;border:1px solid color-mix(in srgb,currentColor 16%,transparent)}
.card.gold{background:var(--black);color:var(--ivory);border-color:var(--gold)}
.card ul{list-style:none;margin-top:20px;font-size:14px}
.card li{padding:9px 0;border-top:1px solid color-mix(in srgb,currentColor 14%,transparent);opacity:.75}
@media(max-width:860px){.split{grid-template-columns:1fr}}

.post{display:flex;justify-content:space-between;gap:24px;padding:26px 0;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);transition:opacity .4s var(--ease)}
.post:hover{opacity:.55}
.post:last-child{border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent)}

.btn{display:inline-block;margin-top:34px;padding:14px 26px;border:1px solid var(--gold);color:var(--gold);font-size:11px;letter-spacing:.24em;text-transform:uppercase;transition:background .4s var(--ease),color .4s var(--ease)}
.btn:hover{background:var(--gold);color:var(--black)}
.back{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.55;display:inline-block;margin-bottom:26px}
.mailto{font-family:var(--display);font-size:clamp(26px,4vw,56px);border-bottom:1px solid var(--gold);padding-bottom:6px;display:inline-block;transition:color .4s var(--ease)}
.mailto:hover{color:var(--gold)}
form{margin-top:44px;max-width:620px}
label{display:block;margin-top:22px}
label span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.55}
input,textarea,select{width:100%;margin-top:8px;padding:12px 0;background:transparent;border:0;border-bottom:1px solid color-mix(in srgb,currentColor 28%,transparent);color:inherit;font:inherit;outline:none;transition:border-color .4s var(--ease)}
input:focus,textarea:focus,select:focus{border-color:var(--gold)}
select option{background:var(--black);color:var(--ivory)}
textarea{resize:vertical;min-height:90px}
footer{padding:26px var(--pad);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--black);color:var(--ivory)}

/* square full stop — the identity mark, not an icon */
.sq{display:inline-block;width:.15em;height:.15em;background:currentColor;margin-left:.07em;vertical-align:baseline;position:relative;bottom:.02em}
.sq.g{background:var(--gold);width:.4em;height:.4em;margin-left:.5em;bottom:0}
footer .meta .sq{width:4px;height:4px}

/* founders — content only, no cards, no portraits */
.founders .fdr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,7vw,110px);margin-top:clamp(56px,9vh,110px)}
.founders .fdr h3{font-size:clamp(26px,3.4vw,44px)}
.founders .fdr .meta{display:block;margin-top:12px;color:var(--gold);opacity:1}
.founders .fdr p{margin-top:18px;opacity:.72;max-width:36ch}
@media(max-width:860px){.founders .fdr{grid-template-columns:1fr;gap:48px}}

/* services — heading sits high, type carries it, no rules or arrows */
.svc-sec{padding-top:clamp(56px,8vh,96px)}
.svc-list{margin-top:clamp(48px,8vh,96px)}
.svc{border:0;padding:clamp(26px,4.4vh,52px) 0;grid-template-columns:58px 1fr;gap:clamp(16px,2.4vw,40px);align-items:baseline}
.svc:last-of-type{border-bottom:0}
.svc:hover{padding-left:14px}
.svc h3{font-size:clamp(26px,3.4vw,46px);font-weight:300}
.svc>div{grid-column:2;max-width:56ch}
.svc p{margin-top:14px;font-size:15px}
.sub{margin-top:20px;padding-left:0;border-left:0}
.sub .meta{display:block;margin-bottom:6px}
@media(max-width:860px){.svc{grid-template-columns:1fr}.svc>div{grid-column:1}}

/* services variation B: no numbers, wider rhythm */
.svc-b .svc{grid-template-columns:1fr;gap:10px;padding:clamp(30px,5.2vh,64px) 0;border-top:1px solid color-mix(in srgb,currentColor 12%,transparent)}
.svc-b .svc .num{display:none}
.svc-b .svc h3{font-size:clamp(32px,5.4vw,68px)}
.svc-b .svc>div{grid-column:1}

/* copy-doc build: shared pieces */
.acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,4vh,44px)}
.btn.ghost{background:transparent;border:1px solid currentColor;opacity:.8}
.btn.ghost:hover{opacity:1}
.aside{margin-top:14px;font-size:13px;letter-spacing:.02em;opacity:.55;font-style:italic}
.stack{display:grid;gap:clamp(40px,7vh,84px);margin-top:clamp(40px,6vh,72px)}
.stack h2,.stack h3{font-size:clamp(26px,3.6vw,48px);font-weight:300}
.stack .lede{margin-top:14px;max-width:62ch}
.pull{margin-top:clamp(28px,4vh,48px);font-family:var(--display);font-size:clamp(22px,2.8vw,36px);
 line-height:1.28;font-weight:300;max-width:34ch;opacity:.9}
.founders .fdr p{max-width:52ch;opacity:.78;margin-top:16px;font-size:16px}
@media(max-width:860px){
 #nav ul{gap:10px 14px;font-size:10px;letter-spacing:.16em}
 .acts .btn{flex:1 1 auto;text-align:center}
 .pull{font-size:clamp(20px,5.4vw,28px)}
}

@media(max-width:860px){body::before{opacity:.18;background-size:200% auto}}

/* motion: one slow slide, staggered inside its own section */
.sec .r{opacity:0;transform:translateY(30px);
 transition:opacity 1s var(--ease),transform 1s var(--ease);
 transition-delay:calc(var(--i,0) * 90ms)}
.sec.in .r{opacity:1;transform:none}
.sec .svc.r{transform:translateY(24px)}
.stack>.r{transform:translateY(34px)}
.hero.sec .r{transition-delay:0ms}
@media(prefers-reduced-motion:reduce){.sec .r{opacity:1;transform:none;transition:none}}

/* interaction states — every control answers back */
:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:1px}
::selection{background:var(--gold);color:var(--white)}
html{scroll-behavior:smooth}
section{scroll-margin-top:84px}
.btn{transition:transform .5s var(--ease),opacity .4s var(--ease),background .4s var(--ease),color .4s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
#nav a{padding:6px 0;position:relative}
#nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;
 transition:right .5s var(--ease)}
#nav a:hover::after,#nav a.on::after{right:0}
.svc{transition:padding-left .6s var(--ease),opacity .4s var(--ease)}
.svc h3{transition:opacity .4s var(--ease)}
.svc-list:hover .svc:not(:hover){opacity:.45}
.mailto{position:relative}
.mailto::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--gold);
 transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.mailto:hover::after{transform:scaleX(1)}
input,select,textarea{transition:border-color .4s var(--ease),background .4s var(--ease)}
input:focus,select:focus,textarea:focus{border-color:var(--gold);outline:none}
h1,h2{text-wrap:balance}
h3,h4{text-wrap:pretty}
.lede,p{text-wrap:pretty}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:14px;z-index:99;background:var(--black);color:var(--white);padding:10px 16px}

/* curtain stack: each section pins, the next one rides up over it */
main{position:relative}
main>.panel{position:relative}
main>.panel>section{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
 background:var(--ivory);box-shadow:0 -1px 0 color-mix(in srgb,var(--black) 8%,transparent)}
/* a panel taller than the screen can never be pinned — it would hide its own bottom */
main>.panel>section.tall{position:relative;min-height:0;justify-content:flex-start}
main>.panel>section.dark{background:var(--black)}
main>.panel>section>*{width:100%}
main>.panel:first-of-type>section{box-shadow:none}
footer{position:relative;z-index:2;background:var(--black)}
@supports not (min-height:100svh){main>section{min-height:100vh}}
@media(max-width:860px){main>.panel>section{min-height:auto;padding-top:clamp(72px,14vh,110px);padding-bottom:clamp(72px,14vh,110px)}}

/* type scale — settled */
h1{font-size:clamp(38px,6.4vw,92px);line-height:1.05;letter-spacing:-.018em;font-weight:300}
h2{font-size:clamp(30px,4.4vw,60px);line-height:1.1;letter-spacing:-.015em;font-weight:300}
h3{font-size:clamp(22px,2.6vw,34px);line-height:1.22;letter-spacing:-.01em;font-weight:400}
h4{font-family:var(--text);font-size:15px;font-weight:500;letter-spacing:.01em;line-height:1.45}
.lede{font-family:var(--display);font-size:clamp(19px,1.9vw,26px);line-height:1.5;font-weight:300;max-width:62ch;opacity:.86}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.22em}
p{max-width:66ch}

/* ============ design pass ============ */
/* nav: quiet bar, real mobile menu, no six-link wrap */
#nav{padding:14px var(--pad);border-bottom:1px solid transparent}
.nav-links{font-size:11px;letter-spacing:.18em}
.burger{display:none;background:none;border:0;color:inherit;width:44px;height:44px;cursor:pointer;
 flex-direction:column;justify-content:center;gap:5px;align-items:flex-end;padding:0}
.burger span{display:block;width:22px;height:1px;background:currentColor;transition:transform .5s var(--ease),opacity .3s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:49;background:var(--black);color:var(--ivory);display:flex;
 flex-direction:column;justify-content:center;gap:6px;padding:0 var(--pad);
 clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);pointer-events:none}
.menu.open{clip-path:inset(0 0 0 0);pointer-events:auto}
.menu ul{list-style:none}
.menu a{font-family:var(--display);font-size:clamp(30px,8vw,46px);font-weight:300;line-height:1.5;display:block}
.menu-mail{margin-top:28px;font-size:12px;letter-spacing:.16em;color:var(--gold)}
@media(max-width:900px){.nav-links{display:none}.burger{display:flex}}

/* editorial rail: the label sits in its own column, content keeps its measure */
main>.panel>section>.eyebrow{display:block;margin-bottom:clamp(18px,3vh,30px)}
main>.panel>section{padding-left:var(--pad);padding-right:var(--pad)}

/* lists: rules and type, no boxed cards */
.grid{background:none;gap:0;margin-top:clamp(30px,5vh,52px);border-top:1px solid color-mix(in srgb,currentColor 14%,transparent)}
.grid>*{background:none!important;padding:18px 0;border-bottom:1px solid color-mix(in srgb,currentColor 14%,transparent)}
.g2,.g3,.g4{grid-template-columns:1fr}
.grid>* h4{font-family:var(--text);font-size:15px;font-weight:400;opacity:.9}

/* service rows */
.svc{grid-template-columns:52px 1fr;gap:clamp(14px,2vw,32px);padding:clamp(22px,3.4vh,34px) 0;
 border-top:1px solid color-mix(in srgb,currentColor 14%,transparent)}
.svc:last-of-type{border-bottom:1px solid color-mix(in srgb,currentColor 14%,transparent)}
.svc .num{padding-top:.55em;opacity:.7}
.svc>div{grid-column:2}
.svc p{font-size:15px;opacity:.7;margin-top:8px;max-width:54ch}
@media(max-width:860px){.svc{grid-template-columns:1fr;gap:6px}.svc>div{grid-column:1}}

/* buttons: proper hit area, quiet edges */
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 26px;border:1px solid currentColor;
 font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;border-radius:0;background:none}
.btn:hover,.btn:focus-visible{background:var(--gold);color:var(--black);border-color:var(--gold);opacity:1}
.btn.ghost{opacity:.7}.btn.ghost:hover{opacity:1}

/* footer: an actual sitemap, not three floating labels */
footer{display:grid;grid-template-columns:1.2fr 2fr;gap:clamp(24px,5vw,80px);
 padding:clamp(46px,8vh,84px) var(--pad) clamp(28px,4vh,44px)}
.foot-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;font-size:13px;align-content:start}
.foot-nav a{opacity:.62}.foot-nav a:hover{opacity:1;color:var(--gold)}
.foot-end{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
 padding-top:22px;margin-top:8px;border-top:1px solid color-mix(in srgb,var(--ivory) 14%,transparent);
 font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.55}
@media(max-width:760px){footer{grid-template-columns:1fr}}

.hero{padding-bottom:clamp(90px,14vh,140px)}
.hero .acts{margin-bottom:8px}

/* curtain removed: sections flow normally again. sticky stacking kept colliding with the
   fixed nav, the marble layer and the footer — the reveal does the work without it. */
main>.panel{position:static}
main>.panel>section,main>.panel>section.tall{position:relative;top:auto;min-height:0;display:block;
 box-shadow:none;background:transparent;padding-top:clamp(72px,11vh,130px);padding-bottom:clamp(72px,11vh,130px)}
main>.panel>section.dark{background:var(--black)}
main>.panel>section.hero{min-height:88svh;display:flex;flex-direction:column;justify-content:center}
footer{z-index:auto}

/* ================= v15 — scroll motion system + UI pass =================
   one primitive: JS writes --p (0→1 progress) on any [data-s] element.
   CSS reads it. no GSAP, no ScrollTrigger, no anime.js. */
@property --p{syntax:"<number>";inherits:true;initial-value:0}

/* ---- chrome: progress, glass nav, cursor ---- */
#prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:var(--gold);
 transform:scaleX(var(--sp,0));transform-origin:0 50%;opacity:.9;pointer-events:none}
#nav{background:color-mix(in srgb,var(--black) 30%,transparent);backdrop-filter:blur(18px) saturate(1.6);
 -webkit-backdrop-filter:blur(18px) saturate(1.6);
 transform:translate3d(0,var(--ny,0),0);transition:transform .55s var(--ease),background .55s var(--ease),border-color .55s var(--ease)}
#nav.hid{--ny:-110%}
#cur{position:fixed;top:0;left:0;width:12px;height:12px;border-radius:50%;background:var(--ivory);
 z-index:70;pointer-events:none;mix-blend-mode:difference;translate:-50% -50%;
 transform:translate3d(var(--cx,-50px),var(--cy,-50px),0);scale:var(--cs,1);
 transition:scale .35s var(--ease);will-change:transform}
#cur.big{--cs:3.6}
@media(hover:none),(pointer:coarse){#cur{display:none}}

/* ---- reveal: word-level, line-wipe, block ---- */
.w{display:inline-block;overflow:hidden;vertical-align:top}
.w>i{display:inline-block;font-style:inherit;transform:translate3d(0,110%,0) rotate(6deg);
 transition:transform 1.05s var(--ease);transition-delay:calc(var(--wi,0)*38ms)}
.in .w>i,.sec.in .w>i{transform:none}
.wipe{position:relative;display:block;overflow:hidden}
.wipe>span{display:block;transform:translate3d(0,102%,0);transition:transform 1.1s var(--ease);
 transition-delay:calc(var(--wi,0)*110ms)}
.in .wipe>span{transform:none}

/* ---- pin: sticky viewport with a progress track ---- */
.pin{position:relative}
.pin>.pin-in{position:sticky;top:0;height:100svh;overflow:clip;display:flex;flex-direction:column;justify-content:center}
.pin.dark,.pin.dark .pin-in{background:var(--black);color:var(--ivory)}

/* ---- parallax ---- */
.parx{transform:translate3d(0,calc((var(--p,.5) - .5) * -90px),0);will-change:transform}
.fadein{opacity:clamp(0,calc(var(--p,0)*2.2),1)}

/* ---- curtain hero ---- */
.h-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
 overflow:clip;background:var(--black);color:var(--ivory);padding-top:clamp(110px,16vh,180px)}
.h-hero h1{font-size:clamp(42px,8.2vw,118px);line-height:.98;letter-spacing:-.022em}
.h-hero .acts{position:relative}

/* ---- horizontal pin rail ---- */
.rail .pin-in{justify-content:flex-start;padding:0}
.rail .rail-head{padding:clamp(86px,13vh,130px) var(--pad) 0;flex:0 0 auto}
.track{display:flex;gap:clamp(16px,2.4vw,34px);padding:clamp(24px,5vh,54px) var(--pad);
 transform:translate3d(calc(var(--p,0) * var(--dx,-62vw)),0,0);will-change:transform;align-items:stretch}
.cardx{flex:0 0 clamp(260px,32vw,420px);border:1px solid color-mix(in srgb,currentColor 18%,transparent);
 padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;justify-content:space-between;
 min-height:clamp(320px,46vh,460px);transition:background .5s var(--ease),transform .5s var(--ease)}
.cardx:hover{background:color-mix(in srgb,var(--gold) 12%,transparent);transform:translateY(-6px)}
.cardx .num{font-size:11px;letter-spacing:.24em;color:var(--gold)}
.cardx h3{margin-top:auto;font-weight:300}
.cardx p{font-size:14px;opacity:.7;margin-top:12px;max-width:34ch}
.railbar{height:1px;background:color-mix(in srgb,currentColor 18%,transparent);margin:0 var(--pad) 26px}
.railbar i{display:block;height:1px;background:var(--gold);width:calc(20% + var(--p,0)*80%)}

/* ---- stacked cards ---- */
.stack-pin{position:relative}
.stack-pin .card-s{position:sticky;top:calc(14vh + var(--k,0)*18px);background:var(--ivory);
 border:1px solid color-mix(in srgb,var(--black) 14%,transparent);padding:clamp(26px,4vw,52px);
 margin-bottom:22px;box-shadow:0 -20px 60px -40px rgba(0,0,0,.5)}
.card-s.dk{background:var(--black);color:var(--ivory);border-color:color-mix(in srgb,var(--ivory) 18%,transparent)}

/* ---- circle clip reveal ---- */
.iris{position:relative;background:var(--black);color:var(--ivory)}
.iris .iris-fill{position:absolute;inset:0;background:var(--ivory);
 clip-path:inset(calc(42% - var(--p,0)*80vmax) calc(50% - var(--p,0)*80vmax) calc(58% - var(--p,0)*80vmax))}

/* ---- marquee ---- */
.mq{overflow:clip;border-block:1px solid color-mix(in srgb,currentColor 14%,transparent);padding:18px 0}
.mq ul{display:flex;gap:clamp(30px,5vw,72px);list-style:none;width:max-content;
 animation:sl 34s linear infinite;font-family:var(--display);font-size:clamp(20px,2.6vw,34px);
 font-weight:300;opacity:.65;animation-play-state:running}
.mq.rev ul{animation-direction:reverse}
@keyframes sl{to{transform:translateX(-50%)}}

/* ---- zoom-through outro ---- */
.outro .mono{width:clamp(48px,7vw,96px);margin-inline:auto;display:block;
 transform:scale(calc(1 + 26*(1 - var(--p,0))));opacity:clamp(0,calc(var(--p,0)*1.6),1);will-change:transform}
.outro h2{margin-top:clamp(26px,5vh,54px);opacity:clamp(0,calc((var(--p,0)-.45)*3),1)}


/* ---- motion off ---- */
@media(prefers-reduced-motion:reduce){
 .w>i,.wipe>span{transform:none!important;transition:none}
 .parx,.track,.outro .mono{transform:none!important}
 .mq ul{animation:none}
 .iris .iris-fill{clip-path:none;opacity:0}
 .pin>.pin-in{position:relative;height:auto;padding:clamp(72px,11vh,130px) 0}
 #cur{display:none}
}
@media(prefers-reduced-transparency:reduce){#nav{background:var(--black);backdrop-filter:none}}
@media(max-width:860px){
 .track{--dx:-190vw}
 .cardx{flex-basis:78vw;min-height:58vh}
 .stack-pin .card-s{top:calc(10vh + var(--k,0)*12px)}
}

/* ---- v15 layout glue ---- */
.pin-in>.inner{padding:0 var(--pad);width:100%;position:relative;z-index:2}
.h-hero>*{position:relative;z-index:2}
.pin-in>.inner>.lede{max-width:56ch}
.mq li{display:flex;align-items:center;gap:.3em;white-space:nowrap}
/* was a global colour crossfade: mid-reveal the whole line went half-grey on both black and ivory.
   difference-blend flips each glyph exactly at the square's edge — full contrast at every frame.
   .inner drops its z-index so the text blends with the fill, not with an isolated layer. */
.iris .inner{color:var(--ivory);z-index:auto}
.iris .inner h2,.iris .inner .lede{color:var(--ivory);mix-blend-mode:difference}
.iris .eyebrow{color:var(--gold)}
.stack-pin{margin:clamp(34px,6vh,64px) 0 clamp(24px,4vh,44px)}
.stack-pin .card-s h3{margin-top:14px;font-weight:300}
.stack-pin .card-s p{margin-top:12px;opacity:.72;max-width:52ch}
@media(min-width:760px){.grid.g3{grid-template-columns:repeat(3,1fr);gap:0 clamp(20px,4vw,60px)}
 .grid.g3>*{border-bottom:0;border-top:1px solid color-mix(in srgb,currentColor 14%,transparent)}}

/* ---- v15.1 header: one dark glass bar, no tone-tracking. legible over every section ---- */
#nav{background:color-mix(in srgb,var(--black) 52%,transparent);
 backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
 color:var(--ivory);border-bottom:0;padding-block:12px;
 padding-top:calc(12px + env(safe-area-inset-top,0px));gap:clamp(16px,4vw,48px)}
#nav::after{content:"";position:absolute;left:0;right:0;top:100%;height:26px;pointer-events:none;
 background:linear-gradient(color-mix(in srgb,var(--black) 26%,transparent),transparent)}
#nav .mark{flex:0 0 auto;opacity:1}
.nav-links{flex-wrap:nowrap;justify-content:flex-end;gap:clamp(14px,2vw,30px);
 font-size:11px;letter-spacing:.16em;white-space:nowrap}
#nav a{opacity:.68}
#nav a:hover,#nav a:focus-visible,#nav a.on{opacity:1}
#nav a.on{color:var(--gold)}
.burger{color:var(--ivory)}
@media(max-width:1080px){.nav-links{display:none}.burger{display:flex}}
@media(max-width:600px){#nav{padding-inline:clamp(18px,5vw,28px)}}
.menu{padding-top:calc(64px + env(safe-area-inset-top,0px));justify-content:center}
body.lock #nav{--ny:0}

/* ---- v15.2 footer: readable at phone width (the 2-col grey list) ---- */
footer{padding:clamp(56px,9vh,96px) var(--pad) calc(clamp(30px,5vh,48px) + env(safe-area-inset-bottom,0px));
 row-gap:clamp(30px,6vh,54px);align-items:start}
.foot-brand .mark-f{color:var(--ivory)}
.foot-nav{gap:2px clamp(20px,4vw,48px);font-size:15px}
.foot-nav a{opacity:.8;padding:9px 0;display:block;
 border-bottom:1px solid color-mix(in srgb,var(--ivory) 10%,transparent);
 transition:color .35s var(--ease),opacity .35s var(--ease),padding-left .35s var(--ease)}
.foot-nav a:hover,.foot-nav a:focus-visible{opacity:1;color:var(--gold);padding-left:6px}
.foot-end{opacity:.65;font-size:11px;align-items:baseline}
.foot-end a{color:var(--gold);opacity:.9}
@media(max-width:760px){
 footer{grid-template-columns:1fr}
 .foot-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(16px,5vw,32px)}
 }

/* footer sitemap is a <nav> too — never chrome, always in flow */
footer .foot-nav{position:static;z-index:auto;background:none;backdrop-filter:none;
 -webkit-backdrop-filter:none;transform:none;padding:0;border:0;color:inherit}
footer .foot-nav::after{content:none}

/* ================= v16 — alignment =================
   one gutter, one left edge, one vertical rhythm. --pad now also centres the
   content column on wide screens, so every block on every page shares an edge. */
:root{--max:1500px;--gut:clamp(20px,5.2vw,76px);--vpad:clamp(64px,10vh,124px)}
:root{--pad:max(var(--gut),calc((100% - var(--max)) / 2))}

section,main>.panel>section,main>.panel>section.tall{padding-block:var(--vpad)}
main>.panel>section.hero,.h-hero{padding-block:clamp(120px,17vh,190px) clamp(104px,16vh,150px)}
.pin-in>.inner,.rail .rail-head,.track,.railbar{padding-inline:var(--pad)}
.railbar{margin-inline:var(--pad);padding-inline:0}

/* labels: same block, same gap to the heading, every page */
.eyebrow{display:inline-flex;align-items:center;gap:.1em}
section>.eyebrow,.inner>.eyebrow,.rail-head>.eyebrow{display:flex;margin-bottom:clamp(14px,2.4vh,24px)}
.mt{margin-top:0}
h1+.lede,h2+.lede,h1+.aside,h2+.aside{margin-top:clamp(18px,2.6vh,30px)}

/* buttons sit on the same baseline as the copy above them */
.acts{margin-top:clamp(28px,4.4vh,48px)}
.acts .btn{margin-top:0}
section>.btn,.inner>.btn{margin-top:clamp(30px,4.6vh,50px)}

/* service rows: number is a label above the title, so titles start at the gutter */
.svc{grid-template-columns:1fr;gap:4px}
.svc .num,.svc>div{grid-column:1}
.svc .num{padding-top:0;display:block;margin-bottom:6px}
.svc p{margin-top:10px}

/* hero footer line can't collide with the buttons any more */

/* word-reveal masks were clipping descenders (y, p, g) */
.w{overflow:clip;padding-bottom:.14em;margin-bottom:-.14em}

/* stats + lists line up with the type above them */
.grid{margin-top:clamp(28px,4.6vh,54px)}
.grid>*{padding-inline:0}

/* footer on the same grid as the page */
footer{grid-template-columns:minmax(240px,1fr) minmax(0,1.6fr);column-gap:clamp(24px,6vw,96px)}
.foot-end{padding-top:26px}
@media(max-width:1000px){footer{grid-template-columns:1fr}}

/* ================= v17 — hero: centred, lines split on scroll ================= */
.h-hero{text-align:center;align-items:center}
.h-hero .eyebrow,.h-hero .acts{justify-content:center}
.h-hero h1,.h-hero .lede{margin-inline:auto}
/* top line drifts left and up, bottom line right and down, middle holds the centre */
.h-hero h1 .wipe{transform:translate3d(calc(var(--p,0) * var(--dx,0px)),calc(var(--p,0) * var(--dy,0px)),0);
 will-change:transform}
.h-hero h1 .wipe:nth-child(1){--dx:-22vw;--dy:-6vh}
.h-hero h1 .wipe:nth-child(2){--dx:0px;--dy:0px}
.h-hero h1 .wipe:nth-child(3){--dx:22vw;--dy:6vh}
.h-hero .acts{opacity:clamp(0,calc(1 - var(--p,0) * 1.6),1)}
.h-hero h1{letter-spacing:-.026em}
@media(max-width:860px){.h-hero h1 .wipe:nth-child(1){--dx:-30vw}.h-hero h1 .wipe:nth-child(3){--dx:30vw}}
@media(prefers-reduced-motion:reduce){.h-hero h1 .wipe{transform:none!important}
 .h-hero .acts{opacity:1}}

/* ================= v18 — icons ================= */
/* eyebrow was an inline-flex: the whitespace between "Narrata" and "An experiential
   house" was being dropped as flex whitespace. real gap instead. */
.eyebrow{gap:.5em}
.eyebrow .sq.g{margin-left:0;flex:0 0 auto}

.arw{display:inline-flex;align-items:center;margin-left:.8em;color:inherit;vertical-align:middle;flex:0 0 auto}
.arw i{display:block;height:1px;width:11px;background:currentColor;transition:width .45s var(--ease)}
.arw svg{width:7px;height:11px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:square;
 margin-left:-1px;transition:transform .45s var(--ease)}
.arw.sm{margin-left:.5em;opacity:0;transform:translateX(-4px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.arw.sm i{width:7px}
a:hover .arw i,a:focus-visible .arw i,.btn:hover .arw i,.btn:focus-visible .arw i{width:24px}
a:hover .arw svg,.btn:hover .arw svg{transform:translateX(3px)}
a:hover .arw.sm,a:focus-visible .arw.sm{opacity:1;transform:none}
.btn:active .arw i{width:15px}                       /* answers on press, not on release */
.svc .arw{color:var(--gold)}
.svc:hover .arw i{width:30px}

.ico{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;
 stroke-linejoin:round;opacity:.55;transition:opacity .4s var(--ease),transform .55s var(--ease),color .4s var(--ease)}
a:hover .ico{opacity:1;color:var(--gold)}
.mailto .ico,a[href^="mailto:"] .ico{width:.9em;height:.9em;margin-left:.5em;stroke-width:1.6;vertical-align:baseline}
a[href^="mailto:"]:hover .ico{transform:translate(2px,-2px)}

.cardx{position:relative;padding-top:clamp(56px,6vw,72px)}
.cardx .ico{position:absolute;top:clamp(20px,2.6vw,30px);right:clamp(20px,2.6vw,30px)}
.cardx:hover .ico{opacity:1;color:var(--gold);transform:translateY(-3px) rotate(-6deg) scale(1.06)}
.cardx .arw.corner{position:absolute;left:clamp(22px,3vw,34px);bottom:clamp(20px,2.6vw,30px);
 margin:0;color:var(--gold)}
.cardx:hover .arw.corner i{width:28px}
.cardx:hover .arw.corner svg{transform:translateX(3px)}
.cardx h3{margin-top:auto;padding-bottom:clamp(26px,3vw,38px)}

.foot-nav a{display:flex;align-items:center}
.menu a{display:flex;align-items:center}
.menu .arw.sm i{width:12px}
.menu .arw.sm svg{width:10px;height:15px}
@media(prefers-reduced-motion:reduce){
 .arw i,.arw svg,.ico,.arw.sm{transition:none}
 .arw.sm{opacity:1;transform:none}
}

/* ================= v19 — inner pages get the homepage's scroll grammar ================= */
main>.panel>section{position:relative;overflow:clip}

/* parallax uses `translate`, not `transform` — so it composes with the .r reveal
   instead of fighting it for the same property */
main>.panel>section .eyebrow{translate:calc((.5 - var(--p,.5)) * -26px) 0}
main>.panel>section h1,main>.panel>section h2{translate:0 calc((.5 - var(--p,.5)) * 40px)}
main>.panel>section .lede,main>.panel>section .pull{translate:0 calc((.5 - var(--p,.5)) * 66px)}
main>.panel>section .grid>*{translate:0 calc((.5 - var(--p,.5)) * 30px)}
main>.panel>section .btn{translate:0 calc((.5 - var(--p,.5)) * 18px)}

/* hero lifts, shrinks and fades out as you leave it */
main>.panel>section.hero h1{translate:0 calc(var(--p,0) * -76px);scale:calc(1 - var(--p,0)*.055)}
main>.panel>section.hero .lede{translate:0 calc(var(--p,0) * -44px)}
main>.panel>section.hero .aside{translate:0 calc(var(--p,0) * -56px)}
main>.panel>section.hero .eyebrow,main>.panel>section.hero .acts{translate:0;
 opacity:clamp(0,calc(1 - var(--p,0) * 1.5),1)}

/* rows draw their own rule and drift in, one at a time */
.svc,.post,.card{position:relative}
.svc,.post{border-top-color:transparent!important}
.svc::before,.post::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:currentColor;
 opacity:.3;transform:scaleX(clamp(0,calc(var(--p,0)*1.9 - .35),1));transform-origin:0 50%}
.svc h3,.post>*{translate:0 calc((.5 - var(--p,.5)) * 24px)}
.card{translate:0 calc((.5 - var(--p,.5)) * 34px)}
.fdr>div{translate:0 calc((.5 - var(--p,.5)) * 40px)}

@media(prefers-reduced-motion:reduce){
 main>.panel>section .eyebrow,main>.panel>section h1,main>.panel>section h2,
 main>.panel>section .lede,main>.panel>section .pull,main>.panel>section .grid>*,
 main>.panel>section .btn,.svc h3,.post>*,.card,.fdr>div{translate:none!important;scale:none!important}
 .svc::before,.post::before{transform:none}
 main>.panel>section.hero .eyebrow,main>.panel>section.hero .acts{opacity:1}
}

/* ================= v20 — hero foot in flow =================
   it was absolutely positioned at the bottom of the hero, so on any viewport where the
   centred content ran long it sat straight on top of the buttons. no absolute, no collision. */
.h-hero{padding-block:clamp(116px,16vh,180px) clamp(44px,7vh,80px)}
/* short windows: shrink the display type rather than let it fight the chrome */
@media(max-height:760px){
 .h-hero h1{font-size:clamp(32px,5.6vw,62px)}
 .h-hero{padding-block:clamp(96px,14vh,140px) clamp(32px,5vh,56px)}
}

/* ================= v21 ================= */
/* nav: scoping to #nav (v16) made `#nav ul{display:flex}` outrank `.nav-links{display:none}`,
   so phones got the full link row and no burger. match the specificity. */
@media(max-width:1080px){#nav .nav-links{display:none}#nav .burger{display:flex}}


/* cursor: the brand square */
#cur{border-radius:0;width:11px;height:11px}
#cur.big{--cs:3.4}

/* the thread: gold line connecting every section, drawn by scroll */
.thread{position:absolute;left:0;top:0;width:100%;overflow:visible;pointer-events:none;z-index:3}
.thread path{fill:none;stroke:var(--gold);stroke-width:1;stroke-linecap:square;vector-effect:non-scaling-stroke}
.thread .ghost{opacity:.14}
.thread-tip{position:absolute;left:0;top:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:var(--gold);
 z-index:4;pointer-events:none;opacity:0;transition:opacity .3s var(--ease);will-change:transform}
@media(prefers-reduced-motion:reduce){.thread-tip{display:none}}

/* ================= v23 — services rail as a dark breaker band ================= */
.rail,.rail .pin-in{background:var(--black);color:var(--ivory)}
/* the band sits over the gold thread, so the line passes behind it instead of through the cards */
.rail .pin-in{z-index:5;justify-content:center;gap:0}
.rail .rail-head{padding-top:0}
.rail .rail-head h2{max-width:none}
.track{padding-block:clamp(22px,4vh,40px) clamp(18px,3vh,30px)}
.railbar{background:color-mix(in srgb,var(--ivory) 16%,transparent)}

/* card: icon + number on top, title, copy with the arrow beside it — no dead middle */
.cardx{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto auto;
 min-height:clamp(250px,34vh,330px);padding:clamp(22px,2.4vw,32px);
 border-color:color-mix(in srgb,var(--ivory) 16%,transparent);
 background:color-mix(in srgb,var(--ivory) 3%,transparent);
 transition:background .45s var(--ease),color .45s var(--ease),transform .5s var(--ease),border-color .45s var(--ease)}
.cardx .ico{position:static;grid-column:1;grid-row:1;width:clamp(44px,4.2vw,56px);height:clamp(44px,4.2vw,56px);
 color:var(--gold);opacity:1;stroke-width:.9;transform-origin:30% 70%}
.cardx .num{grid-column:2;grid-row:1;align-self:start}
.cardx h3{grid-column:1/-1;grid-row:3;margin:clamp(18px,3vh,32px) 0 0;padding:0}
.cardx p{grid-column:1;grid-row:4;margin-top:10px;opacity:.7}
.cardx .arw.corner{position:static;grid-column:2;grid-row:4;align-self:end;justify-self:end;margin:0 0 5px 14px}

/* hover: card flips to ivory, icon stays gold and lifts */
.cardx:hover,.cardx:focus-visible{background:var(--ivory);color:var(--black);border-color:var(--ivory);transform:translateY(-6px)}
.cardx:hover .ico,.cardx:focus-visible .ico{color:var(--gold);transform:rotate(-8deg) scale(1.1)}
.cardx:hover p{opacity:.8}
.cardx:active{transform:translateY(-3px) scale(.985)}
@media(max-width:860px){.cardx{min-height:clamp(240px,40vh,320px)}}

/* ================= v24 — the real logo =================
   retraced from the original to single-colour vectors; drawn through a CSS mask so
   one file takes any colour via `color` (ivory in the nav, gold, black on light…). */
.logo{display:inline-block;background:currentColor;flex:0 0 auto}
.logo-word{-webkit-mask:url("img/narrata-wordmark.svg") center/contain no-repeat;mask:url("img/narrata-wordmark.svg") center/contain no-repeat;
 aspect-ratio:3012/316;height:clamp(12px,1.15vw,15px)}
.logo-lock{-webkit-mask:url("img/narrata-lockup.svg") center/contain no-repeat;mask:url("img/narrata-lockup.svg") center/contain no-repeat;
 aspect-ratio:3012/2108;width:clamp(140px,14vw,190px)}
#nav .mark{display:flex;align-items:center;min-height:44px;color:var(--ivory);opacity:1}
#nav a.mark.on{color:var(--ivory)}
#nav .mark:hover{color:var(--gold)}
.foot-brand .logo-lock{display:block;color:var(--ivory)}
.outro .mono{display:block;height:auto;aspect-ratio:1232/1540;color:var(--ivory);will-change:auto}

/* ================= v25 — intro film ================= */
html.intro-on,html.intro-on body{overflow:hidden;height:100%}
#intro{position:fixed;inset:0;z-index:100;background:#000;overflow:hidden;
 transform:translate3d(0,0,0);transition:transform 1.25s cubic-bezier(.76,0,.24,1)}
#intro.lift{transform:translate3d(0,-100%,0)}
/* gold edge rides the bottom of the curtain as it lifts — same line as the thread */
#intro::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);opacity:.8}
/* native 1080p, capped at its own pixels on desktop; bigger on phones so the mark reads.
   no mask, no opacity trick on the <video>: iOS Safari won't paint (or start) a masked or
   invisible video. the film's black is true #000, same as the curtain, so no edge shows. */
/* on phones the film is wider than the screen (so the mark reads). as a grid item it grew its
   auto column from the left edge and hung off to the right; absolute + translate centres the overflow. */
#intro video,#intro img{position:absolute;left:50%;top:50%;translate:-50% -50%;
 display:block;max-width:none;height:auto;width:min(max(100vw,118vh),1920px)}
#intro{touch-action:none}
.intro-skip{position:absolute;right:var(--pad);bottom:calc(18px + env(safe-area-inset-bottom,0px));min-height:44px;padding:0 4px;
 background:none;border:0;color:var(--ivory);font:500 10px/1 var(--text);letter-spacing:.3em;text-transform:uppercase;
 opacity:0;cursor:pointer;animation:skipin .6s var(--ease) 1.6s forwards;touch-action:manipulation}
.intro-skip:hover{opacity:1!important;color:var(--gold)}
@keyframes skipin{to{opacity:.6}}
#cur{z-index:120}
@media(prefers-reduced-motion:reduce){#intro{transition:opacity .5s linear}#intro.lift{transform:none;opacity:0}}
/* the end-frame fallback carries `hidden`, but `display:block` above outranks the UA's [hidden] rule —
   so the opaque still sat on top of the video from the first frame. */
#intro [hidden]{display:none!important}

/* menu email: `.menu a` (big display serif, 30–46px) outranked `.menu-mail{font-size:12px}`,
   so the address rendered at headline size and ran off the screen. */
.menu .menu-mail{font-family:var(--text);font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.12em;
 display:inline-flex;align-items:center;max-width:100%;overflow-wrap:anywhere;min-height:44px}

/* ================= v26 — swipe rail on touch ================= */
@media (hover:none) and (pointer:coarse), (prefers-reduced-motion:reduce){
 .rail{height:auto!important}
 .rail .pin-in{position:relative;height:auto;padding-block:clamp(72px,11vh,110px) clamp(40px,6vh,64px)}
 .track{transform:none!important;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .track::-webkit-scrollbar{display:none}
 .track::after{content:"";flex:0 0 1px}          /* keeps the end padding inside the scroll area on older Safari */
 .cardx{scroll-snap-align:start}
 .cardx:hover{transform:none}                     /* no sticky lift after a tap */
}

/* ================= v27 — founders on the homepage ================= */
section.white{background:#fff;color:var(--black)}
.founders h2{max-width:24ch}
.founders .fdr>div{position:relative;padding-top:clamp(20px,3vh,30px)}
/* each founder draws their own gold rule as they arrive */
.founders .fdr>div::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--gold);
 transform:scaleX(clamp(0,calc(var(--p,0)*2 - .35),1));transform-origin:0 50%}
/* counter-parallax: the second founder travels further, so the pair separates in depth */
.founders .fdr>div:nth-child(2){translate:0 calc((.5 - var(--p,.5)) * 110px)}
.founders .btn{margin-top:clamp(40px,6vh,64px)}
@media(max-width:860px){.founders .fdr>div:nth-child(2){translate:0 calc((.5 - var(--p,.5)) * 40px)}}
@media(prefers-reduced-motion:reduce){.founders .fdr>div::before{transform:none}.founders .fdr>div:nth-child(2){translate:none}}