/* 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.hero */
/* client.hero - the words on the logo's dark blue, a stage of the client's own photos on the
   right, the band's foot cut by advancedair's one huge corner. Depth comes from layers: the
   faint logo chevrons, an offset red block, the rooftop photo, the furnace overlapping it and
   the licence nameplate over both. One column below 960. */
.adh {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: var(--dark);
  border-radius: 0 0 200px 0;
  padding: 72px 0 120px;
}

.adh__ghost {
  position: absolute;
  right: 300px;
  top: 150px;
  width: 560px;
  height: auto;
  opacity: .08;
  pointer-events: none;
}

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

.adh__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  column-gap: 64px;
}

.adh__eyebrow {
  margin: 0;
  color: var(--secondary);
}

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

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

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

.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(--primary);
}

/* the stage */
.adh__stage {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 500px;
  padding: 0 0 70px 70px;
}

.adh__stage::before {
  content: "";
  position: absolute;
  top: 34px;
  right: -34px;
  bottom: 104px;
  left: 104px;
  background-color: var(--primary);
  border-radius: 100px 0 100px 0;
}

.adh__main,
.adh__inset {
  position: relative;
  margin: 0;
}

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

.adh__inset {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44%;
}

.adh__inset .adh__img {
  width: 100%;
  height: auto;
  border: 6px solid var(--white);
  border-radius: 0 0 50px 0;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .45);
}

.adh__cap {
  position: absolute;
  font-family: var(--ad-face);
  font-style: var(--ad-face-style);
  font-stretch: var(--ad-label);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white);
  background-color: rgba(14, 34, 48, .82);
  padding: 7px 12px;
}

.adh__main .adh__cap {
  right: 0;
  top: 22px;
}

.adh__inset .adh__cap {
  left: 6px;
  bottom: 6px;
}

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

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

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

.adh__seal-v {
  font-family: "Instrument Sans", sans-serif;
  font-size: 19px;
  line-height: 24px;
  font-weight: 700;
  color: var(--ad-badge-red);
}

@media (max-width: 1100px) {
  .adh__in { column-gap: 40px; }
  .adh__stage { padding: 0 0 60px 50px; }
}

@media (max-width: 959px) {
  .adh {
    border-radius: 0 0 110px 0;
    padding: 40px 0 90px;
  }
  .adh__in { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .adh__ghost { width: 520px; top: auto; bottom: 60px; right: -120px; }
  .adh__stage {
    justify-self: center;
    max-width: 440px;
    padding: 0 26px 60px 44px;
  }
  .adh__stage::before { right: 0; top: 26px; }
}

@media (max-width: 479px) {
  .adh { border-radius: 0 0 80px 0; }
  .adh__h1 { margin: 12px 0 14px; }
  .adh__bar {
    display: flex;
    margin-top: 24px;
    padding: 14px;
  }
  .adh__btn { flex: 1 1 100%; }
  .adh__stage { padding: 0 14px 54px 30px; }
  .adh__main .adh__img { border-radius: 70px 0 70px 0; }
  .adh__stage::before { border-radius: 70px 0 70px 0; left: 70px; bottom: 90px; }
  .adh__inset { width: 46%; }
  .adh__seal { left: auto; right: 0; bottom: 14px; padding: 8px 18px 9px; }
  .adh__seal-v { font-size: 16px; line-height: 20px; }
}

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

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

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

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

.ads__eyebrow { color: var(--primary); }

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

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

.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(14, 34, 48, .12);
}

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

.ads__photo {
  width: 62%;
  height: auto;
  margin: -84px 0 0 auto;
  border-radius: 100px 0 100px 0;
  box-shadow: 0 22px 44px rgba(14, 34, 48, .3);
}

.ads__panel--heating .ads__photo {
  margin: -84px auto 0 0;
  border-radius: 0 100px 0 100px;
}

.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(--primary); }

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

.ads__list li + li { border-top: 1px solid rgba(14, 34, 48, .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__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(196, 16, 16, .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: -110px; padding: 190px 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: -80px; padding: 144px 0 70px; }
  .ads__panel { padding: 0 20px 20px; }
  .ads__photo,
  .ads__panel--heating .ads__photo { width: 74%; margin-top: -70px; border-radius: 70px 0 70px 0; }
  .ads__panel--heating .ads__photo { border-radius: 0 70px 0 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: the client's own photos staggered in four columns on the dark
   band, a short loop among them, one huge corner at the band's foot. */
.adw {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: var(--dark);
  border-radius: 0 0 200px 0;
  padding: 110px 0 150px;
}

.adw__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px 64px;
  align-items: end;
  margin-bottom: 64px;
}

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

.adw__h2 {
  margin-top: 12px;
  color: var(--white);
}

.adw__body { color: rgba(255, 255, 255, .84); }

.adw__btn { margin-top: 24px; }

.adw__wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

.adw__col {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.adw__col--down { margin-top: 70px; }

.adw__tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  box-shadow: 0 22px 44px rgba(0, 0, 0, .38);
}

.adw__col:first-child .adw__tile:first-child { border-radius: 50px 0 0 0; }
.adw__col:last-child .adw__tile:last-child { border-radius: 0 0 50px 0; }

.adw__img,
.adw__vid {
  display: block;
  width: 100%;
  height: auto;
}

.adw__vid { aspect-ratio: 4 / 3; object-fit: cover; background-color: var(--dark-soft); }

.adw__tile--wide .adw__img { aspect-ratio: 4 / 3; object-fit: cover; }

.adw__tile--loop::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 54px;
  height: 54px;
  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%);
}

.adw__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 12px 9px;
  font-family: var(--ad-face);
  font-style: var(--ad-face-style);
  font-stretch: var(--ad-label);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white);
  background-color: rgba(14, 34, 48, .9);
}

@media (max-width: 959px) {
  .adw { border-radius: 0 0 110px 0; padding: 80px 0 130px; }
  .adw__head { grid-template-columns: minmax(0, 1fr); margin-bottom: 44px; }
  .adw__wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .adw__col { gap: 14px; }
  .adw__col--down { margin-top: 0; }
  .adw__col:nth-child(2n) { margin-top: 48px; }
}

@media (max-width: 479px) {
  .adw { border-radius: 0 0 80px 0; padding: 64px 0 110px; }
  .adw__cap { padding: 7px 9px 8px; font-size: 11px; line-height: 14px; letter-spacing: 1px; }
}

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

/* client.rules */
/* client.rules - three researched local rules as filed notices on white, each tagged with
   its place in the AD badge's rim and marked at its corner with red stripes. */
.adr { padding: 110px 0 100px; }

.adr__head {
  max-width: 760px;
  margin-bottom: 52px;
}

.adr__eyebrow { color: var(--primary); }

.adr__h2 {
  margin: 12px 0 14px;
  color: var(--dark);
}

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

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

.adr__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 30px 28px;
  background-color: var(--white);
  border: 1px solid rgba(14, 34, 48, .14);
  border-radius: 50px 0 0 0;
  box-shadow: 0 16px 40px rgba(14, 34, 48, .1);
}

.adr__card::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%);
}

.adr__place {
  align-self: flex-start;
  margin-bottom: 18px;
  padding: 6px 16px 7px;
  font-family: var(--ad-face);
  font-style: var(--ad-face-style);
  font-stretch: var(--ad-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(196, 16, 16, .35);
}

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

.adr__body {
  flex: 1 1 auto;
  color: var(--ink);
}

.adr__src {
  margin-top: 18px;
  padding-top: 14px;
  font-size: 13px;
  line-height: 19px;
  color: rgb(84, 98, 108);
  border-top: 1px solid rgba(14, 34, 48, .12);
}

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

.adr__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-weight: 700;
  color: var(--dark-soft);
  transition: color .3s ease;
}

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

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

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

.adr__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  margin-top: 40px;
}

@media (max-width: 959px) {
  .adr { padding: 80px 0 76px; }
  .adr__cards { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
}

@media (max-width: 479px) {
  .adr { padding: 64px 0 64px; }
  .adr__card { padding: 30px 22px 24px; border-radius: 36px 0 0 0; }
  .adr__btn { flex: 1 1 100%; }
}

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

@media (max-width: 766px) {
  .adr__head,
  .adr__card { text-align: center; }
  .adr__head { margin-inline: auto; }
  .adr__place,
  .adr__link { align-self: center; }
  .adr__foot { justify-content: center; }
}

/* client.commercial */
/* client.commercial - a full band of the logo's red with one huge corner at its top left, holding
   a dark card: the rooftop loop lifted out of its top edge, the commercial services beside it. */
.adc {
  position: relative;
  overflow: hidden;
  padding: 120px 0 150px;
  background-color: var(--primary);
  border-radius: 200px 0 0 0;
}

.adc__ghost {
  position: absolute;
  left: -60px;
  bottom: -40px;
  width: 620px;
  height: auto;
  fill: var(--white);
  opacity: .07;
  pointer-events: none;
}

.adc__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  padding: 0 56px 56px 0;
  background-color: var(--dark);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
}

.adc__media {
  align-self: stretch;
  display: flex;
  margin: -60px 0 0 -28px;
}

.adc__vid {
  display: block;
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: cover;
  background-color: var(--dark-soft);
  border-radius: 0 100px 0 100px;
  box-shadow: 0 26px 50px rgba(0, 0, 0, .45);
}

.adc__copy { padding-top: 56px; }

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

.adc__h2 {
  margin: 12px 0 16px;
  color: var(--white);
}

.adc__body { color: rgba(255, 255, 255, .84); }

.adc__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 24px;
  margin: 24px 0 30px;
  padding: 0;
  list-style: none;
}

.adc__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  font-weight: 700;
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  transition: color .3s ease;
}

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

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

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

@media (max-width: 959px) {
  .adc { padding: 90px 0 120px; border-radius: 110px 0 0 0; }
  .adc__card { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 28px 34px; }
  .adc__media { display: block; margin: -50px -12px 0 -12px; }
  .adc__vid { min-height: 0; aspect-ratio: 16 / 9; }
  .adc__copy { padding-top: 34px; }
}

@media (max-width: 479px) {
  .adc { padding-top: 76px; border-radius: 80px 0 0 0; }
  .adc__card { padding: 0 20px 28px; }
  .adc__vid { border-radius: 0 60px 0 60px; }
  .adc__list { grid-template-columns: minmax(0, 1fr); }
}

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

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

/* client.trust */
/* client.trust - three cards over the red band's foot, the middle one dark and raised, each with a
   round badge on its top edge (advancedair's feature row). */
.adt {
  position: relative;
  margin-top: -96px;
  padding: 0 0 96px;
}

.adt__h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.adt__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.adt__card {
  position: relative;
  margin-top: 48px;
  padding: 64px 30px 34px;
  text-align: center;
  background-color: var(--pale);
  box-shadow: 0 14px 36px rgba(14, 34, 48, .14);
}

.adt__card--dark {
  margin-top: 16px;
  padding-bottom: 66px;
  background-color: var(--dark-soft);
  box-shadow: 0 24px 50px rgba(14, 34, 48, .32);
}

.adt__badge {
  position: absolute;
  left: 50%;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  margin-left: -46px;
  margin-top: -46px;
  border-radius: 50%;
  background-color: var(--white);
  box-shadow: 0 0 0 5px var(--primary), 0 0 0 9px var(--white), 0 10px 24px rgba(0, 0, 0, .22);
}

.adt__badge--CSLB { background-color: var(--primary); box-shadow: 0 0 0 5px var(--white), 0 0 0 9px var(--primary), 0 10px 24px rgba(0, 0, 0, .22); }

.adt__marktext {
  font-family: var(--ad-face);
  font-style: var(--ad-face-style);
  font-stretch: var(--ad-label);
  font-size: 24px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--white);
}

.adt__mark {
  width: 64px;
  height: auto;
}

.adt__badge--photo { overflow: hidden; }

.adt__photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.adt__title {
  margin: 0 0 12px;
  color: var(--dark);
}

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

.adt__card--dark .adt__title { color: var(--white); }
.adt__card--dark .adt__body { color: rgba(255, 255, 255, .86); }

.adt__more { margin-top: 16px; }

.adt__more a {
  font-weight: 700;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color .3s ease;
}

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

.adt__src {
  margin-top: 14px;
  font-size: 12px;
  line-height: 17px;
  color: rgb(84, 98, 108);
}

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

@media (max-width: 959px) {
  .adt { margin-top: -60px; padding-bottom: 72px; }
  .adt__cards { grid-template-columns: minmax(0, 1fr); gap: 34px; max-width: 560px; margin: 0 auto; }
  .adt__card,
  .adt__card--dark { margin-top: 46px; padding-bottom: 34px; }
}

@media (max-width: 479px) {
  .adt__card,
  .adt__card--dark { margin-top: 40px; padding: 50px 20px 24px; }
  .adt__badge { width: 74px; height: 74px; margin-left: -37px; margin-top: -37px; }
  .adt__marktext { font-size: 19px; line-height: 20px; }
  .adt__mark { width: 52px; }
}

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

/* client.areas */
/* client.areas - the cities on the dark blue band, one huge corner at its top left; the nine
   city pages as big links, the rest by county on a white card. */
.ada {
  position: relative;
  overflow: hidden;
  background-color: var(--dark);
  border-radius: 200px 0 0 0;
  padding: 110px 0 120px;
}

.ada__ghost {
  position: absolute;
  right: -90px;
  top: -30px;
  width: 640px;
  height: auto;
  opacity: .08;
  pointer-events: none;
}

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

.ada__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 56px;
  align-items: start;
}

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

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

.ada__intro { color: rgba(255, 255, 255, .84); }

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

.ada__city {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 0 12px;
  color: var(--white);
  border-bottom: 2px solid rgba(255, 255, 255, .16);
  transition: color .3s ease, border-color .3s ease;
}

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

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

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

.ada__card {
  position: relative;
  margin-top: 40px;
  padding: 40px 32px 32px;
  background-color: var(--white);
  border-radius: 0 0 50px 0;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
}

.ada__card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 6px;
  background-color: var(--primary);
  box-shadow: 0 3px 0 var(--white), 0 5px 0 var(--primary);
}

.ada__cardtitle {
  margin-bottom: 8px;
  color: var(--dark);
}

.ada__county {
  margin-top: 16px;
  font-family: var(--ad-face);
  font-style: var(--ad-face-style);
  font-stretch: var(--ad-label);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--primary);
}

.ada__list {
  margin-top: 4px;
  color: var(--ink);
}

.ada__btn { margin-top: 26px; }

@media (max-width: 959px) {
  .ada { border-radius: 110px 0 0 0; padding: 84px 0 90px; }
  .ada__in { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ada__cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 479px) {
  .ada { border-radius: 80px 0 0 0; padding: 70px 0 76px; }
  .ada__cities { gap: 0 18px; }
  .ada__card { padding: 34px 22px 26px; }
  .ada__btn { display: flex; }
}

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

@media (max-width: 766px) {
  .ada__main,
  .ada__card { text-align: center; }
  .ada__cities { text-align: left; }
}

/* 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(14, 34, 48, .22);
}

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

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

.adx__body { color: rgba(255, 255, 255, .9); }

.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 logo on a white
   plate with the base's corner, contact and licence, three link columns. */
.adf {
  background-color: var(--dark);
  padding: var(--sys-space-42) 0 var(--sys-space-34);
}

.adf__logo {
  display: block;
  padding: var(--sys-space-19) var(--sys-space-24);
  background-color: var(--white);
  border-radius: var(--sys-radius-5);
}

.adf__logoimg {
  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); }

.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; }
}

/* 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 phone's call bar: on a phone, once the visitor first touches or scrolls (section.js), the
   number and Book online stay at the foot of the screen, so a call is one tap from anywhere.
   Hidden from 767 up (the header has both), and without script (the header still has the number). */
.adcb { display: none; }

@media (max-width: 766px) {
  .adcb--on {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background-color: var(--dark);
    border-top: var(--sys-border-2) var(--primary);
    box-shadow: var(--sys-shadow-1) var(--sys-c-2);
  }
  .adcb__in {
    display: flex;
    align-items: center;
    gap: var(--sys-space-13);
    padding: var(--sys-space-10) 0;
  }
  .adcb__call {
    flex: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sys-space-8);
    min-height: var(--sys-space-34);
    color: var(--white);
    border: var(--sys-border-3) var(--secondary);
    border-radius: var(--sys-radius-5);
  }
  .adcb__icon {
    width: var(--sys-space-19);
    height: var(--sys-space-19);
    fill: var(--secondary);
  }
  .adcb__num { color: var(--white); }
  .adcb__btn { flex: auto; }
  .adcr { padding-bottom: var(--sys-space-41); }
}

/* the sticky header (George, 2026-10-21: "a sticky header the whole time"): the base's header
   (advancedair.navmenu, not sticky) stays at the top of the screen on every page and width. It
   is set here, in the client's own frame section, so the base and other clients keep theirs.
   brand.css's --ad-head is the header's tallest height (a little spare room on narrower screens), so a jump link and the inner
   pages' rail stop under the header, and --ad-head-room is what an open menu may take. */
.anav {
  position: sticky;
  top: 0;
}

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

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

/* 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(--secondary);
}

.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 licence 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(--ad-face);
  font-style: var(--ad-face-style);
  font-stretch: var(--ad-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(14, 34, 48, .12);
}

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

.adp__tk-k {
  padding-top: 4px;
  font-family: var(--ad-face);
  font-style: var(--ad-face-style);
  font-stretch: var(--ad-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(--primary);
  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(--ad-face);
  font-style: var(--ad-face-style);
  font-stretch: var(--ad-label);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white);
  background-color: rgba(14, 34, 48, .82);
  padding: 7px 12px;
}

/* the licence 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(--ad-badge-red);
  border-radius: 999px;
  box-shadow: inset 0 0 0 3px var(--white), inset 0 0 0 5px var(--ad-badge-red), 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(--ad-face);
  font-style: var(--ad-face-style);
  font-stretch: var(--ad-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(--ad-badge-red);
}

@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(--ad-face);
  font-style: var(--ad-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(146, 198, 222, .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(14, 34, 48, .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(14, 34, 48, .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(14, 34, 48, .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; }
}

/* 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(14, 34, 48, .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(14, 34, 48, .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(--ad-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(14, 34, 48, .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(146, 198, 222, .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(196, 16, 16, .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(14, 34, 48, .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(14, 34, 48, .1);
}

.adb__tdk { display: none; }

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

/* rule: the home page's filed notice, one column wide */
.adb__rule {
  position: relative;
  margin: 32px 0 0;
  padding: 30px 30px 24px;
  background-color: var(--white);
  border: 1px solid rgba(14, 34, 48, .14);
  border-radius: 50px 0 0 0;
  box-shadow: 0 16px 40px rgba(14, 34, 48, .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(--ad-face);
  font-style: var(--ad-face-style);
  font-stretch: var(--ad-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(196, 16, 16, .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(84, 98, 108);
  border-top: 1px solid rgba(14, 34, 48, .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;
}

@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(14, 34, 48, .14);
    border-radius: 0 0 24px 0;
    box-shadow: 0 10px 24px rgba(14, 34, 48, .08);
    overflow: hidden;
  }
  .adb__td {
    display: block;
    padding: 4px 16px 12px;
    border-top: 0;
  }
  .adb__tdk {
    display: block;
    padding-top: 8px;
    font-family: var(--ad-face);
    font-style: var(--ad-face-style);
    font-stretch: var(--ad-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__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__h2,
  .adb__cta,
  .adb__call { text-align: center; }
  .adb__links { justify-content: center; }
}

/* brand.css */
/* AD Mechanical brand layer on advancedair's system. The client's band colours are in client.json,
   sampled from the logo (concept/palette.json); the drawn brand moves (the AD badge's double red
   rim and stadium shape, the logo's blue and red chevrons) are carried by the components. The
   faces: headings and labels take the logo's own kind of letter (MECHANICAL is a heavy, wide,
   slanted grotesque), body text and link lists stay the base's Instrument Sans. Sizes, weights,
   line heights and tracking stay the system's. */
:root {
  --ad-badge-red: #C80000; /* brand: the AD badge's own red, unmodified, for the small marks that copy the badge (the licence nameplate); bands use the darker primary */
  --ad-face: "Anybody", "Instrument Sans", sans-serif; /* brand: the logo's lettering is a heavy wide italic grotesque; Anybody (OFL, in the open pool) has the true italic and the width axis to match it */
  --ad-face-style: italic; /* brand: the logo's words and chevrons all lean forward */
  --ad-wide: 125%; /* brand: headings set wide like MECHANICAL in the logo */
  --ad-label: 90%; /* brand: caps labels, buttons and city names a touch narrow, so short boxes still hold their words */
  --ad-head: 129px; /* brand: the sticky header's tallest measured height (128px above 1199; 124px to 1199, 111px to 766; George 2026-10-21, sticky header), so jump links and the rail stop under it at every width */
  --ad-head-room: calc(100vh - 129px); /* brand: the screen left under the sticky header, the most an open menu may take before it scrolls */
}

/* one variable file: every width and weight of the italic, latin only */
@font-face {
  font-family: "Anybody";
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-display: swap;
  src: url(public/fonts/anybody-v13-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(--ad-face);
  font-style: var(--ad-face-style);
  font-stretch: var(--ad-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(--ad-face);
  font-style: var(--ad-face-style);
  font-stretch: var(--ad-label);
}