/* ===========================================================================
   Main-site pages built on the lander system (scripts/site_shell.py).
   Loaded after style.css and landing-page.css; only what the landers do not already have.
   =========================================================================== */

/* --- Inner-page hero: the lander hero, one column, no quote card --- */
.lp-hero--inner {
    padding-bottom: var(--space-3xl);
}

.lp-hero--inner .lp-hero-copy {
    max-width: 760px;
}

.lp-hero--inner .lp-actions {
    margin-bottom: var(--space-md);
}

.lp-hero--inner .btn-outline-white {
    display: inline-flex;
    align-items: center;
}

@media (max-width: 640px) {
    .lp-hero--inner {
        padding-bottom: var(--space-2xl);
    }

    .lp-hero--inner .lp-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* landing-page.css hides the hero trust facts under 520px (on the landers they repeat in the
   proof block under the card). An inner hero has no proof block, so they stay. Jump links clear
   the fixed header through landing-page.css's scroll-padding-top on html (no scroll-margin here,
   it would double the offset). */
@media (max-width: 520px) {
    .lp-hero--inner .lp-trust-facts {
        display: block;
    }
}

/* --- Closing band on main pages: navy, not the landers' teal. White text on navy, the call
   button teal with navy text, the second button a white outline. --- */
.site-page .cta-bar {
    background: var(--clr-navy);
}

.site-page.lp-page--quote .cta-bar h2,
.site-page.lp-page--quote .cta-bar .cta-copy-compact,
.site-page .cta-bar .lp-close-note {
    color: var(--clr-white);
}

.site-page.lp-page--quote .cta-bar .cta-btn-primary {
    background: var(--clr-teal);
    border-color: var(--clr-teal);
    color: var(--clr-navy);
}

.site-page.lp-page--quote .cta-bar .cta-btn-secondary {
    color: var(--clr-white);
    border-color: var(--clr-white);
}

@media (hover: hover) and (pointer: fine) {
    .site-page.lp-page--quote .cta-bar .cta-btn-secondary:hover {
        background: var(--clr-white);
        color: var(--clr-navy);
    }
}

.site-page.lp-page--quote .cta-bar .btn:focus-visible {
    outline-color: var(--clr-teal);
}

/* ===========================================================================
   General quote card (data-service="general", site_shell.quote_card): a multi-select first step,
   then the lander call-time and contact steps plus optional email, notes and a recurring box.
   =========================================================================== */
/* Multi-select options: a checkbox square instead of the lander's chevron. */
.lp-options--multi .lp-option::after {
    width: 20px;
    height: 20px;
    margin-right: 0;
    border: 2px solid var(--clr-text-muted);
    border-radius: 5px;
    transform: none;
}

.lp-options--multi .lp-option[aria-pressed="true"]::after {
    border-color: var(--clr-teal-dark);
    background: var(--clr-teal-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat;
}

@media (hover: hover) and (pointer: fine) {
    .lp-options--multi .lp-option:hover::after {
        transform: none;
    }
}

.lp-multi-error:empty {
    display: none;
}

.lp-step-next {
    width: 100%;
    margin-top: var(--space-md);
}

.lp-optional {
    font-weight: 400;
    color: var(--clr-text-muted);
}

.lp-page--quote .lp-quote textarea.lp-notes {
    min-height: 88px;
    resize: vertical;
    line-height: 1.5;
}

.lp-quote .lp-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 44px;
}

.lp-check input {
    flex: none;
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
    accent-color: var(--clr-teal-dark);
}

.lp-check input:focus-visible {
    outline: 3px solid var(--clr-navy);
    outline-offset: 2px;
}

.lp-check label {
    color: var(--clr-navy);
    font-size: 1rem;
    line-height: 1.45;
    cursor: pointer;
}

/* ===========================================================================
   Service cards (site_shell.service_cards): six services, each card one link (the name's link
   covers the card), 4:3 photo, the lander's own hero line, a text cue. Home and /services.
   =========================================================================== */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}

.svc-item {
    display: flex;
}

.svc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--clr-white);
    border: 1px solid var(--clr-border);
    border-radius: 12px;
    transition: border-color 0.15s ease;
}

.svc-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 11px 11px 0 0;
    background: var(--clr-border);
}

.svc-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--svc-pos, 50% 50%);
}

/* An honest note on a stand-in photo (screens: our crew on a window job). */
.svc-photo-note {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 6px 12px;
    background: rgba(28, 37, 65, 0.85);
    color: var(--clr-white);
    font-size: 0.8rem;
    line-height: 1.35;
}

.svc-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-sm);
    padding: 20px 20px 22px;
}

.svc-name {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.25;
    color: var(--clr-navy);
}

.svc-link {
    color: inherit;
    text-decoration: none;
}

.svc-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 12px;
}

.svc-link:focus-visible {
    outline: none;
}

.svc-link:focus-visible::after {
    outline: 3px solid var(--clr-navy);
    outline-offset: 3px;
}

.svc-line,
.svc-note {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--clr-text-body);
}

.svc-note {
    font-weight: var(--fw-semibold);
    color: var(--clr-navy);
}

.svc-cue {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: auto 0 0;
    padding-top: 4px;
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    color: var(--clr-navy);
    text-underline-offset: 4px;
}

.svc-cue svg {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--clr-teal-dark);
}

@media (hover: hover) and (pointer: fine) {
    .svc-card:hover {
        border-color: var(--clr-teal);
    }

    .svc-card:hover .svc-cue {
        text-decoration: underline;
        text-decoration-color: var(--clr-teal);
    }
}

@media (prefers-reduced-motion: reduce) {
    .svc-card {
        transition: none;
    }
}

@media (max-width: 1023px) {
    .svc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    .svc-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .svc-body {
        padding: 16px 16px 18px;
    }
}

/* --- Rating band (site_shell.rating_section): the hero rating lockup on navy --- */
.site-rating .lp-section-head {
    margin-bottom: 0;
}

.site-rating .lp-hero-proof {
    max-width: 36rem;
}

.site-rating .lp-hero-proof :focus-visible {
    outline-color: var(--clr-teal);
}

/* --- Text links with an arrow: "See more in the gallery" (home), "See photos from our jobs"
   (/services), and under each gallery section "See <service>" plus the call link. Navy on light
   bands, white on dark ones; the arrow is 18px. --- */
.gal-more,
.gal-call {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--clr-navy);
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    font-size: 1.05rem;
}

.gal-more {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--clr-teal);
    text-underline-offset: 5px;
}

.gal-call {
    text-decoration: none;
}

.gal-call:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
}

.gal-more svg,
.gal-call svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.gal-more:focus-visible,
.gal-call:focus-visible {
    outline: 3px solid var(--clr-navy);
    outline-offset: 3px;
    border-radius: 2px;
}

.lp-work--dark :is(.gal-more, .gal-call) {
    color: var(--clr-white);
}

.lp-work--dark :is(.gal-more, .gal-call):focus-visible {
    outline-color: var(--clr-teal);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .gal-more svg {
        transition: transform 0.2s ease;
    }

    .gal-more:hover svg {
        transform: translateX(3px);
    }
}