/* ==========================================================================
   Components: the pieces every page of the theme shares.
   Top bar, header and menus, cards, tabs, questions, form fields,
   footer and the floating controls. Page layouts live in their own file
   (home.css for the homepage).
   ========================================================================== */

:root {
  --topbar-h: 2.75rem;
  --header-h: 4.25rem;
}

@media (min-width: 992px) {
  :root {
    --header-h: 5rem;
  }
}

/* Anything the browser scrolls to (a section from a link, a field reached
   with the Tab key) stops below the sticky header, not underneath it. */
html {
  scroll-padding-top: var(--header-h);
}

/* Sections receive focus after an in-page jump; they are not controls */
section:focus {
  outline: 0;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Row that holds a section's chip and, in the draft, its "Sample" flag */
.labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.labels .chip {
  margin-bottom: 0;
}

.section-head--center .labels {
  justify-content: center;
}

/* SplitText wraps each heading line while it animates in. The extra room
   stops letters with tails (g, y, p) being cut off mid-animation. */
.line-mask {
  margin-bottom: -0.14em;
  padding-bottom: 0.14em;
}

/* Top bar
   ========================================================================== */

.topbar {
  background: var(--pine);
  color: var(--on-dark);
  font-size: var(--text-xs);
  font-weight: 500;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  min-height: var(--topbar-h);
}

.topbar__note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.topbar .icon {
  width: 1rem;
  height: 1rem;
  color: var(--sun);
}

.topbar a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: var(--topbar-h);
  color: var(--white);
  text-decoration: none;
}

.topbar__note a {
  color: var(--sun-bright);
  font-weight: 700;
  text-decoration: underline;
}

.topbar__note a:hover {
  color: var(--white);
}

.topbar__meta {
  display: none;
  align-items: center;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topbar__meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

/* Tablets have room for the phone number only */
@media (max-width: 991.98px) {
  .topbar__meta li:first-child,
  .topbar__meta .topbar__social {
    display: none;
  }
}

.topbar__meta a:hover {
  color: var(--sun-bright);
}

.topbar__social {
  gap: 0.125rem;
}

.topbar .topbar__social a {
  justify-content: center;
  width: 2.25rem;
}

.topbar__social .icon {
  color: currentColor;
}

@media (min-width: 768px) {
  .topbar__inner {
    justify-content: space-between;
  }

  .topbar__meta {
    display: flex;
  }
}

/* Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--white);
  transition:
    background-color var(--fast) ease,
    box-shadow var(--fast) ease;
}

/* Once the page has scrolled, the header lifts off the content */
.site-header.is-stuck {
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 1px 0 var(--line),
    0 14px 30px -22px rgba(11, 31, 23, 0.35);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  backdrop-filter: saturate(1.5) blur(16px);
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.site-header__logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 2.75rem;
}

.site-header__logo img {
  width: clamp(11.5rem, 17vw, 15rem);
}

.site-nav {
  --nav-x: 0.75rem; /* space either side of each menu name */
  margin-inline: auto;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 2.75rem;
  padding: 0 var(--nav-x);
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--fast) ease,
    color var(--fast) ease;
}

.site-nav__link:hover {
  background: var(--mist);
  color: var(--green-deep);
}

.site-nav__link.is-current {
  color: var(--green);
}

.site-nav__caret {
  width: 1rem;
  height: 1rem;
  transition: transform var(--medium) var(--ease-out);
}

/* Residential, Solar battery and Commercial: the name links to the section's
   overview page and the arrow beside it opens the menu. Together they read
   as one pill. */
.site-nav__split {
  display: flex;
  align-items: center;
  border-radius: var(--r-pill);
  transition: background-color var(--fast) ease;
}

.site-nav__split:hover,
.site-nav__split:has(.show) {
  background: var(--mist);
}

.site-nav__split .site-nav__link {
  padding-right: 0;
}

.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--nav-x) 0 0.3rem;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: color var(--fast) ease;
}

.site-nav__split:hover .site-nav__link:not(.is-current),
.site-nav__split:hover .site-nav__toggle:not(.is-current) {
  color: var(--green-deep);
}

.site-nav__toggle.is-current {
  color: var(--green);
}

.site-nav__toggle.show .site-nav__caret {
  transform: rotate(180deg);
}

.site-header__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

.site-header .button {
  min-height: 2.875rem;
}

/* The full menu shows from 1200px (header.php); below that its links are in
   the side menu behind the menu button */
@media (min-width: 1200px) {
  .site-header__actions {
    gap: 1.5rem;
    margin-left: 0;
  }
}

/* Seven menu items leave no room for the phone block at any width (the
   container stops at 1320px); the number is in the top bar */
.header-call {
  display: none !important;
}

/* The menu is 18px (the type standard in tokens.css), so the row fits only
   with the links close together: closest, with a smaller logo, on laptops */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .site-nav {
    --nav-x: 0.3rem;
  }

  .site-header__logo img {
    width: 10.5rem;
  }
}

@media (min-width: 1400px) {
  .site-nav {
    --nav-x: 0.5rem;
  }
}

/* The arrow chip needs room the header does not have on small laptops */
@media (max-width: 1199.98px) {
  .site-header .button {
    padding-inline: 1.35rem;
  }

  .site-header .button__chip {
    display: none;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .site-header .button {
    padding-inline: 1.1rem;
  }
}

.header-call {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink);
  text-decoration: none;
}

.header-call__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--mist-deep);
  color: var(--green-deep);
  transition:
    background-color var(--fast) ease,
    color var(--fast) ease;
}

.header-call:hover .header-call__icon {
  background: var(--green);
  color: var(--white);
}

.header-call small {
  display: block;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.3;
}

.header-call strong {
  display: block;
  color: var(--ink);
  font-size: var(--text-base);
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.burger {
  display: grid;
  flex: none;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--mist-deep);
  color: var(--ink);
  cursor: pointer;
}

.burger .icon {
  width: 1.4rem;
  height: 1.4rem;
}

/* Wide dropdown under Residential and Commercial.
   Bootstrap opens and closes it; these rules replace its look and add the
   fade. It is centred on the header rather than on its own menu item. */
.site-nav__mega {
  position: static;
}

.site-nav .dropdown-menu.mega {
  top: calc(100% - 0.5rem);
  left: 50%;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 1.25rem;
  width: min(46rem, calc(100vw - var(--gutter) * 2));
  margin: 0;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-lg);
  font-size: inherit;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 0.75rem);
  transition:
    opacity var(--fast) ease,
    transform var(--medium) var(--ease-out),
    visibility 0s linear var(--fast);
}

.site-nav .dropdown-menu.mega.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

/* Bridges the gap between the menu item and the panel for the pointer */
.mega::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 1.5rem;
}

.mega__title {
  margin: 0.25rem 0.75rem 0.5rem;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.mega__link {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--r-sm);
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--fast) ease;
}

.mega__link:hover {
  background: var(--mist);
  color: var(--ink);
}

.mega__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-sm);
  background: var(--mist-deep);
  color: var(--green-deep);
  transition:
    background-color var(--fast) ease,
    color var(--fast) ease;
}

.mega__link:hover .mega__icon {
  background: var(--green);
  color: var(--white);
}

.mega__link strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.35;
}

.mega__link small {
  display: block;
  color: var(--muted);
  font-size: var(--text-xs);
}

.mega__promo {
  position: relative;
  display: block;
  min-height: 15rem;
  border-radius: var(--r-md);
  background: var(--pine);
  overflow: hidden;
  text-decoration: none;
}

.mega__promo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}

.mega__promo:hover img {
  transform: scale(1.06);
}

.mega__promo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(6, 40, 29, 0.94) 0%,
    rgba(6, 40, 29, 0.5) 50%,
    rgba(6, 40, 29, 0.05) 100%
  );
}

.mega__promo-text {
  position: absolute;
  right: 1.1rem;
  bottom: 1.1rem;
  left: 1.1rem;
  z-index: 1;
  display: grid;
  gap: 0.2rem;
}

.mega__promo-text strong {
  color: var(--white);
  font-size: var(--text-base);
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.mega__promo-text span {
  color: var(--sun-bright);
  font-size: var(--text-xs);
  font-weight: 700;
}

/* Mobile menu (Bootstrap offcanvas)
   ========================================================================== */

.site-menu {
  --bs-offcanvas-width: min(26rem, 100vw);
  --bs-offcanvas-bg: var(--white);
  --bs-offcanvas-border-width: 0;
}

.site-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem var(--gutter);
  border-bottom: 1px solid var(--line);
}

.site-menu__top img {
  width: 13.5rem;
}

.site-menu__nav {
  flex: 1;
  padding: 0.5rem var(--gutter) 1rem;
  overflow-y: auto;
}

.site-menu__nav > a,
.site-menu__row > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 3.75rem;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-align: left;
  text-decoration: none;
}

.site-menu__row > button .icon {
  color: var(--green);
  transition: transform var(--medium) var(--ease-out);
}

.site-menu__row > button[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

/* Residential, Solar battery and Commercial: the name opens the section's
   page and the arrow, a separate button, shows the pages under it */
.site-menu__row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.site-menu__row > a {
  flex: 1;
  border-bottom: 0;
}

.site-menu__row > button {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  width: 3.5rem;
  min-height: 3.75rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.site-menu__sub {
  display: grid;
  padding: 0.5rem 0 0.75rem;
  border-bottom: 1px solid var(--line);
}

.site-menu__sub a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--body);
  font-weight: 600;
  text-decoration: none;
}

.site-menu__sub a:hover {
  color: var(--green);
}

.site-menu__foot {
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem var(--gutter) calc(1.25rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}

/* Small shared pieces
   ========================================================================== */

/* Icon, small label and a large phone number */
.call-block {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--ink);
  text-decoration: none;
}

.call-block__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--sun);
  color: var(--ink);
  transition: transform var(--medium) var(--ease-out);
}

.call-block:hover .call-block__icon {
  transform: rotate(-12deg) scale(1.06);
}

.call-block small {
  display: block;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.3;
}

.call-block strong {
  display: block;
  color: var(--ink);
  font-size: 1.1875rem;
  letter-spacing: -0.02em;
  line-height: 1.3;
  transition: color var(--fast) ease;
}

.call-block:hover strong {
  color: var(--green);
}

.call-block--light small {
  color: var(--on-dark);
}

.call-block--light strong,
.call-block--light:hover strong {
  color: var(--white);
}

/* Icon tile with a heading and a line of text */
.features {
  display: grid;
  gap: 1.75rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 576px) {
  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.feature {
  display: flex;
  gap: 1rem;
}

.feature__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--r-md);
  background: var(--mist-deep);
  color: var(--green-deep);
  transition:
    background-color var(--fast) ease,
    color var(--fast) ease;
}

.feature__icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.feature:hover .feature__icon {
  background: var(--green);
  color: var(--white);
}

.feature h3 {
  font-size: 1.125rem;
}

.feature p {
  margin-top: 0.3rem;
  font-size: var(--text-sm);
  line-height: 1.55;
}

/* Carousel arrows as a pair */
.arrows {
  display: flex;
  gap: 0.6rem;
}

/* Overall rating: big number, stars and a line of text */
.rating {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.rating__num {
  color: var(--ink);
  font-size: clamp(2.75rem, 2rem + 2.4vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
}

.rating__text {
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* Cards
   ========================================================================== */

/* Review */
.review {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  width: clamp(18rem, 26vw, 24.5rem);
  padding: clamp(1.5rem, 2.2vw, 2.1rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  /* Each card lays itself out alone, so the row is not re-measured when one
     card changes */
  contain: layout style;
  isolation: isolate;
  transition:
    border-color var(--fast) ease,
    transform var(--medium) var(--ease-out);
}

/* The hover shadow is drawn once and faded in, which costs far less than
   animating the shadow itself */
.review::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transition: opacity var(--medium) ease;
  pointer-events: none;
}

@media (hover: hover) {
  .review:hover {
    border-color: transparent;
    transform: translateY(-0.3rem);
  }

  .review:hover::before {
    opacity: 1;
  }
}

.review__mark {
  position: absolute;
  top: clamp(1.25rem, 2vw, 1.75rem);
  right: clamp(1.25rem, 2vw, 1.75rem);
  width: 2.5rem;
  height: 2.5rem;
  color: var(--mist-deep);
}

.review blockquote {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.55;
}

.review__who {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.review__who strong {
  display: block;
  color: var(--ink);
  font-size: var(--text-sm);
  line-height: 1.35;
}

.review__who small {
  display: block;
  color: var(--muted);
  font-size: var(--text-xs);
}

.review__tag {
  margin-left: auto;
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--mist);
  color: var(--green-deep);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}

/* Package */
.pkg {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  overflow: hidden;
  transition:
    border-color var(--fast) ease,
    box-shadow var(--medium) ease,
    transform var(--medium) var(--ease-out);
}

.pkg:hover {
  border-color: transparent;
  box-shadow: var(--shadow-lg);
  transform: translateY(-0.5rem);
}

.pkg__media {
  position: relative;
  aspect-ratio: 8 / 5;
  background: var(--pine-2);
  overflow: hidden;
}

.pkg__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}

.pkg:hover .pkg__media img {
  transform: scale(1.06);
}

.pkg__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(6, 40, 29, 0.9) 0%,
    rgba(6, 40, 29, 0.35) 48%,
    rgba(6, 40, 29, 0) 78%
  );
}

.pkg__size {
  position: absolute;
  bottom: 1.1rem;
  left: 1.5rem;
  z-index: 1;
  color: var(--white);
  font-size: clamp(2.75rem, 2rem + 2.4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
}

.pkg__size small {
  margin-left: 0.3rem;
  color: var(--sun-bright);
  font-size: 0.34em;
  font-weight: 700;
  letter-spacing: 0;
}

.pkg__flag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem 0.4rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--sun);
  color: var(--ink);
  font-size: var(--text-xs);
  font-weight: 800;
}

.pkg__flag .icon {
  width: 0.85rem;
  height: 0.85rem;
}

.pkg__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(1.25rem, 2vw, 1.75rem);
}

.pkg__body h3 {
  font-size: 1.3125rem;
}

/* The title links to the system's own page */
.pkg__body h3 a {
  color: var(--ink);
  text-decoration: none;
}

.pkg__body h3 a:hover {
  color: var(--green-deep);
}

.pkg__fit {
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: var(--text-sm);
}

.pkg__specs {
  margin: 1.25rem 0 1.5rem;
  padding: 0;
  list-style: none;
}

.pkg__specs li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.pkg__specs .icon {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--green);
}

.pkg__specs span {
  color: var(--muted);
}

.pkg__specs strong {
  margin-left: auto;
  color: var(--ink);
  font-weight: 700;
  text-align: right;
}

.pkg .button {
  margin-top: auto;
}

/* The middle card of each set stands out */
.pkg--featured {
  border-color: var(--green);
  box-shadow:
    0 0 0 1px var(--green),
    var(--shadow-md);
}

.pkg--featured:hover {
  border-color: var(--green);
  box-shadow:
    0 0 0 1px var(--green),
    var(--shadow-lg);
}

/* Blog post */
.post {
  position: relative;
  display: flex;
  flex-direction: column;
}

.post__media {
  display: block;
  aspect-ratio: 3 / 2;
}

.post__media img {
  transition: transform 1.1s var(--ease-out);
}

.post:hover .post__media img {
  transform: scale(1.05);
}

.post__cat {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  padding: 0.35rem 0.85rem;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.5;
}

.post__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  padding-top: 1.4rem;
}

.post__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.post__meta span {
  padding-left: 0.75rem;
  border-left: 1px solid currentColor;
  line-height: 1;
}

.post h3 a {
  color: var(--ink);
  text-decoration: none;
}

/* The whole card is the link */
.post h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.post:hover h3 a {
  color: var(--green-deep);
}

.post__excerpt {
  font-size: var(--text-sm);
  line-height: 1.6;
}

.post .link-arrow {
  margin-top: auto;
  padding-top: 0.4rem;
}

.post:hover .link-arrow {
  color: var(--green);
}

.post:hover .link-arrow .icon {
  transform: translate(3px, -3px);
}

/* Tabs: a pill-shaped switch with a sliding marker
   ========================================================================== */

.tabs {
  position: relative;
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 0.375rem;
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow:
    inset 0 0 0 1px var(--line),
    var(--shadow-sm);
}

/* The marker is placed by script. Until then the selected tab carries its
   own background, so the switch reads correctly either way. */
.tabs__pill {
  position: absolute;
  top: 0.375rem;
  bottom: 0.375rem;
  left: 0;
  width: var(--pill-w, 0);
  border-radius: var(--r-pill);
  background: var(--green);
  opacity: 0;
  transform: translateX(var(--pill-x, 0));
  transition:
    transform var(--medium) var(--ease-out),
    width var(--medium) var(--ease-out);
}

.tabs.is-enhanced .tabs__pill {
  opacity: 1;
}

.tabs__tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0 clamp(1rem, 2.6vw, 1.85rem);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--fast) ease;
}

.tabs.is-enhanced .tabs__tab {
  background: none;
}

.tabs__tab:hover {
  color: var(--green);
}

.tabs__tab[aria-selected="true"] {
  background: var(--green);
  color: var(--white);
}

@media (max-width: 479.98px) {
  .tabs {
    width: 100%;
  }

  .tabs__tab .icon {
    display: none;
  }
}

/* Questions (Bootstrap collapse)
   ========================================================================== */

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  transition:
    background-color var(--fast) ease,
    border-color var(--fast) ease;
}

.faq-item + .faq-item {
  margin-top: 0.75rem;
}

.faq-item:has(.faq-item__toggle[aria-expanded="true"]) {
  border-color: var(--mist);
  background: var(--mist);
}

.faq-item h3 {
  font-size: inherit;
  letter-spacing: 0;
}

.faq-item__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  padding: 1.15rem 1.15rem 1.15rem 1.4rem;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

/* Plus that turns into a minus */
.faq-item__icon {
  position: relative;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--mist-deep);
  transition: background-color var(--fast) ease;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.8rem;
  height: 2px;
  margin: -1px 0 0 -0.4rem;
  border-radius: 2px;
  background: var(--ink);
  transition:
    transform var(--medium) var(--ease-out),
    background-color var(--fast) ease;
}

.faq-item__icon::after {
  transform: rotate(90deg);
}

.faq-item__toggle[aria-expanded="true"] .faq-item__icon {
  background: var(--green);
}

.faq-item__toggle[aria-expanded="true"] .faq-item__icon::before,
.faq-item__toggle[aria-expanded="true"] .faq-item__icon::after {
  background: var(--white);
}

.faq-item__toggle[aria-expanded="true"] .faq-item__icon::after {
  transform: rotate(0deg);
}

.faq-item__answer {
  max-width: 44em;
  padding: 0 4.25rem 1.4rem 1.4rem;
}

/* Blog answers arrive as editor HTML: paragraphs and lists */
.faq-item__answer > * + * {
  margin-top: 0.8rem;
}

.faq-item__answer ul,
.faq-item__answer ol {
  margin-bottom: 0;
  padding-left: 1.25rem;
}

/* Numbered steps joined by a line
   ========================================================================== */

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

.step {
  position: relative;
  display: flex;
  gap: 1.1rem;
  padding-bottom: 1.5rem;
}

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

.step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 2.75rem;
  bottom: 0;
  left: calc(1.375rem - 1px);
  width: 2px;
  background: var(--line);
}

.step__num {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: 800;
}

.step h3 {
  padding-top: 0.55rem;
  font-size: 1.125rem;
}

.step p {
  margin-top: 0.25rem;
  font-size: var(--text-sm);
  line-height: 1.55;
}

/* Contact details as tiles */
.contact-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.1rem 0.85rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.4;
}

.contact-list__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--mist-deep);
  color: var(--green-deep);
}

.contact-list small {
  display: block;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.contact-list a {
  color: var(--ink);
  text-decoration: none;
}

.contact-list a:hover {
  color: var(--green);
}

/* The whole tile is the tap area */
.contact-list a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Form fields
   --------------------------------------------------------------------------
   Form text is a step below the body text and the same at every width:
   labels 15px, typed text 16px (an iPhone zooms into a field whose text is
   smaller), error messages 14px.
   ========================================================================== */

.field__label {
  display: block;
  float: none;
  width: auto;
  margin-bottom: 0.45rem;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
}

.field__optional {
  margin-left: 0.35rem;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 500;
}

.field .form-control,
.field .form-select {
  min-height: 3.375rem;
  padding: 0.7rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background-color: var(--white);
  box-shadow: none;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
  transition:
    border-color var(--fast) ease,
    outline-color var(--fast) ease;
}

.field .form-select {
  padding-right: 2.75rem;
  cursor: pointer;
}

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

.field .form-control:hover,
.field .form-select:hover {
  border-color: #b7c9be;
}

.field .form-control:focus,
.field .form-select:focus {
  border-color: var(--green);
  outline: 3px solid rgba(24, 120, 80, 0.2);
  outline-offset: 0;
}

.field.is-invalid .form-control,
.field.is-invalid .form-select {
  border-color: var(--danger);
}

.field__error {
  margin-top: 0.4rem;
  color: var(--danger);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
}

/* Brief highlight on a field that was filled in for the visitor */
.field.is-prefilled .form-select {
  border-color: var(--sun-deep);
  outline: 3px solid rgba(248, 168, 40, 0.3);
  outline-offset: 0;
}

/* Two-way choice shown as a switch (radio buttons underneath) */
.segmented {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.segmented__options {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
  min-height: 3.375rem;
  padding: 0.25rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--mist);
}

.segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border-radius: 8px;
  color: var(--body);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color var(--fast) ease,
    color var(--fast) ease;
}

.segmented label:hover {
  color: var(--ink);
}

.segmented input:checked + label {
  background: var(--white);
  box-shadow: var(--shadow-sm);
  color: var(--green-deep);
}

.segmented input:focus-visible + label {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* Quote panel (components/quote-form.php)
   --------------------------------------------------------------------------
   The lead form in one large card of two halves. Dark half: the heading and
   how to reach us. Light half: the form. It is the home page's quote section,
   and the popup on every other page.
   ========================================================================== */

.quote__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 0.5rem;
  border-radius: 40px;
  background: var(--white);
  box-shadow:
    0 0 0 1px var(--hairline),
    var(--shadow-lg);
}

.quote__aside {
  position: relative;
  isolation: isolate;
  padding: clamp(1.5rem, 3.4vw, 3.25rem);
  border-radius: 40px;
  background: var(--pine);
  color: var(--on-dark);
  overflow: hidden;
}

/* Sun arcs rising from the corner (decorative) */
.quote__arcs {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: min(26rem, 80%);
  color: rgba(255, 198, 85, 0.2);
}

/* On the dark half the chip is its dot and its words, without the pill */
.quote__aside .chip {
  gap: 0.6rem;
  padding: 0;
  background: none;
  color: var(--white);
  font-size: var(--text-xs);
}

.quote__aside .chip__dot {
  width: 1.75rem;
  height: 1.75rem;
}

.quote__aside .chip__dot .icon {
  width: 0.95rem;
  height: 0.95rem;
}

.quote__title {
  color: var(--white);
  font-size: clamp(1.875rem, 1.2rem + 2.2vw, 3rem);
}

.quote__title span {
  color: var(--sun-bright);
}

.quote__lede {
  max-width: 26em;
  margin-top: 1rem;
  font-size: var(--text-base);
  line-height: 1.6;
}

/* Contact details as plain rows on the dark half */
.quote__aside .contact-list {
  gap: 0;
  margin-top: 2.25rem;
}

.quote__aside .contact-list li {
  padding: 0.9rem 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0;
  background: none;
  color: var(--white);
  text-wrap: balance;
}

.quote__aside .contact-list__icon {
  background: rgba(255, 255, 255, 0.1);
  color: var(--sun-bright);
}

.quote__aside .contact-list small {
  color: var(--on-dark);
}

.quote__aside .contact-list a,
.quote__aside .contact-list a:hover {
  color: var(--white);
}

.quote-form {
  padding: clamp(1.25rem, 3.2vw, 3.25rem) clamp(0.75rem, 3.2vw, 3.25rem);
}

.quote-form__head {
  margin-bottom: 1.5rem;
}

/* The popup prints this title as a <p>, hence the class (the note below is a
   <p> as well) */
.quote-form__head h1,
.quote-form__head .quote-form__title {
  margin-top: 0;
  color: var(--ink);
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  letter-spacing: -0.022em;
  line-height: 1.22;
}

.quote-form__head p {
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: var(--text-xs);
}

.quote-form .form-control {
  caret-color: var(--green);
}

/* Browsers tint a field they fill in; keep it on the page's palette */
.quote-form .form-control:-webkit-autofill,
.quote-form .form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  box-shadow: 0 0 0 100vmax var(--mist) inset;
}

/* .row sets its own display, so the hidden attribute needs help */
.quote-form__fields[hidden] {
  display: none;
}

/* The email and the product share a row only where the form is wide enough
   to show the longest product name in full. The form's own width decides,
   not the screen's, because the form is a different width in the popup. */
.quote-form__fields {
  container-type: inline-size;
}

@container (max-width: 32.49rem) {
  .quote-form__fields > .quote-form__pair {
    width: 100%;
  }
}

.quote-form .form-select {
  text-overflow: ellipsis;
}

.quote-form__foot {
  margin-top: 1rem;
}

/* Shown above the button when a lead could not be sent */
.quote-form__status {
  margin-bottom: 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid #f0d49a;
  border-radius: var(--r-sm);
  background: #fff7e8;
  color: #5c3c00;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
}

/* While the lead is being sent */
.quote-form .button:disabled {
  opacity: 0.72;
  cursor: progress;
}

/* On the narrowest phones the button keeps its words and drops its arrow */
@media (max-width: 359.98px) {
  .quote-form__foot .button {
    padding-inline: 1rem;
  }

  .quote-form__foot .button__chip {
    display: none;
  }
}

/* The step that asks for the code sent by SMS */
.quote-form__otp-note {
  margin-bottom: 1.25rem;
  color: var(--body);
  font-size: 1rem;
  line-height: 1.6;
}

.quote-form__otp .form-control {
  max-width: 11rem;
  font-size: 1.375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.35em;
}

/* Google's address suggestions. The list is added to <body>, above the popup. */
.pac-container {
  z-index: 1100;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  font-family: var(--font);
}

.pac-item {
  padding: 0.5rem 0.9rem;
  border-top-color: var(--line);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.5;
  cursor: pointer;
}

.pac-item:hover,
.pac-item-selected {
  background: var(--mist);
}

.pac-item-query {
  color: var(--ink);
  font-size: var(--text-sm);
}

.pac-icon {
  display: none;
}

@media (min-width: 992px) {
  .quote__panel {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }

  /* The form on its own (no dark half) fills the panel */
  .quote__panel--form {
    grid-template-columns: minmax(0, 1fr);
  }

  .quote-form {
    align-self: center;
  }
}

/* Quote popup (footer.php)
   --------------------------------------------------------------------------
   The same panel in a dialog, opened by any link to #quote on a page that
   has no quote section of its own. The dark half joins it on wide screens.
   ========================================================================== */

.modal-backdrop {
  --bs-backdrop-bg: #000;
  --bs-backdrop-opacity: 0.52;
}

.quote-modal {
  --bs-modal-width: 40rem;
  --bs-modal-margin: 0.75rem;
}

/* Bootstrap lets a dialog run to the screen's edges on a screen narrower
   than the dialog's full width */
.quote-modal .modal-dialog {
  max-width: min(
    var(--bs-modal-width),
    calc(100% - 2 * var(--bs-modal-margin))
  );
}

/* The panel is the dialog's surface */
.quote-modal .modal-content {
  border: 0;
  border-radius: 0;
  background: none;
}

.quote-modal .quote__panel {
  grid-template-columns: minmax(0, 1fr);
}

.quote-modal .quote__aside {
  display: none;
}

/* Room for the close button beside the heading */
.quote-modal .quote-form__head {
  padding-right: 3rem;
}

.quote-modal__close {
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
}

@media (min-width: 1200px) {
  .quote-modal {
    --bs-modal-width: 66rem;
  }

  .quote-modal .quote__panel {
    grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
  }

  .quote-modal .quote__aside {
    display: block;
    padding: 2.25rem;
  }

  .quote-modal .quote__title {
    font-size: 2.125rem;
  }

  .quote-modal .quote-form {
    padding: 2.5rem;
  }
}

/* Thank-you page (thank-you.php)
   ========================================================================== */

.thanks {
  padding-block: var(--frame) var(--section);
}

.thanks__panel {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  margin-inline: var(--frame);
  padding: clamp(4rem, 9vw, 8rem) var(--gutter);
  border-radius: var(--r-xl);
  background: var(--pine);
  color: var(--on-dark);
  text-align: center;
}

.thanks__icon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 0.5rem;
  border-radius: 50%;
  background: var(--sun);
  color: var(--ink);
}

.thanks__icon .icon {
  width: 1.75rem;
  height: 1.75rem;
}

.thanks__title {
  max-width: 14em;
  color: var(--white);
  font-size: var(--text-h2);
}

.thanks__panel p {
  max-width: 34em;
}

.thanks__panel p a {
  color: var(--white);
  font-weight: 700;
  white-space: nowrap;
}

.thanks__panel .button {
  margin-top: 1rem;
}

/* Footer
   ========================================================================== */

.site-footer {
  position: relative;
  margin: var(--frame);
  padding-top: clamp(1.25rem, 3vw, 2.5rem);
  border-radius: var(--r-xl);
  background:
    radial-gradient(70rem 26rem at 50% 108%, rgba(24, 120, 80, 0.38), transparent 70%),
    var(--pine);
  color: var(--on-dark);
  font-size: var(--text-sm);
  overflow: hidden;
  isolation: isolate;
}

/* The footer sits inside a frame, so its container gives that much back to
   keep the text on the same line as the rest of the page. */
.site-footer > .container-xxl {
  --bs-gutter-x: calc((var(--gutter) - var(--frame)) * 2);
}

@media (min-width: 1400px) {
  .site-footer > .container-xxl {
    --bs-gutter-x: calc(var(--gutter) * 2);
  }
}

.site-footer a {
  color: var(--on-dark);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--white);
}

/* Top card
   -------------------------------------------------------------------------- */

.site-footer__top {
  position: relative;
  display: grid;
  gap: 2.25rem;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-xl);
  background:
    radial-gradient(40rem 26rem at 100% 0%, rgba(248, 168, 40, 0.2), transparent 65%),
    radial-gradient(32rem 22rem at 0% 100%, rgba(24, 120, 80, 0.5), transparent 70%),
    var(--pine-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  isolation: isolate;
}

/* Faint rings spreading out from the top right corner, like the sun's */
.site-footer__top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 3.25rem);
  -webkit-mask-image: radial-gradient(circle at 100% 0%, #000, transparent 70%);
  mask-image: radial-gradient(circle at 100% 0%, #000, transparent 70%);
  pointer-events: none;
}

.site-footer__intro {
  display: grid;
  gap: 1.25rem;
}

.site-footer__intro-main {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
}

.site-footer__logo {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.site-footer__logo img {
  width: 13rem;
}

.site-footer__tagline {
  margin: 0;
  color: var(--white);
  font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.25rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  word-spacing: var(--word-space-display);
}

.site-footer__tagline span {
  color: var(--sun);
}

.site-footer__lede {
  max-width: 26rem;
  margin: 0;
}

/* Call, social and payment share one row under a hairline */
.site-footer__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer__divider {
  display: none;
  width: 1px;
  height: 2.5rem;
  background: rgba(255, 255, 255, 0.16);
}

.site-footer__social {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer .site-footer__social a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  color: var(--white);
  transition:
    background-color var(--fast) ease,
    color var(--fast) ease,
    translate var(--medium) var(--ease-out);
}

.site-footer .site-footer__social a:hover {
  background: var(--sun);
  color: var(--ink);
  translate: 0 -3px;
}

/* Payment button: full width on phones, pushed to the row's right end above.
   The footer's link colour would otherwise win over the button's own. */
.site-footer .site-footer__pay,
.site-footer .site-footer__pay:hover {
  color: var(--ink);
}

.site-footer__pay {
  width: 100%;
}

.site-footer__pay > .icon {
  width: 1.15rem;
  height: 1.15rem;
  margin-right: -0.35rem;
}

/* Link lists and contact
   -------------------------------------------------------------------------- */

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 2rem;
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
}

/* Contact takes its own line on narrow screens */
.site-footer__contact {
  grid-column: 1 / -1;
}

/* Heading with a small glowing sun dot */
.site-footer__heading {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1rem;
  color: var(--white);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.site-footer__heading::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 4px rgba(248, 168, 40, 0.18);
}

.site-footer nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* On hover a short sun dash slides in ahead of the link. Both move with
   transforms only, so the link keeps its size and a long one never re-wraps
   (which made the page jump). */
.site-footer nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 2.75rem;
  min-height: 2.5rem;
  padding-block: 0.35rem;
  line-height: 1.4;
  transition:
    color var(--fast) ease,
    translate var(--medium) var(--ease-out);
}

/* Sits just left of the link, where the text started before it slid over */
.site-footer nav a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -1.4rem;
  width: 0.85rem;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--sun);
  scale: 0 1;
  transform-origin: left center;
  transition: scale var(--medium) var(--ease-out);
}

/* Keeps the pointer over the link after it slides, so the edge never flickers */
.site-footer nav a::after {
  content: "";
  position: absolute;
  inset: 0 0 0 -1.4rem;
}

.site-footer nav a:hover,
.site-footer nav a:focus-visible {
  translate: 1.4rem 0;
}

.site-footer nav a:hover::before,
.site-footer nav a:focus-visible::before {
  scale: 1 1;
}

.site-footer address {
  display: grid;
  gap: 0.9rem;
  margin: 0;
  font-style: normal;
  line-height: 1.45;
}

.site-footer address a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--white);
}

.site-footer address small {
  display: block;
  color: var(--on-dark);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* Never broken mid-line (the email address); the address breaks at its <br> */
.site-footer address strong {
  display: block;
  font-weight: 700;
  white-space: nowrap;
}

.site-footer__contact-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--sun);
  transition:
    background-color var(--fast) ease,
    color var(--fast) ease;
}

.site-footer__contact-icon .icon {
  width: 1.1rem;
  height: 1.1rem;
}

.site-footer address a:hover .site-footer__contact-icon {
  background: var(--sun);
  color: var(--ink);
}

/* Bottom bar
   -------------------------------------------------------------------------- */

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 2rem;
  padding-block: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--text-xs);
}

.site-footer__bottom p {
  margin: 0;
}

@media (min-width: 576px) {
  .site-footer__divider {
    display: block;
  }

  .site-footer__pay {
    width: auto;
    margin-left: auto;
  }
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Tagline on the left, the short description at its foot on the right */
  .site-footer__intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem 3rem;
  }

  .site-footer__lede {
    max-width: 19rem;
  }

  /* The four lists share a row; the contact details run across beneath them */
  .site-footer__contact address {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
  }
}

@media (min-width: 1200px) {
  .site-footer__grid {
    /* The contact column is never narrower than the email address */
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(max-content, 1.3fr);
    gap: 2.5rem;
  }

  .site-footer__contact {
    grid-column: auto;
  }

  .site-footer__contact address {
    display: grid;
  }
}

/* Floating controls
   ========================================================================== */

/* Back to top, ringed by how far down the page you are */
.to-top {
  position: fixed;
  right: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  z-index: var(--z-float);
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-md);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem);
  transition:
    opacity var(--fast) ease,
    transform var(--medium) var(--ease-out),
    visibility 0s linear var(--fast),
    background-color var(--fast) ease,
    color var(--fast) ease;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.to-top:hover {
  background: var(--green);
  color: var(--white);
}

.to-top__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.to-top__ring circle {
  fill: none;
  stroke: var(--line);
  stroke-width: 2.5;
}

.to-top__ring circle + circle {
  stroke: var(--green);
  stroke-dasharray: 150.8;
  stroke-dashoffset: calc(150.8 * (1 - var(--progress, 0)));
  stroke-linecap: round;
}

.to-top:hover .to-top__ring circle + circle {
  stroke: var(--sun);
}

/* Phones have the action bar instead; a second floating button would sit
   on top of the text. */
@media (max-width: 767.98px) {
  .to-top {
    display: none;
  }
}

/* Phone-only bar with the two actions that matter most */
.mobile-cta {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-float);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
  background: var(--white);
  box-shadow:
    0 -1px 0 var(--line),
    0 -14px 30px -20px rgba(11, 31, 23, 0.35);
  visibility: hidden;
  transform: translateY(110%);
  transition:
    transform var(--medium) var(--ease-out),
    visibility 0s linear var(--medium);
}

.mobile-cta.is-visible {
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.mobile-cta .button {
  min-height: 3rem;
}

/* Label that follows the pointer over draggable carousels (placed by script) */
.drag-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-float);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 1.1rem 0 0 1.1rem;
  padding: 0.4rem 0.85rem 0.4rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
}

.drag-cursor .icon {
  width: 1rem;
  height: 1rem;
  color: var(--sun);
}