/* ===== site.css ===== */
/* ============================================================
   Terso AI site-wide stylesheet (subpages).
   Extracted from homepage-premium/index.html so every page
   shares the same tokens and components. Do not fork tokens.
   ============================================================ */

/* The monospace face was removed on 2026-08-13 (Jake: "take away that hacker-y
   font"). Sora sets display, Inter sets everything else including the micro
   labels that used to be mono. Two faces, two requests. */
@font-face{font-family:'Sora';src:url(fonts/Sora.woff2) format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url(fonts/Inter.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

/* ACCENT DECISION, 2026-08-13. One accent, #a4176e, and nothing else carries
   colour. It measures 6.9:1 on white, so the same value sets 11px labels, body
   links and the focus ring without a second lighter variant that would read as
   a second colour. The surfaces underneath were tinted lilac before; they are
   neutral grey now, so the accent is the only hue on screen. The neon #e118b6
   and the purple-to-pink gradient are gone from every surface.
   These tokens are mirrored verbatim in index.html. Change both together. */
:root{
  --paper:#fcfcfd; --paper-2:#f5f6f8; --card:#ffffff;
  --ink:#101116; --text-1:#14151a; --text-2:#4a4c58; --text-3:#6b6e7d;
  --line:#e6e7ec; --line-2:#d5d7de;
  --accent:#a4176e; --accent-deep:#87105a; --accent-soft:#e2a0c9;
  --accent-tint:rgba(164,23,110,.055);
  --accent-line:rgba(164,23,110,.22);
  --accent-ring:rgba(164,23,110,.16);
  --accent-ring-strong:rgba(164,23,110,.45);
  --purple:#a4176e;
  --grad:linear-gradient(118deg,#7a1257 0%,#a4176e 100%);
  --gain:#157347; --gain-dark:#4ade80;
  --ink-0:#08080c; --ink-1:#101116; --ink-2:#181a20;
  --dark-1:#f2f3f6; --dark-2:#adb0bb; --dark-3:#83868f;
  --font-d:'Sora','Segoe UI',system-ui,sans-serif;
  --font-b:'Inter','Segoe UI',system-ui,sans-serif;
  /* kept as a token name only: ~40 rules across this file reference it */
  --font-m:'Inter','Segoe UI',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.33,0,.2,1);
  --t-1:.4s; --t-2:.62s; --t-3:.95s;
  --depth:1500px;
  --shadow-1:0 1px 2px rgba(16,17,22,.05);
  --shadow-2:0 24px 50px -30px rgba(16,17,22,.34),0 4px 12px -8px rgba(16,17,22,.10);
  --container:1160px; --gutter:clamp(22px,5vw,56px);
  --section-y:clamp(84px,11vh,144px);
  --r-s:10px; --r-m:14px; --r-l:18px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--text-1);font-family:var(--font-b);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px;border-radius:5px}
::selection{background:var(--accent-ring)}
h1,h2,h3,h4{margin:0;font-family:var(--font-d);color:var(--ink);font-weight:700;letter-spacing:-.028em}
p{margin:0}
.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
/* Keyboard users had no way past the header on any page. Off screen until it
   takes focus, a normal button once it does. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;
  padding:12px 18px;min-height:44px;display:inline-flex;align-items:center;
  background:var(--ink);color:var(--paper);border-radius:0 0 var(--r-s) 0;
  font-size:15px;font-weight:500;text-decoration:none}
.skip-link:focus,.skip-link:focus-visible{left:0}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-m);font-size:12px;
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep)}
.eyebrow::before{content:"";width:22px;height:1.5px;background:var(--accent);opacity:.7;border-radius:2px}

/* ============ REVEAL ============
   Every rule that hides a reveal is gated behind `html.js`, and that class is
   set by a blocking inline script in <head>. With JavaScript off the class is
   never added, so nothing is ever hidden and every page reads in full. This is
   the fix for the bug where content sat at opacity 0 waiting on JavaScript.
   Do not un-gate these selectors. */
.js .reveal{opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);will-change:opacity,transform}
.js .reveal.in{opacity:1;transform:none;will-change:auto}
.js .reveal.d1{transition-delay:.06s}
.js .reveal.d2{transition-delay:.12s}
.js .reveal.d3{transition-delay:.18s}
.js .reveal.d4{transition-delay:.24s}
.js .reveal.d5{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* ============ PAGE ENTRANCE ============
   A single settling motion on first paint. It runs as a CSS animation, so it
   never gates readability on JavaScript, and it finishes fast enough that the
   page is stable before a visitor can act on it. */
@keyframes t-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes t-fade{from{opacity:0}to{opacity:1}}
.nav{animation:t-fade .6s var(--ease) both}
main>section:first-of-type .wrap{animation:t-enter .72s var(--ease) both}
@media (prefers-reduced-motion:reduce){
  .nav,main>section:first-of-type .wrap{animation:none}
}

/* ============ NAV ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;height:66px;
  background:rgba(252,251,253,.82);backdrop-filter:saturate(1.7) blur(20px);
  -webkit-backdrop-filter:saturate(1.7) blur(20px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px;
  width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
/* ---- WORDMARK ----
   REBUILT 2026-08-13, third attempt, and this one is measured rather than
   eyeballed. "Terso AI" is now ONE text flow inside .b-word with ONE literal
   space character, so the gap between the two words is the font's own space
   advance and cannot be anything else. The .b-ai span is kept because the
   generated pages and the measurement script both reference it, but it now
   carries no margin, no weight change and no colour change: previously it was
   600 weight in grey with a .26em margin, and the combination of a lighter
   colour, a lighter weight and an added margin is what kept reading as a gap
   even after the margin was trimmed.
   The icon-to-word distance is a separate measurement and is set in em (.52em,
   about two word spaces) so the lockup holds together at any size. */
.brand{display:inline-flex;align-items:center;gap:.52em;font-family:var(--font-d);font-weight:700;
  font-size:19px;letter-spacing:-.03em;color:var(--ink);
  transition:opacity var(--t-1) var(--ease)}
.brand:hover{opacity:.7}
.brand img{width:22px;height:auto;transition:transform var(--t-2) var(--ease)}
.brand:hover img{transform:translateY(-1px) scale(1.04)}
.b-word{display:inline-block;white-space:nowrap}
.b-ai{margin:0;padding:0;color:inherit;font-weight:inherit;letter-spacing:inherit}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{font-size:14.5px;color:var(--text-2);letter-spacing:-.006em;transition:color .25s ease}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:inline-flex;align-items:center;gap:8px;padding:10px 19px;border-radius:999px;
  background:var(--ink);color:var(--paper);font-size:14px;font-weight:500;letter-spacing:-.006em;
  transition:transform .35s var(--ease),box-shadow .5s var(--ease)}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 14px 30px -14px rgba(16,13,20,.5)}
@media (max-width:940px){.nav-links{display:none}}

/* ============ MOBILE NAV (below 940px the link row is hidden; this replaces it) ============ */
.nav-mob{display:none;position:relative}
@media (max-width:940px){.nav-mob{display:block}.nav-cta{display:none}}
.nav-mob summary{list-style:none;cursor:pointer;width:44px;height:44px;display:grid;place-content:center;
  border-radius:12px;border:1px solid var(--line-2);background:var(--card)}
.nav-mob summary::-webkit-details-marker{display:none}
.nm-bars{position:relative;display:block;width:18px;height:1.8px;background:var(--ink);border-radius:2px}
.nm-bars::before,.nm-bars::after{content:"";position:absolute;left:0;width:18px;height:1.8px;background:var(--ink);border-radius:2px}
.nm-bars::before{top:-6px}
.nm-bars::after{top:6px}
.nav-mob[open] .nm-bars{background:transparent}
.nav-mob[open] .nm-bars::before{top:0;transform:rotate(45deg)}
.nav-mob[open] .nm-bars::after{top:0;transform:rotate(-45deg)}
/* <details> has no open/close transition of its own, so the panel animates on
   the way in with a keyframe and the burger bars morph into an X with real
   transitions. The panel stays in the DOM only while open, which keeps it out
   of the tab order when closed without any JavaScript. */
.nav-mob-panel{position:absolute;right:0;top:52px;min-width:236px;background:var(--card);
  border:1px solid var(--line-2);border-radius:var(--r-m);padding:10px;
  box-shadow:0 28px 60px -30px rgba(16,13,20,.38);display:flex;flex-direction:column;gap:2px;
  transform-origin:top right;animation:t-menu .34s var(--ease) both}
@keyframes t-menu{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
.nav-mob-panel a{padding:11px 14px;border-radius:10px;font-size:15px;color:var(--text-1);
  transition:background .22s var(--ease),color .22s var(--ease),padding-left .22s var(--ease)}
.nav-mob-panel a:hover{background:var(--paper-2);padding-left:18px}
.nm-bars,.nm-bars::before,.nm-bars::after{
  transition:transform .32s var(--ease),top .32s var(--ease),background .2s linear}
@media (prefers-reduced-motion:reduce){
  .nav-mob-panel{animation:none}
  .nm-bars,.nm-bars::before,.nm-bars::after,.nav-mob-panel a{transition:none}
}
.nav-mob-panel .btn-primary{margin-top:8px;justify-content:center;color:var(--paper);font-size:15px;padding:13px 20px}


/* ============ PAGE HERO (subpage) ============ */
.page-hero{position:relative;padding-top:clamp(140px,20vh,200px);padding-bottom:clamp(44px,7vh,84px);overflow:hidden}
.page-hero-glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(52% 46% at 82% 0%, rgba(164,23,110,.028), transparent 72%),
    radial-gradient(46% 42% at 8% 20%, rgba(122,18,87,.020), transparent 74%)}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{margin-top:18px;font-size:clamp(37px,5.6vw,68px);font-weight:700;line-height:1.04;
  letter-spacing:-.038em;max-width:19ch}
.page-hero .lede{margin-top:22px;max-width:56ch;font-size:clamp(17.5px,1.9vw,20.5px);color:var(--text-2);line-height:1.6}
.page-hero .hero-actions{margin-top:clamp(26px,4vh,38px);display:flex;align-items:center;gap:14px 26px;flex-wrap:wrap}
.btn-primary{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:999px;
  background:var(--ink);color:var(--paper);font-size:15.5px;font-weight:500;letter-spacing:-.006em;
  transition:transform .4s var(--ease),box-shadow .5s var(--ease)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 46px -20px rgba(16,13,20,.58)}
.btn-primary .ar,.link-arrow .ar{transition:transform .35s var(--ease)}
.btn-primary:hover .ar{transform:translateX(3px)}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:500;
  color:var(--ink);letter-spacing:-.006em}
.link-arrow:hover .ar{transform:translateX(4px)}
.link-arrow:hover{color:var(--accent-deep)}

/* ============ SECONDARY INDUSTRY (visually subordinate by construction) ============ */
/* every industry page uses the same hero; ordering lives in the list and the sitemap */

/* ============ CREDIBILITY BAND (team page) ============ */
.cred{border-bottom:1px solid var(--line);background:var(--paper-2)}
.cred-in{display:flex;align-items:center;justify-content:center;gap:18px clamp(20px,3vw,36px);
  flex-wrap:wrap;text-align:center;padding-block:clamp(22px,3.2vh,32px)}
.cred-sep{width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.6;flex:none}
.cred-label{font-family:var(--font-m);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3)}
.logo-mono{display:inline-block;background:var(--ink);opacity:.55;
  -webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;transition:opacity .3s ease}
.logo-mono:hover{opacity:.9}
.lg-claude{width:22px;height:22px;-webkit-mask-image:url(claude-symbol.svg);mask-image:url(claude-symbol.svg);opacity:.85;flex:none}
.lg-msft{height:18px;width:17px;-webkit-mask-image:url(logos/microsoft.svg);mask-image:url(logos/microsoft.svg)}
.lg-trp{height:12px;width:75px;-webkit-mask-image:url(logos/troweprice.svg);mask-image:url(logos/troweprice.svg)}
.lg-cog{height:12px;width:52px;-webkit-mask-image:url(logos/cognizant.svg);mask-image:url(logos/cognizant.svg)}
.lg-ppx{height:18px;width:15px;-webkit-mask-image:url(logos/perplexity.svg);mask-image:url(logos/perplexity.svg)}
.lg-nasa{height:16px;width:53px;-webkit-mask-image:url(logos/nasa.svg);mask-image:url(logos/nasa.svg)}
.lg-ms{height:14px;width:98px;-webkit-mask-image:url(logos/morganstanley.svg);mask-image:url(logos/morganstanley.svg)}
.lg-dart{height:13px;width:77px;-webkit-mask-image:url(logos/dartmouth.svg);mask-image:url(logos/dartmouth.svg)}
.lg-brown{height:13px;width:70px;-webkit-mask-image:url(logos/brown.svg);mask-image:url(logos/brown.svg)}
.lg-cwru{height:15px;width:55px;-webkit-mask-image:url(logos/casewestern-letters.svg);mask-image:url(logos/casewestern-letters.svg)}
@media (max-width:640px){.cred-sep{display:none}.cred-in{gap:14px}}

/* ============ FOUNDER / TEAM ============ */
.founder-grid{margin-top:clamp(40px,6vh,68px);display:grid;grid-template-columns:.86fr 1.14fr;
  gap:clamp(36px,5.4vw,84px);align-items:center}
@media (max-width:880px){.founder-grid{grid-template-columns:1fr;gap:36px}}
.founder-photo{position:relative;aspect-ratio:4/5;width:100%;max-width:420px;border-radius:var(--r-l);
  overflow:hidden;border:1px solid var(--line-2);background:var(--card)}
@media (max-width:880px){.founder-photo{max-width:330px}}
.founder-photo img{width:100%;height:100%;object-fit:cover}
.founder-name{margin-top:16px;font-size:clamp(30px,4.2vw,46px);font-weight:700;line-height:1.04;letter-spacing:-.03em;color:var(--ink)}
.founder-role{margin-top:12px;font-family:var(--font-m);font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-deep)}
.founder-bio p{margin-top:18px;color:var(--text-2);font-size:clamp(16px,1.6vw,17.5px);line-height:1.65;max-width:55ch}
.founder-cta{margin-top:24px}
.founder-hero{padding-bottom:clamp(52px,8vh,92px)}
.founder-hero .founder-grid{margin-top:clamp(30px,4.4vh,46px);align-items:center}
.founder-hero h2.founder-name{margin-top:0;font-size:clamp(30px,4vw,46px);max-width:16ch;line-height:1.05}
/* the page-level heading, above the founder card */
.team-h1{margin-top:18px;font-size:clamp(32px,5vw,60px);font-weight:700;line-height:1.03;
  letter-spacing:-.04em;color:var(--ink);max-width:16ch}
.founder-cta-row{display:flex;align-items:center;gap:16px 30px;flex-wrap:wrap}
@media (max-width:880px){.founder-hero .founder-grid{align-items:start}}
.tm-disc{margin-top:5px;color:var(--text-3);font-family:var(--font-m);font-size:11.5px;
  letter-spacing:.03em;line-height:1.45;opacity:.82}
.team-grid{margin-top:clamp(38px,5.4vh,58px);display:grid;grid-template-columns:repeat(3,1fr);
  gap:18px;align-items:stretch;grid-auto-rows:1fr}
@media (max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.team-grid{grid-template-columns:1fr}}
.tm{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-m);padding:24px;min-height:172px;
  transition:transform .45s var(--ease),box-shadow .5s var(--ease),border-color .45s var(--ease)}
.tm:hover{transform:translateY(-3px);box-shadow:0 22px 44px -34px rgba(16,13,20,.4);border-color:var(--line-2)}
/* The circular initial avatar (.tm-mark, and the .tm-top row that held it) was
   deleted 2026-08-13 per Jake: "Pretom C. with NO circular letter avatar.
   Remove the initial-in-a-circle treatment entirely." The name is now the top
   of the card. */
.tm-id{display:block;min-width:0}
.tm h3{font-size:19px;font-weight:600;letter-spacing:-.018em;line-height:1.15}
.tm-role{margin-top:3px;color:var(--text-2);font-size:13.5px;line-height:1.35}
/* the standout line: the single strongest verified thing about the person, in
   bold above their bullets. Restored from the old team page per Jake, who said
   we had been underselling the team. */
.tm-lead{margin-top:15px;font-weight:600;color:var(--text-1);font-size:14.6px;
  line-height:1.5;letter-spacing:-.008em}
/* the accomplishments restored from the previous team page */
.tm-facts{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.tm-facts li{position:relative;padding-left:15px;color:var(--text-2);font-size:13.8px;line-height:1.5}
.tm-facts li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;
  background:var(--accent);opacity:.55}
.team-note{margin-top:clamp(30px,4vh,42px);max-width:74ch;color:var(--text-2);font-size:15.5px;line-height:1.62}

/* The team credential stat tiles (.tstat) were deleted 2026-08-13 per Jake:
   the "10 people on the team" block, the MBA count and the six-universities
   count all come off the page. The rules are gone with them, and the .tstat
   entries in the motion and reduced-motion groups below were pruned to match. */

/* ============ SECTION SCAFFOLD ============ */
.section{padding-block:var(--section-y)}
.section.tinted{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section.tinted+.section.tinted{border-top:none}
.section-head{max-width:660px}
.section-head.center{max-width:720px;margin-inline:auto;text-align:center}
.section-head h2{margin-top:18px;font-size:clamp(28px,4vw,46px);font-weight:700;line-height:1.08;letter-spacing:-.033em}
.section-head h2:first-child{margin-top:0}
.section-head .lede{margin-top:18px;max-width:58ch;font-size:clamp(16.5px,1.7vw,19px);color:var(--text-2);line-height:1.62}
.section-head.center .lede{margin-inline:auto}

/* ============ PAIN LIST (what's costing you) ============ */
.pain-grid{margin-top:clamp(40px,6vh,64px);display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(26px,3.4vw,44px) clamp(30px,4.2vw,60px)}
@media (max-width:760px){.pain-grid{grid-template-columns:1fr}}
.pain{border-top:1.5px solid var(--line-2);padding-top:22px}
.pain .p-key{font-family:var(--font-m);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-deep)}
.pain h3{margin-top:13px;font-size:clamp(18.5px,1.9vw,22px);font-weight:600;letter-spacing:-.02em}
.pain p{margin-top:11px;color:var(--text-2);font-size:15.5px;line-height:1.62;max-width:48ch}

/* ============ FIX CARDS (what changes) ============ */
.fix-grid{margin-top:clamp(40px,6vh,64px);display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fix-grid.two{grid-template-columns:repeat(2,1fr);max-width:900px}
@media (max-width:900px){.fix-grid,.fix-grid.two{grid-template-columns:1fr;max-width:560px}}
.fix{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(24px,2.8vw,32px);transition:transform .45s var(--ease),box-shadow .5s var(--ease),border-color .45s var(--ease)}
.fix:hover{transform:translateY(-4px);box-shadow:0 26px 50px -34px rgba(16,13,20,.4);border-color:var(--line-2)}
.fix-ic{width:44px;height:44px;border-radius:12px;background:var(--paper-2);border:1px solid var(--line);
  display:grid;place-content:center;color:var(--accent-deep)}
.fix-ic svg{width:21px;height:21px}
.fix h3{margin-top:20px;font-size:clamp(18.5px,2vw,21.5px);font-weight:650;letter-spacing:-.02em;line-height:1.25}
.fix p{margin-top:11px;color:var(--text-2);font-size:15.5px;line-height:1.58}

/* ============ PROOF / EVIDENCE ============
   Added 2026-08-13. Every industry and product page used to carry zero figures,
   so a visitor arriving from search on any page except the homepage saw no
   evidence at all. Two delivered results and three checkable facts, rendered
   the same way on every page. Nothing here is illustrative: if a figure is in
   this block it was measured on real work. */
.proof-grid{margin-top:clamp(40px,6vh,64px);display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(26px,3.4vw,44px) clamp(30px,4.2vw,60px)}
@media (max-width:820px){.proof-grid{grid-template-columns:1fr}}
.proof{border-top:1.5px solid var(--line-2);padding-top:24px}
.pf-num{font-family:var(--font-d);font-weight:700;letter-spacing:-.045em;line-height:1;
  color:var(--accent-deep);font-size:clamp(46px,6.4vw,74px)}
.pf-num .pf-approx{font-size:.52em;vertical-align:.34em;margin-right:.05em;letter-spacing:-.02em}
.pf-lab{margin-top:14px;font-size:clamp(17.5px,1.9vw,20px);font-weight:650;letter-spacing:-.02em;
  color:var(--ink);font-family:var(--font-d);line-height:1.28}
.pf-cap{margin-top:11px;color:var(--text-2);font-size:15.5px;line-height:1.62;max-width:48ch}
.pf-attr{margin-top:13px;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
.proof-check{margin-top:clamp(38px,5vh,56px);display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.proof-check{grid-template-columns:1fr;max-width:560px}}
.pc{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(22px,2.4vw,28px)}
.pc-key{font-family:var(--font-m);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-deep)}
.pc h3{margin-top:12px;font-size:17.5px;font-weight:650;letter-spacing:-.018em;line-height:1.3}
.pc p{margin-top:10px;color:var(--text-2);font-size:15px;line-height:1.58}
.pc a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px}

/* ============ DARK BAND ============ */
.band-dark{background:var(--ink-1);color:var(--dark-1);position:relative;overflow:hidden}
.band-dark::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 46% at 88% 6%,var(--accent-ring),transparent 70%),
            radial-gradient(46% 42% at 6% 96%,rgba(164,23,110,.10),transparent 72%)}
.band-dark .wrap{position:relative;z-index:1}
.band-dark h2{color:var(--dark-1)}
.band-dark .lede{color:var(--dark-2)}
.band-dark .eyebrow{color:var(--accent-soft)}
.band-dark .eyebrow::before{background:var(--accent)}
.op-grid{margin-top:clamp(44px,6.4vh,72px);display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(28px,3.6vw,48px) clamp(32px,4.5vw,64px)}
@media (max-width:760px){.op-grid{grid-template-columns:1fr}}
.op{border-top:1px solid rgba(255,255,255,.13);padding-top:22px}
.op .o-key{font-family:var(--font-m);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-soft)}
.op h3{margin-top:13px;color:var(--dark-1);font-size:clamp(19px,2vw,23px);font-weight:600;letter-spacing:-.02em}
.op p{margin-top:11px;color:var(--dark-2);font-size:15.5px;line-height:1.6;max-width:46ch}

/* ============ STEPS (audit / build / run) ============ */
.steps{margin-top:clamp(40px,6vh,64px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,4.2vw,56px)}
@media (max-width:860px){.steps{grid-template-columns:1fr;gap:36px;max-width:500px}}
.step{border-top:1.5px solid var(--line-2);padding-top:22px}
.band-dark .step{border-top-color:rgba(255,255,255,.13)}
.step .s-num{font-family:var(--font-m);font-size:12.5px;color:var(--accent-deep);letter-spacing:.04em}
.band-dark .step .s-num{color:var(--accent-soft)}
.step h3{margin-top:14px;font-size:clamp(19px,2vw,23px);font-weight:700;letter-spacing:-.022em}
.band-dark .step h3{color:var(--dark-1)}
.step p{margin-top:11px;color:var(--text-2);font-size:15.5px;line-height:1.6;max-width:40ch}
.band-dark .step p{color:var(--dark-2)}

/* ============ PROSE (locations, legal pages, longer passages) ============ */
.prose{margin-top:clamp(30px,4.4vh,46px);max-width:66ch}
.prose p{margin-top:18px;color:var(--text-2);font-size:clamp(16.5px,1.7vw,18px);line-height:1.68}
.prose p:first-child{margin-top:0}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px}
/* Long-form documents (the privacy policy and the terms) run headings and
   lists inside .prose. Everything else here styles paragraphs only, so these
   rules add the two missing elements rather than forking the scale. */
.prose h2{margin-top:clamp(34px,4.6vh,50px);font-size:clamp(20px,2.1vw,24px);
  font-weight:700;line-height:1.24;letter-spacing:-.024em}
.prose h2:first-child{margin-top:0}
.prose ul{margin:18px 0 0;padding-left:1.15em;list-style:disc}
.prose li{margin-top:11px;color:var(--text-2);font-size:clamp(16.5px,1.7vw,18px);line-height:1.68}
.prose li::marker{color:var(--line-2)}
/* A legal document is one continuous read, so the body starts right under the
   hero instead of opening a full section gap the way a marketing page does. */
.section.legal{padding-top:clamp(6px,1vh,14px)}
.section.legal .prose{margin-top:0}

/* ============ LINK ROW (related pages) ============ */
.rel-grid{margin-top:clamp(34px,5vh,52px);display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:860px){.rel-grid{grid-template-columns:1fr;max-width:520px}}
/* The rail tile carries a sentence under its name (Jake, 2026-08-13: nobody
   should have to click a bare product name to find out what it is), so the tile
   aligns to the top rather than the middle and the name and blurb stack. */
.rel{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  padding:18px 22px;color:var(--ink);
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .5s var(--ease)}
.rel-t{display:block;min-width:0}
.rel-n{display:block;font-weight:600;font-size:15.5px;letter-spacing:-.012em;line-height:1.3}
.rel-b{display:block;margin-top:6px;font-weight:400;font-size:13.6px;line-height:1.5;
  letter-spacing:0;color:var(--text-2)}
.rel:hover{transform:translateY(-2px);border-color:var(--line-2);box-shadow:0 18px 40px -30px rgba(16,13,20,.4)}
.rel .ar{flex:none;margin-top:1px;color:var(--accent-deep);transition:transform .35s var(--ease)}
.rel:hover .ar{transform:translateX(3px)}

/* ============ FAQ ============ */
.faq-list{margin-top:clamp(38px,5.4vh,56px);max-width:820px}
.faq-item{border-top:1px solid var(--line-2)}
.faq-item:last-child{border-bottom:1px solid var(--line-2)}
.faq-item summary{list-style:none;cursor:pointer;padding-block:22px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary h3{font-size:clamp(16.5px,1.8vw,19.5px);font-weight:600;letter-spacing:-.017em;color:var(--ink)}
.faq-item .fi-mark{flex:none;width:18px;height:18px;position:relative}
.faq-item .fi-mark::before,.faq-item .fi-mark::after{content:"";position:absolute;background:var(--text-3);transition:transform .3s var(--ease),opacity .3s var(--ease)}
.faq-item .fi-mark::before{top:8px;left:0;width:18px;height:2px}
.faq-item .fi-mark::after{top:0;left:8px;width:2px;height:18px}
.faq-item[open] .fi-mark::after{transform:rotate(90deg);opacity:0}
@media (prefers-reduced-motion:reduce){.faq-item .fi-mark::before,.faq-item .fi-mark::after{transition:none}}
.faq-item p{padding-bottom:24px;color:var(--text-2);font-size:16px;line-height:1.62;max-width:66ch}
.faq-item a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px}

/* ============ CLOSING CTA ============ */
.cta{text-align:center;background:var(--paper-2);border-top:1px solid var(--line)}
.cta h2{font-size:clamp(30px,4.6vw,56px);font-weight:700;letter-spacing:-.038em;line-height:1.05;max-width:18ch;margin-inline:auto}
.cta .cta-sub{margin-top:20px;max-width:50ch;margin-inline:auto;font-size:clamp(16.5px,1.7vw,19px);color:var(--text-2);line-height:1.6}
.cta-actions{margin-top:34px;display:flex;justify-content:center}

/* ============ FOOTER ============ */
.footer{background:var(--paper-2);border-top:1px solid var(--line);padding-block:clamp(48px,6.5vh,72px);color:var(--text-2);font-size:14px}
.foot-top{display:flex;justify-content:space-between;gap:44px;flex-wrap:wrap;align-items:flex-start}
.foot-brand{display:inline-flex;align-items:center;gap:.52em;font-family:var(--font-d);font-weight:700;font-size:19px;color:var(--ink);letter-spacing:-.03em;
  transition:opacity .3s var(--ease)}
.foot-brand:hover{opacity:.72}
.foot-brand img{width:22px}
.foot-tag{margin-top:14px;max-width:34ch;color:var(--text-3);font-size:14px;line-height:1.6}
.foot-links{display:flex;gap:clamp(32px,4.5vw,60px);flex-wrap:wrap}
.foot-col h4{font-family:var(--font-b);font-size:13px;color:var(--ink);margin:0 0 14px;font-weight:600;letter-spacing:-.006em}
.foot-col a{display:block;color:var(--text-2);font-size:14px;padding-block:5px;transition:color .25s ease}
@media (max-width:940px){.foot-col a{padding-block:11px}}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{margin-top:clamp(40px,6vh,56px);padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--text-3)}

/* Newsletter signup band. Layout only: every control inherits the existing
   .lf form styling so the footer does not become a second design. */
.foot-news{display:flex;justify-content:space-between;align-items:flex-start;
  gap:clamp(28px,5vw,64px);flex-wrap:wrap;
  padding-bottom:clamp(36px,5vh,48px);margin-bottom:clamp(36px,5vh,48px);
  border-bottom:1px solid var(--line)}
.foot-news > div{flex:1 1 320px;min-width:0}
.foot-news h4,.foot-news .foot-news-h{font-family:var(--font-b);font-size:15px;color:var(--ink);font-weight:700;letter-spacing:-.01em;
  margin:0;font-weight:600;letter-spacing:-.008em}
.foot-news .foot-tag{margin-top:10px;max-width:44ch}
.lf-news{flex:0 1 380px;min-width:min(100%,280px)}
.lf-news .lf-fine{max-width:44ch}

/* ============================================================
   INDUSTRY SUB-SEGMENTS (2026-08-13, rebuilt to an always-open stack
   2026-08-18)
   A bar of the segments under the hero, then every desk rendered as its
   own always-visible section, stacked in reading order with a hairline
   rule between each -- the same flat, undecorated list treatment as
   .faq-list below, not a card grid. There is nothing to expand or
   collapse: a seg-bar chip or a bookmarked #seg-{sid} link is a plain
   same-page jump to a section that is already fully open, so scrolling
   there is all either one ever does. Only industries with genuinely
   different sub-audiences carry any of this section at all.
   ============================================================ */
.seg-bar{position:sticky;top:66px;z-index:50;background:rgba(252,251,253,.9);
  -webkit-backdrop-filter:saturate(1.7) blur(18px);backdrop-filter:saturate(1.7) blur(18px);
  border-block:1px solid var(--line)}
.seg-bar-in{display:flex;align-items:center;gap:18px;min-height:54px;overflow:hidden}
.seg-bar-label{flex:none;font-family:var(--font-m);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3)}
.seg-bar-links{display:flex;align-items:center;gap:8px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;padding-block:10px;min-width:0}
.seg-bar-links::-webkit-scrollbar{display:none}
.seg-bar-links a{flex:none;font-size:14px;color:var(--text-2);white-space:nowrap;
  padding:7px 14px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);
  transition:color .25s ease,border-color .25s ease}
.seg-bar-links a:hover{color:var(--ink);border-color:var(--text-3)}
@media (max-width:700px){.seg-bar-label{display:none}}

#segments{scroll-margin-top:132px}
.seg-list{margin-top:clamp(34px,5vh,50px)}

/* One flat, full-width row per desk, divided by a hairline rather than
   boxed into a card -- the same list treatment as .faq-item just below,
   chosen because a card grid reads as "pick one" and every desk here is
   already open and reads top to bottom in order. */
.seg{padding-block:clamp(34px,4.8vh,54px);border-top:1px solid var(--line-2);
  scroll-margin-top:132px}
.seg:first-child{border-top:0}
.seg:last-child{border-bottom:1px solid var(--line-2)}
.seg h3{font-size:clamp(19px,2.1vw,23px);letter-spacing:-.024em;line-height:1.18}

.seg-cols{margin-top:18px;display:grid;grid-template-columns:repeat(2,1fr);gap:28px 40px}
@media (max-width:760px){.seg-cols{grid-template-columns:1fr;gap:22px}}
.seg-key{display:block;font-family:var(--font-m);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3)}

/* Each sentence of the problem/build copy is its own list item, mechanically
   split from the same paragraph seg_teaser() used to draw from -- multiple
   discrete points, not one run-on paragraph. The marker is a plain dot in
   the page's one accent colour, not an icon. */
.seg-points{margin-top:9px;list-style:none;padding:0}
.seg-points li{position:relative;padding-left:17px;color:var(--text-2);
  font-size:15.5px;line-height:1.6}
.seg-points li + li{margin-top:9px}
.seg-points li::before{content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.55}

.seg-cta{margin-top:24px}

/* a text control that reads as a link, used where a booking anchor used to be */
.lf-linkbtn{border:0;background:none;padding:0;cursor:pointer;font-family:inherit;
  font-size:inherit;color:var(--ink);border-bottom:1px solid var(--line-2)}
.lf-linkbtn:hover{color:var(--accent-deep);border-bottom-color:var(--accent)}

/* ============ MOBILE TOUCH AND LEGIBILITY (added 2026-08-13) ============
   Two things get fixed here for phones. Tap targets that read as buttons or
   standalone links are given a 44px hit area, using a pseudo-element so the
   visual layout does not shift. And the smallest mono micro-labels are lifted
   so nothing on a phone renders below 11.5px. */
@media (max-width:940px){
  /* the hit area is painted by ::before so type and spacing stay put */
  .link-arrow,.brand,.foot-brand,.lf-linkbtn{position:relative}
  .link-arrow::before,.brand::before,.foot-brand::before,.lf-linkbtn::before{
    content:"";position:absolute;left:0;right:0;top:50%;translate:0 -50%;
    height:44px;min-width:44px;pointer-events:auto}
  /* the sticky sub-segment bar on the industry pages */
  .seg-bar-label{font-size:11.5px}
  .seg-key{font-size:11.5px}
  .cred-label{font-size:11.5px}
  .seg-bar a,.seg-bar button{min-height:44px;display:inline-flex;align-items:center}
}
@media (max-width:940px){.disc-tag,.niche em{font-size:11.5px}}

/* ==========================================================================
   VISUAL SYSTEM, 2026-08-13. Jake's direction, applied in one place so the
   decisions are readable and reversible. Everything below is an override of
   the rules above it, deliberately, because three people were editing this
   build at once and an appended block is the only edit that cannot silently
   lose someone else's work.
   ========================================================================== */

/* ---- 1. TYPE. The monospace face is gone ---------------------------------
   Jake: "take away that hacker-y font." Every label that was set in Geist Mono
   is now the body sans at 600 with wider tracking, which is the label
   treatment from the Command Center redesign (its table headers and card
   labels). The token --font-m still exists and still resolves, so no rule
   above had to be found and rewritten, but it now points at Inter. Weight
   carries what the mono's fixed widths used to carry, and numerals are set
   tabular so anything numeric holds its column. */
.eyebrow,.cred-label,.founder-role,.pain .p-key,.op .o-key,.step .s-num,
.seg-bar-label,.seg-key,.icp2-sub,.niche em,.disc-tag,.tm-disc,.lf-ref{
  font-family:var(--font-b);
  font-variant-numeric:tabular-nums lining-nums;
  -webkit-font-feature-settings:"tnum" 1;font-feature-settings:"tnum" 1}
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.115em;color:var(--accent-deep)}
.eyebrow::before{width:20px;height:2px;background:var(--accent);opacity:1;border-radius:2px}
.pain .p-key,.op .o-key{font-size:11.5px;font-weight:600;letter-spacing:.105em}
.step .s-num{font-size:12.5px;font-weight:700;letter-spacing:.06em}
.cred-label,.seg-bar-label,.seg-key{font-size:11.5px;font-weight:600;letter-spacing:.1em}
.founder-role{font-size:12px;font-weight:600;letter-spacing:.1em}
.icp2-sub{font-size:11.5px;font-weight:600;letter-spacing:.075em;color:var(--dark-3)}
.niche em,.disc-tag{font-size:11px;font-weight:600;letter-spacing:.1em}
/* This one is a running sentence, so uppercase mono was always the wrong
   answer for it. It reads as small print now, which is what it is. */
.tm-disc{font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--text-3);line-height:1.5}

/* ---- 2. MOTION -----------------------------------------------------------
   Jake: "slow and sleek and premium... some slight 3D aspects, very slight...
   it can't look cheesy."
   The easing is expo-out: it leaves immediately and takes a long time to
   settle, which is the difference between a transition that feels expensive
   and one that feels snappy. Durations went from .3-.5s to .4-.95s.
   The 3D is real perspective rather than a fake scale. A card's parent grid
   carries perspective:1500px and the card translates 14px toward the viewer on
   hover, which works out to about 0.9% of apparent growth. It reads as the
   card lifting off the page instead of inflating.
   NOTHING here gates readability. Every hide-then-reveal rule is still behind
   `html.js`, and the block at the end turns all of it off under
   prefers-reduced-motion. */
.js .reveal{transform:translateY(20px);
  transition:opacity var(--t-3) var(--ease),transform var(--t-3) var(--ease)}
.js .reveal.d1{transition-delay:.09s}
.js .reveal.d2{transition-delay:.18s}
.js .reveal.d3{transition-delay:.27s}
.js .reveal.d4{transition-delay:.36s}
.js .reveal.d5{transition-delay:.45s}

/* the surfaces that lift. The grid is the perspective host so the vanishing
   point is shared by every card in the row, which is what stops the effect
   reading as each tile doing its own thing. */
.out-grid,.prod-row,.prod-grid-sm,.svc-grid,.fix-grid,.icp2-grid,.team-grid,
.rel-grid,.niche-grid{
  perspective:var(--depth);perspective-origin:50% 38%}
.out,.prod,.prod-sm,.svc,.fix,.tm,.rel,.icp2-tile,.niche{
  box-shadow:var(--shadow-1);
  transition:transform var(--t-2) var(--ease),
             box-shadow var(--t-2) var(--ease),
             border-color var(--t-2) var(--ease),
             background var(--t-1) var(--ease)}
.out:hover,.prod:hover,.svc:hover,.fix:hover,.tm:hover{
  transform:translate3d(0,-4px,14px);box-shadow:var(--shadow-2);border-color:var(--line-2)}
.prod-sm:hover,.rel:hover,.niche:hover{
  transform:translate3d(0,-2px,8px);box-shadow:var(--shadow-2);border-color:var(--line-2)}
.icp2-tile{box-shadow:none}
.icp2-tile:hover{transform:translate3d(0,-4px,14px);
  box-shadow:0 30px 60px -34px rgba(8,8,12,.75);border-color:var(--accent-line)}

/* controls lift without perspective: a button that grows is the cheesy version */
.btn-primary,.nav-cta,.lf-submit,.prod-start{
  transition:transform var(--t-2) var(--ease),box-shadow var(--t-2) var(--ease),
             background var(--t-1) var(--ease),border-color var(--t-1) var(--ease)}
.btn-primary:hover,.lf-submit:hover{transform:translateY(-2px);
  box-shadow:0 20px 40px -18px rgba(16,17,22,.5)}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 14px 28px -14px rgba(16,17,22,.48)}
.btn-primary .ar,.link-arrow .ar,.rel .ar,.prod-start .ar,.lf-submit .ar{
  transition:transform var(--t-2) var(--ease)}
.nav-links a,.foot-col a,.link-arrow,.logo-mono{
  transition:color var(--t-1) var(--ease),opacity var(--t-1) var(--ease)}

@media (prefers-reduced-motion:reduce){
  .out,.prod,.prod-sm,.svc,.fix,.tm,.rel,.icp2-tile,.niche,
  .btn-primary,.nav-cta,.lf-submit,.prod-start,.brand,.brand img,
  .out:hover,.prod:hover,.svc:hover,.fix:hover,.tm:hover,
  .prod-sm:hover,.rel:hover,.niche:hover,.icp2-tile:hover,
  .btn-primary:hover,.lf-submit:hover,.nav-cta:hover{
    transform:none!important;transition:none!important}
  .out-grid,.prod-row,.prod-grid-sm,.svc-grid,.fix-grid,.icp2-grid,.team-grid,
  .rel-grid,.niche-grid{perspective:none}
}

/* ---- 3. CARDS ------------------------------------------------------------
   Borrowed from the Command Center: a hairline border does the separating and
   the resting shadow only says "this floats", with the second, deeper step
   held back for hover. Radii tightened from 12/18/24 to 10/14/18 in the token
   block above, which is the Command Center's scale and reads less soft. */
.out,.prod,.svc,.fix,.lead-block{border-radius:var(--r-l)}
.prod-sm,.tm,.rel,.niche,.icp2-tile{border-radius:var(--r-m)}

/* ---- 4. CREDIBILITY, MADE PROMINENT --------------------------------------
   Jake: "Claude partner and Fortune 500 experience have to be way bigger, and
   way more noticeable. They have to be in pink or something like that."
   They were 11.5px uppercase grey micro-type at the bottom of the hero. They
   are now 15px badges in the accent, sitting in the first viewport, roughly
   two and a half times the type size they had and the only coloured thing on
   the screen.
   ON THE ANTHROPIC MARK: the badge carries assets/claude-symbol.svg, which is
   Anthropic's Claude symbol and was already on this site in the credibility
   band. It is rendered as a CSS mask in a single colour, exactly like the
   Microsoft, NASA and Dartmouth marks below it, so it reads as one entry in a
   monochrome list of marks and not as a co-branded lockup. Nothing about the
   relationship is stated beyond "Claude partner", which is what the Claude
   Partner Network membership supports. No logo was drawn or invented. */
.cred-rail{display:flex;align-items:center;justify-content:center;
  gap:10px 12px;flex-wrap:wrap}
.cr-badge{display:inline-flex;align-items:center;gap:9px;
  padding:9px 17px 9px 13px;border-radius:999px;
  background:var(--card);border:1px solid var(--accent-line);
  box-shadow:var(--shadow-1);
  font-family:var(--font-b);font-size:15px;font-weight:600;
  letter-spacing:-.006em;line-height:1.2;color:var(--accent-deep);
  white-space:nowrap}
.cr-mark{flex:none;width:21px;height:21px;background:var(--accent);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
/* the second badge has no mark of its own, so it fills the same 21px slot with
   a plain accent roundel and the two badges keep a common left rhythm */
.cr-dot{flex:none;width:21px;height:21px;display:grid;place-content:center}
.cr-dot::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent)}
@media (max-width:520px){
  .cr-badge{font-size:13.5px;padding:8px 14px 8px 11px;gap:8px;white-space:normal}
  .cr-mark,.cr-dot{width:18px;height:18px}
}

/* ---- 5. THE LOGO STRIP ----------------------------------------------------
   ONE ROW, 2026-08-13 (Jake): the schools and the companies sit together under
   a single "Team members from" label, so the band reads as one claim.
   RE-MEASURED THE SAME DAY, because Cognizant, NASA and Perplexity still read
   small next to the others after the previous pass. Each mask was rasterised at
   1600px and its alpha profile measured, which gave the real cap band, ink
   extents and ink density per mark instead of the hand-typed numbers the
   previous pass used. Two of those numbers were wrong: Cognizant's cap fraction
   was read as 0.79 when the artwork measures 0.649, so its letters were
   rendering at a 9.05px cap against everyone else's 11.0px, and NASA, being
   all caps with no ascender or descender, carried a shorter silhouette than
   the marks around it at the same cap height.
   THE FIX:
     a. All six wordmarks are sized so their measured cap band renders at
        exactly 11.6px. Width follows the measured aspect ratio, so nothing is
        squashed. Cognizant gains 28%, NASA 5%.
     b. The two symbols carry no cap band, so they are sized off measured ink
        density instead: Microsoft is a solid block (density 0.90) and sits at
        1.15x the cap, Perplexity is a thin outline (density 0.34) and sits at
        1.65x, which is where it stopped reading as a speck next to the
        wordmarks at 8x. Perplexity also goes to full opacity.
     c. Opacity follows measured ink density, 0.55 x (0.395/density)^0.6, so the
        marks carry equal perceived weight rather than equal alpha. The three
        marks Jake flagged were nudged up from the formula after checking an
        8x crop, because it under-reads thin outline strokes and light serifs.
     d. --ly centres each mark's optical band (the cap band for wordmarks, the
        ink box for symbols) on the row's midline. Cognizant's correction is
        large because its long descending swoosh sits well below the baseline.
   These values are mirrored verbatim in index.html. Change both together. */
.cred{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--paper-2)}
.cred-in{display:block;padding-block:clamp(24px,3.4vh,34px);text-align:left}
.cred-strips{display:grid;grid-template-columns:max-content minmax(0,1fr);
  align-items:center;gap:clamp(13px,1.8vh,18px) clamp(20px,3vw,34px);
  width:fit-content;max-width:100%;margin-inline:auto}
.cred-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px clamp(22px,2.8vw,34px)}
.cred-label{color:var(--text-3);text-transform:uppercase;white-space:nowrap}
.logo-mono{display:inline-block;
  height:var(--lh);width:calc(var(--lh) * var(--lar));
  background:var(--ink);opacity:var(--lop,.55);
  translate:0 var(--ly,0);
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain}
.logo-mono:hover{opacity:calc(var(--lop,.55) * 1.45)}
/* wordmark box height = 11.6px cap / measured cap fraction; symbol box height =
   (11.6px x density multiplier) / measured ink fraction; width = height x
   measured aspect ratio; opacity = 0.55 x (0.395 / measured density)^0.6 */
.lg-msft{--lh:18.16px;--lar:.9265;--lop:.40;--ly:0}
.lg-trp{--lh:16.07px;--lar:6.2500;--lop:0.61;--ly:0.47px}
.lg-cog{--lh:22.45px;--lar:4.3478;--lop:0.66;--ly:2.29px}
.lg-ppx{--lh:25.08px;--lar:.8069;--lop:1;--ly:0}
.lg-nasa{--lh:17.98px;--lar:3.3333;--lop:0.64;--ly:0.16px}
.lg-ms{--lh:18.57px;--lar:7.0186;--lop:0.72;--ly:-2.43px}
.lg-dart{--lh:16.10px;--lar:5.8608;--lop:0.84;--ly:-0.41px}
.lg-brown{--lh:15.61px;--lar:5.3872;--lop:0.74;--ly:0.10px}
.lg-cwru{--lh:15.46px;--lar:3.6117;--lop:0.58;--ly:0.10px}
@media (max-width:760px){
  .cred-strips{grid-template-columns:1fr;gap:9px 0;width:100%;margin-inline:0}
  .cred-row{gap:12px 24px}
}

/* ---- 6. ACCENT DISCIPLINE ------------------------------------------------
   The accent appears in a fixed set of roles and nowhere else: micro labels,
   the eyebrow rule, icon chips, list marks, the credibility badges, link hover
   and the focus ring. Anything that used to be a purple-to-pink gradient wash
   is either a single flat accent or is gone. */
.out-ic,.svc-ic,.fix-ic,.prod-ic{color:var(--accent);
  background:var(--accent-tint);border-color:var(--accent-line)}
.tm-mark{color:var(--accent);background:var(--accent-tint);border-color:var(--accent-line)}
.tm-facts li::before,.pain .p-key,.ls-points li::before{opacity:1}
.tm-facts li::before,.ls-points li::before{background:var(--accent)}
.cred-sep{background:var(--accent);opacity:.55}
.band-dark .eyebrow{color:var(--accent-soft)}
.op .o-key,.band-dark .step .s-num{color:var(--accent-soft)}
.cr-claude{-webkit-mask-image:url(claude-symbol.svg);mask-image:url(claude-symbol.svg)}
.cred-in > .cred-rail{justify-content:center;margin-bottom:clamp(18px,2.4vh,26px)}

/* ===== forms.css ===== */
/* The three overlay roots carry the `hidden` attribute in the markup, so a
   page whose stylesheet never arrives does not end with an inline copy of the
   popup form and the booking dialog as readable content. Once this file IS
   loaded, the attribute stops doing the hiding and the existing
   visibility/display rules take over, so opening still works. */
.lp-overlay[hidden],.lp-slide[hidden],.bk-overlay[hidden]{display:revert}

/* ============================================================
   Terso AI lead capture: inline forms + popups.
   Loaded by every page (homepage inlines its own design system,
   subpages load site.css first). Uses only the shared tokens
   defined in :root, so it inherits the site design system and
   never forks it.
   ============================================================ */

/* ---------------------------------------------------------- shared controls */
.lf{--lf-gap:14px}
.lf *{box-sizing:border-box}

.lf-field{display:block;text-align:left}
.lf-field + .lf-field{margin-top:var(--lf-gap)}
.lf-label{display:block;font-family:var(--font-b);font-size:13.5px;font-weight:500;
  letter-spacing:-.004em;color:var(--text-2);margin-bottom:7px}
.lf-label .lf-opt{color:var(--text-3);font-weight:400}
.lf-req{color:var(--accent-deep);margin-left:2px}

.lf-input,.lf-select,.lf-textarea{
  width:100%;display:block;font-family:var(--font-b);font-size:16px;line-height:1.5;
  color:var(--text-1);background:var(--card);
  border:1px solid var(--line-2);border-radius:var(--r-s);
  padding:13px 14px;appearance:none;-webkit-appearance:none;
  transition:border-color .25s ease,box-shadow .25s ease,background .25s ease}
.lf-textarea{min-height:104px;resize:vertical}
.lf-select{padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d6680' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:17px}
.lf-input:hover,.lf-select:hover,.lf-textarea:hover{border-color:var(--text-3)}
.lf-input:focus,.lf-select:focus,.lf-textarea:focus{
  outline:none;border-color:var(--accent-deep);box-shadow:0 0 0 3px var(--accent-ring-strong)}
.lf-input:focus-visible,.lf-select:focus-visible,.lf-textarea:focus-visible{outline:none}
.lf-input[aria-invalid="true"],.lf-select[aria-invalid="true"],.lf-textarea[aria-invalid="true"]{
  border-color:#b4232b;background:#fffafa}
.lf-input[aria-invalid="true"]:focus,.lf-textarea[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(180,35,43,.14)}

.lf-err{display:none;margin-top:6px;font-size:13.5px;line-height:1.45;color:#a51f27}
.lf-field.is-invalid .lf-err{display:block}

/* honeypot: off-screen for sighted users, hidden from assistive tech */
.lf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.lf-row{display:grid;gap:var(--lf-gap);grid-template-columns:1fr 1fr;align-items:start}
.lf-row + .lf-field,.lf-field + .lf-row,.lf-row + .lf-row{margin-top:var(--lf-gap)}
/* inside a row the gap does the spacing, so the sibling rule must not also
   push the second field down and break the baseline across the pair */
.lf-row > .lf-field + .lf-field{margin-top:0}
@media (max-width:620px){.lf-row{grid-template-columns:1fr}}

.lf-actions{margin-top:20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.lf-submit{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border:0;
  border-radius:999px;background:var(--ink);color:var(--paper);
  font-family:var(--font-b);font-size:15.5px;font-weight:500;letter-spacing:-.006em;cursor:pointer;
  transition:transform .4s var(--ease),box-shadow .5s var(--ease),opacity .25s ease}
.lf-submit:hover{transform:translateY(-2px);box-shadow:0 22px 46px -20px rgba(16,13,20,.58)}
.lf-submit[disabled]{opacity:.6;cursor:progress;transform:none;box-shadow:none}
.lf-submit .ar{transition:transform .35s var(--ease)}
.lf-submit:hover .ar{transform:translateX(3px)}
.lf-alt{font-size:14.5px;color:var(--text-3)}
.lf-alt a{color:var(--ink);border-bottom:1px solid var(--line-2)}
.lf-alt a:hover{color:var(--accent-deep);border-bottom-color:var(--accent)}

.lf-fine{margin-top:16px;font-size:13px;line-height:1.55;color:var(--text-3);max-width:56ch}
.lf-fine a{border-bottom:1px solid var(--line-2)}

/* status region: reserves no space until it has something to say */
.lf-status{margin-top:16px}
.lf-status:empty{margin-top:0}
.lf-note{display:flex;gap:11px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-s);
  font-size:14.5px;line-height:1.55;text-align:left}
.lf-note.ok{background:#f0fbf4;border:1px solid #bfe6cd;color:#14562f}
.lf-note.bad{background:#fff5f5;border:1px solid #f0c9cb;color:#8f1c23}
.lf-note a{text-decoration:underline}
.lf-note-ic{flex:none;width:18px;height:18px;margin-top:1px}

/* success panel replaces the fields once a lead is stored */
.lf-done{text-align:left;padding:4px 0}
.lf-done h3{font-size:20px;letter-spacing:-.02em}
.lf-done p{margin-top:10px;color:var(--text-2);font-size:15.5px;line-height:1.6}
.lf-done .lf-ref{margin-top:14px;font-family:var(--font-m);font-size:12.5px;color:var(--text-3);
  letter-spacing:.02em}

/* ---------------------------------------------------------- inline section */
.lead-block{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(24px,3.4vw,40px);box-shadow:0 26px 60px -46px rgba(16,13,20,.42);text-align:left}
.lead-block .lb-head h2,.lead-block .lb-head h3{font-size:clamp(21px,2.4vw,27px);letter-spacing:-.028em;line-height:1.14}
.lead-block .lb-head p{margin-top:11px;color:var(--text-2);font-size:16px;line-height:1.6;max-width:52ch}
.lead-block .lf{margin-top:24px}

/* two-column: copy on the left, form on the right */
.lead-split{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:clamp(28px,4vw,60px);align-items:start;text-align:left}
@media (max-width:900px){.lead-split{grid-template-columns:1fr}}
.lead-split .ls-copy h2{font-size:clamp(27px,3.6vw,42px);line-height:1.08;letter-spacing:-.033em}
.lead-split .ls-copy p{margin-top:18px;color:var(--text-2);font-size:clamp(16px,1.6vw,18px);line-height:1.62;max-width:44ch}
.lead-split .ls-points{margin:24px 0 0;padding:0;list-style:none}
.lead-split .ls-points li{position:relative;padding-left:24px;margin-top:12px;
  color:var(--text-2);font-size:15.5px;line-height:1.58}
.lead-split .ls-points li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;
  border-radius:3px;background:var(--accent);opacity:.55}

/* "What do you want built?" band: centred under a centred head, with the
   free-text box given the height that tells someone to actually write in it */
.ba-block{max-width:760px;margin-inline:auto;margin-top:clamp(28px,3.4vw,40px)}
.ba-block .lf-textarea{min-height:170px}
@media (max-width:600px){.ba-block .lf-textarea{min-height:140px}}

/* the closing CTA is centred, so the form inside it needs a leash */
.cta .lead-block{max-width:620px;margin-inline:auto;margin-top:36px}
.cta .lead-block .lb-head{text-align:left}
.cta-or{margin-top:26px;font-size:14px;color:var(--text-3);letter-spacing:.02em}

/* dark band variant, so a form can sit on the ink sections */
.band-dark .lead-block{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.14);box-shadow:none}
.band-dark .lead-block .lb-head h2,.band-dark .lead-block .lb-head h3{color:var(--dark-1)}
.band-dark .lead-block .lb-head p,.band-dark .lf-fine{color:var(--dark-3)}
.band-dark .lf-label{color:var(--dark-2)}
.band-dark .lf-input,.band-dark .lf-select,.band-dark .lf-textarea{
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.18);color:var(--dark-1)}
.band-dark .lf-input::placeholder,.band-dark .lf-textarea::placeholder{color:var(--dark-3)}
.band-dark .lf-submit{background:var(--paper);color:var(--ink)}
.band-dark .lf-alt,.band-dark .lf-alt a{color:var(--dark-2)}

/* ---------------------------------------------------------- popup: modal */
/* flex-start plus margin:auto centres the panel when it fits and keeps the top
   of it reachable when it does not, which is the case on short phone screens.
   Hidden by visibility rather than display, so closing animates too. */
.lp-overlay{position:fixed;inset:0;z-index:200;
  display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(16px,4vh,48px) clamp(14px,4vw,32px);
  overflow-y:auto;background:rgba(11,8,16,.52);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .32s var(--ease),visibility 0s linear .32s}
.lp-overlay.is-open{opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .32s var(--ease),visibility 0s linear 0s}
.lp-panel{margin:auto;position:relative;width:100%;max-width:520px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(26px,3.4vw,38px);box-shadow:0 50px 110px -40px rgba(8,6,14,.6);
  text-align:left;
  opacity:0;transform:translateY(16px) scale(.985);
  transition:opacity .36s var(--ease),transform .42s var(--ease)}
.lp-overlay.is-open .lp-panel{opacity:1;transform:none;transition-delay:.04s}
@keyframes lp-rise{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .lp-overlay,.lp-overlay.is-open{transition:visibility 0s linear 0s}
  .lp-panel,.lp-overlay.is-open .lp-panel{transition:none;transform:none}
}
.lp-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-m);font-size:11.5px;
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep)}
.lp-eyebrow::before{content:"";width:20px;height:1.5px;background:var(--accent);opacity:.7;border-radius:2px}
.lp-panel h2{margin-top:14px;font-size:clamp(22px,2.6vw,28px);line-height:1.13;letter-spacing:-.03em;max-width:20ch}
.lp-panel .lp-sub{margin-top:11px;color:var(--text-2);font-size:15.5px;line-height:1.58;max-width:46ch}
.lp-panel .lf{margin-top:22px}
/* 44px, not 38px: this is the control a thumb hunts for to dismiss a modal. */
.lp-close{position:absolute;top:10px;right:10px;width:44px;height:44px;display:grid;place-content:center;
  border-radius:10px;border:1px solid transparent;background:transparent;color:var(--text-3);cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease}
.lp-close:hover{background:var(--paper-2);color:var(--ink);border-color:var(--line)}
.lp-close svg{width:19px;height:19px}
.lp-decline{margin-top:16px;background:none;border:0;padding:12px 0;min-height:44px;cursor:pointer;
  font-family:var(--font-b);font-size:14px;color:var(--text-3);text-align:left}
.lp-decline:hover{color:var(--ink)}
/* a phone screen has no room to spare, so the popup tightens up rather than
   pushing its own submit button below the fold */
@media (max-width:620px){
  .lp-overlay{padding:14px 12px}
  .lp-panel{padding:22px 20px 24px}
  .lp-panel h2{margin-top:12px;font-size:21px}
  .lp-panel .lp-sub{font-size:15px}
  .lp-panel .lf{--lf-gap:11px;margin-top:18px}
  .lp-panel .lf-textarea{min-height:74px}
  .lp-panel .lf-fine{font-size:12.5px}
  /* the free-text field is optional, and on a phone it costs more room than it
     earns, so the popup asks only for the three fields that matter.
     Selected by attribute rather than :has(), because :has() is not universal
     and a browser without it silently showed a four-field popup on a phone,
     which is the one thing the popup rule forbids. */
  .lp-panel .lf-field[data-field="message"]{display:none}
}
/* focus lands on the panel when the popup opens so a screen reader starts at
   the heading. It is a container, never a control, so it paints no ring: the
   dialog role, the modal flag, and the label do the announcing. */
.lp-panel:focus,.lp-panel:focus-visible,
.lp-slide [data-popup-panel]:focus,.lp-slide [data-popup-panel]:focus-visible{outline:none}

/* ---------------------------------------------------------- popup: slide-in */
.lp-slide{position:fixed;z-index:190;right:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.4vw,26px);
  width:min(380px,calc(100vw - 28px));display:none;
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-m);
  padding:20px 22px 22px;box-shadow:0 34px 80px -34px rgba(8,6,14,.5);text-align:left}
.lp-slide.is-open{display:block;animation:lp-slide-in .5s var(--ease) both}
@keyframes lp-slide-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lp-slide.is-open{animation:none}}
.lp-slide h2{font-size:18.5px;line-height:1.22;letter-spacing:-.025em;max-width:22ch;padding-right:42px}
.lp-slide p{margin-top:9px;color:var(--text-2);font-size:14.5px;line-height:1.55}
.lp-slide .lp-slide-actions{margin-top:16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.lp-slide .lf-submit{padding:12px 22px;font-size:15px}
@media (max-width:520px){.lp-slide{left:14px;right:14px;width:auto}}

/* nothing on this page should ever push the document sideways */
.lp-overlay,.lp-slide{max-width:100vw}

/* ============================================================
   BOOKING MODAL (`assets/book.js`)
   Every "book a call" path on the site opens this. Scheduling
   happens inside the page: the calendar is embedded in the
   dialog, and the alternative is a short form in the same
   dialog. No booking link navigates off the site.
   ============================================================ */

/* buttons carry the same visual as the anchor version of the CTA */
button.btn-primary,button.link-arrow{border:0;background-clip:padding-box;cursor:pointer;
  font-family:var(--font-b);letter-spacing:-.006em}
button.link-arrow{background:none;padding:0}

/* The dialog stays in flow and is hidden with visibility rather than
   display:none, so both opening AND closing are animated. `visibility` is in
   the transition list so the overlay is not focusable or hit-testable once the
   fade has finished. book.js only toggles `.is-open`; no JS change was needed
   to get the closing motion. */
.bk-overlay{position:fixed;inset:0;z-index:220;
  display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(12px,3vh,40px) clamp(12px,3vw,28px);overflow-y:auto;
  background:rgba(11,8,16,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .34s var(--ease),visibility 0s linear .34s,backdrop-filter .34s var(--ease)}
.bk-overlay.is-open{opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .34s var(--ease),visibility 0s linear 0s,backdrop-filter .34s var(--ease)}
.bk-panel{margin:auto;position:relative;width:100%;max-width:760px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(24px,3vw,36px);box-shadow:0 50px 110px -40px rgba(8,6,14,.6);
  text-align:left;
  opacity:0;transform:translateY(18px) scale(.984);
  transition:opacity .38s var(--ease),transform .44s var(--ease)}
.bk-overlay.is-open .bk-panel{opacity:1;transform:none;transition-delay:.04s}
@media (prefers-reduced-motion:reduce){
  .bk-overlay,.bk-overlay.is-open{transition:visibility 0s linear 0s}
  .bk-panel,.bk-overlay.is-open .bk-panel{transition:none;transform:none}
}
.bk-panel:focus,.bk-panel:focus-visible{outline:none}
.bk-panel h2{margin-top:12px;font-size:clamp(22px,2.5vw,29px);line-height:1.12;
  letter-spacing:-.03em;max-width:22ch;padding-right:44px}
.bk-sub{margin-top:10px;color:var(--text-2);font-size:15.5px;line-height:1.58;max-width:56ch}

.bk-tabs{margin-top:22px;display:inline-flex;gap:4px;padding:4px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:999px}
.bk-tab{border:0;background:none;cursor:pointer;font-family:var(--font-b);font-size:14.5px;
  font-weight:500;color:var(--text-2);padding:9px 18px;border-radius:999px;
  transition:background .25s ease,color .25s ease}
.bk-tab:hover{color:var(--ink)}
.bk-tab.is-on{background:var(--card);color:var(--ink);box-shadow:0 2px 8px -4px rgba(16,13,20,.4)}

.bk-pane{margin-top:20px}
.bk-pane[hidden]{display:none}
.bk-cal{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;
  background:var(--paper-2);min-height:640px;position:relative}
.bk-cal .calendly-inline-widget{min-width:280px;height:640px}
.bk-fallback{padding:26px;color:var(--text-2);font-size:15px;line-height:1.6}
.bk-note{margin-top:14px;font-size:13px;color:var(--text-3)}

/* CALENDAR LOADING STATE, 2026-08-14. Calendly is fetched on the click that
   asks for it, so there is a real gap between the dialog opening and the
   iframe painting. This fills it from the first frame, so the dialog reads as
   answered rather than broken. assets/book.js creates and removes the node. */
.cal-loading{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;background:var(--paper-2);
  color:var(--text-3);font-size:14.5px;letter-spacing:.01em}
.cal-spin{width:26px;height:26px;border-radius:50%;
  border:2px solid var(--line-2);border-top-color:var(--accent);
  animation:cal-spin .8s linear infinite}
@keyframes cal-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .cal-spin{animation:none;border-top-color:var(--line-2);opacity:.5}
}

@media (max-width:620px){
  .bk-overlay{padding:10px}
  .bk-panel{padding:20px 18px 22px}
  .bk-panel h2{font-size:21px;padding-right:40px}
  .bk-tabs{width:100%;justify-content:stretch}
  .bk-tab{flex:1;padding:9px 10px}
  .bk-cal,.bk-cal .calendly-inline-widget{min-height:780px;height:780px}
}
.bk-overlay{max-width:100vw}

/* ---------------------------------------------------------- product lead form
   The compact form the product tiles open. Same controls, fewer fields. */
.bk-panel .lf{margin-top:4px}
.bk-panel .lf-fine{max-width:60ch}

/* ============================================================
   FREE AI OPPORTUNITY AUDIT (`assets/audit.js`)
   One question on screen at a time, then the finished audit in
   the same place. Uses only the shared tokens, so it inherits
   the site design system rather than forking it.
   ============================================================ */

.aw-shell{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(24px,3.4vw,44px);box-shadow:0 26px 60px -46px rgba(16,13,20,.42);
  text-align:left;max-width:760px;margin-inline:auto}

/* progress: one segment per question, filled as they are answered */
.aw-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.aw-count{font-family:var(--font-m);font-size:11.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3)}
.aw-progress{display:flex;gap:5px;flex:1;min-width:140px;max-width:260px}
.aw-progress i{flex:1;height:3px;border-radius:2px;background:var(--line-2);
  transition:background .4s var(--ease)}
.aw-progress i.on{background:var(--accent)}

.aw-step{display:none}
.aw-step.is-on{display:block;animation:aw-in .34s var(--ease) both}
@keyframes aw-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.aw-step.is-on{animation:none}}
.aw-q{margin-top:22px;font-size:clamp(21px,2.5vw,28px);line-height:1.16;letter-spacing:-.03em;
  max-width:24ch}
.aw-hint{margin-top:10px;color:var(--text-2);font-size:15.5px;line-height:1.58;max-width:50ch}
.aw-field{margin-top:20px}

/* chips: a tap answers the question, no dropdown to open */
.aw-options{margin-top:20px;display:flex;flex-wrap:wrap;gap:9px}
.aw-chip{font-family:var(--font-b);font-size:15px;line-height:1.3;color:var(--text-1);min-height:44px;
  background:var(--paper-2);border:1px solid var(--line-2);border-radius:999px;
  padding:11px 18px;cursor:pointer;text-align:left;
  transition:border-color .22s ease,background .22s ease,color .22s ease,transform .22s var(--ease)}
.aw-chip:hover{border-color:var(--text-3);transform:translateY(-1px)}
.aw-chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.aw-chip:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}
.aw-multi-note{margin-top:11px;font-size:13px;color:var(--text-3)}

.aw-actions{margin-top:26px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.aw-next{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border:0;border-radius:999px;
  background:var(--ink);color:var(--paper);font-family:var(--font-b);font-size:15.5px;font-weight:500;
  letter-spacing:-.006em;cursor:pointer;
  transition:transform .4s var(--ease),box-shadow .5s var(--ease)}
.aw-next:hover{transform:translateY(-2px);box-shadow:0 22px 46px -20px rgba(16,13,20,.58)}
.aw-next .ar{transition:transform .35s var(--ease)}
.aw-next:hover .ar{transform:translateX(3px)}
.aw-back{background:none;border:0;padding:6px 2px;cursor:pointer;font-family:var(--font-b);
  font-size:14.5px;color:var(--text-3)}
.aw-back:hover{color:var(--ink)}
.aw-back[hidden]{display:none}

.aw-err{display:none;margin-top:16px;padding:12px 15px;border-radius:var(--r-s);
  background:#fff5f5;border:1px solid #f0c9cb;color:#8f1c23;font-size:14.5px;line-height:1.5}
.aw-err.show{display:block}
.aw-fine{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.55;color:var(--text-3)}
.aw-fine a{border-bottom:1px solid var(--line-2)}

/* the wait: staged progress, because a dead spinner reads as broken */
.aw-loading{max-width:760px;margin-inline:auto;text-align:center;
  padding:clamp(40px,7vw,80px) clamp(20px,4vw,40px)}
.aw-loading[hidden]{display:none}
.aw-loading h2{font-size:clamp(21px,2.5vw,27px);letter-spacing:-.03em}
.aw-loading-msg{margin-top:12px;color:var(--text-2);font-size:16px;min-height:1.6em}
.aw-loading-bar{margin:26px auto 0;max-width:340px;height:4px;border-radius:3px;
  background:var(--line-2);overflow:hidden}
.aw-loading-fill{display:block;height:100%;width:10%;border-radius:3px;background:var(--accent);
  transition:width .45s var(--ease)}

/* ---------------------------------------------------------- the audit itself */
.ao-result[hidden]{display:none}
.ao-result:focus,.ao-result:focus-visible{outline:none}

.ao-hero{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(26px,3.6vw,44px);box-shadow:0 26px 60px -46px rgba(16,13,20,.42)}
.ao-hero-h{margin-top:12px;font-size:clamp(22px,2.6vw,30px);line-height:1.14;letter-spacing:-.03em}
.ao-figure{margin-top:10px;font-family:var(--font-d);font-weight:700;
  font-size:clamp(30px,5.4vw,52px);line-height:1.04;letter-spacing:-.035em;color:var(--accent-deep)}
.ao-basis{margin-top:14px;color:var(--text-2);font-size:15.5px;line-height:1.6;max-width:60ch}
.ao-tag{margin-top:10px;font-family:var(--font-m);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3)}

.ao-section-h{margin-top:44px;font-size:clamp(20px,2.3vw,26px);letter-spacing:-.028em}
.ao-grid{margin-top:20px;display:grid;gap:18px;grid-template-columns:1fr}
.ao-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  padding:clamp(22px,2.8vw,32px)}
.ao-head{display:flex;align-items:center;gap:12px}
.ao-rank{font-family:var(--font-m);font-size:12.5px;font-weight:600;letter-spacing:.06em;
  color:var(--text-3)}
.ao-prio{font-family:var(--font-m);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;
  background:var(--paper-2);border:1px solid var(--line-2);color:var(--text-2)}
.ao-prio.prio-high{background:rgba(225,24,182,.09);border-color:rgba(225,24,182,.26);
  color:var(--accent-deep)}
.ao-title{margin-top:13px;font-size:clamp(18px,2vw,22px);line-height:1.2;letter-spacing:-.025em}
.ao-line{margin-top:12px;color:var(--text-2);font-size:15.5px;line-height:1.62;max-width:66ch}
.ao-line strong{color:var(--text-1);font-weight:600}

.ao-band{margin-top:20px;padding:16px 18px;border-radius:var(--r-s);background:var(--paper-2);
  border:1px solid var(--line)}
.ao-band-label{display:block;font-family:var(--font-m);font-size:11px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text-3)}
.ao-band-figure{display:block;margin-top:6px;font-family:var(--font-d);font-weight:700;
  font-size:clamp(19px,2.2vw,24px);letter-spacing:-.025em;color:var(--ink)}
.ao-band-hours{display:block;margin-top:3px;font-size:14px;color:var(--text-3)}
.ao-band-basis{margin-top:10px;font-size:13.5px;line-height:1.55;color:var(--text-3);max-width:64ch}

.ao-win{margin-top:26px;background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:var(--r-m);padding:clamp(22px,2.8vw,32px)}
.ao-win-badge{font-family:var(--font-m);font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent-deep)}
.ao-win h3{margin-top:11px;font-size:clamp(18px,2vw,22px);letter-spacing:-.025em;line-height:1.2}
.ao-win p{margin-top:11px;color:var(--text-2);font-size:15.5px;line-height:1.62;max-width:66ch}
.ao-win-time{color:var(--text-3);font-size:14.5px}

.ao-cta{margin-top:30px;background:var(--ink);border-radius:var(--r-l);
  padding:clamp(28px,3.6vw,44px);text-align:center}
.ao-cta h3{color:var(--dark-1);font-size:clamp(20px,2.4vw,27px);line-height:1.18;
  letter-spacing:-.03em;max-width:34ch;margin-inline:auto}
.ao-cta-actions{margin-top:22px;display:flex;justify-content:center}
.ao-cta .btn-primary{background:var(--paper);color:var(--ink)}
.ao-fine{margin-top:20px;color:var(--dark-3);font-size:13px;line-height:1.55;
  max-width:62ch;margin-inline:auto}

@media (min-width:900px){.ao-grid{grid-template-columns:1fr}}
@media (max-width:620px){
  .aw-shell{padding:22px 18px 26px}
  .aw-chip{font-size:14.5px;padding:10px 15px}
  .ao-hero,.ao-card,.ao-win,.ao-cta{padding:22px 18px}
}

/* ===== nav.css ===== */
/* ============================================================================
   NAVIGATION AND IN-PAGE NAVIGATION, 2026-08-13.

   This file exists as its own stylesheet because the homepage carries its CSS
   inline and every other page links assets/site.css. Anything shared between
   the two used to have to be written twice, which is how a nav drifts. Both
   link this file, so the header, the menus, the sticky page bar and the
   directory cards are defined exactly once.

   It loads after site.css and after the homepage's inline block, so a rule
   here wins where the two overlap. That is deliberate.
   ========================================================================== */

/* ---------------------------------------------------------------- MENUS
   Industries and Products are <details>. They work with no JavaScript: the
   summary is a real control, it toggles on click and on Enter or Space, and
   the panel is in the document either way. assets/nav.js only adds click-away,
   Escape, and closing one when the other opens. */
.nav-drop { position: static; }
.nav-drop > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  font-size: 14.5px; color: var(--text-2); letter-spacing: -.006em;
  transition: color .25s ease;
}
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav-drop > summary:hover, .nav-drop[open] > summary { color: var(--ink); }
.nd-mark {
  width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: .55;
  transition: transform .28s var(--ease), opacity .28s ease;
}
.nav-drop[open] > .nd-mark, .nav-drop[open] > summary .nd-mark {
  transform: translateY(1px) rotate(-135deg); opacity: .9;
}

/* The panel spans the header rather than hanging off one link, because the
   industries menu is a grid of fourteen destinations and a narrow column would
   need its own scrollbar. */
.nav-panel {
  position: fixed; left: 0; right: 0; top: 66px; z-index: 59;
  /* fully opaque: a translucent menu lets the hero headline read through the
     industry names underneath it, which is unreadable rather than airy */
  background: #fcfbfd;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 34px 60px -34px rgba(16, 13, 20, .34);
  animation: nd-open .26s var(--ease) both;
  max-height: calc(100vh - 66px); overflow-y: auto;
}
@keyframes nd-open { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .nav-panel { animation: none } .nd-mark { transition: none } }
.nav-panel-in {
  width: 100%; max-width: var(--container); margin-inline: auto;
  padding: 26px var(--gutter) 24px;
}
/* Multi-column, not a grid. Industries carry different numbers of segment
   chips, so on a grid every row grows to the tallest cell in it and the menu
   fills with dead space. Columns pack each entry against the one above it. */
.nd-grid { columns: 4; column-gap: 26px; }
.nd-grid-prod {
  columns: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 22px;
}
@media (max-width: 1180px) { .nd-grid { columns: 3 } }
.nd-cell {
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  display: inline-block; width: 100%; padding-bottom: 12px;
}
.nd-item {
  display: block; padding: 9px 11px; border-radius: 10px;
  transition: background .2s var(--ease);
}
.nd-item:hover { background: var(--paper-2); }
.nd-name {
  display: block; font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -.012em;
}
.nd-blurb {
  display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--text-2);
}
.nd-segs { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 11px 0; }
.nd-seg {
  font-size: 12.5px; color: var(--text-2); padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--card);
  transition: color .2s ease, border-color .2s ease;
}
.nd-seg:hover { color: var(--ink); border-color: var(--text-3); }
.nd-foot {
  display: block; margin-top: 14px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--accent-line, var(--line-2)); background: var(--paper-2);
  transition: border-color .22s ease;
}
.nd-foot:hover { border-color: var(--text-3); }
.nd-foot .nd-blurb { max-width: 74ch; }
@media (max-width: 940px) { .nav-panel { display: none } }

/* ---------------------------------------------------------------- MOBILE MENU
   The same destinations, nested one level deep so the panel opens short and
   the visitor chooses how far to go. */
.nav-mob-panel { min-width: min(86vw, 320px); max-height: calc(100vh - 92px); overflow-y: auto; }
/* site.css styles the burger itself with `.nav-mob summary`, a descendant
   selector that also caught these nested summaries and squeezed each one into
   the 42px square the burger uses. Everything that rule sets is undone here. */
.nav-mob-panel .nm-sub > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  width: auto; height: auto; place-content: initial;
  border: 0; background: none;
  padding: 12px 14px; border-radius: 10px; font-size: 15px; color: var(--text-1);
}
.nm-sub > summary::-webkit-details-marker { display: none; }
.nav-mob-panel .nm-sub > summary:hover { background: var(--paper-2); }
.nav-mob-panel .nm-sub[open] > summary { color: var(--ink); font-weight: 600; }
.nav-mob-panel .nm-sub[open] > summary .nd-mark { transform: translateY(1px) rotate(-135deg); }
/* the parent panel is a flex column, which is what made its direct links sit
   one per row. A nested list needs to say so for itself. */
.nm-sub-list {
  display: flex; flex-direction: column; gap: 1px;
  padding: 2px 0 8px 10px; border-left: 1px solid var(--line); margin-left: 14px;
}
.nav-mob-panel .nm-sub-list a { font-size: 14.5px; padding: 9px 12px; }
/* 10px of vertical padding, not 6: at 6 the row measured 31.8px and the site's
   own motion QA holds every mobile tap target to at least 32px */
.nav-mob-panel .nm-sub-list a.nm-seg {
  font-size: 13px; color: var(--text-3); padding: 10px 12px 10px 24px;
}
.nav-mob-panel .nm-sub-list a.nm-more { font-weight: 600; color: var(--ink); }
.nm-blurb { display: block; font-size: 12.5px; line-height: 1.4; color: var(--text-3); margin-top: 2px; }

/* ---------------------------------------------------------------- PAGE BAR
   MOVED ABOVE THE HERO. The bar used to sit under the hero, so on the page
   whose complaint was "they just have to scroll all the way down" the way of
   skipping the scroll was itself below the fold. Sitting above the hero with a
   66px top margin, it renders directly under the fixed header on load and
   sticks there for the rest of the page. */
.seg-bar { margin-top: 66px; top: 66px; }
.seg-bar-links a[aria-current="true"] {
  color: var(--paper); background: var(--ink); border-color: var(--ink);
}
.seg-bar + .page-hero { padding-top: clamp(48px, 7vh, 84px); }
/* the header animates in; the bar under it should arrive with it */
.seg-bar { animation: t-fade .6s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .seg-bar { animation: none } }
/* Anything the bar jumps to has to land clear of both the header (66px) and
   the bar (54px). The extra room on top of those 120px covers the reveal
   transform, which is still unwinding at the moment the browser computes where
   to stop, and leaves the heading visibly below the chrome instead of tucked
   right against it. */
.seg, [id="problem"], [id="what-we-build"], [id="systems"], [id="segments"],
[id^="g-"], [id^="n-"] { scroll-margin-top: 152px; }

/* ------------------------------------------------- HOMEPAGE "ANOTHER INDUSTRY"
   It used to be a disclosure that opened onto "send us the details", which is
   the thing Jake did not want. It is now the door to the directory page, and
   it runs the full width under the thirteen tiles because it stands for
   everything they leave out. */
.icp2-tile.icp2-any {
  grid-column: span 12; min-height: 0; flex-direction: row; align-items: center;
  gap: clamp(16px, 2vw, 26px); flex-wrap: wrap;
  padding: clamp(20px, 2vw, 26px) clamp(20px, 2.2vw, 28px);
}
.icp2-tile.icp2-any .icp2-ic { flex: none; margin: 0; width: 36px; height: 36px; border-radius: 10px; }
.icp2-tile.icp2-any .icp2-ic svg { width: 18px; height: 18px; }
.icp2-tile.icp2-any h3 { margin: 0; flex: none; font-size: clamp(16px, 1.7vw, 19px); }
.icp2-tile.icp2-any .icp2-body { margin: 0; padding: 0; flex: 1 1 22ch; max-width: 68ch; font-size: 14px; }

/* ---------------------------------------------------------------- DIRECTORY
   The "Another industry" page. One card per business type, each stating the
   problem and the build, each ending somewhere real. */
.niche-grid {
  margin-top: clamp(30px, 4.4vh, 46px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
}
@media (max-width: 860px) { .niche-grid { grid-template-columns: 1fr } }
.niche {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l);
  padding: clamp(20px, 2.4vw, 28px);
}
.niche h3 { font-size: clamp(18px, 2vw, 21px); letter-spacing: -.022em; line-height: 1.2; }
.niche-also {
  margin-top: 7px; font-size: 13px; line-height: 1.5; color: var(--text-3);
}
.niche .seg-pair { margin-top: 14px; }
.niche .seg-pair p { margin-top: 6px; color: var(--text-2); font-size: 15px; line-height: 1.58; }
.niche-go {
  margin-top: auto; padding-top: 18px;
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-family: var(--font-b); font-size: 15px; font-weight: 500; color: var(--ink);
  background: none; border: 0; cursor: pointer; text-align: left;
  transition: color .25s ease;
}
.niche-go .ar { transition: transform .35s var(--ease); }
.niche-go:hover { color: var(--accent-deep); }
.niche-go:hover .ar { transform: translateX(4px); }
@media (max-width: 940px) {
  /* a 44px hit area on the card action without moving the type */
  .niche-go { position: relative; }
  .niche-go::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%;
    height: 44px; min-width: 44px;
  }
}
/* book_button() renders a <button>; when it is asked to look like a text link
   it needs the control chrome removed */
button.link-arrow {
  border: 0; background: none; padding: 0; cursor: pointer; font-family: var(--font-b);
}
/* .hero-actions is only laid out inside .page-hero, so a pair of actions used
   anywhere else needs the same row treatment of its own */
.any-actions {
  margin-top: clamp(24px, 3.6vh, 34px);
  display: flex; align-items: center; gap: 14px 26px; flex-wrap: wrap;
}

/* ==========================================================================
   PHONE FIXES, 2026-08-17. Jake: "fix the industry page mess especially on
   MOBILE." That is a symptom, so qa-mobile.mjs was written first to turn it
   into a defect list measured on every industry page at 390px and 360px.
   Each block below names the defect it closes and the check that proves it.
   ========================================================================== */

/* ---- 1. THE STICKY CHROME WENT SEE-THROUGH OVER THE DARK BAND ------------
   .nav sat at rgba(252,251,253,.82) and .seg-bar at .90, both over a backdrop
   blur. That reads as glass over the light page, which is the intent. The
   industry pages also carry a full-bleed near-black band, and on a phone that
   band is the entire width of the screen, so scrolling it under the header
   turned the header into a grey smear with the band's white headline ghosting
   through it. It is a paint defect, so no DOM check can see it; the evidence
   is a screenshot, reproducible with
   `node shot-mobile.mjs industries/law 390` (the frame where .band-dark is
   passing under the header).

   The menu panel hit this same defect and was fixed with a comment that says
   a translucent surface "is unreadable rather than airy". The header itself
   never got that treatment. It does now.

   .96 alpha was tried first and was not enough, which is worth writing down:
   the band is near-black and its headline is white, so at 4% pass-through the
   band paints 242 and its text paints 252, a ten-level split that the eye
   reads as legible ghost text. The contrast being extreme is exactly why a
   nearly-opaque surface does not help. Opaque is the only value that works.

   The blur goes with it. Under an opaque background a backdrop-filter cannot
   change a pixel, so keeping it would buy a compositing layer on every scroll
   frame for no visual result. Nothing is lost: the frosted effect was only
   ever visible where content passed underneath, which is the case that was
   broken, and over the page's own background (252,251,253) it was already
   indistinguishable from the solid colour. */
.nav, .seg-bar {
  background: #fcfbfd;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ---- 2. THE SEGMENT PILLS WERE SLICED WITH NO AFFORDANCE -----------------
   .seg-bar-links is overflow-x:auto with the scrollbar hidden, which is the
   right interaction and no signal at all. On a phone the strip is 346px wide
   and up to 585px long, so the third pill was cut mid-word: an industry page
   opened on a phone showed "Corpor" against the right edge. Measured by
   qa-mobile.mjs as `clipped`, on 20 of 20 industry pages.

   Two changes, because the cut needs to look deliberate AND stop landing
   mid-word: a fade at the right edge that says the strip continues, and snap
   points so a pill comes to rest whole. */
.seg-bar-in { position: relative; }
/* A MASK, not a gradient painted on top. An overlay was tried first and barely
   read: it has to fade toward the bar's own colour, and the pills are that
   same near-white, so the only things it could wash out were the pill's hairline
   border and its text. A mask takes the alpha out instead, so the pill's
   background, border and label all dissolve together no matter what colour any
   of them is, and the strip ends in air rather than at a cut line. */
.seg-bar-links {
  /* One value drives both the dissolve and the room left for the last pill to
     clear it. They were written as two numbers first, 62 and 56, and the six
     pixels between them clipped the final pill on 19 of 20 industry pages at
     1440px, where nothing scrolls and nothing should fade. qa-segbar.mjs
     is the check that caught it and is what keeps them tied together. */
  --seg-fade: 62px;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--seg-fade)), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - var(--seg-fade)), transparent);
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter) calc(var(--seg-fade) + 8px);
  padding-inline-end: calc(var(--seg-fade) + 8px);
}
.seg-bar-links a { scroll-snap-align: start; }
/* On a wide screen the pills sit well short of the strip's right edge, so the
   dissolve falls on empty space and shows nothing. Verified rather than
   assumed, at 1440px on all 20 industry pages, by qa-segbar.mjs. */

/* ---- 3. 132px OF PERMANENT CHROME ON AN 844px SCREEN ---------------------
   66px header plus a 66px bar is 15.6% of an iPhone viewport gone before the
   page starts, and it is gone for the whole scroll. The bar's height comes
   from the 44px minimum tap target plus 10px of padding either side; the tap
   target is not negotiable, so the padding is what moves. 56px on phones,
   which holds the 44px target and returns 10px to the content. */
@media (max-width: 700px) {
  .seg-bar-links { padding-block: 6px; }
  .seg-bar-in { min-height: 44px; }
}
/* Every anchor the bar jumps to has to clear both. Two values now, because
   the chrome is two heights: keep them next to the rule that sets it so they
   cannot drift apart the way a hand-kept number does. */
@media (max-width: 700px) {
  #segments, .seg, [id^="seg-"] { scroll-margin-top: 122px; }
  [id^="g-"], [id^="n-"] { scroll-margin-top: 142px; }
}

/* ---- 4. THE EYEBROW SAT UNDER THE 12px PHONE FLOOR -----------------------
   site.css lifted the micro-labels to 11.5px so nothing renders below it. The
   page's own eyebrow, which is the first line a visitor reads on an industry
   page, was left at 11.5px. On a phone that is half a point under the floor
   the same stylesheet set for everything around it. */
@media (max-width: 700px) { .eyebrow { font-size: 12px } }

/* ---- 5. "ANOTHER INDUSTRY" DID NOT READ AS A BUTTON ----------------------
   Jake, twice. It is the escape hatch for every visitor whose industry is not
   one of the nineteen in the menu, so it is the most important item in the
   panel for exactly the people the list failed. It was styled as neither a
   list item nor a control: on desktop a tinted card with a hairline border and
   no affordance, and on mobile plain bold text in a column of plain text.

   Both now carry the site's own action language: an arrow that travels on
   hover, the accent colour on the label, and a surface that separates it from
   the list above it. No markup change, so build_pages.py needs no edit and
   the footer copy of the same link is untouched. */
.nd-foot {
  position: relative;
  padding-right: 52px;
  border-color: var(--accent-line, var(--line-2));
  background: var(--card);
  box-shadow: 0 1px 0 rgba(16, 13, 20, .04);
}
.nd-foot .nd-name { color: var(--accent-deep); font-weight: 600; }
.nd-foot::after {
  content: "→";
  position: absolute; right: 18px; top: 50%; translate: 0 -50%;
  font-size: 17px; line-height: 1; color: var(--accent-deep);
  transition: transform .3s var(--ease);
}
.nd-foot:hover { border-color: var(--accent-deep); }
.nd-foot:hover::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .nd-foot::after { transition: none } }

/* The mobile menu's version of the same link. A bordered pill with the arrow,
   set apart from the plain rows above it, so a thumb can see it is the thing
   to press when none of the listed industries fit. */
.nav-mob-panel .nm-sub-list a.nm-more {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; padding: 12px 14px;
  border: 1px solid var(--accent-line, var(--line-2)); border-radius: 999px;
  color: var(--accent-deep); font-weight: 600;
  min-height: 44px;
}
.nav-mob-panel .nm-sub-list a.nm-more::after {
  content: "→"; font-size: 16px; line-height: 1; margin-left: 12px;
}
.nav-mob-panel .nm-sub-list a.nm-more:hover { background: var(--paper-2); padding-left: 14px; }