@charset "utf-8";
/* ============================================================================
   Solution pages — components that do not exist on the homepage.
   Loaded after site.css. Every value here comes from the same tokens.
   ========================================================================= */

/* ── breadcrumb ────────────────────────────────────────────────────────── */
.crumb{padding-top:calc(76px + var(--sp-8));font-size:13px;line-height:18px;color:var(--n-500)}
/* the site reset clears ul only, so the ordered breadcrumb needs it explicitly */
.crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:0;padding:0}
.crumb a{color:var(--n-500);transition:color var(--dur-micro) var(--ease-out)}
.crumb a:hover{color:var(--primary-blue)}
.crumb li+li::before{content:'/';margin-right:8px;color:var(--n-300)}
.crumb [aria-current]{color:var(--n-800);font-weight:500}

/* ── page hero ─────────────────────────────────────────────────────────── */
.phero{position:relative;padding-block:var(--sp-8) clamp(48px,6vw,80px);overflow:clip;isolation:isolate}
.phero__bg{position:absolute;inset:-20% -5% 0;z-index:-1;
  background:radial-gradient(48% 44% at 82% 18%,rgba(29,78,216,.13),transparent 68%),
             radial-gradient(44% 42% at 6% 0%,rgba(214,230,255,.75),transparent 72%),
             linear-gradient(180deg,#FBFCFF 0%,#F1F5FE 56%,#FFFFFF 100%)}
.phero__in{display:grid;gap:clamp(32px,4vw,56px);align-items:center}
@media(min-width:980px){ .phero__in{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)} }
.phero .overline{display:inline-block;margin-bottom:var(--sp-4)}
.phero .lede{margin-top:var(--sp-5);max-width:56ch}
.phero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-8)}

/* the hero mark: the service illustration on the signature orbit */
.pmark{position:relative;display:grid;place-items:center;aspect-ratio:1/.86}
.pmark__ring{position:absolute;inset:8%;border-radius:50%;border:1px solid rgba(29,78,216,.16);
  animation:orbit 26s linear infinite}
.pmark__ring--2{inset:20%;border-color:rgba(29,78,216,.12);animation-duration:34s;
  animation-direction:reverse}
.pmark__ring i{position:absolute;top:50%;left:-5px;width:10px;height:10px;margin-top:-5px;
  border-radius:50%;background:var(--primary-blue);box-shadow:0 0 14px 3px rgba(29,78,216,.45)}
.pmark__glow{position:absolute;inset:14%;border-radius:50%;
  background:radial-gradient(circle,rgba(29,78,216,.18),transparent 66%);filter:blur(10px);
  animation:softglow 4.5s var(--ease-in-out) infinite}
.pmark img{position:relative;width:min(60%,260px);height:auto;
  filter:drop-shadow(0 18px 30px rgba(11,19,43,.16))}

/* ── generic prose section ─────────────────────────────────────────────── */
.psec{position:relative}
.psec .body+.body{margin-top:var(--sp-4)}
.psec__lead{max-width:820px}
.psec__lead .h2+.body{margin-top:var(--sp-5)}

/* prose on one side, a figure on the other */
.split{display:grid;gap:clamp(36px,4.4vw,64px);align-items:center}
@media(min-width:1020px){ .split{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)} }

/* a single emphasised line that carries a section's argument */
.stress{margin-top:var(--sp-6);padding-left:var(--sp-6);border-left:2px solid var(--primary-blue);
  font-size:clamp(18px,1.7vw,22px);line-height:1.45;font-weight:500;color:var(--n-900);
  letter-spacing:-.01em;max-width:56ch}

/* ── continuity panel ──────────────────────────────────────────────────── */
/* The section argues that compliance is a year-round cadence, so the panel
   draws the year rather than describing it. */
.rhythm{position:relative;overflow:hidden;border-radius:var(--r-2xl);
  background:linear-gradient(150deg,#fff 0%,#F4F8FF 56%,#E9F1FE 100%);
  border:1px solid var(--sky-blue);box-shadow:var(--sh-card);
  padding:clamp(22px,2.6vw,30px)}
.rhythm::before{content:'';position:absolute;right:-18%;top:-38%;width:56%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(29,78,216,.15),transparent 68%)}
.rhythm > *{position:relative}

.rhythm__hd{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.rhythm__live{display:inline-flex;align-items:center;gap:9px;font-size:13px;line-height:20px;
  font-weight:500;color:var(--n-800)}
.rhythm__live i{width:9px;height:9px;border-radius:50%;background:var(--success);flex:none;
  animation:livedot 2.4s var(--ease-in-out) infinite}
.rhythm__tag{font-size:11px;line-height:16px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--n-500)}
@keyframes livedot{
  0%,100%{ box-shadow:0 0 0 0 rgba(22,163,74,.42) }
  55%    { box-shadow:0 0 0 7px rgba(22,163,74,0) } }

.rhythm__year{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:5px;
  margin-top:var(--sp-6)}
.mo{display:grid;place-items:center;height:44px;border-radius:var(--r-sm);
  background:var(--light-blue);border:1px solid var(--sky-blue);
  font-size:11px;font-weight:700;color:var(--primary-blue)}
/* the months land left to right, on transitions so the row still paints
   where transitions never run (DESIGN.md §3) */
.js .rhythm .mo{opacity:0;transform:translateY(10px);
  transition:opacity 460ms var(--ease-out),transform 460ms var(--ease-expo);
  transition-delay:calc(var(--i) * 55ms)}
.js .rhythm.is-in .mo{opacity:1;transform:none}
.js .rhythm.force-in .mo{opacity:1!important;transform:none!important;transition:none!important}
/* decorative only: the year is never idle */
.rhythm__year::after{content:'';position:absolute;inset:-3px;pointer-events:none;
  border-radius:var(--r-md);
  background:linear-gradient(100deg,transparent 38%,rgba(29,78,216,.20) 50%,transparent 62%);
  background-size:240% 100%;animation:yearsweep 5.4s linear infinite}
@keyframes yearsweep{ from{ background-position:130% 0 } to{ background-position:-90% 0 } }

/* ── stage flow ────────────────────────────────────────────────────────── */
/* The section 3 figure on pages whose argument is a sequence rather than a
   calendar. Lives inside .rhythm, so it inherits the panel and its reveal. */
.flow{list-style:none;padding:0;margin-top:var(--sp-6)}
.flow__s{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--sp-4);padding-bottom:var(--sp-5)}
.flow__s:last-child{padding-bottom:0}
.flow__s::before{content:'';position:absolute;left:15px;top:34px;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--sky-blue),rgba(214,230,255,0))}
.flow__s:last-child::before{display:none}
.flow__n{position:relative;width:32px;height:32px;border-radius:var(--r-sm);flex:none;
  display:grid;place-items:center;background:var(--primary-blue);color:#fff;
  font-size:13px;font-weight:700;box-shadow:0 4px 12px rgba(29,78,216,.22)}
.flow__s b{display:block;font-size:14.5px;line-height:21px;font-weight:700;color:var(--n-900)}
.flow__s em{display:block;font-style:normal;font-size:13.5px;line-height:20px;
  color:var(--n-600);margin-top:3px}
.js .rhythm .flow__s{opacity:0;transform:translateY(10px);
  transition:opacity 520ms var(--ease-out),transform 520ms var(--ease-expo);
  transition-delay:calc(var(--i) * 90ms)}
.js .rhythm.is-in .flow__s{opacity:1;transform:none}
.js .rhythm.force-in .flow__s{opacity:1!important;transform:none!important;
  transition:none!important}

.rhythm__cap{margin-top:var(--sp-4);font-size:13.5px;line-height:21px;color:var(--n-600)}
.rhythm__rows{margin-top:var(--sp-5);list-style:none;padding:0}
.rhythm__rows li{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  justify-content:space-between;padding:11px 0;border-top:1px solid var(--surface-line)}
.rhythm__rows span{font-size:14px;line-height:21px;color:var(--n-700)}
.rhythm__rows em{font-style:normal;font-size:12.5px;line-height:18px;font-weight:700;
  color:var(--primary-blue);background:#fff;border:1px solid var(--sky-blue);
  border-radius:var(--r-sm);padding:4px 10px}
.rhythm__foot{display:flex;align-items:center;gap:11px;margin-top:var(--sp-5);
  padding-top:var(--sp-5);border-top:1px solid var(--surface-line);
  font-size:14px;line-height:21px;font-weight:500;color:var(--n-900)}
.rhythm__foot span{width:22px;height:22px;border-radius:var(--r-sm);flex:none;
  display:grid;place-items:center;background:var(--primary-blue);color:#fff}
@media(max-width:520px){
  .rhythm__year{gap:3px} .mo{height:36px;font-size:10px}
}

/* ── scope grid ────────────────────────────────────────────────────────── */
.areas{display:grid;gap:var(--sp-4);margin-top:clamp(32px,3.6vw,48px)}
@media(min-width:660px){ .areas{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1080px){ .areas{grid-template-columns:repeat(3,1fr)} }
.area{position:relative;overflow:hidden;padding:var(--sp-6);
  border:1px solid var(--surface-line);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--sh-rest);
  transition:transform 200ms var(--ease-expo),box-shadow 200ms var(--ease-out),
             background 200ms var(--ease-out),border-color 200ms var(--ease-out)}
.area:hover{transform:translateY(-5px);box-shadow:var(--sh-lift);background:var(--surface-hi);
  border-color:var(--sky-blue)}
.area > *{position:relative;z-index:1}
/* a spotlight that tracks the cursor: site.js writes --mx/--my, nothing else */
.area::before{content:'';position:absolute;inset:0;z-index:0;opacity:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%),
             rgba(29,78,216,.14),transparent 72%);
  transition:opacity 240ms var(--ease-out)}
/* the rule draws across the top edge on approach */
.area::after{content:'';position:absolute;left:0;top:0;z-index:2;width:100%;height:2px;
  background:linear-gradient(90deg,var(--primary-blue),var(--primary-blue-300));
  transform:scaleX(0);transform-origin:left;
  transition:transform 460ms var(--ease-expo)}
@media(hover:hover) and (pointer:fine){
  .area:hover::before{opacity:1}
  .area:hover::after{transform:scaleX(1)}
}
.area:focus-within::after{transform:scaleX(1)}
.area__i{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-sm);
  margin-bottom:var(--sp-4);background:var(--light-blue);color:var(--primary-blue);
  transition:background 240ms var(--ease-out),color 240ms var(--ease-out),
             transform 460ms var(--ease-expo)}
.area:hover .area__i{background:var(--primary-blue);color:#fff;transform:scale(1.07)}
.area h3{font-size:16px;line-height:23px;font-weight:700;color:var(--primary-blue);
  letter-spacing:-.005em}
.area p{font-size:14.5px;line-height:22px;color:var(--n-600);margin-top:8px}

/* Icon and heading share one line, and the description is revealed rather than
   always printed: nine full cards made the section taller than it earned.
   These rules sit AFTER .area__i and .area h3 on purpose, because they override
   them at equal specificity. See DESIGN.md on the later-rule-wins trap. */
.area__hd{display:flex;align-items:center;gap:12px}
.area__hd .area__i{margin-bottom:0;flex:none}
.area__hd h3{margin:0}
/* 0fr to 1fr animates the row height without needing a fixed max-height, so the
   card fits its own copy however long it is. The inner div carries the overflow
   so the paragraph's margin cannot escape while the row is collapsed. */
.area__d{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows 320ms var(--ease-expo),opacity 200ms var(--ease-out)}
.area__d > div{overflow:hidden;min-height:0}
.area:hover .area__d,.area:focus .area__d,.area:focus-within .area__d{
  grid-template-rows:1fr;opacity:1}
.area:focus-visible{outline:2px solid var(--primary-blue);outline-offset:3px}
/* A device that cannot hover would never see the copy at all, so it always shows. */
@media(hover:none){ .area__d{grid-template-rows:1fr;opacity:1} }
@media(prefers-reduced-motion:reduce){ .area__d{transition:opacity 200ms linear} }

/* ── liability block (dark, the converting section) ────────────────────── */
.liab{background:var(--deep-navy);position:relative;overflow:clip;isolation:isolate}
.liab::before{content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(56% 52% at 74% 34%,rgba(29,78,216,.34),transparent 70%)}
.liab__in{display:grid;gap:clamp(36px,4.4vw,64px);align-items:center}
@media(min-width:1000px){ .liab__in{grid-template-columns:minmax(0,1fr) minmax(0,.92fr)} }
.reqs{display:grid;gap:var(--sp-3);margin-top:var(--sp-8)}
.req{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-4);align-items:start;
  padding:var(--sp-4) var(--sp-5);border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
  transition:background var(--dur-standard) var(--ease-out),
             border-color var(--dur-standard) var(--ease-out),
             transform var(--dur-standard) var(--ease-expo)}
.req:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.28);
  transform:translateX(4px)}
.req__t{width:22px;height:22px;border-radius:var(--r-sm);flex:none;display:grid;place-items:center;
  background:rgba(61,116,240,.3);color:var(--sky-blue)}
.req p{font-size:14.5px;line-height:22px;color:#C7D2E4}

/* ── registers list ────────────────────────────────────────────────────── */
.reglist{display:grid;gap:10px;margin-top:clamp(28px,3vw,40px)}
@media(min-width:760px){ .reglist{grid-template-columns:repeat(2,1fr);column-gap:var(--sp-8)} }
.reg{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;
  padding:11px 0;border-bottom:1px solid var(--n-200);font-size:15px;line-height:23px;
  color:var(--n-700)}
.reg__t{width:20px;height:20px;border-radius:var(--r-sm);flex:none;display:grid;place-items:center;
  background:var(--light-blue);color:var(--primary-blue);margin-top:2px}

/* Each row ticks itself off as the list is scrolled through: site.js adds
   .is-on in sequence. This is the .conv treatment from the homepage, at list
   scale: the box goes from a grey placeholder to solid brand blue with a white
   check, over the same slow 620ms, so the row reads as being marked rather
   than as merely changing shade.
   Colour carries the whole effect. The row's opacity belongs to .reveal, and
   dimming body text to stage an animation would fail §8 anyway. */
.js .reg{color:var(--n-500);transition:color 1000ms var(--ease-out),
             border-color 1000ms var(--ease-out)}
.js .reg.is-on{color:var(--n-900);border-color:var(--sky-blue)}
.js .reg .reg__t{background:var(--n-100);color:var(--n-400);transform:scale(.86);
  transition:background 1000ms var(--ease-out),color 1000ms var(--ease-out),
             box-shadow 1000ms var(--ease-out),transform 1000ms var(--ease-expo)}
.js .reg.is-on .reg__t{background:var(--primary-blue);color:#fff;transform:scale(1.06);
  box-shadow:0 4px 12px rgba(29,78,216,.22)}
/* the check draws itself in. stroke-dasharray inherits through <use>, so the
   shared symbol needs no per-copy markup. */
.js .reg .reg__t svg{stroke-dasharray:26;stroke-dashoffset:26;
  transition:stroke-dashoffset 820ms var(--ease-out) 240ms}
.js .reg.is-on .reg__t svg{stroke-dashoffset:0}

/* ── callout ───────────────────────────────────────────────────────────── */
.callout{margin-top:clamp(28px,3vw,40px);padding:clamp(22px,2.4vw,30px);border-radius:var(--r-xl);
  background:linear-gradient(150deg,#E4EDFC 0%,#F3F7FE 60%,#EAF1FD 100%);
  border:1px solid var(--sky-blue)}
.callout b{display:block;font-size:16px;line-height:24px;font-weight:700;color:var(--n-900);
  margin-bottom:8px}
.callout p{font-size:15px;line-height:24px;color:var(--n-700);max-width:70ch}

/* ── delivery points ───────────────────────────────────────────────────── */
.points{display:grid;gap:var(--sp-4);margin-top:clamp(32px,3.6vw,48px)}
@media(min-width:820px){ .points{grid-template-columns:repeat(2,1fr)} }
.point{padding:var(--sp-6);border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--surface-line);
  transition:background 200ms var(--ease-out),border-color 200ms var(--ease-out),
             transform 200ms var(--ease-expo)}
.point:hover{background:var(--surface-hi);border-color:var(--sky-blue);transform:translateY(-4px)}
.point h3{font-size:16.5px;line-height:24px;font-weight:700;color:var(--n-900)}
.point p{font-size:14.5px;line-height:22px;color:var(--n-600);margin-top:8px}

/* ── city row ──────────────────────────────────────────────────────────── */
.cities{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--sp-6)}
.city{font-size:14px;line-height:20px;font-weight:500;color:var(--n-800);background:#fff;
  border:1px solid var(--surface-line);border-radius:var(--r-sm);padding:9px 15px;
  transition:border-color var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out)}
.city:hover{border-color:var(--primary-blue);color:var(--primary-blue)}

/* ── offer block ───────────────────────────────────────────────────────── */
.offer{position:relative;overflow:hidden;border-radius:var(--r-2xl);
  background:linear-gradient(140deg,var(--light-blue) 0%,#fff 58%);
  border:1px solid var(--sky-blue);box-shadow:var(--sh-card);
  padding:clamp(28px,3.6vw,52px);display:grid;gap:var(--sp-8)}
@media(min-width:940px){ .offer{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:start} }
.offer::before{content:'';position:absolute;right:-8%;top:-46%;width:46%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(29,78,216,.16),transparent 68%)}
.offer__side{position:relative;display:flex;flex-direction:column;gap:var(--sp-3)}
.offer__list{display:grid;gap:9px;margin-top:var(--sp-5)}
.offer__list div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:start;
  font-size:14.5px;line-height:22px;color:var(--n-700)}

/* ── FAQ (DS §11.2 accordion) ──────────────────────────────────────────── */
.faq{margin-top:clamp(32px,3.6vw,48px);max-width:900px}
.faq details{position:relative;border:1px solid var(--surface-line);border-radius:var(--r-lg);
  background:var(--surface);margin-bottom:10px;overflow:hidden;
  transition:border-color var(--dur-standard) var(--ease-out),
             background var(--dur-standard) var(--ease-out)}
.faq details[open]{border-color:var(--sky-blue);background:#fff;box-shadow:var(--sh-card)}
/* the accent rail grows from the top edge on hover and stays for the open row */
.faq details::after{content:'';position:absolute;left:0;top:0;bottom:0;z-index:2;width:2px;
  background:linear-gradient(180deg,var(--primary-blue),var(--primary-blue-300));
  transform:scaleY(0);transform-origin:top;
  transition:transform 340ms var(--ease-expo)}
.faq details:hover::after,.faq details[open]::after{transform:scaleY(1)}
.faq summary{position:relative;list-style:none;cursor:pointer;padding:18px 22px;display:flex;
  gap:var(--sp-4);align-items:center;justify-content:space-between}
.faq summary::-webkit-details-marker{display:none}
.faq summary > *{position:relative;z-index:1}
/* a gradient that sweeps in from the right rather than simply switching on */
.faq summary::before{content:'';position:absolute;inset:0;z-index:0;opacity:0;
  background:linear-gradient(100deg,rgba(29,78,216,.10) 0%,rgba(214,230,255,.55) 44%,
             rgba(29,78,216,.05) 100%);
  background-size:220% 100%;background-position:100% 0;
  transition:opacity 220ms var(--ease-out),background-position 640ms var(--ease-expo)}
@media(hover:hover) and (pointer:fine){
  .faq details:not([open]) summary:hover::before{opacity:1;background-position:0 0}
}
.faq summary:focus-visible::before{opacity:1;background-position:0 0}
.faq summary h3{font-size:16.5px;line-height:24px;font-weight:700;color:var(--n-900);
  letter-spacing:-.005em}
.faq details[open] summary h3{color:var(--primary-blue)}
.faq summary:hover h3{color:var(--primary-blue)}
.faq__sign{position:relative;width:22px;height:22px;flex:none}
.faq__sign::before,.faq__sign::after{content:'';position:absolute;left:50%;top:50%;
  background:var(--primary-blue);border-radius:2px;translate:-50% -50%;
  transition:transform var(--dur-standard) var(--ease-expo),opacity var(--dur-micro) var(--ease-out)}
.faq__sign::before{width:13px;height:2px}
.faq__sign::after{width:2px;height:13px}
.faq details[open] .faq__sign::after{transform:rotate(90deg);opacity:0}
.faq details p{margin:0;padding:0 22px 20px;font-size:15px;line-height:25px;color:var(--n-600);
  max-width:74ch}
/* the answer settles in. This works everywhere, because an open <details>
   renders its content immediately. */
.js .faq details[open] p{animation:faqIn 380ms var(--ease-out) both}
@keyframes faqIn{ from{ opacity:0;transform:translateY(-7px) } to{ opacity:1;transform:none } }
/* where the browser can animate the panel itself, it does. Gated on the
   selector, so a browser without it keeps the plain open/close above. */
@supports selector(::details-content){
  html{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:clip;
    transition:block-size 340ms var(--ease-expo),content-visibility 340ms allow-discrete;
    transition-behavior:allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}

/* ══ SECTOR PAGES ═══════════════════════════════════════════════════════ */
/* Sector pages answer "have you done it in my environment", so they are
   deliberately short and lead with proof. They never re-explain a service:
   they link to the solution page that owns it. */

/* ── the ramp ──────────────────────────────────────────────────────────── */
/* The logistics argument is the shape of a seasonal curve, so the figure
   draws the curve. Sixteen bars in four phases. No axis numbers, because
   the shape is the point and inventing a scale would be a claim. */
.ramp{position:relative;display:grid;grid-template-columns:repeat(16,1fr);gap:3px;
  align-items:end;height:clamp(104px,13vw,140px);margin-top:var(--sp-6)}
.ramp__b{position:relative;height:calc(var(--h) * 1%);border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,var(--primary-blue-300),var(--primary-blue));
  transition:opacity 220ms var(--ease-out),filter 220ms var(--ease-out)}
.ramp__b--pk{background:linear-gradient(180deg,var(--primary-blue-400),var(--primary-blue-700))}

/* the curve builds left to right, and each bar flares as it lands, so the
   figure reads as the season running rather than as a static chart */
.js .rhythm .ramp__b{transform:scaleY(.04);transform-origin:bottom;
  transition:transform 660ms var(--ease-expo),opacity 220ms var(--ease-out),
             filter 220ms var(--ease-out);
  transition-delay:calc(var(--i) * 45ms),0s,0s}
.js .rhythm.is-in .ramp__b{transform:none;
  animation:rampland 1000ms var(--ease-out) both;
  animation-delay:calc(var(--i) * 45ms)}
.js .rhythm.force-in .ramp__b{transform:none!important;transition:none!important;
  animation:none!important}
@keyframes rampland{
  0%  { box-shadow:0 0 0 0 rgba(61,116,240,0) }
  45% { box-shadow:0 -5px 15px 0 rgba(61,116,240,.6) }
  100%{ box-shadow:0 0 0 0 rgba(61,116,240,0) } }

/* idle: a slow pass of light so the panel is never quite still */
.ramp::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:var(--r-sm);
  background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.42) 50%,transparent 58%);
  background-size:230% 100%;animation:rampshine 5.6s linear infinite}
@keyframes rampshine{ from{ background-position:126% 0 } to{ background-position:-96% 0 } }

/* pointer: the hovered bar comes forward and the rest step back */
@media(hover:hover) and (pointer:fine){
  .ramp.is-live .ramp__b{opacity:.42}
  .ramp.is-live .ramp__b.is-hot{opacity:1;filter:brightness(1.16) saturate(1.1)}
}
/* the readout. Clamped inside the panel by site.js, so an edge bar cannot
   push it out of the card. */
.ramp__tip{position:absolute;left:0;bottom:0;z-index:2;pointer-events:none;
  translate:calc(var(--tipx,50%) - 50%) calc(-1 * var(--tipy,0px) - 12px);
  padding:5px 10px;border-radius:var(--r-sm);white-space:nowrap;
  font-size:11.5px;line-height:16px;font-weight:700;letter-spacing:.02em;
  color:#fff;background:var(--deep-navy);box-shadow:0 6px 16px rgba(11,19,43,.28);
  opacity:0;transition:opacity 180ms var(--ease-out),translate 260ms var(--ease-expo)}
.ramp.is-live .ramp__tip{opacity:1}
.ramp__tip::after{content:'';position:absolute;top:100%;left:50%;translate:-50% -2px;
  width:7px;height:7px;rotate:45deg;background:var(--deep-navy)}

.ramp__ax{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-top:10px;
  padding-top:9px;border-top:1px solid var(--surface-line);
  font-size:10.5px;line-height:15px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--n-500);text-align:center;
  transition:color 220ms var(--ease-out)}
.ramp__ax span{transition:color 220ms var(--ease-out),font-weight 220ms linear}
.ramp__ax span.is-hot{color:var(--primary-blue);font-weight:700}

/* ── case bar ────────────────────────────────────────────────────────── */
/* One approved fact, given the room it deserves. Counters are driven by the
   existing [data-count] handler in site.js. */
.casebar{background:var(--deep-navy);position:relative;overflow:clip;isolation:isolate}
.casebar::before{content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(58% 56% at 22% 40%,rgba(29,78,216,.36),transparent 70%)}
.casebar__in{display:grid;gap:clamp(32px,4vw,56px);align-items:center}
@media(min-width:1000px){ .casebar__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.casebar .overline{color:var(--sky-blue);display:inline-block;margin-bottom:var(--sp-4)}
.casebar__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-xl);overflow:hidden}
.casebar__n{padding:clamp(20px,2.4vw,28px);background:rgba(11,19,43,.55);
  transition:background var(--dur-standard) var(--ease-out)}
.casebar__n:hover{background:rgba(29,78,216,.22)}
.casebar__n b{display:block;font-size:clamp(28px,3.1vw,40px);line-height:1.08;font-weight:700;
  letter-spacing:-.025em;color:#fff;font-variant-numeric:tabular-nums}
.casebar__n span{display:block;position:relative;margin-top:10px;padding-top:13px;
  font-size:13.5px;line-height:19px;color:#C7D2E4}
.casebar__n span::before{content:'';position:absolute;left:0;top:4px;width:30px;height:3px;
  border-radius:3px;background:linear-gradient(90deg,var(--primary-blue-300),var(--info));
  transform:scaleX(.7);transform-origin:left;
  transition:transform var(--dur-standard) var(--ease-expo)}
.casebar__n:hover span::before{transform:scaleX(1.4)}

/* ── role chips ────────────────────────────────────────────────────────── */
/* Roles are a list, not nine explanations. Compact by design: a sector page
   that explains each role has become a solution page. */
.roles{display:grid;gap:var(--sp-4);margin-top:clamp(28px,3.2vw,42px)}
@media(min-width:720px){ .roles{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1080px){ .roles{grid-template-columns:repeat(3,1fr)} }
.role{padding:var(--sp-5) var(--sp-6);border:1px solid var(--surface-line);
  border-radius:var(--r-lg);background:var(--surface);
  transition:background 200ms var(--ease-out),border-color 200ms var(--ease-out),
             transform 200ms var(--ease-expo)}
.role:hover{background:var(--surface-hi);border-color:var(--sky-blue);transform:translateY(-4px)}
.role h3{font-size:15px;line-height:22px;font-weight:700;color:var(--primary-blue)}
.role p{font-size:14px;line-height:21px;color:var(--n-600);margin-top:6px}

/* ══ ABOUT ══════════════════════════════════════════════════════════════ */

/* ── centred statement hero ────────────────────────────────────────────── */
/* The About page opens on a claim rather than on a diagram, so the hero is
   centred and carries no illustration. */
.chero{position:relative;overflow:clip;isolation:isolate;text-align:center;
  padding-block:var(--sp-8) clamp(44px,5.6vw,76px)}
.chero__bg{position:absolute;inset:-30% -10% 0;z-index:-1;
  background:radial-gradient(52% 46% at 50% 6%,rgba(29,78,216,.16),transparent 68%),
             radial-gradient(40% 40% at 12% 30%,rgba(214,230,255,.7),transparent 72%),
             radial-gradient(40% 40% at 88% 26%,rgba(214,230,255,.6),transparent 72%),
             linear-gradient(180deg,#FBFCFF 0%,#F1F5FE 58%,#FFFFFF 100%)}
.chero .crumb ol{justify-content:center}
.chero__in{max-width:1000px;margin-inline:auto}
.chero .h1{margin-top:var(--sp-5);text-wrap:balance}
.chero .lede{margin-top:var(--sp-6);max-width:66ch;margin-inline:auto}
.chero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center;
  margin-top:var(--sp-8)}

/* the eyebrow, as a badge rather than bare text */
.badge{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;
  border-radius:var(--r-sm);background:var(--light-blue);border:1px solid var(--sky-blue);
  font-size:11.5px;line-height:16px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--primary-blue)}
.badge i{width:9px;height:9px;border-radius:50%;background:var(--brand-orange);flex:none;
  box-shadow:0 0 0 0 rgba(231,83,26,.55);
  animation:warmdot 2s var(--ease-in-out) infinite}
@keyframes warmdot{
  0%,100%{ box-shadow:0 0 0 0 rgba(231,83,26,.5) }
  55%    { box-shadow:0 0 0 8px rgba(231,83,26,0) } }

/* ── vision and values ─────────────────────────────────────────────────── */
.vision{position:relative;overflow:hidden;border-radius:var(--r-2xl);
  padding:clamp(28px,3.6vw,52px);text-align:center;
  background:linear-gradient(140deg,var(--primary-blue) 0%,var(--primary-blue-700) 58%,var(--deep-navy) 100%);
  box-shadow:0 18px 44px rgba(29,78,216,.22)}
.vision::before{content:'';position:absolute;right:-12%;top:-52%;width:44%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 66%)}
.vision span.overline{display:inline-block;color:var(--sky-blue);margin-bottom:var(--sp-5);
  font-size:clamp(13px,1.35vw,17px);line-height:1.3;letter-spacing:.2em}
.vision p{position:relative;font-size:clamp(19px,2.3vw,30px);line-height:1.34;font-weight:500;
  letter-spacing:-.014em;color:#fff;max-width:30ch;margin-inline:auto;text-wrap:balance}

.vals{display:grid;gap:1px;margin-top:var(--sp-6);background:var(--surface-line);
  border:1px solid var(--surface-line);border-radius:var(--r-xl);overflow:hidden}
@media(min-width:640px){ .vals{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1100px){ .vals{grid-template-columns:repeat(4,1fr)} }
.val{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-4);align-items:start;
  padding:clamp(22px,2.6vw,30px);background:#fff;
  transition:background var(--dur-standard) var(--ease-out)}
.val:hover{background:var(--soft-blue)}
.val__n{font-size:30px;line-height:1;font-weight:700;color:var(--sky-blue);
  font-variant-numeric:tabular-nums;transition:color var(--dur-standard) var(--ease-out)}
.val:hover .val__n{color:var(--primary-blue)}
.val b{display:block;font-size:16px;line-height:23px;font-weight:700;color:var(--n-900)}
.val p{font-size:14px;line-height:21px;color:var(--n-600);margin-top:6px}

/* ── backed by Fornax ──────────────────────────────────────────────────── */
.backed{text-align:center;border-radius:var(--r-2xl);border:1px solid var(--surface-line);
  background:linear-gradient(160deg,#fff 0%,#F5F8FE 62%,#EDF3FD 100%);
  box-shadow:var(--sh-card);padding:clamp(30px,3.8vw,56px) clamp(22px,3vw,44px)}
.backed__eyebrow{display:flex;align-items:center;justify-content:center;gap:14px;
  font-size:11.5px;line-height:16px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--n-500)}
.backed__eyebrow::before,.backed__eyebrow::after{content:'';height:1px;width:34px;
  background:var(--surface-line)}
.backed__logo{display:block;width:min(150px,38vw);height:auto;margin:var(--sp-6) auto var(--sp-5)}
.backed h3{font-size:clamp(20px,2.2vw,28px);line-height:1.28;font-weight:700;
  letter-spacing:-.015em;color:var(--n-900);text-wrap:balance}
.backed h3 .hi{color:var(--primary-blue)}
.backed p{margin:var(--sp-5) auto 0;max-width:68ch;font-size:15px;line-height:25px;
  color:var(--n-600)}

.grp{display:grid;gap:var(--sp-3);margin-top:clamp(26px,3vw,38px)}
@media(min-width:640px){ .grp{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1040px){ .grp{grid-template-columns:repeat(5,1fr)} }
.grp__c{display:block;padding:var(--sp-5) var(--sp-4);border-radius:var(--r-lg);
  border:1px solid var(--surface-line);background:#fff;text-align:center;
  transition:border-color 200ms var(--ease-out),transform 200ms var(--ease-expo),
             box-shadow 200ms var(--ease-out),background 200ms var(--ease-out)}
.grp__c:hover{border-color:var(--primary-blue);transform:translateY(-5px);
  box-shadow:var(--sh-card);background:var(--soft-blue)}
.grp__c b{display:block;font-size:14.5px;line-height:21px;font-weight:700;color:var(--n-900)}
.grp__c span{display:block;font-size:12px;line-height:17px;color:var(--n-500);margin-top:4px}
.grp__c em{display:inline-flex;align-items:center;gap:5px;font-style:normal;margin-top:10px;
  font-size:11.5px;line-height:16px;font-weight:700;color:var(--primary-blue);opacity:0;
  transform:translateY(-3px);transition:opacity 200ms var(--ease-out),
  transform 200ms var(--ease-expo)}
.grp__c:hover em{opacity:1;transform:none}
.grp__c--self{border-color:var(--primary-blue);background:var(--light-blue)}
.grp__c--self b{color:var(--primary-blue)}

/* ── the operations stack, told as three layers ────────────────────────── */
/* Compliance is drawn as the foundation because that is the argument: the
   other two layers stand on it. */
.stack3{display:grid;gap:12px;margin-top:clamp(28px,3.4vw,44px)}
.slab3{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-5);
  align-items:start;padding:clamp(18px,2.2vw,26px) clamp(20px,2.4vw,28px);
  border-radius:var(--r-xl);border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);
  transition:background var(--dur-standard) var(--ease-out),
             border-color var(--dur-standard) var(--ease-out),
             transform var(--dur-standard) var(--ease-expo)}
.slab3:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.3);
  transform:translateX(5px)}
.slab3__n{width:34px;height:34px;border-radius:var(--r-sm);flex:none;display:grid;
  place-items:center;background:rgba(61,116,240,.32);color:var(--sky-blue);
  font-size:12.5px;font-weight:700}
.slab3 b{display:block;font-size:16px;line-height:23px;font-weight:700;color:#fff}
.slab3 p{font-size:14.5px;line-height:22px;color:#C7D2E4;margin-top:5px}
.slab3 em{display:inline-block;font-style:normal;margin-top:9px;font-size:11px;
  line-height:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-blue)}
/* the foundation reads as load-bearing */
.slab3--base{background:linear-gradient(120deg,rgba(29,78,216,.42),rgba(61,116,240,.18));
  border-color:rgba(150,190,255,.42)}
.slab3--base .slab3__n{background:var(--primary-blue);color:#fff}

/* ── leadership ────────────────────────────────────────────────────────── */
/* Four across on a wide screen, two on a tablet. Both leadership rows carry
   four people, so a three-column grid would orphan the fourth. */
.team{display:grid;gap:var(--sp-5);margin-top:clamp(30px,3.6vw,46px)}
@media(min-width:720px){ .team{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1080px){ .team{grid-template-columns:repeat(4,1fr)} }
.tcard{border:1px solid var(--surface-line);border-radius:var(--r-2xl);
  background:var(--surface);overflow:hidden;box-shadow:var(--sh-rest);
  transition:transform 220ms var(--ease-expo),box-shadow 220ms var(--ease-out),
             border-color 220ms var(--ease-out),background 220ms var(--ease-out)}
.tcard:hover{transform:translateY(-6px);box-shadow:var(--sh-lift);
  border-color:var(--sky-blue);background:var(--surface-hi)}
.tcard__pic{position:relative;display:block;aspect-ratio:1;overflow:hidden;
  background:var(--deep-navy)}
.tcard__pic img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 620ms var(--ease-expo)}
.tcard:hover .tcard__pic img{transform:scale(1.04)}
/* the portraits already sit on a navy gradient, so the wash only deepens it */
.tcard__pic::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 52%,rgba(11,19,43,.42));
  opacity:0;transition:opacity 320ms var(--ease-out)}
.tcard:hover .tcard__pic::after{opacity:1}
.tcard__b{padding:var(--sp-5) var(--sp-6) var(--sp-6)}
.tcard h3{font-size:17px;line-height:24px;font-weight:700;color:var(--n-900);
  letter-spacing:-.01em}
.tcard p{font-size:14px;line-height:21px;color:var(--n-600);margin-top:6px}
/* Bios run to different lengths, so the Read profile row sat at a different
   height on each card. Make the card a column and let the body absorb the slack. */
.tcard{display:flex;flex-direction:column}
.tcard__b{display:flex;flex-direction:column;flex:1}

/* ── leadership card actions ───────────────────────────────────────────── */
.tcard__t{display:block;font-size:13px;line-height:19px;font-weight:700;
  letter-spacing:.02em;color:var(--primary-blue);margin-top:5px}
.tcard__act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);
  margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--surface-line)}
/* auto beats the fixed margin above, and has to come after it to do so. This is
   the later-rule-wins trap in START-HERE, hit for the fifth time. */
.tcard__act{margin-top:auto}
/* The row's height is set by the 32px LinkedIn button. Without one it collapses
   4px shorter, so the Read profile link on a card with no LinkedIn sat lower
   than its neighbours. Give the link the same height and they all agree. */
.tcard__act .link{min-height:32px;display:inline-flex;align-items:center}
.tcard__in{display:inline-grid;place-items:center;width:32px;height:32px;flex:none;
  border-radius:var(--r-sm);background:var(--light-blue);color:var(--primary-blue);
  transition:background var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out),
             transform var(--dur-standard) var(--ease-expo)}
.tcard__in:hover{background:var(--primary-blue);color:#fff;transform:translateY(-2px)}

/* ── profile page ──────────────────────────────────────────────────────── */
.pbio{display:grid;gap:clamp(28px,3.6vw,52px);align-items:start}
@media(min-width:860px){ .pbio{grid-template-columns:minmax(0,.42fr) minmax(0,1fr)} }
.pbio__pic{position:relative;border-radius:var(--r-2xl);overflow:hidden;
  background:var(--deep-navy);box-shadow:var(--sh-card);aspect-ratio:1}
.pbio__pic img{width:100%;height:100%;object-fit:cover;display:block}
.pbio__t{display:block;margin-top:var(--sp-4);font-size:clamp(15px,1.5vw,18px);line-height:1.4;
  font-weight:700;color:var(--primary-blue)}
/* one bio, not three thin sections. The photo stays put while it is read. */
.pbio__body{margin-top:var(--sp-5)}
.pbio__body .lede{max-width:64ch}
.pbio__body .body{max-width:68ch;color:var(--n-600)}
.pbio__body p+p{margin-top:var(--sp-5)}
@media(min-width:860px){ .pbio__pic{position:sticky;top:96px} }
.pbio__act{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-7);
  padding-top:var(--sp-6);border-top:1px solid var(--surface-line)}
.btn--li{background:#0A66C2;color:#fff;border:1px solid #0A66C2}
.btn--li:hover{background:#0B76DC;border-color:#0B76DC;color:#fff}

/* ══ CONTACT ════════════════════════════════════════════════════════════ */

/* video on the left, form on the right, per the approved reference */
.cwrap{display:grid;gap:clamp(28px,3.6vw,56px);align-items:start}
@media(min-width:980px){ .cwrap{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)} }

.vfig{position:relative;border-radius:var(--r-2xl);overflow:hidden;
  border:1px solid var(--sky-blue);box-shadow:var(--sh-card);
  background:linear-gradient(150deg,#fff 0%,#F2F6FF 60%,#E9F1FE 100%)}
.vfig video{display:block;width:100%;height:auto;aspect-ratio:1}

/* Side by side the two cards ended at different heights, because each took its
   own natural height off a start-aligned grid. Stretch the row and let the
   video absorb the difference, so the map and the form share a bottom edge.
   Only above the breakpoint: stacked on a phone there is nothing to align. */
@media(min-width:980px){
  .cwrap{align-items:stretch}
  .vfig{display:flex;flex-direction:column}
  .vfig video{flex:1;min-height:0;aspect-ratio:auto;object-fit:cover}
}
.vfig__cap{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;
  padding:var(--sp-5) var(--sp-6);border-top:1px solid var(--sky-blue);background:#fff}
.vfig__cap b{font-size:13.5px;line-height:20px;font-weight:700;color:var(--n-900);
  margin-right:auto}
.vfig__cap span{font-size:12.5px;line-height:18px;color:var(--n-600);
  border:1px solid var(--surface-line);border-radius:var(--r-sm);padding:4px 9px}

/* ── the form ──────────────────────────────────────────────────────────── */
.cform{border-radius:var(--r-2xl);border:1px solid var(--surface-line);background:#fff;
  box-shadow:var(--sh-card);padding:clamp(24px,3vw,40px)}
.cform__grid{display:grid;gap:var(--sp-4)}
@media(min-width:620px){ .cform__grid{grid-template-columns:repeat(2,1fr)} }
.fld{display:flex;flex-direction:column;gap:7px;min-width:0}
.fld--wide{grid-column:1/-1}
.fld label{font-size:13px;line-height:19px;font-weight:700;color:var(--n-800)}
.fld label em{font-style:normal;color:var(--primary-blue)}
.fld input,.fld select,.fld textarea{
  width:100%;font:inherit;font-size:15px;line-height:22px;color:var(--n-900);
  background:var(--surface);border:1px solid var(--surface-line);border-radius:var(--r-md);
  padding:12px 14px;
  transition:border-color var(--dur-micro) var(--ease-out),
             background var(--dur-micro) var(--ease-out),
             box-shadow var(--dur-micro) var(--ease-out)}
.fld textarea{resize:vertical;min-height:118px}
.fld select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:40px}
.fld input::placeholder,.fld textarea::placeholder{color:var(--n-400)}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:var(--sky-blue)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;background:#fff;
  border-color:var(--primary-blue);box-shadow:0 0 0 3px rgba(29,78,216,.16)}
.cform__foot{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;
  margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--surface-line)}
.cform__note{font-size:12.5px;line-height:19px;color:var(--n-500);max-width:42ch}
.cform__status{display:none;margin-top:var(--sp-4);padding:12px 14px;border-radius:var(--r-md);
  font-size:13.5px;line-height:20px;background:var(--light-blue);
  border:1px solid var(--sky-blue);color:var(--n-800)}
.cform__status.is-on{display:block}
/* Success and failure tints. Equal specificity to .is-on and to the base rule,
   so these must stay below both: see DESIGN.md on the later-rule-wins trap. */
.cform__status.is-ok{background:rgba(21,128,61,.07);border-color:rgba(21,128,61,.42)}
.cform__status.is-err{background:rgba(185,28,28,.06);border-color:rgba(185,28,28,.4)}

/* ── office list ───────────────────────────────────────────────────────── */
.offs{display:grid;gap:var(--sp-4);margin-top:clamp(26px,3vw,40px)}
@media(min-width:640px){ .offs{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1040px){ .offs{grid-template-columns:repeat(5,1fr)} }
.off{padding:var(--sp-5);border-radius:var(--r-lg);border:1px solid var(--surface-line);
  background:var(--surface);
  transition:background 200ms var(--ease-out),border-color 200ms var(--ease-out),
             transform 200ms var(--ease-expo)}
.off:hover{background:var(--surface-hi);border-color:var(--sky-blue);transform:translateY(-4px)}
.off b{display:block;font-size:15px;line-height:22px;font-weight:700;color:var(--n-900)}
.off span{display:block;font-size:12.5px;line-height:18px;color:var(--n-500);margin-top:4px}

/* ── group companies ───────────────────────────────────────────────────── */
.grp{display:grid;gap:var(--sp-3);margin-top:var(--sp-6)}
@media(min-width:640px){ .grp{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1000px){ .grp{grid-template-columns:repeat(5,1fr)} }
.grp__c{padding:var(--sp-5);border-radius:var(--r-lg);border:1px solid var(--surface-line);
  background:#fff;text-align:center;
  transition:border-color 200ms var(--ease-out),transform 200ms var(--ease-expo),
             box-shadow 200ms var(--ease-out)}
.grp__c:hover{border-color:var(--primary-blue);transform:translateY(-4px);
  box-shadow:var(--sh-card)}
.grp__c b{display:block;font-size:15px;line-height:22px;font-weight:700;color:var(--n-900)}
.grp__c span{display:block;font-size:12.5px;line-height:18px;color:var(--n-500);margin-top:4px}
.grp__c--self{border-color:var(--primary-blue);background:var(--light-blue)}
.grp__c--self b{color:var(--primary-blue)}

/* ── closing CTA on a solution page ────────────────────────────────────── */
.pcta{position:relative;background:var(--deep-navy);overflow:clip;isolation:isolate}
.pcta::before{content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(58% 64% at 76% 44%,rgba(29,78,216,.4),transparent 68%)}
.pcta__in{display:grid;gap:clamp(28px,3.6vw,48px);align-items:center}
@media(min-width:900px){ .pcta__in{grid-template-columns:minmax(0,1.2fr) auto} }
.pcta__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
@media(min-width:900px){ .pcta__actions{flex-direction:column;align-items:stretch} }

/* ── related solutions ─────────────────────────────────────────────────── */
.rel{display:grid;gap:var(--sp-4);margin-top:clamp(32px,3.6vw,48px)}
@media(min-width:700px){ .rel{grid-template-columns:repeat(3,1fr)} }
.relcard{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-6);
  border:1px solid var(--surface-line);border-radius:var(--r-lg);background:var(--surface);
  box-shadow:var(--sh-rest);
  transition:transform 220ms var(--ease-expo),box-shadow 220ms var(--ease-out),
             border-color 220ms var(--ease-out),background 220ms var(--ease-out)}
.relcard:hover{transform:translateY(-6px);box-shadow:var(--sh-lift);border-color:var(--sky-blue);
  background:var(--surface-hi)}
.relcard img{width:64px;height:64px;object-fit:contain}
.relcard h3{font-size:16.5px;line-height:24px;font-weight:700;color:var(--primary-blue)}
.relcard p{font-size:14px;line-height:21px;color:var(--n-600);flex:1}

/* ── hub cross-links ───────────────────────────────────────────────────── */
/* The compact directory row the two hub pages use to point at each other:
   /solutions/ lists the eight sectors, /sectors/ lists the seven lines. Denser
   than .relcard because it carries a whole set rather than three siblings, and
   the arrow rather than a .link line keeps the row height at one card. */
.xlinks{display:grid;gap:var(--sp-3);margin-top:clamp(28px,3.2vw,42px)}
@media(min-width:600px){ .xlinks{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1040px){ .xlinks{grid-template-columns:repeat(4,1fr)} }
.xlink{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-4);
  align-items:center;padding:var(--sp-4) var(--sp-5);border-radius:var(--r-lg);
  border:1px solid var(--surface-line);background:var(--surface);
  transition:background 200ms var(--ease-out),border-color 200ms var(--ease-out),
             transform 200ms var(--ease-expo),box-shadow 200ms var(--ease-out)}
.xlink:hover{background:var(--surface-hi);border-color:var(--sky-blue);
  transform:translateY(-4px);box-shadow:var(--sh-lift)}
.xlink img{width:44px;height:44px;object-fit:contain}
.xlink b{display:block;font-size:14.5px;line-height:21px;font-weight:700;
  color:var(--primary-blue)}
.xlink em{display:block;font-style:normal;font-size:12.5px;line-height:18px;
  color:var(--n-500);margin-top:3px}
.xlink__a{color:var(--n-400);flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:color 200ms var(--ease-out),transform 220ms var(--ease-expo)}
.xlink:hover .xlink__a{color:var(--primary-blue);transform:translateX(3px)}

/* ── NAPS calculator ───────────────────────────────────────────────────── */
/* Inputs on a light card, the answer on navy. The result panel is the only
   thing on the page that moves, so it gets the dark treatment reserved for
   content that carries the argument. */
.calc{display:grid;gap:var(--sp-6);align-items:start}
@media(min-width:940px){ .calc{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)} }

.calc__side{padding:clamp(22px,2.6vw,30px);border-radius:var(--r-2xl);
  border:1px solid var(--surface-line);background:var(--surface)}
.calc__f{margin-top:var(--sp-5)}
.calc__f label{display:block;font-size:13.5px;line-height:19px;font-weight:500;
  color:var(--n-700);margin-bottom:7px}
.calc__in{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:var(--r-md);
  border:1px solid var(--surface-line);background:#fff;
  transition:border-color 160ms var(--ease-out),box-shadow 160ms var(--ease-out)}
.calc__in:focus-within{border-color:var(--primary-blue);
  box-shadow:0 0 0 3px rgba(29,78,216,.14)}
.calc__in input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;
  font-size:17px;font-weight:700;color:var(--n-900);
  font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.calc__in input::-webkit-outer-spin-button,
.calc__in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc__pre,.calc__suf{font-size:13px;font-weight:500;color:var(--n-500);flex:none}

/* The range duplicates the number field, so it is out of the tab order: a
   keyboard user types the value instead of arrowing 500 steps to it. */
.calc__r{-webkit-appearance:none;appearance:none;width:100%;height:3px;margin-top:12px;
  border-radius:2px;background:var(--sky-blue);cursor:pointer}
.calc__r::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;
  border-radius:50%;background:var(--primary-blue);border:3px solid #fff;
  box-shadow:0 1px 5px rgba(3,8,20,.3);cursor:pointer}
.calc__r::-moz-range-thumb{width:17px;height:17px;border-radius:50%;
  background:var(--primary-blue);border:3px solid #fff;
  box-shadow:0 1px 5px rgba(3,8,20,.3);cursor:pointer;border-color:#fff}

.calc__ph{margin-top:var(--sp-8);padding-top:var(--sp-5);
  border-top:1px solid var(--surface-line);font-size:12px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--primary-blue)}
.calc__note{color:var(--n-500);margin-top:8px}

.calc__main{position:relative;padding:clamp(24px,3vw,36px);border-radius:var(--r-2xl);
  background:var(--deep-navy);overflow:clip;isolation:isolate}
.calc__main::before{content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 56% at 82% 12%,rgba(29,78,216,.42),transparent 70%)}
.calc__eyebrow{font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--sky-blue)}
.calc__big{display:flex;align-items:baseline;gap:8px;margin-top:10px;color:#fff;
  font-size:clamp(34px,5.2vw,54px);line-height:1.05;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.calc__cur{font-size:.44em;font-weight:500;color:var(--sky-blue)}
.calc__cap{font-size:13.5px;line-height:20px;color:#C7D2E4;margin-top:10px}
.calc__cap b{color:#fff;font-weight:700}

/* The track is the reimbursement colour and the net-cost layer scales over it,
   so the split animates on transform alone. DESIGN.md section 3: never animate
   width. Solid fill rather than a gradient, because scaleX would squash one. */
.calc__bar{position:relative;height:12px;margin-top:var(--sp-6);
  border-radius:var(--r-sm);overflow:hidden;background:var(--sky-blue)}
.calc__bar-a{position:absolute;inset:0;transform-origin:left center;
  transform:scaleX(1);background:var(--primary-blue-400);
  transition:transform 320ms var(--ease-expo)}
.calc__key{display:flex;flex-wrap:wrap;gap:var(--sp-5);margin-top:12px;
  font-size:12.5px;color:#C7D2E4}
.calc__key span{display:inline-flex;align-items:center;gap:7px}
.calc__k{width:9px;height:9px;border-radius:2px;flex:none}
.calc__k--a{background:#3D74F0}
.calc__k--b{background:var(--sky-blue)}

.calc__grid{display:grid;gap:1px;margin-top:var(--sp-6);
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);overflow:hidden}
@media(min-width:620px){ .calc__grid{grid-template-columns:1fr 1fr} }
.calc__grid>div{background:rgba(11,19,43,.72);padding:15px 18px}
.calc__grid dt{font-size:12.5px;line-height:18px;color:#8AA0C2}
.calc__grid dd{margin-top:5px;font-size:20px;line-height:27px;font-weight:700;color:#fff;
  font-variant-numeric:tabular-nums}
.calc__grid dd b{font-weight:700}
.calc__disc{margin-top:var(--sp-5);font-size:12px;line-height:18px;color:#8AA0C2}

/* The answer follows you down the inputs and releases at the end of the block.
   This has to sit AFTER .calc__main's base rule: both are one class, so at
   equal specificity the later declaration wins and `position:relative` above
   would quietly beat `sticky`.
   The height condition matters. Stuck to the top, a panel taller than the
   viewport can never show its own bottom, so below that height it stays put. */
@media(min-width:940px) and (min-height:640px){
  .calc__main{position:sticky;top:calc(76px + var(--sp-4))}
}

.calcform{margin-top:clamp(28px,3.2vw,40px)}
.calc__sum{margin-top:var(--sp-4);padding:12px 14px;border-radius:var(--r-md);
  border:1px solid var(--sky-blue);background:var(--light-blue);
  font-size:13px;line-height:20px;color:var(--n-700)}

@media(prefers-reduced-motion:reduce){
  .calc__bar-a{transition:none}
}

/* ── group company logos ───────────────────────────────────────────────── */
/* Real logos, not icons, so they arrive at wildly different aspect ratios:
   UNH is close to square, Integron is nearly six to one. A fixed box with
   `contain` normalises them, which is the only way a row of them reads as a
   set rather than as three unrelated images. */
.xlink--logo img{width:64px;height:40px;object-fit:contain;object-position:left center}

/* The lockup at the top of a company page. White rather than --surface,
   because a logo supplied on white should sit on white: a tint shows through
   the anti-aliased edges of the wordmarks. */
.glogo{margin:0 auto var(--sp-5);display:grid;place-items:center;
  width:fit-content;padding:16px 26px;border-radius:var(--r-xl);
  background:var(--surface-hi);border:1px solid var(--surface-line);
  box-shadow:var(--sh-rest)}
.glogo img{width:auto;height:clamp(38px,4.6vw,54px);max-width:min(74vw,300px);
  object-fit:contain}

/* ── blog and case study cards ─────────────────────────────────────────── */
/* The reference site puts stock line art on a grey block. This uses the
   project's own 3D icon library on a tinted panel instead, so the index reads
   as part of this site rather than as a widget bolted onto it. */
.bgrid{display:grid;gap:var(--sp-5);margin-top:clamp(30px,3.6vw,46px)}
@media(min-width:700px){ .bgrid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1060px){ .bgrid{grid-template-columns:repeat(3,1fr)} }

.bcard{display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--surface-line);border-radius:var(--r-xl);
  background:var(--surface);box-shadow:var(--sh-rest);
  transition:transform 240ms var(--ease-expo),box-shadow 240ms var(--ease-out),
             border-color 240ms var(--ease-out),background 240ms var(--ease-out)}
.bcard:hover{transform:translateY(-7px);box-shadow:var(--sh-lift);
  border-color:var(--sky-blue);background:var(--surface-hi)}

/* stretch, not centre: a photograph should resolve to exactly the panel box
   rather than overflow it and rely on the clip to look right */
.bcard__art{position:relative;display:grid;place-items:stretch;aspect-ratio:16/9;
  background:linear-gradient(150deg,var(--soft-blue),var(--light-blue));
  border-bottom:1px solid var(--surface-line);overflow:hidden}
.bcard__art--icon{place-items:center}
/* A photograph fills the frame edge to edge. Anything less reads as a picture
   sitting on a panel rather than as the card's own image.
   Absolutely positioned on purpose: `height:100%` inside an aspect-ratio box
   resolves against a grid area that is itself sized by its content, so the
   image ends up at its intrinsic ratio and overflows. Pinning to the box takes
   the ambiguity out, and it also beats the `img{height:auto}` reset. */
.bcard__art img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;transition:transform 620ms var(--ease-expo)}
.bcard:hover .bcard__art img{transform:scale(1.05)}
/* Blog posts have an icon rather than a photograph, and an icon cannot be
   cropped to fill, so those cards keep the tinted panel and contain it. */
.bcard__art--icon img{position:static;width:min(44%,124px);height:auto;
  object-fit:contain}
.bcard:hover .bcard__art--icon img{transform:scale(1.07) translateY(-3px)}

.bcard__b{display:flex;flex-direction:column;gap:10px;flex:1;
  padding:var(--sp-5) var(--sp-5) var(--sp-6)}
.bcard__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12px;line-height:16px;color:var(--n-500)}
.bcard__cat{font-weight:500;color:var(--primary-blue-700);background:#DCE7FA;
  border:1px solid #C3D6F3;border-radius:var(--r-sm);padding:4px 9px}
.bcard h3{font-size:18px;line-height:26px;font-weight:700;color:var(--n-900);
  letter-spacing:-.012em}
.bcard p{font-size:14px;line-height:22px;color:var(--n-600);flex:1}
.bcard__go{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;
  font-weight:700;color:var(--primary-blue)}
.bcard__go svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round;transition:transform 220ms var(--ease-expo)}
.bcard:hover .bcard__go svg{transform:translateX(4px)}

/* The newest piece gets the width. Below two columns it is just a card. */
@media(min-width:700px){
  .bcard--lead{grid-column:1 / -1}
  .bcard--lead{flex-direction:row;align-items:stretch}
  .bcard--lead .bcard__art{aspect-ratio:auto;flex:0 0 42%;border-bottom:0;
    border-right:1px solid var(--surface-line)}
  .bcard--lead .bcard__art--icon img{width:min(58%,190px)}
  .bcard--lead .bcard__b{padding:clamp(24px,3vw,38px)}
  .bcard--lead h3{font-size:clamp(21px,2.3vw,29px);line-height:1.22}
  .bcard--lead p{font-size:15px;line-height:24px}
}

/* ── long form article body ────────────────────────────────────────────── */
.prose{max-width:70ch;margin-top:clamp(26px,3vw,38px)}
.prose>*+*{margin-top:var(--sp-5)}
.prose p{font-size:17px;line-height:29px;color:var(--n-700)}
.prose p.prose__lead{font-size:19px;line-height:31px;color:var(--n-800)}
.prose h2{position:relative;margin-top:clamp(38px,4.4vw,58px);
  font-size:clamp(22px,2.4vw,28px);line-height:1.24;font-weight:700;
  color:var(--n-900);letter-spacing:-.015em;padding-top:var(--sp-5);
  border-top:1px solid var(--n-200)}
.prose h3{margin-top:clamp(26px,3vw,34px);font-size:18px;line-height:26px;
  font-weight:700;color:var(--n-900)}
.prose strong{font-weight:700;color:var(--n-900)}
.prose a{color:var(--primary-blue);font-weight:500;
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:var(--sky-blue);
  transition:text-decoration-color 160ms var(--ease-out)}
.prose a:hover{text-decoration-color:var(--primary-blue)}
.prose ul{display:grid;gap:12px;list-style:none}
.prose li{position:relative;padding-left:26px;font-size:16.5px;line-height:27px;
  color:var(--n-700)}
.prose li::before{content:'';position:absolute;left:2px;top:10px;width:7px;height:7px;
  border-radius:2px;background:var(--primary-blue)}
.prose li strong{color:var(--n-900)}
/* the one line worth slowing down for */
.prose blockquote{margin-top:clamp(30px,3.4vw,42px);padding:2px 0 2px var(--sp-6);
  border-left:3px solid var(--primary-blue);font-size:19px;line-height:30px;
  font-weight:500;color:var(--n-900)}

/* Comparison tables inside an article. Wide tables scroll inside their own
   container so the page body never scrolls horizontally. */
.ptable{overflow-x:auto;border:1px solid var(--surface-line);border-radius:var(--r-lg);
  background:var(--surface)}
.ptable table{width:100%;border-collapse:collapse;min-width:460px}
.ptable th,.ptable td{text-align:left;padding:13px 16px;font-size:14.5px;line-height:22px;
  border-bottom:1px solid var(--surface-line)}
.ptable th{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--primary-blue);background:#fff;white-space:nowrap}
.ptable td{color:var(--n-700)}
.ptable td:first-child{font-weight:500;color:var(--n-900)}
.ptable tbody tr:last-child th,.ptable tbody tr:last-child td{border-bottom:0}

/* Article hero figure. Case studies get a photograph, posts get their icon on
   the same tinted panel the cards use, so the two read as one family. */
.art{max-width:860px;margin-inline:auto}
.artfig{margin:0 0 clamp(24px,3vw,36px);border-radius:var(--r-2xl);overflow:hidden;
  border:1px solid var(--surface-line);box-shadow:var(--sh-rest)}
.artfig img{display:block;width:100%;height:auto}
.artfig figcaption{padding:13px 18px;background:var(--deep-navy);color:#fff;
  font-size:13px;line-height:20px;font-weight:700;letter-spacing:.02em}
.artfig--icon{display:grid;place-items:center;padding:clamp(26px,4vw,46px);
  background:linear-gradient(150deg,var(--soft-blue),var(--light-blue))}
.artfig--icon img{width:min(38%,150px)}
.art .kpis{margin:0 0 clamp(26px,3vw,38px)}
.art .prose{margin-inline:auto}
.chero--art{text-align:left}
.chero--art .crumb ol{justify-content:flex-start}
.art__head{max-width:860px;margin:var(--sp-8) auto 0}
/* Careers used to sit on .chero--art, the left-aligned variant meant for long
   legal documents, and needed its lede un-centring. It now uses the ordinary
   centred .chero like every other marketing page, so that rule is gone. */

/* ── long legal document ───────────────────────────────────────────────── */
/* Four thousand words of policy. Denser than an article, with a fourth heading
   level, because the source document nests that deep. */
.prose--legal{max-width:78ch}
.prose--legal p,.prose--legal li{font-size:15.5px;line-height:26px}
.prose--legal>*+*{margin-top:var(--sp-4)}
.prose--legal h2{font-size:clamp(19px,2vw,23px);scroll-margin-top:96px}
.prose--legal h3{font-size:16.5px;line-height:24px;color:var(--primary-blue)}
.prose h4,.prose--legal h4{margin-top:var(--sp-5);font-size:15px;line-height:22px;
  font-weight:700;color:var(--n-900)}
.prose--legal ul{gap:8px}
.prose--legal li{padding-left:22px}
.prose--legal li::before{top:9px;width:5px;height:5px}

.toc{padding:var(--sp-5) var(--sp-6);border-radius:var(--r-xl);
  border:1px solid var(--surface-line);background:var(--surface);
  margin-bottom:clamp(28px,3.4vw,40px)}
.toc__h{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--primary-blue);margin-bottom:var(--sp-4)}
.toc a{display:block;padding:5px 0;font-size:14px;line-height:21px;color:var(--n-700);
  border-bottom:1px solid transparent;transition:color 160ms var(--ease-out)}
.toc a:hover{color:var(--primary-blue)}
@media(min-width:760px){
  .toc{columns:2;column-gap:var(--sp-8)}
  .toc__h{column-span:all}
}

.artmeta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:var(--sp-5);
  font-size:13px;line-height:18px;color:var(--n-500)}
.artmeta__cat{font-size:12px;font-weight:500;color:var(--primary-blue-700);
  background:#DCE7FA;border:1px solid #C3D6F3;border-radius:var(--r-sm);padding:5px 10px}
.artmeta__dot{width:4px;height:4px;border-radius:50%;background:var(--n-300)}

/* ── an insight card with nothing to link to yet ───────────────────────── */
/* The blog index lists pieces in progress. They are <article> rather than <a>,
   so the card must stop pretending to be interactive: no lift, no pointer, and
   a plain status chip where the "Read more" link would sit. */
.icard--soon{box-shadow:none;background:transparent;border-style:dashed;
  border-color:var(--n-200);transition:none}
.icard--soon:hover{transform:none;box-shadow:none;background:transparent;
  border-color:var(--n-200)}
.icard--soon h3{color:var(--n-600)}
.icard__soon{font-size:12px;line-height:17px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--n-400)}

@media(prefers-reduced-motion:reduce){
  .pmark__ring,.pmark__glow,.rhythm__year::after,.rhythm__live i{animation:none!important}
  .js .rhythm .mo{opacity:1!important;transform:none!important;transition:none!important}
  .js .reg .reg__t{transform:none!important}
  .js .reg .reg__t svg{stroke-dashoffset:0!important}
  .js .faq details[open] p{animation:none!important}
  .faq details::after,.area::after{transition:none!important}
  @supports selector(::details-content){
    .faq details::details-content{transition:none!important}
  }
}

/* ── careers ───────────────────────────────────────────────────────────── */
.jobs{display:grid;gap:var(--sp-4);margin-top:clamp(28px,3.2vw,42px)}
@media(min-width:900px){ .jobs:has(.job){grid-template-columns:repeat(2,1fr)} }
.job{padding:var(--sp-6);border:1px solid var(--surface-line);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--sh-rest)}
.job__meta{display:block;font-size:12.5px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--n-500);margin-bottom:10px}
.job h3{font-size:19px;line-height:27px;font-weight:700;color:var(--primary-blue)}
.job p{font-size:15px;line-height:24px;color:var(--n-600);margin-top:8px}
.job__d{margin-top:var(--sp-4)}
.job__d h4{font-size:13px;font-weight:700;color:var(--n-800);margin-top:var(--sp-4)}
.job__d ul{margin-top:8px;display:grid;gap:7px;list-style:none}
.job__d li{position:relative;padding-left:20px;font-size:14.5px;line-height:22px;
  color:var(--n-600)}
.job__d li::before{content:'';position:absolute;left:2px;top:9px;width:6px;height:6px;
  border-radius:2px;background:var(--primary-blue)}
.job .btn{margin-top:var(--sp-5)}
/* The empty state and the candidate-fee notice share one shape: a full-width
   panel that has to read as content, not as an error or a missing block. */
.jobs__empty{margin-top:clamp(28px,3.2vw,42px);padding:clamp(24px,3vw,36px);
  border:1px solid var(--sky-blue);border-radius:var(--r-lg);background:var(--light-blue)}
.jobs__empty h3{font-size:19px;line-height:27px;font-weight:700;color:var(--primary-blue)}
.jobs__empty p{font-size:15.5px;line-height:25px;color:var(--n-700);margin-top:10px;
  max-width:70ch}

/* Fornax leadership cards: no profile link and no LinkedIn, so no hover lift
   and no pointer affordance. They are information, not a destination. */
.tcard--flat{cursor:default}
.tcard--flat:hover{transform:none;box-shadow:var(--sh-rest);
  border-color:var(--surface-line);background:var(--surface)}
.tcard--flat .tcard__pic{display:block}
.tcard--flat:hover .tcard__pic img{transform:none}
.tcard--flat .tcard__b{padding-bottom:var(--sp-6)}

/* ── a lone case study, laid out landscape ─────────────────────────────── */
/* One portrait card in a three-column grid leaves two empty columns beside it.
   A single case study therefore runs the full width of the container, with its
   headline figures alongside to earn the space. */
.casewide__wrap{margin-top:clamp(30px,3.6vw,46px)}
.casewide{display:grid;gap:0;overflow:hidden;text-decoration:none;
  border:1px solid var(--surface-line);border-radius:var(--r-2xl);
  background:var(--surface);box-shadow:var(--sh-rest);
  transition:transform 220ms var(--ease-expo),box-shadow 220ms var(--ease-out),
             border-color 220ms var(--ease-out)}
.casewide:hover{transform:translateY(-5px);box-shadow:var(--sh-lift);
  border-color:var(--sky-blue)}
@media(min-width:860px){ .casewide{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)} }
.casewide__art{position:relative;overflow:hidden;min-height:220px;background:var(--light-blue)}
.casewide__art img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 700ms var(--ease-expo)}
.casewide:hover .casewide__art img{transform:scale(1.04)}
.casewide__b{display:flex;flex-direction:column;gap:var(--sp-3);
  padding:clamp(24px,3vw,38px)}
.casewide__b h3{font-size:clamp(20px,2.1vw,26px);line-height:1.25;font-weight:700;
  color:var(--n-900);letter-spacing:-.01em}
.casewide__b p{font-size:15.5px;line-height:25px;color:var(--n-600);max-width:60ch}
.casewide__kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4);
  margin-top:var(--sp-3);padding-top:var(--sp-4);border-top:1px solid var(--surface-line)}
@media(min-width:1080px){ .casewide__kpis{grid-template-columns:repeat(4,1fr)} }
.casewide__k b{display:block;font-size:17px;line-height:24px;font-weight:700;
  color:var(--primary-blue)}
.casewide__k span{display:block;font-size:12.5px;line-height:18px;color:var(--n-500);
  margin-top:2px}
.casewide .bcard__go{margin-top:auto;padding-top:var(--sp-4)}

/* Pause control for the location map animation (WCAG 2.2 SC 2.2.2). */
.vfig{position:relative}
.vfig__toggle{position:absolute;right:12px;bottom:12px;z-index:2;
  font:inherit;font-size:.8125rem;line-height:1;padding:.55rem .85rem;
  border:1px solid rgba(255,255,255,.35);border-radius:999px;
  background:rgba(11,19,43,.72);color:#fff;cursor:pointer;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.vfig__toggle:hover{background:rgba(11,19,43,.88)}
.vfig__toggle:focus-visible{outline:2px solid #E7531A;outline-offset:2px}
@media (prefers-reduced-motion: reduce){.vfig video{animation:none}}