/* advancedair - system.css. Generated by rebuild/gen_system.py from the base's own rendered
   page (fixtures/advancedair-shape); never edit by hand. Loaded only on a page that uses
   composition: .r-<role> is a type role, --sys-* a shape the base draws, and
   .sys-cols the column mechanism, with the base's own gap. */

:root {
  --sys-gap: 20px;
  --sys-radius-1: 50px 0px 50px 0px;
  --sys-radius-2: 0px 0px 100px 0px;
  --sys-radius-3: 100px 0px 100px 0px;
  --sys-radius-4: 16px 16px 16px 16px;
  --sys-radius-5: 0px 0px 50px 0px;
  --sys-radius-6: 0px 0px 200px 0px;
  --sys-radius-7: 50px 0px 0px 0px;
  --sys-radius-8: 150px 0px 150px 0px;
  --sys-radius-9: 200px 0px 0px 0px;
  --sys-radius-10: 100px 0px 0px 0px;
  --sys-shadow-1: 0px 3px 25px 0px;
  --sys-shadow-2: 0px 1px 4px 0px;
  --sys-shadow-3: 0px 4px 32px 0px;
  --sys-shadow-4: 0px 3.5px 28px 0px;
  --sys-border-1: 1px solid;
  --sys-border-2: 5px solid;
  --sys-border-3: 2px solid;
  --sys-space-1: 1px;
  --sys-space-2: 3px;
  --sys-space-3: 4.9px;
  --sys-space-4: 5px;
  --sys-space-5: 5.6px;
  --sys-space-6: 6px;
  --sys-space-7: 7px;
  --sys-space-8: 8px;
  --sys-space-9: 8.75px;
  --sys-space-10: 10px;
  --sys-space-11: 10.5px;
  --sys-space-12: 11.2px;
  --sys-space-13: 12px;
  --sys-space-14: 14px;
  --sys-space-15: 15px;
  --sys-space-16: 16px;
  --sys-space-17: 19.2031px;
  --sys-space-18: 19.5px;
  --sys-space-19: 20px;
  --sys-space-20: 21px;
  --sys-space-21: 22.5px;
  --sys-space-22: 23.4062px;
  --sys-space-23: 24px;
  --sys-space-24: 25px;
  --sys-space-25: 30px;
  --sys-space-26: 32px;
  --sys-space-27: 35px;
  --sys-space-28: 37.3125px;
  --sys-space-29: 37.3281px;
  --sys-space-30: 37.5px;
  --sys-space-31: 40px;
  --sys-space-32: 45.9531px;
  --sys-space-33: 45.9688px;
  --sys-space-34: 50px;
  --sys-space-35: 52.3125px;
  --sys-space-36: 52.3281px;
  --sys-space-37: 58.6875px;
  --sys-space-38: 60px;
  --sys-space-39: 65.3438px;
  --sys-space-40: 70px;
  --sys-space-41: 75px;
  --sys-space-42: 100px;
  --sys-space-43: 120px;
  --sys-space-44: 125px;
  --sys-space-45: 135px;
  --sys-c-1: rgb(135, 151, 162);
  --sys-c-2: rgba(0, 0, 0, 0.15);
  --sys-c-3: rgba(18, 25, 97, 0.08);
}

.r-about__body { font-family: "Instrument Sans"; font-size: 16px; line-height: 28.8px; font-weight: 400; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-areas__cityname { font-family: "Instrument Sans"; font-size: 24px; line-height: 31.2px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-areas__h2 { font-family: "Instrument Sans"; font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-bar__loc { font-family: "Titillium Web"; font-size: 14.4px; line-height: 20.16px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-style: normal; }
.r-bar__or { font-family: "Instrument Sans"; font-size: 16px; line-height: 25.6px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-bar__phone { font-family: "Instrument Sans"; font-size: 17.6px; line-height: 24.64px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-btn__label { font-family: "Titillium Web"; font-size: 16px; line-height: 16px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-style: normal; }
.r-contact__addr-text { font-family: "Instrument Sans"; font-size: 16px; line-height: 19.2px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-contact__formtitle { font-family: "Instrument Sans"; font-size: 24px; line-height: 33.6px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-contact__submit { font-family: "Titillium Web"; font-size: 14px; line-height: 16.8px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-style: normal; }
.r-cr__legal { font-family: "Instrument Sans"; font-size: 14.4px; line-height: 20.16px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-cr__text { font-family: "Instrument Sans"; font-size: 14.4px; line-height: 23.04px; font-weight: 400; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-eyebrow { font-family: "Titillium Web"; font-size: 17.6px; line-height: 25.6px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-style: normal; }
.r-feat__body { font-family: "Instrument Sans"; font-size: 16px; line-height: 22.4px; font-weight: 400; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-feat__title { font-family: "Instrument Sans"; font-size: 24px; line-height: 33.6px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-ft__addr-text { font-family: "Instrument Sans"; font-size: 16px; line-height: 16px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-ft__heading { font-family: "Titillium Web"; font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-style: normal; }
.r-ft__link { font-family: "Instrument Sans"; font-size: 16px; line-height: 16px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-h1 { font-family: "Instrument Sans"; font-size: 48px; line-height: 57.6px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-h3 { font-family: "Instrument Sans"; font-size: 32px; line-height: 44.8px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-hd__navlabel { font-family: "Instrument Sans"; font-size: 16px; line-height: 16px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-hd__promo-text { font-family: "Instrument Sans"; font-size: 16px; line-height: 22.4px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-hero__body { font-family: "Instrument Sans"; font-size: 16px; line-height: 22.4px; font-weight: 500; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-hero__eyebrow { font-family: "Titillium Web"; font-size: 32px; line-height: 25.6px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-style: normal; }
.r-p { font-family: "Instrument Sans"; font-size: 16px; line-height: 25.6px; font-weight: 400; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-promo__h { font-family: "Instrument Sans"; font-size: 32px; line-height: 44.8px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
.r-why__title { font-family: "Instrument Sans"; font-size: 24px; line-height: 33.6px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
.sys-cols { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sys-gap); margin: 0; padding: 0; list-style: none; }
.sys-cols--start { justify-content: flex-start; }
.sys-cols > * { flex: 0 0 calc((100% - (var(--sys-n) - 1) * var(--sys-gap)) / var(--sys-n)); min-width: 0; }
.sys-cols--feature > :first-child { flex-basis: 100%; }
.sys-cols-2 { --sys-n: 2; }
.sys-cols-3 { --sys-n: 3; }
.sys-cols-4 { --sys-n: 4; }
.sys-cols-5 { --sys-n: 5; }
.sys-n.sys-n { flex-wrap: wrap; justify-content: center; row-gap: var(--sys-gap); }
.sys-n.sys-n--start { justify-content: flex-start; }
.sys-n-2.sys-n-2 > * { flex: 0 0 calc(100% / 2); max-width: calc(100% / 2); }
.sys-n-3.sys-n-3 > * { flex: 0 0 calc(100% / 3); max-width: calc(100% / 3); }
.sys-n-4.sys-n-4 > * { flex: 0 0 calc(100% / 4); max-width: calc(100% / 4); }
.sys-n-5.sys-n-5 > * { flex: 0 0 calc(100% / 5); max-width: calc(100% / 5); }
.sys-n--feature.sys-n--feature > :first-child { flex-basis: 100%; max-width: 100%; }
@media (max-width: 978px) {
  .r-h3 { font-size: 24px; line-height: 33.6px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
  .sys-cols-3, .sys-cols-4, .sys-cols-5 { --sys-n: 2; }
  .sys-n-3.sys-n-3 > *, .sys-n-4.sys-n-4 > *, .sys-n-5.sys-n-5 > * { flex: 0 0 calc(100% / 2); max-width: calc(100% / 2); }
}
@media (max-width: 766px) {
  .r-areas__cityname { font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
  .r-areas__h2 { font-size: 36px; line-height: 43.2px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
  .r-bar__phone { font-size: 16px; line-height: 22.4px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
  .r-h3 { font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
  .r-hd__promo-text { font-size: 14.4px; line-height: 20.16px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
  .r-promo__h { font-size: 24px; line-height: 33.6px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
  .r-why__title { font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
}
@media (max-width: 765px) {
  .r-about__body { font-size: 14px; line-height: 25.2px; font-weight: 400; letter-spacing: normal; text-transform: none; font-style: normal; }
  .r-areas__cityname { font-size: 17.5px; line-height: 22.75px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
  .r-areas__h2 { font-size: 31.5px; line-height: 37.8px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
  .r-bar__loc { font-size: 12.6px; line-height: 17.64px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-style: normal; }
  .r-bar__or { font-size: 14px; line-height: 22.4px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
  .r-bar__phone { font-size: 14px; line-height: 19.6px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
  .r-btn__label { font-size: 14px; line-height: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-style: normal; }
  .r-contact__addr-text { font-size: 14px; line-height: 16.8px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
  .r-contact__formtitle { font-size: 21px; line-height: 29.4px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
  .r-cr__legal { font-size: 12.6px; line-height: 17.64px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
  .r-cr__text { font-size: 12.6px; line-height: 20.16px; font-weight: 400; letter-spacing: normal; text-transform: none; font-style: normal; }
  .r-eyebrow { font-size: 15.4px; line-height: 22.4px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-style: normal; }
  .r-feat__body { font-size: 14px; line-height: 19.6px; font-weight: 400; letter-spacing: normal; text-transform: none; font-style: normal; }
  .r-feat__title { font-size: 21px; line-height: 29.4px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
  .r-ft__addr-text { font-size: 14px; line-height: 14px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
  .r-h1 { font-size: 42px; line-height: 50.4px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
  .r-h3 { font-size: 17.5px; line-height: 24.5px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
  .r-hd__promo-text { font-size: 12.6px; line-height: 17.64px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
  .r-hero__body { font-size: 14px; line-height: 19.6px; font-weight: 500; letter-spacing: normal; text-transform: none; font-style: normal; }
  .r-hero__eyebrow { font-size: 28px; line-height: 22.4px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-style: normal; }
  .r-p { font-size: 14px; line-height: 22.4px; font-weight: 400; letter-spacing: normal; text-transform: none; font-style: normal; }
  .r-promo__h { font-size: 21px; line-height: 29.4px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
  .r-why__title { font-size: 17.5px; line-height: 24.5px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
}
@media (max-width: 479px) {
  :root { --sys-gap: 40px; }
  .r-areas__h2 { font-size: 28px; line-height: 33.6px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
  .r-contact__formtitle { font-size: 17.5px; line-height: 24.5px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
  .r-h1 { font-size: 38.5px; line-height: 46.2px; font-weight: 700; letter-spacing: normal; text-transform: none; font-style: normal; }
  .sys-cols-2, .sys-cols-3, .sys-cols-4, .sys-cols-5 { --sys-n: 1; }
  .sys-n-2.sys-n-2 > *, .sys-n-3.sys-n-3 > *, .sys-n-4.sys-n-4 > *, .sys-n-5.sys-n-5 > * { flex: 0 0 calc(100% / 1); max-width: calc(100% / 1); }
}

/* client.header */
/* client.header - advancedair.navmenu (its own style is in system.css, unchanged) with what the
   client asked for in his v1 email (2026-10-21):
   - on a computer, an info bar above the header: the address (to his Google Business Profile), the
     hours when he gives them, the email and the CSLB license;
   - one booking page: the header's button is Request service, the same Housecall Pro page as every
     other one, not the contact page;
   - on a phone, one clean row: the logo and the menu (George, 2026-10-22: Call and Request service
     live in the bar at the foot of the screen, client.copyright, not at the top as well).
   The header is sticky (George, 2026-10-21: "a sticky header the whole time"). On a computer the
   info bar slides up out of sight when the visitor scrolls down and slides back on any scroll up,
   as on NUR's header (client's v1 email); section.js sets .anav--tuck, the slide is a transform.
   brand.css's --at-head is the stuck header's tallest height, so a jump link and the inner pages'
   rail stop under it, and --at-head-room is what an open menu may take. */
.anav {
  position: sticky;
  top: 0;
}

html { scroll-padding-top: var(--at-head); }

/* an open menu longer than the screen under the header scrolls inside itself */
.anav__sub,
.anav__drawer {
  max-height: var(--at-head-room);
  overflow-y: auto;
}

/* the number alone beside its badge, centred on it (the city label above it is gone) */
.anav__nums { align-items: center; }

/* the info bar: a computer only */
.adtop { display: none; }

.adtop__in {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sys-space-23);
  height: var(--at-top);
  margin: 0 auto;
  list-style: none;
  white-space: nowrap;
}

.adtop__item {
  display: flex;
  align-items: center;
  gap: var(--sys-space-8);
}

.adtop__icon {
  width: var(--sys-space-16);
  height: var(--sys-space-16);
  fill: var(--secondary);
}

.adtop__text,
.adtop__link { color: var(--white); }

.adtop__link:hover,
.adtop__link:focus-visible {
  color: var(--secondary);
  text-decoration: underline;
}

@media (min-width: 979px) {
  .adtop {
    display: block;
    background-color: var(--dark);
  }
  .anav { transition: var(--at-slide); }
  .anav--tuck { transform: translateY(calc(0px - var(--at-top))); }
}

/* an open menu's arrow points up, so the visitor sees which menu is open (George, 2026-10-22) */
.anav__caret { transition: var(--at-flip); }
.anav__group[aria-expanded="true"] .anav__caret,
.anav__dgroup[aria-expanded="true"] .anav__caret { transform: var(--at-up); }

/* the menu button turns into an X while the menu is open: the middle line fades, the outer two
   meet and cross (George, 2026-10-23); the base's own 0.3s transform and colour transition runs it */
.anav .anav__toggle.adhd__toggle[aria-expanded="true"] .anav__burger { background: transparent; }
.anav__toggle[aria-expanded="true"] .anav__burger::before { transform: var(--at-x-top); }
.anav__toggle[aria-expanded="true"] .anav__burger::after { transform: var(--at-x-bot); }

@media (prefers-reduced-motion: reduce) {
  .anav,
  .anav__caret,
  .anav__burger,
  .anav__burger::before,
  .anav__burger::after { transition: none; }
}

/* a narrow computer: the email leaves the bar so the hours fit (it is in the footer and on Contact) */
@media (min-width: 979px) and (max-width: 1199px) {
  .adtop__item--mail { display: none; }
}

/* the phone's header: the logo and the menu, one row. The base's blue strip under it (Schedule Now
   and a search mark) and its Request service button are gone; the drawer still hangs under the header. */
.adhd__acts { display: contents; }

@media (max-width: 978px) {
  .anav__nums,
  .anav__cta,
  .anav__navin,
  .anav__nav::before,
  .anav__nav::after { display: none; }
  .adhd__toggle { margin-left: auto; }
  .adhd__toggle .anav__burger,
  .adhd__toggle .anav__burger::before,
  .adhd__toggle .anav__burger::after { background: var(--dark-soft); }
  .anav .adhd__toggle:hover .anav__burger,
  .anav .adhd__toggle:hover .anav__burger::before,
  .anav .adhd__toggle:hover .anav__burger::after,
  .anav .adhd__toggle:focus-visible .anav__burger,
  .anav .adhd__toggle:focus-visible .anav__burger::before,
  .anav .adhd__toggle:focus-visible .anav__burger::after { background: var(--primary); }
}

/* client.hero */
/* client.hero - the client's own montage fills the band, under a navy shade that is solid behind the words and
   thins toward the right so the work shows. The logo's two strokes, the orange swirl and the sky-blue fan line,
   cut down the band between the words and the film. The band's foot is cut on the slant of the A and T strokes
   (on the background layer only), and a furnace job photo on an offset orange block, with the license nameplate,
   hangs over the cut into the next band. The fan's ten blades turn slowly behind the words. One column below
   960; on a phone the film is the poster alone, under a heavier shade. */
.adh {
  --adh-cut: 72px;
  --adh-lean: 9%;
  position: relative;
  z-index: 2;
  padding: 88px 0 calc(var(--adh-cut) + 72px);
}

.adh__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: var(--dark);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--adh-cut)), 0 100%);
}

.adh__film {
  position: absolute;
  inset: 0;
  margin: 0;
}

.adh__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}

.adh__video { opacity: 0; transition: opacity .8s ease; }
.adh__video.is-live { opacity: 1; }

.adh__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--dark) 0%, var(--dark) 34%, rgba(11, 42, 72, .9) 46%, rgba(11, 42, 72, .42) 66%, rgba(11, 42, 72, .1) 100%),
    linear-gradient(0deg, rgba(11, 42, 72, .6) 0%, rgba(11, 42, 72, 0) 38%);
}

.adh__fan {
  position: absolute;
  left: -260px;
  top: -200px;
  width: 760px;
  height: 760px;
  fill: var(--dark-soft);
  opacity: .5;
  pointer-events: none;
  animation: adh-turn 140s linear infinite;
}

@keyframes adh-turn { to { transform: rotate(360deg); } }

/* the logo's two strokes, full height, on the seam between the words and the film */
.adh__cut {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 44%;
  width: 230px;
  height: 100%;
  pointer-events: none;
}

.adh__cut-swirl { fill: var(--at-swirl); }
.adh__cut-fan { fill: var(--secondary); }

.adh__in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  column-gap: 56px;
}

.adh__eyebrow { margin: 0; color: var(--at-swirl-lt); }

.adh__h1 {
  margin: 18px 0 20px;
  max-width: 12ch;
  color: var(--white);
  text-wrap: balance;
}

.adh__body {
  max-width: 33em;
  color: rgba(255, 255, 255, .86);
}

.adh__act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  margin-top: 32px;
}

.adh__btn { box-shadow: 0 14px 32px rgba(0, 0, 0, .3); }
.adh__btn .btn__in { padding: 18px 40px; }

.adh__call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--secondary);
  transition: color .3s ease;
}

.adh__call:hover,
.adh__call:focus-visible { color: var(--white); }

.adh__call-icon { flex: 0 0 auto; width: 22px; height: 22px; fill: currentColor; }

.adh__call-k {
  font-family: "Instrument Sans", sans-serif;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
}

.adh__call-v {
  font-family: "Instrument Sans", sans-serif;
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
}

.adh__lic {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  color: rgba(255, 255, 255, .78);
}

.adh__lic a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .4);
  text-underline-offset: 4px;
  transition: text-decoration-color .3s ease;
}

.adh__lic a:hover,
.adh__lic a:focus-visible { text-decoration-color: var(--secondary); }

.adh__chev { flex: 0 0 auto; width: 30px; height: 16px; fill: var(--at-swirl-lt); }

/* the stage: the furnace photo on an offset orange block, hanging over the band's cut */
.adh__stage {
  position: relative;
  align-self: end;
  justify-self: end;
  width: 280px;
  margin: 0 3% calc(-1 * (var(--adh-cut) + 72px + 56px)) 0;
}

.adh__stage::before {
  content: "";
  position: absolute;
  inset: 22px -22px -22px 22px;
  background-color: var(--at-swirl);
  clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
}

.adh__pause {
  position: absolute;
  right: 24px;
  top: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--white);
  background-color: rgba(11, 42, 72, .7);
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .3s ease;
}

.adh__pause[hidden] { display: none; }
.adh__pause:hover,
.adh__pause:focus-visible { background-color: var(--dark-soft); }
.adh__pause-icon { width: 18px; height: 18px; fill: currentColor; }
.adh__pause-play,
.adh__pause[aria-pressed="true"] .adh__pause-bars { display: none; }
.adh__pause[aria-pressed="true"] .adh__pause-play { display: inline; }

.adh__inset {
  position: relative;
  margin: 0;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .45));
}

.adh__inset .adh__img {
  display: block;
  width: 100%;
  height: auto;
  clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
}

/* the license nameplate: a slanted plate with a sky-blue rim, as the A and T lean. The slant is drawn on a layer
   behind the words, so the words themselves stay upright. */
.adh__plate {
  position: absolute;
  z-index: 3;
  left: -64px;
  bottom: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 34px 11px;
  isolation: isolate;
  background-color: var(--white);
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.adh__plate::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 5px 6px;
  border: 2px solid var(--at-rim);
  transform: skewX(-9deg);
}

.adh__plate:hover,
.adh__plate:focus-visible { transform: translateY(-3px); }

.adh__plate-k,
.adh__plate-v { display: block; }

.adh__plate-k {
  font-family: var(--at-face);
  font-style: var(--at-face-style);
  font-stretch: var(--at-label);
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
}

.adh__plate-v {
  font-family: "Instrument Sans", sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: var(--dark-soft);
}

@media (min-width: 960px) {
  .adh {
    display: grid;
    align-content: center;
    min-height: min(54vw, calc(100vh - var(--at-head)));
    min-height: min(54vw, calc(100svh - var(--at-head)));
  }
}

@media (max-width: 1100px) {
  .adh__in { column-gap: 32px; }
  .adh__cut { left: 46%; width: 180px; }
  .adh__stage { width: 240px; }
}

@media (max-width: 959px) {
  .adh { --adh-cut: 48px; padding: 48px 0 calc(var(--adh-cut) + 40px); }
  .adh__shade {
    background:
      linear-gradient(180deg, rgba(11, 42, 72, .95) 0%, rgba(11, 42, 72, .88) 55%, rgba(11, 42, 72, .55) 100%);
  }
  .adh__fan { width: 520px; height: 520px; left: -200px; top: -140px; }
  .adh__cut { left: auto; right: -60px; width: 150px; }
  .adh__in { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .adh__stage { justify-self: center; width: 200px; margin: 0 0 calc(-1 * (var(--adh-cut) + 40px + 36px)); }
  /* the plate hangs on the photo's top corner here: at the foot it would sit under the phone's call bar */
  .adh__plate { left: -48px; bottom: auto; top: 18px; }
  .adh__pause { display: none; }
}

@media (max-width: 479px) {
  .adh__h1 { margin: 12px 0 14px; }
  .adh__act { margin-top: 24px; }
  .adh__btn { width: 100%; }
  .adh__btn .btn__in { justify-content: center; }
  .adh__stage { width: 170px; }
  .adh__plate { left: -40px; padding: 8px 20px 9px; }
  .adh__plate-v { font-size: 17px; line-height: 21px; }
}

@media (max-width: 766px) {
  .adh__copy { text-align: center; }
  .adh__h1,
  .adh__body { margin-inline: auto; }
  .adh__lic { justify-content: center; }
  .adh__act { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .adh__fan { animation: none; }
  .adh__lic a,
  .adh__call,
  .adh__pause,
  .adh__video,
  .adh__plate { transition: none; }
  .adh__plate:hover,
  .adh__plate:focus-visible { transform: none; }
}

/* the BBB seal under the license line: as issued, on a white tag with the nameplate's sky-blue rim */
.adh__seal {
  display: block;
  width: max-content;
  margin-top: 24px;
  padding: 8px 9px;
  background-color: var(--white);
  border: 3px solid var(--at-rim);
  box-shadow: 6px 6px 0 var(--dark-soft);
  transition: transform .25s ease;
}

.adh__seal-img { display: block; width: 80px; height: auto; }


@media (prefers-reduced-motion: reduce) { .adh__seal { transition: none; } }

a.adh__seal:hover,
a.adh__seal:focus-visible { transform: translate(-3px, -3px); }

@media (max-width: 766px) { .adh__seal { margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) {
  a.adh__seal:hover,
  a.adh__seal:focus-visible { transform: none; }
}

/* client.services */
/* client.services - the pale band tucked under the hero's slanted foot; two panels, cooling
   in the logo's sky blue and heating in its navy, each led by a job photo breaking out of its top. */
.ads {
  position: relative;
  margin-top: -72px;
  background-color: var(--pale);
  padding: 172px 0 110px;
}

.ads__head {
  max-width: 700px;
  margin: 0 auto 120px;
  text-align: center;
}

.ads__eyebrow { color: var(--at-swirl-dk); }

.ads__h2 {
  text-wrap: balance;
  margin: 12px 0 16px;
  color: var(--dark);
}

.ads__intro { color: var(--ink); text-wrap: pretty; }

.ads__panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}

.ads__panel {
  position: relative;
  padding: 0 36px 30px;
  background-color: var(--white);
  border-top: 6px solid var(--dark-soft);
  box-shadow: 0 18px 44px rgba(11, 42, 72, .12);
}

.ads__panel--heating { border-top-color: var(--at-swirl); }

.ads__photo {
  width: 62%;
  height: auto;
  margin: -84px 0 0 auto;
  clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%);
  box-shadow: 0 22px 44px rgba(11, 42, 72, .3);
}

.ads__panel--heating .ads__photo {
  margin: -84px auto 0 0;
  clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%);
}

.ads__title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0 10px;
  color: var(--dark);
}

.ads__chevs {
  flex: 0 0 auto;
  width: 44px;
  height: 24px;
  fill: var(--dark-soft);
}

.ads__panel--heating .ads__chevs { fill: var(--at-swirl); }

.ads__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ads__list li + li { border-top: 1px solid rgba(11, 42, 72, .12); }

.ads__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  color: var(--dark);
}

.ads__label { transition: color .3s ease; }

.ads__arrow {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  fill: var(--primary);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.ads__panel--cooling .ads__arrow { fill: var(--dark-soft); }
.ads__panel--heating .ads__arrow { fill: var(--at-swirl-dk); }

.ads__link:hover .ads__label,
.ads__link:focus-visible .ads__label { color: var(--primary); }

.ads__link:hover .ads__arrow,
.ads__link:focus-visible .ads__arrow { transform: translateX(5px); }

.ads__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 24px;
  margin-top: 56px;
  text-align: center;
}

.ads__moretitle {
  flex: 1 1 100%;
  color: var(--dark);
}

.ads__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ads__pill {
  display: block;
  padding: 11px 22px;
  font-weight: 700;
  color: var(--dark);
  background-color: var(--white);
  border: 2px solid var(--primary);
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px var(--white), inset 0 0 0 3px rgba(27, 115, 184, .35);
  transition: background-color .3s ease, color .3s ease;
}

.ads__pill:hover,
.ads__pill:focus-visible {
  color: var(--white);
  background-color: var(--primary);
}

.ads__all { flex: 1 1 100%; max-width: 380px; margin-top: 10px; }

@media (max-width: 959px) {
  .ads { margin-top: -48px; padding: 120px 0 84px; }
  .ads__head { margin-bottom: 96px; }
  .ads__panels { grid-template-columns: minmax(0, 1fr); gap: 110px; max-width: 560px; margin: 0 auto; }
}

@media (max-width: 479px) {
  .ads { margin-top: -48px; padding: 110px 0 70px; }
  .ads__panel { padding: 0 20px 20px; }
  .ads__photo,
  .ads__panel--heating .ads__photo { width: 74%; margin-top: -70px; }
}

@media (prefers-reduced-motion: reduce) {
  .ads__label,
  .ads__arrow,
  .ads__pill { transition: none; }
  .ads__link:hover .ads__arrow,
  .ads__link:focus-visible .ads__arrow { transform: none; }
}

/* client.work */
/* client.work - the proof wall on the navy band. Five tall slanted blades in a row, each leaning as the logo's
   A and T lean, overlapping at the edges and set at alternating heights so they fan like the fan's blades. Four are
   the client's own job photos; the last one is a short muted loop of gauge readings on a mini-split's outdoor
   unit. Captions say only what the photo shows. A phone: two columns, the loop across the foot. */
.adw {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: var(--dark-soft);
  padding: 120px 0 130px;
  margin-top: -1px;
}

.adw__ghost {
  position: absolute;
  right: -120px;
  top: 40px;
  width: 560px;
  height: auto;
  fill: var(--secondary);
  opacity: .07;
  pointer-events: none;
}

.adw__head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: end;
  gap: 40px;
  margin-bottom: 72px;
}

.adw__eyebrow { margin: 0; color: var(--at-swirl-lt); }

.adw__h2 {
  margin: 12px 0 0;
  max-width: 20ch;
  color: var(--white);
  text-wrap: balance;
}

.adw__body { margin: 0; max-width: 30em; color: rgba(255, 255, 255, .86); }

.adw__blades {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  margin: 0 0 0 28px;
  padding: 0;
  list-style: none;
}

.adw__tile {
  --lean: 15%;
  position: relative;
  aspect-ratio: 3 / 5;
  margin-left: -28px;
  overflow: hidden;
  background-color: var(--dark);
  clip-path: polygon(var(--lean) 0, 100% 0, calc(100% - var(--lean)) 100%, 0 100%);
}

.adw__tile--2,
.adw__tile--4 { margin-top: 56px; }

.adw__tile--3 { margin-top: 18px; }

.adw__img,
.adw__vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.adw__cap {
  position: absolute;
  left: 22%;
  right: 14%;
  bottom: 18px;
  font-family: var(--at-face);
  font-style: var(--at-face-style);
  font-stretch: var(--at-label);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--white);
  background-color: rgba(11, 42, 72, .86);
  padding: 8px 10px;
}

.adw__tile--4 .adw__cap { bottom: auto; top: 18px; }   /* the technician is in the lower third of this photo */

@media (max-width: 959px) {
  .adw { padding: 84px 0 90px; }
  .adw__head { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 48px; }
  .adw__blades { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; }
  .adw__tile { --lean: 9%; margin: 0; aspect-ratio: 3 / 4; }
  .adw__tile--2,
  .adw__tile--4 { margin-top: 0; }
  .adw__tile--3 { margin-top: 0; }
  .adw__tile--loop { grid-column: 1 / -1; aspect-ratio: 16 / 10; order: 5; margin-top: 0; }
  .adw__tile--loop .adw__cap { left: 8%; }
  .adw__cap { left: 12%; right: 8%; font-size: 11px; line-height: 14px; padding: 6px 8px; bottom: 12px; }
  .adw__tile--4 .adw__cap { bottom: auto; top: 12px; }
}


/* client.promise */
/* client.promise - the owner's own words on a warm light break (the one warm neutral the system allows), set large
   in the heading face beside a navy slanted bar; his three promises as numbered rows. A phone: stacked. */
.adq {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: #F3EFE8; /* component: the warm-neutral light break, a band never a brand colour */
  padding: 112px 0 120px;
}

.adq__in {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: start;
  gap: 88px;
}

.adq__quote { position: relative; margin: 0; padding-left: 96px; }

.adq__quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  height: 200px;
  width: 18px;
  background-color: var(--at-swirl);
  transform: skewX(-9deg);
}

.adq__quote::after {
  content: "";
  position: absolute;
  left: 30px;
  top: 4px;
  height: 200px;
  width: 7px;
  background-color: var(--at-rim);
  transform: skewX(-9deg);
}

.adq__eyebrow { margin: 0 0 22px; color: var(--at-swirl-dk); }
.adq__bq { margin: 0; }

.adq__q {
  margin: 0 0 24px;
  font-family: var(--at-face);
  font-style: var(--at-face-style);
  font-stretch: 112%;
  font-size: clamp(22px, 2.3vw, 31px);
  line-height: 1.25;
  font-weight: 800;
  color: var(--dark);
  text-wrap: balance;
}

.adq__q--lead { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.12; }

.adq__who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 30px; }
.adq__strokes { width: 30px; height: 16px; fill: var(--at-swirl); }

.adq__name {
  font-family: var(--at-face);
  font-style: var(--at-face-style);
  font-stretch: var(--at-label);
  font-size: 15px;
  line-height: 20px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--dark);
}

.adq__role { font-family: "Instrument Sans", sans-serif; font-size: 16px; line-height: 22px; color: var(--ink); }

.adq__list { margin: 0; padding: 0; list-style: none; counter-reset: adq; }

.adq__item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 2px 14px;
  padding: 26px 0 28px;
  border-top: 2px solid var(--dark);
}

.adq__item:last-child { border-bottom: 2px solid var(--dark); }

.adq__num::before {
  counter-increment: adq;
  content: counter(adq, decimal-leading-zero);
}

.adq__num {
  grid-row: 1 / span 2;
  font-family: var(--at-face);
  font-style: var(--at-face-style);
  font-stretch: var(--at-wide);
  font-size: 34px;
  line-height: 40px;
  font-weight: 900;
  color: var(--at-swirl-dk);
}

.adq__title { margin: 0; color: var(--dark); }
.adq__body { margin: 6px 0 0; color: var(--ink); }

@media (max-width: 959px) {
  .adq { padding: 80px 0 84px; }
  .adq__in { grid-template-columns: minmax(0, 1fr); gap: 56px; }
}

@media (max-width: 479px) {
  .adq__quote { padding-left: 72px; }
  .adq__quote::before { width: 14px; }
  .adq__quote::after { left: 20px; width: 6px; }
}

/* client.commercial */
/* client.commercial - business work on a full band of the logo's blue, the fan's blades large and faint behind
   it. No picture: the four commercial services are slanted numbered cards, each a link, beside the words and
   the hub's button. A phone: one column. */
.adc {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: var(--primary);
  padding: 110px 0 150px;
}

.adc__fan {
  position: absolute;
  left: -260px;
  bottom: -330px;
  width: 760px;
  height: 760px;
  fill: var(--white);
  opacity: .07;
  pointer-events: none;
}

.adc__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 72px;
}

.adc__eyebrow { margin: 0; color: var(--white); opacity: .9; }

.adc__h2 { margin: 14px 0 18px; max-width: 16ch; color: var(--white); text-wrap: balance; }

.adc__body { max-width: 32em; margin: 0 0 30px; color: var(--white); }

.adc__list {
  counter-reset: adc;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
  margin: 0;
  padding: 0 0 0 20px;
  list-style: none;
}

.adc__item:nth-child(even) { margin-top: 26px; }

.adc__link {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  align-content: start;
  height: 100%;
  padding: 20px 40px 50px 24px;
  color: var(--dark);
  background-color: var(--white);
  border-left: 6px solid var(--secondary);
  clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
  transition: background-color .3s ease, border-color .3s ease;
}

.adc__link:hover,
.adc__link:focus-visible { background-color: var(--pale); border-left-color: var(--dark); }

.adc__num::before {
  counter-increment: adc;
  content: counter(adc, decimal-leading-zero);
}

.adc__num {
  font-family: var(--at-face);
  font-style: var(--at-face-style);
  font-stretch: var(--at-wide);
  font-size: 30px;
  line-height: 34px;
  font-weight: 900;
  color: var(--at-swirl-dk);
}

.adc__txt { display: block; }
.adc__label { display: block; color: var(--dark); }
.adc__note { display: block; margin-top: 6px; color: var(--ink); }

.adc__arrow {
  position: absolute;
  right: 34px;
  bottom: 18px;
  width: 22px;
  height: 22px;
  fill: var(--primary);
  transition: transform .3s cubic-bezier(.2, 0, 0, 1);
}

.adc__link:hover .adc__arrow,
.adc__link:focus-visible .adc__arrow { transform: translateX(4px); }

@media (max-width: 1179px) {
  .adc__in { grid-template-columns: minmax(0, 1fr); gap: 52px; }
  .adc__list { padding-left: 0; }
}

@media (max-width: 959px) {
  .adc { padding: 80px 0 110px; }
  .adc__in { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .adc__list { padding-left: 0; }
}

@media (max-width: 599px) {
  .adc__list { grid-template-columns: minmax(0, 1fr); }
  .adc__item:nth-child(even) { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .adc__link,
  .adc__arrow { transition: none; }
  .adc__link:hover .adc__arrow,
  .adc__link:focus-visible .adc__arrow { transform: none; }
}

/* client.trust */
/* client.trust - the license, easy to check. On the left a big slanted nameplate (the number set large, the
   class under it, a sky-blue rim, the logo's two strokes at its foot) on an offset navy block; on the right
   the words, three plain rows and the button to the state's own record. White band. A phone: stacked. */
.adt {
  position: relative;
  z-index: 1;
  background-color: var(--white);
  overflow: hidden;
  padding: 120px 0 120px;
}

.adt__in {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 80px;
}

.adt__plate {
  position: relative;
  isolation: isolate;
  background-color: var(--white);
  padding: 54px 52px 44px 56px;
}

.adt__plate::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-color: var(--white);
  border: 4px solid var(--at-rim);
  box-shadow: inset 0 0 0 5px var(--white), inset 0 0 0 8px var(--at-rim), 26px 26px 0 var(--dark);
  transform: skewX(-7deg);
}

.adt__pl,
.adt__pc { display: block; margin: 0; }

.adt__pk,
.adt__pv { display: block; }

.adt__pk {
  font-family: var(--at-face);
  font-style: var(--at-face-style);
  font-stretch: var(--at-label);
  font-size: 14px;
  line-height: 18px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--dark-soft);
}

.adt__pv {
  margin: 8px 0 12px;
  font-family: var(--at-face);
  font-style: var(--at-face-style);
  font-stretch: var(--at-wide);
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.05;
  font-weight: 900;
  color: var(--dark);
}

.adt__pc {
  max-width: 17em;
  font-family: "Instrument Sans", sans-serif;
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  color: var(--ink);
}

.adt__strokes {
  position: absolute;
  right: 40px;
  top: 28px;
  width: 38px;
  height: 20px;
  fill: var(--at-swirl);
}

.adt__eyebrow { margin: 0; color: var(--primary); }
.adt__h2 { margin: 12px 0 14px; color: var(--dark); text-wrap: balance; }
.adt__intro { margin: 0 0 24px; max-width: 34em; color: var(--ink); }

.adt__rows { margin: 0 0 28px; padding: 0; }

.adt__row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 18px;
  padding: 16px 0;
  border-top: 1px solid rgba(11, 42, 72, .16);
}

.adt__row:last-child { border-bottom: 1px solid rgba(11, 42, 72, .16); }

.adt__k {
  font-family: var(--at-face);
  font-style: var(--at-face-style);
  font-stretch: var(--at-label);
  font-size: 13px;
  line-height: 20px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--dark-soft);
}

.adt__v { margin: 0; color: var(--ink); }
.adt__src { margin: 18px 0 0; }

@media (max-width: 959px) {
  .adt { padding: 84px 0 84px; }
  .adt__in { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .adt__plate { margin-right: 26px; padding: 40px 36px 36px 40px; }
  .adt__plate::before { box-shadow: inset 0 0 0 5px var(--white), inset 0 0 0 8px var(--at-rim), 16px 16px 0 var(--dark); }
}

@media (max-width: 479px) {
  .adt__plate { margin-right: 18px; padding: 34px 22px 30px 30px; }
  .adt__pv { font-size: clamp(28px, 9vw, 36px); }
  .adt__strokes { right: 26px; top: 20px; }
}

@media (max-width: 599px) {
  .adt__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* the BBB seal, stamped on the nameplate's lower right corner: the seal as BBB issued it (never recoloured,
   cropped or turned) on a white tag with the nameplate's sky-blue rim and its navy offset block. */
.adt__seal {
  position: absolute;
  z-index: 2;
  right: -30px;
  bottom: -118px;
  display: block;
  padding: 10px 12px;
  background-color: var(--white);
  border: 4px solid var(--at-rim);
  box-shadow: 10px 10px 0 var(--dark);
  transition: transform .25s ease;
}

.adt__seal-img { display: block; width: 112px; height: auto; }


@media (max-width: 959px) {
  .adt__plate { margin-bottom: 64px; }
  .adt__seal { right: -16px; bottom: -100px; padding: 8px 9px; box-shadow: 7px 7px 0 var(--dark); }
  .adt__seal-img { width: 88px; }
}

@media (prefers-reduced-motion: reduce) { .adt__seal { transition: none; } }

a.adt__seal:hover,
a.adt__seal:focus-visible { transform: translate(-3px, -3px); }

@media (prefers-reduced-motion: reduce) {
  a.adt__seal:hover,
  a.adt__seal:focus-visible { transform: none; }
}

/* the plate narrows between 960 and 1300 px: the class line wraps before the seal (it covers the plate's lower right 76 px) */
@media (min-width: 960px) { .adt__pc { max-width: min(17em, calc(100% - 76px)); } }

/* client.areas */
/* client.areas - where the client works, on the navy band: the words and the button on the left, the eight areas
   as large slanted rows on the right, each a link to its own section on the service areas page; the fan's blades
   faint at the foot. A phone: one column. */
.ada {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: var(--dark);
  padding: 110px 0 120px;
}

.ada__fan {
  position: absolute;
  left: -200px;
  bottom: -300px;
  width: 700px;
  height: 700px;
  fill: var(--dark-soft);
  opacity: .6;
  pointer-events: none;
}

.ada__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 72px;
}

.ada__eyebrow { margin: 0; color: var(--secondary); }
.ada__h2 { margin: 12px 0 16px; max-width: 17ch; color: var(--white); text-wrap: balance; }
.ada__intro { text-wrap: pretty; margin: 0 0 30px; max-width: 28em; color: rgba(255, 255, 255, .86); }

.ada__cities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ada__city {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 26px 20px 24px;
  color: var(--white);
  background-color: var(--dark-soft);
  border-left: 6px solid var(--secondary);
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  transition: background-color .3s ease, color .3s ease;
}

.ada__city:hover,
.ada__city:focus-visible { background-color: var(--primary); }

.ada__tri {
  flex: 0 0 auto;
  width: 12px;
  height: 16px;
  fill: var(--secondary);
  transition: transform .3s cubic-bezier(.2, 0, 0, 1), fill .3s ease;
}

.ada__city:hover .ada__tri,
.ada__city:focus-visible .ada__tri { transform: translateX(5px); fill: var(--white); }

@media (max-width: 959px) {
  .ada { padding: 80px 0 90px; }
  .ada__in { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}

@media (max-width: 479px) {
  .ada__cities { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .ada__city,
  .ada__tri { transition: none; }
  .ada__city:hover .ada__tri,
  .ada__city:focus-visible .ada__tri { transform: none; }
}

/* client.closing */
/* client.closing - the last call on white: a red card with one huge corner, the action bar in
   it, the rooftop photo lifted out of its top edge. */
.adx { padding: 150px 0 110px; }

.adx__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 44px;
  align-items: end;
  padding: 0 0 0 56px;
  background-color: var(--primary);
  border-radius: 0 0 150px 0;
  box-shadow: 0 30px 60px rgba(11, 42, 72, .22);
}

.adx__copy { padding: 56px 0 56px; }

.adx__h2 {
  margin-bottom: 14px;
  color: var(--white);
}

.adx__body { color: var(--white); }

.adx__bar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 28px;
  padding: 12px 20px 12px 12px;
  border-radius: 0 0 22px 0;
}

.adx__media {
  align-self: stretch;
  margin: -90px 40px 0 0;
}

.adx__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 100px 0 100px 0;
  box-shadow: 0 26px 50px rgba(0, 0, 0, .35);
  border: 6px solid var(--white);
}

@media (max-width: 959px) {
  .adx { padding: 120px 0 80px; }
  .adx__card { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 28px; border-radius: 0 0 110px 0; }
  .adx__media { order: -1; margin: -80px 0 0; }
  .adx__img { height: auto; aspect-ratio: 10 / 9; }
  .adx__copy { padding: 32px 0 44px; }
}

@media (max-width: 479px) {
  .adx { padding: 100px 0 64px; }
  .adx__card { padding: 0 18px; border-radius: 0 0 80px 0; }
  .adx__img { border-radius: 70px 0 70px 0; }
  .adx__bar { display: flex; padding: 12px; }
  .adx__btn { flex: 1 1 100%; }
}

@media (max-width: 766px) {
  .adx__copy { text-align: center; }
}

/* client.footer */
/* client.footer - the base's footer job in its own tokens: the dark band, the client's own silver and red
   logo straight on the navy (his email, 2026-10-24: no white plate, as on his old site; the file is cut by
   tools/make_footer_logo.py), contact and license, three link columns. */
.adf {
  position: relative;
  background-color: var(--dark);
  padding: var(--sys-space-42) 0 var(--sys-space-34);
}

/* the logo's orange swirl as a strip across the footer's top edge */
.adf::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--at-edge);
  background-color: var(--at-swirl);
}

.adf__logo { display: block; }

.adf__logoimg {
  max-width: 100%;
  height: auto;
}

.adf__blurb {
  margin-top: var(--sys-space-24);
  color: var(--white);
}

.adf__contact { margin-top: var(--sys-space-16); }

.adf__phone,
.adf__mail { color: var(--white); }

.adf__phone:hover,
.adf__phone:focus-visible,
.adf__mail:hover,
.adf__mail:focus-visible { color: var(--secondary); }

/* his address (public since the client's v1 email, 2026-10-21) to his Google Business Profile, and his
   profiles as a row of marks (the email: "add these to the footer") */
.adf__addr { margin-top: var(--sys-space-16); }

.adf__hours {
  margin-top: var(--sys-space-8);
  color: var(--white);
}

.adf__hrow { display: block; }

.adf__addrlink { color: var(--white); }

.adf__addrlink:hover,
.adf__addrlink:focus-visible {
  color: var(--secondary);
  text-decoration: underline;
}

.adf__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sys-space-10);
  margin-top: var(--sys-space-19);
  list-style: none;
}

.adf__soc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sys-space-31);
  height: var(--sys-space-31);
}

.adf__socicon {
  width: var(--sys-space-19);
  height: var(--sys-space-19);
  fill: var(--white);
}

.adf__soc:hover .adf__socicon,
.adf__soc:focus-visible .adf__socicon { fill: var(--secondary); }

.adf__lic {
  margin-top: var(--sys-space-16);
  color: var(--white);
}

.adf__check {
  color: var(--secondary);
  text-decoration: underline;
}

.adf__btn { margin-top: var(--sys-space-24); }

.adf__heading {
  margin-bottom: var(--sys-space-24);
  color: var(--secondary);
}

.adf__menu li + li { margin-top: var(--sys-space-16); }

.adf__link { color: var(--white); }

a.adf__link:hover,
a.adf__link:focus-visible { color: var(--secondary); }

/* the base's footer drops its link columns on a phone (the menu carries them) */
@media (max-width: 766px) {
  .adf { padding: var(--sys-space-41) 0 var(--sys-space-34); }
  .adf__col { display: none; }
}

@media (max-width: 766px) {
  .adf__brand { text-align: center; }
  .adf__social { justify-content: center; }
}

/* the BBB seal under the license line, on every page: as issued, on a plain white tag */
.adf__seal {
  display: block;
  width: max-content;
  margin-top: var(--sys-space-24);
  padding: var(--sys-space-8);
  background-color: var(--white);
}

.adf__seal-img { display: block; max-width: 100%; height: auto; }

@media (max-width: 766px) { .adf__seal { margin-inline: auto; } }

/* client.copyright */
/* client.copyright - the base's copyright strip: the name and year, privacy, the credit. */
.adcr { background-color: var(--dark-soft); }

.adcr__in {
  padding: var(--sys-space-19) 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sys-space-10) var(--sys-space-31);
}

.adcr__text { color: var(--white); }

.adcr__link {
  margin-left: var(--sys-space-10);
  color: var(--white);
  text-decoration: underline;
}

.adcr__link:hover,
.adcr__link:focus-visible { color: var(--secondary); }

/* The floating buttons (the client's email, 2026-10-24): no bar across the screen, the page shows
   around them. A phone: Call, Request service and chat in one row of equal buttons, Call rounded on its
   outer left, chat on its outer right, Request service a full pill between. A computer: Call and Book
   online together in one floating rounded group at the foot's middle, chat apart at the bottom right.
   All slide out of sight on a scroll down and back on any scroll up (section.js). */
.adcb {
  position: fixed;
  left: var(--sys-space-13);
  right: var(--sys-space-13);
  bottom: var(--at-foot);
  z-index: 50;
  pointer-events: none;
  transition: var(--at-slide);
}

.adcb.is-away { transform: var(--at-away); }

.adcb__in {
  display: flex;
  align-items: stretch;
  gap: var(--sys-space-8);
}

.adcb__in > * { pointer-events: auto; }

.adcb__call,
.adcb__btn,
.adch {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--sys-space-34);
  box-shadow: var(--sys-shadow-1) var(--sys-c-2);
}

.adcb__call {
  gap: var(--sys-space-8);
  color: var(--white);
  background-color: var(--dark);
  border: var(--sys-border-1) var(--dark-soft);
  border-radius: var(--at-pill-l);
}

.adcb__call:hover,
.adcb__call:focus-visible { background-color: var(--dark-soft); }

.adcb__icon {
  width: var(--sys-space-19);
  height: var(--sys-space-19);
  fill: currentColor;
}

.adcb__num { color: var(--white); }

.adcb__tel { display: none; }

.adcb__btn {
  border: var(--sys-border-1) var(--at-swirl-dk);
  border-radius: var(--at-pill);
}

.adcb__btn:hover,
.adcb__btn:focus-visible { border-color: var(--at-swirl-deep); }

.adch {
  padding: 0;
  border: var(--sys-border-1) var(--dark-soft);
  border-radius: var(--at-pill-r);
  background-color: var(--dark);
}

.adch:hover,
.adch:focus-visible { background-color: var(--dark-soft); }

.adch[hidden] { display: none; }

/* once Housecall Pro's own bubble has opened it takes the chat button's corner, so the button keeps
   its place in the row, unseen (section.js) */
.adch--open[hidden] {
  display: flex;
  visibility: hidden;
}

.adch__in {
  display: flex;
  align-items: center;
  gap: var(--sys-space-8);
}

.adch__icon {
  flex: 0 0 auto;
  width: var(--sys-space-19);
  height: var(--sys-space-19);
  fill: var(--white);
}

/* on a phone the label is kept for screen readers only (the button's live region still announces
   "Opening chat" and a failure); the mark alone shows, Call beside it */
.adch__label {
  position: absolute;
  width: var(--sys-space-1);
  height: var(--sys-space-1);
  overflow: hidden;
  white-space: nowrap;
  color: transparent;
}

.adch[aria-busy="true"] { cursor: progress; }

.adcr { padding-bottom: var(--sys-space-41); }

@media (min-width: 979px) {
  .adcb {
    left: 0;
    right: 0;
  }
  .adcb__in {
    width: max-content;
    margin: 0 auto;
    padding: var(--sys-space-6);
    gap: var(--sys-space-6);
    background-color: var(--dark);
    border: var(--sys-border-1) var(--dark-soft);
    border-radius: var(--at-pill);
    box-shadow: var(--sys-shadow-1) var(--sys-c-2);
  }
  .adcb__call,
  .adcb__btn {
    flex: 0 0 auto;
    box-shadow: none;
  }
  .adcb__call {
    padding: 0 var(--sys-space-23);
    border: 0;
    border-radius: var(--at-pill);
    background-color: transparent;
  }
  .adcb__num { display: none; }
  .adcb__tel { display: inline; }
  .adch {
    position: absolute;
    right: var(--sys-space-19);
    bottom: 0;
    flex: 0 0 auto;
    border-radius: var(--at-pill);
  }
  .adch__label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    color: inherit;
  }
  /* a failed chat shrinks back to the mark (its words stay in the label for screen readers and in its
     title), so it never grows into the Call and Book group on a narrow computer */
  .adch--failed .adch__label {
    position: absolute;
    width: var(--sys-space-1);
    height: var(--sys-space-1);
    overflow: hidden;
    color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .adcb { transition: none; }
}

/* client.privacy */
/* client.privacy - the policy on white in the base's roles, spaced with its tokens. */
.adpv { padding: var(--sys-space-42) 0; }
@media (max-width: 766px) {
  .adpv { padding: var(--sys-space-41) 0; }
}
.adpv__in { color: var(--ink); }
.adpv__h1 { margin-bottom: var(--sys-space-31); color: var(--dark); }
.adpv .r-h3 { margin: var(--sys-space-31) 0 var(--sys-space-16); color: var(--dark); }
.adpv .r-feat__title { margin: var(--sys-space-24) 0 var(--sys-space-10); color: var(--dark); }
.adpv .r-p { margin: 0 0 var(--sys-space-16); }

/* client.notfound */
/* client.notfound - on the dark band with the base's corner. */
.adnf {
  background-color: var(--pale);
  border-radius: var(--sys-radius-6);
  padding: var(--sys-space-45) 0;
}
@media (max-width: 766px) {
  .adnf { padding: var(--sys-space-41) 0; }
}
.adnf__eyebrow { color: var(--primary); }
.adnf__h1 { margin: var(--sys-space-16) 0; color: var(--dark); }
.adnf__body { color: var(--ink); }
.adnf__tel { color: var(--primary); text-decoration: underline; }
.adnf__btn { margin-top: var(--sys-space-31); }

@media (max-width: 766px) {
  .adnf { text-align: center; }
}

/* client.pagehero */
/* client.pagehero - an inner page's hero: the home hero's dark band and corner, shorter, with a
   tilted job sheet (or one real job photo) where the home hero has its stage. One column below 960. */
.adp {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: var(--dark);
  border-radius: 0 0 160px 0;
  padding: var(--sys-space-34) 0 var(--sys-space-42);
}

.adp__ghost {
  position: absolute;
  right: -60px;
  bottom: -40px;
  width: 520px;
  height: auto;
  opacity: .08;
  pointer-events: none;
}

.adp__ghost-b { fill: var(--secondary); }
.adp__ghost-r { fill: var(--primary); }

.adp__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: center;
  column-gap: 72px;
}

.adp__trail {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.adp__trail li {
  display: flex;
  align-items: center;
}

.adp__trail li + li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin: 0 12px 0 10px;
  border-top: 2px solid var(--secondary);
  border-right: 2px solid var(--secondary);
  transform: rotate(45deg);
}

.adp__crumb {
  color: rgba(255, 255, 255, .72);
}

a.adp__crumb {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .3);
  text-underline-offset: 4px;
  transition: color .3s ease;
}

a.adp__crumb:hover,
a.adp__crumb:focus-visible { color: var(--white); }

.adp__eyebrow {
  margin: 0;
  color: var(--at-swirl-lt);
}

.adp__h1 {
  margin: 16px 0 20px;
  max-width: 19ch;
  color: var(--white);
  text-wrap: balance;
}

.adp__lead {
  max-width: 36em;
  color: rgba(255, 255, 255, .88);
}

.adp__bar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  margin-top: 30px;
  padding: 14px 22px 14px 14px;
  border-radius: 0 0 26px 0;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}

/* the job sheet: a white sheet, tilted, with a red head and the license seal over its foot */
.adp__tkwrap {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 400px;
  margin-bottom: 30px;
}

.adp__ticket {
  position: relative;
  background-color: var(--white);
  border-radius: 0 0 50px 0;
  box-shadow: 18px 18px 0 var(--primary), 0 30px 60px rgba(0, 0, 0, .4);
  transform: rotate(-2deg);
}

.adp__tk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background-color: var(--dark-soft);
  border-bottom: 3px dashed rgba(255, 255, 255, .35);
}

.adp__tk-title {
  font-family: var(--at-face);
  font-style: var(--at-face-style);
  font-stretch: var(--at-label);
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
}

.adp__tk-chev {
  width: 30px;
  height: 16px;
  fill: var(--secondary);
}

.adp__tk-rows {
  margin: 0;
  padding: 8px 24px 64px;
}

.adp__tk-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  column-gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(11, 42, 72, .12);
}

.adp__tk-row:last-child { border-bottom: 0; }

.adp__tk-k {
  padding-top: 4px;
  font-family: var(--at-face);
  font-style: var(--at-face-style);
  font-stretch: var(--at-label);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--primary);
}

.adp__tk-v {
  margin: 0;
  color: var(--dark);
}

/* the photo stage */
.adp__stage {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 420px;
  padding: 0 0 40px;
}

.adp__stage::before {
  content: "";
  position: absolute;
  top: 34px;
  right: -34px;
  bottom: 74px;
  left: 70px;
  background-color: var(--at-swirl);
  border-radius: 100px 0 100px 0;
}

.adp__fig {
  position: relative;
  margin: 0;
}

.adp__img {
  width: 100%;
  height: auto;
  border-radius: 100px 0 100px 0;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .4);
}

.adp__cap {
  position: absolute;
  right: 0;
  top: 22px;
  font-family: var(--at-face);
  font-style: var(--at-face-style);
  font-stretch: var(--at-label);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white);
  background-color: rgba(11, 42, 72, .82);
  padding: 7px 12px;
}

/* the license seal: the AD badge's stadium and double red rim */
.adp__seal {
  position: absolute;
  left: -26px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 26px 11px;
  background-color: var(--white);
  border: 3px solid var(--at-rim);
  border-radius: 999px;
  box-shadow: inset 0 0 0 3px var(--white), inset 0 0 0 5px var(--at-rim), 0 16px 34px rgba(0, 0, 0, .35);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.adp__seal--tk {
  left: auto;
  right: 28px;
  bottom: -26px;
}

.adp__seal:hover,
.adp__seal:focus-visible { transform: translateY(-3px); }

.adp__seal-k {
  font-family: var(--at-face);
  font-style: var(--at-face-style);
  font-stretch: var(--at-label);
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
}

.adp__seal-v {
  font-family: "Instrument Sans", sans-serif;
  font-size: 19px;
  line-height: 24px;
  font-weight: 700;
  color: var(--dark-soft);
}

@media (max-width: 1100px) {
  .adp__in { column-gap: 48px; }
}

@media (max-width: 959px) {
  .adp { border-radius: 0 0 110px 0; }
  .adp__in { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  .adp__tkwrap,
  .adp__stage { justify-self: start; }
  .adp__stage { max-width: 380px; margin-left: 26px; }
}

@media (max-width: 766px) {
  .adp { padding: var(--sys-space-27) 0 var(--sys-space-41); }
}

@media (max-width: 479px) {
  .adp { border-radius: 0 0 80px 0; }
  .adp__trail { margin-bottom: 18px; }
  .adp__h1 { margin: 12px 0 14px; }
  .adp__bar {
    display: flex;
    margin-top: 24px;
    padding: 14px;
  }
  .adp__btn { flex: 1 1 100%; }
  .adp__ticket { transform: none; box-shadow: 10px 10px 0 var(--primary), 0 24px 48px rgba(0, 0, 0, .4); }
  .adp__tkwrap { max-width: calc(100% - 10px); }
  .adp__tk-head { padding: 14px 18px; }
  .adp__tk-rows { padding: 4px 18px 60px; }
  .adp__tk-row { grid-template-columns: 80px minmax(0, 1fr); column-gap: 12px; }
  .adp__stage { margin-left: 18px; max-width: calc(100% - 40px); }
  .adp__img { border-radius: 70px 0 70px 0; }
  .adp__stage::before { border-radius: 70px 0 70px 0; right: -20px; left: 50px; }
  .adp__seal { left: -18px; padding: 8px 18px 9px; }
  .adp__seal--tk { left: auto; right: 18px; }
  .adp__seal-v { font-size: 16px; line-height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  a.adp__crumb,
  .adp__seal { transition: none; }
  .adp__seal:hover,
  .adp__seal:focus-visible { transform: none; }
}

/* the page kinds: a service keeps the plain hero above; the others change the corner, the
   heading's width of letter and the job sheet, so each kind of page opens differently. */

/* a city: the softer navy, the corner on the other side, the city's name set huge and hollow
   behind, and the sheet leaning the other way on a blue shadow */
.adp--city {
  background-color: var(--dark-soft);
  border-radius: 0 0 0 160px;
}

.adp--city .adp__ghost { display: none; }

.adp__place {
  position: absolute;
  right: -.04em;
  bottom: -.2em;
  font-family: var(--at-face);
  font-style: var(--at-face-style);
  font-stretch: 150%;
  font-size: 220px;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px rgba(124, 196, 234, .2);
  pointer-events: none;
  user-select: none;
}

.adp--city .adp__ticket {
  transform: rotate(2deg);
  box-shadow: -18px 18px 0 var(--secondary), 0 30px 60px rgba(0, 0, 0, .4);
}

.adp--city .adp__tk-head { background-color: var(--primary); }
.adp--city .adp__tk-chev { fill: var(--white); }
.adp--city .adp__seal--tk { right: auto; left: 28px; }
.adp--city .adp__stage::before { background-color: var(--secondary); }

/* commercial: a red rule along the top, the heading in tall narrow capitals like a plant-room
   label, and the logo's chevrons large behind */
.adp--commercial { border-top: 5px solid var(--primary); }

.adp--commercial .adp__h1 {
  max-width: 16ch;
  font-size: 58px;
  line-height: 58px;
  font-stretch: 72%;
  font-weight: 900;
  text-transform: uppercase;
}

.adp--commercial .adp__ghost {
  right: auto;
  left: -140px;
  bottom: -90px;
  width: 820px;
  opacity: .06;
}

/* a guide: one wide column with a larger heading, and the sheet laid flat underneath as an
   index strip */
.adp--guide .adp__in {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 56px;
}

.adp--guide .adp__h1 {
  max-width: 20ch;
  font-size: 64px;
  line-height: 72px;
}

.adp--guide .adp__lead { max-width: 44em; }

.adp--guide .adp__tkwrap {
  justify-self: stretch;
  max-width: none;
  margin-bottom: 26px;
}

.adp--guide .adp__ticket {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  transform: none;
  box-shadow: 14px 14px 0 var(--primary), 0 30px 60px rgba(0, 0, 0, .4);
}

.adp--guide .adp__tk-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  justify-content: center;
  border-bottom: 0;
  border-right: 3px dashed rgba(255, 255, 255, .35);
}

.adp--guide .adp__tk-rows {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 22px;
  padding: 24px 28px 52px;
}

.adp--guide .adp__tk-row {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 6px;
  padding: 0 0 0 20px;
  border-bottom: 0;
  border-left: 1px solid rgba(11, 42, 72, .12);
}

.adp--guide .adp__tk-row:first-child {
  padding-left: 0;
  border-left: 0;
}

/* the company pages (about, brands, projects, contact): both lower corners rounded, the heading
   at the logo's full width, and a blue-headed sheet tipped further */
.adp--company { border-radius: 0 0 160px 160px; }

.adp--company .adp__h1 {
  max-width: 15ch;
  font-size: 56px;
  line-height: 64px;
  font-stretch: 150%;
  font-weight: 800;
}

.adp--company .adp__ticket { transform: rotate(-3.5deg); }
.adp--company .adp__tk-head { background-color: var(--secondary); border-bottom-color: rgba(11, 42, 72, .3); }
.adp--company .adp__tk-title { color: var(--dark); }
.adp--company .adp__tk-chev { fill: var(--primary); }

@media (max-width: 1100px) {
  .adp--guide .adp__h1 { font-size: 56px; line-height: 64px; }
  .adp--company .adp__h1 { font-size: 48px; line-height: 56px; }
  .adp__place { font-size: 170px; }
}

@media (max-width: 959px) {
  .adp--city { border-radius: 0 0 0 110px; }
  .adp--company { border-radius: 0 0 110px 110px; }
  .adp--commercial .adp__h1 { font-size: 48px; line-height: 50px; }
  .adp--guide .adp__h1 { font-size: 46px; line-height: 54px; }
  .adp--company .adp__h1 { font-size: 42px; line-height: 50px; }
  .adp--guide .adp__ticket { grid-template-columns: minmax(0, 1fr); }
  .adp--guide .adp__tk-head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-right: 0;
    border-bottom: 3px dashed rgba(255, 255, 255, .35);
  }
  .adp--guide .adp__tk-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .adp--guide .adp__tk-row:nth-child(odd) { padding-left: 0; border-left: 0; }
  .adp__place { font-size: 130px; }
}

@media (max-width: 479px) {
  .adp--city { border-radius: 0 0 0 80px; }
  .adp--company { border-radius: 0 0 80px 80px; }
  .adp--commercial .adp__h1 { font-size: 38px; line-height: 40px; }
  .adp--guide .adp__h1 { font-size: 36px; line-height: 43px; }
  .adp--company .adp__h1 { font-size: 34px; line-height: 41px; }
  .adp--city .adp__ticket,
  .adp--company .adp__ticket { transform: none; }
  .adp--city .adp__ticket { box-shadow: -10px 10px 0 var(--secondary), 0 24px 48px rgba(0, 0, 0, .4); }
  .adp--city .adp__tkwrap { margin-left: 10px; }
  .adp--city .adp__seal--tk { left: 18px; }
  .adp--guide .adp__ticket { box-shadow: 10px 10px 0 var(--primary), 0 24px 48px rgba(0, 0, 0, .4); }
  .adp--guide .adp__tk-rows { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding: 4px 18px 60px; }
  .adp--guide .adp__tk-row,
  .adp--guide .adp__tk-row:nth-child(odd) {
    grid-template-columns: 80px minmax(0, 1fr);
    column-gap: 12px;
    padding: 14px 0;
    border-left: 0;
    border-bottom: 1px solid rgba(11, 42, 72, .12);
  }
  .adp--guide .adp__tk-row:last-child { border-bottom: 0; }
  .adp__place { font-size: 92px; }
}

@media (max-width: 766px) {
  .adp__copy { text-align: center; }
  .adp__trail { justify-content: center; }
  .adp__h1,
  .adp__lead { margin-inline: auto; }
}

/* a problem page (v3, 2026-10-22): the hero's right side is the way down the page, one row per group of
   the triage below, each marked in its gauge colour */
.adp--problem { border-radius: 0 0 160px 0; }

.adp__jump {
  padding: 28px 30px 26px;
  background-color: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50px 0 50px 0;
}

.adp__jump-h {
  margin-bottom: 14px;
  font-family: var(--at-face);
  font-style: var(--at-face-style);
  font-stretch: var(--at-label);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--secondary);
}

.adp__jumps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.adp__jumpa {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 4px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: var(--white);
  text-decoration: none;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.adp__jumpdot {
  flex: none;
  width: 16px;
  height: 16px;
  background-color: var(--secondary);
  border-radius: 50%;
}

.adp__jumpa--book .adp__jumpdot { background-color: rgb(110, 139, 160); }
.adp__jumpa--stop .adp__jumpdot { background-color: var(--primary); }

.adp__jumpt { flex: 1 1 auto; }

.adp__jumparr {
  flex: none;
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: transform .2s cubic-bezier(.2, 0, 0, 1);
}

.adp__jumpa:hover,
.adp__jumpa:focus-visible { color: var(--secondary); }

.adp__jumpa:hover .adp__jumparr,
.adp__jumpa:focus-visible .adp__jumparr { transform: translateY(3px) rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  .adp__jumparr { transition: none; }
}

/* a normal-or-not problem page: the hero's right side is the key to the stamps on the rows below */
.adp__key {
  padding: 28px 30px 30px;
  background-color: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50px 0 50px 0;
}

.adp__stamps {
  display: grid;
  row-gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.adp__stampi {
  display: grid;
  grid-template-columns: 158px minmax(0, 1fr);
  column-gap: 20px;
  align-items: center;
}

.adp__stamp {
  padding: 7px 12px 6px;
  font-family: var(--at-face);
  font-style: var(--at-face-style);
  font-stretch: var(--at-label);
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-align: center;
  text-transform: uppercase;
  color: var(--secondary);
  border: 2px solid var(--secondary);
  border-radius: 0 10px 0 10px;
  transform: rotate(-4deg);
}

.adp__stampi--watch .adp__stamp {
  color: var(--white);
  border-color: var(--white);
}

.adp__stampi--stop .adp__stamp {
  color: rgb(124, 196, 234);
  border-color: rgb(124, 196, 234);
}

.adp__stampt {
  margin: 0;
  color: var(--white);
}

/* an emergency problem page (gas, CO): no booking bar; the hero's right side is the first thing to do, on a
   red card whose edge pulses once every few seconds, before anything about us */
.adp__alarm {
  position: relative;
  padding: 40px 40px 38px;
  background-color: var(--primary);
  border-radius: 0 50px 0 50px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
}

.adp__alarm::before {
  content: "";
  position: absolute;
  inset: -12px;
  border: 3px solid var(--primary);
  border-radius: 0 60px 0 60px;
  opacity: 0;
}

.adp__alarm-k {
  margin: 0 0 8px;
  font-family: var(--at-face);
  font-style: var(--at-face-style);
  font-stretch: var(--at-label);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white);
}

.adp__alarm-now {
  margin: 0;
  font-family: var(--at-face);
  font-style: var(--at-face-style);
  font-stretch: var(--at-wide);
  font-size: 46px;
  line-height: 52px;
  font-weight: 800;
  color: var(--white);
}

.adp__alarm-then {
  margin: 16px 0 0;
  font-size: 19px;
  line-height: 28px;
  font-weight: 700;
  color: var(--white);
}

@media (prefers-reduced-motion: no-preference) {
  .adp__alarm::before { animation: adp-ring 2.6s cubic-bezier(.2, 0, 0, 1) infinite; }
}

@keyframes adp-ring {
  0% { opacity: .9; transform: scale(.97); }
  100% { opacity: 0; transform: scale(1.06); }
}

@media (max-width: 766px) {
  .adp__alarm { padding: 30px 26px 28px; }

  .adp__alarm-now { font-size: 36px; line-height: 42px; }

  .adp__stampi { grid-template-columns: 140px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .adp__alarm::before { animation: none; }
}

/* job (a project page): the job ticket lies on its carbon copy, the copy in the logo's light blue showing
   at an angle behind it */
.adp--job .adp__tkwrap::before {
  content: "";
  position: absolute;
  top: 16px;
  right: -16px;
  bottom: -10px;
  left: 16px;
  background-color: var(--secondary);
  border-radius: 0 0 50px 0;
  transform: rotate(3deg);
}

.adp--job .adp__ticket {
  transform: rotate(-1.5deg);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .4);
}

.adp--job .adp__tk-head { border-bottom-color: rgba(124, 196, 234, .55); }

@media (max-width: 479px) {
  .adp--job .adp__tkwrap::before {
    top: 10px;
    right: -10px;
    left: 10px;
    transform: rotate(2deg);
  }

  .adp--job .adp__ticket { transform: none; box-shadow: 0 24px 48px rgba(0, 0, 0, .4); }
}

/* client.links */
/* client.links - white link cards on the dark band, its top corner cut like the hero's foot:
   a hub's grouped index, or the next pages to read. */
.adl {
  padding: var(--sys-space-42) 0;
  background-color: var(--dark);
  border-radius: 160px 0 0 0;
}

/* a hub's index sits on white, straight under the dark hero */
.adl--hub {
  background-color: var(--white);
  border-radius: 0;
}

.adl--hub .adl__eyebrow { color: var(--primary); }
.adl--hub .adl__h2,
.adl--hub .adl__gh { color: var(--dark); }
.adl--hub .adl__intro { color: var(--ink); }
.adl--hub .adl__a { background-color: var(--white); border-bottom-color: var(--dark); box-shadow: 0 14px 34px rgba(11, 42, 72, .1); }
.adl--hub .adl__label { color: var(--dark); }
.adl--hub .adl__note { color: var(--ink); }
.adl--hub .adl__arrow { fill: var(--primary); }
.adl--hub a.adl__a:hover,
.adl--hub a.adl__a:focus-visible { box-shadow: 0 22px 44px rgba(11, 42, 72, .16); }

.adl__head {
  max-width: 760px;
  margin-bottom: 44px;
}

.adl__eyebrow { color: var(--secondary); }

.adl__h2 {
  margin: 12px 0 0;
  color: var(--white);
  text-wrap: balance;
}

.adl__intro {
  margin-top: 14px;
  color: rgba(255, 255, 255, .86);
}

.adl__group + .adl__group { margin-top: 64px; }

.adl__gh {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
  color: var(--white);
}

.adl__chev {
  flex: 0 0 auto;
  width: 36px;
  height: 20px;
  fill: var(--primary);
}

.adl__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.adl__a {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px 64px 28px 26px;
  background-color: var(--dark-soft);
  border-bottom: 4px solid var(--secondary);
  border-radius: 0 0 36px 0;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease, border-color .3s ease;
}

a.adl__a:hover,
a.adl__a:focus-visible {
  transform: translateY(-4px);
  border-bottom-color: var(--primary);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .4);
}

.adl__label { color: var(--white); }

.adl__note {
  margin-top: 8px;
  color: rgba(255, 255, 255, .82);
}

.adl__arrow {
  position: absolute;
  right: 24px;
  top: 30px;
  width: 24px;
  height: 24px;
  fill: var(--secondary);
  transition: transform .3s ease;
}

a.adl__a:hover .adl__arrow,
a.adl__a:focus-visible .adl__arrow { transform: translateX(4px); }

@media (max-width: 1100px) {
  .adl__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 766px) {
  .adl { padding: var(--sys-space-41) 0; border-radius: 80px 0 0 0; }
  .adl--hub { border-radius: 0; }
  .adl__head { margin-bottom: 32px; }
  .adl__group + .adl__group { margin-top: 48px; }
  .adl__cards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .adl__a { padding: 20px 56px 22px 20px; border-radius: 0 0 28px 0; }
  .adl__arrow { right: 18px; top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .adl__a,
  .adl__arrow { transition: none; }
  a.adl__a:hover,
  a.adl__a:focus-visible,
  a.adl__a:hover .adl__arrow,
  a.adl__a:focus-visible .adl__arrow { transform: none; }
}

@media (max-width: 766px) {
  .adl__head { margin-inline: auto; text-align: center; }
  .adl__gh { justify-content: center; }
}

/* client.body */
/* client.body - an inner page's words on white: a sticky rail of jump links over a dark call card,
   and one readable column of blocks (text, steps, list, table, researched rule, call strip). */
.adb { padding: var(--sys-space-42) 0; }

.adb__in {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  column-gap: 80px;
  align-items: start;
}

/* the rail */
.adb__rail {
  position: sticky;
  top: calc(var(--at-head) + 24px); /* under the sticky header (client.copyright) */
}

.adb__railh {
  margin: 0 0 14px;
  color: var(--primary);
}

.adb__toc {
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
  border-left: 3px solid rgba(11, 42, 72, .1);
}

.adb__toclink {
  display: block;
  margin-left: -3px;
  padding: 9px 0 9px 18px;
  color: var(--dark);
  border-left: 3px solid rgba(0, 0, 0, 0);
  transition: color .3s ease, border-color .3s ease;
}

.adb__toclink:hover,
.adb__toclink:focus-visible {
  color: var(--primary);
  border-left-color: var(--primary);
}

.adb__call {
  padding: 26px 24px 24px;
  background-color: var(--dark);
  border-radius: 0 0 40px 0;
  box-shadow: 10px 10px 0 var(--primary);
}

.adb__callh {
  margin: 0 0 6px;
  color: var(--white);
}

.adb__tel {
  display: block;
  margin-bottom: 18px;
  color: var(--secondary);
  text-decoration: underline;
  text-decoration-color: rgba(124, 196, 234, .4);
  text-underline-offset: 4px;
}

.adb__btn { width: 100%; }

/* the column */
.adb__main {
  max-width: 760px;
  color: var(--ink);
}

.adb__block + .adb__block,
.adb__rule + .adb__block,
.adb__cta + .adb__block { margin-top: 56px; }

.adb__block { scroll-margin-top: 24px; }

.adb__h2 {
  margin: 0 0 16px;
  color: var(--dark);
  text-wrap: balance;
}

.adb__p { margin: 0 0 16px; }

.adb__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.adb__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  transition: color .3s ease;
}

.adb__link:hover,
.adb__link:focus-visible { color: var(--primary-dark); }

.adb__arrow {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: currentColor;
  transition: transform .3s ease;
}

.adb__link:hover .adb__arrow,
.adb__link:focus-visible .adb__arrow { transform: translateX(4px); }

/* steps: red tabs cut like the logo's chevrons, joined by a rule */
.adb__steps {
  position: relative;
  margin: 24px 0 8px;
  padding: 0;
  list-style: none;
}

.adb__steps::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 25px;
  width: 2px;
  background-color: rgba(27, 115, 184, .25);
}

.adb__step {
  position: relative;
  padding: 0 0 28px 84px;
}

.adb__step:last-child { padding-bottom: 0; }

.adb__num {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 46px;
  padding-right: 6px;
  background-color: var(--primary);
  clip-path: polygon(0 0, 78% 0, 100% 50%, 78% 100%, 0 100%);
}

.adb__numchev {
  width: 24px;
  height: 13px;
  fill: var(--white);
}

.adb__steph {
  margin: 4px 0 6px;
  color: var(--dark);
}

.adb__stepp { margin: 0; }

/* list: red chevron bullets */
.adb__list {
  margin: 8px 0 16px;
  padding: 0;
  list-style: none;
}

.adb__li {
  position: relative;
  padding-left: 30px;
}

.adb__li + .adb__li { margin-top: 10px; }

.adb__li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-top: 3px solid var(--primary);
  border-right: 3px solid var(--primary);
  transform: rotate(45deg);
}

/* table */
.adb__tablewrap {
  margin: 20px 0 16px;
  border-radius: 0 0 30px 0;
  box-shadow: 0 16px 40px rgba(11, 42, 72, .1);
  overflow: hidden;
}

.adb__table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--white);
}

.adb__th {
  padding: 14px 18px;
  text-align: left;
  color: var(--white);
  background-color: var(--dark);
}

.adb__td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid rgba(11, 42, 72, .1);
}

.adb__tdk { display: none; }

.adb__td--first {
  font-weight: 700;
  color: var(--dark);
}

/* rule: the home page's filed notice, one column wide */
/* a video block (the client's own YouTube video, his v1 email): his job photo framed with the panel's
   cut corner, a red play disc, the running time; a click swaps in YouTube's privacy-enhanced player */
.adb__video { margin: 24px 0 0; }

.adb__vidframe {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 36px 0 0 0;
  background-color: var(--dark);
  box-shadow: 0 14px 36px rgba(11, 42, 72, .18);
}

.adb__vid {
  position: absolute;
  inset: 0;
  display: block;
}

.adb__vid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 42, 72, 0) 45%, rgba(11, 42, 72, .55) 100%);
}

.adb__vidimg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.adb__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  border-radius: 50%;
  background-color: var(--primary);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .92), 0 12px 28px rgba(0, 0, 0, .35);
  transition: transform .3s ease, background-color .3s ease;
}

.adb__playicon {
  width: 36px;
  height: 36px;
  margin-left: 4px;
  fill: var(--white);
}

.adb__vid:hover .adb__play,
.adb__vid:focus-visible .adb__play {
  transform: scale(1.08);
  background-color: var(--primary-dark);
}

.adb__vid:focus-visible {
  outline: 3px solid var(--secondary);
  outline-offset: -3px;
}


.adb__vidplayer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.adb__vidcap {
  margin-top: 12px;
  font-size: 14px;
  line-height: 20px;
  color: rgb(72, 88, 104);
}

.adb__rule {
  position: relative;
  margin: 32px 0 0;
  padding: 30px 30px 24px;
  background-color: var(--white);
  border: 1px solid rgba(11, 42, 72, .14);
  border-radius: 50px 0 0 0;
  box-shadow: 0 16px 40px rgba(11, 42, 72, .1);
}

.adb__rule + .adb__rule { margin-top: 24px; }

.adb__rule::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 58px;
  height: 58px;
  background: repeating-linear-gradient(135deg, var(--primary) 0 7px, rgba(0, 0, 0, 0) 7px 14px);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.adb__place {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 16px 7px;
  font-family: var(--at-face);
  font-style: var(--at-face-style);
  font-stretch: var(--at-label);
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--primary);
  border: 2px solid var(--primary);
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px var(--white), inset 0 0 0 3px rgba(27, 115, 184, .35);
}

.adb__ruleh {
  margin: 0 0 10px;
  color: var(--dark);
}

.adb__rulep { margin: 0; }

.adb__src {
  margin-top: 16px;
  padding-top: 12px;
  font-size: 12px;
  line-height: 17px;
  color: rgb(72, 88, 104);
  border-top: 1px solid rgba(11, 42, 72, .1);
}

.adb__src--line {
  margin-top: 14px;
  padding: 0 0 0 14px;
  border-top: 0;
  border-left: 3px solid var(--primary);
}

.adb__src--line + .adb__src--line { margin-top: 8px; }

.adb__src a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* call strip */
.adb__cta {
  margin: 48px 0 0;
  padding: 30px 32px;
  background-color: var(--dark);
  border-radius: 0 50px 0 50px;
  box-shadow: 14px 14px 0 var(--primary);
}

.adb__ctah {
  margin: 0 0 6px;
  color: var(--white);
}

.adb__ctap {
  margin: 0 0 20px;
  color: rgba(255, 255, 255, .86);
}

.adb__bar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  padding: 14px 22px 14px 14px;
  border-radius: 0 0 26px 0;
}

/* a review of his that names this page's subject: the reviews band's card language on white (red stars, a
   quote, who and where, linked to the profile), with the leaf's corners */
.adb__revs {
  display: grid;
  gap: 24px;
  margin: 8px 0 0;
}

.adb__rev {
  position: relative;
  margin: 0;
  padding: 28px 30px 24px 34px;
  background-color: var(--white);
  border: 1px solid rgba(11, 42, 72, .14);
  border-radius: 0 50px 0 50px;
  box-shadow: 0 16px 40px rgba(11, 42, 72, .1);
}

.adb__rev::before {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 24px;
  left: -1px;
  width: 4px;
  background-color: var(--primary);
}

.adb__revstars {
  display: flex;
  gap: 4px;
  margin: 0 0 14px;
}

.adb__revstar {
  width: 20px;
  height: 19px;
  fill: var(--at-rim);
}

.adb__revstar--off { opacity: .25; }

.adb__revq { margin: 0; }

.adb__revq p { margin: 0; color: var(--dark); }

.adb__revwho { margin-top: 16px; }

.adb__revname {
  font-weight: 700;
  color: var(--dark);
}

.adb__revvia {
  font-size: 14px;
  color: rgb(72, 88, 104);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.adb__revvia:hover,
.adb__revvia:focus-visible { color: var(--primary); }

@media (max-width: 1100px) {
  .adb__in { grid-template-columns: 250px minmax(0, 1fr); column-gap: 48px; }
}

@media (max-width: 959px) {
  .adb__in { grid-template-columns: minmax(0, 1fr); }
  .adb__rail { display: none; }
}

@media (max-width: 766px) {
  .adb { padding: var(--sys-space-41) 0; }
  .adb__block + .adb__block,
  .adb__rule + .adb__block,
  .adb__cta + .adb__block { margin-top: 44px; }
  .adb__tablewrap { box-shadow: none; overflow: visible; border-radius: 0; }
  .adb__table,
  .adb__table tbody,
  .adb__table tr { display: block; }
  .adb__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .adb__table tr {
    margin-bottom: 16px;
    border: 1px solid rgba(11, 42, 72, .14);
    border-radius: 0 0 24px 0;
    box-shadow: 0 10px 24px rgba(11, 42, 72, .08);
    overflow: hidden;
  }
  .adb__td {
    display: block;
    padding: 4px 16px 12px;
    border-top: 0;
  }
  .adb__tdk {
    display: block;
    padding-top: 8px;
    font-family: var(--at-face);
    font-style: var(--at-face-style);
    font-stretch: var(--at-label);
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--primary);
  }
  .adb__td--first {
    padding: 12px 16px;
    color: var(--white);
    background-color: var(--dark);
  }
}

@media (max-width: 479px) {
  .adb__step { padding-left: 68px; }
  .adb__num { width: 48px; height: 40px; }
  .adb__steps::before { left: 21px; }
  .adb__rule { padding: 26px 20px 20px; border-radius: 36px 0 0 0; }
  .adb__cta { padding: 26px 20px; box-shadow: 8px 8px 0 var(--primary); }
  .adb__bar { display: flex; padding: 14px; }
  .adb__ctabtn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .adb__play { transition: none; }
  .adb__toclink,
  .adb__link,
  .adb__arrow { transition: none; }
  .adb__link:hover .adb__arrow,
  .adb__link:focus-visible .adb__arrow { transform: none; }
}

@media (max-width: 766px) {
  .adb__cta,
  .adb__call { text-align: center; }
  .adb__links { justify-content: center; }
}

/* the loop block: a short muted portrait clip in a slanted frame, loaded only near the screen */
.adb__vidframe--tall { max-width: 300px; margin: 0; aspect-ratio: 9 / 16; overflow: hidden; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); background-color: var(--dark); }
.adb__loop { display: block; width: 100%; height: 100%; object-fit: cover; }

/* client.process */
/* client.process - how the visit goes, as numbered work-order cards joined by the logo's chevrons.
   On a computer the band holds still under the header while the cards slide across as you scroll
   (the browser's own scroll timeline, no script); without that, or with reduced motion, the cards
   simply sit in rows. */
.apr {
  padding: 110px 0;
  background-color: var(--dark-soft);
}

.apr__head { max-width: 760px; }

.apr__eyebrow { color: var(--secondary); }

.apr__h2 {
  margin: 12px 0 14px;
  color: var(--white);
}

.apr__intro { color: rgba(255, 255, 255, .86); }

.apr__view { margin-top: 48px; }

.apr__track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 28px;
  width: 88%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  counter-reset: apr;
}

.apr__step {
  counter-increment: apr;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: 92px 34px 36px;
  overflow: visible;
  background-color: var(--white);
  border-radius: 0 50px 0 50px;
  box-shadow: 0 18px 44px rgba(11, 42, 72, .1);
}

/* the work-order number, outlined in the logo's wide italic */
.apr__num {
  position: absolute;
  top: 6px;
  right: 26px;
  font-family: var(--at-face);
  font-style: var(--at-face-style);
  font-stretch: var(--at-wide);
  font-size: 96px;
  line-height: 1;
  font-weight: 900;
  color: rgba(0, 0, 0, 0);
  -webkit-text-stroke: 2px rgba(11, 42, 72, .16);
}

.apr__num::before { content: counter(apr, decimal-leading-zero); }

.apr__tab {
  position: absolute;
  top: 40px;
  left: 34px;
  width: 30px;
  height: 16px;
  fill: var(--primary);
}

.apr__title {
  margin-bottom: 12px;
  color: var(--dark);
}

.apr__body { color: var(--ink); }

.apr__chev {
  position: absolute;
  top: 50%;
  right: -26px;
  z-index: 1;
  width: 26px;
  height: 14px;
  fill: var(--primary);
}

.apr__foot { display: none; }

/* five or six cards in rows sit in threes, never four over one or two (the pinned run below lays them out itself) */
@media (min-width: 960px) {
  .apr--n5 .apr__track,
  .apr--n6 .apr__track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* the pinned run: the band is as tall as the cards need to cross, its inside sticks under the header */
@supports (animation-timeline: view()) {
  @media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
    .apr {
      padding: 0;
      view-timeline-name: --apr;
      view-timeline-axis: block;
    }

    .apr--n3 { height: 220vh; }
    .apr--n4 { height: 270vh; }
    .apr--n5 { height: 320vh; }
    .apr--n6 { height: 370vh; }

    .apr__pin {
      position: sticky;
      top: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100vh;
      padding-top: 120px;
      overflow: hidden;
    }

    .apr__view { margin-top: 40px; }

    .apr__track {
      display: flex;
      gap: 56px;
      width: max-content;
      max-width: none;
      margin: 0;
      padding: 0 max(6vw, calc((100vw - 1200px) / 2));
      animation: apr-slide linear both;
      animation-timeline: --apr;
      animation-range: contain 0% contain 100%;
    }

    .apr__step {
      width: 420px;
      min-height: 320px;
    }

    .apr__chev { right: -42px; }

    .apr__foot {
      display: block;
      margin-top: 40px;
    }

    .apr__bar {
      display: block;
      height: 4px;
      background-color: rgba(11, 42, 72, .12);
    }

    .apr__fill {
      display: block;
      height: 100%;
      background-color: var(--primary);
      transform-origin: 0 50%;
      animation: apr-fill linear both;
      animation-timeline: --apr;
      animation-range: contain 0% contain 100%;
    }
  }
}

@keyframes apr-slide {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% + 100vw)); }
}

@keyframes apr-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (max-width: 766px) {
  .apr { padding: 80px 0; }

  .apr__track { grid-template-columns: minmax(0, 1fr); gap: 34px; }

  .apr__step { min-height: 0; padding: 84px 26px 30px; }

  .apr__num { font-size: 76px; right: 18px; }

  .apr__tab { left: 26px; top: 36px; }

  .apr__chev {
    top: auto;
    right: auto;
    bottom: -26px;
    left: 34px;
    transform: rotate(90deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .apr__track,
  .apr__fill { animation: none; }
}

/* client.form */
/* client.form - the request form: the words and the two direct ways on the left, the form on a white card with a
   navy slanted edge on the right. The privacy line sits beside the button. A phone: stacked. */
.adfm { background-color: var(--white); padding: 96px 0 112px; }

.adfm__in {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 72px;
}

.adfm__eyebrow { margin: 0; color: var(--primary); }
.adfm__h2 { margin: 12px 0 14px; color: var(--dark); text-wrap: balance; }
.adfm__lead { margin: 0 0 26px; color: var(--ink); }
.adfm__ways { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }

.adfm__way {
  display: grid;
  gap: 2px;
  padding: 16px 20px;
  color: var(--dark);
  background-color: var(--pale);
  border-left: 6px solid var(--primary);
  transition: background-color .3s ease, border-color .3s ease;
}

.adfm__way:hover,
.adfm__way:focus-visible { background-color: var(--dark); color: var(--white); border-left-color: var(--secondary); }

.adfm__wk {
  font-family: var(--at-face);
  font-style: var(--at-face-style);
  font-stretch: var(--at-label);
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.adfm__wv { font-family: "Instrument Sans", sans-serif; font-size: 20px; line-height: 28px; font-weight: 700; overflow-wrap: anywhere; }

.adfm__form {
  display: grid;
  gap: 18px;
  padding: 36px 36px 32px 44px;
  background-color: var(--white);
  border: 1px solid rgba(11, 42, 72, .18);
  border-left: 12px solid var(--dark);
  box-shadow: 0 24px 50px rgba(11, 42, 72, .14);
}

.adfm__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.adfm__field { display: grid; gap: 6px; }

.adfm__label {
  font-family: "Instrument Sans", sans-serif;
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  color: var(--dark);
}

.adfm__input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  font-family: "Instrument Sans", sans-serif;
  font-size: 17px;
  line-height: 24px;
  color: var(--ink);
  background-color: var(--white);
  border: 2px solid rgba(11, 42, 72, .4);
  border-radius: 0;
}

.adfm__area { resize: vertical; min-height: 120px; }

.adfm__input:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-color: var(--dark); }

.adfm__msg { margin: 0; min-height: 24px; color: var(--dark); font-weight: 700; }
.adfm__msg:empty { display: none; }

.adfm__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.adfm__consent { margin: 0; color: var(--ink); flex: 1 1 220px; }
.adfm__consent a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 959px) {
  .adfm { padding: 72px 0 84px; }
  .adfm__in { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .adfm__form { padding: 28px 22px 26px 26px; border-left-width: 8px; }
}

@media (max-width: 599px) {
  .adfm__wv { font-size: 17px; line-height: 24px; }
  .adfm__pair { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) { .adfm__way { transition: none; } }

.adfm__tell { align-content: start; }
.adfm__tellh { margin: 0; color: var(--dark); }
.adfm__tells { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.adfm__tellitem { position: relative; margin: 0; padding-left: 26px; color: var(--ink); }
.adfm__tellitem::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 12px; background-color: var(--primary); clip-path: polygon(40% 0, 100% 0, 60% 100%, 0 100%); }
.adfm__tell .adfm__btn { justify-self: start; margin-top: 6px; }

/* the BBB seal under the ways to reach us, where a visitor decides to send the request */
.adfm__seal {
  display: block;
  width: max-content;
  margin-top: 32px;
  padding: 8px 10px;
  background-color: var(--white);
  border: 3px solid var(--at-rim);
  transition: transform .25s ease;
}

.adfm__seal-img { display: block; width: 88px; height: auto; }


@media (prefers-reduced-motion: reduce) { .adfm__seal { transition: none; } }

a.adfm__seal:hover,
a.adfm__seal:focus-visible { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  a.adfm__seal:hover,
  a.adfm__seal:focus-visible { transform: none; }
}

/* brand.css */
/* Aerotherm Mechanical brand layer on advancedair's system. The band colours are in client.json, sampled
   from the logo (the navy of AEROTHERM, the sky blue of the fan's blades; its orange-red half stays inside
   the artwork). The drawn moves are slanted strokes (the A and T of the mark lean forward) and the fan's
   blades; faces: headings and labels in a heavy wide italic like AEROTHERM, body text and link lists stay the
   base's Instrument Sans. Sizes, weights, line heights and tracking stay the system's. */
:root {
  --at-rim: #2A9AD6; /* brand: the fan's sky blue at full strength, the rim of the license nameplate (a small mark only; bands use the darker primary) */
  --at-swirl: #D24C28; /* brand: the logo's orange swirl, sampled from logo.png (George, 2026-10-27: "throw some orange in the website, just like the logo"); marks and blocks only, never small text */
  --at-swirl-lt: #FF9470; /* brand: the swirl lifted for small labels and marks on both navies (about 6.7:1 on the dark navy, 4.7:1 on the softer one) */
  --at-swirl-deep: #9A3216; /* brand: the swirl at its darkest, a Request service button under the pointer or keyboard (George, 2026-10-27: more orange, "the logo just makes the contrast better") */
  --at-edge: 6px; /* brand: the orange edge across the top of the footer, as the swirl closes the logo (George, 2026-10-27) */
  --at-swirl-dk: #B83E1E; /* brand: the swirl deepened for small labels on white and the pale blue (about 5:1) */
  --at-face: "Archivo", "Instrument Sans", sans-serif; /* brand: the logo's AEROTHERM is a heavy wide italic grotesque; Archivo (OFL, in the open pool) has the italic and a width axis to match it */
  --at-face-style: italic; /* brand: the logo's words and strokes all lean forward */
  --at-wide: 125%; /* brand: headings set wide like MECHANICAL in the logo */
  --at-label: 90%; /* brand: caps labels, buttons and city names a touch narrow, so short boxes still hold their words */
  --at-head: 152px; /* brand: the sticky header's tallest measured height (152px on a computer with the info bar showing, 148px at 1024; a phone's header is the logo and the menu alone; 108-112px on a computer with the bar slid away), so jump links and the rail stop under it at every width */
  --at-head-phone: 72px; /* brand: a phone's sticky header, the logo and the menu alone (72px measured at 320 to 390, 78px at 768); the shortest, so the home hero's first screen on a phone never ends above the screen's foot (client's email, 2026-10-24) */
  --at-top: 40px; /* brand: the computer's info bar height (client, 2026-10-21: address, hours, email, license above the header); the header slides up by it on a scroll down, hiding the bar, and back on a scroll up */
  --at-slide: transform .25s cubic-bezier(.2, 0, 0, 1); /* brand: the computer's info bar sliding out of sight on a scroll down and back on a scroll up (client's v1 email, after NUR's header); a transform only, dropped under reduced motion */
  --at-flip: transform .2s cubic-bezier(.2, 0, 0, 1); /* brand: a menu's arrow turning to point up while that menu is open (George, 2026-10-22); a transform only, dropped under reduced motion */
  --at-up: rotate(180deg); /* brand: the open menu's arrow turned to point up (George, 2026-10-22) */
  --at-x-top: translateY(9px) rotate(45deg); /* brand: the menu button's top line turning into one stroke of an X while the menu is open (George, 2026-10-23) */
  --at-x-bot: translateY(-9px) rotate(-45deg); /* brand: the menu button's bottom line turning into the other stroke of the X (George, 2026-10-23) */
  --at-head-room: calc(100vh - 152px); /* brand: the screen left under the sticky header, the most an open menu may take before it scrolls */
  --at-pill: 999px; /* brand: the Request service buttons fully rounded, as the floating buttons are */
  --at-pill-l: 999px 0 0 999px; /* brand: the phone's Call button, rounded on its outer left side, straight on its inner side (client's email, 2026-10-24) */
  --at-pill-r: 0 999px 999px 0; /* brand: the phone's chat button, straight on its inner side, rounded on its outer right (client's email, 2026-10-24) */
  --at-foot: calc(12px + env(safe-area-inset-bottom, 0px)); /* brand: the floating buttons' lift off the screen's foot, clear of a phone's home bar (client's email, 2026-10-24) */
  --at-away: translateY(calc(100% + 60px)); /* brand: the floating buttons slid out of sight below the screen on a scroll down, back on a scroll up (client's email, 2026-10-24) */
}

/* one variable file: every width and weight of the italic, latin only */
@font-face {
  font-family: "Archivo";
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(public/fonts/archivo-italic-var-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.r-h1,
.r-h3,
.r-promo__h,
.r-areas__h2,
.r-feat__title,
.r-contact__formtitle {
  font-family: var(--at-face);
  font-style: var(--at-face-style);
  font-stretch: var(--at-wide);
}

.btn__label,
.bar__loc,
.hd__loc,
.r-bar__loc,
.r-btn__label,
.r-contact__submit,
.r-eyebrow,
.r-ft__heading,
.r-hero__eyebrow,
.r-areas__cityname {
  font-family: var(--at-face);
  font-style: var(--at-face-style);
  font-stretch: var(--at-label);
}

a.btn[href$="contact/index.html"],
a.btn[href$="/contact/"] { border-radius: var(--at-pill); background: var(--at-swirl-dk); } /* brand: every Request service button, wherever it sits, is a full pill in the logo's orange (George, 2026-10-27), white words at 5.6:1 */
a.btn[href$="contact/index.html"]:hover,
a.btn[href$="contact/index.html"]:focus-visible,
a.btn[href$="/contact/"]:hover,
a.btn[href$="/contact/"]:focus-visible { background: var(--at-swirl-deep); } /* brand: the orange button darkens under the pointer or keyboard */