/* ==========================================================================
   Motion layer + the hero/section revisions that go with it.

   Split from pages.css because it belongs to GSAP and Lenis: if either is
   removed, this file goes with them and nothing else has to be untangled.
   ========================================================================== */

/* ── Lenis ──────────────────────────────────────────────────────────── */
/* Lenis drives scrolling itself; the browser's own smooth behaviour fights
   it, and `overscroll-behavior` stops a flick chaining to the page behind. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ── Headline lines ─────────────────────────────────────────────────── */
/* Each line masks its own inner span, so the text slides up from behind a
   clean edge rather than fading in place. */
.gsap-line { display: block; overflow: hidden; }
.gsap-line__inner { display: block; will-change: transform; }

/* ══════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════ */

/* The lede was set at --fs-lg and ran four lines, crowding everything under
   it. A step down buys the block room to breathe without losing legibility -
   it is still above the 16px floor at every width. */
.hero__lede {
  font-size: clamp(0.98rem, 0.35vw + 0.9rem, 1.08rem);
  line-height: 1.62;
  max-width: 54ch;
  color: var(--text-muted);
}

/* "Shipping" and the rotating word are now one row on a shared centre line.
   Before, the label sat on the text baseline while the rotator ran at 1.35em,
   so the two never lined up at any width. */
.hero__ticker {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-block: var(--sp-4) var(--sp-4);
  min-width: 0;
}
.hero__ticker-label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-dim);
  flex-shrink: 0;
  /* Nudge for the mono cap-height, which sits high against the display face. */
  transform: translateY(0.5px);
}
.hero__ticker .rotator {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.6vw + 0.75rem, 1.6rem);
  line-height: 1.15;
  height: 1.15em;
  align-items: center;
}
.hero__ticker .rotator > span { align-content: center; }

/* ── Analytics panel: a scatter with a fitted line ──────────────────── */
.scatter {
  position: relative;
  flex: 1;
  margin-top: 8px;
  min-height: 0;
}
.scatter__axis { position: absolute; background: rgba(255, 255, 255, 0.14); }
.scatter__axis--y { left: 0; top: 0; bottom: 0; width: 1px; }
.scatter__axis--x { left: 0; right: 0; bottom: 0; height: 1px; }
.scatter__dot {
  position: absolute;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand-300);
  box-shadow: 0 0 8px rgba(75, 134, 212, 0.7);
  translate: -50% 50%;
  animation: scatter-pop 520ms var(--ease-out) backwards;
}
.scatter__dot:nth-child(3)  { animation-delay: 0.30s; }
.scatter__dot:nth-child(4)  { animation-delay: 0.36s; }
.scatter__dot:nth-child(5)  { animation-delay: 0.42s; }
.scatter__dot:nth-child(6)  { animation-delay: 0.48s; }
.scatter__dot:nth-child(7)  { animation-delay: 0.54s; }
.scatter__dot:nth-child(8)  { animation-delay: 0.60s; }
.scatter__dot:nth-child(9)  { animation-delay: 0.66s; }
.scatter__dot:nth-child(10) { animation-delay: 0.72s; }
.scatter__dot:nth-child(11) { animation-delay: 0.78s; }
.scatter__dot:nth-child(12) { animation-delay: 0.84s; }
@keyframes scatter-pop { from { opacity: 0; scale: 0.2; } }

/* The regression line, drawn after the points it fits. */
.scatter__fit {
  position: absolute; left: 4%; right: 4%; bottom: 22%;
  height: 2px; border-radius: 2px;
  background: var(--grad-accent);
  transform-origin: left center;
  rotate: -19deg;
  animation: fit-draw 900ms var(--ease-out) 0.9s backwards;
}
@keyframes fit-draw { from { scale: 0 1; opacity: 0; } }

.chart-foot { display: flex; gap: 6px; margin-top: 8px; }
.chart-chip {
  font-family: var(--font-mono); font-size: 0.5rem;
  letter-spacing: 0.08em; color: var(--text-dim);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 2px 7px;
}

/* ── Graphics-design panel ──────────────────────────────────────────── */
.design-body { display: flex; gap: 6px; padding: 8px 10px 0; height: calc(100% - 33px); }

.design-tools { display: grid; gap: 5px; align-content: start; flex-shrink: 0; padding-top: 2px; }
.design-tool {
  width: 13px; height: 13px; border-radius: 3px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
}
.design-tool--is-on { background: var(--accent-500); border-color: transparent; }
/* Each tool is a different silhouette, so the rail reads as tools rather
   than as four identical squares. */
.design-tool:nth-child(2) { border-radius: 50%; }
.design-tool:nth-child(3) { clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; }
.design-tool:nth-child(4) { border-radius: 3px 3px 3px 50%; }

.design-canvas {
  position: relative; flex: 1; min-width: 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}
.design-canvas__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 10px 10px;
}

/* Two forms overlapping into one mark. `mix-blend-mode` on the second gives
   the intersection its own colour, which is what a designer would be looking
   at while combining shapes. */
.design-shape { position: absolute; }
.design-shape--circle {
  width: 40%; aspect-ratio: 1; left: 16%; top: 22%;
  border-radius: 50%;
  background: var(--brand-400);
  animation: shape-in 700ms var(--ease-spring) 0.4s backwards;
}
.design-shape--square {
  width: 34%; aspect-ratio: 1; left: 36%; top: 34%;
  border-radius: 5px;
  background: var(--accent-500);
  mix-blend-mode: screen;
  animation: shape-in 700ms var(--ease-spring) 0.62s backwards;
}
@keyframes shape-in { from { opacity: 0; scale: 0.5; } }

/* The selection marquee, drawn around the square. */
.design-select {
  position: absolute; left: 33%; top: 31%;
  width: 40%; aspect-ratio: 1;
  border: 1px solid var(--accent-400);
  opacity: 0;
  animation: select-in 400ms var(--ease-out) 1.05s forwards;
}
.design-select i {
  position: absolute;
  width: 5px; height: 5px;
  background: var(--bg-elevated);
  border: 1px solid var(--accent-400);
}
@keyframes select-in { to { opacity: 1; } }

/* A type specimen, because graphics design is as much type as shape. */
.design-type {
  position: absolute; right: 7%; bottom: 6%;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.5rem; line-height: 1;
  color: transparent;
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text;
  opacity: 0;
  animation: select-in 500ms var(--ease-out) 1.35s forwards;
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE HERO
   Its own composition, not the desktop one shrunk.
   ══════════════════════════════════════════════════════════════════════ */
/* ── Aurora: the phone hero background ──────────────────────────────── */
/* ── The phone hero background ──────────────────────────────────────
   Graph paper with one mark drawn on it at a time: a column grid, a bezier
   curve, a fitted scatter. It is the studio's three disciplines rather than
   a decorative pattern, which is the whole reason it does not read as stock.

   Two colours: ink for structure, amber for the thing being worked on. A
   third hue is what makes a background look generated.

   Every animated property here is transform or opacity, so the background
   composites and never repaints. The obvious version of this - drawing each
   mark on with stroke-dashoffset - costs a paint per frame on a phone. */

/* The paper. Static: motion belongs to the marks, not the sheet. */

/* One warm source, low and off to one side, so the sheet has a direction to
   it and the amber marks have something to sit in. */


/* Dark theme: the paper carries further and the marks need less weight. */


@media (max-width: 820px) {
  /* Three overlapping panels, a desk and two figures do not survive a 375px
     column — and on a phone they were the reason the hero ran to 1.4 screens
     with nothing to look at until you scrolled. */
  .scene--desktop { display: none !important; }
  .hero__canvas { display: none; }


  /* One screen exactly. dvh rather than svh: svh is the height with the
     browser chrome showing, so the hero fell short of the fold once the
     address bar collapsed on scroll. min-height rather than height so a
     small phone in landscape lengthens the section instead of clipping
     the copy. */
  .hero { min-height: 100dvh; display: grid; align-items: center; }
  .hero__inner { position: relative; z-index: 2; }

  /* Ranged left, like the rest of the site. Centred copy on a phone forces
     the eye back to a new starting point on every line, and a centred
     paragraph of this length is the hardest thing on the page to read. */
  .hero__inner > div { text-align: left; }
  /* 1.16 leading is fine for a one-line headline and wrong for this one: at
     three lines the descenders of "builders." overhang the box by 5px and
     land 11px off the ticker, which reads as the text being cut. */
  .hero h1 { max-width: 14ch; line-height: 1.22; margin-block-end: 1.35rem; }
  .hero__ticker { justify-content: flex-start; }
  .hero__where { justify-content: flex-start; }
  .hero__stats { justify-items: start; text-align: left; }

  /* The lede is support, not a headline. At the previous size it competed
     with the h1 above it and ran to seven lines. */
  .hero__lede {
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 38ch;
  }

  /* A single full-width primary action, with the secondary reading as a link
     underneath it rather than as a second, equal button. */
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn--ghost {
    border-color: transparent;
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  /* Rises with the scroll, so the hero has depth without a heavy library. */
  .hero__inner { will-change: transform; }
}

/* Short phones — an iPhone SE is 667px tall, and a 640px browser viewport is
   common once the chrome is counted. The copy needs 689px at the sizes above,
   so on those screens the hero ran past the fold and "one screen" stopped
   being true. Everything below buys back that overflow without touching the
   headline, which is the one element that must not shrink. */
@media (max-width: 820px) and (max-height: 700px) {
  .hero { padding-block: 1rem 1.15rem; }
  .hero__badge { display: none; }        /* decorative; the h1 says it better */
  /* Pays back the leading added above, which this screen cannot afford. */
  .hero h1 { font-size: 1.95rem; margin-block: 0.5rem 1rem; }

  .hero__lede {
    font-size: 0.9rem;
    line-height: 1.5;
    /* Three lines, then an ellipsis. The lede supports the headline; on a
       screen this short, six lines of it is the whole fold. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .hero__cta { gap: 0.55rem; }
  .hero__stats {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    /* Left at the inherited 2x2. There are four stats, so forcing three
       columns produced two rows of a taller cell and cost 41px rather than
       saving any. */
    gap: 0.5rem 1.25rem;
  }
  .hero__stat strong { font-size: 1.1rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   GETTING STARTED
   ══════════════════════════════════════════════════════════════════════ */
.step {
  position: relative;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.step__num {
  transition: transform var(--dur) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .step:hover { transform: translateY(-3px); }
}

/* Each step arrives in turn rather than the whole list at once, so the
   sequence reads as a path. `backwards` holds the from-state through the
   delay; without it every step flashes at its final position first. */
.steps--flow .step {
  animation: step-in 560ms var(--ease-out) backwards;
}
.tab-panel.is-active .steps--flow .step:nth-child(1) { animation-delay: 0.05s; }
.tab-panel.is-active .steps--flow .step:nth-child(2) { animation-delay: 0.13s; }
.tab-panel.is-active .steps--flow .step:nth-child(3) { animation-delay: 0.21s; }
.tab-panel.is-active .steps--flow .step:nth-child(4) { animation-delay: 0.29s; }
.tab-panel.is-active .steps--flow .step:nth-child(n+5) { animation-delay: 0.37s; }
@keyframes step-in { from { opacity: 0; transform: translateY(14px); } }

/* The numbered marker leads the step it belongs to. */
.steps--flow .step__num { animation: num-in 520ms var(--ease-spring) backwards; }
@keyframes num-in { from { opacity: 0; scale: 0.6; } }

/* ══════════════════════════════════════════════════════════════════════
   NEXT STEP / CTA BAND
   ══════════════════════════════════════════════════════════════════════ */
/* This band paints a deep brand gradient in both themes, so its text cannot
   inherit --text: on the light theme that is navy on navy, which is why
   "Let us build something that works." was unreadable. */
.cta-band,
.cta-band h2,
.cta-band .lede,
.cta-band p { color: #eef4ff; }
.cta-band .eyebrow { color: var(--accent-400); }
.cta-band .lede { color: rgba(238, 244, 255, 0.82); }

/* Same trap, one level down: .btn--ghost sets --btn-fg to var(--text), which
   on the light theme is the same navy the band is painted in — so "Talk to
   us" was navy on navy, invisible. The band supplies its own button colours
   rather than inheriting the page's. */
.cta-band .btn--ghost {
  --btn-fg: #ffffff;
  --btn-border: rgba(255, 255, 255, 0.34);
  --btn-bg: transparent;
}
.cta-band .btn--ghost:hover {
  --btn-fg: #ffffff;
  --btn-border: rgba(255, 255, 255, 0.72);
  --btn-bg: rgba(255, 255, 255, 0.08);
}

/* ══════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* One mark, held. Cycling three of them is motion by another name. */
  .scatter__dot, .scatter__fit, .design-shape, .design-select, .design-type {
    animation: none;
    opacity: 1;
    stroke-dashoffset: 0;
    scale: 1;
  }
  .steps--flow .step, .steps--flow .step__num { animation: none; opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════
   NAVIGATION
   ══════════════════════════════════════════════════════════════════════ */

/* Desktop: the links sit centred in the bar rather than pushed left against
   the logo. Three columns with equal outer tracks keeps the centre column
   optically centred no matter how wide the logo or the actions grow — a
   flex row with `margin-inline: auto` would drift as either side changed. */
@media (min-width: 1021px) {
  .nav__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-4);
  }
  .nav__links { justify-self: center; justify-content: center; gap: 0.15rem; }
  .nav__actions { justify-self: end; margin-inline-start: 0; justify-content: flex-end; }
}

/* The bar reads over whatever scrolls beneath it, so it needs its own depth.
   Dark mode had a flat translucent fill with no blur, which turned to mud
   over the hero gradient. */
.nav {
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
}
[data-theme="dark"] .nav {
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-block-end-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .nav.is-stuck {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-block-end-color: var(--line);
  box-shadow: 0 12px 34px -28px rgba(0, 0, 0, 0.9);
}

/* The drawer gets the same treatment, so the page behind reads as *behind*
   rather than simply covered. */
[data-theme="dark"] .drawer {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(26px);
  -webkit-backdrop-filter: saturate(180%) blur(26px);
}

/* ── Mobile drawer links ────────────────────────────────────────────── */
/* A phone has no hover, so the feedback has to be on press. The row fills
   from the leading edge and the arrow steps across — both read instantly
   under a thumb. */
.drawer__link {
  position: relative;
  isolation: isolate;
  padding-inline: 0.75rem;
  border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease-out),
              padding-inline-start var(--dur-fast) var(--ease-out);
}
.drawer__link::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: var(--surface);
  transform-origin: left center;
  scale: 0 1;
  transition: scale var(--dur-fast) var(--ease-out);
}
.drawer__link:active::before,
.drawer__link:focus-visible::before { scale: 1 1; }
.drawer__link:active { color: var(--accent-ink); padding-inline-start: 1.1rem; }
.drawer__link svg { transition: transform var(--dur-fast) var(--ease-out); }
.drawer__link:active svg { transform: translateX(4px); }

@media (hover: hover) and (pointer: fine) {
  .drawer__link:hover::before { scale: 1 1; }
  .drawer__link:hover { color: var(--accent-ink); padding-inline-start: 1.1rem; }
  .drawer__link:hover svg { transform: translateX(4px); }
}

/* The account buttons are the drawer's purpose; give them room to breathe
   now that the contact block no longer competes for the space. */
@media (max-width: 1020px) {
  .drawer .stack .btn { margin-block-start: 0.15rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   FOOTER — two columns on a phone
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* One column per row made the footer a very long scroll for four short
     lists. Two reads as a footer rather than as more page. */
  .footer__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6) var(--sp-5);
  }
  /* The brand column keeps the full width above the lists. */
  .footer__grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .footer__grid { gap: var(--sp-5) var(--sp-4); }
  .footer__link { font-size: var(--fs-xs); }
}

/* ══════════════════════════════════════════════════════════════════════
   "PREFER THE ROOM?" CARD
   ══════════════════════════════════════════════════════════════════════ */
.room-card {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.room-card__copy { min-width: 0; }
.room-card__copy p { max-width: 52ch; }
.room-card__cta { white-space: nowrap; }

@media (max-width: 760px) {
  /* Stacked, with the address given its full width and the button spanning
     the card — a tap target squeezed into a narrow right-hand column is the
     worst of both. */
  .room-card { grid-template-columns: 1fr; text-align: start; }
  .room-card__cta { width: 100%; white-space: normal; }
}

/* ══════════════════════════════════════════════════════════════════════
   MARQUEE
   Kept on mobile deliberately — it is the one place the four practice areas
   and the payment terms are stated together, and it costs one composited
   transform.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 620px) {
  .marquee { padding-block: 0.85rem; }
  .marquee__track { gap: 2.25rem; }
  .marquee__track > * { font-size: var(--fs-xs); }
}

/* ── The band's own form controls ───────────────────────────────────── */
/* The band paints a deep navy gradient in both themes, but .input follows the
   theme: in light mode that is navy text on a near-transparent fill, i.e.
   navy on navy, and you cannot read what you typed. Controls inside the band
   are dark-mode controls whatever the page theme says. */
.cta-band .input,
.cta-band .select,
.cta-band .textarea {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}
.cta-band .input::placeholder { color: rgba(255, 255, 255, 0.55); }
.cta-band .input:hover { border-color: rgba(255, 255, 255, 0.38); }
.cta-band .input:focus {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--accent-400);
  box-shadow: 0 0 0 3px rgba(242, 178, 51, 0.3);
  outline: none;
}
/* Chrome's autofill repaints the field with its own colours and ignores
   `background`; a large inset shadow is the only thing that overrides it. */
.cta-band .input:-webkit-autofill,
.cta-band .input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  -webkit-box-shadow: 0 0 0 60px #12305f inset;
  caret-color: #ffffff;
}

/* ══════════════════════════════════════════════════════════════════════
   CLOSING BAND ON A PHONE
   It ran to most of a screen: two full-size buttons, a wide lede, a form row
   and a footnote, each with desktop spacing.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .cta-band { padding: clamp(1.5rem, 6vw, 2rem) clamp(1.15rem, 5vw, 1.75rem); }
  .cta-band h2 { font-size: clamp(1.5rem, 6vw, 1.9rem); }
  .cta-band .lede { font-size: var(--fs-sm); max-width: 32ch; }

  /* One primary action; "Talk to us" becomes a quiet link under it rather
     than a second button of equal weight. */
  .cta-band .row { flex-direction: column; align-items: stretch; gap: 0.6rem; margin-top: var(--sp-5); }
  .cta-band .row .btn { width: 100%; }
  .cta-band .row .btn--ghost {
    --btn-border: transparent;
    --btn-bg: transparent;
    text-decoration: underline; text-underline-offset: 4px;
    padding-block: 0.5rem;
  }

  /* The form stacks; a 220px min-width input beside a button was forcing a
     horizontal squeeze at 375px. */
  .cta-band form.row { margin-top: var(--sp-6) !important; gap: 0.55rem; }
  .cta-band form.row .input { min-width: 0 !important; flex: 1 1 100% !important; }
  .cta-band form.row .btn { width: 100%; }
  .cta-band > p.tiny { font-size: var(--fs-2xs); max-width: 34ch; margin-inline: auto; }
}

/* ── Word-level reveals ─────────────────────────────────────────────── */
/* Each word masks its own inner span. `inline-block` on the outer is what
   lets overflow clip per word; the inner is what actually moves. */
.gsap-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Descenders (g, y, p) get clipped by an overflow box sitting exactly on
     the baseline, so the box is given a little room below it. */
  padding-block-end: 0.12em;
  margin-block-end: -0.12em;
}
.gsap-word__inner { display: inline-block; will-change: transform; }

/* ── Scroll-lit eyebrow ─────────────────────────────────────────────── */
/* A gradient clipped to the text, whose size is driven by scroll position:
   the label fills with accent as its section arrives. Falls back to a plain
   accent label wherever background-clip is unsupported. */
.eyebrow[data-gsap="wipe"] {
  background-image: linear-gradient(90deg, var(--accent-500), var(--accent-500));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--text-dim);
  transition: none;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .eyebrow[data-gsap="wipe"] { color: var(--accent-ink); background: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gsap-word, .gsap-word__inner { overflow: visible; transform: none; }
  .eyebrow[data-gsap="wipe"] { background-size: 100% 100%; }
}


/* ══════════════════════════════════════════════════════════════════════
   SECTION LEDES ON A PHONE
   Set at the desktop size these run to five or six lines under a heading
   that is only two, so the supporting sentence outweighs the point it is
   supporting. Smaller, tighter, and capped at a comfortable measure.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .section-head .lede {
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 40ch;
  }
}