/* ============================================================
   BEINC — About Hero (Section CSS)
   100vh hero with dashed nav-frame guides + media slideshow.
   Desktop: heading+CTA bottom-left, location+project card
   bottom-right, arrows centered between. Tablet: hides project
   card, location top-right of media, arrows bottom-right.
   Mobile: 70vh, no CTA, location top-center, heading + arrows
   bottom-center stacked.
   Depends on: global.css
   ============================================================ */

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


/* ── NAV-FRAME GUIDE LINES ──
   Same pattern as services-hero, but the verticals are scoped
   to the nav's own height (not the full section). */
.about-hero__guides {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-indicator);
}

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

.about-hero__guide--left-top,
.about-hero__guide--left-bottom,
.about-hero__guide--right-top,
.about-hero__guide--right-bottom {
    height: 0;
    border-top: var(--guide-border);
    border-color: var(--color-greyish);
}

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

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

.about-hero__guide--vert-left,
.about-hero__guide--vert-right {
    width: 0;
    border-left: var(--guide-border);
    border-color: var(--color-greyish);
    transform-origin: center top;
}


/* ── MEDIA AREA ──
   Sits 2vh below the nav, fills the rest of the section. */
.about-hero__media-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* top is set by JS — nav.bottom + 2vh */
    overflow: clip;
    z-index: var(--z-base);
}

.about-hero__slides {
    position: absolute;
    inset: 0;
}

.about-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    will-change: opacity, transform;
}

.about-hero__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.about-hero__slide-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Depixelate wrap around the slide image — fills the slide so the canvas
   inherits the right bounding rect. Overrides the default `.depix-wrap
   .depix-img { height: auto }` so the image keeps cover-fit dimensions. */
.about-hero__slide-media-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.about-hero__slide-media-wrap.depix-wrap .depix-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* Per-slide gradient overlay — set inline on each slide so it
   can be tuned independently per image/video. */
.about-hero__slide-gradient {
    position: absolute;
    inset: 0;
    pointer-events: none;
}


/* ── VERTICAL DASHED LINES ON MEDIA ──
   10 lines auto-distributed across the padded width (first
   flush with left pad-x, last flush with right pad-x, rest
   evenly spaced between). */
.about-hero__media-guides {
    position: absolute;
    inset: 0;
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: var(--z-content);
}

.about-hero__media-guide {
    width: 0;
    height: 100%;
    border-left: var(--guide-border);
    border-color: var(--color-greyish);
    opacity: 0;
    transform-origin: center top;
    will-change: transform, opacity;
}

/* Desktop default — all 10 visible.
   Tablet (≤1023): hide last 2 → 8 visible.
   Mobile  (≤767):  hide last 4 → 6 visible. */
@media (max-width: 1023px) {
    .about-hero__media-guide:nth-child(n+9) { display: none; }
}
@media (max-width: 767px) {
    .about-hero__media-guide:nth-child(n+7) { display: none; }
}


/* ── BOTTOM-LEFT: HEADING + CTA ──
   Respects --pad-x and a comfortable bottom inset. */
.about-hero__bottom-left {
    position: absolute;
    left: var(--pad-x);
    bottom: var(--space-9);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    z-index: var(--z-elevated);
    max-width: min(60%, 720px);
    pointer-events: none;
}

.about-hero__bottom-left > * { pointer-events: auto; }

/* CTA — plain bordered text button (matches screenshots) */
.about-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    background: var(--color-white);
    color: var(--color-black2);
    font-family: var(--font-btn);
    font-weight: var(--font-weight-btn);
    font-size: var(--text-btn);
    letter-spacing: var(--tracking-btn);
    border-radius: var(--radius);
    border: 1px solid var(--color-white);
    transition: background var(--duration-fast) var(--ease-primary),
                color var(--duration-fast) var(--ease-primary);
    text-decoration: none;
    line-height: 1;
}

.about-hero__cta:hover {
    background: transparent;
    color: var(--color-white);
}

.about-hero__heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    font-size: clamp(2rem, 3.4vw, 3.25rem);
    line-height: var(--leading-tight);
    color: var(--color-white);
    margin: 0;
}


/* ── ARROWS CONTAINER ──
   Bottom-center on desktop. Flush to the very bottom of the
   section (no padding). White cream pill that swaps colors on
   per-arrow hover. */
.about-hero__arrows {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: stretch;
    background: var(--color-white);
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: hidden;
    z-index: var(--z-elevated);
}

.about-hero__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background: var(--color-white);
    color: var(--color-black2);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-primary),
                color var(--duration-fast) var(--ease-primary);
    border: none;
}

/* Match the parent's top corners on the outer edges so the hover
   fill paints all the way into the curve. Prevents the white
   sliver that appeared between the button bg and the rounded
   container corner. */
.about-hero__arrow--prev { border-top-left-radius: var(--radius); }
.about-hero__arrow--next { border-top-right-radius: var(--radius); }

.about-hero__arrow:hover {
    background: var(--color-black2);
    color: var(--color-white);
}

.about-hero__arrow svg {
    display: block;
    width: 14px;
    height: auto;
}

.about-hero__arrow svg .arrow-path {
    fill: currentColor;
}

/* Left arrow: flip horizontally + vertically (per Q8). */
.about-hero__arrow--prev svg {
    transform: scale(-1, -1);
}

.about-hero--single .about-hero__arrows { display: none; }


/* ── BOTTOM-RIGHT: LOCATION + PROJECT CARD ──
   Stack with the location label sitting on top of the card. */
.about-hero__bottom-right {
    position: absolute;
    right: var(--pad-x);
    bottom: var(--space-9);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-3);
    z-index: var(--z-elevated);
}


/* ── LOCATION LABEL ── */
.about-hero__location {
    --loc-pad: 10px;
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: var(--loc-pad);
    gap: 0;
    background: var(--color-white);
    border-radius: var(--radius);
    color: var(--color-black2);
    overflow: clip;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-primary),
                gap var(--duration-fast) var(--ease-primary);
    width: auto;
    text-decoration: none;
}

.about-hero__location-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.about-hero__location-icon svg {
    display: block;
    width: 21px;
    height: 25px;
}

.about-hero__location-icon .loc-pin   { fill: currentColor; }
.about-hero__location-icon .loc-square {
    fill: var(--color-white);
    transform-origin: 50% 50%;
    transform-box: fill-box;
    animation: aboutHeroLocSpin 6s linear infinite;
    will-change: transform;
}

@keyframes aboutHeroLocSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Pause inner-square rotation while the label is expanded. */
.about-hero__location.is-expanded .about-hero__location-icon .loc-square {
    animation-play-state: paused;
}

.about-hero__location-text {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    line-height: 1;
    color: var(--color-black2);
    opacity: 0;
    /* Unified duration + softer expo curve — eliminates the harsh
       in/out feel that --ease-primary's S-curve produced when three
       properties animated at slightly different durations. */
    transition: max-width 0.55s var(--ease-out-expo),
                opacity 0.55s var(--ease-out-expo),
                margin-left 0.55s var(--ease-out-expo),
                padding-right 0.55s var(--ease-out-expo);
    margin-left: 0;
}

/* Hover (desktop / tablet) and is-expanded (mobile tap) */
.about-hero__location:hover,
.about-hero__location.is-expanded {
    background: var(--color-white);
    color: var(--color-black2);
}

.about-hero__location:hover .about-hero__location-text,
.about-hero__location.is-expanded .about-hero__location-text {
    max-width: 240px;
    opacity: 1;
    margin-left: var(--space-2);
    padding-right: var(--space-2);
}


/* ── PROJECT CARD ── */
.about-hero__project-card {
    --card-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 280px;
    padding: 20px;
    background: rgba(255, 251, 240, 0.10);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-radius: var(--card-radius);
    color: var(--color-white);
    text-decoration: none;
    cursor: pointer;
    border: var(--guide-width) var(--guide-style) var(--color-greyish);
    transition: background var(--duration-fast) var(--ease-primary),
                color var(--duration-fast) var(--ease-primary),
                backdrop-filter var(--duration-fast) var(--ease-primary);
}

.about-hero__project-card:hover {
    background: var(--color-white);
    color: var(--color-black2);
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
}

.about-hero__project-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    line-height: 1;
    color: inherit;
}

.about-hero__project-mark {
    display: block;
    width: 10px;
    height: 11px;
    fill: currentColor;
    flex-shrink: 0;
}

.about-hero__project-title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    margin: 0;
    color: inherit;
}

.about-hero__project-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--card-radius);
    overflow: clip;
    flex: 0 0 auto;
}

.about-hero__project-media img,
.about-hero__project-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-hero__project-desc {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    line-height: var(--leading-normal);
    color: inherit;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ── TABLET (768 – 1023) ── */
@media (max-width: 1023px) {
    /* Hide the project card */
    .about-hero__project-card { display: none; }

    /* Move location label to top-right of the media (2vh from top, pad-x from right). */
    .about-hero__bottom-right {
        bottom: auto;
        top: calc(var(--about-media-top, 18vh) + 2vh);
        gap: 0;
    }

    /* Move arrows to bottom-right (no bottom padding, pad-x from right). */
    .about-hero__arrows {
        left: auto;
        right: var(--pad-x);
        transform: none;
    }
}


/* ── MOBILE (≤767) ── */
@media (max-width: 767px) {
    .about-hero {
        height: 70vh;
        height: 70lvh;
    }

    /* Remove CTA button */
    .about-hero__cta { display: none; }

    /* Heading + arrows are bottom-stacked and centered */
    .about-hero__bottom-left {
        left: 0;
        right: 0;
        bottom: 0;
        max-width: none;
        align-items: center;
        text-align: center;
        padding: 0 var(--pad-x);
        /* Stack: heading then arrows, with a gap above arrows.
           Arrows themselves sit flush to the bottom (no pad). */
        padding-bottom: 0;
        gap: var(--space-5);
    }

    .about-hero__heading {
        text-align: center;
        font-size: clamp(1.6rem, 7.5vw, 2.6rem);
        align-self: center;
    }
    /* Center the swipe-reveal lines once SplitType wraps them. */
    .about-hero__heading .tsr-line {
        text-align: center;
    }

    /* Arrows: directly below the heading, bottom-flush, centered.
       We move the arrows element into normal flow inside bottom-left
       on mobile via JS-controlled class — simpler: keep absolute and
       pin centered to bottom of section. */
    .about-hero__arrows {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        bottom: 0;
    }

    /* Location label: top-center of media, 2vh from media's top edge. */
    .about-hero__bottom-right {
        top: calc(var(--about-media-top, 18vh) + 2vh);
        bottom: auto;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        align-items: center;
    }

    /* Heading needs space above the arrows (which are bottom-flush).
       The arrows pill height ≈ 38px, so push heading up. */
    .about-hero__bottom-left {
        bottom: 56px;
    }
}


/* Hide elements that aren't ready until JS positions them. */
.about-hero:not(.is-ready) .about-hero__media-wrap { visibility: hidden; }