/* Prototype 22 Oct 2026 (review site only): five split cards, area colour panel plus black-and-white archive photo, alternating sides. Square corners. */
.rows{padding-block:clamp(48px,7vw,96px)}
.rows-head{max-width:760px;margin-bottom:clamp(28px,4vw,48px)}
.rows-head h2{font-size:clamp(34px,5vw,56px);line-height:1;letter-spacing:-.02em;margin-top:10px}
.cards{display:grid;gap:clamp(16px,2vw,24px)}
.card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:clamp(360px,38vw,520px);color:var(--ink);text-decoration:none}
.card:nth-child(even) .card-panel{order:2}
.card-panel{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:clamp(24px,3.4vw,52px)}
.card.c1 .card-panel{background:var(--blue);color:var(--paper)}.card.c2 .card-panel{background:var(--pink)}.card.c3 .card-panel{background:var(--orange)}.card.c4 .card-panel{background:var(--green)}.card.c5 .card-panel{background:var(--purple)}
.card-label{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.card-title{max-width:20ch;font-size:clamp(22px,2.4vw,32px);font-weight:800;line-height:1.08;letter-spacing:-.01em;font-variation-settings:'opsz' 96;max-width:16ch;margin-top:8px}
.card-num{font-size:clamp(72px,9vw,136px);font-weight:800;line-height:.88;letter-spacing:-.03em;font-variation-settings:'opsz' 96;font-variant-numeric:tabular-nums}
.card-when{font-size:clamp(17px,1.6vw,22px);line-height:1.2}
.card-go{margin-top:14px;font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:4px}
.card-credit{margin-top:auto;padding-top:18px;font-size:12px;line-height:1.35;opacity:.85}
.card-photo{position:relative;overflow:hidden;background:var(--ink)}
.card-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.card:hover .card-go,.card:focus-visible .card-go{text-decoration-thickness:2px}
.card:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media(max-width:760px){.card{min-height:0;aspect-ratio:2/1.15}.card-panel{padding:14px 14px 12px;gap:4px}.card-label{font-size:9.5px;letter-spacing:.08em}.card-title{font-size:14px;margin-top:2px}.card-num{font-size:clamp(34px,11vw,48px)}.card-when{font-size:12px}.card-go{font-size:12px;margin-top:4px}.card-credit{font-size:9.5px;padding-top:6px}}
@media(max-width:420px){.card{aspect-ratio:auto;min-height:230px}.card-label{display:none}}
.rows-lede{font-size:clamp(17px,1.6vw,20px);line-height:1.4;color:var(--muted,#4d4d4d);margin-top:14px;max-width:52ch}
/* Prototype 22 Oct: our own walking crowd in the yellow hero (original figures, not Tabby's). Ink outline on white; static when motion is reduced. */
.hero{position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:2}
.crowd{position:absolute;right:0;bottom:0;width:58%;height:62%;pointer-events:none;z-index:1}
.walker{position:absolute;left:0;top:var(--y);width:calc(44px*var(--s));height:calc(90px*var(--s));animation:walk var(--d) linear var(--dl) infinite}
.walker svg{width:100%;height:100%;overflow:visible;animation:bob .9s ease-in-out infinite alternate}
.w-head,.w-body{fill:#fff;stroke:var(--ink);stroke-width:3}
.w-leg{stroke:var(--ink);stroke-width:5;stroke-linecap:round;transform-origin:0 40px;animation:stride .9s ease-in-out infinite alternate}
.w-leg.l2{animation-direction:alternate-reverse}
.w-shadow{fill:var(--ink);opacity:.9}
@keyframes walk{from{transform:translateX(-12vw)}to{transform:translateX(62vw)}}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-3px)}}
@keyframes stride{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
@media(max-width:899px){.crowd{position:relative;width:100%;height:150px;margin-top:20px}@keyframes walk{from{transform:translateX(-15vw)}to{transform:translateX(105vw)}}}
@media(prefers-reduced-motion:reduce){.walker,.walker svg,.w-leg{animation:none}.walker{left:var(--x);transform:none}}
/* 22 Oct: crowd in the five area colours (the home page is where all five forces meet, pack p.22); full-screen hero on phones. */
.w-body{fill:var(--wb,#fff)}
.walker.c1{--wb:var(--blue)}.walker.c2{--wb:var(--pink)}.walker.c3{--wb:var(--orange)}.walker.c4{--wb:var(--green)}.walker.c5{--wb:var(--purple)}
@media(max-width:899px){.hero{min-height:calc(100svh - 62px);display:flex;flex-direction:column;padding-bottom:0}.hero .wrap{width:100%}.hero .crowd{margin-top:auto;height:min(42svh,300px)}}
@media(max-width:899px){.hero h1{font-size:min(24vw,150px);line-height:.92}}
/* 22 Oct: coin heads (face-on coin with a rim, our own, not Tabby's side-view coin) in the five area colours; small white bodies. */
.walker{width:calc(56px*var(--s));height:calc(90px*var(--s))}
.w-head{fill:var(--wb,#fff);stroke:var(--ink);stroke-width:3}
.w-rim{fill:none;stroke:var(--ink);stroke-width:2;opacity:.55}
.w-shine{fill:#fff;opacity:.7}
.w-body{fill:#fff;stroke:var(--ink);stroke-width:3}
.w-leg{stroke-width:4.5;transform-origin:0 42px}
.w-mill{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-dasharray:1.4 2.6;opacity:.45}
/* 22 Oct: denser crowd that mills around (each figure wanders its own short path, both directions) instead of drifting one way. */
.walker{left:var(--x);animation:wander var(--d) ease-in-out var(--dl) infinite}
@keyframes wander{0%{transform:translate(0,0)}25%{transform:translate(var(--ax),var(--ay))}50%{transform:translate(var(--bx),var(--by))}75%{transform:translate(var(--cx),var(--cy))}100%{transform:translate(0,0)}}
.crowd{height:66%}
@media(max-width:899px){.hero .crowd{height:min(46svh,330px)}}
@media(prefers-reduced-motion:reduce){.walker{animation:none;transform:none}}
/* 22 Oct: currency signs on the coins (kr, €, $, £): money from everywhere, never "get rich". */
.w-sym{font-family:var(--sans);font-weight:800;fill:var(--sym,var(--ink));font-variation-settings:'opsz' 96;letter-spacing:-.02em}
.walker.c1{--sym:#fff}
/* 22 Oct: flat black pictograms (growing city, flying car, landing rocket) pop in after 2 s; each links to its subject. */
.pics{position:absolute;top:10%;right:4%;width:38%;height:30%;display:flex;justify-content:space-around;align-items:flex-end;gap:4%;z-index:3}
.pic{display:block;flex:1;max-width:150px;aspect-ratio:1;opacity:0;transform:scale(.6);animation:pop .55s cubic-bezier(.2,1.5,.4,1) forwards}
.pic-city{animation-delay:2s}.pic-car{animation-delay:2.25s}.pic-rocket{animation-delay:2.5s}
.pic svg{width:100%;height:100%;overflow:visible;transition:transform .25s ease}
.pic:hover svg,.pic:focus-visible svg{transform:translateY(-6px) rotate(-3deg)}
.pic:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.pic svg *{fill:var(--ink)}
.pic svg .win,.pic svg .flame{fill:var(--accent)}
.pic svg .flame{fill:#fff}
.bld{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);animation:grow 1s ease-out forwards}
.b1{animation-delay:2.3s}.b2{animation-delay:2.5s}
.car{animation:hover 2.4s ease-in-out 2.4s infinite alternate}
.car-shadow{transform-box:fill-box;transform-origin:center;opacity:.9;animation:shadow 2.4s ease-in-out 2.4s infinite alternate}
.rkt{animation:land 9s ease-in-out 2.6s infinite}
.flame{transform-box:fill-box;transform-origin:top;animation:flame 9s ease-in-out 2.6s infinite}
@keyframes pop{to{opacity:1;transform:scale(1)}}
@keyframes grow{to{transform:scaleY(1)}}
@keyframes hover{from{transform:translateY(0)}to{transform:translateY(-12px)}}
@keyframes shadow{from{transform:scaleX(1)}to{transform:scaleX(.7)}}
@keyframes land{0%{transform:translateY(-120%)}30%{transform:translateY(0)}78%{transform:translateY(0)}100%{transform:translateY(-120%)}}
@keyframes flame{0%,25%{transform:scaleY(1)}32%,76%{transform:scaleY(0)}82%,100%{transform:scaleY(1.2)}}
@media(max-width:899px){.hero .pics{position:relative;top:auto;right:auto;width:100%;height:auto;margin-top:auto;padding:0 4%}.hero .pic{max-width:30%}.hero .crowd{margin-top:0}}
@media(prefers-reduced-motion:reduce){.pic,.bld,.car,.car-shadow,.rkt,.flame{animation:none;opacity:1;transform:none}.flame{transform:scaleY(0)}}
/* 22 Oct v2: staggered entrances, each in its own style; bigger, proportionate sizes. Overrides the pop-in above. */
.pics{top:5%;right:2%;width:48%;height:44%;gap:3%}
.pic{opacity:1;transform:none;animation:none;max-width:none}
.pic-city{flex:0 0 42%}.pic-car{flex:0 0 30%;align-self:center}.pic-rocket{flex:0 0 24%}
.b1{animation:grow .9s cubic-bezier(.2,.9,.3,1) 1.4s both}.b2{animation:grow 1.1s cubic-bezier(.2,.9,.3,1) 1.7s both}
.pic-car{animation:flyin 1.3s cubic-bezier(.15,.85,.25,1) 3s both}
.car,.car-shadow{animation-delay:4.3s}
@keyframes flyin{from{transform:translateX(-110vw)}to{transform:translateX(0)}}
.rkt{animation:land2 9s ease-in-out 4.5s infinite both}
.flame{animation:flame 9s ease-in-out 4.5s infinite both}
.pad{animation:fadein .4s ease-out 6.6s both}
@keyframes land2{0%{transform:translateY(-160%);opacity:0}4%{opacity:1}30%{transform:translateY(0);opacity:1}78%{transform:translateY(0);opacity:1}97%{transform:translateY(-160%);opacity:1}100%{transform:translateY(-160%);opacity:0}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@media(max-width:899px){.hero .pics{gap:4%;padding:0 2%;align-items:flex-end}.hero .pic{max-width:none}.hero .pic-city{flex:0 0 42%}.hero .pic-car{flex:0 0 30%;align-self:flex-end;margin-bottom:6%}.hero .pic-rocket{flex:0 0 22%}}
@media(prefers-reduced-motion:reduce){.pic-car,.pad,.rkt,.flame,.b1,.b2{animation:none!important;opacity:1;transform:none}.flame{transform:scaleY(0)}}
@media(min-width:900px){.hero .pics{top:12%;height:34%;width:44%}}
@media(min-width:900px){.hero .pics{top:14%;height:40%}.hero .pic{height:100%;aspect-ratio:auto}}
/* 22 Oct: pictograms form a skyline above and behind the crowd; never drawn over a figure. */
.hero .wrap{z-index:4}.hero .crowd{z-index:2}.hero .pics{z-index:1}
@media(min-width:900px){.hero .crowd{height:52%}.hero .pics{top:7%;height:37%}}
/* 22 Oct: card label as a black banner (same style as the site's kicker banners). */
.card-label{display:block;align-self:stretch;background:var(--ink);color:#fff;padding:9px 14px 8px;font-size:12px;letter-spacing:.14em;line-height:1.3}
.card.c1 .card-label{color:#fff}
@media(max-width:760px){.card-label{display:block;font-size:8.5px;letter-spacing:.1em;padding:5px 7px 4px}}
@media(max-width:420px){.card-label{display:block}}
@media(min-width:761px){.card-label{font-size:15px;padding:12px 18px 11px;letter-spacing:.14em}}

/* 25 Oct review candidate: consistent reading rhythm and full-width mobile content. */
.rows .cards{gap:40px}
.rows .card{min-height:0;aspect-ratio:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.rows .card-panel{justify-content:flex-start;gap:0;padding:40px}
.rows .card-label{display:flex;align-items:center;min-height:56px;padding:10px 14px;font-size:12px;line-height:1.4;letter-spacing:.1em}
.rows .card-title{margin:26px 0 20px;min-height:3.45em;max-width:none;font-size:clamp(24px,2.4vw,32px);line-height:1.15;font-weight:800}
.rows .card-stat{display:flex;flex-direction:column;gap:14px;min-height:156px}
.rows .card-num{font-size:clamp(64px,6.6vw,96px);line-height:1;white-space:nowrap}
.rows .card-when{max-width:28ch;font-size:17px;line-height:1.4}
.rows .card-source{display:block;margin-top:14px;font-size:13px;line-height:1.4}
.rows .card-go{margin-top:26px;font-size:15.5px;line-height:1.4}
.rows .card-photo{display:flex;flex-direction:column;min-width:0}
.rows .card-image{position:relative;flex:1;min-height:0;overflow:hidden}
.rows .card-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rows .card-credit{display:block;flex:none;margin:0;padding:14px 20px;min-height:56px;background:var(--ink);color:var(--paper);opacity:1;font-size:12px;line-height:1.4}
@media(min-width:761px) and (max-width:1000px){.rows .card-panel{padding:26px}.rows .card-label{min-height:56px}.rows .card-title{min-height:4.6em}.rows .card-stat{min-height:156px}}
@media(max-width:760px){
 .rows .cards{gap:40px}
 .rows .card{grid-template-columns:minmax(0,1fr)}
 .rows .card:nth-child(even) .card-panel{order:0}
 .rows .card-panel{padding:26px}
 .rows .card-label{min-height:0;padding:10px 14px;font-size:11px;line-height:1.4}
 .rows .card-title{font-size:26px;min-height:0;margin:26px 0 20px}
 .rows .card-stat{min-height:0;gap:14px}
 .rows .card-num{font-size:64px}
 .rows .card-when{font-size:17px}
 .rows .card-source{margin-top:14px}
 .rows .card-go{margin-top:26px}
 .rows .card-image{flex:none;aspect-ratio:16/9}
 .rows .card-credit{min-height:0;padding:14px 26px}
}

/* 25 Oct: owner-approved fact-led statements, with shared desktop baselines. */
.rows .card-stat{min-height:0;display:grid;grid-template-rows:128px minmax(96px,auto);gap:14px}
.rows .card-num{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;font-size:clamp(64px,6.6vw,96px);line-height:1}
.rows .card-words{display:block;align-self:end;font-size:clamp(44px,4.5vw,60px);line-height:1;white-space:normal}
.rows .card-unit{display:block;font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-.02em}
.rows .card-source{min-height:3em}
@media(max-width:760px){
 .rows .card-stat{display:flex;gap:14px}
 .rows .card-num{font-size:64px}
 .rows .card-words{align-self:auto;font-size:48px}
 .rows .card-unit{font-size:30px}
 .rows .card-source{min-height:0}
}

/* 25 Oct: larger facts scale to their panel, keeping every word readable. */
.rows .card-panel{container-type:inline-size}
.rows .card-stat{grid-template-rows:200px minmax(96px,auto)}
.rows .card-num{font-size:clamp(76px,25cqi,140px);letter-spacing:-.04em}
.rows .card-words{font-size:clamp(56px,17cqi,96px);line-height:.95;letter-spacing:-.035em}
.rows .card-unit{font-size:clamp(34px,10.5cqi,60px);line-height:1.05}
@media(max-width:760px){
 .rows .card-stat{display:flex}
 .rows .card-num{font-size:clamp(72px,27cqi,116px)}
 .rows .card-words{font-size:clamp(52px,20cqi,84px);line-height:.95}
 .rows .card-unit{font-size:clamp(32px,12cqi,50px)}
}