/* ====== /contact-us and /demo ======
   Shared layout (includes/contact-layout.php). Loads after home.css for the
   .hero pattern. Banner, then aside + form panel: stacked on mobile, two
   columns from 1024.                                                     */

.contact-hero {
    /* MOBILE, as Careers: the copy sits at the top of a 400px hero and the
       composition, which centres itself in the box, falls below the headline.
       Tablet restores the taller top padding (2026-09-18).         */
    min-height: 400px; align-items: flex-start;
    padding-block: 56px var(--space-15);
    /* Pre-mount ground: the primary dark with a soft cyan glow off to the
       right. The script paints its own ground over this on mount.        */
    background:
        radial-gradient(ellipse 60% 80% at 85% 50%, rgba(171, 235, 240, .10) 0%, rgba(171, 235, 240, 0) 70%),
        var(--c-primary-dark);
}
/* Below 1024 the composition sits BEHIND the copy (the About decision, taken
   on the phone 2026-09-18) instead of in a 168px strip above it. The scripts
   fit a small 44px cluster into "the space above the copy" when their box is
   narrower than 1024, so give them a box that is never narrower than 1024,
   anchored right: they run their desktop composition (96px bars, cluster in
   the right third) and the part of the box on screen is the cluster, at
   reduced opacity behind the copy. Their desktop fade darkens the box's left,
   which is off-screen. Masked at the foot so the hero hands over cleanly.  */
.contact-hero .hero__video {
    left: auto; right: 0; width: max(100%, 1024px);
    opacity: .55;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
}
.contact-hero h1 { max-width: 16ch; }
.contact-hero__intro { max-width: 700px; font-size: var(--t-h4); line-height: var(--lh-heading); font-weight: var(--fw-regular); color: var(--c-text-muted); }   /* H4, kept after trial 2026-09-17 (was the H3 hero line); width keeps the copy inside the left ~60% the motion brief promised */

.contact-body {
    /* Gloss: a vertical gradient instead of a flat fill, with a faint cyan
       bloom behind the form panel so it sits in light.                    */
    background:
        radial-gradient(ellipse 45% 50% at 68% 30%, rgba(171, 235, 240, .08) 0%, rgba(171, 235, 240, 0) 70%),
        linear-gradient(180deg, var(--primary-900) 0%, var(--primary-800) 100%);
}
.contact-grid { display: grid; gap: var(--space-10); align-items: start; }

.contact-aside__title { font-size: var(--t-h3); margin-bottom: var(--space-6); }
.contact-aside__list { display: flex; flex-direction: column; }
.contact-aside__list li {
    display: flex; flex-direction: column; gap: var(--space-2);
    padding-block: var(--space-5);
    /* Dividers catch light: a dark line with a 1px highlight beneath it. */
    border-top: 1px solid rgba(0, 0, 0, .35);
    box-shadow: inset 0 1px 0 rgba(171, 235, 240, .16);
}
.contact-aside__list li:last-child { border-bottom: 1px solid rgba(0, 0, 0, .35); box-shadow: inset 0 1px 0 rgba(171, 235, 240, .16), 0 1px 0 rgba(171, 235, 240, .16); }
.contact-aside__label {
    font-family: var(--font-secondary);
    font-size: var(--t-p3);
    letter-spacing: var(--ls-cta);
    text-transform: uppercase;
    color: var(--c-accent-cyan);
}
.contact-aside__list a { color: var(--c-text); }
.contact-aside__list a:hover { color: var(--c-accent-cyan); }
.contact-aside__list span + span { color: var(--c-text-muted); }

.contact-form__title { font-size: var(--t-h3); margin-bottom: var(--space-6); }
.contact-form .form { max-width: none; }

@media (min-width: 768px) {
    .contact-hero { min-height: 0; align-items: center; padding-block: 150px var(--space-15); }   /* TABLET: as before the mobile move-up (align-items resets the mobile flex-start so desktop centres again) */
}
@media (min-width: 1024px) {
    .contact-hero { min-height: 420px; padding-block: var(--space-15); }
    .contact-hero .hero__video { inset: 0; width: auto; opacity: 1; -webkit-mask-image: none; mask-image: none; }
    .contact-grid { grid-template-columns: 1fr 2fr; gap: var(--space-16); }
    .contact-aside { position: sticky; top: calc(var(--nav-height) + var(--space-8)); }
}