/* ==========================================================================
   SMEMinds Design System  —  sm.css
   Navy #1A2E4A · Orange #F47F20 · White
   Built for WCAG 2.2 AA: orange is a text colour ON NAVY only; on light
   backgrounds every orange word uses --o-ink (#C25200, 4.63:1 on white).
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
  /* brand */
  --navy-900:#0B1626;
  --navy-800:#101F35;
  --navy-700:#152742;
  --navy:#1A2E4A;          /* master brand navy */
  --navy-600:#223D61;
  --navy-500:#2F5480;
  --navy-line:#27405F;

  --o:#F47F20;             /* master brand orange */
  --o-600:#E06E12;
  --o-ink:#B04B00;         /* AA on white (5.4:1) and on the orange-tinted badge ground */
  --o-300:#FFA75E;
  --o-100:#FFE9D5;
  --o-050:#FFF5EC;

  /* neutrals */
  --white:#FFFFFF;
  --paper:#FAFBFC;
  --paper-2:#F3F5F8;
  --line:#E3E8EF;
  --line-2:#D3DAE4;
  --ink:#0F1A2A;
  --ink-2:#33445C;
  --muted:#5A6B80;
  --on-navy:#FFFFFF;
  --on-navy-muted:#A9BDD4;
  --on-navy-line:rgba(255,255,255,.13);

  /* semantic */
  --ok:#0E7A54; --ok-bg:#E7F6EF;
  --warn:#8A5A00; --warn-bg:#FFF4DC;
  --bad:#B3261E; --bad-bg:#FDECEA;
  --info:#1B5FA8; --info-bg:#E9F2FC;

  /* surfaces (light theme default) */
  --bg:var(--white);
  --surface:var(--white);
  --surface-2:var(--paper);
  --surface-3:var(--paper-2);
  --border:var(--line);
  --text:var(--ink);
  --text-2:var(--ink-2);
  --text-3:var(--muted);
  --accent-text:var(--o-ink);

  /* type */
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-display:'Plus Jakarta Sans','Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --t-xs:.75rem;   --t-sm:.8125rem; --t-base:1rem;  --t-md:1.0625rem;
  --t-lg:1.1875rem; --t-xl:1.375rem; --t-2xl:1.75rem; --t-3xl:2.25rem;
  --t-4xl:2.875rem; --t-5xl:3.5rem;  --t-6xl:4.25rem;

  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:32px; --s8:40px; --s9:48px; --s10:64px; --s11:80px; --s12:104px; --s13:136px;

  /* radius */
  --r-sm:6px; --r:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* elevation */
  --sh-1:0 1px 2px rgba(15,26,42,.05), 0 1px 3px rgba(15,26,42,.04);
  --sh-2:0 2px 4px rgba(15,26,42,.04), 0 6px 16px rgba(15,26,42,.07);
  --sh-3:0 8px 24px rgba(15,26,42,.09), 0 2px 6px rgba(15,26,42,.05);
  --sh-4:0 20px 56px rgba(11,22,38,.16), 0 4px 12px rgba(11,22,38,.07);
  --sh-navy:0 24px 64px rgba(11,22,38,.42);
  --ring:0 0 0 3px rgba(244,127,32,.34);

  /* motion */
  --e-out:cubic-bezier(.22,.85,.3,1);
  --e-in-out:cubic-bezier(.65,.05,.36,1);
  --d-1:.14s; --d-2:.24s; --d-3:.42s; --d-4:.7s;

  /* layout */
  --wrap:1240px;
  --wrap-wide:1440px;
  --wrap-text:760px;
  --hdr-h:76px;
  --gutter:clamp(16px,4vw,40px);

  /* z */
  --z-base:1; --z-sticky:40; --z-header:60; --z-mega:70; --z-drawer:80;
  --z-modal:90; --z-toast:100;

  color-scheme:light;
}

/* dark: the system default gets it only via prefers-color-scheme, an explicit
   choice gets it via [data-theme]. Never define a colour ONLY inside a media
   query — every token above already has a light value. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:var(--navy-900);
    --surface:var(--navy-800);
    --surface-2:var(--navy-700);
    --surface-3:var(--navy);
    --border:var(--navy-line);
    --text:#F2F6FB;
    --text-2:#CEDAE8;
    --text-3:var(--on-navy-muted);
    --accent-text:var(--o-300);
    --line:var(--navy-line);
    --paper:var(--navy-800);
    --paper-2:var(--navy-700);
    --sh-1:0 1px 2px rgba(0,0,0,.4);
    --sh-2:0 2px 4px rgba(0,0,0,.3),0 6px 16px rgba(0,0,0,.35);
    --sh-3:0 8px 24px rgba(0,0,0,.42);
    /* semantic colours need a dark counterpart too: #B3261E is 2.8:1 on navy,
       so a required-field asterisk or an inline error goes unreadable. */
    --ok:#5EE9A0; --ok-bg:rgba(14,122,84,.22);
    --warn:#FBBF24; --warn-bg:rgba(138,90,0,.24);
    --bad:#FCA5A5; --bad-bg:rgba(179,38,30,.22);
    --info:#8ECDFA; --info-bg:rgba(27,95,168,.24);
    --sh-4:0 20px 56px rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:var(--navy-900);
  --surface:var(--navy-800);
  --surface-2:var(--navy-700);
  --surface-3:var(--navy);
  --border:var(--navy-line);
  --text:#F2F6FB;
  --text-2:#CEDAE8;
  --text-3:var(--on-navy-muted);
  --accent-text:var(--o-300);
  --line:var(--navy-line);
  --paper:var(--navy-800);
  --paper-2:var(--navy-700);
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 2px 4px rgba(0,0,0,.3),0 6px 16px rgba(0,0,0,.35);
  --sh-3:0 8px 24px rgba(0,0,0,.42);
  /* semantic colours need a dark counterpart too: #B3261E is 2.8:1 on navy,
     so a required-field asterisk or an inline error goes unreadable. */
  --ok:#5EE9A0; --ok-bg:rgba(14,122,84,.22);
  --warn:#FBBF24; --warn-bg:rgba(138,90,0,.24);
  --bad:#FCA5A5; --bad-bg:rgba(179,38,30,.22);
  --info:#8ECDFA; --info-bg:rgba(27,95,168,.24);
  --sh-4:0 20px 56px rgba(0,0,0,.55);
  color-scheme:dark;
}

/* ----------------------------------------------------------------- 2. RESET */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 24px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:var(--t-md);line-height:1.65;
  font-feature-settings:'cv05' 1,'ss01' 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video,canvas{max-width:100%;height:auto;display:block}
/* Headings INHERIT. Forcing them to --text here (and then forcing them white
   again per dark section) is what makes a white card inside a navy band render
   white-on-white. Surfaces set colour; headings follow. */
h1,h2,h3,h4,h5,h6{margin:0 0 .5em;font-family:var(--font-display);font-weight:700;
  line-height:1.14;letter-spacing:-.022em;color:inherit;text-wrap:balance}
h1{font-size:clamp(2.05rem,1.5rem + 1.5vw,2.95rem);letter-spacing:-.03em;font-weight:800}
h2{font-size:clamp(1.75rem,1.15rem + 2.3vw,var(--t-4xl));letter-spacing:-.028em}
h3{font-size:clamp(1.3rem,1.05rem + .9vw,var(--t-2xl))}
h4{font-size:var(--t-xl)}
h5{font-size:var(--t-lg)}
h6{font-size:var(--t-base)}
p{margin:0 0 1.1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
a{color:var(--accent-text);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
ul,ol{margin:0 0 1.1em;padding-left:1.25em}
li{margin:.3em 0}
hr{border:0;border-top:1px solid var(--border);margin:var(--s9) 0}
small{font-size:var(--t-sm)}
strong,b{font-weight:650}
blockquote{margin:0;padding-left:var(--s5);border-left:3px solid var(--o)}
table{border-collapse:collapse;width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
::selection{background:var(--o-100);color:var(--ink)}
[data-theme="dark"] ::selection{background:rgba(244,127,32,.35);color:#fff}

/* focus — visible everywhere, never removed */
:focus-visible{outline:3px solid var(--o);outline-offset:2px;border-radius:3px}
.on-navy :focus-visible,.sm-hero :focus-visible{outline-color:var(--o-300)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--o);color:#1A1000;
  padding:12px 20px;font-weight:700;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- 3. LAYOUT */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-wide{max-width:var(--wrap-wide)}
.wrap-text{max-width:var(--wrap-text)}
.sec{padding-block:clamp(56px,7vw,var(--s12))}
.sec-sm{padding-block:clamp(40px,5vw,var(--s10))}
.sec-lg{padding-block:clamp(72px,9vw,var(--s13))}
.sec-navy{background:var(--navy);color:var(--on-navy)}
.sec-deep{background:var(--navy-900);color:var(--on-navy)}
.sec-soft{background:var(--surface-2)}
.sec-line{border-top:1px solid var(--border)}

.grid{display:grid;gap:var(--s6)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
/* main column + sidebar. A class, not an inline style: set inline it outranks
   every breakpoint below and the sidebar stays a 150px column on a phone. */
.g-side{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(32px,5vw,64px);align-items:start}
@media (max-width:900px){.g-side{grid-template-columns:1fr}}
.flex{display:flex;gap:var(--s4)}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.stack>*+*{margin-top:var(--s4)}
.center{text-align:center}
.mx-auto{margin-inline:auto}

/* section heading block */
.sec-head{max-width:720px;margin-bottom:var(--s9)}
.sec-head.center{margin-inline:auto}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-xs);
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);
  margin-bottom:var(--s4)}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--o);border-radius:2px;flex:none}
.sec-navy .eyebrow,.sec-deep .eyebrow,.on-navy .eyebrow{color:var(--o-300)}
.lede{font-size:var(--t-lg);line-height:1.6;color:var(--text-3);max-width:62ch}
.sec-navy .lede,.sec-deep .lede{color:var(--on-navy-muted)}

/* ---------------------------------------------------------------- 4. BUTTONS */
.btn{
  --btn-bg:var(--o);--btn-fg:#1B1206;--btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 var(--s6);border-radius:var(--r-pill);
  background:var(--btn-bg);color:var(--btn-fg);border:1.5px solid var(--btn-bd);
  font-weight:650;font-size:var(--t-base);letter-spacing:-.006em;text-decoration:none;
  transition:transform var(--d-1) var(--e-out),box-shadow var(--d-2) var(--e-out),
             background var(--d-2) var(--e-out),color var(--d-2) var(--e-out);
  white-space:nowrap;position:relative;isolation:isolate;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(244,127,32,.3);text-decoration:none}
.btn:active{transform:translateY(0)}
.btn svg{width:18px;height:18px;flex:none}
.btn-lg{min-height:56px;padding:0 var(--s7);font-size:var(--t-md)}
.btn-sm{min-height:40px;padding:0 var(--s5);font-size:var(--t-sm)}
.btn-ghost{--btn-bg:transparent;--btn-fg:var(--text);--btn-bd:var(--line-2)}
.btn-ghost:hover{--btn-bg:var(--surface-2);box-shadow:var(--sh-2)}
.btn-navy{--btn-bg:var(--navy);--btn-fg:#fff}
.btn-navy:hover{--btn-bg:var(--navy-700);box-shadow:0 10px 24px rgba(26,46,74,.3)}
.btn-outline-light{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.3)}
.btn-outline-light:hover{--btn-bg:rgba(255,255,255,.09);--btn-bd:rgba(255,255,255,.5);
  box-shadow:0 8px 22px rgba(0,0,0,.3)}
.btn-quiet{--btn-bg:transparent;--btn-fg:var(--accent-text);--btn-bd:transparent;padding-inline:var(--s3)}
.btn-quiet:hover{--btn-bg:var(--o-050);box-shadow:none;transform:none}
[data-theme="dark"] .btn-quiet:hover{--btn-bg:rgba(244,127,32,.12)}
.btn-block{width:100%}

/* text link with moving arrow */
.tlink{display:inline-flex;align-items:center;gap:7px;font-weight:650;color:var(--accent-text);
  text-decoration:none;font-size:var(--t-base)}
/* In a card footer the link shares a row with a meta line, so a wrapped label
   leaves the arrow floating beside two lines of text. Hold it on one line
   there only — a blanket rule pushes the mega menu's longest link out of its
   column. */
.case-foot .tlink,.post-foot .tlink{white-space:nowrap}
.tlink::after{content:"→";transition:transform var(--d-2) var(--e-out);display:inline-block}
.tlink:hover::after{transform:translateX(5px)}
.on-navy .tlink,.sec-navy .tlink,.sec-deep .tlink{color:var(--o-300)}

/* Magnetic CTA sheen.
   Three things this needs and originally lacked:
   · pointer-events:none — the swept pseudo-element sits 120% to the LEFT of the
     button for most of its life. On the header that is exactly on top of the
     theme and search buttons, and it silently ate every click on them.
   · the button must clip it, or it paints over its neighbours.
   · z-index above the background, not -1: .btn sets isolation:isolate, so a
     negative z-index child renders behind the button's own fill and the effect
     is never visible at all. */
.btn{overflow:hidden}
.btn-magnetic::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.4) 45%,transparent 70%);
  transform:translateX(-120%);opacity:0;
}
.btn-magnetic:hover::after{animation:sheen .85s var(--e-out) forwards}
@keyframes sheen{
  0%{transform:translateX(-120%);opacity:1}
  100%{transform:translateX(120%);opacity:1}
}

/* ----------------------------------------------------------------- 5. CARDS */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s7);box-shadow:var(--sh-1);color:var(--text);
  transition:transform var(--d-2) var(--e-out),box-shadow var(--d-2) var(--e-out),
             border-color var(--d-2) var(--e-out);
  position:relative;height:100%;display:flex;flex-direction:column;
}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--line-2)}
.card-link{text-decoration:none;color:inherit}
.card-link:hover{text-decoration:none}
.card h3{margin-bottom:var(--s3)}
.card p{color:var(--text-3);font-size:var(--t-base)}
.card-navy{background:var(--navy-700);border-color:var(--navy-line);color:var(--on-navy)}
.card-navy h3,.card-navy h4{color:#fff}
.card-navy p{color:var(--on-navy-muted)}
.card-glass{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--on-navy)}
.card-glass h3,.card-glass h4{color:#fff}
.card-glass p{color:var(--on-navy-muted)}
.card-flush{padding:0;overflow:hidden}
.card-pad{padding:var(--s6)}

/* the orange top-rule that marks a premium card */
.card-rule::before{content:"";position:absolute;top:-1px;left:var(--s7);right:var(--s7);
  height:3px;background:var(--o);border-radius:0 0 3px 3px;opacity:0;pointer-events:none;
  transition:opacity var(--d-2) var(--e-out)}
.card-rule:hover::before{opacity:1}

.card-ico{width:48px;height:48px;border-radius:var(--r-md);display:grid;place-items:center;
  background:var(--o-050);color:var(--o-ink);margin-bottom:var(--s5);flex:none}
.card-ico svg{width:24px;height:24px}
[data-theme="dark"] .card-ico{background:rgba(244,127,32,.14);color:var(--o-300)}
.card-navy .card-ico,.card-glass .card-ico{background:rgba(244,127,32,.16);color:var(--o-300)}

.card-n{font-family:var(--mono);font-size:var(--t-sm);font-weight:700;color:var(--accent-text);
  letter-spacing:.08em;margin-bottom:var(--s3)}

/* --------------------------------------------------------------- 6. BADGES */
.badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;
  border-radius:var(--r-pill);font-size:var(--t-xs);font-weight:700;letter-spacing:.03em;
  background:var(--surface-3);color:var(--text-2);border:1px solid var(--border)}
.badge-o{background:var(--o-050);color:var(--o-ink);border-color:var(--o-100)}
[data-theme="dark"] .badge-o{background:rgba(244,127,32,.14);color:var(--o-300);border-color:rgba(244,127,32,.3)}
.badge-navy{background:var(--navy);color:#fff;border-color:transparent}
.badge-ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.badge-warn{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.badge-bad{background:var(--bad-bg);color:var(--bad);border-color:transparent}
.badge-info{background:var(--info-bg);color:var(--info);border-color:transparent}
.badge-live{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.2)}
.badge-live .dot{width:6px;height:6px;border-radius:50%;background:#4ADE80;
  box-shadow:0 0 0 3px rgba(74,222,128,.2)}

/* ---------------------------------------------------------------- 7. HEADER */
.hdr{
  position:sticky;top:0;z-index:var(--z-header);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;transition:border-color var(--d-2),box-shadow var(--d-2),
  background var(--d-2);
}
.hdr.is-stuck{border-bottom-color:var(--border);box-shadow:0 1px 0 rgba(15,26,42,.04),0 8px 28px rgba(15,26,42,.06)}
.hdr-in{display:flex;align-items:center;gap:var(--s5);height:var(--hdr-h)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none;
  color:var(--text);min-height:44px}
.brand:hover{text-decoration:none}
/* The master lockup, used as supplied. Two variants, one shown at a time:
   navy glyphs on light surfaces, white glyphs on dark ones. */
.brand-mark{height:34px;width:auto;flex:none}
.brand-lock{display:block;flex:none;line-height:0}
.brand-lock img{height:var(--lh,34px);width:auto;display:block}
.brand-lock .l-on-dark{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand-lock .l-on-light{display:none}
  :root:not([data-theme="light"]) .brand-lock .l-on-dark{display:block}
}
[data-theme="dark"] .brand-lock .l-on-light{display:none}
[data-theme="dark"] .brand-lock .l-on-dark{display:block}
/* on a permanently dark band the light variant always wins */
.on-navy .brand-lock .l-on-light,.ftr .brand-lock .l-on-light{display:none}
.on-navy .brand-lock .l-on-dark,.ftr .brand-lock .l-on-dark{display:block}
.brand-txt{font-family:var(--font-display);font-weight:800;font-size:1.22rem;
  letter-spacing:-.03em;line-height:1}
.brand-txt em{font-style:normal;color:var(--accent-text)}

.nav{display:flex;align-items:center;gap:2px;margin-left:var(--s4)}
.nav-item{position:relative}
.nav-a{
  display:inline-flex;align-items:center;gap:5px;height:40px;padding:0 13px;
  border-radius:var(--r);color:var(--text-2);font-size:.95rem;font-weight:550;
  text-decoration:none;white-space:nowrap;transition:color var(--d-1),background var(--d-1);
}
.nav-a:hover,.nav-a[aria-expanded="true"]{color:var(--text);background:var(--surface-2);text-decoration:none}
.nav-a[aria-current="page"]{color:var(--accent-text);font-weight:650}
.nav-a .chev{width:11px;height:11px;transition:transform var(--d-2) var(--e-out);opacity:.6}
.nav-a[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav-a .ext{width:12px;height:12px;opacity:.55}

.hdr-cta{margin-left:auto;display:flex;align-items:center;gap:var(--s3)}
.icon-btn{width:44px;height:44px;border-radius:var(--r);border:1px solid var(--border);
  background:var(--surface);display:grid;place-items:center;color:var(--text-2);flex:none}
.icon-btn:hover{background:var(--surface-2);color:var(--text)}
.icon-btn svg{width:18px;height:18px}
.burger{display:none}

/* Mega menu.
   The panel is centred on the HEADER, not on its trigger: anchored to the
   trigger, a 980px panel hanging off a nav item at x=300 runs off the left
   edge of the viewport. .hdr is position:sticky, so it is already a containing
   block — making the trigger position:static hands the panel to it. */
.nav-item[data-mega]{position:static}
.mega{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,-8px);
  width:min(var(--mega-w,880px),calc(100vw - 32px));
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--sh-4);padding:var(--s7);z-index:var(--z-mega);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--d-2) var(--e-out),transform var(--d-2) var(--e-out),visibility var(--d-2);
}
.nav-item.is-open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.mega::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.mega-grid{display:grid;gap:var(--s5)}
.mega-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mega-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mega-4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Five channel columns. Amazon carries 17 services and the others two to six,
   so the columns are sized by content rather than split evenly — an equal
   split gives "Flipkart & Myntra" the same width as Amazon and wastes half. */
.mega-5{grid-template-columns:1.15fr .95fr 1fr 1fr 1fr}
.mega-title{font-size:var(--t-xs);font-weight:750;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);margin:0 0 var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--border)}

/* ---- compact directory column (services mega, five channels) ---- */
.mega-col{min-width:0}
.mega-col .mega-title{margin-bottom:6px}
.mega-tag{margin:0 0 10px;font-size:11.5px;line-height:1.45;color:var(--text-3)}
.mega-row{display:flex;align-items:center;gap:9px;padding:7px 9px;margin:0 -9px;
  border-radius:var(--r);text-decoration:none;color:var(--text);font-size:.88rem;
  font-weight:600;line-height:1.3;transition:background var(--d-1),color var(--d-1)}
.mega-row:hover{background:var(--surface-2);color:var(--o-ink);text-decoration:none}
.mega-row .mi{flex:none;display:grid;place-items:center;color:var(--o-ink);opacity:.8}
[data-theme="dark"] .mega-row .mi{color:var(--o-300)}
.mega-all{margin-top:10px;font-size:var(--t-sm)}
.mega-link{display:flex;gap:12px;padding:10px;margin:-2px -10px;border-radius:var(--r);
  text-decoration:none;color:inherit;transition:background var(--d-1)}
.mega-link:hover{background:var(--surface-2);text-decoration:none}
.mega-link .mi{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:var(--o-050);color:var(--o-ink);font-size:17px}
[data-theme="dark"] .mega-link .mi{background:rgba(244,127,32,.14);color:var(--o-300)}
.mega-link strong{display:block;font-size:.94rem;font-weight:650;line-height:1.3;color:var(--text)}
.mega-link span span{display:block;font-size:var(--t-sm);color:var(--text-3);line-height:1.45;
  margin-top:2px}
.mega-foot{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.mega-foot p{margin:0;font-size:var(--t-sm);color:var(--text-3)}

/* playbook mega cards */
.pb-mega-card{display:flex;flex-direction:column;gap:8px;padding:var(--s4);border-radius:var(--r-md);
  border:1px solid var(--border);background:var(--surface);text-decoration:none;color:inherit;
  transition:transform var(--d-2) var(--e-out),box-shadow var(--d-2) var(--e-out),border-color var(--d-2)}
.pb-mega-card:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--o-100);text-decoration:none}
.pb-mega-top{display:flex;align-items:center;gap:9px}
.pb-mega-emoji{width:34px;height:34px;border-radius:9px;background:var(--surface-3);display:grid;
  place-items:center;font-size:17px;flex:none}
.pb-mega-card strong{font-size:.9rem;font-weight:650;line-height:1.25;color:var(--text)}
.pb-mega-card .desc{font-size:var(--t-xs);color:var(--text-3);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pb-mega-meta{display:flex;gap:10px;font-size:var(--t-xs);color:var(--text-3);
  font-family:var(--mono);margin-top:auto;padding-top:6px}
/* The ribbon is absolute, so its card has to be the containing block — without
   this it anchored to the mega panel and one "Popular" badge floated in the
   panel's top-right corner, attached to nothing. */
.pb-mega-card{position:relative}
.pb-pop{position:absolute;top:8px;right:8px}
/* The ribbon is absolutely positioned, so it does not push the title out of its
   own way — without this reservation it sat on top of "Amazon Account
   Management". */
.pb-mega-card.is-pop .pb-mega-top{padding-right:72px}

/* External-link marker. inline-block with a nudged baseline keeps it on the
   title's last line instead of dropping to a line of its own, and the no-break
   space glues it to the final word so it can never orphan. */
.ext-i{display:inline-block;vertical-align:-1px;margin-left:5px;opacity:.55;flex:none}
a:hover > .ext-i,a:hover .ext-i{opacity:.9}

/* mobile drawer */
/* overflow:hidden keeps the off-canvas panel from widening scrollWidth — without
   it the closed drawer reports 400px of phantom horizontal overflow. */
.drawer{position:fixed;inset:0;z-index:var(--z-drawer);visibility:hidden;pointer-events:none;
  overflow:hidden}
.drawer.is-open{visibility:visible;pointer-events:auto}
.drawer-scrim{position:absolute;inset:0;background:rgba(11,22,38,.55);opacity:0;
  transition:opacity var(--d-3) var(--e-out);backdrop-filter:blur(3px)}
.drawer.is-open .drawer-scrim{opacity:1}
.drawer-panel{
  position:absolute;right:0;top:0;bottom:0;width:min(420px,100%);
  background:var(--surface);box-shadow:var(--sh-4);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform var(--d-3) var(--e-out);
  padding-bottom:env(safe-area-inset-bottom);
}
.drawer.is-open .drawer-panel{transform:translateX(0)}
.drawer-hd{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s5) var(--s6);border-bottom:1px solid var(--border);flex:none}
.drawer-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:var(--s5) var(--s6)}
.drawer-ft{flex:none;padding:var(--s5) var(--s6);border-top:1px solid var(--border);
  display:grid;gap:10px;background:var(--surface-2)}
.macc{border-bottom:1px solid var(--border)}
.macc-btn{display:flex;align-items:center;justify-content:space-between;width:100%;
  min-height:54px;padding:0;background:none;border:0;font-size:1.05rem;font-weight:600;
  color:var(--text);text-align:left;gap:12px}
.macc-btn .chev{width:14px;height:14px;transition:transform var(--d-2);opacity:.55;flex:none}
.macc-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.macc-body{display:none;padding-bottom:var(--s4)}
.macc-btn[aria-expanded="true"] + .macc-body{display:block}
.macc-body a{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 0;
  color:var(--text-3);text-decoration:none;font-size:.96rem}
.macc-body a:hover{color:var(--accent-text)}
.mdirect{display:flex;align-items:center;justify-content:space-between;min-height:54px;
  border-bottom:1px solid var(--border);color:var(--text);text-decoration:none;
  font-size:1.05rem;font-weight:600;gap:12px}
.mdirect svg{width:16px;height:16px;flex:none;opacity:.5}

/* mobile bottom action bar */
.bottombar{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);display:none;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--border);
  padding:6px var(--s3) calc(6px + env(safe-area-inset-bottom));
}
.bottombar-in{display:grid;grid-template-columns:repeat(5,1fr);gap:2px}
.bb-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:52px;border-radius:var(--r);text-decoration:none;color:var(--text-3);
  font-size:10.5px;font-weight:600;letter-spacing:.01em;background:none;border:0;padding:4px 2px}
.bb-item svg{width:20px;height:20px}
.bb-item[aria-current="page"],.bb-item.is-on{color:var(--accent-text)}
.bb-cta{color:var(--o-ink)}

/* announcement bar */
.announce{background:var(--navy-900);color:#fff;font-size:var(--t-sm);position:relative;z-index:calc(var(--z-header) + 1)}
.announce-in{display:flex;align-items:center;justify-content:center;gap:var(--s4);
  min-height:42px;padding:6px var(--gutter);text-align:center;flex-wrap:wrap}
.announce a{color:var(--o-300);font-weight:650;text-decoration:none;
  display:inline-flex;align-items:center;min-height:30px;padding-inline:2px}
.announce a:hover{text-decoration:underline}
.announce .x{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border:0;background:none;color:rgba(255,255,255,.6);border-radius:8px}
.announce .x:hover{background:rgba(255,255,255,.1);color:#fff}

/* ------------------------------------------------------------------ 8. HERO */
.sm-hero{position:relative;background:var(--navy-900);color:#fff;overflow:hidden;
  padding-block:clamp(56px,8vw,108px) clamp(64px,9vw,120px)}
.sm-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 520px at 88% 8%, rgba(244,127,32,.20), transparent 62%),
    radial-gradient(760px 620px at 6% 92%, rgba(47,84,128,.55), transparent 66%),
    linear-gradient(168deg,#0B1626 0%,#132745 52%,#0D1B2E 100%);
}
.sm-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 35%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 35%,transparent 78%);
}
.sm-hero > .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(32px,4.5vw,var(--s10));align-items:center}
.hero-h1{color:#fff;margin-bottom:var(--s6);max-width:19ch}
.hero-rot{display:inline-block;position:relative;color:var(--o-300);min-height:1.1em}
.hero-sub{font-size:clamp(1.02rem,.96rem + .4vw,var(--t-lg));color:#C3D3E6;max-width:56ch;
  margin-bottom:var(--s8);line-height:1.62}
.hero-ctas{display:flex;flex-wrap:wrap;gap:var(--s4);margin-bottom:var(--s8)}
.hero-proof{display:flex;flex-wrap:wrap;gap:var(--s5) var(--s7);align-items:center;
  padding-top:var(--s6);border-top:1px solid var(--on-navy-line)}
.hero-proof .pf{display:flex;align-items:center;gap:9px;font-size:var(--t-sm);color:#B7C8DC}
.hero-proof .pf svg{width:17px;height:17px;color:var(--o-300);flex:none}

.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;
  border-radius:var(--r-pill);background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:#DCE7F3;margin-bottom:var(--s6)}
.hero-eyebrow .chip{display:inline-grid;place-items:center;height:22px;padding:0 9px;
  border-radius:var(--r-pill);background:var(--o);color:#1B1206;font-size:10.5px;letter-spacing:.08em}

/* ------------------------------------------- 9. COMMAND CENTRE HERO VISUAL */
.occ{position:relative;aspect-ratio:1/.92;width:100%;max-width:560px;margin-inline:auto}
.occ-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.09)}
.occ-ring.r2{inset:12%}
.occ-ring.r3{inset:25%}
/* The SMEMinds mark IS a growth arrow, so it sits at the core of the growth
   diagram rather than a generic orange tile. Everything around it moves; the
   mark itself stays crisp and un-rotated so the brand is never distorted. */
.occ-core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:34%;aspect-ratio:1;display:grid;place-items:center;
}
.occ-coin{
  width:100%;height:auto;position:relative;z-index:2;border-radius:50%;
  box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.07);
  animation:occbreathe 5.2s var(--e-in-out) infinite;
}
@keyframes occbreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}

/* pulsing glow — the "engine is running" signal */
.occ-halo{
  position:absolute;inset:-22%;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(244,127,32,.4),rgba(244,127,32,0) 68%);
  animation:occhalo 5.2s var(--e-in-out) infinite;
}
@keyframes occhalo{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}

/* an orange comet orbiting the rim: growth closing the loop, over and over */
.occ-sweep{
  position:absolute;inset:-9%;border-radius:50%;z-index:1;
  background:conic-gradient(from 0deg,
    rgba(244,127,32,0) 0deg,rgba(244,127,32,0) 244deg,
    rgba(244,127,32,.25) 292deg,var(--o) 338deg,rgba(255,214,170,.95) 352deg,
    rgba(244,127,32,0) 360deg);
  -webkit-mask:radial-gradient(circle,transparent 61%,#000 63%);
  mask:radial-gradient(circle,transparent 61%,#000 63%);
  animation:occsweep 4.6s linear infinite;
}
@keyframes occsweep{to{transform:rotate(360deg)}}

/* sparks launching along the arrow's own vector — up and to the right */
.occ-rise{
  position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;z-index:3;
  background:var(--o);box-shadow:0 0 14px 4px rgba(244,127,32,.55);
  opacity:0;animation:occrise 3.2s var(--e-out) infinite;
}
.occ-rise.r2{animation-delay:1.05s;width:5px;height:5px}
.occ-rise.r3{animation-delay:2.1s;width:9px;height:9px}
@keyframes occrise{
  0%{transform:translate(-50%,-50%) scale(.3);opacity:0}
  15%{opacity:1}
  70%{opacity:.9}
  100%{transform:translate(260%,-300%) scale(.25);opacity:0}
}

/* the label now lives under the coin, not inside it */
.occ-label{
  position:absolute;left:50%;top:calc(50% + 17%);transform:translateX(-50%);
  text-align:center;white-space:nowrap;z-index:4;padding-top:12px;
  text-shadow:0 2px 12px rgba(11,22,38,.9);
}
.occ-label b{display:block;font-family:var(--font-display);font-weight:800;color:#fff;
  font-size:clamp(.82rem,.6rem + .7vw,1.02rem);letter-spacing:-.02em;line-height:1.15}
.occ-label span{display:block;font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--o-300);margin-top:5px}

/* Positions come from --x/--y and are clamped, so a pill near the edge of the
   ring pulls itself back in on a narrow screen instead of being cut off. */
.occ-node{
  position:absolute;
  left:clamp(7%,calc(var(--x,50) * 1%),93%);
  top:clamp(3%,calc(var(--y,50) * 1%),97%);
  transform:translate(-50%,-50%);display:flex;align-items:center;gap:7px;
  padding:7px 12px 7px 8px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:11.5px;font-weight:650;color:#EAF1F9;white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.occ-node i{width:20px;height:20px;border-radius:6px;background:rgba(244,127,32,.2);
  display:grid;place-items:center;font-style:normal;font-size:11px;flex:none}
.occ-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.occ-svg path{stroke:rgba(255,255,255,.16);stroke-width:1;fill:none}
.occ-svg .flow{stroke:var(--o);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:5 120;opacity:.85;animation:occflow 3.6s linear infinite}
@keyframes occflow{to{stroke-dashoffset:-125}}
/* ------------------------------------------------------------ 10. STAT BAND */
.stats-band{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden}
.stat{background:var(--surface);padding:var(--s7) var(--s5);text-align:center}
.sec-navy .stats-band,.sec-deep .stats-band{background:var(--on-navy-line);border-color:var(--on-navy-line)}
.sec-navy .stat,.sec-deep .stat{background:var(--navy)}
.sec-deep .stat{background:var(--navy-900)}
.stat b{display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.9rem,1.3rem + 2vw,3rem);letter-spacing:-.035em;line-height:1;
  color:var(--text);font-variant-numeric:tabular-nums}
.sec-navy .stat b,.sec-deep .stat b{color:#fff}
.stat b .u{color:var(--accent-text);display:inline;margin:0;font-size:inherit}
.sec-navy .stat b .u,.sec-deep .stat b .u{color:var(--o-300)}
/* direct children only: the number itself wraps spans, and a descendant
   selector here silently shrinks it to label size. */
.stat > span{display:block;margin-top:10px;font-size:var(--t-sm);font-weight:600;
  color:var(--text-3);letter-spacing:.01em}
.sec-navy .stat > span,.sec-deep .stat > span{color:var(--on-navy-muted)}
.stat > span.src{margin-top:6px;font-size:11px;color:var(--text-3);opacity:.75;font-weight:500}

/* -------------------------------------------------------------- 11. PILLARS */
.pillar{position:relative;padding:var(--s8) var(--s7);border-radius:var(--r-lg);
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  overflow:hidden;height:100%;
  display:flex;flex-direction:column;transition:transform var(--d-2) var(--e-out),
  box-shadow var(--d-2) var(--e-out)}
.pillar:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.pillar-n{font-family:var(--mono);font-size:2.4rem;font-weight:700;line-height:1;
  color:var(--o-600);letter-spacing:-.04em;margin-bottom:var(--s5);opacity:.85}
[data-theme="dark"] .pillar-n{color:var(--o-300);opacity:.8}
.pillar h3{font-size:var(--t-xl);margin-bottom:var(--s3)}
.pillar p{font-size:var(--t-base);color:var(--text-3);flex:1}
.pillar-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s5)}

/* ---------------------------------------------------- 12. SERVICE EXPLORER */
.svc-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--s8);
  padding:5px;background:var(--surface-3);border-radius:var(--r-pill);width:fit-content;
  max-width:100%;overflow-x:auto;scrollbar-width:none}
.svc-tabs::-webkit-scrollbar{display:none}
.svc-tab{min-height:44px;padding:0 var(--s5);border-radius:var(--r-pill);border:0;
  background:transparent;color:var(--text-3);font-weight:600;font-size:.94rem;white-space:nowrap;
  transition:background var(--d-2),color var(--d-2)}
.svc-tab[aria-selected="true"]{background:var(--surface);color:var(--text);box-shadow:var(--sh-1)}
.svc-tab:hover{color:var(--text)}
.svc-panel[hidden]{display:none}
.svc-item{display:flex;align-items:flex-start;gap:var(--s4);padding:var(--s5);
  border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);
  text-decoration:none;color:var(--text);height:100%;
  transition:transform var(--d-2) var(--e-out),box-shadow var(--d-2) var(--e-out),border-color var(--d-2)}
.svc-item:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--o-100);text-decoration:none}
.svc-item .si{width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--o-050);color:var(--o-ink)}
[data-theme="dark"] .svc-item .si{background:rgba(244,127,32,.13);color:var(--o-300)}
.svc-item .si svg{width:19px;height:19px}
.svc-item strong{display:block;font-size:.99rem;font-weight:650;color:var(--text);line-height:1.35}
.svc-item span span{display:block;font-size:var(--t-sm);color:var(--text-3);margin-top:3px;
  line-height:1.5}

/* ---------------------------------------------------------- 13. AI PIPELINE */
.flowline{display:grid;gap:var(--s4);grid-template-columns:repeat(6,minmax(0,1fr));
  counter-reset:fl}
.flownode{position:relative;padding:var(--s6) var(--s4);border-radius:var(--r-md);text-align:center;
  background:var(--surface);color:var(--text);border:1px solid var(--border);overflow:hidden}
.sec-navy .flownode,.sec-deep .flownode{background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.12);color:var(--on-navy)}
.flownode b{display:block;font-family:var(--font-display);font-weight:750;font-size:1rem;
  letter-spacing:-.01em;color:var(--text)}
.sec-navy .flownode b,.sec-deep .flownode b{color:#fff}
.flownode span{display:block;font-size:var(--t-xs);color:var(--text-3);margin-top:6px;line-height:1.5}
.sec-navy .flownode span,.sec-deep .flownode span{color:var(--on-navy-muted)}
.flownode .fi{width:38px;height:38px;margin:0 auto var(--s4);border-radius:11px;display:grid;
  place-items:center;background:var(--o-050);color:var(--o-ink)}
.sec-navy .flownode .fi,.sec-deep .flownode .fi{background:rgba(244,127,32,.17);color:var(--o-300)}
.flownode .fi svg{width:19px;height:19px}
.flownode::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  pointer-events:none;
  background:var(--o);transform:scaleX(0);transform-origin:left;
  transition:transform var(--d-4) var(--e-out)}
.flownode.is-in::after{transform:scaleX(1)}

/* ---------------------------------------------------------- 14. LOOP / STEPS */
.steps{position:relative;display:grid;gap:var(--s7)}
.step{display:grid;grid-template-columns:64px 1fr;gap:var(--s6);align-items:start;position:relative}
.step::before{content:"";position:absolute;left:31px;top:64px;bottom:calc(-1 * var(--s7));
  width:2px;background:var(--border);pointer-events:none}
.step:last-child::before{display:none}
.step-n{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:1.3rem;background:var(--navy);
  color:#fff;flex:none;position:relative;z-index:1;box-shadow:0 0 0 6px var(--bg)}
.sec-navy .step-n,.sec-deep .step-n{background:var(--o);color:#1B1206;box-shadow:0 0 0 6px var(--navy)}
.sec-deep .step-n{box-shadow:0 0 0 6px var(--navy-900)}
.sec-navy .step::before,.sec-deep .step::before{background:var(--on-navy-line)}
.step h3{margin-bottom:var(--s2)}
.step p{color:var(--text-3)}

/* ------------------------------------------------------------ 15. PLAYBOOKS */
.pb-card{display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);border:1px solid var(--border);text-decoration:none;
  color:var(--text);
  height:100%;transition:transform var(--d-2) var(--e-out),box-shadow var(--d-2) var(--e-out),
  border-color var(--d-2);position:relative}
.pb-card:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:var(--o-100);text-decoration:none}
.pb-art{position:relative;aspect-ratio:16/9;background:var(--navy);overflow:hidden;flex:none}
.pb-art .kart{position:absolute;inset:0;width:100%;height:100%}
.pb-art .emoji{position:absolute;left:16px;bottom:14px;font-size:26px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.4))}
.pb-art .dur{position:absolute;right:12px;bottom:12px;font-family:var(--mono);font-size:11px;
  padding:3px 7px;border-radius:5px;background:rgba(11,22,38,.78);color:#fff;letter-spacing:.03em}
.pb-body{padding:var(--s6);display:flex;flex-direction:column;flex:1;gap:10px}
.pb-body h3{font-size:var(--t-lg);margin:0;line-height:1.3}
.pb-body .out{font-size:var(--t-sm);color:var(--text-3);line-height:1.55;flex:1;margin:0}
.pb-meta{display:flex;gap:var(--s4);font-family:var(--mono);font-size:var(--t-xs);
  color:var(--text-3);padding-top:10px;border-top:1px solid var(--border);margin-top:auto}
.pb-meta b{color:var(--text);font-weight:700}
.pb-ribbon{position:absolute;top:12px;left:12px;z-index:2}

/* ----------------------------------------------------------------- 16. TOOLS */
.tool-card{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s6);border-radius:var(--r-md);
  border:1px solid var(--border);background:var(--surface);text-decoration:none;
  color:var(--text);height:100%;
  transition:transform var(--d-2) var(--e-out),box-shadow var(--d-2) var(--e-out),border-color var(--d-2)}
.tool-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--o-100);text-decoration:none}
.tool-top{display:flex;align-items:center;gap:11px}
.tool-emoji{width:40px;height:40px;border-radius:11px;background:var(--surface-3);display:grid;
  place-items:center;font-size:19px;flex:none}
.tool-card h3{font-size:var(--t-base);margin:0;line-height:1.35;flex:1}
.tool-card .prob{font-size:var(--t-sm);color:var(--text-3);line-height:1.55;margin:0;flex:1}
.tool-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:var(--s3);border-top:1px solid var(--border);margin-top:auto}
.tool-plat{font-size:var(--t-xs);color:var(--text-3);font-family:var(--mono)}

/* ---------------------------------------------------------- 17. CASE STUDIES */
.case-card{display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--border);background:var(--surface);height:100%;text-decoration:none;
  color:var(--text);
  transition:transform var(--d-2) var(--e-out),box-shadow var(--d-2) var(--e-out),
             border-color var(--d-2)}
.case-card:hover{transform:translateY(-4px);box-shadow:var(--sh-3);
  border-color:var(--o-100);text-decoration:none}

.case-head{position:relative;padding:var(--s6);background:var(--navy);color:#fff;flex:none;
  overflow:hidden;min-height:126px;display:flex;flex-direction:column;justify-content:flex-end}
/* an abstract mark, not a chart — these cards must not imply a result */
.case-head-art{position:absolute;inset:0;opacity:.5;pointer-events:none}
.case-head-art svg{width:100%;height:100%}
.case-head .cat{position:relative;font-size:var(--t-xs);font-weight:750;letter-spacing:.13em;
  text-transform:uppercase;color:var(--o-300)}
.case-head h3{position:relative;color:#fff;font-size:var(--t-lg);margin:8px 0 0;line-height:1.28}

.case-body{padding:var(--s6);display:flex;flex-direction:column;gap:var(--s5);flex:1}
.case-step{display:block}
.case-step-l{display:block;font-size:10.5px;font-weight:750;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.case-step-t{font-size:var(--t-sm);color:var(--text-3);line-height:1.6;
  /* three lines is enough to set up the tension; the arc is on the detail page */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.g2 .case-step-t{-webkit-line-clamp:2}
.case-step-out .case-step-l{color:var(--accent-text)}
.case-step-out .case-step-t{color:var(--text-2);font-size:var(--t-base);font-weight:500;
  -webkit-line-clamp:3}

.case-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-top:auto}
.case-metric{background:var(--surface);padding:var(--s4) var(--s3);text-align:center;display:block}
.case-metric b{display:block;font-family:var(--font-display);font-weight:800;font-size:1.3rem;
  color:var(--accent-text);letter-spacing:-.03em}
.case-metric span{display:block;font-size:10.5px;color:var(--text-3);margin-top:3px;line-height:1.35}

.case-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s5) var(--s6);border-top:1px solid var(--border);margin-top:auto;flex-wrap:wrap}
.case-tags{display:flex;gap:6px;flex-wrap:wrap}
.case-card .tlink{font-size:var(--t-sm)}

/* --------------------------------------------------------------- 18. FILTERS */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s7)}
.chip{min-height:40px;padding:0 var(--s5);border-radius:var(--r-pill);border:1px solid var(--border);
  background:var(--surface);color:var(--text-2);font-size:.9rem;font-weight:600;
  transition:all var(--d-1);display:inline-flex;align-items:center;gap:7px}
.chip:hover{border-color:var(--line-2);background:var(--surface-2)}
.chip[aria-pressed="true"],.chip.is-on{background:var(--navy);color:#fff;border-color:var(--navy)}
.chip .n{font-family:var(--mono);font-size:11px;opacity:.7}

/* ------------------------------------------------------------------ 19. FORM */
.field{display:block;margin-bottom:var(--s5)}
.field > label,.lbl{display:block;font-size:var(--t-sm);font-weight:650;color:var(--text-2);
  margin-bottom:7px;letter-spacing:.005em}
.req{color:var(--bad);margin-left:2px}
.inp,.sel,.txa{
  width:100%;min-height:48px;padding:12px 14px;border-radius:var(--r);
  border:1.5px solid var(--border);background:var(--surface);color:var(--text);
  font-size:var(--t-base);transition:border-color var(--d-1),box-shadow var(--d-1);
}
.txa{min-height:118px;resize:vertical;line-height:1.6}
.sel{appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%235A6B80' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px}
.inp:hover,.sel:hover,.txa:hover{border-color:var(--line-2)}
.inp:focus,.sel:focus,.txa:focus{outline:none;border-color:var(--o);box-shadow:var(--ring)}
.inp::placeholder,.txa::placeholder{color:var(--text-3);opacity:.7}
.inp[aria-invalid="true"],.sel[aria-invalid="true"],.txa[aria-invalid="true"]{border-color:var(--bad)}
.hint{display:block;font-size:var(--t-xs);color:var(--text-3);margin-top:6px;line-height:1.5}
.err{display:block;font-size:var(--t-xs);color:var(--bad);margin-top:6px;font-weight:600}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.check{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 14px;
  border-radius:var(--r-pill);border:1.5px solid var(--border);background:var(--surface);
  font-size:.9rem;font-weight:600;color:var(--text-2);cursor:pointer;transition:all var(--d-1)}
.check input{position:absolute;opacity:0;width:0;height:0}
.check:has(input:checked){background:var(--navy);color:#fff;border-color:var(--navy)}
.check:has(input:focus-visible){outline:3px solid var(--o);outline-offset:2px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-sm);color:var(--text-3);line-height:1.55}
/* 24px, not 20: WCAG 2.2 target size. The label toggles it too, but the box is
   what a pointer aims at. */
.consent input{width:24px;height:24px;margin-top:0;flex:none;accent-color:var(--o)}
.form-note{font-size:var(--t-xs);color:var(--text-3);margin-top:var(--s4);line-height:1.55}

/* ------------------------------------------------------------- 20. ACCORDION */
.acc{border-top:1px solid var(--border)}
.acc-item{border-bottom:1px solid var(--border)}
.acc-btn{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  width:100%;padding:var(--s6) 0;background:none;border:0;text-align:left;
  font-family:var(--font-display);font-size:var(--t-lg);font-weight:650;color:var(--text);
  line-height:1.4}
.acc-btn:hover{color:var(--accent-text)}
.acc-btn .pm{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--border);
  display:grid;place-items:center;flex:none;transition:all var(--d-2) var(--e-out);position:relative}
.acc-btn .pm::before,.acc-btn .pm::after{content:"";position:absolute;background:currentColor;
  border-radius:2px;transition:transform var(--d-2) var(--e-out)}
.acc-btn .pm::before{width:13px;height:1.8px}
.acc-btn .pm::after{width:1.8px;height:13px}
.acc-btn[aria-expanded="true"] .pm{background:var(--o);border-color:var(--o);color:#1B1206}
.acc-btn[aria-expanded="true"] .pm::after{transform:scaleY(0)}
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--d-3) var(--e-out)}
/* Open state is keyed to the ITEM, not to the button's next sibling. The button
   is wrapped in an <h3> for heading structure, so `.acc-btn + .acc-body` has no
   match — the panel never opened, on every FAQ on the site, while
   aria-expanded flipped correctly and the plus/minus animated. The symptom was
   a control that looked like it worked and did nothing. */
.acc-item.is-open > .acc-body{grid-template-rows:1fr}
.acc-body > div{overflow:hidden}
.acc-body p{color:var(--text-3);padding-bottom:var(--s6);max-width:74ch}
.sec-navy .acc,.sec-navy .acc-item{border-color:var(--on-navy-line)}
.sec-navy .acc-btn{color:#fff}
.sec-navy .acc-body p{color:var(--on-navy-muted)}

/* --------------------------------------------------------------- 21. FOOTER */
.ftr{position:relative;background:var(--navy-900);color:#fff;isolation:isolate;
  border-top:1px solid rgba(255,255,255,.07)}
/* A warm bloom on the top edge instead of a hard 3px rule. The rule read as a
   divider between two pages; this reads as the page settling. */
.ftr::before{content:"";position:absolute;inset:0 0 auto;height:3px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--o) 18%,var(--o) 82%,transparent)}
.ftr-glow{position:absolute;inset:-40% 0 auto;height:420px;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0%,rgba(244,127,32,.13),transparent 70%)}

/* ---- band 1: the closing decision ---- */
.ftr-cta{padding-block:clamp(52px,7vw,var(--s11));text-align:center;position:relative}
.ftr-cta::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--on-navy-line) 20%,
             var(--on-navy-line) 80%,transparent)}
.ftr-cta h2{color:#fff;max-width:18ch;margin-inline:auto;letter-spacing:-.025em}
.ftr-cta p{color:var(--on-navy-muted);max-width:58ch;margin:var(--s5) auto var(--s8)}
.ftr-cta .btns{display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:center}

/* ---- band 2: the directory ---- */
.ftr-main{padding-block:clamp(44px,5.5vw,var(--s10))}
.ftr-grid{display:grid;grid-template-columns:minmax(260px,1.15fr) minmax(0,2.6fr);
  gap:clamp(32px,5vw,72px)}
.ftr-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s8) var(--s6)}

.ftr-brand .brand-mark{display:block}
.ftr-tag{color:var(--on-navy-muted);font-size:var(--t-sm);margin:var(--s5) 0 var(--s6);
  max-width:32ch;line-height:1.65}

.ftr-contact{display:grid;gap:4px}
.fc-row{display:flex;align-items:center;gap:11px;color:#C7D6E6;text-decoration:none;
  font-size:.92rem;min-height:36px;border-radius:10px;margin-inline:-8px;padding-inline:8px;
  transition:color var(--d-1),background var(--d-1)}
a.fc-row:hover{color:#fff;background:rgba(255,255,255,.05);text-decoration:none}
.fc-i{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:9px;
  background:rgba(244,127,32,.13);color:var(--o-300)}
.fc-i svg{width:15px;height:15px}

.ftr h3{font-size:var(--t-xs);font-weight:750;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;margin:0 0 var(--s5)}
/* min-height 24 even where it is only a label: it is still a <button>, and a
   14px-tall control fails the WCAG 2.2 target minimum whether or not it does
   anything at this width. */
.ftr-col-btn{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  width:100%;min-height:24px;background:none;border:0;padding:0;color:inherit;font:inherit;
  letter-spacing:inherit;text-transform:inherit;text-align:left;cursor:default}
.ftr-col-btn[aria-disabled="true"]{cursor:default}
.ftr-chev{display:none}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin:0 0 2px}
.ftr li a{color:#C7D6E6;text-decoration:none;font-size:.925rem;
  display:inline-flex;align-items:center;gap:7px;min-height:32px;
  transition:color var(--d-1),transform var(--d-1)}
.ftr li a:hover{color:var(--o-300);text-decoration:none;transform:translateX(2px)}
.ftr li a .ext{width:11px;height:11px;opacity:.55}

.socials{display:flex;gap:9px;margin-top:var(--s6)}
.socials a{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);color:#C7D6E6;
  transition:all var(--d-2)}
.socials a:hover{background:var(--o);border-color:var(--o);color:#1B1206;transform:translateY(-2px)}
.socials svg{width:18px;height:18px}

/* ---- band 3: the small print ---- */
.ftr-bar{border-top:1px solid var(--on-navy-line);padding-block:var(--s6);
  display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);align-items:center}
.ftr-bar p{margin:0;font-size:var(--t-sm);color:#8FA6C0}
.ftr-legal{display:flex;flex-wrap:wrap;gap:var(--s5);margin-inline-start:auto}
.ftr-legal a{color:#8FA6C0;text-decoration:none;font-size:var(--t-sm);
  display:inline-flex;align-items:center;min-height:32px}
.ftr-legal a:hover{color:var(--o-300)}
.ftr-top{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;
  border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.14);
  color:#C7D6E6;text-decoration:none;font-size:var(--t-sm);font-weight:600;
  transition:all var(--d-2)}
.ftr-top:hover{border-color:var(--o);color:var(--o-300);text-decoration:none}
.ftr-top-i{transform:rotate(-90deg)}

/* ---- tablet: three link columns, brand above ---- */
@media (max-width:1080px){
  .ftr-grid{grid-template-columns:1fr}
  .ftr-nav{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:860px){
  .ftr-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7) var(--s6)}
}

/* ---- phone: the columns collapse ----
   Four lists stacked open ran the footer to 2,175px. Collapsed, the whole
   directory is one screen and every section is still one tap away. */
@media (max-width:640px){
  .ftr-nav{display:block}
  .ftr-col{border-bottom:1px solid var(--on-navy-line)}
  .ftr-col:first-child{border-top:1px solid var(--on-navy-line)}
  .ftr h3{margin:0}
  .ftr-col-btn{min-height:52px;cursor:pointer;padding-block:6px}
  .ftr-chev{display:block;flex:none;color:var(--on-navy-muted);
    transition:transform var(--d-2) var(--e-out)}
  .ftr-col.is-open .ftr-chev{transform:rotate(180deg);color:var(--o-300)}
  .ftr-links{display:grid;grid-template-rows:0fr;
    transition:grid-template-rows var(--d-3) var(--e-out)}
  .ftr-col.is-open .ftr-links{grid-template-rows:1fr}
  .ftr-links > ul{overflow:hidden}
  .ftr-col.is-open .ftr-links > ul{padding-bottom:var(--s5)}
  .ftr-li-pad{}
  .ftr-bar{justify-content:center;text-align:center}
  .ftr-legal{margin-inline-start:0;justify-content:center;width:100%}
  .ftr-top{margin-inline:auto}
  .ftr-cta .btns{flex-direction:column;align-items:stretch}
  .ftr-cta .btns .btn{width:100%}
}

/* --------------------------------------------------------- 22. MISC MODULES */
.logo-strip{overflow:hidden;position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-track{display:flex;gap:var(--s10);align-items:center;width:max-content;
  animation:marquee 38s linear infinite}
.logo-strip:hover .logo-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.logo-item{height:32px;opacity:.55;filter:grayscale(1);flex:none;
  display:flex;align-items:center;font-weight:700;color:var(--text-3);font-size:1.05rem;
  letter-spacing:-.01em;white-space:nowrap}

.quote{padding:var(--s8);border-radius:var(--r-lg);background:var(--surface);color:var(--text);
  border:1px solid var(--border);position:relative;height:100%;display:flex;flex-direction:column}
.quote::before{content:"\201C";position:absolute;top:10px;right:24px;font-size:5rem;line-height:1;
  font-family:Georgia,serif;color:var(--o-100);pointer-events:none}
[data-theme="dark"] .quote::before{color:rgba(244,127,32,.2)}
.quote blockquote{border:0;padding:0;font-size:var(--t-lg);line-height:1.6;color:var(--text);
  margin:0 0 var(--s6);flex:1;position:relative;z-index:1}
.quote-by{display:flex;align-items:center;gap:12px}
.quote-av{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-weight:700;flex:none}
.quote-by b{display:block;font-size:.95rem;color:var(--text)}
.quote-by span{display:block;font-size:var(--t-sm);color:var(--text-3)}

.compare{width:100%;overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg)}
.compare table{min-width:640px;font-size:var(--t-sm)}
.compare th,.compare td{padding:14px var(--s5);text-align:left;border-bottom:1px solid var(--border)}
.compare thead th{background:var(--surface-3);font-weight:700;font-size:var(--t-xs);
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);position:sticky;top:0}
.compare tbody tr:last-child td{border-bottom:0}
.compare tbody tr:hover{background:var(--surface-2)}
.compare .yes{color:var(--ok);font-weight:700}
.compare .no{color:var(--text-3)}

.timeline{position:relative;padding-left:var(--s8)}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--o),var(--border));pointer-events:none}
.tl-item{position:relative;padding-bottom:var(--s8)}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:calc(-1 * var(--s8) + 4px);top:7px;
  width:12px;height:12px;border-radius:50%;background:var(--o);box-shadow:0 0 0 4px var(--bg);
  pointer-events:none}
.tl-year{font-family:var(--mono);font-size:var(--t-sm);font-weight:700;color:var(--accent-text);
  letter-spacing:.06em}
.tl-item h3,.tl-item h4{margin:6px 0;font-size:var(--t-xl)}
.tl-item p{color:var(--text-3);font-size:var(--t-base);margin:0}
.sec-navy .tl-item::before,.sec-deep .tl-item::before{box-shadow:0 0 0 4px var(--navy)}
.sec-deep .tl-item::before{box-shadow:0 0 0 4px var(--navy-900)}

.prose{max-width:var(--wrap-text)}
.prose h2{margin-top:var(--s10)}
.prose h3{margin-top:var(--s8)}
.prose img{border-radius:var(--r-md);margin-block:var(--s6)}
.prose ul li::marker{color:var(--o)}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--surface-3);
  padding:2px 6px;border-radius:5px}
.prose pre{background:var(--navy-900);color:#DCE7F3;padding:var(--s6);border-radius:var(--r-md);
  overflow-x:auto;font-size:var(--t-sm)}
.prose pre code{background:none;padding:0;color:inherit}
.prose table{margin-block:var(--s6);font-size:var(--t-sm)}
.prose th,.prose td{padding:11px 14px;border:1px solid var(--border);text-align:left}
.prose th{background:var(--surface-3);font-weight:700}

.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:var(--t-sm);
  color:var(--text-3);margin-bottom:var(--s6);list-style:none;padding:0}
.crumbs li{display:flex;align-items:center;gap:7px;margin:0}
.crumbs li+li::before{content:"/";opacity:.4}
/* min-width as well as min-height: a two-letter crumb ("AI") is 12px wide and
   misses the 24px target minimum on width alone. */
.crumbs a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;
  justify-content:center;min-height:24px;min-width:24px}
.crumbs a:hover{color:var(--accent-text)}
.crumbs [aria-current]{color:var(--text-2);font-weight:600}
.on-navy .crumbs{color:#9FB4CC}
.on-navy .crumbs a:hover{color:var(--o-300)}
.on-navy .crumbs [aria-current]{color:#fff}

/* page hero (inner pages) */
.phero{background:var(--navy);color:#fff;position:relative;overflow:hidden;
  padding-block:clamp(44px,6vw,88px)}
.phero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(720px 420px at 82% 0%,rgba(244,127,32,.17),transparent 60%)}
.phero > .wrap{position:relative;z-index:1}
.phero h1{color:#fff;max-width:19ch;margin-bottom:var(--s5)}
.phero p{color:#C3D3E6;max-width:60ch;font-size:var(--t-lg);margin-bottom:0}
.phero-ctas{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s8)}

/* pull quote / callout */
.callout{padding:var(--s7);border-radius:var(--r-md);background:var(--o-050);
  border-left:4px solid var(--o);color:var(--ink-2)}
[data-theme="dark"] .callout{background:rgba(244,127,32,.1);color:var(--text-2)}
.callout p:last-child{margin-bottom:0}
.callout strong{color:var(--text)}

/* notice (approval-gated content hidden from public) */
.notice{display:flex;gap:12px;padding:var(--s5);border-radius:var(--r-md);
  background:var(--info-bg);color:var(--info);font-size:var(--t-sm);line-height:1.55;
  border:1px solid color-mix(in srgb,var(--info) 22%,transparent)}
.notice svg{width:19px;height:19px;flex:none;margin-top:1px}
.notice-warn{background:var(--warn-bg);color:var(--warn);
  border-color:color-mix(in srgb,var(--warn) 22%,transparent)}

/* search */
.searchbox{position:relative;max-width:640px}
.searchbox .inp{padding-left:46px;min-height:54px;border-radius:var(--r-pill);font-size:var(--t-md)}
.searchbox svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);
  width:19px;height:19px;color:var(--text-3);pointer-events:none}
.sres{display:grid;gap:2px;margin-top:var(--s5)}
.sres-item{display:flex;gap:14px;padding:var(--s4) var(--s5);border-radius:var(--r-md);
  text-decoration:none;color:inherit;transition:background var(--d-1);align-items:center}
.sres-item:hover{background:var(--surface-2);text-decoration:none}
.sres-cat{font-size:10px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-text);flex:none;width:88px}
.sres-item strong{display:block;font-size:.97rem;color:var(--text)}
.sres-item span span{display:block;font-size:var(--t-sm);color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* toast */
.toasts{position:fixed;right:16px;bottom:16px;z-index:var(--z-toast);display:grid;gap:10px;
  max-width:calc(100vw - 32px)}
.toast{display:flex;gap:11px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-md);
  background:var(--navy-900);color:#fff;box-shadow:var(--sh-4);font-size:var(--t-sm);
  min-width:260px;animation:toastin .3s var(--e-out)}
.toast svg{width:18px;height:18px;flex:none;color:var(--o-300)}
.toast.ok svg{color:#4ADE80}
.toast.bad svg{color:#FCA5A5}
@keyframes toastin{from{opacity:0;transform:translateY(12px)}}

/* modal */
dialog.modal{border:0;padding:0;border-radius:var(--r-xl);max-width:min(640px,calc(100vw - 32px));
  width:100%;background:var(--surface);color:var(--text);box-shadow:var(--sh-4)}
dialog.modal::backdrop{background:rgba(11,22,38,.6);backdrop-filter:blur(4px)}
.modal-hd{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding:var(--s6) var(--s7);border-bottom:1px solid var(--border)}
.modal-hd h3{margin:0}
.modal-bd{padding:var(--s7);max-height:70vh;overflow-y:auto}

/* --------------------------------------------------------------- 23. MOTION */
[data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity var(--d-4) var(--e-out),transform var(--d-4) var(--e-out)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.07s}
[data-reveal][data-delay="2"]{transition-delay:.14s}
[data-reveal][data-delay="3"]{transition-delay:.21s}
[data-reveal][data-delay="4"]{transition-delay:.28s}
[data-reveal][data-delay="5"]{transition-delay:.35s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1 !important;transform:none !important}
  .logo-track{animation:none}
  .occ-svg .flow{animation:none;stroke-dasharray:none;opacity:.35}
  .occ-coin,.occ-halo,.occ-sweep{animation:none}
  .occ-coin{transform:none}
  .occ-rise{display:none}
}

/* ----------------------------------------------------------- 24. RESPONSIVE */
/* Ten primary destinations plus a CTA is a lot of header. Tighten the nav
   before the row can overflow, then collapse to the drawer. */
@media (max-width:1440px){
  .nav-a{padding:0 10px;font-size:.9rem}
  .nav{margin-left:var(--s2)}
  .hdr-cta{gap:var(--s2)}
}
@media (max-width:1280px){
  .nav-a{padding:0 8px;font-size:.86rem}
  .hdr-cta .icon-btn[href="/search"]{display:none}
  /* footer responsive rules live with the footer in section 21 — the old
     five-column grid's overrides used to sit here and squeezed the new
     brand+nav grid's second column to 55px at laptop width. */
}
@media (max-width:1120px){
  :root{--hdr-h:68px}
  .nav{display:none}
  .burger{display:grid}
  .hdr-cta .btn-lg{display:none}
  .hdr-cta .icon-btn[href="/search"]{display:none}
  .hero-grid{grid-template-columns:1fr;gap:var(--s9)}
  .hero-h1{max-width:20ch}
  .occ{max-width:460px}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .flowline{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:820px){
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats-band{grid-template-columns:repeat(2,1fr) !important}
  .case-metrics{grid-template-columns:repeat(3,1fr)}
}
/* Below this the header is logo + theme + burger only: the CTA lives in the
   drawer footer and in the bottom action bar, so keeping it here only pushed
   the burger off-screen. */
@media (max-width:820px){
  .hdr-cta > .btn{display:none}
}
@media (max-width:640px){
  body{font-size:var(--t-base)}
  :root{--hdr-h:62px}
  /* the bar wraps to 2-3 lines on a phone; keep the dismiss in the corner
     rather than floating beside the middle line */
  .announce .x{top:4px;transform:none}
  .announce-in{padding-right:44px;gap:var(--s2)}
  .g2,.g3,.g4,.g6{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .flowline{grid-template-columns:1fr}
  .sec-head{margin-bottom:var(--s7)}
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas .btn{width:100%}
  .hero-proof{gap:var(--s4)}
  .step{grid-template-columns:48px 1fr;gap:var(--s5)}
  .step-n{width:48px;height:48px;font-size:1.05rem}
  .step::before{left:23px;top:48px}
  .bottombar{display:block}
  body{padding-bottom:64px}
  .ftr{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .card,.pillar{padding:var(--s6)}
  .quote{padding:var(--s6)}
  .acc-btn{font-size:var(--t-base);padding-block:var(--s5)}
  .occ{max-width:340px}
  .occ-node{font-size:10px;padding:5px 9px 5px 6px;
    left:clamp(17%,calc(var(--x,50) * 1%),83%);
    top:clamp(5%,calc(var(--y,50) * 1%),95%)}
  .occ-node i{width:17px;height:17px;font-size:9px}
  .drawer-panel{width:100%}
}
@media (max-width:380px){
  :root{--gutter:16px}
  .brand-txt{font-size:1.08rem}
  .stats-band{grid-template-columns:1fr !important}
}

/* wide screens keep the measure honest */
@media (min-width:1700px){
  :root{--wrap:1320px}
}

/* ------------------------------------------------------------------ 25. PRINT */
@media print{
  .hdr,.bottombar,.drawer,.announce,.ftr-cta,.toasts{display:none !important}
  body{background:#fff;color:#000;font-size:11pt}
  .sm-hero,.phero,.sec-navy,.sec-deep{background:#fff !important;color:#000 !important}
  .sm-hero h1,.phero h1,.sec-navy h2{color:#000 !important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .card,.pillar{break-inside:avoid;box-shadow:none;border:1px solid #ccc}
}


/* --------------------------------------------- 26. DARK-SURFACE COMPONENTS
   Components whose defaults assume a light ground, given their dark-band
   treatment explicitly. Scoped to the component, never to the section, so a
   white card sitting inside a navy band keeps its own colours. */
.sec-navy .timeline .tl-year,.sec-deep .timeline .tl-year,
.on-navy .timeline .tl-year{color:var(--o-300)}
.sec-navy .timeline p,.sec-deep .timeline p,.on-navy .timeline p{color:var(--on-navy-muted)}
.sec-navy .timeline::before,.sec-deep .timeline::before{
  background:linear-gradient(180deg,var(--o),var(--on-navy-line))}
.sec-navy .steps .step p,.sec-deep .steps .step p{color:var(--on-navy-muted)}
.sec-navy .compare,.sec-deep .compare{color:var(--text)}


/* ------------------------------------------------- 27. COARSE POINTERS
   WCAG 2.2 asks 24x24; this brief asks 44x44. On a touch device every
   control clears 44 — on a mouse the denser desktop sizes stay. */
@media (pointer:coarse){
  .icon-btn,.btn-sm,.chip,.svc-tab,.check{min-height:44px}
  .icon-btn{width:44px;height:44px}
  .ftr li a,.ftr-legal a,.ftr-contact a,.announce a,.crumbs a,.tlink{min-height:44px}
  .ftr li{margin-bottom:4px}
  .macc-body a,.mdirect{min-height:48px}
  .acc-btn{min-height:56px}
}

/* ==========================================================================
   28. GENERATED ARTWORK + MOTION
   Everything drawn by app/art.py. All motion is declared here so the
   reduced-motion block at the end of this file can switch it off in one place.
   ========================================================================== */

/* ------------------------------------------------------- atmospheric plate */
/* One raster texture, used only as atmosphere behind dark bands. It never
   carries information, so it is decorative and always aria-hidden. */
.plate{position:relative;isolation:isolate}
.plate::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("/static/img/art/plate-mesh.jpg");
  background-size:cover;background-position:center;
  opacity:.5;mix-blend-mode:screen;
}
.plate::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,22,38,.35),rgba(11,22,38,.82));
}

/* ---------------------------------------------------------------- world map */
/* The land layer is a cached <img>; the routes are inline SVG stacked on top.
   Both use the same 1000x460 viewBox so they register exactly. */
.wm-stack{position:relative;aspect-ratio:1000/460}
.wm-land-img{position:absolute;inset:0;width:100%;height:100%}
.wm{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.wm-arc{fill:none;stroke-width:1.5;stroke-linecap:round;
  stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900)}
.wm.is-in .wm-arc{animation:wmdraw 1.8s var(--e-out) forwards}
.wm-arc-in{stroke-width:1.3;opacity:.75}
@keyframes wmdraw{to{stroke-dashoffset:0}}
.wm-node{fill:#8FB0D6;fill-opacity:.75;transition:fill-opacity var(--d-2)}
.wm-node:hover{fill-opacity:1}
.wm-node-hi{fill:#FFFFFF;fill-opacity:.9}
.wm-node-in{fill:#7DD3FC}
.wm-origin{fill:var(--o)}
.wm-origin-ring{fill:none;stroke:var(--o);stroke-width:1.6;transform-box:fill-box;
  transform-origin:center}
.wm.is-in .wm-origin-ring{animation:wmping 2.8s var(--e-out) infinite}
@keyframes wmping{
  0%{transform:scale(.6);opacity:.9}
  70%{transform:scale(2.6);opacity:0}
  100%{transform:scale(2.6);opacity:0}
}
.wm-pulse{fill:#FFD9B3;offset-rotate:0deg;opacity:0}
.wm.is-in .wm-pulse{animation:wmflow 3.4s linear infinite}
@keyframes wmflow{
  0%{offset-distance:0%;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{offset-distance:100%;opacity:0}
}
.wm-wrap{position:relative;max-width:1000px;margin-inline:auto}
.wm-legend{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:var(--s6);justify-content:center}
.wm-legend span{font-size:var(--t-xs);color:var(--on-navy-muted);
  border:1px solid var(--on-navy-line);border-radius:var(--r-pill);padding:4px 11px}
.wm-key{display:flex;gap:var(--s6);flex-wrap:wrap;justify-content:center;
  margin-top:var(--s5);font-size:var(--t-sm);color:var(--on-navy-muted)}
.wm-key i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:7px}
.wm-key .k-out{background:var(--o)}
.wm-key .k-mkt{background:#fff;opacity:.85}
.wm-key .k-in{background:#7DD3FC}

/* ------------------------------------------------------------ playbook art */
.kart-motif{opacity:0;transform:translateY(8px)}
.kart.is-in .kart-motif{opacity:1;transform:none;
  transition:opacity .7s var(--e-out) .1s,transform .7s var(--e-out) .1s}
.pb-card:hover .kart-motif{transform:translateY(-3px) scale(1.02);
  transition:transform var(--d-3) var(--e-out)}

/* --------------------------------------------------------- service marks */
.svc-mark{flex:none}
.svc-hero-mark{color:var(--o-300);opacity:.9}

/* ------------------------------------------------------------- case motif */
/* the case mark lives inside the card header now; it is texture, so it fades
   in rather than drawing itself like a chart would */
.case-mark{width:100%;height:100%;display:block;opacity:0}
.case-card.is-in .case-mark{opacity:1;transition:opacity .8s var(--e-out) .1s}

/* ----------------------------------------------------------- resource art */
.topic-art{width:100%;height:110px;display:block}

/* ---------------------------------------------------------- flow pipeline */
.pl{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));align-items:center;
  height:20px;margin-bottom:-10px;position:relative;z-index:1}
.pl-cell{position:relative;display:grid;place-items:center;height:20px}
.pl-cell::before{content:"";position:absolute;left:-50%;right:50%;top:50%;height:2px;
  background:var(--o);opacity:.42;transform:scaleX(0);transform-origin:left}
.pl-cell:first-child::before{display:none}
.pl.is-in .pl-cell::before{animation:plline .5s var(--e-out) forwards;
  animation-delay:calc(var(--i) * .13s)}
@keyframes plline{to{transform:scaleX(1)}}
.pl-dot{width:14px;height:14px;border-radius:50%;background:var(--bg);
  border:2.5px solid var(--o);transform:scale(0);position:relative;z-index:1}
.sec-navy .pl-dot,.sec-deep .pl-dot{background:var(--navy-900)}
.pl.is-in .pl-dot{animation:plpop .45s var(--e-out) forwards;
  animation-delay:calc(var(--i) * .13s)}
@keyframes plpop{to{transform:scale(1)}}

/* ------------------------------------------------------- scroll progress */
.scroll-bar{position:fixed;left:0;top:0;height:3px;z-index:calc(var(--z-header) + 2);
  background:linear-gradient(90deg,var(--o),var(--o-300));width:0;
  transition:width .08s linear;pointer-events:none;border-radius:0 3px 3px 0}

/* -------------------------------------------------- pointer spotlight */
/* A soft highlight that follows the cursor across a card grid. Costs one
   custom property per card and no layout. */
.spot{position:relative}
.spot::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity var(--d-3) var(--e-out);
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
    rgba(244,127,32,.10),transparent 62%);
}
.spot:hover::after{opacity:1}
.card-navy.spot::after,.card-glass.spot::after{
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
    rgba(244,127,32,.18),transparent 62%)}

/* --------------------------------------------------------- hero parallax */
.sm-hero{--par:0px}
.sm-hero::after{transform:translate3d(0,var(--par),0)}
.occ{will-change:transform}

/* ----------------------------------------------------- marketplace strip */
.mk-strip{overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mk-track{display:flex;gap:var(--s7);width:max-content;animation:marquee 46s linear infinite}
.mk-strip:hover .mk-track{animation-play-state:paused}
.mk-item{display:flex;align-items:center;gap:9px;flex:none;font-size:var(--t-sm);
  font-weight:600;color:var(--on-navy-muted);white-space:nowrap}
.mk-item::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--o);
  opacity:.7;flex:none}

/* ---------------------------------------------------------- reveal motion */
@media (prefers-reduced-motion:reduce){
  .wm.is-in .wm-arc,.wm.is-in .wm-origin-ring,.wm.is-in .wm-pulse,
  .pl.is-in .pl-cell::before,.pl.is-in .pl-dot,
  .mk-track{animation:none !important}
  .wm-arc{stroke-dashoffset:0 !important}
  .case-mark{opacity:1 !important}
  .pl-cell::before{transform:scaleX(1) !important}
  .pl-dot{transform:scale(1) !important}
  .wm-pulse{display:none}
  .kart-motif{opacity:1 !important;transform:none !important}
  .scroll-bar{display:none}
  .sm-hero::after{transform:none !important}
}

/* ---------------------------------------------- 29. PAGE HERO ARTWORK */
.phero-split{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s9);
  align-items:center}
.phero-art{color:var(--o-300);opacity:.55;flex:none}
.phero-art svg{filter:drop-shadow(0 8px 26px rgba(244,127,32,.25))}
.phero{position:relative;overflow:hidden}
.phero-kart{position:absolute;right:0;top:0;bottom:0;width:42%;opacity:.22;
  pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 55%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 55%)}
.phero-kart .kart{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){
  .phero-split{grid-template-columns:1fr}
  .phero-art{display:none}
  .phero-kart{width:70%;opacity:.14}
}

/* The map is inherently small on a phone — let it run full bleed so the
   silhouette and the routes stay readable. */
@media (max-width:700px){
  .wm-stack{margin-inline:calc(-1 * var(--gutter));width:calc(100% + var(--gutter) * 2)}
  .wm-key{flex-direction:column;align-items:center;gap:8px}
  .mk-track{animation-duration:34s}
}

/* ==========================================================================
   30. PROOF BAND
   The old stat strip floated between the hero and the first section with no
   framing, flat cells, and its most valuable content — where each number comes
   from — set as the smallest, faintest text on the page. This inverts that:
   the band lifts into the hero, each figure carries a mark, and the source is
   a real link, because the link is the entire point of the section.
   ========================================================================== */
/* no bottom padding: the card already carries its own, and the next
   section's top padding supplies the gap. */
.sec-proof{position:relative;z-index:3}
.proof{
  margin-top:clamp(-40px,-5vw,-84px);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--sh-4);overflow:hidden;position:relative;
}
/* a hairline of brand orange across the top edge, as a seal */
.proof::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--o) 18%,var(--o-300) 50%,var(--o) 82%,transparent);
}
.proof-head{padding:clamp(28px,3.4vw,40px) clamp(24px,3vw,40px) 0;max-width:640px}
.proof-head h2{font-size:clamp(1.35rem,1.1rem + .8vw,1.75rem);margin-bottom:10px}
.proof-head p{color:var(--text-3);font-size:var(--t-base);margin:0}

.proof-grid{display:grid;padding:clamp(20px,2.4vw,28px) clamp(12px,1.4vw,20px)
  clamp(24px,2.8vw,32px)}
.proof-cell{
  position:relative;padding:clamp(16px,2vw,22px) clamp(14px,1.8vw,22px);
  border-radius:var(--r-md);transition:background var(--d-2) var(--e-out);
  display:flex;flex-direction:column;align-items:flex-start;gap:0;
}
.proof-cell + .proof-cell::before{
  content:"";position:absolute;left:0;top:16%;bottom:16%;width:1px;
  background:var(--border);pointer-events:none;
}
.proof-cell:hover{background:var(--surface-2)}

.proof-ico{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--o-050);color:var(--o-ink);margin-bottom:14px;flex:none;
  transition:transform var(--d-2) var(--e-out);
}
.proof-cell:hover .proof-ico{transform:translateY(-2px)}
.proof-ico svg{width:18px;height:18px}
[data-theme="dark"] .proof-ico{background:rgba(244,127,32,.14);color:var(--o-300)}

.proof-cell b{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.1rem,1.5rem + 2vw,3.1rem);letter-spacing:-.04em;line-height:1;
  color:var(--text);font-variant-numeric:tabular-nums;
}
.proof-cell b .u{color:var(--accent-text);display:inline;margin:0;font-size:inherit}
.proof-label{
  display:block;margin-top:12px;font-size:var(--t-base);font-weight:650;
  color:var(--text-2);line-height:1.35;
}
.proof-src{
  display:inline-flex;align-items:center;gap:6px;margin-top:8px;min-height:24px;
  font-size:var(--t-xs);color:var(--text-3);font-family:var(--mono);
  letter-spacing:-.01em;text-decoration:none;
}
a.proof-src:hover{color:var(--accent-text);text-decoration:underline;
  text-underline-offset:3px}
.proof-src .ext{width:11px;height:11px;opacity:.6;flex:none}

@media (max-width:820px){
  .proof-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .proof-cell + .proof-cell::before{display:none}
  .proof-cell:nth-child(n+2)::before{display:none}
  .proof-cell{border-top:1px solid var(--border);border-radius:0}
  .proof-cell:nth-child(-n+2){border-top:0}
  .proof-cell:nth-child(2n)::after{content:"";position:absolute;left:0;top:14%;
    bottom:14%;width:1px;background:var(--border)}
}
@media (max-width:520px){
  .proof-grid{grid-template-columns:1fr !important;padding-inline:8px}
  /* On one column, stacking icon-over-number wastes ~70px per stat. Put the
     mark beside the figure instead — same information, two thirds the height. */
  .proof-cell{
    display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;
    grid-template-areas:"ico num" ".   lab" ".   src";
    align-items:center;padding:16px 14px;border-top:1px solid var(--border);
    border-radius:0;
  }
  /* the two-column block above strips the top border from cells 1 AND 2;
     in one column only the first should lose it */
  .proof-cell:nth-child(2){border-top:1px solid var(--border)}
  .proof-cell:first-child{border-top:0}
  .proof-cell:nth-child(2n)::after{display:none}
  .proof-ico{grid-area:ico;margin-bottom:0;width:38px;height:38px}
  .proof-cell b{grid-area:num;font-size:2.1rem}
  .proof-label{grid-area:lab;margin-top:6px}
  .proof-src{grid-area:src;margin-top:4px}
  .proof{margin-top:clamp(-24px,-4vw,-40px)}
}
@media (pointer:coarse){.proof-src{min-height:44px}}

/* ==========================================================================
   31. POST CARDS + FILTER BAR
   The old resource card ran to 502px with a dead gap between the excerpt and
   the read-time, and stacked three badges from three different taxonomies on
   top of every one. This puts the kind on the artwork, the topic above the
   title, and everything else in a single quiet meta line.
   ========================================================================== */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6)}
.post-lead-wrap{grid-column:1 / -1}

.post-card{
  display:flex;flex-direction:column;height:100%;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  color:var(--text);text-decoration:none;box-shadow:var(--sh-1);
  transition:transform var(--d-2) var(--e-out),box-shadow var(--d-2) var(--e-out),
             border-color var(--d-2);
}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--sh-3);
  border-color:var(--o-100);text-decoration:none}

.post-art{position:relative;flex:none;overflow:hidden}
.post-art .topic-art{height:132px;transition:transform var(--d-4) var(--e-out)}
.post-card:hover .post-art .topic-art{transform:scale(1.05)}
.post-kind{
  position:absolute;left:14px;top:14px;height:24px;padding:0 10px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;font-size:11px;font-weight:750;letter-spacing:.05em;
  background:rgba(11,22,38,.72);color:#fff;border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}

.post-body{display:flex;flex-direction:column;flex:1;padding:var(--s6);gap:0}
.post-topic{display:block;font-size:var(--t-xs);font-weight:750;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-text);margin-bottom:10px}
.post-card h3{font-size:var(--t-lg);line-height:1.3;margin:0 0 10px}
.post-excerpt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;font-size:var(--t-sm);color:var(--text-3);line-height:1.6}
.post-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  margin-top:auto;padding-top:var(--s5)}
.post-meta{font-size:var(--t-xs);color:var(--text-3);font-family:var(--mono);
  letter-spacing:-.01em}
.post-card .tlink{font-size:var(--t-sm)}

/* the lead article: artwork beside the copy, not above it */
.post-lead{flex-direction:row;align-items:stretch}
.post-lead .post-art{width:44%;flex:none}
.post-lead .post-art .topic-art{height:100%;min-height:260px}
.post-lead .post-body{padding:clamp(24px,3vw,40px);justify-content:center}
.post-lead h3{font-size:clamp(1.3rem,1.05rem + 1vw,1.85rem);margin-bottom:14px}
.post-lead .post-excerpt{font-size:var(--t-base);-webkit-line-clamp:4;max-width:52ch}
.post-lead .post-foot{padding-top:var(--s6)}

/* ------------------------------------------------------------- filter bar */
.filter-bar{display:grid;gap:var(--s4);margin-bottom:var(--s8)}
.filter-row{display:flex;align-items:flex-start;gap:var(--s5);flex-wrap:wrap}
.filter-l{flex:none;min-width:56px;padding-top:10px;font-size:var(--t-xs);font-weight:750;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.filter-row .filters{margin-bottom:0;flex:1}

/* The lead card takes a whole row, so positions 5, 8, 11 … are the ones that
   can end up alone on the last row. Let such a card go wide instead of sitting
   in a two-thirds gap. */
@media (min-width:1041px){
  .post-grid > div:last-child:nth-child(3n+2){grid-column:span 3}
  .post-grid > div:last-child:nth-child(3n+2) .post-card{flex-direction:row;align-items:stretch}
  .post-grid > div:last-child:nth-child(3n+2) .post-art{width:38%;flex:none}
  .post-grid > div:last-child:nth-child(3n+2) .post-art .topic-art{height:100%;min-height:220px}
  .post-grid > div:last-child:nth-child(3n+2) .post-body{padding:clamp(24px,3vw,36px);
    justify-content:center}
  .post-grid > div:last-child:nth-child(3n+2) h3{font-size:var(--t-xl)}
  .post-grid > div:last-child:nth-child(3n+2) .post-excerpt{font-size:var(--t-base);
    -webkit-line-clamp:4;max-width:52ch}
}
@media (max-width:1040px){
  .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .post-lead{flex-direction:column}
  .post-lead .post-art{width:100%}
  .post-lead .post-art .topic-art{min-height:0;height:160px}
}
@media (max-width:640px){
  .post-grid{grid-template-columns:1fr}
  .filter-row{flex-direction:column;gap:8px}
  .filter-l{padding-top:0}
  /* A three-part meta line and a link cannot share 343px: side by side both
     wrap and the row reads as broken. Stack them. */
  .post-foot{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ================================================================== 32. SERVICE PAGE
   COMPACT BLOCKS
   The engagement process and the two cross-sells used to run as full sections
   on all 41 service pages — ~250 identical words per page. The canonical copy
   now lives on /services#how and /playbook; these are the summaries.
   ================================================================== */
.howstrip{display:flex;align-items:center;gap:var(--s6);flex-wrap:wrap}
.howstrip-l{margin:0;flex:none;font-size:var(--t-xs);font-weight:750;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3)}
.howstrip-steps{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;
  list-style:none;margin:0;padding:0;flex:1;min-width:0}
.howstrip-steps li{display:flex;align-items:center;gap:9px;font-size:var(--t-sm);
  font-weight:650;color:var(--text-2);white-space:nowrap}
.howstrip-steps li b{display:grid;place-items:center;width:24px;height:24px;flex:none;
  border-radius:50%;background:var(--o-050);color:var(--o-ink);
  font-family:var(--mono);font-size:11.5px;font-weight:700}
[data-theme="dark"] .howstrip-steps li b{background:rgba(244,127,32,.16);color:var(--o-300)}
/* min-height, not just font-size: at 21px tall this link misses the WCAG 2.2
   24px target minimum, and a one-line inline-flex has no height of its own. */
.howstrip .tlink{flex:none;font-size:var(--t-sm);white-space:nowrap;min-height:24px}

.twoup{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden}
.twoup-c{background:var(--surface);color:var(--text);padding:clamp(22px,2.6vw,32px);
  display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.twoup-alt{background:var(--surface-2)}
.twoup-h{font-size:var(--t-lg);line-height:1.3;margin:0;color:var(--text)}
.twoup-c p{margin:0;font-size:var(--t-sm);color:var(--text-3);line-height:1.6}
.twoup-c .btn{margin-top:auto}

/* related services: a link list, so the row is the name and nothing else */
.svc-item-slim{align-items:center}
.svc-item-slim strong{display:block}

@media (max-width:900px){
  .twoup{grid-template-columns:1fr}
}
@media (max-width:640px){
  .howstrip{gap:var(--s4)}
  .howstrip-steps{gap:var(--s4)}
}

/* ================================================================== 33. PLATFORMS
   The marketplace logo strip. Third-party trademarks on opaque white artwork,
   so each sits on its own light tile — keying the white out would punch holes
   through Flipkart's mark (there the white IS the lettering) and recolouring
   would misstate someone else's brand.
   ================================================================== */
.pf-sec{padding-block:clamp(48px,6vw,84px)}
.pf-strip{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.pf-track{display:flex;align-items:center;gap:clamp(18px,3vw,44px);width:max-content;
  animation:pf-scroll 38s linear infinite}
.pf-strip:hover .pf-track,.pf-strip:focus-within .pf-track{animation-play-state:paused}
@keyframes pf-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.pf-cell{display:block;flex:none;text-decoration:none;border-radius:var(--r-lg)}
.pf-cell:hover{text-decoration:none}
.pf-tile{
  display:grid;place-items:center;width:clamp(132px,15vw,176px);height:clamp(72px,8vw,92px);
  padding:14px clamp(14px,2vw,22px);border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(16,29,48,.05);
  transition:transform var(--d-2) var(--e-out),box-shadow var(--d-2) var(--e-out),
             border-color var(--d-2);
}
.pf-tile img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.62;transition:filter var(--d-2),opacity var(--d-2)}
.pf-word{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:#1A2E4A;
  letter-spacing:-.01em}
.pf-cell:hover .pf-tile,.pf-cell:focus-visible .pf-tile{
  transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--o-100)}
.pf-cell:hover .pf-tile img,.pf-cell:focus-visible .pf-tile img{filter:none;opacity:1}
/* On dark the tile stays light — a logo wall is the one place a light plate is
   correct in both themes, because the artwork itself is fixed. Softened off
   white so it does not glare against the navy. */
[data-theme="dark"] .pf-tile{background:#F4F7FB;border-color:rgba(255,255,255,.10)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pf-tile{background:#F4F7FB;border-color:rgba(255,255,255,.10)}
}
@media (prefers-reduced-motion:reduce){
  .pf-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .pf-strip{-webkit-mask-image:none;mask-image:none}
  /* the duplicated half is decoration; with no motion it is just repetition */
  .pf-track > .pf-cell[aria-hidden="true"]{display:none}
}

/* ---------------------------------------------------- founder, no portrait */
.founder-grid{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);align-items:center}
.founder-grid.is-solo{grid-template-columns:minmax(0,1fr);max-width:780px}
.founder-col.is-sticky{position:sticky;top:110px}
.founder-photo{border-radius:20px;width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
@media (max-width:900px){
  .founder-grid{grid-template-columns:1fr}
  .founder-col.is-sticky{position:static}
}