/* Auto-generated by build.py. Concatenates the 6 core source files so
   the public HTML can ship one render-blocking <link> instead of six.
   Edit the source files under static/css/, not this file. */

/* ── static/css/fonts.css ── */
/* Self-hosted Google Fonts (Inter + Inter Tight, latin + latin-ext).
 * Files in /static/fonts/. Originally from fonts.googleapis.com/css2?...
 * Self-hosted to remove fonts.googleapis.com / fonts.gstatic.com from CSP
 * and eliminate the SRI gap (Google does not version their CSS or files).
 */

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/Inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/Inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/Inter-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/Inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/Inter-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/Inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/Inter-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/Inter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/Inter-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/Inter-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/InterTight-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/InterTight-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/InterTight-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/InterTight-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/InterTight-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/InterTight-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/static/fonts/InterTight-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/static/fonts/InterTight-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── JetBrains Mono (used by static/hero-graphic/) ────────────────────── */
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/static/fonts/JetBrainsMono-400-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/static/fonts/JetBrainsMono-400-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ── static/css/utilities.css ── */
/* ═══════════════════════════════════════════════════════════
   Utility classes — replace common inline style="..." values.
   Added in Phase 3 of the security cleanup so we can drop
   'unsafe-inline' from CSP style-src.
   ═══════════════════════════════════════════════════════════ */

/* ── Spacing ── */
.u-mt-2  { margin-top: var(--space-2); }
.u-mt-4  { margin-top: var(--space-4); }
.u-mt-5  { margin-top: var(--space-5); }
.u-mt-8  { margin-top: var(--space-8); }
.u-mt-10 { margin-top: var(--space-10); }
.u-mt-16 { margin-top: var(--space-16); }
.u-mt-0  { margin-top: 0; }

.u-mb-0  { margin-bottom: 0; }
.u-mb-4  { margin-bottom: var(--space-4); }
.u-mb-6  { margin-bottom: var(--space-6); }
.u-mb-8  { margin-bottom: var(--space-8); }
.u-mb-10 { margin-bottom: var(--space-10); }

/* ── Colors ── */
.u-text-white       { color: var(--color-white) !important; }
.u-text-white-85    { color: rgba(255, 255, 255, 0.85) !important; }
.u-text-white-80    { color: rgba(255, 255, 255, 0.8) !important; }
.u-text-white-75    { color: rgba(255, 255, 255, 0.75) !important; }
.u-text-sky         { color: var(--color-sky); }
.u-text-blue        { color: var(--color-blue); }
.u-text-1           { color: var(--color-text-1); }
.u-text-2           { color: var(--color-text-2); }
.u-text-3           { color: var(--color-text-3); }
.u-text-emerald     { color: var(--color-emerald, #10B981); }
.u-text-purple      { color: #A78BFA; }

/* ── Alignment / layout ── */
.u-text-center      { text-align: center; }
.u-text-left        { text-align: left; }
.u-justify-center   { justify-content: center; }
.u-justify-end      { justify-content: flex-end; }
.u-items-start      { align-items: flex-start; }
.u-items-stretch    { align-items: stretch; }
.u-flex-row         { flex-direction: row; }
.u-grid-1col        { grid-template-columns: 1fr !important; }
.u-grid-col-full    { grid-column: 1 / -1; }
.u-gap-12           { gap: var(--space-12); }

/* ── Visibility ── */
.u-hidden           { display: none; }
.u-disabled-look    { opacity: 0.4; pointer-events: none; }

/* ── Specific patterns recurring on multiple pages ── */
/* Section intro paragraph: centered, content-width, with bottom margin */
.u-section-intro {
  max-width: var(--max-width-content);
  margin: 0 auto var(--space-8);
  text-align: center;
}
.u-section-intro--narrow-mb6 {
  max-width: var(--max-width-content);
  margin: 0 auto var(--space-6);
  text-align: center;
}

/* Section eyebrow label */
.u-section-eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-sky);
  margin-bottom: var(--space-3);
}

/* Big stat number — used inside .concept-card and similar */
.u-stat-number {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--weight-black);
  color: var(--color-sky);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.u-stat-number--sm {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--weight-black);
  color: var(--color-sky);
  line-height: 1;
  margin-bottom: var(--space-2);
}

/* Inverse primary button (used on saturated-blue backgrounds for contrast) */
.btn--inverse {
  background: var(--color-white);
  color: var(--color-blue);
  border-color: var(--color-white);
}
.btn--inverse:hover {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.92);
}

/* Surface card (light-bordered surface used for various callouts) */
.u-surface-card {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
}

/* Border accent: left border in sky color (used for accent quotes / panels) */
.u-border-l-sky {
  border-left-color: var(--color-sky);
}

/* Visually-hidden but accessible (skip-to-content patterns) */
.u-sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── px-based spacing (used on brochure pages with their own var system) ── */
.u-mt-px-8     { margin-top: 8px; }
.u-mt-px-12    { margin-top: 12px; }
.u-mt-px-20    { margin-top: 20px; }
.u-mt-px-24    { margin-top: 24px; }
.u-mt-px-28    { margin-top: 28px; }
.u-mt-px-32    { margin-top: 32px; }
.u-mt-px-36    { margin-top: 36px; }
.u-border-t-none { border-top: none; }

/* ── Sizing ── */
.u-square-112  { width: 112px; height: 112px; }
.u-min-h-160   { min-height: 160px; }
.u-h-56        { height: 56px; }
.u-h-24-auto   { height: 24px; width: auto; }
.u-h-52-auto   { height: 52px; width: auto; }
.u-flex-1      { flex: 1; }
.u-pad-0       { padding: 0; }
.u-pad-10      { padding: var(--space-10); }
.u-overflow-hidden { overflow: hidden; }
.u-my-8        { margin: var(--space-8) 0; }

/* ── Other ── */
.u-color-inherit { color: inherit; }
.u-opacity-12  { opacity: 0.12; }
.u-opacity-30  { opacity: 0.3; }
.u-opacity-55  { opacity: 0.55; }
.u-text-12-faded { font-size: 12px; opacity: 0.5; }
.u-text-2xl    { font-size: var(--text-2xl); }
.u-mb-3        { margin-bottom: var(--space-3); }

/* ── Brochure-shared utility classes ─────────────────────────────────
   Brochures use locally-scoped CSS vars (--sky, --text, --rule, etc.)
   while the rest of the site uses --color-*. These fallbacks let one
   class work in both contexts. */
.u-text-sky-x       { color: var(--sky, var(--color-sky)); }
.u-text-blue-x      { color: var(--blue, var(--color-blue)); }
.u-text-text        { color: var(--text, var(--color-text-1)); }
.u-text-muted       { color: var(--muted, var(--color-text-2)); }
.u-text-text3       { color: var(--text3, var(--color-text-3)); }
.u-border-l-sky-x   { border-left-color: var(--sky, var(--color-sky)); }
.u-border-b-rule    { border-bottom: 1px solid var(--rule, var(--color-rule)); }
.u-divider-line     { flex: 1; height: 1px; background: var(--rule, var(--color-rule)); }
.u-text-20-blue     { font-size: 20px; color: var(--blue, var(--color-blue)); }
.u-text-15-blue     { font-size: 15px; color: var(--blue, var(--color-blue)); }
.u-text-13-muted-mt8 { font-size: 13px; color: var(--muted, var(--color-text-2)); margin-top: 8px; }
.u-fw-600-text      { font-weight: 600; color: var(--text, var(--color-text-1)); }

/* Brochure table-cell patterns (used in 42 + 7 + 6 spots respectively) */
.brochure-check-cell {
  text-align: center;
  padding: 10px 12px;
  color: #16A34A;
  font-weight: 600;
}
.brochure-cell {
  padding: 10px 16px;
  color: var(--text, var(--color-text-1));
  font-weight: 500;
}
.brochure-cell-header {
  text-align: center;
  padding: 10px 12px;
  font-weight: 600;
  color: var(--text, var(--color-text-1));
  letter-spacing: 0.04em;
  font-size: 10px;
  text-transform: uppercase;
}

/* Brochure label (uppercase, tracking, sky color, with top margin) */
.u-brochure-label {
  margin-top: 24px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sky, var(--color-sky));
}

/* Brochure section headline + style — small letterspaced */
.u-brochure-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text3, var(--color-text-3));
  text-transform: uppercase;
  white-space: nowrap;
}


/* ── static/css/base.css ── */
/* ═══════════════════════════════════════════════════════════════════
   FCI Design Tokens — base.css
   Every color, font size, spacing, border radius, shadow, transition,
   and breakpoint declared once. Components reference via var(--token).
   No component ever owns a color or spacing value directly.
   ═══════════════════════════════════════════════════════════════════ */


/* ─── RESETS ───────────────────────────────────────────────────── */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
  background: var(--color-bg);
  overflow-x: hidden;
}

/* Mobile: no scrollbar gutter (overlay scrollbars, no reserved space) */
@media (max-width: 768px) {
  html {
    scrollbar-gutter: auto;
  }
}


/* ─── DESIGN TOKENS (DARK MODE DEFAULT) ────────────────────────── */

:root {
  /* ── Brand Colors ──────────────────────────────────────────── */
  --color-blue:           #2563EB;
  --color-blue-dark:      #1D4ED8;
  --color-blue-mid:       #3B82F6;
  --color-blue-light:     #60A5FA;
  --color-sky:            #0EA5E9;
  --color-sky-light:      #BAE6FD;
  --color-deep-navy:      #1E3A6E;

  /* ── Semantic Surface Colors (Dark) ────────────────────────── */
  --color-bg:             #060B14;
  --color-surface:        #0D1626;
  --color-surface-2:      #111F33;
  --color-surface-hover:  #162240;

  /* ── Text Colors (Dark) ────────────────────────────────────── */
  --color-text-1:         #F1F5F9;
  --color-text-2:         #94A3B8;
  --color-text-3:         #475569;

  /* ── Border / Rule ─────────────────────────────────────────── */
  --color-rule:           #1A2B40;

  /* ── Accent Colors ─────────────────────────────────────────── */
  --color-emerald:        #10B981;
  --color-emerald-bg:     rgba(16, 185, 129, 0.10);
  --color-red:            #EF4444;
  --color-red-bg:         rgba(239, 68, 68, 0.10);

  /* ── Blue Tints (for badges, backgrounds) ──────────────────── */
  --color-blue-tint:      #DBEAFE;
  --color-blue-faint:     #EFF6FF;
  --color-blue-bg:        rgba(37, 99, 235, 0.12);
  --color-blue-bg-subtle: rgba(37, 99, 235, 0.06);

  /* ── White / Off-white ─────────────────────────────────────── */
  --color-white:          #FFFFFF;
  --color-offwhite:       #F8FAFC;


  /* ── Typography — Font Families ────────────────────────────── */
  --font-body:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading:         'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:            'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;

  /* ── Typography — Font Sizes ───────────────────────────────── */
  --text-xs:              0.75rem;     /* 12px */
  --text-sm:              0.8125rem;   /* 13px */
  --text-base:            0.875rem;    /* 14px */
  --text-md:              0.9375rem;   /* 15px */
  --text-lg:              1rem;        /* 16px */
  --text-xl:              1.125rem;    /* 18px */
  --text-2xl:             1.25rem;     /* 20px */
  --text-3xl:             1.5rem;      /* 24px */
  --text-4xl:             2rem;        /* 32px */
  --text-5xl:             2.5rem;      /* 40px */
  --text-6xl:             3rem;        /* 48px */

  /* ── Typography — Font Weights ─────────────────────────────── */
  --weight-regular:       400;
  --weight-medium:        500;
  --weight-semibold:      600;
  --weight-bold:          700;
  --weight-extrabold:     800;
  --weight-black:         900;

  /* ── Typography — Line Heights ─────────────────────────────── */
  --leading-none:         1;
  --leading-tight:        1.1;
  --leading-snug:         1.3;
  --leading-normal:       1.5;
  --leading-relaxed:      1.7;
  --leading-loose:        1.85;

  /* ── Typography — Letter Spacing ───────────────────────────── */
  --tracking-tight:       -0.03em;
  --tracking-snug:        -0.01em;
  --tracking-normal:      0;
  --tracking-wide:        0.04em;
  --tracking-wider:       0.08em;
  --tracking-widest:      0.2em;


  /* ── Spacing Scale ─────────────────────────────────────────── */
  --space-1:              4px;
  --space-2:              8px;
  --space-3:              12px;
  --space-4:              16px;
  --space-5:              20px;
  --space-6:              24px;
  --space-8:              32px;
  --space-10:             40px;
  --space-12:             48px;
  --space-16:             64px;
  --space-20:             80px;
  --space-24:             96px;
  --space-section:        80px;
  --space-page-x:         32px;
  --space-page-y:         100px;

  /* ── Layout ────────────────────────────────────────────────── */
  --max-width-content:    900px;
  --max-width-page:       1200px;
  --max-width-text:       660px;
  --nav-height:           64px;


  /* ── Border Radius ─────────────────────────────────────────── */
  /* sm = nav buttons, pills, small UI  |  md = default btns  |  lg = large btns, cards  |  full = badges */
  --radius-sm:            6px;
  --radius-md:            8px;
  --radius-lg:            12px;
  --radius-xl:            14px;
  --radius-full:          100px;

  /* ── Shadows ───────────────────────────────────────────────── */
  --shadow-sm:            0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-md:            0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-lg:            0 4px 16px rgba(0, 0, 0, 0.30);
  --shadow-glow-blue:     0 0 20px rgba(37, 99, 235, 0.15);
  --shadow-card:          0 1px 3px rgba(0, 0, 0, 0.15);

  /* ── Transitions ───────────────────────────────────────────── */
  --transition-fast:      0.1s ease;
  --transition-base:      0.15s ease;
  --transition-slow:      0.25s ease;
  --transition-color:     color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;

  /* ── Z-Index Scale ─────────────────────────────────────────── */
  --z-base:               1;
  --z-dropdown:           100;
  --z-sticky:             200;
  --z-overlay:            300;
  --z-modal:              400;

  /* ── Breakpoints (for reference — used in @media) ──────────── */
  /* --bp-mobile:   375px   (design target)                       */
  /* --bp-tablet:   768px                                         */
  /* --bp-desktop:  1024px                                        */
  /* --bp-wide:     1280px                                        */
}


/* ─── LIGHT MODE OVERRIDES ─────────────────────────────────────── */

[data-theme="light"] {
  --color-bg:             #F8FAFC;
  --color-surface:        #FFFFFF;
  --color-surface-2:      #F1F5F9;
  --color-surface-hover:  #E2E8F0;
  --color-text-1:         #0F172A;
  --color-text-2:         #475569;
  --color-text-3:         #94A3B8;
  --color-rule:           #E2E8F0;
  --shadow-sm:            0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:            0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg:            0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-card:          0 1px 3px rgba(0, 0, 0, 0.08);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-bg:             #F8FAFC;
    --color-surface:        #FFFFFF;
    --color-surface-2:      #F1F5F9;
    --color-surface-hover:  #E2E8F0;
    --color-text-1:         #0F172A;
    --color-text-2:         #475569;
    --color-text-3:         #94A3B8;
    --color-rule:           #E2E8F0;
    --shadow-sm:            0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md:            0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg:            0 4px 16px rgba(0, 0, 0, 0.10);
    --shadow-card:          0 1px 3px rgba(0, 0, 0, 0.08);
  }
}


/* ─── BASE STYLES ──────────────────────────────────────────────── */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-1);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

::selection {
  background: var(--color-blue);
  color: var(--color-white);
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-blue);
  text-decoration: none;
  transition: var(--transition-color);
}

a:hover {
  color: var(--color-blue-light);
}

/* ─── FOCUS VISIBLE (accessibility) ────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}


/* ─── SKIP TO CONTENT (accessibility) ─────────────────────────── */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: calc(var(--z-modal) + 10);
  padding: var(--space-3) var(--space-6);
  background: var(--color-blue);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid var(--color-white);
  outline-offset: -4px;
}


/* ─── RESPONSIVE PAGE PADDING ──────────────────────────────────── */

@media (max-width: 640px) {
  :root {
    --space-page-x:     16px;
    --space-section:    56px;
    --nav-height:       56px;
  }
}


/* ── static/css/components/button.css ── */
/* ═══════════════════════════════════════════════════════════
   ATOM: Button
   Variants: --primary, --secondary, --ghost
   Sizes: default, --sm, --lg
   ═══════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-normal);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-6);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
  user-select: none;
}

.btn:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

.btn:active {
  transform: scale(0.98);
}


/* ── Primary ─────────────────────────────────────────────── */

.btn--primary {
  background: var(--color-blue);
  color: var(--color-white);
  border-color: var(--color-blue);
}

.btn--primary:hover {
  background: var(--color-blue-dark);
  border-color: var(--color-blue-dark);
  box-shadow: var(--shadow-glow-blue);
}


/* ── Secondary ───────────────────────────────────────────── */

.btn--secondary {
  background: transparent;
  color: var(--color-text-1);
  border-color: var(--color-rule);
}

.btn--secondary:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-text-3);
}

/* Secondary button on the closing CTA band (navy in dark mode, blue in
   light mode). The default --color-text-1 flips to near-black in light
   mode and becomes unreadable on the brand-color background, so we
   force white text + white border regardless of theme. */
.cta-section .btn--secondary {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.45);
}

.cta-section .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--color-white);
  color: var(--color-white);
}


/* ── Outline (blue border + blue text) ──────────────────── */

.btn--outline {
  background: var(--color-blue);
  color: var(--color-white);
  border-color: var(--color-blue);
}

.btn--outline:hover {
  background: var(--color-blue-dark);
  border-color: var(--color-blue-dark);
  box-shadow: var(--shadow-glow-blue);
}


/* ── Ghost ───────────────────────────────────────────────── */

.btn--ghost {
  background: transparent;
  color: var(--color-blue);
  border-color: transparent;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.btn--ghost:hover {
  background: var(--color-blue-bg);
  color: var(--color-blue-light);
}


/* ── Size: Small ─────────────────────────────────────────── */

.btn--sm {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
}


/* ── Size: Large ─────────────────────────────────────────── */

.btn--lg {
  font-size: var(--text-lg);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-lg);
}


/* ── Icon inside button ──────────────────────────────────── */

.btn__icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn--lg .btn__icon {
  width: 20px;
  height: 20px;
}


/* ── static/css/components/site-header.css ── */
/* ═══════════════════════════════════════════════════════════
   ORGANISM: Site Header
   Logo + primary nav with dropdowns + CTA button + theme toggle
   Sticky on scroll, blur backdrop, mobile hamburger
   ═══════════════════════════════════════════════════════════ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  z-index: var(--z-sticky);
  background: rgba(6, 11, 20, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-rule);
  transition: background-color 0.2s ease;
}

[data-theme="light"] .site-header {
  background: rgba(248, 250, 252, 0.92);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .site-header {
    background: rgba(248, 250, 252, 0.92);
  }
}


/* ── Inner layout ────────────────────────────────────────── */

.site-header__inner {
  max-width: var(--max-width-page);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0;
  gap: var(--space-6);
}


/* ── Logo ────────────────────────────────────────────────── */

.site-header__logo {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--weight-extrabold);
  color: var(--color-text-1);
  text-decoration: none;
  line-height: var(--leading-none);
  flex-shrink: 0;
}

.site-header__logo .fk-f { letter-spacing: 0; color: var(--color-blue); }
.site-header__logo .fk-c { letter-spacing: 0; margin-left: 0.02em; color: var(--color-blue-mid); }
.site-header__logo .fk-i { letter-spacing: 0; margin-left: 0.05em; color: var(--color-sky); }


/* ── Desktop navigation ──────────────────────────────────── */

.site-header__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  margin-left: var(--space-8);
  flex: 1;
}

.site-header__nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text-2);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
  background: none;
  border: none;
}

.site-header__nav-item:hover {
  color: var(--color-text-1);
  background: var(--color-surface-hover);
}

.site-header__nav-item.is-active {
  color: var(--color-sky);
  font-weight: var(--weight-semibold);
}

/* Active item inside a desktop dropdown */
.site-header__dropdown-link.is-active {
  color: var(--color-sky);
  background: rgba(14, 165, 233, 0.08);
}


/* ── Dropdown caret ──────────────────────────────────────── */

.site-header__caret {
  display: inline-block;
  width: 8px;
  height: 8px;
  position: relative;
  transition: transform 0.2s ease;
}

.site-header__caret::after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  left: 1px;
  opacity: 0.5;
}

.site-header__nav-item:hover .site-header__caret::after {
  opacity: 1;
}


/* ── Dropdown panel ──────────────────────────────────────── */

.site-header__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 240px;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: var(--z-dropdown);
}

.site-header__nav-item:hover .site-header__dropdown,
.site-header__nav-item[aria-expanded="true"] .site-header__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-header__nav-item[aria-expanded="true"] .site-header__caret {
  transform: rotate(180deg);
}

.site-header__dropdown-link {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  color: var(--color-text-2);
  text-decoration: none;
  text-align: left;
  border-radius: var(--radius-sm);
  transition: background-color 0.1s ease, color 0.1s ease;
}

.site-header__dropdown-link:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-1);
}


/* ── Mega dropdown (Solutions) ───────────────────────────── */

.site-header__dropdown--mega {
  min-width: 420px;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
}

.site-header__nav-item:hover .site-header__dropdown--mega,
.site-header__nav-item[aria-expanded="true"] .site-header__dropdown--mega {
  transform: translateX(-50%) translateY(0);
}

.site-header__mega-title {
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-2) var(--space-3) var(--space-1);
  border-bottom: 1px solid var(--color-rule);
  margin-bottom: var(--space-1);
}

.site-header__mega-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-2);
}

.site-header__mega-col {
  display: flex;
  flex-direction: column;
}


/* ── Right-side actions ──────────────────────────────────── */

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
  flex-shrink: 0;
}


/* ── Theme toggle ────────────────────────────────────────── */

.site-header__theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-text-3);
  font-size: var(--text-lg);
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
  padding: 0;
  line-height: 1;
}

.site-header__theme-toggle:hover {
  color: var(--color-text-1);
  border-color: var(--color-text-3);
  background: var(--color-surface-hover);
}


/* ── Hamburger button (mobile) ───────────────────────────── */

.site-header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  gap: 5px;
}

.site-header__hamburger-line {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-text-2);
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.15s ease;
}

/* Animated X when open */
.site-header__hamburger.is-open .site-header__hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header__hamburger.is-open .site-header__hamburger-line:nth-child(2) {
  opacity: 0;
}

.site-header__hamburger.is-open .site-header__hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ── Mobile menu overlay ─────────────────────────────────── */

.site-header__mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-rule);
  padding: var(--space-6) var(--space-6) var(--space-12);
  overflow-y: auto;
  z-index: var(--z-overlay);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.site-header__mobile-menu.is-open {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.site-header__mobile-section {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-rule);
}

.site-header__mobile-section:last-child {
  border-bottom: none;
}

.site-header__mobile-section-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-3);
  padding: var(--space-2) var(--space-3);
}

.site-header__mobile-section-subtitle {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-3);
  padding: 0 var(--space-3) var(--space-1);
}

.site-header__mobile-link {
  display: block;
  padding: var(--space-3) var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-text-1);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background-color 0.1s ease;
}

.site-header__mobile-link:hover {
  background: var(--color-surface-hover);
}

.site-header__mobile-sub-link {
  display: block;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-6);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  color: var(--color-text-2);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background-color 0.1s ease, color 0.1s ease;
}

.site-header__mobile-sub-link:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-1);
}

.site-header__mobile-link.is-active {
  color: var(--color-sky);
}

.site-header__mobile-sub-link.is-active {
  color: var(--color-sky);
}


/* ── Scroll lock when mobile menu is open ───────────────── */
/* Applied via classList — no inline style mutation */
body.nav-open {
  overflow: hidden;
}


/* ── Mobile breakpoint ───────────────────────────────────── */

@media (max-width: 768px) {
  .site-header__inner {
    padding: 0 var(--space-4);
  }

  .site-header__nav {
    display: none;
  }

  .site-header__hamburger {
    display: flex;
  }

  /* Hide CTA buttons and portal on mobile (they're in the mobile menu) */
  .site-header__actions .btn,
  .site-header__actions .nav-portal {
    display: none;
  }
}


/* ── FCI Portal Login (split button) ───────────────────── */

.nav-portal {
  display: inline-flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s;
}

.nav-portal {
  margin-right: var(--space-2);
}

.nav-portal:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.25);
  color: inherit;
}

.nav-portal__label {
  padding: 4px 12px;
  color: var(--color-text-2);
  background: var(--color-surface-2);
  border: 1px solid var(--color-rule);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  transition: color 0.15s ease, background 0.15s ease;
}

.nav-portal:hover .nav-portal__label {
  color: var(--color-text-1);
  background: var(--color-surface);
}

.nav-portal__login {
  padding: 4px 14px 4px 12px;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-sky), var(--color-blue));
  border: 1px solid rgba(14, 165, 233, 0.4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 0.15s ease;
}

.nav-portal__arrow {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-portal:hover .nav-portal__arrow {
  transform: translateX(3px);
}


/* ── static/css/components/site-footer.css ── */
/* ═══════════════════════════════════════════════════════════
   ORGANISM: Site Footer
   5-column link grid (col 2-3 share "Managed Cybersecurity" title)
   + bottom bar with logo, tagline, legal
   ═══════════════════════════════════════════════════════════ */

.site-footer {
  background: var(--color-bg);
  border-top: 1px solid var(--color-rule);
  padding: var(--space-16) 0 0;
}


/* ── Inner layout ────────────────────────────────────────── */

.site-footer__inner {
  max-width: var(--max-width-page);
  margin: 0 auto;
  padding: 0 var(--space-8);
}


/* ── 5-column link grid (col 2-3 are grouped under one title) ── */

.site-footer__grid {
  display: grid;
  /* 5 visual columns: 1 + 2 (grouped) + 1 + 1 = 5 equal units */
  grid-template-columns: 1fr 2fr 1fr 1fr;
  gap: var(--space-8);
  padding-bottom: var(--space-12);
}

.site-footer__col-title {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-3);
  margin-bottom: var(--space-4);
}

.site-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Grouped column: one title spans two side-by-side link lists */
.site-footer__col--group .site-footer__col-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

.site-footer__link {
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--color-text-2);
  text-decoration: none;
  padding: var(--space-1) 0;
  transition: color 0.15s ease;
}

.site-footer__link:hover {
  color: var(--color-text-1);
}


/* ── Bottom bar ──────────────────────────────────────────── */

.site-footer__bottom {
  border-top: 1px solid var(--color-rule);
  padding: var(--space-6) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.site-footer__brand {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.site-footer__logo {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  color: var(--color-text-1);
  text-decoration: none;
  line-height: var(--leading-none);
}

.site-footer__logo .fk-f { letter-spacing: 0; color: var(--color-blue); }
.site-footer__logo .fk-c { letter-spacing: 0; margin-left: 0.02em; color: var(--color-blue-mid); }
.site-footer__logo .fk-i { letter-spacing: 0; margin-left: 0.05em; color: var(--color-sky); }

.site-footer__tagline {
  font-size: var(--text-sm);
  color: var(--color-text-3);
  line-height: var(--leading-normal);
}

.site-footer__legal {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.site-footer__legal-link {
  font-size: var(--text-xs);
  color: var(--color-text-3);
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-footer__legal-link:hover {
  color: var(--color-text-2);
}

.site-footer__copyright {
  font-size: var(--text-xs);
  color: var(--color-text-3);
}

.site-footer__phone {
  font-size: var(--text-xs);
  color: var(--color-text-3);
}

.site-footer__phone a {
  color: var(--color-text-3);
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-footer__phone a:hover {
  color: var(--color-text-2);
}


/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 768px) {
  .site-footer {
    padding: var(--space-12) 0 0;
  }

  .site-footer__inner {
    padding: 0 var(--space-4);
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  /* On tablet, the grouped column spans both cells and its inner sub-grid stays 2-up */
  .site-footer__col--group {
    grid-column: span 2;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer__legal {
    gap: var(--space-3);
  }
}

@media (max-width: 480px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* At mobile, the grouped column's inner sub-grid stacks to 1-up */
  .site-footer__col--group {
    grid-column: auto;
  }

  .site-footer__col--group .site-footer__col-inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}