/* Nero's inner pages (scripts/build_inner.py): the sections the homepage has no object for, in the homepage kit
   (Antonio + Sofia Sans, night / page / alt tones, flame + ice accents, the flame-tip cut corner, white cards that lift,
   bowls on every dark band, no decorative dashes). Reused homepage objects keep their own CSS. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- hero: breadcrumbs above the H1; the cooling page's first line runs all ice ---------- */
.crumbs { margin-bottom: 6px; }
.crumbs ol { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 8px; margin: 0; padding: 0; list-style: none; font: 600 15px/1.2 var(--fb); color: #CFE6F7; }
.crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: #FFFFFF; text-decoration: none; }
.crumbs a:hover, .crumbs a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.crumbs .cr { width: 13px; height: 13px; color: #F58A3C; }
.hero--inner .hc2 { padding-top: 64px; }

/* the inner hero is a split (Shoaib 11-04): copy left, the booking form card right, Precision's and CityLine's shape */
/* the photo is part of the hero (Precision's): night under the copy, clearing toward the right so the gauges read */
.hero--split { padding-bottom: 92px; }
.hero--split .hero__bg img { object-position: 78% 45%; }
.hero--split .hero__bg::after { background: linear-gradient(90deg, rgba(8, 24, 41, .96) 0%, rgba(8, 24, 41, .88) 36%, rgba(8, 24, 41, .5) 62%, rgba(8, 24, 41, .16) 100%),
  linear-gradient(180deg, rgba(8, 24, 41, .4) 0%, transparent 30%, transparent 70%, rgba(8, 22, 38, .85) 100%); }
.hi { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 56px; align-items: start; padding-block: 48px 20px; }
.hi__copy { padding-top: 8px; }
.hi__copy { display: grid; justify-items: start; text-align: left; min-width: 0; }
.hero--split .crumbs ol { justify-content: flex-start; }
.hero--split .hc2__h { justify-items: start; }
.hero--split .hc2__l1 { font-size: 72px; }
.hero--split .hc2__l2 { font-size: 36px; }
.hero--split .hc2__area { max-width: 600px; margin-top: 18px; text-align: left; text-wrap: pretty; }
.hero--split .hc2__checks { justify-content: flex-start; gap: 12px 24px; }
.hero--split .actions { justify-content: flex-start; margin-top: 28px; }
/* the proof pill under the buttons (Precision's): reviewer faces, the Google G, the stars and the Notion line */
.hi__proof { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; margin: 4px 0 20px; padding: 7px 20px 7px 7px; border-radius: 999px; color: #FFFFFF; text-decoration: none;
  background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: background-color .2s var(--ease); }
.hi__proof:hover { background: rgba(255, 255, 255, .16); }
.hi__faces { display: flex; }
.hi__faces img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #0B1622; }
.hi__faces img + img { margin-left: -10px; }
.hi__g { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #FFFFFF; }
.hi__g svg { width: 19px; height: 19px; }
.hi__pt { display: grid; gap: 3px; font: 600 15px/1.2 var(--fb); color: #E3F1FB; }
.hi__stars { display: flex; gap: 1px; color: #FBBC04; font-size: 14px; }
.hi__form { position: relative; }
.hi__form .quote--side { margin: 0; }
.hi__form .quote--side .quote__title { font-size: 28px; }
@media (max-width: 1279px) { .hero--split .hc2__l1 { font-size: 62px; } .hero--split .hc2__l2 { font-size: 32px; } .hi { gap: 40px; } }
@media (max-width: 1023px) { .hi { grid-template-columns: 1fr; gap: 34px; } .hi__form { width: 100%; max-width: 560px; } }
@media (max-width: 767px) { .hi { padding-block: 30px 22px; } .hero--split .hc2__l1 { font-size: 44px; } .hero--split .hc2__l2 { font-size: 24px; }
  .hero--split .hc2__checks { margin-inline: 0; } .hi__proof { margin: 2px 0 16px; } }


/* ---------- intro + the four stats ---------- */
.in2__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; }
.in2__copy p { max-width: 640px; margin-top: 16px; font-size: 17px; line-height: 1.7; color: var(--muted); }
.in2__ph { justify-self: end; width: min(100%, 430px); margin: 0; filter: drop-shadow(0 30px 34px rgba(11, 22, 34, .22)); }
.in2__ph img { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; object-position: 50% 62%; border-radius: 20px; clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); }
/* the four facts, INM's plate as INM ships it (Shoaib 11-04, picked from the options page: "D · White + blue boxes
   (INM)"). The cards hang over the dark band below (in2--hang); white with the flame figure alternates with the
   homepage plaque's blue (#0A4F80 / #0E67A8 / #1670B8, deep at the top, bright at the foot) with the white figure.
   They stay apart from the white service cards below by form, as on INM: compact, number-led, no icon disc, no cut
   corner. Rounds before the pick: all-white -> white/blue -> orange/blue ("so we can have white boxes in the second
   section") -> lower -> "bored" -> options A-C (coupon numerals, icon discs, photo duotones) and D/F, all on
   options/ac-hub-stats.html. The intro sits one layer over the band (z 1; the trust bar is z 2). */
:root { --st-hang: 108px; }  /* 84 -> 108 (Shoaib 11-04 "make boxes little bit down"): the bowl's light crest eats 24-48 px of the band */
/* the two tones, named once */
.st { --wh-bg: linear-gradient(180deg, #FFFFFF 0%, #EDF3F9 100%);
  --ic-bg: radial-gradient(90% 120% at 0% 0%, rgba(255, 255, 255, .12), transparent 62%), linear-gradient(165deg, #0A4F80 0%, #0E67A8 55%, #1670B8 100%);
  position: relative; width: 100%; margin-top: 56px; border-collapse: separate; border-spacing: 0; }
.st tbody { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.st tbody tr { --st-bg: var(--wh-bg); --st-rim: rgba(15, 27, 38, .08); --st-fig: #E8541F; --st-tx: #4A5663;
  display: grid; align-content: start; gap: 12px; padding: 26px 24px 28px; border-radius: 16px; background: var(--st-bg);
  box-shadow: inset 0 0 0 1px var(--st-rim), 0 28px 44px -26px rgba(8, 26, 48, .55); }
.st tbody tr:nth-child(even) { --st-bg: var(--ic-bg); --st-rim: rgba(255, 255, 255, .14); --st-fig: #FFFFFF; --st-tx: #E9F2FA; }
.st th { padding: 0; text-align: left; font-weight: 400; }
.st td { padding: 0; font-size: 15.5px; line-height: 1.6; color: var(--st-tx); }
.st th b { display: block; font: 700 42px/1 var(--fd); letter-spacing: .01em; color: var(--st-fig); }
.sec.in2--hang { z-index: 1; padding-bottom: 0; display: flow-root; }  /* flow-root keeps the cards' negative margin inside, so the section's own paint stops at the band */
.in2--hang .st { margin-bottom: calc(-1 * var(--st-hang)); }
.in2--hang + .sec--dark.has-bowl { padding-top: calc(var(--pad) + var(--st-hang)); }

/* ---------- the six service spokes (dark band) ---------- */
.sp__head { display: grid; justify-items: center; max-width: 860px; margin: 0 auto; text-align: center; }
.sp__head .h2 { color: #FFFFFF; }
.sp__head .lead { margin-top: 14px; color: rgba(247, 249, 251, .86); }
.sp__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.sp__card { position: relative; display: grid; align-content: start; gap: 12px; padding: 30px 28px 30px; border-radius: 18px; background: #FFFFFF; color: var(--ink);
  clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 0 100%); transition: transform .3s var(--ease); }
.sp__card:hover { transform: translateY(-4px); }
.sp__card .svc-ic { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; color: #FFFFFF; }
.sp__card .svc-ic .eq { width: 30px; height: 30px; fill: currentColor; }
.svc-ic--ice { background: linear-gradient(145deg, #5FB3EC 0%, #1E88D6 48%, #0E67A8 100%); }
.svc-ic--flame { background: linear-gradient(145deg, #F7934A 0%, #F0641E 50%, #C4411A 100%); }
.svc-ic--split { background: linear-gradient(90deg, #F0641E 0 50%, #1E88D6 50% 100%); }
.sp__t { font: 700 23px/1.15 var(--fd); letter-spacing: .01em; color: var(--night); }
.sp__t a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.sp__t a::after { content: ""; position: absolute; inset: 0; }
.sp__t a:hover, .sp__t a:focus-visible { color: #0E67A8; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.sp__card p { font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.sp__close { max-width: 880px; margin: 36px auto 0; text-align: center; font-size: 17px; line-height: 1.7; color: rgba(247, 249, 251, .88); }

/* the photo version (Shoaib 11-04: "services section need to have better design you can take inpiration from the shared
   websites and make sure you dont copy paste or make the current one more better"). The family's AC hubs lead every
   service with a job photo (INM, Alamo, Havana, and Nero's own homepage services cards); Precision turns its one urgent
   service dark. Ours is Nero's homepage card, not a sibling's: the photo on top under the cut corner, the service disc
   on the seam, the title as the card's link, an arrow that fills on hover; Emergency AC Repair is the one night card (no
   photo: the night is the card, a porch-light glow in its corner, the words anchored low). Cards without a photo in the
   data keep the plain icon card above (the other hubs). */
.sp__card--ph, .sp__card--night { display: flex; flex-direction: column; gap: 0; padding: 0 0 26px; }
.sp__ph { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: #0B1622; }
.sp__ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.sp__card--ph:hover .sp__ph img { transform: scale(1.045); }
.sp__card--ph .svc-ic { position: relative; z-index: 1; flex: none; margin: -29px 0 0 24px; box-shadow: 0 0 0 5px #FFFFFF, 0 14px 24px -12px rgba(8, 26, 48, .55); }
.sp__card--ph .sp__t, .sp__card--night .sp__t { margin: 10px 28px 0; }
.sp__card--ph p, .sp__card--night p { margin: 6px 28px 0; }
/* "Explore" (Shoaib 11-04: "Have explore services button"): an outlined pill under the copy that fills on hover / focus */
.sp__go { flex: none; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: auto 28px 0; padding: 0 18px 0 20px;
  border-radius: 999px; font: 700 15px/1 var(--fb); letter-spacing: .01em; color: #0E67A8; box-shadow: inset 0 0 0 1.5px #0E67A8;
  transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
.sp__card--ph p { margin-bottom: 20px; }
.sp__go .i { width: 16px; height: 16px; fill: currentColor; transition: transform .3s var(--ease); }
.sp__card:hover .sp__go, .sp__card:focus-within .sp__go { background: #0E67A8; color: #FFFFFF; }
.sp__card:hover .sp__go .i, .sp__card:focus-within .sp__go .i { transform: translateX(3px); }
.sp__card--night { padding-top: 30px; color: #FFFFFF;
  background: radial-gradient(circle at 86% 9%, rgba(247, 147, 74, .32) 0, rgba(240, 100, 30, .1) 24%, transparent 50%),
    linear-gradient(170deg, #12304F 0%, #0B1622 55%, #070E17 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.sp__card--night .svc-ic { flex: none; margin: 0 0 0 28px; box-shadow: 0 0 0 5px rgba(255, 255, 255, .07), 0 16px 34px -10px rgba(240, 100, 30, .65); }
.sp__card--night .sp__t { margin-top: auto; padding-top: 28px; color: #FFFFFF; }
.sp__card--night .sp__t a:hover, .sp__card--night .sp__t a:focus-visible { color: #F7934A; }
.sp__card--night p { color: rgba(247, 249, 251, .86); }
.sp__card--night .sp__go { margin-top: 20px; color: #F7934A; box-shadow: inset 0 0 0 1.5px #F7934A; }
.sp__card--night:hover .sp__go, .sp__card--night:focus-within .sp__go { background: #C4411A; color: #FFFFFF; box-shadow: inset 0 0 0 1.5px #C4411A; }
/* Emergency with its photo (Shoaib 11-04: "on emergency add the image as well"): the photo on top like the others, the
   body stays night, the disc cut into the seam in the body's colour */
.sp__card--ph.sp__card--night { padding-top: 0; background: linear-gradient(170deg, #12304F 0%, #0B1622 55%, #070E17 100%); }
.sp__card--ph.sp__card--night .svc-ic { margin: -29px 0 0 24px; box-shadow: 0 0 0 5px #12304F, 0 16px 34px -10px rgba(240, 100, 30, .65); }
.sp__card--ph.sp__card--night .sp__t { margin-top: 10px; padding-top: 0; }
.sp__card--ph.sp__card--night p { margin-bottom: 20px; }
.sp__card--ph.sp__card--night .sp__go { margin-top: auto; }

/* ---------- cost: the copy + three price tags (the figures in the copy) ---------- */
.cs__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 56px; align-items: center; }
.cs__copy p { max-width: 640px; margin-top: 14px; font-size: 17px; line-height: 1.7; color: var(--muted); }
.cs__copy p:last-child { font-weight: 700; color: var(--night); }
.cs__tags { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.tg { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 16px; min-height: 92px; padding: 16px 26px 16px 22px; border-radius: 16px; color: #FFFFFF;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.tg:nth-child(2) { margin-left: 28px; } .tg:nth-child(3) { margin-left: 56px; }
.tg b { font: 700 52px/1 var(--fd); letter-spacing: .01em; }
.tg span { font: 600 16px/1.35 var(--fb); }
.tg--flame { background: linear-gradient(150deg, #F7934A, #F0641E 50%, #C4411A); }
.tg--ice { background: linear-gradient(150deg, #5FB3EC, #1E88D6 50%, #0E67A8); }
.tg--night { background: linear-gradient(150deg, #1E3D5C, #0B1622); }

/* the pricing section: the estimate photo (Shoaib 11-04, option C picked on options/ac-hub-cost.html after the tags
   and the ticket: "this section still need creative professional direction"). The family standard (Alamo, INM): the
   kitchen-table estimate large under Nero's cut corner, a night caption plate on it with the diagnostic, the copy
   beside it with the other two prices as chips (maintenance in plaque blue, the timing exception in deep flame) and the
   closing promise in bold. Photo left, copy right: the intro above runs copy left, photo right. */
.cs3 { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; }
.cs3__ph { position: relative; margin: 0; filter: drop-shadow(0 34px 40px rgba(11, 22, 34, .24)); }
.cs3__ph img { display: block; width: 100%; aspect-ratio: 1 / .86; height: auto; object-fit: cover; border-radius: 22px;
  clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 0 100%); }
.cs3__cap { position: absolute; left: 22px; bottom: 22px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px;
  max-width: calc(100% - 44px); padding: 16px 24px 16px 20px; border-radius: 16px; color: #FFFFFF;
  background: rgba(11, 22, 34, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.cs3__cap b { font: 700 48px/1 var(--fd); letter-spacing: .01em; }
.cs3__cap span { font: 600 16px/1.4 var(--fb); }
.cs3__copy p { margin-top: 14px; font-size: 17px; line-height: 1.7; color: var(--muted); }
.cs3__chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.cs3__chip { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 18px 8px 8px; border-radius: 14px; background: #FFFFFF;
  box-shadow: inset 0 0 0 1px #DCE2E8, 0 14px 26px -20px rgba(8, 26, 48, .45); font: 600 15px/1.3 var(--fb); color: var(--night); }
.cs3__chip b { display: grid; place-items: center; min-width: 66px; height: 38px; padding: 0 10px; border-radius: 10px; font: 700 23px/1 var(--fd); color: #FFFFFF;
  background: linear-gradient(130deg, #0A4F80, #0E67A8 60%, #1670B8); }
.cs3__chip--flame b { background: #C4411A; }
.cs3__copy .cs3__promise { margin-top: 24px; font: 700 19px/1.5 var(--fb); color: var(--night); }
@media (max-width: 1023px) { .cs3 { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 767px) {
  .cs3__cap { left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 12px 16px; gap: 12px; }
  .cs3__cap b { font-size: 38px; } .cs3__cap span { font-size: 15px; }
}

/* ---------- central AC or ductless: the table on a white card (dark band) ---------- */
.wh__head { max-width: 880px; }
.wh__head .h2 { color: #FFFFFF; }
.wh__h3 { margin-top: 10px; font: 700 26px/1.2 var(--fd); letter-spacing: .01em; color: #F58A3C; }
.wh__head .lead { margin-top: 14px; color: rgba(247, 249, 251, .88); }
.wh__card { margin-top: 34px; overflow-x: auto; border-radius: 18px; background: #FFFFFF; box-shadow: 0 40px 60px -36px rgba(0, 0, 0, .8); }
.wh__t { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 16px; color: var(--ink); }
.wh__t thead th { padding: 20px 24px; text-align: left; font: 700 23px/1.15 var(--fd); letter-spacing: .01em; color: #FFFFFF; }
.wh__t thead th:nth-child(2) { background: linear-gradient(150deg, #5FB3EC, #1E88D6 55%, #0E67A8); }
.wh__t thead th:nth-child(3) { background: linear-gradient(150deg, #1E3D5C, #0B1622); }
.wh__t thead td { background: #EEF2F6; }
.wh__t tbody th { width: 24%; padding: 18px 24px; text-align: left; font: 700 16px/1.4 var(--fb); color: var(--night); background: #F7F9FB; }
.wh__t tbody td { padding: 18px 24px; line-height: 1.55; color: var(--muted); border-left: 1px solid var(--line); }
.wh__t tbody tr + tr > * { border-top: 1px solid var(--line); }
.wh__note { max-width: 880px; margin-top: 24px; font-size: 17px; line-height: 1.7; color: rgba(247, 249, 251, .88); }

/* ---------- how we run calls: three white cards ---------- */
.hw__head { max-width: 880px; }
.hw__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.hw__card { display: grid; align-content: start; gap: 12px; padding: 30px 28px 30px; border-radius: 18px; background: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 34px -24px rgba(11, 22, 34, .38); }
.hw__ic { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; font-size: 22px; color: #E8541F; background: #FFF1E8; }
.hw__card:nth-child(2) .hw__ic { color: #0E67A8; background: #E8F3FC; }
.hw__t { font: 700 23px/1.2 var(--fd); letter-spacing: .01em; color: var(--night); }
.hw__card p { font-size: 15.5px; line-height: 1.65; color: var(--muted); }

/* the how section, night tile (Shoaib 11-04, option C picked on options/ac-hub-how.html after "This section needs a
   better direction for design"). The after-hours point is a night card with Julian's real portrait (the polo, the van
   behind him), the page's night-card language as Emergency AC Repair; the other two points are white panels with their
   discs. Julian's photo is a video still from the live library, shown at or under its native size. Pages without
   "night" data keep the .hw__grid cards above. */
.hw2 { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-areas: "night a" "night b"; gap: 20px; margin-top: 40px; }
.hw2__night { grid-area: night; } .hw2__pt--a { grid-area: a; } .hw2__pt--b { grid-area: b; }
.hw2__pt { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 22px; row-gap: 8px; align-content: center; padding: 32px 34px; border-radius: 18px;
  background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(15, 27, 38, .07), 0 26px 44px -30px rgba(8, 26, 48, .45); }
.hw2__ic { grid-row: span 2; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; color: #FFFFFF; }
.hw2__ic--flame { background: linear-gradient(145deg, #F7934A 0%, #F0641E 50%, #C4411A 100%); box-shadow: 0 14px 24px -12px rgba(196, 65, 26, .6); }
.hw2__ic--ice { background: linear-gradient(145deg, #5FB3EC 0%, #1E88D6 48%, #0E67A8 100%); box-shadow: 0 14px 24px -12px rgba(14, 103, 168, .6); }
.hw2__ic .i { width: 26px; height: 26px; fill: currentColor; }
.hw2__t { font: 700 29px/1.16 var(--fd); letter-spacing: .01em; color: var(--night); text-wrap: balance; }
.hw2__pt p { grid-column: 2; font-size: 16.5px; line-height: 1.65; color: var(--muted); }
.hw2__night { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; color: #FFFFFF;
  background: radial-gradient(circle at 86% 62%, rgba(247, 147, 74, .22) 0, transparent 42%), linear-gradient(170deg, #12304F 0%, #0B1622 55%, #070E17 100%);
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); }
.hw2__ph { margin: 0; aspect-ratio: 16 / 9.5; overflow: hidden; }
.hw2__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hw2__nb { display: grid; gap: 12px; margin-top: auto; padding: 28px 32px 32px; }
.hw2__night .hw2__t { font-size: 30px; color: #FFFFFF; }
.hw2__nb p { font-size: 16.5px; line-height: 1.7; color: rgba(247, 249, 251, .9); }
@media (max-width: 1023px) { .hw2 { grid-template-columns: 1fr; grid-template-areas: "a" "night" "b"; } .hw2__ph { aspect-ratio: 16 / 10; } }
/* tablet: the stacked tile would show the 697 px still at ~700 px; turned sideways the photo sits at ~300 px, crisp */
@media (min-width: 560px) and (max-width: 1023px) {
  .hw2__night { flex-direction: row; }
  .hw2__ph { flex: 0 0 42%; aspect-ratio: auto; }
  .hw2__nb { align-content: center; margin-top: 0; }
}
@media (max-width: 559px) {
  .hw2__pt { grid-template-columns: 1fr; padding: 26px 22px; }
  .hw2__ic { grid-row: auto; } .hw2__pt p { grid-column: 1; }
  .hw2__nb { padding: 24px 22px 26px; } .hw2__t, .hw2__night .hw2__t { font-size: 26px; }
}

/* ---------- the four steps (a real sequence; dark band): the STAIRCASE (Shoaib 11-04 picked B of
   options/ac-hub-steps.html = INM's "How A Service Call Works, Start To Finish", re-cut in Nero's shapes). White cards
   with the flame-tip cut (the homepage card shape), each one a step lower than the last; the Notion "Step N." pill rides
   the card's top edge (deep flame / plaque blue in turn, >= 4.6:1 under white 15 px); each pill draws the hand-off line
   from the card before it, level with its own top edge, in the two steps' colours, drawing in as the card arrives.
   Under 1024 px the cards stack and the hand-off runs down into each pill. Any step count works (--i per card). ".pr"
   raises the selectors over the narrow grid rules further down. ---------- */
.pr__head { max-width: 880px; margin: 0 auto; text-align: center; }
.pr__head .h2 { color: #FFFFFF; }
.pr-band .sec__bg::after { background: linear-gradient(180deg, rgba(11, 22, 34, .88), rgba(11, 22, 34, .8) 42%, rgba(11, 22, 34, .84) 70%, rgba(11, 22, 34, .92)); }
.pr .pr__list { --gap: 30px; --rise: 48px; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--gap); align-items: start;
  margin: 76px 0 0; padding: 0; list-style: none; }
.pr__step { --cut: 30px; position: relative; z-index: 0; display: grid; align-content: start; gap: 10px; margin-top: calc(var(--i, 0) * var(--rise));
  padding: 42px 26px 30px; color: #3A4856; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .5)); }
/* the card face is a pseudo, so the cut corner does not clip the pill or the hand-off line */
.pr__step::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: 16px; background: linear-gradient(180deg, #FFFFFF, #F5F7F9);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.pr__k { position: absolute; z-index: 2; top: -19px; left: 24px; display: inline-flex; align-items: center; justify-content: center; min-width: 92px; min-height: 38px; padding: 0 16px;
  border-radius: 999px; background: linear-gradient(150deg, #CC4719, #C4411A 55%, #B83C16); color: #FFFFFF; font: 700 15px/1 var(--fb); letter-spacing: .04em;
  box-shadow: 0 0 0 4px #FFFFFF, 0 12px 22px -10px rgba(0, 0, 0, .7); }
.pr__step:nth-child(even) .pr__k { background: linear-gradient(150deg, #1670B8, #0E67A8 50%, #0A4F80); }
.pr__t { font: 700 25px/1.14 var(--fd); letter-spacing: .01em; color: var(--night); text-wrap: balance; }
.pr__step p { font-size: 15.5px; line-height: 1.6; }
.pr__step + .pr__step .pr__k::before { content: ""; position: absolute; right: 100%; top: 50%; width: calc(24px + var(--gap)); height: 3px; margin-top: -1.5px;
  background: linear-gradient(90deg, #1E88D6, #F0641E); transform-origin: left center; transition: transform .5s var(--ease) calc(.25s + var(--d, 0) * 120ms); }
.pr__step:nth-child(even) .pr__k::before { background: linear-gradient(90deg, #F0641E, #1E88D6) !important; }
.js .pr__step[data-reveal]:not(.is-in) .pr__k::before { transform: scaleX(0); }
.js .pr__step[data-reveal] { transition-delay: calc(var(--d, 0) * 120ms); }
@media (max-width: 1379px) { .pr .pr__list { --gap: 22px; --rise: 40px; } .pr__step { padding: 40px 22px 26px; } .pr__t { font-size: 24px; } }
@media (max-width: 1023px) {
  .pr .pr__list { --gap: 44px; grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
  .pr__step { margin-top: 0; padding: 40px 24px 26px; }
  .pr__step + .pr__step .pr__k::before { right: auto; left: 50%; top: auto; bottom: 100%; width: 3px; height: calc(var(--gap) - 19px); margin: 0 0 0 -1.5px;
    background: linear-gradient(180deg, #1E88D6, #F0641E); transform-origin: center top; }
  .pr__step:nth-child(even) .pr__k::before { background: linear-gradient(180deg, #F0641E, #1E88D6) !important; }
  .js .pr__step[data-reveal]:not(.is-in) .pr__k::before { transform: scaleY(0); }
}
@media (prefers-reduced-motion: reduce) { .pr__k::before { transform: none !important; transition: none !important; } }

/* ---------- the gallery as its own light band (Shoaib 11-04: "Gallery need to have different section like done for
   other page"): the services page's bento, three columns here for the four real photos (wide + single, single + wide) ---------- */
.gl__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 300px; gap: 18px; margin-top: 40px; }
.gl__ph { position: relative; margin: 0; overflow: hidden; border-radius: 16px; background: #0B1622; box-shadow: 0 24px 40px -30px rgba(11, 22, 34, .6); }
.gl__ph--w { grid-column: span 2; }
.gl__ph:first-child { clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); }
.gl__ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gl__ph:hover img { transform: scale(1.05); }
@media (max-width: 1023px) { .gl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 260px; } }
@media (max-width: 767px) { .gl__grid { grid-auto-rows: 200px; gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .gl__ph img { transition: none; } .gl__ph:hover img { transform: none; } }

/* ---------- the dark form band (Shoaib 11-04: "form section need to be dark"): the homepage band, as the services page
   draws it ---------- */
.ib-dark .emg__lead { max-width: 620px; }
.ib-dark .ec__acts { margin-top: 30px; }

/* ---------- the gallery, inside the reviews band ---------- */
.gal { margin-top: 72px; }
.gal__h { text-align: center; color: #FFFFFF; }
.gal__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.gal__ph { margin: 0; overflow: hidden; border-radius: 16px; background: #0B1622; box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .85); }
.gal__ph img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; transition: transform .5s var(--ease); }
.gal__ph:hover img { transform: scale(1.04); }

/* ---------- book: copy left, the homepage form card right (light band) ---------- */
.ib__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.ib__h3 { margin-top: 10px; font: 700 26px/1.2 var(--fd); letter-spacing: .01em; color: #E8541F; }
.ib__copy .lead { margin-top: 14px; color: var(--muted); }
.ib__subs { display: grid; gap: 20px; margin: 30px 0 0; padding: 0; list-style: none; }
.ib__subs li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.ib__ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; font-size: 21px; color: #FFFFFF; background: linear-gradient(150deg, #F7934A, #F0641E 50%, #C4411A); }
.ib__subs li:nth-child(2) .ib__ic { background: linear-gradient(150deg, #5FB3EC, #1E88D6 50%, #0E67A8); }
.ib__h4 { font: 700 21px/1.2 var(--fd); letter-spacing: .01em; color: var(--night); }
.ib__subs p { margin-top: 6px; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.ib .ec__formcol .quote--side { box-shadow: inset 0 4px 0 #F0641E, inset 0 0 0 1px var(--line), 0 40px 70px -46px rgba(11, 22, 34, .55); }
.ib .quote--side .quote__fields { padding-top: 30px; }

/* ---------- the final CTA: a two-sentence line, so a calmer size than the homepage's three words ---------- */
.cta--inner .cta__h { font-size: clamp(40px, 5vw, 72px); line-height: 1.04; max-width: 980px; margin-inline: auto; text-wrap: balance; }

/* ---------- narrow ---------- */
@media (max-width: 1023px) {
  .in2__grid, .cs__grid, .ib__in { grid-template-columns: 1fr; gap: 36px; }
  .in2__ph { justify-self: center; }
  .st tbody, .sp__grid, .gal__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw__grid { grid-template-columns: 1fr; }
  .tg:nth-child(n) { margin-left: 0; }
  :root { --st-hang: 92px; }
}
/* four narrow columns: the figure would break ("15-20 / years"), so it takes the phone size here only */
@media (min-width: 1024px) and (max-width: 1099px) { .st th b { font-size: 36px; } }
/* 2 x 2: a checkerboard, so each column and the hanging row carry both colours */
@media (min-width: 560px) and (max-width: 1023px) {
  .st tbody tr:nth-child(3) { --st-bg: var(--ic-bg); --st-rim: rgba(255, 255, 255, .14); --st-fig: #FFFFFF; --st-tx: #E9F2FA; }
  .st tbody tr:nth-child(4) { --st-bg: var(--wh-bg); --st-rim: rgba(15, 27, 38, .08); --st-fig: #E8541F; --st-tx: #4A5663; }
}
@media (max-width: 767px) {
  :root { --st-hang: 72px; }
  .hero--inner .hc2 { padding-top: 36px; }
  .st th b { font-size: 36px; }
  .sp__grid { grid-template-columns: 1fr; }
  .tg { grid-template-columns: 88px 1fr; } .tg b { font-size: 42px; }
  /* the comparison stacks: one card per row, each value under its column name (the Notion header) */
  .wh__card { overflow: visible; }
  .wh__t { min-width: 0; }
  .wh__t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wh__t, .wh__t tbody, .wh__t tr, .wh__t tbody th, .wh__t tbody td { display: block; width: auto; }
  .wh__t tbody tr { padding: 18px 18px 20px; }
  .wh__t tbody tr + tr { border-top: 1px solid var(--line); }
  .wh__t tbody tr + tr > * { border-top: 0; }
  .wh__t tbody th { padding: 0 0 6px; background: none; font-size: 17px; }
  .wh__t tbody td { padding: 10px 0 0; border-left: 0; }
  .wh__t tbody td::before { content: attr(data-label); display: block; margin-bottom: 3px; font: 700 16px/1.2 var(--fd); letter-spacing: .01em; color: #0E67A8; }
  .wh__t tbody td + td::before { color: var(--night); }
}
@media (max-width: 559px) { .st tbody, .gal__row { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .sp__card, .gal__ph img { transition: none; } .sp__card:hover { transform: none; } }