/* For:Human — About page (built by scripts/build-about-page.py).
   Section structure measured on cohere.com/research at 1440px: blue hero with a dotted globe and
   the mission statement, stacked colour cards, a navy band (four pillars, a dated list, two
   featured cards), program cards and paged post cards. Shared components (stack cards,
   solution cards, notched case cards, marquee, buttons) come from forhuman-home.css and
   forhuman-solution.css; this file adds the page-only pieces. */
/* For:Human brand palette, measured on the brand's own pieces (Instagram): electric blue,
   lavender, lime, sky and paper; ink for type. No other hues on this page. */
.fh-about {
  --fh-electric: #017cff;
  --fh-lavender: #516add;
  --fh-lime: #b9ff76;
  --fh-sky: #cae3f3;
  --fh-paper: #ffffff;
  --fh-ink: #0a0a0a;
  --fh-blue: #0082ff; /* the page's main blue */
  --fhl-card: var(--fh-paper);
  background: var(--fh-page);
  color: var(--fh-ink);
}
.fh-about p { margin: 0; }
.fh-about a { color: inherit; }

/* ---------------------------------------------------------------- 1. hero: the living microorganism
   produx.design structure: a pinned dark stage, the organism in the middle (forhuman-organism.ts),
   the statement bottom-left, and per scroll stage a callout with a square marker whose title
   scrambles in. */
.fhl-org { --fhl-ink: #eeeeee; position: relative; height: 640vh; background: #000; color: var(--fhl-ink); }
.fhl-org-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: radial-gradient(50% 55% at 50% 48%, #0b0d0c 0%, #030303 60%, #000 100%); }
/* atmosphere: two soft haze layers drifting at different speeds with the scroll (parallax) */
.fhl-org-haze { position: absolute; inset: -20%; pointer-events: none; }
.fhl-org-haze.is-far { background: radial-gradient(30% 26% at 50% 45%, rgba(255, 255, 255, 0.025), transparent 70%); transform: translate3d(0, calc(var(--org-p, 0) * -4%), 0); }
.fhl-org-haze.is-near { display: none; }
.fhl-org-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* lens: a soft vignette and a fine film grain over the render */
.fhl-org-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 55% 45%, transparent 55%, rgba(10, 12, 11, 0.55) 100%); }
.fhl-org-stage::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; opacity: 0.07; mix-blend-mode: overlay; }
.fhl-org-intro { position: absolute; left: var(--fhh-gutter); bottom: 88px; z-index: 2; display: grid; gap: 20px; max-width: 34%; pointer-events: none; }
.fhl-org-intro > * { pointer-events: auto; }
.fhl-org-intro .fhs-eyebrow { grid-column: 1 / -1; margin: 0 !important; color: rgba(238, 238, 238, 0.6); }
.fh-about .fhl-org .fhl-h1 { max-width: 15ch; margin: 0; color: var(--fhl-ink); font-size: clamp(44px, 5vw, 88px); line-height: 0.96; font-weight: 300; letter-spacing: -0.05em; text-shadow: 0 2px 40px rgba(20, 22, 20, 0.7); }
.fh-about .fhl-org .fhl-h1 b { color: var(--fh-lime); font-weight: 300; }
.fh-about-statement .fh-line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.fh-about-statement .fh-line > span { display: block; }
.fhl-org-pitch { display: grid; gap: 24px; max-width: 440px; }
.fh-about .fhl-org .fhl-lead { font-size: 16px; line-height: 1.55; color: rgba(238, 238, 238, 0.7); }
.fhl-org .fhs-buttons { justify-content: flex-start; }
.fhl-org .fhs-btn.is-dark { background: var(--fhl-ink); color: #0a0a0a !important; }
.fhl-org .fhs-link { color: var(--fhl-ink); }

/* acts: one callout at a time (rounded marker, mono index, editorial title), placed asymmetrically */
.fhl-org-note { position: absolute; z-index: 2; display: flex; align-items: flex-start; gap: 20px; opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; }
.fhl-org-note.is-on { opacity: 1; transform: none; }
/* the act captions: an editorial column bottom-left. A hairline header (number, act name, a rule
   that draws itself), then the sentence in two tones: the first line in white, the rest softer. */
.fhl-org-note.is-1,
.fhl-org-note.is-2,
.fhl-org-note.is-3,
.fhl-org-note.is-4,
.fhl-org-note.is-5 { left: var(--fhh-gutter); right: auto; top: auto; bottom: 112px; width: min(38vw, 560px); flex-direction: column; text-align: left; gap: 0; }
.fhl-org-box { display: none; }
.fhl-org-note p { display: grid; gap: 0; margin: 0; }
.fhl-org-note small { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.fhl-org-note small b { color: var(--fhl-ink); font-weight: 400; }
.fhl-org-note small span { color: var(--fh-lime); }
.fhl-org-note small::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(238, 238, 238, 0.35), rgba(238, 238, 238, 0)); transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.15s; }
.fhl-org-note.is-on small::after { transform: scaleX(1); }
.fhl-org-note strong { display: block; color: rgba(238, 238, 238, 0.5); font-size: clamp(17px, 1.85vw, 30px); font-weight: 300; line-height: 1.2; letter-spacing: -0.025em; white-space: nowrap; }
.fhl-org-note strong:first-of-type { color: var(--fhl-ink); }
.fhl-org-body { display: block; max-width: 440px; text-wrap: pretty; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(238, 238, 238, 0.12); color: rgba(238, 238, 238, 0.55); font-size: 14px; line-height: 1.6; opacity: 0; transform: translateY(10px); transition: opacity 0.8s ease 0.3s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s; }
.fhl-org-note.is-on .fhl-org-body { opacity: 1; transform: none; }
.fhl-org-body b { color: var(--fhl-ink); font-weight: 500; }
.fhl-org-sign { display: block; margin-top: 14px; color: rgba(238, 238, 238, 0.45); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.fhl-org-sign b { color: var(--fh-lime); font-weight: 400; }
/* each line rises out of a mask, one after the other */
.fhl-org-note strong { clip-path: inset(0 0 100% 0); transform: translateY(40%); transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.fhl-org-note.is-on strong { clip-path: inset(-0.2em 0 -0.2em 0); transform: none; }
.fhl-org-note.is-on strong:nth-of-type(2) { transition-delay: 0.08s; }
.fhl-org-note.is-on strong:nth-of-type(3) { transition-delay: 0.16s; }
.fhl-org-note.is-on strong:nth-of-type(4) { transition-delay: 0.24s; }

/* solution names riding on their stones (positioned by forhuman-organism.ts) */
.fhl-org-tag { position: absolute; left: 0; top: 0; z-index: 2; margin: -34px 0 0 18px; padding: 6px 12px 6px 10px; border: 1px solid rgba(185, 255, 118, 0.35); border-radius: 99px; background: rgba(8, 10, 9, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #e9f2e4; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; white-space: nowrap; opacity: 0; pointer-events: none; will-change: transform; }
.fhl-org-tag::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--fh-lime); box-shadow: 0 0 10px rgba(185, 255, 118, 0.8); vertical-align: 1px; }

/* act index: big numeral, the act's name and a five-step rail (bottom right) */
.fhl-org-index { position: absolute; z-index: 2; right: var(--fhh-gutter); bottom: 40px; display: grid; justify-items: end; gap: 6px; opacity: 0; transition: opacity 0.6s ease; }
.fhl-org-index.is-on { opacity: 1; }
.fhl-org-index b { font-size: clamp(64px, 7vw, 120px); font-weight: 300; line-height: 0.9; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1px rgba(238, 238, 238, 0.55); }
.fhl-org-index span { color: rgba(238, 238, 238, 0.7); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.fhl-org-rail { display: flex; gap: 6px; margin-top: 8px; }
.fhl-org-rail em { width: 22px; height: 2px; border-radius: 2px; background: rgba(238, 238, 238, 0.18); transition: background-color 0.4s ease; }
.fhl-org-rail em.is-done { background: var(--fh-lime); }
.fhl-org[data-act]:not([data-act="0"]) .fhl-org-caption { opacity: 0; }
.fhl-org-caption { transition: opacity 0.6s ease; }

.fhl-org-hint { position: absolute; z-index: 2; left: 50%; bottom: 28px; margin: 0; transform: translateX(-50%); color: rgba(238, 238, 238, 0.5); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.fhl-org-hint::after { content: ""; display: block; width: 1px; height: 28px; margin: 10px auto 0; background: linear-gradient(rgba(238, 238, 238, 0.6), transparent); animation: fhl-hint 2s ease-in-out infinite; transform-origin: top; }
@keyframes fhl-hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.fhl-org-caption { position: absolute; z-index: 2; left: var(--fhh-gutter); bottom: 24px; max-width: 420px; margin: 0; color: rgba(238, 238, 238, 0.38); font-family: var(--font-mono); font-size: 11px; line-height: 1.55; }

/* still organism (reduced motion / no WebGL): no pinning, callouts as a row */
.fhl-org.is-static { height: auto; }
.fhl-org.is-static .fhl-org-stage { position: relative; height: auto; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; gap: 48px; padding: calc(var(--fh-topbar-height, 108px) + 48px) var(--fhh-gutter) 72px; }
.fhl-org.is-static .fhl-org-intro,
.fhl-org.is-static .fhl-org-note,
.fhl-org.is-static .fhl-org-caption { position: relative; inset: auto; left: auto; right: auto; top: auto; bottom: auto; opacity: 1; transform: none; flex-direction: row; text-align: left; }
.fhl-org.is-static .fhl-org-box { transform: none; }
.fhl-org.is-static .fhl-org-hint { display: none; }
.fhl-org.is-static .fhl-org-note strong { clip-path: none; transform: none; }
.fhl-org.is-static .fhl-org-tag,
.fhl-org.is-static .fhl-org-index { display: none; }
.fhl-org.no-webgl .fhl-org-canvas { display: none; }

/* ---------------------------------------------------------------- 1b. manifesto on lavender (compadre.cc layout) */
.fhl-manifesto { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px 96px; padding: 144px var(--fhh-gutter); background: var(--fh-paper); color: var(--fh-ink); }
.fhl-manifesto-head { align-self: start; position: sticky; top: calc(var(--fh-topbar-height, 108px) + 32px); }
.fhl-manifesto .fhs-eyebrow { color: var(--fh-blue); }
.fh-about .fhl-manifesto-title { margin-top: 24px; color: var(--fh-blue); font-size: clamp(40px, 5vw, 80px); line-height: 1; font-weight: 600; letter-spacing: -0.04em; }
.fh-about-world-title .fh-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.fh-about-world-title .fh-word > span { display: inline-block; }
.fhl-manifesto-body { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding-top: 52px; }
.fh-about .fhl-manifesto-text { font-size: 20px; line-height: 1.6; color: rgba(11, 16, 32, 0.78); }
.fh-about .fhl-manifesto-text b { color: var(--fh-ink); font-weight: 600; }
.fh-about .fhl-note { margin-top: -8px; color: rgba(11, 16, 32, 0.55); font-family: var(--font-mono); font-size: 13px; line-height: 1.5; }
.fhl-manifesto-link { margin-top: 12px; background: var(--fh-blue) !important; color: #ffffff !important; }
.fhl-manifesto-link svg { width: 18px; height: 18px; transition: transform 0.3s ease; }
.fhl-manifesto-link:hover svg { transform: translateX(3px); }

/* brand colours for the shared components on this page */
.fh-about .fhh-stack-card.is-blue { background: var(--fh-blue); }
.fh-about .fhh-stack-card.is-forest { background: var(--fh-electric); }
.fh-about .fhh-stack-card.is-cream { background: var(--fh-sky); color: var(--fh-ink); }

/* ---------------------------------------------------------------- 2. stacked colour cards */
.fhl-stack-head { padding: 144px var(--fhh-gutter) 64px; }
.fhl-stack-head .fhh-h3 { max-width: 1112px; }
.fhl-stack-head .fhs-text { max-width: 555px; margin-top: 24px; }

/* ---------------------------------------------------------------- 3. navy band */
/* black band like the hero: type in #eeeeee, the brand blue only on interaction */
/* the dark band, refined: a dotted label over the title; the four attitudes as numbered columns
   on a hairline; what we do grouped by discipline in two columns, one icon per capability. */
.fhl-band { padding: 144px var(--fhh-gutter) 152px; background: #0a0a0a; color: #eeeeee; }
.fhl-band-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: end; gap: 32px 64px; }
.fhl-band-head .fhl-dot { margin-bottom: 28px; color: var(--fh-lime); font-size: 16px; }
.fhl-band-head .fhs-text { color: rgba(238, 238, 238, 0.62); font-size: 18px; line-height: 1.5; }
.fhl-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 96px 0 0 !important; padding: 0; list-style: none; border-top: 1px solid rgba(238, 238, 238, 0.14); }
.fhl-value { padding: 32px 32px 8px 0; cursor: default; }
.fhl-value + .fhl-value { padding-left: 32px; border-left: 1px solid rgba(238, 238, 238, 0.08); }
.fhl-value-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 56px; }
.fhl-value-num { color: rgba(238, 238, 238, 0.45); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; }
.fhl-value-icon { display: inline-block; }
.fhl-value svg { display: block; width: 28px; height: 28px; overflow: visible; color: rgba(238, 238, 238, 0.7); stroke-width: 1.4; transition: color 0.4s ease; }
.fhl-value:hover svg { color: var(--fh-lime); }
.fhl-value-title { margin: 0 0 12px; font-size: 26px; line-height: 1.2; font-weight: 400; letter-spacing: -0.02em; }
.fhl-value p { max-width: 280px; margin: 0; color: rgba(238, 238, 238, 0.6); font-size: 16px; line-height: 1.55; }
.fhl-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-top: 144px; margin-bottom: 40px; }
.fhl-caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; }
.fhl-cap-title { margin: 0 0 12px; color: rgba(238, 238, 238, 0.45); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.fhl-rows { margin: 0; padding: 0; list-style: none; }
.fhl-rows li { border-top: 1px solid rgba(238, 238, 238, 0.12); }
.fhl-rows li:last-child { border-bottom: 1px solid rgba(238, 238, 238, 0.12); }
.fhl-row { display: flex; align-items: center; gap: 16px; padding: 20px 0; text-decoration: none; transition: color 0.25s ease, padding 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.fhl-row > svg { flex: none; width: 22px; height: 22px; color: rgba(238, 238, 238, 0.55); transition: color 0.25s ease; }
.fhl-row-title { flex: 1; font-size: 18px; line-height: 1.35; }
.fhl-row-arrow { flex: none; width: 18px; height: 18px; opacity: 0; transform: translateX(-8px); transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.fhl-row-arrow svg { width: 100%; height: 100%; }
.fhl-row:hover { padding-left: 8px; color: var(--fh-lime); }
.fhl-row:hover > svg { color: var(--fh-lime); }
.fhl-row:hover .fhl-row-arrow { opacity: 1; transform: none; }
/* on the blue band: translucent white card, the notch in the same tint */
.fhl-product { color: #eeeeee; }
.fhl-product .fhh-case-top { background: rgba(238, 238, 238, 0.08); transition: background-color 0.3s ease; }
.fhl-product .fhh-case-notch { fill: rgba(238, 238, 238, 0.08); transition: fill 0.3s ease; }
.fhl-product:hover .fhh-case-top { background: rgba(238, 238, 238, 0.14); }
.fhl-product:hover .fhh-case-notch { fill: rgba(238, 238, 238, 0.14); }

/* ---------------------------------------------------------------- 4. clients */
.fhl-clients { padding: 120px 0 96px; }
.fhl-clients .fhh-logo { height: 48px; }

/* ---------------------------------------------------------------- 5. program cards (notched case card) */
.fhl-programs { padding: 48px var(--fhh-gutter) 144px; }
.fhl-program-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.fhl-program .fhh-case-top { background: var(--fhl-card); transition: background-color 0.3s ease; }
.fhl-program .fhh-case-notch { fill: var(--fhl-card); transition: fill 0.3s ease; }
.fhl-program:hover .fhh-case-top { background: var(--fh-sky); }
.fhl-program:hover .fhh-case-notch { fill: var(--fh-sky); }
.fhl-program .fhh-case-media,
.fhl-product .fhh-case-media { aspect-ratio: 405 / 270; }
.fhl-program .fhh-case-title,
.fhl-product .fhh-case-title { padding-bottom: 0; }
.fh-about .fhl-card-text { display: block; margin-top: 12px; padding-bottom: 24px; font-size: 18px; line-height: 1.4; opacity: 0.8; }

/* ---------------------------------------------------------------- 7. paged project cards */
.fhs-paged [hidden] { display: none !important; }
.fhs-pager { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 48px; font-size: 18px; }
.fhs-pager button { display: grid; place-items: center; min-width: 24px; height: 32px; padding: 0; border: 0; background: none; color: var(--fhh-ink-2); font: inherit; cursor: pointer; }
.fhs-pager button[disabled] { opacity: 0.3; cursor: default; }
.fhs-pager button[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.fhs-pager svg { width: 22px; height: 22px; }
.fhs-pager .is-prev svg { transform: scaleX(-1); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 991px) {
  .fhl-org-intro { max-width: none; right: var(--fhh-gutter); }
  .fhl-band-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .fhl-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fhl-value:nth-child(3) { padding-left: 0; border-left: 0; }
  .fhl-caps { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .fhl-program-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .fhl-org { height: 400vh; }
  .fhl-org-intro { bottom: 64px; gap: 14px; }
  .fhl-org-pitch { gap: 16px; }
  .fhl-org-pitch .fhl-lead { display: none; }
  /* one act at a time, in the same slot under the scene */
  .fhl-org-note,
  .fhl-org-note.is-1,
  .fhl-org-note.is-2,
  .fhl-org-note.is-3,
  .fhl-org-note.is-4,
  .fhl-org-note.is-5 { left: var(--fhh-gutter); right: var(--fhh-gutter); top: auto; bottom: 112px; width: auto; }
  .fhl-org-note small { margin-bottom: 14px; }
  .fhl-org-note strong { font-size: 21px; white-space: normal; text-wrap: balance; }
  .fhl-org-body { margin-top: 12px; padding-top: 12px; }
  .fhl-org-index { bottom: 32px; left: var(--fhh-gutter); right: auto; justify-items: start; grid-auto-flow: column; align-items: end; gap: 12px; }
  .fhl-org-index b { font-size: 44px; }
  .fhl-org-tag { font-size: 10px; padding: 4px 9px 4px 8px; }
  .fhl-org-caption,
  .fhl-org-hint { display: none; }
  .fhl-manifesto { padding-top: 80px; padding-bottom: 80px; }
  .fhl-manifesto { grid-template-columns: minmax(0, 1fr); }
  .fhl-manifesto-head { position: static; }
  .fhl-manifesto-body { padding-top: 0; }
  .fhl-stack-head,
  .fhl-band { padding-top: 72px; padding-bottom: 72px; }
  .fhl-values { grid-template-columns: minmax(0, 1fr); margin-top: 56px !important; }
  .fhl-value, .fhl-value + .fhl-value { padding: 28px 0 8px; border-left: 0; }
  .fhl-value + .fhl-value { border-top: 1px solid rgba(238, 238, 238, 0.08); }
  .fhl-value-top { margin-bottom: 28px; }
  .fhl-list-head { margin-top: 80px; }
  .fhl-programs { padding-bottom: 72px; }
}

/* ---------------------------------------------------------------- 2. stacked cards, angellist.com layout inside
   The cards keep sliding over each other on scroll (forhuman-home.ts stackingCards, sticky + scale),
   now with larger rounded corners; inside, "● label", a large title, text, list and two buttons on
   the left, and on the right a dark rounded card holding a close-up of the organism (rendered by
   forhuman-organism.ts), so the cards carry the motion on. */
.fhl-dot { display: inline-flex; align-items: center; gap: 12px; margin: 0; font-size: 18px; line-height: 1.2; }
.fhl-dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.fhl-fronts-head .fhl-dot { margin-bottom: 28px; }
/* angellist.com sheets: full width, light, rounded top corners, each one sliding up over the last */
.fh-about .fhl-stack { padding: 0; background: transparent; }
.fh-about .fhl-front { position: sticky; top: 0 !important; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: clamp(32px, 5vw, 88px); min-height: 100vh; min-height: 100svh; margin: 0 !important; padding: calc(var(--fh-topbar-height, 108px) + 48px) var(--fhh-gutter) 72px; border: 0; border-radius: 44px 44px 0 0; background: var(--fh-page) !important; color: var(--fh-ink) !important; box-shadow: 0 -24px 60px -20px rgba(10, 12, 11, 0.18), inset 0 1px 0 rgba(10, 10, 10, 0.06); }
.fh-about .fhl-front::after { border-radius: inherit; }
.fhl-front-copy { display: grid; gap: 20px; align-content: start; }
.fh-about .fhl-front-title { margin: 20px 0 0; font-size: clamp(36px, 3.8vw, 64px); font-weight: 400; line-height: 1; letter-spacing: -0.04em; }
.fh-about .fhl-front-text { max-width: 500px; margin: 0; color: #5d5d66; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.45; }
.fhl-front-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; max-width: 540px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 15px; }
.fhl-front-list li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.35; }
.fhl-front-list svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--fh-blue); }
.fhl-front-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.fhl-front-btn { display: inline-flex; align-items: center; min-height: 50px; padding: 0 22px; border-radius: 6px; background: var(--fh-lime); color: #0a0a0a !important; font-size: 16px; text-decoration: none; transition: transform 0.25s ease; }
.fhl-front-btn.is-dark { background: #0a0a0a; color: #ffffff !important; }
.fhl-front-btn:hover { transform: translateY(-2px); }
.fhl-front-art { position: relative; align-self: center; margin: 0; overflow: hidden; height: min(66vh, 640px); min-height: 380px; border-radius: 24px; background: radial-gradient(60% 60% at 50% 45%, #121614, #030303 70%); }
.fhl-front-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1.2s ease, transform 2.4s cubic-bezier(0.16, 1, 0.3, 1); }
.fhl-front-art.is-ready img { opacity: 1; transform: scale(1); animation: fhl-breathe 16s ease-in-out 2.4s infinite alternate; }
@keyframes fhl-breathe { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.06) translate3d(-1.5%, -1%, 0); } }
.fhl-front-art figcaption { position: absolute; left: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 99px; background: rgba(10, 12, 11, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #eef2ea; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; }
.fhl-front-art figcaption i { width: 7px; height: 7px; border-radius: 50%; background: var(--fh-lime); box-shadow: 0 0 10px rgba(185, 255, 118, 0.8); }
@media (max-width: 991px) {
  .fh-about .fhl-front { grid-template-columns: minmax(0, 1fr); padding: calc(var(--fh-topbar-height, 108px) + 24px) var(--fhh-gutter) 48px; }
  .fhl-front-art { order: -1; min-height: 280px; }
}
@media (max-width: 767px) {
  .fh-about .fhl-front { position: relative; min-height: 0; padding: 48px var(--fhh-gutter); border-radius: 28px 28px 0 0; }
  .fh-about .fhl-front-title { margin-top: 8px; }
  .fhl-front-list { grid-template-columns: minmax(0, 1fr); }
  .fhl-front-art { min-height: 220px; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) { .fhl-front-art.is-ready img { animation: none; } }