/* site.css v1.2 - 13th Jul 2026 - neo optic shared design system (extracted from the r51 static shell) */

@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/hanken-grotesk-var.woff2') format('woff2-variations')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url('/fonts/fraunces-var-italic.woff2') format('woff2-variations')}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:300 700;font-display:swap;src:url('/fonts/spline-sans-mono-var.woff2') format('woff2-variations')}
html,body{overflow-x:clip}
:root{
  /* ONE pink only - #b93988 in both themes, per KP. --brand-dk is locked to the same value;
     the soft wash is mixed FROM brand, never a second pink. */
  --brand:#b93988;--brand-dk:#b93988;--brand-soft:color-mix(in srgb,var(--brand) 9%,var(--bg));
  --ink:#221a29;--muted:#6f6579;--soft:#a094ab;
  --bg:#fbf9fa;--card:#ffffff;--line:#e7dfe9;--line-dk:#c9bfce;
  --band:#1c1522;--band-ink:#f4edf7;
  --fd:'Hanken Grotesk',sans-serif;--fa:'Fraunces',serif;--fm:'Spline Sans Mono',monospace;
  --maxw:1460px;--pad:clamp(20px,4vw,64px);
  --ease:cubic-bezier(.65,.05,0,1);
}
[data-theme=dark]{
  --brand:#b93988;--brand-dk:#b93988;--brand-text:#e06bb3;--brand-soft:color-mix(in srgb,var(--brand) 16%,var(--bg));
  --ink:#f2ecf6;--muted:#b3a8bd;--soft:#7d7189;
  --bg:#16101c;--card:#1f1826;--line:#332a3c;--line-dk:#4b4055;
}
[data-contrast="1"]{--muted:var(--ink);--soft:var(--ink);--line:var(--line-dk)}
html{font-size:100%;scroll-behavior:smooth;scroll-padding-top:96px}
html[data-fs="2"]{font-size:112.5%}
html[data-fs="3"]{font-size:125%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--fd);font-size:1.0625rem;line-height:1.55;color:var(--ink);background:var(--bg);transition:background .3s,color .3s}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--brand);color:#fff}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:#fff;padding:10px 18px;z-index:2000;font-weight:700}
.skip:focus{left:0}
/* type roles */
.eyebrow{font-family:var(--fm);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:1em}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--brand)}
.eyebrow b{color:var(--brand);font-weight:500}
.disp{font-family:var(--fd);font-weight:800;text-transform:uppercase;letter-spacing:-.022em;line-height:.94}
.acc{font-family:var(--fa);font-style:italic;font-weight:500;text-transform:none;letter-spacing:0;font-variation-settings:'opsz' 100}
/* hero emphasis - a drawn underline swash, nothing glittery */
.em{position:relative;display:inline-block;color:var(--brand);white-space:nowrap}
.em svg{position:absolute;left:-.04em;right:-.06em;bottom:-.16em;width:calc(100% + .1em);height:.3em;overflow:visible}
.em svg path{fill:none;stroke:var(--brand);stroke-width:7;stroke-linecap:round;opacity:.9}
/* hero word cycler - the width animates so the rest of the line glides rather than jumps;
   the roll itself is clipped by the line's existing .hl overflow. Wired by cycStart() in the main script. */
.cyc{display:inline-block;position:relative;white-space:nowrap;transition:width .55s var(--ease)}
.cyc .cyc-w{display:inline-block}
.cyc .cyc-w.out{position:absolute;left:0;top:0}
.cyc .cyc-m{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:no-preference){.cyc .cyc-w{transition:transform .5s var(--ease),opacity .35s linear}}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media (prefers-reduced-motion:no-preference){
  .go .em svg path{stroke-dasharray:230;stroke-dashoffset:230;animation:swash .7s var(--ease) forwards 1.5s}
  @keyframes swash{to{stroke-dashoffset:0}}
}
/* rolling-label pills */
.pill{display:inline-flex;align-items:center;gap:.7em;font-weight:700;font-size:1rem;padding:1em 1.7em;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;text-decoration:none;position:relative;overflow:hidden;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s}
.pill .rl{display:inline-block;position:relative;overflow:hidden;line-height:1.25}
.pill .rl span{display:block;transition:transform .45s var(--ease)}
.pill .rl span+span{position:absolute;inset:0;transform:translateY(110%)}
.pill:hover{background:var(--ink);color:var(--bg)}
.pill:hover .rl span{transform:translateY(-110%)}
.pill:hover .rl span+span{transform:translateY(0)}
.pill i{transition:transform .45s var(--ease)}
.pill:hover i{transform:translate(3px,-3px)}
.pill.solid{background:var(--brand);border-color:var(--brand);color:#fff}
.pill.solid:hover{background:var(--brand-dk);border-color:var(--brand-dk)}
.pill.ondark{border-color:#f4edf7;color:#f4edf7}
.pill.ondark:hover{background:#f4edf7;color:#1c1522}
@media (prefers-reduced-motion:reduce){.pill .rl span,.pill .rl span+span,.pill i{transition:none}.pill:hover .rl span{transform:none}.pill:hover .rl span+span{transform:translateY(110%)}}
/* scroll progress */
.prog{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--brand),var(--brand-dk));z-index:1400}
main{position:relative;z-index:1}
/* ---- top bar ---- */
.bar{position:sticky;top:0;z-index:1200;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:28px;height:84px;max-width:none}
.logo{display:inline-flex;align-items:center;flex:0 0 auto}
.logo .lg-d{display:none}
[data-theme=dark] .logo .lg-l{display:none}
[data-theme=dark] .logo .lg-d{display:inline-block}
.logo img{height:28px;width:auto}
.nav-links{display:flex;gap:2px;margin-left:auto;align-items:center}
.nav-links a{font-weight:600;font-size:.95rem;color:var(--ink);text-decoration:none;padding:.55em .8em;border-radius:999px;transition:background .25s,color .25s}
.nav-links a[aria-current=page],.nd-btn[aria-current=page]{color:var(--brand)}
.nav-links a:hover{background:var(--brand-soft);color:var(--brand-dk)}
[data-theme=dark] .nav-links a:hover{color:var(--brand)}
/* nav dropdowns - hover/click/keyboard behaviour lives in the main script (navDrops); the noscript block has a :hover fallback */
.nd{position:relative}
.nd-btn{display:inline-flex;align-items:center;gap:.45em;font:inherit;font-weight:600;font-size:.95rem;color:var(--ink);background:transparent;border:0;padding:.55em .8em;border-radius:999px;cursor:pointer;transition:background .25s,color .25s}
.nd-btn i{font-size:.55em;transition:transform .25s var(--ease)}
.nd-btn:hover,.nd.open .nd-btn{background:var(--brand-soft);color:var(--brand-dk)}
[data-theme=dark] .nd-btn:hover,[data-theme=dark] .nd.open .nd-btn{color:var(--brand)}
.nd.open .nd-btn i{transform:rotate(180deg)}
.nd-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-8px);min-width:250px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(20,12,26,.18);padding:8px;opacity:0;visibility:hidden;transition:opacity .22s,transform .28s var(--ease),visibility .22s;z-index:5}
.nd-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nd.open .nd-menu{opacity:1;visibility:visible;transform:translateX(-50%)}
.nd-menu a{display:block;padding:.62em .95em;border-radius:10px;font-weight:600;font-size:.95rem;color:var(--ink);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.nd-menu a:hover{background:var(--brand-soft);color:var(--brand-dk)}
[data-theme=dark] .nd-menu a:hover{color:var(--brand)}
.nav-right{display:flex;align-items:center;gap:12px}
.nav-cta{font-size:.92rem;padding:.75em 1.4em}
.a11y-btn{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line-dk);background:transparent;color:var(--ink);font-size:1.02rem;cursor:pointer;display:grid;place-items:center;transition:border-color .2s,color .2s}
.a11y-btn:hover{border-color:var(--brand);color:var(--brand)}
.th-d{display:none}
[data-theme=dark] .th-l{display:none}
[data-theme=dark] .th-d{display:block}
.a11y-panel{position:fixed;top:98px;right:18px;z-index:1300;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 50px rgba(20,12,26,.22);padding:18px;width:min(320px,calc(100vw - 36px));display:none}
.a11y-panel.open{display:block}
.a11y-panel h3{font-size:1rem;margin-bottom:10px;display:flex;align-items:center;gap:.5em;font-weight:700}
.a11y-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.a11y-row span{font-weight:500;font-size:.94rem}
.a11y-ctl{display:flex;gap:6px}
.a11y-ctl button{border:1.5px solid var(--line-dk);background:transparent;color:var(--ink);border-radius:9px;padding:6px 11px;cursor:pointer;font-weight:700;font-size:.85rem;transition:border-color .15s,background .15s}
.a11y-ctl button:hover{border-color:var(--brand)}
.a11y-ctl button[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:#fff}
.fsA1{font-size:.8rem}.fsA2{font-size:.95rem}.fsA3{font-size:1.08rem}
.burger{display:none;width:46px;height:46px;border:1.5px solid var(--line-dk);background:transparent;border-radius:50%;cursor:pointer;position:relative}
.burger i{position:absolute;left:12px;right:12px;height:2px;background:var(--ink);border-radius:2px;transition:transform .28s,opacity .2s,top .28s}
.burger i:nth-child(1){top:15px}.burger i:nth-child(2){top:21px}.burger i:nth-child(3){top:27px}
.burger[aria-expanded=true] i:nth-child(1){top:21px;transform:rotate(45deg)}
.burger[aria-expanded=true] i:nth-child(2){opacity:0}
.burger[aria-expanded=true] i:nth-child(3){top:21px;transform:rotate(-45deg)}
.m-menu{display:none}
@media (max-width:1200px){
  .nav-links,.nav-cta{display:none}
  .burger{display:block}
  .m-menu{display:block;position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 24px 50px rgba(20,12,26,.18);max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
  .m-menu.open{max-height:calc(100vh - 84px);overflow-y:auto}
  .m-menu a,.m-menu .m-grp{display:block;padding:16px var(--pad);font-weight:800;font-size:clamp(1.05rem,4.6vw,1.35rem);font-family:var(--fd);text-transform:uppercase;color:var(--ink);text-decoration:none;border-top:1px solid var(--line);opacity:0;transform:translateY(-8px);transition:opacity .3s,transform .3s}
  .m-grp{width:100%;text-align:left;background:transparent;border-left:0;border-right:0;border-bottom:0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px}
  .m-grp i{font-size:.55em;transition:transform .3s var(--ease)}
  .m-grp.open i{transform:rotate(180deg)}
  .m-sub{max-height:0;overflow:hidden;transition:max-height .38s var(--ease)}
  .m-grp.open+.m-sub{max-height:560px}
  .m-sub a{font-size:1.02rem;font-weight:600;text-transform:none;padding:13px var(--pad) 13px calc(var(--pad) + 18px);color:var(--muted)}
  .m-menu.open a,.m-menu.open .m-grp{opacity:1;transform:none;transition-delay:.08s}
  .m-menu .m-cta{color:var(--brand)}
}
/* ---- hero: the poster ---- */
.hero{padding:clamp(44px,7vh,88px) 0 44px;position:relative}
.hero .wrap{max-width:none}
.hero .eyebrow{margin-bottom:clamp(20px,3vh,36px)}
.hero h1{font-size:clamp(2.9rem,9.7vw,9.6rem);margin:0}
.hero h1 .hl{display:block;overflow:hidden}
.hero h1 .hl>span{display:block}
.hero .disp{display:inline-block}
.hero .acc{font-size:.93em;color:var(--brand);position:relative;display:inline-block;padding:0 .06em}
/* the strike - drawn through "assemble" once the stack has landed */
.strike{position:absolute;left:-2%;right:-2%;top:54%;height:.075em;background:var(--ink);border-radius:99px;transform:scaleX(0) rotate(-2deg);transform-origin:left center;pointer-events:none}
.hero-foot{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,4vw,54px);margin-top:clamp(28px,4.5vh,52px)}
.hero-sub{font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.5;color:var(--muted);max-width:30em}
.hero-sub b{color:var(--ink)}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
/* rotating badge - est 2000 */
/* --ny/--nx are set by badgeNudge() in the main script - keeps the badge clear of .hero{overflow:clip} */
.badge{position:fixed;top:clamp(96px,13vh,130px);right:clamp(16px,4vw,56px);z-index:40;width:clamp(84px,7.5vw,112px);height:clamp(84px,7.5vw,112px);display:grid;place-items:center;pointer-events:none}
.badge svg{position:absolute;inset:0;width:100%;height:100%}
.badge svg text{font-family:var(--fm);font-size:.6rem;letter-spacing:.22em;fill:var(--muted)}
.badge-mark{font-family:var(--fd);font-weight:800;font-size:clamp(3.06rem,3.68vw,3.94rem);line-height:1;letter-spacing:-.03em;color:var(--brand);transform:translate(.05em,-.12em)}
[data-theme=dark] .badge-mark{color:#fff}
@media (prefers-reduced-motion:no-preference){.badge svg{animation:spin 26s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}}
/* the reach map - Norwich out to the UK */
.reach-fallback{position:relative;width:min(100%,520px);margin:0 auto}
.ukmap{width:100%;height:auto;display:block}
.ukmap .land{fill:url(#mapdots);stroke:var(--line-dk);stroke-width:1.5}
.ukmap .ea{fill:var(--brand);opacity:.14}
.ukmap .earing{fill:none;stroke:var(--brand);stroke-width:1.5;stroke-dasharray:3 5;opacity:.75}
.ukmap .arc{fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;opacity:.85}
.ukmap .cdot{fill:var(--ink)}
.ukmap .home{fill:var(--brand)}
.ukmap .ring{fill:none;stroke:var(--brand);stroke-width:2;opacity:0}
.ukmap .mlab{font-family:var(--fm);font-size:.58rem;letter-spacing:.14em;fill:var(--muted)}
.ukmap .mlab.b{fill:var(--brand);font-weight:500}
.map-cap{margin-top:14px;font-family:var(--fm);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:#9a8ba6;text-align:center}
@media (prefers-reduced-motion:no-preference){
  .ukmap .arc{stroke-dasharray:100;stroke-dashoffset:100}
  .go .ukmap .arc{animation:arcdraw 1s var(--ease) forwards}
  .go .ukmap .arc:nth-of-type(1){animation-delay:1.1s}.go .ukmap .arc:nth-of-type(2){animation-delay:1.25s}
  .go .ukmap .arc:nth-of-type(3){animation-delay:1.4s}.go .ukmap .arc:nth-of-type(4){animation-delay:1.55s}
  .go .ukmap .arc:nth-of-type(5){animation-delay:1.7s}
  .ukmap .cdot{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.2)}
  .go .ukmap .cdot{animation:dotpop .45s var(--ease) forwards}
  .go .ukmap .cdot:nth-of-type(1){animation-delay:1.9s}.go .ukmap .cdot:nth-of-type(2){animation-delay:2s}
  .go .ukmap .cdot:nth-of-type(3){animation-delay:2.1s}.go .ukmap .cdot:nth-of-type(4){animation-delay:2.2s}
  .go .ukmap .cdot:nth-of-type(5){animation-delay:2.3s}
  .ukmap .ring{animation:homering 2.6s ease-out infinite}
  .ukmap .ring:nth-of-type(2){animation-delay:1.3s}
  @keyframes arcdraw{to{stroke-dashoffset:0}}
  @keyframes dotpop{to{opacity:1;transform:scale(1)}}
  @keyframes homering{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(3.4)}}
}
.ukmap .ring{transform-box:fill-box;transform-origin:center}

/* load choreography - lines rise, strike draws, sparkle word lands */
@media (prefers-reduced-motion:no-preference){
  .js body:not(.go) .hero h1 .hl>span{opacity:0} /* held until the webfont is in - stops the fallback-font stretch-and-snap */
  .go .hero h1 .hl>span{animation:rise 1s var(--ease) both}
  .go .hero .hl:nth-child(1)>span{animation-delay:.08s}
  .go .hero .hl:nth-child(2)>span{animation-delay:.2s}
  .go .hero .eyebrow,.go .hero-foot{animation:fadeup .9s var(--ease) both .75s}
  .go .strike{animation:draw .5s var(--ease) both 1.15s}
  @keyframes rise{from{transform:translateY(112%)}to{transform:none}}
  @keyframes fadeup{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  @keyframes draw{to{transform:scaleX(1) rotate(-2deg)}}
}
@media (prefers-reduced-motion:reduce){.strike{transform:scaleX(1) rotate(-2deg)}}
/* ---- marquee ---- */
.mq{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;overflow:hidden;background:var(--bg)}
.mq-track{display:flex;width:max-content}
.mq-set{display:flex;flex:0 0 auto}
.mq span{display:inline-flex;align-items:center;font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:clamp(1.3rem,2.5vw,2rem);letter-spacing:-.015em;padding:0 1.3em 0 0;color:var(--ink)}
.mq span i{display:inline-block;width:.34em;height:.34em;border:2.5px solid var(--brand);border-radius:50%;margin-right:1.3em}
.mq span:nth-child(even){color:transparent;-webkit-text-stroke:1.5px var(--muted)}
@media (prefers-reduced-motion:no-preference){
  .mq-track{animation:mq 30s linear infinite}
  .mq:hover .mq-track{animation-play-state:paused}
  @keyframes mq{to{transform:translateX(-50%)}}
}
@media (prefers-reduced-motion:reduce){.mq{overflow-x:auto}.mq-track{width:auto}.mq-dup{display:none}}
/* ---- shared section rhythm ---- */
.sec{padding:clamp(70px,10vh,130px) 0;position:relative}
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:18px;margin-bottom:clamp(34px,5vh,60px)}
.sec-head h2{font-size:clamp(2.4rem,5.4vw,4.6rem)}
.sec-head .acc{font-size:.96em}
.sec-lede{font-size:1.12rem;color:var(--muted);max-width:36em}
@media (prefers-reduced-motion:no-preference){
  .rv,.rv-l,.rv-r{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .rv-l{transform:translateX(-34px)}.rv-r{transform:translateX(34px)}
  .rv.in,.rv-l.in,.rv-r.in{opacity:1;transform:none}
}
/* ---- range rows: one team, every scale ---- */
.rr{border-top:1px solid var(--line-dk)}
.rr-row{border-bottom:1px solid var(--line-dk);position:relative;overflow:hidden}
.rr-btn{display:grid;grid-template-columns:minmax(3.4rem,auto) 1fr auto;align-items:center;gap:clamp(14px,3vw,40px);width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:clamp(20px,3.2vh,34px) clamp(18px,2.6vw,44px);color:var(--ink);position:relative;z-index:1}
.rr-ix{font-family:var(--fm);font-size:.82rem;color:var(--muted);letter-spacing:.1em}
.rr-t{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:clamp(1.7rem,4.6vw,3.9rem);line-height:1;letter-spacing:-.015em;transition:transform .5s var(--ease),color .35s}
.rr-arrow{width:52px;height:52px;border:1.5px solid var(--line-dk);border-radius:50%;display:grid;place-items:center;font-size:1rem;transition:transform .5s var(--ease),background .35s,color .35s,border-color .35s;flex:0 0 auto}
.rr-row:hover .rr-t,.rr-row.open .rr-t{transform:translateX(clamp(6px,1.4vw,22px));color:var(--brand)}
.rr-row:hover .rr-arrow,.rr-row.open .rr-arrow{background:var(--brand);border-color:var(--brand);color:#fff}
.rr-row.open .rr-arrow{transform:rotate(45deg)}
.rr-row::before{content:"";position:absolute;inset:0;background:var(--brand-soft);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);z-index:0}
.rr-row:hover::before,.rr-row.open::before{transform:scaleY(1)}
.rr-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease);position:relative;z-index:1}
.rr-row.open .rr-body{grid-template-rows:1fr}
.rr-in{overflow:hidden;padding:0 clamp(18px,2.6vw,44px)}
.rr-in p{color:var(--muted);font-size:1.1rem;max-width:52ch;margin-left:calc(3.4rem + clamp(14px,3vw,40px))}
.rr-tag{display:block;margin:12px 0 0 calc(3.4rem + clamp(14px,3vw,40px))}.rr-row.open .rr-in .rr-tag{padding-bottom:clamp(22px,3vh,34px)}
.rr-tag{font-family:var(--fm);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-dk);white-space:nowrap}
.rr-tag::before{content:"";display:inline-block;width:1.8em;height:1px;background:currentColor;vertical-align:middle;margin-right:1em}
/* the oversized outlined icon - stamps in from huge, settles small at an angle, strokes draw on */
.rr-ic{position:absolute;right:clamp(58px,9vw,150px);top:50%;width:clamp(210px,27vw,380px);height:clamp(210px,27vw,380px);transform:translateY(-50%) scale(3.4) rotate(-18deg);opacity:0;z-index:0;pointer-events:none;color:var(--brand)}
.rr-ic path,.rr-ic circle{fill:none;stroke:currentColor;stroke-width:2.4px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){
  .rr-ic{transition:transform .7s var(--ease),opacity .45s}
  .rr-ic path,.rr-ic circle{stroke-dasharray:100 100;stroke-dashoffset:100;transition:stroke-dashoffset .9s var(--ease) .08s}
  .rr-row:hover .rr-ic,.rr-row.open .rr-ic{transform:translateY(-50%) scale(1) rotate(-8deg);opacity:.5}
  .rr-row:hover .rr-ic path,.rr-row:hover .rr-ic circle,.rr-row.open .rr-ic path,.rr-row.open .rr-ic circle{stroke-dashoffset:0}
  .rr-in p,.rr-in .rr-tag{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .55s var(--ease)}
  .rr-row.open .rr-in p{opacity:1;transform:none;transition-delay:.16s}
  .rr-row.open .rr-in .rr-tag{opacity:1;transform:none;transition-delay:.28s}
}
@media (prefers-reduced-motion:reduce){.rr-row:hover .rr-ic,.rr-row.open .rr-ic{opacity:.32;transform:translateY(-50%) rotate(-8deg)}}
[data-theme=dark] .rr-tag{color:var(--brand)}
@media (prefers-reduced-motion:reduce){.rr-body,.rr-row::before,.rr-t,.rr-arrow{transition:none}}
@media (max-width:700px){.rr-in p,.rr-tag{margin-left:0}.rr-arrow{width:42px;height:42px}}
/* ---- stats: oversized numerals ---- */
.stats{display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,70px);align-items:end;justify-content:space-between;padding:clamp(50px,8vh,90px) 0;border-bottom:1px solid var(--line)}
.stat b{font-family:var(--fd);font-weight:900;font-size:clamp(4rem,9vw,8.4rem);line-height:.86;letter-spacing:-.03em;display:block;color:var(--ink)}
.stat:nth-child(2) b{color:transparent;-webkit-text-stroke:2px var(--brand)}
.stat:nth-child(3) b{color:var(--brand)}
.stat>span{display:block;margin-top:14px;font-family:var(--fm);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);max-width:22em}
/* ---- the register: the client book, played as an instrument. regLife() in the main script drives it ---- */
/* the sub line as an instrument readout - mono, tracked out, brand rules either side */
.reg-sub{display:flex;align-items:center;justify-content:center;gap:1.2em;font-family:var(--fm);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-align:center;margin:0 auto 18px;max-width:900px}
.reg-sub::before,.reg-sub::after{content:"";width:2.4em;height:1px;background:var(--brand);flex:0 0 auto}
.reg{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,5vw,72px);align-items:center;max-width:1180px;margin:0 auto}
.reg-stage{min-height:clamp(190px,26vw,300px);display:flex;flex-direction:column;justify-content:center;gap:14px;min-width:0}
.reg-name{overflow:hidden;font-family:var(--fd);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1.04;font-size:clamp(2rem,5.4vw,5rem);color:var(--ink);min-height:1.1em}
.reg-name>span{display:inline-block;white-space:nowrap;max-width:100%}
@media (prefers-reduced-motion:no-preference){.reg-name>span{transition:transform .3s var(--ease),opacity .24s linear}}
.reg-name.love>span::after{content:'\2665';color:var(--brand);font-size:.42em;margin-left:.35em;vertical-align:.55em}
.reg-led{position:relative;height:342px;outline:none;border-radius:12px}
.reg-led:focus-visible{box-shadow:0 0 0 2px var(--brand)}
.reg-scroll{height:100%;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent)}
.reg-list{list-style:none;margin:0;padding:0;position:relative;will-change:transform}
@media (prefers-reduced-motion:no-preference){.reg-list{transition:transform .5s var(--ease)}}
.reg-list li{position:relative;height:38px;display:flex;align-items:center;gap:14px;font-family:var(--fm);font-size:.78rem;letter-spacing:.06em;color:var(--muted);cursor:pointer;transition:color .25s,transform .3s var(--ease)}
.reg-list li i{font-style:normal;font-size:.68rem;color:var(--soft);flex:0 0 3.6em;transition:color .25s}
.reg-list li b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reg-list li:hover{color:var(--ink)}
.reg-list li.on,.reg-list li.on i{color:var(--brand)}
.reg-list li.on{transform:translateX(10px)}
.reg-list li.love b::after{content:'\2665';color:var(--brand);font-size:.75em;margin-left:.5em}
.reg-list li[data-band]::before{content:"";position:absolute;top:0;left:0;width:58%;height:1px;background:var(--line-dk);opacity:.7}
.reg-focus{position:absolute;left:-16px;right:-8px;top:50%;height:38px;transform:translateY(-50%);pointer-events:none;border-top:1px solid var(--line-dk);border-bottom:1px solid var(--line-dk)}
.reg-focus::before{content:"";position:absolute;left:-2px;top:50%;width:7px;height:7px;border-radius:50%;background:var(--brand);transform:translateY(-50%)}
@media (max-width:880px){.reg{grid-template-columns:1fr;gap:24px}.reg-stage{min-height:132px;gap:10px}.reg-led{height:266px}}
/* ---- the river: the register in 3D (riverLife, lives in the globe script block).
   #reg.gl is only added once WebGL is confirmed - otherwise the ledger above stays in charge. ---- */
.field-hold{display:none;position:relative;height:clamp(360px,44vw,540px);width:100vw;margin-left:calc(50% - 50vw)}
#fieldGl{width:100%;height:100%;display:block;touch-action:pan-y;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 90%,transparent);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 90%,transparent)}
#reg.gl{grid-template-columns:1fr;gap:4px}
#reg.gl .reg-stage{min-height:clamp(64px,7vw,96px);align-items:center;text-align:center;justify-content:flex-end}
#reg.gl .reg-name{font-size:clamp(1.5rem,3.4vw,2.7rem)}
/* the caption meta line: [icon] SECTOR - dash - WHAT WE DID. Same instrument language as the readouts. */
.reg-meta{display:flex;flex-wrap:wrap;row-gap:4px;align-items:center;justify-content:center;gap:.95em;font-family:var(--fm);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:8px;min-height:22px;max-width:min(92vw,900px);margin-left:auto;margin-right:auto}
.reg-meta #regSec{color:var(--ink)}
.reg-ico{width:20px;height:20px;flex:0 0 auto;color:var(--brand)}
.reg-ico path,.reg-ico circle{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.reg-dash{width:2.2em;height:1px;background:var(--brand);flex:0 0 auto}
@media (prefers-reduced-motion:no-preference){.reg-meta{transition:opacity .24s linear,transform .3s var(--ease)}}
#reg.gl .field-hold{display:block}
/* in 3D mode the ledger goes visually-hidden (not display:none) so assistive tech keeps the client list */
#reg.gl .reg-led{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;padding:0;margin:-1px}
/* ---- build stack: sticky cards ---- */
.stack{display:grid;gap:18px}
.sc{position:sticky;background:var(--card);border:1px solid var(--line);border-radius:26px;padding:clamp(28px,4.5vw,58px);box-shadow:0 -14px 44px rgba(20,12,26,.1);display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,30ch);gap:clamp(16px,3vw,48px);align-items:start;min-height:clamp(240px,32vh,330px)}
.sc:nth-child(1){top:calc(84px + 14px)}
.sc:nth-child(2){top:calc(84px + 32px)}
.sc:nth-child(3){top:calc(84px + 50px)}
.sc:nth-child(4){top:calc(84px + 68px)}
.sc.alt{background:var(--band);border-color:#332a3c;color:var(--band-ink)}
.sc.alt .sc-p,.sc.alt .sc-ix{color:#b9abc4}
.sc.rose{background:var(--brand);border-color:var(--brand);color:#fff}
.sc.rose .sc-p,.sc.rose .sc-ix{color:#fdeef6}
.sc.rose .sc-proof{color:#fff;border-color:rgba(255,255,255,.4)}
.sc-ix{font-family:var(--fm);font-size:.82rem;letter-spacing:.1em;color:var(--muted)}
.sc-t{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:clamp(1.9rem,4.4vw,3.7rem);line-height:.95;letter-spacing:-.015em}
.sc-t .acc{font-size:.95em}
.sc-p{color:var(--muted);font-size:1.06rem;margin-top:16px;max-width:46ch}
.sc-proof{font-family:var(--fm);font-size:.8rem;line-height:1.7;letter-spacing:.02em;color:var(--brand-text);border-left:2px solid var(--brand);padding-left:1.2em;align-self:end}
[data-theme=dark] .sc-proof{color:var(--brand)}
.sc.alt .sc-proof{color:#e06bb3;border-color:#e06bb3}
@media (max-width:880px){.sc{grid-template-columns:1fr;min-height:0}.sc-proof{border-left:0;border-top:2px solid var(--brand);padding:1em 0 0}}
/* ---- hero globe (transparent canvas, theme-aware) ---- */
.globe-hold{position:absolute;top:47%;transform:translateY(-50%);right:max(calc(var(--pad) - 48px),-40px);width:min(54vw,820px);aspect-ratio:1/1;z-index:0}
#reachGl{position:absolute;inset:0;width:100%;height:100%;display:block;background:transparent;touch-action:pan-y;cursor:grab}
#reachGl:active{cursor:grabbing}
/* soften the canvas's hard left edge into the page background - fades to transparent, so it respects light/dark automatically */
#reachGl{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);mask-image:linear-gradient(90deg,transparent 0,#000 24%)}
.globe-fallback{display:none;position:absolute;inset:8%}
.globe-hold.nogl .globe-fallback{display:block}
.globe-hold.nogl #reachGl{display:none}
.ukmap{width:100%;height:auto;display:block}
.ukmap .land{fill:url(#mapdots);stroke:var(--line-dk);stroke-width:1.5;color:var(--soft)}
.ukmap .ea{fill:var(--brand);opacity:.14}
.ukmap .earing{fill:none;stroke:var(--brand);stroke-width:1.5;stroke-dasharray:3 5;opacity:.75}
.ukmap .arc{fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;opacity:.85}
.ukmap .cdot{fill:var(--muted)}
.ukmap .home{fill:var(--brand)}
.ukmap .mlab{font-family:var(--fm);font-size:.58rem;letter-spacing:.14em;fill:var(--muted)}
.ukmap .mlab.b{fill:var(--brand)}
.jr{position:absolute;right:6%;bottom:2%;display:grid;justify-items:end;gap:10px;z-index:3}
.jr-line{font-family:var(--fm);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);min-height:1.4em;text-align:right}
.jr-line b{color:var(--brand);font-weight:500}
.jr-dots{display:flex;gap:8px}
.jr-dots button{width:26px;height:5px;border-radius:99px;border:0;background:var(--line-dk);cursor:pointer;padding:0;transition:background .25s,width .35s var(--ease)}
.jr-dots button:hover{background:var(--soft)}
.jr-dots button[aria-pressed=true]{background:var(--brand);width:42px}
.hero .wrap{position:relative;z-index:2}
.hero{overflow:clip}
@media (max-width:1000px){
  .globe-hold{position:relative;top:auto;right:auto;transform:none;width:min(88vw,460px);margin:22px auto 4px;z-index:1}
  #reachGl{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent)}
  .jr{position:static;justify-items:center;margin-top:10px}
  .jr-line{text-align:center}
}
/* ---- full-bleed texture band ---- */
.imgband{position:relative;height:min(52vh,460px);overflow:clip;background:var(--band);margin:0}
.imgband img{width:100%;height:100%;object-fit:cover;display:block}
.imgband figcaption{position:absolute;left:var(--pad);bottom:22px;font-family:var(--fm);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(20,12,26,.5);padding:.65em 1.1em;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.imgband.noimg{display:none}
@media (prefers-reduced-motion:no-preference){.imgband img{animation:kburns 20s ease-in-out infinite alternate}@keyframes kburns{from{transform:scale(1)}to{transform:scale(1.07)}}}
/* ---- quotes over texture (pinned dark when image present) ---- */
.voices.haspic{position:relative;overflow:clip}
.voices-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.voices-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,13,26,.82),rgba(21,13,26,.64) 45%,rgba(21,13,26,.85));z-index:1}
.voices:not(.haspic) .voices-bg,.voices:not(.haspic) .voices-scrim{display:none}
.voices.haspic .wrap{position:relative;z-index:2}
.voices.haspic .eyebrow{color:#c9bcd4}
.voices.haspic .eyebrow b{color:var(--brand)}
.voices.haspic .qs p{color:#fff}
.voices.haspic .qs p::before,.voices.haspic .qs p::after{color:var(--brand)}
.voices.haspic .qs footer{color:#c9bcd4}
.voices.haspic .qs footer b{color:var(--brand)}
.voices.haspic .qdots button{background-color:rgba(255,255,255,.3)}
.voices.haspic .qdots button:hover{background-color:rgba(255,255,255,.55)}
.voices.haspic .qdots button[aria-pressed=true]{background-color:var(--brand)}
/* ---- OliveCore strip (pinned dark) ---- */
.core{background:var(--band);color:var(--band-ink);position:relative;overflow:clip}
.core::before{content:"OLIVECORE";position:absolute;top:6px;left:0;right:0;text-align:center;font-family:var(--fd);font-weight:900;font-size:clamp(4rem,13vw,13rem);line-height:1;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px rgba(226,149,199,.16);pointer-events:none;white-space:nowrap}
.core .wrap{position:relative}
.core .sec-head h2{color:#fff}
.core .sec-head .acc{color:var(--brand)}
.core .sec-lede{color:#c3b6cd}
.core-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(226,149,199,.22);border:1px solid rgba(226,149,199,.22);border-radius:22px;overflow:hidden}
.core-cell{background:var(--band);padding:clamp(22px,3vw,36px)}
.core-cell .k{font-family:var(--fm);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#9a8ba6;display:block;margin-bottom:12px}
.core-cell b{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:1.28rem;display:block;color:#fff;line-height:1.1}
.core-cell p{color:#b9abc4;font-size:.94rem;margin-top:9px}
.core-cell i{color:var(--brand)}
.core-foot{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;margin-top:clamp(28px,4vh,44px)}
.core-dare{font-family:var(--fm);font-size:.86rem;color:#b9abc4}
.core-dare b{color:var(--brand);font-weight:500}
@media (prefers-reduced-motion:no-preference){
  .core-grid .core-cell{transition:opacity .55s var(--ease),transform .55s var(--ease)}
  .core-grid:not(.in) .core-cell{opacity:0;transform:translateY(20px)}
  .core-grid.in .core-cell:nth-child(1){transition-delay:.02s}.core-grid.in .core-cell:nth-child(2){transition-delay:.13s}
  .core-grid.in .core-cell:nth-child(3){transition-delay:.24s}.core-grid.in .core-cell:nth-child(4){transition-delay:.35s}
  .core-grid.in .core-cell:nth-child(5){transition-delay:.46s}.core-grid.in .core-cell:nth-child(6){transition-delay:.57s}
}
@media (max-width:880px){.core-grid{grid-template-columns:1fr}}
/* ---- quotes: outsized ---- */
.qrot{position:relative;max-width:1060px;margin:0 auto;text-align:center}
.qs{position:absolute;inset:0 0 auto;opacity:0;visibility:hidden;transition:opacity .6s}
.qs.on{opacity:1;visibility:visible;position:relative}
.qs p{font-family:var(--fd);font-weight:600;font-size:clamp(1.3rem,2.6vw,2.15rem);line-height:1.28;letter-spacing:-.01em;color:var(--ink)}
.qs p::before{content:'\201C';color:var(--brand)}
.qs p::after{content:'\201D';color:var(--brand)}
.qs footer{margin-top:26px;font-family:var(--fm);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.qs footer b{color:var(--brand-dk);font-weight:500}
[data-theme=dark] .qs footer b{color:var(--brand)}
.qdots{display:flex;gap:9px;justify-content:center;margin-top:25px}
.qdots button{width:34px;height:24px;padding:9.5px 0;box-sizing:border-box;background-color:var(--line-dk);background-clip:content-box;border-radius:99px;border:0;cursor:pointer;transition:background-color .25s,width .35s var(--ease)}
.qdots button:hover{background-color:var(--soft)}
.qdots button[aria-pressed=true]{background-color:var(--brand);width:54px}
/* ---- CTA + contact (pinned dark) ---- */
.cta{background:linear-gradient(160deg,#241a2b,#1c1522 55%,#2b1a33);color:var(--band-ink);padding:clamp(80px,12vh,150px) 0}
.cta-say{font-size:clamp(3.4rem,9vw,8.6rem);line-height:.95;margin-bottom:clamp(30px,5vh,60px);color:#fff}
.cta-say .acc{color:var(--brand)}
.cta-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,80px)}
.ct-cards{display:grid;gap:14px;align-content:start}
.ct-card{display:flex;gap:16px;align-items:center;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);border-radius:18px;padding:20px 22px;color:inherit;text-decoration:none;transition:border-color .25s,transform .25s}
a.ct-card:hover{border-color:var(--brand);transform:translateY(-2px)}
.ct-card em{font-style:normal;flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(210,100,166,.16);color:var(--brand);font-size:1rem}
.ct-card b{font-family:var(--fd);font-size:1.08rem;display:block;color:#fff}
.ct-card span{font-size:.88rem;color:#b9abc4}
.frm{display:grid;gap:16px}
.frm-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.frm label{display:block;font-family:var(--fm);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px;color:#c3b6cd}
.frm input,.frm textarea{width:100%;font-family:var(--fd);font-size:1.02rem;padding:.8em 0;border:0;border-bottom:1.5px solid rgba(255,255,255,.22);background:transparent;color:#fff;transition:border-color .25s;border-radius:0}
.frm input:focus,.frm textarea:focus{border-color:var(--brand)}
.frm input:focus-visible,.frm textarea:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.frm input::placeholder,.frm textarea::placeholder{color:#7d6f89}
.frm textarea{min-height:110px;resize:vertical}
.frm .hpot{display:none}
.frm-note{font-size:.82rem;color:#9a8ba6}
.frm-ok{display:none;align-items:center;gap:.6em;background:rgba(105,185,140,.13);border:1px solid rgba(105,185,140,.4);color:#a8e0c2;border-radius:12px;padding:.8em 1.1em}
.frm-ok.show{display:flex}
.frm-err{display:none;color:#f2a6b8;font-size:.9rem}
.frm-err.show{display:block}
@media (max-width:880px){.cta-grid{grid-template-columns:1fr}}
@media (max-width:560px){.frm-row{grid-template-columns:1fr}}
/* ---- community strip ---- */
.com{border-top:1px solid var(--line);padding:clamp(36px,6vh,60px) 0}
.com .wrap{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;justify-content:space-between}
.com-item{display:flex;align-items:center;gap:clamp(12px,1.6vw,20px)}
.com-item>i{color:var(--brand);font-size:1.15rem}
.com-item .lab{font-family:var(--fm);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.com-logos{display:flex;gap:clamp(20px,2.6vw,40px);align-items:center;flex-wrap:wrap;row-gap:16px}
.com-logos a{display:grid;place-items:center}
/* charity marks are inlined SVGs, single colour via currentColor - theme handles the rest */
.com-logos svg{height:28px;width:auto;display:block;color:var(--brand);transition:color .2s}
.com-logos a:hover svg{color:var(--brand-dk)}
[data-theme=dark] .com-logos a:hover svg{color:var(--brand)}
.cta.haspic{position:relative;overflow:clip}
.cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cta-scrim{position:absolute;inset:0;background:linear-gradient(165deg,rgba(28,18,33,.9),rgba(28,18,33,.78) 55%,rgba(43,26,51,.9));z-index:1}
/* the animated backdrop sits between the still and the scrim, so the tint covers both */
.cta-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0}
@media (prefers-reduced-motion:no-preference){.cta-vid{transition:opacity 1.1s}}
.cta-vid.on{opacity:1}
.cta:not(.haspic) .cta-bg,.cta:not(.haspic) .cta-scrim{display:none}
.cta.haspic .wrap{position:relative;z-index:2}
/* ---- footer (pinned dark) ---- */
.ftr{background:#150f1b;color:#b0a3bc;padding:64px 0 36px}
.ftr-top{display:flex;flex-wrap:wrap;gap:30px;align-items:center;justify-content:space-between;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.1)}
.ftr-tag{font-family:var(--fd);font-weight:700;color:#ece3f2}
.ftr-soc{display:flex;gap:12px}
.ftr-soc a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.16);color:#c9bcd4;text-decoration:none;transition:border-color .2s,color .2s,transform .2s}
.ftr-soc a:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.ftr-base{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:space-between;padding-top:26px;font-size:.88rem;color:#8d7f99}
.ftr-links{display:flex;flex-wrap:wrap;gap:20px}
.ftr-links a{color:#b0a3bc;text-decoration:none}
.ftr-links a:hover{color:var(--brand)}
.ftr-base .made i{color:var(--brand);margin:0 .25em}
:root{--brand-text:var(--brand)}
/* small brand-coloured text reads via --brand-text: same pink in light, lighter in dark for AA */
.eyebrow b,.nd-btn[aria-current=page],.m-menu a[aria-current=page]{color:var(--brand-text)}

/* contact submit "Sending..." state (r10) */
.ct-sending{display:inline-flex;align-items:center}
.ct-dots{display:inline-flex;align-items:flex-end;margin-left:.18em}
.ct-dots i{width:.3em;height:.3em;margin-left:.24em;border-radius:50%;background:currentColor;opacity:.3;animation:ctdot 1.05s infinite ease-in-out}
.ct-dots i:nth-child(2){animation-delay:.16s}
.ct-dots i:nth-child(3){animation-delay:.32s}
@keyframes ctdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-.14em)}}
@media (prefers-reduced-motion:reduce){.ct-dots i{animation:none;opacity:.7}}

/* .wd-free "honest question" heading - centre the flex heading + eyebrow (text-align cannot centre a
   flex container) and keep the highlighted phrase on one line so no word orphans (r11, applies site-wide) */
.wd-free .eyebrow,.wd-free .sec-head{justify-content:center}
.wd-free .sec-head .hl{white-space:nowrap}

/* ---- r12 shared additions ---- */
/* duo: ALWAYS top-aligned (never vertically centred). Regular two-paragraph duos keep 1fr/1fr.
   Lede duos (short bold statement left, body right) get a pull-quote treatment - a brand accent
   rule, larger type, and a slightly narrower left column - so the statement reads as deliberate
   rather than a short paragraph leaving a gap. :has degrades to 1fr/1fr where unsupported. */
.duo{align-items:start}
.duo:has(.duo-lead){grid-template-columns:.86fr 1.14fr}
@media (max-width:820px){.duo:has(.duo-lead){grid-template-columns:1fr}}
.duo p.duo-lead{font-size:clamp(1.3rem,2.55vw,2.1rem);line-height:1.24;font-weight:800;letter-spacing:-.015em;color:var(--ink);position:relative}
/* accent rule floats ABOVE the statement (absolute) so the left text top lines up with the right column text top */
.duo p.duo-lead::before{content:"";position:absolute;left:0;top:-1.35rem;width:2.8rem;height:3px;border-radius:2px;background:var(--brand)}

/* screenshot frame: browser-chrome treatment for product/case-study screenshots.
   Usage: <figure class="shot-frame"><span class="shot-bar" aria-hidden="true"><i></i><i></i><i></i><em>label</em></span><span class="shot-img"><img ...></span></figure> */
.shot-frame{margin:0;border-radius:14px;overflow:hidden;border:1px solid color-mix(in srgb,var(--brand) 24%,var(--line));background:var(--band);box-shadow:0 22px 60px -20px color-mix(in srgb,var(--brand) 50%,transparent),0 8px 26px rgba(0,0,0,.28)}
.shot-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:var(--band)}
.shot-bar i{width:9px;height:9px;border-radius:50%;background:var(--brand);opacity:.85}
.shot-bar i:nth-child(2){opacity:.5}
.shot-bar i:nth-child(3){opacity:.28}
.shot-bar em{margin-left:10px;font-style:normal;font-family:var(--fm);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--band-ink);opacity:.55}
.shot-img{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--line)}
.shot-img img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.shot-img::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 20%)}
@media (prefers-reduced-motion:no-preference){
  .shot-img img{transition:transform .7s var(--ease)}
  .shot-frame{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
  .shot-frame:hover{transform:translateY(-4px);box-shadow:0 30px 70px -20px color-mix(in srgb,var(--brand) 62%,transparent),0 10px 30px rgba(0,0,0,.32)}
  .shot-frame:hover .shot-img img{transform:scale(1.035)}
}

/* timeline showpiece: the spine draws itself as you scroll (--tlp set by site.js), each step's
   node and number ignite as they arrive, and hover sweeps a brand wash across the row */
.wd-steps::after{content:"";position:absolute;left:calc(1.05rem - .5px);top:14px;bottom:14px;width:2px;background:linear-gradient(to bottom,var(--brand),color-mix(in srgb,var(--brand) 40%,transparent));transform-origin:top;transform:scaleY(var(--tlp,0));box-shadow:0 0 14px color-mix(in srgb,var(--brand) 45%,transparent)}
.wd-steps .step.tl-in i{-webkit-text-stroke-color:var(--brand)}
.wd-steps .step.tl-in::before{border-color:var(--brand)}
@media (prefers-reduced-motion:no-preference){
  .wd-steps .step{background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 9%,transparent),transparent 62%) no-repeat;background-size:0% 100%;transition:background-size .5s var(--ease),transform .45s var(--ease)}
  .wd-steps .step:hover{background-size:100% 100%;transform:translateX(10px)}
  .wd-steps .step i{transition:color .4s ease,-webkit-text-stroke-color .4s ease,transform .45s var(--ease)}
  .wd-steps .step:hover i{transform:scale(1.07) rotate(-2deg)}
  .wd-steps .step.tl-in::before{animation:tlpop .7s var(--ease)}
  .wd-steps .step:hover::before{box-shadow:0 0 0 7px color-mix(in srgb,var(--brand) 16%,transparent)}
  @keyframes tlpop{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 45%,transparent)}100%{box-shadow:0 0 0 16px transparent}}
}
@media (prefers-reduced-motion:reduce){.wd-steps::after{transform:scaleY(1)}}
@media(max-width:640px){.wd-steps::after{display:none}}

/* field-level validation (r26) */
.fld-err{display:none;margin:.45em 0 0;color:var(--brand-text,var(--brand));font-size:.85rem;font-weight:600}
.fld-err.show{display:block}
.frm input[aria-invalid="true"],.frm textarea[aria-invalid="true"]{border-color:var(--brand-text,var(--brand))}