/* ============================================================================
   Nashvilles network — shared design system.
   Mobile-first. Written at 375px, then widened.

   --accent is substituted per site at build time, so the 24 sites share one
   engine without looking like 24 copies of each other.
   ========================================================================= */

@font-face{font-family:'Oswald';src:url(/assets/fonts/Oswald-SemiBold.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url(/assets/fonts/Barlow-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url(/assets/fonts/Barlow-SemiBold.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --accent:#1D4ED8;
  /* The accent darkened until it clears 4.5:1 on white. Identical to --accent
     for most brands; only the bright cyans and ambers move. Use this for text
     on a light background and for anything filled behind white text, and keep
     --accent for icons, rules and dark sections where the brighter tone reads
     better and the contrast requirement is lower. */
  --accent-ink:#1D4ED8;
  /* The mirror of --accent-ink for dark surfaces: the accent lifted toward
     white until it clears AA on --dark. Used by the inverted CTA band. */
  --accent-lift:#5c80e3;
  --accent-dark:#1A3FAE;
  --accent-tint:#EFF6FF;

  /* Brand kit — display face, body face, geometry. Substituted per site so
     the 24 sites differ in the things the eye actually reads a brand by,
     not just in hue. */
  --display:'Oswald';
  --display-weight:600;
  --tracking:0;
  --r:3px;
  --btn-r:3px;
  --hero-tint:0.78;
  --nav-case:uppercase;
  --nav-track:.08em;
  --header-weight:600;

  --ink:#111827;
  --ink-2:#39414D;
  --muted:#68717F;
  --paper:#FFFFFF;
  --sunk:#F3F4F6;
  --rule:#E5E7EB;
  --rule-2:#CBD3DF;
  --dark:#111827;
  --dark-2:#1F2937;

  --font:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --pad:clamp(1.25rem,5vw,2rem);
  --wide:78rem;
  --narrow:44rem;
  --tap:44px;
  --shadow:0 1px 2px rgba(14,17,22,.05),0 8px 24px -12px rgba(14,17,22,.18);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{
  font-family:var(--font);font-size:1.0625rem;line-height:1.6;color:var(--ink-2);
  background:var(--paper);-webkit-font-smoothing:antialiased;
  /* clip, never hidden — hidden makes body a scroll container and breaks
     in-page anchors and position:sticky. */
  overflow-x:clip;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent-ink);outline-offset:2px;border-radius:4px}
::selection{background:var(--accent-ink);color:#fff}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:#fff;padding:.85rem 1.25rem;font-weight:700}
.skip:focus{left:0}

.wrap{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:var(--pad)}
.narrow{max-width:var(--wide)}
.narrow>*{max-width:var(--narrow)}
section{padding-block:clamp(3rem,8vw,5.5rem)}
.sunk{background:var(--sunk)}
.dark{background:var(--dark);color:#E8EDF4}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark p{color:#A9B4C4}

h1,h2,h3,h4{font-family:var(--display),var(--font);color:var(--ink);line-height:1.06;
  letter-spacing:var(--tracking);font-weight:var(--display-weight);text-wrap:balance}
h1{font-size:clamp(2.15rem,7.2vw,3.9rem)}
h2{font-size:clamp(1.7rem,4.8vw,2.7rem);line-height:1.08}
h3{font-size:clamp(1.12rem,2.6vw,1.4rem);line-height:1.2;letter-spacing:-.015em}
h4{font-size:1.02rem;font-weight:800}
p{text-wrap:pretty}
.lede{font-size:clamp(1.06rem,2.3vw,1.28rem);line-height:1.55;color:var(--ink-2)}
.eyebrow{font-family:var(--display),var(--font);font-size:.72rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:.7rem}
.dark .eyebrow,.band .eyebrow{color:var(--accent-lift)}
.band .checks li,.band li{color:#C4CDDA}
.band .checks svg{color:var(--accent-lift)}

/* ---- Buttons ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:var(--tap);padding:.85rem 1.5rem;font-weight:800;font-size:1rem;
  font-family:var(--display),var(--font);letter-spacing:.01em;
  text-decoration:none;border:2px solid transparent;border-radius:var(--btn-r);cursor:pointer;
  transition:transform .12s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent-ink);border-color:var(--accent-ink);box-shadow:var(--shadow)}
a.btn-primary,a.btn-primary:hover,a.btn-primary:visited,button.btn-primary,.btn-primary{color:#fff}
.btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn-ghost:hover{border-color:var(--ink)}
.dark .btn-ghost,.band .btn-ghost{color:#fff;border-color:rgba(255,255,255,.42)}
.dark .btn-ghost:hover,.band .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem}
.btn-lg{font-size:1.08rem;padding:1rem 1.7rem;min-height:54px}

/* ---- Header -------------------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.93);
  backdrop-filter:saturate(1.5) blur(10px);border-bottom:1px solid var(--rule)}
.hdr-in{display:flex;align-items:center;gap:1rem;min-height:64px}
.brand{display:flex;align-items:center;flex:none;text-decoration:none;padding-block:.5rem}
/* 160/136, matching nashvilleswebdesign.com exactly. The lockup is a
   fixed-ratio image, so width alone sizes it and the height follows. The
   footer takes the same width as the header — the agency has no override and
   neither should these. */
.brand img{width:160px;height:auto;display:block}
@media (max-width:26rem){.brand img{width:136px}}
.nav{display:none;margin-left:auto;align-items:center;gap:.35rem}
/* :not(.btn) throughout — a plain `.nav a` rule has the same specificity as
   `.btn-primary` and wins on order, which painted the header's Free Estimate
   button in muted grey on its own accent at 1.59:1. */
.nav a:not(.btn){text-decoration:none;font-weight:600;font-size:.95rem;text-transform:var(--nav-case);letter-spacing:var(--nav-track);padding:.6rem .8rem;border-radius:var(--r);
  color:var(--ink-2);min-height:var(--tap);display:inline-flex;align-items:center}
.nav a:not(.btn):hover{color:var(--ink);background:var(--sunk)}
.nav a:not(.btn)[aria-current=page]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
/* Was an inline style on the markup; a rule keeps it with the rest of the
   nav metrics. */
.nav .btn{margin-left:.5rem;padding-inline:1.1rem}
/* Replaces the phone number in the header: a short statement of how fast we
   answer, or 24 hour response on the emergency trades. Not a link — there is
   nothing to click, and a fake link is worse than plain text. */
.hdr-note{display:none;align-items:center;gap:.45rem;margin-left:auto;
  font-size:.8rem;font-weight:600;letter-spacing:.02em;
  color:var(--accent-ink);min-height:var(--tap);white-space:nowrap}
.hdr-note svg{width:14px;height:14px;flex:none}
.burger{margin-left:auto;width:var(--tap);height:var(--tap);display:grid;place-content:center;gap:5px;
  background:none;border:1px solid var(--rule-2);border-radius:var(--r);cursor:pointer}
.burger span{display:block;width:19px;height:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{display:none;border-top:1px solid var(--rule);background:#fff;padding:.75rem var(--pad) 1.5rem}
.drawer.open{display:block}
.drawer a:not(.btn){display:flex;align-items:center;min-height:50px;text-decoration:none;
  font-weight:700;border-bottom:1px solid var(--rule)}
.drawer .btn{width:100%;margin-top:.9rem}
@media (min-width:62rem){
  .burger,.drawer{display:none!important}
  .nav{display:flex;margin-left:auto;order:2}
  .hdr-note{display:inline-flex;margin-left:1rem;order:3}
}

/* ---- Hero ---------------------------------------------------------------- */
.hero{position:relative;background:var(--dark);color:#fff;overflow:hidden;
  padding-block:clamp(2.5rem,8vw,4.5rem)}
.hero::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgb(0 0 0 / calc(var(--hero-tint) * 0.96)) 0%,
    rgb(0 0 0 / calc(var(--hero-tint) * 0.86)) 45%, rgb(0 0 0 / calc(var(--hero-tint) * 1.12)) 100%)}
.hero-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.hero-in{position:relative;z-index:2}
.hero h1{color:#fff;margin-bottom:.85rem}
.hero .lede{color:#C4CDDA;max-width:38ch;font-size:clamp(1.08rem,2.4vw,1.3rem)}
.hero .btn-row{margin-top:1.6rem}
.hero-trust{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:1.5rem;
  font-size:.85rem;font-weight:700;color:#A9B4C4}
.hero-trust span{display:inline-flex;align-items:center;gap:.35rem}
.hero-trust svg{width:15px;height:15px;color:var(--accent);flex:none}

/* ---- Cards / grid -------------------------------------------------------- */
.grid{display:grid;gap:1rem}
@media (min-width:40rem){.grid-2,.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:58rem){.grid-3{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1px solid var(--rule);border-radius:var(--r);
  padding:clamp(1.15rem,3vw,1.5rem);transition:border-color .18s,transform .18s,box-shadow .18s}
.card h3{margin-bottom:.45rem}
.card p{color:var(--muted);font-size:.97rem}
a.card{text-decoration:none;display:block}
a.card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
a.card:hover h3{color:var(--accent-ink)}
.card-go{display:inline-flex;align-items:center;gap:.35rem;margin-top:.9rem;
  font-weight:800;font-size:.9rem;color:var(--accent-ink)}
.sunk .card{background:#fff}
.dark .card{background:var(--dark-2);border-color:#252C35}
.dark .card p{color:#A9B4C4}

.sec-head{max-width:52rem;margin-bottom:1.6rem}
.sec-head h2{margin-bottom:.6rem}

/* ---- Checklist ----------------------------------------------------------- */
.checks{list-style:none;padding:0;display:grid;gap:.7rem}
@media (min-width:44rem){.checks{grid-template-columns:1fr 1fr;gap:.7rem 1.6rem}}
.checks li{display:grid;grid-template-columns:1.3rem 1fr;gap:.65rem;align-items:start;color:var(--ink-2)}
.checks svg{width:1.15rem;height:1.15rem;color:var(--accent-ink);margin-top:.2em;flex:none}
.dark .checks li{color:#C4CDDA}

/* ---- Problems (symptom list) --------------------------------------------- */
.problems{list-style:none;padding:0;display:grid;gap:.55rem}
@media (min-width:44rem){.problems{grid-template-columns:1fr 1fr}}
@media (min-width:64rem){.problems{grid-template-columns:repeat(3,1fr)}}
.problems li{display:flex;gap:.6rem;align-items:center;background:var(--sunk);
  border-left:3px solid var(--accent);padding:.7rem .9rem;border-radius:0 6px 6px 0;
  font-weight:700;color:var(--ink);font-size:.95rem}

/* ---- Steps --------------------------------------------------------------- */
.steps{counter-reset:s;display:grid;gap:1.1rem}
@media (min-width:52rem){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{counter-increment:s;list-style:none;position:relative;padding-top:2.6rem}
.steps li::before{content:counter(s);position:absolute;top:0;left:0;
  width:2rem;height:2rem;display:grid;place-content:center;border-radius:50%;
  background:var(--accent-ink);color:#fff;font-weight:900;font-size:.95rem}
.steps h3{margin-bottom:.35rem}
.steps p{color:var(--muted);font-size:.97rem}

/* ---- Prose --------------------------------------------------------------- */
.prose>*+*{margin-top:1.1rem}
.prose h2{margin-top:2.4rem}
.prose h3{margin-top:1.8rem}
.prose ul{padding-left:0;list-style:none}
.prose li{position:relative;padding-left:1.5rem;margin-top:.5rem;color:var(--ink-2)}
.prose li::before{content:'';position:absolute;left:.1rem;top:.62em;width:6px;height:6px;
  background:var(--accent);border-radius:50%}
.prose a:not(.btn){color:var(--accent-dark);font-weight:700}

/* ---- FAQ ----------------------------------------------------------------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding-block:1.1rem;min-height:var(--tap);font-weight:800;font-size:1.04rem;line-height:1.3;
  cursor:pointer;list-style:none;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';flex:none;width:11px;height:11px;margin-top:.45em;
  border-right:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);
  transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details[open] summary{color:var(--accent-ink)}
.faq-a{padding-bottom:1.2rem;color:var(--muted);max-width:68ch}

/* ---- Service area -------------------------------------------------------- */
.areas{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.areas span{background:var(--sunk);border:1px solid var(--rule);border-radius:999px;
  padding:.32rem .75rem;font-size:.85rem;font-weight:700;color:var(--ink-2)}
.dark .areas span{background:var(--dark-2);border-color:#252C35;color:#C4CDDA}
.county-grid{display:grid;gap:.9rem;margin-top:1.2rem}
@media (min-width:44rem){.county-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.county-grid{grid-template-columns:repeat(3,1fr)}}
.county h3{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:.3rem}
.county p{font-size:.92rem;color:var(--muted)}

/* ---- Form ---------------------------------------------------------------- */
.form{display:grid;gap:.9rem}
@media (min-width:40rem){.form{grid-template-columns:1fr 1fr}.form .full{grid-column:1/-1}}
.field{display:grid;gap:.35rem}
.field label{font-weight:800;font-size:.88rem;color:var(--ink)}
.field .opt{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;min-height:var(--tap);padding:.7rem .85rem;
  background:#fff;color:var(--ink);border:1.5px solid var(--rule-2);border-radius:8px;font-size:1rem}
.field textarea{min-height:6.5rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline-offset:1px}
.form-note{font-size:.85rem;color:var(--muted)}
.form-status{padding:.85rem 1rem;border-radius:8px;font-weight:700;font-size:.94rem;display:none}
.form-status.err{display:block;background:#FEF2F2;color:#991B1B;border:1px solid #FCA5A5}
.form-status.ok{display:block;background:var(--sunk);color:var(--ink);border:1px solid var(--rule-2)}

/* ---- CTA band ------------------------------------------------------------ */
.band{background:var(--dark);color:#fff;
  --muted:#A9B4C4;--ink-2:#C4CDDA;--rule:#252C35;--rule-2:#39414D}
.band h2{color:#fff}
.band>.wrap>p{color:#A9B4C4;max-width:52ch}

/* ---- Footer -------------------------------------------------------------- */
.ftr{background:var(--dark);color:#A9B4C4;padding-block:clamp(2.5rem,6vw,3.5rem) 1.5rem;font-size:.94rem}
.ftr-top{display:grid;gap:2rem}
@media (min-width:52rem){.ftr-top{grid-template-columns:1.5fr 1fr 1fr}}
.ftr .ftr-h{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:.9rem}
.ftr ul{list-style:none;padding:0;display:grid;gap:.05rem}
.ftr a{color:#A9B4C4;text-decoration:none;display:inline-flex;align-items:center;min-height:38px}
.ftr a:hover{color:#fff}
.ftr .brand{color:#fff}
.ftr-nap{margin-top:1rem;display:grid;gap:.15rem}
.ftr-nap a{font-weight:800;color:#fff}
.ftr-btm{margin-top:2.2rem;padding-top:1.3rem;border-top:1px solid #252C35;
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;font-size:.84rem;color:#68717F}

/* ---- Sticky mobile call bar ---------------------------------------------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:var(--rule-2);border-top:1px solid var(--rule-2);padding-bottom:env(safe-area-inset-bottom)}
.callbar a{display:flex;align-items:center;justify-content:center;gap:.45rem;min-height:56px;
  text-decoration:none;font-weight:800;font-size:1rem}
.callbar .c-tel{background:#fff;color:var(--ink)}
.callbar .c-cta{background:var(--accent-ink);color:#fff}
/* A single action rather than two. The note above it carries the promise. */
.callbar-solo{grid-template-columns:1fr;gap:0;background:var(--paper);
  border-top:1px solid var(--rule-2);padding:.5rem .9rem calc(.5rem + env(safe-area-inset-bottom))}
.callbar-solo .c-note{display:flex;align-items:center;justify-content:center;gap:.4rem;
  font-weight:700;font-size:.78rem;color:var(--accent-ink);padding:.15rem 0 .4rem}
.callbar-solo .c-note svg{width:13px;height:13px;flex:none}
.callbar-solo .c-cta{display:flex;align-items:center;justify-content:center;
  min-height:var(--tap);border-radius:var(--btn-r);font-weight:800;font-size:1rem;
  text-decoration:none}
/* Clearance for the fixed call bar. Measured at 57px, so 56px left the last
   line of the footer a pixel under it; the bar also grows with the user's
   font size, which the fixed number never accounted for. */
body{padding-bottom:calc(4.5rem + env(safe-area-inset-bottom))}
@media (min-width:60rem){.callbar{display:none}body{padding-bottom:0}}

/* ---- Utilities ----------------------------------------------------------- */
.mt-sm{margin-top:1rem}.mt-md{margin-top:1.8rem}.mt-lg{margin-top:2.6rem}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.crumbs{font-size:.82rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.crumbs a{text-decoration:none;display:inline-flex;align-items:center;min-height:26px}
.crumbs a:hover{color:var(--accent-ink)}
.hero .crumbs{color:#8B95A6}
.hero .crumbs a:hover{color:#fff}
figure.shot{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--rule)}
figure.shot img{width:100%;aspect-ratio:16/10;object-fit:cover}

/* ---- Hero surface corrections --------------------------------------------
   The hero is a dark photograph but does not carry .dark, so anything styled
   for a light surface renders invisible on it. The ghost button was doing
   exactly that — dark ink on a dark image, an outlined box with no readable
   label. Fixed here rather than at each call site. */
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.hero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
/* The accent is chosen to sit on white; over a darkened photo several of the
   kits fall below AA, so the hero eyebrow and trust row lift to white. */
.hero .eyebrow{color:#fff;opacity:.92}
.hero-trust{color:#DCE3EC}
.hero-trust svg{color:#fff}

/* Visually hidden but read by screen readers and counted by heading outlines —
   used where a section needs a heading for structure but not for the design. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Regulated-category notice. Quiet but legible — it is a disclosure, not fine
   print, so it clears AA like everything else. */
.disclosure{background:var(--sunk);border-top:1px solid var(--rule)}
.disclosure p{
  max-width:var(--wide);margin:0 auto;padding:1.1rem var(--pad);
  font-size:.82rem;line-height:1.55;color:var(--ink-2);
}

/* The agency credit in the footer of every network site. */
.ftr-credit{display:block}
.ftr-credit a{font-weight:700;color:var(--accent-lift)}
@media (min-width:48rem){.ftr-btm{flex-wrap:wrap}}

/* ---- Service cards with imagery -------------------------------------------
   The grid used to be text in a box. A photograph of the actual work is what
   makes a services list look like a company rather than a sitemap. */
a.card.card-img{padding:0;overflow:hidden;display:flex;flex-direction:column}
a.card.card-img img{
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  background:var(--sunk);transition:transform .35s ease;
}
a.card.card-img:hover img{transform:scale(1.03)}
a.card.card-img .card-body{display:flex;flex-direction:column;gap:.4rem;padding:1.05rem 1.15rem 1.2rem}
a.card.card-img h3{margin:0}
a.card.card-img p{margin:0}

/* ---- Hero lead form ------------------------------------------------------ */
/* The hero carries the form on every landing page, so the copy column has to
   give up room rather than the form shrinking to unusability. Mobile stacks
   copy first, form second — the headline still has to do the selling before
   anyone fills anything in. */
.hero-split .hero-in{display:grid;gap:clamp(1.75rem,4vw,3rem);align-items:start}
.hero-split .lede{max-width:46ch}
.hero-copy{min-width:0}

.heroform{
  background:#fff;color:var(--ink);border-radius:var(--r);
  padding:clamp(1.1rem,3.2vw,1.6rem);
  box-shadow:0 18px 44px rgb(0 0 0 / .34),0 2px 6px rgb(0 0 0 / .18);
  min-width:0;
}
.heroform-head{margin-bottom:1rem}
.heroform-kicker{
  font-size:.72rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent-ink);margin:0 0 .3rem;
}
.heroform-title{
  font-size:clamp(1.25rem,2.6vw,1.5rem);line-height:1.15;margin:0 0 .35rem;color:var(--ink);
}
.heroform-sub{font-size:.9rem;line-height:1.45;color:var(--muted);margin:0}
.heroform-form{gap:.7rem}
.heroform-form .field label{font-size:.8rem}
.heroform-form .field input,
.heroform-form .field select{padding:.6rem .75rem;font-size:.95rem}
.heroform-note{margin-top:.6rem;font-size:.78rem;line-height:1.4}
/* The status message is hidden until it has something to say; when it appears
   it must not be the white-on-white it would inherit inside the hero. */
.heroform .form-status{margin-bottom:.7rem;font-size:.88rem;padding:.65rem .8rem}

/* Below the split breakpoint the card is full width, so `.form`'s own 40rem
   two-column rule is right. Once it moves into the side column it is far
   narrower than the viewport implies — a media query cannot see that — so the
   pairing is forced off until the column is genuinely wide enough. */
@media (min-width:860px){
  .hero-split .hero-in{grid-template-columns:minmax(0,1.05fr) minmax(350px,.95fr)}
  .heroform-form{grid-template-columns:1fr}
  .heroform-form .half,.heroform-form .full{grid-column:1 / -1}
}
@media (min-width:1080px){
  .heroform-form{grid-template-columns:1fr 1fr}
  .heroform-form .half{grid-column:span 1}
  .heroform-form .full{grid-column:1 / -1}
}