/* Home page-specific styles — extracted from base.css.
   Add more here as you edit this page. Shared rules live in /css/base.css. */

/* ============================================================
   GROWTH ENGINE — live-dashboard proof panel
   Inspired by reference images 3 + 4. Sits right after the hero
   to give immediate "this is what we deliver" credibility.
   ============================================================ */
.growth-engine {padding:128px 0 112px;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 50%,var(--bg) 100%);position:relative;overflow:hidden}
.growth-engine::before {content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 50% 30%,rgba(255,107,40,.10),transparent 60%);pointer-events:none}
.growth-engine .container {position:relative;z-index:1;max-width:1480px;width:min(1480px,calc(100% - 40px))}

.ge-head {text-align:center;max-width:820px;margin:0 auto 56px}
.ge-eyebrow {display:inline-flex;align-items:center;gap:10px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.72rem;font-weight:600;letter-spacing:.18em;color:var(--accent2);text-transform:uppercase;margin-bottom:22px;padding:8px 16px;border:1px solid rgba(255,107,40,.28);border-radius:999px;background:rgba(255,107,40,.06)}
.ge-eyebrow i {width:8px;height:8px;border-radius:999px;background:var(--accent);box-shadow:0 0 14px var(--accent);animation:nav-status-pulse 2s ease-in-out infinite}
.ge-title {font-family:var(--display);font-size:clamp(2.4rem,5vw,4.4rem);font-weight:900;letter-spacing:-.04em;line-height:.98;color:#fff;margin:0 0 22px}
.ge-title span, .ge-title .dl-serif-italic {font-family:var(--editorial);font-style:italic;font-weight:600;color:#ff7a3c;letter-spacing:-.025em;text-shadow:0 0 28px rgba(255,107,40,.35);-webkit-text-fill-color:initial;background:none;-webkit-background-clip:initial}
.ge-sub {font-size:clamp(1rem,1.2vw,1.16rem);color:rgba(255,255,255,.66);line-height:1.7;max-width:600px;margin:0 auto 24px}

/* Live-feel meta row: pulse pill + anonymized-data note */
.ge-meta-row {display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.ge-meta-pill {display:inline-flex;align-items:center;gap:8px;padding:6px 14px;font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.2em;color:rgba(255,255,255,.78);text-transform:uppercase;border:1px solid rgba(255,107,40,.32);border-radius:999px;background:linear-gradient(180deg,rgba(255,107,40,.08),rgba(255,107,40,.02))}
.ge-meta-pill-quiet {border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.02);color:rgba(255,255,255,.85)}
.ge-meta-pulse {width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:nav-status-pulse 1.8s ease-in-out infinite}

/* 3-column grid: rail | dashboard | strategy. Stacks at narrow widths. */
.ge-grid {display:grid;grid-template-columns:minmax(260px,300px) minmax(0,1.6fr) minmax(240px,290px);gap:24px;align-items:start}
/* Slimmed single-column variant — centerpiece dashboard only. */
.ge-grid-slim {grid-template-columns:minmax(0,1fr);max-width:1320px;margin:0 auto}
.ge-grid-slim .ge-main {gap:22px}

/* Generic GE card (used by signals + channels) */
.ge-card {position:relative;padding:22px 22px 18px;border-radius:22px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(155deg,rgba(20,18,22,.85),rgba(8,8,12,.85));isolation:isolate}
.ge-card-head {display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.ge-card-label {font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.62rem;font-weight:700;letter-spacing:.18em;color:rgba(255,255,255,.7);text-transform:uppercase}
.ge-pulse-icon {color:#22c55e}

/* Real-time signals list (left rail top card) */
.ge-rail {display:flex;flex-direction:column;gap:18px}
.ge-signal-list {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.ge-signal-list li {display:grid;grid-template-columns:18px 1fr auto auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.ge-signal-list li:last-child {border-bottom:none}
.ge-sig-ico {width:22px;height:22px;border-radius:6px;background:rgba(255,107,40,.12);color:var(--accent2);display:grid;place-items:center;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.7rem;font-weight:700;border:1px solid rgba(255,107,40,.2)}
.ge-sig-name {font-size:.82rem;color:rgba(255,255,255,.72);font-weight:500}
.ge-signal-list strong {font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.92rem;color:#fff;font-weight:700;letter-spacing:-.01em}
.ge-signal-list em {font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.7rem;font-weight:700}
.ge-signal-list em.up {color:#4ade80}
.ge-signal-list em.down {color:#4ade80}
.ge-sync {display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.66rem;letter-spacing:.06em;color:rgba(255,255,255,.85)}
.ge-sync-dot {width:7px;height:7px;border-radius:999px;background:#22c55e;box-shadow:0 0 12px #22c55e;animation:nav-status-pulse 2s ease-in-out infinite}

/* Channel mix donut */
.ge-channels {text-align:center}
.ge-donut {position:relative;display:inline-grid;place-items:center;margin:8px auto 16px}
.ge-donut svg {display:block}
.ge-donut-center {position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.ge-donut-center strong {font-family:var(--display);font-size:1.85rem;font-weight:900;letter-spacing:-.04em;color:#fff;line-height:1}
.ge-donut-center span {font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.55rem;letter-spacing:.16em;color:rgba(255,255,255,.85);margin-top:4px}
.ge-channel-legend {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;text-align:left}
.ge-channel-legend li {display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:10px;font-size:.78rem;color:rgba(255,255,255,.72)}
.ge-channel-legend i {width:10px;height:10px;border-radius:3px}
.ge-channel-legend em {font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.74rem;font-weight:700;color:#fff}

/* Center column: big dashboard mockup + phase strip */
.ge-main {display:flex;flex-direction:column;gap:18px;min-width:0}

.ge-dashboard {position:relative;border-radius:28px;border:1px solid rgba(255,107,40,.22);background:linear-gradient(165deg,#0a0608 0%,#08050a 100%);padding:28px 30px 26px;isolation:isolate;box-shadow:0 50px 140px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,107,40,.08)}
.ge-dashboard::before {content:'';position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(135deg,rgba(255,107,40,.4),transparent 40%,rgba(255,107,40,.18));z-index:-1;pointer-events:none}
/* v2 dashboard tweaks: tighter padding, subtle inner glow */
.ge-dashboard-v2 {padding:26px 28px 24px}

/* Dashboard top bar — brand mark + range picker */
.ge-dash-head {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
.ge-dash-title {display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:.82rem;font-weight:700;letter-spacing:.15em;color:#fff;text-transform:uppercase}
.ge-dash-mark {width:30px;height:30px;display:grid;place-items:center;border-radius:7px;border:1px solid rgba(255,107,40,.4);background:linear-gradient(155deg,rgba(255,107,40,.18),rgba(255,107,40,.04));color:var(--accent2)}
.ge-dash-mark svg {width:16px;height:16px}
.ge-dash-name {color:#fff}
.ge-live-pulse {width:7px;height:7px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 2px rgba(255,107,40,.16);animation:status-core 2.8s ease-in-out infinite;position:relative}
.ge-live-pulse::after {content:'';position:absolute;inset:0;border-radius:inherit;border:1px solid var(--accent);opacity:0;animation:status-halo 2.8s ease-out infinite}
.ge-dash-status {display:inline-flex;align-items:center;gap:7px;color:var(--accent2);font-weight:700;font-size:.7rem;letter-spacing:.18em;padding-left:6px;border-left:1px solid rgba(255,255,255,.1);margin-left:4px}
.ge-range {display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.04em;color:rgba(255,255,255,.75);padding:8px 14px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(255,255,255,.025);cursor:default}
.ge-range svg {color:rgba(255,255,255,.7)}

/* KPI tiles row — icon + label + big value + trend */
.ge-kpis {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:32px}
.ge-kpi {position:relative;padding:18px 18px 18px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:linear-gradient(155deg,rgba(255,255,255,.018),rgba(0,0,0,.18));overflow:hidden;transition:border-color .35s ease,transform .35s ease}
.ge-kpi:hover {border-color:rgba(255,107,40,.22);transform:translateY(-2px)}
.ge-kpi-ico {width:34px;height:34px;display:grid;place-items:center;border-radius:9px;border:1px solid rgba(255,107,40,.25);background:linear-gradient(155deg,rgba(255,107,40,.12),rgba(255,107,40,.02));color:var(--accent2);margin-bottom:14px}
.ge-kpi-ico svg {width:18px;height:18px}
.ge-kpi-label {display:block;font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.18em;color:rgba(255,255,255,.85);text-transform:uppercase;margin-bottom:8px}
.ge-kpi strong {display:block;font-family:var(--display);font-size:clamp(1.4rem,1.9vw,1.85rem);font-weight:700;color:#fff;letter-spacing:-.035em;line-height:1;font-feature-settings:"tnum"}
.ge-kpi strong small {font-size:.65em;color:rgba(255,255,255,.75);font-weight:600;margin-left:1px}
.ge-kpi em {display:inline-flex;align-items:center;gap:4px;font-style:normal;font-family:var(--mono);font-size:.72rem;font-weight:700;margin-top:8px;color:#4ade80}
.ge-kpi em.down {color:#4ade80}
.ge-kpi-accent {background:linear-gradient(155deg,rgba(255,107,40,.14),rgba(255,107,40,.02));border-color:rgba(255,107,40,.45);box-shadow:0 0 0 1px rgba(255,107,40,.18),0 24px 60px rgba(255,107,40,.15)}
.ge-kpi-accent strong {color:#ff7a3c}
.ge-kpi-accent .ge-kpi-ico {background:linear-gradient(155deg,rgba(255,107,40,.22),rgba(255,107,40,.06));border-color:rgba(255,107,40,.45);color:#ffb066}

/* Revenue chart — with visible y-axis labels */
.ge-chart-wrap {position:relative;margin-bottom:24px}
.ge-chart-head {display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.ge-chart-head strong {font-family:var(--display);font-size:.85rem;font-weight:700;letter-spacing:-.005em;color:#fff;text-transform:none}
.ge-chart-head span {font-family:var(--mono);font-size:.72rem;color:rgba(255,255,255,.85);letter-spacing:.04em}
.ge-chart-box {display:grid;grid-template-columns:46px 1fr;gap:0;align-items:stretch}
.ge-chart-y {list-style:none;margin:0;padding:0 8px 0 0;display:flex;flex-direction:column;justify-content:space-between;font-family:var(--mono);font-size:.6rem;font-weight:500;color:rgba(255,255,255,.82);letter-spacing:.06em;text-align:right;height:220px}
.ge-chart-plot {position:relative;border-left:1px solid rgba(255,255,255,.06);padding-left:8px}
.ge-chart {width:100%;height:220px;display:block}
.ge-chart-x {display:flex;justify-content:space-between;margin-top:8px;padding-left:54px;font-family:var(--mono);font-size:.62rem;color:rgba(255,255,255,.82);letter-spacing:.1em}
/* Chart end-point callout (HTML overlay for crispness) */
.ge-chart-callout {position:absolute;left:var(--cx);top:var(--cy);transform:translate(-100%, -130%);display:inline-flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:9px;background:rgba(20,12,8,.95);border:1px solid rgba(255,122,60,.5);box-shadow:0 12px 30px rgba(255,107,40,.18),0 0 0 4px rgba(255,107,40,.05);font-family:var(--mono);text-align:center;pointer-events:none;z-index:2}
.ge-chart-callout .gcc-date {font-size:.62rem;font-weight:700;color:var(--accent2);letter-spacing:.12em}
.ge-chart-callout .gcc-val {font-family:var(--display);font-size:.95rem;font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1}
.ge-chart-callout .gcc-arrow {position:absolute;left:50%;bottom:-6px;width:10px;height:10px;background:rgba(20,12,8,.95);border-right:1px solid rgba(255,122,60,.5);border-bottom:1px solid rgba(255,122,60,.5);transform:translateX(-50%) rotate(45deg)}

/* System health strip — icon + data column */
.ge-pulse-strip {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.06)}
.ge-pulse-item {position:relative;display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:center;padding:0 14px;text-align:left}
.ge-pulse-item + .ge-pulse-item {border-left:1px solid rgba(255,255,255,.06)}
.ge-pulse-ico {width:32px;height:32px;display:grid;place-items:center;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);color:rgba(255,255,255,.7)}
.ge-pulse-ico svg {width:16px;height:16px}
.ge-pulse-ico-led {background:rgba(74,222,128,.08);border-color:rgba(74,222,128,.28);color:#4ade80}
.ge-pulse-data {display:flex;flex-direction:column;gap:1px;min-width:0}
.ge-pulse-label {display:block;font-family:var(--mono);font-size:.58rem;font-weight:600;letter-spacing:.18em;color:rgba(255,255,255,.85);text-transform:uppercase}
.ge-pulse-item strong {display:flex;align-items:baseline;gap:1px;font-family:var(--display);font-size:1.05rem;font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1.1;font-feature-settings:"tnum"}
.ge-pulse-item strong small {font-size:.7em;color:rgba(255,255,255,.72);font-weight:500}
.ge-pulse-item em {font-style:normal;font-family:var(--mono);font-size:.65rem;font-weight:600;color:#4ade80;letter-spacing:.02em;line-height:1.3}
.ge-pulse-status strong {color:#4ade80;font-family:var(--display);font-size:.95rem;letter-spacing:-.01em}
.ge-pulse-status em {color:rgba(255,255,255,.85);font-weight:500}
.ge-pulse-led {width:8px;height:8px;border-radius:999px;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18);animation:status-core 2.4s ease-in-out infinite}

/* Live-sync timestamp ticker (added text after JS kicks in) */
.ge-sync em {font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;color:rgba(255,255,255,.8);font-size:inherit;margin-left:4px}

@media (max-width:880px) {
    .ge-pulse-strip {grid-template-columns:repeat(2,1fr);gap:14px 0}
    .ge-pulse-item:nth-child(2n) {border-left:1px solid rgba(255,255,255,.06)}
    .ge-pulse-status {grid-column:1 / -1;border-left:none!important;padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}
}

/* Phase strip — 5 phase cards below the dashboard */
.ge-phase-strip {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:6px}
.ge-phase {position:relative;padding:28px 22px 22px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(165deg,#0a0608,#08050a);display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;transition:.4s var(--ease);min-height:200px}
.ge-phase-ico {width:48px;height:48px;display:grid;place-items:center;border-radius:11px;border:1px solid rgba(255,107,40,.25);background:linear-gradient(155deg,rgba(255,107,40,.14),rgba(255,107,40,.02));color:var(--accent2);margin-bottom:24px}
.ge-phase-ico svg {width:22px;height:22px}
.ge-phase strong {font-family:var(--display);font-size:.92rem;font-weight:700;letter-spacing:.04em;color:#fff;text-transform:uppercase}
.ge-phase span {font-size:.82rem;color:rgba(255,255,255,.72);line-height:1.5;flex:1;margin-top:4px}
.ge-phase em {display:inline-flex;align-items:center;gap:7px;font-style:normal;font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;color:#4ade80;font-weight:700;margin-top:14px}
.ge-phase em i {width:6px;height:6px;border-radius:999px;background:#22c55e;box-shadow:0 0 0 2px rgba(74,222,128,.16);animation:status-core 2.4s ease-in-out infinite}
.ge-phase:hover {transform:translateY(-3px);border-color:rgba(255,107,40,.32)}
.ge-phase-active {border-color:rgba(255,107,40,.55);background:linear-gradient(165deg,#13080a,#0c0608);box-shadow:0 0 0 1px rgba(255,107,40,.18),0 24px 60px rgba(255,107,40,.22),inset 0 1px 0 rgba(255,107,40,.12)}
.ge-phase-active .ge-phase-ico {color:#ffb066;border-color:rgba(255,107,40,.6);background:linear-gradient(155deg,rgba(255,107,40,.25),rgba(255,107,40,.05))}

/* Right column: strategy overview */
.ge-strategy {padding:8px}
.ge-strategy-title {font-family:var(--display);font-size:clamp(1.6rem,2.2vw,2.2rem);font-weight:900;letter-spacing:-.04em;line-height:1;color:#fff;margin:0 0 24px}
.ge-strategy-title br {display:block}
.ge-strategy-list {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.ge-strategy-list li {display:grid;grid-template-columns:46px 1fr;gap:14px;align-items:start}
.ge-hex {width:46px;height:46px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(255,107,40,.18),rgba(255,107,40,.04));color:var(--accent2);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);border:none;position:relative}
.ge-hex svg {width:20px;height:20px}
.ge-strategy-list strong {display:block;font-family:var(--display);font-size:.98rem;font-weight:800;color:#fff;letter-spacing:-.02em;margin-bottom:3px}
.ge-strategy-list span {font-size:.82rem;color:rgba(255,255,255,.72);line-height:1.5}

/* Responsive */
@media (max-width:1024px) {
    .ge-grid {grid-template-columns:1fr;gap:20px}
    .ge-rail {flex-direction:row}
    .ge-rail > * {flex:1}
}
@media (max-width:880px) {
    .ge-rail {flex-direction:column}
    .ge-kpis,.ge-phase-strip {grid-template-columns:repeat(2,minmax(0,1fr))}
    .ge-kpi-accent {grid-column:1 / -1}
}
@media (max-width:560px) {
    .growth-engine {padding:80px 0 64px}
    .ge-head {margin-bottom:36px}
    .ge-dashboard {padding:18px 16px}
    .ge-dashboard-v2 {padding:18px 16px 16px}
    .ge-kpis {grid-template-columns:repeat(2,1fr);gap:10px}
    .ge-kpi-accent {grid-column:1 / -1}
    .ge-phase-strip {grid-template-columns:1fr;gap:8px}
    .ge-phase {min-height:auto;padding:18px 18px 16px}
    .ge-phase-ico {margin-bottom:14px}
    .ge-chart-box {grid-template-columns:32px 1fr}
    .ge-chart-y {font-size:.55rem;height:180px}
    .ge-chart {height:180px}
    .ge-chart-x {padding-left:40px}
    .ge-chart-callout {transform:translate(-100%, -110%);padding:6px 9px}
    .ge-chart-callout .gcc-val {font-size:.85rem}
}

/* ============================================================
   LIQUID GLASS — Apple Vision Pro / iOS 26 inspired
   Additive utility: layers stronger frost + saturation + an inset
   "wet" highlight on top of whatever the element already has.
   Doesn't override background/border so it composes with existing
   card styles cleanly.
   ============================================================ */
.liquid-glass {
    backdrop-filter:blur(26px) saturate(190%) !important;
    -webkit-backdrop-filter:blur(26px) saturate(190%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        inset 0 -1px 0 rgba(255,255,255,.04),
        inset 1px 0 0 rgba(255,255,255,.06),
        inset -1px 0 0 rgba(255,255,255,.06),
        0 30px 90px rgba(0,0,0,.5),
        0 2px 8px rgba(0,0,0,.3) !important;
}

/* Stronger variant — applies SVG refraction to the content behind the card.
   Only Chromium currently honors url() on backdrop-filter; everywhere else
   the blur+sat is the fallback. */
@supports (backdrop-filter: url(#liquidGlassSubtle)) or (-webkit-backdrop-filter: url(#liquidGlassSubtle)) {
    .liquid-glass-refract {
        backdrop-filter:url(#liquidGlassSubtle) blur(22px) saturate(190%) !important;
        -webkit-backdrop-filter:url(#liquidGlassSubtle) blur(22px) saturate(190%) !important;
    }
}

/* Scroll-driven reveal (Chromium 115+). Falls back to JS .visible class
   for everything else via the existing IntersectionObserver in base.js. */
@supports (animation-timeline: view()) {
    .scroll-pop {animation:scroll-pop-kf linear both;animation-timeline:view();animation-range:entry 8% cover 32%}
    @keyframes scroll-pop-kf {
        from {opacity:0;transform:translateY(48px) scale(.96);filter:blur(6px)}
        to {opacity:1;transform:none;filter:none}
    }
    .scroll-rise {animation:scroll-rise-kf linear both;animation-timeline:view();animation-range:entry 5% cover 28%}
    @keyframes scroll-rise-kf {
        from {opacity:0;transform:translateY(64px)}
        to {opacity:1;transform:none}
    }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-pop,.scroll-rise {animation:none}
}

/* ============================================================
   LIVE STATUS NAV BADGE — tech-business credibility moment
   ============================================================ */
.nav-status {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 12px 6px 10px;
    border-radius:999px;
    border:1px solid rgba(34,197,94,.28);
    background:rgba(34,197,94,.06);
    font-family:'JetBrains Mono',ui-monospace,monospace;
    font-size:.65rem;
    font-weight:600;
    color:#86efac;
    letter-spacing:.04em;
    text-transform:uppercase;
    white-space:nowrap;
}
.nav-status i {
    width:6px;
    height:6px;
    border-radius:999px;
    background:#22c55e;
    box-shadow:0 0 12px #22c55e,0 0 0 0 rgba(34,197,94,.4);
    animation:nav-status-pulse 2s ease-in-out infinite;
}
@keyframes nav-status-pulse {
    0%,100% {box-shadow:0 0 12px #22c55e,0 0 0 0 rgba(34,197,94,.4)}
    50% {box-shadow:0 0 16px #22c55e,0 0 0 6px rgba(34,197,94,0)}
}
@media (max-width:1100px) {.nav-status {display:none}}


/* === INTRO GATE — full-bleed brand video before scroll unlocks === */
.intro-gate {position:fixed;inset:0;z-index:99999;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:opacity 1.6s cubic-bezier(.65,0,.35,1),visibility 1.6s;will-change:opacity}
.intro-gate.is-done {opacity:0;visibility:hidden;pointer-events:none}
.intro-gate.is-done .intro-video {transform:scale(1.12)}
.intro-video {position:absolute;inset:0;width:100%!important;max-width:none!important;height:100%!important;object-fit:cover;background:#000;transition:transform 1.6s cubic-bezier(.65,0,.35,1);will-change:transform}
@media(max-width:780px) {
.intro-video {object-fit:contain}
}

.intro-skip {position:absolute;bottom:32px;right:32px;z-index:2;font-family:var(--display);font-size:.82rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.7);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:10px 18px;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:.3s var(--ease);opacity:0}
.intro-skip.is-visible {opacity:1}
.intro-skip:hover {color:#fff;background:rgba(255,92,53,.15);border-color:rgba(255,92,53,.4)}
.intro-skip:focus-visible {outline:2px solid var(--accent2);outline-offset:3px}
@media(max-width:640px) {
.intro-skip {bottom:18px;right:18px;font-size:.74rem;padding:8px 14px}
}


/* === A11Y UTILITIES === */
.visually-hidden {position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.choice:has(input:focus-visible) .choice-inner,.choice-pill:has(input:focus-visible) {outline:2px solid var(--accent2);outline-offset:3px}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track {animation-play-state:paused}

/* === STICKY SCROLL HERO ===
   Outer wrapper is taller than viewport so the inner `.hero-sticky` stage
   stays pinned while the page scrolls past it — gives us a window to
   crossfade brain → apex-reveal driven by scroll progress. */
/* 300vh wrapper = 2 viewport heights of pinned hero. Forces visitors to
   sit with the brand entrance (brain → reveal → logo) instead of
   skimming past in a flick of the wheel. */
.hero-scroll-wrapper {position:relative;height:300vh;background:#000}
.hero-sticky {position:sticky;top:0;width:100%;height:100vh;height:100svh;height:100dvh;overflow:hidden;display:flex;align-items:center;justify-content:center}

/* Stage layers — every video covers the stage, opacity is JS-driven */
.hero-stage {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;will-change:opacity,transform;transform-origin:center center}
/* Dynamic blur lives in a CSS variable so JS only touches one prop per frame.
   Avoids re-parsing the full filter string on every scroll tick. */
.hero-idle {--brain-blur:0px;filter:contrast(1.15) saturate(1.2) brightness(.78) blur(var(--brain-blur));opacity:0;transition:opacity .9s ease-in-out;will-change:opacity,transform,filter;backface-visibility:hidden;transform:translateZ(0)}
.hero-idle.is-active {opacity:1}

/* Apex reveal video — JS sets opacity 0 → 1 across scroll progress */
.hero-reveal {opacity:0;z-index:1;filter:contrast(1.1) saturate(1.1)}

/* Final logo reveal — full-screen brand video on solid black */
.hero-final {opacity:0;z-index:3;background:#000;pointer-events:none;transition:opacity .9s cubic-bezier(.4,0,.2,1);overflow:hidden}
.hf-fullvideo {position:absolute;inset:0;width:100%!important;max-width:none!important;height:100%!important;object-fit:cover;background:#000;will-change:transform,opacity}
@media(max-width:780px) {
.hf-fullvideo {object-fit:contain}
}


/* Brain ambient glow — pulsing orange aura for depth */
.hero-sticky::before {content:'';position:absolute;inset:-10%;background:radial-gradient(ellipse 60% 55% at center 45%,rgba(255,92,53,.28) 0%,rgba(255,92,53,.1) 35%,transparent 65%);z-index:0;pointer-events:none;mix-blend-mode:screen;animation:brainPulse 6s ease-in-out infinite;will-change:opacity,transform}
.hero-sticky::after {content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center 50%,transparent 35%,rgba(0,0,0,.35) 75%,rgba(0,0,0,.7) 100%);z-index:1;pointer-events:none}

/* Reveal video — Higgsfield "energy" layer, fades in on scroll over the brain */
.hero-reveal {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;will-change:opacity,transform;transform-origin:center 45%;opacity:0}

.hero-overlay {position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at center 45%,transparent 0%,rgba(0,0,0,.35) 70%,rgba(0,0,0,.7) 100%),linear-gradient(180deg,rgba(0,0,0,.3) 0%,transparent 25%,transparent 70%,rgba(0,0,0,.4) 100%);z-index:1}
.hero-grain {position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");pointer-events:none;z-index:2}
.hero-content {position:relative;z-index:3;text-align:center;max-width:1240px;padding:48px 32px;transition:opacity .1s,transform .1s}
/* Stronger scrim — type needs to read cleanly against the brain. */
.hero-content::before {content:'';position:absolute;inset:-60px -120px;z-index:-1;background:radial-gradient(ellipse 80% 70% at center,rgba(0,0,0,.55) 0%,rgba(0,0,0,.28) 55%,transparent 90%);pointer-events:none;border-radius:50%}
.hero-content .hero-p {margin:0 auto 32px;max-width:620px;color:#ffffff;font-weight:500}
.hero-content .hero-btns {justify-content:center}
.hero-eyebrow {display:inline-flex;align-items:center;gap:14px;font-family:var(--display);font-size:.78rem;font-weight:600;letter-spacing:4.5px;color:#fff;margin-bottom:28px;text-transform:uppercase;text-shadow:0 1px 4px rgba(0,0,0,.85),0 2px 16px rgba(0,0,0,.7)}
.hero-eyebrow::before {content:'';width:32px;height:1px;background:linear-gradient(90deg,transparent,var(--accent2));display:inline-block}
.hero-eyebrow::after {content:'';width:32px;height:1px;background:linear-gradient(90deg,var(--accent2),transparent);display:inline-block}
/* Headline: a single, light depth shadow — no black backplate stack. */
.hero-h1 {text-shadow:0 2px 24px rgba(0,0,0,.5);margin-bottom:32px}
/* Editorial scale — controlled, not overwhelming. */
.hero-h1 .line {font-size:clamp(2.6rem,6.4vw,5.6rem);font-weight:900;letter-spacing:-.045em;line-height:1.0}
/* Editorial italic serif on the accent — magazine-quality contrast against the sans.
   Solid bright orange, very subtle warm glow, NO dark backplate. */
.hero-h1 .accent-line {font-family:var(--editorial);font-weight:600;font-style:italic;letter-spacing:-.025em;background:none;-webkit-background-clip:initial;-webkit-text-fill-color:initial;color:#ff7a3c;text-shadow:0 0 28px rgba(255,107,40,.4),0 0 64px rgba(255,107,40,.22);padding-bottom:8px;filter:none}
.hero-p {text-shadow:0 1px 3px rgba(0,0,0,.95),0 2px 16px rgba(0,0,0,.85),0 4px 32px rgba(0,0,0,.6);font-size:clamp(1.15rem,1.5vw,1.4rem);font-weight:400;color:#e8e8ee;letter-spacing:-.01em;margin-bottom:44px;max-width:none}
.hero-v2-copy .hero-h1 {font-family:var(--display);font-size:clamp(2.6rem,5.6vw,5rem);font-weight:800;letter-spacing:-2.5px;line-height:1.02;margin:8px 0 22px;text-shadow:none}
.hero-v2-copy .hero-p {font-size:clamp(1rem,1.25vw,1.18rem);color:#c9c9d1;line-height:1.6;margin:0 0 32px;max-width:560px;text-shadow:none}
.hero-v2-copy .hero-eyebrow {margin-bottom:16px;text-shadow:none}
.hero-v2-copy .hero-btns {display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start;margin-bottom:24px}
@media(max-width:980px) {

    .hero-v2-copy .hero-btns {justify-content:center}
}

.hero-grain {position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");pointer-events:none;z-index:1}

.hero-h1 {font-family:var(--display);margin-bottom:24px}

.hero-p {font-size:1.1rem;color:var(--text2);line-height:1.7;margin-bottom:32px;max-width:480px}
.hero-btns {display:flex;gap:14px;flex-wrap:wrap}

/* === MARQUEE === */
.marquee {padding:28px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden;background:linear-gradient(180deg,rgba(255,92,53,.02),transparent 50%,rgba(255,92,53,.02))}
.marquee-track {display:flex;align-items:center;gap:32px;width:max-content;animation:scroll-x 22s linear infinite;will-change:transform}
.marquee:hover .marquee-track {animation-play-state:paused}
.marquee-track span {font-family:var(--display);font-size:.95rem;font-weight:700;color:var(--text3);letter-spacing:5px;white-space:nowrap;transition:color .35s var(--ease),transform .35s var(--ease),text-shadow .35s var(--ease);cursor:default}
.marquee-track span:hover {color:#fff;transform:scale(1.15);text-shadow:0 0 28px rgba(255,92,53,.7),0 0 60px rgba(255,92,53,.3)}
.marquee-track i {color:var(--accent);font-size:.6rem;font-style:normal;transition:transform .4s var(--ease)}
.marquee:hover .marquee-track i {transform:rotate(72deg)}
.services-bento.tier-3 {grid-template-columns:1fr 1fr 1fr;gap:16px;align-items:stretch}

/* Keep the internal viz blocks aligned across cards */
.audit-viz, .comp-chart, .roadmap-viz {min-height:220px}

@media(max-width:900px) {

    .audit-viz, .comp-chart, .roadmap-viz {min-height:0}
}


/* ============================================
   AUDIT VISUALIZATION (scores with colors)
   ============================================ */
.audit-viz {display:flex;flex-direction:column;gap:8px;padding:16px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.06);border-radius:12px;margin-bottom:18px}
.av-row {display:grid;grid-template-columns:80px 1fr 36px;align-items:center;gap:10px}
.av-row > span {font-size:.7rem;color:#8d8d98;font-weight:600}
.av-bar {height:8px;background:rgba(255,255,255,.05);border-radius:4px;overflow:hidden}
.av-fill {height:100%;border-radius:4px;transition:width .8s var(--ease)}
.av-fill.poor {background:linear-gradient(90deg,#dc2626,#ef4444)}
.av-fill.mid {background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.av-fill.good {background:linear-gradient(90deg,#22c55e,#4ade80)}
.av-row strong {font-family:var(--display);font-size:.85rem;font-weight:700;text-align:right}
.av-row strong.poor {color:#ef4444}
.av-row strong.mid {color:#fbbf24}
.av-row strong.good {color:#4ade80}

/* ============================================
   COMPETITOR COMPARISON CHART — clean, data-driven
   ============================================ */
.comp-chart {padding:18px 18px 14px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.06);border-radius:14px;margin-bottom:18px}
.cc-header {display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 0 10px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:12px;margin-left:auto;width:calc(100% - 30px);padding-left:0}
.cc-col-label {font-size:.6rem;color:#6a6a75;font-weight:700;letter-spacing:2px;text-transform:uppercase;text-align:center}
.cc-col-label:nth-child(2) {color:var(--accent2)}
.cc-grid {display:flex;flex-direction:column;gap:2px}
.cc-metric {padding:10px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.cc-metric:last-child {border-bottom:none}
.cc-row {margin-bottom:6px}
.cc-label {font-size:.75rem;color:#a0a0aa;font-weight:500;letter-spacing:.2px}
.cc-values {display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center}
.cc-val {font-family:var(--display);font-size:.9rem;font-weight:700;text-align:center;padding:6px 10px;border-radius:8px}
.cc-val.yours {color:#6a6a75;background:rgba(255,255,255,.02);border:1px dashed rgba(255,255,255,.08)}
.cc-val.them {color:#fff;background:linear-gradient(135deg,rgba(255,92,53,.14),rgba(255,140,66,.05));border:1px solid rgba(255,92,53,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.cc-footer {display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,92,53,.2)}
.cc-footer-label {font-size:.65rem;color:#8d8d98;font-weight:600;letter-spacing:2px;text-transform:uppercase}
.cc-footer-val {font-family:var(--display);font-size:.9rem;font-weight:700;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ============================================
   ROADMAP VIZ
   ============================================ */
.roadmap-viz {display:flex;flex-direction:column;gap:14px;padding:20px 18px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.06);border-radius:12px;margin-bottom:18px;position:relative}
.roadmap-viz::before {content:'';position:absolute;left:27px;top:34px;bottom:34px;width:2px;background:linear-gradient(180deg,rgba(255,92,53,.2),rgba(255,92,53,.4),rgba(255,92,53,.2));z-index:1}
.rm-step {display:flex;align-items:center;gap:14px;position:relative;z-index:2}
.rm-dot {width:14px;height:14px;border-radius:50%;background:#0a0a10;border:2px solid rgba(255,92,53,.5);flex-shrink:0;margin-left:3px;transition:.4s;box-shadow:0 0 0 4px #0a0a10}
.rm-step.active .rm-dot {background:var(--grad);border-color:transparent;box-shadow:0 0 0 4px #0a0a10,0 0 12px rgba(255,92,53,.6),0 0 24px rgba(255,92,53,.3)}
.rm-step > div {min-width:0;flex:1;background:transparent}
.rm-step strong {display:block;font-size:.85rem;font-weight:700;color:#fff;background:transparent}
.rm-step em {display:block;font-size:.72rem;color:#8d8d98;font-style:normal;margin-top:2px;background:transparent}
.rm-step.active strong {background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ba-score.poor {color:#ef4444}
.ba-score.good {background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ============================================
   SERVICES INTRO — editorial asymmetric header
   ============================================ */
.services-intro {
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:64px;
    align-items:flex-end;
    padding:48px 0 40px;
    border-bottom:1px solid rgba(255,255,255,.08);
    margin-bottom:60px;
}
@media(max-width:820px) {
.services-intro {grid-template-columns:1fr;gap:28px;padding:36px 0 28px}
}


.si-eyebrow {display:inline-flex;align-items:center;gap:10px;font-size:.68rem;font-weight:800;letter-spacing:5px;color:var(--accent2);text-transform:uppercase;margin-bottom:20px;font-family:var(--font)}
.si-dot {width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.si-title {font-family:var(--display);font-size:clamp(2.2rem,4.6vw,4.2rem);font-weight:700;letter-spacing:-.035em;line-height:1.02;color:#fff;margin:0}
.si-title .dl-serif-italic {display:inline}

.si-right {padding-bottom:8px}
.si-lede {font-size:1.05rem;color:#b4b4bf;line-height:1.7;margin:0 0 18px;max-width:460px}
.si-lede em {font-family:var(--editorial);font-style:italic;color:var(--accent2);font-weight:500}

/* ============================================
   TIER 2 — PREMIUM BUILD/FIX PROJECTS SECTION
   ============================================ */
.tier2-wrap {
    max-width:1200px;
    margin:56px auto 32px;
    padding:0;
}

.tier2-header {
    display:grid;
    grid-template-columns:auto 1fr;
    gap:48px;
    align-items:start;
    padding:32px 0;
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.08);
    margin-bottom:32px;
}
@media(max-width:820px) {
.tier2-header {grid-template-columns:1fr;gap:20px;padding:32px 0}
}


.tier2-label {display:flex;align-items:flex-start;gap:20px;padding-top:8px}
.t2-num {font-family:var(--editorial);font-size:4rem;font-weight:500;font-style:italic;color:var(--accent2);line-height:.9;font-variation-settings:"opsz" 144;letter-spacing:-2px}
.t2-chapter {display:block;font-size:.62rem;font-weight:800;letter-spacing:3px;color:#6a6a75;text-transform:uppercase;margin-bottom:2px}
.t2-eyebrow {display:block;font-size:.78rem;font-weight:700;letter-spacing:3.5px;color:var(--accent2);text-transform:uppercase}

.tier2-title {font-family:var(--display);font-size:clamp(2rem,4.2vw,3.4rem);font-weight:700;letter-spacing:-1.8px;line-height:1.08;color:#fff;margin:0 0 18px}
.tier2-lede {font-size:1.05rem;color:#b4b4bf;line-height:1.65;max-width:620px;margin:0}

/* PROJECT CARD base */
.project-card {
    background:linear-gradient(145deg,#0f0f16,#0a0a10);
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    padding:36px 32px;
    position:relative;
    box-shadow:0 20px 60px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04);
    overflow:hidden;
    transition:.5s var(--ease);
}
.project-card:hover {
    border-color:rgba(255,92,53,.28);
    transform:translateY(-4px);
    box-shadow:0 30px 80px rgba(0,0,0,.5),0 10px 30px rgba(255,92,53,.1),inset 0 1px 0 rgba(255,255,255,.08);
}
.project-card.project-featured {
    background:linear-gradient(145deg,rgba(255,92,53,.06),rgba(255,140,66,.01),#0a0a12);
    border-color:rgba(255,92,53,.22);
    padding:40px;
    margin-bottom:20px;
}

.pc-meta {display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:12px;flex-wrap:wrap}
.pc-num {font-family:var(--editorial);font-size:1.1rem;font-weight:500;font-style:italic;color:#6a6a75;font-variation-settings:"opsz" 72;letter-spacing:.5px}
.pc-ribbon {padding:5px 14px;background:var(--grad);color:#fff;border-radius:60px;font-size:.62rem;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;box-shadow:0 4px 14px rgba(255,92,53,.45),inset 0 1px 0 rgba(255,255,255,.2)}
.pc-ribbon-abs {position:absolute;top:-1px;left:36px;border-top-left-radius:0;border-top-right-radius:0;padding:7px 18px;z-index:5}
.pc-tag-price {padding:6px 14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:60px;font-family:var(--display);font-size:.82rem;font-weight:800;color:#fff;letter-spacing:-.2px}

.pc-title {font-family:var(--display);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;letter-spacing:-1.2px;line-height:1.12;color:#fff;margin:0 0 12px}
.pc-title .dl-serif-italic {display:inline}
.pc-subtitle {font-size:1rem;color:#b4b4bf;line-height:1.6;margin:0 0 24px;max-width:560px}

/* Featured card grid */
.pc-grid {display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:flex-start}
@media(max-width:900px) {
.pc-grid {grid-template-columns:1fr;gap:28px}
}


/* Big stat row (new — replaces the 4-box grid) */
.pc-big-stats {display:flex;align-items:stretch;gap:0;margin:0 0 28px;padding:22px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.pbs-item {flex:1;text-align:center;padding:0 10px}
.pbs-num {display:block;font-family:var(--display);font-size:clamp(1.5rem,3vw,2rem);font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-1px;line-height:1;margin-bottom:6px}
.pbs-num em {font-family:var(--editorial);font-style:italic;font-size:.7em;color:#8d8d98;-webkit-text-fill-color:#8d8d98;font-weight:500;margin-left:2px}
.pbs-item span {font-size:.72rem;color:#8d8d98;font-weight:600;letter-spacing:.3px}
.pbs-divider {width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.1),transparent)}

/* 2-col includes list (denser) */
.pc-inc-two {display:grid !important;grid-template-columns:1fr 1fr;gap:10px 20px !important}
@media(max-width:640px) {
.pc-inc-two {grid-template-columns:1fr}
}


/* Includes list */
.pc-includes {margin-bottom:26px}
.pc-includes-label {display:block;font-size:.66rem;font-weight:800;letter-spacing:3px;color:var(--accent2);text-transform:uppercase;margin-bottom:14px}
.pc-includes ul {display:flex;flex-direction:column;gap:10px;list-style:none;padding:0;margin:0}
.pc-includes li {display:flex;flex-direction:column;gap:2px;padding-left:22px;position:relative;line-height:1.45}
.pc-includes li::before {content:'';position:absolute;left:0;top:8px;width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,rgba(255,92,53,.3),rgba(255,140,66,.1));border:1.5px solid rgba(255,92,53,.5);transition:.3s}
.project-card:hover .pc-includes li::before {background:var(--grad);border-color:transparent;box-shadow:0 2px 10px rgba(255,92,53,.4)}
.pc-includes li strong {font-size:.9rem;font-weight:600;color:#fff}
.pc-includes li em {font-size:.78rem;color:#8d8d98;font-style:normal}
.pc-includes.compact ul {gap:8px}
.pc-includes.compact li {padding-left:20px}
.pc-includes.compact li::before {top:6px;width:10px;height:10px}

/* CTA row */
.pc-cta-row {display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.pc-cta-row.small .btn {flex:1;min-width:180px}
.pc-link {font-size:.85rem;color:#c9c9d1;font-weight:500;text-decoration:none;border-bottom:1px dashed rgba(255,255,255,.25);padding-bottom:2px;transition:.3s}
.pc-link:hover {color:var(--accent2);border-color:var(--accent2)}
.project-card:hover .pc-browser {transform:scale(1.015);box-shadow:0 40px 90px rgba(0,0,0,.7),0 15px 40px rgba(255,92,53,.18),inset 0 1px 0 rgba(255,255,255,.08)}

/* Duo cards layout */
.project-duo {display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px}
@media(max-width:900px) {
.project-duo {grid-template-columns:1fr}
}


/* Fix-up viz — before/after bars side by side */
.pc-fixup-viz {margin:6px 0 24px;padding:18px 14px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.06);border-radius:14px}
.fxv-metrics {display:flex;flex-direction:column;gap:12px}
.fxv-row {display:grid;grid-template-columns:80px 1fr 32px auto 1fr 32px;gap:8px;align-items:center}
@media(max-width:620px) {
.fxv-row {grid-template-columns:1fr;gap:4px}.fxv-row > * {margin-bottom:4px}
}

.fxv-label {font-size:.72rem;color:#8d8d98;font-weight:600;letter-spacing:.3px}
.fxv-track {height:8px;background:rgba(255,255,255,.05);border-radius:4px;overflow:hidden}
.fxv-fill {height:100%;border-radius:4px;transition:width 1s var(--ease)}
.fxv-fill.poor {background:linear-gradient(90deg,#dc2626,#ef4444)}
.fxv-fill.mid {background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.fxv-fill.good {background:linear-gradient(90deg,#22c55e,#4ade80)}
.fxv-val {font-family:var(--display);font-size:.82rem;font-weight:800;text-align:right}
.fxv-val.poor {color:#ef4444}
.fxv-val.mid {color:#fbbf24}
.fxv-val.good {color:#4ade80}
.fxv-arrow {color:var(--accent);font-weight:700;text-align:center}
.fxv-caption {font-size:.72rem;color:#8d8d98;text-align:center;margin-top:14px;padding-top:12px;border-top:1px dashed rgba(255,255,255,.06);font-style:italic;font-family:var(--editorial)}

/* Brand deliverables — stacked, physical-feeling (stamp + business card + swatches) */
.pc-brand-deliver {position:relative;margin:8px 0 22px;padding:32px 18px 26px;background:radial-gradient(ellipse at top right,rgba(255,92,53,.08),rgba(0,0,0,.45));border:1px solid rgba(255,255,255,.06);border-radius:14px;min-height:260px;overflow:hidden}

.pcbd-stamp {position:absolute;top:18px;right:16px;opacity:.92;transform:rotate(-8deg);transition:transform .6s var(--ease),opacity .4s;filter:drop-shadow(0 4px 12px rgba(255,92,53,.25))}
.project-card:hover .pcbd-stamp {transform:rotate(0) scale(1.08);opacity:1}
.pcbd-stamp svg {display:block}

.pcbd-card {position:relative;width:82%;max-width:300px;padding:18px 20px 16px;background:linear-gradient(145deg,#f5f3ee,#e8e4dc);border-radius:8px;color:#1a1a1a;box-shadow:0 18px 40px rgba(0,0,0,.5),0 6px 16px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.5);font-family:var(--font);transform:rotate(-2deg);transition:transform .5s var(--ease);margin-top:10px}
.project-card:hover .pcbd-card {transform:rotate(0) translateY(-2px)}
.pcbd-card-top {display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid rgba(0,0,0,.12)}
.pcbd-logo {font-family:var(--display);font-size:.95rem;font-weight:800;letter-spacing:-.2px;color:#0a0a12}
.pcbd-logo em {font-family:var(--editorial);font-style:italic;font-weight:500;color:#ff5c35;font-variation-settings:"opsz" 72}
.pcbd-mark {width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#ff5c35,#ff8c42);box-shadow:0 2px 6px rgba(255,92,53,.4)}
.pcbd-card-body {padding:12px 0}
.pcbd-card-body strong {display:block;font-family:var(--display);font-size:.95rem;color:#0a0a12;font-weight:700;letter-spacing:-.2px}
.pcbd-card-body span {display:block;font-size:.72rem;color:#6a6a6a;margin-top:2px}
.pcbd-card-bottom {display:flex;justify-content:space-between;padding-top:10px;border-top:1px dashed rgba(0,0,0,.12);font-size:.68rem;color:#4a4a4a;font-family:monospace;flex-wrap:wrap;gap:6px}

.pcbd-swatches {display:flex;gap:6px;margin-top:14px;padding-top:14px;border-top:1px dashed rgba(255,255,255,.08)}
.pcbd-swatches span {flex:1;height:18px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}

/* Timeline chip */
.pc-timeline-chip {display:inline-flex;align-items:center;gap:10px;padding:8px 16px;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.22);border-radius:60px;margin-bottom:18px;font-size:.8rem;color:#c9c9d1;align-self:flex-start}
.pc-tc-dot {width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.55);animation:wf-pulse 2s ease-in-out infinite;flex-shrink:0}
.pc-timeline-chip strong {color:#4ade80;font-weight:700}

/* Bundle callout */
.tier2-bundle {
    margin-top:32px;
    padding:36px 32px;
    background:linear-gradient(135deg,rgba(255,92,53,.1),rgba(255,140,66,.02),#0a0a12);
    border:1px solid rgba(255,92,53,.3);
    border-radius:24px;
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:40px;
    align-items:center;
    position:relative;
    overflow:hidden;
    box-shadow:0 25px 70px rgba(0,0,0,.4),0 10px 30px rgba(255,92,53,.12),inset 0 1px 0 rgba(255,255,255,.06);
}
.tier2-bundle::before {content:'';position:absolute;top:-40%;right:-10%;width:400px;height:400px;background:radial-gradient(circle,rgba(255,92,53,.18),transparent 60%);pointer-events:none;filter:blur(40px)}
@media(max-width:820px) {
.tier2-bundle {grid-template-columns:1fr;gap:24px;padding:28px 22px}
}


.t2b-eyebrow {display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:3px;color:var(--accent2);text-transform:uppercase;margin-bottom:12px;padding:4px 12px;background:rgba(255,92,53,.12);border:1px solid rgba(255,92,53,.3);border-radius:60px}
.t2b-title {font-family:var(--display);font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:700;letter-spacing:-.8px;line-height:1.2;color:#fff;margin:0 0 12px;position:relative;z-index:2}
.t2b-left > p {font-size:.95rem;color:#c9c9d1;line-height:1.65;margin:0 0 10px;position:relative;z-index:2}
.t2b-anchor {font-size:.82rem;color:#8d8d98;font-style:italic;font-family:var(--editorial);line-height:1.55;border-left:2px solid rgba(255,92,53,.3);padding-left:14px;margin-top:14px !important}
.t2b-anchor strong {color:var(--accent2);font-style:normal;font-family:var(--display);font-weight:700}
.t2b-left strong {color:#fff;font-weight:600}

.t2b-compare {display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap;justify-content:center;position:relative;z-index:2}
.t2b-item {padding:10px 14px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.08);border-radius:10px;text-align:center;min-width:88px}
.t2b-item span {display:block;font-size:.62rem;color:#8d8d98;letter-spacing:.5px;margin-bottom:3px;text-transform:uppercase;font-weight:700}
.t2b-item strong {display:block;font-family:var(--display);font-size:.95rem;font-weight:800;color:#fff;letter-spacing:-.3px}
.t2b-item.t2b-bundle-price {background:var(--grad);border-color:transparent;box-shadow:0 6px 20px rgba(255,92,53,.4)}
.t2b-item.t2b-bundle-price strong {color:#fff;font-size:1.15rem}
.t2b-item.t2b-bundle-price span {color:rgba(255,255,255,.85)}
.t2b-plus,.t2b-equals {font-family:var(--display);font-size:1.2rem;font-weight:800;color:var(--accent2)}
.t2b-right {position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.t2b-right .btn {width:100%}
.tools-teaser-text h2 .dl-serif-italic {display:inline}
.dl-title-sm .dl-serif-italic {font-family:var(--editorial);font-style:italic;font-weight:500;font-variation-settings:"opsz" 144;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-1px}
.vs-note .dl-serif-italic {color:var(--accent2)}
.dl-serif-italic {font-family:var(--editorial);font-style:italic;font-weight:500;font-variation-settings:"opsz" 144;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.pn-intro .si-title {font-size:clamp(2rem,4.2vw,3.2rem);letter-spacing:-1.8px}
.pn-right .si-lede {margin-bottom:14px}
.pn-title .dl-serif-italic {display:inline}

/* ============================================
   OUR WORK (homepage featured) — proof-first section
   ============================================ */
.our-work-home {padding:128px 0 112px;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);position:relative;overflow:hidden}
.our-work-home::before {content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:900px;height:500px;background:radial-gradient(ellipse,rgba(255,92,53,.08) 0%,transparent 60%);pointer-events:none;filter:blur(60px)}
.our-work-home .sec-head {margin-bottom:72px}
.our-work-home .sec-title {font-size:clamp(2.4rem,5.5vw,4.4rem);font-weight:800;letter-spacing:-2.5px;line-height:1.02;max-width:18ch;margin:0 auto 18px}
.our-work-home .sec-desc {font-size:clamp(1rem,1.3vw,1.18rem);max-width:560px;color:#c9c9d1}
.work-grid {display:grid;grid-template-columns:1fr 1fr;gap:24px;position:relative;margin-bottom:56px}
.work-grid > .work-card:first-child {grid-column:1 / -1}
@media(max-width:760px) {
.work-grid {grid-template-columns:1fr;gap:22px}.work-grid > .work-card:first-child {grid-column:auto}
}


.work-card {display:block;text-decoration:none;color:inherit;transition:.55s var(--ease);position:relative}
.work-card::after {content:'';position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:1.1rem;font-weight:700;color:#fff;opacity:0;transform:scale(.8) rotate(-30deg);transition:.5s var(--ease);z-index:4;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:18px 18px;pointer-events:none}
.work-card:hover {transform:translateY(-8px)}
.work-card:hover::after {opacity:1;transform:scale(1) rotate(0);background-color:var(--accent);border-color:var(--accent);box-shadow:0 8px 24px rgba(255,92,53,.45)}

/* Scroll-driven entry scaling (native, no JS) */
@supports (animation-timeline: view()) {

    .work-card {
        animation:work-scale-in linear both;
        animation-timeline:view();
        animation-range:entry 0% cover 35%;
    }
}

.work-frame {border-radius:18px;overflow:hidden;background:#0a0a12;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);transition:.55s var(--ease);position:relative}
.work-card:hover .work-frame {border-color:rgba(255,92,53,.5);box-shadow:0 40px 100px rgba(0,0,0,.65),0 16px 48px rgba(255,92,53,.22),inset 0 1px 0 rgba(255,255,255,.1)}

.wf-chrome {display:flex;align-items:center;gap:12px;padding:14px 20px;background:linear-gradient(180deg,#16161f,#0c0c14);border-bottom:1px solid rgba(255,255,255,.07)}
.wf-dots {display:flex;gap:7px}
.wf-dots i {width:11px;height:11px;border-radius:50%;display:block;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.wf-dots i:nth-child(1) {background:#ff5f57}
.wf-dots i:nth-child(2) {background:#febc2e}
.wf-dots i:nth-child(3) {background:#28c840}
.wf-url {flex:1;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:6px 14px;font-size:.78rem;color:#d0d0da;font-family:monospace;margin-left:8px;letter-spacing:.2px}
.wf-live {width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.6);animation:wf-pulse 2s ease-in-out infinite;flex-shrink:0}

.wf-viewport {position:relative;width:100%;height:0;padding-bottom:62.5%;overflow:hidden;background:#0a0a0f;border-radius:0 0 16px 16px}
.wf-viewport iframe {position:absolute;top:0;left:0;width:1440px!important;max-width:none!important;height:900px!important;border:0;transform-origin:top left;transform:scale(0.3);pointer-events:none;background:#0a0a0f}
/* Magazine-style hover splash — big "VIEW LIVE" reveals across full card */
.wf-hover-overlay {position:absolute;inset:auto 14px 14px auto;background:linear-gradient(135deg,rgba(255,92,53,.95),rgba(255,61,31,.98));display:inline-flex;align-items:center;justify-content:center;opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease);padding:10px 16px;border-radius:999px;box-shadow:0 10px 30px rgba(255,92,53,.35);overflow:hidden}
.wf-hover-overlay::before {content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");mix-blend-mode:overlay;pointer-events:none}
.wf-hover-overlay span {position:relative;display:inline-flex;align-items:center;gap:8px;color:#fff;font-family:var(--display);font-weight:700;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.wf-hover-overlay span::after {content:'→';display:inline-block;font-weight:600;transition:transform .5s var(--ease)}
.work-card:hover .wf-hover-overlay {opacity:1;transform:translateY(0)}
.work-card:hover .wf-hover-overlay span::after {transform:translateX(4px)}
/* iframe slow zoom on hover for richer feel */
.work-card:hover .wf-viewport iframe {transform:scale(.65);transition:transform .8s var(--ease)}

.work-info {padding:28px 4px 0}
.work-meta {display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.work-cat {font-size:.7rem;font-weight:800;letter-spacing:3.5px;color:var(--accent2);text-transform:uppercase}
.work-year {font-size:.72rem;color:#6a6a75;letter-spacing:1.5px;font-weight:600}
.work-info h3 {font-family:var(--display);font-size:clamp(1.5rem,2.4vw,1.95rem);font-weight:800;letter-spacing:-1px;margin-bottom:10px;color:#fff;line-height:1.1;transition:color .35s var(--ease)}
.work-card:hover .work-info h3 {background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.work-info p {font-size:.95rem;color:#b4b4bf;line-height:1.55;margin-bottom:20px}

.work-stats {display:flex;gap:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}
.ws {flex:1}
.ws strong {display:block;font-family:var(--display);font-size:clamp(1.7rem,2.6vw,2.2rem);font-weight:900;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-1px;line-height:.95;margin-bottom:4px}
.ws span {display:block;font-size:.7rem;color:#8d8d98;letter-spacing:1px;margin-top:6px;text-transform:uppercase;font-weight:700}
.bento-features.compact {gap:8px;margin-bottom:14px}
.bento-features.compact .bf strong {font-size:.88rem}

/* === FUNNEL VISUALIZATION === */
.funnel-viz {display:flex;flex-direction:column;gap:10px;padding:18px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.06);border-radius:12px;margin-bottom:18px}
.fv-stage {display:grid;grid-template-columns:80px 1fr;align-items:center;gap:14px;position:relative}
.fv-stage span {font-size:.72rem;color:#8d8d98;font-weight:600;letter-spacing:.5px}
.fv-stage strong {position:absolute;right:10px;top:1px;font-family:var(--display);font-size:.85rem;font-weight:700;color:#fff;z-index:2}
.fv-bar {height:24px;background:linear-gradient(90deg,rgba(255,92,53,.25),rgba(255,140,66,.1));border-radius:6px;border:1px solid rgba(255,92,53,.15);transition:width .8s var(--ease)}
.fv-stage.highlight .fv-bar {background:var(--grad);border-color:transparent;box-shadow:0 2px 16px rgba(255,92,53,.3)}
.fv-stage.highlight strong {color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5)}

/* === SOCIAL POST VISUALIZATION === */
.social-viz {display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:18px}
.sv-post {background:linear-gradient(145deg,#0f0f16,#0a0a10);border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden}
.sv-header {display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.04)}
.sv-avatar {width:32px;height:32px;border-radius:50%;background:var(--grad);box-shadow:0 2px 8px rgba(255,92,53,.3)}
.sv-name {font-size:.78rem;font-weight:700;color:#fff}
.sv-time {font-size:.65rem;color:#6a6a75;margin-top:1px}
.sv-menu {margin-left:auto;color:#6a6a75;font-size:1rem;letter-spacing:1px}
.sv-image {height:120px;background:linear-gradient(135deg,#1a1025,#0a0a15);position:relative;overflow:hidden}
.sv-img-glow {position:absolute;inset:20%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,92,53,.4),transparent 70%);filter:blur(20px);animation:sv-pulse 3s ease-in-out infinite}
.sv-actions {display:flex;gap:14px;padding:10px 14px;font-size:1rem}
.sv-actions span {opacity:.8}
.sv-stats {display:flex;align-items:center;gap:12px;padding:0 14px 12px;flex-wrap:wrap}
.sv-stats strong {font-size:.8rem;color:#fff;font-weight:700}
.sv-stats span {font-size:.7rem;color:#22c55e;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2);padding:2px 8px;border-radius:60px;font-weight:600}
.sv-metrics {display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sv-m {padding:10px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:10px;text-align:center}
.sv-m strong {display:block;font-family:var(--display);font-size:1.05rem;font-weight:700;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sv-m span {display:block;font-size:.62rem;color:#8d8d98;letter-spacing:.5px;margin-top:2px;text-transform:uppercase;font-weight:600}

/* === GROWTH CHART VISUALIZATION === */
.growth-viz {background:rgba(0,0,0,.35);border:1px solid rgba(255,92,53,.15);border-radius:14px;padding:20px 20px 16px;margin-bottom:18px;display:flex;flex-direction:column;gap:14px}
.gv-header {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:4px}
.gv-header > span:first-child {font-size:.78rem;color:#c9c9d1;font-weight:600;letter-spacing:.2px}
.gv-up {font-size:.7rem;font-weight:700;color:#4ade80;padding:4px 10px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);border-radius:60px;white-space:nowrap}
.gv-chart {display:flex;flex-direction:column;gap:6px}
.gv-chart svg {width:100%;height:auto;aspect-ratio:3/1;display:block}

/* === TRUSTED BY — real branded client wordmark cards === */
.trusted-by {padding:104px 0 96px;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 50%,var(--bg) 100%);border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04);position:relative;overflow:hidden}
.trusted-by::before {content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 40% at 50% 50%,rgba(255,107,40,.05),transparent 60%);pointer-events:none}
.trusted-by .container {position:relative;display:flex;flex-direction:column;align-items:center;gap:42px;max-width:1400px}

.tb-head {display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;margin-bottom:40px}
.tb-label {display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.2em;color:rgba(255,255,255,.7);text-transform:uppercase}
.tb-label-dot {width:6px;height:6px;border-radius:999px;background:var(--accent);box-shadow:0 0 10px rgba(255,107,40,.6)}
.tb-title {font-family:var(--display);font-size:clamp(2rem,4.4vw,3.6rem);font-weight:800;letter-spacing:-.04em;line-height:1.04;color:#fff;margin:6px 0 0;max-width:18ch}
.tb-title-em {font-family:var(--editorial);font-style:italic;font-weight:600;color:var(--accent2);letter-spacing:-.025em}
.tb-sub {font-size:clamp(.95rem,1.1vw,1.1rem);color:rgba(255,255,255,.72);line-height:1.6;max-width:520px;margin:4px auto 0}
/* Legacy class kept for compatibility */
.tb-sublabel {font-family:var(--mono);font-size:.58rem;font-weight:500;letter-spacing:.32em;color:rgba(255,255,255,.78);text-transform:uppercase}

.tb-row {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:18px;width:100%}

.tb-card {position:relative;display:flex;flex-direction:column;gap:14px;padding:22px 22px 20px;background:linear-gradient(155deg,rgba(20,20,26,.7),rgba(8,8,14,.85));border:1px solid rgba(255,255,255,.06);border-radius:18px;text-decoration:none;color:inherit;transition:transform .5s var(--ease),border-color .35s ease,background .35s ease,box-shadow .5s ease;isolation:isolate;overflow:hidden}
.tb-card::before {content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,255,255,.04),transparent 60%);pointer-events:none;z-index:-1}
.tb-card::after {content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);opacity:.5;transition:opacity .35s ease}
.tb-card:hover {border-color:rgba(255,107,40,.32);background:linear-gradient(155deg,rgba(28,20,18,.85),rgba(12,8,12,.95));box-shadow:0 28px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,107,40,.12)}
.tb-card:hover::after {opacity:1;background:linear-gradient(90deg,transparent,rgba(255,107,40,.5),transparent)}

/* Card head: logo + verified badge */
.tb-card-head {display:flex;align-items:center;justify-content:space-between;gap:10px}
.tb-logo {width:48px;height:48px;flex-shrink:0;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4));transition:transform .5s var(--ease)}
.tb-card:hover .tb-logo {transform:scale(1.06) rotate(-2deg)}
/* Real raster/SVG client logos: render in a rounded container, no stretch */
.tb-logo-real {object-fit:contain;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:6px;width:52px;height:52px}
.tb-verified {font-family:var(--mono);font-size:.52rem;font-weight:700;letter-spacing:.18em;color:rgba(74,222,128,.85);text-transform:uppercase;padding:4px 7px;border:1px solid rgba(74,222,128,.25);border-radius:999px;background:rgba(74,222,128,.06);white-space:nowrap}

/* Wordmark area — each client gets its own typographic treatment */
.tb-wordmark {display:flex;flex-direction:column;gap:0;line-height:1}
.tb-wordmark strong {font-family:var(--display);font-weight:800;letter-spacing:-.01em;color:#fff;font-size:1.15rem;font-variation-settings:"opsz" 32}
.tb-wordmark span {font-family:var(--display);font-weight:500;font-size:.78rem;letter-spacing:.06em;color:rgba(255,255,255,.7);margin-top:2px;text-transform:uppercase}
.tb-wordmark .tb-serif {font-family:var(--editorial);font-style:italic;font-weight:400;font-size:1.4rem;color:var(--accent2);letter-spacing:-.01em;margin-bottom:-2px}

/* Per-client subtle accent variations */
.tb-card-sc .tb-wordmark strong {letter-spacing:.04em;font-family:var(--mono);font-weight:700;font-size:1rem}
.tb-card-sc .tb-wordmark span {color:rgba(159,180,199,.7)}
.tb-card-vk .tb-wordmark strong {font-size:1.4rem;letter-spacing:.05em}
.tb-card-mf .tb-wordmark strong {font-size:1.1rem;letter-spacing:.02em}
.tb-card-am .tb-wordmark strong {font-size:1.55rem;letter-spacing:-.02em;font-variation-settings:"opsz" 48,"wght" 800}

/* Meta row — industry + region */
.tb-meta {display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.06em;color:rgba(255,255,255,.85);text-transform:uppercase;padding-top:14px;border-top:1px dashed rgba(255,255,255,.07)}
.tb-meta .tb-industry {color:rgba(255,255,255,.72)}
.tb-meta .tb-region::before {content:'·';margin-right:8px;color:rgba(255,255,255,.3)}

/* Result chip — verified outcome */
.tb-result {display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;padding:12px 0 0}
.tb-result strong {font-family:var(--display);font-size:2.2rem;font-weight:800;letter-spacing:-.04em;line-height:1;color:#fff;font-variation-settings:"opsz" 64;background:linear-gradient(180deg,#fff 0%,#ff7a3c 140%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tb-result strong small {font-size:.5em;color:var(--accent2);font-weight:700;margin-left:1px;-webkit-text-fill-color:var(--accent2)}
.tb-result em {font-style:normal;font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:.06em;color:rgba(255,255,255,.85);text-transform:uppercase;line-height:1.3;text-align:right}

@media(max-width:1100px) {
    .tb-row {grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}
@media(max-width:560px) {
    .tb-row {grid-template-columns:1fr}
    .tb-result strong {font-size:1.9rem}
}


/* === INDUSTRIES SECTION === */
.industries {padding:128px 0 112px;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);position:relative;overflow:hidden}
.industries .sec-head {text-align:center;max-width:780px;margin:0 auto 48px}
.industries .sec-title {font-family:var(--display);font-size:clamp(2rem,4vw,3.2rem);font-weight:800;letter-spacing:-1.4px;line-height:1.05;margin:14px 0 16px;color:#fff}
.industries .sec-desc {font-size:clamp(.98rem,1.15vw,1.08rem);color:#b4b4bf;max-width:580px;margin:0 auto;line-height:1.6}
.industries-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1080px;margin:0 auto}
.ind-cell {padding:18px 18px 16px;background:linear-gradient(145deg,rgba(20,20,28,.7),rgba(10,10,16,.7));border:1px solid rgba(255,255,255,.06);border-radius:14px;font-family:var(--display);text-align:center;letter-spacing:-.2px;transition:.35s var(--ease);position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:78px;justify-content:center}
.ind-cell strong {font-size:.96rem;font-weight:700;color:#fff;letter-spacing:-.2px;line-height:1.15}
.ind-cell em {font-style:normal;font-size:.74rem;font-weight:400;color:#8a8a95;letter-spacing:.05px;font-family:var(--font);line-height:1.35}
.ind-cell-cta strong {color:var(--accent2)}
.ind-cell-cta a strong {margin-bottom:0;line-height:1.1}
.ind-cell-cta a span {color:#fff;font-size:.8rem;font-weight:600}
.ind-cell-cta a {display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;width:100%;padding:0;color:var(--accent2);gap:2px;text-decoration:none}
.ind-cell-cta:hover {background:var(--grad);border-color:transparent}
.ind-cell-cta:hover strong,.ind-cell-cta:hover a strong,.ind-cell-cta:hover a span {color:#fff}
.ind-cell:hover {transform:translateY(-3px);border-color:rgba(255,92,53,.35);background:linear-gradient(145deg,rgba(28,18,16,.85),rgba(14,10,12,.85));color:#fff;box-shadow:0 16px 40px rgba(0,0,0,.4),0 0 0 1px rgba(255,92,53,.18)}
.ind-cell-cta {background:linear-gradient(145deg,rgba(255,92,53,.12),rgba(255,107,61,.04));border-color:rgba(255,92,53,.3)}
@media(max-width:980px) {
.industries-grid {grid-template-columns:repeat(3,1fr)}
}

@media(max-width:680px) {
.industries-grid {grid-template-columns:repeat(2,1fr)}
}

@media(max-width:420px) {
.industries-grid {grid-template-columns:1fr}
}


/* === PROBLEM SECTION === */
.problem {padding:128px 0 112px;background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%);position:relative;overflow:hidden}

/* ============================================================
   PROBLEM SECTION — V2 (cinematic network video + glass modals)
   The 4 problem cards float on top of an ambient particle video.
   Scroll position drives card parallax/scale via home.js for a
   "modals reacting to scroll" effect.
   ============================================================ */

/* =============================================================
   TESTIMONIALS — editorial pull-quotes
   Three glass cards with serif quote marks, italic accents in copy,
   and an attribution row with monogram avatar + role/industry.
   ============================================================= */
.testimonials {padding:120px 0 130px;background:#040408;position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04)}
.testimonials::before {content:'';position:absolute;top:-20%;left:50%;transform:translateX(-50%);width:min(900px,100%);height:60%;background:radial-gradient(ellipse 60% 50% at center,rgba(255,107,40,.10) 0%,transparent 70%);pointer-events:none;filter:blur(40px);z-index:1}
/* Video background layer */
.tm-bg {position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.tm-bg-video {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32;filter:saturate(.85) brightness(.7)}
.tm-bg-vignette {position:absolute;inset:0;background:radial-gradient(ellipse 80% 70% at center,transparent 0%,rgba(4,4,8,.55) 60%,rgba(4,4,8,.92) 100%),linear-gradient(180deg,rgba(4,4,8,.5) 0%,transparent 20%,transparent 80%,rgba(4,4,8,.7) 100%)}
.testimonials .container {position:relative;z-index:1;max-width:1320px}

.tm-head {text-align:center;max-width:820px;margin:0 auto 64px}
.tm-eyebrow {display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.22em;color:rgba(255,255,255,.85);text-transform:uppercase;margin-bottom:22px;padding:8px 16px;border:1px solid rgba(255,107,40,.3);border-radius:999px;background:rgba(255,107,40,.05)}
.tm-eyebrow-dot {width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px rgba(255,107,40,.7);animation:nav-status-pulse 2s ease-in-out infinite}
.tm-title {font-family:var(--display);font-size:clamp(2.1rem,4.4vw,3.8rem);font-weight:800;letter-spacing:-.04em;line-height:1.04;color:#fff;margin:0 0 20px}
.tm-title .dl-serif-italic {-webkit-text-fill-color:initial;color:var(--accent2);background:none;-webkit-background-clip:initial;background-clip:initial;font-style:italic;font-weight:500}
.tm-sub {font-size:clamp(1rem,1.2vw,1.16rem);color:rgba(255,255,255,.72);line-height:1.65;max-width:600px;margin:0 auto}

.tm-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:56px}

.tm-card {
  position:relative;
  margin:0;
  padding:38px 32px 28px;
  background:linear-gradient(165deg,rgba(20,16,24,.5) 0%,rgba(10,8,14,.7) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  display:flex;
  flex-direction:column;
  gap:20px;
  transition:transform .55s cubic-bezier(.22,.85,.28,1),border-color .35s ease,box-shadow .5s ease;
  overflow:hidden;
}
.tm-card::before {
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,107,40,.4),transparent);
  opacity:.5;transition:opacity .35s ease;
}
.tm-card::after {
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,107,40,.05),transparent 60%);
  opacity:0;transition:opacity .5s ease;pointer-events:none;
}
.tm-card:hover {
  transform:translateY(-6px);
  border-color:rgba(255,107,40,.32);
  box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,107,40,.14),0 0 60px rgba(255,107,40,.1);
}
.tm-card:hover::before {opacity:1}
.tm-card:hover::after {opacity:1}

.tm-quote-mark {
  position:absolute;top:18px;right:24px;
  font-family:var(--editorial);font-size:6rem;font-style:italic;font-weight:400;
  color:var(--accent2);opacity:.22;line-height:.8;
  pointer-events:none;
  transition:opacity .4s ease,transform .55s cubic-bezier(.22,.85,.28,1);
}
.tm-card:hover .tm-quote-mark {opacity:.35;transform:scale(1.06)}

.tm-quote {
  font-family:var(--display);
  font-size:clamp(1rem,1.18vw,1.12rem);
  font-weight:400;
  font-style:normal;
  color:#f0f0f5;
  line-height:1.6;
  letter-spacing:-.005em;
  margin:0;
  flex:1;
  position:relative;z-index:1;
}
.tm-quote em {
  font-family:var(--editorial);
  font-style:italic;
  font-weight:500;
  color:var(--accent2);
  letter-spacing:-.015em;
  font-size:1.08em;
}

.tm-attr {
  display:flex;align-items:center;gap:14px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.08);
  position:relative;z-index:1;
}
.tm-avatar {
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.04em;
  color:#fff;flex-shrink:0;
  border:1px solid rgba(255,255,255,.12);
}
.tm-avatar-a {background:linear-gradient(135deg,#3a5a8a 0%,#1e3a5a 100%)}
.tm-avatar-b {background:linear-gradient(135deg,#3a7a4a 0%,#1e4a2e 100%)}
.tm-avatar-c {background:linear-gradient(135deg,#3a7aa0 0%,#1e4a6a 100%)}

.tm-attr-meta {display:flex;flex-direction:column;gap:2px;line-height:1.3;min-width:0}
.tm-attr-meta strong {font-family:var(--display);font-size:.9rem;font-weight:600;color:#fff;letter-spacing:-.005em}
.tm-attr-meta span {font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.06em;color:rgba(255,255,255,.65);text-transform:uppercase}

/* Reinforcement strip beneath the quotes */
.tm-strip {
  display:flex;align-items:center;justify-content:center;
  gap:40px;padding:24px 36px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:rgba(255,255,255,.025);
  max-width:780px;margin:0 auto;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.tm-strip-stat {display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;line-height:1}
.tm-strip-stat strong {font-family:var(--display);font-size:1.6rem;font-weight:800;color:#fff;letter-spacing:-.025em}
.tm-strip-stat span {font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.16em;color:rgba(255,255,255,.65);text-transform:uppercase}
.tm-strip-divider {width:1px;height:34px;background:rgba(255,255,255,.1)}

@media (max-width:980px) {
  .tm-grid {grid-template-columns:1fr;gap:18px}
  .tm-head {margin-bottom:48px}
  .tm-strip {flex-wrap:wrap;gap:24px;padding:20px 24px}
  .tm-strip-divider {display:none}
}
@media (max-width:560px) {
  .testimonials {padding:80px 0 88px}
  .tm-card {padding:32px 24px 24px}
  .tm-quote-mark {font-size:4.5rem;top:12px;right:18px}
  .tm-quote {font-size:1rem}
}

.problem-v2 {padding:160px 0 140px;background:#050308;position:relative;overflow:hidden;isolation:isolate}
.problem-v2 .container {position:relative;z-index:2;max-width:1400px}

/* Background stack — video + vignette + faint grid */
.problem-bg {position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.problem-bg-video {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45;filter:saturate(1.25) contrast(1.08);will-change:transform}
.problem-bg-vignette {position:absolute;inset:0;background:
    radial-gradient(ellipse 80% 60% at 50% 50%,transparent 0%,rgba(5,3,8,.45) 60%,rgba(5,3,8,.95) 100%),
    linear-gradient(180deg,rgba(5,3,8,.85) 0%,rgba(5,3,8,.25) 35%,rgba(5,3,8,.25) 65%,rgba(5,3,8,.9) 100%)}
.problem-bg-grid {position:absolute;inset:0;background-image:
    linear-gradient(rgba(255,107,40,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,107,40,.04) 1px,transparent 1px);
    background-size:48px 48px;mask-image:radial-gradient(ellipse 70% 50% at 50% 50%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 70% 50% at 50% 50%,#000 30%,transparent 80%)}

/* Section header — refined within v2 */
.problem-v2 .problem-head {margin-bottom:72px}
/* Editorial eyebrow — horizontal accent line + label + chapter number, no pill */
.problem-eyebrow {display:inline-flex;align-items:center;gap:14px;margin-bottom:28px;font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.24em;color:rgba(255,255,255,.85);text-transform:uppercase}
.problem-eyebrow .pe-bar {display:inline-block;width:40px;height:2px;background:linear-gradient(90deg,transparent,var(--accent),var(--accent2));border-radius:1px}
.problem-eyebrow .pe-label {color:var(--accent2);text-shadow:0 0 14px rgba(255,107,40,.25)}
.problem-eyebrow .pe-num {color:rgba(255,255,255,.82);font-weight:500;letter-spacing:.18em}
.problem-v2 .sec-title {font-family:var(--display);font-size:clamp(2.1rem,4.4vw,3.8rem);font-weight:800;letter-spacing:-.04em;line-height:1.08;color:#fff;margin:0 0 18px;max-width:940px;margin-left:auto;margin-right:auto}
.problem-v2 .sec-title .dl-serif-italic {-webkit-text-fill-color:initial;color:var(--accent2);background:none;-webkit-background-clip:initial;background-clip:initial}
.problem-v2 .sec-desc {font-size:clamp(.98rem,1.15vw,1.1rem);color:rgba(255,255,255,.78);max-width:620px;margin:0 auto;line-height:1.65}

/* Card grid — staggered offset to feel less linear */
.problem-grid-v2 {display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:64px;perspective:1400px}
/* Slight vertical offset per card for an editorial feel */
.problem-grid-v2 > :nth-child(odd) {transform:translateY(0)}
.problem-grid-v2 > :nth-child(even) {transform:translateY(28px)}

/* Glass card — backdrop blur + frost so video shows through */
.pc-glass {position:relative;padding:30px 26px 32px;background:linear-gradient(155deg,rgba(20,12,16,.42),rgba(8,6,12,.55));border:1px solid rgba(255,255,255,.1);border-radius:20px;backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);overflow:hidden;transition:transform .6s cubic-bezier(.22,.85,.28,1),border-color .35s ease,box-shadow .5s ease;will-change:transform}
.pc-glass::before {content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,107,40,.5),transparent);opacity:.6}
.pc-glass::after {content:'';position:absolute;inset:1px;border-radius:inherit;background:linear-gradient(155deg,rgba(255,255,255,.05),transparent 40%);pointer-events:none}
.pc-glass:hover {border-color:rgba(255,107,40,.4);transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,107,40,.18),0 0 80px rgba(255,107,40,.15)}
.problem-grid-v2 > :nth-child(even):hover {transform:translateY(22px)}

/* Internal accent glow that JS will position toward the cursor */
.pc-glow {position:absolute;left:50%;top:0%;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,40,.32),rgba(255,107,40,0) 60%);transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .6s ease,top .15s linear,left .15s linear;filter:blur(20px);z-index:0}
.pc-glass:hover .pc-glow {opacity:1}

/* Top row: number badge + thematic icon */
.pc-top {display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;position:relative;z-index:1}
.pc-glass .pc-num {display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;font-family:var(--mono);font-size:.72rem;font-weight:700;font-style:normal;letter-spacing:.04em;color:var(--accent2);background:rgba(255,107,40,.1);border:1px solid rgba(255,107,40,.32);border-radius:9px;margin:0;font-variation-settings:initial;text-transform:none}
.pc-icon {display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;color:rgba(255,107,40,.62);background:rgba(255,107,40,.05);border:1px solid rgba(255,107,40,.18);border-radius:10px;transition:color .4s ease,background .4s ease,transform .5s var(--ease)}
.pc-glass:hover .pc-icon {color:var(--accent);background:rgba(255,107,40,.12);transform:scale(1.06) rotate(-2deg)}

.pc-glass strong {display:block;font-family:var(--display);font-size:1.18rem;font-weight:700;color:#fff;letter-spacing:-.02em;margin-bottom:8px;line-height:1.3;position:relative;z-index:1}
.pc-glass p {font-size:.93rem;color:rgba(255,255,255,.72);line-height:1.6;margin:0;position:relative;z-index:1}

/* "The cost" callout — separates the symptom from the consequence */
.pc-cost {display:flex;align-items:baseline;gap:10px;margin-top:18px;padding-top:14px;border-top:1px dashed rgba(255,107,40,.18);position:relative;z-index:1}
.pc-cost-label {font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.18em;color:rgba(255,107,40,.7);text-transform:uppercase;flex-shrink:0}
.pc-cost-value {font-family:var(--editorial);font-style:italic;font-size:.92rem;color:rgba(255,255,255,.82);line-height:1.4;font-weight:500;letter-spacing:-.005em}

/* Decorative corner accent (top-right) */
.pc-corner {position:absolute;top:0;right:0;width:42px;height:42px;border-top:1px solid rgba(255,107,40,.35);border-right:1px solid rgba(255,107,40,.35);border-top-right-radius:20px;pointer-events:none;opacity:.6}

/* CTA below — also gets glass treatment */
.problem-v2 .problem-cta {text-align:center;padding:48px 24px 0;border-top:1px solid rgba(255,255,255,.07);position:relative;margin-top:0}
.problem-v2 .problem-cta p {font-family:var(--display);font-size:clamp(1.1rem,1.7vw,1.45rem);font-weight:600;color:#fff;margin:0 auto 26px;max-width:680px;letter-spacing:-.02em;line-height:1.45}
.problem-v2 .problem-cta .dl-serif-italic {-webkit-text-fill-color:initial;color:var(--accent2);background:none;-webkit-background-clip:initial;background-clip:initial}

@media (max-width:980px) {
    .problem-grid-v2 {grid-template-columns:repeat(2,1fr);gap:14px}
    .problem-grid-v2 > :nth-child(even) {transform:translateY(14px)}
    .problem-grid-v2 > :nth-child(even):hover {transform:translateY(8px)}
}
@media (max-width:560px) {
    .problem-v2 {padding:88px 0 72px}
    .problem-grid-v2 {grid-template-columns:1fr}
    .problem-grid-v2 > :nth-child(even) {transform:none}
    .problem-grid-v2 > :nth-child(even):hover {transform:translateY(-6px)}
    .problem-bg-video {opacity:.35}
}
@media (prefers-reduced-motion: reduce) {
    .problem-bg-video {display:none}
    .pc-glass {transition:none}
}
.problem::before {content:'';position:absolute;top:-30%;left:-20%;width:60%;height:80%;background:radial-gradient(circle,rgba(255,107,61,.08),transparent 70%);filter:blur(60px);pointer-events:none}
.problem-head {text-align:center;max-width:880px;margin:0 auto 56px;position:relative}
.problem-head .sec-title {font-family:var(--display);font-size:clamp(2.1rem,4.4vw,3.8rem);font-weight:800;letter-spacing:-.04em;line-height:1.05;margin:14px 0 16px;color:#fff}
.problem-head .sec-desc {font-size:clamp(1rem,1.2vw,1.1rem);color:#b4b4bf;max-width:620px;margin:0 auto;line-height:1.6}
.problem-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:48px;position:relative}
.problem-card {padding:28px 26px 32px;background:linear-gradient(145deg,rgba(20,20,28,.85),rgba(10,10,16,.85));border:1px solid rgba(255,255,255,.06);border-radius:18px;position:relative;transition:.4s var(--ease)}
.problem-card:hover {transform:translateY(-4px);border-color:rgba(255,92,53,.35);background:linear-gradient(145deg,rgba(28,18,16,.95),rgba(14,10,12,.92));box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,92,53,.15)}
.pc-num {display:inline-block;font-family:var(--display);font-size:.78rem;font-weight:700;letter-spacing:3px;color:var(--accent2);margin-bottom:18px;text-transform:uppercase}
.problem-card strong {display:block;font-family:var(--display);font-size:1.16rem;font-weight:700;color:#fff;margin-bottom:8px;letter-spacing:-.3px;line-height:1.3}
.problem-card p {font-size:.94rem;color:#a4a4af;line-height:1.55;margin:0}
.problem-cta {text-align:center;margin-top:8px;padding:32px 24px 12px;border-top:1px solid rgba(255,255,255,.06);position:relative}
.problem-cta p {font-family:var(--display);font-size:clamp(1.05rem,1.6vw,1.4rem);font-weight:600;color:#fff;margin:0 auto 22px;max-width:640px;letter-spacing:-.4px;line-height:1.4}
@media(max-width:980px) {
.problem-grid {grid-template-columns:repeat(2,1fr)}
}

@media(max-width:640px) {
.problem-grid {grid-template-columns:1fr}.problem {padding:72px 0 56px}
}


/* === HOW IT WORKS — alternating chapters with rich phase visuals === */
.how-it-works {padding:128px 0 112px;background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%);position:relative;overflow:hidden}
.how-it-works::before {content:'';position:absolute;top:10%;right:-20%;width:50%;height:80%;background:radial-gradient(circle,rgba(255,107,61,.06),transparent 70%);filter:blur(60px);pointer-events:none}
.how-it-works .sec-head {text-align:center;max-width:880px;margin:0 auto 64px;position:relative}
.how-it-works .sec-title {font-family:var(--display);font-size:clamp(2rem,4.4vw,3.6rem);font-weight:800;letter-spacing:-1.6px;line-height:1.05;margin:14px 0 16px;color:#fff}
.how-it-works .sec-desc {font-size:clamp(1rem,1.2vw,1.12rem);color:#b4b4bf;max-width:680px;margin:0 auto;line-height:1.6}

/* ============================================================
   HOW IT WORKS — command center + scrollable phases
   Sticky visual on the left switches scenes per phase as you
   scroll. Phases on the right have their own deeper detail.
   All classes namespaced `hiw-`. Uses site's orange + Onest +
   italic Fraunces palette for cohesion with the hero.
   ============================================================ */
.how-it-works .container {max-width:1540px;width:min(1540px, calc(100% - 40px));position:relative}

/* Local variables that scope the prototype's tokens to our palette */
.how-it-works {--hiw-line:rgba(255,255,255,.115);--hiw-line-2:rgba(255,255,255,.07);--hiw-quiet:rgba(255,255,255,.44);--hiw-muted:rgba(255,255,255,.7);--hiw-panel:rgba(255,255,255,.055)}

/* Soft ambient orange wash behind the whole section — light, not noisy. */
.how-it-works::after {content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 25%,rgba(255,107,40,.08),transparent 50%),radial-gradient(circle at 88% 78%,rgba(255,107,40,.06),transparent 40%);z-index:0}
.how-it-works > * {position:relative;z-index:1}

/* ---------- Hero strip: eyebrow+headline (left) + intro panel (right) ---------- */
.hiw-hero-strip {display:grid;grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr);gap:44px;align-items:end;margin-bottom:32px}
.hiw-eyebrow {display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;color:var(--accent2);font-family:var(--display);font-size:.78rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.hiw-eyebrow::before {content:'';width:10px;height:10px;border-radius:999px;background:var(--accent);box-shadow:0 0 22px var(--accent);animation:hiw-dot-pulse 1.8s var(--ease) infinite}
@keyframes hiw-dot-pulse {0%,100%{opacity:.42;transform:scale(.82)} 50%{opacity:1;transform:scale(1.1)}}
.hiw-headline {margin:0;max-width:980px;font-family:var(--display);font-size:clamp(2.4rem,5.2vw,4.8rem);font-weight:900;line-height:.96;letter-spacing:-.045em;color:#fff}
.hiw-headline span {font-family:var(--editorial);font-style:italic;font-weight:600;color:#ff7a3c;letter-spacing:-.025em;text-shadow:0 0 32px rgba(255,107,40,.35)}

.hiw-intro-panel {position:relative;overflow:hidden;border:1px solid var(--hiw-line);border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:0 24px 80px rgba(0,0,0,.32);padding:24px 26px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.hiw-intro-panel::before {content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 15% 0%,rgba(255,107,40,.18),transparent 32%),linear-gradient(135deg,rgba(255,255,255,.07),transparent 44%)}
.hiw-intro-panel p {position:relative;margin:0;color:var(--hiw-muted);font-size:clamp(.95rem,1.1vw,1.05rem);line-height:1.7}

/* ---------- Summary bar (4 stat tiles) ---------- */
.hiw-summary-bar {display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 36px}
.hiw-summary-tile {position:relative;min-height:124px;overflow:hidden;border:1px solid var(--hiw-line);border-radius:22px;padding:22px;background:rgba(255,255,255,.04);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 20px 70px rgba(0,0,0,.25)}
.hiw-summary-tile::after {content:'';position:absolute;left:-30%;right:-30%;bottom:-52px;height:92px;background:radial-gradient(circle,rgba(255,107,40,.22),transparent 70%);opacity:.85}
.hiw-summary-tile b {position:relative;z-index:2;display:block;font-family:var(--display);font-size:clamp(1.8rem,3.4vw,2.8rem);font-weight:900;line-height:1;letter-spacing:-.05em;color:#fff;margin-bottom:10px}
.hiw-summary-tile small {position:relative;z-index:2;display:block;color:var(--hiw-muted);font-size:.82rem;line-height:1.4}

/* ---------- Story: sticky command-center + scrollable phases ---------- */
.hiw-story {display:grid;grid-template-columns:minmax(440px,.9fr) minmax(540px,1.1fr);gap:32px;align-items:start;margin-bottom:56px}

/* Sticky left column */
.hiw-command-sticky {position:sticky;top:24px;height:calc(100vh - 48px);min-height:720px;max-height:820px}
.hiw-command-card {height:100%;position:relative;overflow:hidden;border-radius:34px;border:1px solid rgba(255,255,255,.13);background:radial-gradient(circle at 50% 18%,rgba(255,107,40,.18),transparent 34%),radial-gradient(circle at 50% 108%,rgba(255,107,40,.14),transparent 42%),linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:0 40px 120px rgba(0,0,0,.6);isolation:isolate;transform-style:preserve-3d;transition:transform .25s var(--ease)}
/* Subtle concentric guide rings — static, not rotating. Calmer than the prototype. */
.hiw-command-card::before {content:'';position:absolute;inset:-20%;z-index:-2;opacity:.45;background:repeating-radial-gradient(circle at center,rgba(255,107,40,.1) 0 1px,transparent 1px 60px)}

.hiw-command-top {position:absolute;z-index:20;top:22px;left:22px;right:22px;display:flex;justify-content:space-between;align-items:center;gap:14px}
.hiw-live-badge {display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;border:1px solid rgba(255,107,40,.36);background:rgba(0,0,0,.48);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:rgba(255,255,255,.86);font-family:var(--display);font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.hiw-live-badge i {width:8px;height:8px;border-radius:999px;background:var(--accent);box-shadow:0 0 16px var(--accent);animation:hiw-dot-pulse 1.8s var(--ease) infinite}
.hiw-phase-code {color:var(--hiw-quiet);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}

/* Scenes — only one visible at a time. Smooth fade+lift transition. */
/* Inactive scenes: visually + interactively + accessibly hidden.
   visibility:hidden removes them from the accessibility tree and
   from copy/paste; the opacity transition still works because
   visibility transitions instantly at the END of the opacity
   transition (browsers special-case this). */
.hiw-scene {position:absolute;inset:0;z-index:3;opacity:0;visibility:hidden;transform:translateY(22px) scale(.985);transition:opacity .56s var(--ease),transform .8s var(--ease),visibility 0s .56s;pointer-events:none}
.hiw-scene.active {opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto;transition:opacity .56s var(--ease),transform .8s var(--ease),visibility 0s}

/* Glass HUD card used in audit/optimize scenes */
.hiw-hud {position:absolute;overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.025));backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 28px 95px rgba(0,0,0,.5)}
.hiw-hud::before {content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.14),transparent 40%,rgba(255,107,40,.1));pointer-events:none}
.hiw-hud-head {position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.09);color:rgba(255,255,255,.78);font-family:var(--display);font-size:.65rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.hiw-dots {display:flex;gap:6px}
.hiw-dots span {width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.3)}
.hiw-hud-body {position:relative;z-index:2;padding:18px}

/* 01 Audit scene */
.hiw-audit-board {width:82%;height:382px;top:50%;left:50%;transform:translate(-50%,-51%) rotateX(7deg) rotateY(-8deg)}
.hiw-score-grid {display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.hiw-score {padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.25)}
.hiw-score label {display:block;color:var(--hiw-muted);font-size:.78rem;margin-bottom:8px}
.hiw-score strong {display:block;font-family:var(--display);font-size:2rem;font-weight:800;letter-spacing:-.04em;color:#fff}
.hiw-meter {height:6px;margin-top:10px;border-radius:999px;background:rgba(255,255,255,.075);overflow:hidden}
.hiw-meter i {display:block;width:var(--w);height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff4545,var(--accent));box-shadow:0 0 14px rgba(255,107,40,.46)}
.hiw-scan-ring {position:absolute;left:32px;bottom:118px;width:184px;height:184px;border-radius:999px;border:1px solid rgba(255,107,40,.25);background:radial-gradient(circle,transparent 30%,rgba(255,107,40,.05) 31%,transparent 32%),radial-gradient(circle,transparent 58%,rgba(255,107,40,.045) 59%,transparent 60%);box-shadow:inset 0 0 32px rgba(255,107,40,.08),0 0 60px rgba(255,107,40,.09)}
.hiw-scan-ring::before {content:'';position:absolute;inset:50% 0 0 50%;height:1px;background:linear-gradient(90deg,rgba(255,107,40,.95),transparent);transform-origin:0 0;animation:hiw-radar 3s linear infinite}
@keyframes hiw-radar {to{transform:rotate(360deg)}}
.hiw-pin {position:absolute;width:10px;height:10px;border-radius:999px;background:var(--accent);box-shadow:0 0 16px var(--accent)}
.hiw-leak-card {width:262px;right:28px;bottom:120px}
.hiw-leak-card strong {display:block;font-family:var(--display);color:var(--accent);font-size:2.3rem;font-weight:900;letter-spacing:-.04em}
.hiw-leak-card p {margin:8px 0 0;color:var(--hiw-muted);font-size:.8rem;line-height:1.45}

/* 02 Build scene — hub-and-spoke */
.hiw-build-map {position:absolute;inset:108px 36px 124px}
.hiw-core {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:148px;height:148px;border-radius:32px;border:1px solid rgba(255,107,40,.5);display:grid;place-items:center;background:radial-gradient(circle,rgba(255,107,40,.26),rgba(0,0,0,.5));box-shadow:0 0 90px rgba(255,107,40,.25)}
.hiw-core img {width:60px;height:60px;object-fit:contain;mix-blend-mode:screen;filter:drop-shadow(0 4px 16px rgba(255,107,40,.5))}
.hiw-core::before,.hiw-core::after {content:'';position:absolute;inset:-32px;border-radius:42px;border:1px solid rgba(255,107,40,.15);animation:hiw-core-breath 2.8s var(--ease) infinite}
.hiw-core::after {inset:-62px;animation-delay:.45s}
@keyframes hiw-core-breath {0%,100%{opacity:.16;transform:scale(.94)} 50%{opacity:.7;transform:scale(1.03)}}
.hiw-wire {position:absolute;left:50%;top:50%;width:220px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,107,40,.78),transparent);box-shadow:0 0 16px rgba(255,107,40,.4);transform-origin:left center}
.hiw-module {position:absolute;width:148px;min-height:68px;padding:13px 14px 28px;border-radius:14px;border:1px solid rgba(255,107,40,.22);background:linear-gradient(145deg,rgba(20,16,20,.85),rgba(8,6,8,.85));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 18px 60px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);font-family:var(--display);font-size:.82rem;font-weight:800;color:#fff;letter-spacing:-.01em}
.hiw-module small {display:block;margin-top:4px;color:var(--hiw-quiet);font-weight:600;font-size:.7rem;letter-spacing:.02em}
/* Tiny Live indicator on each module, image 2 style */
.hiw-module::after {content:'● Live';position:absolute;left:14px;bottom:10px;font-family:var(--display);font-size:.58rem;font-weight:800;letter-spacing:.12em;color:var(--accent);text-transform:uppercase}

/* 03 Launch scene — 4 channel cards */
.hiw-launch-cluster {position:absolute;inset:112px 36px 124px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-content:center}
.hiw-channel {position:relative;overflow:hidden;min-height:140px;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(0,0,0,.4));box-shadow:0 20px 70px rgba(0,0,0,.32);padding:18px}
.hiw-channel::after {content:"LIVE";position:absolute;top:14px;right:14px;padding:4px 8px;border-radius:999px;color:var(--accent);background:rgba(255,107,40,.1);border:1px solid rgba(255,107,40,.32);font-family:var(--display);font-size:.62rem;font-weight:900;letter-spacing:.08em}
.hiw-ch-icon {width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px;border:1px solid rgba(255,107,40,.3);background:rgba(255,107,40,.12);color:var(--accent2);font-family:var(--display);font-size:1.1rem;font-weight:900}
.hiw-channel h3 {margin:0 0 6px;font-family:var(--display);font-size:1.05rem;font-weight:800;color:#fff;letter-spacing:-.02em}
.hiw-channel p {margin:0;color:var(--hiw-muted);font-size:.82rem;line-height:1.45}

/* 04 Optimize scene — chart + mini stats */
.hiw-opt-board {width:88%;height:402px;top:50%;left:50%;transform:translate(-50%,-50%) rotateX(7deg) rotateY(7deg)}
.hiw-chart {width:100%;height:168px;margin:4px 0 14px}
.hiw-mini-stats {display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hiw-mini-stat {padding:14px;border-radius:14px;border:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.28)}
.hiw-mini-stat strong {display:block;font-family:var(--display);color:var(--accent);font-size:1.6rem;font-weight:900;letter-spacing:-.04em}
.hiw-mini-stat span {color:var(--hiw-muted);font-size:.74rem;font-family:var(--display);font-weight:600}

/* 05 Grow scene — big growth board */
.hiw-growth-board {position:absolute;inset:122px 32px 124px;overflow:hidden;border-radius:28px;border:1px solid rgba(255,107,40,.24);background:radial-gradient(circle at 72% 50%,rgba(255,107,40,.22),transparent 32%),linear-gradient(145deg,rgba(255,255,255,.08),rgba(0,0,0,.42));box-shadow:0 32px 110px rgba(0,0,0,.5)}
.hiw-growth-board svg {position:absolute;inset:0;width:100%;height:100%}
.hiw-growth-copy {position:absolute;left:26px;top:26px;z-index:2}
.hiw-growth-copy small {color:var(--hiw-quiet);font-family:var(--display);font-size:.7rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase}
.hiw-growth-copy strong {display:block;margin-top:10px;font-family:var(--display);font-size:clamp(2.2rem,3.6vw,3.6rem);font-weight:900;line-height:.92;letter-spacing:-.05em;color:#fff}

/* Command footer — deliverable + progress orb */
.hiw-command-footer {position:absolute;z-index:20;left:22px;right:22px;bottom:22px;display:grid;grid-template-columns:1fr auto;align-items:end;gap:16px}
.hiw-deliverable {border-radius:20px;border:1px solid rgba(255,107,40,.24);background:rgba(0,0,0,.5);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:16px 18px}
.hiw-deliverable small {display:block;margin-bottom:6px;color:var(--hiw-quiet);font-family:var(--display);font-size:.6rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase}
.hiw-deliverable strong {font-family:var(--display);font-size:1.05rem;font-weight:800;color:#fff;letter-spacing:-.02em}
.hiw-progress-orb {--progress:20%;width:88px;height:88px;border-radius:999px;display:grid;place-items:center;position:relative;background:conic-gradient(var(--accent) var(--progress),rgba(255,255,255,.08) 0);box-shadow:0 0 40px rgba(255,107,40,.18);transition:background .5s var(--ease)}
.hiw-progress-orb::before {content:'';position:absolute;inset:7px;border-radius:inherit;background:#050505}
.hiw-progress-orb span {position:relative;z-index:2;color:var(--hiw-muted);font-family:var(--display);font-size:.72rem;font-weight:900;text-align:center;line-height:1.15}

/* ---------- Steps column (right side) ---------- */
.hiw-steps {position:relative;padding-left:72px}
.hiw-timeline {position:absolute;left:30px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.1);overflow:hidden}
.hiw-timeline-fill {width:100%;height:20%;background:linear-gradient(to bottom,var(--accent),transparent);box-shadow:0 0 18px var(--accent);transition:height .45s var(--ease)}

.hiw-phase {min-height:80vh;display:flex;align-items:center;position:relative}
/* Hexagonal phase marker — engineered/blueprint feel, swap for the round dot. */
.hiw-phase-dot {position:absolute;left:-60px;top:50%;width:34px;height:34px;transform:translateY(-50%);background:#050505;border:none;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);transition:.35s var(--ease);display:grid;place-items:center}
/* Outer ring around the hex — same shape, larger, gives a halo. */
.hiw-phase-dot::before {content:'';position:absolute;inset:-5px;background:rgba(255,107,40,.18);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);transition:.35s var(--ease);z-index:-1;opacity:0}
/* Inner colored hex face. */
.hiw-phase-dot::after {content:'';position:absolute;inset:3px;background:#0a0a0e;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);border:none}
.hiw-phase.active .hiw-phase-dot {background:var(--accent);box-shadow:0 0 30px rgba(255,107,40,.55)}
.hiw-phase.active .hiw-phase-dot::before {opacity:1;background:rgba(255,107,40,.4)}
.hiw-phase.active .hiw-phase-dot::after {background:linear-gradient(135deg,#ff7a3c,#ff5722);inset:4px}

.hiw-phase-card {width:100%;position:relative;overflow:hidden;border-radius:28px;border:1px solid rgba(255,255,255,.115);background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.02));box-shadow:0 22px 80px rgba(0,0,0,.3);padding:30px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:transform .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease)}
.hiw-phase-card::before {content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s var(--ease);background:radial-gradient(circle at 0 0,rgba(255,107,40,.18),transparent 34%),linear-gradient(120deg,transparent,rgba(255,255,255,.04),transparent)}
.hiw-phase.active .hiw-phase-card {transform:translateX(10px);border-color:rgba(255,107,40,.42);background:linear-gradient(145deg,rgba(255,107,40,.08),rgba(255,255,255,.03))}
.hiw-phase.active .hiw-phase-card::before {opacity:1}

.hiw-phase-meta {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;position:relative;z-index:2}
.hiw-phase-num {color:var(--accent2);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.hiw-phase-time {color:rgba(255,255,255,.72);font-family:var(--display);font-size:.72rem;font-weight:800;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:7px 12px;background:rgba(0,0,0,.26);white-space:nowrap}
.hiw-phase-card h3 {position:relative;z-index:2;margin:0 0 14px;font-family:var(--display);font-size:clamp(1.8rem,3.4vw,2.8rem);font-weight:900;line-height:.96;letter-spacing:-.04em;color:#fff}
.hiw-phase-card h3 span {font-family:var(--editorial);font-style:italic;font-weight:600;color:rgba(255,255,255,.85);letter-spacing:-.02em}
.hiw-phase.active .hiw-phase-card h3 span {color:#ff7a3c;text-shadow:0 0 24px rgba(255,107,40,.3)}
.hiw-phase-lead {position:relative;z-index:2;margin:0 0 22px;max-width:720px;color:rgba(255,255,255,.74);font-size:1rem;line-height:1.6}

.hiw-proof-grid {position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:20px}
.hiw-proof {border-radius:16px;border:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.22);padding:14px}
.hiw-proof strong {display:block;margin-bottom:5px;font-family:var(--display);font-size:.88rem;font-weight:800;color:#fff;letter-spacing:-.01em}
.hiw-proof p {margin:0;color:var(--hiw-quiet);line-height:1.45;font-size:.82rem}

.hiw-chips {position:relative;z-index:2;padding-top:16px;border-top:1px solid rgba(255,255,255,.09);display:flex;align-items:center;flex-wrap:wrap;gap:9px}
.hiw-chips small {color:var(--hiw-quiet);font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-weight:900;font-size:.6rem;margin-right:2px}
.hiw-chip {display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,107,40,.22);background:rgba(255,107,40,.075);color:rgba(255,255,255,.82);border-radius:999px;padding:7px 11px;font-family:var(--display);font-size:.74rem;font-weight:700}
.hiw-chip::before {content:'';width:5px;height:5px;border-radius:999px;background:var(--accent);box-shadow:0 0 10px var(--accent)}

/* Responsive */
@media (max-width:1160px) {
    .hiw-hero-strip,.hiw-story {grid-template-columns:1fr;gap:24px}
    .hiw-command-sticky {position:relative;top:auto;height:auto;min-height:0;max-height:none}
    .hiw-command-card {height:680px}
    .hiw-phase {min-height:auto;padding:30px 0}
    .hiw-phase.active .hiw-phase-card {transform:none}
}
@media (max-width:900px) {
    .hiw-summary-bar {grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px) {
    .hiw-summary-bar {grid-template-columns:1fr}
    .hiw-command-card {height:600px;border-radius:28px}
    .hiw-audit-board,.hiw-opt-board {width:92%;height:300px}
    .hiw-scan-ring,.hiw-leak-card {display:none}
    .hiw-build-map {inset:90px 12px 110px;transform:scale(.78)}
    .hiw-launch-cluster {inset:96px 14px 110px;grid-template-columns:1fr;overflow:hidden}
    .hiw-channel {min-height:auto;padding:14px}
    .hiw-steps {padding-left:44px}
    .hiw-timeline {left:18px}
    .hiw-phase-dot {left:-38px}
    .hiw-phase-card {padding:22px;border-radius:22px}
    .hiw-proof-grid {grid-template-columns:1fr}
    .hiw-command-footer {grid-template-columns:1fr}
    .hiw-progress-orb {display:none}
}

/* === GUARANTEE direct contact strip === */
.g-direct {margin-top:24px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.g-direct-label {font-size:.86rem;color:#9a9aa5;font-weight:500}
.g-direct-row {display:flex;flex-wrap:wrap;gap:14px}
.g-direct-row a {display:inline-flex;align-items:center;gap:10px;padding:10px 16px;background:rgba(255,92,53,.08);border:1px solid rgba(255,92,53,.25);border-radius:999px;color:var(--accent2);text-decoration:none;font-family:var(--display);font-weight:600;font-size:.92rem;transition:.3s var(--ease)}
.g-direct-row a:hover {background:var(--grad);color:#fff;border-color:transparent;transform:translateY(-1px);box-shadow:0 8px 24px rgba(255,92,53,.4)}
.g-direct-row a span {font-size:1rem;line-height:1}
.g-direct-row a strong {color:inherit;font-weight:700}
.faq-item[open] .faq-icon {transform:rotate(45deg);background:var(--accent);color:#fff;border-color:transparent}
.faq-body {padding:0 24px 22px}
.faq-body p {margin:0;font-size:.96rem;color:#b4b4bf;line-height:1.65}

/* === CONTACT === */
.contact {background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%)}
.contact-wrap {display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.contact-left h2 {font-family:var(--display);font-size:1.9rem;font-weight:700;letter-spacing:-.8px;margin-bottom:14px;line-height:1.2}
.contact-left>p {color:var(--text2);font-size:.92rem;line-height:1.7;margin-bottom:32px}
.contact-info-list {display:flex;flex-direction:column;gap:12px}
.ci {display:flex;align-items:center;gap:12px;color:var(--text2);font-size:.88rem}
.ci-icon {width:38px;height:38px;border-radius:10px;background:rgba(255,92,53,.06);border:1px solid rgba(255,92,53,.08);display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0}
.form-2col {display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field {display:flex;flex-direction:column;gap:4px}
.field label,.field>.label {font-size:.72rem;font-weight:600;color:var(--text2);letter-spacing:.2px;display:block}
.field input,.field select,.field textarea {width:100%;padding:13px 15px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-family:var(--font);font-size:.88rem;transition:.4s;outline:none}
.field input::placeholder,.field textarea::placeholder {color:var(--text3)}
.field select {appearance:none;color:var(--text3)}
.field select:valid {color:var(--text)}
.field input:focus,.field select:focus,.field textarea:focus {border-color:var(--accent);box-shadow:0 0 0 3px var(--glow)}
.field textarea {resize:vertical;min-height:90px}
.form-note {display:flex;align-items:center;gap:8px;font-size:.78rem;color:#8d8d98;margin-top:14px;line-height:1.5}
.form-note strong {color:#fff}
.form-dot {width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.5);animation:tag-pulse-v2 2s ease-in-out infinite;flex-shrink:0}

/* ============================================
   MULTI-STEP INTAKE FORM
   ============================================ */
.intake-form {
    display:flex;
    flex-direction:column;
    gap:22px;
    padding:32px;
    background:linear-gradient(145deg,#0f0f16,#0a0a10);
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    box-shadow:0 20px 60px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04);
}

/* Progress bar */
.intake-progress {margin-bottom:6px}
.ip-bar {width:100%;height:4px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden;margin-bottom:12px}
.ip-fill {height:100%;background:var(--grad);border-radius:4px;transition:width .5s var(--ease);box-shadow:0 0 12px rgba(255,92,53,.4)}
.ip-steps {display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap}
.ip-step {font-size:.68rem;font-weight:700;letter-spacing:1px;color:#6a6a75;text-transform:uppercase;transition:.3s}
.ip-step.active {color:var(--accent2);text-shadow:0 0 8px rgba(255,107,61,.4)}
.ip-step.done {color:#22c55e}

/* Steps */
.intake-step {display:none;flex-direction:column;gap:16px;animation:intake-slide .4s var(--ease)}
.intake-step.active {display:flex}

.intake-head {margin-bottom:6px}
.intake-eyebrow {display:inline-block;font-size:.65rem;font-weight:700;letter-spacing:3px;color:var(--accent2);margin-bottom:10px;text-transform:uppercase;opacity:.85}
.intake-head h3 {font-family:var(--display);font-size:1.5rem;font-weight:700;letter-spacing:-.5px;color:#fff;margin-bottom:6px;line-height:1.25}
.intake-head p {font-size:.92rem;color:#a0a0aa;line-height:1.5;margin:0}

/* Choice grid (step 1) */
.choice-grid {display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:620px) {
.choice-grid {grid-template-columns:1fr}
}

.choice {cursor:pointer;position:relative}
.choice input[type="radio"] {position:absolute;opacity:0;pointer-events:none}
.choice-inner {
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:14px 16px;
    background:rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    transition:.3s var(--ease);
    height:100%;
}
.choice:hover .choice-inner {border-color:rgba(255,92,53,.3);background:rgba(255,92,53,.03);transform:translateY(-1px)}
.choice input:checked + .choice-inner {
    border-color:var(--accent);
    background:linear-gradient(145deg,rgba(255,92,53,.12),rgba(255,140,66,.04));
    box-shadow:0 4px 20px rgba(255,92,53,.2),inset 0 1px 0 rgba(255,255,255,.08);
}
.choice-icon {
    display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:10px;
    background:rgba(255,92,53,.1);border:1px solid rgba(255,92,53,.2);
    color:var(--accent2);flex-shrink:0;margin-top:2px;transition:.3s
}
.choice input:checked + .choice-inner .choice-icon {background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(255,92,53,.4)}
.choice strong {display:block;color:#fff;font-weight:600;font-size:.95rem;margin-bottom:3px;letter-spacing:-.1px}
.choice em {display:block;color:#8d8d98;font-size:.78rem;font-style:normal;line-height:1.45}

/* Choice pills (step 3 — budget/timeline) */
.choice-row {display:flex;flex-wrap:wrap;gap:8px}
.choice-pill {cursor:pointer;position:relative}
.choice-pill input[type="radio"] {position:absolute;opacity:0;pointer-events:none}
.choice-pill span {
    display:inline-block;
    padding:10px 18px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    border-radius:60px;
    font-size:.82rem;
    font-weight:600;
    color:#b4b4bf;
    transition:.3s var(--ease);
}
.choice-pill:hover span {border-color:rgba(255,92,53,.3);color:#fff;background:rgba(255,92,53,.04)}
.choice-pill input:checked + span {
    background:var(--grad);
    color:#fff;
    border-color:transparent;
    box-shadow:0 4px 16px rgba(255,92,53,.4),inset 0 1px 0 rgba(255,255,255,.15);
}

.field-optional {font-size:.72rem;color:#6a6a75;font-weight:400;margin-left:6px}

/* Navigation buttons */
.intake-nav {display:flex;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap}
.intake-nav .btn {flex:1;min-width:140px}
.intake-nav > span {flex:0 0 auto}
.intake-back {background:transparent;color:#8d8d98;border-color:rgba(255,255,255,.08)}
.intake-back:hover {color:#fff;border-color:rgba(255,255,255,.2)}

/* Summary on final step */
.intake-summary {padding:20px;background:linear-gradient(145deg,rgba(255,92,53,.08),rgba(255,140,66,.02),rgba(0,0,0,.3));border:1px solid rgba(255,92,53,.3);border-radius:14px;margin-top:4px;display:none}
.intake-summary.visible {display:block;animation:intake-slide .4s var(--ease)}

/* --- Native scroll-driven (Chrome 115+, Edge 115+) --- */
@supports (animation-timeline: view()) {

    .reveal-left {
        animation: reveal-from-left ease-out both;
        animation-timeline: view();
        animation-range: entry 0% entry 85%;
    }
    .reveal-right {
        animation: reveal-from-right ease-out both;
        animation-timeline: view();
        animation-range: entry 0% entry 85%;
    }

    /* Contact form halves */
    .contact-left {
        animation: reveal-from-left ease-out both;
        animation-timeline: view();
        animation-range: entry 0% entry 80%;
    }
}


/* --- JS fallback (Safari, Firefox, older browsers) --- */
@supports not (animation-timeline: view()) {


    .reveal-left {opacity:0;transform:translateX(-70px) rotate(-1.5deg);transition:opacity .9s var(--ease),transform .9s var(--ease)}
    .reveal-left.visible {opacity:1;transform:translateX(0) rotate(0)}

    .reveal-right {opacity:0;transform:translateX(70px) rotate(1.5deg);transition:opacity .9s var(--ease),transform .9s var(--ease)}
    .reveal-right.visible {opacity:1;transform:translateX(0) rotate(0)}
}

@media(max-width:980px) {

    /* Mobile hero: shorter wrapper so the brain stays prominent without forcing
       a heavy scroll cinematic. JS skips reveal-video scrubbing on mobile. */
    /* 200vh on mobile = 100vh of pin runway. Same "brand barrier" feel
       as desktop, just shorter so the brain → logo fade isn't a marathon. */
    .hero-scroll-wrapper {height:200vh;height:200svh;height:200dvh}
    /* Brain brighter on mobile — no scroll cinematic to dim it. */
    .hero-idle {filter:contrast(1.2) saturate(1.3) brightness(1.05) blur(0) !important;opacity:1 !important;transform:none !important}
    /* hero-reveal still hidden on mobile (it's the heavy apex-reveal video scrub).
       hero-final stays in the DOM so the simplified mobile cinematic can fade
       it in as the user scrolls. JS controls its opacity directly. */
    .hero-reveal {display:none !important}
    .hero-content {position:relative;z-index:3}
    /* Stronger orange ambient — replaces the now-darker overlay. */
    .hero-sticky::before {content:'';position:absolute;left:50%;top:50%;width:100vw;height:75vh;background:radial-gradient(ellipse 60% 50% at center,rgba(255,107,40,.32),rgba(255,107,40,.1) 40%,transparent 75%);transform:translate(-50%,-50%);pointer-events:none;z-index:1;mix-blend-mode:screen;animation:none}
    /* Lighter overlay on mobile so brain shows through clearly. */
    .hero-overlay {background:radial-gradient(ellipse 90% 70% at center 50%,transparent 0%,rgba(0,0,0,.2) 65%,rgba(0,0,0,.55) 100%) !important}
    .hero-sticky::after {background:radial-gradient(ellipse at center 50%,transparent 45%,rgba(0,0,0,.25) 75%,rgba(0,0,0,.55) 100%) !important}
    /* Sensible headline size — not "fills the screen" big */
    .hero-h1 .line {font-size:clamp(2.2rem,10vw,3.2rem) !important;letter-spacing:-.035em;line-height:1.04}
    .hero-eyebrow {font-size:.6rem;letter-spacing:.22em}
    .hero-content .hero-p {font-size:.92rem !important;color:rgba(255,255,255,.7) !important;line-height:1.55;max-width:94%}
    /* CTAs — full width but reasonable padding */
    .hero-btns {flex-direction:column;width:100%;gap:10px;max-width:340px;margin:0 auto}
    .hero-btns .btn {width:100%;justify-content:center;padding:14px 22px !important;font-size:.78rem !important;letter-spacing:.12em}
    .hero-content {padding:0 16px}
    .hero-btns {flex-direction:column}
    .hero-btns .btn {width:100%}
    .contact-wrap {grid-template-columns:1fr;gap:40px}
    .form-2col {grid-template-columns:1fr}
}

/* ============================================================
   3D CARD TILT — applied via JS to work + service + tier2 cards
   The transforms come from JS; this just preps perspective + transition.
   ============================================================ */
.tilt {transform-style:preserve-3d;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.tilt:hover {transition:transform .15s linear}
.tilt-inner {transform:translateZ(40px);transition:transform .5s cubic-bezier(.22,.61,.36,1)}

/* Subtle scroll-into-view lift for tilted cards */
.work-card,.project-card,.service-card {will-change:transform}

/* ============================================================
   TYPOGRAPHY POLISH — leverage new Bricolage / Instrument Serif system
   Bricolage is variable (opsz 12-96, wght 300-800) — use opsz at display sizes.
   Instrument Serif italic is the "editorial accent" font.
   ============================================================ */
.hero-h1, .sec-title, .ge-title, .hiw-headline, .tier2-title,
.si-title, .pc-title {font-variation-settings:"opsz" 96;letter-spacing:-.035em}
.dl-serif-italic, .accent-line {font-family:var(--editorial);font-style:italic;font-weight:400;letter-spacing:-.01em}

/* Better optical alignment when serif italic sits next to sans display */
.ge-title span, .hero-h1 .accent-line, .hiw-headline span, .tier2-title .dl-serif-italic {font-size:1.04em;line-height:.92}

/* Contact heading — uses design system instead of inline font */
.contact-heading {font-family:var(--display);font-size:clamp(2.1rem,4.4vw,3.8rem);font-weight:800;color:#fff;margin:18px 0 14px;line-height:1.04;letter-spacing:-.04em}
.contact-heading .gradient-text {background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.contact-heading .dl-serif-italic {-webkit-text-fill-color:initial;color:var(--accent2);background:none;-webkit-background-clip:initial;background-clip:initial}

/* =====  CONTACT v2 — proper closer section  ===== */
.contact-v2 {padding:96px 0 120px;background:linear-gradient(180deg,var(--bg) 0%,#08050c 100%);position:relative;overflow:hidden}
.contact-v2::before {content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 50% 30%,rgba(255,107,40,.08),transparent 60%);pointer-events:none}
.contact-v2 .container {position:relative;text-align:center;max-width:1320px}
.contact-v2 .contact-head {max-width:780px;margin:0 auto 48px}
.contact-v2 .contact-direct {max-width:680px;margin:0 auto}
.contact-head {margin-bottom:48px}
.contact-sub {font-size:clamp(.98rem,1.15vw,1.1rem);color:rgba(255,255,255,.78);line-height:1.65;max-width:560px;margin:0 auto}

/* Proof row */
.contact-proof {list-style:none;margin:0 0 48px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:560px;margin-left:auto;margin-right:auto}
.contact-proof li {padding:18px 14px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:linear-gradient(155deg,rgba(20,16,20,.5),rgba(8,6,12,.6))}
.contact-proof strong {display:block;font-family:var(--display);font-size:clamp(1.5rem,3vw,2rem);font-weight:800;color:var(--accent2);letter-spacing:-.035em;line-height:1;margin-bottom:6px}
.contact-proof span {display:block;font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.06em;color:rgba(255,255,255,.7);text-transform:uppercase;line-height:1.4}

/* Primary CTA cluster */
.contact-cta {display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:48px}
.contact-cta .btn {min-width:260px;padding:18px 32px;font-size:.95rem;letter-spacing:.04em;box-shadow:0 24px 60px rgba(255,107,40,.4)}
.contact-cta-meta {font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:rgba(255,255,255,.85);text-transform:uppercase;margin:0}

/* Direct contact (call / email) */
.contact-direct {padding-top:36px;border-top:1px dashed rgba(255,255,255,.08);max-width:580px;margin:0 auto}
.contact-direct-label {display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;color:rgba(255,255,255,.85);text-transform:uppercase;margin-bottom:18px}
.contact-direct-row {display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact-direct-row a {display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid rgba(255,107,40,.22);border-radius:14px;background:linear-gradient(155deg,rgba(255,107,40,.08),rgba(255,107,40,.01));color:var(--accent2);text-decoration:none;transition:transform .35s var(--ease),border-color .35s ease,background .35s ease}
.contact-direct-row a:hover {transform:translateY(-2px);border-color:rgba(255,107,40,.5);background:linear-gradient(155deg,rgba(255,107,40,.16),rgba(255,107,40,.04))}
.contact-direct-row a svg {flex-shrink:0}
.contact-direct-row a span {display:flex;flex-direction:column;text-align:left;min-width:0}
.contact-direct-row a em {font-style:normal;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;color:rgba(255,255,255,.85);text-transform:uppercase;line-height:1.3}
.contact-direct-row a strong {font-family:var(--display);font-size:.86rem;font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width: 560px) {
    .contact-v2 {padding:64px 0 80px}
    .contact-proof {grid-template-columns:1fr;gap:8px;margin-bottom:36px}
    .contact-proof li {padding:14px 16px;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
    .contact-proof strong {font-size:1.4rem;margin-bottom:0}
    .contact-proof span {text-align:right}
    .contact-cta .btn {width:100%;min-width:0}
    .contact-direct-row {grid-template-columns:1fr}
    .contact-direct-row a strong {font-size:.78rem}
}

/* ============================================================
   REFINED STATUS DOTS — softer, more sophisticated than the old "pulse"
   Old "pulse" was a heavy opacity flicker with a fat box-shadow glow.
   New: tight inner dot + slow concentric ring halo. Reads as "live"
   without screaming.
   ============================================================ */
@keyframes status-halo {
    0%   {transform:scale(1);opacity:.55}
    70%  {transform:scale(2.6);opacity:0}
    100% {transform:scale(2.6);opacity:0}
}
@keyframes status-core {
    0%,100% {opacity:1;transform:scale(1)}
    50%     {opacity:.85;transform:scale(.92)}
}

/* Replace heavy box-shadow glow on dot elements with a calmer core */
.tb-label-dot,
.ge-eyebrow i,
.ge-live-pulse,
.ge-sync-dot,
.ge-pulse-led,
.nav-status i,
.hiw-live-badge i {
    position:relative;
    box-shadow:0 0 0 2px rgba(255,107,40,.12) !important;
    animation:status-core 2.8s ease-in-out infinite !important;
}
.tb-label-dot::after,
.ge-eyebrow i::after,
.ge-live-pulse::after,
.ge-sync-dot::after,
.ge-pulse-led::after,
.nav-status i::after,
.hiw-live-badge i::after {
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    border:1px solid currentColor;
    opacity:0;
    pointer-events:none;
    animation:status-halo 2.8s ease-out infinite;
}

/* Green-themed dots get a green halo (sync, pulse-led) */
.ge-sync-dot,
.ge-pulse-led {
    box-shadow:0 0 0 2px rgba(34,197,94,.14) !important;
}
.ge-sync-dot::after,
.ge-pulse-led::after {
    border-color:#22c55e;
}

/* Hero eyebrow's ::before *IS* the dot — give the parent the halo via ::after */
.hero-eyebrow {position:relative}
.hero-eyebrow::before {animation:status-core 2.8s ease-in-out infinite !important;box-shadow:0 0 0 2px rgba(255,107,40,.14) !important}
.hero-eyebrow::after {content:'';position:absolute;left:14px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:999px;border:1px solid var(--accent);opacity:0;pointer-events:none;animation:status-halo 2.8s ease-out infinite}

/* ============================================================
   GLOBAL POLISH — selection, scrollbar, focus, scroll-progress bar
   ============================================================ */
::selection {background:rgba(255,107,40,.35);color:#fff;text-shadow:none}
::-moz-selection {background:rgba(255,107,40,.35);color:#fff}

/* Subtle agency-grade scrollbar */
html {scrollbar-width:thin;scrollbar-color:rgba(255,107,40,.35) rgba(0,0,0,.2)}
::-webkit-scrollbar {width:10px;height:10px}
::-webkit-scrollbar-track {background:rgba(0,0,0,.4)}
::-webkit-scrollbar-thumb {background:linear-gradient(180deg,rgba(255,107,40,.4),rgba(255,87,34,.6));border-radius:10px;border:2px solid rgba(0,0,0,.6)}
::-webkit-scrollbar-thumb:hover {background:linear-gradient(180deg,rgba(255,107,40,.7),rgba(255,87,34,.9))}

/* Refined focus ring (a11y) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* Scroll-progress bar — pinned to top of viewport */
.scroll-progress {position:fixed;top:0;left:0;right:0;height:2px;z-index:9999;pointer-events:none;background:rgba(255,255,255,.04)}
.scroll-progress i {display:block;height:100%;width:0;background:linear-gradient(90deg,#ff5722 0%,#ff7a3c 50%,#ffb066 100%);box-shadow:0 0 12px rgba(255,107,40,.7);transform-origin:left center;transition:width .12s linear}

/* Scroll-to-top floating action button — appears after scrolling past hero */
.scroll-top {
    position:fixed;
    bottom:24px;
    right:24px;
    z-index:998;
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,107,40,.35);
    border-radius:50%;
    background:rgba(8,6,12,.85);
    backdrop-filter:blur(12px) saturate(1.4);
    -webkit-backdrop-filter:blur(12px) saturate(1.4);
    color:var(--accent2);
    cursor:pointer;
    opacity:0;
    transform:translateY(20px) scale(.9);
    pointer-events:none;
    transition:opacity .4s var(--ease),transform .4s var(--ease),background .35s ease,border-color .35s ease;
    box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 0 1px rgba(255,107,40,.15);
}
.scroll-top.is-visible {opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.scroll-top:hover {background:rgba(255,107,40,.18);border-color:rgba(255,107,40,.6);color:#fff;transform:translateY(-2px) scale(1.05)}
.scroll-top:active {transform:translateY(0) scale(.96)}
@media (max-width:560px) {.scroll-top {bottom:18px;right:18px;width:42px;height:42px}}

/* ============================================================
   MARQUEE PROOF TICKER — sits above Trusted By section
   ============================================================ */
.tb-marquee {position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);background:linear-gradient(90deg,rgba(255,107,40,.04) 0%,rgba(255,107,40,.02) 50%,rgba(255,107,40,.04) 100%);padding:14px 0;mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.tb-marquee-track {display:inline-flex;align-items:center;gap:36px;white-space:nowrap;font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.04em;color:rgba(255,255,255,.72);animation:tb-marquee 38s linear infinite;will-change:transform}
.tb-marquee-track span {display:inline-flex;align-items:baseline;gap:8px}
.tb-marquee-track strong {font-family:var(--display);font-weight:800;font-size:.95rem;color:#fff;letter-spacing:-.01em;font-variation-settings:"opsz" 24}
.tb-marquee-sep {color:var(--accent);font-size:.6rem;font-style:normal;opacity:.6}
@keyframes tb-marquee {from {transform:translateX(0)} to {transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce) {.tb-marquee-track {animation:none}}

/* Push the trusted-by container down so it doesn't double the top spacing */
.trusted-by {padding-top:0}
.trusted-by .container {padding-top:64px}

/* ============================================================
   HOVER SHINE SWEEP — agency-grade gradient sweep on cards
   ============================================================ */
.tb-card, .work-card, .project-card, .service-card, .bento {position:relative;overflow:hidden}
.tb-card .tb-shine, .work-card .ws-shine {position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.08) 48%,transparent 70%);transform:translateX(-100%);transition:transform .9s cubic-bezier(.22,.61,.36,1);z-index:1}
.tb-card:hover .tb-shine, .work-card:hover .ws-shine {transform:translateX(100%)}

/* ============================================================
   HOW IT WORKS — v2 (3-phase clean breakdown)
   ============================================================ */
.hiw-v2 {padding:128px 0 112px;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 50%,var(--bg) 100%);position:relative;overflow:hidden}
.hiw-v2::before {content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 40% at 50% 30%,rgba(255,107,40,.06),transparent 60%);pointer-events:none}
.hiw-v2 .container {position:relative;max-width:1400px}

.hiw2-head {text-align:center;max-width:760px;margin:0 auto 80px}
.hiw2-eyebrow {display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.22em;color:rgba(255,255,255,.7);text-transform:uppercase;padding:7px 14px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.025);margin-bottom:24px}
.hiw2-eyebrow i {width:6px;height:6px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 2px rgba(255,107,40,.15);animation:status-core 2.8s ease-in-out infinite}
.hiw2-headline {font-family:var(--display);font-size:clamp(2.4rem,5vw,4.4rem);font-weight:800;letter-spacing:-.04em;line-height:1.02;color:#fff;margin:0 0 22px}
.hiw2-headline .dl-serif-italic {-webkit-text-fill-color:initial;color:var(--accent2);background:none;-webkit-background-clip:initial;background-clip:initial}
.hiw2-sub {font-size:clamp(1rem,1.2vw,1.15rem);color:rgba(255,255,255,.78);line-height:1.65;max-width:620px;margin:0 auto}

/* Stacked phase list */
.hiw2-phases {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:32px;counter-reset:hiw-phase}
.hiw2-phase {display:grid;grid-template-columns:88px 1fr;gap:28px;align-items:stretch;position:relative}

/* Left rail with big number + vertical connector */
.hiw2-phase-rail {position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:28px}
.hiw2-num {font-family:var(--display);font-size:3.6rem;font-weight:800;letter-spacing:-.05em;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(255,107,40,.55);background:linear-gradient(180deg,rgba(255,107,40,.85),rgba(255,107,40,.05));-webkit-background-clip:text;background-clip:text;text-shadow:0 0 24px rgba(255,107,40,.18)}
.hiw2-connector {flex:1;width:2px;background:linear-gradient(180deg,rgba(255,107,40,.4),rgba(255,107,40,0));margin-top:4px;border-radius:1px;min-height:80px}

/* Phase card */
.hiw2-card {position:relative;border:1px solid rgba(255,255,255,.08);background:linear-gradient(155deg,rgba(20,18,22,.7),rgba(8,8,12,.85));border-radius:24px;padding:32px 36px 30px;overflow:hidden;transition:border-color .4s ease,background .4s ease,transform .5s var(--ease),box-shadow .5s ease}
.hiw2-card::before {content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse 70% 50% at 0% 0%,rgba(255,107,40,.08),transparent 60%);pointer-events:none}
.hiw2-card::after {content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,107,40,.4),transparent);opacity:.5}
.hiw2-phase:hover .hiw2-card {border-color:rgba(255,107,40,.28);transform:translateY(-3px);box-shadow:0 28px 80px rgba(0,0,0,.5)}

/* Card head: meta + title + lead */
.hiw2-card-head {position:relative;z-index:1;margin-bottom:28px;padding-bottom:24px;border-bottom:1px dashed rgba(255,255,255,.08)}
.hiw2-card-meta {display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.hiw2-tag {font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.2em;color:var(--accent2);text-transform:uppercase;padding:5px 10px;border:1px solid rgba(255,107,40,.3);border-radius:999px;background:rgba(255,107,40,.06)}
.hiw2-timeline-chip {display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.14em;color:rgba(255,255,255,.7);text-transform:uppercase;padding:5px 10px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(0,0,0,.3)}
.hiw2-timeline-chip i {width:5px;height:5px;border-radius:999px;background:#4ade80;box-shadow:0 0 0 2px rgba(74,222,128,.18);animation:status-core 2.8s ease-in-out infinite}
.hiw2-title {font-family:var(--display);font-size:clamp(1.7rem,2.6vw,2.4rem);font-weight:800;letter-spacing:-.04em;line-height:1.04;color:#fff;margin:0 0 14px}
.hiw2-title .dl-serif-italic {-webkit-text-fill-color:initial;color:var(--accent2);background:none;-webkit-background-clip:initial;background-clip:initial}
.hiw2-lead {font-size:1rem;color:rgba(255,255,255,.7);line-height:1.65;max-width:680px;margin:0}

/* Card body — two-column stages */
.hiw2-card-body {position:relative;z-index:1;display:grid;grid-template-columns:1.4fr 1fr;gap:36px;align-items:start}
.hiw2-stage {display:flex;flex-direction:column;gap:14px}
.hiw2-stage-label {font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.2em;color:rgba(255,255,255,.82);text-transform:uppercase}

/* Checklist — grid w/ explicit placement so the description column gets full width */
.hiw2-checklist {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.hiw2-checklist li {display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:12px;row-gap:2px;align-items:start}
.hiw2-checklist li i {grid-column:1;grid-row:1 / span 2;width:22px;height:22px;display:grid;place-items:center;border-radius:6px;background:linear-gradient(135deg,rgba(255,107,40,.25),rgba(255,107,40,.06));border:1px solid rgba(255,107,40,.3);font-style:normal;font-size:.7rem;color:var(--accent2);font-weight:700;margin-top:2px;align-self:start}
.hiw2-checklist strong {grid-column:2;grid-row:1;display:block;font-family:var(--display);font-weight:700;color:#fff;font-size:.95rem;letter-spacing:-.01em}
.hiw2-checklist span {grid-column:2;grid-row:2;display:block;font-size:.85rem;color:rgba(255,255,255,.72);line-height:1.55}

/* Deliverable hero — wider column to house the mini-mockup illustrations */
.hiw2-deliver {display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:center;padding:18px;border:1px solid rgba(255,107,40,.22);border-radius:14px;background:linear-gradient(155deg,rgba(255,107,40,.08),rgba(255,107,40,.01));margin-bottom:14px;overflow:hidden}
/* Legacy emoji-icon variant (kept for any callers); new art uses .hiw2-deliver-art */
.hiw2-deliver-icon {width:48px;height:48px;display:grid;place-items:center;font-size:1.5rem;border-radius:12px;background:linear-gradient(135deg,rgba(255,107,40,.18),rgba(255,107,40,.04));border:1px solid rgba(255,107,40,.25)}
/* Mini-mockup illustration container — SVG fills it crisply at any DPI */
.hiw2-deliver-art {width:96px;height:88px;display:grid;place-items:center;position:relative;border-radius:10px;background:linear-gradient(155deg,rgba(255,107,40,.06),rgba(0,0,0,.18));border:1px solid rgba(255,107,40,.18);overflow:hidden;flex-shrink:0;transition:transform .5s var(--ease)}
.hiw2-deliver-art svg {width:100%;height:100%;display:block}
.hiw2-deliver-art::after {content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,107,40,.5),transparent);opacity:.6;pointer-events:none}
.hiw2-phase:hover .hiw2-deliver-art {transform:translateY(-2px) scale(1.02)}
.hiw2-deliver strong {display:block;font-family:var(--display);font-weight:700;font-size:.98rem;color:#fff;letter-spacing:-.01em;margin-bottom:3px;line-height:1.25}
.hiw2-deliver span {display:block;font-size:.78rem;color:rgba(255,255,255,.72);line-height:1.45}
@media (max-width:560px) {
    .hiw2-deliver {grid-template-columns:72px 1fr;gap:12px;padding:14px}
    .hiw2-deliver-art {width:72px;height:68px}
}

/* Pills */
.hiw2-pills {display:flex;flex-wrap:wrap;gap:6px}
.hiw2-pills span {font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.78);padding:5px 10px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.03);text-transform:uppercase}

@media (max-width:900px) {
    .hiw2-phase {grid-template-columns:60px 1fr;gap:18px}
    .hiw2-num {font-size:2.6rem}
    .hiw2-card {padding:22px 22px 22px;border-radius:18px}
    .hiw2-card-body {grid-template-columns:1fr;gap:24px}
}

/* ============================================================
   WORK BRIDGE — slim CTA replacing the iframe-heavy "Our Work" home section
   ============================================================ */
.work-bridge {padding:80px 0;background:var(--bg);position:relative}
.work-bridge .container {max-width:1240px}
.wb-card {display:grid;grid-template-columns:1.6fr 1fr;align-items:center;gap:36px;padding:40px 48px;border:1px solid rgba(255,107,40,.18);border-radius:24px;background:linear-gradient(155deg,rgba(28,18,14,.7),rgba(10,8,12,.85));position:relative;overflow:hidden}
.wb-card::before {content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 100% 50%,rgba(255,107,40,.12),transparent 60%);pointer-events:none}
.wb-card::after {content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,107,40,.5),transparent)}
.wb-left {position:relative;z-index:1}
.wb-eyebrow {display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.22em;color:rgba(255,255,255,.7);text-transform:uppercase;margin-bottom:16px}
.wb-eyebrow i {width:6px;height:6px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 2px rgba(255,107,40,.15);animation:status-core 2.8s ease-in-out infinite}
.wb-title {font-family:var(--display);font-size:clamp(1.7rem,3vw,2.6rem);font-weight:800;letter-spacing:-.035em;line-height:1.05;color:#fff;margin:0 0 12px}
.wb-title .dl-serif-italic {-webkit-text-fill-color:initial;color:var(--accent2);background:none;-webkit-background-clip:initial;background-clip:initial}
.wb-sub {font-size:1rem;color:rgba(255,255,255,.78);line-height:1.6;max-width:540px;margin:0}
.wb-right {position:relative;z-index:1;justify-self:end}
@media (max-width:780px) {
    .wb-card {grid-template-columns:1fr;padding:28px 24px;text-align:center}
    .wb-right {justify-self:center}
}

/* Pseudo-element shine works on cards without their own ::before in use */
.project-card::before, .service-card::before, .bento::before {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.06) 50%,transparent 65%);
    transform:translateX(-100%);
    transition:transform .9s cubic-bezier(.22,.61,.36,1);
    pointer-events:none;
    z-index:1;
    border-radius:inherit;
}
.project-card:hover::before, .service-card:hover::before, .bento:hover::before {transform:translateX(100%)}

/* Hero eyebrow + scroll hint additions */
.hero-eyebrow {display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.22em;color:rgba(255,255,255,.7);text-transform:uppercase;margin-bottom:24px;padding:7px 14px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.025);backdrop-filter:blur(6px)}
.hero-eyebrow::before {content:'';width:7px;height:7px;border-radius:999px;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:nav-status-pulse 2s ease-in-out infinite}

.hero-scroll-hint {position:absolute;left:50%;bottom:38px;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--mono);font-size:.62rem;letter-spacing:.32em;color:rgba(255,255,255,.85);text-transform:uppercase;pointer-events:none}
@media (max-height: 720px) {.hero-scroll-hint {display:none}}
.hero-scroll-hint .hsh-line {position:relative;width:1px;height:48px;background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0));overflow:hidden}
.hero-scroll-hint .hsh-line i {position:absolute;top:-20%;left:0;width:1px;height:24px;background:linear-gradient(180deg,rgba(255,107,40,0),rgba(255,107,40,.9));animation:hsh-fall 1.8s ease-in-out infinite}
@keyframes hsh-fall {0% {transform:translateY(0);opacity:0} 30% {opacity:1} 100% {transform:translateY(72px);opacity:0}}
@media (max-width:980px) {.hero-scroll-hint {bottom:22px}}

/* ============================================================
   KILL THE BUBBLE PILLS — universal editorial eyebrow override
   Removes pill-shaped backgrounds/borders from every section eyebrow,
   tag, chip, and badge. Replaces with a horizontal accent bar +
   label treatment (like .problem-eyebrow). Status indicator dots
   (tiny circles for "live") remain intact.
   ============================================================ */
.hero-eyebrow,
.ge-eyebrow,
.hiw2-eyebrow,
.wb-eyebrow,
.hiw2-tag,
.hiw2-timeline-chip,
.tb-verified {
    /* nuke the pill */
    padding:0 !important;
    border:none !important;
    background:none !important;
    border-radius:0 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    box-shadow:none !important;
}

/* Re-style as editorial: bar + label */
.hero-eyebrow,
.ge-eyebrow,
.hiw2-eyebrow,
.wb-eyebrow {
    display:inline-flex !important;
    align-items:center;
    gap:14px;
    font-family:var(--mono);
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.24em;
    color:rgba(255,255,255,.85);
    text-transform:uppercase;
    margin-bottom:24px;
    position:relative;
}

/* The dot pseudo on hero/ge eyebrows becomes a thin horizontal accent bar */
.hero-eyebrow::before,
.ge-eyebrow > i,
.hiw2-eyebrow > i,
.wb-eyebrow > i {
    content:'';
    display:inline-block !important;
    width:40px !important;
    height:2px !important;
    background:linear-gradient(90deg,transparent,var(--accent),var(--accent2)) !important;
    border-radius:1px !important;
    box-shadow:none !important;
    animation:none !important;
    flex-shrink:0;
    margin:0 !important;
}

/* Kill the leftover halo ring on hero-eyebrow */
.hero-eyebrow::after {display:none !important}

/* HIW phase meta chips — sharp-cornered, no pill */
.hiw2-tag,
.hiw2-timeline-chip {
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:var(--mono);
    font-size:.64rem;
    font-weight:700;
    letter-spacing:.22em;
    color:var(--accent2);
    text-transform:uppercase;
}
.hiw2-timeline-chip {color:rgba(255,255,255,.7)}
.hiw2-timeline-chip i {background:#4ade80}

/* Trusted By "VERIFIED · LIVE" — flat caps with a leading dot, no pill */
.tb-verified {
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-family:var(--mono);
    font-size:.56rem;
    font-weight:700;
    letter-spacing:.22em;
    color:rgba(74,222,128,.85);
    text-transform:uppercase;
    white-space:nowrap;
}
.tb-verified::before {
    content:'';
    width:5px;
    height:5px;
    border-radius:999px;
    background:#4ade80;
    box-shadow:0 0 8px rgba(74,222,128,.5);
    flex-shrink:0;
}

/* ============================================================
   HERO v3 — ALL CAPS rewrite without italic-serif accent line
   The "like software." Instrument Serif italic accent is removed;
   the entire hero now reads as confident uppercase Geist.
   ============================================================ */
.hero-content {text-transform:uppercase}
.hero-content .hero-p {
    text-transform:none;          /* keep body copy mixed-case for readability */
    letter-spacing:0;
}
.hero-content .hero-eyebrow {letter-spacing:.32em}
.hero-h1 .line {letter-spacing:-.045em;font-weight:800;text-transform:uppercase;font-style:normal !important}
/* When .accent-line is removed from the headline, both lines render white in Geist */
.hero-h1 .line.accent-line-off {background:none;-webkit-text-fill-color:initial;color:#fff;font-family:var(--display);font-style:normal}

/* Re-style the hero CTAs to all caps */
.hero-btns .btn {text-transform:uppercase;letter-spacing:.12em;font-size:.86rem;font-weight:700}

/* ============================================================
   TIER 1 SPLIT-SCROLL — sticky video left, cards stream right
   Left pane stays pinned while the user scrolls through audit cards.
   ============================================================ */
/* Break out of the 1200px .container so the cards actually breathe.
   Uses the "full-bleed" trick: pulls back to viewport edges, then re-applies
   a wider max-width centered on screen. */
.tier1-split {
    position:relative;
    left:50%;
    right:50%;
    margin-left:-50vw;
    margin-right:-50vw;
    width:100vw;
    max-width:none;
    padding:24px max(24px, calc((100vw - 1600px) / 2)) 0;
    display:grid;
    grid-template-columns:minmax(0,6fr) minmax(0,5fr);
    gap:48px;
    align-items:start;
    box-sizing:border-box;
}

/* LEFT — sticky video pane */
.tier1-sticky {position:sticky;top:96px;height:calc(100vh - 120px);min-height:560px;align-self:start}
.tier1-video-wrap {position:relative;width:100%;height:100%;border-radius:24px;overflow:hidden;border:1px solid rgba(255,107,40,.18);background:#05030a;box-shadow:0 40px 100px rgba(0,0,0,.55)}
.tier1-video {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
/* Canvas variant — frame-sequence scroll-driven video (no video element). */
.tier1-canvas {position:absolute;inset:0;width:100%;height:100%;display:block;background:#000;will-change:contents}
/* Loader bar (top edge of the panel) while frames pre-load */
.tier1-canvas-loader {position:absolute;left:0;right:0;top:0;height:2px;z-index:3;background:rgba(255,255,255,.05);opacity:1;transition:opacity .6s ease;pointer-events:none}
.tier1-canvas-loader.is-done {opacity:0}
.tier1-canvas-loader-fill {display:block;height:100%;width:0%;background:linear-gradient(90deg,#ff5722,#ff8c42);box-shadow:0 0 12px rgba(255,107,40,.6);transition:width .12s linear}
.tier1-video-overlay {position:absolute;inset:0;background:
    radial-gradient(ellipse 80% 50% at 50% 30%,rgba(255,107,40,.15),transparent 60%),
    linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.15) 30%,rgba(0,0,0,.3) 65%,rgba(0,0,0,.85) 100%)}
.tier1-video-vignette {position:absolute;inset:0;background:radial-gradient(ellipse 100% 80% at 50% 50%,transparent 30%,rgba(0,0,0,.4) 100%);pointer-events:none}

/* Caption overlay on the video — eyebrow + title + sub + step tracker */
.tier1-video-meta {position:absolute;left:0;right:0;bottom:0;padding:36px 36px 36px;z-index:2;display:flex;flex-direction:column;gap:14px}
.tier1-video-meta .problem-eyebrow {margin-bottom:4px;color:#fff}
.tier1-video-title {font-family:var(--display);font-size:clamp(1.9rem,2.6vw,2.7rem);font-weight:800;letter-spacing:-.04em;line-height:1.02;color:#fff;margin:0}

/* Swap container — 4 panes stacked, JS adds .is-on to whichever should show */
.tier1-swap {position:relative;display:grid;min-height:160px}
.tier1-swap-pane {grid-area:1/1;display:flex;flex-direction:column;gap:14px;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .55s cubic-bezier(.22,.85,.28,1),transform .65s cubic-bezier(.22,.85,.28,1);will-change:opacity,transform}
.tier1-swap-pane.is-on {opacity:1;transform:translateY(0);pointer-events:auto}
.tier1-swap-pane .tier1-video-sub strong {color:#fff;font-weight:700}
.tier1-video-title-em {color:var(--accent2);background:linear-gradient(180deg,#ffb066 0%,#ff5722 110%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-style:italic;font-family:var(--editorial);font-weight:400;letter-spacing:-.02em}
.tier1-video-sub {font-size:.95rem;color:rgba(255,255,255,.7);line-height:1.55;margin:0;max-width:420px}

/* Step tracker inside the video meta */
.tier1-step-track {display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:18px;border-top:1px dashed rgba(255,255,255,.18)}
.tier1-step {display:inline-flex;align-items:center;gap:14px;font-family:var(--display);font-size:.92rem;font-weight:600;color:rgba(255,255,255,.85);transition:color .35s ease,transform .35s ease;cursor:default}
.tier1-step i {font-style:normal;font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.82);padding:3px 7px;border:1px solid rgba(255,255,255,.18);border-radius:0;background:rgba(255,255,255,.04);transition:color .35s ease,border-color .35s ease,background .35s ease}
.tier1-step b {font-weight:600;display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.tier1-step b em {font-style:normal;font-weight:400;color:rgba(255,255,255,.85);font-size:.78rem;letter-spacing:.01em}
.tier1-step.is-active b em {color:rgba(255,255,255,.7)}
.tier1-step.is-active {color:#fff;transform:translateX(4px)}
.tier1-step.is-active i {color:var(--accent2);border-color:rgba(255,107,40,.55);background:rgba(255,107,40,.12)}

/* RIGHT — card stream */
.tier1-stream {display:flex;flex-direction:column;gap:48px;padding:24px 0}

/* Each card softly rises into place as it enters viewport.
   Single-axis Y motion is calmer next to the sticky video pane.
   The is-in class is the binary kickoff; the per-card parallax JS adds
   sub-frame motion as you scroll past so the reveal feels continuous. */
.tier1-card {position:relative;padding:34px 36px 32px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:linear-gradient(165deg,#0c0810 0%,#08060c 100%);opacity:0;transform:translate3d(0,48px,0);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1),border-color .35s ease,box-shadow .5s ease;will-change:transform,opacity;min-width:0}
.tier1-card.is-in {opacity:1;transform:translate3d(0, var(--park-y, 0px), 0)}
.tier1-card::before {content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,107,40,.5),transparent);opacity:.6}
.tier1-card:hover {border-color:rgba(255,107,40,.32);box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,107,40,.14)}

/* Card meta row */
.tier1-card-meta {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.tier1-card-tag {font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.22em;color:#4ade80;text-transform:uppercase}
.tier1-card-tag::before {content:'● ';color:#4ade80}
.tier1-card-num {font-family:var(--display);font-size:1.05rem;font-weight:800;color:transparent;-webkit-text-stroke:1px rgba(255,107,40,.45);letter-spacing:-.04em;line-height:1}
.tier1-card-kicker {font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.24em;color:var(--accent2);text-transform:uppercase}
.tier1-card h3 {font-family:var(--display);font-size:clamp(1.5rem,2vw,1.85rem);font-weight:800;color:#fff;letter-spacing:-.035em;line-height:1.1;margin:8px 0 12px}
.tier1-card > p {font-size:.95rem;color:rgba(255,255,255,.78);line-height:1.6;margin:0 0 22px;max-width:520px}

/* Pills below visualization */
.tier1-card-pills {display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.tier1-card-pills span {font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.7);padding:5px 10px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.03);text-transform:uppercase}

/* Responsive: stack on narrow viewports — video becomes a tall hero strip on top */
@media (max-width:980px) {
    .tier1-split {grid-template-columns:1fr;gap:28px;padding:24px 24px 0}
    .tier1-sticky {position:relative;top:0;height:auto;min-height:auto}
    .tier1-video-wrap {height:520px;border-radius:18px}
    .tier1-video-meta {padding:24px}
    .tier1-stream {gap:32px;padding:0}
    .tier1-card {padding:24px 22px}
}
@media (max-width:560px) {
    .tier1-video-wrap {height:420px}
    .tier1-video-title {font-size:1.6rem}
    .tier1-video-sub {font-size:.88rem}
    .tier1-step-track {gap:6px}
}
@media (prefers-reduced-motion: reduce) {
    .tier1-video {display:none}
    .tier1-video-wrap {background:linear-gradient(155deg,rgba(255,107,40,.12),rgba(255,107,40,.02))}
    .tier1-card {opacity:1;transform:none;transition:none}
}

/* ============================================================
   GHOST SECTION NUMBERS — giant outlined numerals behind major sections
   Editorial "magazine spread" accent that adds rhythm + scale.
   ============================================================ */
.sec-ghost-num {
    position:absolute;
    top:48px;
    right:24px;
    font-family:var(--display);
    font-size:clamp(8rem,18vw,16rem);
    font-weight:900;
    letter-spacing:-.06em;
    line-height:.85;
    color:transparent;
    -webkit-text-stroke:1.5px rgba(255,107,40,.18);
    text-stroke:1.5px rgba(255,107,40,.18);
    pointer-events:none;
    z-index:0;
    user-select:none;
    opacity:.65;
    background:linear-gradient(180deg,rgba(255,107,40,.22),rgba(255,107,40,0));
    -webkit-background-clip:text;
    background-clip:text;
}
@media (max-width:720px) {
    .sec-ghost-num {font-size:7rem;top:24px;right:12px;opacity:.4}
}

/* ============================================================
   INDUSTRIES V2 — horizontal-scroll cinematic showcase
   ============================================================ */
.industries-v2 {padding:140px 0 120px;background:#05070b;position:relative;overflow:hidden;isolation:isolate}
.industries-v2::before {content:'';position:absolute;inset:0;background:
    radial-gradient(ellipse 50% 30% at 90% 10%,rgba(255,107,40,.08),transparent 60%),
    radial-gradient(ellipse 50% 30% at 10% 90%,rgba(255,107,40,.06),transparent 60%);
    pointer-events:none;z-index:0}
.industries-v2 .container {position:relative;z-index:1;max-width:none;padding:0}

.ind2-head {max-width:880px;margin:0 auto 56px;padding:0 24px;text-align:center;position:relative;z-index:1}
.ind2-title {font-family:var(--display);font-size:clamp(2.2rem,4.4vw,3.8rem);font-weight:800;letter-spacing:-.04em;line-height:1.05;color:#fff;margin:24px 0 18px}
.ind2-title .dl-serif-italic {-webkit-text-fill-color:initial;color:var(--accent2);background:none;-webkit-background-clip:initial;background-clip:initial}
.ind2-sub {font-size:clamp(.98rem,1.15vw,1.1rem);color:rgba(255,255,255,.78);max-width:620px;margin:0 auto;line-height:1.65}

/* Horizontal scrolling track */
.ind2-track-wrap {position:relative;width:100%;overflow:hidden}
.ind2-track {display:flex;gap:18px;padding:8px 48px 32px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:48px;scrollbar-width:thin;scrollbar-color:rgba(255,107,40,.4) transparent;cursor:grab;user-select:none}
.ind2-track:active,.ind2-track.is-dragging {cursor:grabbing}
.ind2-track.is-dragging .ind2-card {pointer-events:none}
.ind2-track::-webkit-scrollbar {height:6px}
.ind2-track::-webkit-scrollbar-thumb {background:linear-gradient(90deg,rgba(255,107,40,.35),rgba(255,107,40,.6));border-radius:3px}
.ind2-track::-webkit-scrollbar-track {background:rgba(255,255,255,.02)}

/* Edge fades to signal "more here" */
.ind2-track-fade {position:absolute;top:0;bottom:0;width:80px;pointer-events:none;z-index:2}
.ind2-track-fade-l {left:0;background:linear-gradient(90deg,#05070b 0%,rgba(5,7,11,0) 100%)}
.ind2-track-fade-r {right:0;background:linear-gradient(-90deg,#05070b 0%,rgba(5,7,11,0) 100%)}

/* Industry cards */
.ind2-card {flex:0 0 320px;scroll-snap-align:start;display:flex;flex-direction:column;gap:14px;padding:28px 26px 26px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(165deg,#0d0a10 0%,#08060c 100%);transition:transform .5s var(--ease),border-color .35s ease,background .35s ease,box-shadow .5s ease;position:relative;overflow:hidden;text-decoration:none;color:inherit}
.ind2-card::before {content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,107,40,.4),transparent);opacity:.5;transition:opacity .35s ease}
.ind2-card::after {content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,107,40,.06),transparent 60%);opacity:0;transition:opacity .5s ease;pointer-events:none}
.ind2-card:hover {transform:translateY(-6px);border-color:rgba(255,107,40,.35);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,107,40,.14),0 0 60px rgba(255,107,40,.12)}
.ind2-card:hover::before {opacity:1}
.ind2-card:hover::after {opacity:1}

.ind2-card-ico {width:52px;height:52px;display:grid;place-items:center;border-radius:12px;border:1px solid rgba(255,107,40,.25);background:linear-gradient(155deg,rgba(255,107,40,.14),rgba(255,107,40,.02));color:var(--accent2);transition:transform .5s var(--ease)}
.ind2-card-ico svg {width:24px;height:24px}
.ind2-card:hover .ind2-card-ico {transform:scale(1.08) rotate(-3deg);color:#ffb066}

.ind2-card h3 {font-family:var(--display);font-size:1.18rem;font-weight:700;letter-spacing:-.02em;color:#fff;margin:6px 0 0;line-height:1.2}
.ind2-card p {font-size:.88rem;color:rgba(255,255,255,.88);line-height:1.55;margin:0;flex:1}

.ind2-card-stat {display:flex;align-items:baseline;gap:10px;padding-top:14px;border-top:1px dashed rgba(255,255,255,.08);margin-top:auto}
.ind2-card-stat strong {font-family:var(--display);font-size:1.6rem;font-weight:800;color:#ff8c42;letter-spacing:-.035em;line-height:1;font-feature-settings:"tnum"}
.ind2-card-stat span {font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.04em;color:rgba(255,255,255,.85);text-transform:uppercase;line-height:1.35}

/* ===== PHOTO-STYLE INDUSTRY CARDS =====
   Variant that replaces the small SVG icon block with a hero photo at the
   top of the card. Image fills width, square aspect, dark gradient overlay
   for legibility, subtle scale-on-hover. */
.ind2-card-photo {padding:0;overflow:hidden;gap:10px}
.ind2-card-photo > h3,
.ind2-card-photo > p,
.ind2-card-photo > .ind2-card-stat {padding-left:24px;padding-right:24px}
.ind2-card-photo > h3 {margin-top:14px}
.ind2-card-photo > .ind2-card-stat {padding-bottom:22px;margin-top:auto;margin-left:24px;margin-right:24px;padding-left:0;padding-right:0}

.ind2-card-photo-wrap {
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#0a0a0e;
  flex-shrink:0;
}
.ind2-card-img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .8s cubic-bezier(.22,.85,.28,1),filter .5s ease;
  filter:saturate(1.05) contrast(1.05);
  will-change:transform;
}
.ind2-card-photo:hover .ind2-card-img {transform:scale(1.06);filter:saturate(1.15) contrast(1.08)}
/* Soft bottom gradient over photo so card edge blends into card body */
.ind2-card-photo-wrap::after {
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:35%;
  background:linear-gradient(180deg,transparent 0%,rgba(13,10,16,.55) 60%,rgba(13,10,16,.95) 100%);
  pointer-events:none;
}

@media (max-width:560px) {
  .ind2-card-photo-wrap {aspect-ratio:16/10}
}

/* CTA card variant */
.ind2-card-cta {background:linear-gradient(165deg,rgba(28,18,16,.7),rgba(12,8,12,.85));border-color:rgba(255,107,40,.38)}
.ind2-card-cta::before {background:linear-gradient(90deg,transparent,rgba(255,107,40,.6),transparent);opacity:1}
.ind2-card-cta h3 {color:var(--accent2)}
.ind2-card-ico-cta {background:linear-gradient(155deg,rgba(255,107,40,.28),rgba(255,107,40,.06));border-color:rgba(255,107,40,.5);color:#ffb066}
.ind2-card-stat-cta strong {font-family:var(--display);font-size:1.1rem;font-weight:700;color:#fff;letter-spacing:-.01em}

/* Meta row below track */
.ind2-meta {display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 48px 0;max-width:none;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:rgba(255,255,255,.85)}
.ind2-hint {display:inline-flex;align-items:center;gap:8px}
.ind2-hint svg {opacity:.6}
.ind2-count {color:var(--accent2);font-weight:600}

@media (max-width:720px) {
    .ind2-track {padding:8px 20px 24px;gap:14px}
    .ind2-track-fade {width:40px}
    .ind2-card {flex-basis:280px;padding:22px 20px 22px}
    .ind2-meta {padding:14px 20px 0}
}

/* ============================================================
   ANIMATED CHART DRAW-IN — when Growth Engine enters viewport
   The `.ge-chart` path gets a stroke-dasharray + dashoffset animation
   that the home.js triggers via IntersectionObserver.
   ============================================================ */
.ge-chart path[stroke^="url"] {transition:stroke-dashoffset 1.8s cubic-bezier(.22,.85,.28,1) .2s}

/* ============================================================
   HERO HEADLINE 3D PARALLAX — JS sets --rx and --ry on mousemove
   ============================================================ */
.hero-h1 {transition:transform .4s cubic-bezier(.22,.85,.28,1);transform-style:preserve-3d;will-change:transform}

/* Mobile-only section header for Tier 1 — hidden on desktop */
.tier1-mobile-head {display:none}

/* ============================================================
   MOBILE / TABLET — comprehensive fixes for every section
   ============================================================ */
@media (max-width: 880px) {

  /* ---- HERO ---- */
  .hero-content {padding:32px 18px}
  .hero-eyebrow {font-size:.6rem;letter-spacing:.22em}
  .hero-h1 .line {font-size:clamp(2.4rem, 13vw, 4.4rem);letter-spacing:-.04em;line-height:1.02}
  .hero-content .hero-p {font-size:.95rem;line-height:1.55;max-width:96%;margin:0 auto 22px}
  .hero-btns {gap:10px}
  .hero-btns .btn {font-size:.76rem;letter-spacing:.1em;padding:14px 22px}

  /* ---- NAV — refinements for the existing mobile drawer in base.css ---- */
  /* The slide-in drawer is wired in base.css; we just ensure the hamburger
     visibility and tighten link styling here. */
  .menu-btn {display:flex !important;position:relative;z-index:1001}
  .menu-btn.open span:nth-child(1) {transform:translateY(7px) rotate(45deg)}
  .menu-btn.open span:nth-child(2) {opacity:0}
  .menu-btn.open span:nth-child(3) {transform:translateY(-7px) rotate(-45deg)}

  /* ---- GROWTH ENGINE DASHBOARD ---- */
  .ge-head {margin-bottom:36px}
  .ge-title {font-size:clamp(1.7rem, 7vw, 2.4rem);line-height:1.05}
  .ge-sub {font-size:.92rem;line-height:1.55}
  .ge-dashboard, .ge-dashboard-v2 {padding:18px 16px}
  /* Stack dash head — title on first line, range picker below */
  .ge-dash-head {flex-direction:column;align-items:stretch;gap:12px;margin-bottom:18px}
  .ge-dash-title {font-size:.7rem;flex-wrap:wrap;gap:8px}
  .ge-dash-name {font-size:.7rem}
  .ge-dash-status {font-size:.6rem}
  .ge-range {align-self:flex-end;font-size:.65rem;padding:6px 10px}
  .ge-range svg {width:12px;height:12px}
  /* KPIs 2-col, REVENUE spans full row */
  .ge-kpis {grid-template-columns:repeat(2, 1fr);gap:10px;margin-bottom:24px}
  .ge-kpi {padding:14px 14px}
  .ge-kpi-ico {width:30px;height:30px;margin-bottom:10px}
  .ge-kpi-ico svg {width:15px;height:15px}
  .ge-kpi-label {font-size:.56rem;letter-spacing:.16em;margin-bottom:5px}
  .ge-kpi strong {font-size:1.3rem}
  .ge-kpi em {font-size:.65rem}
  .ge-kpi-accent {grid-column:1 / -1}
  /* Chart — smaller Y-axis labels, shorter height */
  .ge-chart-head {flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:10px}
  .ge-chart-head strong {font-size:.78rem}
  .ge-chart-head span {font-size:.62rem}
  .ge-chart-box {grid-template-columns:32px 1fr}
  .ge-chart-y {font-size:.5rem;height:160px;padding-right:5px}
  .ge-chart {height:160px}
  .ge-chart-x {padding-left:40px;font-size:.54rem}
  .ge-chart-callout {transform:translate(-100%, -110%);padding:5px 8px}
  .ge-chart-callout .gcc-date {font-size:.5rem}
  .ge-chart-callout .gcc-val {font-size:.7rem}
  /* Status strip stacks 2x2 + status full row */
  .ge-pulse-strip {grid-template-columns:repeat(2,1fr);gap:14px 0;padding-top:14px}
  .ge-pulse-item {padding:0 10px;grid-template-columns:26px 1fr;gap:8px}
  .ge-pulse-item:nth-child(2n) {border-left:1px solid rgba(255,255,255,.06)}
  .ge-pulse-ico {width:26px;height:26px}
  .ge-pulse-ico svg {width:13px;height:13px}
  .ge-pulse-label {font-size:.52rem;letter-spacing:.16em}
  .ge-pulse-item strong {font-size:.92rem}
  .ge-pulse-item em {font-size:.58rem}
  .ge-pulse-status {grid-column:1/-1;border-left:none !important;padding-top:14px;border-top:1px solid rgba(255,255,255,.06);margin-top:4px}
  /* Phase strip 1-col, icon left + content right */
  .ge-phase-strip {grid-template-columns:1fr;gap:10px}
  .ge-phase {min-height:auto;padding:20px 18px 18px;flex-direction:row;align-items:center;text-align:left;gap:14px;flex-wrap:wrap}
  .ge-phase-ico {margin-bottom:0;width:42px;height:42px;flex-shrink:0}
  .ge-phase-ico svg {width:20px;height:20px}
  .ge-phase strong {font-size:.84rem}
  .ge-phase span {flex-basis:100%;font-size:.78rem;margin-top:0}
  .ge-phase em {margin-top:0;font-size:.58rem}

  /* ---- PROBLEM section ---- */
  .problem-v2 {padding:80px 0 64px}
  .problem-v2 .sec-title {font-size:clamp(1.7rem, 7vw, 2.4rem);line-height:1.1}
  .problem-eyebrow {font-size:.62rem;letter-spacing:.2em;gap:10px}
  .problem-eyebrow .pe-bar {width:28px}
  .problem-grid-v2 {grid-template-columns:1fr;gap:14px}
  .problem-grid-v2 > :nth-child(even) {transform:none}
  .pc-glass {padding:24px 22px 26px}
  .pc-glass strong {font-size:1.06rem}
  .pc-glass p {font-size:.86rem}

  /* ---- HOW IT WORKS — 3 phase cards ---- */
  .hiw-v2 {padding:80px 0 72px}
  .hiw-v2 .hiw2-head {margin-bottom:48px}
  .hiw2-headline {font-size:clamp(1.7rem, 7vw, 2.6rem);line-height:1.05}
  .hiw2-sub {font-size:.92rem;line-height:1.55}
  .hiw2-phases {gap:22px}
  .hiw2-phase {grid-template-columns:48px 1fr;gap:14px}
  .hiw2-num {font-size:2rem}
  .hiw2-connector {min-height:50px}
  .hiw2-card {padding:22px 20px 22px;border-radius:16px}
  .hiw2-card-meta {gap:8px;flex-wrap:wrap}
  .hiw2-tag, .hiw2-timeline-chip {font-size:.58rem;letter-spacing:.2em}
  .hiw2-title {font-size:clamp(1.4rem, 6vw, 1.8rem)}
  .hiw2-lead {font-size:.9rem;line-height:1.6}
  .hiw2-card-body {grid-template-columns:1fr;gap:22px}
  .hiw2-stage-label {font-size:.58rem}
  .hiw2-checklist strong {font-size:.9rem}
  .hiw2-checklist span {font-size:.82rem}
  .hiw2-deliver {grid-template-columns:64px 1fr;gap:14px;padding:14px}
  .hiw2-deliver-art {width:64px;height:60px}
  .hiw2-deliver strong {font-size:.92rem}
  .hiw2-deliver span {font-size:.72rem}

  /* ---- INDUSTRIES horizontal scroll ---- */
  .industries-v2 {padding:80px 0 72px}
  .industries-v2 .ind2-head {margin-bottom:40px;padding:0 18px}
  .ind2-title {font-size:clamp(1.7rem, 7vw, 2.4rem)}
  .ind2-sub {font-size:.92rem}
  .ind2-track {padding:8px 18px 24px;gap:12px}
  .ind2-card {flex-basis:260px;padding:22px 20px}
  .ind2-card h3 {font-size:1.08rem}
  .ind2-card p {font-size:.82rem}
  .ind2-meta {padding:14px 18px 0;flex-direction:column;align-items:flex-start;gap:6px;font-size:.62rem}

  /* Show the mobile-only section header for Tier 1 */
  .tier1-mobile-head {display:block;padding:8px 18px 24px;text-align:left}
  .tier1-mobile-head .problem-eyebrow {margin-bottom:18px}
  .tier1-mobile-head h3 {font-family:var(--display);font-size:clamp(1.7rem,7vw,2.2rem);font-weight:800;letter-spacing:-.04em;line-height:1.04;color:#fff;margin:0 0 12px}
  .tier1-mobile-head h3 .dl-serif-italic {-webkit-text-fill-color:initial;color:var(--accent2);background:none;-webkit-background-clip:initial;background-clip:initial}
  .tier1-mobile-head p {font-size:.92rem;color:rgba(255,255,255,.78);line-height:1.55;margin:0;max-width:540px}

  /* ---- TIER 1 SPLIT-SCROLL — sticky canvas at top, cards scroll past below ----
     Mobile pattern:
     - Canvas pinned to top of viewport (position: sticky)
     - Step tracker stays visible below canvas (also pinned)
     - Long motto + subtitle inside the sticky pane are hidden on mobile
       (the section header above already sets context)
     - Cards scroll past below the pinned pane */
  .tier1-split {padding:8px 16px 0 !important;gap:0;grid-template-columns:1fr;position:relative}
  .tier1-sticky {position:sticky !important;top:60px !important;height:auto;min-height:0;align-self:start;z-index:5;margin-bottom:24px}
  .tier1-video-wrap {height:auto;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,107,40,.18)}
  /* Canvas: 16:10 aspect, fills width */
  /* Fixed canvas height — iOS Safari sometimes ignores aspect-ratio.
     Using explicit height ensures the canvas always renders visibly. */
  .tier1-canvas {position:relative;inset:auto;width:100%;height:230px;display:block;aspect-ratio:auto}
  .tier1-video-overlay, .tier1-video-vignette {display:none}
  /* Meta panel slimmed on mobile — only step tracker shows, hide eyebrow + motto */
  .tier1-video-meta {position:relative;left:auto;right:auto;bottom:auto;padding:12px 14px;background:linear-gradient(180deg,rgba(8,6,12,.95) 0%,rgba(8,6,12,1) 30%,rgba(8,6,12,1) 100%);z-index:2;display:flex;flex-direction:column;gap:0}
  /* Hide the big motto block inside the sticky pane — it would push the
     pane below the fold. The section header above already sets context. */
  .tier1-video-meta .problem-eyebrow,
  .tier1-video-meta .tier1-swap {display:none}
  /* Compact horizontal step tracker — single row, fits in the sticky frame */
  .tier1-step-track {flex-direction:row;justify-content:space-between;gap:6px;padding:0;border-top:none;margin:0}
  .tier1-step {flex:1;font-size:.62rem;gap:6px;padding:0}
  .tier1-step i {font-size:.5rem;padding:2px 4px}
  .tier1-step b {font-size:.62rem;font-weight:600}
  .tier1-step b em {display:none}  /* hide "— Site audit" on the compact row */
  .tier1-video-title {font-size:clamp(1.7rem, 7vw, 2.3rem)}
  .tier1-video-sub {font-size:.92rem;line-height:1.55}
  .tier1-swap {min-height:140px}
  .tier1-step {font-size:.85rem;gap:10px}
  .tier1-step i {font-size:.58rem;padding:2px 6px}
  .tier1-step b em {font-size:.72rem}
  /* Right column cards */
  .tier1-stream {gap:24px;padding:0}
  .tier1-card {padding:24px 22px 22px;border-radius:18px;transform:translate3d(0,30px,0)}
  .tier1-card h3 {font-size:1.4rem}
  .tier1-card > p {font-size:.9rem}
  .tier1-card-meta {gap:10px}
  .tier1-card-tag, .tier1-card-kicker {font-size:.6rem;letter-spacing:.2em}

  /* ---- WORK BRIDGE ---- */
  .wb-card {grid-template-columns:1fr;padding:28px 22px;gap:18px;text-align:center}
  .wb-right {justify-self:center}
  .wb-title {font-size:clamp(1.5rem, 6vw, 2rem)}

  /* ---- TRUSTED BY ---- */
  .tb-marquee-track {font-size:.7rem;gap:24px}
  .tb-marquee-track strong {font-size:.86rem}
  .tb-head {gap:6px}
  .tb-label {font-size:.62rem}
  .tb-sublabel {font-size:.5rem}
  .tb-card {padding:18px 18px 18px}
  .tb-card h3 {font-size:1rem}
  .tb-result strong {font-size:1.7rem}

  /* ---- GHOST SECTION NUMBERS ---- */
  .sec-ghost-num {font-size:5.5rem;top:18px;right:10px;opacity:.4}

  /* ---- SERVICES intro ---- */
  .services-intro {grid-template-columns:1fr;gap:18px}
  .si-title {font-size:clamp(1.7rem, 7vw, 2.4rem)}

  /* ---- CONTACT ---- */
  .contact-heading {font-size:clamp(1.7rem, 7vw, 2.4rem)}

  /* ---- FOOTER ---- */
  .footer-inner {grid-template-columns:1fr;gap:32px;text-align:center}
  .footer-brand {justify-self:center}
  .footer-cols {grid-template-columns:repeat(2,1fr);gap:24px;text-align:left}
}

@media (max-width: 480px) {
  /* ---- Tighter section padding across the board ---- */
  .growth-engine, .growth-engine-slim {padding:64px 0 56px}
  .problem-v2 {padding:64px 0 56px}
  .hiw-v2 {padding:64px 0 56px}
  .industries-v2 {padding:64px 0 56px}
  .trusted-by {padding:0 0 56px}
  .trusted-by .container {padding-top:48px}
  .work-bridge {padding:48px 0}

  /* ---- Hero — phone tightening + stronger text legibility on brain video ---- */
  .hero-h1 .line {font-size:clamp(2rem, 11vw, 3rem);letter-spacing:-.035em;text-shadow:0 2px 16px rgba(0,0,0,.85),0 4px 32px rgba(0,0,0,.6)}
  .hero-content {padding:24px 16px}
  .hero-content::before {inset:-40px -50px;background:radial-gradient(ellipse 90% 75% at center,rgba(0,0,0,.7) 0%,rgba(0,0,0,.35) 60%,transparent 95%)}
  .hero-eyebrow {font-size:.56rem;letter-spacing:.2em;margin-bottom:18px}
  .hero-content .hero-p {font-size:.92rem;margin-bottom:22px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.9)}
  .hero-btns {gap:10px}
  .hero-btns .btn {font-size:.78rem;padding:14px 22px;min-height:48px}

  /* ---- Make hamburger pop ---- */
  .menu-btn {background:rgba(0,0,0,.4) !important;border:1px solid rgba(255,255,255,.12) !important;padding:9px 8px !important;border-radius:8px !important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

  /* ---- Ghost section numbers: get smaller + further out so they don't overlap text ---- */
  .sec-ghost-num {font-size:4.2rem;top:14px;right:-4px;opacity:.28}

  /* ---- Growth Engine: dashboard 2-col KPIs even at this size, smaller padding ---- */
  .ge-head {margin-bottom:28px;padding:0 18px}
  .ge-title {font-size:clamp(1.5rem, 8vw, 2rem);line-height:1.06;margin:14px 0 12px}
  .ge-sub {font-size:.86rem;line-height:1.5}
  .ge-dashboard, .ge-dashboard-v2 {padding:14px 12px;border-radius:18px}
  /* KPIs in 2 columns even on small phones — more compact than stacking 5 cards */
  .ge-kpis {grid-template-columns:repeat(2, 1fr);gap:8px;margin-bottom:18px}
  .ge-kpi {padding:12px 12px}
  .ge-kpi-ico {width:26px;height:26px;border-radius:7px;margin-bottom:8px}
  .ge-kpi-ico svg {width:13px;height:13px}
  .ge-kpi-label {font-size:.52rem;letter-spacing:.14em;margin-bottom:4px}
  .ge-kpi strong {font-size:1.15rem}
  .ge-kpi em {font-size:.58rem;margin-top:4px}
  .ge-kpi-accent {grid-column:1 / -1}
  /* Chart */
  .ge-chart-y {font-size:.46rem;height:140px}
  .ge-chart {height:140px}
  .ge-chart-x {padding-left:36px;font-size:.5rem}
  /* Status strip — single column on phone to avoid cramming */
  .ge-pulse-strip {grid-template-columns:1fr;gap:10px;padding-top:14px}
  .ge-pulse-item {grid-template-columns:24px 1fr;gap:10px;padding:0;border-left:none !important}
  .ge-pulse-item + .ge-pulse-item {padding-top:10px;border-top:1px solid rgba(255,255,255,.05)}
  .ge-pulse-item strong {font-size:.95rem}
  /* Phase strip — tighter card layout */
  .ge-phase {padding:16px 16px;border-radius:14px}
  .ge-phase-ico {width:38px;height:38px}
  .ge-phase strong {font-size:.78rem}
  .ge-phase span {font-size:.74rem;line-height:1.45}

  /* ---- Problem section: tighter ---- */
  .problem-v2 .sec-title {font-size:clamp(1.5rem, 8vw, 2rem);line-height:1.1}
  .problem-v2 .sec-desc {font-size:.86rem}
  .pc-glass {padding:20px 18px 22px;border-radius:16px}
  .pc-glass strong {font-size:1rem}
  .pc-glass p {font-size:.82rem}

  /* ---- HIW: tighter ---- */
  .hiw2-headline {font-size:clamp(1.5rem, 8vw, 2.1rem)}
  .hiw2-sub {font-size:.86rem}
  .hiw2-phases {gap:18px}
  .hiw2-phase {grid-template-columns:38px 1fr;gap:10px}
  .hiw2-num {font-size:1.6rem}
  .hiw2-card {padding:18px 16px 18px;border-radius:14px}
  .hiw2-title {font-size:clamp(1.25rem, 7vw, 1.5rem)}
  .hiw2-lead {font-size:.86rem}
  .hiw2-checklist strong {font-size:.86rem}
  .hiw2-checklist span {font-size:.78rem}
  .hiw2-deliver {grid-template-columns:56px 1fr;gap:12px;padding:12px}
  .hiw2-deliver-art {width:56px;height:54px}
  .hiw2-deliver strong {font-size:.84rem}
  .hiw2-pills span {font-size:.55rem;padding:4px 8px}

  /* ---- Industries: smaller cards + meta ---- */
  .ind2-title {font-size:clamp(1.5rem, 8vw, 2rem)}
  .ind2-sub {font-size:.86rem}
  .ind2-card {flex-basis:240px;padding:18px 16px}
  .ind2-card h3 {font-size:1rem}
  .ind2-card p {font-size:.78rem}
  .ind2-card-stat strong {font-size:1.4rem}

  /* ---- Tier 1: tighter padding + meta block ---- */
  .tier1-split {padding:0 12px !important;gap:18px}
  .tier1-video-wrap {border-radius:16px}
  .tier1-canvas {height:300px;aspect-ratio:auto}
  .tier1-video-meta {padding:20px 18px}
  .tier1-video-title {font-size:clamp(1.5rem, 8vw, 2rem)}
  .tier1-video-sub {font-size:.86rem;line-height:1.55}
  /* On phones the sticky pane shows a compact horizontal step strip,
     descriptions ("— Site audit") are hidden via the 880px rule above */
  .tier1-step-track {gap:6px}
  .tier1-card {padding:20px 18px;border-radius:16px}
  .tier1-card h3 {font-size:1.2rem}
  .tier1-card > p {font-size:.86rem}

  /* ---- Trusted By: tighter cards ---- */
  .tb-marquee {padding:10px 0}
  .tb-marquee-track {font-size:.62rem;gap:18px}
  .tb-card {padding:14px 14px 14px;border-radius:14px}
  .tb-card h3 {font-size:.92rem}
  .tb-result strong {font-size:1.5rem}
  .tb-verified {font-size:.5rem}

  /* ---- Contact section: tighter ---- */
  .contact .container {padding:48px 0 64px !important}
  .contact-heading {font-size:clamp(1.5rem, 8vw, 2rem)}

  /* ---- Footer: smaller ---- */
  .footer-cols {grid-template-columns:1fr 1fr}
  .footer-col h4 {font-size:.84rem}
  .footer-col a {font-size:.8rem}

  /* =============================================================
     MOBILE POLISH — clean, restrained
     ============================================================= */

  /* Card shadows — restrained */
  .pc-glass, .hiw2-card, .tier1-card, .tb-card, .ind2-card, .ge-phase, .wb-card {
    box-shadow:0 12px 28px rgba(0,0,0,.45);
  }

  /* NO opacity-0 reveal — was hiding content when JS hooks didn't fire.
     Everything visible by default. */

  /* Tier1 mobile head — center align, sensible size */
  .tier1-mobile-head {text-align:center;padding:20px 18px 24px}
  .tier1-mobile-head h3 {font-size:clamp(1.8rem,8vw,2.3rem) !important;line-height:1.04 !important}
  .tier1-mobile-head p {margin:0 auto;text-align:center;max-width:100%}

  /* Center section eyebrows */
  .problem-v2 .problem-eyebrow,
  .hiw-v2 .problem-eyebrow,
  .industries-v2 .problem-eyebrow,
  .growth-engine .problem-eyebrow {justify-content:center;display:inline-flex}

  /* Ghost numbers — subtle */
  .sec-ghost-num {opacity:.3 !important;font-size:4rem !important;top:14px !important;right:0 !important}

  /* =============================================================
     CRITICAL MOBILE FIXES — kill broken rendering, simplify content
     ============================================================= */

  /* Force list-style:none on HIW phases (iOS Safari sometimes shows
     default markers even when set elsewhere) */
  ol.hiw2-phases, .hiw2-phases {list-style:none !important;padding:0 !important;margin:0 !important}
  ol.hiw2-phases li, .hiw2-phases li {list-style:none !important;list-style-type:none !important}
  ol.hiw2-phases li::marker, .hiw2-phases li::marker {display:none !important;content:'' !important}

  /* Force inline SVG logos to honor 44x44 size even on iOS */
  svg.tb-logo {width:44px !important;height:44px !important;max-width:44px !important;max-height:44px !important;flex-shrink:0}

  /* KILL the marquee on mobile — user explicitly said it's noise */
  .tb-marquee {display:none}

  /* Card backgrounds + borders — make sure they ALWAYS show, no opacity tricks */
  .tb-card, .pc-glass, .hiw2-card, .tier1-card, .ind2-card, .wb-card {
    opacity:1 !important;
    background-clip:padding-box;
  }

  /* TRUSTED BY — compress to icon + name + stat. Hide industry/region. */
  .tb-card-head {display:flex;align-items:center;justify-content:space-between;gap:10px}
  .tb-meta {display:none !important}
  .tb-card {padding:18px 16px;border:1px solid rgba(255,107,40,.18);background:linear-gradient(155deg,rgba(20,16,20,.85),rgba(8,6,12,.92))}
  .tb-result {padding-top:12px;border-top:1px dashed rgba(255,255,255,.06);margin-top:8px;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .tb-result strong {font-size:1.6rem}
  .tb-result em {font-size:.62rem}
  .tb-wordmark strong {font-size:1.05rem}
  .tb-wordmark span {font-size:.7rem}
  .tb-verified {font-size:.5rem;letter-spacing:.18em}

  /* HIW — compress radically. Hide the deliverable visualization area on mobile,
     show only the checklist + a brief deliverable summary */
  .hiw2-card-body {grid-template-columns:1fr !important;gap:20px}
  .hiw2-lead {font-size:.88rem;line-height:1.55}
  .hiw2-deliver-art {display:none}
  .hiw2-deliver {grid-template-columns:1fr;padding:14px;gap:6px;text-align:left}
  .hiw2-deliver strong {font-size:.92rem}
  .hiw2-deliver span {font-size:.78rem}
  .hiw2-checklist span {font-size:.8rem;line-height:1.5}

  /* TIER 1 CARDS — hide the dense audit visualization, competitor chart, roadmap on mobile
     Keep just title + tagline + pills */
  .tier1-card .audit-viz,
  .tier1-card .comp-chart,
  .tier1-card .roadmap-viz {display:none}
  .tier1-card {padding:20px 18px}
  .tier1-card h3 {font-size:1.3rem}
  .tier1-card > p {font-size:.9rem;margin-bottom:14px}

  /* PROBLEM cards — keep simple */
  .pc-glass {padding:20px 18px;background:linear-gradient(155deg,rgba(20,12,16,.7),rgba(8,6,12,.85))}

  /* Section headings on mobile — slightly smaller, tighter line height */
  .sec-title, .ge-title, .problem-v2 .sec-title, .hiw2-headline, .ind2-title, .wb-title {
    line-height:1.05 !important;
  }

  /* MORE WHITESPACE between cards (less wall-of-text feel) */
  .tier1-stream {gap:32px}
  .hiw2-phases {gap:28px}
  .problem-grid-v2 {gap:16px}

  /* CTAs — recur throughout, full-width, generous */
  .section-cta {flex-direction:column;gap:10px;width:100%;max-width:340px;margin:0 auto;padding-top:24px}
  .section-cta .btn {width:100%;justify-content:center}

  /* Remove decorative section gradients that just add noise */
  .growth-engine::before,
  .industries-v2::before,
  .hiw-v2::before {opacity:.3}
}