@charset "UTF-8";

/* =========================================================
   PHASE 4
   COMPONENT AUDIT + REFINEMENT
   CHUNK 1

   GLOBAL UI
   ANNOUNCEMENT BAR
   SITE HEADER
   LOGO + NAVIGATION
   MOBILE NAVIGATION
   HOMEPAGE HERO
   ROUTE DIVIDER
========================================================= */


/* =========================================================
   01. GLOBAL UI
========================================================= */


/* =========================================================
   SKIP LINK
========================================================= */

.c-skipLink {
  padding:
    var(--skip-link-padding-y)
    var(--skip-link-padding-x);

  background:
    var(--skip-link-bg);

  border:
    var(--stroke-control)
    solid
    var(--skip-link-border);

  border-radius:
    var(--skip-link-radius);

  box-shadow:
    var(--skip-link-shadow);

  color:
    var(--skip-link-text);

  font-family:
    var(--button-font);

  font-size:
    var(--button-size);

  font-weight:
    var(--button-weight);

  line-height:
    var(--button-leading);

  letter-spacing:
    var(--button-tracking);

  text-decoration:
    var(--decoration-none);

  text-transform:
    var(--button-transform);

  opacity:
    var(--state-hidden-opacity);

  pointer-events:
    none;

  transform:
    translateY(
      calc(
        -100% -
        var(--skip-link-offset)
      )
    );

  transition:
    var(--transition-interactive);
}

.c-skipLink:focus,
.c-skipLink:focus-visible {
  box-shadow:
    var(--focus-ring),
    var(--skip-link-shadow);

  opacity:
    var(--motion-opacity-visible);

  pointer-events:
    auto;

  transform:
    translateY(
      var(--motion-distance-none)
    );
}


/* =========================================================
   BUTTON FOUNDATION
========================================================= */

.c-button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    var(--space-button-gap);

  min-height:
    var(--size-button-h);

  padding:
    var(--space-button-y)
    var(--space-button-x);

  background:
    var(--button-secondary-bg);

  border:
    var(--stroke-control)
    solid
    var(--button-secondary-border);

  border-radius:
    var(--button-radius);

  box-shadow:
    var(--button-secondary-shadow);

  color:
    var(--button-secondary-text);

  font-family:
    var(--button-font);

  font-size:
    var(--button-size);

  font-weight:
    var(--button-weight);

  line-height:
    var(--button-leading);

  letter-spacing:
    var(--button-tracking);

  text-align:
    center;

  text-decoration:
    var(--decoration-none);

  text-transform:
    var(--button-transform);

  cursor:
    var(--cursor-pointer);

  touch-action:
    var(--touch-action-manipulation);

  user-select:
    var(--user-select-none);

  transition:
    var(--button-transition);
}

.c-button:hover {
  transform:
    translateY(
      var(--state-hover-translate-y)
    );
}

.c-button:active {
  transform:
    translateY(
      var(--state-active-translate-y)
    )
    scale(
      var(--state-active-scale)
    );
}

.c-button:focus-visible {
  outline:
    none;

  box-shadow:
    var(--focus-ring),
    var(--button-secondary-shadow);
}

.c-button:disabled,
.c-button[aria-disabled="true"] {
  cursor:
    var(--cursor-disabled);

  opacity:
    var(--state-disabled-opacity);

  pointer-events:
    none;

  transform:
    none;
}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.c-button--primary {
  background:
    var(--button-primary-bg);

  border-color:
    var(--button-primary-border);

  box-shadow:
    var(--button-primary-shadow);

  color:
    var(--button-primary-text);
}

.c-button--primary:hover {
  background:
    var(--button-primary-bg-hover);

  border-color:
    var(--button-primary-border-hover);

  box-shadow:
    var(--button-primary-shadow-hover);

  color:
    var(--button-primary-text-hover);
}

.c-button--primary:active {
  background:
    var(--button-primary-bg-active);

  border-color:
    var(--button-primary-border-active);

  box-shadow:
    var(--button-primary-shadow-active);
}

.c-button--primary:focus-visible {
  box-shadow:
    var(--focus-ring),
    var(--button-primary-shadow);
}

.c-button--primary:disabled,
.c-button--primary[aria-disabled="true"] {
  background:
    var(--button-primary-bg-disabled);

  border-color:
    var(--button-primary-border-disabled);

  box-shadow:
    var(--state-disabled-shadow);

  color:
    var(--button-primary-text-disabled);
}


/* =========================================================
   SECONDARY BUTTON
========================================================= */

.c-button--secondary {
  background:
    var(--button-secondary-bg);

  border-color:
    var(--button-secondary-border);

  box-shadow:
    var(--button-secondary-shadow);

  color:
    var(--button-secondary-text);
}

.c-button--secondary:hover {
  background:
    var(--button-secondary-bg-hover);

  border-color:
    var(--button-secondary-border-hover);

  box-shadow:
    var(--button-secondary-shadow-hover);

  color:
    var(--button-secondary-text-hover);
}

.c-button--secondary:active {
  background:
    var(--button-secondary-bg-active);

  border-color:
    var(--button-secondary-border-active);

  box-shadow:
    var(--button-secondary-shadow-active);
}

.c-button--secondary:focus-visible {
  box-shadow:
    var(--focus-ring),
    var(--button-secondary-shadow);
}

.c-button--secondary:disabled,
.c-button--secondary[aria-disabled="true"] {
  background:
    var(--button-secondary-bg-disabled);

  border-color:
    var(--button-secondary-border-disabled);

  box-shadow:
    var(--state-disabled-shadow);

  color:
    var(--button-secondary-text-disabled);
}


/* =========================================================
   02. ANNOUNCEMENT BAR + SITE HEADER
========================================================= */


/* =========================================================
   ANNOUNCEMENT BAR
========================================================= */

.c-announcementBar {
  background:
    var(--brand-primary);

  border-bottom:
    var(--stroke-control)
    solid
    var(--border-primary-solid);

  box-shadow:
    var(--glow-primary-sm);

  color:
    var(--fg-inverse-primary);

  overflow:
    hidden;
}

.c-announcementBar__message {
  margin:
    var(--inset-0);

  padding-block:
    var(--space-1);

  color:
    inherit;

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--weight-bold);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-align:
    center;

  text-transform:
    var(--type-meta-transform);

  text-wrap:
    balance;
}

/* =========================================================
   SITE HEADER
========================================================= */

.c-siteHeader {
  background:
    var(--surface-glass-strong-bg);

  border-bottom:
    var(--stroke-control)
    solid
    var(--surface-glass-strong-border);

  box-shadow:
    var(--elevation-sticky);

  backdrop-filter:
    blur(
      var(--glass-strong-blur)
    );

  transition:
    var(--transition-surface);
}

.c-siteHeader__shell {
  background:
    inherit;
}


/* =========================================================
   HEADER STATES
========================================================= */

.c-siteHeader.is-solid {
  background:
    var(--surface-level-0-bg);

  border-bottom-color:
    var(--border-default);

  box-shadow:
    var(--elevation-sticky);

  backdrop-filter:
    blur(
      var(--blur-none)
    );
}

.c-siteHeader.is-transparent {
  background:
    var(--background-transparent);

  border-bottom-color:
    transparent;

  box-shadow:
    var(--elevation-flat);

  backdrop-filter:
    blur(
      var(--blur-none)
    );
}

.c-siteHeader.is-scrolled {
  background:
    var(--surface-glass-strong-bg);

  border-bottom-color:
    var(--border-emphasis);

  box-shadow:
    var(--elevation-sticky);

  backdrop-filter:
    blur(
      var(--glass-strong-blur)
    );
}


/* =========================================================
   HEADER DIVIDER
========================================================= */

.c-siteHeader__shell::after {
  content:
    "";

  display:
    block;

  width:
    var(--content-full);

  height:
    var(--divider-size-thin);

  background:
    var(--divider-primary);

  opacity:
    var(--a-52);
}


/* =========================================================
   03. LOGO + PRIMARY NAVIGATION
========================================================= */


/* =========================================================
   LOGO SYSTEM
========================================================= */

.c-logo {
  color:
    var(--fg-primary);

  transition:
    var(--transition-interactive);
}

.c-logo__link {
  display:
    flex;

  align-items:
    center;

  width:
    var(--content-full);

  color:
    inherit;

  text-decoration:
    var(--decoration-none);

  cursor:
    var(--cursor-pointer);

  touch-action:
    var(--touch-action-manipulation);
}

.c-logo__link:focus-visible {
  border-radius:
    var(--radius-control);

  outline:
    none;

  box-shadow:
    var(--focus-ring);
}
.c-logo__media {
  display:
    block;

  width:
    var(--content-full);

  background:
    var(--logo-media-bg);

  border:
    var(--stroke-0)
    solid
    var(--logo-media-border);

  box-shadow:
    var(--logo-media-shadow);

  overflow:
    hidden;
}
.c-logo__image {
  display:
    block;

  width:
    var(--content-full);

  height:
    auto;

  object-fit:
    var(--logo-media-fit);

  object-position:
    var(--logo-media-position);

  filter:
    var(--logo-media-filter);

  transform:
    scale(
      var(--scale-none)
    );

  transition:
    var(--media-transition-complete);
}

.c-logo__link:hover
.c-logo__image {
  transform:
    scale(
      var(--scale-up-xs)
    );
}

.c-logo__link:active
.c-logo__image {
  transform:
    scale(
      var(--motion-scale-active)
    );
}

.c-logo--header {
  width:
    var(--media-size-md);

  max-width:
    var(--content-full);

  opacity:
    var(--state-default-opacity);
}

.c-logo--footer {
  opacity:
    var(--state-default-opacity);
}

.c-logo--regular {
  background:
    var(--background-transparent);
}

.c-logo__image--regular {
  opacity:
    var(--motion-opacity-visible);
}

.c-logo__image--light {
  color:
    var(--fg-primary);
}


/* =========================================================
   LOGO STATES
========================================================= */

.c-logo.is-logo-ready {
  opacity:
    var(--motion-opacity-visible);
}

.c-logo.is-logo-light {
  color:
    var(--fg-primary);
}

.c-logo.is-logo-regular {
  background:
    var(--background-transparent);
}


/* =========================================================
   PRIMARY NAVIGATION
========================================================= */

.c-primaryNav {
  color:
    var(--fg-secondary);
}

.c-primaryNav__list {
  list-style:
    none;
}

.c-primaryNav__item {
  color:
    inherit;
}

.c-primaryNav__link {
  position:
    relative;

  color:
    var(--fg-secondary);

  font-family:
    var(--type-nav-font);

font-size:
  var(--text-base);

  font-weight:
    var(--type-nav-weight);

  line-height:
    var(--type-nav-leading);

  letter-spacing:
    var(--type-nav-tracking);

  text-decoration:
    var(--decoration-none);

  text-transform:
    var(--type-nav-transform);

  cursor:
    var(--cursor-pointer);

  touch-action:
    var(--touch-action-manipulation);

  transition:
    var(--transition-interactive);
}


/* =========================================================
   PRIMARY NAVIGATION INDICATOR
========================================================= */

.c-primaryNav__link::after {
  content:
    "";

  position:
    absolute;

  inset-inline:
    var(--inset-0);

  inset-block-end:
    calc(
      var(--space-2) * -1
    );

  height:
    var(--rail-size-md);

  background:
    var(--rail-primary);

  border-radius:
    var(--radius-pill);

  box-shadow:
    var(--glow-primary-sm);

  opacity:
    var(--state-hidden-opacity);

  transform:
    scaleX(
      var(--scale-down-md)
    );

  transform-origin:
    var(--motion-origin-center);

  transition:
    var(--transition-interactive);
}


/* =========================================================
   PRIMARY NAVIGATION STATES
========================================================= */

.c-primaryNav__link:hover {
  color:
    var(--fg-primary);
}

.c-primaryNav__link:hover::after {
  opacity:
    var(--state-hover-opacity);

  transform:
    scaleX(
      var(--scale-none)
    );
}

.c-primaryNav__link:active {
  color:
    var(--state-active-text);

  transform:
    scale(
      var(--state-active-scale)
    );
}

.c-primaryNav__link:focus-visible {
  border-radius:
    var(--radius-control-sm);

  color:
    var(--state-focus-text);

  outline:
    none;

  box-shadow:
    var(--focus-ring);
}

.c-primaryNav__link.is-current {
  color:
    var(--fg-brand-primary);
}

.c-primaryNav__link.is-current::after {
  opacity:
    var(--state-selected-opacity);

  transform:
    scaleX(
      var(--scale-none)
    );
}


/* =========================================================
   HEADER CTA
========================================================= */
.c-siteHeader__cta {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    var(--interaction-target-comfortable);

  padding:
    var(--space-button-y)
    var(--space-button-x);

  background:
    var(--button-primary-bg);

  border:
    var(--stroke-control)
    solid
    var(--button-primary-border);

  border-radius:
    var(--button-radius);

  box-shadow:
    var(--button-primary-shadow);

  color:
    var(--button-primary-text);

  font-family:
    var(--button-font);

  font-size:
    var(--button-size);

  font-weight:
    var(--button-weight);

  line-height:
    var(--button-leading);

  letter-spacing:
    var(--button-tracking);

  text-align:
    center;

  text-decoration:
    var(--decoration-none);

  text-transform:
    var(--button-transform);

  white-space:
    nowrap;

  cursor:
    var(--cursor-pointer);

  touch-action:
    var(--touch-action-manipulation);

  user-select:
    var(--user-select-none);

  overflow:
    hidden;

  isolation:
    isolate;

  transition:
    var(--button-transition);
}

.c-siteHeader__cta:hover {
  background:
    var(--button-primary-bg-hover);

  border-color:
    var(--button-primary-border-hover);

  box-shadow:
    var(--button-primary-shadow-hover);

  color:
    var(--button-primary-text-hover);

  transform:
    translateY(
      var(--state-hover-translate-y)
    );
}

.c-siteHeader__cta:active {
  background:
    var(--button-primary-bg-active);

  border-color:
    var(--button-primary-border-active);

  box-shadow:
    var(--button-primary-shadow-active);

  transform:
    translateY(
      var(--state-active-translate-y)
    )
    scale(
      var(--state-active-scale)
    );
}

.c-siteHeader__cta:focus-visible {
  outline:
    none;

  box-shadow:
    var(--focus-ring),
    var(--button-primary-shadow);
}


/* =========================================================
   04. MOBILE NAVIGATION
========================================================= */


/* =========================================================
   MOBILE NAVIGATION TOGGLE
========================================================= */

.c-siteHeader__mobileToggle {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    var(--icon-button-size);

  min-width:
    var(--interaction-target-min);

  height:
    var(--icon-button-size);

  min-height:
    var(--interaction-target-min);

  padding:
    var(--icon-button-padding);

  background:
    var(--surface-card-bg);

  border:
    var(--stroke-control)
    solid
    var(--border-default);

  border-radius:
    var(--icon-button-radius);

  box-shadow:
    var(--elevation-low);

  color:
    var(--fg-secondary);

  cursor:
    var(--cursor-pointer);

  touch-action:
    var(--touch-action-manipulation);

  user-select:
    var(--user-select-none);

  transition:
    var(--transition-interactive);
}

.c-siteHeader__mobileToggle:hover {
  background:
    var(--surface-card-raised-bg);

  border-color:
    var(--border-emphasis);

  box-shadow:
    var(--elevation-default);

  color:
    var(--fg-primary);
}

.c-siteHeader__mobileToggle:active {
  background:
    var(--surface-interactive-bg-active);

  box-shadow:
    var(--shadow-contact-xs);

  transform:
    scale(
      var(--state-active-scale)
    );
}

.c-siteHeader__mobileToggle:focus-visible {
  outline:
    none;

  box-shadow:
    var(--focus-ring),
    var(--elevation-low);
}


/* =========================================================
   MOBILE TOGGLE ICON
========================================================= */

.c-siteHeader__toggleIcon {
  position:
    relative;

  display:
    block;

  width:
    var(--button-icon-size);

  height:
    var(--stroke-2);

  background:
    currentColor;

  border-radius:
    var(--radius-pill);

  transition:
    var(--transition-interactive);
}

.c-siteHeader__toggleIcon::before,
.c-siteHeader__toggleIcon::after {
  content:
    "";

  position:
    absolute;

  inset-inline-start:
    var(--inset-0);

  width:
    var(--content-full);

  height:
    var(--stroke-2);

  background:
    currentColor;

  border-radius:
    var(--radius-pill);

  transition:
    var(--transition-interactive);
}

.c-siteHeader__toggleIcon::before {
  transform:
    translateY(
      calc(
        var(--space-2) * -1
      )
    );
}

.c-siteHeader__toggleIcon::after {
  transform:
    translateY(
      var(--space-2)
    );
}

.c-siteHeader__mobileToggle[aria-expanded="true"]
.c-siteHeader__toggleIcon {
  background:
    transparent;
}

.c-siteHeader__mobileToggle[aria-expanded="true"]
.c-siteHeader__toggleIcon::before {
  transform:
    rotate(
      calc(
        var(--rotate-quarter) / 2
      )
    );
}

.c-siteHeader__mobileToggle[aria-expanded="true"]
.c-siteHeader__toggleIcon::after {
  transform:
    rotate(
      calc(
        var(--rotate-quarter) / -2
      )
    );
}


/* =========================================================
   MOBILE NAVIGATION ROOT
========================================================= */

.c-mobileNav {
  visibility:
    hidden;

  opacity:
    var(--state-hidden-opacity);

  pointer-events:
    none;

  transition:
    var(--transition-visibility);
}

.c-mobileNav[aria-hidden="false"] {
  visibility:
    visible;

  opacity:
    var(--motion-opacity-visible);

  pointer-events:
    auto;
}


/* =========================================================
   MOBILE NAVIGATION BACKDROP
========================================================= */

.c-mobileNav__backdrop {
  position:
    absolute;

  inset:
    var(--inset-0);

  width:
    var(--content-full);

  height:
    var(--content-full);

  padding:
    var(--inset-0);

  background:
    var(--overlay-drawer-bg);

  border:
    var(--stroke-0)
    solid
    transparent;

  opacity:
    var(--mobile-nav-exit-opacity);

  cursor:
    var(--cursor-pointer);

  backdrop-filter:
    blur(
      var(--mobile-nav-blur)
    );

  transition:
    opacity
    var(--mobile-nav-exit-duration)
    var(--mobile-nav-exit-ease);
}

.c-mobileNav[aria-hidden="false"]
.c-mobileNav__backdrop {
  opacity:
    var(--motion-opacity-visible);

  transition-duration:
    var(--mobile-nav-enter-duration);

  transition-timing-function:
    var(--mobile-nav-enter-ease);
}


/* =========================================================
   MOBILE NAVIGATION PANEL
========================================================= */

.c-mobileNav__panel {
  background:
    var(--mobile-nav-bg);

  border-inline-start:
    var(--stroke-control)
    solid
    var(--mobile-nav-border);

  box-shadow:
    var(--mobile-nav-shadow);

  color:
    var(--fg-primary);

  opacity:
    var(--mobile-nav-exit-opacity);

  transform:
    translateX(
      var(--mobile-nav-exit-distance)
    );

  transition:
    transform
    var(--mobile-nav-exit-duration)
    var(--mobile-nav-exit-ease),
    opacity
    var(--mobile-nav-exit-duration)
    var(--mobile-nav-exit-ease);
}

.c-mobileNav[aria-hidden="false"]
.c-mobileNav__panel {
  opacity:
    var(--motion-opacity-visible);

  transform:
    translateX(
      var(--motion-distance-none)
    );

  transition-duration:
    var(--mobile-nav-enter-duration);

  transition-timing-function:
    var(--mobile-nav-enter-ease);
}

.c-mobileNav__panel:focus-visible {
  outline:
    none;

  box-shadow:
    var(--focus-ring),
    var(--mobile-nav-shadow);
}


/* =========================================================
   MOBILE NAVIGATION HEADER
========================================================= */

.c-mobileNav__header {
  background:
    var(--surface-level-1-bg);

  border-bottom:
    var(--divider-size-thin)
    solid
    var(--divider-default);

  box-shadow:
    var(--surface-level-1-highlight);
}

.c-mobileNav__title {
  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-card-font);

  font-size:
    var(--type-heading-card-size);

  font-weight:
    var(--type-heading-card-weight);

  line-height:
    var(--type-heading-card-leading);

  letter-spacing:
    var(--type-heading-card-tracking);

  text-transform:
    var(--type-heading-card-transform);
}


/* =========================================================
   MOBILE NAVIGATION CLOSE
========================================================= */

.c-mobileNav__close {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    var(--icon-button-size);

  min-width:
    var(--interaction-target-min);

  height:
    var(--icon-button-size);

  min-height:
    var(--interaction-target-min);

  padding:
    var(--icon-button-padding);

  background:
    var(--icon-button-bg);

  border:
    var(--stroke-control)
    solid
    var(--icon-button-border);

  border-radius:
    var(--icon-button-radius);

  color:
    var(--icon-button-icon);

  font-family:
    var(--button-font);

  font-size:
    var(--text-xl);

  font-weight:
    var(--button-weight);

  line-height:
    var(--lh-none);

  cursor:
    var(--cursor-pointer);

  touch-action:
    var(--touch-action-manipulation);

  user-select:
    var(--user-select-none);

  transition:
    var(--transition-interactive);
}

.c-mobileNav__close:hover {
  background:
    var(--icon-button-bg-hover);

  border-color:
    var(--icon-button-border-hover);

  color:
    var(--icon-button-icon-hover);

  transform:
    rotate(
      var(--motion-rotate-quarter)
    );
}

.c-mobileNav__close:active {
  background:
    var(--icon-button-bg-active);

  transform:
    rotate(
      var(--motion-rotate-quarter)
    )
    scale(
      var(--state-active-scale)
    );
}

.c-mobileNav__close:focus-visible {
  outline:
    none;

  box-shadow:
    var(--focus-ring);
}


/* =========================================================
   MOBILE NAVIGATION LIST
========================================================= */

.c-mobileNav__list {
  margin:
    var(--inset-0);

  padding:
    var(--inset-0);

  list-style:
    none;
}

.c-mobileNav__item {
  border-bottom:
    var(--divider-size-thin)
    solid
    var(--mobile-nav-item-border);
}


/* =========================================================
   MOBILE NAVIGATION LINKS
========================================================= */

.c-mobileNav__link {
  display:
    flex;

  align-items:
    center;

  min-height:
    var(--interaction-target-comfortable);

  padding:
    var(--mobile-nav-item-padding-y)
    var(--mobile-nav-item-padding-x);

  background:
    var(--mobile-nav-item-bg);

  border:
    var(--stroke-control)
    solid
    transparent;

  border-radius:
    var(--mobile-nav-item-radius);

  color:
    var(--mobile-nav-item-text);

  font-family:
    var(--type-nav-font);

  font-size:
    var(--type-nav-size);

  font-weight:
    var(--type-nav-weight);

  line-height:
    var(--type-nav-leading);

  letter-spacing:
    var(--type-nav-tracking);

  text-decoration:
    var(--decoration-none);

  text-transform:
    var(--type-nav-transform);

  cursor:
    var(--cursor-pointer);

  touch-action:
    var(--touch-action-manipulation);

  transition:
    var(--transition-interactive);
}

.c-mobileNav__link:hover {
  background:
    var(--mobile-nav-item-bg-hover);

  color:
    var(--mobile-nav-item-text);

  transform:
    translateX(
      var(--motion-distance-xs)
    );
}

.c-mobileNav__link:active {
  background:
    var(--mobile-nav-item-bg-active);

  color:
    var(--mobile-nav-item-text-active);

  transform:
    translateX(
      var(--motion-distance-none)
    )
    scale(
      var(--state-active-scale)
    );
}

.c-mobileNav__link:focus-visible {
  border-color:
    var(--state-focus-border);

  outline:
    none;

  box-shadow:
    var(--focus-ring);
}

.c-mobileNav__link.is-current {
  background:
    var(--mobile-nav-item-bg-active);

  border-color:
    var(--border-primary);

  color:
    var(--mobile-nav-item-text-active);

  box-shadow:
    var(--state-selected-shadow);
}


/* =========================================================
   MOBILE NAVIGATION CTA
========================================================= */

.c-mobileNav__cta {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    var(--size-button-h);

  padding:
    var(--space-button-y)
    var(--space-button-x);

  background:
    var(--button-primary-bg);

  border:
    var(--stroke-control)
    solid
    var(--button-primary-border);

  border-radius:
    var(--button-radius);

  box-shadow:
    var(--button-primary-shadow);

  color:
    var(--button-primary-text);

  font-family:
    var(--button-font);

  font-size:
    var(--button-size);

  font-weight:
    var(--button-weight);

  line-height:
    var(--button-leading);

  letter-spacing:
    var(--button-tracking);

  text-align:
    center;

  text-decoration:
    var(--decoration-none);

  text-transform:
    var(--button-transform);

  cursor:
    var(--cursor-pointer);

  touch-action:
    var(--touch-action-manipulation);

  user-select:
    var(--user-select-none);

  transition:
    var(--button-transition);
}

.c-mobileNav__cta:hover {
  background:
    var(--button-primary-bg-hover);

  border-color:
    var(--button-primary-border-hover);

  box-shadow:
    var(--button-primary-shadow-hover);

  color:
    var(--button-primary-text-hover);

  transform:
    translateY(
      var(--state-hover-translate-y)
    );
}

.c-mobileNav__cta:active {
  background:
    var(--button-primary-bg-active);

  border-color:
    var(--button-primary-border-active);

  box-shadow:
    var(--button-primary-shadow-active);

  transform:
    translateY(
      var(--state-active-translate-y)
    )
    scale(
      var(--state-active-scale)
    );
}

.c-mobileNav__cta:focus-visible {
  outline:
    none;

  box-shadow:
    var(--focus-ring),
    var(--button-primary-shadow);
}


/* =========================================================
   05. HOMEPAGE HERO + ROUTE DIVIDER
========================================================= */


/* =========================================================
   HOMEPAGE HERO ROOT
========================================================= */

.c-homeHero {
  position:
    relative;

  background:
    var(--aura-feature-image),
    var(--background-gradient-dark);

  border-block-end:
    var(--divider-size-thin)
    solid
    var(--divider-default);

  box-shadow:
    var(--surface-section-shadow);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.c-homeHero__content {
  position:
    relative;

  padding:
    var(--space-panel-padding);

  background:
    var(--surface-glass-default-bg);

  border:
    var(--stroke-control)
    solid
    var(--surface-glass-default-border);

  border-radius:
    var(--radius-panel-raised);

  box-shadow:
    var(--surface-glass-default-highlight),
    var(--surface-panel-shadow);

  backdrop-filter:
    blur(
      var(--glass-default-blur)
    );

  overflow:
    hidden;

  isolation:
    isolate;
}


/* =========================================================
   HERO EYEBROW
========================================================= */

.c-homeHero__eyebrow {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-eyebrow-font);

  font-size:
    var(--type-eyebrow-size);

  font-weight:
    var(--type-eyebrow-weight);

  line-height:
    var(--type-eyebrow-leading);

  letter-spacing:
    var(--type-eyebrow-tracking);

  text-transform:
    var(--type-eyebrow-transform);

  text-wrap:
    balance;
}


/* =========================================================
   HERO TITLE
========================================================= */

.c-homeHero__title {
  max-width:
    var(--type-heading-hero-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-hero-font);

  font-size:
    var(--type-heading-hero-size);

  font-weight:
    var(--type-heading-hero-weight);

  line-height:
    var(--type-heading-hero-leading);

  letter-spacing:
    var(--type-heading-hero-tracking);

  text-transform:
    var(--type-heading-hero-transform);

  text-wrap:
    balance;
}


/* =========================================================
   HERO DESCRIPTION
========================================================= */
.c-homeHero__description {
  max-width:
    var(--type-lead-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-lead-font);

  font-size:
    var(--type-lead-size);

  font-weight:
    var(--type-lead-weight);

  line-height:
    var(--type-lead-leading);

  letter-spacing:
    var(--type-lead-tracking);

  text-wrap:
    pretty;
}

/* =========================================================
   HERO ACTIONS
========================================================= */

.c-homeHero__actions {
  color:
    inherit;
}


/* =========================================================
   HERO PRIMARY ACTION
========================================================= */

.c-homeHero__primaryAction {
  min-height:
    var(--size-button-h-lg);

  padding:
    var(--space-button-y-lg)
    var(--space-button-x-lg);

  box-shadow:
    var(--button-primary-shadow-hover);
}


/* =========================================================
   HERO SECONDARY ACTION
========================================================= */

.c-homeHero__secondaryAction {
  min-height:
    var(--size-button-h-lg);

  padding:
    var(--space-button-y-lg)
    var(--space-button-x-lg);
}


/* =========================================================
   HERO MEDIA
========================================================= */

.c-homeHero__media {
  position:
    relative;

  min-width:
    var(--inset-0);

  aspect-ratio:
    var(--hero-media-ratio);

  background:
    var(--surface-level-0-bg);

  border:
    var(--stroke-control)
    solid
    var(--border-emphasis);

  border-radius:
    var(--radius-panel-raised);

  box-shadow:
    var(--feature-media-shadow);

  overflow:
    hidden;

  isolation:
    isolate;
}

/* =========================================================
   HERO PICTURE
========================================================= */
.c-homeHero__picture {
  display:
    block;

  width:
    var(--content-full);

  height:
    var(--content-full);

  overflow:
    hidden;
}
/* =========================================================
   HERO IMAGE
========================================================= */

.c-homeHero__image {
  display:
    block;

  width:
    var(--content-full);

  height:
    var(--content-full);

  object-fit:
    var(--hero-media-fit);

  object-position:
    var(--hero-media-position);

  filter:
    var(--hero-media-filter);

  transform:
    scale(
      var(--scale-none)
    );

  transition:
    var(--media-transition-complete);
}

.c-homeHero__media:hover
.c-homeHero__image {
  transform:
    scale(
      var(--media-scale-hover)
    );
}


/* =========================================================
   HERO MEDIA OVERLAY
========================================================= */

.c-homeHero__mediaOverlay {
  position:
    absolute;

  inset:
    var(--inset-0);

  background:
    var(--hero-media-gradient),
    var(--hero-media-overlay);

  pointer-events:
    none;
}



/* =========================================================
   ROUTE DIVIDER ROOT
========================================================= */

.c-routeDivider {
  position:
    relative;

  width:
    var(--content-full);

  padding-block:
    var(--space-2);

  background:
    var(--surface-level-0-bg);

  border-block:
    var(--divider-size-thin)
    solid
    var(--divider-default);

  box-shadow:
    var(--surface-level-1-highlight);

  color:
    var(--fg-tertiary);

  overflow:
    hidden;
}


/* =========================================================
   ROUTE DIVIDER INNER
========================================================= */

.c-routeDivider__inner {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    var(--content-full);

  min-width:
    var(--inset-0);

  gap:
    var(--space-inline-gap-sm);
}


/* =========================================================
   ROUTE DIVIDER RULE
========================================================= */

.c-routeDivider__rule {
  display:
    block;

  flex:
    var(--flex-auto);

  min-width:
    var(--space-4);

  height:
    var(--divider-size-thin);

  background:
    var(--divider-primary);

  border-radius:
    var(--radius-pill);

  box-shadow:
    var(--glow-primary-sm);

  opacity:
    var(--a-52);
}


/* =========================================================
   ROUTE DIVIDER LOCATIONS
========================================================= */

.c-routeDivider__locations {
  display:
    grid;

  grid-template-columns:
    minmax(var(--inset-0), 1fr)
    auto
    minmax(var(--inset-0), 1fr);

  align-items:
    center;

  width:
    var(--content-full);

  min-width:
    var(--inset-0);

  gap:
    var(--space-inline-gap);
}


/* =========================================================
   ROUTE DIVIDER LOCATION
========================================================= */

.c-routeDivider__location {
  flex:
    var(--flex-fixed);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-label-font);

  font-size:
    var(--type-label-size);

  font-weight:
    var(--type-label-weight);

  line-height:
    var(--type-label-leading);

  letter-spacing:
    var(--type-label-tracking);

  text-align:
    center;

  text-transform:
    var(--type-label-transform);

  white-space:
    nowrap;
}


/* =========================================================
   ROUTE DIVIDER NODE
========================================================= */

.c-routeDivider__separator {
  display:
    block;

  flex:
    var(--flex-fixed);

  width:
    var(--space-2);

  height:
    var(--space-2);

  background:
    var(--divider-primary);

  border-radius:
    var(--radius-round);

  box-shadow:
    var(--glow-primary-sm);

  color:
    transparent;

  opacity:
    var(--motion-opacity-visible);

  overflow:
    hidden;

  text-shadow:
    none;
}


/* =========================================================
   ROUTE DIVIDER MOBILE CONTENT
========================================================= */

.c-routeDivider__mobileLocation {
  display:
    none;

  align-items:
    center;

  justify-content:
    center;

  width:
    var(--content-full);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-label-font);

  font-size:
    var(--type-label-size);

  font-weight:
    var(--type-label-weight);

  line-height:
    var(--type-label-leading);

  letter-spacing:
    var(--type-label-tracking);

  text-align:
    center;

  text-transform:
    var(--type-label-transform);

  white-space:
    nowrap;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 64rem) {

  .c-homeHero__content {
    padding:
      var(--space-card-padding);
  }

  .c-routeDivider__inner,
  .c-routeDivider__locations {
    gap:
      var(--space-2);
  }

  .c-routeDivider__rule {
    min-width:
      var(--space-3);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 48rem) {

  .c-homeHero__content {
    padding:
      var(--space-card-padding-sm);

    border-radius:
      var(--radius-panel);
  }

  .c-homeHero__title {
    font-size:
      var(--type-heading-section-size);
  }

  .c-homeHero__primaryAction,
  .c-homeHero__secondaryAction {
    width:
      var(--content-full);
  }

  .c-homeHero__media {
    border-radius:
      var(--radius-panel);
  }


  /* =======================================================
     MOBILE ROUTE DIVIDER
  ======================================================= */

  .c-routeDivider {
    padding-block:
      var(--space-2);
  }

  .c-routeDivider__inner {
    justify-content:
      center;

    gap:
      var(--inset-0);
  }

  .c-routeDivider__rule,
  .c-routeDivider__locations {
    display:
      none;
  }

  .c-routeDivider__mobileLocation {
    display:
      flex;
  }

  .c-routeDivider__mobileLocation
  .c-partnerDivider__brandLogo {
    max-width:
      var(--media-size-logo-sm);

    max-height:
      var(--media-size-xs);
  }


  /* =======================================================
     MOBILE HEADER LOGO
  ======================================================= */

  .c-logo--header {
    width:
      var(--media-size-logo-sm);
  }

}

/* =========================================================
   GLOBAL APPLICATION VISIBILITY STATES
========================================================= */

.is-hidden {
  display:
    none !important;
}

.is-visible {
  visibility:
    visible;

  opacity:
    var(--motion-opacity-visible);
}

/* =========================================================
   STEVE'S GUESS COMPONENT REBUILD
   CHUNKS 2–6
========================================================= */

.c-homeSteveGuess {
  position:
    relative;

  background-color:
    var(--surface-level-0-bg);

  background-image:
    var(--texture-tool-image),
    var(--background-gradient-brand),
    var(--background-gradient-dark);

  background-size:
    var(--texture-tool-size),
    var(--texture-tool-size),
    var(--background-size-cover),
    var(--background-size-cover);

  background-position:
    var(--texture-tool-position),
    var(--texture-tool-position),
    var(--position-center),
    var(--position-center);

  background-repeat:
    var(--background-repeat-all),
    var(--background-repeat-all),
    var(--background-repeat-none),
    var(--background-repeat-none);

  border-block:
    var(--divider-size-thin)
    solid
    var(--border-primary-subtle);

  box-shadow:
    var(--surface-section-shadow),
    var(--glow-primary-sm);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


/* =========================================================
   STEVE'S GUESS INNER
========================================================= */

.c-homeSteveGuess__inner {
  position:
    relative;

  width:
    var(--content-full);

  min-width:
    var(--inset-0);
}


/* =========================================================
   STEVE VISUAL COLUMN
========================================================= */

.c-homeSteveGuess__visual {
  position:
    relative;

  background:
    var(--background-gradient-accent);

  border:
    var(--stroke-control)
    solid
    var(--border-accent-strong);

  border-radius:
    var(--radius-panel-raised);

  box-shadow:
    var(--surface-card-raised-highlight),
    var(--glow-accent-md),
    var(--elevation-raised);

  overflow:
    hidden;

  isolation:
    isolate;
}


/* =========================================================
   PRICING TOOL COLUMN
========================================================= */

.c-homeSteveGuess__tool {
  position:
    relative;

  background-color:
    var(--glass-strong-bg);

  background-image:
    var(--aura-gradient-primary-soft),
    var(--background-gradient-raised);

  background-repeat:
    var(--background-repeat-none),
    var(--background-repeat-none);

  background-position:
    var(--aura-position-top-end),
    var(--position-center);

  border:
    var(--stroke-control)
    solid
    var(--border-primary-strong);

  border-radius:
    var(--radius-panel-raised);

  box-shadow:
    var(--surface-glass-strong-highlight),
    var(--glow-primary-md),
    var(--elevation-raised);

  color:
    var(--fg-primary);

  backdrop-filter:
    blur(
      var(--glass-strong-blur)
    );

  overflow:
    hidden;

  isolation:
    isolate;
}


/* =========================================================
   PRICING TOOL ROOT
========================================================= */

.c-pricingTool {
  position:
    relative;

  width:
    var(--content-full);

  min-width:
    var(--inset-0);

  padding:
    var(--space-card-padding-sm);

  background-color:
    var(--glass-default-bg);

  background-image:
    var(--aura-panel-image),
    var(--texture-tool-image);

  background-size:
    var(--aura-panel-size),
    var(--texture-tool-size),
    var(--texture-tool-size);

  background-position:
    var(--aura-panel-position),
    var(--texture-tool-position),
    var(--texture-tool-position);

  background-repeat:
    var(--background-repeat-none),
    var(--background-repeat-all),
    var(--background-repeat-all);

  border:
    var(--stroke-control)
    solid
    var(--border-primary-strong);

  border-radius:
    var(--radius-panel-raised);

  box-shadow:
    var(--surface-glass-strong-highlight),
    var(--surface-glass-strong-shadow),
    var(--glow-primary-md);

  color:
    var(--fg-primary);

  backdrop-filter:
    blur(
      var(--glass-default-blur)
    );

  overflow:
    hidden;

  isolation:
    isolate;

  transition:
    var(--transition-surface);
}


/* =========================================================
   PRICING TOOL ROOT STATES
========================================================= */

.c-pricingTool.is-idle,
.c-pricingTool.is-ready {
  opacity:
    var(--motion-opacity-visible);

  pointer-events:
    auto;
}

.c-pricingTool.is-transitioning {
  opacity:
    var(--state-loading-opacity);

  pointer-events:
    none;
}


/* =========================================================
   TOOL SHELL HEADER
========================================================= */

.c-pricingTool__shellHeader {
  position:
    relative;

  padding-block-end:
    var(--space-4);

  background:
    var(--surface-glass-subtle-bg);

  border-block-end:
    var(--divider-size-thin)
    solid
    var(--border-primary-subtle);

  box-shadow:
    var(--surface-glass-subtle-highlight);

  color:
    var(--fg-primary);
}


/* =========================================================
   PERMANENT TOOL INTRODUCTION
========================================================= */

.c-pricingTool__shellIntro {
  position:
    relative;

  max-width:
    var(--type-body-lg-measure);
}


/* =========================================================
   TOOL SHELL TITLE
========================================================= */

.c-pricingTool__shellTitle {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-heading-section-font);

  font-size:
    var(--type-heading-section-size);

  font-weight:
    var(--type-heading-section-weight);

  line-height:
    var(--type-heading-section-leading);

  letter-spacing:
    var(--type-heading-section-tracking);

  text-transform:
    var(--type-heading-section-transform);

  text-shadow:
    var(--glow-primary-md);

  text-wrap:
    balance;
}


/* =========================================================
   TOOL SHELL DESCRIPTION
========================================================= */

.c-pricingTool__shellDescription {
  max-width:
    var(--type-body-lg-measure);

  margin:
    var(--space-2)
    var(--inset-0)
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-font);

  font-size:
    var(--type-body-size);

  font-weight:
    var(--type-body-weight);

  line-height:
    var(--type-body-leading);

  letter-spacing:
    var(--type-body-tracking);

  text-wrap:
    pretty;
}


/* =========================================================
   ACTIVE STEP HEADER DESTINATION
========================================================= */

.c-pricingTool__shellStep {

  position:
    relative;

  min-height:
    var(--interaction-target-comfortable);

  padding-block-start:
    var(--space-4);

  color:
    var(--fg-primary);
}


/* =========================================================
   PRICING FORM
========================================================= */

.c-pricingTool__form {

  position:
    relative;

  padding-block-start:
    var(--space-4);

  color:
    var(--fg-primary);

  opacity:
    var(--motion-opacity-visible);

  transition:
    var(--transition-visibility);
}


/* =========================================================
   INDIVIDUAL PRICING STEP
========================================================= */

.c-pricingTool__step {
  position:
    relative;

  width:
    var(--content-full);

  min-width:
    var(--inset-0);

  color:
    var(--fg-primary);

  opacity:
    var(--motion-opacity-visible);

  transition:
    opacity
    var(--step-motion-enter-duration)
    var(--step-motion-enter-ease),
    transform
    var(--step-motion-enter-duration)
    var(--step-motion-enter-ease);
}


/* =========================================================
   STEP HEADER
========================================================= */

.c-pricingTool__stepHeader {
  position:
    relative;

  width:
    var(--content-full);

  color:
    var(--fg-primary);
}


/* =========================================================
   STEP KICKER
========================================================= */

.c-pricingTool__stepKicker {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-accent);

  font-family:
    var(--type-eyebrow-font);

  font-size:
    var(--type-eyebrow-size);

  font-weight:
    var(--type-eyebrow-weight);

  line-height:
    var(--type-eyebrow-leading);

  letter-spacing:
    var(--type-eyebrow-tracking);

  text-transform:
    var(--type-eyebrow-transform);

  text-shadow:
    var(--glow-accent-sm);
}


/* =========================================================
   STEP TITLE
========================================================= */

.c-pricingTool__stepTitle {
  max-width:
    var(--type-heading-section-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-section-font);

  font-size:
    var(--type-heading-section-size);

  font-weight:
    var(--type-heading-section-weight);

  line-height:
    var(--type-heading-section-leading);

  letter-spacing:
    var(--type-heading-section-tracking);

  text-transform:
    var(--type-heading-section-transform);

  text-wrap:
    balance;
}


/* =========================================================
   STEP DESCRIPTION
========================================================= */

.c-pricingTool__stepDescription {
  max-width:
    var(--type-body-lg-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-font);

  font-size:
    var(--type-body-size);

  font-weight:
    var(--type-body-weight);

  line-height:
    var(--type-body-leading);

  letter-spacing:
    var(--type-body-tracking);

  text-wrap:
    pretty;
}


/* =========================================================
   STEVE CHARACTER CONTAINER
========================================================= */

.c-pricingTool__character {
  position:
    relative;

  flex:
    var(--flex-fixed);

  width:
    var(--content-full);

  height:
    var(--steves-guess-visual-min);

  min-height:
    var(--steves-guess-visual-min);

  max-height:
    var(--steves-guess-visual-min);

  background:
    var(--surface-level-0-bg);

  border-radius:
    var(--radius-panel-raised);

  overflow:
    hidden;

  isolation:
    isolate;
}

/* =========================================================
   STEVE CHARACTER STAGE
========================================================= */

.c-pricingTool__characterStage {
  position:
    relative;

  width:
    var(--content-full);

  height:
    var(--content-full);

  min-height:
    var(--steves-guess-visual-min);

  aspect-ratio:
    var(--environment-media-ratio);

  background:
    var(--character-media-bg);

  border:
    var(--stroke-control)
    solid
    var(--border-accent-strong);

  border-radius:
    var(--radius-panel-raised);

  box-shadow:
    var(--environment-media-shadow),
    var(--glow-accent-md);

  overflow:
    hidden;

  isolation:
    isolate;
}


/* =========================================================
   ENVIRONMENT + STEVE IMAGES
========================================================= */
.c-pricingTool__characterImage {
  position:
    absolute;

  inset:
    var(--inset-0);

  display:
    block;

  width:
    var(--content-full);

  height:
    var(--content-full);

  object-fit:
    var(--environment-media-fit);

  object-position:
    var(--environment-media-position);

  filter:
    var(--character-media-filter);

  pointer-events:
    none;

  transform:
    scale(
      var(--scale-none)
    );

  transform-origin:
    var(--motion-origin-center);

  transition:
    opacity
    var(--character-state-enter-duration)
    var(--character-state-enter-ease),
    transform
    var(--character-state-enter-duration)
    var(--character-state-enter-ease),
    filter
    var(--duration-md)
    var(--ease-standard);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 48rem) {

  .c-pricingTool {
    padding:
      var(--space-card-padding-sm);

    border-radius:
      var(--radius-panel);
  }

  .c-homeSteveGuess__visual,
  .c-homeSteveGuess__tool {
    border-radius:
      var(--radius-panel);
  }

  .c-pricingTool__character,
  .c-pricingTool__characterStage {
    min-height:
      auto;

    border-radius:
      var(--radius-panel);
  }

  .c-pricingTool__stepTitle {
    font-size:
      var(--type-heading-card-size);
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .c-pricingTool,
  .c-pricingTool__form,
  .c-pricingTool__step,
  .c-pricingTool__characterImage {
    transition:
      var(--transition-reduced);
  }

}

/* =========================================================
   PHASE 4
   COMPONENT AUDIT + REFINEMENT
   CHUNK 3

   STEVE'S GUESS
   CONTROLS + SERVICE CARDS
   EQUIPMENT + RADIO LISTS
   ACTIONS + RESULTS + STEP 5
========================================================= */


/* =========================================================
   STATUS MESSAGE
========================================================= */

.c-pricingTool__message {
  display:
    flex;

  align-items:
    flex-start;

  width:
    var(--content-full);

  padding:
    var(--form-status-padding);

  gap:
    var(--form-status-gap);

  background:
    var(--surface-recessed-bg);

  border:
    var(--stroke-control)
    solid
    var(--border-default);

  border-radius:
    var(--form-status-radius);

  box-shadow:
    var(--surface-recessed-shadow);

  color:
    var(--fg-secondary);
}

.c-pricingTool__message--info {
  background:
    var(--form-status-info-bg);

  border-color:
    var(--form-status-info-border);

  box-shadow:
    var(--feedback-info-shadow);

  color:
    var(--form-status-info-text);
}

.c-pricingTool__messageIcon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    var(--flex-fixed);

  width:
    var(--form-status-icon-size);

  height:
    var(--form-status-icon-size);

  margin-block-start:
    var(--space-1);

  background:
    currentColor;

  border-radius:
    var(--radius-round);

  color:
    var(--form-status-info-icon);
}

.c-pricingTool__messageText {
  flex:
    var(--flex-auto);

  margin:
    var(--inset-0);

  color:
    inherit;

  font-family:
    var(--type-body-font);

  font-size:
    var(--type-body-size);

  font-weight:
    var(--type-body-weight);

  line-height:
    var(--type-body-leading);

  letter-spacing:
    var(--type-body-tracking);

  text-wrap:
    pretty;
}
/* =========================================================
   STEVE REACTION MESSAGE
========================================================= */

.c-pricingTool__message--steve {
  flex:
    var(--flex-auto);

  align-items:
    center;

  min-height:
    var(--inset-0);

  padding:
    var(--space-5);

  background:
    var(--surface-emphasis-accent-bg);

  border-color:
    var(--border-accent-strong);

  border-radius:
    var(--radius-card-raised);

  box-shadow:
    var(--surface-emphasis-accent-highlight),
    var(--surface-emphasis-accent-shadow),
    var(--glow-accent-sm);

  color:
    var(--fg-primary);
}


.c-pricingTool__message--steve
.c-pricingTool__messageIcon {
  width:
    var(--space-5);

  height:
    var(--space-5);

  margin-block-start:
    var(--inset-0);

  background:
    var(--brand-accent);

  box-shadow:
    var(--glow-accent-md);

  color:
    var(--brand-accent);
}


.c-pricingTool__message--steve
.c-pricingTool__messageText {
  color:
    var(--fg-primary);

  font-family:
    var(--type-label-font);

  font-size:
    var(--type-heading-card-size);

  font-weight:
    var(--weight-bold);

  line-height:
    var(--type-heading-card-leading);

  letter-spacing:
    var(--type-label-tracking);

  text-transform:
    var(--type-label-transform);

  text-wrap:
    balance;
}

/* =========================================================
   SERVICE CARD
========================================================= */

.c-pricingTool__serviceCard {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    var(--content-full);

  min-width:
    var(--inset-0);

  height:
    var(--content-full);

  padding:
    var(--space-card-padding);

  gap:
    var(--option-card-gap);

  background:
    var(--glass-subtle-bg);

  border:
    var(--stroke-control)
    solid
    var(--glass-subtle-border);

  border-radius:
    var(--option-card-radius);

  box-shadow:
    var(--glass-subtle-highlight),
    var(--elevation-low);

  color:
    var(--fg-primary);

  cursor:
    var(--cursor-pointer);

  touch-action:
    var(--touch-action-manipulation);

  user-select:
    var(--user-select-none);

  overflow:
    hidden;

  isolation:
    isolate;

  transition:
    var(--option-card-transition);
}

.c-pricingTool__serviceCard:hover {
  background:
    var(--glass-default-bg);

  border-color:
    var(--border-primary-strong);

  box-shadow:
    var(--glass-default-highlight),
    var(--glow-primary-sm),
    var(--elevation-default);

  transform:
    translateY(
      var(--state-hover-translate-y)
    );
}

.c-pricingTool__serviceCard:focus-within {
  border-color:
    var(--state-focus-border);

  box-shadow:
    var(--focus-ring),
    var(--glow-primary-sm),
    var(--option-card-shadow);
}


/* =========================================================
   NATIVE SERVICE CONTROL
========================================================= */

.c-pricingTool__serviceCardControl {
  position:
    absolute;

  width:
    var(--stroke-1);

  height:
    var(--stroke-1);

  margin:
    calc(
      var(--space-1) * -1
    );

  padding:
    var(--inset-0);

  border:
    var(--stroke-0);

  overflow:
    hidden;

  clip:
    rect(
      var(--inset-0),
      var(--inset-0),
      var(--inset-0),
      var(--inset-0)
    );

  white-space:
    nowrap;
}


/* =========================================================
   CUSTOM OPTION CONTROL
========================================================= */

.c-pricingTool__optionControl {
  display:
    none;
}
.c-pricingTool__optionControl::after {
  content:
    "";

  width:
    var(--radio-dot);

  height:
    var(--radio-dot);

  background:
    currentColor;

  border-radius:
    var(--radius-round);

  opacity:
    var(--state-hidden-opacity);

  transform:
    scale(
      var(--scale-down-md)
    );

  transition:
    var(--radio-transition);
}


/* =========================================================
   SERVICE CARD SELECTED STATE
========================================================= */

.c-pricingTool__serviceCardControl:checked
+
.c-pricingTool__optionControl {
  background:
    var(--radio-bg-checked);

  border-color:
    var(--radio-border-checked);

  box-shadow:
    var(--state-selected-ring);
}

.c-pricingTool__serviceCardControl:checked
+
.c-pricingTool__optionControl::after {
  opacity:
    var(--state-selected-opacity);

  transform:
    scale(
      var(--scale-none)
    );
}

.c-pricingTool__serviceCard:has(
  .c-pricingTool__serviceCardControl:checked
) {
  background:
    var(--surface-emphasis-primary-bg);

  border-color:
    var(--border-primary-strong);

  box-shadow:
    var(--surface-emphasis-primary-highlight),
    var(--glow-primary-md),
    var(--elevation-default);

  color:
    var(--state-selected-text);
}


/* =========================================================
   SERVICE CARD CONTENT
========================================================= */
.c-pricingTool__serviceCardContent {
  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  flex:
    var(--flex-auto);

  min-width:
    var(--inset-0);

  gap:
    var(--space-card-gap);
}

.c-pricingTool__serviceCardTitle {
  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-card-font);

  font-size:
    var(--type-heading-card-size);

  font-weight:
    var(--type-heading-card-weight);

  line-height:
    var(--type-heading-card-leading);

  letter-spacing:
    var(--type-heading-card-tracking);

  text-transform:
    var(--type-heading-card-transform);

  text-wrap:
    balance;
}

.c-pricingTool__serviceCardDescription {
  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-font);

  font-size:
    var(--type-body-size);

  font-weight:
    var(--type-body-weight);

  line-height:
    var(--type-body-leading);

  letter-spacing:
    var(--type-body-tracking);

  text-wrap:
    pretty;
}


.c-pricingTool__serviceCardPrice {
  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-label-font);

  font-size:
    var(--type-label-size);

  font-weight:
    var(--type-label-weight);

  line-height:
    var(--type-label-leading);

  letter-spacing:
    var(--type-label-tracking);

  text-transform:
    var(--type-label-transform);
}


/* =========================================================
   FIELD GROUP + FIELD
========================================================= */

.c-pricingTool__fieldGroup {
  width:
    var(--content-full);

  min-width:
    var(--inset-0);
}

.c-pricingTool__field {
  display:
    flex;

  flex-direction:
    column;

  width:
    var(--content-full);

  min-width:
    var(--inset-0);

  gap:
    var(--field-group-gap);
}

.c-pricingTool__label {
  margin:
    var(--inset-0);

  color:
    var(--label-text);

  font-family:
    var(--label-font);

  font-size:
    var(--label-size);

  font-weight:
    var(--label-weight);

  line-height:
    var(--label-leading);

  letter-spacing:
    var(--label-tracking);
}


/* =========================================================
   TEXT INPUT
========================================================= */

.c-pricingTool__input {
  display:
    block;

  width:
    var(--content-full);

  min-height:
    var(--control-h-md);

  padding:
    var(--control-padding-y-md)
    var(--control-padding-x-md);

  background:
    var(--glass-subtle-bg);

  border:
    var(--stroke-control)
    solid
    var(--glass-subtle-border);

  border-radius:
    var(--radius-input);

  box-shadow:
    var(--input-shadow);

  color:
    var(--input-text);

  caret-color:
    var(--input-caret);

  font-family:
    var(--type-body-font);

  font-size:
    var(--type-body-size);

  font-weight:
    var(--type-body-weight);

  line-height:
    var(--type-body-leading);

  letter-spacing:
    var(--type-body-tracking);

  transition:
    var(--input-transition);
}

.c-pricingTool__input::placeholder {
  color:
    var(--input-placeholder);

  opacity:
    var(--placeholder-opacity);
}

.c-pricingTool__input:hover {
  background:
    var(--glass-default-bg);

  border-color:
    var(--border-emphasis);

  box-shadow:
    var(--input-shadow-hover);
}

.c-pricingTool__input:focus {
  outline:
    none;

  background:
    var(--surface-primary-subtle);

  border-color:
    var(--border-primary-strong);

  box-shadow:
    var(--focus-ring),
    var(--glow-primary-sm);
}

.c-pricingTool__input:active {
  background:
    var(--input-bg-active);

  border-color:
    var(--input-border-active);

  box-shadow:
    var(--input-shadow-active);
}


/* =========================================================
   TEXTAREA
========================================================= */

.c-pricingTool__textarea {
  display:
    block;

  width:
    var(--content-full);

  min-height:
    var(--textarea-min-h);

  padding:
    var(--textarea-padding-y)
    var(--textarea-padding-x);

  background:
    var(--glass-subtle-bg);

  border:
    var(--stroke-control)
    solid
    var(--glass-subtle-border);

  border-radius:
    var(--radius-textarea);

  box-shadow:
    var(--input-shadow);

  color:
    var(--input-text);

  caret-color:
    var(--input-caret);

  font-family:
    var(--type-body-font);

  font-size:
    var(--type-body-size);

  font-weight:
    var(--type-body-weight);

  line-height:
    var(--type-body-leading);

  letter-spacing:
    var(--type-body-tracking);

  resize:
    var(--textarea-resize);

  transition:
    var(--input-transition);
}

.c-pricingTool__textarea::placeholder {
  color:
    var(--input-placeholder);

  opacity:
    var(--placeholder-opacity);
}

.c-pricingTool__textarea:hover {
  background:
    var(--glass-default-bg);

  border-color:
    var(--border-emphasis);

  box-shadow:
    var(--input-shadow-hover);
}

.c-pricingTool__textarea:focus {
  outline:
    none;

  background:
    var(--surface-primary-subtle);

  border-color:
    var(--border-primary-strong);

  box-shadow:
    var(--focus-ring),
    var(--glow-primary-sm);
}


/* =========================================================
   FIELD SUPPORT TEXT
========================================================= */

.c-pricingTool__fieldHelp,
.c-pricingTool__fieldMessage {
  margin:
    var(--inset-0);

  color:
    var(--helper-text);

  font-family:
    var(--helper-font);

  font-size:
    var(--helper-size);

  font-weight:
    var(--helper-weight);

  line-height:
    var(--helper-leading);

  letter-spacing:
    var(--helper-tracking);

  text-wrap:
    pretty;
}

.c-pricingTool__fieldMessage {
  min-height:
    var(--helper-leading);
}

.c-pricingTool__fieldError {
  color:
    var(--helper-text-invalid);
}


/* =========================================================
   VALID STATES
========================================================= */

.c-pricingTool__serviceCard.is-valid,
.c-pricingTool__fieldGroup.is-valid,
.c-pricingTool__field.is-valid {
  border-color:
    var(--state-valid-border);

  box-shadow:
    var(--state-valid-shadow);
}

.c-pricingTool__input.is-valid,
.c-pricingTool__textarea.is-valid {
  background:
    var(--state-valid-bg);

  border-color:
    var(--input-border-valid);

  box-shadow:
    var(--input-shadow-valid);
}

.c-pricingTool__field.is-valid
.c-pricingTool__fieldMessage,
.c-pricingTool__fieldGroup.is-valid
.c-pricingTool__fieldMessage {
  color:
    var(--helper-text-valid);
}


/* =========================================================
   INVALID STATES
========================================================= */

.c-pricingTool__serviceCard.is-invalid,
.c-pricingTool__fieldGroup.is-invalid,
.c-pricingTool__field.is-invalid {
  border-color:
    var(--state-invalid-border);

  box-shadow:
    var(--state-invalid-shadow);
}

.c-pricingTool__input.is-invalid,
.c-pricingTool__textarea.is-invalid {
  background:
    var(--state-invalid-bg);

  border-color:
    var(--input-border-invalid);

  box-shadow:
    var(--input-shadow-invalid);
}

.c-pricingTool__field.is-invalid
.c-pricingTool__fieldMessage,
.c-pricingTool__fieldGroup.is-invalid
.c-pricingTool__fieldMessage {
  color:
    var(--helper-text-invalid);
}


/* =========================================================
   DISABLED STATES
========================================================= */

.c-pricingTool__serviceCard.is-disabled,
.c-pricingTool__fieldGroup.is-disabled,
.c-pricingTool__field.is-disabled {
  opacity:
    var(--state-disabled-opacity);

  pointer-events:
    none;
}

.c-pricingTool__serviceCard.is-disabled {
  background:
    var(--state-disabled-bg);

  border-color:
    var(--state-disabled-border);

  box-shadow:
    var(--state-disabled-shadow);

  color:
    var(--state-disabled-text);

  cursor:
    var(--state-disabled-cursor);
}

.c-pricingTool__input.is-disabled,
.c-pricingTool__textarea.is-disabled,
.c-pricingTool__input:disabled,
.c-pricingTool__textarea:disabled {
  background:
    var(--input-bg-disabled);

  border-color:
    var(--input-border-disabled);

  box-shadow:
    var(--input-shadow-disabled);

  color:
    var(--input-text-disabled);

  cursor:
    var(--state-disabled-cursor);

  opacity:
    var(--state-disabled-opacity);
}

.c-pricingTool__input:disabled::placeholder,
.c-pricingTool__textarea:disabled::placeholder {
  color:
    var(--input-placeholder-disabled);
}

.c-pricingTool__field.is-disabled
.c-pricingTool__label,
.c-pricingTool__fieldGroup.is-disabled
.c-pricingTool__label {
  color:
    var(--label-text-disabled);
}


/* =========================================================
   COMPLETE STATES
========================================================= */

.c-pricingTool__serviceCard.is-complete {
  background:
    var(--option-card-bg-selected);

  border-color:
    var(--option-card-border-selected);

  box-shadow:
    var(--surface-selected-highlight),
    var(--option-card-shadow-selected);
}

.c-pricingTool__fieldGroup.is-complete,
.c-pricingTool__field.is-complete {
  color:
    var(--state-valid-text);
}

.c-pricingTool__input.is-complete,
.c-pricingTool__textarea.is-complete {
  background:
    var(--input-bg-filled);

  border-color:
    var(--input-border-valid);
}


/* =========================================================
   EQUIPMENT SUMMARY
========================================================= */

.c-pricingTool__equipmentSummary {
  padding:
    var(--option-card-padding);

  background:
    var(--surface-emphasis-accent-bg);

  border:
    var(--stroke-control)
    solid
    var(--border-accent-strong);

  border-radius:
    var(--radius-card);

  box-shadow:
    var(--surface-emphasis-accent-highlight),
    var(--surface-emphasis-accent-shadow),
    var(--glow-accent-sm);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  transition:
    var(--transition-interactive);
}

.c-pricingTool__equipmentMedia {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    var(--flex-fixed);

  width:
    var(--media-size-lg);

  aspect-ratio:
    var(--equipment-media-ratio);

  background:
    var(--equipment-media-bg);

  border:
    var(--stroke-control)
    solid
    var(--border-accent-strong);

  border-radius:
    var(--equipment-media-radius);

  box-shadow:
    var(--equipment-media-shadow),
    var(--glow-accent-sm);

  overflow:
    hidden;
}

.c-pricingTool__equipmentImage {
  display:
    block;

  width:
    var(--content-full);

  height:
    var(--content-full);

  object-fit:
    var(--equipment-media-fit);

  object-position:
    var(--equipment-media-position);

  filter:
    var(--equipment-media-filter);

  transform:
    scale(
      var(--scale-none)
    );

  transition:
    var(--media-transition-complete);
}

.c-pricingTool__equipmentSummary:hover
.c-pricingTool__equipmentImage {
  transform:
    scale(
      var(--media-scale-hover)
    );
}

.c-pricingTool__equipmentContent {
  display:
    flex;

  flex-direction:
    column;

  flex:
    var(--flex-auto);

  min-width:
    var(--inset-0);

  gap:
    var(--space-2);
}

.c-pricingTool__equipmentKicker {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-accent);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--type-meta-weight);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);

  text-shadow:
    var(--glow-accent-sm);
}

.c-pricingTool__equipmentTitle {
  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-card-font);

  font-size:
    var(--type-heading-card-size);

  font-weight:
    var(--type-heading-card-weight);

  line-height:
    var(--type-heading-card-leading);

  letter-spacing:
    var(--type-heading-card-tracking);

  text-transform:
    var(--type-heading-card-transform);

  text-wrap:
    balance;
}


/* =========================================================
   RADIO LIST
========================================================= */

.c-pricingToolRadioList {
  color:
    var(--fg-primary);
}

.c-pricingToolRadioList__option {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  width:
    var(--content-full);

  min-width:
    var(--inset-0);

  min-height:
    var(--dimension-130);

  padding:
    var(--space-5);

  gap:
    var(--option-card-gap);

  background:
    var(--glass-subtle-bg);

  border:
    var(--stroke-control)
    solid
    var(--glass-subtle-border);

  border-radius:
    var(--option-card-radius);

  box-shadow:
    var(--glass-subtle-highlight),
    var(--elevation-low);

  color:
    var(--fg-primary);

  cursor:
    var(--cursor-pointer);

  touch-action:
    var(--touch-action-manipulation);

  user-select:
    var(--user-select-none);

  transition:
    var(--option-card-transition);
}
.c-pricingToolRadioList__option:hover {
  background:
    var(--glass-default-bg);

  border-color:
    var(--border-primary-strong);

  box-shadow:
    var(--glass-default-highlight),
    var(--glow-primary-sm),
    var(--elevation-default);

  transform:
    translateY(
      var(--state-hover-translate-y)
    );
}

.c-pricingToolRadioList__option:focus-within {
  border-color:
    var(--state-focus-border);

  box-shadow:
    var(--focus-ring),
    var(--glow-primary-sm),
    var(--option-card-shadow);
}

.c-pricingToolRadioList__option:has(
  .c-pricingToolRadioList__input:checked
) {
  background:
    var(--surface-emphasis-primary-bg);

  border-color:
    var(--border-primary-strong);

  box-shadow:
    var(--surface-emphasis-primary-highlight),
    var(--glow-primary-md),
    var(--elevation-default);
}

.c-pricingToolRadioList__input {
  position:
    absolute;

  width:
    var(--stroke-1);

  height:
    var(--stroke-1);

  margin:
    calc(
      var(--space-1) * -1
    );

  padding:
    var(--inset-0);

  border:
    var(--stroke-0);

  overflow:
    hidden;

  clip:
    rect(
      var(--inset-0),
      var(--inset-0),
      var(--inset-0),
      var(--inset-0)
    );

  white-space:
    nowrap;
}

.c-pricingToolRadioList__control {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    var(--flex-fixed);

  width:
    var(--radio-size);

  height:
    var(--radio-size);

  background:
    var(--radio-bg);

  border:
    var(--stroke-control)
    solid
    var(--radio-border);

  border-radius:
    var(--radius-round);

  transition:
    var(--radio-transition);
}

.c-pricingToolRadioList__control::after {
  content:
    "";

  width:
    var(--radio-dot);

  height:
    var(--radio-dot);

  background:
    var(--radio-dot-bg);

  border-radius:
    var(--radius-round);

  opacity:
    var(--state-hidden-opacity);

  transform:
    scale(
      var(--scale-down-md)
    );

  transition:
    var(--radio-transition);
}

.c-pricingToolRadioList__option:hover
.c-pricingToolRadioList__control {
  background:
    var(--radio-bg-hover);

  border-color:
    var(--radio-border-hover);
}

.c-pricingToolRadioList__input:focus-visible
+
.c-pricingToolRadioList__control {
  box-shadow:
    var(--radio-shadow-focus);
}

.c-pricingToolRadioList__input:checked
+
.c-pricingToolRadioList__control {
  background:
    var(--radio-bg-checked);

  border-color:
    var(--radio-border-checked);
}

.c-pricingToolRadioList__input:checked
+
.c-pricingToolRadioList__control::after {
  opacity:
    var(--state-selected-opacity);

  transform:
    scale(
      var(--scale-none)
    );
}

.c-pricingToolRadioList__label {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    var(--flex-auto);

  min-width:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-label-font);

  font-size:
    var(--type-label-size);

  font-weight:
    var(--type-label-weight);

  line-height:
    var(--type-label-leading);

  letter-spacing:
    var(--type-label-tracking);

  text-align:
    center;

  text-transform:
    var(--type-label-transform);

  text-wrap:
    balance;

  transition:
    var(--transition-interactive);
}

.c-pricingToolRadioList__input:checked
~
.c-pricingToolRadioList__label {
  color:
    var(--state-selected-text);
}


/* =========================================================
   PRICING TOOL BUTTON FOUNDATION
========================================================= */

.c-pricingTool__button {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    var(--size-button-h);

  padding:
    var(--space-3)
    var(--space-4);

  gap:
    var(--space-button-gap);

  background:
    var(--button-secondary-bg);

  border:
    var(--stroke-control)
    solid
    var(--button-secondary-border);

  border-radius:
    var(--button-radius);

  box-shadow:
    var(--button-secondary-shadow);

  color:
    var(--button-secondary-text);

  font-family:
    var(--button-font);

  font-size:
    var(--button-size);

  font-weight:
    var(--button-weight);

  line-height:
    var(--button-leading);

  letter-spacing:
    var(--button-tracking);

  text-align:
    center;

  text-transform:
    var(--button-transform);

  cursor:
    var(--cursor-pointer);

  touch-action:
    var(--touch-action-manipulation);

  user-select:
    var(--user-select-none);

  transition:
    var(--button-transition);
}

.c-pricingTool__button:hover {
  transform:
    translateY(
      var(--state-hover-translate-y)
    );
}

.c-pricingTool__button:active {
  transform:
    translateY(
      var(--state-active-translate-y)
    )
    scale(
      var(--state-active-scale)
    );
}

.c-pricingTool__button:focus-visible {
  outline:
    none;

  box-shadow:
    var(--focus-ring),
    var(--button-secondary-shadow);
}

.c-pricingTool__button:disabled,
.c-pricingTool__button[aria-disabled="true"] {
  opacity:
    var(--state-disabled-opacity);

  cursor:
    var(--cursor-disabled);

  pointer-events:
    none;

  transform:
    none;
}

.c-pricingTool__button--primary {
  background:
    var(--button-primary-bg);

  border-color:
    var(--button-primary-border);

  box-shadow:
    var(--button-primary-shadow);

  color:
    var(--button-primary-text);
}

.c-pricingTool__button--primary:hover {
  background:
    var(--button-primary-bg-hover);

  border-color:
    var(--button-primary-border-hover);

  box-shadow:
    var(--button-primary-shadow-hover);

  color:
    var(--button-primary-text-hover);
}

.c-pricingTool__button--primary:active {
  background:
    var(--button-primary-bg-active);

  border-color:
    var(--button-primary-border-active);

  box-shadow:
    var(--button-primary-shadow-active);
}

.c-pricingTool__button--primary:focus-visible {
  box-shadow:
    var(--focus-ring),
    var(--button-primary-shadow);
}

.c-pricingTool__button--primary:disabled,
.c-pricingTool__button--primary[aria-disabled="true"] {
  background:
    var(--button-primary-bg-disabled);

  border-color:
    var(--button-primary-border-disabled);

  box-shadow:
    var(--state-disabled-shadow);

  color:
    var(--button-primary-text-disabled);
}

.c-pricingTool__button--secondary {
  background:
    var(--button-secondary-bg);

  border-color:
    var(--button-secondary-border);

  box-shadow:
    var(--button-secondary-shadow);

  color:
    var(--button-secondary-text);
}

.c-pricingTool__button--secondary:hover {
  background:
    var(--button-secondary-bg-hover);

  border-color:
    var(--button-secondary-border-hover);

  box-shadow:
    var(--button-secondary-shadow-hover);

  color:
    var(--button-secondary-text-hover);
}

.c-pricingTool__button--secondary:active {
  background:
    var(--button-secondary-bg-active);

  border-color:
    var(--button-secondary-border-active);

  box-shadow:
    var(--button-secondary-shadow-active);
}

.c-pricingTool__button--secondary:focus-visible {
  box-shadow:
    var(--focus-ring),
    var(--button-secondary-shadow);
}

.c-pricingTool__button--secondary:disabled,
.c-pricingTool__button--secondary[aria-disabled="true"] {
  background:
    var(--button-secondary-bg-disabled);

  border-color:
    var(--button-secondary-border-disabled);

  box-shadow:
    var(--state-disabled-shadow);

  color:
    var(--button-secondary-text-disabled);
}

.c-pricingTool__button--calculate {
  min-height:
    var(--size-button-h);

  padding:
    var(--space-3)
    var(--space-4);

  box-shadow:
    var(--glow-primary-md),
    var(--button-primary-shadow-hover);
}

.c-pricingTool__button--calculate:hover {
  box-shadow:
    var(--glow-primary-lg),
    var(--button-primary-shadow-hover);
}


/* =========================================================
   PRICING TOOL RESULT
========================================================= */

.c-pricingToolResult {
  padding:
    var(--space-tool-padding);

  background-color:
    var(--glass-strong-bg);

  background-image:
    var(--aura-gradient-primary-soft);

  background-position:
    var(--aura-position-top-end);

  background-repeat:
    var(--background-repeat-none);

  border:
    var(--stroke-control)
    solid
    var(--border-primary-strong);

  border-radius:
    var(--radius-panel-raised);

  box-shadow:
    var(--surface-glass-strong-highlight),
    var(--surface-glass-strong-shadow),
    var(--glow-primary-md);

  color:
    var(--fg-primary);

  backdrop-filter:
    blur(
      var(--glass-strong-blur)
    );

  overflow:
    hidden;

  isolation:
    isolate;
}

.c-pricingToolResult__dialog {
  position:
    relative;

  width:
    var(--content-full);

  color:
    inherit;
}

.c-pricingToolResult__header {

  padding-block-end:
    var(--space-3);

  border-block-end:
    var(--divider-size-thin)
    solid
    var(--divider-default);
}

.c-pricingToolResult__estimate {
  padding:
    var(--space-card-padding-sm);

  background:
    var(--surface-emphasis-primary-bg);

  border:
    var(--stroke-control)
    solid
    var(--border-primary-strong);

  border-radius:
    var(--radius-card-raised);

  box-shadow:
    var(--surface-emphasis-primary-highlight),
    var(--surface-emphasis-primary-shadow),
    var(--glow-primary-md);

  text-align:
    left;
}

.c-pricingToolResult__estimateLabel {
  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--type-meta-weight);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);
}

.c-pricingToolResult__estimateValue {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-price-lg-font);

  font-size:
    var(--type-price-lg-size);

  font-weight:
    var(--type-price-lg-weight);

  line-height:
    var(--type-price-lg-leading);

  letter-spacing:
    var(--type-price-lg-tracking);

  font-feature-settings:
    var(--type-price-lg-feature);

  text-wrap:
    balance;

  text-shadow:
    var(--glow-primary-md);
}

.c-pricingToolResult__summary {
  background:
    var(--glass-default-bg);

  border:
    var(--stroke-control)
    solid
    var(--glass-default-border);

  border-radius:
    var(--radius-card);

  box-shadow:
    var(--glass-default-highlight),
    var(--glass-default-shadow);

  overflow:
    hidden;
}

.c-pricingToolResult__row {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    var(--space-3);

  border-block-end:
    var(--divider-size-thin)
    solid
    var(--divider-default);

  gap:
    var(--space-inline-gap);
}

.c-pricingToolResult__row:last-child {
  border-block-end:
    none;
}

.c-pricingToolResult__label {
  color:
    var(--fg-secondary);

  font-family:
    var(--type-label-font);

  font-size:
    var(--type-label-size);

  font-weight:
    var(--type-label-weight);

  line-height:
    var(--type-label-leading);

  letter-spacing:
    var(--type-label-tracking);

  text-transform:
    var(--type-label-transform);
}

.c-pricingToolResult__value {
  color:
    var(--fg-primary);

  font-family:
    var(--type-body-font);

  font-size:
    var(--type-body-size);

  font-weight:
    var(--weight-semibold);

  line-height:
    var(--type-body-leading);

  letter-spacing:
    var(--type-body-tracking);

  text-align:
    right;
}

.c-pricingToolResult__notice {
  padding:
    var(--form-status-padding);

  background:
    var(--surface-emphasis-accent-bg);

  border:
    var(--stroke-control)
    solid
    var(--border-accent-strong);

  border-radius:
    var(--form-status-radius);

  box-shadow:
    var(--surface-emphasis-accent-highlight),
    var(--surface-emphasis-accent-shadow),
    var(--glow-accent-sm);

  color:
    var(--fg-brand-accent);

  font-family:
    var(--helper-font);

  font-size:
    var(--helper-size);

  font-weight:
    var(--helper-weight);

  line-height:
    var(--helper-leading);

  letter-spacing:
    var(--helper-tracking);
}

.c-pricingToolResult__actions {

  padding-block-start:
    var(--space-4);

  border-block-start:
    var(--divider-size-thin)
    solid
    var(--divider-default);
}


/* =========================================================
   RESULT STAGE
========================================================= */

.c-pricingToolModal__stage {
  opacity:
    var(--motion-opacity-visible);

  transition:
    opacity
    var(--result-motion-enter-duration)
    var(--result-motion-enter-ease),
    transform
    var(--result-motion-enter-duration)
    var(--result-motion-enter-ease);
}

.c-pricingToolModal__stage.is-visible {
  opacity:
    var(--motion-opacity-visible);

  transform:
    translateY(
      var(--translate-none)
    );

  pointer-events:
    auto;
}

.c-pricingToolModal__stage.is-hidden {
  display:
    none;

  opacity:
    var(--state-hidden-opacity);

  transform:
    translateY(
      var(--result-motion-enter-y)
    );

  pointer-events:
    none;
}


/* =========================================================
   STEP 5
========================================================= */

.c-pricingToolStep5 {
  padding:
    var(--space-tool-padding);

  background-color:
    var(--glass-strong-bg);

  background-image:
    var(--aura-gradient-accent-soft);

  background-position:
    var(--aura-position-top-end);

  background-repeat:
    var(--background-repeat-none);

  border:
    var(--stroke-control)
    solid
    var(--border-accent-strong);

  border-radius:
    var(--radius-panel-raised);

  box-shadow:
    var(--surface-glass-strong-highlight),
    var(--surface-glass-strong-shadow),
    var(--glow-accent-md);

  color:
    var(--fg-primary);

  backdrop-filter:
    blur(
      var(--glass-strong-blur)
    );

  overflow:
    hidden;

  isolation:
    isolate;
}

.c-pricingToolStep5__dialog {
  position:
    relative;

  width:
    var(--content-full);

  color:
    inherit;
}

.c-pricingToolStep5__body,
.c-pricingToolStep5__form {
  width:
    var(--content-full);
      color:
    var(--fg-primary);
    
}

.c-pricingToolStep5__stage {
  opacity:
    var(--motion-opacity-visible);

  transition:
    opacity
    var(--result-motion-enter-duration)
    var(--result-motion-enter-ease),
    transform
    var(--result-motion-enter-duration)
    var(--result-motion-enter-ease);
}

.c-pricingToolStep5__actions {
  padding-block-start:
    var(--space-5);

  border-block-start:
    var(--divider-size-thin)
    solid
    var(--divider-default);

  color:
    var(--fg-primary);
}

.c-pricingToolStep5__stage[data-result-stage="confirmation"] {
  padding:
    var(--space-card-padding);

  background:
    var(--surface-emphasis-accent-bg);

  border:
    var(--stroke-control)
    solid
    var(--border-accent-strong);

  border-radius:
    var(--radius-card-raised);

  box-shadow:
    var(--surface-emphasis-accent-highlight),
    var(--surface-emphasis-accent-shadow),
    var(--glow-accent-sm);

  color:
    var(--fg-primary);

  opacity:
    var(--motion-opacity-visible);

  transform:
    translateY(
      var(--translate-none)
    );
}

.c-pricingToolStep5__stage[data-result-stage="submitting"] {
  opacity:
    var(--state-loading-opacity);

  pointer-events:
    none;

  cursor:
    var(--cursor-wait);
}

.c-pricingToolStep5__stage[data-result-stage="error"] {
  padding:
    var(--form-status-padding);

  background:
    var(--form-status-error-bg);

  border:
    var(--stroke-control)
    solid
    var(--form-status-error-border);

  border-radius:
    var(--form-status-radius);

  box-shadow:
    var(--feedback-error-shadow);

  color:
    var(--form-status-error-text);
}

.c-pricingToolStep5__stage[data-result-stage="request-success"] {
  padding:
    var(--form-status-padding);

  background:
    var(--form-status-success-bg);

  border:
    var(--stroke-control)
    solid
    var(--form-status-success-border);

  border-radius:
    var(--form-status-radius);

  box-shadow:
    var(--feedback-success-shadow),
    var(--glow-primary-sm);

  color:
    var(--form-status-success-text);
}

.c-pricingToolStep5__stage[data-result-stage="estimate-complete"] {
  padding:
    var(--space-card-padding);

  background:
    var(--surface-emphasis-primary-bg);

  border:
    var(--stroke-control)
    solid
    var(--border-primary-strong);

  border-radius:
    var(--radius-card-raised);

  box-shadow:
    var(--surface-emphasis-primary-highlight),
    var(--surface-emphasis-primary-shadow),
    var(--glow-primary-md);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 48rem) {

  .c-pricingTool__serviceCard,
  .c-pricingToolRadioList__option,
  .c-pricingTool__equipmentSummary {
    padding:
      var(--space-4);
  }

  .c-pricingTool__input {
    min-height:
      var(--control-h-lg);
  }

  .c-pricingTool__equipmentMedia {
    width:
      var(--media-size-md);
  }

  .c-pricingToolResult,
  .c-pricingToolStep5 {
    padding:
      var(--space-card-padding-sm);

    border-radius:
      var(--radius-panel);
  }

  .c-pricingToolResult__estimate {
    padding:
      var(--space-5);
  }

  .c-pricingToolResult__estimateValue {
    font-size:
      var(--type-heading-section-size);
  }

  .c-pricingToolResult__row {
    flex-direction:
      column;

    align-items:
      flex-start;
  }

  .c-pricingToolResult__value {
    text-align:
      left;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .c-pricingTool__serviceCard,
  .c-pricingTool__optionControl,
  .c-pricingTool__optionControl::after,
  .c-pricingTool__input,
  .c-pricingTool__textarea,
  .c-pricingTool__equipmentSummary,
  .c-pricingTool__equipmentImage,
  .c-pricingToolRadioList__option,
  .c-pricingToolRadioList__control,
  .c-pricingToolRadioList__control::after,
  .c-pricingToolRadioList__label,
  .c-pricingTool__button,
  .c-pricingToolModal__stage,
  .c-pricingToolStep5__stage {
    transition:
      var(--transition-reduced);
  }

  .c-pricingTool__serviceCard:hover,
  .c-pricingTool__equipmentSummary:hover
  .c-pricingTool__equipmentImage,
  .c-pricingToolRadioList__option:hover,
  .c-pricingTool__button:hover,
  .c-pricingTool__button:active {
    transform:
      none;
  }

}


/* =========================================================
   PHASE 4
   COMPONENT AUDIT + REFINEMENT
   CHUNK 4

   COMMERCIAL TRANSPORTATION
   BENEFIT SELECTORS
   COMMERCIAL GALLERY
========================================================= */


/* =========================================================
   COMMERCIAL SECTION ROOT
========================================================= */

.c-homeCommercialFleet {
  position:
    relative;

  background:
    var(--background-gradient-dark);

  border-block:
    var(--divider-size-thin)
    solid
    var(--divider-default);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


/* =========================================================
   COMMERCIAL EYEBROW
========================================================= */

.c-homeCommercialFleet__eyebrow {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-eyebrow-font);

  font-size:
    var(--type-eyebrow-size);

  font-weight:
    var(--type-eyebrow-weight);

  line-height:
    var(--type-eyebrow-leading);

  letter-spacing:
    var(--type-eyebrow-tracking);

  text-transform:
    var(--type-eyebrow-transform);
}


/* =========================================================
   COMMERCIAL TITLE
========================================================= */

.c-homeCommercialFleet__title {
  max-width:
    var(--type-heading-feature-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-feature-font);

  font-size:
    var(--type-heading-feature-size);

  font-weight:
    var(--type-heading-feature-weight);

  line-height:
    var(--type-heading-feature-leading);

  letter-spacing:
    var(--type-heading-feature-tracking);

  text-transform:
    var(--type-heading-feature-transform);

  text-wrap:
    balance;
}


/* =========================================================
   CLIENT PROOF
========================================================= */

.c-homeCommercialFleet__clientProof {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    var(--space-inline-gap-sm);

  margin:
    var(--inset-0);

  color:
    var(--fg-tertiary);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--type-meta-weight);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);
}

.c-homeCommercialFleet__clientName {
  color:
    var(--fg-secondary);

  font-weight:
    var(--weight-semibold);
}


/* =========================================================
   BENEFIT LIST
========================================================= */

.c-homeCommercialFleet__benefits {
  color:
    var(--fg-primary);
}


/* =========================================================
   BENEFIT CARD
========================================================= */

.c-homeCommercialFleet__benefit {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    var(--content-full);

  min-width:
    var(--inset-0);

  min-height:
    var(--dimension-200);

  padding:
    var(--space-card-padding-sm);

  gap:
    var(--space-card-gap);

  background:
    var(--surface-card-bg);

  border:
    var(--stroke-control)
    solid
    var(--surface-card-border);

  border-radius:
    var(--radius-card);

  box-shadow:
    var(--surface-card-highlight),
    var(--surface-card-shadow);

  color:
    var(--fg-primary);

  cursor:
    var(--cursor-pointer);

  touch-action:
    var(--touch-action-manipulation);

  user-select:
    var(--user-select-none);

  overflow:
    hidden;

  isolation:
    isolate;

  transition:
    var(--transition-interactive);
}
.c-homeCommercialFleet__benefit:hover {
  background:
    var(--surface-card-raised-bg);

  border-color:
    var(--surface-card-raised-border);

  box-shadow:
    var(--surface-card-raised-highlight),
    var(--surface-card-raised-shadow);

  transform:
    translateY(
      var(--state-hover-translate-y)
    );
}

.c-homeCommercialFleet__benefit:focus-visible {
  border-color:
    var(--state-focus-border);

  outline:
    none;

  box-shadow:
    var(--focus-ring),
    var(--surface-card-shadow);
}

/* =========================================================
   BENEFIT ICON
========================================================= */

.c-homeCommercialFleet__benefitIcon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    var(--flex-fixed);

  width:
    var(--media-size-icon-image);

  height:
    var(--media-size-icon-image);

  background:
    var(--surface-primary-subtle);

  border:
    var(--stroke-control)
    solid
    var(--border-primary);

  border-radius:
    var(--radius-control-lg);

  box-shadow:
    var(--glow-primary-sm);

  color:
    var(--fg-brand-primary);

  opacity:
    var(--motion-opacity-visible);

  transform:
    scale(
      var(--scale-none)
    );

  transition:
    var(--transition-interactive);
}


/* =========================================================
   BENEFIT CONTENT
========================================================= */

.c-homeCommercialFleet__benefitContent {
  display:
    flex;

  flex:
    var(--flex-auto);

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    var(--inset-0);

  color:
    inherit;

  text-align:
    center;
}

/* =========================================================
   BENEFIT TITLE
========================================================= */

.c-homeCommercialFleet__benefitTitle {
  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-card-font);

  font-size:
    var(--type-heading-card-size);

  font-weight:
    var(--type-heading-card-weight);

  line-height:
    var(--type-heading-card-leading);

  letter-spacing:
    var(--type-heading-card-tracking);

  text-transform:
    var(--type-heading-card-transform);

  text-wrap:
    balance;

  opacity:
    var(--motion-opacity-visible);

  transform:
    translateY(
      var(--motion-distance-none)
    );

  transition:
    var(--transition-interactive);
}


/* =========================================================
   BENEFIT DESCRIPTION
========================================================= */
.c-homeCommercialFleet__benefitText {
  position:
    absolute;

  inset:
    var(--space-card-padding-sm);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-sm-font);

  font-size:
    var(--type-body-sm-size);

  font-weight:
    var(--type-body-sm-weight);

  line-height:
    var(--type-body-sm-leading);

  letter-spacing:
    var(--type-body-sm-tracking);

  text-align:
    center;

  text-wrap:
    balance;

  visibility:
    hidden;

  opacity:
    var(--state-hidden-opacity);

  pointer-events:
    none;

  transform:
    translateY(
      var(--motion-distance-sm)
    );

  transition:
    var(--transition-interactive);
}

/* =========================================================
   BENEFIT HOVER STATE
========================================================= */

.c-homeCommercialFleet__benefit:hover
.c-homeCommercialFleet__benefitIcon {
  background:
    var(--surface-primary-standard);

  border-color:
    var(--border-primary-strong);

  box-shadow:
    var(--glow-primary-md);

  opacity:
    var(--state-hidden-opacity);

  transform:
    scale(
      var(--scale-down-sm)
    );
}

.c-homeCommercialFleet__benefit:hover
.c-homeCommercialFleet__benefitTitle {
  opacity:
    var(--state-hidden-opacity);

  transform:
    translateY(
      calc(
        var(--motion-distance-sm) * -1
      )
    );
}

.c-homeCommercialFleet__benefit:hover
.c-homeCommercialFleet__benefitText {
  visibility:
    visible;

  opacity:
    var(--motion-opacity-visible);

  transform:
    translateY(
      var(--motion-distance-none)
    );
}


/* =========================================================
   BENEFIT ACTIVE STATE
========================================================= */

.c-homeCommercialFleet__benefit.is-active {
  background:
    var(--surface-selected-bg);

  border-color:
    var(--surface-selected-border);

  box-shadow:
    var(--surface-selected-highlight),
    var(--surface-selected-shadow);

  color:
    var(--state-selected-text);

  transform:
    translateY(
      var(--motion-distance-none)
    );
}

.c-homeCommercialFleet__benefit.is-active
.c-homeCommercialFleet__benefitIcon {
  background:
    var(--surface-primary-standard);

  border-color:
    var(--border-primary-strong);

  box-shadow:
    var(--glow-primary-md);

  color:
    var(--state-selected-icon);

  opacity:
    var(--state-hidden-opacity);

  transform:
    scale(
      var(--scale-down-sm)
    );
}

.c-homeCommercialFleet__benefit.is-active
.c-homeCommercialFleet__benefitTitle {
  color:
    var(--fg-brand-primary);

  opacity:
    var(--state-hidden-opacity);

  transform:
    translateY(
      calc(
        var(--motion-distance-sm) * -1
      )
    );
}

.c-homeCommercialFleet__benefit.is-active
.c-homeCommercialFleet__benefitText {
  visibility:
    visible;

  color:
    var(--fg-secondary);

  opacity:
    var(--motion-opacity-visible);

  transform:
    translateY(
      var(--motion-distance-none)
    );
}



/* =========================================================
   BENEFIT DISABLED STATE
========================================================= */

.c-homeCommercialFleet__benefit.is-disabled {
  background:
    var(--state-disabled-bg);

  border-color:
    var(--state-disabled-border);

  box-shadow:
    var(--state-disabled-shadow);

  color:
    var(--state-disabled-text);

  cursor:
    var(--state-disabled-cursor);

  opacity:
    var(--state-disabled-opacity);

  pointer-events:
    none;

  transform:
    none;
}

.c-homeCommercialFleet__benefit.is-disabled
.c-homeCommercialFleet__benefitIcon {
  background:
    var(--surface-disabled-bg);

  border-color:
    var(--surface-disabled-border);

  box-shadow:
    none;

  color:
    var(--state-disabled-icon);
}
/* =========================================================
   COMMERCIAL ACTIONS
========================================================= */

.c-homeCommercialFleet__actions {
  color:
    inherit;
}

.c-homeCommercialFleet__primaryAction {
  min-height:
    var(--size-button-h-lg);

  padding:
    var(--space-button-y-lg)
    var(--space-button-x-lg);

  box-shadow:
    var(--button-primary-shadow-hover);
}

.c-homeCommercialFleet__secondaryAction {
  min-height:
    var(--size-button-h-lg);

  padding:
    var(--space-button-y-lg)
    var(--space-button-x-lg);
}


/* =========================================================
   PROOF PANEL
========================================================= */

.c-homeCommercialFleet__proof {
  padding:
    var(--space-card-padding-sm);

  background:
    var(--surface-recessed-bg);

  border:
    var(--stroke-control)
    solid
    var(--surface-recessed-border);

  border-radius:
    var(--radius-card);

  box-shadow:
    var(--surface-recessed-shadow);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-sm-font);

  font-size:
    var(--type-body-sm-size);

  font-weight:
    var(--type-body-sm-weight);

  line-height:
    var(--type-body-sm-leading);

  letter-spacing:
    var(--type-body-sm-tracking);

  text-wrap:
    pretty;
}


/* =========================================================
   COMMERCIAL GALLERY
========================================================= */

.c-homeCommercialFleet__gallery {
  position:
    relative;

  width:
    var(--content-full);

  min-width:
    var(--inset-0);

  background:
    var(--surface-level-0-bg);

  border:
    var(--stroke-control)
    solid
    var(--feature-media-border);

  border-radius:
    var(--radius-panel-raised);

  box-shadow:
    var(--feature-media-shadow);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


/* =========================================================
   GALLERY TRACK
========================================================= */

.c-homeCommercialFleet__track {
  position:
    relative;

  width:
    var(--content-full);

  height:
    var(--content-full);

  min-width:
    var(--inset-0);

  background:
    var(--media-bg-dark);

  overflow:
    hidden;
}


/* =========================================================
   GALLERY SLIDE
========================================================= */

.c-homeCommercialFleet__slide {
  position:
    absolute;

  inset:
    var(--inset-0);

  width:
    var(--content-full);

  height:
    var(--content-full);

  background:
    var(--media-bg-dark);

  opacity:
    var(--state-hidden-opacity);

  pointer-events:
    none;

  transform:
    translateX(
      var(--carousel-motion-distance)
    );

  transition:
    opacity
    var(--carousel-motion-duration)
    var(--carousel-motion-ease),
    transform
    var(--carousel-motion-duration)
    var(--carousel-motion-ease);
}

.c-homeCommercialFleet__slide.is-active {
  opacity:
    var(--motion-opacity-visible);

  pointer-events:
    auto;

  transform:
    translateX(
      var(--motion-distance-none)
    );
}

.c-homeCommercialFleet__slide.is-entering {
  opacity:
    var(--motion-opacity-visible);

  transform:
    translateX(
      var(--motion-distance-none)
    );
}

.c-homeCommercialFleet__slide.is-leaving {
  opacity:
    var(--state-hidden-opacity);

  transform:
    translateX(
      calc(
        var(--carousel-motion-distance) * -1
      )
    );
}

.c-homeCommercialFleet__slide.is-paused {
  transition-play-state:
    paused;
}


/* =========================================================
   GALLERY PICTURE
========================================================= */

.c-homeCommercialFleet__picture {
  display:
    block;

  width:
    var(--content-full);

  height:
    var(--content-full);

  aspect-ratio:
    var(--feature-media-ratio);

  overflow:
    hidden;
}


/* =========================================================
   GALLERY IMAGE
========================================================= */

.c-homeCommercialFleet__image {
  display:
    block;

  width:
    var(--content-full);

  height:
    var(--content-full);

  object-fit:
    var(--feature-media-fit);

  object-position:
    var(--feature-media-position);

  filter:
    var(--feature-media-filter);

  transform:
    scale(
      var(--scale-none)
    );

  transition:
    var(--feature-media-transition);
}

.c-homeCommercialFleet__slide.is-active
.c-homeCommercialFleet__image {
  transform:
    scale(
      var(--scale-up-xs)
    );
}


/* =========================================================
   MEDIA OVERLAY
========================================================= */

.c-homeCommercialFleet__mediaOverlay {
  position:
    absolute;

  inset:
    var(--inset-0);

  background:
    var(--feature-media-gradient),
    var(--feature-media-overlay);

  pointer-events:
    none;
}


/* =========================================================
   GALLERY CAPTION
========================================================= */

/* =========================================================
   GALLERY CAPTION
========================================================= */

.c-homeCommercialFleet__caption {
  position:
    absolute;

  inset-inline-start:
    var(--space-card-padding);

  inset-inline-end:
    var(--space-card-padding);

  inset-block-end:
    calc(
      var(--interaction-target-min)
      + var(--space-10)
    );

  display:
    grid;

  align-content:
    end;

  justify-items:
    start;

  gap:
    var(--space-1);

  max-width:
    var(--measure-wide);

  padding:
    var(--space-3)
    var(--space-4);

  background:
    var(--media-gradient-bottom-strong);

  border-radius:
    var(--radius-panel);

  color:
    var(--fg-primary);

  pointer-events:
    none;

  z-index:
    var(--layer-content);
}

.c-homeCommercialFleet__captionCategory {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--type-meta-weight);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);
}

.c-homeCommercialFleet__captionTitle {
  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-card-font);

  font-size:
    var(--type-heading-card-size);

  font-weight:
    var(--type-heading-card-weight);

  line-height:
    var(--type-heading-card-leading);

  letter-spacing:
    var(--type-heading-card-tracking);

  text-transform:
    var(--type-heading-card-transform);
}

.c-homeCommercialFleet__captionText {
  max-width:
    var(--type-body-sm-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-sm-font);

  font-size:
    var(--type-body-sm-size);

  font-weight:
    var(--type-body-sm-weight);

  line-height:
    var(--type-body-sm-leading);

  letter-spacing:
    var(--type-body-sm-tracking);

  text-wrap:
    pretty;
}

/* =========================================================
   GALLERY FOOTER
========================================================= */

.c-homeCommercialFleet__galleryFooter {
  background:
    var(--surface-level-1-bg);

  border-block-start:
    var(--divider-size-thin)
    solid
    var(--divider-default);

  box-shadow:
    var(--surface-level-1-highlight);

  color:
    var(--fg-secondary);
}


/* =========================================================
   GALLERY STATUS
========================================================= */

.c-homeCommercialFleet__galleryStatus {
  color:
    var(--fg-secondary);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--type-meta-weight);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);

  font-feature-settings:
    var(--font-feature-tabular);
}

.c-homeCommercialFleet__galleryCurrent {
  color:
    var(--fg-brand-primary);

  font-weight:
    var(--weight-bold);
}

.c-homeCommercialFleet__galleryDivider {
  color:
    var(--fg-disabled);
}

.c-homeCommercialFleet__galleryTotal {
  color:
    var(--fg-secondary);
}


/* =========================================================
   GALLERY PROGRESS
========================================================= */

.c-homeCommercialFleet__progress {
  background:
    var(--progress-track-bg);

  border:
    var(--stroke-control)
    solid
    var(--progress-track-border);

  border-radius:
    var(--progress-radius);

  overflow:
    hidden;
}

.c-homeCommercialFleet__progressItem {
  background:
    var(--surface-light-alpha-12);

  border-radius:
    var(--progress-radius);

  opacity:
    var(--state-muted-opacity);

  transition:
    var(--transition-interactive);
}

.c-homeCommercialFleet__progressItem.is-active {
  background:
    var(--progress-fill-bg);

  box-shadow:
    var(--glow-primary-sm);

  opacity:
    var(--motion-opacity-visible);
}


/* =========================================================
   GALLERY CONTROLS
========================================================= */

.c-homeCommercialFleet__galleryControl {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    var(--icon-button-size);

  min-width:
    var(--interaction-target-min);

  height:
    var(--icon-button-size);

  min-height:
    var(--interaction-target-min);

  padding:
    var(--icon-button-padding);

  background:
    var(--icon-button-bg);

  border:
    var(--stroke-control)
    solid
    var(--icon-button-border);

  border-radius:
    var(--icon-button-radius);

  box-shadow:
    var(--elevation-low);

  color:
    var(--icon-button-icon);

  cursor:
    var(--cursor-pointer);

  touch-action:
    var(--touch-action-manipulation);

  user-select:
    var(--user-select-none);

  transition:
    var(--transition-interactive);
}

.c-homeCommercialFleet__galleryControl:hover {
  background:
    var(--icon-button-bg-hover);

  border-color:
    var(--icon-button-border-hover);

  box-shadow:
    var(--elevation-default);

  color:
    var(--icon-button-icon-hover);

  transform:
    translateY(
      var(--state-hover-translate-y)
    );
}

.c-homeCommercialFleet__galleryControl:active {
  background:
    var(--icon-button-bg-active);

  box-shadow:
    var(--shadow-contact-xs);

  transform:
    scale(
      var(--state-active-scale)
    );
}

.c-homeCommercialFleet__galleryControl:focus-visible {
  outline:
    none;

  box-shadow:
    var(--focus-ring),
    var(--elevation-low);
}

.c-homeCommercialFleet__galleryControl:disabled,
.c-homeCommercialFleet__galleryControl[aria-disabled="true"] {
  background:
    var(--state-disabled-bg);

  border-color:
    var(--state-disabled-border);

  box-shadow:
    var(--state-disabled-shadow);

  color:
    var(--state-disabled-icon);

  cursor:
    var(--state-disabled-cursor);

  opacity:
    var(--state-disabled-opacity);

  pointer-events:
    none;

  transform:
    none;
}


/* =========================================================
   GALLERY CONTROL ICON
========================================================= */

.c-homeCommercialFleet__galleryControlIcon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    var(--button-icon-size);

  height:
    var(--button-icon-size);

  color:
    inherit;

  transition:
    var(--transition-interactive);
}

.c-homeCommercialFleet__galleryControl:hover
.c-homeCommercialFleet__galleryControlIcon {
  transform:
    translateX(
      var(--motion-distance-xs)
    );
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 64rem) {

  .c-homeCommercialFleet__title {
    font-size:
      var(--type-heading-section-size);
  }

  .c-homeCommercialFleet__benefit {
    padding:
      var(--space-card-padding-sm);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 48rem) {

  .c-homeCommercialFleet__benefit {
    gap:
      var(--space-3);
  }

  .c-homeCommercialFleet__benefitIcon {
    width:
      var(--space-8);

    height:
      var(--space-8);
  }

  .c-homeCommercialFleet__primaryAction,
  .c-homeCommercialFleet__secondaryAction {
    width:
      var(--content-full);
  }

  .c-homeCommercialFleet__gallery {
    border-radius:
      var(--radius-panel);
  }

  .c-homeCommercialFleet__galleryFooter {
    padding:
      var(--space-3);
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .c-homeCommercialFleet__benefit,
  .c-homeCommercialFleet__benefitIcon,
  .c-homeCommercialFleet__slide,
  .c-homeCommercialFleet__image,
  .c-homeCommercialFleet__progressItem,
  .c-homeCommercialFleet__galleryControl,
  .c-homeCommercialFleet__galleryControlIcon {
    transition:
      var(--transition-reduced);
  }

  .c-homeCommercialFleet__benefit:hover,
  .c-homeCommercialFleet__benefit:hover
  .c-homeCommercialFleet__benefitIcon,
  .c-homeCommercialFleet__slide.is-active
  .c-homeCommercialFleet__image,
  .c-homeCommercialFleet__galleryControl:hover,
  .c-homeCommercialFleet__galleryControl:active,
  .c-homeCommercialFleet__galleryControl:hover
  .c-homeCommercialFleet__galleryControlIcon {
    transform:
      none;
  }

}

/* =========================================================
   PHASE 4
   COMPONENT AUDIT + REFINEMENT
   CHUNK 5

   PARTNER DIVIDER
   FLEET SHOWCASE
========================================================= */


/* =========================================================
   01. PARTNER DIVIDER
========================================================= */


/* =========================================================
   PARTNER DIVIDER ROOT
========================================================= */

.c-partnerDivider {
  position:
    relative;

  background:
    var(--surface-level-0-bg);

  border-block:
    var(--divider-size-thin)
    solid
    var(--divider-default);

  box-shadow:
    var(--surface-level-1-highlight);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


/* =========================================================
   PARTNER DIVIDER TITLE
========================================================= */

.c-partnerDivider__title {
  margin:
    var(--inset-0);

  color:
    var(--fg-tertiary);

  font-family:
    var(--type-eyebrow-font);

  font-size:
    var(--type-eyebrow-size);

  font-weight:
    var(--type-eyebrow-weight);

  line-height:
    var(--type-eyebrow-leading);

  letter-spacing:
    var(--type-eyebrow-tracking);

  text-align:
    center;

  text-transform:
    var(--type-eyebrow-transform);

  text-wrap:
    balance;

  opacity:
    var(--state-hidden-opacity);

  transform:
    translateY(
      var(--motion-distance-sm)
    );

  transition:
    opacity
    var(--motion-reveal-duration)
    var(--motion-reveal-ease),
    transform
    var(--motion-reveal-duration)
    var(--motion-reveal-ease);
}


/* =========================================================
   PARTNER ORBIT
========================================================= */

.c-partnerDivider__orbit {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  align-items:
    center;

  justify-items:
    center;

  width:
    var(--content-full);

  min-width:
    var(--inset-0);

  gap:
    var(--gap-grid-feature);

  color:
    inherit;
}

.c-partnerDivider__partner,
.c-partnerDivider__center {
  width:
    var(--content-full);

  min-width:
    var(--inset-0);
}
/* =========================================================
   PARTNER ITEM
========================================================= */

.c-partnerDivider__partner {
  position:
    relative;

  color:
    var(--fg-secondary);

  opacity:
    var(--state-hidden-opacity);

  transform:
    translateY(
      var(--motion-distance-sm)
    );

  transition:
    opacity
    var(--motion-reveal-duration)
    var(--motion-reveal-ease),
    transform
    var(--motion-reveal-duration)
    var(--motion-reveal-ease),
    filter
    var(--duration-md)
    var(--ease-standard);
}


/* =========================================================
   PARTNER LINK
========================================================= */
.c-partnerDivider__partnerLink {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    var(--media-size-logo-sm);

  max-width:
    var(--content-full);

  height:
    var(--space-9);

  margin-inline:
    auto;

  padding:
    var(--space-2);

  background:
    transparent;

  border:
    var(--stroke-0)
    solid
    transparent;

  border-radius:
    var(--radius-control-lg);

  color:
    inherit;

  text-decoration:
    var(--decoration-none);

  cursor:
    var(--cursor-pointer);

  touch-action:
    var(--touch-action-manipulation);

  overflow:
    hidden;

  transition:
    var(--transition-interactive);
}

.c-partnerDivider__partnerLink:hover {
  background:
    var(--surface-light-alpha-08);

  transform:
    translateY(
      var(--state-hover-translate-y)
    );
}

.c-partnerDivider__partnerLink:active {
  background:
    var(--surface-light-alpha-08);

  transform:
    translateY(
      var(--state-active-translate-y)
    )
    scale(
      var(--state-active-scale)
    );
}

.c-partnerDivider__partnerLink:focus-visible {
  outline:
    none;

  box-shadow:
    var(--focus-ring);
}


.c-partnerDivider__partnerLogo {
  display:
    block;

  width:
    var(--content-full);

  height:
    var(--content-full);

  max-width:
    var(--content-full);

  max-height:
    var(--content-full);

  object-fit:
    var(--media-fit-contain);

  object-position:
    center;

  filter:
    var(--logo-media-filter);

  opacity:
    var(--motion-opacity-visible);

  transform:
    scale(
      var(--scale-none)
    );

  transition:
    var(--media-transition-complete);
}



.c-partnerDivider__partnerLink:hover
.c-partnerDivider__partnerLogo {
  filter:
    var(--logo-media-filter);

  opacity:
    var(--motion-opacity-visible);

  transform:
    scale(
      var(--scale-up-xs)
    );
}


/* =========================================================
   PARTNER NAME
========================================================= */

.c-partnerDivider__partnerName {
  color:
    var(--fg-tertiary);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--type-meta-weight);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-align:
    center;

  text-transform:
    var(--type-meta-transform);
}


/* =========================================================
   CENTER BRAND REGION
========================================================= */

.c-partnerDivider__center {
  position:
    relative;

  color:
    var(--fg-primary);
}


/* =========================================================
   CENTER BRAND
========================================================= */

.c-partnerDivider__brand {
  position:
    relative;

  padding:
    var(--inset-0);

  background:
    transparent;

  border:
    var(--stroke-0)
    solid
    transparent;

  border-radius:
    var(--radius-none);

  box-shadow:
    none;

  opacity:
    var(--motion-opacity-visible);

  transform:
    scale(
      var(--scale-none)
    );

  transition:
    opacity
    var(--motion-scale-duration)
    var(--motion-scale-ease),
    transform
    var(--motion-scale-duration)
    var(--motion-scale-ease);
}


/* =========================================================
   CENTER BRAND LINK
========================================================= */

.c-partnerDivider__brandLink {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    inherit;

  text-decoration:
    var(--decoration-none);

  cursor:
    var(--cursor-pointer);

  touch-action:
    var(--touch-action-manipulation);
}

.c-partnerDivider__brandLink:focus-visible {
  border-radius:
    var(--radius-control-lg);

  outline:
    none;

  box-shadow:
    var(--focus-ring);
}


/* =========================================================
   CENTER BRAND LOGO
========================================================= */

.c-partnerDivider__brandLogo {
  display:
    block;

  width:
    var(--content-full);

  max-width:
    var(--media-size-md);

  max-height:
    var(--media-size-sm);

  object-fit:
    var(--logo-media-fit);

  object-position:
    var(--logo-media-position);

  filter:
    var(--logo-media-filter);

  transform:
    scale(
      var(--scale-none)
    );

  transition:
    var(--media-transition-complete);
}

.c-partnerDivider__brandLink:hover
.c-partnerDivider__brandLogo {
  transform:
    scale(
      var(--scale-up-xs)
    );
}


/* =========================================================
   PARTNER DIVIDER REVEAL STATES
========================================================= */

.c-partnerDivider.is-loaded
.c-partnerDivider__title {
  opacity:
    var(--motion-opacity-visible);

  transform:
    translateY(
      var(--motion-distance-none)
    );
}
.c-partnerDivider__brand.is-active {
  background:
    transparent;

  border-color:
    transparent;

  box-shadow:
    none;

  opacity:
    var(--motion-opacity-visible);

  transform:
    scale(
      var(--scale-none)
    );
}

.c-partnerDivider__partner.is-active {
  opacity:
    var(--motion-opacity-visible);

  transform:
    translateY(
      var(--motion-distance-none)
    );
}


/* =========================================================
   02. FLEET SHOWCASE
========================================================= */


/* =========================================================
   FLEET SHOWCASE ROOT
========================================================= */

.c-fleetShowcase {
  position:
    relative;

  background:
    var(--background-gradient-surface);

  border-block:
    var(--divider-size-thin)
    solid
    var(--divider-default);

  color:
    var(--fg-primary);

  overflow:
    var(--overflow-hidden);

  isolation:
    isolate;
}


/* =========================================================
   FLEET SHOWCASE HEADER
========================================================= */

.c-fleetShowcase__header {
  position:
    relative;

  color:
    var(--fg-primary);

  text-align:
    center;
}


/* =========================================================
   FLEET SHOWCASE EYEBROW
========================================================= */

.c-fleetShowcase__eyebrow {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-eyebrow-font);

  font-size:
    var(--type-eyebrow-size);

  font-weight:
    var(--type-eyebrow-weight);

  line-height:
    var(--type-eyebrow-leading);

  letter-spacing:
    var(--type-eyebrow-tracking);

  text-transform:
    var(--type-eyebrow-transform);

  text-wrap:
    balance;
}


/* =========================================================
   FLEET SHOWCASE TITLE
========================================================= */

.c-fleetShowcase__title {
  max-width:
    var(--type-heading-feature-measure);

  margin:
    var(--inset-0)
    auto;

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-feature-font);

  font-size:
    var(--type-heading-feature-size);

  font-weight:
    var(--type-heading-feature-weight);

  line-height:
    var(--type-heading-feature-leading);

  letter-spacing:
    var(--type-heading-feature-tracking);

  text-align:
    center;

  text-transform:
    var(--type-heading-feature-transform);

  text-wrap:
    balance;
}


/* =========================================================
   FLEET SHOWCASE STAGE
========================================================= */

.c-fleetShowcase__stage {
  position:
    relative;

  color:
    var(--fg-primary);
}


/* =========================================================
   FLEET CALLOUT CARD
========================================================= */

.c-fleetCallout {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  width:
    var(--content-full);

  min-width:
    var(--inset-0);

  height:
    var(--content-full);

  padding:
    var(--space-card-padding-sm);

  gap:
    var(--space-stack-gap-compact);

  background:
    var(--surface-card-bg);

  border:
    var(--stroke-control)
    solid
    var(--surface-card-border);

  border-radius:
    var(--radius-card-raised);

  box-shadow:
    var(--surface-card-highlight),
    var(--surface-card-shadow);

  color:
    var(--fg-primary);

  overflow:
    var(--overflow-hidden);

  isolation:
    isolate;

  transition:
    var(--transition-interactive);
}

.c-fleetCallout:hover {
  background:
    var(--surface-card-raised-bg);

  border-color:
    var(--surface-card-raised-border);

  box-shadow:
    var(--surface-card-raised-highlight),
    var(--surface-card-raised-shadow);

  transform:
    translateY(
      var(--state-hover-translate-y)
    );
}


/* =========================================================
   FLEET CALLOUT IDENTITIES
========================================================= */

.c-fleetCallout--rh01,
.c-fleetCallout--rh02 {
  border-block-start:
    var(--rail-size-lg)
    solid
    var(--rail-primary);
}

.c-fleetCallout--rht01,
.c-fleetCallout--rht02 {
  border-block-start:
    var(--rail-size-lg)
    solid
    var(--rail-accent);
}


/* =========================================================
   FLEET NAME
========================================================= */

.c-fleetCallout__name {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    var(--control-h-sm);

  margin:
    var(--inset-0);

  gap:
    var(--space-inline-gap-sm);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-card-font);

  font-size:
    var(--type-heading-card-size);

  font-weight:
    var(--type-heading-card-weight);

  line-height:
    var(--type-heading-card-leading);

  letter-spacing:
    var(--type-heading-card-tracking);

  text-align:
    center;

  text-transform:
    var(--type-heading-card-transform);

  text-wrap:
    balance;
}


/* =========================================================
   FLEET ID
========================================================= */

.c-fleetCallout__id {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    var(--flex-fixed);

  min-height:
    var(--chip-h);

  padding-inline:
    var(--chip-padding-x);

  gap:
    var(--chip-gap);

  background:
    var(--chip-bg-selected);

  border:
    var(--stroke-control)
    solid
    var(--chip-border-selected);

  border-radius:
    var(--chip-radius);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--weight-bold);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);

  white-space:
    nowrap;
}


/* =========================================================
   FLEET FIGURE
========================================================= */

.c-fleetShowcase__figure {
  position:
    relative;

  width:
    var(--content-full);

  min-width:
    var(--inset-0);

  margin:
    var(--inset-0);

  background:
    var(--media-bg-dark);

  border-radius:
    var(--vehicle-media-radius);

  color:
    var(--fg-primary);

  overflow:
    var(--overflow-hidden);

  isolation:
    isolate;
}


/* =========================================================
   FLEET MEDIA
========================================================= */

.c-fleetShowcase__media {
  position:
    relative;

  width:
    var(--content-full);

  min-width:
    var(--inset-0);

  aspect-ratio:
    var(--vehicle-media-ratio);

  background:
    var(--media-bg-dark);

  overflow:
    var(--overflow-hidden);
}


/* =========================================================
   FLEET IMAGE
========================================================= */

.c-fleetShowcase__image {
  display:
    block;

  width:
    var(--content-full);

  height:
    var(--content-full);

  object-fit:
    var(--vehicle-media-fit);

  object-position:
    var(--vehicle-media-position);

  filter:
    var(--vehicle-media-filter);

  transform:
    scale(
      var(--scale-none)
    );

  transition:
    var(--media-transition-complete);
}

.c-fleetShowcase__figure:hover
.c-fleetShowcase__image {
  filter:
    var(--media-filter-gallery-hover);

  transform:
    scale(
      var(--media-scale-hover)
    );
}


/* =========================================================
   FLEET ROLE
========================================================= */

.c-fleetCallout__role {
  max-width:
    var(--type-body-sm-measure);

  margin:
    var(--inset-0)
    auto;

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-sm-font);

  font-size:
    var(--type-body-sm-size);

  font-weight:
    var(--type-body-sm-weight);

  line-height:
    var(--type-body-sm-leading);

  letter-spacing:
    var(--type-body-sm-tracking);

  text-align:
    center;

  text-wrap:
    pretty;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 64rem) {

  .c-fleetShowcase__title {
    font-size:
      var(--type-heading-section-size);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 48rem) {

  .c-fleetCallout {
    padding:
      var(--space-card-padding-sm);

    border-radius:
      var(--radius-card);
  }

  .c-fleetCallout__name {
    font-size:
      var(--type-heading-card-size);
  }

  .c-fleetShowcase__figure {
    border-radius:
      var(--media-radius-lg);
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .c-fleetCallout,
  .c-fleetShowcase__image {
    transition:
      var(--transition-reduced);
  }

  .c-fleetCallout:hover,
  .c-fleetShowcase__figure:hover
  .c-fleetShowcase__image {
    transform:
      none;
  }

}



/* =========================================================
   REVIEWS + FAQ ROOT
========================================================= */

.c-reviewsFaq {
  position:
    relative;

  background:
    var(--background-gradient-dark);

  border-block:
    var(--divider-size-thin)
    solid
    var(--divider-default);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


/* =========================================================
   SECTION EYEBROW
========================================================= */

.c-reviewsFaq__eyebrow {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-eyebrow-font);

  font-size:
    var(--type-eyebrow-size);

  font-weight:
    var(--type-eyebrow-weight);

  line-height:
    var(--type-eyebrow-leading);

  letter-spacing:
    var(--type-eyebrow-tracking);

  text-transform:
    var(--type-eyebrow-transform);
}


/* =========================================================
   SECTION TITLE
========================================================= */

.c-reviewsFaq__title {
  max-width:
    var(--type-heading-feature-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-feature-font);

  font-size:
    var(--type-heading-feature-size);

  font-weight:
    var(--type-heading-feature-weight);

  line-height:
    var(--type-heading-feature-leading);

  letter-spacing:
    var(--type-heading-feature-tracking);

  text-transform:
    var(--type-heading-feature-transform);

  text-wrap:
    balance;
}


/* =========================================================
   REVIEWS REGION
========================================================= */

.c-reviewsFaq__reviews {
  position:
    relative;

  padding:
    var(--space-panel-padding);

  background:
    var(--surface-panel-bg);

  border:
    var(--stroke-control)
    solid
    var(--surface-panel-border);

  border-radius:
    var(--radius-panel-raised);

  box-shadow:
    var(--surface-panel-highlight),
    var(--surface-panel-shadow);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


/* =========================================================
   REVIEWS TITLE
========================================================= */

.c-reviewsFaq__reviewsTitle {
  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-section-font);

  font-size:
    var(--type-heading-section-size);

  font-weight:
    var(--type-heading-section-weight);

  line-height:
    var(--type-heading-section-leading);

  letter-spacing:
    var(--type-heading-section-tracking);

  text-transform:
    var(--type-heading-section-transform);

  text-wrap:
    balance;
}



/* =========================================================
   REVIEW CARD
========================================================= */

.c-reviewCard {
  position:
    relative;

  display:
    none;

  width:
    var(--content-full);

  min-width:
    var(--inset-0);

  padding:
    var(--space-card-padding);

  background:
    var(--surface-card-bg);

  border:
    var(--stroke-control)
    solid
    var(--surface-card-border);

  border-radius:
    var(--radius-card-raised);

  box-shadow:
    var(--surface-card-highlight),
    var(--surface-card-shadow);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;

  transition:
    var(--transition-interactive);
}

.c-reviewCard:hover {
  background:
    var(--surface-card-raised-bg);

  border-color:
    var(--surface-card-raised-border);

  box-shadow:
    var(--surface-card-raised-highlight),
    var(--surface-card-raised-shadow);

  transform:
    translateY(
      var(--state-hover-translate-y)
    );
}



.c-reviewCard.is-current {
  display:
    block;
}


/* =========================================================
   REVIEWS SUMMARY
========================================================= */

.c-reviewsFaq__reviewsSummary {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    var(--space-inline-gap-sm);

  color:
    var(--fg-secondary);
}

.c-reviewsFaq__reviewsAverage {
  color:
    var(--fg-primary);

  font-family:
    var(--type-stat-sm-font);

  font-size:
    var(--type-stat-sm-size);

  font-weight:
    var(--type-stat-sm-weight);

  line-height:
    var(--type-stat-sm-leading);

  letter-spacing:
    var(--type-stat-sm-tracking);

  font-feature-settings:
    var(--type-stat-sm-feature);
}

.c-reviewsFaq__reviewsCount {
  color:
    var(--fg-tertiary);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--type-meta-weight);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);
}


/* =========================================================
   REVIEW CONTROLS
========================================================= */

.c-reviewControls {
  color:
    var(--fg-secondary);
}

.c-reviewControls__button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    var(--icon-button-size);

  min-width:
    var(--interaction-target-min);

  height:
    var(--icon-button-size);

  min-height:
    var(--interaction-target-min);

  padding:
    var(--icon-button-padding);

  background:
    var(--icon-button-bg);

  border:
    var(--stroke-control)
    solid
    var(--border-default);

  border-radius:
    var(--icon-button-radius);

  box-shadow:
    var(--elevation-low);

  color:
    var(--icon-button-icon);

  cursor:
    var(--cursor-pointer);

  touch-action:
    var(--touch-action-manipulation);

  user-select:
    var(--user-select-none);

  transition:
    var(--transition-interactive);
}

.c-reviewControls__button:hover {
  background:
    var(--surface-primary-subtle);

  border-color:
    var(--border-primary-strong);

  box-shadow:
    var(--glow-primary-sm),
    var(--elevation-default);

  color:
    var(--fg-brand-primary);

  transform:
    translateY(
      var(--state-hover-translate-y)
    );
}

.c-reviewControls__button:active {
  background:
    var(--surface-primary-standard);

  box-shadow:
    var(--shadow-contact-xs);

  transform:
    translateY(
      var(--state-active-translate-y)
    )
    scale(
      var(--state-active-scale)
    );
}

.c-reviewControls__button:focus-visible {
  outline:
    none;

  box-shadow:
    var(--focus-ring),
    var(--elevation-low);
}

.c-reviewControls__button--previous,
.c-reviewControls__button--next {
  color:
    inherit;
}

.c-reviewControls__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    var(--button-icon-size);

  height:
    var(--button-icon-size);

  color:
    inherit;
}

.c-reviewControls__pagination {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    var(--space-inline-gap-xs);
}

.c-reviewControls__dot {
  width:
    var(--space-2);

  height:
    var(--space-2);

  padding:
    var(--inset-0);

  background:
    var(--surface-light-alpha-12);

  border:
    var(--stroke-control)
    solid
    var(--border-default);

  border-radius:
    var(--radius-round);

  cursor:
    var(--cursor-pointer);

  transition:
    var(--transition-interactive);
}

.c-reviewControls__dot:hover {
  background:
    var(--surface-primary-muted);

  border-color:
    var(--border-primary);
}

.c-reviewControls__dot.is-current {
  background:
    var(--brand-primary);

  border-color:
    var(--border-primary-solid);

  box-shadow:
    var(--glow-primary-sm);

  transform:
    scale(
      var(--scale-up-sm)
    );
}

.c-reviewControls__dot:focus-visible {
  outline:
    none;

  box-shadow:
    var(--focus-ring);
}


/* =========================================================
   REVIEW CARD HEADER
========================================================= */

.c-reviewCard__header {
  padding-block-end:
    var(--space-card-gap);

  border-block-end:
    var(--divider-size-thin)
    solid
    var(--divider-default);

  color:
    inherit;
}


/* =========================================================
   REVIEW RATING
========================================================= */

.c-reviewCard__rating {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    var(--space-inline-gap-xs);

  color:
    var(--fg-brand-primary);
}


/* =========================================================
   REVIEW STARS
========================================================= */

.c-reviewCard__stars {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    var(--space-inline-gap-xs);

  color:
    var(--fg-brand-primary);

  line-height:
    var(--lh-none);
}

.c-reviewCard__star {
  display:
    inline-block;

  color:
    inherit;

  font-size:
    var(--text-lg);

  line-height:
    var(--lh-none);

  text-shadow:
    var(--glow-primary-sm);
}


/* =========================================================
   REVIEW SOURCE
========================================================= */

.c-reviewCard__source {
  color:
    var(--fg-tertiary);

  font-family:
    var(--type-meta-font);

font-size:
  var(--type-label-size);

  font-weight:
    var(--type-meta-weight);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);
}


/* =========================================================
   REVIEW QUOTE
========================================================= */

.c-reviewCard__quote {
  max-width:
    var(--type-quote-measure);

  margin:
    var(--inset-0);

  padding-block:
    var(--space-card-gap);

  color:
    var(--fg-primary);

  font-family:
    var(--type-quote-font);

 font-size:
  var(--type-heading-card-size);

  font-weight:
    var(--type-quote-weight);

  line-height:
    var(--type-quote-leading);

  letter-spacing:
    var(--type-quote-tracking);

  text-wrap:
    pretty;
}


/* =========================================================
   REVIEW FOOTER
========================================================= */

.c-reviewCard__footer {
  padding-block-start:
    var(--space-card-gap);

  border-block-start:
    var(--divider-size-thin)
    solid
    var(--divider-default);

  color:
    var(--fg-secondary);
}


/* =========================================================
   REVIEW AUTHOR
========================================================= */

.c-reviewCard__author {
  color:
    inherit;
}

.c-reviewCard__authorName {
  display:
    block;

  color:
    var(--fg-primary);

  font-family:
    var(--type-label-font);

font-size:
  var(--type-control-size);

  font-weight:
    var(--weight-bold);

  line-height:
    var(--type-label-leading);

  letter-spacing:
    var(--type-label-tracking);

  text-transform:
    var(--type-label-transform);
}


/* =========================================================
   REVIEW AUTHOR META
========================================================= */

.c-reviewCard__authorMeta {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    var(--space-inline-gap-sm);

  margin-block-start:
    var(--space-2);

  color:
    var(--fg-tertiary);

  font-family:
    var(--type-meta-font);

font-size:
  var(--type-label-size);

  font-weight:
    var(--type-meta-weight);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);
}

.c-reviewCard__jobType {
  color:
    var(--fg-brand-primary);
}

.c-reviewCard__date {
  color:
    var(--fg-tertiary);
}


/* =========================================================
   FAQ REGION
========================================================= */

.c-reviewsFaq__faq {
  position:
    relative;

  padding:
    var(--space-panel-padding);

  background:
    var(--surface-level-1-bg);

  border:
    var(--stroke-control)
    solid
    var(--surface-level-1-border);

  border-radius:
    var(--radius-panel-raised);

  box-shadow:
    var(--surface-level-1-highlight),
    var(--surface-level-1-shadow);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


/* =========================================================
   FAQ TITLE
========================================================= */

.c-reviewsFaq__faqTitle {
  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-section-font);

  font-size:
    var(--type-heading-section-size);

  font-weight:
    var(--type-heading-section-weight);

  line-height:
    var(--type-heading-section-leading);

  letter-spacing:
    var(--type-heading-section-tracking);

  text-transform:
    var(--type-heading-section-transform);

  text-wrap:
    balance;
}


/* =========================================================
   FAQ INTRO
========================================================= */

.c-reviewsFaq__faqIntro {
  max-width:
    var(--type-body-lg-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-font);

  font-size:
    var(--type-body-size);

  font-weight:
    var(--type-body-weight);

  line-height:
    var(--type-body-leading);

  letter-spacing:
    var(--type-body-tracking);

  text-wrap:
    pretty;
}


/* =========================================================
   FAQ ROOT
========================================================= */

.c-faq {
  color:
    var(--fg-primary);
}


/* =========================================================
   FAQ ITEM
========================================================= */

.c-faq__item {
  position:
    relative;

  background:
    var(--surface-card-bg);

  border:
    var(--stroke-control)
    solid
    var(--surface-card-border);

  border-radius:
    var(--radius-card);

  box-shadow:
    var(--surface-card-highlight),
    var(--surface-card-shadow);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  transition:
    var(--transition-surface);
}

.c-faq__item:hover {
  border-color:
    var(--border-emphasis);
}

.c-faq__item.is-open {
  background:
    var(--state-expanded-bg);

  border-color:
    var(--state-expanded-border);

  box-shadow:
    var(--surface-panel-raised-highlight),
    var(--state-expanded-shadow);
}


/* =========================================================
   FAQ QUESTION
========================================================= */

.c-faq__question {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  width:
    var(--content-full);

  min-height:
    var(--interaction-target-comfortable);

  padding:
    var(--space-card-padding-sm);

  gap:
    var(--space-inline-gap);

  background:
    var(--background-transparent);

  border:
    var(--stroke-0)
    solid
    transparent;

  color:
    var(--fg-primary);

  font-family:
    var(--type-label-font);

  font-size:
    var(--type-control-size);

  font-weight:
    var(--weight-bold);

  line-height:
    var(--type-label-leading);

  letter-spacing:
    var(--type-label-tracking);

  text-align:
    left;

  text-transform:
    var(--type-label-transform);

  cursor:
    var(--cursor-pointer);

  touch-action:
    var(--touch-action-manipulation);

  user-select:
    var(--user-select-none);

  transition:
    var(--transition-interactive);
}

.c-faq__question:hover {
  background:
    var(--surface-light-alpha-04);

  color:
    var(--fg-brand-primary);
}

.c-faq__question:focus-visible {
  outline:
    none;

  box-shadow:
    inset
    var(--focus-ring);
}

.c-faq__item.is-open
.c-faq__question {
  background:
    var(--surface-primary-subtle);

  color:
    var(--state-expanded-icon);
}



/* =========================================================
   FAQ QUESTION TEXT
========================================================= */

.c-faq__questionText {
  color:
    inherit;

  text-align:
    left;

  text-wrap:
    pretty;
}


/* =========================================================
   FAQ ICON
========================================================= */

.c-faq__icon {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    var(--flex-fixed);

  width:
    var(--button-icon-size);

  height:
    var(--button-icon-size);

  color:
    var(--fg-brand-primary);

  transform:
    rotate(
      var(--motion-rotate-none)
    );

  transition:
    var(--accordion-icon-motion);
}

.c-faq__item.is-open
.c-faq__icon {
  transform:
    rotate(
      var(--state-expanded-icon-rotation)
    );
}


/* =========================================================
   FAQ ANSWER
========================================================= */

.c-faq__answer {
  max-height:
    var(--inset-0);

  padding-inline:
    var(--space-card-padding-sm);

  background:
    var(--surface-recessed-bg);

  border-block-start:
    var(--divider-size-thin)
    solid
    transparent;

  color:
    var(--fg-secondary);

  opacity:
    var(--state-hidden-opacity);

  overflow:
    hidden;

  transition:
    var(--transition-collapse);
}

.c-faq__item.is-open
.c-faq__answer {
  max-height:
    var(--dimension-540);

  padding-block:
    var(--space-card-padding-sm);

  border-block-start-color:
    var(--divider-default);

  opacity:
    var(--motion-opacity-visible);
}


/* =========================================================
   FAQ ANSWER TEXT
========================================================= */

.c-faq__answerInner {
  max-width:
    var(--type-body-measure);

  margin:
    var(--inset-0);

  color:
    inherit;

  font-family:
    var(--type-body-font);

  font-size:
    var(--type-body-size);

  font-weight:
    var(--type-body-weight);

  line-height:
    var(--type-body-leading);

  letter-spacing:
    var(--type-body-tracking);

  text-wrap:
    pretty;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 64rem) {

  .c-reviewsFaq__title {
    font-size:
      var(--type-heading-section-size);
  }

  .c-reviewsFaq__reviews,
  .c-reviewsFaq__faq {
    padding:
      var(--space-card-padding);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 48rem) {

  .c-reviewsFaq__reviews,
  .c-reviewsFaq__faq {
    padding:
      var(--space-card-padding-sm);

    border-radius:
      var(--radius-panel);
  }

  .c-reviewsFaq__reviewsTitle,
  .c-reviewsFaq__faqTitle {
    font-size:
      var(--type-heading-card-size);
  }

  .c-reviewCard {
    padding:
      var(--space-card-padding-sm);

    border-radius:
      var(--radius-card);
  }

  .c-reviewCard__quote {
    font-size:
      var(--type-body-lg-size);
  }

  .c-reviewCard__authorMeta {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .c-faq__question {
    align-items:
      flex-start;

    padding:
      var(--space-4);
  }

  .c-faq__answer {
    padding-inline:
      var(--space-4);
  }

  .c-faq__item.is-open
  .c-faq__answer {
    padding-block:
      var(--space-4);
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .c-reviewCard,
  .c-reviewControls__button,
  .c-reviewControls__dot,
  .c-faq__item,
  .c-faq__question,
  .c-faq__icon,
  .c-faq__answer {
    transition:
      var(--transition-reduced);
  }

  .c-reviewCard:hover,
  .c-reviewControls__button:hover,
  .c-reviewControls__button:active,
  .c-reviewControls__dot.is-current,
  .c-faq__icon,
  .c-faq__item.is-open
  .c-faq__icon {
    transform:
      none;
  }

}
/* =========================================================
   PHASE 4
   COMPONENT AUDIT + REFINEMENT
   CHUNK 7

   FINAL CTA
   SITE FOOTER
========================================================= */


/* =========================================================
   01. FINAL CALL TO ACTION
========================================================= */


/* =========================================================
   FINAL CTA ROOT
========================================================= */

.c-homeFinalCta {
  position:
    relative;

  background:
    var(--background-gradient-primary);

  border-block:
    var(--divider-size-thin)
    solid
    var(--border-primary);

  box-shadow:
    var(--surface-section-shadow),
    var(--glow-primary-sm);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


/* =========================================================
   FINAL CTA INNER
========================================================= */

.c-homeFinalCta__inner {
  position:
    relative;

  color:
    inherit;

  isolation:
    isolate;
}


/* =========================================================
   FINAL CTA BACKGROUND
========================================================= */

.c-homeFinalCta__background {
  position:
    absolute;

  inset:
    var(--inset-0);

  background:
    var(--aura-feature-image),
    var(--texture-feature-image);

  background-position:
    var(--aura-feature-position),
    var(--texture-feature-position);

  background-repeat:
    var(--aura-feature-repeat),
    var(--background-repeat-all);

  background-size:
    var(--aura-feature-size),
    var(--texture-feature-size);

  opacity:
    var(--state-muted-opacity);

  pointer-events:
    none;

  z-index:
    var(--layer-base);
}


/* =========================================================
   FINAL CTA CONTENT
========================================================= */

.c-homeFinalCta__content {
  position:
    relative;

  padding:
    var(--space-panel-padding);

  background:
    var(--surface-glass-strong-bg);

  border:
    var(--stroke-control)
    solid
    var(--surface-glass-strong-border);

  border-radius:
    var(--radius-panel-raised);

  box-shadow:
    var(--surface-glass-strong-highlight),
    var(--surface-glass-strong-shadow),
    var(--glow-primary-sm);

  color:
    var(--fg-primary);

  text-align:
    center;

  backdrop-filter:
    blur(
      var(--glass-strong-blur)
    );

  overflow:
    hidden;

  isolation:
    isolate;

  z-index:
    var(--layer-content);
}


/* =========================================================
   FINAL CTA EYEBROW
========================================================= */

.c-homeFinalCta__eyebrow {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-eyebrow-font);

  font-size:
    var(--type-eyebrow-size);

  font-weight:
    var(--type-eyebrow-weight);

  line-height:
    var(--type-eyebrow-leading);

  letter-spacing:
    var(--type-eyebrow-tracking);

  text-transform:
    var(--type-eyebrow-transform);

  text-wrap:
    balance;
}


/* =========================================================
   FINAL CTA TITLE
========================================================= */

.c-homeFinalCta__title {
  max-width:
    var(--type-heading-feature-measure);

  margin:
    var(--inset-0)
    auto;

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-feature-font);

  font-size:
    var(--type-heading-feature-size);

  font-weight:
    var(--type-heading-feature-weight);

  line-height:
    var(--type-heading-feature-leading);

  letter-spacing:
    var(--type-heading-feature-tracking);

  text-transform:
    var(--type-heading-feature-transform);

  text-wrap:
    balance;
}


/* =========================================================
   FINAL CTA ACTIONS
========================================================= */

.c-homeFinalCta__actions {
  color:
    inherit;
}


/* =========================================================
   FINAL CTA TRUST ROW
========================================================= */

.c-homeFinalCta__trust {
  padding-block-start:
    var(--space-panel-gap);

  border-block-start:
    var(--divider-size-thin)
    solid
    var(--divider-primary);

  color:
    var(--fg-secondary);
}


/* =========================================================
   FINAL CTA TRUST ITEM
========================================================= */

.c-homeFinalCta__trustItem {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    var(--interaction-target-min);

  padding-inline:
    var(--chip-padding-x);

  gap:
    var(--chip-gap);

  background:
    var(--surface-primary-subtle);

  border:
    var(--stroke-control)
    solid
    var(--border-primary);

  border-radius:
    var(--chip-radius);

  box-shadow:
    var(--glow-primary-sm);

  color:
    var(--fg-primary);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--weight-semibold);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);

  white-space:
    nowrap;
}


/* =========================================================
   02. SITE FOOTER
========================================================= */


/* =========================================================
   SITE FOOTER ROOT
========================================================= */

.c-siteFooter {
  position:
    relative;

  background:
    var(--surface-level-0-bg);

  border-block-start:
    var(--divider-size-standard)
    solid
    var(--border-primary);

  box-shadow:
    var(--glow-primary-sm);

  color:
    var(--fg-secondary);

  overflow:
    hidden;

  isolation:
    isolate;
}


/* =========================================================
   FOOTER SECTION
========================================================= */

.c-siteFooter__section {
  min-width:
    var(--inset-0);

  color:
    inherit;
}


/* =========================================================
   FOOTER TEXT
========================================================= */

.c-siteFooter__text {
  max-width:
    var(--type-body-sm-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-sm-font);

  font-size:
    var(--type-body-sm-size);

  font-weight:
    var(--type-body-sm-weight);

  line-height:
    var(--type-body-sm-leading);

  letter-spacing:
    var(--type-body-sm-tracking);

  text-wrap:
    pretty;
}


/* =========================================================
   FOOTER SOCIAL LINKS
========================================================= */

.c-siteFooter__social {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    var(--space-inline-gap-sm);

  color:
    var(--fg-secondary);
}


/* =========================================================
   FOOTER SOCIAL LINK
========================================================= */
.c-siteFooter__socialLink {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    var(--icon-container-sm);

  min-width:
    var(--interaction-target-min);

  height:
    var(--icon-container-sm);

  min-height:
    var(--interaction-target-min);

  padding:
    var(--icon-button-padding);

  background:
    var(--icon-button-bg);

  border:
    var(--stroke-control)
    solid
    var(--border-default);

  border-radius:
    var(--icon-button-radius);

  box-shadow:
    var(--elevation-low);

  color:
    var(--icon-button-icon);

  text-decoration:
    var(--decoration-none);

  cursor:
    var(--cursor-pointer);

  touch-action:
    var(--touch-action-manipulation);

  user-select:
    var(--user-select-none);

  transition:
    var(--transition-interactive);
}

.c-siteFooter__socialLink:hover {
  background:
    var(--surface-primary-subtle);

  border-color:
    var(--border-primary-strong);

  box-shadow:
    var(--glow-primary-sm),
    var(--elevation-default);

  color:
    var(--fg-brand-primary);

  transform:
    translateY(
      var(--state-hover-translate-y)
    );
}

.c-siteFooter__socialLink:active {
  background:
    var(--surface-primary-standard);

  box-shadow:
    var(--shadow-contact-xs);

  transform:
    translateY(
      var(--state-active-translate-y)
    )
    scale(
      var(--state-active-scale)
    );
}

.c-siteFooter__socialLink:focus-visible {
  outline:
    none;

  box-shadow:
    var(--focus-ring),
    var(--elevation-low);
}


/* =========================================================
   FOOTER HEADING
========================================================= */

.c-siteFooter__heading {
  margin:
    var(--inset-0);

  padding-block-end:
    var(--space-3);

  border-block-end:
    var(--divider-size-thin)
    solid
    var(--divider-primary);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-card-font);

  font-size:
    var(--type-heading-card-size);

  font-weight:
    var(--type-heading-card-weight);

  line-height:
    var(--type-heading-card-leading);

  letter-spacing:
    var(--type-heading-card-tracking);

  text-transform:
    var(--type-heading-card-transform);

  text-wrap:
    balance;
}


/* =========================================================
   FOOTER NAVIGATION
========================================================= */

.c-siteFooter__nav {
  color:
    inherit;
}


/* =========================================================
   FOOTER LIST
========================================================= */

.c-siteFooter__list {
  margin:
    var(--inset-0);

  padding:
    var(--inset-0);

  list-style:
    none;
}


/* =========================================================
   FOOTER ITEM
========================================================= */

.c-siteFooter__item {
  min-width:
    var(--inset-0);

  color:
    inherit;
}


/* =========================================================
   FOOTER LINK
========================================================= */

.c-siteFooter__link {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  min-height:
    var(--interaction-target-min);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-sm-font);

  font-size:
    var(--type-body-sm-size);

  font-weight:
    var(--weight-medium);

  line-height:
    var(--type-body-sm-leading);

  letter-spacing:
    var(--type-body-sm-tracking);

  text-decoration:
    var(--decoration-none);

  cursor:
    var(--cursor-pointer);

  touch-action:
    var(--touch-action-manipulation);

  transition:
    var(--transition-interactive);
}

.c-siteFooter__link::after {
  content:
    "";

  position:
    absolute;

  inset-inline-start:
    var(--inset-0);

  inset-block-end:
    var(--space-1);

  width:
    var(--content-full);

  height:
    var(--rail-size-sm);

  background:
    var(--rail-primary);

  border-radius:
    var(--radius-pill);

  opacity:
    var(--state-hidden-opacity);

  transform:
    scaleX(
      var(--scale-down-md)
    );

  transform-origin:
    var(--motion-origin-left);

  transition:
    var(--transition-interactive);
}

.c-siteFooter__link:hover {
  color:
    var(--fg-brand-primary);

  transform:
    translateX(
      var(--motion-distance-xs)
    );
}

.c-siteFooter__link:hover::after {
  opacity:
    var(--motion-opacity-visible);

  transform:
    scaleX(
      var(--scale-none)
    );
}

.c-siteFooter__link:active {
  color:
    var(--state-active-text);

  transform:
    translateX(
      var(--motion-distance-none)
    )
    scale(
      var(--state-active-scale)
    );
}

.c-siteFooter__link:focus-visible {
  border-radius:
    var(--radius-control-sm);

  outline:
    none;

  box-shadow:
    var(--focus-ring);
}


/* =========================================================
   FOOTER CONTACT
========================================================= */

.c-siteFooter__contact {
  margin:
    var(--inset-0);

  padding:
    var(--inset-0);

  color:
    var(--fg-secondary);

  list-style:
    none;
}


/* =========================================================
   FOOTER CONTACT ITEM
========================================================= */

.c-siteFooter__contactItem {
  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-sm-font);

  font-size:
    var(--type-body-sm-size);

  font-weight:
    var(--type-body-sm-weight);

  line-height:
    var(--type-body-sm-leading);

  letter-spacing:
    var(--type-body-sm-tracking);

  text-wrap:
    pretty;
}


/* =========================================================
   FOOTER COPYRIGHT
========================================================= */

.c-siteFooter__copyright {
  margin:
    var(--inset-0);

  color:
    var(--fg-tertiary);

  font-family:
    var(--type-legal-font);

  font-size:
    var(--type-legal-size);

  font-weight:
    var(--type-legal-weight);

  line-height:
    var(--type-legal-leading);

  letter-spacing:
    var(--type-legal-tracking);
}


/* =========================================================
   FOOTER LEGAL
========================================================= */

.c-siteFooter__legal {
  color:
    var(--fg-tertiary);
}


/* =========================================================
   FOOTER VERSION
========================================================= */

.c-siteFooter__version {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    var(--chip-h);

  padding-inline:
    var(--chip-padding-x);

  background:
    var(--chip-bg);

  border:
    var(--stroke-control)
    solid
    var(--chip-border);

  border-radius:
    var(--chip-radius);

  color:
    var(--fg-tertiary);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--type-meta-weight);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);

  white-space:
    nowrap;
}


/* =========================================================
   FOOTER CREDIT
========================================================= */

.c-siteFooter__credit {
  margin:
    var(--inset-0);

  color:
    var(--fg-tertiary);

  font-family:
    var(--type-legal-font);

  font-size:
    var(--type-legal-size);

  font-weight:
    var(--type-legal-weight);

  line-height:
    var(--type-legal-leading);

  letter-spacing:
    var(--type-legal-tracking);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 64rem) {

  .c-homeFinalCta__content {
    padding:
      var(--space-card-padding);
  }

  .c-homeFinalCta__title {
    font-size:
      var(--type-heading-section-size);
  }

  .c-siteFooter__heading {
    font-size:
      var(--type-heading-card-size);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 48rem) {

  .c-homeFinalCta__content {
    padding:
      var(--space-card-padding-sm);

    border-radius:
      var(--radius-panel);
  }

  .c-homeFinalCta__trustItem {
    width:
      var(--content-full);

    justify-content:
      center;

    white-space:
      normal;
  }

  .c-siteFooter__section {
    text-align:
      center;
  }

  .c-siteFooter__text {
    margin-inline:
      auto;
  }

  .c-siteFooter__social {
    justify-content:
      center;
  }

  .c-siteFooter__heading {
    text-align:
      center;
  }

  .c-siteFooter__link {
    justify-content:
      center;
  }

  .c-siteFooter__contactItem {
    text-align:
      center;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .c-siteFooter__socialLink,
  .c-siteFooter__link,
  .c-siteFooter__link::after {
    transition:
      var(--transition-reduced);
  }

  .c-siteFooter__socialLink:hover,
  .c-siteFooter__socialLink:active,
  .c-siteFooter__link:hover,
  .c-siteFooter__link:active,
  .c-siteFooter__link:hover::after {
    transform:
      none;
  }

}

/* =========================================================
   SERVICES PAGE
========================================================= */


/* =========================================================
   01. PAGE HERO
========================================================= */


/* =========================================================
   PAGE HERO ROOT
========================================================= */

.c-pageHero {
  position:
    relative;

  background:
    var(--aura-feature-image),
    var(--background-gradient-dark);

  border-block-end:
    var(--divider-size-thin)
    solid
    var(--divider-default);

  box-shadow:
    var(--surface-section-shadow);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


/* =========================================================
   PAGE HERO EYEBROW
========================================================= */

.c-pageHero__eyebrow {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-eyebrow-font);

  font-size:
    var(--type-eyebrow-size);

  font-weight:
    var(--type-eyebrow-weight);

  line-height:
    var(--type-eyebrow-leading);

  letter-spacing:
    var(--type-eyebrow-tracking);

  text-transform:
    var(--type-eyebrow-transform);

  text-wrap:
    balance;
}


/* =========================================================
   PAGE HERO TITLE
========================================================= */

.c-pageHero__title {
  max-width:
    var(--type-heading-hero-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-hero-font);

  font-size:
    var(--type-heading-hero-size);

  font-weight:
    var(--type-heading-hero-weight);

  line-height:
    var(--type-heading-hero-leading);

  letter-spacing:
    var(--type-heading-hero-tracking);

  text-transform:
    var(--type-heading-hero-transform);

  text-wrap:
    balance;
}


/* =========================================================
   PAGE HERO DESCRIPTION
========================================================= */

.c-pageHero__description {
  max-width:
    var(--type-lead-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-lead-font);

  font-size:
    var(--type-lead-size);

  font-weight:
    var(--type-lead-weight);

  line-height:
    var(--type-lead-leading);

  letter-spacing:
    var(--type-lead-tracking);

  text-wrap:
    pretty;
}


/* =========================================================
   PAGE HERO MEDIA
========================================================= */

.c-pageHero__media {
  position:
    relative;

  width:
    var(--content-full);

  min-width:
    var(--inset-0);

  aspect-ratio:
    var(--feature-media-ratio);

  background:
    var(--surface-recessed-bg);

  border:
    var(--stroke-control)
    solid
    var(--feature-media-border);

  border-radius:
    var(--feature-media-radius);

  box-shadow:
    var(--feature-media-shadow);

  overflow:
    hidden;

  isolation:
    isolate;
}


/* =========================================================
   PAGE HERO IMAGE
========================================================= */

.c-pageHero__image {
  display:
    block;

  width:
    var(--content-full);

  height:
    var(--content-full);

  object-fit:
    var(--feature-media-fit);

  object-position:
    var(--feature-media-position);

  filter:
    var(--feature-media-filter);
}



/* =========================================================
   02. SECTION HEADER
========================================================= */


/* =========================================================
   SECTION HEADER ROOT
========================================================= */

.c-sectionHeader {
  color:
    var(--fg-primary);
}


/* =========================================================
   SECTION HEADER EYEBROW
========================================================= */

.c-sectionHeader__eyebrow {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-eyebrow-font);

  font-size:
    var(--type-eyebrow-size);

  font-weight:
    var(--type-eyebrow-weight);

  line-height:
    var(--type-eyebrow-leading);

  letter-spacing:
    var(--type-eyebrow-tracking);

  text-transform:
    var(--type-eyebrow-transform);

  text-wrap:
    balance;
}


/* =========================================================
   SECTION HEADER TITLE
========================================================= */

.c-sectionHeader__title {
  max-width:
    var(--type-heading-section-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-section-font);

  font-size:
    var(--type-heading-section-size);

  font-weight:
    var(--type-heading-section-weight);

  line-height:
    var(--type-heading-section-leading);

  letter-spacing:
    var(--type-heading-section-tracking);

  text-transform:
    var(--type-heading-section-transform);

  text-wrap:
    balance;
}


/* =========================================================
   SECTION HEADER INTRODUCTION
========================================================= */

.c-sectionHeader__intro {
  max-width:
    var(--type-body-lg-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-lg-font);

  font-size:
    var(--type-body-lg-size);

  font-weight:
    var(--type-body-lg-weight);

  line-height:
    var(--type-body-lg-leading);

  letter-spacing:
    var(--type-body-lg-tracking);

  text-wrap:
    pretty;
}



/* =========================================================
   03. SERVICE CARD
========================================================= */


/* =========================================================
   SERVICE CARD ROOT
========================================================= */

.c-serviceCard {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  width:
    var(--content-full);

  height:
    var(--content-full);

  min-width:
    var(--inset-0);

  background:
    var(--surface-card-bg);

  border:
    var(--stroke-control)
    solid
    var(--surface-card-border);

  border-radius:
    var(--radius-card-raised);

  box-shadow:
    var(--surface-card-highlight),
    var(--surface-card-shadow);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


/* =========================================================
   SERVICE CARD MEDIA
========================================================= */

.c-serviceCard__media {
  position:
    relative;

  width:
    var(--content-full);

  min-width:
    var(--inset-0);

  aspect-ratio:
    var(--card-media-ratio);

  background:
    var(--surface-recessed-bg);

  border-block-end:
    var(--stroke-control)
    solid
    var(--card-media-border);

  overflow:
    hidden;
}


/* =========================================================
   SERVICE CARD IMAGE
========================================================= */

.c-serviceCard__image {
  display:
    block;

  width:
    var(--content-full);

  height:
    var(--content-full);

  object-fit:
    var(--card-media-fit);

  object-position:
    var(--card-media-position);

  filter:
    var(--card-media-filter);
}


/* =========================================================
   SERVICE CARD BODY
========================================================= */

.c-serviceCard__body {
  display:
    flex;

  flex:
    var(--flex-grow);

  flex-direction:
    column;

  width:
    var(--content-full);

  min-width:
    var(--inset-0);

  padding:
    var(--space-card-padding);

  gap:
    var(--space-card-gap);
}


/* =========================================================
   SERVICE CARD TITLE
========================================================= */

.c-serviceCard__title {
  max-width:
    var(--type-heading-card-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-card-font);

  font-size:
    var(--type-heading-card-size);

  font-weight:
    var(--type-heading-card-weight);

  line-height:
    var(--type-heading-card-leading);

  letter-spacing:
    var(--type-heading-card-tracking);

  text-transform:
    var(--type-heading-card-transform);

  text-wrap:
    balance;
}


/* =========================================================
   SERVICE CARD DESCRIPTION
========================================================= */

.c-serviceCard__description {
  max-width:
    var(--type-body-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-font);

  font-size:
    var(--type-body-size);

  font-weight:
    var(--type-body-weight);

  line-height:
    var(--type-body-leading);

  letter-spacing:
    var(--type-body-tracking);

  text-wrap:
    pretty;
}


/* =========================================================
   SERVICE CARD META LABEL
========================================================= */

.c-serviceCard__metaLabel {
  margin-block-start:
    auto;

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-label-font);

  font-size:
    var(--type-label-size);

  font-weight:
    var(--type-label-weight);

  line-height:
    var(--type-label-leading);

  letter-spacing:
    var(--type-label-tracking);

  text-transform:
    var(--type-label-transform);
}


/* =========================================================
   SERVICE CARD LIST
========================================================= */

.c-serviceCard__list {
  display:
    flex;

  flex-direction:
    column;

  margin:
    var(--inset-0);

  gap:
    var(--space-stack-gap-compact);
}


/* =========================================================
   SERVICE CARD LIST ITEM
========================================================= */

.c-serviceCard__item {
  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-sm-font);

  font-size:
    var(--type-body-sm-size);

  font-weight:
    var(--type-body-sm-weight);

  line-height:
    var(--type-body-sm-leading);

  letter-spacing:
    var(--type-body-sm-tracking);
}

/* =========================================================
   RUNNR COMMERCIAL FEATURE
========================================================= */


/* =========================================================
   RUNNR FEATURE ROOT
========================================================= */

.c-runnrFeature {
  position:
    relative;

  background:
    var(--background-gradient-dark);

  border-block:
    var(--divider-size-thin)
    solid
    var(--divider-default);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


/* =========================================================
   RUNNR PARTNER LABEL
========================================================= */

.c-runnrFeature__partnerLabel {
  margin:
    var(--inset-0);

  color:
    var(--fg-tertiary);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--type-meta-weight);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);
}


/* =========================================================
   RUNNR PARTNER LOGO
========================================================= */

.c-runnrFeature__partnerLogo {
  display:
    block;

  width:
    var(--media-size-logo-sm);

  max-width:
    var(--content-full);

  height:
    auto;
}


/* =========================================================
   RUNNR BENEFIT CONTROL
========================================================= */

.c-runnrFeature__benefit {
  width:
    var(--content-full);

  min-width:
    var(--inset-0);

  padding:
    var(--space-card-padding-sm);

  background:
    var(--surface-card-bg);

  border:
    var(--stroke-control)
    solid
    var(--surface-card-border);

  border-radius:
    var(--radius-card);

  box-shadow:
    var(--surface-card-highlight),
    var(--surface-card-shadow);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-card-font);

  font-size:
    var(--type-heading-card-size);

  font-weight:
    var(--type-heading-card-weight);

  line-height:
    var(--type-heading-card-leading);

  letter-spacing:
    var(--type-heading-card-tracking);

  text-align:
    left;

  text-transform:
    var(--type-heading-card-transform);

  text-wrap:
    balance;

  cursor:
    var(--cursor-pointer);

  touch-action:
    var(--touch-action-manipulation);

  user-select:
    var(--user-select-none);

  transition:
    var(--transition-interactive);
}


/* =========================================================
   RUNNR BENEFIT HOVER
========================================================= */

.c-runnrFeature__benefit:hover {
  background:
    var(--surface-card-raised-bg);

  border-color:
    var(--surface-card-raised-border);

  box-shadow:
    var(--surface-card-raised-highlight),
    var(--surface-card-raised-shadow);

  transform:
    translateY(
      var(--state-hover-translate-y)
    );
}


/* =========================================================
   RUNNR BENEFIT ACTIVE PRESS
========================================================= */

.c-runnrFeature__benefit:active {
  transform:
    translateY(
      var(--motion-distance-none)
    )
    scale(
      var(--state-active-scale)
    );
}


/* =========================================================
   RUNNR BENEFIT FOCUS
========================================================= */

.c-runnrFeature__benefit:focus-visible {
  border-color:
    var(--state-focus-border);

  outline:
    none;

  box-shadow:
    var(--focus-ring),
    var(--surface-card-shadow);
}


/* =========================================================
   RUNNR BENEFIT SELECTED
========================================================= */

.c-runnrFeature__benefit.is-active {
  background:
    var(--surface-selected-bg);

  border-color:
    var(--surface-selected-border);

  box-shadow:
    var(--surface-selected-highlight),
    var(--surface-selected-shadow);

  color:
    var(--fg-brand-primary);

  transform:
    translateY(
      var(--motion-distance-none)
    );
}


/* =========================================================
   RUNNR DETAIL PANEL
========================================================= */

.c-runnrFeature__panel {
  padding:
    var(--space-panel-padding);

  background:
    var(--surface-panel-bg);

  border:
    var(--stroke-control)
    solid
    var(--surface-panel-border);

  border-radius:
    var(--radius-panel-raised);

  box-shadow:
    var(--surface-panel-highlight),
    var(--surface-panel-shadow);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


/* =========================================================
   RUNNR PANEL TITLE
========================================================= */

.c-runnrFeature__panelTitle {
  max-width:
    var(--type-heading-card-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-heading-card-font);

  font-size:
    var(--type-heading-card-size);

  font-weight:
    var(--type-heading-card-weight);

  line-height:
    var(--type-heading-card-leading);

  letter-spacing:
    var(--type-heading-card-tracking);

  text-transform:
    var(--type-heading-card-transform);

  text-wrap:
    balance;
}


/* =========================================================
   RUNNR PANEL TEXT
========================================================= */

.c-runnrFeature__panelText {
  max-width:
    var(--type-body-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-font);

  font-size:
    var(--type-body-size);

  font-weight:
    var(--type-body-weight);

  line-height:
    var(--type-body-leading);

  letter-spacing:
    var(--type-body-tracking);

  text-wrap:
    pretty;
}


/* =========================================================
   RUNNR PANEL MEDIA
========================================================= */

.c-runnrFeature__media {
  width:
    var(--content-full);

  min-width:
    var(--inset-0);

  aspect-ratio:
    var(--card-media-ratio);

  background:
    var(--surface-recessed-bg);

  border:
    var(--stroke-control)
    solid
    var(--card-media-border);

  border-radius:
    var(--card-media-radius);

  box-shadow:
    var(--card-media-shadow);

  overflow:
    hidden;
}


/* =========================================================
   RUNNR PANEL IMAGE
========================================================= */

.c-runnrFeature__image {
  display:
    block;

  width:
    var(--content-full);

  height:
    var(--content-full);

  object-fit:
    var(--card-media-fit);

  object-position:
    var(--card-media-position);

  filter:
    var(--card-media-filter);
}


/* =========================================================
   RUNNR REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .c-runnrFeature__benefit {
    transition:
      var(--transition-reduced);
  }

  .c-runnrFeature__benefit:hover,
  .c-runnrFeature__benefit:active {
    transform:
      none;
  }

}


/* =========================================================
   SERVICES PAGE
   CHUNK 5
   JOB REQUIREMENTS + FINAL CTA
========================================================= */


/* =========================================================
   JOB REQUIREMENTS ROOT
========================================================= */

.c-servicesRequirements {
  position:
    relative;

  background:
    var(--background-gradient-surface);

  border-block:
    var(--divider-size-thin)
    solid
    var(--divider-default);

  box-shadow:
    var(--surface-section-shadow);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


/* =========================================================
   PROCESS STEP
========================================================= */

.c-processStep {
  position:
    relative;

  height:
    var(--content-full);

  padding:
    var(--space-card-padding);

  background:
    var(--surface-card-bg);

  border:
    var(--stroke-control)
    solid
    var(--surface-card-border);

  border-radius:
    var(--radius-card-raised);

  box-shadow:
    var(--surface-card-highlight),
    var(--surface-card-shadow);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


/* =========================================================
   PROCESS STEP NUMBER
========================================================= */

.c-processStep__number {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-stat-sm-font);

  font-size:
    var(--type-stat-sm-size);

  font-weight:
    var(--type-stat-sm-weight);

  line-height:
    var(--type-stat-sm-leading);

  letter-spacing:
    var(--type-stat-sm-tracking);

  font-feature-settings:
    var(--type-stat-sm-feature);
}


/* =========================================================
   PROCESS STEP TITLE
========================================================= */

.c-processStep__title {
  max-width:
    var(--type-heading-card-measure);

  margin:
    var(--space-stack-gap-compact)
    var(--inset-0)
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-card-font);

  font-size:
    var(--type-heading-card-size);

  font-weight:
    var(--type-heading-card-weight);

  line-height:
    var(--type-heading-card-leading);

  letter-spacing:
    var(--type-heading-card-tracking);

  text-transform:
    var(--type-heading-card-transform);

  text-wrap:
    balance;
}


/* =========================================================
   PROCESS STEP TEXT
========================================================= */

.c-processStep__text {
  max-width:
    var(--type-body-measure);

  margin:
    var(--space-stack-gap)
    var(--inset-0)
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-font);

  font-size:
    var(--type-body-size);

  font-weight:
    var(--type-body-weight);

  line-height:
    var(--type-body-leading);

  letter-spacing:
    var(--type-body-tracking);

  text-wrap:
    pretty;
}


/* =========================================================
   FINAL CTA ROOT
========================================================= */

.c-finalCta {
  position:
    relative;

  background:
    var(--background-gradient-primary);

  border-block:
    var(--divider-size-thin)
    solid
    var(--border-primary);

  box-shadow:
    var(--surface-section-shadow),
    var(--glow-primary-sm);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


/* =========================================================
   FINAL CTA CONTENT
========================================================= */

.c-finalCta__content {
  position:
    relative;

  padding:
    var(--space-panel-padding);

  background:
    var(--surface-glass-strong-bg);

  border:
    var(--stroke-control)
    solid
    var(--surface-glass-strong-border);

  border-radius:
    var(--radius-panel-raised);

  box-shadow:
    var(--surface-glass-strong-highlight),
    var(--surface-glass-strong-shadow),
    var(--glow-primary-sm);

  color:
    var(--fg-primary);

  text-align:
    center;

  backdrop-filter:
    blur(
      var(--glass-strong-blur)
    );

  overflow:
    hidden;

  isolation:
    isolate;
}


/* =========================================================
   FINAL CTA EYEBROW
========================================================= */

.c-finalCta__eyebrow {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-eyebrow-font);

  font-size:
    var(--type-eyebrow-size);

  font-weight:
    var(--type-eyebrow-weight);

  line-height:
    var(--type-eyebrow-leading);

  letter-spacing:
    var(--type-eyebrow-tracking);

  text-transform:
    var(--type-eyebrow-transform);

  text-wrap:
    balance;
}


/* =========================================================
   FINAL CTA TITLE
========================================================= */

.c-finalCta__title {
  max-width:
    var(--type-heading-feature-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-feature-font);

  font-size:
    var(--type-heading-feature-size);

  font-weight:
    var(--type-heading-feature-weight);

  line-height:
    var(--type-heading-feature-leading);

  letter-spacing:
    var(--type-heading-feature-tracking);

  text-transform:
    var(--type-heading-feature-transform);

  text-wrap:
    balance;
}


/* =========================================================
   FINAL CTA TEXT
========================================================= */

.c-finalCta__text {
  max-width:
    var(--type-body-lg-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-lg-font);

  font-size:
    var(--type-body-lg-size);

  font-weight:
    var(--type-body-lg-weight);

  line-height:
    var(--type-body-lg-leading);

  letter-spacing:
    var(--type-body-lg-tracking);

  text-wrap:
    pretty;
}

/* =========================================================
   GALLERY PAGE
   FIELD ARCHIVE COMPONENTS
========================================================= */


/* =========================================================
   GALLERY HERO
========================================================= */

.c-galleryHero {
  position:
    relative;

  background-color:
    var(--surface-level-0-bg);

  background-image:
    var(--aura-gradient-dual),
    var(--texture-blueprint-minor),
    var(--background-gradient-dark);

  background-size:
    var(--aura-size-xl),
    var(--texture-blueprint-size-minor),
    var(--background-size-cover);

  background-position:
    var(--aura-position-center),
    var(--texture-tool-position),
    var(--position-center);

  background-repeat:
    var(--background-repeat-none),
    var(--background-repeat-all),
    var(--background-repeat-none);

  border-block-end:
    var(--divider-size-thin)
    solid
    var(--border-primary-subtle);

  box-shadow:
    var(--surface-section-shadow),
    var(--glow-primary-sm);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


.c-galleryHero__eyebrow {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-eyebrow-font);

  font-size:
    var(--type-eyebrow-size);

  font-weight:
    var(--type-eyebrow-weight);

  line-height:
    var(--type-eyebrow-leading);

  letter-spacing:
    var(--type-eyebrow-tracking);

  text-transform:
    var(--type-eyebrow-transform);

  text-shadow:
    var(--glow-primary-sm);
}


.c-galleryHero__title {
  max-width:
    var(--type-heading-display-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-display-font);

  font-size:
    var(--type-heading-display-size);

  font-weight:
    var(--type-heading-display-weight);

  line-height:
    var(--type-heading-display-leading);

  letter-spacing:
    var(--type-heading-display-tracking);

  text-transform:
    var(--type-heading-display-transform);

  text-wrap:
    balance;
}


.c-galleryHero__intro {
  max-width:
    var(--type-lead-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-lead-font);

  font-size:
    var(--type-lead-size);

  font-weight:
    var(--type-lead-weight);

  line-height:
    var(--type-lead-leading);

  letter-spacing:
    var(--type-lead-tracking);
}


.c-galleryHero__meta {
  color:
    var(--fg-primary);
}


.c-galleryHero__count {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  margin:
    var(--inset-0);

  padding:
    var(--space-card-padding);

  gap:
    var(--space-stack-gap-tight);

  background:
    var(--glass-default-bg);

  border:
    var(--stroke-control)
    solid
    var(--border-accent-strong);

  border-radius:
    var(--radius-card-raised);

  box-shadow:
    var(--glass-default-highlight),
    var(--glass-default-shadow),
    var(--glow-accent-sm);

  backdrop-filter:
    blur(
      var(--glass-default-blur)
    );
}


.c-galleryHero__countValue {
  color:
    var(--fg-brand-accent);

  font-family:
    var(--type-stat-lg-font);

  font-size:
    var(--type-stat-lg-size);

  font-weight:
    var(--type-stat-lg-weight);

  line-height:
    var(--type-stat-lg-leading);

  letter-spacing:
    var(--type-stat-lg-tracking);

  font-feature-settings:
    var(--type-stat-lg-feature);

  text-shadow:
    var(--glow-accent-md);
}


.c-galleryHero__countLabel {
  color:
    var(--fg-secondary);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--type-meta-weight);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);
}


/* =========================================================
   GALLERY TOOLBAR + FILTERS
========================================================= */

.c-galleryToolbar {
  position:
    relative;

  background:
    var(--glass-strong-bg);

  border-block:
    var(--divider-size-thin)
    solid
    var(--glass-strong-border);

  box-shadow:
    var(--glass-strong-highlight),
    var(--glass-strong-shadow);

  backdrop-filter:
    blur(
      var(--glass-strong-blur)
    );

  color:
    var(--fg-primary);

  isolation:
    isolate;
}


.c-galleryFilter {
  flex:
    var(--flex-fixed);
}


.c-galleryFilter__button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    var(--chip-h);

  padding-inline:
    var(--chip-padding-x);

  gap:
    var(--chip-gap);

  background:
    var(--chip-bg);

  border:
    var(--stroke-control)
    solid
    var(--chip-border);

  border-radius:
    var(--chip-radius);

  box-shadow:
    var(--elevation-low);

  color:
    var(--chip-text);

  font-family:
    var(--type-control-font);

  font-size:
    var(--type-control-size);

  font-weight:
    var(--type-control-weight);

  line-height:
    var(--type-control-leading);

  letter-spacing:
    var(--type-control-tracking);

  text-transform:
    var(--type-control-transform);

  white-space:
    nowrap;

  cursor:
    var(--cursor-pointer);

  touch-action:
    var(--touch-action-manipulation);

  user-select:
    var(--user-select-none);

  transition:
    var(--transition-interactive);
}


.c-galleryFilter__button.is-active {
  background:
    var(--chip-bg-selected);

  border-color:
    var(--chip-border-selected);

  box-shadow:
    var(--state-selected-highlight),
    var(--state-selected-shadow),
    var(--glow-primary-sm);

  color:
    var(--chip-text-selected);
}


/* =========================================================
   GALLERY ARCHIVE SURFACE
========================================================= */

.c-gallery {
  position:
    relative;

  background-color:
    var(--surface-level-0-bg);

  background-image:
    var(--texture-page-image),
    var(--aura-gradient-primary-soft);

  background-size:
    var(--texture-page-size),
    var(--aura-size-xl);

  background-position:
    var(--texture-page-position),
    var(--aura-position-top-end);

  background-repeat:
    var(--background-repeat-all),
    var(--background-repeat-none);

  color:
    var(--fg-primary);

  isolation:
    isolate;
}


/* =========================================================
   MASTER GALLERY SLIDER
========================================================= */

.c-gallerySlider {
  position:
    relative;

  background:
    var(--glass-default-bg);

  border:
    var(--stroke-control)
    solid
    var(--border-primary-subtle);

  border-radius:
    var(--radius-panel-raised);

  box-shadow:
    var(--glass-default-highlight),
    var(--glass-default-shadow),
    var(--glow-primary-sm);

  color:
    var(--fg-primary);

  backdrop-filter:
    blur(
      var(--glass-default-blur)
    );

  overflow:
    hidden;

  isolation:
    isolate;
}


/* =========================================================
   MASTER SLIDER STATUS
========================================================= */

.c-gallerySlider__status {
  color:
    var(--fg-secondary);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--type-meta-weight);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);
}


.c-gallerySlider__current {
  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-stat-sm-font);

  font-size:
    var(--type-stat-sm-size);

  font-weight:
    var(--type-stat-sm-weight);

  line-height:
    var(--type-stat-sm-leading);

  letter-spacing:
    var(--type-stat-sm-tracking);

  font-feature-settings:
    var(--type-stat-sm-feature);

  text-shadow:
    var(--glow-primary-sm);
}


.c-gallerySlider__total {
  color:
    var(--fg-secondary);

  font-family:
    var(--type-stat-sm-font);

  font-size:
    var(--type-stat-sm-size);

  font-weight:
    var(--type-stat-sm-weight);

  line-height:
    var(--type-stat-sm-leading);

  letter-spacing:
    var(--type-stat-sm-tracking);

  font-feature-settings:
    var(--type-stat-sm-feature);
}


/* =========================================================
   MASTER SLIDER CONTROLS
========================================================= */

.c-gallerySlider__control {
  display:
    inline-grid;

  place-items:
    center;

  width:
    var(--icon-button-size-lg);

  height:
    var(--icon-button-size-lg);

  padding:
    var(--icon-button-padding);

  background:
    var(--glass-default-bg);

  border:
    var(--stroke-control)
    solid
    var(--border-primary-strong);

  border-radius:
    var(--radius-round);

  box-shadow:
    var(--glass-default-highlight),
    var(--elevation-default),
    var(--glow-primary-sm);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-control-font);

  font-size:
    var(--type-heading-card-size);

  line-height:
    var(--lh-none);

  cursor:
    var(--cursor-pointer);

  touch-action:
    var(--touch-action-manipulation);

  user-select:
    var(--user-select-none);

  transition:
    var(--transition-interactive);
}


.c-gallerySlider__control--previous {
  color:
    var(--fg-brand-primary);
}


.c-gallerySlider__control--next {
  color:
    var(--fg-brand-primary);
}


/* =========================================================
   GALLERY ITEM
========================================================= */

.c-galleryItem {
  position:
    relative;

  aspect-ratio:
    var(--gallery-media-ratio);

  background:
    var(--surface-card-bg);

  border:
    var(--stroke-control)
    solid
    var(--gallery-media-border);

  border-radius:
    var(--gallery-media-radius);

  box-shadow:
    var(--gallery-media-shadow);

  overflow:
    hidden;

  isolation:
    isolate;

  transition:
    var(--transition-interactive);
}


.c-galleryItem:hover {
  border-color:
    var(--border-primary-strong);

  box-shadow:
    var(--elevation-hover-raised),
    var(--glow-primary-sm);

  transform:
    translateY(
      var(--state-hover-translate-y)
    )
    scale(
      var(--gallery-media-scale-hover)
    );
}


.c-galleryItem:focus-within {
  border-color:
    var(--state-focus-border);

  box-shadow:
    var(--focus-ring),
    var(--glow-primary-sm),
    var(--gallery-media-shadow);
}


.c-galleryItem__trigger {
  position:
    relative;

  display:
    block;

  width:
    var(--content-full);

  height:
    var(--content-full);

  min-width:
    var(--inset-0);

  min-height:
    var(--inset-0);

  padding:
    var(--inset-0);

  background:
    var(--background-transparent);

  border:
    var(--stroke-0);

  border-radius:
    inherit;

  color:
    inherit;

  cursor:
    var(--cursor-pointer);

  overflow:
    hidden;

  text-align:
    left;

  touch-action:
    var(--touch-action-manipulation);

  user-select:
    var(--user-select-none);
}


.c-galleryItem__media {
  position:
    absolute;

  inset:
    var(--inset-0);

  display:
    block;

  width:
    var(--content-full);

  height:
    var(--content-full);

  background:
    var(--media-placeholder-gradient);

  overflow:
    hidden;
}


.c-galleryItem__image {
  display:
    block;

  width:
    var(--content-full);

  height:
    var(--content-full);

  object-fit:
    var(--gallery-media-fit);

  object-position:
    var(--gallery-media-position);

  filter:
    var(--gallery-media-filter);

  transform:
    scale(
      var(--scale-none)
    );

  transition:
    var(--gallery-media-transition);
}


.c-galleryItem__overlay {
  position:
    absolute;

  inset:
    var(--inset-0);

  z-index:
    var(--layer-decoration);

  display:
    block;

  background-image:
    var(--media-gradient-bottom-strong),
    var(--media-gradient-vignette);

  pointer-events:
    none;
}


.c-galleryItem__content {
  position:
    absolute;

  inset-inline:
    var(--space-5);

  inset-block-end:
    var(--space-5);

  z-index:
    var(--layer-content);

  display:
    flex;

  flex-direction:
    column;

  max-width:
    var(--content-default);

  gap:
    var(--space-stack-gap-compact);

  color:
    var(--fg-primary);

  pointer-events:
    none;
}


.c-galleryItem__meta {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    var(--space-badge-gap);
}


.c-galleryItem__category {
  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--type-meta-weight);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);

  text-shadow:
    var(--glow-primary-sm);
}


.c-galleryItem__title {
  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-card-font);

  font-size:
    var(--type-heading-card-size);

  font-weight:
    var(--type-heading-card-weight);

  line-height:
    var(--type-heading-card-leading);

  letter-spacing:
    var(--type-heading-card-tracking);

  text-transform:
    var(--type-heading-card-transform);

  text-wrap:
    balance;
}


.c-galleryItem__location {
  color:
    var(--fg-secondary);

  font-family:
    var(--type-caption-font);

  font-size:
    var(--type-caption-size);

  font-weight:
    var(--type-caption-weight);

  line-height:
    var(--type-caption-leading);

  letter-spacing:
    var(--type-caption-tracking);
}


.c-galleryItem__cue {
  display:
    inline-flex;

  align-items:
    center;

  width:
    fit-content;

  min-height:
    var(--chip-h);

  padding-inline:
    var(--chip-padding-x);

  background:
    var(--surface-emphasis-accent-bg);

  border:
    var(--stroke-control)
    solid
    var(--border-accent-strong);

  border-radius:
    var(--chip-radius);

  box-shadow:
    var(--surface-emphasis-accent-highlight),
    var(--glow-accent-sm);

  color:
    var(--fg-brand-accent);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--type-meta-weight);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);
}


/* =========================================================
   GALLERY LIGHTBOX
========================================================= */

.c-galleryLightbox {
  background:
    var(--overlay-modal-bg);

  color:
    var(--fg-primary);

  opacity:
    var(--motion-opacity-hidden);

  pointer-events:
    none;

  backdrop-filter:
    blur(
      var(--overlay-blur-md)
    );

  transition:
    var(--transition-overlay);
}


.c-galleryLightbox.is-open {
  opacity:
    var(--motion-opacity-visible);

  pointer-events:
    auto;
}


.c-galleryLightbox__backdrop {
  position:
    absolute;

  inset:
    var(--inset-0);

  width:
    var(--content-full);

  height:
    var(--content-full);

  padding:
    var(--inset-0);

  background:
    var(--overlay-strong-bg);

  border:
    var(--stroke-0);

  cursor:
    var(--cursor-pointer);
}


.c-galleryLightbox__dialog {
  position:
    relative;

  z-index:
    var(--layer-content);

  padding:
    var(--modal-content-padding);

  background-color:
    var(--surface-floating-bg);

  background-image:
    var(--aura-gradient-dual),
    var(--texture-panel-image);

  background-size:
    var(--aura-size-xl),
    var(--texture-panel-size);

  background-position:
    var(--aura-position-center),
    var(--texture-panel-position);

  background-repeat:
    var(--background-repeat-none),
    var(--background-repeat-all);

  border:
    var(--stroke-control)
    solid
    var(--surface-floating-border);

  border-radius:
    var(--radius-modal);

  box-shadow:
    var(--surface-floating-highlight),
    var(--elevation-modal);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


.c-galleryLightbox__header {
  color:
    var(--fg-secondary);
}


.c-galleryLightbox__stage {
  color:
    var(--fg-primary);
}


.c-galleryLightbox__counter {
  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--type-meta-weight);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);
}


.c-galleryLightbox__close {
  display:
    inline-grid;

  place-items:
    center;

  width:
    var(--icon-button-size);

  height:
    var(--icon-button-size);

  padding:
    var(--icon-button-padding);

  background:
    var(--icon-button-bg);

  border:
    var(--stroke-control)
    solid
    var(--icon-button-border-hover);

  border-radius:
    var(--icon-button-radius);

  box-shadow:
    var(--elevation-low);

  color:
    var(--icon-button-icon-hover);

  font-family:
    var(--type-control-font);

  font-size:
    var(--type-heading-card-size);

  line-height:
    var(--lh-none);

  cursor:
    var(--cursor-pointer);

  transition:
    var(--transition-interactive);
}


.c-galleryLightbox__media {
  position:
    relative;

  display:
    grid;

  place-items:
    var(--place-center);

  width:
    var(--content-full);

  background:
    var(--surface-level-0-bg);

  border:
    var(--stroke-control)
    solid
    var(--border-primary-subtle);

  border-radius:
    var(--media-radius-xl);

  box-shadow:
    var(--media-shadow-raised),
    var(--glow-primary-sm);

  overflow:
    hidden;
}


.c-galleryLightbox__image {
  display:
    block;

  width:
    auto;

  height:
    auto;

  max-width:
    var(--content-full);

  max-height:
    var(--media-size-2xl);

  margin-inline:
    auto;

  object-fit:
    var(--media-fit-contain);

  object-position:
    var(--media-position-center);

  filter:
    var(--media-filter-feature);
}
.c-galleryLightbox__content {
  color:
    var(--fg-primary);
}


.c-galleryLightbox__category {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-eyebrow-font);

  font-size:
    var(--type-eyebrow-size);

  font-weight:
    var(--type-eyebrow-weight);

  line-height:
    var(--type-eyebrow-leading);

  letter-spacing:
    var(--type-eyebrow-tracking);

  text-transform:
    var(--type-eyebrow-transform);

  text-shadow:
    var(--glow-primary-sm);
}


.c-galleryLightbox__title {
  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-feature-font);

  font-size:
    var(--type-heading-feature-size);

  font-weight:
    var(--type-heading-feature-weight);

  line-height:
    var(--type-heading-feature-leading);

  letter-spacing:
    var(--type-heading-feature-tracking);

  text-transform:
    var(--type-heading-feature-transform);

  text-wrap:
    balance;
}


.c-galleryLightbox__location {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-accent);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--type-meta-weight);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);
}


.c-galleryLightbox__description {
  max-width:
    var(--type-body-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-font);

  font-size:
    var(--type-body-size);

  font-weight:
    var(--type-body-weight);

  line-height:
    var(--type-body-leading);

  letter-spacing:
    var(--type-body-tracking);
}


.c-galleryLightbox__control {
  display:
    inline-grid;

  place-items:
    center;

  width:
    var(--icon-button-size);

  height:
    var(--icon-button-size);

  padding:
    var(--icon-button-padding);

  background:
    var(--glass-default-bg);

  border:
    var(--stroke-control)
    solid
    var(--border-primary-strong);

  border-radius:
    var(--radius-round);

  box-shadow:
    var(--glass-default-highlight),
    var(--elevation-default),
    var(--glow-primary-sm);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-control-font);

  font-size:
    var(--type-heading-card-size);

  line-height:
    var(--lh-none);

  cursor:
    var(--cursor-pointer);

  transition:
    var(--transition-interactive);
}


.c-galleryLightbox__control--previous {
  justify-self:
    start;
}


.c-galleryLightbox__control--next {
  justify-self:
    end;
}

/* =========================================================
   GALLERY FILMSTRIP
========================================================= */

.c-galleryFilmstrip {
  display:
    flex;

  align-items:
    center;

  width:
    max-content;

  min-width:
    var(--content-full);

  margin:
    var(--inset-0);

  padding:
    var(--inset-0);

  gap:
    var(--gallery-scroll-gap);

  list-style:
    none;
}


.c-galleryFilmstrip__item {
  flex:
    var(--flex-fixed);

width:
  var(--media-size-thumbnail-md);

  border:
    var(--stroke-control)
    solid
    var(--border-default);

  border-radius:
    var(--media-radius-md);

  box-shadow:
    var(--elevation-low);

  overflow:
    hidden;

  transition:
    var(--transition-interactive);
}


.c-galleryFilmstrip__item.is-active {
  border-color:
    var(--border-primary-strong);

  box-shadow:
    var(--state-selected-ring),
    var(--state-selected-shadow),
    var(--glow-primary-sm);
}


.c-galleryFilmstrip__button {
  display:
    block;

  width:
    var(--content-full);

  padding:
    var(--inset-0);

  background:
    var(--background-transparent);

  border:
    var(--stroke-0);

  cursor:
    var(--cursor-pointer);

  touch-action:
    var(--touch-action-manipulation);

  user-select:
    var(--user-select-none);
}


.c-galleryFilmstrip__image {
  display:
    block;

  width:
    var(--content-full);

  aspect-ratio:
    var(--media-ratio-gallery-thumb);

  object-fit:
    var(--gallery-media-fit);

  object-position:
    var(--gallery-media-position);

  filter:
    var(--gallery-media-filter);
}


/* =========================================================
   GALLERY PAGE
   RESPONSIVE COMPONENT TUNING
========================================================= */

@media (max-width: 48rem) {

  .c-galleryHero__count {
    align-items:
      flex-start;
  }


  .c-gallerySlider {
    border-radius:
      var(--radius-panel);
  }


  .c-gallerySlider__control {
    width:
      var(--icon-button-size);

    height:
      var(--icon-button-size);
  }


  .c-galleryItem__content {
    inset-inline:
      var(--space-4);

    inset-block-end:
      var(--space-4);

    gap:
      var(--space-stack-gap-tight);
  }


  .c-galleryLightbox__dialog {
    padding:
      var(--space-card-padding-sm);
  }


  .c-galleryLightbox__control {
    width:
      var(--icon-button-size);

    height:
      var(--icon-button-size);
  }


  .c-galleryFilmstrip__item {
    width:
      var(--media-size-thumbnail-md);
  }

}

/* =========================================================
   ABOUT / FLEET PAGE
   COMPONENT ADDITIONS
========================================================= */


/* =========================================================
   01. ABOUT HERO
========================================================= */

.c-aboutHero {
  position:
    relative;

  background-color:
    var(--surface-level-0-bg);

  background-image:
    var(--aura-feature-image),
    var(--background-gradient-dark);

  border-block-end:
    var(--divider-size-thin)
    solid
    var(--border-primary-subtle);

  box-shadow:
    var(--surface-section-shadow),
    var(--glow-primary-sm);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


.c-aboutHero__eyebrow {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-eyebrow-font);

  font-size:
    var(--type-eyebrow-size);

  font-weight:
    var(--type-eyebrow-weight);

  line-height:
    var(--type-eyebrow-leading);

  letter-spacing:
    var(--type-eyebrow-tracking);

  text-transform:
    var(--type-eyebrow-transform);

  text-shadow:
    var(--glow-primary-sm);
}


.c-aboutHero__title {
  max-width:
    var(--type-heading-display-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-display-font);

  font-size:
    var(--type-heading-display-size);

  font-weight:
    var(--type-heading-display-weight);

  line-height:
    var(--type-heading-display-leading);

  letter-spacing:
    var(--type-heading-display-tracking);

  text-transform:
    var(--type-heading-display-transform);

  text-wrap:
    balance;
}


.c-aboutHero__intro {
  max-width:
    var(--type-lead-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-lead-font);

  font-size:
    var(--type-lead-size);

  font-weight:
    var(--type-lead-weight);

  line-height:
    var(--type-lead-leading);

  letter-spacing:
    var(--type-lead-tracking);

  text-wrap:
    pretty;
}


.c-aboutHero__meta {
  color:
    var(--fg-primary);
}


.c-aboutHero__stat {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  min-width:
    var(--inset-0);

  min-height:
    var(--dimension-130);

  padding:
    var(--space-card-padding-sm);

  gap:
    var(--space-stack-gap-compact);

  background:
    var(--glass-default-bg);

  border:
    var(--stroke-control)
    solid
    var(--glass-default-border);

  border-block-start-color:
    var(--border-primary-strong);

  border-radius:
    var(--radius-card-raised);

  box-shadow:
    var(--glass-default-highlight),
    var(--glass-default-shadow),
    var(--glow-primary-sm);

  backdrop-filter:
    blur(
      var(--glass-default-blur)
    );

  overflow:
    hidden;

  transition:
    var(--transition-interactive);
}


.c-aboutHero__stat:hover {
  background:
    var(--glass-strong-bg);

  border-color:
    var(--border-primary-strong);

  box-shadow:
    var(--glass-strong-highlight),
    var(--glass-strong-shadow),
    var(--glow-primary-md);

  transform:
    translateY(
      var(--state-hover-translate-y)
    );
}


.c-aboutHero__statValue {
  color:
    var(--fg-primary);

  font-family:
    var(--type-stat-sm-font);

  font-size:
    var(--type-stat-sm-size);

  font-weight:
    var(--type-stat-sm-weight);

  line-height:
    var(--type-stat-sm-leading);

  letter-spacing:
    var(--type-stat-sm-tracking);

  font-feature-settings:
    var(--type-stat-sm-feature);

  text-wrap:
    balance;
}


.c-aboutHero__statLabel {
  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--type-meta-weight);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);
}


/* =========================================================
   02. COMPANY STORY
========================================================= */

.c-aboutStory {
  position:
    relative;

  background:
    var(--background-gradient-surface);

  border-block-end:
    var(--divider-size-thin)
    solid
    var(--divider-default);

  box-shadow:
    var(--surface-section-shadow);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


.c-aboutStory__eyebrow {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-eyebrow-font);

  font-size:
    var(--type-eyebrow-size);

  font-weight:
    var(--type-eyebrow-weight);

  line-height:
    var(--type-eyebrow-leading);

  letter-spacing:
    var(--type-eyebrow-tracking);

  text-transform:
    var(--type-eyebrow-transform);
}


.c-aboutStory__title {
  max-width:
    var(--type-heading-feature-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-feature-font);

  font-size:
    var(--type-heading-feature-size);

  font-weight:
    var(--type-heading-feature-weight);

  line-height:
    var(--type-heading-feature-leading);

  letter-spacing:
    var(--type-heading-feature-tracking);

  text-transform:
    var(--type-heading-feature-transform);

  text-wrap:
    balance;
}


.c-aboutStory__text {
  max-width:
    var(--type-body-lg-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-lg-font);

  font-size:
    var(--type-body-lg-size);

  font-weight:
    var(--type-body-lg-weight);

  line-height:
    var(--type-body-lg-leading);

  letter-spacing:
    var(--type-body-lg-tracking);

  text-wrap:
    pretty;
}


.c-aboutStory__media {
  position:
    relative;

  background:
    var(--surface-recessed-bg);

  border:
    var(--stroke-control)
    solid
    var(--feature-media-border);

  border-radius:
    var(--feature-media-radius);

  box-shadow:
    var(--feature-media-shadow),
    var(--glow-primary-sm);

  overflow:
    hidden;

  isolation:
    isolate;
}


.c-aboutStory__image {
  display:
    block;

  width:
    var(--content-full);

  aspect-ratio:
    var(--feature-media-ratio);

  object-fit:
    var(--feature-media-fit);

  object-position:
    var(--feature-media-position);

  filter:
    var(--feature-media-filter);

  transform:
    scale(
      var(--scale-none)
    );

  transition:
    var(--media-transition-complete);
}


.c-aboutStory__media:hover
.c-aboutStory__image {
  transform:
    scale(
      var(--media-scale-hover)
    );
}


.c-aboutStory__caption {
  margin:
    var(--inset-0);

  padding:
    var(--space-card-padding-sm);

  background:
    var(--surface-level-1-bg);

  border-block-start:
    var(--divider-size-thin)
    solid
    var(--divider-default);

  color:
    var(--fg-tertiary);

  font-family:
    var(--type-caption-font);

  font-size:
    var(--type-caption-size);

  font-weight:
    var(--type-caption-weight);

  line-height:
    var(--type-caption-leading);

  letter-spacing:
    var(--type-caption-tracking);
}


/* =========================================================
   03. FLEET SECTION
========================================================= */

.c-aboutFleet {
  position:
    relative;

  background-color:
    var(--surface-level-0-bg);

  background-image:
    var(--aura-gradient-primary-soft),
    var(--background-gradient-dark);

  background-position:
    var(--aura-position-top-end),
    var(--position-center);

  background-repeat:
    var(--background-repeat-none),
    var(--background-repeat-none);

  border-block:
    var(--divider-size-thin)
    solid
    var(--border-primary-subtle);

  box-shadow:
    var(--surface-section-shadow),
    var(--glow-primary-sm);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


.c-aboutFleet__eyebrow {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-eyebrow-font);

  font-size:
    var(--type-eyebrow-size);

  font-weight:
    var(--type-eyebrow-weight);

  line-height:
    var(--type-eyebrow-leading);

  letter-spacing:
    var(--type-eyebrow-tracking);

  text-transform:
    var(--type-eyebrow-transform);

  text-shadow:
    var(--glow-primary-sm);
}


.c-aboutFleet__title {
  max-width:
    var(--type-heading-feature-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-feature-font);

  font-size:
    var(--type-heading-feature-size);

  font-weight:
    var(--type-heading-feature-weight);

  line-height:
    var(--type-heading-feature-leading);

  letter-spacing:
    var(--type-heading-feature-tracking);

  text-transform:
    var(--type-heading-feature-transform);

  text-wrap:
    balance;
}


.c-aboutFleet__intro {
  max-width:
    var(--type-body-lg-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-lg-font);

  font-size:
    var(--type-body-lg-size);

  font-weight:
    var(--type-body-lg-weight);

  line-height:
    var(--type-body-lg-leading);

  letter-spacing:
    var(--type-body-lg-tracking);

  text-wrap:
    pretty;
}


/* =========================================================
   FLEET CARD
========================================================= */

.c-fleetCard {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  width:
    var(--content-full);

  min-width:
    var(--inset-0);

  height:
    var(--content-full);

  background:
    var(--surface-card-bg);

  border:
    var(--stroke-control)
    solid
    var(--surface-card-border);

  border-radius:
    var(--radius-card-raised);

  box-shadow:
    var(--surface-card-highlight),
    var(--surface-card-shadow);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;

  transition:
    var(--transition-interactive);
}


.c-fleetCard:hover {
  background:
    var(--surface-card-raised-bg);

  border-color:
    var(--surface-card-raised-border);

  box-shadow:
    var(--surface-card-raised-highlight),
    var(--surface-card-raised-shadow),
    var(--glow-primary-sm);

  transform:
    translateY(
      var(--state-hover-translate-y)
    );
}


.c-fleetCard__media {
  position:
    relative;

  width:
    var(--content-full);

  min-width:
    var(--inset-0);

  aspect-ratio:
    var(--card-media-ratio);

  background:
    var(--media-bg-dark);

  border-block-end:
    var(--stroke-control)
    solid
    var(--card-media-border);

  overflow:
    hidden;
}


.c-fleetCard__image {
  display:
    block;

  width:
    var(--content-full);

  height:
    var(--content-full);

  object-fit:
    var(--card-media-fit);

  object-position:
    var(--card-media-position);

  filter:
    var(--card-media-filter);

  transform:
    scale(
      var(--scale-none)
    );

  transition:
    var(--media-transition-complete);
}


.c-fleetCard:hover
.c-fleetCard__image {
  filter:
    var(--media-filter-gallery-hover);

  transform:
    scale(
      var(--media-scale-hover)
    );
}


.c-fleetCard__badge {
  position:
    absolute;

  inset-block-start:
    var(--space-4);

  inset-inline-start:
    var(--space-4);

  display:
    inline-flex;

  align-items:
    center;

  min-height:
    var(--chip-h);

  padding-inline:
    var(--chip-padding-x);

  gap:
    var(--chip-gap);

  background:
    var(--chip-bg-selected);

  border:
    var(--stroke-control)
    solid
    var(--chip-border-selected);

  border-radius:
    var(--chip-radius);

  box-shadow:
    var(--state-selected-shadow),
    var(--glow-primary-sm);

  color:
    var(--chip-text-selected);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--weight-bold);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);
}


.c-fleetCard__body {
  display:
    flex;

  flex-direction:
    column;

  flex:
    var(--flex-grow);

  width:
    var(--content-full);

  min-width:
    var(--inset-0);

  padding:
    var(--space-card-padding);

  gap:
    var(--space-card-gap);
}


.c-fleetCard__unit {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--weight-bold);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);

  text-shadow:
    var(--glow-primary-sm);
}


.c-fleetCard__name {
  max-width:
    var(--type-heading-card-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-card-font);

  font-size:
    var(--type-heading-card-size);

  font-weight:
    var(--type-heading-card-weight);

  line-height:
    var(--type-heading-card-leading);

  letter-spacing:
    var(--type-heading-card-tracking);

  text-transform:
    var(--type-heading-card-transform);

  text-wrap:
    balance;
}


.c-fleetCard__description {
  max-width:
    var(--type-body-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-font);

  font-size:
    var(--type-body-size);

  font-weight:
    var(--type-body-weight);

  line-height:
    var(--type-body-leading);

  letter-spacing:
    var(--type-body-tracking);

  text-wrap:
    pretty;
}


.c-fleetCard__specs {
  display:
    grid;

  grid-template-columns:
    var(--cols-2);

  margin:
    var(--space-stack-gap-compact)
    var(--inset-0)
    var(--inset-0);

  background:
    var(--surface-recessed-bg);

  border:
    var(--stroke-control)
    solid
    var(--surface-recessed-border);

  border-radius:
    var(--radius-card);

  box-shadow:
    var(--surface-recessed-shadow);

  overflow:
    hidden;
}


.c-fleetCard__spec {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    var(--inset-0);

  padding:
    var(--space-4);

  gap:
    var(--space-2);
}


.c-fleetCard__specLabel {
  color:
    var(--fg-tertiary);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--type-meta-weight);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);
}


.c-fleetCard__specValue {
  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-label-font);

  font-size:
    var(--type-label-size);

  font-weight:
    var(--weight-semibold);

  line-height:
    var(--type-label-leading);

  letter-spacing:
    var(--type-label-tracking);
}


.c-fleetCard__capabilities {
  display:
    flex;

  flex-wrap:
    wrap;

  margin:
    auto
    var(--inset-0)
    var(--inset-0);

  padding:
    var(--inset-0);

  gap:
    var(--space-inline-gap-sm);

  list-style:
    none;
}


.c-fleetCard__capability {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    var(--chip-h);

  padding-inline:
    var(--chip-padding-x);

  background:
    var(--chip-bg);

  border:
    var(--stroke-control)
    solid
    var(--chip-border);

  border-radius:
    var(--chip-radius);

  color:
    var(--chip-text);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--type-meta-weight);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);
}


/* =========================================================
   04. OPERATIONS
========================================================= */

.c-aboutOperations {
  position:
    relative;

  background:
    var(--background-gradient-surface);

  border-block:
    var(--divider-size-thin)
    solid
    var(--divider-default);

  box-shadow:
    var(--surface-section-shadow);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


.c-aboutOperations__eyebrow {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-eyebrow-font);

  font-size:
    var(--type-eyebrow-size);

  font-weight:
    var(--type-eyebrow-weight);

  line-height:
    var(--type-eyebrow-leading);

  letter-spacing:
    var(--type-eyebrow-tracking);

  text-transform:
    var(--type-eyebrow-transform);
}


.c-aboutOperations__title {
  max-width:
    var(--type-heading-feature-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-feature-font);

  font-size:
    var(--type-heading-feature-size);

  font-weight:
    var(--type-heading-feature-weight);

  line-height:
    var(--type-heading-feature-leading);

  letter-spacing:
    var(--type-heading-feature-tracking);

  text-transform:
    var(--type-heading-feature-transform);

  text-wrap:
    balance;
}


.c-aboutOperations__intro {
  max-width:
    var(--type-body-lg-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-lg-font);

  font-size:
    var(--type-body-lg-size);

  font-weight:
    var(--type-body-lg-weight);

  line-height:
    var(--type-body-lg-leading);

  letter-spacing:
    var(--type-body-lg-tracking);

  text-wrap:
    pretty;
}


.c-aboutOperation {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  height:
    var(--content-full);

  padding:
    var(--space-card-padding);

  gap:
    var(--space-card-gap);

  background:
    var(--surface-card-bg);

  border:
    var(--stroke-control)
    solid
    var(--surface-card-border);

  border-radius:
    var(--radius-card-raised);

  box-shadow:
    var(--surface-card-highlight),
    var(--surface-card-shadow);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;

  transition:
    var(--transition-interactive);
}


.c-aboutOperation:hover {
  background:
    var(--surface-card-raised-bg);

  border-color:
    var(--border-primary-strong);

  box-shadow:
    var(--surface-card-raised-highlight),
    var(--surface-card-raised-shadow),
    var(--glow-primary-sm);

  transform:
    translateY(
      var(--state-hover-translate-y)
    );
}


.c-aboutOperation__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    var(--media-size-icon-image);

  height:
    var(--media-size-icon-image);

  background:
    var(--surface-primary-subtle);

  border:
    var(--stroke-control)
    solid
    var(--border-primary);

  border-radius:
    var(--radius-control-lg);

  box-shadow:
    var(--glow-primary-sm);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-stat-sm-font);

  font-size:
    var(--type-stat-sm-size);

  font-weight:
    var(--type-stat-sm-weight);

  line-height:
    var(--type-stat-sm-leading);

  letter-spacing:
    var(--type-stat-sm-tracking);

  font-feature-settings:
    var(--type-stat-sm-feature);
}


.c-aboutOperation__title {
  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-card-font);

  font-size:
    var(--type-heading-card-size);

  font-weight:
    var(--type-heading-card-weight);

  line-height:
    var(--type-heading-card-leading);

  letter-spacing:
    var(--type-heading-card-tracking);

  text-transform:
    var(--type-heading-card-transform);

  text-wrap:
    balance;
}


.c-aboutOperation__text {
  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-font);

  font-size:
    var(--type-body-size);

  font-weight:
    var(--type-body-weight);

  line-height:
    var(--type-body-leading);

  letter-spacing:
    var(--type-body-tracking);

  text-wrap:
    pretty;
}


/* =========================================================
   05. TEAM
========================================================= */

.c-aboutTeam {
  position:
    relative;

  background-color:
    var(--surface-level-0-bg);

  background-image:
    var(--aura-gradient-accent-soft),
    var(--background-gradient-dark);

  background-position:
    var(--aura-position-top-end),
    var(--position-center);

  background-repeat:
    var(--background-repeat-none),
    var(--background-repeat-none);

  border-block:
    var(--divider-size-thin)
    solid
    var(--border-accent-strong);

  box-shadow:
    var(--surface-section-shadow),
    var(--glow-accent-sm);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


.c-aboutTeam__eyebrow {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-accent);

  font-family:
    var(--type-eyebrow-font);

  font-size:
    var(--type-eyebrow-size);

  font-weight:
    var(--type-eyebrow-weight);

  line-height:
    var(--type-eyebrow-leading);

  letter-spacing:
    var(--type-eyebrow-tracking);

  text-transform:
    var(--type-eyebrow-transform);

  text-shadow:
    var(--glow-accent-sm);
}


.c-aboutTeam__title {
  max-width:
    var(--type-heading-feature-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-feature-font);

  font-size:
    var(--type-heading-feature-size);

  font-weight:
    var(--type-heading-feature-weight);

  line-height:
    var(--type-heading-feature-leading);

  letter-spacing:
    var(--type-heading-feature-tracking);

  text-transform:
    var(--type-heading-feature-transform);

  text-wrap:
    balance;
}


.c-aboutTeam__intro {
  max-width:
    var(--type-body-lg-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-lg-font);

  font-size:
    var(--type-body-lg-size);

  font-weight:
    var(--type-body-lg-weight);

  line-height:
    var(--type-body-lg-leading);

  letter-spacing:
    var(--type-body-lg-tracking);

  text-wrap:
    pretty;
}


.c-teamCard {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  width:
    var(--content-full);

  min-width:
    var(--inset-0);

  height:
    var(--content-full);

  background:
    var(--glass-default-bg);

  border:
    var(--stroke-control)
    solid
    var(--glass-default-border);

  border-radius:
    var(--radius-card-raised);

  box-shadow:
    var(--glass-default-highlight),
    var(--glass-default-shadow);

  color:
    var(--fg-primary);

  backdrop-filter:
    blur(
      var(--glass-default-blur)
    );

  overflow:
    hidden;

  isolation:
    isolate;

  transition:
    var(--transition-interactive);
}


.c-teamCard:hover {
  background:
    var(--glass-strong-bg);

  border-color:
    var(--border-accent-strong);

  box-shadow:
    var(--glass-strong-highlight),
    var(--glass-strong-shadow),
    var(--glow-accent-sm);

  transform:
    translateY(
      var(--state-hover-translate-y)
    );
}


.c-teamCard__media {
  position:
    relative;

  width:
    var(--content-full);

  min-width:
    var(--inset-0);

  aspect-ratio:
    var(--card-media-ratio);

  background:
    var(--media-bg-dark);

  border-block-end:
    var(--stroke-control)
    solid
    var(--border-accent-strong);

  overflow:
    hidden;
}


.c-teamCard__image {
  display:
    block;

  width:
    var(--content-full);

  height:
    var(--content-full);

  object-fit:
    var(--card-media-fit);

  object-position:
    var(--card-media-position);

  filter:
    var(--card-media-filter);

  transform:
    scale(
      var(--scale-none)
    );

  transition:
    var(--media-transition-complete);
}


.c-teamCard:hover
.c-teamCard__image {
  filter:
    var(--media-filter-gallery-hover);

  transform:
    scale(
      var(--media-scale-hover)
    );
}


.c-teamCard__body {
  display:
    flex;

  flex-direction:
    column;

  flex:
    var(--flex-grow);

  width:
    var(--content-full);

  min-width:
    var(--inset-0);

  padding:
    var(--space-card-padding);

  gap:
    var(--space-card-gap);
}


.c-teamCard__name {
  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-card-font);

  font-size:
    var(--type-heading-card-size);

  font-weight:
    var(--type-heading-card-weight);

  line-height:
    var(--type-heading-card-leading);

  letter-spacing:
    var(--type-heading-card-tracking);

  text-transform:
    var(--type-heading-card-transform);

  text-wrap:
    balance;
}


.c-teamCard__role {
  width:
    fit-content;

  margin:
    var(--inset-0);

  padding-inline:
    var(--chip-padding-x);

  min-height:
    var(--chip-h);

  display:
    inline-flex;

  align-items:
    center;

  background:
    var(--surface-emphasis-accent-bg);

  border:
    var(--stroke-control)
    solid
    var(--border-accent-strong);

  border-radius:
    var(--chip-radius);

  box-shadow:
    var(--surface-emphasis-accent-highlight),
    var(--glow-accent-sm);

  color:
    var(--fg-brand-accent);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--weight-semibold);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);
}


.c-teamCard__text {
  max-width:
    var(--type-body-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-font);

  font-size:
    var(--type-body-size);

  font-weight:
    var(--type-body-weight);

  line-height:
    var(--type-body-leading);

  letter-spacing:
    var(--type-body-tracking);

  text-wrap:
    pretty;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .c-aboutHero__stat,
  .c-aboutStory__image,
  .c-fleetCard,
  .c-fleetCard__image,
  .c-aboutOperation,
  .c-teamCard,
  .c-teamCard__image {
    transition:
      var(--transition-reduced);
  }

  .c-aboutHero__stat:hover,
  .c-aboutStory__media:hover
  .c-aboutStory__image,
  .c-fleetCard:hover,
  .c-fleetCard:hover
  .c-fleetCard__image,
  .c-aboutOperation:hover,
  .c-teamCard:hover,
  .c-teamCard:hover
  .c-teamCard__image {
    transform:
      none;
  }

}
/* =========================================================
   CONTACT PAGE
   HIGH-END COMPONENT ADDITIONS

   BUILD MODE
   Frozen selectors only.
   Existing tokens only.
   No layout ownership.
========================================================= */


/* =========================================================
   01. CONTACT HERO
========================================================= */

.c-contactHero {
  position:
    relative;

  background-color:
    var(--surface-level-0-bg);

  background-image:
    var(--aura-feature-image),
    var(--background-gradient-dark);

  border-block-end:
    var(--divider-size-thin)
    solid
    var(--border-primary-subtle);

  box-shadow:
    var(--surface-section-shadow),
    var(--glow-primary-sm);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


.c-contactHero__eyebrow {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-eyebrow-font);

  font-size:
    var(--type-eyebrow-size);

  font-weight:
    var(--type-eyebrow-weight);

  line-height:
    var(--type-eyebrow-leading);

  letter-spacing:
    var(--type-eyebrow-tracking);

  text-transform:
    var(--type-eyebrow-transform);

  text-shadow:
    var(--glow-primary-sm);
}


.c-contactHero__title {
  max-width:
    var(--type-heading-display-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-display-font);

  font-size:
    var(--type-heading-display-size);

  font-weight:
    var(--type-heading-display-weight);

  line-height:
    var(--type-heading-display-leading);

  letter-spacing:
    var(--type-heading-display-tracking);

  text-transform:
    var(--type-heading-display-transform);

  text-wrap:
    balance;
}


.c-contactHero__intro {
  max-width:
    var(--type-lead-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-lead-font);

  font-size:
    var(--type-lead-size);

  font-weight:
    var(--type-lead-weight);

  line-height:
    var(--type-lead-leading);

  letter-spacing:
    var(--type-lead-tracking);

  text-wrap:
    pretty;
}


.c-contactHero__meta {
  color:
    var(--fg-primary);
}


.c-contactHero__stat {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  min-width:
    var(--inset-0);

  min-height:
    var(--dimension-130);

  padding:
    var(--space-card-padding-sm);

  gap:
    var(--space-stack-gap-compact);

  background:
    var(--glass-default-bg);

  border:
    var(--stroke-control)
    solid
    var(--glass-default-border);

  border-block-start-color:
    var(--border-primary-strong);

  border-radius:
    var(--radius-card-raised);

  box-shadow:
    var(--glass-default-highlight),
    var(--glass-default-shadow),
    var(--glow-primary-sm);

  color:
    var(--fg-primary);

  backdrop-filter:
    blur(
      var(--glass-default-blur)
    );

  overflow:
    hidden;

  isolation:
    isolate;
}


.c-contactHero__statValue {
  color:
    var(--fg-primary);

  font-family:
    var(--type-stat-sm-font);

  font-size:
    var(--type-stat-sm-size);

  font-weight:
    var(--type-stat-sm-weight);

  line-height:
    var(--type-stat-sm-leading);

  letter-spacing:
    var(--type-stat-sm-tracking);

  font-feature-settings:
    var(--type-stat-sm-feature);

  text-wrap:
    balance;
}


.c-contactHero__statLabel {
  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--type-meta-weight);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);
}


/* =========================================================
   02. CONTACT METHODS
========================================================= */

.c-contactMethods {
  position:
    relative;

  background:
    var(--background-gradient-surface);

  border-block-end:
    var(--divider-size-thin)
    solid
    var(--divider-default);

  box-shadow:
    var(--surface-section-shadow);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


.c-contactMethod {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  height:
    var(--content-full);

  min-width:
    var(--inset-0);

  padding:
    var(--space-card-padding);

  gap:
    var(--space-card-gap);

  background:
    var(--surface-card-bg);

  border:
    var(--stroke-control)
    solid
    var(--surface-card-border);

  border-block-start:
    var(--rail-size-lg)
    solid
    var(--rail-primary);

  border-radius:
    var(--radius-card-raised);

  box-shadow:
    var(--surface-card-highlight),
    var(--surface-card-shadow);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


.c-contactMethod__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    var(--icon-container-sm);

  height:
    var(--icon-container-sm);

  background:
    var(--surface-primary-subtle);

  border:
    var(--stroke-control)
    solid
    var(--border-primary);

  border-radius:
    var(--radius-control-lg);

  box-shadow:
    var(--glow-primary-sm);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-label-font);

  font-size:
    var(--type-label-size);

  font-weight:
    var(--weight-bold);

  line-height:
    var(--lh-none);

  letter-spacing:
    var(--type-label-tracking);

  text-transform:
    var(--type-label-transform);
}


.c-contactMethod__label {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--type-meta-weight);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);
}


.c-contactMethod__value {
  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-card-font);

  font-size:
    var(--type-heading-card-size);

  font-weight:
    var(--type-heading-card-weight);

  line-height:
    var(--type-heading-card-leading);

  letter-spacing:
    var(--type-heading-card-tracking);

  text-transform:
    var(--type-heading-card-transform);

  text-wrap:
    balance;
}


.c-contactMethod__text {
  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-font);

  font-size:
    var(--type-body-size);

  font-weight:
    var(--type-body-weight);

  line-height:
    var(--type-body-leading);

  letter-spacing:
    var(--type-body-tracking);

  text-wrap:
    pretty;
}


.c-contactMethod__link {
  display:
    inline-flex;

  align-items:
    center;

  width:
    fit-content;

  min-height:
    var(--interaction-target-min);

  margin-block-start:
    auto;

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-label-font);

  font-size:
    var(--type-label-size);

  font-weight:
    var(--weight-semibold);

  line-height:
    var(--type-label-leading);

  letter-spacing:
    var(--type-label-tracking);

  text-decoration:
    var(--decoration-none);
}


/* =========================================================
   03. CONTACT REQUEST SECTION
========================================================= */

.c-contactRequest {
  position:
    relative;

  background-color:
    var(--surface-level-0-bg);

  background-image:
    var(--aura-gradient-primary-soft),
    var(--background-gradient-dark);

  background-position:
    var(--aura-position-top-end),
    var(--position-center);

  background-repeat:
    var(--background-repeat-none),
    var(--background-repeat-none);

  border-block:
    var(--divider-size-thin)
    solid
    var(--border-primary-subtle);

  box-shadow:
    var(--surface-section-shadow),
    var(--glow-primary-sm);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


.c-contactRequest__eyebrow {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-eyebrow-font);

  font-size:
    var(--type-eyebrow-size);

  font-weight:
    var(--type-eyebrow-weight);

  line-height:
    var(--type-eyebrow-leading);

  letter-spacing:
    var(--type-eyebrow-tracking);

  text-transform:
    var(--type-eyebrow-transform);

  text-shadow:
    var(--glow-primary-sm);
}


.c-contactRequest__title {
  max-width:
    var(--type-heading-feature-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-feature-font);

  font-size:
    var(--type-heading-feature-size);

  font-weight:
    var(--type-heading-feature-weight);

  line-height:
    var(--type-heading-feature-leading);

  letter-spacing:
    var(--type-heading-feature-tracking);

  text-transform:
    var(--type-heading-feature-transform);

  text-wrap:
    balance;
}


.c-contactRequest__intro {
  max-width:
    var(--type-body-lg-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-lg-font);

  font-size:
    var(--type-body-lg-size);

  font-weight:
    var(--type-body-lg-weight);

  line-height:
    var(--type-body-lg-leading);

  letter-spacing:
    var(--type-body-lg-tracking);

  text-wrap:
    pretty;
}


.c-contactRequest__panel {
  position:
    relative;

  padding:
    var(--space-panel-padding);

  background:
    var(--surface-glass-strong-bg);

  border:
    var(--stroke-control)
    solid
    var(--surface-glass-strong-border);

  border-radius:
    var(--radius-panel-raised);

  box-shadow:
    var(--surface-glass-strong-highlight),
    var(--surface-glass-strong-shadow),
    var(--glow-primary-md);

  color:
    var(--fg-primary);

  backdrop-filter:
    blur(
      var(--glass-strong-blur)
    );

  overflow:
    hidden;

  isolation:
    isolate;
}


/* =========================================================
   04. SHARED RONNIE'S CONFIRMATION FORM
========================================================= */

.c-confirmationRequest {
  position:
    relative;

  color:
    var(--fg-primary);
}


.c-confirmationRequest__header {
  padding-block-end:
    var(--space-5);

  border-block-end:
    var(--divider-size-thin)
    solid
    var(--divider-primary);

  color:
    var(--fg-primary);
}


.c-confirmationRequest__eyebrow {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-accent);

  font-family:
    var(--type-eyebrow-font);

  font-size:
    var(--type-eyebrow-size);

  font-weight:
    var(--type-eyebrow-weight);

  line-height:
    var(--type-eyebrow-leading);

  letter-spacing:
    var(--type-eyebrow-tracking);

  text-transform:
    var(--type-eyebrow-transform);

  text-shadow:
    var(--glow-accent-sm);
}


.c-confirmationRequest__title {
  max-width:
    var(--type-heading-section-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-section-font);

  font-size:
    var(--type-heading-section-size);

  font-weight:
    var(--type-heading-section-weight);

  line-height:
    var(--type-heading-section-leading);

  letter-spacing:
    var(--type-heading-section-tracking);

  text-transform:
    var(--type-heading-section-transform);

  text-wrap:
    balance;
}


.c-confirmationRequest__intro {
  max-width:
    var(--type-body-lg-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-font);

  font-size:
    var(--type-body-size);

  font-weight:
    var(--type-body-weight);

  line-height:
    var(--type-body-leading);

  letter-spacing:
    var(--type-body-tracking);

  text-wrap:
    pretty;
}


.c-confirmationRequest__form {
  width:
    var(--content-full);

  color:
    var(--fg-primary);
}


.c-confirmationRequest__field {
  display:
    flex;

  flex-direction:
    column;

  width:
    var(--content-full);

  min-width:
    var(--inset-0);

  gap:
    var(--field-group-gap);
}


.c-confirmationRequest__label {
  margin:
    var(--inset-0);

  color:
    var(--label-text);

  font-family:
    var(--label-font);

  font-size:
    var(--label-size);

  font-weight:
    var(--label-weight);

  line-height:
    var(--label-leading);

  letter-spacing:
    var(--label-tracking);
}


.c-confirmationRequest__input {
  display:
    block;

  width:
    var(--content-full);

  min-height:
    var(--control-h-md);

  padding:
    var(--control-padding-y-md)
    var(--control-padding-x-md);

  background:
    var(--glass-subtle-bg);

  border:
    var(--stroke-control)
    solid
    var(--glass-subtle-border);

  border-radius:
    var(--radius-input);

  box-shadow:
    var(--input-shadow);

  color:
    var(--input-text);

  caret-color:
    var(--input-caret);

  font-family:
    var(--type-body-font);

  font-size:
    var(--type-body-size);

  font-weight:
    var(--type-body-weight);

  line-height:
    var(--type-body-leading);

  letter-spacing:
    var(--type-body-tracking);

  transition:
    var(--input-transition);
}


.c-confirmationRequest__textarea {
  display:
    block;

  width:
    var(--content-full);

  min-height:
    var(--textarea-min-h);

  padding:
    var(--textarea-padding-y)
    var(--textarea-padding-x);

  background:
    var(--glass-subtle-bg);

  border:
    var(--stroke-control)
    solid
    var(--glass-subtle-border);

  border-radius:
    var(--radius-textarea);

  box-shadow:
    var(--input-shadow);

  color:
    var(--input-text);

  caret-color:
    var(--input-caret);

  font-family:
    var(--type-body-font);

  font-size:
    var(--type-body-size);

  font-weight:
    var(--type-body-weight);

  line-height:
    var(--type-body-leading);

  letter-spacing:
    var(--type-body-tracking);

  resize:
    var(--textarea-resize);

  transition:
    var(--input-transition);
}


.c-confirmationRequest__help {
  margin:
    var(--inset-0);

  color:
    var(--helper-text);

  font-family:
    var(--helper-font);

  font-size:
    var(--helper-size);

  font-weight:
    var(--helper-weight);

  line-height:
    var(--helper-leading);

  letter-spacing:
    var(--helper-tracking);

  text-wrap:
    pretty;
}


.c-confirmationRequest__status {
  padding:
    var(--form-status-padding);

  background:
    var(--surface-recessed-bg);

  border:
    var(--stroke-control)
    solid
    var(--surface-recessed-border);

  border-radius:
    var(--form-status-radius);

  box-shadow:
    var(--surface-recessed-shadow);

  color:
    var(--fg-secondary);
}


.c-confirmationRequest__statusTitle {
  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-card-font);

  font-size:
    var(--type-heading-card-size);

  font-weight:
    var(--type-heading-card-weight);

  line-height:
    var(--type-heading-card-leading);

  letter-spacing:
    var(--type-heading-card-tracking);

  text-transform:
    var(--type-heading-card-transform);
}


.c-confirmationRequest__statusText {
  margin:
    var(--inset-0);

  color:
    inherit;

  font-family:
    var(--type-body-font);

  font-size:
    var(--type-body-size);

  font-weight:
    var(--type-body-weight);

  line-height:
    var(--type-body-leading);

  letter-spacing:
    var(--type-body-tracking);

  text-wrap:
    pretty;
}


/* =========================================================
   05. CONTACT REQUIREMENTS
========================================================= */

.c-contactRequirements {
  position:
    relative;

  background:
    var(--background-gradient-surface);

  border-block-end:
    var(--divider-size-thin)
    solid
    var(--divider-default);

  box-shadow:
    var(--surface-section-shadow);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


.c-contactRequirements__eyebrow {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-eyebrow-font);

  font-size:
    var(--type-eyebrow-size);

  font-weight:
    var(--type-eyebrow-weight);

  line-height:
    var(--type-eyebrow-leading);

  letter-spacing:
    var(--type-eyebrow-tracking);

  text-transform:
    var(--type-eyebrow-transform);
}


.c-contactRequirements__title {
  max-width:
    var(--type-heading-feature-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-feature-font);

  font-size:
    var(--type-heading-feature-size);

  font-weight:
    var(--type-heading-feature-weight);

  line-height:
    var(--type-heading-feature-leading);

  letter-spacing:
    var(--type-heading-feature-tracking);

  text-transform:
    var(--type-heading-feature-transform);

  text-wrap:
    balance;
}


.c-contactRequirements__intro {
  max-width:
    var(--type-body-lg-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-lg-font);

  font-size:
    var(--type-body-lg-size);

  font-weight:
    var(--type-body-lg-weight);

  line-height:
    var(--type-body-lg-leading);

  letter-spacing:
    var(--type-body-lg-tracking);

  text-wrap:
    pretty;
}


.c-contactRequirement {
  position:
    relative;

  height:
    var(--content-full);

  padding:
    var(--space-card-padding);

  background:
    var(--surface-card-bg);

  border:
    var(--stroke-control)
    solid
    var(--surface-card-border);

  border-radius:
    var(--radius-card-raised);

  box-shadow:
    var(--surface-card-highlight),
    var(--surface-card-shadow);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


.c-contactRequirement__number {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-stat-sm-font);

  font-size:
    var(--type-stat-sm-size);

  font-weight:
    var(--type-stat-sm-weight);

  line-height:
    var(--type-stat-sm-leading);

  letter-spacing:
    var(--type-stat-sm-tracking);

  font-feature-settings:
    var(--type-stat-sm-feature);

  text-shadow:
    var(--glow-primary-sm);
}


.c-contactRequirement__title {
  max-width:
    var(--type-heading-card-measure);

  margin:
    var(--space-stack-gap-compact)
    var(--inset-0)
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-card-font);

  font-size:
    var(--type-heading-card-size);

  font-weight:
    var(--type-heading-card-weight);

  line-height:
    var(--type-heading-card-leading);

  letter-spacing:
    var(--type-heading-card-tracking);

  text-transform:
    var(--type-heading-card-transform);

  text-wrap:
    balance;
}


.c-contactRequirement__text {
  max-width:
    var(--type-body-measure);

  margin:
    var(--space-stack-gap)
    var(--inset-0)
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-font);

  font-size:
    var(--type-body-size);

  font-weight:
    var(--type-body-weight);

  line-height:
    var(--type-body-leading);

  letter-spacing:
    var(--type-body-tracking);

  text-wrap:
    pretty;
}


/* =========================================================
   06. CONTACT SERVICE AREA
========================================================= */

.c-contactServiceArea {
  position:
    relative;

  background-color:
    var(--surface-level-0-bg);

  background-image:
    var(--aura-gradient-accent-soft),
    var(--background-gradient-dark);

  background-position:
    var(--aura-position-top-end),
    var(--position-center);

  background-repeat:
    var(--background-repeat-none),
    var(--background-repeat-none);

  border-block:
    var(--divider-size-thin)
    solid
    var(--border-accent-subtle);

  box-shadow:
    var(--surface-section-shadow),
    var(--glow-accent-sm);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


.c-contactServiceArea__eyebrow {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-accent);

  font-family:
    var(--type-eyebrow-font);

  font-size:
    var(--type-eyebrow-size);

  font-weight:
    var(--type-eyebrow-weight);

  line-height:
    var(--type-eyebrow-leading);

  letter-spacing:
    var(--type-eyebrow-tracking);

  text-transform:
    var(--type-eyebrow-transform);

  text-shadow:
    var(--glow-accent-sm);
}


.c-contactServiceArea__title {
  max-width:
    var(--type-heading-feature-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-feature-font);

  font-size:
    var(--type-heading-feature-size);

  font-weight:
    var(--type-heading-feature-weight);

  line-height:
    var(--type-heading-feature-leading);

  letter-spacing:
    var(--type-heading-feature-tracking);

  text-transform:
    var(--type-heading-feature-transform);

  text-wrap:
    balance;
}


.c-contactServiceArea__text {
  max-width:
    var(--type-body-lg-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-lg-font);

  font-size:
    var(--type-body-lg-size);

  font-weight:
    var(--type-body-lg-weight);

  line-height:
    var(--type-body-lg-leading);

  letter-spacing:
    var(--type-body-lg-tracking);

  text-wrap:
    pretty;
}


.c-contactServiceArea__meta {
  color:
    var(--fg-primary);
}


.c-contactServiceArea__item {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  min-width:
    var(--inset-0);

  padding:
    var(--space-card-padding-sm);

  gap:
    var(--space-inline-gap);

  background:
    var(--glass-default-bg);

  border:
    var(--stroke-control)
    solid
    var(--glass-default-border);

  border-inline-start-color:
    var(--border-accent-strong);

  border-radius:
    var(--radius-card);

  box-shadow:
    var(--glass-default-highlight),
    var(--glass-default-shadow),
    var(--glow-accent-sm);

  backdrop-filter:
    blur(
      var(--glass-default-blur)
    );
}


.c-contactServiceArea__label {
  color:
    var(--fg-secondary);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--type-meta-weight);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);
}


.c-contactServiceArea__value {
  color:
    var(--fg-brand-accent);

  font-family:
    var(--type-label-font);

  font-size:
    var(--type-label-size);

  font-weight:
    var(--weight-bold);

  line-height:
    var(--type-label-leading);

  letter-spacing:
    var(--type-label-tracking);

  text-align:
    right;

  text-transform:
    var(--type-label-transform);
}


/* =========================================================
   07. COMMERCIAL CONTACT STRIP
========================================================= */

.c-contactCommercial {
  position:
    relative;

  background:
    var(--background-gradient-primary);

  border-block:
    var(--divider-size-thin)
    solid
    var(--border-primary);

  box-shadow:
    var(--surface-section-shadow),
    var(--glow-primary-sm);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


.c-contactCommercial__eyebrow {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-eyebrow-font);

  font-size:
    var(--type-eyebrow-size);

  font-weight:
    var(--type-eyebrow-weight);

  line-height:
    var(--type-eyebrow-leading);

  letter-spacing:
    var(--type-eyebrow-tracking);

  text-transform:
    var(--type-eyebrow-transform);

  text-shadow:
    var(--glow-primary-sm);
}


.c-contactCommercial__title {
  max-width:
    var(--type-heading-feature-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-feature-font);

  font-size:
    var(--type-heading-feature-size);

  font-weight:
    var(--type-heading-feature-weight);

  line-height:
    var(--type-heading-feature-leading);

  letter-spacing:
    var(--type-heading-feature-tracking);

  text-transform:
    var(--type-heading-feature-transform);

  text-wrap:
    balance;
}


.c-contactCommercial__text {
  max-width:
    var(--type-body-lg-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-lg-font);

  font-size:
    var(--type-body-lg-size);

  font-weight:
    var(--type-body-lg-weight);

  line-height:
    var(--type-body-lg-leading);

  letter-spacing:
    var(--type-body-lg-tracking);

  text-wrap:
    pretty;
}


/* =========================================================
   CONTACT PAGE
   RESPONSIVE COMPONENT TUNING
========================================================= */

@media (max-width: 48rem) {

  .c-contactHero__title,
  .c-contactRequest__title,
  .c-contactRequirements__title,
  .c-contactServiceArea__title,
  .c-contactCommercial__title {
    font-size:
      var(--type-heading-section-size);
  }


  .c-contactMethod,
  .c-contactRequirement {
    padding:
      var(--space-card-padding-sm);

    border-radius:
      var(--radius-card);
  }


  .c-contactRequest__panel {
    padding:
      var(--space-card-padding-sm);

    border-radius:
      var(--radius-panel);
  }


  .c-confirmationRequest__title {
    font-size:
      var(--type-heading-card-size);
  }


  .c-confirmationRequest__input {
    min-height:
      var(--control-h-lg);
  }


  .c-contactServiceArea__item {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .c-contactServiceArea__value {
    text-align:
      left;
  }

}

/* =========================================================
   PRIVACY / LEGAL PAGE
   HIGH-END COMPONENT ADDITIONS

   BUILD MODE
   Frozen selectors only.
   Existing tokens only.
   No layout ownership.
========================================================= */


/* =========================================================
   01. LEGAL HERO
========================================================= */

.c-legalHero {
  position:
    relative;

  background-color:
    var(--surface-level-0-bg);

  background-image:
    var(--aura-feature-image),
    var(--background-gradient-dark);

  border-block-end:
    var(--divider-size-thin)
    solid
    var(--border-primary-subtle);

  box-shadow:
    var(--surface-section-shadow),
    var(--glow-primary-sm);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


.c-legalHero__eyebrow {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-eyebrow-font);

  font-size:
    var(--type-eyebrow-size);

  font-weight:
    var(--type-eyebrow-weight);

  line-height:
    var(--type-eyebrow-leading);

  letter-spacing:
    var(--type-eyebrow-tracking);

  text-transform:
    var(--type-eyebrow-transform);

  text-shadow:
    var(--glow-primary-sm);
}


.c-legalHero__title {
  max-width:
    var(--type-heading-display-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-display-font);

  font-size:
    var(--type-heading-display-size);

  font-weight:
    var(--type-heading-display-weight);

  line-height:
    var(--type-heading-display-leading);

  letter-spacing:
    var(--type-heading-display-tracking);

  text-transform:
    var(--type-heading-display-transform);

  text-wrap:
    balance;
}


.c-legalHero__intro {
  max-width:
    var(--type-lead-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-lead-font);

  font-size:
    var(--type-lead-size);

  font-weight:
    var(--type-lead-weight);

  line-height:
    var(--type-lead-leading);

  letter-spacing:
    var(--type-lead-tracking);

  text-wrap:
    pretty;
}


.c-legalHero__meta {
  color:
    var(--fg-primary);
}


.c-legalHero__metaItem {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  min-width:
    var(--inset-0);

  min-height:
    var(--dimension-130);

  padding:
    var(--space-card-padding-sm);

  gap:
    var(--space-stack-gap-compact);

  background:
    var(--glass-default-bg);

  border:
    var(--stroke-control)
    solid
    var(--glass-default-border);

  border-block-start-color:
    var(--border-primary-strong);

  border-radius:
    var(--radius-card-raised);

  box-shadow:
    var(--glass-default-highlight),
    var(--glass-default-shadow),
    var(--glow-primary-sm);

  color:
    var(--fg-primary);

  backdrop-filter:
    blur(
      var(--glass-default-blur)
    );

  overflow:
    hidden;

  isolation:
    isolate;
}


.c-legalHero__metaLabel {
  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--type-meta-weight);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);
}


.c-legalHero__metaValue {
  color:
    var(--fg-primary);

  font-family:
    var(--type-stat-sm-font);

  font-size:
    var(--type-stat-sm-size);

  font-weight:
    var(--type-stat-sm-weight);

  line-height:
    var(--type-stat-sm-leading);

  letter-spacing:
    var(--type-stat-sm-tracking);

  font-feature-settings:
    var(--type-stat-sm-feature);

  text-wrap:
    balance;
}


/* =========================================================
   02. LEGAL DOCUMENT
========================================================= */

.c-legalDocument {
  position:
    relative;

  background:
    var(--background-gradient-surface);

  border-block-end:
    var(--divider-size-thin)
    solid
    var(--divider-default);

  box-shadow:
    var(--surface-section-shadow);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


.c-legalDocument__section {
  position:
    relative;

  padding:
    var(--space-card-padding-lg);

  background:
    var(--surface-card-bg);

  border:
    var(--stroke-control)
    solid
    var(--surface-card-border);

  border-inline-start:
    var(--rail-size-lg)
    solid
    var(--rail-primary);

  border-radius:
    var(--radius-card-raised);

  box-shadow:
    var(--surface-card-highlight),
    var(--surface-card-shadow);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


.c-legalDocument__title {
  max-width:
    var(--type-heading-section-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-section-font);

  font-size:
    var(--type-heading-section-size);

  font-weight:
    var(--type-heading-section-weight);

  line-height:
    var(--type-heading-section-leading);

  letter-spacing:
    var(--type-heading-section-tracking);

  text-transform:
    var(--type-heading-section-transform);

  text-wrap:
    balance;
}


.c-legalDocument__subtitle {
  max-width:
    var(--type-heading-card-measure);

  margin:
    var(--space-stack-gap-compact)
    var(--inset-0)
    var(--inset-0);

  color:
    var(--fg-brand-accent);

  font-family:
    var(--type-heading-card-font);

  font-size:
    var(--type-heading-card-size);

  font-weight:
    var(--type-heading-card-weight);

  line-height:
    var(--type-heading-card-leading);

  letter-spacing:
    var(--type-heading-card-tracking);

  text-transform:
    var(--type-heading-card-transform);

  text-wrap:
    balance;
}


.c-legalDocument__text {
  max-width:
    var(--type-body-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-font);

  font-size:
    var(--type-body-size);

  font-weight:
    var(--type-body-weight);

  line-height:
    var(--type-body-leading);

  letter-spacing:
    var(--type-body-tracking);

  text-wrap:
    pretty;
}


.c-legalDocument__list {
  max-width:
    var(--type-body-measure);

  margin:
    var(--inset-0);

  padding-inline-start:
    var(--space-6);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-font);

  font-size:
    var(--type-body-size);

  font-weight:
    var(--type-body-weight);

  line-height:
    var(--type-body-leading);

  letter-spacing:
    var(--type-body-tracking);
}


.c-legalDocument__listItem {
  margin:
    var(--inset-0);

  padding-inline-start:
    var(--space-2);

  color:
    var(--fg-secondary);

  text-wrap:
    pretty;
}


.c-legalDocument__link {
  color:
    var(--fg-brand-primary);

  font-weight:
    var(--weight-semibold);

  text-decoration:
    underline;

  text-decoration-color:
    var(--border-primary-strong);

  text-underline-offset:
    var(--space-1);

  overflow-wrap:
    anywhere;
}


.c-legalDocument__note {
  max-width:
    var(--type-body-measure);

  margin:
    var(--inset-0);

  padding:
    var(--space-card-padding-sm);

  background:
    var(--surface-recessed-bg);

  border:
    var(--stroke-control)
    solid
    var(--surface-recessed-border);

  border-inline-start:
    var(--rail-size-lg)
    solid
    var(--rail-accent);

  border-radius:
    var(--radius-card);

  box-shadow:
    var(--surface-recessed-shadow),
    var(--glow-accent-sm);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-font);

  font-size:
    var(--type-body-size);

  font-weight:
    var(--type-body-weight);

  line-height:
    var(--type-body-leading);

  letter-spacing:
    var(--type-body-tracking);

  text-wrap:
    pretty;
}


/* =========================================================
   03. LEGAL CONTACT
========================================================= */

.c-legalContact {
  position:
    relative;

  background:
    var(--background-gradient-primary);

  border-block:
    var(--divider-size-thin)
    solid
    var(--border-primary);

  box-shadow:
    var(--surface-section-shadow),
    var(--glow-primary-sm);

  color:
    var(--fg-primary);

  overflow:
    hidden;

  isolation:
    isolate;
}


.c-legalContact__eyebrow {
  margin:
    var(--inset-0);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-eyebrow-font);

  font-size:
    var(--type-eyebrow-size);

  font-weight:
    var(--type-eyebrow-weight);

  line-height:
    var(--type-eyebrow-leading);

  letter-spacing:
    var(--type-eyebrow-tracking);

  text-transform:
    var(--type-eyebrow-transform);

  text-shadow:
    var(--glow-primary-sm);
}


.c-legalContact__title {
  max-width:
    var(--type-heading-feature-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-feature-font);

  font-size:
    var(--type-heading-feature-size);

  font-weight:
    var(--type-heading-feature-weight);

  line-height:
    var(--type-heading-feature-leading);

  letter-spacing:
    var(--type-heading-feature-tracking);

  text-transform:
    var(--type-heading-feature-transform);

  text-wrap:
    balance;
}


.c-legalContact__text {
  max-width:
    var(--type-body-lg-measure);

  margin:
    var(--inset-0);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-lg-font);

  font-size:
    var(--type-body-lg-size);

  font-weight:
    var(--type-body-lg-weight);

  line-height:
    var(--type-body-lg-leading);

  letter-spacing:
    var(--type-body-lg-tracking);

  text-wrap:
    pretty;
}


/* =========================================================
   PRIVACY / LEGAL PAGE
   MOBILE COMPONENT TUNING
========================================================= */

@media (max-width: 48rem) {

  .c-legalHero__title {
    font-size:
      var(--type-heading-feature-size);
  }


  .c-legalHero__metaItem {
    min-height:
      auto;

    border-radius:
      var(--radius-card);

    gap:
      var(--space-stack-gap-compact);
  }


  .c-legalDocument__section {
    padding:
      var(--space-card-padding);

    border-radius:
      var(--radius-card);
  }


  .c-legalDocument__title {
    font-size:
      var(--type-heading-card-size);
  }


  .c-legalDocument__subtitle {
    font-size:
      var(--type-body-lg-size);
  }


  .c-legalDocument__list {
    padding-inline-start:
      var(--space-5);
  }


  .c-legalDocument__note {
    padding:
      var(--space-card-padding-sm);
  }


  .c-legalContact__title {
    font-size:
      var(--type-heading-section-size);
  }

}
/* =========================================================
   GLOBAL REDUCED-MOTION COMPLETION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  /* =======================================================
     GLOBAL UI + HEADER
  ======================================================= */

  .c-skipLink,
  .c-button,
  .c-siteHeader,
  .c-logo,
  .c-logo__image,
  .c-primaryNav__link,
  .c-primaryNav__link::after,
  .c-siteHeader__cta,
  .c-siteHeader__mobileToggle,
  .c-siteHeader__toggleIcon,
  .c-siteHeader__toggleIcon::before,
  .c-siteHeader__toggleIcon::after,
  .c-mobileNav,
  .c-mobileNav__backdrop,
  .c-mobileNav__panel,
  .c-mobileNav__close,
  .c-mobileNav__link,
  .c-mobileNav__cta,
  .c-mobileNav[aria-hidden="false"] .c-mobileNav__backdrop,
  .c-mobileNav[aria-hidden="false"] .c-mobileNav__panel {
    transition:
      var(--transition-reduced);
  }


  /* =======================================================
     HOMEPAGE HERO
  ======================================================= */

  .c-homeHero__image {
    transition:
      var(--transition-reduced);
  }


  /* =======================================================
     COMMERCIAL BENEFIT CONTENT
  ======================================================= */

  .c-homeCommercialFleet__benefitTitle,
  .c-homeCommercialFleet__benefitText {
    transition:
      var(--transition-reduced);
  }


  /* =======================================================
     PARTNER DIVIDER
  ======================================================= */

  .c-partnerDivider__title,
  .c-partnerDivider__partner,
  .c-partnerDivider__partnerLink,
  .c-partnerDivider__partnerLogo,
  .c-partnerDivider__brand,
  .c-partnerDivider__brandLogo {
    transition:
      var(--transition-reduced);
  }


  /* =======================================================
     GALLERY
  ======================================================= */

  .c-galleryFilter__button,
  .c-gallerySlider__control,
  .c-galleryItem,
  .c-galleryItem__image,
  .c-galleryLightbox,
  .c-galleryLightbox__close,
  .c-galleryLightbox__control,
  .c-galleryFilmstrip__item {
    transition:
      var(--transition-reduced);
  }


  /* =======================================================
     CONFIRMATION REQUEST
  ======================================================= */

  .c-confirmationRequest__input,
  .c-confirmationRequest__textarea {
    transition:
      var(--transition-reduced);
  }

}

/* =========================================================
   PASS 1
   SITE ATMOSPHERE SYSTEM

   Purpose:
   - Add restrained material texture to selected major sections.
   - Keep texture independent from existing surface, aura, and
     gradient recipes.
   - Create cadence instead of wallpapering every section.

   Texture ownership:
   - Feature = deliberate editorial emphasis
   - Section = quiet technical atmosphere
   - Industrial = worksite / equipment emphasis
   - Page = long-form structural texture

   Existing Steve and Gallery texture systems remain untouched.
========================================================= */

:where(
  .c-pageHero,
  .c-aboutHero,
  .c-contactHero,
  .c-legalHero,
  .c-homeCommercialFleet,
  .c-reviewsFaq,
  .c-runnrFeature,
  .c-aboutOperations,
  .c-contactRequest,
  .c-fleetShowcase,
  .c-servicesRequirements,
  .c-aboutFleet,
  .c-contactServiceArea,
  .c-aboutTeam,
  .c-legalDocument
)::before {
  content:
    "";

  position:
    absolute;

  inset:
    var(--inset-0);

  z-index:
    var(--layer-underlay);

  background-repeat:
    var(--background-repeat-all);

  pointer-events:
    none;
}


/* =========================================================
   FEATURE TEXTURE
========================================================= */

:where(
  .c-pageHero,
  .c-aboutHero,
  .c-contactHero,
  .c-legalHero,
  .c-aboutTeam
)::before {
  background-image:
    var(--texture-feature-image);

  background-size:
    var(--texture-feature-size);

  background-position:
    var(--texture-feature-position);

  opacity:
    var(--texture-feature-opacity);
}


/* =========================================================
   QUIET SECTION TEXTURE
========================================================= */

:where(
  .c-homeCommercialFleet,
  .c-reviewsFaq,
  .c-runnrFeature,
  .c-aboutOperations,
  .c-contactRequest
)::before {
  background-image:
    var(--texture-section-image);

  background-size:
    var(--texture-section-size);

  background-position:
    var(--texture-section-position);

  opacity:
    var(--texture-section-opacity);
}


/* =========================================================
   INDUSTRIAL TEXTURE
========================================================= */

:where(
  .c-fleetShowcase,
  .c-servicesRequirements,
  .c-aboutFleet,
  .c-contactServiceArea
)::before {
  background-image:
    var(--texture-industrial-image);

  background-size:
    var(--texture-industrial-size);

  background-position:
    var(--texture-industrial-position);

  opacity:
    var(--texture-industrial-opacity);
}


/* =========================================================
   LONG-FORM PAGE TEXTURE
========================================================= */

.c-legalDocument::before {
  background-image:
    var(--texture-page-image);

  background-size:
    var(--texture-page-size);

  background-position:
    var(--texture-page-position);

  opacity:
    var(--texture-page-opacity);
}


/* =========================================================
   PASS 2
   COMPONENT FAMILY COHESION

   Purpose:
   - Normalize shared interaction, form, card, and content
     families without changing layout ownership.
   - Reserve glass, heavy glow, and raised geometry for actual
     emphasis instead of ordinary content.
   - Consume existing semantic component tokens only.
========================================================= */


/* =========================================================
   01. SHARED ACTION CONTROL GEOMETRY
========================================================= */

:is(
  .c-button,
  .c-siteHeader__cta,
  .c-mobileNav__cta,
  .c-pricingTool__button
) {
  min-height:
    var(--size-button-h);

  padding:
    var(--space-button-y)
    var(--space-button-x);

  gap:
    var(--space-button-gap);

  border-radius:
    var(--button-radius);

  font-family:
    var(--button-font);

  font-size:
    var(--button-size);

  font-weight:
    var(--button-weight);

  line-height:
    var(--button-leading);

  letter-spacing:
    var(--button-tracking);

  text-transform:
    var(--button-transform);

  transition:
    var(--button-transition);
}


/* =========================================================
   PRIMARY ACTION FAMILY
========================================================= */

:is(
  .c-button--primary,
  .c-siteHeader__cta,
  .c-mobileNav__cta,
  .c-pricingTool__button--primary,
  .c-pricingTool__button--calculate
) {
  background:
    var(--button-primary-bg);

  border-color:
    var(--button-primary-border);

  box-shadow:
    var(--button-primary-shadow);

  color:
    var(--button-primary-text);
}

:is(
  .c-button--primary,
  .c-siteHeader__cta,
  .c-mobileNav__cta,
  .c-pricingTool__button--primary,
  .c-pricingTool__button--calculate
):hover {
  background:
    var(--button-primary-bg-hover);

  border-color:
    var(--button-primary-border-hover);

  box-shadow:
    var(--button-primary-shadow-hover);

  color:
    var(--button-primary-text-hover);
}

:is(
  .c-button--primary,
  .c-siteHeader__cta,
  .c-mobileNav__cta,
  .c-pricingTool__button--primary,
  .c-pricingTool__button--calculate
):focus-visible {
  outline:
    none;

  box-shadow:
    var(--focus-ring),
    var(--button-primary-shadow);
}


/* =========================================================
   SECONDARY ACTION FAMILY
========================================================= */

:is(
  .c-button--secondary,
  .c-pricingTool__button--secondary
) {
  background:
    var(--button-secondary-bg);

  border-color:
    var(--button-secondary-border);

  box-shadow:
    var(--button-secondary-shadow);

  color:
    var(--button-secondary-text);
}

:is(
  .c-button--secondary,
  .c-pricingTool__button--secondary
):hover {
  background:
    var(--button-secondary-bg-hover);

  border-color:
    var(--button-secondary-border-hover);

  box-shadow:
    var(--button-secondary-shadow-hover);

  color:
    var(--button-secondary-text-hover);
}


/* =========================================================
   02. SHARED FORM CONTROL FAMILY
========================================================= */

:is(
  .c-pricingTool__input,
  .c-pricingTool__textarea,
  .c-confirmationRequest__input,
  .c-confirmationRequest__textarea
) {
  background:
    var(--input-bg);

  border-color:
    var(--input-border);

  box-shadow:
    var(--input-shadow);

  color:
    var(--input-text);

  caret-color:
    var(--input-caret);

  transition:
    var(--input-transition);
}

:is(
  .c-pricingTool__input,
  .c-pricingTool__textarea,
  .c-confirmationRequest__input,
  .c-confirmationRequest__textarea
)::placeholder {
  color:
    var(--input-placeholder);
}

:is(
  .c-pricingTool__input,
  .c-pricingTool__textarea,
  .c-confirmationRequest__input,
  .c-confirmationRequest__textarea
):hover {
  background:
    var(--input-bg-hover);

  border-color:
    var(--input-border-hover);

  box-shadow:
    var(--input-shadow-hover);
}

:is(
  .c-pricingTool__input,
  .c-pricingTool__textarea,
  .c-confirmationRequest__input,
  .c-confirmationRequest__textarea
):focus,
:is(
  .c-pricingTool__input,
  .c-pricingTool__textarea,
  .c-confirmationRequest__input,
  .c-confirmationRequest__textarea
):focus-visible {
  outline:
    none;

  background:
    var(--input-bg-focus);

  border-color:
    var(--input-border-focus);

  box-shadow:
    var(--input-shadow-focus);
}

:is(
  .c-pricingTool__input,
  .c-pricingTool__textarea,
  .c-confirmationRequest__input,
  .c-confirmationRequest__textarea
):active {
  background:
    var(--input-bg-active);

  border-color:
    var(--input-border-active);

  box-shadow:
    var(--input-shadow-active);
}

:is(
  .c-pricingTool__input,
  .c-pricingTool__textarea,
  .c-confirmationRequest__input,
  .c-confirmationRequest__textarea
):disabled {
  background:
    var(--input-bg-disabled);

  border-color:
    var(--input-border-disabled);

  box-shadow:
    var(--input-shadow-disabled);

  color:
    var(--input-text-disabled);
}


/* =========================================================
   03. STANDARD CONTENT CARD FAMILY

   Ordinary content uses the standard card surface and radius.
   Raised geometry remains reserved for selected, featured,
   modal, tool, and hero-stat surfaces.
========================================================= */

:is(
  .c-serviceCard,
  .c-fleetCard,
  .c-teamCard,
  .c-reviewCard,
  .c-aboutOperation,
  .c-contactMethod,
  .c-contactRequirement
) {
  background:
    var(--surface-card-bg);

  border-color:
    var(--surface-card-border);

  border-radius:
    var(--radius-card);

  box-shadow:
    var(--surface-card-highlight),
    var(--surface-card-shadow);
}

.c-teamCard {
  backdrop-filter:
    blur(
      var(--blur-none)
    );
}


/* =========================================================
   CARD HOVER DEPTH

   Only card families that already communicate hover motion
   receive the raised surface recipe here.
========================================================= */

:is(
  .c-fleetCard,
  .c-teamCard,
  .c-reviewCard,
  .c-aboutOperation
):hover {
  background:
    var(--surface-card-raised-bg);

  border-color:
    var(--surface-card-raised-border);

  box-shadow:
    var(--surface-card-raised-highlight),
    var(--surface-card-raised-shadow);
}


/* =========================================================
   04. QUIET BRAND MARKERS

   Brand colour stays visible, but ordinary informational
   icons do not need their own glow source.
========================================================= */

:is(
  .c-aboutOperation__icon,
  .c-contactMethod__icon
) {
  box-shadow:
    var(--elevation-low);
}

.c-contactRequirement__number {
  text-shadow:
    none;
}


/* =========================================================
   05. SECTION-LEVEL EYEBROW RESTRAINT

   Hero and major CTA eyebrows may retain atmospheric glow.
   Ordinary section labels use colour and typography alone.
========================================================= */

:is(
  .c-homeCommercialFleet__eyebrow,
  .c-fleetShowcase__eyebrow,
  .c-reviewsFaq__eyebrow,
  .c-sectionHeader__eyebrow,
  .c-aboutStory__eyebrow,
  .c-aboutFleet__eyebrow,
  .c-aboutOperations__eyebrow,
  .c-aboutTeam__eyebrow,
  .c-contactRequest__eyebrow,
  .c-confirmationRequest__eyebrow,
  .c-contactRequirements__eyebrow,
  .c-contactServiceArea__eyebrow,
  .c-contactCommercial__eyebrow,
  .c-legalContact__eyebrow
) {
  text-shadow:
    none;
}


/* =========================================================
   06. SHARED HERO STAT FAMILY
========================================================= */

:is(
  .c-aboutHero__stat,
  .c-contactHero__stat
) {
  background:
    var(--surface-card-raised-bg);

  border-color:
    var(--surface-card-raised-border);

  border-block-start-color:
    var(--border-primary-strong);

  border-radius:
    var(--radius-card-raised);

  box-shadow:
    var(--surface-card-raised-highlight),
    var(--surface-card-raised-shadow),
    var(--glow-primary-sm);
}


/* =========================================================
   07. CTA FAMILY ALIGNMENT
========================================================= */

:is(
  .c-homeFinalCta,
  .c-finalCta
) {
  background:
    var(--background-gradient-primary);

  border-block-color:
    var(--border-primary);

  box-shadow:
    var(--surface-section-shadow),
    var(--glow-primary-sm);
}

/* =========================================================
   PASS 3
   COMPONENT STATUS

   Pass 2 remains authoritative for component visuals.
   Pass 3 responsive density is inherited from semantic
   tokens and layout composition rules. No new component
   skin overrides are required here.
========================================================= */