/* ==========================================================================
   CASA Labs — site.css (shared stylesheet, rebuild 2026-07-21)
   Handwritten vanilla CSS. No Tailwind, no CDN, no build step.
   Structure: fonts -> tokens -> reset -> base type -> layout -> components
              -> a11y/perf -> media queries -> canonical template block.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Self-hosted fonts.
   A data-sovereignty company does not ping Google Fonts on every visit:
   both families are served as local woff2 from /fonts, so no third-party
   request leaves the visitor's browser. Only the five named weights load;
   never synthesise weights (no 700).
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-500.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   Design tokens (single source of truth; never hard-code these values).
   -------------------------------------------------------------------------- */
:root {
  /* Color */
  --bg: #050505;
  --bg-raised: #111111;
  --text-1: #F2F2F2;
  --text-2: #C9C9C9;
  --text-3: #9A9A9A;
  --text-min: #808080;
  --line-strong: #666666;
  --line-1: #2E2E2E;
  --line-2: #1A1A1A;
  --accent: #6FA3D9;

  /* Type families */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Type scale — ratio 1.25, base 16px */
  --step--1: 0.8rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.563rem;
  --step-3: 1.953rem;
  --step-4: 2.441rem;
  --step-5: 3.052rem;

  /* Spacing — 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Measure */
  --measure: 65ch;
}

/* --------------------------------------------------------------------------
   Modern minimal reset.
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  /* Native controls, scrollbars, and autofill follow the dark UI. */
  color-scheme: dark;
}
body {
  min-height: 100vh;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

/* Pointer ergonomics: remove tap delay and the grey iOS tap flash on the
   interactive controls; keep the designed focus ring as the only affordance. */
a, button, summary, label,
.nav-toggle, .nav-close,
input, textarea, select {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
:where(h1, h2, h3, h4, p) { overflow-wrap: break-word; }

/* --------------------------------------------------------------------------
   Base typography.
   -------------------------------------------------------------------------- */
body {
  background: var(--bg);
  color: var(--text-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text-1);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { max-width: var(--measure); }
strong, b { font-weight: 500; color: var(--text-1); }

/* Inline text links carry the accent underline. */
.prose a,
a.text-link {
  color: var(--text-1);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.2em;
  transition: color 0.15s ease-out;
}
.prose a:hover,
a.text-link:hover { color: var(--accent); }

/* Lede — one-sentence intro under an H1. */
.lede {
  font-size: var(--step-1);
  color: var(--text-2);
  max-width: var(--measure);
  margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   Layout primitives.
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: clamp(var(--space-4), 5vw, var(--space-8));
}

/* Section rhythm — deliberately varied, not a single uniform block. */
.section { padding-block: var(--space-8); }
.section + .section { border-top: 1px solid var(--line-1); }

/* Single-column hero. */
.hero { padding-block: var(--space-8) var(--space-7); }
.hero-headline {
  font-size: clamp(2.2rem, 5.5vw, 3.052rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.hero-sub {
  font-size: var(--step-1);
  color: var(--text-2);
  max-width: 46ch;
  margin-top: var(--space-5);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* Generic auto-fit grid for service/scenario lists. */
.grid-2 {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* --------------------------------------------------------------------------
   Skip link — visually hidden until focused.
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 200;
  padding: var(--space-3) var(--space-4);
  background: var(--text-1);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  transform: translateY(calc(-60px - var(--space-4)));
  transition: transform 0.15s ease-out;
}
.skip-link:focus { transform: translateY(0); }

/* Skip-link / in-page anchor target. tabindex="-1" (set in markup) lets #main
   receive focus; scroll-margin-top clears the 64px sticky header so the jumped-to
   content is not hidden beneath it. No focus ring on the container itself. */
#main { scroll-margin-top: calc(64px + var(--space-4)); }
#main:focus { outline: none; }
:where(h1, h2, h3, h4) { scroll-margin-top: calc(64px + var(--space-4)); }

/* --------------------------------------------------------------------------
   Sticky header + navigation.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--line-1);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 64px;
}
.logo {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--step-0);
  letter-spacing: 0.12em;
  color: var(--text-1);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.nav-desktop {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  transition: color 0.15s ease-out;
}
.nav-list a:hover { color: var(--text-1); }
.nav-list a[aria-current="page"] { color: var(--text-1); }

/* Mobile toggle button — hidden on desktop. */
.nav-toggle,
.nav-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--text-1);
}

/* Mobile full-viewport overlay sheet. */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  /* Pad past the notch / home indicator on devices with display cutouts,
     and keep overscroll from chaining to the scroll-locked body on iOS. */
  padding: calc(var(--space-5) + env(safe-area-inset-top)) calc(var(--space-5) + env(safe-area-inset-right)) calc(var(--space-5) + env(safe-area-inset-bottom)) calc(var(--space-5) + env(safe-area-inset-left));
  overscroll-behavior: contain;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav-top {
  display: flex;
  justify-content: flex-end;
}
.mobile-nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.mobile-nav-list a {
  display: flex;
  align-items: center;
  min-height: 52px;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  border-bottom: 1px solid var(--line-1);
}
.mobile-nav-list a[aria-current="page"]:not(.btn-primary) { color: var(--text-1); }
.mobile-nav-list .btn-primary {
  margin-top: var(--space-5);
  color: var(--bg);
  text-transform: none;
  letter-spacing: normal;
  border-bottom: none;
}
.mobile-nav-list .btn-primary[aria-current="page"] { color: var(--bg); }

/* Scroll-lock applied to <body> while the sheet is open. */
body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Buttons.
   The one CTA label is "Book a discovery call" (4 words) -> sentence case
   per copy policy (h); no uppercase transform on buttons.
   -------------------------------------------------------------------------- */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step-0);
  line-height: 1.2;
  text-align: center;
  transition: background-color 0.15s ease-out, color 0.15s ease-out,
    border-color 0.15s ease-out;
}
.btn-primary {
  background: var(--text-1);
  color: var(--bg);
  border: 1px solid var(--text-1);
}
.btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.btn-secondary {
  background: transparent;
  color: var(--text-1);
  border: 1px solid var(--line-strong);
}
.btn-secondary:hover { border-color: var(--text-1); }

/* --------------------------------------------------------------------------
   Attention CTA: bright-then-calm (CSS only).
   The homepage hero primary CTA and the contact-form submit button load bright
   white to draw the eye, hold ~3s, then ease over ~1.2s to a calm dimmed state
   to avoid glare. `forwards` freezes the calm state. Monochrome throughout.

   Computed contrast (WCAG, black-on-white / gray-on-charcoal):
     - bright/load + hover/focus: #050505 text on #F2F2F2 bg  = 18.2:1 (AAA)
     - calm state:                #C9C9C9 text on #111111 bg  = 11.4:1 (AAA)
   Both endpoints are AAA. The background-color and color flip together over a
   150ms window (71% to 74.5% of the 4.2s timeline = 150ms), below the dwell
   needed to read a mid-transition frame, so no readable state falls under AA.
   The border-color eases more slowly for perceived smoothness; it carries no
   text-contrast obligation.

   Hover/focus-visible use !important so they beat the animation's `forwards`
   fill (animations otherwise win the cascade), snapping straight back to
   bright without restarting the keyframes on mouse-out. The global
   button:focus-visible ring is untouched, so focus stays visible in either
   state. This is scoped so the persistent nav CTA and sticky mobile CTA never
   dim. Does not apply below 480px where these buttons go full-width.
   -------------------------------------------------------------------------- */
@keyframes ctaCalm {
  0%, 71% {
    background-color: var(--text-1);
    color: var(--bg);
    border-color: var(--text-1);
  }
  74.5% {
    background-color: var(--bg-raised);
    color: var(--text-2);
  }
  100% {
    background-color: var(--bg-raised);
    color: var(--text-2);
    border-color: var(--line-1);
  }
}
.hero-actions .btn-primary,
.form button[type="submit"] {
  animation: ctaCalm 4.2s ease-out forwards;
}
.hero-actions .btn-primary:hover,
.hero-actions .btn-primary:focus-visible,
.form button[type="submit"]:hover,
.form button[type="submit"]:focus-visible {
  background-color: var(--text-1) !important;
  color: var(--bg) !important;
  border-color: var(--text-1) !important;
}
@media (prefers-reduced-motion: reduce) {
  /* No flash-then-dim: land on the calm state directly, still bright on hover. */
  .hero-actions .btn-primary,
  .form button[type="submit"] {
    animation: none;
    background-color: var(--bg-raised);
    color: var(--text-2);
    border-color: var(--line-1);
  }
  .hero-actions .btn-primary:hover,
  .hero-actions .btn-primary:focus-visible,
  .form button[type="submit"]:hover,
  .form button[type="submit"]:focus-visible {
    background-color: var(--text-1) !important;
    color: var(--bg) !important;
    border-color: var(--text-1) !important;
  }
}

/* Shared icon sizing; icons inherit color from surrounding text. */
.icon { width: 1.5rem; height: 1.5rem; display: inline-block; vertical-align: middle; }

/* --------------------------------------------------------------------------
   Eyebrow — the single signature motif.
   Format "01 · SECTION NAME", mono uppercase, above a full-width hairline.
   -------------------------------------------------------------------------- */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line-1);
  margin-bottom: var(--space-6);
}

/* --------------------------------------------------------------------------
   Service / scenario section structures.
   -------------------------------------------------------------------------- */
.service,
.scenario {
  padding-block: var(--space-7);
}
.service + .service,
.scenario + .scenario { border-top: 1px solid var(--line-1); }

.service h3,
.scenario h3 { margin-bottom: var(--space-4); }

.service-sub {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin: var(--space-5) 0 var(--space-3);
}
.service-list { margin-top: var(--space-2); }
.service-list li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-2);
  color: var(--text-2);
  max-width: var(--measure);
}
.service-list li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--text-3);
}
.built-for {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-3);
  margin-top: var(--space-4);
}

/* Illustrative-scenarios disclaimer — body type, not fine print. */
.disclaimer {
  color: var(--text-2);
  max-width: var(--measure);
  margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   CTA band — repeated at the foot of every page.
   -------------------------------------------------------------------------- */
.cta-band {
  padding-block: var(--space-8);
  border-top: 1px solid var(--line-1);
}
.cta-band p {
  font-size: var(--step-2);
  color: var(--text-1);
  max-width: 40ch;
  margin-bottom: var(--space-6);
}

/* Risk-reversal microcopy placed directly beneath a CTA button. */
.cta-note {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-3);
  margin-top: var(--space-3);
}

/* Mid-scroll CTA: a single conversion point between the hero and the closing
   band, so a reader convinced mid-page does not have to reach the footer. */
.mid-cta .cta-note { margin-top: var(--space-4); }

/* Sticky mobile CTA: keeps the primary action in reach during the long
   homepage scroll where the header CTA is hidden in the menu sheet. Shown
   only on the mobile breakpoint (see media query). */
.sticky-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--line-1);
}
.sticky-cta .btn-primary { width: 100%; }

/* --------------------------------------------------------------------------
   Forms (contact.html only).
   -------------------------------------------------------------------------- */
.form { max-width: 560px; }
.field { margin-bottom: var(--space-5); }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-2);
  margin-bottom: var(--space-2);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-raised);
  color: var(--text-1);
  border: 1px solid var(--line-strong);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  transition: border-color 0.15s ease-out;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-min); }
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--accent);
}
.field input:focus:not(:focus-visible),
.field textarea:focus:not(:focus-visible),
.field select:focus:not(:focus-visible) {
  outline: none;
}
/* Error state must read as "failed", not "focused". Focus is a 1px accent
   border; an invalid field gets a heavier 2px border plus a solid inset
   left bar, so the two states are distinct within the monochrome palette. */
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-width: 2px;
  border-color: var(--text-1);
  box-shadow: inset 3px 0 0 0 var(--accent);
}

.field-error {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-1);
  margin-top: var(--space-2);
}
/* "Error:" prefix so the message reads as a failure, not a hint. */
.field-error:not(:empty)::before {
  content: "Error: ";
  color: var(--accent);
  font-weight: 500;
}

/* Success confirmation — replaces the form after a completed submit.
   Hidden by default. Revealed by JS (adds .is-confirmed on .form-wrap) or,
   without JS, by the #confirmation :target from the Netlify redirect URL
   (contact.html?success=1#confirmation). */
.form-confirmation {
  display: none;
  max-width: 560px;
  padding: var(--space-6);
  border: 1px solid var(--line-strong);
}
.form-confirmation p { color: var(--text-2); }
.form-wrap.is-confirmed .form,
.form-wrap.is-confirmed .form-fallback { display: none; }
.form-wrap.is-confirmed .form-confirmation { display: block; }
/* No-JS fallback: the redirect hash makes the block the :target. */
.form-confirmation:target { display: block; }
.form-wrap:has(.form-confirmation:target) .form,
.form-wrap:has(.form-confirmation:target) .form-fallback { display: none; }

/* "What happens next" three-step strip. */
.steps {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: var(--space-6);
}
.step-num {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-bottom: var(--space-2);
}

/* --------------------------------------------------------------------------
   FAQ — details / summary.
   -------------------------------------------------------------------------- */
.faq details {
  border-top: 1px solid var(--line-1);
  padding: var(--space-4) 0;
}
.faq details:last-of-type { border-bottom: 1px solid var(--line-1); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step-1);
  color: var(--text-1);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--text-3);
}
.faq details[open] summary::after { content: "–"; }
.faq details p {
  margin-top: var(--space-3);
  color: var(--text-2);
}

/* --------------------------------------------------------------------------
   Footer.
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line-1);
  padding-block: var(--space-7);
  margin-top: var(--space-8);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  transition: color 0.15s ease-out;
}
.footer-nav a:hover { color: var(--text-1); }
.footer-email {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-1);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.2em;
}
.footer-email:hover { color: var(--accent); }
.footer-meta {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-min);
}

/* --------------------------------------------------------------------------
   Page-specific: home decorative blueprint canvas (index.html).
   Fixed, full-viewport, and pinned behind every content layer (z-index below
   the page), so the field lives behind the whole page rather than just the
   hero strip; pointer-events:none means it never intercepts clicks. Desktop
   only: the JS bails out below 768px and on prefers-reduced-motion (static grid
   only), so this paints only when the field can run. In-flow content and the
   opaque header/footer always paint above the negative z-index canvas.
   -------------------------------------------------------------------------- */
.hero { position: relative; }
.hero > .container { position: relative; z-index: 1; }
.hero-copy { max-width: 40rem; }
#blueprintCanvas { display: none; }
@media (min-width: 768px) {
  #blueprintCanvas {
    display: block; position: fixed; inset: 0;
    width: 100%; height: 100%; pointer-events: none; z-index: -1;
  }
}

/* --------------------------------------------------------------------------
   Page-specific: contact.html.
   -------------------------------------------------------------------------- */
.contact-heading { margin-bottom: var(--space-5); }
.form-fallback { margin-top: var(--space-6); }

/* --------------------------------------------------------------------------
   Accessibility & performance non-negotiables.
   -------------------------------------------------------------------------- */
/* Visible focus ring on every interactive element; never removed without a
   replacement of equal or greater clarity. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Responsive — clean max-width blocks. No horizontal overflow at 375px.
   -------------------------------------------------------------------------- */
/* Below 820px: switch header to mobile toggle + overlay sheet. */
@media (max-width: 820px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-close { display: inline-flex; }

  /* Reveal the sticky mobile CTA and reserve matching space at the foot of the
     page so the fixed bar never covers the footer at full scroll. */
  .sticky-cta { display: block; }
  body:has(.sticky-cta) { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

@media (max-width: 480px) {
  h1 { font-size: var(--step-3); }
  h2 { font-size: var(--step-2); }
  .lede { font-size: var(--step-0); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .btn-primary,
  .btn-secondary { width: 100%; }
  .cta-band p { font-size: var(--step-1); }
}

/* ==========================================================================
   CANONICAL HEADER/FOOTER TEMPLATE — copy verbatim into every page.
   Rules for page builders:
   - Set aria-current="page" on the current page's link in BOTH the desktop
     and mobile nav (remove it from the others).
   - Home link/logo -> index.html. Nav order is fixed: Home, Services,
     Scenarios, About, then the CTA button. Never rename these labels.
   - The CTA "Book a discovery call" stays sentence case (4 words).
   - #main must be the id of the page's <main> so the skip link lands there.
   - inquiry@casa-labs.com must match in footer text AND mailto href.

   ---------- HEADER (place immediately after <body>) ----------
   <a class="skip-link" href="#main">Skip to content</a>
   <header class="site-header">
     <div class="container header-inner">
       <a class="logo" href="index.html">CASA LABS</a>
       <nav class="nav-desktop" aria-label="Primary">
         <ul class="nav-list">
           <li><a href="index.html" aria-current="page">Home</a></li>
           <li><a href="services.html">Services</a></li>
           <li><a href="projects.html">Scenarios</a></li>
           <li><a href="casa-mission.html">About</a></li>
         </ul>
         <a class="btn-primary" href="contact.html">Book a discovery call</a>
       </nav>
       <button class="nav-toggle" type="button" aria-label="Open menu"
               aria-expanded="false" aria-controls="mobileNav">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1.5" aria-hidden="true"
              focusable="false">
           <path d="M4 7h16M4 12h16M4 17h16"/>
         </svg>
       </button>
     </div>
   </header>
   <div class="mobile-nav" id="mobileNav" hidden>
     <div class="mobile-nav-top">
       <button class="nav-close" type="button" aria-label="Close menu">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1.5" aria-hidden="true"
              focusable="false">
           <path d="M6 6l12 12M18 6L6 18"/>
         </svg>
       </button>
     </div>
     <nav class="mobile-nav-list" aria-label="Mobile">
       <a href="index.html" aria-current="page">Home</a>
       <a href="services.html">Services</a>
       <a href="projects.html">Scenarios</a>
       <a href="casa-mission.html">About</a>
       <a class="btn-primary" href="contact.html">Book a discovery call</a>
     </nav>
   </div>

   ---------- FOOTER (place immediately before </body>) ----------
   <footer class="site-footer">
     <div class="container footer-inner">
       <nav class="footer-nav" aria-label="Footer">
         <ul>
           <li><a href="index.html">Home</a></li>
           <li><a href="services.html">Services</a></li>
           <li><a href="projects.html">Scenarios</a></li>
           <li><a href="casa-mission.html">About</a></li>
           <li><a href="contact.html">Contact</a></li>
           <li><a href="privacy.html">Privacy</a></li>
         </ul>
       </nav>
       <a class="footer-email" href="mailto:inquiry@casa-labs.com">inquiry@casa-labs.com</a>
       <p class="footer-meta">CASA Labs. Secure AI workflow systems for the built world.</p>
     </div>
   </footer>
   ========================================================================== */