/* 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 with Air Champs' two lines (white logo bar: shield, round phone badge,
   both area numbers under their CAPS labels split by a gold rule, the square gold quote button), then the
   full-width blue nav bar. Redesign 4: two dropdowns. Services opens a white panel the width of the bar with
   a gold board stroke on its top edge: four columns (Heating, Cooling, Air and ducts, More), each headed by a
   job photo (More by the logo's star in a gold disc), a CAPS group name and its links, each with a gold
   star. Areas opens a navy panel: the two areas side by side, each name in gold CAPS, its number big in
   white and its counties under it, split by a gold rule. A nav label carries a gold underline while hovered,
   focused or open. The header is the base's frame, so every value here is a token (the style lint). The
   phone sheet opens with both area calls as two gold-labelled navy buttons, then the same groups as
   accordions. Not sticky, as Advanced Air's. */
.ach .ach__loc { color: var(--dark-soft); }
.anav.ach { z-index: 30; }
.ach .anav__bar, .ach .anav__inner { box-shadow: none; }
.ach .ach__btn { color: var(--dark); }
.ach .ach__icon svg { fill: var(--dark); }
.ach__nums { align-items: center; }
.ach .hd__phone { white-space: nowrap; }
.ach__num + .ach__num {
  padding-left: var(--sys-space-19);
  border-left: var(--sys-border-1) var(--primary);
}
.ach .anav__mbtn { background: var(--primary); }
.ach .anav__mbtn:hover,
.ach .anav__mbtn:focus-visible { background: var(--primary-dark); }

/* the bar's labels: a gold underline while hovered, focused or open */
.ach .ach__navlabel {
  padding: var(--sys-space-4) 0;
  border-bottom: var(--sys-border-3) transparent;
}
.ach .anav__link:hover .ach__navlabel,
.ach .anav__link:focus-visible .ach__navlabel,
.ach .anav__link[aria-expanded="true"] .ach__navlabel { border-bottom-color: var(--primary); }
.ach .anav__link[aria-expanded="true"] .ach__caret,
.ach .anav__dgroup[aria-expanded="true"] .anav__caret { scale: 1 -1; }
.ach .anav__link:focus-visible {
  outline: var(--sys-border-3) var(--primary);
  outline-offset: calc(-1 * var(--sys-space-4));
}

/* the panels hang from the whole nav bar, not from their item */
.ach .ach__navin { position: relative; }
.ach .ach__item { position: static; }
.ach__mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 2;
  padding: var(--sys-space-31);
  background: var(--white);
  border-top: var(--sys-border-2) var(--primary);
  box-shadow: var(--sys-shadow-1) var(--sys-c-2);
}
.ach__mega[hidden] { display: none; }
.ach__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sys-space-31);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ach__col { min-width: 0; }
.ach__thumb {
  display: block;
  width: 100%;
  height: var(--sys-space-43);
  object-fit: cover;
  border-bottom: var(--sys-border-2) var(--dark);
}
.ach__thumb--star {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--dark);
  border-bottom-color: var(--primary);
}
.ach__thumb--star svg { width: var(--sys-space-42); height: var(--sys-space-42); }
.ach__disc { fill: var(--primary); }
.ach__star { fill: var(--dark); }
.ach__colhead {
  margin: var(--sys-space-19) 0 var(--sys-space-10);
  color: var(--dark);
}
.ach__links { margin: 0; padding: 0; list-style: none; }
.ach__link {
  display: flex;
  align-items: flex-start;
  gap: var(--sys-space-10);
  padding: var(--sys-space-10) 0;
  border-bottom: var(--sys-border-1) var(--pale);
  color: var(--dark-soft);
}
.ach__bullet {
  flex: 0 0 auto;
  width: var(--sys-space-16);
  height: var(--sys-space-16);
  fill: var(--primary);
}
.ach__linktext { border-bottom: var(--sys-border-3) transparent; }
.ach__link:hover,
.ach__link:focus-visible { color: var(--dark); }
.ach__link:hover .ach__linktext,
.ach__link:focus-visible .ach__linktext { border-bottom-color: var(--primary); }
.ach__link:hover .ach__bullet,
.ach__link:focus-visible .ach__bullet { fill: var(--dark); }
.ach__link:focus-visible,
.ach__all:focus-visible,
.ach__areaname:focus-visible,
.ach__areatel:focus-visible {
  outline: var(--sys-border-3) var(--primary);
  outline-offset: var(--sys-space-2);
}
.ach__all {
  display: inline-block;
  margin-top: var(--sys-space-25);
  padding: var(--sys-space-15) var(--sys-space-19);
  background: var(--dark);
  color: var(--white);
}
.ach__all:hover,
.ach__all:focus-visible { background: var(--dark-soft); }

/* the areas panel: navy, the two areas side by side, split by a gold rule */
.ach__mega--areas { background: var(--dark); }
.ach__areas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ach__area { padding: 0 var(--sys-space-31); }
.ach__area + .ach__area { border-left: var(--sys-border-3) var(--primary); }
.ach__areaname {
  display: inline-flex;
  align-items: center;
  gap: var(--sys-space-10);
  color: var(--primary);
}
.ach__go {
  width: var(--sys-space-16);
  height: var(--sys-space-16);
  fill: var(--primary);
}
.ach__areaname:hover,
.ach__areaname:focus-visible { color: var(--white); }
.ach__areatel {
  display: block;
  margin: var(--sys-space-10) 0;
  color: var(--white);
  white-space: nowrap;
}
.ach__areatel:hover,
.ach__areatel:focus-visible { color: var(--primary); }
.ach__areacounties { margin: 0; color: var(--pale); }
.ach__sr {
  position: absolute;
  width: var(--sys-space-1);
  height: var(--sys-space-1);
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* the open drawer: the burger gives way to a close mark */
.ach .anav__close { display: none; }
.ach .anav__toggle[aria-expanded="true"] .anav__burger { display: none; }
.ach .anav__toggle[aria-expanded="true"] .anav__close { display: block; }
.ach .anav__close {
  width: var(--sys-space-19);
  height: var(--sys-space-19);
  margin: auto;
  fill: var(--white);
}
.ach .anav__dlink:hover,
.ach .anav__dlink:focus-visible { color: var(--primary); }
.ach__dcalls {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sys-space-10);
  padding: var(--sys-space-15);
  background: var(--dark);
  border-bottom: var(--sys-border-2) var(--primary);
}
.ach__dcall {
  display: flex;
  flex-direction: column;
  gap: var(--sys-space-2);
  padding: var(--sys-space-13);
  background: var(--dark-soft);
  color: var(--white);
}
.ach__dcall:hover,
.ach__dcall:focus-visible { background: var(--primary); color: var(--dark); }
.ach__dloc { color: var(--primary); }
.ach__dcall:hover .ach__dloc,
.ach__dcall:focus-visible .ach__dloc { color: var(--dark); }
.ach__dphone { white-space: nowrap; }
.ach__dsub[hidden] { display: none; }
.ach__dsub { padding-bottom: var(--sys-space-10); }
.ach__dhead {
  margin: var(--sys-space-10) 0 0;
  padding: var(--sys-space-4) var(--sys-space-19);
  color: var(--primary);
}
.ach__dlist { margin: 0; padding: 0; list-style: none; }

@media (max-width: 1199px) {
  .ach__mega { padding: var(--sys-space-25); }
  .ach__cols { gap: var(--sys-space-19); }
}
/* a phone: the hero right under the bar carries both numbers as big tap targets, so the bar does not repeat
   them on the first screen (fix round 4); the menu sheet still opens on both calls */
@media (max-width: 765px) {
  .ach .ach__nums { display: none; }
}

/* the areas panel: each area led by its own small county map, cut from the territory band's map
   (tools/make_area_maps.py), the map left and the name, number and counties right */
.ach__area {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--sys-space-25);
}
.ach__map {
  display: block;
  width: var(--sys-space-44);
  height: auto;
  padding-left: var(--sys-space-15);
  border-left: var(--sys-border-2) var(--primary);
}
.ach__areabody { min-width: 0; }
.ach__area:hover .ach__map,
.ach__area:focus-within .ach__map { border-left-color: var(--white); }

/* a phone: the white logo row's right half holds a gold Call button; it opens the menu sheet, whose top is
   the two area calls (Bay Area, Central Coast), so the caller picks the right line */
.ach__call { display: none; }
@media (max-width: 765px) {
  .ach .ach__call {
    display: inline-flex;
    flex: 0 0 auto;
    border: 0;
    cursor: pointer;
    color: var(--dark);
  }
  .ach .ach__call .btn__in { gap: var(--sys-space-10); }
  .ach__callic {
    width: var(--sys-space-19);
    height: var(--sys-space-19);
    fill: var(--dark);
  }
  .ach .ach__call:focus-visible { outline: var(--sys-border-3) var(--dark); }
}


/* client.hero */
/* client.hero - component (hero, brand-led). Advanced Air's navy hero with its one huge corner cut at the
   bottom right (200px; 100px at 1199; 90px on a phone), the words on the left, Air Champs' own work as the
   picture. Redesign 4: a full, layered first screen.
   - Right: the new Trane outdoor unit in Sunnyvale (IMG_1639; George 2026-11-12: no person) fills the band's right 46%, full height,
     the band's cut on its corner, a gold board stroke down its left edge.
   - The stacked pair (AD's move in our material): the same job's two condensers (IMG_1604) as a second,
     smaller photo over the big photo's upper-left edge, in a white frame with a navy keyline, a gold back
     plate offset behind it, and the logo's belt plate hanging off it as its city tag.
   - Left: the CSLB belt plate, the CAPS eyebrow, a 64px three-line headline with "Air Champs" in gold, the
     lead, then Advanced Air's flat action bar (square gold button, "Or call:", both labelled area lines).
   - Behind the words the navy is never flat: soft light rays from the top left and the logo's five stars,
     outlined huge and faint, over a fine grain.
   - On load the headline's lines rise one after another and both photos slide in from the right, the
     pair a beat later. Reduced motion: everything at rest.
   Phone: the technician as a clear strip on top with the pair small over its lower right corner, then the
   plate, the headline, both area lines as big navy call buttons with their towns, the quote button, the
   lead. No drop shadows on the bar (A7). */
.ahr {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  padding: 90px 0 100px;
  background: #011A47;
  border-radius: 0 0 200px 0;
  overflow-x: clip;
  color: #FFFFFF;
}

/* the air behind the words: rays, the five stars, a fine grain */
.ahr__air {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.ahr__air::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("public/media/hero-grain.png");
  opacity: 0.07;
}
.ahr__rays {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: #FFFFFF;
  opacity: 0.045;
}
.ahr__stars {
  position: absolute;
  top: 40px;
  left: max(20px, calc(50% - 760px));
  width: 760px;
  height: 240px;
  fill: none;
  stroke: #FED617;
  stroke-width: 1.5;
  opacity: 0.16;
}

/* the big photo: the band's right 46%, full height, the band's cut on its corner */
.ahr__photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 54%;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  border-radius: 0 0 200px 0;
  background: #011A47;
  border-left: 8px solid #FED617;
}
.ahr__still {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}
/* a soft navy fall-off along the photo's left edge, so the pair reads against it */
.ahr__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(1, 26, 71, 0.55) 0%, rgba(1, 26, 71, 0) 38%);
  pointer-events: none;
}

/* the stacked pair: the same job's condensers over the big photo's upper-left edge */
.ahr__pair {
  position: absolute;
  top: 330px;
  left: calc(54% - 130px);
  z-index: 3;
  width: 300px;
  margin: 0;
}
.ahr__pair::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  translate: -14px 14px;
  background: #FED617;
}
.ahr__pairimg {
  display: block;
  width: 100%;
  height: auto;
  border: 8px solid #FFFFFF;
  outline: 3px solid #011A47;
  outline-offset: -11px;
  background: #FFFFFF;
}
.ahr__tag {
  position: absolute;
  right: -26px;
  bottom: -24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 210px;
  aspect-ratio: 4 / 1;
  padding: 12px 18px 3px;
  background: url("public/brand/belt-plate-rim.svg") center / 100% 100% no-repeat;
}
.ahr__tagtext {
  font-family: "Titillium Web", sans-serif;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FED617;
  white-space: nowrap;
}

/* the words */
.ahr__in { position: relative; z-index: 2; }
.ahr__copy { max-width: 660px; }

/* the CSLB plate: the logo's belt plate (navy, gold rim, five stars in the crown), linked to the state record */
.ahr__plate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 340px;
  aspect-ratio: 4 / 1;
  margin: 0 0 30px;
  padding: 18px 30px 6px;
  background: url("public/brand/belt-plate-rim.svg") center / 100% 100% no-repeat;
  color: #FFFFFF;
  text-align: center;
  transition: translate 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ahr__plate:hover,
.ahr__plate:focus-visible { translate: 0 -3px; }
.ahr__plate:focus-visible { outline: 2px solid #FED617; outline-offset: 4px; }
.ahr__platein { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ahr__platelic {
  font-family: "Titillium Web", sans-serif;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #FED617;
  white-space: nowrap;
}
.ahr__platewho {
  font-family: "Instrument Sans", sans-serif;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 500;
  color: #FFFFFF;
  white-space: nowrap;
}

.ahr__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-family: "Titillium Web", sans-serif;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #FED617;
}
.ahr__eyebrow::before {
  content: none;
  flex: 0 0 auto;
  width: 44px;
  height: 4px;
  background: #FED617;
}
.ahr__h1 {
  margin: 0;
  font-family: var(--mo-face);
  font-size: 62px;
  line-height: 1.04;
  font-weight: 800;
  color: #FFFFFF;
}
.ahr__h1 { white-space: nowrap; }
.ahr__gold {
  position: relative;
  display: inline-block;
  color: #FED617;
}
.ahr__lead {
  margin: 24px 0 40px;
  max-width: 500px;
  font-family: "Instrument Sans", sans-serif;
  font-size: 17.6px;
  line-height: 1.6;
  font-weight: 500;
  color: #DCE3EE;
}

/* Advanced Air's action bar: flat white, the square button, "Or call:", the two labelled lines */
.ahr__bar {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 25px;
  width: max-content;
  max-width: 100%;
  padding: 20px 25px 20px 20px;
  background: #FFFFFF;
  border-bottom: 6px solid #FED617;
  color: #011A47;
}
.ahr__quote {
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 0 25px;
  background: #FED617;
  font-family: "Titillium Web", sans-serif;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #011A47;
  white-space: nowrap;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ahr__quote:hover,
.ahr__quote:focus-visible { background: #F2C40F; }
.ahr__quote:focus-visible { outline: 2px solid #011A47; outline-offset: -5px; }
.ahr__ask {
  grid-column: 2;
  margin: 0 0 4px;
  font-family: "Instrument Sans", sans-serif;
  font-size: 14.4px;
  line-height: 1.3;
  font-weight: 700;
  color: #304453;
}
.ahr__areas {
  grid-column: 2;
  display: flex;
}
.ahr__area {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #011A47;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ahr__area + .ahr__area {
  margin-left: 20px;
  padding-left: 20px;
  border-left: 1px solid #D5D7DB;
}
.ahr__area:hover,
.ahr__area:focus-visible { color: #013A97; }
.ahr__area:focus-visible { outline: 2px solid #011A47; outline-offset: 3px; }
.ahr__loc {
  font-family: "Titillium Web", sans-serif;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #013A97;
  white-space: nowrap;
}
.ahr__phone {
  font-family: "Instrument Sans", sans-serif;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
}
.ahr__towns {
  font-family: "Instrument Sans", sans-serif;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 400;
  color: #4A5B68;
}

/* on load: the words rise line by line, the photos slide in from the right */
@keyframes ahr-rise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
@keyframes ahr-slide {
  from { opacity: 0; transform: translateX(60px); }
  to { opacity: 1; transform: none; }
}
.ahr__plate,
.ahr__eyebrow,
.ahr__h1,
.ahr__lead,
.ahr__bar { animation: ahr-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.ahr__eyebrow { animation-delay: 0.05s; }
.ahr__h1 { animation-delay: 0.14s; }
.ahr__lead { animation-delay: 0.4s; }
.ahr__bar { animation-delay: 0.48s; }
.ahr__photo,
.ahr__pair { animation: ahr-slide 1s cubic-bezier(0.16, 1, 0.3, 1) both; }
.ahr__pair { animation-delay: 0.35s; }

@media (max-width: 1199px) {
  .ahr { border-radius: 0 0 100px 0; }
  .ahr__photo { left: 56%; border-radius: 0 0 100px 0; }
  .ahr__pair { top: 300px; left: calc(56% - 100px); width: 230px; }
  .ahr__tag { width: 180px; }
  .ahr__copy { max-width: 470px; }
  .ahr__h1 { font-size: 52px; }
  .ahr__h1 { white-space: normal; }
  .ahr__lead { max-width: 420px; }
  .ahr__eyebrow { font-size: 18px; }
  .ahr__stars { width: 560px; height: 177px; }
  .ahr__bar { max-width: calc(56% - 60px); grid-template-columns: 1fr; row-gap: 15px; }
  .ahr__quote { grid-row: auto; grid-column: 1 / -1; justify-content: center; padding: 15px 20px; }
  .ahr__ask { grid-column: 1 / -1; margin: 0; }
  .ahr__areas { grid-column: 1 / -1; }
}

/* a tablet and a phone: the technician as a clear photo strip above the words, the pair over its corner */
@media (max-width: 978px) {
  .ahr { padding: 0 0 75px; }
  .ahr__photo {
    position: relative;
    inset: auto;
    height: 380px;
    margin-bottom: 40px;
    border-radius: 0;
    border-left: 0;
    border-bottom: 6px solid #FED617;
  }
  .ahr__photo::after { display: none; }
  .ahr__still { object-position: 50% 62%; }
  .ahr__pair { top: 250px; left: auto; right: 30px; width: 220px; }
  .ahr__tag { display: none; }
  .ahr__copy { max-width: 660px; }
  .ahr__bar { width: auto; max-width: 640px; }
  .ahr__stars { top: 420px; left: 50%; translate: -50% 0; }  /* centered over the centered words (George 2026-11-12) */
}
/* a phone: the technician 280px tall with his head in frame, then both area calls on the first screen
   (390 x 844); the header bar drops its numbers there, so they show once */
@media (max-width: 766px) {
  .ahr { padding-bottom: 60px; border-radius: 0 0 90px 0; }
  .ahr__photo { height: 280px; margin-bottom: 22px; border-bottom-width: 5px; }
  .ahr__still { object-position: 50% 66%; }
  .ahr__pair { top: 176px; right: 14px; width: 132px; }
  .ahr__pair::before { translate: -8px 8px; }
  .ahr__pairimg { border-width: 4px; outline-width: 2px; outline-offset: -6px; }
  .ahr__tag { display: none; }
  .ahr__stars { top: 310px; left: 50%; translate: -50% 0; width: 370px; height: 117px; }
  .ahr__in { display: flex; flex-direction: column; }
  .ahr__copy { display: contents; }
  .ahr__plate { width: 256px; margin-bottom: 14px; padding: 15px 22px 4px; }
  .ahr__platein { gap: 3px; }
  .ahr__platelic { font-size: 15px; letter-spacing: 2px; }
  .ahr__platewho { font-size: 12px; }
  .ahr__eyebrow { margin-bottom: 8px; font-size: 15.4px; letter-spacing: 2px; }
  .ahr__eyebrow::before { width: 28px; height: 3px; }
  .ahr__h1 { font-size: 44px; }
  .ahr__bar {
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: auto;
    max-width: none;
    margin: 20px 0 0;
    padding: 12px;
  }
  .ahr__ask { display: none; }
  .ahr__areas { order: -1; gap: 8px; }
  .ahr__area {
    flex: 1 1 0%;
    min-width: 0;
    gap: 2px;
    padding: 12px;
    background: #011A47;
    color: #FFFFFF;
  }
  .ahr__area + .ahr__area { margin-left: 0; padding-left: 12px; border-left: 0; }
  .ahr__area:hover,
  .ahr__area:focus-visible { background: #013A97; color: #FFFFFF; }
  .ahr__area:focus-visible { outline: 2px solid #FED617; outline-offset: -4px; }
  .ahr__loc { font-size: 12px; letter-spacing: 1.5px; color: #FED617; }
  .ahr__phone { font-size: 18px; }
  .ahr__towns { font-size: 12.5px; color: #DCE3EE; }
  .ahr__quote { justify-content: center; padding: 14px 20px; }
  .ahr__lead { order: 2; margin: 25px 0 0; font-size: 16px; }
}
@media (max-width: 479px) {
  .ahr__h1 { font-size: 40px; }
  .ahr__lead { font-size: 15px; line-height: 1.5; }
  .ahr__bar { margin: 18px -8px 0; padding: 10px; }
  .ahr__area { padding: 11px 10px; }
  .ahr__phone { font-size: 17px; }
}
@media (max-width: 359px) {
  .ahr__areas { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .ahr__plate,
  .ahr__eyebrow,
  .ahr__h1,
  .ahr__lead,
  .ahr__bar,
  .ahr__photo,
  .ahr__pair { animation: none; }
  .ahr__plate,
  .ahr__quote,
  .ahr__area { transition: none; }
  .ahr__plate:hover,
  .ahr__plate:focus-visible { translate: none; }
}

/* George 2026-11-12: on a phone the section heads (eyebrow, heading, lead) sit centered, not pushed left */
@media (max-width: 766px) {
  .ahr__copy { text-align: center; margin-left: auto; margin-right: auto; }
  .ahr__eyebrow { justify-content: center; }
  .ahr__plate { margin-left: auto; margin-right: auto; }
}

/* client.corners */
/* client.corners - component (trust-row, brand-led). Fix round 4: the "pick your line" strip, about 450px at
   1440, on a light ground (it breaks the navy run between the hero and the record). One head row: the H2 with
   its last words on a gold bar (left), the hours both lines keep and the square gold "Ask for a quote" (right).
   Under it the two areas side by side, each a short card in JTC's three layers (a solid gold back plate offset
   outward, the card in its corner colour: Bay Area shield navy, Central Coast royal blue). Each card: a gold
   ring and star, the area in gold CAPS (second look), the number as the band's biggest type (first look, 56px
   white) and one line of main towns that links to the area page (last look, soft and small). The Bay Area card
   carries its Stanford job as a faint navy duotone; the Central Coast its belt plate and stars in fine lines
   (no job there yet, none invented). The round gold "or" seal overlaps both inner edges. No county lists here:
   the territory map band owns them. A huge faint belt-plate outline sits behind, so the light ground is never
   empty. Hover (and focus inside): the card lifts 6px, its plate slides out, the photo zooms 4%. In view the
   cards come in from their sides and the seal lands (one script adds the class; reduced motion: at rest). */
.acr {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: 56px 0 64px;
  background: #FFFFFF;
}
.acr__bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1700px;
  height: 425px;
  translate: -50% -46%;
  fill: none;
  stroke: #013A97;
  stroke-width: 0.5;
  opacity: 0.12;
  pointer-events: none;
}
.acr__in { position: relative; }

/* the head row: the H2 left, the hours and the quote button right */
.acr__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
  margin: 0 18px 30px;
}
.acr__h2 {
  margin: 0;
  font-family: var(--mo-face);
  font-size: 44px;
  line-height: 1.1;
  font-weight: 800;
  color: #011A47;
}
.acr__mark {
  padding: 0 8px;
  background: transparent;
  box-shadow: inset 0 -0.42em 0 #FED617;
  color: #011A47;
}
.acr__bar {
  display: flex;
  align-items: stretch;
  background: #FFFFFF;
  border: 2px solid #011A47;
  border-left: 8px solid #FED617;
}
.acr__hours {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 10px 22px;
}
.acr__hourslabel {
  font-family: "Titillium Web", sans-serif;
  font-size: 12.6px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #013A97;
}
.acr__hourstext {
  font-family: "Instrument Sans", sans-serif;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  color: #011A47;
}
.acr__quote {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 28px;
  background: #FED617;
  font-family: "Titillium Web", sans-serif;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #011A47;
  white-space: nowrap;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.acr__arrow {
  width: 12px;
  height: 18px;
  fill: #011A47;
  transition: translate 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.acr__quote:hover,
.acr__quote:focus-visible { background: #F2C40F; }
.acr__quote:hover .acr__arrow,
.acr__quote:focus-visible .acr__arrow { translate: 5px 0; }
.acr__quote:focus-visible { outline: 3px solid #011A47; outline-offset: -6px; }

/* the two cards and the seal between them */
.acr__ring {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin: 0 34px 16px;
}
.acr__card {
  position: relative;
  isolation: isolate;
  display: flex;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* the back plate: solid gold, offset outward */
.acr__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #FED617;
  translate: -16px 16px;
  transition: translate 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.acr__card--2::before { translate: 16px 16px; }
.acr__face {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  min-height: 236px;
  padding: 28px 72px 26px 40px;
  overflow: hidden;
  background: #011A47;
  box-shadow: inset 0 -8px 0 #FED617;
}
.acr__card--2 .acr__face {
  padding: 28px 40px 26px 72px;
  align-items: flex-end;
  text-align: right;
  background: #013A97;
}
.acr__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  filter: grayscale(1) contrast(1.15);
  mix-blend-mode: luminosity;
  opacity: 0.34;
  transition: scale 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.acr__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 1;
  opacity: 0.16;
}
.acr__fieldstar { fill: #FED617; stroke: none; opacity: 0.7; }
.acr__icon {
  position: absolute;
  top: 26px;
  left: 40px;
  z-index: 1;
  width: 52px;
  height: 52px;
}
.acr__card--2 .acr__icon { left: auto; right: 40px; }
.acr__icon svg { display: block; width: 100%; height: 100%; }
.acr__iconring { fill: rgba(1, 26, 71, 0.55); stroke: #FED617; stroke-width: 5; }
.acr__iconstar { fill: #FED617; }
.acr__name {
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  font-family: "Titillium Web", sans-serif;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #FED617;
}
.acr__tel {
  position: relative;
  z-index: 1;
  display: block;
  font-family: var(--mo-face);
  font-size: 56px;
  line-height: 1;
  font-weight: 800;
  color: #FFFFFF;
  white-space: nowrap;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.acr__tel:hover,
.acr__tel:focus-visible { color: #FED617; }
.acr__tel:focus-visible { outline: 3px solid #FED617; outline-offset: 6px; }
.acr__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* the one line of main towns: the last look */
.acr__towns {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  font-family: "Instrument Sans", sans-serif;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 400;
  color: #DCE3EE;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.acr__go {
  flex: none;
  width: 9px;
  height: 14px;
  fill: #FED617;
  transition: translate 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
a.acr__towns:hover,
a.acr__towns:focus-visible { color: #FFFFFF; }
a.acr__towns:hover .acr__go,
a.acr__towns:focus-visible .acr__go { translate: 4px 0; }
a.acr__towns:focus-visible { outline: 2px solid #FED617; outline-offset: 4px; }

/* hover, and focus inside a card: it lifts, its plate slides out, its photo zooms */
.acr__card:hover,
.acr__card:focus-visible,
.acr__card:has(:focus-visible) { transform: translateY(-6px); }
.acr__card--1:hover::before,
.acr__card--1:focus-visible::before,
.acr__card--1:has(:focus-visible)::before { translate: -24px 24px; }
.acr__card--2:hover::before,
.acr__card--2:focus-visible::before,
.acr__card--2:has(:focus-visible)::before { translate: 24px 24px; }
.acr__card:hover .acr__photo,
.acr__card:focus-visible .acr__photo,
.acr__card:has(:focus-visible) .acr__photo { scale: 1.04; }

/* the "or": a gold disc in a pale ring and a white rim, over both cards' inner edges */
.acr__or {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  margin: -56px 0 0 -56px;
  isolation: isolate;
  border-radius: 50%;
}
.acr__seal { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.acr__rim { fill: #FFFFFF; }
.acr__sealring { fill: #C50103; }
.acr__disc { fill: #FED617; }
.acr__ortext {
  margin-top: -6px;
  font-family: var(--mo-face);
  font-size: 36px;
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
  color: #011A47;
}

/* in view: the cards come in from their sides, the seal lands */
.acr.is-armed .acr__card,
.acr.is-armed .acr__or { transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), translate 0.7s cubic-bezier(0.16, 1, 0.3, 1), scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), rotate 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.acr.is-armed:not(.is-in) .acr__card--1 { opacity: 0; translate: -70px 0; }
.acr.is-armed:not(.is-in) .acr__card--2 { opacity: 0; translate: 70px 0; }
.acr.is-armed:not(.is-in) .acr__or { scale: 0; rotate: -25deg; }
.acr.is-armed .acr__or { transition-delay: 0.35s; }

@media (max-width: 1199px) {
  .acr__h2 { font-size: 38px; }
  .acr__tel { font-size: 48px; }
  .acr__face { padding-left: 30px; }
  .acr__card--2 .acr__face { padding-right: 30px; }
  .acr__icon { left: 30px; }
  .acr__card--2 .acr__icon { right: 30px; }
  .acr__or { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
  .acr__ortext { font-size: 30px; }
}
@media (max-width: 978px) {
  .acr__ring { grid-template-columns: 1fr; gap: 0; max-width: 560px; margin: 0 auto 16px; }
  .acr__face,
  .acr__card--2 .acr__face { padding: 26px 30px 28px; }
  .acr__card--2 .acr__face { align-items: flex-start; text-align: left; }
  .acr__card--2 .acr__icon { right: auto; left: 30px; }
  .acr__or {
    position: relative;
    top: auto;
    left: auto;
    width: 84px;
    height: 84px;
    margin: -16px auto;
  }
  .acr__ortext { margin-top: -4px; font-size: 28px; }
  .acr__tel { font-size: 44px; }
  .acr__name { font-size: 19px; letter-spacing: 3px; }
  .acr__icon { width: 44px; height: 44px; top: 20px; }
  .acr__face { min-height: 210px; }
}
@media (max-width: 766px) {
  .acr { padding: 44px 0 50px; }
  .acr__bg { width: 1100px; height: 275px; }
  .acr__in { display: flex; flex-direction: column; }
  .acr__head { display: contents; }
  .acr__h2 { margin-bottom: 24px; font-size: 32px; }
  .acr__bar { order: 2; flex-direction: column; margin: 34px 0 0; border-left-width: 2px; border-top: 8px solid #FED617; }
  .acr__hours { padding: 14px 18px; }
  .acr__hourstext { font-size: 16px; }
  .acr__quote { justify-content: center; padding: 15px 18px; }
  .acr__ring { grid-template-columns: 1fr; gap: 0; margin: 0 10px 10px; }
  .acr__card::before,
  .acr__card--2::before { translate: 10px 10px; }
  .acr__card--1:hover::before,
  .acr__card--1:focus-visible::before,
  .acr__card--1:has(:focus-visible)::before,
  .acr__card--2:hover::before,
  .acr__card--2:focus-visible::before,
  .acr__card--2:has(:focus-visible)::before { translate: 14px 14px; }
  .acr__card--2 .acr__face { align-items: flex-start; text-align: left; }
  .acr__icon { display: none; }
  .acr__face,
  .acr__card--2 .acr__face { min-height: 0; padding: 24px 22px 26px; }
  .acr__name { margin-bottom: 8px; }
  .acr__tel { font-size: 40px; }
  .acr__towns { margin-top: 10px; font-size: 15px; }
  .acr__or {
    position: relative;
    top: auto;
    left: auto;
    width: 72px;
    height: 72px;
    margin: -14px auto;
  }
  .acr__ortext { margin-top: -4px; font-size: 24px; }
}
@media (max-width: 479px) {
  .acr__h2 { font-size: 30px; }
  .acr__tel { font-size: 36px; }
  .acr__hourslabel { font-size: 11.5px; letter-spacing: 1.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .acr__card,
  .acr__card::before,
  .acr__photo,
  .acr__tel,
  .acr__towns,
  .acr__go,
  .acr__quote,
  .acr__arrow,
  .acr.is-armed .acr__card,
  .acr.is-armed .acr__or { transition: none; }
  .acr__card:hover,
  .acr__card:focus-visible,
  .acr__card:has(:focus-visible) { transform: none; }
  .acr__card--1:hover::before,
  .acr__card--1:focus-visible::before,
  .acr__card--1:has(:focus-visible)::before { translate: -16px 16px; }
  .acr__card--2:hover::before,
  .acr__card--2:focus-visible::before,
  .acr__card--2:has(:focus-visible)::before { translate: 16px 16px; }
  .acr__card:hover .acr__photo,
  .acr__card:focus-visible .acr__photo,
  .acr__card:has(:focus-visible) .acr__photo { scale: none; }
  .acr__quote:hover .acr__arrow,
  .acr__quote:focus-visible .acr__arrow,
  a.acr__towns:hover .acr__go,
  a.acr__towns:focus-visible .acr__go { translate: none; }
  .acr.is-armed:not(.is-in) .acr__card--1,
  .acr.is-armed:not(.is-in) .acr__card--2 { opacity: 1; translate: none; }
  .acr.is-armed:not(.is-in) .acr__or { scale: none; rotate: none; }
}

/* George 2026-11-12: on a phone the section heads (eyebrow, heading, lead) sit centered, not pushed left */
@media (max-width: 766px) {
  .acr__head { text-align: center; }
  .acr__head > * { margin-left: auto; margin-right: auto; }
}

/* George 2026-11-12: less white under the hours card on a phone, before the jobs band */
@media (max-width: 766px) {
  .acr { padding-bottom: 28px; }
}

/* client.job-record */
/* client.job-record - redesign 4, round 5: the record as a photo wall (AD Mechanical's "no stock photos" idea in
   Air Champs' own form) on a navy band with Advanced Air's corner pair (150px top-left and bottom-right). The band's
   mean reads dark in the kit's rhythm, so it must sit between coloured or light bands. The head runs across the
   top (outlined star, eyebrow and a 96px H2 with its last word in gold on the left; the line about our own photos
   and the button on the right), and under it a full-width wall of eight real job photos in four columns. Every
   column holds one tall and one wide photo (tall first, then wide first, alternating), so all four start at the
   same top and end level on whole tiles, clear of the band's corner. The columns drift a little at their own
   speeds while the band comes into view and are level at rest (CSS scroll timeline, transform only, off under
   reduced motion and below 979px). Below 979px the eight sit in two even columns of four. Each photo has a white
   frame with one rounded corner and one label: the logo's belt plate with its city over the frame's foot (what
   it shows is read to screen readers). Hover and keyboard focus lift the photo and turn the plate gold. */
.arc {
  --arc-navy: #011A47;    /* the shield navy, deepened */
  --arc-royal: #1D4E9E;   /* the shield's royal blue */
  --arc-gold: #F2C40F;    /* the star gold, band shade */
  --arc-rim: #FED617;     /* the rim and star highlight */
  --arc-ink: #3A4860;     /* caption ink */
  --arc-soft: #C8D4EA;    /* body text on navy */
  --arc-white: #FFFFFF;
  --arc-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --arc-gap: 26px;
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  padding: 100px 0 120px;
  border-radius: 150px 0 150px 0;
  background-color: var(--arc-navy);
  overflow: clip;
}
.arc__in {
  position: relative;
  width: 88%;
  max-width: 1200px;
  margin: 0 auto;
}
/* the head across the top: the title left, the line and the button right, both resting on one baseline */
.arc__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  align-items: end;
  gap: 30px 60px;
  margin-bottom: 64px;
  color: var(--arc-white);
}
.arc__intro { padding-bottom: 6px; }
.arc__star {
  display: block;
  width: 120px;
  height: 120px;
  margin: -20px 0 0 -26px;
  fill: none;
  stroke: var(--arc-rim);
  stroke-width: 1.4;
  opacity: 0.9;
}
.arc__eyebrow {
  margin: 0 0 24px;
  font-family: "Titillium Web", sans-serif;
  font-size: 17.6px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--arc-rim);
}
.arc__h2 {
  margin: 0;
  font-family: var(--mo-face);
  font-size: 96px;
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--arc-white);
}
.arc__gold { color: var(--arc-rim); }
.arc__lead {
  margin: 0;
  padding-left: 18px;
  border-left: 5px solid var(--arc-gold);
  font-family: "Instrument Sans", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--arc-soft);
}
.arc__all {
  display: inline-block;
  margin: 24px 0 0 23px;
  padding: 15px 22px;
  background-color: var(--arc-gold);
  font-family: "Titillium Web", sans-serif;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--arc-navy);
  text-decoration: none;
  transition: background-color 0.3s var(--arc-ease);
}
.arc__all:hover, .arc__all:focus-visible { background-color: var(--arc-white); }
.arc__all:focus-visible { outline: 3px solid var(--arc-rim); outline-offset: 3px; }

/* the wall: four columns, one tall and one wide photo each, level at the top and at the foot */
.arc__wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--arc-gap);
  align-items: start;
  padding-bottom: 24px;
}
.arc__col {
  display: flex;
  flex-direction: column;
  gap: 44px;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}
.arc__tile { display: flex; }
.arc__link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  color: inherit;
  text-decoration: none;
  transition: transform 0.35s var(--arc-ease);
}
.arc__fig { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; margin: 0; }
.arc__frame {
  display: block;
  flex: 1 1 auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 4px solid var(--arc-white);
  border-radius: 0 0 44px 0;
  background-color: var(--arc-navy);
  box-shadow: 0 0 0 2px var(--arc-navy);
}
.arc__tile--tall .arc__frame { aspect-ratio: 3 / 4; }
.arc__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--arc-ease);
}
/* the logo's belt plate, navy with a gold rim (two masked boxes), the city in the caps face */
.arc__plate {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  width: 196px;
  height: 48px;
  translate: -50% 50%;
  padding: 2px;
  background-color: var(--arc-rim);
  -webkit-mask: url("public/brand/belt-plate.svg") 0 0 / 100% 100% no-repeat;
  mask: url("public/brand/belt-plate.svg") 0 0 / 100% 100% no-repeat;
}
.arc__city {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 8px 14px 0;
  background-color: var(--arc-navy);
  -webkit-mask: url("public/brand/belt-plate.svg") 0 0 / 100% 100% no-repeat;
  mask: url("public/brand/belt-plate.svg") 0 0 / 100% 100% no-repeat;
  font-family: "Titillium Web", sans-serif;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--arc-rim);
  white-space: nowrap;
  transition: background-color 0.3s var(--arc-ease), color 0.3s var(--arc-ease);
}
.arc__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.arc__tile:hover .arc__link,
.arc__tile:focus-within .arc__link { transform: translateY(-8px); }
.arc__tile:hover .arc__img,
.arc__tile:focus-within .arc__img { transform: scale(1.06); }
.arc__tile:hover .arc__city,
.arc__tile:focus-within .arc__city { background-color: var(--arc-gold); color: var(--arc-navy); }
.arc__link:focus-visible { outline: 3px solid var(--arc-royal); outline-offset: 4px; }

/* the drift: each column comes up at its own speed while the band enters the screen and is level by the time the
   band's top half is in view (scroll-driven, CSS only; browsers without scroll timelines show the wall still).
   The band's 120px foot is more than the largest drift, so no tile ever reaches the corner. */
@keyframes arc-drift {
  from { transform: translate3d(0, var(--arc-drift), 0); }
  to { transform: none; }
}
@supports (animation-timeline: view()) {
  @media (min-width: 979px) and (prefers-reduced-motion: no-preference) {
    .arc__col {
      animation: arc-drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 45%;
    }
    .arc__col--1 { --arc-drift: 24px; }
    .arc__col--2 { --arc-drift: 60px; }
    .arc__col--3 { --arc-drift: 36px; }
    .arc__col--4 { --arc-drift: 72px; }
  }
}

@media (max-width: 1199px) {
  .arc { --arc-gap: 20px; }
  .arc__h2 { font-size: 80px; }
  .arc__plate { width: 170px; height: 42px; }
  .arc__city { font-size: 12.5px; letter-spacing: 2px; }
}
/* below 979px: the head stacks and the eight photos sit in two even columns of four, all one shape */
@media (max-width: 978px) {
  .arc { padding-bottom: 100px; border-radius: 100px 0 100px 0; }
  .arc__head { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-bottom: 50px; }
  .arc__h2 { font-size: 64px; }
  .arc__lead { max-width: 560px; }
  .arc__wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 20px; }
  .arc__col { display: contents; will-change: auto; }
  .arc__frame,
  .arc__tile--tall .arc__frame { aspect-ratio: 4 / 3; }
}
@media (max-width: 766px) {
  .arc { padding: 75px 0 80px; border-radius: 50px 0 50px 0; }
  .arc__star { width: 84px; height: 84px; margin: -10px 0 8px -16px; }
  .arc__eyebrow { font-size: 15.4px; }
  .arc__h2 { font-size: 52px; }
  .arc__lead { font-size: 16px; }
  .arc__wall { gap: 40px 14px; padding-bottom: 20px; }
  .arc__frame,
  .arc__tile--tall .arc__frame { aspect-ratio: 4 / 5; border-width: 3px; border-radius: 0 0 28px 0; }
  .arc__plate { width: 156px; height: 38px; }
  .arc__city { font-size: 10.5px; letter-spacing: 1px; padding: 6px 12px 0; }
}
@media (max-width: 479px) {
  .arc__h2 { font-size: 44px; }
  .arc__plate { width: 150px; height: 36px; }
  .arc__city { font-size: 10px; letter-spacing: 0.8px; }
}
@media (prefers-reduced-motion: reduce) {
  .arc__link, .arc__img, .arc__city, .arc__all { transition: none; }
  .arc__col { will-change: auto; transform: none; animation: none; }
  .arc__tile:hover .arc__link, .arc__tile:focus-within .arc__link,
  .arc__tile:hover .arc__img, .arc__tile:focus-within .arc__img { transform: none; }
}

/* inner pages (stage 3e): a page's own few jobs as one row of big framed photos, each captioned under its plate
   (the city in gold caps, what the job shows in white), the middle photo set lower like the raised middle card;
   the band's corners and head as on the homepage */
.arc__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  align-items: start;
  margin: 0;
  padding: 0 0 10px;
  list-style: none;
}
.arc__shot { position: relative; display: block; }
.arc--few .arc__h2 { font-size: 76px; }
.arc--few .arc__head { margin-bottom: 56px; }
.arc__row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.arc__row--3 .arc__tile:nth-child(2),
.arc__row--4 .arc__tile:nth-child(even) { margin-top: 48px; }
.arc__tile--cap .arc__frame { aspect-ratio: 4 / 5; }
.arc__row--3 .arc__tile--cap .arc__frame { aspect-ratio: 1 / 1; }
.arc__cap {
  margin: 40px 0 0;
  padding: 0 4px 0 14px;
  border-left: 4px solid var(--arc-gold);
  font-family: "Instrument Sans", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--arc-soft);
}
.arc__capcity {
  font-family: "Titillium Web", sans-serif;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--arc-rim);
}
@media (max-width: 978px) {
  .arc__row,
  .arc__row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
  .arc__row--3 .arc__tile:nth-child(2),
  .arc__row--4 .arc__tile:nth-child(even) { margin-top: 0; }
  .arc__row--3 .arc__tile:nth-child(3) { grid-column: 1 / -1; }
  .arc__row--3 .arc__tile:nth-child(3) .arc__frame { aspect-ratio: 16 / 10; }
}
@media (max-width: 766px) {
  .arc--few .arc__h2 { font-size: 46px; }
  .arc__row,
  .arc__row--4 { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .arc__row--3 .arc__tile:nth-child(3) .arc__frame,
  .arc__tile--cap .arc__frame { aspect-ratio: 4 / 3; }
  .arc__cap { margin-top: 34px; font-size: 14.5px; }
}

/* the projects wall (stage 3e jobs): every job on a pale stage, filterable. The head as above in navy with the
   gold word on a gold block, and on its right the live count as a huge outlined numeral. Under it a navy filter
   bar: each group's name in small gold caps, its chips in heavy white caps with a count, the pressed one gold.
   Then the jobs in four masonry columns (three, then two on phones), each photo framed and plated as on the
   homepage, its caption under it (the city in heavy navy caps, what it shows in soft ink, on a gold stroke) and
   its services as small royal tags. Big faint stars fill the stage behind. */
.arc--wall {
  --arc-pale: #EAF0F8;
  --arc-line: #D3DDEB;
  padding: 100px 0 110px;
  border-radius: 0 150px 0 150px;
  background-color: var(--arc-pale);
}
.arc__bg { position: absolute; z-index: 0; fill: #DCE3EE; pointer-events: none; }
.arc__bg--a { top: -60px; right: -80px; width: 520px; height: 520px; transform: rotate(14deg); }
.arc__bg--b { top: 44%; left: -140px; width: 420px; height: 420px; transform: rotate(-12deg); }
.arc__bg--c { bottom: -90px; right: 12%; width: 300px; height: 300px; transform: rotate(6deg); }
.arc--wall .arc__in { z-index: 1; }
.arc--wall .arc__head { color: var(--arc-navy); margin-bottom: 44px; }
.arc--wall .arc__star { stroke: var(--arc-royal); opacity: 0.55; }
.arc--wall .arc__eyebrow { color: var(--arc-royal); }
.arc--wall .arc__h2 { color: var(--arc-navy); font-size: 88px; }
.arc--wall .arc__gold {
  padding: 0 14px 4px;
  background-color: var(--arc-gold);
  color: var(--arc-navy);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.arc--wall .arc__intro { display: none; }
.arc--wall .arc__head { grid-template-columns: minmax(0, 1fr); padding-right: 300px; }
.arc__count {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin: 0;
  padding: 0 0 6px 22px;
  border-left: 5px solid var(--arc-gold);
  font-family: var(--mo-face);
  color: var(--arc-navy);
}
.arc__num {
  min-width: 1.15em;
  font-size: 150px;
  line-height: 0.78;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 3px var(--arc-navy);
}
/* the count counts the cards in view (a CSS counter, so filtering moves it with no script text); it sits after
   the wall in the page and is set into the head's right corner */
.arc--wall .arc__in { counter-reset: arcn; }
.arc__card:not([hidden]) { counter-increment: arcn; }
.arc__num::before { content: counter(arcn); }
.arc--wall .arc__count { position: absolute; top: 40px; right: 0; }
.arc__numk {
  padding-bottom: 4px;
  font-family: "Titillium Web", sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--arc-navy);
}

/* the filter bar: a navy plate with a gold rim along its top and a gold offset plate behind */
.arc__filters {
  position: relative;
  display: grid;
  gap: 18px;
  margin: 0 0 64px;
  padding: 26px 30px 28px;
  border-top: 5px solid var(--arc-gold);
  border-radius: 0 0 44px 0;
  background-color: var(--arc-navy);
  box-shadow: 12px 12px 0 var(--arc-gold);
}
.arc__filters[hidden] { display: none; }
.arc__group { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; align-items: start; }
.arc__gname {
  margin: 0;
  padding-top: 11px;
  font-family: "Titillium Web", sans-serif;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--arc-rim);
}
.arc__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.arc__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background-color: transparent;
  font-family: "Titillium Web", sans-serif;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--arc-white);
  cursor: pointer;
  transition: background-color 0.25s var(--arc-ease), border-color 0.25s var(--arc-ease), color 0.25s var(--arc-ease), transform 0.25s var(--arc-ease);
}
.arc__chip:hover { border-color: var(--arc-rim); transform: translateY(-2px); }
.arc__chip:focus-visible { outline: 3px solid var(--arc-rim); outline-offset: 3px; }
.arc__chip[aria-pressed="true"] { border-color: var(--arc-gold); background-color: var(--arc-gold); color: var(--arc-navy); }

/* the jobs: masonry columns, each card a framed photo, its plate, caption and service tags */
.arc__grid {
  columns: 4;
  column-gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.arc__card { break-inside: avoid; margin: 0 0 50px; }
.arc__card[hidden] { display: none; }
.arc--wall .arc__frame { border-color: var(--arc-white); box-shadow: 0 0 0 2px var(--arc-navy), 8px 8px 0 var(--arc-line); }
.arc--wall .arc__tile--tall .arc__frame { aspect-ratio: 3 / 4; }
.arc--wall .arc__plate { width: 210px; }
.arc--wall .arc__cap { margin-top: 38px; color: var(--arc-ink); }
.arc--wall .arc__capcity { color: var(--arc-navy); font-weight: 800; }
.arc__svcs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0 18px; }
.arc__svc {
  position: relative;
  padding-left: 12px;
  font-family: "Titillium Web", sans-serif;
  font-size: 11.5px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--arc-royal);
}
.arc__svc::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 6px;
  height: 6px;
  background-color: var(--arc-gold);
  transform: rotate(45deg);
}
.arc__none { margin: 0 0 20px; text-align: center; }
.arc__reset { margin: 0; border: 0; cursor: pointer; }

/* the columns end level: the script deals the cards into one list per column; the lists share the row's height,
   the end plate grows to the foot of the shortest, and any other column spreads its leftover into its gaps.
   Without the script the masonry columns stay. */
.arc__lanes {
  --arc-cols: 4;
  --arc-lgap: 50px;
  display: grid;
  grid-template-columns: repeat(var(--arc-cols), minmax(0, 1fr));
  column-gap: 30px;
}
.arc__lane {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--arc-lgap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.arc__lane > .arc__card { margin: 0; }
.arc__lane > .arc__end { flex: 1 0 auto; margin: 0 12px 0 0; }
.arc__grid[hidden] { display: none; }

/* the end plate: navy, a gold rim along its top, the gold offset plate behind, one big faint star, the area lines
   as call rows and the quote button, set to the foot of its column */
.arc__end {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  min-height: 300px;
  margin: 0 12px 62px 0;
  padding: 30px 26px 28px;
  overflow: hidden;
  break-inside: avoid;
  border-top: 5px solid var(--arc-gold);
  border-radius: 0 0 44px 0;
  background-color: var(--arc-navy);
  box-shadow: 12px 12px 0 var(--arc-gold);
  color: var(--arc-white);
}
.arc__endstar {
  position: absolute;
  top: -40px;
  right: -60px;
  width: 260px;
  height: 260px;
  fill: none;
  stroke: var(--arc-royal);
  stroke-width: 1.4;
  transform: rotate(12deg);
  pointer-events: none;
}
.arc__endeyebrow {
  position: relative;
  margin: 0;
  padding-left: 14px;
  border-left: 4px solid var(--arc-gold);
  font-family: "Titillium Web", sans-serif;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--arc-rim);
}
.arc__endh {
  position: relative;
  margin: 0;
  font-family: var(--mo-face);
  font-size: 34px;
  line-height: 1.02;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--arc-white);
}
.arc__endlines { position: relative; display: grid; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.arc__endline {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: var(--arc-white);
  text-decoration: none;
  transition: border-color 0.25s var(--arc-ease), transform 0.25s var(--arc-ease);
}
.arc__endline:hover { border-color: var(--arc-rim); transform: translateY(-2px); }
.arc__endline:focus-visible, .arc__endbtn:focus-visible { outline: 3px solid var(--arc-rim); outline-offset: 3px; }
.arc__endloc {
  font-family: "Titillium Web", sans-serif;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--arc-rim);
}
.arc__endphone { font-family: var(--mo-face); font-size: 22px; line-height: 1.1; font-weight: 800; white-space: nowrap; }
.arc__endbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  background-color: var(--arc-gold);
  font-family: "Titillium Web", sans-serif;
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--arc-navy);
  text-decoration: none;
}

@media (max-width: 1199px) {
  .arc__grid { columns: 3; }
  .arc__lanes { --arc-cols: 3; }
  .arc--wall .arc__h2 { font-size: 72px; }
  .arc__num { font-size: 120px; }
}
@media (max-width: 978px) {
  .arc--wall { border-radius: 0 100px 0 100px; }
  .arc--wall .arc__tile--tall .arc__frame { aspect-ratio: 3 / 4; }
  .arc--wall .arc__frame { aspect-ratio: 4 / 3; }
}
@media (max-width: 766px) {
  .arc--wall { padding: 70px 0 70px; border-radius: 0 50px 0 50px; }
  .arc__bg--a { width: 300px; height: 300px; right: -110px; }
  .arc__bg--b { width: 260px; height: 260px; }
  .arc--wall .arc__head { padding-right: 96px; }
  .arc--wall .arc__count { top: 24px; }
  .arc--wall .arc__h2 { font-size: 46px; }
  .arc__count { flex-direction: column; align-items: flex-start; gap: 6px; padding-left: 14px; }
  .arc__num { font-size: 76px; -webkit-text-stroke-width: 2px; }
  .arc__numk { font-size: 14px; letter-spacing: 2px; }
  .arc__filters { gap: 14px; margin-bottom: 48px; padding: 18px 0 20px 16px; box-shadow: 8px 8px 0 var(--arc-gold); border-radius: 0 0 28px 0; }
  .arc__group { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .arc__gname { padding-top: 0; }
  .arc__chips { flex-wrap: nowrap; overflow-x: auto; padding: 2px 16px 6px 2px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .arc__chips::-webkit-scrollbar { display: none; }
  .arc__chip { flex: 0 0 auto; scroll-snap-align: start; font-size: 12.5px; min-height: 40px; }
  .arc__grid { columns: 2; column-gap: 14px; }
  .arc__lanes { --arc-cols: 2; --arc-lgap: 36px; column-gap: 14px; }
  .arc__card { margin-bottom: 36px; }
  .arc__end { min-height: 260px; margin: 0 8px 44px 0; padding: 22px 14px 18px; gap: 12px; box-shadow: 8px 8px 0 var(--arc-gold); border-radius: 0 0 28px 0; }
  .arc__endstar { width: 170px; height: 170px; right: -50px; top: -30px; }
  .arc__endeyebrow { padding-left: 8px; border-left-width: 3px; font-size: 10px; letter-spacing: 1.5px; }
  .arc__endh { font-size: 21px; }
  .arc__endline { padding: 7px 6px; }
  .arc__endloc { font-size: 9.5px; letter-spacing: 1px; }
  .arc__endphone { font-size: 12.5px; }
  .arc__lane > .arc__end { margin: 0 8px 0 0; }
  .arc__endbtn { min-height: 44px; padding: 10px 8px; font-size: 11.5px; letter-spacing: 0.8px; text-align: center; }
  .arc--wall .arc__frame,
  .arc--wall .arc__tile--tall .arc__frame { border-width: 3px; border-radius: 0 0 22px 0; box-shadow: 0 0 0 2px var(--arc-navy), 5px 5px 0 var(--arc-line); }
  .arc--wall .arc__frame { aspect-ratio: 4 / 3; }
  .arc--wall .arc__tile--tall .arc__frame { aspect-ratio: 3 / 4; }
  .arc--wall .arc__plate { width: 100%; max-width: 168px; height: 34px; }
  .arc--wall .arc__city { font-size: 9.5px; letter-spacing: 0.6px; padding: 6px 8px 0; }
  .arc--wall .arc__cap { margin-top: 28px; padding-left: 10px; border-left-width: 3px; font-size: 13px; line-height: 1.4; }
  .arc__svcs { margin: 8px 0 0 13px; gap: 4px 10px; }
  .arc__svc { font-size: 9.5px; letter-spacing: 0.6px; padding-left: 10px; }
  .arc__svc::before { width: 5px; height: 5px; top: 3px; }
}
@media (max-width: 479px) {
  .arc--wall .arc__h2 { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .arc__chip, .arc__endline { transition: none; }
  .arc__chip:hover, .arc__endline:hover { transform: none; }
}

/* stage 3g: a service page with two jobs on its record sets them side by side, the second lower (the raised
   middle card's rhythm); with one job, the photo takes the wide side and its caption sits big beside it, so the
   row never leaves an empty column */
.arc__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.arc__row--2 .arc__tile:nth-child(2) { margin-top: 70px; }
.arc__row--2 .arc__tile--cap .arc__frame { aspect-ratio: 5 / 4; }
.arc__row--1 { grid-template-columns: minmax(0, 1fr); }
.arc__row--1 .arc__fig { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 60px; align-items: end; }
.arc__row--1 .arc__tile--cap .arc__frame { aspect-ratio: 4 / 3; }
.arc__row--1 .arc__cap { margin: 0 0 34px; padding-left: 22px; border-left-width: 6px; font-size: 24px; line-height: 1.45; }
@media (max-width: 978px) {
  .arc__row--2 { gap: 30px 20px; }
  .arc__row--2 .arc__tile:nth-child(2) { margin-top: 40px; }
  .arc__row--1 .arc__fig { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .arc__row--1 .arc__cap { margin: 40px 0 0; font-size: 19px; }
}
@media (max-width: 766px) {
  .arc__row--2 { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .arc__row--2 .arc__tile:nth-child(2) { margin-top: 0; }
  .arc__row--2 .arc__tile--cap .arc__frame { aspect-ratio: 4 / 3; }
  .arc__row--1 .arc__cap { margin-top: 34px; font-size: 16.5px; }
}
.arc__row--1 .arc__img { object-position: 50% 30%; }

/* George 2026-11-12: on a phone the section heads (eyebrow, heading, lead) sit centered, not pushed left */
@media (max-width: 766px) {
  .arc__head, .arc__title, .arc__intro, .arc__end { text-align: center; }
  .arc__eyebrow, .arc__endeyebrow { justify-content: center; }
  .arc__title > *, .arc__intro > * { margin-left: auto; margin-right: auto; }
  .arc__lead, .arc__endeyebrow { padding-left: 0; border-left: 0; }
}

/* George 2026-11-12: "too much empty space" over the jobs band on a phone: less navy above the star, a smaller
   star, and the eyebrow, heading, line and button closer together */
@media (max-width: 766px) {
  .arc { padding-top: 44px; }
  .arc__star { width: 56px; height: 56px; margin: 0 auto 4px; }
  .arc__head { gap: 14px; margin-bottom: 32px; }
  .arc__all { margin-top: 14px; }
}

/* client.services */
/* client.services - the service board (JTC's move, in Air Champs' own material), tightened in fix round 4 to
   under 1,200px at 1440. A gold field with Advanced Air's 200px top-left corner holds the head and the top of
   the board; the three cards break out of it onto a warm off-white ground (Q8), so the gold is never a flat
   yellow field. Each card is three layers: a solid offset plate (royal blue; navy on the middle card), the
   navy-bordered card, and a real job photo on top with a light city tag (the belt plate is kept for the hero
   pair and the record). The head is a navy block: an outlined gold ring with a simple glyph, the group in heavy
   gold caps (level 1), a softer one-line subtitle, and a thick stroke under it. Rows are white: the service in
   heavy navy caps at 20px (level 2), one short line in a soft ink (level 3), a chevron. The middle card sits
   48px lower. The rest of the list is a navy strip of chips (each a link that lifts) under a gold "More" caps
   label. On a phone each card's rows fold behind its head: the head is one big button (aria-expanded), so the
   band is the three photo cards and the chips until a reader opens a group. Every row is a link: its page once
   built, the quote band until then. Faint stars and a ghost word fill the open ground. */
.acsv {
  --sv-gold: #F2C40F;     /* the star gold, the motif's band shade */
  --sv-rim: #FED617;      /* the rim and star highlight: level-1 titles on navy */
  --sv-navy: #011A47;     /* the shield navy, deepened: borders, heads, level-2 names */
  --sv-royal: #1D4E9E;    /* the shield's royal blue: the plate and the stroke */
  --sv-royal-hi: #2C64C2; /* the royal blue lifted: the stroke under the head and the chevrons */
  --sv-warm: #FBF7EA;     /* the warm off-white ground (Q8) */
  --sv-tint: #FDF3C8;     /* the gold lightened: a row's hover */
  --sv-soft: #C8D4EA;     /* the head's subtitle on navy */
  --sv-ink: #56647C;      /* level 3: the soft ink of the short lines */
  --sv-rule: #E2E7EF;
  --sv-white: #FFFFFF;
  --sv-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --sv-gold-h: 462px;
  --sv-plate: 12px;
  position: relative;
  z-index: 2;
  padding: 72px 0 52px;
  background-color: var(--sv-warm);
  color: var(--sv-navy);
  overflow: clip;
}
.acsv__gold {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-width: 1600px;
  height: var(--sv-gold-h);
  margin: 0 auto;
  border-radius: 200px 0 0 0;
  background-color: #EAF0F8;
  overflow: hidden;
  pointer-events: none;
}
.acsv__crown {
  position: absolute;
  top: 30px;
  left: -40px;
  width: 480px;
  height: auto;
  fill: var(--sv-navy);
  opacity: 0.08;
}
.acsv__crown--r {
  left: auto;
  right: -40px;
  transform: scaleX(-1);
}
.acsv__ghost {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mo-face);
  font-size: 210px;
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -4px;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px #C50103;
  opacity: 0.2;
}
.acsv__stars {
  position: absolute;
  right: -120px;
  bottom: -160px;
  width: 520px;
  height: 520px;
  fill: none;
  stroke: #C50103;
  stroke-width: 0.6;
  opacity: 0.22;
  pointer-events: none;
}
.acsv__in {
  position: relative;
  width: 88%;
  max-width: 1240px;
  margin: 0 auto;
}

/* head: one bold idea, the second line in gold on a navy block */
.acsv__head {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.acsv__eyebrow {
  margin: 0 0 12px;
  font-family: "Titillium Web", sans-serif;
  font-size: 17.6px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--sv-navy);
}
.acsv__h2 {
  margin: 0;
  font-family: var(--mo-face);
  font-size: 54px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--sv-navy);
}
.acsv__h2a { display: block; }
.acsv__h2b {
  display: block;
  width: fit-content;
  margin: 6px auto 0;
  padding: 6px 20px 10px;
  background-color: var(--sv-navy);
  color: var(--sv-rim);
}
.acsv__lead {
  margin: 16px 0 0;
  font-family: "Instrument Sans", sans-serif;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--sv-navy);
}

/* the board: three cards, the middle one 48px lower */
.acsv__board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  align-items: start;
  margin: 44px 0 0;
  padding: 0 var(--sv-plate) 0 0;
  list-style: none;
}
.acsv__cell { position: relative; }
.acsv__cell--2 { margin-top: 48px; }
.acsv__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--sv-white);
  border: 4px solid var(--sv-navy);
  border-radius: 18px 18px 0 0;
  box-shadow: var(--sv-plate) var(--sv-plate) 0 0 var(--sv-royal);
  transition: transform 0.35s var(--sv-ease), box-shadow 0.35s var(--sv-ease);
}
.acsv__cell--2 .acsv__card { box-shadow: var(--sv-plate) var(--sv-plate) 0 0 var(--sv-navy); }
.acsv__cell:hover .acsv__card,
.acsv__cell:focus-within .acsv__card {
  transform: translateY(-8px);
  box-shadow: 20px 20px 0 0 var(--sv-royal);
}
.acsv__cell--2:hover .acsv__card,
.acsv__cell--2:focus-within .acsv__card { box-shadow: 20px 20px 0 0 var(--sv-navy); }

.acsv__photo {
  position: relative;
  margin: 0;
  height: 178px;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  background-color: var(--sv-navy);
}
.acsv__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--sv-ease);
}
.acsv__cell:hover .acsv__photo img,
.acsv__cell:focus-within .acsv__photo img { transform: scale(1.05); }

/* the light city tag: small caps on a navy chip with a gold edge (the belt plate stays on the hero and record) */
.acsv__tag {
  position: absolute;
  left: 0;
  bottom: 14px;
  padding: 6px 12px 6px 10px;
  background-color: rgba(1, 26, 71, 0.86);
  border-left: 4px solid var(--sv-rim);
  font-family: "Titillium Web", sans-serif;
  font-size: 12.6px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sv-white);
}

/* the head: level 1 */
.acsv__ghead {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px 16px;
  background-color: var(--sv-navy);
  border-bottom: 6px solid var(--sv-royal-hi);
}
.acsv__cell--2 .acsv__ghead { border-bottom-color: var(--sv-gold); }
.acsv__ring {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border: 3px solid var(--sv-rim);
  border-radius: 50%;
  transition: transform 0.6s var(--sv-ease);
}
.acsv__cell:hover .acsv__ring,
.acsv__cell:focus-within .acsv__ring { transform: rotate(-12deg); }
.acsv__ring svg { width: 30px; height: 30px; }
.acsv__glyph {
  fill: none;
  stroke: var(--sv-rim);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.acsv__gtext { flex: 1 1 auto; min-width: 0; }
.acsv__gtitle {
  margin: 0;
  font-family: var(--mo-face);
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--sv-rim);
}
.acsv__gsub {
  margin: 6px 0 0;
  font-family: "Instrument Sans", sans-serif;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 400;
  color: var(--sv-soft);
}
/* the phone's fold button: the chevron in a gold ring; its hit area is the whole head */
.acsv__toggle {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid var(--sv-rim);
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.3s var(--sv-ease);
}
.acsv__toggle[hidden] { display: none; }
.acsv__toggle::after {
  content: "";
  position: absolute;
  inset: 0;
}
.acsv__toggle svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--sv-rim);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s var(--sv-ease);
}
.acsv__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.acsv__toggle:hover,
.acsv__toggle:focus-visible { background-color: rgba(254, 214, 23, 0.18); }
.acsv__toggle:focus-visible { outline: 3px solid var(--sv-rim); outline-offset: 3px; }

/* the rows: level 2 names, level 3 lines */
.acsv__rows {
  margin: 0;
  padding: 4px 0;
  list-style: none;
}
.acsv__rows[hidden] { display: none; }
.acsv__rows li + li .acsv__row { border-top: 2px solid var(--sv-rule); }
.acsv__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  column-gap: 12px;
  align-items: center;
  padding: 13px 18px 13px 22px;
  color: var(--sv-navy);
  text-decoration: none;
  transition: background-color 0.25s var(--sv-ease);
}
.acsv__name {
  grid-column: 1;
  font-family: var(--mo-face);
  font-size: 20px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: var(--sv-navy);
}
.acsv__short {
  grid-column: 1 / -1;
  margin-top: 4px;
  overflow: hidden;
  font-family: "Instrument Sans", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--sv-ink);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.acsv__chev {
  grid-column: 2;
  grid-row: 1;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--sv-royal-hi);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s var(--sv-ease);
}
.acsv__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.acsv__row:hover,
.acsv__row:focus-visible { background-color: var(--sv-tint); }
.acsv__row:hover .acsv__chev,
.acsv__row:focus-visible .acsv__chev { transform: translateX(6px); }
.acsv__row:focus-visible { outline: 3px solid var(--sv-royal-hi); outline-offset: -3px; }

/* the rest of the list: a navy strip, the gold "More" label, the services as chips */
.acsv__more {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 28px;
  margin: 52px var(--sv-plate) 0 0;
  padding: 22px 28px;
  background-color: var(--sv-navy);
  border-left: 8px solid var(--sv-gold);
  box-shadow: var(--sv-plate) var(--sv-plate) 0 0 var(--sv-royal);
}
.acsv__mlabel {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--mo-face);
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--sv-rim);
}
.acsv__mstar { width: 30px; height: 30px; fill: var(--sv-rim); }
.acsv__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.acsv__chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  font-family: "Titillium Web", sans-serif;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sv-white);
  text-decoration: none;
  transition: transform 0.3s var(--sv-ease), background-color 0.3s var(--sv-ease), color 0.3s var(--sv-ease), border-color 0.3s var(--sv-ease);
}
.acsv__chip::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--sv-rim);
}
.acsv__chip:hover,
.acsv__chip:focus-visible {
  transform: translateY(-3px);
  border-color: var(--sv-rim);
  background-color: var(--sv-rim);
  color: var(--sv-navy);
}
.acsv__chip:hover::before,
.acsv__chip:focus-visible::before { background-color: var(--sv-navy); }
.acsv__chip:focus-visible { outline: 3px solid var(--sv-white); outline-offset: 3px; }
.acsv__btn {
  margin-left: auto;
  padding: 14px 22px;
  background-color: var(--sv-rim);
  font-family: "Titillium Web", sans-serif;
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sv-navy);
  text-decoration: none;
  transition: background-color 0.3s var(--sv-ease);
}
.acsv__btn:hover, .acsv__btn:focus-visible { background-color: var(--sv-white); }

/* reveal on scroll: only once the script has marked the band */
.acsv--rv .acsv__cell,
.acsv--rv .acsv__more {
  opacity: 0;
  translate: 0 48px;
  transition: opacity 0.7s var(--sv-ease), translate 0.7s var(--sv-ease);
}
.acsv--rv.is-in .acsv__cell,
.acsv--rv.is-in .acsv__more { opacity: 1; translate: 0 0; }
.acsv--rv.is-in .acsv__cell--2 { transition-delay: 0.12s; }
.acsv--rv.is-in .acsv__cell--3 { transition-delay: 0.24s; }
.acsv--rv.is-in .acsv__more { transition-delay: 0.3s; }

/* two cards (a city page's short list): the pair centred, the bare bar holds only the all services button */
@media (min-width: 979px) {
  .acsv--two .acsv__board { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin-left: auto; margin-right: auto; }
}
.acsv__more--bare { justify-content: center; margin-top: 64px; padding: 0; background: none; border: 0; box-shadow: none; }
.acsv__more--bare .acsv__btn { margin: 0 auto; padding: 18px 34px; border-bottom: 4px solid var(--sv-navy); font-size: 16px; }
.acsv__more--bare::before,
.acsv__more--bare::after { content: none; }

@media (max-width: 1199px) {
  .acsv__board { gap: 24px; }
  .acsv__gtitle { font-size: 28px; }
  .acsv__name { font-size: 18px; }
  .acsv__ghead { padding: 16px 16px 14px; gap: 12px; }
  .acsv__ring { width: 48px; height: 48px; }
  .acsv__ring svg { width: 26px; height: 26px; }
  .acsv__row { padding: 12px 14px 12px 16px; }
  .acsv__short { font-size: 13.5px; }
}
@media (max-width: 978px) {
  .acsv__gold { border-radius: 100px 0 0 0; }
  .acsv__h2 { font-size: 46px; }
  .acsv__ghost { font-size: 170px; }
  .acsv__board { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 44px auto 0; gap: 36px; }
  .acsv__cell--2 { margin-top: 0; }
  .acsv__gtitle { font-size: 32px; }
  .acsv__name { font-size: 20px; }
  .acsv__short { white-space: normal; }
  .acsv__more { max-width: 548px; margin: 44px auto 0; }
  .acsv__btn { margin-left: 0; }
}
@media (max-width: 766px) {
  .acsv { --sv-gold-h: 420px; --sv-plate: 8px; padding: 64px 0 56px; }
  .acsv__gold { border-radius: 50px 0 0 0; }
  .acsv__crown { width: 320px; left: -30px; }
  .acsv__ghost { font-size: 104px; top: 18px; }
  .acsv__crown--r { display: none; }
  .acsv__eyebrow { font-size: 15.4px; }
  .acsv__h2 { font-size: 36px; }
  .acsv__h2b { padding: 6px 12px 9px; }
  .acsv__lead { font-size: 16px; }
  .acsv__board { gap: 28px; margin-top: 36px; }
  .acsv__photo { height: 150px; }
  .acsv__cell:hover .acsv__card,
  .acsv__cell:focus-within .acsv__card { box-shadow: 12px 12px 0 0 var(--sv-royal); }
  .acsv__cell--2:hover .acsv__card,
  .acsv__cell--2:focus-within .acsv__card { box-shadow: 12px 12px 0 0 var(--sv-navy); }
  .acsv__more { flex-direction: column; align-items: flex-start; margin-top: 36px; padding: 20px; }
  .acsv__chip { font-size: 14px; padding: 10px 14px; }
}
@media (max-width: 479px) {
  .acsv__h2 { font-size: 31px; }
  .acsv__h2b { padding: 6px 10px 8px; }
  .acsv__gtitle { font-size: 26px; }
  .acsv__gsub { font-size: 13.5px; }
  .acsv__name { font-size: 18px; }
  .acsv__short { font-size: 14px; }
  .acsv__row { padding: 14px 16px 14px 18px; }
  .acsv__ghead { padding: 16px 14px; }
  .acsv__ring { width: 44px; height: 44px; border-width: 2.5px; }
  .acsv__ring svg { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .acsv__card, .acsv__photo img, .acsv__ring, .acsv__row, .acsv__chev, .acsv__chip, .acsv__btn,
  .acsv__toggle, .acsv__toggle svg,
  .acsv--rv .acsv__cell, .acsv--rv .acsv__more,
  .acsv--rv.is-in .acsv__cell--2, .acsv--rv.is-in .acsv__cell--3, .acsv--rv.is-in .acsv__more { transition: none; }
  .acsv--rv .acsv__cell, .acsv--rv .acsv__more { opacity: 1; translate: 0 0; }
  .acsv__cell:hover .acsv__card, .acsv__cell:focus-within .acsv__card,
  .acsv__cell:hover .acsv__photo img, .acsv__cell:focus-within .acsv__photo img,
  .acsv__cell:hover .acsv__ring, .acsv__cell:focus-within .acsv__ring,
  .acsv__row:hover .acsv__chev, .acsv__row:focus-visible .acsv__chev,
  .acsv__chip:hover, .acsv__chip:focus-visible { transform: none; }
}

/* the services hub (stage 3e): every service carries its whole line from the hub's copy, so the short lines wrap,
   and the "More" services become chip cards with their name over their line */
.acsv--hub .acsv__short { white-space: normal; text-overflow: clip; }
.acsv--hub .acsv__chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1 1 100%; }
.acsv--hub .acsv__chip { display: grid; grid-template-columns: 8px minmax(0, 1fr); align-items: start; gap: 4px 12px; height: 100%; padding: 14px 18px; }
.acsv--hub .acsv__chip::before { margin-top: 6px; }
.acsv__chipname { grid-column: 2; }
.acsv__chipshort {
  grid-column: 2;
  font-family: "Instrument Sans", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sv-soft);
  transition: color 0.3s var(--sv-ease);
}
.acsv--hub .acsv__chip:hover .acsv__chipshort,
.acsv--hub .acsv__chip:focus-visible .acsv__chipshort { color: var(--sv-navy); }
@media (max-width: 978px) {
  .acsv--hub .acsv__chips { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .acsv__chipshort { transition: none; }
}

/* the call card (a city page): navy, the logo star huge and faint, the area's line as its biggest line */
.acsv__callcard { position: relative; gap: 14px; padding: 34px 28px 30px; background-color: var(--sv-navy); color: var(--sv-white); overflow: hidden; }
.acsv__callstars { position: absolute; right: -60px; bottom: -70px; width: 260px; height: 260px; fill: rgba(254, 214, 23, 0.12); transform: rotate(14deg); pointer-events: none; }
.acsv__callring { position: relative; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border: 3px solid var(--sv-gold); border-radius: 50%; }
.acsv__callring svg { width: 28px; height: 28px; fill: var(--sv-gold); }
.acsv__callk { position: relative; margin: 6px 0 0; font-family: "Titillium Web", "Saira", sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--sv-white); }
.acsv__callline { position: relative; display: grid; gap: 4px; min-width: 0; padding: 14px 20px 14px 16px; border-left: 5px solid var(--sv-gold); background: var(--sv-royal); color: var(--sv-white); text-decoration: none; transition: transform 0.3s var(--sv-ease); }
.acsv__callline:hover,
.acsv__callline:focus-visible { transform: translateX(6px); }
.acsv__callline:focus-visible { outline: 2px solid var(--sv-gold); outline-offset: 3px; }
.acsv__callloc { font-family: "Titillium Web", "Saira", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--sv-gold); }
.acsv__callnum { font-family: "Saira", sans-serif; font-size: clamp(24px, 7.4vw, 32px); line-height: 1.05; font-weight: 900; white-space: nowrap; }
.acsv__callnote { position: relative; margin: 0; font-family: "Instrument Sans", sans-serif; font-size: 14.5px; line-height: 1.5; color: var(--sv-white); }
.acsv__callquote { position: relative; display: block; margin-top: 6px; padding: 16px 20px; background: var(--sv-gold); font-family: "Titillium Web", "Saira", sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 2px; text-align: center; text-transform: uppercase; color: var(--sv-navy); text-decoration: none; }
.acsv__callquote:focus-visible { outline: 2px solid var(--sv-white); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .acsv__callline { transition: none; }
  .acsv__callline:hover,
  .acsv__callline:focus-visible { transform: none; }
}

/* George 2026-11-12: tiny hints of the logo's red */
.acsv__mstar { fill: #C50103; }

/* client.film */
/* client.film - redesign 4: the reel; fix round 4: three sharp clips (the blurred Stanford attic is out), the
   head beside the strip at 1440 so the band is shorter and carries no empty navy under it. A dark navy band
   with Advanced Air's corner pair (150px top-left and bottom-right) holds the job loops as tall 9:16 frames on a
   film strip: a row of gold sprocket holes runs above and below the frames, the frames step up and down, each
   frame has one rounded corner and a light city tag (the belt plate is kept for the hero pair and the record),
   and one line of what it shows under it. The clips play muted only while on screen; one
   button pauses them all. Hover lifts a frame, turns its edge gold and pushes the clip in a little. On a phone
   the reel scrolls sideways with snap. Reduced motion: no movement, no autoplay. */
.acfm {
  --fm-deep: #00143A;     /* the shield navy at its darkest: the reel's ground */
  --fm-navy: #011A47;
  --fm-rim: #FED617;      /* the rim and star highlight */
  --fm-gold: #F2C40F;
  --fm-soft: #C8D4EA;
  --fm-white: #FFFFFF;
  --fm-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --fm-gap: 32px;
  position: relative;
  padding: 0;
  background-color: var(--fm-white);
}
.acfm__band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  align-items: center;
  column-gap: 52px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 84px 0 84px 6%;
  border-radius: 150px 0 150px 0;
  background-color: var(--fm-deep);
  color: var(--fm-white);
  overflow: hidden;
}
.acfm__ghost {
  position: absolute;
  top: 28px;
  right: -30px;
  font-family: var(--mo-face);
  font-size: 150px;
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -2px;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.acfm__in { position: relative; }
.acfm__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}
.acfm__eyebrow {
  margin: 0 0 14px;
  font-family: "Titillium Web", sans-serif;
  font-size: 17.6px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--fm-rim);
}
.acfm__h2 {
  max-width: 900px;
  margin: 0;
  font-family: var(--mo-face);
  font-size: 54px;
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--fm-white);
}
.acfm__gold { color: var(--fm-rim); }
.acfm__toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border: 2px solid var(--fm-rim);
  border-radius: 0;
  background-color: transparent;
  font-family: "Titillium Web", sans-serif;
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fm-rim);
  cursor: pointer;
  transition: background-color 0.3s var(--fm-ease), color 0.3s var(--fm-ease);
}
.acfm__toggle[hidden] { display: none; }
.acfm__toggle:hover, .acfm__toggle:focus-visible { background-color: var(--fm-rim); color: var(--fm-deep); }
.acfm__toggle:focus-visible { outline: 3px solid var(--fm-white); outline-offset: 3px; }
.acfm__icon { display: inline-flex; gap: 4px; }
.acfm__bar { display: block; width: 4px; height: 14px; background-color: currentColor; }
.acfm__toggle[aria-pressed="true"] .acfm__bar:first-child {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid currentColor;
  background-color: transparent;
}
.acfm__toggle[aria-pressed="true"] .acfm__bar:last-child { display: none; }

/* the reel and its strip */
.acfm__reelwrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
  padding: 14px 0;
  background-color: #000C24; /* the strip itself: the shield navy near black */
}
.acfm__reelwrap:focus-visible { outline: 3px solid var(--fm-rim); outline-offset: -3px; }
.acfm__strip {
  display: block;
  width: 100%;
  height: 22px;
  fill: var(--fm-gold);
  opacity: 0.75;
}
.acfm__strip--top { margin-bottom: 36px; }
.acfm__strip--bot { margin-top: 30px; }
.acfm__reel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--fm-gap);
  width: auto;
  max-width: 940px;
  margin: 0 56px 0 44px;
  padding: 0;
  list-style: none;
}
.acfm__clip--2 { margin-top: 56px; }
.acfm__clip--1, .acfm__clip--3 { margin-bottom: 56px; }
.acfm__fig {
  margin: 0;
  transition: transform 0.35s var(--fm-ease);
}
.acfm__frame {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.85);
  border-radius: 0 0 40px 0;
  background-color: var(--fm-navy);
  transition: border-color 0.3s var(--fm-ease);
}
.acfm__poster, .acfm__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--fm-ease);
}
.acfm__video { opacity: 0; transition: opacity 0.4s var(--fm-ease), transform 0.6s var(--fm-ease); }
.acfm__video.is-on { opacity: 1; }
.acfm__clip--wide .acfm__poster, .acfm__clip--wide .acfm__video { object-position: 50% 50%; }
/* the light city tag: small caps on a navy chip with a gold edge */
.acfm__tag {
  position: absolute;
  left: 0;
  bottom: 18px;
  z-index: 2;
  padding: 6px 12px 6px 10px;
  background-color: rgba(1, 26, 71, 0.86);
  border-left: 4px solid var(--fm-rim);
  font-family: "Titillium Web", sans-serif;
  font-size: 12.6px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fm-white);
  white-space: nowrap;
  transition: background-color 0.3s var(--fm-ease), color 0.3s var(--fm-ease);
}
.acfm__clip:hover .acfm__tag, .acfm__clip:focus-visible .acfm__tag { background-color: var(--fm-rim); color: var(--fm-deep); }
.acfm__cap {
  margin: 16px 2px 0;
  font-family: "Instrument Sans", sans-serif;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 400;
  color: var(--fm-soft);
}
.acfm__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.acfm__clip:hover .acfm__fig, .acfm__clip:focus-visible .acfm__fig { transform: translateY(-10px); }
.acfm__clip:hover .acfm__frame, .acfm__clip:focus-visible .acfm__frame { border-color: var(--fm-rim); }
.acfm__clip:hover .acfm__poster, .acfm__clip:focus-visible .acfm__poster,
.acfm__clip:hover .acfm__video, .acfm__clip:focus-visible .acfm__video { transform: scale(1.04); }
.acfm__reelwrap:focus-visible .acfm__frame { border-color: var(--fm-rim); }

@media (max-width: 1199px) {
  .acfm { --fm-gap: 22px; }
  .acfm__band { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: 36px; }
  .acfm__h2 { font-size: 44px; }
  .acfm__reel { margin: 0 36px 0 28px; }
}
@media (max-width: 978px) {
  .acfm__band { display: block; padding: 100px 0 90px; border-radius: 100px 0 100px 0; }
  .acfm__in { width: 88%; margin: 0 auto; }
  .acfm__reelwrap { margin-top: 48px; }
  .acfm__h2 { font-size: 42px; }
  .acfm__ghost { font-size: 100px; }
  .acfm__reelwrap { overflow-x: auto; scroll-snap-type: x mandatory; grid-template-columns: max-content; scrollbar-width: none; }
  .acfm__reel { display: flex; width: auto; max-width: none; margin: 0; padding: 0 6%; }
  .acfm__clip { flex: none; width: 260px; scroll-snap-align: center; }
}
@media (max-width: 766px) {
  .acfm__band { padding: 75px 0 64px; border-radius: 50px 0 50px 0; }
  .acfm__eyebrow { font-size: 15.4px; }
  .acfm__h2 { font-size: 36px; }
  .acfm__ghost { display: none; }
  .acfm__reelwrap { margin-top: 40px; }
  .acfm__clip { width: 200px; }
  .acfm__clip--2 { margin-top: 36px; }
  .acfm__clip--1, .acfm__clip--3 { margin-bottom: 36px; }
  .acfm__frame { border-radius: 0 0 28px 0; }
  .acfm__cap { font-size: 14px; }
}
@media (max-width: 479px) {
  .acfm__h2 { font-size: 32px; }
  .acfm__tag { bottom: 14px; font-size: 11.5px; letter-spacing: 1.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .acfm__fig, .acfm__frame, .acfm__poster, .acfm__video, .acfm__toggle, .acfm__tag { transition: none; }
  .acfm__clip:hover .acfm__fig, .acfm__clip:focus-visible .acfm__fig,
  .acfm__clip:hover .acfm__poster, .acfm__clip:focus-visible .acfm__poster,
  .acfm__clip:hover .acfm__video, .acfm__clip:focus-visible .acfm__video { transform: none; }
  .acfm__reelwrap { scroll-behavior: auto; }
}

/* George 2026-11-12: on a phone the section heads (eyebrow, heading, lead) sit centered, not pushed left */
@media (max-width: 766px) {
  .acfm__head, .acfm__title { text-align: center; }
  .acfm__eyebrow { justify-content: center; }
  .acfm__head { justify-content: center; align-items: center; }
  .acfm__toggle { margin-left: auto; margin-right: auto; }
}

/* client.main-event */
/* client.main-event - the annotated photo (REDESIGN-4 band 6). The Almaden furnace closet large on the left in a
   thick navy frame over an offset gold plate, one 100px corner, the city on the logo's belt plate across its foot,
   numbered gold callouts on what the card names. On the right a heavy heading that says what the photo shows,
   one phrase highlighted, the fight card (rows with big outlined numbers, heavy caps names, soft one-line
   descriptions; the city is said once, on the photo's belt plate) and the gold quote button at the photo's foot. Hovering a row lights its callout. The band's eyebrow
   runs behind as giant outlined ghost type, so no light area is empty. */
.acme {
  --me-navy: #012668;
  --me-deep: #011A47;
  --me-soft: #1D4E9E;
  --me-gold: #F2C40F;
  --me-rim: #FED617;
  --me-pale: #EAF0F8;
  --me-ink: #22324A;
  --me-mute: #56657D;
  --me-rule: #D3DDEB;
  --me-white: #FFFFFF;
  --me-pad: 100px;
  --me-h2: 48px;
  --me-h2-lh: 54px;
  --me-ease: cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  padding: var(--me-pad) 0;
  background: var(--me-white);
  overflow: hidden;
}
/* a pale stage behind the photo, running off the left edge */
.acme::before {
  content: "";
  position: absolute;
  left: 0;
  top: 190px;
  bottom: 0;
  width: 42%;
  border-top-right-radius: 150px;
  background: var(--me-pale);
}
.acme__ghost {
  position: absolute;
  z-index: 0;
  top: 6px;
  right: -20px;
  margin: 0;
  font-family: "Saira", sans-serif;
  font-size: 170px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -2px;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px rgba(1, 38, 104, 0.09);
  pointer-events: none;
  user-select: none;
}
.acme__in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 75px;
  align-items: stretch;
  width: 88%;
  max-width: 1200px;
  margin: 0 auto;
}

/* the photo: navy frame, gold plate offset behind, one round corner */
.acme__media { position: relative; padding: 0 30px 50px 0; }
.acme__plateback {
  position: absolute;
  top: 30px;
  left: 30px;
  right: 0;
  bottom: 50px;
  border-top-right-radius: 100px;
  background: var(--me-gold);
  transition: transform 0.4s var(--me-ease);
}
.acme__fig { position: relative; margin: 0; }
.acme__frame {
  position: relative;
  counter-reset: acmedot;
  aspect-ratio: 4 / 5;
  border: 6px solid var(--me-deep);
  border-top-right-radius: 100px;
  overflow: hidden;
  background: var(--me-deep);
}
.acme__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--me-ease);
}
.acme__media:hover .acme__img, .acme__media:focus-visible .acme__img { transform: scale(1.04); }
.acme__media:hover .acme__plateback, .acme__media:focus-visible .acme__plateback { transform: translate(8px, 8px); }

/* the numbered callouts on what the card names */
.acme__dot {
  position: absolute;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border: 4px solid var(--me-white);
  border-radius: 50%;
  background: var(--me-gold);
  transition: transform 0.3s var(--me-ease), background-color 0.3s var(--me-ease);
}
.acme__dot::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 3px solid var(--me-rim);
  border-radius: 50%;
  animation: acme-ping 2.4s var(--me-ease) infinite;
}
.acme__dot--2::after { animation-delay: 0.8s; }
.acme__dot--3::after { animation-delay: 1.6s; }
.acme__dotnum {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: "Saira", sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
  color: var(--me-deep);
}
.acme__dot--1 { left: 42%; top: 57%; }
.acme__dot--2 { left: 81%; top: 39%; }
.acme__dot--3 { left: 62%; top: 72%; }
@keyframes acme-ping {
  0% { transform: scale(0.8); opacity: 1; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}
.acme:has(.acme__round--1:hover) .acme__dot--1, .acme:has(.acme__round--1:focus-visible) .acme__dot--1,
.acme:has(.acme__round--2:hover) .acme__dot--2, .acme:has(.acme__round--2:focus-visible) .acme__dot--2,
.acme:has(.acme__round--3:hover) .acme__dot--3, .acme:has(.acme__round--3:focus-visible) .acme__dot--3 { transform: scale(1.25); background: var(--me-white); }

/* the city on the belt plate across the photo's foot */
.acme__belt {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: -46px;
  width: 380px;
  aspect-ratio: 400 / 112;
  margin: 0 0 0 -190px;
}
.acme__beltart { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.acme__beltfill { fill: var(--me-navy); }
.acme__beltrim { fill: none; stroke: var(--me-rim); stroke-width: 5; }
.acme__beltstars { fill: var(--me-rim); }
.acme__belttext {
  position: absolute;
  inset: 30% 8% 12%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 19px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--me-white);
}

/* the words: heading at the photo's top, the quote button at its foot (fix 4, Y2) */
.acme__text { display: flex; flex-direction: column; justify-content: space-between; gap: 30px; padding-bottom: 50px; }
.acme__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 17.6px;
  line-height: 25.6px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--me-soft);
}
.acme__eyebrow::before {
  content: none;
  width: 34px;
  height: 12px;
  background: var(--me-gold);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.acme__h2 {
  margin: 0;
  font-family: "Saira", sans-serif;
  font-size: var(--me-h2);
  line-height: var(--me-h2-lh);
  font-weight: 900;
  color: var(--me-deep);
}
.acme__hl {
  display: inline-block;
  margin-top: 6px;
  padding: 0 6px;
  background: var(--me-gold);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.acme__body {
  margin: 0 0 30px;
  font-family: "Instrument Sans", sans-serif;
  font-size: 16px;
  line-height: 27px;
  color: var(--me-mute);
}

/* the fight card: thick navy border, offset gold plate, navy head, gold stroke, rows */
.acme__card { position: relative; margin: 0 14px 14px 0; }
.acme__cardback {
  position: absolute;
  inset: 14px -14px -14px 14px;
  background: var(--me-gold);
}
.acme__cardin {
  position: relative;
  border: 4px solid var(--me-deep);
  border-top-width: 10px;
  background: var(--me-white);
}
.acme__rounds { margin: 0; padding: 0; list-style: none; counter-reset: acmer; }
.acme__rn::before { counter-increment: acmer; content: counter(acmer); }
.acme__dotnum::before { counter-increment: acmedot; content: counter(acmedot); }
.acme__round {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 2px solid var(--me-rule);
  transition: background-color 0.3s var(--me-ease);
}
.acme__round:last-child { border-bottom: 0; }
.acme__rn {
  font-family: "Saira", sans-serif;
  font-size: 58px;
  line-height: 0.9;
  font-weight: 900;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 2px var(--me-navy);
  transition: color 0.3s var(--me-ease), transform 0.3s var(--me-ease);
}
.acme__rt { display: flex; flex-direction: column; gap: 3px; }
.acme__k {
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 19px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--me-deep);
}
.acme__v {
  font-family: "Instrument Sans", sans-serif;
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  color: var(--me-mute);
}
.acme__round:hover, .acme__round:focus-visible { background: var(--me-pale); }
.acme__round:hover .acme__rn, .acme__round:focus-visible .acme__rn { color: var(--me-gold); transform: translateX(4px); }

.acme__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  background: var(--me-gold);
  color: var(--me-deep);
  text-decoration: none;
  transition: background-color 0.3s var(--me-ease);
}
.acme__label {
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.acme__arrow { width: 16px; height: 12px; fill: currentColor; transition: transform 0.3s var(--me-ease); }
.acme__btn:hover, .acme__btn:focus-visible { background: var(--me-rim); }
.acme__btn:hover .acme__arrow, .acme__btn:focus-visible .acme__arrow { transform: translateX(6px); }
.acme__btn:focus-visible { outline: 3px solid var(--me-deep); outline-offset: -6px; }
/* the band's call to action: the square gold quote button to the finale */
.acme__quote {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 16px;
  padding: 20px 28px;
  background: var(--me-rim);
  color: var(--me-deep);
  text-decoration: none;
  transition: background-color 0.3s var(--me-ease);
}
.acme__quote:hover, .acme__quote:focus-visible { background: var(--me-gold); }
.acme__quote:hover .acme__arrow, .acme__quote:focus-visible .acme__arrow { transform: translateX(6px); }
.acme__quote:focus-visible { outline: 3px solid var(--me-deep); outline-offset: 3px; }

/* scroll reveal, set only once the script runs */
.acme.is-armed .acme__media { opacity: 0; transform: translateX(-40px); transition: opacity 0.7s var(--me-ease), transform 0.7s var(--me-ease); }
.acme.is-armed .acme__text { opacity: 0; transform: translateY(30px); transition: opacity 0.7s var(--me-ease) 0.15s, transform 0.7s var(--me-ease) 0.15s; }
.acme.is-armed.is-in .acme__media, .acme.is-armed.is-in .acme__text { opacity: 1; transform: none; }

@media (max-width: 1199px) {
  .acme { --me-h2: 40px; --me-h2-lh: 46px; }
  .acme__in { gap: 50px; }
  .acme__ghost { font-size: 130px; }
}
@media (max-width: 978px) {
  .acme__in { grid-template-columns: minmax(0, 1fr); gap: 75px; }
  .acme::before { width: 70%; top: 140px; bottom: auto; height: 640px; }
  .acme__media { max-width: 560px; width: 100%; justify-self: center; }
  .acme__text { padding-bottom: 0; }
}
@media (max-width: 766px) {
  .acme { --me-pad: 75px; --me-h2: 31.5px; --me-h2-lh: 37px; }
  .acme::before { width: 88%; top: 90px; height: 480px; border-top-right-radius: 50px; }
  .acme__ghost { top: 14px; right: auto; left: 16px; font-size: 40px; letter-spacing: 0; }
  .acme__in { gap: 75px; }
  .acme__media { padding: 0 16px 30px 0; }
  .acme__plateback { top: 16px; left: 16px; bottom: 30px; border-top-right-radius: 50px; }
  .acme__frame { border-width: 4px; border-top-right-radius: 50px; }
  .acme__dot { width: 40px; height: 40px; margin: -20px 0 0 -20px; border-width: 3px; }
  .acme__dotnum { font-size: 17px; }
  .acme__belt { width: 280px; margin-left: -140px; bottom: -34px; }
  .acme__belttext { font-size: 15px; letter-spacing: 1.5px; }
  .acme__eyebrow { font-size: 15.4px; line-height: 22.4px; }
  .acme__body { font-size: 14px; line-height: 24px; }
  .acme__round { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 14px 16px; }
  .acme__rn { font-size: 44px; }
  .acme__k { font-size: 16px; line-height: 20px; letter-spacing: 1px; }
  .acme__v { font-size: 14px; line-height: 20px; }
  .acme__label { font-size: 14px; }
  .acme__quote { align-self: stretch; justify-content: space-between; padding: 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .acme__img, .acme__plateback, .acme__dot, .acme__rn, .acme__round, .acme__btn, .acme__quote, .acme__arrow { transition: none; }
  .acme__dot::after, .acme__dot--2::after, .acme__dot--3::after { animation: none; opacity: 0; }
  .acme.is-armed .acme__media, .acme.is-armed .acme__text { opacity: 1; transform: none; transition: none; }
  .acme__media:hover .acme__img, .acme__media:focus-visible .acme__img,
  .acme__media:hover .acme__plateback, .acme__media:focus-visible .acme__plateback,
  .acme__round:hover .acme__rn, .acme__round:focus-visible .acme__rn,
  .acme__btn:hover .acme__arrow, .acme__btn:focus-visible .acme__arrow,
  .acme__quote:hover .acme__arrow, .acme__quote:focus-visible .acme__arrow { transform: none; }
  .acme:has(.acme__round--1:hover) .acme__dot--1, .acme:has(.acme__round--1:focus-visible) .acme__dot--1,
  .acme:has(.acme__round--2:hover) .acme__dot--2, .acme:has(.acme__round--2:focus-visible) .acme__dot--2,
  .acme:has(.acme__round--3:hover) .acme__dot--3, .acme:has(.acme__round--3:focus-visible) .acme__dot--3 { transform: none; }
}

/* on the projects page the band sits between the pale wall and the gold finale, so it turns navy: the stage
   behind the photo a deeper navy with one round corner, the ghost word in a faint gold stroke, the heading white
   with its place on the gold block, the line soft; the photo, the fight card and the buttons stay as they are */
.acme--navy { background: var(--me-navy); }
.acme--navy::before { background: var(--me-deep); }
.acme--navy .acme__ghost { -webkit-text-stroke-color: rgba(254, 214, 23, 0.12); }
.acme--navy .acme__eyebrow { color: var(--me-rim); }
.acme--navy .acme__h2 { color: var(--me-white); }
.acme--navy .acme__hl { padding: 0; background: none; color: var(--me-rim); }
.acme--navy .acme__body { color: #C8D4EA; }
.acme--navy .acme__frame { box-shadow: 0 0 0 4px var(--me-white); }
.acme--navy .acme__quote:focus-visible { outline-color: var(--me-rim); }

/* George 2026-11-12: on a phone the section heads (eyebrow, heading, lead) sit centered, not pushed left */
@media (max-width: 766px) {
  .acme__top { text-align: center; }
  .acme__eyebrow { justify-content: center; }
}

/* client.why */
/* client.why - the licence as a title belt (REDESIGN-4 band 7). Advanced Air's navy band with its 150px corners
   top-left and bottom-right. A belt strap with gold stitching runs across the container; on it the centre plate
   (the shield's arch and five stars as its crown, a gold rim) holds the CSLB number as the band's biggest thing,
   and two side plates hold the record's lines, each ending in a gold name plate for one owner (Jeremy, Alex),
   so the owners are part of the belt. Big faint stars
   from the logo sit in the corners so the navy is never flat. */
.acwy {
  --wy-band: #011E53;
  --wy-navy: #012668;
  --wy-deep: #011A47;
  --wy-royal: #13398A;
  --wy-soft: #1D4E9E;
  --wy-gold: #F2C40F;
  --wy-rim: #FED617;
  --wy-ink: #22324A;
  --wy-mute: #B9C7DD;
  --wy-grey: #56657D;
  --wy-rule: #D3DDEB;
  --wy-white: #FFFFFF;
  --wy-radius: 150px;
  --wy-pad: 100px;
  --wy-h2: 48px;
  --wy-h2-lh: 54px;
  --wy-tail: 0px;
  --wy-ease: cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  padding-bottom: var(--wy-tail);
}
.acwy__band {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  padding: var(--wy-pad) 0;
  border-radius: var(--wy-radius) 0 var(--wy-radius) 0;
  background: var(--wy-band);
  color: var(--wy-white);
}
.acwy__stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  fill: var(--wy-white);
  opacity: 0.05;
  pointer-events: none;
}
.acwy__in {
  position: relative;
  width: 88%;
  max-width: 1200px;
  margin: 0 auto;
}
.acwy__head { max-width: 1040px; margin: 0 auto 75px; text-align: center; }
.acwy__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 12px;
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 17.6px;
  line-height: 25.6px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wy-mute);
}
.acwy__eyebrow::before, .acwy__eyebrow::after { content: none; width: 34px; height: 3px; background: var(--wy-gold); }
.acwy__h2 {
  margin: 0;
  font-family: "Saira", sans-serif;
  font-size: var(--wy-h2);
  line-height: var(--wy-h2-lh);
  font-weight: 900;
  color: var(--wy-white);
}
.acwy__gold { display: block; color: var(--wy-rim); }

/* the belt: strap, two side plates, the centre plate */
.acwy__belt {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px minmax(0, 1fr);
  align-items: center;
  gap: 0;
}
.acwy__strap {
  position: absolute;
  left: -40px;
  right: -40px;
  top: 50%;
  height: 150px;
  margin-top: -60px;
  border-top: 3px dashed var(--wy-gold);
  border-bottom: 3px dashed var(--wy-gold);
  background: var(--wy-deep);
  outline: 8px solid var(--wy-deep);
}
.acwy__side {
  position: relative;
  z-index: 1;
  margin: 10px 0 0;
  padding: 24px 30px;
  border: 4px solid var(--wy-gold);
  background: var(--wy-white);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  transition: transform 0.3s var(--wy-ease);
}
.acwy__side--l { margin-right: -10px; }
.acwy__side--r { margin-left: -10px; }
.acwy__side:hover, .acwy__side:focus-visible { transform: translateY(-6px); }
.acwy__row { padding: 10px 0; border-bottom: 2px solid var(--wy-rule); }
.acwy__row:first-child { padding-top: 0; }
.acwy__row:last-child { padding-bottom: 0; border-bottom: 0; }
.acwy__k {
  margin: 0 0 4px;
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wy-soft);
}
.acwy__v {
  margin: 0;
  font-family: "Saira", sans-serif;
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  color: var(--wy-deep);
}

.acwy__plate { position: relative; z-index: 2; margin: 0; padding-top: 56px; transition: transform 0.4s var(--wy-ease); }
.acwy__plate:hover, .acwy__plate:focus-within { transform: scale(1.03); }
.acwy__crown { position: absolute; top: 0; left: 50%; width: 240px; height: 70px; margin-left: -120px; }
.acwy__arch { fill: #C50103; }
.acwy__crownstars { fill: var(--wy-rim); }
.acwy__face {
  position: relative;
  padding: 34px 30px 38px;
  background: var(--wy-gold);
  clip-path: polygon(30px 0, calc(100% - 30px) 0, 100% 30px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 30px 100%, 0 calc(100% - 30px), 0 30px);
  text-align: center;
}
.acwy__face::before {
  content: "";
  position: absolute;
  inset: 8px;
  background: var(--wy-royal);
  clip-path: polygon(26px 0, calc(100% - 26px) 0, 100% 26px, 100% calc(100% - 26px), calc(100% - 26px) 100%, 26px 100%, 0 calc(100% - 26px), 0 26px);
}
.acwy__board, .acwy__num { position: relative; }
.acwy__board {
  margin: 0 0 6px;
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wy-mute);
}
.acwy__num { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.acwy__cslb {
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 26px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: var(--wy-rim);
}
.acwy__digits {
  font-family: "Saira", sans-serif;
  font-size: 96px;
  line-height: 96px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--wy-white);
}

.acwy__check {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 40px 0 0;
  font-family: "Instrument Sans", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: var(--wy-mute);
}
.acwy__link {
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wy-rim);
  text-decoration: none;
  border-bottom: 3px solid var(--wy-gold);
  padding-bottom: 2px;
  transition: color 0.3s var(--wy-ease);
}
.acwy__link:hover, .acwy__link:focus-visible { color: var(--wy-white); }

/* the owners as the gold foot of each side plate, part of the belt (fix 4, Y3) */
.acwy__side { display: flex; flex-direction: column; align-self: stretch; margin-top: 46px; margin-bottom: 0; }
.acwy__rows { margin: 0 0 20px; }
.acwy__owner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 20px -30px -24px;
  margin-top: auto;
  padding: 16px 30px 20px;
  border-top: 4px solid var(--wy-deep);
  background: #C50103;
}
.acwy__name {
  font-family: "Saira", sans-serif;
  font-size: 34px;
  line-height: 36px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--wy-white);
}
.acwy__role {
  font-family: "Instrument Sans", sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--wy-white);
}

@media (max-width: 1199px) {
  .acwy { --wy-radius: 100px; --wy-h2: 40px; --wy-h2-lh: 46px; }
  .acwy__belt { grid-template-columns: minmax(0, 1fr) 380px minmax(0, 1fr); }
  .acwy__digits { font-size: 76px; line-height: 80px; }
  .acwy__side { padding: 20px; }
  .acwy__owner { margin: auto -20px -20px; padding: 14px 20px 16px; }
  .acwy__rows { margin-bottom: 16px; }
  .acwy__name { font-size: 28px; line-height: 32px; }
  .acwy__v { font-size: 17px; line-height: 22px; }
}
@media (max-width: 978px) {
  .acwy__belt { grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 520px; margin: 0 auto; }
  .acwy__strap { left: 50%; right: auto; top: 0; bottom: 0; width: 150px; height: auto; margin: 0 0 0 -75px; border: 0; border-left: 3px dashed var(--wy-gold); border-right: 3px dashed var(--wy-gold); }
  .acwy__plate { order: -1; }
  .acwy__side--l, .acwy__side--r { margin: 0; }
}
@media (max-width: 766px) {
  .acwy { --wy-radius: 50px; --wy-pad: 75px; --wy-h2: 28px; --wy-h2-lh: 34px; }
  .acwy__head { margin-bottom: 50px; }
  .acwy__eyebrow { font-size: 15.4px; line-height: 22.4px; }
  .acwy__crown { width: 180px; height: 52px; margin-left: -90px; }
  .acwy__plate { padding-top: 42px; }
  .acwy__face { padding: 26px 20px 30px; }
  .acwy__cslb { font-size: 20px; letter-spacing: 6px; }
  .acwy__digits { font-size: 60px; line-height: 64px; }
  .acwy__check { flex-direction: column; gap: 10px; margin: 30px 0 0; }
  .acwy__name { font-size: 26px; line-height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .acwy__side, .acwy__plate, .acwy__link { transition: none; }
  .acwy__side:hover, .acwy__side:focus-visible, .acwy__plate:hover, .acwy__plate:focus-within { transform: none; }
}

/* inner pages (stage 3e): the page's own lines under the belt as four ticked plates, each on a hairline frame with
   a gold tick on navy, its source line under it when the line rests on one */
.acwy__notes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}
.acwy__note {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 20px 20px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-top: 5px solid var(--wy-gold);
  background: rgba(255, 255, 255, 0.08);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.acwy__note:hover,
.acwy__note:focus-within { transform: translateY(-5px); border-color: var(--wy-rim); }
.acwy__tick {
  width: 34px;
  height: 34px;
  padding: 6px;
  background: var(--wy-rim);
  fill: none;
  stroke: var(--wy-deep);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.acwy__notetext {
  margin: 0;
  font-family: "Instrument Sans", sans-serif;
  font-size: 15.5px;
  line-height: 1.5;
  font-weight: 500;
  color: #FFFFFF;
}
.acwy__src {
  margin: auto 0 0;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.35);
  font-family: "Instrument Sans", sans-serif;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--wy-mute);
}
.acwy__srclink { color: #FFFFFF; text-decoration: underline; text-underline-offset: 2px; }
.acwy__srclink:hover,
.acwy__srclink:focus-visible { color: var(--wy-rim); }
@media (max-width: 978px) {
  .acwy__notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 766px) {
  .acwy__notes { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 40px; }
  .acwy__note { flex-direction: row; flex-wrap: wrap; align-items: flex-start; padding: 16px; }
  .acwy__tick { width: 28px; height: 28px; flex: none; }
  .acwy__notetext { flex: 1 1 0%; min-width: 0; font-size: 15px; }
  .acwy__src { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .acwy__note { transition: none; }
  .acwy__note:hover,
  .acwy__note:focus-within { transform: none; }
}

/* inner pages (stage 3e): the why band on the pale ground, so a page never runs two dark bands together (the
   record above it and the navy finale below it are dark). The belt keeps its navy plate and gold; the words turn
   navy, the gold phrase becomes a gold-boxed phrase, the notes white plates with the gold top stroke. */
.acwy--pale .acwy__band { background: #EAF0F8; color: #011A47; }
.acwy--pale .acwy__stars { fill: #011A47; }
.acwy--pale .acwy__eyebrow { color: #013A97; }
.acwy--pale .acwy__h2 { color: #011A47; }
.acwy--pale .acwy__gold { display: table; margin: 0 auto 6px; padding: 0 12px; background: #FED617; color: #011A47; }
.acwy--pale .acwy__check { color: #56657D; }
.acwy--pale .acwy__link { color: #011A47; }
.acwy--pale .acwy__link:hover,
.acwy--pale .acwy__link:focus-visible { color: #013A97; }
.acwy--pale .acwy__note { border-color: #D3DDEB; border-top-color: #F2C40F; background: #FFFFFF; }
.acwy--pale .acwy__note:hover,
.acwy--pale .acwy__note:focus-within { border-color: #011A47; border-top-color: #F2C40F; }
.acwy--pale .acwy__tick { background: #011A47; stroke: #FED617; }
.acwy--pale .acwy__notetext { color: #22324A; }
.acwy--pale .acwy__src { border-top-color: #D3DDEB; color: #56657D; }
.acwy--pale .acwy__srclink { color: #011A47; }
.acwy--pale .acwy__srclink:hover,
.acwy--pale .acwy__srclink:focus-visible { color: #013A97; }

/* B5 (About): under the belt, the record instead of tick cards that repeated it: the two lines with the counties
   each answers, and the cities on the job wall as photo badges (each opens its job once that page is built). */
.acwy__record {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  margin-top: 64px;
  padding-top: 40px;
  border-top: 2px dashed rgba(254, 214, 23, 0.18);
}
.acwy__rk { margin: 0 0 18px; font-family: "Titillium Web", "Saira", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--wy-rim); }
.acwy__lines { display: grid; gap: 16px; align-content: start; }
.acwy__lines .acwy__rk { margin-bottom: 2px; }
.acwy__line {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  border: 2px solid var(--wy-soft);
  border-left: 8px solid var(--wy-rim);
  background: var(--wy-navy);
  color: var(--wy-white);
  text-decoration: none;
  transition: transform 0.3s var(--wy-ease), border-color 0.3s var(--wy-ease);
}
.acwy__line:hover,
.acwy__line:focus-visible { transform: translateX(6px); border-color: var(--wy-rim); }
.acwy__lineloc { font-family: "Titillium Web", "Saira", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--wy-mute); }
.acwy__linenum { font-family: "Saira", sans-serif; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.05; font-weight: 900; white-space: nowrap; }
.acwy__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.acwy__chip { padding: 3px 9px; border: 1px solid var(--wy-soft); font-size: 13px; line-height: 1.3; color: var(--wy-mute); }
.acwy__cities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.acwy__badge {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 6px 12px 6px 6px;
  border: 2px solid var(--wy-soft);
  background: var(--wy-deep);
  color: var(--wy-white);
  text-decoration: none;
}
.acwy__badge--link { transition: transform 0.3s var(--wy-ease), border-color 0.3s var(--wy-ease); }
.acwy__badge--link:hover,
.acwy__badge--link:focus-visible { transform: translateY(-4px); border-color: var(--wy-rim); }
.acwy__bthumb { display: block; width: 56px; height: 56px; overflow: hidden; border: 2px solid var(--wy-rim); }
.acwy__bthumb picture,
.acwy__bthumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.acwy__bname { font-family: "Saira", sans-serif; font-size: 16px; line-height: 1.1; font-weight: 900; text-transform: uppercase; overflow-wrap: anywhere; }
@media (max-width: 978px) {
  .acwy__record { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 766px) {
  .acwy__record { margin-top: 44px; padding-top: 30px; }
  .acwy__cities { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .acwy__badge { grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 5px 8px 5px 5px; }
  .acwy__bthumb { width: 44px; height: 44px; }
  .acwy__bname { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .acwy__line,
  .acwy__badge--link { transition: none; }
  .acwy__line:hover,
  .acwy__line:focus-visible,
  .acwy__badge--link:hover,
  .acwy__badge--link:focus-visible { transform: none; }
}
.acwy__badge--all { border-color: var(--wy-rim); background: var(--wy-rim); color: var(--wy-deep); transition: transform 0.3s var(--wy-ease); }
.acwy__badge--all:hover,
.acwy__badge--all:focus-visible { transform: translateY(-4px); }
.acwy__ballstar { display: grid; place-items: center; width: 56px; height: 56px; background: var(--wy-deep); }
.acwy__ballstar svg { width: 30px; height: 30px; fill: var(--wy-rim); }
@media (max-width: 766px) {
  .acwy__ballstar { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .acwy__badge--all { transition: none; }
  .acwy__badge--all:hover,
  .acwy__badge--all:focus-visible { transform: none; }
}

/* George 2026-11-12: tiny hints of the logo's red */
.acwy__ballstar { background: #C50103; }

/* client.territory */
/* client.territory - where we work (REDESIGN-4 band 8). Advanced Air's areas band (150px corners top-left and
   bottom-right) on the pale break, built round the drawn county map George liked: the Bay Area counties navy,
   the Central Coast gold, Tracy and Coalinga as dots. The map sits in a thick navy frame over an offset gold
   plate; a county lifts and takes a gold outline on hover with a tooltip naming it and its area's line. The two
   area cards are JTC-grade: thick navy border, offset gold plate, a navy head with the ring and star and the area
   in heavy gold caps, a gold stroke under it, the number as the card's biggest line, counties as chips, towns in
   rows with gold markers. Hovering a card lights its counties on the map and the other way round. Big faint
   stars in the empty corners. */
.atr {
  --atr-navy: #011A47;
  --atr-royal: #012668;
  --atr-blue: #013A97;
  --atr-soft: #1D4E9E;
  --atr-gold: #F2C40F;
  --atr-gold-hi: #FED617;
  --atr-pale: #EAF0F8;
  --atr-land: #D3DBE7;
  --atr-ink: #26344A;
  --atr-mute: #56657D;
  --atr-rule: #D3DDEB;
  --atr-white: #FFFFFF;
  --atr-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --atr-caps: "Titillium Web", "Saira", sans-serif;
  position: relative;
  color: var(--atr-ink);
}
.atr__band {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  padding: 100px 0;
  background-color: var(--atr-pale);
  border-top-left-radius: 150px;
  border-bottom-right-radius: 150px;
  overflow: hidden;
}
.atr__stars { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--atr-blue); opacity: 0.06; pointer-events: none; }
.atr__in { position: relative; width: min(88%, 1200px); margin: 0 auto; }
.atr__eyebrow {
  margin: 0;
  font-family: var(--atr-caps);
  font-size: 17.6px;
  line-height: 25.6px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--atr-soft);
}
.atr__eyebrow::before {
  content: none;
  display: inline-block;
  width: 34px;
  height: 12px;
  margin-right: 12px;
  vertical-align: -1px;
  background-color: var(--atr-gold);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.atr__h2 {
  margin: 12px 0 0;
  font-family: "Saira", sans-serif;
  font-size: 48px;
  line-height: 54px;
  font-weight: 900;
  color: var(--atr-navy);
}
.atr__hl { padding: 0 8px; background: var(--atr-gold); }
.atr__intro { max-width: 640px; margin-top: 20px; font-size: 16px; line-height: 28.8px; }
.atr__grid {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  align-items: start;
  gap: 50px;
}
.atr__side { display: flex; flex-direction: column; gap: 40px; }
.atr__cards { display: flex; flex-direction: column; gap: 50px; padding-top: 10px; }

/* the map: navy frame over an offset gold plate */
.atr__map { position: relative; margin: 0 16px 16px 0; }
.atr__mapback {
  position: absolute;
  inset: 16px -16px -16px 16px;
  border-bottom-right-radius: 100px;
  background: #C50103;
}
.atr__mapframe {
  position: relative;
  border: 4px solid var(--atr-navy);
  border-bottom: 0;
  background: var(--atr-white);
  overflow: hidden;
}
.atr__svg { display: block; width: 100%; height: auto; aspect-ratio: 560 / 897; }
.atr__sea { fill: var(--atr-white); }
.atr__land path { fill: var(--atr-land); stroke: var(--atr-white); stroke-width: 1; }
.atr__co path {
  stroke: var(--atr-white);
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s var(--atr-ease), fill 0.3s var(--atr-ease), stroke 0.3s var(--atr-ease);
  cursor: pointer;
}
.atr__co--bay path { fill: var(--atr-royal); }
.atr__co--cc path { fill: #C50103; }
.atr__co path:hover, .atr__co path:focus-visible { transform: translate(-3px, -4px) scale(1.04); stroke: var(--atr-gold-hi); stroke-width: 3; }
.atr__co--cc path:hover, .atr__co--cc path:focus-visible { stroke: var(--atr-navy); fill: #C50103; }
.atr__co--bay path:hover, .atr__co--bay path:focus-visible { fill: var(--atr-blue); }
/* a card in hover or focus lights its counties */
.atr:has(.atr__card--1:hover) .atr__co--bay path, .atr:has(.atr__card--1:focus-within) .atr__co--bay path { fill: var(--atr-blue); stroke: var(--atr-gold-hi); stroke-width: 2.5; }
.atr:has(.atr__card--2:hover) .atr__co--cc path, .atr:has(.atr__card--2:focus-within) .atr__co--cc path { fill: #C50103; stroke: var(--atr-navy); stroke-width: 2.5; }
.atr__dot circle { fill: var(--atr-white); stroke-width: 4; stroke: var(--atr-navy); }
.atr__dot--cc circle { fill: #C50103; }
.atr__dot text { font-family: "Instrument Sans", sans-serif; font-size: 15px; font-weight: 700; fill: var(--atr-navy); }
.atr__tip {
  position: absolute;
  z-index: 3;
  left: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 10px 14px;
  border-left: 6px solid var(--atr-gold);
  background: var(--atr-navy);
  white-space: nowrap;
  pointer-events: none;
}
.atr__tip[hidden] { display: none; }
.atr__tipco { font-family: var(--atr-caps); font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--atr-gold-hi); }
.atr__tipnum { font-family: "Saira", sans-serif; font-size: 20px; line-height: 24px; font-weight: 800; color: var(--atr-white); }

.atr__key {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 4px solid var(--atr-navy);
  background-color: var(--atr-navy);
  border-bottom-right-radius: 100px;
  overflow: hidden;
}
.atr__keyline { display: flex; flex-direction: column; gap: 2px; padding: 16px 20px 18px; }
.atr__keyline--2 { padding-right: 60px; border-left: 2px solid var(--atr-soft); }
.atr__keyarea {
  display: flex;
  align-items: center;
  font-family: var(--atr-caps);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--atr-gold-hi);
}
.atr__keynum { white-space: nowrap; font-family: "Saira", sans-serif; font-size: 22px; line-height: 28px; font-weight: 800; color: var(--atr-white); text-decoration: none; transition: color 0.3s var(--atr-ease); }
.atr__keynum:hover, .atr__keynum:focus-visible { color: var(--atr-gold-hi); }
.atr__swatch { display: none; }

/* the area cards */
.atr__card { position: relative; margin: 0 14px 14px 0; transition: transform 0.3s var(--atr-ease); }
.atr__cardback { position: absolute; inset: 14px -14px -14px 14px; background: #C50103; transition: transform 0.3s var(--atr-ease); }
.atr__cardin { position: relative; border: 4px solid var(--atr-navy); background: var(--atr-white); }
.atr__card:hover, .atr__card:focus-within { transform: translateY(-6px); }
.atr__card:hover .atr__cardback, .atr__card:focus-within .atr__cardback { transform: translate(6px, 6px); }
.atr:has(.atr__co--bay:hover) .atr__card--1 .atr__cardback,
.atr:has(.atr__co--cc:hover) .atr__card--2 .atr__cardback,
.atr:has(.atr__co--bay:focus-visible) .atr__card--1 .atr__cardback,
.atr:has(.atr__co--cc:focus-visible) .atr__card--2 .atr__cardback { transform: translate(6px, 6px); }
.atr__area {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 16px 24px;
  border-bottom: 6px solid var(--atr-gold);
  background: var(--atr-navy);
  font-family: "Saira", sans-serif;
  font-size: 26px;
  line-height: 30px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--atr-gold-hi);
}
.atr__ring { flex: none; width: 44px; height: 44px; transition: transform 0.6s var(--atr-ease); }
.atr__ring svg { display: block; width: 100%; height: 100%; }
.atr__ringline { fill: none; stroke: var(--atr-gold-hi); stroke-width: 6; }
.atr__ringstar { fill: var(--atr-gold-hi); }
.atr__card:hover .atr__ring, .atr__card:focus-within .atr__ring { transform: rotate(72deg); }
.atr__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 24px 24px; }
.atr__num {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  white-space: nowrap;
  color: var(--atr-navy);
  text-decoration: none;
  transition: color 0.3s var(--atr-ease);
}
.atr__num .atr__k { color: var(--atr-soft); }
.atr__phone { font-family: "Saira", sans-serif; font-size: 54px; line-height: 58px; letter-spacing: -0.5px; font-weight: 900; border-bottom: 4px solid var(--atr-gold); }
.atr__num:hover, .atr__num:focus-visible { color: var(--atr-blue); }
.atr__num:focus-visible { outline: 3px solid var(--atr-gold); outline-offset: 4px; }
.atr__lead { margin: 0 0 6px; font-size: 15px; line-height: 24px; color: var(--atr-mute); }
.atr__k {
  margin: 0;
  font-family: var(--atr-caps);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--atr-soft);
}
.atr__k--rule { display: flex; align-items: center; gap: 12px; width: 100%; }
.atr__k--rule::after { content: ""; flex: 1; height: 2px; background: var(--atr-rule); }
.atr__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.atr__chip {
  padding: 6px 12px;
  border: 2px solid var(--atr-navy);
  background: var(--atr-pale);
  font-family: var(--atr-caps);
  font-size: 14px;
  line-height: 17px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--atr-navy);
}
.atr__card--2 .atr__chip { background: #C50103; color: #FFFFFF; }
.atr__cities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 16px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.atr__city { border-bottom: 2px solid var(--atr-rule); }
.atr__cityname, .atr__citylink {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  font-family: var(--atr-caps);
  font-size: 15px;
  line-height: 19px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--atr-navy);
  text-decoration: none;
}
.atr__cityname::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--atr-gold); transform: rotate(45deg); }
.atr__citylink { justify-content: space-between; transition: color 0.3s var(--atr-ease); }
.atr__citylink:hover, .atr__citylink:focus-visible { color: var(--atr-blue); }
.atr__tri { flex: 0 0 auto; width: 10px; height: 12px; fill: currentColor; }
.atr__hub {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 15px 20px;
  background-color: var(--atr-gold);
  color: var(--atr-navy);
  font-family: var(--atr-caps);
  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.3s var(--atr-ease);
}
.atr__hub:hover, .atr__hub:focus-visible { background-color: var(--atr-gold-hi); }
.atr__hub:focus-visible { outline: 3px solid var(--atr-navy); outline-offset: 3px; }

@media (max-width: 1199px) {
  .atr__band { border-top-left-radius: 100px; border-bottom-right-radius: 100px; }
  .atr__cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atr__phone { font-size: 44px; line-height: 48px; }
}
@media (max-width: 978px) {
  .atr__grid { grid-template-columns: 1fr; }
  .atr__map { width: calc(100% - 16px); max-width: 560px; }
  .atr__svg { aspect-ratio: 560 / 700; }
}
@media (max-width: 766px) {
  .atr__band { padding: 75px 0; border-top-left-radius: 50px; border-bottom-right-radius: 50px; }
  .atr__eyebrow { font-size: 15.4px; line-height: 22.4px; }
  .atr__h2 { font-size: 31.5px; line-height: 38px; }
  .atr__intro { font-size: 14px; line-height: 25.2px; }
  .atr__grid, .atr__side { gap: 40px; }
  .atr__cards { gap: 40px; }
  .atr__mapback { border-bottom-right-radius: 50px; inset: 10px -10px -10px 10px; }
  .atr__map { margin: 0 10px 10px 0; width: calc(100% - 10px); }
  .atr__key { border-bottom-right-radius: 50px; grid-template-columns: 1fr; }
  .atr__keyline--2 { border-left: 0; border-top: 2px solid var(--atr-soft); }
  .atr__keynum { font-size: 20px; }
  .atr__card { margin: 0 10px 10px 0; }
  .atr__cardback { inset: 10px -10px -10px 10px; }
  .atr__area { font-size: 20px; line-height: 24px; padding: 14px 16px; }
  .atr__ring { width: 36px; height: 36px; }
  .atr__body { padding: 16px 16px 20px; }
  .atr__phone { font-size: 36px; line-height: 40px; letter-spacing: 0; }
  .atr__lead { font-size: 14px; line-height: 22px; }
  .atr__cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atr__cityname, .atr__citylink { font-size: 14px; }
  .atr__hub { font-size: 14px; line-height: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .atr__co path, .atr__card, .atr__cardback, .atr__ring, .atr__num, .atr__citylink, .atr__hub, .atr__keynum { transition: none; }
  .atr__co path:hover, .atr__co path:focus-visible,
  .atr__card:hover, .atr__card:focus-within,
  .atr__card:hover .atr__cardback, .atr__card:focus-within .atr__cardback,
  .atr__card:hover .atr__ring, .atr__card:focus-within .atr__ring,
  .atr:has(.atr__co--bay:hover) .atr__card--1 .atr__cardback,
  .atr:has(.atr__co--cc:hover) .atr__card--2 .atr__cardback,
  .atr:has(.atr__co--bay:focus-visible) .atr__card--1 .atr__cardback,
  .atr:has(.atr__co--cc:focus-visible) .atr__card--2 .atr__cardback { transform: none; }
}

/* M2: on service and job pages the full map gives way to a slim strip: each line as one white row ruled in navy
   with a gold bar, its own mini map, the area, its county chips and the number big at the end. Hover slides the
   row. Light on purpose: it sits between the pale rule band and the navy contact band. */
.atr__sband { position: relative; max-width: 1600px; margin: 0 auto; padding: 64px 0 70px; background: var(--atr-white); overflow: hidden; }
.atr__sband::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 38%; background: repeating-linear-gradient(-45deg, rgba(1, 26, 71, 0.07) 0 2px, transparent 2px 14px); pointer-events: none; }
.atr__sin { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: center; width: min(88%, 1200px); margin: 0 auto; }
.atr__sh2 { color: var(--atr-navy); }
.atr__sintro { margin: 16px 0 0; font-size: 16px; line-height: 1.5; color: var(--atr-navy); }
.atr__srows { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.atr__srow {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: 14px 22px 14px 14px;
  border: 2px solid var(--atr-navy);
  border-left: 8px solid var(--atr-gold);
  background: var(--atr-white);
  box-shadow: 10px 10px 0 var(--atr-navy);
  transition: transform 0.3s var(--atr-ease);
}
.atr__srow:hover,
.atr__srow:focus-within { transform: translateX(6px); }
.atr__smap { display: block; width: 84px; height: auto; border: 2px solid var(--atr-soft); }
.atr__stext { display: grid; gap: 8px; min-width: 0; }
.atr__sarea { margin: 0; font-family: "Saira", sans-serif; font-size: 22px; line-height: 1.1; font-weight: 900; text-transform: uppercase; color: var(--atr-navy); }
.atr__salink { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.atr__schips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.atr__schip { padding: 2px 8px; border: 1px solid var(--atr-navy); font-size: 12.5px; line-height: 1.35; color: var(--atr-navy); }
.atr__snum { display: grid; gap: 2px; justify-items: end; color: var(--atr-navy); text-decoration: none; }
.atr__snum .atr__k { color: var(--atr-navy); }
.atr__sphone { font-family: "Saira", sans-serif; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.05; font-weight: 900; white-space: nowrap; }
.atr__snum:hover .atr__sphone,
.atr__snum:focus-visible .atr__sphone { text-decoration: underline; text-decoration-color: var(--atr-gold); text-decoration-thickness: 4px; text-underline-offset: 6px; }
@media (max-width: 978px) {
  .atr__sin { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}
@media (max-width: 766px) {
  .atr__sband { padding: 56px 0 60px; }
  .atr__srow { grid-template-columns: 60px minmax(0, 1fr); gap: 14px; padding: 14px; margin-right: 8px; box-shadow: 8px 8px 0 var(--atr-navy); }
  .atr__smap { width: 60px; }
  .atr__snum { grid-column: 1 / -1; justify-items: start; }
  .atr__sphone { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .atr__srow { transition: none; }
  .atr__srow:hover,
  .atr__srow:focus-within { transform: none; }
}

/* George 2026-11-12: on a phone the section heads (eyebrow, heading, lead) sit centered, not pushed left */
@media (max-width: 766px) {
  .atr__head { text-align: center; }
  .atr__eyebrow { justify-content: center; }
  .atr__head > * { margin-left: auto; margin-right: auto; }
}

/* client.contact */
/* client.contact - the finale (REDESIGN-4 band 9: contact and closing merged). One navy band with Advanced Air's
   150px corners top-right and bottom-left, the bottom corner sitting on the footer's navy. Left: three of the client's own job
   photos overlapping, each tilted a few degrees in a white frame with its city on a tag, Advanced Air's disc
   badge on the seam; they straighten and lift on hover. Right: the closing heading with one gold phrase, both
   area lines as big call tiles (the band's biggest type), the office line and hours small, then the quote card
   at JTC's craft: offset gold plate, a navy head with the ring and star, a gold stroke, numbered rows, the email
   button with the privacy line beside it. The band's own word runs huge behind in outline. No empty area under
   the button: the card closes the column level with the collage. */
.acq {
  --q-band: #011E53;
  --q-navy: #012668;
  --q-deep: #011A47;
  --q-soft: #1D4E9E;
  --q-gold: #F2C40F;
  --q-rim: #FED617;
  --q-pale: #EAF0F8;
  --q-ring: #FDF3C8;
  --q-ink: #22324A;
  --q-mute: #56657D;
  --q-tint: #B9C7DD;
  --q-rule: #D3DDEB;
  --q-white: #FFFFFF;
  --q-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --q-foot: #011A47;
  position: relative;
  /* the band's round bottom corner lands on the footer's navy (fix 4, Y1): no white strip between them */
  background: linear-gradient(to bottom, transparent calc(100% - 150px), var(--q-foot) calc(100% - 150px));
}
.acq__band {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  padding: 100px 0;
  border-radius: 0 150px 0 150px;
  background: var(--q-band);
  color: var(--q-white);
  overflow: hidden;
}
.acq__ghost {
  position: absolute;
  top: -40px;
  right: -30px;
  margin: 0;
  font-family: "Saira", sans-serif;
  font-size: 360px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -6px;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 3px rgba(254, 214, 23, 0.12);
  pointer-events: none;
  user-select: none;
}
.acq__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 75px;
  width: 88%;
  max-width: 1200px;
  margin: 0 auto;
}

/* the collage */
.acq__collage { position: relative; min-height: 820px; }
.acq__shot {
  position: absolute;
  margin: 0;
  transition: transform 0.4s var(--q-ease);
}
.acq__shot--1 { z-index: 1; top: 10px; left: 0; width: 88%; transform: rotate(-3deg); }
.acq__shot--2 { z-index: 2; top: 280px; right: 0; width: 56%; transform: rotate(3deg); }
.acq__shot--3 { z-index: 3; top: 560px; left: 4%; width: 54%; transform: rotate(-2deg); }
.acq__frame { border: 8px solid var(--q-white); background: var(--q-white); overflow: hidden; }
.acq__shot--1 .acq__frame { aspect-ratio: 4 / 3; }
.acq__shot--2 .acq__frame { aspect-ratio: 3 / 4; }
.acq__shot--3 .acq__frame { aspect-ratio: 1 / 1; }
.acq__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--q-ease); }
.acq__shot:hover, .acq__shot:focus-within { z-index: 4; transform: rotate(0deg) translateY(-8px); }
.acq__shot:hover .acq__img, .acq__shot:focus-within .acq__img { transform: scale(1.05); }
.acq__tag {
  position: absolute;
  left: -10px;
  bottom: 18px;
  padding: 8px 14px;
  border-left: 6px solid var(--q-gold);
  background: var(--q-deep);
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--q-rim);
}
.acq__shot--2 .acq__tag { left: auto; right: -10px; bottom: auto; top: 18px; border-left: 0; border-right: 6px solid var(--q-gold); }
/* the tags stay level while their photos tilt */
.acq__shot--1 .acq__tag { transform: rotate(3deg); }
.acq__shot--2 .acq__tag { transform: rotate(-3deg); }
.acq__shot--3 .acq__tag { transform: rotate(2deg); }
.acq__badge { position: absolute; z-index: 5; top: 230px; left: 40%; width: 100px; height: 100px; }
.acq__rim { fill: var(--q-white); }
.acq__ring { fill: var(--q-ring); }
.acq__disc { fill: var(--q-gold); }
.acq__star { fill: var(--q-deep); }

/* the closing heading and the two area lines */
.acq__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 17.6px;
  line-height: 25.6px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--q-tint);
}
.acq__eyebrow::before { content: none; width: 34px; height: 3px; background: var(--q-gold); }
.acq__h2 {
  margin: 0 0 30px;
  font-family: "Saira", sans-serif;
  font-size: 44px;
  line-height: 50px;
  font-weight: 900;
  color: var(--q-white);
}
.acq__gold { display: block; color: var(--q-rim); }
.acq__calls { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0; padding: 0; list-style: none; }
.acq__call {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 20px 20px;
  min-width: 0;
  border-bottom: 6px solid var(--q-gold);
  background: var(--q-white);
  color: var(--q-deep);
  text-decoration: none;
  transition: transform 0.3s var(--q-ease), background-color 0.3s var(--q-ease);
}
.acq__call:hover, .acq__call:focus-visible { transform: translateY(-6px); background: var(--q-rim); }
.acq__call:focus-visible { outline: 3px solid var(--q-white); outline-offset: 3px; }
.acq__loc {
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--q-soft);
}
.acq__phone { font-family: "Saira", sans-serif; font-size: 36px; line-height: 42px; font-weight: 900; white-space: nowrap; }
.acq__towns { font-family: "Instrument Sans", sans-serif; font-size: 14px; line-height: 20px; color: var(--q-mute); }
.acq__callic { position: absolute; top: 16px; right: 16px; width: 22px; height: 22px; fill: var(--q-gold); }
.acq__call:hover .acq__callic, .acq__call:focus-visible .acq__callic { fill: var(--q-deep); }
.acq__more {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 30px;
  margin: 18px 0 40px;
  font-family: "Instrument Sans", sans-serif;
  font-size: 15px;
  line-height: 22px;
  color: var(--q-tint);
}
.acq__morek {
  margin-right: 6px;
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--q-rim);
}
.acq__hq { color: var(--q-white); font-weight: 700; text-decoration: none; transition: color 0.3s var(--q-ease); }
.acq__hq:hover, .acq__hq:focus-visible { color: var(--q-rim); }

/* the quote card */
.acq__card { position: relative; margin: 0 14px 14px 0; }
.acq__cardback { position: absolute; inset: 14px -14px -14px 14px; background: #C50103; }
.acq__cardin { position: relative; border: 4px solid var(--q-white); background: var(--q-white); color: var(--q-ink); }
.acq__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 6px solid var(--q-gold);
  background: var(--q-navy);
}
.acq__ringic { flex: none; width: 50px; height: 50px; transition: transform 0.6s var(--q-ease); }
.acq__ringic svg { display: block; width: 100%; height: 100%; }
.acq__ringline { fill: none; stroke: var(--q-rim); stroke-width: 6; }
.acq__ringstar { fill: var(--q-rim); }
.acq__card:hover .acq__ringic, .acq__card:focus-within .acq__ringic { transform: rotate(72deg); }
.acq__cardeyebrow {
  margin: 0 0 2px;
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--q-tint);
}
.acq__h3 {
  margin: 0;
  font-family: "Saira", sans-serif;
  font-size: 30px;
  line-height: 34px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--q-rim);
}
.acq__body { padding: 20px 24px 24px; }
.acq__wlead { margin: 0 0 4px; font-family: "Instrument Sans", sans-serif; font-size: 14px; line-height: 20px; color: var(--q-mute); }
.acq__items { margin: 0 0 22px; padding: 0; list-style: none; counter-reset: acqn; }
.acq__n::before { counter-increment: acqn; content: counter(acqn); }
.acq__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 2px solid var(--q-rule);
}
.acq__n {
  font-family: "Saira", sans-serif;
  font-size: 44px;
  line-height: 0.9;
  font-weight: 900;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 2px var(--q-navy);
}
.acq__it {
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--q-deep);
}
.acq__send { display: flex; align-items: center; gap: 20px; }
.acq__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  background: var(--q-gold);
  color: var(--q-deep);
  text-decoration: none;
  transition: background-color 0.3s var(--q-ease);
}
.acq__btnlabel {
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.acq__arrow { width: 16px; height: 12px; fill: currentColor; transition: transform 0.3s var(--q-ease); }
.acq__btn:hover, .acq__btn:focus-visible { background: var(--q-rim); }
.acq__btn:hover .acq__arrow, .acq__btn:focus-visible .acq__arrow { transform: translateX(6px); }
.acq__btn:focus-visible { outline: 3px solid var(--q-deep); outline-offset: 3px; }
.acq__sendside { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.acq__mail { font-family: "Saira", sans-serif; font-size: 17px; line-height: 22px; font-weight: 800; color: var(--q-deep); overflow-wrap: anywhere; }
.acq__mail:hover, .acq__mail:focus-visible { color: var(--q-soft); }
.acq__privacy { margin: 0; font-family: "Instrument Sans", sans-serif; font-size: 13px; line-height: 18px; color: var(--q-mute); }
.acq__plink { color: var(--q-soft); text-decoration: underline; text-underline-offset: 2px; }
.acq__plink:hover, .acq__plink:focus-visible { color: var(--q-deep); }

@media (max-width: 1199px) {
  .acq__band { border-radius: 0 100px 0 100px; }
  .acq__in { gap: 50px; }
  .acq__h2 { font-size: 40px; line-height: 46px; }
  .acq__phone { font-size: 30px; line-height: 36px; }
  .acq__ghost { font-size: 260px; }
}
@media (max-width: 978px) {
  .acq__in { grid-template-columns: minmax(0, 1fr); }
  .acq__collage { order: 2; min-height: 0; height: 640px; max-width: 560px; width: 100%; justify-self: center; }
  .acq__shot--2 { top: 220px; }
  .acq__shot--3 { top: 400px; }
}
@media (max-width: 766px) {
  .acq__band { padding: 75px 0; border-radius: 0 50px 0 50px; }
  .acq__ghost { top: -10px; right: -16px; font-size: 150px; letter-spacing: -2px; }
  .acq__eyebrow { font-size: 15.4px; line-height: 22.4px; }
  .acq__h2 { font-size: 31.5px; line-height: 37px; margin-bottom: 24px; }
  .acq__calls { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .acq__phone { font-size: 30px; line-height: 36px; }
  .acq__more { flex-direction: column; margin-bottom: 30px; }
  .acq__card { margin: 0 10px 10px 0; }
  .acq__cardback { inset: 10px -10px -10px 10px; }
  .acq__head { padding: 14px 16px; gap: 12px; }
  .acq__ringic { width: 40px; height: 40px; }
  .acq__h3 { font-size: 22px; line-height: 26px; }
  .acq__body { padding: 16px 16px 20px; }
  .acq__item { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
  .acq__n { font-size: 34px; }
  .acq__it { font-size: 14px; line-height: 19px; }
  .acq__send { flex-direction: column; align-items: stretch; gap: 14px; }
  .acq__btn { justify-content: center; }
  .acq__btnlabel { font-size: 14px; }
  .acq__collage { height: 470px; }
  .acq__shot--1 { width: 86%; }
  .acq__shot--2 { top: 170px; width: 52%; }
  .acq__shot--3 { top: 270px; width: 50%; left: 2%; }
  .acq__frame { border-width: 6px; }
  .acq__tag { font-size: 12px; padding: 6px 10px; letter-spacing: 1.5px; }
  .acq__badge { top: 150px; left: 36%; width: 80px; height: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .acq__shot, .acq__img, .acq__call, .acq__ringic, .acq__btn, .acq__arrow, .acq__hq { transition: none; }
  .acq__shot:hover .acq__img, .acq__shot:focus-within .acq__img,
  .acq__call:hover, .acq__call:focus-visible,
  .acq__card:hover .acq__ringic, .acq__card:focus-within .acq__ringic,
  .acq__btn:hover .acq__arrow, .acq__btn:focus-visible .acq__arrow { transform: none; }
  .acq__shot--1:hover, .acq__shot--1:focus-within { transform: rotate(-3deg); }
  .acq__shot--2:hover, .acq__shot--2:focus-within { transform: rotate(3deg); }
  .acq__shot--3:hover, .acq__shot--3:focus-within { transform: rotate(-2deg); }
}

/* the contact page's form (stage 3e, Netlify Forms): the quote card takes the form in place of the email list,
   at the same craft: square fields with a navy hairline that turns to a gold stroke on focus, the label in navy
   caps, "Required" small and soft, the unticked texting box as a gold-edged tile, the send button and the privacy
   line beside it, outside any label */
.acq__flead { margin: 0 0 18px; font-family: "Instrument Sans", sans-serif; font-size: 15px; line-height: 1.5; color: var(--q-ink); }
.acq__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; margin: 0 0 18px; }
.acq__field { display: grid; gap: 6px; min-width: 0; }
.acq__field--wide { grid-column: 1 / -1; }
.acq__label {
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--q-deep);
}
.acq__need {
  margin-left: 6px;
  font-family: "Instrument Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--q-mute);
}
.acq__input {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 2px solid var(--q-tint);
  border-left: 5px solid var(--q-navy);
  border-radius: 0;
  background: var(--q-white);
  font-family: "Instrument Sans", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: var(--q-ink);
  transition: border-color 0.25s var(--q-ease), background-color 0.25s var(--q-ease);
}
.acq__area { min-height: 110px; resize: vertical; }
.acq__input:hover { border-color: var(--q-soft); }
.acq__input:focus-visible { outline: 3px solid var(--q-rim); outline-offset: 1px; border-color: var(--q-navy); background: var(--q-pale); }
.acq__ok {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  padding: 10px 16px 10px 12px;
  border-left: 5px solid var(--q-gold);
  background: var(--q-pale);
  cursor: pointer;
}
.acq__box { width: 22px; height: 22px; margin: 0; accent-color: var(--q-navy); }
.acq__box:focus-visible { outline: 3px solid var(--q-navy); outline-offset: 2px; }
.acq__oktext {
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--q-deep);
}
.acq__form .acq__btn { border: 0; cursor: pointer; }
@media (max-width: 766px) {
  .acq__fields { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .acq__ok { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .acq__input { transition: none; }
}

/* on a page where the finale is not between dark bands (the about and contact pages) it takes the pale or the
   gold ground by the page's data. On the contact page the finale follows the navy page hero and comes before the pale territory band, not the
   footer: it takes the pale ground (two dark bands never run together), navy words with the gold-boxed phrase, and
   no navy foot behind its lower corner */
.acq--lead { background: none; }
.acq--pale .acq__band { background: var(--q-pale); color: var(--q-deep); }
.acq--gold .acq__band { background: var(--q-gold); color: var(--q-deep); }
.acq--pale .acq__ghost { -webkit-text-stroke-color: rgba(1, 38, 104, 0.09); }
.acq--gold .acq__ghost { -webkit-text-stroke-color: rgba(1, 26, 71, 0.11); }
.acq--lead .acq__eyebrow { color: #013A97; }
.acq--gold .acq__eyebrow { color: var(--q-deep); }
.acq--gold .acq__eyebrow::before { background: var(--q-deep); }
.acq--lead .acq__h2 { color: var(--q-deep); }
.acq--lead .acq__gold { display: table; margin-top: 4px; padding: 0 10px; background: var(--q-rim); color: var(--q-deep); }
.acq--lead .acq__call { border: 2px solid var(--q-rule); border-bottom: 6px solid var(--q-gold); }
.acq--lead .acq__more { color: var(--q-mute); }
.acq--lead .acq__morek { color: #013A97; }
.acq--gold .acq__more,
.acq--gold .acq__morek { color: var(--q-deep); }
.acq--gold .acq__cardback { background: var(--q-deep); }
.acq--gold .acq__gold { background: var(--q-white); color: var(--q-deep); }
.acq--gold .acq__call { border-color: var(--q-white); border-bottom-color: var(--q-deep); }
.acq--lead .acq__hq { color: var(--q-deep); }
.acq--lead .acq__hq:hover,
.acq--lead .acq__hq:focus-visible { color: #013A97; }

/* B7: on the Contact page the left column is the page's own body: both area lines with their mini maps and the
   counties each answers, then the hours, the main line and the license. The form sits beside it. */
.acq__panel { display: flex; flex-direction: column; gap: 22px; }
.acq__pline {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 20px 22px;
  border-left: 8px solid var(--q-rim);
  background: var(--q-deep);
  box-shadow: 14px 14px 0 var(--q-navy);
  transition: transform 0.35s var(--q-ease);
}
.acq__pline:hover,
.acq__pline:focus-within { transform: translate(-3px, -4px); }
.acq__pmap { display: block; width: 96px; height: auto; border: 2px solid var(--q-soft); }
.acq__ptext { display: grid; gap: 4px; min-width: 0; }
.acq__ploc { margin: 0; font-family: "Titillium Web", "Saira", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--q-rim); }
.acq__pphone { font-family: "Saira", sans-serif; font-size: clamp(26px, 2.3vw, 33px); line-height: 1.05; font-weight: 900; color: var(--q-white); text-decoration: none; white-space: nowrap; }
.acq__pphone:hover,
.acq__pphone:focus-visible { color: var(--q-rim); }
.acq__pcovers { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--q-tint); }
.acq__pfacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; margin: 6px 0 0; padding: 18px 0 0; border-top: 2px dashed rgba(1, 26, 71, 0.55); }
.acq__pfact { display: grid; gap: 4px; margin: 0; }
.acq__pfact--wide { grid-column: 1 / -1; grid-template-columns: 26px minmax(0, 1fr); align-items: start; gap: 10px; }
.acq__pfact dt { margin: 0; }
.acq__pfact dd { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 600; color: var(--q-deep); }
.acq__pstar { width: 26px; height: 26px; fill: var(--q-deep); }
.acq--panel .acq__card { margin-top: 28px; }
@media (max-width: 978px) {
  .acq__panel { order: 2; }
}
@media (max-width: 766px) {
  .acq__pline { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 16px; box-shadow: 8px 8px 0 var(--q-navy); }
  .acq__pmap { width: 72px; }
  .acq__pphone { font-size: 28px; }
  .acq__pfacts { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .acq__pline { transition: none; }
  .acq__pline:hover,
  .acq__pline:focus-within { transform: none; }
}
.acq__pphoto { position: relative; flex: 1 1 auto; min-height: 220px; margin: 6px 14px 14px 0; border: 8px solid var(--q-white); box-shadow: 14px 14px 0 var(--q-deep); transform: rotate(-1.5deg); }
.acq__pphoto picture { position: absolute; inset: 0; display: block; }
.acq__pimg { display: block; width: 100%; height: 100%; object-fit: cover; }
.acq__ptag { transform: rotate(1.5deg); }
@media (max-width: 978px) {
  .acq__pphoto { flex: none; height: 300px; }
}

/* George 2026-11-12: on a phone the section heads (eyebrow, heading, lead) sit centered, not pushed left */
@media (max-width: 766px) {
  .acq__eyebrow, .acq__h2, .acq__wlead, .acq__flead { text-align: center; justify-content: center; }
}

/* George 2026-11-12: tiny hints of the logo's red */
.acq__pstar { fill: #C50103; }

/* client.footer */
/* client.footer - (redesign 4: the logo bigger, the logo's stars faint behind) advancedair.footer (its measured style, unchanged) with Air Champs' content: the navy
   band, the shield, the line about the business, three link columns under CAPS gold headings in the logo's
   block caps (an entry links only once its page is built, plain body text until then), Advanced Air's action
   bar (square quote button, "Or call:", the two labelled area numbers), the main line and the email;
   on the right Advanced Air's white panel with one tab per area, each holding that area's number, the
   counties it covers and the hours; the CSLB license line under it. The active tab is white with blue
   caps, the other gold with navy caps, so no gold text sits on white. */
.acf .acf__cols { margin: 0; }
.acf .acf__col { margin: 0; }
.acf__blurb { color: var(--white); }
/* an entry whose page is not built yet is plain body text (B2): the body role, not the link role, no hover */
.acf .acf__plain { color: var(--white); }
.acf__mail .ft__link { color: var(--white); }
.acf__mail:hover .ft__link,
.acf__mail:focus-visible .ft__link { color: var(--primary); }
.acf .ft__heading { color: var(--primary); }
.acf .ft__menu a:hover .ft__link,
.acf .ft__menu a:focus-visible .ft__link { color: var(--primary); }

.acf__tab {
  border: 0;
  cursor: pointer;
}
.acf .acf__tab[aria-selected="false"] { background: var(--primary); }
.acf .acf__tabtext { color: var(--dark-soft); }
.acf .acf__tab[aria-selected="false"] .acf__tabtext { color: var(--dark); }
.acf .acf__tab:hover .acf__tabtext,
.acf .acf__tab:focus-visible .acf__tabtext { color: var(--dark); }
.acf .acf__ic svg { fill: var(--dark-soft); }
.acf__panel[hidden] { display: none; }
/* flat (A7): no drop shadow on the area panel */
.acf .acf__panel { box-shadow: none; }
.acf__covers,
.acf__hours { color: var(--ink); }
.acf__license { color: var(--white); }
.acf__check {
  color: var(--primary);
  text-decoration: underline;
}
.acf__check:hover,
.acf__check:focus-visible { color: var(--white); }

/* The call bar in Advanced Air's form (REVIEW-2-FIXES A1): the base's own action bar, flat white on the navy:
   the square gold "ASK FOR A QUOTE" button, "Or call:", then the two area numbers side by side, each a CAPS
   area label over a bold number; the main line (HQ) small under it, beside the email. */
.acf .acf__bar {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--sys-space-15) var(--sys-space-19);
  width: fit-content;
  max-width: 100%;
  padding: var(--sys-space-19);
}
.acf .acf__quote { color: var(--dark); }
.acf .acf__loc { color: var(--dark-soft); }
.acf__more {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sys-space-10) var(--sys-space-25);
}
.acf__hq { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sys-space-10); }
.acf .acf__hqlabel { color: var(--primary); }
.acf__hqnum { white-space: nowrap; }
.acf__hq:hover .acf__hqnum,
.acf__hq:focus-visible .acf__hqnum { color: var(--primary); }
.ft__phone-text { white-space: nowrap; }
/* an entry whose page is not built yet keeps a link's box, so the list keeps its rhythm */
.acf .acf__item { display: flex; align-items: center; padding: var(--sys-space-12) 0; }

/* Phone (G6): a first-class layout, not a collapse. Everything starts on the left; the link columns
   stay, two across under their CAPS heads; the two tabs sit side by side over the panel. */
@media (max-width: 978px) {
  .acf .acf__tabs .ft__tablist { flex-direction: row; }
}
@media (max-width: 766px) {
  .acf .ft__inner { align-items: flex-start; }
  .acf .ft__cols { display: block; }
  .acf .acf__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sys-space-19); }
  .acf .acf__bar { width: 100%; }
  .acf .acf__quote { flex-basis: 100%; }
  .acf .acf__or { flex-basis: 100%; }
  .acf .ft__license { text-align: left; }
  .acf .acf__tab { margin: 0 var(--sys-space-10) 0 0; padding: var(--ft-tab-pad-y) var(--sys-space-13); }
  .acf .acf__tab:last-child { margin-right: 0; }
}

/* Redesign 4 (band 10): the shield bigger, the logo's stars faint behind the navy so it is never flat */
.acf { position: relative; overflow: hidden; }
.acf__stars--phone { display: none; }
.acf__stars { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--mo-brand-1); pointer-events: none; }
.acf .ft__inner { position: relative; }
.acf .ft__logo img { max-width: 100%; max-height: none; }

/* Round 5: no empty navy beside the logo. The shield heads the left column (logo, line, call bar, main line and
   email) and the area card heads the right, so the card's tabs line up with the top of the logo; the three link
   columns run the full width under both, over a thin royal rule. */
.acf .ft__left { gap: var(--sys-space-19); }
.acf .acf__links {
  padding-top: var(--sys-space-31);
  border-top: var(--sys-border-1) var(--mo-brand-1);
}
.acf .acf__links .acf__cols { justify-content: flex-start; }

/* George 2026-11-12: on a phone the whole footer sits centered (the shield, the words, the call bar, the card,
   the link columns), and the logo's faint stars sit on the middle line: a second, phone-only star layer with both stars on the
   viewBox's middle (x 50), which "slice" keeps centered at any phone width. */
@media (max-width: 766px) {
  .acf .ft__inner,
  .acf .ft__rowin,
  .acf .ft__left,
  .acf .ft__side { align-items: center; text-align: center; }
  .acf .ft__logo { display: block; margin-inline: auto; }
  .acf .acf__bar,
  .acf .acf__nums,
  .acf__more,
  .acf__hq { justify-content: center; }
  .acf .ft__tablist { justify-content: center; }
  .acf .ft__card { align-items: center; }
  .acf .ft__card,
  .acf .ft__card > * { text-align: center; }
  .acf .ft__card .ft__phone,
  .acf .ft__card .ft__addr { display: flex; justify-content: center; }
  .acf .ft__license { text-align: center; }
  .acf .acf__links .acf__cols { justify-items: center; text-align: center; }
  .acf .acf__links .acf__cols > :last-child { grid-column: 1 / -1; }
  .acf .acf__item,
  .acf .ft__menu a { justify-content: center; }
  .acf__stars { display: none; }
  .acf .acf__stars--phone { display: block; }
}

/* client.copyright */
/* client.copyright - advancedair.copyright's blue strip (its measured style): the name and year with the
   credit, and the Privacy Policy link on every page. On a phone, a call bar fixed to the foot of the screen
   holds both area lines (Bay Area on the gold, Central Coast on the navy), so the right number is always in
   reach; the strip pads its foot so the bar never covers it. On the homepage it tucks away only while the
   hero's own two call buttons are on screen; elsewhere while the page sits at its top (section.js); without the
   script it simply shows. */
.acc .cr__legal a { text-decoration: underline; }
.acc__bar { display: none; }

@media (max-width: 766px) {
  .acc { padding-bottom: var(--sys-space-41); }
  .acc__bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
  }
  .acc__bar.is-tucked { display: none; }
  .acc__call {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    align-items: center;
    padding: var(--sys-space-10) var(--sys-space-8);
    background: var(--primary);
    color: var(--dark);
  }
  .acc__call--2 {
    background: var(--dark);
    color: var(--white);
  }
  .acc .acc__area { color: inherit; }
  .acc .acc__num { color: inherit; }
  .acc__call:focus-visible { outline-offset: calc(0px - var(--sys-space-4)); }
}

/* George 2026-11-12: the strip's words centered on a phone, like the footer above it */
@media (max-width: 766px) {
  .acc { text-align: center; }
  .acc > *, .acc [class*="cr__"] { justify-content: center; align-items: center; }
}

/* client.privacy */
/* client.privacy - the inner pages' type-led hero band (client.page-hero's classes, whose sheet is on
   every page), then the policy on white in a readable column: section headings in the display face
   (Saira) at the body bands' heading weight, each led by the logo's gold slanted tick; sub-headings in
   Instrument Sans, a clear step smaller; links in the logo's blue. */
.acv { background: #FFFFFF; color: #304453; padding: 90px 0 100px; }
.acv__in { max-width: 820px; margin: 0 auto; padding: 0 40px; font-family: "Instrument Sans", sans-serif; }
.acv__in > section:first-child .r-h3 { margin-top: 0; }
.acv .r-h3 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 56px 0 18px;
  font-family: "Saira", sans-serif;
  font-size: 36px;
  line-height: 1.15;
  font-weight: 900;
  color: #011A47;
}
.acv .r-h3::before {
  content: "";
  flex: none;
  width: 30px;
  height: 10px;
  background: #F2C40F;
  transform: skewX(-24deg);
}
.acv .r-feat__title { margin: 30px 0 10px; font-family: "Instrument Sans", sans-serif; font-size: 21px; line-height: 1.4; font-weight: 700; color: #011A47; }
.acv .r-p { margin: 0 0 15px; font-family: "Instrument Sans", sans-serif; color: #304453; }
/* round 2 design check: the policy's lists read as loose paragraphs; a gold slanted tick (the headings' own mark, smaller) leads each item */
.acv ul { margin: 0 0 18px; padding: 0; list-style: none; }
.acv ul > li { position: relative; margin: 0 0 8px; padding-left: 26px; }
.acv ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 12px;
  height: 5px;
  background: #F2C40F;
  transform: skewX(-24deg);
}
.acv a { color: #013A97; text-decoration: underline; }
.acv a:hover,
.acv a:focus-visible { color: #011A47; }
@media (max-width: 766px) {
  .acv { padding: 60px 0 75px; }
  .acv__in { padding: 0 20px; }
  .acv .r-h3 { gap: 12px; margin-top: 44px; font-size: 27px; }
  .acv .r-h3::before { width: 22px; height: 8px; }
  .acv .r-feat__title { font-size: 18px; }
}

/* client.notfound */
/* client.notfound - the not-found page built as a real page in Advanced Air's system. The top is a navy band
   with the hero's bottom-right 200px corner: a left-aligned short line, Advanced Air's action bar (square gold quote
   button, "Or call:", the two labelled area numbers, the main line small; REVIEW-2-FIXES A1); beside it a framed Santa Clara job photo with its city tag breaks 75px out of the band's bottom,
   Advanced Air's disc badge (SVG circles, the logo's star) on its corner. Under it on white, the way back:
   the home page's bands as a numbered list of links under gold rules, and the home button. */
.acn {
  --acn-navy: var(--mo-dark);
  --acn-blue: #013A97; /* the shield's royal blue */
  --acn-gold: var(--mo-brand-2-band);
  --acn-gold-hi: var(--mo-brand-2);
  --acn-gold-pale: #FDF3C8; /* the star gold, almost white: the badge ring */
  --acn-pale: var(--mo-light-break);
  --acn-ink: #26344A;
  --acn-white: #FFFFFF;
  --acn-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --acn-caps: "Titillium Web", var(--mo-face); /* Advanced Air's CAPS label face (A4) */
  background-color: var(--acn-white);
  color: var(--acn-ink);
}
.acn__top {
  padding: 100px 0 0;
  background-color: var(--acn-navy);
  color: var(--acn-white);
  border-bottom-right-radius: 200px;
}
.acn__in {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 50px;
  align-items: end;
  width: min(88%, 1200px);
  margin: 0 auto;
}
.acn__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 100px;
}
.acn__kicker {
  font-family: var(--acn-caps);
  font-size: 17.6px;
  line-height: 25.6px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--acn-gold-hi);
}
.acn__kicker::before {
  content: none;
  display: inline-block;
  width: 30px;
  height: 4px;
  margin-right: 10px;
  vertical-align: middle;
  background-color: var(--acn-gold-hi);
}
.acn__h1 {
  font-family: var(--mo-face);
  font-size: 64px;
  line-height: 70.4px;
  font-weight: 800;
  color: var(--acn-white);
}
.acn__body { max-width: 560px; font-size: 17.6px; line-height: 28.8px; color: #D5DCE8; }
/* Advanced Air's action bar (REVIEW-2-FIXES A1): flat white, a square gold button, "Or call:", the two area
   numbers side by side (CAPS label over a bold number, a 1px rule between), the main line small after. */
.acn__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px 20px;
  margin-top: 10px;
  padding: 20px;
  background-color: var(--acn-white);
  color: var(--acn-ink);
}
.acn__btn, .acn__area, .acn__hqlabel {
  font-family: var(--acn-caps);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.acn__btn {
  padding: 15px 20px;
  background-color: var(--acn-gold);
  color: var(--acn-navy);
  font-size: 16px;
  line-height: 16px;
  white-space: nowrap;
  transition: background-color 0.3s var(--acn-ease), color 0.3s var(--acn-ease);
}
.acn__btn:hover, .acn__btn:focus-visible { background-color: var(--acn-navy); color: var(--acn-white); }
.acn__btn:focus-visible { outline: 3px solid var(--acn-gold-hi); outline-offset: 3px; }
.acn__or { font-size: 16px; line-height: 20px; font-weight: 700; }
.acn__calls { display: flex; padding: 0; list-style: none; }
.acn__callli + .acn__callli { margin-left: 20px; padding-left: 20px; border-left: 1px solid #D5DCE8; }
.acn__call { display: flex; flex-direction: column; gap: 2px; color: var(--acn-ink); }
.acn__area { font-size: 14.4px; line-height: 18px; color: var(--acn-blue); }
.acn__tel { font-size: 17.6px; line-height: 24px; font-weight: 700; white-space: nowrap; transition: color 0.3s var(--acn-ease); }
.acn__call:hover .acn__tel, .acn__call:focus-visible .acn__tel { color: var(--acn-blue); }
.acn__call:focus-visible { outline: 2px solid var(--acn-navy); outline-offset: 3px; }
.acn__hq { flex-basis: 100%; font-size: 13px; line-height: 18px; }
.acn__hqlabel { margin-right: 6px; font-size: 12px; letter-spacing: 1.5px; }
.acn__hqnum { font-weight: 700; color: var(--acn-ink); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.acn__hqnum:hover, .acn__hqnum:focus-visible { color: var(--acn-blue); }
.acn__hqnum:focus-visible { outline: 2px solid var(--acn-navy); outline-offset: 3px; }

.acn__fig { position: relative; z-index: 1; margin: 0 0 -75px; }
.acn__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 10px solid var(--acn-white);
  border-bottom-right-radius: 100px;
}
.acn__badge {
  position: absolute;
  top: -50px;
  left: -50px;
  width: 100px;
  height: 100px;
}
.acn__rim { fill: var(--acn-white); }
.acn__ring { fill: var(--acn-gold-pale); }
.acn__disc { fill: var(--acn-gold); }
.acn__star { fill: var(--acn-navy); }
.acn__cap {
  position: absolute;
  left: -20px;
  bottom: 40px;
  padding: 10px 20px;
  background-color: var(--acn-gold);
  color: var(--acn-navy);
  font-family: var(--mo-face);
  font-size: 14.4px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.acn__ways { padding: 100px 0; }
.acn__waysin {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  width: min(88%, 1200px);
  margin: 0 auto;
}
.acn__h2 {
  font-family: var(--mo-face);
  font-size: 40px;
  line-height: 48px;
  font-weight: 800;
  color: var(--acn-navy);
}
.acn__links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 40px;
  width: 100%;
  padding: 0;
  list-style: none;
}
.acn__link {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 2px solid var(--acn-gold);
  color: var(--acn-navy);
  transition: color 0.3s var(--acn-ease);
}
.acn__links { counter-reset: acn; }
.acn__link::before {
  content: counter(acn, decimal-leading-zero);
  counter-increment: acn;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background-color: var(--acn-navy);
  color: var(--acn-gold-hi);
  font-family: var(--mo-face);
  font-size: 16px;
  font-weight: 800;
}
.acn__llabel { flex: 1 1 auto; font-family: var(--mo-face); font-size: 24px; line-height: 31.2px; font-weight: 800; }
.acn__arrow { flex: 0 0 auto; width: 24px; height: 24px; fill: currentColor; transition: transform 0.3s var(--acn-ease); }
.acn__link:hover, .acn__link:focus-visible { color: var(--acn-blue); }
.acn__link:hover .acn__arrow, .acn__link:focus-visible .acn__arrow { transform: translateX(5px); }
.acn__link:focus-visible { outline: 3px solid var(--acn-navy); outline-offset: 3px; }
.acn__home {
  padding: 15px 20px;
  background-color: var(--acn-navy);
  color: var(--acn-white);
  font-family: var(--mo-face);
  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: background-color 0.3s var(--acn-ease);
}
.acn__home:hover, .acn__home:focus-visible { background-color: var(--acn-blue); }
.acn__home:focus-visible { outline: 3px solid var(--acn-navy); outline-offset: 3px; }

@media (max-width: 1199px) {
  .acn__top { border-bottom-right-radius: 100px; }
  .acn__h1 { font-size: 52px; line-height: 57.2px; }
}
@media (max-width: 978px) {
  .acn__in { grid-template-columns: 1fr; gap: 0; }
  .acn__text { padding-bottom: 50px; }
  .acn__fig { max-width: 560px; margin-left: 50px; }
  .acn__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 766px) {
  .acn__top { padding-top: 75px; border-bottom-right-radius: 50px; }
  .acn__in { width: auto; margin: 0 16px; }
  .acn__kicker { font-size: 15.4px; line-height: 22.4px; }
  .acn__h1 { font-size: 40px; line-height: 44px; }
  .acn__body { font-size: 16px; line-height: 25.6px; }
  .acn__bar { width: 100%; padding: 15px; gap: 15px; }
  .acn__btn { flex-basis: 100%; text-align: center; }
  .acn__calls { flex-basis: 100%; }
  .acn__callli { flex: 1 1 0; min-width: 0; }
  .acn__callli + .acn__callli { margin-left: 15px; padding-left: 15px; }
  .acn__area { font-size: 12.6px; letter-spacing: 1.5px; }
  .acn__tel { font-size: 16px; }
  .acn__fig { margin: 0 0 -50px 20px; }
  .acn__photo { border-width: 8px; border-bottom-right-radius: 50px; }
  .acn__badge { top: -40px; left: -20px; width: 80px; height: 80px; }
  .acn__cap { left: -20px; bottom: 30px; font-size: 12.6px; }
  .acn__ways { padding: 100px 0 75px; }
  .acn__waysin { width: auto; margin: 0 16px; gap: 20px; }
  .acn__h2 { font-size: 28px; line-height: 33.6px; }
  .acn__links { grid-template-columns: 1fr; }
  .acn__llabel { font-size: 21px; line-height: 27.3px; }
  .acn__home { width: 100%; text-align: center; font-size: 14px; line-height: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .acn__btn, .acn__tel, .acn__link, .acn__arrow, .acn__home { transition: none; }
  .acn__link:hover .acn__arrow, .acn__link:focus-visible .acn__arrow { transform: none; }
}

/* client.page-hero */
/* client.page-hero - component (hero, brand-led). The home hero's navy band and its one big corner cut at the
   bottom right, shorter, for every inner page.
   - Behind the words: the logo's five stars outlined faint, soft light rays, a fine grain, and the page's own word
     set huge in outline along the band's foot, so the navy is never flat.
   - Left, three levels: a breadcrumb with gold diamond ticks, the gold CAPS eyebrow, the heavy headline with one
     gold phrase (biggest), the lead (quietest); then Advanced Air's flat action bar: the square gold quote button,
     "Or call:", both labelled area lines, and the main line under it on pages whose copy names it.
   - Right: the page's own job photo in a white frame clipped at two corners like the shield's shoulders, on a
     gold back plate offset down-left, its city on the logo's belt plate; a second, smaller photo overlaps the
     frame's lower-left corner in a white frame with a navy keyline (the stacked pair).
   - A page with no photo (the thank-you page) is type-led: the ghost word grows and the bar sits under the lead.
   On load the words rise and the photos slide in from the right; reduced motion shows them at rest.
   Phone: the photo as a strip on top with the pair over its corner, then the words, both area lines as big navy
   call buttons, the quote button and the main line. */
.aph {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  padding: 64px 0 120px;
  min-height: 700px;
  background: #011A47;
  border-radius: 0 0 200px 0;
  overflow-x: clip;
  color: #FFFFFF;
}
.aph--type { min-height: 0; padding-bottom: 150px; }

.aph__air {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.aph__air::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("public/media/hero-grain.png");
  opacity: 0.07;
}
.aph__rays {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: #FFFFFF;
  opacity: 0.045;
}
.aph__stars {
  position: absolute;
  top: 26px;
  left: max(20px, calc(50% - 760px));
  width: 760px;
  height: 240px;
  fill: none;
  stroke: #FED617;
  stroke-width: 1.5;
  opacity: 0.16;
}
.aph__ghost {
  position: absolute;
  left: max(10px, calc(50% - 740px));
  bottom: -46px;
  font-family: "Saira", sans-serif;
  font-size: 230px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -4px;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px rgba(254, 214, 23, 0.18);
  user-select: none;
}
.aph--type .aph__ghost { font-size: 300px; bottom: -60px; left: auto; right: -20px; }

/* the photo: a white frame with the shield's clipped shoulders on a gold plate */
.aph__photo {
  position: absolute;
  z-index: 1;
  top: 64px;
  right: max(40px, calc(50% - 640px));
  width: 470px;
  height: 540px;
  margin: 0;
}
.aph__back {
  position: absolute;
  inset: 0;
  translate: -20px 20px;
  background: #C50103;
  clip-path: polygon(34px 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%, 0 34px);
}
.aph__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: 8px;
  background: #FFFFFF;
  clip-path: polygon(34px 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%, 0 34px);
}
.aph__frame picture { display: block; width: 100%; height: 100%; overflow: hidden; }
.aph__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.aph__photo:hover .aph__img,
.aph__photo:focus-visible .aph__img { transform: scale(1.04); }
.aph__tag {
  position: absolute;
  z-index: 2;
  top: -20px;
  right: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  aspect-ratio: 4 / 1;
  padding: 12px 18px 3px;
  background: url("public/brand/belt-plate-rim.svg") center / 100% 100% no-repeat;
}
.aph__tagtext {
  font-family: "Titillium Web", sans-serif;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FED617;
  white-space: nowrap;
}
.aph__pair {
  position: absolute;
  z-index: 3;
  top: 470px;
  right: calc(max(40px, 50% - 640px) + 266px);
  width: 270px;
  margin: 0;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.aph__pair:hover,
.aph__pair:focus-visible { transform: translateY(-6px) rotate(-1deg); }
.aph__pairimg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 8px solid #FFFFFF;
  outline: 3px solid #011A47;
  outline-offset: -11px;
  background: #FFFFFF;
}
.aph__pairtag {
  position: absolute;
  left: -10px;
  bottom: 16px;
  padding: 6px 12px;
  border-left: 5px solid #F2C40F;
  background: #011A47;
  font-family: "Titillium Web", sans-serif;
  font-size: 12px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FED617;
}

/* the words */
.aph__in { position: relative; z-index: 2; }
.aph__copy { max-width: calc(100% - 560px); }
.aph--type .aph__copy { max-width: 820px; }
.aph__trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
}
.aph__trail li { display: flex; align-items: center; gap: 14px; }
.aph__trail li + li::before {
  content: "";
  width: 7px;
  height: 7px;
  background: #FED617;
  transform: rotate(45deg);
}
.aph__crumb,
.aph__here {
  font-family: "Titillium Web", sans-serif;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.aph__crumb {
  color: #B9C7DD;
  text-decoration: none;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.aph__crumb:hover,
.aph__crumb:focus-visible { color: #FED617; }
.aph__crumb:focus-visible { outline: 2px solid #FED617; outline-offset: 3px; }
.aph__here { color: #FFFFFF; }
/* the CSLB plate on city and service pages (audit round 1, m-2, m-5): the home hero's belt plate, a size down,
   above the eyebrow so the licence is in the first screen at 390 and 1440; linked to the state record */
.aph__plate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  aspect-ratio: 4 / 1;
  margin: -14px 0 24px;
  padding: 16px 26px 5px;
  background: url("public/brand/belt-plate-rim.svg") center / 100% 100% no-repeat;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
  transition: translate 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.aph__plate:hover,
.aph__plate:focus-visible { translate: 0 -3px; }
.aph__plate:focus-visible { outline: 2px solid #FED617; outline-offset: 4px; }
.aph__platein { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.aph__platelic {
  font-family: "Titillium Web", sans-serif;
  font-size: 15px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FED617;
  white-space: nowrap;
}
.aph__platewho {
  font-family: "Instrument Sans", sans-serif;
  font-size: 12.5px;
  line-height: 1.2;
  font-weight: 500;
  color: #FFFFFF;
  white-space: nowrap;
}
.aph__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-family: "Titillium Web", sans-serif;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #FED617;
}
.aph__eyebrow::before {
  content: none;
  flex: 0 0 auto;
  width: 44px;
  height: 4px;
  background: #FED617;
}
.aph__h1 {
  margin: 0;
  font-family: var(--mo-face);
  font-size: 58px;
  line-height: 1.06;
  font-weight: 800;
  color: #FFFFFF;
}
.aph__gold { color: #FED617; }
.aph__lead {
  margin: 24px 0 40px;
  max-width: 540px;
  font-family: "Instrument Sans", sans-serif;
  font-size: 17.6px;
  line-height: 1.6;
  font-weight: 500;
  color: #DCE3EE;
}

/* the action bar */
.aph__bar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 25px;
  width: max-content;
  max-width: calc(100% - 520px);
  padding: 20px 25px 20px 20px;
  background: #FFFFFF;
  border-bottom: 6px solid #FED617;
  color: #011A47;
}
.aph--type .aph__bar { max-width: 100%; }
.aph__quote {
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 0 25px;
  background: #FED617;
  font-family: "Titillium Web", sans-serif;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #011A47;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.aph__quote:hover,
.aph__quote:focus-visible { background: #F2C40F; }
.aph__quote:focus-visible { outline: 2px solid #011A47; outline-offset: -5px; }
.aph__ask {
  grid-column: 2;
  margin: 0 0 4px;
  font-family: "Instrument Sans", sans-serif;
  font-size: 14.4px;
  line-height: 1.3;
  font-weight: 700;
  color: #304453;
}
.aph__areas { grid-column: 2; display: flex; }
.aph__area {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #011A47;
  text-decoration: none;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.aph__area + .aph__area { margin-left: 20px; padding-left: 20px; border-left: 1px solid #D5D7DB; }
.aph__area:hover,
.aph__area:focus-visible { color: #013A97; }
.aph__area:focus-visible { outline: 2px solid #011A47; outline-offset: 3px; }
.aph__loc {
  font-family: "Titillium Web", sans-serif;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #013A97;
  white-space: nowrap;
}
.aph__phone {
  font-family: "Instrument Sans", sans-serif;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
}
.aph__towns {
  font-family: "Instrument Sans", sans-serif;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 400;
  color: #4A5B68;
}
.aph__main {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px dashed #B9C7DD;
  font-family: "Titillium Web", sans-serif;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #011A47;
  text-decoration: none;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.aph__mainic { width: 18px; height: 18px; fill: #F2C40F; }
.aph__main:hover,
.aph__main:focus-visible { color: #013A97; }
.aph__main:focus-visible { outline: 2px solid #011A47; outline-offset: 3px; }

/* B7: the Contact hero is the call band. The two area lines are big tiles, the number the biggest type on the
   page; the main line the lead names and the hours sit under them. */
.aph--tiles .aph__bar { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding: 22px 24px 20px; }
.aph--tiles .aph__ask { grid-column: 1; margin-bottom: 12px; font-family: "Titillium Web", sans-serif; font-size: 14px; letter-spacing: 3px; text-transform: uppercase; color: #013A97; }
.aph--tiles .aph__areas { grid-column: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.aph--tiles .aph__area,
.aph--tiles .aph__area + .aph__area {
  margin: 0;
  padding: 16px 18px 14px;
  border: 2px solid #011A47;
  border-bottom: 6px solid #F2C40F;
  background: #FFFFFF;
  box-shadow: 8px 8px 0 #012668;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.aph--tiles .aph__area:hover,
.aph--tiles .aph__area:focus-visible { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 #012668; }
.aph--tiles .aph__phone { font-family: "Saira", sans-serif; font-size: clamp(24px, 1.95vw, 28px); line-height: 1.25; font-weight: 900; }
.aph--tiles .aph__towns { font-size: 14px; }
.aph--tiles .aph__main { margin-top: 20px; }
.aph__hours {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  font-family: "Titillium Web", sans-serif;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #304453;
}

@keyframes aph-rise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
@keyframes aph-slide {
  from { opacity: 0; transform: translateX(60px); }
  to { opacity: 1; transform: none; }
}
.aph__trail,
.aph__eyebrow,
.aph__h1,
.aph__lead,
.aph__bar { animation: aph-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.aph__eyebrow { animation-delay: 0.05s; }
.aph__h1 { animation-delay: 0.14s; }
.aph__lead { animation-delay: 0.36s; }
.aph__bar { animation-delay: 0.46s; }
.aph__photo,
.aph__pair { animation: aph-slide 1s cubic-bezier(0.16, 1, 0.3, 1) both; }
.aph__pair { animation-delay: 0.35s; }

@media (max-width: 1199px) {
  .aph { border-radius: 0 0 100px 0; }
  .aph__photo { width: 380px; height: 500px; right: 40px; }
  .aph__pair { right: 330px; width: 220px; top: 420px; }
  .aph__copy { max-width: calc(100% - 430px); }
  .aph__h1 { font-size: 48px; }
  .aph__bar { max-width: calc(100% - 420px); grid-template-columns: 1fr; row-gap: 15px; }
  .aph__quote { grid-row: auto; grid-column: 1 / -1; justify-content: center; padding: 15px 20px; }
  .aph__ask,
  .aph__areas { grid-column: 1 / -1; margin: 0; }
  .aph__ghost { font-size: 180px; }
}
@media (max-width: 978px) {
  .aph { padding: 0 0 80px; min-height: 0; }
  .aph--type { padding-top: 50px; }
  .aph__photo {
    position: relative;
    inset: auto;
    width: auto;
    height: 380px;
    margin: 0 0 44px;
  }
  .aph__back { display: none; }
  .aph__frame { padding: 0; clip-path: none; border-bottom: 6px solid #FED617; }
  .aph__tag { top: 14px; bottom: auto; right: 14px; width: 170px; }
  .aph__pair { top: 250px; right: auto; left: 20px; width: 200px; }
  .aph__copy,
  .aph__bar { max-width: 660px; }
  .aph__bar { width: auto; }
  .aph__stars { top: 420px; left: 50%; translate: -50% 0; }  /* centered over the centered words (George 2026-11-12) */
}
@media (max-width: 766px) {
  .aph--tiles .aph__areas { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .aph--tiles .aph__area,
  .aph--tiles .aph__area + .aph__area { padding: 14px 16px 12px; background: #012668; color: #FFFFFF; box-shadow: 6px 6px 0 #F2C40F; }
  .aph--tiles .aph__phone { font-size: 30px; }
  .aph--tiles .aph__towns { font-size: 13px; }
  .aph--tiles .aph__bar { padding: 18px 16px 16px; }
  .aph { padding-bottom: 64px; border-radius: 0 0 90px 0; }
  .aph__photo { height: 260px; margin-bottom: 30px; }
  .aph__tag { width: 150px; top: 10px; right: 10px; }
  .aph__tagtext { font-size: 11px; }
  .aph__pair { top: 168px; left: 14px; width: 132px; }
  .aph__pairimg { border-width: 4px; outline-width: 2px; outline-offset: -6px; }
  .aph__pairtag { font-size: 10px; letter-spacing: 1.5px; padding: 4px 8px; bottom: 8px; }
  .aph__stars { top: 300px; left: 50%; translate: -50% 0; width: 370px; height: 117px; }
  .aph__ghost { font-size: 120px; bottom: -22px; letter-spacing: -2px; }
  .aph--type .aph__ghost { font-size: 130px; bottom: -26px; }
  .aph__trail { margin-bottom: 20px; }
  .aph__plate { width: 248px; margin: -6px 0 14px; padding: 13px 20px 4px; }
  .aph__platelic { font-size: 12.5px; letter-spacing: 1.5px; }
  .aph__platewho { font-size: 11.5px; }
  .aph__crumb,
  .aph__here { font-size: 11.5px; letter-spacing: 1.5px; }
  .aph__eyebrow { margin-bottom: 10px; font-size: 15px; letter-spacing: 2px; }
  .aph__eyebrow::before { width: 28px; height: 3px; }
  .aph__h1 { font-size: 36px; line-height: 1.1; }
  .aph__lead { margin: 18px 0 26px; font-size: 16px; }
  .aph__bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: none;
    padding: 12px;
  }
  .aph__ask { display: none; }
  .aph__areas { order: -1; gap: 8px; }
  .aph__area {
    flex: 1 1 0%;
    min-width: 0;
    gap: 2px;
    padding: 12px;
    background: #011A47;
    color: #FFFFFF;
  }
  .aph__area + .aph__area { margin-left: 0; padding-left: 12px; border-left: 0; }
  .aph__area:hover,
  .aph__area:focus-visible { background: #013A97; color: #FFFFFF; }
  .aph__area:focus-visible { outline: 2px solid #FED617; outline-offset: -4px; }
  .aph__loc { font-size: 12px; letter-spacing: 1.5px; color: #FED617; }
  .aph__phone { font-size: 18px; }
  .aph__towns { font-size: 12.5px; color: #DCE3EE; }
  .aph__quote { justify-content: center; padding: 14px 20px; }
  .aph__main { margin: 2px 0 0; padding-top: 10px; justify-content: center; }
}
@media (max-width: 479px) {
  .aph__h1 { font-size: 33px; }
  .aph__bar { margin: 0 -8px; padding: 10px; }
  .aph__area { padding: 11px 10px; }
  .aph__phone { font-size: 17px; }
}
@media (max-width: 359px) {
  .aph__areas { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .aph--tiles .aph__area,
  .aph--tiles .aph__area + .aph__area { transition: none; }
  .aph--tiles .aph__area:hover,
  .aph--tiles .aph__area:focus-visible { transform: none; }
  .aph__trail,
  .aph__eyebrow,
  .aph__h1,
  .aph__lead,
  .aph__bar,
  .aph__photo,
  .aph__pair { animation: none; }
  .aph__img,
  .aph__pair,
  .aph__crumb,
  .aph__plate,
  .aph__quote,
  .aph__area,
  .aph__main { transition: none; }
  .aph__plate:hover,
  .aph__plate:focus-visible { translate: none; }
  .aph__photo:hover .aph__img,
  .aph__photo:focus-visible .aph__img,
  .aph__pair:hover,
  .aph__pair:focus-visible { transform: none; }
}

/* a job page whose photos all lead other pages' heroes (stage 3g, B4): in the photo's frame, the Bay Area cut from
   the territory map, the job's county lit with a gold edge, its pin pulsing and our San Jose base as a white pin,
   the two named on a navy key along the frame's foot. Never a stock picture or a repeated star (B2). */
.aph__map { display: block; width: 100%; height: 100%; background: #13398A; }
.aph__map .aph__sea { fill: #13398A; }
.aph__map .aph__land path { fill: #011A47; stroke: #1D4E9E; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.aph__map .aph__co { fill: #013A97; stroke: #FED617; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.aph__map .aph__pindot { fill: #FED617; stroke: #011A47; stroke-width: 2; vector-effect: non-scaling-stroke; }
.aph__map .aph__pin--home .aph__pindot { fill: #C50103; stroke: #FFFFFF; stroke-width: 3; }
.aph__map .aph__pinpulse { fill: none; stroke: #FED617; stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0;
  transform-box: fill-box; transform-origin: center; animation: aph-pulse 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.aph__map .aph__pin--home .aph__pinpulse { display: none; }
.aph__mapkey {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding: 14px 18px;
  border-top: 4px solid #FED617;
  background: #011A47;
}
.aph__mapcity { position: relative; padding-left: 18px; font-family: "Titillium Web", sans-serif; font-size: 13px; line-height: 1.2; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #FFFFFF; }
.aph__mapcity::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin-top: -7px; border: 2px solid #011A47; border-radius: 50%; background: #FED617; box-shadow: 0 0 0 1px #FED617; }
.aph__mapcity--home { color: #B9C7DD; }
.aph__mapcity--home::before { background: #FFFFFF; box-shadow: 0 0 0 2px #F2C40F; }
@media (max-width: 978px) {
  .aph__mapkey { left: 0; right: 0; bottom: 0; }
}
@media (max-width: 766px) {
  .aph__mapkey { padding: 10px 14px; }
  .aph__mapcity { font-size: 11px; letter-spacing: 1.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .aph__map .aph__pinpulse { animation: none; opacity: 0.6; }
}
/* a page with no job photo of its own (a city with no job yet, the Central Coast guide): the photo frame holds the
   area map instead, cut from the territory band's shapes, the page's county lit gold and its city's pin pulsing */
.aph__photo--map .aph__frame { background: #011A47; }
.aph__svg { display: block; width: 100%; height: 100%; }
.aph__svg .aph__sea { fill: #13398A; }
.aph__svg .aph__land path { fill: #011A47; stroke: #1D4E9E; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.aph__svg .aph__co { fill: #012668; stroke: #2C64C2; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.aph__svg .aph__co--lit { fill: #013A97; stroke: #FED617; stroke-width: 2.5; }
.aph__svg .aph__pindot { fill: #FED617; stroke: #011A47; stroke-width: 2; vector-effect: non-scaling-stroke; }
.aph__svg .aph__pin--home .aph__pindot { fill: #C50103; stroke: #FFFFFF; stroke-width: 4; }
.aph__svg .aph__pinname { font-family: "Saira", sans-serif; font-weight: 900; fill: #FFFFFF; stroke: #011A47; stroke-width: 4;
  paint-order: stroke; vector-effect: non-scaling-stroke; }
.aph__svg .aph__pinpulse { fill: none; stroke: #FED617; stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0;
  transform-box: fill-box; transform-origin: center; animation: aph-pulse 2.6s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
@keyframes aph-pulse { 0% { opacity: 0.9; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .aph__svg .aph__pinpulse { animation: none; opacity: 0.6; }
}
/* a county name is longer than a city: the belt plate (an SVG that keeps its 4:1 shape) is drawn bigger and the
   letters set closer, so the name stays inside the rim */
.aph__photo--map .aph__tag { width: 250px; }
.aph__photo--map .aph__tagtext { font-size: 12px; letter-spacing: 1px; }
@media (max-width: 978px) {
  .aph__photo--map .aph__tag { width: 230px; }
}
@media (max-width: 766px) {
  .aph__photo--map .aph__tag { width: 200px; }
  .aph__photo--map .aph__tagtext { font-size: 10.5px; letter-spacing: 0.5px; }
}
/* stage 3g: a page with no photo of its own keeps the photo's place filled. A service with no job photo shows
   its badge: Advanced Air's disc in a ring (gold disc, pale ring, white rim) with the service's line icon in
   navy, five small stars on the ring, a navy hairline inside the disc and a gold stitched ring that turns
   slowly round it; the service's name on the belt plate under it. The Central Coast shows its own county map
   in the photo frame. Hover tilts the badge; reduced motion holds it still. */
.aph__emblem {
  position: absolute;
  z-index: 1;
  top: 64px;
  right: max(40px, calc(50% - 640px));
  display: grid;
  place-items: center;
  width: 470px;
  height: 540px;
  margin: 0;
  animation: aph-slide 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.aph__seal { display: block; width: 420px; height: 420px; overflow: visible; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.aph__emblem:hover .aph__seal,
.aph__emblem:focus-visible .aph__seal { transform: rotate(-6deg) scale(1.02); }
.aph__sealstitch {
  fill: none;
  stroke: #FED617;
  stroke-width: 1.6;
  stroke-dasharray: 5 7;
  transform-origin: 100px 100px;
  animation: aph-spin 80s linear infinite;
}
.aph__sealrim { fill: #FFFFFF; }
.aph__sealring { fill: #C50103; }
.aph__sealdisc { fill: #F2C40F; }
.aph__sealkey { fill: none; stroke: #011A47; stroke-width: 1; }
.aph__sealstar { fill: #011A47; }
.aph__sealglyph { fill: none; stroke: #011A47; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.aph__emtag { top: auto; right: auto; bottom: 22px; left: 50%; width: 240px; translate: -50% 0; }
.aph__photo--map .aph__frame:has(> .aph__mapimg) { background: #00143A; }
.aph__mapimg { box-sizing: border-box; padding: 34px; object-fit: contain; background: #00143A; }
@keyframes aph-spin { to { transform: rotate(360deg); } }
@media (max-width: 1199px) {
  .aph__emblem { right: 40px; width: 380px; height: 500px; }
  .aph__seal { width: 340px; height: 340px; }
}
@media (max-width: 978px) {
  .aph--emblem { padding-top: 40px; }
  .aph__emblem { position: relative; inset: auto; width: auto; height: 320px; margin: 0 0 34px; }
  .aph__seal { width: 270px; height: 270px; }
  .aph__emtag { bottom: 0; }
  .aph__mapimg { padding: 18px; }
}
@media (max-width: 766px) {
  .aph--emblem { padding-top: 28px; }
  .aph__emblem { height: 230px; margin-bottom: 26px; }
  .aph__seal { width: 196px; height: 196px; }
  /* the longest service names ("Wall heater installation") need the wider plate to clear its navy rim */
  .aph__emtag { width: 236px; bottom: -4px; }
}
@media (prefers-reduced-motion: reduce) {
  .aph__emblem,
  .aph__sealstitch { animation: none; }
  .aph__seal { transition: none; }
  .aph__emblem:hover .aph__seal,
  .aph__emblem:focus-visible .aph__seal { transform: none; }
}

/* George 2026-11-12: on a phone the section heads (eyebrow, heading, lead) sit centered, not pushed left */
@media (max-width: 766px) {
  .aph__copy { text-align: center; margin-left: auto; margin-right: auto; }
  .aph__trail, .aph__eyebrow { justify-content: center; }
  .aph__plate { margin-left: auto; margin-right: auto; }
}

/* George 2026-11-12: tiny hints of the logo's red */
.aph__sealstar { fill: #C50103; }

/* client.body */
/* client.body - component (about, brand-led). An inner page's long copy made into objects, never a column of
   paragraphs. Hierarchy in three levels everywhere: the heading (biggest, heaviest, one gold-boxed phrase), each
   item's name in heavy navy CAPS, the sentence smallest in a softer ink.
   - Steps: white ground with the logo's stars huge and faint. The steps hang on a gold stitched rail as numbered
     plates: a huge outlined numeral on a white disc, a plate with the navy board stroke on its left edge and a gold
     back plate offset behind it. Hover lifts the plate and fills the numeral. Beside them, sticky on desktop, the
     navy call rail: both area lines, the quote button, the licence stamp, related pages once they are built.
   - Facts: a navy panel with Advanced Air's diagonal corners, anchored by a job photo in a notched white frame on
     a gold plate; each sourced rule is a stroke card (hairline white border, gold corner ticks) with a ring icon
     from the homepage's set, the authority in gold caps, the sentence and its source line.
   - Story (about): a framed job photo with the two owners' belt name plates over its foot, and the copy's
     statements as numbered plates.
   Reduced motion: no lifts, no reveals. */
.abd {
  --b-navy: #012668;
  --b-deep: #011A47;
  --b-band: #011E53;
  --b-blue: #013A97;
  --b-gold: #F2C40F;
  --b-rim: #FED617;
  --b-pale: #EAF0F8;
  --b-rule: #D3DDEB;
  --b-ink: #22324A;
  --b-mute: #56657D;
  --b-tint: #B9C7DD;
  --b-white: #FFFFFF;
  --b-ease: cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow-x: clip;
  background: var(--b-white);
  color: var(--b-ink);
}
.abd__stage { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.abd__star { position: absolute; fill: var(--b-pale); }
.abd__star--a { top: 470px; right: max(-60px, calc(50% - 760px)); width: 520px; height: 520px; transform: rotate(12deg); }
.abd__star--b { top: 40px; left: -90px; width: 260px; height: 260px; transform: rotate(-10deg); }

.abd__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 80px;
  align-items: start;
  width: 88%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 110px 0 120px;
}
.abd__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 17.6px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--b-blue);
}
.abd__eyebrow::before {
  content: none;
  width: 34px;
  height: 10px;
  background: var(--b-gold);
  transform: skewX(-24deg);
}
.abd__h2 {
  margin: 0 0 56px;
  max-width: 720px;
  font-family: "Saira", sans-serif;
  font-size: 52px;
  line-height: 1.12;
  font-weight: 900;
  color: var(--b-deep);
}
.abd__hl {
  padding: 0 10px;
  background: var(--b-rim);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* the steps on their stitched rail */
.abd__steps,
.abd__says { counter-reset: abdn; }
.abd__num::before { counter-increment: abdn; content: counter(abdn, decimal-leading-zero); }
.abd__steps {
  position: relative;
  display: grid;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.abd__steps::before {
  content: "";
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 45px;
  border-left: 3px dashed var(--b-gold);
}
.abd__step {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}
.abd__num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 94px;
  height: 94px;
  border: 3px solid var(--b-deep);
  border-radius: 50%;
  background: var(--b-white);
  font-family: "Saira", sans-serif;
  font-size: 44px;
  line-height: 1;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 2px var(--b-deep);
  transition: color 0.3s var(--b-ease), background-color 0.3s var(--b-ease);
}
.abd__plate {
  position: relative;
  padding: 22px 28px 24px;
  border: 2px solid var(--b-rule);
  border-left: 8px solid var(--b-navy);
  background: var(--b-white);
  transition: transform 0.35s var(--b-ease), border-color 0.35s var(--b-ease);
}
.abd__plate::before {
  content: "";
  position: absolute;
  inset: 10px -12px -12px 10px;
  z-index: -1;
  background: var(--b-pale);
  transition: transform 0.35s var(--b-ease), background-color 0.35s var(--b-ease);
}
.abd__step:hover .abd__plate,
.abd__step:focus-visible .abd__plate { transform: translateY(-5px); border-color: var(--b-deep); }
.abd__step:hover .abd__plate::before,
.abd__step:focus-visible .abd__plate::before { background: var(--b-rim); transform: translate(4px, 4px); }
.abd__step:hover .abd__num,
.abd__step:focus-visible .abd__num { color: var(--b-rim); background: var(--b-deep); -webkit-text-stroke: 2px var(--b-rim); }
.abd__tag {
  margin: 0 0 6px;
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--b-deep);
}
.abd__text {
  margin: 0;
  max-width: 600px;
  font-family: "Instrument Sans", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--b-mute);
}

/* the sticky call rail */
.abd__rail { position: sticky; top: 30px; display: grid; gap: 22px; }
.abd__railbox {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 26px 26px 24px;
  border-top: 6px solid var(--b-gold);
  background: var(--b-deep);
  color: var(--b-white);
}
.abd__railbox::after {
  content: "";
  position: absolute;
  inset: 14px -14px -14px 14px;
  z-index: -1;
  background: var(--b-gold);
}
.abd__railk {
  margin: 0;
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--b-tint);
}
.abd__line {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border-left: 4px solid var(--b-gold);
  background: var(--b-navy);
  color: var(--b-white);
  text-decoration: none;
  transition: transform 0.3s var(--b-ease), background-color 0.3s var(--b-ease);
}
.abd__line:hover,
.abd__line:focus-visible { transform: translateX(6px); background: var(--b-blue); }
.abd__line:focus-visible { outline: 2px solid var(--b-rim); outline-offset: 3px; }
.abd__lineloc {
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--b-rim);
}
.abd__linenum { font-family: "Saira", sans-serif; font-size: 27px; line-height: 1.15; font-weight: 900; white-space: nowrap; }
.abd__quote {
  display: block;
  padding: 16px 20px;
  background: var(--b-rim);
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
  color: var(--b-deep);
  text-decoration: none;
  transition: background-color 0.3s var(--b-ease);
}
.abd__quote:hover,
.abd__quote:focus-visible { background: var(--b-gold); }
.abd__quote:focus-visible { outline: 2px solid var(--b-white); outline-offset: 3px; }
.abd__stamp {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 4px 0 0;
  padding-top: 14px;
  border-top: 1px dashed rgba(255, 255, 255, 0.35);
  font-family: "Instrument Sans", sans-serif;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--b-tint);
}
.abd__stampic { width: 34px; height: 34px; }
.abd__stampic circle { fill: none; stroke: var(--b-rim); stroke-width: 6; }
.abd__stampic path { fill: var(--b-rim); }
.abd__rel { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.abd__rellink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border: 2px solid var(--b-deep);
  background: var(--b-white);
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--b-deep);
  text-decoration: none;
  transition: background-color 0.3s var(--b-ease), transform 0.3s var(--b-ease);
}
.abd__rellink svg { flex: none; width: 9px; height: 11px; fill: var(--b-gold); }
.abd__rellink:hover,
.abd__rellink:focus-visible { background: var(--b-rim); transform: translateX(4px); }
.abd__rellink:focus-visible { outline: 2px solid var(--b-deep); outline-offset: 3px; }

/* the facts panel: navy, anchored by a photo */
.abd__facts {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  padding: 110px 0;
  border-radius: 150px 0 150px 0;
  background: var(--b-band);
  color: var(--b-white);
}
.abd__factsin {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 70px;
  align-items: start;
  width: 88%;
  max-width: 1200px;
  margin: 0 auto;
}
.abd__anchor,
.abd__story { position: relative; margin: 0; }
.abd__anchorback {
  position: absolute;
  inset: 0;
  translate: -18px 18px;
  background: var(--b-gold);
  clip-path: polygon(30px 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 30px);
}
.abd__anchorframe {
  position: relative;
  display: block;
  padding: 8px;
  background: var(--b-white);
  clip-path: polygon(30px 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 30px);
  overflow: hidden;
}
.abd__anchorframe picture { display: block; overflow: hidden; }
.abd__anchorimg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.abd__anchor:hover .abd__anchorimg,
.abd__anchor:focus-visible .abd__anchorimg,
.abd__story:hover .abd__anchorimg,
.abd__story:focus-visible .abd__anchorimg { transform: scale(1.04); }
.abd__anchortag {
  position: absolute;
  top: 24px;
  right: -12px;
  padding: 8px 14px;
  border-right: 6px solid var(--b-gold);
  background: var(--b-deep);
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--b-rim);
}
.abd__factsside { display: grid; gap: 40px; }
.abd__fh2 {
  margin: 0;
  font-family: "Saira", sans-serif;
  font-size: 44px;
  line-height: 1.12;
  font-weight: 900;
  color: var(--b-white);
}
.abd__fgold { color: var(--b-rim); }
.abd__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.abd__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px 22px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  transition: transform 0.35s var(--b-ease), border-color 0.35s var(--b-ease);
}
.abd__card::before,
.abd__card::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
}
.abd__card::before { top: -4px; left: -4px; border-top: 4px solid var(--b-rim); border-left: 4px solid var(--b-rim); }
.abd__card::after { right: -4px; bottom: -4px; border-right: 4px solid var(--b-rim); border-bottom: 4px solid var(--b-rim); }
.abd__card:hover,
.abd__card:focus-within { transform: translateY(-6px); border-color: var(--b-rim); }
.abd__ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border: 3px solid var(--b-rim);
  border-radius: 50%;
}
.abd__ring svg { width: 32px; height: 32px; fill: none; stroke: var(--b-rim); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.abd__who {
  margin: 4px 0 0;
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--b-rim);
}
.abd__fact {
  margin: 0;
  font-family: "Instrument Sans", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--b-white);
}
.abd__src {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.35);
  font-family: "Instrument Sans", sans-serif;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--b-tint);
}
.abd__srclink { color: var(--b-white); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.abd__srclink:hover,
.abd__srclink:focus-visible { color: var(--b-rim); }
.abd__checked { display: block; }

/* story (about) */
/* the story starts level with the collage's top (audit round 1, m-39): no empty band above the heading */
.abd__in--story { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 90px; align-items: start; }
.abd__in--story .abd__main { padding-top: 10px; }
.abd__railbox--story { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 44px 14px 0 0; }
.abd__railbox--story .abd__linenum { font-size: 24px; }
.abd__railbox--story .abd__railk,
.abd__railbox--story .abd__quote { grid-column: 1 / -1; }
.abd__story .abd__anchorimg { aspect-ratio: 4 / 3; }
.abd__names {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: -46px 18px 0 30px;
  padding: 0;
  list-style: none;
}
.abd__name {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border: 3px solid var(--b-rim);
  background: var(--b-deep);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  transition: transform 0.3s var(--b-ease);
}
.abd__name:hover,
.abd__name:focus-visible { transform: translateY(-5px); }
.abd__nameword {
  font-family: "Saira", sans-serif;
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--b-rim);
}
.abd__role { font-family: "Instrument Sans", sans-serif; font-size: 13.5px; line-height: 1.3; color: var(--b-white); }
.abd__says { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.abd__say {
  position: relative;
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}
.abd__say:hover .abd__num,
.abd__say:focus-visible .abd__num { color: var(--b-rim); background: var(--b-deep); -webkit-text-stroke: 2px var(--b-rim); }
.abd__saytext {
  margin: 0;
  padding: 22px 26px;
  border-left: 8px solid var(--b-navy);
  background: var(--b-pale);
  font-family: "Saira", sans-serif;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--b-deep);
}

@media (max-width: 1199px) {
  .abd__in { grid-template-columns: minmax(0, 1fr) 300px; gap: 50px; }
  .abd__h2 { font-size: 44px; }
  .abd__linenum { font-size: 24px; }
  .abd__factsin { grid-template-columns: 340px minmax(0, 1fr); gap: 50px; }
  .abd__facts { border-radius: 100px 0 100px 0; }
  .abd__fh2 { font-size: 38px; }
  .abd__in--story { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; }
}
@media (max-width: 978px) {
  .abd__in,
  .abd__in--story,
  .abd__factsin { grid-template-columns: minmax(0, 1fr); }
  .abd__rail { position: relative; top: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .abd__anchor { max-width: 460px; }
  .abd__anchorimg { aspect-ratio: 4 / 3; }
}
@media (max-width: 766px) {
  .abd__star--a { top: auto; bottom: 40px; right: -120px; width: 300px; height: 300px; }
  .abd__in { padding: 75px 0 80px; gap: 50px; }
  .abd__eyebrow { font-size: 15px; }
  .abd__h2 { margin-bottom: 36px; font-size: 32px; line-height: 1.18; }
  .abd__steps { gap: 20px; }
  .abd__steps::before { left: 27px; }
  .abd__step,
  .abd__say { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: start; }
  .abd__num { width: 56px; height: 56px; font-size: 26px; border-width: 2px; -webkit-text-stroke-width: 1.5px; }
  .abd__plate { padding: 16px 18px 18px; border-left-width: 6px; }
  .abd__plate::before { inset: 8px -8px -8px 8px; }
  .abd__tag { font-size: 18px; letter-spacing: 1.5px; }
  .abd__text { font-size: 15px; }
  .abd__rail { grid-template-columns: minmax(0, 1fr); }
  .abd__railbox { margin-right: 10px; }
  .abd__railbox::after { inset: 10px -10px -10px 10px; }
  .abd__facts { padding: 75px 0 80px; border-radius: 60px 0 60px 0; }
  .abd__anchorback { translate: -10px 10px; }
  .abd__fh2 { font-size: 30px; margin-bottom: 26px; }
  .abd__cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .abd__card { padding: 20px 18px 18px; }
  .abd__ring { width: 50px; height: 50px; }
  .abd__names { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: -30px 6px 0 14px; gap: 10px; }
  .abd__name { padding: 12px 12px; }
  .abd__nameword { font-size: 22px; }
  .abd__role { font-size: 12px; }
  .abd__saytext { padding: 16px 18px; font-size: 18px; border-left-width: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .abd__num,
  .abd__plate,
  .abd__plate::before,
  .abd__line,
  .abd__quote,
  .abd__rellink,
  .abd__anchorimg,
  .abd__card,
  .abd__name { transition: none; }
  .abd__step:hover .abd__plate,
  .abd__step:focus-visible .abd__plate,
  .abd__step:hover .abd__plate::before,
  .abd__step:focus-visible .abd__plate::before,
  .abd__line:hover,
  .abd__line:focus-visible,
  .abd__rellink:hover,
  .abd__rellink:focus-visible,
  .abd__anchor:hover .abd__anchorimg,
  .abd__anchor:focus-visible .abd__anchorimg,
  .abd__story:hover .abd__anchorimg,
  .abd__story:focus-visible .abd__anchorimg,
  .abd__card:hover,
  .abd__card:focus-within,
  .abd__name:hover,
  .abd__name:focus-visible { transform: none; }
}

/* Local (a city page): the facts panel alone on a pale ground. The heading, then the area line, the hours and the
   licence stamp in a gold-edged box; the lead card spans the panel in bigger type, the sourced cards beside it;
   related pages as a row of plates once they are built. */
.abd[data-kind="local"],
.abd[data-kind="guide"] { background: var(--b-pale); }
.abd[data-kind="local"] .abd__star,
.abd[data-kind="guide"] .abd__star { fill: var(--b-white); }
.abd__eyebrow--dark { color: var(--b-rim); }
.abd__facts--local .abd__factsside { gap: 0; }
.abd__facts--local .abd__fh2 { margin: 0 0 40px; }
.abd__railbox--gold { border: 2px solid var(--b-rim); border-top-width: 6px; box-shadow: 14px 14px 0 var(--b-gold); }
.abd__railbox--gold::after { content: none; }
.abd__hours {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0;
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--b-white);
}
.abd__hoursic { width: 34px; height: 34px; fill: none; stroke: var(--b-rim); stroke-width: 2.2; stroke-linecap: round; }
.abd__card--lead { grid-column: 1 / -1; }
.abd__card--lead .abd__fact { font-family: "Saira", sans-serif; font-size: 22px; line-height: 1.45; font-weight: 700; }
.abd__rel--row { margin-top: 44px; }
.abd__rel--row .abd__rellink { border-color: var(--b-rim); }
/* the city links by region (audit round 1, m-7, m-16, m-37): under the cards, filling the panel's right column; this
   region under the hub link in heavy Saira, the other under a smaller "Also served" heading; each city a short name
   with the logo's gold diamond, three columns wide, two at 390, so the list stays compact */
.abd__towns { margin-top: 40px; padding: 26px 28px 22px; border-top: 6px solid var(--b-rim); background: var(--b-band); }
.abd__townh { margin: 0 0 14px; font-family: "Saira", sans-serif; font-size: 24px; line-height: 1.15; font-weight: 900; color: var(--b-white); }
.abd__townh--also { margin-top: 24px; padding-top: 18px; border-top: 1px dashed rgba(255, 255, 255, 0.35); font-family: "Titillium Web", sans-serif; font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--b-rim); }
.abd__townhub { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; transition: color 0.3s var(--b-ease); }
.abd__townhub svg { flex: none; width: 11px; height: 13px; fill: var(--b-gold); transition: transform 0.3s var(--b-ease); }
.abd__townhub:hover,
.abd__townhub:focus-visible { color: var(--b-rim); }
.abd__townhub:hover svg,
.abd__townhub:focus-visible svg { transform: translateX(4px); }
.abd__townhub:focus-visible { outline: 2px solid var(--b-rim); outline-offset: 4px; }
.abd__townlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; margin: 0; padding: 0; list-style: none; }
.abd__townlink {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: "Instrument Sans", sans-serif;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--b-white);
  text-decoration: none;
  transition: color 0.3s var(--b-ease), transform 0.3s var(--b-ease);
}
.abd__townlink::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--b-rim); transform: rotate(45deg); }
.abd__townlist--also .abd__townlink { font-weight: 500; color: var(--b-tint); }
.abd__townlink:hover,
.abd__townlink:focus-visible { color: var(--b-rim); transform: translateX(4px); }
.abd__townlink:focus-visible { outline: 2px solid var(--b-rim); outline-offset: 2px; }
@media (max-width: 1199px) {
  .abd__townlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 766px) {
  .abd__towns { margin-top: 30px; padding: 20px 16px 16px; }
  .abd__townh { font-size: 20px; }
  .abd__townh--also { font-size: 13px; }
  .abd__townlist { gap: 0 14px; }
  .abd__townlink { gap: 8px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .abd__townhub,
  .abd__townhub svg,
  .abd__townlink { transition: none; }
  .abd__townhub:hover svg,
  .abd__townhub:focus-visible svg,
  .abd__townlink:hover,
  .abd__townlink:focus-visible { transform: none; }
}

/* Guide: a sticky contents rail (numbered cities, the current one lit) and the city-by-city rule cards. Each card
   is a white sheet on an offset plate (gold, navy every other card): a navy head with the outlined number, the city
   in heavy gold caps and the question in white; ticked lines; a photo anchor from our own job in that city or the
   logo's seal; the sources as stamped lines with their checked month; the city page once it is built. */
.abd__in--guide { grid-template-columns: 290px minmax(0, 1fr); gap: 64px; }
.abd__toc { position: sticky; top: 24px; display: grid; gap: 34px; }
.abd__tocbox { padding: 22px 0 14px; border: 3px solid var(--b-deep); background: var(--b-white); box-shadow: 10px 10px 0 var(--b-gold); }
.abd__tock {
  margin: 0 22px 10px;
  padding-bottom: 12px;
  border-bottom: 4px solid var(--b-gold);
  font-family: "Saira", sans-serif;
  font-size: 26px;
  line-height: 1.1;
  font-weight: 900;
  color: var(--b-deep);
}
.abd__toclist { margin: 0; padding: 0; list-style: none; counter-reset: abdt; }
.abd__tocn::before { counter-increment: abdt; content: counter(abdt, decimal-leading-zero); }
.abd__toclink {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 22px 6px 18px;
  border-left: 4px solid transparent;
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--b-deep);
  text-decoration: none;
  transition: background-color 0.25s var(--b-ease), color 0.25s var(--b-ease), border-color 0.25s var(--b-ease);
}
.abd__tocn { flex: none; width: 26px; font-family: "Saira", sans-serif; font-size: 15px; font-weight: 900; color: var(--b-blue); }
.abd__toclink:hover,
.abd__toclink:focus-visible,
.abd__toclink.is-on { border-left-color: var(--b-rim); background: var(--b-deep); color: var(--b-white); }
.abd__toclink:hover .abd__tocn,
.abd__toclink:focus-visible .abd__tocn,
.abd__toclink.is-on .abd__tocn { color: var(--b-rim); }
.abd__toclink:focus-visible { outline: 2px solid var(--b-blue); outline-offset: -2px; }

.abd__guide { display: grid; gap: 48px; counter-reset: abdg; }
.abd__gnum::before { counter-increment: abdg; content: counter(abdg, decimal-leading-zero); }
.abd__gcard { position: relative; margin: 0 14px 14px 0; scroll-margin-top: 24px; transition: transform 0.35s var(--b-ease); }
.abd__gcard:hover,
.abd__gcard:focus-within { transform: translateY(-5px); }
.abd__gback { position: absolute; inset: 14px -14px -14px 14px; background: var(--b-gold); }
.abd__gcard:nth-child(2n) .abd__gback { background: var(--b-deep); }
.abd__gsheet { position: relative; border: 3px solid var(--b-deep); background: var(--b-white); }
.abd__ghead {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 22px 30px 20px;
  border-bottom: 6px solid var(--b-gold);
  background: var(--b-navy);
  overflow: hidden;
}
.abd__ghead::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 140px;
  height: 100%;
  background: repeating-linear-gradient(-45deg, rgba(254, 214, 23, 0.12) 0 2px, transparent 2px 12px);
  pointer-events: none;
}
.abd__gnum {
  font-family: "Saira", sans-serif;
  font-size: 64px;
  line-height: 0.9;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 2px var(--b-rim);
}
.abd__gq { position: relative; display: grid; gap: 6px; margin: 0; }
.abd__gcity {
  font-family: "Saira", sans-serif;
  font-size: 36px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--b-rim);
}
.abd__gsep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.abd__gask { font-family: "Saira", sans-serif; font-size: 21px; line-height: 1.3; font-weight: 700; color: var(--b-white); }
.abd__gask::first-letter { text-transform: uppercase; }
.abd__gbody { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: start; padding: 28px 30px 4px; }
.abd__glines { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.abd__gline {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-family: "Instrument Sans", sans-serif;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--b-ink);
}
.abd__gtick { width: 28px; height: 28px; padding: 4px; background: var(--b-deep); fill: none; stroke: var(--b-rim); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.abd__gphoto { position: relative; width: 220px; margin: 0 12px 0 0; }
.abd__gframe {
  display: block;
  border: 6px solid var(--b-white);
  outline: 3px solid var(--b-deep);
  box-shadow: 12px 12px 0 var(--b-gold);
  overflow: hidden;
  transform: rotate(2deg);
  transition: transform 0.45s var(--b-ease);
}
.abd__gframe picture { display: block; }
.abd__gimg { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.abd__gcard:hover .abd__gframe,
.abd__gcard:focus-within .abd__gframe { transform: rotate(0deg); }
.abd__gtag { top: auto; bottom: 18px; right: -18px; }
.abd__gseal { width: 118px; height: 118px; margin-right: 6px; transform: rotate(-12deg); transition: transform 0.6s var(--b-ease); }
.abd__gcard:hover .abd__gseal,
.abd__gcard:focus-within .abd__gseal { transform: rotate(6deg); }
.abd__gsealrim { fill: var(--b-pale); stroke: var(--b-deep); stroke-width: 3; }
.abd__gsealin { fill: none; stroke: var(--b-blue); stroke-width: 2; stroke-dasharray: 4 4; }
.abd__gsealstar { fill: var(--b-gold); stroke: var(--b-deep); stroke-width: 3; }
.abd__gfoot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 20px;
  margin: 24px 30px 0;
  padding: 20px 0 26px;
  border-top: 2px dashed var(--b-rule);
}
.abd__gsrcs { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 0; list-style: none; }
.abd__gstamp {
  display: grid;
  margin: 0;
  gap: 8px;
  max-width: 440px;
  padding: 7px 12px 8px;
  border: 2px solid var(--b-blue);
  outline: 1px solid var(--b-blue);
  outline-offset: 2px;
  transform: rotate(-0.5deg);
}
.abd__gstamp:nth-child(2n) { transform: rotate(0.5deg); }
.abd__gstampk {
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 11.5px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--b-blue);
}
.abd__gsrclink {
  font-family: "Instrument Sans", sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: var(--b-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.abd__gsrclink:hover,
.abd__gsrclink:focus-visible { color: var(--b-blue); }
.abd__glink {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 3px solid var(--b-deep);
  background: var(--b-rim);
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--b-deep);
  text-decoration: none;
  transition: background-color 0.3s var(--b-ease), transform 0.3s var(--b-ease);
}
.abd__glink svg { width: 9px; height: 11px; fill: var(--b-deep); }
.abd__glink:hover,
.abd__glink:focus-visible { background: var(--b-gold); transform: translateX(4px); }
.abd__glink:focus-visible { outline: 2px solid var(--b-deep); outline-offset: 3px; }

@media (max-width: 1199px) {
  .abd__in--guide { grid-template-columns: 250px minmax(0, 1fr); gap: 44px; }
  .abd__gcity { font-size: 30px; }
  .abd__gphoto { width: 180px; }
}
@media (max-width: 978px) {
  .abd__in--guide { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .abd__toc { position: relative; top: 0; }
  .abd__railbox--toc { display: none; }
  .abd__toclist { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 18px 8px; }
  .abd__toclink { padding: 6px 12px; border: 2px solid var(--b-deep); }
  .abd__toclink:hover,
  .abd__toclink:focus-visible,
  .abd__toclink.is-on { border-color: var(--b-deep); }
}
@media (max-width: 766px) {
  .abd__in--guide { padding-top: 70px; }
  .abd__tocbox { box-shadow: 8px 8px 0 var(--b-gold); margin-right: 8px; }
  .abd__toclink { font-size: 13px; letter-spacing: 1px; }
  .abd__guide { gap: 34px; }
  .abd__gcard { margin: 0 10px 10px 0; }
  .abd__gback { inset: 10px -10px -10px 10px; }
  .abd__ghead { gap: 14px; padding: 16px 18px 14px; }
  .abd__ghead::after { width: 70px; }
  .abd__gnum { font-size: 42px; -webkit-text-stroke-width: 1.5px; }
  .abd__gcity { font-size: 25px; }
  .abd__gask { font-size: 17px; }
  .abd__gbody { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 20px 18px 4px; }
  .abd__gline { font-size: 15px; grid-template-columns: 26px minmax(0, 1fr); }
  .abd__gtick { width: 26px; height: 26px; }
  .abd__gphoto { width: min(240px, 72%); margin: 0 0 6px 6px; }
  .abd__gimg { aspect-ratio: 4 / 3; }
  .abd__gseal { display: none; }
  .abd__gfoot { margin: 20px 18px 0; padding: 16px 0 20px; }
  .abd__glink { width: 100%; justify-content: space-between; }
  .abd__card--lead .abd__fact { font-size: 18px; }
  .abd__rel--row { margin-top: 34px; }
  .abd__railbox--story { grid-template-columns: minmax(0, 1fr); margin: 34px 10px 0 0; }
  .abd__railbox--gold { margin-right: 10px; box-shadow: 10px 10px 0 var(--b-gold); }
}
@media (prefers-reduced-motion: reduce) {
  .abd__toclink,
  .abd__gcard,
  .abd__gframe,
  .abd__gseal,
  .abd__glink { transition: none; }
  .abd__gcard:hover,
  .abd__gcard:focus-within,
  .abd__glink:hover,
  .abd__glink:focus-visible { transform: none; }
  .abd__gcard:hover .abd__gframe,
  .abd__gcard:focus-within .abd__gframe { transform: rotate(2deg); }
  .abd__gcard:hover .abd__gseal,
  .abd__gcard:focus-within .abd__gseal { transform: rotate(-12deg); }
}

/* M1: each step plate shows the step: a ring icon from the homepage's line set, the words, and a crop of the job
   photo that shows that step in a white frame on a gold offset (no photo, the icon stands alone). */
.abd__plate { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 22px; align-items: center; }
.abd__plate--pic { grid-template-columns: 64px minmax(0, 1fr) 150px; }
.abd__sic { display: grid; place-items: center; width: 64px; height: 64px; border: 3px solid var(--b-gold); border-radius: 50%; background: var(--b-deep); transition: transform 0.4s var(--b-ease); }
.abd__sic svg { width: 36px; height: 36px; fill: none; stroke: var(--b-rim); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.abd__step:hover .abd__sic,
.abd__step:focus-visible .abd__sic { transform: rotate(-10deg) scale(1.06); }
.abd__stext { min-width: 0; }
.abd__scrop { position: relative; margin: 0; }
.abd__scrop picture { display: block; border: 5px solid var(--b-white); outline: 2px solid var(--b-deep); box-shadow: 8px 8px 0 var(--b-gold); overflow: hidden; transform: rotate(2deg); transition: transform 0.4s var(--b-ease); }
.abd__scropimg { display: block; width: 100%; height: 104px; object-fit: cover; transition: transform 0.6s var(--b-ease); }
.abd__step:hover .abd__scrop picture,
.abd__step:focus-visible .abd__scrop picture { transform: rotate(0deg); }
.abd__step:hover .abd__scropimg,
.abd__step:focus-visible .abd__scropimg { transform: scale(1.08); }
.abd__scroptag { position: absolute; left: -8px; bottom: -10px; padding: 3px 8px; border-left: 4px solid var(--b-rim); background: var(--b-deep); font-family: "Titillium Web", "Saira", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--b-white); }

/* M3: each guide city is an accordion (details): open on desktop, on a phone only the first opens (section.js);
   the chevron turns. B2: a city with no job photo shows its county with the city's pin lit. */
.abd__gsheet > summary { list-style: none; cursor: pointer; }
.abd__gsheet > summary::-webkit-details-marker { display: none; }
.abd__ghead { grid-template-columns: auto minmax(0, 1fr) 30px; }
.abd__gchev { position: relative; z-index: 1; width: 30px; height: 30px; fill: none; stroke: var(--b-rim); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--b-ease); }
.abd__gsheet:not([open]) .abd__gchev { transform: rotate(-90deg); }
.abd__gsheet:not([open]) .abd__ghead { border-bottom-width: 0; }
.abd__ghead:focus-visible { outline: 3px solid var(--b-rim); outline-offset: -6px; }
.abd__gmark { position: relative; width: 190px; margin: 0 12px 0 0; }
.abd__gmarkframe { display: block; border: 6px solid var(--b-white); outline: 3px solid var(--b-deep); box-shadow: 12px 12px 0 var(--b-gold); overflow: hidden; transform: rotate(-2deg); transition: transform 0.45s var(--b-ease); }
.abd__gmarkframe svg { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
.abd__gcard:hover .abd__gmarkframe,
.abd__gcard:focus-visible .abd__gmarkframe { transform: rotate(0deg); }
.abd__gsea { fill: #13398A; }
.abd__gland path { fill: var(--b-deep); stroke: #1D4E9E; stroke-width: 1; vector-effect: non-scaling-stroke; }
.abd__gco { fill: var(--b-blue); stroke: var(--b-rim); stroke-width: 2; vector-effect: non-scaling-stroke; }
.abd__gpin { fill: var(--b-rim); stroke: var(--b-deep); stroke-width: 2; vector-effect: non-scaling-stroke; }
/* a one-line answer sits in a compact card: smaller map, less air */
.abd__gcard--one .abd__gmark { width: 130px; }
.abd__gcard--one .abd__gbody { padding-top: 22px; align-items: center; }

/* B5 (About): no owners' photo yet, so their name plates hang on a licence belt beside a collage of their jobs,
   never on a photo of equipment. */
.abd__owners { position: relative; display: grid; gap: 0; }
.abd__jobs { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto; gap: 14px; margin: 0; padding: 0 0 0 0; list-style: none; }
.abd__job--1 { grid-row: 1 / 3; }
.abd__jobfig { position: relative; height: 100%; margin: 0; }
.abd__jobframe { display: block; height: 100%; border: 6px solid var(--b-white); outline: 2px solid var(--b-deep); box-shadow: 10px 10px 0 var(--b-gold); overflow: hidden; transition: transform 0.4s var(--b-ease); }
.abd__job--1 .abd__jobframe { transform: rotate(-2deg); }
.abd__job--2 .abd__jobframe { transform: rotate(2deg); }
.abd__job--3 .abd__jobframe { transform: rotate(-1deg); }
.abd__jobframe picture { display: block; height: 100%; }
.abd__jobimg { display: block; width: 100%; height: 100%; min-height: 150px; object-fit: cover; }
.abd__job:hover .abd__jobframe,
.abd__job:focus-visible .abd__jobframe { transform: rotate(0deg) translateY(-4px); }
.abd__jobtag { position: absolute; left: -8px; bottom: 14px; padding: 4px 10px; border-left: 5px solid var(--b-rim); background: var(--b-deep); font-family: "Titillium Web", "Saira", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--b-white); }
.abd__belt { position: relative; margin: 34px 0 0; padding: 22px 22px 22px; border: 3px solid var(--b-deep); background: var(--b-navy); box-shadow: 12px 12px 0 var(--b-gold); }
.abd__beltstrap { position: absolute; inset: 8px; border: 2px dashed rgba(255, 255, 255, 0.35); pointer-events: none; }
.abd__beltboard { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 16px; font-family: "Titillium Web", "Saira", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--b-tint); }
.abd__beltstar { width: 22px; height: 22px; fill: var(--b-rim); }
.abd__beltnum { margin-left: auto; font-family: "Saira", sans-serif; font-size: 22px; font-weight: 900; letter-spacing: 1px; color: var(--b-rim); }
.abd__belt .abd__names { margin: 0; }
@media (max-width: 766px) {
  .abd__plate,
  .abd__plate--pic { grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: start; }
  .abd__sic { width: 46px; height: 46px; border-width: 2px; }
  .abd__sic svg { width: 26px; height: 26px; }
  .abd__scrop { grid-column: 1 / -1; margin: 4px 8px 6px 0; }
  .abd__scropimg { height: 120px; }
  .abd__gmark { width: min(200px, 60%); margin: 0 0 6px 6px; }
  .abd__gcard--one .abd__gmark { width: 120px; }
  .abd__gchev { width: 24px; height: 24px; }
  .abd__ghead { grid-template-columns: auto minmax(0, 1fr) 24px; }
  .abd__beltnum { margin-left: 0; width: 100%; }
  .abd__belt { margin-right: 10px; box-shadow: 8px 8px 0 var(--b-gold); }
  .abd__jobs { margin-right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .abd__sic,
  .abd__scrop picture,
  .abd__scropimg,
  .abd__gchev,
  .abd__gmarkframe,
  .abd__jobframe { transition: none; }
  .abd__step:hover .abd__sic,
  .abd__step:focus-visible .abd__sic,
  .abd__step:hover .abd__scropimg,
  .abd__step:focus-visible .abd__scropimg { transform: none; }
  .abd__step:hover .abd__scrop picture,
  .abd__step:focus-visible .abd__scrop picture { transform: rotate(2deg); }
  .abd__gcard:hover .abd__gmarkframe,
  .abd__gcard:focus-visible .abd__gmarkframe { transform: rotate(-2deg); }
  .abd__job:hover .abd__jobframe,
  .abd__job:focus-visible .abd__jobframe { transform: none; }
}
/* M3 on a phone: the city list stays as a sticky jump bar at the top of the screen, one sideways row of chips
   with a fade at its edge, so a reader can jump between cities from anywhere in the guide. */
@media (max-width: 766px) {
  .abd__in--guide { align-items: start; }
  .abd__toc { position: sticky; top: 0; z-index: 5; gap: 0; margin: 0 -6vw; }
  .abd__tocbox { margin: 0; padding: 10px 0 10px; border-width: 0 0 3px; box-shadow: none; }
  .abd__tock { margin: 0 6vw 6px; padding: 0; border: 0; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; }
  .abd__toclist { flex-wrap: nowrap; overflow-x: auto; padding: 2px 6vw 4px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #011A47 85%, transparent); mask-image: linear-gradient(to right, #011A47 85%, transparent); }
  .abd__toclist::-webkit-scrollbar { display: none; }
  .abd__toclist li { flex: none; }
  .abd__toclist { position: relative; }
  .abd__gcard { scroll-margin-top: 96px; }
}
/* the county name sits under the mark, never over the map itself */
.abd__gmark .abd__gtag { position: relative; inset: auto; display: inline-block; margin: 14px 0 0 -6px; }

/* a city page's fact cards: the lead spans the row, the rest pair up; a last card left alone takes the full row
   so no half row stands empty */
.abd__facts--local .abd__card:not(.abd__card--lead):nth-child(even):last-child { grid-column: 1 / -1; }
/* a guide entry named for a whole county ("Unincorporated San Luis Obispo County") wraps its longest word on a
   phone rather than running under the chevron */
.abd__gcity { min-width: 0; overflow-wrap: anywhere; }
/* stage 3g: a service page's further copy. The first group's own sentences sit in a lede plate under the
   heading (pale ground, gold edge, a navy corner tick). Each later group is a panel on the rail column: its
   ring icon and heavy heading over a stitched rule, the sentences quiet under it, its points as gold-ticked
   rows; a big outlined numeral (02, 03) in its corner. The panels alternate white on a pale back plate and navy
   on a gold one. A group whose points are a sequence keeps the numbered step rail under its heading.
   Hover shifts the back plate and turns the ring; reduced motion holds them still. */
.abd__lede {
  position: relative;
  max-width: 760px;
  margin: -22px 0 52px;
  padding: 26px 32px 26px 34px;
  border-left: 8px solid var(--b-rim);
  background: var(--b-pale);
}
.abd__lede::after {
  content: "";
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 48px;
  height: 48px;
  border-right: 3px solid var(--b-navy);
  border-bottom: 3px solid var(--b-navy);
}
.abd__ledetext {
  margin: 0;
  font-family: "Instrument Sans", sans-serif;
  font-size: 19px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--b-ink);
}
.abd__ledetext + .abd__ledetext { margin-top: 14px; font-size: 16.5px; font-weight: 400; color: var(--b-mute); }
.abd__xgrps { counter-reset: abdx 1; isolation: isolate; display: grid; gap: 48px; margin-top: 72px; }
.abd__lede + .abd__xgrps { margin-top: 0; }
.abd__xgrp {
  position: relative;
  padding: 38px 40px 36px;
  border: 2px solid var(--b-deep);
  background: var(--b-white);
}
.abd__xgrp::after {
  content: "";
  position: absolute;
  inset: 14px -14px -14px 14px;
  z-index: -1;
  background: var(--b-pale);
  transition: transform 0.35s var(--b-ease);
}
.abd__xgrp::before {
  counter-increment: abdx;
  content: counter(abdx, decimal-leading-zero);
  position: absolute;
  top: 16px;
  right: 26px;
  font-family: "Saira", sans-serif;
  font-size: 84px;
  line-height: 1;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 2px var(--b-rule);
  pointer-events: none;
}
.abd__xgrp:nth-child(even) { background: var(--b-deep); color: var(--b-white); }
.abd__xgrp:nth-child(even)::after { background: var(--b-gold); }
.abd__xgrp:nth-child(even)::before { -webkit-text-stroke-color: #1D4E9E; }
.abd__xgrp:hover::after,
.abd__xgrp:focus-visible::after { transform: translate(5px, 5px); }
.abd__xhd {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 110px 22px 0;
  padding-bottom: 20px;
  border-bottom: 2px dashed var(--b-rule);
}
.abd__xgrp:nth-child(even) .abd__xhd { border-bottom-color: #1D4E9E; }
.abd__xring {
  flex: none;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 3px solid var(--b-gold);
  border-radius: 50%;
  background: var(--b-deep);
  transition: transform 0.4s var(--b-ease);
}
.abd__xring svg { width: 32px; height: 32px; fill: none; stroke: var(--b-rim); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.abd__xgrp:nth-child(even) .abd__xring { border-color: var(--b-white); background: var(--b-rim); }
.abd__xgrp:nth-child(even) .abd__xring svg { stroke: var(--b-deep); }
.abd__xgrp:hover .abd__xring,
.abd__xgrp:focus-visible .abd__xring { transform: rotate(-12deg) scale(1.06); }
.abd__xh3 {
  margin: 0;
  font-family: "Saira", sans-serif;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 900;
  color: var(--b-deep);
}
.abd__xgrp:nth-child(even) .abd__xh3 { color: var(--b-white); }
.abd__xtext {
  max-width: 680px;
  margin: 0 0 14px;
  font-family: "Instrument Sans", sans-serif;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--b-mute);
}
.abd__xhd + .abd__xtext { font-size: 18px; font-weight: 500; color: var(--b-ink); }
.abd__xgrp:nth-child(even) .abd__xtext { color: var(--b-tint); }
.abd__xgrp:nth-child(even) .abd__xhd + .abd__xtext { color: var(--b-white); }
.abd__xtext:last-child { margin-bottom: 0; }
.abd__xticks { display: grid; margin: 6px 0 0; padding: 0; list-style: none; }
.abd__xtick {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid var(--b-rule);
  font-family: "Instrument Sans", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--b-ink);
}
.abd__xtickic { width: 30px; height: 30px; padding: 5px; border-radius: 50%; background: var(--b-rim); fill: none; stroke: var(--b-deep); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.abd__xgrp.abd__xgrp--steps { padding: 0; border: 0; background: none; color: var(--b-ink); }
.abd__xgrp.abd__xgrp--steps::after,
.abd__xgrp.abd__xgrp--steps::before { content: none; }
.abd__xgrp.abd__xgrp--steps .abd__xhd { margin-right: 0; border-bottom-color: var(--b-rule); }
.abd__xgrp.abd__xgrp--steps .abd__xh3 { color: var(--b-deep); }
.abd__xgrp.abd__xgrp--steps .abd__xring { border-color: var(--b-gold); background: var(--b-deep); }
.abd__xgrp.abd__xgrp--steps .abd__xring svg { stroke: var(--b-rim); }
.abd__xgrp--steps .abd__steps { margin-top: 30px; }
@media (max-width: 766px) {
  .abd__lede { margin: -30px 0 40px; padding: 20px 20px 20px 22px; border-left-width: 6px; }
  .abd__lede::after { right: -6px; bottom: -6px; width: 32px; height: 32px; }
  .abd__ledetext { font-size: 17px; }
  .abd__ledetext + .abd__ledetext { font-size: 15.5px; }
  .abd__xgrps { gap: 40px; margin-top: 52px; }
  .abd__xgrp { margin-right: 10px; padding: 26px 20px 24px; }
  .abd__xgrp.abd__xgrp--steps { margin-right: 0; padding: 0; }
  .abd__xgrp::after { inset: 10px -10px -10px 10px; }
  .abd__xgrp::before { top: 12px; right: 14px; font-size: 52px; }
  .abd__xhd { gap: 14px; margin-right: 58px; padding-bottom: 16px; }
  .abd__xgrp.abd__xgrp--steps .abd__xhd { margin-right: 0; }
  .abd__xring { width: 46px; height: 46px; border-width: 2px; }
  .abd__xring svg { width: 26px; height: 26px; }
  .abd__xh3 { font-size: 23px; }
  .abd__xtext { font-size: 15.5px; }
  .abd__xhd + .abd__xtext { font-size: 16.5px; }
  .abd__xtick { grid-template-columns: 26px minmax(0, 1fr); gap: 12px; font-size: 15.5px; }
  .abd__xtickic { width: 26px; height: 26px; padding: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .abd__xgrp::after,
  .abd__xring { transition: none; }
  .abd__xgrp:hover::after,
  .abd__xgrp:focus-visible::after,
  .abd__xgrp:hover .abd__xring,
  .abd__xgrp:focus-visible .abd__xring { transform: none; }
}

/* George 2026-11-12: on a phone the section heads (eyebrow, heading, lead) sit centered, not pushed left */
@media (max-width: 766px) {
  .abd__head, .abd__eyebrow, .abd__fh2 { text-align: center; justify-content: center; }
  .abd__head > * { margin-left: auto; margin-right: auto; }
}

/* George 2026-11-12: tiny hints of the logo's red */
.abd__beltstar { fill: #C50103; }

/* client.rule */
/* client.rule - component (why, brand-led). The local rule as an official stamped record. A pale band with the
   rule's word huge in outline behind; a white record card on a navy offset plate, ruled twice like a printed form:
   a navy head with "Local rule" and the authority in gold caps, the logo's star seal stamped over the corner at a
   tilt, the homeowner's question as the biggest line, the answer on a gold-edged ruling strip, the record's lines
   ticked in gold and the source line with its checked month. Hover lifts the card and turns the seal a little.
   Reduced motion: still. */
.arl {
  --r-navy: #012668;
  --r-deep: #011A47;
  --r-blue: #013A97;
  --r-gold: #F2C40F;
  --r-rim: #FED617;
  --r-cream: #FDF3C8;
  --r-pale: #EAF0F8;
  --r-ink: #22324A;
  --r-mute: #56657D;
  --r-rule: #D3DDEB;
  --r-white: #FFFFFF;
  --r-ease: cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.arl__band {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  padding: 110px 0 120px;
  border-radius: 0 150px 0 0;
  background: var(--r-pale);
  overflow: hidden;
}
.arl__ghost {
  position: absolute;
  left: -20px;
  bottom: -60px;
  font-family: "Saira", sans-serif;
  font-size: 320px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -6px;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 3px rgba(1, 38, 104, 0.09);
  pointer-events: none;
  user-select: none;
}
.arl__in { position: relative; width: 88%; max-width: 1000px; margin: 0 auto; }
.arl__card { position: relative; margin: 0 18px 18px 0; transition: transform 0.4s var(--r-ease); }
.arl__card:hover,
.arl__card:focus-within { transform: translateY(-6px); }
.arl__back { position: absolute; inset: 18px -18px -18px 18px; background: var(--r-deep); }
.arl__sheet {
  position: relative;
  border: 3px solid var(--r-deep);
  outline: 1px solid var(--r-deep);
  outline-offset: -10px;
  background: var(--r-white);
}
.arl__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 22px;
  padding: 26px 160px 22px 40px;
  border-bottom: 6px solid var(--r-gold);
  background: var(--r-navy);
}
.arl__kicker {
  margin: 0;
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--r-pale);
}
.arl__authority {
  margin: 0;
  font-family: "Saira", sans-serif;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--r-rim);
}
.arl__seal {
  position: absolute;
  z-index: 2;
  top: -44px;
  right: -36px;
  width: 150px;
  height: 150px;
  transform: rotate(-14deg);
  transition: transform 0.6s var(--r-ease);
}
.arl__card:hover .arl__seal,
.arl__card:focus-within .arl__seal { transform: rotate(4deg) scale(1.04); }
.arl__sealrim { fill: var(--r-rim); stroke: var(--r-deep); stroke-width: 3; }
.arl__sealin { fill: var(--r-deep); stroke: var(--r-rim); stroke-width: 2; stroke-dasharray: 4 4; }
.arl__sealstar { fill: var(--r-deep); }
.arl__sealmark { fill: var(--r-rim); }
.arl__body { padding: 40px 40px 34px; }
.arl__q {
  margin: 0 0 24px;
  max-width: 760px;
  font-family: "Saira", sans-serif;
  font-size: 40px;
  line-height: 1.15;
  font-weight: 900;
  color: var(--r-deep);
}
.arl__answer {
  margin: 0 0 26px;
  padding: 18px 22px;
  border-left: 8px solid var(--r-gold);
  background: var(--r-cream);
  font-family: "Saira", sans-serif;
  font-size: 20px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--r-deep);
}
.arl__lines { display: grid; gap: 12px; margin: 0 0 26px; padding: 0; list-style: none; }
.arl__line {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-family: "Instrument Sans", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--r-ink);
}
.arl__tick {
  width: 30px;
  height: 30px;
  padding: 4px;
  background: var(--r-deep);
  fill: none;
  stroke: var(--r-rim);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.arl__src {
  margin: 0;
  padding-top: 18px;
  border-top: 2px dashed var(--r-rule);
  font-family: "Instrument Sans", sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--r-mute);
}
.arl__srck {
  margin-left: 10px;
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--r-blue);
}
.arl__srclink { color: var(--r-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.arl__srclink:hover,
.arl__srclink:focus-visible { color: var(--r-blue); }

/* City plates, the guide button, stamped source lines and the checked note (city hub, city page, guide). */
.arl__cities { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 30px; padding: 0; list-style: none; }
.arl__city {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 10px 12px;
  border: 2px solid var(--r-deep);
  border-radius: 999px;
  background: var(--r-navy);
  box-shadow: 4px 4px 0 var(--r-gold);
  font-family: "Saira", sans-serif;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--r-rim);
  text-decoration: none;
  transition: transform 0.3s var(--r-ease), box-shadow 0.3s var(--r-ease);
}
.arl__citystar { width: 22px; height: 22px; fill: var(--r-rim); }
a.arl__city:hover,
a.arl__city:focus-visible { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--r-gold); }
a.arl__city:focus-visible { outline: 2px solid var(--r-deep); outline-offset: 4px; }
.arl__btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  margin: 0 0 28px;
  padding: 0 28px;
  background: var(--r-rim);
  border-bottom: 4px solid var(--r-deep);
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--r-deep);
  text-decoration: none;
  transition: background 0.3s var(--r-ease), transform 0.3s var(--r-ease);
}
.arl__btn svg { width: 10px; height: 12px; fill: var(--r-deep); }
.arl__btn:hover,
.arl__btn:focus-visible { background: var(--r-gold); transform: translateX(4px); }
.arl__btn:focus-visible { outline: 2px solid var(--r-deep); outline-offset: 3px; }
.arl__srcs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin: 0;
  padding: 20px 0 0;
  border-top: 2px dashed var(--r-rule);
  list-style: none;
}
.arl__stamp {
  display: grid;
  margin: 0;
  gap: 8px;
  padding: 8px 14px 9px;
  border: 2px solid var(--r-blue);
  outline: 1px solid var(--r-blue);
  outline-offset: 2px;
  transform: rotate(-0.5deg);
  font-family: "Instrument Sans", sans-serif;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--r-mute);
}
.arl__stamp:nth-child(2n) { transform: rotate(0.5deg); }
.arl__stampk {
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--r-blue);
}
.arl__note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--r-blue);
}
.arl__noteic { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--r-blue); stroke-width: 2.4; stroke-linecap: round; }

/* B6: with a map the band is two columns, the record card on the left and the rule's own county on the right
   (its pin lit and pulsing), so no pale sides are left at 1440. */
.arl__in--map {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  width: 88%;
  max-width: 1240px;
}
.arl__map { position: relative; margin: 0 18px 18px 0; }
.arl__mapback { position: absolute; inset: 18px -18px -18px 18px; background: var(--r-gold); }
.arl__mapframe { position: relative; border: 6px solid var(--r-deep); background: var(--r-deep); overflow: hidden; }
.arl__svg { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
.arl__sea { fill: #13398A; }
.arl__land path { fill: var(--r-deep); stroke: #1D4E9E; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.arl__co { fill: var(--r-blue); stroke: var(--r-rim); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.arl__pindot { fill: var(--r-rim); stroke: var(--r-deep); stroke-width: 2; vector-effect: non-scaling-stroke; }
.arl__pin--home .arl__pindot { fill: #C50103; stroke: var(--r-white); stroke-width: 3; }
.arl__pinpulse { fill: none; stroke: var(--r-rim); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0;
  transform-box: fill-box; transform-origin: center; animation: arl-pulse 2.6s var(--r-ease) infinite; }
@keyframes arl-pulse { 0% { opacity: 0.9; transform: scale(0.4); } 100% { opacity: 0; transform: scale(1); } }
.arl__stampmap {
  position: absolute;
  right: 0;
  top: 0;
  display: grid;
  gap: 2px;
  max-width: 70%;
  margin: 0;
  padding: 10px 16px;
  border-left: 5px solid var(--r-rim);
  background: var(--r-deep);
}
.arl__mstk { font-family: "Titillium Web", "Saira", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #B9C7DD; }
.arl__mstv { font-family: "Saira", sans-serif; font-size: 18px; line-height: 1.15; font-weight: 900; text-transform: uppercase; color: var(--r-rim); }
.arl__mapkey { position: relative; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 34px 0 0; }
.arl__mapcity { position: relative; padding-left: 16px; font-family: "Titillium Web", "Saira", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--r-navy); }
.arl__mapcity::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -5px; border: 2px solid var(--r-deep); border-radius: 50%; background: var(--r-rim); }
.arl--navy .arl__mapcity { color: var(--r-pale); }
.arl--navy .arl__mapback { background: var(--r-rim); }

/* Navy ground: the rule band dark between two light bands. */
.arl--navy .arl__band { background: var(--r-navy); }
.arl--navy .arl__ghost { -webkit-text-stroke-color: rgba(254, 214, 23, 0.12); }
.arl--navy .arl__back { background: var(--r-rim); }

@media (max-width: 978px) {
  .arl__in--map { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .arl__map { max-width: 420px; }
}
@media (max-width: 1199px) {
  .arl__band { border-radius: 0 100px 0 0; }
  .arl__ghost { font-size: 240px; }
}
@media (max-width: 766px) {
  .arl__mstv { font-size: 15px; }
  .arl__stampmap { padding: 8px 12px; }
  .arl__band { padding: 80px 0 90px; border-radius: 0 60px 0 0; }
  .arl__ghost { font-size: 130px; bottom: -24px; letter-spacing: -2px; }
  .arl__card { margin: 0 10px 10px 0; }
  .arl__back { inset: 10px -10px -10px 10px; }
  .arl__head { padding: 18px 90px 16px 20px; }
  .arl__kicker { font-size: 12px; letter-spacing: 2px; }
  .arl__authority { font-size: 22px; }
  .arl__seal { top: -34px; right: -16px; width: 96px; height: 96px; }
  .arl__body { padding: 24px 20px 22px; }
  .arl__q { font-size: 27px; }
  .arl__answer { padding: 14px 16px; font-size: 17px; border-left-width: 6px; }
  .arl__line { font-size: 15px; grid-template-columns: 26px minmax(0, 1fr); }
  .arl__city { font-size: 15px; padding: 8px 16px 8px 10px; }
  .arl__btn { width: 100%; justify-content: space-between; padding: 0 20px; font-size: 14px; }
  .arl__tick { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .arl__pinpulse { animation: none; }
  .arl__card,
  .arl__seal { transition: none; }
  .arl__card:hover,
  .arl__card:focus-within,
  a.arl__city:hover,
  a.arl__city:focus-visible,
  .arl__btn:hover,
  .arl__btn:focus-visible { transform: none; }
  .arl__city,
  .arl__btn { transition: none; }
  .arl__card:hover .arl__seal,
  .arl__card:focus-within .arl__seal { transform: rotate(-14deg); }
}

/* client.job-story */
/* client.job-story - one job told in its own photos (stage 3e jobs). A white band: faint stars and the job's place
   as giant outlined ghost type behind the head, a pale stage with one round corner behind the reel and a gold
   stitched line along it. Head: eyebrow, heavy H2 with one phrase on a gold block, the story's index as numbered
   rows; on the right the job plate (navy card on a gold offset plate, the logo's belt plate on top, the city large,
   what is in the closet, the services as gold chips). Then the reel: each photo in a white frame with the city on
   its belt plate, a pinging gold dot on what the line names, a stitched leader down to the callout card. */
.ajs {
  --js-navy: #012668;
  --js-deep: #011A47;
  --js-royal: #1D4E9E;
  --js-gold: #F2C40F;
  --js-rim: #FED617;
  --js-pale: #EAF0F8;
  --js-ink: #22324A;
  --js-mute: #56657D;
  --js-rule: #D3DDEB;
  --js-white: #FFFFFF;
  --js-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --js-h: 560px;
  position: relative;
  padding: 100px 0 90px;
  background: var(--js-white);
  overflow: clip;
}
.ajs__air { position: absolute; inset: 0; pointer-events: none; }
.ajs__star { position: absolute; fill: var(--js-pale); }
.ajs__star--a { top: -40px; left: -110px; width: 380px; height: 380px; transform: rotate(-12deg); }
.ajs__star--b { top: 120px; right: 34%; width: 160px; height: 160px; transform: rotate(18deg); opacity: 0.8; }
.ajs__ghost {
  position: absolute;
  top: 18px;
  right: -16px;
  font-family: "Saira", sans-serif;
  font-size: 190px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -2px;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px rgba(1, 38, 104, 0.09);
  user-select: none;
}
.ajs__in { position: relative; z-index: 1; width: 88%; max-width: 1200px; margin: 0 auto; }

/* the head: title and index left, the job plate right */
.ajs__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  gap: 70px;
  align-items: start;
  margin-bottom: 80px;
}
.ajs__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-family: "Titillium Web", sans-serif;
  font-size: 17px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--js-royal);
}
.ajs__eyebrow::before { content: none; width: 34px; height: 8px; background: var(--js-gold); transform: skewX(-24deg); }
.ajs__h2 {
  margin: 0 0 40px;
  font-family: "Saira", sans-serif;
  font-size: 64px;
  line-height: 1.08;
  font-weight: 900;
  color: var(--js-deep);
}
.ajs__hl {
  padding: 0 10px;
  background: var(--js-gold);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.ajs__index { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--js-rule); }
.ajs__jump {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 16px;
  padding: 14px 6px 14px 0;
  border-bottom: 2px solid var(--js-rule);
  color: var(--js-deep);
  text-decoration: none;
  transition: background-color 0.3s var(--js-ease);
}
.ajs__jump::after {
  content: "";
  width: 12px;
  height: 12px;
  border-top: 3px solid var(--js-royal);
  border-right: 3px solid var(--js-royal);
  transform: rotate(45deg);
  transition: transform 0.3s var(--js-ease);
}
.ajs__jn {
  font-family: "Saira", sans-serif;
  font-size: 46px;
  line-height: 1;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 2px var(--js-navy);
  transition: color 0.3s var(--js-ease);
}
.ajs__jt {
  font-family: "Titillium Web", sans-serif;
  font-size: 19px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.ajs__jump:hover, .ajs__jump:focus-visible, .ajs__jump.is-on { background: var(--js-pale); }
.ajs__jump:hover .ajs__jn, .ajs__jump:focus-visible .ajs__jn, .ajs__jump.is-on .ajs__jn { color: var(--js-gold); }
.ajs__jump:hover::after, .ajs__jump:focus-visible::after { transform: translateX(4px) rotate(45deg); }
.ajs__jump:focus-visible { outline: 3px solid var(--js-royal); outline-offset: 2px; }

/* the job plate */
.ajs__plate { position: relative; margin: 26px 14px 14px 0; }
.ajs__plateback { position: absolute; inset: 14px -14px -14px 14px; border-bottom-right-radius: 60px; background: var(--js-gold); }
.ajs__platein {
  position: relative;
  padding: 48px 34px 34px;
  border-top: 5px solid var(--js-rim);
  border-bottom-right-radius: 60px;
  background: var(--js-navy);
  color: var(--js-white);
}
.ajs__belt {
  position: absolute;
  top: -30px;
  left: 50%;
  width: 150px;
  height: 46px;
  translate: -50% 0;
  padding: 2px;
  background: var(--js-rim);
  -webkit-mask: url("public/brand/belt-plate.svg") 0 0 / 100% 100% no-repeat;
  mask: url("public/brand/belt-plate.svg") 0 0 / 100% 100% no-repeat;
}
.ajs__beltin {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding-top: 6px;
  background: var(--js-deep);
  -webkit-mask: url("public/brand/belt-plate.svg") 0 0 / 100% 100% no-repeat;
  mask: url("public/brand/belt-plate.svg") 0 0 / 100% 100% no-repeat;
}
.ajs__beltstar { width: 22px; height: 22px; fill: var(--js-rim); }
.ajs__rows { display: grid; gap: 22px; margin: 0; }
.ajs__row { display: grid; gap: 10px; }
.ajs__row + .ajs__row { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.35); }
.ajs__dt {
  font-family: "Titillium Web", sans-serif;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--js-rim);
}
.ajs__dd { margin: 0; }
.ajs__city {
  margin: 0;
  font-family: "Saira", sans-serif;
  font-size: 40px;
  line-height: 1.05;
  font-weight: 900;
  color: var(--js-white);
}
.ajs__kit { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ajs__kitrow { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.ajs__k {
  font-family: "Titillium Web", sans-serif;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--js-white);
}
.ajs__v { font-family: "Instrument Sans", sans-serif; font-size: 15px; line-height: 1.4; color: #C8D4EA; }
.ajs__svcs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ajs__svc {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1.5px solid var(--js-gold);
  font-family: "Titillium Web", sans-serif;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--js-rim);
  text-decoration: none;
}
.ajs__svc--link { background: var(--js-gold); color: var(--js-deep); transition: background-color 0.3s var(--js-ease); }
.ajs__arrow { width: 16px; height: 12px; fill: currentColor; transition: transform 0.3s var(--js-ease); }
.ajs__svc--link:hover, .ajs__svc--link:focus-visible { background: var(--js-white); }
.ajs__svc--link:hover .ajs__arrow, .ajs__svc--link:focus-visible .ajs__arrow { transform: translateX(5px); }
.ajs__svc--link:focus-visible { outline: 3px solid var(--js-rim); outline-offset: 3px; }

/* the stage and the reel */
.ajs__stage { position: relative; }
.ajs__stage::before {
  content: "";
  position: absolute;
  top: 120px;
  bottom: -90px;
  left: 0;
  right: 0;
  border-top-left-radius: 150px;
  background: var(--js-pale);
}
.ajs__stage::after {
  content: "";
  position: absolute;
  top: 146px;
  left: 6%;
  right: 0;
  border-top: 2px dashed var(--js-gold);
}
.ajs__reel {
  position: relative;
  z-index: 1;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: max(6%, calc((100% - 1200px) / 2));
  scrollbar-width: none;
}
.ajs__reel::-webkit-scrollbar { display: none; }
.ajs__reel:focus-visible { outline: 3px solid var(--js-royal); outline-offset: -3px; }
.ajs__track {
  display: flex;
  gap: 56px;
  width: max-content;
  margin: 0;
  padding: 10px max(6%, calc((100vw - 1200px) / 2)) 30px;
  list-style: none;
}
.ajs__slide { flex: 0 0 auto; scroll-snap-align: start; }
.ajs__fig { position: relative; margin: 0; }
.ajs__frame {
  position: relative;
  height: var(--js-h);
  border: 6px solid var(--js-white);
  border-top-right-radius: 90px;
  background: var(--js-deep);
  box-shadow: 0 0 0 2px var(--js-navy), 16px 16px 0 var(--js-navy);
}
.ajs__slide--tall .ajs__frame { aspect-ratio: 3 / 4; }
.ajs__slide--wide .ajs__frame { aspect-ratio: 4 / 3; }
.ajs__slide--wide:has(.ajs__video) .ajs__frame { aspect-ratio: 16 / 9; }
.ajs__zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; border-top-right-radius: 84px; }
.ajs__zoom:focus-visible { outline: 3px solid var(--js-rim); outline-offset: -6px; }
.ajs__frame picture, .ajs__img { display: block; width: 100%; height: 100%; }
.ajs__img { object-fit: cover; border-top-right-radius: 84px; transition: transform 0.6s var(--js-ease); }
.ajs__zoom:hover .ajs__img, .ajs__zoom:focus-visible .ajs__img { transform: scale(1.04); }
.ajs__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s var(--js-ease); }
.ajs__video.is-on { opacity: 1; }
.ajs__open {
  position: absolute;
  top: 16px;
  left: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--js-deep);
  border: 2px solid var(--js-rim);
}
.ajs__open svg { width: 20px; height: 20px; fill: var(--js-rim); }

/* the dot on what the line names, and the stitched leader down to the callout */
.ajs__dot {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  translate: -50% -50%;
  border: 3px solid var(--js-deep);
  border-radius: 50%;
  background: var(--js-gold);
  font-family: "Saira", sans-serif;
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
  color: var(--js-deep);
  pointer-events: none;
}
.ajs__dot::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 2px solid var(--js-rim);
  border-radius: 50%;
  animation: ajs-ping 2.4s var(--js-ease) infinite;
}
@keyframes ajs-ping { from { transform: scale(0.6); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.ajs__lead { position: absolute; z-index: 1; bottom: 0; border-left: 3px dashed var(--js-rim); translate: -1.5px 0; pointer-events: none; }
.ajs__x1 { left: 10%; } .ajs__x2 { left: 20%; } .ajs__x3 { left: 30%; } .ajs__x4 { left: 40%; } .ajs__x5 { left: 50%; }
.ajs__x6 { left: 60%; } .ajs__x7 { left: 70%; } .ajs__x8 { left: 80%; } .ajs__x9 { left: 90%; }
.ajs__y1 { top: 10%; } .ajs__y2 { top: 20%; } .ajs__y3 { top: 30%; } .ajs__y4 { top: 40%; } .ajs__y5 { top: 50%; }
.ajs__y6 { top: 60%; } .ajs__y7 { top: 70%; } .ajs__y8 { top: 80%; } .ajs__y9 { top: 90%; }

/* the city on the logo's belt plate, top right of the frame */
.ajs__tagplate {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: 210px;
  height: 46px;
  translate: -50% -50%;
  padding: 2px;
  background: var(--js-rim);
  -webkit-mask: url("public/brand/belt-plate.svg") 0 0 / 100% 100% no-repeat;
  mask: url("public/brand/belt-plate.svg") 0 0 / 100% 100% no-repeat;
}
.ajs__tagcity {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 7px 12px 0;
  background: var(--js-navy);
  -webkit-mask: url("public/brand/belt-plate.svg") 0 0 / 100% 100% no-repeat;
  mask: url("public/brand/belt-plate.svg") 0 0 / 100% 100% no-repeat;
  font-family: "Titillium Web", sans-serif;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--js-rim);
}

/* the callout card under the photo, overlapping its foot */
.ajs__call {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 16px;
  width: min(100% - 40px, 440px);
  contain: inline-size;
  margin: -54px 0 0 22px;
  padding: 20px 22px 22px;
  border-left: 6px solid var(--js-gold);
  background: var(--js-white);
  box-shadow: 0 0 0 2px var(--js-navy), 10px 10px 0 var(--js-gold);
}
.ajs__cn {
  grid-row: span 2;
  font-family: "Saira", sans-serif;
  font-size: 44px;
  line-height: 0.9;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 2px var(--js-navy);
}
.ajs__ct {
  font-family: "Titillium Web", sans-serif;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--js-deep);
}
.ajs__cx { font-family: "Instrument Sans", sans-serif; font-size: 15px; line-height: 1.5; color: var(--js-mute); }

/* the controls */
.ajs__nav { display: flex; align-items: center; gap: 22px; margin-top: 34px; }
.ajs__nav[hidden] { display: none; }
.ajs__btn {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border: 0;
  background: var(--js-navy);
  cursor: pointer;
  transition: background-color 0.3s var(--js-ease);
}
.ajs__btn svg { width: 20px; height: 15px; fill: var(--js-rim); }
.ajs__btn--prev svg { transform: scaleX(-1); }
.ajs__btn:hover, .ajs__btn:focus-visible { background: var(--js-royal); }
.ajs__btn:focus-visible { outline: 3px solid var(--js-gold); outline-offset: 3px; }
.ajs__dots { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ajs__dotbtn {
  min-width: 48px;
  height: 44px;
  padding: 0 8px;
  border: 2px solid var(--js-navy);
  background: var(--js-white);
  font-family: "Saira", sans-serif;
  font-size: 17px;
  font-weight: 900;
  color: var(--js-navy);
  cursor: pointer;
  transition: background-color 0.3s var(--js-ease), color 0.3s var(--js-ease);
}
.ajs__dotbtn[aria-current="true"] { background: var(--js-gold); border-color: var(--js-gold); color: var(--js-deep); }
.ajs__dotbtn:hover { background: var(--js-navy); color: var(--js-white); }
.ajs__dotbtn:focus-visible { outline: 3px solid var(--js-royal); outline-offset: 2px; }
.ajs__bar { display: flex; flex: 1 1 auto; gap: 6px; }
.ajs__seg { flex: 1 1 0; height: 4px; background: var(--js-rule); transition: background-color 0.5s var(--js-ease); }
.ajs__seg.is-on { background: var(--js-gold); }

/* the lightbox */
.ajs__box {
  max-width: min(92vw, 1100px);
  max-height: 92vh;
  padding: 0;
  border: 6px solid var(--js-white);
  background: var(--js-deep);
  box-shadow: 14px 14px 0 var(--js-gold);
  overflow: visible;
}
.ajs__box::backdrop { background: rgba(1, 26, 71, 0.86); }
.ajs__boximg { display: block; max-width: 100%; max-height: calc(92vh - 12px); width: auto; height: auto; }
.ajs__close {
  position: absolute;
  top: -22px;
  right: -22px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 0;
  background: var(--js-gold);
  font-family: "Titillium Web", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--js-deep);
  cursor: pointer;
}
.ajs__close svg { width: 16px; height: 16px; fill: currentColor; }
.ajs__close:focus-visible { outline: 3px solid var(--js-white); outline-offset: 3px; }

@media (max-width: 1199px) {
  .ajs { --js-h: 480px; }
  .ajs__h2 { font-size: 54px; }
  .ajs__head { gap: 50px; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
}
@media (max-width: 978px) {
  .ajs__head { grid-template-columns: minmax(0, 1fr); gap: 50px; margin-bottom: 60px; }
  .ajs__plate { max-width: 560px; }
  .ajs__ghost { font-size: 130px; }
}
@media (max-width: 766px) {
  .ajs { padding: 70px 0 70px; }
  .ajs__ghost { font-size: 84px; top: 10px; }
  .ajs__star--a { width: 240px; height: 240px; }
  .ajs__star--b { display: none; }
  .ajs__eyebrow { font-size: 15px; }
  .ajs__h2 { font-size: 40px; margin-bottom: 28px; }
  .ajs__jump { grid-template-columns: 52px minmax(0, 1fr) 18px; gap: 12px; padding: 12px 4px 12px 0; }
  .ajs__jn { font-size: 34px; }
  .ajs__jt { font-size: 15px; letter-spacing: 1.5px; }
  .ajs__platein { padding: 44px 22px 26px; border-bottom-right-radius: 40px; }
  .ajs__plateback { border-bottom-right-radius: 40px; inset: 10px -10px -10px 10px; }
  .ajs__plate { margin-right: 10px; }
  .ajs__city { font-size: 32px; }
  .ajs__kitrow { grid-template-columns: 96px minmax(0, 1fr); }
  .ajs__k { font-size: 13px; letter-spacing: 1px; }
  .ajs__v { font-size: 14px; }
  .ajs__svc { font-size: 12.5px; letter-spacing: 1px; padding: 8px 12px; }
  .ajs__stage::before { top: 90px; border-top-left-radius: 60px; }
  .ajs__stage::after { top: 110px; }
  .ajs__reel { scroll-padding-left: 6%; }
  .ajs__track { gap: 26px; padding: 10px 6% 24px; }
  .ajs__frame { height: auto; border-width: 4px; border-top-right-radius: 50px; box-shadow: 0 0 0 2px var(--js-navy), 10px 10px 0 var(--js-navy); }
  .ajs__slide--tall .ajs__frame { width: 74vw; }
  .ajs__slide--wide .ajs__frame { width: 84vw; }
  .ajs__zoom, .ajs__img { border-top-right-radius: 46px; }
  .ajs__tagplate { width: 170px; height: 40px; }
  .ajs__tagcity { font-size: 11px; letter-spacing: 1.2px; }
  .ajs__dot { width: 32px; height: 32px; font-size: 15px; }
  .ajs__call { width: calc(100% - 16px); margin: -34px 0 0 8px; padding: 16px 16px 18px; gap: 4px 12px; box-shadow: 0 0 0 2px var(--js-navy), 7px 7px 0 var(--js-gold); }
  .ajs__cn { font-size: 34px; }
  .ajs__ct { font-size: 14.5px; letter-spacing: 1.5px; }
  .ajs__cx { font-size: 14px; }
  .ajs__nav { gap: 12px; margin-top: 26px; }
  .ajs__btn { width: 46px; height: 46px; }
  .ajs__dotbtn { min-width: 44px; font-size: 15px; }
  .ajs__bar { display: none; }
  .ajs__close { top: -18px; right: -6px; }
}
@media (prefers-reduced-motion: reduce) {
  .ajs__dot::after { animation: none; opacity: 0.6; }
  .ajs__jump, .ajs__jump::after, .ajs__jn, .ajs__img, .ajs__video, .ajs__seg, .ajs__svc--link, .ajs__arrow, .ajs__btn, .ajs__dotbtn { transition: none; }
  .ajs__zoom:hover .ajs__img, .ajs__zoom:focus-visible .ajs__img { transform: none; }
}

/* the numbers are counters, so no figure on the page is a claim */
.ajs__index { counter-reset: ajsj; }
.ajs__jn::before { counter-increment: ajsj; content: counter(ajsj, decimal-leading-zero); }
.ajs__track { counter-reset: ajsc; }
.ajs__slide { counter-increment: ajsc; }
.ajs__dot::before { content: counter(ajsc); }
.ajs__cn::before { content: counter(ajsc, decimal-leading-zero); }
.ajs__dots { counter-reset: ajsd; }
.ajs__dotbtn::before { counter-increment: ajsd; content: counter(ajsd, decimal-leading-zero); }

/* a one-photo job (stage 3g): no reel and no index of one. The title, then the photo large beside the job plate,
   and under the plate the county the job is in, cut from the territory map with its pin lit and pulsing (B2), so
   neither side of the band is left empty at 1440. A pale stage with one round corner and a gold stitched line sits
   behind the lower half, as behind the reel. */
.ajs--solo::before {
  content: "";
  position: absolute;
  top: 330px;
  bottom: 0;
  left: 0;
  right: 0;
  border-top-left-radius: 150px;
  background: var(--js-pale);
}
.ajs--solo::after {
  content: "";
  position: absolute;
  top: 356px;
  left: 6%;
  right: 0;
  border-top: 2px dashed var(--js-gold);
}
.ajs__solo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "title plate" "one plate" "one map";
  column-gap: 70px;
  align-items: start;
}
.ajs__solo .ajs__title { grid-area: title; }
.ajs__solo .ajs__h2 { margin-bottom: 44px; }
.ajs__solo .ajs__plate { grid-area: plate; }
.ajs__one { grid-area: one; padding: 0 16px 16px 0; }
.ajs__one .ajs__frame { height: auto; width: 100%; aspect-ratio: 4 / 3; }
.ajs__one.ajs__slide--tall .ajs__frame { aspect-ratio: 4 / 5; }
.ajs__one .ajs__call { width: min(100% - 40px, 520px); }
.ajs__map {
  grid-area: map;
  position: relative;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  margin: 60px 14px 0 0;
}
.ajs__mapback { position: absolute; inset: 14px -14px 52px 14px; background: var(--js-gold); }
.ajs__mapframe {
  position: relative;
  flex: 1 1 auto;
  min-height: 300px;
  border: 6px solid var(--js-deep);
  background: var(--js-deep);
  overflow: hidden;
}
.ajs__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ajs__sea { fill: #13398A; }
.ajs__land path { fill: var(--js-deep); stroke: var(--js-royal); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ajs__co { fill: #013A97; stroke: var(--js-rim); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ajs__pindot { fill: var(--js-rim); stroke: var(--js-deep); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ajs__pinpulse { fill: none; stroke: var(--js-rim); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0;
  transform-box: fill-box; transform-origin: center; animation: ajs-pulse 2.6s var(--js-ease) infinite; }
@keyframes ajs-pulse { 0% { opacity: 0.9; transform: scale(0.4); } 100% { opacity: 0; transform: scale(1); } }
.ajs__stamp {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  gap: 2px;
  max-width: 75%;
  margin: 0;
  padding: 10px 16px;
  border-left: 5px solid var(--js-rim);
  background: var(--js-deep);
}
.ajs__stk { font-family: "Titillium Web", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #B9C7DD; }
.ajs__stv { font-family: "Saira", sans-serif; font-size: 18px; line-height: 1.15; font-weight: 900; text-transform: uppercase; color: var(--js-rim); }
.ajs__mapkey { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; min-height: 52px; margin: 0; padding-top: 22px; }
.ajs__mapcity { position: relative; padding-left: 18px; font-family: "Titillium Web", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--js-deep); }
.ajs__mapcity::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin-top: -6px; border: 2px solid var(--js-deep); border-radius: 50%; background: var(--js-rim); }
.ajs__maplink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 4px;
  font-family: "Titillium Web", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--js-navy);
  text-decoration: underline;
  text-decoration-color: var(--js-gold);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}
.ajs__maplink:hover .ajs__arrow, .ajs__maplink:focus-visible .ajs__arrow { transform: translateX(5px); }
.ajs__maplink:focus-visible { outline: 3px solid var(--js-royal); outline-offset: 2px; }
@media (max-width: 1199px) {
  .ajs__solo { column-gap: 50px; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
}
@media (max-width: 978px) {
  .ajs__solo { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "title" "one" "plate" "map"; }
  .ajs__solo .ajs__plate { max-width: 560px; margin-top: 70px; }
  .ajs__map { max-width: 560px; margin-top: 60px; }
  .ajs__mapframe { flex: none; aspect-ratio: 4 / 3; min-height: 0; }
  .ajs--solo::before { top: 300px; }
  .ajs--solo::after { top: 326px; }
}
@media (max-width: 766px) {
  .ajs__solo .ajs__h2 { margin-bottom: 30px; }
  .ajs__one { padding: 0 10px 10px 0; }
  .ajs__one .ajs__frame { width: 100%; }
  .ajs__one .ajs__call { width: calc(100% - 16px); }
  .ajs__mapback { inset: 10px -10px 52px 10px; }
  .ajs--solo::before { top: 220px; border-top-left-radius: 60px; }
  .ajs--solo::after { top: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .ajs__pinpulse { animation: none; opacity: 0.6; }
  .ajs__maplink .ajs__arrow { transition: none; }
}
/* the one photo's dot and callout count as the reel's first */
.ajs__solo { counter-reset: ajsc; }
.ajs__one { counter-increment: ajsc; }

/* George 2026-11-12: on a phone the section heads (eyebrow, heading, lead) sit centered, not pushed left */
@media (max-width: 766px) {
  .ajs__head, .ajs__title { text-align: center; }
  .ajs__eyebrow { justify-content: center; }
}

/* client.cities */
/* client.cities - component (service-area, brand-led). An area hub's cities: the drawn county map beside the cities
   grouped by county. Three levels: the heading (heaviest, one gold-boxed phrase) and the call plate's number; the
   county heads and city names in heavy navy caps; the counties the line also covers, smallest. A pale band with
   faint stars and the area's name huge in outline behind, so no light area is flat. Cards and pins answer each
   other on hover and focus (section.js). Reduced motion: no lifts or turns. */
.acy {
  --y-navy: #012668;
  --y-deep: #011A47;
  --y-blue: #013A97;
  --y-royal: #1D4E9E;
  --y-gold: #F2C40F;
  --y-rim: #FED617;
  --y-pale: #EAF0F8;
  --y-rule: #D3DDEB;
  --y-ink: #22324A;
  --y-mute: #56657D;
  --y-tint: #B9C7DD;
  --y-white: #FFFFFF;
  --y-ease: cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.acy__band {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  padding: 110px 0 120px;
  border-radius: 150px 0 0 0;
  background: var(--y-pale);
  overflow: hidden;
}
.acy__stage { position: absolute; inset: 0; pointer-events: none; }
.acy__star { position: absolute; fill: var(--y-white); }
/* red hint (George 2026-11-12): a thin red outline on the big background stars */
.acy__star path { stroke: #C50103; stroke-width: 2px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.acy__star--a { top: -60px; right: -80px; width: 460px; height: 460px; transform: rotate(14deg); }
.acy__star--b { bottom: 120px; left: -110px; width: 320px; height: 320px; transform: rotate(-8deg); }
.acy__ghost {
  position: absolute;
  right: -10px;
  bottom: -50px;
  font-family: "Saira", sans-serif;
  font-size: 260px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -6px;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 3px rgba(1, 38, 104, 0.09);
  user-select: none;
}
.acy__in { position: relative; width: 88%; max-width: 1240px; margin: 0 auto; }

/* head */
.acy__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 30px 40px; margin: 0 0 56px; }
.acy__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 17.6px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--y-blue);
}
.acy__eyebrow::before { content: none; width: 34px; height: 10px; background: var(--y-gold); transform: skewX(-24deg); }
.acy__h2 { margin: 0; max-width: 680px; font-family: "Saira", sans-serif; font-size: 54px; line-height: 1.08; font-weight: 900; color: var(--y-deep); }
.acy__hl { display: inline-block; margin-top: 6px; padding: 0 12px; background: var(--y-rim); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.acy__call {
  display: grid;
  grid-template-columns: 54px auto;
  grid-template-rows: auto auto;
  gap: 10px 16px;
  align-items: center;
  padding: 16px 26px 16px 18px;
  border-left: 6px solid var(--y-gold);
  background: var(--y-navy);
  box-shadow: 12px 12px 0 var(--y-gold);
  color: var(--y-white);
  text-decoration: none;
  transition: transform 0.3s var(--y-ease), box-shadow 0.3s var(--y-ease);
}
.acy__call:hover,
.acy__call:focus-visible { transform: translate(-4px, -4px); box-shadow: 16px 16px 0 var(--y-gold); }
.acy__call:focus-visible { outline: 2px solid var(--y-deep); outline-offset: 4px; }
.acy__callic { grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border: 3px solid var(--y-rim); border-radius: 50%; }
.acy__callic svg { width: 24px; height: 24px; fill: var(--y-rim); }
.acy__callloc { align-self: end; font-family: "Titillium Web", "Saira", sans-serif; font-size: 14px; line-height: 1.2; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--y-rim); }
.acy__callnum { align-self: start; font-family: "Saira", sans-serif; font-size: 38px; line-height: 1.15; font-weight: 900; white-space: nowrap; }

/* map and list */
.acy__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; }
.acy__map { position: sticky; top: 24px; margin: 0 22px 22px 0; }
.acy__mapback { position: absolute; inset: 22px -22px -22px 22px; background: #C50103; }
.acy__mapframe { position: relative; border: 6px solid var(--y-deep); background: var(--y-deep); overflow: hidden; }
.acy__svg { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; }
.acy__sea { fill: #13398A; }
.acy__land path { fill: var(--y-deep); stroke: var(--y-royal); stroke-width: 0.6; stroke-linejoin: round; }
.acy__co { fill: var(--y-navy); stroke: var(--y-royal); stroke-width: 0.7; stroke-linejoin: round; transition: fill 0.3s var(--y-ease); }
.acy__co--on { fill: var(--y-blue); stroke: var(--y-rim); stroke-width: 1; }
.acy__co.is-on { fill: #2C64C2; }
.acy__colabel {
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 4.6px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  fill: var(--y-tint);
  text-anchor: middle;
  pointer-events: none;
}
.acy__pin { cursor: pointer; }
.acy__pindot { fill: var(--y-rim); stroke: var(--y-deep); stroke-width: 1.1; transition: transform 0.25s var(--y-ease); }
.acy__pinring { fill: var(--y-deep); stroke: var(--y-rim); stroke-width: 1.2; }
.acy__pinstar { fill: var(--y-rim); }
.acy__pin--home .acy__pinstar { fill: #C50103; }  /* George 2026-11-12: tiny hints of the logo's red */
.acy__pinname {
  font-family: "Saira", sans-serif;
  font-size: 5.6px;
  font-weight: 900;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  fill: var(--y-white);
  paint-order: stroke;
  stroke: var(--y-deep);
  stroke-width: 1.6px;
  stroke-linejoin: round;
  pointer-events: none;
}
.acy__pin.is-on .acy__pindot { transform: scale(1.7); fill: var(--y-white); }
.acy__pin.is-on .acy__pinring { stroke: var(--y-white); }
.acy__tip {
  position: absolute;
  left: 14px;
  top: 14px;
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 10px 16px;
  border-left: 5px solid var(--y-rim);
  background: var(--y-white);
  box-shadow: 6px 6px 0 var(--y-gold);
}
.acy__tip[hidden] { display: none; }
.acy__tipcity { font-family: "Saira", sans-serif; font-size: 20px; line-height: 1.1; font-weight: 900; text-transform: uppercase; color: var(--y-deep); }
.acy__tipco { font-family: "Titillium Web", "Saira", sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--y-blue); }
.acy__key {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
  padding: 14px 22px;
  border-top: 4px solid var(--y-gold);
  background: var(--y-deep);
  color: var(--y-white);
}
.acy__keyitem { display: inline-flex; align-items: center; gap: 10px; font-family: "Titillium Web", "Saira", sans-serif; font-size: 14px; line-height: 1.25; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--y-white); }
.acy__keystar { width: 26px; height: 26px; fill: var(--y-rim); }
.acy__keydot { width: 14px; height: 14px; border: 2px solid var(--y-deep); border-radius: 50%; background: var(--y-rim); box-shadow: 0 0 0 2px var(--y-rim); }
.acy__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 22px; counter-reset: acyn; }
.acy__group { grid-column: 1 / -1; }
.acy__group--one { grid-column: auto; }
.acy__group--one .acy__cards { grid-template-columns: minmax(0, 1fr); }
.acy__num::before { counter-increment: acyn; content: counter(acyn, decimal-leading-zero); }
.acy__county {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--y-deep);
  font-family: "Saira", sans-serif;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--y-deep);
}
.acy__ring { flex: none; width: 36px; height: 36px; }
.acy__ring svg { display: block; width: 100%; height: 100%; }
.acy__ring circle { fill: var(--y-navy); stroke: var(--y-gold); stroke-width: 5; }
.acy__ring path { fill: var(--y-rim); }
.acy__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; margin: 0; padding: 0; list-style: none; }
.acy__cell { position: relative; }
.acy__cell::before { content: ""; position: absolute; inset: 8px -8px -8px 8px; background: #C50103; opacity: 0; transition: opacity 0.3s var(--y-ease); }
.acy__card {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 20px;
  gap: 14px;
  align-items: center;
  min-height: 92px;
  padding: 8px 14px 8px 8px;
  border: 2px solid var(--y-deep);
  border-left: 6px solid var(--y-navy);
  background: var(--y-white);
  color: var(--y-deep);
  text-decoration: none;
  transition: transform 0.3s var(--y-ease), border-color 0.3s var(--y-ease);
}
.acy__thumb { display: block; width: 76px; height: 76px; overflow: hidden; background: var(--y-pale); }
.acy__thumb picture { display: block; height: 100%; }
.acy__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--y-ease); }
.acy__thumb--seal { display: flex; align-items: center; justify-content: center; }
/* B2: a city with no job photo shows its own county with its pin lit, never a shared star */
.acy__thumb--mark { background: #13398A; }
.acy__thumb--mark svg { display: block; width: 100%; height: 100%; transition: transform 0.5s var(--y-ease); }
.acy__mland path { fill: var(--y-deep); stroke: var(--y-royal); stroke-width: 1; vector-effect: non-scaling-stroke; }
.acy__mco { fill: var(--y-blue); stroke: var(--y-rim); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.acy__mpin { fill: var(--y-rim); stroke: var(--y-deep); stroke-width: 2; vector-effect: non-scaling-stroke; }
.acy__cell:hover .acy__thumb--mark svg,
.acy__cell:focus-within .acy__thumb--mark svg,
.acy__cell.is-on .acy__thumb--mark svg { transform: scale(1.12); }
/* M5: a card whose page is not built has no link look: no chevron, no lift; it still lights its pin */
.acy__cell--plain .acy__card { grid-template-columns: 76px minmax(0, 1fr); cursor: default; }
.acy__cell.acy__cell--plain:hover .acy__card,
.acy__cell.acy__cell--plain:focus-within .acy__card,
.acy__cell.acy__cell--plain.is-on .acy__card { transform: none; }
.acy__cell.acy__cell--plain:hover::before,
.acy__cell.acy__cell--plain:focus-within::before,
.acy__cell.acy__cell--plain.is-on::before { opacity: 0; }
.acy__thumb--seal svg { width: 62px; height: 62px; transition: transform 0.5s var(--y-ease); }
.acy__sealrim { fill: var(--y-white); stroke: var(--y-navy); stroke-width: 4; }
.acy__sealin { fill: none; stroke: var(--y-blue); stroke-width: 2; stroke-dasharray: 3 3; }
.acy__sealstar { fill: var(--y-gold); stroke: var(--y-deep); stroke-width: 2.5; }
.acy__text { display: grid; gap: 2px; min-width: 0; }
.acy__num { font-family: "Saira", sans-serif; font-size: 15px; line-height: 1; font-weight: 900; color: var(--y-blue); }
.acy__name { font-family: "Saira", sans-serif; font-size: 21px; line-height: 1.1; font-weight: 900; text-transform: uppercase; overflow-wrap: anywhere; }
.acy__chev { width: 20px; height: 20px; fill: none; stroke: var(--y-blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--y-ease); }
.acy__cell:hover::before,
.acy__cell:focus-within::before,
.acy__cell.is-on::before { opacity: 1; }
.acy__cell:hover .acy__card,
.acy__cell:focus-within .acy__card,
.acy__cell.is-on .acy__card { transform: translate(-3px, -4px); border-left-color: #C50103; }
.acy__cell:hover .acy__img,
.acy__cell:focus-within .acy__img { transform: scale(1.08); }
.acy__cell:hover .acy__thumb--seal svg,
.acy__cell:focus-within .acy__thumb--seal svg { transform: rotate(18deg); }
.acy__cell:hover .acy__chev,
.acy__cell:focus-within .acy__chev { transform: translateX(4px); }
a.acy__card:focus-visible { outline: 3px solid var(--y-blue); outline-offset: 3px; }

/* the other counties on the line */
.acy__also {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin: 64px 22px 0 0;
  padding: 24px 30px;
  border-left: 8px solid var(--y-gold);
  background: var(--y-navy);
  box-shadow: 14px 14px 0 var(--y-blue);
}
.acy__alsoic { width: 56px; height: 56px; }
.acy__alsoic circle { fill: none; stroke: var(--y-rim); stroke-width: 5; }
.acy__alsoic path { fill: var(--y-rim); }
.acy__alsotext { margin: 0; font-family: "Instrument Sans", sans-serif; font-size: 16.5px; line-height: 1.55; color: var(--y-white); }
.acy__alsobtn {
  display: inline-flex;
  align-items: center;
  min-height: 54px;
  padding: 0 26px;
  background: var(--y-rim);
  font-family: "Titillium Web", "Saira", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--y-deep);
  text-decoration: none;
  transition: background-color 0.3s var(--y-ease);
}
.acy__alsobtn:hover,
.acy__alsobtn:focus-visible { background: var(--y-gold); }
.acy__alsobtn:focus-visible { outline: 2px solid var(--y-white); outline-offset: 3px; }

@media (max-width: 1199px) {
  .acy__band { border-radius: 100px 0 0 0; }
  .acy__h2 { font-size: 44px; }
  .acy__grid { gap: 44px; }
  .acy__ghost { font-size: 200px; }
}
@media (max-width: 978px) {
  .acy__grid { grid-template-columns: minmax(0, 1fr); }
  .acy__map { position: relative; top: 0; max-width: 560px; }
  .acy__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acy__also { grid-template-columns: 48px minmax(0, 1fr); }
  .acy__alsobtn { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 766px) {
  .acy__cell--plain .acy__card { grid-template-columns: minmax(0, 1fr); }
  .acy__band { padding: 75px 0 80px; border-radius: 60px 0 0 0; }
  .acy__ghost { font-size: 110px; bottom: -20px; letter-spacing: -2px; }
  .acy__star--a { width: 260px; height: 260px; }
  .acy__head { margin-bottom: 40px; }
  .acy__eyebrow { font-size: 15px; }
  .acy__h2 { font-size: 32px; line-height: 1.15; }
  .acy__call { margin-right: 12px; padding: 12px 18px 12px 12px; grid-template-columns: 44px auto; box-shadow: 10px 10px 0 var(--y-gold); }
  .acy__callic { width: 44px; height: 44px; }
  .acy__callnum { font-size: 29px; }
  .acy__map { margin: 0 12px 12px 0; }
  .acy__mapback { inset: 12px -12px -12px 12px; }
  .acy__mapframe { border-width: 4px; }
  .acy__keyitem { font-size: 12.5px; letter-spacing: 1px; }
  .acy__county { font-size: 20px; }
  .acy__list { gap: 32px 12px; }
  .acy__cards { gap: 14px 12px; }
  .acy__cell::before { inset: 6px -6px -6px 6px; }
  .acy__card { grid-template-columns: minmax(0, 1fr) 16px; grid-template-rows: auto auto; gap: 8px 6px; min-height: 0; padding: 6px 8px 10px 6px; border-left-width: 5px; }
  .acy__thumb { grid-column: 1 / -1; width: 100%; height: 84px; }
  .acy__thumb--seal svg { width: 56px; height: 56px; }
  .acy__name { font-size: 16px; }
  .acy__num { font-size: 13px; }
  .acy__chev { width: 16px; height: 16px; }
  .acy__county { font-size: 17px; gap: 8px; }
  .acy__ring { width: 28px; height: 28px; }
  .acy__also { margin: 48px 12px 0 0; padding: 20px 18px; gap: 16px; box-shadow: 10px 10px 0 var(--y-blue); }
  .acy__alsoic { width: 44px; height: 44px; }
  .acy__alsotext { font-size: 15px; }
  .acy__alsobtn { font-size: 14px; white-space: normal; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .acy__thumb--mark svg { transition: none; }
  .acy__cell:hover .acy__thumb--mark svg,
  .acy__cell:focus-within .acy__thumb--mark svg,
  .acy__cell.is-on .acy__thumb--mark svg { transform: none; }
  .acy__call,
  .acy__co,
  .acy__pindot,
  .acy__cell::before,
  .acy__card,
  .acy__img,
  .acy__thumb--seal svg,
  .acy__chev,
  .acy__alsobtn { transition: none; }
  .acy__call:hover,
  .acy__call:focus-visible,
  .acy__cell:hover .acy__card,
  .acy__cell:focus-within .acy__card,
  .acy__cell.is-on .acy__card,
  .acy__cell:hover .acy__img,
  .acy__cell:focus-within .acy__img,
  .acy__cell:hover .acy__thumb--seal svg,
  .acy__cell:focus-within .acy__thumb--seal svg,
  .acy__cell:hover .acy__chev,
  .acy__cell:focus-within .acy__chev { transform: none; }
}

/* stage 3g: the Central Coast's map covers about twice the ground of the Bay Area's, so its pins, names and
   lines are drawn twice as big to read the same */
.acy__svg--wide .acy__pin > * { transform: scale(2); }
.acy__svg--wide .acy__pin.is-on .acy__pindot { transform: scale(3.4); }
.acy__svg--wide .acy__colabel { font-size: 9.2px; letter-spacing: 1.6px; }
.acy__svg--wide .acy__land path { stroke-width: 1.2; }
.acy__svg--wide .acy__co { stroke-width: 1.4; }
.acy__svg--wide .acy__co--on { stroke-width: 2; }
/* M6 on a phone: a longer area name keeps its whole number on one line in the call button */
@media (max-width: 479px) {
  .acy__alsobtn { padding: 0 12px; letter-spacing: 0.6px; }
}

/* George 2026-11-12: on a phone the section heads (eyebrow, heading, lead) sit centered, not pushed left */
@media (max-width: 766px) {
  .acy__head { justify-content: center; text-align: center; }
  .acy__eyebrow { justify-content: center; }
  .acy__h2 { margin-left: auto; margin-right: auto; }
}

/* client.sitemap */
/* client.sitemap - the visitor sitemap (George 2026-11-12, this client only). The inner pages' type-led hero band
   (client.page-hero's classes, whose sheet is on every page), then every page in groups on white: each group's
   head in the display face like the privacy page's headings, its links in the logo's blue, in columns that fold
   to one on a phone. Each head carries the logo's red star, one of the site's tiny hints of red. */
.asm { background: #FFFFFF; color: #304453; padding: 80px 0 100px; }
.asm__in {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px 48px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
  font-family: "Instrument Sans", sans-serif;
}
.asm__h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #F2C40F;
  font-family: "Saira", sans-serif;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 900;
  color: #011A47;
}
.asm__h2::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: #C50103;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.asm__list { margin: 0; padding: 0; list-style: none; }
.asm__list li { margin: 0; }
.asm__link {
  display: block;
  padding: 9px 0;
  font-size: 17px;
  line-height: 1.4;
  color: #013A97;
  text-decoration: none;
}
.asm__link:hover,
.asm__link:focus-visible { color: #011A47; text-decoration: underline; }
@media (max-width: 978px) {
  .asm__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 766px) {
  .asm { padding: 50px 0 70px; }
  .asm__in { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 0 20px; text-align: center; }
  .asm__h2 { justify-content: center; font-size: 23px; }
  .asm__link { padding: 10px 0; }
}

/* brand.css */
/* kitlib.motif: written from concept/motif.json 79f9dd23ce62d9c8; change the motif and rebuild, never this file */
:root {
  --mo-brand-1: #012668; /* brand: the deep navy field of the shield behind AIR CHAMPS */
  --mo-brand-1-band: #011E53; /* brand: the deep navy field of the shield behind AIR CHAMPS: darkened 20% for a full-width band */
  --mo-on-brand-1: #FFFFFF; /* brand: text on the brand-1 band: white or the dark role, whichever reads better on it */
  --mo-brand-2: #FED617; /* brand: the star gold of the five stars and the rim highlights, kept yellow gold, never the amber shade */
  --mo-brand-2-band: #F2C40F; /* brand: the star gold of the five stars and the rim highlights, kept yellow gold, never the amber shade: the band shade the motif names */
  --mo-on-brand-2: #011A47; /* brand: text on the brand-2 band: white or the dark role, whichever reads better on it */
  --mo-dark: #011A47; /* brand: the shield's navy field, deepened for the footer and the hero layer */
  --mo-on-dark: #FFFFFF; /* brand: text on the dark band: white or the dark role, whichever reads better on it */
  --mo-light-break: #EAF0F8; /* brand: a pale break, the shield's navy almost white */
  --mo-on-light-break: #011A47; /* brand: text on the light-break band: white or the dark role, whichever reads better on it */
  --mo-edge-top: url("public/brand/motif/edge-top.svg"); /* brand: the arched top of the shield, rising over the five stars: the edge art on a band's top */
  --mo-edge-bottom: url("public/brand/motif/edge-bottom.svg"); /* brand: the arched top of the shield, rising over the five stars: the edge art on a band's bottom */
  --mo-edge-h: 40px; /* brand: the arched top of the shield, rising over the five stars: the edge art's height */
  --mo-edge-ratio: auto; /* brand: the arched top of the shield, rising over the five stars: the edge art's proportion, so an angle keeps its degrees */
  --mo-edge-size: 100% 100%; /* brand: the arched top of the shield, rising over the five stars: how the edge art is laid along the band */
  --mo-edge-repeat: no-repeat; /* brand: the arched top of the shield, rising over the five stars: whole repeats along the band */
  --mo-edge-max: 35px; /* brand: the arched top of the shield, rising over the five stars: the art's height capped at advancedair's smallest band padding (24px and up, its system.json), so it never cuts into the content of the band beside it */
  --mo-badge: url("public/brand/motif/badge.svg"); /* brand: the logo is a shield; its outline holds each card's icon: the badge shape */
  --mo-badge-size: contain; /* brand: the logo is a shield; its outline holds each card's icon: the shape kept whole inside the element */
  --mo-badge-fill: var(--mo-brand-1); /* brand: the logo is a shield; its outline holds each card's icon: in the logo's first colour */
  --mo-on-badge: #FFFFFF; /* brand: the logo is a shield; its outline holds each card's icon: its text, white or the dark role, whichever reads better */
  --mo-btn-radius: 0; /* brand: the chamfered shoulders of the shield's gold rim: the button's corners */
  --mo-btn-clip: polygon(0.5em 0, 100% 0, 100% calc(100% - 0.5em), calc(100% - 1.5em) calc(100% + 1em), 0 calc(100% + 1em), 0 0.5em); /* brand: the chamfered shoulders of the shield's gold rim: the button's cut */
  --mo-face: "Saira", sans-serif; /* brand: the wide square block caps of AIR CHAMPS, heavy and upright */
  --mo-caps: uppercase; /* brand: the wide square block caps of AIR CHAMPS, heavy and upright: set in capitals */
}

[data-motif-band="brand-1"] {
  background-color: var(--mo-brand-1-band);
  color: var(--mo-on-brand-1);
}

[data-motif-band="brand-2"] {
  background-color: var(--mo-brand-2-band);
  color: var(--mo-on-brand-2);
}

[data-motif-band="dark"] {
  background-color: var(--mo-dark);
  color: var(--mo-on-dark);
}

[data-motif-band="light-break"] {
  background-color: var(--mo-light-break);
  color: var(--mo-on-light-break);
}

[data-motif-band] :not([data-motif-band] :is(.about__badge, .about__card, .amap, .amap__card, .amap__map, .anav__bar, .anav__burger, .anav__dlink, .anav__drawer, .anav__link, .anav__nav, .anav__promobar, .anav__sub, .anav__sublink, .aprc, .aprc__card, .aproj, .aproj__card, .areas__band, .areas__card, .bar, .bar--peach, .btn, .btn--blue, .closing__row, .contact__card, .contact__formcard, .contact__pill, .contact__submit, .cr, .feat__card, .feat__card--navy, .field, .field--select, .ft, .ft__panel, .ft__tab, .hd__bar, .hd__burger, .hd__drawer, .hd__nav, .hd__promobar, .hero, .pill, .promo__card, .svc, .svc__tile, .why__band, .why__card), [data-motif-band] :is(.about__badge, .about__card, .amap, .amap__card, .amap__map, .anav__bar, .anav__burger, .anav__dlink, .anav__drawer, .anav__link, .anav__nav, .anav__promobar, .anav__sub, .anav__sublink, .aprc, .aprc__card, .aproj, .aproj__card, .areas__band, .areas__card, .bar, .bar--peach, .btn, .btn--blue, .closing__row, .contact__card, .contact__formcard, .contact__pill, .contact__submit, .cr, .feat__card, .feat__card--navy, .field, .field--select, .ft, .ft__panel, .ft__tab, .hd__bar, .hd__burger, .hd__drawer, .hd__nav, .hd__promobar, .hero, .pill, .promo__card, .svc, .svc__tile, .why__band, .why__card) *, [data-motif-button], [data-motif-button] *, [data-motif-badge], [data-motif-badge] *) {
  color: inherit;
}

[data-motif-edge="top"],
[data-motif-edge="bottom"],
[data-motif-edge="both"] {
  z-index: 2;
}

[data-motif-edge="top"]::before,
[data-motif-edge="both"]::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--mo-edge-h);
  max-height: var(--mo-edge-max);
  aspect-ratio: var(--mo-edge-ratio);
  background-color: inherit;
  mask-size: var(--mo-edge-size);
  mask-repeat: var(--mo-edge-repeat);
  pointer-events: none;
  bottom: 100%;
  mask-image: var(--mo-edge-top);
  mask-position: left bottom;
}

[data-motif-edge="bottom"]::after,
[data-motif-edge="both"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--mo-edge-h);
  max-height: var(--mo-edge-max);
  aspect-ratio: var(--mo-edge-ratio);
  background-color: inherit;
  mask-size: var(--mo-edge-size);
  mask-repeat: var(--mo-edge-repeat);
  pointer-events: none;
  top: 100%;
  mask-image: var(--mo-edge-bottom);
  mask-position: left top;
}

[data-motif-badge] {
  isolation: isolate;
  color: var(--mo-on-badge);
}

[data-motif-badge][data-motif-badge] {
  background-color: transparent;
  background-image: none;
  border-color: transparent;
}

[data-motif-badge]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--mo-badge-fill);
  mask-image: var(--mo-badge);
  mask-size: var(--mo-badge-size);
  mask-position: center;
  mask-repeat: no-repeat;
  pointer-events: none;
}

[data-motif-button] {
  border-radius: var(--mo-btn-radius);
  clip-path: var(--mo-btn-clip);
}

[data-motif-button]:focus-visible {
  clip-path: none;
}

@font-face {
  font-family: "Saira";
  src: url("public/brand/fonts/saira-v23-800-latin-ca7a9220a7.woff2") format("woff2");
  font-weight: 1 1000;
  font-style: normal;
  font-display: swap;
  /* the text box of the base face (Instrument Sans), split as this face splits its own */
  ascent-override: 87.97%;
  descent-override: 34.03%;
}

[data-motif-face] {
  font-family: var(--mo-face);
  text-transform: var(--mo-caps);
}