/* siteHero.css: the home page's full-screen film hero ("Chapters", picked 2026-10-07).
 *
 * The Seattle web cut plays full bleed under the fixed white header. The site is muted,
 * so the film's voiceover lines are set as on-page type, one per beat, rising word by
 * word in the lower left, with a chapter rail that fills along with the film. The CTA
 * stays bottom-right the whole time. Driven by js/siteHero.js; home page only.
 *
 * Hard rule: the Google Maps attribution is burned into the bottom-left of the video
 * and must stay visible while tiles are on screen. Nothing may enter --ich-attr-*, and
 * the video is anchored to the bottom so any crop comes off the sky instead.
 */
.ich {
    --ich-scrim: 16, 32, 43;               /* --site-ink as rgb, for gradients */
    --ich-gutter: clamp(20px, 5vw, 72px);
    --ich-attr-w: clamp(150px, 12vw, 240px);
    --ich-attr-h: clamp(44px, 7vh, 80px);
    --ich-cyan-light: #8fe3f5;            /* changing text on video; brand cyan is for buttons */
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 520px;
    overflow: hidden;
    isolation: isolate;
    background: #0b1822;
    color: #fff;
}

.ich-video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 100%;
    z-index: -2;
}
/* Portrait phones get the 9:16 cut; its credit is bottom-left, so anchor there. */
.ich.is-vertical .ich-video { object-position: 0% 100%; }

.ich-scrim {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        linear-gradient(to top, rgba(var(--ich-scrim), .62) 0%, rgba(var(--ich-scrim), .18) 38%, rgba(var(--ich-scrim), 0) 60%),
        linear-gradient(to right, rgba(var(--ich-scrim), .35) 0%, rgba(var(--ich-scrim), 0) 55%);
}
/* Soft shade under the burned-in credit so it reads over bright frames. */
.ich-attr-shade {
    position: absolute; left: 0; bottom: 0; width: 320px; height: 120px; z-index: -1; pointer-events: none;
    background: radial-gradient(120% 100% at 0% 100%, rgba(var(--ich-scrim), .42), rgba(var(--ich-scrim), 0) 70%);
}

.ich-story {
    position: absolute; z-index: 2;
    left: var(--ich-gutter); right: var(--ich-gutter);
    bottom: calc(var(--ich-attr-h) + clamp(28px, 5vh, 56px));
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px;
}

/* ---------------------------------------------------------------- the lines */
body.homepage2 .ich-lines {
    position: relative; margin: 0;
    min-height: 2.1em;
    font-size: clamp(38px, 5.6vw, 92px);
    line-height: 1;
    color: #fff;
}
.ich-line {
    position: absolute; left: 0; bottom: 0; max-width: 13em;
    font-weight: 700; line-height: 1; letter-spacing: -0.012em;
    text-wrap: balance;
    text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
    opacity: 0; filter: blur(6px); transform: translateY(-10px);
    transition: opacity .45s var(--site-ease), filter .45s var(--site-ease), transform .45s var(--site-ease);
}
.ich-line.is-on { opacity: 1; filter: none; transform: none; transition-delay: .15s; }
.ich-line .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.ich-line .w > span {
    display: inline-block; transform: translateY(105%);
    transition: transform .8s var(--site-ease);
    transition-delay: calc(.18s + var(--i, 0) * 55ms);
}
.ich-line.is-on .w > span { transform: none; }
.ich-line .w.accent > span { color: var(--ich-cyan-light); }

/* ---------------------------------------------------------------- chapter rail */
.ich-rail { display: flex; gap: 6px; margin-top: 22px; max-width: 640px; }
.ich-step {
    flex: 1 1 0; min-width: 0;
    font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255, 255, 255, .55); transition: color .3s;
}
.ich-step i { display: block; height: 3px; margin-bottom: 8px; border-radius: 2px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.ich-step i::after { content: ""; display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: var(--site-accent); }
.ich-step.is-done i::after { transform: scaleX(1); }
.ich-step.is-on { color: #fff; }
.ich-step.is-on i::after { transform: scaleX(var(--bp, 0)); }

/* ---------------------------------------------------------------- CTA */
.ich-cta { display: grid; justify-items: end; gap: 10px; text-align: right; }
.ich-offer { max-width: 22ch; font-size: 15px; font-weight: 500; line-height: 1.4; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }

/* Shown when autoplay is refused, under reduced motion, or on Save-Data. */
.ich-play {
    position: absolute; z-index: 3; left: var(--ich-gutter); top: calc(96px + env(safe-area-inset-top, 0px));
    display: none; align-items: center; gap: 10px;
    padding: 10px 16px 10px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .4);
    background: rgba(var(--ich-scrim), .55); color: #fff; font: inherit; font-size: 15px; font-weight: 600; line-height: 1;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer;
}
.ich-play svg { width: 22px; height: 22px; }
.ich.needs-play .ich-play { display: inline-flex; }
.ich.is-static .ich-rail { visibility: hidden; }

/* ---------------------------------------------------------------- phones */
@media (max-width: 760px) {
    .ich-story { grid-template-columns: 1fr; gap: 22px; bottom: calc(var(--ich-attr-h) + 28px); }
    body.homepage2 .ich-lines { font-size: clamp(34px, 10vw, 52px); min-height: 3.1em; }
    .ich-step { font-size: 0; letter-spacing: 0; }
    .ich-step i { margin-bottom: 0; }
    .ich-cta { justify-items: start; text-align: left; }
    .ich-cta .site-btn { width: auto; }
    .ich-offer { max-width: none; }
    .ich-play { top: calc(72px + env(safe-area-inset-top, 0px)); }
}

/* ---------------------------------------------------------------- cookie card */
/* header.html's cookie card sits bottom-right on other pages. Here that corner holds
   the CTA and the opposite one the Google Maps attribution, so dock it top-right under
   the fixed header, over sky. */
body.homepage2 #cookieConsent.cookie-card {
    top: calc(88px + env(safe-area-inset-top, 0px));
    bottom: auto;
}
@media (max-width: 900px) {
    body.homepage2 #cookieConsent.cookie-card { top: calc(68px + env(safe-area-inset-top, 0px)); }
}

/* ---------------------------------------------------------------- the copy under the film */
.ich-intro { border-bottom: 1px solid var(--site-line); }
.ich-intro-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: end; }
.ich-intro .site-stats { margin-top: 0; }
@media (max-width: 900px) { .ich-intro-grid { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ich-line, .ich-line .w > span, .ich-step, .ich-step i::after { transition: none !important; }
}
html.no-motion .ich-line, html.no-motion .ich-line .w > span { transition: none !important; }