/* ==========================================================================
   landing.css — styles for the standalone lead-capture landing pages
   (get-a-quote.php, lead-thank-you.php).

   Loaded AFTER style.css and leans on it heavily: the ivory/gold palette,
   Playfair + Inter pairing, .btn-gold, .service-card, .stats-bar, .process-step,
   .testimonial-card, .cta-section and .area-badge all come from there. Only the
   pieces a landing page needs and the main site does not are defined here.
   ========================================================================== */

/* ── Page shell ─────────────────────────────────────────────────────────── */

.lp-body {
    background: var(--ivory);
}

/* Anchor targets sit below the sticky header rather than under it. */
.lp-body [id] {
    scroll-margin-top: 90px;
}

/* ── Brand-only header ──────────────────────────────────────────────────── */

.lp-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: 14px 0;
    background: rgba(251, 247, 240, .82);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(184, 138, 74, .14);
}

.lp-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.lp-logo {
    height: 50px;
    width: auto;
    display: block;
}

/* style.css sets `.btn-gold { width:100%; height:54px }` under 768px for the
   contact form. That is right there and wrong here — it stretched this button
   to the full header width and pushed it off the right edge. Same specificity,
   later stylesheet, so these win without !important. */
.lp-header__cta {
    white-space: nowrap;
    flex-shrink: 0;
    width: auto;
    height: auto;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.lp-hero {
    position: relative;
    overflow: hidden;
    padding: 70px 0 80px;
}

/* The hero photo is a real <img> (responsive, loaded first), not a CSS background. */
.lp-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Scrim covers the full width, not just the left: unlike the homepage hero the
   form card sits over the right-hand side and needs a calm surface behind it. */
.lp-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(251, 247, 240, .97), rgba(251, 247, 240, .88));
}

.lp-hero__inner {
    position: relative;
}

.lp-hero__copy h1 {
    font-size: clamp(2.6rem, 4.6vw, 4.4rem);
    margin-bottom: 20px;
}

.lp-hero__copy .lp-lede {
    font-size: 19px;
    max-width: 560px;
}

.lp-ticks {
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
}

.lp-ticks li {
    position: relative;
    padding-left: 34px;
    margin-bottom: 14px;
    font-weight: 600;
    color: var(--charcoal);
    line-height: 1.5;
}

.lp-ticks li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(184, 138, 74, .14);
    border: 1px solid rgba(184, 138, 74, .35);
}

.lp-ticks li::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 7px;
    width: 8px;
    height: 4px;
    border-left: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
    transform: rotate(-45deg);
}

/* ── Quote form card ────────────────────────────────────────────────────── */

.lp-form-card {
    background: #fff;
    border: 1px solid rgba(184, 138, 74, .18);
    border-radius: 30px;
    padding: 32px;
    box-shadow: 0 30px 90px rgba(35, 33, 31, .14);
}

.lp-form-card__head {
    margin-bottom: 22px;
}

.lp-form-card__head h2 {
    font-size: 1.9rem;
    margin-bottom: 8px;
}

.lp-form-card__head p {
    font-size: 14px;
    margin: 0;
}

.lp-form .form-control {
    background: var(--ivory);
}

.lp-form .form-control:focus {
    background: #fff;
    border-color: var(--gold);
    box-shadow: 0 0 0 .2rem rgba(184, 138, 74, .15);
}

.lp-form .form-control.is-invalid {
    border-color: #c0392b;
    background: #fff;
}

/* Honeypot: off-screen rather than display:none, because some bots skip
   hidden inputs but happily fill anything still in the layout. */
.lp-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.lp-error {
    color: #c0392b;
    font-size: 13px;
    font-weight: 600;
    margin: 0;
}

.lp-form__fine {
    font-size: 12px;
    text-align: center;
    margin: 14px 0 0;
}

.lp-form__submit:disabled {
    opacity: .65;
}

/* ── Section rhythm ─────────────────────────────────────────────────────── */

.lp-section {
    padding: 90px 0;
}

.lp-section--tight {
    padding: 70px 0;
}

.lp-section__head {
    max-width: 720px;
    margin: 0 auto 48px;
    text-align: center;
}

.lp-section__head p {
    margin-bottom: 0;
}

/* Service cards on this page carry no "Learn more" link, so they need a floor. */
.lp-section .service-card {
    padding-bottom: 34px;
}

/* ── Mid-page CTA strip ─────────────────────────────────────────────────── */

.lp-ctastrip {
    background: linear-gradient(135deg, #fff8ef, #f4eadc);
    border-top: 1px solid rgba(184, 138, 74, .18);
    border-bottom: 1px solid rgba(184, 138, 74, .18);
    padding: 54px 0;
}

.lp-ctastrip__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}

.lp-ctastrip__title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: 0 0 8px;
}

.lp-ctastrip__text {
    margin: 0;
    max-width: 560px;
}

.lp-ctastrip__btn {
    flex-shrink: 0;
}

/* ── Proof strip (transformation + portfolio) ───────────────────────────── */

.lp-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 22px;
}

.lp-proof-grid img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 22px;
    display: block;
}

/* ── Final CTA ──────────────────────────────────────────────────────────── */

.lp-close__areas {
    max-width: 820px;
    margin: 34px auto 0;
}

.lp-close__areas .area-badge {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.lp-footer {
    background: #211e1a;
    color: rgba(255, 255, 255, .68);
    padding: 60px 0 30px;
}

.lp-footer__inner {
    text-align: center;
}

.lp-footer__logo {
    height: 62px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: .85;
    margin: 0 auto 20px;
    display: block;
}

.lp-footer__blurb {
    max-width: 560px;
    margin: 0 auto 22px;
    color: rgba(255, 255, 255, .68);
    font-size: 15px;
}

.lp-footer__contact {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px 22px;
    flex-wrap: wrap;
    font-weight: 600;
}

.lp-footer__contact a {
    color: var(--gold);
    text-decoration: none;
}

.lp-footer__contact a:hover {
    color: #d7a45a;
}

.lp-footer__legal {
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin: 34px 0 0;
    padding-top: 22px;
    font-size: 13px;
    color: rgba(255, 255, 255, .5);
}

.lp-footer__legal a {
    color: rgba(255, 255, 255, .62);
    /* Underlined so the links stand out from the surrounding text without
       relying on colour alone. */
    text-decoration: underline;
}

.lp-footer__legal a:hover {
    color: var(--gold);
}

/* ── Mobile sticky CTA ──────────────────────────────────────────────────── */

.lp-sticky {
    display: none;
}

/* ── Thank-you page: single screen, nothing to scroll ───────────────────── */

.bare {
    background: var(--ivory);
}

.bare__screen {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
}

.bare__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bare__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(251, 247, 240, .93), rgba(244, 234, 220, .96));
}

.bare__main {
    position: relative;
    display: grid;
    place-items: center;
    padding: 30px 20px;
}

.bare__stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(18px, 3vw, 30px);
    width: 100%;
}

.bare__logo {
    height: clamp(56px, 7vw, 78px);
    width: auto;
    display: block;
}

.ty-card {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid rgba(184, 138, 74, .18);
    border-radius: 32px;
    box-shadow: 0 30px 80px rgba(35, 33, 31, .14);
    padding: clamp(26px, 4vw, 48px) clamp(22px, 4vw, 52px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(10px, 1.4vw, 14px);
}

.ty-card__check {
    width: clamp(58px, 6vw, 74px);
    height: clamp(58px, 6vw, 74px);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(184, 138, 74, .12);
    border: 2px solid rgba(184, 138, 74, .4);
    color: var(--gold);
    font-size: clamp(26px, 3vw, 33px);
    line-height: 1;
    flex-shrink: 0;
}

.ty-card__rule {
    width: 46px;
    height: 2px;
    background: rgba(184, 138, 74, .35);
}

.ty-card__title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(30px, 4.4vw, 44px);
    letter-spacing: -.03em;
    line-height: 1.1;
    color: var(--charcoal);
    margin: 0;
}

.ty-card__text {
    font-size: clamp(15px, 1.4vw, 16.5px);
    line-height: 1.6;
    max-width: 430px;
    margin: 0;
}

/* Side by side where the card is wide enough, stacked where it is not. */
.ty-card__calls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
}

.ty-card__call {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ty-card__redirect {
    font-size: 13.5px;
    color: var(--muted);
    margin: 0;
    min-height: 1.2em;
}

/* Short viewports — a phone in landscape — trim the card rather than scroll. */
@media (max-height: 620px) {
    .ty-card {
        padding: 22px 24px;
        gap: 8px;
    }

    .ty-card__check {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }

    .ty-card__rule {
        display: none;
    }

    .ty-card__title {
        font-size: 28px;
    }

    .ty-card__text {
        font-size: 14.5px;
    }

    .bare__logo {
        height: 44px;
    }
}

/* A phone held sideways leaves ~400px of height for everything. */
@media (max-height: 460px) {
    .bare__logo {
        height: 34px;
    }

    .bare__main {
        padding: 14px 20px;
    }

    .bare__stack {
        gap: 12px;
    }

    .ty-card {
        padding: 16px 22px;
        gap: 6px;
    }

    .ty-card__check {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    .ty-card__title {
        font-size: 23px;
    }

    .ty-card__text {
        font-size: 13.5px;
        line-height: 1.45;
    }

    .ty-card__call {
        padding: 10px 20px;
        font-size: 15px;
    }

    .ty-card__redirect {
        font-size: 12.5px;
    }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    .lp-hero {
        padding: 48px 0 60px;
    }

    .lp-hero__overlay {
        background: rgba(251, 247, 240, .93);
    }

    .lp-section {
        padding: 64px 0;
    }

    .lp-section--tight {
        padding: 50px 0;
    }

    .lp-proof-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lp-ctastrip__inner {
        justify-content: center;
        text-align: center;
    }

    .lp-ctastrip__text {
        margin-inline: auto;
    }
}

@media (max-width: 767px) {

    /* The hero form scrolls out of sight quickly on a phone, so a fixed bar
       carries the CTA for the rest of the page. Padding keeps it clear of the
       footer's last line rather than covering it. */
    .lp-sticky {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: rgba(251, 247, 240, .93);
        backdrop-filter: blur(14px);
        border-top: 1px solid rgba(184, 138, 74, .2);
        transition: transform .3s ease;
    }

    /* landing.js adds this while the form itself is on screen. */
    .lp-sticky.is-hidden {
        transform: translateY(130%);
    }

    .lp-sticky__btn {
        display: block;
        width: 100%;
        text-align: center;
    }

    .lp-body {
        padding-bottom: 84px;
    }

    .lp-header {
        padding: 10px 0;
    }

    .lp-logo {
        height: 40px;
    }

    /* Compact enough to sit beside the logo on a 320px screen without
       crowding it. The sticky bar carries the full-size CTA below. */
    .lp-header__cta {
        padding: 9px 15px;
        font-size: 13px;
        box-shadow: none;
    }

    .lp-hero__copy h1 {
        font-size: 2.3rem;
    }

    .lp-hero__copy .lp-lede {
        font-size: 16px;
    }

    .lp-form-card {
        padding: 24px 20px;
        border-radius: 24px;
    }

    .lp-form-card__head h2 {
        font-size: 1.55rem;
    }

    .lp-section__head {
        margin-bottom: 34px;
    }

    .lp-ty__card {
        padding: 38px 24px;
        border-radius: 26px;
    }

    .lp-ty__next {
        margin-top: 26px;
    }

    /* Match the main site: reCAPTCHA is wider than a small phone viewport. */
    .lp-form .g-recaptcha {
        transform: scale(.86);
        transform-origin: left top;
        max-width: 100%;
    }
}

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

    .lp-form .g-recaptcha {
        transform: scale(.8);
    }
}

/* ── Performance ─────────────────────────────────────────────────────────── */
/* Sections below the hero are only laid out when they come near the screen,
   which halves the work the browser does before the page is usable. The
   intrinsic size keeps the scrollbar stable until they render. */
.lp-section,
.stats-bar,
.process-strip,
.lp-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
}