/* ============================================================
   BEINC — Contact Hero (Section CSS)

   Two-column 100vh dark hero on desktop/tablet, hugged-height
   single-column on mobile. Dashed guide lines mirror the
   services-hero pattern but only have cursor-proximity dissolve
   (no scroll-destruct). Side vertical rails persist all the way
   down through slideshow + brands marquee until the connector.
   ============================================================ */

.contact-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100lvh;
    background: var(--color-black2);
    overflow: visible;
    /* No isolation — would trap the labels' z:900 inside this section's
       stacking context and they'd render under later sections. */
    padding-bottom: var(--pad-y);
}

/* ── GUIDE LINES — nav-area cluster (4 horizontals + 2 short verticals)
   Sits inside the hero, anchored to the contracted nav rect. */
.contact-hero__guides {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-indicator);
}

.contact-hero__guide {
    position: absolute;
    opacity: 0;
    background: none;
    will-change: transform, opacity;
    transform: translateZ(0);
}

.contact-hero__guide--left-top,
.contact-hero__guide--left-bottom,
.contact-hero__guide--right-top,
.contact-hero__guide--right-bottom {
    height: 0;
    border-top: var(--guide-border);
}
.contact-hero__guide--left-top,
.contact-hero__guide--left-bottom { left: 0; transform-origin: left center; }
.contact-hero__guide--right-top,
.contact-hero__guide--right-bottom { transform-origin: right center; }

/* Short verticals on either side of the nav — span from top of viewport
   down to the bottom edge of the nav bar. */
.contact-hero__guide--nav-vert-left,
.contact-hero__guide--nav-vert-right {
    width: 0;
    top: 0;
    border-left: var(--guide-border);
    transform-origin: center top;
}

/* Hero bottom horizontal — edge to edge, sits at hero bottom edge. */
.contact-hero__guide--bottom {
    left: 0;
    right: 0;
    height: 0;
    border-top: var(--guide-border);
    bottom: 0;
    transform-origin: left center;
}

/* Column divider vertical — runs from below the nav bar to the bottom
   edge of the hero (start of slideshow). At 45vw boundary on desktop. */
.contact-hero__guide--divider {
    width: 0;
    border-left: var(--guide-border);
    transform-origin: center top;
    top: 0;       /* JS positions to nav-bottom */
    bottom: 0;
    height: auto;
}


/* ── PAGE-LEVEL SIDE RAILS ──
   These live OUTSIDE the hero (in .contact-rails) and span hero +
   slideshow + brands-marquee, ending at the top of the connector.
   They sit at the global padding edges (--pad-x). */
.contact-rails {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: var(--z-indicator);
}

.contact-rails__line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: var(--guide-border);
    transform-origin: center top;
    opacity: 0;
}
.contact-rails__line--left  { left: var(--pad-x); }
.contact-rails__line--right { right: var(--pad-x); }


/* ── HERO INNER LAYOUT ──
   IMPORTANT: NO z-index here. Setting one (combined with position:relative)
   creates a new stacking context that TRAPS .cl-block's z-index 999, making
   the labels effectively render at inner's z (= 2) against the rest of the
   page. That puts them BEHIND the brands-marquee fade (z:2, later in DOM)
   and BEHIND the connector (z:950). Without an inner z-index the cl-block
   creates its own root-level stacking context and its z:999 wins cleanly
   against every section below the hero. The dashed guides (z:5, positioned)
   still paint above inner's flow content because positioned > non-positioned. */
.contact-hero__inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    padding-top: var(--nav-section-height, 13vh);
}

/* Left column 45vw, right column 55vw on desktop */
.contact-hero__left,
.contact-hero__right {
    position: relative;
    height: 100%;
    box-sizing: border-box;
}
.contact-hero__left {
    width: 45vw;
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
    /* Bottom padding shrinks the sticky travel area for the textblock so
       the text releases (scrolls out) earlier — well before the hero ends.
       Doesn't affect .cl-block (height:0, never hits the bottom constraint). */
    padding-bottom: 20vh;
    /* No padding-top — would push cl-block (sticky, first child) down past
       nav and break sticky offset math. Breathing space is on textblock. */
}
.contact-hero__right {
    width: 55vw;
    padding-left: var(--pad-x);
    /* Doubled right padding so the form sits inset by --pad-x from the
       right vertical rail (rail is at right:--pad-x on viewport). */
    padding-right: calc(var(--pad-x) * 2);
    padding-top: var(--pad-x);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Form fills the right column horizontally and is vertically centered */
.contact-hero__right .cf-form {
    width: 100%;
    margin: auto 0;            /* vertical-center inside the flex column */
}


/* ── LEFT COLUMN CONTENT ──
   Native CSS sticky: sticks at viewport y = nav + pad-x as user scrolls
   within the hero. Naturally releases when the hero left column scrolls
   past — no JS scroll tracking needed, no transforms to manage. */
.contact-hero__textblock {
    position: sticky;
    top: var(--nav-section-height, 8vh);
    display: block;
    padding-top: 2vw;       /* matches global pad-x in viewport units */
    max-width: 460px;
}
@media (max-width: 1023px) {
    .contact-hero__textblock { padding-top: 4vw; }
}

.contact-hero__heading {
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    font-size: clamp(3rem, 5vw, 5rem);
    line-height: var(--leading-none);
    margin: 0;
    padding-left: 90px;        /* align left edge with body text (body at left:90) */
}

.contact-hero__rating {
    /* JS positions this absolutely on desktop so it sits vertically
       centered between heading bottom and body top. */
    position: absolute;
    left: 90px;                /* align left edge with heading & body */
    margin-top: 0;
    display: flex;
    width: max-content;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    line-height: 1;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.25s var(--ease-primary);
}
.contact-hero__rating:hover { opacity: 0.7; }
.contact-hero__rating-star {
    width: 12px;
    height: 12px;
    display: inline-block;
}
.contact-hero__rating-star svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: var(--color-white);
}

.contact-hero__body {
    /* JS positions this absolutely so the top edge aligns with the
       socials column top (rating's vertical center). The left offset
       leaves breathing room from the socials column right edge. */
    position: absolute;
    left: 90px;                    /* socials 58 + ~32 breathing on left */
    margin-top: 0;
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    line-height: var(--leading-normal);
    max-width: 280px;
}


/* ── TABLET (768px – 1023px) ──
   Stays 2-column with the column-divider line between them. Left
   column: heading + rating LEFT-aligned with the body (all share the
   same x = body left). Rating absolutely positioned, centered between
   heading bottom and body top. Body absolutely positioned, top edge
   anchored to socials top (JS-driven). Info labels stack vertically
   directly below socials (no diagonal). */
@media (max-width: 1023px) and (min-width: 768px) {
    .contact-hero {
        height: 100vh;
        height: 100lvh;
    }

    .contact-hero__left  { width: 45vw; }
    .contact-hero__right { width: 55vw; padding-top: var(--space-7); align-items: flex-start; }

    .contact-hero__heading {
        text-align: left;
        font-size: clamp(2.5rem, 6vw, 4rem);
        padding-left: 74px;            /* align with body left edge */
    }

    .contact-hero__textblock { max-width: 100%; }

    .contact-hero__rating {
        /* Stay absolute so JS can vertically center it between heading
           and body (same approach as desktop). */
        left: 74px;
    }

    .contact-hero__body {
        left: 74px;
        max-width: calc(100% - 74px - var(--pad-x));
    }

    /* Restore the column divider on tablet too — between the 45/55 split. */
    .contact-hero__guide--divider { display: block; }

    /* Force info-label icon containers to a fixed 58px width (no
       left/right padding) — same shape as mobile. The label's text
       portion fills the rest of the 277px width. */
    .cl-info__icon-wrap {
        width: 58px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        flex-shrink: 0;
    }
}


/* ── MOBILE (≤767px) ── */
@media (max-width: 767px) {
    .contact-hero {
        height: auto;
        min-height: 0;
        padding-bottom: var(--space-8);
    }

    .contact-hero__inner {
        padding-top: var(--nav-section-height, 13vh);
        flex-direction: column;
    }

    /* Single column on mobile — both leftCol and rightCol full width */
    .contact-hero__left,
    .contact-hero__right {
        width: 100% !important;
        padding-right: var(--pad-x) !important;
        padding-bottom: 0 !important;
    }
    .contact-hero__left {
        padding-top: var(--space-7);
        text-align: center;
        display: flex;
        flex-direction: column;
        height: auto;
    }
    .contact-hero__right {
        /* Bumped from --space-7 → --space-9 so there's more breathing room
           between the labels block (above) and the form (below) on mobile,
           where the layout stacks vertically. */
        padding-top: var(--space-9);
        height: auto;
        align-items: stretch;
        justify-content: flex-start;
    }
    /* Reorder: textblock first (heading/rating/body), labels second on mobile */
    .contact-hero__left .contact-hero__textblock { order: 1; }
    .contact-hero__left .cl-block               { order: 2; }

    /* Disable all sticky/absolute trickery on mobile — everything flows naturally */
    .contact-hero__textblock {
        position: static !important;
        top: auto !important;
        display: block;
        text-align: center;
        margin-left: 0;
        padding-left: 0;
        padding-top: 0;
        width: 100%;
        max-width: 100%;
    }

    .contact-hero__heading {
        font-size: clamp(2.25rem, 12vw, 4rem);
        text-align: center;
        display: block;
        width: 100%;
        padding-left: 0 !important;     /* override desktop's 90px */
    }

    .contact-hero__rating {
        position: static !important;
        left: auto !important;
        top: auto !important;
        margin: var(--space-3) auto 0;
    }

    .contact-hero__body {
        position: static !important;
        left: auto !important;
        top: auto !important;
        margin: var(--space-4) auto 0;
        max-width: 90%;
        text-align: center;
    }

    /* Form vertical layout works fine — just give it some bottom breathing space */
    .contact-hero__right .cf-form { margin: 0; }

    /* Mobile divider line BETWEEN labels block and the form */
    .contact-hero__guide--mobile-divider {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        height: 0;
        border-top: var(--guide-border);
    }
}

/* Hide mobile-only divider on desktop/tablet */
.contact-hero__guide--mobile-divider {
    display: none;
}


/* ── DESKTOP (≥1024px) — column hug + form max-width ──
   Left column hugs to the EXACT width needed for the labels' diagonal-stagger
   HERO state so the location label's right edge kisses the column's right
   padding edge. The labels' geometry (see contact-labels.js):
       socials width        58 px   (SOCIAL_W)
     + email icon-container 76 px   (content-driven by "Email" text)
     + phone icon-container 76 px   (content-driven by "Phone" text)
     − overlap              −3 px   (1px shared border × 3 boundaries)
     + location label width 277 px  (LOC_W)
     ─────────────────────  ─────
     location right edge =  484 px  from cl-block's left:0 (= leftCol's padding-left edge)
   So the column's border-box width = 484px + 2 × --pad-x (left + right padding).
   This value is FIXED for desktop and does not change when the labels morph
   to rail/released — those states reposition the labels left-aligned and
   collapsed, taking far less width than HERO, but the column stays sized to
   the HERO-state extent so nothing reflows mid-scroll.
   The right column fills the remaining viewport space; the form caps at
   700px (the same visual width it had under the previous 55vw layout) and
   is horizontally centered by the existing `justify-content: center` on
   the right-column flex container. Tablet (768–1023px) and mobile (≤767px)
   keep their existing widths via the @media blocks above. */
@media (min-width: 1024px) {
    .contact-hero__left {
        width: calc(484px + var(--pad-x) * 2);
        flex-shrink: 0;
    }
    .contact-hero__right {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }
    .contact-hero__right .cf-form {
        max-width: 800px;
    }
}