/* ===========================================================================
   IOActive rebuild — functional prototype design system
   One stylesheet, three committed "looks" selected via html[data-look].
   Base :root = Fault Line (light).  [data-look="signal"] = IOActive-red terminal.
   [data-look="console"] = deep-blue intelligence console.
   =========================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--bd);-webkit-font-smoothing:antialiased;line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* ---- LOOK: Fault Line (default / light) ---- */
:root{
  --bg:#f4f2ec; --panel:#ecebe4; --ink:#1a1623; --dim:#5b5b66; --acc:#d0002e; --onacc:#fff;
  --line:#d9d5cb; --rad:2px; --acct:var(--acc);  /* #d0002e — leadership-approved digital red, matches the logo O; 5.0:1 as text on light (AA) */
  --dp:"Raleway",Arial,sans-serif; --bd:"Raleway",Arial,sans-serif; --mo:"Raleway",Arial,sans-serif;
  --code:"IBM Plex Mono",monospace;   /* monospace kept ONLY for the terminal + code blocks */
  --logo-dark:block; --logo-light:none;
}
/* ---- LOOK: Signal (IOA Midnight ground, IOA Red core) ---- */
html[data-look="signal"]{
  --bg:#1a1623; --panel:#221d2e; --ink:#ece9f2; --dim:#938fa0; --acc:#d0002e; --onacc:#fff;
  --line:#2c2739; --rad:3px; --acct:#ff5964;  /* lightened core red: 5.8:1 on IOA Midnight (AA); #d0002e stays for fills/buttons */
  --dp:"Raleway",Arial,sans-serif; --bd:"Raleway",Arial,sans-serif; --mo:"Raleway",Arial,sans-serif;
  --logo-dark:none; --logo-light:block;
}
/* ---- LOOK: Console (IOA Green Slate ground, IOA Red core + Blue Slate secondary) ---- */
html[data-look="console"]{
  --bg:#1c2731; --panel:#25343d; --ink:#e7ecf1; --dim:#8fa0ad; --acc:#d0002e; --onacc:#fff;
  --line:#33454f; --rad:6px; --acct:#ff5964; --sec:#748fb1;  /* red core; IOA Blue Slate as the secondary accent */
  --dp:"Raleway",Arial,sans-serif; --bd:"Raleway",Arial,sans-serif; --mo:"Raleway",Arial,sans-serif;
  --logo-dark:none; --logo-light:block;
}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--mo);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--acct);margin:0 0 18px}
h1,h2,h3{font-family:var(--dp);letter-spacing:-.02em;text-wrap:balance;margin:0}
.lede{color:var(--dim);font-size:17px;line-height:1.55;max-width:60ch}
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:14px;padding:12px 22px;border-radius:var(--rad);background:var(--acc);color:var(--onacc);border:1px solid var(--acc);cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn:hover{opacity:.92}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.mono{font-family:var(--mo)}

/* ---------- HEADER ---------- */
.site-header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-header .bar{display:flex;align-items:center;gap:24px;padding:16px 0}
.brand img{height:32px}
.brand .logo-dark{display:var(--logo-dark)}
.brand .logo-light{display:var(--logo-light)}
.nav{display:flex;gap:22px;flex-wrap:wrap}
.nav a{text-decoration:none;color:var(--dim);font-size:14px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.header-spacer{margin-left:auto}
.looks{display:flex;gap:4px;border:1px solid var(--line);border-radius:100px;padding:3px}
.looks button{font-family:var(--mo);font-size:10.5px;letter-spacing:.03em;color:var(--dim);background:transparent;border:0;border-radius:100px;padding:6px 11px;cursor:pointer}
.looks button[aria-pressed="true"]{background:var(--acc);color:var(--onacc)}
.menu-toggle{display:none;background:transparent;border:1px solid var(--line);border-radius:var(--rad);color:var(--ink);font-family:var(--mo);font-size:12px;padding:8px 12px;cursor:pointer}
.nav-extra{display:none}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero .wrap{padding:78px 28px}
.hero h1{font-size:clamp(38px,6vw,72px);line-height:1.01;margin-bottom:22px}
html[data-look="signal"] .hero h1{font-weight:500;font-size:clamp(30px,4.4vw,52px);line-height:1.12}
.hero .kicker{font-family:var(--mo);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--acct);margin-bottom:20px}
.hero .lede{margin:0 0 30px}
.hero .frac{color:var(--acct)}
/* Fault crack layer */
.hero-crack{position:absolute;inset:0;pointer-events:none;z-index:0;display:none;
  background:linear-gradient(115deg,transparent calc(50% - .6px),var(--acc) 50%,transparent calc(50% + .6px)),
  linear-gradient(#161a2010 1px,transparent 1px),linear-gradient(90deg,#161a2010 1px,transparent 1px);
  background-size:100% 100%,34px 34px,34px 34px;opacity:.5;mask-image:linear-gradient(180deg,#000,transparent 84%)}
:root .hero-crack{display:block}
.hero .wrap{position:relative;z-index:1}
/* Signal terminal */
.hero-term{display:none;margin-top:30px;border:1px solid var(--line);border-radius:6px;background:#08110c;max-width:720px}
html[data-look="signal"] .hero-term{display:block}
.hero-term .tbar{display:flex;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line)}
.hero-term .tbar i{width:10px;height:10px;border-radius:50%;background:#2a2f28}
.hero-term .tbody{padding:18px;font-family:var(--code);font-size:14px;line-height:1.7}
.hero-term .p{color:var(--acct)}
.hero-term .out{color:#cfd3c4;margin-top:10px}
.cur{display:inline-block;width:9px;height:1.05em;background:var(--acc);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* Console metric wall */
.hero-metrics{display:none;margin-top:34px;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;max-width:820px}
html[data-look="console"] .hero-metrics{display:grid}
.hero-metrics .met{background:var(--panel);padding:18px}
.hero-metrics .v{font-family:var(--mo);font-weight:600;font-size:24px;color:var(--ink)}
.hero-metrics .v b{color:var(--sec,var(--acct))}
.hero-metrics .k{font-family:var(--mo);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-top:6px}

/* ---------- TRUST STRIP ---------- */
.trust{border-bottom:1px solid var(--line)}
.trust .wrap{display:flex;align-items:center;gap:12px 24px;flex-wrap:wrap;padding:16px 28px;font-family:var(--mo);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.trust b{color:var(--ink);font-weight:500}
.trust .sep{opacity:.4}

/* ---------- SECTION ---------- */
.section{border-bottom:1px solid var(--line)}
.section .wrap{padding:64px 28px}
.section h2{font-size:clamp(26px,3.4vw,40px);margin-bottom:14px}
.section .sub{color:var(--dim);max-width:60ch;margin:0 0 34px}
.section-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:30px}
.section-head .all{margin-left:auto;font-family:var(--mo);font-size:12px;color:var(--acct);text-decoration:none;white-space:nowrap}

/* ---------- GRID CARDS (services / capabilities) ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:transparent}
/* hairline separators drawn on the cells (not a container bg) so empty trailing cells stay invisible */
.grid3>*,.indgrid>*,.offgrid>*,.mstrip>*{box-shadow:0 0 0 1px var(--line)}
.card{background:var(--bg);padding:26px;text-decoration:none;color:inherit;display:block}
a.card:hover{background:var(--panel)}
.card .no{font-family:var(--mo);font-size:11px;color:var(--acct);display:block;margin-bottom:12px}
.card h3{font-size:18px;margin-bottom:8px}
html[data-look="signal"] .card h3{font-family:var(--mo);font-weight:500}
.card p{margin:0;color:var(--dim);font-size:13.5px;line-height:1.5}
.card .more{display:inline-block;margin-top:14px;font-family:var(--mo);font-size:11.5px;color:var(--acct)}

/* ---------- RESEARCH LIST ---------- */
.rlist{display:grid}
.ritem{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;padding:18px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.ritem:last-child{border-bottom:1px solid var(--line)}
.ritem .tag{font-family:var(--mo);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--acct);border:1px solid var(--line);border-radius:3px;padding:4px 8px;white-space:nowrap}
.ritem h3{font-size:19px;font-weight:600}
html[data-look="signal"] .ritem h3{font-family:var(--mo);font-weight:500}
.ritem:hover h3{color:var(--acct)}
.ritem .dt{font-family:var(--mo);font-size:11px;color:var(--dim);white-space:nowrap}

/* ---------- INDUSTRIES ---------- */
.indgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:transparent}
.ind{background:var(--bg);padding:20px;font-family:var(--dp);font-size:15px;font-weight:600}
html[data-look="signal"] .ind{font-family:var(--mo);font-weight:500}
.ind span{display:block;font-family:var(--mo);font-size:10px;font-weight:400;color:var(--dim);margin-top:7px;letter-spacing:.05em;text-transform:uppercase}
.offgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:transparent}
/* ---- blog / research ---- */
.post-meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-family:var(--mo);font-size:12px;color:var(--dim);margin-top:14px}
.post-meta .who{color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{font-family:var(--mo);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--acct);border:1px solid var(--line);border-radius:100px;padding:5px 11px}
.post-hero{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel);margin:0 auto;max-width:820px}
.post-hero img{width:100%;height:auto;max-height:460px;object-fit:cover;display:block}
.prose h3{font-size:19px;margin:28px 0 10px}
.prose a{color:var(--acct);text-decoration:underline;text-underline-offset:2px}
.prose a.btn{color:var(--onacc);text-decoration:none}   /* in-copy CTA buttons keep button colors (the link rule above outranks .btn) */

/* stage strip — a lifecycle page's four stages as linked cards on one rule; the red segment on the rule is the
   Fault Line crack. Built by build.py _stage_strip from the page's own sections (no hand HTML). */
.stages{display:grid;grid-template-columns:repeat(4,1fr);gap:0 18px;margin:26px 0 22px;padding-top:18px;border-top:1px solid var(--line);position:relative}
.stages::before{content:"";position:absolute;left:0;top:-1px;width:23%;height:2px;background:var(--acc)}
.prose a.stage,.stage{display:flex;flex-direction:column;gap:5px;min-width:0;text-decoration:none;color:var(--ink);padding:0 0 14px;border-bottom:1px solid transparent}
.stage .no{font-family:var(--code);font-size:12px;letter-spacing:.08em;color:var(--acct)}
.stage .name{font-weight:700;font-size:17px;line-height:1.2;text-wrap:balance}
.stage .sub{font-size:13.5px;line-height:1.35;color:var(--dim)}
.stage .cnt{margin-top:6px;font-family:var(--code);font-size:12px;color:var(--dim)}
.stage .cnt b{color:var(--ink);font-weight:600}
.prose a.stage:hover .name,.prose a.stage:focus-visible .name{color:var(--acct)}
.prose a.stage:hover,.prose a.stage:focus-visible{border-bottom-color:var(--acc)}
.prose a.stage:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
@media(max-width:760px){.stages{grid-template-columns:1fr 1fr;gap:6px 16px}}
@media(max-width:400px){.stages{grid-template-columns:1fr}}
.prose figure{margin:30px 0}
.prose figure img{width:100%;height:auto;border:1px solid var(--line);border-radius:10px;display:block}
.prose figcaption{font-family:var(--mo);font-size:12px;color:var(--dim);margin-top:9px;text-align:center}
.prose blockquote{border-left:3px solid var(--acc);margin:24px 0;padding:6px 0 6px 20px;font-size:18px;line-height:1.6;color:var(--ink)}
.prose pre{background:#0c130d;border:1px solid var(--line);border-radius:10px;padding:16px 18px;overflow:auto;font-family:var(--code);font-size:13px;line-height:1.6;margin:22px 0}
.prose pre code{font-family:var(--code)}
.blist{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.bcard{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel);transition:border-color .18s ease}
.bcard:hover{border-color:var(--acct)}
.bcard .thumb{aspect-ratio:16/9;background:var(--bg);overflow:hidden;border-bottom:1px solid var(--line)}
.bcard .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.bcard .cbody{padding:18px}
.bcard .k{font-family:var(--mo);font-size:11px;color:var(--dim);display:flex;gap:10px;margin-bottom:9px;text-transform:uppercase;letter-spacing:.05em}
.bcard h3{font-size:18px;line-height:1.25;margin:0 0 8px}
.bcard p{font-size:14px;color:var(--dim);margin:0}
.restabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:26px;border-bottom:1px solid var(--line);padding-bottom:14px}
.restabs a{font-family:var(--mo);font-size:12px;color:var(--dim);text-decoration:none;padding:7px 13px;border:1px solid var(--line);border-radius:100px}
.restabs a:hover{color:var(--ink)}
.restabs a.on{background:var(--acc);color:var(--onacc);border-color:var(--acct)}
.pdfmark{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--mo);font-size:14px;letter-spacing:.12em;color:var(--acct);background:var(--panel)}
@media(max-width:760px){.blist{grid-template-columns:1fr}}

/* ---------- RECRUIT ---------- */
.recruit{background:var(--panel);border-bottom:1px solid var(--line)}
.recruit .wrap{display:flex;gap:24px;align-items:center;flex-wrap:wrap;padding:52px 28px}
.recruit h2{font-size:clamp(24px,3.2vw,34px);max-width:22ch}
.recruit p{color:var(--dim);max-width:40ch;margin:8px 0 0}
.recruit .header-spacer{margin-left:auto}

/* ---------- CTA ---------- */
.cta{border-bottom:1px solid var(--line)}
.cta .wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:58px 28px}
.cta h2{font-size:clamp(24px,3vw,34px);max-width:24ch}

/* ---------- PAGE HEADER (inner pages) ---------- */
.pagehead{border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.pagehead .wrap{padding:64px 28px}
.pagehead h1{font-size:clamp(32px,5vw,58px);margin-bottom:16px}
.pagehead .lede{margin:0}
.crumb{font-family:var(--mo);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:18px}
.crumb a{text-decoration:none;color:var(--acct)}

/* ---------- PROSE (article) ---------- */
.prose{max-width:70ch;margin:0 auto}
.prose p{font-size:16.5px;line-height:1.7;color:var(--ink)}
.prose h2{font-size:24px;margin:34px 0 12px}
.prose ul{padding-left:20px}.prose li{margin:6px 0;color:var(--ink)}
.prose .facts{border:1px solid var(--line);border-radius:var(--rad);padding:20px;background:var(--panel);margin:24px 0}
.prose .facts h3{font-family:var(--mo);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--acct);margin-bottom:12px}
.byline{font-family:var(--mo);font-size:12px;color:var(--dim);display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px}

/* ---------- FORM (contact) ---------- */
.form{display:grid;gap:16px;max-width:560px}
.form label{font-family:var(--mo);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);display:block;margin-bottom:6px}
.form input,.form textarea,.form select{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);color:var(--ink);font-family:var(--bd);font-size:15px;padding:12px 14px}
.form textarea{min-height:130px;resize:vertical}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--panel)}
.site-footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;padding:52px 28px 28px}
.site-footer .flogo img{height:30px;margin-bottom:14px}
.site-footer .flogo p{font-family:var(--mo);font-size:11px;color:var(--dim);line-height:1.7;max-width:32ch;margin:0}
.site-footer h3{font-family:var(--mo);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0 0 14px}
.site-footer a{display:block;text-decoration:none;color:var(--ink);opacity:.82;font-size:13.5px;margin-bottom:9px}
.site-footer a:hover{opacity:1;color:var(--acct)}
.site-footer .fbar{border-top:1px solid var(--line);padding:16px 28px;font-family:var(--mo);font-size:11px;color:var(--dim);display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.site-footer .fbar .header-spacer{margin-left:auto}
.site-footer .legal-links a{display:inline-block;margin:0 0 0 16px;padding:0;opacity:.72;font-size:11px}
.site-footer .legal-links a:first-child{margin-left:0}
.site-footer .ainotice{padding:0 28px 34px;font-family:var(--mo);font-size:11px;line-height:1.6;color:var(--dim);max-width:96ch}
.crumb a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* footer: awards & certifications strip + social links */
.awards{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:center;padding:22px 28px;border-top:1px solid var(--line)}
.awards img{height:44px;width:auto;max-width:150px;object-fit:contain;opacity:.85;display:block}
.awards a:hover img{opacity:1}
.social{display:inline-flex;gap:14px;align-items:center}
.social a{display:inline-block;margin:0;opacity:.85}
@media(max-width:560px){.awards{gap:14px 18px;padding:18px 22px}.awards img{height:34px;max-width:120px}}
.pmeta{font-family:var(--mo);font-size:11px;color:var(--dim);margin-top:5px}

/* ---------- responsive ---------- */
@media(max-width:880px){
  .grid3,.indgrid,.offgrid,.hero-metrics{grid-template-columns:1fr 1fr}
  .site-footer .cols{grid-template-columns:1fr 1fr}
  .nav{display:none}
  .nav.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);padding:16px 28px;gap:14px}
  .menu-toggle{display:inline-block}
  .site-header .bar{gap:14px}
  .site-header .bar > .looks,.site-header .bar > .btn{display:none}
  .nav.open .nav-extra{display:flex;flex-direction:column;gap:16px;align-items:flex-start;width:100%;margin-top:4px;padding-top:14px;border-top:1px solid var(--line)}
  .nav.open .nav-extra .btn{width:100%;text-align:center}
}
@media(max-width:560px){.grid3,.indgrid,.offgrid,.hero-metrics{grid-template-columns:1fr}.ritem{grid-template-columns:auto 1fr}.ritem .dt{grid-column:2}.hero .wrap{padding:52px 22px}.pagehead .wrap{padding:44px 22px}.hero h1{font-size:30px}html[data-look="signal"] .hero h1{font-size:26px}.pagehead h1{font-size:28px}}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.cur{animation:none}html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}}

/* ---- milestone strip (greatest hits) ---- */
.mstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:0;background:transparent}
.mchip{background:var(--bg);padding:16px 18px;text-decoration:none;color:inherit;display:block}
.mchip:hover{background:var(--panel)}
.mchip .y{font-family:var(--mo);font-size:13px;font-weight:600;color:var(--acct)}
.mchip h3{font-family:var(--dp);font-size:14px;margin:7px 0 0;letter-spacing:-.01em;font-weight:600}
html[data-look="signal"] .mchip h3{font-family:var(--mo);font-weight:500}

/* ---- vertical timeline (single-column left rail; theme-token marks) ---- */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;top:6px;bottom:6px;left:8px;width:2px;background:var(--line)}
.tl-item{position:relative;padding:0 0 34px 40px}
.tl-item::before{content:"";position:absolute;left:2px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--acc);border:3px solid var(--bg);box-shadow:0 0 0 1px var(--line)}
.tl-year{font-family:var(--mo);font-size:20px;font-weight:600;color:var(--acct);letter-spacing:-.02em;display:block;margin-bottom:5px}
.tl-item h3{font-family:var(--dp);font-size:18px;letter-spacing:-.01em;margin:0 0 7px}
html[data-look="signal"] .tl-item h3{font-family:var(--mo);font-weight:500}
.tl-item p{color:var(--dim);font-size:14px;line-height:1.55;margin:0}
.tl-who{font-family:var(--mo);font-size:11px;color:var(--dim);margin-top:8px;display:block}
.tl-tag{display:inline-block;font-family:var(--mo);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--acct);border:1px solid var(--line);border-radius:3px;padding:3px 7px;margin-top:12px}

/* ---- header search + language selector ---- */
.hsearch{display:inline-flex;align-items:center;color:var(--dim);text-decoration:none}
.hsearch:hover{color:var(--ink)}
.langsel select{font-family:var(--mo);font-size:12px;color:var(--dim);background:transparent;border:1px solid var(--line);border-radius:100px;padding:7px 10px;cursor:pointer}
.langsel select:hover{color:var(--ink)}

/* ---- search + ask tabs ---- */
.tabs{display:inline-flex;gap:4px;border:1px solid var(--line);border-radius:100px;padding:4px;margin-bottom:28px}
.tabs button{font-family:var(--mo);font-size:12.5px;color:var(--dim);background:transparent;border:0;border-radius:100px;padding:9px 18px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--acc);color:var(--onacc)}
#pf{--pagefind-ui-primary:var(--acc);--pagefind-ui-text:var(--ink);--pagefind-ui-background:var(--bg);--pagefind-ui-border:var(--line);--pagefind-ui-tag:var(--panel);--pagefind-ui-border-width:1px;--pagefind-ui-border-radius:var(--rad);--pagefind-ui-font:var(--bd);max-width:700px}
.ask-box{display:flex;gap:10px;max-width:660px;margin-bottom:20px}
.ask-box input{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);color:var(--ink);font-family:var(--bd);font-size:15px;padding:13px 16px}
.ask-box input:disabled{opacity:.7}
.ask-note{max-width:660px;color:var(--dim);font-size:14px;line-height:1.6}
.ask-badge{font-family:var(--mo);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--acct);border:1px solid var(--acc);border-radius:100px;padding:3px 9px;margin-right:8px}
.ask-sub{margin:20px 0 8px;font-family:var(--mo);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.ask-demo{border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;max-width:660px}
.ask-q{background:var(--panel);padding:12px 16px;font-weight:600}
.ask-a{padding:14px 16px;color:var(--ink);font-size:14.5px;line-height:1.6}
.ask-cite{display:block;font-family:var(--mo);font-size:11px;color:var(--acct);margin-top:10px;word-break:break-all}
/* Pagefind element overrides — force legible, token-driven colors in every look */
#pf .pagefind-ui__search-input{background:var(--panel);color:var(--ink)}
#pf .pagefind-ui__search-input::placeholder{color:var(--dim);opacity:1}
#pf .pagefind-ui__search-clear{color:var(--ink);background:transparent}
#pf .pagefind-ui__result-title a,#pf .pagefind-ui__result-link{color:var(--ink)}
#pf .pagefind-ui__result-excerpt{color:var(--dim)}
#pf .pagefind-ui__message,#pf .pagefind-ui__result-title{color:var(--ink)}
#pf mark{background:var(--acc);color:var(--onacc);padding:0 3px;border-radius:2px}
/* utility classes (replace inline styles for clean lint + strict CSP) */
.mb30{margin-bottom:30px}
.narrow{max-width:820px;margin:0 auto}
.h1-sm{font-size:clamp(30px,4.5vw,50px)}
.card--span2{grid-column:span 2;display:flex;flex-direction:column;justify-content:center}
.card--feature{padding:34px}
.card--feature h3{font-size:26px;max-width:24ch}
.card--feature p{max-width:70ch;margin-top:10px}
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:48px}
.offices{border:0}
.offices .ritem{grid-template-columns:1fr;padding:10px 0}
.offices .ritem:first-child{border-top:0}
.office-name{font-size:16px}
.office-note{font-size:12px;color:var(--dim)}
.office-addr{font-size:13px;line-height:1.5;margin:4px 0 6px}
.office-phone{font-size:13px;margin-top:2px}
.office-phone a{color:inherit}
/* contact: direct channels (Signal / WhatsApp / lab tour) + email list */
.channels .card .more{display:inline-block;margin-top:8px}
.emails{margin-top:26px}
.emails .ritem{grid-template-columns:auto 1fr}
.emails h3{font-size:16px;font-weight:500}
.global-note{margin-top:26px;max-width:70ch}
/* service detail: FAQ accordion (native <details>: accessible, no JS, single-column on every width) */
.faq{border-top:1px solid var(--line);padding:14px 0}
.faq:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--mo);color:var(--acct);flex:none}
.faq[open] summary::after{content:'–'}
.faq p{margin-top:10px}
.creds{font-size:12px;color:var(--dim);margin-top:20px}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr}}
.book-card{display:flex;gap:32px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:32px}
.book-copy{flex:1 1 320px}
.book-card h2{margin:6px 0 8px}
.book-action{flex:0 1 300px;max-width:100%}
.book-note{font-size:12px;color:var(--dim);margin-top:12px;line-height:1.5}
@media(max-width:560px){.book-card{padding:22px}}


/* forms: lead capture (contact) + newsletter (footer) + consent-gated video */
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.form .two{grid-template-columns:1fr}}
.form .check,.nlform .check{display:flex;gap:10px;align-items:flex-start;font-family:var(--bd);font-size:13px;line-height:1.5;letter-spacing:0;text-transform:none;color:var(--dim);margin:0}
.form .check input,.nlform .check input{width:auto;margin:3px 0 0;flex:none}
.check a{color:var(--acct);text-decoration:underline}
.site-footer .nlform .check a{display:inline;color:inherit;opacity:1;margin:0;font-size:inherit;text-decoration:underline}  /* the footer link rule's .82 opacity on the panel fails AA; inherit --dim (5.6:1) */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{font-family:var(--mo);font-size:12px;min-height:1.2em;margin:0}
.form-status.ok{color:var(--acct)}
.form-status.err{color:var(--acc)}
[data-msg]{display:none}
.linklike{background:none;border:0;padding:0;font:inherit;color:var(--acct);text-decoration:underline;cursor:pointer}
.site-footer .nlwrap{padding:0 28px 34px}
.nlform{max-width:560px;display:grid;gap:10px}
.nlform h3{margin:0}
.nlform p{font-size:13.5px;color:var(--dim);margin:0}
.nlrow{display:flex;gap:10px;flex-wrap:wrap}
.nlrow input{flex:1 1 220px;background:var(--bg);border:1px solid var(--line);border-radius:var(--rad);color:var(--ink);padding:10px 12px;font:inherit}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
figure.video{margin:22px 0}
figure.video iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.cookieconsent-optout-marketing>p{background:var(--panel);border:1px solid var(--line);padding:14px 16px;margin:0;font-size:13.5px}   /* the box is the <p>, not the container: Cookiebot's own CSS sets the container to display:initial (= inline), which left its padding+border as two empty slivers */

.book-widget{margin-top:18px;border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;background:#fff}
.book-widget iframe{width:100%;height:min(1150px,88vh);border:0;display:block}
.book-note a{color:inherit;text-decoration:underline}