/* ============================================================
   Project Wildflower — static replica of the original React site
   Translated 1:1 from Tailwind classes + inline styles.
   Dark mode default; [data-theme="light"] mirrors isDarkMode=false.
   ============================================================ */

/* ============================================================
   Site-specific properties NOT in the token system (radial gradients:
   DTCG's gradient type has no radial position). All other custom
   properties come from tokens/dark.css, tokens/light.css, tokens/compat.css.
   ============================================================ */
:root {
  /* Mirrors effects.backdrop.blur in the design system's tokens.json (12px,
     its only blur value). The token build here emits colors/dimensions but
     not effects, so it is declared locally; retire this line when it does. */
  --backdrop-blur: 12px;

  --grad-a: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.1) 0%, transparent 50%);
  --grad-b: radial-gradient(circle at 70% 80%, rgba(255,255,255,0.08) 0%, transparent 50%);
  --grad-c: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.1) 0%, transparent 50%);
  --grad-d: radial-gradient(circle at 30% 70%, rgba(255,255,255,0.08) 0%, transparent 50%);
}

[data-theme="light"] {
  --grad-a: radial-gradient(circle at 30% 20%, rgba(0,0,0,0.05) 0%, transparent 50%);
  --grad-b: radial-gradient(circle at 70% 80%, rgba(0,0,0,0.04) 0%, transparent 50%);
  --grad-c: radial-gradient(circle at 70% 30%, rgba(0,0,0,0.05) 0%, transparent 50%);
  --grad-d: radial-gradient(circle at 30% 70%, rgba(0,0,0,0.04) 0%, transparent 50%);
}


/* ---------- Accessibility utilities ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background-color: var(--fg);
  color: var(--bg);
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

/* ---------- Base ---------- */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Bitter', serif;
  background-color: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  line-height: 1.5;
  transition: background-color 0.5s, color 0.5s;
  -webkit-font-smoothing: antialiased;
}

img { display: block; }
a { color: inherit; }
button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
  border-radius: 6px;
}

.hidden-seo { display: none !important; }

/* ---------- Background video (both themes, two treatments) ---------- */

.bg-video-wrap {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  display: block;
}
.bg-video-wrap video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%) scale(1.5);
  /* Dark theme (the default). Partial grayscale rather than full: at 1 the
     footage went flat, so this pulls most of the saturation out of the warm
     stamens and green leaves while leaving enough that the blossoms still
     read as blossoms. 0.14 over the black page puts the brightest pixel at
     ~#242424, holding white body copy at ~15:1 (AAA).
     blur() is doing the quietening, not opacity: the footage was busy from
     the density of small blossoms, and softening that detail settles it
     without dimming the field further or muting the colour again. The video
     is scaled past the viewport on every side, so the blurred edge is off
     screen. */
  filter: grayscale(0.5) blur(1.5px);
  opacity: 0.14;
}

/* Light-theme treatment of the same footage — a second version, not a second
   file. The source is white blossoms on pure black, which is why it only ever
   worked on the dark page: dropped on white it would sit there as a black
   rectangle. Inverting flips it to dark blossoms on pure white, and since
   --surface-page is #ffffff in light mode, that field lands exactly on the
   page colour and disappears, leaving only the blossoms.
   grayscale() runs FIRST because inverting colour would push the warm stamens
   to blue and the green leaves to magenta; neutralising first keeps the
   inverted result grey. Opacity is well below dark mode's 0.14 — dark marks
   on white read heavier than light marks on black at equal alpha. Opacity is
   the right knob for this: the inverted background is pure white, and white
   at any alpha over a white page is still white, so lowering it fades the
   blossoms without tinting the page.
   0.07 puts the darkest blossom pixel at ~#ededed — light enough that the
   page still reads as a white page, dark enough that the blossoms are
   actually there. 0.04 was tried and washed out to nothing. Contrast is not
   the constraint at either value: even the lightest text on the page,
   --text-secondary over that darkest pixel, clears AA with room to spare, so
   this is a presence setting, not a compliance floor. */
[data-theme="light"] .bg-video-wrap video {
  filter: grayscale(1) invert(1);
  opacity: 0.07;
}

.page { position: relative; z-index: 10; }

/* ---------- Header ---------- */

/* Keeps --header-scrim rather than the --panel-08 used on the panels: this
   is a legibility wash for the logo and nav, and 30% is what does that job.
   The blur is the part shared with .stat-split / .score-row li / .ghost-btn. */
.site-header {
  position: relative;
  z-index: 50;
  background: var(--header-scrim);
  backdrop-filter: blur(var(--backdrop-blur));
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
}
.site-header .inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0.625rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .site-header .inner { padding: 0.75rem 2rem; }
}

.brand {
  flex-shrink: 0;
  margin: 0 auto;
  display: block;
  text-decoration: none;
  border-radius: 6px;
}
@media (min-width: 768px) { .brand { margin: 0; } }
.brand .logo-row { display: flex; align-items: center; gap: 0.875rem; transition: transform 0.15s; }
.brand:hover .logo-row { transform: scale(1.05); }
.brand img { height: 44px; width: auto; display: block; }
@media (min-width: 768px) { .brand img { height: 40px; } }
.brand .brand-name { font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.025em; font-weight: 300; }

.logo-light { display: none; }
[data-theme="light"] .logo-dark { display: none; }
[data-theme="light"] .logo-light { display: block; }

.site-nav { display: none; }
@media (min-width: 768px) {
  .site-nav {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    font-size: 1.125rem;
    letter-spacing: 0.025em;
  }
}
.site-nav a, .site-nav button {
  font-size: inherit;
  text-decoration: none;
  transition: opacity 0.15s;
  border-radius: 6px;
}
.site-nav a:hover, .site-nav button:hover { opacity: 0.5; }

/* Theme toggle removed — theme now follows the visitor's OS setting
   automatically (see script.js). No manual control needed. */

/* ---------- Background video pause control ---------- */

/* Matches .theme-toggle sizing and opacity so the two controls read as a pair. */
.video-toggle {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 50;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background-color: var(--fg);
  color: var(--bg);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.video-toggle svg { width: 18px; height: 18px; }
.video-toggle:hover { transform: scale(1.1); }
.video-toggle .icon-play { display: none; }
.video-toggle[aria-pressed="true"] .icon-pause { display: none; }
.video-toggle[aria-pressed="true"] .icon-play { display: block; }

/* The video toggle starts invisible; script.js adds .is-revealed while the
   video is actually playing. It stays in the tab order while hidden and
   reveals on focus (the skip-link pattern), so it is never stranded from the
   keyboard. Resting 0.6 keeps the icon visually softer while still usable. */
.video-toggle {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease, transform 0.15s ease;
}
.video-toggle.is-revealed {
  opacity: 0.6;
  pointer-events: auto;
}
.video-toggle.is-revealed:hover,
.video-toggle:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .video-toggle { transition: none; }
}

/* ---------- Shared decorative pieces ---------- */

.overline-row {
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.overline-row p { text-align: center; }
/* The discipline list is wider than a short kicker; on very narrow phones
   let the flanking rules shrink so the words keep breathing room. */
@media (max-width: 479px) {
  .overline-row { gap: 0.6rem; }
  .overline-row .line { width: 1.5rem; }
  .overline-row p { letter-spacing: 0.18em; }
}
.overline-row .line {
  height: 1px;
  width: 3rem;
  background-color: var(--fg);
  opacity: 0.3;
}
@media (min-width: 768px) { .overline-row .line { width: 5rem; } }
.overline-row p {
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.62;
}
@media (min-width: 768px) { .overline-row p { font-size: 0.875rem; } }

.gradient-a, .gradient-b { position: absolute; inset: 0; }
.gradient-a { opacity: 0.4; }
.gradient-b { opacity: 0.3; }

.grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.05;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Ghost CTA button (hero, contact, forms) */
.ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid var(--border-interactive);
  border-radius: 6px;
  /* Same panel surface as .stat-split / .score-row li. The border stays
     --border-interactive, not --border-15: this one is a control, and the
     stronger edge is what marks it as pressable. */
  background-color: var(--panel-08);
  backdrop-filter: blur(var(--backdrop-blur));
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  color: var(--fg);
  text-decoration: none;
  transition: all 0.15s;
  position: relative;
  overflow: hidden;
}
.ghost-btn:hover { transform: scale(1.05); }
.ghost-btn > * { position: relative; z-index: 10; }
.ghost-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--fg);
  opacity: 0;
  transition: opacity 0.15s;
}
.ghost-btn:hover::before { opacity: 0.1; }
.ghost-btn svg { transition: transform 0.15s; }
.ghost-btn:hover svg { transform: translateX(0.25rem); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  width: 100%;
  min-height: 92vh; /* was 100vh; lets the lede's first line crest into the initial viewport */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 80px;
}
.hero .fx { position: absolute; inset: 0; z-index: 0; }
.hero .fx .gradient-a { background: var(--grad-a); }
.hero .fx .gradient-b { background: var(--grad-b); }
.hero .content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
}
@media (min-width: 768px) { .hero .content { padding: 0 2rem; } }

.hero h1 {
  font-size: 2.25rem;
  line-height: 1.25;
  margin-bottom: 3rem;
  letter-spacing: -0.025em;
  font-weight: 400; /* was 300 (2026-08-21), matches typography.display token */
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) { .hero h1 { font-size: 3rem; } }
@media (min-width: 1024px) { .hero h1 { font-size: 3.75rem; } }

.bordered-sub {
  max-width: 42rem;
  margin: 0 auto 4rem;
}
.bordered-sub .in {
  border-top: 1px solid var(--border-15);
  border-bottom: 1px solid var(--border-15);
  padding: 1.5rem 0;
}
@media (min-width: 768px) { .bordered-sub .in { padding: 2rem 0; } }
.bordered-sub p {
  font-size: 1.125rem;
  line-height: 1.625;
  opacity: 0.7;
}
/* The * reset zeroes p margins, so a paragraph break has to be put back.
   In em, not rem: this type steps 1.125 -> 1.25 -> 1.5rem across the
   breakpoints, and the gap has to stay clear of the 1.625 leading at all
   three or the break stops reading as a break. */
.bordered-sub p + p { margin-top: 1em; }
@media (min-width: 768px) { .bordered-sub p { font-size: 1.25rem; } }

/* Hero subhead stands on its own — no rules bracketing it, and a step up in
   size so it carries the space the borders used to hold. */
.hero .bordered-sub .in {
  border-top: 0;
  border-bottom: 0;
}
.hero .bordered-sub p { font-size: 1.375rem; }
@media (min-width: 768px) { .hero .bordered-sub p { font-size: 1.625rem; } }

.hero .cta-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.scroll-hint {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  opacity: 0.62;
  animation: bounce 1s infinite;
}
.scroll-hint p {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@keyframes bounce {
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); }
  50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-hint { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- One Two Tree ---------- */

.tree-section {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem 2rem; /* top gap lives on .tree-intro */
}
@media (min-width: 768px) { .tree-section { padding: 0 2rem 2rem; } }

/* Same responsive pattern as .cs-card: an in-flow grid, copy and photo
   side by side at every width, so the copy track constrains the text. */
.tree-card {
  position: relative;
  display: grid;
  grid-template-columns: 60% 40%;
  align-items: center;
  min-height: 340px;
  overflow: hidden;
  border: 1px solid var(--border-10);
  border-radius: 6px;
  background-color: var(--tree-bg);
  text-decoration: none;
}
@media (min-width: 768px) {
  .tree-card {
    grid-template-columns: 55% 45%;
    min-height: 400px;
  }
}

.tree-photo { position: relative; height: 100%; overflow: hidden; order: 2; }
.tree-copy { order: 1; }
.tree-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.7s;
}
.tree-card:hover .tree-photo img { transform: scale(1.03); }
.tree-photo .fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--tree-bg) 0%, transparent 50%);
}

.tree-copy {
  position: relative;
  z-index: 10;
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--fg);
}
@media (min-width: 768px) { .tree-copy { padding: 2rem; } }
@media (min-width: 1024px) { .tree-copy { padding: 3rem; max-width: 36rem; } }
.tree-copy .kicker {
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  opacity: 0.62;
}
.tree-copy h2, .tree-copy h3 {
  font-size: 1.5rem;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin-bottom: 1.25rem;
  line-height: 1.25;
}
@media (min-width: 768px) { .tree-copy h2, .tree-copy h3 { font-size: 2.25rem; } }
@media (min-width: 1024px) { .tree-copy h2, .tree-copy h3 { font-size: 3rem; } }
.tree-copy .sub {
  font-size: 1rem;
  line-height: 1.625;
  margin-bottom: 0.75rem;
  color: var(--tree-sub);
}
@media (min-width: 768px) { .tree-copy .sub { font-size: 1.125rem; } }
.tree-copy .note {
  font-size: 0.875rem;
  line-height: 1.625;
  margin-bottom: 2rem;
  color: var(--tree-note);
}
.tree-copy .visit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  opacity: 0.72;
  transition: opacity 0.15s;
}
.tree-copy .visit span { letter-spacing: 0.05em; }
.tree-card:hover .visit { opacity: 1; }
.tree-card .visit svg { transition: transform 0.15s; }
.tree-card:hover .visit svg { transform: translateX(0.25rem); }

/* ---------- Digital in the AI era ---------- */

.era-section {
  position: relative;
  max-width: 80rem;
  margin: 0 auto;
  padding: 8rem 1.5rem;
}
@media (min-width: 768px) { .era-section { padding: 10rem 2rem; } }
.era-section .in { max-width: 72rem; margin: 0 auto; }
.era-section h2 {
  text-align: center;
  margin-bottom: 5rem;
  font-size: 1.875rem;
  letter-spacing: -0.025em;
  font-weight: 400;
}
@media (min-width: 768px) { .era-section h2 { font-size: 2.25rem; } }
@media (min-width: 1024px) { .era-section h2 { font-size: 3rem; } }

.era-grid { display: grid; gap: 4rem; }
@media (min-width: 768px) { .era-grid { grid-template-columns: 1fr 1fr; gap: 6rem; } }
.era-item { display: flex; flex-direction: column; gap: 0.75rem; }
.era-item h3 {
  font-size: 1.5rem;
  letter-spacing: -0.025em;
  font-weight: 400;
  line-height: 1.3;
}
@media (min-width: 768px) { .era-item h3 { font-size: 1.875rem; } }
.era-item p {
  font-size: 1.125rem;
  line-height: 1.625;
  opacity: 0.6;
}

/* ---------- Lede (short lines, reads as spoken) ---------- */

.lede-section {
  max-width: 64rem;
  margin: 0 auto;
  padding: 4rem 1.5rem 3rem; /* bottom matches .message-section top */
}
@media (min-width: 768px) { .lede-section { padding: 5rem 2rem 4rem; } }
/* Spans the full section width, matching the message sections below it. */
.lede-section .in { max-width: none; margin-left: auto; margin-right: auto; text-align: left; }
.lede-section p {
  font-size: 1.25rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) { .lede-section p { font-size: 1.5rem; } }
.lede-section p:last-child { margin-bottom: 0; }

/* ---------- Message sections (editorial two-column: numbered head rail + body) ---------- */

.message-section {
  max-width: 64rem;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}
@media (min-width: 768px) { .message-section { padding: 4rem 2rem; } }

/* Rail collapses under 1024px so the measure never gets squeezed. */
.message-section .in,
.tree-intro {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .message-section .in,
  .tree-intro {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
  }
  /* Head parks while its body scrolls past; harmless on short sections. */
  .ms-head { position: sticky; top: 2rem; }
}

.ms-num {
  font: var(--typography-eyebrow);
  letter-spacing: 0.2em;
  opacity: 0.6; /* still clears 4.5:1 in both themes */
  margin-bottom: 0.75rem;
}
.ms-head h2 {
  font-size: 1.875rem;
  letter-spacing: -0.025em;
  font-weight: 400;
  line-height: 1.25;
}
@media (min-width: 768px) { .ms-head h2 { font-size: 2.25rem; } }
@media (min-width: 1024px) { .ms-head h2 { font-size: 1.875rem; } }

.ms-body { max-width: 38rem; }
.ms-body > * + * { margin-top: 1.25rem; }
.message-section p,
.tree-intro p {
  font-size: 1.125rem;
  line-height: 1.625;
  opacity: 0.75;
}
.message-section a,
.tree-intro a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.message-section a:hover,
.tree-intro a:hover { opacity: 0.7; }

/* ---------- Stat split (human vs. machine share) ----------
   Part-to-whole: two segments of one bar, not a progress bar. Both
   segments carry a real fill so the eye reads a 57/43 split of the
   same whole; the earlier --panel-08 fill on `human` was 3% ink, so
   the bar read as "57% full" of an empty track. Machine is the point
   and human is the context, so this is emphasis (solid ink vs. a
   quieter step of the same ink), not two competing hues — which also
   keeps it inside the site's monochrome palette.
   Segments are parted by a 2px surface gap, never a border. */

/* Enclosed panel rather than two rules, so the bar, the figures and the
   caption read as one object. Matches the .score-row
   container pattern. */
.stat-split {
  margin: 2.5rem 0;
  padding: 1.5rem;
  border: 1px solid var(--border-15);
  border-radius: var(--dimension-radius-base);
  background-color: var(--panel-08);
  backdrop-filter: blur(var(--backdrop-blur));
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
}
@media (min-width: 768px) { .stat-split { padding: 2rem; } }

/* The 50% crossover is the whole point of the number: without it, 57/43
   is an arbitrary split rather than the line the data just crossed. */
.stat-marker {
  position: relative;
  height: 1.75rem;
}
.stat-marker .tick {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 0.625rem;
  background-color: var(--border-40);
}
/* Centred on the tick and kept to the bare number: this is axis chrome,
   not a caption. "Crossover" is said once, in the figcaption. */
.stat-marker .tick-label {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font: var(--typography-eyebrow);
  letter-spacing: 0.12em;
  /* 0.65 clears 4.5:1 in both themes (was 0.45 ≈ 4.43:1 dark / 3.36:1 light,
     which failed AA for this 0.75rem label). Still reads as quiet axis chrome. */
  opacity: 0.65;
}

.stat-bar {
  display: flex;
  gap: 2px; /* surface gap parts the segments; no stroke around a mark */
  height: 12px;
  border-radius: var(--dimension-radius-pill);
  overflow: hidden;
}
/* flex-shrink absorbs the 2px gap across both segments, so the 57:43
   ratio survives it. */
.stat-bar .seg { display: block; height: 100%; }
.stat-bar .machine { flex: 1 1 57%; background-color: var(--fg); }
.stat-bar .human { flex: 1 1 43%; background-color: var(--border-40); }

/* Legend: each figure sits at the end of the bar its segment occupies —
   machine left, human right — instead of both bunched at the left, where
   "43% human" landed underneath the machine segment. The swatch is the
   identity channel; position alone is never asked to carry it. */
.stat-legend {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  margin-top: 1.25rem;
}
.stat-split .stat-item {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  opacity: 1;
}
/* The key rides above the label word, not in front of the figure — set
   before the digits, a pill at that size read as a minus sign. Drawn as
   a pseudo-element so it sizes itself to the word and the label keeps
   its baseline against the figure. */
.stat-item .label { position: relative; }
.stat-item .label::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0.2em; /* discount the label's trailing letter-spacing */
  bottom: calc(100% + 0.375rem);
  height: 6px;
  border-radius: var(--dimension-radius-pill);
}
.stat-item.machine .label::before { background-color: var(--fg); }
.stat-item.human .label::before { background-color: var(--border-40); }
/* line-height 1: these are single-line numerals with no descenders, so
   1.2 leading only parks dead space under the row and pushes the caption
   away from the figures it annotates. */
.stat-item .figure {
  font-size: 2.25rem;
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 400;
}
@media (min-width: 768px) { .stat-item .figure { font-size: 3rem; } }
/* text-secondary rather than opacity: 0.65 — opacity here would also
   dim the ::before key, collapsing the two segment colours together. */
.stat-item .label {
  font: var(--typography-eyebrow);
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text-secondary);
}
/* Below ~480px the two legend items can't sit at opposite ends without
   the labels colliding, so stack them and let the swatches carry identity. */
@media (max-width: 479px) {
  .stat-legend { display: grid; gap: 0.5rem; }
  .stat-item .figure { font-size: 2rem; }
}
/* Sits close under the figures, matching .score-note under the
   Lighthouse tiles — it annotates them, so it stays with them. */
.stat-split figcaption {
  margin-top: 0.75rem;
  font: var(--typography-small);
  opacity: 0.55;
}

/* ---------- What machines read (scannable list, not a run-on sentence) ---------- */

.read-list {
  list-style: none;
  display: grid;
  gap: 0.875rem;
  padding: 0;
}
@media (min-width: 768px) { .read-list { grid-template-columns: 1fr 1fr; gap: 0.875rem 2rem; } }
.read-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.5;
  opacity: 0.9;
}
.read-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border: 1px solid var(--border-interactive);
  border-radius: 1px;
}

/* ---------- Pull quote (breaks the column between chapters) ---------- */

.quote-section {
  max-width: 64rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}
@media (min-width: 768px) { .quote-section { padding: 3rem 2rem 4rem; } }
.pull-quote {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.5rem 0;
  border-top: 1px solid var(--border-15);
  border-bottom: 1px solid var(--border-15);
  text-align: center;
}
.pull-quote br { display: none; }
@media (min-width: 768px) { .pull-quote br { display: inline; } }
.pull-quote p {
  font-size: 1.5rem;
  line-height: 1.35;
  letter-spacing: -0.025em;
}
@media (min-width: 768px) { .pull-quote p { font-size: 2.25rem; } }

/* ---------- Compare (usual prototype / what we hand over) ---------- */

/* Run as plain prose rather than panels: the two sides are read one after
   the other, so the label alone carries the turn and the paragraphs inherit
   the surrounding .ms-body measure and size. */
.compare-label {
  font: var(--typography-eyebrow);
  /* One step up the scale from the eyebrow's own 100 — the shorthand above
     sets the size, so this has to follow it to take effect. */
  font-size: var(--font-size-200);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-top: 2.5rem;   /* the space a dropped-in panel used to hold */
  margin-bottom: 0.5rem;
}
/* The label belongs to the paragraph under it, so it sits closer than the
   1.25rem .ms-body gives every other sibling pair. */
.ms-body > .compare-label + p { margin-top: 0.5rem; }

/* ---------- Proof intro (sits above the One Two Tree card) ---------- */

.tree-intro {
  max-width: 64rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 1.5rem; /* top matches .message-section bottom; bottom stays tight, the banner belongs to this section */
}
@media (min-width: 768px) { .tree-intro { padding: 4rem 2rem 1.5rem; } }

.score-row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  padding: 0;
}
@media (min-width: 480px) { .score-row { grid-template-columns: repeat(4, 1fr); } }
.score-row li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem 0.5rem;
  border: 1px solid var(--border-15);
  border-radius: var(--dimension-radius-base);
  background-color: var(--panel-08);
  backdrop-filter: blur(var(--backdrop-blur));
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  text-align: center;
}
.score-val {
  font-size: 1.875rem;
  line-height: 1;
  letter-spacing: -0.025em;
}
.score-label {
  font: var(--typography-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
}
.tree-intro .score-note {
  font: var(--typography-small);
  opacity: 0.55;
  margin-top: 0.75rem;
}

/* ---------- FAQ ---------- */

.faq-section { position: relative; padding: 6rem 1.5rem; }
@media (min-width: 768px) { .faq-section { padding: 8rem 2rem; } }
.faq-section .in { max-width: 48rem; margin: 0 auto; }
.faq-section .heading { text-align: center; margin-bottom: 3rem; }
.faq-section .heading h2 {
  font-size: 1.875rem;
  letter-spacing: -0.025em;
  font-weight: 400;
}
@media (min-width: 768px) { .faq-section .heading h2 { font-size: 2.25rem; } }

.faq-list { border-top: 1px solid var(--border-15); }
.faq-item { border-bottom: 1px solid var(--border-15); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1rem;
  margin: 0 -1rem;
  border-radius: 6px;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.15s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 {
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.4;
}
@media (min-width: 768px) { .faq-item summary h3 { font-size: 1.1875rem; } }
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  opacity: 0.6;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p {
  font-size: 1rem;
  line-height: 1.625;
  opacity: 0.75;
  padding: 0 0 1.75rem;
  max-width: 42rem;
}
/* Hover/focus: additive signals (row tint + icon at full strength), not
   text dimming, which reads as disabled. Focus outline comes from the
   global :focus-visible rule. */
.faq-item summary:hover,
.faq-item summary:focus-visible { background-color: var(--panel-08); }
.faq-item summary:hover::after,
.faq-item summary:focus-visible::after { opacity: 1; }

/* ---------- Case Studies ---------- */

.cs-section { position: relative; padding: 6rem 0 2rem; } /* bottom 2rem: matches .tree-section, so the gap into FAQ equals the gap into Case Studies */
@media (min-width: 768px) { .cs-section { padding: 8rem 0 2rem; } }
.cs-section .heading {
  max-width: 80rem;
  margin: 0 auto 3rem; /* was 6rem; matches the Questions heading */
  padding: 0 1.5rem;
}
@media (min-width: 768px) { .cs-section .heading { padding: 0 2rem; } }
.cs-section h2 {
  text-align: center;
  font-size: 1.875rem;
  letter-spacing: -0.025em;
  font-weight: 400;
}
@media (min-width: 768px) { .cs-section h2 { font-size: 2.25rem; } }
/* 1024px 3rem bump removed 2026-08-21: chapter heads (Case Studies, Questions) share one size */

.cs-list {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
@media (min-width: 768px) { .cs-list { padding: 0 2rem; } }

.cs-card {
  position: relative;
  display: grid;
  align-items: center;
  height: 300px;
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow 0.5s;
  cursor: pointer;
}
@media (min-width: 768px) { .cs-card { height: 240px; } }
.cs-card:focus-visible { outline: 3px solid currentColor; outline-offset: -3px; }
.cs-card:hover { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }
.cs-card.even { grid-template-columns: 30% 70%; }
.cs-card.odd  { grid-template-columns: 70% 30%; }

.cs-card .img-wrap { position: relative; height: 100%; overflow: hidden; }
.cs-card.even .img-wrap { order: 1; }
.cs-card.even .copy { order: 2; }
.cs-card.odd .img-wrap { order: 2; }
.cs-card.odd .copy { order: 1; }
.cs-card .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
}
.cs-card:hover .img-wrap img { transform: scale(1.05); }
.cs-card .img-wrap .shade {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.2);
}

.cs-card .copy {
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 768px) { .cs-card .copy { padding: 2rem; } }
@media (min-width: 1024px) { .cs-card .copy { padding: 3rem; } }

.cs-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 0.25rem 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 6px;
}
.cs-card h3 {
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.025em;
  margin-bottom: 0.5rem;
  font-weight: 400;
}
@media (min-width: 768px) { .cs-card h3 { font-size: 1.875rem; } }

.cs-coral    { background-color: var(--color-accent-coral); color: #000000; }
.cs-turquoise{ background-color: var(--color-accent-turquoise); color: #000000; }
.cs-yellow   { background-color: var(--color-accent-yellow); color: #000000; }
.cs-mint     { background-color: var(--color-accent-mint); color: #000000; }

/* ---------- Contact CTA section ---------- */

.contact-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-top: 1px solid var(--border-10);
}
.contact-section .fx { position: absolute; inset: 0; z-index: 0; }
.contact-section .fx .gradient-a { background: var(--grad-c); }
.contact-section .fx .gradient-b { background: var(--grad-d); }
.contact-section .content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 8rem 1.5rem;
  text-align: center;
}
@media (min-width: 768px) { .contact-section .content { padding: 10rem 2rem; } }

.contact-section h2 {
  margin-bottom: 3rem;
  font-size: 2.25rem;
  letter-spacing: -0.025em;
  font-weight: 400;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.2;
}
@media (min-width: 768px) { .contact-section h2 { font-size: 3rem; } }
@media (min-width: 1024px) { .contact-section h2 { font-size: 3.75rem; } }

.contact-section .bordered-sub p { opacity: 0.6; }
@media (min-width: 1024px) { .contact-section .bordered-sub p { font-size: 1.5rem; } }

.contact-section .cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 4rem;
}
@media (min-width: 640px) { .contact-section .cta-row { flex-direction: row; } }

.email-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  opacity: 0.6;
}
.email-row .line {
  height: 1px;
  width: 2rem;
  background-color: var(--fg);
  opacity: 0.3;
}
@media (min-width: 768px) { .email-row .line { width: 3rem; } }
.email-row a {
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: opacity 0.15s;
  border-radius: 6px;
}
@media (min-width: 768px) { .email-row a { font-size: 1rem; } }
.email-row a:hover { opacity: 1; }

/* Contact paragraph: essay measure, left-aligned (centered multi-line
   body at full width is hard to track line-to-line) */
.contact-section .bordered-sub .in { max-width: 42rem; margin: 0 auto; }
.contact-section .bordered-sub .in p { text-align: left; }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--border-10);
  padding: 3rem 1.5rem;
  background-color: var(--panel-08);
  backdrop-filter: blur(var(--backdrop-blur));
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
}
@media (min-width: 768px) { .site-footer { padding: 3rem 2rem; } }
.site-footer .inner {
  max-width: 80rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
@media (min-width: 768px) { .site-footer .inner { flex-direction: row; } }
.site-footer .logo-row { display: flex; align-items: center; gap: 1rem; opacity: 0.6; }
.site-footer .logo-row img { height: 36px; width: auto; }
.site-footer .logo-row .brand-name { font-size: 1.5rem; letter-spacing: -0.025em; font-weight: 300; }
.site-footer p {
  font-size: 0.875rem;
  line-height: 1.625;
  opacity: 0.65;
  max-width: 42rem;
  text-align: center;
}
@media (min-width: 768px) { .site-footer p { text-align: right; } }

/* ---------- Modals ---------- */

.modal-backdrop[hidden] { display: none !important; }
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-y: auto;
  backdrop-filter: blur(var(--backdrop-blur));
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  background-color: var(--modal-backdrop);
}
.modal-backdrop.centered {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
  background-color: var(--modal-backdrop-light);
}
.modal-scroll {
  min-height: 100vh;
  padding: 3rem 1rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.modal-panel {
  position: relative;
  width: 100%;
  background-color: var(--modal-bg);
  border: 2px solid var(--fg);
  border-radius: 6px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  color: var(--fg);
}
.modal-panel.about { max-width: 56rem; }
.modal-panel.contact-panel { max-width: 42rem; padding: 3rem; }
@media (min-width: 768px) { .modal-panel.contact-panel { padding: 5rem; } }
.modal-panel.case { max-width: 64rem; }

.modal-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  padding: 0.5rem;
  transition: opacity 0.15s;
  border-radius: 6px;
  z-index: 5;
}
.modal-close:hover { opacity: 0.5; }

/* Case study modal close button (inverted, offset) */
.case-close {
  position: absolute;
  top: -4rem;
  right: 0;
  padding: 1rem;
  border: 2px solid var(--fg);
  border-radius: 6px;
  background-color: var(--fg);
  color: var(--bg);
  transition: all 0.15s;
  z-index: 5;
}
@media (min-width: 768px) {
  .case-close { top: 2rem; right: -5rem; }
}
.case-close:hover { transform: scale(1.1); }

/* About modal internals */
.about-body { padding: 2rem; display: flex; flex-direction: column; gap: 5rem; }
@media (min-width: 768px) { .about-body { padding: 4rem; } }
.about-body .overline-row { margin-bottom: 2rem; justify-content: flex-start; }
.about-body .overline-row .line { width: 3rem; }
.about-body h2 {
  font-size: 2.25rem;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin-bottom: 2.5rem;
}
@media (min-width: 768px) { .about-body h2 { font-size: 3rem; } }
.about-open { display: flex; flex-direction: column; gap: 1.5rem; }
.about-open .lead {
  font-size: 1.25rem;
  line-height: 1.625;
  opacity: 0.8;
}
@media (min-width: 768px) { .about-open .lead { font-size: 1.5rem; } }
.about-open .body {
  font-size: 1.125rem;
  line-height: 1.625;
  opacity: 0.7;
}
@media (min-width: 768px) { .about-open .body { font-size: 1.25rem; } }

.bios-grid { display: grid; gap: 3rem; }
@media (min-width: 768px) { .bios-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.bio-block { border-top: 2px solid var(--border-30); padding-top: 2rem; }
[data-theme="light"] .bio-block { border-top-color: rgba(0,0,0,0.125); }
.bio-block h3 {
  font-size: 1.5rem;
  letter-spacing: -0.025em;
  margin-bottom: 0.5rem;
  font-weight: 400;
}
@media (min-width: 768px) { .bio-block h3 { font-size: 1.875rem; } }
.bio-block p {
  font-size: 1rem;
  line-height: 1.625;
  opacity: 0.7;
}
@media (min-width: 768px) { .bio-block p { font-size: 1.125rem; } }

.how-block h3 {
  font-size: 1.5rem;
  letter-spacing: -0.025em;
  margin-bottom: 2.5rem;
  font-weight: 400;
}
@media (min-width: 768px) { .how-block h3 { font-size: 1.875rem; } }
.step {
  padding: 2rem;
  border: 2px solid var(--border-20);
  margin-bottom: -1px;
}
.step:first-of-type { border-radius: 6px 6px 0 0; }
.step:last-of-type { border-radius: 0 0 6px 6px; margin-bottom: 0; }
.step.mid {
  border-color: var(--border-40);
  background-color: var(--panel-08);
}
[data-theme="light"] .step { border-color: rgba(0,0,0,0.082); }
[data-theme="light"] .step.mid { border-color: rgba(0,0,0,0.188); background-color: rgba(0,0,0,0.016); }
.step .label {
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.62;
  margin-bottom: 0.75rem;
}
.step .chips { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.step .chips span {
  font-size: 0.875rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--border-25);
  border-radius: 6px;
  opacity: 0.7;
}
[data-theme="light"] .step .chips span { border-color: rgba(0,0,0,0.125); }
.step .handshake {
  font-size: 1.125rem;
  line-height: 1.625;
  opacity: 0.8;
  font-weight: 300;
  font-style: italic;
}
.about-body .closing { border-top: 1px solid var(--border-15); padding-top: 3rem; }

/* Contact modal internals */
.contact-panel h3#contact-modal-title {
  font-size: 2.25rem;
  margin-bottom: 1.5rem;
  letter-spacing: -0.025em;
  font-weight: 400;
}
@media (min-width: 768px) { .contact-panel h3#contact-modal-title { font-size: 3rem; } }
.contact-panel .subtitle { font-size: 1.25rem; margin-bottom: 3rem; opacity: 0.6; }

.contact-form { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-form .field { display: flex; flex-direction: column; gap: 0.5rem; }
.contact-form label {
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.7;
}
.contact-form input,
.contact-form textarea {
  padding: 1rem;
  border: 1px solid var(--border-interactive);
  border-radius: 6px;
  background-color: transparent;
  color: var(--fg);
  font-family: inherit;
  font-size: 1rem;
  transition: all 0.15s;
}
.contact-form textarea { resize: none; }
.contact-form .error { font-size: 0.875rem; color: var(--status-error); display: none; }
.contact-form .field.invalid .error { display: block; }
.contact-form .submit-wrap { padding-top: 1.5rem; }
.contact-form .ghost-btn { width: 100%; padding-top: 1.25rem; padding-bottom: 1.25rem; }

/* Case study modal internals */
.case-body { padding: 2rem; }
@media (min-width: 768px) { .case-body { padding: 4rem; } }
.gallery { margin-bottom: 4rem; }
.gallery .frame { overflow: hidden; margin-bottom: 1.5rem; border-radius: 6px; }
.gallery .frame img { width: 100%; height: auto; }
.gallery .controls { display: flex; align-items: center; justify-content: space-between; }
.gallery .nav-btn {
  padding: 1rem;
  border: 2px solid var(--fg);
  border-radius: 6px;
  transition: opacity 0.15s;
}
.gallery .nav-btn:hover { opacity: 0.5; }
.gallery .dots { display: flex; gap: 1rem; }
.gallery .dot {
  position: relative;
  height: 24px;
  width: 2rem;
  background: transparent;
  transition: all 0.15s;
  padding: 0;
}
.gallery .dot::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 0.25rem;
  border-radius: 6px;
  background-color: var(--border-30);
  transition: background-color 0.15s;
}
.gallery .dot.active { width: 4rem; }
.gallery .dot.active::after { background-color: var(--fg); }
.gallery[data-count="1"] .controls { display: none; }

.case-sections { display: flex; flex-direction: column; gap: 4rem; }
.case-sections h2 {
  font-size: 1.875rem;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin-bottom: 0.5rem;
}
@media (min-width: 768px) { .case-sections h2 { font-size: 2.25rem; } }
.case-sections h3 {
  font-size: 1.875rem;
  margin-bottom: 1.5rem;
  letter-spacing: -0.025em;
  font-weight: 400;
}
@media (min-width: 768px) { .case-sections h3 { font-size: 2.25rem; } }
.case-sections p.body,
.case-sections .approach-text p {
  font-size: 1.25rem;
  line-height: 1.625;
  opacity: 0.7;
}
.approach-text { display: flex; flex-direction: column; gap: 1.5rem; }
.approach-text ul {
  list-style: none;
  margin-left: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 1.25rem;
  line-height: 1.625;
  opacity: 0.7;
}
.approach-text li { display: flex; gap: 1rem; align-items: flex-start; }

.stats-grid { display: grid; gap: 1.5rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }
.stat-box {
  border: 2px solid var(--border-20);
  padding: 2rem;
  text-align: center;
  border-radius: 6px;
  background-color: var(--panel-08);
  backdrop-filter: blur(var(--backdrop-blur));
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
}
[data-theme="light"] .stat-box { border-color: rgba(0,0,0,0.082); }
.stat-box .value { font-size: 2.25rem; margin-bottom: 0.5rem; }
@media (min-width: 768px) { .stat-box .value { font-size: 3rem; } }
.stat-box .label { font-size: 1.125rem; opacity: 0.6; }

.learnings { display: flex; flex-direction: column; gap: 1rem; }
.learnings .row { display: flex; align-items: flex-start; gap: 1rem; }
.learnings .row .dash { font-size: 1.25rem; }
.learnings .row p { font-size: 1.25rem; line-height: 1.625; opacity: 0.7; }

/* Thank you modal */
.thanks-panel { text-align: center; }
.thanks-panel h3 {
  font-size: 2.25rem;
  margin-bottom: 2rem;
  letter-spacing: -0.025em;
  font-weight: 400;
  line-height: 1.2;
}
@media (min-width: 768px) { .thanks-panel h3 { font-size: 3rem; } }
.thanks-panel .flower {
  border-top: 1px solid var(--border-15);
  border-bottom: 1px solid var(--border-15);
  padding: 1.5rem 0;
  margin-bottom: 3rem;
}
@media (min-width: 768px) { .thanks-panel .flower { padding: 2rem 0; } }
.thanks-panel .flower p {
  font-size: 1.5rem;
  letter-spacing: -0.025em;
  opacity: 0.7;
}
@media (min-width: 768px) { .thanks-panel .flower p { font-size: 1.875rem; } }

/* Lock body scroll while a modal is open */
body.modal-open { overflow: hidden; }


/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}