/* =========================================
   SentinelGrid site frame, v2 (2026-10-31)

   Same brand as everything else we print: paper, sage, ink, clay, plum,
   Fraunces for headings, Inter for reading, JetBrains Mono for facts.
   The tokens come from css/main.css, which still styles the long-form
   content (legal pages, blog posts, IT Services page bodies). This file
   owns the frame every page shares (hours strip, header, drawer, footer)
   and the components of the home and about pages. Load it after main.css.

   Class prefix: sg-. main.js finds the frame by id (theme-toggle,
   mobile-menu-btn, mobile-menu) and footer-year, not by these classes.
   ========================================= */

:root {
  --sg-sage: #3F5A50;
  --sg-sage-deep: #2F4238;
  --sg-sage-wash: #CFE0D7;
  --sg-ink: #2B2A26;
  --sg-paper: #F3F1EA;
  --sg-card: #FBFAF6;
  --sg-clay: #B15E45;
  --sg-clay-deep: #96503B;
  --sg-plum: #8E7A99;
  --sg-rule: rgba(43,42,38,0.12);
  --sg-strip-h: 36px;
  --sg-bar-h: 68px;
  /* main.css pads every page by this, so legacy pages clear the fixed header */
  --nav-h: calc(var(--sg-strip-h) + var(--sg-bar-h));
  --sg-gutter: clamp(16px, 4vw, 64px);
  --sg-max: 1240px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sg-card: #26241F;
    --sg-paper: #1B1A17;
    --sg-rule: rgba(233,229,219,0.14);
  }
}
:root[data-theme="dark"] {
  --sg-card: #26241F;
  --sg-paper: #1B1A17;
  --sg-rule: rgba(233,229,219,0.14);
}

/* The old atmosphere layers are gone from the shell; make sure nothing paints them. */
.bg-atmosphere, .bg-grid { display: none !important; }

.sg-wrap { width: 100%; max-width: var(--sg-max); margin: 0 auto; padding: 0 var(--sg-gutter); box-sizing: border-box; }
.sg-mono { font-family: var(--font-mono); letter-spacing: 0.02em; }
.sg-eyebrow {
  display: inline-block; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-cyan);
}

/* ── Header: hours strip + bar ───────────────────────────────────────── */
.sg-head { position: fixed; inset: 0 0 auto 0; z-index: 100; }
.sg-strip {
  height: var(--sg-strip-h); background: var(--sg-sage); color: #F3F1EA;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em;
}
.sg-strip .sg-wrap { height: 100%; display: flex; align-items: center; gap: 1.25rem; white-space: nowrap; overflow: hidden; }
.sg-strip a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.45); }
.sg-strip a:hover { text-decoration-color: #FFFFFF; }
.sg-strip .sg-strip-end { margin-left: auto; }
.sg-strip .sg-dot { width: 7px; height: 7px; border-radius: 50%; background: #9FD3B8; flex: none; }
@media (max-width: 760px) { .sg-strip .sg-hide-sm { display: none; } }

.sg-bar {
  height: var(--sg-bar-h); background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--sg-rule);
}
.sg-bar .sg-wrap { height: 100%; display: flex; align-items: center; gap: 1.5rem; }
.sg-brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--color-text); text-decoration: none; flex: none; }
.sg-brand img { width: 34px; height: 34px; border-radius: 8px; display: block; }
.sg-brand span { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; }
.sg-links { display: flex; gap: 0.25rem; list-style: none; margin: 0 auto; padding: 0; }
.sg-links a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.8rem; border-radius: 8px;
  color: var(--color-text-dim); font-size: 0.9375rem; font-weight: 500; text-decoration: none;
}
.sg-links a:hover { color: var(--color-text); background: var(--color-surface); }
.sg-links a.active, .sg-links a[aria-current="page"] { color: var(--color-text); box-shadow: inset 0 -2px 0 var(--sg-clay); border-radius: 0; }
.sg-actions { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.sg-actions .theme-toggle { position: static; }
.sg-menu-btn {
  display: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--sg-rule);
  background: transparent; color: var(--color-text); cursor: pointer; align-items: center; justify-content: center;
}
@media (max-width: 960px) {
  .sg-links, .sg-actions .sg-btn { display: none; }
  .sg-menu-btn { display: inline-flex; }
  .sg-actions { margin-left: auto; }
}

/* Drawer (main.js toggles .open on #mobile-menu) */
.sg-drawer {
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 99; display: none;
  max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
  background: var(--color-bg); border-bottom: 1px solid var(--sg-rule); padding: 0.75rem var(--sg-gutter) 1.25rem;
  box-shadow: var(--shadow-md);
}
.sg-drawer.open { display: grid; gap: 0.25rem; }
.sg-drawer a { display: flex; align-items: center; min-height: 48px; padding: 0 0.5rem; color: var(--color-text); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--sg-rule); }
.sg-drawer a.active { color: var(--sg-clay); }
.sg-drawer .sg-btn { margin-top: 0.75rem; justify-content: center; border-bottom: 0; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.sg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 44px; padding: 0 1.25rem;
  border-radius: 999px; font-family: var(--font-body); font-weight: 600; font-size: 0.9375rem; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.sg-btn-lg { min-height: 52px; padding: 0 1.6rem; font-size: 1rem; }
.sg-btn-go { background: var(--sg-clay); color: #FFFFFF; }
.sg-btn-go:hover { background: var(--sg-clay-deep); color: #FFFFFF; }
.sg-btn-line { border-color: var(--color-cyan); color: var(--color-cyan); background: transparent; }
.sg-btn-line:hover { background: var(--color-cyan-wash); color: var(--color-cyan); }
.sg-btn-light { border-color: rgba(255,255,255,0.7); color: #FFFFFF; }
.sg-btn-light:hover { background: rgba(255,255,255,0.1); color: #FFFFFF; }

/* ── Sections ────────────────────────────────────────────────────────── */
.sg-main { padding-top: var(--nav-h); }
.sg-sec { padding: clamp(56px, 8vw, 104px) 0; }
.sg-sec + .sg-sec { border-top: 1px solid var(--sg-rule); }
.sg-h1 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 6vw, 4.25rem);
  line-height: 1.02; letter-spacing: -0.025em; margin: 0.9rem 0 1.25rem; text-wrap: balance; color: var(--color-text);
}
.sg-h2 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 4vw, 2.75rem);
  line-height: 1.06; letter-spacing: -0.02em; margin: 0.6rem 0 1rem; text-wrap: balance; color: var(--color-text);
}
.sg-lede { font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); line-height: 1.6; color: var(--color-text-dim); max-width: 38rem; margin: 0; }
.sg-head-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.5rem; }
.sg-head-row .sg-lede { max-width: 30rem; }
.sg-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 2rem; }
.sg-note { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-text-faint); }

/* ── Hero with the work-order card ───────────────────────────────────── */
.sg-hero { padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 104px); }
.sg-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 900px) { .sg-hero-grid { grid-template-columns: minmax(0, 1fr); } }
.sg-order {
  background: var(--sg-card); border: 1px solid var(--sg-rule); border-radius: 18px; box-shadow: var(--shadow-md);
  overflow: hidden; font-size: 0.9375rem;
}
.sg-order-top {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.9rem 1.25rem;
  background: var(--sg-sage); color: #F3F1EA; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.sg-order dl { margin: 0; padding: 0.5rem 1.25rem 0.25rem; }
.sg-order dl div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: 0.7rem 0; border-bottom: 1px dashed var(--sg-rule); }
.sg-order dl div:last-child { border-bottom: 0; }
.sg-order dt { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-faint); padding-top: 0.15rem; }
.sg-order dd { margin: 0; color: var(--color-text); }
.sg-order-foot { padding: 0.9rem 1.25rem; border-top: 1px solid var(--sg-rule); font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-text-dim); }
.sg-order-foot a { color: var(--color-cyan); }
.sg-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--color-cyan-wash); color: var(--color-cyan); font-size: 0.8125rem; font-weight: 600; }

/* ── Numbered service index ─────────────────────────────────────────── */
.sg-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sg-rule); }
.sg-index li { display: grid; grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.4fr); gap: 1.5rem; padding: 1.6rem 0; border-bottom: 1px solid var(--sg-rule); align-items: baseline; }
.sg-index .n { font-family: var(--font-mono); font-size: 0.875rem; color: var(--sg-clay); }
.sg-index h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 2.2vw, 1.6rem); letter-spacing: -0.01em; color: var(--color-text); }
.sg-index p { margin: 0; color: var(--color-text-dim); line-height: 1.6; }
@media (max-width: 760px) {
  .sg-index li { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.4rem 1rem; }
  .sg-index p { grid-column: 2; }
}

/* ── Plans ───────────────────────────────────────────────────────────── */
.sg-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 1080px) { .sg-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sg-plans { grid-template-columns: minmax(0, 1fr); } }
.sg-plan { background: var(--sg-card); border: 1px solid var(--sg-rule); border-radius: 16px; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.sg-plan.feature { border-color: var(--color-cyan); box-shadow: inset 0 3px 0 var(--color-cyan); }
.sg-plan h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--color-text); }
.sg-plan .for { margin: 0; color: var(--color-text-dim); font-size: 0.9375rem; line-height: 1.5; min-height: 3em; }
.sg-plan .price { font-family: var(--font-display); font-size: 2.4rem; font-weight: 600; letter-spacing: -0.02em; color: var(--color-text); line-height: 1; }
.sg-plan .price small { font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; color: var(--color-text-dim); letter-spacing: 0; }
.sg-plan .terms { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-text-faint); line-height: 1.5; }
.sg-plan ul { margin: 0.25rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; font-size: 0.9375rem; color: var(--color-text); }
.sg-plan li { padding-left: 1.2rem; position: relative; line-height: 1.45; }
.sg-plan li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 2px; background: var(--color-cyan); }
.sg-plans-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; color: var(--color-text-dim); font-size: 0.9375rem; }

/* ── Sage coverage band (the logo's grid lines) ──────────────────────── */
.sg-band {
  position: relative; background: var(--sg-sage); color: #F3F1EA; overflow: hidden;
  padding: clamp(56px, 8vw, 104px) 0;
}
.sg-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.11;
  background-image:
    linear-gradient(to right, #F3F1EA 2px, transparent 2px),
    linear-gradient(to bottom, #F3F1EA 2px, transparent 2px);
  background-size: 33.333% 100%, 100% 33.333%;
  background-position: 33.333% 0, 0 33.333%;
}
.sg-band .sg-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 900px) { .sg-band .sg-wrap { grid-template-columns: minmax(0, 1fr); } }
.sg-band .sg-eyebrow { color: var(--sg-sage-wash); }
.sg-band .sg-h2 { color: #FFFFFF; }
.sg-band p { color: var(--sg-sage-wash); line-height: 1.6; }
.sg-band a { color: #FFFFFF; }
.sg-places { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
@media (max-width: 520px) { .sg-places { grid-template-columns: minmax(0, 1fr); } }
.sg-places > div { border-top: 1px solid rgba(243,241,234,0.3); padding: 1rem 0 1.1rem; }
.sg-places dt { font-family: var(--font-display); font-size: 1.3rem; color: #FFFFFF; }
.sg-places dt a { color: inherit; text-decoration: none; }
.sg-places dt a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sg-places dd { margin: 0.3rem 0 0; color: var(--sg-sage-wash); font-size: 0.9375rem; line-height: 1.45; }
.sg-places .tag { display: inline-block; margin-top: 0.4rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: #FFFFFF; opacity: 0.8; }

/* ── Steps ───────────────────────────────────────────────────────────── */
.sg-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; counter-reset: step; }
@media (max-width: 860px) { .sg-steps { grid-template-columns: minmax(0, 1fr); } }
.sg-steps li { counter-increment: step; padding: 1.5rem; border: 1px solid var(--sg-rule); border-radius: 16px; background: var(--sg-card); }
.sg-steps li::before { content: "0" counter(step); display: block; font-family: var(--font-mono); color: var(--sg-clay); font-size: 0.875rem; margin-bottom: 0.9rem; }
.sg-steps h3 { margin: 0 0 0.5rem; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--color-text); }
.sg-steps p { margin: 0; color: var(--color-text-dim); line-height: 1.6; }

/* ── Facts grid (about page) ─────────────────────────────────────────── */
.sg-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 700px) { .sg-facts { grid-template-columns: minmax(0, 1fr); } }
.sg-fact { padding: 1.5rem; border: 1px solid var(--sg-rule); border-radius: 16px; background: var(--sg-card); }
.sg-fact h3 { margin: 0 0 0.5rem; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: var(--color-text); }
.sg-fact p { margin: 0; color: var(--color-text-dim); line-height: 1.6; }
.sg-fact p + p { margin-top: 0.6rem; }
.sg-fact a { color: var(--color-cyan); }
.sg-prose { max-width: 42rem; color: var(--color-text-dim); font-size: 1.0625rem; line-height: 1.7; }
.sg-prose p { margin: 0 0 1rem; }
.sg-prose strong { color: var(--color-text); }
.sg-prose a { color: var(--color-cyan); }

/* ── Closing call to action ──────────────────────────────────────────── */
.sg-close { background: var(--color-bg-alt); }
.sg-close .sg-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.sg-close .sg-h2 { margin: 0; max-width: 34rem; }

/* ── Footer (ink) ────────────────────────────────────────────────────── */
.sg-foot { background: #2B2A26; color: #D8D4C8; padding: clamp(48px, 7vw, 80px) 0 2rem; font-size: 0.9375rem; }
.sg-foot a { color: #D8D4C8; text-decoration: none; }
.sg-foot a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.sg-foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 2rem; }
@media (max-width: 1000px) { .sg-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sg-foot-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .sg-foot-grid { grid-template-columns: minmax(0, 1fr); } }
.sg-foot-brand .sg-brand { color: #FFFFFF; }
.sg-foot-brand p { margin: 1rem 0 0; color: #B5B0A5; line-height: 1.6; max-width: 22rem; }
.sg-foot-brand .sg-mono { display: block; margin-top: 1rem; font-size: 0.8125rem; color: #CFE0D7; }
.sg-foot h4 { margin: 0 0 0.9rem; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #8CB3A2; }
.sg-foot-col { display: flex; flex-direction: column; gap: 0.15rem; }
.sg-foot-col a { display: inline-flex; align-items: center; min-height: 32px; }
.sg-foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(233,229,219,0.14); font-size: 0.8125rem; color: #948E83; }
.sg-foot-legal nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.sg-foot-legal a { color: #B5B0A5; }

/* IT Services pages: the related band used to sit on a tinted panel; on the new frame it reads as part of the page. */
.it-related { border-top: 1px solid var(--sg-rule); }

/* =========================================
   Content layer, v2
   The long-form pages (IT Services, legal, blog) keep their markup and
   their classes from main.css and it-services/assets/it.css. These rules
   bring them into the new frame: sentence case instead of the old
   lowercase, clay pill buttons, uppercase mono eyebrows, 16px cards, a
   sage-topped status board, and no glow behind page openings.
   ========================================= */

/* Type: sentence case everywhere, as written in the sources */
.h1, .h2, .h3, .btn, .tag, .form-label, .post-readmore, .post-pager-label,
.it-page h1, .it-page h2, .it-page h3, .it-page h4 { text-transform: none; }
.h1, .it-page h1 { letter-spacing: -0.025em; }
.it-page h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); line-height: 1.03; }
.it-page .page-head h1 { font-size: clamp(2.3rem, 5.2vw, 3.75rem); max-width: 20ch; }
.it-page h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.08; letter-spacing: -0.02em; }
.it-page h3 { font-size: 1.2rem; }
.gradient-text { background: none; -webkit-text-fill-color: currentColor; color: inherit; box-shadow: inset 0 -0.12em 0 var(--color-clay); }

/* Eyebrows and section labels: the sg-eyebrow look */
.it-page .eyebrow, .section-label {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-cyan);
}
.it-page .eyebrow::before { display: none; }
.it-page h1 > .eyebrow { margin-bottom: 1rem; }

/* Buttons: clay for the action, sage outline for the rest */
.btn { border-radius: 999px !important; font-weight: 600; min-height: 44px; }
.btn-primary { background: var(--color-clay) !important; color: #FFFFFF !important; border-color: transparent !important; box-shadow: none; }
.btn-primary:hover { background: var(--sg-clay-deep) !important; color: #FFFFFF !important; }
.btn-ghost { border: 1.5px solid var(--color-cyan) !important; color: var(--color-cyan) !important; background: transparent !important; }
.btn-ghost:hover { background: var(--color-cyan-wash) !important; }

/* Page openings: plain paper, a rule underneath */
.it-page .hero::before, .it-page .page-head::before { display: none; }
.it-page .page-head::after { background: var(--sg-rule); }
.it-page .it-crumbs { padding-top: 1.5rem; }

/* Cards and plans */
.it-page .card, .it-page .plan, .glass-card, .post-card { border-radius: 16px; }
.it-page .card { background: var(--sg-card); border-color: var(--sg-rule); }
.it-page .plan { background: var(--sg-card); }
.it-page .plan-name { font-weight: 600; font-size: 1.5rem; text-transform: none; }
.it-page .plan-new, .it-page .plan.feature { border-color: var(--color-cyan); box-shadow: inset 0 3px 0 var(--color-cyan); }
.it-page .extras { border-radius: 16px; }
.it-page .extras-t, .it-page .reach-t { text-transform: uppercase; letter-spacing: 0.08em; }

/* Steps: clay numbers, as on the home page */
.it-page .step-n { color: var(--color-clay); }

/* FAQ: Fraunces questions, a sage marker */
.it-page .faq summary { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; }

/* The operations board, re-cut as a work-order card: sage bar, paper body */
.it-page .board {
  --b-ink: var(--sg-card); --b-ink-2: var(--sg-card); --b-ink-3: var(--color-surface-high);
  --b-line: var(--sg-rule); --b-txt: var(--color-text); --b-dim: #E4ECE7; --b-faint: var(--color-text-faint);
  --b-sage: var(--color-cyan); --b-amber: var(--amber);
  background: var(--sg-card); border: 1px solid var(--sg-rule); border-radius: 18px; box-shadow: var(--shadow-md); overflow: hidden;
}
.it-page .board-bar { background: var(--sg-sage); color: #F3F1EA; border-bottom: 0; }
.it-page .board-bar strong { color: #F3F1EA; }
.it-page .board-foot { border-top: 1px solid var(--sg-rule); }

/* Related band at the foot of every IT page */
.it-page .it-related { background: var(--color-bg-alt); }
.it-page .it-related h2 { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-cyan); }

/* Legal and blog openings sat under a fixed 72px bar; the new header is taller */
.legal-content h2 { scroll-margin-top: calc(var(--nav-h) + 2rem); }