/*!
 * JobStorm — shared trade-page sections
 *
 * Sections 4-8 of the trade-page structure (Offer, Math, Promise, Trust,
 * Founders) render identically on /hvac, /roofing and any trade page added
 * later. The styling lives here so it cannot drift between them: change a
 * rule once and every trade page moves together.
 *
 * Depends on each page's own tokens: --navy, --navy-dark, --seafoam, --white.
 * Every trade page already defines them.
 *
 * Page-specific section styling (roofing's storm callout, HVAC's surge card)
 * stays inline on that page. Only what is genuinely shared belongs here.
 */

/* ---- hero bounce-catcher -------------------------------------------------
   The smaller-tier line under the hero CTAs. Deliberately subordinate:
   small, muted, never styled as a competing offer. */
.js-hero-alt{
  margin-top:1.1rem; font-size:.86rem; line-height:1.5;
  color:rgba(250,250,248,.44); font-family:'Inter',sans-serif;
}
.js-hero-alt a{ color:rgba(250,250,248,.60); text-decoration:underline; text-underline-offset:2px; }
.js-hero-alt a:hover{ color:var(--seafoam); }

/* ---- section 3 closer + demo hand-off ---------------------------------- */
.js-closer{
  margin:clamp(28px,3.4vw,44px) auto 0; max-width:64ch; text-align:center;
  font-size:1.06rem; line-height:1.7; color:rgba(250,250,248,.78);
}
.js-closer strong{ color:#fff; }

.js-demo{
  margin:clamp(30px,3.6vw,46px) auto 0; max-width:680px; text-align:center;
  padding:clamp(26px,3vw,36px); border-radius:16px;
  background:linear-gradient(158deg,#0f1c1c 0%,#0a1313 100%);
  border:1px solid rgba(45,212,191,.24);
}
.js-demo h3{
  font-family:'Inter',sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(1.1rem,1.7vw,1.4rem); letter-spacing:-.01em; color:#fff; margin:0 0 .7rem;
}
.js-demo p{ font-size:1rem; line-height:1.65; color:rgba(250,250,248,.72); margin:0 0 1.4rem; }

/* ---- section 4 · OFFER --------------------------------------------------
   A price block, not a wall of prose. The monthly figure is the largest thing
   in the section — larger than the headline — with the BLS comparison directly
   under it. The one-time fee is deliberately demoted into its own bordered
   inset with its own label, so the two identical $1,299 figures never read as
   a single $2,598. Founding sits apart in Dijon, which is reserved sitewide
   for founding and scarcity. Body copy is left-aligned: centred prose at this
   measure is hard to scan.
   Background image is set per page (each trade has its own photo). */
.js-offer{ padding:7rem 0; position:relative; }
.js-offer__scrim{ position:absolute; inset:0; background:rgba(5,8,8,.66); }

.js-offer__card{
  position:relative; z-index:2; max-width:620px; margin:0 auto; text-align:left;
  background:rgba(10,26,27,.86); border:1px solid rgba(45,212,191,.22);
  border-radius:14px; padding:clamp(1.9rem,3.4vw,3rem);
  backdrop-filter:blur(3px); box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
}
.js-offer__card .eyebrow{ display:block; margin-bottom:.6rem; }

/* headline is intentionally subordinate to the price figure below it */
.js-offer__h{
  font-family:'Inter',sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(1.45rem,2.8vw,2.05rem); line-height:1.04; letter-spacing:-.02em;
  color:var(--white,#fff); margin:0 0 clamp(1.4rem,2.4vw,2rem);
}

/* ---- the number ---- */
.js-price{ margin:0 0 clamp(1.5rem,2.6vw,2.1rem); }
.js-price__fig{
  display:flex; align-items:baseline; gap:.35rem; margin:0 0 .7rem; flex-wrap:wrap;
}
.js-price__amt{
  font-family:'Inter',sans-serif; font-weight:800; letter-spacing:-.045em; line-height:.88;
  font-size:clamp(3.4rem,7.6vw,5.6rem); color:var(--white,#fff);
}
.js-price__per{
  font-family:'Inter',sans-serif; font-weight:600; font-size:clamp(1rem,1.6vw,1.3rem);
  color:var(--seafoam,#2DD4BF); letter-spacing:-.01em;
}
.js-price__vs{
  margin:0 0 .65rem; font-size:1.02rem; line-height:1.6; color:rgba(250,250,248,.9);
  max-width:46ch;
}
.js-price__vs a{ color:inherit; }
.js-price__note{
  margin:0; font-size:.95rem; line-height:1.6; color:rgba(250,250,248,.62); max-width:48ch;
}

/* ---- the one-time fee, demoted and fenced off ---- */
.js-setup{
  margin:0 0 clamp(1.4rem,2.4vw,1.9rem); padding:1.05rem 1.2rem;
  background:rgba(255,255,255,.04); border:1px solid rgba(250,250,248,.12);
  border-radius:9px;
}
.js-setup__label{
  display:block; margin-bottom:.45rem; font-family:'Inter',sans-serif; font-weight:600;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(250,250,248,.5);
}
.js-setup__body{
  margin:0; font-size:.95rem; line-height:1.62; color:rgba(250,250,248,.74); max-width:52ch;
}
.js-setup__body strong{ color:rgba(250,250,248,.95); font-weight:600; }

/* ---- founding: Dijon, reserved for founding and scarcity ---- */
.js-founding{
  margin:0 0 clamp(1.4rem,2.4vw,1.9rem); padding:1.15rem 1.3rem;
  background:rgba(200,224,0,.07); border:1px solid var(--dijon,#C8E000);
  border-left-width:3px; border-radius:0 9px 9px 0;
}
.js-founding__tag{
  margin:0 0 .5rem; font-family:'Inter',sans-serif; font-weight:700;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dijon,#C8E000);
}
.js-founding__body{
  margin:0; font-size:.98rem; line-height:1.62; color:rgba(250,250,248,.86); max-width:50ch;
}
.js-founding__body strong{ color:#fff; font-weight:700; }

/* ---- closing line ---- */
.js-offer__close{
  margin:0 0 clamp(1.5rem,2.4vw,2rem); padding-top:1.3rem;
  border-top:1px solid rgba(45,212,191,.25);
  font-size:1rem; line-height:1.65; color:rgba(250,250,248,.78); max-width:52ch;
}
.js-offer__close strong{ color:#fff; }

.js-offer__cta{ font-size:1.05rem; padding:.95rem 2.2rem; }

@media (max-width:560px){
  .js-offer{ padding:4.5rem 0; }
  .js-offer__card{ padding:1.6rem 1.25rem; }
  .js-price__amt{ letter-spacing:-.035em; }
}

/* ---- tier cards ---------------------------------------------------------
   Both tiers show on every trade page. The page's primary tier carries the
   seafoam border and the "Recommended" flag; the other is present but quieter.
   Card anatomy is the same everywhere: big price, /mo beside it, the one-time
   fee as a small grey line, features as bullets, CTA inside the card. */
.js-tiers{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,28px);
  max-width:880px; margin:clamp(28px,4vw,44px) auto 0; align-items:start;
}
.js-tier{
  background:#0C1414; border:1px solid rgba(255,255,255,.09); border-radius:16px;
  padding:clamp(26px,4vw,38px); display:flex; flex-direction:column; text-align:left;
  position:relative;
}
.js-tier--primary{ border-color:rgba(45,212,191,.5); box-shadow:0 0 0 1px rgba(45,212,191,.18); }
.js-tier__flag{
  position:absolute; top:-11px; left:clamp(26px,4vw,38px);
  font-family:'Inter',sans-serif; font-weight:700; font-size:.62rem;
  letter-spacing:.16em; text-transform:uppercase; color:#08201d;
  background:var(--seafoam,#2DD4BF); padding:.3em .7em; border-radius:4px;
}
.js-tier h3{
  font-family:'Inter',sans-serif; font-weight:800; text-transform:uppercase;
  font-size:1.3rem; letter-spacing:-.01em; color:#fff; margin:0;
}
.js-tier__for{ margin:.35rem 0 0; font-size:.85rem; color:rgba(250,250,248,.55); }
.js-tier__price{
  margin-top:14px; font-family:'Inter',sans-serif; font-weight:800;
  font-size:clamp(2.2rem,4vw,3rem); line-height:1; letter-spacing:-.035em; color:#fff;
}
.js-tier__price span{
  font-family:'Inter',sans-serif; font-weight:600; font-size:.85rem;
  letter-spacing:0; color:rgba(250,250,248,.55);
}
.js-tier__build{
  font-family:'Inter',sans-serif; font-size:.85rem; color:rgba(250,250,248,.55); margin-top:6px;
}
.js-tier__vs{
  margin:.7rem 0 0; font-size:.86rem; line-height:1.5; color:rgba(250,250,248,.66);
}
.js-tier__vs a{ color:inherit; }
.js-tier ul{ list-style:none; margin:1.2rem 0 0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.js-tier li{
  position:relative; padding-left:1.4rem; font-size:.95rem; line-height:1.55;
  color:rgba(250,250,248,.78);
}
.js-tier li::before{
  content:""; position:absolute; left:0; top:.5em; width:8px; height:8px;
  border-radius:50%; border:1.5px solid var(--seafoam,#2DD4BF);
}
.js-tier .btn, .js-tier .btn-primary, .js-tier .btn-secondary{ margin-top:auto; }
.js-tier__cta{ margin-top:1.6rem; align-self:flex-start; }

@media (max-width:760px){
  .js-tiers{ grid-template-columns:1fr; }
}

/* ---- section 5 · MATH --------------------------------------------------- */
.js-math{ padding:7rem 0; background:var(--navy-dark); border-top:1px solid rgba(45,212,191,.16); }
.js-math__lead{
  max-width:64ch; margin:1.4rem auto 0; text-align:center;
  font-size:1.08rem; line-height:1.7; color:rgba(250,250,248,.72);
}
.js-math__calcwrap{ margin-top:clamp(32px,4vw,52px); }

/* The hire card supplies its own white ground and a seafoam accent edge, so it
   reads the same on a light band (/roofing) or a dark one (/hvac). Shared on
   purpose — this used to be duplicated in a roofing-only block. */
.js-hire{
  max-width:720px; margin:clamp(38px,4.5vw,60px) auto 0;
  background:linear-gradient(158deg,#FFFFFF 0%, #F1F7F5 100%);
  border:1px solid rgba(18,121,111,.28);
  border-left:3px solid #12796F;
  border-radius:0 16px 16px 0;
  padding:clamp(1.5rem,3vw,2.2rem);
  box-shadow:0 26px 54px -34px rgba(8,12,12,.5), inset 0 1px 0 rgba(255,255,255,.9);
}
.js-hire__h{
  font-family:'Inter',sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(1.05rem,1.6vw,1.3rem); letter-spacing:-.01em; color:#12796F;
  margin:0 0 1.1rem; text-align:center;
}
.js-hire__table{ width:100%; border-collapse:collapse; }
.js-hire__table th, .js-hire__table td{
  padding:.95rem 1rem; text-align:left; font-size:1rem; line-height:1.5;
  border-bottom:1px solid rgba(8,12,12,.14); color:rgba(8,12,12,.72);
}
.js-hire__table th{
  font-family:'Inter',sans-serif; font-weight:600; font-size:.74rem;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(8,12,12,.62);
}
.js-hire__table tr:last-child td{ border-bottom:0; }
.js-hire__table td:last-child{ text-align:right; white-space:nowrap; color:#080C0C; font-weight:600; }
.js-hire__table a{ color:inherit; }
.js-hire__note{ color:rgba(8,12,12,.62); font-weight:400; }  /* .5 measured 3.69:1 on the card */

.js-claims{
  max-width:64ch; margin:clamp(30px,3.4vw,42px) auto 0; text-align:center;
  font-size:1.02rem; line-height:1.72; color:rgba(250,250,248,.72);
}
.js-claims strong{ color:#fff; }
.js-claims a{ color:inherit; }

.js-pull{
  max-width:760px; margin:clamp(34px,4vw,52px) auto 0;
  padding:clamp(28px,3.4vw,42px) clamp(24px,3vw,40px);
  border-left:3px solid var(--seafoam); border-radius:0 12px 12px 0;
  background:rgba(45,212,191,.08); text-align:left;
}
.js-pull p{
  margin:0; font-family:'Inter',sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(1.5rem,3vw,2.35rem); line-height:1.06; letter-spacing:-.025em; color:var(--seafoam);
}

/* ---- the missed-call calculator, as a card ------------------------------
   The calculator shipped with a near-invisible 7-8% white hairline and its own
   near-black ground, so on a dark band it dissolved into the section behind it.
   It now uses the same card language as the tier and hire cards: #0C1414
   ground, a seafoam-tinted border, 16px radius, real padding and elevation.

   Specificity note: this stylesheet is linked in <head> BEFORE each page's
   inline <style> blocks, and those define a bare `.lcalc` / `.pcalc`. Plain
   single-class selectors here would lose on document order, so both rules are
   deliberately two-token (0,2,0).

   /hvac and /roofing run the shared lcalc; /plumbing runs its own pcalc. Both
   get the identical container so the three pages read as one system.
   The homepage does not load this sheet, so its calculator is unaffected. */
.js-math .lcalc,
.pcalc[data-calc]{
  background:#0C1414;
  border:1px solid rgba(45,212,191,.28);
  border-radius:16px;
  padding:clamp(28px,4vw,42px);
  box-shadow:0 30px 64px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
}

/* ---- section 6 · PROMISE ----------------------------------------------- */
.js-promise{ padding:6rem 0; background:var(--navy); border-top:1px solid rgba(45,212,191,.16); }
.js-promise__list{
  max-width:760px; margin:clamp(28px,3.4vw,44px) auto 0;
  display:flex; flex-direction:column; gap:1.15rem;
}
.js-promise__list p{ margin:0; font-size:1.05rem; line-height:1.7; color:rgba(250,250,248,.78); }
.js-promise__list strong{ color:#fff; }

@media (max-width:700px){
  .js-hire__table th, .js-hire__table td{ padding:.8rem .5rem; font-size:.92rem; }
  .js-pull{ border-radius:0 8px 8px 0; }
}


/* ---- light bands ---------------------------------------------------------
   The calculator and founder sections run on a light ground on every trade
   page: a dark calculator card on a dark band dissolves into it, and the
   founder photo needs the lift. Placed at the end of this file on purpose —
   these override the dark defaults defined above, so document order matters.

   Any page that wants these sections dark instead must override locally. */
.js-math,
.hv-founders{
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(45,212,191,.10) 0%, rgba(45,212,191,0) 42%),
    linear-gradient(180deg,#FAFAF8 0%, #EEF3F1 100%) !important;
  border-top:1px solid rgba(45,212,191,.16);
}

/* The eyebrow pill's base colour is the light-section one, so these revert
   to it — the opposite of what the dark js-* sections needed. */
.js-math .eyebrow{
  color:#1a4a44 !important;
  background:rgba(45,212,191,.12);
  border-color:rgba(45,212,191,.4);
}
.js-math .eyebrow::before{ background:var(--seafoam-deep); }

/* Headings on both sections carry an inline color:var(--white), so these
   have to out-rank it. */
.js-math h2,
.hv-founders h2{ color:var(--navy) !important; }
.js-math .serif-accent,
.hv-founders .serif-accent{ color:#12796F !important; }

/* ---- Math ---- */
.js-math__lead{ color:rgba(8,12,12,.68); }
.js-claims{ color:rgba(8,12,12,.68); }
.js-claims strong{ color:var(--navy); }
.js-pull{
  background:rgba(18,121,111,.10); border-left-color:#12796F;
}
/* --seafoam-deep (#1AA89A) only reaches 2.66:1 on this band, which fails even
   the large-text threshold. #12796F is the same hue at 4.74:1, so the
   pull-quote passes at any size. */
.js-pull p{ color:#12796F; }

/* The calculator is a self-contained dark panel and stays dark — that is the
   point of putting it on a light band, and it is how the homepage runs it. */

/* ---- Founders ----
   Every selector here is prefixed with .hv-founders on purpose. The trade
   pages define these same rules inline for a dark ground (#hv-page-css), and
   this stylesheet is linked BEFORE those blocks — so an equal-specificity rule
   here loses on document order and the copy renders near-white on the light
   band. The extra class outranks it. Do not "simplify" these selectors. */
.hv-founders .hv-founders__copy p{ color:rgba(8,12,12,.72); }
.hv-founders .hv-founders__photos figcaption{ color:rgba(8,12,12,.78); }
.hv-founders .hv-founders__photos figcaption strong{ color:#080C0C; }
.hv-founders .hv-founders__photos figcaption span{ color:rgba(8,12,12,.6); }
.hv-founders .hv-founders__photos img{ border-color:rgba(8,12,12,.12); }
.hv-founders .hv-founders__quote{
  background:rgba(26,168,154,.08); border-left-color:#12796F;
}
.hv-founders .hv-founders__quote p{ color:#080C0C; }
.hv-founders .hv-founders__quote cite{ color:rgba(8,12,12,.62); }