/* ==========================================================================
   MECANDRIA — Who We Are (page-specific; loaded only on who-we-are.html)
   All classes are prefixed .wa- so nothing leaks into other pages.

   Story spine: every section opens with a numbered chapter label, and
   section backgrounds alternate between two near-identical navies joined by
   soft gradients, so the page reads as one continuous manifesto.

   Motion: reveals use the shared [data-reveal] system (animations.js);
   scroll-activated sequences use [data-seq] (who-we-are.js). Without JS or
   with reduced motion, everything renders in its finished state.
   ========================================================================== */
.wa {
  --wa-bg: #FBF8F3; --wa-bg-2: #F4EEE5; --wa-surface: #FFFFFF;
  --wa-line: rgba(90, 80, 70, .16); --wa-line-2: rgba(90, 80, 70, .28);
  --wa-muted: #5A5568; --wa-dim: #6E6878;
  --wa-cyan: 0, 119, 95; --wa-violet: 91, 46, 230; --wa-magenta: 199, 0, 73;   /* warm ivory palette: the "cyan" slot holds the teal label colour */
}
.wa section { position: relative; isolation: isolate; }
.wa-sec { padding-block: clamp(20px, 2.5vw, 32px) clamp(48px, 5.5vw, 80px); background: var(--wa-bg); }
.wa-sec--alt { background: var(--wa-bg-2); }
/* soft seams between alternating sections — no hard edges */
.wa-sec--alt::before, .wa-sec--alt::after { content: ""; position: absolute; left: 0; right: 0; height: 120px; pointer-events: none; z-index: -1; }
.wa-sec--alt::before { top: 0; background: linear-gradient(var(--wa-bg), transparent); }
.wa-sec--alt::after { bottom: 0; background: linear-gradient(transparent, var(--wa-bg)); }

/* chapter label: "02 — Our approach" */
.wa-chap { display: inline-flex; align-items: center; gap: 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: rgb(var(--wa-cyan)); }
.wa-chap b { font-weight: 700; color: var(--wa-dim); font-variant-numeric: tabular-nums; }
.wa-chap::after { content: ""; width: 36px; height: 1px; background: linear-gradient(90deg, rgba(var(--wa-cyan), .7), transparent); }

.wa-h1 { font-size: clamp(2.2rem, 1rem + 3.3vw, 4.4rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; text-transform: uppercase; }
.wa-h2 { font-size: clamp(1.6rem, .72rem + 2.4vw, 3.2rem); text-transform: uppercase; font-weight: 800; line-height: 1.02; letter-spacing: -.035em; }
.wa-h2--sentence { letter-spacing: -.03em; line-height: 1.06; }
.wa-lead { font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); line-height: 1.65; color: var(--wa-muted); max-width: 56ch; }
.wa-cool { background: linear-gradient(92deg, #00775F, #00728A 45%, #5B2EE6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wa-warm { background: linear-gradient(92deg, #C70049, #C2301A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wa-dimtext { color: var(--wa-dim); }

/* ==========================================================================
   01 · HERO — editorial text + "alignment field" visual
   Fragmented bars settle into rows once on load; each row then shows a stage:
   fragmented (dashed) → aligned (outlined) → connected (joined) → transformed.
   ========================================================================== */
.wa-hero {
  min-height: 76vh; min-height: 76svh; display: grid; align-items: center; overflow: hidden;
  padding: calc(var(--nav-h) + 40px) 0 clamp(64px, 7vw, 96px); background: var(--wa-bg);
}
.wa-hero::before { /* restrained architecture: a faint column grid, masked */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--wa-line) 1px, transparent 1px) center / calc(100% / 12) 100%;
  -webkit-mask-image: radial-gradient(80% 70% at 70% 45%, rgba(0,0,0,.7), transparent 75%); mask-image: radial-gradient(80% 70% at 70% 45%, rgba(0,0,0,.7), transparent 75%);
}
.wa-hero::after { content: ""; position: absolute; z-index: -1; right: -10vw; top: 10%; width: 60vw; height: 70%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 75, 51, .11), rgba(var(--wa-violet), .05) 55%, transparent); }
.wa-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.wa-hero h1 { margin: 26px 0 28px; max-width: 17ch; }
.wa-hero .wa-sub { margin: 0; max-width: 34ch; font-size: clamp(1.2rem, 1rem + .8vw, 1.65rem); font-weight: 600; line-height: 1.4; letter-spacing: -.01em; color: #2B2839; }
.wa-video { width: 100%; justify-self: end; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #1D1B2F; box-shadow: 0 30px 70px -30px rgba(29, 27, 47, .28); }
.wa-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.wa-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.wa-hero-actions .btn { --pad-y: 15px; font-size: 12.5px; }
.wa-hero .btn-light { background: #1D1B2F; color: #FBF8F3; }
.wa-hero .btn-light:hover { background: #3A3650; transform: translateY(-2px); }
.wa-in { animation: wa-rise 1s var(--ease) both; }
.wa-in:nth-child(2) { animation-delay: .08s; } .wa-in:nth-child(3) { animation-delay: .16s; } .wa-in:nth-child(4) { animation-delay: .24s; }
@keyframes wa-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.wa-field { position: relative; width: 100%; max-width: 500px; justify-self: end; display: grid; gap: clamp(26px, 3.2vw, 40px); padding-left: 28px; }
.wa-field::before { /* the spine that connects every row */
  content: ""; position: absolute; left: 3px; top: 6px; bottom: 6px; width: 1px; transform-origin: top;
  background: linear-gradient(180deg, rgba(90, 80, 70, .25), rgba(var(--wa-cyan), .7) 70%, rgba(var(--wa-violet), .8));
  animation: wa-spine 1.2s var(--ease) both 1.7s;
}
.wa-field-pulse { position: absolute; left: 1px; top: 6px; bottom: 6px; width: 5px; overflow: hidden; pointer-events: none; }
.wa-field-pulse::after { content: ""; position: absolute; left: 2px; width: 1px; top: 0; height: 100%; transform: translateY(-100%);
  background: linear-gradient(180deg, transparent 70%, rgba(0, 119, 95, .85) 95%, transparent);
  animation: wa-drop 7s cubic-bezier(.45, 0, .3, 1) infinite 3.4s; }
@keyframes wa-spine { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes wa-drop { 0% { transform: translateY(-100%); } 50%, 100% { transform: translateY(100%); } }

.wa-frow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.wa-frow::before { /* node on the spine */
  content: ""; position: absolute; left: -29px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--wa-bg); border: 1px solid rgba(var(--wa-cyan), .75); animation: wa-fade .5s ease both; animation-delay: calc(1.9s + var(--r) * .15s);
}
.wa-bars { position: relative; display: flex; gap: 10px; height: 14px; }
.wa-bars i {
  flex: var(--g, 1); border-radius: 2px; border: 1px solid rgba(90, 80, 70, .35);
  animation: wa-align 1.5s var(--ease) both; animation-delay: calc(.35s + var(--n) * .05s);
}
@keyframes wa-align {
  from { transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--t, 0)); opacity: .3; }
  to   { transform: none; opacity: 1; }
}
@keyframes wa-fade { from { opacity: 0; } to { opacity: 1; } }
.wa-frow:nth-child(2) .wa-bars i { border-style: dashed; border-color: rgba(90, 80, 70, .3); }     /* fragmented */
.wa-frow:nth-child(3) .wa-bars i { border-color: rgba(90, 80, 70, .45); }                           /* aligned */
.wa-frow:nth-child(4) .wa-bars i { border-color: rgba(var(--wa-cyan), .5); }                           /* connected */
.wa-frow:nth-child(4) .wa-bars::after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 1px; background: rgba(var(--wa-cyan), .6); animation: wa-fade .6s ease both 2.2s; }
.wa-frow:nth-child(5) .wa-bars i { border: 0; background: linear-gradient(90deg, rgba(var(--wa-cyan), .75), rgba(var(--wa-violet), .75)); box-shadow: 0 0 18px -4px rgba(var(--wa-cyan), .6); } /* transformed */
.wa-flabel { font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--wa-dim); white-space: nowrap; animation: wa-lit .6s ease both; animation-delay: calc(2s + var(--r) * .22s); }
.wa-frow:nth-child(5) .wa-flabel { color: rgb(var(--wa-cyan)); }
@keyframes wa-lit { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   02 · THE IDEA — large statement, two-column body copy
   ========================================================================== */
.wa-idea-head { max-width: 1100px; }
.wa-idea-head .wa-h2 { margin-top: 24px; }
.wa-idea-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; margin-top: clamp(40px, 5vw, 72px); }
.wa-idea-body > div { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px clamp(32px, 5vw, 80px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--wa-line); max-width: 1040px; }
.wa-idea-body p { margin: 0; font-size: clamp(1.02rem, .95rem + .3vw, 1.18rem); line-height: 1.7; color: var(--wa-muted); }
.wa-idea-body p:first-child::first-line { color: #1D1B2F; }

/* ==========================================================================
   03 · BUSINESS FIRST — statement + scroll-activated stages [data-seq]
   ========================================================================== */
.wa-approach-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px clamp(40px, 6vw, 96px); align-items: end; }
.wa-approach-head .wa-h2 { margin-top: 24px; }
.wa-approach-head .copy { display: grid; gap: 18px; }
.wa-approach-head .copy p { margin: 0; color: var(--wa-muted); font-size: 1.06rem; line-height: 1.7; }
.wa-approach-head .copy p:first-child { color: #1D1B2F; }

.wa-seq { position: relative; }
.wa-seq-track { position: absolute; background: var(--wa-line-2); pointer-events: none; }
.wa-seq-track i { position: absolute; left: 0; top: 0; background: linear-gradient(90deg, rgba(var(--wa-cyan), .9), rgba(var(--wa-violet), .9)); transition: width .9s var(--ease), height .9s var(--ease); }

.wa-seq--stages { margin-top: clamp(64px, 8vw, 112px); }
.wa-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; list-style: none; padding: 0; }
.wa-seq--stages .wa-seq-track { left: calc(100% / 6); right: calc(100% / 6); top: 0; height: 1px; }
.wa-seq--stages .wa-seq-track i { height: 1px; width: calc(var(--p, 1) * 100%); }
.wa-stage { position: relative; padding: 46px clamp(12px, 2vw, 32px) 0; text-align: center; }
.wa-stage::before { /* node */
  content: ""; position: absolute; left: 50%; top: -5px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%;
  background: var(--wa-bg-2); border: 1px solid var(--wa-line-2); transition: border-color .6s, background .6s, box-shadow .6s;
}
.wa-stage .n { display: block; font-size: 11px; font-weight: 700; letter-spacing: .22em; color: var(--wa-dim); margin-bottom: 14px; }
.wa-stage h3 { font-size: clamp(1.7rem, 1rem + 2.2vw, 3rem); font-weight: 800; letter-spacing: -.03em; transition: color .6s; }
.wa-stage p { margin: 16px auto 0; max-width: 30ch; color: var(--wa-muted); line-height: 1.6; transition: opacity .6s, transform .6s var(--ease); }
/* active state (default = active, so no-JS shows everything) */
.wa-stage::before { border-color: rgba(var(--wa-cyan), .9); background: rgb(var(--wa-cyan)); box-shadow: 0 0 0 5px rgba(var(--wa-cyan), .12), 0 0 18px rgba(var(--wa-cyan), .5); }
.seq-on .wa-stage:not(.is-active)::before { background: var(--wa-bg-2); border-color: var(--wa-line-2); box-shadow: none; }
.seq-on .wa-stage:not(.is-active) h3 { color: #B3ACA1; }
.seq-on .wa-stage:not(.is-active) p { opacity: .25; transform: translateY(6px); }

/* ==========================================================================
   04 · TALENT • TECHNOLOGY • TRANSFORMATION — diagonal flow with elbow lines
   ========================================================================== */
.wa-ttt-head { text-align: center; margin-bottom: clamp(56px, 7vw, 96px); }
.wa-ttt-head p { margin: 18px auto 0; color: var(--wa-muted); max-width: 46ch; }
.wa-diag { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(56px, 7vw, 96px); }
.wa-diag li { --o: 0%; position: relative; margin-left: var(--o); }
.wa-diag li:nth-child(2) { --o: 12%; }
.wa-diag li:nth-child(3) { --o: 24%; }
.wa-diag .word { display: block; font-size: clamp(2.6rem, .8rem + 5.4vw, 6.2rem); /* sized so TRANSFORMATION fits beside the 24% indent */ font-weight: 800; letter-spacing: -.05em; line-height: .9; text-transform: uppercase; }
.wa-diag li:nth-child(1) .word { background: linear-gradient(92deg, #C70049, #5B2EE6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wa-diag li:nth-child(2) .word { color: #1D1B2F; }
.wa-diag li:nth-child(3) .word { background: linear-gradient(92deg, #00775F, #00728A 45%, #5B2EE6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wa-diag .line { display: block; margin-top: 16px; padding-left: 4px; font-size: clamp(1.05rem, .95rem + .45vw, 1.35rem); color: var(--wa-muted); }
/* elbow connector: drops from this word and turns toward the next */
.wa-diag li:not(:last-child)::after {
  content: ""; position: absolute; left: 10px; top: calc(100% + 14px); height: calc(clamp(56px, 7vw, 96px) - 28px); width: calc(12vw - 10px); max-width: 190px;
  border-left: 1px solid rgba(var(--wa-cyan), .45); border-bottom: 1px solid rgba(var(--wa-cyan), .45); border-bottom-left-radius: 22px;
}
.wa-diag li:nth-child(1)::after { border-color: rgba(var(--wa-magenta), .4); }
.js .wa-diag li:not(:last-child)::after { clip-path: inset(0 100% 100% 0); }
.js .wa-diag li.is-in:not(:last-child)::after { clip-path: inset(0 0 0 0); transition: clip-path 1.4s var(--ease) .5s; }

/* ==========================================================================
   05 · HOW WE THINK — sticky statement + numbered editorial list
   ========================================================================== */
.wa-think { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.wa-think-head { position: sticky; top: calc(var(--nav-sticky-h) + 48px); }
.wa-think-head .wa-h2 { margin-top: 24px; }
.wa-principles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--wa-line); }
.wa-principles li { display: grid; grid-template-columns: clamp(64px, 7vw, 104px) minmax(0, 1fr); gap: 20px; align-items: baseline; padding: clamp(26px, 3vw, 40px) 0; border-bottom: 1px solid var(--wa-line); }
.wa-principles .num {
  font-size: clamp(2.4rem, 1.4rem + 2.6vw, 4.2rem); font-weight: 800; letter-spacing: -.05em; line-height: .9;
  color: transparent; -webkit-text-stroke: 1px rgba(90, 80, 70, .35); transition: -webkit-text-stroke-color .4s, color .4s;
}
.wa-principles h3 { font-size: clamp(1.2rem, .95rem + .9vw, 1.75rem); font-weight: 800; letter-spacing: -.015em; }
.wa-principles p { margin: 8px 0 0; color: var(--wa-muted); }
.wa-principles li:hover .num { color: rgba(var(--wa-cyan), .14); -webkit-text-stroke-color: rgba(var(--wa-cyan), .9); }

/* ==========================================================================
   06 · WHAT WE BELIEVE — quiet, typographic
   ========================================================================== */
.wa-believe-head { text-align: center; max-width: 1000px; margin: 0 auto clamp(56px, 7vw, 96px); }
.wa-believe-head .wa-h2 { margin-top: 24px; }
.wa-beliefs { list-style: none; margin: 0 auto; padding: 0; max-width: 1040px; }
.wa-beliefs li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: clamp(22px, 2.6vw, 34px) 0; border-top: 1px solid var(--wa-line);
  font-size: clamp(1.45rem, .9rem + 2vw, 2.9rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.12;
}
.wa-beliefs li:last-child { border-bottom: 1px solid var(--wa-line); }
.wa-beliefs b { font-weight: 800; color: #1D1B2F; }
.wa-beliefs span { color: #6E6878; }
.wa-beliefs small { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--wa-dim); }

/* ==========================================================================
   07 · FROM PROBLEM TO TRANSFORMATION — six-node timeline [data-seq]
   ========================================================================== */
.wa-path-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
.wa-path-head .wa-h2 { margin-top: 24px; }
.wa-path-head .stmt { margin: 0; color: var(--wa-muted); font-size: 1.05rem; max-width: 30ch; padding-bottom: 8px; border-bottom: 1px solid rgba(var(--wa-cyan), .4); }
.wa-seq--tl { margin-top: clamp(64px, 8vw, 104px); }
.wa-timeline { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; list-style: none; padding: 0; }
.wa-seq--tl .wa-seq-track { left: 0; right: calc(100% / 6 - 11px); top: 5px; height: 1px; }
.wa-seq--tl .wa-seq-track i { height: 1px; width: calc(var(--p, 1) * 100%); }
.wa-tl { position: relative; padding: 36px 14px 0 0; }
.wa-tl::before { content: ""; position: absolute; left: 0; top: 0; width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(var(--wa-cyan), .9); background: rgb(var(--wa-cyan)); box-shadow: 0 0 16px rgba(var(--wa-cyan), .5); transition: all .6s; }
.wa-tl:first-child::before { border-color: rgba(var(--wa-magenta), .9); background: rgb(var(--wa-magenta)); box-shadow: 0 0 16px rgba(var(--wa-magenta), .45); }
.wa-tl .n { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .2em; color: var(--wa-dim); margin-bottom: 10px; }
.wa-tl h3 { font-size: clamp(1rem, .7rem + .9vw, 1.45rem); font-weight: 800; letter-spacing: -.01em; transition: color .6s; }
.wa-tl p { margin: 10px 0 0; font-size: .9rem; line-height: 1.55; color: var(--wa-muted); transition: opacity .6s; }
.wa-tl:last-child h3 { background: linear-gradient(92deg, #1D1B2F, #00775F); -webkit-background-clip: text; background-clip: text; color: transparent; }
.seq-on .wa-tl:not(.is-active)::before { background: var(--wa-bg); border-color: var(--wa-line-2); box-shadow: none; }
.seq-on .wa-tl:not(.is-active) h3 { color: #B3ACA1; -webkit-text-fill-color: #B3ACA1; }
.seq-on .wa-tl:not(.is-active) p { opacity: .3; }

/* ==========================================================================
   08 · WHAT MAKES MECANDRIA DIFFERENT — statement + three ruled columns
   ========================================================================== */
.wa-diff-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 28px clamp(40px, 6vw, 96px); align-items: end; }
.wa-diff-head .wa-h2 { margin-top: 24px; }
.wa-diff-head p { margin: 0; color: var(--wa-muted); font-size: 1.06rem; line-height: 1.7; }
.wa-concepts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin-top: clamp(56px, 7vw, 96px); list-style: none; padding: 0; }
.wa-concepts li { position: relative; padding-top: 28px; border-top: 1px solid var(--wa-line-2); }
.wa-concepts li::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 48px; background: linear-gradient(90deg, rgb(var(--wa-cyan)), rgba(var(--wa-violet), .9)); transition: width .7s var(--ease); }
.wa-concepts li:hover::before { width: 100%; }
.wa-concepts .k { font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--wa-dim); }
.wa-concepts h3 { margin: 18px 0 14px; font-size: clamp(1.35rem, 1rem + 1.1vw, 2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.wa-concepts p { margin: 0; color: var(--wa-muted); line-height: 1.65; max-width: 36ch; }

/* ==========================================================================
   09 · THE HUMAN SIDE — typography over an abstract field of meeting arcs
   ========================================================================== */
.wa-human { overflow: hidden; text-align: center; }
.wa-human::before { /* two sets of fine arcs overlapping = people meeting systems */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-radial-gradient(circle at 32% 60%, transparent 0 46px, rgba(var(--wa-violet), .07) 46px 47px),
    repeating-radial-gradient(circle at 68% 40%, transparent 0 46px, rgba(var(--wa-cyan), .06) 46px 47px);
  -webkit-mask-image: radial-gradient(60% 65% at 50% 50%, #000, transparent 80%); mask-image: radial-gradient(60% 65% at 50% 50%, #000, transparent 80%);
}
.wa-human .wa-h2 { margin: 24px auto 0; max-width: 18ch; }
.wa-human .wa-lead { margin: 28px auto 0; }

/* ---- closing CTA reuses the shared .final + .atmos band ---- */
.wa-cta .wa-chap { margin-bottom: 26px; }
.wa-cta h2 { font-size: clamp(1.6rem, .72rem + 2.4vw, 3.2rem); text-transform: uppercase; font-weight: 800; letter-spacing: -.04em; line-height: 1; max-width: 20ch; margin: 0 auto; }
.wa-cta .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.wa-cta .btn-light { background: #1D1B2F; color: #FBF8F3; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .wa-hero-grid { grid-template-columns: 1fr; }
  .wa-video { justify-self: start; max-width: 720px; }
  .wa-think { grid-template-columns: 1fr; }
  .wa-think-head { position: static; }
  .wa-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; }
  .wa-seq--tl .wa-seq-track { display: none; }
}
@media (max-width: 900px) {
  .wa-approach-head, .wa-diff-head, .wa-path-head { grid-template-columns: 1fr; }
  .wa-concepts { grid-template-columns: 1fr; gap: 44px; }
  .wa-diag li:nth-child(2) { --o: 10%; } .wa-diag li:nth-child(3) { --o: 20%; }
}
@media (max-width: 760px) {
  /* stages + timeline become one vertical storytelling line */
  .wa-stages, .wa-timeline { grid-template-columns: 1fr; padding-left: 34px; row-gap: 0; }
  .wa-seq--stages .wa-seq-track, .wa-seq--tl .wa-seq-track { display: block; left: 5px; right: auto; top: 10px; bottom: 10px; width: 1px; height: auto; }
  .wa-seq--stages .wa-seq-track i, .wa-seq--tl .wa-seq-track i { width: 1px; height: calc(var(--p, 1) * 100%); background: linear-gradient(180deg, rgba(var(--wa-cyan), .9), rgba(var(--wa-violet), .9)); }
  .wa-stage { text-align: left; padding: 0 0 44px; }
  .wa-stage:last-child { padding-bottom: 0; }
  .wa-stage::before { left: -34px; top: 4px; margin-left: 0; }
  .wa-stage p { margin-left: 0; }
  .wa-tl { padding: 0 0 34px; }
  .wa-tl:last-child { padding-bottom: 0; }
  .wa-tl::before { left: -34px; top: 3px; }
  .wa-diag li, .wa-diag li:nth-child(2), .wa-diag li:nth-child(3) { --o: 0%; padding-left: 26px; }
  .wa-diag li:not(:last-child)::after { left: 4px; top: 6px; height: calc(100% + clamp(56px, 7vw, 96px) - 6px); width: 1px; border-bottom: 0; border-radius: 0; }
  .wa-diag li::before { content: ""; position: absolute; left: 0; top: .9em; width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(var(--wa-cyan), .8); background: var(--wa-bg-2); z-index: 1; }
  .wa-diag .word { font-size: clamp(1.6rem, 7.6vw, 3.4rem); } /* TRANSFORMATION must fit at 320px */
  .wa-beliefs li { flex-direction: column; gap: 10px; }
  .wa-beliefs small { order: -1; }
  .wa-principles li { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
  .wa-idea-body > div { grid-template-columns: 1fr; }
  .wa-hero h1 { font-size: clamp(2rem, 9.4vw, 3rem); }
  .wa-hero-actions { flex-direction: column; }
  .wa-hero-actions .btn { width: 100%; }
}
@media (max-width: 380px) {
  .wa-hero-actions .btn { white-space: normal; font-size: 11.5px; padding-inline: 18px; }
  .wa-flabel { letter-spacing: .14em; font-size: 9px; }
  .wa-chap { letter-spacing: .18em; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-in, .wa-bars i, .wa-frow::before, .wa-flabel, .wa-field::before, .wa-frow:nth-child(4) .wa-bars::after { animation: none !important; }
  .wa-field-pulse { display: none; }
}