/* ============================================================
   BEINC — Services Hero (Section CSS)
   80vh dark hero with dashed guide lines (top/bottom horizontal
   and left/right vertical around the nav) + a middle horizontal
   line that expands edge-to-edge when the side lines destruct.
   Depends on: global.css
   ============================================================ */

.services-hero {
    position: relative;
    width: 100%;
    height: 80vh;
    height: 80lvh;
    background: var(--color-black2);
    overflow: clip;
    isolation: isolate;
}

/* ── GUIDE LINES CONTAINER ──
   Mirrors the nav-guide-lines pattern but scoped to this section
   so we can tweak independently from the index hero. */
.services-hero__guides {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-indicator);
}

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

/* Horizontal lines flanking the nav bar (top row + bottom row) */
.services-hero__guide--left-top,
.services-hero__guide--left-bottom,
.services-hero__guide--right-top,
.services-hero__guide--right-bottom {
    height: 0;
    border-top: var(--guide-border);
}

.services-hero__guide--left-top,
.services-hero__guide--left-bottom {
    left: 0;
    transform-origin: left center;
}

.services-hero__guide--right-top,
.services-hero__guide--right-bottom {
    transform-origin: right center;
}

/* Vertical lines — run the full 80vh height of the section */
.services-hero__guide--vert-left,
.services-hero__guide--vert-right {
    width: 0;
    top: 0;
    height: 100%;
    border-left: var(--guide-border);
    transform-origin: center top;
}

/* Middle horizontal line — sits at the vertical midpoint of the area
   below the nav bar. Defaults anchored between the two vertical lines,
   expands edge-to-edge when the side lines destruct on scroll. */
.services-hero__guide--mid {
    height: 0;
    border-top: var(--guide-border);
    transform-origin: center center;
    will-change: left, width;
}


/* ── CONTENT COLUMN ──
   Heading (Services) above the mid line, quote (Built with intent)
   below it. Both horizontally centered within the section.

   The padding-top reserves the nav-bar area so the heading row starts
   exactly where the nav ends. With both rows flex 1 1 0, they split
   the remaining (sectionHeight − navHeight) evenly — meeting at the
   mid line: navBottom + (sectionHeight − navBottom) / 2.
   Same value JS uses for the line, so they're always aligned. */
.services-hero__content {
    position: absolute;
    inset: 0;
    padding-top: var(--nav-section-height);
    display: flex;
    flex-direction: column;
    pointer-events: none;
    z-index: var(--z-content);
}

.services-hero__heading-row,
.services-hero__quote-row {
    flex: 1 1 0;
    display: flex;
    justify-content: center;
    min-height: 0;
}

/* Hug the mid dashed line on both sides — heading sits just above it,
   quote just below — with a comfortable 24px breathing gap. */
.services-hero__heading-row {
    align-items: flex-end;
    padding-bottom: var(--space-5);
}

.services-hero__quote-row {
    align-items: flex-start;
    padding-top: var(--space-5);
}

.services-hero__heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    font-size: var(--text-3xl);
    line-height: var(--leading-none);
    color: var(--color-white);
    margin: 0;
}

.services-hero__quote {
    display: inline-flex;
    align-items: center;
    gap: var(--space-5);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-body);
    line-height: var(--leading-none);
}

.services-hero__asterisk {
    width: clamp(16px, 1.5vw, 22px);
    height: auto;
    color: var(--color-white);
    flex-shrink: 0;
    will-change: transform;
}

.services-hero__asterisk svg {
    display: block;
    width: 100%;
    height: auto;
}

.services-hero__asterisk svg path {
    fill: currentColor;
}


/* ── MOBILE ──
   Tighter gap + smaller asterisks so the quote doesn't wrap.
   Heading uses the existing clamp() scale so no override needed.
   Rows center their content vertically (instead of hugging the
   mid line) and drop the breathing-gap padding — pushes the
   heading + quote apart so each sits centered in its own half
   of the below-nav area, giving the fans more room to breathe. */
@media (max-width: 767px) {
    .services-hero__quote {
        gap: var(--space-4);
    }
    .services-hero__asterisk {
        width: 16px;
    }
    .services-hero__heading-row,
    .services-hero__quote-row {
        align-items: center;
        padding: 0;
    }
}