/* =========================================================================
   Hero banner — Figma "Von Brucken Fock" node 10:3.
   Auto-loaded for the front-page template by inc/enqueue.php.

   Geometry is taken from the 1920px artboard and expressed as ratios so it
   scales without a hard-coded breakpoint at every step:

     strip   inset 17px, top 14px, 752px tall, 35px bottom radius
     content 1280px container (artboard x 321 -> 1600)
     copy    sits 71px above the strip's bottom edge
     aside   412px wide, flush right, hanging 60px past the strip
     chips   21px below the strip
   ========================================================================= */

.heroBanner {
    --hero-strip-h: clamp(480px, 39.2vw, 752px);
    --hero-aside-w: 412px;
    --hero-drop:    60px;   /* how far the card hangs past the strip */

    position: relative;
    background: var(--bg);
    padding-bottom: var(--space-7);
    overflow: hidden;
}

/* Dark block behind the top of the page; the strip overhangs onto white. */
.heroBannerInk {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--hero-strip-h) * 0.832);
    background: var(--ink);
}

/* -------------------------------------------------------------------------
   Photo strip
   ------------------------------------------------------------------------- */

.heroStrip {
    position: relative;
    margin: 14px var(--hero-inset) 0;
    height: var(--hero-strip-h);
    border-radius: 0 0 var(--radius-hero) var(--radius-hero);
    overflow: hidden;
    isolation: isolate;
}

.heroPanels {
    position: absolute;
    inset: 0;
    display: flex;
}
.heroPanel {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    margin: 0;
}
.heroPanelImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Figma lays a #191919 sheet at 35% over the whole strip. The extra bottom
   gradient is not in the artboard — it keeps the headline legible once real
   photography replaces the stock crops. */
.heroScrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(25, 25, 25, 0.55) 0%, rgba(25, 25, 25, 0) 45%),
        rgba(25, 25, 25, 0.35);
}

.heroStripInner {
    position: relative;
    height: 100%;
}

/* -------------------------------------------------------------------------
   Headline
   ------------------------------------------------------------------------- */

/*
 * Kept clear of the card's column so the two never collide. The headline is
 * one line at 87px in Formula Condensed; with a non-condensed fallback face
 * it wraps to two, which the bottom anchor absorbs cleanly.
 */
.heroCopy {
    position: absolute;
    z-index: 2;
    left: var(--gutter);
    bottom: 71px;
    max-width: calc(100% - var(--hero-aside-w) - var(--gutter) * 3);
}
.heroTitle {
    margin: 0;
    font-size: clamp(2.5rem, 4.53vw, 5.4375rem);   /* 87px @1920 */
    line-height: 0.76;
    color: #fff;
    text-transform: uppercase;
}
.heroTitle::after {
    content: ".";
    color: var(--primary);
}
.heroSubtitle {
    margin: 0.32em 0 0;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.125rem, 1.77vw, 2.125rem);  /* 34px @1920 */
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #fff;
}

/* -------------------------------------------------------------------------
   Wordmark seal
   ------------------------------------------------------------------------- */

.heroSeal {
    position: absolute;
    z-index: 1;                        /* decorative — always under the headline */
    left: 35.8%;                       /* artboard x 778 within the container */
    top: 48.4%;                        /* artboard y 378 within the strip */
    width: 234px;
    height: 234px;
    color: #fff;
}
.heroSealRing {
    width: 100%;
    height: 100%;
    transform: rotate(16deg);
    opacity: 0.95;
}
.heroSealTooth {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 53px;
    height: 51px;
    transform: translate(-50%, -50%) rotate(5deg);
}

/* -------------------------------------------------------------------------
   Right column — reviews + sign-up card
   ------------------------------------------------------------------------- */

.heroAsideWrap {
    position: absolute;
    top: 14px;
    left: 0;
    right: 0;
    height: var(--hero-strip-h);
    pointer-events: none;              /* the strip stays clickable-through */
}
/* position:relative is load-bearing — without it .heroAside resolves against
   .heroAsideWrap and pins itself to the viewport edge, not the content column. */
.heroAsideWrap .container { position: relative; height: 100%; }

.heroAside {
    position: absolute;
    right: var(--gutter);
    bottom: calc(var(--hero-drop) * -1);
    width: var(--hero-aside-w);
    display: flex;
    flex-direction: column;
    gap: 30px;
    pointer-events: auto;
}

/* Reviews */
.heroReviews {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: #fff;
}
.heroReviewsLogo { width: 91px; height: auto; }
.heroReviewsFaces { display: flex; align-items: center; }
.heroReviewsFace {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #272727;
    border: 1px solid #fff;
    box-sizing: border-box;
}
.heroReviewsFace:first-child { background: #505050; }
.heroReviewsFace + .heroReviewsFace { margin-left: -15px; }
.heroReviewsMeta { display: flex; align-items: baseline; gap: 8px; }
.heroReviewsCount {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.875rem;               /* 30px */
    line-height: 1;
}
.heroReviewsLabel {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.8125rem;              /* 13px */
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/*
 * "In Google" is a 9px label the artboard parks at x1556/y768 — underneath
 * the card, so it never actually renders there. Carried here as the caption
 * it reads as, rather than reproducing an occluded position.
 */
.heroReviewsNote {
    flex-basis: 100%;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
}

/* Sign-up card */
.heroCard {
    position: relative;
    background: var(--ink);
    border-radius: var(--radius-md);
    padding: 47px 61px 39px;
    color: var(--ink-ink);
    /* The four faint verticals from the artboard (x 1235/1348/1461/1573). */
    background-image: repeating-linear-gradient(
        to right,
        transparent 0 46px,
        rgba(255, 255, 255, 0.07) 46px 47px,
        transparent 47px 113px
    );
}
.heroCardTag {
    position: absolute;
    top: 0;
    left: 61px;
    transform: translateY(-50%);
    padding: 4px 13px;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--accent-ink);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.875rem;               /* 14px */
    line-height: 1.5;
    text-transform: uppercase;
    white-space: nowrap;
}
.heroCardTitle {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.375rem;               /* 38px */
    line-height: 0.9;
    text-transform: uppercase;
}
.heroCardText {
    margin: 1.35rem 0 0;
    font-size: 1rem;
    font-weight: 300;                  /* Sofia Pro Light */
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.88);
}
.heroCardCta {
    margin-top: 1.6rem;
    height: 60px;
    font-size: 1.1875rem;              /* 19px */
    font-weight: 500;
}

/* -------------------------------------------------------------------------
   USP chips
   ------------------------------------------------------------------------- */

/*
 * The chip row shares its band with the card, which hangs 60px below the
 * strip — so it is bounded to the left column, leaving the artboard's 15px
 * gap to the card edge. In Sofia Pro the three chips measure 845px against
 * the 853px available, so they sit on one row with 8px to spare; anything
 * longer wraps to a second row rather than sliding under the card.
 */
.heroUsps {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 21px 0 0;
    padding: 0;
    list-style: none;
    max-width: calc(100% - var(--hero-aside-w) - 15px);
}
.heroUsp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 39px;
    padding: 0 22px 0 15px;
    border-radius: var(--radius-md);
    background: rgba(240, 240, 239, 0.65);
    color: var(--text);
    font-size: 0.9375rem;              /* 15px */
    font-weight: 300;                  /* Sofia Pro Light */
    line-height: 1.2;
}
.heroUsp strong { font-weight: 600; }
.heroUspCheck {
    width: 14px;
    height: 10px;
    flex-shrink: 0;
    color: var(--primary);
}

/* -------------------------------------------------------------------------
   Responsive
   Panels drop out as they get too narrow to read as portraits, then the
   right column leaves the strip and becomes a normal block underneath.
   ------------------------------------------------------------------------- */

@media (max-width: 1400px) {
    .heroSeal { display: none; }       /* collides with the headline first */
}

@media (max-width: 1200px) {
    .heroPanel4 { display: none; }
}

@media (max-width: 1023px) {
    .heroBanner { --hero-strip-h: clamp(420px, 62vw, 560px); }

    .heroPanel3 { display: none; }

    .heroCopy {
        bottom: 40px;
        max-width: calc(100% - var(--gutter) * 2);
    }

    /* Out of the overlay, into the flow. */
    .heroAsideWrap {
        position: static;
        height: auto;
        pointer-events: auto;
        margin-top: var(--space-6);
    }
    .heroAside {
        position: static;
        width: 100%;
        max-width: 520px;
        bottom: auto;
        right: auto;
    }
    .heroCard { padding: 44px var(--space-5) var(--space-5); }
    .heroCardTag { left: var(--space-5); }

    /* The card is out of the band now, so the chips get the full width back. */
    .heroUsps { max-width: none; }

    /*
     * The reviews row was drawn for light-on-dark inside the strip. Down here
     * it sits on the page background, so it flips to dark ink — and the Google
     * mark ships as a solid-white PNG, which needs inverting to stay visible.
     */
    .heroReviews { color: var(--text); }
    .heroReviewsLogo { filter: invert(1); }
    .heroReviewsFace { border-color: var(--text); }
}

@media (max-width: 640px) {
    .heroBanner { --hero-inset: 10px; }
    .heroPanel2 { display: none; }
    .heroCopy { bottom: 28px; }
    .heroCard { background-image: none; }
    .heroUsps { gap: 10px; }
    .heroUsp { width: 100%; }
}