/* ==========================================================================
   iSummation V2 — Design System  ·  charcoal + blue + warm amber
   Hybrid light/dark. All colour lives in the :root tokens below.
   ========================================================================== */

:root{
  /* Charcoal base (dark bands) */
  --char-950:#0f1114;
  --char-900:#16191d;
  --char-850:#1c2026;
  --char-800:#23282f;
  --char-700:#31373f;
  --char-600:#454c56;

  /* Blue — primary action */
  --blue-50:#eef4ff;
  --blue-100:#dbe6ff;
  --blue-200:#bdd0ff;
  --blue-400:#5b8cff;
  --blue-500:#3a72f5;
  --blue-600:#2a62e6;
  --blue-700:#1f4dbd;

  /* Amber — sampled from the logo master: brand orange #f89829 */
  --amber-50:#fff7ec;
  --amber-100:#ffe9cd;
  --amber-300:#ffc87f;
  --amber-400:#ffad4b;
  --amber-500:#f89829;
  --amber-600:#dd7c12;

  /* Brand navy from the logo master — used for the deepest UI ink */
  --brand-navy:#203366;

  /* Warm neutrals (light sections) */
  --ink:#191c21;
  --ink-2:#2b3038;
  --body:#4d525b;
  --muted:#767c86;
  --line:#e5e4e0;
  --line-2:#efeeea;
  --surface:#f3f0e9;      /* warm tint — now visibly different from white */
  --surface-2:#faf8f4;
  --white:#ffffff;

  /* On-dark text */
  --d-text:#e8e9ea;
  --d-body:#a9aeb6;
  --d-muted:#7d838d;
  --d-line:rgba(255,255,255,.10);
  --d-line-2:rgba(255,255,255,.06);

  --font-head:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --r-sm:8px;
  --r:12px;
  --r-lg:18px;
  --r-xl:26px;
  --shadow-sm:0 1px 2px rgba(25,28,33,.05), 0 1px 3px rgba(25,28,33,.06);
  --shadow:0 4px 12px -2px rgba(25,28,33,.07), 0 12px 28px -12px rgba(25,28,33,.13);
  --shadow-lg:0 18px 50px -18px rgba(25,28,33,.24);

  --maxw:1240px;
  --gutter:28px;
  --nav-h:88px;
}
@media(max-width:640px){:root{--gutter:18px;--nav-h:68px;}}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px);}
body{
  margin:0;background:var(--white);color:var(--body);
  font-family:var(--font-body);font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block;}
a{color:var(--blue-700);text-decoration:none;}
a:hover{color:var(--blue-600);}
h1,h2,h3,h4,h5,h6{font-family:var(--font-head);color:var(--ink);margin:0;line-height:1.16;letter-spacing:-.02em;font-weight:700;}
h1{font-size:clamp(2.25rem,4.6vw,3.75rem);font-weight:800;letter-spacing:-.03em;}
h2{font-size:clamp(1.7rem,3vw,2.5rem);}
h3{font-size:clamp(1.25rem,1.8vw,1.6rem);}
h4{font-size:1.06rem;}
p{margin:0 0 1rem;}
ul,ol{margin:0 0 1rem;padding-left:1.15rem;}
li{margin-bottom:.4rem;}
strong{color:var(--ink-2);font-weight:600;}
:focus-visible{outline:3px solid var(--blue-400);outline-offset:2px;border-radius:4px;}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
.wrap-narrow{max-width:860px;margin:0 auto;padding:0 var(--gutter);}
section{padding:76px 0;position:relative;}
section.tight{padding:48px 0;}
.bg-surface{background:var(--surface);}
/* Warm brand-tinted band — colour interest without a full black block */
.bg-tint{
  background:
    radial-gradient(900px 420px at 12% 0%, var(--amber-50), transparent 62%),
    radial-gradient(760px 420px at 92% 100%, var(--blue-50), transparent 60%),
    var(--surface-2);
}

/* Dark bands */
.dark h1,.dark h2,.dark h3,.dark h4,.dark h5,

/* Dot-grid + glow texture for dark bands */
.textured,.glow-blue,.glow-amber,.dark,.dark-deep{overflow:hidden;}
.textured::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
}
.glow-blue::after,.glow-amber::after{
  content:"";position:absolute;pointer-events:none;border-radius:50%;filter:blur(90px);
}
.glow-blue::after{
  width:620px;height:420px;top:-160px;right:-120px;
  background:radial-gradient(circle,rgba(58,114,245,.36),transparent 70%);
}
.dark > .wrap,.dark-deep > .wrap{position:relative;z-index:2;}

/* ---------- Eyebrow / section heads ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--amber-600);margin-bottom:18px;
}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--amber-500);}
.eyebrow.on-dark{color:var(--amber-300);}
.eyebrow.centered{justify-content:center;}

.section-head{max-width:740px;margin-bottom:42px;}
.section-head.has-link{margin-bottom:34px;}
.section-head.centered{margin-left:auto;margin-right:auto;text-align:center;}
.section-head p{font-size:17.5px;color:var(--muted);margin:14px 0 0;}
.dark .section-head p,.dark-deep .section-head p{color:var(--d-body);}
.section-head.wide{max-width:100%;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:end;}
@media(max-width:860px){.section-head.wide{grid-template-columns:1fr;gap:18px;}}
.section-head.wide p{margin-top:0;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 28px;border-radius:999px;border:1.5px solid transparent;
  font-family:var(--font-body);font-size:15.5px;font-weight:600;cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease,color .16s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-amber{background:var(--amber-500);color:#1a1206;box-shadow:0 10px 26px -10px rgba(242,137,31,.7);}
.btn-amber:hover{background:var(--amber-400);color:#1a1206;}
.btn-outline{border-color:var(--line);color:var(--ink);background:var(--white);}
.btn-outline:hover{border-color:var(--blue-400);color:var(--blue-700);}
.btn-outline-dark{border-color:rgba(255,255,255,.22);color:#fff;background:rgba(255,255,255,.04);}
.btn-outline-dark:hover{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.08);}
.btn-sm{padding:11px 21px;font-size:14px;}
.cta-arw{font-size:.86em;opacity:.75;margin-left:-2px;}
.btn-lg{padding:17px 34px;font-size:16.5px;}
@media(max-width:520px){.btn{white-space:normal;text-align:center;line-height:1.35;}}

/* back-compat aliases used by the inner pages */
.btn-primary{background:var(--blue-600);color:#fff;box-shadow:0 10px 26px -10px rgba(42,98,230,.65);}
.btn-primary:hover{background:var(--blue-700);color:#fff;}
.bg-ink{background:var(--char-900);color:var(--d-body);}
.bg-ink h2,.bg-ink h3,.bg-ink h4{color:#fff;}

.arrow-link{display:inline-flex;align-items:center;gap:8px;font-weight:650;font-size:15px;color:var(--blue-700);}
.arrow-link::after{content:"→";transition:transform .16s ease;}
.arrow-link:hover::after{transform:translateX(5px);}
.arrow-link.on-dark{color:var(--amber-300);}
.arrow-link.on-dark:hover{color:var(--amber-400);}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:120;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line);
}
/* Same column as the page content — the header must not out-run the body. */
.navbar{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
  height:var(--nav-h);display:flex;align-items:center;gap:16px;
}
/* Original stacked lockup, single image. */
.brand{display:flex;align-items:center;flex-shrink:0;margin-right:10px;}
.brand img{height:46px;width:auto;object-fit:contain;}
@media(min-width:760px){.brand img{height:56px;}}
@media(min-width:1200px){.brand img{height:62px;}}

.mainnav{display:none;align-items:center;gap:2px;margin-left:auto;}
@media(min-width:1200px){.mainnav{display:flex;}}
.nav-item{position:relative;}
.nav-trigger{
  display:flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  font-family:var(--font-body);font-size:15.2px;font-weight:600;color:var(--ink-2);
  padding:11px 14px;border-radius:var(--r-sm);transition:background .15s,color .15s;
  white-space:nowrap;
}
@media(max-width:1299px){.nav-trigger{font-size:14.2px;padding:9px 10px;}}
a.nav-trigger{text-decoration:none;}
.nav-trigger:hover,.nav-item:hover .nav-trigger{background:var(--surface);color:var(--blue-700);}
.nav-trigger .chev{font-size:9px;opacity:.5;transition:transform .18s;}
.nav-item:hover .nav-trigger .chev{transform:rotate(180deg);}
.nav-trigger.is-current{color:var(--blue-700);}

.mega{
  position:absolute;top:100%;left:0;padding-top:12px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;pointer-events:none;
}
.nav-item:hover .mega,.nav-item:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.mega.align-right{left:auto;right:0;}
/* V1-style panel: one simple column, label + short descriptor. */
.mega-inner{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:12px;min-width:330px;
}
.mega-sep{display:block;height:1px;background:var(--line-2);margin:8px 12px;}
/* Compact panel for label-only lists (Industries) */
.mega-compact .mega-inner{min-width:302px;}
.mega-compact a.mega-link{padding:8px 12px;font-size:14.2px;}
.mega a.mega-link{
  display:block;padding:10px 12px;border-radius:var(--r);color:var(--ink-2);
  font-size:14.6px;font-weight:600;transition:background .14s,color .14s;
}
.mega a.mega-link:hover{background:var(--blue-50);color:var(--blue-700);}
.mega a.mega-link small{display:block;font-size:12.3px;font-weight:400;color:var(--muted);margin-top:2px;line-height:1.45;}
.mega a.mega-link:hover small{color:var(--blue-700);opacity:.78;}

.nav-actions{display:none;align-items:center;gap:14px;margin-left:12px;}
@media(min-width:1200px){.nav-actions{display:flex;}}
@media(min-width:1400px){.nav-phone{display:block;}}
.nav-toggle{
  display:flex;flex-direction:column;justify-content:center;gap:5px;margin-left:auto;
  width:44px;height:44px;padding:11px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);cursor:pointer;
}
@media(min-width:1200px){.nav-toggle{display:none;}}
.nav-toggle span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-nav{
  display:none;border-top:1px solid var(--line);background:var(--white);
  max-height:calc(100vh - var(--nav-h));overflow-y:auto;padding:12px var(--gutter) 28px;
}
.mobile-nav.open{display:block;}
@media(min-width:1200px){.mobile-nav{display:none !important;}}
.m-group{border-bottom:1px solid var(--line-2);}
.m-group > button{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:none;border:0;padding:16px 2px;cursor:pointer;
  font-family:var(--font-head);font-size:16px;font-weight:700;color:var(--ink);text-align:left;
}
.m-group > button .chev{font-size:11px;color:var(--muted);transition:transform .2s;}
.m-group > button[aria-expanded="true"] .chev{transform:rotate(180deg);}
.m-panel{display:none;padding:0 2px 14px;}
.m-panel.open{display:block;}
.m-panel h6{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:10px 0 4px;}
.m-panel a{display:block;padding:9px 0;font-size:15px;font-weight:500;color:var(--body);}
.m-panel a:hover{color:var(--blue-700);}
.m-group.m-flat > a{
  display:block;padding:16px 2px;font-family:var(--font-head);font-size:16px;
  font-weight:700;color:var(--ink);
}
.m-group.m-flat > a:hover{color:var(--blue-700);}
.mobile-cta{display:flex;flex-direction:column;gap:10px;margin-top:22px;}

/* ==========================================================================
   HERO — dark charcoal, compact
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;padding:62px 0 68px;
  background:var(--char-950);color:var(--d-body);
}
@media(max-width:980px){.hero{padding:44px 0 56px;}}
.hero h1{color:#fff;margin-bottom:18px;font-size:clamp(2.1rem,3.9vw,3.3rem);}
.hero h1 .hl{
  background:linear-gradient(96deg,var(--amber-500) 0%,var(--amber-400) 45%,var(--amber-300) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-grid{
  position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;
  gap:52px;align-items:center;
}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:38px;}}
.hero-grid > *{min-width:0;}
.hero .sub{font-size:17.5px;color:var(--d-body);max-width:560px;margin-bottom:26px;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:30px;}

/* Stats sit directly under the CTA, V1-style */
.hero-proof{
  display:flex;flex-wrap:wrap;gap:16px 38px;
  border-top:1px solid var(--d-line);padding-top:24px;
}
.hero-proof b{
  display:block;font-family:var(--font-head);font-size:26px;font-weight:800;
  color:var(--amber-300);line-height:1.1;letter-spacing:-.02em;
}
.hero-proof span{font-size:12.8px;color:var(--d-muted);}
@media(max-width:520px){.hero-proof{gap:16px 26px;}.hero-proof b{font-size:23px;}}

/* ---------- Capability stage — an infographic, not a screenshot ---------- */
.hero-visual-wrap{position:relative;}
.stage{position:relative;min-height:430px;display:block;}
@media(max-width:980px){.stage{min-height:380px;}}

.stage-rings{position:absolute;inset:0;pointer-events:none;}
.stage-rings::before,.stage-rings::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border-radius:50%;border:1px solid rgba(255,255,255,.075);
}
.stage-rings::before{width:min(400px,86%);aspect-ratio:1;}
.stage-rings::after{
  width:min(268px,58%);aspect-ratio:1;border-color:rgba(255,255,255,.05);
  box-shadow:0 0 90px 20px rgba(58,114,245,.10) inset;
}

.stage-core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:210px;padding:26px 20px;text-align:center;z-index:3;
  background:linear-gradient(168deg,var(--char-850),var(--char-950));
  border:1px solid var(--d-line);border-radius:20px;
  box-shadow:0 30px 60px -26px rgba(0,0,0,.85), 0 0 0 6px rgba(248,152,41,.05);
}
.stage-core img{height:40px;width:auto;margin:0 auto 14px;}
.stage-core b{display:block;font-family:var(--font-head);font-size:14.5px;font-weight:700;color:#fff;}
.stage-core small{display:block;font-size:11.8px;color:var(--d-muted);margin-top:4px;}

.stage .node{
  position:absolute;z-index:2;width:186px;padding:14px 16px;
  background:rgba(28,32,38,.82);backdrop-filter:blur(8px);
  border:1px solid var(--d-line);border-radius:14px;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.stage .node:hover{transform:translateY(-3px);border-color:var(--amber-400);background:rgba(34,38,45,.92);}
.stage .node b{display:block;font-family:var(--font-head);font-size:13.8px;font-weight:700;color:#fff;}
.stage .node small{display:block;font-size:11.6px;color:var(--d-muted);margin-top:2px;line-height:1.4;}
.stage .node .dot{
  display:block;width:7px;height:7px;border-radius:50%;background:var(--amber-400);margin-bottom:9px;
  box-shadow:0 0 0 0 rgba(255,173,75,.55);animation:pulse 2.8s infinite;
}
.stage .node .dot.blue{background:var(--blue-400);animation-delay:.7s;}
.stage .node .dot.green{background:#3fb87a;animation-delay:1.4s;}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,173,75,.45);}
  70%{box-shadow:0 0 0 9px rgba(255,173,75,0);}
  100%{box-shadow:0 0 0 0 rgba(255,173,75,0);}
}
@media(prefers-reduced-motion:reduce){.stage .node .dot{animation:none;}}

.stage .n1{top:0;left:0;}
.stage .n2{top:0;right:0;}
.stage .n3{bottom:0;left:0;}
.stage .n4{bottom:0;right:0;}

@media(max-width:1100px){.stage .node{width:168px;}}
@media(max-width:640px){
  .stage{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .stage-rings{display:none;}
  .stage-core{position:static;transform:none;width:auto;grid-column:1/-1;padding:22px 18px;}
  .stage .node{position:static;width:auto;}
}

/* ==========================================================================
   Editorial statement (replaces a boxy section)
   ========================================================================== */
.statement{max-width:860px;margin:0 auto;text-align:center;}
.statement .eyebrow{justify-content:center;}
.statement h2{font-size:clamp(1.8rem,3.2vw,2.6rem);margin-bottom:26px;}
.statement .st-body p{font-size:17.5px;color:var(--muted);}
.statement .st-body p:last-child{margin-bottom:0;}

/* ==========================================================================
   Flagship pillars — one dark, one light. Deliberately not a tile pair.
   ========================================================================== */
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
@media(max-width:940px){.pillars{grid-template-columns:1fr;}}
.pillars > *{min-width:0;}
.pillar{
  position:relative;overflow:hidden;border-radius:var(--r-xl);padding:40px;
  display:flex;flex-direction:column;
}
.pillar .flagno{
  display:flex;align-items:center;gap:10px;font-family:var(--font-mono);
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:20px;
}
.pillar h3{font-size:clamp(1.35rem,2.1vw,1.85rem);margin-bottom:16px;}
.pillar > p{margin-bottom:24px;}
.pillar ul{list-style:none;padding:0;margin:0 0 28px;}
.pillar li{position:relative;padding:9px 0 9px 26px;font-size:14.8px;margin:0;}
.pillar li::before{
  content:"";position:absolute;left:2px;top:17px;width:10px;height:2px;border-radius:2px;
}
.pillar .pfoot{margin-top:auto;}

.pillar.dark-pillar{
  background:linear-gradient(158deg,var(--char-850),var(--char-950));
  color:var(--d-body);border:1px solid var(--d-line);
}
.pillar.dark-pillar::after{
  content:"";position:absolute;width:420px;height:300px;top:-120px;right:-100px;border-radius:50%;
  background:radial-gradient(circle,rgba(58,114,245,.4),transparent 70%);filter:blur(70px);pointer-events:none;
}
.pillar.dark-pillar > *{position:relative;z-index:2;}
.pillar.dark-pillar h3{color:#fff;}
.pillar.dark-pillar .flagno{color:var(--blue-400);}
.pillar.dark-pillar li{color:var(--d-body);border-top:1px solid var(--d-line-2);}
.pillar.dark-pillar li:first-child{border-top:0;}
.pillar.dark-pillar li::before{background:var(--blue-400);}

.pillar.warm-pillar{
  background:linear-gradient(158deg,var(--amber-50),#fffdfa 65%);
  border:1px solid var(--amber-100);
}
.pillar.warm-pillar .flagno{color:var(--amber-600);}
.pillar.warm-pillar li{color:var(--body);border-top:1px solid rgba(242,137,31,.14);}
.pillar.warm-pillar li:first-child{border-top:0;}
.pillar.warm-pillar li::before{background:var(--amber-500);}
.pillar.warm-pillar > p{color:var(--muted);}

/* ==========================================================================
   Row list — numbered editorial rows instead of a card grid
   ========================================================================== */
@media(max-width:860px){.rowlist{grid-template-columns:1fr;gap:0;}}
.dark .rowlist a,.dark .rowlist div.rl,

/* ==========================================================================
   Capability boxes — alternating accent, ghost numeral, washed watermark
   ========================================================================== */
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:960px){.cap-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.cap-grid{grid-template-columns:1fr;}}
.cap-grid > *{min-width:0;}

.cap-card{
  --acc:var(--amber-500);
  --acc-soft:var(--amber-50);
  --acc-line:var(--amber-100);
  --acc-ink:var(--amber-600);
  position:relative;overflow:hidden;display:block;padding:30px 28px 30px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.cap-card.acc-blue{
  --acc:var(--blue-500);
  --acc-soft:var(--blue-50);
  --acc-line:var(--blue-100);
  --acc-ink:var(--blue-700);
}

/* washed-out watermark from the brand image set */
.cap-card::after{
  content:"";position:absolute;right:-16px;bottom:-14px;width:168px;height:168px;
  background-image:var(--wm);background-size:contain;background-repeat:no-repeat;
  background-position:right bottom;
  filter:grayscale(1);opacity:.055;pointer-events:none;
  transition:opacity .25s ease,filter .25s ease,transform .25s ease;
}
/* accent wash in the same corner, so the card is never flat white */
.cap-card{
  background-image:radial-gradient(320px 220px at 108% 112%, var(--acc-soft), transparent 68%);
}
/* top rule wipes in on hover */
.cap-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--acc);
  transform:scaleX(0);transform-origin:left;transition:transform .28s ease;
}
.cap-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--acc-line);}
.cap-card:hover::before{transform:scaleX(1);}
.cap-card:hover::after{opacity:.13;filter:grayscale(.55);transform:translateY(-4px);}

.cap-no{
  position:absolute;top:20px;right:24px;
  font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.08em;
  color:var(--line);transition:color .2s ease;
}
.cap-card:hover .cap-no{color:var(--acc);}

.cap-ico{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:13px;background:var(--acc-soft);color:var(--acc-ink);margin-bottom:18px;
  box-shadow:inset 0 0 0 1px var(--acc-line);
  transition:background .22s,color .22s,box-shadow .22s;
}
.cap-ico svg{width:23px;height:23px;}
.cap-card:hover .cap-ico{background:var(--acc);color:#fff;box-shadow:inset 0 0 0 1px var(--acc);}
.cap-card h3{position:relative;z-index:2;font-size:1.08rem;margin-bottom:9px;letter-spacing:-.015em;padding-right:34px;}
.cap-card p{position:relative;z-index:2;font-size:14.6px;color:var(--muted);margin:0;}
/* Systems the workflow touches — pinned to the card foot so the row of cards
   lines up regardless of copy length. */
.cap-card{display:flex;flex-direction:column;}
.cap-sys{
  position:relative;z-index:2;display:block;margin-top:auto;padding-top:18px;
  font-family:var(--font-mono);font-size:10.6px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);opacity:.75;
}

/* ==========================================================================
   Delivery track — replaces the old five-row table. Duration first, because
   "how long" is the question a table buries.
   ========================================================================== */
.track{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);}
@media(max-width:1180px){.track{grid-template-columns:repeat(3,1fr);}}
@media(max-width:760px){.track{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.track{grid-template-columns:1fr;}}
.track-step{
  padding:26px 24px 28px 0;border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-width:0;
}
.track-step + .track-step{padding-left:24px;}
.track-step:last-child{border-right:0;}
@media(max-width:1180px){
  .track-step:nth-child(3n){border-right:0;}
  .track-step:nth-child(n+4){border-top:1px solid var(--line);}
}
@media(max-width:760px){
  .track-step{border-right:1px solid var(--line);}
  .track-step:nth-child(3n){border-right:1px solid var(--line);}
  .track-step:nth-child(2n){border-right:0;}
  .track-step:nth-child(n+3){border-top:1px solid var(--line);}
}
@media(max-width:520px){
  .track-step,.track-step + .track-step{padding:22px 0;border-right:0;}
  .track-step + .track-step{border-top:1px solid var(--line);}
}
.track-dur{
  font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue-700);
}
/* Two-line box so stage names of different length still put every
   description on the same baseline across the row. */
.track-step h3{
  font-size:1.22rem;margin:34px 0 10px;display:flex;align-items:baseline;gap:9px;letter-spacing:-.02em;
  min-height:2.44em;overflow-wrap:anywhere;
}
@media(max-width:520px){.track-step h3{min-height:0;margin-top:18px;}}
.track-step h3 i{
  font-style:normal;font-family:var(--font-mono);font-size:11px;font-weight:600;
  color:var(--amber-600);
}
.track-step p{font-size:14.2px;color:var(--muted);margin:0 0 18px;}
/* Bottom-anchored, no rule — a hairline here would sit at a different
   height in every column and read as misalignment. */
.track-step small{
  display:block;margin-top:auto;padding-top:16px;
  font-size:13.2px;color:var(--body);
}
.track-step small b{
  display:block;font-family:var(--font-mono);font-size:9.8px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;
}

/* Section-ending button, replaces the old inline "view all" links */

/* ==========================================================================
   Featured proof — asymmetric, not four equal tiles
   ========================================================================== */
.proof-layout{display:grid;grid-template-columns:1.25fr 1fr;gap:26px;align-items:start;}
@media(max-width:940px){.proof-layout{grid-template-columns:1fr;}}
.proof-layout > *{min-width:0;}
.case-feature{
  border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);background:var(--white);
  display:block;transition:box-shadow .2s,transform .2s;
}
.case-feature:hover{box-shadow:var(--shadow);transform:translateY(-3px);}
.case-feature .cf-img{aspect-ratio:16/9;background:var(--surface);overflow:hidden;}
.case-feature .cf-img img{width:100%;height:100%;object-fit:cover;}
.case-feature .cf-body{padding:28px 30px 32px;}
.case-feature h3{font-size:1.5rem;margin-bottom:12px;}
.case-feature p{color:var(--muted);margin-bottom:0;font-size:15.4px;}
.case-stack{display:flex;flex-direction:column;gap:14px;}
.case-mini{
  display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);
  padding:14px;transition:border-color .18s,transform .18s;
}
.case-mini:hover{border-color:var(--blue-200);transform:translateX(4px);}
.case-mini .cm-img{aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;background:var(--surface);}
.case-mini .cm-img img{width:100%;height:100%;object-fit:cover;}
.case-mini h3{font-size:.98rem;margin:0 0 4px;line-height:1.35;}
.case-mini p{font-size:12.8px;color:var(--muted);margin:0;}
.chip{
  display:inline-block;padding:4px 11px;border-radius:999px;background:var(--amber-50);
  color:var(--amber-600);font-size:10.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;margin-bottom:12px;
}
.chip.blue{background:var(--blue-50);color:var(--blue-700);}
.card > .chip{align-self:flex-start;}
.chip.on-dark{background:rgba(255,166,63,.15);color:var(--amber-300);}

/* ==========================================================================
   Industry pills (dark band) — flowing, not a grid of boxes
   ========================================================================== */

/* ==========================================================================
   Industries — editorial: statement left, numbered rows right
   ========================================================================== */
.ind-editorial{display:grid;grid-template-columns:.88fr 1.12fr;gap:70px;align-items:start;}
@media(max-width:960px){.ind-editorial{grid-template-columns:1fr;gap:38px;}}
.ind-editorial > *{min-width:0;}
.ind-intro h2{margin-bottom:20px;}
.ind-intro p{font-size:16.6px;color:var(--muted);max-width:460px;}

.ind-list a{
  display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;
  padding:21px 4px 21px 0;border-top:1px solid var(--line);
  font-family:var(--font-head);font-size:1.16rem;font-weight:650;letter-spacing:-.015em;
  color:var(--ink);transition:padding-left .2s ease,color .18s ease;
}
.ind-list a:last-child{border-bottom:1px solid var(--line);}
.ind-list a span{
  font-family:var(--font-mono);font-size:11.5px;font-weight:500;
  letter-spacing:.08em;color:var(--muted);transition:color .18s;
}
.ind-list a b{font-size:1rem;font-weight:400;color:var(--line);transition:color .18s,transform .2s;}
.ind-list a:hover{padding-left:12px;color:var(--amber-600);}
.ind-list a:hover span{color:var(--amber-500);}
.ind-list a:hover b{color:var(--amber-500);}
@media(max-width:520px){.ind-list a{font-size:1.02rem;gap:14px;}}

/* ==========================================================================
   Timeline (how we work)
   ========================================================================== */
.timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:30px;}
@media(max-width:900px){.timeline{grid-template-columns:1fr 1fr;gap:36px 26px;}}
@media(max-width:560px){.timeline{grid-template-columns:1fr;}}
.timeline::before{
  content:"";position:absolute;top:11px;left:0;right:0;height:2px;background:var(--line);
}
@media(max-width:900px){.timeline::before{display:none;}}
.tstep{position:relative;padding-top:44px;}
.tstep::before{
  content:"";position:absolute;top:4px;left:0;width:16px;height:16px;border-radius:50%;
  background:var(--white);border:3px solid var(--line);
}
.tstep.on::before{border-color:var(--amber-500);background:var(--amber-50);}
.tstep .tn{
  position:absolute;top:0;left:28px;font-family:var(--font-mono);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;color:var(--muted);line-height:24px;
}
.tstep h3{margin:0 0 8px;font-size:1.04rem;}
.tstep p{margin:0;font-size:14.4px;color:var(--muted);}

/* ==========================================================================
   Metrics band
   ========================================================================== */
.metric-band{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
@media(max-width:760px){.metric-band{grid-template-columns:1fr 1fr;}}
.metric-band > *{min-width:0;}
.metric b{
  display:block;font-family:var(--font-head);font-size:clamp(2rem,3.6vw,2.9rem);font-weight:800;
  color:var(--amber-300);line-height:1.08;letter-spacing:-.025em;
}
.metric span{font-size:13.8px;color:var(--d-muted);}

/* ==========================================================================
   Pull quotes — no card boxes
   ========================================================================== */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;}
@media(max-width:940px){.quotes{grid-template-columns:1fr;gap:32px;}}
.quotes > *{min-width:0;}
.pullquote{
  border-left:3px solid var(--amber-400);padding-left:24px;margin:0;
  display:flex;flex-direction:column;height:100%;
}
.pullquote figcaption{margin-top:auto;}
.pullquote blockquote{margin:0 0 18px;font-size:15.6px;color:var(--body);}
.pullquote figcaption strong{display:block;font-size:14px;color:var(--ink);font-weight:700;}
.pullquote figcaption span{font-size:12.8px;color:var(--muted);}
.dark .pullquote blockquote,.dark-deep .pullquote blockquote{color:var(--d-text);}
.dark .pullquote figcaption strong,.dark-deep .pullquote figcaption strong{color:#fff;}
.dark .pullquote figcaption span,.dark-deep .pullquote figcaption span{color:var(--d-muted);}

/* ==========================================================================
   Insight rows
   ========================================================================== */
@media(max-width:640px){.postrow a{grid-template-columns:88px 1fr;}.postrow a .pdate{display:none;}}
/* Closing-CTA button row (used inside the footer's .foot-cta). */
.cta-actions{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;}

/* ==========================================================================
   Generic cards / grids (inner pages)
   ========================================================================== */
.grid{display:grid;gap:22px;}
.grid > *{min-width:0;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:960px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--blue-200);}
.card.plain:hover{transform:none;box-shadow:var(--shadow-sm);border-color:var(--line);}
.card .ico{
  width:48px;height:48px;border-radius:var(--r);background:var(--blue-50);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;flex-shrink:0;
}
.card .ico.accent{background:var(--amber-50);}
.card .ico img{width:26px;height:26px;object-fit:contain;}
.card h3{margin-bottom:9px;font-size:1.06rem;}
.card p{font-size:14.8px;color:var(--muted);margin-bottom:0;}
.card p + p{margin-top:14px;}
.card .card-foot{margin-top:16px;}
.card-note{
  margin-top:34px;padding-top:26px;border-top:1px solid var(--line);text-align:center;
  font-size:16px;color:var(--muted);max-width:780px;margin-left:auto;margin-right:auto;
}

.case-tile{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s;
}
.case-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.case-thumb{aspect-ratio:16/10;background:var(--surface);overflow:hidden;}
.case-thumb img{width:100%;height:100%;object-fit:cover;}
.case-body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1;}
.case-body h3{font-size:1rem;line-height:1.35;margin-bottom:8px;}
.case-body p{font-size:13.8px;color:var(--muted);margin-bottom:0;}

.ind-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
@media(max-width:1000px){.ind-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:620px){.ind-grid{grid-template-columns:repeat(2,1fr);}}
.ind-grid > *{min-width:0;}
.ind-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 16px;text-align:center;transition:border-color .18s,transform .18s,box-shadow .18s;
}
.ind-card:hover{border-color:var(--blue-200);transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.ind-card img{width:34px;height:34px;margin:0 auto 12px;object-fit:contain;}
.ind-card span{display:block;font-size:13.8px;font-weight:650;color:var(--ink-2);line-height:1.35;}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;counter-reset:step;}
.steps > *{min-width:0;}
@media(max-width:960px){.steps{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.steps{grid-template-columns:1fr;}}
.steps.three,.steps.n3{grid-template-columns:repeat(3,1fr);}
.steps.n2{grid-template-columns:repeat(2,1fr);}
.steps.n4{grid-template-columns:repeat(4,1fr);}
.steps.n5{grid-template-columns:repeat(5,1fr);}
.steps.n6{grid-template-columns:repeat(3,1fr);}
@media(max-width:1000px){.steps.n5,.steps.n6{grid-template-columns:repeat(3,1fr);}
  .steps.n4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:860px){.steps.three,.steps.n3,.steps.n5,.steps.n6{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.steps.three,.steps.n2,.steps.n3,.steps.n4,.steps.n5,.steps.n6{grid-template-columns:1fr;}}
.steps.five{grid-template-columns:repeat(5,1fr);}
@media(max-width:1000px){.steps.five{grid-template-columns:repeat(3,1fr);}}
@media(max-width:620px){.steps.five{grid-template-columns:1fr;}}
.step{position:relative;padding-top:22px;border-top:3px solid var(--line);}
.step::before{
  counter-increment:step;content:"0" counter(step);
  font-family:var(--font-mono);font-weight:700;font-size:13px;color:var(--amber-600);
  letter-spacing:.06em;display:block;margin-bottom:9px;
}
.step.active{border-top-color:var(--amber-500);}
.step h3{margin-bottom:8px;font-size:1.02rem;}
.step p{font-size:14.2px;color:var(--muted);margin-bottom:0;}

.quote-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;
  display:flex;flex-direction:column;
}
.quote-card .qmark{font-family:var(--font-head);font-size:44px;line-height:.8;color:var(--amber-300);margin-bottom:12px;}
.quote-card blockquote{margin:0 0 18px;font-size:14.8px;color:var(--body);}
.quote-who{display:flex;align-items:center;gap:11px;margin-top:auto;}
.quote-who img{width:22px;height:22px;border-radius:3px;object-fit:cover;flex-shrink:0;}
.quote-who div strong{display:block;font-size:14px;color:var(--ink);font-weight:700;}
.quote-who div span{font-size:12.8px;color:var(--muted);}

.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:36px;}}
.split > *{min-width:0;}
.split.reverse .split-media{order:-1;}
@media(max-width:900px){.split.reverse .split-media{order:0;}}
.split-media img{border-radius:var(--r-xl);width:100%;}
.checklist{list-style:none;padding:0;margin:0 0 26px;}
.checklist li{position:relative;padding:8px 0 8px 32px;font-size:15.5px;color:var(--body);}
.checklist li::before{
  content:"";position:absolute;left:0;top:14px;width:18px;height:18px;border-radius:50%;
  background:var(--amber-50);box-shadow:inset 0 0 0 1.5px var(--amber-500);
}
.checklist li::after{
  content:"";position:absolute;left:5.5px;top:19.5px;width:7px;height:4px;
  border-left:2px solid var(--amber-600);border-bottom:2px solid var(--amber-600);transform:rotate(-45deg);
}

.crumbs{font-size:13px;color:var(--muted);margin-bottom:22px;}
.crumbs a{color:var(--muted);}
.crumbs a:hover{color:var(--blue-700);}
.crumbs span{margin:0 7px;opacity:.5;}
@media(max-width:900px){.page-hero .page-hero-grid{grid-template-columns:1fr;gap:34px;}}
.page-hero .sub{font-size:18px;color:var(--muted);max-width:620px;margin-bottom:28px;}
.page-hero .hero-ctas{margin-bottom:0;}

.subnav{position:sticky;top:var(--nav-h);z-index:90;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);max-width:100%;overflow-x:hidden;}
.subnav-inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;}
.subnav-inner::-webkit-scrollbar{display:none;}
.subnav a{padding:15px 13px;font-size:14.2px;font-weight:600;color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent;}
.subnav a:hover{color:var(--blue-700);border-bottom-color:var(--amber-300);}

/* FAQ — two-column editorial. Heading holds the left rail, questions are
   hairline rows rather than cards, so a short list still fills the width. */
.faq-wrap{display:grid;grid-template-columns:.72fr 1.28fr;gap:80px;align-items:start;}
@media(max-width:940px){.faq-wrap{grid-template-columns:1fr;gap:34px;}}
.faq-aside{position:sticky;top:calc(var(--nav-h) + 34px);}
@media(max-width:940px){.faq-aside{position:static;}}
.faq-aside h2{margin-bottom:14px;}
.faq-aside p{font-size:15.4px;color:var(--muted);margin:0;max-width:330px;}
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  cursor:pointer;list-style:none;display:flex;gap:24px;justify-content:space-between;
  align-items:flex-start;padding:24px 0;
  font-family:var(--font-head);font-size:17px;font-weight:650;color:var(--ink);
  transition:color .18s ease;
}
.faq summary:hover{color:var(--blue-700);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary > span{min-width:0;overflow-wrap:anywhere;}
@media(max-width:520px){.faq summary{gap:14px;}}
/* The glyph rotates 45deg to become a close mark; a rotated box's bounding
   rect grows by ~sqrt(2), so it needs room or it overflows the row. */
.faq summary::after{
  content:"+";flex:0 0 auto;font-size:23px;font-weight:400;line-height:1;
  color:var(--amber-600);transition:transform .22s ease;
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;margin-right:6px;
}
.faq details[open] summary{color:var(--ink);}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq .faq-body{padding:0 56px 26px 0;font-size:15.6px;color:var(--muted);max-width:760px;}
.faq .faq-body p:last-child{margin-bottom:0;}

.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);}
table.tbl{width:100%;border-collapse:collapse;min-width:620px;}
table.tbl th,table.tbl td{padding:15px 20px;text-align:left;font-size:14.8px;border-bottom:1px solid var(--line-2);vertical-align:top;}
table.tbl th{background:var(--surface);font-family:var(--font-head);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);}
table.tbl tr:last-child td{border-bottom:0;}
table.tbl td strong{color:var(--ink);}

/* ---------- Footer ---------- */
.site-footer{
  position:relative;background:var(--char-950);color:#8d939c;padding:70px 0 28px;
}
.site-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--amber-500),var(--amber-300) 28%,var(--blue-500) 78%,var(--blue-600));
}
/* The closing ask lives at the top of the footer's dark block, so the page
   ends on ONE dark edge rather than a black band stacked on a black footer. */
.site-footer.has-cta{padding-top:0;overflow:hidden;}
.foot-cta{
  position:relative;text-align:center;padding:86px 0 70px;margin-bottom:60px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
/* Glow lives on the footer, which already clips, so it cannot widen its own
   container on narrow screens. */
.site-footer.has-cta::after{
  content:"";position:absolute;width:900px;height:480px;top:-190px;left:50%;
  transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(248,152,41,.22),transparent 66%);filter:blur(80px);
}
.site-footer.has-cta > .wrap{position:relative;z-index:1;}
.foot-cta > *{position:relative;z-index:2;}
.foot-cta h2{color:#fff;margin-bottom:16px;}
.foot-cta p{max-width:620px;margin:0 auto 30px;font-size:17px;color:var(--d-body);}
.foot-cta .fineprint{margin:24px auto 0;max-width:520px;font-size:13.5px;color:var(--d-muted);}
@media(max-width:560px){.foot-cta{padding:60px 0 50px;margin-bottom:44px;}}

.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr;gap:36px;}
@media(max-width:1000px){.foot-top{grid-template-columns:1fr 1fr 1fr;}}
@media(max-width:640px){.foot-top{grid-template-columns:1fr 1fr;}}
.foot-top > *{min-width:0;}
.brand-foot{margin-bottom:22px;}
.brand-foot img{height:74px;}
.foot-brand p{font-size:14px;color:#7c828b;max-width:290px;}
.foot-col h3{
  font-family:var(--font-head);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber-300);margin:0 0 16px;
}
.foot-col a{
  display:block;font-size:14px;color:#8d939c;margin-bottom:10px;width:fit-content;
  border-bottom:1px solid transparent;transition:color .15s,border-color .15s;
}
.foot-col a:hover{border-bottom-color:rgba(255,200,127,.55);}
.foot-col a:hover{color:#fff;}
.foot-contact .line{display:flex;gap:10px;align-items:flex-start;margin-bottom:13px;font-size:14px;color:#8d939c;min-width:0;overflow-wrap:anywhere;}
.foot-contact .line > span,.foot-contact .line > a{min-width:0;overflow-wrap:anywhere;}
.foot-contact .line img{width:16px;height:16px;margin-top:3px;flex-shrink:0;opacity:.8;}
.foot-contact .line a{color:#8d939c;}
.foot-contact .line a:hover{color:#fff;}
.foot-seo{margin-top:46px;padding-top:26px;border-top:1px solid rgba(255,255,255,.08);}
.foot-seo h3{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#63696f;margin:0 0 12px;font-family:var(--font-head);}
/* Each link carries its own left and right padding, so the container is pulled
   left by that amount. Zeroing the padding on :first-child instead only
   aligned the first row: every row that wrapped still started 11px in, which
   left the whole strip with a ragged left edge. */
.foot-seo .seo-links{display:flex;flex-wrap:wrap;gap:6px 0;margin-left:-11px;}
.foot-seo .seo-links a{font-size:12.5px;color:#73797f;padding:0 11px;border-right:1px solid rgba(255,255,255,.1);line-height:1.6;}
.foot-seo .seo-links a:last-child{border-right:0;}
.foot-seo .seo-links a:hover{color:#fff;}
.foot-bottom{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:#63696f;}
.foot-bottom .socials{display:flex;gap:16px;}
.foot-bottom a{color:#63696f;}
.foot-bottom a:hover{color:#fff;}

/* ---------- Utility ---------- */
.skip-link{position:absolute;left:-9999px;z-index:999;padding:12px 20px;background:var(--blue-600);color:#fff;border-radius:0 0 var(--r) 0;}
.skip-link:focus{left:0;top:0;color:#fff;}


/* ==========================================================================
   INTERNAL PAGE COMPONENTS
   Content-heavy, infographic-led. Used by the service pages.
   ========================================================================== */

/* --- editorial page hero, light --- */
.ipage-hero{
  padding:52px 0 60px;border-bottom:1px solid var(--line-2);
  background:
    radial-gradient(820px 380px at 88% -10%, var(--amber-50), transparent 62%),
    radial-gradient(640px 360px at 2% 10%, var(--blue-50), transparent 60%),
    var(--white);
}
.ipage-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start;}
@media(max-width:960px){.ipage-grid{grid-template-columns:1fr;gap:34px;}}
.ipage-grid > *{min-width:0;}
.ipage-hero h1{font-size:clamp(2rem,3.6vw,3rem);margin-bottom:18px;}
.ipage-hero .sub{font-size:18px;color:var(--muted);margin-bottom:26px;}

/* --- at-a-glance fact panel --- */
.facts{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);overflow:hidden;}
.facts .facts-h,.facts h3{
  padding:15px 22px;margin:0;font-size:11.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);background:var(--surface-2);
  border-bottom:1px solid var(--line);
}
.facts dl{margin:0;padding:6px 22px 16px;}
.facts dt{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-top:16px;
}
.facts dd{margin:3px 0 0;font-size:14.6px;font-weight:600;color:var(--ink);}

/* --- horizontal flow diagram --- */
.flow{display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative;margin-top:8px;}
@media(max-width:1000px){.flow{grid-template-columns:repeat(3,1fr);row-gap:26px;}}
@media(max-width:620px){.flow{grid-template-columns:1fr 1fr;}}
.flow-step{position:relative;padding:0 18px 0 0;}
.flow-step::before{
  content:"";position:absolute;left:0;top:13px;right:14px;height:1px;background:var(--line);
}
.flow-step:last-child::before{display:none;}
@media(max-width:1000px){.flow-step:nth-child(3n)::before{display:none;}}
@media(max-width:620px){.flow-step::before{display:none;}.flow-step{padding-right:12px;}}
.flow-step i{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:var(--white);
  border:1.5px solid var(--amber-300);font-family:var(--font-mono);font-size:10.5px;
  font-weight:700;color:var(--amber-600);font-style:normal;margin-bottom:14px;z-index:2;
}
.flow-step b{display:block;font-family:var(--font-head);font-size:14.6px;color:var(--ink);margin-bottom:5px;}
.flow-step span{display:block;font-size:13.2px;color:var(--muted);line-height:1.5;padding-right:8px;}

/* --- layered architecture diagram --- */
.layers{display:flex;flex-direction:column;gap:12px;}
.layer{
  position:relative;border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  padding:20px 24px;display:grid;grid-template-columns:190px 1fr;gap:24px;align-items:center;
}
@media(max-width:760px){.layer{grid-template-columns:1fr;gap:10px;}}
.layer.accent{border-color:var(--amber-100);background:linear-gradient(180deg,var(--amber-50),var(--white));}
.layer.deep{background:linear-gradient(168deg,var(--char-850),var(--char-950));border-color:var(--d-line);}
.layer.deep .layer-label b{color:#fff;}
.layer.deep .layer-label span{color:var(--d-muted);}
.layer.deep .chiprow em{background:rgba(255,255,255,.06);border-color:var(--d-line);color:var(--d-text);}
.layer-label b{display:block;font-family:var(--font-head);font-size:15px;color:var(--ink);}
.layer-label span{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-top:3px;}
.chiprow{display:flex;flex-wrap:wrap;gap:8px;}
.chiprow em{
  font-style:normal;font-size:12.8px;font-weight:550;color:var(--ink-2);
  border:1px solid var(--line);background:var(--surface-2);border-radius:999px;padding:6px 13px;
}
.layer-arrow{
  display:flex;align-items:center;justify-content:center;color:var(--line);font-size:15px;
  margin:-4px 0;
}

/* --- compact related links --- */
.rel-links{display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px;}
@media(max-width:760px){.rel-links{grid-template-columns:1fr;}}
.rel-links a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 0;
  border-top:1px solid var(--line);font-family:var(--font-head);font-size:15px;font-weight:650;
  color:var(--ink);transition:color .16s,padding-left .18s;
}
.rel-links a b{font-weight:400;color:var(--line);font-size:.95rem;transition:color .16s;}
.rel-links a:hover{color:var(--amber-600);padding-left:6px;}
.rel-links a:hover b{color:var(--amber-500);}

/* --- checklist grid for governance-style content --- */
.check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 34px;}
@media(max-width:960px){.check-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:620px){.check-grid{grid-template-columns:1fr;}}
.check-grid > div{border-top:2px solid var(--amber-300);padding-top:16px;}
.check-grid h3{font-size:1rem;margin-bottom:7px;}
.check-grid p{font-size:14.2px;color:var(--muted);margin:0;}

/* ==========================================================================
   Technology stack links — how the retired technology URLs stay reachable
   from the Build & Run pages without touching the frozen menu.
   ========================================================================== */
.stack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 40px;}
@media(max-width:940px){.stack-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.stack-grid{grid-template-columns:1fr;gap:28px;}}
.stack-group{min-width:0;padding-top:20px;border-top:2px solid var(--line);}
.stack-group h3{font-size:1rem;margin-bottom:6px;letter-spacing:-.015em;}
.stack-group p{font-size:13.6px;color:var(--muted);margin:0 0 14px;}
.stack-links{display:flex;flex-wrap:wrap;gap:7px;}
.stack-links a{
  display:inline-block;padding:6px 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--white);
  font-size:12.8px;font-weight:550;color:var(--body);
  transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.stack-links a:hover{border-color:var(--blue-400);color:var(--blue-700);background:var(--blue-50);}

/* Anchored sub-section — carries a retired URL's keyword inside a bigger page */
.sub-block{max-width:920px;}
.sub-block h2{font-size:clamp(1.5rem,2.3vw,2rem);margin-bottom:16px;}
.sub-block p{font-size:16.6px;}
.sub-block .checklist{margin-top:22px;}
.sub-block .checklist li strong{color:var(--ink);}

/* ==========================================================================
   Additional section types — so service pages share a look without sharing
   an identical shape. Each page picks a different mix of these.
   ========================================================================== */

/* --- 2x2 quadrant matrix ------------------------------------------------- */
.matrix{display:grid;grid-template-columns:34px 1fr;grid-template-rows:1fr 34px;gap:12px;}
.quads{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
@media(max-width:700px){.matrix{grid-template-columns:1fr;grid-template-rows:auto auto;}
  .matrix .axis-y{display:none;}.quads{grid-template-columns:1fr;}}
.quads .q{background:var(--white);padding:28px 26px;min-width:0;}
.quads .q2{background:var(--amber-50);}
.quads .q3{background:var(--surface-2);}
.q-tag{display:inline-block;font-family:var(--font-mono);font-size:10.4px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--amber-600);margin-bottom:10px;}
.quads .q h3{font-size:1.08rem;margin-bottom:8px;letter-spacing:-.015em;}
.quads .q p{font-size:14.2px;color:var(--muted);margin:0;}
.axis-y,.axis-x{display:flex;align-items:center;justify-content:center;color:var(--muted);
  font-family:var(--font-mono);font-size:10.6px;letter-spacing:.12em;text-transform:uppercase;}
.axis-y span{writing-mode:vertical-rl;transform:rotate(180deg);}
.axis-x{grid-column:2;}
@media(max-width:700px){.axis-x{grid-column:1;}}

/* --- before / after contrast --------------------------------------------- */
.compare{display:grid;grid-template-columns:1fr 44px 1fr;gap:0;align-items:stretch;}
@media(max-width:820px){.compare{grid-template-columns:1fr;gap:16px;}}
.cmp-col{border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 30px 26px;min-width:0;}
.cmp-col.before{background:var(--white);}
.cmp-col.after{background:linear-gradient(150deg,var(--amber-50),var(--white) 72%);
  border-color:var(--amber-100);}
.cmp-label{display:inline-block;font-family:var(--font-mono);font-size:10.4px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;color:var(--muted);}
.cmp-col.after .cmp-label{color:var(--amber-600);}
.cmp-col h3{font-size:1.16rem;margin-bottom:16px;letter-spacing:-.02em;}
.cmp-col ul{list-style:none;padding:0;margin:0;}
.cmp-col li{position:relative;padding-left:20px;margin-bottom:11px;font-size:14.6px;color:var(--muted);}
.cmp-col li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:1px;background:var(--line);}
.cmp-col.after li::before{background:var(--amber-500);}
.cmp-arrow{display:flex;align-items:center;justify-content:center;color:var(--amber-500);font-size:22px;}
@media(max-width:820px){.cmp-arrow{transform:rotate(90deg);height:24px;}}

/* --- vertical timeline --------------------------------------------------- */
.vtl{list-style:none;padding:0;margin:0;max-width:900px;}
.vtl li{position:relative;display:grid;grid-template-columns:150px 1fr;gap:30px;
  padding:0 0 34px 0;}
.vtl li::before{content:"";position:absolute;left:150px;top:9px;bottom:-9px;width:1px;
  background:var(--line);}
.vtl li:last-child::before{display:none;}
.vtl li::after{content:"";position:absolute;left:146px;top:7px;width:9px;height:9px;
  border-radius:50%;background:var(--amber-500);box-shadow:0 0 0 4px var(--white);}
@media(max-width:660px){
  .vtl li{grid-template-columns:1fr;gap:6px;padding-left:24px;}
  .vtl li::before{left:4px;}
  .vtl li::after{left:0;}
}
.tl-when{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue-700);text-align:right;padding-top:2px;}
@media(max-width:660px){.tl-when{text-align:left;}}
.tl-body{padding-left:30px;min-width:0;}
@media(max-width:660px){.tl-body{padding-left:0;}}
.tl-body h3{font-size:1.1rem;margin-bottom:6px;letter-spacing:-.015em;}
.tl-body p{font-size:14.8px;color:var(--muted);margin:0;}

/* --- image figure alongside prose ---------------------------------------- */
.figrow{display:grid;grid-template-columns:1fr 1.05fr;gap:52px;align-items:center;}
@media(max-width:860px){.figrow{grid-template-columns:1fr;gap:28px;}}
.figrow > *{min-width:0;}
.fig{margin:0;}
.fig img{width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--line);
  box-shadow:var(--shadow);display:block;}
.fig figcaption{margin-top:14px;font-family:var(--font-mono);font-size:11.2px;letter-spacing:.06em;
  color:var(--muted);text-transform:uppercase;}
.fig-copy p{font-size:16.6px;}

/* --- three large pillars ------------------------------------------------- */
.pcols{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);}
@media(max-width:900px){.pcols{grid-template-columns:1fr;}}
.pcol{padding:30px 32px 34px 0;border-right:1px solid var(--line);min-width:0;}
.pcol + .pcol{padding-left:32px;}
.pcol:last-child{border-right:0;}
@media(max-width:900px){
  .pcol,.pcol + .pcol{padding:26px 0;border-right:0;border-bottom:1px solid var(--line);}
  .pcol:last-child{border-bottom:0;}
}
.pcol-no{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.1em;
  color:var(--amber-600);}
.pcol h3{font-size:1.34rem;margin:26px 0 10px;letter-spacing:-.02em;}
.pcol p{font-size:14.8px;color:var(--muted);margin:0 0 16px;}
.pcol-tag{display:inline-block;margin:0 6px 6px 0;padding:5px 11px;border-radius:999px;
  border:1px solid var(--line);font-family:var(--font-mono);font-size:10.6px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);}

/* ==========================================================================
   Hero treatments. A page's hero sets its character, so pages in the same
   nav section deliberately do not share one.
     .facts        default — at-a-glance panel on the right
     .hero-fig     product-style — the artefact itself sits beside the headline
     .hero-wide    operational — one wide column, facts as a rule-separated strip
     .hero-centered  report cover — centred and narrow, facts as a card row
   ========================================================================== */

/* --- shared fact strip --------------------------------------------------- */
.hero-strip{
  display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-top:54px;
  border-top:1px solid var(--line);
}
@media(max-width:1000px){.hero-strip{grid-template-columns:repeat(3,1fr);}}
@media(max-width:620px){.hero-strip{grid-template-columns:repeat(2,1fr);}}
.hero-strip b{
  display:block;padding:20px 20px 4px 0;border-right:1px solid var(--line);
  font-size:13.8px;font-weight:600;color:var(--ink);min-width:0;
  overflow-wrap:anywhere;
}
.hero-strip b + b{padding-left:20px;}
.hero-strip b:last-child{border-right:0;}
@media(max-width:1000px){.hero-strip b:nth-child(3n){border-right:0;}
  .hero-strip b:nth-child(n+4){border-top:1px solid var(--line-2);}}
@media(max-width:620px){.hero-strip b:nth-child(3n){border-right:1px solid var(--line);}
  .hero-strip b:nth-child(2n){border-right:0;}
  .hero-strip b:nth-child(n+3){border-top:1px solid var(--line-2);}}
.hero-strip i{
  display:block;margin-bottom:7px;font-style:normal;font-family:var(--font-mono);
  font-size:10.2px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--amber-600);
}

/* --- figure hero --------------------------------------------------------- */
.ipage-hero.hero-fig .ipage-grid{align-items:center;}
.hero-art{margin:0;min-width:0;}
.hero-art img{
  width:100%;height:auto;display:block;border-radius:var(--r-lg);
  border:1px solid var(--line);box-shadow:var(--shadow-lg);background:var(--white);
}
@media(max-width:900px){.hero-art{order:2;}}

/* --- wide hero ----------------------------------------------------------- */
.hero-wide .hero-lead{max-width:940px;}
.hero-wide h1{font-size:clamp(2.4rem,5.2vw,4.1rem);}
.hero-wide .sub{max-width:720px;font-size:19px;}

/* --- centered hero ------------------------------------------------------- */
.hero-centered .hero-mid{max-width:820px;margin:0 auto;text-align:center;}
.hero-centered .eyebrow{justify-content:center;}
.hero-centered .sub{margin-left:auto;margin-right:auto;}
.hero-centered .hero-ctas{justify-content:center;}
.hero-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px;}
@media(max-width:860px){.hero-cards{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.hero-cards{grid-template-columns:1fr;}}
.hc{
  border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  padding:18px 20px;min-width:0;
}
.hc i{
  display:block;margin-bottom:6px;font-style:normal;font-family:var(--font-mono);
  font-size:10.2px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);
}
.hc b{display:block;font-size:14.4px;font-weight:600;color:var(--ink);line-height:1.4;}

/* Full-bleed diagram band — sits directly under a wide hero */
.band-fig .wrap{padding-top:0;}

/* Editorial masthead hero — headline and argument side by side */
.hero-mast{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:end;}
@media(max-width:900px){.hero-mast{grid-template-columns:1fr;gap:26px;align-items:start;}}
.hero-mast > *{min-width:0;}
.hero-mast h1{font-size:clamp(2.4rem,5vw,4rem);}
.hero-aside .sub{font-size:18px;margin-bottom:26px;max-width:none;}
.hero-aside .hero-ctas{margin:0;}

/* Full-width diagram figure */
.fig-full{margin:0;}
.fig-full img{width:100%;}

/* --- banner hero: statement, then a full-bleed diagram ------------------- */
.hero-banner .hero-lead{max-width:900px;}
.hero-banner h1{font-size:clamp(2.3rem,4.8vw,3.8rem);}
.hero-band{margin:46px 0 0;}
.hero-band img{width:100%;height:auto;display:block;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--white);box-shadow:var(--shadow);}

/* --- split-list hero: numbered checklist instead of a fact panel --------- */
.hero-split .ipage-grid{align-items:start;}
.hero-list{padding-top:6px;min-width:0;}
.hero-list ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.hero-list li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--line);margin:0;}
.hero-list li > div{min-width:0;}
.hero-list i{font-style:normal;font-family:var(--font-mono);font-size:11px;font-weight:600;
  color:var(--amber-600);}
.hero-list b{display:block;font-size:14.6px;color:var(--ink);}
.hero-list span{display:block;font-size:13.4px;color:var(--muted);margin-top:2px;}

/* --- stat hero: one held position, stated large -------------------------- */
.hero-stat .ipage-grid{align-items:start;}
.stat-card{border:1px solid var(--amber-100);border-radius:var(--r-lg);
  background:linear-gradient(150deg,var(--amber-50),var(--white) 74%);padding:32px 34px;min-width:0;}
.stat-card blockquote{margin:0 0 22px;font-family:var(--font-head);font-weight:700;
  font-size:clamp(1.3rem,2.1vw,1.72rem);line-height:1.24;letter-spacing:-.02em;color:var(--ink);}
.stat-card ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--amber-100);}
.stat-card li{padding:11px 0 0;margin:0;font-size:14px;color:var(--muted);
  border-bottom:1px solid var(--amber-100);padding-bottom:11px;}
.stat-card li:last-child{border-bottom:0;padding-bottom:0;}

/* ==========================================================================
   Company & proof pages. Distinct from the service-page vocabulary — these
   pages answer "who are you" rather than "what do you sell".
   ========================================================================== */

/* --- leadership profiles ------------------------------------------------- */
.people{display:grid;gap:0;border-top:1px solid var(--line);}
.person{display:grid;grid-template-columns:160px 1.1fr 1.4fr;gap:38px;
  padding:38px 0;border-bottom:1px solid var(--line);align-items:start;}
@media(max-width:900px){.person{grid-template-columns:120px 1fr;gap:24px;}
  .person .p-bio{grid-column:2;}}
@media(max-width:560px){.person{grid-template-columns:1fr;gap:16px;}
  .person .p-bio{grid-column:auto;}}
.person > *{min-width:0;}
.mono{
  width:160px;height:160px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--amber-50),var(--white));
  border:1px solid var(--amber-100);
  font-family:var(--font-head);font-size:2.6rem;font-weight:800;color:var(--amber-600);
  letter-spacing:-.03em;
}
@media(max-width:900px){.mono{width:120px;height:120px;font-size:2rem;}}
@media(max-width:560px){.mono{width:104px;height:104px;font-size:1.7rem;}}
/* Smaller variant for the leadership cards on the about page. */
.mono.sm{width:72px;height:72px;font-size:1.25rem;margin-bottom:16px;}
@media(max-width:900px){.mono.sm{width:72px;height:72px;font-size:1.25rem;}}
@media(max-width:560px){.mono.sm{width:64px;height:64px;font-size:1.15rem;}}
.p-role{font-family:var(--font-mono);font-size:10.6px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber-600);margin-bottom:9px;}
.person h3{font-size:1.5rem;margin-bottom:10px;letter-spacing:-.025em;}
.p-line{font-size:14.6px;color:var(--muted);margin:0;}
.p-bio p{font-size:15.4px;color:var(--body);margin:0 0 14px;}
.p-bio p:last-child{margin-bottom:0;}

/* --- offices ------------------------------------------------------------- */
.offices{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:860px){.offices{grid-template-columns:1fr;}}
/* four locations sit as 2x2 rather than 3+1 with an orphan */
.offices.four{grid-template-columns:repeat(2,1fr);}
@media(max-width:760px){.offices.four{grid-template-columns:1fr;}}
.office{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);
  padding:28px 30px;min-width:0;}
.office h3{font-size:1.1rem;margin-bottom:4px;}
.office .o-tag{font-family:var(--font-mono);font-size:10.4px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px;display:block;}
.office p{font-size:14.4px;color:var(--muted);margin:0 0 12px;}
.office a{font-size:14.4px;font-weight:550;}

/* --- insight / article rows ---------------------------------------------- */
@media(max-width:820px){.p-read{text-align:left;}}

/* --- dense link index (services-index) ----------------------------------- */
@media(max-width:1000px){.index-cols{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.index-cols{grid-template-columns:1fr;}}

/* --- big pull quotes (client voices). NOT .quotes — that is the homepage
   three-up pull-quote grid. */
@media(max-width:860px){.qgrid{grid-template-columns:1fr;}}
.quote-lg{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);
  padding:34px 36px;min-width:0;display:flex;flex-direction:column;}
.quote-lg.warm{background:linear-gradient(150deg,var(--amber-50),var(--white) 70%);
  border-color:var(--amber-100);}
.quote-lg blockquote{margin:0 0 22px;font-family:var(--font-head);font-weight:650;
  font-size:1.2rem;line-height:1.42;letter-spacing:-.015em;color:var(--ink);}
.quote-lg .q-mark{font-family:var(--font-head);font-size:2.6rem;line-height:.6;
  color:var(--amber-300);display:block;margin-bottom:14px;}
.q-who{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);}
.quote-lg.warm .q-who{border-top-color:var(--amber-100);}
.q-who b{display:block;font-size:14.4px;color:var(--ink);}
.q-who span{display:block;font-size:12.8px;color:var(--muted);margin-top:2px;}

/* --- sector blocks (industries) ------------------------------------------ */
.sector{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start;
  padding:44px 0;border-bottom:1px solid var(--line);}
@media(max-width:860px){.sector{grid-template-columns:1fr;gap:20px;padding:32px 0;}}
.sector > *{min-width:0;}
.sector:last-child{border-bottom:0;}
.s-no{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.1em;
  color:var(--amber-600);display:block;margin-bottom:10px;}
.sector h3{font-size:1.5rem;letter-spacing:-.025em;margin-bottom:10px;}
.sector > div > p{font-size:15.4px;color:var(--muted);margin:0;}
.s-list{list-style:none;margin:0;padding:0;}
.s-list li{position:relative;padding:0 0 0 22px;margin-bottom:10px;font-size:14.8px;color:var(--body);}
.s-list li::before{content:"";position:absolute;left:0;top:10px;width:9px;height:1px;
  background:var(--amber-500);}

/* ==========================================================================
   ColdFusion cluster. Code is the argument on these pages, so it gets real
   typographic treatment rather than being dropped into a grey box.
   Names are prefixed cb-/cp- deliberately: .code and .pair are the kind of
   generic tokens that collide with something else six months from now.
   ========================================================================== */

.cblock{min-width:0;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--white);overflow:hidden;}
.cblock.is-before{border-color:var(--line);}
.cblock.is-after{border-color:var(--amber-100);}
.cb-label{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:12px 16px;border-bottom:1px solid var(--line-2);background:var(--surface-2);}
.cblock.is-after .cb-label{background:var(--amber-50);border-bottom-color:var(--amber-100);}
.cb-label b{font-family:var(--font-mono);font-size:11.4px;font-weight:600;
  letter-spacing:.06em;color:var(--ink);}
.cb-label span{font-family:var(--font-mono);font-size:9.8px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--amber-600);margin-left:auto;}
.cb-code{margin:0;padding:16px;overflow-x:auto;background:var(--white);}
.cb-code code{font-family:var(--font-mono);font-size:12.4px;line-height:1.68;
  color:var(--ink-2);white-space:pre;display:block;}
@media(max-width:560px){.cb-code code{font-size:11.4px;}.cb-code{padding:13px;}}

.codepair{margin-bottom:40px;}
.codepair:last-child{margin-bottom:0;}
.cp-head{display:flex;align-items:baseline;gap:14px;margin-bottom:16px;}
.cp-head i{font-style:normal;font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:.1em;color:var(--amber-600);flex:none;}
.cp-head h3{margin:0;font-size:1.06rem;letter-spacing:-.015em;min-width:0;}
.cp-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;}
@media(max-width:880px){.cp-cols{grid-template-columns:1fr;gap:14px;}}
.cp-note{margin:14px 0 0;font-size:14.4px;color:var(--muted);max-width:78ch;}

/* --- code hero: their code, and what it becomes -------------------------- */
.hero-code .ipage-grid{align-items:center;}
.hero-codecard{min-width:0;display:grid;gap:0;}
.hero-codecard .cb-code{max-height:none;}
.cb-arrow{justify-self:center;font-size:19px;line-height:1;color:var(--amber-500);
  padding:10px 0;}
@media(max-width:900px){.hero-codecard{order:2;}}

/* --- profile hero: the roster, not the spec sheet ------------------------ */
.hero-profile .ipage-grid{align-items:start;}
.rolecard{min-width:0;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface-2);padding:28px 30px;}
.rolecard ul{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line);}
.rolecard li{display:block;padding:14px 0;border-bottom:1px solid var(--line);margin:0;
  min-width:0;}
.rolecard li:last-child{border-bottom:0;}
.rolecard b{display:block;font-size:14.6px;color:var(--ink);}
.rolecard span{display:block;font-size:13.4px;color:var(--muted);margin-top:3px;
  overflow-wrap:anywhere;}
.rolecard small{display:block;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line);font-size:12.8px;color:var(--muted);line-height:1.6;}

/* ==========================================================================
   Case studies. A case answers "what happened", not "what do you sell", so
   it deliberately does not reuse the service-page hero or the at-a-glance
   panel. Prefix cs- throughout: .case-* is already taken by the index tiles.
   ========================================================================== */

.cs-hero{padding:38px 0 0;background:linear-gradient(178deg,var(--amber-50),var(--white) 62%);
  border-bottom:1px solid var(--line);}
.cs-lead{max-width:60ch;margin:22px 0 34px;}
.cs-lead .chip{margin-bottom:18px;}
.cs-lead h1{font-size:clamp(2rem,4vw,3.05rem);line-height:1.06;letter-spacing:-.035em;
  margin:0 0 18px;}
.cs-lead .sub{font-size:clamp(1rem,1.35vw,1.16rem);color:var(--body);margin:0;line-height:1.62;}

.cs-shot{margin:0;}
.cs-shot img{width:100%;height:auto;display:block;border-radius:var(--r-lg);
  border:1px solid var(--line);box-shadow:var(--shadow-lg);background:var(--white);}
.cs-hero .hero-strip{margin-top:44px;border-top:1px solid var(--line);}

.cs-h2{font-size:clamp(1.32rem,2vw,1.7rem);letter-spacing:-.025em;margin:0 0 16px;}

/* --- module grid: denser than cap-cards, it is a contents list ----------- */
.cs-mods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border-top:1px solid var(--line);}
@media(max-width:940px){.cs-mods{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:600px){.cs-mods{grid-template-columns:1fr;}}
.cs-mod{padding:26px 28px 26px 0;border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);min-width:0;}
.cs-mod + .cs-mod{padding-left:28px;}
@media(max-width:940px){.cs-mod:nth-child(3n){border-right:1px solid var(--line);}
  .cs-mod:nth-child(2n){border-right:0;}
  .cs-mod:nth-child(2n+1){padding-left:0;}
  .cs-mod:nth-child(2n){padding-left:28px;}}
@media(max-width:600px){.cs-mod,.cs-mod + .cs-mod{border-right:0;padding-left:0;padding-right:0;}}
.cs-mod span{display:block;font-family:var(--font-mono);font-size:10.6px;font-weight:600;
  letter-spacing:.11em;color:var(--amber-600);margin-bottom:11px;}
.cs-mod h3{margin:0 0 8px;font-size:1.02rem;letter-spacing:-.015em;}
.cs-mod p{margin:0;font-size:14.4px;color:var(--muted);line-height:1.62;}


/* ==========================================================================
   People. The roster exists to put joining dates next to faces: the
   continuity claim the rest of the site rests on cannot be made credibly
   without them. The gallery is deliberately on careers and nowhere else.
   ========================================================================== */

.roster{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px 22px;}
@media(max-width:1080px){.roster{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(max-width:720px){.roster{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 14px;}}
@media(max-width:440px){.roster{grid-template-columns:repeat(2,minmax(0,1fr));}}
.rmember{margin:0;min-width:0;}
.rphoto{aspect-ratio:1;border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
  border:1px solid var(--line);}
.rphoto img{width:100%;height:100%;object-fit:cover;display:block;}
.rmember figcaption{padding-top:12px;min-width:0;}
.rmember b{display:block;font-size:14.4px;color:var(--ink);letter-spacing:-.01em;
  overflow-wrap:anywhere;}
.rmember span{display:block;font-size:12.8px;color:var(--muted);margin-top:2px;line-height:1.45;
  overflow-wrap:anywhere;}
.rmember em{display:block;font-style:normal;font-family:var(--font-mono);font-size:10.4px;
  font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--amber-600);
  margin-top:7px;}

/* Two auto-advancing photo rows, mirroring the Owl carousel on the live
   /our-team/ page: full-bleed, six across on a wide screen, stepping one
   photo every five seconds. Full-bleed rather than contained because a row
   that runs off both edges reads as continuing past the viewport, which is
   the point — twenty-two photographs should feel like a sample of many more,
   not a countable set of tiles. The photos are a uniform 533x400, so unlike
   the old masonry wall a fixed ratio crops nothing. */
/* Negative margins on both sides rather than width:100vw — 100vw includes the
   scrollbar, which would push a stray horizontal scroll onto the page. */
.photo-rows{display:flex;flex-direction:column;gap:20px;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}
@media(max-width:820px){.photo-rows{gap:16px;}}

/* --per-view drives the cell width; JS never sets it, so the breakpoints
   below stay the single source of truth for how many photos are visible.
   Values match the live carousel's responsive map (1 / 3 / 4 / 6). */
.photo-row{--per-view:6;--gutter-x:10px;overflow:hidden;}
@media(max-width:1198px){.photo-row{--per-view:4;}}
@media(max-width:979px){.photo-row{--per-view:3;}}
@media(max-width:767px){.photo-row{--per-view:1;}}

.photo-track{display:flex;will-change:transform;}
.photo-cell{flex:0 0 calc(100% / var(--per-view));min-width:0;
  padding:0 var(--gutter-x);margin:0;}
.photo-cell .photo-frame{display:block;border-radius:var(--r);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);}
.photo-cell img{display:block;width:100%;height:auto;aspect-ratio:533/400;
  object-fit:cover;transition:transform .4s ease;}
.photo-cell:hover img{transform:scale(1.04);}

/* No transition on the wrap-around step, or the track would visibly rewind
   the whole way back instead of continuing forward. */
.photo-track.is-sliding{transition:transform 600ms ease;}
@media(prefers-reduced-motion:reduce){
  .photo-track.is-sliding{transition:none;}
  .photo-cell img{transition:none;}
}

/* --- milestones as achievements (about) ---------------------------------- */
.achv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border-top:1px solid var(--line);}
@media(max-width:940px){.achv-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){.achv-grid{grid-template-columns:1fr;}}
.achv{padding:30px 32px 30px 0;border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);min-width:0;}
.achv + .achv{padding-left:32px;}
@media(max-width:940px){.achv:nth-child(3n){border-right:1px solid var(--line);}
  .achv:nth-child(2n){border-right:0;}
  .achv:nth-child(2n+1){padding-left:0;}
  .achv:nth-child(2n){padding-left:32px;}}
@media(max-width:620px){.achv,.achv + .achv{border-right:0;padding-left:0;padding-right:0;}}
.achv-yr{display:block;font-family:var(--font-mono);font-size:12.4px;font-weight:600;
  letter-spacing:.12em;color:var(--amber-600);margin-bottom:12px;}
.achv h3{margin:0 0 9px;font-size:1.08rem;letter-spacing:-.02em;line-height:1.28;}
.achv p{margin:0;font-size:14.6px;color:var(--muted);line-height:1.62;}

/* --- leadership portraits ------------------------------------------------ */
/* The monogram stays as the base layer. If a remote portrait fails to load,
   site.js hides the <img> and the initials show through, so the card never
   renders as an empty circle. */
.mono.has-photo{position:relative;overflow:hidden;}
.mono.has-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:50%;}
@media(max-width:900px){.mono{width:120px;height:120px;font-size:2rem;}}
@media(max-width:560px){.mono{width:104px;height:104px;font-size:1.7rem;}}
/* Smaller variant for the leadership cards on the about page. */
.mono.sm{width:72px;height:72px;font-size:1.25rem;margin-bottom:16px;}
@media(max-width:900px){.mono.sm{width:72px;height:72px;font-size:1.25rem;}}
@media(max-width:560px){.mono.sm{width:64px;height:64px;font-size:1.15rem;}}

/* Headings are margin-zero globally so components can control their own
   rhythm. Hand-written sections that put a paragraph straight after an h2 were
   left with the two touching. */
.split > div > h2 + p,
.split > div > h2 + .checklist{margin-top:18px;}

/* ==========================================================================
   Homepage hero rotator.
   The slides are stacked in a single grid cell so the container is as tall as
   the tallest message. Absolute positioning would collapse the height and make
   the CTA and the proof strip jump on every change.
   ========================================================================== */
.hero-rotator{display:block;}
.hslides{display:grid;}
.hslide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .55s ease,transform .55s ease,visibility 0s linear .55s;}
.hslide.is-on{opacity:1;visibility:visible;transform:none;
  transition:opacity .55s ease,transform .55s ease,visibility 0s;}
/* Slides 2 to 4 are divs, not headings: one h1 per page. They have to look
   identical to the h1, so the hero heading rules apply to both. */
.hero .hline{color:#fff;margin-bottom:18px;font-family:var(--font-head);font-weight:800;
  letter-spacing:-.03em;line-height:1.16;font-size:clamp(2.1rem,3.9vw,3.3rem);}
.hero .hline .hl{background:linear-gradient(96deg,var(--amber-500) 0%,var(--amber-400) 45%,
  var(--amber-300) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hslide h1{margin-bottom:18px;}
.hslide .sub{margin-bottom:0;}

.hdots{display:flex;gap:9px;margin:24px 0 26px;}
.hdot{width:26px;height:4px;border-radius:2px;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.18);transition:background .25s ease,width .25s ease;}
.hdot:hover{background:rgba(255,255,255,.34);}
.hdot.is-on{background:var(--amber-500);width:42px;}
.hdot:focus-visible{outline:2px solid var(--amber-300);outline-offset:3px;}

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

/* ==========================================================================
   Buyer pressures — the bridge from the hero into services.
   ========================================================================== */
.press{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border-top:1px solid var(--line);margin-top:52px;}
@media(max-width:900px){.press{grid-template-columns:1fr;}}
.press-item{padding:34px 36px 34px 0;border-right:1px solid var(--line);min-width:0;}
.press-item + .press-item{padding-left:36px;}
@media(max-width:900px){.press-item,.press-item + .press-item{border-right:0;padding:26px 0;
  border-bottom:1px solid var(--line);}
  .press-item:last-child{border-bottom:0;}}
.press-item:last-child{border-right:0;}
.press-no{display:block;font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:.12em;color:var(--amber-600);margin-bottom:14px;}
.press-item h3{font-size:1.16rem;line-height:1.3;letter-spacing:-.022em;margin:0 0 12px;}
.press-item p{font-size:14.9px;color:var(--muted);line-height:1.66;margin:0 0 16px;}
.press-note{max-width:74ch;margin:36px auto 0;text-align:center;font-size:15.4px;
  color:var(--muted);}

/* The hero visuals cross-fade with the message. Stacked in one grid cell for
   the same reason the text slides are: absolute positioning would collapse the
   column height and the section would jump on every change. */
.hvisuals{display:grid;}
.hvisual{grid-area:1/1;opacity:0;visibility:hidden;
  transition:opacity .55s ease,visibility 0s linear .55s;}
.hvisual.is-on{opacity:1;visibility:visible;transition:opacity .55s ease,visibility 0s;}
.hero-fig-art{margin:0;display:flex;align-items:center;min-height:430px;}
.hero-fig-art img{width:100%;height:auto;display:block;border-radius:var(--r-lg);}
@media(max-width:980px){.hero-fig-art{min-height:0;}}
@media(prefers-reduced-motion:reduce){.hvisual{transition:none;}}