/* ==========================================================================
   Conference Room Systems Los Angeles — ION AVT
   Dark, photo-led, one accent (the ION mark red). No frameworks.
   ========================================================================== */

:root {
    --ink: #07090d;
    --surface: #12151c;
    --raised: #191d26;
    --line: rgba(255, 255, 255, 0.11);
    --line-strong: rgba(255, 255, 255, 0.22);
    --text: #ffffff;
    --muted: rgba(255, 255, 255, 0.70);
    --muted-soft: rgba(255, 255, 255, 0.52);

    /* ION AVT mark red, sampled from their logo file */
    --accent: #be373c;
    --accent-hot: #d94046;
    --accent-text: #ef7276;   /* brightened so small text clears AA on --ink */

    --font-display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --wrap: 1180px;
    --gut: clamp(20px, 5vw, 40px);
    --radius: 14px;
    --stack-top: 96px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    background: var(--ink);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

h1 { font-size: clamp(1.95rem, 3.5vw, 2.9rem); }
h2 { font-size: clamp(1.95rem, 3.8vw, 3rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.25; }

p { color: var(--muted); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-text); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section--tight { padding: clamp(44px, 6vw, 72px) 0; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: var(--accent-text);
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.eyebrow::before {
    content: '';
    width: 26px;
    height: 2px;
    background: var(--accent);
}

.lede { font-size: clamp(1.05rem, 1.5vw, 1.2rem); max-width: 62ch; }

/* --- Skip link ------------------------------------------------------- */
.skip-link {
    position: absolute;
    top: -60px;
    left: 12px;
    z-index: 200;
    padding: 10px 16px;
    background: var(--accent);
    color: #fff;
    border-radius: 0 0 8px 8px;
    text-decoration: none;
}
.skip-link:focus { top: 0; }

/* --- Header ---------------------------------------------------------- */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    transition: background-color 220ms ease, border-color 220ms ease, backdrop-filter 220ms ease;
    border-bottom: 1px solid transparent;
}

.site-header.is-stuck {
    background: rgba(7, 9, 13, 0.90);
    border-bottom-color: var(--line);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 78px;
}

.site-logo { display: flex; align-items: center; }
.site-logo img { width: 168px; height: auto; }

.header-actions { display: flex; align-items: center; gap: 12px; }

.header-phone {
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    white-space: nowrap;
}
.header-phone:hover, .header-phone:focus-visible { color: var(--accent-text); }

/* --- Buttons --------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 26px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: var(--font-display);
    font-size: 0.97rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--accent-hot); transform: translateY(-2px); }

.btn--ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: #fff; background: rgba(255, 255, 255, 0.07); }

.btn--sm { padding: 11px 18px; font-size: 0.9rem; }

/* The page is locked behind the card. Nothing scrolls, nothing is reachable,
   until the visitor types a name and presses Join. */
html.is-locked,
html.is-locked body {
    overflow: hidden !important;
    height: 100%;
}

/* --- Hero -----------------------------------------------------------------
   You land on the card, put a name in, press Join. The room wakes, the devices
   check in, the payoff lands, then the page arrives. Card, payoff and copy sit
   in the same centre and hand over to each other in turn.

   The stylesheet default is the FINISHED state: copy visible, room lit, card
   gone. So with scripts off, or motion reduced, a visitor simply arrives at the
   end of the story instead of at a dead card.
   ------------------------------------------------------------------------- */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding: 112px 0 84px;
    overflow: hidden;
    background: #05070c;
}

.hero__room {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #05070c url('../images/hero-poster.jpg') center 46% / cover no-repeat;
    --lit: 1;
    filter: brightness(calc(0.16 + var(--lit) * 0.88)) saturate(calc(0.18 + var(--lit) * 0.88));
    transform: scale(1.04);
    transition: filter 1100ms ease;
}

.hero__roomwash {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(96deg, rgba(5, 7, 12, 0.93) 0%, rgba(5, 7, 12, 0.85) 34%, rgba(5, 7, 12, 0.50) 62%, rgba(5, 7, 12, 0.40) 100%),
        linear-gradient(180deg, rgba(5, 7, 12, 0.58) 0%, rgba(5, 7, 12, 0.18) 30%, rgba(5, 7, 12, 0.70) 78%, var(--ink) 100%);
}

.hero__stage {
    position: relative;
    z-index: 2;
    width: 100%;
    display: grid;
}

/* the three acts share one grid cell and cross over in place */
.hero__stage > .console,
.hero__stage > .payoff,
.hero__stage > .hero__copy {
    grid-area: 1 / 1;
    align-self: center;
}

/* ---- act one: the card ------------------------------------------------ */
.console {
    justify-self: center;
    width: min(520px, 88vw);
    padding: 28px 28px 26px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    background: rgba(10, 13, 20, 0.90);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    box-shadow: 0 36px 100px rgba(0, 0, 0, 0.68), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    font-family: var(--font-body);
    opacity: 0;
    pointer-events: none;
    transition: opacity 620ms ease, transform 620ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* only present while the sequence is live */
html.js .hero.is-armed .console { opacity: 1; pointer-events: auto; }
html.js .hero.is-armed.is-payoff .console { opacity: 0; transform: scale(0.97); pointer-events: none; }

.console__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.console__room { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; color: #fff; }
.console__sub  { font-size: 0.78rem; color: rgba(255, 255, 255, 0.46); margin-top: 2px; }

.console__state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
}

.console__state i {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.32);
    transition: background 260ms ease, box-shadow 260ms ease;
}

.console.is-live .console__state { border-color: rgba(52, 199, 123, 0.5); color: #8ff0bd; }
.console.is-live .console__state i { background: #34c77b; box-shadow: 0 0 10px #34c77b; }

/* name first, nothing else, until you join */
.console__name { margin-top: 18px; }

.console__name label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

.console__name input {
    width: 100%;
    padding: 16px 17px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.36);
    color: #fff;
    font-family: var(--font-body);
    font-size: 1rem;
}

.console__name input::placeholder { color: rgba(255, 255, 255, 0.32); }

.console__name input:focus {
    outline: 2px solid var(--accent-text);
    outline-offset: 1px;
    border-color: transparent;
}

.console.is-joined .console__name { display: none; }

.join {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 16px 0 0;
    padding: 18px;
    border: 0;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 600;
    overflow: hidden;
    cursor: pointer;
}

.join:hover { background: var(--accent-hot); }
.join:disabled { cursor: default; }

.join__fill {
    position: absolute;
    inset: 0;
    transform-origin: left center;
    transform: scaleX(var(--jf, 0));
    background: rgba(255, 255, 255, 0.22);
}

.join span { position: relative; z-index: 1; }

.join__pulse {
    position: absolute;
    inset: -2px;
    border-radius: 14px;
    border: 2px solid var(--accent-hot);
    opacity: 0;
    animation: joinPulse 2.1s ease-out infinite;
}

@keyframes joinPulse {
    0%   { transform: scale(1); opacity: 0.8; }
    70%  { transform: scale(1.09); opacity: 0; }
    100% { transform: scale(1.09); opacity: 0; }
}

.console.is-joined .join__pulse { display: none; }

.console__live {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 820ms cubic-bezier(0.4, 0, 0.2, 1), opacity 560ms ease 160ms;
}

.console.is-joined .console__live { max-height: 470px; opacity: 1; }

.console__you {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    padding: 9px 11px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
}

.console__you .av {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--accent-hot), #7a1f24);
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
}

.console__you b { font-size: 0.88rem; color: rgba(255, 255, 255, 0.9); font-weight: 600; }
.console__you > span > span { font-size: 0.76rem; color: rgba(255, 255, 255, 0.42); }
.console__you .mic { margin-left: auto; font-size: 0.72rem; color: rgba(140, 240, 189, 0.85); white-space: nowrap; }

.checks { list-style: none; margin: 12px 0 0; display: grid; gap: 1px; }

.checks li {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 9px 2px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.36);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: color 260ms ease;
}

.checks li:last-child { border-bottom: 0; }
.checks li.on { color: rgba(255, 255, 255, 0.92); }

.checks .dot {
    position: relative;
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    transition: border-color 240ms ease, background 240ms ease;
}

.checks li.on .dot { border-color: #34c77b; background: rgba(52, 199, 123, 0.16); }

.checks .dot::after {
    content: '';
    position: absolute;
    left: 4px; top: 3.5px;
    width: 5px; height: 8px;
    border-right: 2px solid #34c77b;
    border-bottom: 2px solid #34c77b;
    transform: rotate(42deg) scale(0);
    transition: transform 240ms cubic-bezier(0.2, 1.4, 0.4, 1);
}

.checks li.on .dot::after { transform: rotate(42deg) scale(1); }

.checks .val { font-size: 0.74rem; color: rgba(255, 255, 255, 0.3); font-variant-numeric: tabular-nums; transition: color 240ms ease; }
.checks li.on .val { color: rgba(140, 240, 189, 0.85); }

.meters { display: flex; align-items: flex-end; gap: 3px; height: 28px; margin-top: 14px; }

.meters i {
    flex: 1;
    background: linear-gradient(180deg, var(--accent-hot), rgba(190, 55, 60, 0.35));
    border-radius: 2px;
    height: 12%;
    transform-origin: bottom;
}

/* ---- act two: the payoff ---------------------------------------------- */
.payoff {
    justify-self: center;
    max-width: 900px;
    padding: 0 24px;
    text-align: center;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
    pointer-events: none;
}

html.js .hero.is-armed.is-payoff .payoff { opacity: 1; transform: none; }
html.js .hero.is-armed.is-done .payoff { opacity: 0; }

.payoff b {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2.9rem, 7vw, 5.6rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: #fff;
    text-shadow: 0 4px 40px rgba(0, 0, 0, 0.9);
}

.payoff span {
    display: block;
    margin-top: 16px;
    font-size: clamp(1.05rem, 1.7vw, 1.4rem);
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.9);
}

/* ---- act three: the page ---------------------------------------------- */
.hero__copy {
    width: 100%;
    transition: opacity 760ms ease, transform 760ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

html.js .hero.is-armed .hero__copy { opacity: 0; transform: translateY(26px); pointer-events: none; }
html.js .hero.is-armed.is-done .hero__copy { opacity: 1; transform: none; pointer-events: auto; }

.hero__copyinner { max-width: 720px; }

.hero h1 { margin-bottom: 16px; text-wrap: balance; }
.hero h1 .accent { color: var(--accent-text); }

.hero__sub {
    font-size: clamp(1.02rem, 1.5vw, 1.18rem);
    color: rgba(255, 255, 255, 0.88);
    max-width: 48ch;
}

.hero__points { list-style: none; margin: 20px 0; display: grid; gap: 9px; }

.hero__points li {
    position: relative;
    padding-left: 28px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 1rem;
}

.hero__points li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.5em;
    width: 14px; height: 7px;
    border-left: 2px solid var(--accent-text);
    border-bottom: 2px solid var(--accent-text);
    transform: rotate(-45deg);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero__friction { margin-top: 12px; color: rgba(255, 255, 255, 0.62); font-size: 0.9rem; }

.hero__cue {
    position: absolute;
    left: 50%; bottom: -52px;
    width: 26px; height: 42px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-radius: 14px;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 600ms ease;
}

html.js .hero.is-armed.is-done .hero__cue { opacity: 0.8; }

.hero__cue span {
    position: absolute;
    top: 8px; left: 50%;
    width: 4px; height: 8px;
    margin-left: -2px;
    border-radius: 2px;
    background: #fff;
    animation: cueDrop 1.9s ease-in-out infinite;
}

@keyframes cueDrop {
    0%   { transform: translateY(0); opacity: 1; }
    70%  { transform: translateY(14px); opacity: 0; }
    100% { transform: translateY(14px); opacity: 0; }
}

/* --- Desktop-only gate ----------------------------------------------------
   A concept preview, not a live site. Below desktop, or on any touch-primary
   device, the page is replaced entirely rather than reflowed. Pure CSS, so it
   cannot be skipped by turning scripts off.
   ------------------------------------------------------------------------- */
.gate { display: none; }

@media (max-width: 1100px), (hover: none) and (pointer: coarse) {
    .site-header,
    main,
    .site-footer { display: none !important; }

    html, body { overflow: hidden !important; height: 100%; }

    .gate {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 28px;
        background: #05070c url('../images/hero-poster.jpg') center 46% / cover no-repeat;
    }

    .gate::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(5, 7, 12, 0.90) 0%, rgba(5, 7, 12, 0.80) 50%, rgba(5, 7, 12, 0.95) 100%);
    }

    .gate__box {
        position: relative;
        max-width: 420px;
        text-align: center;
    }

    .gate__box img { width: 168px; height: auto; margin: 0 auto 30px; }

    .gate__head {
        font-family: var(--font-display);
        font-size: clamp(1.9rem, 7vw, 2.5rem);
        font-weight: 700;
        line-height: 1.08;
        letter-spacing: -0.02em;
        color: #fff;
        margin-bottom: 14px;
    }

    .gate__box p {
        color: rgba(255, 255, 255, 0.74);
        font-size: 1rem;
        line-height: 1.6;
    }

    .gate__call { margin-top: 22px; font-size: 0.95rem; }
    .gate__call a { color: var(--accent-text); text-decoration: none; font-weight: 600; white-space: nowrap; }
}

/* --- Trust bar ------------------------------------------------------- */
.trust {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.trust__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 2.6vw, 34px);
}

.trust__label {
    width: 100%;
    text-align: center;
    margin-bottom: 6px;
    color: var(--muted-soft);
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.trust__item {
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 1.4vw, 1.12rem);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.80);
    white-space: nowrap;
}

/* --- Problem --------------------------------------------------------- */
.problem__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.figure {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
}

.figure img { width: 100%; }

/* --- Components deck (pin + stack) ----------------------------------- */
.deck {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 84px);
    align-items: start;
}

.deck__intro { position: sticky; top: var(--stack-top); }

.deck__cards { display: flex; flex-direction: column; }

.card {
    position: sticky;
    top: calc(var(--stack-top) + var(--i, 0) * 12px);
    padding: 30px 30px 32px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--raised);
    margin-bottom: 15vh;
    transform-origin: top center;
    will-change: transform, filter;
}

.card:last-child { margin-bottom: 0; }

.card__no {
    display: block;
    margin-bottom: 12px;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--accent-text);
}

.card h3 { margin-bottom: 10px; }
.card p { max-width: 54ch; margin: 0; }

/* --- Process --------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

.step {
    padding: 26px 22px 28px;
    border: 1px solid var(--line);
    border-top: 2px solid var(--accent);
    border-radius: var(--radius);
    background: var(--surface);
}

.step__n {
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.20);
    line-height: 1;
}

.step h3 { margin-bottom: 8px; font-size: 1.1rem; }
.step p { font-size: 0.95rem; margin: 0; }

/* --- Gallery --------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.shot {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
}

.shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 600ms ease; }
.shot:hover img { transform: scale(1.04); }

.shot figcaption {
    padding: 14px 16px 16px;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.9rem;
}

/* --- Service area ---------------------------------------------------- */
.area {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
    padding: clamp(32px, 5vw, 52px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.area address { font-style: normal; color: var(--muted); line-height: 1.9; }
.area address a { color: var(--accent-text); text-decoration: none; }
.area address a:hover { text-decoration: underline; }

/* --- FAQ ------------------------------------------------------------- */
.faq { max-width: 820px; margin: 0 auto; }

.faq details {
    border-bottom: 1px solid var(--line);
    padding: 4px 0;
}

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 0;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--text);
    list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
    content: '';
    flex: none;
    width: 11px; height: 11px;
    border-right: 2px solid var(--accent-text);
    border-bottom: 2px solid var(--accent-text);
    transform: rotate(45deg);
    transition: transform 220ms ease;
}

.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { padding-bottom: 22px; margin: 0; }

/* --- Final CTA + form ------------------------------------------------ */
.final {
    position: relative;
    border-top: 1px solid var(--line);
    background:
        radial-gradient(760px 380px at 22% 0%, rgba(190, 55, 60, 0.16), transparent 66%),
        var(--surface);
}

.final__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(34px, 5vw, 72px);
    align-items: start;
}

.field { margin-bottom: 16px; }

.field label {
    display: block;
    margin-bottom: 7px;
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--ink);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
}

.field textarea { min-height: 118px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: 2px solid var(--accent-text);
    outline-offset: 1px;
    border-color: transparent;
}

.field input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, 0.36); }

.form-note { margin-top: 12px; color: var(--muted-soft); font-size: 0.86rem; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Footer ---------------------------------------------------------- */
.site-footer {
    border-top: 1px solid var(--line);
    background: var(--ink);
    padding: 52px 0 40px;
}

.footer-row {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: flex-start;
    justify-content: space-between;
}

.footer-row img { width: 150px; }
.site-footer p, .site-footer address { color: var(--muted-soft); font-size: 0.9rem; font-style: normal; line-height: 1.8; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent-text); }

.footer-legal {
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    justify-content: space-between;
    font-size: 0.84rem;
}

/* --- Reveals (only with JS, so nothing hides without it) -------------- */
html.js .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--d, 0s);
}

html.js .reveal.in { opacity: 1; transform: none; }

/* Short laptop screens: the stage is 100vh, so the copy has to shrink with it
   or the CTA falls off the bottom of the stage. */
@media (min-width: 901px) and (max-height: 820px) {
    .hero h1 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
    .hero__sub { font-size: 1rem; }
    .hero__points { margin: 14px 0; gap: 6px; }
    .hero__points li { font-size: 0.94rem; }
    .hero__friction { margin-top: 9px; }
}

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 1024px) {
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery .shot:last-child { grid-column: 1 / -1; }
}

/* Below 1100px the desktop gate replaces the page, so these blocks only ever
   apply on large touch-free screens. Small-screen hero art direction was
   removed with the gate rather than left as dead code. */
@media (max-width: 1100px) {
    .problem__grid,
    .area,
    .final__grid { grid-template-columns: minmax(0, 1fr); }

    .deck { grid-template-columns: minmax(0, 1fr); }
    .deck__intro { position: static; }

    .card {
        position: static;
        margin-bottom: 16px;
        transform: none !important;
        filter: none !important;
    }

    .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

/* --- Focus ----------------------------------------------------------- */
a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 3px solid var(--accent-text);
    outline-offset: 3px;
    border-radius: 6px;
}

/* --- Reduced motion: nothing moves, nothing hides --------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html.js .reveal { opacity: 1; transform: none; }

    .card, .deck__intro { position: static; }
    .card { margin-bottom: 16px; }
    /* The room is simply already up: full light, every device checked in. */
    .hero__room { --lit: 1; transform: none !important; }
    /* the card is not part of the reduced-motion page at all */
    .console, .payoff, .hero__cue { display: none !important; }
    .shot:hover img { transform: none; }
}

@media print {
    .site-header, .final { display: none; }
    body { background: #fff; color: #000; }
}