/* Centred hero on the brighter-night base. One centre axis for the copy: two-line H1, slogan between the
   torch's collar stripes, area line, three promises, two buttons; two small Google and BBB glass chips float off-grid. Real marks only.
   Spacing scale 12 / 18 / 24 / 32. Motion: the H1 words rise in turn, "Heating & Cooling" carries a slow flame
   shimmer, the photo drifts (site), the glass chips pop in, float and follow the pointer a little,
   the founder chip fades up. All off under reduced motion. */

.hero--c { background: #0A1C2E; padding-bottom: 112px; }
.hero--c .hero__bg img { object-position: 50% 60%; }
.hero--c .hero__bg::after { background:
  radial-gradient(50% 58% at 50% 52%, rgba(8, 24, 41, .82) 0%, rgba(8, 24, 41, .56) 58%, rgba(8, 24, 41, .12) 100%),
  linear-gradient(180deg, rgba(8, 24, 41, .62) 0%, rgba(10, 32, 56, .34) 42%, rgba(8, 22, 38, .9) 100%); }
.hero--c::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hc2 { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; padding-block: 104px 40px; }

/* ---------- two small glass chips, placed off-grid ----------
   Frosted glass over the street photo: a light-to-clear fill, a 16 px blur, a bright top edge, a gradient rim, a flame
   glow behind Google and an ice glow behind BBB. Not mirrored: the Google chip rides above the end of the headline,
   tilted up; the BBB chip sits beside the buttons on the other side, tilted down. Each floats on its own rhythm and
   drifts a little against the pointer. Positions are measured from the centre line, so they stay by the copy. */
.hc2__float { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.glass { position: absolute; display: block; pointer-events: auto; color: #F7F9FB; text-align: left; text-decoration: none; border-radius: 16px;
  rotate: var(--tilt, 0deg); translate: calc(var(--px, 0) * var(--dx, -10px)) calc(var(--py, 0) * var(--dy, -8px));
  transition: translate .7s cubic-bezier(.2, .8, .2, 1), scale .3s var(--ease), rotate .4s var(--ease); }
.glass:hover { scale: 1.05; rotate: 0deg; }
.glass:focus-visible { outline: 3px solid #F7F9FB; outline-offset: 4px; }
.glass--g { left: calc(50% + 170px); top: 18px; --tilt: 4deg; --dx: -14px; --dy: -10px; animation: hc-pop .7s .9s var(--ease) both; }
.glass--b { right: calc(50% + 250px); bottom: 40px; --tilt: -3deg; --dx: -8px; --dy: -12px; animation: hc-pop .7s 1.15s var(--ease) both; }
.glass::before { content: ""; position: absolute; inset: 0 -10% -34%; z-index: -1; border-radius: 50%; filter: blur(22px); opacity: .55; pointer-events: none; }
.glass--g::before { background: radial-gradient(closest-side, rgba(240, 100, 30, .65), transparent); }
.glass--b::before { background: radial-gradient(closest-side, rgba(30, 136, 214, .75), transparent); }
.glass__in { position: relative; display: flex; align-items: center; overflow: hidden; border-radius: inherit;
  background: linear-gradient(145deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .1) 46%, rgba(255, 255, 255, .06) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 22px 40px -22px rgba(0, 0, 0, .85), 0 8px 18px -12px rgba(0, 0, 0, .55);
  animation: hc-float 6.5s ease-in-out infinite; }
.glass--b .glass__in { animation-duration: 8s; animation-delay: -2.6s; }
.glass__in::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .1) 36%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.glass__shine { position: absolute; inset: -60% -60%; z-index: 1; pointer-events: none; background: linear-gradient(112deg, transparent 44%, rgba(255, 255, 255, .28) 50%, transparent 56%); transform: translateX(-70%); animation: hc-sheen 9s 2.4s ease-in-out infinite; }
.glass--b .glass__shine { animation-delay: 6.9s; }

/* Google chip: the G on a white disc, the score with the five stars, the line */
.glass--g .glass__in { gap: 10px; padding: 8px 16px 8px 8px; }
.glass__logo { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #FFFFFF; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .7); }
.glass__logo svg { width: 22px; height: 22px; }
.glass__txt { display: grid; gap: 3px; }
.glass__row { display: flex; align-items: center; gap: 8px; }
.glass__val { font: 900 20px/1 var(--fh); letter-spacing: -.02em; color: #FFFFFF; }
.glass--g .stars { color: #FBBC04; font-size: 14px; gap: 1px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.glass__lbl { font: 500 14px/1.15 var(--fh); color: rgba(247, 249, 251, .88); white-space: nowrap; }

/* BBB chip: Nero's own seal, white-text version, unaltered (250 px file shown at 200 px for sharpness) */
.glass--b .glass__in { padding: 8px 10px; }
.glass--b img { display: block; width: 200px; height: 42px; }

@keyframes hc-pop { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes hc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes hc-sheen { 0%, 72% { transform: translateX(-70%); } 100% { transform: translateX(70%); } }

/* the headline: two lines, the flame line larger */
.hc2__h { margin-top: 0; display: grid; gap: 6px; font-family: var(--fh); text-wrap: balance; }
.hc2__l1 { font: 900 88px/.98 var(--fh); letter-spacing: -.04em; }
.hc2__h .w { display: inline-block; animation: hc-word .7s var(--ease) both; animation-delay: calc(var(--w) * 70ms); }
/* line 1 = the torch hinge (H1 lab winner): "Heating" lit flame, "Cooling" lit ice, the "&" is the torch itself
   (flame loop on top, a bright collar across its neck, ice bowl below); descenders fully painted; one light sheen
   passes once after the words rise. Lab: options/h1-lab/torch-hinge.html */
/* TORCH HINGE. "Heating" is lit flame, "Cooling" is lit ice, and the "&" is the torch: flame loop on top, a bright collar
   across its neck, ice bowl below. Word box geometry (em, from the top of each word box): caps .12, x-height .31,
   neck of the "&" .443, baseline .84, tail of the g 1.06. */
.hc2__l1 {
  position: relative; isolation: isolate;
  --neck: .443em; --band: max(1px, .018em);
  --heat: #FFB27A .10em, #FF8848 .31em, #F7702A .50em, #F0641E .68em, #EC5C1E .86em, #F26A27 1.08em;
  --ice: #C9E8FC .10em, #9CD0F2 .31em, #5FB3EC .50em, #3A9FE6 .68em, #2F95DF .86em, #3E9FE4 1.08em;
  --collar: #FFF5EE;
}
/* a soft night shade behind the line, so every letter keeps 3:1 even over the bright van panel on phones */
.hc2__l1 .hc2__shade { position: absolute; z-index: -1; inset: -.5em -.6em -.45em; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 62% at 27% 52%, rgba(14, 10, 10, .5), rgba(14, 10, 10, 0)),
    radial-gradient(ellipse 46% 62% at 73% 52%, rgba(4, 14, 26, .5), rgba(4, 14, 26, 0)); }
.hc2__l1 .w {
  display: inline-block;
  padding-bottom: .14em; margin-bottom: -.14em; /* the box now reaches below the g tails, so they are painted; the line box does not grow */
  color: transparent; -webkit-background-clip: text; background-clip: text; background-repeat: no-repeat;
  filter: drop-shadow(0 .03em .04em rgba(3, 10, 18, .45));
  animation: hc-word .7s var(--ease) both, hc-sheen var(--sdur) linear both;
  animation-delay: calc(var(--w) * 70ms), var(--sd);
}
.hc2__l1 .w--heat, .hc2__l1 .w--cool {
  background-image: linear-gradient(105deg, transparent calc(50% - 1em), var(--sheen) 50%, transparent calc(50% + 1em)), linear-gradient(180deg, var(--base));
  background-size: 6em 100%, 100% 100%; background-position: -6em 0, 0 0;
}
.hc2__l1 .w--heat { --base: var(--heat); --sheen: rgba(255, 236, 222, .5); --sd: .95s; --sdur: 1.35s; }
.hc2__l1 .w--cool { --base: var(--ice); --sheen: rgba(240, 250, 255, .5); --sd: 1.59s; --sdur: 1.34s; }
.hc2__l1 .w--amp { --sd: 1.47s; --sdur: .95s; animation-name: hc-word, hc-sheen-amp;
  background-image:
    linear-gradient(105deg, transparent calc(50% - 1em), rgba(255, 246, 240, .5) 50%, transparent calc(50% + 1em)),
    linear-gradient(180deg, transparent calc(var(--neck) - var(--band)), var(--collar) calc(var(--neck) - var(--band)) calc(var(--neck) + var(--band)), transparent calc(var(--neck) + var(--band))),
    linear-gradient(180deg, var(--heat)),
    linear-gradient(180deg, var(--ice));
  background-size: 6em 100%, 100% 100%, 100% calc(var(--neck) - var(--band)), 100% 100%;
  background-position: -6em 0, 0 0, 0 0, 0 0;
}
@keyframes hc-sheen { from { background-position: -6em 0, 0 0; } to { background-position: calc(100% + 6em) 0, 0 0; } }
@keyframes hc-sheen-amp { from { background-position: -6em 0, 0 0, 0 0, 0 0; } to { background-position: calc(100% + 6em) 0, 0 0, 0 0, 0 0; } }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hc2__l1 .w { color: #F7702A; background: none; } .hc2__l1 .w--cool { color: #5FB3EC; }
}
@media (forced-colors: active) { .hc2__l1 .w { color: CanvasText; background: none; filter: none; } .hc2__l1 .hc2__shade { display: none; } }
.hc2__l2 { font: 700 50px/1.08 var(--fh); letter-spacing: -.025em; color: #F7F9FB; }
@keyframes hc-word { from { opacity: 0; transform: translateY(.42em); } to { opacity: 1; transform: none; } }
@keyframes hc-shimmer { from { background-position: 100% 0; } to { background-position: -140% 0; } }

/* the slogan between the torch's collar stripes (flame over ice) */
.hc2__claim { display: inline-flex; align-items: center; gap: 16px; margin-top: 24px; font: 700 24px/1.25 var(--fh); color: #F7F9FB; }
.collar { flex: none; width: 44px; height: 11px; border-radius: 2px; background: linear-gradient(90deg, #E8541F, #F58A3C) top / 100% 4px no-repeat, linear-gradient(90deg, #1E88D6, #9CD0F2) bottom / 100% 4px no-repeat; }
.collar:last-child { transform: scaleX(-1); }

.hc2__area { display: block; max-width: 700px; margin-top: 18px; font-size: 17px; line-height: 1.6; color: rgba(247, 249, 251, .84); text-wrap: balance; }
.hc2__area .dt { display: inline-block; width: 21px; height: 21px; margin: 0 6px 0 0; vertical-align: -4px; color: #F58A3C; --d2: #F58A3C; --d2o: .35; }

.hc2__checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 24px; font: 700 16px/1.3 var(--fh); color: #F7F9FB; }
.hc2__checks li { display: inline-flex; align-items: center; gap: 10px; }
.cd { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #3A9FE6, #1E88D6 50%, #0E67A8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 14px -6px rgba(30, 136, 214, .95); color: #fff; font-size: 14px; }
.cd .i { stroke: currentColor; stroke-width: 6px; }

.hero--c .actions { justify-content: center; margin-top: 32px; }


/* trust bar: a blue gradient band (Shoaib), white values, light-ice labels, glass icon discs with white duotone icons
   (flame or ice second tone), the real Google G on its white disc, the flame-to-ice seam kept on top */
.bar { --line: rgba(247, 249, 251, .16); background: linear-gradient(120deg, #1670B8 0%, #0E67A8 46%, #0A4F80 100%);
  box-shadow: 0 40px 70px -38px rgba(8, 40, 76, .8), inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(255, 255, 255, .1); }
.bar::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 140% at 12% 0, rgba(255, 255, 255, .14), transparent 60%), radial-gradient(40% 120% at 100% 100%, rgba(240, 100, 30, .14), transparent 70%); }
.bar li { position: relative; z-index: 1; color: #E3F1FB; }
.bar b { color: #FFFFFF; }
.dt { fill: currentColor; }
.d2 { fill: var(--d2, currentColor); opacity: var(--d2o, .2); }
.bar .badge { width: 48px; height: 48px; font-size: 24px; background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24), inset 0 1px 0 rgba(255, 255, 255, .3); color: #FFFFFF; --d2: #FFB47A; --d2o: .55; }
.bar .badge--ice { color: #FFFFFF; --d2: #9CD0F2; --d2o: .6; }
.bar .badge--g { background: #FFFFFF; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .5); }
.bar .badge .gg { width: 24px; height: 24px; }

/* the top line: orange only (Shoaib) */
.bar::before { z-index: 2; background: linear-gradient(90deg, #C4411A 0%, #E8541F 26%, #F0641E 62%, #F58A3C 100%); }

/* the torch: Nero's own mark at the bar's right corner, rising out of the top edge like the logo (flame above the
   edge, icicles below), no medallion, a minor glow (Shoaib). The bar keeps its earlier size and layout. */
.bar-shell { position: relative; }
.bar__seal { position: absolute; z-index: 3; pointer-events: none; right: 22px; top: -52px; width: 36px; height: 91px; animation: bs-pop .7s .35s var(--ease) both; }
.bar__seal svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 5px rgba(240, 100, 30, .55)) drop-shadow(0 0 12px rgba(156, 208, 242, .28)); }
.bar__seal .bs-f { transform-origin: 50% 100%; transform-box: fill-box; animation: bs-flick 3.4s ease-in-out infinite; }
@keyframes bs-flick { 0%, 100% { transform: none; } 35% { transform: scale(.97, 1.04) skewX(-1.5deg); } 70% { transform: scale(1.02, .98) skewX(1deg); } }
@keyframes bs-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bar-shell .bar { padding-right: 64px; }

/* two lines everywhere (Shoaib): the value on one line, the label on one line, never wrapping. The columns follow
   the room: five across from 1200 px, three from 900 px, two from 768 px, one per row on phones. */
.bar-shell .bar li > span:last-child { white-space: nowrap; }
.bar-shell .bar li { gap: 12px; }
.bar-shell .bar .badge { width: 44px; height: 44px; font-size: 22px; }
.bar-shell .bar .badge .gg { width: 22px; height: 22px; }
.bar-shell .bar b { font-size: 17px; }
.bar-shell .bar li { font-size: 14px; }
@media (min-width: 1200px) {
  .bar-shell .bar { grid-template-columns: repeat(5, minmax(max-content, 1fr)); }
  .bar-shell .bar li { justify-content: center; padding: 20px 10px; }
  .bar-shell .bar li + li { border-left: 0; }
  .bar-shell .bar li + li::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 1px; background: rgba(247, 249, 251, .2); }
}
@media (max-width: 1199px) {
  .bar-shell .bar { padding-right: 52px; }
  .bar__seal { right: 16px; top: -44px; width: 30px; height: 76px; }
  .bar-shell .bar li { padding: 18px 18px; }
}
@media (min-width: 768px) and (max-width: 899px) {
  .bar-shell .bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bar-shell .bar li { border-left: 0; border-top: 0; }
  .bar-shell .bar li:nth-child(2n) { border-left: 1px solid var(--line); }
  .bar-shell .bar li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 767px) {
  .bar-shell .bar { grid-template-columns: 1fr; padding-right: 0; }
  .bar-shell .bar li { min-height: 60px; padding: 10px 16px !important; border-left: 0 !important; border-top: 0 !important; }
  .bar-shell .bar li + li { border-top: 1px solid var(--line) !important; }
  /* (the first-cell clearance for the corner torch is gone with the torch) */
  .bar-shell .bar .badge { width: 38px; height: 38px; font-size: 19px; }
  .bar-shell .bar .badge .gg { width: 19px; height: 19px; }
  .bar-shell .bar b { font-size: 16px; }
  .bar__seal { right: 12px; top: -33px; width: 22px; height: 56px; }
}

/* ---------- Who Are We: the founder's line on a dark card with his real photo; a light About Us button ---------- */
.who .quotebox--dark { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 22px; align-items: center; padding: 26px 30px 26px 24px; border: 0; border-left: 4px solid var(--orange); border-radius: 16px; overflow: hidden;
  background: radial-gradient(120% 150% at 0% 0%, rgba(240, 100, 30, .2), transparent 55%), radial-gradient(90% 130% at 100% 100%, rgba(30, 136, 214, .22), transparent 60%), linear-gradient(135deg, #14293F 0%, #0B1622 100%);
  box-shadow: 0 30px 60px -34px rgba(11, 22, 34, .7), inset 0 1px 0 rgba(255, 255, 255, .08); }
.who .quotebox__face { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; box-shadow: 0 0 0 3px #0B1622, 0 0 0 5px #F0641E, 0 14px 26px -10px rgba(0, 0, 0, .65); }
.who .quotebox--dark .quotebox__mark { left: auto; top: auto; right: 18px; bottom: 6px; font-size: 52px; color: #F0641E; opacity: .16; }
.who .quotebox--dark blockquote { position: relative; }
.who .quotebox--dark blockquote p { font: 700 21px/1.35 var(--fh); color: #F7F9FB; }
.who .quotebox--dark figcaption { margin-top: 10px; color: rgba(247, 249, 251, .74); }
.who .quotebox--dark figcaption b { color: #FFFFFF; }
/* About Us: a plain text link before the founder card, the arrow in flame orange */
.who .who__more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 14px; font: 700 17px/1 var(--fh); color: var(--blue-ink); text-decoration: none; }
.who .who__more .arr { display: inline-flex; color: var(--dorange); transition: transform .2s var(--ease); }
.who .who__more:hover, .who .who__more:focus-visible { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.who .who__more:hover .arr, .who .who__more:focus-visible .arr { transform: translateX(4px); }
.who .who__more + .quotebox { margin-top: 18px; }
@media (max-width: 767px) {
  .who .quotebox--dark { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 20px 18px 20px 16px; }
  .who .quotebox__face { width: 64px; height: 64px; }
  .who .quotebox--dark blockquote p { font-size: 18px; }
  .who .quotebox--dark .quotebox__mark { display: none; }
}

/* ---------- Services: one card anatomy, the same in every card (Shoaib: "consistency and much more perfection") ----------
   Six rows in every card, aligned across the row with CSS subgrid: photo, icon disc, title (one line at every width),
   three lines of the Notion paragraph (the full text stays in the page), one identical full-width button, the Services
   toggle. The service links open in a drawer over the card, so a card never grows taller than its neighbours.
   Icons: solid equipment glyphs (MDI, Shoaib's pick B), white on solid discs: AC ice blue, heating flame orange, air
   quality green, water heaters red (Precision's approved scheme in Nero's blue and orange). Radius: cards 16, button 12 (the site's button radius), discs round. */
.services .card__photo { position: relative; aspect-ratio: 16 / 11; }
.services .card__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 56%, rgba(11, 22, 34, .34) 100%); }
.services .card__photo img { transition: transform 600ms var(--ease), filter .3s var(--ease); }
.services .card__body { padding: 14px 22px 14px; }

/* the icon disc */
.services .card > .svc-ic { position: relative; z-index: 1; justify-self: start; align-self: start; width: 60px; height: 60px; margin: -30px 0 0 22px; display: grid; place-items: center; border-radius: 50%;
  color: #FFFFFF; --d2: #FFFFFF; --d2o: .32; background: linear-gradient(145deg, #F7934A 0%, #F0641E 48%, #C4411A 100%);
  box-shadow: 0 0 0 5px var(--card), 0 16px 28px -12px rgba(196, 65, 26, .6); transition: transform .3s var(--ease); }
.services .card > .svc-ic--ice { background: linear-gradient(145deg, #5FB3EC 0%, #1E88D6 48%, #0E67A8 100%); box-shadow: 0 0 0 5px var(--card), 0 16px 28px -12px rgba(14, 103, 168, .6); }
.services .card > .svc-ic--air { background: linear-gradient(145deg, #5FCF86 0%, #2E9E5B 50%, #1E7A43 100%); box-shadow: 0 0 0 5px var(--card), 0 16px 28px -12px rgba(30, 122, 67, .6); }
.services .card > .svc-ic--water { background: linear-gradient(145deg, #F27272 0%, #D63A3F 50%, #A8202A 100%); box-shadow: 0 0 0 5px var(--card), 0 16px 28px -12px rgba(168, 32, 42, .6); }
.services .svc-ic .eq { width: 30px; height: 30px; fill: currentColor; }
.services .card:hover > .svc-ic { transform: translateY(-3px); }

/* title: one line in every card at every width (the size eases between 18 and 20 px with the card width) */
.services .card__body .h3 { font: 900 20px/1.2 var(--fh); letter-spacing: -.005em; color: var(--night); }
@media (min-width: 1200px) { .services .card__body .h3 { font-size: clamp(18px, 1.42vw, 20px); } }
@media (max-width: 767px) { .services .card__body .h3 { font-size: 18px; } }

/* three lines of the paragraph in every card */
.services .card__body > p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(3 * 1.55em); margin-top: 6px; font-size: 15px; line-height: 1.55; }

/* one button for every card: full width, label left, arrow right */
.services .card__more { display: flex; align-items: center; justify-content: space-between; gap: 10px; align-self: stretch; min-height: 46px; margin-top: 16px; padding: 0 16px 0 18px; border-radius: var(--rb); background: var(--night); color: #F7F9FB; font: 700 16px/1 var(--fh); text-decoration: none; transition: background-color .2s var(--ease); }
.services .card__more .i { flex: none; font-size: 18px; color: #F58A3C; transition: transform .2s var(--ease), color .2s; }
.services .card__more:hover, .services .card__more:focus-visible { background: var(--blue-ink); color: #FFFFFF; text-decoration: none; }
.services .card__more:hover .i, .services .card__more:focus-visible .i { transform: translateX(4px); color: #FFFFFF; }

/* the Services toggle and its drawer */
.card__svc { position: static; margin-top: 12px; border-top: 1px solid var(--line); }
.card__svc > summary { position: relative; z-index: 4; display: flex; align-items: center; gap: 10px; min-height: 48px; list-style: none; cursor: pointer; font: 700 15px/1 var(--fh); color: var(--ink); }
.card__svc > summary::-webkit-details-marker { display: none; }
.card__svc > summary:hover { color: var(--blue-ink); }
.card__n { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--tint-ice); color: var(--blue-ink); font: 700 14px/1 var(--fh); }
.card__svc > summary .i { margin-left: auto; font-size: 18px; color: var(--muted); transform: rotate(180deg); transition: transform .25s var(--ease); }
.card__svc[open] > summary .i { transform: none; }
/* the open list: a full panel over the card (photo to toggle), the card's title as its header; same in every card */
.card__svc > .list { position: absolute; z-index: 3; left: 0; right: 0; top: 0; bottom: 63px; overflow-y: auto; margin: 0; padding: 22px 22px 8px; border-top: 0;
  background: radial-gradient(120% 60% at 0% 0%, rgba(30, 136, 214, .07), transparent 60%), var(--card); box-shadow: inset 0 -1px 0 var(--line); }
.card__svc > .list::before { content: attr(data-title); content: attr(data-title) / ""; display: block; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 2px solid var(--orange); font: 900 15px/1.25 var(--fh); letter-spacing: .04em; text-transform: uppercase; color: var(--night); }
.card__svc > .list li + li { border-top: 1px solid var(--line); }
.card__svc > .list a { justify-content: flex-start; }
.card__svc > .list a::after { content: ""; margin-left: auto; width: 8px; height: 8px; flex: none; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); opacity: 0; transition: opacity .2s, transform .2s var(--ease); }
.card__svc > .list a:hover::after, .card__svc > .list a:focus-visible::after { opacity: 1; transform: translateX(3px) rotate(45deg); }
.card__svc[open] > .list { animation: svc-up .32s var(--ease) both; }
@keyframes svc-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* phones: a swipeable row of the same cards */
@media (max-width: 767px) {
  .services .cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; column-gap: 14px; row-gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: calc(-1 * var(--side)); padding: 4px var(--side) 20px; scroll-padding-inline: var(--side); scrollbar-width: thin; }
  .services .card { scroll-snap-align: start; }
  .js .services .card[data-reveal] { opacity: 1; transform: none; }
}

/* the aligned anatomy: every card spans the same six rows of the grid */
@supports (grid-template-rows: subgrid) {
  .services .cards { row-gap: 0; }
  .services .card { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
  .services .card__body { display: contents; }
  .services .card__body > .h3 { margin: 14px 22px 0; align-self: start; }
  .services .card__body > p { margin: 6px 22px 0; align-self: start; }
  .services .card__body > .card__more { margin: 16px 22px 0; align-self: start; }
  .services .card__body > .card__svc { margin: 12px 22px 14px; align-self: end; }
  @media (min-width: 768px) and (max-width: 1199px) { .services .card:nth-child(n+3) { margin-top: var(--gut); } }
  @media (max-width: 767px) { .services .cards { grid-template-rows: repeat(6, auto); } }
}
@media (prefers-reduced-motion: reduce) {
  .card__svc[open] > .list { animation: none; }
  .services .card:hover > .svc-ic { transform: none; }
}

/* ---------- What You Get: Shoaib's pick A (the Precision / INM grid), re-cut in Nero's shapes ----------
   Left: a full-height photo panel (two technicians in a DC rowhouse alley) with promise 2 on a frosted plate. Right:
   the dark lead card (promise 1) with the torch watermark and collar stripes, then promises 3-6 in a light / dark /
   dark / light checker. No icons, no numbers (Shoaib, Sarah). One shape for every box: 16 px radius, the flame-tip cut
   (top-right, 36 px), 28 px padding; cards in a row share their height; each title carries the short flame bar. */
.get--grid .wg { --cut: 36px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3.6fr) minmax(0, 3.6fr); grid-template-rows: auto 1fr 1fr; gap: 20px; margin-top: 44px; }
.get--grid .wg > * { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); border-radius: 16px; }
.wg__lead { grid-column: 2 / 4; grid-row: 1; }
.wg__photo { grid-column: 1; grid-row: 1 / 4; }
.wg__card:nth-of-type(3) { grid-column: 2; grid-row: 2; } .wg__card:nth-of-type(4) { grid-column: 3; grid-row: 2; }
.wg__card:nth-of-type(5) { grid-column: 2; grid-row: 3; } .wg__card:nth-of-type(6) { grid-column: 3; grid-row: 3; }

/* the photo panel */
.wg__photo { position: relative; min-height: 600px; overflow: hidden; background: var(--night); }
.wg__pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0; transform: scale(1.04); transition: opacity .55s var(--ease), transform 1.2s var(--ease); }
.wg__pic.is-on { opacity: 1; transform: none; }
.wg__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 22, 34, .1) 0%, transparent 30%, rgba(11, 22, 34, .62) 100%); pointer-events: none; }
.wg__mark { position: absolute; z-index: 2; top: 24px; left: 24px; width: 24px; height: auto; filter: drop-shadow(0 0 10px rgba(240, 100, 30, .6)); }
.wg__glass { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 18px; padding: 24px 24px 26px; border-radius: 14px; color: #F7F9FB;
  background: radial-gradient(90% 140% at 0% 0%, rgba(240, 100, 30, .18), transparent 55%), linear-gradient(135deg, rgba(20, 41, 63, .97), rgba(11, 22, 34, .97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 24px 44px -18px rgba(0, 0, 0, .7); }

/* shared type: the flame bar, the title, the text */
.wg h3 { font: 900 20px/1.25 var(--fh); text-wrap: balance; }
.wg h3::before { content: ""; display: block; width: 40px; height: 4px; margin-bottom: 16px; border-radius: 4px; background: linear-gradient(90deg, #F0641E, #F58A3C); transition: width .35s var(--ease); }
.wg p { margin-top: 10px; font-size: 15.5px; line-height: 1.62; }
.wg__glass h3 { color: #FFFFFF; } .wg__glass p { color: rgba(247, 249, 251, .9); }

/* the dark boxes: lead and two cards */
.wg__lead, .wg__card--dark { position: relative; overflow: hidden; color: #F7F9FB;
  background: radial-gradient(90% 140% at 0% 0%, rgba(240, 100, 30, .2), transparent 55%), radial-gradient(70% 130% at 100% 100%, rgba(30, 136, 214, .24), transparent 60%), linear-gradient(135deg, #14293F, #0B1622); }
.wg__lead h3, .wg__card--dark h3 { color: #FFFFFF; }
.wg__lead p, .wg__card--dark p { color: rgba(247, 249, 251, .84); }
.wg__lead { padding: 32px 36px 38px; }
.wg__lead h3 { font-size: 24px; }
.wg__lead p { max-width: 640px; font-size: 16px; }
.wg__torch { position: absolute; right: 30px; bottom: -36px; width: 88px; height: 222px; color: #FFFFFF; opacity: .07; pointer-events: none; }
.wg__collar { position: absolute; left: 0; right: 0; bottom: 0; height: 9px; background: linear-gradient(90deg, #E8541F, #F58A3C) top / 100% 4px no-repeat, linear-gradient(90deg, #1E88D6, #9CD0F2) bottom / 100% 4px no-repeat; }

/* the cards */
.wg__card { position: relative; isolation: isolate; padding: 28px 28px 30px; transition: transform .3s var(--ease); }
.wg__card:hover { transform: translateY(-4px); }
.wg__card:hover h3::before, .wg__lead:hover h3::before { width: 72px; }
.wg__card--light { background: var(--line); color: var(--ink); }
.wg__card--light::before { content: ""; position: absolute; z-index: -1; inset: 1px; border-radius: 15px; clip-path: polygon(0 0, calc(100% - var(--cut) + .4px) 0, 100% calc(var(--cut) - .4px), 100% 100%, 0 100%); background: linear-gradient(180deg, #FFFFFF, #FAFBFC); }
.wg__card--light h3 { color: var(--night); }
.wg__card--light p { color: var(--muted); }

@media (max-width: 1199px) {
  .get--grid .wg { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .wg__lead, .wg__photo, .wg__card:nth-of-type(n) { grid-column: auto; grid-row: auto; }
  .wg__lead, .wg__photo { grid-column: 1 / -1; }
  .wg__photo { min-height: 520px; }
  .wg__pic { object-position: 50% 12%; }
}
@media (max-width: 767px) {
  .get--grid .wg { --cut: 26px; grid-template-columns: 1fr; gap: 14px; }
  .wg__photo { min-height: 0; display: flex; flex-direction: column; }
  .wg__photo { position: relative; } .wg__pics { position: relative; }
  .wg__pic { height: 320px; bottom: auto; }
  .wg__photo::before { content: ""; display: block; height: 320px; }
  .wg__photo::after { display: none; }
  .wg__glass { position: relative; left: 0; right: 0; bottom: 0; border-radius: 0; background: linear-gradient(135deg, #14293F, #0B1622); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .wg__lead { padding: 26px 22px 32px; } .wg__lead h3 { font-size: 21px; }
  .wg__card { padding: 24px 22px 26px; }
  /* one column: keep strict dark / light alternation (lead dark, photo + its light box, dark, light, dark, light) */
  .wg__card:nth-of-type(4) { background: var(--line); color: var(--ink); }
  .wg__card:nth-of-type(4)::before { content: ""; position: absolute; z-index: -1; inset: 1px; border-radius: 15px; clip-path: polygon(0 0, calc(100% - var(--cut) + .4px) 0, 100% calc(var(--cut) - .4px), 100% 100%, 0 100%); background: linear-gradient(180deg, #FFFFFF, #FAFBFC); }
  .wg__card:nth-of-type(4) h3 { color: var(--night); } .wg__card:nth-of-type(4) p { color: var(--muted); }
  .wg__card:nth-of-type(3) { color: #F7F9FB; background: radial-gradient(90% 140% at 0% 0%, rgba(240, 100, 30, .2), transparent 55%), radial-gradient(70% 130% at 100% 100%, rgba(30, 136, 214, .24), transparent 60%), linear-gradient(135deg, #14293F, #0B1622); }
  .wg__card:nth-of-type(3)::before { display: none; }
  .wg__card:nth-of-type(3) h3 { color: #FFFFFF; } .wg__card:nth-of-type(3) p { color: rgba(247, 249, 251, .84); }
}
@media (prefers-reduced-motion: reduce) { .wg__pic, .wg__card, .wg h3::before { transition: none; } }

/* ---------- Emergency: the form in the middle of the band (Shoaib), no longer rising over the top seam ---------- */
.emergency { margin-top: 0; padding-top: var(--pad); }
.emg__grid { align-items: center; }
.emg__copy { padding-top: 0; }
.quote { margin-top: 0; }

/* ---------- Offers: printed torch coupons (the Relentless portfolio coupon craft, in Nero's brand) ----------
   Each coupon reads as a printed promo: scalloped ticket edges, a dashed inner border, a tear-off stub with the torch,
   a huge heavy price, the Notion line in bold caps, Nero's logo printed in the corner. Flame / ice / night / paper.
   Three large, very faint torch marks behind the set; the torch sits once per coupon, on its stub (no logo repeated on every coupon). Only the Notion copy. */
.offers--cp { position: relative; overflow: hidden; isolation: isolate; }
.cp__marks { position: absolute; inset: 30px 0 30px; z-index: -1; pointer-events: none; max-width: 1440px; margin: 0 auto; }
.cp__mk { position: absolute; width: auto; aspect-ratio: 206 / 520; transform: rotate(var(--r)); animation: cp-float 10s var(--fd) ease-in-out infinite; }
.cp__mk--f { color: #F0641E; opacity: .08; } .cp__mk--i { color: #1E88D6; opacity: .08; }
@keyframes cp-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@media (max-width: 899px) { .cp__mk:nth-child(3) { display: none; } }
@media (prefers-reduced-motion: reduce) { .cp__mk { animation: none; } }
.cp__head { display: grid; justify-items: center; text-align: center; gap: 10px; }
.cps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 34px; margin-top: 44px; }
.cp { filter: drop-shadow(0 22px 26px rgba(11, 22, 34, .22)); transition: transform .35s var(--ease); }
.cp:nth-child(odd) { transform: rotate(-.6deg); } .cp:nth-child(even) { transform: rotate(.6deg); }
.cp:hover { transform: translateY(-6px) rotate(0deg); }
.cp__in { --bg: linear-gradient(150deg, #F7934A 0%, #F0641E 45%, #C4411A 100%); --fg: #FFFFFF; --sub: rgba(255, 255, 255, .95); --dash: rgba(255, 255, 255, .55); --mark: #FFFFFF;
  position: relative; overflow: hidden; display: grid; grid-template-columns: 116px minmax(0, 1fr); min-height: 236px; border-radius: 12px; background: var(--bg); color: var(--fg);
  -webkit-mask: radial-gradient(circle 7px at 50% 0, #0000 97%, #000) 0 0 / 20px 51% repeat-x, radial-gradient(circle 7px at 50% 100%, #0000 97%, #000) 0 100% / 20px 51% repeat-x;
  mask: radial-gradient(circle 7px at 50% 0, #0000 97%, #000) 0 0 / 20px 51% repeat-x, radial-gradient(circle 7px at 50% 100%, #0000 97%, #000) 0 100% / 20px 51% repeat-x; }
.cp__in::before { content: ""; position: absolute; inset: 16px 14px; border: 2px dashed var(--dash); border-radius: 8px; pointer-events: none; }
.cp--ice .cp__in { --bg: linear-gradient(150deg, #5FB3EC 0%, #1E88D6 45%, #0A4F80 100%); }
.cp--night .cp__in { --bg: radial-gradient(80% 120% at 0 0, rgba(240, 100, 30, .25), transparent 60%), linear-gradient(150deg, #14293F, #0B1622); --dash: rgba(247, 249, 251, .32); --mark: #F0641E; }
.cp--paper .cp__in { --bg: linear-gradient(180deg, #FFFFFF, #FBF6F2); --fg: #0B1622; --sub: #33404D; --dash: rgba(232, 84, 31, .7); --mark: #F0641E; }
.cp__stub { position: relative; display: grid; place-items: center; border-right: 2px dashed var(--dash); margin: 16px 0; }
.cp__stub svg { width: 36px; height: 92px; color: var(--mark); filter: drop-shadow(0 0 10px rgba(255, 180, 120, .35)); }
.cp__body { position: relative; display: grid; align-content: center; gap: 10px; padding: 30px 34px 30px 30px; }
.cp__v { display: flex; align-items: flex-start; font: 900 104px/.86 var(--fh); letter-spacing: -.05em; color: var(--fg); }
.cp__cur, .cp__pct { font-size: .42em; line-height: 1.1; letter-spacing: 0; }
.cp__cur { margin-right: 2px; } .cp__pct { margin-left: 4px; }
.cp--paper .cp__v { color: #E8541F; }
.cp__body p { max-width: 330px; font: 900 16px/1.32 var(--fh); letter-spacing: .03em; text-transform: uppercase; color: var(--sub); }
.cp__logo { position: absolute; right: 26px; bottom: 26px; width: 74px; height: auto; opacity: .92; }
.cp__shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .32) 50%, transparent 62%); transform: translateX(-120%); }
.is-in .cp__shine, .cp.is-in .cp__shine { animation: cp-shine 1.6s .6s var(--ease) both; }
@keyframes cp-shine { to { transform: translateX(120%); } }
@media (max-width: 1100px) { .cp__v { font-size: 84px; } }
@media (max-width: 899px) { .cps { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; } }
@media (max-width: 480px) {
  .cp__in { grid-template-columns: 74px minmax(0, 1fr); min-height: 200px; }
  .cp__stub svg { width: 26px; height: 66px; }
  .cp__body { padding: 26px 22px 26px 20px; } .cp__v { font-size: 68px; } .cp__body p { font-size: 14.5px; }
  .cp__logo { width: 60px; right: 22px; bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) { .cp, .cp:hover { transform: none; transition: none; } .cp__shine { animation: none !important; } }

/* ---------- Service area: the van and the county cards (Relentless "Areas We Serve" craft, Nero's own build) ----------
   Copy left (Notion H2, intro, confirm line, button); right, Nero's real van cut out driving in along a dashed route
   with three pins over a soft dot field. Below, six county cards: pin disc (flame / ice in turn), county (linked where
   a page exists), town count, town chips; long lists fold behind "+ more". Every Notion town and link stays. */
.area--van { position: relative; overflow: hidden; isolation: isolate; }
.av__dots { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle, #C2CDD8 1.7px, transparent 2px); background-size: 18px 18px;
  -webkit-mask: radial-gradient(60% 52% at 72% 26%, #000 10%, transparent 72%); mask: radial-gradient(60% 52% at 72% 26%, #000 10%, transparent 72%); }
.av__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.av__copy .lead { margin-top: 18px; color: var(--muted); }
.av__copy .area__confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 18px; font-size: 16px; color: var(--muted); }
.av__copy .area__confirm .i { color: var(--orange); }
.av__copy .area__confirm a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--blue-ink); }
.av__copy .btn { margin-top: 18px; }
.av__scene { position: relative; aspect-ratio: 600 / 300; }
.av__route { position: absolute; inset: 0 0 18% 0; width: 100%; height: 82%; overflow: visible; }
.av__path { fill: none; stroke: #F0641E; stroke-width: 3; stroke-linecap: round; stroke-dasharray: .012 .018; opacity: .8; vector-effect: non-scaling-stroke; }
.av__pins circle { fill: #FFFFFF; stroke: #1E88D6; stroke-width: 4; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
.av__pins circle:nth-child(2) { stroke: #F0641E; }
.is-in .av__pins circle { animation: av-pin .6s var(--ease) both; } .is-in .av__pins circle:nth-child(2) { animation-delay: .5s; } .is-in .av__pins circle:nth-child(3) { animation-delay: .9s; }
@keyframes av-pin { from { transform: scale(0); } 70% { transform: scale(1.3); } to { transform: none; } }
.av__van { position: absolute; z-index: 1; right: 2%; bottom: 6%; width: 74%; height: auto; filter: drop-shadow(0 18px 18px rgba(11, 22, 34, .28)); }
.av__shadow { position: absolute; right: 6%; bottom: 3%; width: 66%; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(11, 22, 34, .3), transparent); }
.js .av__scene[data-reveal] .av__van { transform: translateX(-28%); opacity: 0; transition: transform 1.4s var(--ease), opacity .8s var(--ease); }
.js .av__scene[data-reveal].is-in .av__van { transform: none; opacity: 1; }

.av__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48px; align-items: stretch; }
.ac { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 22px 24px 24px; border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 22px 40px -30px rgba(11, 22, 34, .45); transition: transform .3s var(--ease), box-shadow .3s; }
.ac::after { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, #F0641E, #F58A3C); transform: scaleX(.2); transform-origin: left; transition: transform .45s var(--ease); }
.ac--ice::after { background: linear-gradient(90deg, #1E88D6, #9CD0F2); }
.ac:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line), 0 30px 50px -30px rgba(11, 22, 34, .55); }
.ac:hover::after { transform: none; }
.ac__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.ac__pin { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; font-size: 22px; color: #FFFFFF; background: linear-gradient(145deg, #F7934A, #F0641E 50%, #C4411A); box-shadow: 0 10px 20px -10px rgba(196, 65, 26, .7); transition: transform .3s var(--ease); }
.ac--ice .ac__pin { background: linear-gradient(145deg, #5FB3EC, #1E88D6 50%, #0E67A8); box-shadow: 0 10px 20px -10px rgba(14, 103, 168, .7); }
.ac:hover .ac__pin { transform: translateY(-3px); }
.ac h3 { font: 900 19px/1.2 var(--fh); color: var(--night); }
.ac h3 a { color: inherit; text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.ac h3 a:hover { color: var(--blue-ink); text-decoration: underline; text-underline-offset: 4px; }
.ac__n { padding: 5px 10px; border-radius: 999px; background: var(--alt); font: 700 14px/1 var(--fh); color: var(--muted); white-space: nowrap; }
.ac__towns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ac__towns li { display: inline-flex; }
.ac__towns li, .ac__towns a { font: 500 14px/1 var(--fh); color: var(--ink); }
.ac__towns li { padding: 0 12px; min-height: 34px; align-items: center; border-radius: 999px; background: #F2F5F8; box-shadow: inset 0 0 0 1px var(--line); }
.ac__towns li:has(a) { padding: 0; background: var(--tint-ice); box-shadow: inset 0 0 0 1px rgba(30, 136, 214, .25); }
.ac__towns a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -5px; padding: 0 12px; color: var(--blue-ink); font-weight: 700; text-decoration: none; }
.ac__towns a:hover { text-decoration: underline; }
.ac__more { margin-top: auto; padding-top: 10px; }
.ac__towns + .ac__more { margin-top: auto; }
.ac__more > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none; font: 700 14px/1 var(--fh); color: var(--dorange); }
.ac__more > summary::-webkit-details-marker { display: none; }
.ac__more[open] > summary { color: var(--muted); }
.ac__more .ac__towns { margin-top: 4px; }
.ac--dark { background: radial-gradient(90% 140% at 0% 0%, rgba(240, 100, 30, .2), transparent 55%), radial-gradient(70% 130% at 100% 100%, rgba(30, 136, 214, .26), transparent 60%), linear-gradient(135deg, #14293F, #0B1622); box-shadow: 0 30px 50px -30px rgba(11, 22, 34, .7); justify-content: center; }
.ac--dark h3, .ac--dark h3 a { color: #FFFFFF; }
.ac--dark .ac__n { background: rgba(255, 255, 255, .12); color: #F7F9FB; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.ac__wm { position: absolute; right: 22px; bottom: -30px; width: 70px; height: 177px; color: #FFFFFF; opacity: .08; pointer-events: none; }
@media (max-width: 1023px) { .av__top { grid-template-columns: 1fr; gap: 24px; } .av__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .av__grid { grid-template-columns: 1fr; gap: 14px; } .ac { padding: 20px 18px 22px; } }
@media (prefers-reduced-motion: reduce) { .js .av__scene[data-reveal] .av__van { transform: none; opacity: 1; transition: none; } .is-in .av__pins circle { animation: none; } .ac, .ac::after, .ac__pin { transition: none; } }

/* ---------- Service area: the real county map (Shoaib: "it needs a new direction") ----------
   Left: Notion H2 + intro, the six counties as a switch list, the confirm line, the button. Right: a dark card with the
   served counties drawn from the US Census boundaries (soft ice), neighbours faint, Cheverly the pulsing home pin; the
   chosen county turns flame and its towns + link show under the map. Hover or click a county in the list or on the map;
   arrow keys move along the list. Prince George's (home) is chosen first. */
.area--map .dm { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.dm__copy .lead { margin-top: 16px; color: var(--muted); }
.dm__tabs { display: grid; gap: 8px; margin-top: 26px; }
.dm__tab { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 56px; padding: 0 18px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: 700 17px/1.2 var(--fh); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .25s, box-shadow .25s, transform .25s var(--ease); }
.dm__tab:hover { background: #FFFFFF; }
.dm__tab[aria-selected="true"] { background: #FFFFFF; box-shadow: inset 4px 0 0 var(--orange), 0 18px 34px -24px rgba(11, 22, 34, .45); transform: translateX(4px); }
.dm__dot { width: 12px; height: 12px; border-radius: 50%; background: #9CD0F2; box-shadow: 0 0 0 4px rgba(30, 136, 214, .12); transition: background-color .25s, box-shadow .25s; }
.dm__tab[aria-selected="true"] .dm__dot { background: var(--orange); box-shadow: 0 0 0 4px rgba(240, 100, 30, .18); }
.dm__ct { font: 500 14px/1 var(--fh); color: var(--muted); }
.dm__copy .area__confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 22px; font-size: 16px; color: var(--muted); }
.dm__copy .area__confirm .i { color: var(--orange); }
.dm__copy .area__confirm a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--blue-ink); }
.dm__copy .btn { margin-top: 14px; }

.dm__card { position: relative; overflow: hidden; border-radius: 18px; clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 0 100%);
  background: radial-gradient(80% 60% at 60% 30%, rgba(30, 136, 214, .22), transparent 70%), linear-gradient(160deg, #14293F, #0B1622); box-shadow: 0 40px 70px -40px rgba(11, 22, 34, .8); }
.dm__svg { display: block; width: 100%; height: auto; }
.dm__ctx path { fill: rgba(247, 249, 251, .04); stroke: rgba(247, 249, 251, .1); stroke-width: 1; }
.dm__reg { fill: rgba(30, 136, 214, .38); stroke: #0B1622; stroke-width: 1.6; stroke-linejoin: round; cursor: pointer; transition: fill .3s, filter .3s; }
.dm__reg:hover { fill: rgba(30, 136, 214, .6); }
.dm__reg.is-on { fill: #F0641E; filter: drop-shadow(0 0 14px rgba(240, 100, 30, .55)); }
.dm__home { pointer-events: none; }
.dm__pt { fill: #FFFFFF; stroke: #0B1622; stroke-width: 2.5; }
.dm__ring { fill: none; stroke: #FFFFFF; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: dm-ring 2.6s ease-out infinite; }
.dm__ring--2 { animation-delay: 1.3s; }
@keyframes dm-ring { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
.dm__panels { display: grid; padding: 0 28px 28px; }
.dm__panels > .dm__panel { grid-area: 1 / 1; }
.dm__panel[hidden] { display: block; visibility: hidden; }
.dm__panel { padding-top: 18px; border-top: 1px solid rgba(247, 249, 251, .14); animation: dm-in .35s var(--ease) both; }
@keyframes dm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dm__go { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 900 22px/1.2 var(--fh); color: #FFFFFF; text-decoration: none; }
.dm__go .i { color: var(--orange); font-size: 20px; transition: transform .2s var(--ease); }
a.dm__go:hover .i { transform: translateX(4px); } a.dm__go:hover { text-decoration: underline; text-underline-offset: 5px; }
.dm__towns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dm__towns li { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; font: 500 14px/1 var(--fh); color: #F7F9FB; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.dm__towns li:has(a) { padding: 0; background: #FFFFFF; box-shadow: none; }
.dm__towns a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -5px; padding: 0 12px; font-weight: 700; color: var(--blue-ink); text-decoration: none; }
.dm__towns a:hover { text-decoration: underline; }
@media (max-width: 1023px) { .area--map .dm { grid-template-columns: 1fr; gap: 32px; } .dm__card { order: 2; } }
@media (max-width: 767px) { .dm__card { clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); } .dm__panels { padding: 0 18px 22px; } .dm__go { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { .dm__ring { animation: none; opacity: 0; } .dm__panel { animation: none; } .dm__tab, .dm__reg { transition: none; } }

/* ---------- torch seams: a dark band hands over to a light one through a shallow V lined in flame, the torch emblem
   at its point (Hunter's emblem-on-the-seam idea, Nero's torch). Used three times: services > what you get,
   emergency > offers, reviews > FAQs. ---------- */
[data-sec="get"], [data-sec="offers"], [data-sec="faq"] { position: relative; }
.seam { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 64px; pointer-events: none; }
.seam__v { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.seam__fill { fill: var(--night); }
.seam__line { fill: none; stroke: #F0641E; stroke-width: 3; vector-effect: non-scaling-stroke; }
.seam__mk { position: absolute; left: 50%; top: 52px; width: 70px; height: 70px; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #1E3D5C, #0B1622 75%); box-shadow: 0 0 0 3px #F0641E, 0 0 0 7px rgba(247, 249, 251, .9), 0 16px 30px -12px rgba(11, 22, 34, .6), 0 0 30px -4px rgba(240, 100, 30, .5); }
.seam__mk img { width: 20px; height: auto; filter: drop-shadow(0 0 8px rgba(240, 100, 30, .5)); }
[data-sec="get"] > .wrap, [data-sec="offers"] > .wrap, [data-sec="faq"] > .wrap { padding-top: 40px; }
@media (max-width: 767px) { .seam { height: 44px; } .seam__mk { top: 36px; width: 56px; height: 56px; } .seam__mk img { width: 16px; } }

/* ---------- Service area v3: the van parked across the top edge, centred heading, county pills (active = flame), the
   county's towns in a panel under them (Hunter / All Out / Doc Watts area pattern, Nero's build) ---------- */
.area--pills { position: relative; overflow: visible; text-align: center; padding-top: 150px; }
.area--pills::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 9px; background: linear-gradient(90deg, #E8541F, #F58A3C) top / 100% 4px no-repeat, linear-gradient(90deg, #1E88D6, #9CD0F2) bottom / 100% 4px no-repeat; }
.ap__map { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle, #C2CDD8 1.6px, transparent 1.9px); background-size: 16px 16px;
  -webkit-mask: radial-gradient(60% 55% at 50% 50%, #000 20%, transparent 75%); mask: radial-gradient(60% 55% at 50% 50%, #000 20%, transparent 75%); }
.ap { position: relative; z-index: 1; }
.ap__van { position: absolute; z-index: 2; left: 50%; top: 0; width: min(420px, 74vw); transform: translate(-50%, -52%); }
.ap__van img { position: relative; z-index: 1; width: 100%; height: auto; filter: drop-shadow(0 18px 18px rgba(11, 22, 34, .3)); }
.ap__shadow { position: absolute; left: 6%; right: 6%; bottom: -4px; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(11, 22, 34, .32), transparent); }
.js .ap__van[data-reveal] { opacity: 0; transform: translate(-90%, -52%); transition: opacity .8s var(--ease), transform 1.3s var(--ease); }
.js .ap__van[data-reveal].is-in { opacity: 1; transform: translate(-50%, -52%); }
.ap__head { display: grid; justify-items: center; max-width: 780px; margin: 0 auto; }
.ap__head .lead { margin-top: 14px; color: var(--muted); }
.ap__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 32px; }
.ap__pill { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 14px; border: 0; border-radius: 12px; cursor: pointer; background: #FFFFFF; color: var(--night); font: 900 15px/1 var(--fh); letter-spacing: .02em; text-transform: uppercase;
  box-shadow: inset 0 0 0 1.5px var(--line), 0 10px 20px -16px rgba(11, 22, 34, .5); transition: background-color .2s, color .2s, box-shadow .2s, transform .2s var(--ease); }
.ap__pill .i { color: var(--orange); font-size: 18px; }
.ap__pill span { padding: 4px 8px; border-radius: 999px; background: var(--alt); color: var(--muted); font: 700 14px/1 var(--fh); letter-spacing: 0; text-transform: none; }
.ap__pill:hover { box-shadow: inset 0 0 0 1.5px var(--orange), 0 12px 24px -16px rgba(11, 22, 34, .55); transform: translateY(-2px); }
.ap__pill[aria-selected="true"] { background: linear-gradient(150deg, #F7934A, #F0641E 50%, #C4411A); color: #FFFFFF; box-shadow: 0 14px 26px -14px rgba(196, 65, 26, .8); }
.ap__pill[aria-selected="true"] .i { color: #FFFFFF; }
.ap__pill[aria-selected="true"] span { background: rgba(255, 255, 255, .22); color: #FFFFFF; }
.ap__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 26px; align-items: stretch; max-width: 1160px; margin: 22px auto 0; padding: 22px; border-radius: 18px; text-align: left; color: #F7F9FB;
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%);
  background: radial-gradient(70% 120% at 0% 0%, rgba(240, 100, 30, .2), transparent 55%), radial-gradient(60% 120% at 100% 100%, rgba(30, 136, 214, .24), transparent 60%), linear-gradient(140deg, #14293F, #0B1622);
  box-shadow: inset 0 3px 0 var(--orange), 0 34px 60px -34px rgba(11, 22, 34, .75); }
.ap__panels { display: flex; flex-direction: column; padding: 8px 6px 4px 10px; }
.ap__panel:not([hidden]) { animation: dm-in .35s var(--ease) both; }
/* one fixed height for every county (Shoaib): all panels share one grid cell, so the card always takes the height of
   the longest list and never jumps; the hidden ones keep their space but are invisible and out of the reading order */
.ap__stack { display: grid; }
.ap__stack > .ap__panel { grid-area: 1 / 1; margin-bottom: 18px; }
.ap__stack > .ap__panel[hidden] { display: block; visibility: hidden; }
.ap__go { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 900 22px/1.2 var(--fh); color: #FFFFFF; text-decoration: none; }
.ap__go .i { color: var(--orange); font-size: 20px; transition: transform .2s var(--ease); }
a.ap__go:hover { text-decoration: underline; text-underline-offset: 5px; } a.ap__go:hover .i { transform: translateX(4px); }
.ap__towns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ap__towns li { display: inline-flex; align-items: center; min-height: 36px; padding: 0 13px; border-radius: 999px; font: 500 14px/1 var(--fh); color: #F7F9FB; background: #1B3249; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.ap__towns li:has(a) { padding: 0; background: linear-gradient(150deg, #F0641E, #C4411A); box-shadow: 0 8px 16px -10px rgba(196, 65, 26, .8); }
.ap__towns a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -4px; padding: 0 14px; font-weight: 700; color: #FFFFFF; text-decoration: none; }
.ap__towns a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ap__addr { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(247, 249, 251, .14); font: 700 15px/1.3 var(--fh); color: #F7F9FB; }
.ap__panel + .ap__panel ~ .ap__addr, .ap__panels > .ap__addr { margin-top: auto; }
.ap__addr > span { display: inline-flex; align-items: center; gap: 10px; } .ap__addr > span .i { color: var(--orange); font-size: 20px; }
.ap__addr a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 10px; color: #FFFFFF; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); text-decoration: none; }
.ap__addr a:hover { background: rgba(255, 255, 255, .18); }
.ap__gbp { margin: 0; overflow: hidden; border-radius: 12px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); background: #11202E; min-height: 240px; }
.ap__gbp iframe { display: block; width: 100%; height: 100%; min-height: 240px; border: 0; }
@media (max-width: 1023px) { .ap__card { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .ap__card { padding: 16px; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); } .ap__addr { flex-wrap: wrap; } }
.ap__foot { display: grid; justify-items: center; gap: 12px; margin-top: 26px; }
.ap__foot .area__confirm { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; color: var(--muted); font-size: 16px; }
.ap__foot .area__confirm .i { color: var(--orange); }
.ap__foot .area__confirm a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--blue-ink); }
@media (max-width: 767px) { .area--pills { padding-top: 110px; } .ap__card { padding: 22px 18px 24px; } .ap__pill { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .js .ap__van[data-reveal] { opacity: 1; transform: translate(-50%, -52%); transition: none; } .ap__panel:not([hidden]) { animation: none; } }

/* ---------- Reviews: the neighbour deck ----------
   Left: the H2, the Google score plate (real G, 4.8, stars, 200+ reviews), the reviewers as a clickable row, Read all
   reviews. Right: a stacked deck; the front card is a white review card, two cards peek behind it (tilted, flame and
   ice edges); next = the front card slides off to the left and the next one comes forward. Arrows, dots, reviewer
   row and swipe all move it. All cards share one grid cell so the deck never changes height. */
.reviews--deck { overflow-x: clip; }
.rd__side, .rd__deck { min-width: 0; }
.reviews--deck .rd { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 64px; align-items: center; }
.rd__side { display: grid; justify-items: start; gap: 22px; }
.rd__side .h2::after { margin-left: 0; }
.rd__score { display: inline-grid; grid-template-columns: auto auto auto; align-items: center; gap: 16px; padding: 16px 24px 16px 16px; border-radius: 18px; text-decoration: none; color: #FFFFFF;
  background: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .16), 0 24px 40px -26px rgba(0, 0, 0, .7); transition: transform .25s var(--ease); }
.rd__score:hover { transform: translateY(-3px); }
.rd__gdisc { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; background: #FFFFFF; } .rd__gdisc .gg { width: 32px; height: 32px; }
.rd__score b { font: 900 64px/1 var(--fh); letter-spacing: -.04em; }
.rd__meta { display: grid; gap: 6px; font: 500 15px/1.2 var(--fh); color: rgba(247, 249, 251, .85); }
.rd__meta .stars { color: #FBBC04; font-size: 20px; gap: 2px; }
.rd__whos { display: flex; flex-wrap: wrap; gap: 8px; }
.rd__who { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; white-space: nowrap; flex: none; padding: 0 16px 0 6px; border: 0; border-radius: 999px; cursor: pointer; font: 700 15px/1 var(--fh); color: #F7F9FB;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: background-color .2s, box-shadow .2s; }
.rd__who:hover { background: rgba(255, 255, 255, .12); }
.rd__who[aria-pressed="true"] { background: #FFFFFF; color: var(--night); box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .6); }
.rd__av { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; font: 900 15px/1 var(--fh); color: #FFFFFF; background: linear-gradient(145deg, #F7934A, #E8541F); }
.rd__whos li:nth-child(even) .rd__av { background: linear-gradient(145deg, #5FB3EC, #0E67A8); }
.rd__side .btn { margin-top: 4px; }

.rd__deck { position: relative; }
.rd__cards { display: grid; padding: 0 26px 26px 0; }
.rd__card { grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; gap: 16px; padding: 36px 38px 32px; border-radius: 20px; background: #FFFFFF; color: var(--ink);
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .8); transform-origin: 50% 100%;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .45s var(--ease), filter .45s; }
.rd__card[data-p="0"] { z-index: 4; transform: none; opacity: 1; }
.rd__card[data-p="1"] { z-index: 3; transform: translate(18px, 16px) rotate(2.2deg); opacity: 1; filter: brightness(.86); box-shadow: inset 0 4px 0 #F0641E, 0 30px 50px -36px rgba(0, 0, 0, .8); }
.rd__card[data-p="2"] { z-index: 2; transform: translate(34px, 30px) rotate(4.2deg); opacity: 1; filter: brightness(.72); box-shadow: inset 0 4px 0 #1E88D6, 0 30px 50px -36px rgba(0, 0, 0, .8); }
.rd__card[data-p="3"], .rd__card[data-p="x"] { z-index: 1; transform: translate(34px, 30px) rotate(4.2deg); opacity: 0; }
.rd__card.is-out { z-index: 5 !important; transform: translate(-115%, -10px) rotate(-10deg) !important; opacity: 0 !important; }
.rd__card[data-p]:not([data-p="0"]) > * { visibility: hidden; }
.rd__card:not([data-p="0"]), .rd__card.is-out { pointer-events: none; }
.rd__q { position: absolute; right: 30px; top: 22px; font-size: 64px; line-height: 1; color: #FDECE2; }
.rd__card .stars { color: #F5A623; font-size: 20px; gap: 2px; }
.rd__card blockquote { margin: 0; }
.rd__card blockquote p { font: 500 21px/1.55 var(--fh); color: var(--night); max-width: 640px; }
.rd__by { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); font: 500 14.5px/1.3 var(--fh); color: var(--muted); }
.rd__by b { display: block; font: 900 18px/1.2 var(--fh); color: var(--night); }
.rd__by .rd__av { width: 46px; height: 46px; font-size: 18px; }
.rd__g { margin-left: auto; } .rd__g .gg { width: 26px; height: 26px; }
.rd__av--ph { object-fit: cover; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #F0641E; }
.rd__play { width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; color: #FFFFFF; background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); font-size: 18px; }
.rd__play:hover { background: rgba(255, 255, 255, .1); }
.rd__play > .i:last-child, .rd__play[aria-pressed="true"] > .i:first-child { display: none; }
.rd__play[aria-pressed="true"] > .i:last-child { display: block; }
.rd__ctrl { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.rd__nav { width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; color: #FFFFFF; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); font-size: 20px; transition: background-color .2s; }
.rd__nav:hover { background: #E8541F; box-shadow: none; }
.rd__dots { display: flex; gap: 4px; }
.rd__dot { width: 28px; height: 44px; border: 0; padding: 0; cursor: pointer; background: transparent; position: relative; }
.rd__dot::before { content: ""; position: absolute; left: 4px; right: 4px; top: 20px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .28); transition: background-color .25s; }
.rd__dot[aria-current]::before { background: #F0641E; }
@media (max-width: 1023px) { .reviews--deck .rd { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 767px) {
  .rd__score b { font-size: 48px; } .rd__gdisc { width: 50px; height: 50px; }
  .rd__cards { padding: 0 16px 18px 0; } .rd__card { padding: 26px 22px 24px; }
  .rd__card[data-p="1"] { transform: translate(10px, 9px) rotate(1.6deg); } .rd__card[data-p="2"] { transform: translate(18px, 17px) rotate(3deg); }
  .rd__card blockquote p { font-size: 17px; } .rd__q { font-size: 46px; right: 18px; top: 16px; }
  .rd__whos { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) { .rd__card { transition: none; } }

/* ---------- Emergency: tonight or the morning ----------
   Form: a flame header with the torch, then a tidy grid (Name | Phone, City wide, help wide) with leading icons.
   Copy: the two Notion scenarios as a night card (flame edge, moon, the $169 fee as a tag) and a morning card (ice
   edge, sunrise), side by side, the choice the copy describes. */
.emergency--fork .emg__grid { grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); gap: 56px; align-items: center; }
.emergency--fork .quote { padding: 0; overflow: hidden; border-radius: 18px; box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .9); }
.qh { position: relative; display: flex; align-items: center; gap: 14px; padding: 24px 30px; overflow: hidden; background: radial-gradient(120% 140% at 0% 0%, #F7934A, transparent 60%), linear-gradient(140deg, #F0641E, #C4411A); }
.qh::after { content: ""; position: absolute; right: -10px; bottom: -40px; width: 120px; height: 160px; background: url("/wp-content/uploads/neros/img/torch-white.png") center / contain no-repeat; opacity: .12; transform: rotate(12deg); }
.qh__torch { width: 18px; height: auto; flex: none; }
.emergency--fork .quote__title { margin: 0; color: #FFFFFF; font-size: 28px; }
.emergency--fork .quote__fields { padding: 26px 30px 0; gap: 14px 16px; }
.emergency--fork .quote > .consent, .emergency--fork .quote > .err, .emergency--fork .quote > .btn, .emergency--fork .quote > .quote__done { margin-left: 30px; margin-right: 30px; }
.emergency--fork .quote > .btn { width: calc(100% - 60px); margin-bottom: 30px; }
.qf { position: relative; display: block; }
.qf__i { position: absolute; left: 14px; top: 16px; font-size: 20px; color: var(--muted); pointer-events: none; transition: color .2s; }
.qf input, .qf textarea { padding-left: 44px !important; }
.qf:focus-within .qf__i { color: var(--dorange); }

.emg__copy .emg__lead { max-width: 720px; }
.fork { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; }
.fork__c { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 24px 40px -28px rgba(0, 0, 0, .7); }
.fork__c::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; }
.fork__c--night::before { background: linear-gradient(90deg, #E8541F, #F58A3C); }
.fork__c--day::before { background: linear-gradient(90deg, #1E88D6, #9CD0F2); }
.fork__c--night { background: radial-gradient(90% 80% at 0% 0%, rgba(240, 100, 30, .22), transparent 65%), linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); }
.fork__c--day { background: radial-gradient(90% 80% at 0% 0%, rgba(30, 136, 214, .26), transparent 65%), linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); }
.fork__top { display: flex; align-items: center; justify-content: space-between; }
.fork__ic { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; font-size: 26px; color: #FFFFFF; }
.fork__c--night .fork__ic { background: linear-gradient(145deg, #F7934A, #E8541F 55%, #C4411A); box-shadow: 0 12px 22px -12px rgba(232, 84, 31, .9); }
.fork__c--day .fork__ic { background: linear-gradient(145deg, #5FB3EC, #1E88D6 55%, #0E67A8); box-shadow: 0 12px 22px -12px rgba(30, 136, 214, .9); }
.fork__tag { padding: 7px 12px; border-radius: 10px; font: 900 22px/1 var(--fh); letter-spacing: -.02em; color: #FFFFFF; background: rgba(240, 100, 30, .18); box-shadow: inset 0 0 0 1px rgba(240, 100, 30, .55); }
.fork__h { margin-top: 4px; font: 900 19px/1.25 var(--fh); color: #FFFFFF; }
.fork__c p { font-size: 15px; line-height: 1.6; color: rgba(247, 249, 251, .84); }
.emergency--fork .actions { margin-top: 26px; }
@media (max-width: 1199px) { .emergency--fork .emg__grid { grid-template-columns: 1fr; gap: 40px; } .emergency--fork .quote { order: 2; max-width: 720px; } }
@media (max-width: 767px) {
  .fork { grid-template-columns: 1fr; }
  .qh { padding: 20px 20px; } .emergency--fork .quote__title { font-size: 24px; }
  .emergency--fork .quote__fields { padding: 20px 18px 0; grid-template-columns: 1fr; }
  .emergency--fork .quote > .consent, .emergency--fork .quote > .err, .emergency--fork .quote > .btn, .emergency--fork .quote > .quote__done { margin-left: 18px; margin-right: 18px; }
  .emergency--fork .quote > .btn { width: calc(100% - 36px); margin-bottom: 22px; }
}

/* ---------- Emergency v3: the night call ----------
   Left: the night-call photo in a cut-corner panel, the Call button as a glowing plate on it (pulsing ring). Right:
   H2, H3, lead, the two cases as a tonight / morning path: a vertical flame-to-ice line with a moon node and a
   sunrise node. The Get My Quote form is a wide white bar straddling the band's bottom edge into Offers (the same move
   as the trust bar under the hero), the flame line along its top. */
.emergency--call { padding-bottom: 96px; }
.emergency--call .sec__bg img { filter: blur(6px) brightness(.7); transform: scale(1.06); }
.ec { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 60px; align-items: center; padding-bottom: 40px; }
.ec__photo { position: relative; margin: 0; min-height: 540px; border-radius: 18px; overflow: hidden; clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 0 100%);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); }
.ec__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.ec__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(11, 22, 34, .75) 100%); pointer-events: none; }
.ec__plate { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 0 22px 0 12px; border-radius: 14px; text-decoration: none;
  font: 900 22px/1 var(--fh); color: #FFFFFF; background: linear-gradient(140deg, #F58A3C, #E8541F 55%, #C4411A); box-shadow: 0 22px 40px -18px rgba(232, 84, 31, .9); transition: transform .25s var(--ease); }
.ec__plate:hover { transform: translateY(-3px); }
.ec__ring { position: relative; width: 50px; height: 50px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #FFFFFF; color: #E8541F; font-size: 22px; }
.ec__ring::before, .ec__ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .8); animation: ec-ring 2.4s ease-out infinite; }
.ec__ring::after { animation-delay: 1.2s; }
@keyframes ec-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
.ec__copy .emg__lead { max-width: 680px; }
.ec__path { position: relative; display: grid; gap: 22px; margin: 28px 0 0; padding: 0; list-style: none; }
.ec__path::before { content: ""; position: absolute; left: 25px; top: 26px; bottom: 26px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #F0641E, #1E88D6); }
.ec__step { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; }
.ec__node { position: relative; z-index: 1; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; font-size: 24px; color: #FFFFFF; box-shadow: 0 0 0 6px #0E1C2B; }
.ec__step--night .ec__node { background: linear-gradient(145deg, #F7934A, #E8541F 55%, #C4411A); }
.ec__step--day .ec__node { background: linear-gradient(145deg, #5FB3EC, #1E88D6 55%, #0E67A8); }
.ec__h { margin-top: 12px; font: 900 20px/1.25 var(--fh); color: #FFFFFF; }
.ec__step p { margin-top: 6px; font-size: 15.5px; line-height: 1.6; color: rgba(247, 249, 251, .82); max-width: 640px; }
.ec__copy .actions { margin-top: 26px; }
/* the form bar */
.ec__formwrap { position: relative; z-index: 3; margin: -96px 0 -110px; }
.ec__formwrap .quote--bar { display: grid; grid-template-columns: 210px minmax(0, 1fr) 230px; gap: 28px; align-items: start; padding: 30px 32px 28px; border-radius: 18px; background: #FFFFFF; overflow: visible;
  box-shadow: inset 0 4px 0 #F0641E, 0 40px 70px -40px rgba(11, 22, 34, .6), 0 0 0 1px var(--line); clip-path: none; margin: 0; }
.ec__formwrap .quote--bar .qh { display: block; padding: 0; background: none; }
.ec__formwrap .quote--bar .qh::after, .ec__formwrap .quote--bar .qh__torch { display: none; }
.ec__formwrap .quote--bar .quote__title { color: var(--night); font-size: 28px; margin: 0; }
.ec__formwrap .quote--bar .quote__title::before { content: ""; display: block; width: 40px; height: 4px; margin-bottom: 14px; border-radius: 4px; background: linear-gradient(90deg, #F0641E, #F58A3C); }
.ec__formwrap .quote--bar .quote__fields { grid-column: 2; grid-row: 1; padding: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ec__formwrap .quote--bar .field--wide { grid-column: auto; }
.ec__formwrap .quote--bar .field:nth-child(4) { grid-column: 1 / -1; }
.ec__formwrap .quote--bar .field textarea { min-height: 64px; }
.ec__formwrap .qb__side { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; }
.ec__formwrap .qb__side > .consent { margin: 0; font-size: 14px; }
.ec__formwrap .qb__side > .err { margin: 6px 0 0; min-height: 40px; }
.ec__formwrap .qb__side > .err[hidden] { display: block; visibility: hidden; }
.ec__formwrap .qb__side > .btn { width: 100%; margin-top: 6px; }
.ec__formwrap .qb__side > .quote__done { margin-top: 12px; }
.ec__formwrap + .offers { padding-top: calc(var(--pad) + 110px); }
.ec__formwrap + .offers > .wrap { padding-top: 0; }
@media (max-width: 1199px) {
  .ec { grid-template-columns: 1fr 1fr; gap: 40px; }
  .ec__formwrap .quote--bar { grid-template-columns: 1fr 220px; } .ec__formwrap .quote--bar .qh { grid-column: 1 / -1; }
  .ec__formwrap .quote--bar .quote__fields { grid-column: 1; grid-row: 2; }
  .ec__formwrap .qb__side { grid-column: 2; grid-row: 2; }
}
@media (max-width: 899px) {
  .ec { grid-template-columns: 1fr; } .ec__photo { min-height: 420px; max-width: 620px; }
  .ec__formwrap .quote--bar { grid-template-columns: 1fr; gap: 18px; } .ec__formwrap .quote--bar .quote__fields { grid-column: 1; grid-row: auto; grid-template-columns: 1fr 1fr; }
  .ec__formwrap .qb__side { grid-column: 1; grid-row: auto; }
}
@media (max-width: 767px) {
  .ec__photo { min-height: 360px; } .ec__plate { font-size: 19px; min-height: 64px; left: 14px; right: 14px; bottom: 14px; }
  .ec__formwrap .quote--bar { padding: 24px 18px 22px; } .ec__formwrap .quote--bar .quote__fields { grid-template-columns: 1fr; }
  .ec__formwrap { margin: -70px 0 -90px; } .ec__formwrap + .offers { padding-top: calc(var(--pad) + 90px); }
}
@media (prefers-reduced-motion: reduce) { .ec__ring::before, .ec__ring::after { animation: none; opacity: 0; } }

/* ---------- Emergency v4: copy left, form right (Shoaib's one condition) ----------
   Left: H2, H3, lead, the tonight / morning path, the glowing Call plate + Book Now. Right: the Get My Quote card in
   the page's own form language (white, the flame-tip cut, the orange bar on the title, icon fields). The night-call
   photo is the band's background, clearer than before, under a left-to-right film so the copy stays AA. */
.emergency--right { padding-bottom: var(--pad); }
.emergency--right .sec__bg img { filter: none; transform: none; object-position: 30% 50%; }
.emergency--right .sec__bg::after { background: linear-gradient(90deg, rgba(11, 22, 34, .94) 0%, rgba(11, 22, 34, .86) 46%, rgba(11, 22, 34, .62) 100%), linear-gradient(180deg, rgba(11, 22, 34, .35), transparent 30%, rgba(11, 22, 34, .55)); }
.ec.ec--right { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; padding-bottom: 0; }
.ec__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; }
.ec__acts .ec__plate { position: relative; left: auto; right: auto; bottom: auto; min-height: 64px; padding: 0 24px 0 8px; font-size: 20px; }
.ec__acts .ec__ring { width: 48px; height: 48px; }
.ec__acts .btn--ghost { min-height: 64px; }
.ec__formcol .quote--side { margin: 0; padding: 0; overflow: hidden; border-radius: 18px; background: #FFFFFF; clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%);
  box-shadow: inset 0 4px 0 #F0641E, 0 50px 90px -50px rgba(0, 0, 0, .9); }
.quote--side .qh { display: block; padding: 30px 30px 0; background: none; }
.quote--side .qh::after, .quote--side .qh__torch { display: none; }
.quote--side .quote__title { margin: 0; color: var(--night); font-size: 30px; }
.quote--side .quote__title::before { content: ""; display: block; width: 40px; height: 4px; margin-bottom: 14px; border-radius: 4px; background: linear-gradient(90deg, #F0641E, #F58A3C); }
.quote--side .quote__fields { padding: 20px 30px 0; }
.quote--side .qb__side { display: flex; flex-direction: column; padding: 16px 30px 30px; }
.quote--side .qb__side > .consent { margin: 0; font-size: 14px; }
.quote--side .qb__side > .err { margin: 6px 0 0; min-height: 22px; }
.quote--side .qb__side > .err[hidden] { display: block; visibility: hidden; }
.quote--side .qb__side > .btn { width: 100%; margin-top: 8px; }
.quote--side .qb__side > .quote__done { margin-top: 12px; }
@media (max-width: 1199px) { .ec.ec--right { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; } }
@media (max-width: 899px) { .ec.ec--right { grid-template-columns: 1fr; } .ec__formcol { max-width: 640px; } }
@media (max-width: 767px) {
  .ec__acts .ec__plate { width: 100%; font-size: 18px; } .ec__acts .btn--ghost { width: 100%; }
  .quote--side .qh { padding: 24px 18px 0; } .quote--side .quote__title { font-size: 26px; }
  .quote--side .quote__fields { padding: 18px 18px 0; } .quote--side .qb__side { padding: 14px 18px 22px; }
  .ec__formcol .quote--side { clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
}

/* below 1024 px there is no side space: the chips join the centre line after the buttons, still off-set and tilted */
@media (max-width: 1023px) {
  .hc2__float { position: static; order: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 14px 18px; margin-top: 30px; pointer-events: auto; }
  .glass { position: relative; left: auto; right: auto; top: auto; bottom: auto; translate: none; }
  .glass--g { --tilt: -3deg; }
  .glass--b { --tilt: 2.5deg; margin-top: 16px; }
}
@media (max-width: 480px) {
  .hc2__float { flex-direction: column; align-items: center; gap: 12px; }
  .glass--g { translate: -16px 0; }
  .glass--b { translate: 16px 0; margin-top: 0; }
}
@media (max-width: 1199px) {
  .hc2__l1 { font-size: 72px; }
  .hc2__l2 { font-size: 42px; }
}
@media (max-width: 767px) {
  .hero--c { padding-bottom: 60px; }
  .hc2 { padding-block: 44px 24px; }
  .hc2__l1 { font-size: 46px; }
  .hc2__l2 { font-size: 30px; }
  .hc2__claim { flex-direction: column; gap: 10px; font-size: 20px; }
  .hc2__claim > span:nth-child(2) { text-wrap: balance; }
  .hc2__claim .collar:last-child { display: none; }
  .hc2__area { font-size: 16px; }
  .hc2__checks { flex-direction: column; align-items: flex-start; margin-inline: auto; }
  .hero--c .actions { width: 100%; }
  .bar .badge { width: 42px; height: 42px; font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .hc2__h .w, .hc2__l1 .w, .glass, .glass__in, .glass__shine, .bar__seal, .bar__seal .bs-f { animation: none !important; }
  .glass { translate: none !important; transition: none; }
}

/* ---------- the headline in uppercase (Shoaib). text-transform only: the page text stays as written for search and
   screen readers. Capitals run wider, so the sizes step down and the tracking opens up a little. ---------- */
.hc2__h { text-transform: uppercase; }
.hc2__l1 { font-size: 82px; letter-spacing: -.012em; }
.hc2__l2 { font-size: 40px; letter-spacing: .01em; }
@media (max-width: 1199px) { .hc2__l1 { font-size: 66px; } .hc2__l2 { font-size: 32px; } }
@media (max-width: 767px) { .hc2__l1 { font-size: 33px; } .hc2__l2 { font-size: 21px; line-height: 1.18; } }
@media (max-width: 374px) { .hc2__l1 { font-size: 30px; } .hc2__l2 { font-size: 19px; } }

/* ================= the reference's type and dividers (Shoaib's shared artifact) =================
   Fonts: Antonio 700 (condensed display) for headings and big figures, Sofia Sans 300-800 for everything else
   (body, buttons, labels, nav, FAQ questions, footer). No extra tracking on the display face. Scale from the
   reference: H1 62 / H2 54 / H3 26 desktop; 52 / 46 under 1280; 38 / 34 / 24 under 768. */
:root { --fd: "Antonio", "Arial Narrow", "Roboto Condensed", Impact, sans-serif; --fh: "Sofia Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fb: "Sofia Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
html { font-synthesis: none; }
body { font-family: var(--fb); }
.h1, .h2, .h3, .hc2__h, .hc2__l1, .hc2__l2, .quote__title, .card__body .h3, .wg h3, .cp__v, .rd__score b, .ap__go, .ec__h,
.glass__val, .bar b, .cta__h, .emg__sub, .fork__h, .gchip__score { font-family: var(--fd); font-weight: 700; letter-spacing: 0; }
.h2 { font-size: 54px; line-height: 1.05; }
.h3 { font-size: 26px; line-height: 1.1; }
.hc2__l1 { font-size: 96px; line-height: .98; letter-spacing: .005em; }
.hc2__l2 { font-size: 46px; line-height: 1.05; letter-spacing: .01em; }
.services .card__body .h3 { font-size: 22px; line-height: 1.15; white-space: nowrap; }
@media (min-width: 1200px) { .services .card__body .h3 { font-size: clamp(19px, 1.42vw, 21px); } }
@media (min-width: 1200px) and (max-width: 1279px) { .services .card__body .h3 { font-size: 19px; } }
@media (max-width: 767px) { .services .card__body .h3 { font-size: 21px; } }
@media (max-width: 374px) { .services .card__body .h3 { font-size: 19px; } }
.wg h3 { font-size: 23px; line-height: 1.15; } .wg__lead h3 { font-size: 30px; }
.quote__title, .quote--side .quote__title { font-size: 34px; }
.ec__h { font-size: 24px; } .emg__sub { font-size: 26px; font-weight: 700; }
.ap__go { font-size: 26px; }
.rd__score b { font-size: 72px; }
.cp__v { font-size: 116px; letter-spacing: 0; }
.bar b { font-size: 22px; line-height: 1.05; }
.lead, .who__answer, .emg__lead, .ap__head .lead { font-weight: 300; }
.btn { font-family: var(--fb); font-weight: 700; }
@media (max-width: 1279px) { .h2 { font-size: 46px; } .hc2__l1 { font-size: 80px; } .hc2__l2 { font-size: 40px; } }
@media (max-width: 767px) {
  .h2 { font-size: 34px; } .h3 { font-size: 24px; }
  .hc2__l1 { font-size: 44px; } .hc2__l2 { font-size: 25px; line-height: 1.12; }
  .wg__lead h3 { font-size: 26px; } .cp__v { font-size: 80px; } .rd__score b { font-size: 56px; } .quote__title, .quote--side .quote__title { font-size: 28px; }
}
@media (max-width: 374px) { .hc2__l1 { font-size: 40px; } .hc2__l2 { font-size: 23px; } }

/* the torch-rim bowl: every dark band opens and closes with a shallow curve and a thin flame-to-ice thread; the torch
   emblem sits on the crest where a dark band hands over to a light one. Replaces the notch, the top seam line and
   the V seams. */
.sec--dark.has-bowl { clip-path: none; padding-block: calc(var(--pad) + 24px); }
.sec--dark.has-bowl::before { display: none; }
.bowl { position: absolute; left: 0; right: 0; height: 56px; z-index: 3; pointer-events: none; }
.bowl svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bowl--top { top: -1px; } .bowl--bottom { bottom: -1px; }
.bowl--page .bowl__fill { fill: var(--page); } .bowl--alt .bowl__fill { fill: var(--alt); }
.bowl__line { fill: none; stroke: url(#bowl-thread); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.bowl__mk { position: absolute; left: 50%; top: 8px; width: 62px; height: 62px; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #1E3D5C, #0B1622 75%); box-shadow: 0 0 0 3px #F0641E, 0 0 0 7px var(--page), 0 16px 30px -12px rgba(11, 22, 34, .6), 0 0 26px -4px rgba(240, 100, 30, .5); }
.bowl__mk img { width: 17px; height: auto; filter: drop-shadow(0 0 7px rgba(240, 100, 30, .5)); }
.emergency--right.has-bowl { padding-bottom: calc(var(--pad) + 24px); }
@media (max-width: 767px) { .bowl { height: 32px; } .bowl__mk { top: 5px; width: 50px; height: 50px; } .bowl__mk img { width: 14px; } .sec--dark.has-bowl { padding-block: calc(var(--pad) + 12px); } }


/* Offers: "See all pricing" as the closing button after the coupons (Shoaib) */
.cp__foot { display: flex; justify-content: center; margin-top: 40px; }
@media (max-width: 767px) { .cp__foot { margin-top: 28px; } .cp__foot .btn { width: 100%; } }

/* Notion audit 11-03: the top bar holds only the rating line and the phone, set right */
.topbar__in { justify-content: flex-end; }
@media (max-width: 1199px) { .topbar__in { justify-content: center; } }
/* without the town counters the six county pills sit on one row from 1280 px (below that the labels would wrap), a balanced 3 + 3 from 768 px */
@media (min-width: 1280px) { .ap__pills { flex-wrap: nowrap; gap: 8px; } .ap__pill { padding: 0 16px 0 13px; font-size: 14px; letter-spacing: .015em; } }
@media (min-width: 768px) and (max-width: 1279px) { .ap__pills { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; } .ap__pill { justify-content: center; } }
@media (min-width: 768px) and (max-width: 1279px) { .ap__pills > li { display: flex; } .ap__pills .ap__pill { width: 100%; } }
/* the rating cell carries Nero's torch (logo icon) on the white disc instead of the Google G */
.bar .badge--torch .bt { width: auto; height: 30px; filter: drop-shadow(0 1px 1.5px rgba(11, 22, 34, .18)); }
@media (max-width: 767px) { .bar .badge--torch .bt { height: 25px; } }

/* the brand cell (torch only, no text; Shoaib 11-03): a narrow first column on desktop, a spine down the left of the
   2 x 2 credentials on tablet and of the stacked list on phones. The corner-torch clearance is gone. */
.bar-shell .bar { padding-right: 0; }
.bar-shell .bar li.bar__brand { justify-content: center; }
@media (min-width: 1200px) {
  .bar-shell .bar { grid-template-columns: auto repeat(4, minmax(max-content, 1fr)); }
  .bar-shell .bar li.bar__brand { padding: 20px 34px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .bar-shell .bar { grid-template-columns: auto repeat(2, minmax(0, 1fr)); padding-right: 0; }
  .bar-shell .bar li { border-left: 0 !important; border-top: 0 !important; }
  .bar-shell .bar li.bar__brand { grid-row: span 2; padding: 18px 30px; }
  .bar-shell .bar li:not(.bar__brand) { border-left: 1px solid var(--line) !important; }
  .bar-shell .bar li:nth-child(n+4) { border-top: 1px solid var(--line) !important; }
  .bar-shell .bar li.bar__brand .badge { width: 54px; height: 54px; }
  .bar .badge--torch .bt { height: 34px; }
}
@media (max-width: 767px) {
  .bar-shell .bar { grid-template-columns: auto minmax(0, 1fr); }
  .bar-shell .bar li.bar__brand { grid-row: span 4; padding: 10px 16px !important; }
  .bar-shell .bar li:not(.bar__brand) { border-left: 1px solid var(--line) !important; }
  .bar-shell .bar li:nth-child(2) { border-top: 0 !important; }
}

/* ================= the trust bar = the SEAM PLAQUE (Shoaib 11-03, A of options/bar-options.html) =================
   One content-width plaque centred on the hero's bottom edge (Georgia Air's plaque), blue gradient, orange top line,
   the colour torch stamped over its left end as a seal; the four Notion credentials one line each. Under 1100 px the
   seal moves to the top centre over a 2 x 2 grid; under 600 px one column. */
.barwrap { margin-top: -40px; }
.plaque { position: relative; display: flex; align-items: center; width: fit-content; max-width: 100%; margin: 0 auto; padding: 0 12px 0 70px; min-height: 72px; border-radius: 18px;
  background: radial-gradient(70% 160% at 0% 0%, rgba(255, 255, 255, .16), transparent 60%), linear-gradient(120deg, #1670B8 0%, #0E67A8 50%, #0A4F80 100%);
  box-shadow: inset 0 3px 0 #F0641E, inset 0 0 0 1px rgba(255, 255, 255, .14), 0 30px 50px -26px rgba(11, 22, 34, .75); }
.plaque__mk { position: absolute; left: -22px; top: 50%; width: 80px; height: 80px; transform: translateY(-50%); display: grid; place-items: center; border-radius: 50%; background: #FFFFFF;
  box-shadow: 0 0 0 4px #0E67A8, 0 0 0 7px #F0641E, 0 18px 30px -12px rgba(11, 22, 34, .7); }
.plaque__torch { display: block; width: auto; height: 44px; filter: drop-shadow(0 1px 1.5px rgba(11, 22, 34, .18)); }
.plaque__list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.plaque__list li { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 24px; min-height: 72px; color: #E3F1FB; font: 600 16px/1 var(--fb); white-space: nowrap; }
.plaque__list li + li::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 1px; background: rgba(214, 234, 248, .28); }
.plaque__list b { color: #FFFFFF; font-family: var(--fd); font-weight: 700; font-size: 21px; letter-spacing: .01em; }
.plaque__list .dt { width: 24px; height: 24px; color: #FFFFFF; --d2: #FFB47A; --d2o: .7; }
@media (max-width: 1099px) {
  .barwrap { margin-top: -30px; }
  .plaque { width: 100%; padding: 46px 8px 8px; }
  .plaque__mk { left: 50%; top: 0; transform: translate(-50%, -50%); width: 72px; height: 72px; }
  .plaque__torch { height: 40px; }
  .plaque__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .plaque__list li { justify-content: center; min-height: 60px; }
  .plaque__list li + li::before { display: none; }
  .plaque__list li:nth-child(n+3) { border-top: 1px solid rgba(214, 234, 248, .2); }
  .plaque__list li:nth-child(2n) { border-left: 1px solid rgba(214, 234, 248, .2); }
}
@media (max-width: 599px) {
  .barwrap { margin-top: -14px; }  /* room between the seal and the hero's tilted BBB chip */
  .plaque__list { grid-template-columns: 1fr; }
  .plaque__list li { justify-content: flex-start; padding: 0 18px; min-height: 54px; }
  .plaque__list li:nth-child(2n) { border-left: 0; }
  .plaque__list li + li { border-top: 1px solid rgba(214, 234, 248, .2); }
  .plaque__list b { font-size: 19px; }
}

/* the decorative quote mark sat on the first line of short reviews: the text now keeps clear of it */
.rd__card blockquote p, .rd__card > p:not(.rd__by) { padding-right: 64px; }
@media (max-width: 767px) { .rd__card blockquote p, .rd__card > p:not(.rd__by) { padding-right: 44px; } }

/* ================= kept from options/suggest.html (Shoaib 11-03): FAQs, Reviews, Footer, What You Get =================
   (Fewer torches and Notion order were left off.) */
/* ---------- FAQs: the photo panel + hairline questions ---------- */
[data-sec="faq"] .faq__grid { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); gap: 56px; }
[data-sec="faq"] .faq__side { position: sticky; top: 104px; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 560px; padding: 38px 32px 32px;
  border-radius: 20px; background: var(--night); clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%); box-shadow: inset 0 4px 0 #F0641E; }
[data-sec="faq"] .faq__photo { display: block; position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
[data-sec="faq"] .faq__side::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 22, 34, .86) 0%, rgba(11, 22, 34, .3) 36%, rgba(11, 22, 34, .45) 58%, rgba(11, 22, 34, .95) 100%); }
[data-sec="faq"] .faq__side .h2 { color: #FFFFFF; }
[data-sec="faq"] .faq__call { margin-top: 0; background: rgba(11, 22, 34, .58); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
[data-sec="faq"] .acc { gap: 0; border-top: 1px solid var(--line); }
[data-sec="faq"] .acc__item { position: relative; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
[data-sec="faq"] .acc__item.is-open { border-color: var(--line); box-shadow: none; }
[data-sec="faq"] .acc__item::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #F0641E, #1E88D6);
  transform: scaleY(0); transform-origin: top; transition: transform .35s var(--ease); }
[data-sec="faq"] .acc__item.is-open::before { transform: none; }
[data-sec="faq"] .acc__btn { min-height: 88px; padding: 20px 6px 20px 28px; }
[data-sec="faq"] .acc__btn > span:first-child { font-family: var(--fd); font-weight: 700; font-size: 25px; line-height: 1.15; letter-spacing: .005em; color: var(--night); }
[data-sec="faq"] .acc__btn:hover > span:first-child { color: #0E67A8; }
[data-sec="faq"] .acc__sign { width: 42px; height: 42px; background: transparent; box-shadow: inset 0 0 0 1.5px #C5D0DA; }
[data-sec="faq"] .is-open .acc__sign { background: #F0641E; box-shadow: none; }
[data-sec="faq"] .acc__inner p { max-width: 720px; padding: 0 64px 28px 28px; font-size: 17px; line-height: 1.6; }
@media (max-width: 1199px) {
  [data-sec="faq"] .faq__grid { grid-template-columns: 1fr; gap: 32px; }
  [data-sec="faq"] .faq__side { position: relative; top: auto; display: flex; min-height: 300px; }
}
@media (max-width: 767px) {
  [data-sec="faq"] .faq__side { min-height: 340px; padding: 28px 20px 20px; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }
  [data-sec="faq"] .acc__btn { min-height: 76px; padding: 16px 4px 16px 20px; }
  [data-sec="faq"] .acc__btn > span:first-child { font-size: 21px; }
  [data-sec="faq"] .acc__inner p { padding: 0 16px 22px 20px; font-size: 16px; }
}

/* ---------- Reviews: the score on a plain blue plaque (Shoaib 11-03: "a little bit simpler"): the G inside on a white
   disc, no rings, no sheen, no inner rim; the orange top edge stays (the plaques' one accent) ---------- */
[data-sec="reviews"] .rd__score { position: relative; grid-template-columns: auto auto auto; gap: 14px; margin-left: 0; padding: 12px 24px 12px 12px; border-radius: 16px;
  background: linear-gradient(120deg, #1670B8 0%, #0E67A8 55%, #0A4F80 100%);
  box-shadow: inset 0 3px 0 #F0641E, 0 22px 40px -28px rgba(0, 0, 0, .7); -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-sec="reviews"] .rd__gdisc { width: 54px; height: 54px; box-shadow: none; }
[data-sec="reviews"] .rd__gdisc .gg { width: 28px; height: 28px; }
[data-sec="reviews"] .rd__score b { font-size: 60px; }
@media (max-width: 767px) { [data-sec="reviews"] .rd__score b { font-size: 50px; } [data-sec="reviews"] .rd__gdisc { width: 48px; height: 48px; } }
[data-sec="reviews"] .rd__meta { color: #E3F1FB; }
[data-sec="reviews"] .rd__meta .stars { color: #FFC845; }

/* ---------- Footer: contact plaque, the review profiles + BBB seal, torch watermark, the seam from the CTA ---------- */
.footer[data-sec="footer"]::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #E8541F, #F58A3C 45%, #4FA8E8 55%, #1E88D6); }
.footer[data-sec="footer"]::after { content: ""; position: absolute; z-index: -1; right: -30px; bottom: -70px; width: 270px; height: 680px; background: url("/wp-content/uploads/neros/img/torch-white.png") center / contain no-repeat; opacity: .05; pointer-events: none; }
.footer[data-sec="footer"]__contact { display: none; }
[data-sec="footer"] .footer__profiles { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 4px 0 26px; }
.footer__plist { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.footer__plist a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #E3F1FB; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.footer__plist a:hover { background: rgba(255, 255, 255, .16); transform: translateY(-2px); }
.footer__pmark { display: block; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.footer__bbb { display: inline-flex; min-height: 44px; align-items: center; }
.footer__bbb img { display: block; width: 200px; height: auto; }
@media (max-width: 1099px) {
}
@media (max-width: 767px) {
  .footer[data-sec="footer"]::after { width: 180px; height: 454px; }
}

/* ---------- What You Get: rows fit their cards ---------- */
.get--grid[data-sec="get"] .wg { grid-template-rows: auto auto auto; }
@media (max-width: 1199px) { .get--grid[data-sec="get"] .wg { grid-template-rows: none; } }

/* the last row splits unevenly: the shorter promise takes the narrower card, so both texts end together */
@media (min-width: 1200px) {
  .get--grid[data-sec="get"] .wg { grid-template-columns: minmax(0, 5fr) minmax(0, 3.3fr) minmax(0, .3fr) minmax(0, 3.6fr); }
  [data-sec="get"] .wg__lead { grid-column: 2 / 5; }
  [data-sec="get"] .wg__card:nth-of-type(3) { grid-column: 2 / 4; } [data-sec="get"] .wg__card:nth-of-type(4) { grid-column: 4; }
  [data-sec="get"] .wg__card:nth-of-type(5) { grid-column: 2; } [data-sec="get"] .wg__card:nth-of-type(6) { grid-column: 3 / 5; }
}

/* ================= 11-03 notes (Shoaib): light box on the photo, text links, county pills, footer ================= */
/* What You Get: "No struggling to be understood." on a light glass box */
.wg__glass { color: var(--ink); background: rgba(253, 254, 254, .94); -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85), 0 24px 44px -20px rgba(11, 22, 34, .6); }
.wg__glass h3 { color: var(--night); } .wg__glass p { color: var(--muted); }
@media (max-width: 767px) {
  .wg__glass { background: linear-gradient(180deg, #FFFFFF, #FAFBFC); -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0 0 16px 16px;
    box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line); }
}

/* text links in place of the closing buttons ("See all pricing", "Read all reviews"), the About Us link's style */
.link--go { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 700 17px/1 var(--fh); color: var(--blue-ink); text-decoration: none; }
.link--go .arr { display: inline-flex; color: var(--dorange); transition: transform .2s var(--ease); }
.link--go:hover, .link--go:focus-visible { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.link--go:hover .arr, .link--go:focus-visible .arr { transform: translateX(4px); }
.link--on-dark { color: #FFFFFF; } .link--on-dark .arr { color: #F58A3C; }
.link--on-dark:hover, .link--on-dark:focus-visible { color: #FFD3B5; }
@media (prefers-reduced-motion: reduce) { .link--go .arr { transition: none; } }

/* county pills: on one row the card takes the same width, so the pills sit inside its edges */
@media (min-width: 1280px) { .ap__card { max-width: none; } }
.ap__pill { white-space: nowrap; }

/* footer background: dark blue into black (Shoaib 11-03), no photo; the faint torch watermark stays */
.footer[data-sec="footer"] { background: linear-gradient(160deg, #0C2A4B 0%, #081A30 42%, #030810 78%, #000000 100%); }

/* footer contact plaque, back to the suggestions-round version (Shoaib 11-03: "the bar need to be reverted") */
[data-sec="footer"] .footer__plaque { display: flex; align-items: center; margin: 0; padding: 0 8px; list-style: none; border-radius: 18px;
  background: radial-gradient(70% 160% at 0% 0%, rgba(255, 255, 255, .14), transparent 60%), linear-gradient(120deg, #1670B8 0%, #0E67A8 50%, #0A4F80 100%);
  box-shadow: inset 0 3px 0 #F0641E, inset 0 0 0 1px rgba(255, 255, 255, .14), 0 26px 44px -26px rgba(0, 0, 0, .8); }
.footer__plaque li { position: relative; display: flex; align-items: center; gap: 10px; min-height: 66px; padding: 0 22px; color: #E3F1FB; font: 600 15px/1.2 var(--fb); white-space: nowrap; }
.footer__plaque li + li::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 1px; background: rgba(214, 234, 248, .28); }
.footer__plaque a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: #FFFFFF; text-decoration: none; }
.footer__plaque a:hover b { color: #FFD3B5; }
.footer__plaque b { font-family: var(--fd); font-weight: 700; font-size: 21px; letter-spacing: .01em; color: #FFFFFF; }
.footer__plaque .i { width: 20px; height: 20px; color: #F58A3C; }
.footer__plaque .dt { width: 22px; height: 22px; color: #FFFFFF; --d2: #FFB47A; --d2o: .7; }
@media (max-width: 1099px) {
  [data-sec="footer"] .footer__plaque { flex-wrap: wrap; width: 100%; padding: 6px 8px; }
  .footer__plaque li { min-height: 52px; }
}
@media (max-width: 767px) {
  [data-sec="footer"] .footer__plaque { flex-direction: column; align-items: stretch; padding: 6px 0; }
  .footer__plaque li { padding: 0 18px; white-space: normal; }
  .footer__plaque li + li::before { left: 18px; right: 18px; top: 0; bottom: auto; width: auto; height: 1px; }
}

/* ================= 11-03 (Shoaib): no decorative dashes ("lines like this ... giving ai generated vibe") =================
   Gone: the heading underlines, the dashes on card and form titles, the hero claim's side collars, the stripes on the
   lead card and at the top of Service Area, the footer's top line, any dark-section top seam. Kept: the bowl dividers,
   the plaque's orange top edge, the night / morning path line, the open-FAQ marker. */
.rule { padding-bottom: 16px; }  /* the room the underline used to hold, without the line */
.rule::after, .rule--c::after { display: none; }
.sec--dark::before { display: none; }
.wg h3::before, .wg__collar, .area--pills::before { display: none; }
.quote--side .quote__title::before, .ec__formwrap .quote--bar .quote__title::before { display: none; }
.hc2__claim .collar { display: none; }
.footer[data-sec="footer"]::before { display: none; }

/* What You Get: the white cards lift off the page (a soft shadow that follows the cut corners) */
.get--grid .wg { filter: drop-shadow(0 16px 26px rgba(11, 22, 34, .09)) drop-shadow(0 2px 5px rgba(11, 22, 34, .05)); }
.wg__card--light { background: #D3DCE5; }


/* footer spacing tightened (Shoaib 11-03: "Spacing in footer need to minimize"). The link rows stay 44 px tall (the
   tap-size floor); the padding around them shrinks, five columns sit on one row from 1024 px, and below that the
   columns flow and balance instead of leaving holes beside the short lists. */
.footer[data-sec="footer"] { padding: 44px 0 20px; }
.footer__top { gap: 16px 24px; padding-bottom: 22px; }
.footer__hub { gap: 18px 24px; padding-block: 22px 6px; }
.footer__h { margin-bottom: 0; }
[data-sec="footer"] .footer__profiles { padding: 6px 0 14px; }
.footer__legal { padding-top: 10px; }
@media (min-width: 1024px) { .footer__hub { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .footer__hub { display: block; columns: 3; column-gap: 24px; } .footer__hub > nav { break-inside: avoid; margin-bottom: 16px; } }
@media (max-width: 767px) {
  .footer[data-sec="footer"] { padding: 34px 0 calc(80px + env(safe-area-inset-bottom)); }
  .footer__hub { columns: 2; column-gap: 16px; }
}
/* footer link rows: tighter for mouse users on desktop (Shoaib 11-03: "This spacing need to be minimize"); phones and
   touch tablets keep the 44 px rows (pointer: coarse never matches this block) */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .footer__hub a { min-height: 32px; }
  .footer__hub { padding-block: 22px 12px; }
}

/* ---------- QA 2026-11-04: the review deck takes horizontal swipes on touch screens (vertical scroll stays native) ---------- */
.rd__cards { touch-action: pan-y; }