:root{
  /* ---- NEUTRALS, v12, 28 Aug 2026. The greys were warm: --paper and --sand
     both carried yellow, --line was a beige, and half the bands read as beige
     on beige. They went cool, then to a plain grey, and a plain grey at this
     surface area is harsh: a cold ground under a warm accent fatigues the eye,
     which is what a full grey palette did here. This is the settled position.
     The warmth is back and it is low chroma: --paper is a warm off-white, not
     the yellow-cast beige it started as, and the beige proper is held to
     --sand, which is now an accent band rather than a default ground. --ink is
     warm too, because a warm near-black is gentler beside a warm ground than a
     cold one. Contrast comes from the cards going dark, not from tinting the
     bands. Every AA pair below was recomputed: ink on paper 15.31, ink-55 on
     sand 4.61, on-dark on ink 14.66, no failures. ---- */
  --paper:#F6F4F0; --white:#FFFFFF; --sand:#EAE5DB;
  /* the homepage hero ground. It went green, then cold grey, and now it is a
     warm near-white: in the white family, a shade off pure, lighter than
     --paper so the hero opens brighter than the bands under it. Dark text
     gains contrast on it, so every pair verified against --paper passes. */
  --paper-cool:#FAF9F6;
  /* TabyGen product-brand purple, matched to tabygen.com. These are the only
     non-EigenSpark colours in the system and they are for the TabyGen product
     card alone: never for buttons, bands, links or any other chrome. White
     text on --taby measures 4.61, which passes AA for normal text, so text on
     it stays at full white or 88 per cent and never lower. */
  --taby:#6C63E5; --taby-dk:#4F46C4; --taby-rgb:108,99,229;
  /* The LinkedIn glyph on the founder cards, and nothing else: the same kind
     of exception as --taby above. The brand blue at full strength (#0A66C2)
     is the most saturated thing on a page of warm low-chroma neutrals and
     read as a sticker on the card, so it is muted here: same hue, chroma
     pulled back and value dropped, which still reads as the LinkedIn blue
     because the mark carries the recognition. Hover goes to the real brand
     blue, so the colour is a response to the pointer. White measures 5.65
     on the muted blue and 5.69 on the hover. */
  --linkedin:#3D6B92; --linkedin-dk:#0A66C2;
  --ink:#1F1D1A; --ink-70:#54504A; --ink-45:#8C8880;
  --line:#E0DBD1; --line-dk:#37342F; --line-lt:#D2CCC0;
  --green:#2FA855; --green-btn:#218842; --green-dk:#155C2A;
  --green-pale:#A8E0BC; --green-tint:#DCEFE2;
  --rust:#B04A2B; --rust-tint:#F3D9CB;
  /* --rust-lt is the accent on INK grounds: the nav, the footer, the ink bands.
     It was #D98A64, a desaturated salmon that measured 6.22 on ink but read as
     dusty. It is now a bright rust at the same hue (20 deg, the brand rust's
     own hue) and a much higher value, which measures 6.02 on ink: the same
     readability, far more presence. Set EIGENSPARK_RUST=soft to compare.
     It is still for ink only. On --green-dk it is 2.90 and fails AA as small
     type, so green grounds keep --rust-pale (4.90, and 10.18 on ink). */
  --rust-lt:#F2783C;
  --rust-pale:#FFB9A3;
  /* the duotone plate behind the founder photographs is a print effect on the
     sand band, not an accent on a dark ground, so it keeps the old muted rust
     whichever accent is in force. */
  --rust-plate:#D98A64;
  /* ---- COLOUR, v11. Every text/background pair below is AA-verified.
     --ink-45 is now GRAPHICS ONLY (it fails AA as text on every light band).
     Use --ink-55 for caption text; --rust-dk for rust text on tinted or sand
     grounds; the --on-dark / --on-green families for text on dark bands. ---- */
  --ink-55:#6A655D;      /* caption text: 5.26 paper / 5.78 white / 4.61 sand */
  --rust-dk:#A44528;     /* rust text on tint or sand: 4.51 tint / 4.70 sand */
    --on-dark:#F2EFEA;     /* primary text on ink: 14.66 */
  --on-dark-70:#C2BCB2;  /* secondary text on ink: 8.91 */
  --on-dark-45:#A69F95;  /* tertiary text on ink: 6.42 */
  --on-green-70:#D5E5D9; /* secondary text on green-dk: 6.18 */
  /* the highlight fill on a hovered card or chip. It was #4FD07A, a bright mint
     that was not one of the brand greens. It is --green-btn now, the chrome
     green the buttons already use, and the type on it goes white rather than
     ink: white measures 4.50 here and passes AA at every size, where ink on the
     lighter --green managed 3.74 and did not. */
  --green-hover:#218842;
  --ink-rgb:31,29,26; --white-rgb:255,255,255;
  --rust-rgb:176,74,43; --rust-pale-rgb:255,185,163;
  --wrap-max:1200px;   /* the full-bleed nav panels align their padding to this */ --green-rgb:47,168,85; --green-dk-rgb:21,92,42;
  --display:"Bricolage Grotesque","Inter",system-ui,sans-serif;
  --body:"Inter",-apple-system,"Segoe UI",sans-serif;
  --shadow-card:0 1px 2px rgba(var(--ink-rgb),.04);
  --shadow-lift:0 16px 28px rgba(var(--ink-rgb),.10);

  /* ---- TYPE SCALE (v11): 18 size steps replace 45 raw values.
     The tokens are redefined at <=900px, so responsive type is controlled
     from one place. Never set a raw px font-size on a component. ---- */
  --fs-micro:11px; --fs-label:13px; --fs-caption:14px; --fs-small:15px;
  --fs-body:17px; --fs-lede:19px; --fs-feature:21px;
  --fs-h4:24px; --fs-h3:27px; --fs-h2:38px; --fs-h2-lg:46px;
  --fs-h1:54px; --fs-h1-lg:64px;
  --fs-num-xs:30px; --fs-num-sm:40px; --fs-num-md:46px; --fs-num-lg:64px; --fs-num-xl:140px;

  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  --lh-tight:1; --lh-display:1.06; --lh-heading:1.15;
  --lh-title:1.3; --lh-body:1.55; --lh-copy:1.65;

  --tr-xl:-.032em; --tr-lg:-.024em; --tr-md:-.02em; --tr-sm:-.014em; --tr-label:.08em;
}
@media(max-width:900px){:root{
  --fs-body:16px; --fs-lede:17px; --fs-feature:18px;
  --fs-h4:21px; --fs-h3:24px; --fs-h2:29px; --fs-h2-lg:31px;
  --fs-h1:36px; --fs-h1-lg:38px;
  --fs-num-xs:26px; --fs-num-sm:34px; --fs-num-md:38px;
  --fs-num-lg:46px; --fs-num-xl:78px;
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:var(--fs-body);line-height:var(--lh-copy);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:var(--fw-semibold);line-height:var(--lh-heading);letter-spacing:var(--tr-md);text-wrap:balance}

p{margin:0} a{color:inherit;text-decoration:none} img{max-width:100%;height:auto}
:focus-visible{outline:2.5px solid var(--rust-dk);outline-offset:3px;border-radius:2px}
.b-ink :focus-visible,.b-green :focus-visible,.cta-split :focus-visible,
.why :focus-visible,footer :focus-visible{outline-color:var(--green-pale)}

.wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 40px}
section{padding:112px 0}
/* the nav is sticky, so an anchored section has to clear its height */
section[id]{scroll-margin-top:96px}
/* opt-in tighter rhythm. Used where a section has to fit one screen. */
section.s-tight{padding:84px 0}
.s-tight .split{margin-bottom:26px}
.tight{padding:88px 0}
@media(max-width:900px){.wrap{padding:0 20px}section{padding:72px 0}}
.b-paper{background:var(--paper)} .b-white{background:var(--white)}
.b-sand{background:var(--sand)} .b-ink{background:var(--ink);color:var(--on-dark)}
.b-green{background:var(--green-dk);color:var(--white)}
/* --green-tint was defined in the palette and used exactly once on the whole
   site. A light green band breaks a run of beige without going dark, and every
   ink token clears AA on it (ink-70 6.2, rust-dk 5.7). */
.b-mint{background:var(--green-tint)}
.b-mint .eyebrow{color:var(--green-dk)}

/* type */
.eyebrow{font-family:var(--display);font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--rust);margin-bottom:16px}
.b-sand .eyebrow{color:var(--rust-dk)}
.b-ink .eyebrow{color:var(--rust-lt)} .b-green .eyebrow{color:var(--rust-pale)}
h1{font-size:var(--fs-h1-lg);line-height:var(--lh-display);font-weight:var(--fw-semibold);letter-spacing:var(--tr-xl)}
h2{font-size:var(--fs-h2-lg);letter-spacing:var(--tr-lg)}
h3{font-size:var(--fs-h4)}
.lede{font-size:var(--fs-body);line-height:var(--lh-copy);color:var(--ink-70);max-width:64ch}
.b-ink .lede{color:var(--on-dark-70)}
.b-green .lede{color:var(--on-green-70)}
.prose{font-size:var(--fs-body);line-height:var(--lh-copy);color:var(--ink-70);max-width:62ch}
.b-ink .prose{color:var(--on-dark-70)}
.small{font-size:var(--fs-small);color:var(--ink-70);line-height:var(--lh-body)}

.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);gap:26px 72px;align-items:end;margin-bottom:56px}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:18px;align-items:start;margin-bottom:40px}}
.mid{text-align:center;max-width:760px;margin:0 auto 56px} .mid .lede{margin:16px auto 0}

/* buttons */
.btn{display:inline-block;font-family:var(--body);font-size:var(--fs-small);font-weight:var(--fw-semibold);padding:15px 28px;border-radius:8px;background:var(--green-btn);color:var(--white);transition:transform .18s ease,background .18s ease}
.btn:hover{background:var(--green-dk);transform:translateY(-2px)}
.btn-inv{background:var(--white);color:var(--green-dk)} .btn-inv:hover{background:var(--paper);transform:translateY(-2px)}
.tlink{display:inline-flex;align-items:center;gap:6px;font-weight:var(--fw-semibold);font-size:var(--fs-small);color:var(--rust)}
.tlink .ar{transition:transform .18s ease;display:inline-block}
.tlink:hover .ar{transform:translateX(3px)} .tlink:hover{text-decoration:underline;text-underline-offset:4px}
.b-ink .tlink{color:var(--rust-lt)} .b-green .tlink{color:var(--rust-pale)}
.btnrow{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-top:36px}

/* nav */
/* The bar floats as a card inside a frosted band, after the NeuronsLab
   reference. .wrap is the card itself rather than a new element, so no nav
   markup changed: the wrap box already sits 40px outside the content column,
   which is the inset the reference uses. The band keeps a veil plus blur so the
   card reads as floating over whichever coloured section is scrolling under it. */
/* Light on dark, after the NeuronsLab reference. The bar is the only dark
   chrome on a light site, which is what makes it read as chrome rather than as
   another band of content. Contrast on --ink: --on-dark 14.52, --on-dark-70
   8.82, --on-dark-45 6.40, --rust-pale 9.9, so every state below clears AA. */
header.nav{position:sticky;top:0;z-index:50;padding:13px 0;
  background:rgba(var(--white-rgb),.62);backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3)}
header.nav>.wrap{display:flex;align-items:center;gap:34px;height:66px;
  background:var(--ink);border:1px solid var(--line-dk);border-radius:18px;
  box-shadow:0 14px 34px rgba(var(--ink-rgb),.30),
             0 1px 0 rgba(var(--white-rgb),.07) inset}
/* below the wrap's max-width the card would run edge to edge and stop reading
   as a floating bar, so it keeps its own gutter and trims its inner padding. */
@media(max-width:1080px){header.nav>.wrap{margin-left:16px;margin-right:16px;padding-left:22px;padding-right:22px}}
@media(max-width:620px){header.nav>.wrap{border-radius:14px;margin-left:12px;margin-right:12px;
  padding-left:16px;padding-right:16px}}
.brand{font-family:var(--display);font-weight:var(--fw-bold);font-size:var(--fs-h4);letter-spacing:var(--tr-xl);display:flex;align-items:center;gap:10px}
.brand i{width:12px;height:12px;background:var(--rust);border-radius:3px;display:inline-block;flex:none}
.nav .brand{color:var(--on-dark)}
.nav .brand i{background:var(--rust-lt)}
.nav ul{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0;font-size:var(--fs-small);font-weight:var(--fw-medium)}
.nav ul a{display:inline-flex;align-items:center;gap:5px;padding:4px 0;border-bottom:2px solid transparent;
  color:var(--on-dark);transition:color .16s ease,border-color .16s ease}
.nav ul a:hover{color:var(--rust-pale);border-bottom-color:var(--rust-pale)}
.nav .navtrig{color:var(--on-dark)}
.nav .btn{margin-left:auto;padding:10px 20px;font-size:var(--fs-caption)}
@media(max-width:1080px){.nav ul{display:none}}

/* narrow-viewport menu. CSS only, per the Island Test: a hidden-but-focusable
   checkbox drives a disclosure panel. Without this the nav vanishes under
   1080px and no interior page is reachable. */
.navchk{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.navburger{display:none;margin-left:auto;align-items:center;gap:10px;cursor:pointer;user-select:none;
  font-family:var(--display);font-size:var(--fs-label);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--on-dark);
  border:1px solid rgba(var(--white-rgb),.22);border-radius:9px;padding:9px 14px;
  transition:background .16s ease,border-color .16s ease}
.navburger:hover{border-color:rgba(var(--white-rgb),.4);background:rgba(var(--white-rgb),.09)}
.navburger i{position:relative;display:block;flex:none;width:16px;height:2px;background:currentColor}
.navburger i::before,.navburger i::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor}
.navburger i::before{top:-5px} .navburger i::after{top:5px}
.navchk:focus-visible~.wrap .navburger{outline:2.5px solid var(--rust-pale);outline-offset:3px}
.navpanel{display:none}
.navpanel .npgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 40px}
.navpanel .npgroup>a,.navpanel .nplab{display:block;font-family:var(--display);font-size:var(--fs-micro);
  font-weight:var(--fw-bold);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--on-dark-45);padding-bottom:9px;margin-bottom:11px;
  border-bottom:1px solid rgba(var(--white-rgb),.14)}
.navpanel .npgroup>a.on,.navpanel .nplab.on{color:var(--rust-pale)}
.navpanel ul{display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0}
.navpanel ul a{display:block;padding:11px 13px;border-radius:9px;
  background:rgba(var(--white-rgb),.045);border:1px solid rgba(var(--white-rgb),.10);
  font-size:var(--fs-small);font-weight:var(--fw-medium);color:var(--on-dark-70);
  transition:background .16s ease,border-color .16s ease,color .16s ease}
.navpanel ul a:hover{background:rgba(var(--white-rgb),.13);
  border-color:rgba(var(--white-rgb),.22);color:var(--rust-pale)}
.navpanel ul a.on{background:rgba(var(--white-rgb),.09);color:var(--on-dark)}
.navpanel .npsub{display:block;font-family:var(--display);font-size:var(--fs-micro);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--rust-pale);margin:16px 0 10px}
.navpanel .npsub:first-of-type{margin-top:4px}
.navpanel .npgroup ul+.npsub{margin-top:18px}
.navpanel .btn{display:inline-block;margin-top:30px}
@media(max-width:1080px){
  header.nav>.wrap{gap:18px}
  .navburger{display:inline-flex}
  .nav .btn{margin-left:0}
    .navchk:checked~.navpanel{display:block;position:absolute;left:16px;right:16px;top:100%;
    margin-top:11px;background:var(--ink);border:1px solid var(--line-dk);border-radius:18px;
    box-shadow:0 22px 46px rgba(var(--ink-rgb),.34);
    max-height:calc(100vh - 104px);overflow-y:auto;padding:26px 0 30px}
  .navchk:checked~.navpanel .wrap{padding-left:24px;padding-right:24px}
}
@media(max-width:620px){
  header.nav>.wrap>.btn{display:none}
  .navpanel .npgrid{grid-template-columns:1fr;gap:26px}
}
.nav ul li{position:relative;display:flex;align-items:center}
.nav .hassub{position:static}
.navtrig{padding:4px 0;cursor:default;border-bottom:2px solid transparent;transition:color .16s ease}
.nav .hassub>a,.navtrig{display:inline-flex;align-items:center;gap:5px}
/* A filled circular chevron badge instead of a bare triangle. The reference
   uses this to make the two expandable items read as controls, not links. */
.cv{position:relative;flex:none;width:17px;height:17px;border-radius:50%;
  background:rgba(var(--white-rgb),.13);
  transition:transform .2s ease,background .18s ease}
.cv::after{content:"";position:absolute;left:50%;top:50%;
  width:0;height:0;margin:-1.5px 0 0 -3.5px;
  border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4px solid currentColor}
.nav .hassub:hover .cv,.nav .hassub:focus-within .cv{transform:rotate(180deg);
  background:rgba(var(--rust-pale-rgb),.28)}
.nav .hassub:hover>.navtrig,.nav .hassub:focus-within>.navtrig,
.nav .hassub:hover>a,.nav .hassub:focus-within>a{color:var(--rust-pale)}
.nav .sub{position:absolute;top:100%;left:0;right:0;z-index:60;
  background:var(--ink);border-bottom:1px solid var(--line-dk);
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:14px;
  list-style:none;margin:0;
  padding:34px max(40px,calc((100vw - var(--wrap-max)) / 2 + 40px)) 38px;
      box-shadow:0 26px 50px rgba(var(--ink-rgb),.30);
  opacity:0;visibility:hidden;transform:translateY(-7px);
  transition:opacity .17s ease,transform .17s ease,visibility .17s ease}
.nav .sub::before{content:"";position:absolute;top:-15px;left:0;right:0;height:15px}
.nav .hassub:hover>.sub,.nav .hassub:focus-within>.sub{opacity:1;visibility:visible;transform:translateY(0)}
/* Same tile language as the mega panel, so the two dropdowns are one system. */
.nav .sub a{display:flex;height:100%;box-sizing:border-box;
  align-items:center;justify-content:center;text-align:center;min-height:104px;
  padding:16px 18px;border-radius:12px;border-bottom:0;
  border:1px solid rgba(var(--white-rgb),.09);background:rgba(var(--white-rgb),.055);
  font-size:var(--fs-lede);font-weight:var(--fw-medium);white-space:normal;
  line-height:var(--lh-title);letter-spacing:var(--tr-sm);text-wrap:balance;
  color:var(--on-dark-70);
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease}
.nav .sub>li{display:block}
.nav .sub:hover a,.nav .sub:focus-within a{color:var(--on-dark-45)}
.nav .sub a:hover,.nav .sub a:focus-visible{background:rgba(var(--white-rgb),.12);
  border-color:rgba(var(--white-rgb),.20);color:var(--rust-pale);
  border-bottom-color:rgba(var(--white-rgb),.20);transform:translateY(-1px)}
.nav .sub>li{position:relative}

/* Mega panel: the second level of Where We Work. Industries and Functions are
   label-only triggers (no hub pages), so the rail names the group and the right
   region holds the pages. Industries shows by default; hovering a group paints
   its own list opaquely over the top, so the swap holds even where :has() does
   not, and :has() only removes the default group's selected styling.
   Every selector is qualified with .nav: the generic `.nav ul` and `.nav ul a`
   rules above outrank a bare class, which silently reinstated their 28px gap
   and link padding the first time this was written. */
.nav .mega{position:static}
.nav .mega-panel{position:absolute;left:0;right:0;top:100%;z-index:60;
  background:var(--ink);border-bottom:1px solid var(--line-dk);
  box-shadow:0 26px 50px rgba(var(--ink-rgb),.30);
  opacity:0;visibility:hidden;transform:translateY(-7px);
  transition:opacity .17s ease,transform .17s ease,visibility .17s ease}
.nav .mega-panel::before{content:"";position:absolute;top:-15px;left:0;right:0;height:15px}
.nav .mega:hover>.mega-panel,.nav .mega:focus-within>.mega-panel{opacity:1;visibility:visible;transform:translateY(0)}
.nav .mega-grid{position:relative;display:flex;min-height:404px;
  padding-top:34px;padding-bottom:38px}
/* The rail tint runs to the viewport edge, as in the reference, so the panel
   reads as two regions rather than a card floating inside a card. It is drawn
   as a pseudo-element on the grid, not on .mrail: giving .mrail a position
   would make it the containing block for the absolutely positioned columns and
   collapse them to 296px. The 40px in the offset is the wrap's own padding,
   which the pseudo-element's percentage is measured against. */
.nav .mrail{width:296px;flex:none;box-sizing:border-box;
  background:rgba(var(--white-rgb),.05);border:1px solid rgba(var(--white-rgb),.07);
  border-radius:14px;padding:22px 20px}
.nav .mrt{font-family:var(--display);font-size:var(--fs-h4);font-weight:var(--fw-semibold);
  letter-spacing:var(--tr-lg);line-height:var(--lh-heading);color:var(--on-dark)}
.nav .mrd{font-size:var(--fs-caption);color:var(--on-dark-45);line-height:var(--lh-body);
  margin-top:9px;max-width:32ch}
.nav .mgroups{display:flex;flex-direction:column;gap:0;margin:22px 0 0;padding:0;list-style:none}
.nav .mgroups>li.mgrp{position:static;display:block;width:100%}
.nav .mgt{width:100%}
.nav .mgt{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:default;
  padding:15px 14px;border-radius:11px;margin-bottom:4px;
  font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--on-dark-70);
  transition:color .16s ease,background .16s ease}
.nav .mgt.on{color:var(--rust-pale)}
/* the selected group is a filled tile, so the rail and the pages read as one
   control rather than a heading over a list */
.nav .mgrp:first-child .mgt,.nav .mgrp:hover>.mgt,.nav .mgrp:focus-within>.mgt{
  color:var(--rust-pale);background:rgba(var(--white-rgb),.11)}
.nav .mega-grid:has(.mgrp:not(:first-child):hover) .mgrp:first-child .mgt,
.nav .mega-grid:has(.mgrp:not(:first-child):focus-within) .mgrp:first-child .mgt{
  color:var(--on-dark-70);background:transparent}
.cr{width:0;height:0;border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;
  border-left:4.5px solid currentColor;opacity:.5;flex:none;transition:opacity .16s ease,transform .16s ease}
.nav .mgrp:first-child .cr,.nav .mgrp:hover .cr,.nav .mgrp:focus-within .cr{opacity:1;transform:translateX(2px)}
/* the pages themselves, filling the right region. Column-major so each column
   reads top to bottom and a short last column reads as the end of the list.
   The left offset stops at the rail's right edge and the inset is padding, not
   position. With a 36px gap between the two, moving the cursor from a rail
   group toward that group's own pages crossed dead space: :hover on the group
   dropped mid-transit and the default group snapped back before the cursor
   arrived. Padding keeps the hover region continuous. */
.nav .mgcols{position:absolute;left:336px;right:40px;top:34px;
  display:grid;grid-auto-flow:column;grid-template-rows:repeat(3,auto);
  grid-auto-columns:1fr;column-gap:14px;row-gap:14px;margin:0;padding:0 0 0 36px;list-style:none;
  background:var(--ink);opacity:0;visibility:hidden;z-index:1}
/* the default group is revealed only while the panel itself is open. Setting
   visibility:visible unconditionally would override the closed panel's
   visibility:hidden, leaving an invisible list that still takes clicks and
   tab stops over the page below. */
/* The remaining dead zone was the rail's own 20px right padding plus its
   border: it belongs to .mrail and not to .mgrp, so a cursor crossing it lost
   :hover on the group and the default group came back. This bridge is
   transparent and carries no background, so it closes the gap for hit-testing
   without covering the rail's rounded right edge. It is absolutely positioned,
   which takes it out of the grid flow. */
.nav .mgcols::before{content:"";position:absolute;top:-16px;bottom:-16px;
  left:-26px;width:26px}
.nav .mega:hover .mgrp:first-child>.mgcols,
.nav .mega:focus-within .mgrp:first-child>.mgcols{opacity:1;visibility:visible}
.nav .mgrp:hover>.mgcols,.nav .mgrp:focus-within>.mgcols{opacity:1;visibility:visible;z-index:2}
/* Tiles, not a text list. Two things make the reference's hover read so
   clearly, and both are here: the hovered tile fills, and every sibling dims.
   The dim rule is on the container and the lit rule on the anchor, which have
   equal specificity, so the anchor rule must stay second in source order. */
.nav .mgcols li{display:block}
.nav .mgcols a{display:flex;width:100%;box-sizing:border-box;
  align-items:center;justify-content:center;text-align:center;min-height:104px;
  padding:16px 18px;border-radius:12px;
  background:rgba(var(--white-rgb),.055);border:1px solid rgba(var(--white-rgb),.09);
  font-size:var(--fs-lede);font-weight:var(--fw-medium);color:var(--on-dark-70);
  line-height:var(--lh-title);letter-spacing:var(--tr-sm);text-wrap:balance;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease}
.nav .mgcols:hover a,.nav .mgcols:focus-within a{color:var(--on-dark-45)}
.nav .mgcols a:hover,.nav .mgcols a:focus-visible{background:rgba(var(--white-rgb),.13);
  border-color:rgba(var(--white-rgb),.22);color:var(--rust-pale);transform:translateY(-1px)}
/* a nav leaf that leaves the site. Sales has no page here: the item goes to
   tabygen.com, and the arrow says so before it is clicked. */
.nav .mgcols .exr{margin-left:7px;font-size:var(--fs-caption);opacity:.7}
.nav .mgcols a:hover .exr{opacity:1}
.nav .mgcols a.on{background:rgba(var(--white-rgb),.09);border-color:rgba(var(--white-rgb),.16);
  color:var(--on-dark);font-weight:var(--fw-semibold)}
@media(max-width:1240px){.nav .mgcols{left:306px;padding-left:32px;column-gap:11px}.nav .mrail{width:266px}
  .nav .mgcols a{min-height:92px;font-size:var(--fs-body);padding:14px 14px}}
@media(max-width:1080px){.nav .mega-panel{display:none}}
@media(prefers-reduced-motion:reduce){.nav .sub,.mega-panel,.mgcols{transition:none}.cv,.cr,.mgt{transition:none}}

/* hero */
.hero{min-height:88vh;display:flex;align-items:center;padding:0;position:relative;overflow:hidden}
/* The hero carried a 46px ruled grid on ::before. It read as shading rather
   than structure and is gone; the two soft washes on ::after are the whole
   background treatment now. */
.b-paper.hero{background:var(--paper-cool)}
.hero::after{content:"";position:absolute;right:4%;top:4%;width:46%;height:92%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(var(--rust-rgb),.10),rgba(var(--rust-rgb),0) 70%),
             radial-gradient(closest-side at 70% 70%,rgba(var(--green-rgb),.09),rgba(var(--green-rgb),0) 70%)}
.hero .wrap{position:relative;z-index:1}
.hero .wrap{display:flex;align-items:stretch;gap:44px;width:100%;padding-top:72px;padding-bottom:56px}
.hero-txt{flex:1.1;display:flex;flex-direction:column;gap:26px;justify-content:center}
.hero-kicker{margin-bottom:-6px}
.hero .hero-kicker i{background:var(--rust)}
.hero .hero-kicker span{color:var(--rust)}
.hero h1{max-width:14ch} .hero .em{color:var(--rust)}
.hero .sub{font-size:var(--fs-lede);line-height:var(--lh-copy);max-width:46ch}
.hero .stamp{display:block;margin-top:12px;font-weight:var(--fw-semibold);color:var(--ink)}
.hero .btnrow{margin-top:4px}
/* portrait figure: height is driven by the text column, width follows */
.hero-fig{flex:0 0 clamp(250px,44%,520px);align-self:stretch;position:relative;margin:0;min-width:0}
.hero-fig img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;
  object-position:center bottom;display:block;mix-blend-mode:multiply;filter:saturate(1.08) contrast(1.04)}
@media(max-width:900px){.hero{min-height:0}.hero .wrap{flex-direction:column;gap:32px;padding-top:56px;padding-bottom:44px}
 .hero-fig{flex:0 0 auto;align-self:center;width:min(340px,72vw);height:auto;aspect-ratio:900/1122}}

/* stats */
/* the label wraps to one or two lines depending on the stat, so the link has
   to be pinned to the bottom of the cell or the row of links staggers */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:44px}
.stat{display:flex;flex-direction:column;align-items:flex-start}
@media(max-width:860px){.stats{grid-template-columns:repeat(2,1fr);gap:38px 28px}}
@media(max-width:480px){.stats{grid-template-columns:1fr}}
.stat .n{font-family:var(--display);font-size:var(--fs-num-lg);font-weight:var(--fw-regular);line-height:var(--lh-tight);letter-spacing:var(--tr-xl);font-variant-numeric:tabular-nums}
.stat .r{width:34px;height:3px;background:var(--rust-pale);margin:20px 0 13px}
.stat .sfx{color:var(--on-green-70)}   /* 6.27 on green-dk */
.stat .l{font-size:var(--fs-small);color:var(--on-green-70);line-height:var(--lh-body);max-width:22ch}
.stat .lk{display:inline-flex;gap:6px;margin-top:auto;padding-top:15px;font-size:var(--fs-caption);font-weight:var(--fw-semibold);color:var(--white);border-bottom:1px solid rgba(var(--white-rgb),.4)}
.stat .lk:hover{border-bottom-color:var(--white)}

/* logo marquee */
/* One strip, all ten logos. Each track holds the full set twice and the row
   holds two tracks, so translating one full track width lands the next copy
   exactly where the first was: seamless, and wide enough that no gap opens on a
   very wide display. */
/* the band under this one is also white now, so without a hairline the two
   merge into one undifferentiated white area */
.logos{padding:46px 0;overflow:hidden;border-bottom:1px solid var(--line)}
.logowall{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mrow{display:flex;width:max-content}
.mrow:hover .mtrack{animation-play-state:paused}
.mtrack{display:flex;align-items:center;gap:72px;padding:0 36px;animation:slide 95s linear infinite}
.mset{display:flex;align-items:center;gap:72px}
.lg{flex:none;height:98px;background-repeat:no-repeat;background-position:center;background-size:contain}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media(max-width:760px){.mtrack,.mset{gap:48px}.mtrack{padding:0 24px;animation-duration:58s}.lg{height:70px}
 .lg-uco{width:53px}.lg-mindspace{width:129px}.lg-jindal{width:90px}.lg-sail{width:92px}.lg-accenture{width:125px}
 .lg-canara,.lg-adani,.lg-galleon,.lg-directionway,.lg-getondata{width:70px}}
.lg-canara{width:98px;background-image:url(/assets/img/00.png)}
.lg-uco{width:74px;background-image:url(/assets/img/01.png)}
.lg-mindspace{width:181px;background-image:url(/assets/img/02.png)}
.lg-adani{width:98px;background-image:url(/assets/img/03.png)}
.lg-jindal{width:126px;background-image:url(/assets/img/04.png)}
.lg-sail{width:130px;background-image:url(/assets/img/05.png)}
.lg-accenture{width:174px;background-image:url(/assets/img/06.png)}
.lg-galleon{width:98px;background-image:url(/assets/img/07.png)}
.lg-directionway{width:98px;background-image:url(/assets/img/08.png)}
.lg-getondata{width:98px;background-image:url(/assets/img/09.png)}

/* definition */
.defn{padding:96px 0}
.defn-h{max-width:24ch;margin-bottom:28px}
.defn p{font-size:var(--fs-feature);line-height:var(--lh-copy);max-width:70ch;color:var(--ink)}

/* thesis */
.thesis h2{max-width:26ch;margin-bottom:44px}
.thesis .cols{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 64px}
@media(max-width:900px){.thesis .cols{grid-template-columns:1fr;gap:24px}}

/* grids + cards */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:940px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:30px;
  display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-card);
  transition:transform .22s ease,box-shadow .22s ease}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.b-white .card{background:var(--paper)}
.card p{font-size:var(--fs-small);color:var(--ink-70);line-height:var(--lh-body)}
.card .tlink{margin-top:auto;padding-top:6px}
.pill{align-self:flex-start;font-family:var(--display);font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--rust-dk);background:var(--rust-tint);padding:6px 11px;border-radius:5px}
/* three reasons: dark cards, high contrast against the white band */
.why{background:var(--ink);color:var(--on-dark);border:1px solid var(--line-dk);border-radius:16px;
  padding:34px 30px 30px;display:flex;flex-direction:column;
  box-shadow:0 2px 6px rgba(var(--ink-rgb),.10);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.why:hover{transform:translateY(-6px);box-shadow:0 20px 38px rgba(var(--ink-rgb),.30);border-color:var(--green)}
.wnum{display:block;font-family:var(--display);font-size:var(--fs-num-md);font-weight:var(--fw-regular);line-height:var(--lh-tight);
  color:var(--rust-lt);letter-spacing:var(--tr-xl);margin-bottom:20px;font-variant-numeric:tabular-nums}
.why h3{font-size:var(--fs-h3);font-weight:var(--fw-semibold);line-height:var(--lh-heading);letter-spacing:var(--tr-lg);color:var(--white);max-width:21ch}
.why p{font-size:var(--fs-small);color:var(--on-dark-45);line-height:var(--lh-body);margin-top:15px}
.why .wproof{margin-top:auto;padding-top:20px;border-top:1px solid rgba(var(--white-rgb),.15);
  font-size:var(--fs-label);color:var(--rust-lt)!important;font-weight:var(--fw-semibold)}
/* same subgrid treatment as the pillar cards: the headings run to one, two or
   three lines, so without it each card's body copy and proof rule start at a
   different height. Rows: number, heading, copy, proof. */
@supports (grid-template-rows:subgrid){
  .whys{grid-template-rows:repeat(4,auto);row-gap:0}
  .whys .why{display:grid;grid-row:span 4;grid-template-rows:subgrid}
  /* stretch, not end: the rule is on top of this block, so the block has to
     fill its row or a shorter proof line drops its rule below the others. */
  .whys .why .wproof{margin-top:20px;align-self:stretch}
}

/* THE THREE PILLARS. These were white cards with a 3px green edge and a numbered
   chip, which is the quietest thing on the page carrying the most important
   message. The numerals are gone: three cards do not need counting, and the
   index was the only element on them that said nothing.
   The card leads with a solid green head instead. Green owns area in this
   system and rust owns small type, so a filled head is the loudest move
   available without inventing a colour, and it gives the section the weight it
   should have had. The body stays white, so the deliverables list is read on
   the calmest ground on the page. */
.pillar{padding:0;gap:0;overflow:hidden;border-color:var(--line)}
.pillar .phead{background:var(--green-dk);padding:30px 30px 28px;
  transition:background .22s ease}
.pillar:hover .phead{background:var(--green-btn)}
.pillar h3{font-size:var(--fs-h3);line-height:var(--lh-heading);letter-spacing:var(--tr-md);
  font-weight:var(--fw-semibold);color:var(--white)}
.pillar .promise{font-size:var(--fs-body);color:var(--on-green-70);
  line-height:var(--lh-body);margin-top:12px}
.pillar .pbody{padding:26px 30px 28px;display:flex;flex-direction:column;flex:1}
.pillar .deliver{margin-top:0}
.dlab{display:block;font-family:var(--display);font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--ink-55)}
.pillar .deliver ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.pillar .deliver li{font-size:var(--fs-caption);color:var(--ink);line-height:var(--lh-body);padding-left:17px;position:relative}
.pillar .deliver li::before{content:"";position:absolute;left:1px;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--green-dk)}
.pillar .tlink{margin-top:auto;padding-top:26px}
.pillar .deliver li{padding-left:16px}
/* Subgrid, so the "What you get" rule, the list and the link all sit on the
   same lines across the three cards. The alternative was min-heights on the
   heading and the promise line, which only hold until someone edits the copy.
   The two rows are the green head and the white body, so the three heads end at
   the same line whatever length the promise runs to. Falls back to the flex
   layout above where subgrid is unsupported. */
@supports (grid-template-rows:subgrid){
  .pillars{grid-template-rows:repeat(2,auto);row-gap:0}
  .pillars .pillar{display:grid;grid-row:span 2;grid-template-rows:subgrid;gap:0}
  .pillars .pillar .pbody{display:flex}
}
.pull{font-family:var(--display);font-size:var(--fs-num-xl);font-weight:var(--fw-regular);line-height:.82;color:var(--rust);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.b-ink .pull{color:var(--rust-lt)}
.pullrow{margin-bottom:52px}
@media(max-width:900px){.pullrow{margin-bottom:36px}}

/* products */
.pcard{padding:0;overflow:hidden;gap:0}
.pimg{width:100%;height:120px;object-fit:cover;display:block;border-bottom:1px solid var(--line);background:var(--paper)}
.pbody{padding:26px 26px 28px;display:flex;flex-direction:column;gap:12px;flex:1}
.pcard h3{font-size:var(--fs-h4);font-weight:var(--fw-semibold);letter-spacing:var(--tr-lg);line-height:var(--lh-heading)}

/* statement */
.stmt{padding:150px 0;text-align:center}
.stmt p{font-family:var(--display);font-weight:var(--fw-regular);font-size:var(--fs-h1);line-height:var(--lh-heading);letter-spacing:var(--tr-lg);max-width:23ch;margin:0 auto;color:var(--on-dark)}
.stmt em{font-style:italic;color:var(--rust-lt)}
@media(max-width:900px){.stmt{padding:92px 0}}

/* table */
/* THE COMPARISON. This was a five-by-four table sitting inside the "why us"
   section, below three cards and 96px of margin, which is where an argument
   goes to be ignored. Four problems, all of them structural: a table is a
   lookup format and nobody reads one to be persuaded; the heading named the
   format rather than making a claim; the first cell the eye met was an empty
   header; and two competitor columns took two thirds of the visual field.
   It is its own band now, and the hierarchy is inverted. Our answer is the
   row, set large in white. The two alternatives are demoted underneath it in
   grey, labelled, at caption size. Same five comparisons, same words, roughly
   seventy per cent of the field now spent on the answer that matters. */
/* THE COMPARISON TABLE. Two data columns, not three: the product vendor and the
   consulting firm fail for related reasons, and three columns make a reader
   hold three models at once. Our column is the only one that carries weight,
   colour and a border; the alternatives column is deliberately recessed.
   The last row is conceded. Its highlight sits on the alternatives column and
   ours goes quiet, which is the highest-trust move a comparison can make and
   the reason the whole table gets read rather than discounted. */
.cmpwrap{margin-top:46px;overflow-x:auto;border:1px solid rgba(var(--white-rgb),.16);
  border-radius:18px}
.cmp{border-collapse:collapse;width:100%;min-width:760px}
.cmp th,.cmp td{text-align:left;padding:22px 26px;vertical-align:top}
.cmp .ch{font-family:var(--display);font-size:var(--fs-micro);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase}
.cmp thead th{padding-top:20px;padding-bottom:18px;
  border-bottom:1px solid rgba(var(--white-rgb),.22)}
.cmp thead th .ch{color:var(--on-dark-45)}
.cmp thead th.own{background:rgba(var(--green-rgb),.16)}
.cmp thead th.own .ch{color:var(--white)}
.cmp thead th:first-child{width:31%}
.cmp tbody th{font-family:var(--body);font-size:var(--fs-small);font-weight:var(--fw-semibold);
  color:var(--white);line-height:var(--lh-title);width:31%}
.cmp td.alt{font-size:var(--fs-small);line-height:var(--lh-copy);color:var(--on-dark-45);
  width:32%}
/* our column: the only cell with weight, a green wash and an edge down the
   left, so the eye lands there on every row without reading the others. */
.cmp td.own{font-family:var(--display);font-size:var(--fs-lede);
  font-weight:var(--fw-semibold);letter-spacing:var(--tr-sm);line-height:var(--lh-title);
  color:var(--white);background:rgba(var(--green-rgb),.10);
  box-shadow:inset 3px 0 0 var(--green)}
.cmp tbody tr+tr th,.cmp tbody tr+tr td{border-top:1px solid rgba(var(--white-rgb),.13)}
.cmp tbody tr:hover th,.cmp tbody tr:hover td.alt{background:rgba(var(--white-rgb),.045)}
.cmp tbody tr:hover td.own{background:rgba(var(--green-rgb),.16)}
/* the row we lose. The treatments swap. */
.cwin{display:none}
.cmp .conceded td.alt{font-family:var(--display);font-size:var(--fs-lede);
  font-weight:var(--fw-semibold);letter-spacing:var(--tr-sm);line-height:var(--lh-title);
  color:var(--white);background:rgba(var(--rust-rgb),.16);
  box-shadow:inset 3px 0 0 var(--rust-lt)}
.cmp .conceded:hover td.alt{background:rgba(var(--rust-rgb),.22)}
.cmp .conceded td.alt .cwin{display:block;margin-top:9px;font-family:var(--display);
  font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--rust-lt)}
.cmp .conceded td.own{font-family:var(--body);font-size:var(--fs-small);
  font-weight:var(--fw-regular);letter-spacing:0;line-height:var(--lh-copy);
  color:var(--on-dark-70);background:none;box-shadow:none}
.cmp .conceded:hover td.own{background:rgba(var(--white-rgb),.045)}
.cmpnote{margin-top:22px;font-size:var(--fs-small);color:var(--on-dark-45);max-width:70ch}
@media(max-width:900px){
  .cmp th,.cmp td{padding:16px 18px}
  .cmp td.own{font-size:var(--fs-body)}
}

/* case cards */
.case{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-card);transition:transform .22s ease,box-shadow .22s ease}
.case:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.b-sand .case{background:var(--white)}
.csimg{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border-bottom:1px solid var(--line)}
.csbody{padding:26px 28px 24px;display:flex;flex-direction:column;gap:13px;flex:1}
.case .big{font-family:var(--display);font-size:var(--fs-num-sm);font-variant-numeric:tabular-nums;font-weight:var(--fw-medium);line-height:var(--lh-tight);letter-spacing:var(--tr-xl);color:var(--rust)}
.case h3{font-size:var(--fs-lede);font-weight:var(--fw-semibold);line-height:var(--lh-title);letter-spacing:var(--tr-md)}
.case .foot{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}
.case .mark{height:22px;width:auto;object-fit:contain;filter:grayscale(1) opacity(.7)}
/* an anonymised engagement carries a descriptor where the mark would go. */
.case .cdsc{font-family:var(--display);font-size:var(--fs-caption);font-weight:var(--fw-semibold);line-height:var(--lh-title);color:var(--ink-70);max-width:24ch}

/* industry / function selectors. Two full-width cards, each one a directory:
   there are no industry or function hub pages, so every individual page is
   reachable from here in one click. */
.picks{display:flex;flex-direction:column;gap:22px}
.picker{color:var(--white);border-radius:18px;padding:42px 38px 36px;
  position:relative;overflow:hidden}
.picker.pk-ind{background:var(--green-dk);box-shadow:0 8px 20px rgba(var(--green-dk-rgb),.16)}
.picker.pk-fn{background:var(--ink);box-shadow:0 8px 20px rgba(var(--ink-rgb),.18)}
/* The group heading is the first thing read inside the panel, so it sits one
   clear step under the section h2 (46 / 38 / 24) and takes the accent while the
   page names stay white. That also makes the heading colour and the row hover
   colour the same accent, so the panel reads as one system. The accent has to
   change with the ground: only the pale rusts clear AA on green-dk and ink
   (--rust itself is 1.49 on green). */
.pickhead{position:relative;z-index:1;margin-bottom:26px;
  padding-bottom:22px;border-bottom:1px solid rgba(var(--white-rgb),.16)}
.pickhead h3{font-size:var(--fs-h2);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-xl);line-height:var(--lh-heading)}
/* one accent across both panels: --rust-pale is the only rust that clears AA
   on green-dk (4.90) and it also clears ink (10.18), so heading and hover use
   the same value on both grounds instead of drifting apart. --rust-lt would be
   richer on ink but is 2.99 on green, under even the large-text 3:1. */
.pickhead h3{color:var(--rust-pale)}
/* A ruled index, not a card grid. Twelve equal tiles read as a wall and the
   name never got to be the subject; here the name is set at h4 in the display
   face and the hairlines carry the structure the boxes were carrying. */
/* column-major, so each column reads top to bottom like a printed index and a
   short final column reads as "the list ended" rather than as an orphan row. */
.pickgrid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-flow:column;grid-template-rows:repeat(4,auto);column-gap:44px}
.drow{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:19px 14px 19px 2px;border-bottom:1px solid rgba(var(--white-rgb),.22);
  color:var(--white);border-radius:6px;
  transition:background .18s ease,padding .18s ease}
.dnm{font-family:var(--display);font-size:var(--fs-h4);font-weight:var(--fw-semibold);
  letter-spacing:var(--tr-md);line-height:var(--lh-title);text-wrap:balance;
  transition:color .18s ease}
.drow .ar{flex:none;opacity:0;transform:translateX(-6px);
  transition:opacity .18s ease,transform .18s ease,color .18s ease}
.drow:hover{background:rgba(var(--white-rgb),.07);padding-left:14px}
.drow:hover .ar{opacity:1;transform:translateX(0)}
.drow:hover .dnm,.drow:hover .ar{color:var(--rust-pale)}
@media(max-width:1000px){.pickgrid{grid-template-columns:repeat(2,1fr);column-gap:32px;
  grid-template-rows:repeat(6,auto)}}
@media(max-width:640px){.pickgrid{grid-template-columns:1fr;grid-auto-flow:row;
  grid-template-rows:none}
  .picker{padding:28px 22px 22px}.drow{padding:16px 10px 16px 2px}}

/* team */
/* Founder cards are horizontal so the whole section fits one screen: the old
   full-bleed portrait on top made each card taller than the copy needed. */
.team-card{display:flex;gap:22px;align-items:flex-start;
  background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  padding:22px 24px 24px;
  box-shadow:var(--shadow-card);transition:transform .22s ease,box-shadow .22s ease}
.team-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
/* Editorial portrait plates. Four ideas stacked, all in CSS, no drawn assets:
     1. the sketch itself: three copies of the same file, which the build
        deduplicates to one image on disk.
          base   greyscale photograph, the tonal ground
          dodge  inverted and blurred in color-dodge, the darkroom sketch
                 recipe, which produces the line work
          tone   hard contrast multiplied back over the top. This layer is what
                 makes the faces read; dodge alone is faint and washed out.
        .stack carries mix-blend-mode itself, so those three composite among
        themselves first and then multiply as a group onto the sand ground.
     2. an arch frame, the broadsheet column portrait shape.
     3. a dot halftone screen over the whole plate, so it reads as printed
        rather than filtered.
     4. a rust plate offset behind it, which reads as a second colour slightly
        out of register on press.
   The two photos carry their own contrast, opacity and crop: the sources are
   lit and framed very differently. Retune per photo if one is ever swapped. */
.sketch{position:relative;flex:none;width:159px;margin:0}
.sketch .plate{position:absolute;left:7px;top:7px;width:152px;aspect-ratio:1/1.14;
  background:var(--rust-plate);border-radius:96px 96px 8px 8px}
.sketch .frame{position:relative;display:block;width:152px;aspect-ratio:1/1.14;
  background:var(--sand);border-radius:96px 96px 8px 8px;overflow:hidden}
.sketch .frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  mix-blend-mode:multiply;background-size:3px 3px;
  background-image:radial-gradient(rgba(var(--ink-rgb),.32) 34%,transparent 36%)}
.sketch .stack{position:absolute;inset:0;mix-blend-mode:multiply;
  filter:contrast(1.4) brightness(.98);
  mask-image:radial-gradient(122% 112% at 50% 38%,#000 70%,transparent 100%);
  -webkit-mask-image:radial-gradient(122% 112% at 50% 38%,#000 70%,transparent 100%)}
.sketch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1);transform:scale(1.12)}
.sketch .dodge{filter:grayscale(1) invert(1) blur(7px);mix-blend-mode:color-dodge}
.sketch .tone{filter:grayscale(1) contrast(2.6) brightness(1.08);mix-blend-mode:multiply;opacity:.9}
.sk-a .stack{filter:contrast(1.26) brightness(1.01)}
.sk-a .tone{opacity:.8}
.sk-a img{transform:scale(1);object-position:center 18%}
.sk-lift .stack{filter:contrast(1.5) brightness(.97)}
.sk-lift img{transform:scale(1.34);object-position:55% 16%}
.team-body{padding:2px 0 0}
.team-body .role{font-family:var(--display);font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--rust)}
.team-body h3{font-size:var(--fs-h4);margin:7px 0 11px}
/* The founder LinkedIn link. It sits under the bio rather than beside the name,
   so the name stays the largest thing on the card. The glyph carries the
   LinkedIn blue, which is what every founder card that does this well does:
   the mark is recognised as a mark, and it needs no label beside it. */
.tli{display:inline-flex;align-items:center;justify-content:center;margin-top:16px;
  width:30px;height:30px;border-radius:7px;background:var(--linkedin);color:var(--white);
  transition:background .18s ease,transform .18s ease}
.tli:hover{background:var(--linkedin-dk);transform:translateY(-2px)}
@media(max-width:760px){.team-card{flex-direction:column}.sketch{width:118px}}

/* The award. The only ink panel in a white band, so it is the darkest thing in
   the section and reads first after the founders. The seal is a ring rather
   than a laurel: the numeral is the claim, and a wreath would read as clip art. */
.award{display:flex;align-items:center;gap:30px;margin-top:18px;
  background:var(--ink);color:var(--on-dark);border-radius:18px;padding:24px 32px}
.seal{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:108px;height:108px;border:2px solid var(--rust-lt);border-radius:50%;color:var(--rust-lt)}
.s-top{font-family:var(--display);font-size:var(--fs-micro);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase}
.s-num{font-family:var(--display);font-size:var(--fs-num-sm);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-lg);line-height:var(--lh-tight);color:var(--white)}
.award-txt h3{font-size:var(--fs-h3);color:var(--white);margin:0 0 8px}
.award-txt .small{color:var(--on-dark-70)}
/* .eyebrow is --rust by default, which is 3.09 on ink and fails as 13px bold.
   The .b-ink override does not reach here: this is an ink panel inside a white
   band, not an ink band. */
.award-txt .eyebrow{margin-bottom:11px;color:var(--rust-lt)}
@media(max-width:760px){.award{flex-direction:column;align-items:flex-start;gap:20px;padding:26px 24px}}

/* stepper */
/* THE FOUR STAGES. Reverted to the original layout on 29 Aug 2026, after two
   attempts at making it a card grid. The sequence is the content here, and a
   row of containers competes with the connector that carries it. Plain
   columns, numbered, with a dotted rule running between them. */
.stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0 26px}
.stage{position:relative;display:flex;flex-direction:column}
.stage:not(.last)::after{content:"";position:absolute;top:25px;left:62px;right:-26px;height:2px;
  background:repeating-linear-gradient(90deg,var(--ink-45) 0 7px,transparent 7px 13px)}
.snum{width:50px;height:50px;border-radius:50%;background:var(--green-btn);color:var(--white);display:grid;place-items:center;
  font-family:var(--display);font-size:var(--fs-feature);font-weight:var(--fw-semibold);position:relative;z-index:1}
.stage.last .snum{background:var(--green-dk)}
.stage h3{margin:22px 0 10px}
/* padding, not a margin on the gate: the gate uses margin-top:auto to line the
   four rules up, which collapses to zero on the tallest column and put the
   rule hard against the last line of copy. */
.stage p{font-size:var(--fs-small);color:var(--ink-70);line-height:var(--lh-body);padding-bottom:18px}
.stage .gate{margin-top:auto;padding-top:14px;border-top:2px solid var(--rust);font-size:var(--fs-small);color:var(--ink);font-weight:var(--fw-medium)}
.stage.last .gate{border-top-color:var(--green-dk)}
.glab{display:block;font-family:var(--display);font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--rust);margin-bottom:5px}
.stage.last .glab{color:var(--green-dk)}
@media(max-width:980px){.stages{grid-template-columns:repeat(2,1fr);gap:44px 26px}.stage:nth-child(2)::after{display:none}}
@media(max-width:640px){.stages{grid-template-columns:1fr;gap:36px}.stage::after{display:none!important}}
.caveat{margin-top:52px;font-size:var(--fs-body);color:var(--ink-55);font-style:italic}

/* faq */
.faq{display:flex;flex-direction:column;gap:38px;max-width:78ch;margin:0 auto}
.faq h3{font-size:var(--fs-feature);line-height:var(--lh-title);margin-bottom:10px}
.faq p{font-size:var(--fs-body);color:var(--ink-70);line-height:var(--lh-copy)}

/* closing CTA */
.cta-split{display:flex;flex-wrap:wrap;background:var(--green-dk)}
.cta-txt{flex:1 1 470px;padding:96px 80px;display:flex;flex-direction:column;gap:24px;justify-content:center}
.cta-txt h2{color:var(--white);max-width:15ch;margin:0}
.cta-txt .lede{color:rgba(var(--white-rgb),.78);max-width:42ch;margin:0}
.cta-kicker{display:flex;align-items:center;gap:10px}
.cta-kicker i{width:10px;height:10px;background:var(--rust-tint);border-radius:2px;display:inline-block}
.cta-kicker span{font-family:var(--display);font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--rust-tint)}
.cta-fig{flex:1 1 420px;position:relative;min-height:440px;overflow:hidden;margin:0}
.cta-fig img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
@media(max-width:900px){.cta-txt{padding:64px 24px}.cta-fig{min-height:300px}}

/* footer */
footer{background:var(--ink);color:var(--on-dark);padding:80px 0 40px}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:44px}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}
footer .brand{font-size:var(--fs-h4);margin-bottom:14px;display:block}
footer .desc{font-size:var(--fs-caption);color:var(--on-dark-45);max-width:44ch;line-height:var(--lh-body)}
footer h4{font-family:var(--display);font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--on-dark-45);margin-bottom:15px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:var(--fs-small)}
footer ul a{color:var(--rust-lt)} footer ul a:hover{color:var(--rust-pale);text-decoration:underline;text-underline-offset:3px}
.fbase{margin-top:64px;padding-top:26px;border-top:1px solid var(--line-dk);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:var(--fs-label);color:var(--on-dark-45)}
.fbase a{color:var(--rust-lt)} .fbase a:hover{color:var(--rust-pale);text-decoration:underline;text-underline-offset:3px}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important} html{scroll-behavior:auto}
  .mrow{width:auto;flex-wrap:wrap;justify-content:center}
  .mtrack{flex-wrap:wrap;justify-content:center;gap:44px}
  .mset{flex-wrap:wrap;justify-content:center;gap:44px}
  .mrow .mtrack[aria-hidden="true"]{display:none} .mset+.mset{display:none}
}


/* current nav item */
.nav ul a.on{color:var(--rust-pale);border-bottom-color:var(--rust-pale)}

/* interior hero */
.ihero{padding:56px 0 92px;position:relative;overflow:hidden}
.ihero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(var(--ink-rgb),.032) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--ink-rgb),.032) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 90% at 10% 0%,#000 0%,transparent 70%);
  mask-image:radial-gradient(120% 90% at 10% 0%,#000 0%,transparent 70%)}
.ihero .wrap{position:relative;z-index:1}
.ihero h1{font-size:var(--fs-h1);max-width:22ch;margin-top:18px}
.ihero .sub{font-size:var(--fs-lede);line-height:var(--lh-copy);max-width:58ch;margin-top:24px;color:var(--ink-70)}
.ihero .btnrow{margin-top:34px}
@media(max-width:900px){.ihero{padding:40px 0 64px}.ihero h1{max-width:none}}

/* hero: two columns, text plus an illustrative artifact */
.ihero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.86fr);gap:64px;align-items:center}
@media(max-width:1000px){.ihero-grid{grid-template-columns:1fr;gap:44px}}
.ihero-txt .crumb{margin-bottom:0}
.ihero-grid h1{max-width:19ch;margin-top:18px}
@media(max-width:900px){.ihero-grid h1{max-width:none}}

/* breadcrumb */
.crumb{display:flex;gap:9px;align-items:center;font-size:var(--fs-label);font-weight:var(--fw-semibold);
  letter-spacing:var(--tr-label);text-transform:uppercase;font-family:var(--display);color:var(--ink-55)}
.crumb a:hover{color:var(--rust-dk)}
.crumb span[aria-current]{color:var(--rust-dk)}

/* section head */
.shead{max-width:60ch}
.shead h2{margin-bottom:0}
.shead .lede{margin-top:20px}

/* arc strip */
.arc{display:flex;align-items:stretch;gap:0;margin-top:34px;border:1px solid var(--line);
  border-radius:16px;overflow:hidden;background:var(--white)}
.arcnode{flex:1;padding:26px 28px;display:flex;flex-direction:column;gap:8px;position:relative}
.arcnode+.arcnode{border-left:1px solid var(--line)}
.arcnode .an{font-family:var(--display);font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--rust-dk)}
.arcnode h4{font-size:var(--fs-lede);line-height:var(--lh-title);letter-spacing:var(--tr-sm)}
.arcnode p{font-size:var(--fs-caption);line-height:var(--lh-body);color:var(--ink-70)}
@media(max-width:900px){.arc{flex-direction:column}.arcnode+.arcnode{border-left:0;border-top:1px solid var(--line)}}

/* simple cta band */
.ctaband{background:var(--green-dk);color:var(--on-dark);border-radius:22px;padding:64px 56px;
  display:flex;gap:44px;align-items:center;flex-wrap:wrap}
.ctaband h2{font-size:var(--fs-h2);letter-spacing:var(--tr-lg);line-height:var(--lh-heading);max-width:20ch;flex:1 1 380px}
.ctaband .cbr{flex:1 1 300px;display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.ctaband p{font-size:var(--fs-body);line-height:var(--lh-copy);color:var(--on-green-70)}
@media(max-width:900px){.ctaband{padding:44px 28px;border-radius:16px}}

/* two column */
.twocol{display:grid;grid-template-columns:1fr 1.35fr;gap:56px;align-items:start}
@media(max-width:900px){.twocol{grid-template-columns:1fr;gap:26px}}

/* related */
.rels{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1000px){.rels{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.rels{grid-template-columns:1fr}}
.rel{border:1px solid var(--line);border-radius:14px;padding:24px 24px 22px;background:var(--paper);
  position:relative;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
/* the hovered card fills with the chrome green. Everything on it goes white and
   the body copy goes semibold: white on --green-hover measures 4.50 and passes
   AA at every size, and the extra weight keeps the caption-size line legible on
   a saturated ground. */
.rel:hover{transform:translateY(-4px);background:var(--green-hover);
  border-color:var(--green-hover);box-shadow:0 14px 28px rgba(var(--green-rgb),.30)}
.rel:hover .rlab,.rel:hover .ar,.rel:hover h4{color:var(--white)}
.rel:hover p{color:var(--white);font-weight:var(--fw-semibold)}
.rel .rlab{display:block;font-family:var(--display);font-size:var(--fs-micro);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--rust-dk);margin-bottom:10px}
.rel h4{font-size:var(--fs-lede);line-height:var(--lh-title);letter-spacing:var(--tr-sm);margin-bottom:8px}
.rel p{font-size:var(--fs-caption);line-height:var(--lh-body);color:var(--ink-70);padding-right:20px}
.rel .ar{position:absolute;right:22px;bottom:20px;color:var(--rust-dk)}


/* ============================================================================
   INDUSTRY PAGE TEMPLATE
   Shared by every /industries/* page. Lifted out of build_bfsi.py when the
   second industry page was built, so the twelve pages cannot drift apart.
   Page-specific CSS still goes in that page's own EXTRA.
   ============================================================================ */
/* hero artifact: the control map */
.cmap{margin:0;background:var(--white);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 22px 46px rgba(var(--ink-rgb),.13);overflow:hidden}
.cm-head{padding:15px 22px;background:var(--ink);color:var(--on-dark)}
.cm-lab{font-family:var(--display);font-size:var(--fs-micro);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase}
.cm-cols,.cm-row{display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:14px;padding:11px 22px;
  border-bottom:1px solid var(--line)}
.cm-cols{background:var(--paper)}
.cm-cols span{font-family:var(--display);font-size:var(--fs-micro);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--ink-55)}
.cm-cols span:nth-child(2){color:var(--green-dk)}
.cm-cols span:nth-child(3){color:var(--rust-dk)}
.cm-row{padding:13px 22px;font-size:var(--fs-label);line-height:var(--lh-body);
  transition:background .16s ease}
.cm-row:hover{background:var(--paper)}
.cm-p{font-weight:var(--fw-semibold);color:var(--ink)}
.cm-a{color:var(--ink-70)}
.cm-h{color:var(--rust-dk);font-weight:var(--fw-medium)}
.cm-foot{padding:14px 22px;font-size:var(--fs-label);line-height:var(--lh-body);
  color:var(--ink-70);background:var(--paper)}
@media(max-width:560px){.cm-cols{display:none}
  .cm-row{grid-template-columns:1fr;gap:4px}
  .cm-h::before{content:"Your people: ";font-weight:var(--fw-bold)}}

/* the regulatory ground */
.regs{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:960px){.regs{grid-template-columns:1fr}}
.rg{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--line-lt);
  border-radius:16px;padding:28px 26px 26px;box-shadow:var(--shadow-card);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.rg:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-top-color:var(--rust)}
.rg h3{font-size:var(--fs-h4);letter-spacing:var(--tr-md);line-height:var(--lh-heading)}
.rgd{margin:7px 0 14px;font-family:var(--display);font-size:var(--fs-micro);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--rust-dk)}
.rg p{font-size:var(--fs-small);line-height:var(--lh-copy);color:var(--ink-70)}
@supports (grid-template-rows:subgrid){
  .regs{grid-template-rows:repeat(3,auto);row-gap:0}
  .rg{display:grid;grid-row:span 3;grid-template-rows:subgrid}
}

/* the coverage strip. The rules an industry works under are a list, not an
   essay. The reader already knows what Legal Metrology is, so naming it is the
   whole job. This replaced four dense explainer cards on the industry pages,
   which read like a textbook written for someone who wrote the textbook. */
.covr{margin-top:40px;display:flex;flex-wrap:wrap;gap:13px}
/* Sized up from 13px to 15px with the padding to match. On a function page this
   strip carries the systems the reader already runs, which is the first thing a
   controller checks, and at label size it read as fine print. The hover fills
   with --green-hover, the one bright green in the palette: ink on it measures
   8.2, so the filled state is the most legible state, not the least. */
.covr span{font-family:var(--display);font-size:var(--fs-small);font-weight:var(--fw-semibold);
  color:var(--green-dk);background:var(--white);border:1px solid rgba(var(--green-dk-rgb),.2);
  border-radius:999px;padding:13px 24px;line-height:1.3;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,
    color .18s ease,background .18s ease}
.covr span:hover{transform:translateY(-3px);background:var(--green-hover);
  border-color:var(--green-hover);color:var(--white);
  box-shadow:0 12px 24px rgba(var(--green-rgb),.28)}
.b-ink .covr span{background:rgba(var(--white-rgb),.06);color:var(--on-dark);
  border-color:rgba(var(--white-rgb),.18)}
.b-ink .covr span:hover{background:var(--green-hover);color:var(--white);
  border-color:var(--green-hover);box-shadow:0 12px 24px rgba(var(--green-rgb),.3)}

/* the starting position */
.probs{margin-top:52px;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:860px){.probs{grid-template-columns:1fr}}
.prob{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:28px 28px 26px;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease}
.prob:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);background:var(--white);
  border-color:var(--line-lt)}
.prob h3{font-size:var(--fs-lede);line-height:var(--lh-title);letter-spacing:var(--tr-sm);
  margin-bottom:11px;max-width:30ch}
.prob p{font-size:var(--fs-small);line-height:var(--lh-copy);color:var(--ink-70)}
@supports (grid-template-rows:subgrid){
  .probs{grid-template-rows:repeat(2,auto) repeat(2,auto);row-gap:0}
  .prob{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:11px}
  .prob h3{margin-bottom:0}
}

/* the three tracks, on ink */
.trks{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:1000px){.trks{grid-template-columns:1fr}}
.trk{background:var(--ink);border:1px solid var(--line-dk);border-radius:18px;padding:32px 28px 28px;
  display:flex;flex-direction:column;gap:13px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.trk:hover{transform:translateY(-4px);border-color:var(--green);
  box-shadow:0 20px 38px rgba(var(--ink-rgb),.30)}
.tknum{font-family:var(--display);font-size:var(--fs-num-sm);font-weight:var(--fw-regular);
  line-height:var(--lh-tight);letter-spacing:var(--tr-lg);color:var(--rust-lt);
  font-variant-numeric:tabular-nums}
.trk h3{font-size:var(--fs-h4);letter-spacing:var(--tr-md);color:var(--white)}
.tkbody{font-size:var(--fs-small);line-height:var(--lh-copy);color:var(--on-dark-70)}
.tklist{margin:auto 0 0;padding-top:20px;border-top:1px solid rgba(var(--white-rgb),.16);list-style:none;
  display:flex;flex-direction:column;gap:9px}
.tklist li{font-size:var(--fs-label);line-height:var(--lh-body);padding-left:18px;position:relative;
  color:var(--on-dark)}
.tklist li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:2px;
  background:var(--green)}
@supports (grid-template-rows:subgrid){
  .trks{grid-template-rows:repeat(4,auto);row-gap:0}
  .trks .trk{display:grid;grid-row:span 4;grid-template-rows:subgrid;gap:13px}
  .trks .tklist{margin-top:7px;align-self:stretch}
}

/* where AI lands */
.ucs{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
@media(max-width:1000px){.ucs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ucs{grid-template-columns:1fr}}
.uc{position:relative;background:var(--white);padding:28px 26px 26px;display:flex;
  flex-direction:column;gap:10px;
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
/* the matrix is a 1px mortar grid, so a tile cannot translate without opening a
   gap in the grout. It scales up instead, which covers the mortar and reads as
   the tile coming forward. */
.uc:hover{background:var(--paper);transform:scale(1.035);z-index:2;
  box-shadow:0 16px 30px rgba(var(--ink-rgb),.16)}
.uc h3{transition:color .16s ease}
.uc:hover h3{color:var(--rust)}
.uc .ar{transition:transform .16s ease}
.uc:hover .ar{transform:translateX(3px)}
.uc h3{font-size:var(--fs-lede);line-height:var(--lh-title);letter-spacing:var(--tr-sm)}
.uc p{font-size:var(--fs-caption);line-height:var(--lh-body);color:var(--ink-70)}
.uc .tlink{margin-top:auto;padding-top:14px;font-size:var(--fs-label)}

/* the self-selection block */
.offer{margin-top:52px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1040px){.offer{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.offer{grid-template-columns:1fr}}
.ofc{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--line-lt);
  border-radius:16px;padding:26px 24px 22px;display:flex;flex-direction:column;
  box-shadow:var(--shadow-card);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.ofc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-top-color:var(--green-dk)}
.ofc h3{font-size:var(--fs-feature);line-height:var(--lh-title);letter-spacing:var(--tr-sm)}
.ofw{margin-top:8px;font-size:var(--fs-caption);line-height:var(--lh-body);color:var(--ink-55)}
.oflist{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:2px}
.oflist a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 10px 10px 0;font-size:var(--fs-small);font-weight:var(--fw-medium);
  line-height:var(--lh-title);color:var(--ink);border-radius:6px;
  transition:color .16s ease,padding .16s ease}
.oflist a .ar{flex:none;color:var(--ink-45);transition:transform .16s ease,color .16s ease}
.oflist a:hover{color:var(--rust);padding-left:8px}
.oflist a:hover .ar{color:var(--rust);transform:translateX(3px)}
.oflist li+li a{border-top:1px solid var(--line)}
/* subgrid, same reason as the homepage pillar cards: the headings run to one or
   two lines, so without it the blurbs and link lists start at different heights. */
@supports (grid-template-rows:subgrid){
  .offer{grid-template-rows:repeat(3,auto);row-gap:0}
  .ofc{display:grid;grid-row:span 3;grid-template-rows:subgrid}
}
/* .split already carries its own 56px gap and the card grids below carry
   margin-top, so inside an industry section the head drops its margin.
   Scoped by :has so other interior pages keep the homepage spacing. */
section:has(.regs,.covr,.probs,.trks,.ucs,.offer,.arc,.rels,.trn) .split{margin-bottom:0}
/* THE OFFER CARDS ON AN INK BAND. On the function pages this section moved off
   sand and onto ink, and the card takes the homepage "why" treatment: a solid
   ink ground a shade off the band, a rust-light heading rule and a green border
   on hover. The light version above is still what the industry pages use, so
   the component adapts to the ground it is on rather than forking. */
.b-ink .ofc{background:var(--ink);border:1px solid var(--line-dk);border-top:3px solid var(--line-dk);
  box-shadow:0 2px 6px rgba(0,0,0,.28)}
.b-ink .ofc:hover{box-shadow:0 20px 38px rgba(0,0,0,.42);border-color:var(--green);
  border-top-color:var(--green)}
.b-ink .ofc h3{color:var(--white)}
.b-ink .ofw{color:var(--rust-lt)}
.b-ink .oflist{border-top-color:rgba(var(--white-rgb),.16)}
.b-ink .oflist a{color:var(--on-dark-70)}
.b-ink .oflist a .ar{color:var(--on-dark-45)}
.b-ink .oflist a:hover{color:var(--white)}
.b-ink .oflist a:hover .ar{color:var(--rust-lt)}
.b-ink .oflist li+li a{border-top-color:rgba(var(--white-rgb),.16)}
.b-ink .offx{color:var(--on-dark-70)}
.b-ink .offx a{color:var(--rust-lt)}
.b-ink .offx a:hover{border-bottom-color:var(--rust-lt)}

.offx{margin-top:26px;font-size:var(--fs-body);color:var(--ink-70);max-width:74ch}
.offx a{color:var(--rust);font-weight:var(--fw-semibold);
  border-bottom:1px solid rgba(var(--rust-rgb),.4)}
.offx a:hover{border-bottom-color:var(--rust)}

/* the controls strip is one segmented band, so the segment scales forward for
   the same reason the use-case tiles do. */
.arc .arcnode{position:relative;transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
.arc .arcnode:hover{background:var(--paper);transform:scale(1.04);z-index:2;
  box-shadow:0 14px 28px rgba(var(--ink-rgb),.14)}
.arc .arcnode .an{transition:color .16s ease}
.arc .arcnode:hover .an{color:var(--rust-dk)}


/* ---------------------------------------------------------------------------
   COLOURED BANDS ON INDUSTRY PAGES
   The template ran eleven of twelve bands in paper, white or sand, with green
   appearing only on the closing CTA. These two bands put the primary back into
   the middle of the page, where the reader actually is.
   --------------------------------------------------------------------------- */

/* the capability tracks, now glass cards on deep green rather than ink on paper */
.b-green .trk{background:rgba(var(--white-rgb),.07);border:1px solid rgba(var(--white-rgb),.17);
  box-shadow:none}
.b-green .trk:hover{background:rgba(var(--white-rgb),.11);
  border-color:rgba(var(--white-rgb),.32);box-shadow:0 18px 34px rgba(0,0,0,.22)}
.b-green .tknum{color:var(--rust-pale)}          /* 5.0 on green-dk; rust-lt is 3.0 */
.b-green .trk h3{color:var(--white)}
.b-green .tkbody{color:var(--on-green-70)}       /* 6.18; on-dark-70 is only 4.5 here */
.b-green .tklist{border-top-color:rgba(var(--white-rgb),.20)}
.b-green .tklist li{color:var(--white)}
.b-green .tklist li::before{background:var(--green-pale)}

/* the controls strip on mint */
.b-mint .arc{background:rgba(var(--white-rgb),.62);
  border-color:rgba(var(--green-dk-rgb),.20)}
.b-mint .arcnode+.arcnode{border-left-color:rgba(var(--green-dk-rgb),.20)}
.b-mint .arc .arcnode:hover{background:var(--white);box-shadow:0 14px 28px rgba(var(--green-dk-rgb),.16)}
.b-mint .arcnode .an{color:var(--green-dk)}
@media(max-width:900px){
  .b-mint .arcnode+.arcnode{border-top-color:rgba(var(--green-dk-rgb),.20)}
}


/* ---------------------------------------------------------------------------
   BREAKING THE LIGHT STRETCH AFTER THE USE-CASE SECTION
   Sections six to twelve ran paper, white, sand, paper, white, paper: seven
   screens of the same two near-identical grounds, every one of them a grid of
   rounded bordered boxes. Two changes, one structural and one chromatic.
   --------------------------------------------------------------------------- */

/* 1. The use-case matrix moves onto ink. It is the densest block on the page
   and the largest single field of beige, so it is the one worth inverting. */
.b-ink .ucs{background:rgba(var(--white-rgb),.15);border-color:rgba(var(--white-rgb),.15)}
.b-ink .uc{background:var(--ink)}
.b-ink .uc:hover{background:rgba(var(--white-rgb),.07);box-shadow:0 18px 34px rgba(0,0,0,.42)}
.b-ink .uc h3{color:var(--white)}
.b-ink .uc:hover h3{color:var(--rust-pale)}
.b-ink .uc p{color:var(--on-dark-70)}
.b-ink .uc .tlink{color:var(--rust-pale)}

/* 2. STRATA. The engineering block was a 2x2 of long prose, which read as a
   page from a document rather than a section of a site. It is now four full
   width layers, because that is what the content actually is: a stack, built
   bottom up. Two things carry the visual weight. The layer numeral and its
   label sit in a left column as display type, so the eye has somewhere to
   land on every row. And the enumerations that were four lines of prose are
   chips, which is honest (they are lists) and turns the densest part of the
   section into the most scannable part. Copy per row is one sentence. */
.strata{margin-top:52px;display:grid;gap:14px}
.stratum{display:grid;grid-template-columns:152px 1fr;gap:0 40px;
  background:var(--white);border:1px solid rgba(var(--green-dk-rgb),.15);
  border-radius:18px;padding:30px 34px 28px;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease}
.stratum:hover{transform:translateY(-4px);
  border-color:rgba(var(--green-dk-rgb),.38);
  box-shadow:0 18px 34px rgba(var(--green-dk-rgb),.14)}
.stnum{font-family:var(--display);font-size:var(--fs-num-md);font-weight:var(--fw-regular);
  line-height:.85;letter-spacing:var(--tr-xl);color:var(--green-dk);
  font-variant-numeric:tabular-nums;transition:color .2s ease}
.stratum:hover .stnum{color:var(--rust-dk)}
.stlab{display:block;margin-top:9px;font-family:var(--display);font-size:var(--fs-micro);
  font-weight:var(--fw-bold);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--rust-dk)}
.stratum h3{font-size:var(--fs-h4);line-height:var(--lh-title);letter-spacing:var(--tr-sm)}
.stratum>div>p{margin-top:9px;font-size:var(--fs-small);line-height:var(--lh-copy);
  color:var(--ink-70);max-width:62ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:17px}
.chips span{font-size:var(--fs-caption);font-weight:var(--fw-medium);color:var(--ink-70);
  background:var(--green-tint);border:1px solid rgba(var(--green-dk-rgb),.18);
  border-radius:999px;padding:5px 13px;line-height:1.35;
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.stratum:hover .chips span{background:var(--green-pale);border-color:rgba(var(--green-dk-rgb),.34);
  color:var(--ink)}
@media(max-width:860px){
  .stratum{grid-template-columns:1fr;gap:14px 0;padding:26px 24px 24px}
  .stnum{font-size:var(--fs-num-xs)}
  .stlab{display:inline-block;margin-top:0;margin-left:12px;vertical-align:5px}
  .stcol{display:flex;align-items:baseline;gap:12px}
  .stlab{margin-left:0}
}

/* THE TABYGEN CARD. TabyGen has its own site and its own buyer, so on a
   function page the band's whole job is to hand the reader over. It went
   through two wrong shapes first: a two-card grid with module lists and an
   integration strip, which was a product page compressed into a band, and then
   a full-bleed centred strip, which read as a divider and got scrolled past.
   It is one broad card now, inset in a white band, with the type left aligned
   and the action held on the right, which is the standard product-spotlight
   shape and the one that survives a fast scroll. The name is set at hero
   scale, because a single large left-aligned line is the only element here
   doing any work.
   The purple is matched to tabygen.com and is used on this card and nowhere
   else in the chrome. White on --taby measures 4.61, so text on it stays at
   white or 88 per cent and never lower. No side accent rail: the ground and
   the width are what set the card apart. */
.tbnd{margin-top:8px;background:var(--taby);border-radius:24px;overflow:hidden;
  position:relative;padding:66px 60px;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:44px 56px;align-items:end;
  box-shadow:0 22px 44px rgba(var(--taby-rgb),.22)}
/* one soft highlight off the top right corner, so a flat fill this large does
   not read as a coloured box. It is decorative and sits under the content. */
.tbnd::before{content:"";position:absolute;top:-46%;right:-14%;width:60%;
  padding-bottom:60%;border-radius:50%;background:rgba(var(--white-rgb),.09);
  pointer-events:none}
.tbtx,.tbact{position:relative}
.tbeb{font-family:var(--display);font-size:var(--fs-label);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase;
  color:rgba(var(--white-rgb),.76)}
.tbnd h2{margin-top:18px;font-size:var(--fs-h1);line-height:var(--lh-display);
  letter-spacing:var(--tr-xl);color:var(--white)}
.tbsub{margin-top:20px;max-width:52ch;font-size:var(--fs-feature);
  line-height:var(--lh-copy);color:rgba(var(--white-rgb),.88)}
.tbact{padding-bottom:5px}
.btn-taby{background:var(--white);color:var(--taby-dk);white-space:nowrap}
.btn-taby:hover{background:var(--paper);transform:translateY(-2px)}
@media(max-width:940px){
  .tbnd{padding:44px 30px 40px;grid-template-columns:1fr;gap:30px;align-items:start}
  .tbnd h2{font-size:var(--fs-h1-lg)}
  .tbsub{font-size:var(--fs-lede)}
}

/* TRAINING, per function. We train the people in a function to use AI on their
   own work, and every page had reduced that to one line in a footnote. It is a
   band now: three audiences, then the catalogue links. */
.trn{margin-top:48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.trc{background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:28px 26px 24px;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.trc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);background:var(--white)}
.trwho{font-family:var(--display);font-size:var(--fs-micro);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--rust-dk)}
.trc h3{margin-top:12px;font-size:var(--fs-lede);line-height:var(--lh-title);
  letter-spacing:var(--tr-sm)}
.trc p{margin-top:9px;font-size:var(--fs-small);line-height:var(--lh-copy);color:var(--ink-70)}
.trwalk{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-size:var(--fs-caption);line-height:var(--lh-body);color:var(--ink)}
.trwalk span{display:block;margin-bottom:5px;font-family:var(--display);
  font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--rust-dk)}
@media(max-width:940px){.trn{grid-template-columns:1fr}}






/* roadmap extract card */
.roadcard{margin:0;background:var(--white);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 22px 46px rgba(var(--ink-rgb),.13);overflow:hidden}
.rc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 22px;background:var(--ink);color:var(--on-dark)}
.rc-lab{font-family:var(--display);font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);text-transform:uppercase}
.rc-note{font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--on-dark-45);border:1px solid var(--line-dk);border-radius:4px;padding:3px 8px}
.rc-rows{list-style:none;margin:0;padding:0}
.rc-rows li{display:grid;grid-template-columns:auto 1fr auto;gap:15px;align-items:center;
  padding:16px 22px;border-bottom:1px solid var(--line)}
.rc-n{font-family:var(--display);font-size:var(--fs-label);font-weight:var(--fw-bold);color:var(--ink-55);
  font-variant-numeric:tabular-nums}
.rc-t{font-size:var(--fs-small);font-weight:var(--fw-semibold);line-height:var(--lh-title);min-width:0}
.rc-t em{display:block;font-style:normal;font-size:var(--fs-label);font-weight:var(--fw-regular);color:var(--ink-70);margin-top:3px}
.rc-tag{font-family:var(--display);font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);
  text-transform:uppercase;padding:5px 10px;border-radius:5px;white-space:nowrap}
.rc-tag.build{background:var(--green-pale);color:var(--green-dk)}
.rc-tag.buy{background:var(--rust-tint);color:var(--rust-dk)}
.rc-tag.stop{background:var(--sand);color:var(--ink-70)}
.rc-foot{padding:15px 22px;font-size:var(--fs-label);line-height:var(--lh-body);color:var(--ink-70);background:var(--paper)}

/* green band deliverables get scale */
.b-green .dgrid{margin-top:56px}

/* asks */
.asks{margin-top:52px;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.ask{background:var(--white);padding:30px 30px 32px;position:relative;
  transition:transform .18s ease,box-shadow .18s ease}
.ask:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);z-index:1}
.ask h3{font-size:var(--fs-lede);line-height:var(--lh-title);letter-spacing:var(--tr-sm);margin-bottom:12px;
  padding-left:20px;position:relative}
.ask h3::before{content:"\201C";position:absolute;left:0;top:-2px;font-family:var(--display);
  font-size:var(--fs-num-xs);line-height:var(--lh-tight);color:var(--rust)}
.ask p{font-size:var(--fs-small);line-height:var(--lh-copy);color:var(--ink-70);padding-left:20px}
.asks .ask:last-child:nth-child(odd){grid-column:1 / -1}
@media(max-width:860px){.asks{grid-template-columns:1fr}.asks .ask:last-child:nth-child(odd){grid-column:auto}}

/* services */
.svcs{margin-top:52px;display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
@media(max-width:960px){.svcs{grid-template-columns:1fr}}
.svc{border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
  background:var(--paper);border-top:3px solid var(--green)}
.svctop{padding:34px 32px 30px;background:var(--white);flex:1}
.svc h3{font-size:var(--fs-h4);letter-spacing:var(--tr-md)}
.svc h3 a:hover{color:var(--rust)}
.svc .promise{font-family:var(--display);font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--rust);
  margin:12px 0 16px;letter-spacing:var(--tr-sm)}
.svc .body{font-size:var(--fs-small);line-height:var(--lh-copy);color:var(--ink-70)}
.svc .deliver{padding:26px 32px 30px;border-top:1px solid var(--line);background:var(--green-tint)}
.svc .dlab{display:block;font-family:var(--display);font-size:var(--fs-micro);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--ink-55);margin-bottom:14px}
.svc .deliver ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.svc .deliver li{font-size:var(--fs-small);line-height:var(--lh-body);padding-left:20px;position:relative;color:var(--ink)}
.svc .deliver li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;
  border-radius:2px;background:var(--green)}
.svc .pfoot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-size:var(--fs-label);font-weight:var(--fw-medium);color:var(--rust-dk)}

/* deliverables on ink */
.dgrid{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(var(--white-rgb),.22)}
@media(max-width:960px){.dgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.dgrid{grid-template-columns:1fr}}
/* These were flat text blocks in a hairline grid: six paragraphs with a numeral
   above each, nothing to hover and nothing to scan. Each one now names the
   thing you actually receive, so the grid can be read on the headings alone,
   and the card lifts out of the grid on hover the way every other card on the
   site does. */
.ditem{background:var(--green-dk);padding:30px 26px 32px;position:relative;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease}
.ditem:hover{transform:translateY(-4px);background:var(--green-btn);
  box-shadow:0 16px 30px rgba(0,0,0,.24);z-index:1}
.ditem h3{margin:10px 0 10px;font-size:var(--fs-lede);letter-spacing:var(--tr-sm);
  line-height:var(--lh-title);color:var(--white)}
.ditem:hover .dn{color:var(--white)}
.ditem .dn{display:block;font-family:var(--display);font-size:var(--fs-num-xs);font-weight:var(--fw-regular);font-variant-numeric:tabular-nums;
  letter-spacing:var(--tr-md);color:var(--green-pale);margin-bottom:12px;line-height:var(--lh-tight)}
.ditem p{font-size:var(--fs-small);line-height:var(--lh-body);color:var(--on-green-70)}
.ditem:hover p{color:var(--white)}






/* hero artifact: the assembled stack */
.stackcard{margin:0;background:var(--white);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 22px 46px rgba(var(--ink-rgb),.13);overflow:hidden}
.sk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 22px;background:var(--ink);color:var(--on-dark)}
.sk-lab{font-family:var(--display);font-size:var(--fs-micro);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase}
.sk-note{font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--on-dark-45);border:1px solid var(--line-dk);border-radius:4px;padding:3px 8px}
.sk-rows{list-style:none;margin:0;padding:0}
.sk-rows li{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center;
  padding:15px 22px;border-bottom:1px solid var(--line)}
.sk-l{font-family:var(--display);font-size:var(--fs-small);font-weight:var(--fw-semibold);
  letter-spacing:var(--tr-sm);line-height:var(--lh-title)}
.sk-d{grid-column:1;font-size:var(--fs-label);line-height:var(--lh-body);color:var(--ink-70)}
.sk-t{grid-column:2;grid-row:1 / span 2;font-family:var(--display);font-size:var(--fs-micro);
  font-weight:var(--fw-bold);letter-spacing:var(--tr-label);text-transform:uppercase;
  padding:5px 10px;border-radius:5px;white-space:nowrap}
.sk-t.ai{background:var(--green-pale);color:var(--green-dk)}
.sk-t.eng{background:var(--sand);color:var(--ink-70)}
.sk-foot{padding:15px 22px;font-size:var(--fs-label);line-height:var(--lh-body);
  color:var(--ink-70);background:var(--paper)}

/* tracks */
/* .svtrk, not .trk: common.INTERIOR_CSS owns a global .trk, which is the dark
   track card on the function pages. This is a plain wrapper and the two
   collided, so every service group here rendered as an ink panel. Page CSS
   loads after the shared sheet, so only the properties this rule restated
   were winning; the background, border, radius and white heading were not. */
.svtrk{margin-top:64px}
.svtrkhead{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
  padding-bottom:22px;border-bottom:2px solid var(--ink)}
.svtrkn{font-family:var(--display);font-size:var(--fs-num-md);font-weight:var(--fw-regular);
  line-height:var(--lh-tight);letter-spacing:var(--tr-lg);color:var(--rust);font-variant-numeric:tabular-nums}
.svtrkhead h3{font-size:var(--fs-h3);letter-spacing:var(--tr-lg)}
.svtrkhead p{font-size:var(--fs-small);line-height:var(--lh-body);color:var(--ink-70);margin-top:6px;max-width:70ch}

.svgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-top:0;overflow:hidden}
@media(max-width:1000px){.svgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.svgrid{grid-template-columns:1fr}}
.sv{background:var(--white);padding:26px 26px 44px;position:relative;
  transition:background .16s ease,box-shadow .18s ease}
.sv::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
.sv.t1::before{background:var(--green)}
.sv.t2::before{background:var(--ink)}
.sv:hover{background:var(--paper);box-shadow:var(--shadow-card)}
.sv h3{font-size:var(--fs-lede);line-height:var(--lh-title);letter-spacing:var(--tr-sm);margin-bottom:9px}
.sv p{font-size:var(--fs-caption);line-height:var(--lh-body);color:var(--ink-70)}
.sv .ar{position:absolute;left:26px;bottom:20px;color:var(--rust-dk);transition:transform .18s ease}
.sv:hover .ar{transform:translateX(4px)}

/* products bridge, on green */
.prods{margin-top:52px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1080px){.prods{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.prods{grid-template-columns:1fr}}
.prod{background:var(--green-dk);border:1px solid rgba(var(--white-rgb),.3);border-radius:14px;
  padding:24px 22px 46px;position:relative;transition:transform .18s ease,border-color .18s ease}
.prod:hover{transform:translateY(-4px);background:var(--green-btn);box-shadow:0 16px 30px rgba(0,0,0,.24)}
.prod:hover{transform:translateY(-5px);border-color:var(--white)}
.prod h3{font-size:var(--fs-feature);line-height:var(--lh-title);letter-spacing:var(--tr-sm);
  margin-bottom:10px;color:var(--white)}
.prod p{font-size:var(--fs-caption);line-height:var(--lh-body);color:var(--on-green-70)}
.prod .ar{position:absolute;left:22px;bottom:20px;color:var(--green-pale);transition:transform .18s ease}
.prod:hover .ar{transform:translateX(4px)}

/* sand band adjustments */
.b-sand .arc{background:var(--white)}






/* hero artifact: the programme sheet */
.psheet{margin:0;background:var(--white);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 22px 46px rgba(var(--ink-rgb),.13);overflow:hidden}
.ps-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 22px;background:var(--ink);color:var(--on-dark)}
.ps-lab{font-family:var(--display);font-size:var(--fs-micro);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase}
.ps-note{font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--on-dark-45);border:1px solid var(--line-dk);border-radius:4px;padding:3px 8px}
.ps-rows{margin:0;padding:0}
.ps-row{display:grid;grid-template-columns:112px 1fr;gap:16px;align-items:baseline;
  padding:14px 22px;border-bottom:1px solid var(--line)}
.ps-k{margin:0;font-family:var(--display);font-size:var(--fs-micro);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--ink-55)}
.ps-v{margin:0;font-size:var(--fs-label);line-height:var(--lh-body);color:var(--ink)}
.ps-foot{padding:15px 22px;font-size:var(--fs-label);line-height:var(--lh-body);
  color:var(--ink-70);background:var(--paper)}
@media(max-width:520px){.ps-row{grid-template-columns:1fr;gap:4px}}

/* delivery tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
@media(max-width:1000px){.tiers{grid-template-columns:1fr}}
.tier{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:32px 28px 28px;
  display:flex;flex-direction:column;gap:14px;border-top:3px solid var(--green);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.tier:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--green)}
.tnum{font-family:var(--display);font-size:var(--fs-num-sm);font-weight:var(--fw-regular);
  line-height:var(--lh-tight);letter-spacing:var(--tr-lg);color:var(--rust);font-variant-numeric:tabular-nums}
.tier h3{font-size:var(--fs-h4);letter-spacing:var(--tr-md)}
.tier .tfor{font-family:var(--display);font-size:var(--fs-small);font-weight:var(--fw-medium);
  color:var(--rust-dk);letter-spacing:var(--tr-sm)}
.tier .tbody{font-size:var(--fs-small);line-height:var(--lh-copy);color:var(--ink-70)}
.tlist{margin:auto 0 0;padding-top:20px;border-top:1px solid var(--line);list-style:none;
  display:flex;flex-direction:column;gap:9px}
.tlist li{font-size:var(--fs-label);line-height:var(--lh-body);padding-left:18px;position:relative;color:var(--ink)}
.tlist li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:2px;background:var(--green)}

/* L&D quick facts */
.qfacts{margin-top:24px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line-dk);border:1px solid var(--line-dk);border-radius:14px;overflow:hidden}
@media(max-width:900px){.qfacts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.qfacts{grid-template-columns:1fr}}
.qf{background:var(--white);padding:20px 22px}
.qfk{display:block;font-family:var(--display);font-size:var(--fs-micro);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--rust-dk);margin-bottom:8px}
.qfv{font-size:var(--fs-label);line-height:var(--lh-body);color:var(--ink-70)}

/* the number, on ink */
.pull .plus{font-size:var(--fs-num-md);vertical-align:super;letter-spacing:0}

/* the catalogue */
.cats{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
@media(max-width:1000px){.cats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cats{grid-template-columns:1fr}}
.cat{background:var(--white);padding:28px 26px 46px;position:relative;
  transition:background .16s ease,box-shadow .18s ease}
.cat:hover{background:var(--paper);box-shadow:var(--shadow-card)}
.cat h3{font-size:var(--fs-lede);line-height:var(--lh-title);letter-spacing:var(--tr-sm);margin-bottom:9px}
.cat p{font-size:var(--fs-caption);line-height:var(--lh-body);color:var(--ink-70)}
.cflag{display:inline-block;font-family:var(--display);font-size:var(--fs-micro);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase;background:var(--green-pale);color:var(--green-dk);
  padding:4px 9px;border-radius:5px;margin-bottom:12px}
.cat .ar{position:absolute;left:26px;bottom:20px;color:var(--rust-dk);transition:transform .18s ease}
.cat:hover .ar{transform:translateX(4px)}
.catmore{margin-top:28px;max-width:76ch;font-size:var(--fs-small);line-height:var(--lh-copy);color:var(--ink-70)}

/* formats, on green */
.fmts{margin-top:52px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1000px){.fmts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fmts{grid-template-columns:1fr}}
.fmt{background:var(--green-dk);border:1px solid rgba(var(--white-rgb),.3);border-radius:14px;padding:24px 22px;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease}
.fmt:hover{transform:translateY(-4px);background:var(--green-btn);box-shadow:0 16px 30px rgba(0,0,0,.24)}
.fmt:hover p{color:var(--white)}
.fmt h3{font-size:var(--fs-feature);letter-spacing:var(--tr-sm);margin-bottom:10px;color:var(--white)}
.fmt p{font-size:var(--fs-caption);line-height:var(--lh-body);color:var(--on-green-70)}

/* TabyLearn bridge */
.tlb{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:56px;align-items:center;
  background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--green-dk);
  border-radius:18px;padding:44px 44px 46px}
@media(max-width:900px){.tlb{grid-template-columns:1fr;gap:30px;padding:32px 26px 34px}}
.tlb-txt{min-width:0}
.tlb h2{font-size:var(--fs-h2);letter-spacing:var(--tr-lg);line-height:var(--lh-heading);max-width:34ch}
.tlb .lede{margin-top:20px}
.tlb .btn{margin-top:28px}
.tlb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.tlb-list li{font-size:var(--fs-small);line-height:var(--lh-body);color:var(--ink);
  padding:14px 16px;background:var(--white);border:1px solid var(--line);border-radius:10px}





/* Four regulatory cards rather than three, so the grid is 2x2 and the subgrid
   row count doubles with it: three tracks per card, two rows of cards. */
.regs{grid-template-columns:repeat(2,1fr)}
@supports (grid-template-rows:subgrid){
  .regs{grid-template-rows:repeat(6,auto)}
}
@media(max-width:960px){.regs{grid-template-columns:1fr}}





/* -------------------------------------------------------------- products hub */
/* the hero opens on ink, matching the case studies hub, so the two pages under
   What We've Built read as a pair. */
.prhero{padding:56px 0 76px}
.prhero h1{font-size:var(--fs-h1);max-width:20ch;margin-top:20px}
.prhero .sub{margin-top:24px;max-width:62ch;font-size:var(--fs-lede);
  line-height:var(--lh-copy);color:var(--on-dark-70)}
.prhero .btnrow{margin-top:34px}

/* THE CATALOGUE. One card shape for all eight, four across, so the page reads as
   an index rather than as a ranked argument. The product name is the largest
   thing on the card, because on a catalogue the name is what is being looked
   up. */
.suite{margin-top:46px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media(max-width:1180px){.suite{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.suite{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.suite{grid-template-columns:1fr}}
/* One card system across the site: ink ground, white heading, grey body, rust
   label, green border on hover. It is the same card as the case study grid and
   the homepage stages. The light card this replaced was what made the page read
   pastel; the contrast now comes from the card going dark against a plain grey
   band rather than from tinting the band. */
.sui{position:relative;display:flex;flex-direction:column;background:var(--ink);
  color:var(--on-dark);border:1px solid var(--line-dk);border-radius:18px;
  padding:26px 24px 58px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.sui:hover{transform:translateY(-4px);box-shadow:0 20px 38px rgba(0,0,0,.34);
  border-color:var(--green)}
.suilab{font-family:var(--display);font-size:var(--fs-micro);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--rust-lt)}
.sui h3{margin-top:14px;font-size:var(--fs-h4);letter-spacing:var(--tr-sm);
  line-height:var(--lh-title);color:var(--white)}
.suid{margin-top:12px;font-size:var(--fs-small);line-height:var(--lh-copy);
  color:var(--on-dark-70)}
.suich{margin:20px 0 0;display:flex;flex-wrap:wrap;gap:7px}
.suich span{font-size:var(--fs-caption);font-weight:var(--fw-medium);
  color:var(--on-dark-70);background:rgba(var(--white-rgb),.08);
  border:1px solid rgba(var(--white-rgb),.18);border-radius:999px;padding:5px 12px;
  line-height:1.35;transition:background .18s ease,border-color .18s ease}
.sui:hover .suich span{background:rgba(var(--white-rgb),.14);
  border-color:rgba(var(--white-rgb),.3)}
.sui .ar{position:absolute;left:24px;bottom:24px;color:var(--rust-lt);
  transition:transform .18s ease}
.sui:hover .ar{transform:translateX(5px)}
/* TabyGen is the one card in the catalogue that leaves this domain, so it keeps
   the product's own purple. White on --taby measures 4.61, so text on it stays
   at white or 88 per cent. */
.sui-taby{background:var(--taby);border-color:var(--taby)}
.sui-taby:hover{background:var(--taby);border-color:var(--taby-dk);
  box-shadow:0 20px 38px rgba(var(--taby-rgb),.34)}
.sui-taby .suilab{color:rgba(var(--white-rgb),.82)}
.sui-taby .suid{color:rgba(var(--white-rgb),.88)}
.sui-taby .suich span,.sui-taby:hover .suich span{background:rgba(var(--white-rgb),.16);
  color:var(--white);border-color:rgba(var(--white-rgb),.3)}
.sui-taby .ar{color:var(--white)}






/* ---------------------------------------------------------- case studies */
/* The hero opens on ink. Every other interior page opens on paper, and the
   change of ground is deliberate: this is the page that answers "has it
   worked", and it should not look like another pitch. */
.cshero{padding:56px 0 76px}
.cshero h1{font-size:var(--fs-h1);margin-top:20px}
.cshero .sub{margin-top:24px;max-width:62ch;font-size:var(--fs-lede);
  line-height:var(--lh-copy);color:var(--on-dark-70)}

/* THE CARD. The figure is the largest thing on it, because a buyer scanning a
   proof page compares outcomes before reading anything. No illustration: the
   card carries a metric and a sector, and a decorative image between them
   weakens both. */
.cscat{margin-top:46px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:1040px){.cscat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.cscat{grid-template-columns:1fr}}
/* Every card on this page is the featured card's scheme: an ink ground, white
   heading, grey body, rust label, and the border turning green on hover. The
   light beige card it replaced was the thing that made the page read pastel;
   a dark card on a plain grey band is the sharpest contrast the palette has,
   and it is now the one card system across the hubs and the homepage. */
.ccard{position:relative;display:flex;flex-direction:column;background:var(--ink);
  color:var(--on-dark);border:1px solid var(--line-dk);border-radius:18px;
  padding:28px 26px 62px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.ccard:hover{transform:translateY(-4px);box-shadow:0 20px 38px rgba(0,0,0,.34);
  border-color:var(--green)}
.cctag{font-family:var(--display);font-size:var(--fs-micro);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--rust-lt)}
.ccfig{margin-top:20px;font-family:var(--display);font-size:var(--fs-h2);
  font-weight:var(--fw-semibold);letter-spacing:var(--tr-lg);line-height:1.06;
  color:var(--white);font-variant-numeric:tabular-nums}
.ccunit{margin-top:8px;font-size:var(--fs-caption);line-height:var(--lh-body);
  color:var(--on-dark-45)}
.ccard h3{margin-top:24px;padding-top:20px;border-top:1px solid rgba(var(--white-rgb),.16);
  font-size:var(--fs-h4);letter-spacing:var(--tr-sm);line-height:var(--lh-title);
  color:var(--white)}
.ccwho{margin-top:10px;font-family:var(--display);font-size:var(--fs-small);
  font-weight:var(--fw-semibold);line-height:var(--lh-title);color:var(--on-dark-70)}
.ccbody{margin-top:13px;font-size:var(--fs-small);line-height:var(--lh-copy);
  color:var(--on-dark-70)}
.ccstack{margin-top:20px;display:flex;flex-wrap:wrap;gap:7px}
.ccstack span{font-size:var(--fs-caption);font-weight:var(--fw-medium);
  color:var(--on-dark-70);background:rgba(var(--white-rgb),.08);
  border:1px solid rgba(var(--white-rgb),.18);border-radius:999px;padding:5px 12px;
  line-height:1.35;transition:background .18s ease,border-color .18s ease}
.ccard:hover .ccstack span{background:rgba(var(--white-rgb),.14);
  border-color:rgba(var(--white-rgb),.3)}
.ccard .ar{position:absolute;left:26px;bottom:26px;color:var(--rust-lt);
  transition:transform .18s ease}
.ccard:hover .ar{transform:translateX(5px)}

/* the featured card: the same anatomy, laid out wide, with the figure given a
   column of its own. */
.ccfeat{margin-top:24px;display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:48px;background:var(--ink);color:var(--on-dark);border:1px solid var(--line-dk);
  border-radius:24px;padding:52px 48px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.ccfeat:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(0,0,0,.34);
  border-color:var(--green)}
@media(max-width:900px){.ccfeat{grid-template-columns:1fr;gap:30px;padding:34px 26px}}
.ccfeat .ccfig{margin-top:0;font-size:var(--fs-num-sm);color:var(--white)}
.ccfeat .ccunit{color:var(--on-dark-45);max-width:24ch}
.ccfeat .cctag{color:var(--rust-lt)}
.ccfeat h2{margin-top:16px;font-size:var(--fs-h2);letter-spacing:var(--tr-lg);
  line-height:var(--lh-heading);color:var(--white);max-width:22ch}
.ccfeat .ccwho{color:var(--on-dark-70)}
.ccfeat .ccbody{color:var(--on-dark-70);max-width:62ch}
.ccfeat .ccstack{margin-top:30px}
.ccfeat .ccstack span{background:rgba(var(--white-rgb),.08);color:var(--on-dark-70);
  border-color:rgba(var(--white-rgb),.18)}
.ccfeat .tlink{display:inline-block;margin-top:28px;color:var(--rust-lt)}






/* ---------------------------------------------------------------------- about */
.abhero{padding:56px 0 76px}
.abhero h1{font-size:var(--fs-h1);max-width:19ch;margin-top:20px}
.abhero .sub{margin-top:24px;max-width:60ch;font-size:var(--fs-lede);
  line-height:var(--lh-copy);color:var(--on-dark-70)}
.abhero .btnrow{margin-top:34px}

/* THE PURPOSE STATEMENT. One paragraph, set at heading size, with the band to
   itself. It is the Anthropic move: the page states what the firm is for in
   about forty words and then stops talking, and the white space around it is
   what makes the reader believe it was meant. */
.purp{padding:76px 0 80px}
.purpstmt{margin-top:20px;max-width:26ch;font-family:var(--display);
  font-size:var(--fs-h2);font-weight:var(--fw-medium);letter-spacing:var(--tr-lg);
  line-height:var(--lh-heading);color:var(--ink)}
@media(max-width:760px){.purpstmt{max-width:none}}

/* THE PRINCIPLES. Statements, not an argument: no numeral, no proof line, no
   card chrome beyond a rule above each one. The band carries them on air. */
.pcards{padding:14px 0}
.pcard2{padding-top:22px;border-top:2px solid var(--ink)}
.pcard2 h3{font-size:var(--fs-h4);letter-spacing:var(--tr-sm);line-height:var(--lh-title);
  max-width:18ch}
.pcard2 p{margin-top:12px;font-size:var(--fs-small);line-height:var(--lh-copy);
  color:var(--ink-70);max-width:38ch}

/* the clients line: a heading and the marks, nothing else. */
.clh{margin-top:14px;font-size:var(--fs-h2);max-width:24ch}

/* THE FOUNDERS. Two full-width rows, photograph on one side and the writing on
   the other, alternating so the page has a rhythm going down it. The homepage
   uses small duotone sketches inside a card; here the picture is the point, so
   it runs at 420px from the 960x1280 originals and carries no treatment at all.
   A real photograph of a real person is the strongest trust signal an About page
   has, and every research source on B2B About pages says the same thing. */
.fdr{margin-top:52px;display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);
  gap:56px;align-items:start}
.fdr + .fdr{margin-top:72px;padding-top:72px;border-top:1px solid var(--line-lt)}
@media(min-width:981px){.fdr-alt .fdrpic{order:2}.fdr-alt .fdrtx{order:1}}
@media(max-width:980px){.fdr{grid-template-columns:1fr;gap:32px}
  .fdr .fdrpic{max-width:340px}}
.fdrpic{margin:0;border-radius:20px;overflow:hidden;background:var(--line);
  box-shadow:0 18px 40px rgba(var(--ink-rgb),.16)}
.fdrpic img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.fdrtx .role{font-family:var(--display);font-size:var(--fs-micro);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--rust)}
.fdrtx h3{margin-top:9px;font-size:var(--fs-h2);letter-spacing:var(--tr-lg);
  line-height:var(--lh-heading)}
.fdrtx .prose{margin-top:18px;max-width:62ch}
.fdrtx .abchips{margin-top:22px}
.fdrtx .tli{margin-top:20px}

/* credentials: the registered entity, the government recognition, the award.
   Same card system as everywhere else, one step quieter because the content is
   reference material. */
.creds{margin-top:44px}
.crd{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:26px 26px 24px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.crd:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--green)}
.crlab{font-family:var(--display);font-size:var(--fs-micro);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--rust-dk)}
.crd h3{margin-top:11px;font-size:var(--fs-h4);letter-spacing:var(--tr-sm);
  line-height:var(--lh-title)}
.crd p:last-child{margin-top:10px;font-size:var(--fs-small);line-height:var(--lh-copy);
  color:var(--ink-70)}

/* the client marks run under the paragraph that names them, inside the same
   band, so the names and the marks are read as one statement. The homepage strip
   is its own section with a closing border; this one needs neither. */
/* THE CLIENT MARKS. The homepage runs these as a moving marquee, full bleed
   under the hero, where a mark sliding off the edge reads as a strip that
   carries on. Dropped into the middle of a static page it read as a row of
   loose images: the animation had nowhere to go, the last mark was cut in half
   at the wrap edge, and because every .lg carries its own pixel width from the
   homepage strip, Mindspace came out three times the size of Canara.
   Here they are static and optically normalised instead: one cell per mark, the
   same box for all of them, the artwork fitted inside it. */
.ablogos{margin-top:38px;padding-top:38px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:44px 30px;
  align-items:center}
@media(max-width:900px){.ablogos{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px}}
@media(max-width:560px){.ablogos{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px}}
/* the width from the homepage strip is overridden, so every mark is measured
   into the same box and sits on the same optical weight. */
.ablogos .lg{width:100%;height:84px;background-size:contain;background-position:center}
@media(max-width:900px){.ablogos .lg{height:70px}}
@media(max-width:560px){.ablogos .lg{height:56px}}






/* -------------------------------------------------------------------- contact */
/* the state after a successful submit: the form's own card, one message in it */
.cfdone{grid-column:1/-1;padding:26px 4px 18px}
.cfdone h3{font-size:var(--fs-feature);line-height:var(--lh-title);margin-bottom:10px}
.cfdone p{font-size:var(--fs-body);color:var(--ink-70);line-height:var(--lh-copy);max-width:46ch}
/* the phone number sits under the email, one step quieter */
.cismall{font-size:var(--fs-body)}
/* One band, two columns. The page has a single job, so it gets no second
   section: everything a visitor needs to send a message is above the fold on a
   laptop, and the form is the only thing competing for attention. */
.ctsec{padding:40px 0 104px}
.ctgrid{margin-top:34px;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:72px;align-items:start}
@media(max-width:980px){.ctgrid{grid-template-columns:1fr;gap:48px}}
.ctside h1{font-size:var(--fs-h1);letter-spacing:var(--tr-xl);line-height:var(--lh-display)}
.ctlede{margin-top:20px;max-width:44ch;font-size:var(--fs-lede);line-height:var(--lh-copy);
  color:var(--ink-70)}

/* The contact card is the one dark object on the page, which is where the eye
   lands after the title and before the form. Same card system as everywhere
   else: ink ground, white heading, rust label. */
.cinfo{margin-top:34px;background:var(--ink);border:1px solid var(--line-dk);
  border-radius:18px;padding:28px 28px 26px}
.cilab{font-family:var(--display);font-size:var(--fs-micro);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--rust-lt)}
.cimail{display:inline-block;margin-top:10px;font-family:var(--display);
  font-size:var(--fs-h4);font-weight:var(--fw-semibold);letter-spacing:var(--tr-sm);
  color:var(--white);text-decoration:none;border-bottom:1px solid rgba(var(--white-rgb),.3);
  padding-bottom:2px;transition:border-color .18s ease,color .18s ease}
.cimail:hover{color:var(--rust-lt);border-color:var(--rust-lt)}
.cirule{height:1px;background:rgba(var(--white-rgb),.16);margin:24px 0 22px}
.ciaddr{margin-top:8px;font-size:var(--fs-small);line-height:var(--lh-copy);
  color:var(--on-dark-70)}
.cilink{display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-size:var(--fs-small);font-weight:var(--fw-semibold);color:var(--on-dark);
  text-decoration:none;transition:color .18s ease}
.cilink:hover{color:var(--rust-lt)}
.cilink .ar{transition:transform .18s ease}
.cilink:hover .ar{transform:translate(2px,-2px)}

/* What happens next is three lines, not a section: it answers the one question
   a person has while deciding whether to fill the form in. */
.cnext{margin-top:34px}
.cnext .cilab{color:var(--rust-dk)}
.cnext ol{margin:14px 0 0;padding:0;list-style:none;counter-reset:cn}
.cnext li{position:relative;padding:0 0 0 38px;margin-top:18px;counter-increment:cn}
.cnext li::before{content:counter(cn);position:absolute;left:0;top:0;width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--green-tint);color:var(--green-dk);font-family:var(--display);
  font-size:var(--fs-micro);font-weight:var(--fw-bold)}
.cnext h4{font-size:var(--fs-small);font-weight:var(--fw-semibold);
  letter-spacing:var(--tr-sm);color:var(--ink);line-height:var(--lh-title)}
.cnext p{margin-top:5px;font-size:var(--fs-small);line-height:var(--lh-copy);
  color:var(--ink-70)}

/* THE FORM. White card on the paper band, so the fields have a ground of their
   own. Inputs are filled rather than outlined, which is what the reference
   does and what keeps a nine-field form from reading as a grid of boxes. */
.cform{background:var(--white);border:1px solid var(--line);border-radius:20px;
  padding:34px 34px 32px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px 18px;box-shadow:var(--shadow-card)}
@media(max-width:560px){.cform{grid-template-columns:1fr;padding:26px 22px 24px}}
.cfld{grid-column:1/-1;display:flex;flex-direction:column}
@media(min-width:561px){.cfhalf{grid-column:auto}}
.cfld label{font-size:var(--fs-label);font-weight:var(--fw-semibold);color:var(--ink);
  letter-spacing:var(--tr-sm)}
.cfld label span{font-weight:var(--fw-regular);color:var(--ink-55)}
.cfld input,.cfld textarea,.cfld select{margin-top:8px;width:100%;font-family:var(--body);
  font-size:var(--fs-small);line-height:var(--lh-body);color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:11px;
  padding:13px 15px;transition:background .16s ease,border-color .16s ease,
  box-shadow .16s ease}
.cfld textarea{resize:vertical;min-height:132px}
.cfld input::placeholder,.cfld textarea::placeholder{color:var(--ink-45)}
.cfld input:hover,.cfld textarea:hover,.cfld select:hover{border-color:var(--line-lt)}
.cfld input:focus,.cfld textarea:focus,.cfld select:focus{outline:none;
  background:var(--white);border-color:var(--green);
  box-shadow:0 0 0 3px rgba(var(--green-rgb),.18)}
/* the native select arrow is drawn by the platform and does not match anything
   else on the page, so it is hidden and replaced. */
.cfsel{position:relative}
.cfsel select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer}
.cfchev{position:absolute;right:15px;top:50%;transform:translateY(-50%);
  color:var(--ink-55);pointer-events:none;font-size:var(--fs-label)}
.cfoot{grid-column:1/-1;margin-top:6px;display:flex;flex-wrap:wrap;align-items:center;
  gap:18px 22px}
.cform .btn{border:none;cursor:pointer;font-family:var(--body)}
.cfnote{flex:1;min-width:240px;font-size:var(--fs-caption);line-height:var(--lh-copy);
  color:var(--ink-55)}
.cfnote a{color:var(--rust-dk);font-weight:var(--fw-medium)}



/* ---- links whose page is not built yet ----
   The element is visually untouched: same colour, same arrow, same hover. Only
   the pointer cursor goes. Hiding the arrow was tried on 30 Aug 2026 and the
   client asked for it back, so do not add a rule for .ar here. */
a[data-unbuilt]{cursor:default}

/* ---- 404 ---- */
.nf{padding:120px 0 160px}
.nf h1{font-size:var(--fs-h1);letter-spacing:var(--tr-xl);margin-top:14px;max-width:16ch}
.nf .sub{font-size:var(--fs-lede);line-height:var(--lh-copy);color:var(--ink-70);
  max-width:52ch;margin-top:22px}
.nf .btnrow{margin-top:38px;display:flex;gap:26px;align-items:center;flex-wrap:wrap}
@media(max-width:900px){.nf{padding:72px 0 104px}}