/* =============================================================
   SECTIONS — hero, facts, timeline, stats, testimonials, CTA
   ============================================================= */

/* -------------------------------------------------------------
   HERO
   Structure ported from the reference: full-bleed media, an
   oversized low-contrast wordmark behind it, a discipline list
   pinned top-left, headline bottom-left, support copy right.
   ------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* Was flex-end, which left most of a tall viewport empty and pushed the
     content into the scroll hint once the board made the aside taller.
     Centring inside padding that clears the fixed nav above and the hint
     below keeps the block balanced at any height. */
  justify-content: center;
  overflow: hidden;
  padding-top: clamp(7rem, 15vh, 10.5rem);
  padding-bottom: clamp(5.5rem, 11vh, 8.5rem);
  isolation: isolate;
}

/* The hero is exactly one screen tall, so on a phone its padding is
   taken straight out of the only screen the visitor has. 211px of it
   left the headline sitting a quarter of the way down. */
@media (max-width: 760px) {
  .hero {
    /* A floor, not a target. 86svh was still reserving a fixed screen
       height for a block of content that is nowhere near that tall: on a
       440x956 handset the content ended at 600px inside an 822px hero,
       so 222px of empty black sat between the buttons and the logos.
       Letting the content set the height closes that gap, and the floor
       keeps the hero from looking cramped on a short viewport. */
    min-height: 62svh;
    padding-top: 6rem;
    padding-bottom: 3rem;
  }

  /* The ghost wordmark is 1412px of nowrap type. On a 440px screen that
     is three viewports wide, so all that lands is four letters from the
     middle of the word — a band of meaningless capitals crossing the
     split-flap board and the copy beside it. It reads as a rendering
     fault rather than as a watermark. It needs the width to work, and
     on a phone there is none to give it. */
  .hero__ghost { display: none; }
}

/* Media layer. Video element is present but empty until footage
   lands — the gradient below carries the hero on its own. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(255,195,0,0.10), transparent 58%),
    radial-gradient(90% 70% at 12% 88%, rgba(255,195,0,0.05), transparent 60%),
    linear-gradient(168deg, #141414 0%, var(--tk-black) 46%, #050505 100%);
}
.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.4;
  filter: grayscale(1) contrast(1.1);
}

/* Grain — keeps the large flat areas from banding. */
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.16;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* The giant ghost wordmark. Decorative; the real H1 sits below. */
.hero__ghost {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(5rem, 22vw, 19rem);
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: var(--text-ghost);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

.hero__disciplines {
  position: absolute;
  top: clamp(6rem, 16vh, 9rem);
  left: var(--gutter);
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.hero__disciplines li {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
@media (max-width: 768px) { .hero__disciplines { display: none; } }
/* On a short viewport the pinned list and the centred block fight for the
   same band. The list is the least load-bearing thing in the hero. */
@media (max-height: 760px) { .hero__disciplines { display: none; } }

.hero__body {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--s-6) var(--s-8);
}
@media (max-width: 960px) {
  .hero__body { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* The hero headline is longer than the global mega scale assumes, and at
   --fs-mega its lines wrap — turning an intended 3-line title into 5. Give it
   its own slightly tighter scale so each authored line stays one visual line. */
.hero__title {
  margin-bottom: var(--s-3);
  font-size: clamp(1.85rem, 5.2vw, 5.6rem);
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: block; }
.hero__title em {
  font-style: normal;
  color: var(--accent);
}

.hero__aside { display: flex; flex-direction: column; gap: var(--s-5); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.hero__scroll {
  position: absolute;
  bottom: clamp(1.5rem, 3.5vh, 2.5rem);
  right: var(--gutter);
  z-index: var(--z-content);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.hero__scroll-line {
  width: 46px; height: 1px;
  background: var(--rule-strong);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  animation: scrollHint 2.2s var(--ease-in-out) infinite;
}
@keyframes scrollHint {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-on) .hero__scroll-line::after { animation: none; transform: none; }
}
@media (max-width: 768px) { .hero__scroll { display: none; } }

/* -------------------------------------------------------------
   FACT BLOCK — the reference's "Fact 01 / 40% / description"
   ------------------------------------------------------------- */
.fact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-6) var(--s-8);
  align-items: center;
}
@media (max-width: 860px) { .fact { grid-template-columns: 1fr; } }

.fact__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4.5rem, 15vw, 13rem);
  line-height: 0.82;
  letter-spacing: var(--ls-mega);
  color: var(--text-primary);
  display: flex;
  align-items: baseline;
}
.fact__unit { color: var(--accent); font-size: 0.44em; margin-left: 0.06em; }
.fact__desc { max-width: 26rem; }

/* -------------------------------------------------------------
   STATS BAND
   ------------------------------------------------------------- */
/* The grey the stats sat in was this grid, not the section: a rule-coloured
   background showing through 1px gaps, plus a border top and bottom. That
   drew a frame around the row and hairlines between the cells. Flat spacing
   on a transparent grid puts the numbers straight onto the page black. */
.stats {
  display: grid;
  gap: var(--s-6) clamp(var(--s-5), 4vw, var(--s-8));
}
.stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) {
  .stats--3, .stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .stats--3, .stats--4 { grid-template-columns: 1fr; }
}

.stat {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.stat__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.75rem, 6vw, 5rem);
  line-height: 0.9;
  letter-spacing: var(--ls-mega);
  display: flex;
  align-items: baseline;
}
.stat__suffix { color: var(--accent); font-size: 0.5em; }
.stat__label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.stat__desc { font-size: var(--fs-sm); color: var(--text-secondary); }

/* -------------------------------------------------------------
   PROCESS TIMELINE
   ------------------------------------------------------------- */
.timeline { position: relative; }
.phase {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 2fr);
  gap: var(--s-5) var(--s-7);
  padding-block: var(--s-7);
  border-top: 1px solid var(--rule);
}
.phase:last-child { border-bottom: 1px solid var(--rule); }
@media (max-width: 860px) { .phase { grid-template-columns: 1fr; gap: var(--s-4); } }

.phase__head { display: flex; flex-direction: column; gap: var(--s-2); position: sticky; top: 7rem; }
@media (max-width: 860px) { .phase__head { position: static; } }
.phase__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--accent);
  letter-spacing: 0.1em;
}
.phase__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: var(--ls-mega);
  line-height: 0.95;
}

.step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-3) var(--s-5);
  padding-block: var(--s-5);
  border-top: 1px solid var(--rule-faint);
}
.step:first-child { border-top: none; padding-top: 0; }
.step__title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600; }
.step__time {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--accent);
  white-space: nowrap;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  height: fit-content;
}
.step__body { grid-column: 1 / -1; color: var(--text-secondary); font-size: var(--fs-sm); max-width: 44rem; }

/* Compact timeline card used in the home-page teaser */
.timeline-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg-surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.timeline-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5);
  border-top: 1px solid var(--rule);
}
.timeline-card__row:first-of-type { border-top: none; }
.timeline-card__label { display: flex; align-items: center; gap: var(--s-4); }
.timeline-card__bar {
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--accent);
  transform-origin: left;
}

/* -------------------------------------------------------------
   CASE STUDY FEATURE
   ------------------------------------------------------------- */
.cs-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-7) var(--s-8);
  align-items: center;
}
@media (max-width: 960px) { .cs-feature { grid-template-columns: 1fr; } }

.cs-feature__media {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--bg-surface);
}
.cs-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
.cs-metric__val {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--accent);
}
.cs-metric__lbl {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-top: var(--s-2);
}
/* Unfilled metric — visibly pending, never mistaken for a real figure. */
.cs-metric__val[data-todo] { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-sm); }

/* -------------------------------------------------------------
   TESTIMONIALS
   ------------------------------------------------------------- */
.quote-lead {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  max-width: 52rem;
}
.quote-lead__text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}
.quote-author { display: flex; align-items: center; gap: var(--s-4); }
.quote-author__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--rule);
  flex: none;
  display: grid;
  place-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-muted);
}
.quote-author__name { font-weight: 600; font-size: var(--fs-sm); }
.quote-author__role { font-size: var(--fs-xs); color: var(--text-muted); }

.t-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--bg-surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  height: 100%;
}
.t-card__head {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.3;
}
.t-card__body { font-size: var(--fs-sm); color: var(--text-secondary); flex: 1; }
.t-card--todo { border-style: dashed; border-color: var(--rule-strong); }

/* -------------------------------------------------------------
   CTA
   ------------------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 120% at 50% 110%, rgba(255,195,0,0.16), transparent 62%),
    var(--bg-raised);
}
.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-6);
  text-align: center;
  padding-block: var(--s-6);
}
.cta__title { font-size: var(--fs-h1); line-height: var(--lh-mega); letter-spacing: var(--ls-mega); }
.cta__mail {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: var(--ls-tight);
}
.cta__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3) var(--s-6);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* -------------------------------------------------------------
   REVEAL — base state for scroll animation.
   JS adds .is-in. If JS never runs, .no-js keeps content visible.
   ------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-on) .reveal { opacity: 1; transform: none; transition: none; }
}

/* Page transition veil */
.veil {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--bg-base);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
}
.veil.is-out { opacity: 1; }
@media (prefers-reduced-motion: reduce) { html:not(.motion-on) .veil { display: none; } }

/* =============================================================
   BENTO PROOF GRID
   Absorbs the two standalone fact blocks, the lead testimonial,
   the case-study teaser and the process summary into one grid.
   ============================================================= */
.bento-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--s-5) var(--s-8);
  align-items: start;
  margin-bottom: var(--s-7);
}
.bento-head__mark { display: flex; flex-direction: column; gap: var(--s-3); }
.bento-head__logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}
.bento-head__logo .dot { color: var(--accent); }
.bento-head__logo sup { font-size: 0.5em; color: var(--text-muted); }
.bento-head__trust {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.bento-head__title { grid-column: 2; max-width: 30ch; }
.bento-head__lede { grid-column: 2; max-width: 52ch; }
@media (max-width: 860px) {
  .bento-head { grid-template-columns: 1fr; }
  .bento-head__title, .bento-head__lede { grid-column: 1; }
}

.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}
.bento__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--bg-surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out);
}
.bento__card:hover { border-color: var(--rule-strong); transform: translateY(-3px); }

.bento__card--quote   { grid-row: span 1; }
.bento__card--feature { grid-row: span 2; padding: 0; }
.bento__card--process { grid-column: span 2; flex-direction: row; gap: var(--s-6); align-items: center; }

@media (max-width: 1024px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__card--feature { grid-row: span 1; }
  .bento__card--process { grid-column: span 2; }
}
@media (max-width: 700px) {
  .bento { grid-template-columns: 1fr; }
  .bento__card--process { grid-column: span 1; flex-direction: column; align-items: flex-start; }
}

.bento__mark {
  position: absolute;
  right: -0.1em; bottom: -0.45em;
  font-family: var(--font-display);
  font-size: 10rem;
  line-height: 1;
  color: var(--rule-faint);
  pointer-events: none;
}
.bento__quote {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.3;
}
.bento__body { font-size: var(--fs-sm); color: var(--text-secondary); }
.bento__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: 1.15; }

.bento__eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.bento__arrow {
  display: grid;
  place-content: center;
  width: 26px; height: 26px;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  color: var(--text-secondary);
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.bento__card:hover .bento__arrow { transform: translate(2px, -2px); border-color: var(--accent); color: var(--accent); }

.bento__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 6vw, 4.75rem);
  line-height: 0.9;
  letter-spacing: var(--ls-mega);
  margin-top: auto;
  display: flex;
  align-items: baseline;
}
.bento__unit { color: var(--accent); font-size: 0.44em; }

/* feature card */
.bento__card--feature { min-height: 18rem; }
.bento__media { position: absolute; inset: 0; }
.bento__media img { width: 100%; height: 100%; object-fit: cover; }
.bento__overlay {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  background: linear-gradient(to top, rgba(10,10,10,0.9), transparent);
}
.bento__feature-title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.2;
}
.bento__feature-link { font-size: var(--fs-sm); color: var(--accent); }

/* process card */
.bento__process-copy { display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.bento__steps { display: flex; flex-direction: column; gap: var(--s-3); flex: none; min-width: 11rem; }
.bento__step { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); color: var(--text-secondary); }
.bento__step-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  opacity: calc(0.35 + (var(--step-i) * 0.22));
  flex: none;
}

/* =============================================================
   REVIEW WALL
   Vertical columns drifting in alternating directions, masked at
   both edges. Each column duplicates its cards so the loop is
   seamless; the duplicate set is aria-hidden.
   ============================================================= */
.review-wall { position: relative; overflow: hidden; }
.review-wall .section-head { margin-bottom: var(--s-7); align-items: center; }

.wall {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  height: clamp(26rem, 46vh, 34rem);
  padding-inline: var(--gutter);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
@media (max-width: 900px) { .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 620px) { .wall { grid-template-columns: 1fr; } }

.wall__col { position: relative; overflow: hidden; }
.wall__track {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  animation: wallUp var(--speed, 40s) linear infinite;
  will-change: transform;
}
.wall__col--down .wall__track { animation-name: wallDown; }
.wall:hover .wall__track { animation-play-state: paused; }

@keyframes wallUp   { from { transform: translateY(0); }    to { transform: translateY(-50%); } }
@keyframes wallDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }

.wall__card {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6) var(--s-5) var(--s-5);
  background: var(--bg-surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.wall__card:hover { border-color: var(--accent-line); background: var(--bg-elevated); }
/* A quiet quote mark reads as a testimonial rather than a chat message. */
.wall__card::before {
  content: '\201C';
  position: absolute;
  top: 2px; left: var(--s-5);
  font-family: var(--font-display);
  font-size: 2.75rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.28;
}
.wall__quote {
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--text-primary);
  text-wrap: pretty;
}
.wall__author { padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.wall__author { display: flex; align-items: center; gap: var(--s-3); }
.wall__avatar {
  width: 34px; height: 34px;
  flex: none;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-muted);
}
.wall__name { font-size: var(--fs-sm); font-weight: 600; letter-spacing: -0.01em; }
.wall__role {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* One grid column meant the three marquee tracks stacked as rows, so each
   got a third of a 24rem box: three ~128px slivers, every card sliced
   through the middle of a sentence. A testimonial you cannot finish
   reading is worse than no animation, so the phone gets the same
   treatment reduced motion already gets — a plain, readable list. */
@media (max-width: 620px) {
  .wall {
    grid-template-columns: 1fr;
    height: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .wall__col { overflow: visible; }
  .wall__track { animation: none; }
  /* The second set exists only to make the loop seamless. */
  .wall__card[aria-hidden="true"] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-on) .wall { height: auto; -webkit-mask-image: none; mask-image: none; }
  html:not(.motion-on) .wall__track { animation: none; }
  /* Without motion the duplicate set is redundant, so hide it. */
  html:not(.motion-on) .wall__card[aria-hidden="true"] { display: none; }
}

/* =============================================================
   SOLARI BOARD — split-flap display in the hero
   Built from the site's own tokens: tiles use the elevated surface,
   the character sits in off-white, and the split line is the same
   hairline used everywhere else. Nothing new enters the palette.
   ============================================================= */
.solari-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* hug the tiles instead of stretching */
  gap: var(--s-3);
}
.solari-label {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.solari-label::before {
  content: '';
  width: 1.5rem; height: 1px;
  background: var(--accent);
}

.solari {
  --tile-w: clamp(1.55rem, 3.1vw, 2.35rem);
  --tile-h: clamp(2.2rem, 4.4vw, 3.3rem);
  display: flex;
  width: max-content;
  gap: clamp(2px, 0.35vw, 4px);
  perspective: 420px;
}

.flap {
  position: relative;
  width: var(--tile-w);
  height: var(--tile-h);
  flex: none;
  border-radius: 4px;
  background: var(--bg-elevated);
  box-shadow: inset 0 0 0 1px var(--rule);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--tile-h) * 0.56);
  line-height: 1;
  color: var(--text-primary);
  transform-style: preserve-3d;
}
.flap.is-blank { background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--rule-faint); }

/* Static halves — what is showing when nothing is moving. */
.flap__half {
  position: absolute;
  left: 0; right: 0;
  height: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.flap__half--top    { top: 0; border-radius: 4px 4px 0 0; }
.flap__half--bottom { bottom: 0; border-radius: 0 0 4px 4px; background: rgba(0,0,0,0.22); }

/* The character is drawn full height inside each half and clipped,
   so the two halves line up as one glyph across the split. */
.flap__half i,
.flap__leaf i {
  font-style: normal;
  display: block;
  height: var(--tile-h);
  line-height: var(--tile-h);
}
.flap__half--top i    { transform: translateY(0); }
.flap__half--bottom i { transform: translateY(-50%); }

/* Moving leaves. */
.flap__leaf {
  position: absolute;
  left: 0; right: 0;
  height: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  backface-visibility: hidden;
  background: var(--bg-elevated);
}
.flap__leaf--top {
  top: 0;
  transform-origin: bottom center;
  border-radius: 4px 4px 0 0;
  box-shadow: inset 0 0 0 1px var(--rule);
}
.flap__leaf--bottom {
  bottom: 0;
  transform-origin: top center;
  border-radius: 0 0 4px 4px;
  background: rgba(26,26,26,0.98);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.flap__leaf--top i    { transform: translateY(0); }
.flap__leaf--bottom i { transform: translateY(-50%); }

/* The hairline across the middle is what sells it as a real board. */
.flap::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(0,0,0,0.55);
  z-index: 5;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-on) .solari { perspective: none; }
  html:not(.motion-on) .flap__leaf { display: none; }
}