/* Nero's /services/ (scripts/build_services.py), on top of hero-centre.css + inner.css. Round 2 (Shoaib 11-04): a calmer,
   fuller hero; the equipment bento; the homepage's area, reviews, FAQ and CTA sections (their own CSS).
   Kit: Antonio + Sofia Sans, night / page / alt tones, the flame-tip cut corner, white cards, the service colours
   (AC ice, heating flame, heat pump flame + ice, ductless ice, water red, indoor air green, light commercial slate). */

/* ---------- the service colours, one set per family ---------- */
.bx--ice, .sv-chip--ice { --tone: linear-gradient(145deg, #5FB3EC 0%, #1E88D6 48%, #0E67A8 100%); --tone-line: linear-gradient(90deg, #5FB3EC, #0E67A8); --tone-deep: #0E67A8; --tone-ink: #0E67A8; --tone-tint: #E8F3FC; --tone-glow: rgba(14, 103, 168, .55); }
.bx--flame, .sv-chip--flame { --tone: linear-gradient(145deg, #F7934A 0%, #F0641E 48%, #C4411A 100%); --tone-line: linear-gradient(90deg, #F7934A, #C4411A); --tone-deep: #B83C16; --tone-ink: #B83C16; --tone-tint: #FFF1E8; --tone-glow: rgba(196, 65, 26, .55); }
.bx--split, .sv-chip--split { --tone: linear-gradient(90deg, #F0641E 0 50%, #1E88D6 50% 100%); --tone-line: linear-gradient(90deg, #F0641E 0 50%, #1E88D6 50% 100%); --tone-deep: linear-gradient(90deg, #B83C16 0 50%, #0E67A8 50% 100%); --tone-ink: #0E67A8; --tone-tint: #EDF3F9; --tone-glow: rgba(14, 103, 168, .45); }
.bx--water, .sv-chip--water { --tone: linear-gradient(145deg, #F27272 0%, #D63A3F 50%, #A8202A 100%); --tone-line: linear-gradient(90deg, #F27272, #A8202A); --tone-deep: #A8202A; --tone-ink: #A8202A; --tone-tint: #FDECEC; --tone-glow: rgba(168, 32, 42, .55); }
.bx--air, .sv-chip--air { --tone: linear-gradient(145deg, #5FCF86 0%, #2E9E5B 50%, #1E7A43 100%); --tone-line: linear-gradient(90deg, #5FCF86, #1E7A43); --tone-deep: #1E7A43; --tone-ink: #1E7A43; --tone-tint: #E7F6EC; --tone-glow: rgba(30, 122, 67, .55); }
.bx--slate, .sv-chip--slate { --tone: linear-gradient(145deg, #8DA6BC 0%, #4F6C87 50%, #2B4258 100%); --tone-line: linear-gradient(90deg, #8DA6BC, #2B4258); --tone-deep: #2B4258; --tone-ink: #2B4258; --tone-tint: #EAF0F5; --tone-glow: rgba(43, 66, 88, .55); }

/* ---------- hero: the inner hero (split, the form right) with the Notion H1 in its two sizes ---------- */
.sv-hero .hi__copy { padding-top: 0; }
/* the basement photo is brighter than the AC hub's gauges, so the film holds a little longer under the copy */
.sv-hero.hero--split .hero__bg img { object-position: 62% 50%; }
.sv-hero.hero--split .hero__bg::after { background: linear-gradient(90deg, rgba(8, 24, 41, .96) 0%, rgba(8, 24, 41, .9) 42%, rgba(8, 24, 41, .62) 62%, rgba(8, 24, 41, .26) 100%),
  linear-gradient(180deg, rgba(8, 24, 41, .4) 0%, transparent 30%, transparent 70%, rgba(8, 22, 38, .85) 100%); }
.sv__h1 { gap: 10px; }
.sv-hero.hero--split .hc2__l1 { font-size: 56px; line-height: 1.04; text-wrap: balance; }
.sv-hero.hero--split .hc2__l2 { font-size: 30px; line-height: 1.12; color: #E3EEF7; }
/* the words that are not lit stay plain white: one sheen-free colour, the word rise kept */
.sv-hero .hc2__l1 .w--plain { color: #F7F9FB; background: none; -webkit-background-clip: border-box; background-clip: border-box;
  animation: hc-word .7s var(--ease) both; animation-delay: calc(var(--w) * 70ms); }
.sv-hero .hc2__area { margin-top: 20px; }
.sv-hero .actions { margin-top: 26px; }
/* the seven equipment headings as a jump row */
.sv-chips { display: flex; flex-wrap: wrap; gap: 10px; max-width: 720px; margin: 30px 0 0; padding: 0; list-style: none; }
.sv-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 5px 16px 5px 5px; border-radius: 999px; color: #F7F9FB; text-decoration: none;
  font: 700 15px/1.15 var(--fb); background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .2); transition: background-color .2s var(--ease), transform .2s var(--ease); }
.sv-chip:hover { background: rgba(255, 255, 255, .16); transform: translateY(-2px); }
.sv-chip:focus-visible { outline: 3px solid #F58A3C; outline-offset: 2px; }
.sv-chip__dot { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; color: #FFFFFF; background: var(--tone); box-shadow: 0 8px 14px -8px var(--tone-glow); }
.sv-chip__dot .eq { width: 19px; height: 19px; fill: currentColor; }
@media (max-width: 1279px) { .sv-hero.hero--split .hc2__l1 { font-size: 50px; } .sv-hero.hero--split .hc2__l2 { font-size: 27px; } }
@media (max-width: 1023px) {
  .sv-hero.hero--split .hc2__l1 { font-size: 54px; }
  .sv-hero.hero--split .hero__bg::after { background: linear-gradient(180deg, rgba(8, 24, 41, .88) 0%, rgba(8, 24, 41, .84) 55%, rgba(8, 24, 41, .8) 80%, rgba(8, 22, 38, .92) 100%); }
}
@media (max-width: 767px) {
  .sv-hero.hero--split .hc2__l1 { font-size: 36px; } .sv-hero.hero--split .hc2__l2 { font-size: 21px; line-height: 1.18; }
  .sv-chips { gap: 8px; margin-top: 24px; }
  .sv-chip { font-size: 14px; padding-right: 13px; }
  .sv-chip__dot { width: 34px; height: 34px; }
}
@media (max-width: 374px) { .sv-hero.hero--split .hc2__l1 { font-size: 32px; } .sv-hero.hero--split .hc2__l2 { font-size: 19px; } }

/* ---------- round 3: the services section shows one of four directions (review switcher, ?v=a|b|c|d) ---------- */
[data-variant] { display: none; }
html:not([data-v]) [data-variant="a"], html[data-v="a"] [data-variant="a"], html[data-v="b"] [data-variant="b"],
html[data-v="c"] [data-variant="c"], html[data-v="d"] [data-variant="d"] { display: block; }
.vsw { position: fixed; z-index: 1200; right: 16px; bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: calc(100vw - 32px); padding: 8px;
  border-radius: 14px; background: rgba(11, 22, 34, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .14); }
.vsw__t { padding: 0 6px; font: 700 14px/1 var(--fb); color: #CFE6F7; }
.vsw__b { min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; font: 700 14px/1 var(--fb); color: #F7F9FB; background: rgba(255, 255, 255, .1); cursor: pointer; }
.vsw__b[aria-pressed="true"] { color: #FFFFFF; background: linear-gradient(150deg, #F7934A, #F0641E 50%, #C4411A); }
@media (max-width: 767px) { .vsw { bottom: 84px; } .vsw__t { display: none; } .vsw__b { padding: 0 10px; } }

/* ---------- intro: room underneath for the bento's first row (D), which hangs across the seam ---------- */
:root { --bx-hang: 150px; }
.sec.sv-in { padding-bottom: calc(84px + var(--bx-hang)); }

/* the family colours for the three new directions */
.fb--ice, .fz--ice, .fc--ice { --tone: linear-gradient(145deg, #5FB3EC 0%, #1E88D6 48%, #0E67A8 100%); --tone-deep: #0E67A8; --tone-ink: #0E67A8; --tone-tint: #E8F3FC; --tone-glow: rgba(14, 103, 168, .55); --tone-on-dark: #7CC2F2; }
.fb--flame, .fz--flame, .fc--flame { --tone: linear-gradient(145deg, #F7934A 0%, #F0641E 48%, #C4411A 100%); --tone-deep: #B83C16; --tone-ink: #B83C16; --tone-tint: #FFF1E8; --tone-glow: rgba(196, 65, 26, .55); --tone-on-dark: #F7934A; }
.fb--split, .fz--split, .fc--split { --tone: linear-gradient(90deg, #F0641E 0 50%, #1E88D6 50% 100%); --tone-deep: linear-gradient(90deg, #B83C16 0 50%, #0E67A8 50% 100%); --tone-ink: #0E67A8; --tone-tint: #EDF3F9; --tone-glow: rgba(14, 103, 168, .45); --tone-on-dark: #7CC2F2; }
.fb--water, .fz--water, .fc--water { --tone: linear-gradient(145deg, #F27272 0%, #D63A3F 50%, #A8202A 100%); --tone-deep: #A8202A; --tone-ink: #A8202A; --tone-tint: #FDECEC; --tone-glow: rgba(168, 32, 42, .55); --tone-on-dark: #F49494; }
.fb--air, .fz--air, .fc--air { --tone: linear-gradient(145deg, #5FCF86 0%, #2E9E5B 50%, #1E7A43 100%); --tone-deep: #1E7A43; --tone-ink: #1E7A43; --tone-tint: #E7F6EC; --tone-glow: rgba(30, 122, 67, .55); --tone-on-dark: #7FDB9F; }
.fb--slate, .fz--slate, .fc--slate { --tone: linear-gradient(145deg, #8DA6BC 0%, #4F6C87 50%, #2B4258 100%); --tone-deep: #2B4258; --tone-ink: #2B4258; --tone-tint: #EAF0F5; --tone-glow: rgba(43, 66, 88, .55); --tone-on-dark: #B5C7D8; }

/* shared row anatomy for A and B: a disc, the H2 (hub link), the paragraph, the pages as hairline rows */
.fb__ic, .fz__ic { width: 62px; height: 62px; flex: none; display: grid; place-items: center; border-radius: 50%; color: #FFFFFF; background: var(--tone); box-shadow: 0 16px 28px -12px var(--tone-glow); }
.fb__ic .eq, .fz__ic .eq { width: 31px; height: 31px; fill: currentColor; }
.fb__h, .fz__h { margin: 0; font: 700 50px/1.02 var(--fd); letter-spacing: .01em; }
.fb__h a, .fz__h a { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; color: inherit; text-decoration: none; }
.fb__ha, .fz__ha { width: 30px; height: 30px; flex: none; transition: transform .25s var(--ease); }
.fb__h a:hover .fb__ha, .fz__h a:hover .fz__ha, .fb__h a:focus-visible .fb__ha, .fz__h a:focus-visible .fz__ha { transform: translateX(6px); }
.fb__p, .fz__p { margin-top: 16px; max-width: 62ch; font-size: 17px; line-height: 1.7; }
.fb__list, .fz__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; margin: 26px 0 0; padding: 0; list-style: none; }
.fb__list li, .fz__list li { border-bottom: 1px solid var(--rl); }
.fb__list li:nth-child(-n+2), .fz__list li:nth-child(-n+2) { border-top: 1px solid var(--rl); }
.fb__list a, .fz__list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 8px 0; font: 700 16px/1.3 var(--fb); color: inherit; text-decoration: none; transition: color .2s var(--ease); }
.fb__ia, .fz__ia { width: 30px; height: 30px; flex: none; padding: 7px; box-sizing: border-box; border-radius: 50%; transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.fb__list a:hover .fb__ia, .fz__list a:hover .fz__ia, .fb__list a:focus-visible .fb__ia, .fz__list a:focus-visible .fz__ia { color: #FFFFFF; background: var(--tone-deep); transform: translateX(3px); }
.fb__list a:focus-visible, .fz__list a:focus-visible, .fc__chips a:focus-visible { outline: 3px solid #F58A3C; outline-offset: 2px; }

/* ---------- A: INM's rhythm, one band per family ---------- */
.fb { scroll-margin-top: 64px; }
.fb__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
.fb__in--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.fb__in--flip .fb__ph { order: 2; }
.fb__head { display: flex; align-items: center; gap: 18px; }
.fb__ph { position: relative; margin: 0 22px 22px 0; }
.fb__in--flip .fb__ph { margin: 0 0 22px 22px; }
/* the family plate behind the photo, offset like INM's frame, in Nero's cut corner */
.fb__ph::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; border-radius: 20px; background: var(--tone); clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 0 100%); }
.fb__in--flip .fb__ph::before { inset: 22px 22px -22px -22px; }
.fb__ph img { position: relative; display: block; width: 100%; aspect-ratio: 5 / 4; height: auto; object-fit: cover; border-radius: 20px;
  clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 0 100%); }
.fb--dark { --rl: rgba(247, 249, 251, .16); color: #F7F9FB; }
.fb--dark .fb__h { color: #FFFFFF; }
.fb--dark .fb__h a:hover, .fb--dark .fb__h a:focus-visible { color: var(--tone-on-dark); }
.fb--dark .fb__ha { color: var(--tone-on-dark); }
.fb--dark .fb__p { color: rgba(247, 249, 251, .86); }
.fb--dark .fb__list a { color: #F7F9FB; }
.fb--dark .fb__list a:hover { color: var(--tone-on-dark); }
.fb--dark .fb__ia { color: #FFFFFF; background: rgba(255, 255, 255, .12); }
.fb--light { --rl: var(--line); }
.fb--light .fb__h { color: var(--night); }
.fb--light .fb__h a:hover, .fb--light .fb__h a:focus-visible, .fb--light .fb__list a:hover { color: var(--tone-ink); }
.fb--light .fb__ha { color: var(--tone-ink); }
.fb--light .fb__p { color: var(--muted); }
.fb--light .fb__list a { color: var(--night); }
.fb--light .fb__ia { color: var(--tone-ink); background: var(--tone-tint); }
.fb__list--7 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- B: Precision's zigzag, one band ---------- */
.fz { --rl: rgba(247, 249, 251, .16); display: grid; gap: 112px; color: #F7F9FB; }
.fz__row { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); gap: 72px; align-items: center; scroll-margin-top: 110px; }
.fz__row--flip { grid-template-columns: minmax(0, 13fr) minmax(0, 11fr); }
.fz__row--flip .fz__ph { order: 2; }
.fz__ph { position: relative; margin: 0; }
.fz__ph img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 20px; box-shadow: 26px 26px 0 -2px var(--tone-deep), 0 40px 60px -30px rgba(0, 0, 0, .8);
  clip-path: inset(0 -40px -40px 0 round 20px); }
.fz__row--flip .fz__ph img { box-shadow: -26px 26px 0 -2px var(--tone-deep), 0 40px 60px -30px rgba(0, 0, 0, .8); clip-path: inset(0 0 -40px -40px round 20px); }
.fz--split .fz__ph img { box-shadow: 26px 26px 0 -2px #1E88D6, 0 40px 60px -30px rgba(0, 0, 0, .8); }
.fz--split.fz__row--flip .fz__ph img { box-shadow: -26px 26px 0 -2px #1E88D6, 0 40px 60px -30px rgba(0, 0, 0, .8); }
.fz__ph .fz__ic { position: absolute; left: 24px; bottom: -31px; box-shadow: 0 0 0 5px #0B1622, 0 16px 28px -12px var(--tone-glow); }
.fz__row--flip .fz__ph .fz__ic { left: auto; right: 24px; }
.fz__h { color: #FFFFFF; }
.fz__ha { color: var(--tone-on-dark); }
.fz__h a:hover, .fz__h a:focus-visible, .fz__list a:hover { color: var(--tone-on-dark); }
.fz__p { color: rgba(247, 249, 251, .86); }
.fz__ia { color: #FFFFFF; background: rgba(255, 255, 255, .12); }

/* ---------- C: CityLine's family cards, two columns ---------- */
.fc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.fc { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: #FFFFFF; color: var(--ink); scroll-margin-top: 110px;
  box-shadow: inset 0 5px 0 0 transparent; }
.fc::before { content: ""; position: absolute; z-index: 2; inset: 0 0 auto 0; height: 5px; background: var(--tone); }
.fc__ph { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: #0B1622; }
.fc__ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.fc:hover .fc__ph img { transform: scale(1.04); }
.fc__body { position: relative; display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 0 32px 32px; }
.fc__ic { width: 62px; height: 62px; margin-top: -31px; display: grid; place-items: center; border-radius: 16px; color: #FFFFFF; background: var(--tone); box-shadow: 0 0 0 5px #FFFFFF, 0 16px 28px -12px var(--tone-glow); }
.fc__ic .eq { width: 31px; height: 31px; fill: currentColor; }
.fc__h { margin: 4px 0 0; font: 700 36px/1.05 var(--fd); letter-spacing: .01em; color: var(--night); }
.fc__h a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: inherit; text-decoration: none; }
.fc__ha { width: 26px; height: 26px; color: var(--tone-ink); transition: transform .25s var(--ease); }
.fc__h a:hover, .fc__h a:focus-visible { color: var(--tone-ink); }
.fc__h a:hover .fc__ha { transform: translateX(5px); }
.fc__body > p { font-size: 16px; line-height: 1.68; color: var(--muted); }
.fc__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: auto 0 0; padding: 8px 0 0; list-style: none; }
.fc__chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 10px; font: 700 15px/1.25 var(--fb); color: var(--tone-ink); background: var(--tone-tint);
  text-decoration: none; transition: background .2s var(--ease), color .2s var(--ease); }
.fc__chips a:hover { color: #FFFFFF; background: var(--tone-deep); }
.fc--wide { grid-column: 1 / -1; flex-direction: row; }
.fc--wide .fc__ph { flex: 0 0 46%; aspect-ratio: auto; min-height: 340px; }
.fc--wide .fc__body { padding: 36px 40px; }
.fc--wide .fc__ic { margin-top: 0; }

/* ---------- the dark form band (the homepage's) and the gallery ---------- */
.sv-book .emg__lead { max-width: 620px; }
.sv-book .ec__acts { margin-top: 30px; }
.sg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 300px; gap: 18px; margin-top: 40px; }
.sg__ph { position: relative; margin: 0; overflow: hidden; border-radius: 16px; background: #0B1622; box-shadow: 0 24px 40px -30px rgba(11, 22, 34, .6); }
.sg__ph--w { grid-column: span 2; }
.sg__ph:first-child { clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); }
.sg__ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.sg__ph:hover img { transform: scale(1.05); }

/* ---------- the equipment bento (dark band): seven photo-led cards, narrow and wide mixed ---------- */
.sec--dark.has-bowl.bx-band { padding-top: 0; }
.bx-grid { position: relative; z-index: 4; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: calc(-1 * var(--bx-hang)); }
.bx { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 18px; background: #FFFFFF; color: var(--ink);
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%); scroll-margin-top: 110px; transition: transform .3s var(--ease); }
.bx:hover { transform: translateY(-4px); }
.bx--w { grid-column: span 2; }
/* the photo, with a collar line in the family colour along its foot (the torch's collar); wide cards keep the same
   photo height as the narrow ones, so the collars line up across the row */
.bx__ph { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #0B1622; }
/* a wide card is shorter in copy than its narrow neighbour, so its photo takes the spare height (no white gap at the foot) */
.bx--w .bx__ph { aspect-ratio: auto; flex: 1 1 auto; min-height: 220px; }
.bx__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform .7s var(--ease); }
.bx:hover .bx__ph img { transform: scale(1.04); }
.bx__ph::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--tone-line); }
/* the family disc sits on the collar */
.bx__ic { position: relative; z-index: 2; align-self: flex-start; width: 62px; height: 62px; margin: -31px 0 0 26px; display: grid; place-items: center; border-radius: 50%;
  color: #FFFFFF; background: var(--tone); box-shadow: 0 0 0 5px #FFFFFF, 0 16px 28px -12px var(--tone-glow); transition: transform .3s var(--ease); }
.bx__ic .eq { width: 31px; height: 31px; fill: currentColor; }
.bx:hover .bx__ic { transform: translateY(-3px); }
.bx__body { display: flex; flex: 1; flex-direction: column; gap: 16px; padding: 14px 30px 30px; }
.bx__copy { display: grid; gap: 10px; }
.bx__h { display: flex; align-items: center; min-height: 44px; margin: 0; font: 700 34px/1.05 var(--fd); letter-spacing: .01em; color: var(--night); }
.bx__h a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: inherit; text-decoration: none; }
.bx__ha { width: 24px; height: 24px; flex: none; color: var(--tone-ink); transition: transform .25s var(--ease); }
.bx__h a:hover, .bx__h a:focus-visible { color: var(--tone-ink); }
.bx__h a:hover .bx__ha, .bx__h a:focus-visible .bx__ha { transform: translateX(5px); }
.bx__copy p { font-size: 15.5px; line-height: 1.66; color: var(--muted); }
/* the family's pages: open rows on hairlines, each with the family's arrow disc, straight under the paragraph (Shoaib
   11-04: three cards a row; Heating's seven pages make the first row tall, so pinned lists would leave a gap mid-card) */
.bx__list { display: grid; margin: 4px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
/* three a row: the seventh card (Light Commercial) sits in the middle of the last row */
@media (min-width: 1100px) { .bx:last-child:nth-child(3n + 1) { grid-column: 2; } }
.bx__list li { border-bottom: 1px solid var(--line); }
.bx__list a { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; padding: 8px 2px 8px 0;
  font: 700 16px/1.3 var(--fb); color: var(--night); text-decoration: none; transition: color .2s var(--ease); }
.bx__ia { width: 30px; height: 30px; flex: none; padding: 7px; box-sizing: border-box; border-radius: 50%; color: var(--tone-ink); background: var(--tone-tint);
  transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.bx__list a:hover, .bx__list a:focus-visible { color: var(--tone-ink); }
.bx__list a:hover .bx__ia, .bx__list a:focus-visible .bx__ia { color: #FFFFFF; background: var(--tone-deep); transform: translateX(3px); }
.bx__list a:focus-visible { outline: 3px solid #F58A3C; outline-offset: 2px; }
/* wide cards: the copy and the pages side by side under the photo */
.bx--w .bx__body { flex: none; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 0 40px; align-items: start; }
.bx--w .bx__list { margin-top: 12px; }

/* ---------- FAQ: the homepage panel; the FAQ hub's answers keep their two paragraphs ---------- */
.sv-faq .acc__inner p { margin-bottom: 0; }
.sv-faq .acc__inner p + p { margin-top: 12px; }

/* ---------- the call band (Notion "Give Us a Call Today"): the AC hub's book band ---------- */
.sv-call__copy .actions { justify-content: flex-start; margin-top: 26px; }

/* ---------- narrow ---------- */
@media (max-width: 1099px) {
  :root { --bx-hang: 116px; }
  .bx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .bx--w { grid-column: auto; }
  .bx--w .bx__ph { aspect-ratio: 16 / 9; flex: none; min-height: 0; }
  .bx--w .bx__body { display: flex; flex: 1; }
  .bx--w .bx__list { margin-top: auto; }
  /* two columns: light commercial closes the grid as the wide card */
  .bx--wt { grid-column: span 2; }
  .bx--wt .bx__ph { aspect-ratio: 3.4 / 1; }
  .bx--wt .bx__body { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 0 32px; align-items: start; }
  .bx--wt .bx__list { margin-top: 12px; }
  .bx__h { font-size: 31px; }
  .bx__body { padding: 14px 26px 26px; }
}
@media (max-width: 699px) {
  :root { --bx-hang: 88px; }
  .sec.sv-in { padding-bottom: calc(64px + var(--bx-hang)); }
  .bx-grid { grid-template-columns: 1fr; gap: 18px; }
  .bx--wt { grid-column: auto; }
  .bx--wt .bx__ph { aspect-ratio: 16 / 9; }
  .bx--wt .bx__body { display: flex; }
  .bx--wt .bx__list { margin-top: auto; }
  .bx { clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }
  .bx__ic { width: 56px; height: 56px; margin: -28px 0 0 20px; }
  .bx__ic .eq { width: 28px; height: 28px; }
  .bx__body { padding: 12px 20px 22px; gap: 14px; }
  .bx__h { font-size: 30px; }
  .bx__copy p { font-size: 15.5px; }
}
/* the three new directions and the gallery, narrow */
@media (max-width: 1099px) {
  .fb__in, .fz__row { gap: 48px; }
  .fb__h, .fz__h { font-size: 44px; }
  .fz { gap: 96px; }
}
@media (max-width: 899px) {
  .fb__in, .fz__row { grid-template-columns: 1fr; gap: 40px; }
  .fb__in--flip .fb__ph, .fz__row--flip .fz__ph { order: 0; }
  .fb__ph, .fb__in--flip .fb__ph { width: calc(100% - 22px); margin: 0 22px 22px 0; }
  .fb__in--flip .fb__ph::before { inset: 22px -22px -22px 22px; }
  .fz__ph, .fz__row--flip .fz__ph { width: calc(100% - 26px); }
  .fz__row--flip .fz__ph img { box-shadow: 26px 26px 0 -2px var(--tone-deep), 0 40px 60px -30px rgba(0, 0, 0, .8); clip-path: inset(0 -40px -40px 0 round 20px); }
  .fz__row--flip .fz__ph .fz__ic { left: 24px; right: auto; }
  .fc-grid { grid-template-columns: 1fr; }
  .fc--wide { flex-direction: column; }
  .fc--wide .fc__ph { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
  .fc--wide .fc__body { padding: 0 32px 32px; }
  .fc--wide .fc__ic { margin-top: -31px; }
  .sg { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 260px; }
}
@media (max-width: 599px) {
  .fb__h, .fz__h { font-size: 36px; }
  .fb__ic, .fz__ic { width: 54px; height: 54px; } .fb__ic .eq, .fz__ic .eq { width: 27px; height: 27px; }
  .fb__head { gap: 14px; }
  .fb__p, .fz__p { font-size: 16px; }
  .fb__list, .fz__list, .fb__list--7 { grid-template-columns: 1fr; }
  .fb__list li:nth-child(2), .fz__list li:nth-child(2) { border-top: 0; }
  .fz { gap: 80px; }
  .fc__body, .fc--wide .fc__body { padding: 0 20px 24px; }
  .fc__h { font-size: 31px; }
  .sg { grid-auto-rows: 200px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .fb__ha, .fz__ha, .fb__ia, .fz__ia, .fc__ph img, .fc__ha, .sg__ph img { transition: none; }
  .fc:hover .fc__ph img, .sg__ph:hover img { transform: none; }
  .bx, .bx__ph img, .bx__ic, .bx__ia, .bx__ha, .sv-chip { transition: none; }
  .bx:hover, .bx:hover .bx__ph img, .bx:hover .bx__ic, .sv-chip:hover { transform: none; }
}