/* ═══════════════════════════════════════════════════════════════════
   AIRHAUS — shared global styles
   Loaded by every page. Page-specific styles stay inline in the page.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --color-black:        #111110;
  --color-cream:        #FAF7F2;
  --color-copper:       #C8962A;
  --color-teal:         #1A4A4A;
  --color-copper-light: #E8B84B;
  --color-copper-dark:  #A67820;
  --color-teal-light:   #2A6A6A;
  --color-mid-gray:     #8A8A88;
  --color-border:       #E2DED8;

  /* Muted grey, split by background. #8A8A88 measures 5.46:1 on near-black
     and is correct there, but only 3.24:1 on cream and 2.96:1 on cream-dark,
     both under the 4.5:1 AA bar for body text. Darkening it globally would
     fix the light sections and break the dark ones (#636361 drops to 3.28:1
     on near-black), so the two cases carry different tokens. Use
     --color-mid-gray on dark sections and --color-mid-gray-light on
     cream, cream-dark, and white.

     DARKENED 9 Aug 2026, from #6B6B69, and NOT optional. Cream-dark moved
     from #F0EDE6 to #E6E4DF in the same pass; #6B6B69 measured 4.57:1 on the
     old value and drops to 4.20:1 on the new one, under the AA bar. The two
     changes ship together or neither ships. */
  --color-mid-gray-light: #636361;   /* 5.63:1 on cream, 4.74:1 on cream-dark */
}

/* ── Focus ring ──
   One indicator that survives every section background. A single colour
   cannot: near-black scores 17.68:1 on cream but 1.00:1 on near-black, and
   copper is the mirror image (7.06:1 on near-black, 2.50:1 on cream, which
   also fails the 3:1 non-text bar in WCAG 1.4.11).

   So the ring is two-tone. The dark outline carries light sections, the
   cream halo carries dark and teal sections (9.27:1 on teal), and one of the
   two is always visible. Applied through .focus-ring rather than repeated
   per component. */
.focus-ring:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.btn-outline:focus-visible,
.btn-outline-copper:focus-visible,
.btn-chat:focus-visible,
.ask-inline:focus-visible,
.nav-cta:focus-visible,
.nav-toggle:focus-visible,
.nav-link:focus-visible,
.nav-logo-lockup:focus-visible,
.nav-panel-links a:focus-visible,
.footer-logo:focus-visible,
.footer-nav a:focus-visible,
.phone-link:focus-visible,
.faq-btn:focus-visible,
.faq-answer-inner a:focus-visible,
.skip-link:focus-visible,

/* Inline links inside running copy. These carry no button class, so before
   this they fell back to the browser default ring, which is a thin blue line
   that vanishes against both the near-black and the cream sections. The four
   container selectors below are declared in page-level <style> blocks rather
   than here; naming them from this rule is deliberate, so that every focus
   indicator on the site still resolves to this one declaration instead of
   being re-implemented per page. The classless "Text Jay." links take the
   .focus-ring class directly in the markup. */
.faq-meta a:focus-visible,        /* "Jay Yost" byline — all four pages */
.embed-privacy a:focus-visible,   /* "Text Jay" under the audit form      */
.paths-link a:focus-visible,      /* "Services page" on /audit            */
.nf-map-links a:focus-visible,    /* the site map on 404                  */
.about-inline-link:focus-visible {
  outline: 2px solid #111110;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(250, 247, 242, 0.95);
}

/* ── Skip link (WCAG 2.4.1 Bypass Blocks, Level A) ──
   Every page places the logo, three nav links and a CTA before <main>, so
   without this a keyboard or screen reader user tabs the whole nav on every
   page. Hidden until focused; <main id="main"> already exists sitewide. */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: #C8962A;
  color: #111110;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: transform 0.15s ease;
}
.skip-link:focus-visible { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #111110;
  -webkit-font-smoothing: antialiased;
}

/* ── Grain texture overlay ── */
.grain::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 1;
}
.grain > * { position: relative; z-index: 2; }

/* ── Buttons ── */
/* Near-black on copper, approved by Jay 6 Aug 2026. Cream on copper measured
   2.51:1 at this size and failed AA on the site's most important control.
   Near-black is 7.06:1 at rest and 4.79:1 on the darker hover.
   Do not put cream back on either copper: #FAF7F2 on #A67820 is 3.69:1.
   :active keeps the hover background because #825E15 drops to 3.52:1 with
   near-black; the press is communicated by the transform, not the colour. */
.btn-primary {
  display: inline-block;
  background: #C8962A;
  color: #111110;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  padding: 0.8125rem 1.875rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  text-align: center;
}
.btn-primary:hover  { background: #A67820; color: #111110; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(200,150,42,0.25); }
.btn-primary:active { background: #A67820; color: #111110; transform: translateY(0); box-shadow: none; }

/* ── Ghost secondary, for dark sections ──
   BORDER ALPHA IS 0.5 AND MUST NOT GO BACK TO 0.35. Measured against the
   composited backdrop under the "See What We Build" link on #proof, which is
   the hardest case on the site because a photograph sits behind it:

     alpha 0.35  ->  3.09:1 on the darkest pixel, 2.91:1 on the brightest  FAIL
     alpha 0.50  ->  5.03:1 on the darkest pixel, 4.38:1 on the brightest  pass

   The 3:1 bar is WCAG 1.4.11 for a non-text boundary. At 0.35 the border
   failed wherever the photograph lightens, which is exactly where a border is
   doing the most work. Closes the open polish item logged 8 Aug 2026.
   Text is cream at 12.59:1 worst case; hover goes to solid cream. */
.btn-ghost {
  display: inline-block;
  background: transparent;
  color: #FAF7F2;
  border: 2px solid rgba(250,247,242,0.5);
  padding: 0.75rem 1.875rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
  text-align: center;
}
.btn-ghost:hover { border-color: #FAF7F2; background: rgba(250,247,242,0.07); transform: translateY(-1px); }
.btn-ghost:active { transform: translateY(0); }

/* Outlined secondary, for use on cream backgrounds */
.btn-outline {
  display: inline-block;
  background: transparent;
  color: #111110;
  border: 2px solid #111110;
  padding: 0.75rem 1.875rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
  text-align: center;
}
.btn-outline:hover { background: #111110; color: #FAF7F2; transform: translateY(-1px); }
.btn-outline:active { transform: translateY(0); }

/* ── Copper outline, for dark sections ──
   A brand-accented alternative to .btn-ghost, for a link that should read as
   belonging to its section rather than as another secondary CTA. Used on the
   After Launch orbital, where .btn-ghost made "Explore Growth Systems" look
   like a sibling of the Ask AIRHAUS buttons.

   Contrast on #111110: text #C8962A is 7.06:1. The border sits at 0.7 alpha,
   which composites to roughly #918A22 and measures 4.02:1 — above the 3:1
   WCAG 1.4.11 bar for a non-text boundary. Do not drop it to 0.55: that lands
   at 2.93:1 and fails.

   Hover fills to solid copper with near-black text, the same 7.06:1 pairing
   .btn-primary uses at rest. Never put cream on copper here. */
.btn-outline-copper {
  display: inline-block;
  background: transparent;
  color: #C8962A;
  border: 2px solid rgba(200, 150, 42, 0.7);
  padding: 0.75rem 1.875rem;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  text-align: center;
}
.btn-outline-copper:hover {
  background: #C8962A;
  color: #111110;
  border-color: #C8962A;
  transform: translateY(-1px);
}
.btn-outline-copper:active { transform: translateY(0); }

/* ── Ask AIRHAUS ──
   The secondary CTA. Opens the existing GoHighLevel chat widget, so it is a
   <button>, not an <a>: it performs an action, it does not navigate.

   Always pair it with .btn-ghost (dark sections) or .btn-outline (cream
   sections). Both are deliberately quieter than .btn-primary, because the
   audit has to stay the dominant conversion. Never give this the copper
   .btn-primary treatment.

   It ships with the `hidden` attribute and is revealed by airhaus.js only
   once the widget reports itself loaded. Do not delete the [hidden] rule
   and do not remove `hidden` from the markup: without them a blocked or
   failed widget script leaves a button that looks live and does nothing. */
.btn-chat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;              /* touch target floor */
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.btn-chat[hidden] { display: none; }

/* Inline text-style variant, for the "Have a question before requesting an
   audit? Ask AIRHAUS." sentence. Matches the sibling "Text Jay." links: copper
   on dark, underlined by a border. Copper #C8962A on the near-black hero
   overlay is 7.06:1. */
.ask-inline {
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(200,150,42,0.4);
  padding: 0;
  color: #C8962A;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
  cursor: pointer;
}
.ask-inline:hover { border-bottom-color: #C8962A; }

/* ── Section labels ── */
.section-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #636361;   /* only ever used on cream / cream-dark */
}

/* Copper section label. Default is the light-background value; the two
   modifiers cover dark sections, where #825E15 would disappear.
   #C8962A on teal is 3.70:1 and fails AA for 12px text, which is why teal
   gets the lighter copper rather than the base one. */
.section-label-copper {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #825E15;              /* 5.52:1 on cream, 4.64:1 on cream-dark.
                                  DARKENED 9 Aug 2026 from #8A6418, which was
                                  4.59:1 on the old cream-dark and 4.22:1 on
                                  the new #E6E4DF. Coupled to that change. */
}
.section-label-copper.on-dark { color: #C8962A; }  /* 7.06:1 on near-black */
.section-label-copper.on-teal { color: #E8B84B; }  /* 5.37:1 on teal */

/* ── Phone link ── */
.phone-link {
  font-size: clamp(2.5rem, 7vw, 4rem);
  font-weight: 800;
  color: #FAF7F2;
  text-decoration: none;
  letter-spacing: -0.03em;
  transition: color 0.15s ease;
}
.phone-link:hover { color: #C8962A; }


/* ═══════════════════════════════════════════════════════════════════
   FAQ ACCORDION (shared component)
   Animates on grid-template-rows rather than a fixed max-height so
   multi-paragraph answers cannot be clipped at any viewport width.
   ═══════════════════════════════════════════════════════════════════ */

/* FAQ — custom numbered rows with a copper plus/minus toggle and a designed
   open state. Global across all four FAQ pages. The number is a CSS counter
   (no markup change); the legacy chevron SVG is hidden and a plus-that-becomes-
   a-minus is drawn on the button's ::after. The open row carries a copper left
   rule and a faint copper tint (.open is added to .faq-row by toggleFaq). */
.faq-row {
  position: relative;
  border-bottom: 1px solid #E2DED8;
  border-left: 2px solid transparent;
  counter-increment: faq;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.faq-row:first-of-type { border-top: 1px solid #E2DED8; counter-reset: faq; }
.faq-row.open { background: rgba(200,150,42,0.05); border-left-color: #C8962A; }

.faq-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 1.5rem 18px 1.5rem 16px;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
}
.faq-btn::before {
  content: counter(faq, decimal-leading-zero);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #825E15;
  flex: none;
  width: 22px;
  padding-top: 2px;
}
.faq-question {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #111110;
  line-height: 1.35;
  flex: 1;
  transition: color 0.2s ease;
}
.faq-row.open .faq-question { color: #825E15; }

/* Legacy chevron hidden; the toggle is drawn on the button's ::after. */
.faq-chevron { display: none; }
.faq-btn::after {
  content: '';
  flex: none;
  width: 26px; height: 26px;
  border: 1.5px solid rgba(200,150,42,0.5);
  border-radius: 50%;
  background:
    linear-gradient(#825E15, #825E15) center / 11px 1.8px no-repeat,
    linear-gradient(#825E15, #825E15) center / 1.8px 11px no-repeat;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.faq-btn:hover::after { border-color: #C8962A; }
.faq-row.open .faq-btn::after {
  background:
    linear-gradient(#111110, #111110) center / 11px 1.8px no-repeat;
  background-color: #C8962A;
  border-color: #C8962A;
}
.faq-answer-inner { padding-left: 54px; padding-right: 18px; }

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  opacity: 0;
}
.faq-answer.open { grid-template-rows: 1fr; opacity: 1; }
.faq-answer-inner { overflow: hidden; min-height: 0; }
.faq-answer-inner p {
  color: #56564F;
  line-height: 1.75;
  font-size: 0.9375rem;
  margin: 0 0 1rem;
}
.faq-answer-inner p:last-child { margin-bottom: 1.5rem; }
.faq-answer-inner a {
  color: #825E15;
  text-decoration: none;
  border-bottom: 1px solid rgba(130,94,21,0.45);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.faq-answer-inner a:hover { color: #C8962A; border-color: #C8962A; }

.faq-meta {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #E2DED8;
  font-size: 0.8125rem;
  color: #636361;
  line-height: 1.7;
}
.faq-meta a {
  color: #825E15;
  text-decoration: none;
  border-bottom: 1px solid rgba(130,94,21,0.45);
}
.faq-meta a:hover { color: #C8962A; }


/* ═══════════════════════════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════════════════════════ */

.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(17,17,16,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(250,247,242,0.06);
}
.nav-inner {
  max-width: 80rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 32px;
}

/* Logo lockup */
.nav-logo-svg { width: 52px; height: 58px; flex-shrink: 0; }
.nav-logo-wordmark { font-family: Georgia, serif; font-size: 30px; font-weight: normal; letter-spacing: 0.05em; line-height: 1; }
/* Alpha raised 0.45 -> 0.50 on 10 Aug 2026: 0.45 composited to 4.32:1 on the
   near-black nav, under the 4.5:1 bar. 0.50 measures 5.06:1. This is the
   hardest text on the site to read — 9px uppercase at 0.18em tracking, 7px
   below 640px — so do not shave it back toward the 4.5 line. The 7px rule
   further down sets size only and inherits this colour. */
.nav-logo-subline { font-family: 'Inter', system-ui, sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 0.18em; color: rgba(250,247,242,0.50); text-transform: uppercase; line-height: 1; }
.nav-logo-lockup { display: flex; align-items: center; gap: 16px; text-decoration: none; cursor: pointer; }
.nav-logo-text { display: flex; flex-direction: column; gap: 3px; }

/* Right cluster */
.nav-right { display: flex; align-items: center; gap: 28px; }
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav-link {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(250,247,242,0.75);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.nav-link:hover { color: #C8962A; }
.nav-link[aria-current="page"] { color: #C8962A; }

/* Same copper contrast fix as .btn-primary. See the note there. */
.nav-cta {
  background: #C8962A;
  color: #111110;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  padding: 0.5rem 1.25rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s ease;
  white-space: nowrap;
}
.nav-cta:hover { background: #A67820; color: #111110; }

/* Mobile toggle */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(250,247,242,0.18);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.nav-toggle:hover { border-color: rgba(250,247,242,0.4); background: rgba(250,247,242,0.05); }
.nav-toggle-bars { display: block; position: relative; width: 18px; height: 12px; }
.nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #FAF7F2;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 5px; }
.nav-toggle-bars span:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Mobile panel */
.nav-panel {
  display: none;
  border-top: 1px solid rgba(250,247,242,0.07);
  background: rgba(17,17,16,0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 4px 24px 20px;
}
.nav-panel.open { display: block; }
.nav-panel-links { list-style: none; margin: 0; padding: 0; }
.nav-panel-links a {
  display: block;
  padding: 14px 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #FAF7F2;
  text-decoration: none;
  border-bottom: 1px solid rgba(250,247,242,0.07);
  transition: color 0.15s ease;
}
.nav-panel-links a:hover { color: #C8962A; }
.nav-panel-cta { display: none; margin-top: 18px; }

@media (max-width: 899px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-right { gap: 12px; }
}
@media (max-width: 768px) {
  .nav-logo-svg { width: 38px; height: 42px; }
  .nav-logo-wordmark { font-size: 22px; }
  .nav-logo-subline { font-size: 7px; letter-spacing: 0.14em; }
  .nav-logo-lockup { gap: 12px; }
  .nav-inner { padding: 10px 20px; }
  .nav-right { gap: 10px; }
  .nav-cta { font-size: 0.75rem; padding: 0.5rem 0.9rem; }
}
@media (max-width: 479px) {
  .nav-right > .nav-cta { display: none; }
  .nav-panel-cta { display: block; width: 100%; text-align: center; font-size: 0.875rem; padding: 0.75rem 1.25rem; }
}
@media (min-width: 900px) {
  .nav-panel, .nav-panel.open { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════ */

.site-footer {
  background: #111110;
  border-top: 1px solid rgba(250,247,242,0.07);
}
.footer-cta {
  text-align: center;
  padding: 4rem 1.5rem;
  border-bottom: 1px solid rgba(250,247,242,0.07);
}
/* Pages that already close with their own audit CTA section carry
   class="no-footer-cta" on <body>, so the same ask is not repeated
   twice in a row. The footer markup stays identical across all pages. */
.no-footer-cta .footer-cta { display: none; }
.footer-cta-heading {
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  font-weight: 800;
  color: #FAF7F2;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 1.75rem;
}
.footer-main {
  max-width: 80rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.footer-logo { text-decoration: none; display: flex; align-items: center; }
.footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.footer-nav a {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #8A8A88;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.footer-nav a:hover { color: #C8962A; }
.footer-meta { text-align: right; }
.footer-tagline { font-size: 0.875rem; color: #8A8A88; margin: 0 0 0.25rem; }
/* Alpha raised 0.55 -> 0.90 on 10 Aug 2026: 0.55 composited to 2.47:1 on the
   near-black footer, the worst contrast on the site. 0.90 measures 4.64:1.
   Deliberately NOT solid #8A8A88, which passes at 5.46:1 but is the exact
   colour of .footer-tagline directly above and would flatten the two lines
   into one tone. 0.88 lands at 4.49:1 and fails, so 0.90 is the floor. */
.footer-signature { font-size: 0.75rem; color: rgba(138,138,136,0.90); margin: 0; }

@media (max-width: 860px) {
  .footer-main { flex-direction: column; text-align: center; gap: 1.75rem; }
  .footer-nav { justify-content: center; }
  .footer-meta { text-align: center; }
}
@media (max-width: 640px) {
  .footer-cta { padding: 3rem 1.5rem; }
}


/* ═══════════════════════════════════════════════════════════════════
   LEGAL PAGES — /privacy and /terms

   Shared rather than duplicated per page: two reference documents that
   look different from each other read as two different sites. Both pages
   are drafts and neither ships yet, so these rules are currently inert
   in production.

   No hero photograph on either. Every other subpage opens on an image,
   but these are reference documents, not pitches, and a hero would cost
   an LCP image request to decorate text nobody arrives to admire. A flat
   near-black band carries the same brand weight for free.
   ═══════════════════════════════════════════════════════════════════ */

    .legal-head {
      background: #111110;
      padding: 170px 1.5rem 64px;
      text-align: center;
    }
    .legal-h1 {
      font-size: clamp(2.4rem, 3.6vw, 3rem);
      font-weight: 800;
      color: #FAF7F2;
      letter-spacing: -0.028em;
      line-height: 1.1;
      margin-bottom: 1rem;
    }
    .legal-dates {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 0.75rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #8A8A88;   /* 5.46:1 on near-black */
      line-height: 1.9;
    }

    .legal-body {
      background: #FAF7F2;
      padding: 72px 1.5rem 88px;
    }
    .legal-wrap { max-width: 720px; margin: 0 auto; }

    .legal-lede {
      font-size: 1.0625rem;
      line-height: 1.75;
      color: #2E2E2C;
      margin-bottom: 2.5rem;
      padding-bottom: 2.5rem;
      border-bottom: 1px solid #E2DED8;
    }

    .legal-body h2 {
      font-size: clamp(1.25rem, 2.4vw, 1.5rem);
      font-weight: 700;
      color: #111110;
      letter-spacing: -0.018em;
      line-height: 1.25;
      margin: 2.75rem 0 0.875rem;
    }
    .legal-body h2:first-of-type { margin-top: 0; }

    .legal-body p {
      font-size: 0.96875rem;
      line-height: 1.75;
      color: #2E2E2C;
      margin-bottom: 1rem;
    }

    .legal-body ul {
      margin: 0 0 1.25rem;
      padding: 0;
      list-style: none;
    }
    .legal-body li {
      position: relative;
      padding-left: 1.125rem;
      font-size: 0.96875rem;
      line-height: 1.75;
      color: #2E2E2C;
      margin-bottom: 0.5rem;
    }
    .legal-body li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.7em;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #C8962A;
    }

    .legal-body a {
      color: #825E15;   /* 5.52:1 on cream */
      text-decoration: none;
      border-bottom: 1px solid rgba(130,94,21,0.45);
    }
    .legal-body a:hover { color: #C8962A; }

    @media (max-width: 768px) {
      .legal-head { padding: 140px 1.25rem 52px; }
      .legal-h1 { font-size: clamp(1.9rem, 7.5vw, 2.4rem); }
      .legal-body { padding: 56px 1.25rem 72px; }
    }

/* ═══════════════════════════════════════════════════════════════════
   SHARED MOTION SYSTEM
   Prototype, approved on the homepage 9 Aug 2026 and extended to
   /services, /about and /audit. NOT on /work, /privacy, /terms or 404 —
   those pages have no .hero-photo and carry no .reveal, so every rule
   below is inert on them.

   Two effects, one controller in airhaus.js:
     1. hero parallax  — moves .hero-photo and nothing else
     2. scroll reveals — .reveal, revealed once

   The per-page numbers live on the page, not here. Each hero sets
   --hero-scale and --hero-scale-mid (overscale) and --hero-travel and
   --hero-travel-mid (the target throw in px); airhaus.js reads the same
   custom properties, so CSS is the single source of truth and the two
   cannot drift. Crop, overlay and image stay page-local too, because they
   were measured per photograph and must not be unified.
   ═══════════════════════════════════════════════════════════════════ */

/* Both layers sit under .grain::before (z-index 1) and the hero content
   (z-index 10), reproducing the original single-element paint order. The
   ID-free selectors still beat `.grain > *`'s position:relative because
   that rule is earlier in this file. */
.hero-photo,
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* THE BASE IS THE ORIGINAL STATIC HERO: no transform, no overscale. Wider
   viewports add the effect back below. Mobile is therefore the default
   rather than something switched off afterwards, which is what guarantees
   a phone can never inherit a stray zoom. */
.hero-photo {
  background-size: cover;
  background-repeat: no-repeat;
  transform: none;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

/* THE TRAVEL BUDGET. A layer scaled S over a hero of height H hides
   H*(S-1)/2 of image above and below the frame, so the usable TOTAL travel
   is H*(S-1) - 2*safety. More movement always costs more zoom; making the
   layer taller instead re-runs `cover` and enlarges it by the same ratio.
   Because the scale is shared, every hero moves by the same PROPORTION of
   its own height (~11%), which is what makes four pages of different hero
   heights feel like one system. */
@media (min-width: 769px) and (max-width: 1023px) {
  .hero-photo { transform: translate3d(0, 0, 0) scale(var(--hero-scale-mid, 1.10)); }
  .js .hero-photo { will-change: transform; }
}
@media (min-width: 1024px) {
  .hero-photo { transform: translate3d(0, 0, 0) scale(var(--hero-scale, 1.13)); }
  .js .hero-photo { will-change: transform; }
}

/* Scroll reveals. Scoped to .js so that with JavaScript disabled or broken
   the page is simply visible rather than a column of empty sections.
   Applied to section-level GROUPS, never to .air-card and friends: those
   already own `transform` for their hover lift and the two would fight. */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.56s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.56s cubic-bezier(0.4, 0, 0.2, 1);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Reduced motion wins by source order rather than !important, so it must
   stay last in this file. It drops the overscale as well as the movement,
   giving the original static composition at FIRST PAINT rather than after
   JS runs. The controller reads the same query, never activates, and so
   never writes the inline transform that would outrank this. */
@media (prefers-reduced-motion: reduce) {
  .hero-photo {
    transform: none;
    will-change: auto;
  }
  .js .reveal,
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0ms !important;
  }
  /* `html { scroll-behavior: smooth }` is set near the top of this file.
     Smooth scrolling is motion the visitor did not ask for, so it is turned
     back off here. This used to live in /audit's own stylesheet and applied
     to that page alone; it now covers every page. */
  html { scroll-behavior: auto; }
}