/* pages.css — hero, section-head helpers, and the responsive @media layer
   (breakpoints ~880/520px). Layout map: wireframe + blueprint §5. */

/* hero */
.hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding-block: clamp(84px, 14vw, 170px)
}

/* ghost mark — centered without transform (top/bottom + margin) so GSAP owns the
   transform for scroll parallax + cursor counter-drift (main.js, home only). */
.hero .ghost {
    position: absolute;
    right: -6%;
    top: 0;
    bottom: 0;
    margin-block: auto;
    width: min(60vw, 720px);
    height: min(60vw, 720px);
    opacity: .05;
    pointer-events: none;
    filter: saturate(0);
    z-index: -1;
    will-change: transform
}

.hero .wrap {
    position: relative;
    z-index: 2;
    max-width: 980px
}

.hero h1 {
    font-size: clamp(2.7rem, 8.4vw, 6.1rem);
    font-weight: 340;
    max-width: 16ch
}

.hero h1 .obv {
    font-style: italic;
    position: relative;
    white-space: nowrap
}

/* champagne underline — DRAWS L→R on the home hero load (main.js animates --uw);
   static (drawn) everywhere else and with no JS. */
.hero h1 .obv::after {
    content: "";
    position: absolute;
    left: 0;
    right: .06em;
    bottom: .08em;
    height: 3px;
    background: var(--champagne);
    opacity: .85;
    transform: scaleX(var(--uw, 1));
    transform-origin: left
}

html.js .hero .obv {
    --uw: 0
}

@media (prefers-reduced-motion:reduce) {
    html.js .hero .obv {
        --uw: 1
    }
}

.hero .lead {
    margin-top: var(--s4);
    font-size: clamp(1.1rem, 1.8vw, 1.4rem)
}

.hero .cta-row {
    margin-top: var(--s5);
    display: flex;
    gap: var(--s3);
    flex-wrap: wrap
}

/* generic section heads */
.h-block {
    max-width: 64ch
}

.h2 {
    font-size: clamp(1.9rem, 4.4vw, 3.1rem);
    font-weight: 360
}

.h2--big {
    font-size: clamp(2.2rem, 5.2vw, 3.7rem)
}

.spacer-sm {
    height: var(--s4)
}

/* responsive */
@media(max-width:880px) {

    .navlinks,
    .navcta {
        display: none
    }

    .burger {
        display: block
    }

    .nav.open .navlinks {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--void);
        border-bottom: 1px solid var(--line);
        padding: var(--s2) 0
    }

    .nav.open .navlinks a {
        padding: 14px clamp(20px, 5vw, 44px);
        width: 100%
    }

    .cols,
    .reps,
    .signature,
    .steps,
    .svc,
    .values,
    .contact-grid {
        grid-template-columns: 1fr
    }

    .reps {
        gap: var(--s2)
    }

    .signature {
        gap: var(--s5)
    }

    .contact-grid {
        gap: var(--s5)
    }
}

@media(max-width:520px) {
    .grid-same {
        gap: 10px
    }

    .acard {
        min-height: 96px;
        padding: 13px
    }
}

/* legal pages (privacy) — readable long-form on cream */
.legal {
    max-width: 72ch
}

.legal .updated {
    display: block;
    margin-bottom: var(--s5);
    color: var(--bronze);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .12em
}

.legal h2 {
    font-family: var(--fd);
    font-weight: 380;
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    margin: var(--s6) 0 var(--s2);
    color: var(--ink)
}

.legal h2:first-of-type {
    margin-top: 0
}

.legal p,
.legal li {
    color: #4a3a55;
    font-size: 1rem;
    line-height: 1.7
}

.legal p {
    margin-bottom: var(--s2)
}

.legal ul {
    margin: 0 0 var(--s3) var(--s3)
}

.legal li {
    margin-bottom: 8px
}

.legal a {
    color: var(--bronze);
    text-decoration: underline
}