/* ============================================================================
   JAVAID — Homepage dark skin v2  ·  "Near-black + electric accent"
   ----------------------------------------------------------------------------
   A neutral, near-black cinematic treatment of the editorial system, scoped
   entirely to body.is-page-home so inner pages keep the light Monograph look.

   Design language:
     · Canvas is a near-pure cool black (#08080A) — neutral, OLED-friendly.
     · A single ELECTRIC accent (the customizer/accent-picker colour, default
       burnt orange) does all the heavy lifting: glow, chips, links, CTAs.
       --accent is intentionally NOT overridden here so the live accent picker
       keeps working on the homepage.
     · Restrained signature glow rises from the hero horizon and drifts toward
       the cursor via the --mx/--my vars main.js already sets.
     · A faint perspective grid + radial vignette give depth without weight.

   Everything below reuses existing class hooks + the loaded fonts
   (Clash Display / Geist / Geist Mono) and animates transform/opacity only.
   ============================================================================ */

/* ── Token flip (neutral near-black) ─────────────────────────────────────── */
body.is-page-home {
    --display:       var(--heading);  /* homepage headings → custom Hago Oblique face */

    --canvas:        #08080A;   /* near-pure cool black            */
    --canvas-2:      #0E0E12;   /* raised surface base             */
    --canvas-3:      #15151B;   /* card / panel                    */
    --ink:           #F7F7F9;   /* primary text                    */
    --ink-2:         #E7E7EC;
    --ink-mute:      #C3C3CE;   /* body text on dark               */
    --mute:          #8B8B97;   /* labels                          */
    --mute-2:        #5E5E69;
    --rule:          rgba(247, 247, 249, 0.13);
    --rule-soft:     rgba(247, 247, 249, 0.06);
    --reverse:       #08080A;
    --reverse-mute:  rgba(8, 8, 10, 0.62);
    --accent-soft:   rgba(107, 122, 58, 0.14);

    --surface:       rgba(255, 255, 255, 0.026);
    --surface-2:     rgba(255, 255, 255, 0.052);
    --surface-3:     rgba(255, 255, 255, 0.075);
    --card-line:     rgba(247, 247, 249, 0.10);
    --card-line-2:   rgba(247, 247, 249, 0.16);
    --card-radius:   20px;

    /* Glow is accent-led with a whisper of cool depth — one electric colour. */
    --glow-1:        var(--accent);                 /* electric accent core */
    --glow-2:        rgba(107, 122, 58, 0.30);
    --glow-3:        rgba(120, 110, 230, 0.12);      /* faint cool depth     */

    background: var(--canvas);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

/* Kill the paper grain/!important light treatments the base sheet may add. */
body.is-page-home::before { display: none !important; }

/* Ambient page floor: a single low radial vignette behind everything so the
   near-black never reads as flat. Cheap, paint-only, no animation. */
body.is-page-home {
    background-image:
        radial-gradient(120% 80% at 50% -10%, rgba(226,122,69,0.10) 0%, transparent 55%),
        radial-gradient(90% 60% at 50% 108%, rgba(120,110,230,0.06) 0%, transparent 60%);
    background-attachment: fixed;
}

/* Hero positioning context (the flat editorial split governs its own layout). */
.is-page-home .hero { position: relative; overflow: clip; }

/* ── Masthead (glassy, dark) ──────────────────────────────────────────────── */
.is-page-home .masthead {
    background: rgba(8, 8, 10, 0.55);
    -webkit-backdrop-filter: saturate(150%) blur(16px);
    backdrop-filter: saturate(150%) blur(16px);
    border-bottom: 1px solid var(--rule-soft);
}
.is-page-home .nav-link { color: var(--mute); }
.is-page-home .nav-link:hover,
.is-page-home .nav-link.is-active { color: var(--ink); }
.is-page-home .brand { color: var(--ink); }
.is-page-home .brand small { color: var(--mute); }
.is-page-home .mark { background: var(--accent); box-shadow: 0 0 14px 1px var(--glow-2); }
.is-page-home .nav-cta {
    background: var(--accent);
    color: #1A0E07;
    border-radius: 999px;
    padding: 10px 18px;
    font-weight: 600;
    transition: transform .3s, box-shadow .3s, filter .3s;
}
.is-page-home .nav-cta:hover {
    filter: brightness(1.07);
    box-shadow: 0 8px 30px -8px var(--glow-1);
}
.is-page-home .menu-btn { border-color: var(--rule); color: var(--ink); }
.is-page-home .mob-menu { background: rgba(8,8,10,0.97); }

/* ── Shared buttons on dark ──────────────────────────────────────────────── */
.is-page-home .btn {
    border-radius: 999px;
    font-weight: 600;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, filter .3s, background .3s, color .3s, border-color .3s;
}
.is-page-home .btn--primary {
    background: var(--accent);
    color: #1A0E07;
    border-color: var(--accent);
    box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 10px 34px -16px var(--glow-1);
}
.is-page-home .btn--primary:hover {
    filter: brightness(1.07);
    box-shadow: 0 12px 44px -12px var(--glow-1);
    transform: translateY(-1px);
}
.is-page-home .btn--ghost,
.is-page-home .btn--secondary {
    background: var(--surface);
    border: 1px solid var(--card-line-2);
    color: var(--ink);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.is-page-home .btn--ghost:hover {
    background: var(--surface-2);
    border-color: var(--accent);
}

/* Eyebrow → pill chip on dark. */
.is-page-home .eyebrow,
.is-page-home .dept__num {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-mute);
    background: var(--surface);
    border: 1px solid var(--card-line);
    border-radius: 999px;
    padding: 7px 14px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.is-page-home .eyebrow::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px 1px var(--glow-1);
}

/* ── Trust ticker ────────────────────────────────────────────────────────── */
.is-page-home .ticker {
    border-block: 1px solid var(--rule-soft);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.is-page-home .ticker__item { color: var(--mute); }
.is-page-home .ticker__item .dmd { color: var(--accent); opacity: .65; }

/* ── Section headings (Clash Display) ────────────────────────────────────── */
.is-page-home .folio__intro h2,
.is-page-home .sec-head,
.is-page-home h2,
.is-page-home .spread__title,
.is-page-home .cta-billboard__head,
.is-page-home .colophon__cta {
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: -0.022em;
    color: var(--ink);
}
.is-page-home .folio__intro h2 em,
.is-page-home .sec-head em,
.is-page-home h2 em,
.is-page-home .spread__title em,
.is-page-home .cta-billboard__head em,
.is-page-home .accent-panel .display em,
.is-page-home .colophon__cta em {
    font-family: var(--display);
    font-style: normal;
    font-weight: 600;
    color: transparent;
    background: linear-gradient(100deg, #FFD9BC, var(--accent) 52%, #FFB07A);
    -webkit-background-clip: text;
    background-clip: text;
}
.is-page-home .body,
.is-page-home .folio__intro p { color: var(--ink-mute); }

/* Section eyebrow on dark: keep the pill but allow a lead-in marker. */
.is-page-home .folio__intro .eyebrow { margin-bottom: 18px; }

/* ============================================================================
   SELECTED WORK — stacking sticky showcase (the framer-style signature)
   Each spread becomes a pinned card; the next slides up and over it. Pure CSS
   `position: sticky` — zero JS, perfectly smooth. GSAP only adds a subtle
   scrub-scale on top (enhancement, see main.js).
   ============================================================================ */
.is-page-home .folio { position: relative; }

.is-page-home .showcase {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 4vw, 40px);
}
.is-page-home .showcase .spread {
    /* reset the base spread (it shipped as a 2-col grid w/ top border) */
    border-top: 0;
    padding-block: 0;
    position: sticky;
    top: clamp(84px, 12vh, 132px);
    background: linear-gradient(180deg, var(--canvas-3), var(--canvas-2));
    border: 1px solid var(--card-line);
    border-radius: var(--card-radius);
    padding: clamp(20px, 3vw, 40px);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    box-shadow: 0 40px 90px -60px rgba(0,0,0,0.9);
    transform-origin: center top;
    overflow: hidden;
}
/* Accent hairline along the top edge of each card. */
.is-page-home .showcase .spread::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.5;
}
.is-page-home .showcase .spread__media {
    border-radius: 14px;
    border: 1px solid var(--card-line);
    filter: saturate(0.98) brightness(0.94);
    transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .6s;
    margin: 0;
    box-shadow: 0 30px 60px -40px rgba(0,0,0,0.8);
}
.is-page-home .showcase .spread:hover .spread__media {
    filter: saturate(1.04) brightness(1.02);
    transform: scale(1.012);
}
.is-page-home .showcase .spread__copy { gap: 18px; }
.is-page-home .spread__title { color: var(--ink); font-size: clamp(30px, 3.8vw, 56px); }
.is-page-home .spread__title em {
    font-style: normal;
    font-family: var(--display);
    color: transparent;
    background: linear-gradient(100deg, #FFD9BC, var(--accent) 55%, #FFB07A);
    -webkit-background-clip: text; background-clip: text;
}
.is-page-home .spread__lede { color: var(--ink-mute); }
.is-page-home .spread__link, .is-page-home .link { color: var(--ink); }
.is-page-home .spread__link:hover, .is-page-home .link:hover { color: var(--accent); }
.is-page-home .arr { display: inline-block; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.is-page-home .link:hover .arr, .is-page-home .spread__link:hover .arr,
.is-page-home .btn:hover .arr, .is-page-home .nav-cta:hover .arr { transform: translateX(4px); }

@media (max-width: 919px) {
    /* On small screens, drop the pin — stacked cards scroll normally. */
    .is-page-home .showcase .spread { position: static; top: auto; }
}

/* ============================================================================
   APPROACH — process cards
   ============================================================================ */
.is-page-home .approach { gap: 18px; }
.is-page-home .step {
    background: var(--surface);
    border: 1px solid var(--card-line);
    border-radius: var(--card-radius);
    padding: 28px;
    border-top: 1px solid var(--card-line);
    transition: border-color .4s, background .4s, transform .4s, box-shadow .4s;
}
.is-page-home a.step:hover,
.is-page-home .step:hover {
    border-color: rgba(226,122,69,0.5);
    background: var(--surface-2);
    transform: translateY(-3px);
    box-shadow: 0 24px 60px -40px var(--glow-1);
}
.is-page-home .step__num {
    font-family: var(--display);
    font-weight: 600;
    font-size: 44px;
    line-height: 1;
    color: transparent;
    background: linear-gradient(120deg, var(--accent), #FFB07A);
    -webkit-background-clip: text;
    background-clip: text;
    margin-bottom: 14px;
}
.is-page-home .step__num em { font-style: normal; }
.is-page-home .step__title { color: var(--ink); font-family: var(--display); font-weight: 600; }
.is-page-home .step__body { color: var(--ink-mute); }

/* ============================================================================
   BENTO — "Browse by what you came here for" explore grid
   Asymmetric, glassy cards with an accent corner-glow on hover.
   ============================================================================ */
.is-page-home .bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-top: 40px;
}
.is-page-home .bento .step {
    grid-column: span 6;
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    padding: 26px;
    overflow: hidden;
    isolation: isolate;
}
/* Hover corner-glow */
.is-page-home .bento .step::after {
    content: "";
    position: absolute;
    width: 60%; aspect-ratio: 1;
    top: -30%; right: -20%;
    background: radial-gradient(circle, var(--glow-2) 0%, transparent 70%);
    opacity: 0;
    transition: opacity .5s ease;
    z-index: -1;
    pointer-events: none;
}
.is-page-home .bento .step:hover::after { opacity: 1; }
.is-page-home .bento .step .link { margin-top: auto; padding-top: 18px; }
.is-page-home .bento .dept__num { align-self: flex-start; margin-bottom: 14px; }
@media (min-width: 720px) {
    /* 2x2 emphasis layout: first + last span wider for rhythm. */
    .is-page-home .bento .step:nth-child(1) { grid-column: span 4; }
    .is-page-home .bento .step:nth-child(2) { grid-column: span 2; }
    .is-page-home .bento .step:nth-child(3) { grid-column: span 3; }
    .is-page-home .bento .step:nth-child(4) { grid-column: span 3; }
}

/* ============================================================================
   METRICS — proof band
   ============================================================================ */
.is-page-home .metrics {
    border: 1px solid var(--card-line);
    border-radius: var(--card-radius);
    background:
        radial-gradient(120% 140% at 50% 0%, rgba(226,122,69,0.06), transparent 60%),
        var(--surface);
    overflow: hidden;
}
.is-page-home .metric { border-color: var(--rule-soft) !important; }
.is-page-home .metric .num { color: var(--ink); font-family: var(--display); font-weight: 600; }
.is-page-home .metric .num em { color: var(--accent); font-family: var(--display); font-style: normal; }
.is-page-home .metric .lbl { color: var(--mute); }

/* ============================================================================
   TESTIMONIALS carousel
   ============================================================================ */
.is-page-home .pull-carousel__slide,
.is-page-home .pull {
    background: var(--surface);
    border: 1px solid var(--card-line);
    border-radius: var(--card-radius);
}
.is-page-home .pull__mark { color: var(--accent); opacity: 0.5; }
.is-page-home .pull__body { color: var(--ink-2); }
.is-page-home .pull__attr { color: var(--mute); }
.is-page-home .pull__attr strong { color: var(--ink); }
.is-page-home .pull__attr .dmd { color: var(--accent); }
.is-page-home .pull-carousel__arrow {
    border: 1px solid var(--card-line);
    color: var(--ink);
    background: var(--surface);
}
.is-page-home .pull-carousel__arrow:hover { background: var(--accent); border-color: var(--accent); color: #1A0E07; }
.is-page-home .pull-carousel__dots button { background: var(--rule); }
.is-page-home .pull-carousel__dots button:hover,
.is-page-home .pull-carousel__dots button.is-active { background: var(--accent); }

/* ============================================================================
   CTA billboard — deepest glow, the closing pitch
   ============================================================================ */
.is-page-home .accent-panel.cta-billboard {
    background:
        radial-gradient(80% 130% at 50% 122%, var(--glow-1) 0%, var(--glow-2) 26%, transparent 58%),
        var(--canvas-2);
    border-top: 1px solid var(--rule-soft);
    border-bottom: 1px solid var(--rule-soft);
    position: relative;
    overflow: clip;
}
.is-page-home .accent-panel.cta-billboard::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.4;
}
.is-page-home .cta-billboard__head,
.is-page-home .cta-billboard .display { color: var(--ink); }
.is-page-home .cta-billboard__head em,
.is-page-home .accent-panel .display em {
    font-family: var(--display);
    font-style: normal;
    font-weight: 600;
    color: transparent;
    background: linear-gradient(100deg, #FFD9BC, var(--accent) 58%, #FFB07A);
    -webkit-background-clip: text;
    background-clip: text;
}
.is-page-home .cta-billboard__deck { color: var(--ink-mute); }
.is-page-home .accent-panel .eyebrow,
.is-page-home .accent-panel .deck { color: var(--ink-mute); }
.is-page-home .cta-billboard__alt { color: var(--ink); border-color: var(--card-line); }
.is-page-home .cta-billboard__alt:hover { color: var(--accent); border-color: var(--accent); }
.is-page-home .accent-panel .btn { background: var(--surface); border-color: var(--card-line); color: var(--ink); }
.is-page-home .accent-panel .btn--primary { background: var(--accent); color: #1A0E07; border-color: var(--accent); }
.is-page-home .cta-billboard__diamond { color: var(--accent); }

/* ── Footer (colophon) dark ──────────────────────────────────────────────── */
.is-page-home .colophon {
    background: var(--canvas);
    border-top: 1px solid var(--rule-soft);
    color: var(--ink);
}
.is-page-home .colophon__cta { color: var(--ink); }
.is-page-home .colophon__cta em { color: var(--accent); font-family: var(--display); font-style: normal; }
.is-page-home .colophon__email { color: var(--accent); }
.is-page-home .colophon__mark { color: var(--ink); }
.is-page-home .colophon__mark small,
.is-page-home .colophon__links a,
.is-page-home .colophon__elsewhere a,
.is-page-home .colophon__bottom { color: var(--mute); }
.is-page-home .colophon__links a:hover,
.is-page-home .colophon__elsewhere a:hover { color: var(--accent); }
.is-page-home .colophon__sep { color: var(--rule); }

/* ── Sticky mobile CTA dark ──────────────────────────────────────────────── */
.is-page-home .mcta { background: rgba(8,8,10,0.92); border-top: 1px solid var(--rule); }

/* ── Cursor dot tint ─────────────────────────────────────────────────────── */
.is-page-home .cursor { mix-blend-mode: screen; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .is-page-home .compare { grid-template-columns: 1fr; }
}

/* ============================================================================
   EDITORIAL ALIGNMENT  ·  match the rebuilt flat hero
   ----------------------------------------------------------------------------
   The hero is a flat editorial split — Fraunces + Geist Mono, hairline rules,
   duotone imagery, square corners, a single accent. This block carries that
   language across the rest of the page, flattening the glassy / rounded / glow
   card treatment above into quiet, spacious, hairline sections so the whole
   homepage reads as one restrained, high-end engineering monograph.
   Surface · type · spacing only — no copy, no markup changes.
   ============================================================================ */

/* Hero — let the split govern cleanly (undo old centered/flex hero). */
.is-page-home .hero {
    display: block;
    text-align: left;
    align-items: initial;
    max-width: none;               /* full bleed — span the whole viewport */
    padding-block: clamp(24px, 4vw, 52px) clamp(40px, 6vw, 72px);
}

/* Rhythm — generous air, hairline dividers instead of heavy ink rules. */
.is-page-home .section { padding-block: clamp(88px, 12vw, 168px); }
.is-page-home .folio    { padding-block: clamp(88px, 12vw, 168px); }

/* Eyebrows / labels → flat mono with a short accent tick (the hero caption). */
.is-page-home .eyebrow,
.is-page-home .dept__num {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    color: var(--mute);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}
.is-page-home .eyebrow::before {
    content: "";
    width: 24px;
    height: 1px;
    border-radius: 0;
    background: var(--accent);
    box-shadow: none;
}

/* Headings → Fraunces with a solid italic accent em (matches the hero
   statement), replacing the Clash Display gradient-clip treatment. */
.is-page-home .folio__intro h2,
.is-page-home .sec-head,
.is-page-home .spread__title,
.is-page-home .cta-billboard__head,
.is-page-home .colophon__cta,
.is-page-home h2 {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: -0.02em;
}
.is-page-home .folio__intro h2 em,
.is-page-home .sec-head em,
.is-page-home .spread__title em,
.is-page-home .cta-billboard__head em,
.is-page-home .accent-panel .display em,
.is-page-home .colophon__cta em,
.is-page-home h2 em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-variation-settings: "opsz" 96, "wght" 380, "SOFT" 60;
    background: none;
    -webkit-text-fill-color: var(--accent);
    color: var(--accent);
}

/* Trust ticker → quiet mono micro-label strip (was giant serif italic). */
.is-page-home .ticker { padding-block: 22px; }
.is-page-home .ticker__track { gap: 56px; }
.is-page-home .ticker__item {
    font-family: var(--mono);
    font-style: normal;
    font-variation-settings: normal;
    font-size: 12px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-mute);
    gap: 22px;
}
.is-page-home .ticker__item .dmd { font-size: 7px; opacity: 0.8; transform: none; }

/* Selected work → flat editorial spreads; duotone → full colour on hover. */
.is-page-home .showcase { display: block; }
.is-page-home .showcase .spread {
    position: static;
    top: auto;
    background: none;
    border: 0;
    border-top: 1px solid var(--rule);
    border-radius: 0;
    padding: clamp(44px, 6vw, 96px) 0;
    box-shadow: none;
    align-items: start;
    gap: clamp(28px, 4vw, 64px);
}
.is-page-home .showcase .spread::before { display: none; }
.is-page-home .showcase .spread__media {
    border-radius: 0;
    border: 1px solid var(--rule);
    box-shadow: none;
    filter: none;
    transition: none;
}
.is-page-home .showcase .spread:hover .spread__media {
    filter: none;
    transform: none;
}
.is-page-home .spread__title { font-size: clamp(32px, 4vw, 60px); }

/* Approach → hairline-topped columns, no glassy card / hover lift. */
.is-page-home .approach { gap: clamp(28px, 4vw, 56px); }
.is-page-home .step {
    background: none;
    border: 0;
    border-top: 1px solid var(--rule);
    border-radius: 0;
    padding: 26px 0 0;
    box-shadow: none;
}
.is-page-home .step:hover,
.is-page-home a.step:hover {
    background: none;
    transform: none;
    box-shadow: none;
    border-color: var(--accent);
}
.is-page-home .step__num {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-variation-settings: "opsz" 144, "wght" 300, "SOFT" 80;
    font-size: clamp(52px, 5.5vw, 88px);
    line-height: 0.9;
    background: none;
    -webkit-text-fill-color: var(--accent);
    color: var(--accent);
    margin-bottom: 10px;
}

/* Explore → clean editorial 2×2 matrix divided by hairlines (no glassy cards,
   no asymmetric spans, no corner glow). */
.is-page-home .bento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: clamp(40px, 5vw, 56px);
    border-top: 1px solid var(--rule);
}
.is-page-home .bento .step {
    grid-column: auto !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rule) !important;
    border-radius: 0;
    background: none !important;
    box-shadow: none !important;
    transform: none !important;
    padding: clamp(28px, 3vw, 40px) 0;
}
.is-page-home .bento .step::after { display: none; }
.is-page-home .bento .step .step__title { margin-top: 4px; }
.is-page-home .bento .step .link {
    align-self: flex-start;
    width: fit-content;
    margin-top: auto;
    padding-top: 20px;
}
@media (min-width: 720px) {
    .is-page-home .bento .step:nth-child(odd) {
        padding-right: clamp(32px, 4vw, 64px);
        border-right: 1px solid var(--rule) !important;
    }
    .is-page-home .bento .step:nth-child(even) {
        padding-left: clamp(32px, 4vw, 64px);
    }
}
@media (max-width: 719px) {
    .is-page-home .bento { grid-template-columns: 1fr; }
}

/* Metrics → mono numerals (hero index language), hairline band. */
.is-page-home .metrics {
    border: 0;
    border-block: 1px solid var(--rule);
    border-radius: 0;
    background: none;
}
.is-page-home .metric .num {
    font-family: var(--mono);
    font-weight: 300;
    font-variation-settings: normal;
    letter-spacing: -0.04em;
    background: none;
    -webkit-text-fill-color: var(--ink);
    color: var(--ink);
}
.is-page-home .metric .num em {
    font-family: var(--mono);
    font-style: normal;
    font-weight: 300;
    color: var(--accent);
}

/* Testimonials → quiet, no card; serif italic quote (hero pull language). */
.is-page-home .pull-carousel__slide,
.is-page-home .pull {
    background: none;
    border: 0;
    border-radius: 0;
}
.is-page-home .pull__mark { opacity: 0.35; }
.is-page-home .pull-carousel__arrow {
    border-radius: 0;
    background: none;
    border: 1px solid var(--rule);
}
.is-page-home .pull-carousel__arrow:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--reverse);
}

/* ============================================================================
   MICROINTERACTIONS  ·  v1
   ----------------------------------------------------------------------------
   The homepage is a deliberately flat editorial monograph — hairline rules,
   square corners, one accent, mono numerals. These add life in THAT vocabulary
   (an accent hairline that inks in, an advancing read-cue, a duotone→colour
   image reveal, a ticker that yields to the cursor) rather than glassy glows
   that would fight the design. Colour / opacity / transform only; every bit of
   motion is reachable by keyboard and gated for reduced-motion users.
   ============================================================================ */

/* — Signature: explore cells answer the cursor like editorial index rows. ————
   An accent hairline wipes in along the cell's dividing rule, the heading steps
   right, and the read-cue arrow advances. The underline lives on ::after, whose
   own transform is immune to the cell's `transform:none !important` — so the
   wipe needs no specificity war. */
.is-page-home .bento .step { transition: background .45s ease; }
.is-page-home .bento .step::after {
    display: block;            /* re-enable the pseudo the flat block hid */
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;   /* rides the dividing hairline */
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .55s cubic-bezier(.2,.7,.2,1);
    z-index: 1;
    pointer-events: none;
}
.is-page-home .bento .step:hover,
.is-page-home .bento .step:focus-visible {
    background: var(--surface) !important;   /* faint warmth = "this responds" */
}
.is-page-home .bento .step:hover::after,
.is-page-home .bento .step:focus-within::after { transform: scaleX(1); }
.is-page-home .bento .step .step__title {
    transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.is-page-home .bento .step:hover .step__title,
.is-page-home .bento .step:focus-within .step__title { transform: translateX(6px); }
.is-page-home .bento .step .dept__num { transition: color .3s ease; }
.is-page-home .bento .step:hover .dept__num,
.is-page-home .bento .step:focus-within .dept__num { color: var(--ink-mute); }
.is-page-home .bento .step .link { transition: color .3s ease; }
.is-page-home .bento .step:hover .link,
.is-page-home .bento .step:focus-within .link { color: var(--accent); }
.is-page-home .bento .step .arr { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.is-page-home .bento .step:hover .arr,
.is-page-home .bento .step:focus-within .arr { transform: translateX(4px); }

/* — Selected work: duotone at rest, full colour + magnetic pull on a spread. ——
   The case image fills its frame (cover/center) so it never letterboxes, sits
   slightly desaturated until you settle on it, and is drawn toward the cursor
   via the --mag-* vars home-fx.js sets — the transform is COMPOSED here so JS
   and CSS never fight over it. The base `.shot:hover` background pan is held in
   place: that snap (it had no transition) was the "image jumps down" on hover. */
.is-page-home .showcase .spread__media {
    background-size: cover;
    background-position: center;
    filter: saturate(0.8) brightness(0.92);
    transform: perspective(900px)
        rotateX(var(--sp-rx, 0deg)) rotateY(var(--sp-ry, 0deg))
        translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0) scale(var(--mag-s, 1));
    transform-style: preserve-3d;
}
.is-page-home .showcase .spread:hover .spread__media,
.is-page-home .showcase .spread:focus-within .spread__media {
    filter: saturate(1.05) brightness(1);
    background-position: center;     /* hold position — no jump */
    --mag-s: 1.025;
}

/* — Approach: the giant numeral leans into the accent as you read across, and
   drifts on scroll via the independent `translate` property (composes with the
   hover lean below, which owns `transform`). —— */
.is-page-home .approach .step .step__num {
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
    translate: 0 var(--numy, 0px);
}
.is-page-home .approach .step:hover .step__num { transform: translateX(8px); }

/* — Metrics: the accent unit ticks up when a figure is under the cursor. —— */
.is-page-home .metric { transition: color .3s ease; }
.is-page-home .metric .num em { display: inline-block; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.is-page-home .metric:hover .num em { transform: translateY(-4px); }
.is-page-home .metric .lbl { transition: color .3s ease; }
.is-page-home .metric:hover .lbl { color: var(--ink-mute); }

/* — Ticker: the marquee yields to the cursor so a name can be read. —— */
.is-page-home .ticker__item { transition: color .3s ease; }
.is-page-home .ticker__item:hover { color: var(--ink); }
.is-page-home .ticker__item:hover .dmd { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
    .is-page-home .ticker:hover .ticker__track,
    .is-page-home .ticker:focus-within .ticker__track { animation-play-state: paused; }
}

/* — Honour reduced-motion: keep the colour cues, drop the travel. —— */
@media (prefers-reduced-motion: reduce) {
    .is-page-home .bento .step::after,
    .is-page-home .bento .step .step__title,
    .is-page-home .showcase .spread__media,
    .is-page-home .approach .step .step__num,
    .is-page-home .metric .num em { transition: none; }
    .is-page-home .bento .step:hover .step__title,
    .is-page-home .bento .step:focus-within .step__title,
    .is-page-home .approach .step:hover .step__num,
    .is-page-home .metric:hover .num em,
    .is-page-home .showcase .spread__media,
    .is-page-home .showcase .spread:hover .spread__media,
    .is-page-home .showcase .spread:focus-within .spread__media { transform: none; }
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  FX LAYER  ·  v1  ·  cinematic editorial craft                            ║
   ╠══════════════════════════════════════════════════════════════════════════╣
   ║  A theatrical pass over the flat monograph: a hero load sequence, a       ║
   ║  cursor-reactive aurora, film grain, hand-drawn SVG accents, clip-wiped   ║
   ║  headings + case imagery, light-sweep buttons and a lagged cursor ring.   ║
   ║  Pairs with assets/js/home-fx.js (injects the decorative SVG nodes).      ║
   ║  GPU only (transform/opacity), LCP-safe (hero text + portrait move via    ║
   ║  transform alone), keyboard-reachable, and fully reduced-motion-gated.    ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── Ambient: film grain over the whole near-black canvas ──────────────────── */
body.is-page-home::after {
    content: "";
    position: fixed;
    inset: -60%;
    z-index: 9990;          /* above the UI like the base scan-tint it replaces, below the cursor ring */
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

/* ── Ambient: cursor-reactive aurora rising from the hero ──────────────────── */
.is-page-home .hero .glow {
    position: absolute;
    width: 72vmax;
    height: 72vmax;
    margin-left: -36vmax;          /* centre without using transform (GSAP owns it) */
    margin-top: -36vmax;
    left: var(--mx, 50%);
    top: var(--my, 26%);
    border-radius: 50%;
    /* A soft radial gradient already reads as a blurred glow, so we drop the
       costly filter:blur(46px) + mix-blend-mode:screen. Those forced the GPU to
       re-raster and backdrop-blend a ~1037px layer every frame (the dominant
       scroll-jank / unresponsiveness cost). Plain gradient = cheap composited
       layer; opacity is nudged up to keep the same on-screen presence. */
    background: radial-gradient(circle at center, var(--accent) 0%, rgba(120,110,230,0.20) 30%, transparent 64%);
    opacity: 0.22;
    pointer-events: none;
    z-index: 0;
    transition: left 0.7s cubic-bezier(.2,.7,.2,1), top 0.7s cubic-bezier(.2,.7,.2,1);
}
/* Keep hero content above the aurora. */
.is-page-home .hero__split,
.is-page-home .hero__foot { position: relative; z-index: 1; }

/* ── Hero load sequence (theatrical) ───────────────────────────────────────── */
@keyframes fxRise    { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes fxRiseBig { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@keyframes fxRiseBlur{ from { transform: translateY(38px); filter: blur(10px); } to { transform: none; filter: blur(0); } } /* opacity stays 1 → LCP-safe */
@keyframes fxFade    { from { opacity: 0; }                              to { opacity: 1; } }
@keyframes fxPort    { from { transform: scale(1.08); }                  to { transform: scale(1); } } /* opacity stays 1 → LCP-safe */
@keyframes fxTickX   { from { transform: scaleX(0); }                    to { transform: scaleX(1); } }
@keyframes fxDraw    { to   { stroke-dashoffset: 0; } }
@keyframes fxShutter { 0% { opacity: 0; transform: translateX(-130%) skewX(-12deg); } 14% { opacity: 1; } 100% { opacity: 0; transform: translateX(130%) skewX(-12deg); } }
/* Opacity-only — blur radius stays static so the GPU never re-blurs the 72vmax
   layer per frame (animating filter:blur() was the dominant scroll-jank cost). */
@keyframes fxAurora  { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.20; } }

@media (prefers-reduced-motion: no-preference) {
    html.has-js .is-page-home .hero__mark        { animation: fxRiseBig  1.0s 0.05s both cubic-bezier(.16,.84,.24,1); }
    html.has-js .is-page-home .hero__statement   { animation: fxRiseBlur 1.15s 0.22s both cubic-bezier(.16,.84,.24,1); }
    html.has-js .is-page-home .hero__scroll      { animation: fxRise     0.8s 0.34s both cubic-bezier(.2,.75,.2,1); }
    html.has-js .is-page-home .hero__figure img  { animation: fxPort     1.6s 0.04s both cubic-bezier(.16,.84,.24,1); }
    html.has-js .is-page-home .hero__figure .fx-shutter { animation: fxShutter 1.25s 0.30s both ease-out; }
    html.has-js .is-page-home .hero__go          { animation: fxFade     0.9s 0.38s both ease; }
    html.has-js .is-page-home .hero__meta        { animation: fxRiseBig  1.0s 0.22s both cubic-bezier(.16,.84,.24,1); }
    html.has-js .is-page-home .hero__foot        { animation: fxRise     0.9s 0.28s both cubic-bezier(.2,.75,.2,1); }
    html.has-js .is-page-home .hero__cap-tick    { transform-origin: left center; animation: fxTickX 0.6s 0.24s both cubic-bezier(.2,.7,.2,1); }
    /* Static glow (opacity pulse only) + static film grain — both were perpetual
       full-area repaints. The grain texture stays; it just no longer animates. */
    .is-page-home .hero .glow                    { animation: fxAurora 9s ease-in-out infinite; }
}

/* ── Hero: animated SVG signature swash beneath the wordmark ───────────────── */
.is-page-home .hero__mark-name { position: relative; }
.is-page-home .fx-sign {
    position: absolute;
    left: 0;
    bottom: -0.42em;
    width: 116%;
    max-width: 280px;
    height: 0.62em;
    color: var(--accent);
    overflow: visible;
    pointer-events: none;
    transform: rotate(-1.6deg);
    transform-origin: left center;
}
.is-page-home .fx-sign path { stroke-dasharray: 380; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
    html.has-js .is-page-home .fx-sign path {
        stroke-dashoffset: 380;
        animation: fxDraw 1.15s 0.95s forwards cubic-bezier(.6,0,.2,1);
    }
}

/* ── Hero: portrait frame + one-shot light shutter (injected by home-fx.js) ── */
.is-page-home .hero__figure .fx-frame {
    position: absolute;
    inset: 12px;
    width: auto;
    height: auto;
    color: var(--accent);
    opacity: 0.6;
    z-index: 3;
    pointer-events: none;
    overflow: visible;
}
.is-page-home .hero__figure .fx-frame path { stroke-dasharray: 420; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
    html.has-js .is-page-home .hero__figure .fx-frame path {
        stroke-dashoffset: 420;
        animation: fxDraw 1.5s 0.5s forwards cubic-bezier(.6,0,.2,1);
    }
}
.is-page-home .hero__figure .fx-shutter {
    position: absolute;
    top: -10%;
    bottom: -10%;
    left: 0;
    width: 42%;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.34), transparent);
    mix-blend-mode: screen;
    opacity: 0;
}

/* ── Hero: cinematic portrait — pointer 3D tilt + moving specular sheen ─────── */
.is-page-home .hero__split { perspective: 1200px; }
.is-page-home .hero__figure {
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform .55s cubic-bezier(.2,.7,.2,1);   /* smooth ease-back on leave */
}
.is-page-home .hero__figure.is-tilt { transition: transform .08s linear; }  /* tight while tracking */
.is-page-home .hero__figure .fx-gloss {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s ease;
    background: radial-gradient(220px 220px at var(--gx, 50%) var(--gy, 50%),
        rgba(255,255,255,0.32), rgba(255,255,255,0.07) 42%, transparent 64%);
    mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce) {
    .is-page-home .hero__figure { transform: none; transition: none; }
}

/* ── Hero: wordmark shimmer — a light band sweeps the name (load + hover) ───── */
@keyframes heroShimmer { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@media (prefers-reduced-motion: no-preference) {
    .is-page-home .hero__mark-name.is-shimmer {
        background-image: linear-gradient(100deg,
            var(--ink) 0%, var(--ink) 38%, #ffffff 47%,
            var(--accent) 53%, var(--ink) 62%, var(--ink) 100%);
        background-size: 250% 100%;
        -webkit-background-clip: text;
                background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: heroShimmer 1.15s ease-out both;
    }
    .is-page-home .hero__mark-name.is-shimmer .hero__reg {
        -webkit-text-fill-color: var(--accent);   /* keep the ® its accent colour */
    }
}

/* ── Hero: hand-drawn underline under the italic lead word ─────────────────── */
.is-page-home .hero__statement em { position: relative; }
.is-page-home .fx-underline {
    position: absolute;
    left: -2%;
    bottom: -0.26em;
    width: 104%;
    height: 0.5em;
    color: var(--accent);
    overflow: visible;
    pointer-events: none;
}
.is-page-home .fx-underline path { stroke-dasharray: 360; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
    html.has-js .is-page-home .fx-underline path {
        stroke-dashoffset: 360;
        animation: fxDraw 1.1s 0.9s forwards cubic-bezier(.65,0,.2,1);
    }
}

/* ── Section headings: a clip wipe as each scrolls in ──────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .is-page-home .reveal h2,
    .is-page-home .reveal .sec-head {
        clip-path: inset(0 100% 0 0);
        transition: clip-path 1.0s 0.08s cubic-bezier(.6,0,.2,1);
        will-change: clip-path;
    }
    .is-page-home .reveal.is-revealed h2,
    .is-page-home .reveal.is-revealed .sec-head { clip-path: inset(0 -6% 0 0); }
    /* Eyebrow tick draws out alongside its heading. */
    .is-page-home .reveal .eyebrow::before {
        transform-origin: left center;
        transform: scaleX(0);
        transition: transform 0.7s 0.28s cubic-bezier(.2,.7,.2,1);
    }
    .is-page-home .reveal.is-revealed .eyebrow::before { transform: scaleX(1); }
}

/* ── Selected work: clip-wiped reveal, corner frames, light sweep ──────────── */
@media (prefers-reduced-motion: no-preference) {
    .is-page-home .showcase .spread.reveal .spread__media {
        clip-path: inset(0 0 100% 0);
        transition: clip-path 1.1s cubic-bezier(.7,0,.2,1), filter .6s ease, transform .35s cubic-bezier(.2,.7,.2,1);
    }
    .is-page-home .showcase .spread.reveal.is-revealed .spread__media { clip-path: inset(0 0 0 0); }
}
/* Light sweep across the image on hover. */
.is-page-home .showcase .spread__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.10) 49%, transparent 66%);
    transform: translateX(-120%);
    transition: transform 0.9s ease;
}
.is-page-home .showcase .spread:hover .spread__media::after,
.is-page-home .showcase .spread:focus-within .spread__media::after { transform: translateX(120%); }
/* SVG corner brackets (injected by home-fx.js). */
.is-page-home .spread__media .fx-corner {
    position: absolute;
    width: 26px;
    height: 26px;
    color: var(--accent);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    transition: opacity .5s ease, top .45s cubic-bezier(.2,.7,.2,1), left .45s cubic-bezier(.2,.7,.2,1), right .45s cubic-bezier(.2,.7,.2,1), bottom .45s cubic-bezier(.2,.7,.2,1);
}
.is-page-home .fx-corner--tl { top: 11px; left: 11px; }
.is-page-home .fx-corner--tr { top: 11px; right: 11px; transform: rotate(90deg); }
.is-page-home .fx-corner--br { bottom: 11px; right: 11px; transform: rotate(180deg); }
.is-page-home .fx-corner--bl { bottom: 11px; left: 11px; transform: rotate(270deg); }
.is-page-home .showcase .spread.is-revealed .fx-corner { opacity: 0.8; }
.is-page-home .showcase .spread:hover .fx-corner--tl { top: 7px; left: 7px; }
.is-page-home .showcase .spread:hover .fx-corner--tr { top: 7px; right: 7px; }
.is-page-home .showcase .spread:hover .fx-corner--br { bottom: 7px; right: 7px; }
.is-page-home .showcase .spread:hover .fx-corner--bl { bottom: 7px; left: 7px; }
.is-page-home .showcase .spread:hover .fx-corner { opacity: 1; }

/* ── Buttons: a single light sweep on hover ────────────────────────────────── */
.is-page-home .btn { position: relative; overflow: hidden; isolation: isolate; }
.is-page-home .btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,0.30) 50%, transparent 64%);
    transform: translateX(-135%);
    transition: transform 0.7s ease;
}
.is-page-home .btn:hover::after,
.is-page-home .btn:focus-visible::after { transform: translateX(135%); }
@media (prefers-reduced-motion: reduce) {
    .is-page-home .btn::after,
    .is-page-home .showcase .spread__media::after { display: none; }
}

/* ── Lagged cursor ring (injected by home-fx.js) ───────────────────────────── */
.is-page-home .cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 38px;
    height: 38px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 99996;
    mix-blend-mode: screen;
    transition: opacity .35s ease, width .35s cubic-bezier(.2,.7,.2,1), height .35s cubic-bezier(.2,.7,.2,1), background .35s ease, border-color .35s ease;
    will-change: transform;
}
.is-page-home .cursor-ring.is-on   { opacity: 0.55; }
.is-page-home .cursor-ring.is-link {
    width: 66px;
    height: 66px;
    background: var(--accent-soft);
    border-color: var(--accent);
    opacity: 0.9;
}

/* ── Hero scroll cue: a quietly travelling chevron ─────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .is-page-home .hero__scroll .hero__chev { animation: fxCue 2s ease-in-out infinite; }
}
@keyframes fxCue { 0%, 100% { transform: translateY(0); opacity: .7; } 50% { transform: translateY(5px); opacity: 1; } }

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  FX LAYER  ·  v2  ·  homepage motion (ticker · work · approach · bento ·   ║
   ║  testimonials · CTA · scroll thread)                                       ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── Selected work: floating "Read the case" cursor label ──────────────────── */
.fx-caselabel {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 95;
    padding: 8px 14px;
    border-radius: 100px;
    background: var(--accent);
    color: var(--reverse);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    scale: 0.9;
    transition: opacity .25s ease, scale .25s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
}
.fx-caselabel.is-on { opacity: 1; scale: 1; }
.fx-caselabel span { margin-left: 4px; }

/* In-frame image parallax — an overscanned ::before carries the photo so it can
   drift inside the fixed frame without ever revealing an edge. */
.is-page-home .showcase .spread__media::before {
    content: "";
    position: absolute;
    inset: -9%;
    z-index: 0;
    background-image: var(--bg, none);
    background-size: cover;
    background-position: center;
    translate: 0 var(--bgy, 0px);
    will-change: transform;
}
.is-page-home .showcase .spread__media .stamp,
.is-page-home .showcase .spread__media::after { z-index: 2; }   /* keep stamp + sweep above the photo layer */
@media (prefers-reduced-motion: reduce) {
    .is-page-home .showcase .spread__media::before { translate: none; }
}

/* ── Ticker: velocity skew rides on the JS-driven transform; just smooth it ── */
.is-page-home .ticker__track { transition: none; }

/* ── Approach: accent connector line drawing across the steps ──────────────── */
.is-page-home .approach { position: relative; }
.is-page-home .approach .fx-connector {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
    z-index: 2;
}
@media (prefers-reduced-motion: no-preference) {
    .is-page-home .approach .fx-connector { transition: transform 1.1s cubic-bezier(.6,0,.2,1); }
}
.is-page-home .approach.is-connected .fx-connector { transform: scaleX(1); }

/* ── Bento: cursor-tracking spotlight glow + lift ──────────────────────────── */
/* (no overflow:hidden — it would clip the existing underline wipe at bottom:-1px) */
.is-page-home .bento .step { position: relative; }
/* Cursor-tracking spotlight glow REMOVED (shimmer-only hover). The card
   lift/shadow hover below is kept; only the cursor-following ::before glow is
   gone, so no stray centred glow renders without its JS driver. */
.is-page-home .bento .step > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
    .is-page-home .bento .step { transition: background .45s ease, transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; }
    .is-page-home .bento .step:hover {
        transform: translateY(-4px);
        box-shadow: inset 0 0 0 1px var(--accent-soft), 0 18px 40px -28px rgba(0,0,0,0.7);
    }
}

/* ── Testimonials: drag affordance ─────────────────────────────────────────── */
.is-page-home .pull-carousel [data-track] { cursor: grab; }
.is-page-home .pull-carousel.is-dragging [data-track] { cursor: grabbing; }
.is-page-home .pull-carousel .pull__mark { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.is-page-home .pull-carousel.is-dragging .pull__mark { transition: none; }

/* ── Final CTA: living aurora + drawn underline ────────────────────────────── */
.is-page-home .cta-billboard { position: relative; overflow: hidden; }
.is-page-home .cta-billboard > .wrap { position: relative; z-index: 1; }
.is-page-home .cta-billboard .fx-aurora {
    position: absolute;
    inset: -25%;
    z-index: 0;
    pointer-events: none;
    /* Same fix as the hero glow: this layer is 2616×1592px — a filter:blur(46px)
       + mix-blend-mode:soft-light surface that ALSO transform-animates forever,
       which meant a full re-raster + backdrop re-blend of ~4MP every frame, idle
       or not. The radial gradients alone give the soft aurora; we drop the blur
       and blend and lower opacity to compensate. The slow drift stays (it's now
       just a cheap composited transform). */
    opacity: 0.28;
    background:
        radial-gradient(38% 38% at 22% 32%, rgba(255,255,255,0.22), transparent 70%),
        radial-gradient(34% 34% at 80% 64%, var(--accent), transparent 70%),
        radial-gradient(44% 44% at 62% 18%, rgba(255,255,255,0.12), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
    .is-page-home .cta-billboard .fx-aurora { animation: ctaAurora 18s ease-in-out infinite alternate; }
}
@keyframes ctaAurora {
    from { transform: translate3d(-3%, -2%, 0) scale(1.05) rotate(0deg); }
    to   { transform: translate3d(4%, 3%, 0)  scale(1.16) rotate(7deg); }
}
.is-page-home .cta-billboard__head em { position: relative; }
.is-page-home .fx-underline--cta {
    position: absolute;
    left: -2%;
    bottom: -0.22em;
    width: 104%;
    height: 0.5em;
    overflow: visible;
    pointer-events: none;
}
.is-page-home .fx-underline--cta path { stroke-dasharray: 360; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
    html.has-js .is-page-home .cta-billboard .fx-underline--cta path { stroke-dashoffset: 360; }
    html.has-js .is-page-home .cta-billboard.is-revealed .fx-underline--cta path {
        animation: fxDraw 1.1s 0.2s forwards cubic-bezier(.65,0,.2,1);
    }
}

/* ── Scroll progress: a side thread replaces the global top bar on the home ── */
.is-page-home #progress-bar.progress { display: none; }
.fx-thread {
    position: fixed;
    top: 50%;
    right: 22px;
    transform: translateY(-50%);
    width: 2px;
    height: 38vh;
    max-height: 360px;
    z-index: 90;
    pointer-events: none;
    background: var(--rule);
    border-radius: 2px;
    overflow: hidden;
}
.fx-thread__fill {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--accent);
    transform-origin: top center;
    transform: scaleY(0);
}
@media (max-width: 900px) { .fx-thread { display: none; } .is-page-home #progress-bar.progress { display: block; } }