/* Pinned looks for headings whose tag was lowered one level to fix the
   heading order (.as-h4 = was an h4). Zero specificity, so every author rule
   still wins; this only stands in for the browser default the old tag had. */
:where(.as-h4){ font-size: 1em; }

/* ============================================================
   JF ANALYTICS, LLC — Design tokens
   Palette maps to real security-monitoring semantics:
   green = secure/nominal, blue = informational/network,
   amber = advisory, red = critical (used sparingly).
   ============================================================ */
:root{
  --bg: #060b09;
  --bg-elevated: #0b1310;
  --surface: #101a16;
  --surface-2: #142019;
  --border: #1e2f27;
  --border-bright: #24413590;

  --green: #22d38a;
  --green-dim: #13a86b;
  --green-glow: rgba(34, 211, 138, .18);

  --blue: #3aa0ff;
  --blue-dim: #2a7dcf;
  --blue-glow: rgba(58, 160, 255, .16);

  --amber: #ff9a3d;
  --amber-dim: #d67b2a;

  --red: #ef4d4d;

  --text: #eaf2ee;
  --text-muted: #93a9a1;
  --text-faint: #5d716a;

  --mono: 'JetBrains Mono', 'Space Mono', monospace;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --maxw: 1180px;
  --radius: 10px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
:focus-visible{ outline: 2px solid var(--green); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Background texture: faint circuit grid */
body{
  background-image:
    radial-gradient(circle at 15% 0%, rgba(34,211,138,.06), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(58,160,255,.05), transparent 40%),
    linear-gradient(var(--bg), var(--bg));
}

.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

h1,h2:not(:where(.as-h3)),h3:not(:where(.as-h4)),h2:where(.as-h3),h4,h3:where(.as-h4){
  font-family: var(--mono);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2:not(:where(.as-h3)){ font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3:not(:where(.as-h4)),h2:where(.as-h3){ font-size: 1.2rem; }
p{ margin: 0 0 1em; color: var(--text-muted); }
.eyebrow{
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-bottom: 1em;
}
.eyebrow::before{
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  display: inline-block;
}
.eyebrow.blue{ color: var(--blue); }
.eyebrow.blue::before{ background: var(--blue); box-shadow: 0 0 8px var(--blue); }
.eyebrow.amber{ color: var(--amber); }
.eyebrow.amber::before{ background: var(--amber); box-shadow: 0 0 8px var(--amber); }

/* ============ STATUS TICKER (signature element) ============ */
.ticker{
  background: #04070610;
  background: linear-gradient(90deg, #050a08, #0a1310, #050a08);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.ticker-track{
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 7px 0;
  animation: ticker-scroll 60s linear infinite;
  will-change: transform;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.ticker-track span{ display: inline-flex; align-items: center; gap: .5em; white-space: nowrap; padding-right: 2.5rem; }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation: none; } }
.dot{ width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex: none; }
.dot.g{ background: var(--green); box-shadow: 0 0 6px var(--green); }
.dot.b{ background: var(--blue); box-shadow: 0 0 6px var(--blue); }
.dot.a{ background: var(--amber); box-shadow: 0 0 6px var(--amber); }
@keyframes ticker-scroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

/* ============ NAV ============ */
header.site{
  position: sticky; top: 0; z-index: 50;
  background: rgba(6,11,9,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
nav.main{
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px;
  max-width: var(--maxw); margin: 0 auto;
}
.logo{
  font-family: var(--mono); font-weight: 800; font-size: 1.05rem;
  letter-spacing: .02em; color: var(--text);
  display: flex; align-items: center; gap: .5em;
}
.logo .brk{ color: var(--green); }
.navlinks{ display: flex; gap: 2rem; align-items: center; }
.navlinks a{
  font-size: .9rem; color: var(--text-muted); font-weight: 500;
  transition: color .15s ease; position: relative;
}
.navlinks a:hover, .navlinks a.active{ color: var(--text); }
.navlinks a.active::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: -18px;
  height: 2px; background: var(--green);
}
.btn{
  font-family: var(--mono); font-size: .82rem; font-weight: 700;
  padding: .7em 1.3em; border-radius: 6px; letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: .5em;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{ background: var(--green); color: #04120b; }
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 6px 24px var(--green-glow); }
.btn-outline{ border-color: var(--border-bright); color: var(--text); background: transparent; }
.btn-outline:hover{ border-color: var(--blue); color: var(--blue); }
.btn-blue{ background: var(--blue); color: #041826; }
.btn-blue:hover{ transform: translateY(-1px); box-shadow: 0 6px 24px var(--blue-glow); }

.navbtns{ display: flex; align-items: center; gap: .9rem; }
.hamburger{ display: none; background: none; border: none; color: var(--text); cursor: pointer; padding: 4px; }

/* Mobile menu. It hangs off the bottom of the header rather than using
   position:fixed: the header's backdrop-filter makes it the containing block
   for fixed children, which squeezed the old full-screen menu into a strip
   inside the header and let the links spill over the page with nothing
   behind them. The panel is opaque and a step lighter than the page, and the
   spread shadow dims everything below it so the open menu reads as a layer. */
@media (max-width: 880px){
  .navlinks{
    position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100dvh - 100%); overflow-y: auto;
    background: var(--surface-2);
    border-top: 1px solid var(--border-bright); border-bottom: 1px solid var(--border-bright);
    flex-direction: column; align-items: stretch; gap: 0; padding: .4rem 0;
    transform: translateY(-8px); opacity: 0; pointer-events: none; visibility: hidden;
    transition: transform .2s ease, opacity .2s ease, visibility .2s;
  }
  .navlinks.open{
    transform: translateY(0); opacity: 1; pointer-events: all; visibility: visible;
    box-shadow: 0 100vmax 0 100vmax rgba(0,0,0,.6);
  }
  .navlinks a{ font-size: 1.05rem; color: var(--text); padding: .95rem 24px; border-bottom: 1px solid var(--border); }
  .navlinks a:last-child{ border-bottom: none; }
  .navlinks a.active{ color: var(--green); }
  .navlinks a.active::after{ display: none; }
  .hamburger{ display: block; }
  .navbtns .btn-outline{ display: none; }
}
/* Buttons never wrap onto two lines. On a phone the header tightens up so
   the logo, the one remaining button and the menu icon fit on one row. */
.btn{ white-space: nowrap; }
@media (max-width: 520px){
  nav.main{ padding: 12px 16px; }
  .logo{ font-size: .95rem; gap: .35em; }
  .navbtns{ gap: .5rem; }
  .navbtns .btn-primary{ font-size: .72rem; padding: .6em .85em; }
}

/* ============ HERO ============ */
.hero{ padding: 72px 0 56px; position: relative; overflow: hidden; }
.hero .wrap{ position: relative; z-index: 1; }
.hero-grid{
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center;
}
.hero h1{ margin-bottom: .4em; }
.hero h1 .accent{ color: var(--green); }
.hero-lede{ font-size: 1.08rem; max-width: 46ch; }
.hero-ctas{ display: flex; gap: 1rem; margin-top: 1.8rem; flex-wrap: wrap; }
.hero-media{ position: relative; }
.hud{
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border-bright);
}
.hud img{ width: 100%; height: 100%; object-fit: cover; }
.hud::before, .hud::after{
  content: ''; position: absolute; width: 26px; height: 26px; z-index: 2;
  border-color: var(--green); pointer-events: none;
}
.hud::before{ top: 10px; left: 10px; border-top: 2px solid; border-left: 2px solid; }
.hud::after{ bottom: 10px; right: 10px; border-bottom: 2px solid; border-right: 2px solid; }
.hud-tr{ position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-top: 2px solid var(--blue); border-right: 2px solid var(--blue); z-index: 2;}
.hud-bl{ position: absolute; bottom: 10px; left: 10px; width: 26px; height: 26px; border-bottom: 2px solid var(--blue); border-left: 2px solid var(--blue); z-index: 2;}
.hud-tag{
  position: absolute; top: 16px; left: 16px; z-index: 3;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  background: rgba(6,11,9,.72); border: 1px solid var(--border-bright);
  padding: .4em .7em; border-radius: 4px; color: var(--green);
  backdrop-filter: blur(4px);
}

@media (max-width: 880px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero{ padding: 40px 0; }
}

/* ============ STAT STRIP ============ */
.stats{
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 34px 0;
}
.stats-row{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.stat b{ display: block; font-family: var(--mono); font-size: 1.7rem; color: var(--text); }
.stat span{ font-size: .78rem; color: var(--text-faint); letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 700px){ .stats-row{ grid-template-columns: repeat(2, 1fr); row-gap: 1.8rem; } }

/* ============ SECTIONS ============ */
section{ padding: 84px 0; }
.section-head{ max-width: 640px; margin-bottom: 3rem; }
.section-head.center{ margin-left: auto; margin-right: auto; text-align: center; }

/* ============ SERVICE CARDS ============ */
.grid-5{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
/* a lone 4th card in a 3-col grid sits centred under the middle one */
.grid-5 > .center-orphan{ grid-column: 2; }
@media (max-width: 980px){
  .grid-5{ grid-template-columns: repeat(2, 1fr); }
  .grid-5 > .center-orphan{ grid-column: auto; }
}
@media (max-width: 640px){ .grid-5{ grid-template-columns: 1fr; } }

.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.8rem;
  transition: border-color .18s ease, transform .18s ease;
}
.card:hover{ border-color: var(--border-bright); transform: translateY(-3px); }
.card .icon{
  width: 42px; height: 42px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem; background: var(--green-glow); color: var(--green);
}
.card.blue .icon{ background: var(--blue-glow); color: var(--blue); }
.card.amber .icon{ background: rgba(255,154,61,.14); color: var(--amber); }
.card h3:not(:where(.as-h4)),.card h2:where(.as-h3){ margin-bottom: .4rem; }
.card p{ font-size: .93rem; margin-bottom: .8rem; }
.card a.more{ font-family: var(--mono); font-size: .8rem; color: var(--green); }
.card.blue a.more{ color: var(--blue); }
.card.amber a.more{ color: var(--amber); }

/* ============ SPLIT / MEDIA SECTIONS ============ */
.split{ display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.split.reverse .media{ order: 2; }
@media (max-width: 880px){ .split{ grid-template-columns: 1fr; } .split.reverse .media{ order: 0; } }
.media img{ border-radius: var(--radius); border: 1px solid var(--border); }
.media{ position: relative; }
.media-frame{ border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-bright); }

.taglist{ list-style: none; padding: 0; margin: 1.2rem 0 0; display: flex; flex-direction: column; gap: .7rem; }
/* Block, not flex: as a flex container every inline child (<em>, <a>, <b>,
   <code>) became its own column and split the sentence apart. The dot is
   positioned instead, so the text flows as one paragraph. */
.taglist li{ display: block; position: relative; padding-left: 1.3rem; font-size: .95rem; color: var(--text-muted); }
.taglist li::before{
  content: ''; position: absolute; left: 0; top: .6em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 6px var(--green);
}

/* ============ SERVICE DETAIL SECTIONS ============ */
.service-block{
  padding: 70px 0; border-bottom: 1px solid var(--border);
}
.service-block:last-of-type{ border-bottom: none; }
.service-num{
  font-family: var(--mono); color: var(--text-faint); font-size: .8rem; letter-spacing: .1em;
}

/* ---- Case-studies jump nav ---- */
.cs-jump{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem;
  margin-top: 2.2rem; max-width: 980px;
}
@media (max-width: 980px){ .cs-jump{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .cs-jump{ grid-template-columns: 1fr; } }
.cs-jump a{
  position: relative; display: flex; flex-direction: column; gap: .4rem;
  padding: .95rem 2.2rem .95rem 1rem; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.cs-jump a:hover, .cs-jump a:focus-visible{
  border-color: var(--green-dim); background: var(--surface-2); transform: translateY(-2px);
}
.cs-jump a:focus-visible{ outline: 2px solid var(--green); outline-offset: 2px; }
.cs-jump-num{
  font-family: var(--mono); font-size: .62rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--green);
}
.cs-jump-note .cs-jump-num{ color: var(--amber); }
.cs-jump-title{ color: var(--text); font-size: .9rem; line-height: 1.35; }
.cs-jump a svg{
  position: absolute; right: .9rem; top: 50%; margin-top: -7px;
  color: var(--text-faint); transition: color .15s ease, transform .15s ease;
}
.cs-jump a:hover svg, .cs-jump a:focus-visible svg{
  color: var(--green); transform: translateY(2px);
}
.cs-jump-note:hover svg, .cs-jump-note:focus-visible svg{ color: var(--amber); }
.cs-jump-note:hover, .cs-jump-note:focus-visible{ border-color: var(--amber-dim); }
@media (prefers-reduced-motion: reduce){
  .cs-jump a, .cs-jump a svg{ transition: none; }
  .cs-jump a:hover, .cs-jump a:focus-visible{ transform: none; }
}

/* Sticky header is 74px desktop / 95px mobile — keep anchor targets clear of it */
:target{ scroll-margin-top: 110px; }
section[id]{ scroll-margin-top: 90px; }
.callout{
  margin-top: 1.4rem; padding: 1rem 1.2rem; border-radius: 8px;
  border: 1px solid var(--border-bright); background: var(--surface-2);
  font-family: var(--mono); font-size: .82rem; color: var(--amber);
  display: flex; gap: .7rem; align-items: flex-start;
}
.callout b{ color: var(--text); }

/* ============ COMPLIANCE BAND ============ */
.band{
  background: var(--surface);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.band-inner{ display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; padding: 70px 0; }
@media (max-width: 880px){ .band-inner{ grid-template-columns: 1fr; } }
.chips{ display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.chip{
  font-family: var(--mono); font-size: .78rem; padding: .5em .9em;
  border: 1px solid var(--border-bright); border-radius: 20px; color: var(--text-muted);
}

/* ============ CTA BAND ============ */
.cta-band{
  text-align: center; padding: 90px 0;
  background: radial-gradient(circle at 50% 0%, var(--green-glow), transparent 60%);
  border-top: 1px solid var(--border);
}
.cta-band h2:not(:where(.as-h3)){ margin-bottom: .3em; }
.cta-band .hero-ctas{ justify-content: center; }

/* ============ FOOTER ============ */
footer{ border-top: 1px solid var(--border); padding: 50px 0 30px; }
.foot-grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2.5rem; }
@media (max-width: 780px){ .foot-grid{ grid-template-columns: 1fr 1fr; } }
.foot-grid h2:not(:where(.as-h3)), .foot-grid h4, .foot-grid h3:where(.as-h4){ font-size: .78rem; color: var(--text-faint); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; }
.foot-grid ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.foot-grid a{ color: var(--text-muted); font-size: .9rem; }
.foot-grid a:hover{ color: var(--green); }
.foot-bottom{
  display: flex; justify-content: space-between; align-items: center;
  font-size: .8rem; color: var(--text-faint); flex-wrap: wrap; gap: 1rem;
  font-family: var(--mono);
}

/* ============ PAGE HERO (inner pages) ============ */
.page-hero{ padding: 60px 0 50px; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.page-hero .wrap{ position: relative; z-index: 1; }
.page-hero-bg{ position: absolute; inset: 0; opacity: .16; }
.page-hero-bg img{ width: 100%; height: 100%; object-fit: cover; }
.page-hero-bg::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, transparent, var(--bg) 90%); }
.page-hero h1{ max-width: 20ch; }
.page-hero p.lede{ max-width: 60ch; font-size: 1.05rem; }

/* ============ FORMS ============ */
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 700px){ .form-grid{ grid-template-columns: 1fr; } }
.field{ display: flex; flex-direction: column; gap: .5rem; min-width: 0; }  /* grid/flex children default to min-width:auto and refuse to shrink */
.field.full{ grid-column: 1 / -1; }
label{ font-family: var(--mono); font-size: .78rem; color: var(--text-muted); letter-spacing: .03em; }
label .req{ color: var(--amber); }
input, select, textarea{
  background: var(--surface); border: 1px solid var(--border-bright);
  color: var(--text); padding: .8em .9em; border-radius: 7px;
  font-family: var(--sans); font-size: .95rem;
}
/* A <select> sizes itself to its widest <option> unless told otherwise, which
   on a narrow screen pushes the whole form wider than the viewport. */
input:not([type=checkbox]):not([type=radio]), select, textarea{
  width: 100%; max-width: 100%; box-sizing: border-box;
}
textarea{ resize: vertical; min-height: 110px; }
input:focus, select:focus, textarea:focus{ outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-glow); }
fieldset{ border: 1px solid var(--border); border-radius: 8px; padding: 1.1rem 1.2rem; margin: 0;
  min-width: 0; }   /* browsers default fieldsets to min-content width; this lets them shrink */
legend{ font-family: var(--mono); font-size: .78rem; color: var(--text-muted); padding: 0 .4em; }
.checks{ display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: .3rem; }
@media (max-width: 560px){ .checks{ grid-template-columns: 1fr; } }
.check-item{ display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--text-muted); }
.check-item input{ width: 16px; height: 16px; padding: 0; accent-color: var(--green); flex: none; }
.form-card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2.2rem; }
.form-note{ font-size: .82rem; color: var(--text-faint); margin-top: 1rem; }

/* ============ FAQ ============ */
.faq-item{ border-bottom: 1px solid var(--border); padding: 1.4rem 0; }
.faq-item summary{ cursor: pointer; font-family: var(--mono); font-weight: 700; font-size: 1rem; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{ content: '+'; color: var(--green); font-size: 1.3rem; }
.faq-item[open] summary::after{ content: '–'; }
.faq-item p{ margin-top: .8rem; }

/* ============ CONTACT INFO CARDS ============ */
.contact-cards{ display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; }
@media (max-width: 880px){ .contact-cards{ grid-template-columns: 1fr; } }

/* ============ MISC ============ */
.small{ font-size: .82rem; color: var(--text-faint); }
.center{ text-align: center; }
.mt-2{ margin-top: 2rem; }

/* ============================================================
   ADDITIONS — pricing, phases, case studies, bio, legal, forms
   ============================================================ */

/* --- Screen reader + honeypot --- */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hp{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none; }

/* --- Pricing --- */
.price-inline{
  display:block; font-family:var(--mono); font-size:.82rem; color:var(--text);
  letter-spacing:.02em; margin:.2rem 0 .9rem;
}
.card.blue .price-inline{ color:var(--blue); }
.card.amber .price-inline{ color:var(--amber); }
.card .price-inline{ color:var(--green); }

.pricebox{
  border:1px solid var(--border-bright); border-radius:var(--radius);
  background:var(--surface); padding:1.2rem 1.4rem; margin:1.6rem 0 1.2rem;
  display:flex; flex-direction:column; gap:.25rem;
}
.price-label{ font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--text-faint); }
.price-figure{ font-family:var(--mono); font-size:2rem; font-weight:800; color:var(--green); line-height:1.1; }
.price-figure small{ font-size:1rem; font-weight:500; color:var(--text-muted); }
.price-note{ font-size:.85rem; color:var(--text-muted); }

/* --- Phases (90-day sprint) --- */
.phases{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.phase{
  background:var(--surface); border:1px solid var(--border);
  border-top:2px solid var(--green); border-radius:var(--radius); padding:1.6rem;
}
.phase.blue{ border-top-color:var(--blue); }
.phase.amber{ border-top-color:var(--amber); }
.phase h3:not(:where(.as-h4)),.phase h2:where(.as-h3){ margin:.5rem 0 .5rem; }
.phase p{ font-size:.93rem; margin:0; }
@media (max-width:900px){ .phases{ grid-template-columns:1fr; } }

/* --- Guarantee --- */
.guarantee{
  margin-top:2rem; background:linear-gradient(135deg, var(--surface-2), var(--surface));
  border:1px solid var(--green-dim); border-radius:var(--radius); padding:2rem 2.2rem;
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.guarantee h3:not(:where(.as-h4)),.guarantee h2:where(.as-h3){ font-size:1.35rem; margin:.5rem 0 .6rem; max-width:38ch; }
.guarantee p{ margin:0; max-width:60ch; }
.guarantee .btn{ flex:none; }

/* --- Included / Not included --- */
.incl-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:2.5rem; margin-top:3rem; }
.incl h4,.incl h3:where(.as-h4){
  font-family:var(--mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--green); margin-bottom:1rem; padding-bottom:.6rem; border-bottom:1px solid var(--border);
}
.incl.excl h4,.incl.excl h3:where(.as-h4){ color:var(--amber); }
.incl.excl .taglist li::before{ background:var(--amber); box-shadow:0 0 8px rgba(255,154,61,.5); }
@media (max-width:880px){ .incl-grid{ grid-template-columns:1fr; gap:2rem; } }

/* --- Add-on row --- */
.addon-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2.5rem; }
.addon{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius); padding:1.3rem; }
.addon h4,.addon h3:where(.as-h4){ font-size:.98rem; margin-bottom:.4rem; }
.dl-sep{ color:var(--text-faint); margin:0 .45em; }
.addon p{ margin-bottom:.6rem; }
@media (max-width:880px){ .addon-row{ grid-template-columns:1fr; } }

/* --- Case study cards --- */
.cs-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
.cs-card{
  display:block; background:var(--surface); border:1px solid var(--border);
  border-left:3px solid var(--green); border-radius:var(--radius); padding:1.8rem;
  transition:transform .18s ease, border-color .18s ease;
}
.cs-card:hover{ transform:translateY(-3px); border-color:var(--border-bright); border-left-color:var(--green); }
.cs-card.blue{ border-left-color:var(--blue); }
.cs-tag{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--green); }
.cs-card.blue .cs-tag{ color:var(--blue); }
.cs-card h3:not(:where(.as-h4)),.cs-card h2:where(.as-h3){ margin:.6rem 0 .6rem; font-size:1.12rem; }
.cs-card p{ font-size:.92rem; }
.cs-result{
  display:inline-block; font-family:var(--mono); font-size:.78rem; color:var(--text);
  border:1px solid var(--border-bright); border-radius:20px; padding:.35em .9em; margin-top:.4rem;
}
@media (max-width:880px){ .cs-grid{ grid-template-columns:1fr; } }

/* --- Case study detail --- */
.cs-meta{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:1.4rem 0; margin:1.8rem 0 2.5rem;
}
.cs-meta div{ display:flex; flex-direction:column; gap:.35rem; }
.cs-meta span{ font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-faint); }
.cs-meta b{ font-size:.92rem; color:var(--text); font-weight:600; }
@media (max-width:880px){ .cs-meta{ grid-template-columns:1fr 1fr; } }

.cs-body{ max-width:76ch; }
.cs-body h3:not(:where(.as-h4)),.cs-body h2:where(.as-h3){
  font-family:var(--mono); font-size:.85rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--green); margin:2.2rem 0 .8rem;
}
.cs-outcomes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin:1.4rem 0 1.6rem; }
.outcome{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.2rem; text-align:center;
}
.outcome b{ display:block; font-family:var(--mono); font-size:1.9rem; color:var(--green); line-height:1.1; }
.outcome span{ font-size:.78rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.04em; }
@media (max-width:700px){ .cs-outcomes{ grid-template-columns:1fr; } }

.cs-quote{
  border-left:3px solid var(--blue); background:var(--bg-elevated);
  padding:1.4rem 1.6rem; margin:2.2rem 0 0; border-radius:0 var(--radius) var(--radius) 0;
}
.cs-quote p{ font-size:1.02rem; color:var(--text); margin-bottom:.7rem; font-style:italic; }
.cs-quote cite{ font-family:var(--mono); font-size:.8rem; color:var(--text-faint); font-style:normal; }

/* --- Bio --- */
.bio-photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.bio-creds{ display:flex; flex-direction:column; gap:1.1rem; margin-top:1.4rem; }
.cred-group{ display:flex; flex-direction:column; gap:.55rem; }
.cred-label{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-faint);
}
.cred-row{ display:flex; flex-wrap:wrap; gap:.5rem; }
a.chip{
  display:inline-flex; align-items:center; gap:.45em; text-decoration:none;
  transition:color .15s ease, border-color .15s ease, background-color .15s ease;
}
a.chip svg{ width:.85em; height:.85em; color:var(--green); opacity:.45; transition:opacity .15s ease; }
a.chip:hover, a.chip:focus-visible{
  color:var(--text); border-color:var(--green-dim); background:var(--green-glow);
}
a.chip:hover svg, a.chip:focus-visible svg{ opacity:1; }
a.chip:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }

/* --- Products --- */
.product-lead{ display:grid; grid-template-columns:1.1fr 1fr; gap:3.5rem; align-items:start; }
@media (max-width:900px){ .product-lead{ grid-template-columns:1fr; gap:2rem; } }
.pill{
  display:inline-block; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.35em .9em; border-radius:20px; margin-bottom:1rem;
}
.pill-green{ background:var(--green-glow); color:var(--green); border:1px solid var(--green-dim); }
.mini-head{
  font-family:var(--mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--blue); margin:1.8rem 0 .6rem;
}
.waitlist{
  margin-top:3.5rem; background:var(--surface); border:1px solid var(--border-bright);
  border-radius:var(--radius); padding:2rem 2.2rem;
  display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center;
}
.waitlist h3:not(:where(.as-h4)),.waitlist h2:where(.as-h3){ margin:.4rem 0 .5rem; }
.waitlist p{ margin:0; }
.waitlist-form{ display:flex; gap:.7rem; flex-wrap:wrap; }
.waitlist-form input[type=email]{ flex:1; min-width:220px; }
.waitlist .form-status{ grid-column:1/-1; margin:0; }
@media (max-width:820px){ .waitlist{ grid-template-columns:1fr; } }

/* --- Calendar embed --- */
.cal-embed{
  position:relative; border:1px solid var(--border-bright); border-radius:var(--radius);
  overflow:hidden; background:#e4e7e9; min-height:200px; padding:10px;
}
/* Google serves this page in its light theme with dark text, so the frame
   needs a light surface under it or the text renders unreadable on our
   dark background. Soft grey rather than white to cut the glare. */
.cal-embed iframe{
  display:block; width:100%; background:#e4e7e9;
  color-scheme:light; border-radius:calc(var(--radius) - 4px);
}
.cal-embed iframe[src=""]{ display:none; }
.cal-fallback{ padding:2.5rem; text-align:center; }
.cal-fallback p{ margin-bottom:.5rem; }
.cal-fallback code{
  font-family:var(--mono); font-size:.85em; background:var(--surface-2);
  border:1px solid var(--border); border-radius:4px; padding:.1em .4em; color:var(--green);
}
.cal-embed:has(iframe[src]:not([src=""])) .cal-fallback{ display:none; }

/* --- Legal pages --- */
.legal{ max-width:74ch; }
.legal h2:not(:where(.as-h3)){
  font-size:1.15rem; font-family:var(--mono); letter-spacing:.02em;
  margin:2.4rem 0 .8rem; padding-bottom:.5rem; border-bottom:1px solid var(--border);
}
.legal h2:not(:where(.as-h3)):first-of-type{ margin-top:0; }
.legal p{ font-size:.96rem; line-height:1.75; }
.legal a{ color:var(--green); }

/* --- Form status states --- */
.form-status.ok{ color:var(--green) !important; }
.form-status.err{ color:var(--red) !important; }
.btn[disabled]{ opacity:.55; pointer-events:none; }

/* --- Track cards (SOC 2 / ISO / both) --- */
.tracks{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.track{
  background:var(--surface); border:1px solid var(--border);
  border-top:2px solid var(--green); border-radius:var(--radius); padding:1.7rem;
  display:flex; flex-direction:column;
}
.track.blue{ border-top-color:var(--blue); }
.track.amber{ border-top-color:var(--amber); }
.track.blue .cs-tag{ color:var(--blue); }
.track.amber .cs-tag{ color:var(--amber); }
.track h3:not(:where(.as-h4)),.track h2:where(.as-h3){ margin:.6rem 0 .3rem; font-size:1.15rem; }
.track-time{
  font-family:var(--mono); font-size:.88rem; color:var(--text) !important;
  margin-bottom:.8rem !important; letter-spacing:.01em;
}
.track > p:not(.track-time){ font-size:.92rem; flex:1; }
.track .pricebox{ margin-bottom:0; }
.track.blue .price-figure{ color:var(--blue); }
.track.amber .price-figure{ color:var(--amber); }
@media (max-width:920px){ .tracks{ grid-template-columns:1fr; } }

/* --- "Why ISO takes longer" explainer --- */
.why-longer{
  margin-top:3rem; background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:var(--radius); padding:2rem 2.2rem;
}
.why-longer h3:not(:where(.as-h4)),.why-longer h2:where(.as-h3){ margin:.5rem 0 1.6rem; font-size:1.25rem; }
.why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem 2.4rem; }
.why-grid .mini-head{ margin-top:0; }
.why-grid p{ margin-bottom:0; }
@media (max-width:820px){ .why-grid{ grid-template-columns:1fr; } }

/* --- Comparison: advisory vs implementation --- */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
.compare-col{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.8rem;
}
.compare-col.mine{ border-color:var(--green-dim); background:linear-gradient(160deg,var(--surface-2),var(--surface)); }
.compare-col h4,.compare-col h3:where(.as-h4){
  font-family:var(--mono); font-size:.82rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--text-faint); margin-bottom:1.1rem; padding-bottom:.6rem; border-bottom:1px solid var(--border);
}
.compare-col.mine h4,.compare-col.mine h3:where(.as-h4){ color:var(--green); }
.taglist.muted li{ color:var(--text-faint); }
.taglist.muted li::before{ background:var(--text-faint); box-shadow:none; }
.compare-note{
  margin-top:1.6rem; text-align:center; max-width:70ch; margin-left:auto; margin-right:auto;
  font-size:.95rem; color:var(--text-muted);
}
@media (max-width:860px){ .compare{ grid-template-columns:1fr; } }

/* --- Exit block --- */
.exit-block{
  margin-top:3rem; background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:var(--radius); padding:2rem 2.2rem;
}
.exit-block h3:not(:where(.as-h4)),.exit-block h2:where(.as-h3){ margin:.5rem 0 1.6rem; font-size:1.3rem; }
.exit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.exit{
  background:var(--surface); border:1px solid var(--border);
  border-left:2px solid var(--green); border-radius:var(--radius); padding:1.4rem;
}
.exit.blue{ border-left-color:var(--blue); }
.exit.amber{ border-left-color:var(--amber); }
.exit h4,.exit h3:where(.as-h4){ margin:.5rem 0 .5rem; font-size:1.05rem; }
.exit p{ font-size:.9rem; margin:0; }
@media (max-width:900px){ .exit-grid{ grid-template-columns:1fr; } }

/* --- Blog post typography --- */
.legal h2:not(:where(.as-h3)) + p{ margin-top: .2rem; }
.legal .lede { font-size:1.12rem; color:var(--text); margin-bottom:1.6rem; }
.legal .taglist { margin: 1.2rem 0 1.6rem; }


/* ============================================================
   Column-count utilities
   ------------------------------------------------------------
   Use these INSTEAD of an inline grid-template-columns style.
   An inline style beats every media query in this file no matter
   how specific the selector is, so a grid set inline never
   collapses on mobile. These classes sit at the end of the
   stylesheet so they win at equal specificity, and they have
   their own breakpoint so phones get a single column.
   ============================================================ */
.cols-2{ grid-template-columns: repeat(2, 1fr); }
.cols-3{ grid-template-columns: repeat(3, 1fr); }
.cols-4{ grid-template-columns: repeat(4, 1fr); }
.cols-1fr-auto{ grid-template-columns: 1fr auto; }

@media (max-width: 980px){
  .cols-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px){
  .cols-2, .cols-3, .cols-4, .cols-1fr-auto{ grid-template-columns: 1fr; }
}

/* =============================================
   Aligned term / description rows
   ---------------------------------------------
   .taglist sets display:flex on each li, which makes a leading <b> its own
   flex item. That adds the gap before any punctuation following it ("Term ,
   rest") and lets every row begin its description at a different x position.
   .deflist puts the term in a column of fixed width so the rows line up and
   read as a chart. Collapses to stacked rows on narrow screens.
   ============================================= */
.deflist{ list-style:none; padding:0; margin:1.3rem 0 1.7rem; }
.deflist li{
  display:grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap:.15rem 1.5rem;
  padding:.8rem 0;
  border-top:1px solid var(--border);
  font-size:.95rem;
  line-height:1.6;
  color:var(--text-muted);
  align-items:baseline;
}
.deflist li:last-child{ border-bottom:1px solid var(--border); }
.deflist li > b:first-child,
.deflist li > strong:first-child{
  color:var(--text);
  font-weight:600;
  min-width:0;
}
.deflist.tight li{ grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); }
.deflist.wide  li{ grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); }
.deflist .note{ display:block; margin-top:.35rem; color:var(--text-faint); font-size:.88rem; }

@media (max-width: 760px){
  .deflist li,
  .deflist.tight li,
  .deflist.wide li{ grid-template-columns:1fr; gap:.3rem; padding:.85rem 0; }
}