/* ============ Hero + Trust bar ============ */
/* Both sections share one continuous background graphic (no flat-color seam between them) —
   the svg is a shared layer behind the group, and hero/trust-bar sit transparently above it. */
.hero-group {
  position: relative;
  background: var(--surface-hero);
  /* scoped here (not on html/body) so it doesn't break the why-us section's position:sticky
     pin further down the page */
  overflow-x: hidden;
}

.hero-group__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-group__bg svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Full-bleed, image/graphic-led first screen. Nav floats on top (fixed), so hero fills
   the whole viewport on load rather than sitting below a nav bar in normal flow. */
.hero {
  position: relative;
  z-index: 1;
  /* at least a full screen, but free to grow: on a short window (a laptop browser with tab and
     bookmark bars, say) the content needs more than the viewport and used to center itself up
     underneath the fixed nav instead */
  min-height: max(560px, 100vh);
  color: var(--ink-inverse);
}

/* Particle field behind the hero content (js/main.js draws into the canvas and decides where
   the word sits: right of the headline on wide screens, in the gap above it on narrow ones).
   pointer-events: none so it never blocks the CTA; the cursor-repel effect listens on .hero. */
.hero__particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero__particles-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* fold-line waves drift slowly side to side, staggered so they never move in sync */
.hero__wave {
  animation: hero-wave 30s ease-in-out infinite alternate;
}
.hero__wave--2 { animation-duration: 34s; animation-delay: -8s; }
.hero__wave--3 { animation-duration: 26s; animation-delay: -15s; }
.hero__wave--4 { animation-duration: 38s; animation-delay: -22s; }
.hero__wave--5 { animation-duration: 32s; animation-delay: -6s; }
.hero__wave--6 { animation-duration: 29s; animation-delay: -18s; }

@keyframes hero-wave {
  0%   { transform: translate(-9px, -3px); }
  100% { transform: translate(9px, 3px); }
}

/* ============ Content — eyebrow label above one centered group holding the headline,
   subhead and CTA, each spaced the same distance apart ============ */
.hero__content {
  position: relative;
  z-index: 1;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-4);
  /* The same clearance top and bottom, so centering is unchanged wherever the content fits;
     where it doesn't, the hero grows and the content starts below the fixed nav (~77px tall)
     instead of sliding under it. */
  padding-block: 105px;
  padding-inline: var(--space-5);
}
/* Shift the whole centered block down a bit, off dead-center — only once there's enough
   vertical room that it can't push the CTA past the hero's own bottom edge (min-height 560px). */
@media (min-height: 700px) {
  .hero__content { transform: translateY(60px); }
}

/* On-load entrance — eyebrow, headline, then subhead+CTA fade/rise in with a short stagger.
   The hero is visible immediately on load (nothing to scroll into view), so this is a plain
   CSS animation rather than the scroll-tied word reveal the sections below use. */
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(var(--hero-fade-distance, 24px)); }
  to { opacity: 1; transform: translateY(0); }
}
.hero__eyebrow,
.hero__headline,
.hero__foot {
  animation: hero-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero__eyebrow { animation-delay: 0.1s; }
.hero__headline { animation-delay: 0.22s; }
.hero__foot { animation-delay: 0.36s; }

.hero__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}
.hero__headline {
  max-width: 700px;
  color: var(--ink-inverse);
  font-size: 84px;
  line-height: 1;
  letter-spacing: -2px;
  text-transform: uppercase;
}
@media (max-width: 880px) {
  .hero__headline { font-size: clamp(32px, 9vw, 84px); max-width: 100%; }
}
/* Short desktop windows (a laptop browser with tab/bookmark bars can leave ~580px): four lines
   at 84px plus the nav don't fit, so the headline scales with the window height there and the
   whole block, CTA included, still lands on the first screen. Above ~730px tall it's the full
   84px again. */
@media (min-width: 1101px) and (max-height: 730px) {
  .hero__headline { font-size: max(56px, 11.5vh); }
  .hero__content { padding-block: 95px; }
}

/* Nudged 20px closer to the headline above (pulling the whole subhead+CTA pair up as one
   unit, not just the subhead) — a pure visual offset, so it doesn't disturb .hero__group's
   own gap/centering math. */
.hero__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  position: relative;
  top: -20px;
}

.hero__subhead {
  max-width: 480px;
  color: var(--ink-inverse-muted);
  line-height: 1.2;
}

/* Nudged 5px down, closer to the headline below — same visual-offset technique as .hero__foot. */
.hero__eyebrow {
  position: relative;
  top: 5px;
  color: var(--accent);
}
.hero__eyebrow-break { display: none; }

.hero__cta {
  display: flex;
  align-items: stretch;
}

.hero__cta-btn {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-inverse);
  background: rgba(32, 26, 24, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: var(--space-3) var(--space-5);
  backdrop-filter: blur(10px);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.hero__cta-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  background: var(--accent);
  border: 1px solid var(--accent);
  flex-shrink: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.hero__cta-arrow svg { width: 20px; height: 20px; transition: stroke 0.15s ease; }
/* Two-part swap: the label turns pink/white, the arrow box turns white with a pink icon —
   same pattern on every arrow button on the site (hero, quote-block, footer). */
.hero__cta:hover .hero__cta-btn { background: var(--accent); border-color: var(--accent); }
.hero__cta:hover .hero__cta-arrow { background: var(--ink-inverse); border-color: var(--ink-inverse); }
.hero__cta:hover .hero__cta-arrow svg { stroke: var(--accent); }

/* ============ Trust bar — continuous scrolling ticker of client names ============ */
.trust-bar {
  position: relative;
  z-index: 1;
}

.trust-bar__marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.trust-bar__marquee-track {
  display: flex;
  width: max-content;
  animation: trust-bar-scroll 70s linear infinite;
}
.trust-bar__marquee:hover .trust-bar__marquee-track {
  animation-play-state: paused;
}

@keyframes trust-bar-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.trust-bar__track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.trust-bar__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-inverse-muted);
  white-space: nowrap;
  padding-inline: var(--space-5);
}
.trust-bar__item::after {
  /* An eight-spoke asterisk drawn as an SVG mask filled with the accent, not the \2733
     character: iOS/macOS Safari render that one as a green emoji (✳️) whatever the CSS color. */
  content: '';
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-left: var(--space-5);
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 3v18M3 12h18M5.6 5.6l12.8 12.8M18.4 5.6L5.6 18.4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 3v18M3 12h18M5.6 5.6l12.8 12.8M18.4 5.6L5.6 18.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ============ Why us — large scroll-revealed statement, pinned while it plays ============ */
/* Extra scroll room above the viewport height gives the sticky "stage" (height: 100vh,
   overflow: hidden) distance to play three phases against, all driven by one sticky block
   (js/main.js splits its progress into three overlapping sub-ranges): 1) the rule line fills
   and the text brightens word by word; 2) the inner column (text + row) slides up (via a
   JS-driven translateY) just far enough that the card row clears the bottom with a 100px gap
   — the text rides up and out of the stage, clipped by overflow: hidden, to make room; 3) the
   cards fold into a coverflow stack. After that the sticky simply un-pins with the page's own scroll, carrying the
   (frozen) slide and the stacked cards up together as one piece. Left/right edges match the
   nav logo's own guide (var(--space-5)) — the rule line below the eyebrow rides that same
   full-width guide, while the statement text is capped narrower. */
.why-us-pin {
  position: relative;
  height: 400vh;
}
/* js/main.js pulls the next section up over the empty lower part of the pinned stage (see
   setSlideTarget) — keep it painting above the stage while the two overlap. */
#why-us + .section {
  position: relative;
  z-index: 1;
}
.why-us-pin__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
  /* Vertically centers the content block instead of leaving it pinned to the top — on a
     100vh stage that's fine on typical short/wide desktop viewports (content roughly fills
     it), but on a tall, narrow one (an iPad Pro in portrait, say) the content is nowhere
     near 100vh tall and used to leave a huge dead strip below the cards. Centering splits
     that leftover space above/below instead. The slide-up JS still works unchanged — it
     measures the inner block's real rendered position either way. */
  display: flex;
  flex-direction: column;
}
.why-us-pin__inner {
  padding-top: 80px;
  /* auto margins, not the parent's justify-content: center — centering via the container
     would let the inner block overflow ABOVE the stage (and behind the fixed nav) whenever
     the content is taller than the stage (a long statement on a short/normal-height desktop
     viewport, say). Auto margins collapse to 0 instead of going negative in that case, so it
     falls back to top-aligned — "safe" centering without relying on the CSS `safe` keyword,
     which not every engine supports yet. */
  margin-top: auto;
  margin-bottom: auto;
}

.why-us__statement {
  max-width: 960px;
  margin-left: auto;
  color: var(--ink-primary);
}
.why-us__statement .word {
  opacity: 0.2;
}
.why-us__statement.is-reduced-motion .word {
  opacity: 1;
}

/* Rows sit below the text inside the same sliding inner column (left edge already matches the
   statement's guide via the sticky stage's own padding). js/main.js slides the whole inner
   column up until this row clears the stage's bottom edge by 100px, then drives its horizontal
   scrollLeft once that slide settles. Cards sit flush against each other (no gap) — each is
   `position: sticky; left: <stagger>` (components.css) so, as that horizontal position
   advances, card N+1 slides in and covers 35% of card N (same fixed step every time, so the
   overlap is identical card to card). */
.why-us__rows {
  margin-top: 50px;
}
.indexed-row-list {
  max-width: 960px;
  margin-left: auto;
}
.why-cards {
  display: flex;
  gap: 0;
  overflow-x: hidden;
}
.why-card {
  position: sticky;
  left: 0;
  flex: 0 0 auto;
  width: clamp(260px, 32vw, 360px);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  background: var(--surface-page);
  border: 1px solid var(--border-hairline-muted);
  padding: 30px;
}
/* At 478px and below, cards go full-width (viewport minus the 10px gutter each side) instead
   of the clamped desktop/tablet size — the sticky stage's own padding matches that same 10px
   so the card fits exactly, no clipping against .why-cards' overflow-x:hidden. The pile-up
   overlap on scroll (js/main.js setWhyCardStagger) measures each card's real rendered width,
   so it keeps working unchanged at the new size. */
@media (max-width: 478px) {
  .why-us-pin__sticky { padding-left: 10px; padding-right: 10px; }
  .why-card { width: calc(100vw - 20px); }
}
.why-card--accent {
  background: var(--accent);
  border-color: var(--accent);
}
.why-card--accent .why-card__badge {
  color: var(--ink-inverse);
}
.why-card--accent .why-card__title,
.why-card--accent .why-card__text {
  color: var(--ink-inverse);
}
/* Coverflow mode — js/main.js adds .is-coverflow and from then on places every card itself
   (translate/rotate in 3D on this track, which becomes the perspective stage) instead of the
   flex row + sticky pile-up above. Track height is set in JS to the card height. */
.why-cards.is-coverflow {
  display: block;
  position: relative;
  overflow: visible;
  perspective: 1400px;
  perspective-origin: 40% 40%;
}
.why-cards.is-coverflow .why-card {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform;
}
/* dims the cards folded into the stack, so the front one reads as the current one */
.why-cards.is-coverflow .why-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink-primary);
  opacity: var(--shade, 0);
  pointer-events: none;
}
/* Number sits at the card's own top-left (30px padding), then the title 20px below it. */
.why-card__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.why-card__badge {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--accent);
}
.why-card__title {
  color: var(--ink-primary);
}
/* Pushed to the card's own bottom edge — number+title stay up top in .why-card__content. */
.why-card__text {
  margin-top: auto;
  color: var(--ink-secondary);
}

/* ============ Not an AI approximation ============ */
/* Text + button pair, on the same guide as the statement above it (max-width 960 +
   margin-left:auto) rather than the block's own left edge. */
.quote-block__cta-row {
  /* explicit width (not just max-width) — as a flex item, an auto cross-margin otherwise
     suppresses stretch and the row shrinks to its own content instead of the shared guide */
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-top: 50px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5);
}
.quote-block__cta-text {
  max-width: 220px;
  color: var(--ink-inverse-muted);
}
/* Nudged right to line up with the nav links pill's own left edge above it — a fixed offset,
   not something derived from the guide math, since it's lining up against the nav's own
   padding rather than the 960px content guide. */
.quote-block__cta {
  display: flex;
  align-items: stretch;
  margin-left: 14px;
}
.quote-block__cta--standalone {
  /* same guide as the statement above it — width:100% needed alongside max-width, since a
     flex item with only an auto cross-margin doesn't stretch to it on its own */
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-top: 50px;
}
.quote-block__cta-btn {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-inverse);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: var(--space-3) var(--space-5);
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.quote-block__cta-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  background: var(--accent);
  border: 1px solid var(--accent);
  flex-shrink: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.quote-block__cta-arrow svg { width: 20px; height: 20px; transition: stroke 0.15s ease; }
/* Two-part swap: the label turns pink/white, the arrow box turns white with a pink icon —
   same pattern on every arrow button on the site (hero, quote-block, footer). */
.quote-block__cta:hover .quote-block__cta-btn { background: var(--accent); border-color: var(--accent); }
.quote-block__cta:hover .quote-block__cta-arrow { background: var(--ink-inverse); border-color: var(--ink-inverse); }
.quote-block__cta:hover .quote-block__cta-arrow svg { stroke: var(--accent); }

/* ============ Stats ============ */
/* Same large flowing size as the why-us statement (block 2) — the whole eyebrow/line/
   statement stack now reads as one consistent motif across blocks 2, 3 and this one. */
.stats__intro {
  max-width: 960px;
  margin-left: auto;
  font-family: var(--font-content);
  font-weight: 500;
  font-size: clamp(22px, 2.8vw, 36px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink-secondary);
}

/* ============ Why now / Overhead — plain statement sections ============ */
/* Same flush-left guide (padding-inline:var(--space-5) on the wrapper, max-width:960 +
   margin-left:auto on the text) as the why-us/quote-block/stats statements above. */
.statement__inner {
  display: flex;
  flex-direction: column;
  padding-inline: var(--space-5);
}
.statement__body {
  max-width: 960px;
  margin-left: auto;
  color: var(--ink-primary);
}
.statement__body strong {
  color: var(--accent);
  font-weight: 600;
}

/* ============ Process — vertical scroll-fill timeline ============ */
/* Own set of classes, not a re-skin of .indexed-row* — Solutions still uses that component
   as a horizontal table, so touching it here would leak into block 04. Three columns —
   title, line, content — on the same guide as the rest of the page: .process-steps itself
   carries the max-width:960/margin-left:auto guide, and the grid's own columns start right
   at its left edge (no extra indent before the title). */
.process-steps {
  max-width: 960px;
  margin-left: auto;
}
.process-steps__list {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, 240px) 10px 1fr;
  column-gap: var(--space-6);
  row-gap: 50px;
}
/* Track sits as an absolutely-positioned overlay inside the grid (an absolutely-positioned
   grid child drops out of auto-placement entirely, so it can't collide with the title/square/
   desc cells) rather than a grid item of its own — centered on the square column exactly. */
.process-steps__track {
  /* left/top/height are all set from JS (measured off the first/last square's own rendered
     position) rather than top:0/bottom:0 on the list — the line should run exactly from the
     first square's center to the last square's center, not spill past into the padding above
     or below them. The title column is also a minmax(), so its resolved width (and so the
     square's x) isn't something a fixed calc() can predict at every viewport width either. */
  position: absolute;
  width: 2px;
  background: var(--border-hairline-muted);
}
.process-steps__track-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
}
.process-step { display: contents; }
.process-step__title {
  grid-column: 1;
  color: var(--ink-primary);
}
.process-step__square {
  grid-column: 2;
  justify-self: center;
  align-self: start;
  margin-top: 8px;
  width: 10px;
  height: 10px;
  background: var(--surface-page);
  border: 1.5px solid var(--border-hairline-muted);
  position: relative;
  z-index: 1;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.process-step.is-filled .process-step__square {
  background: var(--accent);
  border-color: var(--accent);
}
.process-step__desc {
  grid-column: 3;
  color: var(--ink-secondary);
}

/* ============ Responsive section rhythm ============ */
/* iPad Mini portrait (768px) still wants the 150px mobile rhythm, not the 180px tablet one
   below — so that band extends up through 768, and the 180px tablet band starts right after
   it at 769, instead of splitting at 720 like the rest of the mobile rules further down. */
@media (min-width: 721px) and (max-width: 768px) {
  .section:not(.section--tight) { padding-block: 75px; }
}
/* Phones/small tablets: 100px of white between the dark hero and "01 / 09" — the section's top
   padding here plus the pinned stage's own 80px inner padding (which can't shrink: it keeps
   the text clear of the fixed nav once the stage pins to the top of the screen). */
@media (max-width: 768px) {
  #why-us.section { padding-top: 20px; }
}
/* Tablet band (iPad Pro portrait and similar, 769-1024px — above the 768px band above, below
   the desktop default of 100+100=200px): 90px top + 90px bottom = 180px between blocks. */
@media (min-width: 769px) and (max-width: 1024px) {
  /* :not(.section--tight) — trust-bar opts out of the shared block rhythm on purpose
     (.section--tight's own, deliberately smaller padding-block), so it shouldn't get
     clobbered by this override the way plain .section same-specificity cascade would. */
  .section:not(.section--tight) { padding-block: 90px; }
}
@media (max-width: 720px) {
  /* 75px top + 75px bottom on adjoining sections = 150px between blocks.
     :not(.section--tight) for the same reason as the tablet rule above — trust-bar keeps
     its own smaller padding-block instead of being pulled up to the shared rhythm. */
  .section:not(.section--tight) { padding-block: 75px; }
  .hero { padding-block: var(--space-8); }
  .section__header { margin-bottom: var(--space-7); }
  /* Line to the statement text below it (all blocks): 30px, down from 80. */
  .section__rule { margin-bottom: 30px; }
  /* Process steps: desktop's 3-column row (title | track | desc) doesn't fit a phone width —
     restacked so the track sits flush at the left gutter, and each step's title/desc stack
     vertically to its right instead of sitting side by side. */
  .process-steps__list {
    display: flex;
    flex-direction: column;
    gap: 50px;
  }
  .process-step {
    display: grid;
    grid-template-columns: 10px 1fr;
    column-gap: var(--space-5);
  }
  .process-step__square {
    grid-column: 1;
    grid-row: 1 / span 2;
    justify-self: start;
  }
  .process-step__title { grid-column: 2; grid-row: 1; }
  .process-step__desc { grid-column: 2; grid-row: 2; margin-top: 8px; }
  /* Legal pages open straight into their eyebrow/title (no hero above to push past the
     fixed nav) — the section's own reduced mobile padding-top isn't enough clearance, so
     the eyebrow sits behind the nav bar. Bump just the top padding. */
  .legal-page { padding-top: 130px; }

  /* Mobile page margins: 10px edge-to-edge instead of the desktop/tablet 24px guide, on
     every wrapper that carries the shared side gutter (component-internal padding like
     button/chip padding is untouched). */
  .nav { top: 10px; left: 10px; right: 10px; }
  .container,
  .hero__content,
  .statement__inner,
  .solutions__header,
  .solutions__rows-wrap,
  .process__header,
  .process-steps-wrap,
  .quote-block__inner,
  .stats__header,
  .stats__grid-row,
  .faq__header,
  .faq-list-wrap,
  .legal-page__container,
  .contact-form__header,
  .contact-form__inner,
  .footer__inner {
    padding-inline: 10px;
  }
  /* .footer__wordmark still bleeds past .footer__inner's own padding to land a fixed 20px from
     the viewport edge — its calc() assumes a var(--space-5) (24px) parent padding, so with the
     10px mobile gutter above it needs the matching 10px-based version. */
  .footer__wordmark {
    margin-inline: 10px;
    width: calc(100% - 20px);
  }
  /* .footer__divider instead just fills the already-10px-padded .footer__inner — full width
     minus the shared 10px mobile gutter on each side, same as everything else on mobile. */
  .footer__divider {
    margin-inline: 0;
    width: 100%;
  }

  /* Hero headline: bigger and bolder on mobile now that the margins freed up extra width.
     Letter-spacing loosened too — the desktop -2px tracking reads fine at 84px, but at
     mobile's smaller size it was crowding the letters together. */
  .hero__headline { font-size: clamp(40px, 10.5vw, 84px); letter-spacing: -0.5px; }

  /* Eyebrow: forced onto its own clean 2-line break (rather than whatever the natural wrap
     lands on) and net 10px closer to the nav — on top of its own existing 5px offset (raised
     30px, then lowered back 20px). */
  .hero__eyebrow-break { display: block; }
  .hero__eyebrow { top: -5px; }

  /* Same on-load entrance as desktop, just toned down — a shorter rise so it stays subtle
     on the smaller screen. */
  .hero__content { --hero-fade-distance: 10px; }

  /* Arrow buttons go full-width on mobile (edge to edge on the 10px gutter above) — the
     label grows to fill the row, the arrow box stays a fixed 50px square. */
  .hero__cta,
  .quote-block__cta {
    width: 100%;
    margin-left: 0;
  }
  .hero__cta-btn,
  .quote-block__cta-btn {
    flex: 1;
    justify-content: center;
    white-space: normal;
  }
  .hero__cta-arrow,
  .quote-block__cta-arrow {
    width: 50px;
  }
}

/* Raise the headline/subhead/CTA block 20px higher on mobile — on top of the min-height:700
   rule above (60px down from dead-center), so this lands it at 40px instead of 60px. Gated
   the same as that rule so short phones (no 60px offset to begin with) are left alone. */
@media (max-width: 720px) and (min-height: 700px) {
  .hero__content { transform: translateY(40px); }
}

/* Up to 1100px there's no room for the particle word beside the headline, so the content sits
   at the top (just under the fixed nav) and the word gets its own band below the CTA —
   padding-bottom reserves that band, js/main.js places the word inside it. Last in the file
   so it wins over the translateY offsets above. */
@media (max-width: 1100px) {
  .hero {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    padding-block: 0;
  }
  .hero__content {
    height: auto;
    min-height: inherit;
    justify-content: flex-start;
    padding-top: 130px;
    padding-bottom: 260px;
    transform: none;
  }
}
@media (max-width: 720px) {
  .hero__content { padding-top: 140px; padding-bottom: 230px; }
}