/* svc-1.css — the /services/ silo page system (category + child pages).
   Production form of the approved "direction D" hybrid: C ("The System")
   contributes the skeleton — hairline rows, Light-300 display type, grid-rows
   expand panels, plus-glyph toggles, sticky scroll-spy index, dark proof
   bands, the cursor evidence card. B ("The Field") contributes the skin — a
   seeded point-field engine in a compressed dark hero band (loose wave rows
   on category pages, a converged beam on child pages; field resolution
   encodes depth) plus dot-matrix proof figures. The field appears in exactly
   two places: the hero band and inside the evidence card. Everything else
   stays disciplined bone-white. Black/white only; reads perfectly with JS
   off. Behaviour contract lives in svc-1.js; how to build a page from this
   system is documented in docs/services-pages/template-notes.md. */

:root{--pad:clamp(1.25rem,2.4vw,2.5rem);--bone:#e9e9e7;--ink:#000;--line-d:rgba(233,233,231,.22)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bone);color:var(--ink);font-family:'Plus Jakarta Sans',sans-serif;font-size:1.02rem;font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
main{padding-inline:var(--pad);padding-bottom:0;overflow-x:clip}
main>:last-child{margin-bottom:0}
img{max-width:100%}
.arrow{width:.72em;height:.72em;vertical-align:baseline;flex-shrink:0}
.cap-label{font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* ---- depth trail: the breadcrumb as a designed object. Ancestors ghosted,
        current level solid — the path the field condensed along. ---- */
.trail{margin:0}
.trail ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin:0;padding:0;opacity:.35;font-size:.64rem}
.trail ol::before{content:"";width:clamp(1.6rem,4vw,3rem);height:1px;background:currentColor}
.trail li{display:flex;align-items:center;gap:.9rem}
.trail li+li::before{content:"/";font-weight:400;letter-spacing:0;opacity:.35}
.trail a{opacity:.5}
.trail a:hover{opacity:1}
.trail [aria-current]{border-bottom:1px solid currentColor;padding-bottom:2px}

/* ---- headings: the zoom ladder. Category H1 large; child H1 one step
        down. Both H1s are sentences, so both wrap on a measure. ---- */
h1{font-weight:300;letter-spacing:-.03em;margin:.5rem 0 1.4rem}
.page-category h1{font-size:clamp(2.6rem,6.8vw,6.2rem);line-height:1.02;max-width:16ch}
.page-child h1{font-size:clamp(2.4rem,6.4vw,5.4rem);line-height:1.04;max-width:22ch}
.page-intro{font-size:clamp(1.05rem,1.4vw,1.35rem);line-height:1.55;max-width:56ch;margin:clamp(2.75rem,5.5vw,4.5rem) 0 clamp(2.5rem,5vw,4.5rem)}
.page-intro p{margin:0 0 1.1em}
.page-intro p:last-child{margin-bottom:0}
@media (min-width:900px){.page-intro{margin-left:auto;margin-right:clamp(0rem,6vw,6rem)}}

/* ================= the hero band: B's field compressed into C's frame =====
   One dark band at the top of each page. The canvas assembles its points from
   scatter into the page's formation — loose rows on the category page, the
   converging beam on the child. Static SVG holds the composition when the
   engine can't run. ================= */
.band-hero{position:relative;background:#000;color:var(--bone);margin:0 calc(var(--pad)*-1);overflow:hidden;scroll-margin-top:80px}
/* legibility scrim: the field dims where the text lives, stays bright above */
.band-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.62) 88%);pointer-events:none}
.field-canvas{position:absolute;inset:0;width:100%;height:100%;display:none}
.field-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.9}
.field-live .field-canvas{display:block}
.field-live .field-fallback{display:none}
.band-hero .band-content{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(24rem,74svh,46rem);padding:calc(var(--chrome-header-h,100px) + 2rem) var(--pad) clamp(2.2rem,4.5vh,3.4rem)}
@media (max-width:760px){.band-hero .field-canvas,.band-hero .field-fallback{opacity:.55}}

/* the lede closes the band — conversion lives in the chrome (menu Let's Talk
   + footer Let's chat), so no CTA competes with the field */
.hero-promise{font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.55;font-weight:300;max-width:46ch;margin:0;opacity:.85}

/* hero proof strip: B's dot-matrix figures, still on black */
.proof{position:relative;z-index:1;border-top:1px solid var(--line-d);margin-top:clamp(2.2rem,4.5vh,3.4rem);padding:clamp(1.8rem,3.5vw,3rem) var(--pad) clamp(2.4rem,4.5vw,3.6rem);scroll-margin-top:80px}
.proof ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem clamp(1.5rem,3vw,3rem)}
.proof .fig{display:block;font-size:clamp(1.9rem,3.6vw,3.3rem);font-weight:300;letter-spacing:-.02em;line-height:1.1;margin:0 0 .55rem}
.proof .fig a:hover{text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
.proof p{margin:0;font-size:.83rem;line-height:1.5;opacity:.62;max-width:26ch}
.proof p a{text-decoration:underline;text-underline-offset:.25em}
@media (max-width:900px){.proof ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.proof ul{grid-template-columns:1fr;gap:1.6rem}.proof p{max-width:40ch}}
/* dot-matrix figures: text stays for AT/no-JS; canvas replaces it visually */
.dm{position:relative;display:inline-block}
.dm-canvas{display:block}
.dm.dm-live .dm-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- sticky page index (child pages): the anatomy as a persistent mini-nav.
        Sits flush under the dark band. ---- */
.page-index{position:sticky;top:0;z-index:40;background:var(--bone);margin:0 calc(var(--pad)*-1) 0;padding:0 var(--pad);border-bottom:1px solid var(--ink)}
.page-index ol{position:relative;list-style:none;display:flex;gap:clamp(1.1rem,2.6vw,2.4rem);margin:0;padding:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.page-index ol::-webkit-scrollbar{display:none}
.page-index a{display:block;padding:.85rem 0 calc(.85rem - 2px);border-bottom:2px solid transparent;white-space:nowrap;opacity:.4}
.page-index a:hover{opacity:.8}
.page-index a.current{opacity:1;border-bottom-color:var(--ink)}

/* ---- section frame ---- */
.sect{margin:clamp(3.2rem,6.5vw,5.5rem) 0 0;scroll-margin-top:80px}
.sect-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0 0 clamp(1.5rem,3vw,2.4rem)}
.sect-head h2{font-size:clamp(1.9rem,3vw,2.875rem);font-weight:300;line-height:1.1;letter-spacing:-.01em;margin:0}
.sect-head .cap-label{opacity:.55;text-align:right}

/* ---- expand rows: the one grammar (hub rows, process steps, FAQ) ---- */
.xrow-list{border-bottom:1px solid var(--ink)}
.xrow{border-top:1px solid var(--ink);scroll-margin-top:120px}
.xrow-head{margin:0}
.xrow-toggle{display:flex;width:100%;align-items:baseline;gap:1.1rem;background:none;border:0;padding:clamp(1rem,2vw,1.6rem) 0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.xrow-name{font-size:clamp(2rem,5.5vw,4.75rem);font-weight:300;line-height:1.05;letter-spacing:-.02em}
.xrow-aside{margin-left:auto;white-space:nowrap;opacity:.55}
.xrow-plus{position:relative;width:1.05rem;height:1.05rem;flex:none;align-self:center}
.xrow-plus::before,.xrow-plus::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1.5px;margin-top:-.75px;background:var(--ink)}
.xrow-plus::after{transform:rotate(90deg)}
.xrow.open .xrow-plus::after{transform:rotate(0deg)}
@media (hover:hover){.xrow-toggle:hover .xrow-name{transform:translateX(clamp(.4rem,1.4vw,1.4rem))}}
@media (max-width:640px){.xrow-aside{display:none}}
.xrow-panel{display:grid;grid-template-rows:0fr;visibility:hidden}
.xrow.open .xrow-panel{grid-template-rows:1fr;visibility:visible}
.xrow-panel-inner{overflow:hidden;min-height:0}

/* rows without a right-hand label park the plus at the row edge */
.xrow--step .xrow-plus,.xrow--q .xrow-plus{margin-left:auto}
/* row variant: process step (numbered — the order is the method) */
.xrow--step .xrow-name{font-size:clamp(1.5rem,3.2vw,2.7rem)}
.step-num{font-size:clamp(1.5rem,3.2vw,2.7rem);font-weight:300;opacity:.35;min-width:2ch;font-variant-numeric:tabular-nums}
/* row variant: question */
.xrow--q .xrow-toggle{padding:clamp(.9rem,1.6vw,1.3rem) 0}
.xrow--q .xrow-name{font-size:clamp(1.1rem,1.9vw,1.55rem);font-weight:400;line-height:1.35;letter-spacing:-.01em}

/* ---- category hub panel ---- */
.hub-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,4fr) minmax(0,3fr);gap:1.5rem clamp(2rem,4vw,4rem);padding:.3rem 0 clamp(1.8rem,3vw,3rem)}
.hub-teaser{margin:0;font-size:clamp(1.02rem,1.3vw,1.3rem);line-height:1.55;font-weight:300;max-width:56ch}
.hub-teaser strong{font-weight:600}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin:0;padding:0;align-content:flex-start}
.chips li{border:1px solid var(--ink);border-radius:999px;padding:.55em 1.15em;font-size:.9rem;font-weight:500;line-height:1.2}
@media (hover:hover){.chips li:hover{background:var(--ink);color:var(--bone)}}
.hub-action{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:1.2rem}
.go-deeper{display:inline-flex;align-items:center;gap:.55em;font-weight:500;border-bottom:1px solid var(--ink);padding-bottom:.2em}
.go-deeper .arrow{width:.9em;height:.9em}
@media (max-width:900px){.hub-grid{grid-template-columns:1fr;gap:1.2rem}}

/* ---- what you get ---- */
.get-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--ink)}
.get-list li{display:grid;grid-template-columns:minmax(180px,300px) 1fr;gap:.35rem clamp(1.5rem,4vw,3.5rem);padding:1.05rem 0;border-top:1px solid var(--ink)}
.get-name{font-weight:500}
.get-list p{margin:0;opacity:.8;max-width:62ch}
@media (max-width:700px){.get-list li{grid-template-columns:1fr}}

/* step panel body */
.step-body{padding:.2rem 0 clamp(1.6rem,2.6vw,2.4rem)}
.step-body>p{margin:0;max-width:58ch;font-weight:300;font-size:clamp(1rem,1.25vw,1.25rem);line-height:1.55}

/* qa panel body */
.qa-body{padding:0 0 clamp(1.4rem,2.4vw,2rem);margin:0;max-width:62ch;opacity:.85}
.qa-body a{border-bottom:1px solid var(--ink)}

/* ---- dark band (case study / selected work echo) — no field here; the dark
        of the work band is C's, and the restraint is the point ---- */
.band{background:#000;color:var(--bone);margin:clamp(3.2rem,6.5vw,5.5rem) calc(var(--pad)*-1) 0;padding:4.5rem var(--pad);scroll-margin-top:40px}
.band .sect-head{margin-bottom:clamp(1.8rem,3.5vw,2.8rem)}
/* the artwork box matches the source aspect so nothing meaningful is cropped */
.case-media{display:block;overflow:hidden;background:#5F6567;aspect-ratio:3/2}
.case-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.case-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:1.5rem clamp(2rem,4vw,4rem);align-items:start;padding-top:1.4rem}
.case-tags{list-style:none;display:flex;flex-wrap:wrap;gap:.2rem .55rem;margin:0 0 .6rem;padding:0;font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
.case-tags li:not(:last-child)::after{content:","}
.case-grid h3{font-size:clamp(2.2rem,5vw,4.25rem);font-weight:300;line-height:1.05;letter-spacing:-.02em;margin:0}
.case-copy p{margin:0 0 1.1em;max-width:52ch;opacity:.85}
.case-quote{margin:0 0 1.4rem;padding-left:1.1rem;border-left:1px solid var(--line-d)}
.case-quote p{margin:0 0 .6em;font-weight:300;font-size:clamp(1.02rem,1.3vw,1.25rem);line-height:1.55;max-width:44ch;opacity:1}
.case-quote cite{display:block;font-style:normal;font-size:.83rem;opacity:.6}
.case-link{display:inline-flex;align-items:center;gap:.5em;font-weight:500;border-bottom:1px solid var(--bone);padding-bottom:.2em}
.case-link .arrow{width:.9em;height:.9em}
.band .aside-note{margin:2.2rem 0 0;font-size:.9rem;opacity:.6;max-width:60ch}
.band .aside-note a{border-bottom:1px solid rgba(233,233,231,.5)}
@media (max-width:760px){.case-grid{grid-template-columns:1fr}}

/* ---- related services ---- */
.rel-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--ink)}
.rel-list li{border-top:1px solid var(--ink)}
.rel-list a{display:flex;align-items:baseline;gap:1rem;padding:1.05rem 0}
.rel-name{font-size:clamp(1.25rem,2.1vw,1.75rem);font-weight:300;letter-spacing:-.01em}
.rel-note{margin-left:auto;text-align:right;opacity:.55;font-size:.85rem;max-width:44ch}
.rel-list .arrow{align-self:center;width:.9em;height:.9em}
@media (hover:hover){.rel-list a:hover .rel-name{transform:translateX(clamp(.3rem,1vw,.9rem))}}
@media (max-width:640px){.rel-note{display:none}}

/* ---- cursor card: each service's one-line promise with B's field living
        inside it. One micro-canvas sits behind the text and re-forms into the
        hovered service's glyph — the same engine as the hero, one order down. */
.cursor-card{position:fixed;left:0;top:0;z-index:60;width:clamp(250px,24vw,340px);pointer-events:none;opacity:0;visibility:hidden;will-change:transform;display:grid;background:var(--ink);border:1px solid var(--ink)}
.cursor-card.on{opacity:1;visibility:visible}
.cursor-field{grid-area:1/1;width:100%;height:100%;z-index:0}
.cursor-item{grid-area:1/1;position:relative;z-index:1;margin:0;color:var(--bone);opacity:0;padding:1.1rem 1.25rem 1.25rem}
.cursor-item.active{opacity:1}
.cursor-kicker{display:block;opacity:.5;margin-bottom:1rem}
.cursor-promise{display:block;font-size:1.3rem;font-weight:300;line-height:1.45;letter-spacing:-.01em}
@media (hover:none){.cursor-card{display:none}}

/* ---- motion, all of it gated ---- */
@media (prefers-reduced-motion:no-preference){
html{scroll-behavior:smooth}
.xrow-panel{transition:grid-template-rows .55s cubic-bezier(.25,.7,.2,1),visibility .55s}
.xrow-name,.rel-name{transition:transform .45s cubic-bezier(.25,.7,.2,1)}
.xrow-plus::after{transition:transform .35s cubic-bezier(.25,.7,.2,1)}
.chips li{transition:background-color .25s,color .25s}
.trail a,.page-index a{transition:opacity .25s,border-color .25s}
.cursor-card{transition:opacity .3s,visibility .3s}
.cursor-item{transition:opacity .35s ease}
.case-media img{transition:transform .6s cubic-bezier(.2,.6,.2,1)}
@media (hover:hover){.case-media:hover img{transform:scale(1.04)}}
}