/* ==========================================================================
   COMPONENTS — shared pieces used on every page
   1. Page top + header     7. Cards (service, area, post)   13. Reviews
   2. Menus                 8. (free)                        14. Badges
   3. Buttons               9. Dark panel + feature list     15. CTA band
   4. Eyebrow              10. Forms                         16. Footer
   5. Pixels + media       11. FAQ                           17. Mobile contact bar
   6. Section head         12. Lists, steps, facts, prose    18. Page hero
   19. Light / dark switch  20. Back to top
   ========================================================================== */

/* 1. PAGE TOP + HEADER ----------------------------------------------------
   .page-top is the colored area at the top of every page. The header is
   positioned over it, so both share one background.

   Header style and micro-interactions follow the Antra reference:
   logo + menu on the left, phone block + button on the right, links that
   change color, dropdowns that unfold from the top, and a bar that drops
   in from above once the page is scrolled (.is-stuck, set by main.js).   */
.page-top {
  position: relative;
  padding-top: var(--header-height);
  background: var(--color-top);
  color: var(--color-top-ink);
}

.page-top--dark {
  background: var(--color-dark);
  color: var(--color-on-dark);
}

.page-top--dark h1 {
  color: var(--white);
}

.page-top--plain {
  background: var(--color-bg);
}

/* Colors of the header in each state. Change them here only. */
.site-header {
  --header-fg: var(--navy-900);          /* links, phone, icons */
  --header-hover: var(--blue-600);       /* link on hover and current page */
  --header-btn-bg: var(--navy-700);
  --header-btn-fg: var(--white);
  --header-btn-fill: var(--white);       /* color that sweeps in on hover */
  --header-btn-hover-fg: var(--navy-900);
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 60;
}

.site-header--dark,
.site-header.is-stuck {
  --header-fg: var(--white);
  --header-hover: var(--yellow-500);
  --header-btn-bg: var(--yellow-500);
  --header-btn-fg: var(--navy-900);
}

.site-header__bar {
  position: relative;
  width: 100%;
}

/* Fixed bar after scrolling: it slides down from above */
.site-header.is-stuck .site-header__bar {
  position: fixed;
  inset: 0 0 auto 0;
  background: var(--color-dark);
  box-shadow: 0 10px 30px rgba(0, 15, 48, 0.22);
  animation: header-drop 1s ease;
}

@keyframes header-drop {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-height);
}

.site-header__left {
  display: flex;
  align-items: center;
  column-gap: clamp(1.25rem, 2.8vw, 2.75rem);
}

.site-header__right {
  display: flex;
  align-items: center;
  column-gap: 15px;
}

/* Logo: one version over the page color, another for the dark fixed bar */
.site-logo {
  display: block;
  flex: none;
  line-height: 0;
}

.site-logo img {
  width: auto;
  height: 50px;
}

.site-logo__stuck,
.site-header.is-stuck .site-logo__top {
  display: none;
}

.site-header.is-stuck .site-logo__stuck {
  display: block;
}

/* Menu links */
.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 1.625rem);
}

.site-nav__item {
  position: relative;
}

.site-nav__link {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  height: var(--header-height);
  padding: 0;
  border: 0;
  background: none;
  color: var(--header-fg);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav__link:hover,
.site-nav__item:hover > .site-nav__link,
.site-nav__item:focus-within > .site-nav__link,
.site-nav__link[aria-current="page"],
.site-nav__link.is-current {
  color: var(--header-hover);
}

.site-nav__link .icon {
  width: 0.85em;
  height: 0.85em;
  stroke-width: 2.5;
}

/* Phone block: icon, small label, number */
.header-call {
  display: flex;
  align-items: center;
  column-gap: 15px;
  color: var(--header-fg);
  text-decoration: none;
}

.header-call__icon .icon {
  width: 27px;
  height: 27px;
  stroke-width: 1.5;
}

.header-call__label,
.header-call__number {
  display: block;
  line-height: 1.3;
  white-space: nowrap;
}

.header-call__label {
  font-size: 0.875rem;
  font-weight: 500;
}

.header-call__number {
  font-size: 1.125rem;
  font-weight: 700;
}

.header-call:hover .header-call__number {
  color: var(--header-hover);
}

/* Header button: a second color sweeps in from the left on hover and
   leaves through the right */
.header-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  padding: 18px 26px;
  border-radius: 100px;
  background: var(--header-btn-bg);
  color: var(--header-btn-fg);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.header-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--header-btn-fill);
  transform: scale(0, 1);
  transform-origin: right center;
}

.header-btn:hover,
.header-btn:focus-visible {
  color: var(--header-btn-hover-fg);
}

.header-btn:hover::before,
.header-btn:focus-visible::before {
  transform: scale(1, 1);
  transform-origin: left center;
}

/* Phone and menu buttons shown instead of the menu on small screens */
.site-header__mobile {
  display: none;
  gap: var(--space-xs);
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: none;
  color: var(--header-fg);
}

.icon-btn--solid {
  border-color: var(--header-btn-bg);
  background: var(--header-btn-bg);
  color: var(--header-btn-fg);
}

/* Language switch: a round "ES" button next to the dark-mode switch. On the
   wide bar both are a little smaller; on a phone the language is in the menu. */
.lang-btn {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.lang-btn:hover,
.lang-btn[aria-current="page"] {
  border-color: var(--header-hover);
  color: var(--header-hover);
}

@media (min-width: 1100px) {
  .site-header__right > .icon-btn {
    width: 42px;
    height: 42px;
  }
}

/* Medium screens: the button goes first, the phone block stays */
@media (max-width: 1279px) {
  .header-btn {
    display: none;
  }
}

@media (max-width: 1099px) {
  .site-nav,
  .header-call,
  .lang-btn {
    display: none;
  }

  .site-header__mobile {
    display: flex;
  }

  .site-logo img {
    height: 44px;
  }
}

/* 2. MENUS ----------------------------------------------------------------
   Dropdowns in the style of stripe.com. One white panel is shared by all the
   menus (.site-menu-stage, made by main.js): it slides and resizes from one
   menu to the next and has a small caret under the link. Each menu is a set
   of columns; a column has a title with a line that fills with a gradient on
   hover, and each option has a name (an arrow slides in on hover) and one
   short line under it. Services and Areas end in a gray strip with links.
   Without JS every menu opens by itself with CSS and has its own panel
   (the html element gets .has-menu-stage only when the shared panel works). */
.site-nav {
  --menu-gap: 8px;
  --menu-radius: 16px;
  --menu-shadow: 0 30px 60px -12px rgba(0, 15, 48, 0.28), 0 18px 36px -18px rgba(0, 0, 0, 0.3);
  --menu-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.site-menu {
  position: absolute;
  top: calc(100% + var(--menu-gap));
  left: 0;
  z-index: 40;
  width: 300px;
  border-radius: var(--menu-radius);
  background: var(--color-surface);
  box-shadow: var(--menu-shadow);
  color: var(--color-text);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
}

/* An invisible bridge, so the pointer can cross the gap between the link and the panel */
.site-menu::before {
  content: "";
  position: absolute;
  top: calc(var(--menu-gap) * -2);
  right: 0;
  left: 0;
  height: calc(var(--menu-gap) * 2);
}

html:not(.has-menu-stage) .site-nav__item:hover > .site-menu,
html:not(.has-menu-stage) .site-nav__item:focus-within > .site-menu,
.site-nav__item.is-open > .site-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* With the shared panel the menus themselves are transparent and slide sideways a little */
.has-menu-stage .site-menu {
  background: transparent;
  box-shadow: none;
  transform: translateX(calc(var(--dir, 0) * 22px));
}

.has-menu-stage .site-nav__item.is-open > .site-menu {
  transform: none;
}

.site-menu--wide {
  width: min(1060px, calc(100vw - var(--container-pad) * 2));
}

.site-menu--areas {
  width: 560px;
}

.site-menu--company {
  width: 340px;
}

/* The shared panel and its caret */
.site-menu-stage {
  position: absolute;
  top: calc(var(--header-height) + 8px);
  left: 0;
  z-index: 39;
  width: var(--w, 0px);
  height: var(--h, 0px);
  transform: translateX(var(--x, 0px));
  pointer-events: none;
  visibility: hidden;
}

.site-menu-stage.is-open {
  visibility: visible;
}

.site-menu-stage__panel {
  position: absolute;
  inset: 0;
  border-radius: var(--menu-radius, 16px);
  background: var(--color-surface);
  box-shadow: 0 30px 60px -12px rgba(0, 15, 48, 0.28), 0 18px 36px -18px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: scale(0.97) translateY(6px);
  transform-origin: var(--caret, 50%) 0;
}

.site-menu-stage.is-open .site-menu-stage__panel {
  opacity: 1;
  transform: none;
}

.site-menu-stage__caret {
  position: absolute;
  top: -6px;
  left: var(--caret, 50%);
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 3px 0 0 0;
  background: var(--color-surface);
  opacity: 0;
  transform: rotate(45deg);
}

.site-menu-stage.is-open .site-menu-stage__caret {
  opacity: 1;
}

/* While a menu is open the other links step back a little */
.site-nav.has-open .site-nav__item:not(.is-open) > .site-nav__link {
  opacity: 0.6;
}

/* Columns */
.site-menu__cols {
  display: grid;
  gap: 24px 36px;
  padding: 28px 32px 18px;
}

.site-menu--wide .site-menu__cols {
  grid-template-columns: minmax(0, 2.45fr) minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.menu-stack {
  display: grid;
  align-content: start;
  gap: 22px;
}

/* Column title: a hairline, and on hover a gradient line draws over it */
.menu-col__title {
  position: relative;
  margin-bottom: 14px;
  padding-bottom: 13px;
  color: var(--color-heading);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.menu-col__title::before,
.menu-col__title::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--color-line);
}

.menu-col__title::after {
  bottom: -0.5px;
  height: 2px;
  background: linear-gradient(90deg, var(--blue-500) 0%, #7b8ae6 45%, #f6c445 80%, var(--yellow-500) 100%);
  transform: scaleX(0);
  transform-origin: left center;
}

.menu-col:hover .menu-col__title::after,
.menu-col:focus-within .menu-col__title::after {
  transform: scaleX(1);
}

.menu-col__list {
  display: grid;
  gap: 2px;
  list-style: none;
}

/* Two columns of options, filled top to bottom (--rows is how many fit in each) */
.menu-col__list--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows, 5), auto);
  grid-auto-flow: column;
  column-gap: 28px;
}

/* An option: name with an arrow that slides in, and one short line */
.menu-item {
  display: block;
  padding: 9px 0;
  text-decoration: none;
}

.menu-item__title {
  display: block;
  color: var(--color-link);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

/* The arrow sits after the name and takes no room (negative margin), so a long name never wraps because of it */
.menu-item__title .icon {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin: 0 -1.3em 0 0.4em;
  vertical-align: -0.1em;
  stroke-width: 2.5;
  opacity: 0;
  transform: translateX(-6px);
}

.menu-item__text {
  display: block;
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

.menu-item:hover .menu-item__title,
.menu-item:focus-visible .menu-item__title,
.menu-item[aria-current="page"] .menu-item__title {
  color: var(--color-heading);
}

.menu-item:hover .menu-item__title .icon,
.menu-item:focus-visible .menu-item__title .icon {
  opacity: 1;
  transform: none;
}

.menu-item:hover .menu-item__text,
.menu-item:focus-visible .menu-item__text {
  color: var(--color-text);
}

.menu-item:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 4px;
  border-radius: 4px;
}

.menu-item--emergency .menu-item__title {
  color: var(--color-emergency);
}

.menu-item--emergency:hover .menu-item__title {
  color: var(--red-600);
}

/* Gray strip at the bottom of Services and Areas */
.site-menu__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 24px;
  padding: 15px 32px;
  border-radius: 0 0 var(--menu-radius) var(--menu-radius);
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.site-menu__foot p {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.site-menu__foot a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--color-link);
  font-weight: 600;
  text-decoration: none;
}

.site-menu__foot a:hover,
.site-menu__foot a:focus-visible {
  color: var(--color-heading);
}

.site-menu__foot .icon {
  width: 0.95em;
  height: 0.95em;
  stroke-width: 2.5;
}

.site-menu__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-emergency);
}

/* Mobile menu: hangs from the bar, so it also works when the bar is fixed */
.mobile-menu {
  position: absolute;
  inset: 100% 0 auto 0;
  z-index: 25;
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
  padding: var(--space-s) var(--container-pad) var(--space-l);
  background: var(--color-surface);
  box-shadow: 0 24px 60px rgba(0, 15, 48, 0.2);
  color: var(--color-text);
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu__group {
  border-bottom: 1px solid var(--color-line);
}

.mobile-menu__group > summary,
.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.95rem 0;
  color: var(--color-heading);
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
  list-style: none;
  cursor: pointer;
}

.mobile-menu__group > summary::-webkit-details-marker {
  display: none;
}

.mobile-menu__group[open] > summary .icon {
  transform: rotate(180deg);
}

.mobile-menu__link {
  border-bottom: 1px solid var(--color-line);
}

.mobile-menu__sub {
  padding-bottom: var(--space-s);
}

.mobile-menu__sub a {
  display: block;
  padding: 0.45rem 0 0.45rem var(--space-s);
  color: var(--color-text);
  font-size: 1rem;
  text-decoration: none;
}

.mobile-menu__sub a.is-emergency {
  color: var(--color-emergency);
  font-weight: 700;
}

.mobile-menu__actions {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-m);
}

/* 3. BUTTONS -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.15rem 2rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 1rem;
  font-weight: var(--weight-bold);
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
}

.btn .icon {
  width: 1.1em;
  height: 1.1em;
}

.btn--primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.btn--primary:hover {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
}

.btn--secondary {
  border-color: currentColor;
  background: transparent;
  color: var(--color-ink);
  font-weight: 600;
}

.btn--secondary:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-bg);
}

/* White button for use over photos */
.btn--white {
  border-color: var(--white);
  background: var(--white);
  color: var(--navy-900);
}

.btn--white:hover {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.btn--accent {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--navy-900);
}

.btn--accent:hover {
  border-color: var(--yellow-400);
  background: var(--yellow-400);
}

.btn--light {
  border-color: var(--color-on-dark);
  background: transparent;
  color: var(--color-on-dark);
  font-weight: 600;
}

.btn--light:hover {
  background: var(--white);
  color: var(--navy-900);
}

.btn--emergency {
  border-color: var(--color-emergency);
  background: var(--color-emergency);
  color: var(--white);
}

.btn--emergency:hover {
  border-color: var(--red-600);
  background: var(--red-600);
}

.btn--small {
  padding: 0.8rem 1.35rem;
  font-size: var(--text-s);
}

.btn--block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

.btn-row--center {
  justify-content: center;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
}

/* 4. EYEBROW -------------------------------------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--space-s);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 24px;
  height: 1px;
  background: currentColor;
}

.eyebrow--center {
  justify-content: center;
}

.eyebrow--center::after {
  content: "";
  flex: none;
  width: 24px;
  height: 1px;
  background: currentColor;
}

.eyebrow--on-dark {
  color: var(--color-accent);
}

.eyebrow--emergency {
  color: var(--color-emergency);
}

/* 5. PIXELS + MEDIA -------------------------------------------------------
   Decorative squares that "cut" the corner of a photo, as in the template.
   --pixel-color is the color of the surface behind the photo.              */
.media {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-soft);
}

.media--4x3 { aspect-ratio: 4 / 3; }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--21x9 { aspect-ratio: 21 / 9; }
.media--1x1 { aspect-ratio: 1; }
.media--4x5 { aspect-ratio: 4 / 5; }

.pixels {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(var(--pixel) * 3);
  height: calc(var(--pixel) * 2);
  pointer-events: none;
}

.pixels i {
  position: absolute;
  width: var(--pixel);
  height: var(--pixel);
  background: var(--pixel-color, var(--color-bg));
}

.pixels i:nth-child(1) { right: 0; bottom: 0; }
.pixels i:nth-child(2) { right: var(--pixel); bottom: var(--pixel); }
.pixels i:nth-child(3) { right: calc(var(--pixel) * 2); bottom: 0; }

.pixels--accent i:nth-child(2) {
  background: var(--color-accent);
}

.pixels--top {
  top: 0;
  bottom: auto;
}

.pixels--top i:nth-child(1) { top: 0; bottom: auto; }
.pixels--top i:nth-child(2) { top: var(--pixel); bottom: auto; }
.pixels--top i:nth-child(3) { top: 0; bottom: auto; }

/* 6. SECTION HEAD --------------------------------------------------------- */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-m);
  margin-bottom: var(--space-l);
  padding-bottom: var(--space-l);
  border-bottom: 1px solid var(--color-line);
}

.section-head__text {
  max-width: 34rem;
}

.section-head__text p:not(.eyebrow) {
  margin-top: var(--space-s);
}

.section-head--center {
  flex-direction: column;
  align-items: center;
  padding-bottom: 0;
  border-bottom: 0;
  text-align: center;
}

.section-head--plain {
  padding-bottom: 0;
  border-bottom: 0;
}

.section-foot {
  display: flex;
  justify-content: center;
  margin-top: var(--space-l);
}

/* 7. CARDS ---------------------------------------------------------------- */
.card-grid {
  display: grid;
  gap: var(--space-l) var(--space-m);
}

@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .card-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Service card: photo, title + arrow, short text */
.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: var(--space-m);
  border-bottom: 1px solid var(--color-line);
  color: inherit;
  text-decoration: none;
}

.service-card__media {
  margin-bottom: var(--space-m);
}

.service-card__title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-s);
  margin-bottom: var(--space-xs);
  font-size: var(--text-h3);
}

.service-card__title .icon {
  margin-top: 0.2em;
}

.service-card__text {
  color: var(--color-text-muted);
  font-size: var(--text-m);
  line-height: 1.55;
}

.service-card:hover .service-card__title {
  color: var(--color-link);
}

.service-card--compact .service-card__media {
  display: none;
}

.service-card--compact {
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-line);
  border-bottom: 0;
}

.service-card--emergency .service-card__title {
  color: var(--color-emergency);
}

/* Area card: title over a darkened photo */
.area-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--navy-900);
  color: var(--white);
  text-decoration: none;
}

.area-card .photo {
  opacity: 0.45;
}

.area-card__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-m);
}

.area-card__title {
  color: var(--white);
  font-size: var(--text-xl);
}

.area-card__text {
  margin-top: var(--space-2xs);
  color: var(--color-on-dark-muted);
  font-size: var(--text-s);
  line-height: 1.45;
}

.area-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-s);
  padding-top: var(--space-s);
  border-top: 1px solid var(--color-line-on-dark);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.area-card__meta span::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.5rem;
  background: var(--color-accent);
  vertical-align: middle;
}

.area-card:hover .photo {
  opacity: 0.3;
}

/* Post card */
.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.post-card__media {
  margin-bottom: var(--space-m);
}

.post-card__title {
  margin-bottom: var(--space-xs);
  font-size: var(--text-h3);
  line-height: 1.28;
}

.post-card__text {
  color: var(--color-text-muted);
  font-size: var(--text-m);
  line-height: 1.55;
}

.post-card__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: var(--space-m);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.post-card__meta .line {
  width: 20px;
  height: 1px;
  background: currentColor;
}

.post-card__meta .icon {
  margin-left: auto;
}

.post-card:hover .post-card__title {
  color: var(--color-link);
}

/* 9. DARK PANEL + FEATURE LIST -------------------------------------------- */
.dark-panel {
  background: var(--color-dark);
  color: var(--color-on-dark-muted);
}

.dark-panel h2,
.dark-panel h3 {
  color: var(--white);
}

.feature-list {
  display: grid;
  gap: var(--space-m);
}

@media (min-width: 640px) {
  .feature-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .feature-list--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.feature {
  padding-top: var(--space-s);
  border-top: 1px solid var(--color-line);
}

.dark-panel .feature {
  border-top-color: var(--color-line-on-dark);
}

.feature__title {
  margin-bottom: var(--space-2xs);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0;
}

.feature__text {
  font-size: var(--text-s);
  line-height: 1.55;
}

/* 10. FORMS ---------------------------------------------------------------
   Line-style fields, as in the template. Forms are not connected yet:
   main.js validates and shows a "preview only" note.                       */
.form-card {
  --form-pad: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  padding: var(--form-pad);
  background: var(--color-surface);
  color: var(--color-text);
}

.form-card--outline {
  border: 1px solid var(--color-line);
}

.form-card__title {
  margin-bottom: var(--space-xs);
  font-size: var(--text-xl);
}

.form-card__text {
  margin-bottom: var(--space-m);
  color: var(--color-text-muted);
  font-size: var(--text-s);
  line-height: 1.5;
}

/* Volty, the brand character, stands in the top-right corner of the sidebar
   form and his head rises above the card's top edge (--mascot-pop, set on the
   sidebar so the sticky offset can clear it too). The head block keeps the
   text beside him and leaves a little room under his feet. The image is
   362 × 626 (holding-pliers, see make_volty.py), hence the 1.73 below. */
.form-card--mascot {
  --mascot-w: clamp(5.25rem, 3rem + 10vw, 6.5rem);
  --mascot-h: calc(var(--mascot-w) * 1.73);
  position: relative;
}

.form-card--mascot .form-card__title {
  font-size: var(--text-h3);   /* keeps "Request a call" on one line beside Volty */
}

.form-card__mascot {
  position: absolute;
  top: calc(var(--mascot-pop, 2.25rem) * -1);
  right: var(--form-pad);
  width: var(--mascot-w);
  height: auto;
  pointer-events: none;
}

.form-card__head {
  min-height: calc(var(--mascot-h) - var(--mascot-pop, 2.25rem) - var(--form-pad));
  margin-bottom: var(--space-m);
  padding-right: calc(var(--mascot-w) + 0.5rem);
}

.form-card__head .form-card__text {
  margin-bottom: 0;
}

.form {
  display: grid;
  gap: var(--space-m);
}

.form__row {
  display: grid;
  gap: var(--space-m);
}

@media (min-width: 640px) {
  .form__row--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.field label,
.field legend {
  display: block;
  margin-bottom: 0.25rem;
  padding: 0;
  color: var(--color-heading);
  font-size: var(--text-s);
  font-weight: 700;
}

.field__hint {
  color: var(--color-text-muted);
  font-weight: 500;
}

.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  padding: 0.7rem 0;
  border: 0;
  border-bottom: 1px solid var(--color-field-line);
  border-radius: 0;
  background: transparent;
  font-size: 1rem;
}

.field textarea {
  min-height: 6.5rem;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-bottom-color: var(--color-link);
  box-shadow: 0 1px 0 var(--color-link);
}

.field input[type="file"] {
  padding: 0.9rem;
  border: 1px dashed var(--gray-500);
  background: var(--color-bg-soft);
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-bottom-color: var(--color-emergency);
}

.field__error {
  margin-top: 0.3rem;
  color: var(--color-emergency);
  font-size: var(--text-xs);
  font-weight: 600;
}

.field fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Let fields shrink inside grids instead of widening the page on phones */
.form > *,
.form__row > * {
  min-width: 0;
}

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.choice {
  position: relative;
}

/* The real radio is hidden; the pill next to it is what people see */
.field .choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
}

.choice span {
  display: inline-block;
  padding: 0.55rem 1rem;
  border: 1px solid var(--color-field-line);
  border-radius: var(--radius-pill);
  font-size: var(--text-s);
  font-weight: 600;
  cursor: pointer;
}

.choice input:checked + span {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.choice input:focus-visible + span {
  outline: 3px solid var(--blue-500);
  outline-offset: 2px;
}

.form__hp {
  position: absolute;
  left: -9999px;
}

.form__note {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.form__status {
  padding: var(--space-s);
  border-left: 4px solid var(--color-accent);
  background: var(--yellow-100);
  color: var(--navy-900);
  font-size: var(--text-s);
  font-weight: 600;
}

.form__status[hidden] {
  display: none;
}

/* 11. FAQ ----------------------------------------------------------------- */
.faq__item {
  border-bottom: 1px solid var(--color-line);
}

.faq__item:first-child {
  border-top: 1px solid var(--color-line);
}

.faq__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-m) 0;
  list-style: none;
  cursor: pointer;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
}

.faq__question .icon {
  margin-top: 0.2em;
}

.faq__item[open] .faq__question .icon {
  transform: rotate(180deg);
}

.faq__answer {
  max-width: 46rem;
  padding-bottom: var(--space-m);
}

/* 12. LISTS, STEPS, FACTS, PROSE ------------------------------------------ */
.check-list {
  display: grid;
  gap: 0.6rem;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 1.6rem;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 9px;
  background: var(--color-accent);
}

.check-list--emergency li::before {
  background: var(--color-emergency);
}

.steps {
  display: grid;
  gap: var(--space-m);
  counter-reset: step;
  list-style: none;
}

.steps li {
  position: relative;
  padding-left: 3.5rem;
  counter-increment: step;
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-link);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
}

.steps h3 {
  margin-bottom: 0.15rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0;
}

.fact-grid {
  display: grid;
  gap: var(--space-m);
}

@media (min-width: 768px) {
  .fact-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.fact {
  padding: var(--space-m);
  background: var(--color-bg-soft);
}

.fact h2 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--space-xs);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0;
}

.fact h2 .icon {
  color: var(--color-link);
}

.fact p {
  font-size: var(--text-m);
  line-height: 1.6;
}

.prose > * + * {
  margin-top: var(--space-s);
}

.prose h2 {
  margin-top: var(--space-l);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}

.prose h3 {
  margin-top: var(--space-m);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0;
}

.prose > :first-child {
  margin-top: 0;
}

.prose ul,
.prose ol {
  padding-left: 1.3rem;
}

.prose li + li {
  margin-top: 0.4rem;
}

.prose blockquote {
  margin: var(--space-m) 0;
  padding-left: var(--space-m);
  border-left: 4px solid var(--color-accent);
  color: var(--color-heading);
  font-size: var(--text-l);
}

.prose strong {
  color: var(--color-heading);
}

.lead {
  color: var(--color-heading);
  font-size: var(--text-l);
  line-height: 1.5;
}

/* 13. REVIEWS ------------------------------------------------------------- */
.rating {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  color: var(--color-accent);
}

.rating .icon {
  width: 1.1rem;
  height: 1.1rem;
}

.review-slider {
  position: relative;
  display: grid;
}

@media (min-width: 900px) {
  .review-slider {
    grid-template-columns: 5fr 6fr;
    align-items: center;
  }
}

.review-slider__card {
  position: relative;
  z-index: 2;
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  background: var(--color-bg-soft);
}

@media (min-width: 900px) {
  .review-slider__card {
    margin-right: -18%;
  }
}

.review-slider__media {
  order: -1;
  --pixel-color: var(--color-bg);
}

@media (min-width: 900px) {
  .review-slider__media {
    order: 0;
  }
}

.review {
  display: none;
}

.review.is-active,
.no-js .review {
  display: block;
}

.no-js .review + .review {
  margin-top: var(--space-l);
}

.review__headline {
  margin: var(--space-s) 0;
  font-size: var(--text-h2);
  font-weight: var(--weight-heading);
  line-height: 1.2;
  color: var(--color-heading);
}

.review__headline::before {
  content: "\201C";
}

.review__headline::after {
  content: "\201D";
}

.review__author {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: var(--space-m);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.review__author .line {
  width: 20px;
  height: 1px;
  background: currentColor;
}

.review-slider__nav {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-m);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-line);
}

.no-js .review-slider__nav {
  display: none;
}

.review-slider__nav button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--color-ink);
}

.review-slider__nav .icon {
  width: 1.75rem;
  height: 1.75rem;
}

.review__text {
  margin: var(--space-s) 0 0;
  color: var(--color-heading);
  font-size: var(--text-l);
  line-height: 1.45;
}

/* Service line above each review: what the customer hired us for */
.review-tag {
  display: inline-block;
  margin: 0 0 var(--space-s);
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--color-line);
  border-radius: 96px;
  background: var(--color-bg);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.review-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: var(--space-m);
  background: var(--color-bg-soft);
}

.review-card .review__author {
  margin-top: auto;
  padding-top: var(--space-m);
}

.review-card blockquote {
  margin: 0;
}

.review-card__text {
  margin: var(--space-s) 0 0;
  color: var(--color-heading);
  font-size: var(--text-m, 1rem);
  line-height: 1.55;
}

.review-card__text + .review-card__text {
  margin-top: var(--space-xs, 0.5rem);
}

/* Button under the reviews (home slider and reviews page) */
.reviews-more {
  margin-top: var(--space-l);
}

/* Reviews page: real grid, so the newest-first order reads left to right */
.review-grid {
  display: grid;
  gap: var(--space-m);
}

@media (min-width: 700px) {
  .review-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
  .review-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 14. BADGES -------------------------------------------------------------
   Licenses, accreditations and, on the homepage, the Google rating and the
   24/7 service (six badges instead of four: .badges--six).
   Phone      label, then the badges in a 2-column grid of boxes
   Tablet     four badges: one row · six badges: 3-column grid of boxes
   Desktop    label on the left (two lines), badges in one row on the right
   --seal-h is the height of every badge.                                    */
.badges {
  --seal-h: 50px;
  display: grid;
  gap: var(--space-m);
}

.badges__label {
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* The line break in the label only applies when the label sits on the left */
.badges__br {
  display: none;
}

.badges__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  list-style: none;
}

.badges__list li {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 12px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
}

/* Badges that have a white version for dark mode: only the light one shows
   here; dark.css swaps them */
.badges__list .badge--dark {
  display: none;
}

.badges__list img,
.badges__list svg {
  display: block;
  width: auto;
  max-width: 100%;
  height: var(--seal-h);
  object-fit: contain;
}

@media (min-width: 640px) {
  .badges {
    --seal-h: clamp(52px, 4vw + 30px, 76px);
  }

  .badges__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m) var(--space-l);
  }

  .badges__list li {
    padding: 0;
    border: 0;
  }
}

/* Six badges on a tablet: boxes in a 3 × 2 grid */
@media (min-width: 640px) and (max-width: 991px) {
  .badges--six {
    --seal-h: 56px;
  }

  .badges--six .badges__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .badges--six .badges__list li {
    padding: 14px 12px;
    border: 1px solid var(--color-line);
  }
}

@media (min-width: 992px) {
  .badges {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-xl);
  }

  .badges--six {
    --seal-h: clamp(44px, 3vw + 14px, 64px);
  }

  .badges__br {
    display: inline;
  }
}

/* Sidebar version (.badges--aside): the same six badges in two columns under
   a centered one-line label, at every screen width. */
.badges--aside {
  --seal-h: 44px;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: var(--space-s);
  margin-top: var(--space-l);
}

.badges--aside .badges__label {
  text-align: center;
}

.badges--aside .badges__br {
  display: none;
}

.badges--aside .badges__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.badges--aside .badges__list li {
  min-height: 68px;
  padding: 12px 8px;
  border: 1px solid var(--color-line);
}

/* Dark band version (.badges--on-dark, About): the six badges in white, in one
   row at every width from tablet up, no label. The white styling of the badges
   comes from dark.css (it applies here whatever the light/dark switch says). */
.badges--on-dark {
  grid-template-columns: 1fr;
}

.badges--on-dark .badges__list li {
  border-color: var(--color-line-on-dark);
}

.badges--on-dark .badges__list .badge--dark {
  display: block;
}

/* The two drawn badges (Google rating, 24/7 service). Colors from the brand
   tokens; the text uses the site font because the SVG is inline. */
.seal text {
  font-family: var(--font-body);
}

.seal__frame {
  fill: var(--white);
  stroke: var(--navy-700);
  stroke-width: 2;
}

.seal__panel {
  fill: var(--navy-700);
}

.seal__body {
  fill: var(--navy-700);
  stroke: var(--navy-700);
  stroke-width: 2;
}

.seal__bolt {
  fill: var(--navy-700);
}

.seal__gold {
  fill: var(--yellow-500);
}

.seal__gray {
  fill: #d8dce6;
}

.seal__num {
  fill: var(--navy-700);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -1px;
}

.seal__big {
  fill: var(--yellow-500);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.seal__cap {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 1px;
}

.seal__cap--white {
  fill: var(--white);
}

.seal__cap--gold {
  fill: var(--yellow-500);
}

.seal__cap--small {
  fill: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
}

.badges-section {
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
}

/* 15. CTA BAND ------------------------------------------------------------ */
.cta-band {
  --pixel-color: var(--color-bg);
  position: relative;
  background: var(--color-accent);
  color: var(--navy-900);
}

.cta-band__inner {
  display: grid;
  gap: var(--space-l);
  align-items: center;
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem);
}

@media (min-width: 900px) {
  .cta-band__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
}

.cta-band__text p:not(.eyebrow) {
  max-width: 30rem;
  margin: var(--space-s) 0 var(--space-m);
  font-size: var(--text-l);
  line-height: 1.5;
}

/* 16. FOOTER -------------------------------------------------------------- */
.site-footer {
  --pixel-color: var(--color-bg);
  position: relative;
  background: var(--color-dark);
  color: var(--color-on-dark-muted);
  font-size: var(--text-s);
}

/* When the page ends in a dark band (About), the squares that notch the footer
   take the footer's own color; in the page color they would show as white
   blocks on the dark. */
main:has(> .dark-band:last-child) ~ .site-footer {
  --pixel-color: var(--color-dark);
}

/* Scoped to the link columns so the buttons of the footer CTA keep their own colors */
.footer-main a,
.footer-bottom a {
  color: var(--color-on-dark);
  text-decoration: none;
}

.footer-main a:hover,
.footer-bottom a:hover {
  text-decoration: underline;
}

.footer-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
  border-bottom: 1px solid var(--color-line-on-dark);
}

/* On a phone the title spans the full width, so it starts below the corner squares instead of under them */
@media (max-width: 599px) {
  .footer-cta {
    padding-top: calc(var(--pixel) * 2 + var(--space-s));
  }
}

.footer-cta h2 {
  max-width: 26rem;
  color: var(--white);
  font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.375rem);
}

.footer-cta .btn--light:hover {
  text-decoration: none;
}

.footer-main {
  display: grid;
  gap: var(--space-l);
  padding-block: var(--space-xl);
}

@media (min-width: 768px) {
  .footer-main {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

.footer-brand > img {
  width: auto;
  height: 56px;
  margin-bottom: var(--space-s);
}

.footer-brand > p {
  max-width: 20rem;
  line-height: 1.6;
}

.footer-brand__phone {
  display: inline-block;
  margin-top: var(--space-s);
  color: var(--color-accent) !important;
  font-size: 1.5rem;
  font-weight: 700;
}

.footer-social {
  display: flex;
  gap: var(--space-s);
  margin-top: var(--space-s);
}

.footer-col__title {
  margin-bottom: var(--space-s);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-col ul {
  display: grid;
  gap: 0.55rem;
  list-style: none;
}

.footer-col + .footer-col__title,
.footer-col ul + .footer-col__title {
  margin-top: var(--space-m);
}

.footer-bottom {
  display: grid;
  gap: var(--space-xs);
  padding-block: var(--space-m) calc(var(--space-m) + var(--bar-space, 0px));
  border-top: 1px solid var(--color-line-on-dark);
  font-size: var(--text-xs);
  line-height: 1.6;
}

.footer-bottom__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s) var(--space-m);
}

/* "Marketing by" + Lobo & Company logo, linked to loboandco.com */
.footer-credit {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-size: var(--text-s);
}

.footer-bottom a.footer-credit {
  color: var(--color-on-dark-muted);
}

.footer-credit img {
  width: auto;
  height: 38px;
}

/* 21. WAYS TO PAY ---------------------------------------------------------
   The nine ways to pay as small chips; Check, Cash and Finance are just words.
   Every logo has a color version (on white chips) and a white one (on the
   dark footer, and on the page in dark mode, as outline chips). Two layouts:
     --footer  3 x 3, in the footer's brand column
     --band    one row, under the trust seals (Request an estimate)           */
.payments {
  display: grid;
  gap: var(--space-xs);
}

.payments__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.payments__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  list-style: none;
}

.payments__list li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(0, 15, 48, 0.1);
  color: var(--navy-900);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
}

.payments__list img {
  display: block;
  max-width: 100%;   /* the width and height attributes set the size; height follows the proportion */
}

.payments__list .pay--white {
  display: none;
}

/* The dark footer (always) and the dark-mode page: white logos and words in
   outline chips, no white blocks */
.payments--footer .pay--color,
html[data-theme="dark"] .payments--band .pay--color {
  display: none;
}

.payments--footer .pay--white,
html[data-theme="dark"] .payments--band .pay--white {
  display: block;
}

.payments--footer .payments__list li,
html[data-theme="dark"] .payments--band .payments__list li {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.9);
}

/* In the footer: under the social icons, in the free space of the brand column */
.payments--footer {
  max-width: 17.5rem;
  margin-top: var(--space-m);
}

.payments--footer .payments__label {
  color: var(--white);
}

/* Under the trust seals: label on the left, the chips on the right */
.payments--band .payments__label {
  color: var(--color-ink);
}

.payments--band .payments__list {
  max-width: 28rem;
  gap: 8px;
}

.payments--band .payments__list li {
  min-height: 40px;
}

@media (min-width: 992px) {
  .payments--band {
    grid-template-columns: var(--label-col, auto) 1fr;
    align-items: center;
    gap: var(--space-xl);
  }
}

@media (min-width: 1100px) {
  .payments--band .payments__list {
    grid-template-columns: repeat(9, 1fr);
    max-width: none;
  }
}

/* 17. MOBILE CONTACT BAR --------------------------------------------------
   Fixed at the bottom on phones: Call · Text · Book                        */
.contact-bar {
  display: none;
}

@media (max-width: 767px) {
  :root {
    --bar-space: 68px;
  }

  .contact-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 50;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    background: var(--color-dark);
    box-shadow: 0 -8px 24px rgba(0, 15, 48, 0.25);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .contact-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 60px;
    color: var(--white);
    font-size: var(--text-s);
    font-weight: 700;
    text-decoration: none;
  }

  .contact-bar a + a {
    border-left: 1px solid var(--color-line-on-dark);
  }

  .contact-bar a:first-child {
    background: var(--color-accent);
    color: var(--navy-900);
  }
}

/* 18. PAGE HERO (inner pages) --------------------------------------------- */
.page-hero {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3rem, 2rem + 5vw, 6rem);
}

.page-hero__inner {
  display: grid;
  gap: var(--space-m);
}

@media (min-width: 900px) {
  .page-hero__inner {
    grid-template-columns: 1.5fr 1fr;
    align-items: end;
    gap: var(--space-xl);
  }
}

.page-hero h1 {
  color: inherit;
}

.page-hero__text {
  max-width: 34rem;
  margin-top: var(--space-s);
  font-size: var(--text-l);
  line-height: 1.5;
}

.page-top--dark .page-hero__text {
  color: var(--color-on-dark-muted);
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

@media (min-width: 900px) {
  .page-hero__actions {
    justify-content: flex-end;
  }
}

/* Hero with a wide photo that hangs below the colored area */
.page-top--media {
  background: linear-gradient(to bottom, var(--color-top) 0, var(--color-top) calc(100% - var(--hang)), var(--color-bg) calc(100% - var(--hang)));
  --hang: clamp(60px, 12vw, 180px);
}

.page-top--media.page-top--dark {
  background: linear-gradient(to bottom, var(--color-dark) 0, var(--color-dark) calc(100% - var(--hang)), var(--color-bg) calc(100% - var(--hang)));
}

.page-top--media .page-hero {
  padding-bottom: 0;
}

.page-hero__media {
  margin-top: clamp(2rem, 1rem + 4vw, 4rem);
}

@media (max-width: 767px) {
  .page-hero__media {
    aspect-ratio: 16 / 10;
  }
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: var(--space-m);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  list-style: none;
  text-transform: uppercase;
}

.breadcrumbs a {
  color: inherit;
}

.breadcrumbs li + li::before {
  content: "/";
  margin-right: 0.4rem;
  opacity: 0.6;
}

/* 19. LIGHT / DARK SWITCH -------------------------------------------------
   Round button in the header. It shows a moon in light mode and a sun in
   dark mode; main.js > 10 does the switching. The dark colors themselves
   are in dark.css.                                                         */
.theme-toggle {
  flex: none;
  cursor: pointer;
}

.theme-toggle:hover {
  border-color: var(--header-hover);
  color: var(--header-hover);
}

.theme-toggle__icon {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
}

.theme-toggle__icon--sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0.4);
}

/* Without JavaScript the switch cannot work, so it is not shown */
.no-js .theme-toggle,
.no-js .to-top {
  display: none;
}

/* Small phones: three round buttons have to fit next to the logo */
@media (max-width: 400px) {
  .site-header__mobile {
    gap: 6px;
  }

  .site-header__right {
    column-gap: 6px;
  }

  .icon-btn {
    width: 42px;
    height: 42px;
  }

  .site-logo img {
    height: 40px;
  }
}

@media (max-width: 340px) {
  .site-logo img {
    height: 34px;
  }
}

/* 20. BACK TO TOP ---------------------------------------------------------
   Round button at the bottom right. It appears after scrolling down and its
   ring fills as the page is read (--progress, set by main.js > 11).
   --bar-space is the height of the Call · Text · Book bar on phones, so the
   button always sits above that bar and never covers it.                   */
.to-top {
  --to-top-track: rgba(0, 15, 48, 0.14);
  position: fixed;
  right: var(--container-pad);
  bottom: calc(var(--bar-space, 0px) + 20px + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: conic-gradient(var(--color-accent) calc(var(--progress, 0) * 1%), var(--to-top-track) 0);
  color: var(--white);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
}

.to-top::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--navy-700);
  box-shadow: 0 8px 24px rgba(0, 15, 48, 0.25);
}

.to-top .icon {
  position: relative;
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.to-top:hover::before {
  background: var(--navy-900);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (max-width: 767px) {
  .to-top {
    bottom: calc(var(--bar-space, 0px) + 14px + env(safe-area-inset-bottom, 0px));
    width: 46px;
    height: 46px;
  }
}

/* On screens where the button sits over the page (not in the side margin),
   the footer ends with some extra room so its last lines are never covered */
@media (max-width: 1379px) {
  .footer-bottom {
    padding-bottom: calc(var(--space-m) + var(--bar-space, 0px) + 60px);
  }
}

@media print {
  .to-top,
  .contact-bar,
  .theme-toggle {
    display: none;
  }
}

/* 20. VOLTY ---------------------------------------------------------------
   The brand mascot, in 11 poses (made by make_volty.py). Always decorative:
   empty alt, hidden from screen readers. --volty-h is his height; every pose
   is about the same height, so he keeps his size from pose to pose. Each
   place he stands is a modifier:
     --stand     on the bottom edge of the colored top of an inner page
     --why       on the line above the four guarantees (home)
     --band      on the bottom edge of the yellow photo band, pointing at the form (home)
     --head      flying beside the title of a section (home)
     --aside     under the title of a section that has its title on the left (About)
     --estimate  at the foot of the left column, pointing at the form
   (the sidebar form has its own: .form-card__mascot, section 10)
   Where there is no room he is hidden.                                      */
.volty {
  --edge: max(var(--container-pad), calc((100% - var(--container-max)) / 2));   /* page margin on the right */
  display: block;
  width: auto;
  max-width: none;
  height: var(--volty-h, 200px);
  pointer-events: none;
  user-select: none;
}

/* Standing on the edge of the colored top: bottom right corner on a phone and
   a tablet, between the text and the buttons on a wide screen */
.volty--stand {
  --volty-h: 150px;
  position: absolute;
  z-index: 2;
  right: var(--edge);
  bottom: -0.7rem;   /* the shadow under his feet crosses the edge */
}

.volty--stand.volty--float {
  bottom: 1.25rem;
}

/* On a phone he is a little smaller, and hides where the buttons are too wide to leave him room */
@media (max-width: 639px) {
  .volty--stand {
    --volty-h: 140px;
  }

  .volty--no-phone {
    display: none;
  }
}

/* A hero without buttons (the blog): while the hero is one column, Volty stands in a band of his own under the text */
@media (max-width: 899px) {
  .page-top--volty-room .page-hero {
    padding-bottom: calc(150px + var(--space-xs));
  }
}

@media (max-width: 639px) {
  .page-top--volty-room .page-hero {
    padding-bottom: calc(140px + var(--space-xs));
  }
}

/* The 404 has its text and buttons in the middle: he only fits on a wide screen */
@media (max-width: 899px) {
  .volty--wide-only {
    display: none;
  }
}

@media (min-width: 900px) and (max-width: 1099px) {
  .volty--stand {
    display: none;
  }
}

@media (min-width: 1100px) {
  .volty--stand.volty--float {
    bottom: clamp(2rem, 4vw, 3.5rem);
  }
}

@media (min-width: 1100px) {
  .volty--stand {
    --volty-h: clamp(250px, 22vw, 330px);
    right: calc(var(--edge) + var(--volty-offset, 17rem));
  }
}

/* Home, "Why Smart Choice": hands on hips, standing on the line above the guarantees */
.volty--why {
  --volty-h: 190px;
  flex: none;
}

@media (max-width: 639px) {
  .volty--why {
    display: none;
  }
}

/* Home, photo estimate band: pointing at the form */
.volty--band {
  display: none;
}

@media (min-width: 1100px) {
  .volty--band {
    --volty-h: 240px;
    display: block;
    position: absolute;
    z-index: 2;
    right: calc(50% - 0.5rem);   /* his finger stops just before the form card */
    bottom: -0.7rem;
  }
}

/* Home, service areas: flying next to the title */
.section-head--volty {
  position: relative;
}

.volty--head {
  display: none;
}

@media (min-width: 1000px) {
  .volty--head {
    --volty-h: 190px;
    display: block;
    position: absolute;
    right: 14rem;   /* clear of the button */
    bottom: calc(var(--space-l) + 0.25rem);
  }
}

/* 22. CALL BANNER ---------------------------------------------------------
   "You make the call" picture with the phone number; the whole picture is a
   tel: link. In blog articles it sits before the first heading; in services
   and areas, after the first section.                                      */
.call-banner {
  display: block;
  margin-block: var(--space-l);
  overflow: hidden;
  border-radius: 12px;
  line-height: 0;
  box-shadow: 0 10px 30px -12px rgba(0, 15, 48, 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.call-banner img {
  width: 100%;
  height: auto;
}

.call-banner:hover,
.call-banner:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -12px rgba(0, 15, 48, 0.45);
}