/* ── forms.css ─────────────────────────────────────────────────
   Shared by every page. Styles the newsletter follow-up, the "what
   next" step after any sign-up, and the seller enquiry. Built on the
   shell's own .nlm / .nlm-card pop-up, so it inherits the cream card,
   the close button and the field styles. */
.nlm-card.scw{max-width:640px}
.sc-kicker{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin:0 0 .6rem;display:flex;justify-content:space-between;gap:1rem;padding-right:3rem}
.nlm-card .sc-h{font-family:var(--font-display);font-size:clamp(1.45rem,1.1rem + 1.4vw,2rem);line-height:1.18;margin:0 0 .6rem;color:var(--dark);text-wrap:balance}
.sc-p{font-size:.92rem;color:rgba(15,42,53,.8);margin:0 0 1.2rem}
.sc-q{font-size:.82rem;color:var(--teal);margin:0 0 .45rem}
.sc-opts{display:grid;gap:.5rem;grid-template-columns:1fr 1fr;margin:0 0 1.1rem}
@media(min-width:560px){.sc-opts.c3{grid-template-columns:1fr 1fr 1fr}}
.sc-opt{font:inherit;font-size:.88rem;text-align:left;padding:.6rem .85rem;border-radius:10px;border:1px solid rgba(15,42,53,.18);
  background:#fff;color:var(--dark);cursor:pointer;line-height:1.3;transition:background .15s,border-color .15s}
.sc-opt small{display:block;font-size:.72rem;color:var(--teal);margin-top:.1rem}
.sc-opt:hover{border-color:var(--teal)}
.sc-opt[aria-pressed=true]{background:var(--mint);border-color:var(--teal)}
.nlm-card textarea{width:100%;margin-top:.35rem;padding:.8rem .95rem;border-radius:10px;border:1px solid rgba(15,42,53,.16);
  background:#fff;font-family:inherit;font-size:.95rem;color:var(--dark);height:84px;resize:none}
.nlm-card textarea:focus{outline:2px solid var(--mint);border-color:var(--teal)}
.sc-opt-note{font-weight:400;color:rgba(15,42,53,.6)}
.sc-row{display:grid;gap:0 .9rem;grid-template-columns:1fr}
@media(min-width:520px){.sc-row{grid-template-columns:1fr 1fr}}
.sc-prog{display:flex;gap:4px;margin:0 0 1.2rem}
.sc-prog span{flex:1;height:3px;border-radius:2px;background:rgba(15,42,53,.12)}
.sc-prog span.done{background:var(--teal)}
.sc-body{min-height:250px}
.sc-step{display:none}.sc-step.on{display:block}
.sc-nav{display:flex;align-items:center;gap:.8rem;border-top:1px solid rgba(15,42,53,.1);padding-top:1rem;margin-top:.4rem}
.nlm-card .sc-nav .btn{width:auto}
.sc-nav .sc-msg{flex:1;text-align:right;font-size:.84rem;color:#8a2c1c;margin:0}
.sc-actions{display:flex;flex-wrap:wrap;gap:.7rem 1.2rem;align-items:center;margin-top:.4rem}
.nlm-card .sc-actions .btn{width:auto}
.sc-link{background:none;border:0;padding:0;font:inherit;font-size:.88rem;color:var(--teal);text-decoration:underline;cursor:pointer}
.sc-offer{background:var(--mint-soft);border-radius:12px;padding:1.2rem 1.3rem;margin:0 0 .4rem}
.sc-offer .btn{margin-top:.2rem}
.nlm-card .sc-offer .btn{width:auto}
/* Dark buttons in these pop-ups sit on mint or cream. The site-wide hover
   (dark to teal) barely shows there, so they turn cream with dark text,
   alongside the usual label roll. */
#scm .btn-dark:hover{background:var(--mint);color:var(--dark);border-color:var(--mint)}
.sc-offer .sc-h{font-size:1.3rem}
.sc-offer p{font-size:.9rem;margin:0 0 .9rem;color:rgba(15,42,53,.85)}
.sc-done-rule{width:56px;height:3px;background:var(--mint);border-radius:2px;margin:0 0 1rem}
/* Follow-up fields that appear on the contact forms once someone says why they are here */
[data-when]:not(.sc-on){display:none}
.sc-hint{font-size:.84rem;color:var(--teal);background:var(--mint-soft);border-radius:10px;padding:.7rem .9rem;margin:0 0 1rem}
.sc-hint a{color:var(--dark)}
.sc-after{margin-top:.8rem}
/* Sell band on For Sellers, the mirror of the buyer register band */
.sell-band{background:var(--mint-soft)}
.sell-band-in{display:grid;gap:1.4rem 4rem;grid-template-columns:1fr}
@media(min-width:900px){.sell-band-in{grid-template-columns:.9fr 1.1fr;align-items:start}}
.sell-band p{max-width:62ch}
.sell-band .btn{margin-top:.6rem}
.sc-f2{margin-top:1.2rem}
/* One hover for every mint button in these pop-ups: petrol with mint text,
   as on most of the site. The home page's own CSS fades mint buttons to a
   paler mint on hover, which on a cream card barely registers. */
#scm .btn-mint:hover{background:var(--dark);color:var(--mint)}

/* ── Site-wide button hover fix (1 Oct 2026) ───────────────────
   A mint button hovers to petrol. On a petrol background that makes the
   button vanish, so on the dark parts of the site it hovers to cream
   instead: the footer newsletter box, the dark bands on the sector pages,
   and the dark "full report" card on the valuation and exit readiness pages.
   This file loads on every page after the page's own styles, so one rule
   here covers them all. The home page enquiry form's mint button faded to
   a paler mint that barely showed on cream; it now hovers petrol like the rest. */
footer .btn-mint:hover,.band-dark .btn-mint:hover,.way.dark .btn-mint:hover{background:var(--dark);color:var(--mint)}
#enquiry .btn-mint:hover{background:var(--dark);color:var(--mint)}

/* ── ONE HOVER RULE FOR EVERY BUTTON (6 Oct 2026) ──────────────────────
   Byron's rule: a button never turns white or cream on hover. Light buttons
   (mint, cream, outline-on-light) turn petrol with mint text, ringed in mint
   so they still show on petrol and teal bands. Dark and ghost buttons turn
   mint with petrol text, ringed in petrol so they still show on mint bands.
   This file loads on every page after the page's own
   styles, and !important settles the older one-off hover rules scattered
   across the builders, so a new page cannot drift from it. */
.btn-mint:hover,.btn-mint:focus-visible,.btn-cream:hover,.btn-cream:focus-visible,
.btn-line:hover,.btn-line:focus-visible,.nav a.nav-cta:hover,.nav-mobile a.nav-cta:hover,a.nav-cta:hover{
  background:var(--dark)!important;color:var(--mint)!important;border-color:var(--dark)!important;
  box-shadow:inset 0 0 0 1px var(--mint)!important}
.btn-dark:hover,.btn-dark:focus-visible,.btn-ghost:hover,.btn-ghost:focus-visible{
  background:var(--mint)!important;color:var(--dark)!important;border-color:var(--mint)!important;
  box-shadow:inset 0 0 0 1px var(--dark)!important}
.btn-ghost:hover .new-tag,.btn-ghost:focus-visible .new-tag{color:var(--dark)!important}
.social:hover,.social:focus-visible{background:transparent!important;border-color:var(--mint)!important;color:var(--mint)!important}