@charset "utf-8";
/* ==========================================================================
   Custom Heating & Air Conditioning — personality + motion layer.

   style.css is the design system. This file is the character: texture,
   editorial typography, photo treatments, annotations, and every piece of
   motion on the site.

   Motion rules followed throughout:
     * nothing moves more than ~24px — this is a contractor, not a parallax demo
     * everything is transform/opacity only, so it stays on the compositor
     * every single effect collapses under prefers-reduced-motion
     * no effect may ever be the reason content is invisible (see .reveal
       failsafe in site.js)
   ========================================================================== */

/* ---------------------------------------------------------- texture ---- */
/* A faint mechanical grid, like a drawing sheet. Sits under light sections. */
.blueprint { position: relative; isolation: isolate; }
.blueprint::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(20,24,31,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,24,31,.045) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
}
.sec--dark.blueprint::before {
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
}

/* A red rule that draws itself in. Used above section headings. */
.rule { display: block; height: 4px; width: 64px; background: var(--brand); border-radius: 2px; margin-bottom: 1.4rem; transform-origin: left center; }
.js .reveal .rule, .js .rule.reveal { transform: scaleX(0); transition: transform .7s cubic-bezier(.2,.8,.2,1) .1s; }
.js .reveal.is-in .rule, .js .rule.reveal.is-in { transform: scaleX(1); }

/* ------------------------------------------------------ typography ----- */
/* Editorial scale — bigger, tighter, more confident than the base system. */
.display {
  font-family: var(--font-display); font-weight: 900; line-height: 1.02;
  letter-spacing: -.035em; color: var(--ink);
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
  text-wrap: balance;
}
.display em { font-style: normal; color: var(--brand); }
.display--light { color: #fff; }
.lede-xl { font-size: clamp(1.15rem, 1rem + .75vw, 1.5rem); line-height: 1.55; color: var(--ink-2); max-width: 40ch; }

/* An aside in the margin, as if pencilled in next to the copy. */
.note-aside {
  position: relative; margin: 2rem 0; padding: 0 0 0 1.4rem;
  border-left: 3px solid var(--brand-line);
  font-size: 1.02rem; font-style: italic; color: var(--ink-2); line-height: 1.6;
}
.note-aside b { font-style: normal; }

/* Big pull quote. */
.pull {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.025em;
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.4rem); line-height: 1.2;
  color: var(--ink); max-width: 22ch; margin: 0;
}
.pull--light { color: #fff; }

/* Numbered detail, like an item on an equipment schedule. */
.spec { display: flex; gap: 1rem; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.spec__n { font-family: var(--font-display); font-weight: 900; font-size: .82rem; letter-spacing: .1em; color: var(--brand); flex: none; width: 2.6rem; }
.spec__b h3 { margin: 0 0 .2em; font-size: 1.06rem; font-weight: 700; }
.spec__b p { margin: 0; font-size: .96rem; }
.sec--dark .spec { border-bottom-color: rgba(255,255,255,.12); }
.sec--dark .spec__b h3 { color: #fff; }

/* ----------------------------------------------- service page aside ---- */
/* The right-hand column of a service page's opening split. .split is a two
   column grid, and thirteen of the seventeen service pages passed no photo —
   so that column rendered as a third of the page width of white, next to six
   hundred words of copy. It now always carries something: the photograph
   where there is one, and beneath it a card of the figures the copy quotes. */
.split__aside { display: grid; gap: 1.5rem; align-content: start; }
/* Several of these photographs are portrait — one is 2268x4032 — and at the
   column's ~460px that renders 800px tall before the card below it has even
   started, which pushes the aside far past the copy it is meant to sit beside.
   A fixed crop keeps the column the same shape on all seventeen pages. */
.split__aside .split__media { margin: 0; position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.split__aside .split__media > picture { position: absolute; inset: 0; display: block; }
.split__aside .split__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 0; box-shadow: none;
}

/* Deliberately not .card — this is reference material, not a link, so it gets
   the band background and a brand rule rather than a white lifted surface. */
.fcard {
  background: var(--bg-soft);
  border: 1px solid var(--line-2); border-left: 3px solid var(--brand);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 2.2vw, 1.6rem);
}
.fcard__head { display: flex; gap: .7rem; align-items: center; margin-bottom: .3rem; }
.fcard__ico { display: inline-flex; color: var(--brand); flex: none; }
.fcard__ico svg { width: 22px; height: 22px; }
.fcard__head h3 {
  margin: 0; font-size: .82rem; font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink);
}
.fcard__rows { margin: 0; }
.fcard__row { padding: .85rem 0; border-bottom: 1px solid var(--line-2); }
.fcard__row:last-child { border-bottom: 0; padding-bottom: 0; }
.fcard__row dt {
  font-family: var(--font-display); font-weight: 800; font-size: .93rem;
  color: var(--ink); margin: 0 0 .15em;
}
.fcard__row dd { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--body); }
.fcard__foot {
  margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line-2);
  font-size: .86rem; line-height: 1.5; color: var(--muted);
}
.fcard__foot a { color: var(--brand-600); }

/* ------------------------------------------------- talk-to-us block ---- */
/* Fills the bottom of the FAQ column, which would otherwise run out about a
   third of the way down the request-service card beside it. */
.talk { border-top: 2px solid var(--ink); padding-top: 1.5rem; margin-top: 2.5rem; }
.talk h3 { font-size: 1.15rem; margin: 0 0 .9rem; }
.talk__tel {
  display: inline-flex; align-items: center; gap: .6rem; text-decoration: none;
  font-family: var(--font-display); font-weight: 900; letter-spacing: -.02em;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); color: var(--brand);
  margin-bottom: 1.1rem;
}
.talk__tel svg { width: 24px; height: 24px; flex: none; }
.talk__tel:hover { color: var(--brand-700); }
.talk__rows { margin: 0; }
.talk__rows > div { padding: .7rem 0; border-top: 1px solid var(--line); display: grid; gap: .1rem; }
@media (min-width: 560px) { .talk__rows > div { grid-template-columns: 11rem 1fr; gap: 0 1rem; } }
.talk__rows dt { font-family: var(--font-display); font-weight: 800; font-size: .9rem; color: var(--ink); }
.talk__rows dd { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--body); }

/* ----------------------------------------------------- photo styles ---- */
/* A photograph with a caption that reads like somebody wrote it, not a CMS. */
.figure { margin: 0; }
.figure img { border-radius: var(--r-lg); box-shadow: var(--sh-2); width: 100%; }
.figure figcaption {
  display: flex; gap: .6rem; align-items: flex-start;
  margin-top: .85rem; font-size: .88rem; color: var(--muted); line-height: 1.5;
}
.figure figcaption::before {
  content: ""; flex: none; width: 22px; height: 2px; background: var(--brand);
  margin-top: .62rem; border-radius: 1px;
}
.sec--dark .figure figcaption { color: #98a1ad; }

/* Overlapping collage. Their photos vary in quality; stacking them at
   different sizes reads as deliberate rather than as an inconsistent set. */
.stack { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: .9rem; }
/* Grid items default to min-width:auto, which for a cell containing an image
   resolves to that image's intrinsic width — so a 600px photo refuses to let
   its column shrink and the whole grid overflows the viewport on a phone.
   min-width:0 is what actually lets 1fr do its job. */
.stack > * { min-width: 0; }
.stack picture { display: block; width: 100%; height: 100%; }
.stack img { border-radius: var(--r); box-shadow: var(--sh-2); width: 100%; height: 100%; object-fit: cover; }
.stack__a { grid-column: 1 / 5; aspect-ratio: 4/3; }
.stack__b { grid-column: 5 / 7; aspect-ratio: 3/4; align-self: end; }
.stack__c { grid-column: 1 / 3; aspect-ratio: 1; }
.stack__d { grid-column: 3 / 7; aspect-ratio: 16/10; }
@media (max-width: 620px) {
  .stack { grid-template-columns: 1fr 1fr; }
  .stack__a, .stack__b, .stack__c, .stack__d { grid-column: auto; aspect-ratio: 1; align-self: auto; }
}

/* Red wash used on the weaker photos so the set reads as one treatment. */
.duotone { position: relative; overflow: hidden; border-radius: var(--r-lg); }
.duotone img { filter: grayscale(1) contrast(1.08); }
.duotone::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(145deg, rgba(237,28,36,.72), rgba(20,24,31,.78));
  mix-blend-mode: multiply;
}

/* Photo that wipes in from the side as it enters.
   The clip goes on the picture INSIDE the observed element, never on the
   element itself. Chromium's IntersectionObserver honours clip-path, so an
   element clipped to nothing has a zero intersection area and never reports
   as intersecting — which meant the wipe that was supposed to reveal the
   home page photographs could never be triggered, and they sat blank. */
.js .clip-in > picture, .js .clip-in > img, .js .clip-in > .clip-in__box {
  display: block; clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.65,0,.35,1);
}
.js .clip-in.is-in > picture, .js .clip-in.is-in > img, .js .clip-in.is-in > .clip-in__box { clip-path: inset(0 0 0 0); }

/* -------------------------------------------------------- the ticker --- */
/* A marquee of the towns served. Duplicated inline so the loop is seamless. */
.ticker {
  --dur: 46s;
  overflow: hidden; position: relative; padding-block: 1.15rem;
  --tk-bg: var(--ink);
  background: var(--tk-bg); border-block: 1px solid rgba(255,255,255,.1);
}
/* Edge fades in the bar's own colour. (A mask faded the whole bar, background included, so the white
   page showed through at both ends; the client flagged it 16 Oct 2026.) */
.ticker::before, .ticker::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: min(9%, 140px); z-index: 1; pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(90deg, var(--tk-bg), transparent); }
.ticker::after { right: 0; background: linear-gradient(270deg, var(--tk-bg), transparent); }
.ticker--red { --tk-bg: var(--brand); border-color: rgba(255,255,255,.22); }
.ticker__row { display: flex; width: max-content; animation: slide var(--dur) linear infinite; }
.ticker:hover .ticker__row { animation-play-state: paused; }
.ticker__row > span {
  display: inline-flex; align-items: center; gap: .8rem; padding-inline: 1.1rem;
  font-family: var(--font-display); font-weight: 800; font-size: 1.02rem;
  color: #fff; text-decoration: none; white-space: nowrap; letter-spacing: -.01em;
}
.ticker__row .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex: none; }
.ticker--red .ticker__row .dot { background: #fff; opacity: .65; }
@keyframes slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* --------------------------------------------------------- counters ---- */
.count { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- reveals ----- */
/* Base reveal lives in style.css. These are the directional variants. */
.js .r-up    { opacity: 0; transform: translate3d(0, 26px, 0); }
.js .r-left  { opacity: 0; transform: translate3d(-26px, 0, 0); }
.js .r-right { opacity: 0; transform: translate3d(26px, 0, 0); }
.js .r-scale { opacity: 0; transform: scale(.955); }
.js .r-up, .js .r-left, .js .r-right, .js .r-scale {
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
.js .r-up.is-in, .js .r-left.is-in, .js .r-right.is-in, .js .r-scale.is-in {
  opacity: 1; transform: none;
}

/* Stagger: children come in one after another. Depth capped at 10. */
.js .stagger > * { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .62s cubic-bezier(.2,.8,.2,1), transform .62s cubic-bezier(.2,.8,.2,1); }
.js .stagger.is-in > * { opacity: 1; transform: none; }
.js .stagger.is-in > *:nth-child(1) { transition-delay: .00s; }
.js .stagger.is-in > *:nth-child(2) { transition-delay: .07s; }
.js .stagger.is-in > *:nth-child(3) { transition-delay: .14s; }
.js .stagger.is-in > *:nth-child(4) { transition-delay: .21s; }
.js .stagger.is-in > *:nth-child(5) { transition-delay: .28s; }
.js .stagger.is-in > *:nth-child(6) { transition-delay: .35s; }
.js .stagger.is-in > *:nth-child(7) { transition-delay: .42s; }
.js .stagger.is-in > *:nth-child(8) { transition-delay: .49s; }
.js .stagger.is-in > *:nth-child(9) { transition-delay: .56s; }
.js .stagger.is-in > *:nth-child(n+10) { transition-delay: .63s; }

/* Headline that rises in a line at a time behind a mask. */
/* .ln is a line of a heading, with or without the animation: site.js strips
   .lines once the entrance has played, and if the block display lived only
   under .lines the two lines collapsed into one ("Real jobs,real crews."). */
.ln { display: block; }
.js .lines .ln { overflow: hidden; padding-bottom: .18em; margin-bottom: -.18em; }
.js .lines .ln > span { display: block; transform: translate3d(0, 106%, 0); transition: transform .82s cubic-bezier(.16,1,.3,1); }
.js .lines.is-in .ln > span { transform: none; }
.js .lines.is-in .ln:nth-child(2) > span { transition-delay: .09s; }
.js .lines.is-in .ln:nth-child(3) > span { transition-delay: .18s; }

/* ------------------------------------------------------- hero motion --- */
/* .hero__media will-change removed with the parallax — it kept the hero image
   on its own compositor layer for no benefit. */
.hero__pill { animation: pill-in .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pill-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
/* The dot that pulses next to "emergency service available". */
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; }
.pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--brand); animation: pulse 2.1s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes pulse { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(3.2); opacity: 0; } }

/* Scroll cue under the hero. */
.scroll-cue { display: inline-flex; flex-direction: column; align-items: center; gap: .5rem; color: #7d8794; font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.scroll-cue span { display: block; width: 1px; height: 34px; background: linear-gradient(to bottom, var(--brand), transparent); animation: cue 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0%, 100% { transform: scaleY(.35); opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } }

/* -------------------------------------------------------- card life ---- */
/* Cards lift and the red edge wipes in. Mechanical, not bouncy. */
.card--link, .svc, .prod { position: relative; overflow: hidden; }
.card--link::after, .svc::after, .prod::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--brand); transform: scaleX(0); transform-origin: left center;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.card--link:hover::after, .svc:hover::after, .prod:hover::after { transform: scaleX(1); }
.card__ico { transition: transform .45s cubic-bezier(.2,.8,.2,1), background .3s; }
.card--link:hover .card__ico { transform: translateY(-3px) rotate(-6deg); }

/* Sheen across a primary button on hover.
   `overflow:hidden` is what clips the sheen to the button — but it also drops
   the flex "automatic minimum size", which let buttons shrink below their own
   label and clip it (the dropdown footer's Call button lost its last digits).
   flex-shrink:0 puts the floor back; buttons in a flex row now wrap instead of
   squeezing. .btn--block still stretches because it sets width:100%. */
.btn { position: relative; overflow: hidden; flex-shrink: 0; max-width: 100%; }
/* flex-shrink:0 stops a button clipping its label, but a long label then
   overflows a narrow phone instead. Below 480px let the text wrap — with
   max-width:100% above, the button stays inside its container either way. */
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; }
}
.btn::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg); transition: left .6s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.btn:hover::before { left: 120%; }
.btn--ghost::before, .btn--light::before { background: linear-gradient(100deg, transparent, rgba(20,24,31,.07), transparent); }

/* ------------------------------------------------- owner's note block -- */
.note {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-left: 5px solid var(--brand); border-radius: var(--r-lg);
  padding: clamp(1.6rem, 3.5vw, 2.6rem); box-shadow: var(--sh-2);
}
.note__mark {
  position: absolute; top: -18px; right: clamp(1.4rem, 3vw, 2.4rem);
  font-family: var(--font-display); font-weight: 900; font-size: 4.5rem;
  line-height: 1; color: var(--brand-line); user-select: none;
}
.note p { font-size: 1.08rem; line-height: 1.7; }
.note__sig { display: flex; align-items: center; gap: 1rem; margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.note__sig b { display: block; font-family: var(--font-display); color: var(--ink); font-size: 1rem; }
.note__sig span span { display: block; font-size: .88rem; color: var(--muted); }  /* not the icon span */

/* -------------------------------------------------- sticky story ------- */
/* Text scrolls, the photograph stays put. Used for the sheet metal section. */
.story { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 940px) { .story { grid-template-columns: 1fr 1fr; align-items: start; } }
.story__media { position: sticky; top: calc(var(--hdr-h) + 2rem); }
@media (max-width: 939px) { .story__media { position: static; } }
.story__steps > * + * { margin-top: clamp(2.5rem, 6vw, 4.5rem); }

/* --------------------------------------------------- weather strip ----- */
/* A small live-feeling band: what the system is up against today. */
.wx { display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; align-items: center; justify-content: center; padding: 1.1rem 0; }
.wx__item { display: inline-flex; align-items: center; gap: .6rem; font-size: .92rem; color: var(--body); }
.wx__item svg { width: 19px; height: 19px; color: var(--brand); flex: none; }
.wx__item b { color: var(--ink); font-family: var(--font-display); }

/* ------------------------------------------------------ big numbers ---- */
.bignum { text-align: center; }
.bignum b {
  display: block; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(3rem, 2rem + 5vw, 6rem); line-height: .9; letter-spacing: -.05em;
  color: var(--ink);
}
.bignum--brand b { color: var(--brand); }
.bignum span { display: block; margin-top: .7rem; font-size: .88rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.sec--dark .bignum b { color: #fff; }
.sec--dark .bignum span { color: #98a1ad; }

/* Four big numbers stacked one per row made a very tall dead band on a phone.
   Always at least two across. */
.grid--stats { grid-template-columns: 1fr 1fr; }
@media (min-width: 940px) { .grid--stats { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 620px) {
  .grid--stats .bignum b { font-size: clamp(2.2rem, 1.4rem + 4vw, 3.2rem); }
  /* .74rem is 11.8px — under what a phone should be asked to read, and
     these are the labels that give the numbers their meaning. */
  .grid--stats .bignum span { font-size: .78rem; letter-spacing: .05em; }
}

/* A rescue must snap content visible, never start a wave of transitions. */
.js.reveal-off .reveal, .js.reveal-off .r-up, .js.reveal-off .r-left,
.js.reveal-off .r-right, .js.reveal-off .r-scale, .js.reveal-off .clip-in,
.js.reveal-off .clip-in > *, .js.reveal-off .stagger > *, .js.reveal-off .lines .ln > span {
  opacity: 1 !important; transform: none !important;
  clip-path: none !important; transition: none !important;
}

/* A full brand-red surface. Red was ~2% of the page; four large white
   numerals on red is a genuine moment and costs nothing. */
.sec--red { background: linear-gradient(155deg, var(--brand) 0%, var(--brand-700) 100%); color: #fff; }
.sec--red .bignum b { color: #fff; }
.sec--red .bignum span { color: rgba(255,255,255,.80); }
.sec--red h2, .sec--red h3 { color: #fff; }

/* Compact hero intercept: tighter rhythm than the full contact form. */
.cform--compact h2 { font-size: 1.3rem; margin-bottom: .2em; }
.cform--compact .hcard__lede { margin-bottom: .9rem; }
.cform--compact .radio-grid { grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-bottom: .7rem; }
.cform--compact .radio-grid label { padding: .5rem .3rem; font-size: .74rem; gap: .2rem; }
.cform--compact .radio-grid label svg { width: 18px; height: 18px; }
.cform--compact .field { margin-bottom: .65rem; }
.cform--compact .field input { padding: .68rem .8rem; }
.cform--compact .form__note { margin-top: .6rem; font-size: .78rem; }
.hcard--compact { padding: clamp(1.2rem, 2.4vw, 1.6rem); }

/* ------------------------------------------------ call-back band ------- */
/* The home-page form, on red, straight under the credentials bar. Sized like
   a form you are meant to fill in: tall inputs, two rows, the form column
   taking most of the width. The first cut squeezed four fields into one row
   and the user could not read the placeholder, let alone use it. */
.callback { padding-block: clamp(2.8rem, 5vw, 4.5rem); }
.callback__grid { display: grid; gap: 1.8rem 3rem; align-items: center; }
@media (min-width: 1000px) { .callback__grid { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); } }
.callback__lead .display { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem); margin-bottom: .5em; }
.callback__lead p { max-width: 40ch; font-size: 1.05rem; }
.callback__lead p a { color: #fff; font-weight: 800; text-decoration: underline; text-underline-offset: .2em; }
.eyebrow--light { color: #fff; }
.eyebrow--light::before { background: #fff; }
.cform--bar .radio-grid { grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-bottom: 0; }
.cform--bar .radio-grid label {
  flex-direction: row; justify-content: center; gap: .5rem; padding: .8rem .6rem; font-size: .92rem;
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.32); color: #fff;
}
.cform--bar .radio-grid label svg { width: 20px; height: 20px; flex: none; }
.cform--bar .radio-grid label:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.55); }
.cform--bar .radio-grid input:checked + label { background: #fff; border-color: #fff; color: var(--brand-700); }
.cform--bar .radio-grid input:focus-visible + label { outline: 3px solid #fff; outline-offset: 2px; }
/* Name | Phone on one row, What's-going-on | button on the next. */
.bar__row { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: end; margin-top: 1rem; }
@media (min-width: 620px) {
  .bar__row { grid-template-columns: 1fr 1fr; }
  .bar__row .field--wide, .bar__row .field--btn { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .bar__row .field--wide { grid-column: 1; }
  .bar__row .field--btn { grid-column: 2; }
}
.cform--bar .field { margin-bottom: 0; }
.cform--bar .field label { color: #fff; font-size: .95rem; margin-bottom: .45rem; }
.cform--bar .field label .req { color: #fff; opacity: .8; }
.cform--bar .field input {
  border-color: #fff; padding: 1rem 1.15rem; font-size: 1.08rem; min-height: 58px;
}
.cform--bar .field input:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(255,255,255,.45); }
.cform--bar .field__err { color: #fff; }
.cform--bar .field--err input { border-color: var(--ink); }
.cform--bar .field--btn .btn { min-height: 58px; font-size: 1.05rem; white-space: nowrap; }
.cform--bar .form__ok, .cform--bar .form__fail { background: #fff; color: var(--ink); border-color: #fff; }
.cform--bar .form__ok a, .cform--bar .form__fail a { color: var(--brand-700); }
@media (max-width: 619px) { .cform--bar .radio-grid { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------ credentials bar ------ */
/* Lifted over the hero's bottom edge. Their own logo leads. */
.cred-wrap { position: relative; z-index: 3; margin-top: -3.2rem; padding-bottom: 1rem; }
.cred {
  display: grid; grid-template-columns: 1fr;
  background: #fff; border: 1px solid #dfe4ea; border-radius: var(--r-lg);
  box-shadow: var(--sh-3); overflow: hidden;
}
@media (min-width: 720px) { .cred { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cred { grid-template-columns: 1.2fr repeat(3, 1fr); } }
.cred__cell {
  display: flex; align-items: center; gap: .9rem; padding: 1.2rem 1.2rem;
  border-top: 1px solid var(--line); min-width: 0;
}
@media (min-width: 720px) { .cred__cell { border-top: 0; border-left: 1px solid var(--line); } .cred__cell:first-child { border-left: 0; } }
.cred__cell img { height: 58px; width: auto; max-width: 118px; object-fit: contain; flex: none; }
.cred__cell--brand img { height: 70px; max-width: 160px; }
@media (min-width: 1400px) { .cred__cell img { height: 64px; max-width: 150px; } .cred__cell--brand img { height: 74px; max-width: 170px; } }
.cred__cell span { display: block; font-size: .84rem; color: var(--muted); line-height: 1.35; min-width: 0; }
.cred__cell span b { display: block; font-family: var(--font-display); font-size: .98rem; color: var(--ink); margin-bottom: .1rem; }
.cred__cell--brand { background: linear-gradient(135deg, #fff, var(--brand-soft)); border-left: 5px solid var(--brand) !important; }
@media (max-width: 719px) { .cred-wrap { margin-top: -1.5rem; } .cred__cell img { height: 52px; } }

/* ------------------------------------------------ logo watermark -------- */
/* A very large, very faint print of their own mark behind a section. */
.sec--mark, .sec--mark-light { position: relative; overflow: hidden; isolation: isolate; }
.sec--mark::after, .sec--mark-light::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -6%; top: 50%; width: min(64vw, 900px); aspect-ratio: 537 / 260;
  transform: translateY(-50%) rotate(-6deg);
  background: url(/assets/img/logo-537.png) center / contain no-repeat;
  opacity: .05;
}
.sec--mark-light::after { opacity: .07; filter: brightness(0) invert(1); }

/* ------------------------------------------------ dark section bits ---- */
.sec--dark .display, .sec--dark .display .ln > span { color: #fff; }
.sec--dark .lede-xl { color: #d4dae2; }
.sec--dark p { color: #b9c0cb; }
.sec--dark .note-aside { color: #e6eaf0; border-left-color: rgba(237,28,36,.6); }
.sec--dark .spec__b p { color: #a9b1bc; }
.sec--dark .rule { background: var(--brand); }

/* A red "plate" for headings that want a full brand surface. */
.sec--red .display { color: #fff; }
.sec--red .spec { border-bottom-color: rgba(255,255,255,.22); }
.sec--red .spec__n { color: #fff; opacity: .8; }
.sec--red .spec__b h4 { color: #fff; }
.sec--red .spec__b p { color: rgba(255,255,255,.86); }
.sec--red .lede-xl, .sec--red p { color: rgba(255,255,255,.9); }
.sec--red .note-aside { color: #fff; border-left-color: rgba(255,255,255,.55); }
.sec--red .rule { background: #fff; }
.sec--red .btn--ghost { --btn-fg: #fff; --btn-bd: rgba(255,255,255,.55); }
.sec--red .btn--ghost:hover { --btn-bg: #fff; --btn-bd: #fff; color: var(--brand-700); }
.sec--red .btn:not(.btn--ghost) { --btn-bg: #fff; --btn-fg: var(--brand-700); --btn-bd: #fff; }
.sec--red .btn:not(.btn--ghost):hover { --btn-bg: var(--ink); --btn-bd: var(--ink); color: #fff; }
/* On the call-back band the inputs are white, so the button is ink to read as the button. */
.sec--red .cform--bar .btn--ink { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); color: #fff; }
.sec--red .cform--bar .btn--ink:hover { --btn-bg: #fff; --btn-bd: #fff; color: var(--brand-700); }

/* --------------------------------------------------- reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  .js .r-up, .js .r-left, .js .r-right, .js .r-scale,
  .js .stagger > *, .js .clip-in, .js .clip-in > * {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
    transition: none !important;
  }
  .js .lines .ln > span { transform: none !important; }
  .js .rule.reveal, .js .reveal .rule { transform: none !important; }
  .ticker__row { animation: none !important; }
  .pulse::after, .scroll-cue span, .hero__pill { animation: none !important; }
  .btn::before { display: none; }
  .hero__media { transform: none !important; }
}