/* ============================================================================
   FACTORY DESIGN TOKENS — single source of truth for the re-skin.
   :root values are INJECTED by functions.php from ACF Branding (fallback = these
   defaults = Horizon brand). Change the ACF token OR clients/<name>.yaml brand:
   block and the whole site re-skins. Markup never carries a hex value.
   AA pairings are pre-computed (see HORIZON-HOMEPAGE-SPEC §6) — do not substitute.
   ============================================================================ */
:root {
  /* brand (overridden at runtime from ACF) */
  --hz-teal:  #0E5C52;
  --hz-teal-deep: #0A463E;
  --hz-ink:   #0E2233;
  --hz-gold:  #F2B01E;
  --hz-spark: #FFE14D;
  --hz-sand:  #F5F1E8;
  --hz-white: #FFFFFF;

  /* type scale (desktop) — Source Serif (display) + Hanken Grotesk (UI/body) */
  --hz-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --hz-grotesk: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hz-h1: clamp(40px, 5vw, 64px);
  --hz-h2: clamp(30px, 3.6vw, 40px);
  --hz-h3: 22px;
  --hz-result: clamp(48px, 6vw, 72px);
  --hz-body-lg: 19px;
  --hz-body: 17px;
  --hz-caption: 13px;

  /* spacing ladder (8px base) — no off-ladder values */
  --hz-s1: 4px;  --hz-s2: 8px;  --hz-s3: 12px; --hz-s4: 16px;
  --hz-s5: 24px; --hz-s6: 40px; --hz-s7: 64px; --hz-s8: 96px;

  --hz-maxw: 1200px;
  --hz-radius: 14px;
  --hz-shadow-card: 0 24px 64px rgba(10,34,51,.28);
  --hz-focus: 2px;
}

* { box-sizing: border-box; }
.hz-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--hz-white); color: var(--hz-ink); padding: var(--hz-s2) var(--hz-s4); border-radius: 0 0 8px 0; font-weight: 600; }
.hz-skip:focus { left: 0; top: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--hz-grotesk);
  font-size: var(--hz-body);
  line-height: 1.6;
  color: var(--hz-ink);
  background: var(--hz-white);
}
h1,h2 { font-family: var(--hz-serif); font-weight: 600; letter-spacing: -.02em; }
h1 { font-size: var(--hz-h1); line-height: 1.04; margin: 0 0 var(--hz-s4); }
h2 { font-size: var(--hz-h2); line-height: 1.12; }
h3 { font-family: var(--hz-grotesk); font-size: var(--hz-h3); font-weight: 600; line-height: 1.3; }
.hz-wrap { max-width: var(--hz-maxw); margin: 0 auto; padding: 0 var(--hz-s5); }
.hz-eyebrow { font-size: var(--hz-caption); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* AA-locked CTA: gold FILL, INK label, never white (ink-on-gold 8.50:1) */
.hz-cta {
  display: inline-block; background: var(--hz-gold); color: var(--hz-ink);
  font-family: var(--hz-grotesk); font-weight: 600; font-size: var(--hz-body);
  padding: var(--hz-s3) var(--hz-s5); border: 0; border-radius: 999px;
  text-decoration: none; cursor: pointer; min-height: 44px;
}
.hz-cta:hover { filter: brightness(.96); }

/* per-canvas focus ring — never a single global gold ring (fails on light) */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: var(--hz-focus) solid var(--hz-ink); outline-offset: 2px;
}
.hz-on-teal a:focus-visible, .hz-on-teal button:focus-visible, .hz-on-teal input:focus-visible {
  outline-color: var(--hz-white);
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Site header — logo + primary nav (added 2026-06-25, pin hzpin-f40706330008) */
.hz-siteheader { position: sticky; top: 0; z-index: 50; background: var(--hz-white); border-bottom: 1px solid #e6ece9; }
.hz-siteheader__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--hz-s5); padding-top: var(--hz-s3); padding-bottom: var(--hz-s3); }
.hz-logo { display: inline-flex; align-items: center; text-decoration: none; }
.hz-logo__img { display: block; height: 40px; width: auto; }
.hz-logo__mark { font-family: var(--hz-serif); font-weight: 600; font-size: 22px; letter-spacing: -.02em; color: var(--hz-teal); }
.hz-logo__hq { color: var(--hz-gold); margin-left: .25em; }
.hz-nav { display: flex; align-items: center; gap: var(--hz-s5); }
.hz-nav a { font-family: var(--hz-grotesk); font-weight: 600; font-size: var(--hz-body); color: var(--hz-ink); text-decoration: none; }
.hz-nav a:hover { color: var(--hz-teal); }
.hz-nav__cta { background: var(--hz-gold); color: var(--hz-ink) !important; padding: var(--hz-s2) var(--hz-s4); border-radius: 999px; }
@media (max-width: 880px) {
  .hz-nav { gap: var(--hz-s3); flex-wrap: wrap; justify-content: flex-end; }
  .hz-nav a { font-size: var(--hz-caption); }
}

/* Meet-the-team grid — tighten "page-takeover" full-width member photos into a
   compact card grid with small circular thumbnails (pin hzpin team-tighten). */
.hz-team {
  list-style: none; margin: var(--hz-s6) auto 0; padding: 0;
  max-width: var(--hz-maxw);
  display: grid; gap: var(--hz-s5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.hz-member {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--hz-white); border: 1px solid #e6ece9; border-radius: var(--hz-radius);
  padding: var(--hz-s5) var(--hz-s4) var(--hz-s5);
  box-shadow: 0 6px 20px rgba(10,34,51,.06);
}
/* small thumbnail — any source aspect ratio cropped to a tidy circle */
.hz-member__photo {
  width: 144px; height: 144px; max-width: 60%;
  object-fit: cover; object-position: top center;
  border-radius: 50%; border: 3px solid var(--hz-sand);
  margin: 0 0 var(--hz-s4);
}
.hz-member__body { display: block; }
.hz-member__body h3 { margin: 0 0 var(--hz-s1); font-size: var(--hz-h3); }
.hz-member__role {
  margin: 0 0 var(--hz-s3); font-weight: 600; font-size: var(--hz-caption);
  letter-spacing: .04em; text-transform: uppercase; color: var(--hz-teal);
}
.hz-member__body p { margin: 0 0 var(--hz-s3); font-size: var(--hz-body); }
.hz-member__body p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .hz-team { gap: var(--hz-s4); }
  .hz-member { padding: var(--hz-s4); }
}