/* 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 four steps (a real sequence; dark band) ---------- */
.pr__head { max-width: 880px; margin: 0 auto; text-align: center; }
.pr__head .h2 { color: #FFFFFF; }
.pr__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 44px 0 0; padding: 0; list-style: none; }
.pr__step { display: grid; align-content: start; gap: 12px; padding: 28px 24px 28px; border-radius: 18px; color: #F7F9FB;
  background: rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .22); }
.pr__t { font: 700 23px/1.2 var(--fd); letter-spacing: .01em; color: #FFFFFF; }
.pr__k { display: inline-flex; align-items: center; min-height: 30px; margin-bottom: 10px; padding: 0 12px; border-radius: 999px; font: 700 14px/1 var(--fb); letter-spacing: .04em;
  color: #FFFFFF; background: linear-gradient(150deg, #F7934A, #F0641E 50%, #C4411A); }
.pr__step:nth-child(even) .pr__k { background: linear-gradient(150deg, #5FB3EC, #1E88D6 50%, #0E67A8); }
.pr__k + br { display: none; }
.pr__step p { font-size: 15.5px; line-height: 1.6; color: rgba(247, 249, 251, .86); }
.pr__t .pr__k { display: flex; width: fit-content; }

/* ---------- 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, .pr__list, .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, .pr__list { 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; } }