/* ============================================================
   home.css — Flex Europa · finaldesign — page-specific
   Scaffold pass: the video HERO (full-bleed background video +
   shimmer fallback + dark scrim + overlaid copy) and the section
   rhythm. Category showcase, scrollers, banners, etc. arrive in
   their own turns.
   ============================================================ */

/* In-page anchor targets clear the docked sticky header */
[id] { scroll-margin-block-start: calc(var(--header-h-stuck) + var(--space-md)); }

/* ============================================================
   HERO SLIDER (manifest items 4 + 5) — replaces the video hero.
   Fade crossfade + slow Ken Burns zoom, 6s dwell, arrows, dots,
   keyboard and swipe. HEIGHT IS CAPPED AT 700px AT EVERY VIEWPORT.
   Per-slide layer order: media (0) → scrim (1) → caption (2);
   controls sit above all slides at (3).
   `.hero` is retained on the same element as a context hook so
   base.css's `.hero :focus-visible` dark-ring rule keeps working.
   ============================================================ */
.hero-slider {
  position: relative;
  isolation: isolate;
  block-size: clamp(var(--hero-slider-min), var(--hero-slider-fluid), var(--hero-slider-max));
  max-block-size: var(--hero-slider-max);   /* belt-and-braces: the ceiling, twice */
  overflow: hidden;
  background: var(--color-ink-scrim);       /* base ink if nothing paints */
  color: var(--color-text-inverse);
}

.hero-slider__viewport { position: absolute; inset: 0; }
.hero-slider__track {
  position: absolute;
  inset: 0;
  touch-action: pan-y;    /* vertical page scroll starting on the slider is never hijacked */
}

/* ---- Slides stack and crossfade. ----
   Tab order and the a11y tree are owned by the `inert` attribute — set in the
   markup for slides 2–4 and maintained by slider.js. It is deliberately NOT a
   delayed `visibility` transition: backgrounding the tab mid-fade cancels that
   transition, and the outgoing slide is then stuck visible and focusable for
   the rest of the session. `inert` has no timing dependency, so it cannot
   get stuck. (aria-hidden is not an option — it would be an axe violation on
   a subtree containing a focusable CTA.) */
.hero-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--hero-fade) ease-in-out;
}
.hero-slider__slide--active {
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
}
/* No JS: nothing rotates and nothing maintains `inert`, so show the first slide only. */
.no-js .hero-slider__slide { display: none; }
.no-js .hero-slider__slide--active { display: block; }

.hero-slider__media { position: absolute; inset: 0; }
.hero-slider__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* The equipment sits right of centre in every slide; a plain centre crop keeps
     both the machine and the open start-edge the caption needs. */
  object-position: center;
}

/* ---- Ken Burns: transform only, so it stays on the compositor ---- */
@keyframes hero-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(var(--hero-kb-scale)); }
}
.hero-slider__slide--active .hero-slider__img {
  animation: hero-kenburns var(--hero-dwell) var(--ease-out) forwards;
}
.hero-slider.is-paused .hero-slider__slide--active .hero-slider__img { animation-play-state: paused; }

/* ---- Scrim: a vertical vignette over the start-weighted wash. Not a flat
        overlay. Both gradients are design4a's existing hero tokens. ---- */
.hero-slider__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--hero-scrim-vignette), var(--hero-scrim);
}

/* ---- Caption — bottom-start, inside the container gutters ---- */
.hero-slider__caption {
  position: relative;
  z-index: 2;
  block-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--space-sm);
  /* clear the glass header (utility strip + bar) … */
  padding-block-start: calc(var(--header-utility-h) + var(--header-h) + var(--space-md));
  /* … and the control row at the bottom */
  padding-block-end: calc(var(--space-2xl) + var(--space-lg));
}
.hero-slider__kicker { display: inline-flex; align-items: center; gap: var(--space-sm); }
.hero-slider__kicker::before {
  content: "";
  inline-size: var(--hero-kicker-rule);
  block-size: 2px;
  background: var(--color-accent);
}
.hero-slider__title {
  /* `<h1>` on slide 1, `<p>` on slides 2–4 — styled identically. The mobile floor
     steps down to the next existing token (--fs-2xl) because the hero is now
     height-capped; from 533px up, 6vw governs and this matches design4a exactly. */
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: clamp(var(--fs-2xl), 6vw, 76px);
  line-height: 1.06;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  /* 12ch, not 15ch: at 15ch the title box reached ~60% across the frame, where the
     scrim has thinned to ~.40 alpha and worst-case contrast fell to 3.01:1 — passing
     large-text AA by 0.01. 12ch keeps the whole title inside the dense end of the
     gradient. Measured worst case per slide is recorded in the build notes. */
  max-inline-size: 12ch;
  color: var(--color-text-inverse);
  text-shadow: var(--hero-title-shadow);
}
.hero-slider__title span { color: var(--color-accent-on-dark); }
.hero-slider__lead {
  max-inline-size: 46ch;
  font-size: clamp(var(--fs-md), 2vw, var(--fs-lg));
  line-height: 1.6;
  color: var(--hero-lead-color);
  text-shadow: var(--hero-copy-shadow);
}
.hero-slider__cta { margin-block-start: var(--space-sm); }

/* ---- Caption entrance — short staggered delay after activation ---- */
@keyframes hero-caption-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.hero-slider__slide--active .hero-slider__kicker,
.hero-slider__slide--active .hero-slider__title,
.hero-slider__slide--active .hero-slider__lead,
.hero-slider__slide--active .hero-slider__cta {
  animation: hero-caption-in var(--hero-fade) var(--ease-out) both;
  animation-delay: var(--hero-caption-delay);
}
.hero-slider__slide--active .hero-slider__title { animation-delay: calc(var(--hero-caption-delay) + var(--hero-caption-step)); }
.hero-slider__slide--active .hero-slider__lead  { animation-delay: calc(var(--hero-caption-delay) + var(--hero-caption-step) * 2); }
.hero-slider__slide--active .hero-slider__cta   { animation-delay: calc(var(--hero-caption-delay) + var(--hero-caption-step) * 3); }

/* ---- Controls — arrows + dots as ONE bottom-centre cluster ----
   The caption is bottom-START and the cluster is bottom-CENTRE, so they can
   never collide however narrow the frame gets. Edge-pinned arrows at mid-height
   overlapped the headline everywhere between 992px and ~1376px. */
.hero-slider__controls {
  position: absolute;
  inset-block-end: var(--space-sm);
  inset-inline: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  pointer-events: none;             /* the strip itself must not eat hero clicks */
}
.hero-slider__controls > * { pointer-events: auto; }

/* ---- Arrows — inside the frame, ≥44×44, visible at every breakpoint ---- */
.hero-slider__arrow {
  flex: none;
  inline-size: var(--hero-arrow-size);
  block-size: var(--hero-arrow-size);
  min-inline-size: 44px;
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hero-arrow-border);
  border-radius: var(--radius-control);
  background: var(--hero-arrow-bg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--color-text-inverse);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.hero-slider__arrow:hover { background: var(--hero-arrow-bg-hover); border-color: var(--color-text-inverse); }
.hero-slider__arrow:focus-visible { outline: 2px solid var(--color-accent-on-dark); outline-offset: 3px; }
.hero-slider__arrow .icon { inline-size: 22px; block-size: 22px; stroke-width: 2.25; }

/* ---- Dots — 44×44 target, small visible pip ---- */
.hero-slider__dots {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-slider__dot {
  inline-size: 44px;
  block-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
}
.hero-slider__dot span {
  inline-size: var(--hero-dot-size);
  block-size: var(--hero-dot-size);
  border-radius: var(--radius-pill);
  background: var(--hero-dot-idle);
  box-shadow: var(--hero-dot-shadow);
  transition: background-color var(--transition-fast), inline-size var(--transition-fast);
}
.hero-slider__dot[aria-selected="true"] span {
  inline-size: calc(var(--hero-dot-size) * 2.6);
  background: var(--color-accent-on-dark);
}
.hero-slider__dot:focus-visible { outline: 2px solid var(--color-accent-on-dark); outline-offset: 2px; }

/* ---- Reduced motion: no zoom, no crossfade, no caption entrance.
        Explicit `animation: none` matters — reset.css collapses animation
        duration to 0.01ms, and a `forwards` fill would otherwise snap
        straight to the zoomed end state. ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-slider__slide { transition: none; }                     /* instant swap */
  .hero-slider__slide--active .hero-slider__img { animation: none; transform: none; }
  .hero-slider__slide--active .hero-slider__kicker,
  .hero-slider__slide--active .hero-slider__title,
  .hero-slider__slide--active .hero-slider__lead,
  .hero-slider__slide--active .hero-slider__cta {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Scroll cue */
.hero__cue {
  /* 44px floor. The label does not move — only the hit area grows
     around it, centred. */
  min-block-size: var(--step-size);
  position: absolute;
  inset-block-end: var(--space-lg);
  inset-inline-end: clamp(20px, 5vw, 48px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .55);   /* legible over any slide frame */
}
.hero__cue .icon { animation: cue-bob 2.4s var(--ease-inout) infinite; }
@keyframes cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* Sentinel just BELOW the header — IntersectionObserver hook for the sticky dock.
   Placed here (not at the hero bottom) so the solid header docks as soon as the glass
   header scrolls out of view, instead of leaving a headerless gap over the rest of the hero. */
.hero__sentinel {
  position: absolute;
  inset-block-start: calc(var(--header-utility-h) + var(--header-h));
  inset-inline: 0;
  block-size: 1px;
}

/* ---- ≤1199px: the hero is shorter than its 700px cap here, so the caption
        steps down through EXISTING type tokens to stay inside the frame. ---- */
@media (max-width: 1199px) {
  /* 12ch is a 76px-type measure; at 48px it is physically narrow enough to push
     the title to three lines, and at 992px (where the hero is at its shortest
     relative to the caption) that overflowed into the header. 18ch holds it at
     two lines and still ends inside the dense end of the scrim. */
  .hero-slider__title { font-size: clamp(var(--fs-2xl), 5vw, var(--fs-3xl)); max-inline-size: 18ch; }
  .hero-slider__lead  { font-size: var(--fs-md); }
}

/* ---- ≤991px: compact caption, and the arrows drop into a single 44px
        control row at the bottom beside the dots. Mid-height arrows would
        sit on top of the caption once the hero is this short. ---- */
@media (max-width: 991px) {
  .hero-slider__caption {
    gap: var(--space-xs);
    /* Clear the glass header at the top and the 44px control row at the bottom,
       with a 4px breath either side — at 360px the hero is only 360px tall and
       every pixel between the two is caption. */
    padding-block-start: calc(var(--header-utility-h) + var(--header-h) + var(--space-xs));
    padding-block-end: calc(var(--space-2xl) + var(--space-sm));
  }
  .hero-slider__title { font-size: clamp(var(--fs-xl), 4.6vw, var(--fs-2xl)); max-inline-size: 18ch; }
  .hero-slider__lead {
    font-size: var(--fs-sm);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .hero-slider__cta {
    margin-block-start: var(--space-xs);
    min-block-size: 44px;
    padding-inline: var(--space-lg);
    font-size: var(--fs-xs);
  }
  .hero-slider__arrow { inline-size: 44px; block-size: 44px; }
}

@media (max-width: 767px) {
  /* Phones get design4a's TOP-WEIGHTED scrim. The start-weighted 102deg wash
     thins to .12 alpha at the end edge, which is fine while the caption is a
     narrow column but not once it runs the full width — as it must here. This
     gradient never drops below .60 alpha, clearing AA for the lead and kicker
     as well as the title. */
  .hero-slider__scrim { background: var(--hero-scrim-mobile); }
  /* Let the title use the full column: at 18ch it wrapped to three lines and
     pushed the caption up under the header. */
  .hero-slider__title { max-inline-size: 100%; }
  /* The crop is tightest on phones — bias the frame so the equipment stays in shot. */
  .hero-slider__img { object-position: 68% center; }
  .hero__cue { display: none; }
}

@media (max-width: 575px) {
  /* Clear the WRAPPED header (see --header-h-wrapped). The bar only wraps below
     ~420px, so between 420 and 575 this over-reserves — harmless, because the
     caption is bottom-aligned and simply sits lower in the frame. */
  .hero-slider__caption { padding-block-start: calc(var(--header-h-wrapped) + var(--space-xs)); }
  /* One supporting line, per the caption spec — two no longer fit once the
     wrapped header has taken 142px out of a 360px hero. */
  .hero-slider__lead { -webkit-line-clamp: 1; line-clamp: 1; }
}

/* ============================================================
   CATEGORY SHOWCASE (§3.3) — eight spec-styled cards
   ============================================================ */
.categories { background: var(--color-bg); }
.categories__count {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-faint);
  align-self: flex-start;
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}
.category-grid__item { display: flex; }   /* let the card fill the row height */

/* subtle staggered reveal across the grid */
.category-grid__item:nth-child(2) { transition-delay: 60ms; }
.category-grid__item:nth-child(3) { transition-delay: 120ms; }
.category-grid__item:nth-child(4) { transition-delay: 180ms; }
.category-grid__item:nth-child(5) { transition-delay: 40ms; }
.category-grid__item:nth-child(6) { transition-delay: 100ms; }
.category-grid__item:nth-child(7) { transition-delay: 160ms; }
.category-grid__item:nth-child(8) { transition-delay: 220ms; }

@media (max-width: 991px) {
  .category-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .category-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PRODUCT SCROLLERS (§5) — three scroll-snap scrollers with a
   tab filter (Featured), circular next arrow + draggable progress.
   The .scroller and .tab components themselves now live in
   components.css — the product page reuses both, and a page
   stylesheet cannot be a dependency of another page. Only the band's
   own background stays here.
   ============================================================ */
.equipment { background: var(--color-surface); }


/* ============================================================
   xTOOL FLAGSHIP BAND (§3.5) — dark graphite spotlight
   ============================================================ */
.xtool-band {
  background: var(--color-accent-tint);        /* very-light-blue wash from the brand teal */
  color: var(--color-text);
  border-block: 1px solid var(--color-border);
  padding-block: var(--space-3xl);             /* matches .section — same zone rhythm */
  overflow: hidden;
}
.xtool-band__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
}
.xtool-band__copy { display: flex; flex-direction: column; gap: var(--space-md); align-items: flex-start; }
.xtool-band__title { color: var(--color-text); max-inline-size: 16ch; }
.xtool-band__title span { color: var(--color-accent-strong); }
.xtool-band__lead { color: var(--color-text-muted); font-size: var(--fs-lg); line-height: 1.6; max-inline-size: 48ch; }
.xtool-band__specs { display: flex; flex-direction: column; gap: 0; inline-size: 100%; max-inline-size: 420px; margin-block: var(--space-sm); }
/* spec-row inherits the light base styles (hairline border, muted label, ink value) */
.xtool-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-block-start: var(--space-sm); }
.xtool-band__media {
  position: relative;
  /* DEFINITE height (not aspect-ratio): Safari can fail to resolve an image's
     max-block-size:100% against an aspect-ratio-derived height, collapsing the
     image to nothing. A concrete block-size makes the 100% resolve everywhere. */
  block-size: clamp(280px, 30vw, 380px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xtool-band__media::before {           /* soft teal glow light-field behind the machine */
  content: "";
  position: absolute;
  inset: 8%;
  background: radial-gradient(ellipse at center, rgba(0, 168, 136, .16), rgba(0, 168, 136, 0) 68%);
  filter: blur(6px);
}
/* display:contents keeps the <img> itself as the flex child of __media, so adding
   the <picture> wrapper for the AVIF/WebP sources changes no layout. */
.xtool-band__picture { display: contents; }
.xtool-band__img { position: relative; max-inline-size: 100%; max-block-size: 100%; inline-size: auto; block-size: auto; object-fit: contain; filter: drop-shadow(0 16px 30px rgba(20, 24, 26, .18)); }

@media (max-width: 767px) {
  .xtool-band__inner { grid-template-columns: 1fr; gap: var(--space-xl); }
  .xtool-band__media { order: -1; block-size: clamp(240px, 60vw, 340px); }
}

/* ============================================================
   PROMO BANNERS (§2.B / §3.6) — full-bleed two-up, ≥1 video
   ============================================================ */
.banners { background: var(--color-ink-scrim); }
.banners__row { display: grid; grid-template-columns: 1fr 1fr; }
.banner {
  position: relative;
  isolation: isolate;
  min-block-size: clamp(360px, 42vw, 460px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.banner__media { position: absolute; inset: 0; z-index: 0; }
.banner__shimmer { position: absolute; inset: 0; background: var(--hero-shimmer); }
.banner__video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.banner.is-video-failed .banner__video { display: none; }
.banner__scrim {
  position: absolute; inset: 0; z-index: 1;
  /* Light 15% wash at the very bottom only — the video colours read clearly */
  background: linear-gradient(0deg, rgba(10,12,14,.15) 0%, rgba(10,12,14,0) 50%);
}
.banner__content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: var(--space-sm); align-items: flex-start;
  padding: clamp(var(--space-xl), 4vw, var(--space-3xl));
  color: var(--color-text-inverse);
}
/* With the scrim reduced, a soft text halo keeps the copy legible on any frame */
.banner--video .banner__content { text-shadow: 0 2px 14px rgba(10, 12, 14, .72); }
.banner__eyebrow { color: var(--color-accent-on-dark); }
.banner__title { color: var(--color-text-inverse); font-size: clamp(var(--fs-2xl), 3.4vw, var(--fs-3xl)); max-inline-size: 16ch; }
.banner__subhead { color: rgba(255, 255, 255, .88); font-size: var(--fs-lg); max-inline-size: 40ch; }
.banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: var(--space-md); }

/* Light-field still banner variant */
.banner--light { background: linear-gradient(120deg, var(--banner-light-1) 0%, var(--banner-light-2) 100%); align-items: center; }
.banner--light .banner__content { color: var(--color-text); }
.banner--light .banner__eyebrow { color: var(--color-accent-strong); }
.banner--light .banner__title { color: var(--color-text); }
.banner--light .banner__subhead { color: var(--color-text-muted); }
.banner--light .banner__visual { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 46%; z-index: 0; display: flex; align-items: center; justify-content: center; }
.banner--light .banner__visual img { max-block-size: 84%; max-inline-size: 90%; inline-size: auto; object-fit: contain; filter: drop-shadow(0 20px 34px rgba(14,24,26,.22)); }
.banner--light .banner__content { max-inline-size: 60%; }

@media (max-width: 767px) {
  .banners__row { grid-template-columns: 1fr; }
  .banner--light .banner__visual { position: relative; inline-size: 100%; block-size: 40%; }
  .banner--light .banner__content { max-inline-size: 100%; }
}

/* ============================================================
   WHY FLEX EUROPA — capability / spec strip (§3.7)
   ============================================================ */
.why { background: var(--color-bg); }
.why__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block-start: var(--hairline);
}
.stat { padding: var(--space-xl) var(--space-lg); border-inline-start: var(--hairline); }
.stat:first-child { border-inline-start: none; }
.stat__value { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl)); color: var(--color-text); line-height: 1; }
.stat__value span { color: var(--color-accent-strong); }
.stat__label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-muted); margin-block: var(--space-sm) var(--space-xs); }
.stat__desc { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.5; }

@media (max-width: 767px) {
  .why__grid { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(1), .stat:nth-child(3) { border-inline-start: none; }
  .stat:nth-child(3), .stat:nth-child(4) { border-block-start: var(--hairline); }
}

/* ============================================================
   BRANDS strip (§3.8) — placeholder wordmarks (swap for real logos)
   ============================================================ */
.brands { background: var(--color-surface); }
.brands__head { text-align: center; margin-block-end: var(--space-xl); }
.brands__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-lg), 4vw, var(--space-3xl));
}
.brands__item {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-faint);
  transition: color var(--transition-fast);
}
.brands__item:hover { color: var(--color-text); }

/* ============================================================
   CTA BAND (§3.9)
   ============================================================ */
.cta-band { background: var(--color-text); color: var(--color-text-inverse); border-block-start: 3px solid var(--color-accent); }
.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xl);
}
.cta-band__text { display: flex; flex-direction: column; gap: var(--space-sm); max-inline-size: 40ch; }
.cta-band__title { color: var(--color-text-inverse); }
.cta-band__lead { color: rgba(255, 255, 255, .8); font-size: var(--fs-lg); }
.cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.cta-band__phone { display: inline-flex; align-items: center; min-block-size: var(--step-size); gap: var(--space-sm); font-family: var(--font-mono); font-size: var(--fs-md); color: var(--color-text-inverse); letter-spacing: var(--tracking-wide); }
.cta-band__phone .icon { color: var(--color-accent-on-dark); }
.cta-band__phone:hover { color: var(--color-accent-on-dark); }