/* ==========================================================================
   Tower Performance LLC — components
   Implements DESIGN-SYSTEM.md section 7.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Icons
   -------------------------------------------------------------------------- */
.tp-icon {
  width: 1em;
  height: 1em;
  flex: none;
}

/* --------------------------------------------------------------------------
   Eyebrow + section marker
   The eyebrow is the highest-value green placement on the site: a 12.5px
   all-caps green-700 label satisfies contrast, marks the section, and costs
   almost nothing from the 5–10% colour budget.
   -------------------------------------------------------------------------- */
.tp-eyebrow {
  display: block;
  margin-bottom: var(--tp-space-3);
  color: var(--tp-green-700);
  font-family: var(--tp-font-heading);
  font-size: var(--tp-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tp-track-eyebrow);
  line-height: 1.2;
  text-transform: uppercase;
}

.tp-eyebrow--marked {
  display: flex;
  align-items: center;
  gap: var(--tp-space-3);
}

.tp-eyebrow--marked::before {
  content: "";
  width: 40px;
  height: 3px;
  background: var(--tp-green);
  flex: none;
}

.tp-eyebrow--muted {
  color: var(--tp-text-muted);
}

/* On a dark surface the ladder inverts: green-700 is a text green for white
   backgrounds and drops to 2.5:1 on charcoal. green-400 gives 6.3:1 there.
   .tp-feature sets --tp-surface-inverse without being a --inverse section, so
   it has to be named explicitly or its eyebrows fail. */
.tp-section--inverse .tp-eyebrow,
.tp-feature .tp-eyebrow {
  color: var(--tp-green-400);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.tp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tp-space-2);
  min-height: 3rem;
  padding: var(--tp-space-4) var(--tp-space-7, 1.75rem);
  border: 1px solid transparent;
  border-radius: var(--tp-radius-md);
  font-family: var(--tp-font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background-color var(--tp-fast) var(--tp-ease),
    border-color var(--tp-fast) var(--tp-ease),
    color var(--tp-fast) var(--tp-ease);
}

@media (max-width: 48rem) {
  .tp-btn {
    min-height: 3.25rem;
  }
}

.tp-btn--primary {
  background: var(--tp-action);
  color: #fff;
}

.tp-btn--primary:hover {
  background: var(--tp-action-hover);
  color: #fff;
}

.tp-btn--primary:active {
  background: var(--tp-action-active);
}

.tp-btn--secondary {
  background: var(--tp-surface);
  border-color: var(--tp-border-strong);
  color: var(--tp-gray-900);
}

.tp-btn--secondary:hover {
  background: var(--tp-surface-alt);
  border-color: var(--tp-gray-500);
  color: var(--tp-gray-900);
}

/* Deliberately charcoal, not green, so the emergency path never competes
   with the primary CTA and reads as urgent rather than promotional. */
.tp-btn--emergency {
  background: var(--tp-charcoal);
  color: #fff;
}

.tp-btn--emergency:hover {
  background: var(--tp-gray-800);
  color: #fff;
}

.tp-btn--on-photo {
  background: var(--tp-surface);
  color: var(--tp-gray-900);
}

.tp-btn--on-photo:hover {
  background: var(--tp-surface-alt);
  color: var(--tp-gray-900);
}

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

.tp-btn__icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
}

/* Tertiary — inline text action. */
.tp-link-action {
  display: inline-flex;
  align-items: center;
  gap: var(--tp-space-2);
  color: var(--tp-text-link);
  font-weight: 600;
  font-size: var(--tp-body-sm);
  text-decoration: none;
}

.tp-link-action:hover {
  color: var(--tp-text-link-hover);
  text-decoration: underline;
}

.tp-link-action__arrow {
  transition: transform var(--tp-fast) var(--tp-ease);
}

.tp-link-action:hover .tp-link-action__arrow {
  transform: translateX(3px);
}

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

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.tp-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--tp-surface);
  border-bottom: 1px solid var(--tp-border);
  transition: box-shadow var(--tp-base) var(--tp-ease);
}

.tp-header.is-scrolled {
  box-shadow: var(--tp-shadow-lg);
}

/* --- Utility strip ---------------------------------------------------------
   Holds the phone number and the social row above the main bar. Below the nav
   breakpoint it is hidden entirely: the main bar has room for the lockup, the
   phone and the menu toggle on its own, and the social icons live in the mobile
   menu. */
.tp-header__utility {
  display: none;
  background: var(--tp-surface-alt);
  border-bottom: 1px solid var(--tp-border);
}

/* The strip scrolls out of view instead of collapsing, by offsetting the sticky
   header upward by exactly its height. The header travels with the page for the
   first 38px, then pins with the main bar at the viewport top and the strip
   above it, off screen.

   It used to animate its height to zero on .is-scrolled, which fed back on
   itself: a sticky header is still in normal flow, so shrinking it by 38px
   shortened the document, and Chrome's scroll anchoring compensated by pulling
   scrollY down past the threshold that had triggered the collapse. The class
   came off, the header grew, scrollY was pushed back up, and the class went on
   again — 58 times in 1.6 seconds if the scroll happened to stop in that band.
   Doing it with a sticky offset changes no layout at all, so there is nothing
   for anchoring to react to. */
@media (min-width: 80rem) {
  .tp-header {
    /* Plus the strip's 1px bottom border, or it stays behind as a hairline at
       the top of the viewport and the bar pins 1px low. */
    top: calc(-1 * (var(--tp-header-utility-h) + 1px));
  }

  .tp-header__utility {
    display: block;
  }
}

.tp-header__utility-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--tp-space-5);
  height: var(--tp-header-utility-h);
}

/* Fixed height at every scroll position. The bar used to condense to 4rem and
   take the lockup down with it, which left the wordmark small against nav text
   that had not changed size. 5rem is also the smallest bar that can hold a
   full-size lockup once the wordmark alignment below raises it: at 3.5rem the
   logo needs 56 + 2(4.5 + 7.25) = 79.5px and the lowered nav needs
   50.75 + 2(10 + 4.5) = 79.75px, so condensing at all would clip one or the
   other. On scroll the shadow does the work instead, which costs no layout. */
.tp-header__inner {
  display: flex;
  align-items: center;
  gap: var(--tp-space-6);
  height: var(--tp-header-h);
}

.tp-header__logo {
  flex: none;
  display: block;
  line-height: 0;
}

/* Sized by height, not width. The lockup is a two-line wordmark beside the mark
   at roughly 2.94:1; constraining the width would let its height drive the
   header bar's height, which is the one dimension a header needs to control. */
.tp-header__logo img,
.tp-header__logo svg {
  height: var(--tp-header-logo-h);
  width: auto;
}

/* --- Nav aligned to the wordmark, not to the lockup's box ------------------
   The gap between TOWER and PERFORMANCE sits 80.83% of the way down the
   artwork, not halfway, because the mark above the wordmark is tall. Measured
   from the SVG: TOWER's letters end at y=886.30 and PERFORMANCE's begin at
   y=910.69 within a 509.19-990.81 viewBox, putting the gap's centre at 898.50.

   Centring both by their boxes therefore leaves the nav text 30.83% of the logo
   height above that gap. Closing it entirely by moving one side would push the
   lockup out of the bar, so the correction is split: the lockup rises 42% of it
   and the nav and actions drop the remaining 58%, which lands the header's top
   and bottom clearance within a fraction of a pixel of each other.

   Both are transforms, so no layout is disturbed and neither the header height
   nor the dropdown anchoring changes. Scoped to the breakpoint where the nav
   exists; below it there is no nav text to align to. */
@media (min-width: 80rem) {
  .tp-header__logo {
    transform: translateY(calc(var(--tp-header-logo-h) * -0.1295));
  }

  .tp-nav,
  .tp-header__actions {
    transform: translateY(calc(var(--tp-header-logo-h) * 0.1788));
  }
}

/* Pushed right by an auto margin rather than by a spacer element. An empty flex
   child does the same job but sits between two gaps instead of one, which cost
   a full --tp-space-6 for nothing — enough to put the bar over its content box
   on a 390px phone. */
.tp-header__actions {
  display: flex;
  align-items: center;
  gap: var(--tp-space-5);
  flex: none;
  margin-inline-start: auto;
}

/* --------------------------------------------------------------------------
   Social links
   Shared by the header, the mobile menu and the footer. A profile with no URL
   yet renders as a .is-placeholder span rather than an anchor, so it sits in
   the row at reduced weight and cannot be clicked.
   -------------------------------------------------------------------------- */
.tp-social {
  display: flex;
  align-items: center;
  gap: var(--tp-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* base.css sets `li + li { margin-top }` to space vertical lists. This row is
   horizontal, so that margin applied to every item except the first, sitting
   Facebook 8px above the other two in its margin box and stretching the row to
   44px so the round hover area no longer lined up with the glyph. */
.tp-social li + li {
  margin-top: 0;
}

.tp-social__link {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  color: var(--tp-text-muted);
  transition: color 120ms ease, background-color 120ms ease;
}

.tp-social__icon {
  width: 1.125rem;
  height: 1.125rem;
}

a.tp-social__link:hover,
a.tp-social__link:focus-visible {
  color: var(--tp-action);
  background: var(--tp-green-50);
}

/* Not a link. Muted enough to read as inactive, still dark enough to stay
   visible, and cursor:default so it never invites a click. */
.tp-social__link.is-placeholder {
  color: var(--tp-gray-400);
  cursor: default;
}

/* Lives in the utility strip, which is itself hidden below the nav breakpoint.
   Kept explicit here so the row cannot appear if it is ever moved back into the
   main bar, where there is no width for it. */
.tp-social--header {
  display: none;
}

@media (min-width: 80rem) {
  .tp-social--header {
    display: flex;
  }
}

.tp-social--mobile {
  justify-content: center;
  margin-top: var(--tp-space-5);
}

/* On the dark footer the muted gray would nearly vanish, so both states step
   up a few rungs of the scale. */
.tp-social--footer {
  margin-top: var(--tp-space-5);
  /* Pull the round hit areas back into line with the text above them. */
  margin-left: -0.5rem;
}

.tp-social--footer .tp-social__link {
  color: var(--tp-gray-300);
}

.tp-social--footer a.tp-social__link:hover,
.tp-social--footer a.tp-social__link:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.tp-social--footer .tp-social__link.is-placeholder {
  color: var(--tp-gray-600);
}

/* The phone number is visible at every breakpoint. For a plant with a tower
   down, the phone number is the conversion. */
.tp-header__phone {
  display: inline-flex;
  flex-direction: column;
  color: var(--tp-text);
  font-family: var(--tp-font-heading);
  text-decoration: none;
  line-height: 1.15;
}

.tp-header__phone-label {
  color: var(--tp-text-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.tp-header__phone-number {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.tp-header__phone:hover .tp-header__phone-number {
  color: var(--tp-green-700);
}

/* In the utility strip the label and number sit on one line: stacked, they
   would need more height than the 2.375rem strip has. */
.tp-header__phone--utility {
  flex-direction: row;
  align-items: baseline;
  gap: var(--tp-space-2);
}

.tp-header__phone--utility .tp-header__phone-number {
  font-size: 0.9375rem;
}

/* The main bar's copy of the phone number only exists below the nav
   breakpoint, where there is no utility strip to carry it. */
@media (min-width: 80rem) {
  .tp-header__phone--compact {
    display: none;
  }
}

/* Below the nav breakpoint the toggle takes over from the inline CTA. The bound
   is 79.9375rem rather than 80rem because min-width and max-width are both
   inclusive: at exactly 80rem the old pair matched at once and the CTA was
   hidden on the first width that was supposed to show it. */
@media (max-width: 79.9375rem) {
  .tp-header__cta {
    display: none;
  }
}

@media (max-width: 30rem) {
  .tp-header__phone-label {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Primary navigation
   -------------------------------------------------------------------------- */
.tp-nav {
  display: none;
}

/* 80rem, not the 68rem this used to be, because 80rem is where the container
   reaches its 1280px cap and finally has room for the row. The lockup, the six
   nav items and the CTA need 1124px of content width; at 68rem the container
   only offers 977px, so the nav appeared 12rem before it fit and spent that
   whole band overflowing — the nav itself was being squeezed 30px under its
   content width. Every header breakpoint uses this same value so the utility
   strip, the nav, the toggle and the mobile menu switch as one. */
@media (min-width: 80rem) {
  .tp-nav {
    display: block;
  }
}

.tp-nav__list {
  display: flex;
  align-items: center;
  gap: var(--tp-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tp-nav__list > li {
  margin: 0;
  position: relative;
}

.tp-nav__link {
  display: flex;
  align-items: center;
  gap: var(--tp-space-1);
  padding: var(--tp-space-3) var(--tp-space-3);
  border-bottom: 2px solid transparent;
  color: var(--tp-text-secondary);
  font-family: var(--tp-font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.tp-nav__link:hover {
  color: var(--tp-text);
}

/* The single most valuable green placement in the interface: it does real
   navigational work for almost no colour budget. */
.tp-nav__link[aria-current="page"],
.tp-nav__link.is-active {
  color: var(--tp-green-700);
  border-bottom-color: var(--tp-green);
}

.tp-nav__caret {
  width: 0.625rem;
  height: 0.625rem;
  transition: transform var(--tp-fast) var(--tp-ease);
}

.tp-nav__item--has-menu:hover .tp-nav__caret,
.tp-nav__item--has-menu:focus-within .tp-nav__caret {
  transform: rotate(180deg);
}

.tp-nav__menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 110;
  min-width: 22rem;
  margin: 0;
  padding: var(--tp-space-3);
  list-style: none;
  background: var(--tp-surface);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-lg);
  box-shadow: var(--tp-shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity var(--tp-base) var(--tp-ease),
    transform var(--tp-base) var(--tp-ease),
    visibility var(--tp-base);
}

.tp-nav__item--has-menu:hover .tp-nav__menu,
.tp-nav__item--has-menu:focus-within .tp-nav__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.tp-nav__menu > li {
  margin: 0;
}

.tp-nav__menu-link {
  display: block;
  padding: var(--tp-space-3) var(--tp-space-4);
  border-radius: var(--tp-radius-md);
  color: var(--tp-text);
  text-decoration: none;
}

.tp-nav__menu-link:hover {
  background: var(--tp-green-50);
  color: var(--tp-text);
}

.tp-nav__menu-label {
  display: block;
  font-family: var(--tp-font-heading);
  font-size: var(--tp-body-sm);
  font-weight: 600;
}

.tp-nav__menu-summary {
  display: block;
  margin-top: 2px;
  color: var(--tp-text-muted);
  font-size: var(--tp-caption);
  line-height: 1.45;
}

.tp-nav__menu-link[aria-current="page"] .tp-nav__menu-label {
  color: var(--tp-green-700);
}

/* --------------------------------------------------------------------------
   Mobile navigation
   -------------------------------------------------------------------------- */
.tp-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: none;
  border: 1px solid var(--tp-border-strong);
  border-radius: var(--tp-radius-md);
  color: var(--tp-text);
}

@media (min-width: 80rem) {
  .tp-nav-toggle {
    display: none;
  }
}

.tp-nav-toggle__bars,
.tp-nav-toggle__bars::before,
.tp-nav-toggle__bars::after {
  display: block;
  width: 1.125rem;
  height: 2px;
  background: currentColor;
  transition: transform var(--tp-base) var(--tp-ease), opacity var(--tp-fast);
}

.tp-nav-toggle__bars::before,
.tp-nav-toggle__bars::after {
  content: "";
  position: absolute;
}

.tp-nav-toggle__bars {
  position: relative;
}

.tp-nav-toggle__bars::before {
  transform: translateY(-6px);
}

.tp-nav-toggle__bars::after {
  transform: translateY(6px);
}

.tp-nav-toggle[aria-expanded="true"] .tp-nav-toggle__bars {
  background: transparent;
}

.tp-nav-toggle[aria-expanded="true"] .tp-nav-toggle__bars::before {
  transform: rotate(45deg);
}

.tp-nav-toggle[aria-expanded="true"] .tp-nav-toggle__bars::after {
  transform: rotate(-45deg);
}

.tp-mobile-nav {
  display: none;
  border-top: 1px solid var(--tp-border);
  background: var(--tp-surface);
  max-height: calc(100dvh - var(--tp-header-h));
  overflow-y: auto;
}

.tp-mobile-nav.is-open {
  display: block;
}

@media (min-width: 80rem) {
  .tp-mobile-nav {
    display: none !important;
  }
}

.tp-mobile-nav__list {
  margin: 0;
  padding: var(--tp-space-4) 0 var(--tp-space-8);
  list-style: none;
}

.tp-mobile-nav__list li {
  margin: 0;
}

.tp-mobile-nav__link {
  display: block;
  padding: var(--tp-space-4) 0;
  border-bottom: 1px solid var(--tp-border);
  color: var(--tp-text);
  font-family: var(--tp-font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
}

.tp-mobile-nav__link[aria-current="page"] {
  color: var(--tp-green-700);
}

.tp-mobile-nav__sub {
  margin: 0;
  padding: 0 0 var(--tp-space-3) var(--tp-space-4);
  list-style: none;
}

.tp-mobile-nav__sub .tp-mobile-nav__link {
  border-bottom: 0;
  padding: var(--tp-space-2) 0;
  font-size: var(--tp-body-sm);
  font-weight: 500;
  color: var(--tp-text-secondary);
}

.tp-mobile-nav__cta {
  padding-block: var(--tp-space-5) var(--tp-space-8);
  display: grid;
  gap: var(--tp-space-3);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.tp-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(42rem, 82vh);
  overflow: hidden;
  background: var(--tp-gray-900);
  isolation: isolate;
}

.tp-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.tp-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scrim: charcoal gradient, never a green wash over photography. */
.tp-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgb(19 21 21 / 0.86) 0%,
    rgb(19 21 21 / 0.72) 42%,
    rgb(19 21 21 / 0.4) 72%,
    rgb(19 21 21 / 0.25) 100%
  );
}

.tp-hero__inner {
  width: 100%;
  padding-block: clamp(var(--tp-space-16), 9vw, var(--tp-space-32));
  color: #fff;
}

.tp-hero__content {
  max-width: 44rem;
}

.tp-hero__title {
  margin-bottom: var(--tp-space-6);
  color: #fff;
  font-size: var(--tp-display);
  font-weight: 700;
  line-height: var(--tp-leading-display);
  letter-spacing: var(--tp-track-display);
}

.tp-hero__lead {
  max-width: 38rem;
  margin-bottom: var(--tp-space-8);
  color: rgb(255 255 255 / 0.92);
  font-size: var(--tp-lead);
  line-height: 1.55;
}

.tp-hero__eyebrow {
  color: var(--tp-green-400);
}

.tp-hero__caption {
  position: absolute;
  right: var(--tp-gutter);
  bottom: var(--tp-space-4);
  max-width: 22rem;
  color: rgb(255 255 255 / 0.62);
  font-size: var(--tp-caption);
  text-align: right;
}

@media (max-width: 60rem) {
  .tp-hero__caption {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Trust bar
   -------------------------------------------------------------------------- */
.tp-trustbar {
  background: var(--tp-surface-alt);
  border-bottom: 1px solid var(--tp-border);
}

.tp-trustbar__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.tp-trustbar__list > li {
  margin: 0;
  padding: var(--tp-space-6) var(--tp-space-5);
  border-left: 1px solid var(--tp-border);
}

.tp-trustbar__list > li:first-child {
  border-left: 0;
  padding-left: 0;
}

@media (max-width: 48rem) {
  .tp-trustbar__list > li {
    border-left: 0;
    border-top: 1px solid var(--tp-border);
    padding-inline: 0;
  }

  .tp-trustbar__list > li:first-child {
    border-top: 0;
  }
}

.tp-trustbar__value {
  display: block;
  /* Green text on a light surface, so green-700 — the same green as links and
     eyebrows. Not --tp-green (2.67:1 here, below the 3:1 large-text floor) and
     not green-600, which is reserved for button fills. */
  color: var(--tp-text-link);
  font-family: var(--tp-font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.tp-trustbar__label {
  display: block;
  margin-top: var(--tp-space-2);
  color: var(--tp-text-muted);
  font-family: var(--tp-font-heading);
  font-size: var(--tp-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tp-track-eyebrow);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Statistics — where green earns its keep
   -------------------------------------------------------------------------- */
.tp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0;
}

.tp-stat {
  padding-inline: var(--tp-space-6);
  border-left: 1px solid var(--tp-border);
}

.tp-stat:first-child {
  border-left: 0;
  padding-left: 0;
}

.tp-stat__value {
  display: block;
  /* Green text on a light surface. See .tp-trustbar__value. */
  color: var(--tp-text-link);
  font-family: var(--tp-font-heading);
  font-size: var(--tp-h1);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--tp-track-h1);
  font-variant-numeric: tabular-nums;
}

.tp-stat__label {
  display: block;
  margin-top: var(--tp-space-3);
  color: var(--tp-text-muted);
  font-family: var(--tp-font-heading);
  font-size: var(--tp-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tp-track-eyebrow);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Cards
   Restraint reads as precision: no lift, no scale. The 2px green top edge and
   the icon colour shift are the entire hover story.
   -------------------------------------------------------------------------- */
.tp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--tp-space-8);
  background: var(--tp-surface);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--tp-fast) var(--tp-ease);
}

.tp-section--alt .tp-card {
  background: var(--tp-surface);
}

.tp-card::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 2px;
  background: var(--tp-green);
  opacity: 0;
  transition: opacity var(--tp-fast) var(--tp-ease);
}

.tp-card:hover {
  border-color: var(--tp-gray-400);
}

.tp-card:hover::before,
.tp-card:focus-within::before {
  opacity: 1;
}

.tp-card__icon {
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--tp-space-5);
  color: var(--tp-gray-500);
  transition: color var(--tp-fast) var(--tp-ease);
}

.tp-card:hover .tp-card__icon {
  color: var(--tp-green);
}

.tp-card__title {
  margin-bottom: var(--tp-space-3);
  font-size: var(--tp-h4);
  font-weight: 600;
}

.tp-card__body {
  margin-bottom: var(--tp-space-5);
  color: var(--tp-text-secondary);
  font-size: var(--tp-body-sm);
  line-height: 1.6;
}

.tp-card__points {
  margin: 0 0 var(--tp-space-6);
  padding: 0;
  list-style: none;
}

.tp-card__points li {
  position: relative;
  margin: 0 0 var(--tp-space-2);
  padding-left: var(--tp-space-5);
  color: var(--tp-text-muted);
  font-size: var(--tp-caption);
}

.tp-card__points li::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--tp-green);
}

.tp-card__foot {
  margin-top: auto;
}

.tp-card--urgent {
  border-color: var(--tp-gray-400);
}

/* --------------------------------------------------------------------------
   Feature panel
   -------------------------------------------------------------------------- */
.tp-feature {
  padding: clamp(var(--tp-space-8), 4vw, var(--tp-space-16));
  background: var(--tp-surface-inverse);
  color: var(--tp-text-inverse);
  border-radius: var(--tp-radius-lg);
}

.tp-feature h2,
.tp-feature h3 {
  color: #fff;
}

.tp-feature__lead {
  color: rgb(255 255 255 / 0.86);
  font-size: var(--tp-lead);
  line-height: 1.55;
}

.tp-feature__list {
  margin: var(--tp-space-8) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--tp-space-4);
}

.tp-feature__list li {
  position: relative;
  margin: 0;
  padding-left: var(--tp-space-6);
  color: rgb(255 255 255 / 0.86);
}

.tp-feature__list li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 9px;
  height: 2px;
  background: var(--tp-green-400);
}

/* --------------------------------------------------------------------------
   Pill list — markets, manufacturers, tower types
   -------------------------------------------------------------------------- */
.tp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tp-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tp-pills li {
  margin: 0;
}

.tp-pill {
  display: inline-block;
  padding: var(--tp-space-2) var(--tp-space-4);
  background: var(--tp-surface);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-sm);
  color: var(--tp-text-secondary);
  font-size: var(--tp-body-sm);
}

.tp-section--alt .tp-pill {
  background: var(--tp-surface);
}

/* --------------------------------------------------------------------------
   Figures and images
   -------------------------------------------------------------------------- */
.tp-picture {
  display: block;
}

.tp-figure {
  margin: 0;
}

.tp-figure__caption {
  margin-top: var(--tp-space-3);
  color: var(--tp-text-muted);
  font-size: var(--tp-caption);
  line-height: 1.5;
}

.tp-media {
  overflow: hidden;
  border-radius: var(--tp-radius-md);
  background: var(--tp-surface-sunken);
}

.tp-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tp-media iframe,
.tp-media video {
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.tp-media--16x9 {
  aspect-ratio: 16 / 9;
}

.tp-media--4x3 {
  aspect-ratio: 4 / 3;
}

.tp-media--3x2 {
  aspect-ratio: 3 / 2;
}

.tp-media--21x9 {
  aspect-ratio: 21 / 9;
}

/* A slight inward batter on one edge, referencing the tower silhouette. */
.tp-media--battered {
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.8vw) 100%, 0 100%);
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   Video — click-to-play facade. The YouTube iframe is injected by site.js
   after a click so a visit that never presses play never contacts YouTube.
   -------------------------------------------------------------------------- */
.tp-video {
  margin: 0;
}

.tp-video figcaption {
  margin-top: var(--tp-space-4);
}

.tp-video__title {
  margin: 0 0 var(--tp-space-2);
  font-size: var(--tp-h4);
  font-weight: 600;
}

.tp-video__body {
  margin: 0;
  color: var(--tp-text-secondary);
  font-size: var(--tp-body-sm);
  line-height: 1.6;
}

.tp-video__meta {
  margin: var(--tp-space-2) 0 0;
  color: var(--tp-text-muted);
  font-size: var(--tp-caption);
}

.tp-video__facade {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  background: var(--tp-surface-sunken);
}

.tp-video__facade img,
.tp-video__poster-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tp-video__poster-fallback {
  display: block;
  background: var(--tp-gray-800);
}

.tp-video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.tp-video__play-icon {
  width: 3.5rem;
  height: 3.5rem;
  padding: 0.9rem 0.8rem 0.9rem 1.05rem;
  border-radius: 50%;
  background: var(--tp-action);
  color: #fff;
  fill: currentColor;
  box-shadow: 0 0.4rem 1.25rem rgb(0 0 0 / 0.3);
  transition: background-color var(--tp-fast) var(--tp-ease);
}

.tp-video__facade:hover .tp-video__play-icon,
.tp-video__facade:focus-visible .tp-video__play-icon {
  background: var(--tp-action-hover);
}

.tp-video__native {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* Dev-only marker so a missing derivative cannot ship unnoticed. */
.tp-img-missing {
  display: grid;
  place-content: center;
  gap: var(--tp-space-2);
  min-height: 14rem;
  padding: var(--tp-space-6);
  background: repeating-linear-gradient(
    45deg,
    var(--tp-gray-100),
    var(--tp-gray-100) 10px,
    var(--tp-gray-50) 10px,
    var(--tp-gray-50) 20px
  );
  border: 1px dashed var(--tp-gray-400);
  border-radius: var(--tp-radius-md);
  color: var(--tp-text-muted);
  font-size: var(--tp-caption);
  text-align: center;
}

.tp-img-missing span {
  font-family: var(--tp-font-heading);
  font-weight: 700;
  letter-spacing: var(--tp-track-eyebrow);
  text-transform: uppercase;
  color: var(--tp-warning);
}

/* --------------------------------------------------------------------------
   Page header (interior pages)
   -------------------------------------------------------------------------- */
.tp-pagehead {
  padding-block: clamp(var(--tp-space-12), 6vw, var(--tp-space-24))
    clamp(var(--tp-space-10), 4vw, var(--tp-space-16));
  border-bottom: 1px solid var(--tp-border);
  background: var(--tp-surface-alt);
}

.tp-pagehead__title {
  max-width: 34rem;
  margin-bottom: 0;
}

.tp-pagehead__lead {
  max-width: var(--tp-measure);
  margin-top: var(--tp-space-6);
  color: var(--tp-text-secondary);
  font-size: var(--tp-lead);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */
.tp-breadcrumbs {
  margin-bottom: var(--tp-space-6);
}

.tp-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tp-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--tp-caption);
}

.tp-breadcrumbs__list li {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--tp-space-2);
  color: var(--tp-text-muted);
}

.tp-breadcrumbs__list li + li::before {
  content: "/";
  color: var(--tp-gray-400);
}

.tp-breadcrumbs a {
  color: var(--tp-text-muted);
  text-decoration: none;
}

.tp-breadcrumbs a:hover {
  color: var(--tp-text-link);
  text-decoration: underline;
}

.tp-breadcrumbs [aria-current="page"] {
  color: var(--tp-text-secondary);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Prose — long-form body content
   -------------------------------------------------------------------------- */
.tp-prose {
  max-width: var(--tp-measure);
}

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

.tp-prose h2 {
  margin-top: var(--tp-space-12);
  margin-bottom: var(--tp-space-4);
}

.tp-prose h3 {
  margin-top: var(--tp-space-10);
  margin-bottom: var(--tp-space-3);
}

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

.tp-prose ul,
.tp-prose ol {
  padding-left: var(--tp-space-6);
}

.tp-prose li {
  margin-bottom: var(--tp-space-2);
}

.tp-prose strong {
  font-weight: 600;
  color: var(--tp-text);
}

/* On a dark surface the rule above is charcoal on charcoal — 1:1, invisible.
   It cost every bold lead-in on the emergency-service and capabilities pages. */
.tp-section--inverse .tp-prose strong,
.tp-feature .tp-prose strong {
  color: var(--tp-text-inverse);
}

.tp-prose__lead {
  color: var(--tp-text-secondary);
  font-size: var(--tp-lead);
  line-height: 1.55;
}

/* Pull-quote / callout. Green as a left rule, not as an area. */
.tp-callout {
  padding: var(--tp-space-6) var(--tp-space-8);
  background: var(--tp-green-50);
  border-left: 3px solid var(--tp-green);
  border-radius: 0 var(--tp-radius-md) var(--tp-radius-md) 0;
}

.tp-callout__label {
  display: block;
  margin-bottom: var(--tp-space-2);
  color: var(--tp-green-800);
  font-family: var(--tp-font-heading);
  font-size: var(--tp-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tp-track-eyebrow);
  text-transform: uppercase;
}

.tp-callout p {
  color: var(--tp-gray-800);
}

/* --------------------------------------------------------------------------
   Technical tables — where credibility is won with a specifying engineer
   -------------------------------------------------------------------------- */
.tp-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-md);
}

.tp-table {
  min-width: 34rem;
  font-size: var(--tp-body-sm);
}

.tp-table th,
.tp-table td {
  padding: var(--tp-space-4) var(--tp-space-5);
  text-align: left;
  border-bottom: 1px solid var(--tp-border);
}

.tp-table thead th {
  background: var(--tp-surface-sunken);
  color: var(--tp-text-secondary);
  font-family: var(--tp-font-heading);
  font-size: var(--tp-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tp-track-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
}

.tp-table tbody tr:nth-child(even) {
  background: var(--tp-surface-alt);
}

/* Only the very last row loses its rule, so the table stops on the wrapper's
   border rather than doubling it. Both cells, because a row led by a
   `th[scope=row]` would otherwise keep a rule under its first column. */
.tp-table tbody:last-of-type tr:last-child > * {
  border-bottom: 0;
}

/* --- Grouped tables -------------------------------------------------------
   Where a subject splits into groups — makes still in production and makes
   that are not — each group is its own table under its own heading, so the
   column headers sit beneath the description of the group they describe.

   The heading is a sibling of .tp-table-wrap rather than a <caption>, because
   the table scrolls sideways on a narrow screen and a caption is as wide as
   the table it belongs to; the description would have to be scrolled to be
   read. Styling the two as one card keeps them looking joined. */
.tp-table-group__head {
  padding: var(--tp-space-5);
  background: var(--tp-surface-sunken);
  border: 1px solid var(--tp-border);
  border-bottom: 0;
  border-radius: var(--tp-radius-md) var(--tp-radius-md) 0 0;
}

.tp-table-group > .tp-table-wrap {
  border-radius: 0 0 var(--tp-radius-md) var(--tp-radius-md);
}

.tp-table-group__label {
  margin: 0;
  font-family: var(--tp-font-heading);
  font-size: var(--tp-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tp-track-eyebrow);
  text-transform: uppercase;
  color: var(--tp-text-link);
}

.tp-table-group__lead {
  max-width: 70ch;
  margin: var(--tp-space-2) 0 0;
  font-size: var(--tp-body-sm);
  color: var(--tp-text-secondary);
}

/* Consecutive tables read as one sequence, so they need more space between
   them than a paragraph gap. */
.tp-table-stack > * + * {
  margin-top: var(--tp-space-8);
}

/* The manufacturer column holds two-part names ("Marley · SPX Cooling
   Technologies") that auto layout squeezes into four lines while the notes
   column has width to spare. */
.tp-col--oem-name   { width: 23%; }
.tp-col--oem-models { width: 30%; }
.tp-col--oem-note   { width: 47%; }

.tp-table td[data-numeric],
.tp-table th[data-numeric] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.tp-field {
  margin-bottom: var(--tp-space-6);
}

.tp-label {
  display: block;
  margin-bottom: var(--tp-space-2);
  font-family: var(--tp-font-heading);
  font-size: var(--tp-body-sm);
  font-weight: 600;
}

.tp-label__optional {
  color: var(--tp-text-muted);
  font-weight: 400;
}

.tp-required {
  color: var(--tp-danger);
}

.tp-input,
.tp-textarea,
.tp-select {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--tp-space-3) var(--tp-space-4);
  background: var(--tp-surface);
  border: 1px solid var(--tp-border-strong);
  border-radius: var(--tp-radius-sm);
  font-size: var(--tp-body);
  transition:
    border-color var(--tp-fast) var(--tp-ease),
    box-shadow var(--tp-fast) var(--tp-ease);
}

.tp-textarea {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.6;
}

.tp-input:focus,
.tp-textarea:focus,
.tp-select:focus {
  outline: none;
  border-color: var(--tp-green);
  box-shadow: 0 0 0 3px var(--tp-green-100);
}

.tp-input--file {
  padding: var(--tp-space-2) var(--tp-space-3);
  line-height: 1.4;
}

.tp-input[aria-invalid="true"],
.tp-textarea[aria-invalid="true"] {
  border-color: var(--tp-danger);
}

.tp-hint {
  margin-top: var(--tp-space-2);
  color: var(--tp-text-muted);
  font-size: var(--tp-caption);
}

/* Errors are always carried by text, never by colour alone. */
.tp-error {
  display: flex;
  align-items: flex-start;
  gap: var(--tp-space-2);
  margin-top: var(--tp-space-2);
  color: var(--tp-danger);
  font-size: var(--tp-caption);
  font-weight: 500;
}

.tp-checkgroup {
  display: grid;
  gap: var(--tp-space-3);
  margin: 0;
  padding: 0;
  border: 0;
}

@media (min-width: 40rem) {
  .tp-checkgroup--2col {
    grid-template-columns: 1fr 1fr;
  }
}

.tp-checkgroup__legend {
  margin-bottom: var(--tp-space-4);
  padding: 0;
  font-family: var(--tp-font-heading);
  font-size: var(--tp-body-sm);
  font-weight: 600;
}

.tp-check {
  display: flex;
  align-items: flex-start;
  gap: var(--tp-space-3);
  min-height: 2.75rem;
  padding: var(--tp-space-2) 0;
  cursor: pointer;
}

.tp-check input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.28rem 0 0;
  /* The browser draws a white tick on this fill, so it is the button problem
     again: green-600 to keep the tick at 5:1 instead of 2.84:1. */
  accent-color: var(--tp-green-600);
  flex: none;
}

.tp-check span {
  font-size: var(--tp-body-sm);
  line-height: 1.5;
}

.tp-form-notice {
  padding: var(--tp-space-5) var(--tp-space-6);
  margin-bottom: var(--tp-space-8);
  border-radius: var(--tp-radius-md);
  font-size: var(--tp-body-sm);
}

.tp-form-notice--error {
  background: #fef3f2;
  border-left: 3px solid var(--tp-danger);
  color: #7a271a;
}

.tp-form-notice--success {
  background: var(--tp-green-50);
  border-left: 3px solid var(--tp-green);
  color: var(--tp-green-800);
}

/* --------------------------------------------------------------------------
   Contact strip
   -------------------------------------------------------------------------- */
.tp-contact-cta {
  display: grid;
  gap: clamp(var(--tp-space-8), 4vw, var(--tp-space-16));
  align-items: center;
}

@media (min-width: 60rem) {
  .tp-contact-cta {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.tp-contact-detail {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tp-contact-detail > div {
  padding-block: var(--tp-space-4);
  border-top: 1px solid var(--tp-border);
}

.tp-contact-detail > div:first-child {
  border-top: 0;
  padding-top: 0;
}

.tp-contact-detail dt {
  color: var(--tp-text-muted);
  font-family: var(--tp-font-heading);
  font-size: var(--tp-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tp-track-eyebrow);
  text-transform: uppercase;
}

.tp-contact-detail dd {
  margin: var(--tp-space-2) 0 0;
  font-size: var(--tp-body);
}

.tp-contact-detail dd a {
  font-family: var(--tp-font-heading);
  font-weight: 600;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Glossary
   -------------------------------------------------------------------------- */
.tp-glossary-controls {
  padding-bottom: var(--tp-space-8);
  margin-bottom: var(--tp-space-12);
  border-bottom: 1px solid var(--tp-border);
}

.tp-azindex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tp-space-1);
  margin-top: var(--tp-space-5);
}

.tp-azindex__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-sm);
  color: var(--tp-text-link);
  font-family: var(--tp-font-heading);
  font-size: var(--tp-body-sm);
  font-weight: 600;
  text-decoration: none;
}

.tp-azindex__link:hover {
  background: var(--tp-green-50);
  border-color: var(--tp-green-200);
}

.tp-azindex__link.is-empty {
  color: var(--tp-gray-400);
  background: var(--tp-surface-alt);
  pointer-events: none;
}

.tp-glossary__group + .tp-glossary__group {
  margin-top: var(--tp-space-12);
}

.tp-glossary__letter {
  padding-bottom: var(--tp-space-3);
  margin-bottom: var(--tp-space-6);
  border-bottom: 2px solid var(--tp-green);
  color: var(--tp-gray-800);
}

.tp-glossary__list {
  margin: 0;
  display: grid;
  gap: var(--tp-space-6);
}

@media (min-width: 60rem) {
  .tp-glossary__list {
    grid-template-columns: 1fr 1fr;
    gap: var(--tp-space-8) var(--tp-space-12);
  }
}

.tp-glossary__entry {
  scroll-margin-top: calc(var(--tp-header-h) + var(--tp-space-8));
}

.tp-glossary__term {
  margin-bottom: var(--tp-space-2);
  font-family: var(--tp-font-heading);
  font-size: var(--tp-h4);
  font-weight: 600;
}

.tp-glossary__aka {
  display: block;
  margin-top: 2px;
  color: var(--tp-text-muted);
  font-family: var(--tp-font-body);
  font-size: var(--tp-caption);
  font-weight: 400;
}

.tp-glossary__def {
  margin: 0;
  color: var(--tp-text-secondary);
  font-size: var(--tp-body-sm);
  line-height: 1.6;
}

.tp-glossary__see {
  display: block;
  margin-top: var(--tp-space-2);
  color: var(--tp-text-muted);
  font-size: var(--tp-caption);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.tp-footer {
  padding-block: var(--tp-space-20) var(--tp-space-8);
  background: var(--tp-surface-footer);
  color: var(--tp-gray-300);
  font-size: var(--tp-body-sm);
}

.tp-footer__top {
  display: grid;
  gap: var(--tp-space-12);
  padding-bottom: var(--tp-space-16);
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
}

@media (min-width: 60rem) {
  .tp-footer__top {
    grid-template-columns: 1.4fr repeat(3, 1fr);
  }
}

/* Direct children only. Unscoped, this also matched the social icons nested
   inside this block and sized them 4.5rem tall inside a 2.25rem hit area. */
.tp-footer__brand > img,
.tp-footer__brand > svg {
  height: 4.5rem;
  width: auto;
  margin-bottom: var(--tp-space-6);
}

.tp-footer__since {
  display: inline-block;
  margin-bottom: var(--tp-space-5);
  color: var(--tp-gray-400);
  font-family: var(--tp-font-heading);
  font-size: var(--tp-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tp-track-eyebrow);
  text-transform: uppercase;
}

.tp-footer__blurb {
  max-width: 26rem;
  color: var(--tp-gray-400);
  line-height: 1.6;
}

.tp-footer__heading {
  margin-bottom: var(--tp-space-5);
  color: #fff;
  font-family: var(--tp-font-heading);
  font-size: var(--tp-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tp-track-eyebrow);
  text-transform: uppercase;
}

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

.tp-footer__list li {
  margin: 0 0 var(--tp-space-3);
}

/* On a dark ground the lighter tint is the legible one. green-400 on
   gray-950 clears 4.5:1. */
.tp-footer__list a,
.tp-footer a {
  color: var(--tp-green-400);
  text-decoration: none;
}

.tp-footer__list a:hover,
.tp-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.tp-footer__contact {
  margin: 0;
  color: var(--tp-gray-300);
  font-style: normal;
  line-height: 1.7;
}

.tp-footer__phone {
  display: inline-block;
  margin-bottom: var(--tp-space-2);
  color: #fff !important;
  font-family: var(--tp-font-heading);
  font-size: 1.25rem;
  font-weight: 700;
}

.tp-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tp-space-4) var(--tp-space-8);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--tp-space-8);
  color: var(--tp-gray-500);
  font-size: var(--tp-caption);
}

.tp-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tp-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tp-footer__legal li {
  margin: 0;
}

.tp-footer__legal a {
  color: var(--tp-gray-400);
}

/* --------------------------------------------------------------------------
   Emergency banner
   -------------------------------------------------------------------------- */
.tp-emergency-bar {
  background: var(--tp-charcoal);
  color: #fff;
  font-size: var(--tp-body-sm);
}

.tp-emergency-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--tp-space-2) var(--tp-space-4);
  padding-block: var(--tp-space-3);
  text-align: center;
}

.tp-emergency-bar strong {
  font-family: var(--tp-font-heading);
  font-weight: 700;
}

.tp-emergency-bar a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.tp-emergency-bar a:hover {
  color: var(--tp-green-300);
}