/* Cinthamani Computers design system ("Signal Plan"), November 2026.
   Tokens, base, chrome (header, mega menu, drawer, footer) and every shared component. Documented with usage rules in the
   client folder: design/DESIGN-SYSTEM.md; component gallery: src/pages/_gallery.html (python build.py --gallery).
   Rules: tokens only (no raw colours below the token block), no web-font or CDN loads, motion 150-300 ms on transform and
   opacity, reduced motion respected, WCAG AA contrast, 44 px touch targets, no horizontal scroll from 360 px. */

/* ---------------------------------------------------------------- fonts (self-hosted, SIL OFL 1.1: assets/fonts/OFL-*.txt) */
@font-face{font-family:"Archivo";src:url(../fonts/archivo-latin-wdth-normal.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(../fonts/ibm-plex-sans-latin-wght-normal.woff2) format("woff2");font-weight:100 700;font-style:normal;font-display:swap}

/* ---------------------------------------------------------------- tokens */
:root{
  /* colour: the logo's electric blue on deep navy and paper */
  --blue:#000CFF; --blue-press:#0009C2; --blue-50:#EEF0FF; --blue-100:#DCE0FF; --sky:#A3AEFF;
  --navy:#081330; --navy-deep:#050B1D; --navy-700:#111E47; --navy-600:#1A2A5C; --navy-line:#2A3A6E;
  --paper:#F5F6F8; --white:#FFFFFF; --ink:#0A1433; --muted:#4A5676; --line:#DCE0EA; --line-strong:#C3C9D8;
  --on-dark:#F3F5FC; --on-dark-muted:#B7C0DB;
  --ok:#0B6B3A; --err:#B3261E;
  /* type: Archivo (wide, engineering) for display, IBM Plex Sans for text */
  --font-display:"Archivo","Arial Nova","Helvetica Neue",Arial,sans-serif;
  --font-text:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --fs-hero:clamp(2.375rem,1.55rem + 3.6vw,4.5rem);
  --fs-h1:clamp(2.125rem,1.5rem + 2.7vw,3.5rem);
  --fs-h2:clamp(1.75rem,1.35rem + 1.7vw,2.625rem);
  --fs-h3:clamp(1.25rem,1.14rem + .45vw,1.5rem);
  --fs-lg:clamp(1.0625rem,1rem + .3vw,1.25rem);
  --fs-body:1.0625rem; --fs-sm:.9375rem; --fs-xs:.8125rem;
  /* space (4 px grid), radii, shadow, motion, layers */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --band:clamp(56px,6.5vw,104px); --gut:clamp(20px,4vw,40px); --max:1240px;
  --r-s:10px; --r-m:16px; --r-l:24px; --r-pill:999px;
  --shadow-pop:0 24px 48px -16px rgba(8,19,48,.32); --shadow-lift:0 14px 28px -18px rgba(8,19,48,.45);
  --t-fast:150ms; --t:220ms; --t-slow:300ms; --ease:cubic-bezier(.2,.7,.2,1);
  --z-index:20; --z-mega:40; --z-hdr:50; --z-drawer:60;
  --hdr-h:76px;
}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px)}
body.cc{margin:0;background:var(--white);color:var(--ink);font:400 var(--fs-body)/1.6 var(--font-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
:where(.cc) img,:where(.cc) svg{max-width:100%;height:auto}
:where(.cc) img{display:block}
:where(.cc) h1,:where(.cc) h2,:where(.cc) h3,:where(.cc) h4,:where(.cc) p,:where(.cc) ul,:where(.cc) ol,:where(.cc) dl,:where(.cc) dd,:where(.cc) figure,:where(.cc) blockquote{margin:0}
:where(.cc) ul,:where(.cc) ol{padding:0;list-style:none}
:where(.cc) a{color:inherit;text-decoration:none}
:where(.cc) button,:where(.cc) input,:where(.cc) select,:where(.cc) textarea{font:inherit;color:inherit}
.cc :focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.cc .on-dark :focus-visible,.cc .band--navy :focus-visible,.cc .band--deep :focus-visible,.cc .ftr :focus-visible,.cc .hero--navy :focus-visible{outline-color:var(--white)}
.cc ::selection{background:var(--blue);color:var(--white)}
:where(.cc) .i{width:24px;height:24px;flex:none}
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--blue);color:var(--white);padding:12px 18px;border-radius:var(--r-s);font-weight:600}
.skip:focus{top:12px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)}

/* type roles */
.h-hero,.h1,.h2,.h3,.h4{font-family:var(--font-display);font-stretch:112%;color:inherit;text-wrap:balance}
.h-hero{font-size:var(--fs-hero);font-weight:680;line-height:1.02;letter-spacing:-.028em}
.h1{font-size:var(--fs-h1);font-weight:660;line-height:1.05;letter-spacing:-.025em}
.h2{font-size:var(--fs-h2);font-weight:640;line-height:1.1;letter-spacing:-.02em}
.h3{font-size:var(--fs-h3);font-weight:620;line-height:1.2;letter-spacing:-.012em}
.h4{font-size:1.0625rem;font-weight:620;line-height:1.3;letter-spacing:-.005em}
.lede{font-size:var(--fs-lg);line-height:1.55;color:var(--muted);max-width:68ch;text-wrap:pretty}
.muted{color:var(--muted)}
.small{font-size:var(--fs-sm)}
.label{font-family:var(--font-display);font-stretch:108%;font-size:var(--fs-sm);font-weight:600;letter-spacing:.01em;color:var(--blue)}
.band--navy .label,.band--deep .label,.hero--navy .label,.tile--navy .label{color:var(--sky)}
.band--navy .lede,.band--deep .lede,.hero--navy .lede,.band--navy .muted,.band--deep .muted,.hero--navy .muted{color:var(--on-dark-muted)}
.prose{max-width:72ch}
.prose p + p{margin-top:1em}
.prose a,.a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.band--navy .prose a,.band--deep .prose a,.band--navy .a,.band--deep .a{color:var(--sky)}

/* ---------------------------------------------------------------- buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border:1.5px solid transparent;border-radius:var(--r-pill);font:600 1rem/1.2 var(--font-text);cursor:pointer;transition:background-color var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t-fast) var(--ease);text-align:center}
.btn .i{width:20px;height:20px;transition:transform var(--t) var(--ease)}
.btn:hover .i{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--blue);color:var(--white)}
.btn--primary:hover{background:var(--blue-press)}
.btn--ghost{border-color:var(--line-strong);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn--light{background:var(--white);color:var(--navy)}
.btn--light:hover{background:var(--blue-50)}
.btn--onDark{border-color:var(--navy-line);color:var(--on-dark);background:transparent}
.btn--onDark:hover{border-color:var(--white)}
.btn--sm{min-height:44px;padding:9px 18px;font-size:.9375rem}
.btn.is-busy{opacity:.8;cursor:progress}
.btn.is-busy svg{width:18px;height:18px;animation:spin .8s linear infinite}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--blue);cursor:pointer}
.link .i{width:18px;height:18px;transition:transform var(--t) var(--ease)}
.link:hover .i{transform:translateX(4px)}
.link:hover{text-decoration:underline;text-underline-offset:4px}
.band--navy .link,.band--deep .link,.hero--navy .link,.tile--navy .link{color:var(--sky)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------------- header, mega menu */
.hdr{position:sticky;top:0;z-index:var(--z-hdr);background:var(--white);border-bottom:1px solid var(--line)}
.hdr__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);height:var(--hdr-h)}
.hdr__brand{display:flex;align-items:center;min-height:44px;flex:none}
.hdr__brand img{width:auto;height:40px}
.nav__list{display:flex;align-items:center;gap:2px}
.nav__link{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:8px 12px;border-radius:var(--r-s);font-size:.9375rem;font-weight:500;color:var(--ink);white-space:nowrap;cursor:pointer;transition:color var(--t) var(--ease),background-color var(--t) var(--ease)}
.nav__link .i{width:16px;height:16px;transition:transform var(--t) var(--ease)}
.nav__link:hover,.nav__item--mega:hover>.nav__link,.nav__item--mega:focus-within>.nav__link{color:var(--blue);background:var(--blue-50)}
.nav__link[aria-current=page]{color:var(--blue);box-shadow:inset 0 -3px 0 var(--blue);border-radius:0}
.nav__item--cta{margin-left:10px}
.nav__item--cta .btn[aria-current=page]{box-shadow:0 0 0 3px var(--blue-100)}
.nav__item--mega:hover .nav__link .i,.nav__item--mega:focus-within .nav__link .i{transform:rotate(180deg)}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--white);border-top:1px solid var(--line);box-shadow:var(--shadow-pop);visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility 0s linear var(--t);z-index:var(--z-mega)}
.nav__item--mega:hover>.mega,.nav__item--mega:focus-within>.mega,.mega.is-open{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.hdr.is-closed .mega{visibility:hidden!important;opacity:0!important}
.mega__in{padding-block:28px 32px}
.mega__in--groups{display:grid;grid-template-columns:3fr 2fr;gap:var(--s6)}
.mega__group--own{border-left:1px solid var(--line);padding-left:var(--s6)}
.mega__label{font-family:var(--font-display);font-stretch:108%;font-size:var(--fs-sm);font-weight:600;color:var(--muted);margin-bottom:14px}
.mega__grid{display:grid;gap:8px}
.mega__grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.mega__grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mega__grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mega__a{display:flex;align-items:center;gap:12px;min-height:60px;padding:12px 14px;border-radius:var(--r-m);background:var(--paper);font-weight:600;font-size:.9375rem;line-height:1.25;cursor:pointer;transition:background-color var(--t) var(--ease),color var(--t) var(--ease)}
.mega__a .i{color:var(--blue);width:22px;height:22px}
.mega__a:hover{background:var(--blue);color:var(--white)}
.mega__a:hover .i,.mega__a:hover small{color:var(--white)}
.mega__a small{display:block;font-weight:400;font-size:var(--fs-xs);color:var(--muted);margin-top:2px;transition:color var(--t) var(--ease)}
.hdr__toggle{display:none;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--r-s);color:var(--ink);cursor:pointer}
.hdr__toggle:hover{background:var(--blue-50);color:var(--blue)}

/* mobile drawer (opens through #drawer without script) */
.drawer{position:fixed;inset:0;z-index:var(--z-drawer);background:var(--white);padding:0 var(--gut) var(--s6);overflow-y:auto;visibility:hidden;opacity:0;transform:translateX(16px);transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility 0s linear var(--t)}
.drawer:target,.drawer.is-open{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.drawer__head{display:flex;align-items:center;justify-content:space-between;height:var(--hdr-h);border-bottom:1px solid var(--line);margin-bottom:var(--s3)}
.drawer__head img{height:36px;width:auto}
.drawer .hdr__toggle{display:inline-flex}
.drawer__link{display:flex;align-items:center;justify-content:space-between;min-height:56px;font-family:var(--font-display);font-stretch:110%;font-size:1.25rem;font-weight:620;border-bottom:1px solid var(--line);cursor:pointer;list-style:none}
.drawer__link::-webkit-details-marker{display:none}
.drawer details[open]>summary .i{transform:rotate(180deg)}
.drawer__sub{padding:8px 0 12px}
.drawer__sub a{display:flex;align-items:center;min-height:44px;padding:4px 0 4px 14px;border-left:3px solid var(--blue-100);color:var(--ink)}
.drawer__group{font-size:var(--fs-sm);font-weight:600;color:var(--muted);margin:12px 0 4px}
.drawer>.btn{margin-top:var(--s5);width:100%}
@media (max-width:1139px){
  .nav{display:none}
  .hdr__toggle{display:inline-flex}
  :root{--hdr-h:64px}
  .hdr__brand img{height:34px}
}
@media (min-width:1140px){.drawer{display:none}}
@media (min-width:1140px) and (max-width:1279px){.nav__link{padding-inline:8px;font-size:.875rem}.nav__item--cta{margin-left:4px}}

/* ---------------------------------------------------------------- bands (page sections; alternate light and dark) */
.band{padding-block:var(--band);background:var(--white);color:var(--ink)}
.band--paper{background:var(--paper)}
.band--navy{background:var(--navy);color:var(--on-dark)}
.band--deep{background:var(--navy-deep);color:var(--on-dark)}
.band--blue{background:var(--blue);color:var(--white)}
.band--blue .lede{color:rgba(255,255,255,.9)}
.band--blue .signal{color:var(--white)}
.band--blue :focus-visible{outline-color:var(--white)}
.band--tight{padding-block:clamp(36px,4vw,56px)}
.clients-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s6)}
@media (max-width:719px){.clients-row{grid-template-columns:1fr;gap:var(--s4)}}
.band--flush-top{padding-top:0}
.band__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--s4) var(--s6);margin-bottom:clamp(28px,3.4vw,44px)}
.band__head .lede{margin-top:14px}
.band__head>.link,.band__head>.btn{justify-self:end}
.band__head--center{grid-template-columns:1fr;justify-items:center;text-align:center}
@media (max-width:719px){.band__head{grid-template-columns:1fr}.band__head>.link,.band__head>.btn{justify-self:start}}
/* the logo's striped signal line, as a divider and as hero texture */
.signal{display:block;height:10px;width:clamp(72px,9vw,120px);margin-bottom:var(--s5);color:var(--blue);background:repeating-linear-gradient(90deg,currentColor 0 6px,transparent 6px 9px,currentColor 9px 13px,transparent 13px 16px,currentColor 16px 18px,transparent 18px 22px)}
.band--navy .signal,.band--deep .signal,.hero--navy .signal{color:var(--sky)}
.stripes{position:absolute;pointer-events:none;color:var(--blue)}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,72px);align-items:start}
.split--wide-left{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split--wide-right{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.split--center{align-items:center}
@media (max-width:899px){.split,.split--wide-left,.split--wide-right{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- breadcrumb */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--s5)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color var(--t) var(--ease),color var(--t) var(--ease)}
.crumbs a:hover{color:var(--blue);text-decoration-color:currentColor}
.crumbs span[aria-current]{color:var(--ink);font-weight:500}
.hero--navy .crumbs{color:var(--on-dark-muted)}
.hero--navy .crumbs a:hover{color:var(--white)}
.hero--navy .crumbs span[aria-current]{color:var(--white)}

/* ---------------------------------------------------------------- heroes (variants so pages differ) */
.hero{position:relative;overflow:hidden;padding-block:clamp(40px,5vw,72px) clamp(48px,6vw,88px);background:var(--paper)}
.hero--navy{background:var(--navy);color:var(--on-dark)}
.hero--white{background:var(--white)}
.hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center}
.hero__grid--even{grid-template-columns:repeat(2,minmax(0,1fr))}
.hero__copy .lede{margin-top:var(--s5)}
.hero__copy .btn-row{margin-top:var(--s6)}
.hero__tag{font-family:var(--font-display);font-stretch:108%;font-weight:600;font-size:var(--fs-lg);color:var(--blue);margin-top:var(--s4)}
.hero--navy .hero__tag{color:var(--sky)}
.hero__aside{position:relative;min-width:0}
.hero__facts{display:grid;gap:10px}
.hero__fact{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-m);background:var(--navy-700);color:var(--on-dark)}
.hero--paper .hero__fact,.hero--white .hero__fact{background:var(--white);color:var(--ink)}
.hero__fact .i{color:var(--sky);margin-top:2px}
.hero--paper .hero__fact .i,.hero--white .hero__fact .i{color:var(--blue)}
.hero__fact strong{display:block;font-family:var(--font-display);font-stretch:108%;font-weight:620;line-height:1.25}
.hero__fact span{font-size:var(--fs-sm);color:var(--on-dark-muted)}
.hero--paper .hero__fact span,.hero--white .hero__fact span{color:var(--muted)}
.hero__panel{padding:clamp(16px,2vw,24px);border-radius:var(--r-l);background:var(--navy-deep)}
.hero__panel-title{font-family:var(--font-display);font-stretch:108%;font-weight:620;font-size:var(--fs-sm);color:var(--sky);margin-bottom:14px}
.hero--navy .hero__panel .steps li{background:var(--navy-700)}
.hero--navy .hero__panel .steps li::before,.hero--navy .hero__panel .steps .i{color:var(--sky)}
.hero--navy .hero__panel .steps li::after{display:none}
.hero__panel .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
.hero__panel .steps strong{font-size:var(--fs-sm)}
@media (max-width:419px){.hero__panel .steps{grid-template-columns:repeat(2,minmax(0,1fr))}.hero__panel .steps li:last-child:nth-child(odd){grid-column:span 2}}
.hero__jump{padding:14px;border-radius:var(--r-l);background:var(--navy-deep)}
.hero__jump ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.hero__jump a{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px;border-radius:var(--r-s);font-size:var(--fs-xs);font-weight:500;line-height:1.25;color:var(--on-dark);cursor:pointer;transition:background-color var(--t) var(--ease)}
.hero__jump a:hover{background:var(--navy-600)}
.hero__jump b{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:8px;background:var(--navy-600);color:var(--sky);font-family:var(--font-display);font-weight:700}
@media (max-width:899px){.hero__jump{display:none}}
.hero__quad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hero__quad li{display:flex;flex-direction:column;gap:18px;padding:22px;border-radius:var(--r-l);background:var(--white);color:var(--ink)}
.hero__quad li:nth-child(1){background:var(--blue);color:var(--white)}
.hero__quad li:nth-child(4){background:var(--navy);color:var(--white)}
.hero__quad .i{width:28px;height:28px;color:var(--blue)}
.hero__quad li:nth-child(1) .i{color:var(--white)}
.hero__quad li:nth-child(4) .i{color:var(--sky)}
.hero__quad strong{font-family:var(--font-display);font-stretch:118%;font-weight:700;font-size:clamp(1.375rem,2.4vw,2rem);letter-spacing:-.02em;line-height:1}
.deflist{display:grid;gap:2px;font-size:var(--fs-sm);margin-top:4px}
.deflist dt{font-weight:600;color:var(--muted);margin-top:8px}
.deflist dd{line-height:1.45}
.hero__stripes{right:-40px;top:-30px;width:min(46vw,560px);opacity:.16}
.hero--navy .hero__stripes{color:var(--sky);opacity:.12}
.hero--paper .hero__stripes,.hero--white .hero__stripes{opacity:.055;width:min(40vw,480px);top:-20px}
.glance{display:grid;gap:0;margin-top:var(--s5);border-radius:var(--r-m);background:var(--paper);font-size:var(--fs-sm)}
.band--paper .glance{background:var(--white)}
.glance>div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.glance>div:last-child{border-bottom:0}
.glance dt{font-weight:600;color:var(--muted)}
.glance dd{line-height:1.5}
@media (max-width:479px){.glance>div{grid-template-columns:1fr;gap:2px}}
.hero__plate{display:grid;place-items:center;gap:var(--s4);min-height:260px;padding:var(--s6);border-radius:var(--r-l);background:var(--white);text-align:center}
.hero__plate .plogo{color:var(--navy)}
.hero__plate-name{font-family:var(--font-display);font-stretch:118%;font-weight:700;font-size:clamp(1.75rem,3vw,2.5rem);letter-spacing:-.02em;color:var(--navy)}
.hero__plate small{font-size:var(--fs-sm);color:var(--muted)}
@media (max-width:899px){.hero__grid,.hero__grid--even{grid-template-columns:1fr}.hero__stripes{width:78vw;opacity:.1}}
/* one orchestrated load moment: the hero copy rises once */
@media (prefers-reduced-motion:no-preference){
  .js .hero__copy>*{animation:rise var(--t-slow) var(--ease) both}
  .js .hero__copy>*:nth-child(2){animation-delay:60ms}.js .hero__copy>*:nth-child(3){animation-delay:120ms}
  .js .hero__copy>*:nth-child(4){animation-delay:180ms}.js .hero__copy>*:nth-child(5){animation-delay:240ms}
  .js .hero__aside{animation:rise 420ms var(--ease) 160ms both}
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- one-colour logos (build.py logo(), ds.plogo()) */
.plogo{display:inline-block;width:var(--lw);height:var(--lh);background:currentColor;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}

/* ---------------------------------------------------------------- bento grid and tiles */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.tile{position:relative;display:flex;flex-direction:column;gap:10px;grid-column:span 4;min-width:0;padding:clamp(20px,2.2vw,30px);border-radius:var(--r-l);background:var(--paper);color:var(--ink);overflow:hidden}
.band--paper .tile:not([class*="tile--"]){background:var(--white)}
.tile--white{background:var(--white)}
.tile--paper{background:var(--paper)}
.tile--line{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.tile--navy{background:var(--navy);color:var(--on-dark)}
.tile--blue{background:var(--blue);color:var(--white)}
.tile--tint{background:var(--blue-50)}
.band--navy .tile:not([class*="tile--"]),.band--deep .tile:not([class*="tile--"]){background:var(--navy-700);color:var(--on-dark)}
.band--navy .tile--blue,.band--deep .tile--blue{background:var(--blue);color:var(--white)}
.band--navy .tile--line,.band--deep .tile--line{background:transparent;box-shadow:inset 0 0 0 1px var(--navy-line)}
.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-6{grid-column:span 6}
.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-9{grid-column:span 9}.span-12{grid-column:span 12}
.row-2{grid-row:span 2}
@media (max-width:1023px){.bento>.tile,.bento>.span-3,.bento>.span-4,.bento>.span-5{grid-column:span 6}.bento>.span-7,.bento>.span-8,.bento>.span-9,.bento>.span-12{grid-column:span 12}}
@media (max-width:639px){.bento>.tile,.bento>[class*=span-]{grid-column:span 12}.row-2{grid-row:auto}}
/* tablet (two columns): a tile that would sit alone in its row takes the whole row. First rule: an odd number of half-width
   tiles; second: one full-width tile first, then an odd number of half-width ones; third and fourth: a half-width tile
   between full-width ones (or at the start or end beside one). */
@media (min-width:640px) and (max-width:1023px){
  .bento:not(:has(>.span-7,>.span-8,>.span-9,>.span-12,>.row-2))>.tile:last-child:nth-child(odd){grid-column:span 12}
  .bento:has(>:first-child:is(.span-7,.span-8,.span-9,.span-12)):not(:has(>:not(:first-child):is(.span-7,.span-8,.span-9,.span-12),>.row-2))>.tile:last-child:nth-child(even){grid-column:span 12}
  .bento>:is(.span-7,.span-8,.span-9,.span-12)+.tile:not(.span-7,.span-8,.span-9,.span-12,.row-2):is(:last-child,:has(+ :is(.span-7,.span-8,.span-9,.span-12))){grid-column:span 12}
  .bento>.tile:first-child:not(.span-7,.span-8,.span-9,.span-12,.row-2):has(+ :is(.span-7,.span-8,.span-9,.span-12)){grid-column:span 12}
}
.tile__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--blue-50);color:var(--blue);margin-bottom:6px;flex:none}
.tile--navy .tile__icon,.band--navy .tile__icon,.band--deep .tile__icon{background:var(--navy-600);color:var(--sky)}
.tile--blue .tile__icon{background:rgba(255,255,255,.16);color:var(--white)}
.tile--tint .tile__icon{background:var(--white)}
.tile__title{font-family:var(--font-display);font-stretch:112%;font-size:var(--fs-h3);font-weight:620;line-height:1.2;letter-spacing:-.012em}
.tile__title--sm{font-size:1.125rem}
.tile__text{color:var(--muted);font-size:var(--fs-sm);line-height:1.55}
.tile--navy .tile__text,.band--navy .tile__text,.band--deep .tile__text{color:var(--on-dark-muted)}
.tile--blue .tile__text{color:rgba(255,255,255,.88)}
.tile__big{font-family:var(--font-display);font-stretch:120%;font-weight:720;font-size:clamp(3rem,2rem + 4.6vw,5.5rem);line-height:.92;letter-spacing:-.04em}
.tile__foot{margin-top:auto;padding-top:10px}
a.tile,.tile--link{cursor:pointer;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),background-color var(--t) var(--ease)}
a.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
a.tile .tile__go{position:absolute;right:18px;top:18px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--white);color:var(--blue);transition:background-color var(--t) var(--ease),color var(--t) var(--ease)}
.band--paper a.tile .tile__go{background:var(--paper)}
a.tile:hover .tile__go{background:var(--blue);color:var(--white)}
a.tile .tile__go .i{width:18px;height:18px}
a.tile--navy .tile__go{background:var(--navy-600);color:var(--white)}

/* ticked lists, chips */
.ticks{display:grid;gap:8px}
.ticks li{position:relative;padding-left:28px;line-height:1.45}
.ticks li::before{content:"";position:absolute;left:2px;top:.38em;width:14px;height:8px;border-left:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(-45deg);border-radius:1px}
.band--navy .ticks li::before,.band--deep .ticks li::before,.tile--navy .ticks li::before{border-color:var(--sky)}
.tile--blue .ticks li::before{border-color:var(--white)}
.ticks--2{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s5)}
.ticks--3{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s5)}
@media (max-width:899px){.ticks--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:559px){.ticks--2,.ticks--3{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li,.chip{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border-radius:var(--r-pill);background:var(--white);box-shadow:inset 0 0 0 1px var(--line);font-size:var(--fs-sm);font-weight:500;line-height:1.25}
.band--paper .chips li,.band--paper .chip{background:var(--white)}
.tile .chips li{background:var(--white)}
.band--paper .tile .chips li,.tile--white .chips li{background:var(--paper);box-shadow:none}
.band--navy .chips li,.band--deep .chips li,.tile--navy .chips li{background:var(--navy-600);box-shadow:none;color:var(--on-dark)}
.chips a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:var(--r-pill);background:var(--white);box-shadow:inset 0 0 0 1px var(--line);font-size:var(--fs-sm);font-weight:600;color:var(--ink);cursor:pointer;transition:background-color var(--t) var(--ease),color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.chips a:hover{background:var(--blue);color:var(--white);box-shadow:none}
.chips--links li{padding:0;background:none!important;box-shadow:none!important;min-height:0}

/* ---------------------------------------------------------------- card families */
.cards{display:grid;gap:clamp(12px,1.4vw,18px);grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
.cards--2{--cols:2}.cards--3{--cols:3}.cards--4{--cols:4}.cards--5{--cols:5}.cards--6{--cols:6}
@media (max-width:1099px){.cards--5,.cards--6{--cols:3}.cards--4{--cols:2}}
@media (max-width:799px){.cards--3,.cards--5,.cards--6{--cols:2}}
@media (max-width:559px){.cards{--cols:1!important}.cards--6,.cards--logos{--cols:2!important}}
/* a last card that would sit alone in a two-column row takes the row; in three columns the last row is filled */
@media (min-width:560px) and (max-width:799px){.cards--3>:last-child:nth-child(odd),.cards--5:not(.cards--logos)>:last-child:nth-child(odd),.cards--6>:last-child:nth-child(odd){grid-column:span 2}}
@media (min-width:560px) and (max-width:1099px){.cards--4>:last-child:nth-child(odd){grid-column:span 2}}
@media (min-width:800px) and (max-width:1099px){.cards--5:not(.cards--logos)>:last-child:nth-child(3n+1),.cards--6>:last-child:nth-child(3n+1){grid-column:span 3}.cards--5:not(.cards--logos)>:last-child:nth-child(3n+2),.cards--6>:last-child:nth-child(3n+2){grid-column:span 2}}
@media (max-width:559px){.cards--6>:last-child:nth-child(odd),.cards--logos>:last-child:nth-child(odd){grid-column:span 2}}
.card{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;padding:22px;border-radius:var(--r-m);background:var(--paper);color:var(--ink)}
.band--paper .card{background:var(--white)}
.band--navy .card,.band--deep .card{background:var(--navy-700);color:var(--on-dark)}
a.card{cursor:pointer;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
a.card:hover .card__title{color:var(--blue)}
.band--navy a.card:hover .card__title,.band--deep a.card:hover .card__title{color:var(--sky)}
.card__kicker{font-size:var(--fs-xs);font-weight:600;color:var(--muted);line-height:1.3}
.band--navy .card__kicker,.band--deep .card__kicker{color:var(--on-dark-muted)}
.card__title{font-family:var(--font-display);font-stretch:110%;font-weight:620;font-size:1.125rem;line-height:1.25;letter-spacing:-.008em;transition:color var(--t) var(--ease)}
.card__text{font-size:var(--fs-sm);color:var(--muted);line-height:1.5}
.band--navy .card__text,.band--deep .card__text{color:var(--on-dark-muted)}
.card__icon{color:var(--blue);margin-bottom:4px}
.band--navy .card__icon,.band--deep .card__icon{color:var(--sky)}
.card__more{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:600;color:var(--blue)}
.band--navy .card__more,.band--deep .card__more{color:var(--sky)}
.card__more .i{width:16px;height:16px;transition:transform var(--t) var(--ease)}
a.card:hover .card__more .i{transform:translateX(4px)}
.card--tech{min-height:176px}
.card__logo{display:flex;align-items:center;min-height:52px;color:var(--navy)}
.band--navy .card__logo,.band--deep .card__logo{color:var(--white)}
.card__word{font-family:var(--font-display);font-stretch:120%;font-weight:720;font-size:1.375rem;letter-spacing:-.02em;min-height:52px;display:flex;align-items:center}
.card .ticks{font-size:var(--fs-sm);margin-top:6px}
.band--navy .card .ticks,.band--deep .card .ticks{color:var(--on-dark-muted)}
.card--mini{flex-direction:row;align-items:center;gap:12px;padding:14px 16px;min-height:64px}
.card--mini .card__icon{margin:0}
.card--mini .card__title{font-size:1rem}
.card--num{padding-top:20px}
.card__num{font-family:var(--font-display);font-stretch:118%;font-weight:700;font-size:var(--fs-sm);color:var(--blue)}

/* ---------------------------------------------------------------- capability matrix (a real table; scrolls inside its frame on phones) */
.matrix{border-radius:var(--r-l);background:var(--white);box-shadow:inset 0 0 0 1px var(--line);overflow:auto;-webkit-overflow-scrolling:touch}
.band--paper .matrix{box-shadow:none}
.matrix table{width:100%;min-width:var(--matrix-min,720px);border-collapse:collapse;font-size:var(--fs-sm)}
.matrix th,.matrix td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.matrix tr:last-child>*{border-bottom:0}
.matrix thead th{position:sticky;top:0;background:var(--navy);color:var(--on-dark);font-family:var(--font-display);font-stretch:108%;font-weight:600;font-size:var(--fs-xs);line-height:1.25;vertical-align:bottom}
.matrix tbody th{font-weight:600;color:var(--ink);min-width:200px}
.matrix tbody tr:hover>*{background:var(--blue-50)}
.matrix a{color:var(--blue);font-weight:600;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color var(--t) var(--ease)}
.matrix a:hover{text-decoration-color:currentColor}
.matrix .dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--blue)}
.matrix td.c{text-align:center;vertical-align:middle}
.matrix thead th.c{text-align:center}
.matrix__letter{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--blue-50);color:var(--blue);font-family:var(--font-display);font-weight:700;font-size:var(--fs-xs);margin-right:8px}

/* ---------------------------------------------------------------- sticky section index beside long content */
.with-index{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(24px,3.5vw,56px);align-items:start}
.index{position:sticky;top:calc(var(--hdr-h) + 20px);max-height:calc(100vh - var(--hdr-h) - 40px);overflow:auto;padding:18px;border-radius:var(--r-l);background:var(--paper)}
.band--paper .index{background:var(--white)}
.index__title{font-family:var(--font-display);font-stretch:108%;font-weight:620;font-size:var(--fs-sm);margin-bottom:10px;color:var(--muted)}
.index a{display:flex;gap:10px;align-items:baseline;min-height:36px;padding:7px 10px;border-radius:var(--r-s);font-size:var(--fs-sm);line-height:1.3;color:var(--ink);cursor:pointer;transition:background-color var(--t) var(--ease),color var(--t) var(--ease)}
.index a b{font-family:var(--font-display);font-weight:700;color:var(--blue);min-width:1.2em}
.index a:hover{background:var(--blue-50);color:var(--blue)}
.index a[aria-current=true]{background:var(--blue);color:var(--white)}
.index a[aria-current=true] b{color:var(--white)}
@media (max-width:1023px){
  .with-index{grid-template-columns:1fr}
  .index{top:var(--hdr-h);z-index:var(--z-index);max-height:none;padding:8px var(--gut);margin-inline:calc(-1*var(--gut));border-radius:0;background:var(--white);border-bottom:1px solid var(--line)}
  .index__title{display:none}
  .index ol,.index ul{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .index ol::-webkit-scrollbar,.index ul::-webkit-scrollbar{display:none}
  .index a{white-space:nowrap;min-height:44px;align-items:center;background:var(--paper);padding-inline:14px}
}

/* capability group (a lettered area with its cover list and Cinthamani's own text) */
.groups{display:grid;gap:clamp(12px,1.4vw,18px)}
.group{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,2.6vw,40px);padding:clamp(20px,2.4vw,32px);border-radius:var(--r-l);background:var(--paper);scroll-margin-top:calc(var(--hdr-h) + 24px)}
.band--paper .group{background:var(--white)}
.group--solo{grid-template-columns:1fr}
.group__head{display:flex;gap:14px;align-items:flex-start;margin-bottom:var(--s4)}
.group__letter{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:var(--blue);color:var(--white);font-family:var(--font-display);font-stretch:118%;font-weight:720;font-size:1.25rem}
.group__icon{color:var(--blue);margin-left:auto;flex:none}
.group__sub{font-family:var(--font-display);font-stretch:108%;font-weight:620;font-size:1rem;margin:1.1em 0 .35em}
.group__body>.group__sub:first-child{margin-top:0}
.group__body p{font-size:var(--fs-sm);line-height:1.6;color:var(--ink)}
.group__body p + p{margin-top:.8em}
.group__tech{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line);font-size:var(--fs-sm)}
.group__tech strong{color:var(--muted);font-weight:600}
.group__note{margin-top:var(--s4);padding:16px 18px;border-radius:var(--r-m);background:var(--blue-50)}
.group__note .h4{margin-bottom:8px}
@media (max-width:899px){.group{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- tabs (radio inputs: keyboard operable, no script) */
.tabs{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(14px,2vw,28px);align-items:start}
.tabs>input{position:absolute;opacity:0;pointer-events:none}
.tabs__list{display:grid;gap:4px;padding:10px;border-radius:var(--r-l);background:var(--paper)}
.band--paper .tabs__list{background:var(--white)}
.band--navy .tabs__list,.band--deep .tabs__list{background:var(--navy-700)}
.tabs__tab{display:flex;align-items:center;gap:10px;min-height:46px;padding:9px 14px;border-radius:var(--r-s);font-size:var(--fs-sm);font-weight:600;line-height:1.25;cursor:pointer;transition:background-color var(--t) var(--ease),color var(--t) var(--ease)}
.tabs__tab .i{width:20px;height:20px;color:var(--blue)}
.band--navy .tabs__tab .i,.band--deep .tabs__tab .i{color:var(--sky)}
.tabs__tab:hover{background:var(--blue-50);color:var(--blue)}
.band--navy .tabs__tab:hover,.band--deep .tabs__tab:hover{background:var(--navy-600);color:var(--white)}
.tabs__panel{display:none;min-width:0;padding:clamp(22px,2.6vw,36px);border-radius:var(--r-l);background:var(--paper)}
.band--paper .tabs__panel{background:var(--white)}
.band--navy .tabs__panel,.band--deep .tabs__panel{background:var(--navy-700)}
.tabs__panel>*+*{margin-top:var(--s5)}
.tabs>input:nth-of-type(1):checked~.tabs__panels>.tabs__panel:nth-child(1),.tabs>input:nth-of-type(2):checked~.tabs__panels>.tabs__panel:nth-child(2),
.tabs>input:nth-of-type(3):checked~.tabs__panels>.tabs__panel:nth-child(3),.tabs>input:nth-of-type(4):checked~.tabs__panels>.tabs__panel:nth-child(4),
.tabs>input:nth-of-type(5):checked~.tabs__panels>.tabs__panel:nth-child(5),.tabs>input:nth-of-type(6):checked~.tabs__panels>.tabs__panel:nth-child(6),
.tabs>input:nth-of-type(7):checked~.tabs__panels>.tabs__panel:nth-child(7),.tabs>input:nth-of-type(8):checked~.tabs__panels>.tabs__panel:nth-child(8),
.tabs>input:nth-of-type(9):checked~.tabs__panels>.tabs__panel:nth-child(9),.tabs>input:nth-of-type(10):checked~.tabs__panels>.tabs__panel:nth-child(10),
.tabs>input:nth-of-type(11):checked~.tabs__panels>.tabs__panel:nth-child(11),.tabs>input:nth-of-type(12):checked~.tabs__panels>.tabs__panel:nth-child(12){display:block}
.tabs>input:nth-of-type(1):checked~.tabs__list>.tabs__tab:nth-child(1),.tabs>input:nth-of-type(2):checked~.tabs__list>.tabs__tab:nth-child(2),
.tabs>input:nth-of-type(3):checked~.tabs__list>.tabs__tab:nth-child(3),.tabs>input:nth-of-type(4):checked~.tabs__list>.tabs__tab:nth-child(4),
.tabs>input:nth-of-type(5):checked~.tabs__list>.tabs__tab:nth-child(5),.tabs>input:nth-of-type(6):checked~.tabs__list>.tabs__tab:nth-child(6),
.tabs>input:nth-of-type(7):checked~.tabs__list>.tabs__tab:nth-child(7),.tabs>input:nth-of-type(8):checked~.tabs__list>.tabs__tab:nth-child(8),
.tabs>input:nth-of-type(9):checked~.tabs__list>.tabs__tab:nth-child(9),.tabs>input:nth-of-type(10):checked~.tabs__list>.tabs__tab:nth-child(10),
.tabs>input:nth-of-type(11):checked~.tabs__list>.tabs__tab:nth-child(11),.tabs>input:nth-of-type(12):checked~.tabs__list>.tabs__tab:nth-child(12){background:var(--blue);color:var(--white)}
.tabs>input:nth-of-type(1):checked~.tabs__list>.tabs__tab:nth-child(1) .i,.tabs>input:nth-of-type(2):checked~.tabs__list>.tabs__tab:nth-child(2) .i,
.tabs>input:nth-of-type(3):checked~.tabs__list>.tabs__tab:nth-child(3) .i,.tabs>input:nth-of-type(4):checked~.tabs__list>.tabs__tab:nth-child(4) .i,
.tabs>input:nth-of-type(5):checked~.tabs__list>.tabs__tab:nth-child(5) .i,.tabs>input:nth-of-type(6):checked~.tabs__list>.tabs__tab:nth-child(6) .i,
.tabs>input:nth-of-type(7):checked~.tabs__list>.tabs__tab:nth-child(7) .i,.tabs>input:nth-of-type(8):checked~.tabs__list>.tabs__tab:nth-child(8) .i,
.tabs>input:nth-of-type(9):checked~.tabs__list>.tabs__tab:nth-child(9) .i,.tabs>input:nth-of-type(10):checked~.tabs__list>.tabs__tab:nth-child(10) .i,
.tabs>input:nth-of-type(11):checked~.tabs__list>.tabs__tab:nth-child(11) .i,.tabs>input:nth-of-type(12):checked~.tabs__list>.tabs__tab:nth-child(12) .i{color:var(--white)}
.tabs>input:nth-of-type(1):focus-visible~.tabs__list>.tabs__tab:nth-child(1),.tabs>input:nth-of-type(2):focus-visible~.tabs__list>.tabs__tab:nth-child(2),
.tabs>input:nth-of-type(3):focus-visible~.tabs__list>.tabs__tab:nth-child(3),.tabs>input:nth-of-type(4):focus-visible~.tabs__list>.tabs__tab:nth-child(4),
.tabs>input:nth-of-type(5):focus-visible~.tabs__list>.tabs__tab:nth-child(5),.tabs>input:nth-of-type(6):focus-visible~.tabs__list>.tabs__tab:nth-child(6),
.tabs>input:nth-of-type(7):focus-visible~.tabs__list>.tabs__tab:nth-child(7),.tabs>input:nth-of-type(8):focus-visible~.tabs__list>.tabs__tab:nth-child(8),
.tabs>input:nth-of-type(9):focus-visible~.tabs__list>.tabs__tab:nth-child(9),.tabs>input:nth-of-type(10):focus-visible~.tabs__list>.tabs__tab:nth-child(10),
.tabs>input:nth-of-type(11):focus-visible~.tabs__list>.tabs__tab:nth-child(11),.tabs>input:nth-of-type(12):focus-visible~.tabs__list>.tabs__tab:nth-child(12){outline:3px solid var(--blue);outline-offset:2px}
.band--navy .tabs>input:focus-visible~.tabs__list>.tabs__tab,.band--deep .tabs>input:focus-visible~.tabs__list>.tabs__tab{outline-color:var(--white)}
.tabs--top{grid-template-columns:1fr}
.tabs--top .tabs__list{display:flex;flex-wrap:wrap}
@media (max-width:899px){
  .tabs{grid-template-columns:1fr}
  .tabs__list{display:flex;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1*var(--gut));padding-inline:var(--gut);border-radius:0;background:transparent!important}
  .tabs__list::-webkit-scrollbar{display:none}
  .tabs__tab{flex:none;white-space:nowrap;background:var(--paper)}
  .band--paper .tabs__tab{background:var(--white)}
  .band--navy .tabs__tab,.band--deep .tabs__tab{background:var(--navy-700)}
}

/* ---------------------------------------------------------------- accordion and FAQ (native details) */
.acc{display:grid;gap:10px}
.acc details{border-radius:var(--r-m);background:var(--paper)}
.band--paper .acc details{background:var(--white)}
.band--navy .acc details,.band--deep .acc details{background:var(--navy-700)}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:60px;padding:14px 20px;font-family:var(--font-display);font-stretch:108%;font-weight:620;font-size:1.0625rem;line-height:1.3;cursor:pointer;list-style:none;border-radius:var(--r-m);transition:color var(--t) var(--ease)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--blue)}
.band--navy .acc summary:hover,.band--deep .acc summary:hover{color:var(--sky)}
.acc summary .i{color:var(--blue);transition:transform var(--t) var(--ease)}
.band--navy .acc summary .i,.band--deep .acc summary .i{color:var(--sky)}
.acc details[open] summary .i{transform:rotate(45deg)}
.acc__body{padding:0 20px 20px;max-width:76ch;color:var(--muted)}
.band--navy .acc__body,.band--deep .acc__body{color:var(--on-dark-muted)}
.acc__body>*+*{margin-top:.8em}

/* ---------------------------------------------------------------- process and lifecycle strip (a real sequence: ordered list) */
.steps{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:10px;counter-reset:step}
.steps li{position:relative;counter-increment:step;display:flex;flex-direction:column;gap:6px;padding:18px 16px 18px;border-radius:var(--r-m);background:var(--paper);min-width:0}
.band--paper .steps li{background:var(--white)}
.band--navy .steps li,.band--deep .steps li{background:var(--navy-700)}
.steps li::before{content:counter(step,decimal-leading-zero);font-family:var(--font-display);font-stretch:118%;font-weight:700;font-size:var(--fs-sm);color:var(--blue)}
.band--navy .steps li::before,.band--deep .steps li::before{color:var(--sky)}
.steps li::after{content:"";position:absolute;right:-10px;top:27px;width:10px;height:2px;background:repeating-linear-gradient(90deg,var(--blue) 0 3px,transparent 3px 5px)}
.band--navy .steps li::after,.band--deep .steps li::after{background:repeating-linear-gradient(90deg,var(--sky) 0 3px,transparent 3px 5px)}
.steps li:last-child::after{display:none}
.steps strong{font-family:var(--font-display);font-stretch:108%;font-weight:620;line-height:1.25;overflow-wrap:anywhere}
.steps span{font-size:var(--fs-sm);color:var(--muted);line-height:1.45}
.band--navy .steps span,.band--deep .steps span{color:var(--on-dark-muted)}
.steps .i{color:var(--blue);margin-bottom:2px}
.band--navy .steps .i,.band--deep .steps .i{color:var(--sky)}
.steps--life{grid-template-columns:repeat(5,minmax(0,1fr))}
.steps--life li:nth-child(5)::after{display:none}
.steps--life li:last-child{grid-column:span 2}
@media (max-width:1099px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}.steps li::after{display:none}.steps--life li:last-child{grid-column:auto}}
@media (max-width:559px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.steps--life li:last-child{grid-column:span 2}}

/* ---------------------------------------------------------------- diagrams (tools/diagrams.py: original SVG, labels from the brief) */
.diagram{padding:clamp(16px,2.4vw,32px);border-radius:var(--r-l);background:var(--navy);color:var(--on-dark);overflow:hidden}
.diagram--light{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.band--paper .diagram--light{box-shadow:none}
.diagram svg{display:block;width:100%;height:auto;font-family:var(--font-text)}
.diagram__tall{display:none!important}
@media (max-width:1023px){.diagram__wide{display:none!important}.diagram__tall{display:block!important;max-width:460px;margin-inline:auto}}
.diagram--stack .diagram__wide{display:none!important}
.diagram--stack .diagram__tall{display:block!important;max-width:460px;margin-inline:auto}
.diagram figcaption{margin-top:var(--s4);font-size:var(--fs-sm);color:var(--on-dark-muted);max-width:80ch}
.diagram--light figcaption{color:var(--muted)}
.dg-node{fill:var(--navy-700);stroke:var(--navy-line);stroke-width:1.25}
.dg-node--key{fill:var(--blue);stroke:var(--blue)}
.dg-stage{fill:none;stroke:var(--navy-line);stroke-width:1.25;stroke-dasharray:3 4}
.dg-text{fill:var(--on-dark);font-size:13px;font-weight:500}
.dg-text--key{fill:var(--white);font-weight:600}
.dg-head{fill:var(--sky);font-family:var(--font-display);font-size:13px;font-weight:650}
.dg-line{fill:none;stroke:var(--sky);stroke-width:2;stroke-dasharray:6 3 3 3 1.5 3}
.dg-arrow{fill:var(--sky)}
.diagram--light .dg-node{fill:var(--paper);stroke:var(--line-strong)}
.diagram--light .dg-node--key{fill:var(--blue);stroke:var(--blue)}
.diagram--light .dg-stage{stroke:var(--line-strong)}
.diagram--light .dg-text{fill:var(--ink)}
.diagram--light .dg-text--key{fill:var(--white)}
.diagram--light .dg-head{fill:var(--blue)}
.diagram--light .dg-line{stroke:var(--blue)}
.diagram--light .dg-arrow{fill:var(--blue)}

/* ---------------------------------------------------------------- client-logo carousel (clients_data.marquee) and partner-logo strip (partners.strip) */
.cmq{display:grid;gap:14px;overflow:hidden;padding-block:4px}
.cmq__row{overflow:hidden}
.cmq__track{display:flex;width:max-content;animation:cmq 46s linear infinite}
.cmq__row--r .cmq__track{animation-direction:reverse}
.cmq:hover .cmq__track,.cmq:focus-within .cmq__track{animation-play-state:paused}
.cmq__set{display:flex;gap:14px;padding-right:14px}
.cmq__card{display:grid;place-items:center;width:clamp(150px,16vw,210px);height:92px;padding:18px 24px;border-radius:var(--r-m);background:var(--white)}
.band--white .cmq__card,.band:not([class*="band--"]) .cmq__card{background:var(--paper)}
.cmq__card img{max-height:52px;width:auto;max-width:100%;object-fit:contain}
@keyframes cmq{to{transform:translateX(-50%)}}
.partner-strip{padding-block:clamp(28px,3.4vw,44px);background:var(--white);border-top:1px solid var(--line)}
.partner-strip .container{width:100%;max-width:calc(var(--max) + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.partner-strip__logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:22px clamp(28px,4vw,56px)}
.partner-strip__logos li{display:flex}
/* the logo files are one-colour marks (white, with transparency): drawn dark grey on the white strip, darker on hover */
.plogo-img{filter:brightness(0) invert(.36);transition:filter var(--t) var(--ease)}
.partner-strip__logos li:hover .plogo-img{filter:brightness(0) invert(.1)}

/* ---------------------------------------------------------------- CTA band and enquiry form */
.cta{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,72px);align-items:start}
.cta--solo{position:relative;grid-template-columns:1fr;justify-items:start}
.cta--solo>div{position:relative}
.cta__stripes{right:0;top:50%;width:min(30vw,340px);transform:translateY(-50%);color:var(--sky);opacity:.16}
.band--blue .cta__stripes{color:var(--white);opacity:.14}
.band--paper .cta__stripes,.band--white .cta__stripes{color:var(--blue);opacity:.07}
@media (max-width:899px){.cta__stripes{display:none}}
.cta__contacts{display:grid;gap:10px;margin-top:var(--s6)}
.cta__contacts a{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-weight:600;color:var(--on-dark)}
.cta__contacts .i{color:var(--sky)}
.cta__contacts a:hover{color:var(--white);text-decoration:underline;text-underline-offset:4px}
@media (max-width:899px){.cta{grid-template-columns:1fr}}
.form{display:grid;gap:16px;padding:clamp(20px,2.6vw,32px);border-radius:var(--r-l);background:var(--white);color:var(--ink);position:relative}
.band--white .form,.band:not([class*="band--"]) .form{background:var(--paper)}
.form h3{font-family:var(--font-display);font-stretch:112%;font-size:var(--fs-h3);font-weight:620;letter-spacing:-.012em}
.form .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:559px){.form .row{grid-template-columns:1fr}}
.field{display:grid;gap:6px;min-width:0}
.field label,.form legend{font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.opt{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:11px 14px;border:1.5px solid var(--line-strong);border-radius:var(--r-s);background:var(--white);font-size:1rem;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.field textarea{min-height:120px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--muted)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-100)}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.form fieldset{border:0;padding:0;margin:0;display:grid;gap:8px}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choices label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1.5px var(--line-strong);font-size:var(--fs-sm);font-weight:500;cursor:pointer;transition:box-shadow var(--t) var(--ease),background-color var(--t) var(--ease)}
.choices label:hover{box-shadow:inset 0 0 0 1.5px var(--blue)}
.choices input{accent-color:var(--blue);width:18px;height:18px}
.form__status{font-size:var(--fs-sm);font-weight:600;color:var(--ink);min-height:1.4em}
.form .btn{justify-self:start}

/* ---------------------------------------------------------------- footer */
.ftr{background:var(--navy-deep);color:var(--on-dark-muted);padding-block:clamp(48px,6vw,80px) var(--s6);font-size:var(--fs-sm)}
.ftr__top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,44px)}
.ftr__brand img{width:auto;height:46px;margin-bottom:var(--s4)}
.ftr__brand p{max-width:30ch}
.ftr__line{margin-top:var(--s4);font-family:var(--font-display);font-stretch:112%;font-weight:620;color:var(--white);font-size:1.0625rem;line-height:1.3}
.ftr__h{font-family:var(--font-display);font-stretch:108%;font-size:var(--fs-sm);font-weight:620;color:var(--white);margin-bottom:10px}
.ftr__sub{font-weight:600;color:var(--on-dark);margin:14px 0 4px;font-size:var(--fs-xs)}
.ftr__sub:first-of-type{margin-top:0}
.ftr a{display:inline-flex;align-items:center;min-height:32px;color:var(--on-dark-muted);transition:color var(--t) var(--ease)}
.ftr a:hover{color:var(--white);text-decoration:underline;text-underline-offset:4px}
.ftr__contact{display:grid;gap:12px}
.ftr__contact li{display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.ftr__contact .i{width:18px;height:18px;margin-top:3px;color:var(--sky)}
.ftr__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:clamp(32px,4vw,56px);padding-top:var(--s5);border-top:1px solid var(--navy-line);font-size:var(--fs-xs)}
@media (max-width:1023px){.ftr__top{grid-template-columns:repeat(2,minmax(0,1fr))}.ftr__brand{grid-column:1/-1}}
@media (max-width:559px){.ftr__top{grid-template-columns:1fr}.ftr a{min-height:44px}}

/* ---------------------------------------------------------------- small helpers */
.stack>*+*{margin-top:var(--s5)}
.stack-sm>*+*{margin-top:var(--s3)}
.mt-0{margin-top:0}.mt-4{margin-top:var(--s4)}.mt-5{margin-top:var(--s5)}.mt-6{margin-top:var(--s6)}.mt-7{margin-top:var(--s7)}
.center{text-align:center}
.note{padding:16px 18px;border-radius:var(--r-m);background:var(--blue-50);font-size:var(--fs-sm);color:var(--ink);max-width:80ch}
.band--navy .note,.band--deep .note{background:var(--navy-700);color:var(--on-dark-muted)}
.statement{font-family:var(--font-display);font-stretch:110%;font-weight:560;font-size:clamp(1.25rem,1.05rem + .9vw,1.75rem);line-height:1.3;letter-spacing:-.012em;max-width:34ch;text-wrap:balance}

/* ---------------------------------------------------------------- technology pages (tools/pages_technology.py) */
/* at-a-glance list as one row under a capability bento */
.glance--row{margin-top:clamp(12px,1.4vw,18px)}
@media (min-width:900px){
  .glance--row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .glance--row>div{grid-template-columns:1fr;gap:4px;padding:16px 20px;border-bottom:0;border-right:1px solid var(--line)}
  .glance--row>div:last-child{border-right:0}
}
/* Spectra Logic: the two application contexts side by side */
.apps{gap:clamp(20px,3vw,40px);align-items:stretch}
.app{display:grid;grid-template-rows:auto 1fr auto;gap:var(--s4)}
.app .diagram{margin:0;height:100%}
.app .h3{display:flex;align-items:center;gap:12px}
.app__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--blue-50);color:var(--blue);flex:none}
.band--paper .app__icon{background:var(--white)}
.app__link .link{min-height:44px}
/* links in the technology matrices: comfortable targets */
.matrix--tech td a,.matrix--tech th a{display:inline-flex;align-items:center;min-height:28px}
.matrix--tech tbody th{min-width:260px}
/* an odd number of tiles in two columns (tablet): the last one takes the full row, so no row is left half empty */
@media (min-width:640px) and (max-width:1023px){.bento--odd>.tile:last-child:nth-child(odd){grid-column:span 12}}

/* ---------------------------------------------------------------- industry pages (tools/pages_industries.py): linked nodes of the solution map */
.dg-link{cursor:pointer}
.dg-link .dg-node{stroke:var(--sky);stroke-width:1.75;transition:fill var(--t) var(--ease)}
.dg-link:hover .dg-node{fill:var(--navy-600)}
.dg-go{fill:none;stroke:var(--sky);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.cc .diagram .dg-link:focus-visible{outline:3px solid var(--white);outline-offset:2px}
.cc .diagram .dg-link:focus-visible .dg-node{stroke:var(--white);stroke-width:3}
.group__letter .i{width:22px;height:22px}
.hero__jump b .i{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){.dg-link .dg-node{transition:none}}
.matrix tbody th a{display:inline-flex;align-items:center;min-height:28px}

/* ---------------------------------------------------------------- company and service pages (tools/pages_company.py) */
/* Services: the sixteen service areas in four lifecycle groups, each a labelled row of four cards */
.svcs{display:grid;gap:clamp(20px,2.6vw,36px)}
.svc{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:var(--s5) clamp(20px,3vw,40px);align-items:start;padding-top:clamp(20px,2.6vw,36px);border-top:2px solid transparent;border-image:repeating-linear-gradient(90deg,var(--line-strong) 0 6px,transparent 6px 10px) 1}
.svc:first-child{padding-top:0;border-top:0}
.svc__range{font-family:var(--font-display);font-stretch:118%;font-weight:700;font-size:var(--fs-sm);color:var(--blue);margin-bottom:6px}
.svc .card{scroll-margin-top:calc(var(--hdr-h) + 24px);min-height:148px}
.svc .card__title{font-size:1.0625rem}
@media (max-width:899px){.svc{grid-template-columns:1fr}}
@media (max-width:559px){.svc .cards{--cols:2!important}.svc .card{padding:16px;min-height:132px}.svc .card__title{font-size:1rem;overflow-wrap:anywhere}}

/* a twelve-step strip in rows of four */
.steps--4 li:nth-child(4n)::after{display:none}
@media (max-width:1099px){.steps--4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:559px){.steps--4{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Projects: category cards are anchors, with one link each */
.card--cat{scroll-margin-top:calc(var(--hdr-h) + 24px);min-height:168px}
.card--cat .card__more{min-height:44px;align-self:flex-start;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color var(--t) var(--ease)}
.card--cat .card__more:hover{text-decoration-color:currentColor}

/* longer reading text */
.prose--lead p{font-size:var(--fs-lg);line-height:1.6}
.card__text--body{font-size:var(--fs-body);color:var(--ink);line-height:1.6}
.tile>p:not([class]){line-height:1.6}
.tile>.prose{max-width:none}

/* About: Our Process, an ordered bento */
.process{counter-reset:proc}
.process>.tile{counter-increment:proc}
.process .tile__title::before{content:counter(proc,decimal-leading-zero);display:block;font-stretch:118%;font-weight:700;font-size:var(--fs-sm);color:var(--sky);margin-bottom:6px;letter-spacing:0}
.process .tile p{color:var(--on-dark-muted);line-height:1.6}

/* Contact: details card in the hero, office tile, map on request */
.ccard{display:grid;gap:10px}
.ccard>div{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:14px;align-items:center;padding:14px 18px;border-radius:var(--r-m);background:var(--white)}
.ccard .i{grid-row:span 2;color:var(--blue)}
.ccard dt{font-size:var(--fs-xs);font-weight:600;color:var(--muted);line-height:1.3}
.ccard dd{font-family:var(--font-display);font-stretch:108%;font-weight:620;line-height:1.3;overflow-wrap:anywhere}
.ccard dd span{font-family:var(--font-text);font-weight:500;font-size:var(--fs-sm)}
.ccard a{display:inline-flex;align-items:center;min-height:32px;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:color var(--t) var(--ease),text-decoration-color var(--t) var(--ease)}
.ccard a:hover{color:var(--blue);text-decoration-color:currentColor}
.office__addr{font-size:var(--fs-lg);line-height:1.5;max-width:22ch}
.office .link{color:var(--sky)}
.mapbox{justify-content:flex-end;min-height:300px}
.mapbox__stripes{position:absolute;right:-60px;top:-70px;width:300px;height:300px;color:var(--blue);opacity:.08;pointer-events:none}
.mapbox__addr{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;font-family:var(--font-display);font-stretch:108%;font-weight:620;font-size:var(--fs-h3);line-height:1.3;max-width:26ch}
.mapbox__addr .i{color:var(--blue);margin-top:4px}
.mapbox .btn-row{position:relative}
.mapbox iframe{display:block;width:100%;height:clamp(300px,36vw,420px);border:0;border-radius:var(--r-m);background:var(--white)}
.mapbox.is-open{padding:clamp(10px,1.2vw,14px);gap:12px}
.mapbox.is-open .mapbox__stripes,.mapbox.is-open .mapbox__addr,.mapbox.is-open [data-map]{display:none}

/* the "This is about" choice of the contact form (markup unchanged from the earlier page) and the CV field */
.form fieldset.interest{display:flex;flex-wrap:wrap;gap:8px}
.form .interest legend{float:left;width:100%;margin-bottom:8px;padding:0}
.form .interest label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1.5px var(--line-strong);font-size:var(--fs-sm);font-weight:500;cursor:pointer;transition:box-shadow var(--t) var(--ease),background-color var(--t) var(--ease)}
.form .interest label:hover{box-shadow:inset 0 0 0 1.5px var(--blue)}
.form .interest label:has(input:checked){background:var(--blue-50);box-shadow:inset 0 0 0 1.5px var(--blue)}
.form .interest input{accent-color:var(--blue);width:18px;height:18px;margin:0}
.field input[type=file]{padding:9px 12px;cursor:pointer}
.field input[type=file]::file-selector-button{margin-right:12px;padding:6px 12px;border:0;border-radius:var(--r-s);background:var(--blue-50);color:var(--blue);font:inherit;font-weight:600;cursor:pointer}

/* Clients: static logo grid */
.cards--logos{--cols:5}
.logo-card{display:grid;gap:10px;justify-items:center;padding:14px 14px 16px;border-radius:var(--r-m);background:var(--paper);text-align:center}
.logo-card__img{display:grid;place-items:center;width:100%;height:112px;padding:18px 20px;border-radius:var(--r-s);background:var(--white)}
.logo-card img{max-height:64px;width:auto;max-width:100%;object-fit:contain}
.logo-card small{font-size:var(--fs-sm);font-weight:600;color:var(--ink);line-height:1.3}

/* Privacy notice and case-study text */
.legal>section{scroll-margin-top:calc(var(--hdr-h) + 24px)}
.legal>section + section{margin-top:var(--s6);padding-top:var(--s6);border-top:1px solid var(--line)}
.legal h2{margin-bottom:10px}
.legal ul{display:grid;gap:10px;list-style:none;padding:0}
.legal li{position:relative;padding-left:22px}
.legal li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--blue)}
.legal figure + figure{margin-top:var(--s4)}

/* ---------------------------------------------------------------- solution sub-pages bm-*, ed-*, av-*, cc-* (tools/pages_subpages.py): the page's path on a navy panel */
.sp-path{padding:clamp(18px,2.2vw,28px);border-radius:var(--r-l);background:var(--navy);color:var(--on-dark)}
.sp-path__title{font-family:var(--font-display);font-stretch:112%;font-weight:640;font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.012em;margin-bottom:var(--s5)}
.sp-path__list{display:grid;counter-reset:sp}
.sp-path__list li{position:relative;counter-increment:sp;display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:14px;align-content:start;min-height:58px;padding-bottom:16px}
.sp-path__list li:last-child{padding-bottom:0;min-height:0}
.sp-path__list li::before{content:counter(sp,decimal-leading-zero);grid-column:1;grid-row:1 / span 3;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--navy-600);color:var(--sky);font-family:var(--font-display);font-stretch:118%;font-weight:700;font-size:var(--fs-xs)}
.sp-path__list li::after{content:"";position:absolute;left:17px;top:40px;bottom:4px;width:2px;background:repeating-linear-gradient(180deg,var(--sky) 0 3px,transparent 3px 6px)}
.sp-path__list li:last-child::after{display:none}
.sp-path__list li>*{grid-column:2}
.sp-path__stage{font-size:var(--fs-xs);font-weight:600;line-height:1.3;color:var(--sky)}
.sp-path__list strong{font-family:var(--font-display);font-stretch:108%;font-weight:620;line-height:1.25}
.sp-path__tech{font-size:var(--fs-sm);line-height:1.4;color:var(--on-dark-muted)}
.sp-path__note{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--navy-line);font-size:var(--fs-sm);line-height:1.5;color:var(--on-dark-muted)}
@media (min-width:560px) and (max-width:899px){
  .sp-path__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s5)}
  .sp-path__list li::after{display:none}
}
.sp-sub{margin:var(--s6) 0 var(--s3);color:var(--on-dark-muted)}
/* tablet (two columns): an odd tile count would leave a hole, so the last tile takes the row */
@media (min-width:640px) and (max-width:1023px){.bento.sp-odd>.tile:last-child{grid-column:span 12}}

/* ---------------------------------------------------------------- blog pages (drawn by PHP inside app/shell: blog/index.php, assets/css/blog.css) */
.cc .container{width:100%;max-width:calc(var(--max) + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.cc main>.section,.cc main>article.section{padding-block:var(--band)}
.cc .eyebrow{font-family:var(--font-display);font-stretch:108%;font-size:var(--fs-sm);font-weight:600;color:var(--blue);margin-bottom:12px}
.cc .blog-meta{font-family:var(--font-text);color:var(--muted)}
.cc .blog .prose ul{list-style:disc;padding-left:1.3em}
.cc .blog .prose ol{list-style:decimal;padding-left:1.3em}
.cc .blog-card h2{font-family:var(--font-display);font-stretch:110%;font-weight:620}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cc *,.cc *::before,.cc *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .cmq__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .cmq__set{flex-wrap:wrap;justify-content:center;padding:0}
  .cmq__set[aria-hidden=true]{display:none}
  .cmq__row--r{display:none}
}
@media print{.hdr,.drawer,.ftr,.index{display:none}}