/* ============================================================
   Heartbeat Hiring — design tokens, base type, shared components
   ============================================================ */
:root{
  color-scheme: light;
  /* spacing scale — every section reads from these, so the content edge
     and the vertical rhythm stay identical across the page.
     --frame is the white margin around the full-bleed cards (hero, the
     tinted Approach band, the footer); a card therefore pads itself by
     (--pad-x - --frame) so ITS content lands on the same edge as the
     ordinary sections. */
  --pad-x: clamp(20px, 3.6vw, 56px);
  --pad-y: clamp(48px, 5.6vw, 82px);
  --frame: 14px;
  /* surfaces */
  --page:#E7F3FA;
  --panel:#FFFFFF;
  --tint:#E8F4FB;
  --tint-2:#EDF6FB;
  --line:#E1EDF5;
  --line-2:#CFE2EE;
  /* text */
  --ink:#1B6C8D;
  --ink-deep:#14586F;
  --title:#2E90C6;
  --blue-body:#3E93C2;
  --body:#6B7A80;
  --muted:#93A3AA;
  /* brand */
  --accent:#2E93D0;
  --logo-blue:#3B86DE;
  --accent-deep:#2379AF;
  --card-blue:#3E97C4;
  --teal:#1B6079;
  --cream:#F2F0EA;
  /* photography placeholders — NEUTRAL, because real photos are not blue */
  --photo-1:#EEF1F4;
  --photo-2:#D6DEE4;
  --photo-3:#BDC9D2;
  --photo-label:#8496A3;
  /* artwork */
  --sky-1:#9FCDEA;
  --sky-2:#5EA5D4;
  --sky-3:#2F80AC;
  --sky-4:#1D5F80;
  /* geometry */
  --r-shell:34px;
  --r-card:22px;
  --r-md:16px;
  --r-sm:12px;
  --sh:0 30px 60px -40px rgba(20,88,111,.35);
  --sh-sm:0 10px 26px -18px rgba(20,88,111,.40);
}
/* This page deliberately commits to ONE light visual world, matching the
   reference design system. There is no dark palette: the sections are white
   in every viewing context, including when the viewer's OS is set to dark. */

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--page);
  color:var(--body);
  font-family:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}

/* ---- the white shell every section lives inside ---- */
.hh-shell{
  max-width:1420px;
  margin:26px auto;
  background:var(--panel);
  border-radius:var(--r-shell);
  box-shadow:var(--sh);
  padding-bottom:14px;
  overflow:hidden;
}
.hh-inset{padding:0 var(--pad-x)}
.hh-inset--tight{padding:0 var(--frame)}

/* ---- shared: eyebrow label ---- */
.hh-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.74rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent);line-height:1;
}
.hh-eyebrow::before{content:"\2726";font-size:.95em}

/* ---- shared: pill button ---- */
.hh-pill{
  display:inline-flex;align-items:center;gap:14px;white-space:nowrap;
  border-radius:999px;padding:8px 8px 8px 24px;
  font-size:1rem;font-weight:500;
  background:var(--panel);color:var(--ink);box-shadow:var(--sh-sm);
  transition:transform .18s ease,box-shadow .18s ease;
}
.hh-pill:hover{transform:translateY(-2px);box-shadow:0 18px 36px -22px rgba(20,88,111,.55)}
.hh-pill__dot{
  width:38px;height:38px;border-radius:999px;flex:0 0 auto;
  background:var(--accent);color:#fff;display:grid;place-items:center;
  transition:background .18s ease;
}
.hh-pill__dot svg{width:16px;height:16px}
.hh-pill--sm{padding:6px 6px 6px 18px;font-size:.9rem;gap:10px}
.hh-pill--sm .hh-pill__dot{width:32px;height:32px}
.hh-pill--sm .hh-pill__dot svg{width:14px;height:14px}
.hh-pill--blue{background:var(--accent);color:#fff;box-shadow:none}
.hh-pill--blue .hh-pill__dot{background:var(--panel);color:var(--accent)}
.hh-pill--ghost{background:transparent;border:1px solid var(--line-2);box-shadow:none;color:var(--accent)}
.hh-pill--ghost .hh-pill__dot{background:transparent;border:1px solid var(--line-2);color:var(--accent)}

/* ---- shared: photography placeholder ----
   Every photo slot on the page is one of these. Swap the element for an
   <img>/<video> and keep the surrounding classes to drop real media in.     */
.ph{
  position:relative;overflow:hidden;
  background:linear-gradient(158deg,var(--photo-1) 0%,var(--photo-2) 62%,var(--photo-3) 100%);
}
/* a faint frame + centre mark so an empty slot reads as "photo goes here"
   rather than as a coloured block of design */
.ph::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 45% at 50% 38%, rgba(255,255,255,.55), transparent 70%);
}
.ph[data-ph]::after{
  content:attr(data-ph);
  position:absolute;left:12px;right:12px;bottom:10px;
  font-size:10px;letter-spacing:.09em;line-height:1.3;
  text-transform:uppercase;color:var(--photo-label);
  pointer-events:none;
}
.ph[data-ph="Photo"]::after{content:none}
/* --sky is reserved for slots that really are blue in the reference:
   the sky behind the hero and the blue-lit clinical still in Approach. */
.ph--sky{background:linear-gradient(165deg,var(--sky-1),var(--sky-3))}
/* a slot holding real photography: drop the placeholder wash, cover the box */
.ph--img{background-size:cover;background-position:center;background-repeat:no-repeat}
.ph--img::before{content:none}
.ph--img::after{content:none}
.ph--sky::before{background:radial-gradient(65% 50% at 55% 30%, rgba(255,255,255,.45), transparent 70%)}
.ph--sky[data-ph]::after{color:rgba(255,255,255,.75)}
.ph--soft{background:linear-gradient(165deg,var(--photo-1),var(--photo-2))}
.ph--deep{background:linear-gradient(165deg,var(--photo-2),var(--photo-3))}

/* ================= hero ================= */
/* ── Hero ─────────────────────────────────────────────────────────────── */

.hh-hero {
  --hh-cycle: 7000ms;
  padding: 14px;
  background: var(--panel);
  border-radius: var(--r-shell);
}

.hh-hero__card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  min-height: 660px;
  display: flex;
  flex-direction: column;
  padding: 26px 30px 24px;
  color: #fff;
}

/* ── Artwork ──────────────────────────────────────────────────────────── */

.hh-hero__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(180deg,
    var(--sky-1) 0%,
    var(--sky-2) 44%,
    var(--sky-3) 76%,
    var(--sky-4) 100%);
}

/* ── the three photographs, flipped by the slider ─────────────────────── */
.hh-hero__flip {
  position: absolute;
  inset: 0;
}

.hh-hero__shot {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 34%;
  opacity: 0;
  transition: opacity .9s ease;
}
.hh-hero__shot.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce){
  .hh-hero__shot{transition:opacity .3s ease}
}

/* Photographic scrim. The supplied shots are bright and high-key, and the
   headline over them is white, so the brand blue is carried as a wash that
   holds contrast instead of letting the photo sit at full brightness. */
.hh-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* text side: heavy. photo side: clear. */
    linear-gradient(100deg,
      color-mix(in srgb, var(--sky-4) 88%, transparent) 0%,
      color-mix(in srgb, var(--sky-4) 66%, transparent) 34%,
      color-mix(in srgb, var(--sky-4) 26%, transparent) 66%,
      color-mix(in srgb, var(--sky-4) 6%, transparent) 100%),
    /* keep the nav and the glass cards legible top and bottom */
    linear-gradient(180deg,
      color-mix(in srgb, var(--sky-4) 40%, transparent) 0%,
      transparent 22%,
      transparent 54%,
      color-mix(in srgb, var(--sky-4) 60%, transparent) 100%);
}

.hh-hero__art::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 42% at 72% 26%, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(74% 50% at 55% 116%, color-mix(in srgb, var(--sky-4) 55%, transparent) 0%, transparent 70%);
}





.hh-hero__grain {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.85) .5px, transparent .5px);
  background-size: 4px 4px;
  opacity: .35;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ── Nav ──────────────────────────────────────────────────────────────── */

.hh-hero__nav {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}

.hh-hero__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
}

.hh-hero__mark {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
}

.hh-hero__word {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: #fff;
}

.hh-hero__links {
  margin-left: auto;
  display: flex;
  align-items: center;
  /* 30px at desktop; tightens just above the 980px breakpoint so no link
     ever wraps onto a second line */
  gap: clamp(18px, 2.2vw, 30px);
}

.hh-hero__link {
  position: relative;
  white-space: nowrap;
  font-size: .95rem;
  font-weight: 500;
  color: rgba(255,255,255,.92);
  text-decoration: none;
  transition: color .2s ease;
}

.hh-hero__link:hover,
.hh-hero__link:focus-visible {
  color: #fff;
}

.hh-hero__link--on {
  color: #fff;
}

.hh-hero__link--on::before {
  content: "\2022";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .75rem;
  line-height: 1;
  color: #fff;
}

.hh-hero__cta {
  margin-left: 30px;
}

.hh-hero a:focus-visible,
.hh-hero button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ── Intro ────────────────────────────────────────────────────────────── */

.hh-hero__intro {
  position: relative;
  z-index: 1;
  margin-top: clamp(60px, 8vw, 104px);
  max-width: 620px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.hh-hero__trust {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hh-hero__faces {
  display: inline-flex;
  align-items: center;
}

.hh-hero__face {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: linear-gradient(180deg, var(--sky-1) 0%, #fff 100%);
  display: grid;
  place-items: center;
  font-size: .62rem;
  font-weight: 700;
  color: var(--teal);
}

.hh-hero__face + .hh-hero__face {
  margin-left: -10px;
}

.hh-hero__trustline {
  font-size: .92rem;
  color: rgba(255,255,255,.95);
}

/* ── Rotating headline ────────────────────────────────────────────────── */

.hh-hero__slides {
  position: relative;
  width: 100%;
  min-height: 3.2em;
  font-size: clamp(2.5rem, 5vw, 4.05rem);
}

.hh-hero__title {
  margin: 0;
  font-size: inherit;
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.025em;
  color: #fff;
  max-width: 13ch;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}

.hh-hero__title.is-on {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

/* ── Base row ─────────────────────────────────────────────────────────── */

.hh-hero__base {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: clamp(40px, 6vw, 76px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;
}

.hh-hero__blurb h3 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -.02em;
}

.hh-hero__blurb p {
  margin: 0;
  color: rgba(255,255,255,.92);
  font-size: .95rem;
  line-height: 1.55;
  max-width: 44ch;
}

.hh-hero__cards {
  display: flex;
  gap: 14px;
}

.hh-hero__stat,
.hh-hero__chips {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.32);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-radius: 20px;
}
.hh-hero__stat-body,
.hh-hero__chips-body { position: relative; z-index: 1; }

.hh-hero__stat {
  width: 290px;
  padding: 20px 24px 22px;
}

/* ── sweep: a light crossing the card in exactly one slide ──────────────
   One light crosses BOTH glass cards in exactly one slide. The core is
   painted at the band's own 50%, so translating -50% -> +50% walks it
   across the band's full width in one cycle; because the band spans the
   whole cards group, the core's position as a fraction of that group
   always equals the active progress bar's fill fraction. */
.hh-sweep {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  transform: translateZ(0);
}
/* The band is sized to the WHOLE cards group and shifted left by this
   card's offset within it, so both cards paint the same travelling light
   in the same group coordinate space. The result is one sweep crossing
   the pair — it simply is not drawn in the gap between them. */
.hh-sweep__band {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(-1 * var(--sweep-shift, 0px));
  width: var(--sweep-span, 100%);
  transform: translate3d(-50%,0,0);
  will-change: transform;
  background: linear-gradient(90deg,
    rgba(255,255,255,0)    calc(50% - 52px),
    rgba(255,255,255,.020) calc(50% - 32px),
    rgba(255,255,255,.065) calc(50% - 14px),
    rgba(255,255,255,.145) 50%,
    rgba(255,255,255,.065) calc(50% + 14px),
    rgba(255,255,255,.020) calc(50% + 32px),
    rgba(255,255,255,0)    calc(50% + 52px));
}
.hh-sweep.is-on .hh-sweep__band {
  animation: hh-sweep-x var(--hh-cycle) linear both;
}
@keyframes hh-sweep-x {
  from { transform: translate3d(-50%,0,0); }
  to   { transform: translate3d(50%,0,0); }
}
@media (prefers-reduced-motion: reduce){
  .hh-sweep { display: none; }
}

/* ── feature ticker: positives flowing top to bottom ─────────────────── */
.hh-hero__chips {
  --tick-h: 30px;
  --tick-gap: 9px;
  --tick-fade: 14px;
  --tick-pitch: calc(var(--tick-h) + var(--tick-gap));
  /* 25% narrower than the 290px stat card, which now leads the pair */
  width: 218px;
  padding: 16px 15px 15px;
}
.hh-ticker__viewport {
  position: relative;
  height: calc(4 * var(--tick-pitch));
  overflow: hidden;
  outline: none;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 var(--tick-fade), #000 calc(100% - var(--tick-fade)), rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 var(--tick-fade), #000 calc(100% - var(--tick-fade)), rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
.hh-ticker__viewport:focus-visible { border-radius: 12px; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
/* two identical stacks: translateY(-50%) is exactly one stack, so the
   seam is invisible regardless of font size, gap or item count */
.hh-ticker__track {
  display: flex;
  flex-direction: column;
  gap: 0;
  will-change: transform;
  transform: translate3d(0,-50%,0);
  animation: hh-ticker-flow 21s linear infinite;
}
@keyframes hh-ticker-flow {
  from { transform: translate3d(0,-50%,0); }
  to   { transform: translate3d(0,0,0); }
}
.hh-hero__chips:hover .hh-ticker__track,
.hh-hero__chips:focus-within .hh-ticker__track { animation-play-state: paused; }
.hh-ticker__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0; margin: 0; padding: 0; list-style: none;
}
.hh-ticker__item {
  margin: 0 0 var(--tick-gap);
  box-sizing: border-box;
  height: var(--tick-h);
  max-width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  background: rgba(6,34,48,.22);
  color: #fff;
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
}
.hh-ticker__item::before {
  content: "";
  flex: 0 0 auto;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
}
@media (prefers-reduced-motion: reduce){
  .hh-ticker__track { animation: none; transform: none; will-change: auto; }
  .hh-ticker__dupe { display: none; }
  .hh-ticker__item:last-child { margin-bottom: 0; }
  .hh-ticker__viewport {
    height: calc(4 * var(--tick-pitch) - var(--tick-gap));
    overflow-y: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

.hh-hero__label {
  display: block;
  font-size: .82rem;
  color: rgba(255,255,255,.9);
}

.hh-hero__value {
  margin: 10px 0 12px;
  font-size: 3.35rem;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.hh-hero__note {
  margin: 0;
  font-size: .81rem;
  line-height: 1.45;
  color: rgba(255,255,255,.88);
}



.hh-hero__x svg {
  display: block;
}



/* ── Slider bars ──────────────────────────────────────────────────────── */

.hh-hero__bars {
  position: relative;
  z-index: 1;
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.hh-hero__bars button {
  height: 4px;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.32);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.hh-hero__bars button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
}

.hh-hero__bars button.is-done::after {
  transform: scaleX(1);
}

.hh-hero__bars button.is-on::after {
  transform: scaleX(1);
}

.hh-hero__bars button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 5px;
}

@media (prefers-reduced-motion: no-preference) {
  .hh-hero__bars button.is-on::after {
    animation: hh-hero-fill 7s linear forwards;
  }
}

@keyframes hh-hero-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .hh-hero__links {
    display: none;
  }

  .hh-hero__cta {
    margin-left: auto;
  }

  .hh-hero__base {
    grid-template-columns: minmax(0, 1fr);
  }

  .hh-hero__cards {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .hh-hero__card {
    padding: 20px;
  }

  .hh-hero__stat {
    width: 100%;
  }

  /* the nav row is brand + CTA only once the links are hidden; at this
     width the wordmark was wrapping to two lines and running into the
     button, so tighten both and stop the lockup breaking */
  .hh-hero__brand { gap: 8px; min-width: 0; }
  .hh-hero__word  { font-size: 1.06rem; white-space: nowrap; }
  .hh-hero__mark  { width: 26px; height: 26px; flex: 0 0 26px; }
  .hh-hero__cta   { margin-left: auto; padding: 5px 5px 5px 15px; font-size: .86rem; gap: 8px; }
  .hh-hero__cta .hh-pill__dot { width: 28px; height: 28px; }
  .hh-hero__cta .hh-pill__dot svg { width: 13px; height: 13px; }
}

@media (max-width: 380px) {
  .hh-hero__word { font-size: .98rem; }
  .hh-hero__cta  { padding: 4px 4px 4px 12px; font-size: .8rem; }
}

@media (max-width: 350px) {
  /* Measured at 320px: wordmark + CTA need 274px of a 237px row. Shrinking
     both further makes them illegible, so the wordmark steps aside and the
     heart mark carries the identity; the footer still shows the full
     lockup. */
  .hh-hero__word { display: none; }
}

/* ================= about ================= */
/* ABOUT — white shell, no card */
.hh-about{
  position:relative;
  background:var(--panel);
  padding-top:var(--pad-y);
  padding-bottom:var(--pad-y);
}

/* DNA helix footage behind the left half.
   The clip is blue stipple on a white ground, so `multiply` drops the white
   out against the white section and leaves only the helix. */
.hh-about__dust{
  position:absolute;
  left:-2%;
  top:-2%;
  width:31%;
  height:62%;
  aspect-ratio:auto;
  pointer-events:none;
  z-index:0;
  opacity:.9;
  /* feather every edge so the clip's rectangular frame never shows, and so it
     fades out before it reaches the impact figure below */
  -webkit-mask-image:radial-gradient(66% 74% at 52% 44%, #000 40%, transparent 88%);
  mask-image:radial-gradient(66% 74% at 52% 44%, #000 40%, transparent 88%);
}
.hh-about__video{
  display:block;
  width:100%;
  height:100%;
  /* the helix occupies the right of the frame; crop the empty left away
     and let it fill the taller box rather than letterboxing it */
  object-fit:cover;
  object-position:72% center;
  mix-blend-mode:multiply;
  /* The clip's ground is ~rgb(249,249,251), not white; under `multiply`
     that would stamp a faint grey block on the section, so it has to be
     lifted to 255. Do that with CONTRAST, never brightness: contrast
     pivots about mid-grey, so it whitens the ground while deepening the
     helix, whereas brightness lifts everything and bleached the strand
     to (244,253,255) — near-white. Saturate then pushes the blue, and
     leaves the neutral ground untouched by definition.
     Measured on the footage: ground -> 255,255,255; pale helix -> blueness
     (b-r) 43, up from 11. */
  filter:contrast(1.12) saturate(2.6);
}
/* the clip is ambient decoration: hold it on a still frame when the
   viewer has asked for less motion */
@media (prefers-reduced-motion: reduce){
  .hh-about__video{animation:none}
}

/* every real thing sits above the artwork */
.hh-about__top,
.hh-about__lower{
  position:relative;
  z-index:1;
}

/* ---------- row 1 ---------- */
.hh-about__top{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:30px;
  align-items:start;
}
.hh-about__lead{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  padding-left:clamp(0px,9vw,140px);
}
.hh-about__statement{
  margin:0;
  font-size:clamp(1.35rem,2.5vw,2rem);
  font-weight:500;
  line-height:1.32;
  color:var(--ink-deep);
  letter-spacing:-.02em;
  max-width:24ch;
}

/* ---------- row 2 ---------- */
.hh-about__lower{
  margin-top:clamp(44px,5.5vw,80px);
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);
  gap:clamp(28px,5vw,76px);
  align-items:end;
}

/* impact block */
.hh-about__impact-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line-2);
  margin-bottom:26px;
}
.hh-about__tag{
  display:inline-flex;
  align-items:center;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 18px;
  font-size:.9rem;
  font-weight:500;
  line-height:1;
  color:var(--ink);
  white-space:nowrap;
}
.hh-about__nav-group{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}
.hh-about__nav{
  width:38px;
  height:38px;
  padding:0;
  border:0;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:transparent;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.hh-about__nav svg{
  width:16px;
  height:16px;
  display:block;
}
.hh-about__nav.prev{
  border:1px solid var(--line-2);
  color:var(--ink);
}
.hh-about__nav.next{
  background:var(--accent);
  border:1px solid var(--accent);
  color:#fff;
}
.hh-about__nav.prev:hover{
  background:var(--tint-2);
}
.hh-about__nav.next:hover{
  background:var(--accent-deep);
  border-color:var(--accent-deep);
}
.hh-about__nav:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

.hh-about__figure{
  font-size:clamp(2.7rem,5.2vw,3.5rem);
  font-weight:500;
  line-height:1;
  color:var(--ink);
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.hh-about__figure-label{
  margin:12px 0 0;
  font-size:.92rem;
  line-height:1.5;
  color:var(--body);
  max-width:30ch;
}

/* the two tint cards */
.hh-about__duo{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}
.hh-about__card{
  background:var(--tint-2);
  border-radius:var(--r-card);
  padding:16px;
}
.hh-about__card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:42px;
}
.hh-about__chip{
  width:44px;
  height:44px;
  flex:0 0 auto;
  border-radius:999px;
  background:var(--panel);
  display:grid;
  place-items:center;
  color:var(--accent);
}
.hh-about__chip svg{
  width:20px;
  height:20px;
  display:block;
}
.hh-about__pill{
  display:inline-flex;
  align-items:center;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 16px;
  font-size:.8rem;
  font-weight:500;
  line-height:1;
  color:var(--ink);
  white-space:nowrap;
}
.hh-about__card h3{
  margin:0 0 14px 2px;
  color:var(--title);
  font-size:1.25rem;
  font-weight:500;
  letter-spacing:-.02em;
}
.hh-about__note{
  margin:0;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  font-size:.95rem;
  line-height:1.5;
  color:var(--blue-body);
}

/* ---------- row 3 ---------- */
/* ---------- responsive ---------- */
@media (max-width:980px){
  .hh-about__dust{
    left:auto;
    right:-4%;
    top:auto;
    bottom:2%;
    width:60%;
    height:52%;
    opacity:.5;
  }
  .hh-about__top{
    grid-template-columns:minmax(0,1fr);
    gap:22px;
  }
  .hh-about__lead{
    padding-left:0;
  }
  .hh-about__lower{
    grid-template-columns:minmax(0,1fr);
    align-items:start;
  }
}

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

/* ================= why ================= */
/* ── WHY CHOOSE US ───────────────────────────────────────────── */

.hh-why {
  background: var(--panel);
  padding: var(--pad-y) 0;
}

/* ── head ────────────────────────────────────────────────────── */

/* the head is a two-column grid, so the eyebrow spans it and sits on its
   own row directly above the heading — the same 14px label-to-heading
   relationship every other section uses */
.hh-why__eyebrow{
  grid-column: 1 / -1;
  justify-self: start;
}

.hh-why__head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .85fr);
  column-gap: clamp(24px, 4vw, 60px);
  row-gap: 14px;
  align-items: start;
  margin-bottom: clamp(30px, 4vw, 52px);
}

.hh-why__head h2 {
  margin: 0;
  font-size: clamp(1.9rem, 3.1vw, 2.7rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--ink);
  max-width: 18ch;
}

.hh-why__head p {
  margin: 0;
  padding-top: .5rem;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--body);
  max-width: 44ch;
}

/* ── body grid ───────────────────────────────────────────────── */

.hh-why__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.32fr);
  gap: clamp(18px, 2.6vw, 34px);
  align-items: stretch;
}

/* ── column 1 · values list ──────────────────────────────────── */

.hh-why__values {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hh-why__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: .8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.hh-why__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hh-why__list li {
  border-bottom: 1px solid var(--line);
}

.hh-why__list button {
  width: 100%;
  margin: 0;
  padding: 13px 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  cursor: pointer;
  transition: color .18s;
}

.hh-why__list button:hover {
  color: var(--title);
}

.hh-why__list button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.hh-why__list .is-on button {
  color: var(--ink);
  font-size: 1.2rem;
  padding: 15px 0;
}

/* ── animated icon holder ─────────────────────────────────────────────
   ONE video holds a 5x4 grid of 20 icons. Rather than embed it five
   times, a single element is cropped to one grid cell and slid to the
   active row: --ix/--iy are that icon's centre as a fraction of the
   frame, so the video is scaled up and offset until that cell alone
   fills the circular holder. */
.hh-why__list-wrap { position: relative; }

.hh-why__icon {
  --size: 54px;
  --vw: 432px;                       /* frame width so one cell == --size */
  --vh: 335.2px;                     /* --vw / (1856/1440) */
  --ix: .6838;
  --iy: .1406;
  position: absolute;
  right: 0;
  top: 0;
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  overflow: hidden;
  pointer-events: none;
  background: var(--tint-2);
  transition: top .32s cubic-bezier(.4,0,.2,1);
}
.hh-why__icon-v {
  position: absolute;
  opacity: 0;
  transition: opacity .18s ease;
  width: var(--vw);
  height: var(--vh);
  max-width: none;
  left: calc(var(--size) / 2 - var(--vw) * var(--ix));
  top:  calc(var(--size) / 2 - var(--vh) * var(--iy));
}
.hh-why__icon[data-set="a"] .hh-why__icon-v[data-set="a"],
.hh-why__icon[data-set="b"] .hh-why__icon-v[data-set="b"] { opacity: 1; }
@media (prefers-reduced-motion: reduce){
  .hh-why__icon { transition: none; }
  .hh-why__icon-v { transition: none; }
}

.hh-why__values .hh-pill {
  margin-top: 24px;
  align-self: flex-start;
}

/* ── column 2 · photo ────────────────────────────────────────── */

/* ── column 2 · one unified glass card ────────────────────────
   The photograph rotates with the values list; a blue scrim plus a
   frosted panel carry the copy, the same glass language as the hero. */

.hh-why__showcase {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-card);
  min-height: 380px;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: var(--sky-3);
}

.hh-why__shots { position: absolute; inset: 0; z-index: 0; }

.hh-why__shot {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity .8s ease, transform 9s linear;
  transform: scale(1.04);
}
.hh-why__shot.is-on { opacity: 1; transform: scale(1); }

/* legibility layer — heavier toward the panel at the bottom */
.hh-why__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--sky-4) 26%, transparent) 0%,
      color-mix(in srgb, var(--sky-4) 12%, transparent) 34%,
      color-mix(in srgb, var(--sky-4) 62%, transparent) 100%),
    linear-gradient(100deg,
      color-mix(in srgb, var(--sky-4) 34%, transparent) 0%,
      transparent 70%);
}

/* the glass itself */
.hh-why__panel {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 14px;
  padding: 20px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .34);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
}

.hh-why__panel p {
  margin: 0;
  overflow-wrap: break-word;
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.36;
  color: #fff;
  text-shadow: 0 1px 12px rgba(12, 52, 70, .35);
}

.hh-why__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (prefers-reduced-motion: reduce){
  .hh-why__shot { transition: opacity .25s ease; transform: none; }
  .hh-why__shot.is-on { transform: none; }
}

.hh-why__chips span {
  overflow-wrap: break-word;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 9px;
  padding: 7px 11px;
  font-size: .76rem;
  line-height: 1.1;
  color: #fff;
}

/* ── responsive ──────────────────────────────────────────────── */

@media (max-width: 980px) {
  .hh-why__head,
  .hh-why__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .hh-why__head h2,
  .hh-why__head p {
    max-width: none;
  }

  .hh-why__head p { margin-top: 6px; }

  .hh-why__head p {
    padding-top: 0;
  }

  .hh-why__photo {
    min-height: 220px;
  }
}

@media (max-width: 620px) {
  .hh-why__list .is-on button {
    font-size: 1.12rem;
  }

  .hh-why__commit {
    padding: 18px;
  }
}

/* ================= approach ================= */
/* ── Approach ─────────────────────────────────────────────────────────────
   The only section on the page with a pale-blue ground.                    */

.hh-approach {
  background: var(--tint);
  padding: var(--pad-y) calc(var(--pad-x) - var(--frame));
  border-radius: var(--r-card);
}

/* Centred header ---------------------------------------------------------- */

.hh-approach__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  margin-bottom: clamp(30px, 4vw, 48px);
}

.hh-approach__head h2 {
  margin: 0;
  font-size: clamp(1.9rem, 3.4vw, 2.85rem);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.14;
}

.hh-approach__head p {
  margin: 0;
  max-width: 54ch;
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--body);
}

/* Media card -------------------------------------------------------------- */

.hh-approach__media {
  position: relative;
  /* a definite width keeps min-height from re-deriving the width through
     aspect-ratio, which blew the card out past the shell below ~760px      */
  width: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 16 / 8.4;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hh-approach__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* --teal is the one deep token that stays dark in BOTH themes, so the white
     caption keeps its contrast; in light mode it matches the reference scrim */
  background: linear-gradient(
    180deg,
    transparent 44%,
    color-mix(in srgb, var(--teal) 80%, transparent) 100%
  );
  pointer-events: none;
}

.hh-approach__ecg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .18;
}

.hh-approach__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 78px;
  height: 78px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  color: #fff;
  z-index: 2;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease;
}

.hh-approach__play svg {
  width: 22px;
  height: 22px;
  margin-left: 4px;
  display: block;
}

.hh-approach__play:hover {
  transform: translate(-50%, -50%) scale(1.06);
  background: rgba(255, 255, 255, .3);
}

.hh-approach__play:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.hh-approach__caption {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: clamp(20px, 3.2vw, 38px);
  font-size: clamp(1.02rem, 1.85vw, 1.35rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: #fff;
  max-width: 68ch;
}

/* Four-step process ------------------------------------------------------- */

.hh-approach__steps {
  margin: 38px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.hh-approach__step {
  border-top: 2px solid var(--line-2);
  padding-top: 14px;
}

.hh-approach__step:first-child {
  border-top-color: var(--accent);
}

.hh-approach__n {
  display: block;
  font-size: .74rem;
  letter-spacing: .14em;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.hh-approach__step h3 {
  color: var(--ink);
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: -.02em;
  margin: 10px 0 8px;
}

.hh-approach__step p {
  margin: 0;
  font-size: .9rem;
  font-weight: 400;
  color: var(--body);
  line-height: 1.5;
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 980px) {
  .hh-approach__steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 22px;
  }
}

@media (max-width: 620px) {
  .hh-approach__steps {
    grid-template-columns: 1fr;
  }

  /* height now follows the caption (min-height is the floor, not a cap) so
     the copy can never be clipped by the card's overflow:hidden            */
  .hh-approach__media {
    aspect-ratio: auto;
    min-height: 240px;
  }

  .hh-approach__play {
    width: 62px;
    height: 62px;
    top: 52px;
  }

  .hh-approach__play svg {
    width: 18px;
    height: 18px;
  }

  /* room for the play button above the caption on a short card */
  .hh-approach__caption {
    padding-top: 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hh-approach__play {
    transition: none;
  }
}

/* ================= testimonials ================= */
/* Testimonials ------------------------------------------------------------ */

.hh-testimonials {
  background: var(--panel);
  padding: var(--pad-y) 0;
}

/* Centred header */
.hh-testimonials .hh-tst__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  margin-bottom: clamp(30px, 4vw, 50px);
}

.hh-testimonials .hh-tst__title {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(1.95rem, 3.5vw, 2.95rem);
  font-weight: 500;
  line-height: 1.13;
  letter-spacing: -.02em;
  color: var(--ink);
}

.hh-testimonials .hh-tst__lede {
  margin: 0;
  max-width: 54ch;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--body);
}

/* Grid */
.hh-testimonials .hh-tst__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

/* Quote cards (1 and 3) */
.hh-testimonials .hh-tst__card {
  min-height: 470px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hh-testimonials .hh-tst__card-title {
  margin: 0;
  font-size: 1.32rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--title);
}

.hh-testimonials .hh-tst__quote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--blue-body);
}

/* Honest unfilled-slot tag */
.hh-testimonials .hh-tst__slot {
  align-self: flex-start;
  max-width: 100%;
  font-size: .66rem;
  letter-spacing: .13em;
  line-height: 1.4;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  background: var(--tint-2);
  border-radius: 999px;
  padding: 5px 11px;
}

/* Attribution row */
.hh-testimonials .hh-tst__by {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.hh-testimonials .hh-tst__avatar {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--r-sm);
}

.hh-testimonials .hh-tst__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow-wrap: break-word;
}

.hh-testimonials .hh-tst__name {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--title);
}

.hh-testimonials .hh-tst__role {
  font-size: .8rem;
  line-height: 1.35;
  color: var(--muted);
}

/* Social squares */
.hh-testimonials .hh-tst__socials {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hh-testimonials .hh-tst__soc {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--accent);
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}

.hh-testimonials .hh-tst__soc:hover {
  border-color: var(--line-2);
  color: var(--accent-deep);
}

.hh-testimonials .hh-tst__soc:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.hh-testimonials .hh-tst__soc svg {
  width: 12px;
  height: 12px;
  display: block;
}

/* Feature card (2) — full-bleed portrait */
.hh-testimonials .hh-tst__feature {
  min-height: 470px;
  padding: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: linear-gradient(180deg, var(--photo-1) 0%, var(--photo-2) 46%, var(--photo-3) 68%, var(--sky-3) 100%);
}

.hh-testimonials .hh-tst__mark {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  line-height: 1;
  pointer-events: none;
  letter-spacing: -.02em;
  color: var(--photo-label);
  opacity: .8;
}

.hh-testimonials .hh-tst__slot--over {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  max-width: calc(100% - 40px);
  width: fit-content;
  z-index: 2;
  white-space: normal;
  overflow-wrap: anywhere;
  align-self: auto;
  color: #fff;
  background: var(--teal);
  border: 1px solid rgba(255, 255, 255, .35);
}

.hh-testimonials .hh-tst__overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--sky-4) 55%, transparent));
}

.hh-testimonials .hh-tst__overlay .hh-tst__name {
  color: #fff;
}

.hh-testimonials .hh-tst__overlay .hh-tst__role {
  color: rgba(255, 255, 255, .85);
}

.hh-testimonials .hh-tst__overlay .hh-tst__soc {
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}

.hh-testimonials .hh-tst__overlay .hh-tst__soc:hover {
  border-color: #fff;
  color: #fff;
}

.hh-testimonials .hh-tst__overlay .hh-tst__soc:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Responsive */
@media (max-width: 980px) {
  .hh-testimonials .hh-tst__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hh-testimonials .hh-tst__feature {
    min-height: 380px;
  }
}

@media (max-width: 620px) {
  .hh-testimonials .hh-tst__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ================= blog ================= */
/* Blog / Insights ------------------------------------------------------- */

.hh-blog {
  background: var(--panel);
  padding: var(--pad-y) 0;
}

/* Head ------------------------------------------------------------------ */

.hh-blog__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .85fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  margin-bottom: clamp(30px, 4vw, 48px);
}

.hh-blog__title {
  margin: 16px 0 0;
  max-width: 17ch;
  font-size: clamp(1.9rem, 3.3vw, 2.75rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--ink);
}

.hh-blog__lede {
  margin: 0;
  max-width: 46ch;
  padding-top: .6rem;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--body);
}

/* Posts ----------------------------------------------------------------- */

.hh-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.hh-blog__post {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hh-blog__post .ph {
  border-radius: var(--r-md);
  aspect-ratio: 1 / .94;
  margin-bottom: 20px;
}

.hh-blog__post-title {
  margin: 0 0 12px;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -.02em;
  overflow-wrap: break-word;
  color: var(--title);
}

.hh-blog__excerpt {
  margin: 0 0 22px;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--body);
}

.hh-blog__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* the raised pill (post 1) is 44px tall and the flat control 32px — pinning a
     shared row height keeps every post's date on the same baseline */
  min-height: 44px;
  margin-top: auto;
}

.hh-blog__date {
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--body);
}

/* Flat "Read More" control (posts 2 and 3) ------------------------------ */

.hh-blog__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .92rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  color: var(--accent);
}

.hh-blog__more-dot {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--accent);
  transition: background-color .22s ease, border-color .22s ease, color .22s ease;
}

.hh-blog__more-dot svg {
  display: block;
  width: 15px;
  height: 15px;
}

.hh-blog__more:hover .hh-blog__more-dot,
.hh-blog__more:focus-visible .hh-blog__more-dot {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.hh-blog__more:hover {
  color: var(--accent-deep);
}

.hh-blog__more:focus-visible {
  border-radius: 999px;
  outline-offset: 4px;
}

/* Responsive ------------------------------------------------------------ */

@media (max-width: 980px) {
  .hh-blog__head {
    grid-template-columns: minmax(0, 1fr);
  }

  .hh-blog__lede {
    padding-top: 0;
  }

  .hh-blog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

/* ================= footer ================= */
/* ============================================================
   Footer — solid teal band inset in the white shell
   ============================================================ */

.hh-footer{
  position: relative;
  z-index: 0;
  border-radius: 10px;
  color: #fff;
  margin: clamp(30px,4vw,56px) 0 0;
  padding: var(--pad-y) calc(var(--pad-x) - var(--frame));
  background: var(--teal);
}

/* ---------- top ---------- */

.hh-footer__top{
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1.1fr);
  gap: clamp(30px,5vw,72px);
}

.hh-footer__title{
  margin: 0;
  max-width: 11ch;
  color: #fff;
  font-size: clamp(2rem,3.6vw,2.95rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.hh-footer__blurb{
  margin: 18px 0 26px;
  max-width: 42ch;
  color: rgba(255,255,255,.8);
  font-size: .97rem;
  line-height: 1.6;
}

/* ---------- subscribe form ---------- */

.hh-footer__sub{
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 500px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px;
  padding: 6px 6px 6px 22px;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.hh-footer__sub:focus-within{
  border-color: rgba(255,255,255,.85);
  box-shadow: 0 0 0 3px rgba(255,255,255,.2);
}

.hh-footer__vh{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}

.hh-footer__input{
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  color: #fff;
  font: inherit;
  font-size: 1rem;
  padding: 12px 0;
}

.hh-footer__input::placeholder{
  color: rgba(255,255,255,.7);
  opacity: 1;
}

.hh-footer__input:focus,
.hh-footer__input:focus-visible{ outline: none; }

.hh-footer__submit{
  flex: none;
  background: var(--cream);
  color: var(--teal);
  border: 0;
  border-radius: 999px;
  padding: 14px 30px;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease;
}

.hh-footer__submit:hover{ background: #fff; }

.hh-footer__submit:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.hh-footer__note{
  margin: 12px 0 0;
  min-height: 1.3em;
  color: rgba(255,255,255,.8);
  font-size: .85rem;
  line-height: 1.3;
}

/* ---------- link columns ---------- */

.hh-footer__cols{
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 26px;
}

.hh-footer__col h4{
  margin: 0 0 18px;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -.01em;
}

.hh-footer__col ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.hh-footer__col a{
  color: rgba(255,255,255,.85);
  font-size: .96rem;
  line-height: 1.35;
  text-decoration: none;
  transition: color .16s ease;
}

.hh-footer__col a:hover{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hh-footer__col a:focus-visible{
  outline: 2px solid rgba(255,255,255,.75);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- bottom bar ---------- */

.hh-footer__bottom{
  margin-top: clamp(34px,5vw,62px);
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.24);
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.hh-footer__brand{
  display: flex;
  align-items: center;
  gap: 12px;
}

.hh-footer__mark{
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
}

/* brand mark — the supplied logo, seated on a white disc so it holds up
   on the hero photograph and the footer's teal. One copy of the artwork
   serves both lockups. */
/* the crop is centred on the heart's optical centre, not its bounding box:
   a heart carries its mass in the upper lobes, so box-centring reads high.
   The centroid sits 9.9% of the height above the box centre; 70% of that
   correction balances the white space above and below inside the disc. */
.hh-mark-img{
  width: 76%;
  height: 76%;
  background: url(../assets/logo-heart.png) center / contain no-repeat;
}

.hh-footer__brand-name{
  color: #fff;
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.hh-footer__social{
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hh-footer__social a{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 12px;
  color: #fff;
  transition: background .18s ease;
}

.hh-footer__social a:hover{ background: rgba(255,255,255,.14); }

.hh-footer__social a:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.hh-footer__social svg{
  width: 17px;
  height: 17px;
  display: block;
  fill: currentColor;
}

.hh-footer__legal{
  text-align: right;
  color: rgba(255,255,255,.9);
  font-size: .89rem;
  line-height: 1.5;
}

.hh-footer__legal p{ margin: 0; }

/* ---------- responsive ---------- */

@media (max-width: 980px){
  .hh-footer__top{ grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 620px){
  .hh-footer__cols{
    grid-template-columns: minmax(0,1fr);
    gap: 30px;
  }

  /* Below ~396px the field and the button can no longer share a line without
     crushing the "Enter Your Email" placeholder, so let the pill wrap: the
     input holds a 17ch floor and the button drops to its own full-width row.
     The lopsided grow factor keeps the button at its natural width whenever
     the two DO share a line, so the pill is untouched from ~396px up. 30px is
     the radius a 999px pill already resolves to at this height. */
  .hh-footer__sub{
    flex-wrap: wrap;
    border-radius: 30px;
    padding: 6px;
  }

  /* Even padding all round so the full-width button is centred once it wraps;
     the field carries its own inset instead, keeping the same text position. */
  .hh-footer__input{
    flex: 999 1 17ch;
    padding-left: 12px;
  }

  .hh-footer__submit{ flex: 1 1 auto; }

  .hh-footer__bottom{
    align-items: flex-start;
    gap: 20px;
  }

  .hh-footer__social{ margin: 0; }

  .hh-footer__legal{ text-align: left; }
}