/* ==========================================================================
   Elite Screening Solutions — components
   ========================================================================== */

/* ---------- utility bar ---------- */
.topbar{background:var(--ink);color:#9FB5B7;font-family:var(--mono);
  font-size:var(--t-xs);letter-spacing:.04em}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-4);min-height:38px;flex-wrap:wrap}
.topbar a{color:#C4D4D5;text-decoration:none}
.topbar a:hover{color:var(--teal-bright)}
.topbar-l,.topbar-r{display:flex;align-items:center;gap:var(--s-5);
  flex-wrap:wrap}
.live{display:inline-flex;align-items:center;gap:7px}
.live .dot{width:6px;height:6px;border-radius:50%;background:var(--teal-bright);
  box-shadow:0 0 0 0 rgba(95,227,211,.7);animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(95,227,211,.55)}
  70%{box-shadow:0 0 0 7px rgba(95,227,211,0)}
  100%{box-shadow:0 0 0 0 rgba(95,227,211,0)}}
@media(max-width:760px){.topbar-l .hide-sm{display:none}}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:100;background:rgba(244,246,245,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
  transition:box-shadow .3s var(--ease),background .3s var(--ease)}
.hdr.stuck{box-shadow:0 10px 30px -22px rgba(11,26,30,.5);
  background:rgba(244,246,245,.95)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-5);min-height:var(--header-h)}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;
  color:var(--ink);flex:none}
.brand svg{width:38px;height:38px;flex:none}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-txt b{font-family:var(--display);font-weight:800;font-size:1.02rem;
  letter-spacing:.01em;text-transform:uppercase}
.brand-txt span{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;
  color:var(--teal-deep);text-transform:uppercase;margin-top:3px}

.nav{display:flex;align-items:center;gap:2px}
.nav a{font-family:var(--display);font-weight:600;font-size:.87rem;
  text-decoration:none;padding:10px 13px;border-radius:var(--radius);
  color:var(--grey-dark);transition:color .2s,background .2s;position:relative}
.nav a:hover{color:var(--ink);background:rgba(11,26,30,.05)}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:13px;
  right:13px;bottom:4px;height:2px;background:var(--teal)}

/* dropdown */
.has-sub{position:relative}
.has-sub>button{display:flex;align-items:center;gap:6px;background:none;
  border:0;cursor:pointer;font-family:var(--display);font-weight:600;
  font-size:.87rem;color:var(--grey-dark);padding:10px 13px;
  border-radius:var(--radius);transition:color .2s,background .2s}
.has-sub>button:hover{color:var(--ink);background:rgba(11,26,30,.05)}
.has-sub>button svg{transition:transform .3s var(--ease)}
.has-sub[data-open="true"]>button svg{transform:rotate(180deg)}
.sub{position:absolute;top:calc(100% + 10px);left:0;min-width:310px;
  background:#fff;border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:10px;box-shadow:0 26px 50px -26px rgba(11,26,30,.42);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .24s var(--ease),transform .24s var(--ease),
    visibility .24s}
.has-sub[data-open="true"] .sub{opacity:1;visibility:visible;transform:none}
.sub a{display:block;padding:10px 12px;border-radius:var(--radius)}
.sub a small{display:block;font-family:var(--body);font-weight:400;
  font-size:.83rem;color:var(--grey);margin-top:2px;letter-spacing:0}
.sub a:hover small{color:var(--grey-dark)}

.hdr-cta{display:flex;align-items:center;gap:var(--s-3);flex:none}
.burger{display:none;width:44px;height:44px;border:1px solid var(--rule);
  background:#fff;border-radius:var(--radius);cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{display:block;width:19px;height:1.5px;background:var(--ink);
  transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media(max-width:1120px){
  .nav,.hdr-cta .btn-ghost{display:none}
  .burger{display:flex}
}

/* mobile drawer */
.drawer{position:fixed;inset:var(--header-h) 0 0;background:var(--ink);
  color:#fff;z-index:99;overflow-y:auto;padding:var(--s-6) 0 var(--s-9);
  transform:translateX(100%);transition:transform .42s var(--ease-out);
  visibility:hidden}
.drawer.open{transform:none;visibility:visible}
.drawer a{display:block;text-decoration:none;color:#fff;
  font-family:var(--display);font-weight:700;font-size:1.18rem;
  padding:15px 0;border-bottom:1px solid var(--ink-3)}
.drawer .dgroup{font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.18em;text-transform:uppercase;color:var(--teal-bright);
  margin:var(--s-6) 0 var(--s-2)}
.drawer .dsub a{font-size:1rem;font-weight:600;color:#B9CBCC;padding:12px 0}
.drawer .btn{width:100%;margin-top:var(--s-5)}

/* ---------- hero ----------
   No stock photo hero. The hero is a live specimen record: a typographic
   thesis over an engineered field grid. */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;
  padding-block:clamp(64px,10vw,132px) clamp(56px,8vw,104px)}
.hero-grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(27,179,174,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(27,179,174,.07) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 72% 8%,#000 12%,transparent 72%);
  mask-image:radial-gradient(120% 90% at 72% 8%,#000 12%,transparent 72%)}
.hero-glow{position:absolute;top:-28%;right:-14%;width:min(760px,86vw);
  aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(27,179,174,.2),transparent 62%);
  filter:blur(38px)}
.hero .wrap{position:relative;z-index:2}
.hero-inner{display:grid;gap:clamp(40px,5vw,72px);align-items:start;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
@media(max-width:1000px){.hero-inner{grid-template-columns:1fr}}
.hero h1{font-size:var(--t-5xl);color:#fff;margin-bottom:var(--s-5)}
.hero h1 em{font-style:normal;color:var(--teal-bright);position:relative;
  white-space:nowrap}
.hero-lede{font-size:clamp(1.125rem,1.1vw + .95rem,1.375rem);line-height:1.55;
  color:#B9CBCC;max-width:52ch;margin-bottom:var(--s-6)}

/* hero stat strip */
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--ink-3);margin-top:var(--s-7)}
.hero-stats div{padding:var(--s-5) var(--s-4) 0 0}
.hero-stats b{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(1.5rem,2.4vw + 1rem,2.25rem);color:#fff;line-height:1;
  letter-spacing:-.03em}
.hero-stats span{display:block;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--teal-bright);
  margin-top:9px;line-height:1.45}
@media(max-width:560px){.hero-stats{grid-template-columns:1fr 1fr}}

/* ---------- specimen record panel (hero right) ---------- */
.record{background:linear-gradient(165deg,#12313A,#0C2129);
  border:1px solid var(--ink-3);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:0 34px 70px -34px rgba(0,0,0,.8)}
.record-hd{display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;background:rgba(27,179,174,.09);
  border-bottom:1px solid var(--ink-3);font-family:var(--mono);
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal-bright)}
.record-bd{padding:18px}
.rrow{display:flex;align-items:flex-start;gap:14px;padding:13px 0;
  border-bottom:1px solid rgba(22,56,63,.85)}
.rrow:last-child{border-bottom:0}
.rrow .rn{font-family:var(--mono);font-size:.68rem;color:var(--teal);
  padding-top:3px;flex:none;width:22px}
.rrow .rt{flex:1;min-width:0}
.rrow .rt b{display:block;font-family:var(--display);font-weight:700;
  font-size:.9rem;color:#fff;letter-spacing:.01em}
.rrow .rt span{display:block;font-family:var(--mono);font-size:.7rem;
  color:#8AA3A6;margin-top:3px;letter-spacing:.03em}
.rrow .rk{font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 9px;border-radius:2px;flex:none;
  background:rgba(27,179,174,.14);color:var(--teal-bright);
  border:1px solid rgba(27,179,174,.3)}
.rrow .rk.amber{background:rgba(224,164,88,.13);color:var(--amber);
  border-color:rgba(224,164,88,.3)}

/* ---------- marquee of covered counties ---------- */
.ticker{background:var(--ink-2);border-block:1px solid var(--ink-3);
  overflow:hidden;padding:15px 0}
.ticker-track{display:flex;gap:0;width:max-content;
  animation:slide 46s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.ticker span{font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:#8AA3A6;padding:0 24px;white-space:nowrap;
  display:flex;align-items:center;gap:24px}
.ticker span::after{content:"";width:4px;height:4px;border-radius:50%;
  background:var(--teal-deep)}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none;
  flex-wrap:wrap;width:auto;justify-content:center}}

/* ---------- chain of custody (signature element) ----------
   Seven sealed stages. Numbering is legitimate: chain of custody IS a
   sequence, and each stage carries its governing regulation. */
.coc{position:relative;display:grid;gap:0;
  grid-template-columns:minmax(0,1fr)}
.coc-track{position:absolute;left:27px;top:34px;bottom:34px;width:2px;
  background:var(--ink-3);overflow:hidden}
.coc-fill{position:absolute;inset:0 0 auto 0;height:0;
  background:linear-gradient(180deg,var(--teal),var(--teal-bright));
  transition:height .12s linear}
.coc-step{position:relative;display:grid;
  grid-template-columns:56px minmax(0,1fr);gap:var(--s-5);
  padding:var(--s-5) 0;align-items:start}
.coc-seal{width:56px;height:56px;border-radius:50%;flex:none;
  border:2px solid var(--ink-3);background:var(--ink);display:grid;
  place-items:center;font-family:var(--mono);font-size:.82rem;font-weight:600;
  color:#6E8085;position:relative;z-index:2;
  transition:border-color .5s var(--ease),color .5s var(--ease),
    background .5s var(--ease),transform .5s var(--ease-out)}
.coc-step.on .coc-seal{border-color:var(--teal);color:#04231F;
  background:var(--teal);transform:scale(1.07)}
.coc-step.on .coc-seal::after{content:"";position:absolute;inset:-7px;
  border-radius:50%;border:1px solid rgba(27,179,174,.35);
  animation:seal .8s var(--ease-out)}
@keyframes seal{from{transform:scale(.72);opacity:1}to{transform:scale(1.18);opacity:0}}
.coc-body{padding-top:5px;opacity:.42;transition:opacity .5s var(--ease)}
.coc-step.on .coc-body{opacity:1}
.coc-body h3{color:#fff;margin-bottom:8px;font-size:var(--t-lg)}
.coc-body p{color:#A8BEC0;font-size:var(--t-base);max-width:56ch;
  margin-bottom:10px}
.coc-cite{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--amber);border:1px solid rgba(224,164,88,.3);
  background:rgba(224,164,88,.08);padding:5px 10px;border-radius:2px}

/* ---------- downtime calculator (signature tool) ---------- */
.calc{background:linear-gradient(168deg,#123640,#0B1A1E);
  border:1px solid var(--ink-3);border-radius:var(--radius-lg);
  overflow:hidden}
.calc-hd{padding:var(--s-5) clamp(20px,3.4vw,36px);
  border-bottom:1px solid var(--ink-3);background:rgba(27,179,174,.07)}
.calc-hd h3{color:#fff;margin-bottom:6px}
.calc-hd p{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.09em;
  text-transform:uppercase;color:var(--teal-bright);margin:0}
.calc-bd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr)}
@media(max-width:900px){.calc-bd{grid-template-columns:1fr}}
.calc-in{padding:clamp(22px,3.4vw,36px);display:flex;flex-direction:column;
  gap:var(--s-6)}
.calc-out{padding:clamp(22px,3.4vw,36px);background:rgba(0,0,0,.26);
  border-left:1px solid var(--ink-3);display:flex;flex-direction:column;
  justify-content:center;gap:var(--s-5)}
@media(max-width:900px){.calc-out{border-left:0;border-top:1px solid var(--ink-3)}}
.ctrl label{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s-4);font-family:var(--display);font-weight:600;font-size:.88rem;
  color:#DCE7E7;margin-bottom:12px}
.ctrl label output{font-family:var(--mono);font-size:.95rem;
  color:var(--teal-bright);font-weight:500}
.ctrl input[type=range]{width:100%;-webkit-appearance:none;appearance:none;
  background:transparent;cursor:pointer;height:22px}
.ctrl input[type=range]::-webkit-slider-runnable-track{height:3px;
  background:var(--ink-3);border-radius:2px}
.ctrl input[type=range]::-moz-range-track{height:3px;background:var(--ink-3);
  border-radius:2px}
.ctrl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;
  width:20px;height:20px;border-radius:50%;background:var(--teal);
  border:3px solid #0B1A1E;margin-top:-8.5px;
  box-shadow:0 0 0 1px var(--teal);transition:transform .2s var(--ease)}
.ctrl input[type=range]::-moz-range-thumb{width:14px;height:14px;
  border-radius:50%;background:var(--teal);border:3px solid #0B1A1E;
  box-shadow:0 0 0 1px var(--teal)}
.ctrl input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.15)}
.ctrl .hint{font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;
  color:#6E8085;margin-top:8px;display:block}
.calc-fig{font-family:var(--display);font-weight:800;letter-spacing:-.035em;
  line-height:.95;color:var(--teal-bright);
  font-size:clamp(2.75rem,6.2vw,4.5rem);font-variant-numeric:tabular-nums}
.calc-lbl{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:#8AA3A6;margin-top:10px}
.calc-sub{border-top:1px solid var(--ink-3);padding-top:var(--s-5);
  display:grid;gap:var(--s-4)}
.calc-sub div{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s-4)}
.calc-sub dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:#8AA3A6}
.calc-sub dd{margin:0;font-family:var(--display);font-weight:700;
  font-size:1.05rem;color:#fff;font-variant-numeric:tabular-nums}
.calc-note{font-size:.84rem;color:#7E9698;line-height:1.5;margin:0}

/* ---------- coverage map ---------- */
.map-wrap{position:relative;background:var(--ink-2);
  border:1px solid var(--ink-3);border-radius:var(--radius-lg);
  padding:clamp(18px,3vw,34px)}
.map-wrap svg{width:100%;height:auto;overflow:visible}
.mp{fill:var(--teal);opacity:0;transform-box:fill-box;transform-origin:center;
  transform:scale(.4)}
.map-wrap.in .mp{animation:pin .55s var(--ease-out) forwards}
@keyframes pin{to{opacity:1;transform:scale(1)}}
.mring{fill:none;stroke:var(--teal);stroke-width:1.5;opacity:0}
.map-wrap.in .mring{animation:ring 2.6s ease-out infinite}
@keyframes ring{0%{opacity:.7;r:4}70%{opacity:0;r:26}100%{opacity:0;r:26}}
@media (prefers-reduced-motion:reduce){
  .mp{opacity:1;transform:none;animation:none!important}
  .mring{display:none}}

/* ---------- stat counters ---------- */
.stat b{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(2.25rem,4vw + 1rem,3.5rem);letter-spacing:-.035em;
  line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.band-dark .stat b{color:#fff}
.stat span{display:block;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep);
  margin-top:12px;line-height:1.5}
.band-dark .stat span{color:var(--teal-bright)}
.stat p{font-size:.92rem;color:var(--grey-dark);margin-top:10px}
.band-dark .stat p{color:#8AA3A6}

/* ---------- comparison table ---------- */
.cmp{width:100%;border:1px solid var(--rule);border-radius:var(--radius);
  overflow:hidden;background:#fff}
.cmp th,.cmp td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--rule);
  vertical-align:top;font-size:.95rem}
.cmp thead th{background:var(--ink);color:#fff;font-family:var(--display);
  font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:0}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp tbody th{font-family:var(--display);font-weight:700;font-size:.92rem;
  width:34%;background:var(--paper-2)}
.cmp td.yes{color:var(--teal-deep);font-weight:600}
.cmp .mono-cell{font-family:var(--mono);font-size:.84rem}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- accordion ---------- */
.acc{border-top:1px solid var(--rule)}
.acc details{border-bottom:1px solid var(--rule)}
.acc summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;
  position:relative;font-family:var(--display);font-weight:700;
  font-size:var(--t-lg);letter-spacing:-.01em;transition:color .2s}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--teal-deep)}
.acc summary::after,.acc summary::before{content:"";position:absolute;
  right:8px;top:50%;background:var(--teal-deep);transition:transform .3s var(--ease)}
.acc summary::after{width:15px;height:1.5px;margin-top:-.75px}
.acc summary::before{width:1.5px;height:15px;margin-top:-7.5px;right:14.75px}
.acc details[open] summary::before{transform:rotate(90deg);opacity:0}
.acc .acc-bd{padding:0 var(--s-8) 26px 0;color:var(--grey-dark);
  max-width:var(--measure)}
.acc .acc-bd p{margin-bottom:.85em}

/* ---------- forms ---------- */
.form{display:grid;gap:var(--s-5)}
.frow{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.fg{display:flex;flex-direction:column;gap:8px}
.fg label{font-family:var(--display);font-weight:600;font-size:.85rem;
  letter-spacing:.01em}
.fg label .req{color:#C4543F}
.fg .help{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;
  color:var(--grey)}
.fg input,.fg select,.fg textarea{width:100%;padding:14px 15px;
  background:#fff;border:1px solid var(--rule);border-radius:var(--radius);
  font-family:var(--body);font-size:1rem;color:var(--ink);
  transition:border-color .2s,box-shadow .2s}
.fg textarea{min-height:132px;resize:vertical}
.fg select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236E8085' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;
  padding-right:40px;cursor:pointer}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:0;
  border-color:var(--teal);box-shadow:0 0 0 3px rgba(27,179,174,.16)}
.fg input[aria-invalid="true"],.fg textarea[aria-invalid="true"],
.fg select[aria-invalid="true"]{border-color:#C4543F;
  box-shadow:0 0 0 3px rgba(196,84,63,.13)}
.fg .err{font-family:var(--mono);font-size:.7rem;color:#C4543F;
  letter-spacing:.03em;min-height:0}
.band-dark .fg label{color:#DCE7E7}
.band-dark .fg input,.band-dark .fg select,.band-dark .fg textarea{
  background:rgba(255,255,255,.05);border-color:var(--ink-3);color:#fff}
.band-dark .fg .help{color:#7E9698}

/* choice chips */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;
  left:0;top:0;margin:0}
.chip span{display:block;padding:11px 17px;border:1px solid var(--rule);
  border-radius:var(--radius);font-family:var(--display);font-weight:600;
  font-size:.84rem;background:#fff;transition:all .2s var(--ease);
  cursor:pointer}
.chip input:checked+span{background:var(--ink);color:#fff;
  border-color:var(--ink)}
.chip input:focus-visible+span{outline:3px solid var(--teal);outline-offset:2px}
.chip:hover span{border-color:var(--grey)}
.band-dark .chip span{background:rgba(255,255,255,.05);border-color:var(--ink-3);
  color:#DCE7E7}
.band-dark .chip input:checked+span{background:var(--teal);color:#04231F;
  border-color:var(--teal)}

.form-note{font-size:.86rem;color:var(--grey);line-height:1.55}
.form-status{padding:15px 18px;border-radius:var(--radius);font-size:.92rem;
  display:none}
.form-status.ok{display:block;background:rgba(27,179,174,.1);
  border:1px solid var(--teal);color:var(--teal-deep)}
.form-status.bad{display:block;background:rgba(196,84,63,.08);
  border:1px solid #C4543F;color:#A8402C}

/* ---------- callout ---------- */
.callout{border-left:3px solid var(--teal);background:#fff;
  padding:var(--s-5) var(--s-6);border-radius:0 var(--radius) var(--radius) 0;
  box-shadow:0 12px 30px -24px rgba(11,26,30,.4)}
.callout .eyebrow{margin-bottom:10px}
.callout-amber{border-left-color:var(--amber)}
.band-dark .callout{background:var(--ink-2)}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--ink);color:#fff}
.cta-band::before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 130% at 84% 10%,rgba(27,179,174,.2),transparent 62%)}
.cta-band .wrap{position:relative;z-index:2}
.cta-inner{display:grid;gap:var(--s-7);align-items:center;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
@media(max-width:900px){.cta-inner{grid-template-columns:1fr}}
.cta-band h2{font-size:var(--t-3xl);margin-bottom:var(--s-4)}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:#8AA3A6;font-size:.92rem}
.ftr-top{display:grid;gap:var(--s-7);padding-block:clamp(52px,7vw,88px);
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}
@media(max-width:960px){.ftr-top{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ftr-top{grid-template-columns:1fr}}
.ftr h4{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal-bright);font-weight:500;
  margin-bottom:var(--s-4)}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{margin-bottom:11px}
.ftr a{color:#B9CBCC;text-decoration:none;transition:color .2s}
.ftr a:hover{color:var(--teal-bright)}
.ftr .brand-txt b{color:#fff}
.ftr-about{max-width:38ch;margin-top:var(--s-5);line-height:1.6}
.ftr-bot{border-top:1px solid var(--ink-3);padding-block:26px;
  display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-6);
  align-items:center;justify-content:space-between;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase}
.ftr-bot nav{display:flex;gap:var(--s-5);flex-wrap:wrap}

/* ---------- breadcrumb ---------- */
.crumb{font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--grey);padding-top:var(--s-6)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:9px;padding:0;margin:0}
.crumb li{margin:0;display:flex;align-items:center;gap:9px}
.crumb li+li::before{content:"/";color:var(--rule)}
.crumb a{color:var(--teal-deep);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.band-dark .crumb,.page-hd-dark .crumb{color:#7E9698}
.band-dark .crumb a,.page-hd-dark .crumb a{color:var(--teal-bright)}

/* ---------- interior page header ---------- */
.page-hd{background:var(--ink);color:#fff;position:relative;overflow:hidden;
  padding-bottom:clamp(48px,6vw,80px)}
.page-hd::before{content:"";position:absolute;inset:0;opacity:.42;
  background-image:linear-gradient(rgba(27,179,174,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(27,179,174,.07) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(100% 100% at 82% 0%,#000,transparent 70%);
  mask-image:radial-gradient(100% 100% at 82% 0%,#000,transparent 70%)}
.page-hd .wrap{position:relative;z-index:2}
.page-hd h1{margin-top:var(--s-6);max-width:19ch}
.page-hd .lede{margin-top:var(--s-5);color:#B9CBCC}
.page-hd-split{display:grid;gap:clamp(32px,5vw,64px);align-items:end;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);margin-top:var(--s-7)}
@media(max-width:900px){.page-hd-split{grid-template-columns:1fr}}

/* ---------- service index rows ---------- */
.srow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--s-5);align-items:center;padding:var(--s-6) 0;
  border-bottom:1px solid var(--rule);text-decoration:none;color:inherit;
  transition:padding .3s var(--ease)}
.srow:hover{padding-left:14px}
.srow:first-child{border-top:1px solid var(--rule)}
.srow .sn{font-family:var(--mono);font-size:.74rem;color:var(--teal-deep);
  letter-spacing:.1em}
.srow h3{margin-bottom:6px;transition:color .25s}
.srow:hover h3{color:var(--teal-deep)}
.srow p{font-size:.95rem;color:var(--grey-dark);max-width:62ch;margin:0}
.srow .sarw{color:var(--teal-deep);transition:transform .3s var(--ease-out)}
.srow:hover .sarw{transform:translateX(6px)}
@media(max-width:640px){.srow{grid-template-columns:auto minmax(0,1fr)}
  .srow .sarw{display:none}}

/* ---------- pill list ---------- */
.pills{display:flex;flex-wrap:wrap;gap:9px;list-style:none;padding:0;margin:0}
.pills li{margin:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.07em;
  text-transform:uppercase;padding:7px 13px;border:1px solid var(--rule);
  border-radius:2px;color:var(--grey-dark);background:#fff}
.band-dark .pills li{border-color:var(--ink-3);background:rgba(255,255,255,.04);
  color:#B9CBCC}

/* ---------- checklist ---------- */
.checks{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.checks li{margin:0;display:grid;grid-template-columns:22px minmax(0,1fr);
  gap:13px;align-items:start;font-size:.98rem}
.checks li::before{content:"";width:18px;height:18px;margin-top:5px;
  border-radius:2px;background:var(--teal);flex:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.5l3.6 3.6L14.5 5.5' stroke='%23000' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.5l3.6 3.6L14.5 5.5' stroke='%23000' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- progress rail ---------- */
.rail{position:fixed;top:0;left:0;height:2px;background:var(--teal);
  width:0;z-index:120;transition:width .1s linear}

/* ==========================================================================
   QA pass 1 — defects found in 1440px and 390px browser captures
   ========================================================================== */

/* Hero headline: the emphasised line must never overflow the column.
   nowrap was clipping "We come to you." on narrow columns. */
.hero h1 em{white-space:normal}
.hero h1{overflow-wrap:break-word}

/* Ghost button sat on the dark hero and inherited ink-on-ink, rendering
   as an empty box. Scope the dark treatment to any dark surface. */
.hero .btn-ghost,.page-hd .btn-ghost,.cta-band .btn-ghost{
  color:#fff;border-color:#2E5158;background:transparent}
.hero .btn-ghost:hover,.page-hd .btn-ghost:hover,.cta-band .btn-ghost:hover{
  background:#fff;color:var(--ink);border-color:#fff}

/* Primary nav was wrapping onto two lines between 1120 and 1300px. */
.nav a,.has-sub>button{white-space:nowrap}

/* Hero stat units were breaking to their own line. */
.hero-stats b{white-space:nowrap}
.hero-stats .unit{font-size:.48em;font-weight:700;margin-left:2px;
  letter-spacing:0}

/* Calculator: the headline figure overflowed its column at 1440px and the
   control labels wrapped awkwardly. Contain the figure and let it shrink. */
.calc-out{min-width:0;overflow:hidden}
.calc-fig{font-size:clamp(2.1rem,3.4vw,3.35rem);overflow-wrap:break-word}
.calc-in{min-width:0}
.ctrl label{flex-wrap:wrap;row-gap:2px}
.ctrl label output{white-space:nowrap}
@media(min-width:901px){.calc-bd{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}}

/* Comparison table on a dark band: the light header cells kept the band's
   pale text colour, so row labels were unreadable. */
.band-dark .cmp,.band-deep .cmp{background:var(--ink-2);border-color:var(--ink-3)}
.band-dark .cmp th,.band-dark .cmp td,
.band-deep .cmp th,.band-deep .cmp td{border-color:var(--ink-3);color:#C4D4D5}
.band-dark .cmp tbody th,.band-deep .cmp tbody th{
  background:rgba(255,255,255,.045);color:#fff}
.band-dark .cmp thead th,.band-deep .cmp thead th{
  background:rgba(27,179,174,.12);color:#fff}
.band-dark .cmp td.yes,.band-deep .cmp td.yes{color:var(--teal-bright)}
.band-dark .caption,.band-deep .caption{color:#7E9698}

/* Chain of custody used less than half the available width on desktop,
   leaving a dead column. Give it a real two-column rhythm. */
@media(min-width:1000px){
  .coc-step{grid-template-columns:56px minmax(0,1fr) minmax(200px,240px);
    align-items:start;gap:var(--s-6)}
  .coc-body{grid-column:2}
  .coc-cite-wrap{grid-column:3;padding-top:8px;opacity:.42;
    transition:opacity .5s var(--ease)}
  .coc-step.on .coc-cite-wrap{opacity:1}
  .coc-body .coc-cite{display:none}
}
.coc-cite-wrap{display:none}
@media(min-width:1000px){.coc-cite-wrap{display:block}}

/* Audience cards: images read as thumbnails glued above the text.
   Make the card a real composition with a full-bleed image head. */
.card-link{display:flex;flex-direction:column;padding:0;overflow:hidden;
  text-decoration:none;color:inherit}
.card-link .shot{border-radius:0;aspect-ratio:16/9}
.card-link .card-bd{padding:var(--s-6);display:flex;flex-direction:column;
  gap:var(--s-3);flex:1}
.card-link .card-bd .tlink{margin-top:auto;align-self:flex-start}
.card-link::before{left:0;top:0}

/* Map */
.map-wrap svg text{font-family:var(--mono);font-size:12px;letter-spacing:.04em}
.map-wrap .mland{fill:rgba(27,179,174,.09);stroke:var(--teal);stroke-width:1.3;
  stroke-linejoin:round}
.map-legend{display:flex;flex-wrap:wrap;gap:var(--s-5);margin-top:var(--s-5);
  padding-top:var(--s-5);border-top:1px solid var(--ink-3)}
.map-legend span{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:#8AA3A6}
.map-legend i{width:9px;height:9px;border-radius:50%;background:var(--teal);
  flex:none}
.map-legend i.hq{background:var(--amber)}

/* Counters must show their real value without JS, then animate from zero. */
.stat b .cval{font-variant-numeric:tabular-nums}

/* Bespoke card artwork, used where no photograph honestly matches the
   heading. Keeps every image on the page relevant to the text beside it. */
.card-art{aspect-ratio:16/9;background:
  linear-gradient(150deg,var(--paper-2),#DCE4E3);display:grid;place-items:center;
  overflow:hidden;position:relative}
.card-art svg{width:100%;height:100%}
.card-art::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(11,26,30,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,26,30,.05) 1px,transparent 1px);
  background-size:22px 22px;pointer-events:none}

/* QA pass 2 — descendant selectors were capturing the unit spans nested
   inside the big numbers, shrinking them to caption size. Scope to the
   label span only. */
.stat > span{display:block;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep);
  margin-top:12px;line-height:1.5}
.stat b span,.stat b .cval{display:inline;font-family:var(--display);
  font-size:inherit;letter-spacing:inherit;text-transform:none;
  color:inherit;margin:0;line-height:inherit}
.hero-stats > div > span{display:block;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--teal-bright);
  margin-top:9px;line-height:1.45}
.hero-stats b span,.hero-stats b .unit{display:inline;font-family:var(--display);
  letter-spacing:0;text-transform:none;color:inherit;margin:0;
  font-size:.46em;font-weight:700}
.hero-stats b .unit{margin-left:3px}

/* Utility bar was wrapping to two rows on desktop. */
@media(min-width:900px){.topbar .wrap{flex-wrap:nowrap}}

/* QA pass 3 — the breadcrumb sat on the light page background directly
   above a dark page header, so the two collided and the eyebrow rode up
   into the crumb. Every crumb page opens with a dark header, so the crumb
   bar joins it. */
.crumb{background:var(--ink);color:#7E9698;padding-top:var(--s-6);
  padding-bottom:0}
.crumb a{color:var(--teal-bright)}
.crumb li+li::before{color:#3A5A61}
.page-hd{padding-top:var(--s-6)}

/* The utility bar's own groups were still wrapping internally. */
@media(min-width:900px){.topbar-l,.topbar-r{flex-wrap:nowrap}}

/* QA pass 4 — forcing the utility bar onto one row squeezed each item so
   the text broke mid word. Keep items unbroken and drop the least
   important one when the row runs out of space. */
.topbar-l>*,.topbar-r>*{white-space:nowrap}
@media(max-width:1330px){.topbar .hide-md{display:none}}

/* QA pass 5 — .checks used a grid, which turned every inline run inside a
   list item into its own grid item. Any <strong>…</strong><br>text item
   collapsed to one word per line. Use normal flow with an absolutely
   positioned tick instead. */
.checks li{display:block;position:relative;padding-left:33px;
  grid-template-columns:none;gap:0}
.checks li::before{position:absolute;left:0;top:5px;margin-top:0}

/* ==========================================================================
   QA pass 6 — mobile. The header kept a full width "Request testing" button
   next to the burger, pushing document scrollWidth to 493px on a 390px
   viewport and giving every page a horizontal scrollbar.
   ========================================================================== */
html{overflow-x:clip}
body{overflow-x:clip}

@media(max-width:720px){
  /* Calling is the primary action on a phone, so that is the button that
     survives. Requesting testing stays one tap away inside the drawer. */
  .hdr-cta .btn-primary{display:none}
  .hdr-cta .btn-call{display:inline-flex}
  .brand svg{width:32px;height:32px}
  .brand-txt b{font-size:.92rem}
  .brand-txt span{font-size:.56rem;letter-spacing:.18em}
}
.btn-call{display:none;padding:0;width:44px;height:44px;flex:none;
  border:1px solid var(--rule);background:#fff;border-radius:var(--radius);
  align-items:center;justify-content:center;color:var(--ink)}
.btn-call:hover{background:var(--ink);color:#fff;border-color:var(--ink);
  transform:none}
.btn-call svg{width:19px;height:19px}

@media(max-width:640px){
  /* One line, one number. Everything else is in the footer and on contact. */
  .topbar .hide-sm{display:none}
  .topbar .wrap{min-height:34px;justify-content:space-between}
  .topbar-l .live{font-size:.66rem}
  .topbar-r{font-size:.7rem}
}
@media(max-width:640px){
  /* The coverage line does not fit beside the number and cannot wrap,
     so on a phone the number wins and the line moves to the footer. */
  .topbar-l{display:none}
  .topbar .wrap{justify-content:flex-end}
}

/* Chain of custody on a phone: the seal column was eating a third of the
   width. Tighten it and let the copy breathe. */
@media(max-width:560px){
  .coc-step{grid-template-columns:40px minmax(0,1fr);gap:var(--s-4);
    padding:var(--s-4) 0}
  .coc-seal{width:40px;height:40px;font-size:.72rem}
  .coc-track{left:19px}
  .coc-body h3{font-size:var(--t-base)}
}

/* Long email addresses and specimen strings must not force a scroll. */
.ftr a,.field h3 a{overflow-wrap:anywhere}
.record-hd{flex-wrap:wrap;gap:6px}