/* Sentien, shared stylesheet. Concept 2 only: charcoal, parchment, heather, soft. */
:root{
  --ink:#28282C; --deep:#1C1C22; --ground:#2E2E36; --raised:#383840;
  --paper:#FFFFFF; --parchment:#F5F5F7;
  --heather:#6B6478; --soft:#A79FB5;
  --line-d:rgba(255,255,255,.24); --line-l:rgba(40,40,44,.14);
  --pad:clamp(16.6px,4vw,51.5px); --shell:1180px; --r:4px;
  --ease:cubic-bezier(.22,.75,.28,1);
  --navh:63px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--deep);color:#fff;
  font-family:"Avenir Next","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-weight:400;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;
  display:flex;flex-direction:column}
img,svg,canvas{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:600;letter-spacing:-.026em;line-height:1.06;text-wrap:balance}
p{text-wrap:pretty}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--soft);outline-offset:5px;border-radius:var(--r)}
.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--pad);width:100%}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--ink);padding:12px 18px;
  z-index:300;font-weight:600;border-radius:var(--r)}
.skip:focus{left:12px;top:12px}

/* ------------------------------------------------------------------- nav */
.nav{position:relative;z-index:40;flex:none}
.nav-in{max-width:var(--shell);margin:0 auto;padding:14px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:22px}
/* the mark carries the name, so it earns a little more room than the menu */
.lockup{height:31px;width:auto}
.menu{display:flex;align-items:center;gap:clamp(14.7px,2.4vw,29.4px);list-style:none}
.menu a{font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.76);position:relative;padding:6px 0;transition:color .22s}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--soft);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.menu a:hover,.menu a[aria-current]{color:#fff}
.menu a:hover::after,.menu a[aria-current]::after{transform:scaleX(1)}
.menu .sep{color:rgba(255,255,255,.24);font-size:11.0px}
.burger{display:none}

/* ---------------------------------------------------------------- splash */
.splash{position:relative;flex:1 1 auto;min-height:0;display:grid;place-items:center;
  overflow:hidden}
#orb{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero{position:relative;z-index:10;text-align:center;padding:0 var(--pad);
  max-width:1100px;pointer-events:none}
/* a soft scrim so the mesh never eats the type it is sitting behind */
.hero::before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:150%;height:190%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(28,28,34,.82) 0%,rgba(28,28,34,.55) 45%,transparent 72%)}
.hero .lead{font-weight:300;font-size:clamp(18.4px,3.4vmin,36.8px);letter-spacing:-.02em;
  line-height:1.16;color:rgba(255,255,255,.94)}
.hero .big{font-weight:600;font-size:clamp(42.3px,11.2vmin,138.0px);letter-spacing:-.02em;
  line-height:.95;margin-top:.06em;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.88);
  paint-order:stroke fill}
.hero .sub{margin-top:clamp(12.9px,2.4vh,23.9px);font-size:clamp(12.9px,1.6vmin,15.6px);
  font-weight:300;color:rgba(255,255,255,.72);letter-spacing:.01em}
.hero .rule{width:min(560px,70%);height:1px;margin:clamp(14.7px,2.6vh,25.8px) auto 0;
  background:linear-gradient(90deg,transparent,rgba(167,159,181,.75),transparent)}

/* ---------------------------------------------------------------- pages */
.page{position:relative;z-index:5;flex:1 0 auto;padding:clamp(27.6px,5vh,58.9px) 0}
.page-head{max-width:62ch}
.eyebrow{font-weight:600;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--soft)}
.page h1{font-weight:300;font-size:clamp(29.4px,5.2vw,55.2px);letter-spacing:-.034em;margin-top:14px}
.page h1 b{font-weight:600}
.lede{font-size:clamp(13.8px,1.2vw,16.6px);font-weight:300;line-height:1.62;
  color:rgba(255,255,255,.86);max-width:56ch;margin-top:18px}

/* pillar cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:1px;background:var(--line-d);border:1px solid var(--line-d);
  margin-top:clamp(23.9px,4vh,40.5px);border-radius:var(--r);overflow:hidden}
.card{background:var(--ground);padding:clamp(18.4px,2.6vw,27.6px);display:flex;flex-direction:column;
  gap:14px;transition:background .3s var(--ease)}
.card:hover{background:#2E2E34}
.card .n{display:flex;align-items:center;gap:10px}
.card .n i{width:11px;height:11px;border-radius:50%;background:#fff;flex:none;
  transition:transform .3s var(--ease)}
.card:hover .n i{transform:scale(1.4);background:var(--soft)}
.card .n span{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--soft)}
.card h3{font-size:clamp(17.5px,1.7vw,21.2px);letter-spacing:-.022em}
.www{list-style:none;display:grid;gap:11px}
.www li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:baseline;
  padding-top:10px;border-top:1px solid var(--line-d)}
.www dfn{font-style:normal;font-weight:600;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--soft)}
.www span{font-size:13.3px;font-weight:300;line-height:1.5;color:rgba(255,255,255,.88)}
.card--seat{background:linear-gradient(160deg,#3D3849,#2E2E36)}
.card--seat .n i{background:var(--soft)}

/* buttons */
.acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:clamp(20.2px,3.4vh,33.1px)}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14.3px;line-height:1;
  padding:16px 25px;border-radius:var(--r);border:1.5px solid transparent;white-space:nowrap;
  transition:.18s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn .ar{transition:transform .18s}
.btn:hover .ar{transform:translateX(4px)}
.btn-primary{background:#fff;color:var(--ink);border-color:#fff}
.btn-primary:hover{background:var(--parchment);border-color:var(--parchment)}
.btn-ghost{color:rgba(255,255,255,.88);border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{background:rgba(255,255,255,.09);border-color:#fff;color:#fff}

/* forms */
.form{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:620px}
.form .wide{grid-column:1/-1}
.form label{font-size:10.0px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--soft);display:block;margin-bottom:6px}
.form input,.form textarea,.form select{width:100%;background:rgba(255,255,255,.07);color:#fff;
  border:1px solid var(--line-d);border-radius:var(--r);padding:12px 13px;
  font-family:inherit;font-size:13.8px}
.form textarea{min-height:110px;resize:vertical}
.promise{list-style:none;margin-top:20px;display:grid;gap:9px;max-width:56ch}
.promise li{font-size:13.8px;font-weight:300;color:rgba(255,255,255,.8);
  padding-left:19px;position:relative}
.promise li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;
  border-radius:50%;background:var(--soft)}
.sent{margin-top:22px;padding:20px;border:1px solid var(--line-d);border-radius:var(--r);
  background:rgba(167,159,181,.11);font-size:13.8px;font-weight:300;max-width:620px}
.sent b{font-weight:600}

/* ---------------------------------------------------------------- footer */
.foot{position:relative;z-index:20;flex:none;border-top:1px solid var(--line-d);margin-top:auto}
.foot-in{max-width:var(--shell);margin:0 auto;padding:14px var(--pad);
  display:flex;align-items:center;gap:clamp(16.6px,3vw,31.3px);flex-wrap:wrap}
/* both accreditation marks are used exactly as supplied. Optical height is
   matched at 34px, and neither is recoloured. */
.marks{display:flex;align-items:center;gap:18px}
.marks img{height:34px;width:auto;opacity:.88;transition:opacity .2s}
.marks img:hover{opacity:1}
.foot-r{display:flex;align-items:center;gap:clamp(14.7px,2.4vw,25.8px);margin-left:auto}
.social{display:flex;align-items:center;gap:10px}
.social a{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line-d);color:rgba(255,255,255,.72);
  transition:color .2s,border-color .2s,background .2s}
.social a:hover{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.07)}
.social svg{width:16px;height:16px;fill:currentColor}
.legal{font-size:10.5px;color:rgba(255,255,255,.5);text-align:right;line-height:1.55}

@media (max-width:760px){
  .menu{gap:12px}
  .menu a{font-size:11.0px;letter-spacing:.1em}
  .menu .sep{display:none}
  .form{grid-template-columns:1fr}
  .btn{width:100%;justify-content:center}
  .foot-in{flex-direction:column;align-items:flex-start;gap:14px}
  .foot-r{margin-left:0}
  .legal{text-align:left}
  .hero .big{-webkit-text-stroke-width:1px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .btn:hover{transform:none}
}

/* ============================================================ diagnostic */
.dx-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);
  gap:clamp(22.1px,4vw,49.7px);align-items:start}
.dx-dims{list-style:none;display:grid;gap:1px;background:var(--line-d);
  border:1px solid var(--line-d);border-radius:var(--r);overflow:hidden}
.dx-dims li{background:var(--ground);padding:14px 16px;display:flex;align-items:baseline;gap:12px}
.dx-dims b{font-size:13.3px;font-weight:600;min-width:98px}
.dx-dims span{font-size:11.5px;font-weight:300;color:rgba(255,255,255,.6)}

.dx-dim{margin-top:clamp(31.3px,5vh,53.4px);scroll-margin-top:22px}
.dx-dh{border-top:1px solid var(--line-d);padding-top:18px;margin-bottom:8px}
.dx-dh .n{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.dx-dh .n i{width:9px;height:9px;border-radius:50%;background:var(--soft);flex:none}
.dx-dh .n span{font-size:10.0px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--soft)}
.dx-dh h2{font-size:clamp(22.1px,2.6vw,29.4px);letter-spacing:-.028em}
.dx-blurb{margin-top:8px;font-size:13.8px;font-weight:300;color:rgba(255,255,255,.68);max-width:60ch}

.dx-q{border:0;padding:16px 0 4px;border-bottom:1px solid var(--line-d)}
.dx-q legend{font-size:14.7px;font-weight:400;line-height:1.5;padding:0;margin-bottom:12px;
  max-width:64ch;color:rgba(255,255,255,.94)}
.dx-q.is-done legend{color:rgba(255,255,255,.72)}
.dx-opts{display:flex;flex-wrap:wrap;gap:8px}
.dx-opts input{position:absolute;opacity:0;width:1px;height:1px}
.dx-opts label{display:inline-flex;align-items:center;padding:9px 15px;border-radius:100px;
  border:1px solid var(--line-d);font-size:12.4px;font-weight:600;cursor:pointer;
  color:rgba(255,255,255,.72);transition:.2s var(--ease)}
.dx-opts label:hover{border-color:rgba(255,255,255,.56);color:#fff}
.dx-opts input:checked + label{background:var(--soft);border-color:var(--soft);color:var(--ink)}
.dx-opts input:focus-visible + label{outline:2px solid var(--soft);outline-offset:3px}

.dx-actions{position:sticky;bottom:0;z-index:30;margin-top:34px;padding:16px 0;
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  background:linear-gradient(180deg,rgba(28,28,34,0),var(--deep) 40%)}
.dx-count{font-size:12.0px;color:rgba(255,255,255,.55);font-weight:600}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn[disabled]:hover{transform:none}

.dx-out{margin-top:clamp(31.3px,5vh,55.2px);border-top:1px solid var(--line-d);padding-top:26px;
  scroll-margin-top:16px}
.dx-verdict{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,280px);
  gap:clamp(18.4px,4vw,46.0px);align-items:center}
.dx-big{font-weight:300;font-size:clamp(53.4px,9vw,95.7px);letter-spacing:-.05em;line-height:1;
  margin-top:10px}
.dx-big small{font-size:.28em;font-weight:600;letter-spacing:0;color:rgba(255,255,255,.58);
  margin-left:6px}
.dx-band{font-size:clamp(19.3px,2.3vw,25.8px);font-weight:600;color:var(--soft);
  letter-spacing:-.02em;margin-top:2px}
.dx-line{margin-top:12px;font-size:14.7px;font-weight:300;line-height:1.6;
  color:rgba(255,255,255,.88);max-width:52ch}
.dx-radar{width:100%;height:auto}

.dx-list{list-style:none;margin-top:34px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.dx-list li{display:grid;gap:8px}
.dx-bar{height:3px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.dx-bar span{display:block;height:100%;background:var(--soft)}
.dx-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.dx-row b{font-size:13.8px;font-weight:600}
.dx-row em{font-style:normal;font-size:13.8px;font-weight:600;color:var(--soft)}
.dx-list p{font-size:12.0px;font-weight:300;line-height:1.5;color:rgba(255,255,255,.72)}

.dx-next{margin-top:38px;padding:clamp(20.2px,3vw,29.4px);border-radius:var(--r);
  background:linear-gradient(160deg,#3D3849,#2E2E36);border:1px solid var(--line-d)}
.dx-next h3{font-size:clamp(20.2px,2.4vw,27.6px);letter-spacing:-.026em;margin-top:10px}
.dx-note{margin-top:18px;font-size:11.5px;color:rgba(255,255,255,.58);max-width:60ch}

@media (max-width:820px){
  .dx-intro,.dx-verdict{grid-template-columns:1fr}
  .dx-radar{max-width:320px;margin:8px auto 0}
}
@media print{
  body{background:#fff;color:#000}
  .nav,.foot,.dx-dim,.dx-actions,.page-head .acts,.skip{display:none !important}
  .dx-out{border:0;margin:0}
  .dx-big,.dx-band{color:#28282C}
  .dx-line,.dx-list p,.dx-note{color:#444}
  .dx-next{background:#F5F5F7;border-color:#ddd;color:#28282C}
  .dx-bar{background:#ddd}.dx-bar span{background:#6B6478}
  .dx-row em{color:#6B6478}
}

/* ======================================================= the graph page */
.stagewrap{position:relative;flex:1 1 auto;min-height:0;display:grid;place-items:center;
  overflow:hidden}
#orb{position:absolute;inset:0;width:100%;height:100%;z-index:0}
#nodes{position:absolute;inset:0;z-index:7;pointer-events:none}

/* a node is a vertex of the sphere. Its position is set every frame by the
   renderer, so nothing here may fight it for transform. */
.node{position:absolute;left:0;top:0;pointer-events:auto;
  width:0;height:0;display:block;transition:opacity .3s ease}
.node .bead{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;
  border-radius:50%;background:#fff;
  box-shadow:0 0 0 0 rgba(167,159,181,0);
  transition:background .3s,box-shadow .3s,scale .35s var(--ease);
  scale:var(--s,1)}
.node .lab{position:absolute;left:0;top:0;width:132px;text-align:center;
  font-size:11.5px;font-weight:600;line-height:1.3;color:rgba(255,255,255,.86);
  text-shadow:0 0 10px rgba(28,28,34,.96),0 0 4px rgba(28,28,34,.92);
  transition:color .25s,opacity .3s ease;pointer-events:none}
.node--seat .bead{background:var(--soft);box-shadow:0 0 0 7px rgba(167,159,181,.14)}
.node--seat .lab{color:var(--soft)}
.node[data-near="1"] .bead{background:var(--soft);
  box-shadow:0 0 0 11px rgba(167,159,181,.16)}
.node[data-near="1"] .lab{color:#fff}
.node[aria-current="true"] .bead{background:var(--soft);
  box-shadow:0 0 0 13px rgba(167,159,181,.2)}
.node[aria-current="true"] .lab{color:#fff}
.node:focus-visible .bead{outline:2px solid var(--soft);outline-offset:6px}

.core{position:relative;z-index:8;width:min(88vw,460px);text-align:center;pointer-events:none}
.core > *{pointer-events:auto}
.core::before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:170%;height:180%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(28,28,34,.95) 0%,rgba(28,28,34,.78) 44%,transparent 76%)}
.core.is-open::before{background:radial-gradient(ellipse at center,rgba(28,28,34,.97) 0%,rgba(28,28,34,.88) 52%,transparent 80%)}
.pane{display:none}
.pane.is-on{display:block;animation:rise .42s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.tag{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:10.0px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--soft);margin-bottom:12px}
.tag i{width:7px;height:7px;border-radius:50%;background:var(--soft);flex:none}
.core h1,.core h2{font-size:clamp(22.1px,3.4vmin,36.8px);letter-spacing:-.03em;font-weight:600}
.core .intro{font-size:clamp(12.9px,1.6vmin,15.2px);font-weight:300;line-height:1.6;
  color:rgba(255,255,255,.88);margin-top:14px}
.www{list-style:none;margin-top:clamp(12.9px,2.2vh,18.4px);display:grid;
  gap:clamp(8.3px,1.5vh,12.9px);text-align:left}
.www li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:baseline;
  padding-top:9px;border-top:1px solid var(--line-d)}
.www dfn{font-style:normal;font-weight:600;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--soft)}
.www span{font-size:clamp(12.0px,1.55vmin,13.8px);font-weight:300;line-height:1.5;
  color:rgba(255,255,255,.92)}
.core .acts{justify-content:center;margin-top:clamp(12.9px,2.2vh,22.1px)}
.core .btn{padding:13px 21px;font-size:13.3px}

.stack{display:none;margin-top:26px;text-align:left}
.stack-item{border-bottom:1px solid var(--line-d)}
.stack-btn{width:100%;padding:15px 0;display:flex;align-items:center;gap:12px;
  text-align:left;font-size:14.7px;font-weight:600}
.stack-btn .bead{width:11px;height:11px;border-radius:50%;background:#fff;flex:none}
.stack-btn[data-seat] .bead{background:var(--soft)}
.stack-btn .chev{margin-left:auto;flex:none;transition:transform .25s}
.stack-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.stack-body{display:none;padding:0 0 18px 23px}
.stack-body.is-on{display:block}

@media (max-width:1180px){ .node .lab{width:112px;font-size:10.6px} }
@media (max-width:820px){
  body{overflow:visible}
  .stagewrap{display:block;padding:26px 0 40px;overflow:visible}
  #orb,#nodes{display:none}
  .core{width:100%;padding:0 var(--pad);margin:0 auto;max-width:var(--shell)}
  .core::before{display:none}
  .core .acts{justify-content:flex-start}
  .stack{display:block}
  .btn{width:100%;justify-content:center}
}

/* ================================================ Matt's pass, 18 August */
/* the splash needed something to click */
.hero{pointer-events:auto}
.hero-acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  margin-top:clamp(18.4px,3vh,29.4px)}
.hero-acts .btn{padding:15px 26px}

/* the graph is a full screen again. The text is below it, reached by scrolling. */
.band{position:relative;height:calc(100svh - var(--navh,63px));min-height:480px;
  display:grid;place-items:center;overflow:hidden}
@supports not (height:100svh){ .band{height:calc(100vh - var(--navh,63px))} }
.band #orb{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.band .core{width:min(88vw,460px)}

/* the cue. Without it a full screen graph reads as the whole page. */
.scrollcue{position:absolute;left:50%;bottom:clamp(12.9px,3vh,27.6px);translate:-50% 0;z-index:9;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:rgba(255,255,255,.56);transition:color .25s var(--ease)}
.scrollcue:hover{color:#fff}
.scrollcue svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;
  animation:nudge 2.4s var(--ease) infinite}
@keyframes nudge{0%,58%,100%{transform:translateY(0);opacity:.75}
  76%{transform:translateY(5px);opacity:1}}

/* sections */
.sec{padding:clamp(35.0px,6vh,66.2px) 0;border-top:1px solid var(--line-d);
  scroll-margin-top:12px}
.sec-head{max-width:62ch}
.sec h2{font-size:clamp(23.9px,3.6vw,38.6px);letter-spacing:-.03em;font-weight:300}
.sec h2 b{font-weight:600}
.sec .lede{margin-top:14px}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;
  background:var(--line-d);border:1px solid var(--line-d);border-radius:var(--r);
  overflow:hidden;margin-top:clamp(22.1px,3.4vh,35.0px)}
.cell{background:var(--ground);padding:clamp(18.4px,2.4vw,25.8px);display:flex;
  flex-direction:column;gap:12px;transition:background .3s var(--ease)}
.cell:hover{background:var(--raised)}
.cell .n{display:flex;align-items:center;gap:9px}
.cell .n i{width:10px;height:10px;border-radius:50%;background:#fff;flex:none;
  transition:transform .3s var(--ease),background .3s}
.cell:hover .n i{transform:scale(1.4);background:var(--soft)}
.cell .n span{font-size:10.0px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--soft)}
.cell h3{font-weight:500;font-size:clamp(16.6px,1.6vw,19.3px);letter-spacing:-.022em}
.cell p{font-size:13.3px;font-weight:300;line-height:1.55;color:rgba(255,255,255,.88)}

/* the signal band */
.signal{margin-top:clamp(22.1px,3.4vh,35.0px);padding:clamp(22.1px,3.4vw,36.8px);
  border-radius:var(--r);border:1px solid var(--line-d);
  background:linear-gradient(150deg,#3D3849,#2E2E36);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(18.4px,3vw,36.8px);
  align-items:center}
.signal h3{font-size:clamp(20.2px,2.6vw,27.6px);letter-spacing:-.026em;margin-top:8px}
.signal p{font-size:14.3px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.88);
  margin-top:10px;max-width:52ch}

/* proof: faces and marks */
.faces{display:flex;flex-wrap:wrap;gap:clamp(9.2px,1.4vw,14.7px);align-items:flex-start;
  margin-top:24px}
.face{width:clamp(51.5px,6vw,69.9px);flex:none;text-align:center}
.face img{width:100%;aspect-ratio:1;border-radius:50%;object-fit:cover;
  border:1px solid var(--line-d);background:var(--ground);
  filter:grayscale(1) contrast(1.06);
  transition:filter .3s var(--ease),transform .3s var(--ease),border-color .3s}
.face:hover img{filter:none;transform:translateY(-3px);border-color:var(--soft)}
.face b{display:block;margin-top:8px;font-size:11.0px;font-weight:600;line-height:1.25;
  color:rgba(255,255,255,.68)}
.face:hover b{color:#fff}
.face img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);
  transition:filter .3s var(--ease),transform .3s var(--ease)}
.face:hover img{filter:grayscale(0);transform:scale(1.05)}
.face--initials{display:grid;place-items:center;font-size:14.7px;font-weight:600;
  color:rgba(255,255,255,.5)}
.faces-note{font-size:12.4px;font-weight:300;color:rgba(255,255,255,.6);margin-left:6px}

.marquee{position:relative;margin-top:22px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee-track{display:flex;align-items:center;gap:clamp(35.0px,6vw,71.8px);width:max-content;
  animation:slide 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee img{height:clamp(22.1px,2.6vw,31.3px);width:auto;flex:none;
  filter:grayscale(1) brightness(0) invert(1);opacity:.78;
  transition:opacity .25s var(--ease)}
.marquee img:hover{opacity:1}

.rowlabel{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--soft)}

/* the two routes, made explicit */
.route{margin-top:22px;padding:16px 18px;border:1px solid var(--line-d);border-radius:var(--r);
  font-size:13.3px;font-weight:300;color:rgba(255,255,255,.76);max-width:620px}
.route a{color:var(--soft);font-weight:600;border-bottom:1px solid rgba(167,159,181,.45)}
.route a:hover{color:#fff;border-color:#fff}

@media (max-width:820px){
  .band{height:auto;min-height:0;padding:22px 0 8px;display:block}
  .band #orb,.scrollcue{display:none}
  .signal{grid-template-columns:1fr}
}

/* ============================================ the Delivery Signal, in the graph */
.dq{border:0;padding:12px 0 4px;border-bottom:1px solid var(--line-d);text-align:left}
.dq:last-child{border-bottom:0}
.dq legend{font-size:13.3px;font-weight:400;line-height:1.45;padding:0;margin-bottom:10px;
  color:rgba(255,255,255,.94)}
.dq.is-done legend{color:rgba(255,255,255,.6)}
.dq-opts{display:flex;flex-wrap:wrap;gap:6px}
.dq-opts input{position:absolute;opacity:0;width:1px;height:1px}
.dq-opts label{display:inline-flex;align-items:center;padding:7px 13px;border-radius:100px;
  border:1px solid var(--line-d);font-size:11.5px;font-weight:600;cursor:pointer;
  color:rgba(255,255,255,.7);transition:.18s var(--ease)}
.dq-opts label:hover{border-color:rgba(255,255,255,.55);color:#fff}
.dq-opts input:checked + label{background:var(--soft);border-color:var(--soft);color:var(--ink)}
.dq-opts input:focus-visible + label{outline:2px solid var(--soft);outline-offset:3px}
.dq-blurb{font-size:12.9px;font-weight:300;line-height:1.5;color:rgba(255,255,255,.72);
  margin-top:8px}
.dq-wrap{margin-top:14px;max-height:min(46vh,420px);overflow-y:auto;padding-right:6px;
  scrollbar-width:thin;scrollbar-color:var(--soft) transparent}
.dq-wrap::-webkit-scrollbar{width:5px}
.dq-wrap::-webkit-scrollbar-thumb{background:var(--soft);border-radius:3px}

/* a node fills as its dimension is answered */
.node.is-part .bead{background:linear-gradient(#A79FB5 0 0) no-repeat;
  background-size:100% var(--fill,50%);background-position:bottom;
  box-shadow:0 0 0 6px rgba(167,159,181,.14)}
.node.is-full .bead{background:var(--soft);box-shadow:0 0 0 9px rgba(167,159,181,.2)}
.node.is-ready .bead{background:#fff;box-shadow:0 0 0 11px rgba(255,255,255,.16);
  animation:ready 2.6s ease-in-out infinite}
@keyframes ready{0%,100%{box-shadow:0 0 0 11px rgba(255,255,255,.14)}
  50%{box-shadow:0 0 0 17px rgba(255,255,255,.07)}}
.node.is-ready .lab{color:#fff}

.dx-big{font-weight:300;font-size:clamp(42.3px,7vmin,71.8px);letter-spacing:-.05em;line-height:1;
  margin-top:6px}
.dx-big small{font-size:.3em;font-weight:600;letter-spacing:0;color:rgba(255,255,255,.55);
  margin-left:5px}
.dx-band{font-size:clamp(17.5px,2.4vmin,23.9px);font-weight:600;color:var(--soft);
  letter-spacing:-.02em}
.dx-line{margin-top:10px;font-size:13.3px;font-weight:300;line-height:1.55;
  color:rgba(255,255,255,.86)}
.dx-radar{width:min(100%,230px);margin:14px auto 0;height:auto}
.dx-list{list-style:none;margin-top:14px;display:grid;gap:9px;text-align:left}
.dx-bar{height:3px;background:rgba(255,255,255,.16);border-radius:2px;overflow:hidden}
.dx-bar span{display:block;height:100%;background:var(--soft)}
.dx-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:4px}
.dx-row b{font-size:12.0px;font-weight:600}
.dx-row em{font-style:normal;font-size:12.0px;font-weight:600;color:var(--soft)}
.dx-next-line{margin-top:16px;font-size:13.3px;font-weight:300;line-height:1.55;
  color:rgba(255,255,255,.86)}
.dx-next-line b{font-weight:600;color:#fff}
.dx-note{margin-top:14px;font-size:10.6px;color:rgba(255,255,255,.5)}

/* the graph pages carry more copy in the centre, so give it room */
.band .core{width:min(92vw,540px)}
/* an open node can carry a whole dimension of questions or the full result,
   which is taller than the band. Scroll inside the centre rather than letting
   it run off the screen. */
.core.is-open{max-height:calc(100svh - var(--navh,63px) - 44px);
  overflow-y:auto;overflow-x:hidden;padding:4px 14px;
  scrollbar-width:thin;scrollbar-color:var(--soft) transparent;
  overscroll-behavior:contain}
.core.is-open::-webkit-scrollbar{width:5px}
.core.is-open::-webkit-scrollbar-thumb{background:var(--soft);border-radius:3px}
/* the questions already scroll, so do not nest a second scroller inside one */
.core.is-open .dq-wrap{max-height:none;overflow:visible;padding-right:0}

/* -------------------------------------------------- mobile and tablet */
@media (max-width:1024px){
  .band .core{width:min(92vw,500px)}
  .node .lab{width:96px;font-size:11.0px}
}
@media (max-width:820px){
  .dq-wrap{max-height:none;overflow:visible;padding-right:0}
  .dq-opts label{padding:9px 14px;font-size:12.0px}
  .core .acts{flex-direction:column;align-items:stretch}
  .marquee-track{gap:34px;animation-duration:26s}
  .marquee img{height:22px}
  .face{width:64px}
  .signal{padding:22px}
  .grid4{grid-template-columns:1fr}
}
@media (max-width:520px){
  .face{width:calc(33.333% - 8px)}
  .face b{font-size:10.5px}
}

/* on a phone the graph is hidden, so the Delivery Signal becomes a list of six
   accordions carrying the same questions, and the result opens in the last one */
@media (max-width:820px){
  .stack-body .dq-wrap{max-height:none;overflow:visible}
  .stack-body .dx-radar{max-width:260px}
  .stack-body .acts{flex-direction:column;align-items:stretch}
  .band .core{width:100%;padding:0 var(--pad)}
  .core.is-open{max-height:none;overflow:visible;padding:0 var(--pad)}
}

/* ---------------------------------------------------- text that fits its frame */
/* Copy inside the graph centre and the cards was wrapping to two and three lines
   where one would do. Widen the measures, balance the wraps, and stop short
   labels breaking at all. */
.core{width:min(92vw,600px)}
.band .core{width:min(92vw,600px)}
.core h1,.core h2{text-wrap:balance;max-width:22ch;margin-inline:auto}
.core .intro,.core .dq-blurb,.core .dx-line{text-wrap:pretty;max-width:48ch;
  margin-inline:auto}
.cell h3{text-wrap:balance}
.cell p{text-wrap:pretty}
.sec h2{max-width:20ch}
.node .lab{width:auto;max-width:170px;white-space:nowrap}
.node .lab.wrap{white-space:normal;width:132px}
.dq legend{text-wrap:pretty;max-width:52ch}
.dq-opts label{white-space:nowrap}
.btn{white-space:nowrap}
.signal h3,.dx-band,.dx-next-line{text-wrap:balance}
.faces-note{white-space:nowrap}
@media (max-width:1180px){ .node .lab{max-width:130px;white-space:normal} }


/* ================================================= the Delivery Signal */
.sg-wrap{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;
  overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}
/* #signal is the flex item, not .sg. Without this it shrinks to fit and the
   auto margins on .sg have no free space to centre into. */
.sg-wrap > #signal{width:100%;min-width:0}
.sg{max-width:var(--shell);margin:0 auto;padding:0 var(--pad);width:100%;
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(28px,5vw,72px);align-items:center}
.sg-ref{font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--soft)}
.sg-gap{margin-top:clamp(14px,2.4vh,22px)}
.sg-l h1{font-size:clamp(21px,2.7vw,33px);font-weight:500;letter-spacing:-.022em;
  line-height:1.18;margin-top:10px;max-width:22ch;text-wrap:balance}
.sg-note{margin-top:9px;font-size:12.5px;font-weight:300;line-height:1.55;
  color:rgba(255,255,255,.6);max-width:46ch}
.sg-tiny{margin-top:16px;font-size:11px}

.sg-opts{display:grid;gap:7px;margin-top:clamp(16px,2.6vh,24px);max-width:520px}
.sg-opt{display:flex;align-items:center;gap:12px;text-align:left;width:100%;
  padding:12px 14px;border-radius:var(--r);border:1px solid var(--line-d);
  background:rgba(255,255,255,.03);font-size:14px;font-weight:400;line-height:1.35;
  color:rgba(255,255,255,.9);transition:.15s var(--ease)}
.sg-opt:hover{background:var(--raised);border-color:var(--soft);transform:translateX(3px)}
.sg-opt[aria-pressed="true"]{background:var(--soft);border-color:var(--soft);color:var(--ink)}
.sg-k{flex:none;width:20px;height:20px;border-radius:3px;display:grid;place-items:center;
  border:1px solid var(--line-d);font-size:10px;font-weight:700;color:var(--soft)}
.sg-opt:hover .sg-k{background:var(--soft);color:var(--ink);border-color:var(--soft)}
.sg-opt[aria-pressed="true"] .sg-k{background:var(--ink);color:#fff;border-color:var(--ink)}

.sg-nav{display:flex;align-items:center;gap:16px;margin-top:16px}
.sg-back{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.62);
  border-bottom:1px solid rgba(255,255,255,.26);padding-bottom:2px}
.sg-back:hover{color:#fff;border-color:#fff}
.sg-hint{font-size:11.5px;color:rgba(255,255,255,.42)}

.sg-bars{list-style:none;display:grid;gap:12px;margin-top:12px}
.sg-bars li{display:grid;grid-template-columns:minmax(0,1fr) 26px;
  grid-template-areas:"n v" "b b" "s s";gap:3px 8px;align-items:baseline}
.sg-bars b{grid-area:n;font-size:12px;font-weight:600;color:rgba(255,255,255,.88)}
.sg-bars em{grid-area:v;font-style:normal;font-size:12px;font-weight:600;color:var(--soft);
  text-align:right}
.sg-bars span{grid-area:b;height:3px;background:rgba(255,255,255,.14);border-radius:2px;
  overflow:hidden;margin-top:2px}
.sg-bars i{display:block;height:100%;background:var(--soft);transition:width .45s var(--ease)}
.sg-bars small{grid-area:s;font-size:10px;color:rgba(255,255,255,.4)}
.sg-final li{grid-template-areas:"n v" "b b"}

.sg-score{font-size:clamp(38px,5.4vw,62px);font-weight:300;letter-spacing:-.04em;
  line-height:1;margin-top:8px;max-width:none;display:flex;align-items:baseline;gap:12px}
.sg-score small{font-size:.3em;font-weight:600;color:rgba(255,255,255,.5)}
.sg-band{font-size:.42em;font-weight:600;color:var(--soft);letter-spacing:-.01em}
.sg-line{margin-top:10px;font-size:14.5px;font-weight:400;color:rgba(255,255,255,.9);
  max-width:48ch}
.sg-weak{margin-top:7px;font-size:13.5px;font-weight:300;line-height:1.55;
  color:rgba(255,255,255,.86);max-width:48ch}
.sg-weak b{font-weight:600;color:#fff}
.sg-do{margin-top:8px;padding-left:0;list-style:none;counter-reset:d;display:grid;gap:7px;
  max-width:56ch}
.sg-do li{counter-increment:d;display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;
  font-size:13.5px;font-weight:300;line-height:1.5;color:rgba(255,255,255,.88)}
.sg-do li::before{content:counter(d);font-size:9.5px;font-weight:700;color:var(--soft);
  padding-top:3px}
.sg-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(14px,2.4vh,22px)}
.sg-acts .btn{padding:11px 18px;font-size:13.5px}
.sg-share{margin-top:clamp(12px,1.8vh,18px);padding-top:clamp(10px,1.5vh,14px);
  border-top:1px solid var(--line-d)}
.sg-link{font-size:12px;font-weight:600;color:var(--soft);margin-top:9px;
  border-bottom:1px solid rgba(167,159,181,.4);padding-bottom:2px}
.sg-link:hover{color:#fff;border-color:#fff}

@media (max-width:900px){
  .sg-wrap{overflow:visible;align-items:flex-start;padding:22px 0 34px}
  .sg{grid-template-columns:1fr;gap:26px}
  .sg-r{border-top:1px solid var(--line-d);padding-top:18px}
  body.is-signal{height:auto;overflow:visible}
}
@media print{
  body{background:#fff;color:#000}
  .nav,.foot,.sg-acts,.sg-share,.sg-nav,.skip{display:none !important}
  .sg{grid-template-columns:1fr;gap:20px}
  .sg-ref,.sg-band,.sg-do li::before,.sg-bars em{color:#6B6478}
  .sg-line,.sg-weak,.sg-do li{color:#222}
  .sg-bars span{background:#ddd}.sg-bars i{background:#6B6478}
}

/* ==================================== list on the left, the detail on the right */
.split{display:grid;grid-template-columns:minmax(220px,.9fr) minmax(0,2fr);
  gap:clamp(22.1px,4vw,58.9px);margin-top:clamp(23.9px,4vh,40.5px);align-items:start}
.split-list{list-style:none;display:grid;gap:1px;background:var(--line-d);
  border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.split-list li{background:var(--deep)}
.split-btn{width:100%;display:flex;align-items:center;gap:12px;text-align:left;
  padding:14px 4px;font-weight:500;font-size:15.2px;font-weight:600;letter-spacing:-.015em;
  color:rgba(255,255,255,.62);transition:.22s var(--ease)}
.split-btn i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.3);
  flex:none;transition:.22s var(--ease)}
.split-btn:hover{color:#fff;padding-left:9px}
.split-btn:hover i{background:var(--soft)}
.split-btn[aria-selected="true"]{color:#fff}
.split-btn[aria-selected="true"] i{background:var(--soft);transform:scale(1.5);
  box-shadow:0 0 0 5px rgba(167,159,181,.16)}
.split-num{margin-left:auto;font-size:10.5px;font-weight:600;letter-spacing:.16em;
  color:rgba(255,255,255,.34)}
.split-panel{min-height:220px}
.split-pane{display:none}
.split-pane.is-on{display:block;animation:mzin .34s var(--ease) both}
.split-pane h3{font-weight:500;font-size:clamp(20.2px,2.6vw,29.4px);letter-spacing:-.028em;text-wrap:balance}
.split-pane p{margin-top:14px;font-size:clamp(13.8px,1.15vw,15.6px);font-weight:300;
  line-height:1.62;color:rgba(255,255,255,.88);max-width:60ch}
.split-pane .kicker{font-size:10.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--soft);margin-bottom:11px}
@media (max-width:820px){
  .split{grid-template-columns:1fr;gap:20px}
  .split-panel{min-height:0}
}

/* cycling replaces the back button. The sphere is the way out. */
.cyc{display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:clamp(12.9px,2vh,18.4px)}
.cyc-b{width:30px;height:30px;border-radius:50%;border:1px solid var(--line-d);
  display:grid;place-items:center;font-size:15.6px;line-height:1;
  color:rgba(255,255,255,.66);transition:.18s var(--ease)}
.cyc-b:hover{border-color:var(--soft);color:#fff;background:rgba(167,159,181,.14)}
.cyc-n{font-size:11.0px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5);min-width:62px;text-align:center}
.cyc-x{font-size:11.0px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin-left:6px;padding-bottom:2px;
  border-bottom:1px solid rgba(255,255,255,.22);transition:.18s var(--ease)}
.cyc-x:hover{color:#fff;border-color:#fff}
@media (max-width:820px){ .cyc{display:none} }

/* ------------------------------------- copy that fits, audited 18 August */
/* Headings were breaking to two and three lines in frames wide enough for one. */
.sec h2{max-width:none;text-wrap:balance}
.sec-head{max-width:74ch}
.page-head{max-width:74ch}
.lede{max-width:64ch}
.core h1,.core h2{max-width:26ch}
.mz-out h2{max-width:none}
.signal p{max-width:58ch}
.split-pane p{max-width:62ch}
.hero .sub{max-width:62ch;margin-inline:auto}

/* the Signal is one screen. The footer sits tight so nothing scrolls. */
body.is-signal{height:100%;overflow:hidden}
body.is-signal .foot-in{padding:8px var(--pad)}
body.is-signal .marks img{height:26px}
body.is-signal .marks .apm{height:29px}
body.is-signal .social a{width:27px;height:27px}
body.is-signal .social svg{width:14px;height:14px}
body.is-signal .legal{font-size:10.0px}
@media (max-width:860px){ body.is-signal{height:auto;overflow:visible} }

/* the contact page is one screen now the promise list is two lines shorter */
body.is-tight .page{padding:clamp(20.2px,3.4vh,36.8px) 0}
body.is-tight .sec-head h2{margin-top:10px}
body.is-tight .promise{margin-top:16px;gap:7px}
body.is-tight .form{margin-top:18px;gap:10px}
body.is-tight .form textarea{min-height:84px}
body.is-tight .route{margin-top:16px;padding:13px 15px}
body.is-tight .foot-in{padding:10px var(--pad)}


/* ------------------------------- the contact page, on a single screen */
body.is-tight{height:100%;overflow:hidden;display:flex;flex-direction:column}
body.is-tight main{flex:1 1 auto;min-height:0;display:flex;align-items:center;
  padding:0;overflow-y:auto}
body.is-tight .page{padding:14px 0;width:100%}
body.is-tight .sec-head h2{margin-top:8px}
body.is-tight .lede{margin-top:10px;font-size:14.5px}
body.is-tight .promise{margin-top:12px;gap:5px}
body.is-tight .promise li{font-size:13px}
body.is-tight .form{margin-top:14px;gap:9px;max-width:660px}
body.is-tight .form textarea{min-height:74px}
body.is-tight .form input,body.is-tight .form textarea{padding:9px 11px;font-size:14px}
body.is-tight .route{margin-top:12px;padding:11px 13px;font-size:13px}
body.is-tight .foot{margin-top:0}
body.is-tight .foot-in{padding:8px var(--pad)}
body.is-tight .marks img{height:26px}
body.is-tight .marks .apm{height:29px}
body.is-tight .social a{width:26px;height:26px}
body.is-tight .social svg{width:13px;height:13px}
body.is-tight .legal{font-size:9.5px}
@media (max-width:860px){ body.is-tight{height:auto;overflow:visible} }

/* the mark assembling as the reading is taken */
.sg-mark{width:100%;max-width:clamp(120px,15vh,168px);aspect-ratio:1;display:block;margin:0 0 14px}
.sg-mark-lg{max-width:clamp(126px,17vh,178px)}
@media (max-width:900px){ .sg-mark{max-width:130px;margin-inline:auto} }