/* PStyle — Home (front-page.php) styles only.
   main.css (global) is already loaded; only Home-specific rules live here.
   Luxury minimalism: full-viewport serif hero, alternating white / warm-grey
   sections, hairline dividers, accent used sparingly. Responsive 375 → 1440.
   All raw values come from tokens.css via var(--…). */

/* ============================================================ Section rhythm
   Surfaces are NOT painted here any more. Each Home section declares its ground
   with one .ps-surface--white / --muted / --dark class in its template part (see
   the Surfaces block in main.css); the approved Home rhythm is
   hero D → Trusted W → Why P STYLE M → Featured W → Innovation D → footer D+.
   home.css loads AFTER main.css, so a `background:` left in this file would win
   over the utility class and silently break the rhythm — that is why the
   per-section background declarations were removed rather than kept "for safety". */
.ps-numbers {
  /* Hairlines only; the ground comes from .ps-surface--white in numbers.php.
     (The band is not in the Home stack right now — see front-page.php — but it
     keeps an explicit surface so re-enabling it after the muted "Why" band
     cannot produce two identical light surfaces in a row.) */
  border-block: 1px solid var(--line);
}

/* ============================================================ Hero */
.ps-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--header-h) - var(--topbar-h));
  padding-block: var(--sp-8);
  overflow: hidden;
  color: var(--white);
  background: var(--anthracite);
}

.ps-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ps-hero__video,
.ps-hero__poster,
.ps-hero__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* On-brand dark gradient placeholder when no video/poster is set. */
.ps-hero__placeholder {
  background:
    radial-gradient(
      120% 90% at 20% 0%,
      var(--hero-ground-hi) 0%,
      var(--anthracite) 45%,
      var(--anthracite-deep) 100%
    );
}

/* Legibility overlay: darker at the content edge, softer opposite. */
.ps-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      rgba(10, 10, 12, 0.82) 0%,
      rgba(10, 10, 12, 0.62) 42%,
      rgba(10, 10, 12, 0.38) 100%
    );
}

.ps-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.ps-hero__content {
  /* Display measure, NOT a prose measure — the big headline needs room so it
     does not wrap one word per line. The subtitle keeps its own narrow measure. */
  max-width: min(68rem, 100%);
}

.ps-hero__eyebrow {
  color: var(--on-dark-72);
}

.ps-hero__title {
  margin: 0 0 var(--sp-3);
  font-size: var(--step-5);
  font-weight: var(--w-reg);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--white);
  /* Fill the hero measure and balance the lines (avoids the old 18ch cap that
     forced one word per line under the large display size). */
  text-wrap: balance;
}

.ps-hero__subtitle {
  margin: 0 0 var(--sp-5);
  max-width: 46ch;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--on-dark-82);
}

.ps-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* Reveal choreography — stagger the hero lines gently. */
.ps-hero .ps-reveal {
  transition-delay: 0.05s;
}
.ps-hero__title.ps-reveal {
  transition-delay: 0.12s;
}
.ps-hero__subtitle.ps-reveal {
  transition-delay: 0.2s;
}
.ps-hero__actions.ps-reveal {
  transition-delay: 0.28s;
}

/* ============================================================ Trusted by */
.ps-trusted__heading {
  text-align: center;
  margin-bottom: var(--sp-5);
  color: var(--muted);
}

.ps-trusted__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5) var(--sp-6);
}

.ps-trusted__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
}

.ps-trusted__logo {
  max-height: 44px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.6;
  transition:
    opacity var(--dur-fast) var(--ease),
    filter var(--dur-fast) var(--ease);
}

.ps-trusted__item:hover .ps-trusted__logo {
  opacity: 1;
  filter: grayscale(0);
}

/* Monochrome text-logo placeholder (logo id = 0). */
.ps-trusted__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--w-med);
  letter-spacing: 0.01em;
  color: var(--muted);
  opacity: 0.72;
  transition:
    opacity var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.ps-trusted__item:hover .ps-trusted__name {
  opacity: 1;
  color: var(--ink);
}

/* ============================================================ Numbers */
.ps-numbers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6) var(--sp-4);
}

.ps-numbers__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-left: var(--sp-3);
  border-left: 1px solid var(--line-strong);
}

.ps-numbers__value {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: var(--w-reg);
  line-height: 0.95;
  color: var(--ink);
}

.ps-numbers__label {
  font-size: var(--step--1);
  font-weight: var(--w-med);
  text-transform: uppercase;
  letter-spacing: var(--letter-mid);
  color: var(--muted);
}

/* Statement rows (no value): the label becomes the serif focal point. */
.ps-numbers__item.is-statement {
  justify-content: center;
  border-left-color: var(--accent);
}

.ps-numbers__item.is-statement .ps-numbers__label {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--w-reg);
  text-transform: none;
  letter-spacing: -0.005em;
  line-height: 1.1;
  color: var(--ink);
}

/* Gentle stagger across the number blocks. */
.ps-numbers__item.ps-reveal:nth-child(2) { transition-delay: 0.06s; }
.ps-numbers__item.ps-reveal:nth-child(3) { transition-delay: 0.12s; }
.ps-numbers__item.ps-reveal:nth-child(4) { transition-delay: 0.18s; }
.ps-numbers__item.ps-reveal:nth-child(5) { transition-delay: 0.24s; }

/* ============================================================ Featured projects */
.ps-featured__head {
  margin-bottom: var(--sp-6);
}

.ps-featured__heading {
  margin: 0;
  font-size: var(--step-3);
  font-weight: var(--w-reg);
}

.ps-featured__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5) var(--sp-4);
}

.ps-featured__card {
  min-width: 0;
}

.ps-featured__link {
  display: flex;
  flex-direction: column;
  color: var(--ink);
}

.ps-featured__link:hover,
.ps-featured__link:focus-visible {
  color: var(--ink);
}

.ps-featured__media {
  display: block;
  overflow: hidden;
  margin-bottom: var(--sp-3);
}

.ps-featured__media .ps-media,
.ps-featured__media .ps-ph {
  transition: transform var(--dur) var(--ease);
}

.ps-featured__link:hover .ps-media,
.ps-featured__link:hover .ps-ph,
.ps-featured__link:focus-visible .ps-media,
.ps-featured__link:focus-visible .ps-ph {
  transform: scale(1.03);
}

.ps-featured__body {
  display: block;
}

.ps-featured__industry {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--step--1);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: var(--letter-mid);
  color: var(--accent);
}

.ps-featured__title {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--w-reg);
  line-height: 1.1;
  color: var(--ink);
}

.ps-featured__subtitle {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--muted);
}

.ps-featured__more {
  color: var(--ink);
}

.ps-featured__link:hover .ps-featured__more,
.ps-featured__link:focus-visible .ps-featured__more {
  color: var(--accent);
}

.ps-featured__foot {
  margin-top: var(--sp-6);
  text-align: center;
}

.ps-featured__card.ps-reveal:nth-child(2) { transition-delay: 0.08s; }
.ps-featured__card.ps-reveal:nth-child(3) { transition-delay: 0.16s; }

/* ============================================================ Innovation teaser
   Ground + inverted text come from .ps-surface--dark in innovation-teaser.php
   (the old `background: var(--anthracite); color: var(--white)` pair lived here
   and would have overridden the utility class). --ink / --muted / --line are
   re-scoped inside that class, so the children below invert on their own; only
   accent-coloured TEXT needs an explicit switch to --accent-on-dark. */
.ps-innovation__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  align-items: center;
  gap: var(--sp-6);
}

.ps-innovation__eyebrow {
  color: var(--on-dark-72);
  margin-bottom: var(--sp-3);
}

.ps-innovation__status {
  position: relative;
  padding-left: 0.9em;
  /* Accent as TEXT on anthracite: --accent is 1.98:1 and fails AA, so the
     lighter brand blue is used here. The dot in ::before is decorative white. */
  color: var(--accent-on-dark);
}

.ps-innovation__status::before {
  content: "·";
  position: absolute;
  left: 0.1em;
  color: var(--on-dark-40);
}

.ps-innovation__lead {
  max-width: 52ch;
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--w-reg);
  line-height: 1.22;
  color: var(--white);
}

.ps-innovation__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
}

.ps-innovation__launch {
  font-size: var(--step--1);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  color: var(--on-dark-66);
}

.ps-innovation__year {
  color: var(--white);
}

.ps-innovation__motif {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.ps-innovation__mark {
  font-family: var(--font-display);
  font-size: clamp(3rem, 1.5rem + 7vw, 6rem);
  font-weight: var(--w-reg);
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--on-dark-90);
}

.ps-innovation__mark .ps-accent {
  /* Accent as TEXT on the dark ground — see .ps-innovation__status above. This
     selector is more specific than main.css's .ps-surface--dark .ps-accent, so
     it has to name --accent-on-dark itself. */
  color: var(--accent-on-dark);
}

/* ============================================================ Responsive */
@media (max-width: 980px) {
  .ps-hero {
    min-height: calc(100svh - var(--header-h));
  }

  .ps-innovation__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .ps-innovation__motif {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .ps-featured__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .ps-numbers__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5) var(--sp-4);
  }

  .ps-trusted__row {
    gap: var(--sp-4) var(--sp-5);
  }
}

@media (max-width: 460px) {
  .ps-numbers__grid {
    grid-template-columns: 1fr;
  }

  .ps-hero__actions .ps-btn {
    flex: 1 1 auto;
  }

  .ps-trusted__name {
    font-size: var(--step-0);
  }
}

/* ============================================================ Reduced motion
   Drop the media zoom for reduced-motion users (the hero video is paused in JS). */
@media (prefers-reduced-motion: reduce) {
  .ps-featured__link:hover .ps-media,
  .ps-featured__link:hover .ps-ph,
  .ps-featured__link:focus-visible .ps-media,
  .ps-featured__link:focus-visible .ps-ph {
    transform: none;
  }
}

/* ==================================================================== *
 * Iteration 2026-07-20 · Phase A — Hero impact + "Why P STYLE"          *
 * Additive blocks. Rules that repeat an earlier selector (H1 size,      *
 * hero overlay, featured subtitle) intentionally override it via the    *
 * cascade so the originals stay diff-clean above. All motion here is    *
 * disabled in the reduced-motion block at the very end.                 *
 * ==================================================================== */

/* -------------------------------------------------- Hero: positioning overline
   A refined, letter-spaced line above the eyebrow with a hairline that
   underlines only the text (the "international" signal). */
.ps-hero__positioning {
  display: inline-block;
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: var(--w-med);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  color: var(--on-dark-78);
  border-bottom: 1px solid var(--line-invert);
}

/* -------------------------------------------------- Hero: stronger typography
   Raise the display max and tighten the line-height. Keeps the --ps-scale /
   --ps-heading-scale multipliers (mirrors the token calc) so the Typography
   Customizer still drives the hero. text-wrap:balance is kept from the base
   rule so the headline holds 2-3 balanced lines and never wraps one-per-line. */
.ps-hero__title {
  font-size: calc(clamp(3.4rem, 2rem + 7vw, 8rem) * var(--ps-scale) * var(--ps-heading-scale));
  line-height: 0.98;
}

/* -------------------------------------------------- Hero: stronger scrim
   Near-black at the content (left) edge fading to near-transparent on the
   right, so the headline stays AA-legible over any poster/video. */
/* The right end used to fade to 0.14, then 0.26. The Bulgarian headline is longer
   than the English one and runs to three lines at ~900px viewport height and four
   at 1080 (it always has), which puts the accent word out at x≈61-88% — on the lit
   facade of the photograph. That is the demanding case: the accent word is
   #8ba6f0 (relative luminance 0.40), so it needs its local ground below L=0.10 to
   clear 3:1, where the white part of the headline tolerates L up to 0.30 — three
   times the slack. The right end is lifted to 0.46 here, which pulls the lit
   facade down without blacking the photograph out (the people, the floor and the
   window frames all still read); the rest of the work is done by the glyph-level
   ground below. Do not push this past ~0.5: beyond that the photograph stops
   being a photograph and the hero reads as a flat dark panel, which is exactly
   what the client asked us not to do. */
.ps-hero__overlay {
  background:
    linear-gradient(
      95deg,
      rgba(8, 8, 10, 0.94) 0%,
      rgba(8, 8, 10, 0.82) 34%,
      rgba(8, 8, 10, 0.68) 66%,
      rgba(8, 8, 10, 0.48) 100%
    );
}

/* Local ground for the glyphs themselves. The two identical opaque 8px layers
   composite to an effectively solid ground right at the glyph edge, 16px softens
   the step and 36px keeps the whole from reading as a halo.

   HOW THIS IS MEASURED (re-run it, do not trust this paragraph): render the hero
   twice at the same frame — once as-is, once with .ps-hero__title hidden — take
   the glyph pixels as those within 12/255 of #ffffff or of the accent colour that
   differ between the two, and compare each glyph pixel against the mean luminance
   of a window of radius r around it, excluding every pixel the headline layer
   touched. A tight window flatters the result because the opaque 8px layers sit
   inside it, so the number that matters is the one at r=32, roughly a third of
   the cap height at these sizes.

   RESULT as measured on 2026-08-13, over 54 frames — BG at 1024x768, 1280x720,
   1280x800, 1280x900, 1440x900, 1536x864, 1600x900, 1920x1080 and 375x812, EN
   spot-checked at three of those, each at Ken-Burns scale 1.00/1.02/1.04/1.06/
   1.08 — at window radii 4, 8, 16, 32 and 64, both with the shadow credited and
   with the headline layer removed entirely so that only the photograph and the
   scrim count: 0.00% of glyph area under 3:1 in every single combination. The
   lowest per-glyph minimum anywhere is 3.12:1 (Bulgarian, 1024x768, scale 1.08,
   accent word, shadow NOT credited).

   This holds for THIS poster. If the client swaps in a lighter photograph or a
   video, re-run the measurement rather than assuming it still holds. */
.ps-hero__title,
.ps-hero__subtitle {
  text-shadow:
    0 0 8px rgba(8, 8, 10, 1),
    0 0 8px rgba(8, 8, 10, 1),
    0 0 16px rgba(8, 8, 10, 0.9),
    0 2px 36px rgba(8, 8, 10, 0.75);
}

/* The accent word needs a denser ground than the white text around it. It is
   #8ba6f0, relative luminance 0.40, so 3:1 demands a local ground below L=0.10,
   where the white glyphs (L=1.0) clear the same threshold at L=0.30. On the
   Bulgarian headline the word lands on the lit facade at 1024x768, 1280x800,
   1280x900 and 1440x900, which is exactly where the shared stack above ran out.
   These layers extend the solid part of the ground out to ~24px and keep a dense
   mid-radius falloff, so the word carries its own ground at r=32 instead of
   relying on the scrim. The English headline never needs this (it is two lines and
   the word stays left of the bright area) but the rule is language-agnostic, so it
   applies there too and simply has no measurable effect. */
.ps-hero__title .ps-accent {
  text-shadow:
    0 0 10px rgba(8, 8, 10, 1),
    0 0 10px rgba(8, 8, 10, 1),
    0 0 24px rgba(8, 8, 10, 1),
    0 0 24px rgba(8, 8, 10, 0.92),
    0 0 44px rgba(8, 8, 10, 0.86),
    0 2px 64px rgba(8, 8, 10, 0.7);
}

/* -------------------------------------------------- Hero: cinematic depth
   Slow, subtle Ken-Burns on the poster/placeholder + a very faint CSS film
   grain. Both are decorative and CSS-only; the zoom is disabled under
   prefers-reduced-motion at the end of this file. */
@keyframes ps-hero-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

.ps-hero__poster,
.ps-hero__placeholder {
  transform-origin: 50% 42%;
  animation: ps-hero-kenburns 32s ease-in-out infinite alternate;
  will-change: transform;
}

.ps-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* -------------------------------------------------- Hero: scale-proof strip
   Compact row of the first three Numbers (values from the repeater, labels
   translated) at the bottom of the hero content, thin vertical hairlines. */
.ps-hero__scale {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) 0;
  margin: var(--sp-5) 0 0;
  padding: var(--sp-4) 0 0;
  list-style: none;
  border-top: 1px solid var(--line-invert);
}

.ps-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-inline: clamp(var(--sp-3), 2vw, var(--sp-5));
  border-left: 1px solid var(--line-invert);
}

.ps-hero__stat:first-child {
  padding-left: 0;
  border-left: 0;
}

.ps-hero__stat-value {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: var(--w-reg);
  line-height: 1;
  color: var(--white);
}

.ps-hero__stat-label {
  font-size: var(--step--1);
  font-weight: var(--w-med);
  text-transform: uppercase;
  letter-spacing: var(--letter-mid);
  color: var(--muted-invert);
}

/* Extend the hero reveal choreography to the new lines. */
.ps-hero__positioning.ps-reveal { transition-delay: 0.02s; }
.ps-hero__scale.ps-reveal { transition-delay: 0.34s; }

/* -------------------------------------------------- Hero: scroll cue
   Decorative down indicator: a thin rail with a light glint travelling down.
   aria-hidden in the markup; the travel is disabled under reduced motion. */
.ps-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--sp-3);
  z-index: 1;
  width: 1px;
  height: 42px;
  overflow: hidden;
  background: var(--line-invert);
  transform: translateX(-50%);
}

.ps-hero__scroll::after {
  content: "";
  position: absolute;
  left: 0;
  top: -60%;
  width: 100%;
  height: 60%;
  background: rgba(255, 255, 255, 0.85);
  animation: ps-hero-scroll 2.2s var(--ease) infinite;
}

@keyframes ps-hero-scroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(280%); }
}

/* -------------------------------------------------- Featured: case-study cues
   A small "Case study" badge on the media and a one-line clamped outcome, so
   the Home teaser matches the new case-study archive. */
.ps-featured__media {
  position: relative;
}

.ps-featured__tag {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: 1;
  padding: 0.35em 0.7em;
  font-size: var(--step--1);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: var(--letter-mid);
  color: var(--white);
  background: rgba(17, 17, 17, 0.72);
}

.ps-featured__subtitle {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}

/* -------------------------------------------------- Why P STYLE
   Differentiators band: 4-column grid → 2 → 1, restrained hairlines, accent
   used only on the typographic 01-04 indices.
   Surface: assigned in the template via .ps-surface--muted (main.css). The
   section no longer paints its own background — the hard-coded
   `background: var(--white)` was removed here so the surface class is the single
   source of truth. */
.ps-why__head {
  max-width: 44ch;
  margin-bottom: var(--sp-6);
}

.ps-why__heading {
  margin: 0;
  font-size: var(--step-3);
  font-weight: var(--w-reg);
  line-height: 1.1;
}

.ps-why__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5) var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ps-why__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

.ps-why__index {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--w-reg);
  line-height: 1;
  color: var(--accent);
}

.ps-why__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--w-med);
  line-height: 1.2;
  color: var(--ink);
}

.ps-why__text {
  margin: 0;
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--muted);
}

.ps-why__item.ps-reveal:nth-child(2) { transition-delay: 0.08s; }
.ps-why__item.ps-reveal:nth-child(3) { transition-delay: 0.16s; }
.ps-why__item.ps-reveal:nth-child(4) { transition-delay: 0.24s; }

/* -------------------------------------------------- Responsive (Phase A) */
@media (max-width: 980px) {
  .ps-why__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5) var(--sp-5);
  }
}

@media (max-width: 760px) {
  /* The scroll cue can crowd the taller mobile hero; drop it there. */
  .ps-hero__scroll {
    display: none;
  }
}

@media (max-width: 560px) {
  .ps-why__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 460px) {
  /* Keep the three stats on one compact row at 375px. */
  .ps-hero__stat-value {
    font-size: var(--step-2);
  }
  .ps-hero__stat {
    padding-inline: var(--sp-2);
  }
}

/* -------------------------------------------------- Reduced motion (Phase A)
   Freeze the Ken-Burns zoom and the scroll-cue travel for users who ask for it.
   (The hero video itself is paused via the existing JS in hero.php.) */
@media (prefers-reduced-motion: reduce) {
  .ps-hero__poster,
  .ps-hero__placeholder {
    animation: none;
    transform: none;
  }

  .ps-hero__scroll::after {
    animation: none;
  }
}

/* ==================================================================== *
 * Iteration 2026-07-27 · Final polish (pre-handover)                    *
 * Overrides earlier rules via the cascade so the blocks above stay      *
 * diff-clean. No motion is re-enabled here.                             *
 * ==================================================================== */

/* -------------------------------------------------- Hero: land it in one screen
   The hero has to deliver its whole message — positioning line, headline,
   subtitle and both CTAs — within the first screen. On a 1280x720 laptop only
   ~604px of hero sits above the fold, and the width-only clamps pushed the
   subtitle, the buttons and the scale strip out of view. Size and rhythm now
   answer to viewport HEIGHT as well: short windows compress, tall windows keep
   the full 8rem display. */
.ps-hero {
  padding-block: clamp(2rem, 4.3vh, var(--sp-8));
}

.ps-hero__title {
  /* ~10% below the Phase A display size (client call 2026-07-27: the headline read
     too large). The vh term still governs short windows so the CTAs stay in the
     first screen; the vw term governs wide-but-short and mobile. */
  font-size: min(
    calc(clamp(3.2rem, 1.9rem + 6.4vw, 6rem) * var(--ps-scale) * var(--ps-heading-scale)),
    calc(10.5vh * var(--ps-scale) * var(--ps-heading-scale))
  );
  line-height: 1;
}

.ps-hero__subtitle {
  margin-bottom: clamp(var(--sp-3), 3.4vh, var(--sp-5));
}

.ps-hero__scale {
  margin-top: clamp(var(--sp-3), 3.4vh, var(--sp-5));
  padding-top: clamp(var(--sp-2), 2.4vh, var(--sp-4));
}

/* -------------------------------------------------- Hero: strip stays a row
   On narrow screens the three stats used to wrap onto three lines (the labels
   are long), adding ~110px to an already tall mobile hero. A three-column grid
   keeps them side by side and lets each label wrap inside its own column. */
@media (max-width: 620px) {
  .ps-hero__scale {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }

  .ps-hero__stat {
    gap: 0.25rem;
    padding-inline: var(--sp-2);
  }

  .ps-hero__stat-label {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
  }
}