/* =========================================================
   HERO — SMART BOX STORAGE
========================================================= */

/* This file owns .hero's positioning — it is the last stylesheet to touch it,
   so declaring it anywhere else just loses the cascade.
   The banner scrolls with the page like any other section. It used to be
   sticky, holding still while the sheet below rode up over it; `relative`
   keeps the stacking context its decorations need without pinning it. */
.hero {
    position: relative;
    z-index: 0;
    isolation: isolate;
    display: flex;
    align-items: center;

    /* The banner sizes to its content. It used to be pinned at 760px, which is
       taller than the copy + form actually need, and `align-items: center`
       split the surplus evenly — putting ~83px of dead air ABOVE the content on
       top of the 64px padding. The floor is now just enough to keep the banner
       from collapsing on short content; the content drives the height. */
    min-height: 500px;
    padding: 30px 24px var(--section-pad);
    overflow: hidden;
    background: var(--orange-dark, #cb5901);
}

/* ---- Background ---- */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -3;
    background-image: url("../images/hero-image2.png");
    background-size: cover;
    background-position: center;
    transform: scale(1.03);
}

/* =========================================================
   PREMIUM HERO IMAGE OVERLAY
   Modern glass + aurora glow + cinematic shine
   ========================================================= */

.hero-scrim {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;

    background:
        /* subtle glass highlight from top */
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.05) 18%,
            transparent 38%),

        /* readable orange area on left */
        linear-gradient(100deg,
            rgba(186, 67, 0, 0.88) 0%,
            rgba(232, 82, 0, 0.73) 18%,
            rgba(254, 111, 1, 0.50) 38%,
            rgba(254, 111, 1, 0.19) 60%,
            rgba(0, 0, 0, 0.03) 82%,
            rgba(0, 0, 0, 0.10) 100%),

        /* warm upper-right glow */
        radial-gradient(circle at 82% 18%,
            rgba(255, 196, 139, 0.30),
            transparent 33%),

        /* bright orange atmospheric glow */
        radial-gradient(circle at 58% 62%,
            rgba(255, 112, 0, 0.18),
            transparent 38%),

        /* cinematic vignette */
        radial-gradient(ellipse at center,
            transparent 42%,
            rgba(55, 18, 0, 0.18) 100%);

    backdrop-filter: saturate(118%) contrast(106%);
    -webkit-backdrop-filter: saturate(118%) contrast(106%);
}


/* =========================================================
   MOVING AURORA / LIGHT BLOOM
   ========================================================= */

.hero-scrim::before {
    content: "";
    position: absolute;
    width: 75%;
    height: 150%;
    top: -25%;
    right: -15%;

    background:
        radial-gradient(ellipse at 45% 45%,
            rgba(255, 255, 255, 0.26) 0%,
            rgba(255, 190, 127, 0.18) 22%,
            rgba(254, 111, 1, 0.08) 42%,
            transparent 68%);

    filter: blur(16px);
    opacity: 0.9;

    animation: heroAurora 9s ease-in-out infinite alternate;
    will-change: transform;
}


/* Slow atmospheric movement */
@keyframes heroAurora {
    0% {
        transform:
            translate3d(-2%, -2%, 0) scale(1);
    }

    50% {
        transform:
            translate3d(5%, 4%, 0) scale(1.08);
    }

    100% {
        transform:
            translate3d(-1%, 7%, 0) scale(1.03);
    }
}


/* =========================================================
   OPTIONAL HERO EDGE DEPTH
   Add this to your actual hero container
   ========================================================= */

/* (isolation: isolate is already declared on .hero above — the duplicate
   block that used to sit here was redundant.) */

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        /* thin premium top highlight */
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.28) 0,
            transparent 7%),

        /* bottom grounding shade */
        linear-gradient(0deg,
            rgba(45, 17, 0, 0.42) 0%,
            rgba(45, 17, 0, 0.12) 19%,
            transparent 38%);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    .hero-scrim::before {
        animation: none;
        transform: none;
    }
}

.hero-grid-lines {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .5;
    background-image:
        linear-gradient(rgba(23, 23, 20, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23, 23, 20, .05) 1px, transparent 1px);
    background-size: 78px 78px;
    mask-image: linear-gradient(to bottom, black, transparent 78%);
    -webkit-mask-image: linear-gradient(to bottom, black, transparent 78%);
    pointer-events: none;
}

/* ---- Layout ---- */
.hero-inner {
    position: relative;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 60px;
    align-items: center;
}

/* =========================================================
   LEFT — COPY
========================================================= */
.hero-copy {
    max-width: 620px;
}

.hero-title {
    font-family: "Manrope", sans-serif;
    font-size: clamp(38px, 5.2vw, 68px);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -2.4px;
    color: var(--black, #171714);
}

/* Sits on the dense end of the orange wash, so it needs a light fill. */
.hero-title span {
    display: block;
    color: #ffffff;
}

.hero-lead {
    max-width: 470px;
    margin-top: 22px;
    color: #252523;
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.65;
}

/* =========================================================
   MESSAGE CAROUSEL
   Slides are stacked in one grid cell so the block keeps the
   height of the tallest message and nothing jumps on rotate.
========================================================= */
/* =========================================================
   HERO MESSAGE CAROUSEL — MOTION

   One animation per slide, not seven. The previous version
   animated the slide, the headline, the lead and a ::after
   sheen separately, each on its own duration and delay, and
   the JS cleared the outgoing slide on a fixed timer. If any
   one of those pieces did not land, a slide was left stranded
   mid-transition and the rotation appeared to stop.

   Now the slide moves as a single block: the outgoing message
   travels out to the RIGHT, the incoming one arrives from the
   LEFT, and sections/hero-carousel.js clears state on
   animationend with a timer only as a backstop.
========================================================= */

.hero-slides {
    position: relative;
    display: grid;

    /* Keeps the tallest slide controlling the height */
    isolation: isolate;

    /* Deliberately NOT clipped here. Clipping at the text column cut the
       incoming headline mid-letter, which reads as a rendering fault rather
       than a slide. `.hero` already has overflow: hidden, so the travel is
       clipped at the banner edge instead and nothing can widen the page. */
}

/* ---------------------------------------------------------
   BASE STATE — every slide sits in the same grid cell
--------------------------------------------------------- */
.hero-slide {
    grid-area: 1 / 1;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    /* Promote once, up front: creating a layer at animation start is what
       produced the brief text shimmer on the old version. */
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ---------------------------------------------------------
   ENTERING — arrives from the left
--------------------------------------------------------- */
.hero-slide.is-active {
    visibility: visible;
    pointer-events: auto;
    z-index: 2;

    /* Held back so the outgoing message is most of the way gone before this
       one becomes legible — without the delay the two overlapped at full
       opacity mid-transition and the headline read as garbled double text.
       `both` keeps it parked off-screen at opacity 0 during the delay. */
    animation: heroSlideIn 600ms cubic-bezier(.22, 1, .36, 1) 190ms both;
}

/* ---------------------------------------------------------
   LEAVING — exits to the right
--------------------------------------------------------- */
.hero-slide.is-leaving {
    visibility: visible;
    pointer-events: none;
    z-index: 1;

    animation: heroSlideOut 470ms cubic-bezier(.37, .01, .28, 1) both;
}

@keyframes heroSlideIn {
    from {
        opacity: 0;
        transform: translate3d(-72px, 0, 0);
    }

    55% {
        opacity: 1;
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes heroSlideOut {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    45% {
        opacity: .34;
    }

    to {
        opacity: 0;
        transform: translate3d(120px, 0, 0);
    }
}

/* =========================================================
   DOT ENHANCEMENT
   ========================================================= */

.hero-dot {
    position: relative;

    width: 9px;
    height: 9px;

    padding: 0;
    border: 0;
    border-radius: 100px;

    background: rgba(23, 23, 20, .28);

    cursor: pointer;

    transition:
        width 480ms cubic-bezier(.16, 1, .3, 1),
        background 300ms ease,
        transform 300ms ease,
        box-shadow 300ms ease;
}


.hero-dot:hover {
    background: rgba(23, 23, 20, .56);
    transform: scale(1.18);
}


.hero-dot.is-active {
    width: 32px;

    background: var(--black, #171714);

    transform: none;

    box-shadow:
        0 4px 14px rgba(23, 23, 20, .22);
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

/* Reduced motion: the carousel still rotates — the client asked for a slider
   that never stops — but the horizontal travel is dropped and the change
   becomes a short cross-fade, which is the part that causes discomfort. */
@media (prefers-reduced-motion: reduce) {

    .hero-slide.is-active {
        animation: heroFadeIn 240ms linear both;
    }

    .hero-slide.is-leaving {
        animation: heroFadeOut 200ms linear both;
    }

    @keyframes heroFadeIn {
        from {
            opacity: 0;
            transform: none;
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    @keyframes heroFadeOut {
        from {
            opacity: 1;
            transform: none;
        }

        to {
            opacity: 0;
            transform: none;
        }
    }
}

/* ---- Trust Row ---- */
/* Nine service shortcuts. Same chip as the three trust badges it replaces —
   the only change is that the row spans both grid columns instead of being
   boxed into the copy column, which is what lets nine of them wrap evenly
   without crowding the headline or the quote form. */
/* Four badges sitting inside the copy column, so they line up on the same left
   edge as the headline, the lead and the buttons below them. A 2x2 grid rather
   than a wrapping flex row: four chips of uneven label length wrap 3 + 1 and
   read as a mistake, and equal-width cells keep the block rectangular.
   `grid-auto-rows: 1fr` makes every chip the same height even when one label
   needs a second line. */
/* Columns size to their own label rather than to a shared quarter-width: the
   four labels differ a lot in length, and equal columns forced the two longest
   onto a second line while the short ones sat half empty. */
.hero-trust {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-auto-rows: 1fr;
    justify-content: start;
    gap: 8px;
    margin-top: 22px;
}

.hero-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 11px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .78);
    border: 1px solid #efe7d7;
    box-shadow: 0 10px 30px rgba(23, 23, 20, .05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 340ms cubic-bezier(.2, .8, .2, 1),
        background 340ms ease,
        border-color 340ms ease;
}

.hero-trust-item:hover {
    transform: translateY(-3px);
    background: #ffffff;
    border-color: rgba(254, 111, 1, .5);
    box-shadow: 0 16px 36px rgba(254, 111, 1, .16);
}

.hero-trust-item i,
.hero-trust-item svg {
    width: 18px;
    height: 18px;
    color: var(--orange-dark, #cb5901);
    flex-shrink: 0;
}

.hero-trust-item span {
    display: block;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--black, #171714);
}

/* ---- Actions ---- */
.hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 26px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 700;
    transition: all 320ms cubic-bezier(.2, .8, .2, 1);
}

.hero-btn i,
.hero-btn svg {
    width: 17px;
    height: 17px;
}

/* Orange-on-orange would vanish against the brand wash — go dark for contrast. */
.hero-btn-primary {
    /* Transparent border so this pill measures exactly the same height as
       .hero-btn-ghost, which carries a real 1px border. */
    border: 1px solid transparent;
    background: var(--black, #171714);
    color: #ffffff;
}

.hero-btn-primary:hover {
    background: #000000;
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(23, 23, 20, .38);
}

.hero-btn-ghost {
    background: #ffffff;
    border: 1px solid #ece5d6;
    color: var(--black, #171714);
}

.hero-btn-ghost:hover {
    border-color: rgba(254, 111, 1, .5);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(23, 23, 20, .08);
}

/* =========================================================
   RIGHT — QUOTE CARD
========================================================= */
/* Same glass treatment as .navbar in base.css — deliberately matched. */
.hero-quote {
    padding: 22px 24px 20px;
    border-radius: 26px;
    background: rgba(255, 255, 255, .20);
    border: 1px solid rgba(255, 255, 255, .75);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 34px 80px rgba(23, 23, 20, .12);
}

.hero-quote-title {
    font-family: "Manrope", sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.8px;
    color: var(--black, #171714);
    text-align: center;
}

.hero-quote-sub {
    margin-top: 4px;
    text-align: center;
    font-size: 12.5px;
    color: #5d564b;
}

.hero-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    margin-top: 16px;
}

/* Rows that take the full card width: name, message, submit. */
.hero-field-full {
    grid-column: 1 / -1;
}

.hero-field {
    width: 100%;
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .62);
    background: rgba(255, 255, 255, .65);
    color: var(--black, #171714);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 260ms ease, background 260ms ease, box-shadow 260ms ease;
}

.hero-field::placeholder {
    color: #4a443b;
    opacity: 1;
    font-weight: 500;
}

.hero-field:hover {
    background: rgba(255, 255, 255, .58);
    border-color: rgba(255, 255, 255, .85);
}

.hero-field:focus {
    background: rgba(255, 255, 255, .78);
    border-color: rgba(254, 111, 1, .65);
    box-shadow: 0 0 0 4px rgba(254, 111, 1, .16);
}

select.hero-field {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171714' stroke-opacity='.75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px;
    color: #4a443b;
    font-weight: 500;
}

select.hero-field.filled {
    color: var(--black, #171714);
    font-weight: 400;
}

select.hero-field option {
    background: #ffffff;
    color: var(--black, #171714);
}

textarea.hero-field {
    min-height: 62px;
    resize: vertical;
}

.hero-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 13px 20px;
    margin-top: 2px;
    border: 0;
    border-radius: 12px;
    background: var(--orange, #fe6f01);
    color: #171714;
    font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.2px;
    transition: all 300ms cubic-bezier(.2, .8, .2, 1);
}

.hero-submit i,
.hero-submit svg {
    width: 17px;
    height: 17px;
    transition: transform 300ms cubic-bezier(.2, .8, .2, 1);
}

.hero-submit:hover {
    background: var(--orange-light, #ff9445);
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(254, 111, 1, .35);
}

.hero-submit:hover i,
.hero-submit:hover svg {
    transform: translateX(3px);
}

.hero-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 12px;
    font-size: 11.5px;
    color: #5d564b;
}

.hero-note i,
.hero-note svg {
    width: 13px;
    height: 13px;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1100px) {
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .hero-copy {
        max-width: 100%;
    }

    .hero-quote {
        max-width: 520px;
    }
}

@media (max-width: 820px) {
    .hero {
        min-height: auto;
        /* Was 126px to clear the old floating navbar; the header now sits in
           the flow above this banner, so that clearance was pure dead space. */
        padding: 26px 20px var(--section-pad);
    }

    /* Stacked layout: the wash runs top-to-bottom instead of left-to-right,
       staying lighter at the top where the photo does the most work. */
    .hero-scrim {
        background:
            linear-gradient(180deg,
                rgba(255, 255, 255, .22) 0%,
                rgba(255, 255, 255, .05) 16%,
                transparent 34%),
            linear-gradient(180deg,
                rgba(254, 124, 20, .62) 0%,
                rgba(254, 111, 1, .84) 34%,
                rgba(254, 111, 1, .92) 68%,
                rgba(203, 89, 1, .94) 100%),
            radial-gradient(circle at 80% 8%, rgba(255, 194, 146, .30), transparent 52%);
    }

    .hero-trust {
        gap: 10px;
        margin-top: 20px;
    }

    .hero-trust-item {
        padding: 10px 14px 10px 12px;
    }
}

@media (max-width: 520px) {
    .hero-title {
        letter-spacing: -1.4px;
    }

    .hero-trust {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .hero-trust-item {
        min-width: 28px;
        padding: 9px 10px;
        gap: 8px;
    }

    .hero-trust-item svg {
        width: 18px;
        height: 18px;
    }

    /* Nowrap is safe on a full-width chip; at half width the longest labels
       ("Local Moving Packing") would push past the viewport. */
    .hero-trust-item span {
        white-space: normal;
        font-size: 12px;
    }

    .hero-quote {
        padding: 20px 18px 18px;
        border-radius: 22px;
    }

    .hero-form {
        grid-template-columns: 1fr;
    }
}