/* ---------- brand “warm silver” for the progress bar ---------- */
:root {
    --brand-silver: #C9C2B8;
}

.animate.progress::before {
    background: var(--brand-silver);
}

/* anchors don’t hide beneath the fixed nav */
html {
    scroll-padding-top: var(--nav-h, 72px);
}

/* reduce-motion users: no animations */
@media (prefers-reduced-motion: reduce) {

    .row,
    .hero {
        transition: none !important;
        animation: none !important;
    }
}

/* =====================================================================
   <= 900px responsive overrides
   ===================================================================== */
@media (max-width: 900px) {

    /* --- NAV fixed + smaller type --- */
    :root {
        --nav-h: 56px;
    }

    .nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--nav-h);
    }

    main {
        padding-top: var(--nav-h);
    }

    /* content not hidden under bar */
    .nav__brand span {
        font-size: 14px;
    }

    .nav__anchor,
    .nav__btn {
        font-size: 13px;
    }

    .nav__sub {
        font-size: 10px;
        padding-right: 8px
    }

    .nav__links>*+* {
        margin-left: 14px;
    }

    /* optional: expanded services submenu sits below the bar */
    .nav__submenu {
        position: sticky;
        top: var(--nav-h);
        background: rgba(0, 0, 0, .6);
        backdrop-filter: blur(6px);
    }

    /* --- HEADER / HEROES (blog/contact) use aspect-ratio instead of full vh --- */
    .intro-image {
        height: auto;
        aspect-ratio: 4 / 3;
        background-size: cover;
        background-position: center;
    }

    .hero {
        min-height: 0;
        height: auto;
        aspect-ratio: 4 / 5;
        /* a touch taller on phones */
        background-position: 50% 35%;
    }

    /* --- SERVICES: single column, no overlap, readable sizes --- */
    .services {
        padding: 40px 4vw 56px;
    }

    .row {
        display: grid;
        grid-template-columns: 1fr !important;
        /* force one column */
        margin: 28px 0;
    }

    /* both pieces full width; prepare for fade+lift in-view */
    .row__media,
    .row__card {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        position: static !important;
        opacity: 0;
        transform: translate3d(0, 14px, 0);
        transition: transform .55s cubic-bezier(.22, .61, .36, 1), opacity .4s ease;
        will-change: transform, opacity;
    }

    .row__media {
        order: 0;
    }

    .row__card {
        order: 1;
        margin-top: 12px;
        padding: 20px;
    }

    /* safer crop on narrow screens */
    .row__media img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        /* instead of 21/9 panoramas */
        object-fit: cover;
    }

    /* when in view (set by IntersectionObserver in main.js) */
    .row.is-in .row__media,
    .row.is-in .row__card {
        opacity: 1;
        transform: none;
    }

    .row__card h3 {
        font-size: clamp(18px, 5.2vw, 22px);
        line-height: 1.2;
    }

    .row__card p {
        font-size: clamp(14px, 4.2vw, 16px);
    }

    /* --- CONTACT: form above socials, tighter sizing --- */
    #contact .hero__inner {
        max-width: 780px;
    }

    .contact-grid {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 18px;
        align-items: start;
    }

    .contact-left,
    #contact .contact-grid> :first-child {
        order: 0;
    }

    .contact-right,
    #contact .contact-grid> :nth-child(2) {
        order: 1;
    }

    #contact .hero__title {
        font-size: clamp(22px, 6vw, 26px);
    }

    #contact .hero__sub {
        font-size: clamp(14px, 4.2vw, 16px);
    }

    .contact input,
    .contact textarea {
        padding: 12px 14px;
        font-size: 16px;
    }

    .contact textarea {
        min-height: 140px;
    }

    .social {
        gap: 18px;
        margin-top: 10px;
    }

    .social a {
        width: 30px;
        height: 30px;
    }
}

/* Very narrow phones: portrait-friendlier service images */
@media (max-width: 600px) {
    .row__media img {
        aspect-ratio: 3 / 4;
    }
}

/* default: desktop section visible, mobile hidden */
.contact--mobile {
    display: none;
}

/* mobile: flip visibility */
@media (max-width: 900px) {
    .contact--desktop {
        display: none !important;
    }

    .contact--mobile {
        display: block;
    }
}

/* mobile-only niceties */
@media (max-width: 900px) {
    #contact-mobile .hero__inner {
        max-width: 740px;
    }

    #contact-mobile .grid2 {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    #contact-mobile .contact input,
    #contact-mobile .contact textarea {
        padding: 12px 14px;
        font-size: 16px;
    }

    #contact-mobile .contact textarea {
        min-height: 140px;
    }

    #contact-mobile .social {
        gap: 18px;
        margin-top: 8px;
    }

    #contact-mobile .social a {
        width: 30px;
        height: 30px;
    }
}

/* Default: mobile-only sections are hidden on desktop */
#contact-mobile,
#social-mobile {
    display: none;
}

/* Mobile: show the two new sections, hide the desktop one */
@media (max-width: 900px) {
    .contact--desktop {
        display: none !important;
    }

    /* your existing desktop contact section */
    #contact-mobile,
    #social-mobile {
        display: block;
    }

    /* Full-bleed, roomier, and friendly aspect ratio */
    #contact-mobile,
    #social-mobile {
        min-height: 0;
        height: auto;
        aspect-ratio: 4 / 5;
        /* taller on phones */
        background-size: cover;
        background-position: 50% 35%;
        position: relative;
    }

    /* Shared inner container */
    #contact-mobile .hero__inner,
    #social-mobile .hero__inner {
        max-width: 740px;
        padding: 56px 24px;
        /* space from edges */
        margin: 0 auto;
    }

    /* tighter form controls for phones */
    #contact-mobile .grid2 {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    #contact-mobile .contact input,
    #contact-mobile .contact textarea {
        padding: 12px 14px;
        font-size: 16px;
    }

    #contact-mobile .contact textarea {
        min-height: 140px;
    }

    /* Social row */
    #social-mobile .social {
        gap: 18px;
        margin-top: 10px;
    }

    #social-mobile .social a {
        width: 30px;
        height: 30px;
    }

    .social {
        justify-content: center;
    }

    /* Nice spacing between the two mobile sections */
    #contact-mobile {
        margin-bottom: 16px;
    }
}

/* Make anchor scroll land cleanly under your fixed nav */
#contact-anchor {
    scroll-margin-top: calc(var(--nav-h, 72px) + 12px);
}

.social {
    display: flex;
    gap: 22px;
    margin-top: 28px;
    list-style: none;
    padding: 0
}

.social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #fff;
    transition: color .2s ease, opacity .2s ease
}

.social a:hover {
    color: var(--brand-gold, #C9C2B8);
    opacity: .95
}

.social svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor
}

@media (max-width:900px) {
    .social {
        gap: 18px;
        margin-top: 10px
    }

    .social a {
        width: 30px;
        height: 30px
    }
}

/* Mobile: push the icon row down so PN. is centered behind */
@media (max-width: 900px) {
    #social-mobile .social {
        /* 56–160px, scales with screen height */
        margin-top: clamp(100px, 80vh, 200px);
    }

    /* small tidy-ups so the text block is tight above the gap */
    #social-mobile .hero__title {
        margin-bottom: .25em;
    }

    #social-mobile .hero__sub {
        margin: .2em 0;
    }
}