/* ============================================================================
   Odvaya Services LLP — odvaya.in
   Design language: the Everb business template idiom — deep teal + orange,
   Poppins headings, pastel icon badges, centred section heads, orange CTA
   block, angled transition into a dark four-column footer.
   Rebuilt from scratch; nothing was downloaded. See _HANDOVER/02-DESIGN.md.

   No framework, no CDN, no third-party request. Fonts self-hosted.
   Reveal is scoped to .js and never applied above the fold.
   ========================================================================= */

/* Self-hosted typefaces. Latin subset only. Google Fonts, SIL OFL 1.1.
   No third-party request at runtime: the site must render identically with
   no internet, because it gets shown from a laptop in meeting rooms.

   Poppins  headings, nav, buttons, figures - the rounded geometric sans
            that gives the theme its character. */

@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url('fonts/poppins-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url('fonts/poppins-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url('fonts/poppins-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url('fonts/poppins-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* Everb's teal/orange scheme. Teal is the complement of the logo's rust,
     so the mark sits on it cleanly. */
  --teal:#0F3B44;
  --teal-dk:#0A2C33;
  --teal-2:#12454F;
  --teal-lt:#17505C;
  --accent:#DE6B20;          /* buttons, icons, active nav — Everb's orange,
                                pulled toward the logo's rust so they agree */
  --accent-dk:#B8531A;
  --accent-lt:#F08B47;
  --gold:#A98B2D;            /* the olive eyebrow on light sections */

  --ink:#152026;
  --ink-2:#586A72;
  --ink-3:#8496A0;
  --paper:#fff;
  --wash:#F7FAFB;
  --wash-2:#EEF3F5;
  --rule:#E2EAED;
  --rule-2:#C7D5DA;
  --on-dark:#DCE8EB;
  --on-dark-2:#9FB4BA;

  --wrap:1200px;
  --head:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sh:0 2px 8px rgba(15,59,68,.05),0 14px 38px rgba(15,59,68,.08);
  --sh-h:0 4px 12px rgba(15,59,68,.08),0 26px 60px rgba(15,59,68,.16);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);font-size:17px;line-height:1.72;
  color:var(--ink-2);background:var(--paper);-webkit-font-smoothing:antialiased;
  /* clip, not hidden: overflow-x:hidden forces overflow-y to auto, which makes
     the body its own scroll container and breaks window scrolling and any
     position:sticky measured against the viewport. clip contains the same
     stray horizontal pixels without creating a scroll box. */
  overflow-x:clip;
}

/* Every in-page anchor destination has to clear the 76px sticky header,
   otherwise the heading you jumped to sits underneath it. */
section[id],article[id],.cap[id],#main{scroll-margin-top:104px}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:3px}

h1,h2,h3,h4{
  font-family:var(--head);color:var(--ink);margin:0;font-weight:700;
  line-height:1.18;letter-spacing:-.015em;
}
h1{font-size:clamp(34px,5.2vw,56px);line-height:1.1;letter-spacing:-.024em}
h2{font-size:clamp(27px,3.8vw,42px);letter-spacing:-.02em}
h3{font-size:20px;font-weight:600}
h4{font-size:16.5px;font-weight:600}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* the small tracked label above every heading in this genre */
.eyebrow{
  font-family:var(--head);font-size:13px;font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;color:var(--gold);margin:0 0 14px;
}
.dark .eyebrow,.hero .eyebrow,.phero .eyebrow{color:var(--accent-lt)}
.lede{font-size:clamp(16.5px,1.8vw,18.5px);line-height:1.75;max-width:60ch}

/* ------------------------------------------------------------------ reveal
   Below the fold only. The hero and nav carry no .rv, so the first screen is
   never blank while JS is starting. */
.js .rv{opacity:0;transform:translateY(12px);
  transition:opacity .42s cubic-bezier(.2,.7,.3,1),transform .42s cubic-bezier(.2,.7,.3,1)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv,.js .rv.in{opacity:1;transform:none;transition:none}
}

/* ----------------------------------------------------------- utility bar */
.util{background:var(--teal-dk);color:var(--on-dark-2);font-size:13.5px}
.util .wrap{display:flex;align-items:center;gap:24px;min-height:44px;flex-wrap:wrap}
.util a{color:var(--on-dark-2)}
.util a:hover{color:#fff;text-decoration:none}
.util .i{display:inline-flex;align-items:center;gap:8px}
.util .i svg{width:14px;height:14px;stroke:var(--accent);fill:none;stroke-width:1.8;flex:none}
.util .sp{margin-left:auto;display:flex;align-items:center;gap:9px}
.util .chip{
  font-family:var(--head);font-size:12px;font-weight:600;letter-spacing:.12em;
  background:var(--accent);color:#fff;padding:5px 11px;border-radius:3px;
}
@media(max-width:960px){.util{display:none}}

/* ------------------------------------------------------------------- nav */
header.top{
  background:var(--teal);position:sticky;top:0;z-index:80;
  border-bottom:1px solid rgba(255,255,255,.09);
}
header.top.light{background:var(--paper);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;gap:22px;min-height:76px}
.top .logo{height:36px;width:auto;flex:none}
.top nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.top nav a{
  font-family:var(--head);font-weight:500;font-size:15.5px;color:var(--on-dark);
  padding:11px 14px;border-radius:4px;transition:color .16s;
}
.top.light nav a{color:var(--ink)}
.top nav a:hover,.top nav a.on{color:var(--accent);text-decoration:none}
.top nav a.cta{
  background:var(--accent);color:#fff;padding:13px 25px;margin-left:14px;
  font-weight:600;transition:background .18s;
}
.top nav a.cta:hover{background:var(--accent-dk);color:#fff}
@media(max-width:1040px){
  .top nav a:not(.cta){display:none}
  .top .wrap{min-height:62px}
  .top .logo{height:31px}
  .top nav a.cta{padding:11px 19px;font-size:14.5px}
}

/* ----------------------------------------------------------------- button */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:0 30px;max-width:100%;
  font-family:var(--head);font-size:15.5px;font-weight:600;
  border:2px solid transparent;cursor:pointer;
  transition:background .18s,border-color .18s,color .18s,transform .18s;
}
.btn:active{transform:translateY(1px)}
.btn .ar{font-size:17px;line-height:1;transition:transform .18s}
.btn:hover .ar{transform:translateX(4px)}
.btn-p{background:var(--accent);color:#fff}
.btn-p:hover{background:var(--accent-dk);text-decoration:none}
.btn-o{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.btn-o:hover{background:#fff;color:var(--teal);border-color:#fff;text-decoration:none}
.btn-d{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn-d:hover{background:var(--teal);color:#fff;border-color:var(--teal);text-decoration:none}
.btnrow{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:34px}

/* Everb's outlined square play button next to the primary CTA */
.play{
  display:inline-flex;align-items:center;gap:13px;font-family:var(--head);
  font-weight:500;font-size:15px;color:var(--accent);
}
.play i{
  width:52px;height:52px;border:2px solid var(--accent);flex:none;
  display:flex;align-items:center;justify-content:center;transition:background .18s;
}
.play i::before{
  content:"";width:0;height:0;border-left:12px solid var(--accent);
  border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px;
}
.play:hover{text-decoration:none}
.play:hover i{background:var(--accent)}
.play:hover i::before{border-left-color:#fff}

/* ------------------------------------------------------------------ hero */
.hero{background:var(--teal);color:var(--on-dark);padding:78px 0 88px;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(56% 92% at 88% 10%, rgba(222,107,32,.16) 0%, rgba(222,107,32,0) 66%);
}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:.88fr 1.12fr;
  gap:56px;align-items:center}
.hero h1{color:#fff;max-width:17ch}
.hero .lede{color:var(--on-dark-2);margin-top:20px}
.hero .shotframe{position:relative}
.hero .shotframe img{
  border-radius:8px;box-shadow:0 30px 70px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.12);
}
.hero .shotframe .mark{
  position:absolute;right:-9%;bottom:-16%;width:46%;opacity:.13;z-index:-1;
}
.hero .trust{
  display:flex;flex-wrap:wrap;gap:9px 26px;margin-top:36px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.13);
}
.hero .trust span{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;color:var(--on-dark-2)}
.hero .trust svg{width:16px;height:16px;stroke:var(--accent-lt);fill:none;stroke-width:2.4;flex:none}
@media(max-width:1040px){
  .hero{padding:52px 0 62px}
  .hero .wrap{grid-template-columns:1fr;gap:38px}
  .hero .shotframe{order:-1}
  .hero .shotframe .mark{display:none}
}

/* --------------------------------------------------------------- section */
section{padding:96px 0}
section.wash{background:var(--wash)}
section.dark{background:var(--teal);color:var(--on-dark)}
section.dark h2,section.dark h3{color:#fff}
@media(max-width:1040px){section{padding:62px 0}}
.shead{max-width:58ch;margin-bottom:46px}
.shead.mid{margin-left:auto;margin-right:auto;text-align:center}
.shead p{margin-top:14px}

/* ------------------------------------------- dark band + overlapping card */
.band{background:var(--teal);position:relative;padding:74px 0 0;overflow:hidden}
.band::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:46px 46px;
}
.band .wrap{position:relative;z-index:2}
.band .lead{display:flex;align-items:center;gap:24px;margin-bottom:52px}
.band .lead h2{color:#fff;font-size:clamp(22px,2.6vw,30px);max-width:26ch}
.quote{
  background:var(--paper);padding:50px 54px;box-shadow:var(--sh-h);
  display:grid;grid-template-columns:1.35fr .65fr;gap:36px;align-items:center;
  margin-bottom:-70px;position:relative;z-index:3;
}
.quote blockquote{margin:0}
.quote h3{font-size:clamp(21px,2.4vw,29px);font-weight:700;margin-bottom:16px;letter-spacing:-.02em}
.quote p{font-size:16.5px}
.quote .by{margin-top:26px;padding-top:22px;border-top:1px solid var(--rule)}
.quote .by b{display:block;font-family:var(--head);color:var(--ink);font-size:16px}
.quote .by span{font-size:14.5px;color:var(--ink-3)}
.quote .seal{
  align-self:stretch;background:var(--wash-2);display:flex;align-items:center;
  justify-content:center;padding:26px;
}
.quote .seal img{width:100%;max-width:150px;opacity:.9}
@media(max-width:1040px){
  .band{padding:52px 0 0}
  .quote{padding:32px 26px;grid-template-columns:1fr;gap:24px;margin-bottom:-50px}
  .quote .seal{display:none}
}
.after-band{padding-top:118px}
@media(max-width:1040px){.after-band{padding-top:88px}}

/* ----------------------------------------------------------------- split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
@media(max-width:1040px){.split{grid-template-columns:1fr;gap:38px}}
.stack{position:relative;padding:0 40px 46px 0}
.stack img{box-shadow:var(--sh-h);border:1px solid var(--rule)}
.stack .b{position:absolute;right:0;bottom:0;width:58%;border:7px solid var(--paper)}
.stack .tagbox{
  position:absolute;left:0;bottom:14px;background:var(--accent);color:#fff;padding:20px 24px;
  max-width:200px;z-index:2;
}
.stack .tagbox b{display:block;font-family:var(--head);font-size:32px;font-weight:700;line-height:1}
.stack .tagbox span{display:block;font-size:13.5px;line-height:1.45;margin-top:5px}
.ticks{list-style:none;margin:24px 0 0}
.ticks li{position:relative;padding-left:34px;margin-bottom:12px;font-size:16px}
.ticks li::before{content:"";position:absolute;left:0;top:4px;width:21px;height:21px;
  border-radius:50%;background:var(--accent)}
.ticks li::after{content:"";position:absolute;left:6.5px;top:10.5px;width:8px;height:4px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}

/* mini stat row, Everb's "Award Winner / 24/7 Support / 100% Trusted" */
.minis{display:flex;flex-wrap:wrap;gap:30px;margin:28px 0 4px}
.mini{display:flex;align-items:center;gap:12px}
.mini i{
  width:46px;height:46px;flex:none;background:var(--wash-2);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.mini i svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:1.8}
.mini b{display:block;font-family:var(--head);font-size:15.5px;color:var(--ink);font-weight:600}
.mini span{font-size:13.5px;color:var(--ink-3)}

/* ------------------------------------------------------------ stat band */
.stats{background:var(--accent);color:#fff;padding:58px 0}
.stats .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.stats .s{text-align:center;border-left:1px solid rgba(255,255,255,.26);padding:0 10px}
.stats .s:first-child{border-left:0}
.stats b{display:block;font-family:var(--head);font-size:clamp(34px,4.2vw,48px);
  font-weight:700;line-height:1;letter-spacing:-.03em}
.stats .s > span{display:block;margin-top:9px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.93)}
@media(max-width:1040px){
  .stats{padding:40px 0}
  .stats .grid{grid-template-columns:repeat(2,1fr);gap:28px 18px}
  .stats .s:nth-child(3){border-left:0}
}

/* ----------------------------------------------------------------- steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:s}
@media(max-width:1040px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.steps{grid-template-columns:1fr}}
.step{counter-increment:s;position:relative;padding-top:24px}
.step::before{
  content:counter(s,decimal-leading-zero);position:absolute;top:-14px;left:0;
  font-family:var(--head);font-weight:700;font-size:50px;line-height:1;
  color:var(--accent);opacity:.19;
}
.step h3{margin-bottom:8px;position:relative}
.step p{font-size:15.5px}
.dark .step p{color:var(--on-dark-2)}

/* ----------------------------------------------------------------- stack */
.tech{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
@media(max-width:1040px){.tech{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.tech{grid-template-columns:repeat(2,1fr)}}
.tc{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  padding:26px 18px;text-align:center;transition:background .2s,border-color .2s;
}
.tc:hover{background:rgba(222,107,32,.14);border-color:var(--accent)}
.tc b{display:block;font-family:var(--head);font-size:16px;font-weight:600;color:#fff}
.tc span{display:block;font-size:13px;color:var(--on-dark-2);margin-top:5px;line-height:1.45}

/* ==================================================================
   INTERACTIVE MODULE DASHBOARD  (work.html)
   A row of compact tiles; hovering or focusing one swaps the large panel
   beneath it. Tiles are real links, so a click goes straight to the module
   and the page still works with JavaScript off.
   ================================================================== */
.dash{margin-top:8px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{
  display:block;background:var(--paper);border:1px solid var(--rule);
  border-top:3px solid var(--rule-2);padding:24px 22px 22px;text-align:left;
  transition:border-color .2s,box-shadow .2s,transform .2s,background .2s;
  position:relative;
}
.tile:hover,.tile.on{
  border-top-color:var(--accent);box-shadow:var(--sh-h);transform:translateY(-4px);
  text-decoration:none;
}
.tile .tn{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ink-3);
  display:block;margin-bottom:12px;
}
.tile.on .tn{color:var(--accent)}
.tile h3{font-size:17.5px;line-height:1.34;margin-bottom:7px}
.tile p{font-size:14px;color:var(--ink-3);line-height:1.55;margin:0}
.tile .hint{
  font-family:var(--head);font-size:13px;font-weight:600;color:var(--accent);
  margin-top:14px;display:inline-flex;align-items:center;gap:7px;opacity:0;
  transition:opacity .2s;
}
.tile:hover .hint,.tile.on .hint{opacity:1}

.panels{position:relative;margin-top:22px;background:var(--paper);
  border:1px solid var(--rule);box-shadow:var(--sh)}
.panel{
  display:grid;grid-template-columns:1.15fr .85fr;
  opacity:0;visibility:hidden;position:absolute;inset:0;
  transition:opacity .32s cubic-bezier(.2,.7,.3,1);
}
.panel.on{opacity:1;visibility:visible;position:relative}
.panel .pshot{position:relative;overflow:hidden;background:var(--wash-2);min-height:340px}
.panel .pshot img{width:100%;height:100%;object-fit:cover;object-position:left top}
.panel .pshot .tag{
  position:absolute;left:0;top:22px;margin:0;background:var(--accent);color:#fff;
  font-family:var(--head);font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;padding:8px 15px;
}
.panel .pbody{padding:40px 42px}
.panel .pbody h3{font-size:clamp(21px,2.3vw,27px);font-weight:700;margin-bottom:12px;letter-spacing:-.02em}
.panel .pbody p{font-size:16px}
.panel .feat{list-style:none;margin:20px 0 26px;font-size:15.5px}
.panel .feat li{position:relative;padding-left:22px;margin-bottom:7px}
.panel .feat li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--accent)}
@media(max-width:900px){
  .panel{grid-template-columns:1fr}
  .panel .pshot{min-height:0;aspect-ratio:16/10}
  .panel .pbody{padding:28px 24px}
}
/* Touch devices have no hover: show every module in full, stacked. */
@media(hover:none){
  .tiles{display:none}
  .panels{border:0;box-shadow:none;background:transparent;margin-top:0}
  .panel{opacity:1;visibility:visible;position:relative;inset:auto;
    border:1px solid var(--rule);box-shadow:var(--sh);margin-bottom:22px;
    grid-template-columns:1fr}
  .panel .pshot{min-height:0;aspect-ratio:16/10}
}

/* ------------------------------------------------------------ page hero */
.phero{background:var(--teal);color:var(--on-dark);padding:64px 0 72px;
  position:relative;overflow:hidden;text-align:center}
.phero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(50% 100% at 50% 0%, rgba(222,107,32,.17) 0%, rgba(222,107,32,0) 68%)}
.phero .wrap{position:relative;z-index:2}
.phero h1{color:#fff;font-size:clamp(30px,4.3vw,48px);margin:0 auto}
.phero .crumb{
  font-family:var(--head);font-size:14.5px;color:var(--on-dark-2);margin:16px 0 0;
}
.phero .crumb a{color:var(--accent-lt)}
.phero .crumb b{color:#fff;font-weight:500}
.phero p.sub{color:var(--on-dark-2);margin:18px auto 0;max-width:62ch;font-size:17px}

/* --------------------------------------------------------------- notice */
.notice{margin-top:32px;padding:22px 24px;background:var(--wash-2);
  border-left:4px solid var(--accent);font-size:15.5px}
section.wash .notice{background:var(--paper)}

/* ------------------------------------------------------- orange cta block */
.ctablock{padding:0 0 96px}
@media(max-width:1040px){.ctablock{padding-bottom:62px}}
.ctabox{
  background:var(--accent);color:#fff;padding:56px 56px;position:relative;overflow:hidden;
  display:flex;align-items:center;gap:44px;flex-wrap:wrap;
}
.ctabox .mark{position:absolute;right:-2%;top:-40%;width:min(360px,34%);opacity:.14}
.ctabox .l{flex:1 1 400px;position:relative;z-index:2}
.ctabox .r{position:relative;z-index:2}
.ctabox h2{color:#fff;max-width:24ch}
.ctabox p{margin-top:12px;color:rgba(255,255,255,.94);max-width:52ch}
.ctabox .btn-o{border-color:rgba(255,255,255,.55)}
.ctabox .btn-o:hover{background:#fff;color:var(--accent-dk)}
@media(max-width:1040px){.ctabox{padding:34px 26px;gap:26px}.ctabox .r{width:100%}
  .ctabox .r .btn{width:100%}}

/* --------------------------------------------------- angled footer edge */
.slant{height:80px;background:var(--teal-dk);clip-path:polygon(0 100%,100% 0,100% 100%)}
@media(max-width:1040px){.slant{height:46px}}

/* ---------------------------------------------------------------- footer */
footer{background:var(--teal-dk);color:var(--on-dark-2);padding:26px 0 0;font-size:15px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.25fr;gap:44px;padding:44px 0 52px}
@media(max-width:1040px){.fgrid{grid-template-columns:1fr 1fr;gap:36px 26px}}
@media(max-width:600px){.fgrid{grid-template-columns:1fr}}
footer .logo{height:34px;margin-bottom:18px}
footer .fh{
  color:#fff;font-family:var(--head);font-size:16px;font-weight:600;margin:0 0 22px;
  position:relative;padding-bottom:11px;
}
footer .fh::after{content:"";position:absolute;left:0;bottom:0;width:38px;height:2px;background:var(--accent)}
footer ul{list-style:none}
footer li{margin-bottom:10px}
footer a{color:var(--on-dark-2)}
footer a:hover{color:#fff;text-decoration:none}
footer .arr li{position:relative;padding-left:18px}
footer .arr li::before{content:"\203A";position:absolute;left:0;top:-1px;color:var(--accent);font-size:16px}
footer .cinfo li{display:flex;gap:11px;align-items:flex-start;line-height:1.55;padding-left:0}
footer .cinfo svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:1.8;flex:none;margin-top:4px}
.fbot{border-top:1px solid rgba(255,255,255,.1);padding:24px 0;display:flex;
  flex-wrap:wrap;gap:12px;align-items:center;font-size:14px}
.fbot .sp{margin-left:auto}
@media(max-width:700px){.fbot .sp{margin-left:0;width:100%}}

.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;z-index:99;background:#fff;padding:13px 20px;border:2px solid var(--accent)}


/* ==========================================================================
   Added in the fourth pass: expanded capabilities, who we serve, engagement
   models, and the procurement FAQ. Plus paint containment on the long
   sections, which is most of why the page now feels quicker to scroll.
   ========================================================================== */

/* the browser can skip layout/paint for sections still off-screen */
/* content-visibility:auto was removed deliberately. On a site that renders in
   under 100ms it bought nothing, and it cost correctness four times: three
   sets of images inside a deferred section never loaded because a lazy image
   in skipped content never fires, and the 720px size estimate was out by
   ~290px per section, producing 625px of cumulative layout shift on the home
   page as the reader scrolled. The .defer class is kept as a hook so markup
   does not have to change. */

/* ============================================================ capability grid
   Two renderings of the same data.

   .capx  home tile. Each carries --c (its colour), --t (a tint) and --i (its
          index, for a staggered entrance). The payoff line is hidden until
          hover or keyboard focus, because it is the most persuasive sentence
          on the page and it should be what earns the click.
   .cap   capabilities.html card. Everything visible, no hover required.
   ========================================================================== */
/* The divider is an outline on each card, not a background behind the gaps:
   a partial last row would otherwise show the rule colour as a grey block,
   and the count that avoids that differs at three columns and at two. */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--paper)}
.caps > .cap,.caps > .capx{outline:1px solid var(--rule)}
@media(max-width:1040px){.caps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.caps{grid-template-columns:1fr}}

/* shared icon badge, coloured per capability */
.caps .ci{
  position:relative;z-index:2;width:54px;height:54px;margin-bottom:18px;
  display:flex;align-items:center;justify-content:center;background:var(--t);
  transition:background .3s,transform .38s cubic-bezier(.2,.7,.3,1);
}
.caps .ci svg{
  width:26px;height:26px;stroke:var(--c);fill:none;stroke-width:1.8;
  transition:stroke .3s,transform .42s cubic-bezier(.2,.7,.3,1);
}

/* ------------------------------------------------------------- home tile
   Resting state: an illustration and the problem it addresses. On hover or
   keyboard focus the illustration and the problem fade out and the payoff and
   the call to action take their place.

   The swap happens inside .cbody, which is one rectangle sitting below the
   icon and title. That keeps the tile's identity on screen throughout, and
   means nothing is reserved and nothing reflows — a six-tile grid that shifts
   on hover is the worst thing this pattern can do. Where there is no hover the
   payoff is simply shown in flow; see the (hover:none) block at the end. */
.capx{
  position:relative;display:flex;flex-direction:column;background:var(--paper);
  padding:24px 26px 26px;color:inherit;text-decoration:none;overflow:hidden;
  transition:box-shadow .3s,transform .3s cubic-bezier(.2,.7,.3,1);
}
.capx:hover,.capx:focus-visible{text-decoration:none}
/* colour rule sweeping in along the top edge */
.capx::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--c);
  transform:scaleX(0);transform-origin:left;z-index:4;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.capx:hover,.capx:focus-within{box-shadow:var(--sh-h);transform:translateY(-6px);z-index:3}
.capx:hover::before,.capx:focus-within::before{transform:scaleX(1)}

/* ---- icon and title, which stay put through the swap */
.chead{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.capx .ci,.cap .ci{margin-bottom:0;width:44px;height:44px;flex:none}
.capx .ci svg,.cap .ci svg{width:22px;height:22px}
.capx:hover .ci,.capx:focus-within .ci,.cap:hover .ci,.cap:focus-within .ci{background:var(--c);transform:rotate(-5deg) scale(1.04)}
.capx:hover .ci svg,.capx:focus-within .ci svg,.cap:hover .ci svg,.cap:focus-within .ci svg{stroke:#fff;transform:scale(1.1)}
.capx h3,.cap h3{font-size:18.5px;line-height:1.3;margin:0;transition:color .26s}
.capx:hover h3,.capx:focus-within h3,.cap:hover h3,.cap:focus-within h3{color:var(--c)}

/* ---- the swapping region */
.cbody{position:relative;display:flex;flex-direction:column;flex:1}

.cfig{
  display:block;border-radius:var(--r-sm);overflow:hidden;line-height:0;
  margin-bottom:17px;transition:opacity .34s,transform .5s cubic-bezier(.2,.7,.3,1);
}
.cfig .cart{display:block;width:100%;height:auto}
.capx:hover .cfig,.capx:focus-within .cfig,.cap:hover .cfig,.cap:focus-within .cfig{opacity:.06;transform:scale(.985)}

.cprob{
  display:block;font-size:15.2px;line-height:1.6;color:var(--ink-2);
  transition:opacity .26s;
}
.capx:hover .cprob,.capx:focus-within .cprob,.cap:hover .cprob,.cap:focus-within .cprob{opacity:0}

/* ---- the payoff, arriving over the region the illustration just vacated */
.cpay{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .3s,transform .42s cubic-bezier(.2,.7,.3,1);
}
.capx:hover .cpay,.capx:focus-within .cpay,.cap:hover .cpay,.cap:focus-within .cpay{opacity:1;transform:none}
.cpay b{
  display:block;font-family:var(--head);font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--c);margin-bottom:9px;
}
.cpay .cpt{display:block;font-size:16px;line-height:1.58;color:var(--ink)}
.cbtn{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;min-height:44px;
  padding:0 19px;border-radius:20px;background:var(--c);color:#fff;
  font-family:var(--head);font-size:13.6px;font-weight:600;
}
.cbtn em{font-style:normal;transition:transform .26s}
.capx:hover .cbtn em,.capx:focus-within .cbtn em,.cap:hover .cbtn em,.cap:focus-within .cbtn em{transform:translateX(5px)}

/* staggered entrance, so the grid cascades rather than snapping in */
.js .caps .capx.rv{transition-delay:calc(var(--i) * 55ms)}

/* No hover available: the illustration, the problem, the payoff and the button
   are all simply shown. The most persuasive sentence on the tile cannot depend
   on a gesture a phone cannot make. */
@media(hover:none){
  .capx .cfig,.capx:hover .cfig,.cap .cfig,.cap:hover .cfig{opacity:1;transform:none}
  .capx .cprob,.capx:hover .cprob,.cap .cprob,.cap:hover .cprob{opacity:1}
  .capx .cpay,.cap .cpay{
    position:static;inset:auto;opacity:1;transform:none;pointer-events:auto;
    margin-top:17px;padding-top:15px;border-top:1px dashed var(--rule);
  }
  .capx::before{transform:scaleX(1)}
}
@media(prefers-reduced-motion:reduce){
  .capx,.cap,.capx::before,.capx .ci,.cap .ci,.capx .ci svg,.cap .ci svg,.capx .cfig,.cap .cfig,
  .capx .cprob,.capx .cpay,.cbtn em{transition:none}
  .capx:hover,.capx:focus-within{transform:none}
  .cap:hover .cfig,.cap:focus-within .cfig{transform:none}
  .capx:hover .ci,.capx:focus-within .ci{transform:none}
  .capx:hover .cfig,.capx:focus-within .cfig{transform:none}
  .js .caps .capx.rv{transition-delay:0s}
}

/* ----------------------------------- capabilities.html card = the home tile
   Same pattern, same classes. The card used to stack a blurb, a "typically
   includes" block and a "what changes" block, which made fifteen of them a
   very long page. Now it is an illustration and the problem at rest, and the
   payoff, the inclusions and a call to action on hover. */
.cap{
  background:var(--paper);padding:24px 26px 26px;position:relative;
  display:flex;flex-direction:column;overflow:hidden;
  transition:box-shadow .22s,z-index .01s;
}
.cap:hover{box-shadow:var(--sh-h);z-index:2}

/* the inclusions line, which only appears with the payoff */
.cinc{
  display:block;margin-top:13px;padding-top:11px;border-top:1px dashed var(--rule);
  font-size:13.6px;line-height:1.55;color:var(--ink-3);
}
.cinc b{
  display:block;font-family:var(--head);font-size:11.6px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--c);margin-bottom:4px;
}
.cap .cbtn{margin-top:16px}
.cap .cbtn:hover{text-decoration:none}

/* --------------------------------------------------------- who we serve */
.serve{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
@media(max-width:1040px){.serve{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.serve{grid-template-columns:repeat(2,1fr)}}
/* 'administration' is wider than a half-column at 320px, so go single there */
@media(max-width:440px){.serve{grid-template-columns:1fr}.sv{padding:22px 18px}}
.sv{
  background:var(--paper);border:1px solid var(--rule);padding:24px 22px;text-align:left;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.sv:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--sh)}
.sv svg{width:28px;height:28px;stroke:var(--accent);fill:none;stroke-width:1.6;margin:0 0 13px}
.sv b{display:block;font-family:var(--head);font-size:15.5px;font-weight:600;color:var(--ink);
  line-height:1.35;overflow-wrap:anywhere}
.sv span{display:block;font-size:13.5px;color:var(--ink-3);margin-top:6px;line-height:1.45}

/* ------------------------------------------------------ engagement models */
.models{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:1040px){.models{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.models{grid-template-columns:1fr}}
.model{
  border:1px solid var(--rule);background:var(--paper);padding:30px 26px;
  display:flex;flex-direction:column;border-top:3px solid var(--accent);
}
.model .mt{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ink-3);
  text-transform:uppercase;margin:0 0 10px;
}
.model h3{font-size:19px;margin-bottom:10px}
.model p{font-size:15.2px;flex:1}
.model .best{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--rule);
  font-size:13.5px;color:var(--ink-3);
}
.model .best b{color:var(--ink-2);font-weight:600}

/* ------------------------------------------------------------------- faq */
.faq{max-width:900px;margin:0 auto}
.faq details{
  border:1px solid var(--rule);background:var(--paper);margin-bottom:12px;
}
.faq details[open]{border-color:var(--rule-2);box-shadow:var(--sh)}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 56px 22px 26px;position:relative;
  font-family:var(--head);font-size:17.5px;font-weight:600;color:var(--ink);line-height:1.45;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:26px;top:29px;width:11px;height:11px;
  border-right:2.4px solid var(--accent);border-bottom:2.4px solid var(--accent);
  transform:rotate(45deg);transition:transform .22s;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:31px}
.faq summary:hover{color:var(--accent)}
.faq .a{padding:0 26px 24px;font-size:16px}
.faq .a p{margin-bottom:.8em}
.faq .a p:last-child{margin-bottom:0}

/* ------------------------------------------------------------- key-value */
.kv{border-top:1px solid var(--rule)}
.kv div{
  display:grid;grid-template-columns:260px 1fr;gap:24px;padding:20px 0;
  border-bottom:1px solid var(--rule);
}
@media(max-width:760px){.kv div{grid-template-columns:1fr;gap:6px}}
.kv dt{font-family:var(--head);font-weight:600;color:var(--ink);font-size:16px;margin:0}
.kv dd{margin:0;font-size:16px}

/* --------------------------------------------------------- inline callout */
.pull{
  border-left:4px solid var(--accent);padding:6px 0 6px 24px;margin:30px 0;
  font-family:var(--head);font-size:clamp(18px,2.1vw,23px);font-weight:600;
  color:var(--ink);line-height:1.42;letter-spacing:-.015em;
}
.dark .pull{color:#fff}

/* ==========================================================================
   Fifth pass — structure. Drawn from BCG's grammar: nothing floats loose on
   white. Every block sits in a bounded rounded container, every card carries a
   category chip and a metadata line, and calls to action are caps pills with
   an arrow.
   ========================================================================== */

:root{--r:16px;--r-sm:10px}

/* the bounded container that stops things flying */
.panelbox{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  padding:10px;box-shadow:var(--sh);overflow:hidden;
}
@media(max-width:640px){.panelbox{padding:6px;border-radius:12px}}

/* stat band, now a contained rounded card rather than a full-bleed stripe */
.statwrap{padding:0;margin-top:-46px;position:relative;z-index:6}
.stats{
  background:var(--accent);color:#fff;border-radius:var(--r);
  box-shadow:0 18px 44px rgba(15,59,68,.22);
  display:grid;grid-template-columns:repeat(4,1fr);padding:38px 10px;
}
.stats .s{text-align:center;border-left:1px solid rgba(255,255,255,.26);padding:0 18px}
.stats .s:first-child{border-left:0}
.stats b{display:block;font-family:var(--head);font-size:clamp(32px,3.9vw,44px);
  font-weight:700;line-height:1;letter-spacing:-.03em}
.stats .s > span{display:block;margin-top:9px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.94)}
@media(max-width:1040px){
  .statwrap{margin-top:-34px}
  .stats{grid-template-columns:repeat(2,1fr);gap:28px 0;padding:30px 6px}
  .stats .s:nth-child(3){border-left:0}
}
@media(max-width:520px){.stats{grid-template-columns:1fr;gap:24px}.stats .s{border-left:0}}

/* rounded corners on the things that were square */
.dash{border-radius:var(--r)}
.caps{border-radius:var(--r);overflow:hidden}
.model,.sv,.tc,.quote,.ctabox,.notice,.phero,.mod,.panels,.tile,
.hero .shotframe img,.hero .shotframe picture,.stack img,.stack picture{border-radius:var(--r-sm)}
.quote,.ctabox{border-radius:var(--r)}
.faq details{border-radius:var(--r-sm);overflow:hidden}

/* --------------------------------------------------- metadata, chips, pills */
.pmeta{
  font-family:var(--head);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 10px;
}
.rchip{
  display:inline-block;font-family:var(--head);font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--c);
  padding:6px 13px;border-radius:20px;
}
.rstate{
  display:inline-block;font-family:var(--head);font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  border:1px solid var(--rule-2);padding:5px 12px;border-radius:20px;
}
.pill{
  display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 24px;
  border-radius:26px;background:var(--accent);color:#fff;
  font-family:var(--head);font-size:14px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;transition:background .18s,transform .18s;
}
.pill em{font-style:normal;transition:transform .2s}
.pill:hover{background:var(--teal);color:#fff;text-decoration:none}
.pill:hover em{transform:translateX(4px)}
.tlink{
  display:inline-flex;align-items:center;gap:9px;margin-top:auto;
  font-family:var(--head);font-size:13.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c);border-bottom:2px solid var(--c);
  padding-bottom:3px;align-self:flex-start;
}
.tlink em{font-style:normal;transition:transform .2s}
.tlink:hover{text-decoration:none}
.tlink:hover em{transform:translateX(4px)}
.btn em,.hint em,.play em{font-style:normal}
.btnrow.ctr{justify-content:center;margin-top:38px}

/* ------------------------------------------------------ five-step flow strip */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
@media(max-width:1040px){.flow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.flow{grid-template-columns:1fr}}
.fstep{background:var(--paper);padding:28px 22px 26px}
.fstep .fn{
  display:block;font-family:var(--head);font-size:13px;font-weight:700;letter-spacing:.12em;
  color:var(--accent);margin-bottom:14px;
}
.fstep h3{font-size:17px;line-height:1.34;margin-bottom:8px}
.fstep p{font-size:14.8px;line-height:1.6;margin:0}

/* -------------------------------------------------------- capability family */
.fam{padding:74px 0}
.fam:first-of-type{padding-top:88px}
@media(max-width:1040px){.fam{padding:52px 0}}
.famhead{max-width:62ch;margin-bottom:34px}
.famhead h2{font-size:clamp(24px,3.2vw,34px)}
.famhead p{margin-top:12px}
.cap .ex{
  display:block;margin-top:14px;font-size:13.8px;line-height:1.58;color:var(--ink-2);
  padding-top:12px;border-top:1px dashed var(--rule);
}
.cap .ex b{
  display:block;font-family:var(--head);font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:4px;
}
.cap .ex.pay-on b{color:var(--c)}
.cap .ex.pay-on{color:var(--ink)}

/* ------------------------------------------------------- ready-to-build card */
.rdys{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media(max-width:1040px){.rdys{grid-template-columns:1fr}}
.rdy{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  padding:30px 30px 28px;display:flex;flex-direction:column;position:relative;
  overflow:hidden;box-shadow:var(--sh);
  transition:box-shadow .28s,transform .28s,border-color .28s;
}
.rdy::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:var(--c);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.rdy::after{
  content:"";position:absolute;right:-60px;top:-60px;width:190px;height:190px;border-radius:50%;
  background:var(--t);opacity:0;transition:opacity .38s;
}
.rdy:hover{box-shadow:var(--sh-h);transform:translateY(-5px);border-color:transparent}
.rdy:hover::before{transform:scaleX(1)}
.rdy:hover::after{opacity:1}
.rdy > *{position:relative;z-index:2}
.rhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.rdy h3{font-size:22px;line-height:1.26;margin-bottom:8px}
.rdy .rone{
  font-family:var(--head);font-size:16px;font-weight:600;color:var(--c);margin-bottom:12px;
}
.rdy p{font-size:15.4px;line-height:1.66}
.rdy .feat{list-style:none;margin:18px 0 24px;font-size:14.8px}
.rdy .feat li{position:relative;padding-left:22px;margin-bottom:6px;line-height:1.55}
.rdy .feat li::before{content:"";position:absolute;left:3px;top:.6em;width:7px;height:7px;
  border-radius:50%;background:var(--c)}
.js .rdys .rdy.rv{transition-delay:calc(var(--i) * 45ms)}
@media(prefers-reduced-motion:reduce){
  .rdy,.rdy::before,.rdy::after{transition:none}
  .rdy:hover{transform:none}
  .js .rdys .rdy.rv{transition-delay:0s}
}

/* ---------------------------------------- dashboard tiles pick up their colour */
.tile{border-top:3px solid var(--rule-2)}
.tile:hover,.tile.on{border-top-color:var(--c)}
.tile.on .tn,.tile:hover .tn{color:var(--c)}
.tile .hint{color:var(--c)}
.tile .hint em{transition:transform .2s}
.tile:hover .hint em{transform:translateX(4px)}
.panel .pshot .tag{background:var(--c)}
.panel .feat li::before{background:var(--c)}

/* the quote block is a contained card, no longer an overlap */
.band{background:var(--teal);padding:74px 0;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:46px 46px}
.band .wrap{position:relative;z-index:2}
.quote{margin:0;box-shadow:0 22px 54px rgba(0,0,0,.24)}
.quote .eyebrow{margin-bottom:12px}
.after-band{padding-top:0}
@media(max-width:1040px){.band{padding:52px 0}}

/* ==========================================================================
   Mobile navigation — audit P0.
   Below 1040px the primary links were hidden with no replacement, so a phone
   or tablet visitor could not reach any page from the header. This adds a
   real menu button and a drawer.

   The drawer is a <dialog>-free, JS-light implementation: a button toggles
   aria-expanded and a class on <html>. With JS off the button is hidden and
   the links fall back to being visible in a wrapped row, so navigation is
   never lost entirely.
   ========================================================================== */

.navbtn{display:none}

@media(max-width:1040px){
  /* the button replaces the hidden links */
  .navbtn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    margin-left:auto;height:46px;padding:0 16px;
    background:transparent;border:1.5px solid rgba(255,255,255,.28);border-radius:8px;
    color:#fff;font-family:var(--head);font-size:14.5px;font-weight:600;
    letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  }
  .navbtn:hover{border-color:#fff}
  .navbtn .bars{position:relative;width:18px;height:12px;flex:none}
  .navbtn .bars i{
    position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px;
    transition:transform .26s cubic-bezier(.2,.7,.3,1),opacity .18s;
  }
  .navbtn .bars i:nth-child(1){top:0}
  .navbtn .bars i:nth-child(2){top:5px}
  .navbtn .bars i:nth-child(3){top:10px}
  .navbtn[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
  .navbtn[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
  .navbtn[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

  /* the nav becomes the drawer */
  .top nav{
    position:fixed;left:0;right:0;top:var(--navtop,62px);
    background:var(--teal);border-top:1px solid rgba(255,255,255,.12);
    box-shadow:0 26px 60px rgba(0,0,0,.4);
    flex-direction:column;align-items:stretch;gap:0;margin:0;padding:8px 0 18px;
    max-height:calc(100vh - var(--navtop,62px));overflow-y:auto;
    transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .26s cubic-bezier(.2,.7,.3,1),opacity .2s,visibility .26s;
    z-index:90;
  }
  /* state lives on the element itself: a root-class descendant selector proved
     unreliable here, and a component owning its own state is clearer anyway */
  .top nav.open{transform:none;opacity:1;visibility:visible;pointer-events:auto}

  /* every link visible in the drawer, comfortably tappable */
  .top nav a:not(.cta){
    display:block;padding:16px 24px;font-size:17px;color:#fff;border-radius:0;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .top nav a:not(.cta)::after{display:none}
  .top nav a:not(.cta):hover,.top nav a:not(.cta).on{background:rgba(255,255,255,.07);color:var(--accent-lt)}
  .top nav a.cta{margin:16px 24px 0;justify-content:center;display:flex;
    min-height:52px;align-items:center;border-radius:8px;font-size:16px}

  /* dim the page behind the drawer */
  html.navopen body::after{
    content:"";position:fixed;inset:0;background:rgba(10,44,51,.5);z-index:75;
  }
  html.navopen{overflow:hidden}

  /* JS absent: no button, and the links stay reachable in a wrapped row */
  html:not(.js) .navbtn{display:none}
  html:not(.js) .top nav{
    position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    flex-direction:row;flex-wrap:wrap;box-shadow:none;border-top:0;padding:0 0 12px;
    background:transparent;max-height:none;
  }
  html:not(.js) .top nav a:not(.cta){
    display:inline-block;padding:10px 14px;border-bottom:0;font-size:15px;
  }
  html:not(.js) .top nav a.cta{margin:0 0 0 10px}
  html:not(.js) .top .wrap{flex-wrap:wrap;padding-bottom:6px}
}

@media(prefers-reduced-motion:reduce){
  .top nav,.navbtn .bars i{transition:none}
}


/* ==========================================================================
   September 2026 audit fixes.
   The governing principle: nothing a buyer needs may be discoverable only on
   hover. Hover keeps the colour, lift and micro-interaction; it no longer
   carries information.
   ========================================================================== */

/* ------------------------------------------------ hero: caption + text CTA */
.shotcap{
  font-family:var(--head);font-size:12.5px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-dark-2);margin:0 0 12px;
}
/* replaces the play-button secondary CTA, which looked like a video control
   but opened a normal page */
.alink{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--head);font-size:16px;font-weight:600;color:var(--accent-lt);
  border-bottom:2px solid transparent;padding-bottom:2px;
}
.alink em{font-style:normal;transition:transform .2s}
.alink:hover{text-decoration:none;border-bottom-color:var(--accent-lt)}
.alink:hover em{transform:translateX(4px)}

/* ---------------------------------------- homepage live-software proof grid */
.lgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1040px){.lgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.lgrid{grid-template-columns:1fr}}
.lcard{
  display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);color:inherit;
  transition:box-shadow .26s,transform .26s,border-color .26s;
}
.lcard:hover{box-shadow:var(--sh-h);transform:translateY(-5px);border-color:transparent;
  text-decoration:none}
.lshot{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--wash-2)}
.lshot picture,.lshot img{width:100%;height:100%;display:block}
.lshot img{object-fit:cover;object-position:left top;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.lcard:hover .lshot img{transform:scale(1.04)}
.lbadge{
  position:absolute;left:12px;top:12px;z-index:2;background:var(--c);color:#fff;
  font-family:var(--head);font-size:12px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;padding:6px 11px;border-radius:14px;
}
.lbody{display:flex;flex-direction:column;flex:1;padding:20px 20px 18px}
.lbody .pmeta{font-size:12px;margin-bottom:8px}
.lbody b{font-family:var(--head);font-size:17.5px;font-weight:600;color:var(--ink);
  line-height:1.3;display:block;margin-bottom:7px;letter-spacing:-.01em}
.lone{font-size:14.6px;line-height:1.55;color:var(--ink-2);flex:1}
.lgo{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-family:var(--head);font-size:13.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--c);
}
.lgo em{font-style:normal;transition:transform .2s}
.lcard:hover .lgo em{transform:translateX(4px)}
.js .lgrid .lcard.rv{transition-delay:calc(var(--i) * 55ms)}
@media(prefers-reduced-motion:reduce){
  .lcard,.lshot img{transition:none}
  .lcard:hover{transform:none}
  .lcard:hover .lshot img{transform:none}
  .js .lgrid .lcard.rv{transition-delay:0s}
}

/* the hover hint is a footnote, not the headline */
.hintline{font-size:14.5px;color:var(--ink-3);margin-top:10px}

/* ------------------------------------------- capabilities quick-match strip */
.qmatch{padding:56px 0 0}
.qm{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media(max-width:1040px){.qm{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.qm{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.qm{grid-template-columns:1fr}}
.qmi{
  display:block;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:20px 18px;color:inherit;text-align:center;
  transition:border-color .2s,transform .2s,box-shadow .2s,background .2s;
}
.qmi:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--sh);
  text-decoration:none;background:var(--wash)}
.qmi b{display:block;font-family:var(--head);font-size:16px;font-weight:600;color:var(--ink);
  line-height:1.3;margin-bottom:6px}
.qmi span{display:block;font-size:13.5px;color:var(--ink-3);line-height:1.45}

/* --------------------------------------------------- procurement FAQ groups */
.fgroup{margin-bottom:52px}
.fgroup:last-of-type{margin-bottom:0}
.ghead{
  display:grid;grid-template-columns:auto 1fr;gap:0 18px;align-items:start;
  margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid var(--rule);
}
.ghead .gn{
  grid-row:span 2;font-family:var(--head);font-size:34px;font-weight:700;line-height:1;
  color:var(--accent);opacity:.32;
}
.ghead h2{font-size:clamp(22px,2.7vw,30px);margin:0}
.ghead p{margin:6px 0 0;font-size:15.5px;color:var(--ink-3)}
.faq{max-width:none;margin:0}

/* the recommended starting model gets a visible marker */
.model.pick{border-top-width:5px;box-shadow:var(--sh)}
.model.pick .mt{color:var(--accent)}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ==========================================================================
   UI/UX audit — the structural items.

   What was taken: a sticky section index so nineteen capabilities are
   navigable, a real engagement stepper, a scope builder that produces
   something a buyer can send, a trust grid, and deep links from a capability
   to the module that demonstrates it.

   What was not: see _HANDOVER/05-CHANGELOG.md. In short, a dark/gold luxury
   palette, a WebGL hero, a magnetic cursor and glass panels would slow the
   site down, break the offline-first argument, and read to a district officer
   as a crypto brand rather than a software vendor.
   ========================================================================== */

/* ------------------------------------------------- sticky capability index */
.capwrap{display:grid;grid-template-columns:236px 1fr;gap:48px;align-items:start}
@media(max-width:1040px){.capwrap{grid-template-columns:1fr;gap:0}}

.capindex{position:sticky;top:104px;align-self:start}
@media(max-width:1040px){
  .capindex{
    position:static;margin-bottom:32px;border:1px solid var(--rule);
    border-radius:var(--r);padding:18px 20px;background:var(--paper);
  }
}
.capindex h2{
  font-family:var(--head);font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 16px;
}
.capindex ol{list-style:none;margin:0;counter-reset:ci}
.capindex li{counter-increment:ci;margin-bottom:2px}
.capindex a{
  display:flex;gap:11px;align-items:baseline;padding:9px 12px;border-radius:8px;
  font-size:14.5px;line-height:1.4;color:var(--ink-2);
  border-left:2px solid transparent;transition:background .18s,color .18s,border-color .18s;
}
.capindex a::before{
  content:counter(ci,decimal-leading-zero);font-family:var(--mono);font-size:11.5px;
  color:var(--ink-3);flex:none;
}
.capindex a:hover{background:var(--wash-2);color:var(--ink);text-decoration:none}
.capindex a.on{
  background:var(--wash-2);color:var(--ink);border-left-color:var(--accent);font-weight:600;
}
.capindex a.on::before{color:var(--accent)}
.capindex .fam-sep{
  /* block, not inline: an inline span ignores its vertical margins but still
     paints and hit-tests its padding, so the separator's box bled upward over
     the link above it and stole three pixels of that link's tap area. */
  display:block;margin:16px 0 8px;font-family:var(--head);font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  padding-top:14px;border-top:1px solid var(--rule);
}
.capindex li:first-child .fam-sep{margin-top:0;padding-top:0;border-top:0}

/* ---------------------------------------------------- engagement stepper */
.stepper{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--paper);
}
@media(max-width:900px){.stepper{grid-template-columns:1fr}}
.stg{padding:30px 26px 28px;position:relative;border-left:1px solid var(--rule)}
.stg:first-child{border-left:0}
@media(max-width:900px){
  .stg{border-left:0;border-top:1px solid var(--rule)}
  .stg:first-child{border-top:0}
}
.stg .rail{
  display:flex;align-items:center;gap:10px;margin-bottom:18px;
}
.stg .dot{
  width:30px;height:30px;border-radius:50%;flex:none;background:var(--wash-2);
  border:2px solid var(--rule-2);display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink-3);
}
.stg .line{height:2px;flex:1;background:var(--rule)}
.stg:last-child .line{background:transparent}
.stg.done .dot{background:var(--accent);border-color:var(--accent);color:#fff}
.stg.done .line{background:var(--accent);opacity:.35}
.stg h3{font-size:18px;line-height:1.3;margin-bottom:8px}
.stg p{font-size:14.8px;line-height:1.6;margin:0}
.stg .out{
  display:block;margin-top:14px;padding-top:12px;border-top:1px dashed var(--rule);
  font-size:13.5px;color:var(--ink-3);
}
.stg .out b{display:block;font-family:var(--head);font-size:11.8px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}

/* --------------------------------------------------------- trust signals */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
@media(max-width:900px){.tgrid{grid-template-columns:1fr}}
.tsig{background:var(--paper);padding:26px 24px;display:flex;gap:15px;align-items:flex-start}
.tsig svg{width:24px;height:24px;flex:none;stroke:var(--accent);fill:none;stroke-width:1.7;margin-top:2px}
.tsig b{display:block;font-family:var(--head);font-size:16.5px;font-weight:600;color:var(--ink);
  line-height:1.32;margin-bottom:5px}
.tsig span{display:block;font-size:14.5px;line-height:1.55;color:var(--ink-2)}

/* ----------------------------------------------------------- scope builder */
.scope{
  border:1px solid var(--rule);border-radius:var(--r);background:var(--paper);
  box-shadow:var(--sh);overflow:hidden;
}
.scope-h{padding:26px 30px 22px;border-bottom:1px solid var(--rule);background:var(--wash)}
.scope-h h3{font-size:21px;margin-bottom:7px}
.scope-h p{font-size:15px;margin:0;color:var(--ink-2)}
.scope-b{padding:28px 30px 30px;display:grid;gap:26px}
.fset{border:0;padding:0;margin:0}
.fset legend{
  font-family:var(--head);font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);padding:0;margin-bottom:12px;
}
.opts{display:flex;flex-wrap:wrap;gap:9px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt span{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 18px;
  border:1.5px solid var(--rule-2);border-radius:24px;cursor:pointer;
  font-size:15px;color:var(--ink-2);background:var(--paper);
  transition:border-color .16s,background .16s,color .16s;
}
.opt span::before{
  content:"";width:16px;height:16px;border-radius:50%;border:2px solid var(--rule-2);
  flex:none;transition:border-color .16s,background .16s,box-shadow .16s;
}
.opt input[type="checkbox"] + span::before{border-radius:4px}
.opt span:hover{border-color:var(--ink-3)}
.opt input:checked + span{
  border-color:var(--accent);background:var(--wash);color:var(--ink);font-weight:500;
}
.opt input:checked + span::before{
  border-color:var(--accent);background:var(--accent);
  box-shadow:inset 0 0 0 2px var(--paper);
}
.opt input:focus-visible + span{outline:3px solid var(--accent);outline-offset:3px}
.scope-out{
  border-top:1px solid var(--rule);background:var(--wash);padding:24px 30px 28px;
}
.scope-out h4{
  font-family:var(--head);font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;
}
.scope-sum{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:20px 22px;font-size:15.2px;line-height:1.65;color:var(--ink-2);
  white-space:pre-wrap;font-family:var(--mono);font-size:13.5px;
  max-height:260px;overflow:auto;
}
.scope-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;align-items:center}
.scope-note{font-size:13.8px;color:var(--ink-3);margin:14px 0 0}
.copied{font-size:14px;font-weight:600;color:var(--accent);font-family:var(--head)}

/* ----------------------------------- deep link from a capability to a demo */
.cap .seealso{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-family:var(--head);font-size:13.2px;font-weight:600;color:var(--c);
  border-bottom:1.5px solid var(--c);padding-bottom:2px;
}
.cap .seealso em{font-style:normal;transition:transform .2s}
.cap .seealso:hover{text-decoration:none}
.cap .seealso:hover em{transform:translateX(4px)}


/* ==========================================================================
   Findings from the real-browser sweep at 320 / 375 / 768 / 1440.
   Measured with Playwright rather than the preview pane, which renders a
   hidden page at full height and so cannot scroll.
   ========================================================================== */

/* -- the family band is what actually changes as you scroll ---------------
   Nineteen cards sit three to a row, so a per-capability highlight would
   always resolve to the leftmost card of the current row. The index tracks
   the family instead, and the card you jumped to identifies itself. */
.capindex .fam-sep{font-size:12px;color:var(--ink-3);transition:color .2s}
.capindex .fam-sep.here{color:var(--accent)}

.cap:target{box-shadow:0 0 0 2px var(--c,var(--accent))}

/* -- touch targets ---------------------------------------------------------
   .tlink and .alink draw their own underline with border-bottom, so giving
   them a 44px height would leave the rule floating below the words. The hit
   area is extended instead and the type stays exactly where it was. */
@media(max-width:767px){
  .tlink,.alink,.phero .crumb a,.seealso,dd a{position:relative}
  .tlink::after,.alink::after,.phero .crumb a::after,.seealso::after,dd a::after{
    content:"";position:absolute;left:0;right:0;top:50%;
    height:44px;transform:translateY(-50%);
  }

  /* Footer links are a list, not prose: real spacing, so two 44px targets
     cannot overlap and swallow each other's taps. */
  footer a{display:block;padding:12px 0}
  footer li{margin-bottom:0}
  footer .arr li::before{top:12px}
  footer .cinfo li{align-items:center}
  footer .cinfo svg{margin-top:0}
}

/* the home link wraps the logo and is a real target, not decoration */
.top .wrap > a:first-of-type{display:flex;align-items:center;min-height:44px}

.skip:focus{padding:15px 20px}

@media(max-width:1040px){
  .capindex a{min-height:44px;padding:10px 12px;align-items:center}
}

/* 12px is the floor for anything a person has to read on a phone */
.stg .out b{font-size:12px}


/* Nineteen links stack 1,177px tall — taller than any real viewport — so once
   the index pins, the last seven are below the fold and cannot be reached.
   Cap it to the visible area and let it scroll within itself. */
/* The rail is fifteen buttons that fit one screen, so there is no cap and no
   internal scrolling — nothing in the list is hidden behind a gesture. */


/* The four stages carry different amounts of text, so the "You hold" rules
   landed at four different heights across the row. Push the block to the
   bottom of each cell so the dashed rules line up. */
.stg{display:flex;flex-direction:column}
.stg p{margin-bottom:16px}
.stg .out{margin-top:auto}


/* A card left alone in the final row reads as a missing card, whatever colour
   the empty cell is. Let it take the whole row, so the grid stays complete at
   every column count and the item counts stop being load-bearing.
   :last-child at an odd position in a two-column grid IS the lone card. */
@media(min-width:641px) and (max-width:1040px){
  .caps > :last-child:nth-child(odd){grid-column:1/-1}
}
@media(min-width:1041px){
  .caps > :last-child:nth-child(3n+1){grid-column:1/-1}
  .rdys > :last-child:nth-child(odd){grid-column:1/-1}
  /* Spanning doubles the width, which would run the prose to a 150-character
     measure and leave the bullets stranded in the left half. Hold the measure
     and set the list in two columns so the card fills the row properly. */
  .rdys > :last-child:nth-child(odd) > p{max-width:64ch}
  .rdys > :last-child:nth-child(odd) > .feat{columns:2;column-gap:44px}
  .rdys > :last-child:nth-child(odd) > .feat li{break-inside:avoid}
}


/* ==========================================================================
   Section headers, stat band, pledge grid and the get-in-touch block.
   ========================================================================== */

/* -- section headers ------------------------------------------------------
   These were centred in a 58ch column, which forced a three-line heading with
   empty space either side of it. The heading now sits left with its supporting
   line beside it, so the same words take two lines and the full width is used.
   `.mid` is kept in the markup but no longer centres anything — every section
   header on every page reads the same way. */
.shead,.shead.mid{
  display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);
  gap:8px 60px;align-items:end;max-width:none;margin:0 0 46px;text-align:left;
}
.shead .eyebrow{grid-column:1/-1;margin-bottom:2px}
.shead h2{margin:0;text-wrap:balance}
.shead p{margin:0;padding-bottom:5px;font-size:16.5px;line-height:1.7;max-width:52ch}
@media(max-width:900px){
  .shead,.shead.mid{grid-template-columns:1fr;gap:14px 0;margin-bottom:34px}
  .shead p{padding-bottom:0}
}

/* -- stat band: five figures, so it wraps rather than breaking a fixed grid */
.stats{display:flex;flex-wrap:wrap;padding:34px 12px}
.stats .s{
  flex:1 1 168px;text-align:center;padding:8px 16px;
  border-left:1px solid rgba(255,255,255,.26);
}
.stats .s:first-child{border-left:0}
.stats b{font-size:clamp(26px,2.9vw,36px);white-space:nowrap}
/* the figures share a baseline: without this the one that wraps drags its
   whole column down and the band looks ragged */
.stats .s{display:flex;flex-direction:column}
.stats .s > span{font-size:14px;line-height:1.48}
@media(max-width:1040px){
  .stats{gap:6px 0}
  .stats .s{flex:1 1 46%;border-left:0}
}
@media(max-width:520px){.stats .s{flex:1 1 100%}}

.statnote{
  max-width:78ch;margin:18px auto 0;text-align:center;
  font-size:14.2px;line-height:1.62;color:var(--ink-3);
}

/* -- the pledge list had no layout at all: headings and paragraphs stacked at
   full width down a dark section. Three columns, with a rule between them. */
.pledge{
  display:grid;grid-template-columns:repeat(3,1fr);gap:34px 46px;margin-bottom:44px;
}
@media(max-width:1040px){.pledge{grid-template-columns:repeat(2,1fr);gap:30px 40px}}
@media(max-width:680px){.pledge{grid-template-columns:1fr;gap:26px}}
.pledge > div{padding-top:20px;border-top:2px solid rgba(255,255,255,.17)}
.pledge h3{
  font-size:17.5px;line-height:1.34;color:#fff;margin-bottom:9px;text-wrap:balance;
}
.pledge p{font-size:15px;line-height:1.66;color:var(--on-dark-2);margin:0}

/* -- get in touch --------------------------------------------------------- */
.talk{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;
  align-items:start;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--paper);box-shadow:var(--sh);padding:44px 46px 42px;
}
@media(max-width:960px){.talk{grid-template-columns:1fr;gap:32px;padding:32px 26px 30px}}
.talk h2{font-size:clamp(25px,3.1vw,36px);margin:0 0 16px;text-wrap:balance}
.talk p{font-size:16.5px;line-height:1.72;margin:0 0 14px}
.talkrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.talknote{font-size:14.5px;color:var(--ink-3);margin:26px 0 0}
.talknote a{color:var(--accent);border-bottom:1px solid var(--rule-2)}

.talkl{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r-sm);overflow:hidden}
.talkl li{
  background:var(--wash);padding:18px 20px;display:grid;
  grid-template-columns:20px 1fr;gap:4px 12px;align-items:start;
}
.talkl svg{width:17px;height:17px;stroke:var(--accent);fill:none;stroke-width:2.2;
  grid-row:1/3;margin-top:3px}
.talkl b{font-family:var(--head);font-size:15.5px;font-weight:600;color:var(--ink);
  line-height:1.35}
.talkl span{font-size:14.5px;line-height:1.58;color:var(--ink-2)}

/* the animated counter sits inside <b>; it must not inherit the label type */
.stats b span{display:inline;font:inherit;margin:0;color:inherit;letter-spacing:inherit}

/* ------------------------------------------- the index, as buttons not a list
   Fifteen short labels, every one visible: no max-height and no internal
   scrolling, so nothing is hidden behind a gesture. */
.capindex{max-height:none;overflow:visible;padding-right:0}
.capindex h2{margin-bottom:14px}
.capindex ol{display:flex;flex-direction:column;gap:4px}
.capindex li{margin-bottom:0}
.capindex a{
  display:flex;align-items:center;min-height:34px;padding:5px 12px;
  border:1px solid var(--rule);border-radius:9px;border-left:3px solid var(--rule);
  background:var(--paper);font-size:13.8px;line-height:1.28;color:var(--ink-2);
  transition:border-color .18s,background .18s,color .18s,transform .18s;
}
.capindex a::before{font-size:10.8px;color:var(--ink-3);flex:none;margin-right:2px}
.capindex a:hover{
  border-color:var(--rule-2);border-left-color:var(--c,var(--accent));
  background:var(--wash);color:var(--ink);transform:translateX(3px);text-decoration:none;
}
.capindex a.on{
  border-color:var(--c,var(--accent));border-left-color:var(--c,var(--accent));
  background:var(--wash);color:var(--ink);font-weight:600;
}
.capindex .fam-sep{margin:12px 0 6px;padding-top:10px;font-size:11px}
@media(max-width:1040px){
  /* in flow rather than pinned: lay the buttons out across the width */
  .capindex{position:static;border:0;padding:0;background:none;margin-bottom:30px}
  .capindex ol{flex-direction:row;flex-wrap:wrap;gap:8px}
  .capindex li{display:contents}
  .capindex .fam-sep{width:100%;margin:12px 0 2px;padding-top:12px}
  .capindex a{min-height:44px}
}


/* The capability card's hover panel carries three blocks — payoff, inclusions
   and a button — so it is taller than the illustration and problem it replaces.
   Centred, it spilled upward over the title and was clipped below. Anchor it to
   the top and give the body room for the taller of the two states. */
.cap .cpay{justify-content:flex-start}
.cap .cbody{min-height:296px}
.cap .cpay .cpt{font-size:15px;line-height:1.5}
.cap .cinc{margin-top:11px;padding-top:9px;font-size:13.2px}
.cap .cbtn{margin-top:13px;min-height:44px;font-size:13px;padding:0 17px}
@media(max-width:1040px){.cap .cbody{min-height:0}}
@media(hover:none){.cap .cbody{min-height:0}}


/* ==========================================================================
   The enquiry questionnaire.
   Without JavaScript every .qstep is visible and this is an ordinary form;
   .js-quiz is added by the script and is what turns it into steps.
   ========================================================================== */
.quiz{
  max-width:840px;margin:0 auto;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--paper);box-shadow:var(--sh);padding:0;overflow:hidden;
}
.qbar{height:4px;background:var(--wash-2);display:none}
.js-quiz .qbar{display:block}
.qbar span{display:block;height:100%;width:20%;background:var(--accent);
  transition:width .38s cubic-bezier(.2,.7,.3,1)}
.qcount{
  display:none;margin:0;padding:20px 34px 0;font-family:var(--head);font-size:12px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.js-quiz .qcount{display:block}

.qstep{border:0;margin:0;padding:22px 34px 30px}
.js-quiz .qstep{display:none}
.js-quiz .qstep.on{display:block;animation:qin .34s cubic-bezier(.2,.7,.3,1)}
@keyframes qin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.js-quiz .qstep.on{animation:none}}
.qstep + .qstep{border-top:1px solid var(--rule)}
.js-quiz .qstep + .qstep{border-top:0}

.qstep legend{padding:0;margin-bottom:22px;width:100%}
.qstep legend b{
  display:block;font-family:var(--head);font-size:clamp(21px,2.4vw,27px);font-weight:700;
  line-height:1.24;color:var(--ink);letter-spacing:-.015em;text-wrap:balance;
}
.qstep legend span{display:block;margin-top:9px;font-size:15.5px;line-height:1.65;
  color:var(--ink-2);max-width:56ch}

/* ---- choice cards */
.qopts{display:grid;gap:12px}
.qopts.c2{grid-template-columns:repeat(2,1fr)}
.qopts.c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:720px){.qopts.c2,.qopts.c3{grid-template-columns:1fr}}
.qopt{position:relative;display:block}
.qopt input{position:absolute;opacity:0;width:0;height:0}
.qopt > span{
  display:block;min-height:64px;padding:15px 17px;border:1.5px solid var(--rule-2);
  border-radius:var(--r-sm);cursor:pointer;background:var(--paper);
  transition:border-color .16s,background .16s,transform .16s,box-shadow .16s;
}
.qopt b{display:block;font-family:var(--head);font-size:16px;font-weight:600;color:var(--ink);
  line-height:1.3}
.qopt .qn{display:block;margin-top:4px;font-size:13.8px;line-height:1.45;color:var(--ink-3)}
.qopt > span:hover{border-color:var(--ink-3);transform:translateY(-2px);box-shadow:var(--sh)}
.qopt input:checked + span{
  border-color:var(--accent);background:var(--wash);box-shadow:inset 0 0 0 1px var(--accent);
}
.qopt input:checked + span b{color:var(--accent-dk)}
.qopt input:focus-visible + span{outline:3px solid var(--accent);outline-offset:3px}

/* ---- text fields */
.qgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:720px){.qgrid{grid-template-columns:1fr}}
.qfield label{
  display:block;margin-bottom:7px;font-family:var(--head);font-size:13.5px;font-weight:600;
  color:var(--ink-2);
}
.qfield label em{font-style:normal;font-weight:400;color:var(--ink-3)}
.qfield input,.qfield textarea{
  width:100%;min-height:50px;padding:13px 15px;border:1.5px solid var(--rule-2);
  border-radius:var(--r-sm);background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.5;
  transition:border-color .16s,box-shadow .16s;
}
.qfield textarea{min-height:120px;resize:vertical}
.qfield input:focus,.qfield textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--wash-2);
}
.qfield input::placeholder,.qfield textarea::placeholder{color:var(--ink-3)}

.qerr{margin:16px 0 0;font-size:14.8px;font-weight:600;color:#B3261E;min-height:1.2em}

/* ---- navigation */
.qnav{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  padding:22px 34px 26px;border-top:1px solid var(--rule);background:var(--wash);
}
.qskip{font-size:14px;color:var(--ink-3)}
.js-quiz .qnav .btn[hidden]{display:none}
/* without the script both buttons would show; only the real submit makes sense */
.quiz:not(.js-quiz) #qnext,.quiz:not(.js-quiz) #qback{display:none}
.quiz:not(.js-quiz) #qsend{display:inline-flex}

/* ---- the confirmation */
.qdone{
  max-width:760px;margin:0 auto;text-align:center;border:1px solid var(--rule);
  border-radius:var(--r);background:var(--paper);box-shadow:var(--sh);padding:52px 40px 46px;
}
.qtick{
  display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;
  border-radius:50%;background:var(--wash);margin-bottom:22px;
}
.qtick svg{width:30px;height:30px;stroke:var(--accent);fill:none;stroke-width:2.6}
.qdone h2{font-size:clamp(25px,3vw,34px);margin-bottom:16px;text-wrap:balance}
.qdone p{font-size:16.8px;line-height:1.72;max-width:56ch;margin:0 auto 14px}
.qdone-n{font-size:15px;color:var(--ink-3)}
.qdone-n a{color:var(--accent);font-weight:600}
.qdone .btnrow{justify-content:center;margin-top:26px}

@media(max-width:640px){
  .qstep{padding:20px 20px 26px}
  .qcount{padding:18px 20px 0}
  .qnav{padding:18px 20px 22px}
  .qdone{padding:38px 22px 34px}
}


/* ==========================================================================
   THE SIX-PANEL DESIGN SYSTEM
   The devices that make every area of the site read as one piece of work:
   a numbered section label, a two-tone heading, a circular icon badge, a
   dashed step flow, and a soft panel. Used on every page, in the same order.
   ========================================================================== */

/* -- 1. numbered section label ------------------------------------------- */
.eyebrow .n{
  display:inline-block;margin-right:9px;color:var(--accent);opacity:.6;
  font-variant-numeric:tabular-nums;
}

/* -- 2. two-tone heading -------------------------------------------------
   The second half of the sentence carries the accent. <em> is the hook, so a
   heading stays one readable sentence in the markup. */
h1 em,h2 em,h3 em{font-style:normal;color:var(--accent)}
.dark h1 em,.dark h2 em,.hero h1 em{color:var(--accent-lt)}

/* the brushed underline, for a heading that opens an area */
.uline{position:relative;display:inline-block}
.uline::after{
  content:"";position:absolute;left:2px;right:2px;bottom:-6px;height:5px;border-radius:3px;
  background:linear-gradient(90deg,var(--accent) 0%,rgba(222,107,32,.35) 100%);
}

/* -- 3. circular icon badge ---------------------------------------------- */
.ib{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:52px;height:52px;border-radius:50%;background:rgba(222,107,32,.10);
  transition:background .26s,transform .3s cubic-bezier(.2,.7,.3,1);
}
.ib svg{width:23px;height:23px;stroke:var(--accent);fill:none;stroke-width:1.9}
.ib.sm{width:42px;height:42px}
.ib.sm svg{width:19px;height:19px}
*:hover > .ib,*:hover .ib{background:rgba(222,107,32,.18)}

/* -- 4. soft panel, the container everything sits in --------------------- */
.pan{
  border:1px solid var(--rule);border-radius:var(--r);background:var(--paper);
  padding:30px 32px;
}
.pan-w{background:var(--wash)}

/* -- 5. dashed step flow -------------------------------------------------
   Numbered stages with a dashed connector between them, as in the reference.
   The connector is drawn on the step, not between steps, so a row that wraps
   never leaves an arrow pointing at nothing. */
.flowrow{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
@media(max-width:900px){.flowrow{grid-template-columns:repeat(2,1fr);gap:30px 0}}
@media(max-width:560px){.flowrow{grid-template-columns:1fr;gap:26px}}
.fs{position:relative;padding:0 22px;text-align:center}
.fs .ib{margin-bottom:16px}
.fs .fnum{
  display:block;font-family:var(--head);font-size:13px;font-weight:700;letter-spacing:.12em;
  color:var(--accent);margin-bottom:7px;
}
.fs h3{font-size:16.5px;line-height:1.32;margin-bottom:8px;text-wrap:balance}
.fs p{font-size:14.6px;line-height:1.6;margin:0;color:var(--ink-2)}
/* the dashed link to the next stage */
.fs::after{
  content:"";position:absolute;top:26px;right:-14px;width:28px;height:2px;
  background:repeating-linear-gradient(90deg,var(--rule-2) 0 5px,transparent 5px 10px);
}
.fs:last-child::after{content:none}
@media(max-width:900px){
  .fs:nth-child(2n)::after{content:none}
}
@media(max-width:560px){.fs::after{content:none}}

/* -- 6. outcome cards ----------------------------------------------------- */
.outs{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--paper);overflow:hidden;
}
@media(max-width:1040px){.outs{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.outs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.outs{grid-template-columns:1fr}}
.out1{padding:28px 22px 26px;border-left:1px solid var(--rule);text-align:center}
.out1:first-child{border-left:0}
@media(max-width:1040px){.out1:nth-child(3n+1){border-left:0}}
@media(max-width:700px){.out1:nth-child(2n+1){border-left:0}}
.out1 .ib{margin-bottom:16px}
.out1 b{
  display:block;font-family:var(--head);font-size:clamp(25px,2.7vw,32px);font-weight:700;
  line-height:1;letter-spacing:-.03em;color:var(--ink);white-space:nowrap;
}
.out1 .dash{display:block;width:26px;height:3px;border-radius:2px;background:var(--accent);
  margin:13px auto}
.out1 > span:last-child{display:block;font-size:14px;line-height:1.55;color:var(--ink-2)}
/* the badge is a span too: keep it a centring flex box whatever else matches */
.ib,.out1 .ib,.sv .ib,.qcard .ib,.fs .ib{display:inline-flex}

/* -- 7. checklist beside an illustration ---------------------------------- */
.ckl{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ckl li{
  display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;
  padding:13px 16px;border-radius:var(--r-sm);font-size:15.4px;line-height:1.55;
  color:var(--ink-2);background:var(--paper);
}
.ckl li:nth-child(odd){background:var(--wash)}
.ckl svg{width:17px;height:17px;stroke:var(--accent);fill:none;stroke-width:2.6;margin-top:3px}

/* -- 8. the question cards that lead into the enquiry --------------------- */
.qcards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:560px){.qcards{grid-template-columns:1fr}}
.qcard{
  display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--rule);
  border-radius:var(--r-sm);background:var(--paper);color:var(--ink);
  font-family:var(--head);font-size:15.4px;font-weight:600;line-height:1.32;
  transition:border-color .18s,transform .18s,box-shadow .18s;
}
.qcard:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--sh);
  text-decoration:none}
.qcard .ib{width:40px;height:40px}
.qcard .ib svg{width:18px;height:18px}

/* -- 9. contact card with the dashed flourish ----------------------------- */
.ccard{
  position:relative;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--wash);padding:34px 32px 32px;overflow:hidden;
}
.ccard .swoosh{position:absolute;right:-10px;top:-6px;width:210px;height:96px;opacity:.5}
.ccard .swoosh path{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-dasharray:5 5}
.ccard .ib{margin-bottom:22px}
.crow{
  display:flex;align-items:center;gap:13px;padding:14px 17px;margin-bottom:12px;
  border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--paper);
  font-size:16px;color:var(--ink);transition:border-color .18s,transform .18s;
}
.crow:hover{border-color:var(--accent);transform:translateX(3px);text-decoration:none}
.crow svg{width:19px;height:19px;stroke:var(--accent);fill:none;stroke-width:1.9;flex:none}
.ccard p{margin:18px 0 0;font-size:15px;line-height:1.65;color:var(--ink-2)}

/* -- 10. two-column area block: heading left, content right --------------- */
.area{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:56px;
  align-items:start}
@media(max-width:960px){.area{grid-template-columns:1fr;gap:30px}}
.area .lead h2{margin-bottom:16px}
.area .lead p{font-size:16.2px;line-height:1.72;color:var(--ink-2);max-width:44ch}

/* -- 11. the eleven-solution tile grid ------------------------------------ */
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:1040px){.sgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.sgrid{grid-template-columns:1fr}}
.stile{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:11px;padding:20px 14px 18px;border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--paper);color:var(--ink);
  font-family:var(--head);font-size:14.4px;font-weight:600;line-height:1.32;
  transition:border-color .18s,transform .18s,box-shadow .18s;
}
.stile:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--sh);
  text-decoration:none}
.stile b{font-weight:600}
.slive{
  position:absolute;top:9px;right:9px;padding:2px 8px;border-radius:9px;
  background:var(--accent);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;
}
.stile.more{border-style:dashed;background:var(--wash)}

/* -- 12. the three families, as a numbered list --------------------------- */
.fam3{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.fam3 li{
  display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:baseline;
  padding:18px 20px;border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--paper);
}
.fam3 .fnum{grid-row:1/3;align-self:start;font-family:var(--head);font-size:15px;
  font-weight:700;color:var(--accent);margin:0}
.fam3 b{font-family:var(--head);font-size:16.5px;font-weight:600;color:var(--ink);
  line-height:1.3}
.fam3 span{font-size:14.8px;line-height:1.58;color:var(--ink-2)}


/* An animated counter lives inside <b>, and a bare `span` rule written for the
   label beside it will also match the counter and break the figure onto two
   lines. This is the fifth time that collision has appeared — pin it once. */
b span[data-count],b [data-count]{
  display:inline;font:inherit;color:inherit;margin:0;letter-spacing:inherit;
}


/* -- 13. the technology stack, grouped, with each project's own mark ------- */
.tstack{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:820px){.tstack{grid-template-columns:1fr}}
.tgroup{border:1px solid var(--rule);border-radius:var(--r);background:var(--paper);
  padding:26px 28px 24px}
.tgroup h3{font-size:17px;margin-bottom:7px}
.tgroup > p{font-size:14.8px;line-height:1.6;color:var(--ink-2);margin:0 0 18px}
.tks{display:flex;flex-wrap:wrap;gap:10px}
.tk{
  display:inline-flex;align-items:center;gap:10px;padding:9px 15px 9px 10px;
  border:1px solid var(--rule);border-radius:24px;background:var(--wash);
  transition:border-color .18s,transform .18s;
}
.tk:hover{border-color:var(--rule-2);transform:translateY(-2px)}
.tkm{width:26px;height:26px;flex:none}
.tk b{font-family:var(--head);font-size:14.4px;font-weight:600;color:var(--ink)}

/* -- 14. the five build steps, as numbered cards -------------------------- */
.fsteps{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
@media(max-width:1040px){.fsteps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.fsteps{grid-template-columns:1fr}}
.fsteps .fstep{background:var(--paper);padding:26px 22px 24px}
.fsteps .fn{
  display:block;font-family:var(--head);font-size:13px;font-weight:700;letter-spacing:.12em;
  color:var(--accent);margin-bottom:10px;
}
.fsteps .fstep h3{font-size:16.5px;line-height:1.3;margin-bottom:9px;text-wrap:balance}
.fsteps .fstep p{font-size:14.6px;line-height:1.6;color:var(--ink-2);margin:0}


/* --------------------------------------------- regression fixes, seven pages */
/* 12px is the floor for anything a person has to read on a phone */
.slive{font-size:12px;padding:2px 9px}
.capindex .fam-sep{font-size:12px}
.cinc b{font-size:12px}

/* .tiles is two columns below 900px, but at 320 the two tracks plus the gutter
   are wider than the wrap and the tiles cannot shrink (min-width defaults to
   auto on a grid item). One column, and let them shrink. */
.tile{min-width:0}
@media(max-width:560px){.tiles{grid-template-columns:1fr}}


/* ==========================================================================
   HERO — the app window with its orbiting capability chips.

   Every class below is referenced by the hero markup. They were added to the
   markup in an earlier pass without these rules, and an inline <svg> with no
   width or height defaults to roughly 300x150px, so the icons rendered as
   enormous black blocks and forced the grid into one column. Sizing an icon is
   not optional: any svg dropped into a button or a chip needs it.
   ========================================================================== */

/* an inline icon inside any button */
.btn svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:2}
.btn{display:inline-flex;align-items:center;gap:10px}

/* the short rule under the hero headline */
.hrule{
  display:block;width:78px;height:4px;border-radius:3px;margin:26px 0 24px;
  background:linear-gradient(90deg,var(--accent) 0%,rgba(222,107,32,.25) 100%);
}
.hrule::after{
  content:"";display:block;width:7px;height:7px;border-radius:50%;
  background:var(--accent);margin:-1.5px 0 0 86px;
}

/* the secondary CTA on the dark hero: outlined, not filled */
.btn-g{
  background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.28);
}
.btn-g:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5);color:#fff}

/* -- the window and the chips around it ---------------------------------- */
/* the window is inset so the chips have a gutter to sit in, rather than
   landing on top of the screenshot */
.shotwrap{position:relative;padding:0 92px}
.shotwrap picture,.shotwrap img{position:relative;z-index:2}

.orb{
  position:absolute;z-index:3;display:flex;flex-direction:column;align-items:center;
  gap:6px;width:84px;padding:11px 6px 10px;border-radius:13px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:orbfloat 7s ease-in-out infinite;
}
.orb svg{width:21px;height:21px;stroke:var(--accent-lt);fill:none;stroke-width:1.9}
.orb b{
  font-family:var(--head);font-size:12px;font-weight:600;line-height:1.2;
  color:rgba(255,255,255,.9);text-align:center;
}
.o1{left:0;top:14%}
.o2{left:0;top:56%;animation-delay:-1.8s}
.o3{right:0;top:10%;animation-delay:-3.4s}
.o4{right:0;top:54%;animation-delay:-5.1s}

@keyframes orbfloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
@media(prefers-reduced-motion:reduce){.orb{animation:none}}

/* Below the hero's two-column breakpoint the chips would sit outside the
   viewport, so they come inside as a plain row under the window. */
@media(max-width:1120px){
  .shotwrap{padding:0}
  .orb{
    position:static;width:auto;flex-direction:row;gap:9px;padding:9px 14px;
    animation:none;background:rgba(255,255,255,.06);
  }
  .shotwrap{display:flex;flex-direction:column;gap:10px}
  .orb.o1,.orb.o2,.orb.o3,.orb.o4{order:2}
  .shotwrap picture,.shotwrap img{order:1}
}
@media(max-width:1120px) and (min-width:520px){
  .shotwrap{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
  .shotwrap picture,.shotwrap img{grid-column:1/-1}
}


/* the drawn hero dashboard sits where the screenshot used to */
.heroart{
  display:block;width:100%;height:auto;position:relative;z-index:2;
  border-radius:12px;box-shadow:0 30px 70px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.10);
}


/* a compact assurance strip: the brief asks for hosting facts as one row,
   not four explanatory cards */
.assure{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.assure span{
  display:inline-flex;align-items:center;gap:10px;padding:12px 18px;
  border:1px solid var(--rule);border-radius:26px;background:var(--wash);
  font-size:14.8px;color:var(--ink-2);
}
.assure svg{width:17px;height:17px;stroke:var(--accent);fill:none;stroke-width:1.9;flex:none}

/* disclosure rows used for module detail, fit rules and procurement answers */
.accs{display:grid;gap:10px;max-width:900px}
.acc{border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--paper)}
.acc summary{
  cursor:pointer;list-style:none;padding:15px 20px;min-height:52px;display:flex;
  align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--head);font-size:15.6px;font-weight:600;color:var(--ink);
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:"";width:9px;height:9px;flex:none;border-right:2px solid var(--accent);
  border-bottom:2px solid var(--accent);transform:rotate(45deg);margin-top:-4px;
  transition:transform .22s;
}
.acc[open] summary::after{transform:rotate(-135deg);margin-top:2px}
.acc > p,.acc > ul{padding:0 20px 18px;margin:0;font-size:15px;line-height:1.68;color:var(--ink-2)}
.acc > ul{padding-left:20px}
.pbody .acc,.rdy .acc{border:0;background:none;margin:2px 0 4px}
.pbody .acc summary,.rdy .acc summary{padding:13px 0;min-height:48px;font-size:14.4px;color:var(--ink-3)}
.pbody .acc > ul,.rdy .acc > ul,.rdy .acc > p{padding:0 0 12px}


/* ==========================================================================
   PROFESSIONAL PASS
   The site goes to firms and government offices, so the type is quieter and
   the orange is reserved for action. Palette and typeface are unchanged: only
   weight, scale, tracking and where colour is allowed to appear.
   ========================================================================== */

/* -- the eyebrow was a muddy olive (--gold #A98B2D). On a light section it
   read as neither brand colour. Slate label, accent only on the number. */
.eyebrow{
  color:var(--ink-3);font-size:12.5px;letter-spacing:.15em;font-weight:600;
}
.eyebrow .n{color:var(--accent);opacity:1;font-weight:700}
.dark .eyebrow,.hero .eyebrow,.phero .eyebrow{color:var(--on-dark-2)}
.dark .eyebrow .n,.hero .eyebrow .n,.phero .eyebrow .n{color:var(--accent-lt)}

/* -- headings: 600 rather than 700, and a tighter scale. Poppins at 700 in
   large sizes reads promotional; at 600 it reads considered. */
h1,h2,h3,h4{font-weight:600}
h1{font-size:clamp(31px,4.4vw,48px);letter-spacing:-.022em}
h2{font-size:clamp(25px,3.2vw,36px);letter-spacing:-.018em}
.hero h1{font-weight:600;max-width:19ch}

/* -- decoration in the accent colour goes; the accent means "you can act on
   this". The brushed underline was the main offender. */
.uline::after{display:none}
.out1 .dash{background:var(--rule-2);width:22px;height:2px}
.ccard .swoosh{display:none}
.hrule{background:var(--rule-2);width:56px;height:2px}
.hrule::after{display:none}

/* -- section rhythm: more air between sections, less inside cards, which is
   what makes a dense page feel orderly rather than crowded */
section{padding:74px 0}
@media(max-width:760px){section{padding:52px 0}}
.shead{margin-bottom:40px}

/* -- the capability card is static now: no absolute overlay, no hover state */
.cap{display:block;overflow:visible}
.cap .cfig{display:block;margin:0 0 16px;border-radius:var(--r-sm);overflow:hidden;
  line-height:0;opacity:1;transform:none}
.cap .cfig .cart{display:block;width:100%;height:auto}
.cap .cprob{font-size:15.2px;line-height:1.62;color:var(--ink-2);margin:0 0 14px;opacity:1}
.cap .cinc{
  display:block;margin:0;padding-top:13px;border-top:1px solid var(--rule);
  font-size:13.8px;line-height:1.58;color:var(--ink-3);
}
.cap .cinc b{
  display:block;font-family:var(--head);font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:5px;
}
.cap:hover{box-shadow:none;z-index:auto}
.cap:hover h3,.cap:focus-within h3{color:var(--ink)}
.cap:hover .ci,.cap:focus-within .ci{background:var(--t);transform:none}
.cap:hover .ci svg,.cap:focus-within .ci svg{stroke:var(--c);transform:none}

/* the capability grid no longer sits beside a rail */
.capwrap{display:block}


/* -- the clickable step rail on the enquiry form ------------------------- */
.qsteps{display:none;flex-wrap:wrap;gap:6px;padding:18px 34px 0}
.js-quiz .qsteps{display:flex}
.qsteps button{
  min-height:38px;padding:0 14px;border:1px solid var(--rule);border-radius:19px;
  background:var(--paper);color:var(--ink-3);cursor:pointer;
  font-family:var(--head);font-size:13.2px;font-weight:600;
  transition:border-color .16s,color .16s,background .16s;
}
.qsteps button:hover{border-color:var(--rule-2);color:var(--ink)}
.qsteps button.on{border-color:var(--accent);color:var(--accent-dk);background:var(--wash)}
.qsteps button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media(max-width:640px){
  .qsteps{padding:16px 20px 0;gap:5px}
  .qsteps button{min-height:44px;padding:0 12px;font-size:12.4px}
}
.js-quiz .qcount{padding-top:14px;font-size:12px}


/* -- the outcome strip, as before -> after -----------------------------------
   A bare number with a sentence fragment under it carried no tension, which is
   why it needed a paragraph of explanation to mean anything. Stating what the
   figure replaced does the work instead, and needs no caveat: these are
   arithmetic about the task, not claimed results. */
.out1{padding:26px 20px 24px}
.out1 .was{
  display:block;font-size:13px;line-height:1.3;color:var(--ink-3);
  text-decoration:line-through;text-decoration-color:var(--rule-2);
  margin-bottom:7px;letter-spacing:.01em;
}
.out1 .was::after{
  content:"";display:block;width:1px;height:10px;margin:5px auto 0;
  background:var(--rule-2);
}
.out1 b{font-size:clamp(23px,2.5vw,30px);letter-spacing:-.02em}
.out1 span:last-child{margin-top:10px;font-size:13.8px;line-height:1.5;max-width:22ch;
  margin-left:auto;margin-right:auto}
.out1 .ib{display:none}


/* the four live tiles carry a one-line job description, so they read as
   applications rather than as a list of names */
.stile .sone{
  display:block;font-family:var(--sans);font-size:13.4px;font-weight:400;
  line-height:1.5;color:var(--ink-3);
}
.sgrid{grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:640px){.sgrid{grid-template-columns:1fr}}
.stile{padding:24px 20px 22px}


/* -- calmer chips ----------------------------------------------------------
   Seven ready modules each filled their platform chip with their own colour,
   so the section read as a row of unrelated brands. The chip now uses the
   module's tint with its colour as text: still colour-coded, no longer
   shouting. */
.rchip{
  color:var(--c);background:var(--t);border:1px solid currentColor;
  font-size:12px;letter-spacing:.08em;padding:5px 12px;
}
.rstate{font-size:12px;letter-spacing:.08em}
.rdy .rone{color:var(--ink-2);font-weight:500}
.rdy .tlink{color:var(--c);border-bottom-color:var(--rule-2)}
.rdy .tlink:hover{border-bottom-color:var(--c)}

/* the live panel's corner tag keeps a solid fill: there are only four, and
   they are the one thing on the page that is genuinely running */
.panel .pshot .tag{border-radius:0 0 var(--r-sm) 0}


/* -- page-header headings were dropping a single word onto its own line ---- */
.phero h1{text-wrap:balance;max-width:24ch;margin-left:auto;margin-right:auto}
.phero .sub{text-wrap:pretty}

/* the hero trust row fits on one line at desktop rather than orphaning an item */
.hero .trust{gap:14px 26px}
.hero .trust span{font-size:14px}
@media(min-width:1100px){.hero .trust{flex-wrap:nowrap}}

/* a dark section's supporting line sat bottom-aligned, leaving a gap under the
   heading it belongs to */
.dark .shead{align-items:start}
.dark .shead p{padding-top:6px}


/* ==========================================================================
   WHATSAPP FLOATING ACTION
   Right edge, above the fold on every page. Collapsed to a circle by default
   so it never covers content; the label appears on hover and pointer focus.
   WhatsApp green is used on purpose — it is the recognised affordance, and it
   is the one place on the site where a colour outside the palette earns its
   keep. Kept clear of the footer and of the mobile drawer's z-index.
   ========================================================================== */
.wafab{
  position:fixed;right:22px;bottom:24px;z-index:70;
  display:inline-flex;align-items:center;gap:0;
  height:56px;min-width:56px;padding:0 16px;border-radius:28px;
  background:#25D366;color:#fff;text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,.18),0 14px 36px rgba(37,211,102,.28);
  transition:gap .26s cubic-bezier(.2,.7,.3,1),padding .26s,box-shadow .22s,transform .22s;
}
.wafab svg{width:26px;height:26px;flex:none;fill:currentColor;stroke:none}
.wafab span{
  max-width:0;overflow:hidden;white-space:nowrap;
  font-family:var(--head);font-size:15px;font-weight:600;
  transition:max-width .3s cubic-bezier(.2,.7,.3,1);
}
.wafab:hover,.wafab:focus-visible{
  gap:11px;transform:translateY(-2px);text-decoration:none;
  box-shadow:0 8px 22px rgba(0,0,0,.2),0 18px 44px rgba(37,211,102,.34);
}
.wafab:hover span,.wafab:focus-visible span{max-width:120px}
.wafab:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* On a phone the label would cover content, so it stays a circle. */
@media(max-width:700px){
  .wafab{right:16px;bottom:18px;padding:0;width:54px;height:54px;min-width:0;
    justify-content:center}
  .wafab span{display:none}
}
@media(prefers-reduced-motion:reduce){
  .wafab,.wafab span{transition:none}
  .wafab:hover{transform:none}
}
@media print{.wafab{display:none}}