/* About: origin story beside the ward-bay model, then five models from one ward to two countries. */
.ab{
  --ab-teal:#58ABB3;
  --ab-bg:var(--bg);
  position:relative;isolation:isolate;overflow:clip;color:var(--ink);
  padding:clamp(96px,11vw,176px) 0 clamp(88px,9vw,140px);
  background:
    radial-gradient(60% 38% at 10% 0%, rgba(255,255,255,.8), transparent 72%),
    radial-gradient(42% 34% at 82% 14%, rgba(140,201,206,.30), transparent 72%),
    radial-gradient(70% 30% at 50% 100%, rgba(88,171,179,.12), transparent 72%),
    linear-gradient(180deg, #E4EFEF, var(--ab-bg) 420px);
}

/* ---- origin: copy beside a teal card of glass layers, the parts of a ward system ---- */
.ab-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,6vw,104px);align-items:center}
.ab-figure{margin:0;justify-self:center;width:min(100%,580px);padding-block:clamp(24px,4vw,64px)}
.ab-visual{position:relative}

/* a broad arc sweeping behind the card, open on the copy side */
.ab-orbit{position:absolute;inset:0;pointer-events:none}
.ab-orbit>i{position:absolute;left:50%;top:50%;aspect-ratio:1;border-radius:50%;translate:-50% -50%}
.ab-glow-pool{width:140%;background:radial-gradient(closest-side, rgba(140,201,206,.4), rgba(140,201,206,.12) 60%, transparent)}
.ab-ring-sweep{
  width:178%;
  background:conic-gradient(from -40deg, rgba(140,201,206,0), rgba(140,201,206,.85) 40deg, var(--teal) 120deg, var(--teal-ink) 175deg, rgba(19,69,92,.55) 205deg, rgba(19,69,92,0) 235deg, transparent);
  -webkit-mask:radial-gradient(closest-side, transparent calc(100% - 46px), #000 calc(100% - 45px), #000 calc(100% - 1px), transparent);
          mask:radial-gradient(closest-side, transparent calc(100% - 46px), #000 calc(100% - 45px), #000 calc(100% - 1px), transparent);
  opacity:.85;
}

/* the card: everything inside is sized in cqi, so the layers scale with it */
.ab-stack{
  position:relative;z-index:1;container-type:inline-size;aspect-ratio:20/19;overflow:hidden;border-radius:28px;
  background:
    radial-gradient(80% 60% at 18% 0%, rgba(140,201,206,.38), transparent 62%),
    radial-gradient(60% 50% at 100% 100%, rgba(10,33,48,.55), transparent 70%),
    linear-gradient(155deg, #1D6C74, #13455C 55%, #0C3245);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 40px 80px -40px rgba(13,36,51,.55), 0 110px 170px -90px rgba(13,36,51,.5);
}
/* four glass planes, as on airtable.com: each layer only slides sideways and fades (about.js drives
   --ab-e from 0, one stack in the middle, to 1, fanned out, as the card scrolls up the screen), and
   the skew lives on the sheet inside it. Nothing here is blurred or promoted to its own layer, so the
   sheared text is drawn straight onto the slant and stays sharp. */
.ab-layer{
  position:absolute;left:34cqi;top:37cqi;width:32cqi;height:50cqi;
  translate:calc(var(--ab-e, 1) * var(--ab-dx)) 0;opacity:calc(.12 + .88 * var(--ab-e, 1))
}
.ab-l1{--ab-dx:-31cqi}
.ab-l2{--ab-dx:-10.5cqi}
.ab-l3{--ab-dx:10.5cqi}
.ab-l4{--ab-dx:31cqi}
.ab-sheet{
  position:relative;height:100%;padding:3.2cqi 3cqi;border-radius:2.6cqi;color:#fff;font:500 2.25cqi/1.3 var(--sans);
  background:linear-gradient(165deg, rgba(150,200,206,.64), rgba(72,130,144,.8) 58%, rgba(52,108,124,.84));
  box-shadow:0 0 0 1px rgba(255,255,255,.34) inset, -1.6cqi 2.6cqi 5cqi rgba(5,25,35,.28);
  transform:skewY(-30deg)
}
.ab-layer-tag{margin-bottom:3.2cqi;font:600 2.1cqi/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.92)}

.ab-table p{display:grid;grid-template-columns:3.8cqi 5.2cqi 1fr;gap:1.2cqi;padding:1.25cqi .9cqi;margin-inline:-.9cqi;box-shadow:0 -1px 0 rgba(255,255,255,.16) inset;border-radius:1cqi;font-size:2.15cqi}
.ab-table .ab-th{color:rgba(255,255,255,.62)}
.ab-table span:nth-child(2){font-variant-numeric:tabular-nums}
.ab-row-hot span:nth-child(2){color:#F8CB8A;font-weight:600}

.ab-steps{list-style:none;display:grid;gap:4.6cqi;margin-top:1cqi}
.ab-steps li{position:relative;display:flex;align-items:center;gap:2cqi;font-size:2.3cqi}
.ab-steps i{position:relative;flex-shrink:0;width:4cqi;height:4cqi;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.6) inset;background:rgba(140,201,206,.95)}
.ab-steps i::after{content:"";position:absolute;left:33%;top:20%;width:28%;height:46%;border:solid #0C3245;border-width:0 .5cqi .5cqi 0;transform:rotate(45deg)}
.ab-steps li:nth-child(n+3) i{background:transparent}
.ab-steps li:nth-child(n+3) i::after{opacity:0}
/* dashed connectors between the steps */
.ab-steps li+li::before{content:"";position:absolute;left:1.95cqi;bottom:100%;height:4.6cqi;border-left:1px dashed rgba(255,255,255,.5)}

.ab-donut{
  display:block;width:17cqi;aspect-ratio:1;margin:1cqi 0 0 .5cqi;border-radius:50%;
  background:conic-gradient(#BFE6E9 0 var(--ab-d), rgba(255,255,255,.24) var(--ab-d) 84%, #F6C27A 84% 100%);
  -webkit-mask:radial-gradient(closest-side, transparent 56%, #000 57%);mask:radial-gradient(closest-side, transparent 56%, #000 57%)
}
@property --ab-d{syntax:'<percentage>';inherits:false;initial-value:64%}
.ab-stat{position:absolute;left:-3cqi;bottom:9cqi;padding:2cqi 3cqi;border-radius:2.2cqi;background:rgba(214,236,238,.34);box-shadow:0 0 0 1px rgba(255,255,255,.45) inset, 0 2cqi 4cqi rgba(5,25,35,.3)}
.ab-stat small{display:block;font-size:2cqi;color:rgba(255,255,255,.85)}
.ab-stat b{display:block;font:600 6.4cqi/1 var(--sans);letter-spacing:-.02em}

.ab-field{margin-bottom:2.8cqi}
.ab-field small{display:block;margin-bottom:1cqi;font-size:2cqi;color:rgba(255,255,255,.85)}
.ab-field span{display:flex;align-items:center;height:5cqi;padding-inline:1.5cqi;border-radius:1.2cqi;box-shadow:0 0 0 1px rgba(255,255,255,.42) inset;background:rgba(255,255,255,.1);font-size:2.15cqi}
.ab-field-pick::after{content:"";margin-left:auto;width:1.2cqi;height:1.2cqi;border:solid rgba(255,255,255,.85);border-width:0 .35cqi .35cqi 0;transform:translateY(-25%) rotate(45deg)}
.ab-field-type b{display:inline-block;overflow:hidden;white-space:nowrap;font-weight:500;border-right:.3cqi solid transparent}


.ab-eyebrow{font:600 var(--fs-label)/1.4 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--teal-ink)}
.ab-title{margin-top:16px;font:600 var(--fs-h1)/1.04 var(--sans);letter-spacing:var(--track-tight);color:var(--ink);text-wrap:balance}
.ab-title em{font-style:normal;color:var(--teal-ink)}
.ab-lede{margin-top:clamp(24px,3vw,36px);font-size:clamp(1.125rem, 1rem + .4vw, 1.375rem);line-height:1.5;color:var(--ink);max-width:40ch;letter-spacing:-.01em}
.ab-body{margin-top:18px;font-size:var(--fs-body);line-height:1.6;color:var(--ink-2);max-width:46ch}
.ab-founder{display:flex;align-items:center;gap:16px;margin-top:32px;padding-top:26px;border-top:1px solid rgba(13,36,51,.14);max-width:46ch}
.ab-monogram{display:grid;place-items:center;flex-shrink:0;width:52px;height:52px;border-radius:50%;background:var(--navy);color:#fff;font:600 15px/1 var(--sans);letter-spacing:.04em;box-shadow:0 0 0 4px var(--ab-bg), 0 0 0 5px rgba(88,171,179,.6)}
.ab-founder strong{display:block;font:600 16px/1.3 var(--sans)}
.ab-founder strong+span{display:block;margin-top:2px;font-size:var(--fs-small);color:var(--ink-2)}
.ab-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:34px}
.ab-link{font:600 var(--fs-small)/1.4 var(--sans);color:var(--teal-ink);text-decoration:underline;text-decoration-color:rgba(29,108,116,.35);text-underline-offset:5px}
.ab-link:hover{text-decoration-color:currentColor}

/* ---- scale ---- */
.ab-scale{position:relative;isolation:isolate;margin-top:clamp(96px,11vw,168px);scroll-margin-top:96px}
.ab-scale::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;inset:-48px calc(var(--gutter) * -1) -24px;
  background:
    repeating-linear-gradient(30deg, rgba(19,69,92,.07) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(150deg, rgba(19,69,92,.07) 0 1px, transparent 1px 30px);
  -webkit-mask-image:radial-gradient(60% 55% at 50% 42%, #000 30%, transparent);
          mask-image:radial-gradient(60% 55% at 50% 42%, #000 30%, transparent);
}
.ab-scale-head{margin-bottom:clamp(36px,4vw,56px)}
.ab-scale-title{margin-top:16px;font:600 var(--fs-h2)/1.05 var(--sans);letter-spacing:var(--track-tight);color:var(--ink)}
.ab-track{position:relative}
.ab-stops{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.ab-stop{position:relative;display:flex;flex-direction:column}
.ab-stage{position:relative;aspect-ratio:4/3}
/* a soft pool of light under each model */
.ab-stage::before{content:"";position:absolute;left:8%;right:8%;bottom:4%;height:30%;border-radius:50%;background:radial-gradient(closest-side, rgba(13,36,51,.16), transparent);filter:blur(6px)}
.ab-art{position:absolute;left:7%;top:6%;width:86%;height:82%;display:block;overflow:visible;transition:transform .6s var(--ease)}
.ab-stop:hover .ab-art{transform:translateY(-6px)}
.ab-edge{stroke:rgba(13,36,51,.12);stroke-width:.6;stroke-linejoin:round}
.ab-glow{filter:drop-shadow(0 0 3px rgba(88,171,179,.9))}
.ab-flow{fill:none;stroke:var(--ab-teal);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px rgba(88,171,179,.7))}
.ab-flow-thin{stroke-width:1.3;opacity:.85}
.ab-node{fill:var(--ab-teal);stroke:rgba(140,201,206,.5);stroke-width:3;paint-order:stroke}
.ab-tree{fill:#fff;stroke:rgba(13,36,51,.12);stroke-width:.6}
.ab-arc{fill:none;stroke:var(--ab-teal);stroke-width:2;stroke-dasharray:5 6;stroke-linecap:round;filter:drop-shadow(0 0 3px rgba(88,171,179,.6))}

/* the rail under the models, with a numbered stop for each */
.ab-thread{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:rgba(13,36,51,.12);top:calc(var(--ab-stage-h, 160px) + 27px)}
.ab-thread i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg, var(--teal-ink), var(--ab-teal));box-shadow:0 0 12px rgba(88,171,179,.7);transform:scaleX(var(--ab-p,1));transform-origin:left}
.ab-scale-label{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:14px;font:600 var(--fs-label)/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.ab-scale-label span{position:relative;z-index:1;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ab-bg);border:1.5px solid rgba(13,36,51,.25);font:600 11px/1 var(--sans);letter-spacing:0;color:var(--ink-2);transition:background-color .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease)}
.ab-stop.is-lit .ab-scale-label span{background:var(--teal-ink);border-color:var(--teal-ink);color:#fff;box-shadow:0 0 0 5px rgba(88,171,179,.18)}
.ab-stop h4{margin-top:10px;font:600 var(--fs-h4)/1.2 var(--sans);letter-spacing:var(--track-snug)}
.ab-stop p:not(.ab-scale-label){margin-top:8px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.ab-stop a{margin-top:auto;padding-top:14px;align-self:flex-start;font:600 var(--fs-small)/1.4 var(--sans);color:var(--teal-ink);text-decoration:none}
.ab-stop a:hover{text-decoration:underline;text-underline-offset:4px}
.ab-note{margin-top:clamp(36px,4vw,56px);font-size:var(--fs-small);color:var(--ink-3);max-width:70ch}

/* motion: set up by about.js, so without it everything is simply shown */
.ab-js .ab-stop{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease), transform .8s var(--ease)}
.ab-js .ab-stop.is-lit{opacity:1;transform:none}
.ab-js .ab-thread i{transition:transform 2.6s cubic-bezier(.45,.05,.2,1)}
@media (prefers-reduced-motion: no-preference){
  .ab-flow{stroke-dasharray:7 7;animation:ab-flow 1.6s linear infinite}
  .ab-node-pulse{animation:ab-pulse 2.4s ease-out infinite}
  .ab-ring-sweep{animation:ab-sway 16s ease-in-out infinite alternate}
  /* once the layers have fanned out, each one acts out a small piece of work */
  .ab-stack.is-on .ab-steps i{animation:ab-tick 6.4s ease-in-out 1.4s infinite both}
  .ab-stack.is-on .ab-steps i::after{animation:ab-tick-mark 6.4s ease-in-out 1.4s infinite both}
  .ab-stack.is-on .ab-steps li:nth-child(2) i,.ab-stack.is-on .ab-steps li:nth-child(2) i::after{animation-delay:1.9s}
  .ab-stack.is-on .ab-steps li:nth-child(3) i,.ab-stack.is-on .ab-steps li:nth-child(3) i::after{animation-delay:2.4s}
  .ab-stack.is-on .ab-steps li:nth-child(4) i,.ab-stack.is-on .ab-steps li:nth-child(4) i::after{animation-delay:2.9s}
  .ab-stack.is-on .ab-row-hot{animation:ab-hot 2.6s ease-in-out 1.4s infinite alternate}
  .ab-stack.is-on .ab-donut{animation:ab-donut 5s ease-in-out 1.4s infinite alternate}
  .ab-stack.is-on .ab-field-type b{animation:ab-type 6.4s steps(11) 1.4s infinite both, ab-caret .8s step-end infinite}
}
@keyframes ab-tick{0%,8%{background:transparent}16%,84%{background:rgba(140,201,206,.95)}92%,100%{background:transparent}}
@keyframes ab-tick-mark{0%,10%{opacity:0}18%,84%{opacity:1}92%,100%{opacity:0}}
@keyframes ab-hot{from{background:transparent}to{background:rgba(246,194,122,.16)}}
@keyframes ab-donut{from{--ab-d:46%}to{--ab-d:72%}}
@keyframes ab-type{0%,12%{width:0}52%,88%{width:11.2ch}100%{width:0}}
@keyframes ab-caret{50%{border-right-color:rgba(255,255,255,.9)}}
@keyframes ab-flow{to{stroke-dashoffset:-14}}
@keyframes ab-sway{from{rotate:-10deg}to{rotate:12deg}}
@keyframes ab-pulse{0%{stroke-width:3;stroke:rgba(140,201,206,.6)}70%,100%{stroke-width:14;stroke:rgba(140,201,206,0)}}
@media (prefers-reduced-motion: reduce){
  .ab-traveller{display:none}
}

@media (max-width: 1100px){
  .ab-stops{grid-template-columns:repeat(5,minmax(200px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin}
  .ab-stop{scroll-snap-align:start}
  .ab-thread{display:none}
}
@media (max-width: 900px){
  .ab-top{grid-template-columns:1fr}
  .ab-figure{width:min(100%,520px);padding-block:40px 8px}
  .ab-ring-sweep{width:170%}
  .ab-stops{grid-template-columns:repeat(5,minmax(240px,78vw));margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
}

/* Readability floor for the scale band's labels */
.ab-scale-label span{font-size:12px}
.ab-scale-label b{font-size:13px}