/* ==========================================================================
   Kings Consult — design system
   Direction: "Night Ledger". Near-black canvas with a navy cast, a single
   brand-gold accent, hairline gradient strokes instead of filled borders,
   mono uppercase labels against medium-weight geometric display type.

   Surface hierarchy runs UP from the canvas: --raised is a shade lighter and
   marks the alternate bands, --panel is lighter again and is what cards and
   the header sit on. --dark is the one tier below canvas, for the footer.
   ========================================================================== */

:root {
  /* Surface */
  --canvas: #07080f;
  --raised: #0c0e1a;
  --panel: #0d1020;
  --dark: #040509;

  /* Text */
  --ink: #f2f4fa;
  --muted: #9aa3bb;
  --on-dark: #f3f6fc;
  --on-dark-muted: #a3adc6;

  /* Brand — gold sampled from the logo's crown and shield frame. The only
     accent on the site. Everything else is a neutral or a stroke.
       --accent       links, marks, glows, the eyebrow gradient
       --accent-hover text-only hover, brighter on the dark canvas
       --accent-deep  a deeper gold for pressed states
       --on-accent    ink for anything sitting ON a gold fill */
  --accent: #f2cf45;
  --accent-hover: #ffe27a;
  --accent-deep: #d9ad22;
  --on-accent: #0a0c14;
  --accent-tint: #2a2513;
  --accent-wash: rgba(242, 207, 69, .12);
  --accent-line: rgba(242, 207, 69, .34);

  /* Steel — never used as a colour on its own. It only ever appears inside
     the stroke gradients, where a hint of the logo's navy keeps the gold
     from reading as monochrome. */
  --steel: 91, 116, 200;

  /* The signature edge: a 1px gradient stroke, gold at the top-left corner
     fading through neutral to a faint steel at the bottom-right. Applied via
     background-clip so it follows the radius (see .card). */
  --stroke: linear-gradient(160deg,
      rgba(242, 207, 69, .55) 0%,
      rgba(255, 255, 255, .10) 38%,
      rgba(255, 255, 255, .06) 62%,
      rgba(var(--steel), .45) 100%);
  --stroke-strong: linear-gradient(160deg,
      rgba(242, 207, 69, .95) 0%,
      rgba(255, 255, 255, .22) 38%,
      rgba(255, 255, 255, .14) 62%,
      rgba(var(--steel), .80) 100%);
  --stroke-quiet: linear-gradient(160deg,
      rgba(255, 255, 255, .16) 0%,
      rgba(255, 255, 255, .06) 50%,
      rgba(var(--steel), .30) 100%);

  /* Status */
  --success: #22c55e;
  --warning: #f0871f;
  --danger: #ff6b6b;

  /* Framework accents — framework-card identification only. */
  --framework-pci: #9d7bff;
  --framework-nist: #22d3ee;
  --framework-gdpr: #ec4899;
  --framework-cmmc: #3b82f6;
  --framework-fedramp: #6366f1;
  --framework-hitrust: #14b8a6;
  --framework-ccpa: #f43f5e;
  --framework-ai: #a3e635;

  /* Lines */
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .16);

  /* Radii — one system: 10px on every interactive box and card, 14px on
     large framed panels, full pill on chips. */
  --radius-sm: 10px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, .5);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
  --glow: 0 0 0 1px rgba(242, 207, 69, .35), 0 0 28px rgba(242, 207, 69, .28);

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Layout */
  --container: 1240px;
  --gutter: 24px;
  --header-h: 84px; /* single source of truth (mobile override below) */

  /* Type */
  --font-head: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 var(--space-4);
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem); line-height: 1.06; }
h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); font-weight: 500; line-height: 1.25; }
h4 { font-size: 1.05rem; font-weight: 500; }

p { margin: 0 0 var(--space-4); color: var(--muted); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
img, svg { max-width: 100%; height: auto; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

/* Mono label — the small uppercase voice used for eyebrows, nav, buttons,
   pills, footer headings and metadata. */
.mono,
.eyebrow, .pill, .btn, .nav-link, .nav-trigger, .tier-title, .stage-index,
.breadcrumb, .footer-col h4, .insight-meta, .filter-btn, .mega-col h3,
.mega-more, .audience-trigger, .trust-bar p, .framework-bar p,
.stat-row span, .compare-table thead th, .industry-card-body h3,
.stack-group h3 {
  font-family: var(--font-mono);
}

/* Keyboard focus — required on every interactive element */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: var(--on-accent);
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius-md) 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; text-decoration: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .will-reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { position: relative; padding-block: clamp(var(--space-8), 9vw, var(--space-10)); }
.section--tight { padding-block: var(--space-8); }
.section--raised { background: var(--raised); }
.section--dark { background: var(--raised); color: var(--on-dark); }
.section--dark h2, .section--dark h3 { color: var(--on-dark); }
.section--dark p { color: var(--on-dark-muted); }

/* Section head — the reference's signature: title on the left, the
   paragraph on the right, both sitting on the same baseline. A head with
   only a title spans the full measure. Stacks under 900px. */
.section-head { margin-bottom: clamp(var(--space-7), 6vw, var(--space-8)); max-width: 760px; }
.section-head .eyebrow:last-child { margin-bottom: 0; }
.section-head .section-title:last-child { margin-bottom: 0; }
.section-head > p { margin-bottom: 0; }
@media (min-width: 900px) {
  .section-head:has(> p) {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    column-gap: var(--space-8);
    align-items: end;
  }
  .section-head:has(> p) > .eyebrow,
  .section-head:has(> p) > .stage-index { grid-column: 1; }
  .section-head:has(> p) > .section-title { grid-column: 1; margin-bottom: 0; }
  .section-head:has(> p) > p { grid-column: 2; grid-row: 1 / span 3; align-self: end; max-width: 46ch; padding-bottom: .35em; }
}

.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: var(--space-5);
  color: var(--accent);
  background: linear-gradient(90deg, var(--accent) 0%, #fff0b8 70%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-title { margin-bottom: var(--space-4); }
.section-sub { font-size: 1.05rem; margin-bottom: 0; }

/* ---------- Grid ---------- */
.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 992px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  /* Odd-count grids skip the 2-column step — see the git history for why. */
  .grid--3:has(> :last-child:nth-child(3)),
  .grid--3:has(> :last-child:nth-child(9)) { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .grid--3:has(> :last-child:nth-child(3)),
  .grid--3:has(> :last-child:nth-child(9)) { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* ---------- Buttons ----------
   White, uppercase mono, 10px radius. The primary carries a gold glow ring
   that brightens on hover: the one place the site glows on purpose. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
  padding: 15px 26px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .3s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.99); }
.btn--primary {
  background: #f7f8fc;
  color: var(--on-accent);
  box-shadow: 0 0 0 1px rgba(242, 207, 69, .28), 0 0 18px rgba(242, 207, 69, .16);
}
.btn--primary:hover { background: #fff; color: var(--on-accent); box-shadow: var(--glow); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn--ghost:hover { background: rgba(255,255,255,.05); color: var(--ink); border-color: rgba(255,255,255,.34); }
.section--dark .btn--ghost { background: transparent; color: var(--on-dark); border-color: rgba(255,255,255,.28); }
.section--dark .btn--ghost:hover { background: rgba(255,255,255,.06); color: var(--on-dark); }
.btn--lg { font-size: .84rem; padding: 18px 32px; }

/* ---------- Pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: .68rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.03); color: var(--muted);
  border: 1px solid var(--border-strong);
  line-height: 1.4;
}
.pill--accent { background: var(--accent-wash); color: var(--accent-hover); border-color: var(--accent-line); }
.pill--success { background: rgba(34,197,94,.12); color: var(--success); border-color: rgba(34,197,94,.3); }

/* ---------- Cards ----------
   A black panel inside a 1px gradient stroke. The stroke is painted on the
   border box and the fill on the padding box, so the gradient follows the
   corner radius with no extra wrapper. Hover brightens the stroke rather than
   lifting a shadow: on a near-black canvas a shadow has nothing to fall on. */
.card {
  position: relative;
  background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--stroke) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: transform .25s ease, background .25s ease;
}
.card:hover {
  background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--stroke-strong) border-box;
  transform: translateY(-2px);
}
.card h3 { margin-bottom: var(--space-3); }
.card p:last-child { margin-bottom: 0; }

.card-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--accent-wash); color: var(--accent);
  border: 1px solid var(--accent-line);
  margin-bottom: var(--space-5);
}
.card-icon svg { width: 20px; height: 20px; }

.card-service { display: flex; flex-direction: column; height: 100%; }
.card-service .card-list { margin-top: auto; padding-top: var(--space-4); }

.card-list li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-3);
  font-size: .95rem;
  color: var(--muted);
}
.card-list li::before {
  content: '';
  position: absolute; left: 2px; top: .55em;
  width: 12px; height: 7px;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
.card-list--risk li::before {
  width: 0; height: 0;
  border: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 9px solid var(--warning);
  transform: none;
  top: .42em;
}

/* ---------- Stat row ----------
   Big gradient figures with a mono caption, the reference's "key facts"
   treatment. Left-aligned and divided by hairlines rather than boxed. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
}
.stat-row li {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding-left: var(--space-5);
  border-left: 1px solid var(--border-strong);
}
.stat-row strong {
  font-family: var(--font-head);
  font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
  font-weight: 500; letter-spacing: -.03em; line-height: .95;
  background: linear-gradient(90deg, #fff 0%, var(--accent) 55%, rgba(242,207,69,.35) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-row span {
  font-size: .74rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-dark-muted);
}

/* ---------- Accordion ----------
   A plus mark that turns into a cross, and a gradient hairline under each
   item that reads white on the left and fades to gold. */
.accordion { max-width: 880px; }
.accordion-item { position: relative; }
.accordion-item::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(242,207,69,.45) 45%, transparent 100%);
}
.accordion-trigger {
  width: 100%;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6);
  background: none; border: 0;
  padding: var(--space-5) 0;
  font-family: var(--font-head); font-size: 1.15rem; font-weight: 500; line-height: 1.35;
  color: var(--ink); text-align: left; cursor: pointer;
  transition: color .2s ease;
}
.accordion-trigger:hover { color: var(--accent-hover); }
.accordion-trigger::after {
  content: ''; flex: none;
  width: 14px; height: 14px; margin-top: 5px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  transition: transform .25s ease;
}
.accordion-trigger[aria-expanded='true']::after { transform: rotate(45deg); }
.accordion-panel { display: block; padding-bottom: var(--space-5); }
.accordion-panel[hidden] { display: none; }
.accordion-panel p { max-width: 68ch; }
.accordion-panel p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Header + mega navigation
   ========================================================================== */
:root { --header-h-condensed: 64px; }

/* Fixed, not sticky: the height change on scroll must not move the page. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s ease, border-color .25s ease;
}
body { padding-top: var(--header-h); }
/* The translucent band lives on a pseudo-element so backdrop-filter never
   becomes the containing block for the fixed mobile overlay (.nav).
   --band-scale is the FLIP handle used by initStickyHeader. Transparent at
   the top of the page so the hero runs under the nav, as in the reference. */
.site-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(7, 8, 15, 0);
  backdrop-filter: saturate(160%) blur(0px);
  transform: scaleY(var(--band-scale, 1));
  transform-origin: top center;
  transition: background .3s ease, transform .25s ease, backdrop-filter .3s ease;
}
.site-header.is-stuck { border-bottom-color: var(--border); }
.site-header.is-stuck::before {
  background: rgba(7, 8, 15, .86);
  backdrop-filter: saturate(160%) blur(16px);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--header-h);
  position: relative;
}
.site-header.is-stuck .container { min-height: var(--header-h-condensed); }

/* Brand */
.brand { display: inline-flex; align-items: center; gap: var(--space-3); transition: transform .25s ease; }
.brand:hover { text-decoration: none; }
.brand img { width: 46px; height: 46px; object-fit: contain; transform-origin: left center; transition: transform .25s ease; }
.site-header.is-stuck .brand img { width: 38px; height: 38px; }
@media (max-width: 992px) {
  .brand img,
  .site-header.is-stuck .brand img { width: 40px; height: 40px; }
}
.brand-text {
  font-family: var(--font-head); font-size: 1.2rem; font-weight: 600;
  letter-spacing: -.01em; color: var(--ink); white-space: nowrap;
  transition: font-size .25s ease;
}
.site-header.is-stuck .brand-text { font-size: 1.1rem; }
.brand-text span { color: var(--accent); font-weight: 400; }

/* Top-level nav */
.nav { display: flex; align-items: center; gap: var(--space-4); }
.nav-list { display: flex; align-items: center; gap: 0; }
/* Hairline dividers between items, as in the reference. */
.nav-list > li + li { position: relative; }
.nav-list > li + li::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 1px; height: 14px; transform: translateY(-50%);
  background: var(--border-strong);
}

.nav-link, .nav-trigger {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) 18px;
  font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); background: none; border: 0;
  border-radius: var(--radius-sm); cursor: pointer;
  white-space: nowrap; transition: color .18s ease;
}
.nav-link:hover, .nav-trigger:hover { color: var(--ink); text-decoration: none; }
.nav-link[aria-current='page'],
.nav-trigger[data-section-active] { color: var(--ink); }

/* Chevron */
.nav-trigger::after {
  content: ''; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .22s ease; flex: none;
}
.nav-trigger[aria-expanded='true']::after { transform: rotate(-135deg) translateY(-2px); }

/* Sliding indicator — a 1px gold bar scaled/translated via transform. */
.nav-indicator {
  position: absolute; bottom: -2px; left: 0; height: 1px; width: 1px;
  background: var(--accent);
  transform-origin: left center;
  transform: translateX(0) scaleX(0);
  opacity: 0;
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .2s ease;
  pointer-events: none;
}
.nav-list:hover .nav-indicator, .nav-indicator.is-pinned { opacity: 1; }

/* ---------- Mega panel ---------- */
.mega {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(1060px, calc(100vw - 40px));
  background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--stroke) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-7) var(--space-7) 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 90;
}
.mega.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(12px);
}
.mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7); }
.mega-col { opacity: 0; transform: translateY(8px); }
.mega.is-open .mega-col {
  opacity: 1; transform: none;
  transition: opacity .3s ease, transform .3s ease;
}
.mega.is-open .mega-col:nth-child(1) { transition-delay: .04s; }
.mega.is-open .mega-col:nth-child(2) { transition-delay: .09s; }
.mega.is-open .mega-col:nth-child(3) { transition-delay: .14s; }

.mega-col h3 {
  font-size: .7rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--space-4);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--border);
}
.mega-link {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3); margin-inline: calc(-1 * var(--space-3));
  border-radius: var(--radius-sm);
  transition: background .16s ease;
}
.mega-link:hover { background: rgba(255,255,255,.04); text-decoration: none; }
.mega-link[aria-current='page'] { background: var(--accent-wash); }
.mega-link svg { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 3px; }
.mega-link strong { display: block; font-size: .95rem; font-weight: 500; color: var(--ink); font-family: var(--font-head); }
.mega-link span { display: block; font-size: .82rem; color: var(--muted); line-height: 1.45; }
.mega-more {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: .74rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent);
}
.mega-foot {
  margin: var(--space-7) calc(-1 * var(--space-7)) 0;
  padding: var(--space-5) var(--space-7);
  background: var(--raised);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
}
.mega-foot p { margin: 0; font-size: .9rem; }

/* ---------- Hamburger ---------- */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); cursor: pointer;
  padding: 0; place-items: center;
}
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink); border-radius: 2px; position: relative; transition: background .15s ease; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 1.5px;
  background: var(--ink); border-radius: 2px; transition: transform .22s ease;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded='true'] span { background: transparent; }
.nav-toggle[aria-expanded='true'] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Mobile overlay ---------- */
@media (max-width: 992px) {
  :root { --header-h: 68px; --header-h-condensed: 68px; }
  .nav-toggle { display: grid; }
  .nav-indicator { display: none; }
  .nav-list > li + li::before { display: none; }
  .site-header::before { background: rgba(7, 8, 15, .86); backdrop-filter: saturate(160%) blur(16px); }

  .nav {
    position: fixed; inset: var(--header-h) 0 0 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; background: var(--canvas);
    padding: var(--space-6) var(--gutter) var(--space-8);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { border-bottom: 1px solid var(--border); }

  .nav-link, .nav-trigger {
    width: 100%; justify-content: space-between;
    padding: var(--space-5) var(--space-2);
    font-family: var(--font-head); font-size: 1.3rem; font-weight: 500;
    letter-spacing: -.01em; text-transform: none; color: var(--ink);
  }

  .nav.is-open .nav-list > li {
    animation: navIn .34s cubic-bezier(.22,.61,.36,1) both;
  }
  .nav.is-open .nav-list > li:nth-child(1) { animation-delay: .05s; }
  .nav.is-open .nav-list > li:nth-child(2) { animation-delay: .10s; }
  .nav.is-open .nav-list > li:nth-child(3) { animation-delay: .15s; }
  .nav.is-open .nav-list > li:nth-child(4) { animation-delay: .20s; }
  .nav.is-open .nav-list > li:nth-child(5) { animation-delay: .25s; }
  @keyframes navIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

  .mega {
    position: static; transform: none; width: auto;
    border: 0; box-shadow: none; border-radius: 0;
    padding: 0 0 var(--space-4);
    display: none; opacity: 1; visibility: visible; pointer-events: auto;
    background: transparent;
  }
  .mega.is-open { display: block; transform: none; }
  .mega-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .mega-col { opacity: 1; transform: none; }
  .mega-foot { display: none; }

  .nav-cta { margin-top: var(--space-6); }
  .nav-cta .btn { width: 100%; }
  .nav-contact {
    margin-top: var(--space-6); padding-top: var(--space-5);
    border-top: 1px solid var(--border); font-size: .9rem; color: var(--muted);
  }
  .nav-contact a { display: block; margin-bottom: var(--space-2); font-weight: 600; }

  .no-js .nav-toggle { display: none; }
  .no-js .nav {
    opacity: 1; visibility: visible; transform: none; transition: none;
  }
  .no-js .mega { display: block; }
}

@media (min-width: 993px) { .nav-contact { display: none; } }

.nav-cta .btn { padding: 13px 22px; font-size: .74rem; }
.nav-cta .btn[aria-current='page'] { box-shadow: var(--glow); }

@media (prefers-reduced-motion: reduce) {
  .nav.is-open .nav-list > li { animation: none; }
  .mega.is-open .mega-col { transition: none; }
  .nav-indicator { transition: opacity .2s ease; }
}

/* ---------- CTA band ----------
   A framed panel: a gradient stroke around a black box, with a gold bloom
   rising from the bottom edge. Section padding stays on the outside so the
   frame floats inside the container. */
.cta-band { text-align: center; }
.cta-band > .container { position: relative; }
.cta-band > .container::before {
  content: ''; position: absolute; inset: 0;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: linear-gradient(135deg, rgba(242,207,69,.85) 0%, rgba(242,207,69,.15) 22%, rgba(255,255,255,.06) 50%, rgba(var(--steel),.55) 78%, rgba(242,207,69,.7) 100%);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask-composite: exclude;
  pointer-events: none;
}
.cta-band > .container::after {
  content: ''; position: absolute; inset: 1px; z-index: -1;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(60% 70% at 50% 110%, rgba(242,207,69,.28), transparent 70%),
    radial-gradient(40% 40% at 12% 0%, rgba(var(--steel),.18), transparent 70%),
    var(--dark);
}
.cta-band > .container {
  padding: clamp(var(--space-8), 8vw, var(--space-10)) clamp(var(--space-5), 6vw, var(--space-9));
  max-width: calc(var(--container) - 2 * var(--gutter));
}
.cta-band h2 { color: var(--on-dark); max-width: 20ch; margin-inline: auto; }
.cta-band p { color: var(--on-dark-muted); max-width: 56ch; margin-inline: auto; }
.cta-band .btn-row {
  display: flex; gap: var(--space-3); justify-content: center;
  flex-wrap: wrap; margin-top: var(--space-6);
}
@media (max-width: 640px) {
  .cta-band > .container { margin-inline: var(--gutter); width: auto; padding-inline: var(--space-5); }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--dark); color: var(--on-dark-muted);
  padding-block: var(--space-9) var(--space-5);
  border-top: 1px solid var(--border);
}
.site-footer a { color: var(--on-dark-muted); font-size: .92rem; }
.site-footer a:hover { color: var(--on-dark); text-decoration: none; }
.footer-grid {
  display: grid; gap: var(--space-7);
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer .brand-text { color: var(--on-dark); }
.footer-about p { color: var(--on-dark-muted); font-size: .95rem; margin-top: var(--space-5); max-width: 34ch; }
.footer-col h4 {
  color: var(--accent); font-size: .7rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--space-4);
}
.footer-col li { margin-bottom: var(--space-3); }
.footer-col li a { display: inline-block; transition: transform .2s ease, color .2s ease; }
.footer-col li a:hover { transform: translateX(3px); }
.footer-contact li { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); font-size: .92rem; }
.footer-contact svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--accent); }
/* The bottom strip is its own raised, rounded bar. */
.footer-bottom {
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-5);
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap; font-size: .78rem;
  font-family: var(--font-mono); letter-spacing: .04em;
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.will-reveal { opacity: 0; transform: translateY(18px); }
.will-reveal.is-revealed {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}