/* services.css: the seven service pages.

   The hero here is the proof-column shape: the photograph sits BESIDE the type
   rather than behind it, so white on solid --surface-ink is 17.85:1 by
   construction and contrast stops being a property of the image. That argument,
   and the scrim tax it avoids, is in agent/hero.md.

   Everything below the hero composes layout.css + components.css. The only
   rules here are the ones the shared system has no primitive for. */

.hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    color: var(--ink-on-dark);
}

/* Content-sized, not viewport-sized: padding sets the rhythm, content sets the
   height. A min-height in vh letterboxes the copy on a short laptop. */
.hero--page {
    background: var(--surface-ink);
    padding-block: var(--space-8) var(--space-7);
    border-bottom: 1px solid var(--ink-border);
}

/* --------------------------------------------------------------------------
   Layout. DOM order IS the mobile order and is not negotiable:
     eyebrow > h1 > lead > paths (PHONE) > proof
   The panicked user gets the phone before the proof scrolls into their way.
   grid-template-areas moves proof to the right column WITHOUT touching source
   order, so keyboard and screen-reader order stay correct.
   -------------------------------------------------------------------------- */
.hero__layout {
    display: grid;
    gap: var(--space-6);
    grid-template-areas:
        "copy"
        "proof";
    /* minmax(0, 1fr), not the implicit `auto`: an auto track is max-content
       sized and takes the hero off the right of a 390px phone. */
    grid-template-columns: minmax(0, 1fr);
}

.hero__inner    { grid-area: copy;  min-width: 0; }
.hero__proof    { grid-area: proof; min-width: 0; }

@media (min-width: 900px) {
    .hero__layout {
        /* 1.15/0.85, not 1fr/1fr: the copy column carries the H1 and the phone
           number and must win. An even split flattens the hierarchy. */
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        grid-template-areas:
            "copy  proof";
        gap: var(--space-8);
        align-items: center;
    }
}

/* --------------------------------------------------------------------------
   First-load entrance on @starting-style, so unsupported engines simply render
   the content: motion never gates the headline or the phone number
   (PRODUCT.md principle 4). See agent/motion.md.
   -------------------------------------------------------------------------- */
.hero__inner > *,
.hero__proof {
    transition: opacity 480ms var(--ease-out),
                translate 480ms var(--ease-out);
}

@starting-style {
    .hero__inner > *,
    .hero__proof {
        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__proof    { transition-delay: 260ms; }

/* --------------------------------------------------------------------------
   Headline. base.css already sets uppercase / 800 / --tracking-display.
   --fs-2, not --fs-1: at 72px "GARAGE DOOR TRACK ALIGNMENTS" wraps to three
   ragged lines inside the copy column. See agent/hero.md.
   -------------------------------------------------------------------------- */
.hero--page h1 {
    font-size: var(--fs-2);
    color: var(--ink-on-dark);   /* 17.85:1 */
    margin-bottom: var(--space-4);
}

/* A <span>: one H1 for SEO and one heading for a screen reader, two lines
   optically. */
.hero__h1-sub {
    display: block;
    font-size: 0.62em;
    color: var(--blue-on-scrim);   /* 8.67:1 on ink; 32px, large text */
}

.hero__lead {
    margin-bottom: var(--space-6);
    max-width: min(52ch, 100%);
    font-family: var(--font-body);
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    color: var(--on-ink);          /* 14.48:1 */
}

/* --------------------------------------------------------------------------
   The urgency split. Each path is a control plus one line of qualifying copy
   naming the reader, divided by a hairline. The question "is this an
   emergency?" is answered before either button is read. No new button classes:
   this is the context AROUND the primitive. See agent/hero.md.
   -------------------------------------------------------------------------- */
.hero__paths {
    display: grid;
    gap: var(--space-5);
    max-width: min(46rem, 100%);
}

/* A rule, not a card. Decorative by intent: it separates, it does not identify
   a control, so SC 1.4.11 does not apply to it. */
.hero__path + .hero__path {
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* Width is the third hierarchy signal after colour and type size, and the one
   that survives a greyscale print-out. */
.hero__path--urgent .btn { width: 100%; }
.hero__path--plan .btn   { justify-self: start; }

/* max() keeps the 6rem floor from dropping under 48px if the root scales down. */
.hero__paths .btn {
    min-height: max(6rem, 48px);
}

/* components.css defines --outline for a LIGHT surface; on ink it needs the
   dark pair. The hero is not a .section, so it restates the override rather
   than the markup saying "I am dark" twice. */
.hero__paths .btn--outline {
    border-color: rgba(255, 255, 255, 0.45);   /* 4.46:1 on ink: a control
                                                  boundary, owes 3:1, clears it */
    color: var(--ink-on-dark);
}

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

.hero__path-note {
    margin-top: var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--on-ink-soft);   /* 12.02:1 */
}

.hero__path-note b {
    font-weight: 700;
    color: var(--ink-on-dark);   /* 17.85:1 */
}

/* --------------------------------------------------------------------------
   Proof column. The planning user's half of the hero: a real photo of real
   work, captioned with only what is in the frame. No pull-quote, deliberately:
   reviews are a live Trustindex embed precisely so the proof cannot age into a
   lie (PRODUCT.md principle 2).
   -------------------------------------------------------------------------- */
.hero__proof {
    display: grid;
    gap: var(--space-4);
    margin: 0;
}

.hero__proof img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    /* Most repair photos look up at the header, so the subject sits above
       centre and a centred crop lands on the technician's waist. */
    object-position: var(--proof-crop, center);
    border-radius: var(--radius-lg);
    /* A tinted hairline, not a glow: stops a pale sky bleeding into the ink
       background at the top edge. */
    border: 1px solid var(--ink-border);
}

.hero__proof figcaption {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--on-ink-muted);   /* 6.96:1 */
}

.hero__proof figcaption b {
    font-weight: 600;
    color: var(--on-ink);         /* 14.48:1 */
}

/* Below 900px the proof is a nice-to-have. Capping it stops a 4:3 photo
   pushing the next section two screens down. */
@media (max-width: 899px) {
    .hero__proof img {
        aspect-ratio: 16 / 9;
    }
}

/* base.css is the reduced-motion authority, but its enumerated list covers
   `.hero__inner > *` and .hero__proof is a SIBLING, so it falls outside.
   Neutralised here. See agent/motion.md. */
@media (prefers-reduced-motion: reduce) {
    .hero__proof {
        translate: none;
        transform: none;
    }

    @starting-style {
        .hero__inner > *,
        .hero__proof {
            opacity: 1;
            translate: none;
        }
    }

    .hero__paths .btn:active {
        scale: none;
    }
}


/* ==========================================================================
   SERVICE PAGE BODY
   ========================================================================== */

/* The one-line answer under an h2: the sentence a scanner reads instead of the
   section. Not `.section-header > p` (that is a centred deck under a centred
   heading); `.hero__lead` is the ink-surface twin and cannot be reused here. */
.service-lead {
    max-width: var(--measure);
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    color: var(--ink-body);   /* 9.74:1 on --surface */
}

.section--ink .service-lead {
    color: var(--on-ink-soft);   /* 12.02:1 on --surface-ink */
}

/* Not .checklist: a tick means "included", a number means "in this order". The
   counter is generated, so the order cannot drift from the markup. */
.steps {
    counter-reset: step;
    display: grid;
    gap: var(--space-5);
    margin-top: var(--space-6);
    list-style: none;
    padding: 0;
}

.steps li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: var(--space-4);
    align-items: start;
}

.steps li::before {
    content: counter(step);
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius);
    background: var(--blue-wash);
    color: var(--blue-text);   /* 5.93:1 on --blue-wash */
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 700;
}

.steps strong {
    display: block;
    font-family: var(--font-display);
    color: var(--ink);
}

.steps p {
    margin-top: var(--space-1);
    color: var(--ink-body);
}

/* The panicked user's last exit before the page ends in a form they do not
   want. Sits on --surface-ink, so it takes --ink-raised: `.card` is the
   light-surface primitive and would put a white box on the dark band. */
.urgent-panel {
    padding: clamp(var(--space-5), 3vw, var(--space-7));
    background: var(--ink-raised);
    border: 1px solid var(--ink-border);
    border-radius: var(--radius-lg);
}

.urgent-panel p {
    color: var(--on-ink-soft);   /* 9.85:1 on --ink-raised */
}

.urgent-panel .btn {
    width: 100%;
    margin-top: var(--space-5);
}