/* ============================================================
   WILD FOX — Ad Landing Pages (self-contained)
   Brand tokens + form styling mirror the main Painting site so the
   form feels identical; layout is landing-specific (single-purpose,
   no nav, form above the fold). --wf-accent is overridden per-landing
   inline in _Layout, so this one stylesheet themes every domain.
   ============================================================ */

:root {
    --wf-accent:        #c0392b;   /* overridden per-landing in _Layout */
    --wf-accent-light:  #EF4138;
    --wf-accent-deep:   #8e2a1f;

    --wf-black:   #141311;
    --wf-bg:      #1a1917;
    --wf-dark:    #201e1c;
    --wf-dark2:   #272522;
    --wf-panel:           var(--wf-dark);
    --wf-panel-raised:    var(--wf-dark2);

    --wf-cream:  #f5f0eb;
    --wf-ink:    var(--wf-cream);
    --wf-muted:  rgba(255,255,255,.72);
    --wf-dim:    #CCC;

    --wf-border:        rgba(255,255,255,.07);
    --wf-shadow:        0 20px 60px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--wf-black);
    font-family: 'Dosis', sans-serif;
    color: #fff;
    line-height: 1.55;
}

h1, h2, h3 {
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: .01em;
    margin: 0;
}

a { color: inherit; }

.lp-container {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

@media (min-width: 768px) {
    .lp-container { padding-inline: 2rem; }
}

.eyebrow {
    color: var(--wf-accent-light);
    text-transform: uppercase;
    letter-spacing: .22em;
    font-weight: 400;
    font-size: .72rem;
    margin: 0 0 .5rem;
}

/* ── Hero logo ───────────────────────────────────────────────
   No top bar — the logo lives at the top of the hero copy column. */
.lp-hero-logo {
    display: block;
    max-width: 190px;
    height: auto;
    margin-bottom: 1.75rem;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.45));
}

/* ── Primary button (matches site .btn-brand) ───────────────── */
.btn-brand {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--wf-accent);
    --bs-btn-border-color: var(--wf-accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--wf-accent-light);
    --bs-btn-hover-border-color: var(--wf-accent-light);
    border-radius: 0;
    padding: .9rem 1.5rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-weight: 700;
    font-size: .78rem;
}

.lp-call {
    text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 1.1rem;
    color: var(--wf-cream);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.lp-call i { color: var(--wf-accent-light); }
.lp-call:hover { color: var(--wf-accent-light); }
.lp-call--light { color: #fff; }

/* ── Hero ────────────────────────────────────────────────────── */
.lp-hero {
    position: relative;
    background: var(--wf-bg);
    padding-block: 3rem 3.5rem;
    overflow: hidden;
}
/* Photographic hero treatment (Meet-style). Two layered gradients over the photo:
   a horizontal darken-left (so the headline + copy on the left stay readable) and a
   gentle vertical ease (top + bottom) into the sections above/below. With no image,
   var(--lp-hero-img, none) resolves to none and only the gradients show. */
.lp-hero--placeholder::before,
.lp-hero[style*="--lp-hero-img"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        /* Lighter darken-left so the headline/copy stay legible but the photo reads. */
        linear-gradient(90deg, rgba(20,19,17,.72) 0%, rgba(20,19,17,.38) 50%, rgba(20,19,17,.10) 100%),
        /* Transparent except a soft bottom fade easing into the next section (minimal
           compounding — no full-height second layer). */
        linear-gradient(180deg, rgba(20,19,17,0) 60%, rgba(20,19,17,.55) 100%),
        var(--lp-hero-img, none);
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.lp-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}
@media (min-width: 992px) {
    .lp-hero-grid { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; }
    /* Taller, more immersive on desktop so the photo fills the screen behind both
       columns (Meet feel). Content stays TOP-anchored (normal block flow + top
       padding, grid align-items: start) so a tall form's heading + first fields are
       always above the fold — do NOT vertically center, that would clip the form top
       on shorter laptop screens. Extra height below just shows more photo. */
    .lp-hero { padding-block: 5rem 5.5rem; min-height: 90vh; }
}
.lp-hero-title {
    font-size: clamp(2.4rem, 5vw, 4.25rem);
    font-weight: 800;
    line-height: .98;
    letter-spacing: .005em;
    color: var(--wf-cream);
    text-shadow: 0 8px 24px rgba(0,0,0,.35);
    margin-bottom: 1.1rem;
}
.lp-hero-sub {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    color: var(--wf-dim);
    max-width: 38ch;
    margin-bottom: 1.5rem;
}
.lp-trust {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
}
.lp-trust li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    color: var(--wf-cream);
}
.lp-trust i { color: var(--wf-accent-light); }
.lp-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
}

/* ── Sections ────────────────────────────────────────────────── */
.lp-section { padding-block: 3.5rem; background: var(--wf-black); }
.lp-section--alt { background: var(--wf-bg); }
.lp-section-title {
    text-align: center;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 800;
    color: var(--wf-cream);
    margin-bottom: 2.5rem;
}

.lp-benefits {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .lp-benefits { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
.lp-benefit {
    background: var(--wf-panel-raised);
    border: 1px solid var(--wf-border);
    border-top: 3px solid var(--wf-accent);
    padding: 1.75rem 1.5rem;
}
.lp-benefit i { color: var(--wf-accent-light); font-size: 1.75rem; margin-bottom: .75rem; display: block; }
.lp-benefit h3 { font-size: 1.25rem; font-weight: 700; color: var(--wf-cream); margin-bottom: .5rem; }
.lp-benefit p { color: var(--wf-dim); margin: 0; font-size: .95rem; }

.lp-steps {
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: 0 auto;
    max-width: 720px;
    display: grid;
    gap: 1.25rem;
}
.lp-step { display: flex; gap: 1.25rem; align-items: flex-start; }
.lp-step-num {
    flex-shrink: 0;
    width: 2.5rem; height: 2.5rem;
    display: grid; place-items: center;
    background: var(--wf-accent);
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 1.2rem;
}
.lp-step h3 { font-size: 1.2rem; font-weight: 700; color: var(--wf-cream); margin-bottom: .25rem; }
.lp-step p { color: var(--wf-dim); margin: 0; }

/* ── Closing CTA ─────────────────────────────────────────────── */
.lp-cta {
    background: linear-gradient(135deg, var(--wf-accent-deep), var(--wf-accent));
    padding-block: 3.5rem;
    text-align: center;
}
.lp-cta h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800; color: #fff; margin-bottom: .5rem; }
.lp-cta p { color: rgba(255,255,255,.9); margin-bottom: 1.75rem; }
.lp-cta-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1.25rem; }
.lp-cta .btn-brand {
    --bs-btn-bg: #fff; --bs-btn-border-color: #fff; --bs-btn-color: var(--wf-accent-deep);
    --bs-btn-hover-bg: var(--wf-cream); --bs-btn-hover-border-color: var(--wf-cream); --bs-btn-hover-color: var(--wf-accent-deep);
}

/* ── Footer ──────────────────────────────────────────────────── */
.lp-footer { background: var(--wf-black); padding-block: 2.5rem; text-align: center; border-top: 1px solid var(--wf-border); }
.lp-footer-logo { max-width: 150px; height: auto; opacity: .9; margin-bottom: 1rem; }
.lp-footer-nap { color: var(--wf-dim); font-size: .95rem; margin-bottom: .5rem; }
.lp-footer-nap a { color: var(--wf-accent-light); text-decoration: none; }
.lp-footer-fine { color: var(--wf-muted); font-size: .8rem; margin: 0; }

/* ── Sticky mobile call bar ──────────────────────────────────── */
.lp-sticky-call {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 20;
    background: var(--wf-accent);
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .9rem;
    box-shadow: 0 -8px 24px rgba(0,0,0,.3);
}

/* ── Thank-you page ──────────────────────────────────────────── */
.lp-thanks { background: var(--wf-bg); min-height: 60vh; display: grid; place-items: center; padding-block: 4rem; }
.lp-thanks-inner { text-align: center; max-width: 600px; }
.lp-thanks-logo { display: block; max-width: 180px; height: auto; margin: 0 auto 2rem; }
.lp-thanks-icon { font-size: 3.5rem; color: var(--wf-accent-light); margin-bottom: 1rem; }
.lp-thanks h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: var(--wf-cream); margin-bottom: 1rem; }
.lp-thanks-lead { color: var(--wf-dim); font-size: 1.1rem; margin-bottom: 1rem; }
.lp-thanks-call a { color: var(--wf-accent-light); text-decoration: none; font-weight: 600; }

/* ════════════════════════════════════════════════════════════
   FORM — mirrors the main Painting site's estimate form so the
   landing form is visually identical. (Ported from site.css.)
   ════════════════════════════════════════════════════════════ */
.wf-estimate-form {
    /* Semi-transparent dark panel so the hero photo shows through; blur keeps the
       fields legible over the image. (rgba of the --wf-dark2 #272522 surface.) */
    background: rgba(39, 37, 34, .82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--wf-border);
    border-top: 4px solid var(--wf-accent);
    padding: 1.5rem 1.5rem;
    box-shadow: var(--wf-shadow);
}
.wf-estimate-form-header { margin-bottom: 1rem; }
.wf-estimate-form-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
    color: var(--wf-cream); font-size: 1.6rem; line-height: 1.15; margin: 0 0 .5rem;
}
.wf-estimate-form-sub { color: var(--wf-dim); font-size: .9rem; line-height: 1.5; margin: 0; }

.lp-form-errors {
    background: rgba(192,57,43,.15);
    border: 1px solid var(--wf-accent);
    color: var(--wf-cream);
    padding: .65rem .85rem;
    font-size: .88rem;
    margin-bottom: 1rem;
}
.lp-form-errors i { color: var(--wf-accent-light); margin-right: .4rem; }

.wf-form-field { margin-bottom: .75rem; padding: 0; border: 0; }
.wf-form-field-row { display: grid; grid-template-columns: 1fr; gap: .75rem; margin-bottom: .75rem; }
@media (min-width: 576px) { .wf-form-field-row { grid-template-columns: 1fr 1fr; } }

.wf-form-label {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    font-size: .72rem; color: var(--wf-cream); margin-bottom: .25rem;
}
.wf-form-required { color: var(--wf-accent); }

.wf-form-select {
    width: 100%;
    background: var(--wf-bg);
    border: 1px solid var(--wf-border);
    color: var(--wf-cream);
    font-family: 'Dosis', sans-serif; font-size: .92rem;
    padding: .55rem .75rem; padding-right: 2rem;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23c0392b' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat; background-position: right .75rem center;
    transition: border-color .15s ease, background-color .15s ease;
}
.wf-form-select:focus { outline: none; border-color: var(--wf-accent); }

/* Plain text/number inputs (qualifying questions of type number) */
.wf-form-input, .wf-form-textarea {
    width: 100%;
    background: var(--wf-bg);
    border: 1px solid var(--wf-border);
    color: var(--wf-cream);
    font-family: 'Dosis', sans-serif; font-size: .92rem;
    padding: .55rem .75rem;
    transition: border-color .15s ease, background .15s ease;
}
.wf-form-input:focus, .wf-form-textarea:focus { outline: none; border-color: var(--wf-accent); background: var(--wf-panel); }
.wf-form-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }

/* Radio pills (qualifying questions of type radio) */
.wf-form-radio-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 0; }
.wf-form-radio {
    position: relative; flex: 1 1 0;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .75rem;
    background: var(--wf-bg); border: 1px solid var(--wf-border);
    color: var(--wf-dim); font-size: .88rem; cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.wf-form-radio input[type="radio"] { accent-color: var(--wf-accent); width: 15px; height: 15px; flex-shrink: 0; margin: 0; }
.wf-form-radio:has(input:checked) { border-color: var(--wf-accent); color: var(--wf-cream); background: var(--wf-panel); }

/* Checkbox grid (qualifying questions of type checkboxes — e.g. the Scope field) */
.wf-form-checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .9rem; margin-top: 0; }
.wf-form-checkbox { display: flex; align-items: center; gap: .5rem; color: var(--wf-dim); font-size: .88rem; cursor: pointer; padding: .15rem 0; }
.wf-form-checkbox input[type="checkbox"] { accent-color: var(--wf-accent); width: 16px; height: 16px; flex-shrink: 0; margin: 0; }
.wf-form-checkbox em { font-style: normal; color: var(--wf-muted); font-size: .85em; }

/* Standalone checkbox (Silver Fox 65+) */
.wf-form-checkbox-solo { padding: .65rem .75rem; background: var(--wf-bg); border: 1px solid var(--wf-border); }
.wf-form-field-inline { margin-bottom: 1rem; }

/* Fieldsets share the field wrapper's rhythm + reset native chrome. */
.wf-estimate-form fieldset { margin-bottom: .75rem; padding: 0; border: 0; }

/* Floating-label inputs */
.wf-form-float { position: relative; margin-bottom: .75rem; }
.wf-form-float input,
.wf-form-float textarea {
    width: 100%;
    background: var(--wf-bg);
    border: 1px solid var(--wf-border);
    color: var(--wf-cream);
    font-family: 'Dosis', sans-serif; font-size: .92rem;
    padding: 1.2rem .8rem .35rem;
    transition: border-color .15s ease, background .15s ease;
}
.wf-form-float textarea { resize: vertical; min-height: 90px; line-height: 1.5; padding: 1.45rem .8rem .6rem; }
.wf-form-float input:focus,
.wf-form-float textarea:focus { outline: none; border-color: var(--wf-accent); background: var(--wf-panel); }
.wf-form-float input::placeholder,
.wf-form-float textarea::placeholder { color: transparent; }
.wf-form-field-row .wf-form-float { margin-bottom: 0; }

.wf-form-float label {
    position: absolute; top: 50%; left: .85rem; right: .85rem;
    transform: translateY(-50%);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--wf-muted);
    font-family: 'Dosis', sans-serif; font-size: .92rem;
    pointer-events: none;
    transition: top .15s ease, transform .15s ease, font-size .15s ease, color .15s ease, font-family .15s ease, letter-spacing .15s ease;
}
.wf-form-float:has(textarea) > label { top: 1rem; transform: none; }
.wf-form-float input:focus ~ label,
.wf-form-float input:not(:placeholder-shown) ~ label,
.wf-form-float textarea:focus ~ label,
.wf-form-float textarea:not(:placeholder-shown) ~ label {
    top: .25rem; transform: none;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
    font-size: .62rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--wf-cream);
}
.wf-form-label-hint {
    color: var(--wf-muted); text-transform: none; letter-spacing: 0;
    font-weight: 400; font-family: 'Dosis', sans-serif; font-size: .92em; margin-left: .25rem;
}

.wf-form-submit { margin-top: .5rem; padding-top: .85rem; padding-bottom: .85rem; font-size: .9rem; letter-spacing: .04em; }
.wf-form-fineprint { color: var(--wf-muted); font-size: .75rem; line-height: 1.5; text-align: center; margin: .85rem 0 0; }

/* Honeypot — off-screen, in the DOM so bots fill it. */
.wf-honeypot { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }