/* ==========================================================================
   BISAIKAN — studio system (Stage 11)
   Warm editorial × bold typography × independent studio × refined interaction
   Two voices: Figtree (functional + structural caps) and Fraunces (emotion).
   ========================================================================== */

@font-face{font-family:"Fraunces";src:url("/assets/fonts/fraunces-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("/assets/fonts/figtree-var.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}

:root{
  /* palette — ivory canvas, near-black ink, BISAIKAN yellow (sampled from the logo K) */
  --paper:#f6f1e7;
  --paper-2:#ede5d6;
  --paper-3:#fbf8f2;
  --ink:#121815;
  --ink-2:#39433d;
  --muted:#5a635d;
  --rule:#d6ccba;
  --rule-strong:#121815;
  --yellow:#e2a004;
  --yellow-soft:#f5d57a;
  /* type */
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Fraunces",Georgia,serif;
  --t-mega:clamp(3.3rem,13.2vw,12.5rem);
  --t-display:clamp(2.5rem,6.2vw,6.2rem);
  --t-h2:clamp(2rem,4.2vw,3.8rem);
  --t-h3:clamp(1.3rem,2vw,1.7rem);
  --t-lead:clamp(1.12rem,1.5vw,1.35rem);
  --t-meta:.875rem;
  /* layout */
  --gutter:clamp(20px,5vw,72px);
  --max:1400px;
  /* motion */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --press:160ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
button{font:inherit;color:inherit}
a,button,summary{-webkit-tap-highlight-color:transparent}
p,li,dd{text-wrap:pretty}
h1,h2,h3{text-wrap:balance;font-weight:inherit}
::selection{background:var(--yellow-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:16px;z-index:100;background:var(--ink);color:var(--paper);padding:12px 16px;border-radius:6px}

/* ---------- layout primitives ---------- */
.wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px)}
.s-quiet{padding-block:clamp(72px,11vw,176px)}
.s-mid{padding-block:clamp(56px,8vw,120px)}
.s-dense{padding-block:clamp(40px,5vw,72px)}
.rule-top{border-top:1px solid var(--rule)}
.bg-2{background:var(--paper-2)}

/* ---------- type voices ---------- */
.caps{font-family:var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:.86}
.serif{font-family:var(--serif);font-weight:440;font-optical-sizing:auto;font-variation-settings:"SOFT" 100,"WONK" 0;letter-spacing:-.025em}
.mega{font-size:var(--t-mega)}
.display{font-size:var(--t-display);line-height:1.02}
.h2{font-size:var(--t-h2);line-height:1.05}
.h3{font-size:var(--t-h3);line-height:1.2;font-weight:650;letter-spacing:-.01em}
.lead{font-size:var(--t-lead);line-height:1.55;color:var(--ink-2);max-width:36em}
.meta{font-size:var(--t-meta);font-weight:500;color:var(--muted);letter-spacing:.01em}
.label{font-size:var(--t-meta);font-weight:650;letter-spacing:.02em;color:var(--ink)}
.num{font-family:var(--sans);font-weight:700;font-feature-settings:"tnum" 1;letter-spacing:-.02em}
.body-copy{max-width:38em;color:var(--ink-2)}
.body-copy p+p{margin-top:1em}
/* BISAIKAN yellow highlight — used sparingly on the one word that matters */
.hl{position:relative;display:inline-block;z-index:0}
.hl::after{content:"";position:absolute;left:-.04em;right:-.06em;bottom:.08em;height:.32em;background:var(--yellow);z-index:-1;transform-origin:left center;border-radius:2px}

/* ---------- links and buttons ---------- */
.link{display:inline-flex;align-items:center;gap:.4em;font-weight:650;text-decoration:none;background:linear-gradient(currentColor,currentColor) left bottom/100% 1.5px no-repeat;padding-bottom:3px;transition:background-size 240ms var(--ease-out)}
.link .arr{display:inline-block;transition:transform 200ms var(--ease-out)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:52px;padding:0 26px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);font:650 1rem/1 var(--sans);text-decoration:none;cursor:pointer;transition:transform var(--press) var(--ease-out),background-color 200ms ease,color 200ms ease}
.btn .arr{display:inline-block;transition:transform 200ms var(--ease-out)}
.btn-yellow{background:var(--yellow);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .link:hover{background-size:0 1.5px;background-position:right bottom}
  .link:hover .arr,.btn:hover .arr{transform:translate(3px,-3px)}
  .link.down:hover .arr,.btn.down:hover .arr{transform:translateY(3px)}
  .btn:hover{background:#000}
  .btn-yellow:hover{background:#f0b010}
  .btn-ghost:hover{background:var(--ink);color:var(--paper)}
}

/* ---------- header ---------- */
.site-header{position:relative;z-index:40}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:22px}
.brand{display:block;flex:none}
.brand img{width:clamp(132px,13vw,172px)}
.nav{display:flex;align-items:center;gap:clamp(20px,2.6vw,40px)}
.nav a{font-weight:550;text-decoration:none;color:var(--ink-2);padding-block:8px;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--yellow);transform:scaleX(0);transform-origin:right;transition:transform 240ms var(--ease-out)}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav .nav-cta{color:var(--ink);font-weight:650}
.nav .nav-cta .arr{display:inline-block;transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .nav a:hover{color:var(--ink)}
  .nav a:hover::after{transform:scaleX(1);transform-origin:left}
  .nav .nav-cta:hover .arr{transform:translate(3px,-3px)}
}
.menu-btn{display:none;align-items:center;gap:10px;min-height:44px;padding:0 4px 0 12px;border:0;background:none;font-weight:650;cursor:pointer}
.menu-btn .bars{display:grid;gap:5px;width:22px}
.menu-btn .bars span{display:block;height:2px;background:currentColor;border-radius:2px}
.menu-btn:active{transform:scale(.97)}

/* ---------- full-screen mobile menu ---------- */
.menu-panel{position:fixed;inset:0;z-index:60;background:var(--paper);display:flex;flex-direction:column;padding:0 var(--gutter) max(24px,env(safe-area-inset-bottom));overflow-y:auto;opacity:0;transition:opacity 150ms ease}
.menu-panel[hidden]{display:none}
.menu-panel.is-open{opacity:1;transition:opacity 220ms var(--ease-out)}
.menu-top{display:flex;align-items:center;justify-content:space-between;padding-block:14px}
.menu-top img{width:132px}
.menu-close{min-height:44px;padding:0 4px 0 12px;border:0;background:none;font-weight:650;cursor:pointer;display:inline-flex;align-items:center;gap:10px}
.menu-close svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}
.menu-list{margin-top:clamp(24px,6vh,56px);border-top:1px solid var(--rule)}
.menu-list li{border-bottom:1px solid var(--rule)}
.menu-list a{display:flex;align-items:baseline;gap:16px;padding:14px 0;text-decoration:none;font:800 clamp(2rem,10vw,3.2rem)/1 var(--sans);letter-spacing:-.04em;text-transform:uppercase}
.menu-list a .n{font:600 .875rem/1 var(--sans);letter-spacing:0;color:var(--muted);min-width:1.6em;transform:translateY(-.9em)}
.menu-list a[aria-current="page"]{color:var(--ink)}
.menu-list a[aria-current="page"] .n{color:var(--ink)}
.menu-list a[aria-current="page"] .t{box-shadow:inset 0 -.18em 0 var(--yellow)}
.menu-list li{opacity:0;transform:translateY(14px);transition:opacity 150ms ease,transform 150ms ease}
.menu-panel.is-open .menu-list li{opacity:1;transform:none;transition:opacity 260ms var(--ease-out),transform 320ms var(--ease-out)}
.menu-panel.is-open .menu-list li:nth-child(2){transition-delay:30ms}
.menu-panel.is-open .menu-list li:nth-child(3){transition-delay:60ms}
.menu-panel.is-open .menu-list li:nth-child(4){transition-delay:90ms}
.menu-panel.is-open .menu-list li:nth-child(5){transition-delay:120ms}
.menu-panel.instant,.menu-panel.instant .menu-list li{transition:none!important}
.menu-foot{margin-top:auto;padding-top:36px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 24px;align-items:center}
.menu-foot .meta{font-size:.95rem}
html.menu-open{overflow:hidden}

/* ---------- icon links ---------- */
.icons{display:flex;gap:10px}
.icon-link{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;color:inherit;transition:transform var(--press) var(--ease-out),background-color 200ms ease,color 200ms ease}
.icon-link svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-link:active{transform:scale(.95)}
@media (hover:hover) and (pointer:fine){.icon-link:hover{background:var(--ink);color:var(--paper);box-shadow:none}}

/* ---------- hero ---------- */
.hero{min-height:calc(100svh - 96px);display:flex;flex-direction:column;justify-content:space-between;padding-block:clamp(24px,4vw,48px) clamp(40px,6vw,80px)}
.hero-meta{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--ink);padding-top:14px}
.hero-title{margin-block:clamp(28px,6vh,88px) clamp(24px,4vh,56px)}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.04em}
.hero-title .line>span{display:block}
.hero-title .caps{font-size:clamp(3.4rem,min(13.4vw,19svh),13rem)}
.hero-title .serif{font-size:clamp(4rem,min(15vw,21svh),14.5rem);line-height:.92;margin-top:-.02em}
.hero-title .indent{padding-left:clamp(0px,14vw,15rem)}
.hero-foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:end;row-gap:28px}
.hero-foot .lead{grid-column:1 / span 6}
.hero-actions{grid-column:8 / -1;display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:flex-end}
/* signature: one controlled entrance on load (CSS only, so no flash), then out of the way */
.hero-title .line>span{animation:line-up 720ms var(--ease-out) both}
.hero-title .line:nth-child(2)>span{animation-delay:70ms}
.hero-title .line:nth-child(3)>span{animation-delay:140ms}
.hero-title .hl::after{animation:hl-draw 520ms var(--ease-out) 560ms both}
@keyframes line-up{from{transform:translateY(105%)}}
@keyframes hl-draw{from{transform:scaleX(0)}}

/* ---------- page intro (inner pages) ---------- */
.intro{padding-block:clamp(40px,7vw,96px) clamp(40px,6vw,80px)}
.intro .meta-row{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--ink);padding-top:14px;margin-bottom:clamp(40px,6vw,80px)}
.intro h1{max-width:12ch}
.intro .lead{margin-top:clamp(24px,3vw,40px)}

/* ---------- statement ---------- */
.statement{max-width:18ch}
.statement-sub{margin-top:clamp(24px,3vw,36px);max-width:34em}
.statement-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:end}
.statement-row .statement{grid-column:1 / span 9}
.statement-row .statement-sub{grid-column:9 / -1;margin-top:0}

/* ---------- section head with oversized number ---------- */
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:end;border-top:1px solid var(--ink);padding-top:14px;margin-bottom:clamp(32px,5vw,64px)}
.sec-head .label{grid-column:1 / span 6}
.sec-head .meta{grid-column:7 / -1;text-align:right}

/* ---------- project features (magazine / poster) ---------- */
.feature{position:relative;padding-block:clamp(28px,4vw,56px) clamp(64px,9vw,140px)}
.feature+.feature{border-top:1px solid var(--rule)}
.feature-title{position:relative;z-index:2}
.feature-title .caps{font-size:clamp(4rem,17vw,16rem);line-height:.8}
.feature-title .caps span{display:block}
.feature-title .caps span:nth-child(2){padding-left:clamp(0px,18vw,19rem)}
.feature-media{position:relative;z-index:1;margin-top:clamp(-72px,-5vw,-24px);display:block;text-decoration:none;overflow:hidden;border-radius:4px}
.feature-media img{width:100%}
.feature-media .frame{display:block;padding:clamp(16px,4vw,64px);background:var(--project-bg,var(--paper-2))}
.feature-media .frame img{border-radius:2px;box-shadow:0 1px 0 rgba(18,24,21,.06),0 24px 48px -24px rgba(18,24,21,.28)}
.feature-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:28px;margin-top:clamp(24px,3vw,40px);align-items:start}
.feature-body .tagline{grid-column:1 / span 6;font-size:clamp(1.7rem,3vw,2.8rem);line-height:1.08}
.feature-body .summary{grid-column:8 / -1}
.feature-body .summary .body-copy{max-width:none}
.facts{display:grid;grid-template-columns:auto 1fr;column-gap:24px;margin-top:24px;border-top:1px solid var(--rule)}
.facts dt,.facts dd{padding:12px 0;border-bottom:1px solid var(--rule)}
.facts dt{font-weight:650;font-size:var(--t-meta);color:var(--ink)}
.facts dd{color:var(--ink-2)}
.facts a{font-weight:600}
.feature .cta-row{margin-top:28px;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.status{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-meta);font-weight:650}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--status,var(--yellow));flex:none}
.status.concept{--status:transparent}
.status.concept::before{box-shadow:inset 0 0 0 1.5px var(--ink)}
/* project palettes — each project may bring its own colour; the master returns afterwards */
.p-kadaibid{--project-bg:#f3e1d6;--project-accent:#b13d27}
.p-paperkado{--project-bg:#e4e1dc;--project-accent:#25242a}
/* Paperkado: typographic concept poster, no fake UI */
.poster{display:grid;align-content:space-between;min-height:clamp(320px,42vw,560px);padding:clamp(24px,4vw,56px);background:var(--project-bg);color:var(--project-accent)}
.poster .poster-top{display:flex;justify-content:space-between;gap:12px}
.poster .poster-line{font-size:clamp(2.2rem,6vw,5.6rem);line-height:.98;max-width:12ch}
.poster .poster-foot{display:flex;flex-wrap:wrap;gap:8px 28px}
/* reveal on entering the viewport — only the main project image, once */
.js .reveal{clip-path:inset(6% 4% 6% 4%);transform:scale(1.04);transition:clip-path 800ms var(--ease-out),transform 900ms var(--ease-out)}
.js .reveal.is-in{clip-path:inset(0 0 0 0);transform:none}
@media (hover:hover) and (pointer:fine){
  .feature-media img{transition:transform 300ms var(--ease-out)}
  a.feature-media:hover .frame img{transform:scale(1.012)}
}

/* ---------- service index ---------- */
.svc-index{border-top:1px solid var(--ink)}
.svc{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:16px;padding-block:clamp(28px,4vw,52px);border-bottom:1px solid var(--rule);align-items:start}
.svc .n{grid-column:1 / span 1;font:700 clamp(1rem,1.4vw,1.2rem)/1.2 var(--sans);color:var(--muted);padding-top:.5em;transition:color 200ms ease}
.svc .name{grid-column:2 / span 5;font-size:clamp(2.6rem,6.4vw,6rem);transition:transform 260ms var(--ease-out)}
.svc .what{grid-column:7 / span 4}
.svc .what .serif{font-size:clamp(1.45rem,2.3vw,2.1rem);line-height:1.12;display:block;margin-bottom:12px}
.svc .price{grid-column:11 / -1;text-align:right;font-weight:650;padding-top:.45em}
.svc .price small{display:block;font-weight:500;color:var(--muted);font-size:var(--t-meta)}
.svc a.stretch{position:absolute;inset:0}
.svc{position:relative}
@media (hover:hover) and (pointer:fine){
  .svc:hover .name,.svc:focus-within .name{transform:translateX(10px)}
  .svc:hover .n,.svc:focus-within .n{color:var(--ink)}
}
.svc-detail .svc{row-gap:24px}
.svc-detail .svc .what p+p{margin-top:12px}
.svc-detail .svc ul{margin-top:16px;border-top:1px solid var(--rule)}
.svc-detail .svc li{padding:10px 0;border-bottom:1px solid var(--rule);color:var(--ink-2)}
.svc-detail .svc .price .btn{margin-top:20px}

/* ---------- ruled lists (trust, outcomes, FAQ) ---------- */
.ruled{border-top:1px solid var(--ink)}
.ruled>li,.ruled>div{border-bottom:1px solid var(--rule)}
.trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,64px);border-top:1px solid var(--ink)}
.trust li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;padding:22px 0;border-bottom:1px solid var(--rule)}
.trust h3{font-size:1.1rem;font-weight:700;letter-spacing:-.01em}
.trust p{color:var(--ink-2)}
.outcomes li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);padding:24px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.outcomes .k{grid-column:1 / span 3}
.outcomes .v{grid-column:4 / span 5;font-size:clamp(1.35rem,2.2vw,1.9rem);line-height:1.15}
.outcomes .d{grid-column:9 / -1;color:var(--ink-2)}

/* ---------- founder block ---------- */
.founder{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:center;row-gap:24px}
.founder .who{grid-column:1 / span 5;display:flex;align-items:center;gap:18px}
.founder .who img{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:none}
.founder .who p{display:flex;flex-direction:column;line-height:1.35}
.founder .who strong{font-weight:700;font-size:1.1rem}
.founder .say{grid-column:6 / -1;font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:1.15}

/* ---------- process ---------- */
.process{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px)}
.process-aside{grid-column:1 / span 4;align-self:start;position:sticky;top:32px}
.process-steps{grid-column:6 / -1;border-top:1px solid var(--ink)}
.step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px 32px;padding:clamp(28px,4vw,48px) 0;border-bottom:1px solid var(--rule)}
.step .big{font:800 clamp(3.4rem,7vw,6.4rem)/.82 var(--sans);letter-spacing:-.05em;color:var(--rule);transition:color 300ms ease}
.step.is-active .big{color:var(--ink)}
.step h2{font:800 clamp(1.6rem,2.6vw,2.4rem)/1 var(--sans);letter-spacing:-.03em;text-transform:uppercase;margin-bottom:12px}
.step p{color:var(--ink-2)}
.step .note{margin-top:10px;font-size:var(--t-meta);color:var(--muted)}

/* ---------- pricing detail + FAQ ---------- */
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:20px 0;cursor:pointer;list-style:none;font-weight:650;font-size:1.1rem;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;transition:transform 220ms var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>p{padding:0 0 22px;max-width:42em;color:var(--ink-2)}
.faq details[open]>p{animation:faq-in 220ms var(--ease-out)}
@keyframes faq-in{from{opacity:0;transform:translateY(-4px)}}
.two-col{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px)}
.two-col>.l{grid-column:1 / span 4}
.two-col>.r{grid-column:6 / -1}

/* ---------- contact ---------- */
.contact-steps{counter-reset:c;border-top:1px solid var(--ink)}
.contact-steps li{counter-increment:c;display:grid;grid-template-columns:3.5rem 1fr;gap:12px;padding:18px 0;border-bottom:1px solid var(--rule);font-weight:550}
.contact-steps li::before{content:counter(c,decimal-leading-zero);font-weight:700;color:var(--muted)}
.contact-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:32px}

/* ---------- footer: the final brand moment ---------- */
.site-footer{margin-top:0}
.footer-cta{background:var(--yellow);color:var(--ink);padding-block:clamp(64px,10vw,160px) clamp(40px,6vw,80px)}
.footer-cta h2{font-size:clamp(3rem,10.5vw,10.5rem)}
.footer-cta h2 .caps{display:block}
.footer-cta h2 .serif{display:block;font-size:1.08em;line-height:.95;margin-top:.02em}
.footer-cta .row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px;margin-top:clamp(32px,5vw,64px);border-top:1.5px solid var(--ink);padding-top:20px}
.footer-cta .row p{max-width:30em;font-weight:500}
.footer-base .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:20px 40px;align-items:center;padding-block:28px}
.footer-base img{width:150px}
.footer-base .meta-list{display:flex;flex-wrap:wrap;gap:6px 24px}
.footer-base .meta-list a{text-decoration:none;font-weight:600;color:var(--ink)}
@media (hover:hover) and (pointer:fine){.footer-base .meta-list a:hover{text-decoration:underline;text-underline-offset:4px}}

/* ---------- case study ---------- */
.cs{--project-bg:#f3e1d6;--project-accent:#b13d27}
.cs-hero{padding-block:clamp(24px,4vw,48px) clamp(40px,6vw,72px)}
.cs-hero .back{display:inline-flex;min-height:44px;align-items:center}
.cs-hero .meta-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid var(--ink);padding-top:14px;margin-top:12px}
.cs-hero h1{margin-top:clamp(32px,5vw,64px)}
.cs-hero h1 .caps{display:block;font-size:clamp(4.4rem,19vw,17rem);line-height:.8}
.cs-hero h1 .caps+.caps{padding-left:clamp(0px,18vw,19rem)}
.cs-hero .sub{display:block;margin-top:clamp(20px,3vw,32px);font-size:clamp(1.9rem,4.4vw,4rem);line-height:1.04;color:var(--project-accent)}
.cs-hero .grid{margin-top:clamp(32px,5vw,64px);row-gap:28px}
.cs-hero .body-copy{grid-column:1 / span 7}
.cs-hero .facts{grid-column:9 / -1;margin-top:0}
.tags{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:20px}
.tags li{font-weight:600;font-size:var(--t-meta)}
.tags li{padding:4px 0;border-bottom:1.5px solid var(--yellow)}
.legend{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:clamp(32px,4vw,48px);padding-top:16px;border-top:1px solid var(--rule)}
.legend li{display:flex;align-items:center;gap:10px;font-size:var(--t-meta);color:var(--ink-2)}
.tag{display:inline-block;padding:3px 8px;border-radius:3px;font:700 .72rem/1.3 var(--sans);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.tag-real{background:var(--ink);color:var(--paper)}
.tag-observed{box-shadow:inset 0 0 0 1.5px var(--ink)}
.tag-analysis{background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--rule)}
.tag-proposed{background:var(--yellow);color:var(--ink)}
.tag-future{box-shadow:inset 0 0 0 1.5px var(--muted);color:var(--ink-2)}
.chapter{padding-block:clamp(64px,9vw,140px);border-top:1px solid var(--rule)}
.chapter.tint{background:var(--project-bg);border-top:0}
.chapter-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:20px;align-items:start}
.chapter-head .big{grid-column:1 / span 3;font:800 clamp(5rem,13vw,12rem)/.78 var(--sans);letter-spacing:-.06em;color:var(--project-accent)}
.chapter-head .txt{grid-column:5 / -1}
.chapter-head .label{display:block;margin-bottom:14px}
.chapter-head h2{font-size:var(--t-h2);line-height:1.05;max-width:18ch}
.chapter-head .body-copy{margin-top:24px}
.pull{font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.15;margin-top:28px;max-width:24ch;padding-left:20px;border-left:3px solid var(--project-accent)}
.plate{margin-top:clamp(40px,6vw,80px)}
.plate a{display:block;cursor:zoom-in;transition:transform var(--press) var(--ease-out)}
.plate a:active{transform:scale(.99)}
.plate img{width:100%;border-radius:3px;box-shadow:0 24px 60px -30px rgba(18,24,21,.35)}
.plate figcaption{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline;margin-top:14px;font-size:.95rem;color:var(--ink-2)}
.plate .zoom{color:var(--muted)}
.before{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:28px;align-items:center;margin-top:clamp(40px,6vw,72px)}
.before .phone{grid-column:2 / span 4}
.before .phone a{display:block;border:10px solid #111;border-radius:34px;overflow:hidden;background:#111;max-width:300px;margin-inline:auto;transition:transform var(--press) var(--ease-out)}
.before .phone a:active{transform:scale(.98)}
.before .phone img{border-radius:24px}
.before .phone figcaption{text-align:center;margin-top:14px;font-size:.95rem;color:var(--ink-2)}
.before .note{grid-column:7 / -1}
.before .note .serif{font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.15}
.journeys{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--ink)}
.journeys li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);padding:20px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.journeys .k{grid-column:1 / span 3}
.journeys .v{grid-column:4 / -1;font-size:clamp(1.3rem,2.1vw,1.8rem);line-height:1.2}
.boundary{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:24px;margin-top:clamp(40px,5vw,64px)}
.boundary .own{grid-column:1 / span 7}
.boundary .wa{grid-column:9 / -1}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:12px;font:800 clamp(1.4rem,2.6vw,2.2rem)/1.1 var(--sans);letter-spacing:-.03em;text-transform:uppercase}
.chain li+li::before{content:"→";margin-right:14px;color:var(--project-accent)}
.boundary .wa p{margin-top:12px;font-size:1.15rem;color:var(--ink-2)}
.big-line{margin-top:clamp(48px,6vw,88px);font-size:clamp(2rem,5vw,4.6rem);line-height:1.02;max-width:20ch}
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);margin-top:clamp(32px,4vw,48px);border-top:1px solid var(--ink)}
.principles div{padding:18px 0;border-bottom:1px solid var(--rule)}
.principles dd{font-size:1.25rem;font-weight:650;margin-top:4px}
.inputs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:36px;margin-top:clamp(40px,6vw,80px)}
.inputs .four{grid-column:1 / span 6}
.inputs .four ol{counter-reset:i}
.inputs .four li{counter-increment:i;display:flex;align-items:baseline;gap:16px;font:800 clamp(2.6rem,6.4vw,5.6rem)/.98 var(--sans);letter-spacing:-.045em;text-transform:uppercase}
.inputs .four li::before{content:counter(i,decimal-leading-zero);font:700 .9rem/1 var(--sans);letter-spacing:0;color:var(--project-accent);transform:translateY(-1.6em)}
.inputs .rest{grid-column:8 / -1}
.inputs .rest .facts{margin-top:12px}
.inputs .rest p{margin-top:16px;color:var(--ink-2)}
.targets{margin-top:clamp(40px,5vw,64px);padding-top:18px;border-top:1.5px dashed var(--ink)}
.targets ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);margin-top:18px}
.targets strong{display:block;font:800 clamp(2.6rem,5vw,4.4rem)/1 var(--sans);letter-spacing:-.04em}
.targets span{color:var(--ink-2);font-weight:550}
.questions{margin-top:clamp(32px,4vw,48px);border-top:1px solid var(--ink)}
.questions li{padding:14px 0;border-bottom:1px solid var(--rule);font-size:clamp(1.3rem,2.2vw,1.9rem);line-height:1.2}
.bid-demo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:28px;margin-top:clamp(40px,5vw,64px);align-items:end}
.bid-demo .nums{grid-column:1 / span 6;display:flex;gap:clamp(20px,4vw,56px);align-items:end}
.bid-demo .nums div{display:flex;flex-direction:column;gap:6px}
.bid-demo .nums strong{font:800 clamp(2.4rem,5vw,4.4rem)/1 var(--sans);letter-spacing:-.04em}
.bid-demo .nums .next strong{box-shadow:inset 0 -.2em 0 var(--yellow)}
.bid-demo .fake-btn{grid-column:1 / span 6;display:block;padding:18px;border-radius:999px;background:var(--ink);color:var(--paper);text-align:center;font-weight:700;letter-spacing:.02em}
.bid-demo .trust-once{grid-column:8 / -1;grid-row:1 / span 2}
.bid-demo .trust-once p{margin-top:10px;color:var(--ink-2)}
.states{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.states li{padding:6px 12px;border-radius:999px;font-weight:700;font-size:.8rem;letter-spacing:.04em;box-shadow:inset 0 0 0 1.5px var(--ink)}
.states li:nth-child(1){background:#e3ebe5}
.states li:nth-child(2){background:var(--paper-2)}
.states li:nth-child(3){background:var(--yellow)}
.metrics{grid-column:6 / -1;border-top:1px solid var(--ink)}
.metrics li{padding:14px 0;border-bottom:1px solid var(--rule);font-weight:550}
.progress-note{margin-top:clamp(32px,4vw,48px);display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;padding:18px 0;border-top:1.5px dashed var(--muted);border-bottom:1.5px dashed var(--muted);color:var(--ink-2);font-weight:550}
.cs-close{padding-block:clamp(80px,12vw,180px)}
.cs-close .serif{font-size:var(--t-display);line-height:1.02;max-width:14ch}
.cs-close .body-copy{margin-top:28px}

/* ---------- page transition ---------- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:200ms;animation-timing-function:ease}

/* ---------- responsive: tablet ---------- */
@media (max-width:1024px){
  .hero-foot .lead{grid-column:1 / span 7}
  .hero-actions{grid-column:8 / -1}
  .svc .name{grid-column:2 / span 11}
  .svc .what{grid-column:2 / span 7}
  .svc .price{grid-column:9 / -1}
  .process-aside{grid-column:1 / -1;position:static;margin-bottom:40px}
  .process-steps{grid-column:1 / -1}
}
/* ---------- responsive: mobile composition (not stacked desktop) ---------- */
@media (max-width:860px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .site-header{position:sticky;top:0;background:rgba(246,241,231,.94);backdrop-filter:saturate(160%) blur(10px);-webkit-backdrop-filter:saturate(160%) blur(10px)}
  .site-header .wrap{padding-block:12px}
  .hero{min-height:calc(100svh - 68px)}
  .hero-title .indent{padding-left:0}
  .hero-foot .lead,.hero-actions{grid-column:1 / -1}
  .hero-actions{justify-content:flex-start}
  .feature-body .tagline,.feature-body .summary{grid-column:1 / -1}
  .statement-row .statement,.statement-row .statement-sub{grid-column:1 / -1}
  .statement-row .statement-sub{margin-top:24px}
  .trust{grid-template-columns:1fr}
  .outcomes .k{grid-column:1 / -1;margin-bottom:6px}
  .outcomes .v{grid-column:1 / -1}
  .outcomes .d{grid-column:1 / -1;margin-top:8px}
  .founder .who,.founder .say{grid-column:1 / -1}
  .two-col>.l,.two-col>.r{grid-column:1 / -1}
  .two-col>.l{margin-bottom:32px}
  .footer-base .wrap{grid-template-columns:1fr;justify-items:start}
  .cs-hero .body-copy,.cs-hero .facts{grid-column:1 / -1}
  .chapter-head .big{grid-column:1 / -1}
  .chapter-head .txt{grid-column:1 / -1}
  .before .phone,.before .note{grid-column:1 / -1}
  .journeys .k{grid-column:1 / -1;margin-bottom:6px}
  .journeys .v{grid-column:1 / -1}
  .boundary .own,.boundary .wa{grid-column:1 / -1}
  .inputs .four,.inputs .rest{grid-column:1 / -1}
  .bid-demo .nums,.bid-demo .fake-btn,.bid-demo .trust-once{grid-column:1 / -1;grid-row:auto}
  .metrics{grid-column:1 / -1;margin-top:32px}
}
@media (max-width:600px){
  body{font-size:1rem}
  .hero-meta,.intro .meta-row,.sec-head{font-size:.875rem}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
  .hero-actions .link{align-self:flex-start}
  .svc .n{grid-column:1 / -1;padding-top:0}
  .svc .name,.svc .what,.svc .price{grid-column:1 / -1;text-align:left}
  .svc .price{padding-top:0}
  .trust li{grid-template-columns:1fr;gap:6px}
  .step{grid-template-columns:1fr;gap:10px}
  .principles,.targets ul{grid-template-columns:1fr}
  .principles div,.targets li{padding:14px 0;border-bottom:1px solid var(--rule)}
  .feature-media{margin-top:-12px}
  .feature-media .frame{padding:12px}
  .footer-cta .row .btn{width:100%}
  .contact-actions .btn{width:100%}
  .sec-head .label,.sec-head .meta{grid-column:1 / -1;text-align:left}
  .sec-head .meta{margin-top:4px}
}

/* ---------- reduced motion: keep fades, drop movement ---------- */
@media (prefers-reduced-motion:reduce){
  .hero-title .line>span,.hero-title .hl::after{animation:none}
  .js .reveal{clip-path:none;transform:none;transition:none}
  .menu-list li,.menu-panel.is-open .menu-list li{transform:none}
  .btn:active,.icon-link:active,.plate a:active,.before .phone a:active,.menu-btn:active{transform:none}
  .svc .name,.feature-media img{transition:none}
  .faq details[open]>p{animation:none}
  .step .big{transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:120ms}
}

/* ---------- small shared pieces ---------- */
.cta-row{margin-top:clamp(28px,3vw,40px);display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center}
.intro h1{max-width:none}
.intro h1 .caps.mega{display:block}
.intro h1 .serif.display{display:block;margin-top:.12em}
.trust-plain .row{padding:16px 0;border-bottom:1px solid var(--rule);color:var(--ink-2)}
.two-col .r .label{display:block;margin:40px 0 12px}
.contact-actions+.meta{margin-top:16px;max-width:40em}
.poster .meta{color:var(--project-accent)}
.metrics-label{grid-column:1 / span 4}
.founder .say .body-copy{max-width:36em}
.statement .caps{font-size:.86em;letter-spacing:-.03em}
@media (max-width:860px){.metrics-label{grid-column:1 / -1}}
/* overlap clearance under the poster titles */
.p-paperkado .poster{padding-top:clamp(64px,8vw,132px)}
.feature-media .frame{padding-top:clamp(40px,6vw,96px)}
.founder+.trust{margin-top:clamp(32px,4vw,56px)}
@media (max-width:600px){
  .hero-title .caps{font-size:15vw}
  .hero-title .serif{font-size:18vw}
  .hero-title{margin-block:48px 40px}
}
.btn{white-space:nowrap}
.svc-detail .svc .what .btn{margin-top:24px}
/* comfortable hit area for standalone text links without moving the underline */
.link{position:relative}
.link::before{content:"";position:absolute;inset:-12px -6px}