/* ============================================================
   FORTREUM OVERRIDE — Shared interior-page stylesheet
   Derived from the approved homepage composition (index.html).
   Same design system (tokens.css + text-styles.css); the homepage's
   full GSAP/canvas motion suite is intentionally replaced with lighter
   IntersectionObserver reveals per the approved "design system, lighter
   motion" direction. Used by /services, /research, /about, /contact,
   /services/ai-security.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* ---- Custom cursor (matches homepage) ---- */
#cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  html, body { cursor: none; }
  a, button, [role="button"], input, textarea, select, summary, label, .nav__link { cursor: none; }
  #cursor { display: block; position: fixed; top: 0; left: 0; width: 16px; height: 16px;
    background: var(--color-text-strong); z-index: 9999; pointer-events: none; will-change: transform;
    box-shadow: 0 0 9px 1.5px rgba(124, 126, 238, 0.28);
    transition: width .18s ease, height .18s ease, background-color .18s ease, border-color .18s ease, opacity .2s ease; }
  #cursor.is-hover { width: 42px; height: 42px; background: transparent; border: 1.5px solid var(--color-text-strong); }
}

:root {
  --bevel: var(--radius-bevel, 18px);
  --stroke: 1.5px;
  --clip-tr: polygon(0 0, calc(100% - var(--bevel)) 0, 100% var(--bevel), 100% 100%, 0 100%);
  --page-edge: 48px;
  --page-margin: clamp(24px, 4vw, 64px);
  --col-inset: calc(var(--page-edge) + var(--page-margin));
  --cell-pad: clamp(24px, 2.2vw, 44px);
  --content-inset: calc(var(--col-inset) + var(--cell-pad));
  --accent-lead: var(--color-accent-1);
  --grad-brand: linear-gradient(95deg, var(--color-accent-4) 0%, var(--color-accent-2) 55%, var(--color-accent-1) 100%);
  --grad-orb:
    radial-gradient(60% 55% at 72% 22%, var(--color-accent-4) 0%, transparent 55%),
    radial-gradient(55% 55% at 26% 30%, var(--color-accent-2) 0%, transparent 55%),
    radial-gradient(65% 60% at 60% 68%, var(--color-accent-3) 0%, transparent 58%),
    radial-gradient(60% 60% at 24% 78%, var(--color-accent-1) 0%, transparent 60%),
    #2b2947;
}
[data-theme="dark"] { --accent-lead: var(--color-accent-3); }

/* Film grain overlay */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .5; mix-blend-mode: overlay;
}

/* Outlined chamfer (shared): host paints the edge; ::after paints the fill */
.nav__drop, .card, .step, .media-frame {
  position: relative; isolation: isolate; border: 0;
  background-color: var(--edge, var(--color-border-subtle)); clip-path: var(--clip-tr);
}
.nav__drop::after, .card::after, .step::after, .media-frame::after {
  content: ""; position: absolute; inset: var(--stroke, 1.5px);
  background: var(--fill, var(--color-surface-1)); clip-path: var(--clip-tr); z-index: -1;
}

.skip { position: absolute; left: -9999px; top: 0; background: var(--color-brand-primary); color: #fff; padding: 10px 16px; z-index: 200; }
.skip:focus { left: 8px; top: 8px; }
:focus-visible { outline: 2px solid var(--accent-lead); outline-offset: 3px; border-radius: 2px; }

body {
  margin: 0; background: var(--color-surface-1); color: var(--color-text-strong);
  font-family: var(--type-family-body); -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .4s ease, color .4s ease;
}
.wrap { width: auto; max-width: none; margin-inline: var(--content-inset); padding-inline: 0; }
a { color: inherit; }

/* Global vertical grid rails */
.page-rails { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  display: grid; grid-template-columns: var(--col-inset) repeat(4, 1fr) var(--col-inset); }
.page-rails span { border-left: 0;
  background-image: linear-gradient(to bottom, var(--color-border-subtle) 0%, color-mix(in srgb, var(--color-border-strong) 15%, transparent) 100%);
  background-size: 1px 100%; background-repeat: no-repeat; background-position: left top; }
.page-rails span:first-child { background-image: none; }

/* Single posts: swap the full blueprint grid for two rails that flank the 920px
   content column (no lines crossing behind the article). */
body:has(.post) .page-rails { display: none; }
body:has(.post)::before,
body:has(.post)::after {
  content: ""; position: fixed; top: 0; bottom: 0; width: 1px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, var(--color-border-subtle) 0%, color-mix(in srgb, var(--color-border-strong) 15%, transparent) 100%);
}
/* Sit at the page margin (like the site's outer rails); clamp so they never
   cross behind the 920px content column on narrower viewports. */
body:has(.post)::before { left: min(var(--col-inset), calc(50% - 460px)); }
body:has(.post)::after  { right: min(var(--col-inset), calc(50% - 460px)); }
@media (max-width: 820px) { body:has(.post)::before, body:has(.post)::after { display: none; } }

/* ============================================================ NAV ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: color-mix(in srgb, var(--color-surface-1) 82%, transparent);
  backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--color-border-subtle);
}
.nav__inner { display: flex; align-items: center; gap: var(--space-6); height: 76px; }
.nav__brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.nav__logo { height: 30px; width: auto; display: block; }
.nav__logo--dark { display: none; }
[data-theme="dark"] .nav__logo--light { display: none; }
[data-theme="dark"] .nav__logo--dark { display: block; }
.nav__menu { display: flex; align-items: center; gap: var(--space-1); margin: 0 auto; }
.nav__link {
  font-family: var(--type-family-body); font-weight: 600; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--color-text-strong);
  padding: 10px 13px; border-radius: 0; display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; cursor: pointer; line-height: 1; transition: color .2s ease;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--color-text-accent); }
.nav__caret { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
.nav__item { position: relative; }
.nav__item[data-open="true"] .nav__caret { transform: rotate(-135deg) translateY(-1px); }
.nav__tools { display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.nav__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; background: none; border: 1px solid var(--color-border-subtle); color: var(--color-text-strong); cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.nav__icon:hover { border-color: var(--color-border-accent); color: var(--color-text-accent); }
.nav__icon svg { width: 16px; height: 16px; }
.nav__icon .i-sun { display: none; }
[data-theme="dark"] .nav__icon .i-sun { display: inline; }
[data-theme="dark"] .nav__icon .i-moon { display: none; }
.nav__drop {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-6px);
  width: 360px; --edge: var(--color-border-subtle); --fill: var(--color-surface-1); --bevel: 16px;
  padding: var(--space-2); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.nav__item[data-open="true"] .nav__drop { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
  transition: opacity .2s ease, transform .2s ease, visibility 0s; }
.nav__drop a { display: block; text-decoration: none; padding: 11px 12px; border-radius: 0; color: var(--color-text-strong); transition: background-color .15s ease; }
.nav__drop a:hover { background: var(--color-surface-2); }
.nav__drop a small { display: block; font-size: 12.5px; color: var(--color-text-muted); margin-top: 3px; line-height: 1.45; }
.nav__drop-over { font-family: var(--type-family-mono); text-transform: uppercase; letter-spacing: .1em; font-size: 12px !important; color: var(--color-text-accent) !important; margin-bottom: 4px; }

/* ---- Services MEGAMENU (desktop wide dropdown) ----
   Reuses .nav__drop for the chamfer edge + the data-open open/close transition;
   .nav__mega only widens it, centres it on the viewport, and lays out the 5
   service columns. Fixed positioning is anchored by .nav's backdrop-filter
   containing block, but top:76px/left:50% are viewport-safe either way. */
.nav__menu .nav__mega {
  position: fixed; top: 76px; left: 50%; transform: translateX(-50%) translateY(-6px);
  width: min(1100px, calc(100vw - 48px));
  --edge: var(--color-border-subtle); --fill: var(--color-surface-1); --bevel: 18px;
  padding: var(--space-8) var(--space-8) var(--space-6);
}
.nav__mega .nav__mega-over {
  display: inline-flex; align-items: center; gap: 8px; background: none;
  font-family: var(--type-family-mono); text-transform: uppercase; letter-spacing: .1em;
  font-size: 18px; letter-spacing: .06em; color: var(--color-text-accent); text-decoration: none;
  padding: 0; margin: 0; transition: color .15s ease;
}
.nav__mega .nav__mega-over:hover { background: none; text-decoration: underline; text-underline-offset: 4px; }
.nav__mega-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-6);
  margin-top: var(--space-6); padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
}
.nav__mega .nav__mega-head {
  display: block; background: none; font-family: var(--type-family-mono);
  text-transform: uppercase; letter-spacing: .06em; font-size: 12px; line-height: 1.35;
  color: var(--color-text-accent); text-decoration: none;
  padding: 0 0 var(--space-3); margin: 0;
  /* reserve two lines so single-line headings match the wrapping ones (e.g. COAST)
     and every column's sub-item list starts at the same height. */
  min-height: calc(2.7em + var(--space-3) + 1px);
  border-bottom: 1px solid var(--color-border-subtle); transition: color .15s ease;
}
.nav__mega .nav__mega-head:hover { background: none; color: var(--color-text-strong); }
.nav__mega-list { list-style: none; margin: var(--space-3) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px; }
.nav__mega .nav__mega-list a {
  display: block; padding: 6px var(--space-2); margin-inline: calc(var(--space-2) * -1);
  border-radius: 0; color: var(--color-text-muted); font-size: 13.5px; line-height: 1.4;
  text-decoration: none; transition: color .15s ease, background-color .15s ease;
}
.nav__mega .nav__mega-list a:hover { background: var(--color-surface-2); color: var(--color-text-accent); }

.nav__cta {
  flex-shrink: 0; text-decoration: none; font-family: var(--type-family-button); font-weight: 600; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; padding: 13px 24px; border-radius: 999px;
  background: var(--grad-brand); color: #14131F; border: 0; transition: filter .18s ease, transform .18s ease;
}
.nav__cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.nav__burger { display: none; }
/* Mobile menu panel */
.nav__mobile { display: none; }

/* ============================================================ SHARED SECTION FURNITURE ============================================================ */
section { position: relative; }
.blade { padding-block: calc(var(--space-24) + var(--space-8)); }        /* 128px */
.blade--tight { padding-block: calc(var(--space-16) + var(--space-8)); } /* 96px */
.eyebrow { color: var(--color-text-accent); display: inline-flex; align-items: center; gap: 9px; margin: 0 0 var(--space-4); }
.eyebrow::before { content: ""; width: 1em; height: 1em; flex-shrink: 0; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='7.23828' width='11.7619' height='11.7619' fill='white'/%3E%3Crect x='11.7617' width='7.2381' height='7.2381' fill='white'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='7.23828' width='11.7619' height='11.7619' fill='white'/%3E%3Crect x='11.7617' width='7.2381' height='7.2381' fill='white'/%3E%3C/svg%3E") center / contain no-repeat; }
.lead-head { margin: 0; max-width: 20ch; text-wrap: balance; }
.nb { white-space: nowrap; }
/* On mobile, long no-break phrases would overflow the viewport — let them wrap. */
@media (max-width: 720px) { .nb { white-space: normal; } }
.subhead { color: var(--color-text-muted); margin: var(--space-4) 0 0; max-width: 62ch; }

.btn-primary {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: var(--type-family-button); font-weight: 600; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; padding: 17px 32px; border-radius: 999px;
  background: var(--grad-brand); color: #14131F; border: 0; transition: transform .18s ease, filter .18s ease;
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-primary .arw { transition: transform .18s ease; }
.btn-primary:hover .arw { transform: translateX(4px); }
.btn-bracket {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: var(--type-family-button); font-weight: 600; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; padding: 17px 30px; border-radius: 999px;
  background: transparent; color: var(--color-text-strong);
  border: 1px solid var(--color-border-strong); transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.btn-bracket:hover { border-color: var(--accent-lead); color: var(--color-text-accent); }
@media (prefers-reduced-motion: reduce) { .btn-primary, .btn-bracket { transition: none; } }

/* ============================================================ PAGE HERO — lighter interior hero
   A single-screen-ish banner: eyebrow + H1 + lede + actions, with the
   grainy brand orb + blueprint grid as a static (non-canvas) signature. ============================================================ */
.page-hero { position: relative; overflow: hidden; padding-top: calc(76px + var(--space-24) + var(--space-12)); padding-bottom: var(--space-24);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-surface-1); }   /* opaque so the page rails don't show through the hero (they stay visible on the rest of the site) */
@media (max-width: 720px) { :root { --content-inset: 30px; } .page-hero { padding-top: calc(76px + 50px); }
  .btn-primary, .btn-bracket { width: 100%; justify-content: center; text-align: center; } }
/* Blueprint grid matching the homepage hero: 108px cells, periwinkle hairlines
   at 0.16 alpha, softened with a 2.4px blur. Gentle fade at the bottom edge. */
.page-hero__grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .9;
  background-image:
    repeating-linear-gradient(to right, rgba(124,126,238,0.16) 0 1.35px, transparent 1.35px 108px),
    repeating-linear-gradient(to bottom, rgba(124,126,238,0.16) 0 1.35px, transparent 1.35px 108px);
  filter: blur(2.4px);
  -webkit-mask: linear-gradient(#000 76%, transparent 100%);
          mask: linear-gradient(#000 76%, transparent 100%); }
/* Corner orb cluster — three overlapping thin white-outlined circles that drift
   in the top-right corner (each on its own slow loop). Interiors are transparent
   at rest; on hero hover the homepage mesh gradient blooms into each circle, and
   overlaps brighten via screen blending. The element + its two pseudo-elements
   are the three circles. Mesh palette matches the homepage: orange, pink,
   periwinkle, cyan. --orb-mesh is shared across all three. */
.page-hero__orb { position: absolute; z-index: 0; top: -22%; right: -12%; width: min(46vw, 560px); aspect-ratio: 1;
  pointer-events: none; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.5);
  --orb-mesh:
    radial-gradient(60% 60% at 32% 28%, #FF7500, transparent 58%),
    radial-gradient(58% 58% at 72% 32%, #FFBDEF, transparent 58%),
    radial-gradient(66% 66% at 64% 74%, #7C7EEE, transparent 62%),
    radial-gradient(60% 60% at 28% 74%, #00B3C6, transparent 62%);
  background: var(--orb-mesh); background-repeat: no-repeat; background-position: center; background-size: 0% 0%;
  filter: drop-shadow(0 0 70px rgba(124,126,238,.18));
  animation: fo-drift-a 19s ease-in-out infinite;
  transition: background-size .6s ease; }
.page-hero__orb::before, .page-hero__orb::after { content: ""; position: absolute; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.42); mix-blend-mode: screen;
  background: var(--orb-mesh); background-repeat: no-repeat; background-position: center; background-size: 0% 0%;
  transition: background-size .6s ease; }
.page-hero__orb::before { width: 74%; height: 74%; left: -20%; top: 32%; animation: fo-drift-b 23s ease-in-out infinite; }
.page-hero__orb::after  { width: 64%; height: 64%; left: 8%;  top: -16%; animation: fo-drift-c 27s ease-in-out infinite; }
.page-hero:hover .page-hero__orb,
.page-hero:hover .page-hero__orb::before,
.page-hero:hover .page-hero__orb::after { background-size: 155% 155%; }
@keyframes fo-drift-a { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-16px,12px); } }
@keyframes fo-drift-b { 0%,100% { transform: translate(0,0); } 50% { transform: translate(14px,-10px); } }
@keyframes fo-drift-c { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-10px,-14px); } }
@media (prefers-reduced-motion: reduce) {
  .page-hero__orb, .page-hero__orb::before, .page-hero__orb::after { animation: none; transition: none; }
}
.page-hero__inner { position: relative; z-index: 2; }
.page-hero .eyebrow { margin-bottom: var(--space-6); }
.page-hero h1 { font-family: var(--type-family-display); font-weight: 400; line-height: 1.06;
  letter-spacing: -0.015em; font-size: clamp(2.1rem, 5vw, 3.8rem); text-transform: uppercase; margin: 0;
  max-width: 20ch; text-wrap: balance; }
.page-hero__lede { color: var(--color-text-strong); margin: var(--space-6) 0 0; max-width: 60ch;
  font-size: var(--type-size-body-lg, 22px); line-height: 1.5; }
.page-hero__actions { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; margin-top: var(--space-8); }
.page-hero__meta { display: flex; gap: var(--space-8); flex-wrap: wrap; margin-top: var(--space-16);
  border-top: 1px solid var(--color-border-subtle); padding-top: var(--space-8); padding-bottom: var(--space-6); }
.page-hero__meta div { display: flex; flex-direction: column; gap: 4px; }
.page-hero__meta dt { font-family: var(--type-family-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-dim); margin: 0; }
.page-hero__meta dd { margin: 0; font-size: 15px; color: var(--color-text-strong); }

/* ---- Section header (eyebrow + head + subhead, optional side layout) ---- */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-8); flex-wrap: wrap; }
.sec-head .lead-head { max-width: 30ch; }
.sec-head__intro { max-width: 46ch; }

/* ---- Prose (long-form body copy) ---- */
.prose { max-width: 68ch; }
.prose p { color: var(--color-text-muted); margin: 0 0 var(--space-6); font-size: var(--type-size-body-lg, 22px); line-height: 1.6; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--color-text-strong); font-weight: 600; }

/* ---- Two-column split ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }
.split--narrow { gap: var(--space-12); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--space-12); } }

/* ---- Card grid + flat chamfer cards ---- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: stretch; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); align-items: stretch; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); align-items: stretch; }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card { --edge: var(--color-border-subtle); --fill: var(--color-surface-1); --stroke: 1px; --bevel: 16px;
  text-align: left; color: inherit; display: flex; flex-direction: column; padding: var(--space-8); }
a.card, .card--link { text-decoration: none; transition: transform .2s ease, filter .2s ease; }
a.card:hover, .card--link:hover { transform: translateY(-6px); filter: drop-shadow(0 6px 22px rgba(124,126,238,0.22)); }
.card__num { display: block; font-family: var(--type-family-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-dim); margin-bottom: var(--space-6); }
.card h3 { margin: 0 0 var(--space-3); }
.card p { margin: 0 0 var(--space-4); color: var(--color-text-muted); }
.card p:last-child { margin-bottom: 0; }
.card__cta { margin-top: auto; font-family: var(--type-family-button); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-accent); display: inline-flex; gap: 8px; align-items: center; }
.card__cta .arw { transition: transform .18s ease; }
a.card:hover .card__cta .arw, .card--link:hover .card__cta .arw { transform: translateX(4px); }
.card__list { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: flex; flex-direction: column; gap: var(--space-2); }
.card__list li { position: relative; padding-left: 18px; color: var(--color-text-muted); font-size: 15px; line-height: 1.5; }
.card__list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; background: var(--accent-lead); }

/* Step number ladder (reuses homepage .step visual) */
.step { --edge: var(--color-border-subtle); --fill: var(--color-surface-1); --stroke: 1px; --bevel: 16px;
  text-align: left; text-decoration: none; color: inherit; display: block; padding: var(--space-8); transition: transform .2s ease, filter .2s ease; }
a.step:hover { transform: translateY(-6px); filter: drop-shadow(0 6px 22px rgba(124,126,238,0.22)); }
.step__num { display: block; font-family: var(--type-family-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-dim); margin-bottom: var(--space-6); }
.step h3 { margin: 0 0 var(--space-3); }
.step p { margin: 0 0 var(--space-4); color: var(--color-text-muted); }
.step p:last-child { margin: 0; }
.step__cta { font-family: var(--type-family-button); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-accent); display: inline-flex; gap: 8px; align-items: center; }
.step__cta .arw { transition: transform .18s ease; }
a.step:hover .step__cta .arw { transform: translateX(4px); }

/* COAST-style full-width glow bar */
.coast { position: relative; isolation: isolate; width: 100%; margin-top: var(--space-12);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap;
  padding: var(--space-8); text-decoration: none; color: inherit; transition: transform .2s ease; }
a.coast:hover { transform: translateY(-6px); }
.coast::before { content: ""; position: absolute; inset: -4px; z-index: -2; background: var(--grad-brand); filter: blur(30px); opacity: .3; transition: opacity .25s ease; }
a.coast:hover::before { opacity: .48; }
.coast::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-surface-1); border: 1px solid var(--color-border-subtle); }
.coast__main { display: flex; flex-direction: column; gap: var(--space-3); }
.coast__badge { align-self: flex-start; font-family: var(--type-family-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-dim); }
.coast h3 { margin: 0; }
.coast p { margin: 0; color: var(--color-text-muted); max-width: 60ch; }

/* Maturity ladder (3 tier cards + COAST bar) — from homepage */
.services { background: transparent; border-bottom: 1px solid var(--color-border-subtle); padding-bottom: var(--cell-pad); }
.ladder { margin-top: var(--space-16); }
.ladder__steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: stretch; }
.fw-head { margin: 0 0 0; max-width: none; }
/* Tablet: 2 columns — steps 1 & 2 on top, step 3 full-width below. */
@media (min-width: 768px) and (max-width: 989px) {
  .ladder__steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .ladder__steps .step:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 767px) { .ladder__steps { grid-template-columns: 1fr; gap: var(--space-6); } }

/* ---- Framework / logo grid (from homepage) ---- */
.fw-grid { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--color-border-subtle); overflow: hidden; margin-top: var(--space-12); }
.fw-cell { padding: var(--space-8) var(--space-3); text-align: center; border-right: 1px solid var(--color-border-subtle); font-family: var(--type-family-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); background: var(--color-surface-1); display: flex; align-items: center; justify-content: center; min-height: 92px; transition: background-color .2s ease, color .2s ease; }
.fw-cell:last-child { border-right: 0; }
.fw-logo { max-width: 74%; max-height: 46px; width: auto; height: auto; object-fit: contain; display: block; }
.fw-logo--badge { max-height: 68px; max-width: 88%; }
.fw-logo--dark { display: none; }
[data-theme="dark"] .fw-logo--light { display: none; }
[data-theme="dark"] .fw-logo--dark { display: block; }
@media (max-width: 900px) { .fw-grid { grid-template-columns: repeat(3, 1fr); } .fw-cell { border-bottom: 1px solid var(--color-border-subtle); } .fw-cell:nth-child(3n){ border-right: 0; } }

/* ---- Stat band (static, replaces the scroll-hijack "by the numbers") ---- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
@media (max-width: 820px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .stats { grid-template-columns: 1fr; } }
.stat { border-top: 2px solid var(--accent-lead); padding-top: var(--space-4); }
.stat__value { font-family: var(--type-family-mono); font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: clamp(2.2rem, 4.4vw, 3.2rem); line-height: 1; letter-spacing: -.02em; color: var(--color-text-strong); }
.stat__label { display: block; margin-top: var(--space-3); color: var(--color-text-muted); font-size: 14px; line-height: 1.45; }

/* ---- Process / timeline (numbered rows) ---- */
.proc { list-style: none; margin: var(--space-12) 0 0; padding: 0; border-top: 1px solid var(--color-border-subtle); }
.proc li { display: grid; grid-template-columns: 92px 1fr; gap: var(--space-6); padding: var(--space-6) 0; border-bottom: 1px solid var(--color-border-subtle); align-items: baseline; }
.proc__num { font-family: var(--type-family-mono); font-size: 13px; letter-spacing: .1em; color: var(--accent-lead); }
.proc__body h3 { margin: 0 0 var(--space-2); }
.proc__body p { margin: 0; color: var(--color-text-muted); max-width: 68ch; }
@media (max-width: 640px) { .proc li { grid-template-columns: 1fr; gap: var(--space-2); } }

/* ---- Comparison table (traditional vs AOSPT) ---- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--color-border-subtle); margin-top: var(--space-12); }
.compare__col { padding: var(--space-8); }
.compare__col + .compare__col { border-left: 1px solid var(--color-border-subtle); }
.compare__col--accent { background: var(--color-surface-2); }
.compare h3 { margin: 0 0 var(--space-6); }
.compare ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.compare li { position: relative; padding-left: 26px; color: var(--color-text-muted); line-height: 1.5; }
.compare__col--muted li::before { content: "\2715"; position: absolute; left: 0; top: 0; color: var(--color-text-dim); font-size: 14px; }
.compare__col--accent li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--color-status-success); font-weight: 700; }
[data-theme="dark"] .compare__col--accent li::before { color: var(--color-accent-3); }
@media (max-width: 720px) { .compare { grid-template-columns: 1fr; } .compare__col + .compare__col { border-left: 0; border-top: 1px solid var(--color-border-subtle); } }

/* ---- Tag / chip row ---- */
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.tags li { font-family: var(--type-family-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); border: 1px solid var(--color-border-subtle); padding: 7px 12px; }

/* ---- Media / callout frame (chamfer) ---- */
.media-frame { --edge: var(--color-border-strong); --fill: var(--color-surface-1); --stroke: .5px; --bevel: 18px; padding: var(--space-8); }

/* ---- Definition / example callout ---- */
.callout { border-left: 2px solid var(--accent-lead); padding: var(--space-2) 0 var(--space-2) var(--space-6); margin: var(--space-8) 0; }
.callout__k { font-family: var(--type-family-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-dim); display: block; margin-bottom: var(--space-2); }
.callout p { margin: 0; color: var(--color-text-muted); }

/* ============================================================ FORMS ============================================================ */
.form { display: grid; gap: var(--space-5, 20px); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field > label { font-family: var(--type-family-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-dim); }
.field .req { color: var(--color-accent-4); }
.field input, .field select, .field textarea {
  font-family: var(--type-family-body); font-size: 15px; color: var(--color-text-strong);
  background: var(--color-surface-1); border: 1px solid var(--color-border-subtle); border-radius: 0;
  padding: 13px 14px; width: 100%; transition: border-color .18s ease, box-shadow .18s ease;
}
.field textarea { resize: vertical; min-height: 128px; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-text-dim); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-border-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-lead) 22%, transparent); }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2354516E' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px; }
.form__note { font-size: 13px; color: var(--color-text-dim); line-height: 1.5; margin: 0; }
.form__note a { color: var(--color-text-accent); }
.form button[type="submit"] { justify-self: start; cursor: pointer; }

/* Contact detail list */
.contact-detail { display: flex; flex-direction: column; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.contact-detail dt { font-family: var(--type-family-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-dim); margin-bottom: 4px; }
.contact-detail dd { margin: 0; color: var(--color-text-strong); font-size: 16px; }
.contact-detail a { color: var(--color-text-accent); text-decoration: none; }

/* ============================================================ FAQ ============================================================ */
.faq__list { margin-top: var(--space-12); border-top: 1px solid color-mix(in srgb, var(--color-border-strong) 15%, transparent); }
.faq__item { border-bottom: 1px solid color-mix(in srgb, var(--color-border-strong) 15%, transparent); background: var(--color-surface-1); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-6) 0; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__q { font-family: var(--type-family-display); font-weight: 400; font-size: 20px; letter-spacing: -.005em; color: var(--color-text-strong); }
.faq__icon { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--color-text-accent); transition: transform .2s ease, opacity .2s ease; }
.faq__icon::before { top: 8px; left: 0; width: 18px; height: 2px; }
.faq__icon::after { top: 0; left: 8px; width: 2px; height: 18px; }
.faq__item[open] .faq__icon::after { transform: rotate(90deg); opacity: 0; }
.faq__a { margin: 0 0 var(--space-6); color: var(--color-text-muted); max-width: 74ch; line-height: 1.65; }

/* ============================================================ CTA ============================================================ */
.cta-blade { background: transparent; color: var(--color-text-strong); text-align: center; position: relative;
  padding-top: var(--space-24); padding-bottom: var(--space-24); }
.cta-blade h2 { margin: 0 auto; max-width: 20ch; }
.cta-blade p { margin: var(--space-4) auto 0; color: var(--color-text-strong); max-width: 48ch; }
.cta-blade .btn-primary { margin-top: var(--space-8); }
/* [class] bumps specificity to (1,2,0) so this beats each page's inline `#main .cta-blade { padding-block: clamp(...) }` on mobile without per-page overrides. */
@media (max-width: 720px) { #main .cta-blade[class] { padding-block: 100px; } }

/* ============================================================ RESOURCES — post grid + cards ============================================================ */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }

.post-card { --edge: color-mix(in srgb, var(--color-border-strong) 48%, transparent); --fill: var(--color-surface-1); --stroke: 1px;
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  text-decoration: none; color: inherit; background-color: var(--edge);
  overflow: hidden; transition: transform .2s ease, filter .3s ease; }
.post-card::after { content: ""; position: absolute; inset: var(--stroke); background: var(--fill); z-index: -1; }
.post-card:hover { transform: translateY(-6px); filter: drop-shadow(0 8px 26px rgba(124,126,238,0.22)); --edge: var(--accent-lead); }

/* Inset by the stroke so the card's edge ring shows around the art. The image
   runs the full width of the card and was painting straight over that ring, so
   only the body — which has padding — appeared to have a border. Using the
   card's own ring rather than a border on the image keeps the colour identical
   on all four sides and lets the hover state carry through. */
.post-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-surface-2);
  margin: var(--stroke) var(--stroke) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border-strong) 30%, transparent); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.post-card:hover .post-card__media img { transform: scale(1.04); }

.post-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); flex: 1 1 auto; }
.post-card__meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  font-family: var(--type-family-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.post-card__cat { color: var(--color-text-accent); font-weight: 600; }
.post-card__date { color: var(--color-text-dim); }
.post-card__title { font-family: var(--type-family-display); font-weight: 400; font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.22; letter-spacing: -.01em; margin: var(--space-2) 0 0; color: var(--color-text-strong); }
.post-card__cta { margin-top: auto; padding-top: var(--space-4); display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--type-family-button); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-accent); }
.post-card__cta .arw { transition: transform .18s ease; }
.post-card:hover .post-card__cta .arw { transform: translateX(4px); }

@media (max-width: 989px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .post-grid { grid-template-columns: 1fr; } }

/* ---- Single post ---- */
.post-hero .post-hero__inner { max-width: 920px; margin-inline: auto; padding-inline: var(--gutter); }
.post-hero h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); max-width: none; text-wrap: normal; }
.post-hero__crumb { color: var(--color-text-accent); text-decoration: none; }
.post-hero__crumb:hover { text-decoration: underline; }
.post-byline { margin: var(--space-6) 0 0; color: var(--color-text-muted);
  font-family: var(--type-family-mono); font-size: 13px; letter-spacing: .03em; }
.post-byline__author { color: var(--color-text-strong); font-weight: 600; }

.post-shell { max-width: 920px; margin-inline: auto; padding-inline: var(--gutter); }
/* Same edge as the cards in the grid: the art is as dark as the page, so without
   it the figure has no boundary. The bevel comes off for the same reason it did
   on the cards — clip-path cuts the corner, which would break the border line. */
.post-figure { margin: var(--space-12) 0;
  overflow: hidden; background: var(--color-surface-2);
  border: 1px solid color-mix(in srgb, var(--color-border-strong) 48%, transparent); }
.post-figure img { width: 100%; height: auto; display: block; }

.post-body { max-width: none; }
.post-body p { font-size: 1.0625rem; line-height: 1.75; }
.post-body .post-lede { color: var(--color-text-strong); font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.5; font-style: italic; margin-bottom: var(--space-8); }
.post-body h2 { font-family: var(--type-family-display); font-weight: 400; text-transform: none;
  font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.18; letter-spacing: -.01em;
  color: var(--color-text-strong); margin: var(--space-12) 0 var(--space-4); }
.post-body h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); color: var(--color-text-strong);
  margin: var(--space-8) 0 var(--space-4); }
.post-body ul, .post-body ol { margin: 0 0 var(--space-6); padding-left: 1.35em;
  color: var(--color-text-muted); font-size: 1.0625rem; line-height: 1.7; }
.post-body li { margin-bottom: var(--space-2); }
.post-body a { color: var(--color-text-accent); text-decoration: underline; text-underline-offset: 3px; }
.post-body blockquote { margin: 0 0 var(--space-8); padding: var(--space-1) 0 var(--space-1) var(--space-6);
  border-left: 3px solid var(--accent-lead);
  font-size: clamp(1.2rem, 1.9vw, 1.55rem); line-height: 1.5; color: var(--color-text-strong); font-style: italic; }
.post-body blockquote p { font-size: inherit; line-height: inherit; color: inherit; margin: 0; }
.post-body figure { margin: var(--space-8) 0; }
.post-body figure img, .post-body img { max-width: 100%; height: auto; display: block; margin-inline: auto; }
.post-body figcaption { margin-top: var(--space-2); font-size: 13px; color: var(--color-text-dim); text-align: center; }

.post-tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: var(--space-12) 0 0; }
.post-tags li { font-family: var(--type-family-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-text-muted); padding: 6px 12px; border: 1px solid var(--color-border-subtle); border-radius: 999px; }

.post-author { margin-top: var(--space-16); padding: var(--space-8);
  --edge: var(--color-border-subtle); --fill: var(--color-surface-1); --stroke: 1px; --bevel: 16px;
  position: relative; isolation: isolate; background-color: var(--edge); clip-path: var(--clip-tr); }
.post-author::after { content: ""; position: absolute; inset: var(--stroke); background: var(--fill); clip-path: var(--clip-tr); z-index: -1; }
.post-author__label { font-family: var(--type-family-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-text-dim); margin: 0 0 var(--space-2); }
.post-author__name { font-family: var(--type-family-display); font-size: 1.4rem; color: var(--color-text-strong); margin: 0 0 var(--space-6); }
.post-author__cta { display: inline-flex; }

.post-back { margin-top: var(--space-12); }
.post-back a { color: var(--color-text-accent); text-decoration: none;
  font-family: var(--type-family-mono); font-size: 13px; letter-spacing: .04em; }
.post-back a:hover { text-decoration: underline; }

.post-related { margin-top: var(--space-16); }
.post-related__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  margin-bottom: var(--space-12); flex-wrap: wrap; }
.post-related__head h2 { margin: 0; }

/* ============================================================ FOOTER ============================================================ */
.footer { background: var(--color-surface-1); border-top: 1px solid var(--color-border-subtle); padding-block: var(--space-16) var(--space-8); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-12); }
.footer__logo { height: 30px; width: auto; display: block; }
.footer__logo--dark { display: none; }
[data-theme="dark"] .footer__logo--light { display: none; }
[data-theme="dark"] .footer__logo--dark { display: block; }
.footer__tag { color: var(--color-text-muted); margin: var(--space-6) 0; max-width: 34ch; }
.footer__cta { text-decoration: none; color: var(--color-text-accent); font-family: var(--type-family-button); font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.footer h3 { font-family: var(--type-family-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-dim); margin: 0 0 var(--space-6); font-weight: 400; }
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.footer a { text-decoration: none; color: var(--color-text-muted); font-size: 15px; transition: color .18s ease; }
.footer a:hover { color: var(--color-text-accent); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); margin-top: var(--space-16); padding-top: var(--space-6); border-top: 1px solid var(--color-border-subtle); flex-wrap: wrap; }
.footer__copy { font-family: var(--type-family-mono); font-size: 12px; color: var(--color-text-dim); letter-spacing: .04em; text-transform: uppercase; }
.footer__bottom ul { flex-direction: row; gap: var(--space-6); }

/* ============================================================ REVEAL ON SCROLL ============================================================ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ============================================================ RESPONSIVE ============================================================ */
@media (max-width: 960px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-12); } }
/* Header collapses to burger up to 1023px (desktop nav from 1024px). */
@media (max-width: 1023px) {
  .nav__menu, .nav__cta { display: none; }
  .nav__tools { margin-left: auto; }
  .nav__burger { display: inline-flex; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
  .nav__burger span, .nav__burger::before, .nav__burger::after { content: ""; display: block; width: 24px; height: 2px; background: var(--color-text-strong); transition: transform .25s ease, opacity .2s ease; }
  .nav__burger[aria-expanded="true"] span { opacity: 0; }
  .nav__burger[aria-expanded="true"]::before { transform: translateY(7px) rotate(45deg); }
  .nav__burger[aria-expanded="true"]::after { transform: translateY(-7px) rotate(-45deg); }
  /* Mobile slide-down menu */
  .nav__mobile { display: block; position: fixed; inset: 76px 0 auto 0; z-index: 99;
    background: var(--color-surface-1); border-bottom: 1px solid var(--color-border-subtle);
    max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain;
    transform: translateY(-120%); transition: transform .28s ease; padding: var(--space-6) var(--content-inset) var(--space-8); }
  .nav__mobile.is-open { transform: translateY(0); }
  .nav__mobile a { display: block; text-decoration: none; color: var(--color-text-strong); padding: 12px 0; font-family: var(--type-family-body); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 14px; border-bottom: 1px solid var(--color-border-subtle); }
  .nav__mobile a small { display: block; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12.5px; color: var(--color-text-muted); margin-top: 3px; }
  .nav__mobile .nav__mobile-cta { color: #14131F; background: var(--grad-brand); border: 0; text-align: center; border-radius: 999px; margin-top: var(--space-6); border-bottom: 0; }
  .nav__mobile-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px;
    background: none; border: 0; border-bottom: 1px solid var(--color-border-subtle); cursor: pointer; color: var(--color-text-strong);
    padding: 12px 0; font-family: var(--type-family-body); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 14px; }
  .nav__mobile-toggle .nav__caret { transform: rotate(45deg); transition: transform .2s ease; }
  .nav__mobile > .nav__mobile-group.is-open > .nav__mobile-toggle .nav__caret { transform: rotate(-135deg); }
  .nav__mobile-sub { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
  .nav__mobile > .nav__mobile-group.is-open > .nav__mobile-sub { max-height: 2000px; }
  .nav__mobile-sub a { padding-left: var(--space-4); }
  /* Nested category accordion — mirrors the desktop megamenu columns + deep-links */
  .nav__mobile-over { color: var(--color-text-accent); }
  .nav__mobile-cathead { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-border-subtle); }
  .nav__mobile-cathead a { flex: 1 1 auto; border-bottom: 0; }
  .nav__mobile-toggle--nested { width: auto; flex: 0 0 auto; border-bottom: 0; padding: 12px 0 12px var(--space-6); color: var(--color-text-muted); }
  .nav__mobile-group--nested.is-open .nav__mobile-toggle--nested .nav__caret { transform: rotate(-135deg); }
  .nav__mobile-group--nested.is-open > .nav__mobile-sub--nested { max-height: 800px; }
  .nav__mobile-sub--nested a { padding-left: var(--space-8); text-transform: none; letter-spacing: .01em; font-weight: 500; font-size: 13px; color: var(--color-text-muted); }
}
@media (max-width: 820px) {
  .blade { padding-block: var(--space-16); }
  .page-rails { display: none; }
}
@media (max-width: 560px) {
  :root { --type-size-h1: 40px; --type-size-h2: 30px; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}