/* For:Human — Home. Layout and measurements follow the reference home page section by section
   (measured at 1440px: 40px gutter, 1360px content, 48/57.6 section titles, 96/96 display);
   type is Inter / JetBrains Mono standing in for the reference's licensed faces.
   Motion lives in src/forhuman-home.ts. */
.fhh {
  --fhh-ink: #0a0a0a;
  --fhh-ink-2: #0a0a0a;
  --fhh-muted: #75758a;
  --fhh-cream: #ffffff; /* cards and bands sit white on the warm page */
  --fhh-line: #d9d9dd;
  --fhh-gutter: clamp(16px, 2.8vw, 40px);
  display: block;
  background: var(--fh-page);
  color: var(--fhh-ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: clip;
}
.fhh *,
.fhh *::before,
.fhh *::after { box-sizing: border-box; }
.fhh p,
.fhh h1,
.fhh h2,
.fhh h3,
.fhh h4,
.fhh figure,
.fhh blockquote { margin: 0; color: inherit; }
.fhh ul { margin: 0; padding: 0; list-style: none; }
.fhh a { color: inherit; text-decoration: none; }
.fhh img { display: block; max-width: 100%; }

/* ---------------------------------------------------------------- type scale (measured) */
.fhh-display { font-family: var(--font-display); font-size: clamp(52px, 6.67vw, 96px); line-height: 1; font-weight: 400; letter-spacing: -0.02em; }
.fhh-h3 { font-size: clamp(32px, 3.33vw, 48px); line-height: 1.2; font-weight: 400; letter-spacing: -0.01em; }
.fhh-h4 { font-size: clamp(26px, 2.22vw, 32px); line-height: 1.2; font-weight: 400; letter-spacing: -0.01em; }
.fhh-mono { font-family: var(--font-mono); font-size: 14px; line-height: 1.4; letter-spacing: 0.02em; text-transform: uppercase; }
.fhh-center { text-align: center; }

/* ---------------------------------------------------------------- buttons */
.fhh-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: 9999px;
  background: var(--fhh-ink-2);
  color: #ffffff;
  font-size: 16px;
  line-height: 1.5;
  white-space: nowrap;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}
.fhh-pill:hover { opacity: 0.86; }
.fhh-pill.is-white { background: #ffffff; color: var(--fhh-ink-2); }
.fhh-pill.is-outline { border-color: var(--fhh-ink-2); background: transparent; color: var(--fhh-ink-2); }
.fhh-pill.is-outline:hover { background: var(--fhh-ink-2); color: #ffffff; opacity: 1; }
.fhh a:focus-visible,
.fhh button:focus-visible { outline: 2px solid var(--fhh-ink); outline-offset: 3px; }

/* ---------------------------------------------------------------- 1. hero: featured showcase
   polar.ltda's opening, For:Human's way: featured cases fill a full-height rounded frame aligned
   with the header; a numbered rail with progress bars on top (lime fill), the case name large at
   the bottom left with white tag pills, and the home card's stepped notch cut into the bottom
   right corner holding "Ver case". Below: the brand line and the client marquee.
   Behaviour: src/forhuman-home.ts (showcase). */
.fhh-hero {
  --hero-x: calc(var(--fh-bar-inset, 16px) + clamp(16px, 1.8vw, 28px));
  padding: calc(var(--fh-topbar-height, 108px) + 8px) var(--hero-x) clamp(64px, 7vw, 104px);
}
.fhh-show { --show-dur: 7s; outline: none; }
.fhh-show-frame {
  position: relative;
  overflow: hidden;
  height: clamp(480px, calc(100svh - var(--fh-topbar-height, 108px) - 96px), 940px);
  border-radius: 12px;
  background: var(--fh-night);
  color: #ffffff;
  isolation: isolate;
}
.fhh-show-slides { position: absolute; inset: 0; container-type: size; }
.fhh-show-slide { position: absolute; inset: 0; visibility: hidden; }
.fhh-show-slide.is-active,
.fhh-show-slide.is-leaving { visibility: visible; }
.fhh-show-slide.is-active { z-index: 2; animation: fhh-show-wipe 1.1s cubic-bezier(0.76, 0, 0.24, 1) both; }
.fhh-show-slide.is-leaving { z-index: 1; }
.fhh-show-slide.is-leaving .fhh-show-image,
.fhh-show-slide.is-leaving .fhh-show-video { transform: scale(1.06); transition: transform 1.1s cubic-bezier(0.76, 0, 0.24, 1); }
.fhh-show.is-first .fhh-show-slide.is-active { animation: none; }
@keyframes fhh-show-wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
.fhh-show-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fhh-show-slide.is-active .fhh-show-image { animation: fhh-show-drift calc(var(--show-dur) + 1.5s) linear both; }
@keyframes fhh-show-drift { from { transform: scale(1.08); } to { transform: scale(1); } }
/* 16:9 Vimeo background player covering the frame; fades in once it plays */
.fhh-show-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100cqw, 100cqh * 16 / 9);
  height: max(100cqh, 100cqw * 9 / 16);
  border: 0;
  opacity: 0;
  transform: translate(-50%, -50%);
  max-width: none; /* the base reset caps iframes at 100%: the cover math needs it wider on tall frames */
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.fhh-show-video.is-playing { opacity: 1; }
/* legibility: a soft shade at the top (rail) and a deeper one at the bottom (name) */
.fhh-show-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.28) 62%, rgba(0, 0, 0, 0.66));
  pointer-events: none;
}

.fhh-show-caption {
  position: absolute;
  left: clamp(20px, 2.8vw, 40px);
  right: max(320px, 30%);
  bottom: clamp(24px, 3vw, 40px);
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 28px rgba(0, 0, 0, 0.35);
}
.fhh-show-caption > * { opacity: 0; transform: translateY(24px); }
.fhh-show-slide.is-active .fhh-show-caption > * { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.fhh-show-slide.is-active .fhh-show-caption > :nth-child(1) { transition-delay: 0.45s; }
.fhh-show-slide.is-active .fhh-show-caption > :nth-child(2) { transition-delay: 0.53s; }
.fhh-show-slide.is-active .fhh-show-caption > :nth-child(3) { transition-delay: 0.64s; }
/* client, with the slide count in front */
.fhh .fhh-show-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: rgba(255, 255, 255, 0.86); font-size: 14px; line-height: 1.2; }
.fhh-show-count { padding: 4px 8px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-shadow: none; }
.fhh .fhh-show-name {
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.2vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.fhh-show-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px !important; text-shadow: none; }
.fhh-show-tags li {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 13px;
  border-radius: 999px;
  background: #ffffff;
  color: #0a0a0a;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

/* top bar: dark glass (the announcement strip's), so it reads on any image — label, a numbered
   rail with progress (polar.ltda) and the pause toggle */
/* rail under the frame, on the page: always legible, whatever the video's colours, and no
   backdrop blur to recompute while the video and the wipe run (polar.ltda's numbered rail) */
.fhh-show-head {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 40px);
  padding: 20px 0 0;
  color: var(--fh-ink);
}
.fhh .fhh-show-title { flex: none; color: var(--fhh-muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.fhh-show-rail {
  display: grid;
  flex: 1;
  min-width: 0;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: clamp(12px, 1.6vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fhh-show-step {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  width: 100%;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--fh-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.fhh-show-step-label { display: flex; align-items: baseline; gap: 8px; min-width: 0; opacity: 0.45; transition: opacity 0.3s ease; }
.fhh-show-step:hover .fhh-show-step-label,
.fhh-show-step.is-active .fhh-show-step-label { opacity: 1; }
.fhh-show-bar { position: relative; overflow: hidden; height: 2px; border-radius: 2px; background: var(--color-silver-rule, #d9d9dd); }
.fhh-show-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--fh-blue); transform: scaleX(0); transform-origin: left; }
.fhh-show-step.is-done .fhh-show-fill { transform: scaleX(1); background: var(--fh-ink); }
.fhh-show-step.is-active .fhh-show-fill { animation: fhh-show-progress var(--show-dur) linear both; }
.fhh-show.is-paused .fhh-show-step.is-active .fhh-show-fill { animation-play-state: paused; }
.fhh-show.is-static .fhh-show-step.is-active .fhh-show-fill { animation: none; transform: scaleX(1); }
@keyframes fhh-show-progress { to { transform: scaleX(1); } }
.fhh-show-step-num { flex: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; line-height: 16px; }
.fhh-show-step-name { overflow: hidden; font-size: 13px; line-height: 16px; white-space: nowrap; text-overflow: ellipsis; }
.fhh-show-step:focus-visible,
.fhh-show-toggle:focus-visible { outline: 2px solid var(--fh-ink); outline-offset: 3px; border-radius: 6px; }

.fhh-show-toggle {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--fh-mist);
  color: var(--fh-ink);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.fhh-show-toggle:hover { background: #e3e7ee; }
.fhh-show-toggle svg { width: 14px; height: 14px; }
.fhh-show-toggle .is-play,
.fhh-show.is-held .fhh-show-toggle .is-pause { display: none; }
.fhh-show.is-held .fhh-show-toggle .is-play { display: block; }

/* the notch: page-white tab cut into the frame's bottom-right corner, holding the case link */
.fhh-show-tab {
  position: absolute;
  right: -1px; /* covers the frame's anti-aliased corner */
  bottom: -1px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  width: clamp(220px, 20vw, 300px);
  height: 92px;
  padding: 12px clamp(18px, 2vw, 28px) 0 88px;
  color: var(--fhh-ink-2) !important;
}
.fhh-show-tab-shape { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--fh-page); }
.fhh-show-more { position: relative; font-size: 18px; line-height: 1.4; white-space: nowrap; }
.fhh-show-arrow { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--fh-lime); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.fhh-show-arrow svg { width: 18px; height: 18px; }
.fhh-show-tab:hover .fhh-show-arrow { transform: translateX(4px); }

/* brand line under the showcase: headline (two tones) left, pitch + CTA right */
.fhh-hero-meta {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 32px 64px;
  align-items: end;
  margin-top: clamp(48px, 5.5vw, 88px);
}
.fhh-hero .fhh-display { max-width: 16ch; font-size: clamp(40px, 4.6vw, 76px); line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.fhh-display-soft { color: rgba(24, 30, 37, 0.42); }
.fhh-display .fh-line { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.fhh-display .fh-line > span { display: block; }
.fhh-hero-pitch { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-bottom: 6px; }
.fhh .fhh-hero-text { max-width: 34ch; color: #3b3b45; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.35; letter-spacing: -0.01em; }
.fhh-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border-radius: 32px;
  background: var(--fh-lime);
  color: #0a0a0a !important;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.03em;
  transition: background-color 0.25s ease;
}
.fhh-hero-cta:hover { background: var(--fh-lime-hover); }
.fhh-hero-cta svg { width: 16px; height: 16px; }
.fhh-hero-trust { display: flex; align-items: center; gap: 32px; margin-top: clamp(40px, 4.4vw, 64px); padding-top: 24px; border-top: 1px solid var(--fhh-line); }
.fhh-hero-caption { flex: none; color: var(--fhh-muted); font-size: 12px; letter-spacing: 0.08em; }
.fhh-hero-logos {
  flex: 1;
  min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #0a0a0a 8%, #0a0a0a 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #0a0a0a 8%, #0a0a0a 92%, transparent);
}
.fhh-hero-logos .fhh-marquee-track { gap: 56px; padding-right: 56px; animation-duration: 50s; }
.fhh-hero-logos .fhh-logo { width: calc(var(--logo-w, 140px) * 0.58); height: 32px; }

/* ---------------------------------------------------------------- 3. logos */
.fhh-marquee { display: flex; overflow: hidden; }
.fhh-marquee-track { display: flex; flex: none; align-items: center; gap: 64px; padding-right: 64px; animation: fhh-marquee 60s linear infinite; }
.fhh-marquee:hover .fhh-marquee-track { animation-play-state: paused; }
@keyframes fhh-marquee { to { transform: translateX(-100%); } }
.fhh-marquee-track li { flex: none; }
.fhh-logo {
  display: block;
  width: var(--logo-w, 140px);
  height: 52px;
  background: var(--fhh-ink);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}

/* ---------------------------------------------------------------- 4. split */
.fhh-split { display: grid; grid-template-columns: 1fr 1fr; height: 520px; }
.fhh-split-half { position: relative; overflow: hidden; }
.fhh-split-half img { width: 100%; height: 100%; object-fit: cover; }
/* the texture is dark enough to carry white type; only a faint lift at the bottom */
.fhh-split-half.is-text::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.18), transparent 45%); }
.fhh-split-copy { position: absolute; left: var(--fhh-gutter); bottom: 56px; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 554px; color: #ffffff; }
.fhh-split-title {
  max-width: 15ch;
  font-family: var(--font-display);
  font-size: clamp(36px, 3.75vw, 60px);
  line-height: 1.04;
  font-weight: 400;
  letter-spacing: -0.035em;
  text-wrap: balance;
  text-shadow: 0 1px 28px rgba(0, 0, 0, 0.22);
}
.fhh-split-text { font-size: 18px; line-height: 1.4; }

/* ---------------------------------------------------------------- 5. solutions: stacking cards */
.fhh-solutions { padding: 144px var(--fhh-gutter) 40px; background: var(--fhh-cream); }
.fhh-stack { padding: 0 var(--fhh-gutter) 144px; background: var(--fhh-cream); }
.fhh-stack-card {
  position: sticky;
  top: calc(var(--fh-topbar-height, 108px) + 24px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: stretch;
  gap: 48px;
  min-height: 0;
  margin-bottom: 32px;
  padding: 56px 40px 56px 72px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 20px;
  transform-origin: 50% 0;
  will-change: transform;
}
.fhh-stack-card:nth-child(2) { top: calc(var(--fh-topbar-height, 108px) + 54px); }
.fhh-stack-card:nth-child(3) { top: calc(var(--fh-topbar-height, 108px) + 84px); margin-bottom: 0; }
.fhh-stack-card { --fhh-dim: 0; }
.fhh-stack-card::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: #0a0a0a; opacity: var(--fhh-dim); pointer-events: none; }
/* Solution cards (shopify.com feature cards): night surface with a soft light of the offer's colour
   from the right; brand, two-tone headline, one sentence, button. The right half draws the service
   (sizes in cqw, so each scene scales with its column). */
.fhh-stack-card { background: var(--fh-night); color: #ffffff; border-color: rgba(255, 255, 255, 0.07); }
.fhh-stack-text { display: flex; flex-direction: column; align-items: flex-start; }
.fhh-stack-card .fhh-stack-brand { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 auto; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
.fhh-stack-card .fhh-stack-title { max-width: 520px; margin: 0 0 20px; font-size: clamp(36px, 3.5vw, 54px); font-weight: 400; line-height: 1.04; letter-spacing: -0.04em; text-wrap: balance; }
.fhh-stack-soft { display: block; color: rgba(255, 255, 255, 0.42); }
.fhh-stack-card .fhh-stack-lede { max-width: 420px; margin: 0 0 32px; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, 0.64); }
.fhh-stack-button { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 99px; background: #ffffff; color: #0a0a0a !important; font-size: 15px; font-weight: 500; text-decoration: none; transition: background 0.25s ease, gap 0.25s ease; }
.fhh-stack-button:hover { gap: 16px; background: var(--fh-lime); }

.fhh-stack-media { position: relative; align-self: stretch; min-height: 0; aspect-ratio: 6 / 5; container-type: inline-size; }
/* the product window bleeds off the card's right and bottom edges (angellist.com product shots) */
.fhh-stack-card .fhh-stack-media { align-self: end; margin: 0 -40px -56px 0; }
.fhh-viz { position: absolute; inset: 0; font-family: var(--font-ui, inherit); }
.fhh-viz > * { position: absolute; }

/* ---- product window */
.fhh-ui { left: 7%; top: 9%; right: 0; bottom: 0; display: flex; overflow: hidden; border-radius: 2.4cqw; background: #ffffff; color: #0a0a0a; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8); }
.fhh-stack-card .fhh-ui { border-radius: 2.4cqw 0 0 0; }
.fhh-ui-side { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2.6cqw; width: 9cqw; padding-top: 3.6cqw; border-right: 1px solid #ececea; background: #f7f8f6; }
.fhh-ui-side b { width: 3.4cqw; height: 3.4cqw; margin-bottom: 1.6cqw; border-radius: 0.9cqw; background: #0a0a0a; }
.fhh-ui-side i { width: 2.4cqw; height: 2.4cqw; border: 1.5px solid #c9cbc6; border-radius: 0.6cqw; }
.fhh-ui-side i:nth-of-type(2) { border-color: #0a0a0a; background: #0a0a0a; }
.fhh-ui-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 3.6cqw 0 0 5cqw; }
.fhh-ui-status { align-self: flex-start; display: inline-flex; align-items: center; gap: 1cqw; padding: 0.9cqw 1.8cqw; border: 1px solid #e6e7e3; border-radius: 99px; font-size: 1.9cqw; }
.fhh-ui-status i { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: #2fbf5b; }
.fhh-ui-kicker { margin-top: 5cqw; color: #8a8b86; font-size: 1.9cqw; }
.fhh-ui-title { margin-top: 0.8cqw; font-size: 4.6cqw; font-weight: 400; line-height: 1.1; letter-spacing: -0.035em; white-space: nowrap; }
.fhh-ui-tabs { display: flex; gap: 3.4cqw; margin-top: 3.4cqw; border-bottom: 1px solid #ececea; font-size: 2cqw; color: #6b6c68; white-space: nowrap; }
.fhh-ui-tabs span { padding-bottom: 1.6cqw; }
.fhh-ui-tabs .is-on { color: #0a0a0a; box-shadow: inset 0 -2px 0 #0a0a0a; }
.fhh-ui-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 3.6cqw 5cqw 0 0; border: 1px solid #ececea; border-radius: 1.4cqw; background: #fafaf9; }
.fhh-ui-stat { display: grid; gap: 1cqw; padding: 2.6cqw 3cqw; }
.fhh-ui-stat + .fhh-ui-stat { border-left: 1px solid #ececea; }
.fhh-ui-stat small { color: #8a8b86; font-family: var(--font-mono, monospace); font-size: 1.6cqw; letter-spacing: 0.08em; text-transform: uppercase; }
.fhh-ui-stat strong { font-size: 5.2cqw; font-weight: 400; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fhh-ui-spark { width: calc(100% - 5cqw); height: 13cqw; margin-top: 3cqw; overflow: visible; }
.fhh-ui-spark-line { fill: none; stroke: #0082ff; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.fhh-ui-spark-area { fill: rgba(0, 130, 255, 0.07); }
.fhh-ui-bars { display: flex; align-items: flex-end; gap: 0.9cqw; height: 14cqw; margin: 3.4cqw 5cqw 0 0; }
.fhh-ui-bar { flex: 1; border-radius: 0.4cqw 0.4cqw 0 0; background: #dfe5ec; transform-origin: 50% 100%; }
.fhh-ui-bar:nth-last-child(-n+4) { background: #0082ff; }
.fhh-ui-flow { position: relative; margin: 6cqw 5cqw 0 0; }
.fhh-ui-track { position: absolute; left: 10%; right: 10%; top: 1.3cqw; height: 2px; background: #e6e7e3; }
.fhh-ui-track-fill { display: block; width: 25%; height: 100%; background: #0a0a0a; }
.fhh-ui-steps { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.fhh-ui-step { display: grid; justify-items: center; gap: 1.6cqw; color: #8a8b86; font-size: 1.8cqw; white-space: nowrap; }
.fhh-ui-step i { width: 2.8cqw; height: 2.8cqw; border: 2px solid #d4d5d0; border-radius: 50%; background: #ffffff; transition: background-color 0.3s ease, border-color 0.3s ease; }
.fhh-ui-step.is-on { color: #0a0a0a; }
.fhh-ui-step.is-on i { border-color: #0a0a0a; background: #0a0a0a; box-shadow: inset 0 0 0 0.6cqw #ffffff; }

/* ---- dark panel over the window */
.fhh-ui-pop { z-index: 2; left: 50%; top: 50%; width: 44%; padding: 2.4cqw; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 2cqw; background: #101114; color: #ffffff; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7); }
.fhh-ui-pop-title { display: block; margin-bottom: 1.8cqw; font-size: 2.3cqw; font-weight: 400; letter-spacing: -0.01em; }
.fhh-ui-rows { display: grid; gap: 0.8cqw; margin: 0; padding: 0; list-style: none; }
.fhh-ui-row { display: flex; align-items: center; gap: 1.6cqw; padding: 1.3cqw 1.6cqw; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1.2cqw; }
.fhh-ui-row:nth-child(n+4) { display: none; }
.fhh-ui-row > span:last-child { display: grid; gap: 0.4cqw; min-width: 0; }
.fhh-ui-row strong { font-size: 2.1cqw; font-weight: 400; white-space: nowrap; }
.fhh-ui-row small { color: rgba(255, 255, 255, 0.5); font-size: 1.7cqw; white-space: nowrap; }
.fhh-ui-tick { display: grid; place-items: center; flex: none; width: 3.2cqw; height: 3.2cqw; border-radius: 50%; background: #ffffff; color: #0a0a0a; }
.fhh-ui-tick svg { width: 58%; height: 58%; }
.fhh-viz.is-connect .fhh-ui-pop { top: 58%; }

/* ---------------------------------------------------------------- 6. services band (cohere.com/rerank, measured)
   Purple band, 80/40 padding; 48px centred title over an 18px/655px subtitle; a translucent pill
   tab bar (10/12 padding, 16 gap; 12/24 tabs, active white); per tab a 1360px row with copy
   bottom-left (550px, 32px title) and a 616px square image with 22px corners. */
.fhh-svc,
.fhh-sol2 { --fhh-purple: var(--fh-night); background: var(--fhh-purple); color: #ffffff; }
.fhh-svc { padding: 120px var(--fhh-gutter) 80px; }
.fhh-svc-head { max-width: 1128px; margin: 0 auto; text-align: center; }
.fhh .fhh-svc-text { color: inherit; font-size: 18px; line-height: 1.4; }
.fhh-svc-head .fhh-svc-text { max-width: 655px; margin: 16px auto 0; }
.fhh-svc-tabs {
  display: flex;
  justify-content: center;
  gap: 16px;
  width: max-content;
  max-width: 100%;
  margin: 80px auto 64px;
  padding: 10px 12px;
  border-radius: 9999px;
  background: rgba(242, 242, 242, 0.1);
  overflow-x: auto;
  scrollbar-width: none;
}
.fhh-svc-tab {
  flex: none;
  padding: 12px 24px;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-size: 18px;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.fhh-svc-tab:hover { background: rgba(255, 255, 255, 0.08); }
.fhh-svc-tab.is-active { background: #ffffff; color: #0a0a0a; }
.fhh-svc-tab:focus-visible { outline-color: #ffffff !important; }
/* edge to edge inside the 40px gutters like the reference: the image scales with the viewport
   (616px at 1440) and the copy sits on its vertical centre */
.fhh-svc-panel { display: grid; grid-template-columns: minmax(0, 550px) minmax(0, 42.8vw); justify-content: space-between; align-items: center; }
.fhh-svc-panel[hidden] { display: none; }
.fhh-svc-panel.is-active { animation: fhh-svc-in 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes fhh-svc-in { from { opacity: 0; transform: translateY(12px); } }
.fhh-svc-copy .fhh-svc-text { margin-top: 16px; }
.fhh-svc-media { aspect-ratio: 1; overflow: hidden; border-radius: 22px; background: rgba(255, 255, 255, 0.06); }
.fhh-svc-media img { width: 100%; height: 100%; object-fit: cover; }

/* two solution cards on the same band */
.fhh-sol2 { padding: 80px var(--fhh-gutter) 120px; }
.fhh-sol2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 587px)); justify-content: center; gap: 24px; margin-top: 64px; }
/* the notched case card in translucent white, for dark and coloured bands (site-wide pattern) */
.fhh-case.is-glass { color: #ffffff; }
.fhh-case.is-glass .fhh-case-top { padding: 24px 24px 0; background: rgba(255, 255, 255, 0.08); transition: background-color 0.3s ease; }
.fhh-case.is-glass .fhh-case-notch { fill: rgba(255, 255, 255, 0.08); transition: fill 0.3s ease; }
.fhh-case.is-glass:hover .fhh-case-top { background: rgba(255, 255, 255, 0.13); }
.fhh-case.is-glass:hover .fhh-case-notch { fill: rgba(255, 255, 255, 0.13); }
.fhh-case.is-glass .fhh-case-media { aspect-ratio: 541 / 360; }
.fhh-case.is-glass .fhh-case-title { padding-bottom: 0; }
.fhh-case.is-glass .fhh-case-foot { padding: 0 24px 8px; }
.fhh .fhh-case-text { display: block; margin-top: 12px; padding-bottom: 28px; font-size: 18px; line-height: 1.4; opacity: 0.88; }

/* ---------------------------------------------------------------- 6c. testimonial slider
   White card with a hairline ink border whose right edge leans, keyed into an image cut on the
   same angle (14px apart); 22px corners; 20px quote, 18px attribution; arrows top-right. */
.fhh-tst { padding: 120px var(--fhh-gutter); }
.fhh-tst-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 48px; }
.fhh-tst-head .fhh-h4 { max-width: 550px; }
.fhh-tst-nav { display: flex; gap: 16px; }
.fhh-tst-nav button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--fhh-ink-2); cursor: pointer; transition: opacity 0.2s ease; }
.fhh-tst-nav button:hover { opacity: 0.6; }
.fhh-tst-nav svg { width: 24px; height: 24px; }
.fhh-tst-prev svg { transform: scaleX(-1); }
.fhh-tst-slide {
  --top: 46%;
  --bottom: 54%;
  --gap: 14px;
  position: relative;
  height: clamp(420px, 36vw, 514px);
  margin: 0;
}
.fhh-tst-slide[hidden] { display: none; }
.fhh-tst-slide.is-active { animation: fhh-svc-in 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.fhh-tst-card {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: var(--fhh-ink-2);
  clip-path: polygon(0 0, var(--top) 0, var(--bottom) 100%, 0 100%);
}
.fhh-tst-card-inner {
  position: absolute;
  inset: 1px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* keep the copy clear of the leaning edge (the card is full width, clipped at --top) */
  padding: 24px calc(100% - var(--top) + 32px) 24px 24px;
  border-radius: 21px;
  background: #ffffff;
  clip-path: polygon(0 0, calc(var(--top) - 1.5px) 0, calc(var(--bottom) - 1.5px) 100%, 0 100%);
}
.fhh-tst-logo {
  display: block;
  width: 64px;
  height: 64px;
  margin-bottom: 40px;
  background: var(--fhh-ink-2);
  -webkit-mask: url('/assets/forhuman-symbol.png') center / contain no-repeat;
  mask: url('/assets/forhuman-symbol.png') center / contain no-repeat;
}
.fhh .fhh-tst-quote { margin: 0; color: var(--fhh-ink-2); font-size: 20px; line-height: 1.3; }
.fhh-tst-by { margin-top: 56px; color: var(--fhh-ink-2); font-size: 18px; line-height: 1.4; }
.fhh-tst-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 22px;
  clip-path: polygon(calc(var(--top) + var(--gap)) 0, 100% 0, 100% 100%, calc(var(--bottom) + var(--gap)) 100%);
}
.fhh-tst-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- 7. case cards */
.fhh-cases { padding: 0 var(--fhh-gutter) 144px; }
.fhh-cases-title { max-width: 555px; margin-bottom: 40px !important; }
.fhh-case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.fhh-case { display: flex; flex-direction: column; border-radius: 22px; }
.fhh-case-top { display: flex; flex-direction: column; flex: 1; padding: 16px 16px 0; border-radius: 22px 22px 0 0; background: var(--fhh-cream); }
.fhh-case-media { overflow: hidden; border-radius: 12px; aspect-ratio: 405 / 227; }
.fhh-case-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.fhh-case:hover .fhh-case-media img { transform: scale(1.04); }
.fhh-case-label { margin-top: 24px; }
.fhh-case-title { margin-top: 20px; padding-bottom: 24px; font-size: 24px; line-height: 1.3; }
/* footer: the cream tab steps down on the right; the arrow sits in the step */
.fhh-case-foot { position: relative; display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 16px 8px; }
.fhh-case-notch { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--fhh-cream); }
.fhh-case-more { position: relative; font-size: 18px; line-height: 1.4; }
.fhh-case-arrow { position: relative; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 18px; transition: transform 0.3s ease; }
.fhh-case-arrow svg { width: 24px; height: 24px; }
.fhh-case:hover .fhh-case-arrow { transform: translateX(4px); }

/* ---------------------------------------------------------------- 9. news */
.fhh-news { padding: 0 var(--fhh-gutter) 144px; }
.fhh-news-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.fhh-news-more { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; }
.fhh-news-more svg { width: 16px; height: 16px; transition: transform 0.3s ease; }
.fhh-news-more:hover svg { transform: translateX(3px); }
.fhh-news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.fhh-news-card { display: flex; flex-direction: column; gap: 16px; }
.fhh-news-media { overflow: hidden; border-radius: 8px; aspect-ratio: 437 / 245; background: var(--fhh-cream); }
.fhh-news-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.fhh-news-card:hover .fhh-news-media img { transform: scale(1.04); }
.fhh-news-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fhh-tag { display: inline-flex; padding: 4px 12px; border: 1px solid var(--fhh-ink); border-radius: 9999px; font-size: 14px; line-height: 1.4; }
.fhh-news-title { font-size: 24px; line-height: 1.3; }

/* ---------------------------------------------------------------- 11. CTA */
/* the extra 48px at the bottom sit under the footer's rounded overlap */
.fhh-cta { position: relative; display: grid; place-items: center; min-height: 648px; padding: 80px var(--fhh-gutter) 128px; overflow: hidden; background: var(--fh-night); color: #ffffff; text-align: center; }
.fhh-cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fhh-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 24, 41, 0.62), rgba(11, 24, 41, 0.86)); }
.fhh-cta-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.fhh-cta-title { max-width: 674px; font-family: var(--font-display); font-size: clamp(40px, 4.17vw, 60px); line-height: 1; font-weight: 400; letter-spacing: -0.02em; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1199px) {
  .fhh-svc-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .fhh-svc-media { aspect-ratio: 1; }
}
@media (max-width: 991px) {
  .fhh-split { grid-template-columns: 1fr; height: auto; }
  .fhh-split-half { aspect-ratio: 4 / 3; }
  .fhh-stack-card { grid-template-columns: minmax(0, 1fr); padding: 40px 32px; }
  .fhh-stack-card .fhh-stack-media { margin: 0 -32px -40px 0; }
  .fhh-stack-card .fhh-stack-brand { margin-bottom: 40px; }
  .fhh-svc-panel { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .fhh-svc-copy { order: 2; }
  .fhh-svc-media { aspect-ratio: 4 / 3; }
  .fhh-sol2-grid { grid-template-columns: minmax(0, 1fr); }
  .fhh-case-grid,
  .fhh-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* stack the testimonial: card on top, image below, no lean */
  .fhh-tst-slide { --top: 100%; --bottom: 100%; display: flex; flex-direction: column; height: auto; }
  .fhh-tst-card { position: relative; clip-path: none; }
  .fhh-tst-card-inner { position: relative; inset: auto; margin: 1px; clip-path: none; }
  .fhh-tst-media { position: relative; clip-path: none; aspect-ratio: 16 / 10; margin-top: 14px; }
  .fhh-tst-card-inner { padding: 24px; }
}
@media (max-width: 767px) {
  /* hero on phones: a tall frame that leaves the progress bars in the first screen, swipeable;
     the caption sits above the notch, bars only (the count is in the caption) */
  .fhh-hero { padding-top: calc(var(--fh-topbar-height, 108px) + 4px); }
  .fhh-show-frame { height: clamp(460px, calc(100svh - var(--fh-topbar-height, 108px) - 72px), 660px); border-radius: 16px; touch-action: pan-y; }
  .fhh-show-caption { left: 20px; right: 20px; bottom: 92px; }
  .fhh .fhh-show-eyebrow { margin-bottom: 10px; font-size: 13px; }
  .fhh .fhh-show-name { max-width: 12ch; font-size: 34px; line-height: 1.02; }
  .fhh-show-tags { margin-top: 14px !important; }
  .fhh-show-tags li { height: 28px; padding: 0 11px; font-size: 12px; }
  .fhh-show-tab { width: 188px; height: 72px; gap: 10px; padding: 10px 14px 0 70px; }
  .fhh-show-more { font-size: 15px; }
  .fhh-show-arrow { flex: none; width: 36px; height: 36px; }
  .fhh-show-head { gap: 12px; padding-top: 12px; }
  .fhh-show-title,
  .fhh-show-step-label { display: none; }
  .fhh-show-step { padding: 12px 0; }
  .fhh-show-bar { height: 3px; }
  .fhh-hero-meta { margin-top: 40px; }
  .fhh-hero .fhh-display { font-size: 38px; }
  .fhh-hero-meta { grid-template-columns: minmax(0, 1fr); }
  .fhh-hero-trust { flex-direction: column; align-items: flex-start; gap: 16px; }
  .fhh-hero-logos { width: 100%; }
  .fhh-solutions { padding-top: 64px; }
  .fhh-svc,
  .fhh-tst { padding-top: 64px; }
  .fhh-svc-tabs { margin: 40px auto; }
  .fhh-sol2,
  .fhh-tst,
  .fhh-stack,
  .fhh-cases,
  .fhh-news { padding-bottom: 64px; }
  .fhh-case-grid,
  .fhh-news-grid { grid-template-columns: minmax(0, 1fr); }
  .fhh-stack-card { position: relative; top: auto !important; }
  /* phones: photo first, then a tighter text block */
  .fhh-stack-card { gap: 24px; padding: 28px 20px 20px; }
  .fhh-stack-card .fhh-stack-brand { margin-bottom: 28px; font-size: 18px; }
  .fhh-stack-card .fhh-stack-title { font-size: 32px; }
  .fhh-stack-card .fhh-stack-lede { margin-bottom: 24px; font-size: 16px; }
  .fhh-stack-media { aspect-ratio: 1 / 1; }
  .fhh-stack-card .fhh-stack-media { margin: 0 -20px -20px 0; aspect-ratio: 5 / 4; }
  .fhh-ui { left: 4%; }
  .fhh-stack-title,
  .fhh .fhh-hero-text,
  .fhh-split-title { text-wrap: pretty; }
}
@media (prefers-reduced-motion: reduce) {
  .fhh-marquee-track { animation: none; }
  .fhh-show-slide.is-active,
  .fhh-show-slide.is-active .fhh-show-image { animation: none; }
  .fhh-svc-panel.is-active,
  .fhh-tst-slide.is-active { animation: none; }
}

/* ---------------------------------------------------------------- refinement: sections stack as sheets (as on the solution pages)
   Each band that changes tone slides over the previous one with the same rounded top. */
main.fhh:not(.fh-about) > :is(.fhh-split, .fhh-solutions, .fhh-svc, .fhh-tst, .fhh-cases, .fhh-cta) { --sheet: clamp(24px, 2.6vw, 40px); position: relative; margin-top: calc(var(--sheet) * -1); border-radius: var(--sheet) var(--sheet) 0 0; }
main.fhh:not(.fh-about) > .fhh-split { overflow: hidden; }
main.fhh:not(.fh-about) > .fhh-svc { padding-top: calc(120px + var(--sheet)); }
main.fhh:not(.fh-about) > .fhh-cases { padding-top: calc(112px + var(--sheet)); background: var(--fh-page, #f3f4f2); }
main.fhh:not(.fh-about) > .fhh-tst + .fhh-cases { margin-top: 0; border-radius: 0; padding-top: 0; }

/* cases: two published cases read as a pair of wide cards */
.fhh-case-grid:has(> .fhh-case:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.fhh-case-grid:has(> .fhh-case:nth-child(2):last-child) .fhh-case-media { aspect-ratio: 16 / 10; }
.fhh-case-grid:has(> .fhh-case:nth-child(2):last-child) .fhh-case-title { font-size: clamp(26px, 2.2vw, 34px); letter-spacing: -0.02em; }
.fhh-case-top { transition: background-color 0.4s ease; }
.fhh-case:hover .fhh-case-top { background: color-mix(in oklab, var(--fhh-cream) 80%, #ffffff); }
.fhh-cases-title { max-width: 720px; font-size: clamp(36px, 3.6vw, 56px); line-height: 1.04; letter-spacing: -0.03em; }
@media (max-width: 767px) { .fhh-case-grid:has(> .fhh-case:nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); } }

/* closing CTA: the image scales/drifts with the scroll (forhuman-home.ts), so give it room */
.fhh-cta-bg { will-change: transform; }