/* ============ v5 legacy adapter — renders old page markup in v5 design ============
   Loads LAST, so at equal specificity it is the winner by design.
   Any component that styles.css and this file both touched now has exactly ONE
   definition: the visual half lives here, the structural half in styles.css.
   ================================================================================ */
/* only the retired token NAMES need re-pointing — the v5 values themselves are
   declared once, in site.css :root */
:root{--grey:#5C5851;--accent:#171614;--accent2:#171614;--head:'Space Grotesk',ui-sans-serif,system-ui,sans-serif}
body{font-family:var(--sans);background:var(--canvas);color:var(--ink)}
nav{border-bottom:0;background:transparent;position:static}
#prog{display:none}
main{display:flex;flex-direction:column;gap:var(--gap);padding:var(--gap) clamp(10px,3vw,56px) 0;margin:0 auto;width:100%;box-sizing:border-box}
main>section{background:var(--card);border-radius:var(--r-5);overflow:hidden;padding:clamp(52px,7vw,100px) 0;margin:0}
main>section.dark{background:var(--ink);color:#F3F1EC;--accent:#F3F1EC;--accent2:#F3F1EC}
main>section.pagehero{background:var(--tint);color:var(--ink);padding:clamp(140px,19vh,190px) 0 clamp(56px,7vw,90px)}
main>section.pagehero .lead{color:var(--muted)}
.wrap{max-width:1220px;margin:0 auto;padding:0 clamp(22px,4.5vw,64px)}
h1,h2{font-weight:500;letter-spacing:-.03em}
h1{font-size:clamp(40px,5.6vw,76px);line-height:1.04}
h2{font-size:clamp(32px,4.2vw,56px);line-height:1.06}
h3{font-family:var(--sans);font-weight:500;letter-spacing:-.01em}
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  main h1,main h2{background-image:linear-gradient(180deg,var(--ink) 30%,#655F58 135%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
  main .dark h1,main .dark h2{background-image:linear-gradient(180deg,#FAF9F6 30%,#948F86 135%)}
  main .pagehero h1,main .pagehero h2{background-image:linear-gradient(180deg,var(--ink) 30%,#655F58 135%)}
  h1 .accent,h2 .accent{background:none;-webkit-text-fill-color:inherit;color:inherit;animation:none}
}
p.lead{color:var(--muted);font-size:clamp(17px,1.5vw,19px)}
.dark p,.dark .lead{color:#B7B2A8}

/* ---------- SC-096 label role A: mono, 13.5px, weight 400, '// ' prefix ---------- */
.eyebrow{font-family:var(--mono);font-size:var(--fs-3);letter-spacing:0;text-transform:none;font-weight:400;color:var(--muted)}
/* SC-086 the glyph stays visible, the screen reader stops reading it. The plain
   declaration is repeated first so browsers without alt-text support keep it. */
.eyebrow.line::before,.eyebrow:not(.line)::before{content:"// ";width:auto;height:auto;background:none;color:var(--ink)}
.eyebrow.line::before,.eyebrow:not(.line)::before{content:"// " / "";width:auto;height:auto;background:none;color:var(--ink)}
.dark .eyebrow{color:#B7B2A8}
.dark .eyebrow.line::before,.dark .eyebrow:not(.line)::before{color:#F3F1EC}
.eyebrow svg{display:none}

/* ---------- SC-096 label role B: mono, 11.5px, weight 500, uppercase, .08em ----------
   .sidelabel (211 uses) was 11px/.12em/700 in Space Grotesk — a third label
   convention AND a synthesised weight the font request never loads (SC-097). */
.sidelabel,.card .k{font-family:var(--mono);font-size:var(--fs-1);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--s-2)}
.evdate .m{font-family:var(--mono);font-size:var(--fs-1);font-weight:500;letter-spacing:.08em;text-transform:uppercase}

.btn{border-radius:var(--r-full);font-weight:500;font-size:var(--fs-5);padding:14px var(--s-6);border:0}
.btn-p{background:var(--ink);color:#FAF9F6;box-shadow:none}
.btn-p:hover{background:#44413B;transform:none;box-shadow:none}
.dark .btn-p,nav .btn-p{background:#FAF9F6;color:var(--ink);box-shadow:none}
.dark .btn-p:hover{background:#D8D4CC;box-shadow:none}
.btn-o{background:transparent;border:0;box-shadow:inset 0 0 0 1.5px currentColor;color:inherit}
.btn-o:hover{background:var(--ink);color:#FAF9F6;box-shadow:inset 0 0 0 1.5px var(--ink);transform:none}
.dark .btn-o:hover{background:#F3F1EC;color:var(--ink);box-shadow:inset 0 0 0 1.5px #F3F1EC}
.card{background:var(--canvas);border:0;border-radius:var(--r-4)}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-1)}
.card::after{display:none}
.dark .card{background:var(--dark-card);border:1px solid var(--dark-line)}
.dark .card:hover{border-color:rgba(250,249,246,.4);box-shadow:none}
.chip{font-family:var(--mono);border-radius:var(--r-full);border:1px solid var(--line)}
.dark .chip{border-color:var(--dark-line);background:rgba(33,31,27,.5);color:#F3F1EC}
.tag,.pill{font-family:var(--mono);border-radius:var(--r-full)}
.field input,.field select,.field textarea{border-radius:var(--r-2);border:1px solid rgba(23,22,20,.48);background:#fff;font-family:var(--sans)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);box-shadow:var(--sh-focus)}
html.nojs .reveal{opacity:1;transform:none}
.crumb{font-family:var(--mono);font-size:var(--fs-2)}
/* SC-088 the .orb / .gridbg layers composite to the exact background colour but
   still cost two full-viewport blurs and a perpetual animation per page.
   Neutralised here until the elements are cut from the 41 legacy pages. */
.orb,.gridbg{display:none !important}
/* SC-075 footer is defined once, in site.css — the 1260px cap made it 94px
   narrower than the section cards it is supposed to line up with */

.tavatar{background:linear-gradient(135deg,#171614,#57534C)}
.tavatar span{color:#FAF9F6}
main>section.dark{background:var(--ink) !important}

/* SC-010 light-surface chip default (dark variant stays scoped in site.css) */
main>section:not(.dark) .chip{background:transparent;color:var(--ink);border:1px solid var(--line);-webkit-backdrop-filter:none;backdrop-filter:none}
main>section:not(.dark) .chip svg{color:var(--ink)}
/* SC-011 light panels inside dark sections must not inherit dark tokens */
.dark .wizard,.dark .dlgate,.dark .card[style*="background:#fff"]{--accent:var(--ink);--accent2:var(--ink);color:var(--ink)}
.dark .wizard p,.dark .dlgate p,.dark .wizard .lead{color:var(--muted)}
.dark .wizard .btn-p,.dark .dlgate .btn-p{background:var(--ink);color:#FAF9F6}
.dark .wizard h2,.dark .wizard h3,.dark .dlgate h3{color:var(--ink)}

/* ---------- SC-036 / SC-094 the featured band ----------
   site.css:.band is the index.html grid. Every legacy band is either
   <div class="wrap band"> or a .band inside .wrap, and was authored for flex
   with inline ratios (1.4/0.8, 1.2/300px). Restoring flex here — explicitly,
   not by source order — makes those 46 inline values live again. */
.wrap.band,.wrap .band{display:flex;gap:var(--s-8);align-items:center;flex-wrap:wrap}
.wrap.band>div,.wrap .band>div{flex:1;min-width:280px}
@media (max-width:760px){
  /* grid beats the inline flex-basis values, so the columns really do stack */
  .wrap.band,.wrap .band{display:grid;grid-template-columns:1fr;gap:var(--s-7)}
  .wrap.band>div,.wrap .band>div{min-width:0}
  /* SC-094 the qualifying sidebar ("Best for", "Industry fit", "Deployment")
     is the second grid child, so phone readers met it after ~900 words. */
  .wrap.band>div:has(.sideblock),.wrap .band>div:has(.sideblock){order:-1}
}

/* ---------- SC-092 the site-wide chip row ----------
   site.css's centred, 26px-column-gap .chips is the homepage hero row and is
   now scoped to it; this is the default for the 24 legacy 'Key features' rows. */
.chips{display:flex;flex-wrap:wrap;gap:var(--gap);margin-top:var(--s-5);justify-content:flex-start}

/* ---------- SC-087 .callout ----------
   was the only dashed border and the only 6px radius on the site, over a
   background that composited to 1.05:1 with text in a retired cool grey.
   #5C5851 on #FAF9F6 = 6.71:1. */
.callout{border:0;border-left:2px solid var(--ink);background:transparent;border-radius:0;padding:var(--s-3) 0 var(--s-3) var(--s-4);font-size:var(--fs-3);color:var(--muted)}
.dark .callout{border-left-color:#F3F1EC;color:#B7B2A8}
.callout a{display:inline-block;padding:var(--s-1) 0}

/* ---------- SC-090 .roicard / .roi3 ----------
   rgba(0,0,0,.3) was a second, non-token border weight (2.11:1) and 11px a
   fifth card radius. The 3-up grid collapsed on a 520px VIEWPORT query while
   its container was the ~375px-inner spec sidebar — now container-relative. */
.roi3{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--gap);margin-top:6px}
.roicard{background:transparent;border:1px solid var(--line);border-radius:var(--r-4);padding:var(--s-4);text-align:center}
.roicard .n{font-size:var(--fs-6);font-weight:600;color:var(--accent);font-family:var(--head);line-height:1.15}
.roicard .d{font-size:var(--fs-1);color:var(--grey);margin-top:6px}
.dark .roicard{background:transparent;border-color:var(--dark-line)}
.dark .roicard .n{color:var(--accent2)}
.dark .roicard .d{color:#B7B2A8}

/* ---------- SC-091 the final step drew a rule under nothing ---------- */
.step:last-child{border-bottom:0}
/* forward-support for the <ol class="steps"> markup pass */
ol.steps{list-style:none;margin:0;padding:0}

/* ---------- SC-089 components inside dark sections kept retired cool-black
   borders (#26262b = 1.06:1, #33333a = 1.31:1 against --ink) ---------- */
.dark .tile,.dark .step,.dark .tag,.dark .evdate,.dark .scbadge{border-color:var(--dark-line)}
.dark .tile{background:var(--dark-card)}

/* ---------- SC-093 the insights category tabs ----------
   The strip sits in its own <section>, which the adapter renders as a separate
   26px card floating above the content it belongs to. Join the two surfaces. */
main>section:has(>.wrap>.subnav){border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:calc(-1 * var(--gap))}
main>section:has(>.wrap>.subnav)+section{border-top-left-radius:0;border-top-right-radius:0}

/* ---------- SC-079 / SC-080 the wizard panel and its chrome ----------
   #fff on --card was a 1.05:1 panel edge; every interior border composited to
   ~1.31:1 and the selected option to 1.20:1. rgba(23,22,20,.48) measures
   3.19:1 on --card and 3.23:1 on #fff — both clear the 1.4.11 floor. */
.wizard{background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-4);padding:clamp(22px,4vw,32px);box-shadow:var(--sh-0);color:var(--ink)}
.dark .wizard{background:var(--card);box-shadow:var(--sh-0)}
.wbar,.meter{background:rgba(23,22,20,.18)}
.wopt{border:1px solid rgba(23,22,20,.48);border-radius:var(--r-2);background:#fff}
.wopt:hover{border-color:var(--ink);background:rgba(23,22,20,.06)}
.wopt .dot{border:2px solid rgba(23,22,20,.48)}
/* the selected state of the wizard's primary control must be unmistakable:
   #FAF9F6 on #171614 = 16.5:1 */
.wopt.sel{background:var(--ink);color:#FAF9F6;border-color:var(--ink)}
.wopt.sel .dot{border-color:#FAF9F6;background:#FAF9F6;box-shadow:inset 0 0 0 3px var(--ink)}
/* SC-080 (3) single-select and multi-select groups were visually identical */
.wopt[role="checkbox"] .dot{border-radius:5px}
/* SC-080 (1) '← Back' and 'Continue →' overflowed a 375px panel */
.wnav{flex-wrap:wrap}
.wnav .btn{flex:1 1 auto;justify-content:center}

/* ---------- SC-016 / SC-005 form error + label affordances ---------- */
.field{position:relative}
.field label{display:block;font-weight:500;margin-bottom:6px}
.req{color:#8A3324;margin-left:3px;font-weight:600}
.field-err{font-size:var(--fs-3);line-height:1.4;margin-top:6px;color:#8A3324;font-weight:500;display:flex;align-items:flex-start;gap:6px}
.field-err::before{content:"!";flex:0 0 auto;width:15px;height:15px;border-radius:50%;background:#8A3324;color:#fff;font-size:10.5px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-top:1px}
.field-err::before{content:"!" / "";flex:0 0 auto;width:15px;height:15px;border-radius:50%;background:#8A3324;color:#fff;font-size:10.5px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-top:1px}
.field-err[hidden]{display:none}
/* an error must not look like focus: solid 2px + tint, vs the 3px soft focus halo */
.field input.err,.field select.err,.field textarea.err,
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  border:2px solid #8A3324;background:#FBF4F2;box-shadow:none}
.field input.err:focus,.field textarea.err:focus,.field select.err:focus,
.field input[aria-invalid="true"]:focus{border-color:#8A3324;box-shadow:0 0 0 3px rgba(138,51,36,.18)}
.lf-err{color:#8A3324 !important;font-weight:500;border:1px solid rgba(138,51,36,.35);background:#FBF4F2;border-radius:var(--r-2);padding:var(--s-3) var(--s-4);margin-bottom:var(--s-3)}
/* wizard options as real controls */
.wopt:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.optgroup[aria-invalid="true"],.optgroup.err{outline:2px solid #8A3324;outline-offset:6px;border-radius:var(--r-3)}
.dark .field-err,.dark .req{color:#F0B6A8}
.dark .field-err::before{background:#F0B6A8;color:#171614}
.dark .wopt:focus-visible{outline-color:#F3F1EC}

/* ---------- Phase 4: accessibility & mobile ---------- */
/* SC-020 breadcrumbs were inheriting the retired grey */
.crumb{color:var(--muted)}
/* SC-074 a 19.4px crumb link is under the 24px WCAG 2.5.8 floor */
.crumb a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;display:inline-block;padding:var(--s-1) 0}
.crumb a:hover{text-decoration-thickness:2px}

/* SC-046 links inside prose need a non-colour affordance */
main p a:not(.btn):not(.arrlink):not(.seemore),
main li a:not(.btn):not(.arrlink){text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
main p a:not(.btn):hover{text-decoration-thickness:2px}

/* SC-032 iOS zooms any field under 16px on focus — keep this literal */
.field input,.field select,.field textarea{font-size:16px}

/* SC-051 fixed nav must not swallow anchor targets */
:target{scroll-margin-top:120px}
main [id]{scroll-margin-top:110px}

/* SC-070 security/compliance answers were 11px at 4.43:1 */
.tag,.pill{font-size:var(--fs-2);color:var(--ink)}
.dark .tag,.dark .pill{color:#F3F1EC}

@media (max-width:640px){
  /* SC-035 reclaim usable width on small phones */
  main{padding-left:8px;padding-right:8px}
  .wrap{padding-left:var(--s-4);padding-right:var(--s-4)}
  .topbar{width:calc(100% - 16px)}
  footer{width:calc(100% - 16px)}
  /* SC-093 four 14.5px/600 tabs do not fit 375px; scroll them instead of
     wrapping into a ragged block with the active underline orphaned */
  .subnav{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-bottom:0}
  .subnav::-webkit-scrollbar{display:none}
  .subnav a{flex:0 0 auto}
}
@media (max-width:380px){
  main{padding-left:6px;padding-right:6px}
  .wrap{padding-left:var(--s-3);padding-right:var(--s-3)}
}

/* SC-068 founder monogram: white on a gradient that ends light was 1.68:1 */
.avatar-lg{background:linear-gradient(135deg,#171614,#57534C)}
.avatar-lg span{color:#FAF9F6}

/* ---------- SC-030 touch targets (WCAG 2.5.8 / 2.5.5) ---------- */
@media (pointer:coarse),(max-width:900px){
  .btn,.btn-p,.btn-o,.mbtn,.navtoggle,.topbar .btn{min-height:var(--tap);display:inline-flex;align-items:center}
  .drop a,.navlinks a,.fcol a{min-height:var(--tap);display:flex;align-items:center}
  .arrlink,.seemore,.card a,.tile a{min-height:var(--tap);display:inline-flex;align-items:center}
  .wopt{min-height:var(--tap);display:flex;align-items:center}
  a[href^="tel:"],a[href^="mailto:"]{display:inline-block;padding:var(--s-2) 0;min-height:var(--tap)}
  .field input,.field select,.field textarea{min-height:46px}
}

/* SC-048 semantic breadcrumbs (was a <p> with literal "/" text) */
nav.crumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:0;padding:0}
nav.crumb li{display:flex;align-items:center;color:var(--muted)}
nav.crumb li+li::before{content:"/";margin:0 8px;color:var(--line);speak:never}
nav.crumb li[aria-current="page"]{color:var(--muted)}
nav.crumb a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

/* ---------- closing CTA: light card so it never stacks on the black footer ---------- */
main>section.ctaclose{background:var(--tint);color:var(--ink)}
main>section.ctaclose h2,main>section.ctaclose h3{color:var(--ink)}
main>section.ctaclose p,main>section.ctaclose .lead{color:var(--muted)}
main>section.ctaclose .btn-p{background:var(--ink);color:#FAF9F6}
main>section.ctaclose .btn-p:hover{background:#44413B}
main>section.ctaclose .btn-o{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
main>section.ctaclose .btn-o:hover{background:var(--ink);color:#FAF9F6}
main>section.ctaclose .btn-w{background:var(--ink);color:#FAF9F6}
main>section.ctaclose .eyebrow{color:var(--muted)}
main>section.ctaclose .eyebrow::before{color:var(--ink)}
main>section.ctaclose .muted,main>section.ctaclose .cap{color:var(--muted)}
main>section.ctaclose a:not(.btn){color:var(--ink)}
main>section.ctaclose .orb,main>section.ctaclose .gridbg{display:none}
/* tighter: this block was mostly empty space */
main>section.ctaclose{padding:clamp(44px,6vw,76px) 0}

/* ---------- services: full-width numbered rows (was a 2x2 grid of dense tiles) ---------- */
.svcrows{margin-top:clamp(28px,4vw,44px);border-top:1px solid var(--line)}
.svcrow{padding:clamp(26px,3.2vw,40px) 0;border-bottom:1px solid var(--line)}
.svcrow-head{display:grid;grid-template-columns:auto 46px 1fr;gap:18px;align-items:start}
.svcrow-n{font-family:var(--mono);font-size:12.5px;color:var(--muted);padding-top:12px;min-width:26px}
.svcrow-icon{width:46px;height:46px;border-radius:14px;background:var(--canvas);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.svcrow-icon svg{width:21px;height:21px}
.svcrow h3{font-size:clamp(20px,2.2vw,27px);letter-spacing:-.02em;margin:6px 0 0}
.svcrow-pitch{color:var(--muted);margin-top:8px;max-width:62ch}
.svcrow-detail{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:clamp(20px,3vw,44px);margin:22px 0 0 110px}
.svcrow-col .sidelabel{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.svcrow .plist{margin:0}
.svcrow .plist li{font-size:14.5px;color:var(--muted);padding:3px 0 3px 18px;position:relative;list-style:none}
.svcrow .plist li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:1px;background:var(--ink);border-radius:0;transform:none}
.svcrow-tags{display:flex;flex-wrap:wrap;gap:6px}
.svcrow-time{font-size:14.5px;color:var(--muted);margin:0 0 12px}
.svc-ai{font-family:var(--mono);font-size:12px;color:var(--ink);margin-top:12px}
.svc-ai::before{content:"+ "}
.svcrow-proof{font-size:14.5px}
@media (max-width:900px){
  .svcrow-detail{grid-template-columns:1fr;margin-left:0;gap:20px}
  .svcrow-head{grid-template-columns:auto 40px 1fr;gap:12px}
}

/* ---------- services: scannable index that opens on demand ---------- */
.svcaccs{margin-top:clamp(28px,4vw,44px);border-top:1px solid var(--line)}
.svcacc{border-bottom:1px solid var(--line)}
.svcacc>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:34px 44px 1fr 18px;gap:16px;align-items:center;
  padding:22px 4px;transition:padding-left .18s}
.svcacc>summary::-webkit-details-marker{display:none}
.svcacc>summary:hover{padding-left:10px}
.svcacc>summary:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:6px}
.svcacc-n{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.svcacc-icon{width:44px;height:44px;border-radius:14px;background:var(--canvas);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.svcacc-icon svg{width:20px;height:20px}
.svcacc-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.svcacc-title{font-size:clamp(18px,2vw,23px);font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.svcacc-pitch{font-size:14.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svcacc[open] .svcacc-pitch{white-space:normal}
.svcacc-chev{width:12px;height:8px;color:var(--muted);transition:transform .2s}
.svcacc[open] .svcacc-chev{transform:rotate(180deg)}
.svcacc-body{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:clamp(20px,3vw,44px);padding:4px 4px 30px 94px}
.svcacc-body .sidelabel{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.svcacc-body .plist{margin:0}
.svcacc-body .plist li{font-size:14.5px;color:var(--muted);padding:3px 0 3px 18px;position:relative;list-style:none}
.svcacc-body .plist li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:1px;background:var(--ink);border-radius:0;transform:none}
@media (max-width:900px){
  .svcacc>summary{grid-template-columns:28px 40px 1fr 16px;gap:12px}
  .svcacc-body{grid-template-columns:1fr;padding-left:0;gap:20px}
  .svcacc-pitch{white-space:normal}
}
@media print{ .svcacc-body{display:grid !important} .svcacc-chev{display:none} }

/* ---------- services panel: tidy the three columns ---------- */
.svcacc-body{grid-template-columns:1.5fr 1fr 1.15fr;align-items:start;column-gap:clamp(24px,3.4vw,56px)}
.svcacc-body>div{min-width:0}
.svcacc-body .plist li{padding-left:20px;line-height:1.5;margin-bottom:10px}
/* tags read as a compact cluster, not stacked buttons */
.svcacc-body .svcrow-tags{gap:6px}
.svcacc-body .tag{font-family:var(--mono);font-size:11.5px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:transparent;white-space:nowrap}
/* the AI note is a footnote, and must not break mid-word */
.svcacc-body .svc-ai{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:14px;line-height:1.5;overflow-wrap:anywhere;hyphens:none}
/* the proof link is secondary, not a headline */
.svcacc-body .svcrow-time{font-size:14.5px;line-height:1.5;margin:0 0 14px}
.svcacc-body .arrlink{font-size:13.5px;font-weight:500;border-bottom-width:1px;padding-bottom:2px;display:inline-flex;align-items:baseline;gap:6px}
@media (max-width:1100px){ .svcacc-body{grid-template-columns:1fr 1fr;row-gap:26px} .svcacc-body>div:last-child{grid-column:1/-1} }
@media (max-width:900px){ .svcacc-body{grid-template-columns:1fr} .svcacc-body>div:last-child{grid-column:auto} }

/* three long phrases in a narrow column read better as a line than as stacked pills */
.svcacc-body .svcrow-tags{display:block}
.svcacc-body .tag{display:inline;border:0;padding:0;background:none;font-family:var(--mono);font-size:12.5px;
  color:var(--ink);white-space:normal;line-height:1.7}
.svcacc-body .tag:not(:last-child)::after{content:" · ";color:var(--muted)}

/* ================= services index: bolder restyle ================= */
.svcaccs{border-top:1px solid var(--ink)}
.svcacc{border-bottom:1px solid var(--line);transition:background .2s}
.svcacc[open]{background:var(--canvas)}

/* the row itself: number + name, big and confident */
.svcacc>summary{grid-template-columns:52px 1fr 40px;gap:20px;align-items:center;
  padding:clamp(22px,2.6vw,32px) clamp(10px,1.6vw,20px)}
.svcacc>summary:hover{padding-left:clamp(18px,2.2vw,30px);background:var(--canvas)}
.svcacc[open]>summary{padding-bottom:14px}

.svcacc-n{font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:.06em;align-self:start;padding-top:8px}
.svcacc[open] .svcacc-n{color:var(--ink)}

/* the icon plate was competing with the title — the number carries the index now */
.svcacc-icon{display:none}

.svcacc-title{font-size:clamp(22px,2.7vw,34px);font-weight:500;letter-spacing:-.025em;line-height:1.15;color:var(--ink)}
.svcacc-pitch{font-size:15.5px;color:var(--muted);margin-top:6px;white-space:normal;max-width:60ch}

/* chevron becomes a real affordance */
.svcacc-chev{width:40px;height:40px;padding:14px;border-radius:50%;border:1px solid var(--line);
  color:var(--ink);box-sizing:border-box;transition:transform .25s,background .2s,border-color .2s}
.svcacc>summary:hover .svcacc-chev{border-color:var(--ink)}
.svcacc[open] .svcacc-chev{transform:rotate(180deg);background:var(--ink);color:#FAF9F6;border-color:var(--ink)}

/* body sits under the title, indented to the number column */
.svcacc-body{padding:6px clamp(10px,1.6vw,20px) clamp(26px,3vw,36px) 72px}

@media (max-width:900px){
  .svcacc>summary{grid-template-columns:34px 1fr 34px;gap:14px}
  .svcacc-chev{width:34px;height:34px;padding:12px}
  .svcacc-body{padding-left:48px}
}
@media (max-width:640px){
  .svcacc-body{padding-left:0}
}

/* =====================================================================
   "What we do" — numbered spine / process ladder

   One vertical rule carries the whole section. The four mono numbers sit
   ON the rule. The service name hangs in the left margin, right-aligned
   against the rule; the substance sits to the right of it.

   The idea: number, name and pitch share ONE baseline that crosses the
   spine, and "who it suits" and "what you get" share the next one. The
   section reads as a measured sequence — a table of contents — instead
   of four repeated blocks. Strictly monochrome: every distinction is
   weight, scale, spacing or rule-line.

   Every class invented here is prefixed spine-.
   ===================================================================== */

.spine{
  --spine-measure: clamp(420px, 42vw, 610px);  /* ONE measure in px: ch resolved against three
                                                 different font-sizes, so the rules never lined up */
  /* the two measures the whole drawing is derived from */
  --spine-rail: clamp(150px, 17vw, 244px);   /* margin column: the name      */
  --spine-gut:  clamp(104px, 8.4vw, 136px);  /* the number's channel         */
  --spine-num:  clamp(var(--fs-6), 1.9vw, var(--fs-8));  /* was 40-56px and beat the service
     names to the eye — the largest thing in the section was the one carrying no information */
  --spine-x:    calc(var(--spine-rail) + var(--spine-gut) / 2);
  --spine-rule: rgba(23,22,20,.50);   /* 3.42:1 — the spine carries the design, so it clears
                                         the 3:1 non-text threshold on its own, with no @supports needed */
}
/* the spine is the main graphic device, so it earns more presence than the
   13% hairline the rest of the site uses for incidental borders */
@supports (background: color-mix(in srgb, #000 20%, transparent)){
  .spine{ --spine-rule: color-mix(in srgb, var(--ink) 50%, transparent); }
}

/* ---------- section head ---------- */
.spine-h2{ margin-top: var(--sp-1); }
.spine-lead{
  max-width: var(--spine-measure);
  margin-top: var(--sp-5);
  /* the deck is already set to the body column, so the geometry of the
     ladder is announced before the first rung arrives */
  margin-left: calc(var(--spine-rail) + var(--spine-gut));
}

/* ---------- the ladder ---------- */
.spine-ladder{
  list-style: none;
  margin: clamp(var(--sp-7), 5vw, var(--sp-9)) 0 0;
  padding: 0;
  position: relative;
  border-top: 1px solid var(--ink);   /* the spine hangs off a solid head rule */
}
/* the terminus — the rule is closed off rather than simply stopping */
.spine-ladder::after{
  content: "";
  position: absolute;
  left: calc(var(--spine-x) - var(--sp-3));
  bottom: 0;
  width: var(--sp-5);
  height: 1px;
  background: var(--ink);
}

.spine-rung{
  position: relative;
  display: grid;
  grid-template-columns: var(--spine-rail) var(--spine-gut) minmax(0, 1fr);
  align-items: baseline;   /* <- the shared baseline across the spine */
  column-gap: 0;
  row-gap: var(--sp-5);
  padding-block: clamp(var(--sp-6), 3.6vw, var(--sp-8));  /* > the 16px inside the meta rule,
     so a meta block can never read as attached to the entry below it at 900-1150px */
}
/* the spine itself: drawn per rung so the line is continuous top to bottom
   while each segment can still answer to its own entry */
.spine-rung::before{
  content: "";
  position: absolute;
  left: var(--spine-x);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--spine-rule);
  transition: background .22s ease;
}
@media (hover: hover){
  .spine-rung:hover::before{ background: var(--ink); }
}

/* ---------- the number, mounted on the rule ---------- */
.spine-mark{
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  position: relative;
  z-index: 1;
  /* knocks the rule out behind the digits, so the number reads as sitting
     ON the spine rather than beside it */
  background: var(--card);
  padding: var(--sp-2) var(--sp-3);
}
.spine-num{
  display: block;
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--spine-num);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* ---------- left margin: the name, hung against the rule ---------- */
/* the icon sits above the title, hugging the rule because the title is
   right-aligned — flips to the left edge with the title on mobile */
.spine-ico{
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 0 var(--sp-3) auto;
  color: var(--muted);
}
.spine-ico svg{ width: 100%; height: 100%; display: block; }
.spine-rung:hover .spine-ico{ color: var(--ink); }
@media (prefers-reduced-motion: no-preference){
  .spine-ico{ transition: color .2s ease; }
}
@media (max-width: 900px){
  .spine-ico{ margin: 0 auto var(--sp-3) 0; }
}

.spine-title{
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  text-align: right;
  font-family: var(--sans);
  font-size: clamp(var(--fs-7), 2.4vw, var(--fs-8));
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.028em;
  color: var(--ink);
  text-wrap: balance;
}

/* ---------- left margin: who it suits ---------- */
.spine-suitswrap{
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  text-align: right;
}
.spine-k{
  font-family: var(--mono);
  font-size: var(--fs-1);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
.spine-suits{
  list-style: none;
  margin: var(--sp-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.spine-suits li{
  font-family: var(--mono);
  font-size: var(--fs-2);
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- right of the rule: the substance ----------
   No extra indent is applied here. The channel already holds the body text
   half a gutter clear of the rule, which leaves the number optically
   centred between the name on the left and the pitch on the right. */
.spine-pitch{
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  max-width: var(--spine-measure);
  font-size: clamp(var(--fs-5), 1.5vw, var(--fs-6));
  line-height: 1.45;
  letter-spacing: -.006em;
  color: var(--ink);
}
.spine-getswrap{
  grid-column: 3;
  grid-row: 2;
  min-width: 0;
  max-width: var(--spine-measure);
}
.spine-getswrap .spine-gets{ margin-top: var(--sp-3); }
.spine-gets{
  min-width: 0;
  max-width: var(--spine-measure);
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.spine-gets li{
  position: relative;
  padding-left: var(--sp-6);
  font-size: var(--fs-4);
  line-height: 1.5;
  color: var(--muted);
}
/* the spine's own vocabulary, at bullet scale */
.spine-gets li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .75em;
  width: var(--sp-4);
  height: 1px;
  background: var(--ink);
}

/* ---------- right of the rule: the small print ---------- */
.spine-meta{
  grid-column: 3;
  grid-row: 3;
  min-width: 0;
  max-width: var(--spine-measure);
  display: grid;
  grid-template-columns: var(--sp-9) minmax(0, 1fr);
  column-gap: var(--sp-4);
  row-gap: var(--sp-2);
  align-items: baseline;
  border-top: 1px solid var(--line);
  padding-top: var(--sp-4);
}
.spine-meta dt{
  font-family: var(--mono);
  font-size: var(--fs-1);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.spine-meta dd{
  font-family: var(--mono);
  font-size: var(--fs-2);
  line-height: 1.55;
  color: var(--muted);
  overflow-wrap: break-word;
}

/* =====================================================================
   Below 900px the spine moves fully to the left edge and everything
   indents off it. DOM order and visual order stay identical at every
   width — nothing is reordered by CSS.
   ===================================================================== */
@media (max-width: 900px){
  .spine{
    --spine-rail: 0px;
    --spine-gut: clamp(58px, 15vw, 78px);
    --spine-num: clamp(var(--fs-8), 7.4vw, var(--fs-9));
  }
  .spine-lead{ margin-left: 0; }
  .spine-rung{
    grid-template-columns: var(--spine-gut) minmax(0, 1fr);
    row-gap: var(--sp-4);
  }
  .spine-mark{ grid-column: 1; grid-row: 1; padding: var(--sp-1); }
  .spine-title{ grid-column: 2; grid-row: 1; text-align: left; }
  .spine-pitch{ grid-column: 2; grid-row: 2; }
  .spine-suitswrap{ grid-column: 2; grid-row: 3; text-align: left; }
  .spine-getswrap{ grid-column: 2; grid-row: 4; }
  .spine-meta{ grid-column: 2; grid-row: 5; }

  /* three stacked lines cost four rows on a phone; one wrapped line does not */
  .spine-suits{ flex-direction: row; flex-wrap: wrap; gap: 0 var(--sp-2); }
  .spine-suits li:not(:last-child)::after{ content: "\00B7"; padding-left: var(--sp-2); color: var(--ink); }
  .spine-suits li:not(:last-child)::after{ content: "\00B7" / ""; padding-left: var(--sp-2); color: var(--ink); }
}

@media (max-width: 620px){
  .spine-meta{
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--sp-1);
  }
  .spine-meta dd + dt{ margin-top: var(--sp-3); }
}

@media (prefers-reduced-motion: reduce){
  .spine-rung::before{ transition: none; }
}

/* The spine, its terminus and the twelve bullet markers are 1px boxes painted with
   `background`. Forced-colours replaces background with the system Canvas, and print
   strips backgrounds entirely — in both cases the section's entire graphic vocabulary
   disappears. Redraw all three as borders, which survive both. */
@media (forced-colors: active){
  .spine-rung::before{ background: none; border-left: 1px solid CanvasText; width: 0; }
  .spine-ladder::after{ background: none; border-top: 1px solid CanvasText; height: 0; }
  .spine-gets li::before{ background: none; border-top: 1px solid CanvasText; height: 0; }
  .spine-mark{ background: Canvas; }
}
@media print{
  .spine-mark{ background: #fff; }
  .spine-rung{ break-inside: avoid; }
  .spine-rung::before{ background: none; border-left: 1px solid #000; width: 0; }
  .spine-ladder::after{ background: none; border-top: 1px solid #000; height: 0; }
  .spine-gets li::before{ background: none; border-top: 1px solid #000; height: 0; }
  .spine-proof a{ text-decoration: underline; }
}

/* ---------- per-service cross-link (restored from the original section) ---------- */
.spine-proof{
  grid-column: 3;
  grid-row: 4;
  min-width: 0;
  margin-top: var(--sp-4);
}
.spine-proof a{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  font-size: var(--fs-3);
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.spine-proof a:hover{ text-decoration-thickness: 2px; }
.spine-proof a .spine-arr{ transition: transform .18s ease; }
@media (hover: hover){ .spine-proof a:hover .spine-arr{ transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce){ .spine-proof a .spine-arr{ transition: none; } }
@media (max-width: 900px){ .spine-proof{ grid-column: 2; grid-row: 6; } }


/* ---------- AI by industry: auto-advancing slider ---------- */
.indhead{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(20px,4vw,56px)}
.indhead-txt{min-width:0}
.indhead-txt .lead{margin-bottom:0}

.indslider{position:relative;margin-top:clamp(26px,3.4vw,38px)}
.indtrack{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,340px);gap:14px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
  padding:4px;margin:0 -4px}
.indtrack::-webkit-scrollbar{display:none}
.indtrack:focus-visible{outline:3px solid #F3F1EC;outline-offset:4px;border-radius:18px}
.indslide{scroll-snap-align:start;background:var(--dark-card);border:1px solid var(--dark-line);
  border-radius:18px;padding:clamp(22px,2.4vw,28px);display:flex;flex-direction:column;gap:10px;
  transition:border-color .2s,transform .2s}
.indslide:hover{border-color:rgba(250,249,246,.4);transform:translateY(-3px)}
.indslide>*{margin-top:0}
.indslide h3{font-size:19px;letter-spacing:-.01em;color:#F3F1EC;margin:2px 0 0}
.indslide .muted{color:#B7B2A8;font-size:14.5px;line-height:1.55;flex:1}
.indslide .icon{width:42px;height:42px;border-radius:13px;background:rgba(250,249,246,.08);
  display:flex;align-items:center;justify-content:center;color:#F3F1EC}
.indslide .icon svg{width:20px;height:20px}
.indslide .tag{font-family:var(--mono);font-size:11px;padding:4px 9px;border:1px solid var(--dark-line);
  border-radius:999px;color:#D8D4CC;margin:0 5px 5px 0;display:inline-block}
.indslide a{color:#F3F1EC !important;font-size:13.5px;text-decoration:underline;text-underline-offset:3px}

/* controls sit in the header row, never against the section edge */
.indnav{display:flex;gap:8px;flex:0 0 auto;padding-bottom:4px}
.indbtn{width:44px;height:44px;padding:0;border-radius:999px;border:1px solid rgba(250,249,246,.38);
  background:transparent;color:#F3F1EC;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .18s,border-color .18s,opacity .18s}
.indbtn svg{width:17px;height:17px;display:block}
.indbtn:hover:not(:disabled){background:rgba(250,249,246,.14);border-color:#F3F1EC}
.indbtn:disabled{opacity:.32;cursor:default}
.indplay .i-play{display:none}
.indplay[aria-pressed="true"] .i-pause{display:none}
.indplay[aria-pressed="true"] .i-play{display:block}

/* scroll position + autoplay progress */
.indprog{height:2px;border-radius:2px;background:rgba(250,249,246,.14);overflow:hidden;margin-top:14px}
.indprog span{display:block;height:100%;width:12%;border-radius:2px;background:#F3F1EC;
  transition:width .3s ease}

/* right-edge fade, pulled inside so it never overlaps the controls */
.indslider::after{content:"";position:absolute;right:-4px;top:0;bottom:16px;width:64px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--ink))}

@media (max-width:860px){
  .indhead{flex-direction:column;align-items:stretch;gap:20px}
  .indnav{justify-content:flex-start}
}
@media (max-width:640px){
  .indtrack{grid-auto-columns:minmax(255px,84%)}
  .indslider::after{display:none}
}
@media print{ .indtrack{grid-auto-flow:row;overflow:visible} .indnav,.indprog,.indslider::after{display:none} }

/* ---------- case-study client logos ----------
   The card is dark (#141417) but kahramaa.png is opaque RGB with no alpha, and both
   marks are trademarks that should keep their own colours. So they sit on a light
   plate rather than being inverted or blended. */
.csplate{
  /* The official Siemens Energy asset is the white version, so the light plate is
     gone — both marks now sit white directly on the dark card, matching the wall. */
  border-radius:10px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:64px;
}
.csplate .cslogo--white{ filter: brightness(0) invert(1); }
.csplate .cslogo{                /* .scbadge img in styles.css forces 64x64 square at (0,1,1);
                                    this is (0,2,0) so it wins without !important */
  display:block; width:auto; height:30px; object-fit:contain;
  /* The Siemens vector has a TIGHT bounding box — glyph tops sit exactly at y=0 with
     no built-in clear space, so it butts against its container and reads as clipped.
     Cap the width and add margin to give the mark the breathing room it lacks. */
  max-width:72%;
  margin-inline:auto;
}
.csplate .cslogo-k{ height:27px; }   /* the Kahramaa mark is wider and shorter — match optical weight */
@media (max-width:900px){ .csplate .cslogo{ height:26px } .csplate .cslogo-k{ height:23px } }
@media print{ .csplate .cslogo,.csplate .cslogo--white{ filter:none } }

/* ---------- client wall: real logos ----------
   50 of the 60 supplied marks are already the light/white version; the three
   colour/dark ones are normalised to white so the wall reads as one set. */
.logo-grid .logo-tile{
  aspect-ratio: 1 / 1;        /* square containers */
  min-height: 0;
  padding: clamp(10px, 1.4vw, 18px);
}
/* These caps size the wall logos, not the images' own dimensions. 32 of the 36
   logos are HEIGHT-bound, so max-height is the lever that matters — at the old
   42% the median logo filled only ~15% of its square tile. object-fit:contain
   means raising both can only enlarge, never crop. */
.logo-tile .cwlogo{
  display:block;
  width:auto; height:auto;
  max-width: 84%;
  max-height: 58%;
  object-fit:contain;
  opacity:.86;
  transition:opacity .2s, filter .2s;
}
.logo-tile:hover .cwlogo{ opacity:1; }
/* Siemens, Kahramaa, Olive, MOI and Dr Hassan ship as colour or dark artwork.
   brightness(0) blacks every visible pixel (alpha untouched) and invert(1) turns
   that to white, so transparency and silhouette both survive. */
.logo-tile .cwlogo--white{ filter: brightness(0) invert(1); }
/* Where a mark carries real internal contrast, flattening merges the detail into
   a blob — invert() flips the dark artwork to white and drops the light detail to
   near-black, which reads as knocked-out space against the tile. */
.logo-tile .cwlogo--invert{ filter: invert(1); }
@media (max-width:640px){ .logo-tile .cwlogo{ max-width:80%; max-height:44% } }
@media (forced-colors: active){ .logo-tile .cwlogo{ opacity:1 } }
@media print{
  .logo-tile .cwlogo{ opacity:1 }
  .logo-grid .logo-tile{ aspect-ratio:auto; min-height:72px }
}

/* The official Siemens Energy asset is the white version. On the light homepage
   lockup it is inverted to dark ink — mix-blend-mode:multiply would erase white. */
.lockup-logo--inv{ filter: invert(1); mix-blend-mode: normal; }
@media (forced-colors: active){ .lockup-logo--inv{ filter:none } }

/* ---------- server packages: cloud platforms ---------- */
.cloudgrid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4);
}
.cloudcard{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-3);
  padding:clamp(20px,2.2vw,26px);
  display:flex; flex-direction:column; gap:var(--sp-3);
  transition:border-color .2s, transform .2s;
}
.cloudcard:hover{ border-color:var(--ink); transform:translateY(-3px); }
.cloudmark{
  width:44px; height:44px; border-radius:var(--r-2);
  background:var(--tint);
  display:flex; align-items:center; justify-content:center;
}
/* the marks keep their own brand colour — a client's platform logo is not ours to restyle */
.cloudmark img{ width:24px; height:24px; object-fit:contain; display:block; }
.cloudcard h3{ font-size:var(--fs-5); letter-spacing:-.01em; margin:0; }
.cloudcard .muted{ font-size:var(--fs-3); line-height:1.55; margin:0; }

@media (max-width:1000px){ .cloudgrid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .cloudgrid{ grid-template-columns:1fr } }
@media (forced-colors: active){ .cloudmark{ border:1px solid CanvasText } }
@media print{ .cloudgrid{ grid-template-columns:repeat(2,1fr) } .cloudcard{ break-inside:avoid } }



/* ---------- glass overrides ----------
   .indslide and .cloudcard are declared in THIS file, which loads after site.css
   at equal specificity — so site.css's glass background loses. Re-declare the
   translucency here so they match the rest of the card system. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .indslide{ background:rgba(33,31,27,.42); border-color:rgba(250,249,246,.18); }
  .cloudcard{
    background:rgba(250,249,246,.55);
    border-color:rgba(23,22,20,.08);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  }
}

/* ---------- wizard glass ----------
   Alphas chosen from measured contrast, not by eye: the panel sits on a dark
   section, so translucency darkens it and pulls the muted text down with it.
   .86 keeps muted at 5.02:1 (needs 4.5) and the pill border at 3.14:1 (needs 3).
   .wopt.sel stays fully opaque — a chosen answer should read as definite. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .wizard{
    background:rgba(234,233,230,.72);
    -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
    border-color:rgba(23,22,20,.10);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.65), var(--sh-0);
    transform:translateZ(0);
  }
  .dark .wizard{
    background:rgba(250,249,246,.86);
    -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  }
  .wopt{
    background:rgba(255,255,255,.62);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    border-color:rgba(23,22,20,.42);
  }
  .wopt:hover{ background:rgba(255,255,255,.88); border-color:var(--ink); }
  .wopt.sel{ background:var(--ink); -webkit-backdrop-filter:none; backdrop-filter:none; }
  .wbar,.meter{ background:rgba(23,22,20,.14); }
}

/* .dark .req / .dark .field-err lighten these for a dark surface — but the wizard
   and dlgate panels inside a .dark section are LIGHT, so the light salmon landed
   on cream at 1.24:1 (invisible). Restore the dark-surface colour there.
   Pre-existing: it was 1.67:1 before the panel became translucent. */
.dark .wizard .req,.dark .wizard .field-err,
.dark .dlgate .req,.dark .dlgate .field-err{ color:#8A3324; }

/* ---------- select: drop the native select chrome ----------
   The select kept appearance:auto, so the OS drew its own rounded box and
   chevron INSIDE our border — the doubled outline. appearance:none removes it;
   the chevron below is ours, and padding-right keeps the text clear of it.
   Height matched to the inputs (46px); colour moved off pure black to --ink. */
.field select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  color:var(--ink);
  height:46px;
  padding-right:calc(var(--sp-4) + 22px);
  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23171614' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--sp-4) center;
  background-size:12px 8px;
  text-overflow:ellipsis;
}
.field select::-ms-expand{display:none}
/* the arrow is decorative; the control keeps its own focus ring from site.css */
.field select:disabled{opacity:.55;cursor:not-allowed}
@media (max-width:640px){ .field select{height:46px} }

/* ---------- proof strip: stat cards, not a run-on line ----------
   Was: flex row, number and label on a shared baseline at 24px/13.5px, so the
   four stats read as one sentence. Now a 4-up grid with the figure stacked over
   a mono label and hairline rules between. Markup untouched — the counter in
   app.js writes to [data-count].textContent, so that element must stay as-is. */
.proof{ padding:clamp(26px,3.6vw,42px) 0; }
.proof .wrap{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  align-items:stretch;
  justify-content:initial;
}
.proof .it{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  text-align:center;
  padding:var(--sp-3) var(--sp-4);
  border-left:1px solid rgba(250,249,246,.16);
}
.proof .it:first-child{ border-left:0; }
.proof b{
  font-size:clamp(32px,4vw,50px);
  line-height:1;
  letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;   /* stops the width jumping as it counts */
  color:#F3F1EC;
}
.proof span{
  font-family:var(--mono);
  font-size:var(--fs-2);
  text-transform:uppercase;
  letter-spacing:.1em;
  line-height:1.3;
  color:#B7B2A8;
}
@media (max-width:820px){
  .proof .wrap{ grid-template-columns:repeat(2,1fr); }
  .proof .it{ padding-block:var(--sp-5); }
  .proof .it:nth-child(odd){ border-left:0; }
  .proof .it:nth-child(-n+2){ border-bottom:1px solid rgba(250,249,246,.16); }
}
@media (max-width:420px){
  .proof .wrap{ grid-template-columns:1fr; }
  .proof .it{ border-left:0; border-bottom:1px solid rgba(250,249,246,.16); }
  .proof .it:last-child{ border-bottom:0; }
}
@media print{ .proof .wrap{ grid-template-columns:repeat(4,1fr) } }


/* ============================================================
   Case study page (case-study-siemens-energy.html)
   Only three blocks needed classes of their own; everything else
   reuses .tile / .steps / .band / .pagehero from the system.
   Lives here because inner pages load legacy.css last.
   ============================================================ */

/* .tile centres its text, which suits a 3-up feature row but not a
   card carrying a heading and two lines of prose. */
.cs-tile{text-align:left}
.cs-tile .icon{margin:0 0 var(--sp-3)}

/* Facts panel beside the intro copy. */
.factbox{border:1px solid var(--line);border-radius:var(--r-4);
  padding:clamp(20px,2.4vw,30px);margin:0}
.factbox .fact{padding-bottom:var(--sp-4);margin-bottom:var(--sp-4);
  border-bottom:1px solid var(--line)}
.factbox .fact:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
.factbox dt{font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.factbox dd{margin:0;font-size:var(--fs-5);color:var(--ink);line-height:1.45}
.dark .factbox{border-color:var(--dark-line)}
.dark .factbox .fact{border-color:var(--dark-line)}
.dark .factbox dd{color:#F3F1EC}

/* Product screenshot. The source image carries its own white backdrop, so it
   sits on a light section and gets a hairline to define its edge. */
.shotfig{margin:0}
.shotfig img{width:100%;height:auto;display:block;border-radius:var(--r-4);
  border:1px solid var(--line)}
.shotfig .caption{margin-top:var(--sp-3)}

/* Before / after. */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.ba-col{border:1px solid var(--line);border-radius:var(--r-4);
  padding:clamp(22px,2.6vw,34px)}
.ba-col .colhead{font-family:var(--mono);font-size:var(--fs-3);color:var(--muted);
  margin-bottom:var(--s-5)}
.ba-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:var(--sp-3)}
.ba-col li{position:relative;padding-left:20px;color:var(--muted);
  font-size:var(--fs-4);line-height:1.55}
.ba-col li::before{content:"";position:absolute;left:0;top:.68em;width:10px;
  height:1.5px;background:currentColor;opacity:.55}
.ba-col--after{background:var(--tint)}
.ba-col--after li{color:var(--ink)}
@media (max-width:760px){.ba{grid-template-columns:1fr}}

/* The shared page-hero h1 tops out at 98px, which suits a three-word product
   name. This headline names two organisations, so at that size it broke to five
   lines and pushed the lead copy off the fold. */
.cs-hero h1{font-size:clamp(32px,4.1vw,54px);line-height:1.06;letter-spacing:-.03em}
/* The hero right column held only the illustration and ran 448px shorter than
   the left, so the client lockup goes there: it fills that gap and keeps both
   logos above the fold instead of pushing the hero past the viewport. */
.cs-hero .band-art{margin-inline:auto}
.cs-hero .lockups{justify-content:center;margin-top:var(--s-7)}

/* The solution section carries two interfaces, not three, so it must not sit in
   the 3-column .tiles grid and leave a hole in the last column. */
.cs-tiles-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:620px){.cs-tiles-2{grid-template-columns:1fr}}


/* World Marine's mark is a circular badge — a teal ring around a white disc.
   The .cslogo--white treatment (brightness(0) invert(1)) flattens both into one
   solid white circle, destroying it, so it is desaturated instead. Two grounds
   need two treatments: lifted on the dark Work panel, deepened on the white
   case-study plate. */
.scbadge .wmlogo{width:100%;max-width:130px;height:auto;margin:0 auto;display:block;border-radius:0}
.scbadge.showcard .wmlogo{filter:grayscale(1) contrast(1.35) brightness(1.3)}
.cs-hero .scbadge .wmlogo{filter:grayscale(1) brightness(.85)}


/* case-study "at a glance" definition list */
.cs-facts{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:0;margin:0}
.cs-facts dt{font:500 12.5px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:12px 18px 12px 0;border-bottom:1px solid var(--line)}
.cs-facts dd{padding:12px 0;border-bottom:1px solid var(--line);margin:0;line-height:1.6}
.cs-facts>dt:last-of-type,.cs-facts>dd:last-of-type{border-bottom:0}
@media (max-width:620px){
  .cs-facts{grid-template-columns:1fr}
  .cs-facts dt{padding-bottom:2px;border-bottom:0}
}


/* case-study prose rhythm — the global reset zeroes p margins, and these
   sections use plain <p> for body copy rather than .lead/.mt everywhere */
main[id="main"] section p + p,
main[id="main"] section p + ul,
main[id="main"] section ul + p{margin-top:var(--s-4)}
main[id="main"] section .cs-tile p{margin-top:var(--s-2)}
main[id="main"] section .factbox p + p{margin-top:var(--s-4)}

/* ---------------------------------------------------------------------------
   "BUILT FOR" panel — the client badge on the Work page.
   .scbadge is display:inline-flex, which made the panel's inner column shrink
   to its content: the logo was centred inside a 167px plate that itself sat
   left in a 280px panel, leaving every mark ~44px off the panel's centre line.
   As a block the column fills the panel, so centred means centred.
   --------------------------------------------------------------------------- */
.scbadge.showcard{display:block}
.scbadge.showcard .csplate{width:100%;display:flex;align-items:center;justify-content:center}
.scbadge.showcard .csplate img{margin-inline:auto}