/* ============ 0 BASE ============
   Design tokens, element resets and shared utilities from new-html.html.
   Everything here is scoped to <main id="top"> (the wrapper output by the
   flex-content "Raw HTML" layout) so none of it leaks into the rest of the site.
   :where() keeps the resets at element-level specificity, so the section rules
   further down still win. */
#top{
  --navy:#091933; --navy-2:#0f2343; --navy-3:#1a3360; --deep:#06101f;
  --mint:#7cc9a8; --mint-deep:#2b7a5c; --mint-wash:#e8f5ef;
  --blue:#2fa2d4; --blue-deep:#1d6f97;
  --g1:#6ae0b1; --g2:#4eb9ea; --grad:linear-gradient(90deg,var(--g1),var(--g2));
  --paper:#f3f6f9; --white:#ffffff; --line:#dbe3ec; --line-d:rgba(255,255,255,.13);
  --ink:#091933; --muted:#4a5872; --on-n:#e9eff7; --on-n-m:#aebbcd;
  --note:#fff3c4; --note-ink:#5b4400;
  --f:"Titillium Web","Segoe UI",Arial,sans-serif;
  --wrap:1200px; --gl:max(20px,env(safe-area-inset-left,0px)); --gr:max(20px,env(safe-area-inset-right,0px));
  --hh:68px;
  display:block;background:var(--white);color:var(--ink);font:400 18px/1.6 var(--f);-webkit-font-smoothing:antialiased
}
@media (prefers-reduced-motion:reduce){#top *{transition:none!important}}

/* Theme's #wrapper has overflow:hidden, which stops position:sticky (FAQ sidebar) working.
   overflow:clip looks identical but lets sticky work. Only applies on pages with this block. */
#wrapper:has(#top){overflow:clip}

/* Element resets: undo style.css defaults (heading sizes/margins, p/ul margins,
   blockquote border, floated <dt>, link colour) to match the standalone file */
:where(#top) a{color:var(--blue-deep)}
:where(#top) :focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
:where(#top) h1,:where(#top) h2,:where(#top) h3,:where(#top) h4{display:block;font-family:var(--f);font-weight:700;line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.01em}
:where(#top) h2{font-size:1.5em}
:where(#top) h3{font-size:1.17em}
:where(#top) h4{font-size:1em}
:where(#top) p{margin:0}
:where(#top) ul,:where(#top) ol{margin:1em 0;padding-left:40px}
:where(#top) dl{margin:1em 0}
:where(#top) dl dt{float:none;clear:none;padding-right:0;font-weight:inherit}
:where(#top) dl dd{overflow:visible;margin-left:40px}
:where(#top) blockquote{border-left:0;padding-left:0;margin:1em 40px}

/* Form fields: undo style.css input/select/textarea styling (fixed 56px height,
   navy gradient background, white text, no select arrow, 180px !important textarea) */
#top .f input,#top .f select,#top .f textarea{height:auto;line-height:1.6;text-overflow:clip}
#top .f select{-webkit-appearance:menulist;appearance:auto;padding-right:12px}
#top .f textarea{height:auto!important;min-height:90px}

/* Shared utilities */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}
.eb{font:600 .8rem/1.3 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--mint-deep)}
.dark .eb,.hero .eb{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--grad);color:var(--navy);font:700 .72rem/1 var(--f);letter-spacing:.12em;text-transform:uppercase;border-radius:6px;padding:6px 10px}
.h2-xl{font-size:clamp(2.3rem,4.4vw,3.7rem);font-weight:700}
.h2-md{font-size:clamp(1.8rem,2.7vw,2.4rem);font-weight:700}
.h2-sm{font-size:clamp(1.45rem,2vw,1.8rem);font-weight:700}
.lede{font-size:1.18rem;line-height:1.55;color:var(--muted);max-width:60ch;font-weight:400}
.dark .lede{color:var(--on-n-m)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Prototype-only content: review notes, change tags, the "demonstration form"
   notice and internal-only text are hidden (same as the file's #preview mode) */
.rn,.chg,.demo,.int-only{display:none}

/* Buttons (letter-spacing/vertical-align reset the theme's global .btn rule) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:10px;font:700 1.02rem/1 var(--f);text-decoration:none;cursor:pointer;border:0;transition:filter .15s,transform .15s;letter-spacing:normal;vertical-align:middle}
.btn-p{background:var(--grad);color:var(--navy)}
.btn-p:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-s{min-height:42px;padding:0 16px;font-size:.92rem}
.btn-o{background:linear-gradient(var(--navy),var(--navy)) padding-box,var(--grad) border-box;border:2px solid transparent;color:#fff}
.btn-o:hover{color:#fff}
#top .vid-btn:hover{background:none}
.arrow{font-weight:700;text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.arrow::after{content:"→";transition:transform .15s}
.arrow:hover::after{transform:translateX(3px)}

/* expandable "more" */
details.more{margin-top:18px;border-top:1px solid var(--line)}
details.more > summary{list-style:none;cursor:pointer;padding:12px 0;font:700 .95rem var(--f);color:var(--blue-deep);display:flex;gap:8px;align-items:center}
details.more > summary::-webkit-details-marker{display:none}
details.more > summary::after{content:"+";font:700 1.15rem/1 var(--f)}
details.more[open] > summary::after{content:"−"}
details.more .inner{padding-bottom:6px;color:var(--muted);font-size:1rem}
details.more .inner > * + *{margin-top:10px}
.dark details.more{border-color:var(--line-d)}
.dark details.more > summary{color:var(--g1)}
.dark details.more .inner{color:var(--on-n-m)}

/* ============ 1 HERO ============ */
.hero{background:var(--navy);color:var(--on-n);position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"uk quote" "head quote" "strap quote" "cta quote";grid-template-rows:auto auto auto 1fr;column-gap:80px;padding-block:64px 64px}
.h-uk{grid-area:uk;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.h-uk p{font:600 1.02rem/1.3 var(--f);color:#fff}
.h-head{grid-area:head;margin-top:22px}
.hero h1{font-size:clamp(2.6rem,5.2vw,5rem);font-weight:600;color:#fff;line-height:1.04;letter-spacing:-.015em}
.hero h1 .l2{display:block;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
.h-strap{grid-area:strap;margin-top:26px;padding-top:22px;border-top:1px solid var(--line-d)}
.h-strap p{font:400 clamp(1.2rem,1.7vw,1.45rem)/1.4 var(--f);color:#fff;max-width:32ch}
.h-cta{grid-area:cta;display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:28px}
.h-cta .tel{color:#fff;text-decoration:none;font-weight:700;font-size:1.1rem;font-variant-numeric:tabular-nums}
.grating{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line-d);border-radius:10px;background:rgba(255,255,255,.04);color:#fff;text-decoration:none;white-space:nowrap}
a.grating:hover{background:rgba(255,255,255,.08)}
.grating .gstars{color:#fbbc04;letter-spacing:1px;font-size:.95rem}
.grating .gscore{font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums}
.grating .gsrc{font-size:.88rem;color:var(--on-n-m)}
.h-cta .tel small{display:block;font:600 .72rem/1 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--on-n-m);margin-bottom:4px}
.h-intro{color:var(--on-n-m);font-size:1rem;max-width:56ch;min-width:0}
.h-intro p+p{margin-top:10px}
.h-quote{grid-area:quote;align-self:start;position:relative}
.hq{position:relative;background:var(--white);color:var(--ink);border-radius:16px;padding:34px 34px 26px;box-shadow:0 40px 80px -40px rgba(0,0,0,.6);margin:0}
.hq::before{content:"";position:absolute;inset:0 0 auto;height:5px;border-radius:16px 16px 0 0;background:var(--grad)}
.hq .qm{font:700 4.2rem/.6 var(--f);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;height:30px;margin-top:8px}
.hq blockquote{margin:12px 0 0;font:400 1.3rem/1.5 var(--f)}
.hq figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.hq cite{font-style:normal;font-size:.95rem;color:var(--muted)}
.hq cite b{display:block;color:var(--ink);font-weight:700;font-size:1.05rem}
.hq-case{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;margin-top:14px;background:var(--navy-2);color:var(--on-n);border:1px solid var(--line-d);border-radius:14px;padding:14px 18px;text-decoration:none}
.hq-case b{font:600 1.9rem/1 var(--f);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hq-case span{font-size:.95rem;line-height:1.35}
.hq-case span strong{color:#fff;font-weight:700;display:block}
.hq-case i{font-style:normal;color:var(--g1);font-weight:700}
.proofband{background:var(--navy-2);position:relative}
.proofband::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--grad)}
.proofrow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:72px;align-items:center;padding-block:34px 36px}
.proof{display:grid;grid-template-columns:1fr .9fr .8fr 1.1fr;gap:0;min-width:0}
.proof > div{padding:0 22px;min-width:0}
.proof > div:first-child{padding-left:0}
.proof > div + div{border-left:1px solid var(--line-d)}
.proof b{display:block;font:600 1.35rem/1.2 var(--f);color:#fff;font-variant-numeric:tabular-nums}
.proof span{font-size:.9rem;color:var(--on-n-m)}


/* ============ 2 WHY ============ */
.why{padding-block:120px 96px}
.why-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:48px;align-items:end}
.why-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:18px;margin-top:44px}
.d{border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s;min-width:0}
.d:hover{transform:translateY(-2px);box-shadow:0 18px 40px -24px rgba(9,25,51,.45)}
.d h3{font-size:1.4rem;font-weight:700}
.d p{font-size:.98rem;color:var(--muted)}
.d p+p{margin-top:-4px}
.d .ev{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font:700 .95rem var(--f);display:flex;justify-content:space-between;gap:12px;color:var(--ink)}
.d .ev::after{content:"→";color:var(--mint-deep)}
.d.lead{grid-row:span 2;background:var(--navy);color:var(--on-n);padding:34px}
.d.lead h3{font-size:clamp(1.7rem,2.4vw,2.2rem);color:#fff}
.d.lead p{color:var(--on-n-m);font-size:1.02rem}
.d.lead .big{font:700 clamp(2.3rem,3vw,2.8rem)/1.05 var(--f);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.01em}
.d.lead .bigcap{font:600 .78rem/1.3 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--on-n-m);margin-top:-4px}
.d.lead .ev{border-color:var(--line-d);color:#fff}
.d.lead .ev::after{color:var(--g1)}
.d.soft{background:var(--paper)}
.d .k.k-long{font-size:clamp(1.45rem,1.75vw,1.7rem);line-height:1.15;letter-spacing:0;padding-bottom:6px}
.d .k{font:700 clamp(2.2rem,2.6vw,2.6rem)/1.05 var(--f);color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:-.01em;padding-bottom:4px;border-bottom:2px solid transparent;border-image:var(--grad) 1;align-self:flex-start}

/* ============ 3 CASE STUDY ============ */
.cs{background:var(--deep);color:var(--on-n);padding-block:110px 100px}
.cs-intro{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:56px;align-items:end}
.cs-tag{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cs-tag span:last-child{font:600 .9rem var(--f);color:var(--on-n-m);letter-spacing:.04em}
.cs h2{color:#fff;margin-top:18px}
.clip{background:var(--white);color:var(--ink);border-radius:6px;padding:18px 20px;box-shadow:0 20px 40px -20px rgba(0,0,0,.8);max-width:340px;justify-self:end}
.clip .mast{font:700 1.2rem var(--f);border-bottom:2px solid var(--ink);padding-bottom:6px;display:flex;justify-content:space-between;align-items:baseline}
.clip .mast span{font:600 .72rem var(--f);letter-spacing:.1em;color:var(--muted)}
.clip p{font:600 1.02rem/1.35 var(--f);margin-top:10px}
.clip a{font-size:.92rem;margin-top:10px;display:inline-flex}
.cro{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:48px;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.cro div{padding:20px 24px 22px 0}
.cro div+div{padding-left:24px;border-left:1px solid var(--line-d)}
.cro dt{font:700 .78rem var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--g1)}
.cro dd{margin:6px 0 0;color:var(--on-n);font-size:1rem}
.vid{position:relative;margin:56px auto 0;aspect-ratio:16/9;width:100%;max-width:880px;border-radius:18px;overflow:hidden;border:1px solid var(--line-d);box-shadow:0 30px 60px -36px rgba(0,0,0,.8);background:var(--navy)}
.vid-btn{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;inset:0;display:grid;place-items:center}
.vid-btn:focus-visible{outline:3px solid var(--g2);outline-offset:-3px;border-radius:18px}
.vid-thumb{position:absolute;inset:0;background:radial-gradient(120% 90% at 85% 15%,rgba(78,185,234,.20),transparent 55%),radial-gradient(90% 80% at 10% 100%,rgba(106,224,177,.16),transparent 60%),linear-gradient(160deg,#0f2343,#06101f);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(18px,3vw,36px)}
.vid-thumb::after{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--grad)}
.vid-logo{position:absolute;top:clamp(18px,3vw,32px);left:clamp(18px,3vw,36px);width:clamp(76px,9vw,110px);height:auto;color:#fff}
.vid-k{font:700 .74rem/1.3 var(--f);letter-spacing:.14em;text-transform:uppercase;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;align-self:flex-start}
.vid-t{font:600 clamp(1.25rem,2.4vw,2rem)/1.2 var(--f);color:#fff;margin-top:6px}
.vid-play{position:relative;z-index:1;width:clamp(58px,7vw,76px);height:clamp(58px,7vw,76px);border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(9,25,51,.55);border:2px solid transparent;background-clip:padding-box;box-shadow:0 0 0 2px rgba(106,224,177,.85);transition:background .15s}
.vid-btn:hover .vid-play{background:rgba(9,25,51,.8)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-msg{position:absolute;left:50%;bottom:clamp(18px,3vw,36px);transform:translateX(-50%);background:rgba(9,25,51,.85);color:#fff;font:600 .9rem var(--f);padding:8px 14px;border-radius:8px;border:1px solid var(--line-d);white-space:nowrap}
.ba-switch{display:none}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:56px;border:1px solid var(--line-d);border-radius:18px;overflow:hidden}
.ba-panel{padding:36px 36px 34px;min-width:0}
.ba-panel.after{background:linear-gradient(180deg,rgba(106,224,177,.09),rgba(78,185,234,.03));position:relative}
.ba-panel.after::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--g1),var(--g2))}
.ba-panel .lbl{font:700 .78rem var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--on-n-m)}
.ba-panel.after .lbl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ba-panel h3{font-size:clamp(1.6rem,2.4vw,2.1rem);color:#fff;margin-top:8px}
.scene{height:190px;margin:26px 0 22px}
.scene svg{width:100%;height:100%}
.ba-list{list-style:none;padding:0;margin:0}
.ba-list li{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:11px 0;border-top:1px solid var(--line-d);font-size:1rem}
.ba-list li b{font:700 .76rem/1.7 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--on-n-m)}
.before .ba-list li span{color:var(--on-n-m)}
.after .ba-list li span{color:#fff}
.cs-quote{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;margin-top:72px;align-items:start}
.cs-quote blockquote{margin:0;font:600 clamp(1.8rem,3.3vw,2.8rem)/1.15 var(--f);color:#fff;letter-spacing:-.015em}
.cs-quote blockquote .m{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cs-quote figcaption{margin-top:20px;color:var(--on-n-m);font-size:1rem}
.sec-cta{margin-top:44px;display:flex}
.chips{list-style:none;padding:0;margin:12px 0 22px;display:flex;flex-wrap:wrap;gap:6px}
.chips li{font-size:.88rem;border:1px solid var(--line-d);border-radius:999px;padding:4px 11px;color:var(--on-n)}
.cs a:not(.btn){color:var(--g1)}

/* ============ 4 SERVICE ============ */
.svc{padding-block:96px}
.svc-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:64px;align-items:start}
.svc .prose > p:not(.eb){color:var(--muted);margin-top:14px}
.svc .prose > p.first{font-size:1.18rem;line-height:1.55}
.svcbox{background:var(--paper);border-radius:16px;padding:32px}
.svcbox h2{margin-top:8px}
.incl{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:0 28px;border-top:2px solid var(--ink)}
.incl li{padding:10px 0 10px 24px;border-bottom:1px solid var(--line);font-size:.98rem;position:relative}
.incl li::before{content:"";position:absolute;left:2px;top:17px;width:11px;height:6px;border-left:2px solid var(--mint-deep);border-bottom:2px solid var(--mint-deep);transform:rotate(-45deg)}
.svcbox .fitp{margin-top:18px;font-size:1rem;color:var(--muted)}
.asks{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.asks li{font:600 .9rem var(--f);background:var(--white);border:1px solid var(--line);border-radius:999px;padding:4px 12px;color:var(--ink)}

/* ============ 5 DEADLINES + CHALLENGES ============ */
.dl{background:var(--paper);padding-block:96px 90px}
.dl-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end}
.metrics{display:flex;border-left:1px solid var(--line)}
.metrics div{padding:0 26px;border-right:1px solid var(--line)}
.metrics b{display:block;font:600 2.2rem/1.05 var(--f);color:var(--navy);font-variant-numeric:tabular-nums}
.metrics b small{font-size:.42em;margin-left:3px;color:var(--muted);font-weight:600}
.metrics span{font-size:.88rem;color:var(--muted)}
.curve{margin:40px 0 0;background:var(--white);border-radius:16px;padding:22px 24px 14px;border:1px solid var(--line)}
.curve svg{width:100%;height:auto;display:block}
.curve .ax{font:600 11px var(--f);letter-spacing:.12em;fill:#6b7a92}
.curve .lb{font:700 14px var(--f);fill:#091933}
.curve .lbs{font:400 12.5px var(--f);fill:#4a5872}
.curve-key{display:none}
.curve-cap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.88rem;color:var(--muted);padding-top:10px}
.dl-copy{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:28px;color:var(--muted);font-size:1rem}
.dl-copy p+p{margin-top:10px}
/* ============ 5b CHALLENGES (dark selector) ============ */
.chs{background:var(--navy);color:var(--on-n);padding-block:104px;position:relative}
.chs::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--grad)}
.chs-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:end}
.chs h2{color:#fff;margin-top:12px}
.chs-top .lede{font-size:1.02rem}
.chs-top .lede p+p{margin-top:8px}
.chx{margin-top:48px;background:var(--navy-2);border:1px solid var(--line-d);border-radius:18px;overflow:hidden;counter-reset:ch}
.ch{border-top:1px solid var(--line-d)}
.ch h3{counter-increment:ch}
.ch:first-child{border-top:0}
.ch h3{margin:0;font-size:1rem}
.ch-btn{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:20px 24px;font:600 1.08rem/1.3 var(--f);color:var(--on-n-m);position:relative;transition:background .15s,color .15s}
.ch-btn::before{content:counter(ch,decimal-leading-zero);font:600 .8rem var(--f);letter-spacing:.1em;color:var(--on-n-m)}
.ch-btn .ind{visibility:hidden}
.js .ch-btn .ind{visibility:visible}
.ch-btn .ind::before{content:"+"}
.js .ch.open .ch-btn .ind::before{content:"−"}
.ch-btn .ind{width:22px;height:22px;border-radius:50%;border:1px solid var(--line-d);display:grid;place-items:center;font:600 .9rem/1 var(--f);color:var(--on-n-m)}
.ch-btn:hover{color:#fff;background:rgba(255,255,255,.03)}
.ch-btn:focus-visible{outline:3px solid var(--g2);outline-offset:-3px;border-radius:0}
.ch-body{padding:6px 24px 28px 70px;min-width:0}
.ch-body .eb{display:block}
.ch-body .big{font:400 clamp(1.3rem,1.9vw,1.6rem)/1.4 var(--f);color:#fff;margin-top:12px;max-width:40ch}
.ch-body .rest p{color:var(--on-n-m);margin-top:12px;max-width:58ch}
.ch-foot{margin-top:28px;padding-top:18px;border-top:1px solid var(--line-d);display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between}
.ch-foot a{color:var(--g1)}
.ch-foot span{font-size:.9rem;color:var(--on-n-m)}
.js .ch[aria-current] .ch-btn,.js .ch.open .ch-btn{color:#fff;background:rgba(255,255,255,.04)}
.js .ch.open .ch-btn::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--g1),var(--g2))}
.js .ch.open .ch-btn::before{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.js .ch.open .ch-btn .ind{background:var(--grad);border-color:transparent;color:var(--navy)}
.js .ch:not(.open) .ch-body{display:none}
.chs-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin-top:32px}
.chs-cta p{font:600 1.15rem var(--f);color:#fff}
.chs-cta .tel{color:#fff;font-weight:700;text-decoration:none;font-variant-numeric:tabular-nums;margin-left:18px}
@media (min-width:901px){
  .js .chx{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);grid-template-rows:repeat(6,auto) 1fr;align-items:stretch}
  .js .chx::after{content:"";grid-column:1;grid-row:7;border-right:1px solid var(--line-d);border-top:1px solid var(--line-d)}
  .js .ch{display:contents}
  .js .ch h3{grid-column:1;border-right:1px solid var(--line-d);border-top:1px solid var(--line-d)}
  .js .ch:first-child h3{border-top:0}
  .js .ch-body{grid-column:2;grid-row:1 / span 7;padding:48px 52px;background:linear-gradient(160deg,rgba(106,224,177,.06),rgba(78,185,234,.02) 60%)}
}


/* ============ 6 SECURITY ============ */
.sec6{padding-block:100px}
.sec-grid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:64px;align-items:start}
.rings{width:100%;max-width:360px;height:auto;display:block}
.rings .r1{fill:#e3eaf2}.rings .r2{fill:#cbd8e6}.rings .r3{fill:#a9bdd4}.rings .r4{fill:#2c4a76}.rings .r5{fill:#102548}
.rings text{font-family:var(--f);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-anchor:middle}
.rings .td{fill:#091933}.rings .tl{fill:#fff}
.rings .tc{font-size:13px;letter-spacing:0;text-transform:none;fill:#091933}
.sec6 .prose > p:not(.eb):not(.rn){color:var(--muted);margin-top:12px}
.sec6 .prose > p.lede{margin-top:16px}
.ctrl{display:grid;grid-template-columns:1fr 1fr;gap:24px 32px;margin-top:28px}
.ctrl .eb{padding-bottom:8px;border-bottom:1px solid var(--line);display:block}
.ctrl ul{list-style:none;padding:0;margin:8px 0 0;font-size:.98rem}
.ctrl li{padding:3px 0}
.hmrc{margin-top:32px;background:var(--navy);color:var(--on-n);border-radius:16px;padding:26px 28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:28px;position:relative;overflow:hidden}
.hmrc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--g1),var(--g2))}
.hmrc h3{color:#fff;font-size:1.35rem}
.hmrc p{color:var(--on-n-m);font-size:.98rem;margin-top:8px}
.hmrc ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:.98rem}
.hmrc li{padding-left:22px;position:relative}
.hmrc li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;border-radius:3px;background:var(--grad)}
.links-row{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:16px}

/* ============ 7 SOFTWARE + M365 ============ */
.pair{background:var(--paper);padding-block:96px}
.pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.pcol{background:var(--white);border-radius:16px;padding:34px;border:1px solid var(--line);min-width:0;display:flex;flex-direction:column}
.pcol h2{margin-top:10px}
.pcol .lede{font-size:1.05rem;margin-top:14px}
.stack{margin-top:24px;display:grid;gap:5px}
.stack .vendor{border:2px solid var(--ink);border-radius:10px;padding:10px 14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.stack .vendor .eb{margin-right:auto;color:var(--muted)}
.stack .vendor .lg{border:1px solid var(--line);background:var(--paper);border-radius:6px;padding:5px 12px;color:var(--navy)}
.lg{font:700 .85rem var(--f);border:1.5px dashed #9fb0c6;border-radius:6px;padding:5px 10px;background:repeating-linear-gradient(135deg,#f7f9fb 0 8px,#eef2f6 8px 16px);color:var(--ink)}
.stack .line{font:700 .72rem var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--mint-deep);display:flex;gap:10px;align-items:center;padding:4px 0}
.stack .line::before,.stack .line::after{content:"";flex:1;height:2px;background:var(--grad);opacity:.7}
.stack .ly{display:grid;grid-template-columns:120px 1fr;gap:12px;background:var(--navy);color:var(--on-n-m);border-radius:8px;padding:9px 14px;font-size:.9rem}
.stack .ly:nth-child(odd){background:var(--navy-2)}
.stack .ly b{color:#fff;font-weight:700}
.flow{margin-top:24px;display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.flow .c{display:grid;gap:6px}
.flow .n{border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:.92rem;background:var(--white)}
.flow .apps .n{border-left:3px solid var(--g2)}
.flow .g{background:var(--navy);color:#fff;border-radius:12px;padding:14px 12px;text-align:center;font:700 .95rem/1.3 var(--f);width:122px}
.flow .g small{display:block;font:700 .66rem var(--f);letter-spacing:.1em;color:var(--g1);margin-top:6px;text-transform:uppercase}
.pcol .talk{margin-top:16px}

/* ============ 8 SWITCHING ============ */
.swi{background:var(--navy);color:var(--on-n);padding-block:110px 100px}
.sw-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:end}
.swi h2{color:#fff;margin-top:14px}
.promise{display:grid;gap:14px}
.promise div{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;font-size:1.02rem}
.promise i{width:28px;height:28px;border-radius:50%;background:var(--grad);color:var(--navy);display:grid;place-items:center;font:700 .85rem var(--f);font-style:normal}
.promise b{color:#fff;font-weight:700}
.tl{margin-top:56px;background:var(--navy-2);border-radius:18px;padding:30px 30px 26px;overflow-x:auto}
.tl-grid{display:grid;grid-template-columns:150px repeat(4,minmax(0,1fr));row-gap:14px;min-width:720px}
.tl-grid .ph{padding:0 12px 10px;border-bottom:1px solid var(--line-d)}
.tl-grid .ph b{display:block;font:700 1.05rem var(--f);color:#fff}
.tl-grid .ph span{font-size:.88rem;color:var(--on-n-m);display:block;margin-top:4px;line-height:1.4}
.tl-grid .ov,.tl-grid .ovb{background:rgba(106,224,177,.08)}
.tl-grid .ov{border-radius:10px 10px 0 0}
.tl-grid .ovb.last{border-radius:0 0 10px 10px}
.tl-grid .rl{font:700 .98rem var(--f);color:#fff;display:flex;align-items:center}
.cell{display:flex;align-items:center;padding:4px 0}
.bar{height:34px;width:100%;display:flex;align-items:center;padding:0 14px;font:600 .88rem var(--f);white-space:nowrap;overflow:hidden}
.bar.old{background:#3d5277;color:#fff}
.bar.old.end{border-radius:0 17px 17px 0;width:80%}
.bar.prep{border:1.5px dashed var(--g1);color:var(--g1);border-radius:17px;margin:0 8px}
.bar.go{background:var(--grad);color:var(--navy);font-weight:700}
.bar.go.st{border-radius:17px 0 0 17px;margin-left:10%}
.bar.go.en{border-radius:0 17px 17px 0}
.sw-bottom{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;margin-top:48px;align-items:start}
.tq{margin:0;padding-left:24px;position:relative}
.tq::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--g1),var(--g2));border-radius:2px}
.tq p{font:600 1.35rem/1.42 var(--f);color:#fff}
.tq figcaption{margin-top:12px;color:var(--on-n-m);font-size:.95rem}
.tq figcaption b{color:var(--g1)}
.sw-links{display:grid;gap:10px;margin-top:8px}
.swi a:not(.btn){color:var(--g1)}

/* ============ 9 VOICES + PARTNERS ============ */
.voices{padding-block:100px 84px}
.v-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:48px;align-items:end}
.v-head .lede{font-size:1.02rem}
.v-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;align-items:start;margin-top:40px}
.v-big{margin:0}
.v-big blockquote{margin:0;font:600 clamp(1.55rem,2.6vw,2.2rem)/1.28 var(--f);letter-spacing:-.01em}
.v-big blockquote::before{content:"“";display:block;font:700 4rem/.6 var(--f);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;height:36px}
.v-big figcaption{margin-top:18px;font-size:1rem;color:var(--muted)}
.v-big figcaption b{color:var(--ink)}
.v-small{display:grid;gap:22px}
.v-small figure{margin:0;padding:0 0 22px;border-bottom:1px solid var(--line)}
.v-small blockquote{margin:0;font-size:1.05rem}
.v-small figcaption{margin-top:10px;font-size:.92rem;color:var(--muted)}
.v-small b{color:var(--ink)}
.partners{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px;align-items:center;margin-top:64px;padding-top:28px;border-top:1px solid var(--line)}
.partners p{font-size:.98rem;color:var(--muted);margin-top:6px}
.plogos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:22px 28px;align-items:center}
.plogos li{display:flex;align-items:center;justify-content:center;height:52px;min-width:0}
.plogos img{display:block;width:auto;height:auto;max-width:100%;max-height:40px;object-fit:contain}
.plogos img[src*="Cyber-small"]{max-height:52px}

/* ============ 10 FAQ ============ */
.faq{background:var(--paper);padding-block:100px}
.faq-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:64px;align-items:start}
.faq-side{position:sticky;top:calc(var(--hh) + 40px)}
.faq-side p{color:var(--muted);margin-top:14px}
.ask{margin-top:26px;background:var(--white);border-radius:14px;padding:20px;border:1px solid var(--line)}
.ask b{display:block;font:700 1.45rem var(--f);font-variant-numeric:tabular-nums}
.ask span{font-size:.9rem;color:var(--muted)}
.fq-group+.fq-group{margin-top:30px}
.fq-group .eb{display:block;margin-bottom:4px}
.fq{border-bottom:1px solid var(--line)}
.fq summary{list-style:none;cursor:pointer;padding:16px 36px 16px 0;position:relative;font:700 1.08rem/1.35 var(--f)}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"";position:absolute;right:6px;top:22px;width:9px;height:9px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);transition:transform .2s}
.fq[open] summary::after{transform:rotate(-135deg);top:26px}
.fq .a{padding:0 0 18px;color:var(--muted);font-size:1rem}
.fq .a p+p{margin-top:8px}
.newtag{display:none}
.review .newtag{display:inline;font:700 .62rem var(--f);letter-spacing:.08em;color:var(--blue-deep);background:#e3f1f9;border-radius:3px;padding:2px 6px;margin-left:8px;vertical-align:3px}

/* ============ 11 ENQUIRY ============ */
.enq{background:var(--navy);color:var(--on-n);padding-block:110px}
.enq-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:64px;align-items:start}
.enq h2.h2-xl{color:#fff;font-size:clamp(2.1rem,3.5vw,3rem)}
.enq .copy p{color:var(--on-n-m);margin-top:14px}
.enq .copy p.lede{margin-top:18px}
.steps3{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:18px;counter-reset:n}
.steps3 li{display:grid;grid-template-columns:40px 1fr;gap:14px;counter-increment:n}
.steps3 li::before{content:counter(n);width:40px;height:40px;border-radius:10px;background:var(--grad);color:var(--navy);display:grid;place-items:center;font:700 1.1rem var(--f)}
.steps3 b{display:block;color:#fff;font:700 1.08rem var(--f)}
.steps3 span{font-size:.96rem;color:var(--on-n-m)}
.talk3{margin-top:30px;padding-top:22px;border-top:1px solid var(--line-d)}
.talk3 h3{color:#fff;font-size:1.25rem}
.talk3 p{color:var(--on-n-m);font-size:.98rem;margin-top:8px}
.talk3 > p:first-child{margin-top:0}
.cc{display:flex;flex-wrap:wrap;gap:20px 40px;margin-top:22px;font-size:.95rem;color:var(--on-n-m)}
.cc b{display:block;color:#fff;font:700 1.4rem var(--f);font-variant-numeric:tabular-nums}
.enq .copy a:not(.btn){color:var(--g1)}
.form{background:var(--white);color:var(--ink);border-radius:18px;padding:34px;box-shadow:0 40px 80px -40px rgba(0,0,0,.7);position:relative;overflow:hidden}
.form::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:var(--grad)}
.demo{background:var(--note);color:var(--note-ink);font-size:.84rem;padding:7px 12px;border-radius:8px;margin-bottom:18px}
.form .form-k{font:700 .78rem/1.3 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--mint-deep)}
.form .form-t{font-size:1.65rem;color:var(--ink);margin-top:8px}
.form .req{font-size:.85rem;color:var(--muted);margin-top:8px}
.form .sub{color:var(--muted);font-size:.98rem;margin-top:6px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.f{display:flex;flex-direction:column;gap:5px;min-width:0}
.f.full{grid-column:1/-1}
.f label{font-weight:700;font-size:.92rem}
.f label span{font-weight:400;color:var(--muted)}
.f input,.f select,.f textarea{font:400 1rem var(--f);color:var(--ink);background:#fff;border:1.5px solid #b9c5d4;border-radius:10px;padding:11px 12px;width:100%}
.f textarea{min-height:90px;resize:vertical}
.f .err{color:#b42318;font-size:.85rem}
.chk{grid-column:1/-1;display:flex;gap:10px;font-size:.9rem;color:var(--muted)}
.chk input{width:18px;height:18px;margin-top:3px;flex:none}
.form .btn{width:100%;margin-top:18px}
.form .pv{font-size:.84rem;color:var(--muted);margin-top:10px}
.done{margin-top:14px;padding:16px;border-radius:10px;background:var(--mint-wash);font-size:.95rem}
.done b{display:block;font:700 1.08rem var(--f)}
.whyb{margin-top:22px;background:var(--navy-2);border:1px solid var(--line-d);border-radius:16px;padding:22px 24px}
.whyb h3{color:#fff;font-size:1.15rem}
.whyb ul{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:6px;font-size:.95rem;color:var(--on-n)}
.whyb li{padding-left:20px;position:relative}
.whyb li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:2px;background:var(--grad)}
/* ============ RESPONSIVE ============
   From new-html.html. Rules for the prototype's own header, mobile nav, footer
   and sticky call bar are left out (those parts aren't in the Raw HTML block). */
@media (max-width:1080px){
  .why-grid{grid-template-columns:1fr 1fr}
  .d.lead{grid-row:auto;grid-column:1/-1}
  .sec-grid{grid-template-columns:300px minmax(0,1fr);gap:40px}
  .hero-grid{column-gap:48px}
  .proofrow{column-gap:48px}
  .proof{grid-template-columns:1fr 1fr}
  .proof > div{padding:12px 16px 12px 0}
  .proof > div:nth-child(odd){padding-left:0;border-left:0}
  .proof > div:nth-child(even){padding-left:16px}
  .proof > div:nth-child(n+3){border-top:1px solid var(--line-d)}
  .proof > div:nth-child(-n+2){padding-top:0}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;grid-template-areas:"uk" "head" "strap" "cta" "quote";grid-template-rows:none;padding-block:34px 40px}
  .h-quote{margin:36px 0 0;align-self:auto}
  .why-top,.cs-intro,.cs-quote,.svc-grid,.dl-top,.dl-copy,.chs-top,.sec-grid,.pair-grid,.sw-top,.sw-bottom,.v-head,.v-grid,.partners,.faq-grid,.enq-grid,.hmrc{grid-template-columns:1fr}
  .why{padding-block:88px}
  .proofrow{grid-template-columns:1fr;row-gap:26px;padding-block:28px 30px}
  .proof{grid-template-columns:1fr 1fr}
  .proof > div{padding:14px 14px 14px 0}
  .proof > div:nth-child(-n+2){padding-top:0}
  .proof > div:nth-child(odd){padding-left:0;border-left:0}
  .proof > div:nth-child(even){padding-left:14px}
  .proof > div:nth-child(n+3){border-top:1px solid var(--line-d)}
  .clip{justify-self:start}
  .faq-side{position:static}
  .sec-grid > figure{order:2}
  .metrics{border-left:0}
  .metrics div:first-child{padding-left:0}
  .rings{max-width:260px;margin-inline:auto}
}
@media (max-width:640px){
  #top{font-size:17px;--hh:60px}
  .h-uk p{font-size:.95rem}
  .hero h1{font-size:clamp(2.4rem,10.5vw,3rem)}
  .h-head{margin-top:18px}
  .h-strap{margin-top:22px;padding-top:18px}
  .h-strap p{font-size:1.12rem}
  .h-cta{margin-top:20px}
  .h-cta .btn{width:100%}
  .hq{padding:24px 20px 18px;border-radius:14px}
  .hq .qm{font-size:3.4rem;height:24px}
  .hq blockquote{font-size:1.08rem}
  .hq-case b{font-size:1.6rem}
  .why,.svc,.dl,.sec6,.pair,.voices,.faq{padding-block:64px}
  .chs{padding-block:72px}
  .ch-btn{padding:18px 18px;grid-template-columns:30px 1fr auto;font-size:1.02rem}
  .ch-body{padding:0 18px 24px 18px}
  .ch-body .big{font-size:1.2rem}
  .chs-cta .btn{width:100%}
  .chs-cta .tel{margin-left:0}
  .cs,.swi,.enq{padding-block:72px}
  .why-grid{grid-template-columns:1fr;gap:12px}
  .d{padding:22px;border-radius:14px}
  .d.lead{padding:26px}
  .d.soft p{display:none}
  .d .k{font-size:2.2rem}
  .d.lead .big{font-size:2.4rem}
  .cro{grid-template-columns:1fr}
  .cro div,.cro div+div{padding:14px 0;border-left:0}
  .cro div+div{border-top:1px solid var(--line-d)}
  .ba-switch{display:flex;margin-top:32px;background:var(--navy-2);border-radius:999px;padding:4px;gap:4px}
  .ba-switch button{all:unset;flex:1;text-align:center;padding:10px 0;border-radius:999px;font:700 .95rem var(--f);color:var(--on-n-m);cursor:pointer}
  .ba-switch button[aria-pressed="true"]{background:var(--grad);color:var(--navy)}
  .ba-switch button:focus-visible{outline:3px solid var(--blue)}
  .ba{grid-template-columns:1fr;margin-top:14px;border-radius:16px}
  .vid{margin-top:36px;border-radius:14px}
  .vid-play{transform:translateY(-26px)}
  .vid-logo{width:64px}
  .js .ba[data-show="after"] .before,.js .ba[data-show="before"] .after{display:none}
  .ba-panel.after::before{display:none}
  .ba-panel{padding:24px 20px}
  .scene{height:150px;margin:16px 0}
  .ba-list li{grid-template-columns:1fr;gap:2px}
  .cs-quote{margin-top:48px;gap:28px}
  .svcbox{padding:22px 18px}
  .incl{grid-template-columns:1fr}
  .incl li{padding:7px 0 7px 24px;font-size:.95rem}
  .incl li::before{top:14px}
  .metrics{flex-wrap:wrap;gap:16px 0}
  .metrics div{flex:1 1 30%;padding:0 10px}
  .metrics b{font-size:1.8rem}
  .curve{padding:14px 12px 10px}
  .curve .lb,.curve .lbs,.curve .conn{display:none}
  .curve-key{display:grid;gap:6px;list-style:none;padding:12px 0 4px;margin:0;font-size:.95rem;color:var(--muted);border-top:1px solid var(--line)}
  .curve-key b{color:var(--ink);margin-right:6px}
  .ctrl{grid-template-columns:1fr;gap:18px}
  .pcol{padding:24px 20px;border-radius:14px}
  .flow{grid-template-columns:1fr}
  .flow .g{width:auto}
  .tl{padding:22px 18px;overflow:visible}
  .tl-grid{display:block;min-width:0}
  .tl-grid > div:first-child,.tl-grid .rl,.tl-grid .cell{display:none}
  .tl-grid .ph{position:relative;border-bottom:0;padding:0 0 18px 26px;border-left:2px solid var(--navy-3);margin-left:6px}
  .tl-grid .ph:last-of-type{padding-bottom:0}
  .tl-grid .ph::before{content:"";position:absolute;left:-7px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--navy-3)}
  .tl-grid .ph.ov{background:none;border-left-color:var(--g1)}
  .tl-grid .ph.ov::before,.tl-grid .ph:last-of-type::before{background:var(--grad)}
  .v-big blockquote{font-size:1.4rem}
  .fields{grid-template-columns:1fr}
  .form{padding:26px 18px;border-radius:16px}
  .sec-cta .btn{width:100%}
  .sec-cta{margin-top:32px}
}