html {
    scroll-behavior: smooth;
}

/* Metric-matched fallback so the Inter webfont swap (font-display: swap)
   does not reflow headings/CLS while Inter is still loading. */
@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Liberation Sans'), local('Nimbus Sans');
    ascent-override: 90.44%;
    descent-override: 22.52%;
    line-gap-override: 0%;
    size-adjust: 107.12%;
}

body {
    margin: 0;
    overflow-x: hidden;
}

/* Lucide icons start as <i data-lucide="..."> and get swapped for an
   <svg> by JS after load. <i> is inline by default, where width/height
   utilities have no effect, so the icon has zero footprint until the
   swap — then dozens of icons across the page pop to full size at once,
   causing a large, reproducible layout shift. Forcing inline-block here
   makes the Tailwind h-w classes reserve the icon final size
   immediately, so the later SVG swap causes no shift. */
[data-lucide] {
    display: inline-block;
    vertical-align: -0.125em;
}

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

/* Mobile-friendliness safety net: applies everywhere, changes nothing
   visually unless it was previously broken/overflowing. */
img,
svg,
video,
iframe {
    max-width: 100%;
}

a,
button,
[role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.overflow-y-auto {
    -webkit-overflow-scrolling: touch;
}

/* Visible keyboard-only focus ring, on-brand instead of the browser
   default (or invisible, where a Tailwind outline-none utility is
   present) — :focus-visible means mouse clicks stay clean. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 2px;
}

/* Lock background scroll while the mobile nav is open. */
body:has(#mobileMenu.is-open) {
    overflow: hidden;
}

.mobile-menu-button {
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.mobile-menu-button svg {
    transition: transform 220ms ease, opacity 160ms ease;
}

.mobile-menu-button.is-open {
    border-color: rgba(242, 88, 34, 0.34);
    background: #fff8f5;
    color: var(--color-orange);
}

.mobile-menu-button.is-open svg {
    transform: rotate(90deg);
}

.mobile-menu-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    display: block;
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    transform: translateY(-0.75rem);
    pointer-events: none;
    visibility: hidden;
    box-shadow: 0 18px 34px rgba(12, 30, 48, 0.12);
    transition: max-height 320ms ease, opacity 220ms ease, transform 260ms ease, padding 260ms ease, visibility 0s linear 320ms;
}

.mobile-menu-panel.is-open {
    max-height: calc(100svh - 4.25rem);
    padding-top: 1rem;
    padding-bottom: 1rem;
    overflow-y: auto;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition: max-height 360ms ease, opacity 220ms ease, transform 280ms ease, padding 260ms ease, visibility 0s;
}

.mobile-menu-panel a {
    opacity: 0;
    transform: translateX(1rem);
    transition: opacity 220ms ease, transform 260ms ease, background 180ms ease, color 180ms ease;
}

.mobile-menu-panel .mobile-nav-link.is-active,
.mobile-menu-panel .mobile-nav-link[aria-current="page"] {
    background: #fff1eb;
    color: var(--color-orange);
    box-shadow: inset 3px 0 0 var(--color-orange);
}

.mobile-menu-panel.is-open a {
    opacity: 1;
    transform: translateX(0);
}

.mobile-menu-panel.is-open a:nth-child(1) { transition-delay: 45ms; }
.mobile-menu-panel.is-open a:nth-child(2) { transition-delay: 75ms; }
.mobile-menu-panel.is-open a:nth-child(3) { transition-delay: 105ms; }
.mobile-menu-panel.is-open a:nth-child(4) { transition-delay: 135ms; }
.mobile-menu-panel.is-open a:nth-child(5) { transition-delay: 165ms; }
.mobile-menu-panel.is-open a:nth-child(6) { transition-delay: 195ms; }
.mobile-menu-panel.is-open a:nth-child(7) { transition-delay: 225ms; }
.mobile-menu-panel.is-open a:nth-child(8) { transition-delay: 255ms; }
.mobile-menu-panel.is-open a:nth-child(9) { transition-delay: 285ms; }

/* Contrast pass: the lowest-opacity ink tones (eyebrow labels, small
   captions) sit close to failing WCAG AA at these font sizes. Raising
   the floor keeps them visibly lighter than body copy while making
   them legible on a bright phone screen. !important is required here
   because Tailwind's CDN stylesheet is injected after this file and
   wins ties at equal specificity. */
.text-brand-ink\/50,
.text-brand-ink\/54,
.text-brand-ink\/55,
.text-brand-ink\/58 {
    color: color-mix(in srgb, var(--color-ink) 68%, transparent) !important;
}

.evidence-top span,
.evidence-note {
    color: color-mix(in srgb, var(--color-ink) 68%, transparent);
}

.scroll-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-orange), var(--color-aqua));
    transition: width 120ms linear;
    pointer-events: none;
}

.back-to-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 40;
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    place-items: center;
    border-radius: 999px;
    background: var(--color-orange);
    color: #fff;
    box-shadow: 0 14px 34px rgba(242, 88, 34, 0.32);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease, background 220ms ease;
}

.back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.back-to-top:hover {
    background: var(--color-navy);
}

.whatsapp-float {
    position: fixed;
    right: 1.5rem;
    bottom: calc(1.5rem + 3.25rem + 0.75rem);
    z-index: 40;
    width: 3.25rem;
    height: 3.25rem;
    place-items: center;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    box-shadow: 0 14px 34px rgba(37, 211, 102, 0.35);
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.whatsapp-float:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 18px 40px rgba(37, 211, 102, 0.45);
}

/* Teaser bubble sits above the stacked WhatsApp + back-to-top column
   (bottom-right: back-to-top at 1.5rem, WhatsApp above it, teaser
   above that). JS toggles .is-visible; display show/hide stays on
   Tailwind's hidden/lg:flex so the two mechanisms never collide. */
.whatsapp-teaser {
    position: fixed;
    right: 1.5rem;
    bottom: calc(1.5rem + 3.25rem + 0.75rem + 3.25rem + 0.75rem);
    z-index: 39;
    align-items: center;
    gap: 0.6rem;
    max-width: 15.5rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.75rem;
    border: 1px solid var(--color-line);
    background: #fff;
    box-shadow: 0 14px 34px rgba(48, 50, 52, 0.18);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 260ms ease, transform 260ms ease;
    pointer-events: none;
}

.whatsapp-teaser.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.whatsapp-teaser span {
    color: var(--color-navy);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.4;
}

.whatsapp-teaser button {
    display: grid;
    flex: none;
    width: 1.4rem;
    height: 1.4rem;
    place-items: center;
    border-radius: 999px;
    background: var(--color-paper);
    color: var(--color-ink);
    transition: background 180ms ease;
}

.whatsapp-teaser button:hover {
    background: #fff8f5;
    color: var(--color-orange);
}

.home-hero-actions a {
    border-radius: 0.5rem !important;
    font-size: 0.9rem !important;
    font-weight: 900 !important;
    line-height: 1;
    letter-spacing: 0.01em;
    box-shadow: 0 16px 34px rgba(242, 88, 34, 0.22);
}

.home-hero-actions a:first-child {
    border: 2px solid var(--color-orange);
}

.home-hero-actions a:last-child {
    border-color: rgba(12, 30, 48, 0.22) !important;
    box-shadow: 0 12px 28px rgba(12, 30, 48, 0.08);
}

/* Driven entirely from here rather than Tailwind's `flex`/`flex-wrap`
   utilities: this codebase's Tailwind CDN stylesheet loads after this
   file and wins equal-specificity ties, so a media-query override
   here couldn't beat an unconditional Tailwind class on the same
   element (that's what silently broke the phone 2x2 grid below). */
.home-hero-pills {
    display: flex;
    flex-wrap: wrap;
}

/* Mobile/tablet persistent action bar. Same breakpoint (1024px) as
   the header's own mobile-nav switch, so it's never on screen at the
   same time as the desktop nav or the .whatsapp-float button. */
.mobile-action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--color-line);
    background: #fff;
    box-shadow: 0 -8px 24px rgba(48, 50, 52, 0.1);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Home only (scripts.js only adds this class when #heroCarousel is on
   the page): the bar starts tucked away so it doesn't duplicate the
   hero's own "Free Audit" CTA on the first screen, then slides in
   once the visitor has scrolled past the hero. Every other page never
   gets this class, so the bar behaves exactly as before there. */
.mobile-action-bar.hero-pending {
    transform: translateY(100%);
    transition: transform 260ms ease;
}

.mobile-action-bar.hero-pending.is-visible {
    transform: translateY(0);
}

.mobile-action-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    padding: 0.85rem 0.5rem;
    color: var(--color-navy);
    font-size: 0.68rem;
    font-weight: 800;
}

.mobile-action-bar a:not(:last-child) {
    border-right: 1px solid rgba(12, 30, 48, 0.08);
}

/* Call/WhatsApp stay quiet and neutral so "Get Audit" reads as the
   one action that matters, instead of three equally-loud buttons. */
.mobile-action-bar a svg {
    width: 1.3rem;
    height: 1.3rem;
    color: color-mix(in srgb, var(--color-ink) 55%, transparent);
}

.mobile-action-bar a:last-child {
    background: var(--color-orange);
    color: #fff;
    /* The primary CTA sits pinned on screen through the whole visit;
       a slow breathing ring keeps it from disappearing into the rest
       of the static bar without being an obnoxious, attention-stealing
       flash. */
    animation: cta-pulse 2.6s ease-in-out infinite;
}

.mobile-action-bar a:last-child svg {
    color: #fff;
}

@keyframes cta-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(242, 88, 34, 0.38); }
    50% { box-shadow: 0 0 0 7px rgba(242, 88, 34, 0); }
}

@media (max-width: 1023px) {
    body {
        padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    }

    .back-to-top {
        right: 1rem;
        bottom: calc(4.5rem + 0.85rem + env(safe-area-inset-bottom, 0px));
    }
}

/* Tablet / large-phone-landscape range only: just the two always-on
   pills are visible here (the other two are sm:hidden), so a single
   row is enough — force one line and let it scroll horizontally on
   the rare width where even the compact size can't fit both, instead
   of ever wrapping into the old staircase layout again. */
@media (min-width: 640px) and (max-width: 1023px) {
    .home-hero-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.15rem;
        max-width: 100%;
        scrollbar-width: none;
    }

    .home-hero-pills::-webkit-scrollbar {
        display: none;
    }

    .home-hero-pills span {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* Phones: all four pills are visible here, so lay them out as a
   deliberate 2x2 grid (two rows of two) instead of letting a 4-wide
   flex-wrap row break unevenly depending on exact text width. */
@media (max-width: 639px) {
    #heroCarousel [data-reveal],
    .inner-hero [data-reveal] {
        opacity: 1;
        transform: none;
    }

    /* content-visibility: auto with a flat contain-intrinsic-size guess
       was removed here — every homepage section (services grid, stats
       strip, FAQ accordion, etc.) got the same 720px placeholder height
       regardless of its real rendered size, and the browser swapping
       that placeholder for the true height on each section produced a
       large, fully reproducible layout shift (this was the dominant
       CLS source, independent of network/JS timing). */

    .home-hero-pills {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        max-width: 100%;
    }

    /* Compact benefit cards rather than pills: a bit more vertical
       padding and a bolder, slightly bigger icon so they read as a
       deliberate row of capabilities instead of secondary metadata —
       without going dramatically larger. */
    .home-hero-pills span {
        width: 100%;
        justify-content: flex-start;
        border-radius: 0.65rem !important;
        padding: 0.6rem 0.55rem;
        font-size: 0.64rem;
        gap: 0.4rem;
        white-space: nowrap;
        overflow: hidden;
    }

    .home-hero-pills span svg {
        width: 0.95rem;
        height: 0.95rem;
        flex-shrink: 0;
        stroke-width: 2.4;
    }
}

@media (hover: none), (pointer: coarse) {
    .clean-card,
    .clean-card::before,
    .clean-icon,
    .proof-frame,
    .proof-frame::after,
    .capability-panel,
    .capability-icon,
    .problem-row,
    .problem-icon {
        transition: none !important;
    }

    .clean-card:hover,
    .proof-frame:hover,
    .capability-panel:hover,
    .problem-row:hover {
        transform: none !important;
    }

    .clean-card:hover::before,
    .proof-frame:hover::after {
        opacity: 0 !important;
    }
}

.scrolled-header {
    /* !important needed: the header also carries Tailwind's
       bg-white/94 utility class, injected after this stylesheet, so
       it wins equal-specificity ties without this. */
    background-color: #fff !important;
    box-shadow: 0 14px 34px rgba(48, 50, 52, 0.12);
}

/* Subtle film-grain texture for dark photo sections (inner-hero
   banners, footer CTA). Sits above the photo + gradient overlay but
   below the in-flow text content. A dedicated element rather than a
   pseudo-element because .inner-hero already uses ::before/::after. */
.grain-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    opacity: 0.05;
    mix-blend-mode: overlay;
}

.inner-hero::before {
    position: absolute;
    inset: 0;
    z-index: -5;
    content: "";
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 4.5rem 4.5rem;
    mask-image: linear-gradient(90deg, #000, transparent 78%);
    opacity: 0.34;
}

.inner-hero::after {
    position: absolute;
    right: 8%;
    bottom: 12%;
    z-index: -4;
    width: 13rem;
    height: 13rem;
    content: "";
    border: 1px solid rgba(242, 88, 34, 0.32);
    border-radius: 999px;
    pointer-events: none;
    animation: quiet-orbit 12s linear infinite;
}

/* Base bleed scale so the scroll-parallax transform (JS, in
   scripts.js) always has enough overhang to translate against
   without revealing an edge. transform is fully JS-owned once it
   runs; this is just the pre-JS/no-JS fallback state. */
.inner-hero > img,
.cta-parallax-img {
    transform: scale(1.12);
}

@keyframes quiet-orbit {
    from { transform: rotate(0deg) translateX(0.25rem) rotate(0deg); }
    to { transform: rotate(360deg) translateX(0.25rem) rotate(-360deg); }
}

.nav-link {
    position: relative;
    display: inline-flex;
    height: 100%;
    align-items: center;
    transition: color 180ms ease;
}

.nav-link::before {
    position: absolute;
    inset: 6px -12px;
    z-index: -1;
    content: "";
    border-radius: 999px;
    background: var(--color-paper);
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 180ms ease, transform 180ms ease;
}

.nav-link:hover::before,
.nav-link.text-brand-orange::before {
    opacity: 1;
    transform: scale(1);
}

.nav-link::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 4px;
    content: "";
    transform: translateX(-50%);
    border-radius: 999px;
    background: var(--color-orange);
    transition: width 180ms ease;
}

.nav-link:hover {
    color: var(--color-orange);
}

.nav-link:hover::after {
    width: 38px;
}

.text-gradient {
    background: linear-gradient(135deg, var(--color-orange), var(--color-navy) 130%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.mobile-hero-image {
    display: none;
}

.mobile-inner-hero-image {
    display: none;
}

.section-kicker {
    color: var(--color-orange);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.section-title {
    margin-top: 0.5rem;
    color: var(--color-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.025em;
}

.section-copy {
    margin-top: 1rem;
    color: color-mix(in srgb, var(--color-ink) 72%, transparent);
    font-size: 1rem;
    line-height: 1.8;
}

body:not(:has(#home)) .clean-card h3,
body:not(:has(#home)) .clean-card .text-xl,
body:not(:has(#home)) .clean-card .text-2xl {
    font-weight: 650 !important;
    letter-spacing: -0.01em;
}

body:not(:has(#home)) .clean-card p:not(.evidence-number),
body:not(:has(#home)) .proof-frame p,
body:not(:has(#home)) .case-timeline span {
    font-weight: 400;
}

body:not(:has(#home)) label,
body:not(:has(#home)) .clean-card .font-black,
body:not(:has(#home)) .audit-meter,
body:not(:has(#home)) .system-node,
body:not(:has(#home)) .case-timeline strong {
    font-weight: 700 !important;
}

body:not(:has(#home)) .section-kicker,
body:not(:has(#home)) .clean-card .uppercase,
body:not(:has(#home)) .proof-frame .uppercase {
    font-weight: 750 !important;
}

.problem-row {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.25rem;
    align-items: center;
    padding: 1.35rem;
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: 0.55rem;
    background: #fff;
    box-shadow: 0 12px 40px rgba(48, 50, 52, 0.06);
    transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.problem-row:hover {
    transform: translateY(-5px);
    border-color: rgba(242, 88, 34, 0.28);
    background: #fff8f5;
    box-shadow: 0 24px 58px rgba(48, 50, 52, 0.12);
}

.problem-icon {
    display: grid;
    width: 3.75rem;
    height: 3.75rem;
    place-items: center;
    border-radius: 999px;
    background: #e9ecef;
    color: var(--color-orange);
    transition: background 220ms ease, color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.problem-row:hover .problem-icon {
    background: var(--color-orange);
    color: #fff;
    box-shadow: 0 16px 34px rgba(242, 88, 34, 0.22);
    transform: scale(1.04);
}

.problem-arrow {
    transition: transform 180ms ease;
}

.problem-row:hover .problem-arrow {
    transform: translateX(5px);
}

.brand-marquee {
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.brand-marquee-track {
    animation: brand-marquee 16s linear infinite;
}

.brand-marquee:hover .brand-marquee-track {
    animation-play-state: paused;
}

@keyframes brand-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.capability-grid {
    grid-auto-rows: 1fr;
}

.capability-panel {
    display: flex;
    min-height: 360px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.4rem 2.2rem;
    overflow: hidden;
    border: 1px solid rgba(231, 222, 217, 0.82);
    border-radius: 0.55rem;
    background: #fff;
    box-shadow: 0 14px 36px rgba(46, 49, 51, 0.075);
    position: relative;
    text-align: center;
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.capability-panel::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
        radial-gradient(circle at 50% 18%, rgba(242, 88, 34, 0.14), transparent 24%),
        linear-gradient(180deg, rgba(255, 248, 245, 0.86), transparent 56%);
    opacity: 0;
    transition: opacity 220ms ease;
}

.capability-panel::after {
    position: absolute;
    inset: auto 2rem 0;
    height: 4px;
    content: "";
    border-radius: 999px 999px 0 0;
    background: var(--color-orange);
    opacity: 0;
    transform: scaleX(0.5);
    transition: opacity 220ms ease, transform 220ms ease;
}

.capability-panel:hover {
    transform: translateY(-7px);
    border-color: rgba(242, 88, 34, 0.28);
    background: #fff8f5;
    box-shadow: 0 28px 70px rgba(46, 49, 51, 0.14);
}

.capability-panel:hover::before {
    opacity: 1;
}

.capability-panel:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

.capability-icon {
    display: grid;
    position: relative;
    z-index: 1;
    width: 7.5rem;
    height: 7.5rem;
    place-items: center;
    border-radius: 999px;
    background: #e9ecef;
    color: var(--color-orange);
    transition: background 220ms ease, color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.capability-panel:hover .capability-icon {
    background: var(--color-orange);
    color: #fff;
    box-shadow: 0 18px 40px rgba(242, 88, 34, 0.24);
    transform: translateY(-4px) scale(1.03);
}

.capability-panel h3 {
    position: relative;
    z-index: 1;
    margin-top: 1.7rem;
    color: var(--color-navy);
    font-size: 1.52rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.2;
}

.capability-copy {
    position: relative;
    z-index: 1;
    max-width: 20rem;
    margin-top: 1.1rem;
    color: color-mix(in srgb, var(--color-ink) 88%, transparent);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.55;
}

.clean-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(231, 222, 217, 0.82) !important;
    border-radius: 0.55rem !important;
    background: #fff;
    transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.clean-card::before {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
        radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(242, 88, 34, 0.14), transparent 30%),
        linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.78) 44%, transparent 58%);
    opacity: 0;
    transform: translateX(-26%);
    transition: opacity 220ms ease, transform 420ms ease;
}

.clean-card:hover {
    transform: translateY(-5px);
    border-color: rgba(242, 88, 34, 0.28) !important;
    background: #fff8f5;
    box-shadow: 0 24px 58px rgba(48, 50, 52, 0.12);
}

.clean-card:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.clean-card > * {
    position: relative;
    z-index: 1;
}

.clean-icon {
    background: #e9ecef !important;
    color: var(--color-orange);
    transition: background 220ms ease, color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.clean-card:hover .clean-icon {
    background: var(--color-orange) !important;
    color: #fff;
    box-shadow: 0 16px 34px rgba(242, 88, 34, 0.22);
    transform: scale(1.04);
}

.clean-card-dark {
    position: relative;
    overflow: hidden;
    transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.clean-card-dark::before {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(242, 88, 34, 0.26), transparent 34%);
    opacity: 0;
    transition: opacity 220ms ease;
}

.clean-card-dark:hover {
    transform: translateY(-5px);
    border-color: rgba(242, 88, 34, 0.42) !important;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.16);
}

.clean-card-dark:hover::before {
    opacity: 1;
}

.clean-card-dark > * {
    position: relative;
    z-index: 1;
}

/* A small "spotlight" card for embedding an accent box inside a
   section (e.g. the "Audit lens" callout on the homepage). Light
   surface with a soft orange glow, matching .audit-report and
   .strategy-system further down this file. */
.audit-lens-card {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% -12%, rgba(242, 88, 34, 0.1), transparent 46%),
        radial-gradient(circle at 102% 118%, rgba(255, 176, 137, 0.14), transparent 52%),
        #fff;
}

.audit-lens-card span {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.audit-lens-card svg {
    flex: none;
    color: var(--color-orange);
}

.proof-frame {
    position: relative;
    overflow: hidden;
    border-radius: 0.55rem !important;
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.proof-frame::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.22) 48%, transparent 62%);
    opacity: 0;
    transform: translateX(-42%);
    transition: opacity 220ms ease, transform 520ms ease;
}

.proof-frame:hover {
    transform: translateY(-5px);
    border-color: rgba(242, 88, 34, 0.28) !important;
    box-shadow: 0 26px 64px rgba(46, 49, 51, 0.14);
}

.proof-frame:hover::after {
    opacity: 1;
    transform: translateX(38%);
}

.proof-frame img,
.proof-frame iframe {
    transition: transform 420ms ease;
}

.proof-frame:hover img,
.proof-frame:hover iframe {
    transform: scale(1.015);
}

.home-image-caption,
.proof-caption {
    min-height: 45%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-shadow: 0 2px 12px rgba(12, 30, 48, 0.58);
}

.proof-caption {
    background:
        linear-gradient(90deg, rgba(12, 30, 48, 0.96) 0%, rgba(12, 30, 48, 0.84) 58%, rgba(12, 30, 48, 0.58) 100%),
        linear-gradient(0deg, rgba(12, 30, 48, 0.98) 0%, rgba(12, 30, 48, 0.78) 62%, rgba(12, 30, 48, 0) 100%) !important;
}

.industry-tile-scrim {
    background:
        linear-gradient(0deg, rgba(12, 30, 48, 0.96) 0%, rgba(12, 30, 48, 0.58) 44%, rgba(12, 30, 48, 0.16) 100%),
        linear-gradient(90deg, rgba(12, 30, 48, 0.46) 0%, rgba(12, 30, 48, 0.08) 100%) !important;
}

.industry-tile h3 {
    text-shadow: 0 2px 12px rgba(12, 30, 48, 0.62);
}

/* Full-bleed navy sections used as a rhythm break between light
   sections on every page. Same fix as above, applied at section
   scale, and deliberately excludes .inner-hero, which already has
   its own photo + pattern treatment and doesn't need this. */
section.bg-brand-navy:not(.inner-hero) {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 0%, rgba(242, 88, 34, 0.16), transparent 46%),
        radial-gradient(circle at 100% 100%, rgba(255, 176, 137, 0.09), transparent 50%),
        linear-gradient(175deg, #383b3e 0%, var(--color-navy) 40%, #24262a 100%);
}

section.bg-brand-navy:not(.inner-hero)::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 3.75rem 3.75rem;
    mask-image: radial-gradient(circle at 25% 15%, #000, transparent 72%);
}

section.bg-brand-navy:not(.inner-hero) > div {
    position: relative;
    z-index: 1;
}

@media (min-width: 1024px) {
    #home .home-brand-strip > div {
        min-height: 88px;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    #home .home-brand-strip p {
        max-width: 300px;
        font-size: 0.78rem;
        color: var(--color-navy);
    }

    #home .brand-marquee-track {
        gap: 4rem;
        animation-duration: 22s;
    }

    #home .brand-marquee img {
        height: 58px;
        width: 170px;
        opacity: 0.9;
    }

    #home .home-solve-section .lg\:grid-cols-\[0\.85fr_1\.15fr\] {
        grid-template-columns: 1fr 1.08fr;
    }

    #home .home-services-section {
        padding-top: 5.5rem;
        padding-bottom: 5.5rem;
    }

    #home .home-services-section .capability-grid {
        position: relative;
        gap: 1px;
        padding: 1px;
        border: 1px solid rgba(231, 222, 217, 0.9);
        border-radius: 0.65rem;
        background: linear-gradient(135deg, rgba(242, 88, 34, 0.28), rgba(231, 222, 217, 0.8), rgba(126, 231, 223, 0.24));
        box-shadow: 0 22px 56px rgba(46, 49, 51, 0.08);
    }

    #home .home-services-section .capability-panel {
        min-height: 285px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    #home .home-services-section .capability-panel:nth-child(1) {
        border-radius: 0.55rem 0 0 0;
    }

    #home .home-services-section .capability-panel:nth-child(3) {
        border-radius: 0 0.55rem 0 0;
    }

    #home .home-services-section .capability-panel:nth-child(4) {
        border-radius: 0 0 0 0.55rem;
    }

    #home .home-services-section .capability-panel:nth-child(6) {
        border-radius: 0 0 0.55rem 0;
    }

    #home .home-services-section .capability-icon {
        width: 5.25rem;
        height: 5.25rem;
    }

    #home .home-growth-engine-section {
        padding-top: 6rem;
        padding-bottom: 6.5rem;
    }

    #home .home-growth-engine-section .growth-engine {
        padding: 1.6rem;
        gap: 1.4rem;
        transform: scale(1.03);
        transform-origin: center;
    }

    #home .home-process-section {
        padding-top: 4.25rem;
        padding-bottom: 4.75rem;
    }

    #home .home-process-section .process-card {
        min-height: 16.5rem;
        padding: 2rem 1.7rem;
    }

    #home .home-work-section {
        padding-top: 5.5rem;
        padding-bottom: 5.75rem;
    }

    #home .home-work-section article {
        grid-template-columns: minmax(0, 1fr) minmax(24rem, 0.9fr);
    }

    #home .home-work-section h3 {
        max-width: 620px;
        font-size: clamp(2rem, 2.7vw, 2.75rem);
        line-height: 1.04;
    }

    #home .home-work-section .home-case-summary {
        max-width: 38rem;
    }

    #home .home-work-section .featured-case-chart {
        min-height: 100%;
        border-left: 1px solid var(--color-line);
    }

    #home .home-industries-section {
        padding-top: 4rem;
        padding-bottom: 4.5rem;
    }

    #home .home-industries-section .industry-mosaic {
        grid-auto-rows: minmax(10.5rem, auto);
    }

    #home .home-industries-section .industry-tile:first-child {
        min-height: 25rem;
    }

    #home .home-client-proof-section .grid.lg\:grid-cols-3 {
        grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
        align-items: stretch;
    }

    #home .home-featured-story {
        grid-row: span 2;
    }

    #home .home-featured-story > img {
        height: 23rem;
    }

    #home .home-featured-story .text-5xl {
        font-size: 4.5rem;
    }

    #home .home-client-proof-section .home-testimonial-card:not(.home-featured-story) {
        display: grid;
        grid-template-columns: 10rem 1fr;
    }

    #home .home-client-proof-section .home-testimonial-card:not(.home-featured-story) > img {
        height: 100%;
        min-height: 14rem;
    }

    #home .home-client-proof-section .home-testimonial-card:not(.home-featured-story) > div {
        padding: 1.35rem;
    }

    #home .home-client-proof-section .home-testimonial-card:not(.home-featured-story) .text-\[16px\] {
        display: none;
    }

    #home .home-audit-section .audit-report {
        padding: 2rem;
        border-radius: 0.35rem;
        box-shadow: none;
    }

    #home .home-audit-section .audit-score {
        width: 5.5rem;
        height: 5.5rem;
    }

    #home #faq > div > div:first-child {
        padding-right: 2rem;
    }

    #home #faq .section-copy {
        max-width: 22rem;
    }

    body:not(:has(#home)) .inner-hero .min-h-\[520px\],
    body:not(:has(#home)) .inner-hero .min-h-\[540px\],
    body:not(:has(#home)) .inner-hero .min-h-\[560px\] {
        min-height: calc(100vh - 72px);
        min-height: calc(100svh - 72px);
    }

    .services-hero .min-h-\[560px\],
    .hero-with-actions .min-h-\[520px\],
    .hero-with-actions .min-h-\[540px\],
    .hero-with-actions .min-h-\[560px\] {
        min-height: 680px;
        padding-top: 4.25rem;
        padding-bottom: 5rem;
    }

    .services-hero h1 {
        max-width: 48rem;
        font-size: clamp(3.75rem, 5.2vw, 4.35rem) !important;
        line-height: 1.02 !important;
    }

    .services-hero h1 + p {
        margin-top: 1.4rem;
    }

    .services-hero h1 + p + div {
        margin-top: 1.65rem;
    }
}

.growth-engine {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--color-line);
    border-radius: 0.55rem;
    background: var(--color-paper);
    box-shadow: 0 18px 50px rgba(48, 50, 52, 0.08);
}

.engine-node {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 8.25rem;
    padding: 1rem;
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: 0.5rem;
    background: #fff;
    color: var(--color-navy);
    font-weight: 900;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    box-shadow: 0 10px 26px rgba(48, 50, 52, 0.06), inset 0 0 0 1px rgba(242, 88, 34, 0.06);
}

.engine-node::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -35%;
    width: 30%;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(255, 176, 137, 0.34), transparent);
    animation: engine-flow 3.8s ease-in-out infinite;
}

.engine-node:nth-child(2)::after { animation-delay: 0.25s; }
.engine-node:nth-child(3)::after { animation-delay: 0.5s; }
.engine-node:nth-child(4)::after { animation-delay: 0.75s; }
.engine-node:nth-child(5)::after { animation-delay: 1s; }
.engine-node:nth-child(6)::after { animation-delay: 1.25s; }

.engine-dot {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    place-items: center;
    border-radius: 999px;
    background: var(--color-orange);
    font-size: 0.8rem;
    color: #fff;
}

@keyframes engine-flow {
    0% { transform: translateX(0); opacity: 0; }
    35% { opacity: 1; }
    100% { transform: translateX(520%); opacity: 0; }
}

.evidence-panel {
    display: grid;
    overflow: hidden;
    border: 1px solid rgba(231, 222, 217, 0.82);
    border-radius: 0.55rem;
    background:
        linear-gradient(180deg, rgba(255, 248, 245, 0.45), transparent 42%),
        #fff;
    box-shadow: 0 14px 36px rgba(46, 49, 51, 0.055);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.evidence-panel:hover {
    transform: translateY(-3px);
    border-color: rgba(242, 88, 34, 0.22);
    box-shadow: 0 16px 40px rgba(30, 35, 40, 0.07);
}

.evidence-item {
    min-height: 205px;
    padding: 1.25rem 1.35rem;
    border-bottom: 1px solid #eee8e4;
    transition: background 220ms ease;
}

.evidence-item:hover {
    background: #fff8f5;
}

.evidence-item:last-child {
    border-bottom: 0;
}

.evidence-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.evidence-top span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: color-mix(in srgb, var(--color-ink) 54%, transparent);
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.evidence-top svg {
    color: var(--color-orange);
}

.evidence-number {
    margin-top: 1rem;
    color: var(--color-navy);
    font-size: clamp(3.6rem, 7vw, 4.15rem);
    font-weight: 900;
    line-height: 0.92;
    letter-spacing: -0.045em;
}

.evidence-label {
    margin-top: 0.4rem;
    color: var(--color-navy);
    font-size: 0.95rem;
    font-weight: 800;
}

.evidence-visual {
    margin-top: 1rem;
    height: 2.2rem;
}

.evidence-bars {
    display: flex;
    align-items: end;
    gap: 0.45rem;
}

.evidence-bars span {
    width: 0.55rem;
    border-radius: 0.25rem 0.25rem 0 0;
    background: linear-gradient(180deg, var(--color-aqua), var(--color-orange));
}

.evidence-dots {
    display: flex;
    align-items: center;
    gap: 0.38rem;
}

.evidence-dots span {
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 999px;
    background: var(--color-orange);
    opacity: 0.28;
}

.evidence-dots span:nth-child(3n + 1),
.evidence-dots span:nth-child(7) {
    opacity: 0.95;
}

.evidence-line {
    position: relative;
}

.evidence-line::before {
    position: absolute;
    left: 0;
    right: 0.6rem;
    bottom: 0.45rem;
    height: 2px;
    content: "";
    background: color-mix(in srgb, var(--color-ink) 18%, transparent);
}

.evidence-line svg {
    position: absolute;
    inset: 0 0.6rem 0.45rem 0;
    width: calc(100% - 0.6rem);
    height: calc(100% - 0.45rem);
    overflow: visible;
}

.evidence-line polyline {
    fill: none;
    stroke: var(--color-orange);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.evidence-meter {
    display: grid;
    align-items: center;
}

.evidence-meter span {
    position: relative;
    display: block;
    height: 0.55rem;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-ink) 12%, transparent);
}

.evidence-meter b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-orange), var(--color-aqua));
}

.evidence-meter span::after {
    position: absolute;
    top: 50%;
    left: calc(92% - 0.45rem);
    width: 0.9rem;
    height: 0.9rem;
    content: "";
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--color-orange);
    transform: translateY(-50%);
    box-shadow: 0 0 0 1px rgba(242, 88, 34, 0.28);
}

.evidence-note {
    margin-top: 0.4rem;
    color: color-mix(in srgb, var(--color-ink) 58%, transparent);
    font-size: 0.82rem;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .evidence-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .evidence-item:nth-child(odd) {
        border-right: 1px solid #eee8e4;
    }

    .evidence-item:nth-child(3) {
        border-bottom: 0;
    }
}

@media (min-width: 1024px) {
    .evidence-panel {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .evidence-item {
        border-right: 1px solid #eee8e4;
        border-bottom: 0;
    }

    .evidence-item:nth-child(4) {
        border-right: 0;
    }

    .contact-page .contact-audit-card {
        min-height: 12.25rem;
        padding: 1.35rem;
    }

    .contact-page .contact-direct-section {
        padding-top: 4.5rem;
        padding-bottom: 4.75rem;
    }

    .contact-page .contact-direct-section .mb-10 {
        margin-bottom: 2rem;
    }

    .contact-page .contact-direct-card {
        min-height: 11rem;
        padding: 1.45rem;
    }

    .contact-page .contact-direct-card h3 {
        margin-top: 1rem;
    }

    .resources-page .resource-card {
        min-height: 18rem;
    }

    .resources-page .resource-card-featured {
        grid-column: span 2;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.78fr);
        gap: 2rem;
        align-items: end;
        min-height: 22rem;
    }

    .resources-page .resource-card-featured h3 {
        max-width: 34rem;
        font-size: clamp(2rem, 3vw, 3rem);
        line-height: 1.05;
    }

    .resources-page .resource-card-featured .resource-copy {
        max-width: 34rem;
    }

    .resources-page .resource-feature-visual {
        grid-template-columns: 1fr;
    }

    .resources-page .resource-feature-visual svg {
        justify-self: center;
        transform: rotate(90deg);
    }
}

.process-pipeline {
    position: relative;
}

.process-pipeline::before {
    position: absolute;
    top: 4.35rem;
    left: 8%;
    right: 8%;
    height: 7px;
    content: "";
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-orange), #ffb089, var(--color-orange));
    background-size: 200% 100%;
    animation: process-flow 4s linear infinite;
}

.process-card {
    z-index: 1;
    min-height: 19rem;
    border-radius: 0.55rem;
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
}

.process-card:hover {
    transform: translateY(-6px);
    border-color: rgba(242, 88, 34, 0.32);
    background: #fff8f5;
    box-shadow: 0 24px 58px rgba(48, 50, 52, 0.12);
}

.process-card:nth-child(even) {
    background: #fff;
}

.process-card:nth-child(even):hover {
    background: #fff8f5;
}

.process-node {
    outline: 8px solid #fff;
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.process-card:hover .process-node {
    transform: scale(1.05);
}

@keyframes process-flow {
    from { background-position: 0% 50%; }
    to { background-position: 200% 50%; }
}

.case-chart {
    position: relative;
    isolation: isolate;
    height: clamp(320px, 34vw, 380px);
    align-items: end;
    overflow: hidden;
    background-color: var(--color-paper);
    background-image:
        linear-gradient(rgba(46, 49, 51, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(46, 49, 51, 0.06) 1px, transparent 1px);
    background-size: 100% 25%, 25% 100%;
}

.featured-case-chart {
    height: auto;
    min-height: 100%;
}

.case-chart::before {
    position: absolute;
    inset: auto 2rem 2rem;
    height: 2px;
    content: "";
    border-radius: 999px;
    background: rgba(46, 49, 51, 0.2);
}

.case-chart::after {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    content: attr(data-chart-label);
    color: color-mix(in srgb, var(--color-ink) 55%, transparent);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.chart-bar {
    position: relative;
    z-index: 1;
    display: block;
    flex: 1;
    min-width: 1.75rem;
    min-height: 2rem;
    border-radius: 0.5rem 0.5rem 0 0;
    background: linear-gradient(180deg, #7ee7df 0%, var(--color-orange) 78%);
    box-shadow: 0 0 0 1px rgba(242, 88, 34, 0.18), 0 14px 30px rgba(242, 88, 34, 0.2);
    transform-origin: bottom;
}

/* Bars grow in only once the case-study card scrolls into view (the
   data-reveal/is-visible toggle in scripts.js), instead of animating
   immediately on page load where it finishes long before anyone
   scrolls down to see it. */
.is-visible .chart-bar {
    animation: chart-grow 900ms ease both;
}

.chart-bar::after {
    position: absolute;
    inset: 0;
    content: "";
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.34), transparent 46%);
    opacity: 0.42;
}

/* Real value label above each bar, turning a row of ascending shapes
   into an actual readable chart. Positioned to stay within the
   chart's own padding so it never gets clipped by overflow:hidden. */
.chart-bar b {
    position: absolute;
    bottom: 100%;
    left: 50%;
    z-index: 2;
    margin-bottom: 0.35rem;
    color: var(--color-navy);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    white-space: nowrap;
    transform: translateX(-50%);
}

.chart-bar small {
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 50%;
    color: color-mix(in srgb, var(--color-ink) 58%, transparent);
    font-size: 0.7rem;
    font-weight: 800;
    transform: translateX(-50%);
}

.chart-bar:nth-child(2) { animation-delay: 90ms; }
.chart-bar:nth-child(3) { animation-delay: 180ms; }
.chart-bar:nth-child(4) { animation-delay: 270ms; }
.chart-bar:nth-child(5) { animation-delay: 360ms; }
.chart-bar:nth-child(6) { animation-delay: 450ms; }
.chart-bar:nth-child(7) { animation-delay: 540ms; }

@keyframes chart-grow {
    from { transform: scaleY(0.2); opacity: 0.4; }
    to { transform: scaleY(1); opacity: 1; }
}

.home-feature-card {
    border: 1px solid rgba(231, 222, 217, 0.75);
    transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.home-feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(242, 88, 34, 0.28);
    background: #fff8f5;
    box-shadow: 0 22px 54px rgba(48, 50, 52, 0.1);
}

.home-feature-card > span {
    background: #e9ecef;
    transition: background 220ms ease, color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.home-feature-card:hover > span {
    background: var(--color-orange);
    color: #fff;
    box-shadow: 0 16px 34px rgba(242, 88, 34, 0.22);
    transform: scale(1.04);
}

.case-timeline {
    display: grid;
    gap: 0.75rem;
}

.case-timeline div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 0.45rem;
    background: var(--color-paper);
}

.case-timeline strong {
    color: var(--color-orange);
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.case-timeline span {
    color: color-mix(in srgb, var(--color-ink) 68%, transparent);
    font-size: 0.86rem;
    font-weight: 800;
}

.case-metric-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.case-metric-icon {
    flex-shrink: 0;
    color: var(--color-orange);
}

.case-studies-page .case-result-card {
    color: inherit;
    text-decoration: none;
}

.case-studies-page .case-result-card img,
.case-studies-page .case-card-link svg {
    transition: transform 260ms ease;
}

.case-studies-page .case-result-card:hover img {
    transform: scale(1.035);
}

.case-studies-page .case-result-card:hover .case-card-link svg {
    transform: translateX(4px);
}

.case-studies-page .case-context {
    line-height: 1.45;
}

.case-studies-page .case-chart::after {
    content: attr(data-chart-label);
}

.more-results-strip {
    border-radius: 0.55rem;
}

.more-results-strip article {
    transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

.more-results-strip article:hover {
    transform: translateY(-4px);
    border-color: rgba(242, 88, 34, 0.28);
    background: #fff8f5;
}

.contact-audit-card h3,
.contact-direct-card h3 {
    letter-spacing: 0;
}

.contact-audit-card p {
    font-weight: 760;
}

.resources-page .resources-hero-overlay {
    background: linear-gradient(90deg, rgba(12, 30, 48, 0.98) 0%, rgba(12, 30, 48, 0.9) 46%, rgba(12, 30, 48, 0.24) 100%) !important;
}

.resource-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.resource-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.resource-card.is-filtered-out {
    display: none;
}

.resource-card .resource-link svg {
    transition: transform 180ms ease;
}

.resource-card:hover .resource-link svg {
    transform: translateX(4px);
}

.resource-card-featured {
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0%, rgba(242, 88, 34, 0.12), transparent 38%),
        #fff8f5;
}

.resource-feature-visual {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.65rem;
    align-items: center;
    align-self: end;
}

.resource-feature-visual span {
    display: grid;
    min-height: 3.15rem;
    place-items: center;
    border: 1px solid rgba(242, 88, 34, 0.18);
    border-radius: 0.45rem;
    background: #fff;
    color: var(--color-navy);
    font-size: 0.78rem;
    font-weight: 900;
}

.resource-feature-visual svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-orange);
}

.audit-health {
    margin: -0.35rem 0 1.1rem;
    color: var(--color-navy);
    font-size: 0.95rem;
    font-weight: 900;
}

.audit-priority {
    margin-top: 1rem;
    border-top: 1px solid var(--color-line);
    padding-top: 1rem;
    color: color-mix(in srgb, var(--color-ink) 70%, transparent);
    font-size: 0.9rem;
    font-weight: 800;
}

.audit-priority strong {
    color: var(--color-orange);
}

.industry-mosaic {
    grid-auto-rows: minmax(13rem, auto);
}

.industry-mosaic .industry-tile:first-child {
    min-height: 31rem;
}

.industry-tile {
    box-shadow: 0 14px 36px rgba(46, 49, 51, 0.075);
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.industry-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 64px rgba(46, 49, 51, 0.16);
}

.home-testimonial-card {
    position: relative;
    transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.home-testimonial-card::before {
    position: absolute;
    top: 0.25rem;
    right: 1.25rem;
    z-index: 0;
    content: "\201C";
    color: rgba(242, 88, 34, 0.12);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 5.5rem;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

.home-testimonial-card > * {
    position: relative;
    z-index: 1;
}

.home-testimonial-card:hover {
    transform: translateY(-6px);
    border-color: rgba(242, 88, 34, 0.28);
    background: #fff8f5;
    box-shadow: 0 26px 64px rgba(46, 49, 51, 0.13);
}

.strategy-system {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
    padding: 1.5rem;
    border: 1px solid var(--color-line);
    border-radius: 0.5rem;
    background:
        radial-gradient(circle at 50% 50%, rgba(242, 88, 34, 0.08), transparent 42%),
        var(--color-paper);
    box-shadow: 0 18px 50px rgba(48, 50, 52, 0.08);
}

.system-node,
.system-result {
    display: grid;
    min-height: 8rem;
    place-items: center;
    border-radius: 0.5rem;
    text-align: center;
    font-weight: 900;
}

.system-node {
    border: 1px solid var(--color-line);
    background: #fff;
    color: var(--color-navy);
    position: relative;
    z-index: 1;
    transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.system-node:hover {
    transform: translateY(-4px);
    border-color: rgba(242, 88, 34, 0.42);
    background: #fff8f5;
    box-shadow: 0 16px 36px rgba(48, 50, 52, 0.12);
}

.system-node svg {
    width: 2rem;
    height: 2rem;
    color: var(--color-navy);
    transition: color 220ms ease, transform 220ms ease;
}

.system-node:hover svg {
    color: var(--color-orange);
    transform: scale(1.08);
}

.system-node span {
    margin-top: 0.5rem;
}

.system-result {
    grid-column: 1 / -1;
    min-height: 6rem;
    background: var(--color-orange);
    color: #fff;
    font-size: 1.6rem;
    position: relative;
    z-index: 1;
}

.trust-extra.hidden {
    display: none;
}

.service-group-card {
    min-height: 100%;
}

.service-group-number {
    position: absolute;
    right: 1rem;
    bottom: -0.45rem;
    color: rgba(242, 88, 34, 0.08);
    font-size: clamp(5.5rem, 8vw, 7.5rem);
    font-weight: 900;
    line-height: 0.78;
    pointer-events: none;
}

.services-strategy-system {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
}

.services-strategy-system .system-node {
    min-height: 7.25rem;
}

.system-arrow,
.system-drop {
    display: grid;
    place-items: center;
    color: var(--color-orange);
}

.system-arrow svg,
.system-drop svg {
    width: 1.35rem;
    height: 1.35rem;
}

.services-strategy-system .system-result {
    grid-column: 1 / -1;
}

.system-drop {
    grid-column: 1 / -1;
    margin: -0.25rem 0;
}

.solutions-page .solutions-hero-overlay {
    background: linear-gradient(90deg, rgba(37, 39, 41, 0.98) 0%, rgba(37, 39, 41, 0.94) 44%, rgba(37, 39, 41, 0.52) 64%, rgba(37, 39, 41, 0.14) 100%);
}

.solution-problem-card {
    grid-template-columns: 1fr auto;
    align-items: start;
}

.solution-problem-card .problem-icon {
    grid-column: 2;
    grid-row: 1;
    width: 3rem;
    height: 3rem;
    background: #fff7ed;
}

.solution-problem-card > div {
    grid-column: 1;
}

.solution-problem-card .problem-label {
    display: inline-block;
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    background: #fff1eb;
    color: var(--color-orange);
    letter-spacing: 0.16em;
}

.solution-problem-card .problem-solution {
    margin-top: 0.8rem;
    font-size: clamp(1.65rem, 2.35vw, 2rem);
    line-height: 1.08;
}

.solutions-engine {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    padding: 0.8rem;
}

.solutions-engine .engine-node {
    min-height: 7rem;
    border-radius: 0;
    border-right: 0;
}

.solutions-engine .engine-node:first-child {
    border-radius: 0.45rem 0 0 0.45rem;
}

.solutions-engine .engine-node:last-child {
    border-right: 1px solid var(--color-line);
    border-radius: 0 0.45rem 0.45rem 0;
}

.solutions-engine .engine-node:not(:last-child)::before {
    position: absolute;
    top: 50%;
    right: -0.45rem;
    z-index: 3;
    width: 0.8rem;
    height: 0.8rem;
    content: "";
    border-top: 2px solid var(--color-orange);
    border-right: 2px solid var(--color-orange);
    background: #fff;
    transform: translateY(-50%) rotate(45deg);
}

.solutions-engine .engine-node::after {
    display: none;
}

.solutions-pathway-intro {
    padding-right: 2rem;
}

.pathway-card {
    padding: 1.35rem 1.5rem !important;
}

.pathway-card summary {
    position: relative;
    display: grid;
    grid-template-columns: minmax(5.5rem, auto) 1fr auto;
    gap: 1rem;
    align-items: center;
    list-style: none;
    cursor: default;
}

.pathway-card summary::-webkit-details-marker {
    display: none;
}

.pathway-number {
    color: rgba(242, 88, 34, 0.18);
    font-size: clamp(3.2rem, 6vw, 5rem);
    font-weight: 900;
    line-height: 0.8;
}

.pathway-title {
    color: var(--color-navy);
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.1;
}

.pathway-plus {
    display: none;
    width: 1.15rem;
    height: 1.15rem;
    color: var(--color-orange);
    transition: transform 180ms ease;
}

.pathway-card[open] .pathway-plus {
    transform: rotate(45deg);
}

.pathway-copy {
    margin-left: calc(5.5rem + 1rem);
}

.pathway-card:not([open]) .pathway-copy {
    display: block;
}

.success-video-section .proof-frame {
    transform: scale(1.04);
    transform-origin: center right;
}

.success-context-strip {
    align-items: stretch;
}

.success-context-strip > div {
    padding: 0.75rem 1rem;
    border-radius: 0.45rem;
    background: var(--color-paper);
}

.story-outcome-card {
    border-color: rgba(242, 88, 34, 0.28) !important;
    background: #fff8f5;
}

.story-outcome-metrics strong {
    display: block;
    color: var(--color-orange);
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 0.95;
}

.story-outcome-metrics span {
    display: block;
    margin-top: 0.25rem;
    color: color-mix(in srgb, var(--color-ink) 64%, transparent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.success-growth-system {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
}

.success-growth-system .system-node {
    min-height: 7.25rem;
}

.success-growth-system .system-result {
    grid-column: 1 / -1;
}

.about-principle-card {
    padding: 1.3rem !important;
}

.about-principle-card .clean-icon {
    width: 2.75rem;
    height: 2.75rem;
}

.about-principle-card h3 {
    margin-top: 1rem !important;
}

.about-principle-card p {
    line-height: 1.6 !important;
}

.about-page .evidence-note {
    max-width: 13rem;
}

.about-timeline {
    position: relative;
    gap: 0;
}

.about-timeline::before {
    position: absolute;
    top: 50%;
    left: 1.25rem;
    right: 1.25rem;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, rgba(242, 88, 34, 0.2), var(--color-orange), rgba(242, 88, 34, 0.2));
}

.about-timeline div {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 3.75rem minmax(0, 1fr);
    justify-content: start;
    gap: 0.9rem;
}

.about-timeline b {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-navy);
    font-size: 1rem;
}

.audit-report {
    position: relative;
    overflow: hidden;
    padding: 1.5rem;
    border: 1px solid var(--color-line);
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: 0 24px 60px rgba(48, 50, 52, 0.12);
}

.audit-report::before {
    position: absolute;
    top: -30%;
    right: -16%;
    width: 14rem;
    height: 14rem;
    content: "";
    border-radius: 999px;
    background: radial-gradient(circle, rgba(242, 88, 34, 0.14), transparent 62%);
    pointer-events: none;
}

.audit-report > * {
    position: relative;
    z-index: 1;
}

.audit-report-head,
.audit-meter {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
}

.audit-report-head {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-line);
    font-weight: 900;
    color: var(--color-navy);
}

/* Circular score ring, driven by a --score custom property (0-100)
   set inline from the same number the "Score NN/100" text already
   used. conic-gradient sweeps to that percentage, punched into a
   ring by the ::before disc, reading as a live gauge rather than a
   static label. */
.audit-score {
    --score: 0;
    position: relative;
    display: grid;
    width: 4.5rem;
    height: 4.5rem;
    place-items: center;
    border-radius: 999px;
    background: conic-gradient(var(--color-orange) calc(var(--score) * 1%), color-mix(in srgb, var(--color-ink) 12%, transparent) 0);
}

.audit-score::before {
    position: absolute;
    inset: 5px;
    content: "";
    border-radius: inherit;
    background: #fff;
}

.audit-score span {
    position: relative;
    z-index: 1;
    color: var(--color-navy);
    font-size: 1.2rem;
    line-height: 1;
}

.audit-score small {
    display: block;
    margin-top: 0.15rem;
    color: color-mix(in srgb, var(--color-ink) 55%, transparent);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.audit-meter {
    grid-template-columns: 7rem 1fr 3rem;
    margin-top: 1.1rem;
    color: var(--color-navy);
    font-size: 0.9rem;
    font-weight: 900;
}

.audit-meter div {
    height: 0.65rem;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-ink) 10%, transparent);
}

.audit-meter b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-aqua), var(--color-orange));
    background-size: 180% 100%;
    animation: meter-flow 3.8s ease-in-out infinite;
}

/* Threshold read-out: a weak score reads as a paler, less confident
   fill; a strong score gets a deeper, fully-saturated fill with a
   small glow. Same two-tone family throughout, just intensity. */
.audit-meter--weak b {
    background: linear-gradient(90deg, #ffd9c2, var(--color-aqua));
}

.audit-meter--strong b {
    background: linear-gradient(90deg, var(--color-orange), #d84a1a);
    box-shadow: 0 0 12px rgba(242, 88, 34, 0.4);
}

.audit-meter--strong strong {
    color: var(--color-orange);
}

@keyframes meter-flow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.faq-item .faq-question svg {
    transition: transform 180ms ease;
}

.faq-item {
    transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.faq-item:hover,
.faq-item.is-open {
    border-color: rgba(242, 88, 34, 0.24);
    background: #fff8f5;
    box-shadow: 0 14px 36px rgba(46, 49, 51, 0.07);
}

.faq-item.is-open .faq-question svg {
    transform: rotate(180deg);
}

/* Opacity-only: a translateY component here would move the element's
   actual painted position, which the browser's Layout Instability API
   registers as a real layout shift on every reveal — this was the
   dominant, 100% reproducible source of the page's CLS score. */
[data-reveal] {
    opacity: 0;
    transition: opacity 650ms ease;
}

[data-reveal].is-visible {
    opacity: 1;
}

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

@media (max-width: 767px) {
    header .h-\[72px\] {
        height: 4.25rem;
    }

    header img {
        max-height: 3.2rem;
    }

    section {
        scroll-margin-top: 5rem;
    }

    #home > section:not(#heroCarousel):not(.border-y) {
        padding-top: 2.75rem !important;
        padding-bottom: 2.75rem !important;
    }

    /* Mobile-only reflow: pure visual reorder via flex `order`, no
       markup change, desktop untouched. Content otherwise identical —
       this just brings proof and the case study forward so the visitor
       hits promise -> evidence within the first couple of screens
       instead of scrolling through several explanatory sections
       first. nth-child targets are positional (section order in the
       DOM), not classes, since several sections here share no id. */
    #home {
        display: flex;
        flex-direction: column;
    }

    #home > section:nth-child(1) { order: 1; }  /* Hero */
    #home > section:nth-child(6) { order: 2; }  /* Proof dashboard — moved up */
    #home > section:nth-child(2) { order: 3; }  /* Trusted brand strip */
    #home > section:nth-child(3) { order: 4; }  /* What we solve */
    #home > section:nth-child(4) { order: 5; }  /* Core services */
    #home > section:nth-child(9) { order: 6; }  /* Featured case study — moved up */
    #home > section:nth-child(5) { order: 7; }  /* Growth engine (how it works) */
    #home > section:nth-child(7) { order: 8; }  /* Why 3rdmatrix */
    #home > section:nth-child(10) { order: 9; } /* Industries we grow */
    #home > section:nth-child(8) { order: 10; } /* Process (Discover -> Scale) */
    #home > section:nth-child(11) { order: 11; } /* Technology + strategy */
    #home > section:nth-child(12) { order: 12; } /* Client testimonials */
    #home > section:nth-child(13) { order: 13; } /* Free growth audit */
    #home > section:nth-child(14) { order: 14; } /* FAQ */

    body:not(:has(#home)) main > section:not(.inner-hero) {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }

    #heroCarousel {
        min-height: min(calc(100svh - 4.25rem), 46rem);
        background: #fff;
    }

    #heroCarousel .hero-slide {
        display: none;
    }

    #heroCarousel .mobile-hero-image {
        display: block;
        height: 100%;
        object-position: center 31%;
    }

    /* Strong, deliberate fade over the top-left text zone (where the
       heading/copy always sit), easing off toward the bottom-right so
       the analytics photo stays visible and identifiable in the
       corner instead of getting fully washed out edge to edge. */
    #heroCarousel > div:nth-child(2) {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.9) 30%, rgba(255, 255, 255, 0.55) 62%, rgba(255, 255, 255, 0.28) 100%) !important;
    }

    #heroCarousel .min-h-\[660px\] {
        min-height: min(calc(100svh - 4.25rem), 46rem);
        align-items: start;
        padding-top: 0.75rem;
        padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
    }

    .home-hero-content {
        max-width: 100%;
        padding-top: 0.25rem;
    }

    .inner-hero .min-h-\[520px\],
    .inner-hero .min-h-\[540px\],
    .inner-hero .min-h-\[560px\] {
        min-height: calc(100svh - 4.25rem);
        align-items: center;
        padding-top: 3.75rem;
        padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
    }

    .inner-hero > img {
        object-position: center top;
    }

    .inner-hero.has-mobile-hero > img:not(.mobile-inner-hero-image) {
        display: none;
    }

    .inner-hero.has-mobile-hero .mobile-inner-hero-image {
        display: block;
        object-position: center top;
    }

    .inner-hero .bg-gradient-to-r {
        background:
            linear-gradient(90deg, rgba(12, 30, 48, 0.9) 0%, rgba(12, 30, 48, 0.76) 58%, rgba(12, 30, 48, 0.38) 100%),
            linear-gradient(180deg, rgba(12, 30, 48, 0.18) 0%, rgba(12, 30, 48, 0.7) 62%, rgba(12, 30, 48, 0.96) 100%) !important;
    }

    .inner-hero h1 {
        max-width: 100%;
        font-size: clamp(1.9rem, 8.8vw, 2.35rem) !important;
        line-height: 1.06 !important;
        letter-spacing: -0.02em;
        hyphens: none;
        overflow-wrap: normal;
        word-break: normal;
    }

    .inner-hero p {
        max-width: 100%;
    }

    .inner-hero .text-lg {
        font-size: 0.95rem !important;
        line-height: 1.65 !important;
    }

    .inner-hero a {
        width: 100%;
        min-height: 3.25rem;
        padding-right: 1rem;
        padding-left: 1rem;
        text-align: center;
    }

    #home h1 {
        font-size: clamp(1.92rem, 9vw, 2.28rem) !important;
        line-height: 1.14 !important;
        max-width: 100%;
        overflow-wrap: normal;
        text-wrap: balance;
    }

    .home-hero-content > p {
        margin-top: 0.7rem;
        max-width: 100%;
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        color: rgba(46, 49, 51, 0.88) !important;
    }

    .home-hero-actions {
        margin-top: 0.85rem;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .home-hero-actions a {
        width: 100%;
        height: 3rem;
        min-height: 3rem;
        padding-right: 0.7rem;
        padding-left: 0.7rem;
        font-size: 0.8rem !important;
        text-align: center;
    }

    /* Same border-width and now the same explicit height, but the
       primary's much bigger glow shadow still read as visually taller
       than the secondary's flat outline — tone it down so the two
       buttons sit at the same visual weight, not just the same box. */
    .home-hero-actions a:first-child {
        box-shadow: 0 6px 14px rgba(242, 88, 34, 0.16);
    }

    /* The secondary "Results" button is a near-invisible frosted
       ghost button against the busy background photo on desktop;
       on mobile it needs to read clearly as a real, tappable button —
       a thinner border than desktop's border-2 keeps it a hairline
       instead of one more heavy outline on an already border-heavy
       screen. */
    .home-hero-actions a:last-child {
        background: #fff !important;
        border-width: 1px !important;
        border-color: #d8dee6 !important;
        color: var(--color-navy) !important;
        box-shadow: 0 4px 10px rgba(12, 30, 48, 0.06);
    }

    #heroCarousel [data-hero-dot] {
        display: none;
    }

    /* Soft blurred glow orbs behind the hero copy, mobile only, for a
       bit of depth against the photo background. Pure decoration:
       pointer-events off, and they only exist inside this query since
       the pseudo-elements have no content/positioning outside it.
       #heroCarousel already carries Tailwind's `isolate` class, so
       these sort correctly against the -z-20/-z-10 photo layers. */
    #heroCarousel::before,
    #heroCarousel::after {
        position: absolute;
        z-index: 0;
        content: "";
        border-radius: 999px;
        filter: blur(38px);
        pointer-events: none;
    }

    #heroCarousel::before {
        top: -3rem;
        right: -3rem;
        width: 11rem;
        height: 11rem;
        background: radial-gradient(circle, rgba(242, 88, 34, 0.28), transparent 70%);
    }

    #heroCarousel::after {
        bottom: 8%;
        left: -3rem;
        width: 13rem;
        height: 13rem;
        background: radial-gradient(circle, rgba(126, 231, 223, 0.3), transparent 70%);
    }

    .home-hero-content {
        position: relative;
        z-index: 1;
    }

    /* One unified proof panel instead of three separate boxed cards —
       three identical bordered boxes read as generic/template-like;
       a single panel with quiet internal dividers reads as one piece
       of enterprise-grade evidence instead of a row of UI components. */
    .home-hero-stats {
        align-items: stretch;
        overflow: hidden;
        border-radius: 0.85rem;
        background: rgba(255, 255, 255, 0.82);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(12, 30, 48, 0.07);
        box-shadow: 0 10px 26px rgba(12, 30, 48, 0.07);
    }

    /* "Growth partners" wraps to two lines while the other two labels
       don't, so under plain grid stretch the cells ended up the same
       outer height but with the shorter labels just floating near the
       top with dead space below. Centering the content makes the
       mismatch invisible instead of merely equal-height. */
    .home-hero-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: background 220ms ease;
    }

    .home-hero-stat:not(:last-child) {
        border-right: 1px solid rgba(12, 30, 48, 0.08);
    }

    .home-hero-content.is-visible .home-hero-stat {
        animation: stat-pop 480ms ease both;
    }

    .home-hero-content.is-visible .home-hero-stat:nth-child(1) { animation-delay: 60ms; }
    .home-hero-content.is-visible .home-hero-stat:nth-child(2) { animation-delay: 140ms; }
    .home-hero-content.is-visible .home-hero-stat:nth-child(3) { animation-delay: 220ms; }

    @keyframes stat-pop {
        from { transform: translateY(10px) scale(0.94); opacity: 0; }
        to { transform: translateY(0) scale(1); opacity: 1; }
    }

    /* Soft flat tint instead of the gradient+shadow badge: matches the
       clean, flat icon treatment already used in the bottom action bar
       instead of feeling like a heavier, separate icon language. */
    .home-hero-stat-icon {
        background: #fff7ed;
        color: var(--color-orange);
    }

    .home-brand-strip {
        display: block;
        border-top: 1px solid var(--color-line);
        border-bottom: 1px solid var(--color-line);
    }

    .brand-marquee {
        width: 100%;
        overflow: hidden;
    }

    .home-brand-strip > div {
        min-height: 0;
        gap: 1.5rem;
        padding-top: 1.65rem !important;
        padding-bottom: 1.65rem !important;
    }

    .home-brand-strip p {
        max-width: 100% !important;
        font-size: 0.98rem !important;
        line-height: 1.35 !important;
        letter-spacing: 0.14em !important;
        text-align: center;
    }

    .brand-marquee-track {
        display: flex !important;
        width: max-content !important;
        gap: 2rem;
        animation: brand-marquee 10s linear infinite;
    }

    .brand-marquee img {
        width: 9.5rem !important;
        height: 4.35rem !important;
        flex: 0 0 auto;
        object-fit: contain;
        opacity: 0.88;
    }

    .brand-marquee-track img:nth-child(n+5) {
        display: block;
    }

    .section-title {
        font-size: clamp(2rem, 10vw, 2.55rem);
        line-height: 1.08;
    }

    .section-copy {
        font-size: 0.96rem;
        line-height: 1.7;
    }

    .clean-card,
    .capability-panel,
    .process-card {
        min-height: auto;
        padding: 1.35rem;
    }

    body:not(:has(#home)) .clean-card {
        padding: 1.2rem !important;
    }

    body:not(:has(#home)) .clean-card h3,
    body:not(:has(#home)) .clean-card .text-2xl {
        font-size: 1.25rem !important;
        line-height: 1.18 !important;
    }

    body:not(:has(#home)) .clean-card .flex.items-start.justify-between {
        align-items: flex-start;
        flex-direction: column;
    }

    #offer .clean-card {
        display: grid;
        min-width: min(82vw, 21rem);
        scroll-snap-align: start;
        gap: 0.75rem;
    }

    .service-offer-grid {
        display: flex !important;
        margin-right: -1rem;
        margin-left: -1rem;
        padding: 0 1rem 0.75rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .service-offer-grid::-webkit-scrollbar {
        display: none;
    }

    #offer .clean-card h3 {
        margin-top: 0.35rem !important;
    }

    #offer .clean-card p {
        margin-top: 0 !important;
        line-height: 1.55 !important;
    }

    #offer .clean-card .mt-6.flex.flex-wrap {
        margin-top: 0.35rem !important;
    }

    .trust-card {
        align-items: flex-start !important;
        text-align: left;
    }

    .trust-toggle {
        width: 100%;
    }

    .service-group-card {
        padding: 1.4rem !important;
    }

    .service-group-number {
        right: 0.6rem;
        bottom: -0.25rem;
        font-size: 5rem;
    }

    .service-work-tile:nth-of-type(n+5) {
        display: none;
    }

    .service-work-more.hidden {
        display: inline-flex;
    }

    /* Compact divided row instead of a centered, bordered card: the
       page already has plenty of card treatments, and icon + title +
       copy doesn't need its own container to read clearly. */
    .capability-panel {
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 1.1rem 0.25rem !important;
        border: 0;
        border-bottom: 1px solid var(--color-line);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        text-align: left;
        gap: 1rem;
    }

    .capability-panel:last-child {
        border-bottom: 0;
    }

    .capability-icon {
        width: 3rem;
        height: 3rem;
        flex-shrink: 0;
        margin: 0;
        background: #fff7ed;
        place-items: center;
        /* On desktop this icon only comes alive on :hover, but touch
           has no hover — so on mobile it just sat there flat forever.
           A slow, gentle bob keeps it feeling alive without needing a
           pointer, staggered per card so they don't move in unison. */
        animation: icon-float 3.6s ease-in-out infinite;
    }

    .capability-panel:nth-child(2) .capability-icon { animation-delay: 0.5s; }
    .capability-panel:nth-child(3) .capability-icon { animation-delay: 1s; }
    .capability-panel:nth-child(4) .capability-icon { animation-delay: 1.5s; }
    .capability-panel:nth-child(5) .capability-icon { animation-delay: 2s; }
    .capability-panel:nth-child(6) .capability-icon { animation-delay: 2.5s; }

    @keyframes icon-float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-7px); }
    }

    .capability-icon svg {
        width: 1.5rem;
        height: 1.5rem;
        color: var(--color-orange);
    }

    .capability-panel-body {
        min-width: 0;
    }

    .capability-copy {
        max-width: 100%;
        margin-top: 0.3rem;
        font-size: 0.92rem;
    }

    .capability-panel h3 {
        margin-top: 0;
        font-size: 1.1rem;
        line-height: 1.2;
    }

    /* Kills the services.php sticky sidebar on mobile (stacked layout
       doesn't need it) without also disabling the site header above,
       which shares the same Tailwind .sticky utility class. */
    .sticky:not(header) {
        position: static !important;
    }

    .proof-frame {
        max-width: 100%;
    }

    .proof-frame img {
        min-height: 15rem;
    }

    .proof-frame .absolute.bottom-0 {
        padding: 1rem !important;
    }

    .proof-frame .text-xl {
        font-size: 1.05rem !important;
        line-height: 1.35 !important;
    }

    .proof-frame .max-h-\[680px\] {
        max-height: 30rem;
    }

    .case-chart {
        height: 20rem;
        min-height: 20rem;
        gap: 0.6rem;
        padding: 1.25rem;
    }

    .featured-case-chart {
        min-height: 20rem;
        order: -1;
    }

    .chart-bar {
        min-width: 0.85rem;
        border-radius: 0.35rem 0.35rem 0 0;
    }

    .case-chart::before {
        left: 1.25rem;
        right: 1.25rem;
        bottom: 1.25rem;
    }

    .case-chart::after {
        top: 1rem;
        right: 1rem;
    }

    .problem-row {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 0.85rem;
        padding: 1.25rem;
        text-align: center;
    }

    /* Home only: this doesn't need its own bordered/shadowed card —
       a plain row with a bottom divider (no container, no shadow)
       reads as content, not as another boxed UI component, and the
       page already has plenty of card treatments elsewhere. Scoped to
       #home so solutions.php's identical component is untouched. */
    #home .problem-row {
        border: 0;
        border-bottom: 1px solid var(--color-line);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        padding: 1.5rem 0.5rem;
    }

    #home .problem-row:last-child {
        border-bottom: 0;
    }

    #home .problem-row:hover {
        background: transparent;
        transform: none;
        box-shadow: none;
    }

    .problem-arrow {
        display: none;
    }

    .problem-icon {
        width: 4rem;
        height: 4rem;
        margin-right: auto;
        margin-left: auto;
        place-items: center;
        /* Same reasoning as .capability-icon: this only lit up on
           :hover, which touch can't trigger, so give it its own
           gentle continuous bob on mobile instead. */
        animation: icon-float 3.6s ease-in-out infinite;
    }

    .problem-row:nth-child(2) .problem-icon { animation-delay: 0.5s; }
    .problem-row:nth-child(3) .problem-icon { animation-delay: 1s; }
    .problem-row:nth-child(4) .problem-icon { animation-delay: 1.5s; }

    .problem-icon svg {
        width: 1.75rem;
        height: 1.75rem;
    }

    /* Unified with #process below: a compact divided-row list instead
       of six individually bordered/animated boxes — same visual
       sequence feel connected instead of reading like a plain list.
       Scoped to #home: solutions.php reuses this exact component. */
    #home .growth-engine {
        grid-template-columns: 1fr;
        gap: 0.15rem;
        padding: 0.75rem;
        border: 1px solid rgba(48, 50, 52, 0.08);
        border-radius: 0.65rem;
        background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.72) 100%);
        box-shadow: 0 18px 45px rgba(48, 50, 52, 0.08);
    }

    #home .engine-node {
        flex-direction: row;
        justify-content: flex-start;
        min-height: auto;
        padding: 0.95rem 2.65rem 0.95rem 1rem;
        border: 0;
        border-radius: 0.45rem;
        background: rgba(247, 245, 242, 0.74);
        box-shadow: none;
        gap: 0.75rem;
        text-align: left;
        font-size: 0.92rem;
        line-height: 1.25;
    }

    #home .engine-node::after {
        top: 50%;
        right: 1.05rem;
        bottom: auto;
        left: auto;
        display: block;
        width: 0.55rem;
        height: 0.55rem;
        content: "";
        border-top: 2px solid rgba(242, 88, 34, 0.82);
        border-right: 2px solid rgba(242, 88, 34, 0.82);
        background: transparent;
        animation: none;
        transform: translateY(-50%) rotate(45deg);
        opacity: 1;
    }

    #home .engine-dot {
        display: none;
    }

    .evidence-item {
        min-height: auto;
        padding: 1.1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .evidence-top {
        justify-content: center;
        gap: 0.6rem;
    }

    .evidence-number {
        font-size: clamp(3.1rem, 16vw, 3.85rem);
    }

    .evidence-visual {
        width: 100%;
        max-width: 14rem;
        margin-right: auto;
        margin-left: auto;
    }

    .evidence-bars,
    .evidence-dots {
        justify-content: center;
    }

    body:not(:has(#home)) .evidence-panel {
        border-radius: 0.55rem;
    }

    /* One of the page's few deliberate "anchor" moments on mobile: a
       dark, high-contrast panel for the evidence section so it reads
       as a landmark while scrolling, not another white section that
       blends into the ones around it. Desktop is untouched. */
    #proof {
        position: relative;
        overflow: hidden;
        background: linear-gradient(175deg, #383b3e 0%, var(--color-navy) 40%, #24262a 100%);
    }

    #proof::before {
        position: absolute;
        inset: 0;
        z-index: 0;
        content: "";
        pointer-events: none;
        background-image:
            linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
        background-size: 3.5rem 3.5rem;
        mask-image: radial-gradient(circle at 25% 10%, #000, transparent 72%);
    }

    #proof > div {
        position: relative;
        z-index: 1;
    }

    #proof .section-title {
        color: #fff;
    }

    #proof .evidence-panel {
        border-color: rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.06);
    }

    #proof .evidence-item {
        border-bottom-color: rgba(255, 255, 255, 0.12);
    }

    #proof .evidence-item:hover {
        background: rgba(255, 255, 255, 0.04);
    }

    #proof .evidence-top span,
    #proof .evidence-note {
        color: rgba(255, 255, 255, 0.6);
    }

    #proof .evidence-number,
    #proof .evidence-label {
        color: #fff;
    }

    #proof .evidence-meter span {
        background: rgba(255, 255, 255, 0.16);
    }

    #proof .evidence-line::before {
        background: rgba(255, 255, 255, 0.22);
    }

    #about img {
        min-height: 20rem !important;
    }

    /* Same reasoning as #home .problem-row: a plain divided row reads
       as content rather than another boxed card competing for
       attention with the rest of the page's card-heavy sections. */
    .home-feature-card {
        flex-direction: column;
        align-items: center;
        border: 0;
        border-bottom: 1px solid var(--color-line);
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 1.5rem 0.5rem !important;
        text-align: center;
    }

    .home-feature-card:last-child {
        border-bottom: 0;
    }

    .home-feature-card:hover {
        transform: none;
        background: transparent !important;
        box-shadow: none !important;
    }

    .home-feature-card > span {
        width: 4rem;
        height: 4rem;
        margin-right: auto;
        margin-left: auto;
        border-radius: 999px !important;
        place-items: center;
        animation: icon-float 3.6s ease-in-out infinite;
    }

    .home-feature-card:nth-child(2) > span { animation-delay: 0.5s; }
    .home-feature-card:nth-child(3) > span { animation-delay: 1s; }

    .home-feature-card > span svg {
        width: 1.75rem;
        height: 1.75rem;
    }

    /* Compact timeline language for the process steps on mobile. */
    .process-pipeline {
        margin-top: 1.5rem;
        display: grid;
        gap: 0.2rem;
        padding: 0.75rem;
        border: 1px solid rgba(48, 50, 52, 0.08);
        border-radius: 0.65rem;
        background: #fff;
        box-shadow: 0 18px 45px rgba(48, 50, 52, 0.07);
        text-align: left;
    }

    .process-pipeline::before {
        display: none;
    }

    .process-card {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        align-items: center;
        min-height: auto;
        padding: 1.15rem 0.95rem !important;
        border: 0;
        border-radius: 0.45rem;
        background: rgba(247, 245, 242, 0.68);
        box-shadow: none;
        text-align: center;
        gap: 0.75rem;
    }

    .process-node {
        position: static;
        display: grid;
        width: 3.9rem;
        height: 3.9rem;
        margin: 0 auto;
        place-items: center;
        border: 2px solid var(--color-orange);
        background: var(--color-orange) !important;
        color: #fff !important;
        font-size: 0.95rem;
        box-shadow: none !important;
    }

    .process-step-number {
        display: none;
    }

    .process-step-icon {
        display: block !important;
        width: 1.75rem !important;
        height: 1.75rem !important;
        color: #fff;
    }

    .process-card-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        row-gap: 0.35rem;
        min-width: 0;
        align-items: center;
    }

    .process-card > i {
        display: none;
    }

    .process-card h3 {
        grid-column: 1;
        margin-top: 0 !important;
        font-size: 1.08rem !important;
        line-height: 1.2;
    }

    .process-card p {
        grid-column: 1 / -1;
        margin-top: 0.45rem !important;
        max-width: 100%;
        font-size: 0.9rem !important;
        line-height: 1.55 !important;
    }

    .process-card-body > svg {
        display: none;
    }

    /* Two columns even on narrow phones (not just from the sm:
       breakpoint up) — six photo tiles stacked one-per-row ran to
       roughly 1300px of pure image height on its own. */
    #home .industry-mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: minmax(8rem, auto);
    }

    .industry-mosaic .industry-tile:first-child {
        min-height: 11rem;
        grid-column: span 2;
    }

    .industry-tile {
        min-height: 8.5rem !important;
    }

    .strategy-system {
        grid-template-columns: 1fr;
        padding: 1rem;
        gap: 0.85rem;
    }

    .services-strategy-system {
        grid-template-columns: 1fr;
    }

    .services-strategy-system .system-arrow {
        transform: rotate(90deg);
    }

    .system-node,
    .system-result {
        min-height: 5.75rem;
    }

    /* Home only: these four categories are parallel tags, not a
       sequence, so a compact 2-up row of small chips reads as quick
       supporting detail instead of four more full-height cards. */
    #home .strategy-system {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    #home .system-node {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 0.55rem;
        min-height: auto;
        padding: 0.7rem 0.6rem;
        text-align: left;
    }

    #home .system-node svg {
        width: 1.2rem;
        height: 1.2rem;
    }

    #home .system-node span {
        margin-top: 0;
        font-size: 0.82rem;
    }

    #home .system-result {
        min-height: auto;
        padding: 1rem;
        font-size: 1.15rem;
    }

    .system-result {
        font-size: 1.25rem;
    }

    .home-testimonial-card > img {
        height: 13rem;
    }

    .home-testimonial-card > div {
        padding: 1.2rem !important;
    }

    .home-testimonial-card .text-5xl,
    #work .text-5xl {
        font-size: 2.4rem !important;
    }

    .home-testimonial-card .items-end {
        align-items: flex-start;
        flex-direction: column;
    }

    #work h3 {
        font-size: clamp(1.42rem, 7vw, 1.85rem);
        line-height: 1.08;
    }

    #work article > div:first-child {
        padding: 1.1rem;
    }

    #work article > div:first-child > .text-sm.uppercase {
        font-size: 0.68rem !important;
        letter-spacing: 0.16em;
    }

    /* Editorial, not a card row: the case study's whole point is
       these three numbers, so let them be big and bare instead of
       boxed — a plain divider between rows is enough structure. */
    #work article > div:first-child .sm\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 0;
    }

    #work article > div:first-child .sm\:grid-cols-3 > div {
        display: grid;
        grid-template-columns: minmax(5.7rem, auto) 1fr;
        align-items: baseline;
        gap: 0.75rem;
        padding: 0.8rem 0.1rem;
        border: 0;
        border-bottom: 1px solid var(--color-line);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    #work article > div:first-child .sm\:grid-cols-3 > div:last-child {
        border-bottom: 0;
    }

    #work article > div:first-child .case-metric-icon {
        width: 1.05rem;
        height: 1.05rem;
    }

    #work article > div:first-child .sm\:grid-cols-3 .text-5xl {
        font-size: clamp(2.4rem, 13vw, 3rem) !important;
        line-height: 0.95;
        letter-spacing: -0.04em;
    }

    #work article > div:first-child .sm\:grid-cols-3 .text-sm {
        font-size: 0.78rem !important;
        line-height: 1.25;
    }

    #work article > div:first-child .md\:grid-cols-3 {
        gap: 0;
    }

    /* Plain rows for the explanatory Challenge/What changed/Result
       text — these three numbers above are the evidence; this is
       supporting detail and doesn't need its own card treatment. */
    #work article > div:first-child .md\:grid-cols-3 > div {
        padding: 0.85rem 0.1rem;
        border: 0;
        border-bottom: 1px solid var(--color-line);
        border-radius: 0;
        background: transparent;
    }

    #work article > div:first-child .md\:grid-cols-3 > div:last-child {
        border-bottom: 0;
    }

    #work article > div:first-child .md\:grid-cols-3 svg {
        color: color-mix(in srgb, var(--color-ink) 55%, transparent);
    }

    .case-studies-page .case-result-card > .relative {
        height: 10.75rem;
    }

    .case-studies-page .case-result-body {
        padding: 1.05rem 1.15rem 1.25rem !important;
    }

    .case-studies-page .case-result-body > .text-6xl {
        width: fit-content;
        margin-top: 0;
        padding: 0;
        font-size: clamp(3rem, 17vw, 3.8rem) !important;
        line-height: 0.95;
    }

    .case-studies-page .case-result-body > .uppercase {
        margin-top: 0.25rem !important;
    }

    .case-studies-page .case-context {
        margin-top: 0.55rem !important;
        font-size: 0.86rem !important;
    }

    .case-studies-page .case-result-body p:last-of-type {
        margin-top: 0.65rem !important;
        line-height: 1.55 !important;
    }

    .case-studies-page .case-card-link {
        margin-top: 0.85rem !important;
    }

    .case-studies-page #regional-service-case > div {
        display: flex;
        flex-direction: column;
    }

    .case-studies-page #regional-service-case > div > div:first-child {
        order: 1;
    }

    .case-studies-page .featured-case-chart {
        order: 2;
    }

    .audit-meter {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }

    .audit-report {
        padding: 1.1rem;
    }

    .audit-report-head {
        gap: 0.75rem;
    }

    /* Second deliberate anchor moment: a warm, orange-tinted section
       right before the final ask, so "book your audit" reads as the
       one clearly-marked conversion zone rather than the same paper
       tone as every other supporting section. The report card itself
       stays a plain white card floating on it — no color flip needed
       since it's already self-contained. */
    #audit {
        background: linear-gradient(165deg, #fff4ec 0%, #ffe1c7 55%, #ffcda1 100%) !important;
    }

    .case-timeline div {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.4rem;
    }

    /* Home only: a plain divided row instead of a paper-colored pill,
       consistent with the rest of this section's reduced chrome. */
    #home .case-timeline div {
        padding: 0.7rem 0.1rem;
        border-radius: 0;
        background: transparent;
        border-bottom: 1px solid var(--color-line);
    }

    #home .case-timeline div:last-child {
        border-bottom: 0;
    }

    body:not(:has(#home)) .case-timeline div {
        padding: 0.9rem;
    }

    body:not(:has(#home)) .case-timeline strong {
        font-size: 0.72rem;
    }

    body:not(:has(#home)) .case-timeline span {
        font-size: 0.82rem;
        line-height: 1.5;
    }

    body:not(:has(#home)) .problem-row {
        grid-template-columns: 1fr;
    }

    body:not(:has(#home)) .problem-row .text-2xl {
        font-size: 1.25rem !important;
    }

    body:not(:has(#home)) .strategy-system {
        margin-top: 0.25rem;
    }

    body:not(:has(#home)) article.min-h-\[220px\] {
        min-height: 13rem !important;
    }

    .solutions-page [data-reveal] {
        opacity: 1;
        transform: none;
    }

    .solutions-page > section:not(.inner-hero) {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .solutions-page .solution-problem-card {
        grid-template-columns: 2.8rem minmax(0, 1fr);
        gap: 0.9rem;
        align-items: start;
        padding: 1rem !important;
    }

    .solutions-page .solution-problem-card .problem-icon {
        grid-column: 1;
        grid-row: 1;
        width: 2.8rem;
        height: 2.8rem;
        margin: 0;
    }

    .solutions-page .solution-problem-card > div {
        grid-column: 2;
    }

    .solutions-page .solution-problem-card .problem-label {
        padding: 0;
        background: transparent;
        font-size: 0.68rem !important;
    }

    .solutions-page .solution-problem-card .problem-solution {
        margin-top: 0.35rem;
        font-size: 1.12rem !important;
        line-height: 1.22;
    }

    .solutions-page .solution-problem-card p:last-child {
        margin-top: 0.35rem !important;
        line-height: 1.55 !important;
    }

    .solutions-page .problem-arrow {
        display: none;
    }

    .solutions-page .solutions-engine {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
        padding: 0.75rem;
    }

    .solutions-page .solutions-engine .engine-node {
        min-height: 5.6rem;
        border: 1px solid var(--color-line);
        border-radius: 0.45rem;
    }

    .solutions-page .solutions-engine .engine-node:not(:last-child)::before {
        right: 0.7rem;
        top: auto;
        bottom: -0.48rem;
        width: 0.55rem;
        height: 0.55rem;
        background: #fff;
        transform: rotate(135deg);
    }

    .solutions-page .solutions-pathway-intro {
        padding-right: 0;
    }

    .solutions-page .solutions-pathway-intro p:last-child {
        display: none;
    }

    .solutions-page .pathway-card {
        padding: 0 !important;
    }

    .solutions-page .pathway-card summary {
        grid-template-columns: auto 1fr auto;
        min-height: 4.25rem;
        padding: 1rem;
        gap: 0.85rem;
        cursor: pointer;
    }

    .solutions-page .pathway-number {
        min-width: 2.45rem;
        color: var(--color-orange);
        font-size: 1rem;
        line-height: 1;
    }

    .solutions-page .pathway-title {
        font-size: 1.12rem;
    }

    .solutions-page .pathway-plus {
        display: block;
    }

    .solutions-page .pathway-copy {
        margin: 0;
        padding: 0 1rem 1rem;
    }

    .solutions-page .pathway-card:not([open]) .pathway-copy {
        display: none;
    }

    .solutions-page .solutions-industries {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .solutions-page .solutions-industry-strip {
        flex-wrap: nowrap;
        margin-right: -1rem;
        margin-left: -1rem;
        padding: 0 1rem 0.35rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .solutions-page .solutions-industry-strip::-webkit-scrollbar {
        display: none;
    }

    .solutions-page .solutions-industry-chip {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .success-video-section .proof-frame {
        transform: none;
    }

    .success-context-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0.85rem !important;
    }

    .success-context-strip > div {
        padding: 0.75rem;
    }

    .success-story-page .story-step-card {
        padding: 1rem 0.25rem !important;
        border: 0;
        border-bottom: 1px solid var(--color-line);
        border-radius: 0 !important;
        background: transparent;
        box-shadow: none;
    }

    .success-story-page .story-step-card:last-child {
        border-bottom: 0;
    }

    .success-story-page .story-step-card .flex {
        position: relative;
        gap: 0.9rem;
    }

    .success-story-page .story-step-card:not(:last-child) .flex::before {
        position: absolute;
        top: 2.85rem;
        bottom: -1.2rem;
        left: 1.35rem;
        width: 2px;
        content: "";
        background: linear-gradient(180deg, rgba(242, 88, 34, 0.42), rgba(48, 50, 52, 0.08));
    }

    .success-story-page .story-step-badge {
        position: relative;
        z-index: 1;
        width: 2.75rem;
        height: 2.75rem;
    }

    .success-story-page .story-step-card h3 {
        font-size: 1.15rem !important;
    }

    .success-story-page .story-step-card p {
        line-height: 1.6 !important;
    }

    .success-story-page .story-outcome-card {
        background: #fff8f5;
        padding: 1rem !important;
        border: 1px solid rgba(242, 88, 34, 0.2);
        border-radius: 0.55rem !important;
    }

    .success-story-page .story-outcome-card .flex::before {
        display: none;
    }

    .story-outcome-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem !important;
    }

    .story-outcome-metrics strong {
        font-size: 2.1rem;
    }

    .success-growth-system {
        grid-template-columns: 1fr;
    }

    .success-growth-system .system-arrow {
        transform: rotate(90deg);
    }

    .about-page .about-principle-card {
        padding: 1rem !important;
    }

    .about-page .about-principle-card .clean-icon {
        width: 2.5rem;
        height: 2.5rem;
    }

    .about-page .about-principle-card h3 {
        margin-top: 0.75rem !important;
        font-size: 1.05rem !important;
    }

    .about-page .about-principle-card p {
        margin-top: 0.35rem !important;
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
    }

    .about-page .evidence-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-page .evidence-item {
        min-height: auto;
        padding: 1rem 0.75rem;
        border-right: 1px solid #eee8e4;
    }

    .about-page .evidence-item:nth-child(even) {
        border-right: 0;
    }

    .about-page .evidence-item:nth-child(3),
    .about-page .evidence-item:nth-child(4) {
        border-bottom: 0;
    }

    .about-page .evidence-top,
    .about-page .evidence-note {
        display: none;
    }

    .about-page .evidence-number {
        margin-top: 0;
        font-size: clamp(2rem, 12vw, 2.85rem);
    }

    .about-page .evidence-label {
        font-size: 0.78rem;
        line-height: 1.25;
    }

    .about-page .about-timeline {
        gap: 0;
        padding-left: 1.1rem;
    }

    .about-page .about-timeline::before {
        top: 0.7rem;
        bottom: 0.7rem;
        left: 0.25rem;
        right: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg, rgba(242, 88, 34, 0.24), var(--color-orange), rgba(242, 88, 34, 0.18));
    }

    .about-page .about-timeline div {
        position: relative;
        padding: 0.95rem 0.1rem 0.95rem 1rem !important;
        border-bottom: 1px solid var(--color-line);
        background: transparent;
    }

    .about-page .about-timeline div::before {
        position: absolute;
        top: 1.25rem;
        left: -1.02rem;
        width: 0.7rem;
        height: 0.7rem;
        content: "";
        border: 2px solid #fff;
        border-radius: 999px;
        background: var(--color-orange);
        box-shadow: 0 0 0 3px rgba(242, 88, 34, 0.14);
    }

    body:not(:has(#home)) form {
        padding: 1.2rem !important;
    }

    .contact-page .contact-audit-section {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .contact-page .contact-audit-section > div {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .contact-page .contact-review-panel {
        order: 2;
    }

    .contact-page .contact-review-panel .section-copy {
        margin-top: 0.85rem;
    }

    .contact-page .contact-audit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        margin-top: 1.35rem !important;
    }

    .contact-page .contact-audit-card {
        min-height: 8.75rem;
        padding: 0.9rem !important;
    }

    .contact-page .contact-audit-card .clean-icon {
        width: 2.4rem;
        height: 2.4rem;
    }

    .contact-page .contact-audit-card .clean-icon svg {
        width: 1.15rem;
        height: 1.15rem;
    }

    .contact-page .contact-audit-card h3 {
        margin-top: 0.75rem !important;
        font-size: 1rem !important;
        line-height: 1.2;
    }

    .contact-page .contact-audit-card p {
        margin-top: 0.35rem !important;
        font-size: 0.8rem !important;
        line-height: 1.45 !important;
    }

    .contact-page .contact-direct-section {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .contact-page .contact-direct-section .mb-10 {
        margin-bottom: 1.5rem;
    }

    .contact-page .contact-direct-card {
        display: grid;
        grid-template-columns: 2.6rem minmax(0, 1fr);
        align-items: start;
        gap: 0.85rem;
        padding: 1rem !important;
    }

    .contact-page .contact-direct-card .clean-icon {
        width: 2.6rem;
        height: 2.6rem;
    }

    .contact-page .contact-direct-card h3 {
        margin-top: 0 !important;
        font-size: 1.05rem !important;
    }

    .contact-page .contact-direct-card p {
        grid-column: 2;
        margin-top: -0.35rem !important;
        line-height: 1.55 !important;
    }

    .resources-page .resources-library-section {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .resources-page .resources-library-head {
        gap: 1.35rem;
        margin-bottom: 1.35rem !important;
    }

    .resources-page .resource-filter-row {
        flex-wrap: nowrap;
        margin-right: -1rem;
        margin-left: -1rem;
        overflow-x: auto;
        padding: 0 1rem 0.35rem;
        scrollbar-width: none;
    }

    .resources-page .resource-filter-row::-webkit-scrollbar {
        display: none;
    }

    .resources-page .resource-grid {
        gap: 0.85rem;
    }

    .resources-page .resource-card {
        padding: 1rem !important;
    }

    .resources-page .resource-card:not(.resource-card-featured) {
        min-height: 8.5rem;
    }

    .resources-page .resource-card:not(.resource-card-featured) .clean-icon,
    .resources-page .resource-card:not(.resource-card-featured) .resource-copy {
        display: none;
    }

    .resources-page .resource-card:not(.resource-card-featured) .resource-type {
        margin-top: 0 !important;
        font-size: 0.68rem !important;
    }

    .resources-page .resource-card:not(.resource-card-featured) h3 {
        margin-top: 0.45rem !important;
        font-size: 1.1rem !important;
        line-height: 1.25;
    }

    .resources-page .resource-card:not(.resource-card-featured) .resource-link {
        margin-top: 0.85rem !important;
    }

    .resources-page .resource-card-featured {
        gap: 1rem;
    }

    .resources-page .resource-card-featured h3 {
        font-size: 1.55rem !important;
        line-height: 1.08;
    }

    .resources-page .resource-card-featured .resource-copy {
        line-height: 1.6 !important;
    }

    .resources-page .resource-feature-visual {
        grid-template-columns: 1fr auto 1fr;
        gap: 0.45rem;
    }

    .resources-page .resource-feature-visual span {
        min-height: 2.45rem;
        font-size: 0.68rem;
    }

    .resources-page .resource-feature-visual svg:nth-of-type(2),
    .resources-page .resource-feature-visual svg:nth-of-type(3),
    .resources-page .resource-feature-visual span:nth-of-type(3),
    .resources-page .resource-feature-visual span:nth-of-type(4) {
        display: none;
    }

    .resources-page .bg-\[\#f7f5f2\] .grid[data-reveal] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
    }

    .resources-page .bg-\[\#f7f5f2\] .grid[data-reveal] p.clean-card {
        min-height: 4rem;
        padding: 0.75rem !important;
        font-size: 0.78rem !important;
        line-height: 1.35;
    }

    .resources-page .bg-\[\#f7f5f2\] .grid[data-reveal] p.clean-card svg {
        width: 1rem;
        height: 1rem;
    }

    .resources-page .audit-health {
        margin-top: 0;
    }

    body:not(:has(#home)) iframe {
        min-height: 13rem;
    }

    .faq-question {
        align-items: flex-start;
        font-size: 0.95rem;
        line-height: 1.45;
    }

    footer .min-h-\[320px\] {
        min-height: 24rem;
    }

    /* Prevent iOS Safari's auto-zoom-on-focus (triggers whenever a form
       field renders below 16px, which the inherited text-sm labels caused). */
    form input,
    form select,
    form textarea {
        font-size: 16px;
    }

    /* Comfortable touch targets (44px minimum) for the mobile nav. */
    #menuButton {
        min-height: 44px;
        min-width: 44px;
    }

    #mobileMenu a {
        min-height: 44px;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    /* Footer link lists are plain text on mobile; give each row real
       tap height instead of relying on line-height alone. */
    footer a {
        display: inline-block;
        min-height: 40px;
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    #heroCarousel .min-h-\[660px\] {
        min-height: 36rem;
    }

    .industry-mosaic .industry-tile:first-child {
        min-height: 22rem;
    }

    .industry-tile {
        min-height: 16rem !important;
    }

    #about img {
        min-height: 28rem !important;
    }
}

@media (max-width: 420px) {
    #home h1 {
        hyphens: none;
    }

    .inner-hero h1 {
        font-size: clamp(1.72rem, 8.6vw, 2.08rem) !important;
        hyphens: none;
        overflow-wrap: normal;
        word-break: normal;
    }

    .inner-hero .text-sm.uppercase {
        font-size: 0.68rem !important;
        letter-spacing: 0.14em !important;
    }

    .inner-hero .text-lg {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }

    #home h1 {
        font-size: clamp(1.9rem, 9.4vw, 2.24rem) !important;
    }

    .section-copy {
        font-size: 0.94rem !important;
    }

    .home-hero-content > p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }

    .evidence-number {
        letter-spacing: -0.035em;
    }

    .chart-bar {
        min-width: 0.65rem;
    }

    .audit-score {
        width: 4rem;
        height: 4rem;
    }
}