:root{
  --paper:#F4EEE3;
  --paper-2:#ECE3D3;
  --ink:#241C13;
  --ink-soft:#5A4E3F;
  --ink-faint:#8C7C68;
  --taupe:#A8978A;
  --line:#DBCFBC;
  --sand:#C7A977;
  --sand-deep:#9F7B3B;
  --sand-soft:#DAC9A6;
  --brown:#2C2015;
  --brown-2:#3A2B1B;
  --brown-deep:#211710;
  --on-dark:#ECE3D4;
  --on-dark-soft:#C6B9A4;
  --on-dark-faint:#998C78;
  --maxw:1560px;
  --gutter:clamp(22px, 5vw, 88px);
  --serif:'Fraunces', Georgia, serif;
  --sans:'Hanken Grotesk', system-ui, sans-serif;
  --e-out:cubic-bezier(0.16,1,0.3,1);
  --e-soft:cubic-bezier(0.22,1,0.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);font-size:17.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--sand);color:var(--ink)}

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.018em}
.display{font-size:clamp(2.9rem,7.2vw,6.4rem);font-weight:300;line-height:.98}
.h2{font-size:clamp(2.1rem,4.6vw,3.8rem);font-weight:300;line-height:1.05}
.it{font-style:italic}
.serif-accent{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--sand-deep)}
.kicker{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint)}
.lead{font-size:clamp(1.12rem,1.4vw,1.34rem);line-height:1.55;color:var(--ink-soft)}

.mask{display:block;overflow:hidden;padding-block:.04em}
.mask>span{display:block;will-change:transform}
.fade{opacity:0;transform:translateY(28px);will-change:transform,opacity}

.btn{position:relative;display:inline-flex;align-items:center;gap:.6rem;font-family:var(--sans);font-size:15px;font-weight:600;
  padding:1rem 1.75rem;border-radius:100px;cursor:pointer;border:1px solid transparent;
  transition:transform .18s var(--e-out),background-color .4s var(--e-soft),color .4s var(--e-soft),border-color .4s;will-change:transform}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--brown);color:var(--paper)}
.btn-primary:hover{background:var(--brown-2)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--sand-deep);color:var(--sand-deep)}
.btn-sand{background:var(--sand);color:var(--ink)}
.btn-sand:hover{background:var(--sand-soft)}
.btn .ar{transition:transform .4s var(--e-out)}
.btn:hover .ar{transform:translateX(5px)}

header{position:fixed;inset:0 0 auto 0;z-index:60;transition:background-color .5s var(--e-soft),box-shadow .5s,padding .5s var(--e-soft)}
.nav{display:flex;align-items:center;justify-content:space-between;padding-block:24px}
header.small .nav{padding-block:13px}
header.small{background:rgba(244,238,227,.82);backdrop-filter:blur(14px) saturate(1.1);box-shadow:0 1px 0 var(--line)}
.logo img{height:42px;width:auto;display:block;transition:height .5s var(--e-soft)}
header.small .logo img{height:36px}
.nav-r{display:flex;align-items:center;gap:38px}
.nav-r a.l{font-size:15px;font-weight:500;color:var(--ink-soft);position:relative;transition:color .3s}
.nav-r a.l::after{content:"";position:absolute;left:0;bottom:-5px;height:1.5px;width:0;background:var(--sand-deep);transition:width .4s var(--e-out)}
.nav-r a.l:hover{color:var(--ink)}.nav-r a.l:hover::after{width:100%}
.burger{display:none;background:none;border:0;color:var(--ink);cursor:pointer}

/* HERO 50/50 */
.hero{position:relative;min-height:100dvh;display:flex;align-items:center;padding-top:128px;padding-bottom:70px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);align-items:center;width:100%}
.hero h1{margin:0 0 28px}
.hero-sub{max-width:520px}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:38px}
.hero-foot{margin-top:44px;display:flex;align-items:center;gap:14px;color:var(--ink-faint);font-size:14.5px;max-width:440px}
.hero-foot .pl{width:28px;height:1px;background:var(--sand-deep);flex:none}
.hero-art{position:relative;display:flex;justify-content:center;align-items:center;min-height:min(74vh,680px)}
.hero-spiral{position:absolute;width:min(40vw,560px);height:auto;color:var(--sand);overflow:visible;z-index:1}
.hero-spiral .ring{stroke:var(--sand-deep)}
.hero-photo{position:relative;z-index:2;width:min(74%,440px);aspect-ratio:3/4;border-radius:240px 240px 8px 8px;overflow:hidden;box-shadow:0 44px 90px -44px rgba(44,32,21,.5)}
.hero-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.93) contrast(1.02)}
.scrollcue{position:absolute;left:var(--gutter);bottom:30px;display:flex;align-items:center;gap:12px;color:var(--ink-faint);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;z-index:3}
.scrollcue .bar{position:relative;width:34px;height:1px;background:var(--line);overflow:hidden}
.scrollcue .bar::after{content:"";position:absolute;inset:0;background:var(--sand-deep);transform:translateX(-100%);animation:cue 2.4s var(--e-soft) infinite}
@keyframes cue{0%{transform:translateX(-100%)}50%{transform:translateX(0)}100%{transform:translateX(100%)}}

/* MANIFESTO */
.manifesto{padding-block:clamp(64px,8vh,116px);position:relative}
.manifesto .big{font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,4.2vw,3.4rem);line-height:1.2;letter-spacing:-.015em;color:var(--ink);max-width:1240px}
.manifesto .big .w{transition:none}
.manifesto .close{margin-top:48px;display:flex;align-items:center;gap:18px}
.manifesto .close .dot{width:8px;height:8px;border-radius:50%;background:var(--sand-deep);flex:none}
.manifesto .close span{font-family:var(--sans);font-size:15px;letter-spacing:.04em;color:var(--ink-soft)}

/* OUTCOMES */
.outcomes{padding-block:clamp(80px,11vh,140px);background:var(--paper-2)}
.out-head{max-width:760px;margin-bottom:clamp(46px,6vw,78px)}
.out-head .h2{margin-top:22px}
.out-list{display:flex;flex-direction:column}
.out-row{display:grid;grid-template-columns:96px 1fr;gap:clamp(20px,4vw,60px);padding:clamp(28px,3.6vw,44px) 0;border-top:1px solid var(--line);align-items:baseline}
.out-row:last-child{border-bottom:1px solid var(--line)}
.out-row .num{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.4rem,2.4vw,2rem);color:var(--sand-deep)}
.out-row .body{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(18px,4vw,60px);align-items:baseline}
.out-row h3{font-size:clamp(1.5rem,3vw,2.3rem);font-weight:300}
.out-row .lbl{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px;display:block}
.out-row p{color:var(--ink-soft);font-size:16.5px;line-height:1.55}
@media(max-width:760px){.out-row .body{grid-template-columns:1fr;gap:12px}}

/* SYSTEM — sliding cards */
.system{background:var(--brown);color:var(--on-dark);position:relative;overflow:hidden}
.sys-intro{padding-block:clamp(70px,9vh,116px) clamp(30px,4vh,46px)}
.sys-intro .h2{max-width:18ch}
.sys-intro .kicker{color:var(--sand-soft)}
.sys-intro .h2{color:var(--on-dark);margin-top:22px}
.sys-intro .lead{color:var(--on-dark-soft);margin-top:24px;max-width:640px}
.sys-pin{height:100vh;display:flex;align-items:center;overflow:hidden}
.sys-track{display:flex;align-items:stretch;gap:clamp(22px,2.4vw,40px);padding-inline:clamp(22px,8vw,140px);width:max-content;will-change:transform}
.card{flex:none;width:clamp(260px,26vw,360px);display:flex;flex-direction:column}
.card .ci{position:relative;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:var(--brown-2)}
.card .ci img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.96);transition:transform 1s var(--e-out)}
.card:hover .ci img{transform:scale(1.06)}
.card .ci .cn{position:absolute;top:16px;left:18px;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--sand-soft);z-index:2}
.card .ci::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,23,16,.05),rgba(33,23,16,.45));z-index:1}
.card .ct{font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,2.4vw,2.2rem);color:var(--on-dark);margin-top:18px}
.card .cd{font-size:14.5px;color:var(--on-dark-soft);line-height:1.5;margin-top:10px}
.sys-foot{position:absolute;left:var(--gutter);bottom:30px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-faint);z-index:2}

/* CASES */
.cases{padding-block:clamp(90px,13vh,160px)}
.cases-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:clamp(46px,6vw,84px);flex-wrap:wrap}
.cases-head .lead{max-width:360px}
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,64px)}
.case-card{display:flex;flex-direction:column}
.case-card .media{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:6px;background:var(--paper-2);margin-bottom:28px}
.case-card .media .reveal-cover{position:absolute;inset:0;background:var(--paper);z-index:2;transform-origin:bottom}
.case-card .media img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);will-change:transform;filter:saturate(.9)}
.case-card .kx{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sand-deep)}
.case-card h3{font-size:clamp(1.5rem,2.4vw,2.05rem);font-weight:300;margin:14px 0 14px}
.case-card .cc-desc{color:var(--ink-soft);font-size:16.5px;line-height:1.55}
.case-card blockquote{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.4;color:var(--ink);padding-left:18px;border-left:1.5px solid var(--sand);margin-top:20px}
.case-card .cc-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn-sm{padding:.72rem 1.3rem;font-size:14px}

/* FOUNDERS */
.founders{padding-block:clamp(80px,11vh,150px);background:var(--paper-2)}
.f-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:end;margin-bottom:clamp(50px,6vw,84px)}
.f-cta{margin-top:30px}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px)}
.person .ph{display:flex;align-items:center;gap:18px;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:22px}
.person .av{width:60px;height:60px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-size:22px;color:var(--paper);background:var(--brown)}
.person:nth-child(2) .av{background:var(--sand-deep)}
.person .nm{font-family:var(--serif);font-size:1.55rem;font-weight:400;line-height:1.1}
.person .ro{font-size:13.5px;color:var(--ink-faint);margin-top:4px}
.person p{color:var(--ink-soft);font-size:16.5px;line-height:1.62}
.f-stats{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:clamp(50px,6vw,80px);border-top:1px solid var(--line);padding-top:40px}
.f-stats .big{font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,4.6vw,3.6rem);line-height:1;color:var(--ink)}
.f-stats .lb{color:var(--ink-soft);font-size:16px;margin-top:14px;max-width:40ch}

/* CONTACT */
.contact{background:var(--brown);color:var(--on-dark);position:relative;overflow:hidden;padding-block:clamp(90px,13vh,160px)}
.contact .coil{position:absolute;right:-130px;top:50%;transform:translateY(-50%);width:min(46vw,600px);color:rgba(218,201,166,.14);pointer-events:none}
.c-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:start;position:relative;z-index:2}
.contact .kicker{color:var(--sand-soft)}
.contact .h2{color:var(--on-dark);margin-top:22px}
.contact .lead{color:var(--on-dark-soft);margin-top:24px;max-width:32ch}
.c-direct{margin-top:34px;font-size:16px;color:var(--on-dark-soft)}
.c-direct a{color:var(--sand-soft);border-bottom:1px solid rgba(218,201,166,.4)}
.c-direct a:hover{border-color:var(--sand-soft)}
.form{display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:13px;font-weight:600;letter-spacing:.05em;color:var(--on-dark-soft)}
.field input,.field textarea{font-family:var(--sans);font-size:16px;color:var(--paper);background:rgba(244,238,227,.05);border:1px solid rgba(218,201,166,.26);border-radius:5px;padding:14px 16px;transition:border-color .3s,background .3s}
.field input::placeholder,.field textarea::placeholder{color:#94886F}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--sand);background:rgba(244,238,227,.09)}
.form .btn-sand{justify-content:center;margin-top:6px}
.form .nt{font-size:13px;color:#9C8F77}
.form-ok{display:none;background:rgba(218,201,166,.1);border:1px solid rgba(218,201,166,.32);padding:22px;border-radius:5px;font-family:var(--serif);font-style:italic;font-size:18px;color:var(--sand-soft)}

/* FOOTER */
footer{background:var(--brown-deep);color:var(--on-dark-soft);padding-block:clamp(54px,7vw,84px) 34px}
.f2{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding-bottom:46px;border-bottom:1px solid rgba(218,201,166,.14)}
.f2 .br img{height:40px;filter:brightness(0) invert(1);opacity:.92}
.f2 .br p{margin-top:16px;font-size:15px;color:var(--on-dark-faint);max-width:32ch;line-height:1.6}
.f2 h4{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-faint);margin-bottom:16px}
.f2 a,.f2 .ln{display:block;font-size:15px;color:var(--on-dark-soft);margin-bottom:11px}
.f2 a:hover{color:var(--sand-soft)}
.fb{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:26px;font-size:13.5px;color:#807460}

@media(max-width:1000px){
  .hero-grid,.f-top,.f-grid,.f-stats,.c-grid,.f2{grid-template-columns:1fr}
  .hero-art{min-height:54vh;order:2}.hero-photo{width:min(70%,360px)}.hero-spiral{width:62vw}
  .out-row{grid-template-columns:54px 1fr;gap:18px}
}
@media(max-width:720px){
  body{font-size:16px}
  .case-grid{grid-template-columns:1fr;gap:40px}
  .nav-r{position:fixed;inset:0 0 0 auto;width:min(82vw,330px);background:var(--paper);flex-direction:column;align-items:flex-start;justify-content:center;gap:30px;padding:0 44px;transform:translateX(100%);transition:transform .55s var(--e-out);box-shadow:-30px 0 60px -40px rgba(44,32,21,.5);z-index:55}
  .nav-r.open{transform:none}.burger{display:inline-flex;z-index:56}
  .scrollcue{display:none}
  .logo img{height:36px}
}
/* PAGE-INTRO (sub-pages hero) */
.page-intro{padding-block:clamp(150px,18vh,220px) clamp(50px,7vw,90px);position:relative}
.page-intro .display{margin-top:24px;font-size:clamp(2.4rem,5.5vw,4.6rem);max-width:18ch}
.page-intro .intro-sub{margin-top:30px;max-width:640px}

/* PILLAR (services overview rows) */
.pillar{padding-block:clamp(70px,9vw,130px);border-top:1px solid var(--line)}
.pillar:nth-of-type(even){background:var(--paper-2)}
.pillar-grid{display:grid;grid-template-columns:.85fr 1.4fr;gap:clamp(40px,6vw,110px);align-items:start}
.pillar-head .kicker{color:var(--sand-deep)}
.pillar-head .h2{margin-top:18px;font-size:clamp(1.9rem,3.4vw,2.9rem)}
.pillar-head .lead{margin-top:18px;max-width:32ch}
.pillar-list{display:flex;flex-direction:column}
.service{padding:32px 0;border-top:1px solid var(--line)}
.service:first-child{border-top:0;padding-top:0}
.service h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.45rem,2.1vw,1.95rem);margin-bottom:14px;line-height:1.18;letter-spacing:-.012em}
.service p{color:var(--ink-soft);font-size:16.5px;line-height:1.6}
.service .more{display:inline-flex;align-items:center;gap:.5rem;margin-top:16px;font-size:14.5px;font-weight:500;color:var(--sand-deep);border-bottom:1px solid currentColor;padding-bottom:2px;transition:color .25s}
.service .more:hover{color:var(--ink)}
.service .more .ar{transition:transform .3s var(--e-out)}
.service .more:hover .ar{transform:translateX(4px)}
@media(max-width:900px){.pillar-grid{grid-template-columns:1fr;gap:34px}}

/* CTA-STRIP (sub-page bottom CTA) */
.cta-strip{padding-block:clamp(80px,11vh,130px);background:var(--brown);color:var(--on-dark);position:relative;overflow:hidden}
.cta-strip .h2{color:var(--on-dark);max-width:22ch}
.cta-strip .lead{color:var(--on-dark-soft);margin-top:22px;max-width:46ch}
.cta-strip .cta-row{margin-top:38px;display:flex;flex-wrap:wrap;gap:13px}
.cta-strip .btn-primary{background:var(--sand);color:var(--ink)}
.cta-strip .btn-primary:hover{background:var(--sand-soft)}

@media (prefers-reduced-motion:reduce){
  .fade{opacity:1!important;transform:none!important}
  .mask>span{transform:none!important}
  .scrollcue .bar::after{animation:none}
}