/* ==========================================================================
   Opaya · home page sections (after site.css; the hero is in hero.css)
   Always on band and agent notes, the agent fleet, What we do, the statement,
   How it works, the people, and Start with Opaya.
   ========================================================================== */

/* 1. Always on: office time-lapse + forest stipple panel --------------------------- */
.band-section { padding-top: 104px; }
.band {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  height: clamp(560px, 72vh, 680px);
  border-radius: var(--r); overflow: hidden;
  background: var(--forest);
}
.band-photo { position: relative; margin: 0; overflow: hidden; background: var(--sand); }
/* The 16:9 time-lapse is cover-cropped into the band's frame: the desk stays centred. */
.band-photo > img, .band-photo > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.band-stipple {
  position: relative; color: var(--white);
  background-color: var(--forest);
  background-image: radial-gradient(circle, rgba(207, 227, 221, .3) 1px, transparent 1.3px);
  background-size: 6px 6px;
}
.band-stipple.is-live { background-image: none; }
.band-stipple canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stipple-copy { position: relative; z-index: 1; padding: 44px 44px 0; max-width: 25em; }
.stipple-copy .label { color: var(--mist); --sq: var(--mist); }
.stipple-line { margin-top: 22px; font: 600 24px/31px var(--sans); letter-spacing: -0.02em; color: var(--white); }

/* Floating UI card: crisp, square, one ring shadow. */
.ui-card { position: relative; background: var(--white); color: var(--ink); box-shadow: var(--lift); text-align: left; }
.band-card { position: absolute; z-index: 2; left: 40px; top: 40px; width: 340px; }
.ui-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px 13px; border-bottom: 1px solid var(--sand); }
.ui-title { display: inline-flex; align-items: center; gap: 10px; font: 600 15px/20px var(--sans); letter-spacing: -0.01em; }
.ui-title svg { width: 20px; height: 15px; fill: var(--forest-2); flex: none; }
.ui-meta { font: 400 11px/14px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--grey-text); }
.ui-body { padding: 16px 18px 18px; }
.ui-body p { font: 500 15px/22px var(--sans); }
.ui-btn { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 11px 0 10px; margin-top: 14px; background: var(--ink); color: var(--white); font: 600 13px/1 var(--sans); }
.ui-btn::before { content: ""; width: 6px; height: 6px; background: currentColor; }

/* Agent notes: the band card cycles through one note per agent, about every
   4.5s, with a soft crossfade and a short rise (opacity and transform only). The notes
   share one grid cell, so the card never changes size. Each carries its agent's name, dot
   glyph (from the agent cards) and palette accent (the glyph, and a hairline of the card's
   gradient along the top). Paused off-screen, on hover and focus, and in hidden tabs;
   reduced motion shows the Planner's note, still. */
.note--watcher { --acc: #2E6F69; }
.note--analyst { --acc: #4C6072; }
.note--planner { --acc: #A6692A; }
.note--guardian { --acc: #4B5730; }
.note--explainer { --acc: #7A6377; }
.note-acc { position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 1; pointer-events: none; }
.note-acc > i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--g0), var(--g1) 55%, var(--g2)); opacity: 0; transition: opacity 700ms var(--ease); }
.note-acc > i.is-active { opacity: 1; }
.notes { display: grid; }
.note {
  grid-area: 1 / 1; min-width: 0;
  opacity: 0; visibility: hidden; transform: translate3d(0, 10px, 0);
  transition: opacity 420ms var(--ease), transform 640ms var(--ease), visibility 0s linear 640ms;
}
.note.is-active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 640ms var(--ease) 160ms, transform 760ms var(--ease) 120ms, visibility 0s;
}
.note.is-leaving { transform: translate3d(0, -10px, 0); }
.ui-title svg.note-glyph { width: 27px; height: 21px; fill: var(--acc, var(--forest-2)); }
@media (prefers-reduced-motion: reduce) { .note, .note.is-active, .note-acc > i { transition: none; } }

/* 2. Agents: a fleet, on full-colour animated gradients --------------------------- */
/* One WebGL canvas behind the strip draws five scissored card viewports (each with
   its own palette and seed). The CSS radial gradients on each card's ::before are the
   first paint and the fallback; they fade out once the canvas has drawn. */
.agents { margin-top: 96px; padding: 136px 0 144px; background: var(--white); }
.agents .lead-xl { margin: 30px auto 0; max-width: 32em; }
.agent-strip { position: relative; isolation: isolate; margin-top: 64px; }
.agent-gl { position: absolute; left: 0; top: -16px; width: 100%; height: calc(100% + 32px); z-index: 0; pointer-events: none; }
.agent-row { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.agent {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; min-height: 392px; padding: 30px 22px 28px;
  border-radius: var(--r); color: var(--white);
}
.agent::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(8, 14, 12, .26) 0%, rgba(8, 14, 12, 0) 22%, rgba(8, 14, 12, 0) 48%, rgba(8, 14, 12, .5) 100%),
    radial-gradient(120% 80% at 18% 22%, var(--g2) 0%, transparent 62%),
    radial-gradient(110% 90% at 86% 70%, var(--g1) 0%, transparent 70%),
    var(--g0);
  transition: opacity 600ms var(--ease);
}
.agents.is-gl .agent::before { opacity: 0; }
.agent--watcher, .note--watcher   { --g0: #183F3B; --g1: #2E6F69; --g2: #8DC7B2; }
.agent--analyst, .note--analyst   { --g0: #1D2B3D; --g1: #4C6072; --g2: #8FB4A0; }
.agent--planner, .note--planner   { --g0: #8A5623; --g1: #C98450; --g2: #EBCFA8; }
.agent--guardian, .note--guardian  { --g0: #14281F; --g1: #4B5730; --g2: #8E9A5C; }
.agent--explainer, .note--explainer { --g0: #3A3447; --g1: #7A6377; --g2: #CBC2D3; }
.agent .label { align-self: flex-start; color: var(--stone); --sq: var(--stone); }
.pix { width: 142px; height: auto; fill: var(--forest-2); }
.agent .pix { width: 112px; margin: 56px auto 52px; fill: rgba(246, 245, 243, .92); }
.agent-line { margin-top: auto; font: 600 17px/24px var(--sans); letter-spacing: -0.015em; color: var(--white); }

/* 3. What we do: an interactive category showcase -------------------------------- */
/* Left: three category titles as tabs (role="tablist"), the selected one marked with a
   sage square, and its panel below. Right: a large forest stage, flush with the right
   edge of the page, where one WebGL particle field morphs between three forms (wave
   terrain, orbits around a sphere, a lattice). Auto-advances every 6s until the visitor
   interacts; the hairline under the selected title shows the time left. */
.expertise { padding: 136px 0 var(--section); }
.wwd-head { text-align: center; }
.wwd {
  margin-top: 72px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 58vw);
  column-gap: clamp(40px, 5vw, 96px); align-items: center;
  padding-left: max(var(--gutter), calc((100% - var(--max)) / 2));
}
.wwd-left { min-width: 0; padding-block: 24px; }
/* Hairlines are drawn by pseudo-elements over transparent borders (same place, same
   layout), so the entrance can draw them in from the left. */
.wtabs { position: relative; display: grid; border-top: 1px solid transparent; }
.wtabs::before, .wtab::after, .start-rows::before, .start-row::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; transform-origin: 0 50%; pointer-events: none;
}
.wtabs::before { top: -1px; background: var(--line); }
.wtab::after { bottom: -1px; background: var(--line); }
.wtab {
  position: relative;
  display: flex; align-items: center; gap: 18px;
  width: 100%; padding: 22px 0 20px; margin: 0;
  background: none; border: 0; border-bottom: 1px solid transparent; border-radius: 0;
  text-align: left; cursor: pointer; color: var(--ink);
}
.wtab::before {
  content: ""; flex: none; width: 10px; height: 10px;
  background: transparent; box-shadow: inset 0 0 0 1px rgba(12, 10, 8, .28);
  transition: background-color 240ms var(--ease), box-shadow 240ms var(--ease);
}
.wtab-title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.03em;
  font-size: clamp(34px, calc(14px + 2.7vw), 56px); line-height: 1;
  opacity: .34; transition: opacity 260ms var(--ease);
}
.wtab[aria-selected="true"]::before { background: var(--sage); box-shadow: inset 0 0 0 1px var(--sage), 0 0 0 4px rgba(111, 168, 143, .2); }
.wtab[aria-selected="true"] .wtab-title { opacity: 1; }
.wtab:focus-visible { outline-offset: -2px; }
/* Time left before the next category (auto-advance only). */
.wtab-bar { position: absolute; z-index: 1; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--forest-2); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.wwd.is-auto .wtab[aria-selected="true"] .wtab-bar { animation: wtab-fill 6s linear forwards; }
.wwd.is-auto.is-held .wtab[aria-selected="true"] .wtab-bar { animation-play-state: paused; }
@keyframes wtab-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (hover: hover) and (pointer: fine) { .wtab:hover .wtab-title { opacity: .72; } .wtab[aria-selected="true"]:hover .wtab-title { opacity: 1; } }
.wpanels { display: grid; margin-top: 30px; }
.wpanel { grid-area: 1 / 1; max-width: 30em; opacity: 0; visibility: hidden; transform: translate3d(0, 8px, 0); transition: opacity 360ms var(--ease), transform 360ms var(--ease), visibility 0s linear 360ms; }
.wpanel.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity 420ms var(--ease) 120ms, transform 420ms var(--ease) 120ms, visibility 0s; }
.wpanel:focus-visible { outline-offset: 6px; }
.wpanel-text { font: 500 18px/27px var(--sans); color: #2E2B28; }
.wsubs { margin-top: 18px; border-top: 1px solid var(--line-soft); }
.wsubs li { border-bottom: 1px solid var(--line-soft); }
/* A long item wraps: the marker stays on its first line (centred on the 22px line box),
   and the underline is a background on the inline text, so it follows every line. */
.wsubs a { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; font: 600 16px/22px var(--sans); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.wsubs a::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 8px; background: var(--sage); }
.wsubs a span { background: linear-gradient(currentColor, currentColor) 0 calc(100% + 0px) / 0 1px no-repeat; padding-bottom: 2px; transition: background-size 220ms var(--ease); }
.wsubs a:focus-visible span { background-size: 100% 1px; }
@media (hover: hover) and (pointer: fine) { .wsubs a:hover span { background-size: 100% 1px; } }
.wpanel .gbtn { margin-top: 24px; }
/* The stage. */
.wstage {
  position: relative; overflow: hidden;
  height: clamp(520px, 72vh, 780px);
  border-radius: var(--r) 0 0 var(--r);
  background:
    radial-gradient(70% 70% at 58% 48%, #1C4842 0%, rgba(22, 59, 55, 0) 70%),
    linear-gradient(180deg, #143834 0%, var(--forest) 50%, #10302C 100%);
  color: var(--mist);
}
.wstage-dots { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(207, 227, 221, .16) 1px, transparent 1.4px); background-size: 14px 14px; transition: opacity 600ms var(--ease); }
.wstage.is-live .wstage-dots { opacity: 0; }
.wstage-still { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 500ms var(--ease); }
.wstage.is-fallback .wstage-dots { opacity: 0; }
.wstage-still.is-on { opacity: 1; }
.wstage canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 500ms var(--ease); }
.wstage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; z-index: 1; background: linear-gradient(0deg, rgba(14, 38, 35, .78) 0%, rgba(14, 38, 35, .4) 45%, rgba(14, 38, 35, 0) 100%); pointer-events: none; }
.wstage.is-live canvas { opacity: 1; }
.wstage-cap {
  position: absolute; left: 28px; bottom: 24px; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  font: 400 12px/16px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: rgba(207, 227, 221, .86);
}
.wstage-cap::before { content: ""; width: 7px; height: 7px; background: var(--sage); flex: none; }
.wstage-cap span { transition: opacity 300ms var(--ease); }
/* Without the script, every panel shows, one under the other. */
html:not(.js) .wpanel { grid-area: auto; opacity: 1; visibility: visible; transform: none; }
html:not(.js) .wpanel + .wpanel { margin-top: 28px; }
html:not(.js) .wtab-title { opacity: 1; }

/* 4. Statement --------------------------------------------------------------------- */
.statement { position: relative; overflow: hidden; background: var(--ink); color: var(--white); padding-block: clamp(120px, 17vh, 176px); text-align: center; }
.statement-relief {
  position: absolute; top: 0; bottom: 0; right: 0; width: 42%;
  background: url("../img/relief-edge.jpg") center / cover no-repeat;
  opacity: .16;
  -webkit-mask-image: linear-gradient(to left, #000 35%, transparent);
  mask-image: linear-gradient(to left, #000 35%, transparent);
  pointer-events: none;
}
.statement .container { position: relative; }
.statement-text { font-size: 44px; line-height: 48px; }
.statement-sub { margin: 22px auto 0; max-width: 26em; font: 500 20px/28px var(--sans); color: rgba(255, 255, 255, .86); text-wrap: balance; }

/* 5. How it works: a pinned, exploded agent stack -------------------------------- */
/* Default (no JS, reduced motion, tablets and phones): a plain list of steps, each with
   its own small layer drawing. On desktop with motion the script adds .is-pinned: the
   stage sticks under the header while the track scrolls, and the stack explodes. */
.how { position: relative; overflow: clip; padding: var(--section) 0; }
.how-head { text-align: center; }
.how-head .lead-bold { margin: 24px auto 0; max-width: 26em; }
.how-steps { margin-top: 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.how-step { display: flex; flex-direction: column; padding: 28px 28px 32px; background: var(--white); border-radius: var(--r); }
.how-art { width: 100%; max-width: 330px; margin: 4px auto 28px; color: var(--forest-2); }
.how-step-head { display: flex; align-items: baseline; gap: 12px; font: 400 12.5px/16px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.how-num { color: var(--grey-text); }
.how-step-line { margin-top: 12px; font: 600 20px/27px var(--sans); letter-spacing: -0.02em; max-width: 24em; }
.how-right { display: none; }

/* Plate drawings (symbols are shared by the small drawings and the big stack). */
/* Each symbol's root group carries fill="none" stroke="currentColor": selectors with
   ancestors do not match inside <use> clones, but inherited presentation does. */
.how-art, .how-stack { --plate: var(--white); --plate-side: var(--sand); --plate-side2: #DCD6CD; overflow: visible; }
.pl-top { fill: var(--plate); }
.pl-side { fill: var(--plate-side); }
.pl-side2 { fill: var(--plate-side2); }
.pl-faint { stroke-opacity: .42; }
.pl-accent { stroke: var(--dot, var(--sage)); stroke-width: 2; }
.pl-dot { fill: var(--dot, var(--sage)); stroke: none; }
.pl-fill { fill: currentColor; stroke: none; }
.pl-soft { fill-opacity: .4; }
.pl-bar { fill: currentColor; fill-opacity: .12; }
.pl-open { fill: none; }
.pl-tick { stroke-width: 1.5; }
.pl-label { fill: currentColor; stroke: none; font: 400 9px var(--mono); letter-spacing: .08em; }
.co-text { font: 400 11.5px var(--mono); letter-spacing: .04em; fill: var(--ink); }
.co-dot { fill: var(--sage); }
.co-line { fill: none; stroke: var(--forest-2); stroke-width: 1; }
.co-end { fill: var(--white); stroke: var(--forest-2); stroke-width: 1; }

.how.is-pinned { padding: 0; }
.how.is-pinned .how-track { position: relative; height: calc(100vh - var(--header) + 260vh); height: calc(100svh - var(--header) + 260vh); }
.how.is-pinned .how-stage {
  position: sticky; top: var(--header);
  height: calc(100vh - var(--header)); height: calc(100svh - var(--header));
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.how.is-pinned .how-left { display: flex; flex-direction: column; justify-content: center; padding: 48px 56px 48px 0; }
.how.is-pinned .how-head { text-align: left; }
.how.is-pinned .how-head .lead-bold { margin-left: 0; }
.how.is-pinned .how-steps { position: relative; display: block; margin-top: 48px; padding-left: 34px; }
.how.is-pinned .how-steps::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 10px; width: 1px; background: var(--line); }
.how.is-pinned .how-steps::after { content: ""; position: absolute; left: 4px; top: 6px; width: 1px; height: calc((100% - 16px) * var(--how-p, 0)); background: var(--sage); }
.how.is-pinned .how-step { position: relative; padding: 0 0 30px; background: none; border-radius: 0; }
.how.is-pinned .how-step:last-child { padding-bottom: 0; }
.how.is-pinned .how-step::before { content: ""; position: absolute; left: -34px; top: 4px; width: 9px; height: 9px; background: var(--stone); box-shadow: inset 0 0 0 1px var(--forest-2); transition: background-color 240ms var(--ease), box-shadow 240ms var(--ease); }
.how.is-pinned .how-step.is-active::before { background: var(--sage); box-shadow: inset 0 0 0 1px var(--sage), 0 0 0 4px rgba(111, 168, 143, .22); }
.how.is-pinned .how-art { display: none; }
.how.is-pinned .how-step > * { transition: opacity 300ms var(--ease); }
.how.is-pinned .how-step:not(.is-active) > * { opacity: .36; }
.how.is-pinned .how-step-line { font-size: 21px; line-height: 28px; }
.how.is-pinned .how-right { position: relative; display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--line); }
.how.is-pinned .how-right::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: -50vw; z-index: -1;
  background-image: radial-gradient(circle, rgba(12, 10, 8, .14) 1px, transparent 1.4px);
  background-size: 16px 16px; background-position: 8px 8px;
}
.how-stack { width: min(100%, 600px); height: auto; max-height: calc(100% - 24px); }
.how-layer > g, .how-callouts > g { transition: transform 520ms var(--ease); }
.how-layer { color: rgba(31, 78, 73, .52); --dot: rgba(111, 168, 143, .5); transition: color 300ms var(--ease); }
.how-layer.is-active { color: var(--forest-2); --dot: var(--sage); }
.how-layer.is-active > g, .how-callouts.is-active > g { transform: translateY(-12px); }
.how-callouts { opacity: 0; transition: opacity 320ms var(--ease); }
.how-callouts.is-active { opacity: 1; }

/* 6. Imagine: the people Opaya is built for -------------------------------------- */
/* Each card ends with its product (a ghost button), aligned across the row. */
.rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.imagine { padding: var(--section) 0; }
.imagine .rail { margin-top: 56px; align-items: stretch; }
.scene { margin: 0; display: flex; flex-direction: column; }
.scene-media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--sand); }
.scene-media img, .scene-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene-cap { margin-top: 24px; flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.scene-role { font: 600 19px/26px var(--sans); letter-spacing: -0.015em; }
.scene-text { color: #3A3733; margin-bottom: 12px; }
.scene-btn { margin-top: auto; }

/* Video loops: a still underneath; the clip fades in on its first frame. */
.loop { opacity: 0; transition: opacity 900ms ease-in-out; }
.loop.is-shown { opacity: 1; }

/* 7. Start with Opaya ------------------------------------------------------------- */
.start { position: relative; overflow: hidden; padding: var(--section) 0; background: var(--forest); color: var(--white); }
.start-relief {
  position: absolute; left: -12%; bottom: -30%; width: 54%; aspect-ratio: 1;
  background: url("../img/relief-forest.jpg") center / cover no-repeat;
  opacity: .38;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent);
  mask-image: radial-gradient(closest-side, #000 30%, transparent);
  pointer-events: none;
}
.start .container { position: relative; }
.start .lead-bold { margin: 24px auto 0; max-width: 26em; color: rgba(255, 255, 255, .9); }
.start-grid { margin: 72px auto 0; max-width: 1040px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.start-rows { position: relative; border-top: 1px solid transparent; }
.start-rows::before { top: -1px; background: var(--line-dark); }
.start-row::after { bottom: -1px; background: var(--line-dark); }
.start-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 12px; align-items: center; padding: 30px 0; border-bottom: 1px solid transparent; }
.start-row .label { grid-column: 1 / -1; align-items: flex-start; color: var(--mist); --sq: var(--mist); }
.start-row .label::before { margin-top: 4.5px; }
.start-line { font: 600 22px/28px var(--sans); letter-spacing: -0.02em; }
/* The start bubbles: yin and yang as two particle bubbles chasing each
   other, in the What-we-do stage's particle style. On desktop they sit right of the rows
   (the canvas is a little larger than its cell, so nothing meets a hard edge); below 900px
   they are a wide band above the rows. First paint is a still of the opening frame
   (contain-fit, the canvas's own framing). */
.start-visual { position: relative; min-height: 560px; pointer-events: none; }

/* 8. Responsive ------------------------------------------------------------------- */
@media (max-width: 1099px) {
  .agent-strip { margin-inline: calc(-1 * var(--gutter)); }
  .agent-row {
    display: flex; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .agent-row::-webkit-scrollbar { display: none; }
  .agent { flex: 0 0 260px; min-height: 352px; scroll-snap-align: start; }
}
@media (max-width: 1023px) {
  /* Showcase: the stage on top, full-bleed, then the titles and the panel. */
  .wwd { grid-template-columns: minmax(0, 1fr); padding-left: 0; margin-top: 52px; }
  .wstage { order: -1; height: clamp(360px, 64vw, 600px); border-radius: 0; }
  .wwd-left { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding: 36px var(--gutter) 0; }
}
@media (max-width: 899px) {
  .band { display: block; height: auto; }
  /* The 16:9 time-lapse fills a 4:5 frame (cover, so only its sides are cropped; the desk
     stays centred). The note joins the flow and overlaps only the rug strip at the frame's
     foot (12% of its height = 15% of its width), then sits on the forest ground, so the
     desk, chair and lamps stay clear. */
  .band-photo { display: flex; flex-direction: column; overflow: visible; background: transparent; }
  .band-photo::before { content: ""; display: block; aspect-ratio: 4 / 5; background: var(--sand); border-radius: var(--r) var(--r) 0 0; }
  .band-photo > img, .band-photo > video { inset: 0 0 auto 0; height: auto; aspect-ratio: 4 / 5; }
  .band-card { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; margin: -15% 12px 0; }
  .band-stipple { padding-bottom: 20px; min-height: 460px; }
  .how-steps { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .rail {
    display: flex; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { flex: 0 0 min(82%, 400px); scroll-snap-align: start; }
  .start-grid { grid-template-columns: 1fr; gap: 8px; max-width: 560px; }
  /* The bubbles become a full-bleed band directly under the heading, above the rows. */
  .start-visual { order: -1; min-height: 0; width: 100vw; margin: -8px 0 0 calc(50% - 50vw); height: clamp(210px, 60vw, 540px); }
  .smark { inset: 0; }
}
@media (max-width: 767px) {
  .band-section { padding-top: 80px; }
  .stipple-copy { padding: 30px 22px 0; }
  .stipple-line { font-size: 21px; line-height: 28px; }
  .band-stipple { min-height: 420px; }
  .agents { margin-top: 80px; padding: 96px 0; }
  .agents .lead-xl { font-size: 19px; line-height: 26px; margin-top: 22px; }
  .start .lead-bold, .how-head .lead-bold { font-size: 18px; line-height: 25px; margin-top: 20px; }
  .agent-strip { margin-top: 44px; }
  .agent { flex-basis: 240px; min-height: 330px; padding: 26px 20px 24px; }
  .agent .pix { width: 96px; margin: 42px auto 40px; }
  .expertise { padding-top: 96px; }
  .wwd { margin-top: 40px; }
  .wstage { height: min(104vw, 460px); }
  .wstage-cap { left: var(--gutter); bottom: 16px; font-size: 11px; }
  .wwd-left { padding-top: 26px; }
  .wtab { padding: 16px 0 15px; gap: 14px; }
  .wtab::before { width: 8px; height: 8px; }
  .wtab-title { font-size: clamp(30px, calc(8px + 7vw), 40px); }
  .wpanels { margin-top: 22px; }
  .wpanel-text { font-size: 17px; line-height: 25px; }
  .statement { padding-block: 104px; }
  .statement-text { font-size: 32px; line-height: 34px; }
  .statement-sub { font-size: 18px; line-height: 26px; }
  .how-steps { margin-top: 40px; }
  .how-step { padding: 22px 20px 26px; }
  .how-art { margin-bottom: 22px; }
  .how-step-line { font-size: 19px; line-height: 26px; }
  .imagine .rail { margin-top: 40px; }
  .scene-role { font-size: 18px; line-height: 25px; }
  .start-grid { margin-top: 48px; }
  .start-line { font-size: 20px; line-height: 26px; }
}
@media (max-width: 599px) {
  /* Each path stacks: label, line, then a full-width button (all three the same width). */
  .start-row { grid-template-columns: 1fr; padding: 24px 0; row-gap: 12px; }
  .start-row .mini-btn { justify-self: stretch; justify-content: center; margin-top: 6px; }
}

/* 9. Reduced motion --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .loop { transition: none; }
  .wpanel, .wpanel.is-active { transition: opacity 160ms linear, visibility 0s; transform: none; }
}