@charset "UTF-8";
/* Kunnworks · page compositions in the Clarity language.
   Surfaces: white cards with a hairline and soft shadow on tinted sections; navy for the flagship band, the brand story and the page ending.
   Labels are set as type. The brand cut appears on the header inquiry, the closing panel and the brand's own drawings (site.css). */

/* ─── HOME · a statement, a product still, then doors ─── */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(24px,3vw,56px);min-height:min(calc(100svh - var(--header)),880px);padding-block:clamp(56px,6vw,96px);padding-inline:max(var(--gutter),calc((100% - var(--max)) / 2));overflow:hidden;background:radial-gradient(52% 64% at 78% 48%,rgba(18,101,255,.09),transparent 70%),radial-gradient(40% 40% at 60% 90%,rgba(17,44,73,.05),transparent 70%),#fff}
.hero-copy{position:relative;z-index:2}
.hero h1{font-size:clamp(2.75rem,5vw,4.875rem);line-height:1.16;letter-spacing:-.055em;animation:rise 1s var(--ease) both}
.hero-lead{margin-top:clamp(20px,2vw,28px);color:var(--muted);font-size:clamp(1.0625rem,1.45vw,1.375rem);line-height:1.7;letter-spacing:-.025em;animation:rise 1s .08s var(--ease) both}
.hero-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(32px,3.4vw,48px);animation:rise 1s .16s var(--ease) both}
.hero-links .button{min-height:58px;padding-inline:28px}
.hero-visual{position:relative;min-width:0}
.hero-visual>.frame-note{position:absolute;z-index:3;top:4%;left:4%}
.hero-stage{position:relative;height:clamp(440px,40vw,600px);perspective:2200px}
.hero-plane{position:absolute;inset:0;transform:rotateX(9deg) rotateY(-20deg) rotateZ(3deg);transform-style:preserve-3d;animation:plane-in 1.4s .1s var(--ease) both}
@keyframes plane-in{from{transform:rotateX(14deg) rotateY(-28deg) rotateZ(4deg) translateY(28px)}to{transform:rotateX(9deg) rotateY(-20deg) rotateZ(3deg)}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}
/* The three screens arrive in the order the work happens: request, AI preparation, human confirmation. */
@keyframes card-in{from{clip-path:inset(0 0 100% 0 round 22px);scale:.96}to{clip-path:inset(0 0 0 0 round 22px);scale:1}}
@keyframes tick-in{from{scale:0}to{scale:1}}
.ui-card{position:absolute;width:44%;padding:clamp(16px,1.6vw,26px);background:rgba(255,255,255,.97);border:1px solid rgba(220,225,232,.9);border-radius:22px;box-shadow:var(--shadow-lg);font-size:clamp(.6875rem,.9vw,.875rem);line-height:1.55;animation:card-in .7s var(--delay) var(--ease) backwards,float 7s calc(var(--delay) + .7s) ease-in-out infinite}
.ui-request{--delay:.25s;left:-2%;top:9%;transform:translateZ(0)}
.ui-ai{--delay:.95s;left:27%;top:19%;transform:translateZ(60px)}
.ui-human{--delay:1.9s;left:56%;top:29%;transform:translateZ(120px)}
.ui-head{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.ui-head strong{font-size:1.15em;font-weight:700;letter-spacing:-.03em}
.ui-head small{margin-left:auto;color:var(--muted);font-size:.9em}
.ui-icon{flex:0 0 auto;width:1.7em;height:1.7em;fill:none;stroke:var(--blue);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ui-fields{display:grid;gap:4px;margin-bottom:12px}
.ui-fields div{display:grid;grid-template-columns:5em minmax(0,1fr);gap:8px}
.ui-fields dt{color:var(--muted)}
.ui-fields dd{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-body{padding:12px;background:var(--surface);border-radius:10px;color:var(--body);line-height:1.75}
.ui-file{display:flex;align-items:center;gap:8px;margin-top:10px;padding:10px 12px;background:var(--surface);border-radius:10px;font-weight:600}
.ui-file .ui-icon{stroke:var(--danger)}
.ui-file small{display:block;color:var(--muted);font-weight:400}
.ui-tag{margin-left:auto;padding:1px 10px;border-radius:999px;font-size:.85em;font-weight:700;white-space:nowrap}
.tag-ai{background:var(--blue-soft);color:var(--blue-ink)}
.tag-human{background:var(--navy);color:#fff}
.ui-checks,.ui-review{display:grid;gap:6px;list-style:none;margin:0;padding:0}
.ui-checks li{display:flex;align-items:center;gap:8px;padding:9px 10px;background:var(--surface);border-radius:10px;font-weight:600}
.ui-checks .ui-icon{width:1.45em;height:1.45em;padding:.2em;background:var(--blue);border-radius:6px;stroke:#fff;stroke-width:3;animation:tick-in .3s var(--ease) backwards}
.ui-checks li:nth-child(1) .ui-icon{animation-delay:1.35s}.ui-checks li:nth-child(2) .ui-icon{animation-delay:1.5s}.ui-checks li:nth-child(3) .ui-icon{animation-delay:1.65s}.ui-checks li:nth-child(4) .ui-icon{animation-delay:1.8s}
.ui-human .ui-icon{stroke:var(--navy)}
.ui-review li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px;padding:10px 0;font-weight:600}
.ui-review li+li{border-top:1px solid var(--line)}
.ui-review em{padding:1px 8px;background:#e7edf5;border-radius:999px;color:var(--navy);font-size:.85em;font-style:normal;font-weight:700;animation:tick-in .3s 2.5s var(--ease) backwards}
.ui-button{display:flex;justify-content:space-between;margin-top:16px;padding:12px 14px;background:var(--navy);border-radius:10px;color:#fff;font-weight:700}
/* The hero speaks the flow's language: a dot grid behind the screens, the request and the person's check as white cards
   with icon tiles, and the AI step as the one saturated block (the same core as the diagnosis flow and the lanes). */
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(17,44,73,.09) 1px,transparent 1.4px) 0 0/24px 24px;-webkit-mask-image:radial-gradient(55% 65% at 74% 50%,#000,transparent 72%);mask-image:radial-gradient(55% 65% at 74% 50%,#000,transparent 72%);pointer-events:none}
.hero .eyebrow{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 12px;background:#fff;border-radius:999px;box-shadow:0 0 0 1px rgba(17,44,73,.1),0 8px 20px -14px rgba(17,44,73,.4);color:var(--navy)}
.hero .eyebrow::before{content:"";flex:0 0 8px;height:8px;background:var(--blue);border-radius:50%;box-shadow:0 0 0 4px rgba(18,101,255,.15)}
.ui-head>.ui-icon{width:2.3em;height:2.3em;padding:.42em;background:var(--blue-soft);border-radius:.7em}
.ui-human .ui-head>.ui-icon{background:var(--navy);stroke:#fff}
.ui-ai{background:radial-gradient(110% 70% at 100% 0%,rgba(140,185,255,.5),transparent 55%),linear-gradient(155deg,#1c62f2 0%,#1546b8 45%,#112c49 100%);border-color:transparent;box-shadow:0 1px 2px rgba(17,44,73,.2),0 40px 80px -34px rgba(18,80,210,.75);color:#fff}
.ui-ai .ui-head>.ui-icon{background:rgba(255,255,255,.18);stroke:#fff}
.ui-ai .tag-ai{background:rgba(255,255,255,.2);color:#fff}
.ui-ai .ui-checks li{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.ui-ai .ui-checks .ui-icon{background:#fff;border-radius:50%;stroke:var(--blue)}

/* Home section heads: label, title and one line under it on the left; the section's own action, if any, at the right
   edge (bottom-aligned with the line). Every Home section with a head uses this one form. */
.home-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:clamp(32px,3.4vw,48px)}
.home-head h2{margin:0}
.home-lead{max-width:680px;margin:14px 0 0;color:var(--body);font-size:1.0625rem;line-height:1.75;text-wrap:pretty}

/* Before / after: two lanes on the same four columns, on one canvas (the diagnosis canvas's dot grid). Every step
   compares straight down; one request plays through both. Without script, or with reduced motion, both lanes are shown
   finished. Text never animates opacity. Manual steps are white nodes; the automated steps run as one saturated AI band
   (the diagnosis core), and the one step a person still takes is navy. Each lane says how many steps a person handles. */
.lanes{--g:12px;--label:132px;position:relative;margin:0;padding:clamp(22px,2.6vw,36px);background:radial-gradient(rgba(17,44,73,.08) 1px,transparent 1.4px) 0 0/22px 22px,radial-gradient(55% 60% at 62% 72%,rgba(18,101,255,.08),transparent 70%),linear-gradient(180deg,#f7f9fc,#edf2f9);border-radius:28px;box-shadow:inset 0 0 0 1px rgba(17,44,73,.05)}
.lanes-steps{display:grid;grid-template-columns:var(--label) repeat(4,minmax(0,1fr));column-gap:var(--g);margin-bottom:4px;color:var(--muted);font-size:.8125rem;font-weight:700}
.lanes-steps>span{display:flex;align-items:center;gap:8px;min-width:0}
.lanes-steps small{display:inline-grid;place-items:center;min-width:26px;height:20px;padding:0 6px;background:rgba(17,44,73,.07);border-radius:6px;font-size:.6875rem;font-weight:700;font-variant-numeric:tabular-nums}
.lane{display:grid;grid-template-columns:var(--label) minmax(0,1fr);align-items:center;column-gap:var(--g);margin-top:14px}
.lane-label{display:grid;justify-items:start;gap:6px;margin:0;color:var(--ink);font-size:.9375rem;font-weight:700}
.lane-label small{display:inline-flex;align-items:baseline;gap:3px;padding:2px 10px 3px;background:#fff;border-radius:999px;box-shadow:0 0 0 1px rgba(17,44,73,.1);color:var(--muted);font-size:.75rem;font-weight:600}
.lane-label small b{color:var(--ink);font-size:.875rem;font-variant-numeric:tabular-nums}
.lane-after .lane-label{color:var(--blue-ink)}
.lane-after .lane-label small{background:var(--navy);box-shadow:none;color:#d5deea}
.lane-after .lane-label small b{color:#fff}
.lane-track{position:relative;min-width:0}
.lane-track ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);list-style:none;margin:0;padding:0}
.lane-track li{position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;min-width:0;min-height:78px;padding:14px 16px;background:#fff;border-radius:16px;box-shadow:0 1px 2px rgba(17,44,73,.06),0 12px 26px -18px rgba(17,44,73,.4);font-size:1rem;transition:box-shadow .5s var(--ease)}
.lane-track li b{font-weight:700;letter-spacing:-.02em}
.lane-glyph{display:grid;place-items:center;flex:0 0 40px;height:40px;border-radius:12px}
.lane-glyph .ui-icon{width:21px;height:21px;stroke-width:1.9}
.lane-before .lane-glyph{background:#e9edf2}
.lane-before .ui-icon{stroke:#4d5866}
.lane-before li b{color:var(--body)}
.lane-before li.is-miss .lane-glyph{background:var(--danger-soft)}
.lane-before li.is-miss .ui-icon{stroke:var(--danger)}
.lane-before li.is-miss b{color:var(--danger)}
/* The AI band: the same saturated block as the diagnosis core, its steps in white. */
.lane-after li.is-ai{box-shadow:0 1px 2px rgba(17,44,73,.2),0 26px 50px -26px rgba(18,80,210,.75)}
.lane-after li.is-ai::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(90% 140% at 100% 0%,rgba(140,185,255,.45),transparent 55%),linear-gradient(115deg,#1c62f2 0%,#1546b8 58%,#163e8f 100%)}
.lane-after li.is-ai b{color:#fff}
.lane-after li.is-ai .lane-glyph{background:#fff}
.lane-after li.is-ai .ui-icon{stroke:var(--blue)}
.lane-after li.is-human{background:var(--navy)}
.lane-after li.is-human b{color:#fff}
.lane-after li.is-human .lane-glyph{background:#fff}
.lane-after li.is-human .ui-icon{stroke:var(--navy)}
.lane-token{display:none}
/* Playback: cells wait on a neutral ground, then light up as the request reaches them. */
.lanes.is-ready .lane-track .lane-glyph{background:#eef1f5}
.lanes.is-ready .lane-track .ui-icon{stroke:#9aa4b1}
.lanes.is-ready .lane-after li{background:#fff}
.lanes.is-ready .lane-after li.is-ai{box-shadow:0 1px 2px rgba(17,44,73,.06),0 12px 26px -18px rgba(17,44,73,.4)}
.lanes.is-ready .lane-after li.is-ai::before{opacity:0}
.lanes.is-ready .lane-after li b{color:#17314e}
.lanes.is-ready .run-steps>span+span::before{border-color:var(--blue)}
.lanes.is-done .lane-after li.is-ai{box-shadow:0 1px 2px rgba(17,44,73,.2),0 26px 50px -26px rgba(18,80,210,.75)}
.lanes.is-ready .lane-token{display:block;position:absolute;z-index:2;top:-6px;left:12.5%;width:12px;height:12px;margin-left:-6px;border-radius:50%;box-shadow:0 0 0 4px #fff;opacity:0}
.lane-before .lane-token{background:#7d8a9b}
.lane-after .lane-token{background:var(--blue)}
.lanes.is-ready .lane-after .lane-token{box-shadow:0 0 0 4px #fff,0 0 18px 4px rgba(18,101,255,.45)}
.lanes.is-playing .lane-before .lane-token{animation:token-before 5s var(--ease) forwards}
.lanes.is-playing .lane-after .lane-token{animation:token-after 5s var(--ease) forwards}
@keyframes token-before{0%{opacity:1;left:12.5%}16%{left:12.5%}24%{left:37.5%}40%{left:37.5%}48%{left:62.5%}64%{left:62.5%}72%{left:87.5%}96%{opacity:1;left:87.5%}100%{opacity:0;left:87.5%}}
@keyframes token-after{0%{opacity:1;left:12.5%}6%{left:37.5%}12%{left:62.5%}18%{left:87.5%}96%{opacity:1;left:87.5%}100%{opacity:0;left:87.5%}}
@keyframes lit-fade{to{opacity:1}}
@keyframes lit-human{to{background:var(--navy)}}
@keyframes lit-text-white{to{color:#fff}}
@keyframes lit-glyph-before{to{background:#e9edf2}}
@keyframes lit-glyph-miss{to{background:var(--danger-soft)}}
@keyframes lit-glyph-white{to{background:#fff}}
@keyframes lit-icon-before{to{stroke:#4d5866}}
@keyframes lit-icon-miss{to{stroke:var(--danger)}}
@keyframes lit-icon-ai{to{stroke:var(--blue)}}
@keyframes lit-icon-human{to{stroke:var(--navy)}}
@keyframes lit-chevron{to{border-color:rgba(255,255,255,.75)}}
.lanes.is-playing .lane-before .lane-glyph{animation:lit-glyph-before .35s var(--delay) forwards}
.lanes.is-playing .lane-before .ui-icon{animation:lit-icon-before .35s var(--delay) forwards}
.lanes.is-playing .lane-before li.is-miss .lane-glyph{animation:lit-glyph-miss .35s var(--delay) forwards}
.lanes.is-playing .lane-before li.is-miss .ui-icon{animation:lit-icon-miss .35s var(--delay) forwards}
.lanes.is-playing .lane-after li.is-ai::before{animation:lit-fade .5s var(--delay) forwards}
.lanes.is-playing .lane-after li b{animation:lit-text-white .35s var(--delay) forwards}
.lanes.is-playing .lane-after .lane-glyph{animation:lit-glyph-white .35s var(--delay) forwards}
.lanes.is-playing .lane-after li.is-ai .ui-icon{animation:lit-icon-ai .35s var(--delay) forwards}
.lanes.is-playing .lane-after li.is-human{animation:lit-human .35s var(--delay) forwards}
.lanes.is-playing .lane-after li.is-human .ui-icon{animation:lit-icon-human .35s var(--delay) forwards}
.lanes.is-playing .run-steps>span+span::before{animation:lit-chevron .35s var(--delay) forwards}
.lane-before li:nth-child(1){--delay:0s}.lane-before li:nth-child(2){--delay:1.2s}.lane-before li:nth-child(3){--delay:2.4s}.lane-before li:nth-child(4){--delay:3.6s}
.lane-after li:nth-child(1){--delay:0s}.lane-after li:nth-child(2){--delay:.9s}
/* The AI band: one cell across the steps it takes over. Its inner columns match the step columns above,
   and the chevrons sit in the gaps between them. */
.lane-track li[data-span="2"]{grid-column:span 2}
.lane-track li[data-span="3"]{grid-column:span 3}
.lane-track li.is-run{padding-inline:0}
.run-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--g);flex:1;align-items:center;min-width:0}
.run-steps>span{position:relative;display:flex;align-items:center;gap:12px;min-width:0;padding-left:16px}
.run-steps>span+span::before{content:"";position:absolute;left:calc(var(--g) / -2 - 5px);top:50%;width:7px;height:7px;margin-top:-4px;border-top:2px solid rgba(255,255,255,.75);border-right:2px solid rgba(255,255,255,.75);transform:rotate(45deg)}
.lanes-stat{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:24px}
.stat-note{display:flex;align-items:center;gap:14px;margin:0}
.lanes-stat small{color:var(--muted);font-size:.8125rem}
.lanes-replay{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 16px 6px 14px;background:#fff;border:0;border-radius:999px;box-shadow:0 0 0 1px rgba(15,90,230,.28);color:var(--blue-ink);font-size:.875rem;font-weight:700;transition:background-color .2s}
.lanes-replay::before{content:"↻";font-size:1rem;line-height:1}
.lanes-replay:hover{background:var(--blue-soft)}
.lanes-next{min-height:54px}

/* Home AX preview: a heading row, then one wide Diagnostic Canvas. The canvas is one tinted surface with a faint dot grid.
   The sentence is written on a white bar at its top; the answer is drawn under it as a flow: input nodes feed the AI core
   (the one saturated block), which hands decisions to people. Connectors carry a slow pulse the way work moves. Below the
   flow sit the build units. No rules inside the canvas: space and surfaces separate its parts. */
.quick-tool{position:relative}
.quick-canvas{position:relative;padding:clamp(20px,2.5vw,36px);background:radial-gradient(rgba(17,44,73,.08) 1px,transparent 1.4px) 0 0/22px 22px,radial-gradient(55% 45% at 50% 55%,rgba(18,101,255,.08),transparent 70%),linear-gradient(180deg,#f7f9fc,#edf2f9);border-radius:28px;box-shadow:inset 0 0 0 1px rgba(17,44,73,.05)}
/* The writing bar. It reads as a place to write before anyone clicks: a caret waits in the empty line (it blinks a few
   times when the tool first comes into view, then stays); hover and focus draw a ring around the bar. */
.quick-field{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px 14px 14px;background:#fff;border-radius:18px;box-shadow:0 0 0 1.5px var(--ring,transparent),0 1px 2px rgba(17,44,73,.06),0 18px 40px -24px rgba(17,44,73,.4);transition:box-shadow .25s var(--ease)}
.quick-field:hover{--ring:rgba(17,44,73,.18)}
.quick-field:focus-within{--ring:var(--blue)}
.quick-field-icon{display:grid;place-items:center;flex:0 0 44px;height:44px;border-radius:12px;background:var(--navy);transition:background-color .25s}
.quick-field:focus-within .quick-field-icon{background:var(--blue)}
.quick-field-icon svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.quick-input{position:relative;flex:1;min-width:0;font-size:clamp(1.125rem,1.6vw,1.375rem)}
#quick-text{display:block;width:100%;min-height:1.5em;max-height:4.5em;padding:0;background:none;border:0;border-radius:0;color:var(--ink);font:inherit;font-weight:700;line-height:1.5;letter-spacing:-.03em;caret-color:var(--blue);resize:none;outline:none;field-sizing:content}
#quick-text:focus-visible{outline:none}
#quick-text::placeholder{color:#6b7684;font-weight:600;transition:color .2s}
#quick-text:focus::placeholder{color:#a3acb8}
.quick-input:has(#quick-text:placeholder-shown:not(:focus))::before{content:"";position:absolute;left:-1px;top:.24em;width:2px;height:1.05em;background:var(--blue);pointer-events:none}
.quick-tool.is-seen .quick-input::before{animation:caret-wait 1.1s linear 4}
@keyframes caret-wait{0%,54%{background:var(--blue)}55%,100%{background:transparent}}
.quick-field-hint{flex:0 0 auto;padding:6px 10px;background:var(--surface);border-radius:8px;color:var(--muted);font-size:.75rem;font-weight:600;white-space:nowrap;transition:background-color .2s,color .2s}
.quick-field:focus-within .quick-field-hint{background:var(--blue-soft);color:var(--blue-ink)}
.quick-starts{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:16px}
.quick-samples{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.quick-samples>span{flex:0 0 auto;margin-right:6px;white-space:nowrap;color:var(--muted);font-size:.8125rem;font-weight:700}
.quick-samples button{min-height:38px;padding:7px 15px;background:rgba(255,255,255,.9);border:0;border-radius:999px;box-shadow:0 0 0 1px rgba(17,44,73,.1);color:var(--body);font-size:.875rem;font-weight:600;letter-spacing:-.01em;transition:background-color .2s,color .2s,box-shadow .2s}
.quick-samples button:hover{background:#fff;color:var(--ink);box-shadow:0 0 0 1px rgba(17,44,73,.24)}
.quick-samples button[aria-pressed="true"]{background:var(--navy);color:#fff;box-shadow:0 10px 20px -12px rgba(17,44,73,.7)}
.quick-help{margin:0;color:var(--muted);font-size:.8125rem}
/* The answer, named first (the example, or the visitor's sentence). */
.quick-result{margin-top:clamp(32px,3.4vw,44px)}
.quick-result-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 32px}
.quick-source{min-width:0;max-width:780px}
.quick-label{display:flex;align-items:center;gap:10px;margin:0;color:var(--muted);font-size:.8125rem;font-weight:700;letter-spacing:.01em}
.quick-source .quick-label::before{content:"";flex:0 0 8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(18,101,255,.15)}
.quick-quote{margin:10px 0 0;color:var(--ink);font-size:clamp(1.125rem,1.55vw,1.375rem);font-weight:700;line-height:1.5;letter-spacing:-.035em;text-wrap:balance}
.quick-quote::before{content:"“"}
.quick-quote::after{content:"”"}
.quick-read{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:10px 0 0;color:var(--muted);font-size:.875rem;font-weight:600}
.quick-read:empty{display:none}
.quick-read mark{padding:1px 8px;background:#fff;border-radius:6px;box-shadow:0 0 0 1px rgba(15,90,230,.25);color:var(--blue-ink);font-weight:700}
.quick-read span:last-child{color:var(--navy);font-weight:700}
.quick-adopt{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:8px 18px;background:#fff;border:0;border-radius:999px;box-shadow:0 0 0 1px rgba(15,90,230,.28);color:var(--blue-ink);font-size:.875rem;font-weight:700;transition:background-color .2s}
.quick-adopt:hover{background:var(--blue-soft)}
.quick-adopt span{transition:transform .2s var(--ease)}
.quick-adopt:hover span{transform:translateX(3px)}
/* The flow, in the order work moves: what comes in → what AI handles → what people decide. Inputs and decisions are white
   nodes; the AI core is the one saturated block. Each node is joined to the core by a connector with a port at the node. */
.quick-flow{--link:clamp(40px,4.6vw,72px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) minmax(0,1fr);column-gap:var(--link);align-items:stretch;margin-top:24px}
.flow-lane{display:flex;flex-direction:column;min-width:0}
.flow-head{display:flex;align-items:center;gap:8px;margin:0 0 12px;color:var(--muted);font-size:.8125rem;font-weight:700;letter-spacing:-.005em}
.flow-head small{display:inline-grid;place-items:center;min-width:26px;height:20px;padding:0 6px;background:rgba(17,44,73,.07);border-radius:6px;font-size:.6875rem;font-weight:700;font-variant-numeric:tabular-nums}
.flow-head b{font-weight:inherit}
.flow-nodes{display:flex;flex:1;flex-direction:column;justify-content:center;gap:12px;list-style:none;margin:0;padding:0}
.flow-nodes li{position:relative;display:flex;align-items:center;gap:12px;min-height:60px;padding:11px 16px 11px 11px;background:#fff;border-radius:14px;box-shadow:0 1px 2px rgba(17,44,73,.06),0 12px 26px -18px rgba(17,44,73,.4);color:var(--ink);font-size:.9375rem;font-weight:600;line-height:1.45;letter-spacing:-.02em}
.node-icon{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:11px;background:var(--blue-soft)}
.node-icon svg{width:20px;height:20px;fill:none;stroke:var(--blue-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.flow-lane.is-human .node-icon{background:var(--navy)}
.flow-lane.is-human .node-icon svg{stroke:#fff}
.flow-lane.is-human .flow-head{color:var(--navy)}
/* Connectors: from each input into the core, from the core out to each decision. A light pulse travels along them. */
.flow-lane.is-input li::after,.flow-lane.is-human li::before{content:"";position:absolute;top:50%;width:var(--link);height:2px;margin-top:-1px;background:linear-gradient(90deg,transparent 0 38%,var(--blue) 50%,transparent 62% 100%) 100% 0/300% 100% no-repeat,rgba(18,101,255,.24);pointer-events:none}
.flow-lane.is-input li::after{left:100%}
.flow-lane.is-human li::before{right:100%}
.flow-lane.is-input li::before,.flow-lane.is-human li::after{content:"";position:absolute;z-index:1;top:50%;width:10px;height:10px;margin-top:-5px;background:#fff;border-radius:50%;box-shadow:0 0 0 2px var(--blue);pointer-events:none}
.flow-lane.is-input li::before{right:-5px}
.flow-lane.is-human li::after{left:-5px;box-shadow:0 0 0 2px var(--navy)}
.quick-flow .flow-lane.is-input li::after,.quick-flow .flow-lane.is-human li::before{animation:flow-pulse 2.7s linear infinite}
.flow-lane.is-input li:nth-child(2)::after{animation-delay:-.9s}.flow-lane.is-input li:nth-child(3)::after{animation-delay:-1.8s}
.flow-lane.is-human li:nth-child(1)::before{animation-delay:-1.35s}.flow-lane.is-human li:nth-child(2)::before{animation-delay:-2.25s}.flow-lane.is-human li:nth-child(3)::before{animation-delay:-.45s}
@keyframes flow-pulse{from{background-position:100% 0}to{background-position:0 0}}
@keyframes flow-pulse-y{from{background-position:0 100%}to{background-position:0 0}}
/* The AI core: one saturated block with a faint dot texture; its work items sit on glass rows with a check. */
.flow-lane.is-ai{position:relative;isolation:isolate;overflow:hidden;padding:20px 20px 22px;background:radial-gradient(120% 70% at 100% 0%,rgba(140,185,255,.5),transparent 55%),linear-gradient(155deg,#1c62f2 0%,#1546b8 45%,#112c49 100%);border-radius:22px;box-shadow:0 1px 2px rgba(17,44,73,.2),0 34px 64px -30px rgba(18,80,210,.7);color:#fff}
.flow-lane.is-ai::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.4px) 0 0/16px 16px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);mask-image:linear-gradient(180deg,#000,transparent 75%)}
.flow-lane.is-ai .flow-head{color:#fff}
.flow-lane.is-ai .flow-head small{background:rgba(255,255,255,.2)}
.flow-lane.is-ai .flow-nodes{gap:8px}
.flow-lane.is-ai li{min-height:54px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#fff}
.flow-lane.is-ai .node-icon{flex-basis:28px;height:28px;border-radius:50%;background:#fff}
.flow-lane.is-ai .node-icon svg{width:16px;height:16px;stroke:var(--blue);stroke-width:2.6}
/* A new answer registers: the nodes rise into place lane by lane (connectors join once a node has landed). */
@keyframes node-in{from{transform:translateY(12px);clip-path:inset(0 0 100% 0 round 14px)}to{transform:none;clip-path:inset(0 0 0 0 round 14px)}}
.quick-flow.is-fresh .flow-nodes li,.quick-scope.is-fresh li{animation:node-in .5s var(--ease) backwards}
.quick-flow.is-fresh .flow-nodes li:nth-child(2){animation-delay:.06s}.quick-flow.is-fresh .flow-nodes li:nth-child(3){animation-delay:.12s}
.quick-flow.is-fresh .is-ai li{animation-delay:.18s}.quick-flow.is-fresh .is-ai li:nth-child(2){animation-delay:.24s}.quick-flow.is-fresh .is-ai li:nth-child(3){animation-delay:.3s}
.quick-flow.is-fresh .is-human li{animation-delay:.36s}.quick-flow.is-fresh .is-human li:nth-child(2){animation-delay:.42s}.quick-flow.is-fresh .is-human li:nth-child(3){animation-delay:.48s}
.quick-scope.is-fresh li:nth-child(1){animation-delay:.5s}.quick-scope.is-fresh li:nth-child(2){animation-delay:.56s}.quick-scope.is-fresh li:nth-child(3){animation-delay:.62s}.quick-scope.is-fresh li:nth-child(4){animation-delay:.68s}
/* What it would take to build: the task's own components as the units a project is scoped in. */
.quick-scope{margin-top:clamp(32px,3.4vw,44px)}
.quick-scope-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;margin-bottom:12px}
.quick-scope-note{margin:0;color:var(--muted);font-size:.75rem}
.quick-scope ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;list-style:none;margin:0;padding:0}
.quick-scope li{position:relative;display:grid;align-content:start;gap:4px;padding:18px 18px 18px;background:rgba(255,255,255,.82);border-radius:16px;box-shadow:0 0 0 1px rgba(17,44,73,.06)}
.quick-scope li::before{content:"";position:absolute;left:18px;top:0;width:28px;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--blue),var(--navy))}
.quick-scope li small{color:var(--blue-ink);font-size:.75rem;font-weight:700;font-variant-numeric:tabular-nums}
.quick-scope li strong{color:var(--navy);font-size:1rem;font-weight:700;letter-spacing:-.02em}
.quick-scope li span{color:var(--muted);font-size:.8125rem;line-height:1.55}
.quick-miss{display:none;margin:18px 0 0;padding:20px 22px;background:#fff;border-radius:16px;box-shadow:0 0 0 1px rgba(17,44,73,.06);color:var(--body);font-size:1rem;line-height:1.65}
/* The visitor's sentence is already on the bar above, so the answer does not repeat it; no match shows the way out. */
.quick-tool[data-state="result"] :is(.quick-quote,.quick-adopt),.quick-tool[data-state="nomatch"] :is(.quick-quote,.quick-adopt,.quick-flow,.quick-scope){display:none}
.quick-tool[data-state="nomatch"] .quick-miss{display:block}
/* The next step follows the state: the example or a match → the five questions; no match → send the sentence. */
.quick-next{margin-top:clamp(28px,3vw,40px)}
.quick-next-row{display:none;flex-wrap:wrap;align-items:center;gap:12px 28px}
.quick-tool:not([data-state]) .quick-next-row[data-when~="static"],.quick-tool[data-state="example"] .quick-next-row[data-when~="example"],.quick-tool[data-state="result"] .quick-next-row[data-when~="result"],.quick-tool[data-state="nomatch"] .quick-next-row[data-when~="nomatch"]{display:flex}
.quick-next .button{min-height:54px;padding-inline:26px}
.quick-ask{margin:0;color:var(--muted);font-size:.9375rem}
.quick-ask .text-link{font-size:.9375rem}
/* Example sentences: text buttons, not chips. */
.sample-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 16px;margin-top:8px;font-size:.875rem}
.sample-links>span{color:var(--muted);font-size:.8125rem;font-weight:600}
.sample-links button{min-height:36px;padding:4px 0;background:none;border:0;color:var(--blue-ink);font-weight:600;text-decoration:underline;text-decoration-color:rgba(15,90,230,.35);text-underline-offset:4px}
.sample-links button:hover{text-decoration-color:currentColor}
.preview-window{display:grid;gap:14px;padding:clamp(18px,2vw,28px);background:#fff;border-radius:var(--radius-xl);box-shadow:0 40px 80px -36px rgba(17,44,73,.28);color:var(--ink);font-size:.875rem}
.preview-window small{display:block;margin-bottom:6px;color:var(--muted);font-size:.75rem;font-weight:600}
.preview-input{padding:14px 16px;background:var(--surface);border-radius:var(--radius)}
.preview-input span{color:var(--muted);font-size:.75rem;font-weight:600}
.preview-input p{margin-top:4px;font-size:.9375rem;font-weight:600}
.preview-result{display:grid;gap:16px;padding:4px 4px 2px}
.preview-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 24px}
.preview-top strong{font-size:1.375rem;font-weight:700;letter-spacing:-.03em}
.preview-readiness b{display:block;margin-top:6px;font-size:.8125rem}
.preview-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.preview-split>div{padding:14px;border-radius:var(--radius)}
.preview-split .is-ai{background:var(--blue-soft)}.preview-split .is-ai small{color:var(--blue-ink)}
.preview-split .is-human{background:var(--surface-blue)}.preview-split .is-human small{color:var(--navy)}
.preview-split ul{display:grid;gap:6px;margin:0;padding-left:16px;font-weight:600;line-height:1.5}
.preview-blocks{color:var(--body);font-size:.8125rem;line-height:1.7}
.preview-window.is-updating>*{animation:sheet-register .45s var(--ease) both}
.preview-window.is-updating>:nth-child(2){animation-delay:.08s}

/* Flagship: a full-bleed navy beat. The platform is shown feature by feature on a light stage: the list on the left
   chooses the screen, and while the section is in view it advances by itself with a progress rule under the open feature.
   Below, the catalogue opens as five field cards, each a real cover cropped to the product with its count.
   Surfaces and glow separate the parts, not rules. */
.home-work{overflow:hidden;background:radial-gradient(48% 58% at 80% 28%,rgba(91,141,239,.28),transparent 70%),radial-gradient(40% 36% at 6% 96%,rgba(91,141,239,.14),transparent 70%),var(--navy);color:var(--on-navy)}
.home-work :focus-visible{outline-color:var(--blue-on-navy)}
.flagship{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);grid-template-areas:"intro stage" "tabs stage" "actions stage";grid-template-rows:auto auto 1fr;column-gap:clamp(40px,5.6vw,96px);align-items:start}
.flagship-intro{grid-area:intro}
.flagship-intro .eyebrow{color:var(--blue-on-navy)}
.client-mark{display:flex;align-items:center;gap:12px;margin-bottom:18px;color:#fff;font-size:.9375rem;font-weight:700}
.client-mark span+span{padding-left:12px;border-left:1px solid var(--navy-line);color:var(--on-navy-muted);font-weight:600;letter-spacing:.08em}
.client-mark img{width:auto;height:40px;padding:6px 12px;background:#fff;border-radius:var(--radius-sm)}
.flagship-intro h2{font-size:clamp(2rem,3.3vw,3rem);line-height:1.22;color:#fff;text-wrap:balance}
.flagship-lead{margin:14px 0 0;color:var(--on-navy-muted);font-size:1.125rem}
.flagship .attribution{color:var(--on-navy-muted)}
.flagship .frame-note,.folio-card .frame-note{color:var(--on-navy-muted)}
/* The feature list: the open feature has a glass row, its line of detail and (while advancing) a progress rule. */
.feature-tabs{grid-area:tabs;display:grid;gap:2px;list-style:none;margin:32px 0 0;padding:0}
.feature-tab{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);width:100%;padding:12px 16px 13px 14px;background:transparent;border:0;border-radius:14px;color:var(--on-navy-muted);text-align:left;cursor:pointer;transition:background-color .25s var(--ease)}
.feature-no{padding-top:4px;font-size:.75rem;font-weight:600;font-variant-numeric:tabular-nums;transition:color .2s}
.feature-name{grid-column:2;color:#c6d2e0;font-size:1.0625rem;font-weight:650;line-height:1.5;letter-spacing:-.02em;transition:color .2s}
.feature-text{grid-column:2;display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.feature-text>span{overflow:hidden;min-height:0;color:var(--on-navy-muted);font-size:.875rem;line-height:1.6}
.feature-tab:hover{background:rgba(255,255,255,.04)}
.feature-tab:hover .feature-name{color:#fff}
.feature-tab[aria-pressed="true"]{background:rgba(255,255,255,.08)}
.feature-tab[aria-pressed="true"] .feature-no{color:var(--blue-on-navy)}
.feature-tab[aria-pressed="true"] .feature-name{color:#fff}
.feature-tab[aria-pressed="true"] .feature-text{grid-template-rows:1fr}
.feature-tab:focus-visible{outline-offset:0;border-radius:14px}
.feature-progress{position:absolute;left:46px;right:16px;bottom:0;height:2px;overflow:hidden;border-radius:2px;background:transparent}
.feature-progress i{display:block;height:100%;background:var(--blue-on-navy);transform:scaleX(0);transform-origin:left}
.flagship.is-auto .feature-tab[aria-pressed="true"] .feature-progress{background:rgba(255,255,255,.12)}
.flagship.is-auto.is-playing .feature-tab[aria-pressed="true"] .feature-progress i{animation:feature-progress 6.5s linear forwards}
.flagship.is-auto:is(:hover,:focus-within) .feature-progress i{animation-play-state:paused}
@keyframes feature-progress{to{transform:scaleX(1)}}
.flagship-actions{grid-area:actions;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:28px}
.flagship-scope{margin:0;color:var(--on-navy-muted);font-size:.875rem}
/* The stage: a light screen with a soft glow behind it. Each feature's excerpts sit centred on it and cross-fade. */
.flagship-stage{grid-area:stage;position:relative;align-self:center;min-width:0;margin:0}
.flagship-stage::before{content:"";position:absolute;inset:6% -4% 2% 6%;background:radial-gradient(closest-side,rgba(91,141,239,.42),transparent);filter:blur(48px);pointer-events:none}
.stage-screen{position:relative;aspect-ratio:16/10;overflow:hidden;background:radial-gradient(70% 60% at 50% 40%,#fff,transparent 80%),linear-gradient(160deg,#f3f7fc 0%,#e0e9f5 100%);border-radius:24px;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 60px 120px -50px rgba(0,0,0,.8)}
.stage-shot{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:clamp(16px,2.6vw,36px);opacity:0;transform:translateY(14px) scale(.985);transition:opacity .45s var(--ease),transform .8s var(--ease);pointer-events:none}
.stage-shot.is-active{opacity:1;transform:none;pointer-events:auto}
.stage-shot img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 1px 2px rgba(17,44,73,.1),0 30px 60px -30px rgba(17,44,73,.55)}
.stage-shot.is-pair img{max-height:calc(50% - 7px)}
.flagship-stage figcaption{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin-top:14px}
.stage-title{color:#fff;font-size:.875rem;font-weight:650}
/* The catalogue: five field cards (a real cover cropped to the product, the count beside the number) and the whole catalogue as its own link. */
.case-shelf{margin-top:clamp(72px,7vw,104px)}
.case-shelf-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:clamp(24px,2.6vw,36px)}
.case-shelf-head h3{margin:0;color:#fff;font-size:clamp(1.625rem,2.4vw,2.25rem);font-weight:700;line-height:1.3;letter-spacing:-.035em}
.case-shelf-head p{margin:8px 0 0;color:var(--on-navy-muted);font-size:1rem}
.field-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.3vw,20px);list-style:none;margin:0;padding:0}
.field-card{display:flex;flex-direction:column;height:100%;overflow:hidden;background:rgba(255,255,255,.055);border-radius:20px;color:var(--on-navy);text-decoration:none;transition:transform .45s var(--ease),background-color .3s,box-shadow .45s var(--ease)}
.field-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--navy-2)}
.field-media img{width:100%;height:100%;object-fit:cover;object-position:50% var(--fy,80%);transition:transform .8s var(--ease)}
.field-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,44,73,.18),transparent 40%,transparent 70%,rgba(17,44,73,.3));pointer-events:none}
.field-body{display:grid;gap:4px;padding:16px 18px 20px}
.field-no{display:flex;align-items:baseline;color:var(--blue-on-navy);font-size:.75rem;font-weight:700;font-variant-numeric:tabular-nums}
.field-total{color:var(--on-navy-muted);font-weight:600}
.field-total::before{content:"·";margin:0 6px;color:var(--navy-line)}
.field-total b{color:#fff;font-size:.8125rem;font-weight:700}
.field-name{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#fff;font-size:1.125rem;font-weight:700;letter-spacing:-.025em}
.field-go{color:var(--blue-on-navy);font-size:1rem;transition:transform .25s var(--ease)}
.field-scope{color:var(--on-navy-muted);font-size:.8125rem;line-height:1.55}
.field-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.1);box-shadow:0 40px 60px -40px rgba(0,0,0,.75)}
.field-card:hover .field-media img{transform:scale(1.06)}
.field-card:is(:hover,:focus-visible) .field-go{transform:translateX(4px)}
.field-card:focus-visible{outline:3px solid var(--blue-on-navy);outline-offset:3px;border-radius:20px}

/* Work flagship: one statement and one screen on a navy card. Pills say what it is and how Kunnworks took part; the copy
   is the client, the title and one line; the stage (the Home showcase's light screen) shows the platform's lead screen.
   Scope and facts live on the case page. */
.folio-card{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:center;gap:clamp(32px,4.8vw,80px);padding:clamp(28px,4.4vw,72px);border-radius:28px}
.folio-card :focus-visible{outline-color:var(--blue-on-navy)}
.folio-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.folio-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.folio-tags>span{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;background:rgba(255,255,255,.08);border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#fff;font-size:.75rem;font-weight:700;letter-spacing:.14em;line-height:1.5}
.folio-tags>span:first-child::before{content:"";flex:0 0 7px;height:7px;background:var(--blue-on-navy);border-radius:50%;box-shadow:0 0 0 3px rgba(156,192,255,.22)}
.folio-tags .attribution{color:var(--blue-on-navy);letter-spacing:0}
.folio-copy h2{color:#fff;font-size:clamp(2rem,3.2vw,3rem);line-height:1.22;text-wrap:balance}
.folio-lead{margin:14px 0 0;color:var(--on-navy-muted);font-size:1.125rem}
.folio-copy>.button{margin-top:36px}
.folio-stage{position:relative;min-width:0;margin:0}
.folio-stage::before{content:"";position:absolute;inset:6% -4% 2% 6%;background:radial-gradient(closest-side,rgba(91,141,239,.42),transparent);filter:blur(48px);pointer-events:none}
/* The lead screen is in the first view: it is sized by width (its own ratio from its attributes) so nothing moves when it loads. */
.folio-stage .stage-shot img{width:100%;height:auto;max-height:100%;object-fit:contain}
.folio-stage figcaption{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin-top:14px}

.row-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px;margin-bottom:clamp(32px,3.5vw,48px)}

/* Services on Home: a heading row (title, one line and the services link), then three doors as white cards. The picture
   (a Kunnworks case or the blockchain concept plate) is inset in the card with nothing laid over it; the service's
   number and name sit above the title, the capabilities follow as small pills, and the arrow fills on hover. */
.service-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,28px);list-style:none;margin:0;padding:0}
.service-card{display:flex;flex-direction:column;height:100%;padding:10px;background:#fff;border-radius:26px;box-shadow:0 0 0 1px rgba(17,44,73,.06),0 1px 2px rgba(17,44,73,.05),0 24px 48px -30px rgba(17,44,73,.35);color:inherit;text-decoration:none;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.service-card-media{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--surface);border-radius:18px}
.service-card-media>img{--v:75;width:100%;height:100%;object-fit:cover;object-position:50% var(--fy,80%);transition:transform .8s var(--ease)}
.service-card-media .concept-plate{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;box-shadow:none}
.concept-plate.is-wide .concept-title{font-size:5.2cqi}
.concept-plate.is-wide .chain-scene{left:6%;bottom:0;width:88%}
/* In a service card the plate is a picture like its neighbours: no heading of its own (the card title names it), the chain centred. */
.service-card-media .concept-plate :is(.concept-title,.concept-wordmark){display:none}
.service-card-media .concept-plate.is-wide .chain-scene{left:12%;top:50%;bottom:auto;width:76%;transform:translateY(-50%)}
.service-card-body{position:relative;display:grid;gap:14px;padding:20px 12px 12px}
.service-card-body .service-index-label{align-items:baseline;margin:0 0 -8px;padding-right:52px}
.service-card-body .service-index-label span{flex:none}
.service-card h3{margin:0;padding-right:52px;font-size:1.5rem;font-weight:700;letter-spacing:-.035em;transition:color .2s}
.service-go{position:absolute;top:16px;right:12px;display:grid;place-items:center;width:40px;height:40px;background:var(--surface-blue);border-radius:50%;color:var(--navy);font-size:1rem;transition:background-color .25s,color .25s,transform .25s var(--ease)}
.service-caps{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.service-caps li{padding:4px 11px;background:var(--surface);border-radius:999px;box-shadow:inset 0 0 0 1px rgba(17,44,73,.07);color:var(--body);font-size:.8125rem;font-weight:600;letter-spacing:-.01em}
.service-card:hover{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(17,44,73,.06),0 2px 4px rgba(17,44,73,.06),0 40px 70px -36px rgba(17,44,73,.5)}
.service-card:hover .service-card-media>img{transform:scale(1.05)}
.service-card:is(:hover,:focus-visible) h3{color:var(--blue-ink)}
.service-card:is(:hover,:focus-visible) .service-go{background:var(--blue);color:#fff;transform:translate(1px,-1px)}
.service-card:focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:26px}
/* The services index keeps its type label. */
.service-index-label{display:flex;gap:10px;color:var(--muted);font-size:.75rem;font-weight:650;letter-spacing:.12em}
.service-index-label span{color:var(--blue-ink)}

/* Home finale: the people and the invitation beside how the work runs, in one navy panel (brand cut, glow, dot texture).
   The four collaboration steps sit on one line with a pulse, as the connectors do in the diagnosis flow. */
.home-finale .finale-panel{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:clamp(40px,5vw,88px)}
.home-finale .closing-copy .eyebrow{margin:0;color:var(--blue-on-navy);font-size:.75rem}
.home-finale h2{margin-top:10px}
.finale-people{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.finale-avatars{display:flex}
.finale-avatars>span{position:relative;overflow:hidden;width:52px;height:52px;background:#fff;border-radius:50%;box-shadow:0 0 0 3px var(--navy),0 10px 20px -10px rgba(0,0,0,.6)}
.finale-avatars>span+span{margin-left:-12px}
.finale-avatars img{position:absolute;left:-64%;top:-22%;width:240%;max-width:none;height:auto}
.closing-copy .finale-names{display:grid;gap:1px;margin:0;color:var(--on-navy-muted);font-size:.8125rem;line-height:1.5}
.finale-names b{color:#fff;font-weight:700}
.finale-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:32px}
.finale-flow-head{margin:0 0 14px;color:var(--blue-on-navy);font-size:.8125rem;font-weight:700}
.finale-flow ol{position:relative;display:grid;gap:10px;list-style:none;margin:0;padding:0}
.finale-flow ol::before{content:"";position:absolute;left:11px;top:30px;bottom:30px;width:2px;background:linear-gradient(180deg,transparent 0 40%,var(--blue-on-navy) 50%,transparent 60% 100%) 0 100%/100% 300% no-repeat,rgba(156,192,255,.25);animation:flow-pulse-y 4.2s linear infinite}
.finale-flow li{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:14px;align-items:center}
.finale-flow li::before{content:"";position:relative;z-index:1;justify-self:center;width:10px;height:10px;background:var(--navy);border-radius:50%;box-shadow:0 0 0 2px var(--blue-on-navy)}
.finale-flow li>div{display:grid;gap:3px;padding:12px 16px 13px;background:rgba(255,255,255,.06);border-radius:14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.finale-flow strong{display:flex;align-items:baseline;gap:10px;color:#fff;font-size:1rem;font-weight:700;letter-spacing:-.02em}
.finale-flow strong small{color:var(--blue-on-navy);font-size:.75rem;font-weight:700;font-variant-numeric:tabular-nums}
.finale-flow li span{color:var(--on-navy-muted);font-size:.8125rem;line-height:1.55}

/* Home rhythm. One gap between white sections, a wider field inside the navy flagship, a short run-in to the finale.
   At 1440 every white-to-white content gap is about 180 px; the hero is a full first screen, so the lanes start closer. */
.compare-section,.home-diagnosis,.home-services{padding-block:clamp(56px,6.2vw,92px)}
/* The diagnosis ends about as far above the navy work beat as the services end above the finale. */
.home-diagnosis{padding-bottom:clamp(64px,7.4vw,106px)}
@media(min-width:901px){.hero+.compare-section{padding-top:clamp(24px,3vw,44px)}}
.home-work{padding-block:clamp(72px,7.6vw,112px)}
.home-finale{padding-top:clamp(8px,1.4vw,24px);padding-bottom:clamp(56px,6.2vw,92px)}

/* Still framing. Each still carries its product's vertical centre (--c, % of the image, from data-focus); a frame sets --v,
   the share of the image height it shows (16:10 → 62.5, 4:3 → 75), and the crop point centres the product in it. */
img[data-focus="30"]{--c:30}img[data-focus="31"]{--c:31}img[data-focus="32"]{--c:32}img[data-focus="33"]{--c:33}img[data-focus="34"]{--c:34}img[data-focus="35"]{--c:35}img[data-focus="36"]{--c:36}img[data-focus="37"]{--c:37}img[data-focus="38"]{--c:38}img[data-focus="39"]{--c:39}img[data-focus="40"]{--c:40}img[data-focus="41"]{--c:41}img[data-focus="42"]{--c:42}img[data-focus="43"]{--c:43}img[data-focus="44"]{--c:44}img[data-focus="45"]{--c:45}img[data-focus="46"]{--c:46}img[data-focus="47"]{--c:47}img[data-focus="48"]{--c:48}img[data-focus="49"]{--c:49}img[data-focus="50"]{--c:50}img[data-focus="51"]{--c:51}img[data-focus="52"]{--c:52}img[data-focus="53"]{--c:53}img[data-focus="54"]{--c:54}img[data-focus="55"]{--c:55}img[data-focus="56"]{--c:56}img[data-focus="57"]{--c:57}img[data-focus="58"]{--c:58}img[data-focus="59"]{--c:59}img[data-focus="60"]{--c:60}img[data-focus="61"]{--c:61}img[data-focus="62"]{--c:62}img[data-focus="63"]{--c:63}img[data-focus="64"]{--c:64}img[data-focus="65"]{--c:65}img[data-focus="66"]{--c:66}img[data-focus="67"]{--c:67}img[data-focus="68"]{--c:68}img[data-focus="69"]{--c:69}img[data-focus="70"]{--c:70}img[data-focus="71"]{--c:71}img[data-focus="72"]{--c:72}img[data-focus="73"]{--c:73}img[data-focus="74"]{--c:74}img[data-focus="75"]{--c:75}img[data-focus="76"]{--c:76}img[data-focus="77"]{--c:77}img[data-focus="78"]{--c:78}img[data-focus="79"]{--c:79}img[data-focus="80"]{--c:80}
img[data-focus]{--v:62.5;--fy:clamp(0%,calc((var(--c) - var(--v) / 2) / (100 - var(--v)) * 100%),100%)}
/* ─── PORTFOLIO CARDS ───
   One card for Delivered and the full catalogue. A white card with the cover inset at 16:10, cropped toward the bottom so
   the cover's own title stays out of frame (the Home field-card rule), with nothing laid over it; then the
   field and involvement as text, the title (two lines at most) and the range, which keeps to the bottom so a row's cards end on one line. One gap
   in both directions. Under 480px the card becomes a row: thumbnail left, field over involvement. */
.case-card{min-width:0}
.case-card-link{--pad:8px;position:relative;display:flex;flex-direction:column;height:100%;padding:var(--pad);background:#fff;border-radius:24px;box-shadow:0 0 0 1px rgba(17,44,73,.06),0 1px 2px rgba(17,44,73,.05),0 22px 44px -30px rgba(17,44,73,.38);color:inherit;text-decoration:none;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.case-card-media{overflow:hidden;aspect-ratio:16/10;background:var(--surface-blue);border-radius:18px}
.case-card-media img{width:100%;height:100%;object-fit:cover;object-position:50% var(--fy,80%);transition:transform .8s var(--ease)}
.case-card-body{position:relative;display:flex;flex:1;flex-direction:column;gap:6px;padding:16px 10px 10px}
.case-card-meta{display:flex;flex-wrap:wrap;align-items:baseline;margin:0;padding-right:48px;color:var(--blue-ink);font-size:.8125rem;font-weight:700}
.case-card-kind{color:var(--muted);font-weight:600}
.case-card-kind::before{content:"·";margin:0 6px;color:var(--line-ui)}
.case-card-kind:is(.kind-company,.kind-built){color:var(--navy);font-weight:700}
.case-card h3{display:-webkit-box;overflow:hidden;margin:0;padding-right:48px;font-size:1.125rem;font-weight:700;line-height:1.45;letter-spacing:-.025em;text-wrap:balance;-webkit-line-clamp:2;-webkit-box-orient:vertical;transition:color .2s}
.case-card-range{margin:auto 0 0;padding-top:4px;color:var(--muted);font-size:.875rem;line-height:1.55}
.case-card-go{position:absolute;top:14px;right:8px;display:grid;place-items:center;width:36px;height:36px;background:var(--surface-blue);border-radius:50%;color:var(--navy);font-size:.9375rem;transition:background-color .25s,color .25s,transform .25s var(--ease)}
.case-card-link:hover{transform:translateY(-5px);box-shadow:0 0 0 1px rgba(17,44,73,.06),0 2px 4px rgba(17,44,73,.06),0 36px 64px -34px rgba(17,44,73,.5)}
.case-card-link:hover img{transform:scale(1.05)}
.case-card-link:is(:hover,:focus-visible) h3{color:var(--blue-ink)}
.case-card-link:is(:hover,:focus-visible) .case-card-go{background:var(--blue);color:#fff;transform:translate(1px,-1px)}
.case-card-link:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:24px}
.case-card.is-registered .case-card-link{animation:rise .6s var(--ease)}
.breadth-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,24px)}
.catalogue-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,24px)}
.related-portfolio{margin-top:48px}
.related-evidence>.text-link,.project-next>.text-link{margin-top:24px}
.media-card{margin:0}
.media-card a{display:block;text-decoration:none}
.media-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-xl);box-shadow:var(--shadow-card)}
.media-card figcaption{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px;margin-top:14px;font-size:.8125rem;color:var(--muted)}
.media-card figcaption strong{color:var(--ink);font-size:.9375rem;font-weight:650}
.media-card a:hover strong{color:var(--blue-ink)}

/* Blockchain image: the cover grammar of the portfolio images (square plate, wordmark, title, subject below), a staged scene instead of a device. */
.concept-plate{position:relative;container-type:inline-size;aspect-ratio:1/1;overflow:hidden;background:var(--navy) radial-gradient(70% 60% at 82% 8%,rgba(91,141,239,.26),transparent 70%);border-radius:var(--radius-xl);box-shadow:var(--shadow-card)}
.concept-plate .concept-wordmark{position:absolute;left:5.5%;top:5%;width:22%;height:auto;aspect-ratio:auto;border-radius:0;box-shadow:none}
.concept-title{position:absolute;left:5.5%;top:11.5%;color:#fff;font-size:6.4cqi;white-space:nowrap;font-weight:800;line-height:1.2;letter-spacing:-.04em}
.concept-diagram .frame-note{color:var(--muted)}
/* The staged chain: three chamfered blocks on an isometric floor, lit from above, joined by moving links. */
.chain-scene{position:absolute;left:0;bottom:2%;width:100%;height:auto}
.cs-floor path{stroke:rgba(255,255,255,.07);stroke-width:1}
.cs-shadow{fill:rgba(0,0,0,.5);filter:url(#cs-blur)}
.cs-top{fill:#f4f7fb}
.cs-left{fill:#1b375c}
.cs-right{fill:#284a76}
.cs-cut{fill:#5b8def}
.is-chain .cs-top{fill:var(--blue)}
.is-chain .cs-left{fill:#0a3f9f}
.is-chain .cs-right{fill:#1152c8}
.is-chain .cs-cut{fill:#9dbcff}
.cs-glyph{fill:none;stroke:#112c49;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.is-chain .cs-glyph{stroke:#fff}
.cs-bridge path{fill:none;stroke:var(--blue-on-navy);stroke-width:2.5;stroke-dasharray:4 6;stroke-linecap:round;animation:gap-flow 1.6s linear infinite}
.cs-bridge circle{fill:var(--blue-on-navy)}

/* Leadership platform experience, told as the people's story. */
/* Leadership lineage: the ground under the blockchain service. Copy and its role on the left; on the right the platform
   lifecycle as one axis, and one row per record: its name, how it was held, and a single span over the stages it covered. */
.lineage{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:clamp(32px,4.6vw,76px);margin-top:clamp(40px,4vw,64px);padding:clamp(32px,4vw,56px);border-radius:28px;color:var(--on-navy)}
.lineage :focus-visible{outline-color:var(--blue-on-navy)}
.lineage-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.lineage-tag{margin:0 0 16px;color:var(--blue-on-navy);font-size:.875rem;font-weight:700;line-height:1.5}
.lineage-lead{margin:0;color:#fff;font-size:clamp(1.625rem,2.6vw,2.25rem);font-weight:700;line-height:1.32;letter-spacing:-.04em;text-wrap:balance}
.lineage-story{margin:16px 0 0;color:var(--on-navy-muted);font-size:1.0625rem;line-height:1.75;text-wrap:pretty}
.lineage-copy>.button{margin-top:32px}
.lineage-map{--track:minmax(0,1fr);min-width:0}
.lineage-axis,.lineage-list li{display:grid;grid-template-columns:minmax(0,1.1fr) var(--track);align-items:center;column-gap:clamp(20px,2.4vw,32px)}
.lineage-axis{margin:0;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.2);color:var(--on-navy-muted);font-size:.875rem;font-weight:600}
.lineage-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;text-align:center}
.lineage-stages b{color:#fff;font-size:.9375rem;font-weight:700}
.lineage-list{list-style:none;margin:0;padding:0}
.lineage-list li{padding:20px 0;border-bottom:1px solid rgba(255,255,255,.08);scroll-margin-top:calc(var(--header) + 24px)}
.lineage-list li:last-child{padding-bottom:4px;border-bottom:0}
.lineage-name{display:grid;gap:2px;min-width:0;margin:0}
.lineage-name strong{color:#fff;font-size:1.0625rem;font-weight:700;line-height:1.45;letter-spacing:-.02em}
.lineage-name span{color:var(--blue-on-navy);font-size:.875rem;font-weight:600}
.lineage-list li:target strong{color:var(--blue-on-navy)}
.lineage-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.lineage-track>*{grid-row:1;height:12px;border-radius:999px}
.lineage-track i{background:rgba(255,255,255,.08)}
.lineage-track i:nth-child(1){grid-column:1}.lineage-track i:nth-child(2){grid-column:2}.lineage-track i:nth-child(3){grid-column:3}.lineage-track i:nth-child(4){grid-column:4}
.lineage-track b{background:var(--blue-on-navy);box-shadow:0 0 18px -4px rgba(156,192,255,.6)}
.lineage-track [data-from="1"]{grid-column-start:1}.lineage-track [data-from="2"]{grid-column-start:2}.lineage-track [data-from="3"]{grid-column-start:3}.lineage-track [data-from="4"]{grid-column-start:4}
.lineage-track [data-to="2"]{grid-column-end:2}.lineage-track [data-to="3"]{grid-column-end:3}.lineage-track [data-to="4"]{grid-column-end:4}.lineage-track [data-to="5"]{grid-column-end:5}

/* ─── AX DIAGNOSIS · intro → one question per screen → report ─── */
.diagnosis-section{min-height:calc(100svh - var(--header));background:var(--surface)}
.diagnosis-section:not([data-current-screen="intro"]){padding-top:clamp(32px,4vw,56px)}
.wizard-intro{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(32px,5vw,80px)}
.wizard-intro h1{font-size:clamp(2.375rem,4.4vw,4rem)}
.intro-teaser{position:relative;margin:0;rotate:2deg}
.intro-teaser>.frame-note{display:block;margin-top:12px;text-align:right}
.wizard-promise{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;margin:36px 0 0;padding:0}
.wizard-promise li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:10px;padding:16px 18px;background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.wizard-promise .step-number{grid-row:1/3}
.wizard-promise strong{font-weight:700}
.wizard-promise small{color:var(--muted);font-size:.8125rem;line-height:1.5}
.wizard-intro .intro-actions{margin-top:32px}
.wizard-intro .illustrative-label{margin:20px 0 0}
.wizard{max-width:920px;margin:0 auto;padding:clamp(24px,4vw,52px);background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-xl);box-shadow:var(--shadow-card)}
.wizard-bar{display:flex;align-items:center;gap:16px;margin-bottom:clamp(28px,4vw,44px)}
.wizard-name{color:var(--muted);font-size:.8125rem;font-weight:700;white-space:nowrap}
.wizard-progress{flex:1;height:6px;overflow:hidden;background:var(--surface-blue);border-radius:999px}
.wizard-progress i{display:block;height:100%;background:var(--blue);transform:scaleX(var(--done,0));transform-origin:left;transition:transform .45s var(--ease)}
.wizard-exit{min-height:44px;padding:8px 4px;background:none;border:0;color:var(--muted);font-size:.8125rem;font-weight:600;text-decoration:underline}
.wizard-step{min-width:0;margin:0;padding:0;border:0}
.wizard-step:not([hidden]){animation:step-in .45s var(--ease) both}
@keyframes step-in{from{transform:translateX(24px)}to{transform:none}}
.wizard-step>legend{display:flex;flex-direction:column;gap:10px;margin-bottom:10px;padding:0}
.step-count{color:var(--blue-ink);font-size:.875rem;font-weight:700}
.step-title{font-size:clamp(1.625rem,3vw,2.375rem);font-weight:700;line-height:1.3;letter-spacing:-.04em}
.step-title:focus{outline:none}
.step-help{margin-bottom:28px;color:var(--muted)}
.step-text{margin-bottom:24px;padding:20px;background:var(--surface);border-radius:var(--radius-lg)}
.step-text label{display:flex;align-items:baseline;gap:6px;margin-bottom:10px;font-weight:650}
.step-text label>span,.field>label>span,.field-label>span{color:var(--muted);font-size:.8125rem;font-weight:500}
#diagnosis-text{display:block;width:100%;min-height:72px;padding:12px 14px;background:#fff;border:1px solid var(--line-ui);border-radius:var(--radius);font-size:1.0625rem;line-height:1.6;resize:vertical}
#diagnosis-text::placeholder{color:#6b7684}
#diagnosis-text:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(18,101,255,.14);outline:2px solid transparent}
.detected{min-height:1.6em;margin-top:8px;color:var(--blue-ink);font-size:.8125rem;font-weight:600}
.option-grid{display:grid;gap:10px}
.option-grid-scenario,.option-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.option-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.option{position:relative;display:block;min-width:0;cursor:pointer}
.option input{position:absolute;opacity:0;width:1px;height:1px}
/* The answer marker is one symbol module: empty until chosen, blue when chosen. */
.option-body{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;column-gap:14px;row-gap:4px;height:100%;padding:18px 20px;background:#fff;border:1px solid var(--line-ui);border-radius:var(--radius);transition:border-color .2s,box-shadow .2s}
.option-mark{grid-row:1/3;width:22px;height:22px;margin-top:2px;background:var(--surface-blue);clip-path:polygon(0 0,15px 0,22px 7px,22px 22px,0 22px)}
.option-body strong{font-size:1.0625rem;font-weight:700;line-height:1.45}
.option-body small{color:var(--muted);font-size:.875rem;line-height:1.55}
.option:hover .option-body{border-color:var(--blue);box-shadow:var(--shadow-card)}
.option input:checked+.option-body{border-color:var(--blue);background:var(--blue-soft);box-shadow:inset 0 0 0 1px var(--blue)}
.option input:checked+.option-body .option-mark{background:var(--blue)}
.option input:focus-visible+.option-body{outline:3px solid var(--blue);outline-offset:3px}
.wizard-nav{display:flex;align-items:center;gap:12px;margin-top:clamp(28px,4vw,40px)}
.wizard-hint{flex:1;color:var(--danger);font-size:.875rem;font-weight:600;text-align:center}
/* Assembly: centred in the viewport; the symbol's six modules fill while the four inputs are checked off. */
.diagnosis-section[data-current-screen="analyzing"]{display:flex;align-items:center;justify-content:center;padding-block:var(--section)}
.wizard-analyzing{display:flex;flex-direction:column;align-items:center;text-align:center}
.analyzing-mark{width:88px;margin-bottom:28px}
.analyzing-symbol{display:block;width:100%;height:auto}
.analyzing-symbol .module{fill:var(--surface-blue-2);animation:module-on .3s var(--ease) forwards}
.analyzing-symbol .module-1{animation-delay:.1s}.analyzing-symbol .module-2{animation-delay:.3s}.analyzing-symbol .module-3{animation-delay:.5s}.analyzing-symbol .module-4{animation-delay:.7s}.analyzing-symbol .module-5{animation-delay:.9s}.analyzing-symbol .module-6{animation-delay:1.1s}
@keyframes module-on{to{fill:var(--navy)}}
.analyzing-title{margin-bottom:20px;font-size:clamp(1.375rem,2.4vw,1.75rem);font-weight:700;letter-spacing:-.03em}
.wizard-analyzing ol{display:inline-grid;gap:12px;list-style:none;margin:0;padding:0;text-align:left}
.wizard-analyzing li{display:flex;align-items:center;gap:12px;font-weight:600}
.wizard-analyzing li::before{content:"";flex:0 0 16px;height:16px;background:var(--surface-blue-2);border-radius:50%;animation:mark-on .2s var(--ease) forwards}
.wizard-analyzing li:nth-child(1)::before{animation-delay:.15s}.wizard-analyzing li:nth-child(2)::before{animation-delay:.45s}.wizard-analyzing li:nth-child(3)::before{animation-delay:.75s}.wizard-analyzing li:nth-child(4)::before{animation-delay:1.05s}
@keyframes mark-on{to{background:var(--blue)}}

/* Report: readiness and delegation first, the division of work as the one large figure, the order of work, then detail folded away.
   Two colours carry meaning: blue for AI and automation, navy for people. */
.wizard-report{max-width:1160px;margin:0 auto}
.report-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 40px;margin-bottom:28px}
.report-head h2{font-size:clamp(1.75rem,3.2vw,2.75rem)}
.report-head h2:focus{outline:none}
.report-quote{max-width:760px;margin-top:10px;color:var(--body);font-size:1.0625rem}
.report-conditions{margin-top:10px;color:var(--muted);font-size:.9375rem;font-weight:500}
.report-tools{display:flex;flex-wrap:wrap;gap:4px 22px}
.tool-button{min-height:44px;padding:8px 2px;background:none;border:0;color:var(--body);font-size:.875rem;font-weight:600;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px}
.tool-button:hover{color:var(--blue-ink);text-decoration-color:currentColor}
.report-sheet{display:grid;gap:16px}
.report-top{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:16px}
.report-readiness,.report-delegation,.report-split,.report-phases,.report-more{min-width:0;padding:clamp(22px,2.6vw,36px);background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.report-sheet .mono{margin-bottom:14px}
.readiness-figure{display:flex;align-items:baseline;gap:6px;margin-bottom:14px}
.readiness-figure b{color:var(--blue-ink);font-size:clamp(3rem,5vw,4rem);line-height:1;font-weight:700;letter-spacing:-.05em}
.readiness-figure span{color:var(--muted);font-size:1.125rem;font-weight:600}
.readiness-meter{display:inline-grid;grid-template-columns:repeat(4,32px);gap:4px}
.readiness-meter i{height:8px;border-radius:4px;background:#cdd7e4}
.readiness-meter i.on{background:var(--blue)}
.report-readiness .readiness-meter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.report-readiness .readiness-meter i{height:10px}
.report-readiness strong,.report-delegation strong{display:block;margin-top:18px;font-size:1.25rem;font-weight:700}
.report-readiness p:last-child,.report-delegation p:last-child{margin-top:6px;color:var(--body);font-size:.9375rem;line-height:1.7}
.delegation-scale{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:0;padding:26px 0 0}
.delegation-scale::before{content:"";position:absolute;left:0;right:0;top:6px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--blue-soft),var(--navy))}
.delegation-scale li{position:relative;padding-right:8px;color:var(--muted);font-size:.8125rem;font-weight:600;line-height:1.45}
.delegation-scale li::before{content:"";position:absolute;left:0;top:-27px;width:15px;height:15px;border-radius:50%;background:#fff;border:2px solid var(--line-ui)}
.delegation-scale li[aria-current]{color:var(--ink);font-weight:700}
.delegation-scale li[aria-current]::before{background:var(--blue);border-color:#fff;box-shadow:0 0 0 2px var(--blue)}
.split-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px}
.split-count{display:flex;flex-direction:column;font-size:.875rem;font-weight:650}
.split-count b{font-size:clamp(2.5rem,4vw,3.5rem);line-height:1;font-weight:700;letter-spacing:-.05em}
.split-count.is-ai,.split-count.is-ai b{color:var(--blue-ink)}
.split-count.is-human{align-items:flex-end;text-align:right;color:var(--navy)}
.split-bar{display:flex;gap:4px;height:24px}
.split-bar i{flex:1;border-radius:4px}
.split-bar .is-ai{background:var(--blue)}
.split-bar .is-human{background:var(--navy)}
.split-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,64px);margin-top:28px}
.split-list{list-style:none;margin:0;padding:0}
.split-list li{position:relative;padding:12px 24px 12px 22px;border-top:1px solid var(--line);font-size:.9375rem;font-weight:550;line-height:1.5}
.split-list li::before{content:"";position:absolute;left:0;top:1.2em;width:8px;height:8px;border-radius:2px}
.split-list.is-ai li::before{background:var(--blue)}
.split-list.is-human li::before{background:var(--navy)}
.split-list li.is-added::after,.risk-list li.is-added::after,.block-list .is-added dt::after,.split-legend i::before{content:"+";color:var(--blue-ink);font-weight:700}
.split-list li.is-added::after,.risk-list li.is-added::after{position:absolute;right:0;top:12px}
.block-list .is-added dt::after{margin-left:6px}
.split-legend{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:14px;color:var(--muted);font-size:.8125rem}
.split-legend i{font-style:normal}
.phase-line{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);list-style:none;margin:0;padding:28px 0 0}
.phase-line::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--line-strong)}
.phase-line>li{position:relative;min-width:0}
.phase-line>li::before{content:"";position:absolute;left:0;top:-28px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--blue)}
.phase-index{color:var(--blue-ink);font-size:.8125rem;font-weight:700}
.phase-line strong{display:block;margin:2px 0 8px;font-size:1.125rem;font-weight:700}
.phase-line ul{margin:0;padding-left:16px;color:var(--body);font-size:.875rem;line-height:1.75}
.report-more summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;font-weight:700;cursor:pointer;list-style:none}
.report-more summary::-webkit-details-marker{display:none}
.report-more summary::after{content:"+";color:var(--blue-ink);font-size:1.375rem;font-weight:500}
.report-more[open] summary::after{content:"−"}
.more-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:20px}
.block-list{margin:0}
.block-list>div{padding:12px 0;border-top:1px solid var(--line)}
.block-list dt{font-weight:650}
.block-list dd{margin:2px 0 0;color:var(--muted);font-size:.875rem}
.risk-list{list-style:none;margin:0;padding:0}
.risk-list li{position:relative;padding:12px 24px 12px 20px;border-top:1px solid var(--line);font-size:.9375rem}
.risk-list li::before{content:"";position:absolute;left:0;top:1.25em;width:8px;height:8px;border-radius:50%;background:var(--danger)}
@keyframes sheet-register{from{transform:translateY(10px)}to{transform:none}}
.report-sheet.is-assembling>*{animation:sheet-register .5s var(--ease) both}
.report-sheet.is-assembling>:nth-child(2){animation-delay:.08s}.report-sheet.is-assembling>:nth-child(3){animation-delay:.16s}.report-sheet.is-assembling>:nth-child(4){animation-delay:.24s}
.report-sheet.is-assembling .split-bar i{animation:draw-x .5s var(--ease) both;transform-origin:left}
.report-related{margin-top:16px}
.report-related .mono{margin-bottom:8px}
.related-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.related-case{display:flex;flex-direction:column;gap:2px;min-height:44px;padding:14px 16px;background:#fff;border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow-card);text-decoration:none;transition:box-shadow .2s}
.related-case span{color:var(--muted);font-size:.75rem;font-weight:600}
.related-case strong{font-size:.9375rem;line-height:1.4;font-weight:650}
.related-case:hover{box-shadow:var(--shadow-hover)}
.report-next{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:16px;margin-top:40px}
.lead-panel{padding:clamp(24px,3vw,40px);background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-xl);box-shadow:var(--shadow-card)}
.consult-panel{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:clamp(24px,3vw,40px);background:var(--navy);border-radius:var(--radius-xl);color:var(--on-navy)}
.consult-panel .eyebrow{margin:0;color:var(--blue-on-navy)}
.consult-panel h3{font-size:clamp(1.5rem,2.2vw,1.875rem);line-height:1.35;font-weight:700;letter-spacing:-.035em}
.consult-panel p:not(.eyebrow){color:var(--on-navy-muted)}
.consult-panel :focus-visible{outline-color:var(--blue-on-navy)}
.consult-panel .consult-mail{margin-top:auto;font-size:.8125rem}
.consult-panel .consult-mail a{color:#fff;font-weight:600}
.diagnosis-static{max-width:1160px;margin:40px auto 0}
.static-note{margin-bottom:20px;color:var(--muted)}

/* ─── LEAD FORMS · project inquiry and report request share one field grammar ─── */
.lead-form h3{font-size:1.5rem;font-weight:700}
.lead-form-note{margin:6px 0 18px;color:var(--muted)}
.lead-form .contact-status{margin-bottom:24px}
.contact-status{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;background:var(--amber-soft);border-radius:var(--radius);color:#5c3a00;font-size:.875rem;line-height:1.7}
.contact-status::before{content:"";flex:0 0 8px;height:8px;margin-top:8px;border-radius:50%;background:var(--amber)}
.contact-status[data-state="ready"]{background:var(--blue-soft);color:#17314e}
.contact-status[data-state="ready"]::before{background:var(--blue)}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.form-row>*{min-width:0}
.field{position:relative;min-width:0;margin-bottom:20px}
.field>label,.field-label{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-bottom:8px;padding:0;font-size:.9375rem;font-weight:600}
.lead-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),.lead-form select,.lead-form textarea{display:block;width:100%;min-height:52px;margin:0;padding:12px 16px;background-color:#fff;border:1px solid var(--line-ui);border-radius:var(--radius);font-size:1rem;line-height:1.6;transition:border-color .2s,box-shadow .2s}
.lead-form input:hover,.lead-form select:hover,.lead-form textarea:hover{border-color:var(--body)}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(18,101,255,.14);outline:2px solid transparent}
.lead-form input:focus-visible,.lead-form select:focus-visible,.lead-form textarea:focus-visible{outline:3px solid var(--blue);outline-offset:1px}
.lead-form textarea{min-height:168px;resize:vertical}
.lead-form select{padding-right:44px;background-image:url('/assets/chevron.svg');background-repeat:no-repeat;background-position:right 16px center;background-size:14px;appearance:none;-webkit-appearance:none;cursor:pointer}
.lead-form ::placeholder{color:#6b7684}
.lead-form [aria-invalid=true]:not([type="checkbox"]){border-color:var(--danger);box-shadow:0 0 0 3px rgba(180,35,24,.12)}
.field-error{margin-top:8px;font-size:.8125rem;color:var(--danger)}
.field-error:empty{display:none}
/* Inquiry type: radio rows with the same grammar as the diagnosis options, not pills. */
.choice-group{min-width:0;margin:0 0 20px;padding:0;border:0}
.choice-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.choice-chip{position:relative;cursor:pointer}
.choice-chip input{position:absolute;opacity:0;width:1px;height:1px}
.choice-chip span{display:flex;align-items:center;gap:12px;min-height:48px;height:100%;padding:10px 14px;background:#fff;border:1px solid var(--line-ui);border-radius:var(--radius);font-size:.9375rem;font-weight:550}
.choice-chip span::before{content:"";flex:0 0 18px;height:18px;border:1.5px solid var(--line-ui);border-radius:50%;background:#fff}
.choice-chip:hover span{border-color:var(--blue)}
.choice-chip input:checked+span{border-color:var(--blue);background:var(--blue-soft);box-shadow:inset 0 0 0 1px var(--blue)}
.choice-chip input:checked+span::before{border:5px solid var(--blue)}
.choice-chip input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}
.consent{display:grid;gap:10px;margin:4px 0 20px;padding:18px 20px;background:var(--surface);border-radius:var(--radius)}
.check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:.9375rem;font-weight:550;line-height:1.5}
.check input{flex:0 0 auto;width:20px;height:20px;margin:1px 0 0;accent-color:var(--blue-ink)}
.check b{margin-left:4px;color:var(--blue-ink);font-size:.8125rem;font-weight:700}
.check b.is-optional{color:var(--muted);font-weight:500}
.consent-detail{margin-left:30px}
.consent-detail summary{min-height:32px;color:var(--muted);font-size:.8125rem;font-weight:600;cursor:pointer}
.consent-detail p{margin-top:4px;color:var(--muted);font-size:.8125rem;line-height:1.8}
.consent .field-error{margin:0 0 0 30px}
.lead-form [data-report-submit],#inquiry-form [data-submit]{width:100%;min-height:58px}
[data-form-feedback],[data-report-feedback]{margin-bottom:14px;font-size:.9375rem}
[data-form-feedback]:empty,[data-report-feedback]:empty{margin:0}
.form-caption{margin-top:12px;font-size:.8125rem;color:var(--muted);text-align:center}
.honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.context-chip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:20px;padding:8px 8px 8px 16px;background:var(--blue-soft);border-radius:var(--radius);font-size:.875rem}
.context-chip span{margin-right:auto;font-weight:550}
.context-chip button{min-height:44px;padding:8px 14px;background:#fff;border:1px solid var(--line-ui);border-radius:var(--radius-sm);font-size:.8125rem;font-weight:600}
.context-chip button:hover{border-color:var(--blue)}

/* ─── SERVICES ─── */
.services-intro{padding-bottom:clamp(40px,4vw,64px)}
/* Entry points: where the work starts, each with one Kunnworks case beside it. */
.entry-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);align-items:center;gap:clamp(40px,7vw,120px);padding-block:clamp(56px,6vw,96px)}
.entry-row.is-reversed .entry-copy{order:2}
.entry-label{display:flex;gap:10px;margin-bottom:18px;color:var(--muted);font-size:.8125rem;font-weight:650;letter-spacing:.04em}
.entry-label span{color:var(--blue-ink)}
.entry-row h2{margin-bottom:16px}
.entry-keywords{margin-top:20px;color:var(--navy);font-size:.9375rem;font-weight:650}
.entry-services{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 20px;margin-top:24px;font-size:.9375rem}
.entry-services span{color:var(--muted);font-size:.8125rem}
.entry-services a{display:inline-flex;align-items:baseline;gap:6px;min-height:44px;padding:10px 0;color:var(--ink);font-weight:650;text-decoration:underline;text-decoration-color:var(--line-ui);text-underline-offset:5px}
.entry-services a:hover{color:var(--blue-ink);text-decoration-color:currentColor}
.entry-services a span{color:var(--blue-ink)}
.entry-case{min-width:0;max-width:480px;justify-self:center;width:100%}
.entry-case-range{margin-top:4px;color:var(--muted);font-size:.8125rem}
/* Service map: the three services side by side, each capability with its one-line range. */
.service-map{background:var(--surface)}
.service-map-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.service-map-col{display:flex;flex-direction:column;gap:12px;min-width:0;padding-top:24px;border-top:2px solid var(--navy)}
.service-map-col h3{font-size:1.5rem;font-weight:700}
.service-map-col h3 a{display:inline-flex;align-items:baseline;gap:10px;text-decoration:none}
.service-map-col h3 a span{color:var(--blue-ink);font-size:1.125rem;transition:transform .2s var(--ease)}
.service-map-col h3 a:hover{color:var(--blue-ink)}
.service-map-col h3 a:hover span{transform:translate(2px,-2px)}
.service-map-summary{color:var(--body);font-size:.9375rem}
.service-map-caps{margin:8px 0 0}
.service-map-caps>div{padding:14px 0;border-top:1px solid var(--line)}
.service-map-caps dt{font-size:1rem;font-weight:700}
.service-map-caps dd{margin:4px 0 0;color:var(--muted);font-size:.875rem;line-height:1.6}
.standards-section{background:#fff}
.standards-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.standards-list li{display:flex;flex-direction:column;gap:12px;min-width:0;padding:28px 24px;background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.standard-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:6px;background:var(--blue-soft);border-radius:14px}
.standard-icon .ui-icon{width:26px;height:26px;stroke:var(--blue-ink);stroke-width:1.8}
.standards-list h3{font-size:1.1875rem}
.standards-list p{color:var(--body);font-size:.9375rem;line-height:1.7}
.standards-list small{margin-top:auto;color:var(--muted);font-size:.75rem;font-weight:600}

.service-intro .intro-media{max-width:560px;justify-self:end;width:100%}
.capability-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.capability-grid li{display:flex;flex-direction:column;gap:6px;padding:24px;background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.capability-grid strong{font-size:1.125rem;font-weight:700}
.capability-grid li>span{color:var(--muted);font-size:.875rem}
.service-situations{background:var(--surface)}
.situation-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.situation-list li{display:flex;flex-direction:column;gap:14px;padding:24px;background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);font-size:1.0625rem;font-weight:600;line-height:1.55;letter-spacing:-.02em}
.situation-list .ui-icon{width:32px;height:32px;padding:6px;background:var(--blue);border-radius:10px;stroke:#fff;stroke-width:2.6}
.scope-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.scope-steps li{position:relative;display:flex;flex-direction:column;gap:8px;padding:28px 24px;background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.scope-steps .step-number{align-self:flex-start;margin-bottom:6px}
.scope-steps p{color:var(--muted);font-size:.9375rem}
.judgment-panel{padding-bottom:0}
.judgment-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;gap:32px 72px;padding:clamp(36px,5vw,72px);background:var(--surface-blue);border-radius:var(--radius-xl)}
.judgment-card h2{font-size:clamp(1.75rem,2.8vw,2.625rem)}
.judgment-a p{margin-bottom:28px;color:var(--body);font-size:1.0625rem}
.judgment-a .button-light{box-shadow:var(--shadow-card)}
.related-anchor{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:end;gap:40px;padding:clamp(20px,2.4vw,32px)}
.related-copy h3{margin:12px 0 10px;font-size:1.75rem;font-weight:700}
.related-copy p{margin-bottom:8px;color:var(--muted)}

/* ─── WORK ─── */
.work-intro{padding-bottom:clamp(32px,3vw,48px)}
.work-featured{padding-top:0;padding-bottom:clamp(56px,5vw,88px)}
.work-delivered{padding-top:0}
/* Filters: underlined tabs. The current tab is marked by weight and an underline, not colour alone. */
/* Catalogue toolbar: one floating card that follows the list. Every filter row has the same label column and the same
   pill (36px, one type size); pills that wrap stay on their own track, and the result count sits at the top right. */
.catalogue-toolbar{position:sticky;top:calc(var(--header) + 12px);z-index:10;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px 24px;margin:0 0 32px;padding:14px 18px;background:rgba(255,255,255,.92);border-radius:22px;box-shadow:0 0 0 1px rgba(17,44,73,.07),0 1px 2px rgba(17,44,73,.04),0 20px 40px -30px rgba(17,44,73,.4);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
.filter-group{grid-column:1;display:grid;grid-template-columns:84px minmax(0,1fr);align-items:start;column-gap:8px;min-width:0}
.chip-label{display:flex;align-items:center;min-height:36px;color:var(--muted);font-size:.8125rem;font-weight:700}
.filter-track{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.filter-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 14px;background:#fff;border-radius:999px;box-shadow:0 0 0 1px rgba(17,44,73,.1);color:var(--body);font-size:.875rem;font-weight:600;line-height:1.4;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s,box-shadow .2s}
.filter-chip b{color:var(--muted);font-size:.75rem;font-weight:600;font-variant-numeric:tabular-nums}
.filter-chip:hover{box-shadow:0 0 0 1px rgba(17,44,73,.26);color:var(--ink)}
.filter-chip:focus-visible{border-radius:999px}
.filter-chip[aria-current]{background:var(--navy);box-shadow:0 0 0 1px var(--navy);color:#fff;font-weight:700}
.filter-chip[aria-current] b{color:var(--blue-on-navy)}
.filter-count{grid-column:2;grid-row:1;display:flex;align-items:center;min-height:36px;margin:0;color:var(--muted);font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.catalogue-more{display:flex;justify-content:center;margin-top:48px}
.empty-results{margin-top:8px;padding:56px clamp(24px,4vw,56px);background:#fff;border-radius:24px;box-shadow:0 0 0 1px rgba(17,44,73,.06),0 20px 40px -30px rgba(17,44,73,.35);text-align:center}
.empty-results h2{margin-bottom:12px;font-size:1.5rem}
.empty-results p{color:var(--muted)}

/* ─── CASE ─── Fact lists keep a rule between rows: they are data. */
.case-intro{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:end;column-gap:clamp(40px,7vw,120px);padding-top:clamp(40px,4vw,72px);padding-bottom:clamp(40px,4vw,64px)}
.case-intro h1{margin-top:14px;font-size:clamp(2.375rem,4.2vw,4rem)}
.case-intro .lead{max-width:760px;margin-top:20px}
.case-facts{display:grid;padding:4px 20px;background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.case-facts>div{display:flex;flex-direction:column;gap:2px;padding:14px 0;font-size:.9375rem}
.case-facts>div+div{border-top:1px solid var(--line)}
.case-facts>div>span{color:var(--muted);font-size:.8125rem}
.case-facts strong{font-weight:650}
.case-fact-links{display:flex;flex-wrap:wrap;gap:0 18px}
.case-fact-links .text-link{min-height:40px;padding:4px 0;font-size:.875rem}
.case-evidence{padding-top:0;padding-bottom:clamp(48px,5vw,88px)}
.plate-detail .plate-stage{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:32px;min-height:0;padding:0 0 32px}
.plate-detail .artifact{position:relative;inset:auto;width:100%}
.plate-detail .artifact-1{transform:translateY(32px)}
.case-mandate{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);align-items:center;gap:clamp(32px,5vw,80px);background:var(--surface)}
.case-mandate .lead{max-width:480px}
.case-section{display:grid;grid-template-columns:minmax(0,1fr);padding-block:clamp(48px,4.5vw,80px)}
.case-section+.case-section{border-top:1px solid var(--line)}
.case-text{max-width:820px}
.case-section h2{margin-bottom:18px;font-size:clamp(1.75rem,2.6vw,2.5rem)}
.case-section p{color:var(--body);font-size:1.0625rem;line-height:1.85}
.case-section-evidence{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:start}
.case-section-evidence .case-text{position:sticky;top:calc(var(--header) + 40px)}
.specimen-set{display:grid;gap:32px;min-width:0}
.deliverable-list{list-style:none;margin:0 0 16px;padding:0}
.deliverable-list li{position:relative;padding:12px 0 12px 28px;border-top:1px solid var(--line);font-size:1rem;font-weight:600}
.deliverable-list li::before{content:"";position:absolute;left:2px;top:1.05em;width:12px;height:7px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg)}
.case-section .note{font-size:.8125rem}
.case-section .actions{margin-top:28px}

/* ─── PORTFOLIO DETAIL ─── */
.project-intro{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:end;gap:32px clamp(40px,6vw,112px);padding-top:clamp(40px,4vw,72px);padding-bottom:clamp(40px,4vw,64px)}
.project-attribution{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;color:var(--muted);font-size:.8125rem}
.project-title h1{margin-top:16px;font-size:clamp(2.25rem,3.8vw,3.75rem)}
.project-title .lead{max-width:820px;margin-top:20px}
.project-facts{padding:4px 20px;background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.project-facts>div{padding:12px 0;font-size:.875rem;line-height:1.6}
.project-facts>div+div{border-top:1px solid var(--line)}
.project-facts dt{color:var(--muted);font-size:.8125rem}
.project-facts dd{margin-top:2px;font-weight:550;text-wrap:balance}
.project-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start;gap:clamp(32px,5vw,88px);padding-top:0}
.project-gallery{display:grid;gap:28px;min-width:0}
.plate-figure{min-width:0}
.plate-figure img{width:100%;border:1px solid var(--hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.plate-figure figcaption{margin-top:8px;color:var(--muted);font-size:.75rem;font-variant-numeric:tabular-nums}
.project-narrative{position:sticky;top:calc(var(--header) + 32px);display:grid;gap:26px;min-width:0}
.project-section h2{margin-bottom:10px;font-size:clamp(1.375rem,1.8vw,1.75rem);line-height:1.4}
.project-section.is-sub{padding-left:18px;border-left:3px solid var(--blue-soft)}
.project-section.is-sub h3{margin:2px 0 6px;font-size:1.125rem}
.project-group{color:var(--blue-ink);font-size:.75rem;font-weight:650;letter-spacing:.04em}
.project-section p:not(.project-group){color:var(--body);line-height:1.85}
.project-info{padding:20px 22px;background:var(--surface);border-radius:var(--radius)}
.project-info>.project-group{margin-bottom:8px}
.project-info ul{margin:0;padding-left:18px;font-size:.875rem;line-height:1.9}
.narrative-cta{display:grid;gap:16px;padding:22px 24px;background:var(--surface-blue);border-radius:var(--radius-lg)}
.narrative-cta p{color:var(--body);font-size:.9375rem}
.narrative-cta strong{display:block;margin-bottom:2px;color:var(--ink);font-size:1.0625rem}
.narrative-cta .button{min-height:48px;padding-inline:20px;font-size:.9375rem}
.project-next{background:var(--surface)}

/* ─── APPROACH ───
   Five principles as cards beside a sticky index. A card reads left to right: the principle and its question, then the
   condition and what we settle because of it. The index shows the principle being read on a rail: done ones filled navy,
   the current one blue, and the count at its head. The rail and its dots are the index's alone. */
.approach-intro{padding-bottom:clamp(24px,3vw,48px)}
.approach-body{display:grid;grid-template-columns:252px minmax(0,1fr);gap:0 clamp(28px,4vw,64px);padding-top:0}
.pov-index{position:sticky;top:calc(var(--header) + 24px);align-self:start;padding:18px 12px 12px;background:#fff;border-radius:22px;box-shadow:0 0 0 1px rgba(17,44,73,.06),0 1px 2px rgba(17,44,73,.04),0 20px 40px -30px rgba(17,44,73,.35)}
.pov-index-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 8px 10px;color:var(--muted);font-size:.75rem;font-weight:700;font-variant-numeric:tabular-nums}
.pov-index-head b{color:var(--blue-ink);font-size:.9375rem}
.pov-index ol{position:relative;display:grid;gap:2px;list-style:none;margin:0;padding:0}
.pov-index ol::before{content:"";position:absolute;left:17px;top:22px;bottom:22px;width:2px;background:var(--surface-blue-2);border-radius:2px}
.pov-index li{position:relative}
.pov-index a{display:grid;grid-template-columns:12px 22px minmax(0,1fr);align-items:center;column-gap:8px;min-height:44px;padding:9px 10px 9px 12px;border-radius:12px;color:var(--muted);font-size:.875rem;font-weight:600;line-height:1.45;text-decoration:none;transition:background-color .2s,color .2s}
.pov-index a::before{content:"";position:relative;width:12px;height:12px;background:#fff;border-radius:50%;box-shadow:inset 0 0 0 2px var(--surface-blue-2);transition:background-color .25s,box-shadow .25s}
.pov-index a>span:first-child{color:var(--muted);font-size:.75rem;font-weight:700;font-variant-numeric:tabular-nums}
.pov-index a:hover{background:var(--surface);color:var(--ink)}
.pov-index li[data-done] a::before{background:var(--navy);box-shadow:none}
.pov-index a[aria-current]{background:var(--surface-blue);color:var(--navy);font-weight:700}
.pov-index a[aria-current]::before{background:var(--blue);box-shadow:0 0 0 4px rgba(18,101,255,.18)}
.pov-index a[aria-current]>span:first-child{color:var(--blue-ink)}
.pov-list{display:grid;gap:clamp(16px,1.8vw,24px);min-width:0}
.pov-section{min-width:0;scroll-margin-top:calc(var(--header) + 24px)}
/* A principle card in two halves: the principle and its question on the left, and on the right one panel in two tones,
   the condition in grey above what we settle in blue. No rail or dots: those belong to the index beside it, where they mean
   progress. Labels are read at body size; the answer is the strongest text. */
.pov-card{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);grid-template-rows:1fr auto;gap:0 clamp(24px,3.6vw,56px);padding:clamp(24px,3vw,40px);background:#fff;border-radius:28px;box-shadow:0 0 0 1px rgba(17,44,73,.06),0 1px 2px rgba(17,44,73,.04),0 24px 48px -32px rgba(17,44,73,.38)}
.pov-head{grid-column:1;grid-row:1/span 2;display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding-top:4px}
.pov-number{margin:0 0 18px;background:linear-gradient(160deg,#1c62f2 10%,#9cc0ff 90%);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:clamp(2.75rem,3.8vw,3.75rem);font-weight:700;line-height:.9;letter-spacing:-.06em}
.pov-head h2{font-size:clamp(1.625rem,2.3vw,2.125rem);line-height:1.34;text-wrap:balance}
.pov-question{margin:14px 0 0;color:var(--body);font-size:1.0625rem;line-height:1.7;text-wrap:pretty}
.pov-answer{--pad-x:clamp(24px,2.6vw,34px);grid-column:2;grid-row:1;display:grid;grid-template-rows:auto 1fr;list-style:none;margin:0;padding:0;overflow:hidden;background:var(--surface);border-radius:20px}
.pov-answer li{position:relative;padding:clamp(22px,2.4vw,30px) var(--pad-x)}
/* The grey half points down into the answer: direction said by the shape, not by a rail. */
.pov-answer li:first-child{z-index:1}
.pov-answer li:first-child::after{content:"";position:absolute;left:var(--pad-x);bottom:-14px;width:32px;height:15px;background:var(--surface);clip-path:polygon(0 0,100% 0,50% 100%)}
/* The answer half carries the weight: a soft blue light and the site's dot texture, fading in from its far corner. */
.pov-answer li.is-result{isolation:isolate;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(28px,2.8vw,36px);background:linear-gradient(155deg,#edf3fe 0%,#e2ecfc 60%,#d8e6fb 100%)}
.pov-answer li.is-result::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(rgba(18,101,255,.28) 1px,transparent 1.5px) 0 0/16px 16px;-webkit-mask-image:radial-gradient(70% 120% at 100% 100%,#000,transparent 72%);mask-image:radial-gradient(70% 120% at 100% 100%,#000,transparent 72%);pointer-events:none}
.pov-label{margin:0 0 6px;color:var(--muted);font-size:.875rem;font-weight:700;line-height:1.5}
.is-result .pov-label{color:var(--blue-ink)}
.pov-answer p:not(.pov-label){color:var(--body);font-size:1.0625rem;line-height:1.75;text-wrap:pretty}
.pov-answer .is-result p:not(.pov-label){color:var(--ink);font-size:1.1875rem;font-weight:650;line-height:1.65;letter-spacing:-.02em}
.pov-follow{grid-column:2;grid-row:2;justify-self:end;margin:0;padding-top:18px}
/* Principle figure: the card's relation drawn in its own words. Grey and outlined nodes, one blue node where the principle
   lands, a slow dashed flow on the path into it. */
.pov-figure{width:100%;max-width:380px;margin:auto 0 0;padding-top:30px}
.pd{display:block;width:100%;height:auto;overflow:visible}
.pd text{dominant-baseline:central;text-anchor:middle;fill:var(--ink-2);font-size:14px;font-weight:650;letter-spacing:-.01em}
.pd .pd-start{text-anchor:start}
.pd .pd-cap{fill:var(--muted);font-size:12px;font-weight:700}
.pd .pd-cap.is-blue{fill:var(--blue-ink)}
.pd .pd-title{fill:var(--navy);font-size:14px;font-weight:700}
.pd-tag text{font-size:12.5px}
.pd-line rect{fill:#fff;stroke:rgba(17,44,73,.2);stroke-width:1.2}
.pd-soft rect{fill:#eaf0f7}
.pd-navy rect{fill:var(--navy)}
.pd-accent rect{filter:drop-shadow(0 6px 10px rgba(18,101,255,.3))}
.pd-accent text,.pd-navy text{fill:#fff}
.pd-bar{fill:#dce5f0}
.pd-bar.is-off{fill:none;stroke:#c3cdd9;stroke-width:1.2;stroke-dasharray:3 3}
.pd-region{fill:rgba(234,240,247,.6);stroke:#b4c1d1;stroke-width:1.2;stroke-dasharray:4 5}
.pd-divide{stroke:#b4c1d1;stroke-width:1.5;stroke-dasharray:4 5}
.pd-link{fill:none;stroke:#b4c1d1;stroke-width:1.5}
.pd-link.is-off{stroke-dasharray:2 3}
.pd-link.is-key{stroke:var(--blue);stroke-width:2}
.pd-link.is-flow{stroke:var(--blue-mid);stroke-width:1.75;stroke-dasharray:4 5;animation:pd-flow 1.8s linear infinite}
.pd-dot{fill:var(--navy)}
.pd-dot.is-soft{fill:#b4c1d1}
.pd marker path{fill:var(--blue)}
@keyframes pd-flow{to{stroke-dashoffset:-18}}

/* Conditions: three tiles side by side. On white, the example and its condition; beneath it, on a quiet stage aligned
   across the three, the work flow after the change: steps already there as plain grey lines on a thin line, the steps
   the condition adds as blue blocks set into it. Every step is marked with the symbol's module; the key names the two. */
.shift-note{margin:16px 0 0;color:var(--muted);font-size:.875rem}
.shift-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,24px);list-style:none;margin:0;padding:0}
.shift{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:#fff;border-radius:24px;box-shadow:0 0 0 1px rgba(17,44,73,.06),0 1px 2px rgba(17,44,73,.05),0 20px 40px -28px rgba(17,44,73,.35)}
.shift-condition{padding:clamp(24px,2.4vw,32px) clamp(24px,2.4vw,32px) clamp(24px,2.6vw,34px)}
.shift-scenario{display:flex;gap:8px;margin-bottom:12px;color:var(--muted);font-size:.875rem;font-weight:500;line-height:1.5}
.shift-scenario span{flex:none;color:var(--blue-ink);font-weight:700}
.shift-scenario span::after{content:"·";margin-left:8px;color:var(--line-ui);font-weight:500}
.shift h3{font-size:clamp(1.25rem,1.6vw,1.5rem);line-height:1.42;font-weight:700;letter-spacing:-.03em;text-wrap:balance}
.shift-structure{margin-top:auto;padding:clamp(22px,2.2vw,28px) clamp(24px,2.4vw,32px) clamp(24px,2.4vw,30px);background:var(--surface)}
.flow-key{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 14px;color:var(--muted);font-size:.8125rem;font-weight:700}
.flow-key span{display:inline-flex;align-items:center;gap:7px}
.flow-key span::before{content:"";width:20px;height:9px;background:#c5d0de;clip-path:polygon(0 0,calc(100% - 4px) 0,100% 4px,100% 100%,0 100%)}
.flow-key .is-added{color:var(--blue-ink)}
.flow-key .is-added::before{background:var(--blue)}
.shift-flow{position:relative;display:grid;gap:4px;list-style:none;margin:0;padding:0}
.shift-flow::before{content:"";position:absolute;left:22px;top:18px;bottom:18px;width:2px;background:#d6dee9}
.shift-flow li{position:relative;display:flex;align-items:center;gap:12px;min-height:38px;padding:7px 12px 7px 10px;color:var(--muted);font-size:.9375rem;font-weight:600;line-height:1.4}
.shift-flow li::before{content:"";flex:0 0 26px;height:12px;background:#c5d0de;clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,0 100%)}
.shift-flow li.is-added{background:#e3ecfd;border-radius:10px;color:var(--navy);font-size:1rem;font-weight:700;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
.shift-flow li.is-added::before{background:var(--blue)}
.shift-closing{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:clamp(16px,1.8vw,24px);padding:20px 24px;background:#fff;border-radius:20px;box-shadow:0 0 0 1px rgba(17,44,73,.06),0 20px 40px -28px rgba(17,44,73,.35)}
.shift-closing p{font-size:1.125rem;font-weight:650}

/* ─── ABOUT · the people, what the team built, what stays after delivery, the brand story ───
   People: one white card per leader, portrait beside the profile (the portrait no longer outweighs the person), four
   areas as pills, and the record one tap away across the card's foot. */
.about-people{padding-top:clamp(24px,3vw,48px)}
.leader-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.8vw,24px);align-items:stretch}
.leader-card{display:flex;flex-direction:column;min-width:0;padding:clamp(16px,1.6vw,22px);background:#fff;border-radius:28px;box-shadow:0 0 0 1px rgba(17,44,73,.06),0 1px 2px rgba(17,44,73,.04),0 24px 48px -32px rgba(17,44,73,.38);scroll-margin-top:calc(var(--header) + 24px)}
.leader-main{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1fr);align-items:start;gap:clamp(18px,2vw,28px)}
.leader-card .portrait{border:0;border-radius:20px;box-shadow:inset 0 0 0 1px rgba(17,44,73,.06)}
.leader-meta{min-width:0;padding:6px 4px 0 0}
.leader-role{margin:0;color:var(--blue-ink);font-size:.75rem;font-weight:700;letter-spacing:.12em}
.leader-meta h3{margin:6px 0 8px;font-size:clamp(1.625rem,2.2vw,2rem);font-weight:700;letter-spacing:-.035em}
.leader-title{margin:0;font-size:1.0625rem;font-weight:700;line-height:1.5;letter-spacing:-.02em;text-wrap:balance}
.leader-summary{margin:10px 0 0;color:var(--body);font-size:.9375rem;line-height:1.7}
.leader-focus{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:16px 0 0;padding:0}
.leader-main{margin-bottom:18px}
/* Closed, the pair ends on one line; while one record is open the other keeps its own height. */
.leader-pair:has(.leader-more[open]){align-items:start}
.leader-focus li{padding:4px 11px;background:var(--surface-blue);border-radius:999px;color:var(--navy);font-size:.8125rem;font-weight:650;letter-spacing:-.01em}
/* The record folds away across the card's foot: the profile is above, the detail is one tap. */
.leader-more{margin:auto 0 0;padding:0 6px;border-top:1px solid var(--line)}
.leader-more summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;cursor:pointer;font-size:.9375rem;font-weight:650;list-style:none}
.leader-more summary::-webkit-details-marker{display:none}
.leader-more summary::after{content:"+";display:grid;place-items:center;width:30px;height:30px;background:var(--surface-blue);border-radius:50%;color:var(--navy);font-size:1.125rem;font-weight:500;transition:background-color .2s,color .2s}
.leader-more summary:hover::after{background:var(--blue);color:#fff}
.leader-more[open] summary::after{content:"−"}
.leader-more-body{padding:4px 0 10px}
.leader-career p{margin:0;color:var(--body);font-size:.9375rem;line-height:1.75}
.leader-career p+p{margin-top:10px}
.leader-block{margin-top:22px}
.leader-block>p:not(.mono){margin-top:6px;color:var(--body);font-size:.9375rem}
.leader-expertise{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:8px 0 0;padding:0}
.leader-expertise li{padding:4px 11px;background:var(--surface);border-radius:999px;color:var(--body);font-size:.8125rem;font-weight:600}
.built-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.built-card{display:flex;flex-direction:column;gap:4px;min-width:0;text-decoration:none}
.built-media{overflow:hidden;aspect-ratio:4/3;margin-bottom:14px;border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.built-media img{--v:75;width:100%;height:100%;object-fit:cover;object-position:50% var(--fy,80%);transition:transform .7s var(--ease)}
.built-card:hover img{transform:scale(1.035)}
.built-label{color:var(--blue-ink);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.built-card h3{font-size:1.25rem;font-weight:700;text-wrap:balance}
.built-card:hover h3{color:var(--blue-ink)}
.built-meta{color:var(--muted);font-size:.875rem}
/* After delivery: three commitments in one card, each with its icon tile, and the way to the full working method. */
.about-after{padding-top:0}
.after-card{padding:clamp(22px,2.6vw,36px);background:#fff;border-radius:28px;box-shadow:0 0 0 1px rgba(17,44,73,.06),0 1px 2px rgba(17,44,73,.04),0 24px 48px -32px rgba(17,44,73,.38)}
.after-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px);list-style:none;margin:0;padding:0}
.after-list li{display:grid;align-content:start;gap:8px}
.after-icon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:6px;background:var(--blue-soft);border-radius:13px}
.after-icon .ui-icon{width:22px;height:22px;stroke:var(--blue-ink);stroke-width:1.8}
.after-list strong{font-size:1.125rem;font-weight:700;letter-spacing:-.02em}
.after-list li>span:last-child{color:var(--body);font-size:.9375rem;line-height:1.7}
.after-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;margin:clamp(22px,2.6vw,32px) 0 0;padding:14px 18px;background:var(--surface);border-radius:16px;color:var(--muted);font-size:.9375rem}
/* Grounded Technology: a sticky drawing that follows the paragraph being read. ☷ → southwest cut → gaps as interface → at rest on the ground.
   A light rises on the southwest horizon, the pieces float above it and settle onto it in the last stage. White on navy, as the rest of the site.
   Without script the settled symbol is shown; with reduced motion the stages switch without transition. Text never fades. */
.brand-story{--bs-mark:#fff;position:relative;overflow-x:clip;background:linear-gradient(180deg,var(--navy) 0%,var(--navy) 55%,#0b1f35 100%);color:var(--on-navy)}
.brand-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,120px);max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.brand-visual{position:sticky;top:var(--header);align-self:start;display:grid;place-items:center;height:calc(100svh - var(--header))}
/* Light from the southwest: the direction the name comes from. Decorative, behind the drawing. */
.brand-visual::before{content:"";position:absolute;inset:0 -20% 0 -60%;background:radial-gradient(ellipse 34% 14% at 36% 70%,rgba(255,255,255,.2),rgba(255,255,255,.06) 45%,transparent 75%),radial-gradient(ellipse 50% 42% at 30% 76%,rgba(255,255,255,.045),transparent 70%);opacity:.4;pointer-events:none;transition:opacity 1.2s var(--ease)}
.brand-annotation{position:absolute;left:0;top:22%;writing-mode:vertical-rl;white-space:nowrap;color:rgba(244,247,251,.55);font-size:.6875rem;font-weight:600;letter-spacing:.18em}
.brand-sequence{position:relative;width:100%;max-width:520px;height:auto;overflow:visible}
.brand-steps{padding-block:clamp(80px,14vh,160px)}
.brand-steps>.eyebrow{color:var(--blue-on-navy)}
.brand-step{display:flex;flex-direction:column;justify-content:center;min-height:70svh}
.brand-index{margin-bottom:14px;color:var(--blue-on-navy);font-size:.8125rem;font-weight:700;letter-spacing:.16em}
.brand-step h3{color:#fff;font-size:clamp(1.75rem,3vw,2.75rem);font-weight:700;line-height:1.3;letter-spacing:-.04em}
.brand-step p:not(.brand-index){max-width:480px;margin-top:16px;color:var(--on-navy-muted);font-size:1.0625rem;line-height:1.8}
.brand-statement h2{color:#fff;font-size:clamp(2.25rem,4.4vw,4rem);line-height:1.2}
.brand-statement p:not(.brand-index){color:#d7e0ea}
.bs-plain,.bs-cut{fill:var(--bs-mark);transition:opacity .6s var(--ease)}
.bs-plain{opacity:0}
.bs-body{transition:transform 1.2s var(--ease)}
.bs-gaps{transition:opacity .6s var(--ease)}
.bs-gaps path{fill:none;stroke:var(--blue-on-navy);stroke-width:3;stroke-dasharray:4 8;stroke-linecap:round}
.bs-gaps circle{fill:var(--blue-on-navy)}
.bs-ground path{fill:none;stroke:url(#bs-fade);stroke-linecap:round}
.bs-horizon{stroke-width:3;opacity:.85;transition:opacity 1.2s var(--ease)}
.bs-stratum{stroke-width:1.5}
.bs-stratum-0{opacity:.4}.bs-stratum-1{opacity:.24}.bs-stratum-2{opacity:.12}
.bs-bearing{opacity:0;transition:opacity .8s var(--ease)}
.bs-bearing path{fill:none;stroke:rgba(244,247,251,.7);stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round}
.bs-bearing circle{fill:var(--bs-mark)}
.bs-bearing text{fill:rgba(244,247,251,.8);font-size:17px;font-weight:600;letter-spacing:.12em}
[data-stage="1"] .bs-plain{opacity:1}
[data-stage="1"] .bs-cut{opacity:0}
[data-stage="1"] .bs-gaps,[data-stage="2"] .bs-gaps{opacity:0}
[data-stage="3"] .bs-gaps path,[data-stage="4"] .bs-gaps path{animation:gap-flow 1.6s linear infinite}
/* The pieces float until the statement, then come to rest on the ground; the light is strongest at the southwest stage. */
[data-stage="1"] .bs-body{transform:translateY(-44px)}
[data-stage="2"] .bs-body{transform:translateY(-30px)}
[data-stage="3"] .bs-body{transform:translateY(-16px)}
[data-stage="1"] .bs-horizon,[data-stage="2"] .bs-horizon,[data-stage="3"] .bs-horizon{opacity:.4}
[data-stage="2"] .bs-bearing{opacity:1}
[data-stage="2"] .brand-visual::before{opacity:1}
[data-stage="3"] .brand-visual::before{opacity:.65}
[data-stage="4"] .brand-visual::before{opacity:.9}
@keyframes gap-flow{to{stroke-dashoffset:-24}}

/* ─── CONTACT ─── */
.contact-intro{padding-bottom:clamp(32px,3vw,56px)}
.contact-layout{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);align-items:start;gap:clamp(40px,6vw,96px);padding-top:0}
.contact-layout aside{position:sticky;top:calc(var(--header) + 32px)}
.contact-layout aside h2{margin-bottom:18px;font-size:clamp(1.375rem,1.8vw,1.75rem)}
.intake-sequence{display:grid;gap:8px;list-style:none;margin:0;padding:0}
.intake-sequence li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:10px;padding:12px 14px;background:var(--surface);border-radius:var(--radius)}
.intake-sequence .step-number{grid-row:1/3}
.intake-sequence strong{font-size:.9375rem;font-weight:650}
.intake-sequence small{color:var(--muted);font-size:.8125rem}
.direct-contact{margin-top:20px;padding:20px 22px;background:var(--navy);border-radius:var(--radius-lg);color:#fff}
.direct-contact .mono{color:var(--blue-on-navy)}
.direct-contact a{display:inline-flex;align-items:center;min-height:44px;color:#fff;font-size:1.25rem;font-weight:650}
.direct-contact :focus-visible{outline-color:var(--blue-on-navy)}
.diagnosis-return{margin-top:14px;color:var(--muted);font-size:.875rem}
.intake-sheet{position:relative;min-width:0;padding:clamp(24px,3vw,44px);background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-xl);box-shadow:var(--shadow-card)}
.intake-sheet .contact-status{margin-bottom:28px}
.intake-group{min-width:0;margin:0 0 8px;padding:0;border:0}
.intake-group+.intake-group{padding-top:24px;border-top:1px solid var(--line)}
.intake-group>legend{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;float:left;width:100%;padding:0 0 20px;font-size:1.125rem;font-weight:700}
.intake-group>legend+*{clear:both}
.group-meta{margin-left:auto;color:var(--muted);font-size:.8125rem;font-weight:500}
.submit-block{margin-top:8px}

/* ─── Utility routes ─── */
.legal-copy{min-height:320px;padding-top:0}
.legal-copy h2{margin-bottom:16px;font-size:1.75rem}
.legal-copy>p{max-width:760px;color:var(--body)}
.legal-copy>.text-link{margin-top:24px}
.sitemap-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:0}
.sitemap-list a{justify-content:space-between;min-height:60px;padding:14px 18px;background:#fff;border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow-card)}

/* ─── Shared surface language (every page, 2026-09-30) ───
   The Home vocabulary carried across the site: tinted bands carry the dot grid, content sits on white cards with a
   faint ring and soft shadow instead of hairline rules, navy panels carry glow and dot texture, small labels are pills,
   and the flows use ports and a pulse. */
.service-map,.service-situations,.shift-section,.case-mandate,.project-next,.diagnosis-section{background:radial-gradient(rgba(17,44,73,.07) 1px,transparent 1.4px) 0 0/22px 22px,linear-gradient(180deg,#f7f9fc,#eef3f9)}
:is(.standards-list li,.capability-grid li,.situation-list li,.scope-steps li,.wizard-promise li,.sitemap-list a,.case-facts,.project-facts,.intake-sheet){border:0;border-radius:20px;box-shadow:0 0 0 1px rgba(17,44,73,.06),0 1px 2px rgba(17,44,73,.05),0 20px 40px -28px rgba(17,44,73,.35)}
.intake-sheet{border-radius:26px}
.sitemap-list a{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.sitemap-list a:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(17,44,73,.08),0 24px 40px -26px rgba(17,44,73,.45)}
/* Navy panels: the flagship's glow and the finale's dot texture. */
:is(.folio-card,.lineage,.judgment-card){position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(60% 90% at 100% 0%,rgba(91,141,239,.32),transparent 65%),radial-gradient(40% 60% at 0% 100%,rgba(91,141,239,.14),transparent 70%),var(--navy);color:var(--on-navy)}
:is(.folio-card,.lineage,.judgment-card)::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.4px) 0 0/22px 22px;-webkit-mask-image:radial-gradient(70% 90% at 82% 25%,#000,transparent 75%);mask-image:radial-gradient(70% 90% at 82% 25%,#000,transparent 75%);pointer-events:none}
.judgment-card :focus-visible{outline-color:var(--blue-on-navy)}
.judgment-card .eyebrow{color:var(--blue-on-navy)}
.judgment-card h2{color:#fff}
.judgment-card .judgment-a p{color:var(--on-navy-muted)}
/* Media and case cards: the picture inset in a white card, as on Home. */
.media-card a{padding:10px;background:#fff;border-radius:28px;box-shadow:0 0 0 1px rgba(17,44,73,.06),0 1px 2px rgba(17,44,73,.05),0 28px 56px -34px rgba(17,44,73,.4);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.media-card img{border-radius:20px;box-shadow:none}
.media-card figcaption{margin:12px 8px 6px}
.media-card a:hover{transform:translateY(-4px)}
.built-card{padding:8px;background:#fff;border-radius:24px;box-shadow:0 0 0 1px rgba(17,44,73,.06),0 1px 2px rgba(17,44,73,.05),0 22px 44px -30px rgba(17,44,73,.38);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.built-media{border-radius:18px;box-shadow:none}
.built-card{gap:4px}
.built-card>:not(.built-media){margin-inline:10px}
.built-card>:last-child{margin-bottom:10px}
.built-card:hover{transform:translateY(-5px);box-shadow:0 0 0 1px rgba(17,44,73,.06),0 2px 4px rgba(17,44,73,.06),0 36px 64px -34px rgba(17,44,73,.5)}
/* Services index: keywords and related services as pills; the service map as three white cards on the band. */
.entry-keywords{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:20px 0 0;padding:0}
.entry-keywords li{padding:4px 11px;background:var(--surface-blue);border-radius:999px;color:var(--navy);font-size:.8125rem;font-weight:650}
.entry-services{align-items:center;gap:8px}
.entry-services>span{margin-right:4px}
.entry-services a{align-items:center;min-height:40px;padding:8px 14px;background:#fff;border-radius:999px;box-shadow:0 0 0 1px rgba(17,44,73,.12);text-decoration:none;transition:background-color .2s,box-shadow .2s}
.entry-services a:hover{background:var(--blue-soft);box-shadow:0 0 0 1px rgba(15,90,230,.28)}
.service-map-col{padding:28px 26px 22px;background:#fff;border-top:0;border-radius:24px;box-shadow:0 0 0 1px rgba(17,44,73,.06),0 1px 2px rgba(17,44,73,.05),0 24px 48px -30px rgba(17,44,73,.35)}
.service-map-caps>div{margin-top:6px;padding:12px 14px;background:var(--surface);border-top:0;border-radius:12px}
/* Case page: sections separated by space; the deliverables as check cards. */
.case-section+.case-section{border-top:0}
.deliverable-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.deliverable-list li{display:flex;align-items:center;min-height:58px;padding:14px 18px 14px 52px;background:#fff;border-top:0;border-radius:16px;box-shadow:0 0 0 1px rgba(17,44,73,.06),0 16px 32px -24px rgba(17,44,73,.35)}
.deliverable-list li::before{left:18px;top:50%;width:22px;height:22px;margin-top:-11px;border:0;border-radius:50%;background:var(--blue);transform:none}
.deliverable-list li::after{content:"";position:absolute;left:25px;top:50%;width:8px;height:5px;margin-top:-4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
/* Contact: the not-yet-connected notice in slate, not amber. */
.contact-status{background:#eef1f5;color:var(--body)}
.contact-status::before{background:var(--line-ui)}
.intake-sequence li{background:#fff;box-shadow:0 0 0 1px rgba(17,44,73,.06),0 12px 26px -20px rgba(17,44,73,.35)}
.narrative-cta{background:radial-gradient(rgba(17,44,73,.07) 1px,transparent 1.4px) 0 0/20px 20px,var(--surface-blue);border-radius:20px}

/* ─── Print: the diagnosis report stands alone on paper ─── */
@media print{
  .diagnosis-section{min-height:0;padding:0;background:#fff}
  .wizard-intro,.wizard,.wizard-analyzing,.report-tools,.report-next,.diagnosis-static{display:none!important}
  .wizard-report{max-width:none}
  .report-readiness,.report-delegation,.report-split,.report-phases,.report-more{box-shadow:none;border:1px solid #c8d0db;break-inside:avoid}
  .report-more summary::after{content:none}
}

/* ─── Responsive recomposition ─── */
@media(max-width:1100px){
  .shift-list{grid-template-columns:minmax(0,1fr)}
  .hero{grid-template-columns:minmax(0,1fr);min-height:0;padding-top:72px}
  .hero-copy{text-align:center}.hero-links{justify-content:center}
  .hero-stage{height:clamp(420px,62vw,560px);margin-inline:auto;max-width:820px}
  .flagship{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "stage" "tabs" "actions";grid-template-rows:none}
  .flagship-stage{margin-top:36px}
  .feature-tabs{margin-top:20px}
  .field-cards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(232px,1fr);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);margin-inline:calc(var(--gutter) * -1);padding:10px var(--gutter) 14px}
  .field-cards>li{scroll-snap-align:start}
  .home-head{flex-direction:column;align-items:flex-start}
  .home-finale .finale-panel{grid-template-columns:minmax(0,1fr)}
  .folio-card{grid-template-columns:minmax(0,1fr);row-gap:0}
  .folio-copy{display:contents}
  .folio-copy>*{justify-self:start}
  .folio-stage{order:1;margin-top:32px}
  .folio-copy>.button{order:2;margin-top:28px}
  .breadth-grid,.built-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .built-grid>:nth-child(3){display:none}
  .wizard-promise{grid-template-columns:minmax(0,1fr)}
  .wizard-intro{grid-template-columns:minmax(0,1fr)}
  .intro-teaser{display:none}
  .report-next{grid-template-columns:minmax(0,1fr)}
  .entry-row{grid-template-columns:minmax(0,1fr)}
  .entry-row.is-reversed .entry-copy{order:0}
  .entry-case{justify-self:start;max-width:420px}
  .service-map-grid{grid-template-columns:minmax(0,1fr)}
  .service-intro .intro-media{justify-self:start}
  .standards-list,.scope-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .capability-grid,.situation-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .judgment-card{grid-template-columns:minmax(0,1fr)}
  .related-anchor{grid-template-columns:minmax(0,1fr)}
  .catalogue-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .breadth-grid,.catalogue-grid{gap:16px}
  .case-intro,.project-intro{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .case-mandate{grid-template-columns:minmax(0,1fr)}
  .case-section-evidence{grid-template-columns:minmax(0,1fr)}
  .case-section-evidence .case-text,.project-narrative{position:static}
  .project-body{grid-template-columns:minmax(0,1fr)}
  .approach-body{grid-template-columns:minmax(0,1fr)}
  .pov-index{top:var(--header);z-index:12;margin:0 calc(var(--gutter) * -1) 20px;padding:10px 0;background:rgba(255,255,255,.92);border-radius:0;box-shadow:0 1px 0 rgba(17,44,73,.08);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
  .pov-index-head{display:none}
  .pov-index ol{display:flex;gap:6px;overflow-x:auto;padding:0 var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .pov-index ol::-webkit-scrollbar{display:none}
  .pov-index ol::before{content:none}
  .pov-index li{flex:0 0 auto}
  .pov-index a{grid-template-columns:auto auto;column-gap:6px;min-height:40px;padding:8px 14px;background:#fff;border-radius:999px;box-shadow:0 0 0 1px rgba(17,44,73,.1);white-space:nowrap}
  .pov-index a::before{content:none}
  .pov-index a[aria-current]{background:var(--navy);box-shadow:none;color:#fff}
  .pov-index a[aria-current]>span:first-child{color:var(--blue-on-navy)}
  .contact-layout{grid-template-columns:minmax(0,1fr)}
  .contact-layout aside{position:static}
  .sitemap-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .lineage{grid-template-columns:minmax(0,1fr)}
  .lineage-axis,.lineage-list li{grid-template-columns:minmax(0,1fr);row-gap:12px}
  .lineage-axis>span:first-child{display:none}
  .lineage-list li{padding:18px 0}
  .leader-pair{grid-template-columns:minmax(0,1fr);gap:16px}
  .leader-main{grid-template-columns:minmax(0,260px) minmax(0,1fr)}
  .brand-inner{grid-template-columns:minmax(0,1fr);gap:0}
  .brand-story{overflow:clip;background:var(--navy)}
  .brand-visual{z-index:1;height:34svh;padding:16px 0;background:var(--navy)}
  .brand-annotation{display:none}
  .brand-sequence{max-width:240px}
  .brand-steps{padding-block:24px 72px}
  .brand-step{min-height:56svh}
}
@media(max-width:800px){
  .hero{padding-top:56px;padding-bottom:48px}
  .hero h1{font-size:clamp(2.25rem,9.6vw,3.25rem)}
  .hero-lead{font-size:1.0625rem}
  .hero-links{flex-direction:column;align-items:stretch}
  .hero-stage{height:clamp(330px,92vw,440px);margin-top:12px}
  .hero-visual>.frame-note{position:static;display:block;margin-top:8px}
  .hero-plane{transform:rotateX(8deg) rotateY(-14deg) rotateZ(2deg);animation:none}
  .ui-card{width:58%;padding:13px;border-radius:16px;font-size:.625rem}
  .ui-request{left:-2%;top:0}.ui-ai{left:22%;top:18%}.ui-human{left:42%;top:40%}
  .ui-body,.ui-file{display:none}
  .ui-checks li:nth-child(n+4),.ui-review li:nth-child(n+3){display:none}
  .lanes{--g:6px;padding:14px;border-radius:20px}
  .deliverable-list{grid-template-columns:minmax(0,1fr)}
  .lane-label{display:flex;align-items:center;gap:10px}
  .lane-track li.is-run{align-items:stretch}
  .run-steps{align-items:stretch}
  .run-steps>span{flex-direction:column;justify-content:flex-end;gap:8px;padding:0 4px;text-align:center}
  .run-steps>span+span::before{display:none}
  .lanes-stat{flex-direction:column;align-items:stretch;text-align:center}
  .stat-note{justify-content:center}
  .quick-canvas{padding:14px;border-radius:20px}
  .quick-field{gap:10px;padding:10px 12px 10px 10px;border-radius:14px}
  .quick-field-icon{flex-basis:36px;height:36px;border-radius:10px}
  .quick-field-hint{display:none}
  .quick-starts{margin-top:14px}
  .quick-samples{flex-wrap:nowrap;overflow-x:auto;margin-inline:-14px;padding:2px 14px 6px;scrollbar-width:none}
  .quick-samples button{flex:0 0 auto}
  .quick-result{margin-top:28px;padding-inline:4px}
  .quick-flow{--link:32px;grid-template-columns:minmax(0,1fr);row-gap:var(--link)}
  .flow-lane.is-input li::after,.flow-lane.is-human li::before,.flow-lane.is-input li::before,.flow-lane.is-human li::after{display:none}
  .flow-lane.is-input,.flow-lane.is-human{position:relative}
  .flow-lane.is-input::after,.flow-lane.is-human::before{content:"";position:absolute;left:50%;width:2px;height:var(--link);margin-left:-1px;background:linear-gradient(180deg,transparent 0 38%,var(--blue) 50%,transparent 62% 100%) 0 100%/100% 300% no-repeat,rgba(18,101,255,.24);animation:flow-pulse-y 2.7s linear infinite}
  .flow-lane.is-input::after{top:100%}
  .flow-lane.is-human::before{bottom:100%;animation-delay:-1.35s}
  .flow-nodes li{min-height:52px;font-size:.90625rem}
  .flow-lane.is-ai{padding:16px 16px 18px;border-radius:18px}
  .quick-scope ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .quick-scope li{padding:16px 14px}
  .quick-next-row{flex-direction:column;align-items:stretch}
  .quick-ask{text-align:center}
  .flagship-intro h2{font-size:clamp(1.75rem,7.4vw,2.25rem)}
  .stage-screen{aspect-ratio:3/2;border-radius:18px}
  .stage-shot{padding:14px}
  .feature-tab{grid-template-columns:28px minmax(0,1fr);padding:11px 12px 12px 10px}
  .feature-progress{left:38px;right:12px}
  .case-shelf-head{flex-direction:column;align-items:flex-start}
  .service-cards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(272px,82%);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);margin-inline:calc(var(--gutter) * -1);padding:10px var(--gutter) 18px}
  .service-cards>li{scroll-snap-align:start}
  .service-card h3{font-size:1.3125rem}
  .finale-people{margin-bottom:22px}
  .lanes-steps{grid-template-columns:repeat(4,minmax(0,1fr));font-size:.6875rem;text-align:center}
  .lanes-steps>span:first-child{display:none}
  .lane{grid-template-columns:minmax(0,1fr);row-gap:8px;margin-top:18px}
  .lane-track li{flex-direction:column;justify-content:center;gap:8px;min-height:96px;padding:12px 6px;text-align:center;font-size:.8125rem}
  .lane-glyph{flex-basis:auto;width:34px;height:34px}
  .lanes.is-ready .lane-token{top:-5px}
  .preview-split{grid-template-columns:minmax(0,1fr)}
  .row-head{align-items:flex-start;flex-direction:column}
  .breadth-grid,.built-grid{grid-template-columns:minmax(0,1fr)}
  .built-grid>:nth-child(3){display:block}
  .wizard{padding:22px 18px}
  .wizard-name{display:none}
  .option-grid-scenario,.option-grid-2,.option-grid-3{grid-template-columns:minmax(0,1fr)}
  .option-body{padding:16px}
  .wizard-nav .button{padding-inline:18px}
  .report-top,.split-cols,.phase-line,.more-cols,.related-cases{grid-template-columns:minmax(0,1fr)}
  .split-head{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .split-bar{grid-column:1/-1;grid-row:2}
  .phase-line{padding:0 0 0 28px;gap:20px}
  .phase-line::before{left:7px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .phase-line>li::before{left:-28px;top:2px}
  .report-head{align-items:flex-start}
  .standards-list,.scope-steps,.capability-grid,.situation-list{grid-template-columns:minmax(0,1fr)}
  .catalogue-toolbar{position:static;grid-template-columns:minmax(0,1fr);gap:12px;padding:14px 0;border-radius:18px}
  .filter-group{grid-template-columns:minmax(0,1fr);row-gap:6px}
  .chip-label{min-height:0;padding-left:16px}
  .filter-track{flex-wrap:nowrap;overflow-x:auto;padding:2px 26px 4px 16px;scroll-padding-inline:16px 26px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 24px),transparent)}
  .filter-track::-webkit-scrollbar{display:none}
  .filter-count{grid-column:1;grid-row:auto;min-height:0;padding-left:16px}
  .case-card h3{font-size:1.0625rem}
  .plate-detail .plate-stage{grid-template-columns:minmax(0,1fr);gap:16px;padding:0 0 16px}
  .plate-detail .artifact-1{transform:none}
  .pov-card{grid-template-columns:minmax(0,1fr);grid-template-rows:none;padding:24px 18px 20px;border-radius:22px}
  .pov-head,.pov-answer,.pov-follow{grid-column:1;grid-row:auto}
  .pov-follow{justify-self:start}
  .pov-figure{padding-top:24px}
  .pov-number{margin-bottom:14px;font-size:2.5rem}
  .pov-answer{--pad-x:18px;margin-top:22px;border-radius:16px}
  .pov-answer li{padding:20px var(--pad-x)}
  .pov-answer li.is-result{padding-top:26px}
  .pov-answer .is-result p:not(.pov-label){font-size:1.125rem}
  .pov-follow{padding-top:18px}
  .leader-main{grid-template-columns:112px minmax(0,1fr);gap:16px}
  .leader-card .portrait{grid-row:1/span 3;align-self:center;border-radius:16px}
  .leader-meta{display:contents}
  .leader-role,.leader-meta h3,.leader-title{grid-column:2}
  .leader-role{align-self:end;font-size:.6875rem;letter-spacing:.06em}
  .leader-meta h3{margin:2px 0 0}
  .leader-title{align-self:start;font-size:.9375rem}
  .leader-summary,.leader-focus{grid-column:1/-1;margin-top:6px}
  .after-list{grid-template-columns:minmax(0,1fr);gap:22px}
  .choice-chips{grid-template-columns:minmax(0,1fr)}
  .form-row{grid-template-columns:minmax(0,1fr)}
  .sitemap-list{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:480px){
  .ui-card{width:64%}
  .ui-ai{left:16%}.ui-human{left:34%}
  .breadth-grid,.catalogue-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .case-card-link{--thumb:116px;display:grid;grid-template-columns:var(--thumb) minmax(0,1fr);column-gap:14px;align-items:start;border-radius:20px}
  .case-card-media{aspect-ratio:1/1;border-radius:14px}
  .case-card-media img{transform:scale(1.6);transform-origin:50% var(--fy,80%)}
  .case-card-link:hover img{transform:scale(1.66)}
  .case-card-body{align-self:stretch;gap:4px;padding:4px 6px 4px 0}
  .case-card-meta{flex-direction:column;gap:1px}
  .case-card-kind::before{content:none}
  .case-card-meta,.case-card h3{padding-right:0}
  .case-card h3{font-size:1rem}
  .case-card-range{font-size:.8125rem}
  .case-card-go{display:none}
  .intake-sheet{padding:20px 16px}
  .consent{padding:16px}
  .consent-detail,.consent .field-error{margin-left:0}
}
/* As a small thumbnail the plate keeps only its drawing. */
@container (max-width:200px){.concept-title,.concept-wordmark{display:none}.chain-scene,.concept-plate.is-wide .chain-scene{left:-4%;bottom:auto;top:50%;width:108%;transform:translateY(-50%)}}