/* ONE BCG homepage prototype — Design Pass 3.
   Scope: this prototype only. Not part of the V3 Release Candidate.
   Palette, typeface and header/footer behaviour recovered from 01_CURRENT_WEBSITE. */

:root{
  --paper:#FFFFFF;
  --warm:#F7F7F5;
  --warm-2:#F3F3F1;
  --n-0:#FFFFFF;
  --n-1:#FAFAF9;
  --ink:#151412;
  --ink-2:#403C36;
  --ink-3:#5A554B;
  --dark:#141210;
  --near-black:#0A0D11;
  --hero-base:#0b1622;
  --red:#C40B0F;
  --red-deep:#A80A0D;
  --red-light:#FF7376;
  --line:rgba(21,20,18,.13);
  --line-2:rgba(21,20,18,.24);
  --line-dark:rgba(255,255,255,.2);
  --foot-text:#9aa1a9;
  --foot-rule:#1c2127;
  --foot-dim:#868D94;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-line:cubic-bezier(.65,0,.35,1);
  --dur:.4s;
  --dur-slow:1.1s;

  --radius-btn:14px;

  --container:1280px;
  --gutter:clamp(1.25rem,4vw,3rem);

  --t-display:clamp(2.4rem,1.1rem + 4.3vw,4.25rem);
  --t-h2:clamp(1.75rem,1.1rem + 2.2vw,2.875rem);
  --t-mega:clamp(3.5rem,1rem + 8.8vw,8rem);
  --t-statement:clamp(1.625rem,1rem + 2.2vw,3rem);
  --t-lead:clamp(1.125rem,1rem + .7vw,1.375rem);
  --t-body:1.0625rem;
  --t-small:.9375rem;
  --t-cap:.75rem;
  --t-nav:1rem;

  /* section rhythm: dense sections get more, quiet sections less */
  --pad:clamp(4.25rem,7.5vw,7rem);
  --pad-tight:clamp(3.25rem,5vw,4.75rem);

  --hdr-h:104px;
  --hdr-h-solid:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:var(--t-body);line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
svg{display:block}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--pad)}
.section--tight{padding-block:var(--pad-tight)}
.section--warm{background:var(--warm)}
.section--dark{background:var(--dark);color:#fff}




.eyebrow{color:var(--red);text-transform:uppercase;margin:0 0 1.25rem;display:flex;align-items:center;gap:.75rem;}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--red);flex:none}
.section--dark .eyebrow{color:var(--red-light)}
.section--dark .eyebrow::before{background:var(--red-light)}

.lead{font-size:var(--t-lead);color:var(--ink-2);line-height:1.6}
.section--dark .lead{color:#D8D3C9}
.measure{max-width:33rem}

/* section head: heading left, lead right, shared baseline */
.shead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(1.75rem,5vw,4.5rem);align-items:end}
.shead h2{max-width:22.5ch}

/* ================= buttons ================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:inherit;font-size:var(--t-nav);font-weight:600;letter-spacing:.01em;
  min-height:54px;padding:0 2.3rem;border-radius:var(--radius-btn);
  border:1.5px solid var(--red);background:var(--red);color:#fff;
  text-decoration:none;cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.btn:hover{background:var(--red-deep);border-color:var(--red-deep)}
.btn:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.btn--lg{min-height:66px;padding:0 3.25rem;font-size:1.0625rem}
.btn--ghost-light{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn--ghost-light:hover{background:rgba(255,255,255,.12);border-color:#fff}

.tlink{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:var(--t-nav);font-weight:600;color:var(--ink);text-decoration:none;
  padding-block:.4rem;
}
.tlink .ar{
  display:inline-block;width:22px;height:1px;background:currentColor;position:relative;
  transition:width var(--dur) var(--ease);
}
.tlink .ar::after{
  content:"";position:absolute;right:0;top:-3.5px;width:8px;height:8px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);
}
.tlink:hover{color:var(--red)}
.tlink:hover .ar{width:38px}
.tlink:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.tlink--light{color:#fff}
.tlink--light:focus-visible{outline-color:#fff}
.tlink--sm{font-size:var(--t-small)}

.ctagroup{display:flex;align-items:center;gap:clamp(1.5rem,3vw,2.75rem);flex-wrap:wrap}
.after{margin-top:clamp(2.25rem,3.5vw,3rem)}

/* ================= header ================= */
.hdr{position:fixed;top:0;left:0;right:0;z-index:90;border-bottom:1px solid transparent;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:2rem;
  height:var(--hdr-h);transition:height var(--dur) var(--ease)}
.hdr__logo{display:block}
.hdr__logo img{height:56px;width:auto;filter:brightness(0) invert(1);
  transition:filter var(--dur) var(--ease),height var(--dur) var(--ease)}
.nav{display:flex;align-items:center;gap:clamp(1rem,1.9vw,1.9rem)}
.nav a{font-size:var(--t-nav);font-weight:500;color:#fff;text-decoration:none;
  padding-block:.5rem;position:relative;transition:color var(--dur) var(--ease)}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:.15rem;
  height:1px;background:currentColor;transition:right var(--dur) var(--ease)}
.nav a:not(.btn):hover::after,.nav a:not(.btn):focus-visible::after{right:0}
.nav a:focus-visible{outline:2px solid #fff;outline-offset:4px}
.hdr .btn{min-height:46px;padding:0 1.6rem;margin-left:.6rem}

.hdr.solid{background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.hdr.solid .hdr__in{height:var(--hdr-h-solid)}
.hdr.solid .hdr__logo img{filter:none;height:44px}
.hdr.solid .nav a{color:var(--ink-2)}
.hdr.solid .nav a:not(.btn):hover{color:var(--ink)}
.hdr.solid .nav a:focus-visible{outline-color:var(--red)}
.hdr.solid .btn--ghost-light{border-color:var(--line-2);color:var(--ink)}
.hdr.solid .btn--ghost-light:hover{background:transparent;border-color:var(--ink)}

.navtoggle{display:none;background:none;border:0;padding:.7rem;cursor:pointer;border-radius:6px}
.navtoggle span{display:block;width:24px;height:1.5px;background:#fff;margin:5.5px 0;
  transition:background var(--dur),transform var(--dur) var(--ease),opacity var(--dur)}
.hdr.solid .navtoggle span{background:var(--ink)}
.navtoggle:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--ink);
  padding:.9rem 1.25rem;z-index:200;border-radius:8px}
.skip:focus{left:1rem;top:1rem}

/* ================= hero ================= */
.hero{position:relative;min-height:clamp(620px,92vh,880px);display:flex;align-items:center;
  overflow:hidden;background:var(--hero-base)}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:62% 40%}
.hero__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(5,10,17,.88) 0%,rgba(5,10,17,.7) 32%,
    rgba(5,10,17,.3) 58%,rgba(5,10,17,.12) 100%)}
.hero__in{position:relative;z-index:2;width:100%;padding-top:calc(var(--hdr-h) * .6)}
.hero h1{color:#fff;max-width:min(21ch,940px);text-shadow:0 2px 30px rgba(0,0,0,.4)}
.hero__lede{color:rgba(255,255,255,.9);font-size:var(--t-lead);line-height:1.55;
  margin-top:1.75rem;max-width:29rem;text-shadow:0 1px 16px rgba(0,0,0,.4)}
.hero .ctagroup{margin-top:clamp(2.25rem,3.5vw,3rem)}
.hero__rule{width:64px;height:2px;background:var(--red);margin-bottom:2rem}

/* ================= WHY ================= */
.converge{margin-top:clamp(2.75rem,5vw,4rem);position:relative}
.converge svg{width:100%;height:auto}
.converge .frag,.converge .join{stroke:var(--line-2);stroke-width:1.5;fill:none}
.converge .main{stroke:var(--red);stroke-width:2.5;fill:none}
.converge .node{fill:var(--red)}
.converge__label{position:absolute;right:0;bottom:calc(50% + 1.5rem);text-align:right;max-width:17.5ch;margin:0;}
/* Convergence narrative: fragmented -> converging -> resolved.
   One pass, no loop. --seq scales the whole sequence for smaller screens.
   Every stage animates opacity, transform or stroke-dashoffset only, so no
   stage can shift layout or alter the section height. */
#why{--seq:1}
/* 1 + 2. heading, then supporting copy shortly after. Both staged from the
   same trigger as the graphic so the fold reads as one narrative. */
#why .reveal{transition-duration:calc(var(--seq)*.46s)}
#why .reveal--d1{transition-delay:calc(var(--seq)*.14s)}
.converge [data-draw]{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}

/* 3. grey complexity lines: each thread draws left to right, frag then join.
      The six threads are staggered 80ms apart so they read as separate
      systems arriving at the same point. */
.converge .frag path:nth-child(1){--d:.22s}
.converge .frag path:nth-child(2){--d:.30s}
.converge .frag path:nth-child(3){--d:.38s}
.converge .frag path:nth-child(4){--d:.46s}
.converge .frag path:nth-child(5){--d:.54s}
.converge .frag path:nth-child(6){--d:.62s}
.converge .join path:nth-child(1){--d:.60s}
.converge .join path:nth-child(2){--d:.68s}
.converge .join path:nth-child(3){--d:.76s}
.converge .join path:nth-child(4){--d:.84s}
.converge .join path:nth-child(5){--d:.92s}
.converge .join path:nth-child(6){--d:1s}
.converge.in .frag path{stroke-dashoffset:0;
  transition:stroke-dashoffset calc(var(--seq)*.38s) var(--ease-line) calc(var(--seq)*var(--d))}
.converge.in .join path{stroke-dashoffset:0;
  transition:stroke-dashoffset calc(var(--seq)*.46s) var(--ease-line) calc(var(--seq)*var(--d))}

/* the threads gain a little presence as they approach the junction, but stay
   subordinate and stay grey */
.converge .join{opacity:.8}
.converge.in .join{opacity:1;transition:opacity calc(var(--seq)*.8s) var(--ease) calc(var(--seq)*.6s)}

/* 4. convergence: one restrained pulse at the junction, then nothing.
      It resolves back to invisible, so the static composition is unchanged. */
.converge .junction{fill:var(--red);opacity:0;
  transform-box:fill-box;transform-origin:center;transform:scale(.45)}
.converge.in .junction{
  animation:cvg-pulse calc(var(--seq)*.44s) var(--ease) calc(var(--seq)*1.4s) 1 none}
@keyframes cvg-pulse{
  0%{opacity:0;transform:scale(.45)}
  45%{opacity:.5;transform:scale(1)}
  100%{opacity:0;transform:scale(1.18)}
}

/* 5. the ONE Line: red only from the convergence point onward, drawn faster
      over a longer distance than the grey threads so it reads as decisive. */
.converge.in .main{stroke-dashoffset:0;
  transition:stroke-dashoffset calc(var(--seq)*.42s) var(--ease-line) calc(var(--seq)*1.48s)}

/* 6. the statement resolves as the red line runs into the right-hand side */
.converge__label{opacity:0;transform:translateY(14px)}
.converge.in .converge__label{opacity:1;transform:none;
  transition:opacity calc(var(--seq)*.44s) var(--ease) calc(var(--seq)*1.58s),
             transform calc(var(--seq)*.44s) var(--ease) calc(var(--seq)*1.58s)}

/* 7. endpoint: scale from 0, once, no overshoot */
.converge .node{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0)}
.converge.in .node{opacity:1;transform:scale(1);
  transition:opacity calc(var(--seq)*.2s) var(--ease) calc(var(--seq)*1.84s),
             transform calc(var(--seq)*.24s) var(--ease) calc(var(--seq)*1.84s)}

/* ================= HOW: execution model ================= */
.model{margin-top:clamp(2.75rem,5vw,4rem)}
.model__track{position:relative;padding-top:2rem}
.model__rule{position:absolute;top:0;left:10%;right:10%;height:2px;background:var(--line-2)}
.model__rule::after{content:"";position:absolute;inset:0;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease-line)}
.model.in .model__rule::after{transform:scaleX(1)}
.model__steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1.5rem}
.model__step{position:relative}
.model__dot{position:absolute;top:-2.05rem;left:50%;width:11px;height:11px;border-radius:50%;
  background:var(--warm);border:2px solid var(--line-2);transform:translate(-50%,-50%) scale(.6);
  opacity:0;transition:opacity .35s var(--ease),transform .35s var(--ease),
    background .35s var(--ease),border-color .35s var(--ease)}
.model.in .model__dot{opacity:1;transform:translate(-50%,-50%) scale(1);
  background:var(--red);border-color:var(--red)}
.model.in .model__step:nth-child(1) .model__dot{transition-delay:.05s}
.model.in .model__step:nth-child(2) .model__dot{transition-delay:.31s}
.model.in .model__step:nth-child(3) .model__dot{transition-delay:.57s}
.model.in .model__step:nth-child(4) .model__dot{transition-delay:.83s}
.model.in .model__step:nth-child(5) .model__dot{transition-delay:1.09s}
.model__n{display:block;font-size:var(--t-cap);font-weight:700;letter-spacing:.14em;
  color:var(--red);margin-bottom:.6rem}
.model__name{display:block;font-size:clamp(1.125rem,.95rem + .65vw,1.4375rem);font-weight:500;
  letter-spacing:-0.01em;line-height:1.2}
.model__note{display:block;margin-top:.45rem;font-size:var(--t-small);color:var(--ink-3);
  line-height:1.5;max-width:21ch}

/* ================= WHAT: capability spine ================= */
.caps{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.7fr);
  gap:clamp(2rem,5vw,5rem);align-items:start}
.caps__aside{position:sticky;top:calc(var(--hdr-h-solid) + 2.5rem)}
.caps__list{position:relative;padding-left:clamp(1.5rem,2.6vw,2.25rem)}
.caps__spine{position:absolute;left:0;top:1.6rem;bottom:1.6rem;width:1px;background:var(--line)}
.caps__spine::after{content:"";position:absolute;inset:0;background:var(--red);
  transform:scaleY(0);transform-origin:top;transition:transform 1.3s var(--ease-line)}
.caps.in .caps__spine::after{transform:scaleY(1)}
.cap{display:block;text-decoration:none;color:inherit;position:relative;
  padding:clamp(1.05rem,1.9vw,1.5rem) 0;border-bottom:1px solid var(--line);
  transition:padding-left var(--dur) var(--ease)}
.cap:first-child{border-top:1px solid var(--line)}
.cap::before{content:"";position:absolute;
  left:calc(-1 * clamp(1.5rem,2.6vw,2.25rem) - 4.5px);
  top:calc(clamp(1.05rem,1.9vw,1.5rem) + .55em);width:9px;height:9px;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--line-2);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease)}
.cap:hover,.cap:focus-visible{padding-left:.6rem;color:var(--red)}
.cap:hover::before,.cap:focus-visible::before{background:var(--red);border-color:var(--red);
  transform:scale(1.25)}
.cap:focus-visible{outline:2px solid var(--red);outline-offset:6px}
.cap__name{display:block;font-size:clamp(1.3125rem,1.05rem + .95vw,1.875rem);font-weight:300;
  letter-spacing:-0.015em;line-height:1.2}
.cap__note{display:block;margin-top:.4rem;font-size:var(--t-small);color:var(--ink-3);
  max-width:48ch;line-height:1.5;transition:color var(--dur) var(--ease)}
.cap:hover .cap__note,.cap:focus-visible .cap__note{color:var(--ink-2)}

/* ================= SOFTWARE: phone supports the section ================= */
.soft__head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr);
  gap:clamp(2rem,5vw,4rem);align-items:end}
.soft__media{display:flex;justify-content:flex-end}
.soft__media img{max-width:232px;width:100%;
  filter:drop-shadow(0 22px 44px rgba(10,13,17,.16))}
.soft__cap{margin-top:.9rem;font-size:var(--t-cap);letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);text-align:right}
.prods{margin-top:clamp(2.5rem,4.5vw,3.5rem)}
.prod{text-decoration:none;color:inherit;position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:baseline;gap:1.5rem;
  padding:clamp(1.2rem,2.2vw,1.75rem) 0;border-bottom:1px solid var(--line);
  transition:padding-left var(--dur) var(--ease)}
.prod:first-of-type{border-top:1px solid var(--line)}
.prod__n{font-size:var(--t-cap);font-weight:700;letter-spacing:.14em;color:var(--red)}
.prod__name{font-size:clamp(1.4375rem,1.1rem + 1.2vw,2.125rem);font-weight:300;
  letter-spacing:-0.02em;line-height:1.15}
.prod__dom{font-size:var(--t-small);color:var(--ink-3);white-space:nowrap}
.prod__ar{width:22px;height:1px;background:var(--line-2);position:relative;
  transition:width var(--dur) var(--ease),background var(--dur) var(--ease)}
.prod__ar::after{content:"";position:absolute;right:0;top:-3.5px;width:8px;height:8px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:rotate(45deg);color:var(--line-2);transition:color var(--dur) var(--ease)}
.prod:hover,.prod:focus-visible{padding-left:.6rem;color:var(--red)}
.prod:hover .prod__dom,.prod:focus-visible .prod__dom{color:var(--red)}
.prod:hover .prod__ar,.prod:focus-visible .prod__ar{width:34px;background:var(--red)}
.prod:hover .prod__ar::after,.prod:focus-visible .prod__ar::after{color:var(--red)}
.prod:focus-visible{outline:2px solid var(--red);outline-offset:6px}

/* ================= INDUSTRIES: three-part editorial ================= */
.inds{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin-top:clamp(2.5rem,4.5vw,3.5rem);border-top:1px solid var(--line-2)}
.ind{position:relative;text-decoration:none;color:inherit;display:flex;flex-direction:column;
  padding:clamp(1.75rem,2.6vw,2.25rem) clamp(1.5rem,2.6vw,2.5rem)
          clamp(1.5rem,2.4vw,2rem) 0;
  border-right:1px solid var(--line);
  transition:background var(--dur) var(--ease)}
.ind:last-child{border-right:0}
.ind:not(:first-child){padding-left:clamp(1.5rem,2.6vw,2.5rem)}
.ind::before{content:"";position:absolute;top:-1px;left:0;width:0;height:2px;
  background:var(--red);transition:width var(--dur) var(--ease)}
.ind:not(:first-child)::before{left:0}
.ind:hover::before,.ind:focus-visible::before{width:100%}
.ind:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.ind__n{font-size:var(--t-cap);font-weight:700;letter-spacing:.14em;color:var(--ink-3);
  margin-bottom:.9rem}
.ind__name{font-size:clamp(1.1875rem,1rem + .85vw,1.625rem);font-weight:300;line-height:1.2;
  letter-spacing:-0.015em;min-height:2.4em;transition:color var(--dur) var(--ease)}
.ind:hover .ind__name,.ind:focus-visible .ind__name{color:var(--red)}
.ind__desc{margin-top:.85rem;font-size:var(--t-small);color:var(--ink-3);line-height:1.55}
.ind__ev{margin-top:auto;padding-top:1.5rem;display:inline-flex;align-items:center;gap:.6rem;
  font-size:var(--t-small);font-weight:600;color:var(--ink)}
.ind__ev .ar{display:inline-block;width:18px;height:1px;background:currentColor;
  position:relative;transition:width var(--dur) var(--ease)}
.ind__ev .ar::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.ind:hover .ind__ev,.ind:focus-visible .ind__ev{color:var(--red)}
.ind:hover .ind__ev .ar{width:30px}

/* ================= AI: compact connected system ================= */
.flow{margin-top:clamp(2.25rem,4vw,3.25rem);
  border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);
  padding-block:clamp(1.5rem,2.6vw,2rem);
  display:flex;flex-wrap:wrap;align-items:center;gap:.65rem clamp(.85rem,1.6vw,1.4rem)}
.flow__item{font-size:clamp(.9375rem,.85rem + .35vw,1.125rem);font-weight:500;
  color:#E4E0D8;letter-spacing:-0.005em;line-height:1.35;white-space:nowrap}
.flow__sep{width:clamp(18px,2.2vw,32px);height:1px;background:rgba(255,255,255,.3);
  position:relative;flex:none}
.flow__sep::after{content:"";position:absolute;right:0;top:-2.5px;width:6px;height:6px;
  border-top:1px solid rgba(255,255,255,.45);border-right:1px solid rgba(255,255,255,.45);
  transform:rotate(45deg)}
.flow__item--key{color:#fff;font-weight:600;position:relative;padding-bottom:.3rem}
.flow__item--key::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease-line) .35s}
.flow.in .flow__item--key::after{transform:scaleX(1)}
.flow__note{width:100%;margin-top:.35rem;font-size:var(--t-cap);letter-spacing:.11em;
  text-transform:uppercase;color:var(--red-light)}

/* ================= ABOUT ================= */
.since{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.since__fig{display:block;font-size:var(--t-mega);font-weight:200;line-height:.86;
  letter-spacing:-0.04em;color:var(--ink)}
.since__fig em{font-style:normal;color:var(--red)}
.since__cap{display:block;margin-top:1.1rem;font-size:var(--t-cap);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* ================= INSIGHTS ================= */
.topics{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 0;
  margin-top:clamp(1.75rem,3vw,2.5rem);padding-top:clamp(1.5rem,2.5vw,2rem);
  border-top:1px solid var(--line)}
.topics__lbl{font-size:var(--t-cap);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-right:1.4rem}
.topic{font-size:var(--t-small);color:var(--ink-2);line-height:1.4;padding-right:1rem;
  margin-right:1rem;border-right:1px solid var(--line-2)}
.topic:last-child{border-right:0;margin-right:0;padding-right:0}

/* ================= CLOSING CTA ================= */
.close{text-align:center;padding-block:clamp(5.5rem,10vw,9rem)}
.close .eyebrow{justify-content:center}
.close h2{max-width:26.2ch;margin-inline:auto;}
.close .lead{max-width:35rem;margin:1.5rem auto 0}
.close .ctagroup{justify-content:center;margin-top:clamp(2.5rem,4.5vw,3.5rem)}

/* ================= footer ================= */
.footer{background:var(--near-black);color:var(--foot-text);
  padding-block:clamp(3.5rem,6vw,5rem) 1.5rem;font-size:var(--t-small)}
.footer a{color:var(--foot-text);text-decoration:none;transition:color .22s}
.footer a:hover{color:#fff}
.footer a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.footer__top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;
  gap:clamp(1.75rem,3.5vw,3.5rem)}
.footer__brand img{height:60px;width:auto;filter:brightness(0) invert(1);margin-bottom:1.4rem}
.footer__tag{max-width:22rem;line-height:1.6}
.footer .fcta{display:inline-flex;align-items:center;gap:.7rem;margin-top:1.6rem;
  color:#fff;font-weight:600}
.footer .fcta .ln{display:block;width:28px;height:1px;background:#fff;
  transition:width var(--dur) var(--ease),background var(--dur)}
.footer .fcta:hover .ln{width:46px;background:var(--red)}
.fhead{font-size:.68rem;letter-spacing:.11em;color:#fff;font-weight:700;
  margin:0 0 1rem;text-transform:uppercase}
.footer__col a{display:block;padding:.34rem 0;line-height:1.45}

/* collapsible groups: open on desktop, toggleable on mobile, work without JS */
.fgroup{border:0}
.fgroup > summary{list-style:none;display:block;cursor:default;pointer-events:none}
.fgroup > summary::-webkit-details-marker{display:none}
.fgroup__ico{display:none}
/* above mobile the group content is always shown, whatever the open state */
.fgroup:not([open]) .fgroup__body{display:block}

.footer__locations{margin-top:clamp(2.5rem,4.5vw,3.5rem);padding-top:clamp(1.75rem,3.5vw,2.5rem);
  border-top:1px solid var(--foot-rule);display:grid;grid-template-columns:repeat(5,1fr);gap:2rem}
.footer__loc .fhead{margin-bottom:.8rem}
.footer__loc p{line-height:1.55}
.footer__loc .tel{display:inline-block;margin-top:.5rem}

.footer__bottom{margin-top:clamp(2.5rem,4.5vw,3rem);padding-block:1.5rem 0;
  border-top:1px solid var(--foot-rule);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
  font-size:.8rem;color:var(--foot-dim)}
.footer__copy{grid-column:2;text-align:center;margin:0}
.footer__legal{grid-column:3;justify-self:end;margin:0}

/* ================= reveal ================= */
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity .75s var(--ease),transform .75s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal--d1{transition-delay:.1s}
.reveal--d2{transition-delay:.2s}
.no-js .reveal{opacity:1;transform:none}
.no-js .converge [data-draw]{stroke-dashoffset:0}
.no-js .converge .join{opacity:1}
.no-js .converge .junction{animation:none;opacity:0}
.no-js .converge__label{opacity:1;transform:none}
.no-js .converge .node{opacity:1;transform:none}
.no-js .model__rule::after,.no-js .caps__spine::after,
.no-js .flow__item--key::after{transform:none}
.no-js .model__dot{opacity:1;transform:translate(-50%,-50%) scale(1);
  background:var(--red);border-color:var(--red)}

/* ================= tablet ================= */
@media (max-width:1040px){
  :root{--hdr-h:88px;--hdr-h-solid:68px}
  .hdr__logo img{height:46px}
  .hdr.solid .hdr__logo img{height:40px}
  .nav{gap:clamp(.7rem,1.5vw,1.2rem)}
  .nav a{font-size:.875rem}
  .shead,.since{grid-template-columns:1fr;gap:1.5rem;align-items:start}
  .converge__label{position:static;margin-top:1.75rem;max-width:27.5ch;text-align:left}
  .caps{grid-template-columns:1fr;gap:2rem}
  .caps__aside{position:static}
  .soft__head{grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end}
  .soft__media img{max-width:176px}
  .soft__cap{font-size:.6875rem;max-width:16ch;margin-left:auto}
  .model__steps{grid-template-columns:repeat(5,1fr);gap:1.1rem}
  .model__rule{left:10%;right:10%}
  .model__track{padding-top:1.75rem}
  .model__dot{top:-1.85rem}
  .model__n{margin-bottom:.45rem}
  .model__name{font-size:1.0625rem}
  .model__note{font-size:.8125rem;max-width:none;line-height:1.45}
  .inds{grid-template-columns:1fr 1fr}
  .ind{border-bottom:1px solid var(--line)}
  .ind:nth-child(2){border-right:0}
  .ind:nth-child(3){padding-left:0;border-bottom:0}
  .footer__top{grid-template-columns:1fr 1fr 1fr}
  .footer__locations{grid-template-columns:repeat(3,1fr);gap:1.75rem}
}

/* ================= mobile menu ================= */
@media (max-width:860px){
  .nav{position:fixed;inset:var(--hdr-h) 0 auto 0;background:#fff;
    flex-direction:column;align-items:stretch;gap:0;
    padding:.75rem var(--gutter) 2rem;border-bottom:1px solid var(--line);
    transform:translateY(-10px);opacity:0;pointer-events:none;
    max-height:calc(100vh - var(--hdr-h));overflow-y:auto;
    transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
  .nav.open{transform:none;opacity:1;pointer-events:auto}
  .nav a{color:var(--ink);padding:.95rem 0;border-bottom:1px solid var(--line);
    font-size:1.0625rem}
  .nav a:not(.btn)::after{display:none}
  .nav .btn{margin:1.3rem 0 0;align-self:flex-start;min-height:52px;padding:0 2.2rem;
    border-color:var(--red);background:var(--red);color:#fff}
  .hdr .btn--ghost-light,.hdr.solid .btn--ghost-light{border-color:var(--red);
    background:var(--red);color:#fff}
  .navtoggle{display:block}
}

/* ================= mobile 390 ================= */
@media (max-width:640px){
  :root{--hdr-h:76px;--hdr-h-solid:64px;
    --pad:clamp(3.25rem,10vw,4.25rem);--pad-tight:2.75rem}
  /* same narrative, slightly tighter so the copy is not held back on mobile */
  #why{--seq:.88}
  .hdr__logo img{height:40px}
  .hdr.solid .hdr__logo img{height:36px}

  .hero{min-height:clamp(580px,86vh,740px)}
  .hero__media img{object-position:50% 46%}
  .hero__scrim{background:linear-gradient(180deg,rgba(5,10,17,.88) 0%,
    rgba(5,10,17,.72) 42%,rgba(5,10,17,.4) 72%,rgba(5,10,17,.3) 100%)}
  .hero__in{padding-top:calc(var(--hdr-h) * .4)}
  .hero h1{max-width:16.2ch}
  .hero__lede{margin-top:1.25rem}
  .hero .ctagroup{gap:1.25rem}
  .hero .btn{padding:0 1.9rem}

  /* execution model: compact spine, not five blocks */
  .model__rule{display:none}
  .model__track{padding-top:0}
  .model__steps{display:block;position:relative;padding-left:1.6rem}
  .model__steps::before{content:"";position:absolute;left:4px;top:.6rem;bottom:.6rem;
    width:1px;background:var(--line-2)}
  .model__step{padding:.7rem 0;border-top:0}
  .model__dot{position:absolute;top:1.25rem;left:-1.6rem;width:9px;height:9px;
    transform:translate(0,-50%) scale(1)}
  .model__n{display:inline;margin-right:.6rem;font-size:.6875rem}
  .model__name{display:inline;font-size:1.0625rem}
  .model__note{margin-top:.2rem;max-width:none;font-size:.8125rem}

  /* capabilities: tighter rows */
  .caps__list{padding-left:1.35rem}
  .cap{padding:.95rem 0}
  .cap::before{left:calc(-1.35rem - 4.5px);top:calc(.95rem + .5em)}
  .cap__name{font-size:1.1875rem}
  .cap__note{font-size:.8125rem;margin-top:.3rem}

  /* products: phone above, three equal rows below */
  .soft__head{grid-template-columns:1fr;gap:1.5rem}
  .soft__media{justify-content:flex-start;order:2}
  .soft__media > div{display:flex;align-items:center;gap:1.1rem}
  .soft__media img{max-width:124px;flex:none}
  .soft__cap{margin-top:0;text-align:left;font-size:.6875rem;max-width:none;flex:1;
    letter-spacing:.08em;line-height:1.55}
  .prods{margin-top:2rem}
  .prod{grid-template-columns:auto 1fr auto;gap:.35rem .9rem;padding:1.05rem 0}
  .prod__n{grid-column:1;grid-row:1}
  .prod__name{grid-column:2;grid-row:1;font-size:1.375rem}
  .prod__ar{grid-column:3;grid-row:1;align-self:center}
  .prod__dom{grid-column:2/4;grid-row:2;white-space:normal;font-size:.8125rem}

  /* industries: compact editorial rows */
  .inds{grid-template-columns:1fr;border-top:1px solid var(--line-2)}
  .ind{display:block;padding:1.5rem 0 1.65rem;border-right:0;
    border-bottom:1px solid var(--line)}
  .ind:nth-child(2),.ind:nth-child(3){padding-left:0}
  .ind:last-child{border-bottom:0}
  .ind__n{display:inline;margin-right:.7rem;font-size:.6875rem;color:var(--red)}
  .ind__name{display:inline;font-size:1.3125rem;min-height:0}
  .ind__desc{display:block;margin-top:.6rem;font-size:.875rem;line-height:1.6;
    color:var(--ink-2)}
  .ind__ev{margin-top:1rem;padding-top:0;display:inline-flex}

  /* AI flow: compact wrapped system */
  .flow{gap:.5rem .7rem;padding-block:1.25rem}
  .flow__item{font-size:.9375rem;white-space:normal}
  .flow__sep{width:14px}

  .since__cap{margin-top:.85rem}
  .topics{gap:.35rem 0}
  .topic{font-size:.8125rem;padding-right:.75rem;margin-right:.75rem}

  /* footer: collapsible nav groups, locations always visible */
  .footer__top{grid-template-columns:1fr;gap:0}
  .footer__brand{margin-bottom:2rem}
  .footer__brand img{height:52px}
  .fgroup{border-bottom:1px solid var(--foot-rule)}
  .fgroup > summary{display:flex;align-items:center;justify-content:space-between;
    cursor:pointer;padding:1.05rem 0;list-style:none;pointer-events:auto}
  .fgroup:not([open]) .fgroup__body{display:none}
  .fgroup > summary:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .fgroup > summary .fhead{margin:0}
  .fgroup__ico{display:block;width:11px;height:11px;border-right:1.5px solid var(--foot-text);
    border-bottom:1.5px solid var(--foot-text);transform:rotate(45deg) translate(-2px,-2px);
    transition:transform var(--dur) var(--ease);flex:none}
  .fgroup[open] .fgroup__ico{transform:rotate(-135deg) translate(-3px,-3px)}
  .fgroup__body{padding-bottom:1.1rem}
  .footer__col a{padding:.42rem 0}
  .footer__locations{grid-template-columns:1fr;gap:1.5rem;margin-top:2rem;padding-top:1.75rem}
  .footer__bottom{grid-template-columns:1fr;gap:.6rem;text-align:left;
    justify-items:start;padding-block:1.35rem 0}
  .footer__copy{grid-column:1;text-align:left;justify-self:start;order:1;line-height:1.5}
  .footer__legal{grid-column:1;justify-self:start;order:2;line-height:1.5}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .converge [data-draw]{stroke-dashoffset:0}
  .converge .join{opacity:1}
  .converge .junction{animation:none;opacity:0}
  .converge__label{opacity:1;transform:none}
  .converge .node{opacity:1;transform:none}
  .model__rule::after,.caps__spine::after,.flow__item--key::after{transform:none}
  .model__dot{opacity:1;transform:translate(-50%,-50%) scale(1);
    background:var(--red);border-color:var(--red)}
}
@media (prefers-reduced-motion:reduce) and (max-width:640px){
  .model__dot{transform:translate(0,-50%) scale(1)}
}

/* =========================================================================
   INTERNAL PAGES — additions to the approved homepage system.
   No new colours, type family or button language is introduced.
   ========================================================================= */

/* internal pages open on a solid header rather than over a photograph */
.hdr--solid{background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.hdr--solid .hdr__in{height:var(--hdr-h-solid)}
.hdr--solid .hdr__logo img{filter:none;height:52px}
.hdr--solid .nav a{color:var(--ink-2)}
.hdr--solid .nav a:not(.btn):hover{color:var(--ink)}
.hdr--solid .nav a:focus-visible{outline-color:var(--red)}
.hdr--solid .nav a[aria-current="page"]{color:var(--ink)}
.hdr--solid .nav a[aria-current="page"]::after{right:0;background:var(--red)}
.hdr--solid .btn--ghost-light{border-color:var(--line-2);color:var(--ink)}
.hdr--solid .btn--ghost-light:hover{background:transparent;border-color:var(--ink)}
.hdr--solid .navtoggle span{background:var(--ink)}
body.page{padding-top:var(--hdr-h-solid)}

/* ---------- page opening ---------- */
.phero{background:var(--dark);color:#fff;padding-block:clamp(3.5rem,6vw,5.5rem) clamp(3.5rem,6vw,5.5rem)}
.phero .eyebrow{color:var(--red-light)}
.phero .eyebrow::before{background:var(--red-light)}
.phero__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:end;margin-top:clamp(2rem,4vw,3rem)}
.phero__h{max-width:21.2ch;}
.phero__lede{font-size:var(--t-lead);line-height:1.6;color:#D8D3C9;max-width:32rem}
.phero .ctagroup{margin-top:clamp(1.75rem,3vw,2.25rem)}
.phero .tlink{color:#fff}
.phero__side > * + *{margin-top:1.25rem}

/* light opening variant for editorial pages */
.phero--light{background:var(--paper);color:var(--ink)}
.phero--light .eyebrow{color:var(--red)}
.phero--light .eyebrow::before{background:var(--red)}
.phero--light .phero__lede{color:var(--ink-2)}
.phero--light .tlink{color:var(--ink)}

.crumb{font-size:var(--t-cap);letter-spacing:.09em;text-transform:uppercase}
.crumb ol{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center}
.crumb li{color:rgba(255,255,255,.55)}
.crumb li + li::before{content:"/";margin-right:.55rem;opacity:.5}
.crumb a{color:rgba(255,255,255,.75);text-decoration:none}
.crumb a:hover{color:#fff}
.phero--light .crumb li{color:var(--ink-3)}
.phero--light .crumb a{color:var(--ink-2)}
.phero--light .crumb a:hover{color:var(--red)}

/* ---------- numbered spine ---------- */
.spine{position:relative;margin-top:clamp(2.25rem,4vw,3.25rem);
  padding-left:clamp(1.5rem,2.6vw,2.5rem)}
.spine__line{position:absolute;left:0;top:1.9rem;bottom:1.9rem;width:1px;background:var(--line)}
.spine__line::after{content:"";position:absolute;inset:0;background:var(--red);
  transform:scaleY(0);transform-origin:top;transition:transform 1.3s var(--ease-line)}
.spine.in .spine__line::after{transform:scaleY(1)}
.sp__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  column-gap:clamp(1rem,2vw,1.75rem);align-items:baseline;
  padding:clamp(1.15rem,2vw,1.6rem) 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;position:relative;
  transition:padding-left var(--dur) var(--ease)}
.sp__row:first-child{border-top:1px solid var(--line)}
.sp__row::before{content:"";position:absolute;
  left:calc(-1 * clamp(1.5rem,2.6vw,2.5rem) - 4.5px);
  top:calc(clamp(1.15rem,2vw,1.6rem) + .6em);width:9px;height:9px;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--line-2);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease)}
.section--warm .sp__row::before{background:var(--warm)}
.sp__n{font-size:var(--t-cap);font-weight:700;letter-spacing:.14em;color:var(--red)}
.sp__name{font-size:clamp(1.25rem,1.05rem + .85vw,1.75rem);font-weight:300;
  letter-spacing:-0.015em;line-height:1.2}
.sp__note{grid-column:2;font-size:var(--t-small);color:var(--ink-3);line-height:1.55;
  margin-top:.35rem;max-width:38rem}
.sp__ar{width:22px;height:1px;background:var(--line-2);position:relative;align-self:center;
  transition:width var(--dur) var(--ease),background var(--dur) var(--ease)}
.sp__ar::after{content:"";position:absolute;right:0;top:-3.5px;width:8px;height:8px;
  border-top:1px solid var(--line-2);border-right:1px solid var(--line-2);transform:rotate(45deg);
  transition:border-color var(--dur) var(--ease)}
a.sp__row:hover,a.sp__row:focus-visible{padding-left:.6rem;color:var(--red)}
a.sp__row:hover::before,a.sp__row:focus-visible::before{background:var(--red);
  border-color:var(--red);transform:scale(1.25)}
a.sp__row:hover .sp__ar{width:34px;background:var(--red)}
a.sp__row:hover .sp__ar::after{border-color:var(--red)}
a.sp__row:hover .sp__note{color:var(--ink-2)}
a.sp__row:focus-visible{outline:2px solid var(--red);outline-offset:6px}
.spine--wide .sp__name{font-size:clamp(1.5rem,1.1rem + 1.5vw,2.375rem)}

/* ---------- inline hairline list ---------- */
.ilist{display:flex;flex-wrap:wrap;align-items:baseline;gap:.45rem 0;
  margin-top:clamp(1.75rem,3vw,2.5rem);padding-top:clamp(1.5rem,2.5vw,2rem);
  border-top:1px solid var(--line)}
.ilist__lbl{font-size:var(--t-cap);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-right:1.4rem}
.ilist__i{font-size:var(--t-small);color:var(--ink-2);line-height:1.45;
  padding-right:1rem;margin-right:1rem;border-right:1px solid var(--line-2)}
.ilist__i:last-child{border-right:0;margin-right:0;padding-right:0}
.section--dark .ilist{border-top-color:var(--line-dark)}
.section--dark .ilist__lbl{color:#9d978c}
.section--dark .ilist__i{color:#D8D3C9;border-right-color:rgba(255,255,255,.22)}

/* ---------- stacked statement rows ---------- */
.stack{margin-top:clamp(2.25rem,4vw,3rem);border-top:1px solid var(--line)}
.stack__row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);
  gap:clamp(1rem,3vw,3rem);padding:clamp(1.35rem,2.4vw,1.9rem) 0;
  border-bottom:1px solid var(--line);align-items:baseline}

.stack__p{font-size:var(--t-small);color:var(--ink-3);line-height:1.6}
.section--dark .stack,.section--dark .stack__row{border-color:var(--line-dark)}
.section--dark .stack__p{color:#B9B3A8}

/* light variant of the flow device for light surfaces */
.flow--light{border-color:var(--line)}
.flow--light .flow__item{color:var(--ink-2)}
.flow--light .flow__sep{background:var(--line-2)}
.flow--light .flow__sep::after{border-color:var(--line-2)}
.flow--light .flow__item--key{color:var(--ink);font-weight:600}
.flow--light .flow__note{color:var(--red)}

/* ---------- editorial pair grid (used for evidence / offices / leadership) ---------- */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3.5vw,3rem);
  margin-top:clamp(2.25rem,4vw,3rem)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin-top:clamp(2.25rem,4vw,3rem);border-top:1px solid var(--line-2)}
.cell{position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  padding:clamp(1.6rem,2.6vw,2.25rem) clamp(1.5rem,2.6vw,2.5rem) clamp(1.4rem,2.4vw,2rem) 0;
  border-right:1px solid var(--line)}
.cell:last-child{border-right:0}
.cell:not(:first-child){padding-left:clamp(1.5rem,2.6vw,2.5rem)}
.cell::before{content:"";position:absolute;top:-1px;left:0;width:0;height:2px;background:var(--red);
  transition:width var(--dur) var(--ease)}
a.cell:hover::before,a.cell:focus-visible::before{width:100%}
a.cell:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.cell__n{font-size:var(--t-cap);font-weight:700;letter-spacing:.14em;color:var(--ink-3);
  margin-bottom:.9rem}
.cell__h{transition:color var(--dur) var(--ease);}
a.cell:hover .cell__h,a.cell:focus-visible .cell__h{color:var(--red)}
.cell__p{margin-top:.85rem;font-size:var(--t-small);color:var(--ink-3);line-height:1.6;max-width:24rem}
.cell__ev{margin-top:auto;padding-top:1.4rem;display:inline-flex;align-items:center;gap:.6rem;
  font-size:var(--t-small);font-weight:600}
.cell__ev .ar{display:inline-block;width:18px;height:1px;background:currentColor;position:relative;
  transition:width var(--dur) var(--ease)}
.cell__ev .ar::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
a.cell:hover .cell__ev{color:var(--red)}
a.cell:hover .cell__ev .ar{width:30px}

/* ---------- quiet fact block ---------- */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
.fact__k{font-size:var(--t-cap);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.5rem}
.fact__v{font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);font-weight:400;line-height:1.5}

/* ---------- capability disclosure (product pages) ---------- */
.capgrp{margin-top:clamp(2rem,3.5vw,2.75rem)}
.capgrp__h{display:flex;align-items:baseline;gap:.85rem;padding-bottom:.85rem;border-bottom:1px solid var(--line-2);}
.capgrp__n{font-size:var(--t-cap);font-weight:700;letter-spacing:.14em;color:var(--red)}
.capgrp__items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(1.5rem,3vw,3rem)}
.capgrp__items li{font-size:var(--t-small);color:var(--ink-2);line-height:1.5;
  padding:.7rem 0;border-bottom:1px solid var(--line)}
.capmore{margin-top:clamp(2.25rem,4vw,3rem);border-top:1px solid var(--line)}
.capmore > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.65rem;
  padding:1.1rem 0 0;font-size:var(--t-small);font-weight:600;color:var(--ink)}
.capmore > summary::-webkit-details-marker{display:none}
.capmore > summary:hover,.capmore > summary:focus-visible{color:var(--red)}
.capmore__ico{width:9px;height:9px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--dur) var(--ease)}
.capmore[open] .capmore__ico{transform:rotate(-135deg) translate(-3px,-3px)}
.capmore__body{padding-top:.5rem}

/* ---------- form ---------- */
.formwrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2.5rem,6vw,5rem);align-items:start}
.field{margin-bottom:1.5rem}
.field label{display:block;font-size:var(--t-small);font-weight:600;margin-bottom:.55rem}
.field .req{color:var(--red)}
.field input,.field textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-2);border-radius:8px;
  padding:.95rem 1.1rem;transition:border-color var(--dur) var(--ease)}
.field textarea{min-height:9.5rem;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:#8B857A}
.field input:focus,.field textarea:focus{outline:2px solid var(--red);outline-offset:1px;
  border-color:var(--red)}
.formnote{margin-top:1.25rem;font-size:var(--t-small);color:var(--ink-3);line-height:1.6;
  max-width:36rem}
.formstatus{margin-top:1.25rem;font-size:var(--t-small);line-height:1.6;
  border-left:2px solid var(--red);padding-left:1rem;color:var(--ink-2)}
/* The status line stays in the document at all times so assistive technology
   registers the live region before it is written to. While it is empty it
   occupies no space and draws nothing, which keeps the approved layout exact.
   It is deliberately not hidden, display:none or visibility:hidden: a live
   region that is not rendered when its content changes is frequently not
   announced. */
.formstatus:empty{margin:0;padding:0;border-left-width:0;
  height:0;overflow:hidden}

/* ---------- article-free insights state ---------- */
.emptystate{margin-top:clamp(2.25rem,4vw,3rem);padding:clamp(2rem,4vw,3rem) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.emptystate p{max-width:40rem;color:var(--ink-3);line-height:1.65}

/* ---------- legal document ---------- */
.legal{max-width:44rem}
.legal h2{margin-top:2.75rem;}
.legal h3{margin-top:1.75rem;}
.legal p,.legal li{font-size:1rem;line-height:1.75;color:var(--ink-2);margin-top:1rem}
.legal ul{margin-top:.5rem;padding-left:1.25rem;list-style:disc}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .phero__grid{grid-template-columns:1fr;gap:1.5rem;align-items:start}
  .phero__h{max-width:25ch}
  .formwrap{grid-template-columns:1fr;gap:2.5rem}
  .grid3{grid-template-columns:1fr 1fr}
  .cell{border-bottom:1px solid var(--line)}
  .cell:nth-child(2){border-right:0}
  .cell:nth-child(3){padding-left:0;border-bottom:0}
  .capgrp__items{grid-template-columns:1fr}
}
@media (max-width:640px){
  :root{--hdr-h-solid:64px}
  .hdr--solid .hdr__logo img{height:40px}
  .phero{padding-block:2.25rem 2.75rem}
  .phero__h{max-width:none;}
  .phero__grid{margin-top:1.5rem;gap:1.1rem}
  .spine{padding-left:1.35rem}
  .sp__row{grid-template-columns:auto minmax(0,1fr);padding:.95rem 0}
  .sp__row::before{left:calc(-1.35rem - 4.5px);top:calc(.95rem + .55em)}
  .sp__name{font-size:1.1875rem}
  .sp__note{font-size:.8125rem;margin-top:.3rem}
  .sp__ar{display:none}
  .spine--wide .sp__name{font-size:1.3125rem}
  .stack__row{grid-template-columns:1fr;gap:.45rem;padding:1.1rem 0}
  .grid2,.facts{grid-template-columns:1fr;gap:1.5rem}
  .grid3{grid-template-columns:1fr}
  .cell{display:block;padding:1.35rem 0 1.5rem;border-right:0;
    border-bottom:1px solid var(--line)}
  .cell:not(:first-child){padding-left:0}
  .cell:last-child{border-bottom:0}
  .cell__n{display:inline;margin-right:.7rem;color:var(--red);font-size:.6875rem}
  .cell__h{display:inline;}
  .cell__p{display:block;margin-top:.6rem;font-size:.875rem;color:var(--ink-2)}
  .cell__ev{margin-top:1rem;padding-top:0;display:inline-flex}
  .ilist{gap:.35rem 0}
  .ilist__i{font-size:.8125rem;padding-right:.75rem;margin-right:.75rem}
}

/* ---------- brace: many inputs resolving into one system ---------- */
.brace{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:0;margin-top:clamp(2.25rem,4vw,3.25rem)}
.brace__list{display:flex;flex-direction:column}
.brace__i{position:relative;font-size:var(--t-small);color:var(--ink-2);line-height:1.4;
  padding:.62rem 0;text-align:right;padding-right:2.25rem}
.brace__i::after{content:"";position:absolute;right:0;top:50%;width:1.6rem;height:1px;
  background:var(--line-2)}
.brace__bar{position:relative;width:1px;align-self:stretch;background:var(--line-2);
  margin-block:calc(.62rem + .7em)}
.brace__out{position:relative;padding-left:3rem;display:flex;flex-direction:column;
  justify-content:center}
.brace__out::before{content:"";position:absolute;left:0;top:50%;width:2.4rem;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease-line) .4s}
.brace.in .brace__out::before{transform:scaleX(1)}
.brace__out::after{content:"";position:absolute;left:2.4rem;top:50%;width:9px;height:9px;
  border-radius:50%;background:var(--red);transform:translate(-2px,-50%) scale(0);
  transition:transform .35s var(--ease) 1s}
.brace.in .brace__out::after{transform:translate(-2px,-50%) scale(1)}

.brace__p{margin-top:.85rem;font-size:var(--t-small);color:var(--ink-3);line-height:1.6;
  max-width:26rem}
.section--dark .brace__i{color:#D8D3C9}
.section--dark .brace__i::after,.section--dark .brace__bar{background:rgba(255,255,255,.28)}
.section--dark .brace__p{color:#B9B3A8}

/* ---------- large standalone statement ---------- */
.bigstatement{font-size:clamp(1.625rem,1rem + 2.3vw,2.75rem);font-weight:300;line-height:1.22;
  letter-spacing:-0.02em;max-width:22ch}
.bigstatement + .lead{margin-top:clamp(1.5rem,2.5vw,2rem);max-width:34rem}

@media (max-width:860px){
  .brace{grid-template-columns:auto minmax(0,1fr);gap:0 1.25rem}
  .brace__list{grid-column:1;grid-row:1}
  .brace__bar{grid-column:1;grid-row:1;justify-self:end;margin-right:-.6rem}
  .brace__i{text-align:right;padding-right:1.35rem}
  .brace__i::after{width:.9rem}
  .brace__out{grid-column:2;grid-row:1;padding-left:1.6rem}
  .brace__out::before{width:1.1rem}
  .brace__out::after{left:1.1rem}
}
@media (max-width:640px){
  .brace{grid-template-columns:1fr;gap:0}
  .brace__list{grid-column:1;grid-row:1}
  .brace__bar{display:none}
  .brace__i{text-align:left;padding-right:0;padding-left:1.35rem;padding-block:.5rem}
  .brace__i::after{left:0;right:auto;width:.85rem;top:50%}
  .brace__out{grid-column:1;grid-row:2;padding-left:0;margin-top:1.5rem;
    padding-top:1.5rem;border-top:2px solid var(--red)}
  .brace__out::before,.brace__out::after{display:none}
}

/* ---------- product feature (industry + product pages) ---------- */
.prodfeature{display:grid;grid-template-columns:auto minmax(0,1.5fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.prodfeature__media img{max-width:232px;width:100%;
  filter:drop-shadow(0 22px 44px rgba(10,13,17,.16))}
@media (max-width:860px){
  .prodfeature{grid-template-columns:1fr;gap:1.75rem}
  .prodfeature__media{order:2}
  .prodfeature__media img{max-width:150px}
}

/* ---------- offices ---------- */
.offices{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(1.25rem,2.5vw,2rem);
  margin-top:clamp(2rem,3.5vw,2.75rem);padding-top:clamp(1.5rem,2.5vw,2rem);
  border-top:1px solid var(--line)}
.offices--stack{grid-template-columns:1fr;gap:1.35rem;border-top:0;padding-top:0}
.offices--stack .office{padding-bottom:1.35rem;border-bottom:1px solid var(--line)}
.offices--stack .office:last-child{border-bottom:0;padding-bottom:0}
.office__a{font-size:var(--t-small);color:var(--ink-3);line-height:1.6;margin-top:.15rem}
.office__t{display:inline-block;margin-top:.5rem;font-size:var(--t-small);color:var(--ink-2);
  text-decoration:none;border-bottom:1px solid var(--line-2)}
.office__t:hover{color:var(--red);border-color:var(--red)}
@media (max-width:1040px){.offices{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.offices{grid-template-columns:1fr;gap:1.35rem}
  .offices .office{padding-bottom:1.25rem;border-bottom:1px solid var(--line)}
  .offices .office:last-child{border-bottom:0}}

/* ---------- feature spine (execution model on How We Work) ---------- */
.sp__lead{grid-column:2;display:block;font-size:var(--t-lead);color:var(--ink-2);
  line-height:1.5;margin-top:.5rem;max-width:32rem}
.spine--feature .sp__row{padding:clamp(1.6rem,2.8vw,2.4rem) 0}
.spine--feature .sp__row::before{top:calc(clamp(1.6rem,2.8vw,2.4rem) + .6em)}
.spine--feature .sp__name{font-size:clamp(1.75rem,1.2rem + 2vw,3rem);font-weight:200}
.spine--feature .sp__note{font-size:var(--t-body);color:var(--ink-3);max-width:36rem;
  margin-top:.55rem}
@media (max-width:640px){
  .spine--feature .sp__row{padding:1.1rem 0}
  .spine--feature .sp__row::before{top:calc(1.1rem + .55em)}
  .spine--feature .sp__name{font-size:1.5rem}
  .sp__lead{font-size:1rem;margin-top:.35rem}
  .spine--feature .sp__note{font-size:.875rem;margin-top:.35rem}
}

/* ---------- spine on dark surfaces ---------- */
.section--dark .spine__line{background:rgba(255,255,255,.2)}
.section--dark .sp__row,.section--dark .sp__row:first-child{border-color:var(--line-dark)}
.section--dark .sp__row::before{background:var(--dark);border-color:rgba(255,255,255,.4)}
.section--dark .sp__n{color:var(--red-light)}
.section--dark .sp__name{color:#fff}
.section--dark .sp__lead{color:#D8D3C9}
.section--dark .sp__note{color:#B9B3A8}
.section--dark .sp__ar{background:rgba(255,255,255,.4)}
.section--dark .sp__ar::after{border-color:rgba(255,255,255,.4)}
.section--dark a.sp__row:hover,.section--dark a.sp__row:focus-visible{color:var(--red-light)}
.section--dark a.sp__row:hover::before{background:var(--red-light);border-color:var(--red-light)}
.section--dark a.sp__row:hover .sp__ar{background:var(--red-light)}
.section--dark a.sp__row:hover .sp__ar::after{border-color:var(--red-light)}
.section--dark a.sp__row:hover .sp__note{color:#D8D3C9}
.section--dark a.sp__row:focus-visible{outline-color:var(--red-light)}

/* =========================================================================
   INTERNAL PAGES — targeted responsive corrections (pass 1 review).
   All fixes are shared, not per page.
   ========================================================================= */

/* 1. Mobile header / hero separation.
   The fixed header sat too close to the breadcrumb and H1. Give the page
   opening real clearance and separate the breadcrumb from the eyebrow. */
@media (max-width:640px){
  .phero{padding-block:2.5rem 3rem}
  .phero .crumb{margin-bottom:1.75rem}
  .phero__grid{margin-top:0;gap:1.35rem}
  .phero .ctagroup{margin-top:1.5rem}
}

/* 3. Mobile hierarchy: a routing row's evidence link must never run on from
   the name. Force it onto its own line whether or not a description exists. */
@media (max-width:640px){
  .cell__ev{display:flex;width:-moz-fit-content;width:fit-content}
  .cell__h + .cell__ev{margin-top:.9rem}
  .cell__p + .cell__ev{margin-top:.9rem}
  body.page .ind__ev{display:flex;width:-moz-fit-content;width:fit-content}
}

/* 2. Mobile rhythm: restore breathing room inside the compact system.
   Applies to the editorial rows, statement stacks and hairline lists that
   Industries, Careers and Insights are built from. */
@media (max-width:640px){
  .cell{padding:1.7rem 0 1.85rem}
  .stack__row{padding:1.35rem 0;gap:.6rem}
  .ilist{gap:.6rem 0;margin-top:2rem;padding-top:1.75rem}
  .ilist__i{padding-right:.85rem;margin-right:.85rem}
  .emptystate{margin-top:2rem;padding:1.85rem 0}
  .capgrp{margin-top:2.25rem}
  .capgrp__items li{padding:.85rem 0}
  .offices{gap:1.65rem}
  .offices .office{padding-bottom:1.5rem}
  body.page .after{margin-top:2rem}
  body.page .spine{margin-top:2rem}
  body.page .flow{padding-block:1.4rem}
}

/* 4. Product evidence on mobile: the device image belongs to the module, so
   it leads the block rather than being stranded underneath it. */
@media (max-width:860px){
  .prodfeature{gap:1.5rem}
  .prodfeature__media{order:-1;justify-content:flex-start;margin-bottom:.25rem}
  .prodfeature__media img{max-width:168px}
}
@media (max-width:640px){
  .prodfeature{gap:1.35rem}
  .prodfeature__media img{max-width:132px}
}

/* 2b. Mobile rhythm: section separation. The compact system stays, but the
   gap between sections was doing too little work at 390. */
@media (max-width:640px){
  /* scoped to the internal page shell: the approved homepage keeps its own
     mobile rhythm, which was signed off before these values existed */
  body.page{--pad:3.75rem;--pad-tight:3rem}
  body.page .grid3{margin-top:2rem}
  body.page .stack{margin-top:2rem}
}

/* =========================================================================
   INTERNAL PAGE SHELL — header positioning, structural fix.

   The internal header was position:fixed and taken out of flow, with the
   page opening pushed down by a hand-maintained body padding-top. Two values
   had to agree for the opening to clear the header, and any change to the
   header's height (logo size, wrapping, a longer nav) broke that agreement,
   which is what put the breadcrumb and H1 underneath the white band.

   The internal header now uses position:sticky. It stays in normal flow, so
   the page opening always begins after it and no offset has to be maintained
   anywhere. The compensating body padding is removed. The homepage header
   stays fixed, because it deliberately overlays a photographic hero.
   ========================================================================= */
.hdr--solid{position:sticky;top:0}
body.page{padding-top:0}

/* the mobile menu panel hangs off the solid header's own height */
@media (max-width:860px){
  .hdr--solid .nav{top:var(--hdr-h-solid);
    max-height:calc(100vh - var(--hdr-h-solid))}
}

/* spine row emphasis: used where one step in an engineered sequence carries
   the accountability. New modifier; no previously approved row uses it. */
.sp__row--key .sp__name{color:var(--red)}
.sp__row--key::before{background:var(--red);border-color:var(--red)}
.section--dark .sp__row--key .sp__name{color:var(--red-light)}
.section--dark .sp__row--key::before{background:var(--red-light);border-color:var(--red-light)}

/* =========================================================================
   EVIDENCE PLATE — typographic product evidence where no publication-safe
   interface capture exists.

   Batch B. Four pages carry product evidence for One Payroll and HawkEye,
   and neither product has an image that can be published. Rather than
   removing the evidence fold, showing an empty frame, or weakening the
   composition, the plate occupies the slot an interface capture would hold
   and carries the same weight typographically: a red datum rule, the product
   name set as a mark, what kind of system it is, and hairline fact rows.

   Append-only. No approved page uses .plate, so no approved page changes.
   ========================================================================= */
.plate{position:relative;background:var(--warm-2);border:1px solid var(--line);
  padding:clamp(1.6rem,3vw,2.5rem);min-width:0}
.plate__rule{display:block;width:44px;height:2px;background:var(--red);
  transform-origin:left center;transform:scaleX(0);
  transition:transform var(--dur-slow) var(--ease-line)}
.plate.in .plate__rule{transform:scaleX(1)}
.no-js .plate__rule{transform:none}
.plate__eb{margin:1.35rem 0 0;font-size:var(--t-cap);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.plate__name{display:block;margin:.9rem 0 0;font-weight:200;line-height:1;
  letter-spacing:-0.03em;color:var(--ink);
  font-size:clamp(2rem,1.25rem + 2.4vw,3.125rem)}
.plate__kind{margin:1rem 0 0;font-size:var(--t-small);color:var(--ink-3);line-height:1.6}
.plate__facts{margin:clamp(1.5rem,2.6vw,2rem) 0 0;border-top:1px solid var(--line-2)}
.plate__facts > div{padding:.8rem 0;border-bottom:1px solid var(--line)}
.plate__facts dt{font-size:var(--t-cap);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.plate__facts dd{margin:.4rem 0 0;font-size:var(--t-small);color:var(--ink-2);line-height:1.55}

/* wide variant: the anchor on a product page, where the mark and the record
   sit side by side rather than stacked */
.plate--wide{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(1.75rem,4vw,3.5rem);align-items:start;
  padding:clamp(1.85rem,4vw,3.25rem)}
.plate--wide .plate__facts{margin-top:0;border-top:0}
.plate--wide .plate__facts > div:first-child{padding-top:0}
.plate--wide .plate__name{font-size:clamp(2.25rem,1.3rem + 3vw,4rem)}

/* on dark surfaces */
.section--dark .plate{background:rgba(255,255,255,.045);border-color:var(--line-dark)}
.section--dark .plate__eb,.section--dark .plate__facts dt{color:#9d978c}
.section--dark .plate__name{color:#fff}
.section--dark .plate__kind{color:#B9B3A8}
.section--dark .plate__facts{border-top-color:var(--line-dark)}
.section--dark .plate__facts > div{border-bottom-color:var(--line-dark)}
.section--dark .plate__facts dd{color:#D8D3C9}

@media (max-width:860px){
  .plate--wide{grid-template-columns:1fr;gap:1.5rem}
  .plate--wide .plate__facts{margin-top:.25rem;border-top:1px solid var(--line-2)}
  .plate--wide .plate__facts > div:first-child{padding-top:.8rem}
  .section--dark .plate--wide .plate__facts{border-top-color:var(--line-dark)}
}
@media (prefers-reduced-motion:reduce){
  .plate__rule{transform:none}
}

/* the plate is wider than an image would be, and on the industry pages it
   carries the fold's own heading, so the pair is balanced rather than
   image-weighted */
.prodfeature--plate{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  align-items:start}
.prodfeature--plate .plate__name{margin:.9rem 0 0;font-weight:200;line-height:1;
  letter-spacing:-0.03em}
@media (max-width:860px){
  .prodfeature--plate{grid-template-columns:1fr}
  .prodfeature--plate > .plate{order:1}
  .prodfeature--plate > :not(.plate){order:2}
}

/* =========================================================================
   BATCH C — special-case pages.

   Three treatments that deliberately sit outside the page families: a legal
   document column, a contents rail for it, and an error mark. Append-only,
   and every selector requires a class no approved page carries.
   ========================================================================= */

/* ---------- legal document column ---------- */
.legal{max-width:68ch}
.legal > :first-child{margin-top:0}
.legal h2{color:var(--ink);margin:clamp(2.75rem,4.5vw,3.75rem) 0 1.35rem;padding-top:clamp(1.75rem,3vw,2.25rem);border-top:1px solid var(--line-2);scroll-margin-top:calc(var(--hdr-h-solid) + 1.5rem);}
.legal p{margin:0 0 1.35rem;font-size:1rem;line-height:1.8;color:var(--ink-2)}
.legal ul{margin:0 0 1.6rem;padding-left:1.4rem;list-style:disc}
.legal li{margin-bottom:.65rem;font-size:1rem;line-height:1.75;color:var(--ink-2)}
.legal li::marker{color:var(--ink-3)}
.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--red)}
.legal a:hover{color:var(--red)}
.legal a:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ---------- contents rail for the legal document ---------- */
.toc{max-width:68ch;margin-bottom:clamp(2.75rem,4.5vw,3.75rem);
  border-top:1px solid var(--line-2)}
.toc__lbl{margin:1.1rem 0 .35rem;font-size:var(--t-cap);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.toc ol{margin:0;padding:0;list-style:none}
.toc li{border-bottom:1px solid var(--line)}
.toc a{display:flex;align-items:baseline;gap:.9rem;padding:.8rem 0;
  font-size:var(--t-small);color:var(--ink-2);text-decoration:none;
  transition:color var(--dur) var(--ease)}
.toc a:hover{color:var(--red)}
.toc a:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.toc__n{flex:none;font-size:var(--t-cap);font-weight:700;letter-spacing:.12em;color:var(--ink-3)}

/* ---------- error mark ---------- */
.errmark{display:block;font-size:var(--t-mega);font-weight:200;line-height:.82;
  letter-spacing:-0.045em;color:rgba(255,255,255,.34)}
.err__links{display:flex;flex-wrap:wrap;gap:0;align-items:baseline;
  margin-top:clamp(2.5rem,4.5vw,3.5rem);padding-top:clamp(1.5rem,2.5vw,2rem);
  border-top:1px solid var(--line-dark)}
.err__links .tlink{padding-right:1.75rem;margin-right:1.75rem;
  border-right:1px solid rgba(255,255,255,.22)}
.err__links .tlink:last-child{border-right:0;margin-right:0;padding-right:0}
@media (max-width:520px){
  .err__links{gap:.9rem 0;flex-direction:column;align-items:flex-start}
  .err__links .tlink{border-right:0;margin-right:0;padding-right:0}
}

/* a short opening line beside a taller side column: align to the top so the
   heading is not left floating in the middle of the band */
.phero--top .phero__grid{align-items:start}

/* ---------- legal document with a sticky contents rail ---------- */
.legalwrap{display:grid;grid-template-columns:minmax(0,68ch) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5rem);align-items:start}
.legalwrap > .legal{grid-column:1;grid-row:1}
.legalwrap > .toc{grid-column:2;grid-row:1;margin-bottom:0;max-width:none;
  position:sticky;top:calc(var(--hdr-h-solid) + 2rem)}
@media (max-width:1024px){
  .legalwrap{grid-template-columns:1fr;gap:0}
  .legalwrap > .toc{grid-column:1;grid-row:1;position:static;
    margin-bottom:clamp(2.5rem,4.5vw,3.5rem)}
  .legalwrap > .legal{grid-column:1;grid-row:2}
}

/* a supporting note inside the dark page opening: the light-surface note
   colour fails contrast there. Only the open-roles hero uses it. */
.phero:not(.phero--light) .formnote{color:#B9B3A8}

/* =========================================================================
   INTEGRATION — production-only additions.

   The enquiry form's invalid state is driven by assets/js/site.js, which was
   not loaded in the review prototype. Nothing else is added here.
   ========================================================================= */
.field.is-invalid input,.field.is-invalid textarea{border-color:var(--red)}
.field.is-invalid label{color:var(--red)}

/* ============================================================================
   V2 DESIGN SYSTEM — IMPLEMENTATION PHASE 1

   Scoped under body.v2 so the sixteen pages not yet implemented keep the
   current system exactly. Shared shell, typography, colour, buttons, forms,
   navigation and footer are inherited; only page composition is new.

   Compositions are deliberately not interchangeable. Each is used where the
   content has that shape, and several appear on one page only.
   ========================================================================== */

body.v2{--measure:min(68ch,720px)}

/* ---- typographic scale, V2 baseline ---- */
body.v2{
  --v2-hero:clamp(2.625rem,1.2rem + 4.4vw,4rem);
  --v2-h1:clamp(2.375rem,1.3rem + 3.4vw,3.25rem);
  --v2-h2:clamp(1.875rem,1.2rem + 2.2vw,2.5rem);
  --v2-h3:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --v2-statement:clamp(1.5rem,1rem + 1.9vw,2.375rem);
}
body.v2 main h2{margin:0;}
body.v2 main h3{margin:0;}

/* ---- 1. OPENING: editorial hero ------------------------------------------ */
.v2open{padding:calc(var(--hdr-h-solid) + clamp(3rem,6vw,5.5rem)) 0 clamp(3rem,6vw,5rem);
  background:var(--dark);color:#fff;position:relative;overflow:hidden}
.v2open--light{background:var(--paper);color:var(--ink)}
.v2open__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:end}
.v2open__h{margin:0;}

.v2open__h b{font-weight:300;display:block}
.v2open__lede{font-size:var(--t-lead);line-height:1.62;margin:0 0 1.5rem;color:rgba(255,255,255,.82);
  max-width:46ch}
.v2open--light .v2open__lede{color:var(--ink-2)}
.v2open__lede + .v2open__lede{margin-top:-.75rem}
.v2open__rule{width:56px;height:2px;background:var(--red);margin:0 0 1.75rem}

/* ---- 2. STATEMENT: one idea, nothing else in the fold -------------------- */
.v2state{max-width:22ch;font-size:var(--v2-statement);font-weight:300;line-height:1.16;
  letter-spacing:-.022em;margin:0}
.v2state--wide{max-width:30ch}
.v2state__body{max-width:var(--measure);margin:clamp(1.75rem,3vw,2.5rem) 0 0}
.v2state__body p{margin:0 0 1.1rem;font-size:var(--t-lead);line-height:1.68;color:var(--ink-2)}
.v2state__body p:last-child{margin-bottom:0}
.section--dark .v2state__body p{color:rgba(255,255,255,.8)}

/* ---- 3. NARRATIVE: single narrow column, prose carries the fold ---------- */
.v2narr{max-width:var(--measure)}
.v2narr p{margin:0 0 1.25rem;font-size:var(--t-lead);line-height:1.7;color:var(--ink-2)}
.v2narr p:last-child{margin-bottom:0}
.v2narr p.v2narr__lift{font-size:var(--v2-statement);font-weight:300;line-height:1.2;
  letter-spacing:-.02em;color:var(--ink);max-width:24ch;margin-top:2rem}

/* ---- 4. SPLIT: asymmetric editorial pair --------------------------------- */
.v2split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);align-items:start}
.v2split--lead{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.v2split__aside p{margin:0 0 1.1rem;font-size:var(--t-lead);line-height:1.68;color:var(--ink-2)}
.v2split__aside p:last-child{margin-bottom:0}

/* ---- 5. LEDGER: indexed argument, Healthcare only ------------------------ */
/* Deliberately not the hairline row component used on How We Work. The index
   sits in its own rail and the entries step down the page. */
.v2ledger{margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;gap:clamp(1.75rem,3.5vw,2.75rem)}
.v2ledger__e{display:grid;grid-template-columns:3.25rem minmax(0,1fr);gap:clamp(1rem,2.5vw,2rem);
  align-items:start}
.v2ledger__n{font-size:var(--t-small);font-weight:600;color:var(--red);letter-spacing:.06em;
  padding-top:.45rem;font-variant-numeric:tabular-nums}
.v2ledger__h{margin:0;}
.v2ledger__p{margin:.6rem 0 0;max-width:56ch;color:var(--ink-2);line-height:1.7}
.v2ledger__e:nth-child(even){padding-left:clamp(0rem,4vw,3.5rem)}

/* ---- 6. TENETS: offset principles, Careers only -------------------------- */
/* No rules, no numbers. Each principle steps right, so the group reads as a
   held position rather than a list. */
.v2tenets{margin-top:clamp(2.25rem,4.5vw,3.25rem);display:grid;gap:clamp(1.5rem,3vw,2.25rem);
  max-width:60rem}
.v2tenet__h{margin:0;color:var(--ink);}
.v2tenet__p{margin:.5rem 0 0;max-width:54ch;color:var(--ink-2);line-height:1.7}
.v2tenet:nth-child(2){padding-left:clamp(0rem,3vw,2.5rem)}
.v2tenet:nth-child(3){padding-left:clamp(0rem,6vw,5rem)}
.v2tenet:nth-child(4){padding-left:clamp(0rem,9vw,7.5rem)}

/* ---- 7. MODEL: the five-stage ONE Line, How We Work only ----------------- */
.v2model{margin-top:clamp(2.75rem,5vw,4rem);position:relative}
.v2model__track{position:relative;padding-top:2.25rem}
.v2model__rule{position:absolute;top:0;left:0;right:0;height:2px;background:var(--line-2)}
.v2model__rule::after{content:"";position:absolute;inset:0;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform 1.5s var(--ease-line)}
.v2model.in .v2model__rule::after{transform:scaleX(1)}
.v2model__steps{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(1rem,2vw,1.75rem)}
.v2model__s{position:relative}
.v2model__dot{position:absolute;top:-2.3rem;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--paper);border:2px solid var(--line-2);
  transform:translateY(-50%) scale(.6);opacity:0;
  transition:opacity .45s var(--ease),transform .45s var(--ease),background .45s var(--ease),border-color .45s var(--ease)}
.v2model.in .v2model__dot{opacity:1;transform:translateY(-50%) scale(1);
  background:var(--red);border-color:var(--red)}
.v2model.in .v2model__s:nth-child(1) .v2model__dot{transition-delay:.15s}
.v2model.in .v2model__s:nth-child(2) .v2model__dot{transition-delay:.45s}
.v2model.in .v2model__s:nth-child(3) .v2model__dot{transition-delay:.75s}
.v2model.in .v2model__s:nth-child(4) .v2model__dot{transition-delay:1.05s}
.v2model.in .v2model__s:nth-child(5) .v2model__dot{transition-delay:1.35s}
.v2model__n{display:block;font-size:var(--t-cap);font-weight:600;letter-spacing:.1em;
  color:var(--ink-3);font-variant-numeric:tabular-nums}
.v2model__name{display:block;font-size:var(--v2-h3);font-weight:400;letter-spacing:-.012em;
  margin:.35rem 0 .4rem}
.v2model__p{display:block;font-size:var(--t-small);line-height:1.6;color:var(--ink-2)}
.v2model__note{margin:clamp(2rem,3.5vw,2.75rem) 0 0;max-width:46ch;font-size:var(--t-lead);
  color:var(--ink-2)}

/* ---- 8. CHAIN: relationship sequence, AI & Technology §3 ----------------- */
.v2chain{margin-top:clamp(2.25rem,4.5vw,3.25rem);display:flex;flex-wrap:wrap;align-items:center;
  gap:.75rem clamp(.75rem,1.6vw,1.35rem)}
.v2chain__i{font-size:clamp(1rem,.95rem + .4vw,1.1875rem);font-weight:400;letter-spacing:-.01em;
  color:#fff;padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.28)}
.v2chain__i--key{color:var(--red-light);border-bottom-color:var(--red-light)}
.v2chain__a{width:clamp(1.25rem,2.5vw,2.25rem);height:1px;background:rgba(255,255,255,.3);
  position:relative;flex:0 0 auto}
.v2chain__a::after{content:"";position:absolute;right:0;top:50%;width:5px;height:5px;
  border-top:1px solid rgba(255,255,255,.55);border-right:1px solid rgba(255,255,255,.55);
  transform:translateY(-50%) rotate(45deg)}

/* ---- 9. PATH: linear progression, used on two pages with different surfaces */
.v2path{margin-top:clamp(2rem,4vw,3rem);display:flex;flex-wrap:wrap;align-items:center;
  gap:.6rem clamp(.6rem,1.4vw,1.1rem)}
.v2path__i{font-size:var(--t-small);font-weight:600;letter-spacing:.01em;color:var(--ink-2);
  padding:.45rem .9rem;background:var(--warm-2);border-radius:2px}
.v2path--dark .v2path__i{background:rgba(255,255,255,.09);color:rgba(255,255,255,.88)}
.v2path__i--end{background:var(--red);color:#fff}
.v2path__s{width:1.5rem;height:1px;background:var(--line-2);flex:0 0 auto}
.v2path--dark .v2path__s{background:rgba(255,255,255,.28)}

/* ---- 10. FIELD: typographic presence, Home §7 and discipline lists ------- */
.v2field{margin-top:clamp(2rem,4vw,3rem);display:flex;flex-wrap:wrap;
  gap:.5rem clamp(1.25rem,3vw,2.75rem)}
.v2field__i{font-size:clamp(1.125rem,.95rem + .9vw,1.75rem);font-weight:300;letter-spacing:-.018em;
  color:var(--ink)}
.section--dark .v2field__i{color:rgba(255,255,255,.92)}
.v2field--quiet .v2field__i{font-size:var(--t-body);font-weight:400;color:var(--ink-2);
  padding-bottom:.4rem;border-bottom:1px solid var(--line)}

/* ---- 11. EVIDENCE: statement beside a genuine product visual ------------- */
.v2ev{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.v2ev__media{margin:0}
.v2ev__media img{display:block;width:100%;height:auto;max-width:330px;margin-left:auto}
.v2ev__cap{margin:1rem 0 0;font-size:var(--t-cap);color:var(--ink-3);text-align:right;
  letter-spacing:.02em}

/* ---- 12. CAPABILITY GROUPS: verified inventory, product pages ------------ */
.v2caps{margin-top:clamp(2.25rem,4.5vw,3.25rem);display:grid;gap:clamp(1.75rem,3vw,2.5rem)}
.v2caps__g{border-top:1px solid var(--line);padding-top:1.35rem;
  display:grid;grid-template-columns:minmax(0,.32fr) minmax(0,.68fr);gap:clamp(1rem,2.5vw,2.5rem)}
.v2caps__n{font-size:var(--t-cap);font-weight:600;letter-spacing:.1em;color:var(--red);
  font-variant-numeric:tabular-nums}
.v2caps__h{margin:.3rem 0 0;}
.v2caps__l{margin:0;padding:0;list-style:none;columns:2;column-gap:clamp(1.25rem,3vw,2.5rem)}
.v2caps__l li{break-inside:avoid;margin:0 0 .5rem;padding-left:.9rem;position:relative;
  font-size:var(--t-small);line-height:1.6;color:var(--ink-2)}
.v2caps__l li::before{content:"";position:absolute;left:0;top:.62em;width:4px;height:1px;
  background:var(--red)}
.v2caps__note{margin:0 0 clamp(1.5rem,3vw,2rem);font-size:var(--t-small);color:var(--ink-3)}

/* ---- 13. QUIET CLOSE ----------------------------------------------------- */
.v2close{padding:clamp(4rem,7vw,6.5rem) 0;background:var(--warm);border-top:1px solid var(--line)}
.v2close__h{margin:0;max-width:25ch;}
.v2close__p{margin:1.25rem 0 0;max-width:var(--measure);font-size:var(--t-lead);color:var(--ink-2)}
.v2close__cta{margin-top:clamp(1.75rem,3vw,2.5rem)}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width:1040px){
  .v2open__in{grid-template-columns:1fr;gap:2rem;align-items:start}
  .v2split,.v2split--lead{grid-template-columns:1fr;gap:1.75rem}
  .v2ev{grid-template-columns:1fr;gap:2.25rem}
  .v2ev__media img{margin:0;max-width:280px}
  .v2ev__cap{text-align:left}
  .v2model__steps{grid-template-columns:repeat(2,1fr);gap:2rem 1.5rem}
  .v2model__rule{display:none}
  .v2model__dot{position:static;transform:none!important;opacity:1!important;margin-bottom:.6rem;
    background:var(--red)!important;border-color:var(--red)!important}
  .v2caps__g{grid-template-columns:1fr;gap:1rem}
}
@media (max-width:640px){
  body.v2{--measure:100%}
  .v2state,.v2state--wide{max-width:none}
  .v2model__steps{grid-template-columns:1fr;gap:1.65rem}
  .v2caps__l{columns:1}
  .v2ledger__e{grid-template-columns:2.25rem minmax(0,1fr);gap:.9rem}
  .v2ledger__e:nth-child(even){padding-left:0}
  .v2tenet:nth-child(2),.v2tenet:nth-child(3),.v2tenet:nth-child(4){padding-left:0}
  .v2field{gap:.4rem 1.25rem}
  .v2chain{gap:.5rem .75rem}
  .v2chain__a{width:1rem}
}
.no-js .v2model__rule::after{transform:none}
.no-js .v2model__dot{opacity:1;transform:translateY(-50%) scale(1);background:var(--red);
  border-color:var(--red)}
@media (prefers-reduced-motion:reduce){
  .v2model__rule::after{transform:none}
  .v2model__dot{opacity:1;transform:translateY(-50%) scale(1);background:var(--red);
    border-color:var(--red)}
}

/* V2 homepage hero carries the locked two-paragraph definition. The second
   paragraph is set slightly quieter so the first still reads as the
   definition of the company. */
body.v2 .hero__lede{max-width:34rem}
body.v2 .hero__lede--2{margin-top:.85rem;color:rgba(255,255,255,.78);font-size:var(--t-body);
  line-height:1.62}
@media (max-width:640px){
  body.v2 .hero__lede--2{font-size:.9375rem}
}

/* Dark-surface corrections for the V2 layer. The eyebrow and inline text link
   are designed for light surfaces; on the dark opening and on dark sections
   they take the light treatment, matching the existing dark page hero. */
.v2open:not(.v2open--light) .eyebrow{color:var(--red-light)}
.v2open:not(.v2open--light) .eyebrow::before{background:var(--red-light)}
body.v2 .section--dark .eyebrow{color:var(--red-light)}
body.v2 .section--dark .eyebrow::before{background:var(--red-light)}
body.v2 .section--dark .tlink{color:#fff}
body.v2 .section--dark .tlink .ar::after{border-color:#fff}

/* All V2 prose containers on dark surfaces. Without this the narrative and
   split columns inherit the light-surface ink colour. */
body.v2 .section--dark .v2narr p,
body.v2 .section--dark .v2split__aside p,
body.v2 .section--dark .v2state__body p,
body.v2 .section--dark .v2ledger__p,
body.v2 .section--dark .v2tenet__p,
body.v2 .section--dark .v2model__p,
body.v2 .section--dark .v2caps__l li,
body.v2 .section--dark .v2model__note{color:rgba(255,255,255,.82)}
body.v2 .section--dark .v2narr__lift,
body.v2 .section--dark h2,
body.v2 .section--dark h3,
body.v2 .section--dark .v2state{color:#fff}
body.v2 .section--dark .v2field--quiet .v2field__i{color:rgba(255,255,255,.82);
  border-bottom-color:rgba(255,255,255,.22)}
body.v2 .section--dark .v2caps__note{color:rgba(255,255,255,.7)}

/* The light V2 opening needs the light-surface breadcrumb treatment, matching
   the existing .phero--light rules. */
.v2open--light .crumb li{color:var(--ink-3)}
.v2open--light .crumb a{color:var(--ink-2)}
.v2open--light .crumb a:hover{color:var(--red)}
.v2open .crumb{margin-bottom:clamp(1.75rem,3vw,2.5rem)}

/* ---- approved canonical V2 footer -----------------------------------------
   Four link columns beside the brand block, and a copyright-only bottom bar
   because Privacy now has its own Legal column. Same visual language as
   before: hairline rules, quiet type, no new components. */
.footer__top--v2{grid-template-columns:1.6fr .95fr .8fr .62fr .5fr}
.footer__bottom--v2{grid-template-columns:1fr}
.footer__bottom--v2 .footer__copy{grid-column:1;text-align:left}
@media (max-width:1040px){
  .footer__top--v2{grid-template-columns:1fr 1fr 1fr;gap:2rem}
  .footer__top--v2 .footer__brand{grid-column:1 / -1}
}
@media (max-width:640px){
  .footer__top--v2{grid-template-columns:1fr;gap:0}
  .footer__top--v2 .footer__brand{grid-column:1}
}

/* ============================================================================
   V2.1 — HOME + HOW WE WORK VISUAL REDESIGN

   Scoped under body.v21. The V2 layer stays in place for the six pages not in
   this redesign. Nothing here is a card grid, and no composition is reused
   across both pages in the same form.

   Media reality this design answers to: three genuine safe assets exist (the
   ocean hero, the OP Care splash, the logo). There is no safe workplace,
   people, leadership or delivery photography, and no safe UI for One Payroll
   or HawkEye. Sections that would have carried photography carry engineered
   composition and the ONE Line instead.
   ========================================================================== */

body.v21{
  --v21-display:clamp(3rem,1.1rem + 6.6vw,5.25rem);
  --v21-h1:clamp(2.5rem,1.2rem + 4.2vw,4rem);
  --v21-h2:clamp(2rem,1.2rem + 2.8vw,3.25rem);
  --v21-lede:clamp(1.0625rem,1rem + .45vw,1.3125rem);
  --v21-rule:rgba(21,20,18,.10);
}

/* ---- section identifier: short ONE Line cue + small red label ------------ */
.eb{display:flex;align-items:center;gap:.85rem;margin:0 0 1.5rem;text-transform:uppercase;color:var(--red);}
.eb::before{content:"";width:28px;height:2px;background:var(--red);flex:none;
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-line)}
.reveal.in .eb::before,.eb.in::before{transform:scaleX(1)}
.section--dark .eb,.v21hero .eb{color:var(--red-light)}
.section--dark .eb::before,.v21hero .eb::before{background:var(--red-light)}
.no-js .eb::before{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.eb::before{transform:scaleX(1)}}

/* ---- 1. CINEMATIC HERO --------------------------------------------------- */
.v21hero{position:relative;min-height:min(92vh,880px);display:flex;align-items:flex-end;
  background:var(--hero-base);overflow:hidden;isolation:isolate}
.v21hero__media{position:absolute;inset:0;z-index:0}
.v21hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.v21hero__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,13,17,.62) 0%,rgba(10,13,17,.30) 34%,
    rgba(10,13,17,.55) 72%,rgba(10,13,17,.86) 100%)}
.v21hero__in{position:relative;z-index:2;width:100%;
  padding-block:clamp(7rem,14vh,10rem) clamp(3.5rem,7vh,5.5rem)}
.v21hero__h{color:#fff;margin:0;max-width:20ch;text-shadow:0 2px 40px rgba(0,0,0,.35);}
.v21hero__h span{display:block}
.v21hero__foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.5rem,4vw,4rem);
  align-items:end;margin-top:clamp(2.25rem,5vh,3.5rem)}
.v21hero__def{margin:0;max-width:50ch;color:rgba(255,255,255,.88);
  font-size:var(--v21-lede);line-height:1.55;text-shadow:0 1px 18px rgba(0,0,0,.45)}
.v21hero__rule{width:52px;height:2px;background:var(--red);margin-bottom:1.75rem}
.v21hero .ctagroup{margin:0;flex-wrap:nowrap}

/* ---- 2. WHY ONE BCG: copy and convergence as one composition ------------- */
.v21why{position:relative;background:var(--warm);overflow:hidden}
.v21why__grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(2rem,4vw,4rem);align-items:center}
.v21why__h{margin:0;max-width:17.5ch;}
.v21why__accum{margin:clamp(1.5rem,3vw,2.25rem) 0 0;max-width:40ch}
.v21why__accum p{margin:0 0 .85rem;color:var(--ink-3);font-size:.9375rem;line-height:1.6}
.v21why__accum p:last-child{margin-bottom:0}
.v21why__resolve{margin:clamp(1.75rem,3.5vw,2.5rem) 0 0;max-width:26ch;
  font-size:clamp(1.25rem,1.05rem + .8vw,1.625rem);font-weight:400;line-height:1.24;
  letter-spacing:-.018em;color:var(--ink)}
.v21why__after{margin:1rem 0 0;max-width:38ch;color:var(--ink-2);line-height:1.68}
.v21why__vis{position:relative}

/* ---- 3. FAN: one problem drawing on several capabilities ---------------- */
.v21fan{margin-top:clamp(2.5rem,5vw,3.75rem)}
.v21fan svg{width:100%;height:auto;display:block;overflow:visible}
.v21fan .fan__line{stroke:rgba(255,255,255,.26);stroke-width:1.25;fill:none}
.v21fan .fan__line--key{stroke:var(--red-light);stroke-width:2}
.v21fan [data-draw]{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.v21fan.in [data-draw]{stroke-dashoffset:0;
  transition:stroke-dashoffset 1s var(--ease-line)}
.v21fan.in .fan__line:nth-of-type(1){transition-delay:.1s}
.v21fan.in .fan__line:nth-of-type(2){transition-delay:.2s}
.v21fan.in .fan__line:nth-of-type(3){transition-delay:.3s}
.v21fan.in .fan__line:nth-of-type(4){transition-delay:.4s}
.v21fan.in .fan__line:nth-of-type(5){transition-delay:.5s}
.v21fan__labels{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;
  margin-top:1.1rem}
.v21fan__l{font-size:.8125rem;line-height:1.35;color:rgba(255,255,255,.9);
  text-align:center;opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.v21fan.in .v21fan__l{opacity:1;transform:none}
.v21fan.in .v21fan__l:nth-child(1){transition-delay:.55s}
.v21fan.in .v21fan__l:nth-child(2){transition-delay:.65s}
.v21fan.in .v21fan__l:nth-child(3){transition-delay:.75s}
.v21fan.in .v21fan__l:nth-child(4){transition-delay:.85s}
.v21fan.in .v21fan__l:nth-child(5){transition-delay:.95s}
.v21fan__ends{display:flex;justify-content:space-between;margin-bottom:.9rem;
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.55)}

/* ---- 4. CONTINUITY: one line through the work --------------------------- */
.v21cont{margin-top:clamp(2.5rem,5vw,3.5rem);position:relative}
.v21cont__track{position:relative;height:2px;background:var(--v21-rule);margin-bottom:2.5rem}
.section--dark .v21cont__track{background:rgba(255,255,255,.18)}
.v21cont__fill{position:absolute;inset:0;background:var(--red);transform:scaleX(0);
  transform-origin:left;transition:transform 1.6s var(--ease-line)}
.v21cont.in .v21cont__fill{transform:scaleX(1)}
.v21cont__steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.5vw,2rem)}
.v21cont__s{position:relative;padding-top:.25rem}
.v21cont__s::before{content:"";position:absolute;top:-2.75rem;left:0;width:9px;height:9px;
  border-radius:50%;background:var(--red);transform:translateY(-50%) scale(0);
  transition:transform .4s var(--ease)}
.v21cont.in .v21cont__s::before{transform:translateY(-50%) scale(1)}
.v21cont.in .v21cont__s:nth-child(1)::before{transition-delay:.2s}
.v21cont.in .v21cont__s:nth-child(2)::before{transition-delay:.6s}
.v21cont.in .v21cont__s:nth-child(3)::before{transition-delay:1s}
.v21cont.in .v21cont__s:nth-child(4)::before{transition-delay:1.4s}
.v21cont__n{display:block;font-size:.9375rem;font-weight:600;letter-spacing:-.01em;
  color:var(--ink)}
.section--dark .v21cont__n{color:#fff}

/* ---- 5. PRODUCT SYSTEM: three products, equal identity ------------------ */
.v21prod{margin-top:clamp(2.5rem,5vw,3.75rem);
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--v21-rule)}
.v21prod__p{padding:clamp(1.75rem,3.5vw,2.75rem) clamp(1.25rem,2.5vw,2rem)
  clamp(1.75rem,3.5vw,2.5rem) 0;position:relative;
  border-right:1px solid var(--v21-rule)}
.v21prod__p:last-child{border-right:0}
.v21prod__p::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease-line)}
.v21prod.in .v21prod__p::before{transform:scaleX(1)}
.v21prod.in .v21prod__p:nth-child(1)::before{transition-delay:.1s}
.v21prod.in .v21prod__p:nth-child(2)::before{transition-delay:.35s}
.v21prod.in .v21prod__p:nth-child(3)::before{transition-delay:.6s}
.v21prod__n{font-size:.75rem;font-weight:600;letter-spacing:.14em;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.v21prod__name{display:block;font-size:clamp(1.375rem,1.1rem + 1.1vw,1.875rem);
  font-weight:400;letter-spacing:-.02em;margin:.85rem 0 .5rem;color:var(--ink)}
.v21prod__env{margin:0;font-size:.875rem;color:var(--ink-3);line-height:1.5}

/* ---- 6. ESTABLISHED: since 2000 and presence --------------------------- */
.v21est{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:end}
.v21est__year{font-size:clamp(4rem,2rem + 8vw,8.5rem);font-weight:200;line-height:.88;
  letter-spacing:-.05em;color:var(--ink);margin:0}
.v21est__year small{display:block;font-size:.75rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.9rem}
.v21est__p{margin:0 0 1.1rem;font-size:var(--v21-lede);line-height:1.62;color:var(--ink-2);
  max-width:44ch}
.v21pres{margin-top:clamp(1.75rem,3vw,2.5rem);display:grid;
  grid-template-columns:repeat(5,1fr);border-top:1px solid var(--v21-rule)}
.v21pres__i{padding:.95rem .5rem 0 0;font-size:.875rem;color:var(--ink-2);
  border-right:1px solid var(--v21-rule);padding-right:.75rem}
.v21pres__i:last-child{border-right:0}

/* ---- 7. CLOSING FOLD with presence ------------------------------------- */
.v21close{position:relative;background:var(--dark);color:#fff;
  padding-block:clamp(5rem,11vh,8rem);overflow:hidden}
.v21close__h{margin:0;max-width:20ch;color:#fff;}
.v21close__p{margin:clamp(1.5rem,3vw,2rem) 0 0;max-width:52ch;
  font-size:var(--v21-lede);line-height:1.6;color:rgba(255,255,255,.8)}
.v21close__cta{margin-top:clamp(2.25rem,4vw,3rem)}
.v21close__line{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease-line)}
.v21close.in .v21close__line{transform:scaleX(1)}

/* ---- 8. EXECUTION MODEL: the page's strongest moment -------------------- */
.v21model{margin-top:clamp(2.75rem,5vw,4rem)}
.v21model__stage{display:grid;grid-template-columns:5.5rem minmax(0,1fr);
  gap:clamp(1.25rem,3vw,2.5rem);position:relative;
  padding:clamp(1.5rem,3vw,2.25rem) 0}
.v21model__stage + .v21model__stage{border-top:1px solid var(--v21-rule)}
.v21model__rail{position:absolute;left:1.55rem;top:0;bottom:0;width:2px;
  background:var(--v21-rule)}
.v21model__stage:first-child .v21model__rail{top:50%}
.v21model__stage:last-child .v21model__rail{bottom:50%}
.v21model__rail::after{content:"";position:absolute;inset:0;background:var(--red);
  transform:scaleY(0);transform-origin:top;transition:transform .55s var(--ease-line)}
.v21model.in .v21model__stage:nth-child(1) .v21model__rail::after{transition-delay:.15s;transform:scaleY(1)}
.v21model.in .v21model__stage:nth-child(2) .v21model__rail::after{transition-delay:.55s;transform:scaleY(1)}
.v21model.in .v21model__stage:nth-child(3) .v21model__rail::after{transition-delay:.95s;transform:scaleY(1)}
.v21model.in .v21model__stage:nth-child(4) .v21model__rail::after{transition-delay:1.35s;transform:scaleY(1)}
.v21model.in .v21model__stage:nth-child(5) .v21model__rail::after{transition-delay:1.75s;transform:scaleY(1)}
.v21model__mark{position:relative;z-index:1;width:3.1rem;height:3.1rem;border-radius:50%;
  background:var(--paper);border:2px solid var(--v21-rule);display:flex;align-items:center;
  justify-content:center;font-size:.8125rem;font-weight:600;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
  transition:border-color .45s var(--ease),color .45s var(--ease),background .45s var(--ease)}
.v21model.in .v21model__stage:nth-child(1) .v21model__mark{transition-delay:.35s}
.v21model.in .v21model__stage:nth-child(2) .v21model__mark{transition-delay:.75s}
.v21model.in .v21model__stage:nth-child(3) .v21model__mark{transition-delay:1.15s}
.v21model.in .v21model__stage:nth-child(4) .v21model__mark{transition-delay:1.55s}
.v21model.in .v21model__stage:nth-child(5) .v21model__mark{transition-delay:1.95s}
.v21model.in .v21model__mark{border-color:var(--red);color:var(--red);background:var(--paper)}
.v21model__name{font-size:clamp(1.75rem,1.2rem + 2vw,2.75rem);font-weight:300;
  letter-spacing:-.028em;line-height:1.05;margin:0;color:var(--ink)}
.v21model__p{margin:.6rem 0 0;font-size:var(--v21-lede);color:var(--ink-2);line-height:1.5}
.v21model__note{margin:clamp(2rem,3.5vw,2.75rem) 0 0;max-width:40ch;
  font-size:var(--v21-lede);color:var(--ink-2)}

/* ---- 9. PRINCIPLES held on one anchored line ---------------------------- */
.v21pr{margin-top:clamp(2.5rem,5vw,3.5rem);position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.5vw,2rem)}
.v21pr::before{content:"";position:absolute;top:.45rem;left:0;right:0;height:2px;
  background:rgba(255,255,255,.18)}
.v21pr__anchor{position:absolute;top:.45rem;left:0;height:2px;background:var(--red);
  width:100%;transform:scaleX(0);transform-origin:left;
  transition:transform 1.5s var(--ease-line)}
.v21pr.in .v21pr__anchor{transform:scaleX(1)}
.v21pr__i{position:relative;padding-top:2.2rem}
.v21pr__i::before{content:"";position:absolute;top:.45rem;left:0;width:2px;height:1.3rem;
  background:var(--red);transform:scaleY(0);transform-origin:top;
  transition:transform .4s var(--ease)}
.v21pr.in .v21pr__i::before{transform:scaleY(1)}
.v21pr.in .v21pr__i:nth-child(2)::before{transition-delay:.35s}
.v21pr.in .v21pr__i:nth-child(3)::before{transition-delay:.7s}
.v21pr.in .v21pr__i:nth-child(4)::before{transition-delay:1.05s}
.v21pr.in .v21pr__i:nth-child(5)::before{transition-delay:1.4s}
.v21pr__h{margin:0;color:#fff;}
.v21pr__p{margin:.55rem 0 0;font-size:.9375rem;line-height:1.6;color:rgba(255,255,255,.8)}

/* ---- 10. TWO SIDES meeting --------------------------------------------- */
.v21two{margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(1.25rem,3vw,2.5rem);
  align-items:stretch}
.v21two__s{padding:clamp(1.5rem,3vw,2.25rem) 0}
.v21two__s--b{text-align:right}
.v21two__k{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);margin:0 0 .9rem}
.v21two__p{margin:0;font-size:var(--v21-lede);line-height:1.6;color:var(--ink-2)}
.v21two__join{width:2px;background:var(--v21-rule);position:relative}
.v21two__join::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;
  border-radius:50%;background:var(--red);transform:translate(-50%,-50%) scale(0);
  transition:transform .5s var(--ease) .5s}
.v21two.in .v21two__join::after{transform:translate(-50%,-50%) scale(1)}
.v21two__out{margin:clamp(1.75rem,3vw,2.5rem) auto 0;max-width:46ch;text-align:center;
  font-size:clamp(1.125rem,1rem + .7vw,1.4375rem);font-weight:400;line-height:1.3;
  letter-spacing:-.015em;color:var(--ink)}

/* ---- 11. INTO THE ENVIRONMENT ------------------------------------------ */
.v21env{margin-top:clamp(2.5rem,5vw,3.5rem);position:relative;
  border:1px solid var(--v21-rule);padding:clamp(1.75rem,4vw,3rem)}
.v21env__ring{display:flex;flex-wrap:wrap;gap:.5rem clamp(.75rem,2vw,1.5rem);
  margin-bottom:clamp(1.5rem,3vw,2rem)}
.v21env__i{font-size:.875rem;color:var(--ink-3);padding:.35rem 0}
.v21env__sys{display:inline-flex;align-items:center;gap:.9rem;
  font-size:clamp(1.125rem,1rem + .7vw,1.4375rem);font-weight:400;letter-spacing:-.015em;
  color:var(--ink)}
.v21env__sys::before{content:"";width:34px;height:2px;background:var(--red);flex:none;
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-line) .2s}
.v21env.in .v21env__sys::before{transform:scaleX(1)}

/* ---- 12. LOOP back to the case ----------------------------------------- */
.v21loop{margin-top:clamp(2.5rem,5vw,3.5rem)}
.v21loop svg{width:100%;height:auto;display:block;overflow:visible}
.v21loop .lp{stroke:var(--line-2);stroke-width:1.5;fill:none}
.v21loop .lp--key{stroke:var(--red);stroke-width:2}
.v21loop [data-draw]{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.v21loop.in [data-draw]{stroke-dashoffset:0;transition:stroke-dashoffset 1.3s var(--ease-line) .15s}
.v21loop__t{font-size:.8125rem;fill:var(--ink-2)}
.v21loop__t--key{fill:var(--red);font-weight:600}

/* ---- 13. ENTRY POINTS joining one approach ----------------------------- */
.v21entry{margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.75rem,4vw,3.5rem);
  align-items:center}
.v21entry__list{margin:0;padding:0;list-style:none}
.v21entry__list li{position:relative;padding:.85rem 0 .85rem 2.25rem;
  border-bottom:1px solid var(--v21-rule);color:var(--ink-2);line-height:1.55}
.v21entry__list li:last-child{border-bottom:0}
.v21entry__list li::before{content:"";position:absolute;left:0;top:1.35rem;width:14px;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease)}
.v21entry.in li::before{transform:scaleX(1)}
.v21entry.in li:nth-child(2)::before{transition-delay:.12s}
.v21entry.in li:nth-child(3)::before{transition-delay:.24s}
.v21entry.in li:nth-child(4)::before{transition-delay:.36s}
.v21entry__out{font-size:clamp(1.25rem,1.05rem + .9vw,1.75rem);font-weight:300;
  line-height:1.2;letter-spacing:-.02em;color:var(--ink);margin:0;max-width:22ch}

/* ---- responsive --------------------------------------------------------- */
@media (max-width:1040px){
  .v21why__grid,.v21est,.v21entry{grid-template-columns:1fr;gap:2.25rem;align-items:start}
  .v21hero__foot{grid-template-columns:1fr;gap:1.75rem;align-items:start}
  .v21fan__labels{grid-template-columns:repeat(5,1fr);gap:.5rem}
  .v21fan__l{font-size:.6875rem}
  .v21cont__steps{grid-template-columns:repeat(2,1fr);gap:1.75rem}
  .v21cont__track{margin-bottom:2rem}
  .v21cont__s::before{display:none}
  .v21prod{grid-template-columns:1fr;border-top:0}
  .v21prod__p{border-right:0;border-top:1px solid var(--v21-rule);padding-right:0}
  .v21pr{grid-template-columns:repeat(2,1fr);gap:1.75rem}
  .v21two{grid-template-columns:1fr;gap:1.5rem}
  .v21two__s--b{text-align:left}
  .v21two__join{width:100%;height:2px}
  .v21pres{grid-template-columns:repeat(2,1fr)}
  .v21pres__i{border-right:0;border-bottom:1px solid var(--v21-rule);padding-bottom:.85rem}
}
@media (max-width:640px){
  .v21hero{min-height:min(88vh,720px)}
  .v21hero__h{max-width:none}
  .v21hero .ctagroup{flex-wrap:wrap}
  .v21fan__labels{grid-template-columns:1fr 1fr;gap:.6rem;text-align:left}
  .v21fan__l{text-align:left}
  .v21cont__steps{grid-template-columns:1fr;gap:1.25rem}
  .v21model__stage{grid-template-columns:2.6rem minmax(0,1fr);gap:1rem}
  .v21model__rail{left:1.2rem}
  .v21model__mark{width:2.4rem;height:2.4rem;font-size:.6875rem}
  .v21pr{grid-template-columns:1fr;gap:1.5rem}
  .v21pr::before,.v21pr__anchor{display:none}
  .v21pr__i{padding-top:0;padding-left:1.1rem}
  .v21pr__i::before{top:.35rem;left:0;width:2px;height:100%;max-height:2.5rem}
  .v21pres{grid-template-columns:1fr}
  .v21est__year{font-size:clamp(3.5rem,2rem + 8vw,5rem)}
}
.no-js .v21cont__fill,.no-js .v21pr__anchor,.no-js .v21close__line{transform:scaleX(1)}
.no-js .v21fan [data-draw],.no-js .v21loop [data-draw]{stroke-dashoffset:0}
.no-js .v21fan__l{opacity:1;transform:none}
.no-js .v21model__rail::after{transform:scaleY(1)}
.no-js .v21model__mark{border-color:var(--red);color:var(--red)}
@media (prefers-reduced-motion:reduce){
  .v21cont__fill,.v21pr__anchor,.v21close__line{transform:scaleX(1)}
  .v21fan [data-draw],.v21loop [data-draw]{stroke-dashoffset:0}
  .v21fan__l{opacity:1;transform:none}
  .v21model__rail::after{transform:scaleY(1)}
  .v21model__mark{border-color:var(--red);color:var(--red)}
  .v21cont__s::before,.v21pr__i::before,.v21entry__list li::before{transform:none}
  .v21two__join::after{transform:translate(-50%,-50%) scale(1)}
  .v21env__sys::before,.v21prod__p::before{transform:none}
}

/* ---- compact canonical footer ------------------------------------------
   Quieter and denser than the first pass. Column headings stay small, the
   link rhythm tightens, and the office block becomes one secondary line.
   Full office detail lives on Let's Talk and About, which is where someone
   actually needs an address. No factual office data is altered; the global
   footer simply stops repeating all of it. */
.footer--compact{padding-block:clamp(3rem,5.5vw,4.25rem) clamp(1.5rem,2.5vw,2rem)}
.footer--compact .fhead{font-size:.6875rem;letter-spacing:.12em;color:rgba(255,255,255,.62);
  font-weight:600;margin:0 0 .85rem}
.footer--compact .footer__col a{padding:.26rem 0;font-size:.875rem;line-height:1.4;
  color:var(--foot-text)}
.footer--compact .footer__col a:hover{color:#fff}
.footer--compact .footer__brand img{height:46px;margin-bottom:1.1rem}
.footer--compact .footer__tag{max-width:19rem;font-size:.9375rem;line-height:1.55;
  color:rgba(255,255,255,.78)}
.footer--compact .fcta{margin-top:1.25rem;font-size:.875rem}
.footer--compact .footer__top{gap:clamp(1.5rem,3vw,2.75rem)}

.footer__where{margin-top:clamp(2rem,3.5vw,2.75rem);padding-top:1.25rem;
  border-top:1px solid var(--foot-rule);display:flex;flex-wrap:wrap;
  align-items:baseline;gap:.5rem clamp(1rem,2.5vw,2rem);
  font-size:.8125rem;color:var(--foot-dim)}
.footer__where dt{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin:0}
.footer__where dd{margin:0;color:var(--foot-text)}
.footer__where dd + dd::before{content:"";display:inline-block;width:3px;height:3px;
  border-radius:50%;background:var(--foot-dim);vertical-align:middle;
  margin:0 clamp(.6rem,1.6vw,1.1rem) .15rem 0}
.footer--compact .footer__bottom{margin-top:clamp(1.5rem,2.5vw,2rem);padding-block:1.1rem 0;
  font-size:.75rem}
@media (max-width:640px){
  .footer__where{gap:.4rem .9rem}
  .footer__where dd + dd::before{margin-right:.65rem}
}

/* ---- V2.1 refinements after visual review ------------------------------- */

/* Hero: the actions sat detached at the far right of the fold. They now sit
   directly under the definition, so the opening reads as one block. */
.v21hero__foot{grid-template-columns:1fr;gap:clamp(1.5rem,3vh,2.25rem);align-items:start}
.v21hero__def{max-width:46ch}
.v21hero .ctagroup{flex-wrap:wrap;justify-content:flex-start}

/* Why ONE BCG: the heading was squeezed into four cramped lines. The column
   takes more of the fold and the heading gets a wider measure. */
.v21why__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem)}
.v21why__h{max-width:22.5ch;}
.v21why__vis .converge{margin-top:0}
.v21why__vis .converge__label{position:static;text-align:left;margin-top:1.5rem;max-width:22.5ch;}

/* The fan lines were close to invisible on the dark surface. */
.v21fan .fan__line{stroke:rgba(255,255,255,.42);stroke-width:1.4}
.v21fan .fan__line--key{stroke:var(--red-light);stroke-width:2.5}
.v21fan__l{color:rgba(255,255,255,.95);font-size:.875rem}

/* Product panels carried dead vertical space under short text. */
.v21prod__p{padding-bottom:clamp(1.25rem,2.5vw,1.75rem)}
.v21prod__name{margin-bottom:.35rem}

/* Measurement loop: give the drawing room and keep the labels clear of it. */
.v21loop{max-width:34rem}
.v21loop__t{font-size:.75rem;letter-spacing:.02em}

/* Into the operation: the panel was mostly empty to the right. */
.v21env{max-width:52rem}
.v21env__i{font-size:.9375rem;color:var(--ink-2)}
.v21env__ring{gap:.4rem clamp(1rem,2.5vw,2rem)}

@media (max-width:1040px){
  .v21why__grid{grid-template-columns:1fr}
  .v21why__vis .converge__label{max-width:30ch}
}

/* The closing fold is a dark surface of its own, so its section identifier
   takes the light red like every other dark surface. */
.v21close .eb{color:var(--red-light)}
.v21close .eb::before{background:var(--red-light)}

/* Secondary hero line: present but clearly subordinate to the definition. */
.v21hero__sub{margin:clamp(1.5rem,3vh,2rem) 0 0;max-width:58ch;
  font-size:.9375rem;line-height:1.6;color:rgba(255,255,255,.68)}
.v21env__sys{align-items:flex-start;line-height:1.3}
.v21env__sys::before{margin-top:.75em}

/* ==========================================================================
   V2.1 MEDIA LAYER
   Approved existing-imagery integration, 24 September 2026. Home and How We
   Work only. Everything here is scoped to body.v21 so no other page is
   touched.
   ========================================================================== */

/* ---- A. PHOTOGRAPHIC HERO (How We Work) ---------------------------------
   The photograph carries the frame; the scrim is deeper than the homepage
   hero because this hero holds five levels of content over the image, not
   two. Measured white-on-image contrast at every text position is >= 7:1. */
body.v21 .v21hero--photo{min-height:min(84vh,780px);background:#0b1622}
body.v21 .v21hero--photo .v21hero__media img{object-position:center 46%}
body.v21 .v21hero__scrim--deep{
  background:
    linear-gradient(180deg,rgba(9,14,20,.80) 0%,rgba(9,14,20,.62) 26%,
      rgba(9,14,20,.78) 58%,rgba(9,14,20,.94) 100%),
    linear-gradient(90deg,rgba(9,14,20,.62) 0%,rgba(9,14,20,.26) 58%,rgba(9,14,20,.10) 100%)}

/* The breadcrumb stays quiet navigation over the photograph: legible, never
   competing with the headline. */
body.v21 .v21hero .crumb{margin-bottom:clamp(1.5rem,3vh,2.25rem)}
body.v21 .v21hero .crumb ol{color:rgba(255,255,255,.62)}
body.v21 .v21hero .crumb li{color:rgba(255,255,255,.62)}
body.v21 .v21hero .crumb a{color:rgba(255,255,255,.80)}
body.v21 .v21hero .crumb a:hover,
body.v21 .v21hero .crumb a:focus-visible{color:#fff}
body.v21 .v21hero--photo .v21hero__sub{color:rgba(255,255,255,.76)}

/* ---- B. FULL-WIDTH IMAGE BAND (How We Work, production) -----------------
   A band, not a picture beside a paragraph: the image runs the full viewport
   width and the operating-environment statement reads across it. */
body.v21 .v21prodsec{padding-bottom:clamp(3rem,6vw,5rem)}
body.v21 .v21band{position:relative;margin:clamp(2.5rem,5vw,4rem) 0 clamp(2.25rem,4vw,3rem);
  min-height:clamp(340px,42vw,520px);display:flex;align-items:flex-end;
  overflow:hidden;isolation:isolate;background:#0d1a14}
body.v21 .v21band__media{position:absolute;inset:0;z-index:0}
body.v21 .v21band__media img{width:100%;height:100%;object-fit:cover;object-position:center 44%}
body.v21 .v21band__scrim{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(8,16,12,.16) 0%,rgba(8,16,12,.40) 44%,rgba(8,16,12,.86) 100%),
    linear-gradient(90deg,rgba(8,16,12,.76) 0%,rgba(8,16,12,.34) 56%,rgba(8,16,12,.06) 100%)}
body.v21 .v21band__in{position:relative;z-index:2;width:100%;
  padding-block:clamp(2.75rem,6vw,4.5rem)}
body.v21 .v21band__sys{display:flex;gap:clamp(.9rem,2vw,1.4rem);align-items:flex-start;
  margin:0;max-width:34ch;color:#fff;font-weight:300;line-height:1.24;
  letter-spacing:-.025em;font-size:clamp(1.5rem,1rem + 2vw,2.5rem);
  text-shadow:0 2px 28px rgba(0,0,0,.45)}
body.v21 .v21band__sys::before{content:"";flex:none;width:44px;height:2px;
  background:var(--red);margin-top:.66em;transform:scaleX(0);transform-origin:left;
  transition:transform .7s cubic-bezier(.22,1,.36,1) .15s}
body.v21 .v21band.in .v21band__sys::before{transform:scaleX(1)}
body.v21 .v21band__ring{display:flex;flex-wrap:wrap;
  gap:.5rem clamp(1.25rem,3vw,2.5rem);margin-top:clamp(1.5rem,3vw,2.25rem);
  padding-top:clamp(1.25rem,2.5vw,1.75rem);border-top:1px solid rgba(255,255,255,.22);
  max-width:46rem}
body.v21 .v21band__i{font-size:.9375rem;font-weight:600;letter-spacing:.01em;
  color:rgba(255,255,255,.92)}
body.v21 .v21band__after{margin:0;max-width:58ch;color:var(--ink-2);line-height:1.68;
  font-size:var(--v21-lede)}

/* ---- C. ABOUT: the building as an architectural column ------------------
   The photograph is 540px square at source, which is the largest that exists.
   The composition is built to that ceiling: a tall 4:5 crop at a size the
   source actually carries, held by a tonal plate and the red rule, so it
   reads as structure rather than as an inset picture. */
body.v21 .v21est--media{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  align-items:center;gap:clamp(2rem,5vw,4.5rem)}
body.v21 .v21est__fig{position:relative;margin:0;max-width:432px;width:100%;
  justify-self:start}
body.v21 .v21est__fig::before{content:"";position:absolute;z-index:0;
  left:clamp(1.25rem,3vw,2.25rem);top:clamp(1.25rem,3vw,2.25rem);
  right:calc(-1 * clamp(1.25rem,3vw,2.25rem));bottom:calc(-1 * clamp(1.25rem,3vw,2.25rem));
  background:var(--warm-2)}
body.v21 .v21est__fig::after{content:"";position:absolute;z-index:2;left:0;top:0;
  width:64px;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .8s cubic-bezier(.22,1,.36,1) .2s}
body.v21 .v21est__fig.in::after{transform:scaleX(1)}
body.v21 .v21est__fig picture{position:relative;z-index:1;display:block}
body.v21 .v21est__fig img{display:block;width:100%;height:auto;aspect-ratio:4/5;
  object-fit:cover;object-position:58% 42%}
body.v21 .v21est--media .v21est__year{font-size:clamp(3.5rem,1.75rem + 6vw,7rem);
  margin-bottom:clamp(1.25rem,2.5vw,2rem)}

/* ---- D. OUR SOFTWARE: three plates of equal proportion ------------------
   Same plate, same aspect, same position in every panel. What sits inside
   differs because the available evidence differs, not because one product
   matters more. */
body.v21 .v21prod--plates{margin-top:clamp(2.5rem,5vw,3.75rem)}
body.v21 .v21prod--plates .v21prod__p{display:flex;flex-direction:column;
  padding-top:clamp(1.5rem,3vw,2.25rem)}
body.v21 .v21prod__plate{position:relative;overflow:hidden;isolation:isolate;
  aspect-ratio:5/6;background:var(--dark);
  margin-bottom:clamp(1.25rem,2.5vw,1.75rem);
  padding:clamp(1.1rem,2.2vw,1.6rem)}
body.v21 .v21prod__plate .v21prod__name{position:relative;z-index:3;display:block;
  margin:0;color:#fff;font-weight:300;letter-spacing:-.028em;line-height:1.04;
  font-size:clamp(1.375rem,.95rem + 1.35vw,2rem)}
body.v21 .v21prod__name--two span{display:block}

/* OP Care: the product screen rises from the foot of the plate. Contained,
   never cropped through the interface, and deliberately not the largest
   thing in the fold. */
body.v21 .v21prod__plate--shot{background:linear-gradient(165deg,#16303e 0%,#0f1f29 64%)}
body.v21 .v21prod__plate--type{background:linear-gradient(165deg,#1d1b19 0%,#100f0e 64%)}
body.v21 .v21prod__shot{position:absolute;z-index:2;left:50%;bottom:0;
  transform:translateX(-50%);height:62%;width:auto;display:block}
body.v21 .v21prod__shot img{display:block;height:100%;width:auto;max-width:none}
body.v21 .v21prod__plate--shot::after{content:"";position:absolute;z-index:1;
  inset:auto 0 0 0;height:64%;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.07) 100%)}

/* One Payroll: a register of rows, one active. The structure of the thing
   the product runs. */
body.v21 .v21prod__rows{position:absolute;z-index:1;left:clamp(1.1rem,2.2vw,1.6rem);
  right:clamp(1.1rem,2.2vw,1.6rem);bottom:clamp(1.4rem,2.8vw,2rem);top:42%;
  display:flex;flex-direction:column;justify-content:space-between}
body.v21 .v21prod__rows i{display:block;height:2px;width:var(--w);
  background:rgba(255,255,255,.26);transform:scaleX(0);transform-origin:left;
  transition:transform .6s cubic-bezier(.22,1,.36,1)}
body.v21 .v21prod__rows i.on{background:var(--red-light);height:3px}
body.v21 .v21prod.in .v21prod__rows i{transform:scaleX(1)}
body.v21 .v21prod.in .v21prod__rows i:nth-child(1){transition-delay:.20s}
body.v21 .v21prod.in .v21prod__rows i:nth-child(2){transition-delay:.28s}
body.v21 .v21prod.in .v21prod__rows i:nth-child(3){transition-delay:.36s}
body.v21 .v21prod.in .v21prod__rows i:nth-child(4){transition-delay:.44s}
body.v21 .v21prod.in .v21prod__rows i:nth-child(5){transition-delay:.52s}
body.v21 .v21prod.in .v21prod__rows i:nth-child(6){transition-delay:.60s}

/* HawkEye: nested frames closing on a single held point. The record built
   into the operation. */
body.v21 .v21prod__rec{position:absolute;z-index:1;display:block;
  left:clamp(1.1rem,2.2vw,1.6rem);right:clamp(1.1rem,2.2vw,1.6rem);
  top:42%;bottom:clamp(1.4rem,2.8vw,2rem)}
body.v21 .v21prod__rec i{position:absolute;border:1px solid rgba(255,255,255,.26);
  opacity:0;transition:opacity .6s ease}
body.v21 .v21prod__rec i:nth-child(1){inset:0}
body.v21 .v21prod__rec i:nth-child(2){inset:14% 12%}
body.v21 .v21prod__rec i:nth-child(3){inset:28% 24%}
body.v21 .v21prod__rec b{position:absolute;left:50%;top:50%;width:9px;height:9px;
  margin:-4.5px 0 0 -4.5px;background:var(--red-light);border-radius:50%;
  transform:scale(0);transition:transform .5s cubic-bezier(.22,1,.36,1) .55s}
body.v21 .v21prod.in .v21prod__rec i{opacity:1}
body.v21 .v21prod.in .v21prod__rec i:nth-child(1){transition-delay:.20s}
body.v21 .v21prod.in .v21prod__rec i:nth-child(2){transition-delay:.32s}
body.v21 .v21prod.in .v21prod__rec i:nth-child(3){transition-delay:.44s}
body.v21 .v21prod.in .v21prod__rec b{transform:scale(1)}

/* ---- E. RESPONSIVE ------------------------------------------------------ */
@media (max-width:900px){
  body.v21 .v21est--media{grid-template-columns:1fr;gap:2.25rem}
  body.v21 .v21est__fig{max-width:340px;justify-self:start}
  body.v21 .v21band{min-height:clamp(300px,60vw,420px)}
  body.v21 .v21prod--plates .v21prod__p{padding-top:clamp(1.25rem,3vw,1.75rem)}
  body.v21 .v21prod__plate{aspect-ratio:16/9;max-width:none}
  body.v21 .v21prod__shot{height:74%}
}
@media (max-width:600px){
  body.v21 .v21hero--photo{min-height:min(88vh,660px)}
  body.v21 .v21band__sys{font-size:clamp(1.3rem,.9rem + 2vw,1.75rem);max-width:none}
  body.v21 .v21band__ring{gap:.4rem 1.25rem}
  body.v21 .v21est__fig{max-width:100%}
  body.v21 .v21prod__plate{aspect-ratio:4/3}
  body.v21 .v21prod__shot{height:70%}
}

/* ---- F. REDUCED MOTION AND NO-JS ---------------------------------------
   Every device here is decoration over content that is already in the HTML.
   With motion reduced, or with scripting off, each one renders in its
   finished state immediately. */
.no-js body.v21 .v21est__fig::after,
.no-js body.v21 .v21band__sys::before{transform:scaleX(1)}
.no-js body.v21 .v21prod__rows i{transform:scaleX(1)}
.no-js body.v21 .v21prod__rec i{opacity:1}
.no-js body.v21 .v21prod__rec b{transform:scale(1)}
@media (prefers-reduced-motion:reduce){
  body.v21 .v21est__fig::after,
  body.v21 .v21band__sys::before{transform:scaleX(1);transition:none}
  body.v21 .v21prod__rows i{transform:scaleX(1);transition:none}
  body.v21 .v21prod__rec i{opacity:1;transition:none}
  body.v21 .v21prod__rec b{transform:scale(1);transition:none}
}

/* ---- G. HOME HERO SCRIM: measured contrast correction -------------------
   Not a design change. The approved ocean photograph and the approved
   composition are unchanged; only the scrim density moves. Measured by pixel
   against the glyphs themselves, the headline sat at 2.29:1 to 2.82:1 over
   the brightest water, below the 3:1 that WCAG 2.2 AA requires for large
   text. The stops below carry every text position over the threshold at
   1440, 834 and 390. */
body.v21 .v21hero__scrim:not(.v21hero__scrim--deep){
  background:
    linear-gradient(180deg,rgba(10,13,17,.66) 0%,rgba(10,13,17,.40) 28%,
      rgba(10,13,17,.62) 62%,rgba(10,13,17,.78) 82%,rgba(10,13,17,.92) 100%)}

/* ==========================================================================
   V2.2 — HOMEPAGE
   Everything below is scoped to body.v22, which only the homepage carries.
   No other page is affected by this layer.
   ========================================================================== */
body.v22{
  --v22-state:clamp(1.6rem,.95rem + 2.3vw,2.75rem);
  --v22-lede:clamp(1.0625rem,1rem + .45vw,1.25rem);
  --v22-rule:rgba(21,20,18,.14);
}
body.v22 .section{padding-block:clamp(4.5rem,9vw,8rem)}
body.v22 .eb{margin-bottom:1.25rem}

/* ---- 1. HERO ------------------------------------------------------------ */
body.v22 .v22hero{position:relative;min-height:min(94vh,900px);display:flex;
  align-items:flex-end;background:var(--hero-base);overflow:hidden;isolation:isolate}
body.v22 .v22hero__media{position:absolute;inset:0;z-index:0}
body.v22 .v22hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 44%}
body.v22 .v22hero__scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(7,11,16,.62) 0%,rgba(7,11,16,.34) 30%,
    rgba(7,11,16,.58) 66%,rgba(7,11,16,.90) 100%),
  linear-gradient(90deg,rgba(7,11,16,.56) 0%,rgba(7,11,16,.18) 62%,rgba(7,11,16,0) 100%)}
body.v22 .v22hero__in{position:relative;z-index:2;width:100%;
  padding-block:clamp(8rem,16vh,12rem) clamp(4.5rem,9vh,7rem)}
body.v22 .v22hero__rule{display:block;width:56px;height:2px;background:var(--red);
  margin-bottom:clamp(1.75rem,3vh,2.5rem);transform:scaleX(0);transform-origin:left;
  animation:v22rule 1s var(--ease-line) .25s forwards}
@keyframes v22rule{to{transform:scaleX(1)}}
body.v22 .v22hero__h{margin:0;color:#fff;max-width:18.8ch;text-shadow:0 2px 46px rgba(0,0,0,.34);}
body.v22 .v22hero__h span{display:block}
body.v22 .v22hero__def{margin:clamp(2rem,4vh,3rem) 0 0;max-width:46ch;color:rgba(255,255,255,.90);text-shadow:0 1px 20px rgba(0,0,0,.42);}
body.v22 .v22hero__cta{margin-top:clamp(2rem,4vh,2.75rem);flex-wrap:nowrap}
body.v22 .v22hero__edge{position:absolute;z-index:3;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--red) 0%,var(--red) 22%,rgba(255,255,255,.14) 22%)}

/* ---- 2. WHY ONE BCG: the convergence is the fold ------------------------ */
body.v22 .v22why{overflow:hidden}
body.v22 .v22why__h{max-width:22.5ch}
body.v22 .v22why__h{margin:0;color:var(--ink);}
body.v22 .v22conv{margin-top:clamp(2.5rem,5vw,4rem);position:relative;
  display:grid;grid-template-columns:minmax(0,23%) minmax(0,77%);align-items:stretch}
body.v22 .v22conv__svg{display:block;width:100%;height:clamp(300px,32vw,400px)}
body.v22 .v22conv .frag,body.v22 .v22conv .join{stroke:rgba(21,20,18,.32);stroke-width:1.5}
body.v22 .v22conv .main{stroke-width:3}
body.v22 .v22conv__acc{display:flex;flex-direction:column;justify-content:space-evenly;
  height:clamp(300px,32vw,400px);padding-right:clamp(.75rem,1.5vw,1.25rem)}
body.v22 .v22conv__acc span{display:block;
  font-size:clamp(.875rem,.78rem + .4vw,1.125rem);font-weight:600;color:var(--ink-2);
  letter-spacing:-.014em;line-height:1.25;opacity:0;transform:translateX(-12px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
body.v22 .v22conv.in .v22conv__acc span{opacity:1;transform:none}
body.v22 .v22conv.in .v22conv__acc span:nth-child(1){transition-delay:.16s}
body.v22 .v22conv.in .v22conv__acc span:nth-child(2){transition-delay:.28s}
body.v22 .v22conv.in .v22conv__acc span:nth-child(3){transition-delay:.40s}
body.v22 .v22conv.in .v22conv__acc span:nth-child(4){transition-delay:.52s}
body.v22 .v22conv__res{position:absolute;right:0;bottom:calc(50% + 2rem);text-align:right;max-width:18.8ch;margin:0;color:var(--ink);}
body.v22 .v22why__foot{margin-top:clamp(2.5rem,5vw,4rem);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,3.5rem);
  padding-top:clamp(1.75rem,3vw,2.5rem);border-top:1px solid var(--v22-rule)}
body.v22 .v22why__sub{margin:0;color:var(--ink-3);max-width:46ch;}

/* ---- 3. WHAT WE DO: one problem, the capabilities it needs -------------- */
body.v22 .v22what__h{max-width:21.2ch}
body.v22 .v22what__h{margin:0;color:#fff;}
body.v22 .v22what__rule{margin:clamp(3rem,6vw,4.5rem) 0 0;max-width:30ch;color:#fff;padding-left:clamp(1.25rem,2.5vw,2rem);border-left:3px solid var(--red);}
body.v22 .v22what__foot{margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.5rem,4vw,3rem);align-items:end;
  padding-top:clamp(1.75rem,3vw,2.5rem);border-top:1px solid rgba(255,255,255,.16)}
body.v22 .v22what__sub{margin:0;max-width:56ch;color:rgba(255,255,255,.70);
  font-size:.9375rem;line-height:1.66}

/* ---- 5. INDUSTRIES: alternating editorial panels ------------------------ */
body.v22 .v22ind{background:var(--paper);padding-block:clamp(3rem,5vw,4.5rem) 0}
body.v22 .v22ind__h{max-width:20ch}
body.v22 .v22ind__h{margin:0;color:var(--ink);}
body.v22 .v22panel{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:stretch;margin-top:clamp(2.5rem,5vw,4rem)}
body.v22 .v22panel--flip .v22panel__media{order:2}
body.v22 .v22panel__media{position:relative;overflow:hidden;background:var(--warm-2);
  min-height:clamp(320px,38vw,520px)}
body.v22 .v22panel__media img{width:100%;height:100%;object-fit:cover;display:block}
body.v22 .v22panel__body{background:var(--warm);display:flex;align-items:center;
  padding:clamp(2rem,4.5vw,4rem)}
body.v22 .v22panel--flip .v22panel__body{background:var(--warm-2)}
body.v22 .v22panel__in{max-width:40ch}
body.v22 .v22panel__cross{margin:0 0 clamp(1.25rem,2.5vw,1.75rem);padding-left:1rem;border-left:2px solid var(--red);color:var(--ink-3);}
body.v22 .v22panel__k{margin:0;}
body.v22 .v22panel__k a{color:var(--ink);text-decoration:none;
  background-image:linear-gradient(var(--red),var(--red));background-size:0 2px;
  background-repeat:no-repeat;background-position:0 100%;transition:background-size .35s var(--ease)}
body.v22 .v22panel__k a:hover,body.v22 .v22panel__k a:focus-visible{background-size:100% 2px}
body.v22 .v22panel__p{margin:1rem 0 0;color:var(--ink-2);}
body.v22 .v22panel__ev{margin:clamp(1.5rem,3vw,2rem) 0 0;display:flex;align-items:baseline;
  gap:.75rem;flex-wrap:wrap;padding-top:1.1rem;border-top:1px solid var(--v22-rule)}
body.v22 .v22panel__ev span{font-size:.6875rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3)}
body.v22 .v22panel__ev a{font-size:1rem;font-weight:600;color:var(--red);text-decoration:none}
body.v22 .v22panel__ev a:hover,body.v22 .v22panel__ev a:focus-visible{text-decoration:underline}
body.v22 .v22ind__foot{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.5rem,4vw,3rem);align-items:end;
  padding-block:clamp(2.75rem,5vw,4rem) clamp(4.5rem,9vw,8rem)}
body.v22 .v22ind__out{margin:0;max-width:42.5ch;color:var(--ink);}

/* ---- 7. RECOGNITION ---------------------------------------------------- */
body.v22 .v22rec__in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
body.v22 .v22rec__art{position:relative;max-width:420px;width:100%}
body.v22 .v22rec__art::before{content:"";position:absolute;inset:auto auto -18px -18px;
  width:56%;height:56%;background:var(--warm-2);z-index:0}
body.v22 .v22rec__art picture{position:relative;z-index:1;display:block}
body.v22 .v22rec__art img{display:block;width:100%;height:auto}
body.v22 .v22rec__h{margin:0;color:var(--ink);}
body.v22 .v22rec__list{margin:clamp(2rem,4vw,3rem) 0 0;display:grid;
  gap:clamp(1.5rem,3vw,2.25rem)}
body.v22 .v22rec__i{padding-top:clamp(1.25rem,2.5vw,1.75rem);border-top:1px solid var(--v22-rule)}
body.v22 .v22rec__i dt{margin:0;font-size:clamp(1.0625rem,.95rem + .6vw,1.375rem);
  font-weight:400;letter-spacing:-.022em;color:var(--ink);line-height:1.2}
body.v22 .v22rec__i dd{margin:.7rem 0 0;color:var(--ink-2);line-height:1.62;font-size:.9375rem}
body.v22 .v22rec__yr{display:inline-block;margin-right:.45rem;color:var(--red);}
body.v22 .v22rec__l{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line-2)}
body.v22 .v22rec__l:hover,body.v22 .v22rec__l:focus-visible{color:var(--red);text-decoration-color:var(--red)}
body.v22 .v22rec__mark{margin-top:1.1rem;max-width:180px}
body.v22 .v22rec__mark img{display:block;width:100%;height:auto;mix-blend-mode:multiply}

/* ---- 8. ABOUT ---------------------------------------------------------- */
body.v22 .v22about{background:var(--paper)}
body.v22 .v22about__h{margin:0;color:var(--ink);}
body.v22 .v22about__grid{margin-top:clamp(2.5rem,5vw,4rem);display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);
  align-items:start}
body.v22 .v22facts{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2.5vw,2rem)}
body.v22 .v22fact{padding-top:1.1rem;border-top:2px solid var(--ink);position:relative}
body.v22 .v22fact::before{content:"";position:absolute;left:0;top:-2px;width:100%;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease-line)}
body.v22 .v22facts.in .v22fact::before{transform:scaleX(1)}
body.v22 .v22facts.in .v22fact:nth-child(2)::before{transition-delay:.18s}
body.v22 .v22facts.in .v22fact:nth-child(3)::before{transition-delay:.36s}
body.v22 .v22fact__v{margin:0;color:var(--ink);display:flex;align-items:baseline;}
body.v22 .v22fact__v i{font-style:normal;font-size:.44em;font-weight:300;color:var(--red);
  margin-left:.08em}
body.v22 .v22fact__v .v22fact__u{font-size:.26em;font-weight:600;letter-spacing:.04em;
  color:var(--ink-3);margin-left:.5em}
body.v22 .v22fact__k{margin:.9rem 0 0;font-size:.8125rem;font-weight:600;color:var(--ink-3);
  line-height:1.45;letter-spacing:.01em}
body.v22 .v22about__p{margin:0 0 1.1rem;color:var(--ink-2);}
body.v22 .v22geo{margin-top:clamp(3rem,6vw,4.5rem);position:relative;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;padding-top:1.75rem}
body.v22 .v22geo__line{position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--v22-rule);overflow:hidden}
body.v22 .v22geo__line::after{content:"";position:absolute;inset:0;background:var(--red);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.4s cubic-bezier(.65,0,.35,1) .15s}
body.v22 .v22geo.in .v22geo__line::after{transform:scaleX(1)}
body.v22 .v22geo__i{position:relative;font-size:.875rem;font-weight:600;color:var(--ink-2);
  line-height:1.4}
body.v22 .v22geo__d{position:absolute;left:0;top:-1.75rem;width:9px;height:9px;
  margin-top:-4px;border-radius:50%;background:var(--red);transform:scale(0);
  transition:transform .45s cubic-bezier(.22,1,.36,1)}
body.v22 .v22geo.in .v22geo__d{transform:scale(1)}
body.v22 .v22geo.in .v22geo__i:nth-child(2) .v22geo__d{transition-delay:.30s}
body.v22 .v22geo.in .v22geo__i:nth-child(3) .v22geo__d{transition-delay:.52s}
body.v22 .v22geo.in .v22geo__i:nth-child(4) .v22geo__d{transition-delay:.74s}
body.v22 .v22geo.in .v22geo__i:nth-child(5) .v22geo__d{transition-delay:.96s}
body.v22 .v22geo.in .v22geo__i:nth-child(6) .v22geo__d{transition-delay:1.18s}

/* ---- 9. LET'S TALK: the enquiry, on the page --------------------------- */
body.v22 .v22talk{background:var(--warm);padding-block:clamp(4.5rem,9vw,8rem);
  position:relative}
body.v22 .v22talk::before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;
  background:var(--v22-rule)}
body.v22 .v22talk__in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2.5rem,6vw,5.5rem);align-items:start}
body.v22 .v22talk__h{margin:0;color:var(--ink);}
body.v22 .v22talk__p{margin:clamp(1.25rem,2.5vw,1.75rem) 0 0;max-width:38ch;color:var(--ink-2);}
body.v22 .v22talk__alt{margin:clamp(2rem,4vw,3rem) 0 0;font-size:.875rem;color:var(--ink-3);
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
body.v22 .v22form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.5rem);background:var(--paper);
  padding:clamp(1.75rem,3.5vw,2.75rem);border:1px solid var(--v22-rule)}
body.v22 .v22form .field{margin:0}
body.v22 .v22form .field--full,body.v22 .v22form__note,
body.v22 .v22form__act,body.v22 .v22form .formstatus{grid-column:1 / -1}
body.v22 .v22form__note{margin:0;font-size:.8125rem;color:var(--ink-3)}
body.v22 .v22form__act{display:flex;justify-content:flex-start}
body.v22 .v22form textarea{min-height:130px}

/* ---- 10. FOOTER: compact, quiet, connected to the page ----------------- */
body.v22 .footer{background:var(--dark)}
body.v22 .footer .container{padding-block:clamp(1.75rem,3vw,2.5rem) clamp(.9rem,1.5vw,1.25rem)}
body.v22 .footer__top{display:grid;
  grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,3rem);align-items:start;padding-bottom:clamp(2rem,4vw,3rem);
  border-bottom:1px solid rgba(255,255,255,.10)}
body.v22 .footer .fhead{font-size:.75rem;font-weight:700;letter-spacing:.1em;
  text-transform:none;color:#fff;margin:0}
body.v22 .footer .fgroup summary{list-style:none;margin-bottom:1rem}
body.v22 .footer .fgroup__body{display:grid;gap:.6rem}
body.v22 .footer .fgroup__body a{font-size:.875rem;color:var(--foot-text);
  text-decoration:none;line-height:1.45}
body.v22 .footer .fgroup__body a:hover,body.v22 .footer .fgroup__body a:focus-visible{color:#fff}
body.v22 .footer__tag{font-size:.9375rem;color:#fff;max-width:22ch;line-height:1.45;
  margin:1.1rem 0 1.25rem}
body.v22 .footer__where{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.1rem;
  margin:clamp(1.25rem,2.5vw,1.75rem) 0 0;padding:0}
body.v22 .footer__where dt{font-size:.6875rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--foot-dim);margin:0}
body.v22 .footer__where dd{margin:0;font-size:.8125rem;color:var(--foot-dim);line-height:1.4}
body.v22 .footer__bottom{padding-top:clamp(1rem,1.7vw,1.35rem);border-top:0}
body.v22 .footer__copy{font-size:.8125rem;color:var(--foot-dim);margin:0}

/* ---- 11. RESPONSIVE ---------------------------------------------------- */
@media (max-width:1040px){
  body.v22 .v22panel{grid-template-columns:minmax(0,1fr)}
  body.v22 .v22panel--flip .v22panel__media{order:0}
  body.v22 .v22rec__in,body.v22 .v22about__grid,body.v22 .v22talk__in{grid-template-columns:minmax(0,1fr)}
  body.v22 .v22rec__art{max-width:320px}
  body.v22 .footer__top{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  body.v22 .v22how__head{grid-template-columns:minmax(0,1fr);row-gap:1.25rem}
  body.v22 .v22why__foot,body.v22 .v22what__foot,body.v22 .v22how__foot,
  body.v22 .v22soft__foot,body.v22 .v22ind__foot{grid-template-columns:minmax(0,1fr);
    gap:1.5rem;align-items:start}
  /* The convergence becomes one column: the accumulations read as a row above
     the device, the device keeps its full width, and the resolution lands
     beneath it rather than being squeezed into a side column. */
  body.v22 .v22conv{grid-template-columns:minmax(0,1fr);row-gap:1.25rem}
  body.v22 .v22conv__acc{height:auto;flex-direction:row;flex-wrap:wrap;
    justify-content:flex-start;gap:.5rem 1.25rem;padding:0}
  body.v22 .v22conv__acc span{font-size:.9375rem}
  body.v22 .v22conv__svg{height:clamp(240px,42vw,320px)}
  body.v22 .v22conv__res{position:static;text-align:left;max-width:27.5ch;margin-top:1.25rem;}
  body.v22 .v22facts{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  body.v22 .v22geo{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 1rem;
    padding-top:1.4rem}
  body.v22 .v22geo__d{display:none}
  body.v22 .v22form{grid-template-columns:minmax(0,1fr)}
  body.v22 .footer__top{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  body.v22 .v22hero{min-height:min(92vh,720px)}
  
  body.v22 .v22hero__cta{flex-wrap:wrap}
  body.v22 .v22conv__acc{gap:.4rem .9rem}
  body.v22 .v22conv__acc span{font-size:.875rem}
  body.v22 .v22conv__res{max-width:none}
  body.v22 .v22panel__media{min-height:240px}
}

/* ---- 12. REDUCED MOTION AND NO-JS -------------------------------------- */
.no-js body.v22 .v22hero__rule{transform:scaleX(1);animation:none}
.no-js body.v22 .v22conv__acc span,
.no-js body.v22 .v22fact::before,
.no-js body.v22 .v22geo__line::after,.no-js body.v22 .v22geo__d,
@media (prefers-reduced-motion:reduce){
  body.v22 .v22hero__rule{transform:scaleX(1);animation:none}
  body.v22 .v22conv__acc span{opacity:1;transform:none;transition:none}
  body.v22 .v22fact::before,
  body.v22 .v22geo__line::after{transform:none;transition:none}
}


/* ==========================================================================
   ENTRY-ANIMATION FAIL-SAFE

   Every entry animation on this site hides its content until the script marks
   it revealed. The inline head script removes `no-js` the moment the document
   parses, so if site.js then fails to execute for any reason the page is left
   with its content permanently invisible. On a review package opened from a
   local folder that is the difference between a readable page and a blank one.

   The script no longer inherits that trust. It adds `anim` to <html> only at
   the moment it has successfully armed the reveal observers. Until then, and
   for ever if that never happens, the rules below hold every device in its
   finished state. When the script does arm, `anim` appears, these rules stop
   applying and the animation behaves exactly as designed.

   The selectors are mirrored from the existing `no-js` rules, which already
   describe each device's correct resting state.
   ========================================================================== */
html:not(.anim) .reveal{opacity:1;transform:none}
html:not(.anim) .reveal{opacity:1;transform:none}
html:not(.anim) .converge [data-draw]{stroke-dashoffset:0}
html:not(.anim) .converge .join{opacity:1}
html:not(.anim) .converge .junction{animation:none;opacity:0}
html:not(.anim) .converge__label{opacity:1;transform:none}
html:not(.anim) .converge .node{opacity:1;transform:none}
html:not(.anim) .model__rule::after, html:not(.anim) .caps__spine::after, html:not(.anim) .flow__item--key::after{transform:none}
html:not(.anim) .model__dot{opacity:1;transform:translate(-50%,-50%) scale(1);
  background:var(--red);border-color:var(--red)}
html:not(.anim) .plate__rule{transform:none}
html:not(.anim) .v2model__rule::after{transform:none}
html:not(.anim) .v2model__dot{opacity:1;transform:translateY(-50%) scale(1);background:var(--red);
  border-color:var(--red)}
html:not(.anim) .eb::before{transform:scaleX(1)}
html:not(.anim) .v21cont__fill, html:not(.anim) .v21pr__anchor, html:not(.anim) .v21close__line{transform:scaleX(1)}
html:not(.anim) .v21fan [data-draw], html:not(.anim) .v21loop [data-draw]{stroke-dashoffset:0}
html:not(.anim) .v21fan__l{opacity:1;transform:none}
html:not(.anim) .v21model__rail::after{transform:scaleY(1)}
html:not(.anim) .v21model__mark{border-color:var(--red);color:var(--red)}
each one renders in its
   finished state immediately. */
html:not(.anim) body.v21 .v21est__fig::after, html:not(.anim) body.v21 .v21band__sys::before{transform:scaleX(1)}
html:not(.anim) body.v21 .v21prod__rows i{transform:scaleX(1)}
html:not(.anim) body.v21 .v21prod__rec i{opacity:1}
html:not(.anim) body.v21 .v21prod__rec b{transform:scale(1)}
/* ---- 12. REDUCED MOTION AND NO-JS -------------------------------------- */
html:not(.anim) body.v22 .v22hero__rule{transform:scaleX(1);animation:none}


/* ==========================================================================
   V2.2 REFINEMENT PASS
   Typography proportion, neutral surfaces, link affordance, the redesigned
   HOW WE WORK composition, the product showcase and the three-tier footer.
   ========================================================================== */

/* ---- A. TYPE PROPORTION ------------------------------------------------
   Display sizing comes down so the headline sits inside the fold rather than
   consuming it, and supporting copy comes up so it belongs to the composition
   it sits in instead of reading as a caption. */
body.v22{
  --v22-state:clamp(1.625rem,1rem + 2.3vw,3.25rem);     /* 52px */
  --v22-lede:clamp(1.125rem,1rem + .72vw,1.4375rem);    /* 23px */
  --v22-sub:clamp(1.0625rem,1rem + .35vw,1.1875rem);    /* 19px */
  --v22-rule:rgba(21,20,18,.13);
}
body.v22 .v22hero__h{max-width:21.2ch;}
body.v22 .v22hero__def{max-width:52ch}
/* supporting copy, everywhere it was reading as caption text */
body.v22 .v22what__sub,body.v22 .v22how__sub{font-size:var(--v22-sub);line-height:1.6}
body.v22 .v22why__sub,body.v22 .v22what__sub,body.v22 .v22how__sub,
body.v22 .v22soft__sub{color:var(--ink-2)}
body.v22 .v22panel__cross{color:var(--ink-2)}
body.v22 .v22fact__k,body.v22 .v22geo__i,body.v22 .v22rec__i dd{font-size:1rem}

/* ---- B. LINK AFFORDANCE ------------------------------------------------
   The directional arrow is the affordance, so it takes the text colour: near
   black on light surfaces, white on dark. Red arrives on hover and focus, as
   an accent rather than as the default state. */
.tlink{font-size:var(--t-nav);letter-spacing:-.005em}
.tlink .ar{width:26px}
.tlink:hover .ar,.tlink:focus-visible .ar{width:42px}
.tlink:hover{color:var(--red)}
.tlink--light:hover{color:var(--red-light)}
body.v22 .v22panel__ev a{display:inline-flex;align-items:center;gap:.65rem;color:var(--ink);
  font-size:1.0625rem;font-weight:600;text-decoration:none}
body.v22 .v22panel__ev a:hover,body.v22 .v22panel__ev a:focus-visible{color:var(--red)}

/* ---- C. HOW WE WORK: one signal resolving ------------------------------ */
body.v22 .v22how{background:var(--paper);padding-bottom:clamp(3rem,5vw,4.5rem)}
body.v22 .v22how__out{margin-top:clamp(2.75rem,5vw,4rem);display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4.5rem);
  align-items:end;padding-top:clamp(1.75rem,3vw,2.5rem);border-top:1px solid var(--v22-rule)}
body.v22 .v22how__pay{margin:0;max-width:18ch;font-size:var(--v22-state);font-weight:250;
  line-height:1.08;letter-spacing:-.032em;color:var(--ink)}
body.v22 .v22how__act{display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem}
body.v22 .v22how__act .v22how__sub{margin:0;max-width:46ch}

/* ---- D. OUR SOFTWARE: editorial product showcase ----------------------- */
body.v22 .v22soft{background:var(--n-1)}
body.v22 .v22show{margin-top:clamp(2.75rem,5.5vw,4.5rem);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,2.5vw,2.25rem)}
body.v22 .v22pr__a{display:grid;grid-template-rows:auto 1fr;height:100%;
  text-decoration:none;color:inherit;border-radius:18px;overflow:hidden;
  background:var(--paper);box-shadow:0 1px 0 rgba(21,20,18,.07);
  transition:box-shadow .45s var(--ease),transform .45s var(--ease)}
body.v22 .v22pr__a:hover,body.v22 .v22pr__a:focus-visible{
  box-shadow:0 18px 40px -22px rgba(21,20,18,.28),0 1px 0 rgba(21,20,18,.09);
  transform:translateY(-3px)}
body.v22 .v22pr__a:focus-visible{outline:2px solid var(--red);outline-offset:3px}
body.v22 .v22pr__stage{display:flex;align-items:flex-end;justify-content:center;
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(170deg,#FFFFFF 0%,var(--warm-2) 100%)}
body.v22 .v22pr__shot,body.v22 .v22pr__shot picture,body.v22 .v22pr__shot img{display:block;
  width:100%;height:100%}
body.v22 .v22pr__shot img{object-fit:cover}
body.v22 .v22pr--hawkeye .v22pr__shot{width:86%;align-self:center;
  border-radius:10px 10px 0 0;overflow:hidden;box-shadow:0 20px 40px -26px rgba(21,20,18,.5)}
body.v22 .v22pr--hawkeye .v22pr__shot img{object-position:left top;height:auto}
body.v22 .v22pr--hawkeye .v22pr__stage{align-items:flex-end;padding-top:clamp(1.5rem,3vw,2.5rem)}
body.v22 .v22pr--onepayroll .v22pr__shot img{object-position:center 28%}
/* OP Care: the two supplied devices as one composition */
body.v22 .v22pr__pair{position:relative;display:block;width:100%;height:100%}
body.v22 .v22pr__dev{position:absolute;bottom:0;display:block}
body.v22 .v22pr__dev img{display:block;width:100%;height:auto}
body.v22 .v22pr__dev--a{left:12%;width:46%;z-index:2;
  transition:transform .5s var(--ease)}
body.v22 .v22pr__dev--b{right:11%;width:38%;z-index:1;bottom:11%;
  transition:transform .5s var(--ease)}
body.v22 .v22pr--opcare .v22pr__a:hover .v22pr__dev--a,
body.v22 .v22pr--opcare .v22pr__a:focus-visible .v22pr__dev--a{transform:translateX(-5px)}
body.v22 .v22pr--opcare .v22pr__a:hover .v22pr__dev--b,
body.v22 .v22pr--opcare .v22pr__a:focus-visible .v22pr__dev--b{transform:translateX(6px) translateY(-4px)}
body.v22 .v22pr__meta{display:block;padding:clamp(1.4rem,2.6vw,1.9rem)}
body.v22 .v22pr__n{display:block;color:var(--ink-3);margin-bottom:.7rem;}
body.v22 .v22pr__name{display:block;color:var(--ink);}
body.v22 .v22pr__env{display:block;margin-top:.5rem;font-size:1rem;color:var(--ink-3);
  line-height:1.5}
body.v22 .v22pr__go{display:inline-flex;align-items:center;gap:.65rem;
  margin-top:clamp(1.1rem,2vw,1.5rem);font-size:1rem;font-weight:600;color:var(--ink)}
body.v22 .v22pr__go .ar{display:inline-block;width:22px;height:1px;background:currentColor;
  position:relative;transition:width .3s var(--ease)}
body.v22 .v22pr__go .ar::after{content:"";position:absolute;right:0;top:-3.5px;width:8px;height:8px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
body.v22 .v22pr__a:hover .v22pr__go,body.v22 .v22pr__a:focus-visible .v22pr__go{color:var(--red)}
body.v22 .v22pr__a:hover .v22pr__go .ar{width:34px}
body.v22 .v22soft__foot{margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.5rem,4vw,3rem);align-items:end;
  padding-top:clamp(1.75rem,3vw,2.5rem);border-top:1px solid var(--v22-rule)}
body.v22 .v22soft__sub{margin:0;max-width:58ch}

/* ---- E. WHY and WHAT: supporting copy joins the composition ------------ */
body.v22 .v22why__foot{grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2rem,5vw,4rem)}
body.v22 .v22why__sub{max-width:42ch}
body.v22 .v22what__foot{align-items:start;gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:minmax(0,1fr)}
body.v22 .v22what__sub{max-width:62ch;color:rgba(255,255,255,.78)}
body.v22 .v22what__foot .tlink{margin-top:.25rem}

/* ---- F. INDUSTRIES: neutral surfaces, balanced measure ----------------- */
body.v22 .v22panel__body{background:var(--n-1)}
body.v22 .v22panel--flip .v22panel__body{background:var(--warm)}

body.v22 .v22panel__in{max-width:44ch}

/* ---- G. RECOGNITION / ABOUT surfaces ----------------------------------- */
body.v22 .v22rec{background:var(--warm)}
body.v22 .v22talk{background:var(--n-1)}

/* ---- H. FOOTER: brand and navigation, offices, centred close ----------- */
.footer__brand .fsoc{list-style:none;display:flex;gap:.6rem;margin:1.5rem 0 0;padding:0}
.footer__brand .fsoc a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);color:var(--foot-text);
  transition:border-color .25s ease,color .25s ease,background .25s ease}
.footer__brand .fsoc svg{width:17px;height:17px;fill:currentColor}
.footer__brand .fsoc a:hover,.footer__brand .fsoc a:focus-visible{
  color:#fff;border-color:var(--red);background:var(--red)}
.footer__offices{padding-top:clamp(1.75rem,3vw,2.5rem);margin-top:clamp(1.75rem,3vw,2.5rem);
  border-top:1px solid rgba(255,255,255,.10)}
.footer__oh{margin:0 0 1.25rem;font-size:.6875rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--foot-dim)}
.offlist{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(1rem,2.5vw,2rem)}
.offlist__c{margin:0 0 .45rem;font-size:.875rem;font-weight:700;color:#fff;letter-spacing:-.005em}
.offlist__a{margin:0;font-size:.8125rem;line-height:1.55;color:var(--foot-text)}
.offlist__t{display:inline-block;margin-top:.45rem;font-size:.8125rem;color:var(--foot-dim);
  text-decoration:none}
.offlist__t:hover,.offlist__t:focus-visible{color:#fff}
.footer__bottom--v2{display:block;text-align:center;
  padding-top:clamp(1.5rem,2.5vw,2rem);margin-top:clamp(1.5rem,2.5vw,2rem);
  border-top:1px solid rgba(255,255,255,.10)}
.footer__bottom--v2 .footer__copy{margin:0;text-align:center}

/* ---- I. RESPONSIVE ----------------------------------------------------- */
@media (max-width:1040px){
  body.v22 .v22show{grid-template-columns:minmax(0,1fr);gap:1.25rem}
  body.v22 .v22pr__stage{aspect-ratio:16/9}
  body.v22 .v22pr__dev--a{left:20%;width:30%}
  body.v22 .v22pr__dev--b{right:21%;width:25%}
  body.v22 .v22pr--hawkeye .v22pr__shot{width:72%}
  body.v22 .v22how__out{grid-template-columns:minmax(0,1fr);gap:2rem;align-items:start}
  .offlist{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
}
@media (max-width:760px){
  body.v22 .v22soft__foot{grid-template-columns:minmax(0,1fr);gap:1.5rem;align-items:start}
  .offlist{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  body.v22 .v22pr__stage{aspect-ratio:3/2}
  body.v22 .v22pr__dev--a{left:14%;width:38%}
  body.v22 .v22pr__dev--b{right:15%;width:31%}
  body.v22 .v22pr--hawkeye .v22pr__shot{width:88%}
  .offlist{grid-template-columns:minmax(0,1fr);gap:1.25rem}
}

/* ---- J. REDUCED MOTION AND NO-JS --------------------------------------- */
@media (prefers-reduced-motion:reduce){
  body.v22 .v22pr__a,body.v22 .v22pr__dev{transition:none}
  body.v22 .v22pr__a:hover{transform:none}
}

/* ---- K. REINSTATED AND CORRECTED ---------------------------------------
   Rules the retired HOW WE WORK and product blocks had carried, restated for
   the new compositions, plus the corrections from visual review. */
body.v22 .v22how__head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  column-gap:clamp(2rem,5vw,4.5rem);align-items:end}
body.v22 .v22how__head .eb{grid-column:1 / -1}
body.v22 .v22how__h{margin:0;max-width:20ch;color:var(--ink);}
body.v22 .v22how__lede{margin:0;max-width:40ch;padding-bottom:.4rem;color:var(--ink-2);}

body.v22 .v22soft__h{margin:0;max-width:27.5ch;color:var(--ink);}
body.v22 .v22soft__h span{display:block}
body.v22 .v22soft__lede{margin:clamp(1.25rem,2.5vw,1.75rem) 0 0;max-width:50ch;color:var(--ink-2);}

/* OP Care: the devices are sized from the stage height so neither is cropped
   and both keep their supplied proportions. */
body.v22 .v22pr__dev{width:auto}
body.v22 .v22pr__dev--a{left:11%;height:90%;z-index:2}
body.v22 .v22pr__dev--b{right:10%;height:70%;bottom:9%;z-index:1}
body.v22 .v22pr__dev img{width:auto;height:100%}

/* HawkEye: the screen enters from the foot of the stage at a scale where the
   product is legible, rather than being reduced to fit a box. */
body.v22 .v22pr--hawkeye .v22pr__stage{align-items:flex-end;padding:clamp(1.5rem,3vw,2.5rem) 0 0}
body.v22 .v22pr--hawkeye .v22pr__shot{width:94%;height:auto;align-self:flex-end;
  border-radius:8px 8px 0 0;overflow:hidden;box-shadow:0 22px 44px -28px rgba(21,20,18,.55)}
body.v22 .v22pr--hawkeye .v22pr__shot img{height:auto;object-fit:cover;object-position:left top;
  aspect-ratio:16/11}

/* WHY: the two supporting sentences are the conclusion of the device, so each
   sits under the half of the story it belongs to rather than in a separate
   band at the foot of the fold. */
body.v22 .v22why__foot{margin-top:clamp(1.5rem,3vw,2.25rem);border-top:0;padding-top:0;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;
  gap:clamp(2rem,5vw,4rem)}
body.v22 .v22why__foot .v22why__sub:first-child{max-width:30ch;color:var(--ink-3)}
body.v22 .v22why__foot .v22why__sub:last-child{justify-self:end;text-align:right;max-width:34ch;color:var(--ink-2);}
@media (max-width:760px){
  body.v22 .v22why__foot{grid-template-columns:minmax(0,1fr)}
  body.v22 .v22why__foot .v22why__sub:last-child{justify-self:start;text-align:left}
  body.v22 .v22how__head{grid-template-columns:minmax(0,1fr);row-gap:1.1rem}
}

/* ---- L. FLOW ALIGNMENT AND PRODUCT SCALE -------------------------------
   Each state label starts at its own node on the line, so the four states read
   as positions on the system rather than as four columns underneath it. */
body.v22 .v22how__pay{max-width:22ch;font-size:clamp(1.5rem,1rem + 2vw,2.75rem)}

/* OP Care: the pair fills its stage properly rather than floating in it. */
body.v22 .v22pr__dev--a{left:8%;height:96%}
body.v22 .v22pr__dev--b{right:7%;height:76%;bottom:7%}
body.v22 .v22pr--onepayroll .v22pr__shot img{object-position:center 34%}

@media (max-width:900px){
}

/* ==========================================================================
   V2.3 — HOMEPAGE DESIGN PASS
   One typographic system, one arrow, and a distinct visual grammar per fold.
   ========================================================================== */

/* ---- 1. ONE ARROW FOR EVERY CONTEXTUAL LINK --------------------------- */
.arw{width:24px;height:12px;flex:none;display:inline-block;vertical-align:middle;
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s var(--ease)}
.tlink .arw,a:hover > .arw,a:focus-visible > .arw{transform:none}
a:hover .arw,a:focus-visible .arw,.v22pr__a:hover .arw{transform:translateX(5px)}

/* ---- 2. TYPE: ONE SCALE, FUNCTION BY FUNCTION -------------------------- */
body.v22{
  --v22-state:clamp(1.625rem,1rem + 2.3vw,3.25rem);
  --v22-lede:clamp(1.125rem,1.02rem + .62vw,1.375rem);
  --v22-sub:clamp(1.0625rem,1rem + .3vw,1.1875rem);
  --v22-rule:rgba(21,20,18,.13);
}
/* every section opening uses the same three steps */
body.v22 .v22soft__h{margin:0;} body.v22 .v22why__h,body.v22 .v22what__h,body.v22 .v22how__h,body.v22 .v22ind__h,body.v22 .v22rec__h,body.v22 .v22about__h,body.v22 .v22talk__h{margin:0;}
body.v22 .v22what__lede,body.v22 .v22how__lede,body.v22 .v22soft__lede{margin:clamp(1.1rem,2vw,1.5rem) 0 0;max-width:52ch;}
body.v22 .v22what__lede{color:rgba(255,255,255,.74)}
body.v22 .v22how__lede,body.v22 .v22soft__lede{color:var(--ink-2)}
body.v22 .v22why__h{max-width:22.5ch}
body.v22 .v22what__h{max-width:21.2ch;color:#fff}
body.v22 .v22how__h{max-width:20ch;color:var(--ink)}
body.v22 .v22ind__h{max-width:20ch;color:var(--ink)}
body.v22 .v22soft__h{max-width:27.5ch;color:var(--ink);}
body.v22 .v22soft__h span{display:block}
body.v22 .v22rec__h,body.v22 .v22about__h{color:var(--ink)}
body.v22 .v22talk__h{color:#fff}

/* ---- 3. WHY ONE BCG: one conclusion, one weight ------------------------ */
body.v22 .v22why__foot{margin-top:clamp(2rem,4vw,3rem);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,5vw,4rem);
  border-top:0;padding-top:0}
body.v22 .v22why__sub{margin:0;max-width:40ch;color:var(--ink-2);}
body.v22 .v22why__sub + .v22why__sub{padding-left:clamp(1rem,2vw,1.75rem);
  border-left:2px solid var(--red)}

/* ---- 4. WHAT WE DO: the capability set as an editorial index ----------- */
body.v22 .v22cap{list-style:none;margin:clamp(2.5rem,5vw,4rem) 0 0;padding:0;
  border-top:1px solid rgba(255,255,255,.16)}
body.v22 .v22cap__i{border-bottom:1px solid rgba(255,255,255,.16)}
body.v22 .v22cap__i a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(1.25rem,3vw,2.5rem);
  padding:clamp(1.1rem,2.2vw,1.6rem) 0;text-decoration:none;color:rgba(255,255,255,.82);
  transition:color .3s ease,padding-left .35s var(--ease)}
body.v22 .v22cap__n{color:var(--red-light);opacity:.8;}

body.v22 .v22cap__ar{opacity:0;transform:translateX(-6px);
  transition:opacity .3s ease,transform .3s var(--ease)}
body.v22 .v22cap__i a:hover,body.v22 .v22cap__i a:focus-visible{color:#fff;
  padding-left:clamp(.5rem,1.2vw,1rem)}
body.v22 .v22cap__i a:hover .v22cap__ar,
body.v22 .v22cap__i a:focus-visible .v22cap__ar{opacity:1;transform:none}
body.v22 .v22what__close{margin-top:clamp(2.75rem,5vw,4rem);display:flex;
  flex-direction:column;align-items:flex-start;gap:clamp(1.5rem,3vw,2.25rem)}
body.v22 .v22what__rule{margin:0;max-width:30ch;color:#fff;padding-left:clamp(1.25rem,2.5vw,2rem);border-left:3px solid var(--red);}

/* ---- 5. HOW WE WORK: four states, each more resolved than the last ----- */
body.v22 .v22how{background:var(--paper)}
body.v22 .v22how__head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  column-gap:clamp(2rem,5vw,4.5rem);align-items:end}
body.v22 .v22how__head .eb{grid-column:1 / -1}
body.v22 .v22how__lede{padding-bottom:.35rem}
body.v22 .v22step{list-style:none;margin:clamp(2.75rem,5.5vw,4.5rem) 0 0;padding:0}
body.v22 .v22step__i{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  align-items:baseline;column-gap:clamp(1.5rem,4vw,3.5rem);
  padding:clamp(.6rem,1.4vw,1rem) 0}
body.v22 .v22step__k{margin:0;}
body.v22 .v22step__v{margin:0;font-size:var(--v22-sub);line-height:1.5;
  color:var(--ink-3);max-width:28ch}
/* the progression: colour and weight firm up, position steps across */
body.v22 .v22step__i--1{margin-left:0}
body.v22 .v22step__i--2{margin-left:4%}
body.v22 .v22step__i--3{margin-left:8%}
body.v22 .v22step__i--4{margin-left:12%}
body.v22 .v22step__i--1 .v22step__k{color:#8D877C;}
body.v22 .v22step__i--2 .v22step__k{color:#6A6459;}
body.v22 .v22step__i--3 .v22step__k{color:#3E3A33;}
body.v22 .v22step__i--4 .v22step__k{color:var(--ink);position:relative;}
body.v22 .v22step__i--4 .v22step__k::after{content:"";position:absolute;left:0;right:0;
  bottom:-.18em;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease-line) .5s}
body.v22 .v22step.in .v22step__i--4 .v22step__k::after{transform:scaleX(1)}
body.v22 .v22step__i{opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
body.v22 .v22step.in .v22step__i{opacity:1;transform:none}
body.v22 .v22step.in .v22step__i--2{transition-delay:.12s}
body.v22 .v22step.in .v22step__i--3{transition-delay:.24s}
body.v22 .v22step.in .v22step__i--4{transition-delay:.36s}
body.v22 .v22how__pay{margin-left:12%;margin-top:clamp(2.5rem,5vw,3.75rem);
  max-width:46rem;display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(1.1rem,2vw,1.5rem)}
body.v22 .v22how__payh{margin:0;max-width:20ch;color:var(--ink);}
body.v22 .v22how__subs{margin:0;max-width:52ch;color:var(--ink-3);}

/* ---- 6. INDUSTRIES ----------------------------------------------------- */
body.v22 .v22panel__media{background:var(--n-1)}
body.v22 .v22panel__hold{display:block;width:100%;height:100%}
body.v22 .v22panel--photo .v22panel__hold picture,
body.v22 .v22panel--photo .v22panel__hold img{display:block;width:100%;height:100%;
  object-fit:cover}
/* a product screen is shown as a screen: held, not bled to the edges */
body.v22 .v22panel--screen .v22panel__media{display:flex;align-items:flex-end;
  justify-content:center;padding:clamp(2rem,4vw,3.5rem) clamp(2rem,4vw,3.5rem) 0;
  background:linear-gradient(170deg,#FFFFFF 0%,var(--warm-2) 100%)}
body.v22 .v22panel--screen .v22panel__hold{width:min(100%,560px);height:auto;
  border-radius:10px 10px 0 0;overflow:hidden;
  box-shadow:0 26px 50px -30px rgba(21,20,18,.55)}
body.v22 .v22panel--screen img{display:block;width:100%;height:auto}
/* a device is shown as a device, standing on the stage */
body.v22 .v22panel--device .v22panel__media{display:flex;align-items:flex-end;
  justify-content:center;padding-top:clamp(2rem,4vw,3.5rem);
  background:linear-gradient(170deg,#FFFFFF 0%,var(--warm-2) 100%)}
body.v22 .v22panel--device .v22panel__hold{width:auto;height:88%;display:flex;
  align-items:flex-end}
body.v22 .v22panel--device picture,body.v22 .v22panel--device img{display:block;
  width:auto;height:100%;max-height:420px}
body.v22 .v22panel__cross{color:var(--ink-2);}
body.v22 .v22panel__p{color:var(--ink-2);}
/* product evidence: the product name keeps ONE red, the arrow is the affordance */
body.v22 .v22panel__ev{margin-top:clamp(1.5rem,3vw,2rem);display:flex;
  align-items:center;gap:1rem;flex-wrap:wrap;padding-top:1.1rem;
  border-top:1px solid var(--v22-rule)}
body.v22 .v22panel__ev > span{font-size:.6875rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3)}
body.v22 .v22panel__ev a{display:inline-flex;align-items:center;gap:.6rem;
  font-size:1.0625rem;font-weight:700;color:var(--red);text-decoration:none}
body.v22 .v22panel__ar{color:var(--ink)}
body.v22 .v22panel__ev a:hover,body.v22 .v22panel__ev a:focus-visible{text-decoration:underline;
  text-underline-offset:4px}
/* the closing insight belongs to the examples above it */
body.v22 .v22ind__foot{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(1.5rem,3vw,2rem);padding-block:clamp(2.75rem,5vw,4rem) clamp(4.5rem,9vw,7rem)}
body.v22 .v22ind__out{margin:0;max-width:37.5ch;color:var(--ink);}

/* ---- 7. OUR SOFTWARE: conclusion attached ------------------------------ */
body.v22 .v22soft__close{margin-top:clamp(3rem,4vw,4rem);display:flex;
  flex-direction:column;align-items:flex-start;gap:clamp(1.1rem,2vw,1.5rem)}
body.v22 .v22soft__sub{margin:0;max-width:58ch;color:var(--ink-2);}
/* OP Care: one paired composition, devices close, overlapping, offset */
body.v22 .v22pr__dev--a{left:9%;height:98%;bottom:0;z-index:2}
body.v22 .v22pr__dev--b{left:44%;right:auto;height:84%;bottom:9%;z-index:1}

/* ---- 8. RECOGNITION: a credibility moment with room ------------------- */
body.v22 .v22rec{background:var(--n-1)}
body.v22 .v22rec__head{max-width:40ch}
body.v22 .v22rec__in{margin-top:clamp(2.5rem,5vw,3.75rem);display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(2.5rem,6vw,5.5rem);
  align-items:start}
body.v22 .v22rec__art{margin:0;position:relative;max-width:330px;justify-self:start}
body.v22 .v22rec__art::before{content:"";position:absolute;inset:auto auto -20px -20px;
  width:62%;height:62%;background:var(--warm-2);z-index:0}
body.v22 .v22rec__art picture{position:relative;z-index:1;display:block}
body.v22 .v22rec__art img{display:block;width:100%;height:auto}
body.v22 .v22rec__list{display:grid;gap:clamp(2rem,4vw,3rem)}
body.v22 .v22rec__i{padding-top:clamp(1.25rem,2.5vw,1.75rem);
  border-top:1px solid var(--v22-rule)}
body.v22 .v22rec__yr{margin:0 0 .85rem;text-transform:uppercase;color:var(--red);}
body.v22 .v22rec__t{margin:0;color:var(--ink);max-width:22ch;}
body.v22 .v22rec__d{margin:.85rem 0 0;max-width:40ch;color:var(--ink-2);}
body.v22 .v22rec__mark{display:block;width:150px;margin:1.4rem 0 0}
body.v22 .v22rec__mark img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
body.v22 .v22rec__l{display:inline-flex;align-items:center;gap:.65rem;
  margin-top:1.4rem;font-size:1rem;font-weight:600;color:var(--ink);text-decoration:none}
body.v22 .v22rec__l:hover,body.v22 .v22rec__l:focus-visible{color:var(--red)}

/* ---- 9. ABOUT ---------------------------------------------------------- */
body.v22 .v22about__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5rem);align-items:end}
body.v22 .v22about__say{display:flex;flex-direction:column;align-items:flex-start}
body.v22 .v22about__p{margin:0 0 1.1rem;max-width:44ch;color:var(--ink-2);}
body.v22 .v22about__say .tlink{margin-top:.6rem}
body.v22 .v22facts{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2.5vw,2rem)}


/* ---- 10. LET'S TALK: the page closes deliberately ---------------------- */
body.v22 .v22talk{background:var(--dark);color:#fff;
  padding-block:clamp(5rem,9vw,8rem) clamp(1.75rem,3vw,2.5rem)}
body.v22 .v22talk::before{display:none}
body.v22 .v22talk__in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2.5rem,6vw,5.5rem);align-items:start}
body.v22 .v22talk__p{margin:clamp(1.25rem,2.5vw,1.75rem) 0 0;max-width:38ch;color:rgba(255,255,255,.76);}
body.v22 .v22talk__lift{margin:clamp(1.5rem,3vw,2rem) 0 0;max-width:24ch;color:#fff;}
body.v22 .v22talk__alt{margin:clamp(2rem,4vw,3rem) 0 0}
body.v22 .v22form{background:var(--paper);border:0;border-radius:18px;
  padding:clamp(1.75rem,3.5vw,2.75rem)}

/* ---- 11. RESPONSIVE ---------------------------------------------------- */
@media (max-width:1040px){
  body.v22 .v22rec__in,body.v22 .v22about__top,body.v22 .v22talk__in{
    grid-template-columns:minmax(0,1fr);gap:2.5rem;align-items:start}
  body.v22 .v22rec__art{max-width:260px}
  body.v22 .v22how__head{grid-template-columns:minmax(0,1fr);row-gap:1.1rem}
  body.v22 .v22step__i{grid-template-columns:minmax(0,1fr);row-gap:.4rem}
  body.v22 .v22step__v{max-width:40ch}
  body.v22 .v22panel--device .v22panel__hold{height:auto}
  body.v22 .v22panel--device img{max-height:360px}
}
@media (max-width:760px){
  body.v22 .v22why__foot{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  body.v22 .v22why__sub + .v22why__sub{padding-left:1rem}
  body.v22 .v22facts{grid-template-columns:minmax(0,1fr);gap:1.4rem}
  body.v22 .v22step__i--2,body.v22 .v22step__i--3,body.v22 .v22step__i--4{margin-left:0}
  body.v22 .v22how__pay{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  body.v22 .v22how__payh{max-width:24ch}
  
  body.v22 .v22panel--screen .v22panel__media{padding:1.5rem 1.5rem 0}
  body.v22 .v22panel--device img{max-height:300px}
}
@media (max-width:600px){
  body.v22 .v22cap__i a{grid-template-columns:auto minmax(0,1fr);row-gap:.3rem}
  body.v22 .v22cap__ar{display:none}
  body.v22 .v22rec__art{max-width:100%}
}

/* ---- 12. REDUCED MOTION AND NO-JS -------------------------------------- */
.no-js body.v22 .v22step__i,html:not(.anim) body.v22 .v22step__i{opacity:1;transform:none}
.no-js body.v22 .v22step__i--4 .v22step__k::after,
html:not(.anim) body.v22 .v22step__i--4 .v22step__k::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  body.v22 .v22step__i{opacity:1;transform:none;transition:none}
  body.v22 .v22step__i--4 .v22step__k::after{transform:scaleX(1);transition:none}
  body.v22 .v22cap__i a,body.v22 .v22cap__ar,.arw{transition:none}
}

/* the Healthcare device holds its stage rather than floating in it */
body.v22 .v22panel--device .v22panel__hold{height:96%}
body.v22 .v22panel--device picture,body.v22 .v22panel--device img{max-height:460px}
@media (max-width:1040px){body.v22 .v22panel--device img{max-height:380px}}
@media (max-width:760px){body.v22 .v22panel--device img{max-height:320px}}

/* ---- 13. V2.3 CORRECTIONS FROM VISUAL REVIEW ---------------------------
   The closing fold is now a dark surface, and the form card sits on it as a
   light panel. Everything inside that panel has to be re-grounded to ink, or
   the labels inherit the section's white and vanish against the card. */
body.v22 .v22talk .v22form,
body.v22 .v22talk .v22form label,
body.v22 .v22talk .v22form input,
body.v22 .v22talk .v22form textarea{color:var(--ink)}
body.v22 .v22talk .v22form .formnote,
body.v22 .v22talk .v22form__note{color:var(--ink-3)}
body.v22 .v22talk .v22form input::placeholder,
body.v22 .v22talk .v22form textarea::placeholder{color:var(--ink-3);opacity:1}

/* OP Care: the brand device sits fully inside its stage, nothing clipped. */
body.v22 .v22pr--opcare .v22pr__stage{padding-top:clamp(1.25rem,2.5vw,2rem)}
body.v22 .v22pr__dev--a{height:92%}
body.v22 .v22pr__dev--b{height:79%;bottom:8%}
/* One Payroll: the frame includes the work, not only the face. */
body.v22 .v22pr--onepayroll .v22pr__shot img{object-position:center 52%}

/* Recognition: the certificate and the entries share the measure instead of
   leaving a corridor of dead space between them. */
body.v22 .v22rec__in{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(2rem,4.5vw,4rem)}
body.v22 .v22rec__art{max-width:400px;justify-self:stretch}
body.v22 .v22rec__list{padding-top:0}
body.v22 .v22rec__i:first-child{padding-top:0;border-top:0}
body.v22 .v22rec__mark{background:var(--paper);padding:.9rem 1.1rem;border-radius:8px;
  width:178px;box-sizing:border-box}
body.v22 .v22rec__mark img{mix-blend-mode:normal}

/* About: the opening paragraph needs air under the heading. */
body.v22 .v22about__p:first-of-type{margin-top:clamp(1.25rem,2.5vw,1.75rem)}
body.v22 .v22talk__alt{color:rgba(255,255,255,.62)}

/* ---- 14. SECTION RHYTHM ------------------------------------------------
   Three consecutive sections were sitting on the same pale grey, which made
   the lower third of the page read as one undifferentiated stretch. The
   surfaces now alternate deliberately: white for the industries conclusion,
   a step deeper for the product showcase so its white panels lift off it,
   white again for recognition, and a light grey for About before the page
   closes on dark. */
body.v22 .v22ind{background:var(--paper)}
body.v22 .v22soft{background:var(--warm-2)}
body.v22 .v22rec{background:var(--paper)}
body.v22 .v22about{background:var(--warm)}
body.v22 .v22pr__stage{background:linear-gradient(170deg,#FFFFFF 0%,#EFEFEC 100%)}
body.v22 .v22rec__art::before{background:var(--warm-2)}
body.v22 .v22rec__mark{background:var(--warm-2)}

/* the industries conclusion follows its examples closely */
body.v22 .v22ind__foot{padding-block:clamp(2.25rem,4vw,3.25rem) clamp(4rem,7vw,6rem)}

/* ---- 15. WHY: the two conclusions read as one pair ---------------------
   Same size, same weight, same colour, both left-aligned. The second carries
   the red rule because it is where ONE BCG enters the story, not because it
   is a different class of content. */
body.v22 .v22why__foot .v22why__sub:first-child,body.v22 .v22why__foot .v22why__sub:last-child{text-align:left;justify-self:start;color:var(--ink-2);max-width:40ch;}

/* ==========================================================================
   V2.4 — HOME CORRECTIONS
   Three scoped changes. Nothing else on the homepage is touched.
   ========================================================================== */

/* ---- A. HOW WE WORK: restrained, not a typographic poster ---------------
   The four states keep their progression but come down to a scale that reads
   as an enterprise page rather than an editorial poster, the staircase is
   reduced to a deliberate step, each description now sits on the same line as
   its stage so the pair cannot drift apart, and the payoff is a conclusion
   rather than a second headline. */
body.v22 .v22step{margin-top:clamp(2.25rem,4.5vw,3.5rem)}
body.v22 .v22step__i{grid-template-columns:minmax(0,auto) minmax(0,1fr);
  align-items:baseline;column-gap:clamp(1.5rem,3vw,2.5rem);
  padding:clamp(.75rem,1.6vw,1.1rem) 0}

body.v22 .v22step__v{font-size:1.0625rem;line-height:1.55;max-width:34ch;
  color:var(--ink-3)}
body.v22 .v22step__i--1{margin-left:0}
body.v22 .v22step__i--2{margin-left:2.5%}
body.v22 .v22step__i--3{margin-left:5%}
body.v22 .v22step__i--4{margin-left:7.5%}
body.v22 .v22step__i--1 .v22step__k{color:#767166;}
body.v22 .v22step__i--2 .v22step__k{color:#5E584E;}
body.v22 .v22step__i--3 .v22step__k{color:#3A362F;}
body.v22 .v22step__i--4 .v22step__k{color:var(--ink);}
body.v22 .v22step__i--4 .v22step__k::after{height:2px;bottom:-.22em}
/* ---- A2. THE CLOSING COMPOSITION -----------------------------------------
   The conclusion resolves the four-state progression above it rather than
   hanging off the end of it. One hairline closes the process across the full
   measure; the payoff takes the left, and the resolution and its route take
   the right, so the width the states occupy is the width the conclusion
   occupies. The supporting paragraph previously inherited weight 250 and
   -0.032em tracking from this container, which is what made it read as a
   narrower, lighter typeface than the rest of Home. It now takes the site
   supporting-copy role unmodified. */
body.v22 .v22how__pay{display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(1.5rem,5vw,4.5rem);align-items:start;
  margin:clamp(2.5rem,5vw,3.75rem) 0 0;max-width:none;
  padding-top:clamp(1.75rem,3.5vw,2.5rem);
  border-top:1px solid var(--v22-rule);
  font-size:inherit;font-weight:400;letter-spacing:normal;line-height:inherit}
body.v22 .v22how__payh{margin:0;max-width:22ch;color:var(--ink);}
body.v22 .v22how__res{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(1.25rem,2.4vw,1.75rem);padding-top:.35rem}
body.v22 .v22how__subs{margin:0;max-width:54ch;color:var(--ink-3);}

/* ---- B. HEALTHCARE: the same genuine product, art-directed for this panel
   Both OP Care devices, larger and tighter than in OUR SOFTWARE, rising out of
   the foot of the panel rather than standing on a stage, so the evidence is
   recognisably the same product without the card being repeated. */
body.v22 .v22panel--device .v22panel__media{align-items:flex-end;
  padding:clamp(2.5rem,5vw,4rem) clamp(1.5rem,3vw,2.5rem) 0;overflow:hidden}
body.v22 .v22panel__pair{position:relative;display:block;width:100%;
  height:clamp(300px,34vw,440px)}
body.v22 .v22panel__dev{position:absolute;bottom:0;display:block}
body.v22 .v22panel__dev img,body.v22 .v22panel__dev picture{display:block;
  width:auto;height:100%}
body.v22 .v22panel__dev--a{left:14%;height:100%;z-index:2}
body.v22 .v22panel__dev--b{left:40%;height:86%;bottom:7%;z-index:1}

/* ---- C. PRODUCT EVIDENCE: editorial, not promotional -------------------- */
body.v22 .v22panel__ev > span{font-weight:500;letter-spacing:.16em;color:var(--ink-3)}
body.v22 .v22panel__ev a{font-weight:400;font-size:1.0625rem;color:var(--red)}
body.v22 .v22panel__ev a:hover,body.v22 .v22panel__ev a:focus-visible{
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:rgba(196,11,15,.45)}
/* weight is not the way hierarchy is made anywhere on the page */
.tlink{font-weight:500}
body.v22 .v22pr__go{font-weight:500}
body.v22 .v22rec__l{font-weight:500}

@media (max-width:1040px){
  body.v22 .v22panel__pair{height:clamp(260px,38vw,340px)}
  body.v22 .v22panel__dev--a{left:15%}
  body.v22 .v22panel__dev--b{left:36%}
}
@media (max-width:760px){
  body.v22 .v22step__i--2,body.v22 .v22step__i--3,body.v22 .v22step__i--4{margin-left:0}
  body.v22 .v22step__i{grid-template-columns:minmax(0,1fr);row-gap:.3rem}
  body.v22 .v22panel__pair{height:300px}
  body.v22 .v22panel__dev--a{left:9%}
  body.v22 .v22panel__dev--b{left:37%}
}


/* ==========================================================================
   ONE BCG SEMANTIC TYPOGRAPHY

   One scale for the whole site, read off the approved Home page rather than
   invented. Every clamp below is copied verbatim from the expression Home
   already uses, so a role resolves to the same pixel value on every page at
   every viewport.

     role                 1440     834      390     weight
     page H1              72px     54px     40px    200
     section H2           48px     38px     29px    250
     editorial statement  34px     28px     22px    300
     section lede         22px     19px     18px    400
     supporting copy      19px     18px     17px    400
     body copy            17px     17px     17px    400
     contextual link      16px     16px     16px    500
     eyebrow / metadata   12px     12px     12px    700

   Hierarchy comes from scale, placement, measure, whitespace and colour.
   Weight is part of the role, never a way to emphasise a sentence.
   ========================================================================== */

/* ==========================================================================
   V2.5 — WHAT WE DO and HOW WE WORK

   Scoped entirely to `body.v25`. The homepage and the twenty-two other pages
   cannot be reached by anything below.

   Two rules govern this layer. Every fold earns its own composition, so there
   is no reusable "section component" applied across the pages. And every
   enhanced state has a resolved resting state in CSS, so a page with no script,
   a blocked script or reduced motion renders the finished composition rather
   than an empty one.
   ========================================================================== */

body.v25{
  --v25-rule:rgba(21,20,18,.13);
  --v25-rule-d:rgba(255,255,255,.17);
}

/* Every text element on these two pages resolves to one of the eight site
   roles. There is no page-local scale and no per-section sizing. */
body.v25 .v25whero__h,body.v25 .v25hhero__h{margin:0;}
body.v25 .v25diag__h,body.v25 .v25cap__h,body.v25 .v25cross__h,body.v25 .v25depth__h,body.v25 .v25env__h,body.v25 .v25start__h,body.v25 .v25model__h,body.v25 .v25acc__h,body.v25 .v25both__h,body.v25 .v25prod__h,body.v25 .v25meas__h,body.v25 .v25entry__h,body.v25 .v25close__h{margin:0;}
body.v25 .v25field__i a,body.v25 .v25cand__i--res,body.v25 .v25capi__k,
body.v25 .v25start__after span,body.v25 .v25mpanel__k,body.v25 .v25join__w{
  font-size:var(--ty-st);font-weight:var(--ty-st-w);
  line-height:var(--ty-st-lh);letter-spacing:var(--ty-st-ls)}
body.v25 .v25whero__lede,body.v25 .v25cand__i,body.v25 .v25cap__lede,
body.v25 .v25diag__out,body.v25 .v25x__t,body.v25 .v25cross__out,
body.v25 .v25depth__lede,body.v25 .v25env__p,body.v25 .v25start__p,
body.v25 .v25model__out,body.v25 .v25acc__say p,body.v25 .v25prin dt,
body.v25 .v25join__t,body.v25 .v25join__out,body.v25 .v25prod__lift,
body.v25 .v25case__l,body.v25 .v25meas__out,body.v25 .v25door__t,
body.v25 .v25entry__out{
  font-size:var(--ty-lede);font-weight:var(--ty-reg);line-height:var(--ty-lede-lh);
  letter-spacing:var(--ty-flat)}
body.v25 .v25whero__lift,body.v25 .v25capi__p,body.v25 .v25stratum,
body.v25 .v25close__p,body.v25 .v25hhero__say p,body.v25 .v25prin dd,
body.v25 .v25prod__p,body.v25 .v25case__mid p,body.v25 .v25mindex__k,
body.v25 .v25mpanel__p{
  font-size:var(--ty-sup);font-weight:var(--ty-reg);line-height:var(--ty-sup-lh);
  letter-spacing:var(--ty-flat)}
body.v25 .v25x__c{font-size:var(--ty-body);font-weight:var(--ty-reg);
  line-height:var(--ty-body-lh);letter-spacing:var(--ty-flat)}
body.v25 .v25capi__n,body.v25 .v25x__n,body.v25 .v25mindex__n,
body.v25 .v25mpanel__n,body.v25 .v25case__s,body.v25 .v25hhero__eb{
  font-size:var(--ty-meta);font-weight:var(--ty-meta-w);letter-spacing:var(--ty-meta-ls);
  line-height:1.65;font-variant-numeric:tabular-nums}

/* ---- trail bar: out of the page opening, into a hairline of its own ----- */
body.v25 .v25trail{border-bottom:1px solid var(--v25-rule);padding-block:.85rem}
body.v25 .v25trail .crumb li{color:var(--ink-3)}
body.v25 .v25trail .crumb a{color:var(--ink-2);text-decoration:none}
body.v25 .v25trail .crumb a:hover{color:var(--red)}

/* ========================================================== WHAT WE DO ==== */

/* ---- HERO: light, banded, with the capability field beside the approach -- */
body.v25 .v25whero{background:var(--paper);position:relative;overflow:hidden}
body.v25 .v25whero__in{padding-block:clamp(3.5rem,8vh,6rem) clamp(4rem,9vh,7rem)}
body.v25 .v25whero__h{max-width:none}
body.v25 .v25whero__grid{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(2.25rem,6vw,5.5rem);align-items:start;
  margin-top:clamp(2.5rem,6vh,4.25rem);
  padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--v25-rule)}
body.v25 .v25whero__lede{margin:0;color:var(--ink-2);max-width:44ch}
body.v25 .v25whero__lift{margin:clamp(1.1rem,2.2vw,1.6rem) 0 0;color:var(--ink-3);
  max-width:56ch}
body.v25 .v25whero__cta{margin-top:clamp(1.75rem,3.5vw,2.5rem);gap:2rem}

body.v25 .v25field{position:relative;padding-left:clamp(1.25rem,2.6vw,2rem)}
body.v25 .v25field__rule{position:absolute;left:0;top:.28em;bottom:.4em;width:1px;
  background:var(--v25-rule);display:block;overflow:hidden}
body.v25 .v25field__rule::after{content:"";position:absolute;left:0;top:0;width:1px;
  height:100%;background:transparent}
body.v25 .v25field__rule i{position:absolute;inset:0;background:var(--red);
  transform:scaleY(1);transform-origin:top}
body.v25 .v25field__list{list-style:none;margin:0;padding:0}
body.v25 .v25field__i + .v25field__i{margin-top:clamp(.35rem,1vw,.7rem)}
body.v25 .v25field__i a{display:block;text-decoration:none;color:var(--ink);
  transition:color .3s var(--ease)}
body.v25 .v25field__i a:hover,body.v25 .v25field__i a:focus-visible{color:var(--red)}
/* enhanced opening: the rule draws down and each capability resolves as it
   passes. The script adds `is-seq`; without it the markup above is already the
   finished state. */
body.v25 .v25field.is-seq .v25field__rule i{transform:scaleY(0);
  transition:transform 1.15s var(--ease-line) .15s}
body.v25 .v25field.is-seq .v25field__i a{opacity:.26;transform:translateY(6px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s var(--ease)}
body.v25 .v25field.is-seq.in .v25field__rule i{transform:scaleY(1)}
body.v25 .v25field.is-seq.in .v25field__i a{opacity:1;transform:none}
body.v25 .v25field.is-seq.in .v25field__i:nth-child(2) a{transition-delay:.18s}
body.v25 .v25field.is-seq.in .v25field__i:nth-child(3) a{transition-delay:.36s}
body.v25 .v25field.is-seq.in .v25field__i:nth-child(4) a{transition-delay:.54s}
body.v25 .v25field.is-seq.in .v25field__i:nth-child(5) a{transition-delay:.72s}

/* ---- §2 DIAGNOSIS: candidates considered, then set aside ---------------- */
body.v25 .v25diag__h{max-width:23.8ch}
body.v25 .v25diag__body{margin-top:clamp(2.25rem,4.5vw,3.5rem)}
/* The four candidate answers step away from the margin as each is considered.
   The line that is not a technology answer returns to the margin, where the
   heading is, so the resolution lands where the question was asked. */
body.v25 .v25cand{list-style:none;margin:0;padding:0;max-width:52rem}
body.v25 .v25cand__i{position:relative;
  padding:clamp(.6rem,1.4vw,.95rem) 0 clamp(.6rem,1.4vw,.95rem) clamp(1.1rem,2.2vw,1.75rem);
  margin-left:calc(var(--s,0) * clamp(1.5rem,4.5vw,4.5rem));color:var(--ink)}
body.v25 .v25cand__i::before{content:"";position:absolute;left:0;
  top:clamp(.6rem,1.4vw,.95rem);bottom:clamp(.6rem,1.4vw,.95rem);
  width:1px;background:var(--v25-rule)}
body.v25 .v25cand__i:nth-child(2){--s:1}
body.v25 .v25cand__i:nth-child(3){--s:2}
body.v25 .v25cand__i:nth-child(4){--s:3}
body.v25 .v25cand__i--res{margin-left:0;padding-left:0;
  margin-top:clamp(1.75rem,3.5vw,2.5rem);padding-top:clamp(1.5rem,3vw,2.25rem);
  border-top:2px solid var(--red);max-width:26ch}
body.v25 .v25cand__i--res::before{display:none}
body.v25 .v25diag__out{margin:clamp(2rem,4vw,3rem) 0 0 auto;max-width:42ch;
  color:var(--ink-2)}
/* enhanced: the four candidates recede once the resolution is reached */
body.v25 .v25cand.is-seq .v25cand__i span{display:inline-block;
  transition:opacity .6s var(--ease),transform .6s var(--ease),color .6s var(--ease)}
body.v25 .v25cand.is-seq .v25cand__i{opacity:1}
body.v25 .v25cand.is-seq.is-res .v25cand__i:not(.v25cand__i--res) span{
  opacity:.4;transform:translateX(-6px);color:var(--ink-3)}

/* ---- §3 CAPABILITIES: one holds the fold at a time --------------------- */
body.v25 .v25cap__head{max-width:none}
body.v25 .v25cap__h{max-width:32.5ch}
body.v25 .v25cap__lede{margin:clamp(1.25rem,2.6vw,1.9rem) 0 0 auto;max-width:56ch;
  color:#C6C0B5}
body.v25 .v25caps{list-style:none;margin:clamp(2.75rem,5.5vw,4.5rem) 0 0;padding:0;
  border-top:1px solid var(--v25-rule-d)}
body.v25 .v25capi{border-bottom:1px solid var(--v25-rule-d)}
body.v25 .v25capi__a{position:relative;display:grid;
  grid-template-columns:clamp(2.5rem,5vw,4rem) minmax(0,1.1fr) minmax(0,.9fr);
  grid-template-areas:"n k p";
  gap:0 clamp(1rem,2.4vw,2rem);padding:clamp(1.5rem,3.4vw,2.5rem) 0;
  align-items:baseline;text-decoration:none;color:inherit}
body.v25 .v25capi__mark{grid-area:n;position:absolute;left:0;top:clamp(1.5rem,3.4vw,2.5rem);
  width:2px;height:clamp(1.5rem,2.4vw,2.25rem);background:var(--red);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease-line)}
body.v25 .v25capi__n{grid-area:n;color:#8A8479;
  padding-left:clamp(.9rem,1.8vw,1.25rem);transition:color .4s var(--ease)}
body.v25 .v25capi__k{grid-area:k;display:block;color:#D8D3C9;
  transition:color .4s var(--ease),transform .5s var(--ease);
  transform-origin:left center}
body.v25 .v25capi__k .arw{margin-left:.65rem}
body.v25 .v25capi__p{grid-area:p;margin:0;max-width:48ch;color:#9A948A;
  transition:color .4s var(--ease),opacity .4s var(--ease),transform .4s var(--ease)}
/* resolved resting state: everything readable, every row a link */
body.v25 .v25capi__a:hover .v25capi__k,
body.v25 .v25capi__a:focus-visible .v25capi__k{color:#fff}
body.v25 .v25capi__a:hover .v25capi__mark,
body.v25 .v25capi__a:focus-visible .v25capi__mark{transform:scaleY(1)}
/* enhanced: the row in view takes the foreground, the rest stay legible */
body.v25 .v25caps.is-seq .v25capi__k{color:#8A8479}
body.v25 .v25caps.is-seq .v25capi__p{color:#8A8479;transform:translateX(8px)}
body.v25 .v25caps.is-seq .v25capi.is-on .v25capi__k{color:#fff;transform:scale(1.045)}
body.v25 .v25caps.is-seq .v25capi.is-on .v25capi__p{transform:none;color:#C6C0B5}
body.v25 .v25caps.is-seq .v25capi.is-on .v25capi__n{color:var(--red-light)}
body.v25 .v25caps.is-seq .v25capi.is-on .v25capi__mark{transform:scaleY(1)}

/* ---- §4 CROSS-BOUNDARY: the disciplines gather on one problem ---------- */
body.v25 .v25cross{padding-top:0}
body.v25 .v25cross__h{max-width:25ch}
body.v25 .v25xs{list-style:none;margin:clamp(2.5rem,5vw,4rem) 0 0;padding:0;
  display:grid;gap:clamp(2.25rem,4.5vw,3.5rem)}
body.v25 .v25x__t{position:relative;margin:0;padding-left:clamp(2.5rem,5vw,4rem);
  color:#fff;max-width:54ch}
body.v25 .v25x__n{position:absolute;left:0;top:.42em;color:var(--red-light)}
body.v25 .v25x__set{position:relative;display:flex;flex-wrap:wrap;
  gap:.5rem clamp(1rem,2.4vw,2rem);
  margin:clamp(1rem,2vw,1.4rem) 0 0 clamp(2.5rem,5vw,4rem);
  padding-top:clamp(.8rem,1.6vw,1.1rem)}
body.v25 .v25x__rule{position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--v25-rule-d);display:block;overflow:hidden}
body.v25 .v25x__rule i{position:absolute;inset:0;background:var(--red);
  transform:scaleX(1);transform-origin:left}
body.v25 .v25x__c{color:#C6C0B5}
body.v25 .v25x .v25x__rule i{transition:transform .9s var(--ease-line)}
html.anim body.v25 .v25x.reveal:not(.in) .v25x__rule i{transform:scaleX(0)}
html.anim body.v25 .v25x.reveal:not(.in) .v25x__c{opacity:0;transform:translateY(6px)}
body.v25 .v25x__c{transition:opacity .5s var(--ease),transform .5s var(--ease)}
body.v25 .v25x.in .v25x__c:nth-of-type(2){transition-delay:.12s}
body.v25 .v25x.in .v25x__c:nth-of-type(3){transition-delay:.24s}
body.v25 .v25cross__out{position:relative;margin:clamp(3rem,6vw,4.5rem) 0 0;
  padding-top:clamp(1.5rem,3vw,2rem);max-width:46ch;color:#fff}
body.v25 .v25cross__out::before{content:"";position:absolute;top:0;left:0;
  width:64px;height:2px;background:var(--red)}

/* ---- §5 DEPTH: nine disciplines as strata seen edge on ----------------- */
body.v25 .v25depth{background:var(--warm)}
body.v25 .v25depth__h{max-width:20ch}
body.v25 .v25depth__lede{margin:clamp(1rem,2vw,1.5rem) 0 0;max-width:52ch;
  color:var(--ink-3)}
/* Nine planes seen edge on: each one sits a little further back than the one
   above it and carries a little more of the surface, so the set reads as the
   depth under a working system rather than as nine containers. No side edges,
   because a layer has no sides. */
body.v25 .v25strata{list-style:none;margin:clamp(2.75rem,5.5vw,4.25rem) 0 0;padding:0}
body.v25 .v25stratum{position:relative;
  margin-left:calc(var(--i) * clamp(.75rem,1.8vw,1.75rem));
  padding:clamp(.9rem,1.9vw,1.25rem) clamp(1rem,2.2vw,1.6rem);
  border-top:1px solid var(--v25-rule);
  background:rgba(21,20,18,calc(.015 + var(--i) * .013));color:var(--ink-2)}
body.v25 .v25stratum:first-child{border-top:2px solid var(--red);color:var(--ink)}
body.v25 .v25stratum:last-child{border-bottom:1px solid var(--v25-rule)}
body.v25 .v25strata.is-seq .v25stratum{opacity:0;transform:translateY(14px)}
body.v25 .v25strata.is-seq.in .v25stratum{opacity:1;transform:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  transition-delay:calc(var(--i) * .055s)}

/* ---- §6 ENVIRONMENT: the photographic beat ----------------------------- */
/* The eyebrow sits on a photographic scrim here, not on a flat dark surface,
   so it takes the light red the dark sections use. The brand red is reserved
   for light surfaces, where it carries its contrast. */
body.v25 .v25env .eb{color:var(--red-light)}
body.v25 .v25env .eb::before{background:var(--red-light)}
body.v25 .v25env{position:relative;isolation:isolate;overflow:hidden;
  background:var(--hero-base);color:#fff;display:flex;align-items:flex-end;
  min-height:min(76vh,660px)}
body.v25 .v25env__media{position:absolute;inset:0;z-index:0}
body.v25 .v25env__media picture,body.v25 .v25env__media img{display:block;
  width:100%;height:100%;object-fit:cover;object-position:center 46%}
body.v25 .v25env__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(104deg,rgba(10,13,17,.9) 0%,rgba(10,13,17,.72) 42%,
    rgba(10,13,17,.3) 100%)}
body.v25 .v25env__in{position:relative;z-index:2;width:100%;
  padding-block:clamp(4rem,9vh,6.5rem)}
body.v25 .v25env__h{max-width:25ch}
body.v25 .v25env__p{margin:clamp(1.1rem,2.2vw,1.6rem) 0 0;max-width:52ch;color:#D8D3C9}
body.v25 .v25env__p--lift{color:#fff}
body.v25 .v25env .tlink{margin-top:clamp(1.5rem,3vw,2.25rem)}

/* ---- CLOSE (shared by both pages) -------------------------------------- */
body.v25 .v25close{padding-block:clamp(4.25rem,9vw,7rem)}
body.v25 .v25close__in{text-align:center}
body.v25 .v25close .eb{justify-content:center}
body.v25 .v25close__h{max-width:27.5ch;margin-inline:auto}
body.v25 .v25close__p{margin:clamp(.9rem,2vw,1.35rem) auto 0;max-width:50ch;
  color:#C6C0B5}
body.v25 .v25close__cta{justify-content:center;margin-top:clamp(2rem,4vw,2.75rem)}

/* ========================================================= HOW WE WORK ==== */

/* ---- HERO: a through-line, anchored to the foot of a tall dark field --- */
body.v25 .v25hhero{position:relative;background:var(--dark);color:#fff;
  overflow:hidden;display:flex;align-items:flex-end;min-height:min(86vh,820px)}
body.v25 .v25hhero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(130% 90% at 8% 110%,rgba(196,11,15,.17) 0%,rgba(196,11,15,0) 58%);
  pointer-events:none}
body.v25 .v25hhero__in{position:relative;z-index:1;width:100%;
  padding-block:clamp(6rem,14vh,9rem) clamp(3.5rem,8vh,5.5rem)}
body.v25 .v25hhero__eb{margin:0 0 clamp(1.5rem,3vw,2.25rem);
  text-transform:uppercase;color:var(--red-light)}
body.v25 .v25hhero__h{max-width:none}
body.v25 .v25hhero__line{display:block;height:2px;margin:clamp(1.75rem,3.5vw,2.75rem) 0 0;
  background:var(--v25-rule-d);overflow:hidden;position:relative}
body.v25 .v25hhero__line i{position:absolute;inset:0;background:var(--red);
  transform:scaleX(1);transform-origin:left}
body.v25 .v25hhero__say{margin-top:clamp(1.75rem,3.5vw,2.75rem);max-width:74rem;
  columns:2;column-gap:clamp(2rem,5vw,4.5rem)}
body.v25 .v25hhero__say p{margin:0 0 1rem;color:#C6C0B5;break-inside:avoid}
body.v25 .v25hhero__cta{margin-top:clamp(1.75rem,3.5vw,2.5rem);gap:2rem}

/* ---- §2 THE STARTING POINT: the page's still fold ---------------------- */
body.v25 .v25start__h{max-width:20ch}
body.v25 .v25start__p{margin:clamp(1.5rem,3vw,2.25rem) 0 0 auto;max-width:50ch;
  color:var(--ink-2)}
body.v25 .v25start__after{margin:clamp(1.75rem,3.5vw,2.75rem) 0 0}
body.v25 .v25start__after span{display:inline-block;padding-top:1rem;
  border-top:2px solid var(--red);max-width:24ch;color:var(--ink)}

/* ---- §3 THE MODEL: the pinned sequence -------------------------------- */
body.v25 .v25model{padding-bottom:clamp(3rem,6vw,5rem)}
body.v25 .v25model__h{max-width:25ch}
body.v25 .v25model__out{margin:clamp(2.5rem,5vw,3.5rem) 0 0;max-width:46ch;color:#fff}

/* Baseline, and the state every tablet, phone, reduced-motion visitor and
   script-off visitor sees: a legible five-stage sequence in normal flow. */
body.v25 .v25model__head{margin-bottom:clamp(2rem,4vw,3rem)}
body.v25 .v25mstage__grid{position:relative}
body.v25 .v25mindex{display:none}
body.v25 .v25mrail{position:absolute;left:0;top:.6rem;bottom:.6rem;width:1px;
  background:var(--v25-rule-d);display:block;overflow:hidden}
body.v25 .v25mrail i{position:absolute;left:0;right:0;top:0;height:100%;
  background:var(--red);transform:scaleY(var(--p,1));transform-origin:top}
body.v25 .v25mshow{list-style:none;margin:0;padding:0}
body.v25 .v25mpanel{position:relative;padding:clamp(1.5rem,3.2vw,2.25rem) 0 clamp(1.5rem,3.2vw,2.25rem) clamp(2.75rem,5.5vw,4.25rem)}
body.v25 .v25mpanel + .v25mpanel{border-top:1px solid var(--v25-rule-d)}
body.v25 .v25mpanel::before{content:"";position:absolute;left:-3px;
  top:calc(clamp(1.5rem,3.2vw,2.25rem) + .7em);width:7px;height:7px;
  background:var(--dark);border:1px solid rgba(255,255,255,.55);
  transform:rotate(45deg)}
body.v25 .v25mpanel:last-child::before{background:var(--red);border-color:var(--red)}
body.v25 .v25mpanel__n{position:absolute;left:0;top:calc(clamp(1.5rem,3.2vw,2.25rem) + .35em);
  display:none}
body.v25 .v25mpanel__k{margin:0;color:#fff}
body.v25 .v25mpanel__p{margin:.4rem 0 0;color:#C6C0B5;max-width:46ch}

/* The enhancement. `is-pinned` is added by the script only on a wide viewport
   that allows motion, and only after it has measured the stage. Removing the
   class restores the baseline above exactly. */
body.v25 .v25mstage.is-pinned{height:var(--track,520vh)}
body.v25 .v25mstage.is-pinned .v25mstage__pin{position:sticky;top:0;height:100vh;
  display:flex;align-items:center;overflow:hidden}
body.v25 .v25mstage.is-pinned .v25mstage__wrap{width:100%}
/* While the stage is held, the fold keeps saying what it is. */
body.v25 .v25mstage.is-pinned .v25model__head{display:flex;align-items:baseline;
  gap:clamp(1.25rem,3vw,2.5rem);flex-wrap:wrap;
  margin:0 0 clamp(2.25rem,4.5vh,3.5rem);
  padding-bottom:clamp(1.25rem,2.5vh,1.75rem);
  border-bottom:1px solid var(--v25-rule-d)}
body.v25 .v25mstage.is-pinned .v25model__head .eb{margin:0}
/* EXCEPTION, documented: while the stage is pinned the section heading becomes
   a running head that must sit under the stage name it introduces. It takes the
   section-lede role rather than the H2 role for that reason alone. */
body.v25 .v25mstage.is-pinned .v25model__h{max-width:none;color:#D8D3C9;}
body.v25 .v25mstage.is-pinned .v25mstage__grid{width:100%;display:grid;
  grid-template-columns:minmax(0,.58fr) 2px minmax(0,1.42fr);
  gap:0 clamp(2.5rem,6vw,5rem);align-items:stretch}
body.v25 .v25mstage.is-pinned .v25mindex{display:block;list-style:none;margin:0;padding:0}
body.v25 .v25mstage.is-pinned .v25mindex{display:flex;flex-direction:column;
  justify-content:space-between;height:min(56vh,400px)}
body.v25 .v25mstage.is-pinned .v25mindex__i{position:relative;display:flex;
  align-items:baseline;gap:clamp(.7rem,1.4vw,1rem);padding-left:1.25rem;
  color:#8A8479;transition:color .45s var(--ease),transform .45s var(--ease);
  transform-origin:left center}
body.v25 .v25mstage.is-pinned .v25mindex__i::before{content:"";position:absolute;
  left:0;top:.42em;width:7px;height:1px;background:currentColor;opacity:.6;
  transition:width .45s var(--ease),background .45s var(--ease)}
body.v25 .v25mstage.is-pinned .v25mindex__n{color:inherit}
body.v25 .v25mstage.is-pinned .v25mindex__k{color:inherit}
body.v25 .v25mstage.is-pinned .v25mindex__i.is-on{color:#fff;transform:translateX(8px)}
body.v25 .v25mstage.is-pinned .v25mindex__i.is-on::before{width:14px;
  background:var(--red);opacity:1}
body.v25 .v25mstage.is-pinned .v25mindex__i.is-done{color:#B0A99E}
body.v25 .v25mstage.is-pinned .v25mrail{position:relative;left:auto;top:auto;bottom:auto;
  width:2px;height:min(56vh,400px);align-self:center;
  background:rgba(255,255,255,.14)}
body.v25 .v25mstage.is-pinned .v25mrail i{transform:scaleY(var(--p,0));
  transition:transform .3s linear}
body.v25 .v25mstage.is-pinned .v25mshow{position:relative;height:min(56vh,400px)}
body.v25 .v25mstage.is-pinned .v25mpanel{position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 0 0 clamp(.5rem,1.4vw,1.25rem);border-top:0;
  opacity:0;transform:translateY(22px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
body.v25 .v25mstage.is-pinned .v25mpanel::before{display:none}
body.v25 .v25mstage.is-pinned .v25mpanel.is-on{opacity:1;transform:none;pointer-events:auto}
body.v25 .v25mstage.is-pinned .v25mpanel__n{display:block;position:static;
  margin:0 0 clamp(.75rem,1.6vw,1.1rem);color:var(--red-light)}
/* The active stage is commanding but it is not a page heading: it takes the
   section-H2 role, one step below the H1 that opens the page. */
body.v25 .v25mstage.is-pinned .v25mpanel__k{font-size:var(--ty-h2);
  font-weight:var(--ty-h2-w);line-height:var(--ty-h2-lh);
  letter-spacing:var(--ty-h2-ls)}
body.v25 .v25mstage.is-pinned .v25mpanel__p{margin-top:clamp(1rem,2vw,1.6rem);
  padding-top:clamp(1rem,2vw,1.5rem);border-top:1px solid var(--v25-rule-d);
  max-width:40ch;font-size:var(--ty-lede);line-height:var(--ty-lede-lh);
  color:#D8D3C9}

/* ---- §4 ACCOUNTABILITY: four principles that interlock ---------------- */
body.v25 .v25acc__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,5vw,4.5rem);align-items:start}
body.v25 .v25acc__h{max-width:23.8ch}
body.v25 .v25acc__say p{margin:0 0 1.1rem;color:var(--ink-3);max-width:50ch}
body.v25 .v25acc__say p:last-child{margin-bottom:0}
body.v25 .v25prin{margin:clamp(2.75rem,5.5vw,4.25rem) 0 0;max-width:58rem}
body.v25 .v25prin__i{position:relative;
  margin-left:calc(var(--i) * clamp(1.25rem,3.4vw,3.25rem));
  margin-top:calc(var(--i) * -1 * 0px);
  padding:clamp(1.4rem,2.8vw,2rem) clamp(1.4rem,2.8vw,2rem) clamp(1.4rem,2.8vw,2rem) clamp(1.4rem,2.8vw,2.25rem);
  background:var(--paper);border-left:2px solid var(--red)}
body.v25 .v25prin__i + .v25prin__i{margin-top:clamp(-1rem,-2vw,-.5rem)}
body.v25 .v25prin__i::before{content:"";position:absolute;left:0;right:0;top:0;
  height:1px;background:var(--v25-rule)}
body.v25 .v25prin__i:first-child::before{display:none}
body.v25 .v25prin dt{color:var(--ink)}
body.v25 .v25prin dd{margin:.4rem 0 0;max-width:52ch;color:var(--ink-3)}

/* ---- §5 BOTH SIDES: two perspectives, one joining ---------------------- */
body.v25 .v25both{background:var(--warm)}
body.v25 .v25both__h{max-width:25ch}
body.v25 .v25join{position:relative;margin-top:clamp(2.5rem,5vw,3.75rem)}
body.v25 .v25join__cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.75rem,5vw,4.5rem);align-items:stretch}
body.v25 .v25join__c{position:relative;display:flex;flex-direction:column;
  padding-bottom:clamp(2.5rem,5vw,4rem)}
body.v25 .v25join__w{margin:0;color:var(--ink)}
body.v25 .v25join__t{margin:.6rem 0 0;max-width:46ch;color:var(--ink-2)}
body.v25 .v25join__drop{position:absolute;left:0;bottom:0;top:auto;width:1px;
  height:clamp(2rem,4.2vw,3.25rem);background:var(--v25-rule);
  display:block;overflow:hidden}
body.v25 .v25join__drop i{position:absolute;inset:0;background:var(--red);
  transform:scaleY(1);transform-origin:top;transition:transform .7s var(--ease-line)}
body.v25 .v25join__bar{display:block;height:2px;background:var(--v25-rule);
  position:relative;overflow:hidden}
body.v25 .v25join__bar i{position:absolute;inset:0;background:var(--red);
  transform:scaleX(1);transform-origin:left;transition:transform 1s var(--ease-line) .45s}
body.v25 .v25join__out{margin:clamp(1.25rem,2.6vw,1.9rem) 0 0;max-width:50ch;
  color:var(--ink)}
html.anim body.v25 .v25join:not(.in) .v25join__drop i{transform:scaleY(0)}
html.anim body.v25 .v25join:not(.in) .v25join__bar i{transform:scaleX(0)}
html.anim body.v25 .v25join:not(.in) .v25join__out{opacity:0;transform:translateY(10px)}
body.v25 .v25join__out{transition:opacity .6s var(--ease) .55s,transform .6s var(--ease) .55s}

/* ---- §6 PRODUCTION: the built system, held --------------------------- */
body.v25 .v25prod__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5.5vw,4.5rem);align-items:center}
body.v25 .v25prod__media{position:relative}
body.v25 .v25prod__media picture,body.v25 .v25prod__media img{display:block;width:100%;
  height:auto}
body.v25 .v25prod__media::after{content:"";position:absolute;inset:0;
  border:1px solid var(--v25-rule-d);pointer-events:none}
body.v25 .v25prod__h{max-width:20ch}
body.v25 .v25prod__lift{margin:clamp(1.1rem,2.2vw,1.6rem) 0 0;max-width:34ch;color:#fff}
body.v25 .v25prod__p{margin:clamp(.9rem,1.9vw,1.3rem) 0 0;max-width:52ch;color:#C6C0B5}

/* ---- §7 MEASUREMENT: the same case, read back ------------------------- */
body.v25 .v25meas__h{max-width:25ch}
body.v25 .v25case{position:relative;margin:clamp(2.5rem,5vw,4rem) auto 0;
  max-width:46rem}
body.v25 .v25case__c{position:relative;padding:clamp(1.15rem,2.4vw,1.6rem) clamp(1.25rem,2.6vw,1.75rem);
  border:1px solid var(--v25-rule);background:var(--paper);
  transition:border-color .6s var(--ease),box-shadow .6s var(--ease)}
body.v25 .v25case__s{display:block;text-transform:uppercase;color:var(--ink-3)}
body.v25 .v25case__l{display:block;margin-top:.45rem;color:var(--ink)}
body.v25 .v25case__mid{position:relative;padding:clamp(1.75rem,3.5vw,2.75rem) 0
  clamp(1.75rem,3.5vw,2.75rem) clamp(2.25rem,4.5vw,3.5rem);display:grid;gap:1rem}
body.v25 .v25case__mid p{margin:0;max-width:52ch;color:var(--ink-3)}
body.v25 .v25case__thread{position:absolute;left:clamp(.9rem,1.9vw,1.5rem);top:0;bottom:0;
  width:1px;background:var(--v25-rule);display:block;overflow:hidden}
body.v25 .v25case__thread i{position:absolute;inset:0;background:var(--red);
  transform:scaleY(1);transform-origin:top;transition:transform 1.2s var(--ease-line)}
body.v25 .v25case.is-read .v25case__c{border-color:var(--red)}
body.v25 .v25meas__out{margin:clamp(2.25rem,4.5vw,3.25rem) auto 0;max-width:46rem;
  color:var(--ink)}
html.anim body.v25 .v25case:not(.in) .v25case__thread i{transform:scaleY(0)}

/* ---- §8 ENTRY POINTS: four ways in to one approach -------------------- */
body.v25 .v25entry{background:var(--warm)}
body.v25 .v25entry__h{max-width:27.5ch}
body.v25 .v25doors{position:relative;list-style:none;
  margin:clamp(2.75rem,5.5vw,4.25rem) 0 0;
  padding:clamp(1rem,2vw,1.5rem) 0 clamp(1rem,2vw,1.5rem) clamp(9rem,18vw,15rem)}
body.v25 .v25doors__spine{position:absolute;left:clamp(9rem,18vw,15rem);top:0;bottom:0;
  width:2px;background:rgba(21,20,18,.1);display:block;overflow:hidden}
body.v25 .v25doors__spine i{position:absolute;inset:0;background:var(--red);
  transform:scaleY(1);transform-origin:top;transition:transform 1.2s var(--ease-line)}
body.v25 .v25door{position:relative;
  margin-left:calc((3 - var(--i)) * clamp(1rem,2.6vw,2.5rem) * -1);
  padding:clamp(.8rem,1.7vw,1.1rem) 0 clamp(.8rem,1.7vw,1.1rem) clamp(2rem,4vw,3rem)}
body.v25 .v25door__arm{position:absolute;left:0;top:50%;
  width:calc((3 - var(--i)) * clamp(1rem,2.6vw,2.5rem) + clamp(2rem,4vw,3rem) - .55rem);
  height:1px;background:var(--v25-rule)}
body.v25 .v25door__t{color:var(--ink-2)}
body.v25 .v25doors.is-seq .v25door{opacity:0;transform:translateX(-10px)}
body.v25 .v25doors.is-seq.in .v25door{opacity:1;transform:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  transition-delay:calc(var(--i) * .09s + .25s)}
html.anim body.v25 .v25doors:not(.in) .v25doors__spine i{transform:scaleY(0)}
body.v25 .v25entry__out{margin:clamp(2.25rem,4.5vw,3.25rem) 0 0;max-width:50ch;
  color:var(--ink)}

/* ---- RESPONSIVE --------------------------------------------------------- */
@media (max-width:1100px){
  body.v25 .v25hhero__say{columns:1;max-width:56ch}
  body.v25 .v25hhero__say p{margin-bottom:1.1rem}
}
@media (max-width:1000px){
  /* the capability row stacks its problem under its name rather than
     collapsing two text columns into each other */
  body.v25 .v25capi__a{grid-template-columns:clamp(2rem,6vw,2.75rem) minmax(0,1fr);
    grid-template-areas:"n k" ". p";row-gap:.45rem}
  body.v25 .v25capi__p{max-width:52ch}
  body.v25 .v25caps.is-seq .v25capi__p{transform:translateY(4px)}
  body.v25 .v25caps.is-seq .v25capi.is-on .v25capi__p{transform:none}
}
@media (max-width:900px){
  body.v25 .v25whero__grid,body.v25 .v25acc__head,
  body.v25 .v25join__cols,body.v25 .v25prod__in{grid-template-columns:1fr}
  body.v25 .v25whero__grid{gap:2.25rem}
  body.v25 .v25whero__h,body.v25 .v25diag__h,body.v25 .v25start__h,
  body.v25 .v25both__h{max-width:22.5ch}
  body.v25 .v25diag__body{margin-left:0}
  body.v25 .v25start__p{margin-left:0}
  body.v25 .v25prod__in{gap:2rem}
  body.v25 .v25prod__media{order:-1;max-width:34rem}
  body.v25 .v25join__c:last-child .v25join__drop{display:none}
  body.v25 .v25prin__i{margin-left:calc(var(--i) * clamp(.5rem,2vw,1.25rem))}

}
@media (max-width:700px){
  body.v25 .v25doors{padding-left:clamp(2rem,9vw,4rem)}
  body.v25 .v25doors__spine{left:clamp(2rem,9vw,4rem)}
  body.v25 .v25door{margin-left:0;padding-left:clamp(1.25rem,5vw,2rem)}
  body.v25 .v25door__arm{width:clamp(.9rem,4vw,1.5rem)}
  body.v25 .v25strata{perspective:none}
  body.v25 .v25stratum{margin-right:0;
    margin-left:calc(var(--i) * clamp(.2rem,.8vw,.5rem))}
  body.v25 .v25case__mid{padding-left:clamp(1.5rem,6vw,2.5rem)}
  body.v25 .v25whero__cta,body.v25 .v25hhero__cta{gap:1.25rem}
}
@media (max-width:560px){
  body.v25 .v25prin__i{margin-left:0;padding-inline:1.1rem}
  body.v25 .v25prin__i + .v25prin__i{margin-top:-.5rem}
  body.v25 .v25env{min-height:0}
}

/* ---- FAIL-SAFE: no script, failed script, reduced motion ---------------
   Every enhanced class is additive, so the resting CSS above is already the
   finished composition. These rules cover the two devices that animate from
   CSS alone, and force every sequence class off under reduced motion. */
.no-js body.v25 .v25field__rule i,html:not(.anim) body.v25 .v25field__rule i,
.no-js body.v25 .v25hhero__line i,html:not(.anim) body.v25 .v25hhero__line i,
.no-js body.v25 .v25x__rule i,html:not(.anim) body.v25 .v25x__rule i,
.no-js body.v25 .v25join__drop i,html:not(.anim) body.v25 .v25join__drop i,
.no-js body.v25 .v25join__bar i,html:not(.anim) body.v25 .v25join__bar i,
.no-js body.v25 .v25case__thread i,html:not(.anim) body.v25 .v25case__thread i,
.no-js body.v25 .v25doors__spine i,html:not(.anim) body.v25 .v25doors__spine i{
  transform:none}

@media (prefers-reduced-motion:reduce){
  body.v25 .v25field.is-seq .v25field__rule i,
  body.v25 .v25cand.is-seq .v25cand__i span,
  body.v25 .v25strata.is-seq .v25stratum,
  body.v25 .v25doors.is-seq .v25door{transition:none}
  body.v25 .v25field.is-seq .v25field__i a{opacity:1;transform:none;transition:none}
  body.v25 .v25cand.is-seq.is-res .v25cand__i:not(.v25cand__i--res) span{
    opacity:1;transform:none;color:var(--ink)}
  body.v25 .v25caps.is-seq .v25capi__k{color:#D8D3C9}
  body.v25 .v25caps.is-seq .v25capi__p{transform:none;color:#9A948A}
  body.v25 .v25caps.is-seq .v25capi.is-on .v25capi__k{transform:none}
  body.v25 .v25strata.is-seq .v25stratum{opacity:1;transform:none}
  body.v25 .v25doors.is-seq .v25door{opacity:1;transform:none}
  body.v25 .v25mstage.is-pinned{height:auto}
  body.v25 .v25capi__k,body.v25 .v25capi__mark,body.v25 .v25mrail i,
  body.v25 .v25case__c{transition:none}
}