/* =============================================================
   BUILDOLOGY — SHARED STYLESHEET
   All pages use this one file. Edit colors/fonts here and every
   page updates at once. Color values are kept at the top so you
   can swap the brand palette without hunting through the file.
   ============================================================= */

/* ---------- BRAND COLORS (edit these to retheme the site) ---------- */
:root {
  color-scheme: dark light;      /* signal we support both — browser stops auto-inverting */

  --bg-darker:  #0a0e1a;        /* page background, very dark navy */
  --bg-dark:    #0e1320;        /* card / section background */
  --bg-card:    #12182a;        /* card surface */
  --border:     #1f2940;        /* subtle borders */
  --text:       #f1f5fa;        /* main body text — bumped for higher contrast */
  --text-muted: #c4cdde;        /* secondary text — was #a3adc2, now WCAG AA on --bg-card */
  --text-dim:   #96a1b8;        /* labels/captions — was #6b7791, still muted but readable */
  --accent:     #4dd0e1;        /* cyan highlight — "thrive", "Action" */
  --accent-soft:#7ee8f5;
  --green:      #34d399;        /* check marks, "Live" badges */
  --green-soft: #6ee7b7;
  --button-grad-from: #1a3a52;
  --button-grad-to:   #122036;

  /* Stable text-on-accent color (used by pill badges and step circles) */
  --on-accent:  #0a0e1a;        /* dark text sits on bright cyan in dark mode */

  --radius: 12px;
  --radius-lg: 18px;
  --maxw: 1180px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

/* ---------- LIGHT MODE (applies when data-theme="light" is set on <html>) ----------
   Theme is chosen explicitly via the toggle button and stored in localStorage.
   The inline script in every page's <head> reads localStorage and sets
   data-theme before CSS applies, so the choice persists across navigation
   without a flash of unstyled content. */
:root[data-theme="light"] {
  --bg-darker:  #f6f8fc;      /* page background — warm off-white */
  --bg-dark:    #eef2f9;      /* subtle section band */
  --bg-card:    #ffffff;      /* white cards */
  --border:     #d8dfec;      /* soft slate border */
  --text:       #0f172a;      /* near-black — 17:1 on white */
  --text-muted: #384051;      /* slate 700 — ~9:1 on white */
  --text-dim:   #57607a;      /* slate 600 — ~5.5:1 on white */
  --accent:     #0e88a0;      /* darker cyan for AA contrast on light bg */
  --accent-soft:#0aa6c2;
  --green:      #047857;      /* darker green for AA contrast */
  --green-soft: #059669;
  --button-grad-from: #1e293b;
  --button-grad-to:   #0f172a;
  --on-accent:  #ffffff;      /* white text on darkened accent in light mode */
}

/* ---------- RESET / BASE ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg-darker);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; display: block; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- HEADER / NAV ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 14, 26, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; max-width: var(--maxw); margin: 0 auto;
}
.logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 22px; font-weight: 700; letter-spacing: -0.3px;
}
.logo .word-build  { color: var(--accent); }
.logo .word-ology  { color: var(--text); }
.logo-mark {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #0e1320, #1a3a52);
  border: 1px solid #2a4a6a;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.nav-links {
  display: flex; align-items: center; gap: 28px;
  list-style: none; margin: 0; padding: 0;
}
.nav-links a {
  color: var(--text-muted); font-size: 15px; font-weight: 500;
}
.nav-links a:hover { color: var(--text); text-decoration: none; }
.nav-cta {
  background: linear-gradient(135deg, var(--button-grad-from), var(--button-grad-to));
  color: var(--text) !important;
  padding: 9px 18px; border-radius: 10px;
  border: 1px solid #2a4a6a;
  font-weight: 600;
}
.nav-cta:hover { text-decoration: none; filter: brightness(1.1); }
.mobile-toggle { display: none; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 10px;
  font-weight: 600; font-size: 15px;
  border: 1px solid #2a4a6a;
  cursor: pointer; transition: transform .15s, filter .15s;
  text-decoration: none;
}
.btn:hover { filter: brightness(1.12); transform: translateY(-1px); text-decoration: none; }
.btn-primary {
  background: linear-gradient(135deg, var(--button-grad-from), var(--button-grad-to));
  color: var(--text);
}
.btn-ghost {
  background: transparent; color: var(--text);
  border-color: var(--border);
}
.btn-block { display: flex; justify-content: center; width: 100%; }
.btn-arrow::after { content: "→"; margin-left: 4px; }

/* ---------- SECTIONS / TYPOGRAPHY ---------- */
section { padding: 80px 0; }
h1, h2, h3, h4 { margin: 0 0 16px; line-height: 1.2; font-weight: 700; }
h1 { font-size: clamp(40px, 5.5vw, 64px); letter-spacing: -1px; }
h2 { font-size: clamp(28px, 3.5vw, 42px); letter-spacing: -0.5px; }
h3 { font-size: 20px; }
p  { margin: 0 0 14px; color: var(--text-muted); }
.lead { font-size: 18px; color: var(--text-muted); max-width: 720px; }
.text-center { text-align: center; }
.text-center .lead { margin-left: auto; margin-right: auto; }
.accent { color: var(--accent); }
.eyebrow {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(77, 208, 225, 0.08);
  border: 1px solid rgba(77, 208, 225, 0.25);
  border-radius: 999px;
  font-size: 13px; color: var(--text-muted);
  margin-bottom: 18px;
}

/* ---------- HERO ---------- */
.hero {
  padding: 80px 0 60px;
  background:
    radial-gradient(ellipse at top, rgba(77,208,225,0.06), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(52,211,153,0.04), transparent 60%);
}
.hero h1 { max-width: 800px; }
.hero .lead { margin-top: 14px; max-width: 600px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

/* ---------- FEATURE STRIP (Fast / Clear / Secure) ---------- */
.feature-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-top: 50px;
}
.feature-strip .item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}
.feature-strip .item .title { font-weight: 700; color: var(--text); margin: 0 0 4px; }
.feature-strip .item .sub   { color: var(--text-dim); margin: 0; font-size: 14px; }

/* ---------- WHAT YOU GET CARD ---------- */
.checklist-card {
  margin-top: 50px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
}
.checklist-card h2, .checklist-card h3 { font-size: 22px; margin-bottom: 24px; }
.checklist { list-style: none; padding: 0; margin: 0 0 28px; }
.checklist li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 10px 0; color: var(--text);
}
.checklist li::before {
  content: "✓"; color: var(--green); font-weight: 700; flex-shrink: 0;
}
.checklist-card .note {
  text-align: center; color: var(--text-dim); margin-top: 10px; font-size: 14px;
}

/* ---------- GENERIC CARD GRID ---------- */
.card-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  margin-top: 50px;
}
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  transition: border-color .15s, transform .15s;
}
.card:hover { border-color: #2a4a6a; transform: translateY(-2px); }
.card .icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(77, 208, 225, 0.1);
  border: 1px solid rgba(77, 208, 225, 0.25);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  margin-bottom: 18px;
}
.card h3 { color: var(--text); }
.card p { font-size: 15px; }

/* ---------- PRODUCT (SaaS) CARDS ---------- */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.product-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  position: relative; overflow: hidden;
}
.product-card.live::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--green));
}
.product-card .head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.product-card .badge-live {
  background: rgba(52, 211, 153, 0.12);
  color: var(--green);
  border: 1px solid rgba(52, 211, 153, 0.3);
  padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.product-card h3 { margin-bottom: 8px; }
.product-card .tagline { color: var(--accent); font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 22px; }
.tag {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  padding: 5px 12px; border-radius: 6px;
  font-size: 12px; color: var(--text-muted);
}

/* ---------- PACKAGES ---------- */
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 50px; }
.pkg {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  position: relative;
}
.pkg.featured {
  border-color: rgba(77, 208, 225, 0.4);
  box-shadow: 0 0 0 1px rgba(77, 208, 225, 0.15);
}
.pkg-tier  { font-size: 13px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 6px; }
.pkg-name  { font-size: 26px; font-weight: 700; color: var(--text); margin-bottom: 18px; }
.pkg-popular {
  position: absolute; top: -12px; right: 24px;
  background: var(--accent); color: var(--on-accent);
  padding: 4px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
}

/* ---------- STEPS (How it works) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.step {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px; text-align: center;
}
.step .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  font-weight: 700; margin-bottom: 12px;
}

/* ---------- CONTACT ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; margin-top: 40px; }
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; }
.contact-info .row { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--text); }
.form { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; }
.form label { display: block; font-size: 14px; margin: 14px 0 6px; color: var(--text); }
.form input, .form textarea {
  width: 100%; padding: 12px 14px;
  background: var(--bg-darker); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-family: inherit; font-size: 15px;
}
.form textarea { min-height: 120px; resize: vertical; }
.form .submit-row { margin-top: 22px; }

/* ---------- CTA SECTION ---------- */
.cta-section { text-align: center; padding: 80px 0; }
.cta-section h2 { margin-bottom: 14px; }
.cta-section .lead { margin: 0 auto 28px; }
.cta-section .hero-ctas { justify-content: center; }

/* ---------- FOOTER ---------- */
.site-footer {
  background: var(--bg-dark);
  border-top: 1px solid var(--border);
  padding: 60px 0 28px;
  color: var(--text-muted);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.footer-grid h4 { color: var(--text); font-size: 14px; text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 14px; }
.footer-grid a { color: var(--text-muted); display: block; padding: 4px 0; font-size: 14px; }
.footer-grid a:hover { color: var(--accent); text-decoration: none; }
.footer-bottom {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  font-size: 13px; color: var(--text-dim);
}
.footer-bottom .links a { color: var(--text-dim); margin: 0 6px; }

/* ---------- THEME TOGGLE BUTTON ---------- */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  transition: filter .15s, border-color .15s;
}
.theme-toggle:hover { filter: brightness(1.15); border-color: var(--accent); }

/* ---------- LIGHT-MODE FIXES for hardcoded rgba values (flat selectors, no nesting) ---------- */
:root[data-theme="light"] .site-header {
  background: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid var(--border);
}
:root[data-theme="light"] .logo-mark {
  background: linear-gradient(135deg, #eef2f9, #d8dfec);
  border: 1px solid var(--border);
}
:root[data-theme="light"] .tag {
  background: rgba(0, 0, 0, 0.03);
  color: var(--text-muted);
}
:root[data-theme="light"] .checklist li { color: var(--text); }
:root[data-theme="light"] .contact-info .row,
:root[data-theme="light"] .form label { color: var(--text); }
:root[data-theme="light"] .form input,
:root[data-theme="light"] .form textarea {
  background: #fafbfd;
  color: var(--text);
}
:root[data-theme="light"] .card:hover { border-color: #9ca8bd; }
:root[data-theme="light"] .btn { border-color: var(--border); }
:root[data-theme="light"] .nav-cta { border: 1px solid var(--border); color: #ffffff !important; }
/* Primary buttons keep dark gradient bg in light mode → force white text for AA contrast */
:root[data-theme="light"] .btn-primary { color: #ffffff; }
:root[data-theme="light"] .btn-ghost   { color: var(--text); }
:root[data-theme="light"] .badge-live {
  background: rgba(4, 120, 87, 0.10);
  border-color: rgba(4, 120, 87, 0.35);
}
:root[data-theme="light"] .eyebrow {
  background: rgba(14, 136, 160, 0.08);
  border-color: rgba(14, 136, 160, 0.30);
  color: var(--text-muted);
}
:root[data-theme="light"] .card .icon {
  background: rgba(14, 136, 160, 0.10);
  border-color: rgba(14, 136, 160, 0.30);
}
:root[data-theme="light"] .pkg.featured {
  border-color: rgba(14, 136, 160, 0.50);
  box-shadow: 0 0 0 1px rgba(14, 136, 160, 0.20);
}
:root[data-theme="light"] .hero {
  background:
    radial-gradient(ellipse at top, rgba(14, 136, 160, 0.06), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(4, 120, 87, 0.04), transparent 60%);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .feature-strip, .card-grid, .product-grid, .pkg-grid, .steps {
    grid-template-columns: 1fr;
  }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .nav-links { display: none; }
  .mobile-toggle {
    display: inline-flex; background: transparent; border: 1px solid var(--border);
    color: var(--text); padding: 8px 12px; border-radius: 8px; font-size: 14px;
  }
  .nav-links.open {
    display: flex; flex-direction: column; gap: 16px;
    position: absolute; top: 64px; right: 16px; left: 16px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; padding: 18px;
  }
  section { padding: 60px 0; }
  .footer-grid { grid-template-columns: 1fr; }
}
/* =============================================================
   MODERN LAYER — added 2026-09-22
   Progressive enhancement only. Every block below is either
   inherently safe to ignore or wrapped in @supports, so a browser
   that doesn't understand a feature simply renders the site as it
   did before. Nothing here is required for the page to work.

   Motion is gated behind prefers-reduced-motion: no-preference,
   so anyone who has asked their OS for less movement gets none.
   ============================================================= */

/* ---------- 1. Typed custom properties -----------------------
   @property makes a custom property animatable and type-safe.
   Without it, you cannot transition a gradient angle at all.     */
@property --glow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --glow-opacity {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* ---------- 2. Cross-document view transitions ---------------
   Navigating between pages cross-fades instead of flashing white.
   Chrome/Edge today; everywhere else it is simply ignored.       */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root) {
    animation: vt-out 180ms cubic-bezier(.4, 0, 1, 1) both;
  }
  ::view-transition-new(root) {
    animation: vt-in 260ms cubic-bezier(0, 0, .2, 1) both;
  }

  /* The header and footer are identical between pages, so hold
     them still while the body content crosses over. */
  .site-header { view-transition-name: site-header; }
  .site-footer { view-transition-name: site-footer; }
}

@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(8px); } }

/* ---------- 3. Scroll-driven reveals -------------------------
   Native scroll-linked animation — no JavaScript, no observer,
   no layout thrash. Runs on the compositor.

   Deliberately inside @supports: the initial opacity:0 only ever
   applies in a browser that can also animate it back to 1. A
   browser without support never sees the rule, so content can
   never be left invisible.                                       */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .card,
    .product-card,
    .pkg,
    .step,
    .sw-d,
    .sw-p,
    .sw-t,
    .post-card,
    .checklist-card,
    .sw-calc {
      animation: reveal-up linear both;
      animation-timeline: view();
      /* Finished well before the element is centred, so nothing
         is still fading while the reader is looking at it. */
      animation-range: entry 0% cover 22%;
    }
  }
}

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 4. Entry animation for injected chrome -----------
   site.js writes the header and footer in after parse, so they
   pop in. @starting-style gives them a real entry transition.    */
@media (prefers-reduced-motion: no-preference) {
  .site-header,
  .site-footer {
    transition: opacity .35s ease, transform .35s ease;
  }
  @starting-style {
    .site-header { opacity: 0; transform: translateY(-6px); }
    .site-footer { opacity: 0; }
  }
}

/* ---------- 5. Focus visibility (accessibility) --------------
   The stylesheet previously had no focus styles at all, so a
   keyboard user had no idea where they were. :focus-visible
   shows the ring for keyboard navigation but not mouse clicks.   */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible,
.nav-cta:focus-visible {
  outline-offset: 4px;
}
/* Never remove the ring without replacing it. */
:focus:not(:focus-visible) {
  outline: none;
}

/* ---------- 6. Typography refinements ------------------------
   text-wrap: balance evens out headline line lengths so you
   don't get a single orphaned word. 'pretty' prevents orphans
   in body copy. Ignored safely where unsupported.               */
h1, h2, h3,
.pkg-name,
.post-card h2 {
  text-wrap: balance;
}

p, .lead, li {
  text-wrap: pretty;
}

/* ---------- 7. Derived colours with color-mix() --------------
   Hover and surface tints are now computed from the brand token
   instead of hardcoded rgba, so retheming the palette at the top
   of this file carries through automatically.                   */
@supports (background: color-mix(in oklab, red, blue)) {
  .card:hover,
  .post-card:hover,
  .sw-d:hover {
    border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
    background: color-mix(in oklab, var(--accent) 4%, var(--bg-card));
  }

  .btn-primary:hover {
    background: color-mix(in oklab, var(--accent) 12%, var(--button-grad-to));
  }

  .tag:hover,
  .sw-ind:hover {
    border-color: color-mix(in oklab, var(--accent) 45%, var(--border));
    color: var(--text);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .card,
  .post-card,
  .sw-d,
  .tag,
  .sw-ind {
    transition: border-color .18s ease, background-color .18s ease,
                color .18s ease, transform .18s ease;
  }
  .card:hover,
  .post-card:hover {
    transform: translateY(-2px);
  }
}

/* ---------- 8. Container queries -----------------------------
   Card grids now respond to the width of their own container
   rather than the viewport, so the same component behaves
   correctly wherever it is placed.                               */
@supports (container-type: inline-size) {
  .card-grid,
  .product-grid,
  .pkg-grid,
  .sw-dash,
  .posts {
    container-type: inline-size;
  }

  @container (max-width: 560px) {
    .card,
    .product-card,
    .pkg,
    .sw-d,
    .post-card {
      padding: 20px 22px;
    }
  }
}

/* ---------- 9. :has() relational selectors -------------------
   Lets a parent react to its children without extra classes.     */
@supports selector(:has(*)) {
  /* A section whose heading carries an accent gets a little more
     breathing room above it. */
  section:has(> .container > .eyebrow) {
    padding-top: clamp(56px, 7vw, 96px);
  }

  /* An open FAQ item stands out from its closed siblings. */
  .sw-faq details[open] {
    border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
  }

  /* A form with an invalid, touched field tints its submit row. */
  .form:has(input:user-invalid) .submit-row {
    opacity: .75;
  }
}

/* ---------- 10. Animating to intrinsic sizes -----------------
   interpolate-size lets height animate to/from `auto`, which was
   impossible in CSS for twenty years. Makes the FAQ accordion
   expand smoothly instead of snapping.                           */
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }

  @media (prefers-reduced-motion: no-preference) {
    .sw-faq details::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size .3s ease, content-visibility .3s allow-discrete;
    }
    .sw-faq details[open]::details-content {
      block-size: auto;
    }
  }
}

/* ---------- 11. Form ergonomics ------------------------------ */
@supports (field-sizing: content) {
  .form textarea {
    field-sizing: content;
    min-block-size: 7lh;   /* seven lines, then it grows with content */
    max-block-size: 22lh;
  }
}

.form input,
.form textarea {
  transition: border-color .16s ease, box-shadow .16s ease;
}
.form input:focus,
.form textarea:focus {
  border-color: var(--accent);
}

/* ---------- 12. Smooth anchor scrolling ---------------------- */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
/* Anchor targets clear the sticky header instead of hiding under it. */
:target,
section[id] {
  scroll-margin-block-start: 90px;
}

/* ---------- 13. Accent underline on nav ---------------------- */
.nav-links > li > a {
  position: relative;
}
@media (prefers-reduced-motion: no-preference) {
  .nav-links > li > a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: -5px;
    block-size: 2px;
    background: var(--accent);
    scale: 0 1;
    transform-origin: left;
    transition: scale .2s ease;
  }
  .nav-links > li > a:hover::after,
  .nav-links > li > a:focus-visible::after {
    scale: 1 1;
  }
}

/* ---------- 14. Respect the reduced-motion request fully -----
   A single, explicit backstop. If anything above is missed, or a
   future rule forgets its guard, this neutralises it.            */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Click-to-call in the nav ------------------------
   The business runs on inbound calls, so the number is tappable
   from every page rather than buried in the footer. On narrow
   screens the digits are hidden and the icon alone remains, so
   it survives a phone-width nav without wrapping.              */
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nav-phone svg { flex: none; opacity: .85; }
.nav-phone:hover { color: var(--accent); }
.nav-phone:hover svg { opacity: 1; }

@media (max-width: 1080px) {
  .nav-phone span { position: absolute; inline-size: 1px; block-size: 1px;
                    overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav-phone { padding-inline: 4px; }
}

/* ---------- Header layout fixes -----------------------------
   The header grew a phone number, a Client Login button and two
   more links. Three things then broke:
     1. .logo had no flex basis, so it was squashed by the links
     2. .nav-links never wrapped or shrank, so items collided
     3. the hamburger only appeared at 700px, leaving everything
        between 700px and ~1300px overflowing
   Later rules win, so these override the originals above.      */

.nav {
  gap: 20px;
  flex-wrap: nowrap;
}

/* The wordmark is never the thing that gives way. */
.logo {
  flex: 0 0 auto;
  min-inline-size: 0;
  white-space: nowrap;
}

/* The link row absorbs the pressure instead. */
.nav-links {
  flex: 0 1 auto;
  min-inline-size: 0;
  gap: 22px;
  justify-content: flex-end;
}

.nav-links > li { flex: none; }

/* Buttons must never be clipped mid-word. */
.nav-cta,
.nav-links a {
  white-space: nowrap;
}

/* Tighten progressively before giving up and collapsing. */
@media (max-width: 1240px) { .nav-links { gap: 16px; } }
@media (max-width: 1120px) {
  .nav-links { gap: 13px; }
  .nav-links a { font-size: 14.5px; }
  .nav-cta { padding: 8px 14px; }
}

/* Collapse to the hamburger while there is still room, rather
   than after things have already collided. */
@media (max-width: 1040px) {
  .nav-links { display: none; }
  .mobile-toggle {
    display: inline-flex; align-items: center;
    background: transparent; border: 1px solid var(--border);
    color: var(--text); padding: 8px 13px; border-radius: 8px;
    font-size: 14px; font-weight: 600; cursor: pointer;
  }
  .mobile-toggle:hover { border-color: var(--accent); color: var(--accent); }

  .nav-links.open {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 4px;
    position: absolute; inset-inline: 16px; top: 70px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; padding: 12px;
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
  }
  .nav-links.open > li { inline-size: 100%; }
  .nav-links.open a {
    display: block; padding: 11px 12px; border-radius: 8px; font-size: 16px;
  }
  .nav-links.open a:hover { background: var(--bg-dark); }

  /* Show the full number inside the dropdown — there is room there
     even though there wasn't in the bar. */
  .nav-links.open .nav-phone span {
    position: static; inline-size: auto; block-size: auto;
    overflow: visible; clip-path: none;
  }
  .nav-links.open .nav-phone {
    padding-inline: 12px;
    border-block-end: 1px solid var(--border);
    margin-block-end: 6px; padding-block-end: 12px;
  }
  .nav-links.open .nav-cta { text-align: center; margin-block-start: 6px; }
  .nav-links.open .theme-toggle { margin-inline-start: 12px; }
}

/* Very narrow: let the wordmark shrink rather than push the
   toggle off the edge. */
@media (max-width: 380px) {
  .nav { padding-inline: 16px; }
  .logo { font-size: 19px; }
  .logo-mark { inline-size: 30px; block-size: 30px; }
}

/* ═══════════════════════════════════════════════════════════════
   AURORA BACKGROUND
   Soft coloured light bleeding in from the edges, in Buildology's
   blues. One block, one source of truth.

   Design notes worth keeping:

   * No markup. A single body::before applies to every page
     automatically, including pages added later.
   * No filter: blur(). Layered radial-gradients are already soft
     and cost far less to composite than blurring solid circles.
   * No mix-blend-mode: screen. Screen blends toward white, so it
     is close to a no-op on light backgrounds. Each theme gets its
     own hues and strengths instead.
   * Strengths are set by MEASUREMENT, not taste. The ceiling is
     per-hue, against --text-dim (#96a1b8) at 4.5:1 on the page
     background: cyan tops out at 23%, the blue at 40%, the deep
     navy at 80%. Values below were picked by simulating the whole
     composited stack across a 1440x900 viewport at 12px steps and
     taking the worst pixel: 5.01:1 on the bare hero, 6.88:1 inside
     a section, 4.78:1 when the scroll parallax is at full travel.
     Raise the navy or blues if you want more; do not raise cyan.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --aurora-1: #4dd0e1;   /* brand cyan  */
  --aurora-2: #2f6fed;   /* blue        */
  --aurora-3: #1a3a52;   /* deep navy   */
  --aurora-4: #2f6fed;
  --aurora-5: #4dd0e1;

  --aurora-a: 22%;   /* cyan  top-left    (ceiling 23%) */
  --aurora-b: 36%;   /* blue  top-right   (ceiling 40%) */
  --aurora-c: 48%;   /* navy  bottom      (ceiling 80%) */
  --aurora-d: 34%;   /* blue  mid-left                  */
  --aurora-e: 18%;   /* cyan  mid-right                 */
  --aurora-f: 55%;   /* navy  centre - fills the middle */

  /* Alternating sections stay mostly opaque but let the aurora
     read through, so a long page is continuous, not banded. */
  --bg-section: color-mix(in oklab, var(--bg-dark) 86%, transparent);
}

:root[data-theme="light"] {
  --aurora-1: #0e88a0;
  --aurora-2: #2f6fed;
  --aurora-3: #7ea8c9;
  --aurora-4: #2f6fed;
  --aurora-5: #0e88a0;

  --aurora-a: 13%;
  --aurora-b: 12%;
  --aurora-c: 18%;
  --aurora-d: 11%;
  --aurora-e: 7%;
  --aurora-f: 16%;

  --bg-section: color-mix(in oklab, var(--bg-dark) 90%, transparent);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60vw 48vw at 6% -8%,
      color-mix(in oklab, var(--aurora-1) var(--aurora-a), transparent) 0%, transparent 70%),
    radial-gradient(54vw 44vw at 98% -2%,
      color-mix(in oklab, var(--aurora-2) var(--aurora-b), transparent) 0%, transparent 68%),
    radial-gradient(54vw 48vw at -6% 38%,
      color-mix(in oklab, var(--aurora-4) var(--aurora-d), transparent) 0%, transparent 66%),
    radial-gradient(48vw 44vw at 104% 62%,
      color-mix(in oklab, var(--aurora-5) var(--aurora-e), transparent) 0%, transparent 64%),
    radial-gradient(92vw 76vw at 50% 50%,
      color-mix(in oklab, var(--aurora-3) var(--aurora-f), transparent) 0%, transparent 80%),
    radial-gradient(74vw 58vw at 46% 106%,
      color-mix(in oklab, var(--aurora-3) var(--aurora-c), transparent) 0%, transparent 72%);
}

/* Without color-mix the page would get no aurora at all rather
   than a broken one. Give those browsers a plain wash. */
@supports not (background: color-mix(in oklab, red, blue)) {
  body::before {
    background: linear-gradient(180deg,
      rgba(77, 208, 225, .10) 0%, transparent 42%,
      rgba(26, 58, 82, .24) 100%);
  }
}

/* Tie the aurora to scroll so a long page travels through the
   colour instead of repeating one frame. body::before is fixed,
   so without this every screenful looks identical - which is
   exactly what made the middle of long pages read as flat.
   Transform only, so it stays on the compositor. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    body::before {
      animation: aurora-parallax linear both;
      animation-timeline: scroll(root block);
      will-change: transform;
    }
  }
}

/* Fallback for browsers without scroll timelines: a slow drift so
   the page still feels alive. */
@supports not (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    body::before {
      animation: aurora-drift 48s ease-in-out infinite alternate;
      will-change: transform;
    }
  }
}

@keyframes aurora-parallax {
  from { transform: translate3d(0, 0, 0)    scale(1.06); }
  to   { transform: translate3d(0, -14%, 0) scale(1.20); }
}
@keyframes aurora-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -2.5%, 0) scale(1.06); }
}

/* The sticky header sits over the aurora - soften it so the
   colour shows through the blur. */
.site-header {
  background: color-mix(in oklab, var(--bg-darker) 78%, transparent);
}

.cta-section,
.site-footer {
  background: color-mix(in oklab, var(--bg-dark) 88%, transparent);
}

/* ---------- Screen-reader-only -------------------------------
   For headings a document outline needs but the design does not
   show. Clip rather than display:none, so assistive tech still
   reads it. */
.sr-only {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---------- Contact form: extra fields -----------------------
   The form now captures qualification detail, so it needs paired
   rows, selects that match the inputs, and required/optional
   markers. */
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .f-row { grid-template-columns: 1fr; gap: 0; } }

.form select {
  inline-size: 100%;
  padding: 12px 14px;
  margin-block-end: 16px;
  background: var(--bg-darker);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.form select:focus { border-color: var(--accent); }

.form .req { color: var(--accent); font-weight: 700; }
.form .opt { color: var(--text-dim); font-weight: 400; font-size: 13px; }
.form .fine {
  margin-block-start: 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
}

/* Audit fixes: preserve desktop card counts without inline overrides. */
.card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.card-grid > * { min-inline-size:0; }
.values-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.testimonial-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:900px) {
  .card-grid, .values-grid, .testimonial-grid { grid-template-columns:minmax(0,1fr); }
}
.restrictions-list { padding-inline-start:1.3em; }
.restrictions-list li { margin-block:10px; padding-inline-start:4px; }