/* =====================================================
   Repflection v2 redesign
   Single sans-serif, midnight headlines, steel-blue accent,
   bento-grid sections.
   ===================================================== */

/* Self-hosted Inter (variable). Drops Google Fonts dependency. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/InterVariable.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/InterVariable-Italic.woff2') format('woff2');
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-muted);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* prevent any single overflowing element from causing horizontal scroll on small screens */
}
html { overflow-x: hidden; }
h1, h2, h3, h4, p { overflow-wrap: break-word; word-wrap: break-word; }

:root {
    /* Repflection brand: midnight navy + steel-blue accent (the mirror) +
       a whisper of champagne for the frame motif. */
    --steel: #4a90b8;
    --steel-light: #5da8d4;
    --steel-dark: #3a7595;
    --steel-text: #2d6580; /* AA-compliant darker steel for body text & small links */
    --midnight: #0a1628;
    --midnight-deep: #050d18;
    --navy: #0f2140;
    --champagne: #C9A96E;
    --champagne-soft: rgba(201, 169, 110, 0.18);
    --bg-grey: #E8ECF2;
    --bg-grey-soft: #F2F4F8;
    --white: #F8FAFC;
    --true-white: #FFFFFF;
    --text-dark: #0a1628;
    --text-muted: #3a4456;     /* darkened from #4a5568 - AA pass (4.62:1) on --white #F8FAFC */
    --text-subtle: #5b6b82;    /* darkened from #8a9bb5 - AA pass (4.55:1) on --white #F8FAFC */
    --border: #E2E8EE;
    --border-soft: #EEF1F4;
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --shadow-sm: 0 2px 8px rgba(14, 31, 74, 0.04);
    --shadow: 0 8px 32px rgba(14, 31, 74, 0.08);
    --shadow-lg: 0 24px 64px rgba(14, 31, 74, 0.12);
    --container-max: 1200px;
    --nav-height: 72px;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--steel-text); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    margin: 0 0 0.5em;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 700;
}
h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
h2 { font-size: clamp(1.875rem, 3.5vw, 2.75rem); }
h3 { font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-weight: 600; }
p { margin: 0 0 1em; }

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

.skip-link {
    position: absolute; top: 8px; left: 8px;
    background: var(--steel); color: #fff;
    padding: 10px 18px; border-radius: 6px;
    z-index: 1000; text-decoration: none;
    font-weight: 600;
    transform: translateY(-200%);
    transition: transform 0.15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ---------- Preloader ----------
   Hidden by default; only the homepage opts in via `<body class="is-home">`.
   This avoids the brief preloader flash on every interior page click. */
.preloader {
    position: fixed; inset: 0;
    background: var(--white);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
body.is-home .preloader {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
body.is-home .preloader.loaded { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-inner { text-align: center; }
.preloader-logo {
    width: auto; height: 56px;
    margin: 0 auto;
    animation: mirror-pulse 1.6s ease-in-out infinite;
    transform-origin: center;
}
@keyframes mirror-pulse {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.04); }
}

/* ---------- Back to top ---------- */
.back-to-top {
    position: fixed; bottom: 24px; right: 24px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--midnight); color: #fff;
    border: none; padding: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.2s;
    z-index: 100;
    box-shadow: var(--shadow);
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--steel); }
.back-to-top:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.back-to-top svg { width: 20px; height: 20px; }

/* ---------- Navbar ---------- */
.navbar {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--nav-height);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid transparent;
    z-index: 500;
    transition: border-color 0.2s, background 0.2s;
}
.navbar.scrolled {
    border-bottom-color: var(--border-soft);
    background: rgba(255, 255, 255, 0.95);
}
.nav-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px;
}
/* Desktop: switch to a 3-column grid so the middle nav-links are TRULY
   centred to the container rather than floating in the space-between
   leftover. Mobile falls back to flex above. */
@media (min-width: 861px) {
    .nav-container {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        justify-content: initial;
    }
    .nav-container > .nav-links { justify-self: center; }
    .nav-container > .nav-right { justify-self: end; }
}
.nav-logo {
    color: var(--text-dark);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
/* New branded wordmark logo (replaces old logo-mark SVG + logo-text spans) */
.logo-img {
    display: block;
    height: 44px;
    width: auto;
    max-width: 100%;
}
@media (max-width: 768px) {
    .logo-img { height: 36px; }
}
/* Footer variant uses the white-type version (same image element, different file) */
.footer-brand .logo-img { height: 48px; }
.nav-links {
    list-style: none; padding: 0; margin: 0;
    display: flex; align-items: center; gap: 4px;
}
.nav-links a {
    display: inline-block;
    padding: 8px 14px;
    color: var(--text-dark);
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}
.nav-links a:hover { background: var(--bg-grey); }
.nav-links a.active { color: var(--steel-text); }
.nav-right {
    display: flex; align-items: center; gap: 12px;
}
.nav-phone {
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
}
.nav-phone:hover { color: var(--steel); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
    cursor: pointer;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
    background: var(--steel); color: #fff;
    box-shadow: 0 1px 2px rgba(74, 144, 184, 0.4);
}
.btn-primary:hover { background: var(--steel-dark); box-shadow: 0 6px 16px rgba(74, 144, 184, 0.35); }
.btn-navy {
    background: var(--midnight); color: #fff;
}
.btn-navy:hover { background: var(--midnight-deep); }
.btn-outline {
    background: transparent; color: var(--text-dark);
    border-color: var(--border);
}
.btn-outline:hover { border-color: var(--text-dark); background: var(--white); }
.btn-ghost {
    background: transparent; color: var(--text-dark);
    border-color: transparent;
}
.btn-ghost:hover { color: var(--steel-text); }
.btn-large { padding: 16px 28px; font-size: 1rem; }
.btn-block { width: 100%; }
.nav-cta { padding: 10px 18px; font-size: 0.875rem; }

/* ---------- Hamburger ---------- */
.hamburger {
    display: none;
    background: transparent; border: none;
    width: 44px; height: 44px;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 5px;
    padding: 11px 11px;
    cursor: pointer;
}
.hamburger:focus-visible {
    outline: 2px solid var(--steel);
    outline-offset: 2px;
    border-radius: 6px;
}
.hamburger span {
    display: block; width: 22px; height: 2px;
    background: var(--text-dark);
    transition: transform 0.2s, opacity 0.2s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Reveal animations ---------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-reveal].revealed { opacity: 1; transform: none; }

/* ---------- Eyebrow pill ---------- */
.eyebrow {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--champagne-soft);
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dark);
    background: var(--white);
    margin-bottom: 20px;
    max-width: 100%;
    white-space: normal;  /* allow wrap on small screens instead of overflowing */
    line-height: 1.4;
}
.eyebrow-blue {
    color: var(--steel-text);
    border-color: rgba(74, 144, 184, 0.25);
}
.eyebrow-champagne {
    color: var(--champagne);
    border-color: var(--champagne-soft);
    background: rgba(201, 169, 110, 0.04);
}

/* Headline emphasis: keep <em> for consistency with existing markup */
h1 em, h2 em { font-style: normal; color: var(--steel); }
.heading-blue, .heading-blue h1, .heading-blue h2 { color: var(--text-dark); }

main { padding-top: var(--nav-height); }

/* ---------- Sections ---------- */
.section { padding: 96px 0; }
.section-light { background: var(--white); }
.section-grey { background: var(--bg-grey); }
.section-navy { background: var(--midnight); color: rgba(255,255,255,0.82); }
.section-navy h1, .section-navy h2, .section-navy h3 { color: #fff; }
.section-navy .eyebrow { color: #fff; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); }
.section-navy h2 em { color: var(--steel-light); }

.section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}
.section-header h2 { color: var(--text-dark); }
.section-header .section-subtitle {
    color: var(--text-muted);
    font-size: 1.0625rem;
}

.link-arrow {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--steel-text); font-weight: 600;
    transition: gap 0.2s;
}
.link-arrow:hover { gap: 10px; }
.link-arrow:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; border-radius: 3px; gap: 10px; }

/* ====================================================
   INTERIOR PAGE HERO (about, services hub, contact, etc.)
   Smaller than the homepage hero, no big mockup.
   ==================================================== */
.page-hero {
    padding: 64px 0 56px;
    background: linear-gradient(180deg, var(--white) 0%, var(--bg-grey-soft) 100%);
    text-align: center;
}
.page-hero .breadcrumb {
    display: flex; justify-content: center; gap: 8px;
    margin-bottom: 16px;
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.page-hero .breadcrumb a { color: var(--text-muted); }
.page-hero .breadcrumb a:hover { color: var(--steel-text); }
.page-hero .breadcrumb-sep { color: var(--text-subtle); }
.page-hero .eyebrow { margin-bottom: 16px; }
.page-hero h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--text-dark);
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.page-hero-subtitle {
    font-size: 1.0625rem;
    color: var(--text-muted);
    max-width: 640px;
    margin: 0 auto;
}
.page-hero-buttons,
.page-hero-ctas,
.hero-ctas {
    display: flex; gap: 12px; justify-content: center;
    flex-wrap: wrap;
    margin-top: 28px;
}

/* ====================================================
   TWO-COLUMN INTRO (mission/about content)
   ==================================================== */
.two-col-intro { padding: 72px 0; background: var(--white); }
.two-col-intro-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.two-col-intro-content h2 { color: var(--text-dark); margin-bottom: 20px; }
.two-col-intro-content p { font-size: 1rem; line-height: 1.7; }
.two-col-intro-content p strong { color: var(--text-dark); }
.two-col-intro-visual {
    background: var(--bg-grey);
    border-radius: var(--radius-lg);
    aspect-ratio: 4 / 5;
    display: flex; align-items: center; justify-content: center;
    color: var(--steel);
    padding: 40px;
}
.two-col-intro-visual svg { width: 100%; height: auto; max-width: 280px; }
.two-col-intro-visual img { width: 100%; height: 100%; object-fit: contain; display: block; }
.two-col-intro-visual:has(img) {
    padding: 0;
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(10, 22, 40, 0.06), 0 2px 4px rgba(10, 22, 40, 0.04);
    border: 1px solid rgba(45, 101, 128, 0.08);
}
/* When the intro has no illustration column, collapse the grid to a
   single centred text column so the layout doesn't leave a dead half. */
.two-col-intro-grid:not(:has(.two-col-intro-visual)) {
    grid-template-columns: 1fr;
    max-width: 780px;
    margin: 0 auto;
}

/* ====================================================
   NUMBERED CARDS (values, who-we-serve)
   ==================================================== */
.numbered-cards { padding: 72px 0; background: var(--bg-grey); }
.numbered-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
/* Adaptive column count - exactly 3 cards -> 3-col grid (avoids the
   "card left-aligned with empty 4th slot" problem on pages like
   free-reputation-audit, London-RM, UK-RM, USA-RM).
   6 cards -> 3 cols x 2 rows (avoids the 4+2 awkward second row on
   content-removal and search-engine-RM).
   Scoped to > 600px so mobile still collapses to 1 col (the :has()
   selector has higher specificity than the mobile media-query rule). */
@media (min-width: 601px) {
    .numbered-cards-grid:has(.numbered-card:nth-child(3):last-child) {
        grid-template-columns: repeat(3, 1fr);
    }
    .numbered-cards-grid:has(.numbered-card:nth-child(6):last-child) {
        grid-template-columns: repeat(3, 1fr);
    }
}
.numbered-card {
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 32px 28px;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.numbered-card:hover { border-color: var(--steel); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.numbered-card-num {
    display: inline-flex;
    width: 36px; height: 36px;
    border-radius: 8px;
    background: rgba(74, 144, 184, 0.1);
    color: var(--steel-text);
    font-size: 0.875rem; font-weight: 700;
    align-items: center; justify-content: center;
    margin-bottom: 18px;
}
.numbered-card h3 { color: var(--text-dark); font-size: 1.125rem; margin-bottom: 10px; }
.numbered-card p { font-size: 0.9375rem; line-height: 1.6; margin: 0; }

/* ====================================================
   NUMBERED STEPS (vertical list with big numbers)
   ==================================================== */
.steps-section { padding: 72px 0; background: var(--white); }
.steps-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 64px;
    align-items: start;
}
/* When the steps section has no illustration, collapse to a single column
   so the numbered list expands to fill the row instead of leaving a hole. */
.steps-grid:not(:has(.steps-visual)) {
    grid-template-columns: 1fr;
    max-width: 780px;
    margin: 0 auto;
}
.steps-list { display: flex; flex-direction: column; gap: 28px; }
.step-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 20px;
    align-items: start;
}
.step-num {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--midnight);
    color: #fff;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.step-item h3 { color: var(--text-dark); font-size: 1.125rem; margin: 4px 0 6px; }
.step-item p { font-size: 0.9375rem; line-height: 1.6; margin: 0; }
.steps-visual {
    background: var(--bg-grey);
    border-radius: var(--radius-lg);
    aspect-ratio: 4 / 5;
    display: flex; align-items: center; justify-content: center;
    color: var(--steel);
    padding: 40px;
    position: sticky; top: calc(var(--nav-height) + 24px);
}
.steps-visual svg { width: 100%; max-width: 280px; }
.steps-visual img { width: 100%; height: 100%; object-fit: contain; display: block; }
.steps-visual:has(img) { padding: 0; background: transparent; }

/* ====================================================
   TEAM / STATS PANEL
   ==================================================== */
.team-section {
    padding: 96px 0;
    background: var(--midnight);
    color: rgba(255,255,255,0.78);
}
.team-section .section-header { margin-bottom: 48px; }
.team-section .section-header h2 { color: #fff; }
.team-section .section-header h2 em { color: var(--steel-light); }
.team-section .eyebrow { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); color: #fff; }
.team-description {
    color: rgba(255,255,255,0.7);
    max-width: 700px;
    margin: 0 auto;
    font-size: 1rem;
    text-align: center;
}
.team-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 48px;
    text-align: center;
}
.team-stat { display: flex; flex-direction: column; gap: 4px; }
.team-stat .stat-number {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1;
    color: #fff;
    letter-spacing: -0.03em;
    display: inline;
}
.team-stat .stat-suffix {
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--steel-light);
}
.team-stat .stat-label {
    color: rgba(255,255,255,0.6);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 8px;
}

/* Operational credentials (replaces unverifiable numerical stats) */
.team-credentials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 48px;
}
.team-credential {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: rgba(255,255,255,0.78);
}
.team-credential svg {
    width: 28px; height: 28px;
    color: var(--steel-light);
    margin-bottom: 4px;
}
.team-credential strong {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}
.team-credential span {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.5;
}
@media (max-width: 860px) {
    .team-credentials { grid-template-columns: 1fr; }
}

/* ====================================================
   CONTACT PAGE
   ==================================================== */
.contact-section { padding: 96px 0; background: var(--white); }
.contact-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: start;
}
.contact-form-wrapper {
    background: var(--bg-grey);
    border-radius: var(--radius-lg);
    padding: 40px;
}
.contact-form-wrapper h2 { color: var(--text-dark); margin-bottom: 12px; }
.contact-form-intro { color: var(--text-muted); margin-bottom: 28px; }
.contact-form { display: flex; flex-direction: column; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; position: relative; }
.form-group label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-dark);
}
.form-group input, .form-group select, .form-group textarea {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--text-dark);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--steel);
    box-shadow: 0 0 0 3px rgba(74, 144, 184, 0.12);
}
.form-group.error input, .form-group.error select, .form-group.error textarea { border-color: #DC2626; }
.form-error-msg { color: #DC2626; font-size: 0.75rem; }
.form-disclaimer { color: var(--text-subtle); font-size: 0.75rem; margin: 0; line-height: 1.5; }
.form-success-message { text-align: center; padding: 24px 0; }
.form-success-message h3 { margin-bottom: 8px; }
.form-success-message p { color: var(--text-muted); }

.contact-info { display: flex; flex-direction: column; gap: 16px; }
.contact-info-card {
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 28px;
}
.contact-info-card h3 { font-size: 1rem; color: var(--text-dark); margin-bottom: 16px; }
.contact-info-card.highlight {
    background: var(--midnight);
    color: rgba(255,255,255,0.78);
    border-color: var(--midnight);
}
.contact-info-card.highlight h3 { color: #fff; }
.contact-info-card.highlight p { color: rgba(255,255,255,0.7); }

.contact-detail {
    display: flex; gap: 14px; align-items: center;
    padding: 12px 0;
    border-top: 1px solid var(--border-soft);
}
.contact-detail:first-of-type { border-top: none; padding-top: 0; }
.contact-detail-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: rgba(74, 144, 184, 0.1);
    color: var(--steel);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.contact-detail-icon svg { width: 18px; height: 18px; }
.contact-detail strong { display: block; color: var(--text-dark); font-size: 0.8125rem; margin-bottom: 2px; }
.contact-detail a, .contact-detail span { color: var(--text-muted); font-size: 0.875rem; }
.contact-detail a:hover { color: var(--steel-text); }

.expect-steps { display: flex; flex-direction: column; gap: 14px; }
.expect-step { display: flex; gap: 12px; align-items: flex-start; }
.expect-number {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--steel);
    color: #fff;
    font-size: 0.8125rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.expect-step strong { display: block; color: var(--text-dark); font-size: 0.875rem; margin-bottom: 2px; }
.expect-step p { font-size: 0.8125rem; color: var(--text-muted); margin: 0; line-height: 1.5; }

/* ====================================================
   SERVICE / INDUSTRY HUB GRID (cards with icons)
   ==================================================== */
.service-hub { padding: 72px 0; background: var(--white); }
.service-hub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
/* When a grid has exactly 4 children, lay out 2x2 instead of 3+1 (modern browsers).
   Falls back to a modifier class on older engines. */
.service-hub-grid:has(> :nth-child(4):last-child),
.service-hub-grid--2x2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}
/* When a grid has exactly 8 children, lay out 4x2 instead of 3+3+2. */
.service-hub-grid:has(> :nth-child(8):last-child),
.service-hub-grid--4x2 {
    grid-template-columns: repeat(4, 1fr);
}
/* When a grid has exactly 5 children, lay out as 3+2 centred (drop the orphan dangle). */
.service-hub-grid:has(> :nth-child(5):last-child),
.service-hub-grid--3-2 {
    grid-template-columns: repeat(6, 1fr);
}
.service-hub-grid:has(> :nth-child(5):last-child) > .service-hub-card,
.service-hub-grid--3-2 > .service-hub-card {
    grid-column: span 2;
}
.service-hub-grid:has(> :nth-child(5):last-child) > .service-hub-card:nth-child(4),
.service-hub-grid:has(> :nth-child(5):last-child) > .service-hub-card:nth-child(5),
.service-hub-grid--3-2 > .service-hub-card:nth-child(4),
.service-hub-grid--3-2 > .service-hub-card:nth-child(5) {
    grid-column: span 3;
}
@media (max-width: 980px) {
    .service-hub-grid:has(> :nth-child(8):last-child),
    .service-hub-grid--4x2 {
        grid-template-columns: repeat(2, 1fr);
    }
}
.service-hub-card {
    background: var(--bg-grey);
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 32px;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s, background 0.2s;
    color: var(--text-dark);
    text-decoration: none;
    display: flex; flex-direction: column;
    gap: 12px;
}
.service-hub-card:hover {
    border-color: var(--steel);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    background: var(--white);
}
.service-hub-card-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: rgba(74, 144, 184, 0.1);
    color: var(--steel);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 8px;
}
.service-hub-card-icon svg { width: 22px; height: 22px; }
.service-hub-card h3 { font-size: 1.125rem; color: var(--text-dark); margin: 0; }
.service-hub-card p { font-size: 0.9375rem; color: var(--text-muted); margin: 0; flex: 1; }
.service-hub-card .link-arrow { font-size: 0.875rem; margin-top: 8px; }

/* ====================================================
   ARTICLE / PROSE LAYOUT
   ==================================================== */
.article-section { padding: 72px 0; background: var(--white); }
/* When an article-section directly follows a page-hero, drop the top padding
   so the hero and the article body read as a single intro flow rather than
   two disconnected sections. */
.page-hero + .article-section { padding-top: 32px; }
.article-content {
    max-width: 1080px;
    margin: 0 auto;
    color: var(--text-muted);
    font-size: 1.0625rem;
    line-height: 1.7;
}
/* Never let the article-content hide via the global data-reveal pattern.
   It's a tall content block, not a hero element - the IntersectionObserver
   can't satisfy the visibility threshold from a top-of-page load. */
.article-content[data-reveal] {
    opacity: 1 !important;
    transform: none !important;
}
.article-content > * { margin: 0 0 1em; }
/* Zero the first child's top margin so the article doesn't open with a big
   empty band above the first heading (h2 has 2em margin-top by default). */
.article-content > *:first-child { margin-top: 0; }
.article-content h2 {
    font-size: 1.625rem;
    color: var(--text-dark);
    margin: 2em 0 0.5em;
    line-height: 1.3;
}
.article-content h3 {
    font-size: 1.25rem;
    color: var(--text-dark);
    margin: 1.6em 0 0.4em;
}
.article-content p { margin: 0 0 1em; }
.article-content strong { color: var(--text-dark); font-weight: 600; }
.article-content ul, .article-content ol { padding-left: 1.5em; margin: 0 0 1em; }
.article-content ul li, .article-content ol li { margin-bottom: 0.5em; }
.article-content a { color: var(--steel-text); text-decoration: underline; text-decoration-color: rgba(74, 144, 184, 0.3); }
.article-content a:hover { text-decoration-color: var(--steel); }
.article-content blockquote {
    border-left: 3px solid var(--steel);
    padding: 4px 0 4px 20px;
    margin: 1.5em 0;
    color: var(--text-dark);
    font-style: italic;
}
.article-content code {
    background: var(--bg-grey);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.875em;
}

/* ====================================================
   PAGE-LEVEL RESPONSIVE
   ==================================================== */
@media (max-width: 980px) {
    .two-col-intro-grid { grid-template-columns: 1fr; gap: 40px; }
    .two-col-intro-visual { aspect-ratio: 16 / 10; max-width: 480px; margin: 0 auto; }
    .numbered-cards-grid { grid-template-columns: repeat(2, 1fr); }
    .steps-grid { grid-template-columns: 1fr; gap: 40px; }
    .steps-visual { position: static; aspect-ratio: 16 / 10; max-width: 480px; margin: 0 auto; }
    .team-stats { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 600px) {
    .numbered-cards-grid { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
    .contact-grid { grid-template-columns: 1fr; gap: 32px; }
    .form-row { grid-template-columns: 1fr; }
    .service-hub-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .service-hub-grid { grid-template-columns: 1fr; }
    .contact-form-wrapper { padding: 28px; }
    /* Hero and hero-like sections - tighter sizing on phones */
    .hero h1 { font-size: clamp(1.875rem, 8vw, 2.5rem); }
    .page-hero h1 { font-size: clamp(1.625rem, 7vw, 2.25rem); }
    .hero-subtitle, .page-hero-subtitle { font-size: 1rem; }
    .hero-buttons, .page-hero-buttons { flex-direction: column; align-items: stretch; }
    .hero-buttons .btn, .page-hero-buttons .btn { width: 100%; }
    .container, .nav-container, .hero-container { padding-left: 16px; padding-right: 16px; }
    .eyebrow { font-size: 0.625rem; padding: 5px 12px; }
    /* Trust row stacks */
    .trust-row { flex-direction: column; gap: 8px; align-items: flex-start; padding-left: 16px; padding-right: 16px; }
    /* Pricing stack with featured plan flat */
    .pricing-card.featured { transform: none; }
    /* Tighten section padding */
    .section, .footprint, .bento, .pricing, .faq, .two-col-intro, .numbered-cards, .steps-section, .team-section, .service-hub, .contact-section, .article-section { padding: 56px 0; }
    .pricing { padding: 56px 0 72px; }
    /* Footer stacks neatly */
    .footer-grid { gap: 28px; }
    .footer-bottom { flex-direction: column; }
    .footer-legal { justify-content: center; flex-wrap: wrap; }
    /* Bento card padding */
    .bento-card { padding: 24px; }
    .bento-card-large { padding: 28px; }
    .bento-card-large .bento-card-title { font-size: 1.5rem; }
    /* Featured quote stacks */
    .featured-quote-grid { padding: 24px; gap: 20px; }
    .featured-quote-text blockquote { font-size: 1.125rem; }
    /* Dashboard hero visual: hide internals on tiny screens to avoid overflow */
    .dashboard-stats { grid-template-columns: 1fr 1fr; }
    .dashboard-stats > :nth-child(3) { grid-column: span 2; }
    .dashboard-result-domain { display: none; }
    /* Hero pills already stack via .hero-pills column rule */
    /* Trust strip dots wrap */
    .trust-strip-items { gap: 10px 16px; }
    .trust-strip-items span:not(:last-child)::after { display: none; }
    /* Article content narrower padding */
    .article-content { font-size: 0.9375rem; }
    /* CTA panel padding */
    .cta-panel { padding: 48px 24px; }
    .cta-panel h2 { font-size: 1.5rem; }
    /* Numbered cards */
    .numbered-card { padding: 24px; }
    /* Sticky CTA tighter */
    .sticky-cta { padding: 10px 12px; gap: 8px; }
    .sticky-cta-text strong { font-size: 0.8125rem; }
    .sticky-cta-text small { font-size: 0.6875rem; }
    .sticky-cta .btn { padding: 12px 18px; font-size: 0.875rem; min-height: 44px; }
    /* Hero visual - tighten translation to prevent horizontal overflow */
    .hero-visual { padding: 0 16px; transform: translateY(20px); }
    .dashboard-mockup { border-radius: var(--radius); }
    .dashboard-bar { padding: 10px 14px; }
    .dashboard-main { padding: 16px; }
}

/* ====================================================
   HERO
   ==================================================== */
.hero {
    padding: 80px 0 64px;
    background: linear-gradient(180deg, var(--white) 0%, var(--bg-grey-soft) 100%);
    text-align: center;
}
.hero-container {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 24px;
}
.hero h1 {
    color: var(--text-dark);
    margin-bottom: 24px;
    font-size: clamp(2.5rem, 5.5vw, 4rem);
}
.hero-subtitle {
    font-size: 1.125rem;
    color: var(--text-muted);
    max-width: 640px;
    margin: 0 auto 32px;
}
.hero-buttons {
    display: flex; gap: 12px; justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 56px;
}

/* Feature pills row under the hero */
.hero-pills {
    display: flex; gap: 32px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 56px;
}
.hero-pill {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--text-dark);
}
.hero-pill-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(74, 144, 184, 0.08);
    color: var(--steel);
    display: flex; align-items: center; justify-content: center;
}
.hero-pill-icon svg { width: 18px; height: 18px; }
.hero-pill-label { font-weight: 600; font-size: 0.9375rem; }
.hero-pill-sub { font-size: 0.8125rem; color: var(--text-muted); margin-left: 4px; }

/* Hero visual - stylized SERP / dashboard mockup */
.hero-visual {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 24px;
    transform: translateY(40px);
}

/* ====================================================
   KLARO CONSENT BANNER - brand overrides
   Klaro's default palette uses greys/teals - this
   block re-skins it to Repflection navy + steel.
   ==================================================== */
.klaro .cookie-notice {
    background: var(--midnight, #0A1628) !important;
    color: rgba(255,255,255,0.92) !important;
    border-radius: 12px !important;
    box-shadow: 0 24px 60px rgba(10, 22, 40, 0.35), 0 4px 12px rgba(10, 22, 40, 0.15) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    max-width: 420px;
    font-family: inherit !important;
}
@media (max-width: 600px) {
    .klaro .cookie-notice:not(.cookie-modal-notice) {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        top: auto !important;
        max-width: none !important;
        width: auto !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }
    .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
        margin-right: 0 !important;
    }
    .klaro .cookie-notice .cn-buttons {
        display: flex; flex-wrap: wrap; gap: 8px;
    }
    .klaro .cookie-notice .cn-buttons .cm-btn { flex: 1 1 auto; }
}
.klaro .cookie-notice .cn-body p,
.klaro .cookie-notice .cn-body strong {
    color: rgba(255,255,255,0.85) !important;
}
.klaro .cookie-notice a,
.klaro .cookie-notice .cm-link,
.klaro .cookie-notice .cn-learn-more {
    color: var(--steel-light, #7BB5D4) !important;
    text-decoration: underline !important;
    background: transparent !important;
}
.klaro .cookie-notice a:hover,
.klaro .cookie-notice .cm-link:hover,
.klaro .cookie-notice .cn-learn-more:hover {
    color: #fff !important;
}
.klaro .cookie-modal a,
.klaro .cookie-modal .cm-link {
    color: var(--steel-text, #2D6580) !important;
    text-decoration: underline !important;
}
.klaro .cookie-modal a:hover,
.klaro .cookie-modal .cm-link:hover {
    color: var(--steel, #4A90B8) !important;
}
.klaro .cm-btn {
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 9px 18px !important;
    border: 1px solid transparent !important;
    transition: background 0.15s, border-color 0.15s !important;
    cursor: pointer;
    font-family: inherit !important;
}
.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-success-var {
    background: var(--steel, #4A90B8) !important;
    color: #fff !important;
    border-color: var(--steel, #4A90B8) !important;
}
.klaro .cm-btn.cm-btn-success:hover,
.klaro .cm-btn.cm-btn-success-var:hover {
    background: var(--steel-text, #2D6580) !important;
    border-color: var(--steel-text, #2D6580) !important;
}
.klaro .cm-btn.cm-btn-decline,
.klaro .cm-btn.cm-btn-info {
    background: transparent !important;
    color: rgba(255,255,255,0.85) !important;
    border-color: rgba(255,255,255,0.25) !important;
}
.klaro .cm-btn.cm-btn-decline:hover,
.klaro .cm-btn.cm-btn-info:hover {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.45) !important;
    color: #fff !important;
}
/* Settings modal */
.klaro .cookie-modal .cm-bg {
    background: rgba(10, 22, 40, 0.7) !important;
}
.klaro .cookie-modal .cm-modal {
    background: var(--white, #fff) !important;
    color: var(--text-dark, #0A1628) !important;
    border-radius: 16px !important;
    box-shadow: 0 32px 80px rgba(10, 22, 40, 0.35) !important;
    font-family: inherit !important;
}
.klaro .cookie-modal .cm-header h1,
.klaro .cookie-modal .cm-header h2,
.klaro .cookie-modal .cm-modal h2 {
    color: var(--text-dark, #0A1628) !important;
}
.klaro .cookie-modal .cm-modal p,
.klaro .cookie-modal .cm-list-description {
    color: var(--text-muted, #4A5568) !important;
}
.klaro .cookie-modal .cm-list-title {
    color: var(--text-dark, #0A1628) !important;
    font-weight: 600 !important;
}
.klaro .cm-list-input:checked + .cm-list-label .slider {
    background: var(--steel, #4A90B8) !important;
}
.klaro .cookie-notice .cm-powered-by,
.klaro .cookie-notice .cm-powered-by a {
    color: rgba(255,255,255,0.4) !important;
    font-size: 0.6875rem !important;
}
.klaro .cookie-modal .cm-powered-by,
.klaro .cookie-modal .cm-powered-by a {
    color: var(--text-subtle, #9CA3AF) !important;
}

.dashboard-mockup {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 32px 80px rgba(14, 31, 74, 0.18), 0 4px 12px rgba(14, 31, 74, 0.06);
    overflow: hidden;
    border: 1px solid var(--border-soft);
}
.dashboard-bar {
    background: var(--midnight);
    padding: 12px 20px;
    display: flex; align-items: center; gap: 12px;
}
.dashboard-dots { display: flex; gap: 6px; }
.dashboard-dots span {
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255,255,255,0.2);
}
.dashboard-title {
    color: rgba(255,255,255,0.7);
    font-size: 0.75rem; font-weight: 500;
    margin-left: 8px;
}
.dashboard-body {
    display: grid;
    grid-template-columns: 200px 1fr;
    min-height: 320px;
}
.dashboard-side {
    background: var(--bg-grey-soft);
    padding: 20px 16px;
    border-right: 1px solid var(--border-soft);
}
.dashboard-nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.8125rem; color: var(--text-muted);
    margin-bottom: 4px;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
}
.dashboard-nav-item:hover { background: rgba(74, 144, 184, 0.05); color: var(--text-dark); }
.dashboard-nav-item:focus-visible { outline: 2px solid var(--steel); outline-offset: 1px; }
.dashboard-nav-item.active { background: rgba(74, 144, 184, 0.08); color: var(--steel-text); font-weight: 600; }
.dashboard-nav-item .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.dashboard-main {
    padding: 24px;
    min-height: 280px;
    /* Stack all panels in the same grid cell so the container sizes to the
       TALLEST panel. Inactive panels stay in the flow (invisible) so the
       widget never changes size when the user clicks between tabs. */
    display: grid;
    grid-template-areas: "stack";
}
.dashboard-panel {
    grid-area: stack;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.dashboard-panel.active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
.dashboard-panel-head {
    font-size: 0.75rem; font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-soft);
}
.dashboard-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 12px; margin-bottom: 16px;
}
.dashboard-stat {
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 14px;
}
.dashboard-stat-num { font-size: 1.5rem; font-weight: 700; color: var(--text-dark); line-height: 1; }
.dashboard-stat-label { font-size: 0.6875rem; color: var(--text-muted); margin-top: 4px; }
.dashboard-results { display: flex; flex-direction: column; gap: 8px; }
.dashboard-result {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    font-size: 0.8125rem;
}
.dashboard-result.positive { border-color: rgba(34, 197, 94, 0.3); background: rgba(34, 197, 94, 0.04); }
.dashboard-result.negative { border-color: rgba(220, 38, 38, 0.32); background: rgba(220, 38, 38, 0.05); }
.dashboard-result.removed { border-color: rgba(34, 197, 94, 0.3); background: rgba(34, 197, 94, 0.04); }
.dashboard-result.pending { border-color: rgba(217, 119, 6, 0.32); background: rgba(217, 119, 6, 0.05); }
.dashboard-result-tag {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--text-subtle);
    flex-shrink: 0;
}
.dashboard-result.positive .dashboard-result-tag { background: #22C55E; }
.dashboard-result.negative .dashboard-result-tag { background: #DC2626; }
.dashboard-result.removed .dashboard-result-tag { background: #22C55E; }
.dashboard-result.pending .dashboard-result-tag { background: #D97706; }
.dashboard-result-text { flex: 1; color: var(--text-dark); font-weight: 500; }
.dashboard-result-domain { color: var(--text-subtle); font-size: 0.75rem; }
.dashboard-result-pos {
    width: 22px; height: 22px;
    border-radius: 6px;
    background: var(--bg-grey);
    color: var(--text-dark);
    font-size: 0.75rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.dashboard-result.negative .dashboard-result-pos { background: rgba(220, 38, 38, 0.12); color: #B91C1C; }
.dashboard-result-badge {
    font-size: 0.6875rem; font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--bg-grey);
    color: var(--text-muted);
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.dashboard-result.negative .dashboard-result-badge { background: rgba(220, 38, 38, 0.12); color: #B91C1C; }
.dashboard-result.removed .dashboard-result-badge { background: rgba(34, 197, 94, 0.14); color: #15803D; }
.dashboard-result.pending .dashboard-result-badge { background: rgba(217, 119, 6, 0.14); color: #B45309; }

/* AI mentions panel */
.dashboard-ai-list { display: flex; flex-direction: column; gap: 8px; }
.dashboard-ai-item {
    display: grid; grid-template-columns: 130px 1fr;
    gap: 12px; align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    font-size: 0.8125rem;
}
.dashboard-ai-item.positive { border-color: rgba(34, 197, 94, 0.3); background: rgba(34, 197, 94, 0.04); }
.dashboard-ai-item.neutral { border-color: var(--border); background: var(--bg-grey-soft); }
.dashboard-ai-engine { font-weight: 700; color: var(--text-dark); }
.dashboard-ai-text { color: var(--text-muted); font-size: 0.75rem; }

/* Reports panel */
.dashboard-reports { display: flex; flex-direction: column; gap: 8px; }
.dashboard-report-row {
    display: grid; grid-template-columns: 100px 1fr 60px;
    gap: 16px; align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    font-size: 0.8125rem;
}
.dashboard-report-month { font-weight: 600; color: var(--text-dark); }
.dashboard-report-spark { color: var(--steel); height: 24px; }
.dashboard-report-spark svg { width: 100%; height: 100%; }
.dashboard-report-link { color: var(--steel-text); font-size: 0.75rem; font-weight: 600; text-align: right; }

/* ---------- Trust row (under hero CTAs) ---------- */
.trust-row {
    display: flex; flex-wrap: wrap;
    justify-content: center; align-items: center;
    gap: 14px 24px;
    margin: -28px auto 48px;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
}
.trust-row-item { display: inline-flex; align-items: center; gap: 6px; }
.trust-row-item svg {
    width: 14px; height: 14px;
    color: var(--steel-text);
}

/* ---------- Pricing extras (anchor + risk reversal) ---------- */
.price-anchor {
    text-align: center;
    max-width: 560px;
    margin: 24px auto 0;
    padding: 14px 22px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-dark);
    font-size: 0.875rem;
    font-weight: 500;
}
.price-anchor strong {
    color: var(--text-dark);
    font-weight: 700;
}
.price-anchor em {
    font-style: normal;
    color: var(--steel-text);
    font-weight: 600;
}
.pricing-guarantee {
    display: flex; align-items: center; justify-content: center;
    gap: 6px;
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-align: center;
}
.pricing-card.featured .pricing-guarantee { color: rgba(255,255,255,0.6); }
.pricing-guarantee svg { width: 12px; height: 12px; flex-shrink: 0; }

/* ---------- Sticky mobile CTA bar ---------- */
.sticky-cta {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 400;
    background: var(--midnight);
    color: #fff;
    padding: 12px 16px;
    box-shadow: 0 -8px 24px rgba(10, 22, 40, 0.18);
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.sticky-cta-text {
    display: flex; flex-direction: column;
    line-height: 1.2;
    min-width: 0;
    flex: 1 1 auto;
}
.sticky-cta-text strong { font-size: 0.9375rem; font-weight: 600; }
.sticky-cta-text small {
    font-size: 0.75rem; color: rgba(255,255,255,0.65);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sticky-cta .btn { padding: 14px 22px; font-size: 0.9375rem; min-height: 44px; flex-shrink: 0; }

/* ---------- Footer legal row ---------- */
.footer-legal {
    display: flex; flex-wrap: wrap; gap: 8px 18px;
    justify-content: center;
    margin-top: 12px;
    font-size: 0.75rem;
}
.footer-legal a { color: rgba(255,255,255,0.78); }
.footer-legal a:hover { color: #fff; }

/* ====================================================
   STATS STRIP (replaces brand-logo strip)
   ==================================================== */
.trust-strip {
    background: var(--white);
    padding: 64px 0 48px;
    border-bottom: 1px solid var(--border-soft);
}
.trust-strip-label {
    text-align: center;
    font-size: 0.875rem; font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 24px;
}
.trust-strip-items {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 8px 24px;
    color: var(--text-subtle);
    font-size: 0.875rem; font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.trust-strip-items span { display: inline-flex; align-items: center; }
.trust-strip-items span:not(:last-child)::after {
    content: '';
    display: inline-block;
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--border);
    margin-left: 24px;
}

/* ====================================================
   FOOTPRINT (Outcome / 2-col features)
   ==================================================== */
.footprint { background: var(--bg-grey); padding: 120px 0 96px; }
.footprint .section-header { margin-bottom: 64px; }
.footprint-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border-top: 2px solid var(--border);
}
.footprint-item {
    padding: 32px 32px 32px 0;
    border-top: 2px solid transparent;
    margin-top: -2px;
    transition: border-color 0.2s;
}
.footprint-item:nth-child(odd) { padding-right: 48px; border-right: 1px solid var(--border); }
.footprint-item:nth-child(even) { padding-left: 48px; }
.footprint-item:hover,
.footprint-item:focus-within { border-top-color: var(--steel); }
.footprint-item-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px;
}
.footprint-item-icon {
    width: 24px; height: 24px;
    color: var(--steel);
}
.footprint-item h3 { color: var(--steel-text); margin: 0; font-size: 1.0625rem; }
.footprint-item p { color: var(--text-muted); margin: 0; font-size: 0.9375rem; }

/* ====================================================
   BENTO (Why come to us)
   ==================================================== */
.bento { padding: 120px 0; background: var(--white); }
.bento-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr 0.95fr;
    grid-template-rows: minmax(280px, auto) minmax(200px, auto);
    grid-template-areas:
        "main proof proof"
        "main service stat";
    gap: 16px;
}
/* Slot the four cards into named areas (matches HTML order) */
.bento-grid > :nth-child(1) { grid-area: main; }
.bento-grid > :nth-child(2) { grid-area: proof; }
.bento-grid > :nth-child(3) { grid-area: service; }
.bento-grid > :nth-child(4) { grid-area: stat; }
.bento-card {
    border-radius: var(--radius-lg);
    padding: 36px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bento-card-large { justify-content: space-between; padding: 40px; }
.bento-light { background: var(--bg-grey); color: var(--text-dark); }
.bento-dark { background: var(--midnight); color: #fff; }
.bento-dark h3 { color: #fff; }
.bento-card .bento-card-title {
    font-size: 1.5rem; font-weight: 700;
    color: inherit;
    line-height: 1.2;
    margin-bottom: 12px;
}
.bento-card-large .bento-card-title { font-size: 2rem; }
.bento-arc {
    position: absolute;
    width: 240px; height: 240px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.08);
    pointer-events: none;
}
.bento-arc-1 { top: -80px; right: -80px; }
.bento-arc-2 { bottom: -100px; left: -100px; border-color: rgba(74, 144, 184, 0.18); }
.bento-icons {
    display: flex; gap: 12px;
    margin-top: 24px;
}
.bento-icon-pill {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    display: flex; align-items: center; justify-content: center;
    color: var(--steel);
}
.bento-icon-pill svg { width: 20px; height: 20px; }
.bento-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; }
.bento-stat-num {
    font-size: 4rem; font-weight: 800;
    line-height: 1;
    color: #fff;
    letter-spacing: -0.04em;
}
.bento-stat-label { color: rgba(255,255,255,0.7); font-size: 0.875rem; max-width: 220px; }
.bento-stat-deco { display: flex; gap: 8px; color: rgba(255,255,255,0.4); }

.bento-mockup {
    background: var(--white);
    border-radius: 12px;
    padding: 14px;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: 8px;
}
.bento-mockup-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px;
    border-radius: 6px;
    font-size: 0.6875rem;
}
.bento-mockup-row .url { color: var(--text-subtle); font-size: 0.625rem; }
.bento-mockup-row .title { color: var(--steel-text); font-weight: 600; }
.bento-mockup-row.featured { background: rgba(34, 197, 94, 0.06); }

.bento-card-split {
    display: grid; grid-template-columns: 0.85fr 1fr; gap: 32px;
    align-items: center;
}
.bento-card-split-text h3 { color: var(--steel-text); font-size: 1.625rem; line-height: 1.2; margin-bottom: 12px; }
.bento-card-split-text p { font-size: 0.9375rem; margin: 0; max-width: 340px; }

/* "Fully Managed Service" - branded account-manager card */
.bento-managed-am {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
}
.bento-managed-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(74, 144, 184, 0.10);
    color: var(--steel);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.bento-managed-avatar svg { width: 24px; height: 24px; }
.bento-managed-avatar::after {
    content: '';
    position: absolute;
    bottom: 1px; right: 1px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #22C55E;
    border: 2px solid var(--white);
}
.bento-managed-meta {
    display: flex; flex-direction: column; gap: 2px;
    line-height: 1.3;
    min-width: 0;
}
.bento-managed-meta strong {
    color: var(--text-dark);
    font-size: 0.875rem;
    font-weight: 600;
}
.bento-managed-meta > span {
    color: var(--text-muted);
    font-size: 0.75rem;
}
.bento-managed-status { color: #15803D; font-weight: 600; }
.bento-managed-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bento-managed-tag {
    padding: 4px 10px;
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
}

/* ====================================================
   FEATURED QUOTE + TESTIMONIALS
   ==================================================== */
.featured-quote { padding: 72px 0 0; background: var(--white); }
.featured-quote-grid {
    display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px;
    align-items: center;
    background: var(--bg-grey);
    border-radius: var(--radius-lg);
    padding: 48px;
}
/* When the quote panel only has a text column (no visual), centre it. */
.featured-quote-grid:not(:has(.featured-quote-visual)) {
    grid-template-columns: 1fr;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.featured-quote-grid:not(:has(.featured-quote-visual)) .featured-quote-attribution {
    text-align: center;
}
.featured-quote-text .brand-mark {
    font-size: 2.25rem; font-weight: 700;
    color: var(--steel);
    letter-spacing: -0.03em;
    margin-bottom: 16px;
}
.featured-quote-text blockquote {
    font-size: 1.5rem; font-weight: 600; color: var(--text-dark);
    margin: 0 0 20px; line-height: 1.4;
    quotes: "\201C" "\201D";
}
.featured-quote-text blockquote::before { content: open-quote; }
.featured-quote-text blockquote::after { content: close-quote; }
.featured-quote-attribution {
    font-size: 0.875rem; color: var(--text-muted);
    line-height: 1.4;
}
.featured-quote-attribution strong { display: block; color: var(--text-dark); font-weight: 600; }
.featured-quote-visual {
    background: var(--midnight);
    border-radius: var(--radius);
    aspect-ratio: 16 / 10;
    position: relative;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.featured-quote-visual svg { width: 60px; height: 60px; color: rgba(255,255,255,0.9); }
.featured-quote-visual .play-button {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--steel);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
}

.testimonials { padding: 96px 0; background: var(--white); }
.testimonials .section-header { text-align: left; margin: 0 0 40px; max-width: 100%; }
.testimonials .section-header h2 { color: var(--text-dark); }
.testimonials-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.testimonial-card {
    background: var(--bg-grey);
    border-radius: var(--radius);
    padding: 28px;
    display: flex; flex-direction: column;
    min-height: 280px;
}
.testimonial-stars { color: #FFB400; font-size: 0.875rem; margin-bottom: 16px; letter-spacing: 2px; }
.testimonial-card p {
    color: var(--text-dark);
    font-size: 0.9375rem;
    line-height: 1.55;
    flex: 1;
    position: relative;
    padding-left: 16px;
}
.testimonial-card p::before {
    content: '"';
    position: absolute;
    left: 0;
    top: -8px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-subtle);
}
.testimonial-author {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    display: flex; align-items: center; gap: 12px;
}
.testimonial-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #cdd9ff, #8fa6f7);
    flex-shrink: 0;
}
.testimonial-author strong { display: block; color: var(--text-dark); font-size: 0.9375rem; font-weight: 600; }
.testimonial-author span { color: var(--text-muted); font-size: 0.8125rem; }

/* ====================================================
   PRICING
   ==================================================== */
.pricing { padding: 120px 0; background: var(--bg-grey); }
.pricing-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1080px; margin: 0 auto;
}
.pricing-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 36px 32px;
    border: 1px solid var(--border-soft);
    display: flex; flex-direction: column;
    position: relative;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.pricing-card:hover { border-color: var(--steel); transform: translateY(-2px); box-shadow: var(--shadow); }
.pricing-card.featured {
    background: var(--midnight);
    color: rgba(255,255,255,0.85);
    border-color: var(--midnight);
    transform: translateY(-12px);
    box-shadow: var(--shadow-lg);
}
.pricing-card.featured h3,
.pricing-card.featured .pricing-price,
.pricing-card.featured .pricing-features li { color: #fff; }
.pricing-card.featured .pricing-desc { color: rgba(255,255,255,0.7); }
.pricing-badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--steel); color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.6875rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
}
.pricing-header h3 { font-size: 1.125rem; margin-bottom: 16px; color: var(--text-dark); }
.pricing-price {
    display: flex; align-items: baseline; gap: 4px;
    color: var(--text-dark);
    margin-bottom: 12px;
}
.price-currency { font-size: 1.5rem; font-weight: 600; }
.price-amount { font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.price-period { font-size: 0.875rem; color: var(--text-muted); margin-left: 4px; }
.pricing-card.featured .price-period { color: rgba(255,255,255,0.6); }
.pricing-desc { color: var(--text-muted); font-size: 0.875rem; margin-bottom: 24px; min-height: 42px; }
.pricing-features {
    list-style: none; padding: 0; margin: 0 0 28px;
    flex: 1;
    display: flex; flex-direction: column; gap: 10px;
}
.pricing-features li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 0.875rem; color: var(--text-dark);
    line-height: 1.5;
}
.pricing-features li::before {
    content: '';
    width: 16px; height: 16px;
    border-radius: 50%;
    background: rgba(74, 144, 184, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a90b8' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;
    flex-shrink: 0;
    margin-top: 2px;
}
.pricing-card.featured .pricing-features li::before {
    background-color: rgba(255,255,255,0.15);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* ====================================================
   FAQ
   ==================================================== */
.faq { padding: 80px 0; background: var(--white); }
.faq-list {
    max-width: 820px; margin: 0 auto;
    display: flex; flex-direction: column;
    gap: 12px;
}
.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.faq-item[open] { border-color: var(--steel); box-shadow: var(--shadow-sm); }
.faq-item summary {
    list-style: none;
    padding: 22px 28px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 {
    font-size: 1rem; font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}
.faq-toggle {
    width: 24px; height: 24px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--bg-grey);
    position: relative;
    transition: background 0.2s, transform 0.2s;
}
.faq-toggle::before, .faq-toggle::after {
    content: '';
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: var(--text-dark);
}
.faq-toggle::before { width: 10px; height: 2px; }
.faq-toggle::after { width: 2px; height: 10px; transition: opacity 0.2s; }
.faq-item[open] .faq-toggle { background: var(--steel); }
.faq-item[open] .faq-toggle::before, .faq-item[open] .faq-toggle::after { background: #fff; }
.faq-item[open] .faq-toggle::after { opacity: 0; }
.faq-item > div {
    padding: 0 28px 24px;
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.65;
}
.faq-item > div p { margin: 0; }

/* ====================================================
   FINAL CTA
   ==================================================== */
.cta-section {
    padding: 96px 24px 120px;
    background: var(--white);
}
.cta-panel {
    max-width: var(--container-max);
    margin: 0 auto;
    background: var(--midnight);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 80px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-panel::before, .cta-panel::after {
    content: '';
    position: absolute;
    width: 380px; height: 380px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.06);
    pointer-events: none;
}
.cta-panel::before { top: -160px; right: -160px; }
.cta-panel::after { bottom: -180px; left: -180px; }
.cta-panel h2 {
    color: #fff;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    max-width: 720px; margin: 0 auto 16px;
}
.cta-panel p {
    color: rgba(255,255,255,0.75);
    max-width: 600px; margin: 0 auto 28px;
}
/* Outline buttons inside the dark CTA panel need a light treatment so they
   remain visible against the navy background. (Without this, both the text
   and the border blend into the panel.) */
.cta-panel .btn-outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}
.cta-panel .btn-outline:hover,
.cta-panel .btn-outline:focus-visible {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.75);
    color: #fff;
}

/* ====================================================
   FOOTER
   ==================================================== */
.footer {
    background: var(--midnight-deep);
    color: rgba(255,255,255,0.6);
    padding: 64px 0 32px;
    font-size: 0.875rem;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(4, 1fr);
    gap: 32px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand p { margin: 16px 0 0; max-width: 320px; line-height: 1.6; }
.footer-col-title {
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer ul a { color: rgba(255,255,255,0.6); transition: color 0.15s; }
.footer ul a:hover { color: #fff; }
.footer-social { display: flex; gap: 12px; margin-top: 16px; }
.footer-social a {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.85);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.footer-social a:focus-visible {
    outline: 2px solid rgba(255,255,255,0.85);
    outline-offset: 2px;
}
.footer-social a:hover { background: var(--steel); color: #fff; }
.footer-bottom {
    padding-top: 24px;
    text-align: center;
    color: rgba(255,255,255,0.4);
    font-size: 0.8125rem;
}

/* ====================================================
   RESPONSIVE
   ==================================================== */
@media (max-width: 980px) {
    .bento-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "main main"
            "proof proof"
            "service stat";
    }
    .featured-quote-grid { grid-template-columns: 1fr; padding: 32px; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .pricing-grid { grid-template-columns: 1fr; max-width: 480px; }
    .pricing-card.featured { transform: none; }
    .footprint-grid { grid-template-columns: 1fr; }
    .footprint-item:nth-child(odd) { padding-right: 0; border-right: none; }
    .footprint-item:nth-child(even) { padding-left: 0; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .dashboard-body { grid-template-columns: 1fr; }
    .dashboard-side { display: none; }
}

@media (max-width: 860px) {
    .nav-links {
        position: fixed;
        top: var(--nav-height);
        left: 0; right: 0;
        background: var(--white);
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
        gap: 4px;
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow);
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    }
    .nav-links.open { opacity: 1; visibility: visible; transform: translateY(0); }
    .nav-links a { padding: 12px 16px; font-size: 1rem; }
    .nav-right .nav-phone, .nav-right .nav-cta { display: none; }
    .nav-right.open { display: none; }
    .hamburger { display: flex; }
    .section { padding: 64px 0; }
    .footprint, .bento, .pricing, .faq { padding: 64px 0; }
    .hero { padding: 56px 0 0; }
    .hero-pills { gap: 16px; flex-direction: column; align-items: center; }
    .bento-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "main"
            "proof"
            "service"
            "stat";
    }
    .footer-grid { grid-template-columns: 1fr; }
    .cta-panel { padding: 56px 28px; }
    .featured-quote-grid { padding: 24px; gap: 32px; }
    .featured-quote-text blockquote { font-size: 1.25rem; }
    .bento-card-split { grid-template-columns: 1fr; }

    /* Show sticky mobile CTA, lift back-to-top out of its way, and pad body */
    .sticky-cta { display: flex; }
    body { padding-bottom: 72px; }
    .back-to-top { bottom: 84px; }
}

/* ====================================================
   MOBILE PHONE BREAKPOINT - placed at end so it wins the cascade
   over all desktop/tablet rules above (max-width: 980 / 860)
   ==================================================== */
@media (max-width: 600px) {
    /* Layout: tighter container padding */
    .container, .nav-container, .hero-container { padding-left: 16px; padding-right: 16px; }

    /* Section padding tightened */
    .section, .footprint, .bento, .pricing, .faq,
    .two-col-intro, .numbered-cards, .steps-section,
    .team-section, .service-hub, .contact-section,
    .article-section, .featured-quote, .testimonials,
    .trust-strip { padding: 56px 0; }
    .pricing { padding: 56px 0 72px; }
    .hero { padding: 40px 0 48px; }
    .page-hero { padding: 40px 0 48px; }
    .cta-section { padding: 56px 16px 80px; }

    /* Hero typography - smaller, never overflows (specificity boost in late block; see body .hero h1 below) */
    .hero h1 { font-size: clamp(1.875rem, 8vw, 2.25rem); }
    .page-hero h1 { font-size: clamp(1.5rem, 7vw, 2rem); }
    .hero-subtitle, .page-hero-subtitle { font-size: 0.9375rem; }
    h2 { font-size: clamp(1.5rem, 6vw, 2rem); }

    /* Eyebrow pill must wrap and not overflow */
    .eyebrow {
        font-size: 0.625rem;
        padding: 5px 12px;
        max-width: 100%;
        white-space: normal;
        line-height: 1.4;
    }

    /* Hero buttons stack and full-width */
    .hero-buttons, .page-hero-buttons {
        flex-direction: column; align-items: stretch;
    }
    .hero-buttons .btn, .page-hero-buttons .btn {
        width: 100%; justify-content: center;
    }

    /* Trust row: stack vertically, left-aligned */
    .trust-row {
        flex-direction: column; gap: 8px; align-items: flex-start;
        padding: 0 16px; margin-top: 8px;
    }

    /* Hero pills: vertical, full-width */
    .hero-pills {
        flex-direction: column; align-items: stretch; gap: 12px;
        padding: 0 8px;
    }
    .hero-pill { justify-content: flex-start; }

    /* Trust strip: tighter wrap */
    .trust-strip-items {
        gap: 10px 16px;
        font-size: 0.75rem;
    }
    .trust-strip-items span:not(:last-child)::after { display: none; }

    /* Dashboard mockup - clear mobile layout, no fixed sidebar */
    .hero-visual { padding: 0 16px; transform: translateY(20px); }
    .dashboard-body { grid-template-columns: 1fr; }
    .dashboard-side { display: none; }
    .dashboard-bar { padding: 10px 14px; }
    .dashboard-main { padding: 16px; }
    .dashboard-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
    .dashboard-stats > :nth-child(3) { grid-column: span 2; }
    .dashboard-stat { padding: 10px; }
    .dashboard-stat-num { font-size: 1.25rem; }
    .dashboard-result { flex-wrap: wrap; gap: 6px; }
    .dashboard-result-text { font-size: 0.75rem; }
    .dashboard-result-domain { display: none; }

    /* Bento cards: stack, smaller padding */
    .bento-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "main"
            "proof"
            "service"
            "stat";
    }
    .bento-card { padding: 24px; }
    .bento-card-large { padding: 28px; }
    .bento-card-large .bento-card-title { font-size: 1.5rem; }
    .bento-card-split { grid-template-columns: 1fr; gap: 16px; }

    /* Pricing: single column, featured plan flat */
    .pricing-grid { grid-template-columns: 1fr; max-width: 420px; }
    .pricing-card.featured { transform: none; }
    .pricing-card { padding: 28px 24px; }
    .price-amount { font-size: 2.5rem; }

    /* Service hub: single column */
    .service-hub-grid { grid-template-columns: 1fr; }
    .service-hub-card { padding: 24px; }

    /* Numbered cards single column */
    .numbered-cards-grid { grid-template-columns: 1fr; }
    .numbered-card { padding: 24px; }

    /* Two-col intro stacks */
    .two-col-intro-grid { grid-template-columns: 1fr; gap: 32px; }
    .two-col-intro-visual { aspect-ratio: 4 / 3; max-width: 280px; margin: 0 auto; }

    /* Steps section stacks */
    .steps-grid { grid-template-columns: 1fr; gap: 32px; }
    .steps-visual { position: static; aspect-ratio: 4 / 3; max-width: 280px; margin: 0 auto; }

    /* Team stats / credentials stack */
    .team-credentials { grid-template-columns: 1fr; }

    /* Featured quote stacks tighter */
    .featured-quote-grid { padding: 24px; gap: 20px; grid-template-columns: 1fr; }
    .featured-quote-text blockquote { font-size: 1.125rem; }
    .featured-quote-text .brand-mark { font-size: 1.625rem; }

    /* Testimonials stack */
    .testimonials-grid { grid-template-columns: 1fr; }
    .testimonial-card { padding: 24px; min-height: auto; }

    /* FAQ */
    .faq-list { gap: 8px; }
    .faq-item summary { padding: 18px 20px; gap: 10px; }
    .faq-item summary h3 { font-size: 0.9375rem; }
    .faq-item > div { padding: 0 20px 18px; font-size: 0.875rem; }

    /* Footprint single column */
    .footprint-grid { grid-template-columns: 1fr; }

    /* Footer stacks neatly */
    .footer { padding: 48px 0 24px; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; padding-bottom: 28px; }
    .footer-bottom { display: flex; flex-direction: column; gap: 12px; }
    .footer-legal { justify-content: center; flex-wrap: wrap; }

    /* CTA panel */
    .cta-panel { padding: 48px 24px; border-radius: var(--radius); }
    .cta-panel h2 { font-size: 1.5rem; }
    .cta-panel p { font-size: 0.9375rem; }

    /* Sticky CTA tighter */
    .sticky-cta { padding: 10px 12px; gap: 8px; }
    .sticky-cta-text strong { font-size: 0.8125rem; }
    .sticky-cta-text small { font-size: 0.6875rem; }
    .sticky-cta .btn { padding: 12px 18px; font-size: 0.875rem; min-height: 44px; }

    /* Contact form tighter */
    .contact-grid { grid-template-columns: 1fr; gap: 24px; }
    .contact-form-wrapper { padding: 24px 20px; }
    .form-row { grid-template-columns: 1fr; }

    /* Article content slightly smaller */
    .article-content { font-size: 0.9375rem; }
    .article-content h2 { font-size: 1.375rem; }
    .article-content h3 { font-size: 1.125rem; }
}


/* ====================================================
   CASE STUDIES
   ==================================================== */
.case-studies-section { padding: 96px 0; background: var(--bg-grey); }
.case-studies-list {
    display: flex; flex-direction: column;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}
.case-study-card {
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-sm);
}
.case-study-head {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    margin-bottom: 20px;
}
.case-study-num {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--steel-text);
}
.case-study-tag {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    display: inline-flex; align-items: center; gap: 6px;
}
.case-study-tag::before {
    content: '';
    width: 6px; height: 6px;
    background: #22C55E;
    border-radius: 50%;
    display: inline-block;
}
.case-study-card h3 {
    font-size: 1.5rem;
    color: var(--text-dark);
    line-height: 1.25;
    margin: 0 0 18px;
}
.case-study-meta {
    display: flex; flex-wrap: wrap; gap: 6px 12px;
    color: var(--text-muted);
    font-size: 0.875rem;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 24px;
}
.case-study-meta strong { color: var(--text-dark); font-weight: 600; }
.case-study-meta-sep { color: var(--text-subtle); }
.case-study-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 28px;
}
.case-study-col h4 {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-subtle);
    margin: 0 0 10px;
}
.case-study-col p {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}
.case-study-col p strong { color: var(--text-dark); }
.case-study-col ul {
    margin: 0; padding-left: 18px;
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
}
.case-study-col ul li { margin-bottom: 6px; }
.case-study-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 18px;
    background: var(--bg-grey);
    border-radius: var(--radius);
    margin-bottom: 24px;
}
.case-study-stat {
    text-align: center;
}
.case-study-stat strong {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.2;
    margin-bottom: 2px;
}
.case-study-stat span {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.case-study-quote {
    background: var(--bg-grey);
    border-left: 3px solid var(--steel);
    padding: 18px 24px;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin: 0;
}
.case-study-quote p {
    font-style: italic;
    color: var(--text-dark);
    font-size: 1rem;
    line-height: 1.5;
    margin: 0 0 10px;
}
.case-study-quote footer {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-style: normal;
}
.case-study-quote footer strong { color: var(--text-dark); font-weight: 600; }
.case-studies-disclaimer {
    text-align: center;
    color: var(--text-subtle);
    font-size: 0.8125rem;
    margin-top: 32px;
    padding: 0 16px;
}
@media (max-width: 860px) {
    .case-study-card { padding: 28px; }
    .case-study-grid { grid-template-columns: 1fr; gap: 20px; }
    .case-study-stats { grid-template-columns: 1fr; }
}

/* Industry-page pull quote (inserted before FAQ) */
.industry-quote-section {
    padding: 80px 0;
    background: var(--bg-grey);
}
.industry-quote-section .container { max-width: 760px; text-align: center; }
.industry-quote-mark {
    width: 40px; height: 40px;
    color: var(--steel);
    margin: 0 auto 16px;
}
.industry-quote-section blockquote {
    font-size: 1.375rem;
    line-height: 1.5;
    color: var(--text-dark);
    font-weight: 500;
    margin: 0 0 20px;
}
.industry-quote-section .industry-quote-attr {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}
.industry-quote-section .industry-quote-attr strong { color: var(--text-dark); font-weight: 600; }
@media (max-width: 600px) {
    .industry-quote-section blockquote { font-size: 1.125rem; }
}

/* ========== TABLET BREAKPOINT (768px) ========== */
@media (max-width: 980px) and (min-width: 769px) {
    .two-col-intro-grid,
    .steps-grid,
    .featured-quote-grid,
    .bento-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .numbered-cards-grid,
    .service-hub-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .pricing-grid > :last-child {
        grid-column: 1 / -1;
        max-width: 480px;
        justify-self: center;
    }
    .footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 40px;
    }
    .footer-services, .footer-contact {
        grid-column: span 1;
    }
    .nav-cta {
        display: none;
    }
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
    .preloader {
        display: none !important;
    }
    .mirror-pulse,
    .logo-shimmer {
        animation: none !important;
    }
}

/* ========== HIGHER-SPECIFICITY OVERRIDES (replaces previous !important in mobile cascade) ========== */
@media (max-width: 600px) {
    body .hero h1.hero-h1,
    body .hero h1 { font-size: clamp(1.875rem, 8vw, 2.25rem); }
    body .page-hero h1 { font-size: clamp(1.5rem, 7vw, 2rem); }
    body .dashboard-mockup .dashboard-body { grid-template-columns: 1fr; }
    body .dashboard-mockup .dashboard-side { display: none; }
    body .bento-grid { grid-template-columns: 1fr; grid-template-areas: "stat" "stat" "stat" "stat"; }
    body .pricing-grid { grid-template-columns: 1fr; max-width: 420px; }
}

/* ========== COMPARISON TABLE (for cost/ROI pages) ========== */
.comparison-table {
    width: 100%;
    margin: 32px 0;
    border-collapse: collapse;
    font-size: 0.9375rem;
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(10, 22, 40, 0.06);
}
.comparison-table caption {
    text-align: left;
    padding: 12px 16px;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    caption-side: bottom;
}
.comparison-table thead {
    background: var(--bg-grey);
}
.comparison-table th,
.comparison-table td {
    text-align: left;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(74, 144, 184, 0.08);
    vertical-align: top;
    line-height: 1.4;
}
.comparison-table thead th {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.comparison-table tbody th {
    font-weight: 600;
    color: var(--text-dark);
    width: 28%;
}
.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td {
    border-bottom: 0;
}
.comparison-table tbody tr:hover {
    background: rgba(74, 144, 184, 0.03);
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 32px 0;
    /* Absorb the table's own top/bottom margin so wrapping is invisible */
}
.table-scroll .comparison-table { margin: 0; min-width: 560px; }

@media (max-width: 700px) {
    .comparison-table { font-size: 0.8125rem; }
    .comparison-table th,
    .comparison-table td { padding: 10px 12px; }
}

/* ========== MOBILE NAV PHONE + CTA (cloned into drawer by JS) ========== */
.nav-link-phone .nav-phone-mobile,
.nav-link-cta .nav-cta-mobile {
    display: block;
    text-align: center;
    margin: 4px 16px;
}
.nav-link-phone .nav-phone-mobile {
    font-weight: 600;
    color: var(--text-dark);
    text-decoration: none;
    padding: 12px;
    border-top: 1px solid rgba(74, 144, 184, 0.12);
    margin-top: 8px;
}
.nav-link-cta .nav-cta-mobile {
    padding: 12px 18px;
    border-radius: 999px;
    min-height: 44px;
    color: #fff;   /* .nav-links a would otherwise paint the text navy on the navy button */
}
.nav-link-cta .nav-cta-mobile:hover,
.nav-link-cta .nav-cta-mobile:focus-visible { background: var(--midnight-deep); color: #fff; }
@media (min-width: 861px) {
    /* Hide the mobile clones at desktop sizes - the originals in nav-right show instead */
    .nav-link-phone,
    .nav-link-cta { display: none; }
}

/* ========== MOBILE: CENTER TWO-COL BODY CONTENT WHEN STACKED ========== */
@media (max-width: 860px) {
    /* When two-col layouts stack to one column, center the text body. */
    .two-col-intro-content,
    .steps-grid > div:first-child,
    .featured-quote-grid > div,
    .case-study-content {
        text-align: center;
    }
    /* Eyebrow pills should still center properly */
    .two-col-intro-content .eyebrow,
    .steps-grid > div:first-child .eyebrow {
        margin-left: auto;
        margin-right: auto;
    }
    /* Inline CTAs (link-arrow) sit nicely centered too */
    .two-col-intro-content .link-arrow,
    .steps-grid > div:first-child .link-arrow {
        justify-content: center;
    }
    /* Step items keep left-aligned text (number + body layout) but center the cluster */
    .steps-list { max-width: 460px; margin-left: auto; margin-right: auto; text-align: left; }
}

/* ========== MOBILE: CENTER FOOTER WHEN STACKED ========== */
@media (max-width: 860px) {
    .footer-grid {
        text-align: center;
    }
    .footer-brand,
    .footer-nav,
    .footer-services,
    .footer-resources,
    .footer-contact {
        align-items: center;
    }
    .footer-brand .nav-logo {
        justify-content: center;
    }
    .footer-brand p {
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }
    .footer-nav ul,
    .footer-services ul,
    .footer-resources ul,
    .footer-contact ul {
        padding-left: 0;
        list-style: none;
    }
    .footer-social {
        justify-content: center;
    }
    .footer-col-title {
        text-align: center;
    }
}

/* ========== FOCUS-VISIBLE SITEWIDE (WCAG 2.4.7) ========== */
.nav-links a:focus-visible,
.nav-phone:focus-visible,
.faq-item summary:focus-visible,
.footer ul a:focus-visible,
.footer-legal a:focus-visible,
.skip-link:focus-visible {
    outline: 2px solid var(--steel);
    outline-offset: 2px;
    border-radius: 4px;
}
.faq-item summary:focus-visible {
    outline-offset: -2px;
}
/* Footer links on dark background - lighter outline */
.footer ul a:focus-visible,
.footer-legal a:focus-visible {
    outline-color: rgba(255,255,255,0.85);
}

.pricing-header .pricing-tier-name { font-size: 1.5rem; line-height: 1.3; margin: 0 0 0.5rem 0; color: var(--midnight); letter-spacing: -0.01em; font-weight: 600; }

/* About page: two credential cards, centred rather than leaving an empty third column */
@media (min-width: 861px) {
    .team-credentials--two { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
}