/* ==========================================================================
   Home v2 — Strategic product-designer homepage
   Scoped to index.html only. Reuses existing tokens (--light-grey,
   --black-bg, DM Sans / Lato) from css/main.css; does not modify main.css.
   ========================================================================== */

:root {
    --hv2-ink: #111111;
    --hv2-ink-soft: #4a4a4a;
    --hv2-line: rgba(17, 17, 17, 0.1);
    --hv2-surface: #ffffff;
    --hv2-surface-soft: #f4f4f2;
    --hv2-accent: #375DFB;
    --hv2-accent-soft: rgba(55, 93, 251, 0.12);
    --hv2-radius: 20px;
    --hv2-container: 1180px;
}

.hv2 * { box-sizing: border-box; }

/* Homepage-only safety net: the hero's bleeding background shapes are
   allowed to overflow freely (see .hv2-hero), so guard against page-wide
   horizontal scroll at the body level instead of clipping the shapes.
   html gets the same rule: position:fixed elements (the elephant walker's
   off-screen resting transform, in particular) are positioned against the
   viewport, not body's own box — body's overflow-x alone doesn't reliably
   contain them on every mobile engine, but html's does, since the root
   element's overflow becomes the viewport's own scroll behavior. */
html, body { overflow-x: hidden; }

/* Let the hero's background ring/blob show through under the nav instead
   of disappearing behind a flat opaque bar. Solid through the logo/menu
   row for legibility, fading out over the lower half so the shape is
   visible right at the boundary with the hero section. Scoped to this
   stylesheet only (index.html) — other pages keep the solid navbar. */
.navbar-section-dark {
    background-color: transparent;
    background-image: linear-gradient(to bottom, #ebebeb 0%, #ebebeb 55%, rgba(235, 235, 235, 0) 100%);
}

.hv2-container {
    max-width: var(--hv2-container);
    margin: 0 auto;
    padding: 0 40px;
}

@media screen and (max-width: 767px) {
    .hv2-container { padding: 0 20px; }
}

.hv2-section {
    padding: 120px 0;
    position: relative;
}

.hv2-section.tight { padding: 72px 0; }

@media screen and (max-width: 991px) {
    .hv2-section { padding: 88px 0; }
    .hv2-section.tight { padding: 56px 0; }
}

@media screen and (max-width: 479px) {
    .hv2-section { padding: 64px 0; }
}

/* ---------- Reveal-on-scroll ---------- */
.hv2-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.hv2-reveal.hv2-in { opacity: 1; transform: translateY(0); }
.hv2-reveal-1 { transition-delay: .05s; }
.hv2-reveal-2 { transition-delay: .15s; }
.hv2-reveal-3 { transition-delay: .25s; }
.hv2-reveal-4 { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
    .hv2-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Eyebrow / kicker ---------- */
.hv2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--hv2-ink-soft);
}
.hv2-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hv2-accent);
    box-shadow: 0 0 0 4px var(--hv2-accent-soft);
    flex-shrink: 0;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hv2-hero {
    padding: 190px 0 100px;
    position: relative;
    /* main.css's global `.section { overflow: hidden }` also applies here
       (this element carries both classes) and was the real source of the
       top/bottom clipping — this explicit override wins because home-v2.css
       loads after main.css, same specificity, later rule wins.
       Figma's source Section (9:17) has no clip — only the panel (9:50)
       clips its own content — so this stays fully unclipped on both axes.
       Horizontal safety (no page-wide scroll from the bleeding shapes) is
       handled at the body level instead — setting overflow-x here alone
       would trip the CSS spec's overflow-x/y coupling and force an
       implicit overflow-y:auto, which clips vertically same as hidden. */
    overflow: visible;
}
@media screen and (max-width: 991px) { .hv2-hero { padding: 150px 0 72px; } }
@media screen and (max-width: 479px) { .hv2-hero { padding: 120px 0 56px; } }

.hv2-hero-glow {
    position: absolute;
    top: -260px;
    right: -180px;
    width: 680px;
    height: 680px;
    background: radial-gradient(circle at center, var(--hv2-accent-soft) 0%, rgba(55,93,251,0) 70%);
    pointer-events: none;
    z-index: 0;
}

.hv2-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}
.hv2-hero-copy { min-width: 0; }

@media screen and (max-width: 991px) {
    .hv2-hero-inner { grid-template-columns: 1fr; }
    .hv2-hero-visual { display: none; }
}

/* ---------- Hero illustration: abstract product-surface panel ---------- */
.hv2-hero-visual { position: relative; height: 440px; }

/* Large decorative background vectors from the Figma reference, positioned
   relative to the panel (which matches Figma's 440px panel height exactly).
   They bleed past the hero section's edges and get clipped by .hv2-hero's
   own overflow:hidden — matches the source design's intentional bleed. */
.hv2-hero-bg-ring {
    position: absolute;
    left: 248px;
    top: -343px;
    width: 1076px;
    height: 1076px;
    max-width: none; /* override main.css's global img{max-width:100%} — was squashing this into an ellipse */
    pointer-events: none;
}
.hv2-hero-bg-blob {
    position: absolute;
    left: 570px;
    top: -21px;
    width: 432px;
    height: 432px;
    max-width: none;
    pointer-events: none;
}
.hv2-hero-panel {
    position: absolute;
    inset: 0;
    border-radius: 28px;
    border: 1px solid var(--hv2-line);
    background:
        radial-gradient(circle at 26% 18%, rgba(55,93,251,.16), transparent 55%),
        radial-gradient(circle at 82% 78%, rgba(55,93,251,.10), transparent 50%),
        linear-gradient(157deg, #fbfbfa 8%, #f0f0ee 92%);
    overflow: hidden;
}
/* Dead-center radar/target rings, matching the Figma reference exactly. */
.hv2-hero-rings {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
}
.hv2-hero-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px dashed rgba(17,17,17,.14);
    transform: translate(-50%, -50%);
}
/* Radius steps grow by a shrinking increment (50,46,42,38,34,30,26,22,18px)
   as diameter increases, so rings pack tighter toward the edge — reads as
   depth/perspective compression. Largest ring (772px, r=386) comfortably
   covers the panel's corner-to-center distance (~330px) so the pattern
   fills the whole rectangular box instead of leaving bare corners. */
.hv2-hero-ring-1 { width: 160px; height: 160px; }
.hv2-hero-ring-2 { width: 260px; height: 260px; }
.hv2-hero-ring-3 { width: 352px; height: 352px; }
.hv2-hero-ring-4 { width: 436px; height: 436px; }
.hv2-hero-ring-5 { width: 512px; height: 512px; }
.hv2-hero-ring-6 { width: 580px; height: 580px; }
.hv2-hero-ring-7 { width: 640px; height: 640px; }
.hv2-hero-ring-8 { width: 692px; height: 692px; }
.hv2-hero-ring-9 { width: 736px; height: 736px; }
.hv2-hero-ring-10 { width: 772px; height: 772px; }
.hv2-hero-ring-dot {
    width: 46px;
    height: 46px;
    background: #dcdcdc;
}

/* Outer element: absolute position + one-time entrance transition only. */
.hv2-float-card {
    position: absolute;
    opacity: 0;
    transform: translateY(16px) scale(.94);
    transition: opacity .6s cubic-bezier(.22,1,.36,1) var(--hv2-float-delay, 0s),
                transform .6s cubic-bezier(.22,1,.36,1) var(--hv2-float-delay, 0s);
}
.hv2-float-card.hv2-in { opacity: 1; transform: translateY(0) scale(1); }

/* Inner element: the actual visible box — floats as one piece, background
   and text moving together, instead of just the label sliding inside a
   static shell. */
.hv2-float-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--hv2-surface);
    border: 1px solid var(--hv2-line);
    border-radius: 16px;
    box-shadow: 0 20px 40px -16px rgba(17,17,17,.22), 0 2px 8px rgba(17,17,17,.06);
}
.hv2-float-card.hv2-in .hv2-float-inner { animation: hv2-float var(--hv2-float-duration, 3.4s) ease-in-out var(--hv2-float-delay, .3s) infinite; }

.hv2-float-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hv2-accent-soft);
    color: var(--hv2-accent);
}
.hv2-float-icon svg { width: 18px; height: 18px; }
.hv2-float-num {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 1.02rem;
    color: var(--hv2-ink);
    line-height: 1.15;
    white-space: nowrap;
}
.hv2-float-label {
    font-family: 'Lato', sans-serif;
    font-size: .78rem;
    color: var(--hv2-ink-soft);
    line-height: 1.3;
    white-space: nowrap;
}

/* Positions as % of the 493x440 panel, matched to the Figma reference. */
.hv2-card-a { top: 8%; left: 4%; }
.hv2-card-b { top: 34%; left: 56%; }
.hv2-card-c { top: 55%; left: -6%; }
.hv2-card-d { top: 79%; left: 53%; }

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

@media (prefers-reduced-motion: reduce) {
    .hv2-float-card.hv2-in .hv2-float-inner { animation: none; }
}

.hv2-hero h1.hv2-headline {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: clamp(2.6rem, 6.2vw, 6rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--hv2-ink);
    margin: 22px 0 0;
    max-width: 15ch;
}

.hv2-hero-sub {
    font-family: 'Lato', sans-serif;
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    line-height: 1.6;
    color: var(--hv2-ink-soft);
    max-width: 46ch;
    margin: 28px 0 0;
}

.hv2-hero-sub strong { color: var(--hv2-ink); font-weight: 700; }

.hv2-cta-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 44px;
}

.hv2-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    border-radius: 999px;
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .25s cubic-bezier(.22,1,.36,1), background-color .25s, box-shadow .25s;
    white-space: nowrap;
}
.hv2-btn-primary {
    background: var(--hv2-ink);
    color: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
}
.hv2-btn-primary:hover { background: #000; transform: translateY(-2px); }
.hv2-btn-ghost {
    background: transparent;
    color: var(--hv2-ink);
    border: 1.5px solid var(--hv2-line);
}
.hv2-btn-ghost:hover { border-color: var(--hv2-ink); transform: translateY(-2px); }

.hv2-hero-trust {
    margin-top: 56px;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    color: var(--hv2-ink-soft);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.hv2-hero-trust b { color: var(--hv2-ink); font-weight: 700; }

/* ==========================================================================
   MARQUEE (Trusted-by)
   ========================================================================== */
.hv2-marquee-wrap {
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hv2-marquee-track {
    display: flex;
    align-items: center;
    gap: 64px;
    width: max-content;
    animation: hv2-marquee 52.5s linear infinite;
}
.hv2-marquee-wrap:hover .hv2-marquee-track { animation-play-state: paused; }
.hv2-marquee-track img {
    height: 26px;
    width: auto;
    object-fit: contain;
    opacity: .5;
    filter: grayscale(1);
    transition: opacity .25s;
}
.hv2-marquee-track img:hover { opacity: .9; }
@keyframes hv2-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .hv2-marquee-track { animation: none; }
}

/* ==========================================================================
   CINEMATIC REVEAL (existing video section wrapper)
   ========================================================================== */
.hv2-cinematic-caption {
    max-width: var(--hv2-container);
    margin: 28px auto 0;
    padding: 0 40px;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    letter-spacing: .3px;
    color: var(--hv2-ink-soft);
    text-align: center;
}
@media screen and (max-width: 767px) { .hv2-cinematic-caption { padding: 0 20px; } }

/* ==========================================================================
   AUTHORITY — capability manifesto
   ========================================================================== */
.hv2-manifesto-head {
    max-width: 780px;
}
.hv2-manifesto-head h2.hv2-h2 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: clamp(2rem, 4.4vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--hv2-ink);
    margin: 18px 0 0;
}
.hv2-manifesto-head p {
    font-family: 'Lato', sans-serif;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.7;
    color: var(--hv2-ink-soft);
    max-width: 62ch;
    margin: 20px 0 0;
}

.hv2-pillars {
    margin-top: 64px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--hv2-line);
    border: 1px solid var(--hv2-line);
    border-radius: var(--hv2-radius);
    overflow: hidden;
}
@media screen and (max-width: 991px) { .hv2-pillars { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 560px) { .hv2-pillars { grid-template-columns: 1fr; } }

.hv2-pillar {
    background: var(--hv2-surface);
    padding: 40px 32px;
    transition: background-color .3s, transform .3s cubic-bezier(.22,1,.36,1);
    position: relative;
}
.hv2-pillar:hover { background: var(--hv2-surface-soft); transform: translateY(-3px); }
.hv2-pillar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.hv2-pillar-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--hv2-accent-soft);
    color: var(--hv2-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hv2-pillar-icon svg { width: 20px; height: 20px; }
.hv2-pillar-num {
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--hv2-accent);
}
.hv2-pillar h3 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--hv2-ink);
    margin: 26px 0 18px;
    line-height: 1.2;
}
.hv2-pillar ul {
    list-style: none;
    margin: 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--hv2-line);
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: 'Lato', sans-serif;
    font-size: .92rem;
    line-height: 1.4;
    color: var(--hv2-ink-soft);
}
.hv2-pillar li {
    position: relative;
    padding-left: 15px;
}
.hv2-pillar li:before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(17,17,17,.24);
}

/* ==========================================================================
   TRUST — process timeline
   ========================================================================== */
.hv2-process {
    margin-top: 64px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    position: relative;
}
@media screen and (max-width: 767px) { .hv2-process { grid-template-columns: 1fr; gap: 40px; } }

.hv2-process-step { position: relative; padding-top: 28px; }
.hv2-process-step:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--hv2-line);
}
.hv2-process-step:after {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 34px;
    height: 6px;
    border-radius: 4px;
    background: var(--hv2-ink);
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform .7s cubic-bezier(.22,1,.36,1);
}
.hv2-process.hv2-in .hv2-process-step:after { transform: scaleX(1); }
.hv2-process-step:nth-child(2):after { transition-delay: .12s; }
.hv2-process-step:nth-child(3):after { transition-delay: .24s; }
.hv2-process-step:nth-child(4):after { transition-delay: .36s; }
.hv2-process-index {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--hv2-ink-soft);
}
.hv2-process-index svg { width: 16px; height: 16px; color: var(--hv2-accent); }
.hv2-process-step h3 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--hv2-ink);
    margin: 10px 0 12px;
}
.hv2-process-step p {
    font-family: 'Lato', sans-serif;
    font-size: .95rem;
    line-height: 1.65;
    color: var(--hv2-ink-soft);
    margin: 0;
}

/* ==========================================================================
   PROOF — case studies (condensed, reuses existing case-study-* classes)
   ========================================================================== */
.hv2-proof-head h2.hv2-h2 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: clamp(2rem, 4.4vw, 3.6rem);
    line-height: 1.06;
    letter-spacing: -0.01em;
    color: var(--hv2-ink);
    margin: 18px 0 0;
}
.hv2-proof-head p {
    font-family: 'Lato', sans-serif;
    font-size: 1.05rem;
    color: var(--hv2-ink-soft);
    max-width: 62ch;
    margin: 20px 0 0;
}

.hv2-case-list { margin-top: 56px; }

/* Side-by-side layout: copy left, image right, vertically centered —
   overrides the stacked block layout the reused case-study markup ships
   with by default (both wrapper class names Webflow emits are covered). */
.hv2-case-list .project-cms,
.hv2-case-list .spacing4 {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    gap: 56px;
}
.hv2-case-list .case-study-content { min-width: 0; }
@media screen and (max-width: 900px) {
    .hv2-case-list .project-cms,
    .hv2-case-list .spacing4 {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* Gentle zoom on the case-study thumbnail when its own link is hovered —
   only for tiles that actually go somewhere; coming-soon tiles stay inert
   so the cursor/hover state doesn't promise a click that does nothing. */
.hv2-case-list .case-study-image { overflow: hidden; border-radius: 12px; }
.hv2-case-list .case-study-image img {
    aspect-ratio: 2 / 1;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.hv2-case-list .case-study-image a:not(.coming-soon):hover img { transform: scale(1.035); }
.hv2-case-list .case-tile.coming-soon {
    cursor: not-allowed;
    pointer-events: none;
}
.hv2-case-list .case-tile.coming-soon img { filter: saturate(.85); }

/* "Coming Soon" pill button: same shape as real CTAs but visibly inert */
.hv2-case-list .btn-disabled {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Tighten the reused case-study markup for a condensed proof strip */
.hv2-case-list .case-study-subtitle {
    font-size: .98rem !important;
    max-width: 620px;
}
.hv2-case-list .case-study-header-buttons { margin-top: 28px; }
.hv2-case-list .case-study-image .case-tile.coming-soon {
    position: relative;
    display: block;
}
.hv2-case-list .case-tile.coming-soon:after {
    content: "Coming soon";
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(17,17,17,.82);
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
}

/* ==========================================================================
   ASPIRATION — impact statement + stat row
   ========================================================================== */
.hv2-impact {
    background: var(--hv2-ink);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.hv2-impact:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(155deg, #000 0%, transparent 60%);
    mask-image: linear-gradient(155deg, #000 0%, transparent 60%);
    pointer-events: none;
}
.hv2-impact .hv2-container { position: relative; z-index: 1; }

/* Video now lives inside the dark impact section, sitting above the
   statement + stat row instead of its own separate light-background
   section. Curtain color already matches (--light-grey / #ebebeb). */
.hv2-video-impact { padding-top: 64px; }
.hv2-video-wrap {
    position: relative;
    z-index: 1;
    margin-bottom: 88px;
}
@media screen and (max-width: 991px) {
    .hv2-video-impact { padding-top: 48px; }
    .hv2-video-wrap { margin-bottom: 56px; }
}

/* Reserve the video's box (16:9) before it loads so nothing shifts
   into place late — this is what caused the "pop" on mobile. */
.hv2-video-box {
    aspect-ratio: 16 / 9;
}
.hv2-hero-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #0d0d0d;
}

/* Curtain reveal: 4 panels sit over the video, then slide up and away
   once the section is in view AND the video is actually ready to play
   (gated in home-v2.js via .hv2-curtain-ready — not tied to the
   generic .hv2-in reveal, so a slow connection can't open the curtain
   on an unloaded video). Panels are staggered left-to-right. */
.hv2-curtain-wrap {
    bottom: 0;
}
.hv2-curtain {
    height: 100%;
    transform: translateY(0);
    transition: transform 1s cubic-bezier(.65, 0, .35, 1);
    transition-delay: .1s;
}
.hv2-curtain-wrap .hv2-curtain:nth-child(2) { transition-delay: .2s; }
.hv2-curtain-wrap .hv2-curtain:nth-child(3) { transition-delay: .3s; }
.hv2-curtain-wrap .hv2-curtain:nth-child(4) { transition-delay: .4s; }
.hv2-video-wrap.hv2-curtain-ready .hv2-curtain { transform: translateY(-105%); }

@media (prefers-reduced-motion: reduce) {
    .hv2-curtain { transition: none; transform: translateY(-105%); }
}

.hv2-impact-statement {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: clamp(1.7rem, 3.4vw, 2.7rem);
    line-height: 1.35;
    letter-spacing: -0.01em;
    max-width: 24ch;
}
.hv2-impact-statement .hv2-hl { color: #fff; border-bottom: 2px solid var(--hv2-accent); }

.hv2-stat-row {
    margin-top: 72px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
@media screen and (max-width: 767px) { .hv2-stat-row { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; } }

.hv2-stat-num {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: clamp(2.2rem, 3.8vw, 3.2rem);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.hv2-stat-label {
    margin-top: 20px;
    font-family: 'Lato', sans-serif;
    font-size: .85rem;
    color: rgba(255,255,255,.6);
    line-height: 1.5;
}

/* ==========================================================================
   URGENCY + ACTION — final CTA
   ========================================================================== */
/* No overflow:hidden here — the glow bleeds above the section's top edge
   on purpose (same reasoning as .hv2-hero). Horizontal safety net is the
   body-level overflow-x:hidden set earlier in this file. */
.hv2-final-section { position: relative; }
.hv2-final-cta { text-align: left; position: relative; z-index: 1; }
.hv2-final-cta-glow {
    position: absolute;
    top: -120px;
    left: -160px;
    width: 560px;
    height: 560px;
    background: radial-gradient(circle at center, var(--hv2-accent-soft) 0%, rgba(55,93,251,0) 70%);
    pointer-events: none;
    z-index: 0;
}
.hv2-final-cta h2.hv2-h2 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: clamp(2.2rem, 5.4vw, 4.6rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: var(--hv2-ink);
    max-width: 18ch;
}
.hv2-final-cta p {
    font-family: 'Lato', sans-serif;
    font-size: clamp(1.02rem, 1.4vw, 1.2rem);
    line-height: 1.65;
    color: var(--hv2-ink-soft);
    max-width: 52ch;
    margin: 24px 0 0;
}

/* ---------- shared small heading kicker above hv2-h2 blocks ---------- */
.hv2-h2-wrap .hv2-eyebrow { margin-bottom: 2px; }

/* ==========================================================================
   ELEPHANT IN THE ROOM — floating easter-egg CTA
   Fixed overlay, outside document flow: adds zero scroll height.
   ========================================================================== */
.hv2-elephant-walker {
    position: fixed;
    left: 0;
    bottom: 26px;
    transform: translateX(var(--hv2-ele-x, -220px));
    z-index: 480;
    pointer-events: none;
    transition: transform 3.4s linear, color .3s ease;
    color: var(--hv2-ink);
}
.hv2-elephant-walker.hv2-ele-on-dark { color: #fff; }
.hv2-elephant-walker .hv2-ele-eye { fill: #fff; transition: fill .3s ease; }
.hv2-elephant-walker.hv2-ele-on-dark .hv2-ele-eye { fill: #111111; }
.hv2-elephant-walker.hv2-ele-entering {
    transition: opacity .45s cubic-bezier(.4,0,1,1), transform .45s cubic-bezier(.4,0,1,1);
    transform-origin: 86% 100%;
    transform: translateX(var(--hv2-ele-x, 0));
}
.hv2-elephant-walker.hv2-ele-entering.hv2-ele-in {
    opacity: 0;
    transform: translateX(var(--hv2-ele-x, 0)) scale(.12);
}
.hv2-elephant-bob { animation: none; }
.hv2-elephant-walker.hv2-ele-walking .hv2-elephant-bob {
    animation: hv2-ele-bob .5s ease-in-out infinite;
}
.hv2-elephant-walker svg { display: block; width: clamp(64px, 20vw, 108px); height: auto; aspect-ratio: 108 / 70; }

.hv2-elephant-walker.hv2-ele-walking .ele-legs-back {
    transform-origin: 65px 72px;
    animation: hv2-ele-swing-a .42s ease-in-out infinite;
}
.hv2-elephant-walker.hv2-ele-walking .ele-legs-front {
    transform-origin: 117px 76px;
    animation: hv2-ele-swing-b .42s ease-in-out infinite;
}

@keyframes hv2-ele-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
@keyframes hv2-ele-swing-a {
    0%, 100% { transform: rotate(-9deg); }
    50% { transform: rotate(9deg); }
}
@keyframes hv2-ele-swing-b {
    0%, 100% { transform: rotate(9deg); }
    50% { transform: rotate(-9deg); }
}

.hv2-elephant-fab-wrap {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 490;
}
.hv2-elephant-fab {
    position: relative;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background: var(--hv2-surface);
    border: 1px solid var(--hv2-line);
    box-shadow: 0 14px 30px -14px rgba(17,17,17,.28), 0 2px 8px rgba(17,17,17,.06);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--hv2-ink);
    transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, background-color .3s ease, border-color .3s ease, color .3s ease;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
}
.hv2-elephant-fab:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -14px rgba(17,17,17,.34), 0 3px 10px rgba(17,17,17,.08);
}
.hv2-elephant-fab-wrap.hv2-ele-on-dark .hv2-elephant-fab {
    background: #1c1c1c;
    color: #fff;
    border-color: rgba(255,255,255,.16);
    box-shadow: 0 14px 30px -14px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
}
.hv2-elephant-fab-wrap.hv2-ele-on-dark .hv2-elephant-fab:hover {
    box-shadow: 0 18px 36px -14px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.32);
}
.hv2-elephant-fab svg { width: 26px; height: 26px; }
.hv2-elephant-fab .hv2-ele-peek {
    position: absolute;
    top: -9px;
    right: -6px;
    width: 24px;
    height: 24px;
    opacity: 0;
    transform: scale(.3) translateY(6px);
    transform-origin: bottom center;
    transition: opacity .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1), color .3s ease;
    color: var(--hv2-ink);
    pointer-events: none;
}
.hv2-elephant-fab .hv2-ele-peek .hv2-ele-pupil { fill: #fff; transition: fill .3s ease; }
.hv2-elephant-fab-wrap.hv2-ele-on-dark .hv2-ele-peek { color: #fff; }
.hv2-elephant-fab-wrap.hv2-ele-on-dark .hv2-ele-peek .hv2-ele-pupil { fill: #111111; }
.hv2-elephant-fab .hv2-ele-peek svg { width: 100%; height: 100%; }
.hv2-elephant-fab-wrap.hv2-ele-resolved .hv2-ele-peek {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.hv2-elephant-fab-wrap.hv2-ele-resolved .hv2-ele-door { opacity: .35; }

.hv2-elephant-fab-wrap.hv2-ele-bursting .hv2-elephant-fab {
    animation: hv2-ele-burst .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes hv2-ele-burst {
    0% { transform: scale(1); }
    35% { transform: scale(1.18); }
    60% { transform: scale(.94); }
    100% { transform: scale(1); }
}

.hv2-ele-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hv2-accent);
    opacity: 0;
    pointer-events: none;
}
.hv2-elephant-fab-wrap.hv2-ele-bursting .hv2-ele-particle {
    animation: hv2-ele-particle .7s cubic-bezier(.22,1,.36,1) forwards;
}
.hv2-ele-particle:nth-child(1) { --px: -34px; --py: -30px; animation-delay: .02s; }
.hv2-ele-particle:nth-child(2) { --px: 8px; --py: -42px; animation-delay: .06s; }
.hv2-ele-particle:nth-child(3) { --px: 38px; --py: -18px; animation-delay: 0s; }
.hv2-ele-particle:nth-child(4) { --px: -18px; --py: -44px; animation-delay: .09s; }
.hv2-ele-particle:nth-child(5) { --px: 30px; --py: -38px; animation-delay: .04s; }
@keyframes hv2-ele-particle {
    0% { opacity: 0; transform: translate(-50%,-50%) scale(.4); }
    25% { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(1); }
}

.hv2-elephant-tooltip {
    position: absolute;
    right: 0;
    bottom: 76px;
    white-space: nowrap;
    background: var(--hv2-ink);
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: 999px;
    box-shadow: 0 10px 24px -10px rgba(17,17,17,.4);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1), background-color .3s ease, color .3s ease;
    pointer-events: none;
}
.hv2-elephant-fab-wrap.hv2-ele-on-dark .hv2-elephant-tooltip {
    background: #fff;
    color: var(--hv2-ink);
    box-shadow: 0 10px 24px -10px rgba(0,0,0,.5);
}
.hv2-elephant-fab-wrap.hv2-ele-tooltip-show .hv2-elephant-tooltip,
.hv2-elephant-fab-wrap:hover .hv2-elephant-tooltip {
    opacity: 1;
    transform: translateY(0);
}

.hv2-elephant-fab-wrap.hv2-ele-tooting .hv2-elephant-fab {
    animation: hv2-ele-shake .5s ease-in-out;
}
@keyframes hv2-ele-shake {
    0%, 100% { transform: translateX(0) rotate(0); }
    20% { transform: translateX(-3px) rotate(-4deg); }
    40% { transform: translateX(3px) rotate(4deg); }
    60% { transform: translateX(-2px) rotate(-3deg); }
    80% { transform: translateX(2px) rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
    .hv2-elephant-walker { display: none; }
    .hv2-elephant-fab-wrap.hv2-ele-bursting .hv2-elephant-fab { animation: none; }
    .hv2-elephant-fab-wrap .hv2-ele-particle { animation: none !important; opacity: 0 !important; }
    .hv2-elephant-fab-wrap.hv2-ele-tooting .hv2-elephant-fab { animation: none; }
}

@media screen and (max-width: 560px) {
    /* bottom offset includes the safe-area inset (home indicator / gesture
       bar) plus extra clearance so the FAB sits inside the viewport mobile
       browsers actually paint first — some engines size position:fixed
       against the toolbar-hidden viewport, which leaves a bottom-anchored
       element under the (still visible) address bar until the first scroll.
       No max-width/vw math here on purpose: 100vw has measured wider than
       the real visible width on at least one real device we tested against,
       and a 46px button never needed a viewport-relative cap anyway — the
       html/body overflow-x:hidden above is what actually guards against
       horizontal scroll now. */
    .hv2-elephant-fab-wrap { right: 14px; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
    .hv2-elephant-fab { width: 46px; height: 46px; border-radius: 13px; }
    .hv2-elephant-fab svg { width: 18px; height: 18px; }
    .hv2-elephant-fab .hv2-ele-peek { width: 18px; height: 18px; top: -7px; right: -5px; }
    .hv2-elephant-walker { bottom: calc(32px + env(safe-area-inset-bottom, 0px)); transition-duration: 4.6s, .3s; }
    .hv2-elephant-walker svg { width: clamp(44px, 14vw, 70px); }
    .hv2-elephant-tooltip {
        font-size: 11.5px;
        padding: 7px 11px;
        right: 0;
        max-width: 260px;
    }
}

/* ==========================================================================
   PRESENTATION POPUP — "elephant in the room" modal
   The deck renders inside an iframe so its own Tailwind/theme never
   touches the host page; this is just the scrim + chrome around it.
   ========================================================================== */
.hv2-ppt-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: rgba(17, 17, 17, 0.8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    overscroll-behavior: contain;
    transition: opacity .3s cubic-bezier(.22,1,.36,1);
}
.hv2-ppt-modal.open { display: flex; }
.hv2-ppt-modal.hv2-ppt-in { opacity: 1; }

.hv2-ppt-modal-inner {
    width: min(1180px, 100%);
    height: min(92vh, 860px);
    background: var(--hv2-surface);
    border-radius: var(--hv2-radius);
    box-shadow: 0 40px 90px -20px rgba(0,0,0,.5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(.96) translateY(12px);
    opacity: 0;
    transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .35s cubic-bezier(.22,1,.36,1);
}
.hv2-ppt-modal.hv2-ppt-in .hv2-ppt-modal-inner {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.hv2-ppt-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--hv2-line);
    flex-shrink: 0;
}

.hv2-ppt-modal-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.hv2-ppt-modal-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 800;
    color: var(--hv2-ink);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Desktop shows the "Contact Me" label; mobile swaps to just the icon
   (see the ≤767px block below) so the title gets the width back. */
.hv2-ppt-contact-icon { display: none; }

.hv2-ppt-modal-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.hv2-ppt-modal-actions .hv2-btn {
    padding: 10px 18px;
    font-size: 13px;
}

.hv2-ppt-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--hv2-surface);
    border: 1.5px solid var(--hv2-line);
    color: var(--hv2-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform .25s cubic-bezier(.22,1,.36,1), border-color .25s, background-color .25s, color .25s;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    text-decoration: none;
}
.hv2-ppt-icon-btn:hover { border-color: var(--hv2-ink); transform: translateY(-2px); }
.hv2-ppt-modal-close:hover { background: var(--hv2-ink); border-color: var(--hv2-ink); color: #fff; }

.hv2-ppt-modal-body {
    flex: 1;
    min-height: 0;
    background: var(--hv2-surface-soft);
    overscroll-behavior: contain;
}

.hv2-ppt-modal-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* position:fixed (not just overflow:hidden) is what actually stops
   touch-driven background scroll/rubber-band on mobile browsers; JS sets
   `top` to the negative scroll offset before adding this class, and
   restores real scroll position from it on close. */
body.hv2-no-scroll {
    position: fixed;
    left: 0;
    right: 0;
    overflow: hidden;
}

@media screen and (max-width: 767px) {
    .hv2-ppt-modal { padding: 0; }
    .hv2-ppt-modal-inner {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
    }
    .hv2-ppt-modal-header { padding: 12px 12px 12px 16px; gap: 10px; align-items: flex-start; }
    /* Let the full title wrap onto 2-3 lines instead of ellipsis-truncating
       it down to a fragment — there's no reason a phone can't show the
       whole heading, it just needs vertical room instead of horizontal. */
    .hv2-ppt-modal-title {
        font-size: 15px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    .hv2-ppt-modal-actions { gap: 6px; padding-top: 1px; }
    /* Contact Me collapses to an icon to match Download/Close — freeing
       the width back up is what actually fixes the title truncation. */
    .hv2-ppt-modal-actions .hv2-ppt-contact-btn {
        width: 36px;
        height: 36px;
        padding: 0;
        justify-content: center;
        border-radius: 10px;
        flex-shrink: 0;
    }
    .hv2-ppt-contact-icon { display: block; }
    .hv2-ppt-contact-label { display: none; }
    .hv2-ppt-icon-btn { width: 36px; height: 36px; border-radius: 10px; }
}