/* ==========================================================================
   HITCO — hero slider + floating stat bar
   The banner image carries the message; chrome stays out of its way.
   ========================================================================== */

.slider{
  position:relative;
  background:#fff;
  /* Small skirt only. The stat bar is pulled up further than this, so the top
     of the card lands ON the banner image rather than on a strip below it. */
  padding-block-end:52px;
}
@media (max-width:900px){
  .slider{padding-block-end:0}
}

.slider__viewport{
  position:relative;
  overflow:hidden;
  background:var(--c-paper);
}

.slider__track{
  display:flex;
  transition:transform 620ms cubic-bezier(.4,.0,.2,1);
  will-change:transform;
}
@media (prefers-reduced-motion:reduce){
  .slider__track{transition:none}
}

.slide{
  flex:0 0 100%;
  position:relative;
  min-inline-size:100%;
}
.slide__link{display:block;position:relative}

/* The source banners are 3556×2000 (16:9). At full width that is 810px tall on
   a 1440 screen — taller than the fold once the nav is accounted for. So the
   ratio is honoured but capped to the space left below the header, and the
   stat bar's overlap is subtracted so the whole unit lands within one screen.
   svh (not vh) keeps mobile browser chrome from pushing it off-screen. */
.slide__img{
  inline-size:100%;
  block-size:auto;
  aspect-ratio:16/9;
  max-block-size:calc(100svh - var(--header-h) - var(--topbar-h) - 40px);
  object-fit:cover;
  object-position:center;
  display:block;
  /* transform:scale(1.035); */
  transition:transform 1000ms var(--ease);
}
/* Slow settle on the active slide — one deliberate move, not a Ken Burns loop. */
.slide[aria-hidden="false"] .slide__img{transform:scale(1)}
@media (prefers-reduced-motion:reduce){
  .slide__img{transform:none;transition:none}
}
@media (max-width:900px){
  /* On phones the header is short and the banner is the whole point —
     let it use more of the screen. */
  .slide__img{max-block-size:calc(100svh - var(--header-h) - 20px)}
}

/* Optional caption. Most slides carry no text at all — the banner artwork
   already says it — so this only renders when a title exists.
   Deliberately not a card: no panel, no border, no filled button. Just a hairline
   rule, a tight headline and a text link, so the artwork stays the subject. */
.slide__cap{
  position:absolute;
  /* Kept above the stat card's overlap so the two never collide. */
  inset-block-end:clamp(104px, 15%, 168px);
  inset-inline-start:clamp(20px, 5%, 72px);
  max-inline-size:min(380px, 56%);
  padding-inline-start:18px;
  color:var(--c-ink);
  display:flex;flex-direction:column;
  align-items:flex-start;gap:10px;
  pointer-events:none;
}

/* Hairline accent in the brand green, aligned to the text block. */
.slide__cap::before{
  content:"";
  position:absolute;
  inset-block:2px auto;
  inset-inline-start:0;
  inline-size:2px;block-size:100%;
  background:var(--c-green);
  border-radius:2px;
}

.slide__cap h2{
  color:var(--c-ink);
  font-size:clamp(1.15rem,2vw,1.6rem);
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.25;
  max-inline-size:20ch;
  /* Banners run light-to-mid; a soft halo keeps the type legible on either
     without resorting to a scrim over the artwork. */
  text-shadow:0 1px 12px rgba(255,255,255,.85), 0 1px 2px rgba(255,255,255,.9);
}

.slide__cta{
  pointer-events:auto;
  display:inline-flex;align-items:center;gap:7px;
  font-size:var(--t-sm);font-weight:700;
  color:var(--c-primary-deep);
  padding-block-end:2px;
  border-block-end:1px solid transparent;
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
  text-shadow:0 1px 10px rgba(255,255,255,.9);
}
.slide__cta:hover{color:var(--c-ink);border-block-end-color:currentColor}
.slide__cta .arw{inline-size:15px;block-size:15px;transition:transform var(--dur-1) var(--ease)}
[dir="rtl"] .slide__cta .arw{transform:scaleX(-1)}
.slide__cta:hover .arw{transform:translateX(3px)}
[dir="rtl"] .slide__cta:hover .arw{transform:scaleX(-1) translateX(3px)}

@media (max-width:900px){
  .slide__cap{inset-block-end:clamp(30px, 8%, 64px);max-inline-size:70%}
}
@media (max-width:560px){
  .slide__cap{
    inset-inline:16px;inset-block-end:26px;max-inline-size:none;
    padding-inline-start:14px;gap:8px;
  }
  .slide__cap h2{font-size:1.05rem}
}

/* ---------------------------------------------------------------- controls */
.slider__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  inline-size:46px;block-size:46px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.9);color:var(--c-ink);
  border:1px solid rgba(14,31,39,.08);
  box-shadow:var(--shadow-1);
  transition:background var(--dur-1) var(--ease),opacity var(--dur-1) var(--ease);
  z-index:3;opacity:0;
}
.slider:hover .slider__nav,
.slider__nav:focus-visible{opacity:1}
@media (hover:none){.slider__nav{opacity:1}}
.slider__nav:hover{background:#fff}
.slider__nav svg{inline-size:20px;block-size:20px}
.slider__nav--prev{inset-inline-start:22px}
.slider__nav--next{inset-inline-end:22px}
/* Chevrons point along the reading direction. */
.slider__nav--prev svg{transform:rotate(90deg)}
.slider__nav--next svg{transform:rotate(-90deg)}
[dir="rtl"] .slider__nav--prev svg{transform:rotate(-90deg)}
[dir="rtl"] .slider__nav--next svg{transform:rotate(90deg)}
@media (max-width:640px){.slider__nav{display:none}}

/* Progress dots — thin bars read as "position", circles read as decoration. */
/* Raised clear of the stat card, which now overlaps the image's lower edge. */
.slider__dots{
  position:absolute;inset-block-end:74px;inset-inline:0;
  display:flex;justify-content:center;gap:7px;z-index:3;
}
.slider__dot{
  position:relative;overflow:hidden;
  inline-size:26px;block-size:3px;border-radius:2px;
  background:rgba(14,31,39,.18);
  transition:background var(--dur-2) var(--ease),inline-size var(--dur-2) var(--ease);
  cursor:pointer;padding:0;
}
.slider__dot:hover{background:rgba(14,31,39,.32)}
.slider__dot[aria-current="true"]{inline-size:52px;background:rgba(14,31,39,.18)}

/* The active dot fills over the autoplay interval, so the bar communicates
   "time until the next slide" instead of just "you are here". */
.slider__dot::after{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;
  inline-size:0;background:var(--c-primary);border-radius:2px;
}
.slider__dot[aria-current="true"]::after{
  animation:slider-progress var(--slide-ms,6000ms) linear forwards;
}
.slider.is-paused .slider__dot[aria-current="true"]::after{animation-play-state:paused}
@keyframes slider-progress{from{inline-size:0}to{inline-size:100%}}

@media (prefers-reduced-motion:reduce){
  .slider__dot[aria-current="true"]::after{animation:none;inline-size:100%}
}
@media (max-width:560px){.slider__dots{inset-block-end:12px}}

/* ==========================================================================
   FLOATING STAT BAR
   Sits half over the slider, half over the page below it.
   ========================================================================== */
/* Pulled up past the slider's skirt so roughly half the card sits over the
   banner image itself. Background MUST stay transparent — a white fill here
   would paint a band across the image instead of letting it show around
   the floating card. */
.statbar{
  position:relative;z-index:4;
  margin-block-start:-104px;
  /* Transparent, not #fff: a fill here paints a full-width white band that
     clips the banner in a hard line just above the card, so the card sits on
     white instead of floating over the image. */
  background:transparent;
}
@media (max-width:900px){
  .statbar{margin-block-start:0;padding-block:var(--s-8)}
}

.statbar__inner{
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:14px;
  box-shadow:0 18px 48px -24px rgba(14,31,39,.28), 0 2px 8px -4px rgba(14,31,39,.08);
  display:grid;
  grid-template-columns:repeat(5,1fr);
}
@media (max-width:1000px){.statbar__inner{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.statbar__inner{grid-template-columns:repeat(2,1fr)}}

.statbar__item{
  display:flex;align-items:center;gap:var(--s-4);
  padding:var(--s-6) var(--s-5);
  border-inline-end:1px solid var(--c-line);
  min-inline-size:0;
}
.statbar__item:last-child{border-inline-end:0}
@media (max-width:1000px){
  .statbar__item:nth-child(3n){border-inline-end:0}
  .statbar__item:nth-child(-n+3){border-block-end:1px solid var(--c-line)}
}
@media (max-width:620px){
  .statbar__item{border-inline-end:1px solid var(--c-line);padding:var(--s-5) var(--s-4)}
  .statbar__item:nth-child(3n){border-inline-end:1px solid var(--c-line)}
  .statbar__item:nth-child(2n){border-inline-end:0}
  .statbar__item:nth-child(-n+4){border-block-end:1px solid var(--c-line)}
  .statbar__item:last-child{border-inline-end:0}
}

.statbar__icon{
  flex:none;
  inline-size:46px;block-size:46px;border-radius:50%;
  background:var(--c-wash);
  display:grid;place-items:center;
  color:var(--c-ink);
}
.statbar__icon svg{inline-size:21px;block-size:21px;stroke-width:1.5}

.statbar__text{display:flex;flex-direction:column;gap:2px;min-inline-size:0}
.statbar__value{
  font-size:clamp(1.25rem,2vw,1.6rem);font-weight:700;color:var(--c-ink);
  line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  display:flex;align-items:baseline;gap:1px;white-space:nowrap;
}
.statbar__label{
  font-size:var(--t-xs);color:var(--c-muted);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media (max-width:620px){
  .statbar__icon{inline-size:38px;block-size:38px}
  .statbar__icon svg{inline-size:17px;block-size:17px}
}