/* The service pages (/services and /services/<slug>), in whichever Z3 look the visitor is on.
 *
 * Each service page is that look's own document — its fonts, tokens, nav and footer — with the
 * homepage's sections swapped for one service (scripts/z3-build.mjs makes the shells, the routes in
 * app/services fill them from lib/seo.ts). The markup is the same in all three looks; this file
 * dresses it in each look's voice:
 *   Raw      poster brutalism: paper, Anton, thick rules, a red block for the call to action
 *   Desk     one typed sheet on the desk: Besley, Courier, dashed rules, a paper shadow
 *   Machine  a drawing sheet: Plex Condensed, hairlines, numbered items, a title-block box
 * Flat on purpose: no glows, no blur, no coloured halos (Zian's standing rule).
 */

.sp a:not(.btn){color:inherit}
.sp ul{list-style:none;margin:0;padding:0}
.sp p{margin:0}
.sp-faq summary{cursor:pointer;list-style:none}
.sp-faq summary::-webkit-details-marker{display:none}
.sp-faq summary::after{content:"+";float:right;margin-left:16px}
.sp-faq details[open] summary::after{content:"–"}
.sp-cards{margin-top:clamp(36px,5vw,64px)}

/* ===================================================================== RAW */
html[data-z3-look="raw"] .sp{padding:calc(var(--nav) + clamp(36px,6vw,80px)) var(--g) clamp(56px,8vw,120px)}
html[data-z3-look="raw"] .sp-crumbs{display:flex;flex-wrap:wrap;gap:.6em;margin-bottom:28px}
html[data-z3-look="raw"] .sp-crumbs a{text-decoration:none}
html[data-z3-look="raw"] .sp-crumbs a:hover{text-decoration:underline}
html[data-z3-look="raw"] .sp-kicker{display:inline-block;padding:6px 10px;background:var(--ink);color:var(--paper);margin-bottom:22px}
html[data-z3-look="raw"] .sp-h1{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.9;letter-spacing:-.004em;font-size:clamp(48px,8.6vw,150px);margin:0 0 clamp(28px,4vw,52px);max-width:14ch;text-wrap:balance}
html[data-z3-look="raw"] .sp-intro{display:grid;gap:22px;max-width:46em;font-size:clamp(19px,1.6vw,24px);font-weight:500;line-height:1.38;border-top:var(--rule) solid var(--ink);padding-top:28px}
html[data-z3-look="raw"] .sp-sec{margin-top:clamp(56px,8vw,110px);border-top:var(--rule) solid var(--ink);padding-top:22px}
html[data-z3-look="raw"] .sp-sec h2{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.92;font-size:clamp(38px,5.4vw,88px);margin:0 0 26px}
html[data-z3-look="raw"] .sp-list{columns:2 22em;column-gap:var(--g);border-top:var(--rule-2) solid var(--ink)}
html[data-z3-look="raw"] .sp-list li{break-inside:avoid;padding:14px 0;border-bottom:var(--rule-2) solid var(--ink);font-size:18px;font-weight:600}
html[data-z3-look="raw"] .sp-work li{padding:18px 0;border-bottom:var(--rule-2) solid var(--ink)}
html[data-z3-look="raw"] .sp-work b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(28px,3vw,44px);line-height:1}
html[data-z3-look="raw"] .sp-work span{display:block;margin-top:8px;max-width:52em}
html[data-z3-look="raw"] .sp-faq details{border-bottom:var(--rule-2) solid var(--ink)}
html[data-z3-look="raw"] .sp-faq summary{padding:20px 0;font-size:clamp(19px,1.7vw,24px);font-weight:700}
html[data-z3-look="raw"] .sp-faq details p{padding:0 0 22px;max-width:46em}
html[data-z3-look="raw"] .sp-cta{margin-top:clamp(56px,8vw,110px);background:var(--red);color:var(--paper);padding:clamp(28px,5vw,64px) var(--g);margin-left:calc(var(--g) * -1);margin-right:calc(var(--g) * -1)}
html[data-z3-look="raw"] .sp-cta h2{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.9;font-size:clamp(44px,7vw,120px);margin:0 0 18px}
html[data-z3-look="raw"] .sp-cta p{max-width:40em;font-size:clamp(18px,1.5vw,22px);font-weight:500}
html[data-z3-look="raw"] .sp-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
html[data-z3-look="raw"] .sp-cta .btn-paper:hover{background:var(--ink);color:var(--paper)}
html[data-z3-look="raw"] .sp-others{margin-top:clamp(48px,7vw,96px)}
html[data-z3-look="raw"] .sp-others ul{border-top:var(--rule) solid var(--ink)}
html[data-z3-look="raw"] .sp-others li a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:var(--rule-2) solid var(--ink);text-decoration:none;font-family:var(--display);text-transform:uppercase;font-size:clamp(30px,3.6vw,56px);line-height:1}
html[data-z3-look="raw"] .sp-others li a:hover{color:var(--red)}
html[data-z3-look="raw"] .sp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,30em),1fr));border-top:var(--rule) solid var(--ink)}
html[data-z3-look="raw"] .sp-cards li a{display:block;height:100%;padding:24px 0 28px;border-bottom:var(--rule-2) solid var(--ink);text-decoration:none}
html[data-z3-look="raw"] .sp-cards b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(40px,5vw,84px);line-height:.9}
html[data-z3-look="raw"] .sp-cards span{display:block;margin-top:12px;max-width:34em;font-weight:500}
html[data-z3-look="raw"] .sp-cards em{display:inline-block;margin-top:14px;font-style:normal;text-decoration:underline;text-underline-offset:4px}
html[data-z3-look="raw"] .sp-cards li a:hover b{color:var(--red)}
html[data-z3-look="raw"][data-time="night"] .sp-list,html[data-z3-look="raw"][data-time="night"] .sp-list li,html[data-z3-look="raw"][data-time="night"] .sp-sec,html[data-z3-look="raw"][data-time="night"] .sp-intro,html[data-z3-look="raw"][data-time="night"] .sp-work li,html[data-z3-look="raw"][data-time="night"] .sp-faq details,html[data-z3-look="raw"][data-time="night"] .sp-others ul,html[data-z3-look="raw"][data-time="night"] .sp-others li a,html[data-z3-look="raw"][data-time="night"] .sp-cards,html[data-z3-look="raw"][data-time="night"] .sp-cards li a{border-color:currentColor}

/* ==================================================================== DESK */
html[data-z3-look="desk"] .sp{position:relative;max-width:980px;margin:calc(56px + clamp(28px,5vw,72px)) auto clamp(48px,7vw,96px);padding:clamp(28px,5.5vw,76px) clamp(22px,5.5vw,80px);background:var(--paper-w);color:var(--ink);box-shadow:var(--sh-mid);rotate:-.25deg}
html[data-z3-look="desk"] .sp>*{rotate:.25deg}
html[data-z3-look="desk"] .sp-crumbs{display:flex;flex-wrap:wrap;gap:.5em;font:700 12px/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:26px}
html[data-z3-look="desk"] .sp-crumbs a{text-decoration:none}
html[data-z3-look="desk"] .sp-crumbs a:hover{color:var(--red);text-decoration:underline}
html[data-z3-look="desk"] .sp-kicker{font:700 12px/1.3 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
html[data-z3-look="desk"] .sp-h1{font:700 clamp(34px,4.6vw,58px)/1.06 var(--f-disp);letter-spacing:-.015em;margin:0 0 28px;text-wrap:balance}
html[data-z3-look="desk"] .sp-intro{display:grid;gap:18px;font-size:18px;line-height:1.62;color:var(--ink-2);max-width:40em}
html[data-z3-look="desk"] .sp-sec{margin-top:clamp(40px,6vw,64px);padding-top:24px;border-top:1px dashed var(--rule-2)}
html[data-z3-look="desk"] .sp-sec h2{font:700 clamp(24px,2.6vw,32px)/1.15 var(--f-disp);margin:0 0 18px}
html[data-z3-look="desk"] .sp-list li{position:relative;padding:12px 0 12px 34px;border-bottom:1px dashed var(--rule);font-size:17px;line-height:1.5}
html[data-z3-look="desk"] .sp-list li::before{content:"";position:absolute;left:4px;top:15px;width:16px;height:16px;border:1.5px solid var(--ink);border-radius:2px;rotate:-2deg}
html[data-z3-look="desk"] .sp-list li::after{content:"";position:absolute;left:8px;top:15px;width:7px;height:12px;border:solid var(--pen);border-width:0 2.5px 2.5px 0;rotate:40deg}
html[data-z3-look="desk"] .sp-work li{padding:14px 0;border-bottom:1px dashed var(--rule)}
html[data-z3-look="desk"] .sp-work b{display:block;font:700 20px/1.2 var(--f-disp)}
html[data-z3-look="desk"] .sp-work span{display:block;margin-top:6px;color:var(--ink-2)}
html[data-z3-look="desk"] .sp-faq details{border-bottom:1px dashed var(--rule-2)}
html[data-z3-look="desk"] .sp-faq summary{padding:16px 0;font:700 18px/1.35 var(--f-disp)}
html[data-z3-look="desk"] .sp-faq summary::after{font-family:var(--f-mono)}
html[data-z3-look="desk"] .sp-faq details p{padding:0 0 18px;color:var(--ink-2);line-height:1.6}
html[data-z3-look="desk"] .sp-cta{margin-top:clamp(40px,6vw,64px);padding:24px 26px 26px;background:var(--sticky);rotate:.6deg;box-shadow:var(--sh)}
html[data-z3-look="desk"] .sp-cta h2{font:700 30px/1.1 var(--f-hand);margin:0 0 8px}
html[data-z3-look="desk"] .sp-cta p{color:var(--ink);line-height:1.55;max-width:38em}
html[data-z3-look="desk"] .sp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
html[data-z3-look="desk"] .sp-others{margin-top:clamp(36px,5vw,56px)}
html[data-z3-look="desk"] .sp-others h2{font:700 12px/1.3 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
html[data-z3-look="desk"] .sp-others li a{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px dashed var(--rule);text-decoration:none;font:700 19px/1.3 var(--f-disp)}
html[data-z3-look="desk"] .sp-others li a:hover{color:var(--red)}
html[data-z3-look="desk"] .sp-cards li a{display:block;padding:20px 0 22px;border-bottom:1px dashed var(--rule-2);text-decoration:none}
html[data-z3-look="desk"] .sp-cards b{display:block;font:700 clamp(22px,2.4vw,30px)/1.15 var(--f-disp)}
html[data-z3-look="desk"] .sp-cards span{display:block;margin-top:6px;color:var(--ink-2);max-width:40em}
html[data-z3-look="desk"] .sp-cards em{display:inline-block;margin-top:10px;font:700 12px/1.3 var(--f-mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px}
html[data-z3-look="desk"] .sp-cards li a:hover b{color:var(--red)}

/* ================================================================= MACHINE */
html[data-z3-look="machine"] .sp{position:relative;z-index:1;margin:calc(var(--top) + clamp(18px,3vw,40px)) var(--gx) clamp(48px,7vw,96px);padding:0}
html[data-z3-look="machine"] .sp-crumbs{display:flex;flex-wrap:wrap;gap:.5em;font:500 10.5px/1.25 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);padding-bottom:12px;border-bottom:1px solid var(--hair);margin-bottom:22px}
html[data-z3-look="machine"] .sp-crumbs a{text-decoration:none}
html[data-z3-look="machine"] .sp-crumbs a:hover{color:var(--ink);text-decoration:underline}
html[data-z3-look="machine"] .sp-kicker{font:500 10.5px/1.25 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--red-ink);margin-bottom:10px}
html[data-z3-look="machine"] .sp-h1{font:500 clamp(36px,5.2vw,78px)/1.02 var(--f-cond);letter-spacing:-.015em;margin:0 0 26px;max-width:18ch;text-wrap:balance}
html[data-z3-look="machine"] .sp-intro{display:grid;gap:16px;max-width:52em;font:400 17px/1.6 var(--f-sans);color:var(--ink-2);padding-left:18px;border-left:2px solid var(--ink)}
html[data-z3-look="machine"] .sp-sec{margin-top:clamp(40px,6vw,72px);background:var(--paper-3);border:1px solid var(--hair)}
html[data-z3-look="machine"] .sp-sec h2{margin:0;padding:12px 18px;border-bottom:1px solid var(--hair);font:500 10.5px/1.25 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
html[data-z3-look="machine"] .sp-list{counter-reset:it}
html[data-z3-look="machine"] .sp-list li{counter-increment:it;display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--hair-2);font:400 16px/1.5 var(--f-sans)}
html[data-z3-look="machine"] .sp-list li:last-child{border-bottom:0}
html[data-z3-look="machine"] .sp-list li::before{content:counter(it);display:grid;place-items:center;width:30px;height:30px;border:1.5px solid var(--ink);border-radius:50%;font:500 13px/1 var(--f-mono)}
html[data-z3-look="machine"] .sp-work li{padding:14px 18px;border-bottom:1px solid var(--hair-2)}
html[data-z3-look="machine"] .sp-work li:last-child{border-bottom:0}
html[data-z3-look="machine"] .sp-work b{display:block;font:500 22px/1.15 var(--f-cond)}
html[data-z3-look="machine"] .sp-work span{display:block;margin-top:6px;color:var(--ink-2)}
html[data-z3-look="machine"] .sp-faq details{border-bottom:1px solid var(--hair-2)}
html[data-z3-look="machine"] .sp-faq details:last-child{border-bottom:0}
html[data-z3-look="machine"] .sp-faq summary{padding:14px 18px;font:500 19px/1.3 var(--f-cond)}
html[data-z3-look="machine"] .sp-faq summary::after{font-family:var(--f-mono);color:var(--ink-3)}
html[data-z3-look="machine"] .sp-faq details p{padding:0 18px 16px;color:var(--ink-2);max-width:58ch}
html[data-z3-look="machine"] .sp-cta{margin-top:clamp(40px,6vw,72px);border:2px solid var(--ink);background:var(--paper-3);padding:clamp(18px,3vw,30px)}
html[data-z3-look="machine"] .sp-cta h2{font:500 clamp(28px,3.4vw,46px)/1.05 var(--f-cond);margin:0 0 10px}
html[data-z3-look="machine"] .sp-cta p{max-width:52em;color:var(--ink-2)}
html[data-z3-look="machine"] .sp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
html[data-z3-look="machine"] .sp-others{margin-top:clamp(36px,5vw,56px)}
html[data-z3-look="machine"] .sp-others h2{font:500 10.5px/1.25 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}
html[data-z3-look="machine"] .sp-others ul{border-top:1px solid var(--hair)}
html[data-z3-look="machine"] .sp-others li a{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--hair);text-decoration:none;font:500 20px/1.2 var(--f-cond)}
html[data-z3-look="machine"] .sp-others li a:hover{color:var(--red-ink)}
html[data-z3-look="machine"] .sp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,26em),1fr));gap:0;border:1px solid var(--hair);background:var(--paper-3)}
html[data-z3-look="machine"] .sp-cards li a{display:block;height:100%;padding:20px 18px 22px;border-right:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2);text-decoration:none}
html[data-z3-look="machine"] .sp-cards b{display:block;font:500 clamp(24px,2.6vw,34px)/1.05 var(--f-cond)}
html[data-z3-look="machine"] .sp-cards span{display:block;margin-top:8px;color:var(--ink-2)}
html[data-z3-look="machine"] .sp-cards em{display:inline-block;margin-top:10px;font:500 10.5px/1.25 var(--f-mono);font-style:normal;letter-spacing:.09em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px}
html[data-z3-look="machine"] .sp-cards li a:hover b{color:var(--red-ink)}