/* "Call Me Right Now" card (partials/callme.html) + the intro grids that hold it above the fold.
   One form, three layouts: mobile (<640) compact card right under the title; tablet (640-1023)
   full-width card under the title; desktop (>=1024) 27rem column beside the title.
   Colours come from the theme: --cta (button/accent), --cta-700, --cta-ink, --ink, --muted, --line. */
.cmn{--cmn-accent:var(--cta,#E8562A);--cmn-accent-deep:var(--cta-700,var(--cta,#C64A20));--cmn-on-accent:var(--cta-ink,#fff);--cmn-text-accent:var(--cmn-accent);
  --cmn-ink:var(--ink,#111827);--cmn-muted:var(--muted,#5B6B78);--cmn-line:var(--line,#DDE3E8);--cmn-paper:var(--mist,var(--bg-2,var(--paper,#F4F6F8)));
  --cmn-soft:#F6F3F1;--cmn-soft-line:#E6DDD8;--cmn-ok:#1F7A4D;--cmn-ok-soft:#E9F4EE;--cmn-radius:14px;
  scroll-margin-top:6rem;width:100%;font-family:var(--font-body,inherit);color:var(--cmn-ink);text-align:left}
@supports (color:color-mix(in srgb,red 50%,white)){
  .cmn{--cmn-soft:color-mix(in srgb,var(--cmn-accent) 9%,#fff);--cmn-soft-line:color-mix(in srgb,var(--cmn-accent) 24%,#fff)}
}
.cmn-form,.cmn-done{background:#fff;border-radius:var(--cmn-radius);box-shadow:0 18px 50px -24px rgba(10,20,30,.45),0 1px 0 rgba(10,20,30,.06);border:1px solid var(--cmn-line);padding:.65rem;display:grid;gap:.35rem}
.cmn [hidden],.cmn-form[hidden],.cmn-done[hidden]{display:none !important}
.cmn .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.cmn .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}
.cmn .cmn-eyebrow{margin:0;display:flex;align-items:center;gap:.45rem;font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--cmn-text-accent)}
.cmn-eyebrow::before{display:none}
.cmn-dot{position:relative;width:.6rem;height:.6rem;border-radius:999px;background:var(--cmn-accent);flex:none}
.cmn-dot::after{content:"";position:absolute;inset:-.2rem;border-radius:999px;border:2px solid var(--cmn-accent);opacity:.55;animation:cmn-ping 1.4s ease-out infinite}
@keyframes cmn-ping{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.cmn-dot::after{animation:none}}
.cmn .cmn-title{margin:0;font-family:var(--font-display,inherit);font-size:1.05rem;line-height:1.15;font-weight:800;letter-spacing:-.01em;color:var(--cmn-ink);max-width:none}
.cmn-title span{color:var(--cmn-text-accent)}

/* The ways to reach the same dispatch - one full row each, number and address always whole
   (never truncated). Phones show call + email (as helpmenow.com does); tablet and desktop add text. */
.cmn-lines{display:grid;grid-template-columns:minmax(0,1fr);gap:.4rem}
.cmn-line{display:flex;align-items:center;gap:.6rem;min-height:3rem;padding:.35rem .7rem;border-radius:12px;background:var(--cmn-soft);border:1px solid var(--cmn-soft-line);color:var(--cmn-ink);text-decoration:none;min-width:0;transition:background 120ms ease,border-color 120ms ease,transform 80ms ease}
.cmn-line:hover{filter:brightness(.98);transform:translateY(-1px)}
.cmn-line-icon{display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;flex:none;border-radius:999px;background:var(--cmn-accent);color:var(--cmn-on-accent);box-shadow:0 6px 14px -6px rgba(0,0,0,.45)}
.cmn-line-icon svg,.cmn-submit-icon svg,.cmn-progress-call svg,.cmn-done-call svg,.cmn-note svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cmn-line-text{display:grid;min-width:0;line-height:1.12;flex:1 1 auto}
.cmn-line-text small{font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cmn-muted);white-space:nowrap}
.cmn-line-text strong{font-family:var(--font-display,inherit);font-size:clamp(1rem,4.6vw,1.2rem);font-weight:800;letter-spacing:-.01em;white-space:nowrap;color:var(--cmn-ink)}
.cmn-line-go{margin-left:auto;flex:none;font-size:.78rem;font-weight:800;color:var(--cmn-text-accent);white-space:nowrap}
@media (max-width:639px){
  .cmn-line--text{display:none}
  .cmn-fine{display:none}
}
.cmn-line--mail .cmn-line-text strong{font-size:clamp(.98rem,4.3vw,1.12rem)}
@media (max-width:439px){.cmn-line--mail .cmn-line-go{display:none}}
@media (max-width:359px){.cmn-line-go{display:none}}

/* Six tracks on every size: phone 3 + email 3, address 4 + ZIP 2, what happened 6. */
.cmn-fields{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.4rem}
.cmn-field{display:block;min-width:0;grid-column:span 3;margin:0}
.cmn-field--address{grid-column:span 4}
.cmn-field--zip{grid-column:span 2}
.cmn-field--what,.cmn-field--cities{grid-column:1 / -1}
.cmn-field input,.cmn-field textarea,.cmn-field select{width:100%;font:inherit;font-size:.95rem;line-height:1.25;padding:.5rem .65rem;border-radius:10px;border:1px solid var(--cmn-line);background:#fff;color:var(--cmn-ink);transition:border-color 120ms ease,background 120ms ease;box-shadow:none;margin:0}
.cmn-field textarea{resize:none;min-height:3.1rem}
.cmn-field input::placeholder,.cmn-field textarea::placeholder{color:#7b8a93}
.cmn-field input:focus,.cmn-field textarea:focus,.cmn-field select:focus{outline:3px solid var(--cmn-soft-line);outline-offset:1px;border-color:var(--cmn-accent)}
.cmn-field.is-valid input,.cmn-field.is-valid textarea{border-color:#7cc49a;background:var(--cmn-ok-soft)}
.cmn-field.is-invalid input,.cmn-field.is-invalid textarea,.cmn-field.is-invalid select{border-color:#e08a80;background:#fbeeec}
.cmn-field--cities label{display:grid;gap:.25rem;font-size:.8rem;font-weight:700}

.cmn-consent{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:.25rem .5rem;padding:.45rem .6rem;border-radius:10px;background:var(--cmn-paper);border:1px solid var(--cmn-line)}
.cmn-consent-row{display:flex;align-items:flex-start;gap:.5rem;font-size:.74rem;font-weight:600;line-height:1.3;color:var(--cmn-muted);cursor:pointer;margin:0}
.cmn-consent-row input{margin-top:.1rem;width:1rem;height:1rem;flex:none;accent-color:var(--cmn-accent)}
.cmn-consent-more{width:1.3rem;height:1.3rem;border-radius:6px;border:1px solid var(--cmn-line);background:#fff;color:var(--cmn-muted);font:inherit;font-weight:800;line-height:1;cursor:pointer;padding:0}
.cmn .cmn-consent-full{grid-column:1 / -1;margin:0;font-size:.7rem;line-height:1.4;color:var(--cmn-muted)}
.cmn-consent-full[hidden]{display:none}
.cmn-consent-full a{color:inherit}

.cmn .cmn-error{margin:0;padding:.5rem .65rem;border-radius:10px;background:#fbeeec;border:1px solid #f0cfcb;color:#8f2d23;font-size:.8rem;font-weight:700;line-height:1.35}
.cmn-error[hidden]{display:none}
.cmn-error a{color:inherit}

.cmn-submit{display:flex;align-items:center;justify-content:center;gap:.55rem;width:100%;min-height:2.9rem;padding:.6rem 1rem;border-radius:12px;border:0;background:var(--cmn-accent);color:var(--cmn-on-accent);font-family:var(--font-display,inherit);font-size:1rem;font-weight:800;letter-spacing:.005em;cursor:pointer;box-shadow:0 12px 24px -12px rgba(0,0,0,.55);transition:background 120ms ease,transform 80ms ease}
.cmn-submit:hover{background:var(--cmn-accent-deep)}
.cmn-submit:active{transform:scale(.99)}
.cmn-submit[disabled]{opacity:.75;cursor:default}
.cmn-submit.is-busy .cmn-submit-icon{animation:cmn-spin 1s linear infinite}
.cmn-submit-icon{display:inline-flex}
.cmn-submit-icon svg{width:1.2rem;height:1.2rem}

.cmn-progress{padding:.55rem .7rem;border-radius:10px;background:var(--cmn-paper);border:1px solid var(--cmn-line);display:grid;justify-items:center;gap:.4rem}
.cmn-progress[hidden]{display:none}
.cmn .cmn-progress-line{margin:0;display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.86rem;font-weight:700;color:var(--cmn-ink);text-align:center}
.cmn-spinner{width:.9rem;height:.9rem;flex:none;border-radius:999px;border:2px solid var(--cmn-soft-line);border-top-color:var(--cmn-accent);animation:cmn-spin .9s linear infinite}
.cmn-spinner.is-done{border-color:var(--cmn-ok);animation:none}
@keyframes cmn-spin{to{transform:rotate(360deg)}}
.cmn-stop{font:inherit;font-size:.78rem;font-weight:600;padding:.35rem .7rem;border-radius:8px;border:1px solid var(--cmn-line);background:#fff;color:var(--cmn-ink);cursor:pointer}
.cmn-stop[hidden],.cmn-progress-call[hidden]{display:none}
.cmn-progress-call{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:800;color:var(--cmn-accent-deep);text-decoration:none}

.cmn .cmn-note{margin:0;display:flex;align-items:center;justify-content:center;gap:.35rem;font-size:.7rem;color:var(--cmn-muted)}
.cmn-note svg{color:var(--cmn-ok)}
.cmn .cmn-fine{margin:0;font-size:.66rem;line-height:1.35;color:var(--cmn-muted);text-align:center}
.cmn-fine a{color:inherit;font-weight:700}

.cmn-done{text-align:center;justify-items:center;padding:1.25rem 1rem;gap:.5rem}
.cmn-done-icon{width:2.75rem;height:2.75rem;color:var(--cmn-ok)}
.cmn .cmn-done-title{margin:0;font-size:1.3rem;font-family:var(--font-display,inherit)}
.cmn .cmn-done-body{margin:0;font-size:.98rem;line-height:1.45;color:var(--cmn-muted);max-width:34ch}
.cmn-done-call{display:inline-flex;align-items:center;gap:.5rem;margin-top:.25rem;padding:.6rem 1rem;border-radius:10px;background:var(--cmn-accent);color:var(--cmn-on-accent);font-weight:800;text-decoration:none}
.cmn-done-again{font:inherit;font-size:.8rem;color:var(--cmn-muted);background:none;border:0;text-decoration:underline;cursor:pointer}

/* On a dark hero the card carries its own light surface; only the shadow changes. */
.cmn--dark .cmn-form,.cmn--dark .cmn-done{border-color:rgba(255,255,255,.35);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}

/* Tablet: more room, the email and text lines show their call-to-action. */
@media (min-width:640px){
  .cmn-form{padding:1rem;gap:.55rem}
  .cmn-title{font-size:1.3rem}
  .cmn-line--mail .cmn-line-go,.cmn-line--text .cmn-line-go{display:inline}
  .cmn-line--mail,.cmn-line--text{grid-column:1 / -1}
  .cmn-field textarea{min-height:3.6rem}
  .cmn-consent-row{font-size:.78rem}
}
/* Desktop: a 27rem column beside the page title. */
@media (min-width:1024px){
  .cmn-form{padding:.9rem .9rem .75rem;gap:.4rem}
  .cmn .cmn-title{font-size:1.2rem}
  .cmn-line{min-height:2.4rem;padding:.25rem .55rem}
  .cmn-field input,.cmn-field textarea,.cmn-field select{padding:.45rem .6rem}
  .cmn-field textarea{min-height:3.2rem}
  .cmn-consent{padding:.35rem .55rem}
  .cmn-submit{min-height:2.7rem}
}

/* ---------- where the card lives: home hero + page intro --------------------------------- */
/* Phone (<640): the card comes first, right under the header, nearly full width - the whole
   form and its button above the fold with the green Call-now bar below it; the page title
   follows. Tablet (640-1023): title, then the card centred at up to 42rem. Desktop (>=1024):
   title left, card in a 28rem column right. */
.hero--callme .wrap,.page-hero--callme .wrap{display:grid !important;grid-template-columns:minmax(0,1fr) !important;grid-template-areas:"head" "card" "rest";gap:1rem !important;align-items:start !important}
.hero--callme .wrap{padding-top:clamp(1.6rem,4vw,3rem) !important;padding-bottom:clamp(1.6rem,4vw,3rem) !important}
.hero--callme .hero-head,.page-hero--callme .intro-head{grid-area:head;min-width:0}
.hero--callme .hero-card,.page-hero--callme .intro-card{grid-area:card;min-width:0;width:100%}
.hero--callme .hero-rest,.page-hero--callme .intro-rest{grid-area:rest;min-width:0}
.hero--callme .hero-head .eyebrow{margin-bottom:.5rem}
.hero--callme h1,.page-hero--callme h1{margin:0}
.hero--callme .hero-rest .lead,.page-hero--callme .intro-rest .lead{margin-top:0}
.hero--callme .trust-strip{margin-top:1rem}
.hero--callme .hero-rest .actions{display:none}
.page-hero--callme .intro-rest .actions{margin-top:.6rem}
.hero--photo.hero--callme{min-height:0;display:block;padding:0}
.page-hero--callme{padding-block:clamp(14px,2.5vw,32px) clamp(20px,3vw,40px)}
/* the card is its own surface: no theme frame around it */
.hero--callme .hero-card,.page-hero--callme .intro-card{background:none !important;border:0 !important;padding:0 !important;backdrop-filter:none !important;box-shadow:none !important}

@media (max-width:639px){
  .topbar{display:none}
  .header .wrap{min-height:58px}
  .hero--callme .wrap,.page-hero--callme .wrap{grid-template-areas:"card" "head" "rest";gap:.9rem !important;padding-left:.5rem !important;padding-right:.5rem !important}
  .hero--callme .wrap{padding-top:.5rem !important;padding-bottom:1.5rem !important}
  .page-hero--callme{padding-block:.5rem 1.25rem}
  .hero--callme .hero-head,.hero--callme .hero-rest,.page-hero--callme .intro-head,.page-hero--callme .intro-rest{padding-inline:.5rem}
  .hero--callme .hero-head .eyebrow{display:none}
  .hero--callme h1{font-size:clamp(1.5rem,6.4vw,2rem);line-height:1.1}
  .hero--callme .hero-rest .lead{font-size:1rem}
  .hero--callme .trust-strip{display:none}
  .page-hero--callme .crumbs{display:none}
  .page-hero--callme h1{font-size:clamp(1.45rem,6vw,1.9rem);line-height:1.12}
  .page-hero--callme .intro-rest .actions{display:none}
  .cmn-form{padding:.7rem .65rem .6rem;gap:.42rem}
  .cmn .cmn-title{font-size:1.15rem}
}
@media (min-width:640px) and (max-width:1023px){
  .hero--callme .hero-card,.page-hero--callme .intro-card{max-width:42rem;justify-self:center}
}
@media (min-width:1024px){
  .hero--callme .wrap,.page-hero--callme .wrap{grid-template-columns:minmax(0,1fr) 28rem !important;grid-template-rows:auto 1fr;grid-template-areas:"head card" "rest card";column-gap:3rem !important;row-gap:.75rem !important}
  .hero--callme .wrap{padding-top:clamp(2.4rem,5vw,4rem) !important;padding-bottom:clamp(2.4rem,5vw,4rem) !important}
  .hero--callme .hero-card,.page-hero--callme .intro-card{justify-self:end}
  .hero--callme .hero-rest .actions{display:flex}
}

/* ---------- prominent contact details ---------------------------------------------------- */
.topbar .contact{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.95rem}
.topbar .contact a{font-weight:800;letter-spacing:.01em}
.topbar .contact .sep{opacity:.45}
.topbar .contact .mail{font-weight:700}
@media (max-width:640px){.topbar .contact .mail,.topbar .contact .sep{display:none}}
.header .btn--cta span{letter-spacing:.01em}

/* ---------- the green Call-now bar (phones and tablets): one button, the full number --------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;padding:0 0 env(safe-area-inset-bottom);background:#15803d;box-shadow:0 -8px 24px -12px rgba(0,0,0,.45)}
.callbar-call{display:flex;align-items:center;justify-content:center;gap:.75rem;min-height:3.75rem;padding:.4rem 1rem;color:#fff !important;text-decoration:none !important;font-family:var(--font-display,inherit);font-weight:800}
.callbar-call:active{background:#126b33}
.callbar-icon{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:999px;background:#fff;color:#15803d;flex:none}
.callbar-icon svg{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.callbar-label{font-size:1.15rem}
.callbar-num{font-size:1.35rem;letter-spacing:.01em;white-space:nowrap}
@media (max-width:359px){.callbar-label{display:none}}
@media (max-width:1023px){.callbar{display:block}body{padding-bottom:calc(3.75rem + env(safe-area-inset-bottom))}}