/*
 * Stud Mount Seattle — homepage-only sections (index.php). Loaded after
 * css/base.css. Shared chrome (nav/footer/buttons/section primitives/
 * contact card/areas grid/quote modal) lives in base.css; this file covers
 * the hero + "stud x-ray" mount animation, service cards, the process
 * rail, benefits, the what's-included split, reviews, gallery and CTA.
 */

/* ---------- Animations ---------- */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Hero ---------- */

.hero {
    position: relative;
    padding-block: clamp(44px, 6vw, 88px) clamp(52px, 7vw, 96px);
    background: linear-gradient(180deg, var(--bg) 0%, var(--steel-soft) 100%);
    overflow: hidden;
}

/* Faint measurement grid - the same "technical drawing" language as the
   stud scene, fading out toward the bottom so it never fights the copy. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(74, 122, 156, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74, 122, 156, 0.12) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 85%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 85%);
    pointer-events: none;
}

.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
}

.hero-copy .eyebrow {
    animation: fadeInUp 0.6s var(--ease) 0.05s backwards;
}

.hero-title {
    max-width: 14ch;
    margin: 0 0 1rem;
    font-size: clamp(2.4rem, 5vw, 3.9rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    color: var(--ink);
    animation: fadeInUp 0.7s var(--ease) 0.15s backwards;
}

.hero-title em {
    font-style: normal;
    color: var(--accent-strong);
}

.hero-sub {
    max-width: 52ch;
    color: var(--muted);
    font-size: clamp(1.02rem, 1.3vw, 1.15rem);
    line-height: 1.7;
    animation: fadeInUp 0.7s var(--ease) 0.25s backwards;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
    margin-top: 1.7rem;
    animation: fadeInUp 0.7s var(--ease) 0.35s backwards;
}

.hero-actions .btn {
    min-height: 54px;
    padding-inline: 1.5rem;
    font-size: 1rem;
}

.hero-proof-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1.6rem;
    margin-top: 1.8rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--line-blueprint);
    animation: fadeInUp 0.7s var(--ease) 0.45s backwards;
}

.hero-proof-row span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 600;
}

.hero-proof-row i {
    color: var(--accent-strong);
    font-size: 1rem;
}

/* ---------- Hero scene: the "stud x-ray" mount animation ---------- */

.hero-scene {
    position: relative;
    padding: 0.9rem 0.9rem 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow: var(--shadow-lg);
    animation: fadeInUp 0.8s var(--ease) 0.3s backwards;
}

.hero-scene svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(var(--radius-lg) - 8px);
}

.hero-scene-caption {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 0.4rem 0.9rem;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hero-scene-caption::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

/* Scene palette - a painted wall with real furniture cues (picture, outlet,
   baseboard, floor) so the x-ray studs read as "inside this wall". */
/* Gradient fills live on the SVG elements as attributes: url(#id) inside an
   external stylesheet resolves against the CSS file, not the page. */
.hs-floor-lines { fill: none; stroke: rgba(90, 60, 30, 0.22); stroke-width: 1; }
.hs-baseboard { fill: #fbfaf7; }
.hs-baseboard-top { fill: #d9d6cf; }

.hs-studs { opacity: 0; }
.hs-stud rect { fill: #d9bd94; fill-opacity: 0.55; stroke: rgba(120, 85, 45, 0.45); stroke-width: 1; stroke-dasharray: 5 4; }
.hs-stud path { fill: none; stroke: rgba(120, 85, 45, 0.28); stroke-width: 1; }
.hs-stud-hit rect { fill: #f2b39f; fill-opacity: 0.7; stroke: var(--accent); stroke-dasharray: none; stroke-width: 1.4; transition: fill 0.4s ease, stroke 0.4s ease; }

.hs-frame { fill: #5a4536; }
.hs-mat { fill: #fbfaf6; }
.hs-art { fill: #cfe0ea; }
.hs-art-sun { fill: #f2b34d; }
.hs-art-hill { fill: #6f8f6a; }

.hs-outlet-plate { fill: #f7f6f2; stroke: #d3d0c8; stroke-width: 1; }
.hs-outlet-slots rect,
.hs-outlet-slots circle { fill: #7d838c; }
.hs-outlet-screw { fill: #b8bcc3; }

.hs-cord { fill: none; stroke: #2b3139; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 80; stroke-dashoffset: 80; }
.hs-plug rect { fill: #2f3640; }
.hs-plug rect:not(:first-child) { fill: #9aa3ae; }

.hs-finder-body { fill: #fbfbfb; stroke: #b9c2cc; stroke-width: 1.2; }
.hs-finder-screen { fill: #d5e4ee; }
.hs-finder-grip { fill: #c9d2da; }
.hs-finder .hs-led { fill: #c9d3dc; }

.hs-plate { stroke: #353c47; stroke-width: 1; }
.hs-plate-slot { fill: #2f3640; }
.hs-screw circle { fill: #c7ccd3; stroke: #8b939e; stroke-width: 0.8; }
.hs-screw path { fill: none; stroke: #4b5563; stroke-width: 1.1; stroke-linecap: round; }

.hs-tv-edge { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }
.hs-tv-screen { fill: #0a0e13; }
.hs-tv-screen-on { opacity: 0; }
.hs-tv-glare { opacity: 0; }
.hs-tv-chin { fill: #3a424d; }
.hs-tv-led { fill: #7f8994; }

.hs-label { fill: var(--steel-strong); font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; opacity: 0; }

/* Every animated group uses its own box as the transform origin so scale /
   rotate happen around the element, not the SVG corner. */
.hs-finder,
.hs-bracket,
.hs-screw,
.hs-plug,
.hs-tv {
    transform-box: fill-box;
    transform-origin: center;
}

/* Timeline (plays once on load, then holds the finished install):
   0.0s painted wall with picture, outlet, baseboard - just a room
   0.5s stud finder slides in along the wall
   1.0s studs show through the drywall (x-ray)
   1.9s finder LED lights, the stud under it is highlighted
   2.5s finder leaves; 2.7s mount plate is pressed onto the wall
   3.2s four screws go into the stud, one after another
   3.9s TV drops onto the plate and settles level
   5.0s "LEVEL" label
   5.1s power cord runs from the TV down to the outlet, 5.8s plug goes in
   6.1s screen turns on */

.hs-finder {
    animation:
        hsFinderIn 1.5s var(--ease) 0.5s both,
        hsFadeOut 0.4s ease 2.5s forwards;
}

.hs-studs {
    animation: hsFadeIn 0.7s ease 1s forwards;
}

.hs-finder .hs-led {
    animation: hsLed 0.2s ease 1.9s forwards;
}

.hs-stud-hit rect {
    animation: hsStudHit 0.4s ease 1.9s both;
}

.hs-bracket {
    opacity: 0;
    animation: hsPress 0.5s var(--ease) 2.7s forwards;
}

.hs-screw {
    opacity: 0;
    animation: hsScrew 0.4s var(--ease) forwards;
}

.hs-bracket > g:nth-of-type(1) .hs-screw { animation-delay: 3.2s; }
.hs-bracket > g:nth-of-type(2) .hs-screw { animation-delay: 3.35s; }
.hs-bracket > g:nth-of-type(3) .hs-screw { animation-delay: 3.5s; }
.hs-bracket > g:nth-of-type(4) .hs-screw { animation-delay: 3.65s; }

.hs-tv {
    opacity: 0;
    animation: hsTvDrop 1.1s var(--ease) 3.9s forwards;
}

.hs-label-level {
    animation: hsFadeIn 0.3s ease 5s forwards;
}

.hs-cord {
    animation: hsCord 0.7s ease-in-out 5.1s forwards;
}

.hs-plug {
    opacity: 0;
    animation: hsPlugIn 0.35s var(--ease) 5.8s forwards;
}

.hs-tv-screen-on {
    animation: hsFadeIn 0.9s ease 6.1s forwards;
}

.hs-tv-glare {
    animation: hsFadeIn 0.9s ease 6.3s forwards;
}

@keyframes hsFinderIn {
    0% { transform: translateX(-190px); opacity: 0; }
    12% { opacity: 1; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes hsFadeIn {
    to { opacity: 1; }
}

@keyframes hsFadeOut {
    to { opacity: 0; }
}

@keyframes hsLed {
    to { fill: #e8442e; }
}

@keyframes hsStudHit {
    from { fill: #d9bd94; fill-opacity: 0.55; stroke: rgba(120, 85, 45, 0.45); }
    to { fill: #f2b39f; fill-opacity: 0.7; stroke: #e8442e; }
}

@keyframes hsPress {
    0% { opacity: 0; transform: scale(1.14); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes hsScrew {
    0% { opacity: 0; transform: scale(0.4) rotate(-90deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes hsCord {
    to { stroke-dashoffset: 0; }
}

@keyframes hsPlugIn {
    0% { opacity: 0; transform: translateY(-10px) scale(1.15); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes hsTvDrop {
    0% { opacity: 0; transform: translateY(-110px) rotate(-2.5deg); }
    55% { opacity: 1; transform: translateY(5px) rotate(-1deg); }
    100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}

/* ---------- Service cards ---------- */

.svc-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.svc-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.svc-card:hover {
    transform: translateY(-5px);
    border-color: rgba(232, 68, 46, 0.45);
    box-shadow: var(--shadow);
}

.svc-icon {
    display: inline-flex;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: 1.3rem;
    transition: transform 0.3s var(--ease);
}

.svc-card:hover .svc-icon {
    transform: scale(1.08) rotate(-4deg);
}

.svc-card h3 {
    margin-top: 0.3rem;
    font-size: 1.12rem;
    color: var(--ink);
}

.svc-card p {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.65;
}

.svc-card .svc-spec {
    margin-top: auto;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--line-blueprint);
    color: var(--steel-strong);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---------- Service areas ---------- */

.areas-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 2rem;
    margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

.areas-intro .section-heading {
    margin-bottom: 0;
}

.areas-note {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1rem;
    border: 1px dashed var(--line-blueprint);
    border-radius: var(--radius-pill);
    color: var(--steel-strong);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

.areas-note a {
    color: var(--accent-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- Process rail (a real 5-step sequence) ---------- */

.process-rail {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.5rem;
    counter-reset: step;
}

/* Dimension line running behind the step numbers */
.process-rail::before {
    content: "";
    position: absolute;
    top: 20px;
    right: 0;
    left: 0;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--line-blueprint) 0 8px, transparent 8px 16px);
}

.process-step {
    position: relative;
    counter-increment: step;
}

.process-num {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    height: 40px;
    margin-bottom: 1.1rem;
    padding-inline: 0.75rem;
    border: 1px solid var(--steel);
    border-radius: var(--radius-sm);
    background: var(--panel);
    color: var(--steel-strong);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 600;
}

.process-num::before {
    content: "[ " counter(step, decimal-leading-zero) " ]";
}

.process-step:last-child .process-num {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.process-step h3 {
    margin-bottom: 0.5rem;
    font-size: 1.08rem;
    color: var(--ink);
}

.process-step p {
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.65;
}

/* ---------- Benefits ---------- */

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.benefit-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 1rem;
    padding: 1.4rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.benefit-card:hover {
    transform: translateY(-4px);
    border-color: var(--steel);
    box-shadow: var(--shadow);
}

.benefit-card i {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--steel-soft);
    color: var(--steel-strong);
    font-size: 1.25rem;
}

.benefit-card h3 {
    margin-bottom: 0.4rem;
    font-size: 1.05rem;
    color: var(--ink);
}

.benefit-card p {
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.6;
}

/* ---------- What's included ---------- */

.included-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
    align-items: start;
    gap: clamp(2rem, 5vw, 4rem);
}

.included-grid .section-heading {
    margin-bottom: 0.5rem;
}

.included-list {
    display: grid;
    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;
}

.included-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-weight: 600;
    line-height: 1.5;
}

.included-list li:last-child {
    border-bottom: none;
}

.included-list i {
    flex: none;
    margin-top: 0.15rem;
    color: var(--accent-strong);
    font-size: 1.05rem;
}

.included-list small {
    display: block;
    margin-top: 0.15rem;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 500;
}

/* ---------- Reviews ---------- */

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.testimonial-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.7rem 1.6rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
    overflow: hidden;
}

.testimonial-card::before {
    content: "\201C";
    position: absolute;
    top: -0.35em;
    right: 0.35em;
    color: rgba(232, 68, 46, 0.14);
    font-family: var(--font-display);
    font-size: 6.5rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.testimonial-card .stars {
    color: var(--accent-strong);
    font-size: 1rem;
    letter-spacing: 0.15em;
}

.testimonial-card blockquote {
    margin: 0;
    color: var(--ink);
    font-size: 1.02rem;
    line-height: 1.7;
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: auto;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
}

.testimonial-author strong {
    color: var(--ink);
    font-size: 0.94rem;
}

.testimonial-author span {
    color: var(--steel-strong);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---------- Work gallery ---------- */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.gallery-grid figure {
    margin: 0;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--steel-soft);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.gallery-grid figure:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--ease);
}

.gallery-grid figure:hover img {
    transform: scale(1.04);
}

/* ---------- CTA band ---------- */

.cta-band {
    padding-block: clamp(24px, 3vw, 40px) clamp(64px, 7vw, 100px);
}

.cta-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
    padding: clamp(1.8rem, 4vw, 3rem);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at top right, rgba(232, 68, 46, 0.28), transparent 34%),
        var(--surface-dark);
    color: var(--on-dark-muted);
    box-shadow: var(--shadow-dark);
}

.cta-panel-title {
    margin-bottom: 0.5rem;
    color: #ffffff;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
}

.cta-panel p {
    max-width: 52ch;
    line-height: 1.65;
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.cta-panel .btn-secondary {
    border-color: var(--line-dark);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    box-shadow: none;
}

.cta-panel .btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

/* ---------- Scroll reveal (js/ui-refresh.js adds html.js-reveal) ---------- */

html.js-reveal .svc-card,
html.js-reveal .benefit-card,
html.js-reveal .testimonial-card,
html.js-reveal .gallery-grid figure {
    opacity: 0;
    translate: 0 16px;
    transition: opacity 0.5s var(--ease), translate 0.5s var(--ease);
}

html.js-reveal .svc-card.is-visible,
html.js-reveal .benefit-card.is-visible,
html.js-reveal .testimonial-card.is-visible,
html.js-reveal .gallery-grid figure.is-visible {
    opacity: 1;
    translate: 0 0;
}

/* ---------- Motion / a11y ---------- */

@media (prefers-reduced-motion: reduce) {
    /* base.css already zeroes durations; delays must go too so the finished
       install is visible immediately instead of after 5 seconds. */
    .hero-scene * {
        animation-delay: 0s !important;
    }

    .hs-finder {
        opacity: 0;
    }
}

/* ---------- Responsive ---------- */

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

    .process-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 2.2rem;
    }

    .process-rail::before {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 2.2rem;
    }

    .hero-scene {
        max-width: 560px;
    }

    .benefit-grid,
    .testimonial-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .included-grid {
        grid-template-columns: 1fr;
    }

    .areas-intro {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 1rem;
    }

    .areas-note {
        white-space: normal;
    }
}

@media (max-width: 767.98px) {
    .hero {
        padding-block: 36px 52px;
    }

    .hero-title {
        max-width: none;
        font-size: clamp(2.1rem, 9vw, 2.8rem);
    }

    .hero-actions .btn {
        flex: 1 1 100%;
    }

    .hero-proof-row {
        gap: 0.6rem 1.1rem;
    }

    .hero-proof-row span {
        font-size: 0.84rem;
    }

    .svc-grid,
    .benefit-grid,
    .testimonial-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .svc-card,
    .benefit-card {
        padding: 1.3rem;
    }

    /* Vertical rail on phones: numbers on the left, dashed line behind them */
    .process-rail {
        grid-template-columns: 1fr;
        gap: 1.8rem;
        padding-left: 0;
    }

    .process-rail::before {
        display: block;
        top: 0;
        bottom: 0;
        left: 27px;
        right: auto;
        width: 1px;
        height: auto;
        background: repeating-linear-gradient(180deg, var(--line-blueprint) 0 8px, transparent 8px 16px);
    }

    .process-step {
        padding-left: 76px;
    }

    .process-num {
        position: absolute;
        top: -4px;
        left: 0;
        margin-bottom: 0;
    }

    .cta-panel {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }

    .cta-actions .btn {
        flex: 1 1 100%;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .hero-scene {
        padding: 0.6rem 0.6rem 0;
    }
}