/*
  Home page (Mohan journey redesign).
  Loads after site-theme.css; uses its --rev-* tokens (navy/teal/amber/cream,
  Plus Jakarta Sans). Sections: hook, journey (story + ask + solar card), talk, proof,
  process, money, trust, closing.
*/

/* ---------- shared ---------- */
.section-head {
    max-width: 640px;
    margin: 0 auto 2rem;
    text-align: center;
}
.section-head h2 { margin-bottom: .4rem; }
.section-head p { color: var(--rev-muted); margin: 0; }
.section-head--light h2 { color: #fff; }
.section-head--light p { color: #cfe0dd; }

/* ---------- 1. Hook ---------- */
.hook {
    background: var(--rev-cream);
    padding: 3rem 0 2.5rem;
    text-align: center;
}
.hook__kicker {
    color: var(--rev-amber-text);
    font-weight: 700;
    margin-bottom: .4rem;
}
.hook__title {
    font-size: clamp(1.9rem, 5vw, 3rem);
    margin-bottom: .6rem;
}
.hook__lead {
    color: var(--rev-muted-strong);
    max-width: 44ch;
    margin: 0 auto 2rem;
    font-size: 1.05rem;
}
.tiles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 920px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .tiles { grid-template-columns: repeat(3, 1fr); }
}
.tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    text-align: center;
    background: #fff;
    border: 2px solid var(--rev-border);
    border-radius: var(--rev-radius);
    padding: 1.75rem 1.25rem;
    min-height: 44px;
    cursor: pointer;
    box-shadow: var(--rev-shadow);
    transition: border-color .15s ease, transform .15s ease, box-shadow .2s ease;
}
.tile:hover { border-color: var(--rev-teal); transform: translateY(-3px); box-shadow: var(--rev-shadow-lg); }
.tile.is-active {
    border-color: var(--rev-amber);
    box-shadow: 0 0 0 3px rgba(242, 181, 68, .35), var(--rev-shadow);
}

/* Attention cue: gently "breathe" the cards (staggered) so new visitors see
   they're tappable. Stops once a card is picked (.tiles.is-engaged) or if the
   visitor prefers reduced motion. */
@keyframes tilePulse {
    0%, 100% { box-shadow: var(--rev-shadow), 0 0 0 0 rgba(20, 138, 128, 0); }
    50%      { box-shadow: var(--rev-shadow), 0 0 0 7px rgba(20, 138, 128, .13); border-color: var(--rev-teal); }
}
.tiles:not(.is-engaged) .tile { animation: tilePulse 2.6s ease-in-out infinite; }
.tiles:not(.is-engaged) .tile:nth-child(2) { animation-delay: .3s; }
.tiles:not(.is-engaged) .tile:nth-child(3) { animation-delay: .6s; }
.tiles:not(.is-engaged) .tile:hover { animation-play-state: paused; }  /* let hover lift take over */

/* The "Tap a card" hint chip with a tapping-finger icon */
.hook__cue {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: fit-content;
    margin: 0 auto 1.4rem;
    padding: .45rem 1rem;
    background: var(--rev-mist);
    color: var(--rev-teal-dark);
    border-radius: 999px;
    font-weight: 800;
    font-size: .95rem;
    transition: opacity .4s ease, transform .4s ease;
}
.hook__cue-hand {
    display: inline-flex;
    font-size: 1.15rem;
    transform-origin: 70% 20%;
    animation: cueTap 1.5s ease-in-out infinite;
}
.hook__cue.is-hidden {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}
@keyframes cueTap {
    0%, 100% { transform: translateY(0) rotate(0); }
    45%      { transform: translateY(4px) rotate(-10deg); }
    65%      { transform: translateY(1px) rotate(-4deg); }
}
.tile__icon {
    width: 3.25rem; height: 3.25rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: var(--rev-mist);
    color: var(--rev-teal-dark);
    font-size: 1.5rem;
    margin-bottom: .35rem;
}
.tile.is-active .tile__icon { background: var(--rev-amber); color: var(--rev-navy); }
.tile__name { font-weight: 900; font-size: 1.15rem; color: var(--rev-navy); }
.tile__desc { font-size: .85rem; color: var(--rev-muted); }
.hook__privacy {
    font-size: .82rem;
    color: var(--rev-muted);
    max-width: 52ch;
    margin: 1.75rem auto 0;
}

@media (prefers-reduced-motion: reduce) {
    .tile { transition: none; }
    .tile:hover { transform: none; }
    .tiles:not(.is-engaged) .tile { animation: none; }
    .hook__cue-hand { animation: none; }   /* chip still shows as a static text hint */
}

/* ---------- 2+3. Journey ---------- */
.journey {
    background: #fff;
    padding: 2.5rem 0 3.5rem;
    border-top: 1px solid var(--rev-border);
}
.journey__heading { text-align: center; margin-bottom: 2rem; }
/* The journey is a full-width 3D stage: the model fills the width, with the
   story narrative (dots + step text) below it. */
.jcat__grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
@media (min-width: 992px) {
    /* Big, adaptive 3D view on desktop (overrides the 16:9 poster box) */
    .jcat__grid .story__viz[data-model] {
        aspect-ratio: auto;
        height: min(72vh, 620px);
        margin-bottom: 1rem;
    }
}

/* Story */
.story__scene {
    width: 100%;
    height: auto;
    border-radius: var(--rev-radius);
    display: block;
    margin-bottom: 1rem;
}

/* ---- 3D model viewer (progressive enhancement over the SVG) ---- */
/* Only categories with a model get the framed, overlay layout; the farm
   .story__viz (no data-model) keeps the plain SVG flow above. */
.story__viz[data-model] {
    position: relative;
    /* Tall, screen-based height on phones/tablets so the 3D scene has room
       above the model's own panel (which becomes a bottom sheet <=700px).
       16:9 on a narrow phone was only ~190px tall. Desktop height is set in
       the >=992px rule above. */
    height: clamp(380px, 72vh, 560px);
    border-radius: var(--rev-radius);
    overflow: hidden;
    background: #0b1020; /* matches the model page background */
    margin-bottom: 1rem;
}
.story__viz[data-model] .story__scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    transition: opacity .5s ease;
}
.story__3d {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: #0b1020;
    transition: opacity .5s ease;
}
.story__3d iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.story__viz.is-3d .story__3d { opacity: 1; }
.story__viz.is-3d .story__scene { opacity: 0; }

.story__3d-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    background: rgba(11, 16, 32, .55);
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
}
.story__3d-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 999px;
    animation: story3dSpin .8s linear infinite;
}
@keyframes story3dSpin { to { transform: rotate(360deg); } }

.story__3d-btn {
    position: absolute;
    left: 50%;
    bottom: .75rem;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: var(--rev-amber);
    color: var(--rev-navy);
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.story__3d-btn:hover { filter: brightness(1.05); }

/* ---- Tap-to-interact gate ----
   Default (model live, not interacting): a transparent full-area button sits
   over the iframe. A drag/scroll/wheel on it passes through to the page (so the
   page always scrolls), while a tap/click activates the model. When interacting,
   the gate lifts and a Done chip returns to scroll mode. Applies on all sizes. */
.story__3d-gate {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: none;                 /* only while 3D is live and not interacting */
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.story__viz.is-3d:not(.is-interacting) .story__3d-gate { display: flex; }
.story__3d-gate__hint {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    background: rgba(12, 18, 36, .82);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    pointer-events: none;          /* taps go to the gate button, not the pill */
}
.story__3d-done {
    position: absolute;
    bottom: .6rem;
    right: .6rem;
    z-index: 4;
    display: none;                 /* only while interacting */
    align-items: center;
    gap: .35rem;
    padding: .45rem .9rem;
    border: 0;
    border-radius: 999px;
    background: var(--rev-amber);
    color: var(--rev-navy);
    font-weight: 800;
    font-size: .85rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.story__viz.is-3d.is-interacting .story__3d-done { display: inline-flex; }
/* On small screens the model's own HUD becomes a full-width bottom sheet, so move
   Done to the top-right (below the model's tab row) to clear it. */
@media (max-width: 767.98px) {
    .story__3d-done { bottom: auto; top: 3.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .story__viz[data-model] .story__scene,
    .story__3d { transition: none; }
    .story__3d-spinner { animation: none; }
}

/* ---- Category rail: quick category switch beside the 3D stage ----
   Below 992px the rail is hidden and the model stays full width (visitors
   switch via the hook tiles above); only wide screens reserve a side column,
   so no overlap or layout shift happens at any resolution. */
.journey__cats { min-width: 0; }   /* let the model shrink inside the flex row */
.journey__rail { display: none; }

@media (min-width: 992px) {
    .journey__stage {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
    }
    .journey__cats { flex: 1 1 auto; }
    .journey__rail {
        display: flex;
        flex-direction: column;
        gap: .6rem;
        flex: 0 0 148px;
        width: 148px;
        /* keep the rail in view while the tall model area scrolls past */
        position: sticky;
        top: 96px;
    }
    .tile--rail {
        padding: .7rem .5rem;
        gap: .2rem;
    }
    .tile--rail .tile__icon {
        width: 2.4rem; height: 2.4rem;
        font-size: 1.1rem;
        margin-bottom: .1rem;
    }
    .tile--rail .tile__name { font-size: .92rem; }
}
.story__steps {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.story__dot {
    width: 44px; height: 44px;
    border-radius: 999px;
    border: 2px solid var(--rev-border);
    background: #fff;
    font-weight: 900;
    color: var(--rev-muted-strong);
    cursor: pointer;
}
.story__dot[aria-selected="true"] {
    background: var(--rev-amber);
    border-color: var(--rev-amber);
    color: var(--rev-navy);
}
.story__dot.is-seen { border-color: var(--rev-teal); color: var(--rev-teal-dark); }
.story__text { min-height: 5.5rem; }
.story__step-title { font-size: 1.1rem; margin-bottom: .35rem; }
.story__step-desc { color: var(--rev-muted-strong); margin: 0; }
.story__done {
    margin-top: .75rem;
    font-size: .88rem;
    color: var(--rev-teal-dark);
    font-weight: 700;
}

/* Ask (priority + numbers) */
.ask__block { margin-bottom: 1.5rem; }
.ask__q { font-size: 1.05rem; margin-bottom: .6rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
    border: 2px solid var(--rev-border);
    background: #fff;
    color: var(--rev-navy);
    border-radius: 999px;
    padding: .55rem 1rem;
    font-weight: 700;
    font-size: .9rem;
    min-height: 44px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .12s ease;
}
.chip--sm { padding: .4rem .8rem; font-size: .82rem; min-height: 40px; }
.chip:hover { border-color: var(--rev-teal); transform: translateY(-1px); }
.chip.is-active {
    border-color: var(--rev-amber);
    background: var(--rev-amber);
    color: var(--rev-navy);
    box-shadow: 0 4px 12px rgba(242, 181, 68, .3);
}
.ask__nobill-toggle {
    margin-top: .75rem;
    background: none;
    border: none;
    color: var(--rev-teal-dark);
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    padding: .25rem 0;
}
.nobill {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--rev-mist);
    border-radius: var(--rev-radius-sm);
}
.nobill__row { margin-bottom: .75rem; }
.nobill__label { display: block; font-size: .82rem; font-weight: 700; color: var(--rev-muted-strong); margin-bottom: .4rem; }
.nobill__note { font-size: .8rem; color: var(--rev-muted); margin: .25rem 0 0; }

/* ---------- Solar card ---------- */
.solar-card {
    margin-top: 1.5rem;
    background: var(--rev-navy);
    color: #fff;
    border-radius: var(--rev-radius);
    padding: 1.5rem;
}
.sc__tag {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--rev-navy);
    background: var(--rev-amber);
    border-radius: 999px;
    padding: .2rem .6rem;
    margin-bottom: .75rem;
}
.sc__headline { font-size: 1.3rem; color: #fff; margin-bottom: .2rem; }
.sc__headline b { color: var(--rev-amber); }
.sc__sub { color: #cfe0dd; font-size: .9rem; margin-bottom: 1rem; }
.sc__figures { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 1.1rem; }
.sc__fig { }
.sc__fig-val { display: block; font-weight: 900; font-size: 1.25rem; color: var(--rev-amber); }
.sc__fig-label { font-size: .72rem; color: #b8c7d6; }
.sc__years-label { font-size: .78rem; color: #cfe0dd; margin-bottom: .4rem; }
.sc__years { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.sc__year-btn {
    border: 1px solid rgba(255,255,255,.3);
    background: transparent;
    color: #fff;
    border-radius: 999px;
    padding: .35rem .7rem;
    font-weight: 700;
    font-size: .82rem;
    min-height: 40px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sc__year-btn:hover { border-color: rgba(255, 255, 255, .6); }
.sc__year-btn.is-active {
    background: var(--rev-teal);
    border-color: var(--rev-teal);
    box-shadow: 0 4px 12px rgba(20, 138, 128, .45);
}
.sc__chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 110px;
    padding: .5rem;
    background: rgba(255,255,255,.05);
    border-radius: var(--rev-radius-sm);
    margin-bottom: .4rem;
}
.sc__bar { flex: 1 1 0; border-radius: 3px 3px 0 0; min-height: 3px; }
.sc__bar.is-recovering { background: var(--rev-amber); }
.sc__bar.is-saving { background: var(--rev-teal); }
.sc__legend { display: flex; gap: 1rem; font-size: .72rem; color: #cfe0dd; margin-bottom: 1rem; }
.sc__legend span { display: inline-flex; align-items: center; gap: .3rem; }
.sc__swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.sc__swatch--amber { background: var(--rev-amber); }
.sc__swatch--teal { background: var(--rev-teal); }
.sc__kept { font-size: .95rem; color: #fff; margin-bottom: 1rem; }
.sc__kept b { color: var(--rev-amber); }
.sc__surprise-btn {
    width: 100%;
    border: 1px dashed var(--rev-amber);
    background: transparent;
    color: var(--rev-amber);
    border-radius: var(--rev-radius-sm);
    padding: .7rem;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 1rem;
}
.sc__reveal {
    background: rgba(242,181,68,.12);
    border-radius: var(--rev-radius-sm);
    padding: .9rem;
    margin-bottom: 1rem;
    font-size: .92rem;
}
.sc__cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .9rem; }
.sc__note { font-size: .75rem; color: #9fb3c4; margin: 0; }

/* ---------- 4. Talk ---------- */
.talk { background: var(--rev-mist); padding: 3rem 0; }
.talk__grid { display: grid; gap: 2rem; }
@media (min-width: 992px) {
    .talk__grid { grid-template-columns: .85fr 1.15fr; align-items: start; }
}
.talk__intro h2 { margin-bottom: .6rem; }
.talk__intro p { color: var(--rev-muted-strong); margin-bottom: 1.25rem; }
.talk__contact { list-style: none; padding: 0; margin: 0; }
.talk__contact li { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.talk__contact a { color: var(--rev-navy); font-weight: 700; text-decoration: none; }
.talk__contact a:hover { color: var(--rev-teal-dark); }
.talk__contact i { color: var(--rev-teal); }
.talk__form-wrap {
    background: #fff;
    border: 1px solid var(--rev-border);
    border-radius: var(--rev-radius);
    padding: 1.5rem;
    box-shadow: var(--rev-shadow);
}
/* When the wrap hosts the calculator component (which has its own card),
   strip this wrapper's chrome so there's no double card. */
.talk__form-wrap.is-calc {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}
.talk__form-wrap .form-control,
.talk__form-wrap .form-select { height: 52px; background: var(--rev-cream); }
.talk__form-wrap textarea.form-control { height: auto; }
.talk__consent { font-size: .85rem; color: var(--rev-muted-strong); }
.talk__consent a { color: var(--rev-teal-dark); }
.talk__pending { color: var(--rev-muted); font-style: italic; }

/* ---------- 5. Proof ---------- */
.proof { background: #fff; padding: 3rem 0; }
.proof__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 1.25rem;
    max-width: 920px;
    margin: 0 auto;
}
@media (min-width: 768px) { .proof__stats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .proof__stats { grid-template-columns: repeat(6, 1fr); } }
.proof__stat { text-align: center; border-top: 3px solid var(--rev-amber); padding-top: 1rem; }
.proof__val {
    display: block;
    font-weight: 800;
    font-size: clamp(2rem, 4.5vw, 2.6rem);
    color: var(--rev-navy);
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin-bottom: .4rem;
}
.proof__val small { font-size: .72rem; color: var(--rev-muted); font-weight: 700; letter-spacing: 0; }
.proof__label { font-size: .82rem; color: var(--rev-muted); line-height: 1.4; }
.proof__cta { text-align: center; margin-top: 2rem; }

/* ---------- 6. Process ---------- */
.process { background: var(--rev-cream); padding: 3rem 0; }
.process__rail {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1.25rem;
    counter-reset: step;
}
@media (min-width: 768px) { .process__rail { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .process__rail { grid-template-columns: repeat(6, 1fr); } }
.process__step {
    background: #fff;
    border: 1px solid var(--rev-border);
    border-radius: var(--rev-radius);
    padding: 1.25rem;
    box-shadow: var(--rev-shadow);
    transition: transform .15s ease, box-shadow .2s ease;
}
.process__step:hover { transform: translateY(-3px); box-shadow: var(--rev-shadow-lg); }
.process__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.2rem; height: 2.2rem;
    border-radius: 8px;
    background: var(--rev-teal);
    color: #fff;
    font-weight: 900;
    margin-bottom: .6rem;
}
.process__step h3 { font-size: 1rem; margin-bottom: .3rem; }
.process__step p { font-size: .85rem; color: var(--rev-muted); margin: 0; }
.process__days {
    display: inline-block;
    margin-top: .35rem;
    font-size: .75rem;
    font-weight: 700;
    color: var(--rev-amber-text);
    background: var(--rev-amber-soft);
    border-radius: 999px;
    padding: .1rem .5rem;
}

/* ---------- 7. Money ---------- */
.money { background: #fff; padding: 3rem 0; }
.money__grid { display: grid; gap: 1.5rem; max-width: 820px; margin: 0 auto; }
@media (min-width: 768px) { .money__grid { grid-template-columns: 1fr 1fr; } }
.money__card {
    background: #fff;
    border: 1px solid var(--rev-border);
    border-radius: var(--rev-radius);
    padding: 1.5rem;
    box-shadow: var(--rev-shadow);
}
.money__card h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.money__card p { color: var(--rev-muted-strong); margin-bottom: .6rem; }
.money__note { font-size: .8rem; color: var(--rev-muted); margin: 0; }

/* ---------- 8. Trust ---------- */
.trust { background: var(--rev-navy); padding: 3rem 0; }
.trust__grid { display: grid; gap: 1.25rem; }
@media (min-width: 576px) { .trust__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .trust__grid { grid-template-columns: repeat(4, 1fr); } }
/* Refined glassmorphism tiles: a faint translucent fill + hairline white border
   lift each credential off the navy without competing with the amber icons. */
.trust__item {
    color: #fff;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--rev-radius);
    padding: 1.5rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.trust__item:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .16);
    transform: translateY(-3px);
}
.trust__item i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem;
    border-radius: 10px;
    background: var(--rev-amber);
    color: var(--rev-navy);
    font-size: 1.3rem;
    margin-bottom: .75rem;
}
.trust__item h3 { font-size: 1.02rem; color: #fff; margin-bottom: .35rem; }
.trust__item p { font-size: .85rem; color: #cbd8e6; margin: 0; }

/* ---------- 9. Closing ---------- */
.closing { background: var(--rev-cream); padding: 3.5rem 0; text-align: center; }
.closing h2 { margin-bottom: .4rem; }
.closing p { color: var(--rev-muted-strong); margin-bottom: 1.5rem; }
.closing__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* ---------- 0. Intro cover (iPhone-lockscreen-style swipe-up) ----------
   Full-viewport brand cover shown on load; swipe/scroll up (or tap the hint)
   slides it away to reveal the hook. The root .intro carries the gesture
   transform; the inner .intro__sheet carries the periodic "tempting" nudge so
   the two never fight. JS: home-intro.js. */
.intro {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    overflow: hidden;
    background: linear-gradient(160deg, #0B1A33 0%, #112a4d 55%, #0B1A33 100%);
    color: #fff;
    touch-action: none;                 /* we drive the gesture ourselves */
    will-change: transform;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);   /* iOS-like ease-out */
}
.intro.is-dragging { transition: none; }           /* follow the finger with no lag */
.intro__sheet {
    position: relative;
    z-index: 2;              /* stay above .intro__media (z-index 1); the idle
                                nudge animation makes this a stacking context, so
                                an explicit level is required or the video covers the text */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.intro.is-idle .intro__sheet { animation: introNudge 3.4s ease-in-out infinite; }

/* full-bleed looping video backdrop. Two stacked <video>s are cross-faded by
   home-intro-video.js so the three clips run seamlessly. A navy scrim darkens
   the brand-text and hint zones so they stay legible over any frame. */
.intro__media {
    position: absolute;
    inset: 0;
    z-index: 1;                 /* behind the brand text (z-index 2) */
    overflow: hidden;
}
.intro__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .9s ease;
    will-change: opacity;
}
.intro__video.is-active { opacity: 1; }
.intro__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(105deg, rgba(11, 26, 51, .82) 0%, rgba(11, 26, 51, .5) 42%, rgba(11, 26, 51, .12) 100%),
        linear-gradient(to top, rgba(11, 26, 51, .72) 0%, rgba(11, 26, 51, 0) 42%);
}

.intro__inner {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.5rem, 6vw, 5rem);
    max-width: 44rem;
}
.intro__logo { height: 54px; width: auto; max-width: 300px; object-fit: contain; align-self: flex-start; margin-bottom: 1.25rem; }
/* Premium wordmark: thin geometric Montserrat, uppercase, widely tracked
   (matches the client's new logo). Amber accent kept on SOLAR. */
.intro__brand {
    margin: 0;
    font-family: "Montserrat", var(--rev-font-display);
    font-weight: 300;
    line-height: 1.04;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: clamp(2.2rem, 9vw, 4.6rem);
    color: #fff;
    text-shadow: 0 2px 22px rgba(11, 26, 51, .5);
}
.intro__brand-solar { color: var(--rev-amber); }
.intro__sub {
    margin: .7rem 0 0;
    font-family: "Montserrat", var(--rev-font-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .42em;
    font-size: clamp(.8rem, 3vw, 1.2rem);
    color: rgba(255, 255, 255, .9);
    text-shadow: 0 1px 14px rgba(11, 26, 51, .5);
}
.intro__tag {
    margin: 1.1rem 0 0;
    font-size: clamp(1rem, 2.6vw, 1.35rem);
    color: rgba(255, 255, 255, .88);
    text-shadow: 0 1px 14px rgba(11, 26, 51, .5);
    max-width: 24ch;
}

/* bottom hint + glowing arrow */
.intro__hint {
    position: relative;
    z-index: 2;
    margin: 0 auto clamp(1.5rem, 5vh, 3rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    padding: .5rem 1rem;
    background: none;
    border: 0;
    cursor: pointer;
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    text-shadow: 0 1px 12px rgba(11, 26, 51, .55);
    -webkit-tap-highlight-color: transparent;
}
.intro__hint-text { opacity: .9; }
.intro__arrow {
    font-size: 1.7rem;
    line-height: 1;
    color: var(--rev-amber);
    filter: drop-shadow(0 0 7px rgba(242, 181, 68, .85));
    animation: introArrow 1.6s ease-in-out infinite;
}

@keyframes introArrow {
    0%, 100% { transform: translateY(0); opacity: .7; }
    50%      { transform: translateY(-8px); opacity: 1; }
}
@keyframes introNudge {
    0%, 86%, 100% { transform: translateY(0); }
    92%           { transform: translateY(-16px); }
}

/* Phones/tablets: anchor the branding toward the lower half */
@media (max-width: 767.98px) {
    .intro__inner { justify-content: flex-end; padding-bottom: 2rem; }
    /* brand text sits low on phones, so weight the scrim toward the bottom */
    .intro__scrim {
        background: linear-gradient(to top, rgba(11, 26, 51, .85) 0%, rgba(11, 26, 51, .35) 46%, rgba(11, 26, 51, .1) 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .intro { transition: none; }
    .intro.is-idle .intro__sheet { animation: none; }
    .intro__arrow { animation: none; }
    .intro__video { transition: none; }   /* no crossfade; JS also skips autoplay */
}

/* Hover lifts added in the 2026-10 elevation pass settle to no transform for
   visitors who prefer reduced motion (colour/shadow state changes still apply). */
@media (prefers-reduced-motion: reduce) {
    .process__step, .trust__item { transition: box-shadow .2s ease, background .2s ease, border-color .2s ease; }
    .process__step:hover, .trust__item:hover, .chip:hover { transform: none; }
}