/* ==========================================================================
   MOCKUP — Homepage, credibility-led  ·  namespace: .hcl / .hcl-*
   Every token, colour and component here is borrowed from the approved build
   (tokens.css, base.css, site.css, hero4.css). This file only adds the
   patterns the live home page does not have yet, and the two overrides the
   new copy requires. Nothing outside .hcl is touched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. STATIC HERO — the live .h4 band with the carousel removed.
   The image stack, scrim and copy type all come from hero4.css / site.css.
   -------------------------------------------------------------------------- */

/* No tab bar under the copy any more, so the reserved strip goes away. */
.hcl .h4 { --h4-bar: 0px; }

/* The one frame is always on; kill the entrance transform so nothing moves
   on load (no autoplay, no ken-burns drift). */
.hcl .h4__img { transform: none; transition: none; }

.hcl .h4__cs {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
  pointer-events: auto;
  /* Wide enough that the two hero actions sit on one row at desktop; the
     headline and lede set their own tighter measures below. */
  max-width: 52ch;
}

.hcl-hero__eyebrow {
  color: rgb(255 255 255 / 0.82);
  margin-bottom: var(--space-4);
}

/* H1 sits a step under the live display--hero scale: this headline is a full
   sentence, not two words, so it needs the smaller step to hold three lines
   at 1512 and stay off the scrim edge at 390. */
.hcl .h4 .sh__h.hcl-hero__h1 {
  font-size: min(calc(var(--text-3xl) * 0.66), 6.2vw);
  text-transform: none;
  letter-spacing: var(--track-tight);
  color: #ffffff;
  line-height: 1.08;
  max-width: 31ch;
}

.hcl .hcl-hero__lede { max-width: 48ch; }

/* Brand signal — present, deliberately quiet, never the explanation. */
.hcl-hero__signal {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: clamp(var(--space-8), 3.4vw, var(--space-12));
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.6);
}
.hcl-hero__signal::before {
  content: '';
  width: clamp(28px, 4vw, 56px);
  height: 1px;
  background: #ffffff;
}
.hcl-hero__signal,
.hcl-hero__signal b {
  color: #ffffff;
}
.hcl-hero__signal b { font-weight: var(--weight-regular); }

/* Hero buttons: the site's .sh__btn outline, plus one filled rust primary so
   the first action is unambiguous. */
.hcl-hero__btn--solid {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.hcl-hero__btn--solid:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/* Link-out actions use one invitation-shaped geometry throughout the mockup.
   The Who We Serve register is intentionally excluded: its square cells form
   a single directory rather than a collection of standalone buttons. */
.hcl a.btn,
.hcl a.sh__btn {
  border-radius: var(--radius-full);
}

@media (max-width: 900px) {
  .hcl .h4__inner { padding-bottom: clamp(var(--space-12), 9vw, var(--space-16)); }
  .hcl .h4__cs { max-width: none; }
  .hcl .h4 .sh__h.hcl-hero__h1 { font-size: min(calc(var(--text-3xl) * 0.58), 8.2vw); max-width: none; }
  .hcl .hcl-hero__lede { max-width: none; }
}

/* --------------------------------------------------------------------------
   2. WHO WE ARE
   The live site's industry-intro composition (.apr-split) is reused directly.
   Only the final text link needs mockup-specific spacing.
   -------------------------------------------------------------------------- */

.hcl-text-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  color: var(--color-primary);
  font-family: var(--font-eyebrow);
  font-size: var(--text-xs);
  letter-spacing: var(--track-caps-sm);
  text-transform: uppercase;
}

.hcl-text-link span {
  font-family: Arial, sans-serif;
  font-size: 1.2em;
  transition: transform var(--transition-interactive);
}

.hcl-text-link:hover span,
.hcl-text-link:focus-visible span { transform: translateX(4px); }

.hcl-about-intro .hcl-text-link { margin-top: var(--space-6); }

/* --------------------------------------------------------------------------
   3. CLIENT OUTCOMES
   -------------------------------------------------------------------------- */

.hcl-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 24px);
}

.hcl-story-card {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  container-type: inline-size;
  min-height: 390px;
  aspect-ratio: 8 / 7;
  overflow: hidden;
  background: #111111;
  color: #ffffff;
  isolation: isolate;
}

.hcl-story-card__visual,
.hcl-story-card__visual img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hcl-story-card__visual img {
  object-fit: cover;
  transform: scale(1.01);
  transition: filter 420ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hcl-story-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.03) 5%, rgb(0 0 0 / 0.14) 38%, rgb(0 0 0 / 0.94) 100%);
}

.hcl-story-card--rust::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(150deg, rgb(166 74 64 / 0.18), transparent 58%);
}

.hcl-story-card--slate::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(150deg, rgb(102 120 124 / 0.18), transparent 58%);
}

.hcl-story-card__panel {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(22px, 2.1vw, 34px);
}

.hcl-story-card__panel::before,
.hcl-story-card__panel::after {
  position: absolute;
  top: clamp(18px, 1.65vw, 26px);
  right: clamp(18px, 1.65vw, 26px);
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  transition: color var(--transition-interactive), background-color var(--transition-interactive);
}

.hcl-story-card__panel::before {
  content: "";
  border: 1px solid #ffffff;
}

.hcl-story-card__panel::after {
  content: "\2192";
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 1.35rem;
}

.hcl-story-card__kicker {
  margin-bottom: var(--space-3);
  color: rgb(255 255 255 / 0.82);
  font-family: var(--font-eyebrow);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-caps-sm);
  line-height: 1.3;
  text-transform: uppercase;
}

.hcl-story-card__title {
  max-width: 28ch;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: clamp(0.875rem, 4cqw, 1.15rem);
  font-weight: var(--weight-light);
  line-height: 1.28;
  letter-spacing: var(--track-tight);
}

.hcl-story-card__excerpt {
  max-width: 42ch;
  margin-top: var(--space-3);
  color: rgb(255 255 255 / 0.76);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.hcl-story-card:hover .hcl-story-card__visual img,
.hcl-story-card:focus-visible .hcl-story-card__visual img {
  filter: brightness(0.82);
  transform: scale(1.045);
}

.hcl-story-card:hover .hcl-story-card__panel::before,
.hcl-story-card:focus-visible .hcl-story-card__panel::before { background: #ffffff; }

.hcl-story-card:hover .hcl-story-card__panel::after,
.hcl-story-card:focus-visible .hcl-story-card__panel::after { color: #111111; }

@media (max-width: 1024px) {
  .hcl-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .hcl-card-grid { grid-template-columns: minmax(0, 1fr); }
  .hcl-story-card { min-height: 350px; aspect-ratio: 16 / 13; }
  .hcl-story-card__panel { padding: 22px; }
}

.hcl-outs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--space-6), 2.4vw, var(--space-10));
}

.hcl-out {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(var(--space-6), 2.2vw, var(--space-9));
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}

.hcl-out__n {
  font-family: var(--font-eyebrow);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-caps);
  color: var(--color-primary);
}

.hcl-out__t {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  color: var(--color-text);
}

.hcl-out__d {
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .hcl-outs { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   4. HOW WE HELP
   The shared .ops-help component is loaded directly from
   solution-how-we-help.css. These rules only arrange the two families and add
   the homepage's direct-link button inside each otherwise canonical panel.
   -------------------------------------------------------------------------- */

.hcl-solution-families {
  display: grid;
  gap: clamp(var(--space-16), 7vw, var(--space-24));
}

.hcl-solution-family__head {
  margin-bottom: clamp(var(--space-6), 2.5vw, var(--space-10));
}

.hcl-solution-family__head .eyebrow {
  margin: 0;
}

.hcl .ops-help__panel-inner {
  align-items: flex-start;
}

.hcl-ops-help__link {
  gap: var(--space-3);
  margin-top: clamp(var(--space-6), 2.4vw, var(--space-9));
}

.hcl-ops-help__link svg {
  transition: transform var(--transition-interactive);
}

.hcl-ops-help__link:hover svg,
.hcl-ops-help__link:focus-visible svg {
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .hcl-solution-family__head {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }
}

.hcl-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--space-6), 2.6vw, var(--space-10));
}

.hcl-path {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: clamp(var(--space-7), 2.6vw, var(--space-10));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.hcl-path__k {
  font-family: var(--font-eyebrow);
  font-size: var(--text-xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--color-primary);
}

.hcl-path__t {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(1.35rem, 1.05rem + 0.9vw, 1.9rem);
  line-height: 1.16;
  letter-spacing: var(--track-tight);
  color: var(--color-text);
}

.hcl-path__d {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  max-width: 46ch;
}

/* Supporting labels — read as scope, not as ten more decisions. */
.hcl-path__labels {
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-divider);
}
.hcl-path__labels-h {
  font-family: var(--font-eyebrow);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
}
.hcl-path__labels ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}
.hcl-path__labels li {
  font-size: var(--text-sm);
  line-height: 1.35;
  color: var(--color-text-muted);
}
/* A small rust dot marks each label. An inter-item rule was tried first, but
   it breaks visually the moment the list wraps onto a second line. */
.hcl-path__labels li::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 0.55em;
  vertical-align: 0.28em;
  border-radius: 50%;
  background: var(--color-primary);
}

.hcl-path__act { margin-top: var(--space-6); }

@media (max-width: 900px) {
  .hcl-paths { grid-template-columns: minmax(0, 1fr); }
  .hcl-path__d { max-width: none; }
  .hcl-path__labels ul { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   5. FEATURED CLIENT RESULT
   -------------------------------------------------------------------------- */

.hcl-case {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  align-items: start;
}

.hcl-case__visual {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface-offset);
}
.hcl-case__visual img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.hcl-case__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    200deg,
    color-mix(in oklab, var(--color-primary) 12%, transparent) 0%,
    transparent 55%
  );
}

.hcl-case__t {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(1.4rem, 1.05rem + 1.15vw, 2.1rem);
  line-height: 1.16;
  letter-spacing: var(--track-tight);
  color: var(--color-text);
  margin-top: var(--space-4);
}

/* The three metrics reuse the live case-study .cmetric type, dropped into a
   left-aligned three-up so the numbers stay the client's, verbatim. */
.hcl-case .cmetrics {
  margin-top: clamp(var(--space-6), 2.4vw, var(--space-8));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  padding-block: var(--space-6);
}

.hcl-case__blocks {
  margin-top: clamp(var(--space-6), 2.4vw, var(--space-8));
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.hcl-case__block { display: flex; flex-direction: column; gap: var(--space-2); }
.hcl-case__bh {
  font-family: var(--font-eyebrow);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--color-primary);
}
.hcl-case__bp {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  max-width: 62ch;
}
.hcl-case__act { margin-top: var(--space-8); }

@media (max-width: 1100px) {
  .hcl-case { grid-template-columns: minmax(0, 1fr); }
  .hcl-case__visual img { aspect-ratio: 16 / 9; }
}
/* The live value scale is set for the full shell width. In this half-width
   column it crowds the cell dividers, so the size steps down while the
   display face, weight, colour and tracking stay exactly as the case study
   sets them. */
.hcl-case .cmetric__v { font-size: clamp(2rem, 3.1vw, 3.25rem); }

@media (max-width: 620px) {
  .hcl-case .cmetrics { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   6. WHY CBC
   -------------------------------------------------------------------------- */

.hcl-why {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  align-items: start;
}

.hcl-reasons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--space-6), 2.4vw, var(--space-9));
}
.hcl-reason {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 2px solid var(--color-primary);
}
.hcl-reason__t {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  color: var(--color-text);
}
.hcl-reason__d {
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

.hcl-people { display: flex; flex-direction: column; gap: var(--space-5); }
.hcl-people__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.hcl-person {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.hcl-person__ph {
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-surface-offset);
}
.hcl-person__ph img {
  width: 100%;
  aspect-ratio: 9 / 7;
  object-fit: cover;
}
.hcl-person__n {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  line-height: 1.3;
}
.hcl-person__r {
  font-family: var(--font-eyebrow);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-caps-sm);
  text-transform: uppercase;
  color: var(--color-text-faint);
  line-height: 1.3;
}
.hcl-people__note {
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

@media (max-width: 1100px) {
  .hcl-why { grid-template-columns: minmax(0, 1fr); }
  .hcl-people__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hcl-reasons { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .hcl-people__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   7. INDUSTRY EXPERIENCE
   -------------------------------------------------------------------------- */

.hcl-industry-intro {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-8), 4vw, var(--space-12));
}

.hcl-industry-intro .title {
  max-width: none;
  margin-top: var(--space-4);
}

.hcl-industry-intro__copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  line-height: var(--lh-relaxed);
}

@media (min-width: 1101px) {
  .hcl-industry-intro .title {
    white-space: nowrap;
  }
}

.hcl-industry-links {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: clamp(var(--space-10), 5vw, var(--space-16));
  border-top: 1px solid var(--color-divider);
  border-left: 1px solid var(--color-divider);
}

.hcl-industry-links .hcl-ind {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-height: 106px;
  padding: var(--space-5);
  border-right: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  border-radius: 0;
  transition:
    background-color var(--transition-interactive),
    color var(--transition-interactive);
}

.hcl-industry-links .hcl-ind__n {
  font-size: var(--text-base);
  line-height: 1.25;
}

.hcl-industry-links .hcl-ind__go {
  margin: 0;
  padding: 0;
  color: var(--color-primary);
  font-family: Arial, sans-serif;
  font-size: 1.2rem;
  transition: transform var(--transition-interactive);
}

.hcl-industry-links .hcl-ind:hover .hcl-ind__go,
.hcl-industry-links .hcl-ind:focus-visible .hcl-ind__go { transform: translateX(4px); }

.hcl-industry-links .hcl-ind:hover,
.hcl-industry-links .hcl-ind:focus-visible {
  background: #a64a40;
  color: #ffffff;
}

.hcl-industry-links .hcl-ind:hover .hcl-ind__n,
.hcl-industry-links .hcl-ind:focus-visible .hcl-ind__n,
.hcl-industry-links .hcl-ind:hover .hcl-ind__go,
.hcl-industry-links .hcl-ind:focus-visible .hcl-ind__go {
  color: #ffffff;
}

@media (max-width: 1100px) {
  .hcl-industry-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .hcl-industry-intro__copy {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }
}

@media (max-width: 560px) {
  .hcl-industry-links { grid-template-columns: minmax(0, 1fr); }
  .hcl-industry-links .hcl-ind { min-height: 82px; }
}

.hcl-inds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-divider);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.hcl-ind {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(var(--space-6), 2.2vw, var(--space-8));
  background: var(--color-surface);
  transition: background var(--transition-interactive);
}
.hcl-ind:hover { background: var(--color-primary-wash); }
.hcl-ind:hover .hcl-ind__n { color: var(--color-primary); }

.hcl-ind__n {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  letter-spacing: var(--track-tight);
  color: var(--color-text);
  transition: color var(--transition-interactive);
}
.hcl-ind__d {
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}
.hcl-ind__go {
  margin-top: auto;
  padding-top: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-eyebrow);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--color-primary);
}

@media (max-width: 1100px) {
  .hcl-inds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .hcl-inds { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   9. CLOSING CTA — the flat rust band, unchanged, with one required override.
   The live band forces `white-space: nowrap` on .cta__title / .cta__lede from
   768px up because every approved headline is short. This mockup's approved
   headline and supporting copy are full sentences, so the nowrap rule would
   push the band into horizontal overflow between 768px and ~1300px. Allow the
   wrap; nothing else about the band changes.
   -------------------------------------------------------------------------- */
.hcl .cta__title,
.hcl .cta__lede {
  max-width: none;
  margin-inline: auto;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .hcl .cta__title { font-size: clamp(1rem, 4.7vw, 1.45rem); }
  .hcl .cta__lede { font-size: clamp(0.68rem, 3vw, 0.9rem); }
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.hcl-section-note {
  margin-top: clamp(var(--space-8), 3vw, var(--space-12));
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.hcl-section-note a {
  color: var(--color-primary);
  border-bottom: 1px solid color-mix(in oklab, var(--color-primary) 40%, transparent);
}
.hcl-section-note a:hover { border-bottom-color: var(--color-primary); }

/* Review banner — mockup only, sits above the site header. */
.hcl-flag {
  position: relative;
  z-index: 300;
  background: var(--color-text);
  color: #ffffff;
  font-family: var(--font-eyebrow);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  text-align: center;
  padding: 0.7em var(--space-4);
}