/* Self-hosted Google Fonts (latin subset) — replaces fonts.googleapis.com (render-blocking chain removed 2026-07-02) */
@font-face{font-family:'DM Serif Display';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/dm-serif-display-400-italic.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dm-serif-display-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/space-grotesk-variable.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ─── Breemedia — Shared Core Styles ─── */
/* "Bold Contrast" design system — dark-dominant with electric accents */
/* Loaded on every page via <link>. Page-specific CSS stays inline. */

/* ── Variables ───────────────────────────────── */
:root {
    /* Backgrounds */
    --bg: #0c0c0e;
    --bg2: #131316;
    --bg3: #1e1e22;
    --card: #16161a;
    --card-border: rgba(255,255,255,.06);

    /* Light sections (alternate for contrast) */
    --bg-light: #f7f7f5;
    --bg-light2: #eeeee9;
    --bg-light3: #e0e0da;
    --card-light: #ffffff;
    --card-border-light: rgba(0,0,0,.06);

    /* Text — dark bg */
    --text: rgba(255,255,255,.87);    /* Headings / primary — ~14:1 on near-black */
    --text2: rgba(255,255,255,.6);    /* Body — ~7.5:1, AAA */
    --text3: rgba(255,255,255,.6);    /* Muted captions — was .44 (~4.4:1, borderline). Aligned to --text2 to clear AA across all small-text usages. Use --text4 for genuinely decorative chrome. */
    --text4: rgba(255,255,255,.28);   /* Decorative ONLY (separators, dim chrome) — must be aria-hidden or non-informational */

    /* Text — light bg */
    --text-on-light: #1a1a1c;
    --text2-on-light: #555459;
    --text3-on-light: #656369;
    --text4-on-light: #6e6c74;  /* was #7a7880 (4.35:1 on white — failed AA). 5.17:1 on #fff, 4.82:1 on --bg-light */

    /* Accent */
    --accent: #818cf8;        /* Indigo-400 — passes AA only on dark backgrounds */
    --accent2: #6366f1;       /* Indigo-500 — hover/decorative on dark */
    --accent-deep: #4338ca;   /* Indigo-700 — passes AA on light backgrounds (≥4.5:1) — use for inline links + small white-on-indigo text */
    --accent-dim: rgba(129,140,248,.12);
    --accent-light: rgba(129,140,248,.08);
    --accent-lighter: rgba(129,140,248,.04);

    /* Warm accent */
    --warm: #f5a623;
    --warm-dim: rgba(245,166,35,.12);
    --warm-light: rgba(245,166,35,.06);

    /* Dark (used for text on light sections) */
    --dark: #0c0c0e;
    --dark2: #16161a;

    /* Typography */
    --serif: 'DM Serif Display', Georgia, serif;
    --sans: 'Space Grotesk', -apple-system, sans-serif;
    --mono: 'IBM Plex Mono', monospace;

    /* Shadows — multi-layer depth (border + elevation + ambient) */
    --shadow-sm: 0 0 0 1px rgba(255,255,255,.04), 0 1px 3px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.15);
    --shadow-md: 0 0 0 1px rgba(255,255,255,.04), 0 4px 20px rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.15);
    --shadow-lg: 0 0 0 1px rgba(255,255,255,.04), 0 12px 40px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.2);
    --shadow-xl: 0 0 0 1px rgba(255,255,255,.04), 0 24px 60px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.25);
    --glow-accent: 0 0 0 1px rgba(129,140,248,.2), 0 0 20px rgba(129,140,248,.15), 0 0 60px rgba(129,140,248,.05);
    --glow-warm: 0 0 0 1px rgba(245,166,35,.2), 0 0 20px rgba(245,166,35,.15), 0 0 60px rgba(245,166,35,.05);
    --ring-accent: 0 0 0 1px rgba(129,140,248,.15);

    /* Layout */
    --radius: 16px;
    --radius-sm: 10px;
    --focus: 0 0 0 3px rgba(129,140,248,.35);
    --container: 1280px;

    /* Grid pattern backgrounds */
    --grid-dark: linear-gradient(to right,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/40px 40px, linear-gradient(to bottom,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/40px 40px;
    --grid-light: linear-gradient(to right,rgba(0,0,0,.05) 1px,transparent 1px) 0 0/40px 40px, linear-gradient(to bottom,rgba(0,0,0,.05) 1px,transparent 1px) 0 0/40px 40px;
}

/* ── Reset ───────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box }
html { scroll-behavior: smooth; overflow-x: hidden; width: 100% }
html, body { max-width: 100vw }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal, .reveal-up, .reveal-left, .reveal-right, .reveal-scale, .reveal-clip, .reveal-blur {
        opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important;
    }
}

body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--text2);
    line-height: 1.75;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    font-weight: 400;
}

::selection { background: var(--accent); color: #fff }

/* ── Accessibility ───────────────────────────── */
.skip-link {
    position: absolute; top: -100%; left: 16px;
    background: var(--accent-deep); color: #fff; /* was var(--accent) #818cf8 — white-on-soft-indigo failed AA (2.98:1). --accent-deep clears AAA. */
    padding: 12px 24px; border-radius: 0 0 8px 8px;
    font-weight: 600; font-size: .9rem;
    z-index: 10000; text-decoration: none;
    transition: top .2s;
}
.skip-link:focus { top: 0; outline: none }

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

/* ── Layout ──────────────────────────────────── */
.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; position: relative; z-index: 1 }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px }

/* ── Section Helpers ─────────────────────────── */
.section-dark { background: var(--bg); color: var(--text) }
.section-light { background: var(--bg-light); color: var(--text-on-light) }
.section-light .stag { color: var(--accent-deep) } /* was --accent2 #6366f1 — 3.44:1 on cream, fails AA. --accent-deep #4338ca clears AAA. */
.section-light .stitle { color: var(--dark) }
.section-light .ssub { color: var(--text3-on-light) }

/* Dot pattern decorative element */
.dot-pattern {
    position: absolute; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* ── Grid Overlay — organic fade ───────────── */
main section, footer, .article-hero, .article-content, .page-hero, .page-content { position: relative; overflow: hidden }
main section::before, footer::before,
.article-hero::before, .article-content::before,
.page-hero::before, .page-content::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: var(--grid-dark);
    transform: translateY(var(--parallax-y, 0));
    -webkit-mask-image:
        radial-gradient(ellipse 80% 70% at 20% 30%, rgba(0,0,0,.55), transparent 70%),
        radial-gradient(ellipse 70% 80% at 75% 65%, rgba(0,0,0,.45), transparent 70%);
    mask-image:
        radial-gradient(ellipse 80% 70% at 20% 30%, rgba(0,0,0,.55), transparent 70%),
        radial-gradient(ellipse 70% 80% at 75% 65%, rgba(0,0,0,.45), transparent 70%);
}
.section-light::before, .bg-white::before,
.article-content::before, .page-content::before {
    background: var(--grid-light);
}

/* ── Header / Nav ────────────────────────────── */
header[role="banner"] {
    position: fixed; top: 0; width: 100%; z-index: 1000;
    padding: 24px 0;
    background: rgba(12,12,14,.4);
    backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-bottom: 1px solid rgba(255,255,255,.04);
    transition: all .5s cubic-bezier(.22,1,.36,1);
}
header.scrolled {
    background: rgba(12,12,14,.88);
    backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6);
    padding: 16px 0;
    border-bottom-color: rgba(255,255,255,.06);
    box-shadow: 0 1px 0 rgba(255,255,255,.06);
}
header .container { display: flex; justify-content: space-between; align-items: center }

.nav-brand { font-family: var(--serif); font-size: 1.35rem; color: #fff; text-decoration: none; letter-spacing: -.3px }
.nav-brand span { color: var(--accent) }
.nav-links { display: flex; gap: 36px; list-style: none; align-items: center }
.nav-links a { color: var(--text2); text-decoration: none; font-size: .88rem; font-weight: 400; transition: color .3s }
.nav-links a:hover, .nav-links a:focus-visible { color: #fff }

.nav-cta-btn {
    background: var(--accent-deep) !important; color: #fff !important; /* deeper indigo so white text passes AA at 14px */
    padding: 11px 28px !important; border-radius: 100px;
    font-weight: 500 !important; transition: all .3s !important;
    display: inline-flex !important; align-items: center; gap: 8px;
}
/* When rendered as <button> (the quiz CTA — no navigation possible even if JS hasn't bound yet), strip default UA button styling so it matches the <a class="nav-cta-btn"> variant exactly. */
button.nav-cta-btn { border: 0; font: inherit; cursor: pointer; line-height: 1.4; font-size: .88rem; }
.nav-cta-icon {
    width: 20px; height: 20px; background: rgba(255,255,255,.2); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background .3s; flex-shrink: 0;
}
.nav-cta-icon svg {
    width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 2.5;
}
.nav-cta-btn:hover, .nav-cta-btn:focus-visible {
    background: var(--warm) !important; color: var(--dark) !important;
    transform: translateY(-1px); box-shadow: var(--glow-warm);
}
.nav-cta-btn:hover .nav-cta-icon, .nav-cta-btn:focus-visible .nav-cta-icon {
    background: rgba(0,0,0,.2);
}

.mobile-menu-btn {
    display: none; background: 0 0; border: 0; cursor: pointer;
    width: 28px; height: 20px; position: relative;
}
.mobile-menu-btn span {
    display: block; width: 100%; height: 1.5px;
    background: #fff; position: absolute; left: 0;
    transition: all .3s; border-radius: 2px;
}
.mobile-menu-btn span:nth-child(1) { top: 0 }
.mobile-menu-btn span:nth-child(2) { top: 9px }
.mobile-menu-btn span:nth-child(3) { top: 18px }
.mobile-menu-btn[aria-expanded="true"] span:nth-child(1) { top: 9px; transform: rotate(45deg) }
.mobile-menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0 }
.mobile-menu-btn[aria-expanded="true"] span:nth-child(3) { top: 9px; transform: rotate(-45deg) }

/* ── Breadcrumb ──────────────────────────────── */
.breadcrumb {
    font-family: var(--mono); font-size: .7rem; color: var(--text2); /* --text4 (.28) and --text3 (.44) both fail AA at 11.2px — .60 clears 7:1 */
    letter-spacing: 1px; margin-bottom: 28px;
    display: flex; align-items: center; gap: 8px;
}
.breadcrumb a { color: var(--text2); text-decoration: none; transition: color .3s }
.breadcrumb a:hover { color: var(--accent) }
.breadcrumb-sep { color: var(--text2) } /* match link colour for visual consistency (aria-hidden so SRs skip) */

/* Light-section breadcrumb */
.section-light .breadcrumb { color: var(--text4-on-light) }
.section-light .breadcrumb a { color: var(--text3-on-light) }
.section-light .breadcrumb-sep { color: var(--text4-on-light) }

/* ── Section Labels ──────────────────────────── */
.stag {
    font-family: var(--mono); font-size: .72rem; color: var(--accent);
    letter-spacing: 2.5px; text-transform: uppercase;
    margin-bottom: 16px; display: inline-flex; align-items: center;
    gap: 12px; font-weight: 500;
}
.stag-line { width: 24px; height: 1px; background: var(--accent) }

.stitle {
    font-family: var(--serif); font-size: clamp(2rem, 3.5vw, 2.9rem);
    font-weight: 400; color: #fff;
    letter-spacing: -1.2px; line-height: 1.05; margin-bottom: 18px;
}
.stitle em { font-style: italic }

.ssub { font-size: 1.05rem; color: var(--text3); max-width: 540px; line-height: 1.85; font-weight: 300 }

/* ── Buttons ─────────────────────────────────── */
.btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--accent-deep); color: #fff; /* was var(--accent) #818cf8 — white-on-soft-indigo failed AA at 14.7px (2.98:1). --accent-deep #4338ca clears AAA (~6.2:1). */
    padding: 17px 38px; border: 0; border-radius: 100px;
    font-family: var(--sans); font-size: .92rem; font-weight: 500;
    cursor: pointer; text-decoration: none;
    transition: all .4s cubic-bezier(.22,1,.36,1); letter-spacing: .3px;
}
.btn-primary:hover, .btn-primary:focus-visible {
    background: var(--warm); color: var(--dark); transform: translateY(-2px); box-shadow: var(--glow-warm);
}

.btn-outline {
    display: inline-flex; align-items: center; gap: 8px;
    background: 0 0; color: var(--text);
    padding: 17px 38px; border: 1.5px solid rgba(255,255,255,.15);
    border-radius: 100px; font-family: var(--sans); font-size: .92rem; font-weight: 500;
    text-decoration: none; transition: all .4s;
}
.btn-outline:hover, .btn-outline:focus-visible {
    border-color: var(--accent); color: var(--accent); transform: translateY(-2px);
}

/* Button on light sections */
.section-light .btn-primary { background: var(--dark); color: #fff }
.section-light .btn-primary:hover, .section-light .btn-primary:focus-visible { background: var(--accent); color: #fff }
.section-light .btn-outline { color: var(--dark); border-color: rgba(0,0,0,.15) }
.section-light .btn-outline:hover, .section-light .btn-outline:focus-visible { border-color: var(--accent); color: var(--accent) }

/* ── Footer ──────────────────────────────────── */
footer {
    background: var(--bg2); color: rgba(255,255,255,.5); padding: 72px 0 48px;
    position: relative; overflow: hidden;
}
.footer-layout { display: flex; justify-content: space-between; align-items: start; margin-bottom: 56px; position: relative }
.footer-brand .nav-brand { font-size: 1.2rem; display: inline-block; margin-bottom: 14px; color: #fff }
.footer-brand .nav-brand span { color: var(--accent) }
.footer-brand p { font-size: .85rem; color: rgba(255,255,255,.45); max-width: 300px; line-height: 1.7 }
.footer-nav { display: flex; gap: 64px }
.footer-col h2 { font-size: .78rem; font-weight: 500; color: rgba(255,255,255,.6); margin-bottom: 18px; letter-spacing: .5px } /* Promoted from h3 to h2 (top-level footer section) — bumped opacity from .5 to .6 to clear AA at small font */
.footer-col ul { list-style: none }
.footer-col li { margin-bottom: 12px }
.footer-col a { font-size: .85rem; color: rgba(255,255,255,.45); text-decoration: none; transition: color .3s }
.footer-col a:hover, .footer-col a:focus-visible { color: var(--accent) }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.06); padding-top: 32px; display: flex; justify-content: space-between; align-items: center; position: relative }
.footer-bottom p { font-size: .78rem; color: var(--text2) } /* was rgba(.4) — failed AA at 12.5px */
.footer-bottom-links { display: flex; gap: 28px }
.footer-bottom-links a { font-size: .78rem; color: var(--text2); text-decoration: none; transition: color .3s } /* was rgba(.4) — failed AA at 12.5px */
.footer-bottom-links a:hover, .footer-bottom-links a:focus-visible { color: var(--accent) }

/* ── Scroll Reveal ───────────────────────────── */
/* Hidden states are gated on html.js (set inline in <head>) so content
   FAILS OPEN: crawlers, no-JS, and script errors see everything visible.
   Without the gate, a JS failure left every below-fold section invisible. */
.js .reveal, .js .reveal-up {
    opacity: 0; transform: translateY(32px) scale(.97);
    transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.reveal.visible, .reveal-up.visible { opacity: 1; transform: translateY(0) scale(1) }

.js .reveal-left {
    opacity: 0; transform: translateX(-40px) scale(.97);
    transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.reveal-left.visible { opacity: 1; transform: translateX(0) scale(1) }

.js .reveal-right {
    opacity: 0; transform: translateX(40px) scale(.97);
    transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.reveal-right.visible { opacity: 1; transform: translateX(0) scale(1) }

.js .reveal-scale {
    opacity: 0; transform: scale(.85);
    transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1);
}
.reveal-scale.visible { opacity: 1; transform: scale(1) }

.js .reveal-clip {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1s cubic-bezier(.22,1,.36,1);
}
.reveal-clip.visible { clip-path: inset(0 0 0 0) }

/* Blur-up reveal — content sharpens as it enters */
.js .reveal-blur {
    opacity: 0; transform: translateY(20px); filter: blur(8px);
    transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1), filter .8s cubic-bezier(.22,1,.36,1);
}
.reveal-blur.visible { opacity: 1; transform: translateY(0); filter: blur(0) }

.rd1 { transition-delay: .08s }
.rd2 { transition-delay: .16s }
.rd3 { transition-delay: .24s }
.rd4 { transition-delay: .32s }
.rd5 { transition-delay: .4s }
.rd6 { transition-delay: .48s }

/* ── Frosted Glass Button ────────────────────── */
.btn-glass {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.06); color: var(--text);
    padding: 14px 32px; border: 1px solid rgba(255,255,255,.08);
    border-radius: 100px; font-family: var(--sans); font-size: .88rem; font-weight: 500;
    cursor: pointer; text-decoration: none;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    transition: all .4s cubic-bezier(.22,1,.36,1);
}
.btn-glass:hover, .btn-glass:focus-visible {
    background: rgba(255,255,255,.1); border-color: rgba(129,140,248,.3);
    box-shadow: var(--ring-accent); transform: translateY(-1px);
}

/* ── Form ────────────────────────────────────── */
.form-wrap {
    background: var(--card); border: none;
    border-radius: 20px; padding: 52px;
    box-shadow: var(--shadow-md); overflow: hidden;
    max-width: 100%; box-sizing: border-box;
}
.form-wrap h3 { font-family: var(--serif); font-size: 1.4rem; color: #fff; margin-bottom: 6px; font-weight: 400 }
.form-wrap > p { font-size: .9rem; color: var(--text3); margin-bottom: 36px }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px }
.fg { display: flex; flex-direction: column; gap: 7px }
.fg.full { grid-column: 1 / -1 }
.fg label { font-size: .78rem; font-weight: 500; color: var(--text2); letter-spacing: .3px }
.fg input, .fg select, .fg textarea {
    background: var(--bg3); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-sm);
    padding: 14px 18px; font-family: var(--sans); font-size: .9rem;
    color: #fff; transition: all .3s; width: 100%; max-width: 100%; box-sizing: border-box;
}
.fg input:focus, .fg select:focus, .fg textarea:focus {
    border-color: var(--accent); box-shadow: var(--focus); outline: 0; background: var(--bg2);
}
.fg input::placeholder, .fg textarea::placeholder { color: var(--text3) }
.fg select { cursor: pointer }
.fg select option { background: var(--bg2); color: #fff }
.fg textarea { resize: vertical; min-height: 120px }
.form-submit { margin-top: 28px }
.form-submit .btn-primary { width: 100%; justify-content: center; padding: 18px; border-radius: var(--radius-sm) }
.form-msg { padding: 16px; border-radius: var(--radius-sm); font-size: .9rem; margin-top: 16px; display: none }
.form-msg.success { background: var(--accent-dim); border: 1px solid rgba(129,140,248,.2); color: var(--accent); display: block }
.form-msg.error { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.2); color: #ef4444; display: block }

/* ── Contact Section ─────────────────────────── */
.contact { padding: 120px 0 140px }
.contact-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: start }
.contact-info .ssub { margin-bottom: 44px }
.contact-detail { display: flex; align-items: center; gap: 16px; margin-bottom: 22px }
.cd-icon { width: 44px; height: 44px; min-width: 44px; background: var(--accent-dim); border-radius: 12px; display: flex; align-items: center; justify-content: center }
.cd-icon svg { width: 18px; height: 18px; stroke: var(--accent); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.contact-detail p { font-size: .92rem; color: var(--text2) }
.contact-detail a { color: #fff; text-decoration: none; transition: color .3s }
.contact-detail a:hover, .contact-detail a:focus-visible { color: var(--accent) }

/* Forms on light sections */
.section-light .form-wrap { background: var(--card-light); border-color: var(--card-border-light) }
.section-light .form-wrap h3 { color: var(--dark) }
.section-light .form-wrap > p { color: var(--text3-on-light) }
.section-light .fg label { color: var(--text2-on-light) }
.section-light .fg input, .section-light .fg select, .section-light .fg textarea {
    background: var(--bg-light); border-color: var(--bg-light3); color: var(--dark);
}
.section-light .fg input:focus, .section-light .fg select:focus, .section-light .fg textarea:focus {
    background: #fff;
}
.section-light .fg input::placeholder, .section-light .fg textarea::placeholder { color: var(--text4-on-light) }
.section-light .fg select option { background: #fff; color: var(--dark) }

/* ── Page Hero (shared by interior pages) ────── */
.page-hero {
    padding: 160px 0 60px;
    background: var(--bg);
}
.page-hero .container { max-width: 780px }
.page-hero h1 {
    font-family: var(--serif); font-size: clamp(2rem, 4vw, 2.8rem);
    color: #fff; letter-spacing: -1.5px; line-height: 1.05;
    margin-bottom: 20px; font-weight: 400;
}
.page-hero h1 em { font-style: italic; color: var(--accent) }
.page-hero .container > p {
    font-size: 1.05rem; color: var(--text3); max-width: 560px;
    line-height: 1.85; font-weight: 300;
}

/* ── Page Content (privacy, accessibility pages) */
.page-content { padding: 60px 0 120px; background: var(--bg-light) }
.page-content .container { max-width: 720px }
.page-content h2 {
    font-family: var(--serif); font-size: 1.5rem; color: var(--dark);
    letter-spacing: -.5px; margin: 44px 0 16px; font-weight: 400; line-height: 1.25;
}
.page-content p { font-size: 1rem; color: var(--text2-on-light); line-height: 1.85; margin-bottom: 20px; font-weight: 300 }
.page-content p strong { font-weight: 500; color: var(--text-on-light) }
.page-content ul { margin: 0 0 24px 24px; font-size: 1rem; color: var(--text2-on-light); line-height: 1.85; font-weight: 300 }
.page-content li { margin-bottom: 8px }
.page-content a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; transition: color .3s }
.page-content a:hover { color: #3730a3 }
.page-meta {
    font-family: var(--mono); font-size: .75rem; color: var(--text4-on-light);
    margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--bg-light3);
}

/* ── Article Shared Styles ───────────────────── */
.article-hero {
    padding: 160px 0 60px;
    background: var(--bg);
}
.article-hero .container { max-width: 780px }
.article-hero-image { margin-bottom: 32px; border-radius: var(--radius); overflow: hidden; width: 100%; aspect-ratio: 1/1 }
.article-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block }
.article-label {
    font-family: var(--mono); font-size: .7rem; color: var(--accent);
    letter-spacing: 2.5px; text-transform: uppercase;
    margin-bottom: 16px; font-weight: 500;
}
.article-hero h1 {
    font-family: var(--serif); font-size: clamp(2rem, 4vw, 2.8rem);
    color: #fff; letter-spacing: -1.5px; line-height: 1.05;
    margin-bottom: 20px; font-weight: 400;
}
.article-hero h1 em { font-style: italic; color: var(--accent) }
.article-meta {
    font-size: .88rem; color: var(--text2); /* --text3 (rgba alpha .44) is ~4.4:1 on near-black — fails AA at 14px. --text2 (.60) clears 7:1. */
    display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
    margin-bottom: 34px;
}

/* Article content on light background for readability */
/* color default MUST be set here: without it, content inherits the dark-theme
   body colour (white) and any element not individually styled below — tables,
   dl/dt/dd, figcaption, standalone strong — renders white-on-light = invisible. */
.article-content { padding: 60px 0 100px; background: var(--bg-light); color: var(--text2-on-light) }
.article-content .container { max-width: 720px }
/* Comparison tables — were unstyled, so th/td inherited white and vanished on the light bg. */
.article-content table { width: 100%; border-collapse: collapse; margin: 24px 0 28px; font-size: .94rem }
.article-content th, .article-content td { padding: 11px 14px; border: 1px solid var(--bg-light3); text-align: left; line-height: 1.6; vertical-align: top }
.article-content th { font-weight: 500; color: var(--text-on-light); background: var(--bg-light2) }
.article-content td { color: var(--text2-on-light); font-weight: 300 }
.article-content td strong, .article-content th strong { color: var(--text-on-light); font-weight: 500 }
.article-content h2 {
    font-family: var(--serif); font-size: 1.6rem; color: var(--dark);
    letter-spacing: -.5px; margin: 48px 0 18px; font-weight: 400; line-height: 1.25;
    padding-left: 16px; border-left: 3px solid var(--accent);
}
.article-content h3 {
    font-family: var(--serif); font-size: 1.25rem; color: var(--dark);
    margin: 36px 0 14px; font-weight: 400; line-height: 1.3;
}
.article-content p { font-size: 1rem; color: var(--text2-on-light); line-height: 1.85; margin-bottom: 22px; font-weight: 300 }
.article-content p strong { font-weight: 500; color: var(--text-on-light) }
.article-content ul, .article-content ol { margin: 0 0 24px 24px; font-size: 1rem; color: var(--text2-on-light); line-height: 1.85; font-weight: 300 }
.article-content li { margin-bottom: 8px }
/* Blockquote — set color on the element itself (not just inner <p>) so bare-text blockquotes inherit a readable colour. Without this, <blockquote>foo</blockquote> falls through to var(--text2) which is white-on-dark and invisible on the light article background. */
.article-content blockquote {
    border-left: 3px solid var(--accent-deep); padding: 20px 28px; margin: 32px 0;
    background: var(--accent-dim); border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--text-on-light); font-size: 1.05rem; font-style: italic; font-weight: 400;
}
.article-content blockquote p { color: inherit; font-size: inherit; font-style: inherit; margin: 0 }
.article-content a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; transition: color .3s } /* deeper indigo passes AA on cream */
.article-content a:hover { color: #3730a3 }
.article-content code {
    font-family: var(--mono); font-size: .88em; background: var(--bg-light2);
    padding: 2px 8px; border-radius: 4px; color: var(--text-on-light);
}

.key-takeaway {
    background: var(--dark); border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius); padding: 32px; margin: 40px 0;
    box-shadow: var(--shadow-md);
}
/* Inside the dark .key-takeaway box, .article-content h2/h3 would cascade in: near-black colour (invisible on dark), an indigo border-left bar, padding-left, and large top-margin — none of which work in this context. Reset only the cascade-bleed properties; size/weight/family inherit from the article heading rules. */
.article-content .key-takeaway h2,
.article-content .key-takeaway h3,
.key-takeaway h2,
.key-takeaway h3 { color: #fff; padding-left: 0; border-left: 0; margin-top: 0 }
.key-takeaway ul, .key-takeaway ol { margin-left: 20px; margin-bottom: 0; color: var(--text2) }
.key-takeaway li { color: var(--text2) }
/* p and strong were unstyled here, so they inherited the light-context dark colours
   (.article-content p / .article-content p strong) and went invisible on the dark box.
   Equal specificity + later source order wins. strong stays white for emphasis. */
.key-takeaway p { color: var(--text2) }
.key-takeaway p strong, .key-takeaway strong, .key-takeaway li strong { color: #fff; font-weight: 500 }
.key-takeaway a { color: var(--accent) }
/* A table nested inside the dark box: the light-context .article-content td/th/strong
   colours would land dark-on-dark. Re-light them for the dark surface. */
.key-takeaway th, .key-takeaway td { color: var(--text2); border-color: rgba(255,255,255,.12) }
.key-takeaway th { color: #fff; background: rgba(255,255,255,.04) }
.key-takeaway td strong, .key-takeaway th strong { color: #fff }

.article-cta { background: var(--bg2); padding: 80px 0; text-align: center; color: #fff }
/* h2 and h3 both styled: a CTA nested inside .article-content (e.g. orphan articles)
   would otherwise inherit .article-content h3's dark colour and vanish on the dark bg. */
.article-cta h2, .article-cta h3 { font-family: var(--serif); font-size: 1.8rem; color: #fff; margin-bottom: 12px; font-weight: 400; letter-spacing: -.5px }
.article-cta p { font-size: 1rem; color: var(--text3); max-width: 480px; margin: 0 auto 32px; font-weight: 300; line-height: 1.8 }
/* Defend the CTA button text from .article-content a (indigo, underlined) when the
   CTA sits inside the light content wrapper — keeps white-on-indigo, no underline. */
.article-cta .btn-primary { color: #fff; text-decoration: none }
.btn-outline-light {
    display: inline-flex; align-items: center; gap: 8px;
    background: 0 0; color: rgba(255,255,255,.6);
    padding: 17px 38px; border: 1.5px solid rgba(255,255,255,.12);
    border-radius: 100px; font-family: var(--sans); font-size: .92rem; font-weight: 500;
    text-decoration: none; transition: all .4s;
}
.btn-outline-light:hover, .btn-outline-light:focus-visible {
    border-color: var(--accent); color: var(--accent); transform: translateY(-2px);
}
.cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap }

.quiz-inline-article {
    display: flex; align-items: center; gap: 16px;
    padding: 20px 24px; background: var(--accent-dim);
    border: 1px solid rgba(129,140,248,.12); border-radius: 14px; margin: 32px 0;
}
.quiz-inline-article p { font-size: .88rem; color: var(--text2-on-light); font-weight: 400; flex: 1; line-height: 1.6 }
.quiz-inline-article p strong { color: var(--accent2) }
.quiz-inline-article a {
    white-space: nowrap; background: var(--accent); color: #fff; border: 0;
    padding: 12px 24px; border-radius: 100px; font-family: var(--sans);
    font-size: .82rem; font-weight: 500; text-decoration: none;
    transition: all .3s; flex-shrink: 0;
}
.quiz-inline-article a:hover { background: var(--warm); color: var(--dark); transform: translateY(-1px) }

.related { padding: 80px 0 120px; background: var(--bg) }
.related h2 { font-family: var(--serif); font-size: 1.6rem; color: #fff; margin-bottom: 40px; font-weight: 400; text-align: center; letter-spacing: -.5px }
.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; margin: 0 auto }
.related-card {
    background: var(--card); border: none;
    border-radius: var(--radius); padding: 32px; text-decoration: none;
    box-shadow: var(--ring-accent); transition: all .5s cubic-bezier(.22,1,.36,1);
}
.related-card:hover { box-shadow: var(--glow-accent); transform: translateY(-4px) scale(1.01) }
.related-card .insight-label {
    font-family: var(--mono); font-size: .7rem; color: var(--accent);
    letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px;
    display: block; font-weight: 500;
}
.related-card h3 { font-family: var(--serif); font-size: 1.05rem; color: #fff; margin-bottom: 8px; font-weight: 400; line-height: 1.4 }
.related-card p { font-size: .85rem; color: var(--text3); line-height: 1.7 }

/* ── Responsive ──────────────────────────────── */
@media (max-width: 1024px) {
    .contact-layout { grid-template-columns: 1fr; gap: 48px }
    .contact { padding: 80px 0 100px }
}
@media (max-width: 960px) {
    .nav-links { display: none }
    .nav-links.open {
        display: flex; flex-direction: column; position: absolute;
        top: 100%; left: 0; width: 100%;
        background: rgba(12,12,14,.97); backdrop-filter: blur(20px);
        padding: 28px 32px; gap: 22px;
        border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .mobile-menu-btn { display: block }
}
@media (max-width: 768px) {
    .container { padding: 0 20px }
    .contact-layout { gap: 36px }
    .contact { padding: 60px 0 80px }
    .contact-layout { grid-template-columns: 1fr; gap: 48px }
    .form-grid { grid-template-columns: 1fr }
    .fg.full { grid-column: 1 }
    .form-wrap { padding: 28px 16px }
    .form-submit .btn-primary { width: 100%; justify-content: center }
    .stitle { word-wrap: break-word; overflow-wrap: break-word }
    .related-grid { grid-template-columns: 1fr }
    .footer-layout { flex-direction: column; gap: 40px }
    .footer-nav { gap: 40px; flex-wrap: wrap }
    .footer-bottom { flex-direction: column; gap: 16px; text-align: center }
}

/* ── Print ───────────────────────────────────── */
@media print {
    header, footer, .breadcrumb, .article-cta, .related { display: none !important }
    body { background: #fff; color: #000; font-size: 12pt }
    .page-hero, .article-hero { padding: 40px 0 20px; background: none }
    .page-content, .article-content { padding: 20px 0; background: #fff }
    main section::before, footer::before { display: none !important }
    a[href]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555 }
}

/* === SOLUTION FINDER QUIZ (sitewide) === */
/* Moved from homepage.css 2026-05-18 — the quiz is a primary CTA across the
   entire site (header nav 'Find Your Solution' button, floating mobile CTA,
   article-body inline CTAs), so its modal + supporting styles must load on
   every page, not just the homepage. */
/* === INLINE QUIZ CTA BANNERS === */
.quiz-banner{background:var(--bg2);border:1px solid var(--card-border);border-radius:20px;padding:48px 52px;display:flex;align-items:center;justify-content:space-between;gap:40px;margin:0 auto;max-width:var(--container)}.quiz-banner-text h3{font-family:var(--serif);font-size:1.3rem;color:#fff;font-weight:400;margin-bottom:4px;letter-spacing:-.3px}.quiz-banner-text h3 em{font-style:italic;color:var(--accent)}.quiz-banner-text p{font-size:.88rem;color:var(--text3);font-weight:300;line-height:1.7}.quiz-banner .btn-primary{white-space:nowrap;flex-shrink:0}
.quiz-banner-wrap{padding:0 32px}
.quiz-banner-full{background:var(--bg2);border-top:1px solid var(--card-border);border-bottom:1px solid var(--card-border);padding:56px 0;text-align:center}.quiz-banner-full h3{font-family:var(--serif);font-size:1.5rem;color:#fff;font-weight:400;margin-bottom:6px;letter-spacing:-.4px}.quiz-banner-full h3 em{font-style:italic;color:var(--accent)}.quiz-banner-full p{font-size:.92rem;color:var(--text3);font-weight:300;margin:0 auto 24px;max-width:560px;line-height:1.8}
.quiz-inline{display:flex;align-items:center;gap:16px;padding:20px 24px;background:var(--accent-dim);border:1px solid rgba(129,140,248,.12);border-radius:14px;margin:24px 0 0}.quiz-inline p{font-size:.88rem;color:var(--text2);font-weight:400;flex:1;line-height:1.6}.quiz-inline p strong{color:var(--accent)}.quiz-inline button{white-space:nowrap;background:var(--accent-deep);color:#fff;border:0;padding:12px 24px;border-radius:100px;font-family:var(--sans);font-size:.82rem;font-weight:500;cursor:pointer;transition:all .3s;flex-shrink:0}/* was --accent — failed AA */.quiz-inline button:hover{background:var(--warm);color:var(--dark);transform:translateY(-1px)}

/* Floating quiz button — hidden on desktop, shown on mobile to match chat trigger */
.quiz-float{display:none;position:fixed;bottom:28px;left:28px;z-index:998;background:var(--accent-deep);color:#fff;border:0;height:56px;padding:0 24px;border-radius:100px;font-family:var(--sans);font-size:.82rem;font-weight:500;cursor:pointer;box-shadow:0 8px 32px rgba(129,140,248,.2),0 2px 8px rgba(0,0,0,.2);transition:all .4s cubic-bezier(.22,1,.36,1);align-items:center;gap:10px;opacity:0;transform:translateY(20px);pointer-events:none}.quiz-float.visible{opacity:1;transform:translateY(0);pointer-events:all}.quiz-float:hover{background:var(--warm);color:var(--dark);transform:translateY(-3px);box-shadow:0 12px 40px rgba(245,166,35,.2)}.quiz-float:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.quiz-float-icon{width:20px;height:20px;background:rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .3s}.quiz-float:hover .quiz-float-icon{background:rgba(0,0,0,.2)}
.quiz-float-icon svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:2.5}

@media(max-width:768px){.quiz-banner{flex-direction:column;text-align:center;padding:36px 28px;gap:20px}.quiz-banner-wrap{padding:0 20px}.quiz-float{display:flex}}
@media(max-width:520px){.quiz-float{bottom:16px;left:16px}}

/* Quiz modal */
.quiz-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}.quiz-overlay.active{opacity:1;visibility:visible}
/* Modal is a flex column: header + progress + step count pinned at the top,
   nav pinned at the bottom, ONLY .quiz-body scrolls (see its overflow below) */
.quiz-modal{background:var(--card);border:1px solid var(--card-border);border-radius:20px;width:100%;max-width:640px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;position:relative;box-shadow:0 32px 80px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.2);transform:translateY(24px) scale(.97);transition:transform .4s cubic-bezier(.22,1,.36,1)}.quiz-overlay.active .quiz-modal{transform:translateY(0) scale(1)}
.quiz-modal>.quiz-header,.quiz-modal>.quiz-progress,.quiz-modal>.quiz-step-count,.quiz-modal>.quiz-nav{flex-shrink:0}
/* Dark scrollbar on the scrolling body — the OS-default light bar clashes with the dark card */
.quiz-body{overflow-y:auto;flex:1 1 auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.quiz-body::-webkit-scrollbar{width:12px}
.quiz-body::-webkit-scrollbar-track{background:transparent;margin:8px 0}
.quiz-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:100px;border:4px solid var(--card);background-clip:padding-box}
.quiz-body::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28);border:4px solid var(--card);background-clip:padding-box}
/* Scroll cue: while content continues below the fold (.qz-more, toggled by
   quiz-script), fade the bottom edge into the card and show a small chevron.
   Anchored to the TOP of the nav — the true bottom edge of the scroll area —
   so it can never drift with the scroll position (a sticky flex item inside
   the scroller detaches near the end of the content). The gradient bottoms
   out at solid card colour, which also gives the chevron real contrast. */
.quiz-nav{position:relative}
.quiz-nav::before{content:'';position:absolute;bottom:100%;left:0;right:0;height:64px;pointer-events:none;opacity:0;transition:opacity .35s;background:linear-gradient(to bottom,rgba(22,22,26,0),var(--card))}
.quiz-body.qz-more+.quiz-nav::before{opacity:1}
/* The chevron badge is a real element (created by quiz-script) so it reads
   over any content — a small dark disc floating just above the nav. */
.quiz-scroll-cue{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);width:28px;height:28px;border-radius:50%;background:var(--bg3);border:1px solid rgba(255,255,255,.14);box-shadow:0 2px 8px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .35s;pointer-events:none}
.quiz-scroll-cue svg{width:14px;height:14px;stroke:rgba(255,255,255,.8);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.quiz-body.qz-more+.quiz-nav .quiz-scroll-cue{opacity:1}
.quiz-close{position:absolute;top:20px;right:20px;background:var(--bg3);border:0;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text3);transition:all .3s;z-index:2;font-size:1.1rem;line-height:1}.quiz-close:hover,.quiz-close:focus-visible{background:rgba(255,255,255,.1);color:#fff}
.quiz-header{padding:40px 40px 0;text-align:center}
.quiz-header .stag{font-family:var(--mono);font-size:.72rem;color:var(--accent);letter-spacing:2.5px;text-transform:uppercase;margin-bottom:8px;display:block;font-weight:500}
.quiz-progress{height:3px;background:var(--bg3);border-radius:3px;margin:24px 40px 0;overflow:hidden}.quiz-progress-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .5s cubic-bezier(.22,1,.36,1);width:0;box-shadow:0 0 8px rgba(129,140,248,.3)}
.quiz-step-count{font-family:var(--mono);font-size:.72rem;color:var(--text3);text-align:center;margin-top:10px;padding:0 40px}
.quiz-body{padding:32px 40px 40px;min-height:340px;display:flex;flex-direction:column}
.quiz-question{font-family:var(--serif);font-size:1.4rem;color:#fff;margin-bottom:24px;line-height:1.3;font-weight:400;letter-spacing:-.3px}
.quiz-question em{font-style:italic;color:var(--accent)}
.quiz-subtitle{font-size:.9rem;color:var(--text3);margin:-16px 0 24px;font-weight:300;line-height:1.7}
.quiz-options{display:flex;flex-direction:column;gap:10px;flex:1}
.quiz-option{background:var(--bg3);border:1.5px solid transparent;border-radius:12px;padding:16px 20px;cursor:pointer;transition:all .3s;display:flex;align-items:center;gap:14px;text-align:left;font-family:var(--sans);font-size:.92rem;color:var(--text);font-weight:400;line-height:1.5;width:100%}
.quiz-option:hover{background:var(--accent-dim);border-color:var(--accent);transform:translateX(4px)}.quiz-option:focus-visible{border-color:var(--accent);box-shadow:var(--focus)}
.quiz-option-icon{width:32px;height:32px;border-radius:8px;background:var(--card);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.82rem;transition:all .3s}
.quiz-option:hover .quiz-option-icon{background:var(--accent);border-color:var(--accent);color:#fff}
.quiz-nav{display:flex;justify-content:space-between;align-items:center;padding:0 40px 32px;gap:16px}
.quiz-back{background:0 0;border:0;font-family:var(--sans);font-size:.85rem;color:var(--text3);cursor:pointer;padding:10px 0;transition:color .3s;display:flex;align-items:center;gap:6px}.quiz-back:hover{color:#fff}.quiz-back:disabled{opacity:0;pointer-events:none}
.quiz-skip{background:0 0;border:0;font-family:var(--mono);font-size:.72rem;color:var(--text3);cursor:pointer;padding:10px 0;letter-spacing:.5px;transition:color .3s}.quiz-skip:hover{color:var(--text)}

/* Results screen */
.quiz-results{padding:40px;text-align:center}
.quiz-results-icon{width:64px;height:64px;background:var(--accent-dim);border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.quiz-results-icon svg{width:28px;height:28px;stroke:var(--accent);fill:none;stroke-width:2}
.quiz-results h2{font-family:var(--serif);font-size:1.6rem;color:#fff;margin-bottom:8px;font-weight:400;letter-spacing:-.5px}
.quiz-results h2 em{font-style:italic;color:var(--accent)}
.quiz-results-intro{font-size:.92rem;color:var(--text3);margin-bottom:28px;font-weight:300;line-height:1.8}
.quiz-rec{background:var(--bg3);border-radius:14px;padding:24px;margin-bottom:16px;text-align:left}
.quiz-rec-label{font-family:var(--mono);font-size:.7rem;color:var(--accent);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;display:block;font-weight:500}
.quiz-rec h3{font-family:var(--serif);font-size:1.15rem;color:#fff;margin-bottom:6px;font-weight:400}
.quiz-rec p{font-size:.88rem;color:var(--text2);line-height:1.75;font-weight:300}
.quiz-services{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 28px;justify-content:center}
.quiz-svc-tag{font-family:var(--mono);font-size:.7rem;color:var(--accent);background:var(--accent-dim);padding:6px 14px;border-radius:100px;letter-spacing:.3px;font-weight:500}

/* Contact step inside modal */
.quiz-contact{text-align:left}
.quiz-contact label{display:block;font-size:.82rem;font-weight:500;color:var(--text);margin-bottom:6px}
.quiz-contact input,.quiz-contact textarea{width:100%;padding:14px 16px;border:1.5px solid rgba(255,255,255,.08);border-radius:10px;font-family:var(--sans);font-size:.92rem;background:var(--bg3);color:#fff;transition:border-color .3s;outline:0;font-weight:400;margin-bottom:16px}
.quiz-contact input:focus,.quiz-contact textarea:focus{border-color:var(--accent)}
.quiz-contact textarea{resize:vertical;min-height:90px}
.quiz-contact .qc-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.quiz-submit{width:100%;background:var(--accent);color:#fff;border:0;border-radius:100px;padding:17px;font-family:var(--sans);font-size:.92rem;font-weight:500;cursor:pointer;transition:all .4s;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:8px}.quiz-submit:hover,.quiz-submit:focus-visible{background:var(--warm);color:var(--dark);transform:translateY(-2px);box-shadow:var(--glow-warm)}
.quiz-success{text-align:center;padding:60px 40px}
.quiz-success h2{font-family:var(--serif);font-size:1.6rem;color:#fff;margin-bottom:12px;font-weight:400}
.quiz-success p{font-size:.95rem;color:var(--text3);font-weight:300;line-height:1.8;margin-bottom:32px}

@media(max-width:768px){.quiz-modal{max-height:100%;border-radius:16px}.quiz-header{padding:32px 24px 0}.quiz-progress{margin:20px 24px 0}.quiz-step-count{padding:0 24px}.quiz-body{padding:24px 24px 28px;min-height:280px}.quiz-question{font-size:1.2rem}.quiz-nav{padding:0 24px 24px}.quiz-results{padding:28px 24px}.quiz-contact .qc-row{grid-template-columns:1fr}.quiz-success{padding:40px 24px}}
/* Mobile: 100vh overstates iOS Safari's visible viewport (toolbars overlap it),
   which pushed the centered modal's pinned header + close button off-screen with
   no way to scroll to them. max-height:100% sizes against the overlay's padded
   box, which always matches what's actually visible. Short/landscape screens:
   let the body shrink instead of forcing the modal past its container. */
@media(max-height:520px){.quiz-body{min-height:0}}

/* Free-review note (contact sections, sitewide) */
.cx3-reviewnote{margin-top:18px;border:1px solid rgba(129,140,248,.25);background:rgba(129,140,248,.06);border-radius:16px;padding:24px 26px}
.cx3-reviewnote p{margin:0;font-size:.95rem;font-weight:300;color:var(--text2);line-height:1.7}
.cx3-reviewnote p strong{font-weight:500;color:var(--text)}