/* ---------- What We Do ----------
   what-we-do.html, top to bottom (js/wwd.js does the motion):
   - .wa: the hero, How we work and the four stages. The copy scrolls down
     the left; beside it a sticky canvas of app tiles builds a business's
     system as you go (loose round the star, gathered and flagged, a
     blueprint, snapped in and bridged, then new tiles and live pulses).
     Each part's place is a pure function of the scroll position.
   - .wa-rail: the road of the four stages, docked at the foot of the
     screen (position:sticky, bottom) for the whole of .wa, then carried
     off with its end as the project cards arrive. The marker travels with
     the scroll and each stop lights up as you reach it.
   - .wk (#in-practice): the projects, one card each, sliding up and
     stacking; each card's four stages settle in side by side and "Where it
     could go next" is a drawer along its foot.
   Sizes are in rem (see the design scale in style.css). Reduced motion:
   each stage's canvas shown in place and the cards don't stack. No JS:
   the copy, the stops as plain links and the cards one after another. */
.wa, .wk, .case-overlay{
  --wa-page:#ECE9E1; --wa-ink:#11121A; --wa-head:#0F1D07;
  --wa-ink-70:rgba(17,18,26,.7); --wa-ink-55:rgba(17,18,26,.55); --wa-ink-45:rgba(17,18,26,.45); --wa-ink-14:rgba(17,18,26,.14); --wa-ink-08:rgba(17,18,26,.08); --wa-ink-06:rgba(17,18,26,.06);
  --wa-blue:#4C7FC9; --wa-blue-d:#385C95; --wa-blue-bg:#E3EBF6;
  --wa-teal:#285E65; --wa-mint:#83D4CE; --wa-mint-bg:rgba(131,212,206,.24); --wa-mint-soft:#D7F0EE;
  --wa-note:#FFF3C4; --wa-note-ink:#5B4300; --wa-rose:#F6E2DA; --wa-rose-ink:#8A3E26;
  --wa-red:#B3402E; --wa-red-bg:#FBE3DE; --wa-green:#2F7A4F; --wa-green-bg:#DDF0E3; --wa-amber:#B7791F; --wa-amber-bg:#FBEFD5;
  --wa-snap:cubic-bezier(.34,1.45,.64,1); --wa-ease:cubic-bezier(.2,.7,.2,1);
  --wa-vh:100vh;
}
.wa, .wk{ position:relative; background: var(--wa-page); color: var(--wa-ink); }
@supports (height:100svh){ .wa, .wk{ --wa-vh:100svh; } }
/* The page keeps About's body class for shared bits, but sits on light
   paper, so the shell takes the page colour and the logo stays dark
   (About inverts it for its photo) */
.what-we-do-page .page-shell{ background: var(--paper-alt); }
.what-we-do-page .brand-logo{ filter:none; }

/* Shared type */
.wa-eyebrow{ margin:0; font-size:0.8125rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--wa-teal); }
/* A square in the page's mint marks each label (as Home's eyebrow does) */
.wa-eyebrow::before{ content:""; display:inline-block; width:0.5625rem; height:0.5625rem; margin-right:0.625rem; border-radius:2px; background:var(--wa-mint); vertical-align:0.06em; }
.wa-h2{ margin:0.875rem 0 0; max-width:14ch; font-size: clamp(2.25rem, 4.6vw, 4rem); line-height:1.03; letter-spacing:-.025em; font-weight:600; color: var(--wa-head); }
.wa-lede{ margin:1.125rem 0 0; max-width:36em; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height:1.5; color: var(--wa-ink-70); }

/* =====================================================================
   The process: copy on the left, the canvas sticky on the right, the road
   docked along the foot. --wa-rh is the road's height; the canvas and
   each block centre in the screen above it.
   ===================================================================== */
.wa{
  --wa-tw: clamp(5.25rem, 6.6vw, 7rem); --wa-th: calc(var(--wa-tw) * .64); --wa-ss: calc(var(--wa-th) * .82);
  --wa-rh: calc(var(--wa-th) + 3.5rem);
  overflow-x:clip;
}
/* The same edges and middle gap as the Home hero (--page-edge, --page-gap in style.css) */
.wa-grid{ max-width:92.5rem; margin:0 auto; padding:0 var(--logo-inset); display:grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--page-gap); }
.wa-text{ min-width:0; }
/* Room after Scale for the marker to reach the star before the road lets go */
html.js .wa-text{ padding-bottom: calc(var(--wa-vh) * .3); }
.wa-blk{ min-height: calc(var(--wa-vh) - var(--wa-rh)); display:flex; flex-direction:column; justify-content:center; padding:3.5rem 0; }
.wa-blk--hero{ padding-top: clamp(6.5rem, 9vw, 8rem); }
.wa-blk--intro{ min-height: calc((var(--wa-vh) - var(--wa-rh)) * .8); }
.wa-title{ margin:1rem 0 0; max-width:12ch; font-size: clamp(2.75rem, 6vw, 5.5rem); line-height:1; letter-spacing:-.03em; font-weight:600; color: var(--wa-head); }
.wa-w{ display:inline-block; }
/* The headline rises into place word by word on the same timings as
   Home's (css/home.css hs-word-in: .5s each, .035s apart, from load) */
html.js .wa-w{ animation: wa-word-in .5s var(--wa-snap) both; }
html.js .wa-w:nth-child(2){ animation-delay:.035s; } html.js .wa-w:nth-child(3){ animation-delay:.07s; }
html.js .wa-w:nth-child(4){ animation-delay:.105s; } html.js .wa-w:nth-child(5){ animation-delay:.14s; } html.js .wa-w:nth-child(6){ animation-delay:.175s; }
@keyframes wa-word-in{ from{ opacity:0; transform: translateY(.22em); } to{ opacity:1; transform:none; } }
.wa-blk--hero .wa-lede{ margin-top:1.375rem; max-width:34em; }
/* The buttons carry the brand star, as on Home (css/home.css .hs-btn):
   it rests small and turned, and snaps into place on hover/focus */
.wa-btn{ gap:0.75rem; }
.wa-btn-tile{
  display:inline-block; flex:none; width:0.8125rem; height:0.8125rem; background: var(--wa-blue);
  -webkit-mask: var(--bm-star) center / contain no-repeat;
          mask: var(--bm-star) center / contain no-repeat;
  transform: translate(-2px, 2px) rotate(-30deg) scale(.78);
  transition: transform .55s var(--wa-snap), background-color 0s linear .1s;
}
.btn-outline .wa-btn-tile{ background: var(--wa-ink); }
.wa-btn:hover .wa-btn-tile, .wa-btn:focus-visible .wa-btn-tile{ transform:none; background:#F4F2ED; }
/* In the page's own colours: the dark pill fills the light mint on hover
   (not the site's default blue), with dark text and star on it; its star
   is mint at rest */
.wa .btn-pill.wa-btn{ --btn-fill: var(--wa-mint); }
.wa .btn-pill.wa-btn:hover, .wa .btn-pill.wa-btn:focus-visible{ color: var(--wa-ink); }
.wa .btn-pill .wa-btn-tile{ background: var(--wa-mint); }
.wa .btn-pill.wa-btn:hover .wa-btn-tile, .wa .btn-pill.wa-btn:focus-visible .wa-btn-tile{ background: var(--wa-ink); }
.wa-ctas{ display:flex; flex-wrap:wrap; gap:0.75rem; margin-top:2rem; }
.wa-num{ display:flex; align-items:center; gap:0.625rem; margin:0; font-size:0.8125rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--wa-teal); }
.wa-num b{ display:grid; place-items:center; width:2rem; height:2rem; border-radius:0.625rem; background: var(--wa-mint-bg); font-size:0.8125rem; letter-spacing:0; }
.wa-blk--step h3{ margin:1rem 0 0; max-width:16ch; font-size: clamp(1.75rem, 3vw, 2.75rem); line-height:1.08; letter-spacing:-.022em; font-weight:600; color: var(--wa-head); }
.wa-blk--step .wa-in > p:not(.wa-num){ margin:1rem 0 0; max-width:32em; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height:1.55; color: var(--wa-ink-70); }
.wa-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:0.5rem; margin:1.375rem 0 0; padding:0; max-width:36em; }
.wa-tags li{ padding:0.375rem 0.75rem; border-radius:62.4375rem; border:1px solid var(--wa-ink-14); background: rgba(255,255,255,.72); font-size:0.8125rem; font-weight:500; line-height:1.2; }

/* The canvas column */
.wa-col{ position:relative; min-width:0; }
/* The canvas sits against the column's right edge (the page's edge), as
   the Home hero's visual does, with its caption centred under it */
.wa-sticky{ --wa-stage-w: min(100%, calc(var(--wa-vh) - var(--wa-rh) - 13rem), 37.5rem); position:sticky; top:0; height: calc(var(--wa-vh) - var(--wa-rh)); display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:0.5rem; padding-top:4.5rem; }
.wa-stage-wrap{ width: calc(100% + 5rem); margin:0 -2.5rem; padding:2.5rem; display:flex; justify-content:center;
  -webkit-mask: linear-gradient(to bottom, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent), linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(to bottom, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent), linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
  mask-composite: intersect; justify-content:flex-end; }
.wa-stage{ position:relative; width: var(--wa-stage-w, 37.5rem); aspect-ratio:1; --ring: var(--wa-page); }
.wa-stage::before{ content:""; position:absolute; inset:-14%; background-image: radial-gradient(var(--wa-ink-14) 1px, transparent 1.3px); background-size:1.375rem 1.375rem; -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent); mask-image: radial-gradient(closest-side, #000 50%, transparent); pointer-events:none; }
.wa-rm{ display:none; }
html:not(.js) .wa-col{ display:none; }
html:not(.js) .wa-grid{ grid-template-columns: minmax(0, 1fr); }
html:not(.js) .wa-blk{ min-height:0; }

/* The system canvas: tiles, a dashed blueprint, bridges and the star hub */
@property --wa-t{ syntax:'<number>'; inherits:false; initial-value:0; }
@keyframes wa-bob{ from{ --wa-t:-1; } to{ --wa-t:1; } }
.sys .world{ position:absolute; inset:0; transform-origin:50% 50%; pointer-events:none; }
.sys .layer{ position:absolute; inset:0; }
.sys .tile, .sys .hub, .sys .cell, .sys .bridge{ position:absolute; left:0; top:0; }
.sys .tile, .sys .hub, .sys .cell{ width: var(--m); height: var(--m); }
.sys .tile-in{ position:absolute; inset:0; border-radius:22%; transform: translate3d(0, calc(var(--wa-t) * var(--bob, 0) * -6px), 0) rotate(calc(var(--wa-t) * var(--bob, 0) * var(--br, 2deg))); }
.sys.bobbing .tile-in{ animation: wa-bob var(--bd, 5s) ease-in-out var(--bdl, 0s) infinite alternate; }
.sys .tile-in > i{ position:absolute; inset:0; border-radius:inherit; }
.sys .t-card{ background:#fff; border:1px solid var(--wa-ink-06); box-shadow: 0 1px 0 var(--wa-ink-06), 0 0.875rem 1.625rem -1.125rem rgba(17,18,26,.55); transition: background-color .35s ease; }
.sys .t-lift{ box-shadow: 0 1.875rem 2.5rem -1.25rem rgba(17,18,26,.42); opacity:0; }
.sys .t-amb{ background: var(--wa-amber-bg); box-shadow: inset 0 0 0 1.5px rgba(183,121,31,.6); opacity:0; }
.sys .t-glow{ box-shadow: 0 0 0 2px var(--wa-blue), 0 0 1.125rem 2px rgba(76,127,201,.45); opacity:0; }
.sys .t-flash{ border:2px solid var(--wa-blue); opacity:0; }
.sys .t-ic{ position:absolute; left:13%; top:13%; width:26%; height:26%; color: var(--wa-teal); transition: color .35s ease; }
.sys .t-lab{ position:absolute; left:12%; right:6%; bottom:10%; font-size: var(--lf); font-weight:700; line-height:1.06; letter-spacing:-.01em; color: var(--wa-ink); opacity: var(--lab, 1); overflow-wrap:break-word; transition: color .35s ease; }
.sys .t-badge{ position:absolute; right:-10%; top:-12%; padding:.3em .62em; border-radius:62.4375rem; background: var(--wa-amber); color:#fff; font-size: calc(var(--lf) * .82); font-weight:700; line-height:1.1; white-space:nowrap; opacity:0; box-shadow: 0 0.375rem 0.75rem -0.375rem rgba(17,18,26,.5); }
.sys .tile.is-new .t-card{ background:#E6F5F3; border-color: rgba(40,94,101,.32); }
.sys .tile.is-acc .t-card{ background: var(--wa-blue); border-color:transparent; }
.sys .tile.is-acc .t-ic, .sys .tile.is-acc .t-lab{ color:#fff; }
.sys .hub-in{ position:absolute; inset:0; border-radius:24%; display:grid; place-items:center; background: linear-gradient(155deg, #30323D, #11121A); color:#fff; box-shadow: 0 0 0 calc(var(--m) * .05) var(--ring), 0 1.125rem 1.875rem -1rem rgba(17,18,26,.6); }
.sys .hub-star{ width:40%; height:40%; }
.sys .hub-glow{ position:absolute; inset:-26%; border-radius:40%; background: radial-gradient(closest-side, rgba(131,212,206,.7), rgba(131,212,206,0)); opacity:0; }
.sys .cell{ border-radius:22%; border:1.5px dashed rgba(17,18,26,.3); opacity:0; }
.sys .cell.plan{ border-color: var(--wa-teal); background: rgba(131,212,206,.18); }
.sys .cell.plan::before, .sys .cell.plan::after{ content:""; position:absolute; left:50%; top:50%; width:24%; height:3px; margin:-1.5px 0 0 -12%; border-radius:2px; background: var(--wa-teal); opacity:.75; }
.sys .cell.plan::after{ transform: rotate(90deg); }
.sys .bridge{ background: var(--wa-head); border-radius:6.1875rem; overflow:hidden; opacity:0; }
.sys .bridge i{ position:absolute; left:0; top:0; width:60%; height:100%; background: linear-gradient(90deg, rgba(131,212,206,0), var(--wa-mint) 35%, #fff 50%, var(--wa-mint) 65%, rgba(131,212,206,0)); opacity:0; }
.sys .bridge.v i{ width:100%; height:60%; background: linear-gradient(180deg, rgba(131,212,206,0), var(--wa-mint) 35%, #fff 50%, var(--wa-mint) 65%, rgba(131,212,206,0)); }

/* ---------- The road ---------- */
.wa-rail{ position:relative; z-index:20; padding:2.25rem var(--page-edge) 1.25rem; }
html.js .wa-rail{ position:sticky; bottom:0; }
/* A soft fade of the page behind it, so the copy passing underneath stays clear of it */
html.js .wa-rail::before{ content:""; position:absolute; inset:-1.5rem 0 0; z-index:-1; background: linear-gradient(rgba(236,233,225,0), rgba(236,233,225,.92) 2.25rem, var(--wa-page) 4rem); pointer-events:none; }
.wa-rail-in{ position:relative; height: var(--wa-th); }
.wa-line{ position:absolute; left:0; right:0; top:50%; height:0.375rem; margin-top:-0.1875rem; border-radius:0.375rem; overflow:hidden; }
.wa-line-base{ position:absolute; inset:0; background: rgba(17,18,26,.13); transform-origin:0 50%; transition: transform 1.1s var(--wa-ease) .2s; }
.wa-line-dash{ position:absolute; top:2px; height:2px; left:0; width: calc(100% + 1.5rem); background: repeating-linear-gradient(90deg, rgba(255,255,255,.95) 0 0.625rem, transparent 0.625rem 1.5rem); opacity:0; }
.wa-line-fill{ position:absolute; top:0; bottom:0; left:0; width: calc(100% - var(--wa-ss) / 2); border-radius:inherit; background: linear-gradient(90deg, var(--wa-blue-d), var(--wa-blue)); transform-origin:0 50%; transform: scaleX(0); }
.wa-mk{ position:absolute; z-index:1; left:0; top:50%; width:0; height:0; display:none; }
.wa-mk-in{ position:absolute; left:-0.6875rem; top:-0.6875rem; width:1.375rem; height:1.375rem; transition: opacity .25s ease 1.25s, transform .6s var(--wa-snap) 1.25s; }
.wa-mk-in i{ display:block; width:100%; height:100%; border-radius:50%; background: var(--wa-blue); box-shadow: 0 0 0 0.25rem #fff, 0 0 0 0.625rem rgba(76,127,201,.2), 0 0.5rem 1.125rem -0.375rem rgba(17,18,26,.5); }
.wa-mk-in em{ position:absolute; left:-0.375rem; bottom: calc(100% + 1rem); padding:0.3125rem 0.625rem; border-radius:62.4375rem; background: var(--wa-ink); color:#fff; font-style:normal; font-size:0.75rem; font-weight:700; white-space:nowrap; transition: opacity .3s ease; }
.wa-mk-in em::after{ content:""; position:absolute; left:0.75rem; top:100%; border:0.3125rem solid transparent; border-top-color: var(--wa-ink); }
.wa-stops{ list-style:none; margin:0; padding:0; }
.wa-stops li{ position:absolute; z-index:2; top:50%; left: calc((100% - var(--wa-ss) / 2) * var(--at)); width: var(--wa-tw); height: var(--wa-th); margin: calc(var(--wa-th) / -2) 0 0 calc(var(--wa-tw) / -2); }
.wa-stops a{ display:block; width:100%; height:100%; border-radius: calc(var(--wa-tw) * .12); text-decoration:none; color:inherit; }
.wa-st{
  display:flex; flex-direction:column; justify-content:space-between; width:100%; height:100%;
  padding: calc(var(--wa-tw) * .085) calc(var(--wa-tw) * .1); border-radius:inherit; background:#fff; border:1.5px solid var(--wa-ink-06);
  box-shadow: 0 1px 0 var(--wa-ink-06), 0 1.5rem 3rem -1.875rem rgba(17,18,26,.42);
  transition: opacity .3s ease var(--d, 0s), transform .75s var(--wa-snap) var(--d, 0s), translate .5s var(--wa-snap), border-color .3s ease, box-shadow .3s ease;
}
.wa-st-top{ display:flex; align-items:center; justify-content:space-between; }
.wa-st b{ font-size: calc(var(--wa-tw) * .1); font-weight:500; letter-spacing:.12em; color: var(--wa-ink-45); transition: color .3s ease; }
.wa-st svg{ width: calc(var(--wa-tw) * .17); height: calc(var(--wa-tw) * .17); color: var(--wa-teal); }
.wa-st-l{ font-size: calc(var(--wa-tw) * .165); font-weight:700; letter-spacing:-.01em; line-height:1.1; color: var(--wa-ink); }
.wa-stops a:hover .wa-st{ border-color: rgba(40,94,101,.5); }
.wa-stops a:focus-visible{ outline:2px solid var(--wa-teal); outline-offset:0.1875rem; }
.wa-stops li.is-past .wa-st{ border-color: rgba(40,94,101,.4); }
.wa-stops li.is-past .wa-st b{ color: var(--wa-teal); }
.wa-stops li.is-now .wa-st{ translate:0 -9%; border-color: var(--wa-teal); box-shadow: 0 0 0 0.25rem var(--wa-mint-bg), 0 1.625rem 2.75rem -1.5rem rgba(40,94,101,.55); }
.wa-star{ position:absolute; z-index:2; top:50%; left: calc(100% - var(--wa-ss) / 2); width: var(--wa-ss); height: var(--wa-ss); margin: calc(var(--wa-ss) / -2) 0 0 calc(var(--wa-ss) / -2); }
.wa-star-in{ display:grid; place-items:center; width:100%; height:100%; border-radius:26%; background: linear-gradient(155deg, #30323D, #11121A); color:#fff; box-shadow: 0 0 0 0.3125rem var(--wa-page), 0 0.875rem 1.75rem -0.875rem rgba(17,18,26,.6); transition: opacity .3s ease 1.05s, transform .8s var(--wa-snap) 1.05s, box-shadow .4s ease; }
.wa-star-in svg{ width:46%; height:46%; }
.wa-star.is-now .wa-star-in{ box-shadow: 0 0 0 0.3125rem var(--wa-page), 0 0 0 0.6875rem rgba(131,212,206,.55), 0 1.125rem 2.125rem -0.875rem rgba(17,18,26,.65); }
/* Motion on: the marker shows and the road's markings stream past */
.wa.is-live .wa-mk{ display:block; }
.wa.is-live .wa-line-dash{ opacity:.9; }
/* Load: the road draws, the stops land one by one, the star last */
.wa.is-live:not(.is-go) .wa-line-base{ transform: scaleX(0); }
.wa.is-live:not(.is-go) .wa-st{ opacity:0; transform: translateY(46%) rotate(-10deg) scale(.6); }
.wa.is-live:not(.is-go) .wa-star-in{ opacity:0; transform: scale(.3) rotate(-120deg); }
.wa.is-live:not(.is-go) .wa-mk-in{ opacity:0; transform: scale(0); }

/* =====================================================================
   Our work: stacking project cards
   ===================================================================== */
.wk{ overflow-x:clip; padding: clamp(2.5rem, 5vw, 4.5rem) var(--page-edge) 4rem; }
.wk-head{ margin:0 0 clamp(2rem, 4vw, 3.5rem); }
.wk-head .wa-h2{ max-width:none; }
.wk-head .wa-h2:focus{ outline:none; }
.pc-stack{ margin:0; }
.wk.is-stacking .pc-stack{ padding-bottom:8vh; }
/* (the stack's own 8vh runway counts towards the gap above the footer) */
.wk.is-stacking{ padding-bottom: max(1rem, calc(4rem - 8vh)); }
.pc{ position:relative; margin-top:3rem; transform-origin:50% 0; }
.pc:first-child{ margin-top:0; }
.wk.is-stacking .pc{ position:sticky; top: var(--top, 6rem); margin-top:7vh; }
.wk.is-stacking .pc:first-child{ margin-top:0; }
.wk.is-stacking .pc-stage{ will-change: transform, opacity; }
.pc-in{ --pcpad: clamp(1.125rem, 2.3vw, 1.875rem); position:relative; overflow:hidden; padding: var(--pcpad); border-radius:1.75rem; background:#fff; border:1px solid var(--wa-ink-06); box-shadow: 0 1px 0 var(--wa-ink-06), 0 2.5rem 5rem -2.875rem rgba(17,18,26,.5); }
.pc-dim{ position:absolute; inset:0; z-index:9; border-radius:inherit; background: var(--wa-ink); opacity:0; pointer-events:none; }
.pc-head{ display:grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 0.875rem clamp(1.5rem, 4vw, 3.5rem); align-items:start; }
.pc-kicker{ display:flex; align-items:center; gap:0.5rem; margin:0; font-size:0.8125rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--wa-teal); }
.pc-kicker::before{ content:""; width:0.5625rem; height:0.5625rem; border-radius:2px; background: var(--wa-mint); }
.pc-head h3{ margin:0.625rem 0 0; font-size: clamp(1.4375rem, 2.2vw, 2rem); line-height:1.12; letter-spacing:-.02em; font-weight:600; color: var(--wa-head); }
.pc-note{ display:inline-block; margin:0.75rem 0 0; padding:0.25rem 0.625rem; border-radius:62.4375rem; background: var(--wa-ink-06); font-size:0.7813rem; font-weight:600; color: var(--wa-ink-55); }
.pc-note.is-illus{ background: var(--wa-amber-bg); color:#7A5410; }
.pc-brief{ margin:0; font-size:0.9688rem; line-height:1.55; color: var(--wa-ink-70); }
/* Each project in its client's colours: the head is a band of the brand's
   main colour, and the mini illustrations take its palette (they're drawn
   with the --wa-teal/--wa-mint/--wa-blue tokens). High School Australia:
   a blue and red, toned to sit with the site (its logo's royal blue
   stood out too much): the site's own deep blue and a softer red. Coastal: its site's sage header with
   charcoal type, and its sand. The illustrative website keeps Rethink's teal. */
.pc, .case-overlay{ --pc-bg: var(--wa-teal); --pc-accent: var(--wa-mint); --pc-tag-ink: var(--wa-teal); }
.pc--hsa{ --pc-bg:#385C95; --pc-accent:#E2533A; --pc-tag-ink:#fff;
  --wa-teal:#385C95; --wa-mint:#E2533A; --wa-mint-bg:rgba(56,92,149,.1); --wa-mint-soft:#E3EBF6;
  --wa-blue:#385C95; --wa-blue-d:#385C95; --wa-blue-bg:#E3EBF6; }
.pc--coastal{ --pc-bg:#B0D4CA; --pc-accent:#24282A; --pc-ink:#24282A; --pc-tag-ink:#fff;
  --wa-teal:#24282A; --wa-mint:#B0D4CA; --wa-mint-bg:rgba(176,212,202,.42); --wa-mint-soft:#DCEBE6;
  --wa-blue:#24282A; --wa-blue-d:#24282A; --wa-blue-bg:#EAE7E0; }
.pc-head{ margin: calc(-1 * var(--pcpad)) calc(-1 * var(--pcpad)) 0; padding: var(--pcpad); background: var(--pc-bg); }
.pc-head .pc-kicker{ color: var(--pc-ink, #fff); }
.pc-head .pc-kicker::before{ background: var(--pc-accent); }
.pc-head h3{ color: var(--pc-ink, #fff); }
.pc-head .pc-brief{ color: var(--pc-ink, #fff); opacity:.84; }
.pc-head .pc-note{ background: rgba(255,255,255,.14); color: rgba(255,255,255,.88); }
.pc--coastal .pc-head .pc-note{ background: rgba(36,40,42,.1); color: var(--pc-ink); }
.pc-head .pc-note.is-illus{ background: var(--wa-amber-bg); color:#7A5410; }
/* The card: the client, the headline, one line and a screen from the
   project, on the client's colour (Read more opens the full case study) */
.wk .pc-in{ --pcpad: clamp(1.5rem, 3.6vw, 3.5rem); background: var(--pc-bg); border:0; color: var(--pc-ink, #fff); }
.pc-sum{ display:grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items:stretch; }
.pc-sum-copy{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.pc-tag{ margin:0; padding:0.4375rem 0.9375rem; border-radius:62.4375rem; background: var(--pc-accent); color: var(--pc-tag-ink); font-size:0.875rem; font-weight:600; line-height:1.2; }
/* The client, then their own words (or, without a client yet, the
   one-liner) filling the card. The project's headline stays the card's
   heading for screen readers only (it leads the full case study). The
   whole card opens the case study (js/article-overlay.js). */
.pc-sum-top{ display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 0.875rem; }
.pc-sum h3{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip: rect(0 0 0 0); white-space:nowrap; border:0; }
.wk .pc-in:has(.pc-more){ cursor:pointer; }
.pc-sum-lede{ flex:1; margin: clamp(1.25rem, 2.6vw, 2.25rem) 0 0; font-size: clamp(1.625rem, 2.7vw, 2.625rem); line-height:1.14; letter-spacing:-.02em; font-weight:500; }
/* The client, in their own words */
.pc-quote{ flex:1; display:flex; flex-direction:column; margin: clamp(1.25rem, 2.6vw, 2.25rem) 0 0; }
.pc-quote p{ margin:0; font-size: clamp(1.625rem, 2.7vw, 2.625rem); line-height:1.14; letter-spacing:-.02em; font-weight:500; text-indent:-.42em; }
.pc-quote footer{ display:flex; flex-direction:column; gap:0.125rem; margin-top:auto; padding-top: clamp(1.5rem, 3vw, 2.5rem); font-size:1rem; line-height:1.35; }
.pc-quote footer b{ font-weight:600; }
.pc-quote footer span{ opacity:.72; }
.pc-more{
  display:inline-flex; align-items:center; gap:0.625rem; margin-top: clamp(1.125rem, 2vw, 1.625rem); padding:0.75rem 1.25rem;
  border:0; border-radius:62.4375rem; background: rgba(255,255,255,.14); color:inherit; font: inherit; font-size:0.9688rem; font-weight:600; cursor:pointer;
  transition: background-color .25s ease, transform .3s var(--wa-snap);
}
.pc--coastal .pc-more{ background: rgba(36,40,42,.09); }
.pc-more svg{ width:1.125rem; height:1.125rem; transition: transform .35s var(--wa-snap); }
.pc-more:hover{ background: rgba(255,255,255,.24); }
.pc--coastal .pc-more:hover{ background: rgba(36,40,42,.15); }
.pc-more:hover svg, .pc-more:focus-visible svg{ transform: translateX(0.25rem); }
.pc-more:active{ transform: scale(.97); }
.pc-more:focus-visible{ outline:2px solid currentColor; outline-offset:0.1875rem; }
.pc-sum-vis{ min-width:0; }
.pc-sum-vis .pc-vis{ height:100%; min-height: clamp(14rem, 26vw, 24rem); aspect-ratio:auto; border-radius:1.25rem; border:0; box-shadow: 0 1.5rem 3rem -1.5rem rgba(0,0,0,.35); }
.pc-sum-vis .pc-shot img{ position:absolute; inset:0; object-position: 0 0; }
@media (max-width:860px){
  .pc-sum{ grid-template-columns: minmax(0, 1fr); gap:1.5rem; }
  .pc-sum-lede, .pc-quote{ margin-top:1.25rem; }
  .pc-sum-lede, .pc-quote p{ font-size: clamp(1.375rem, 6vw, 1.75rem); }
  .pc-quote footer{ padding-top:1rem; }
  .pc-sum-vis .pc-vis{ min-height:0; aspect-ratio: 16 / 11; }
}

/* The full case study, opened over the page (js/article-overlay.js
   showCase), growing out of its card: the client's colour band with the
   headline and brief, then the four stages, which rise in one by one */
.case-overlay .article-overlay-shape{ background: var(--wa-page); overflow:clip; }
/* (it grows out of its card instead of sliding up: js/article-overlay.js morphCard) */
.article-overlay.case-overlay .article-overlay-panel{ transform:none; transition:none; }
/* Centred on the screen, like the contact form's pop-up (it scrolls inside
   the screen if it's taller than it) */
.case-overlay .article-overlay-panel{ display:flex; flex-direction:column; padding: clamp(0.75rem, 4vh, 2.5rem) var(--gutter, 1.25rem); }
.article-overlay.case-overlay .article-overlay-shape{ margin:auto; width:100%; max-width: min(78rem, 100%); border-radius:2rem; }
.case-overlay .article-close{ background: rgba(255,255,255,.88); color: var(--wa-ink); }
.case-overlay .article-close:hover{ background:#fff; }
.pc-pop{ --pcpad: clamp(1.5rem, 4vw, 3.5rem); --pop-x: max(var(--pcpad), calc((100% - 76rem) / 2)); color: var(--wa-ink); }
.pc-pop .pc-head{ margin:0; padding: clamp(3.75rem, 7vw, 5.5rem) var(--pop-x) clamp(1.75rem, 3.6vw, 3rem); }
.pc-pop .pc-head h3{ font-size: clamp(1.75rem, 3.4vw, 3rem); line-height:1.06; }
.pc-pop .pc-body{ margin:0; padding: clamp(1.75rem, 3.6vw, 3rem) var(--pop-x) clamp(2.5rem, 6vw, 5rem); }
.case-overlay.open .pc-pop .pc-stage{ animation: pc-rise .7s var(--wa-snap) both; }
.case-overlay.open .pc-pop .pc-stage:nth-child(1){ animation-delay:.28s; }
.case-overlay.open .pc-pop .pc-stage:nth-child(2){ animation-delay:.36s; }
.case-overlay.open .pc-pop .pc-stage:nth-child(3){ animation-delay:.44s; }
.case-overlay.open .pc-pop .pc-stage:nth-child(4){ animation-delay:.52s; }
@keyframes pc-rise{ from{ opacity:0; transform: translate3d(0, 2.875rem, 0) rotate(-1.8deg); } }
@media (prefers-reduced-motion: reduce){ .case-overlay.open .pc-pop .pc-stage{ animation:none; } }

.pc-body{ position:relative; margin-top: clamp(1.125rem, 2.2vw, 1.625rem); }
.pc-swipe{ display:none; }
.pc-scroll:focus-visible{ outline:2px solid var(--wa-teal); outline-offset:0.25rem; border-radius:0.875rem; }
.pc-strip{ list-style:none; margin:0; padding:0; position:relative; display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:1.125rem; }
.pc-stage{ min-width:0; }
.pc-vis{ position:relative; overflow:hidden; margin:0; aspect-ratio: 16 / 11; border-radius:0.875rem; background: linear-gradient(160deg, #fff, #F3F2EE); border:1px solid var(--wa-ink-08); container-type:inline-size; }
.pc-shot img{ display:block; width:100%; height:100%; object-fit:cover; object-position:0 0; }
.pc-shot.is-map{ background:#0F1720; }
.pc-shot.is-map img{ object-position:24% 50%; }
.pc-num{ display:flex; align-items:center; gap:0.5rem; margin:0.875rem 0 0; font-size:0.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--wa-teal); }
.pc-num b{ display:grid; place-items:center; width:1.625rem; height:1.625rem; border-radius:0.5rem; background: var(--wa-mint-bg); font-size:0.75rem; letter-spacing:0; }
.pc-stage h4{ margin:0.5rem 0 0; font-size:1.0313rem; line-height:1.25; letter-spacing:-.01em; font-weight:700; color: var(--wa-head); }
.pc-stage > p:not(.pc-num){ margin:0.375rem 0 0; font-size:0.875rem; line-height:1.5; color: var(--wa-ink-70); }
.pc-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:0.3125rem; margin:0.625rem 0 0; padding:0; }
.pc-tags li{ padding:0.25rem 0.5625rem; border-radius:62.4375rem; border:1px solid var(--wa-ink-14); font-size:0.7188rem; font-weight:500; line-height:1.2; }
/* Mini visuals inside the stage thumbnails (coded; sample content) */
.mv{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:4.5cqw; padding:6cqw; font-size:3.25cqw; line-height:1.22; font-weight:600; color: var(--wa-ink); }
.mv p{ margin:0; }
.mv-quotes{ display:grid; grid-template-columns:1fr 1fr; gap:2.6cqw; }
.mv-quotes span{ padding:.55em .65em; border-radius:.5em; background: var(--wa-note); color: var(--wa-note-ink); rotate:-1.5deg; box-shadow: 0 .6em 1em -.8em rgba(17,18,26,.5); }
.mv-quotes .b{ background: var(--wa-mint-soft); color: var(--wa-teal); rotate:1.2deg; }
.mv-quotes .c{ background: var(--wa-blue-bg); color: var(--wa-blue-d); rotate:.8deg; }
.mv-quotes .d{ background: var(--wa-rose); color: var(--wa-rose-ink); rotate:-1deg; }
.mv-row{ display:flex; align-items:center; gap:.3em; font-size:.92em; }
.mv-row span{ flex:none; padding:.38em .5em; border-radius:62.4375rem; background:#fff; border:1.2px solid var(--wa-ink-14); font-weight:700; }
.mv-row i{ flex:1; min-width:.3em; height:1.5px; background: var(--wa-ink-45); }
.mv-row span:last-child{ background: var(--wa-teal); border-color: var(--wa-teal); color:#fff; }
.mv-row span.key{ border-color: var(--wa-teal); background: var(--wa-mint-bg); color: var(--wa-teal); }
.mv-row.sq span{ border-radius:.5em; }
.mv-autos{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4em; }
.mv-autos span{ padding:.4em .7em; border-radius:62.4375rem; background: var(--wa-mint-bg); color: var(--wa-teal); font-weight:700; }
.mv-lanes{ display:grid; grid-template-columns: repeat(3, 1fr); gap:.4em; }
.mv-lanes span{ padding:.45em; border-radius:.5em; border:1px dashed var(--wa-ink-14); text-align:center; color: var(--wa-ink-45); }
.mv-qs{ display:flex; flex-direction:column; gap:.45em; }
.mv-qs p{ display:flex; align-items:center; gap:.6em; padding:.55em .7em; border-radius:.6em; background:#fff; border:1px solid var(--wa-ink-06); box-shadow: 0 .5em 1em -.8em rgba(17,18,26,.45); }
.mv-qs b{ display:grid; place-items:center; flex:none; width:1.7em; height:1.7em; border-radius:.45em; background: var(--wa-mint-bg); color: var(--wa-teal); }
.mv-pipe{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:.55em; }
.mv-pipe span{ position:relative; display:flex; flex-direction:column; gap:.15em; padding:.6em .55em; border-radius:.6em; background:#fff; border:1.2px solid var(--wa-ink-14); box-shadow: 0 .5em 1em -.8em rgba(17,18,26,.45); }
.mv-pipe span + span::before{ content:""; position:absolute; left:-.55em; top:50%; width:.55em; height:1.5px; background: var(--wa-ink-45); }
.mv-pipe em{ font-style:normal; font-size:.85em; color: var(--wa-ink-55); }
.mv-pipe b{ font-size:1.7em; line-height:1.05; letter-spacing:-.02em; }
.mv-pipe small{ font-size:.75em; font-weight:500; color: var(--wa-ink-45); }
.mv-pipe .key{ border-color: var(--wa-teal); background: var(--wa-mint-bg); }
.mv-pipe .key b{ color: var(--wa-teal); }
.mv-pipe .win{ border-color: var(--wa-teal); background: var(--wa-teal); }
.mv-pipe .win em, .mv-pipe .win b, .mv-pipe .win small{ color:#fff; }
/* The sources (market data, the alert areas) and the CRM, connected
   through one central database */
.mv-sys{ display:grid; grid-template-columns: 1fr 1.1fr 1fr; grid-template-rows: auto auto; align-items:center; gap:.6em 1.2em; }
.mv-sys span{ position:relative; display:flex; flex-direction:column; gap:.2em; padding:.7em .6em; border-radius:.6em; background:#fff; border:1.2px solid var(--wa-ink-14); text-align:center; box-shadow: 0 .5em 1em -.8em rgba(17,18,26,.45); }
.mv-sys em{ font-style:normal; font-weight:500; font-size:.82em; color: var(--wa-ink-45); }
.mv-sys .hub{ padding:1em .6em; border-color: var(--wa-teal); background: var(--wa-teal); color:#fff; }
.mv-sys .hub em{ color: rgba(255,255,255,.75); }
.mv-sys .src{ grid-column:1; }
.mv-sys .hub{ grid-column:2; grid-row: 1 / span 2; }
.mv-sys .crm{ grid-column:3; grid-row: 1 / span 2; }
.mv-sys .src::after, .mv-sys .hub::after{ content:""; position:absolute; left:100%; top:50%; width:1.2em; height:1.5px; background: var(--wa-ink-45); }
/* An app screen: sidebar, and the alerts the database has triggered */
.mv-app-in{ flex:1; display:grid; grid-template-columns: 26% minmax(0, 1fr); min-height:0; }
.mv-side{ display:flex; flex-direction:column; gap:.3em; padding:.8em .55em; border-right:1px solid var(--wa-ink-06); background:#FAFAF8; }
.mv-side b{ padding:.4em .55em; border-radius:.45em; font-weight:600; font-size:.9em; color: var(--wa-ink-55); }
.mv-side b.on{ background: var(--wa-blue-bg); color: var(--wa-blue-d); }
.mv-main{ display:flex; flex-direction:column; gap:.4em; padding:.8em .8em; min-width:0; }
.mv-h{ display:flex; align-items:baseline; justify-content:space-between; margin:0 0 .15em; font-size:1.15em; font-weight:700; }
.mv-h span{ font-size:.72em; font-weight:600; color: var(--wa-ink-45); }
.mv-alert{ display:grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items:center; gap:.55em; padding:.45em .55em; border-radius:.55em; border:1px solid var(--wa-ink-08); background:#fff; }
.mv-alert .t{ padding:.25em .5em; border-radius:.4em; background: var(--wa-blue-bg); color: var(--wa-blue-d); font-size:.78em; font-weight:700; white-space:nowrap; }
.mv-alert .t.is-sold{ background: var(--wa-mint-bg); color: var(--wa-teal); }
.mv-alert b{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.92em; }
.mv-alert em{ display:block; font-style:normal; font-weight:500; font-size:.82em; color: var(--wa-ink-45); overflow:hidden; text-overflow:ellipsis; }
.mv-alert .s{ padding:.2em .55em; border-radius:999px; background: var(--wa-green-bg); color: var(--wa-green); font-size:.78em; font-weight:700; }
.mv-alert .s.is-ok{ background: var(--wa-blue-bg); color: var(--wa-blue-d); }
.mv-alert .s.is-rev{ background: var(--wa-amber-bg); color: var(--wa-amber); }
/* A list of what else the same data makes possible */
.mv-list{ display:flex; flex-direction:column; gap:1em; padding:0 .6em; }
.mv-list p{ display:flex; align-items:center; gap:.75em; font-size:1.45em; font-weight:500; color: var(--wa-ink); }
.mv-list svg{ flex:none; width:1.5em; height:1.5em; color:#3A4A6B; }
.mv-chips{ display:flex; flex-wrap:wrap; gap:.4em; }
.mv-chips span{ padding:.4em .7em; border-radius:62.4375rem; background: var(--wa-red-bg); color: var(--wa-red); font-weight:700; }
.mv-modes{ display:flex; align-items:center; gap:.3em; }
.mv-modes span{ flex:1 1 0; display:flex; flex-direction:column; gap:.2em; padding:.55em .6em; border-radius:.6em; background:#fff; border:1.2px solid var(--wa-ink-14); font-weight:700; }
.mv-modes span:last-of-type{ border-color: var(--wa-teal); background: var(--wa-mint-bg); color: var(--wa-teal); }
.mv-modes em{ font-style:normal; font-weight:500; font-size:.85em; color: var(--wa-ink-45); }
.mv-modes i{ flex:none; width:.7em; height:1.5px; background: var(--wa-ink-45); }
.mv-health p{ display:flex; align-items:center; gap:.6em; padding:.45em 0; border-bottom:1px solid var(--wa-ink-06); }
.mv-health i{ flex:none; width:.75em; height:.75em; border-radius:50%; background:#2F9E62; box-shadow: 0 0 0 .3em var(--wa-green-bg); }
.mv-health i.warn{ background:#D49A28; box-shadow: 0 0 0 .3em var(--wa-amber-bg); }
.mv-health b{ margin-left:auto; padding:.2em .6em; border-radius:62.4375rem; background: var(--wa-green-bg); color: var(--wa-green); font-size:.88em; }
.mv-health p:last-child b{ background: var(--wa-amber-bg); color: var(--wa-amber); }
.mv.is-win{ justify-content:flex-start; gap:0; padding:0; background:#fff; }
.mv-bar{ display:flex; align-items:center; gap:.35em; padding:.7em .9em; border-bottom:1px solid var(--wa-ink-06); color: var(--wa-ink-45); font-size:.9em; }
.mv-bar i{ width:.6em; height:.6em; border-radius:50%; background: var(--wa-ink-14); }
.mv-bar span{ margin-left:.5em; }
.mv-stats{ display:grid; grid-template-columns: repeat(3, 1fr); gap:.5em; padding:.9em .9em 0; }
.mv-stats span{ padding:.6em; border-radius:.6em; background:#F3F4F1; color: var(--wa-ink-45); font-size:.9em; }
.mv-stats b{ display:block; font-size:1.9em; letter-spacing:-.02em; color: var(--wa-ink); }
.mv-stats .bad{ background: var(--wa-red-bg); }
.mv-stats .bad b{ color: var(--wa-red); }
.mv-search{ display:flex; flex-direction:column; gap:.35em; padding:.8em .9em 0; }
.mv-search span{ width:fit-content; padding:.35em .7em; border-radius:.5em; border:1px solid var(--wa-ink-14); color: var(--wa-ink-70); }
.mv-tree{ display:flex; flex-direction:column; align-items:center; gap:.9em; }
.mv-tree > span, .mv-tree-row span{ padding:.45em .7em; border-radius:.5em; background:#fff; border:1.2px solid var(--wa-ink-14); font-weight:700; white-space:nowrap; }
.mv-tree > span{ background: var(--wa-ink); border-color: var(--wa-ink); color:#fff; }
.mv-tree-row{ display:flex; gap:.4em; }
.mv-tree-row span:last-child{ background: var(--wa-teal); border-color: var(--wa-teal); color:#fff; }
.mv-wire{ display:grid; grid-template-columns: repeat(3, 1fr); gap:.4em; padding:.6em; border-radius:.7em; border:1.2px dashed var(--wa-ink-14); }
.mv-wire i{ height:2em; border-radius:.35em; background: var(--wa-ink-06); }
.mv-wire i:first-child{ grid-column:1 / -1; height:2.4em; }
.mv-site{ position:relative; flex:1; display:flex; flex-direction:column; gap:.5em; margin:.8em 30% .8em .9em; }
.mv-hero{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:.6em; padding:.8em .9em; border-radius:.7em; background: linear-gradient(135deg, var(--wa-teal), #1E4A50); color:#fff; }
.mv-hero b{ font-size:1.2em; line-height:1.1; }
.mv-hero span{ width:fit-content; padding:.35em .8em; border-radius:62.4375rem; background: var(--wa-mint); color: var(--wa-ink); font-weight:700; }
.mv-cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:.4em; }
.mv-cards i{ height:2em; border-radius:.4em; background: var(--wa-ink-06); }
.mv-phone{ position:absolute; right:6%; bottom:8%; width:20%; aspect-ratio: 9 / 17; display:flex; flex-direction:column; gap:.3em; padding:9% 2.2% 2.2%; border-radius:1em; background:#fff; border:.32em solid var(--wa-ink); box-shadow: 0 1em 2em -1em rgba(17,18,26,.55); }
.mv-phone i{ border-radius:.3em; }
.mv-phone i:nth-child(1){ flex:1.3; background: linear-gradient(135deg, var(--wa-teal), #1E4A50); }
.mv-phone i:nth-child(2){ height:12%; border-radius:62.4375rem; background: var(--wa-mint); }
.mv-phone i:nth-child(3){ flex:1; background: var(--wa-ink-06); }
.mv-scores{ display:grid; grid-template-columns: repeat(4, 1fr); gap:.4em; text-align:center; color: var(--wa-ink-70); }
.mv-scores span{ display:flex; flex-direction:column; align-items:center; gap:.45em; font-size:.9em; }
.mv-scores b{ display:grid; place-items:center; width:3.6em; aspect-ratio:1; border-radius:50%; background: radial-gradient(closest-side, #fff 76%, transparent 78% 100%), conic-gradient(#2F9E62 calc(var(--v) * 1%), var(--wa-ink-06) 0); color: var(--wa-green); font-size:1.15em; }
.mv-metric{ display:flex; align-items:baseline; justify-content:space-between; gap:.8em; color: var(--wa-ink-70); }
.mv-metric b{ font-size:2em; letter-spacing:-.02em; color: var(--wa-teal); white-space:nowrap; }

/* =====================================================================
   Narrower screens
   ===================================================================== */
@media (max-width:1100px){
  .pc-strip{ grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap:1.75rem; }
}
/* Tablets and phones: the canvas rides in a band at the top, the copy
   scrolls beneath it, and the road becomes a compact rail of dots */
@media (max-width:860px){
  .wa{ --wa-rh:4.25rem; }
  .wa-grid{ grid-template-columns: minmax(0, 1fr); gap:0; }
  .wa-col{ order:-1; position:sticky; top:0; z-index:6; align-self:start; margin:0 calc(var(--logo-inset) * -1); padding:5.5rem var(--logo-inset) 0.625rem; background: var(--wa-page); }
  .wa-col::after{ content:""; position:absolute; left:0; right:0; top:100%; height:1.625rem; background: linear-gradient(var(--wa-page), rgba(236,233,225,0)); pointer-events:none; }
  .wa-sticky{ --wa-stage-w: min(100%, calc(var(--wa-vh) * .34), 23rem); position:static; height:auto; padding-top:0; gap:0.375rem; align-items:center; }
  .wa-stage-wrap{ width:100%; margin:0; padding:0; overflow:hidden; -webkit-mask:none; mask:none; justify-content:center; }
  .wa-blk{ min-height: calc(var(--wa-vh) * .62); justify-content:flex-start; padding:1.875rem 0 2.25rem; }
  .wa-blk--hero{ min-height:0; padding:1.625rem 0 3rem; }
  .wa-blk--intro{ min-height: calc(var(--wa-vh) * .5); }
  .pc-head{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width:860px){
  .wa{ --wa-ss:1.625rem; }
  .wa-rail{ padding:0.75rem var(--page-edge) 0.625rem; }
  html.js .wa-rail::before{ inset:0; background: rgba(236,233,225,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 -1px 0 var(--wa-ink-08); }
  .wa-rail-in{ height:2.625rem; }
  .wa-line{ top:0.6875rem; height:0.3125rem; margin-top:-0.1563rem; }
  .wa-stops li{ top:0.6875rem; width:4.75rem; height:2.25rem; margin:-0.5rem 0 0 -2.375rem; }
  .wa-stops a{ border-radius:0.5rem; }
  .wa-st{ flex-direction:column; align-items:center; justify-content:flex-start; gap:0.25rem; padding:0; background:none; border:0; box-shadow:none; }
  .wa-st::before{ content:""; width:1rem; height:1rem; border-radius:50%; background: var(--wa-page); border:2.5px solid rgba(17,18,26,.35); transition: background-color .3s ease, border-color .3s ease, transform .5s var(--wa-snap); }
  .wa-st-top{ display:none; }
  .wa-st-l{ font-size:0.75rem; color: var(--wa-ink-70); }
  .wa-stops li.is-past .wa-st::before{ background: var(--wa-blue); border-color: var(--wa-blue); }
  .wa-stops li.is-now .wa-st{ translate:none; border:0; box-shadow:none; }
  .wa-stops li.is-now .wa-st::before{ transform: scale(1.2); }
  .wa-stops li.is-now .wa-st-l{ color: var(--wa-ink); }
  .wa-star{ top:0.6875rem; }
  .wa-star-in{ border-radius:0.5rem; box-shadow: 0 0 0 3px var(--wa-page); }
  .wa-star.is-now .wa-star-in{ box-shadow: 0 0 0 3px var(--wa-page), 0 0 0 7px rgba(131,212,206,.6); }
  .wa-mk{ z-index:3; top:0.6875rem; }
  .wa-mk-in{ left:-0.75rem; top:-0.75rem; width:1.5rem; height:1.5rem; }
  .wa-mk-in i{ background:transparent; border:3px solid var(--wa-blue); box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0.25rem 0.625rem -0.1875rem rgba(17,18,26,.4); }
  .wa-mk-in em{ display:none; }
}
@media (max-width:760px){
  /* Cards: the stages become a swipeable strip */
  .pc-in{ border-radius:1.375rem; }
  .pc-brief{ font-size:0.9375rem; }
  .pc-swipe{ display:flex; align-items:center; gap:0.5rem; margin:0 0 0.625rem; font-size:0.7813rem; font-weight:600; color: var(--wa-ink-45); }
  .pc-swipe svg{ width:0.875rem; height:0.875rem; }
  .pc-scroll{ overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline: var(--pcpad); margin:0 calc(-1 * var(--pcpad)); padding:0 var(--pcpad) 0.375rem; scrollbar-width:none; }
  .pc-scroll::-webkit-scrollbar{ display:none; }
  .pc-strip{ display:flex; gap:0.875rem; width:max-content; }
  .pc-stage{ flex:none; width: min(76vw, 18.75rem); scroll-snap-align:start; }
}
@media (max-width:420px){
  .wa-ctas .btn{ flex:1 1 auto; justify-content:center; }
  .wa-st-l{ font-size:0.6875rem; }
  .wa-stops li{ width:4rem; margin-left:-2rem; }
}

/* =====================================================================
   Reduced motion: every stage's canvas in place, as a storyboard; the
   cards don't stack and nothing moves on its own
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  html.js .wa-w{ animation:none; }
  html.js .wa-col{ display:none; }
  html.js .wa-grid{ grid-template-columns: minmax(0, 1fr); }
  html.js .wa-blk{ min-height:0; padding: clamp(2.25rem, 5vw, 4rem) 0; }
  html.js .wa-text{ padding-bottom:0; }
  html.js .wa-blk--hero{ padding-top: clamp(6.5rem, 9vw, 8rem); }
  html.js .wa-blk--hero, html.js .wa-blk--step{ display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); align-items:center; gap: clamp(1.75rem, 5vw, 5rem); }
  html.js .wa-rm{ display:block; min-width:0; }
  .wa-rm .wa-stage{ width:100%; max-width:28.75rem; margin:0 auto; border-radius:1.75rem; background:#F4F2ED; overflow:hidden; }
  .wa-rm .wa-stage::before{ inset:0; }
  .wa-btn-tile{ transform:none; transition:none; }
  .wa-st, .wa-st::before, .wa-star-in, .wa-mk-in, .wa-line-base{ transition:none !important; }
  .wa-stops li.is-now .wa-st{ translate:none; }
}
@media (prefers-reduced-motion:reduce) and (max-width:860px){
  html.js .wa-blk--hero, html.js .wa-blk--step{ grid-template-columns: minmax(0, 1fr); }
  html.js .wa-rm{ order:-1; width: min(100%, 25rem); margin:0 auto; }
}