.hero-2 {
    position: relative;
    height: 78vh;
    height: 78svh; /* progressive enhancement — svh is a static value (viewport as if the toolbar is always shown), so it avoids both the old vh-squash bug AND the visible resize-while-scrolling that dvh causes by design (dvh live-tracks the toolbar, which is right for some things but wrong for a hero that shouldn't visibly rescale mid-scroll). Browsers that don't support svh simply keep the vh value above. */
    width: 100%;

    padding: 0 3.5rem; /* 56px — matches the indent of the other sections' content, so the H1/intro lines up with them rather than sitting slightly further left */
    background: #262A34; /* Power Black — fallback while media loads / no media set */
    overflow: hidden;
}

/* Settings: Section Height
   Standard's min-height is in rem, a unit tied to root font-size rather than viewport
   height — so it's already immune to iOS Safari's vh-squash bug around orientation
   changes, with no extra work needed. Expanded is the mode actually at risk: it relies
   entirely on height:100vh/100svh with no floor beneath it, so a momentary vh
   miscalculation during rotation has nothing stopping it from squashing. A plain pixel
   min-height sidesteps the whole issue — it's not a viewport-relative unit at all, so it
   can't be affected by however Safari is calculating vh/dvh/svh in a given moment. */
.hero-2--height-standard {
    min-height: 47.5rem;
    max-height: 56rem;
}
.hero-2--height-expanded {
    height: 100vh;
    height: 100svh; /* progressive enhancement — svh, not dvh, for the same reason as above: static value, no visible resize while scrolling */
    min-height: 500px;
    max-height: 62.5rem;
}

/* The theme's shared .sticky utility (used for the homepage's scroll-stacking sections)
   independently sets min-height: 100vh, which would force this section back to full-screen
   regardless of the shorter height above. Override it here, scoped to this block only, so
   the site-wide .sticky behaviour elsewhere is untouched. */
.hero-2--height-standard.sticky {
    min-height: 47.5rem;
}
.hero-2--height-expanded.sticky {
    min-height: 500px;
}

.hero-2::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    background: linear-gradient(
        to top,
        rgba(20, 22, 28, 0.72),
        transparent 30%
    );
}

.hero-2__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-2__image {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: center 100%; /* anchor to bottom of image — showing the bottom edge matters more than the top */
    display: block;
}

/* Multi-image background rotation — Background Image is mandatory; Background Image 2
   and 3 are optional. When 2 are set (and no video — video still takes priority), they
   crossfade continuously, 8s visible each (16s total loop). When 3 are set, 5s visible
   each (15s total loop). Both use a ~1.5s overlap at each transition. The single-image
   case (the default, most common setup) is completely untouched by any of this — these
   rules only apply once the multi-image modifier class is present. Two separate keyframe
   sets, because the percentage math differs by both slot length and image count.

   Delays are NEGATIVE, not positive — this matters. A positive delay leaves the element at
   its static base style (opacity:0) until the delay elapses, then jumps straight to the
   animation's 0% keyframe (opacity:1) with no transition — a hard snap-in rather than a
   fade, and only on each image's very first appearance (subsequent loops fade correctly,
   since by then the animation is actually running). A negative delay instead starts the
   animation immediately, already partway through its cycle, so every image is continuously
   and smoothly animating from the very first frame — no waiting period, no snap, ever. */
.hero-2__background--multi-2 .hero-2__image,
.hero-2__background--multi-3 .hero-2__image {
    position: absolute;
    inset: 0;
    opacity: 0; /* fallback only — irrelevant once the animation is running, since negative delays mean it always is */
}
.hero-2__background--multi-2 .hero-2__image:first-of-type,
.hero-2__background--multi-3 .hero-2__image:first-of-type {
    opacity: 1; /* fallback only — safe static state if animation is unsupported or disabled (see prefers-reduced-motion below) */
}

@keyframes hero-2-bg-crossfade-2 {
    0%      { opacity: 1; }
    40.625% { opacity: 1; }
    50%     { opacity: 0; }
    90.625% { opacity: 0; }
    100%    { opacity: 1; } /* seamless loop — matches 0% */
}
.hero-2__background--multi-2 .hero-2__image {
    animation: hero-2-bg-crossfade-2 16s ease-in-out infinite; /* 8s visible per image */
}
.hero-2__background--multi-2 .hero-2__image:nth-of-type(1) { animation-delay: 0s; }
.hero-2__background--multi-2 .hero-2__image:nth-of-type(2) { animation-delay: -8s; }

@keyframes hero-2-bg-crossfade-3 {
    0%       { opacity: 1; }
    23.3333% { opacity: 1; }
    33.3333% { opacity: 0; }
    90%      { opacity: 0; }
    100%     { opacity: 1; } /* seamless loop — matches 0% */
}
.hero-2__background--multi-3 .hero-2__image {
    animation: hero-2-bg-crossfade-3 15s ease-in-out infinite;
}
.hero-2__background--multi-3 .hero-2__image:nth-of-type(1) { animation-delay: 0s; }
.hero-2__background--multi-3 .hero-2__image:nth-of-type(2) { animation-delay: -5s; }
.hero-2__background--multi-3 .hero-2__image:nth-of-type(3) { animation-delay: -10s; }

@media (prefers-reduced-motion: reduce) {
    .hero-2__background--multi-2 .hero-2__image,
    .hero-2__background--multi-3 .hero-2__image {
        animation: none;
        opacity: 0;
    }
    .hero-2__background--multi-2 .hero-2__image:first-of-type,
    .hero-2__background--multi-3 .hero-2__image:first-of-type {
        opacity: 1; /* freezes on the first image rather than continuing to cycle */
    }
}

.hero-2__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

/* .tmd-container is a shared site-wide utility (width-capping only, no height set).
   Without a real height here, .hero-2__content's height:100% below has nothing to
   resolve against, and the content collapses to the top instead of anchoring to the
   bottom. height:100% alone fixes that — no position change needed, since .tmd-container
   remaining un-positioned lets .hero-2__background's absolute positioning reach through
   to .hero-2 and span the full section width rather than the container's padded width. */
.hero-2 > .tmd-container {
    height: 100%;
}

.hero-2__content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 3.25rem;
}

.hero-2__tagline {
    margin: 0 0 2.2rem;
}

/* ===================================================================
   Voltage Sweep — headline treatment
   Wrap the accent (animated) portion of the headline in <span class="sweep">,
   and any portion that should stay plain white in <span class="alt">. Each
   gets its own width:max-content box so the gradient sizes to that word's
   actual width, not the full line — critical, since an unconstrained block
   or line box is wider than the word and throws off the sweep's timing.

   Plays ONCE, starting 4s after load (lets the hero and its media fully
   settle before the ignition catches the visitor's eye — via animation-delay,
   not an internal hold, so the wipe/knock/reset that follows run at their
   original speed, not stretched out), then holds permanently on Strike
   accent colour (animation-fill-mode: both) — deliberately not a loop. A headline
   that periodically fades back to white would read as "the moment passes";
   this is a one-time ignition that lands and stays.

   Sequence (after the 0.5s delay): a fast left-to-right wipe slams in
   the accent colour (#F2545B) (~0.2s, linear — see note below). The instant the colour
   fills the right edge, the word gets knocked a few pixels right and
   stretches 5% wider by the impact (scaleX only — height is untouched —
   growing from the left edge, so it radiates rightward rather than in both
   directions), then slowly drifts straight back to its resting position and
   width with no overshoot (~2.1s), and stays on the accent colour from
   then on.

   Easing note: the wipe segment is deliberately linear rather than eased.
   A per-keyframe animation-timing-function controls the segment *leaving*
   that keyframe, not arriving at it — with the default eased curve, the
   wipe visually reached ~90% complete very early in its duration and then
   crawled the rest of the way, so it looked finished well before the knock
   (which correctly waits for the segment's technical end) actually fired.
   Linear keeps visual and technical completion in sync.

   Direction note: background-position sliding always reveals new gradient
   content at the box's trailing edge in the direction of travel — with the
   gradient's colour stops in their natural order (white first, accent
   second) that produces a right-to-left wipe. To get left-to-right instead,
   the stops are reversed (accent first, white second) AND the position
   values for "white"/"accent" are swapped (white = 100%, accent = 0%) —
   both flips together preserve the white→accent timing while reversing
   which physical side the colour enters from.
   =================================================================== */
.hero-2__tagline h1 {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(5.5rem, 10.4vw, 11.375rem);
    font-style: italic;
    font-weight: 800;
    line-height: 0.86;
    letter-spacing: -0.045em;
    color: #F2545B; /* static fallback if a portion is left unwrapped */
}

.hero-2__tagline h1 .sweep {
    display: inline-block;
    width: max-content;
    padding-right: 0.12em; /* buffer for italic glyph overhang, so background-clip:text doesn't clip the trailing letter */
    transform-origin: left center; /* growth radiates rightward from the reading start-point, not the word's centre — keeps the left edge anchored while the impact pushes the rest of the word outward */

    background-image: linear-gradient(100deg, #F2545B 0%, #F2545B 38%, #F3F7F0 58%, #F3F7F0 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation-name: hero-2-sweep-in;
    animation-duration: 2.66s;
    animation-timing-function: cubic-bezier(.16,1,.3,1);
    animation-delay: 4s; /* lets the hero and its media fully settle before the ignition catches the visitor's eye */
    animation-iteration-count: 1;
    animation-fill-mode: both; /* 'both' — not just 'forwards' — so the word correctly holds white (the first keyframe) during the delay, rather than defaulting to background-position's initial value (which happens to be the accent colour in this mapping) and flashing/jumping when the animation starts */
}

.hero-2__tagline h1 .alt {
    display: inline-block;
    width: max-content;
    font-style: normal;
    color: #F3F7F0; /* Cream */
}

@keyframes hero-2-sweep-in {
    0%       { background-position: 100% 0; transform: translateX(0) scaleX(1);      animation-timing-function: linear; } /* animation starts immediately once the 0.5s delay ends — no internal hold, that job now belongs to animation-delay. Linear, so visual/technical wipe completion align */
    7.5188%  { background-position: 0% 0;   transform: translateX(0) scaleX(1);      animation-timing-function: cubic-bezier(.2,.9,.1,1); } /* wipe fills the right edge — fully on the accent colour, in ~0.2s. Knock + stretch begin here. */
    9.7744%  { transform: translateX(8px) scaleX(1.05);   animation-timing-function: cubic-bezier(.34,1.2,.4,1); } /* knocked right AND stretched 5% wider by the impact — height untouched (scaleX, not scale) — fast punch out, ~0.06s */
    88.7218% { transform: translateX(0) scaleX(1);  animation-timing-function: cubic-bezier(.4,0,.2,1); }     /* slow drift back — both position and width ease straight to their final resting values, no overshoot on either — ~2.1s */
    100%     { background-position: 0% 0;   transform: translateX(0) scaleX(1); } /* quick final settle (~0.3s) rather than a long drawn-out correction — the tiny -2px→0 / .97→1 distance reads as an unintended drift if stretched too long, so this last leg is snappy while the big drift above stays slow */
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero-2__tagline h1 .sweep { color: #F2545B; background: none; animation: none; }
}

/* Settings: Enable Headline Sweep = off */
.hero-2--no-sweep .hero-2__tagline h1 .sweep {
    color: #F2545B;
    background: none;
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .hero-2__tagline h1 .sweep { animation: none; color: #F2545B; background: none; }
}

.hero-2__description {
    color: #F3F7F0; /* Cream */
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.625rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.015em;
    max-width: 38rem;
    margin: 0;
}

/* ===================================================================
   Background treatment — dark multiply tint + pinstripe grain, layered
   over hero-2__background as a mask above the media. Tint breathes slowly
   between full strength and eased-back on the same 13s clock as the
   headline; start/end values match, so the loop has no hard cut.
   =================================================================== */
.hero-2__tint {
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: multiply;
    background:
        radial-gradient(120% 90% at -4% 10%, rgba(9,30,68,.96), transparent 94%),
        radial-gradient(115% 95% at 85% 92%, rgba(92,24,0,.98), transparent 92%),
        linear-gradient(180deg, rgba(8,9,12,.68) 0%, rgba(8,9,12,.4) 100%);
    animation: hero-2-tint-breathe-light 13s ease-in-out infinite;
}

/* Settings: Tint Depth */
.hero-2--tint-light .hero-2__tint {
    mix-blend-mode: screen;
    background:
        radial-gradient(120% 90% at 20% 15%, rgba(30,107,255,.28), transparent 55%),
        radial-gradient(135% 105% at 82% 90%, rgba(254,69,2,.52), transparent 64%);
}
.hero-2--tint-off .hero-2__tint {
    display: none;
}

/* Tint Depth balance: Light and Dark both sit 20% darker than the raw tint alone, so the
   scale reads Off (untouched, lightest) → Light → Dark with better spacing between steps.
   This is a flat black wash over the whole media + tint stack rather than a tweak to each
   tint's own values, because Light uses mix-blend-mode: screen — screen can only lighten,
   so a black layer *inside* that tint would do nothing; the wash has to sit outside it.
   It also stays constant while the tint "breathes", so the breathe range just shifts
   darker as a whole. Retune both settings together by changing the alpha (.2 = 20%). */
.hero-2--tint-dark .hero-2__background::after,
.hero-2--tint-light .hero-2__background::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, .2);
}

/* Settings: Background Breathe */
@keyframes hero-2-tint-breathe-light {
    0%   { opacity: 1; }
    50%  { opacity: .68; }
    100% { opacity: 1; }
}
@keyframes hero-2-tint-breathe-heavy {
    0%   { opacity: 1; }
    50%  { opacity: .76; }
    100% { opacity: 1; }
}
.hero-2--breathe-heavy .hero-2__tint { animation-name: hero-2-tint-breathe-heavy; }
.hero-2--breathe-off .hero-2__tint { animation: none; }

@media (prefers-reduced-motion: reduce) {
    .hero-2__tint { animation: none; }
}

.hero-2__pinstripe {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px, transparent 1px, transparent 3px);
    background-size: 100% 3px;
}

/* Settings: Enable Pinstripe = off */
.hero-2--pinstripe-off .hero-2__pinstripe {
    display: none;
}

@media(max-width:75rem) {
    .hero-2__tagline h1 {
        font-size: 6.875rem;
    }
}

@media (max-width: 48rem) {
    .hero-2 {
        padding: 0 1rem;
    }

    .hero-2__image {
        object-position: 75% 100%; /* new images frame their focal point ~75% from the left; centering (the desktop default) crops it off-screen on narrow viewports, so shift horizontal focus to match while keeping the bottom anchor */
    }

    .hero-2__tagline {
        word-wrap: break-word;
    }

    .hero-2__tagline h1 {
        font-size: 3.75rem;
    }

    .hero-2__description {
        font-size: 1.5rem;
    }
}