/* Static & Signal · site styles
   Ported from the approved website prototype (iteration 2) and the homepage working master (v6).
   Brand values come from tokens.css (the asset library tokens); this file maps them to the short names the
   components use. Black and white are equal grounds. Pink is the one signal.
   Layout scales with the page width through a container (.site), so cqw units mean "percent of the page". */

@font-face{font-family:"Big Shoulders Display";src:url("/assets/fonts/BigShouldersDisplay-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("/assets/fonts/InstrumentSerif-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("/assets/fonts/InstrumentSerif-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Chivo Mono";src:url("/assets/fonts/ChivoMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Chivo Mono";src:url("/assets/fonts/ChivoMono-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--ss-black);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ss-black);color:var(--ss-white)}
img,svg{max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.site{
  --ink:var(--ss-black); --paper:var(--ss-white); --pink:var(--ss-pink); --pink-text-on-white:var(--ss-pink-text-on-white);
  --disp:var(--ss-font-display);
  --serif:var(--ss-font-serif);
  --kmono:var(--ss-font-mono);
  --ksans:var(--ss-font-ui); /* utility stack for long reading and forms, not a brand face */
  --off:var(--ss-cut-offset);
  --gut:clamp(16px,4cqw,64px);
  --sec-y:clamp(56px,7cqw,120px);
  container-type:inline-size;width:100%;background:var(--ink);overflow-x:clip;font-family:var(--ksans);position:relative;
}
.site *{box-sizing:border-box}
.site h1,.site h2,.site h3,.site h4,.site p,.site ul,.site ol,.site dl,.site dd,.site figure{margin:0}
.site a{color:inherit}
.site :focus-visible{outline:2px solid var(--fg);outline-offset:4px}
.th-black{--g:#000000;--fg:#FFFFFF;--sub:#BDBDBD;--line:rgba(255,255,255,.24);--deep:#2E2E2E;--acc-t:#FF2E88;--acc-d:#FF2E88;background:var(--g);color:var(--fg)}
.th-white{--g:#FFFFFF;--fg:#000000;--sub:#666666;--line:rgba(0,0,0,.18);--deep:#D4D4D4;--acc-t:#C2185B;--acc-d:#FF2E88;background:var(--g);color:var(--fg)}
.clear{color:var(--acc-d)}
.mono{font-family:var(--kmono);font-variant-ligatures:none}
.skip{position:absolute;left:12px;top:-60px;z-index:30;background:#FF2E88;color:#000;font:500 14px/1 var(--kmono);padding:10px 14px;text-decoration:none}
.skip:focus{top:12px}

/* the cut: one horizontal slice, offset; hover tunes it back into line */
.cut{position:relative;display:inline-block;white-space:nowrap}
.cut .g{visibility:hidden}
.cut .s{position:absolute;left:0;top:0;white-space:nowrap;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.cut .s1{clip-path:inset(0 0 50% 0);transform:translateX(calc(var(--off) * -1))}
.cut .s2{clip-path:inset(50% 0 0 0);transform:translateX(var(--off))}
.tune:hover .cut .s{transform:none}
@media (prefers-reduced-motion: reduce){.site .cut .s{transition:none}}

/* wordmark (approved: interrupted STATIC, clean pink &, balanced spacing, nav size +12%) */
.k-wm{font-family:var(--disp);font-weight:900;line-height:.9;letter-spacing:.005em;text-transform:uppercase;display:inline-flex;flex-direction:column;text-decoration:none;color:var(--fg)}
.k-wm .row{display:flex;align-items:baseline}
.k-wm .amp{color:var(--acc-d);margin:0 .01em 0 .11em}
.k-wm small{font-family:var(--kmono);font-weight:500;font-size:.27em;letter-spacing:.42em;margin-top:.45em;color:var(--sub);font-variant-ligatures:none}

/* Start a Project button v1 (approved D-43) */
.ss-cta{--p:#FF2E88;--ease:cubic-bezier(.2,.8,.2,1);appearance:none;background:none;border:0;cursor:pointer;text-decoration:none;position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:.65em;padding:.46em .62em;margin:-.46em -.62em;font:500 var(--cta-size,18px)/1 var(--kmono);font-variant-ligatures:none;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;color:var(--fg);transition:color 320ms var(--ease);-webkit-tap-highlight-color:transparent}
.ss-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--p);transform:scaleX(0);transform-origin:left;transition:transform 320ms var(--ease)}
.ss-cta::after{content:"";position:absolute;left:.62em;right:.62em;bottom:.16em;height:.11em;background:currentColor}
.ss-cta svg{display:block;height:.9em;width:auto;flex:none;color:var(--p);transition:color 320ms var(--ease)}
.ss-cta:focus{outline:none}
.ss-cta:focus-visible{outline:2px solid var(--fg);outline-offset:4px}
.ss-cta:is(:hover,:focus-visible){color:#000}
.ss-cta:is(:hover,:focus-visible)::before{transform:none}
.ss-cta:is(:hover,:focus-visible) svg{color:#000}
@media (prefers-reduced-motion: reduce){.ss-cta,.ss-cta::before,.ss-cta svg{transition:none}}

.k-link{font-family:var(--kmono);font-variant-ligatures:none;font-size:max(12px,.85cqw);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--sub);padding-bottom:.2em;text-decoration:none;white-space:nowrap}
.k-link:hover{border-bottom-color:var(--acc-d)}
.lab{display:block;font-family:var(--kmono);font-variant-ligatures:none;font-size:max(12px,.85cqw);letter-spacing:.16em;text-transform:uppercase;color:var(--sub);margin-bottom:clamp(12px,1.4cqw,22px)}
.big{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(46px,7.4cqw,124px);line-height:.88;text-wrap:balance}
.p{font-size:clamp(16px,1.2cqw,19px);line-height:1.55;max-width:62ch}
.sec{position:relative;padding:var(--sec-y) var(--gut)}
.w-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,30cqw);gap:clamp(20px,4cqw,64px);align-items:end;margin-bottom:clamp(28px,4cqw,64px)}
@container (max-width:760px){.w-head{grid-template-columns:minmax(0,1fr)}}
.w-p{font-size:clamp(16px,1.2cqw,19px);line-height:1.55;margin:0 0 16px}

/* ---------- header (all pages) ---------- */
.k-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;position:relative;z-index:5}
.k-nav{display:flex;gap:clamp(18px,2.2cqw,34px);align-items:center;font-family:var(--kmono);font-variant-ligatures:none;font-size:max(12px,.82cqw);letter-spacing:.06em;text-transform:uppercase}
.k-nav a{text-decoration:none;padding:.35em 0;border-bottom:1px solid transparent}
.k-nav a:hover,.k-nav a[aria-current="page"]{border-bottom-color:var(--acc-d)}
.k-nav a.b{border:1px solid var(--fg);padding:.5em .9em}
.k-nav a.b:hover{background:var(--pink);color:#000;border-color:var(--pink)}
.menu-btn{display:none;appearance:none;background:none;border:1px solid var(--fg);color:var(--fg);font:500 13px/1 var(--kmono);font-variant-ligatures:none;letter-spacing:.08em;text-transform:uppercase;padding:10px 12px;cursor:pointer;align-items:center;gap:10px}
.menu-btn i{display:grid;gap:4px;width:16px}
.menu-btn i b{display:block;height:2px;background:currentColor}
.menu-btn i b:nth-child(2){transform:translateX(3px)} /* one bar slipped, the cut in miniature */
.mnav{display:none}
@container (max-width:899px){
  .k-nav{display:none}
  .menu-btn{display:inline-flex}
  .mnav:not([hidden]){display:grid;border-top:1px solid var(--line);margin-top:18px}
  .mnav a{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:44px;line-height:1;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;display:flex;justify-content:space-between;align-items:center}
  .mnav a span{font-family:var(--kmono);font-weight:500;font-size:12px;letter-spacing:.12em;color:var(--sub)}
  .mnav a.b{color:var(--acc-d)}
}

/* ---------- HERO · approved composition, desktop (D-40, D-43, D-44, D-47) ---------- */
.hero{container-type:inline-size;position:relative;background:#000;color:#fff}
.hstage{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden}
.hstage .k-top{position:absolute;left:4cqw;right:4cqw;top:3.2cqw}
.hstage .k-wm{font-size:calc(2.4cqw * 1.12)}
.k-h{position:absolute;left:4cqw;top:11cqw;font-family:var(--disp);font-weight:900;font-size:12.5cqw;line-height:.86;text-transform:uppercase;letter-spacing:.002em;display:flex;flex-direction:column;z-index:2;cursor:default}
.k-line{display:flex;align-items:flex-start;gap:1.4cqw;padding-left:6cqw}
.k-flow{position:absolute;left:10cqw;top:calc(32.5cqw + 5cqw);width:45.75cqw;z-index:2;display:flex;flex-direction:column;gap:2.6cqw}
.k-body{font-family:var(--serif);font-weight:400;font-size:calc(1.85cqw * 1.3);line-height:1.16;letter-spacing:0;text-wrap:pretty;color:var(--sub)}
.k-body .l1{color:var(--fg)}
.k-body .nf{color:var(--acc-d)}
@container (max-width:899px){.k-body .fx{display:block;margin-top:.15em}} /* phone: "Fixed price. No fog." on its own line (Jess, 15 Oct) */
.k-ctas{display:flex;gap:2.4cqw;align-items:center;flex-wrap:wrap}
.k-ctas .ss-cta{--cta-size:1.25cqw}
.k-spec{position:absolute;right:4cqw;top:39cqw;width:33cqw;border:1px solid var(--fg);font-family:var(--kmono);font-variant-ligatures:none;font-size:max(11px,.78cqw);line-height:1.45;z-index:2}
.k-spec header{display:flex;justify-content:space-between;gap:8px;background:var(--fg);color:var(--g);padding:.55em .9em;letter-spacing:.12em;font-weight:500;text-transform:uppercase}
.k-spec dl{display:grid;grid-template-columns:minmax(0,7.5em) minmax(0,1fr)}
.k-spec dt,.k-spec dd{padding:.55em .9em;border-top:1px solid color-mix(in srgb,var(--fg) 30%,transparent)}
.k-spec dt{color:var(--sub);letter-spacing:.1em;text-transform:uppercase}
.k-spec dd{border-left:1px solid color-mix(in srgb,var(--fg) 30%,transparent)}
.k-spec dd.care{color:var(--acc-t)}
/* hero, phone and tablet (provisional: the approved hero is desktop only; phone wrap D-41 is pending QA) */
@container (max-width:899px){
  .hstage{aspect-ratio:auto;height:auto;overflow:visible;padding:20px var(--gut) 44px;display:flex;flex-direction:column;gap:0}
  .hstage > *{flex:none}
  .hstage .k-top{position:static}
  .hstage .k-wm{font-size:26px}
  .site .k-h{position:static;margin-top:clamp(64px,16cqw,104px);font-size:clamp(56px,16.5cqw,120px)}
  .k-line{padding-left:0}
  .k-flow{position:static;width:auto;margin-top:28px;gap:28px}
  .k-body{font-size:clamp(22px,6.2cqw,30px);line-height:1.16;text-wrap:balance}
  .k-ctas{gap:22px 28px}
  .k-ctas .ss-cta{--cta-size:16px}
  .k-spec{position:static;width:100%;margin-top:44px;font-size:12px}
}

/* ---------- compact header for inner pages ---------- */
.ph{padding:clamp(18px,3.2cqw,46px) var(--gut) clamp(48px,6cqw,96px)}
.ph .k-wm{font-size:clamp(26px,calc(2.4cqw * 1.12),48px)}
.ph-t{margin-top:clamp(48px,7cqw,120px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4cqw,64px);align-items:end}
@container (max-width:899px){.ph-t{grid-template-columns:minmax(0,1fr)}}
.ph-t h1{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(56px,9.6cqw,168px);line-height:.86}
.ph-lede{font-family:var(--serif);font-size:clamp(22px,2.2cqw,36px);line-height:1.16;color:var(--sub);max-width:28ch;text-wrap:pretty}
.ph-lede .l1{color:var(--fg)}

/* ---------- studio intro ---------- */
.intro-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5cqw,88px);align-items:start}
@container (max-width:899px){.intro-grid{grid-template-columns:minmax(0,1fr)}}
.intro-copy{display:grid;gap:18px;padding-top:6px}
.intro-copy .lead{font-family:var(--serif);font-size:clamp(24px,2.2cqw,36px);line-height:1.16}
.dodont{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:clamp(36px,5cqw,72px);border:2px solid var(--fg)}
@container (max-width:640px){.dodont{grid-template-columns:minmax(0,1fr)}}
.dodont > div{padding:clamp(18px,2.2cqw,32px)}
.dodont > div + div{border-left:2px solid var(--fg)}
@container (max-width:640px){.dodont > div + div{border-left:0;border-top:2px solid var(--fg)}}
.dodont h3{font-family:var(--kmono);font-variant-ligatures:none;font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;display:flex;justify-content:space-between;gap:12px}
.dodont ul{list-style:none;padding:0;display:grid}
.dodont li{padding:12px 0;border-top:1px solid var(--line);font-size:clamp(16px,1.15cqw,18px);display:grid;grid-template-columns:28px minmax(0,1fr);align-items:baseline}
.dodont li::before{font-family:var(--kmono);font-size:13px;color:var(--sub)}
.dodont .do li::before{content:"+"}
.dodont .dont li::before{content:"\2715"}
.dodont .dont li{color:var(--sub)}
.dodont .dont li span{text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:var(--sub)}
.dodont small{display:block;margin-top:14px;font-size:14px;color:var(--sub)}
.dodont.inv{background:#000;color:#fff;--fg:#fff;--sub:#BDBDBD;--line:rgba(255,255,255,.24)}

/* ---------- work (concept projects) ---------- */
.w-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2cqw,28px)}
@container (max-width:760px){.w-grid{grid-template-columns:minmax(0,1fr)}}
.case{container-type:inline-size;aspect-ratio:4/5;max-width:100%;display:flex;flex-direction:column;justify-content:space-between;padding:7cqw;border:2px solid #000}
.case .top{display:flex;justify-content:space-between;font-family:var(--kmono);font-variant-ligatures:none;font-size:max(11px,3cqw);letter-spacing:.12em;text-transform:uppercase;color:var(--sub)}
.mark{text-align:center}
.mark .art{display:block;fill:currentColor;margin:0 auto}
.mark.m1{font-size:12cqw;line-height:1}
.mark.m1 small{display:block;font-size:.21em;margin-top:.9em}
.mark.m2{font-size:8.6cqw;line-height:1.05;text-align:left;padding-left:6cqw}
.mark.m3{font-family:var(--disp);font-weight:900;font-size:17cqw;letter-spacing:.04em}
.mark.m3 i{display:inline-block;width:.18em;height:.18em;background:currentColor;margin-left:.08em}
.io{display:grid;gap:4px;font-size:max(14px,3.3cqw);line-height:1.35}
.io > span:nth-child(1){color:var(--sub)}
.io > span:nth-child(2){font-weight:600}
.concept-note{margin-top:18px;font-size:14px;color:var(--sub);display:flex;gap:10px;align-items:baseline}
.concept-note b{font-family:var(--kmono);font-variant-ligatures:none;font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg);border:1px solid var(--fg);padding:2px 6px;white-space:nowrap}

/* ---------- transformation (the value proposition) ---------- */
.tf{position:relative}
.tf-row{display:grid;grid-template-columns:1fr 1fr;position:relative}
.tf-row > div{padding:clamp(14px,1.8cqw,28px) var(--gut);border-top:1px solid var(--line);display:flex;align-items:center;min-height:clamp(56px,6cqw,96px)}
.tf-row .in{justify-content:flex-end;text-align:right;font-family:var(--kmono);font-variant-ligatures:none;font-size:clamp(12px,1.25cqw,20px);color:var(--sub)}
.tf-row .out{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(19px,2.7cqw,44px);line-height:1}
.tf-row.last > div{padding-bottom:clamp(40px,6cqw,96px)}
.tf-title > div{border-top:0;padding-top:var(--sec-y);padding-bottom:clamp(20px,2.4cqw,40px);flex-direction:column;align-items:flex-end;justify-content:flex-end}
.tf-title .out{align-items:flex-start}
.tf-title .lab{margin-bottom:10px}
.tf-t{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(34px,10cqw,170px);line-height:.85;color:var(--fg)}
.seam{position:absolute;left:50%;bottom:clamp(14px,2.4cqw,40px);transform:translateX(-50%);width:clamp(36px,4.2cqw,68px);height:clamp(36px,4.2cqw,68px);display:flex;align-items:center;justify-content:center;background:var(--pink);color:#000;font-family:var(--disp);font-weight:900;font-size:clamp(22px,2.6cqw,42px);border:3px solid #000;outline:3px solid #fff;z-index:2}
.tf-row:not(.tf-title):hover .in{text-decoration:line-through;text-decoration-thickness:1px}

/* ---------- packages ---------- */
.p-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2cqw,28px);align-items:stretch}
@container (max-width:899px){.p-grid{grid-template-columns:minmax(0,1fr)}}
.pcard{position:relative;border:2px solid #000;padding:clamp(20px,2.6cqw,40px);display:flex;flex-direction:column;gap:clamp(16px,2cqw,28px)}
.pcard.v10{border-width:6px}
.pcard h3{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(38px,3.6cqw,62px);line-height:.9}
.vol{display:flex;justify-content:space-between;align-items:center;font-family:var(--kmono);font-variant-ligatures:none;font-size:max(12px,.8cqw);letter-spacing:.12em;text-transform:uppercase;color:var(--sub)}
.meter{display:flex;gap:3px}
.meter i{display:block;width:7px;height:16px;border:1px solid var(--fg)}
.v3 .meter i:nth-child(-n+3),.v6 .meter i:nth-child(-n+6),.v10 .meter i{background:var(--fg)}
.pcard .io{font-size:clamp(15px,1.1cqw,18px)}
.pcard ul{list-style:none;padding:0;font-family:var(--kmono);font-variant-ligatures:none;font-size:max(13px,.85cqw);line-height:1.4}
.pcard li{padding:.7em 0;border-top:1px solid var(--line)}
.pcard .fits{font-size:15px;line-height:1.45}
.pcard .fits b{display:block;font-family:var(--kmono);font-variant-ligatures:none;font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);margin-bottom:4px}
.pfoot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-top:6px}
.price{font-family:var(--kmono);font-variant-ligatures:none;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.price b{font-weight:500;color:var(--sub);margin-right:8px}
.pbtn{font-family:var(--kmono);font-variant-ligatures:none;font-weight:500;text-transform:uppercase;letter-spacing:.04em;font-size:14px;padding:12px 16px;background:transparent;color:var(--fg);border:2px solid var(--fg);line-height:1;text-decoration:none;display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.pbtn:hover,.pbtn:focus-visible{background:var(--pink);border-color:var(--pink);color:#000}
.pbtn svg{height:.85em;width:auto;color:var(--pink)}
.pbtn:hover svg,.pbtn:focus-visible svg{color:#000}
.rec{position:absolute;top:-13px;left:clamp(20px,2.6cqw,40px);background:var(--pink);color:#000;font-family:var(--kmono);font-variant-ligatures:none;font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px}
.pk-more{margin-top:clamp(24px,3cqw,44px);display:flex;gap:16px 32px;flex-wrap:wrap;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:20px}
.pk-more p{font-size:15px;color:var(--sub);max-width:62ch}

/* ---------- process ---------- */
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:2px solid var(--fg);counter-reset:s}
@container (max-width:1100px){.steps{grid-template-columns:repeat(4,minmax(0,1fr));position:relative}
@container (max-width:640px){.steps{grid-template-columns:minmax(0,1fr)}}}
@container (max-width:640px){.steps{grid-template-columns:minmax(0,1fr)}}
.steps li{counter-increment:s;padding:20px 18px 26px 0;border-bottom:1px solid var(--line);display:grid;gap:10px;align-content:start;min-width:0}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--kmono);font-variant-ligatures:none;font-size:12px;letter-spacing:.12em;color:var(--sub)}
.steps h3{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(24px,1.9cqw,32px);line-height:.95}
.steps p{font-size:15px;line-height:1.45;color:var(--sub)}
.steps li.you h3{color:var(--acc-d)}
@container (max-width:640px){.steps li{grid-template-columns:44px minmax(0,1fr);column-gap:8px;padding-right:0}.steps li::before{grid-row:span 3;padding-top:6px}}
.fb-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:clamp(24px,4cqw,64px);margin-top:clamp(48px,6cqw,96px);align-items:start}
@container (max-width:899px){.fb-wrap{grid-template-columns:minmax(0,1fr)}}
.fb-wrap h3{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(36px,4cqw,68px);line-height:.9}
.rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--line)}
@container (max-width:760px){.rules{grid-template-columns:minmax(0,1fr)}}
.rules div{padding:20px;display:grid;gap:8px;align-content:start}
.rules div + div{border-left:1px solid var(--line)}
@container (max-width:760px){.rules div + div{border-left:0;border-top:1px solid var(--line)}}
.rules b{font-family:var(--kmono);font-variant-ligatures:none;font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.rules p{font-size:15px;line-height:1.45;color:var(--sub)}
.rules q{font-family:var(--serif);font-size:20px;line-height:1.15;color:var(--fg);quotes:"\201C" "\201D"}

/* ---------- FAQ ---------- */
.faq{border-top:2px solid var(--fg);max-width:1100px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:clamp(16px,1.6cqw,24px) 0;font-size:clamp(18px,1.5cqw,24px);font-weight:600;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--kmono);font-weight:400;font-size:24px;line-height:1;width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--fg)}
.faq details[open] summary::after{content:"\2212";background:var(--fg);color:var(--g)}
.faq summary:hover{color:var(--acc-t)}
.faq .a{padding:0 0 24px;max-width:68ch;display:grid;gap:10px;font-size:16px;line-height:1.55}
.faq .a p{color:var(--fg)}

/* ---------- final CTA + footer ---------- */
.cta{padding-bottom:clamp(20px,3cqw,44px)}
.huge{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(50px,9.6cqw,164px);line-height:.88;margin:0 0 clamp(26px,3.4cqw,56px);cursor:default}
.cta-row{display:flex;gap:20px 40px;align-items:center;flex-wrap:wrap;margin-bottom:clamp(64px,7cqw,120px)}
.cta-row .ss-cta{--cta-size:clamp(17px,1.6cqw,26px)}
.mail{text-decoration:none;font-family:var(--kmono);font-variant-ligatures:none;font-size:clamp(14px,1cqw,17px);border-bottom:1px solid var(--sub);padding-bottom:.2em;user-select:all}
.foot{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.7fr) minmax(0,1fr) minmax(0,1.2fr);gap:28px 32px;align-items:start;border-top:1px solid var(--line);padding-top:clamp(22px,2cqw,32px);font-family:var(--kmono);font-variant-ligatures:none;font-size:13px;color:var(--sub)}
@container (max-width:760px){.foot{grid-template-columns:repeat(2,minmax(0,1fr))}.foot .fw{grid-column:1/-1}}
.foot .k-wm{font-size:clamp(26px,calc(2cqw * 1.12),40px);color:var(--fg)}
.foot h4{font-family:var(--kmono);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);margin-bottom:10px}
.foot ul{list-style:none;padding:0;display:grid;gap:8px;overflow-wrap:anywhere}
.foot a{text-decoration:none}
.foot a:hover{color:var(--fg);text-decoration:underline;text-decoration-color:var(--pink)}
.foot .fine{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px;font-size:12px}

/* ---------- packages page ---------- */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:2px solid #000}
.cmp{border-collapse:collapse;width:100%;min-width:760px;font-size:15px}
.cmp th,.cmp td{text-align:left;vertical-align:top;padding:16px 18px;border-bottom:1px solid var(--line)}
.cmp thead th{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:28px;line-height:.95;border-bottom:2px solid #000;background:#fff;position:sticky;top:0}
.cmp thead th small{display:block;font-family:var(--kmono);font-variant-ligatures:none;font-weight:500;font-size:11px;letter-spacing:.12em;color:var(--sub);margin-bottom:6px}
.cmp tbody th{font-family:var(--kmono);font-variant-ligatures:none;font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sub);width:20%}
.cmp td + td,.cmp th + td,.cmp th + th{border-left:1px solid var(--line)}
.cmp .y{font-weight:600}
.cmp .y::before{content:"+ ";font-family:var(--kmono);color:var(--acc-t)}
.cmp .n{color:var(--sub)}
.cmp .n::before{content:"\2013  ";font-family:var(--kmono)}
.cmp tr.grp th{background:#000;color:#fff;font-size:11px;padding:8px 18px}
.pk-detail{display:grid;gap:clamp(14px,2cqw,28px);grid-template-columns:repeat(3,minmax(0,1fr))}
@container (max-width:899px){.pk-detail{grid-template-columns:minmax(0,1fr)}}
.pk-detail .pcard dl{display:grid;gap:14px}
.pk-detail dt{font-family:var(--kmono);font-variant-ligatures:none;font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);margin-bottom:4px}
.pk-detail dd{font-size:15.5px;line-height:1.5}
.handoff{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);gap:clamp(24px,4cqw,64px);align-items:start}
@container (max-width:899px){.handoff{grid-template-columns:minmax(0,1fr)}}
.tree{font-family:var(--kmono);font-variant-ligatures:none;font-size:clamp(13px,1cqw,15px);line-height:1.5;border:1px solid var(--line);padding:clamp(16px,2cqw,28px);overflow-x:auto;white-space:pre;margin:0}
.tree em{font-style:normal;color:var(--sub)}
.tree b{font-weight:500;color:var(--acc-d)}

/* ---------- start a project ---------- */
.st-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end}
.amp02{width:clamp(110px,17cqw,300px);height:auto;display:block;margin-bottom:-.5cqw}
@container (max-width:640px){.st-head{grid-template-columns:minmax(0,1fr)}.amp02{display:none}}
.form-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,5cqw,88px);align-items:start}
@container (max-width:899px){.form-grid{grid-template-columns:minmax(0,1fr)}}
.form{display:grid;gap:28px}
.fld{display:grid;gap:8px;min-width:0}
.fld label,.fld legend{font-family:var(--kmono);font-variant-ligatures:none;font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:0}
.fld .hint{font-size:14px;color:var(--sub);margin-top:-2px}
.fld .opt{color:var(--sub);font-weight:400;letter-spacing:.06em}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
@container (max-width:640px){.two{grid-template-columns:minmax(0,1fr)}}
.site input[type=text],.site input[type=email],.site textarea,.site select{width:100%;font:inherit;font-family:var(--ksans);font-size:17px;color:#000;background:#fff;border:2px solid #000;border-radius:0;padding:12px 14px;min-height:50px}
.site textarea{min-height:120px;resize:vertical;line-height:1.5}
.site input:focus-visible,.site textarea:focus-visible,.site select:focus-visible{outline:3px solid var(--pink);outline-offset:0}
.site [aria-invalid="true"]{border-color:var(--pink-text-on-white)}
.err{font-size:14px;color:var(--pink-text-on-white);font-weight:600}
.err:empty{display:none}
fieldset.fld{border:0;margin:0;padding:0}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@container (max-width:640px){.choices{grid-template-columns:minmax(0,1fr)}}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.choice span{display:grid;gap:4px;border:2px solid #000;padding:14px 16px;min-height:100%}
.choice b{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:24px;line-height:.95}
.choice small{font-size:14px;color:var(--sub)}
.choice input:checked + span{background:#000;color:#fff;--sub:#BDBDBD}
.choice input:checked + span b::after{content:"";display:inline-block;width:.32em;height:.32em;background:var(--pink);margin-left:.25em;vertical-align:.1em}
.choice input:focus-visible + span{outline:3px solid var(--pink);outline-offset:2px}
.chk{display:flex;gap:10px;align-items:center;font-size:15px}
.chk input{width:20px;height:20px;accent-color:#000}
.form-foot{display:flex;gap:16px 28px;align-items:center;flex-wrap:wrap;border-top:2px solid #000;padding-top:24px}
.form-foot .ss-cta{--cta-size:20px}
.form-foot p{font-size:14px;color:var(--sub)}
.after{border:2px solid #000;position:sticky;top:16px}
.after h2{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(30px,2.6cqw,44px);line-height:.92;padding:20px 20px 16px;border-bottom:2px solid #000}
.after ol{list-style:none;padding:0;counter-reset:a}
.after li{counter-increment:a;display:grid;grid-template-columns:40px minmax(0,1fr);gap:2px 8px;padding:16px 20px;border-bottom:1px solid var(--line)}
.after li:last-child{border-bottom:0}
.after li::before{content:counter(a,decimal-leading-zero);font-family:var(--kmono);font-size:12px;letter-spacing:.1em;color:var(--sub);grid-row:span 2;padding-top:3px}
.after li b{font-size:16px}
.after li span{font-size:14.5px;color:var(--sub);line-height:1.45}
.after li.now b::after{content:"You are here";margin-left:8px;font-family:var(--kmono);font-weight:500;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;background:var(--pink);color:#000;padding:2px 6px;vertical-align:2px}
.done-panel{border:2px solid #000;padding:clamp(22px,3cqw,44px);display:grid;gap:18px;background:#000;color:#fff;--fg:#fff;--sub:#BDBDBD;--line:rgba(255,255,255,.24)}
.done-panel h2{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(44px,5cqw,88px);line-height:.88}
.done-panel p{font-size:17px;max-width:56ch}
.done-panel .row{display:flex;gap:20px 32px;flex-wrap:wrap;align-items:center;margin-top:8px}
.placeholder{font-family:var(--kmono);font-variant-ligatures:none;font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:1px dashed currentColor;padding:3px 7px;color:var(--sub);white-space:nowrap}

/* reading copy · D-57 option C (approved 15 Oct 2026). Serif for short voiced lines, mono for lists, steps and details,
   system stack only for long reading. Exception, Jess 15 Oct: the studio paragraphs and FAQ answers stay in mono for now. */
.site .faq summary{font-family:var(--serif);font-weight:400;font-size:clamp(22px,1.9cqw,30px);line-height:1.1}
.site :is(.w-p,.pk-more p,.pcard .fits){font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.5cqw,24px);line-height:1.2;letter-spacing:0}
.site .pcard .io span{font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.4cqw,22px);line-height:1.2}
.site :is(.pcard ul li,.dodont li){font-family:var(--kmono);font-variant-ligatures:none;text-transform:uppercase;letter-spacing:.03em;font-size:max(13px,.85cqw);line-height:1.45}
.site :is(.steps p,.rules p,.after li span,.pk-detail dd,.concept-note span,.cmp td){font-family:var(--kmono);font-variant-ligatures:none;font-size:14px;line-height:1.6;letter-spacing:0}
.site .cmp td.pr{font-family:var(--disp);font-size:clamp(24px,2cqw,34px);line-height:1}
.site :is(.p,.done-panel p){font-family:var(--ksans);line-height:1.55}
.site :is(.intro-copy .p,.faq .a){font-family:var(--kmono);font-variant-ligatures:none;font-size:clamp(14px,1.05cqw,16px);line-height:1.7;letter-spacing:-.005em}
.site .faq .a{max-width:none}.site .faq .a p{max-width:76ch}

/* process: steps fly into place on scroll (only once JS confirms it can reveal them) */
.steps{grid-template-columns:repeat(4,minmax(0,1fr));position:relative}
.site.fly .steps{border-top-color:transparent}
.site.fly .steps::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--fg);transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.site.fly .steps.in::before{transform:none}
.site.fly .steps li{opacity:0;transform:translate3d(64px,28px,0);transition:opacity .45s ease,transform .75s cubic-bezier(.16,.9,.24,1.12);transition-delay:calc(var(--d,0) * 110ms + 120ms)}
.site.fly .steps li h3{transform:translateX(.16em);transition:transform .5s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0) * 110ms + 520ms)}
.site.fly .steps li.in{opacity:1;transform:none}
.site.fly .steps li.in h3{transform:none}
@media (prefers-reduced-motion: reduce){.site.fly .steps li,.site.fly .steps li h3,.site.fly .steps::before{opacity:1;transform:none;transition:none}}
.steps li.prop h3{color:var(--fg)}
.steps li .tag{justify-self:start;font:500 10.5px/1 var(--kmono);font-variant-ligatures:none;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--fg);padding:3px 6px}
.cmp td.pr{font-family:var(--disp);font-weight:900;font-size:clamp(24px,2cqw,34px);line-height:1}
.pcard .price b + span.amt{font-family:var(--disp);font-weight:900;font-size:clamp(28px,2.3cqw,40px);line-height:1;display:block}
.pk-detail dd .amt{font-family:var(--disp);font-weight:900;font-size:32px;line-height:1}

/* ---------- site footer wrapper (shared footer sits inside) ---------- */
.site-foot{padding:clamp(28px,3cqw,48px) var(--gut) clamp(20px,3cqw,44px)}
.site-foot.flush{padding-top:0}
.cta.join{padding-bottom:0}

/* ---------- placeholder marker (things waiting on a decision, e.g. the form service) ---------- */
.placeholder{white-space:normal}