/* home.css: homepage-only sections. Not loaded by service or location pages.

   The hero block below duplicates css/hero.css; see CLAUDE.md, Known drift.
   Hero reasoning: agent/hero.md. Everything else: agent/components.md. */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    min-height: min(76vh, 62rem);
    padding-block: var(--space-9) var(--space-8);
    color: var(--ink-on-dark);
}

/* IMG_1365 is the only true landscape single-subject photo in the gallery.
   IMG_1338 and IMG_1346 are 6-panel collages; see agent/hero.md. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--mor-hero-photo) center right / cover no-repeat;
}

/* Two-part scrim. Do not lighten it; it is what keeps white type above 4.5:1
   over the photo. Re-measure at several widths if you touch it. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            180deg,
            rgb(var(--scrim-rgb) / 0) 55%,
            rgb(var(--scrim-rgb) / 0.75) 100%
        ),
        linear-gradient(
            90deg,
            rgb(var(--scrim-rgb) / 0.86) 0%,
            rgb(var(--scrim-rgb) / 0.82) 62%,
            rgb(var(--scrim-rgb) / 0.60) 78%,
            rgb(var(--scrim-rgb) / 0.42) 100%
        );
}

/* Left-anchored, so the headline lines up with the logo and nav above it. */
.hero__inner {
    max-width: 80ch;   /* headline measure, in characters */
    margin-right: auto;
}

/* First-load entrance on @starting-style, so unsupported engines simply render
   the content. `.hero__services` is a sibling of `.hero__inner`, not a child,
   so it is named to stay in the same sequence. See agent/motion.md. */
.hero__inner > *,
.hero__services {
    transition: opacity 480ms var(--ease-out),
                translate 480ms var(--ease-out);
}

@starting-style {
    .hero__inner > *,
    .hero__services {
        opacity: 0;
        translate: 0 12px;
    }
}

.hero__inner > *:nth-child(1) { transition-delay: 40ms; }
.hero__inner > *:nth-child(2) { transition-delay: 100ms; }
.hero__inner > *:nth-child(3) { transition-delay: 160ms; }
.hero__inner > *:nth-child(4) { transition-delay: 220ms; }
.hero__services { transition-delay: 280ms; }

.hero h1 {
    color: var(--ink-on-dark);
    margin-bottom: var(--space-5);
}

/* Only force the break where the line provably fits: below 720px "GARAGE DOOR"
   at the clamp minimum can exceed the content column. */
.hero__line {
    display: inline;
}

@media (min-width: 720px) {
    .hero__line {
        display: block;
    }

    .hero__br {
        display: none;
    }
}

.hero__line--sm {
    font-size: 0.7em;
}

/* The highlighted phrase is a <mark>; reset its default yellow highlight. */
.hero h1 mark {
    display: block;
    background: none;
    font-size: 0.9em;
    color: var(--blue-on-scrim);   /* 6.6:1 on the scrim */
}

@media (max-width: 375px) {
    .hero__line--sm {
        font-size: 0.5em;
    }

    .hero h1 mark {
        font-size: 0.8em;
    }
}

.hero__lead {
    margin-bottom: var(--space-6);
    font-size: var(--text-lg);
    color: var(--on-ink);
}

@media (max-width: 340px) {
    .hero h1 {
        margin-bottom: var(--space-4);
    }

    .hero h1 mark {
        font-size: 0.7em;
        white-space: nowrap;
    }

    .hero__lead {
        margin-bottom: var(--space-4);
        font-size: var(--text-base);
        line-height: var(--leading-normal);
    }
}

/* The urgency split. Call dominates by colour and size, not by isolation. */
.hero__paths {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
}

/* Shared height so the row reads as one pair; max() holds the 48px control
   floor in the compressed tablet band. */
.hero__paths .btn {
    min-height: max(6rem, 48px);
}

.hero__paths .btn--outline {
    border-color: rgba(255, 255, 255, 0.45);
    color: var(--ink-on-dark);
    backdrop-filter: blur(2px);
}

.hero__paths .btn--outline:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--ink-on-dark);
    color: var(--ink-on-dark);
}

/* --------------------------------------------------------------------------
   Service links. Every item is a real link to the page that treats that
   symptom: the shortest path from "my spring snapped" to the spring page, and
   six internal links out of the hero.
   -------------------------------------------------------------------------- */
/* The chevrons cost ~19px per chip, which pushes six past the text column, so
   the label takes its own line and the chips wrap. */
.hero__services {
    display: block;
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.hero__services-label {
    display: block;
    margin-bottom: var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--on-ink-muted);
}

/* Uncapped: the row spans the container and the chips wrap where they wrap. */
.hero__services ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
}

/* The chevron is what makes these read as links rather than tags. */
.hero__services a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.53em 0.8em;   /* em: chip padding tracks the chip's own size */
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.07);
    color: var(--on-ink);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out),
                scale var(--dur-press) var(--ease-out);
}

.hero__services a svg {
    flex: none;
    opacity: 0.7;
    transition: translate var(--dur) var(--ease-out),
                opacity var(--dur) var(--ease-out);
}

.hero__services a:active {
    scale: 0.97;
}

@media (hover: hover) and (pointer: fine) {
    .hero__services a:hover {
        background: rgba(255, 255, 255, 0.18);
        border-color: rgba(255, 255, 255, 0.7);
        color: var(--ink-on-dark);
    }

    .hero__services a:hover svg {
        opacity: 1;
        translate: 2px 0;
    }
}

/* 981px is where the chips stop wrapping, NOT the nav breakpoint (900px).
   `1 0 auto`, not `1 1 0`: equal shares wrap "Track alignment". Must stay below
   `.hero__services a` or its display loses. See agent/hero.md. */
@media (min-width: 981px) {
    .hero__services li {
        flex: 1 0 auto;
    }

    .hero__services a {
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 720px) {
    .hero {
        min-height: 0;
        padding-block: var(--space-7);
    }

    /* Photo detail is unreadable at this width; bias the scrim to solid. */
    .hero::after {
        background: linear-gradient(
            180deg,
            rgb(var(--scrim-rgb) / 0.90) 0%,
            rgb(var(--scrim-rgb) / 0.86) 60%,
            rgb(var(--scrim-rgb) / 0.94) 100%
        );
    }

    .hero__paths {
        flex-direction: column;
        align-items: stretch;
    }

    .hero__services {
        margin-top: var(--space-6);
    }
}


/* --------------------------------------------------------------------------
   Gallery preview
   -------------------------------------------------------------------------- */
/* One mosaic of span-sized cells. Three cells carry a size modifier; the rest
   are 1x1. grid-auto-flow: dense repacks the SAME seven cells into a clean
   rectangle at each column count, so the layout reads differently at every
   width instead of the old uniform 4-up contact sheet. The cell shape comes
   from the grid, never the photo: object-fit: cover fills whatever rectangle
   a cell takes, so portrait and landscape sources sit flush side by side.
   Row height is the single dial that sets scale at each breakpoint. */
.bento {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(8rem, 30vw, 12rem);
    grid-auto-flow: dense;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    list-style: none;
}

@media (min-width: 600px) {
    .bento {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: clamp(10rem, 20vw, 13rem);
        gap: var(--space-4);
    }
}

@media (min-width: 900px) {
    .bento {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 14rem;
    }
}

.bento__cell--feature { grid-column: span 2; grid-row: span 2; }
.bento__cell--tall    { grid-row: span 2; }
.bento__cell--wide    { grid-column: span 2; }

/* This photo frames the technician high; a centred crop cut off the head. */
.bento__cell--top img { object-position: top; }

.bento button {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
}

.bento img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale var(--dur) var(--ease-out);
}

/* Gated: a tap fires :hover. */
@media (hover: hover) and (pointer: fine) {
    .bento button:hover img {
        scale: 1.04;
    }
}

/* --------------------------------------------------------------------------
   Conversion bands. `.cta-band` follows the reviews: proof, then the ask, and
   the loudest thing between the hero and the form. `.cta-inline` follows the
   gallery and is deliberately quiet: two identical full-width CTAs in a row
   read as a template rather than an offer.
   -------------------------------------------------------------------------- */
/* Never `flex-wrap: wrap` here: the button pair only fits beside the headline
   past 1080px, and wrapping leaves space-between one item to distribute and
   the card's right half empty. See agent/components.md. */
.cta-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    margin-top: var(--space-7);
    padding: var(--space-6);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.cta-band__text {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 46ch;
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: var(--leading-snug);
    color: var(--ink);
    text-wrap: balance;
}

/* Stacked and stretched: both buttons take the width of the wider one, so the
   pair reads as one right-hand block rather than two ragged pills. */
.cta-band__actions {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
}

/* Inline padding is bought at the cost of the headline's column. */
.cta-band__actions .btn--emergency {
    padding-inline: 1.15em;
}

/* At 21px the button block is wider than the headline it answers, and the
   headline runs six ragged lines. Give the type back to the words. */
@media (max-width: 860px) {
    .cta-band__actions .btn--emergency {
        font-size: var(--text-base);
    }
}

.cta-inline {
    margin-top: var(--space-6);
    font-size: var(--text-lg);
    color: var(--ink-muted);
    text-align: center;
}

.cta-inline a {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--blue-text);
    text-underline-offset: 3px;
}

@media (max-width: 640px) {
    .cta-band {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }


    /* Once the axis flips, a row-axis flex-basis becomes a height and grow
       stretches it, opening a void between the headline and the buttons. */
    .cta-band__text {
        flex: 0 1 auto;
        margin-inline: auto;
    }

    .cta-band__actions .btn {
        width: 100%;
    }
}

/* 2rem of inline padding is a fifth of a 320px screen, taken from the one line
   that must not wrap: the phone number. */
@media (max-width: 480px) {
    .cta-band {
        padding: var(--space-5) var(--space-4);
    }
}

/* --------------------------------------------------------------------------
   Proof panel. Client-owned photography only.
   -------------------------------------------------------------------------- */
.proof-photo {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.proof-photo img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.proof-photo figcaption {
    padding: var(--space-5);
    background: var(--surface-ink);
    color: var(--on-ink-soft);
}

.proof-photo figcaption strong {
    display: block;
    margin-bottom: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--ink-on-dark);
}

/* --------------------------------------------------------------------------
   Service list
   -------------------------------------------------------------------------- */
.service-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), 1fr));
    gap: var(--space-3);
    list-style: none;
}

.service-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    height: 100%;
    padding: 0.94em 1.41em;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    transition: border-color var(--dur) var(--ease-out),
                background var(--dur) var(--ease-out);
}

.service-list a:hover {
    background: var(--blue-wash);
    border-color: var(--blue-fill);
    color: var(--blue-text);
}

.service-list svg {
    flex: none;
    color: var(--blue-text);
    transition: translate var(--dur) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .service-list a:hover svg {
        translate: 3px 0;
    }
}

/* --------------------------------------------------------------------------
   Quote / contact
   -------------------------------------------------------------------------- */

/* Light, not --surface-ink: as ink it was the exact colour of the footer
   beneath it and the final CTA dissolved into it. */
.contact-section {
    background: var(--surface-raised);
    border-top: 1px solid var(--border);
}

.contact-section h2 {
    color: var(--ink);
}

.contact-section .split {
    row-gap:0.5em;
}

.contact-lead {
    color: var(--ink-body);
}

.contact-method {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--ink-body);
    font-style: normal;   /* <address> defaults to italic */
    text-decoration: none;
    transition: border-color var(--dur) var(--ease-out),
                background var(--dur) var(--ease-out),
                scale var(--dur-press) var(--ease-out);
}

a.contact-method:active {
    scale: 0.99;
}

@media (hover: hover) and (pointer: fine) {
    a.contact-method:hover {
        background: var(--blue-wash);
        border-color: var(--blue-fill);
        color: var(--ink);
    }
}

.contact-method svg {
    flex: none;
    color: var(--blue-text);
}

.contact-method__label {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-muted);
}

.contact-method__value {
    display: block;
    font-size: var(--text-lg);
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   FAQ. Native <details>: answers readable with JS off, keyboard-operable for
   free. The chevron is a CSS-drawn caret, not an icon-font glyph.
   -------------------------------------------------------------------------- */
.faq {
    display: grid;
    gap: var(--space-3);
}

.faq__item {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    transition: background var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out);
}

.faq__item summary::-webkit-details-marker {
    display: none;
}

.faq__item summary:hover {
    color: var(--blue-text);
}

/* Caret drawn from two borders. Rotates from pointing-down to pointing-up. */
.faq__item summary::after {
    content: "";
    flex: none;
    transition: transform var(--dur) var(--ease-out),
                margin-top var(--dur) var(--ease-out);
    width: 1rem;
    height: 1rem;
    margin-top: -0.4rem;
    border-right: 2px solid var(--blue-text);
    border-bottom: 2px solid var(--blue-text);
    transform: rotate(45deg);
    transition: transform var(--dur) var(--ease-out);
}

.faq__item[open] summary::after {
    margin-top: 0.3rem;
    transform: rotate(-135deg);
}

.faq__answer {
    padding: 0 var(--space-5) var(--space-5);
    color: var(--ink-body);
}

/* --------------------------------------------------------------------------
   Contact + footer text blocks
   -------------------------------------------------------------------------- */
.contact-lead {
    margin-top: var(--space-4);
}

.contact-cta {
    margin-top: var(--space-6);
}

/* --------------------------------------------------------------------------
   320px. The narrowest phone still in the wild.
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {

    .cta-inline a {
        display: inline-flex;
        align-items: center;
        padding-inline: var(--space-2);
    }
}

/* Lifts the footer's link rows off a 24px hit area. */
@media (max-width: 720px) {
    .footer-grid ul a,
    .footer-areas a {
        display: inline-flex;
        padding-block: var(--space-2);
    }
}