/* ==========================================================================
   Propvider — Lead system styles (loaded on every page, after the others)
   Brand text · call-back strip · lead popup · lead forms · success state ·
   mobile action bar · sticky "free site visit" pill.
   ========================================================================== */

/* ---- Brand wordmark with tagline ---------------------------------------- */
.brand__text { display: inline-flex; flex-direction: column; line-height: 1; }
.brand__text strong { font-weight: 500; font-size: 1.45rem; letter-spacing: .005em; }
.brand__text small { margin-top: .32rem; font-family: var(--font-body); font-size: .75rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--c-accent); }
.footer-brand .brand__text strong { color: var(--c-ondark-ink); }

/* ---- Topbar phone + header button -------------------------------------------- */
.topbar__phone { display: inline-flex; align-items: center; gap: .45rem; color: #fff; font-weight: 600; letter-spacing: .04em; }
.topbar__phone svg { width: .95rem; height: .95rem; color: var(--c-accent); }
.nav .btn { cursor: pointer; }

/* ---- Footer call-back strip --------------------------------------------------- */
.footer-cta__inner { align-items: center; gap: 2rem 4rem; }
.footer-cta__text { flex: 1 1 22rem; max-width: 38rem; }
.footer-cta__text .eyebrow { margin-bottom: .9rem; }
.footer-cta h2 { font-size: var(--step-3); line-height: 1.12; color: #fff; }
.footer-cta h2 em { font-style: italic; background: var(--g-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.footer-cta p { font-size: var(--step-0); margin-top: .8rem; }
.callback { flex: 1 1 26rem; max-width: 34rem; display: grid; gap: .8rem; }
.callback__row { display: grid; grid-template-columns: 1fr 1fr auto; gap: .6rem; }
@media (max-width: 640px) { .callback__row { grid-template-columns: 1fr; } }
.callback input[type="text"], .callback input[type="tel"] {
  padding: 1rem 1.2rem; border-radius: var(--r-pill); border: 1px solid var(--glass-line);
  background: rgba(4,6,31, .45); color: #fff; min-width: 0;
}
.callback input::placeholder { color: rgba(255,255,255,.5); }
.callback input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(212,175,74,.25); }

/* ---- Fields shared by every lead form ---------------------------------------------- */
.consent { display: flex; align-items: flex-start; gap: .7rem; font-size: .78rem; line-height: 1.5; color: var(--c-ondark-ink-soft); cursor: pointer; }
.consent input { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: var(--c-accent); }
.consent a { text-decoration: underline; text-underline-offset: 2px; color: var(--c-accent); }
.lead-form__msg { padding: .7rem 1rem; border-radius: 12px; background: rgba(214, 69, 69, .16); border: 1px solid rgba(214, 69, 69, .5); color: #ffd9d9; font-size: .84rem; }
.lead-form__msg[hidden] { display: none; }
.has-error { border-color: #e26a6a !important; box-shadow: 0 0 0 3px rgba(226, 106, 106, .22) !important; }

.lead-form { display: grid; gap: 1rem; }
.lead-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px) { .lead-form__row { grid-template-columns: 1fr; } }
.lead-form .field label { color: var(--c-ondark-ink-soft); }
.lead-form .field input, .lead-form .field select {
  background: rgba(4,6,31, .5); border: 1px solid var(--glass-line); color: #fff; border-radius: 14px; padding: .9rem 1rem; width: 100%;
}
.lead-form .field select option { color: #060a33; }
.lead-form .field input::placeholder { color: rgba(255,255,255,.4); }
.lead-form .field input:focus, .lead-form .field select:focus { background: rgba(4,6,31,.7); border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(212,175,74,.25); outline: none; }
.phone { display: flex; align-items: stretch; border-radius: 14px; overflow: hidden; border: 1px solid var(--glass-line); background: rgba(4,6,31, .5); transition: border-color .2s, box-shadow .2s; }
.phone:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(212,175,74,.25); }
.phone span { display: grid; place-items: center; padding-inline: .9rem; font-weight: 600; color: var(--c-accent); border-right: 1px solid var(--glass-line); }
.lead-form .phone input { border: 0; box-shadow: none !important; background: transparent; border-radius: 0; }
.lead-form__trust { display: flex; align-items: center; gap: .55rem; font-size: .75rem; color: var(--c-ondark-ink-soft); }
.lead-form__trust svg { width: 1rem; height: 1rem; color: var(--c-accent); flex: none; }

/* ---- Success state (works on dark and light forms) --------------------------------------- */
.lead-success { display: grid; justify-items: center; gap: .9rem; text-align: center; padding: 1.5rem .5rem; color: inherit; }
.lead-success h3 { font-size: var(--step-3); color: inherit; }
.lead-success p { max-width: 36ch; opacity: .85; font-size: var(--step--1); }
.lead-success__tick { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--g-gold); color: #060a33; box-shadow: var(--glow-gold); animation: pop .6s var(--ease) both; }
.lead-success__tick svg { width: 1.8rem; height: 1.8rem; }
.lead-success__actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: .4rem; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.enquiry-card .lead-success, .contact-grid .lead-success { color: var(--c-brand-deep); }
.enquiry-card .lead-success .btn--ghost, .contact-grid .lead-success .btn--ghost { --btn-fg: var(--c-brand-deep); }

/* ---- Lead popup --------------------------------------------------------------------------------------- */
.lead-modal[hidden] { display: none; }
.lead-modal { position: fixed; inset: 0; z-index: 600; display: grid; place-items: center; padding: 1rem; opacity: 0; transition: opacity .25s var(--ease); }
.lead-modal.is-open { opacity: 1; }
.lead-modal__backdrop { position: absolute; inset: 0; background: rgba(2,3,18, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lead-modal__panel {
  position: relative; display: grid; grid-template-columns: .85fr 1.15fr; width: min(900px, 100%); max-height: calc(100dvh - 2rem); overflow: auto;
  border-radius: 30px; border: 1px solid rgba(212,175,74,.35); background: var(--g-night); color: var(--c-ondark-ink); box-shadow: 0 50px 120px -30px #000;
  transform: translateY(24px) scale(.97); transition: transform .35s var(--ease);
}
.lead-modal.is-open .lead-modal__panel { transform: none; }
@media (max-width: 760px) { .lead-modal__panel { grid-template-columns: 1fr; } .lead-modal__aside { display: none; } }
.lead-modal__close { position: absolute; top: 1rem; right: 1rem; z-index: 2; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--glass-line); color: #fff; background: rgba(255,255,255,.06); transition: all .2s var(--ease); }
.lead-modal__close:hover { background: var(--c-accent); color: #060a33; transform: rotate(90deg); }
.lead-modal__aside {
  position: relative; padding: 2.6rem 2.2rem; display: flex; flex-direction: column; gap: 1.2rem; justify-content: center;
  background:
    linear-gradient(to top, rgba(4,6,31,.9), rgba(4,6,31,.35)),
    url("../img/art-dusk.svg") center / cover no-repeat;
}
.lead-modal__aside h3 { font-size: var(--step-3); color: #fff; }
.lead-modal__aside ul { display: grid; gap: 1rem; margin-top: .4rem; }
.lead-modal__aside li { display: flex; gap: .8rem; align-items: center; font-size: var(--step--1); color: var(--c-ondark-ink); }
.lead-modal__aside li svg { flex: none; width: 2.3rem; height: 2.3rem; padding: .55rem; border-radius: 12px; background: rgba(212,175,74,.2); color: var(--c-accent); }
.lead-modal__body { padding: clamp(1.6rem, 1rem + 2.5vw, 2.8rem); display: grid; gap: 1rem; align-content: center; }
.lead-modal__body h2 { font-size: var(--step-3); color: #fff; padding-right: 2.5rem; }
.lead-modal__ctx { display: inline-block; justify-self: start; padding: .4rem .9rem; border-radius: var(--r-pill); background: rgba(212,175,74,.16); color: var(--c-accent); font-size: .8rem; font-weight: 600; }
.lead-modal__ctx[hidden] { display: none; }
body.has-modal { overflow: hidden; }

/* ---- Mobile action bar -------------------------------------------------------------------------------------- */
.mobile-cta { display: none !important; }
.action-bar { display: none; }
@media (max-width: 1023px) {
  .action-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: 1fr 1fr 1.7fr; gap: .5rem; padding: .6rem;
    padding-bottom: calc(.6rem + env(safe-area-inset-bottom)); background: rgba(4,6,31, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid rgba(212,175,74,.3);
  }
  .action-bar a, .action-bar button {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .85rem .5rem; border-radius: var(--r-pill);
    font-size: .76rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #fff; border: 1px solid var(--glass-line); background: rgba(255,255,255,.06);
  }
  .action-bar svg { width: 1.1rem; height: 1.1rem; color: var(--c-accent); }
  .action-bar .action-bar__main { background: var(--g-gold); color: #060a33; border-color: transparent; box-shadow: var(--glow-gold); }
  body.has-action-bar { padding-bottom: 4.6rem; }
  .wa-float { bottom: 5.6rem; }
}

/* ---- Sticky "free site visit" pill (desktop) ----------------------------------------------------------------- */
.lead-pill {
  position: fixed; left: 1.4rem; bottom: 1.4rem; z-index: 85; display: none; align-items: center; gap: .7rem; padding: .95rem 1.5rem; border-radius: var(--r-pill);
  background: var(--g-gold); color: #060a33; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; box-shadow: var(--glow-gold), 0 18px 40px -14px rgba(0,0,0,.5);
  transform: translateY(160%); transition: transform .5s var(--ease);
}
@media (min-width: 1024px) { .lead-pill { display: inline-flex; } }
.lead-pill.is-on { transform: none; }
.lead-pill:hover { transform: translateY(-3px); }
.lead-pill__dot { width: .55rem; height: .55rem; border-radius: 50%; background: #060a33; animation: ping2 1.8s ease-out infinite; }
@keyframes ping2 { 0% { box-shadow: 0 0 0 0 rgba(6,10,51,.5); } 100% { box-shadow: 0 0 0 10px rgba(6,10,51,0); } }
@media (prefers-reduced-motion: reduce) { .lead-pill__dot { animation: none; } .lead-modal, .lead-modal__panel { transition: none; } }

/* ---- [hidden] must win over display:grid on forms; consent on light forms ---- */
form[hidden], .lead-form[hidden], .callback[hidden] { display: none !important; }
.form .consent, .enquiry-card .consent, .contact-grid .consent { color: var(--c-ink-soft); }
.form .consent a, .enquiry-card .consent a, .contact-grid .consent a { color: var(--c-brand); }
.enquiry-card .lead-form__msg, .contact-grid .lead-form__msg { color: #8a2a2a; background: #fbe9e9; border-color: #e9b4b4; }
.form .lead-form__msg { margin-top: .4rem; }
/* ---- Brand logo (real Propvider logo; white version on the dark header/footer) ---- */
.brand { gap: 0; }
.brand__logo { display: block; height: 4.1rem; width: auto; max-width: none; }
@media (max-width: 1023px) { .brand__logo { height: 3.2rem; } }
.footer-brand .brand__logo { height: 5rem; }
.footer-brand .brand { margin-bottom: 1.2rem; }