/* JaseJTG — homepage v2 (stage 1). Tokens first; nothing below uses a raw value that isn't here. */
@font-face{font-family:"Space Grotesk";font-weight:300;font-display:swap;src:url(/fonts/SpaceGrotesk-300.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:400;font-display:swap;src:url(/fonts/SpaceGrotesk-400.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:500;font-display:swap;src:url(/fonts/SpaceGrotesk-500.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:700;font-display:swap;src:url(/fonts/SpaceGrotesk-700.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-weight:400;font-display:swap;src:url(/fonts/DMSans-400.woff2) format("woff2")}

:root{
  --ink:#0A0A0A; --ink-soft:#141414; --paper:#F2F1EE; --white:#FFFFFF; --dot:#FF5500;
  --on-ink:#EDEDEA; --on-ink-muted:#8C8C88; --on-paper-muted:#6A6A66;
  --rule-ink:rgba(237,237,234,.16); --rule-paper:rgba(10,10,10,.14);
  --f-d:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-b:"DM Sans","Helvetica Neue",Arial,sans-serif;
  --t-cap:clamp(.75rem,.72rem + .12vw,.82rem);
  --t-body:clamp(1rem,.96rem + .2vw,1.1rem);
  --t-lead:clamp(1.15rem,1rem + .6vw,1.5rem);
  --t-h3:clamp(1.35rem,1.1rem + 1vw,2rem);
  --t-h2:clamp(2.2rem,1.3rem + 3.6vw,4.8rem);
  --t-manifesto:clamp(1.7rem,1rem + 2.9vw,4rem);
  --t-hero:clamp(2.5rem,1.1rem + 5.3vw,7rem);
  --t-index:clamp(2rem,1.1rem + 4vw,5.6rem);
  --s1:.5rem;--s2:1rem;--s3:1.5rem;--s4:2.5rem;--s5:4rem;--s6:6.5rem;--s7:10rem;
  --g:clamp(1.25rem,4vw,4rem);
  --ease:cubic-bezier(.22,.8,.2,1);
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px);background:var(--ink)}
*,*::before,*::after{box-sizing:inherit;margin:0}
body{background:var(--paper);color:var(--ink);font:400 var(--t-body)/1.6 var(--f-b);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
.dot{color:var(--dot)}
.cap{font:500 var(--t-cap)/1.3 var(--f-d);letter-spacing:.01em}
.skip{position:absolute;left:-999px}.skip:focus{left:var(--g);top:var(--s2);z-index:99;background:var(--white);padding:.6rem 1rem}
:focus-visible{outline:2px solid var(--dot);outline-offset:3px}

/* ---- header ---- */
.hd{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;align-items:center;gap:var(--s4);padding:calc(var(--s3) + env(safe-area-inset-top,0px)) var(--g) var(--s3);color:var(--on-ink);transition:transform .5s var(--ease),background .4s,color .4s}
.hd.on-paper{color:var(--ink);background:rgba(242,241,238,.92);backdrop-filter:blur(8px)}
.hd.hide{transform:translateY(-100%)}
.logo{font:700 1.5rem/1 var(--f-d);letter-spacing:-.05em;text-decoration:none}
.nav{display:flex;gap:var(--s3);margin-left:auto}
.nav a,.hd .talk{font:500 var(--t-cap)/1 var(--f-d);text-decoration:none;opacity:.72;transition:opacity .2s}
.nav a:hover,.hd .talk:hover{opacity:1}
.hd .talk{opacity:1;border-bottom:1px solid currentColor;padding-bottom:.2rem}
.menu{display:none;background:none;border:0;color:inherit;font:500 var(--t-cap)/1 var(--f-d);cursor:pointer;padding:.5rem 0}

/* ---- hero (ink) ---- */
.hero{background:var(--ink);color:var(--on-ink);position:relative;padding:calc(var(--s6) + var(--s2)) var(--g) 0}
.hero::before,.hero::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--rule-ink)}
.hero::before{left:var(--g)}.hero::after{right:var(--g)}
.hero-top{display:flex;justify-content:space-between;gap:var(--s3);color:var(--on-ink-muted);padding:0 var(--s3) var(--s4)}
.hero h1{font:400 var(--t-hero)/.96 var(--f-d);letter-spacing:-.045em;padding:0 var(--s3);max-width:23ch;text-wrap:balance}
.hero h1 b{font-weight:700}
.hero-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:var(--s4);align-items:end;padding:var(--s4) var(--s3) var(--s4)}
.hero-row p{color:var(--on-ink-muted);max-width:30ch;font-size:var(--t-lead);line-height:1.4}
.hero-row p strong{color:var(--on-ink);font-weight:400}
.cta{display:inline-flex;align-items:center;justify-content:space-between;gap:var(--s4);width:100%;font:500 var(--t-body)/1 var(--f-d);text-decoration:none;padding:1.15rem 0;border-top:1px solid currentColor;border-bottom:1px solid currentColor;transition:padding .35s var(--ease)}
.cta:hover{padding-left:.6rem;padding-right:.6rem}
.cta i{font-style:normal}
.feature{position:relative;margin:0 calc(var(--s3) * -0) 0;padding:0 0 var(--s6)}
.feature a{display:block;text-decoration:none}
.feature .frame{overflow:hidden;background:var(--ink-soft)}
.feature img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top;transform:scale(1.04);transition:transform 1.4s var(--ease)}
.feature a:hover img{transform:scale(1)}
.caption{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s2) var(--s3) 0;color:var(--on-ink-muted)}
.caption b{color:var(--on-ink);font-weight:500}

/* ---- manifesto (ink) ---- */
.manifesto{background:var(--ink);color:var(--on-ink);padding:var(--s5) var(--g) var(--s7);border-top:1px solid var(--rule-ink)}
.manifesto .cap{color:var(--on-ink-muted);display:block;margin-bottom:var(--s4)}
.manifesto p{font:400 var(--t-manifesto)/1.14 var(--f-d);letter-spacing:-.03em;max-width:24ch;text-indent:22%}
.manifesto p span{color:var(--on-ink-muted)}

/* ---- selected work (paper) ---- */
.sec{padding:var(--s6) var(--g)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s3);row-gap:var(--s2);align-items:end;padding-bottom:var(--s3);border-bottom:1px solid var(--rule-paper);margin-bottom:var(--s5)}
.sec-head h2{font:400 var(--t-h2)/1 var(--f-d);letter-spacing:-.04em}
.sec-head a{justify-self:start;font:500 var(--t-cap)/1 var(--f-d);text-decoration:none;border-bottom:1px solid;padding-bottom:.2rem}
.work{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s3);row-gap:var(--s6)}
.w a{display:block;text-decoration:none}
.w .frame{overflow:hidden;background:#E3E2DE}
.w img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform 1.2s var(--ease)}
.w a:hover img{transform:scale(1.035)}
.w .caption{padding:var(--s2) 0 0;color:var(--on-paper-muted)}
.w .caption b{color:var(--ink)}
.w:nth-child(1){grid-column:1 / span 7}
.w:nth-child(2){grid-column:9 / span 4;margin-top:var(--s7)}
.w:nth-child(3){grid-column:2 / span 5}
.w:nth-child(4){grid-column:7 / span 6;margin-top:var(--s5)}

/* ---- index (paper) ---- */
.index ol{list-style:none;padding:0}
.index .sec-head{border-bottom:1px solid var(--ink);margin-bottom:0}
.index li a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,14rem) 4rem;gap:var(--s3);align-items:baseline;padding:.55rem 0 .7rem;border-bottom:1px solid var(--rule-paper);text-decoration:none}
.index .t{font:400 var(--t-index)/1 var(--f-d);letter-spacing:-.045em;transition:transform .45s var(--ease),color .3s}
.index .k,.index .c{color:var(--on-paper-muted)}
.index .c{text-align:right}
.index li a:hover .t{transform:translateX(.6rem)}
.index ol:hover li a .t{color:rgba(10,10,10,.28)}
.index ol:hover li a:hover .t{color:var(--ink)}
.peek{position:fixed;left:0;top:0;width:min(30vw,26rem);aspect-ratio:16/10;pointer-events:none;z-index:25;opacity:0;transform:translate(-50%,-55%) scale(.92);transition:opacity .25s,transform .45s var(--ease);background:#ddd center top/cover no-repeat}
.peek.on{opacity:1;transform:translate(-50%,-55%) scale(1)}

/* ---- services (paper) ---- */
.svc{list-style:none;padding:0}
.svc li{display:grid;grid-template-columns:4rem minmax(0,1.2fr) minmax(0,1fr) auto;gap:var(--s3);align-items:baseline;padding:var(--s4) 0;border-bottom:1px solid var(--rule-paper)}
.svc .n{color:var(--on-paper-muted)}
.svc h3{font:400 var(--t-h3)/1.1 var(--f-d);letter-spacing:-.025em}
.svc p{color:var(--on-paper-muted);max-width:40ch}
.svc a{font:500 var(--t-cap)/1 var(--f-d);text-decoration:none;border-bottom:1px solid;padding-bottom:.2rem;white-space:nowrap}

/* ---- two bases (paper) ---- */
.bases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--ink)}
.base{padding:var(--s4) var(--s3) var(--s4) 0}
.base + .base{border-left:1px solid var(--rule-paper);padding-left:var(--s3)}
.base h3{font:400 var(--t-h2)/1 var(--f-d);letter-spacing:-.04em;margin:var(--s2) 0 var(--s3)}
.base p{color:var(--on-paper-muted);max-width:38ch}
.base ul{list-style:none;padding:0;margin-top:var(--s3);display:flex;flex-wrap:wrap;gap:.2rem 1.1rem}
.base li{font:500 var(--t-cap)/1.8 var(--f-d)}

/* ---- contact (ink) ---- */
.contact{background:var(--ink);color:var(--on-ink);padding:var(--s7) var(--g) var(--s4)}
.contact h2{font:400 var(--t-hero)/.96 var(--f-d);letter-spacing:-.045em;max-width:12ch}
.contact-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:var(--s4);align-items:end;margin-top:var(--s5)}
.contact .mail{font:400 var(--t-h3)/1.2 var(--f-d);letter-spacing:-.02em;text-decoration:none;border-bottom:1px solid var(--rule-ink)}
.contact .mail:hover{border-color:var(--on-ink)}
.contact p{color:var(--on-ink-muted);margin-bottom:var(--s3)}
.ft{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--s4);margin-top:var(--s7);padding-top:var(--s3);border-top:1px solid var(--rule-ink);color:var(--on-ink-muted)}
.ft nav{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem}
.ft a{text-decoration:none}.ft a:hover{color:var(--on-ink)}

/* ---- reveal ---- */
.rv{opacity:0;transform:translateY(2.2rem);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}
.clip .frame{clip-path:inset(12% 0 0 0);transition:clip-path 1.3s var(--ease)}
.clip.in .frame{clip-path:inset(0 0 0 0)}
.hero h1 .w8{display:inline-block;opacity:0;transform:translateY(.35em);animation:rise 1.1s var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}

/* ---- mobile ---- */
@media (max-width:860px){
  .nav,.hd .talk{display:none}
  .menu{display:block;margin-left:auto}
  .nav.open{display:flex;position:fixed;inset:0;flex-direction:column;justify-content:center;gap:var(--s3);padding:var(--g);background:var(--ink);color:var(--on-ink);z-index:-1}
  .nav.open a{font:400 2.4rem/1 var(--f-d);letter-spacing:-.04em;opacity:1}
  .hero{padding-top:calc(var(--s6) + var(--s3))}
  .hero::before,.hero::after{display:none}
  .hero-top,.hero h1,.hero-row,.caption{padding-left:0;padding-right:0}
  .hero-top span:last-child{display:none}
  .hero-row,.contact-row,.sec-head{grid-template-columns:1fr}
  .manifesto p{text-indent:0}
  .work{grid-template-columns:1fr;row-gap:var(--s5)}
  .w:nth-child(n){grid-column:1 / -1;margin-top:0}
  .w:nth-child(2n) .frame{margin-left:14%}
  .w:nth-child(2n) .caption{padding-left:14%}
  .index li a{grid-template-columns:minmax(0,1fr) auto}
  .index .k{display:none}
  .peek{display:none}
  .svc li{grid-template-columns:2.4rem minmax(0,1fr);row-gap:.5rem}
  .svc p,.svc a{grid-column:2}
  .bases{grid-template-columns:1fr}
  .base + .base{border-left:0;border-top:1px solid var(--rule-paper);padding-left:0}
  .ft{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.hero h1 .w8{opacity:1;transform:none}
  .clip .frame{clip-path:none}
}

/* ---- stage 1, round 2 ---- */
.num{grid-column:1 / -1;color:var(--on-paper-muted)}
.manifesto .num{color:var(--on-ink-muted)}
.clocks{display:flex;gap:var(--s3);margin-left:var(--s4);opacity:.6}
.clocks b{font-weight:500;font-variant-numeric:tabular-nums}
.avail i{display:none}
.ctas{display:grid;gap:0}
.ctas .cta-2{border-top:0;color:var(--on-ink-muted)}
.ctas .cta-2:hover{color:var(--on-ink)}
.cta i{transition:transform .35s var(--ease)}
.cta:hover i{transform:translateX(.3rem)}
.cta-2:hover i{transform:translateY(.2rem)}
.feature .frame img{transform:scale(1.1);transition:none;will-change:transform}
.lightup{font:400 var(--t-manifesto)/1.14 var(--f-d);letter-spacing:-.03em;max-width:22ch}
.lightup .wd{color:rgba(237,237,234,.2);transition:color .35s var(--ease)}
.lightup .wd.on{color:var(--on-ink)}
.manifesto .sub{font:400 var(--t-lead)/1.45 var(--f-b);letter-spacing:0;text-indent:0;color:var(--on-ink-muted);max-width:38ch;margin-top:var(--s4);margin-left:auto;margin-right:8%}
.manifesto p{text-indent:0}
.also{margin-top:var(--s6);border-top:1px solid var(--ink);padding-top:var(--s3);display:grid;grid-template-columns:minmax(0,12rem) minmax(0,1fr);gap:var(--s3)}
.also p{color:var(--on-paper-muted)}
.also ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.1rem .9rem}
.also li{font:400 var(--t-h3)/1.25 var(--f-d);letter-spacing:-.025em}
.also li:not(:last-child)::after{content:",";color:var(--on-paper-muted)}
.also a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ease)}
.also a:hover{background-size:100% 1px}
.score{align-self:end;color:var(--on-paper-muted)}
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.q{border-top:1px solid var(--ink);padding-top:var(--s3);display:flex;flex-direction:column;justify-content:space-between;gap:var(--s4)}
.q blockquote{font:400 clamp(1.2rem,1rem + .8vw,1.7rem)/1.3 var(--f-d);letter-spacing:-.02em}
.q figcaption{color:var(--on-paper-muted)}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.steps li{border-top:1px solid var(--ink);padding-top:var(--s3)}
.steps .cap{color:var(--on-paper-muted)}
.steps h3{font:400 var(--t-h3)/1.1 var(--f-d);letter-spacing:-.025em;margin:var(--s2) 0 var(--s2)}
.steps p{color:var(--on-paper-muted);max-width:34ch}
.price{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--rule-paper);font:400 var(--t-lead)/1.4 var(--f-d);letter-spacing:-.015em}
.price b{font-weight:500}
.price a{font:500 var(--t-cap)/1 var(--f-d);margin-left:var(--s2);white-space:nowrap}
body.locked{overflow:hidden}
.curtain{display:none}
.intro .curtain{display:grid;place-items:center;position:fixed;inset:0;z-index:100;background:var(--ink);color:var(--on-ink);transition:transform .75s var(--ease)}
.intro .curtain span{font:700 clamp(2.4rem,1.6rem + 3vw,4.4rem)/1 var(--f-d);letter-spacing:-.05em;opacity:0;animation:cin .5s var(--ease) .05s forwards}
.intro .curtain i{font-style:normal;color:var(--dot);display:inline-block;transform:scale(0);animation:dotin .35s var(--ease) .45s forwards}
.intro-out .curtain{transform:translateY(-100%)}
.hero h1 .w8{animation-delay:calc(var(--d) + var(--intro,0s))}
.intro{--intro:1.05s}
@keyframes cin{to{opacity:1}}
@keyframes dotin{to{transform:scale(1)}}
@media (max-width:1100px){.clocks{display:none}}
@media (max-width:860px){
  .quotes,.steps{grid-template-columns:1fr;gap:var(--s4)}
  .also{grid-template-columns:1fr}
  .manifesto .sub{margin-left:0;margin-right:0}
  .ctas{width:100%}
  .score{justify-self:start}
}
@media (prefers-reduced-motion:reduce){.feature .frame img{transform:none}.lightup .wd{color:var(--on-ink)}}
.steps h3,.svc h3,.q blockquote,.sec-head h2,.contact h2{text-wrap:balance}
.reviews .sec-head,.steps-sec .sec-head{border-bottom:0;margin-bottom:var(--s3)}
.svc a{justify-self:start}
@media (max-width:860px){
  .caption{flex-direction:column;gap:.2rem}
  .w .caption span:last-child,.feature .caption span:last-child{color:var(--on-paper-muted);opacity:.85}
  .feature .caption span:last-child{color:var(--on-ink-muted)}
}
/* ================= Stage 2: shared inner-page components ================= */
.hd .nav a[aria-current="page"]{opacity:1;border-bottom:1px solid currentColor;padding-bottom:.2rem}
/* page hero: huge title with a real screenshot set inside the line (Realevate-style) */
.ph{background:var(--ink);color:var(--on-ink);padding:calc(var(--s6) + var(--s3)) var(--g) var(--s5);position:relative}
.ph .cap{color:var(--on-ink-muted)}
.ph h1{font:400 var(--t-hero)/.98 var(--f-d);letter-spacing:-.045em;margin-top:var(--s3);max-width:16ch;text-wrap:balance}
.ph h1 .inl{display:inline-block;height:.78em;width:1.5em;vertical-align:-.06em;margin:0 .12em;overflow:hidden;clip-path:inset(0 0 0 0 round 0);transition:width 1s var(--ease)}
.ph h1 .inl img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.ph .intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,30rem);gap:var(--s4);margin-top:var(--s5);align-items:end}
.ph .intro p{color:var(--on-ink-muted);font-size:var(--t-lead);line-height:1.45;max-width:36ch}
.ph .intro p strong{color:var(--on-ink);font-weight:400}
/* ruled cells (Sincro-style) */
.cells{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid currentColor}
.cells > div{padding:var(--s3) var(--s3) var(--s3) 0;border-right:1px solid var(--rule-ink)}
.cells > div + div{padding-left:var(--s3)}
.cells > div:last-child{border-right:0}
.cells dt,.cells .k{font:500 var(--t-cap)/1.3 var(--f-d);color:var(--on-ink-muted);margin-bottom:.5rem}
.cells dd{margin:0;font:400 var(--t-lead)/1.3 var(--f-d);letter-spacing:-.015em}
.cells a{text-decoration:none;border-bottom:1px solid var(--rule-ink)}
.on-paper-cells > div{border-right-color:var(--rule-paper)}
.on-paper-cells dt{color:var(--on-paper-muted)}
/* generic body section on paper */
.body{padding:var(--s6) var(--g)}
.split2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s5)}
.split2 h2{font:400 var(--t-h2)/1 var(--f-d);letter-spacing:-.04em;text-wrap:balance}
.lead-p{font:400 var(--t-lead)/1.45 var(--f-d);letter-spacing:-.01em;max-width:40ch}
.muted{color:var(--on-paper-muted)}
.ticks{list-style:none;padding:0;margin-top:var(--s3);border-top:1px solid var(--rule-paper)}
.ticks li{padding:.8rem 0;border-bottom:1px solid var(--rule-paper);display:flex;gap:.8rem}
.ticks li::before{content:"";flex:none;width:.45rem;height:.45rem;margin-top:.55rem;background:var(--ink)}
/* services detail */
.svc-d{list-style:none;padding:0;counter-reset:s}
.svc-d > li{display:grid;grid-template-columns:4rem minmax(0,5fr) minmax(0,6fr);gap:var(--s4);padding:var(--s5) 0;border-top:1px solid var(--ink)}
.svc-d h2{font:400 var(--t-h2)/1 var(--f-d);letter-spacing:-.04em}
.svc-d .n{color:var(--on-paper-muted);padding-top:.6rem}
.svc-d p{color:var(--on-paper-muted);max-width:42ch;font-size:var(--t-lead);line-height:1.45}
/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
.plan{padding:var(--s4) var(--s3) var(--s4);border-right:1px solid var(--rule-paper);display:flex;flex-direction:column;gap:var(--s3)}
.plan:last-child{border-right:0}
.plan.hot{background:var(--ink);color:var(--on-ink)}
.plan .tag{font:500 var(--t-cap)/1 var(--f-d);color:var(--on-paper-muted);min-height:1em}
.plan.hot .tag{color:var(--on-ink-muted)}
.plan h2{font:400 var(--t-h3)/1 var(--f-d);letter-spacing:-.02em}
.plan .price{font:400 clamp(2.8rem,1.6rem + 3vw,4.6rem)/1 var(--f-d);letter-spacing:-.05em;border:0;margin:0;padding:0}
.plan .mo{color:var(--on-paper-muted);font:400 var(--t-body)/1.3 var(--f-d)}
.plan.hot .mo,.plan.hot p,.plan.hot .ticks li{color:var(--on-ink-muted)}
.plan.hot .ticks,.plan.hot .ticks li{border-color:var(--rule-ink)}
.plan.hot .ticks li::before{background:var(--on-ink)}
.plan .cta{margin-top:auto}
.plan p{color:var(--on-paper-muted)}
/* FAQ */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule-paper)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s3) 0;font:400 var(--t-h3)/1.2 var(--f-d);letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--on-paper-muted);max-width:60ch;padding:0 0 var(--s3)}
/* about portrait */
.portrait{overflow:hidden;background:#E3E2DE}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.pillars > div{border-top:1px solid var(--ink);padding-top:var(--s3)}
.pillars h3{font:400 var(--t-h3)/1.1 var(--f-d);letter-spacing:-.025em;margin:var(--s2) 0}
.pillars p{color:var(--on-paper-muted)}
/* contact form */
.form{display:grid;gap:var(--s3)}
.form .field{display:grid;gap:.4rem}
.form label{font:500 var(--t-cap)/1 var(--f-d);color:var(--on-paper-muted)}
.form input,.form select,.form textarea{font:400 var(--t-lead)/1.3 var(--f-b);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);padding:.6rem 0;border-radius:0;width:100%}
.form textarea{min-height:8rem;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-bottom-width:2px}
.form button{background:none;cursor:pointer;color:inherit;text-align:left}
.form-note{min-height:1.5em;color:var(--on-paper-muted)}
/* case studies */
.cs-hero-img{padding:0 var(--g);background:var(--ink)}
.cs-hero-img .frame{overflow:hidden}
.cs-hero-img img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;transform:scale(1.1);will-change:transform}
.cs-hero-img .caption{padding:var(--s2) 0 var(--s5)}
.cs-story{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s5);padding:var(--s4) 0;border-top:1px solid var(--rule-paper)}
.cs-story:first-child{border-top:1px solid var(--ink)}
.cs-story h2{font:400 var(--t-h3)/1.1 var(--f-d);letter-spacing:-.025em}
.cs-story p{font:400 var(--t-lead)/1.45 var(--f-d);letter-spacing:-.01em;max-width:44ch}
.cs-stat{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s5);padding:var(--s5) 0 0;border-top:1px solid var(--ink);align-items:end}
.cs-stat b{font:400 clamp(4rem,2rem + 7vw,10rem)/.85 var(--f-d);letter-spacing:-.06em}
.cs-stat span{color:var(--on-paper-muted);font:400 var(--t-lead)/1.4 var(--f-d);max-width:30ch}
.next-band{display:block;background:var(--ink);color:var(--on-ink);text-decoration:none;padding:var(--s6) var(--g);position:relative;overflow:hidden}
.next-band .cap{color:var(--on-ink-muted)}
.next-band b{display:block;font:400 var(--t-hero)/.95 var(--f-d);letter-spacing:-.045em;margin-top:var(--s2);transition:transform .6s var(--ease)}
.next-band:hover b{transform:translateX(1.2rem)}
.next-band img{position:absolute;right:var(--g);top:50%;width:min(34vw,30rem);aspect-ratio:16/10;object-fit:cover;object-position:top;transform:translateY(-50%) rotate(-2deg) scale(.96);opacity:.0;transition:opacity .5s,transform .8s var(--ease)}
.next-band:hover img{opacity:1;transform:translateY(-50%) rotate(-2deg) scale(1)}
/* work index grid: repeats the homepage rhythm for any number of projects */
.work-all{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s3);row-gap:var(--s6)}
.work-all .w:nth-child(4n+1){grid-column:1 / span 7}
.work-all .w:nth-child(4n+2){grid-column:9 / span 4;margin-top:var(--s7)}
.work-all .w:nth-child(4n+3){grid-column:2 / span 5}
.work-all .w:nth-child(4n+4){grid-column:7 / span 6;margin-top:var(--s5)}
/* legal / plain pages */
.prose{max-width:44rem}
.prose h2{font:400 var(--t-h3)/1.2 var(--f-d);letter-spacing:-.02em;margin:var(--s4) 0 var(--s2)}
.prose h3{font:500 var(--t-body)/1.3 var(--f-d);margin:var(--s3) 0 var(--s1)}
.prose p,.prose li{color:#3a3a38;margin-bottom:var(--s2)}
.prose ul{padding-left:1.2rem}
.prose a{color:var(--ink)}
/* compact closing band on inner pages */
.close-band{background:var(--ink);color:var(--on-ink);padding:var(--s6) var(--g) var(--s4)}
.close-band h2{font:400 var(--t-h2)/1 var(--f-d);letter-spacing:-.04em;max-width:14ch}
@media (max-width:860px){
  .ph{padding-top:calc(var(--s6) + var(--s2))}
  .ph .intro,.split2,.cs-story,.cs-stat{grid-template-columns:1fr;gap:var(--s3)}
  .cells{grid-template-columns:1fr 1fr}
  .cells > div{border-right:0;padding-left:0!important;border-bottom:1px solid var(--rule-ink)}
  .on-paper-cells > div{border-bottom-color:var(--rule-paper)}
  .svc-d > li{grid-template-columns:2.4rem minmax(0,1fr);gap:var(--s2)}
  .svc-d > li > div:last-child{grid-column:2}
  .plans{grid-template-columns:1fr}
  .plan{border-right:0;border-bottom:1px solid var(--rule-paper)}
  .pillars{grid-template-columns:1fr}
  .work-all{grid-template-columns:1fr;row-gap:var(--s5)}
  .work-all .w:nth-child(n){grid-column:1 / -1;margin-top:0}
  .work-all .w:nth-child(2n) .frame{margin-left:14%}
  .work-all .w:nth-child(2n) .caption{padding-left:14%}
  .next-band img{display:none}
  .cs-hero-img{padding:0}
  .cs-hero-img .caption{padding-left:var(--g);padding-right:var(--g)}
}
@media (prefers-reduced-motion:reduce){.cs-hero-img img{transform:none}}
/* stage 2 fixes: plan prices must read as the strongest element; form button matches the ruled CTA style */
.plan .price{color:inherit}
.form button.cta{border-left:0;border-right:0;border-radius:0;width:100%;padding:1.15rem 0;font:500 var(--t-body)/1 var(--f-d);display:flex;justify-content:space-between}
.plan.hot .price{color:var(--on-ink)}
/* ================= Round 3: mobile fixes + homepage motion ================= */
/* phones: the inline title thumbnails read as random screenshots, so drop them */
@media (max-width:860px){.ph h1 .inl{display:none}}
/* contact: form first on phones */
@media (max-width:860px){.split2:has(#contact-form) > div:last-child{order:-1}}
/* no empty black gap when a page ends straight into the footer */
.close-band > .ft:first-child{margin-top:0}
.close-band:has(> .ft:first-child){padding-top:var(--s3)}

/* feature image grows from inset to full width as you scroll */
.feature{margin-left:calc(var(--g) * -1);margin-right:calc(var(--g) * -1)}
.feature .frame{clip-path:inset(0 var(--fx,var(--g)) 0 var(--fx,var(--g)));transition:none}
.feature .caption{padding-left:calc(var(--g) + var(--s3));padding-right:calc(var(--g) + var(--s3))}
@media (max-width:860px){.feature .caption{padding-left:var(--g);padding-right:var(--g)}}

/* the orange band: huge moving words, driven by scroll */
.band{background:var(--dot);color:var(--ink);overflow:hidden;padding:clamp(1.4rem,3vw,2.6rem) 0;border-top:1px solid var(--ink)}
.band .track{display:flex;width:max-content;will-change:transform}
.band span{font:500 clamp(3.2rem,1.6rem + 7vw,9.5rem)/1 var(--f-d);letter-spacing:-.05em;white-space:nowrap;padding-right:.5em}
.band span i{font-style:normal;color:var(--white)}

/* counting facts */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:var(--s6);border-top:1px solid var(--rule-ink)}
.facts > div{padding:var(--s3) var(--s3) 0 0;border-right:1px solid var(--rule-ink)}
.facts > div + div{padding-left:var(--s3)}
.facts > div:last-child{border-right:0}
.facts b{display:block;font:400 clamp(2.8rem,1.6rem + 3.4vw,5.6rem)/1 var(--f-d);letter-spacing:-.05em;color:var(--on-ink);font-variant-numeric:tabular-nums}
.facts span{display:block;margin-top:.6rem;color:var(--on-ink-muted)}
@media (max-width:860px){.facts{grid-template-columns:1fr 1fr}.facts > div{border-right:0;padding-left:0!important;padding-bottom:var(--s3);border-bottom:1px solid var(--rule-ink)}}

/* depth: images drift inside their frames */
.w .frame img{transform:translateY(var(--py,0)) scale(1.08);transition:none}
.w a:hover .frame img{transform:translateY(var(--py,0)) scale(1.12)}
@media (prefers-reduced-motion:reduce){.w .frame img{transform:none}.feature .frame{clip-path:none}.band .track{transform:none!important}}

/* ================= Round 4 ================= */
/* the small title photos go everywhere */
.ph h1 .inl{display:none!important}

/* page transition panel */
.pt{position:fixed;inset:0;z-index:200;background:var(--ink);color:var(--on-ink);display:grid;place-items:center;pointer-events:none;transform:translateY(100%)}
.pt span{font:700 clamp(2rem,1.4rem + 2.4vw,3.4rem)/1 var(--f-d);letter-spacing:-.05em;opacity:0;transition:opacity .3s}
.pt span i{font-style:normal;color:var(--dot)}
.pt.pt-in{transform:none;transition:none}
.pt.pt-in span{opacity:1}
.pt.pt-out{transform:translateY(-100%);transition:transform .8s var(--ease) .1s}
.pt.pt-out span{opacity:0}
.pt.pt-leave{transform:none;transition:transform .5s var(--ease)}
.pt.pt-leave span{opacity:1;transition-delay:.2s}

/* heading word reveal */
.split .mw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.split .mi{display:inline-block;transform:translateY(105%);transition:transform .95s var(--ease)}
.split.shown .mi{transform:none}

/* cursor */
.has-cur, .has-cur a, .has-cur button, .has-cur summary{cursor:none}
.has-cur input,.has-cur textarea,.has-cur select{cursor:text}
.cur{position:fixed;left:0;top:0;z-index:150;pointer-events:none;width:0;height:0}
.cur::before{content:"";position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--dot);transition:transform .35s var(--ease),opacity .2s;opacity:0}
.cur.on::before{opacity:1}
.cur.link::before{transform:scale(3.2);opacity:.35}
.cur span{position:absolute;left:-44px;top:-44px;width:88px;height:88px;border-radius:50%;background:var(--dot);color:var(--ink);display:grid;place-items:center;font:500 .85rem/1 var(--f-d);transform:scale(0);transition:transform .45s var(--ease)}
.cur.view span{transform:scale(1)}
.cur.view::before{opacity:0}

/* stacked project showcase */
.stk{position:relative;margin-top:var(--s4)}
.stk-card{position:sticky;top:calc(4.5rem + var(--i) * 1.1rem);height:min(84vh,50rem);margin-bottom:8vh;
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);overflow:hidden;background:var(--bg,#0A0A0A);color:var(--fg,#EDEDEA);
  transform:scale(var(--s,1));transform-origin:50% 0;will-change:transform}
.stk-card::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--d,0);pointer-events:none}
.stk-card:last-child{margin-bottom:0}
.stk-card a{position:absolute;inset:0;z-index:3}
.stk-meta{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(1.4rem,3vw,2.6rem)}
.stk-meta .cap{opacity:.7}
.stk-meta h3{font:400 clamp(2.4rem,1.2rem + 3.6vw,5.4rem)/.95 var(--f-d);letter-spacing:-.045em;margin:var(--s3) 0 var(--s2)}
.stk-meta p{opacity:.8;max-width:26ch;font-size:var(--t-lead);line-height:1.4}
.stk-meta dl{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s3);border-top:1px solid currentColor;padding-top:var(--s3);margin-top:var(--s4)}
.stk-meta dt{font:500 var(--t-cap)/1.2 var(--f-d);opacity:.6}
.stk-meta dd{margin:.25rem 0 0;font:400 var(--t-body)/1.3 var(--f-d)}
.stk-meta .go{font:500 var(--t-body)/1 var(--f-d);display:flex;justify-content:space-between;border-top:1px solid currentColor;padding-top:var(--s2);margin-top:var(--s3)}
.stk-art{position:relative;overflow:hidden}
.stk-art .desk{position:absolute;left:0;top:10%;width:92%;box-shadow:0 30px 80px rgba(0,0,0,.35);transition:transform 1.2s var(--ease)}
.stk-art .desk img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;display:block}
.stk-art .phone{position:absolute;right:6%;bottom:-6%;width:24%;aspect-ratio:390/844;border-radius:1.8rem;padding:.45rem;background:#0b0b0b;box-shadow:0 30px 70px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.08);transition:transform 1.2s var(--ease)}
.stk-art .phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:1.4rem;display:block}
.stk-card:hover .desk{transform:translateY(-1.2rem)}
.stk-card:hover .phone{transform:translateY(-2.4rem) rotate(-2deg)}
@media (max-width:860px){
  .stk-card{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:auto;min-height:78vh;top:calc(4rem + var(--i) * .8rem)}
  .stk-meta dl{display:none}
  .stk-art{min-height:22rem}
  .stk-art .desk{left:6%;top:6%;width:88%}
  .stk-art .phone{width:36%;right:6%;bottom:-10%}
}
@media (prefers-reduced-motion:reduce){.stk-card{position:relative;top:0;transform:none}.pt{display:none}}

html.pt-arr{background:#0A0A0A}html.pt-arr body{opacity:0}

/* ================= Round 5: Butter-inspired ================= */
/* floating glass header */
.hd{top:calc(.75rem + env(safe-area-inset-top,0px));left:var(--g);right:var(--g);padding:.85rem 1.1rem;border:1px solid rgba(237,237,234,.14);
  background:rgba(10,10,10,.55);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
.hd.on-paper{background:rgba(242,241,238,.72);border-color:rgba(10,10,10,.12)}
.hd.hide{transform:translateY(calc(-100% - 1.5rem))}
.logo{font-size:1.3rem}
@media (max-width:860px){.hd{left:.75rem;right:.75rem;padding:.75rem 1rem}}
/* headlines come into focus */
@keyframes rise{from{opacity:0;transform:translateY(.35em);filter:blur(14px)}to{opacity:1;transform:none;filter:blur(0)}}
.split .mi{filter:blur(10px);transition:transform .95s var(--ease),filter 1.1s var(--ease)}
.split.shown .mi{filter:blur(0)}
/* phone video inside every phone frame */
.phone video,.phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:1.4rem;display:block;background:#111}
/* work index + case studies: laptop view with the phone beside it */
.combo{position:relative}
.combo .phone{position:absolute;right:5%;bottom:-8%;width:19%;aspect-ratio:390/844;border-radius:1.6rem;padding:.4rem;background:#0b0b0b;
  box-shadow:0 24px 60px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.08);transition:transform 1s var(--ease);z-index:2}
.w .combo{margin-bottom:6%}
.w a:hover .combo .phone{transform:translateY(-1.2rem) rotate(-2deg)}
.cs-hero-img .combo{margin-bottom:0}
.cs-hero-img .combo .phone{width:17%;bottom:6%;right:6%}
@media (max-width:860px){.combo .phone{width:30%;border-radius:1.1rem;padding:.3rem}.phone video,.phone img{border-radius:.85rem}.cs-hero-img .combo .phone{width:28%}}
/* a sentence that assembles as you scroll */
.converge{background:var(--paper);padding:var(--s7) var(--g);overflow:hidden}
.converge p{font:400 clamp(2.6rem,1.2rem + 5.6vw,7.6rem)/1 var(--f-d);letter-spacing:-.05em;text-align:center}
.converge .cv{display:inline-block;will-change:transform}
.converge .cv.m{color:rgba(10,10,10,.28)}
.converge .cap{display:block;text-align:center;color:var(--on-paper-muted);margin-bottom:var(--s4)}
@media (prefers-reduced-motion:reduce){.split .mi{filter:none}.converge .cv{transform:none!important}}

/* the glass blur would trap the full-screen menu inside the bar, so drop it while the menu is open */
.hd:has(.nav.open){-webkit-backdrop-filter:none;backdrop-filter:none;background:transparent;border-color:transparent}

/* ================= Round 6: proportion, spacing, wall ================= */
/* tighter section rhythm */
.sec{padding:var(--s5) var(--g)}
.manifesto{padding:var(--s5) var(--g) var(--s6)}
.converge{padding:var(--s6) var(--g)}
.contact{padding:var(--s6) var(--g) var(--s4)}
.sec-head{margin-bottom:var(--s4)}
.stk-card{margin-bottom:5vh}
.also{margin-top:var(--s5)}
.svc li{padding:var(--s3) 0}
.price{margin-top:var(--s4)}
.ft{margin-top:var(--s6)}
@media (max-width:860px){
  .sec{padding:var(--s4) var(--g)}
  .manifesto{padding:var(--s4) var(--g) var(--s5)}
  .converge{padding:var(--s5) var(--g)}
  .contact{padding:var(--s5) var(--g) var(--s3)}
  .ft{margin-top:var(--s5)}
  .hero-row{padding-top:var(--s3);padding-bottom:var(--s3)}
}
/* facts: calmer size */
.facts{margin-top:var(--s5)}
.facts b{font-size:clamp(2rem,1.3rem + 2vw,3.4rem)}
.facts span{margin-top:.4rem}
/* band: tighter and quicker */
.band{padding:clamp(.8rem,1.6vw,1.3rem) 0}
.band span{font-size:clamp(2rem,1.1rem + 3.6vw,5rem);padding-right:.45em}
/* hero wall: real client sites, dimmed right down, drifting slowly */
.hero{overflow:hidden;isolation:isolate}
.wall{position:absolute;inset:-10% -5%;z-index:-1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.2vw;transform:rotate(-8deg) scale(1.15);opacity:.22;filter:grayscale(.35) contrast(1.05)}
.wall::after{content:"";position:absolute;inset:0}
.wcol{display:flex;flex-direction:column;gap:1.2vw;animation:wallup 60s linear infinite}
.wcol:nth-child(2n){animation-direction:reverse;animation-duration:72s}
.wcol img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;display:block}
@keyframes wallup{to{transform:translateY(-50%)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 80% 70% at 30% 40%,rgba(10,10,10,.55),rgba(10,10,10,.92) 70%),linear-gradient(to bottom,rgba(10,10,10,.2),#0A0A0A 92%)}
.hero .feature{position:relative;z-index:1}
@media (max-width:860px){.wall{grid-template-columns:repeat(3,minmax(0,1fr));opacity:.18}.wcol:nth-child(n+4){display:none}}
@media (prefers-reduced-motion:reduce){.wcol{animation:none}}

/* round 7: the menu is always ink, so the header text must be light while it's open */
.hd:has(.nav.open), .hd.on-paper:has(.nav.open){color:var(--on-ink)}
.hd:has(.nav.open) .logo, .hd:has(.nav.open) .menu{color:var(--on-ink);position:relative;z-index:2}

/* round 8: language switch + WhatsApp button */
.lang{margin-left:var(--s3);text-decoration:none;border:1px solid currentColor;padding:.35rem .5rem;line-height:1;opacity:.85}
.lang:hover{opacity:1}
@media (max-width:860px){.lang{margin-left:auto;margin-right:var(--s2)}.menu{margin-left:0}}
.wa{position:fixed;right:max(1rem,env(safe-area-inset-right,0px));bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:40;display:inline-flex;align-items:center;gap:.5rem;
  background:var(--ink);color:var(--on-ink);text-decoration:none;font:500 var(--t-cap)/1 var(--f-d);padding:.8rem 1rem;border:1px solid rgba(237,237,234,.18);
  box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .35s var(--ease),background .25s}
.wa svg{color:#25D366}
.wa:hover{transform:translateY(-3px);background:#161616}
body.locked .wa{display:none}
@media (max-width:860px){.wa span{display:none}.wa{padding:.8rem;border-radius:50%}}

/* round 8: guides */
.guides{list-style:none;padding:0;border-top:1px solid var(--ink)}
.guides a{display:grid;grid-template-columns:8rem minmax(0,1fr) minmax(0,1fr) auto;gap:var(--s3);align-items:baseline;padding:var(--s4) 0;border-bottom:1px solid var(--rule-paper);text-decoration:none}
.guides h2{font:400 var(--t-h3)/1.15 var(--f-d);letter-spacing:-.02em}
.guides p{color:var(--on-paper-muted)}
.guides .go{font:500 var(--t-cap)/1 var(--f-d);white-space:nowrap}
.guides a:hover h2{text-decoration:underline;text-underline-offset:.15em}
.prose h2:first-child{margin-top:0}
.prose p{font-size:var(--t-lead);line-height:1.6;color:#2e2e2c}
@media (max-width:860px){.guides a{grid-template-columns:1fr;gap:var(--s2)}}