/**
 * Hero and the facts strip directly beneath it.
 *
 * The hero is a flex column centred inside a full-width dark band; the badge,
 * the two arrows and the photo caption are the only absolutely positioned
 * pieces. The badge stacks three concentric layers whose static position inside
 * a centring flex container is already the centre, which is why the overlays
 * need no offsets of their own.
 *
 * Only desktop rules live here — the facts strip reflows in `responsive.css`.
 */

/* ====================================================================== hero */

.dk-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 600px;
  overflow: hidden;
}

.dk-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1000px;
  padding: 96px 24px 104px;
  text-align: center;
}

/* --------------------------------------------------------------- pause control */

/**
 * The rotation control required of an auto-advancing carousel. It carries
 * `.dk-sr-only`, so it costs zero pixels until a keyboard visitor reaches it —
 * then it becomes a real button pinned to the top-left of the band.
 */
.dk-hero__pause {
  z-index: 3;
}

.dk-hero__pause:focus-visible {
  width: auto;
  height: auto;
  top: 18px;
  left: var(--dk-gutter);
  margin: 0;
  padding: 10px 14px;
  overflow: visible;
  clip-path: none;
  border-radius: var(--dk-radius-sm);
  background: var(--dk-blue);
  color: var(--dk-on-dark);
  font: 600 14px/1 var(--dk-font-display);
  cursor: pointer;
}

/* ------------------------------------------------------------------- badge */

.dk-hero__badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 34px;
}

/**
 * The outline ring. The factory leaves the polygon unpainted apart from
 * `fill: none`, so the stroke is set here rather than inline.
 * `rgba(127, 166, 221, .32)` is `--dk-blue-pale` at 32% and has no token.
 */
.dk-hero__ring polygon {
  stroke: rgba(127, 166, 221, 0.32);
  stroke-width: 1.4;
}

.dk-hero__mark {
  position: absolute;
}

.dk-hero__glyph {
  position: absolute;
  font-size: 34px;
  color: var(--dk-on-dark);
}

/* ------------------------------------------------------------------- slide */

/** The floor height keeps everything below the slide still between slides. */
.dk-hero__slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: clamp(238px, 27vw, 300px);
}

.dk-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

/* `rgba(127, 166, 221, .55)` is `--dk-blue-pale` at 55% and has no token. */
.dk-hero__eyebrow-rule {
  display: block;
  width: 26px;
  height: 1px;
  background: rgba(127, 166, 221, 0.55);
}

.dk-hero__eyebrow-text {
  font: 600 13px/1.5 var(--dk-font-body);
  letter-spacing: var(--dk-track-eyebrow);
  text-transform: uppercase;
  color: var(--dk-blue-pale);
}

.dk-hero__title {
  display: flex;
  align-items: center;
  margin: 0;
  font: 700 clamp(32px, 5vw, 52px)/1.15 var(--dk-font-display);
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--dk-on-dark);
  text-wrap: balance;
}

.dk-hero__note {
  margin: 20px 0 0;
  max-width: 640px;
  font: 400 18px/1.7 var(--dk-font-body);
  color: var(--dk-on-dark-body);
  text-wrap: pretty;
}

/* -------------------------------------------------------------------- meta */

.dk-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 24px;
  margin-top: 34px;
}

/* `rgba(255, 255, 255, .82)` has no token; the tracking step .07em has none either. */
.dk-hero__meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 13px/1.4 var(--dk-font-display);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.dk-hero__meta-item i {
  font-size: 13px;
  color: var(--dk-blue-pale);
}

.dk-hero__meta-sep {
  display: block;
  width: 7px;
  height: 7px;
  background: var(--dk-blue);
  transform: rotate(45deg);
}

/* ----------------------------------------------------------------- actions */

.dk-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
}

/** The hero's phone button sets its own gap and glyph size. */
.dk-hero__call {
  gap: 10px;
}

.dk-hero__call i {
  font-size: 13px;
}

/* -------------------------------------------------------------------- dots */

.dk-hero__dots {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 44px;
}

/* ------------------------------------------------------------------ arrows */

.dk-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.dk-hero__arrow--prev {
  left: 26px;
}

.dk-hero__arrow--next {
  right: 26px;
}

/* =============================================================== facts strip */

/**
 * The grid is the list itself. Columns are auto-fit, so the four facts become
 * two rows and then one column purely by running out of room.
 */
.dk-facts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  max-width: var(--dk-container);
  margin: 0 auto;
  padding: 38px var(--dk-gutter);
  list-style: none;
}

.dk-fact {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 12px 26px;
}

/** Desktop only: a rule between facts, never before the first. */
.dk-fact + .dk-fact {
  border-left: 1px solid var(--dk-border-divider);
}

.dk-fact__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.dk-fact__value {
  font: 700 18px/1.2 var(--dk-font-display);
  letter-spacing: var(--dk-track-tight);
  color: var(--dk-ink);
}

.dk-fact__label {
  font: 400 15px/1.5 var(--dk-font-body);
  color: var(--dk-muted);
  text-wrap: pretty;
}

/** Amber marks a quality signal only; the plinth fill comes from the factory. */
.dk-fact--accent .dk-hexicon {
  --dk-hexicon-color: var(--dk-amber-ink);
}