/* ===========================================================
   XSPECT — shared stylesheet
   Brand: cyan #03ddd1 / #05c4b2 · navy #1b2c39 · cream #f3efee
   Display: Archivo (condensed heavy caps) · Body: Inter
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,100..125,600..900;1,100..125,800&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');

:root{
  --cyan:#18ded2;
  --cyan-2:#11c7bc;
  --cyan-deep:#039e94;
  --navy:#212d3b;
  --navy-2:#18222e;
  --ink:#0c1820;
  --cream:#f3efee;
  --cream-2:#f6f3ed;
  --paper:#ffffff;
  --grey:#8a99a2;
  --line:rgba(27,44,57,.12);
  --amber:#f5871f;

  --wrap:1180px;
  --pad:clamp(20px,5vw,64px);

  --display:'Archivo',system-ui,sans-serif;
  --body:'Poppins',system-ui,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  color:var(--navy);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(64px,9vw,128px)}

/* ---------- display type (Akira-style: wide, squared, heavy) ---------- */
/* ---------- STANDARDISED HEADING TYPE SCALE ----------
   One consistent system used by every heading on the site.
   Tiers: --fs-hero (page H1) > --fs-h2 (section) > --fs-h3 (sub) > --fs-h4 */
:root{
  --fs-hero:clamp(2.2rem,4.6vw,3.6rem);   /* page hero H1 */
  --fs-h2:clamp(1.9rem,3.6vw,3rem);       /* section headings */
  --fs-h3:clamp(1.25rem,2vw,1.6rem);      /* sub headings */
  --fs-h4:1.1rem;                          /* small headings */
  --hd-stretch:115%;                       /* single expanded width everywhere */
}
h1,h2,h3,.display{
  font-family:var(--display);
  font-weight:900;
  font-stretch:var(--hd-stretch);
  font-variation-settings:'wdth' 115,'wght' 900;
  letter-spacing:.005em;
  line-height:1.0;
  text-transform:uppercase;
}
.eyebrow{
  font-family:var(--display);
  font-weight:800;
  font-stretch:var(--hd-stretch);
  font-variation-settings:'wdth' 115,'wght' 800;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.74rem;
}
p{max-width:60ch}

/* ===========================================================
   Chevron / parallelogram building blocks
   =========================================================== */
.chev{display:inline-flex;gap:.05em;line-height:0}
.chev svg{width:.62em;height:.62em}

/* slanted parallelogram button */
.btn{
  --skew:-14deg;
  position:relative;
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--display);
  font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  font-size:.86rem;
  padding:.92em 1.5em;
  color:#fff;
  cursor:pointer;border:0;
  isolation:isolate;
  transition:transform .35s var(--ease-out),color .3s;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--navy);
  transform:skewX(var(--skew));
  transition:background .3s,transform .35s var(--ease-out);
}
.btn .ar{display:inline-flex;transition:transform .35s var(--ease-out)}
.btn:hover{transform:translateY(-2px)}
.btn:hover .ar{transform:translateX(4px)}
.btn:hover::before{background:var(--ink)}
.btn--cyan{color:var(--navy)}
.btn--cyan::before{background:var(--cyan)}
.btn--cyan:hover::before{background:var(--cyan-2)}
.btn--ghost{color:var(--navy)}
.btn--ghost::before{background:#fff;box-shadow:inset 0 0 0 1px rgba(27,44,57,.18)}
.btn--ghost:hover::before{background:#fff;box-shadow:inset 0 0 0 1.5px var(--navy)}
.btn:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

/* ===========================================================
   Header / nav
   =========================================================== */
.site-head{
  position:sticky;top:0;z-index:60;
  transition:background .4s,box-shadow .4s,padding .4s;
  padding-block:14px;
}
.site-head.on-cyan{background:transparent}
.site-head.scrolled{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--line),0 8px 30px rgba(12,24,32,.06);
}
.nav{display:flex;align-items:center;gap:clamp(18px,3vw,40px)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:900;font-size:1.5rem;letter-spacing:-.02em}
.brand .mk{width:40px;height:34px;flex:none}
.brand .x{color:var(--cyan)}
.brand-logo{height:38px;width:auto;display:block}
.scrolled .brand-logo{height:34px}
.foot-brand .brand-logo{height:42px}
.foot-brand .foot-logo{height:clamp(34px,3.4vw,44px);width:auto}
@media(max-width:560px){.brand-logo{height:32px}}
.nav-links{display:flex;gap:clamp(12px,1.8vw,26px);margin-left:auto;font-weight:600;font-size:.92rem}
.nav-links a{position:relative;padding:6px 2px;opacity:.9;transition:opacity .25s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--cyan-2);transition:width .3s var(--ease-out)}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{width:100%}
.nav-cta{display:flex;gap:10px;margin-left:8px;padding-right:6px}
.nav .btn{font-size:.78rem;padding:.7em 1.1em}
/* ensure the skewed button background never clips at the header edge */
.site-head .wrap.nav{overflow:visible}
.burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;width:42px;height:42px;flex-direction:column;gap:5px;justify-content:center;align-items:center}
.burger span{width:24px;height:2.5px;background:var(--navy);transition:.3s}
.burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ===========================================================
   Hero
   =========================================================== */
.hero{position:relative;overflow:hidden;color:var(--navy)}
.hero--cyan{background:var(--cyan)}
.hero--navy{background:var(--navy);color:#fff}
.hero__stripes{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__inner{position:relative;z-index:2;padding-block:clamp(40px,7vw,92px)}
.hero h1{font-size:clamp(3.1rem,9vw,7rem)}
.hero--cyan h1{color:var(--navy)}
.hero__lead{font-family:var(--body);font-weight:500;font-size:clamp(1rem,1.4vw,1.18rem);max-width:34ch;margin-top:1.4rem}
.hero--cyan .hero__lead{color:rgba(27,44,57,.86)}

/* diagonal animated stripes used on cyan blocks */
.stripes{position:absolute;inset:-20% -10%;z-index:0;pointer-events:none;opacity:.5}
.stripes span{
  position:absolute;top:-30%;height:160%;width:11%;
  background:rgba(255,255,255,.14);
  transform:skewX(-18deg);
  animation:slide 9s linear infinite;
}
@keyframes slide{from{transform:translateX(0) skewX(-18deg)}to{transform:translateX(140px) skewX(-18deg)}}

/* ===========================================================
   Reveal animation system
   =========================================================== */
.has-js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.has-js .reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
.reveal.d5{transition-delay:.40s}.reveal.d6{transition-delay:.48s}
.has-js .reveal-x{opacity:0;transform:translateX(-30px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.has-js .reveal-x.in{opacity:1;transform:none}

/* line-by-line hero headline wipe */
.line-mask{display:block;overflow:hidden}
.line-mask>span{display:block}
/* animate in only when JS confirms it can (adds .has-js to <html>) */
.has-js .line-mask>span{transform:translateY(105%);transition:transform .9s var(--ease-out)}
.has-js .loaded .line-mask>span{transform:none}
.has-js .loaded .line-mask:nth-child(2)>span{transition-delay:.09s}
.has-js .loaded .line-mask:nth-child(3)>span{transition-delay:.18s}
.has-js .loaded .line-mask:nth-child(4)>span{transition-delay:.27s}

/* ===========================================================
   Generic sections
   =========================================================== */
.kicker{display:flex;align-items:center;gap:.6em;color:var(--cyan-deep);margin-bottom:1.2rem}
.kicker .bar{width:30px;height:3px;background:var(--cyan-2)}
.h-sec{font-size:var(--fs-h2);max-width:18ch}
.lead{font-size:1.05rem;color:rgba(27,44,57,.78)}

/* feature row (icon ticks) */
.ticks{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
.tick{display:flex;gap:14px;align-items:flex-start}
.tick .ic{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--cyan);color:var(--navy);box-shadow:0 0 0 0 rgba(3,221,209,.5)}
.tick h4{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1rem;letter-spacing:.01em}
.tick p{font-size:.93rem;color:rgba(27,44,57,.72);margin-top:.3rem}

/* ===========================================================
   Feature cards (Platform "6 cards")
   =========================================================== */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3vw,40px)}
.fcard{position:relative}
.fcard .chip{
  position:relative;background:#fff;border-radius:14px;padding:16px;
  box-shadow:0 18px 40px -22px rgba(12,24,32,.45);
  border:1px solid var(--line);
  transition:transform .5s var(--ease-out),box-shadow .5s;
}
.fcard:hover .chip{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 30px 60px -26px rgba(12,24,32,.5)}
.chip__row{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;color:var(--grey);font-weight:600}
.chip__big{font-family:var(--display);font-weight:800;font-size:1.9rem;color:var(--navy);margin:.1rem 0 .8rem}
.chip__stat{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;font-weight:700;border-radius:7px;padding:7px 10px;margin-top:6px;color:#fff}
.chip__stat.s1{background:var(--cyan-2)}
.chip__stat.s2{background:#eef3f4;color:var(--navy)}
.chip__stat.s3{background:#fff;color:var(--navy);border:1px solid var(--line)}
.fcard h3{font-size:1.45rem;margin:1.3rem 0 .5rem}
.fcard p{font-size:.94rem;color:rgba(27,44,57,.72)}

/* ===========================================================
   "How we think" card grid (About)
   =========================================================== */
.think{background:var(--cream);}
.think-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)}
.tcard{
  position:relative;overflow:hidden;border-radius:16px;
  min-height:230px;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform .5s var(--ease-out)}
.tcard:hover{transform:translateY(-6px)}
.tcard .arrows{position:absolute;top:20px;right:18px;color:#fff;opacity:.85;transition:transform .5s var(--ease-out)}
.tcard:hover .arrows{transform:translateX(6px)}
.tcard.cyan{background:var(--cyan)}
.tcard.cyan .arrows{color:#fff}
.tcard.navy{background:var(--navy);color:#fff}
.tcard h4{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.2rem;line-height:1.02}
.tcard.cyan h4{color:var(--navy)}
.tcard p{font-size:.9rem;margin-top:.5rem;color:rgba(255,255,255,.82)}
.tcard.cyan p{color:rgba(27,44,57,.8)}

/* ===========================================================
   Split content blocks
   =========================================================== */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.split--reverse{direction:rtl}.split--reverse>*{direction:ltr}
.mock{
  border-radius:18px;background:#dfe4e6;aspect-ratio:4/3;width:100%;
  border:1px solid var(--line);position:relative;overflow:hidden;
}
.mock--cyanframe{padding:14px;background:var(--cyan);border:0}
.mock--cyanframe .inner{width:100%;height:100%;background:#d9dee0;border-radius:8px}

/* dark workflow block */
.workblock{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.workblock .h-sec{color:#fff}
.iso{position:absolute;right:-4%;top:50%;transform:translateY(-50%);width:46%;max-width:560px;opacity:.95;pointer-events:none}

/* config card on workblock */
.cfg-card{
  background:var(--cyan);border-radius:18px;padding:22px;color:var(--navy);
  max-width:330px;position:relative;z-index:2;
}
.cfg-card .ph{height:150px;border-radius:8px;background:#e7ebec;margin-bottom:16px}
.cfg-card h4{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.2rem}
.cfg-card p{font-size:.86rem;margin-top:.4rem;color:rgba(27,44,57,.82)}
.cfg-nav{display:flex;gap:10px;margin-top:18px}
.cfg-nav button{width:40px;height:40px;border:0;border-radius:8px;background:rgba(255,255,255,.18);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .25s}
.cfg-nav button:hover{background:rgba(255,255,255,.32)}

/* ===========================================================
   Start familiar / circuit map
   =========================================================== */
.circuit{position:relative;display:grid;grid-template-columns:1fr auto 1fr;gap:30px;align-items:center;margin-top:48px}
.circuit .col{display:flex;flex-direction:column;gap:42px}
.circuit .col.right{text-align:right}
.cnode{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.05rem;line-height:1.05}
.circuit .right .cnode{color:var(--cyan-deep)}
.logo-orb{
  width:120px;height:120px;border-radius:24px;background:var(--navy);
  display:grid;place-items:center;box-shadow:0 24px 60px -20px rgba(3,221,209,.5);
  animation:float 5s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}
.timeline{display:flex;align-items:center;justify-content:space-between;margin-top:46px;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:.9rem}
.timeline .dots{flex:1;margin:0 18px;align-items:center;position:relative;height:22px;overflow:hidden}
.timeline .dots i{display:none}
/* flowing chevron arrows >>>>> moving left->right */
.timeline .dots{
  background-image:repeating-linear-gradient(
    90deg,
    transparent 0,transparent 14px,
    var(--cyan-2) 14px,var(--cyan-2) 16px,
    transparent 16px,transparent 18px);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M4 5 l8 6 -8 6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E") repeat-x left center/22px 22px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M4 5 l8 6 -8 6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E") repeat-x left center/22px 22px;
  background-color:var(--grey-2,#cdd5d6);
}
.timeline .dots::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,var(--cyan) 45%,var(--cyan-2) 55%,transparent);
  background-size:55% 100%;background-repeat:no-repeat;
  -webkit-mask:inherit;mask:inherit;
  animation:arrowflow 2.4s linear infinite;
}
@keyframes arrowflow{0%{background-position:-60% 0}100%{background-position:160% 0}}
.timeline .end{color:var(--cyan-deep)}
@media(prefers-reduced-motion:reduce){.timeline .dots::after{animation:none}}

/* ===========================================================
   Big convergence headline (Platform)
   =========================================================== */
.converge{position:relative;text-align:center;overflow:hidden}
.converge h2{font-size:clamp(2rem,5.2vw,4.2rem);line-height:1.02;position:relative;z-index:2}
.converge h2 .cy{color:var(--cyan-2)}
.tagcloud{position:relative;height:80px}
.tag{
  position:absolute;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:.8rem;letter-spacing:.02em;
  background:#fff;border:1px solid var(--line);border-radius:30px;padding:9px 16px;
  box-shadow:0 10px 24px -16px rgba(12,24,32,.4);white-space:nowrap;
  transition:transform .6s var(--ease-out),opacity .6s;
}

/* ===========================================================
   Profile / testimonial (About)
   =========================================================== */
.profile{display:grid;grid-template-columns:1fr 420px;gap:clamp(28px,5vw,64px);align-items:center}
.profile .card{background:var(--cyan);border-radius:14px;padding:26px}
.profile .card .ph{aspect-ratio:3/3.4;background:#d9dee0;border-radius:6px;margin-bottom:18px}
.profile .card h3{font-size:1.7rem;color:var(--navy)}
.profile .card span{font-size:.86rem;color:rgba(27,44,57,.7)}
.bquote{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.08;max-width:24ch}

/* ===========================================================
   Stat counter band
   =========================================================== */
.proofband{position:relative;overflow:hidden}
.bignum{font-family:var(--display);font-weight:900;font-size:clamp(4rem,14vw,11rem);color:var(--cyan);line-height:.8;letter-spacing:-.02em;font-style:italic}

/* ===========================================================
   CTA / ready
   =========================================================== */
.ready{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.devices{position:relative;aspect-ratio:16/10;border-radius:16px;background:linear-gradient(120deg,#eef2f3,#dfe6e7);border:1px solid var(--line);overflow:hidden}

/* ===========================================================
   Footer
   =========================================================== */
.foot{background:var(--cyan);color:var(--navy);position:relative;overflow:hidden;padding-block:46px}
.foot__top{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.foot .brand{font-size:1.6rem}
.foot__links{display:flex;gap:clamp(14px,2vw,30px);font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:.82rem}
.foot__links a{opacity:.85;transition:opacity .25s}.foot__links a:hover{opacity:1}
.foot__mail{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.05rem;display:inline-flex;align-items:center;gap:.4em;margin-top:6px}
.foot__social{display:flex;gap:10px}
.foot__social a{width:34px;height:34px;border-radius:8px;background:var(--navy);color:var(--cyan);display:grid;place-items:center;transition:transform .3s var(--ease-out)}
.foot__social a:hover{transform:translateY(-3px)}
.foot__legal{border-top:1px solid rgba(27,44,57,.18);margin-top:30px;padding-top:18px;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;font-size:.8rem;color:rgba(27,44,57,.78)}
.foot__legal .l{display:flex;gap:22px}

/* credit */
.credit{text-align:center;font-size:.78rem;color:var(--grey);padding:18px}
.credit a{color:var(--cyan-deep);font-weight:600}

/* ===========================================================
   Responsive
   =========================================================== */
@media(max-width:900px){
  .nav-links,.nav-cta{display:none}
  .burger{display:flex}
  .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#fff;padding:18px var(--pad);box-shadow:0 20px 40px -20px rgba(12,24,32,.3);gap:8px}
  .nav-links.open a{padding:10px 0;font-size:1.05rem}
  .ticks,.fgrid,.think-grid{grid-template-columns:1fr}
  .think-grid{gap:14px}
  .split,.profile,.ready,.circuit{grid-template-columns:1fr}
  .split--reverse{direction:ltr}
  .iso{display:none}
  .circuit .col.right{text-align:left}
  .logo-orb{margin-inline:auto}
}
@media(max-width:640px){
  .fgrid,.ticks{grid-template-columns:1fr}
  .nav .btn{padding:.6em .9em}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.001ms!important}
  .reveal,.reveal-x,.line-mask>span{opacity:1!important;transform:none!important}
}

/* ===========================================================
   HOME PAGE additions
   =========================================================== */

/* hero floating inspection badges drift in + gentle bob */
.hero-build .badge{transform-box:fill-box;transform-origin:center;opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
.loaded .hero-build .badge{opacity:1;transform:translateY(0);animation:bob 5s ease-in-out infinite}
.loaded .hero-build .badge:nth-of-type(1){transition-delay:.35s;animation-delay:0s}
.loaded .hero-build .badge:nth-of-type(2){transition-delay:.5s;animation-delay:.6s}
.loaded .hero-build .badge:nth-of-type(3){transition-delay:.65s;animation-delay:1.2s}
.loaded .hero-build .badge:nth-of-type(4){transition-delay:.8s;animation-delay:1.8s}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -5px}}
@media(prefers-reduced-motion:reduce){.hero-build .badge{opacity:1;transform:none;animation:none}}

/* without / with comparison */
.ww{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch;margin-top:1.9rem}
.ww-col{border-radius:12px;padding:20px 22px}
.ww-col.without{background:#fff;border:1px solid var(--line)}
.ww-col.with{background:var(--navy);color:#fff}
.ww-h{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:.74rem;letter-spacing:.08em;margin-bottom:.7rem;opacity:.7}
.ww-col.with .ww-h{color:var(--cyan)}
.ww-col ul{list-style:none;display:flex;flex-direction:column;gap:.55rem;font-size:.86rem}
.ww-col.without li{color:rgba(27,44,57,.7);position:relative;padding-left:18px}
.ww-col.without li::before{content:"✕";position:absolute;left:0;color:#c2693f;font-size:.7rem;top:2px}
.ww-col.with li{position:relative;padding-left:18px}
.ww-col.with li::before{content:"✓";position:absolute;left:0;color:var(--cyan);font-size:.78rem;top:1px}
.ww-arrow{align-self:center;font-family:var(--display);font-weight:900;color:var(--cyan-2);font-size:1.6rem;letter-spacing:-2px}
@media(max-width:640px){.ww{grid-template-columns:1fr;gap:14px}.ww-arrow{transform:rotate(90deg);justify-self:center}}

/* testimonial */
.testi{background:linear-gradient(180deg,#fff, #f6f3ed)}
.testi .bquote{color:var(--navy)}

/* see-what list */
.sec-grey-soft{background:linear-gradient(180deg,#f6f3ed,#eef1f1)}
.seelist{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.6rem;font-size:.88rem;font-weight:500}
.seelist li{position:relative;padding-left:22px;white-space:nowrap}
.seelist li::before{content:"✓";position:absolute;left:0;color:var(--cyan-2);font-weight:800}
@media(max-width:640px){.seelist{grid-template-columns:1fr}}

.bigdash{border-radius:16px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(12,24,32,.4)}

/* ===========================================================
   ENHANCEMENTS — circuit connectors, chip count-up, button polish
   =========================================================== */

/* circuit connector lines + travelling dots */
.circuit{position:relative}
.circuit-lines{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;overflow:visible;
}
.circuit-lines .cl-static path{
  fill:none;stroke:var(--line);stroke:rgba(27,44,57,.16);stroke-width:2;
  stroke-dasharray:1600;stroke-dashoffset:1600;
  transition:stroke-dashoffset 1.2s var(--ease-out);
}
.circuit.in .circuit-lines .cl-static path{stroke-dashoffset:0}
.circuit-lines .cl-dots circle{
  fill:var(--cyan);opacity:0;
  filter:drop-shadow(0 0 6px rgba(1,222,208,.9));
}
/* HTML overlay dots (round regardless of SVG aspect distortion) */
.cl-dotlayer{position:absolute;inset:0;z-index:0;pointer-events:none}
.cl-dot{
  position:absolute;top:0;left:0;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  border-radius:50%;background:var(--cyan);opacity:0;
  box-shadow:0 0 8px rgba(1,222,208,.9),0 0 2px rgba(1,222,208,1);
  will-change:transform,opacity;
}
/* keep node text above the lines */
.circuit .col,.circuit .logo-orb{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){
  .circuit-lines .cl-dots{display:none}
  .circuit-lines .cl-static path{stroke-dashoffset:0;transition:none}
}
@media(max-width:880px){
  .circuit-lines{display:none}
}

/* chip count-up: subtle pop as numbers land */
.chip__big span[data-count],.chip__stat span[data-count]{display:inline-block;font-variant-numeric:tabular-nums}
.fcard.in .chip__big{animation:chippop .6s var(--ease-out) both}
@keyframes chippop{0%{transform:scale(.96);opacity:.4}60%{transform:scale(1.03)}100%{transform:scale(1);opacity:1}}

/* feature card: graphic lifts + chip stats slide in on scroll */
.fcard .chip__stat{opacity:0;transform:translateX(-8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.fcard.in .chip__stat{opacity:1;transform:none}
.fcard.in .chip__stat.s2{transition-delay:.12s}
.fcard.in .chip__stat.s3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
  .fcard .chip__stat{opacity:1;transform:none}
  .fcard.in .chip__big{animation:none}
}

/* button polish — arrow nudge already exists; add sheen + press */
.btn{overflow:hidden}
.btn::after{
  content:"";position:absolute;top:0;left:-40%;width:30%;height:100%;z-index:0;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);transition:left .55s var(--ease-out);
}
.btn:hover::after{left:130%}
.btn--ghost::after{background:linear-gradient(120deg,transparent,rgba(3,221,209,.25),transparent)}
.btn:active{transform:translateY(0) scale(.98)}

/* ===========================================================
   ART HERO — real Figma composite with overlaid heading
   =========================================================== */
.hero--art{position:relative;background:var(--cyan);overflow:hidden;padding:0}
.hero--art .hero-art{
  display:block;width:94%;max-width:1320px;height:auto;margin:0 0 0 auto;
}
.hero-art__inner{
  position:absolute;inset:0;display:flex;align-items:center;
  pointer-events:none;
}
.hero-art__copy{max-width:46%;pointer-events:auto;padding-bottom:5%}
.hero--art h1.hero-art__title{
  color:var(--navy);
  font-size:clamp(1.5rem,2.8vw,2.8rem);
  font-stretch:var(--hd-stretch);
  font-variation-settings:'wdth' 115,'wght' 900;
  line-height:1.06;margin-bottom:1rem;position:relative;letter-spacing:0;
}
#home-hero .hero-art__title .line-mask:nth-child(3) span,
#home-hero .hero-art__title .line-mask:nth-child(4) span{color:#fff}
.hero-art__chev{display:inline-block;color:#fff;margin-left:.1em;font-size:.55em;letter-spacing:-.08em;vertical-align:baseline}
.hero--art .hero__lead{color:rgba(15,28,37,.82);max-width:30ch;font-size:clamp(.85rem,1.1vw,1.05rem)}
.hero-art__cta{margin-top:1.4rem;display:flex;gap:12px;flex-wrap:wrap}

/* tablet/mobile: stack heading above the artwork */
@media(max-width:880px){
  .hero--art{padding-top:96px;display:flex;flex-direction:column}
  .hero-art__inner{position:static;display:block;order:1}
  .hero-art__copy{max-width:none;padding:0 var(--pad) 8px}
  .hero--art h1.hero-art__title{font-size:clamp(2rem,8vw,3rem)}
  .hero--art .hero-art{order:2;margin-top:8px}
  .hero--art .hero__lead{max-width:40ch}
}


/* about ready-section image + iso image sizing */
.iso-art{position:absolute;right:-2%;top:50%;transform:translateY(-50%);width:54%;max-width:640px;pointer-events:none}
@media(max-width:880px){.iso-art{display:none}}
.conf-art img,.bigdash img,.devices img{display:block;width:100%;height:auto;border-radius:14px}
.bigdash img{box-shadow:0 30px 70px -30px rgba(12,24,32,.4)}

/* ===========================================================
   LANDING PAGE REWORK — new sections
   =========================================================== */

/* hero compliance chips */
.hero-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:1.2rem;padding:0}
.hero-chips li{font-size:.72rem;font-weight:600;color:var(--navy);background:rgba(255,255,255,.55);
  border:1px solid rgba(15,28,37,.16);padding:5px 12px;border-radius:30px;backdrop-filter:blur(4px)}

/* completion-line divider */
.completion-line{background:var(--cream,#f8f7ef);padding:34px 0;display:flex;justify-content:center}
.cl-track{position:relative;width:min(560px,70%);height:3px;background:rgba(27,44,57,.12);border-radius:3px;overflow:hidden}
.cl-fill{position:absolute;inset:0;width:0;background:var(--cyan);border-radius:3px}
.cl-track.in .cl-fill{width:100%;transition:width 1.4s var(--ease-out)}

/* problem band */
.problem-band{background:#fff}

/* confidence 4-card grid */
.conf-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.conf-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 22px 24px;
  overflow:hidden;transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s}
.conf-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px -22px rgba(12,24,32,.35);border-color:transparent}
.conf-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--cyan);
  transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease)}
.conf-card:hover::before{transform:scaleY(1)}
.conf-card__chev{color:var(--cyan-2);font-family:var(--display);font-weight:800;font-size:1.1rem;letter-spacing:-2px;display:block;margin-bottom:14px}
.conf-card h3{font-family:var(--display);font-weight:800;font-stretch:var(--hd-stretch);text-transform:uppercase;font-size:var(--fs-h4);line-height:1.1;margin-bottom:10px}
.conf-card p{font-size:.86rem;color:var(--muted);line-height:1.5}
@media(max-width:980px){.conf-cards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.conf-cards{grid-template-columns:1fr}}

/* annotated image with callout boxes */
.annotated{background:var(--cream,#f8f7ef);padding-top:0}
.annotated__stage{position:relative;max-width:1000px;margin:0 auto;border-radius:16px;overflow:visible}
.annotated__stage img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 30px 70px -34px rgba(12,24,32,.45)}
.callout{position:absolute;background:var(--navy);color:#fff;font-size:.78rem;font-weight:600;
  padding:9px 14px;border-radius:9px;box-shadow:0 12px 28px -10px rgba(12,24,32,.5);white-space:nowrap;
  opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.callout b{color:var(--cyan);font-weight:600}
.annotated__stage.in .callout{opacity:1;transform:none}
.callout::after{content:"";position:absolute;width:10px;height:10px;background:var(--navy);transform:rotate(45deg)}
.callout--tl{top:8%;left:-2%}.callout--tl::after{bottom:-5px;left:24px}
.callout--tr{top:18%;right:-2%}.callout--tr::after{bottom:-5px;right:24px}
.callout--bl{bottom:16%;left:-2%}.callout--bl::after{top:-5px;left:24px}
.callout--br{bottom:6%;right:-2%}.callout--br::after{top:-5px;right:24px}
.annotated__stage.in .callout--tr{transition-delay:.12s}
.annotated__stage.in .callout--bl{transition-delay:.24s}
.annotated__stage.in .callout--br{transition-delay:.36s}
@media(max-width:760px){
  .callout{position:static;display:inline-block;margin:6px 6px 0 0;opacity:1;transform:none;white-space:normal}
  .callout::after{display:none}
  .annotated__stage{display:flex;flex-direction:column}
}

/* facts ribbon */
.facts-ribbon{background:var(--navy);color:#fff;padding:46px 0}
.facts-ribbon__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center}
.fact{position:relative}
.fact+.fact::before{content:"";position:absolute;left:0;top:10%;height:80%;width:1px;background:rgba(255,255,255,.16)}
.fact__num{display:block;font-family:var(--display);font-weight:900;font-stretch:115%;font-size:clamp(2rem,4.4vw,3.2rem);color:var(--cyan);line-height:1}
.fact__label{display:block;margin-top:.5rem;font-size:.86rem;color:rgba(255,255,255,.8)}
@media(max-width:680px){.facts-ribbon__grid{grid-template-columns:1fr;gap:28px}.fact+.fact::before{display:none}}

/* process photo */
.process-photo{position:relative;border-radius:16px;overflow:hidden;min-height:300px;background:#dfe3e4}
.process-photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:16px}
.process-photo__placeholder{position:absolute;inset:0;display:grid;place-items:center;color:#8a99a2;font-size:.9rem;
  background:repeating-linear-gradient(45deg,#e7ebec,#e7ebec 14px,#dfe3e4 14px,#dfe3e4 28px)}
.process-photo:not(.photo-missing) .process-photo__placeholder{display:none}
.process-photo.photo-missing img{display:none}

/* ===========================================================
   ECOC 3-STEP WIZARD
   =========================================================== */
.ecoc-tool{background:var(--cream,#f8f7ef)}
.wizard{max-width:920px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 30px 70px -40px rgba(12,24,32,.4);overflow:hidden}
.wizard__rail{list-style:none;display:flex;margin:0;padding:0;border-bottom:1px solid var(--line);background:#fbfcfc}
.wizard__rail li{flex:1;display:flex;align-items:center;gap:9px;padding:16px 18px;font-size:.82rem;font-weight:600;color:var(--muted);position:relative}
.wizard__rail li span{width:24px;height:24px;border-radius:50%;background:var(--grey-2,#d7dadb);color:var(--navy);display:grid;place-items:center;font-size:.78rem;font-weight:700;flex:none}
.wizard__rail li.is-active{color:var(--navy)}
.wizard__rail li.is-active span{background:var(--cyan)}
.wizard__rail li.is-done span{background:var(--navy);color:#fff}
.wizard__rail li+li::before{content:"";position:absolute;left:0;top:50%;width:1px;height:60%;transform:translateY(-50%);background:var(--line)}
.wizard__panel{padding:30px 32px 26px}
.wizard__h{font-family:var(--display);font-weight:800;font-stretch:var(--hd-stretch);text-transform:uppercase;font-size:var(--fs-h3);margin-bottom:18px}
.wizard__nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px}

/* compare table (step 1) */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.compare__col{border-radius:12px;padding:20px}
.compare__col--old{background:#f3f5f5;border:1px solid var(--line)}
.compare__col--new{background:var(--navy);color:#fff}
.compare__tag{display:block;font-family:var(--display);font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.8rem}
.compare__col--new .compare__tag{color:var(--cyan)}
.compare__col ul{list-style:none;display:flex;flex-direction:column;gap:.6rem;font-size:.86rem}
.compare__col--old li{padding-left:18px;position:relative;color:var(--muted)}
.compare__col--old li::before{content:"✕";position:absolute;left:0;color:#c2693f;font-size:.72rem;top:2px}
.compare__col--new li{padding-left:18px;position:relative}
.compare__col--new li::before{content:"✓";position:absolute;left:0;color:var(--cyan);top:1px}
@media(max-width:680px){.compare{grid-template-columns:1fr}}

/* quiz (step 2) */
.quiz__top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.quiz__progress{font-size:.8rem;color:var(--muted);font-weight:600}
.quiz__barwrap{height:6px;background:#eef1f1;border-radius:6px;overflow:hidden;margin-bottom:22px}
.quiz__bar{display:block;height:100%;width:0;background:var(--cyan);border-radius:6px;transition:width .4s var(--ease-out)}
.quiz__q{font-size:1.05rem;font-weight:600;color:var(--navy);margin-bottom:.3rem}
.quiz__hint{font-size:.85rem;color:var(--muted);margin-bottom:1.2rem}
.quiz__opts{display:flex;flex-direction:column;gap:10px}
.quiz__opt{text-align:left;padding:14px 18px;border:1.5px solid var(--line);border-radius:11px;background:#fff;
  font-size:.92rem;cursor:pointer;transition:border-color .2s,background .2s,transform .15s;font-family:var(--body)}
.quiz__opt:hover{border-color:var(--cyan);background:#f4fdfc}
.quiz__opt.is-picked{border-color:var(--cyan);background:var(--cyan);color:var(--ink);font-weight:600}
.quiz__note{font-size:.8rem;color:var(--muted)}

/* outcome (step 3) */
.outcome{text-align:center;padding:10px 0}
.outcome__dial{position:relative;width:120px;height:120px;margin:0 auto 1.2rem}
.outcome__dial #outRing{transition:stroke-dashoffset 1.1s var(--ease-out)}
.outcome__score{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:1.6rem;color:var(--navy)}

/* ===========================================================
   CONTACT FORM
   =========================================================== */
.contact-sec{background:var(--navy)}
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:start}
.contact-points{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.contact-points li{position:relative;padding-left:24px;color:rgba(255,255,255,.85);font-size:.9rem}
.contact-points li::before{content:"✓";position:absolute;left:0;color:var(--cyan);font-weight:700}
.contact-form{background:#fff;border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:14px}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-form label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;font-weight:600;color:var(--navy)}
.contact-form label span{color:var(--cyan-deep,#0aa9b8)}
.contact-form input,.contact-form select,.contact-form textarea{
  font-family:var(--body);font-size:.92rem;padding:11px 13px;border:1.5px solid var(--line);border-radius:9px;
  background:#fbfcfc;color:var(--ink);transition:border-color .2s,box-shadow .2s;width:100%}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
  outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(1,222,208,.18);background:#fff}
.contact-form textarea{resize:vertical;min-height:96px}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cf-submit{align-self:flex-start;margin-top:4px;cursor:pointer}
.cf-note{font-size:.76rem;color:var(--muted)}
.cf-ok,.cf-err{padding:12px 14px;border-radius:9px;font-size:.88rem}
.cf-ok{background:#e7faf7;color:#0a7d72;border:1px solid #b9ece6}
.cf-err{background:#fdece6;color:#b5482a;border:1px solid #f3cdbf}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr;gap:28px}}
@media(max-width:560px){.cf-row{grid-template-columns:1fr}}

/* ===========================================================
   NEW PAGES — shared components (Pricing, Insights, Case Studies, ECOC)
   =========================================================== */

/* generic page hero (white) */
.pg-hero{padding-top:120px}
.pg-hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.pg-title{font-family:var(--display);font-weight:900;font-stretch:var(--hd-stretch);text-transform:uppercase;
  font-size:var(--fs-hero);line-height:1.02;color:var(--navy)}
.pg-lead{margin-top:1.3rem;color:rgba(27,44,57,.8);max-width:46ch}
.pg-cta{margin-top:1.8rem;display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:880px){.pg-hero__grid{grid-template-columns:1fr;gap:30px}.pg-hero{padding-top:104px}}

/* hero illustration with floating badges */
.hero-illus{position:relative}
.hero-illus .doc-stack{width:100%;height:auto;display:block}
.float-badge{position:absolute;background:#fff;border:1px solid rgba(15,28,37,.1);
  box-shadow:0 12px 30px -12px rgba(12,24,32,.35);border-radius:8px;padding:8px 14px;
  font-size:.82rem;font-weight:600;color:var(--navy);white-space:nowrap;
  opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.loaded .float-badge{opacity:1;transform:translateY(0);animation:bob 5s ease-in-out infinite}
.float-badge.fb-1{top:6%;left:8%;animation-delay:0s;transition-delay:.3s}
.float-badge.fb-2{top:42%;right:-2%;animation-delay:.8s;transition-delay:.5s}
.float-badge.fb-3{bottom:6%;left:0;animation-delay:1.4s;transition-delay:.7s}
@media(prefers-reduced-motion:reduce){.loaded .float-badge{animation:none}}
@media(max-width:560px){.float-badge{font-size:.72rem;padding:6px 10px}}

/* cyan statement band */
.band-cyan{background:var(--cyan);padding:64px 0}
.band-cyan__h{font-family:var(--display);font-weight:900;font-stretch:var(--hd-stretch);text-transform:uppercase;
  font-size:var(--fs-h2);line-height:1.1;color:var(--navy);max-width:24ch}
.band-cyan-soft{background:var(--cyan)}
.band-cyan-soft .h-sec{color:var(--navy)}

/* pricing tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.tier{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 26px;
  display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.tier:hover{transform:translateY(-6px);box-shadow:0 26px 54px -26px rgba(12,24,32,.4)}
.tier--feature{border-color:var(--cyan);box-shadow:0 22px 50px -24px rgba(1,222,208,.5)}
.tier__badge{position:absolute;top:-13px;left:26px;background:var(--cyan);color:var(--ink);font-size:.7rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:5px 12px;border-radius:20px}
.tier__name{font-family:var(--display);font-weight:800;font-stretch:var(--hd-stretch);text-transform:uppercase;font-size:1rem;color:var(--muted)}
.tier__price{font-family:var(--display);font-weight:900;font-size:2.4rem;color:var(--navy);margin:.2rem 0 .6rem}
.tier__price span{font-family:var(--body);font-weight:500;font-size:.9rem;color:var(--muted)}
.tier__illus{margin:.4rem 0 1rem;border-radius:10px;overflow:hidden}
.tier__illus img{width:100%;height:auto;display:block}
.tier__h{font-family:var(--display);font-weight:800;font-stretch:var(--hd-stretch);text-transform:uppercase;font-size:var(--fs-h4);line-height:1.15;margin-bottom:.7rem}
.tier__desc{font-size:.86rem;color:var(--muted);line-height:1.5}
.tier__inc{display:block;font-weight:700;font-size:.84rem;color:var(--navy);margin:1.2rem 0 .7rem}
.tier__list{list-style:none;display:flex;flex-direction:column;gap:.5rem;font-size:.85rem;flex:1}
.tier__list li{position:relative;padding-left:20px;color:rgba(27,44,57,.85)}
.tier__list li::before{content:"✓";position:absolute;left:0;color:var(--cyan-deep,#0aa9b8);font-weight:700}
.tier__btn{margin-top:1.6rem;justify-content:center}
@media(max-width:880px){.tiers{grid-template-columns:1fr;max-width:440px;margin:0 auto}}

/* FAQ accordion */
.faq{background:#fff;border-radius:16px;padding:10px 28px;box-shadow:0 20px 50px -30px rgba(12,24,32,.3)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item:last-child{border-bottom:none}
.faq__item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  gap:16px;padding:22px 0;font-weight:600;color:var(--navy);font-size:1rem}
.faq__item summary::-webkit-details-marker{display:none}
.faq__icon{font-family:var(--display);font-weight:700;font-size:1.4rem;color:var(--cyan-deep,#0aa9b8);
  transition:transform .3s var(--ease);flex:none;line-height:1}
.faq__item[open] .faq__icon{transform:rotate(45deg)}
.faq__body{padding:0 0 22px;color:var(--muted);font-size:.92rem;line-height:1.6;max-width:70ch;
  animation:faqIn .35s var(--ease-out)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* contact form checkbox */
.cf-check{flex-direction:row;align-items:flex-start;gap:9px;font-weight:400;font-size:.78rem;color:var(--muted)}
.cf-check input{width:auto;margin-top:2px}

/* ===========================================================
   INSIGHTS / CASE STUDIES specifics
   =========================================================== */

/* dark challenges band */
.band-navy{background:var(--navy);color:#fff;padding:64px 0}
.band-navy__h{font-family:var(--display);font-weight:900;font-stretch:var(--hd-stretch);text-transform:uppercase;
  font-size:var(--fs-h2);margin-bottom:1.2rem}
.band-navy p{color:rgba(255,255,255,.82);max-width:74ch;font-size:1rem}

/* insight cards (cyan blocks with illustration top) */
.icards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:2.4rem}
.icard{background:var(--cyan);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.icard:hover{transform:translateY(-6px);box-shadow:0 26px 54px -26px rgba(1,222,208,.6)}
.icard__illus{background:#fff;padding:18px 18px 0}
.icard__illus img{width:100%;height:auto;display:block}
.icard__body{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1}
.icard__h{font-family:var(--display);font-weight:800;font-stretch:var(--hd-stretch);text-transform:uppercase;font-size:var(--fs-h4);line-height:1.2;color:var(--navy);margin-bottom:.3rem}
.icard__h em{font-style:italic;font-weight:700;display:block;margin-top:.3rem;font-size:.92rem;font-family:var(--body);text-transform:none}
.icard__body p{font-size:.86rem;color:rgba(15,28,37,.82);line-height:1.55;flex:1;margin-top:.6rem}
.icard__btn{align-self:flex-start;margin-top:1.4rem;background:#fff;color:var(--navy);border:1.5px solid var(--navy);
  padding:10px 20px;border-radius:6px;font-weight:600;font-size:.82rem;transition:.2s}
.icard__btn:hover{background:var(--navy);color:#fff}
@media(max-width:880px){.icards{grid-template-columns:1fr;max-width:440px;margin:2rem auto 0}}

/* ===========================================================
   CASE STUDIES specifics
   =========================================================== */
.cs-hero-truck{background:#e7ebec;border-radius:16px;overflow:hidden;position:relative}
.cs-hero-truck img{width:100%;height:auto;display:block}

/* stats bar */
.statbar{background:var(--navy);color:#fff}
.statbar__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;text-align:center;padding:26px 0}
.statbar .stat__n{font-family:var(--display);font-weight:900;font-size:1.8rem;color:var(--cyan);display:block}
.statbar .stat__l{font-size:.74rem;color:rgba(255,255,255,.78);margin-top:.2rem;display:block}
@media(max-width:760px){.statbar__grid{grid-template-columns:1fr 1fr;gap:18px}}

/* case study two-col intro */
.cs-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.cs-grid h3{font-family:var(--display);font-weight:800;font-stretch:var(--hd-stretch);text-transform:uppercase;font-size:var(--fs-h4);margin:1.4rem 0 .6rem;color:var(--navy)}
.cs-grid h3:first-child{margin-top:0}
.cs-grid p{font-size:.92rem;color:var(--muted);line-height:1.6;margin-bottom:.8rem}
.cs-grid .accent{color:var(--cyan-deep,#0aa9b8);font-weight:600}
.cs-quote{font-size:.95rem;line-height:1.6;color:var(--navy);font-weight:500;border-left:3px solid var(--cyan);padding-left:18px;margin:1rem 0}
.cs-imgwrap{position:relative;border-radius:14px;overflow:hidden}
.cs-imgwrap img{width:100%;height:auto;display:block}
.cs-author{display:flex;align-items:center;gap:16px;margin-top:1.6rem}
.cs-author img{width:64px;height:64px;border-radius:10px;object-fit:cover;filter:grayscale(1)}
.cs-author b{display:block;color:var(--navy)}
.cs-author span{font-size:.86rem;color:var(--muted)}
@media(max-width:880px){.cs-grid{grid-template-columns:1fr;gap:24px}}

/* ECOC tool intro placeholder slot reuse — handled by existing .wizard */

/* ===========================================================
   COLOUR FIX — global .cy accent + heading colour splits
   =========================================================== */
/* global cyan accent (was only scoped to .converge before) */
.cy{color:var(--cyan)}
/* on white backgrounds use a slightly deeper cyan for legibility,
   matching the design's heading accent */
.pg-title .cy,
.band-navy__h .cy,
h2 .cy, h1 .cy{color:var(--cyan)}
/* dark teal navy used in the designs for primary heading text */
:root{--navy-deep:#0f353e}

/* ===========================================================
   CASE STUDIES — dark (Coolvan) section
   =========================================================== */
.cs-dark{background:var(--navy);color:#fff}
.cs-dark__head{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:flex-end;justify-content:space-between;margin-bottom:1.6rem}
.cs-dark__brand{display:flex;flex-direction:column}
.coolvan-logo{font-family:var(--display);font-weight:900;font-stretch:120%;font-size:1.8rem;color:#fff;letter-spacing:.02em;display:inline-flex;align-items:center;gap:6px}
.cv-dot{color:var(--cyan);font-size:1.1rem}
.coolvan-sub{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.65);margin-top:2px}
.cs-dark__tag{font-style:italic;color:rgba(255,255,255,.78);max-width:34ch}
.statbar--inset{border-radius:12px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.statbar--inset .stat__l{color:rgba(255,255,255,.72)}
/* dark cs-grid */
.cs-grid--dark h3{color:#fff}
.cs-grid--dark p{color:rgba(255,255,255,.78)}
.cs-grid--dark .accent{color:var(--cyan)}
.cs-quote--dark{color:#fff;border-left-color:var(--cyan)}
.cs-author--dark b{color:#fff}
.cs-author--dark span{color:rgba(255,255,255,.7)}
.cs-author--dark img{filter:grayscale(1)}

/* about hero: use the standard page-title scale on the navy hero */
.hero h1.pg-title{font-size:var(--fs-hero);line-height:1.04}
.pg-title--onnavy{color:#fff}
.pg-title--onnavy .cy{color:var(--cyan)}
.hero--navy .hero__lead{margin-top:1.2rem}

/* ===========================================================
   v11 — DESIGN-MATCH REBUILD (Tom's mockups)
   Thick solid chevrons · live hero badges + progress rail ·
   big iso art · diamond testimonial · proof chevron art
   =========================================================== */

/* retire v10 thin ornaments */
.problem-band::after,.ecoc-tool::before,.testi::before,.pg-hero::after,
.chev-orn::before,.chev-orn::after{display:none}

/* ---------- THICK CHEVRON SHAPES ---------- */
.chv{
  position:absolute;pointer-events:none;z-index:0;display:block;
  aspect-ratio:.74;background:currentColor;
  clip-path:polygon(0 0,60% 0,100% 50%,60% 100%,0 100%,40% 50%);
}
.chv--grey{color:#eceff0}
.chv--teal{color:rgba(5,150,136,.16)}
.chv--navy{color:rgba(255,255,255,.05)}
.chv--cyan{color:var(--cyan)}
.has-chv{position:relative;overflow:hidden}
.has-chv>.wrap{position:relative;z-index:1}

/* ---------- HERO — full-bleed design composite, live overlays ---------- */
.hero--build{background:#05c5b2;position:relative;overflow:hidden;padding:0;color:var(--navy)}
.hero-build__stage{position:relative;width:100%;aspect-ratio:2016/1148}
.hero-build__stage>img{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-build__inner{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none;z-index:3}
.hero-build__copy{max-width:44%;pointer-events:auto}
.hero-build__copy h1{
  font-size:clamp(1.7rem,4.7vw,4.4rem);line-height:1.0;color:var(--navy);
  font-variation-settings:'wdth' 115,'wght' 900;
}
.hero-build__copy h1 .cvw{color:#fff}
.hero-build__chev{color:#fff;letter-spacing:-.06em;margin-left:.12em;font-size:.62em}
.hero-build__copy .hero__lead{color:rgba(15,28,37,.85);max-width:32ch;margin-top:1.1rem;font-size:clamp(.82rem,1.15vw,1.08rem)}
.hero-build__cta{margin-top:clamp(.9rem,1.8vw,1.7rem);display:flex;gap:12px;flex-wrap:wrap}

/* live inspection badges */
.hb{
  position:absolute;left:var(--x);top:var(--y);z-index:4;
  display:flex;align-items:center;gap:.55em;
  background:#1d2b38;color:#fff;border-radius:.5em;
  padding:.62em .95em;box-shadow:0 14px 30px -12px rgba(9,20,28,.55);
  font-size:clamp(.56rem,1.05vw,1rem);line-height:1.15;white-space:nowrap;
  opacity:0;transform:translateY(12px);
}
.hb--cover{min-width:var(--w,auto);min-height:var(--h,auto)}
.loaded .hb{animation:hbin .7s var(--ease-out) forwards}
.loaded .hb:nth-of-type(1){animation-delay:.45s}
.loaded .hb:nth-of-type(2){animation-delay:.62s}
.loaded .hb:nth-of-type(3){animation-delay:.79s}
.loaded .hb:nth-of-type(4){animation-delay:.96s}
@keyframes hbin{to{opacity:1;transform:translateY(0)}}
.loaded .hb--free{animation:hbin .7s var(--ease-out) forwards,bob 5.5s ease-in-out infinite 1.3s}
.hb__ic{flex:none;width:1.55em;height:1.55em;border-radius:50%;display:grid;place-items:center;background:var(--cyan);color:#0d2b2f;font-size:.9em;font-weight:800}
.hb--prog .hb__ic{background:var(--amber);color:#3a2405;animation:hbpulse 2.2s ease-in-out infinite}
@keyframes hbpulse{0%,100%{box-shadow:0 0 0 0 rgba(245,135,31,.55)}50%{box-shadow:0 0 0 .45em rgba(245,135,31,0)}}
.hb__t{display:flex;flex-direction:column;font-weight:600}
.hb__t b{font-weight:600;font-size:.86em;color:var(--cyan);margin-top:.12em}
.hb--prog .hb__t b{color:var(--amber)}

/* progress rail across the hero bottom */
.hrail{position:absolute;left:0;right:0;bottom:3.4%;z-index:4;padding-inline:var(--pad)}
.hrail__lab{
  position:absolute;bottom:calc(100% + .55em);left:clamp(4.5em,var(--pos,55%),calc(100% - 4.5em));transform:translateX(-50%);
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(.6rem,1vw,.86rem);color:var(--navy);white-space:nowrap;transition:left .8s var(--ease-out);
}
.hrail__bar{position:relative;height:4px;background:rgba(255,255,255,.55);border-radius:4px}
.hrail__fill{position:absolute;inset:0;width:var(--pos,55%);background:var(--navy);border-radius:4px;transition:width .8s var(--ease-out)}
.hrail__stop{
  position:absolute;top:50%;left:var(--at);width:1.35em;height:1.35em;translate:-50% -50%;
  border-radius:50%;background:#fff;border:3px solid rgba(27,44,57,.35);
  display:grid;place-items:center;font-size:clamp(.6rem,.95vw,.85rem);color:#fff;
  transition:background .4s,border-color .4s;z-index:1;
}
.hrail__stop.done{background:var(--navy);border-color:var(--navy)}
.hrail__stop.done::after{content:"✓";font-size:.72em;line-height:1}
.hrail__stop.active{background:var(--navy);border-color:#fff;box-shadow:0 0 0 .35em rgba(27,44,57,.18)}

@media(max-width:880px){
  .hero--build{padding-top:84px}
  .hero-build__inner{position:static;display:block}
  .hero-build__copy{max-width:none;padding:0 var(--pad) 14px}
  .hero-build__copy h1{font-size:clamp(2.1rem,9vw,3.2rem)}
  .hb{font-size:clamp(.5rem,1.6vw,.72rem)}
  .hrail__lab{font-size:.62rem}
}

/* ---------- CONFIDENCE (design section 2) ---------- */
.confidence{background:#fff}
.confidence .split{align-items:center}
/* v40 — Confidence devices: three INDEPENDENT floating cards (no clipping
   container). Each hovers gently at its own speed. Replaces the old
   .conf-dash box (overflow:hidden was cropping the composite PNG). */
.conf-stack{position:relative;aspect-ratio:15/11;min-height:300px}
.cdev{position:absolute;background:#0d1922;border-radius:16px;padding:clamp(6px,.8vw,10px);box-shadow:0 30px 60px -24px rgba(4,26,30,.5)}
.cdev img{width:100%;height:auto;display:block;border-radius:10px}
.cdev--a{width:86%;left:0;top:4%}
.cdev--b{width:52%;left:2%;bottom:2%}
.cdev--c{width:38%;right:0;top:46%}
@keyframes cdevFloat{0%,100%{translate:0 0}50%{translate:0 -11px}}
.loaded .cdev--a{animation:cdevFloat 9s ease-in-out infinite}
.loaded .cdev--b{animation:cdevFloat 12.5s ease-in-out infinite;animation-delay:-4s}
.loaded .cdev--c{animation:cdevFloat 7.5s ease-in-out infinite;animation-delay:-2s}
@media(prefers-reduced-motion:reduce){.cdev{animation:none!important}}
@media(max-width:880px){.conf-stack{max-width:520px;margin-inline:auto}}

/* ---------- WORKBLOCK + BIG ISO ---------- */
.workblock{min-height:560px;display:flex;align-items:center}
.workblock .wrap{width:100%}
.iso-big{
  position:absolute;right:-3%;top:50%;transform:translateY(-50%);
  width:58%;max-width:780px;pointer-events:none;z-index:1;
  animation:isodrift 9s ease-in-out infinite;
}
@keyframes isodrift{0%,100%{transform:translateY(-52%)}50%{transform:translateY(-48%)}}
@media(max-width:880px){
  .workblock{display:block}
  .iso-big{position:static;transform:none;width:100%;max-width:560px;margin:1.8rem auto 0;display:block;animation:none}
}
.cfg-card .thumb{height:150px;border-radius:8px;overflow:hidden;margin-bottom:16px;background:#0f1c26}
.cfg-card .thumb img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.cfg-card .cfg-body{min-height:118px}
.cfg-card .cfg-count{font-size:.72rem;font-weight:700;color:rgba(15,28,37,.55);letter-spacing:.08em;margin-top:10px;display:block}

/* ---------- START FAMILIAR node dots ---------- */
.cnode{position:relative;padding-left:0}
.circuit .col.left .cnode::after,
.circuit .col.right .cnode::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--navy);
  position:absolute;top:.45em;
}
.circuit .col.left .cnode::after{right:-24px}
.circuit .col.right .cnode::before{left:-24px;background:var(--cyan-deep)}
@media(max-width:880px){.circuit .col .cnode::after,.circuit .col .cnode::before{display:none}}

/* ---------- DIAMOND TESTIMONIAL ---------- */
.testi-d{background:#fff;position:relative;overflow:hidden;padding-block:clamp(48px,7vw,96px)}
.dia{
  position:relative;max-width:1080px;margin-inline:auto;text-align:center;
  background:#f4f2e9;padding:clamp(3rem,6vw,5rem) clamp(2rem,9vw,8rem);
  clip-path:polygon(5% 0,95% 0,100% 50%,95% 100%,5% 100%,0 50%);
}
.dia>img{width:56px;margin:0 auto 1.3rem;display:block}
.dia .bquote{
  font-size:clamp(1.05rem,1.9vw,1.55rem);max-width:34ch;margin-inline:auto;color:var(--navy);
}
.dia-nav{margin-top:1.4rem;font-family:var(--display);font-weight:900;font-size:1.5rem;letter-spacing:.35em;color:var(--cyan-deep)}
.testi-d .chv{top:50%;translate:0 -50%;width:clamp(40px,4.5vw,64px)}
.testi-d .chv.l{left:8px;transform:scaleX(-1)}
.testi-d .chv.r{right:8px}

/* ---------- PROOF — chevron block art ---------- */
.proof-art{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:clamp(10px,2vw,26px)}
.proof-art .bignum{position:relative;z-index:2}
.proof-chevs{position:absolute;right:0;top:50%;translate:0 -50%;z-index:0;opacity:.9}
.rise{display:flex;flex-direction:column-reverse;gap:6px;z-index:2}
.rise i{
  width:clamp(22px,2.6vw,34px);aspect-ratio:1.5;background:var(--cyan);
  clip-path:polygon(0 100%,50% 30%,100% 100%,50% 62%);
  opacity:.35;animation:riseup 2.1s ease-in-out infinite;
}
.rise i:nth-child(2){animation-delay:.25s}
.rise i:nth-child(3){animation-delay:.5s}
@keyframes riseup{0%,100%{opacity:.25;transform:translateY(4px)}50%{opacity:1;transform:translateY(-4px)}}
.proof-check{
  width:clamp(40px,4.4vw,58px);aspect-ratio:1;border-radius:50%;border:4px solid var(--cyan);
  display:grid;place-items:center;color:var(--cyan-deep);font-weight:900;font-size:1.3em;z-index:2;background:#fff;
}

/* ---------- ECOC CTA BAND (dark photo) ---------- */
.ecoc-cta{position:relative;overflow:hidden;padding-block:clamp(72px,10vw,130px);color:#fff;text-align:center}
.ecoc-cta .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.7)}
.ecoc-cta::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,25,34,.82),rgba(13,25,34,.66))}
.ecoc-cta .wrap{position:relative;z-index:2}
.ecoc-cta .h-sec{color:#fff;margin-inline:auto}
.ecoc-cta p{color:rgba(255,255,255,.85);margin:1.1rem auto 0}

/* ---------- FOOTER thick chevrons ---------- */
.foot{position:relative}
.foot .chv{color:rgba(5,150,136,.18)}
.foot>.wrap{position:relative;z-index:1}

@media(prefers-reduced-motion:reduce){
  .hb,.loaded .hb{animation:none;opacity:1;transform:none}
  .iso-big{animation:none}
  .rise i{animation:none;opacity:.8}
}

/* ---------- anchoring standard (fixes off-centre copy site-wide) ---------- */
[style*="text-align:center"]>p,
[style*="text-align:center"]>.h-sec,
[style*="text-align:center"] .h-sec{margin-inline:auto}
.tc{text-align:center}
.tc>p,.tc .h-sec,.tc .eyebrow{margin-inline:auto}
.quote-attrib{margin:1.2rem auto 0;max-width:none;text-align:center;font-size:.9rem;color:var(--muted)}
.quote-attrib b,.quote-attrib strong{color:var(--navy);font-weight:700}

/* ===========================================================
   v12 — FOLD + READABILITY FIXES
   above-the-fold hero · unified heading scale · light cutout
   chevrons · circuit line gaps · section chevron separation
   =========================================================== */

/* ---------- ONE hero heading scale for every page ---------- */
.hero-build__copy h1,.hero h1.pg-title,.pg-title{
  font-size:var(--fs-hero)!important;line-height:1.04;
}

/* ---------- hero above the fold ---------- */
.hero--build{background:#05c5b2}
.hero-build__stage{
  position:relative;aspect-ratio:2016/1148;
  width:min(100%,calc((100vh - 96px)*1.756));
  max-width:100%;margin-left:auto;
}
/* light turquoise→white mix showing through the chevron cutouts */
.hero-build__stage::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,#8bf2e8 0%,#18ded2 42%,#d9fffa 100%);
}
.hero-build__stage>img{position:absolute;inset:0;width:100%;height:100%}
/* copy overlays the SECTION so it stays anchored to the page grid */
.hero-build__inner{position:absolute;inset:0;z-index:3}
.hero-build__copy .hero__lead{font-size:clamp(.9rem,1.1vw,1.05rem)}
/* rail spans the full section width */
.hero--build .hrail{z-index:4}
@media(max-width:880px){
  .hero-build__stage{width:100%;margin:0}
  .hero-build__inner{position:static}
}

/* ---------- about: approval-led section ---------- */
.founder-head{max-width:760px;margin-bottom:2rem}
.founder-head .h-sec{max-width:22ch;margin-bottom:1rem}
.founder-grid{display:grid;grid-template-columns:1.1fr 400px;gap:clamp(28px,5vw,64px);align-items:start}
.founder-grid p{color:rgba(27,44,57,.78);max-width:58ch}
.founder-grid p+p{margin-top:1rem}
.founder-card{background:var(--cyan);border-radius:14px;padding:24px}
.founder-card .ph{aspect-ratio:1/1.05;background:#d9dee0;border-radius:8px;margin-bottom:16px}
.founder-card h3{font-size:1.6rem;color:var(--navy)}
.founder-card span{font-size:.86rem;color:rgba(27,44,57,.7)}
@media(max-width:880px){.founder-grid{grid-template-columns:1fr}}

@media(max-width:880px){
  .testi-d .chv{display:none}
}

/* ===========================================================
   v13 — CSS-NATIVE HERO CHEVRONS + FULL-HEIGHT SECTION CHEVRONS
   =========================================================== */

/* ---------- hero rebuilt: clean CSS chevrons, keyed truck art ---------- */
.hero--build{position:relative;background:#05c5b2;overflow:hidden;padding:0}
.hero-build__frame{position:relative;height:min(calc(100vh - 96px),740px);min-height:540px}
/* unbroken chevrons, top of section to bottom — turquoise + white mix */
.hero-chev{
  position:absolute;top:0;bottom:0;height:100%;aspect-ratio:.72;
  pointer-events:none;z-index:0;
  clip-path:polygon(0 0,60% 0,100% 50%,60% 100%,0 100%,40% 50%);
}
.hero-build__art{position:absolute;right:2.5%;bottom:6.4rem;height:60%;z-index:1}
.hero-build__art>img{height:100%;width:auto;display:block;position:static;inset:auto}
.hero-build__inner{position:absolute;inset:0;z-index:3;display:flex;align-items:center}
.hero-build__copy{max-width:46%}
.hero--build .hrail{position:absolute;left:0;right:0;bottom:2rem;z-index:4}
/* badges are % of the art box */
.hero-build__art .hb{z-index:4}
/* stage classes from v12 no longer used */

@media(max-width:880px){
  .hero-build__frame{height:auto;min-height:0;padding:96px 0 4.6rem}
  .hero-build__inner{position:static;display:block}
  .hero-build__copy{max-width:none;padding:0 var(--pad) 16px}
  .hero-build__art{position:relative;right:auto;bottom:auto;height:auto;width:min(92%,560px);margin:0 auto}
  .hero-build__art>img{width:100%;height:auto}
  .hero--build .hrail{bottom:1.2rem}
  .hero-chev{opacity:.55}
}

/* ---------- full-height background chevrons (sections) ---------- */
.chv--bg{top:0;bottom:0;height:100%;width:auto}
.chv--grey{color:#e9edee}

/* ---------- eCoC band: navy, readable, chevron texture ---------- */
.ecoc-cta{background:var(--navy)}
.ecoc-cta::before{content:none}
.ecoc-cta .bgimg{display:none}
.ecoc-cta .chv{color:rgba(24,222,210,.08)}

@media(prefers-reduced-motion:reduce){.hero-chev{transition:none}}

/* ===========================================================
   v14 — H1 polish + H4 fit-tabs (deployed)
   =========================================================== */
@media(max-width:880px){
  .hero-build__frame>.hero-chev:nth-of-type(3){display:none}
  .hero-chev{opacity:.5}
  .hb--free{display:none}
  .hb{font-size:clamp(.55rem,2.3vw,.72rem)}
  .line-mask span{animation:none!important;transform:none!important;opacity:1!important}
  .hrail__lab{font-size:.62rem}
}
@media(min-width:1600px){
  .hero-build__frame{height:min(calc(100vh - 96px),820px)}
  .hero-build__art{height:66%;right:5%}
}
.hrail__lab{left:clamp(4.2rem,var(--pos,52%),calc(100% - 5rem))}

.fitsec .eyebrow{color:var(--cyan-2,#0aa79b)}
.fit-lead{color:rgba(27,44,57,.78);margin-top:1rem;max-width:52ch}
.fit-tabs{display:flex;gap:10px;margin:2rem 0 1.8rem;flex-wrap:wrap}
.fit-tab{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  background:#eef1f2;color:var(--navy);border:0;border-radius:8px;cursor:pointer;
  padding:.85rem 1.4rem;display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;
  transition:background .25s,color .25s,transform .25s}
.fit-tab b{font-weight:600;font-size:.68rem;letter-spacing:.06em;opacity:.65;text-transform:none}
.fit-tab.active{background:var(--navy);color:#fff;transform:translateY(-2px)}
.fit-tab.active b{color:var(--cyan)}
.fit-tab:not(.active):hover{background:#e2e7e8}
.fit-panel{display:none}
.fit-panel.active{display:block;animation:fitin .4s var(--ease-out)}
@keyframes fitin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fit-kicker{font-family:var(--display);font-weight:800;font-size:clamp(1.1rem,2vw,1.5rem);color:var(--navy);margin-bottom:.4rem}
.fit-sub{color:rgba(27,44,57,.65);margin-bottom:1.6rem;font-size:.95rem}
.fit-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fit-step{background:#fff;border:1px solid #e7ebec;border-radius:12px;padding:22px;position:relative;overflow:hidden}
.fit-step::after{content:"";position:absolute;right:-14px;bottom:-16px;width:64px;aspect-ratio:.74;
  background:#f0f3f4;clip-path:polygon(0 0,60% 0,100% 50%,60% 100%,0 100%,40% 50%)}
.fit-step .n{font-family:var(--display);font-weight:900;font-size:.72rem;letter-spacing:.14em;color:var(--cyan-2,#0aa79b);text-transform:uppercase}
.fit-step h4{margin:.5rem 0;color:var(--navy);font-size:1.02rem}
.fit-step p{font-size:.9rem;color:rgba(27,44,57,.72);position:relative;z-index:1}
.fit-promise{margin-top:1.6rem;background:var(--cyan);border-radius:12px;padding:1.6rem 2rem;
  display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.fit-promise .q{font-family:var(--display);font-weight:800;color:var(--navy);font-size:clamp(1rem,1.7vw,1.3rem);max-width:38ch}
.fit-promise .t{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(27,44,57,.6)}
.fit-vals{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.fit-val{background:var(--navy);border-radius:12px;padding:22px;color:#fff;position:relative;overflow:hidden}
.fit-val::after{content:"";position:absolute;right:-12px;top:-14px;width:56px;aspect-ratio:.74;
  background:rgba(24,222,210,.1);clip-path:polygon(0 0,60% 0,100% 50%,60% 100%,0 100%,40% 50%)}
.fit-val h4{color:var(--cyan);font-size:1rem;margin-bottom:.5rem}
.fit-val p{font-size:.9rem;color:rgba(255,255,255,.82)}
.fit-arrow{margin-top:1.6rem;display:flex;gap:1rem;align-items:center;background:#f4f7f7;border-radius:12px;padding:1.3rem 1.8rem}
.fit-arrow .a{flex:none;width:34px;aspect-ratio:.74;background:var(--cyan);
  clip-path:polygon(0 0,60% 0,100% 50%,60% 100%,0 100%,40% 50%)}
.fit-arrow p{font-size:.92rem;color:rgba(27,44,57,.8)}
.fit-arrow strong{color:var(--navy)}
@media(max-width:880px){
  .fit-steps{grid-template-columns:1fr}
  .fit-vals{grid-template-columns:1fr}
  .fit-tab{flex:1;min-width:150px}
}

/* ===========================================================
   v16 — H1 hero ticked compliance strip (white, looped)
   =========================================================== */
.hero-ticks{
  list-style:none;margin:1.2rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.55rem 1.5rem;max-width:34rem;
}
.hero-ticks li{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--display);font-weight:700;
  font-size:clamp(.8rem,1.05vw,1rem);color:var(--navy);
  white-space:nowrap;
}
.hero-ticks .tk{
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-weight:900;transform:scale(0);
  text-shadow:0 1px 2px rgba(9,20,28,.25);
}
/* looped stagger: 4 ticks pop in turn, hold, then repeat */
.loaded .hero-ticks .tk{animation:tkloop 6s var(--ease-out,cubic-bezier(.2,.9,.3,1.2)) infinite}
.loaded .hero-ticks li:nth-child(1) .tk{animation-delay:.9s}
.loaded .hero-ticks li:nth-child(2) .tk{animation-delay:1.1s}
.loaded .hero-ticks li:nth-child(3) .tk{animation-delay:1.3s}
.loaded .hero-ticks li:nth-child(4) .tk{animation-delay:1.5s}
@keyframes tkloop{
  0%{transform:scale(0)}
  6%{transform:scale(1.25)}
  12%{transform:scale(1)}
  80%{transform:scale(1)}      /* hold */
  90%{transform:scale(0)}      /* fade out together-ish */
  100%{transform:scale(0)}
}
@media(prefers-reduced-motion:reduce){
  .hero-ticks .tk,.loaded .hero-ticks .tk{animation:none!important;transform:none!important}
}
@media(max-width:880px){
  .hero-ticks{gap:.5rem 1.05rem;max-width:none}
}
/* keep on one row on desktop; allow 2+2 only when genuinely tight */
@media(min-width:881px) and (max-width:1080px){
  .hero-ticks{max-width:26rem}
}


/* ===========================================================
   v19 — hero van pinned right (fills old image area); one-row ticks
   =========================================================== */
.hero-build__art{position:absolute;right:0;top:0;bottom:0;width:56%;z-index:1;display:flex;align-items:center;justify-content:flex-end;padding-right:clamp(12px,3vw,48px)}
.hero-van{
  width:100%;max-width:none;height:auto;
  filter:drop-shadow(0 26px 34px rgba(9,20,28,.26));
  animation:vanfloat 7s ease-in-out infinite;
}
@keyframes vanfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.hb--stat{
  position:absolute;z-index:3;background:#fff;color:var(--navy);
  border-radius:14px;padding:.7rem 1.1rem;box-shadow:0 16px 34px -14px rgba(9,20,28,.4);
  font-family:var(--display);text-align:center;line-height:1.08;opacity:0;transform:translateY(10px);
}
.loaded .hb--stat{animation:hbin .7s var(--ease-out) forwards,bob 6s ease-in-out infinite 1.6s}
.loaded .hb--vantop{animation-delay:.55s,1.7s}
.hb__big{display:block;font-weight:900;font-size:clamp(1.05rem,1.7vw,1.45rem);color:var(--navy)}
.hb__lbl{display:block;font-weight:700;font-size:clamp(.6rem,.9vw,.78rem);color:rgba(27,44,57,.7)}
.hb--vantop{left:24%;top:12%}
/* ticks always one row on desktop — sized to FIT the copy column (never wider than the heading) */
.hero-ticks{flex-wrap:nowrap;max-width:100%;gap:.4rem .85rem}
.hero-ticks li{font-size:clamp(.7rem,.86vw,.88rem)}
@media(max-width:980px){
  .hero-build__art{position:relative;width:100%;padding:0;justify-content:center}
  .hero-van{max-width:560px}
  .hb--vantop{left:16%;top:4%}
  .hero-ticks{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){.hero-van{animation:none}.loaded .hb--stat{animation:hbin .5s var(--ease-out) forwards}}

/* ===========================================================
   v18 — new home sections (client mockup, one-go build)
   =========================================================== */

/* Your process works — intro band */
.procworks{background:#fff;padding-block:clamp(48px,7vw,90px)}
.procworks .h-sec .cy{color:var(--cyan-2,#0aa79b)}

/* Introducing Xspect — dark */
.introducing{background:var(--navy);position:relative;overflow:hidden}
.introducing .split{align-items:center;gap:clamp(28px,4vw,56px)}
.introducing .h-sec .cy{color:var(--cyan)}
.intro-list{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.intro-list li{position:relative;padding-left:1.5rem;color:#fff;font-weight:600}
.intro-list li::before{content:"";position:absolute;left:0;top:.5em;width:.5rem;height:.5rem;background:var(--cyan);border-radius:2px}
.intro-dash img{width:100%;height:auto;border-radius:12px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}

/* Stat ribbon */
.facts-ribbon{background:#0e2027;padding-block:clamp(40px,5vw,64px)}
.facts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center}
.facts-grid .fact{position:relative}
.facts-grid .fact + .fact::before{content:"";position:absolute;left:-10px;top:20%;bottom:20%;width:1px;background:rgba(255,255,255,.12)}
.fact-n{display:block;font-family:var(--display);font-weight:900;font-size:clamp(2rem,4vw,3.2rem);color:var(--cyan)}
.fact-l{display:block;margin-top:.3rem;font-size:.82rem;letter-spacing:.04em;color:rgba(255,255,255,.65)}
@media(max-width:700px){.facts-grid{grid-template-columns:1fr;gap:28px}.facts-grid .fact + .fact::before{display:none}}

/* Built for converters — photo collage */
.builtfor{background:#fff}
.builtfor .split{align-items:center;gap:clamp(28px,4vw,56px)}
.builtfor .h-sec .cy{color:var(--cyan-2,#0aa79b)}
.bf-collage{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"a b" "a c";gap:14px}
.bf-collage figure{position:relative;margin:0;border-radius:12px;overflow:hidden;box-shadow:0 18px 40px -22px rgba(9,20,28,.45)}
.bf-collage img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/4}
.bf-a{grid-area:a}.bf-b{grid-area:b}.bf-c{grid-area:c}
.bf-c img{aspect-ratio:4/3}
.bf-collage figcaption{
  position:absolute;left:10px;bottom:10px;background:#fff;color:var(--navy);
  font-family:var(--display);font-weight:800;font-size:.72rem;padding:.4rem .7rem;border-radius:8px;
  box-shadow:0 8px 20px -8px rgba(9,20,28,.4);
}
.bf-tag{
  position:absolute;z-index:2;background:#fff;color:var(--navy);
  font-family:var(--display);font-weight:800;font-size:.78rem;text-align:center;
  padding:.6rem 1rem;border-radius:12px;box-shadow:0 14px 30px -12px rgba(9,20,28,.4);
}
.bf-tag1{top:44%;left:50%;transform:translate(-50%,-50%);max-width:9rem}
@media(max-width:700px){
  .bf-collage{grid-template-columns:1fr 1fr;grid-template-areas:"a a" "b c"}
  .bf-tag1{position:static;transform:none;max-width:none;margin-top:10px;grid-column:1/-1}
}

/* ===========================================================
   v19 — procworks spacing · phone frame · testimonial slider
   =========================================================== */

/* Your process works — match mockup spacing (airy, not compressed) */
.procworks{padding-block:clamp(64px,9vw,120px)}
.procworks .h-sec{font-size:clamp(1.6rem,3.4vw,2.8rem);line-height:1.12}
.procworks .h-sec .cy{color:var(--cyan-2,#0aa79b);display:block;margin-bottom:.2rem}
.procworks p{font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.7;margin-top:1.8rem!important}

/* Built for converters — collage with phone (mockup) */
.bf-collage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;min-height:420px}
.bf-collage figure{margin:0;border-radius:14px;overflow:hidden;box-shadow:0 18px 40px -22px rgba(9,20,28,.45)}
.bf-collage img{width:100%;height:100%;object-fit:cover;display:block}
.bf-a{aspect-ratio:3/4}
.bf-b{aspect-ratio:3/4;margin-top:40px}
.bf-phone{
  position:absolute;right:-6%;top:8%;width:38%;max-width:220px;z-index:4;
  background:#0e2027;border-radius:26px;padding:10px;box-shadow:0 26px 50px -20px rgba(9,20,28,.6);
  border:2px solid rgba(24,222,210,.25);
}
.bf-phone__scr{background:#fff;border-radius:18px;padding:14px 12px;font-family:var(--body,system-ui)}
.bf-phone__ttl{display:block;font-family:var(--display);font-weight:800;font-size:.82rem;color:var(--navy)}
.bf-phone__stage{display:block;font-size:.6rem;color:rgba(27,44,57,.55);margin:2px 0 10px}
.bf-phone__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.bf-phone__list li{position:relative;padding-left:22px;font-size:.66rem;color:rgba(27,44,57,.8)}
.bf-phone__list li::before{content:"○";position:absolute;left:0;top:-1px;color:rgba(27,44,57,.3);font-size:.8rem}
.bf-phone__list li.ok::before{content:"✓";color:#0aa79b;font-weight:900}
.bf-phone__list li.prog::before{content:"●";color:var(--amber,#f5871f)}
.bf-phone__btn{display:block;margin-top:12px;background:var(--cyan-2,#0aa79b);color:#fff;text-align:center;font-family:var(--display);font-weight:800;font-size:.66rem;padding:8px;border-radius:10px}
.bf-tag{
  position:absolute;z-index:5;background:#fff;color:var(--navy);
  font-family:var(--display);font-weight:800;font-size:.74rem;text-align:center;
  padding:.55rem .9rem;border-radius:12px;box-shadow:0 14px 30px -12px rgba(9,20,28,.4);max-width:9rem;
}
.bf-lbl1{top:-14px;left:8%}
.bf-lbl2{top:-10px;right:-4%}
.bf-lbl3{top:48%;left:38%;transform:translate(-50%,-50%)}
.bf-lbl4{bottom:-12px;left:6%}
@media(max-width:980px){
  .bf-collage{min-height:0}
  .bf-b{margin-top:0}
  .bf-phone{position:relative;right:auto;top:auto;width:60%;margin:14px auto 0}
  .bf-lbl1,.bf-lbl2,.bf-lbl3,.bf-lbl4{position:static;transform:none;max-width:none;display:inline-block;margin:6px 6px 0 0}
}

/* Testimonial slider */
.testi-d{position:relative;overflow:hidden}
.testi-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  background:none;border:0;cursor:pointer;padding:12px;display:grid;place-items:center;
}
.testi-arrow.l{left:2%}
.testi-arrow.r{right:2%}
.testi-arrow .chv{position:static;width:clamp(28px,3.4vw,46px);color:var(--cyan-2,#0aa79b);transition:transform .2s}
.testi-arrow.l .chv{transform:scaleX(-1)}
.testi-arrow:hover .chv{color:var(--cyan)}
.testi-arrow.l:hover .chv{transform:scaleX(-1) translateX(-3px)}
.testi-arrow.r:hover .chv{transform:translateX(3px)}
.dia .bquote{transition:opacity .35s}
.dia.swapping .bquote,.dia.swapping .quote-attrib{opacity:0}
.dia .quote-attrib{transition:opacity .35s}
.testi-dots{display:flex;gap:8px;justify-content:center;margin-top:1.3rem}
.testi-dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(27,44,57,.25);cursor:pointer;padding:0}
.testi-dots button.on{background:var(--cyan-2,#0aa79b);width:22px;border-radius:5px}
@media(max-width:600px){.testi-arrow.l{left:-1%}.testi-arrow.r{right:-1%}}

/* ===========================================================
   v21 — fixes ABOVE Confidence only (client-directed)
   1) procworks wider  2) intro 3-img slight overlap
   3) built-for 3 photos, no phone, correct labels
   (Confidence + everything below untouched)
   =========================================================== */

/* 1) Your process works — wider, not cramped */
.procworks{padding-block:clamp(64px,8vw,110px)}
.procworks__inner{max-width:1000px;margin-inline:auto}
.procworks .h-sec{font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.15}
.procworks .h-sec .cy{color:var(--cyan-2,#0aa79b)}
.procworks__lead{margin:2rem auto 0;max-width:78ch;color:rgba(27,44,57,.82);
  font-size:clamp(1.02rem,1.3vw,1.22rem);line-height:1.8}

/* 2) Introducing — three dashboards, only slightly overlapping (aspect ratio preserved) */
.intro-stack{position:relative;padding-bottom:14%}
.intro-stack img{position:absolute;width:72%;height:auto;border-radius:10px;
  box-shadow:0 24px 50px -24px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.08)}
.intro-stack .is-1{top:0;left:0;z-index:1}
.intro-stack .is-2{top:14%;left:14%;z-index:2}
.intro-stack .is-3{top:28%;left:28%;z-index:3}
@media(max-width:980px){
  .intro-stack{padding-bottom:0;display:flex;flex-direction:column;gap:14px}
  .intro-stack img{position:static;width:100%}
}

/* 3) Built for converters — 3 photos, no phone. Aspect ratios preserved (no object-fit crop distortion; use cover with fixed ratios matching source) */
.bf-nophone{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.bf-nophone figure{margin:0;border-radius:14px;overflow:hidden;box-shadow:0 18px 40px -22px rgba(9,20,28,.45)}
.bf-nophone img{width:100%;height:auto;display:block}   /* height:auto keeps native aspect ratio */
.bf-nophone .bf-a{grid-column:1;grid-row:1}
.bf-nophone .bf-b{grid-column:2;grid-row:1;margin-top:34px}
.bf-nophone .bf-c{grid-column:1 / -1;grid-row:2;max-width:60%;margin-inline:auto}
.bf-nophone .bf-tag{
  position:absolute;z-index:5;background:#fff;color:var(--navy);
  font-family:var(--display);font-weight:800;font-size:.74rem;text-align:center;
  padding:.55rem .9rem;border-radius:12px;box-shadow:0 14px 30px -12px rgba(9,20,28,.4);white-space:nowrap;
}
.bf-nophone .bf-lbl1{top:-12px;left:8%}
.bf-nophone .bf-lbl2{top:-12px;right:6%}
.bf-nophone .bf-lbl3{top:44%;left:50%;transform:translate(-50%,-50%)}
.bf-nophone .bf-lbl4{bottom:30%;left:4%}
@media(max-width:980px){
  .bf-nophone{grid-template-columns:1fr 1fr;gap:12px}
  .bf-nophone .bf-b{margin-top:0}
  .bf-nophone .bf-c{max-width:none}
  .bf-nophone .bf-tag{position:static;display:inline-block;transform:none;margin:6px 6px 0 0;white-space:normal}
}


/* ===========================================================
   v22 — HERO ART: single authoritative block (kills all prior conflicts)
   van 40% smaller, vertically centred (not too high), badges ON the image, responsive
   =========================================================== */
.hero-build__frame{position:relative;height:min(calc(100vh - 96px),720px);min-height:520px}

/* art box occupies the right half, vertically CENTRED */
.hero--build .hero-build__art{
  position:absolute; right:3%; top:50%; transform:translateY(-50%);
  bottom:auto; left:auto;
  width:min(38vw,430px);           /* ~40% smaller than the old ~700px */
  height:auto; z-index:1;
  display:block;
}
/* image keeps native aspect ratio, fills the (smaller) art box */
.hero--build .hero-build__art > img{
  width:100%; height:auto; display:block; position:static; inset:auto;
}

/* callout badges positioned as % of the art box, so they scale WITH the image */
.hero--build .hero-build__art .hb{
  position:absolute; left:var(--x); top:var(--y);
  transform:translate(-6%,-50%);
  z-index:4; white-space:nowrap;
  font-size:clamp(.5rem,0.9vw,.8rem);
}
.hero--build .hero-build__art .hb--free,
.hero--build .hero-build__art .hb--prog{display:flex}

/* tablet/desktop-small */
@media(max-width:1200px){
  .hero--build .hero-build__art{width:min(40vw,380px)}
}
/* mobile: art below copy, centred, badges stay on it and shrink */
@media(max-width:880px){
  .hero-build__frame{height:auto;min-height:0;padding:92px 0 4.4rem}
  .hero--build .hero-build__art{
    position:relative; right:auto; top:auto; transform:none;
    width:min(78vw,360px); margin:1.4rem auto 0;
  }
  .hero--build .hero-build__art .hb{font-size:clamp(.46rem,2.1vw,.66rem)}
}

/* ===========================================================
   v22 — procworks + intro: authoritative (override all prior)
   =========================================================== */

/* Your process works — genuinely spread out */
.section.procworks{padding-block:clamp(80px,11vw,160px)!important}
.procworks .procworks__inner{max-width:1120px!important;margin-inline:auto}
.procworks .h-sec{font-size:clamp(1.8rem,4vw,3.4rem)!important;line-height:1.22!important;letter-spacing:.01em}
.procworks .h-sec .cy{color:var(--cyan-2,#0aa79b);display:block;margin-bottom:.5rem}
.procworks .procworks__lead{
  margin:2.8rem auto 0!important; max-width:70ch!important;
  color:rgba(27,44,57,.82); font-size:clamp(1.08rem,1.4vw,1.35rem)!important;
  line-height:2!important;
}

/* Introducing — spread the three dashboards apart (minimal overlap, all visible) */
.intro-stack{position:relative;padding-bottom:2%!important}
.intro-stack img{
  position:relative!important; display:block; width:82%!important; height:auto;
  border-radius:10px; box-shadow:0 22px 44px -22px rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.1);
  left:auto!important; top:auto!important;
}
.intro-stack .is-1{margin-left:0}
.intro-stack .is-2{margin:-4% 0 0 18%!important}   /* slight step, mostly visible */
.intro-stack .is-3{margin:-4% 0 0 6%!important}
@media(max-width:980px){
  .intro-stack img{width:100%!important;margin:0 0 14px 0!important}
}

/* ===========================================================
   v23 — procworks final: full-width, tight line-height, 2 lines
   + mobile hero text fade fix
   =========================================================== */

/* full-width section, not narrow/cramped */
.section.procworks{padding-block:clamp(56px,7vw,96px)!important}
.procworks .procworks__inner{max-width:1280px!important;margin-inline:auto;padding-inline:clamp(20px,4vw,64px)}

/* headline: exactly two lines — line 1 "Your process works." / line 2 "Keeping it consistent is the challenge." */
.procworks .h-sec{font-size:clamp(1.6rem,3.4vw,3rem)!important;line-height:1.15!important;letter-spacing:0}
.procworks .h-sec .cy{display:block!important;color:var(--cyan-2,#0aa79b);margin-bottom:.1rem!important}

/* body: normal line spacing for THIS section only, wider measure */
.procworks .procworks__lead{
  margin:1.6rem auto 0!important;
  max-width:60ch!important;
  color:rgba(27,44,57,.82);
  font-size:clamp(1rem,1.25vw,1.18rem)!important;
  line-height:1.6!important;
}

/* ---- mobile: stop hero heading/text fading when the counter runs ---- */
@media(max-width:880px){
  .hero-build__copy .line-mask span,
  .hero-build__copy h1 span,
  .hero-build__copy .hero__lead,
  .hero-build__copy .hero-ticks{
    opacity:1!important;
    transform:none!important;
    animation:none!important;
  }
}

/* ===========================================================
   v23 — hero art slightly larger to fill section (badges unchanged:
   they are % of the art box, so they scale WITH the image, same spots)
   =========================================================== */
.hero--build .hero-build__art{
  width:min(46vw,560px)!important;   /* wider to fill the right column */
  right:auto!important;
  left:52%!important;                /* left edge just past the text column → sits next to the copy */
}
@media(max-width:1200px){
  .hero--build .hero-build__art{width:min(46vw,460px)!important}
}
@media(max-width:880px){
  .hero--build .hero-build__art{width:min(82vw,400px)!important;left:auto!important;right:auto!important;margin-inline:auto!important}
}

/* ===========================================================
   v24 — mobile: hero copy above chevrons (stacking fix)
   Static elements can't beat positioned chevrons; make copy
   positioned + high z-index, push chevrons behind.
   =========================================================== */
@media(max-width:880px){
  /* chevrons stay decorative, behind everything */
  .hero--build .hero-chev{z-index:0!important}
  /* copy container: give it a stacking context ABOVE the chevrons */
  .hero--build .hero-build__inner{position:relative!important;z-index:5!important}
  .hero--build .hero-build__copy{position:relative;z-index:5}
  /* art/badges above chevrons too */
  .hero--build .hero-build__art{position:relative;z-index:4}
  /* rail above chevrons */
  .hero--build .hrail{z-index:6}
}

/* ===========================================================
   v25 — mobile fixes: Proof section + Footer
   =========================================================== */
@media(max-width:880px){
  /* PROOF: stack to one column, centre the big number (was pushed off to the side) */
  .proofband > .wrap{
    grid-template-columns:1fr!important;
    gap:28px!important;
    text-align:center;
  }
  .proofband .reveal-x p{margin-inline:auto;max-width:52ch}
  .proof-art{justify-content:center!important;flex-wrap:wrap}
  .proof-art .bignum{font-size:clamp(3.4rem,20vw,6rem)}
  .proof-art > div{text-align:center}
  .proof-art .eyebrow{text-align:center!important}
  .proof-art .chv{display:none} /* the side chevron overflows on mobile */

  /* FOOTER: stack cleanly, nothing wider than the screen */
  .foot__top{flex-direction:column;align-items:flex-start;gap:22px}
  .foot__links{flex-wrap:wrap;gap:12px 18px}
  .foot__top > div:last-child{flex-direction:column;align-items:flex-start;gap:14px;width:100%}
  .foot__top > div:last-child > div{flex-wrap:wrap}
  .foot__legal{flex-direction:column;gap:12px;align-items:flex-start}
  .foot__legal .l{flex-wrap:wrap;gap:12px 18px}
  /* keep decorative chevrons from causing horizontal overflow */
  .foot{overflow:hidden}
  .foot .chv{max-width:60vw}
}
/* belt-and-braces: never let the page scroll sideways on mobile */
@media(max-width:880px){
  html,body{overflow-x:hidden}
}

/* ===========================================================
   v26 — procworks heading: kill the 18ch cap so each sentence
   fits on ONE line. Two <br>-separated sentences = two lines total.
   + quotes section dark background
   =========================================================== */
.procworks .h-sec{
  max-width:none!important;      /* was 18ch — that forced each sentence to wrap */
  white-space:normal;
  line-height:1.18!important;
  font-size:clamp(1.5rem,3vw,2.9rem)!important;
}
/* each of the two sentences on its own single line */
.procworks .h-sec .cy,
.procworks .h-sec{white-space:nowrap}
.procworks .h-sec{white-space:normal}     /* container wraps at the <br> only */
.procworks .procworks__inner{max-width:1180px!important}
.procworks .procworks__lead{line-height:1.55!important;max-width:56ch!important;margin-top:1.4rem!important}

/* on small screens allow wrapping again so it doesn't overflow */
@media(max-width:760px){
  .procworks .h-sec,.procworks .h-sec .cy{white-space:normal}
  .procworks .h-sec{font-size:clamp(1.5rem,6vw,2.2rem)!important}
}

/* ---- quotes / testimonial section: dark background ---- */
.testi-d{background:var(--navy)!important}
.testi-d .dia{background:rgba(255,255,255,.04)!important;color:#fff}
.testi-d .dia .bquote{color:#fff!important}
.testi-d .dia .quote-attrib,
.testi-d .dia .quote-attrib strong{color:rgba(255,255,255,.85)!important}
.testi-d .testi-dots button{background:rgba(255,255,255,.3)}
.testi-d .testi-dots button.on{background:var(--cyan)}
.testi-d .testi-arrow .chv{color:var(--cyan)}

/* ===========================================================
   v27/v28 — HOME: quotes section reverted to cream diamond + dark
   text (client request) · PLATFORM: full page rebuild to the
   6-part wireframe (hero, strip, multilayer diagram, compliance,
   analytics carousel, project-tracking build animation, system
   integration hex cluster, how-we-roll, demo, what-changes)
   =========================================================== */

/* ---- HOME quotes: cream diamond, dark quotes (reverts v26 dark bg) ---- */
.testi-d{background:#fff!important}
.testi-d .dia{background:var(--cream-2)!important;color:var(--navy)}
.testi-d .dia .bquote{color:var(--navy)!important}
.testi-d .dia .quote-attrib{color:rgba(27,44,57,.6)!important}
.testi-d .dia .quote-attrib strong{color:var(--navy)!important}
.testi-d .testi-dots button{background:rgba(27,44,57,.22)}
.testi-d .testi-dots button.on{background:var(--cyan-deep)}
.testi-d .testi-arrow .chv{color:var(--cyan)}

/* ============ PLATFORM HERO — same chevron system as home ============ */
.phero-art{position:absolute;right:10%;top:50%;translate:0 -50%;width:min(40vw,560px);z-index:2}
.phero-art .ptab{background:#0d1922;border-radius:20px;padding:clamp(8px,1vw,14px);box-shadow:0 34px 70px -18px rgba(4,26,30,.5)}
.phero-art .ptab img{width:100%;height:auto;display:block;border-radius:12px}
.phero-art .ptab--b{position:absolute;width:54%;left:-6%;bottom:-16%}
.hero-build__copy h1 .cvw{color:#fff}
@media(max-width:900px){
  .phero-art{position:relative;right:auto;top:auto;translate:none;width:min(86%,540px);margin:1.6rem auto 3.4rem}
  .phero-art .ptab--b{left:-4%;bottom:-12%}
}

/* ============ SUB-HERO STRIP (Your process · Built for converters · ticks) ============ */
.pstrip{background:#fff;border-bottom:4px solid var(--cyan)}
.pstrip .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.pstrip .cell{padding:clamp(20px,2.6vw,34px) clamp(16px,2vw,28px);border-left:1px solid var(--line);display:flex;gap:14px;align-items:flex-start}
.pstrip .cell:first-child{border-left:0;padding-left:0}
.pstrip h4{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1rem;letter-spacing:.01em;color:var(--navy)}
.pstrip p{font-size:.9rem;color:rgba(27,44,57,.72);margin-top:.35rem;line-height:1.5}
.pstrip .ic{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--cyan);color:var(--navy);font-weight:900}
@media(max-width:980px){.pstrip .wrap{grid-template-columns:1fr 1fr}.pstrip .cell{border-left:0;padding-left:0}}
@media(max-width:560px){.pstrip .wrap{grid-template-columns:1fr}}

/* ============ P2 — MULTI-LAYERED QC DIAGRAM ============ */
.mlq-quote{max-width:44ch;margin:1.2rem auto 0;color:rgba(27,44,57,.72);font-size:1rem;text-align:center}
.mlq-frame{position:relative;max-width:1180px;margin:clamp(2.4rem,4vw,4rem) auto 0;padding:clamp(30px,5vw,70px) clamp(22px,7vw,96px)}
.mlq-outline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.mlq-outline path{fill:none;stroke:var(--navy);stroke-width:3;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s var(--ease)}
.mlq-frame.in .mlq-outline path{stroke-dashoffset:0}
.mlq-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3.4vw,54px) clamp(20px,3vw,48px);text-align:left}
.mcard h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1rem,1.4vw,1.25rem);color:var(--navy);letter-spacing:.02em}
.mcard p{font-size:.9rem;line-height:1.55;color:rgba(27,44,57,.74);margin-top:.55rem}
.mcard .mbar{width:44px;height:4px;background:var(--cyan);margin-bottom:.7rem;clip-path:polygon(0 0,80% 0,100% 100%,20% 100%)}
.mlq-sum{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);max-width:1080px;margin:clamp(2.2rem,4vw,3.6rem) auto 0}
.mlq-sum p{font-size:1rem;line-height:1.6;color:var(--navy);text-align:center}
@media(max-width:900px){.mlq-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
  .mlq-grid{grid-template-columns:1fr}
  .mlq-outline{display:none}
  .mlq-frame{padding:0}
  .mlq-sum{grid-template-columns:1fr}
}

/* ============ P3 — COMPLIANCE MANAGEMENT ============ */
.cmp-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(26px,4.5vw,72px);align-items:start;margin-top:clamp(2rem,3.4vw,3.2rem)}
.cmp-grid>p{font-size:1rem;line-height:1.65;color:rgba(27,44,57,.8)}
.cmp-list{list-style:none;display:grid;gap:.75rem}
.cmp-list li{display:flex;gap:12px;align-items:flex-start;font-weight:600;color:var(--navy)}
.cmp-list li::before{content:"✓";flex:none;width:26px;height:26px;border-radius:50%;background:var(--cyan);color:var(--navy);display:grid;place-items:center;font-size:.8rem;font-weight:900}
@media(max-width:760px){.cmp-grid{grid-template-columns:1fr}}

/* ============ P3 — REAL-TIME ANALYTICS · looped screenshot carousel ============ */
.dashband{background:#0e2a33;color:#fff;overflow:hidden}
.dashband .h-sec{color:#fff}
.dashband .sub{color:rgba(255,255,255,.82);max-width:44ch;margin:1.1rem auto 0;text-align:center}
.dmar{margin-top:clamp(2.4rem,4vw,3.6rem);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.dmar-track{display:flex;gap:clamp(18px,2.6vw,34px);width:max-content;padding-block:26px;animation:dmar 75s linear infinite;will-change:transform}
.dmar:hover .dmar-track{animation-play-state:paused}
@keyframes dmar{to{transform:translateX(-50%)}}
.dcard{position:relative;flex:0 0 auto;width:clamp(250px,30vw,430px);background:#fff;border-radius:14px;padding:8px;box-shadow:0 24px 50px -20px rgba(0,0,0,.55)}
.dcard img{width:100%;height:auto;display:block;border-radius:9px}
.dcard .lbl{position:absolute;top:-15px;left:20px;background:var(--cyan);color:var(--navy);font-family:var(--display);font-weight:800;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;padding:8px 15px;border-radius:10px;box-shadow:0 10px 24px -10px rgba(0,0,0,.5);z-index:2}
.dcard .lbl--b{top:auto;bottom:-15px;left:auto;right:20px}
.dashband .close{color:rgba(255,255,255,.85);max-width:72ch;margin:clamp(2rem,3.4vw,3rem) auto 0;text-align:center;line-height:1.65}
@media(prefers-reduced-motion:reduce){
  .dmar-track{animation:none}
  .dmar{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}

/* ============ OFFICIAL TRUCK ICON (assets/img/platform/truck.webp) ============ */
/* P4 stages: ghost silhouette + full truck that "builds itself" in with a
   left-to-right wipe, landing at a progressively darker opacity per stage */
.ptruck{position:relative;width:min(100%,120px);margin-inline:auto}
.ptruck img{width:100%;height:auto;display:block}
.ptruck .ghost{opacity:.12;filter:grayscale(1)}
.ptruck .fill{position:absolute;inset:0;opacity:var(--op,1);
  clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease)}
.pstage.on .ptruck .fill{clip-path:inset(0 -2% 0 0)}
.pstage:nth-child(1) .fill{--op:.4}
.pstage:nth-child(2) .fill{--op:.52}
.pstage:nth-child(3) .fill{--op:.64}
.pstage:nth-child(4) .fill{--op:.76}
.pstage:nth-child(5) .fill{--op:.88}
.pstage:nth-child(6) .fill{--op:1}
/* How-we-roll trucks: same icon, light→dark opacity set inline */
.hrtruck{width:min(100%,110px);height:auto;display:block;margin:1rem auto}

/* ============ P4 — PROJECT TRACKING build animation ============ */
.ptrack-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.6vw,22px);margin-top:clamp(2.4rem,4vw,3.6rem)}
.pstage{text-align:center}
.pstage h4{margin-top:.9rem;font-size:clamp(.82rem,1.1vw,1rem);font-family:var(--body);font-weight:600;color:var(--navy);line-height:1.3}
/* until a stage is "on", only the ghost silhouette shows + text hidden */
.pstage h4{opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.pstage.on h4{opacity:1;transform:none}
/* progress rail */
.prail{position:relative;height:66px;margin-top:clamp(1.8rem,3vw,2.8rem);background:linear-gradient(100deg,#18ded2 0%,#3ae4d8 30%,#18ded2 55%,#54e8de 80%,#18ded2 100%)}
.prail::before,.prail::after{content:"";position:absolute;top:0;bottom:0;width:22%;background:rgba(255,255,255,.16);transform:skewX(-24deg)}
.prail::before{left:8%}.prail::after{left:56%}
.prail-line{position:absolute;left:3.5%;right:3.5%;top:50%;height:5px;background:var(--navy);translate:0 -50%;border-radius:3px}
.prail-fill{position:absolute;left:3.5%;top:50%;height:5px;background:#fff;translate:0 -50%;width:0;transition:width .9s var(--ease);border-radius:3px;z-index:1}
.pnode{position:absolute;top:50%;translate:-50% -50%;width:32px;height:32px;border-radius:50%;background:#0aa89b;display:grid;place-items:center;color:#fff;font-size:.85rem;font-weight:900;z-index:2;transition:background .5s var(--ease),box-shadow .5s var(--ease)}
.pnode i{font-style:normal}
.pnode.done{background:var(--navy);box-shadow:0 0 0 4px rgba(255,255,255,.55)}
.pnode.cur{background:var(--navy)}
.pnode.cur::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:3px solid #fff;border-top-color:transparent;animation:pspin 1.1s linear infinite}
@keyframes pspin{to{transform:rotate(1turn)}}
.ptrack-close{max-width:34ch;margin:clamp(2rem,3.4vw,3rem) auto 0;text-align:center;font-size:1.05rem;line-height:1.6;color:var(--navy)}
@media(max-width:880px){.ptrack-grid{grid-template-columns:repeat(3,1fr);gap:22px 14px}}
@media(max-width:480px){.ptrack-grid{grid-template-columns:repeat(2,1fr)}.pnode{width:24px;height:24px;font-size:.7rem}}
@media(prefers-reduced-motion:reduce){
  .pstage h4{opacity:1;transform:none}
  .ptruck .fill{clip-path:inset(0 -2% 0 0);transition:none}
  .pnode.cur::after{animation:none}
}

/* ============ P5 — SYSTEM INTEGRATION hex cluster ============ */
.sint-intro{max-width:44ch;font-size:1rem;line-height:1.65;color:rgba(27,44,57,.8)}
.sint-svgwrap{max-width:940px;margin:clamp(1rem,2vw,2rem) auto 0}
.sint-svg{width:100%;height:auto;display:block}
.sint-svg .hlink{stroke:var(--cyan);stroke-width:2.5;stroke-dasharray:6 9;animation:hflow 3.6s linear infinite}
.sint-svg .hlink.rev{animation-direction:reverse}
@keyframes hflow{to{stroke-dashoffset:-15}}
.sint-svg .hex{fill:#fff;stroke:var(--cyan);stroke-width:3;transition:filter .4s}
.sint-svg .hexg{animation:hexglow 7.2s ease-in-out infinite}
.sint-svg .hexg:nth-of-type(1){animation-delay:0s}
.sint-svg .hexg:nth-of-type(2){animation-delay:1.2s}
.sint-svg .hexg:nth-of-type(3){animation-delay:2.4s}
.sint-svg .hexg:nth-of-type(4){animation-delay:3.6s}
.sint-svg .hexg:nth-of-type(5){animation-delay:4.8s}
.sint-svg .hexg:nth-of-type(6){animation-delay:6s}
@keyframes hexglow{0%,14%,100%{filter:none}7%{filter:drop-shadow(0 0 14px rgba(24,222,210,.85))}}
.sint-svg text{font-family:var(--display);font-weight:800;font-stretch:100%;fill:var(--navy);text-transform:uppercase;font-size:19px;letter-spacing:0;text-anchor:middle}
.sint-svg .ctruck{animation:cfloat 5s ease-in-out infinite}
@keyframes cfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.sint-close{max-width:34ch;margin:0 0 0 auto;text-align:right;font-size:1rem;line-height:1.6;color:var(--navy)}
@media(max-width:640px){.sint-close{text-align:center;margin-inline:auto}}
@media(prefers-reduced-motion:reduce){.sint-svg .hlink,.sint-svg .hexg,.sint-svg .ctruck{animation:none}}

/* ============ P6 — HOW WE ROLL ============ */
.hroll-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2.2vw,32px);margin-top:clamp(2.4rem,4vw,3.4rem);text-align:center}
.hstep h4{font-size:clamp(.9rem,1.15vw,1.05rem);font-family:var(--body);font-weight:700;color:var(--navy);line-height:1.35;min-height:3.6em}
.hstep p{font-size:.85rem;line-height:1.55;color:rgba(27,44,57,.72)}
@media(max-width:900px){.hroll-grid{grid-template-columns:repeat(2,1fr)}.hstep h4{min-height:0}}
@media(max-width:480px){.hroll-grid{grid-template-columns:1fr}}

/* ============ P6 — DEMO SECTION (dark CI + iso-build backdrop) ============ */
.demo{position:relative;overflow:hidden;background:var(--navy-2)}
.demo .bgart{position:absolute;right:-6%;top:50%;translate:0 -50%;width:min(58%,760px);height:auto;opacity:.3;pointer-events:none;z-index:0}
.demo .wrap{position:relative;z-index:2}
.demo .h-sec{color:#fff}
.demo .tabwrap{max-width:900px;margin:clamp(2.2rem,4vw,3.4rem) auto 0;position:relative;z-index:2}
.demo .tabwrap img{width:100%;height:auto;display:block;border-radius:14px;filter:drop-shadow(0 34px 54px rgba(0,0,0,.5))}
@media(max-width:760px){.demo .bgart{width:110%;right:-30%;opacity:.18}}

/* ============ P6 — WHAT CHANGES chevron flow ============ */
.wch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.8vw,26px);margin-top:clamp(2.4rem,4vw,3.4rem)}
.wch h4{text-align:center;font-family:var(--body);font-weight:700;font-size:clamp(.9rem,1.15vw,1.05rem);color:var(--navy);line-height:1.35;min-height:3.9em;display:flex;align-items:flex-end;justify-content:center}
.wch .arrow{height:clamp(70px,9vw,118px);margin-top:1rem;position:relative;overflow:hidden;
  clip-path:polygon(0 0,78% 0,100% 50%,78% 100%,0 100%,20% 50%);
  animation:wnudge 3.4s ease-in-out infinite}
.wch:nth-child(1) .arrow{background:linear-gradient(90deg,#d3f6f2,#aeeee8);animation-delay:0s}
.wch:nth-child(2) .arrow{background:linear-gradient(90deg,#aeeee8,#7fe6dc);animation-delay:.3s}
.wch:nth-child(3) .arrow{background:linear-gradient(90deg,#7fe6dc,#3ae0d3);animation-delay:.6s}
.wch:nth-child(4) .arrow{background:linear-gradient(90deg,#3ae0d3,#18ded2);animation-delay:.9s}
.wch .arrow::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.6) 50%,transparent 68%);transform:translateX(-130%);animation:wshine 3.4s linear infinite;animation-delay:inherit}
@keyframes wnudge{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
@keyframes wshine{0%{transform:translateX(-130%)}55%,100%{transform:translateX(130%)}}
.wch p{margin-top:1.1rem;font-size:.85rem;line-height:1.55;color:rgba(27,44,57,.72);text-align:center}
.wch-close{max-width:58ch;margin:clamp(2.4rem,4vw,3.4rem) auto 0;text-align:center;font-size:1.05rem;line-height:1.65;color:var(--navy)}
@media(max-width:880px){.wch-grid{grid-template-columns:1fr 1fr}.wch h4{min-height:0}}
@media(max-width:480px){.wch-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.wch .arrow,.wch .arrow::after{animation:none}}

/* ===========================================================
   v29 — PLATFORM: "One platform connecting every critical
   event" tag callouts no longer overlap / overflow on mobile.
   On phones the two absolutely-positioned tag rows become
   centred wrapping flex rows that sit above/below the heading.
   + CASE STUDIES page styles.
   =========================================================== */
@media(max-width:760px){
  .converge .tagcloud{
    position:static;height:auto;
    display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
    margin:0 auto;max-width:100%;
  }
  .converge .tagcloud .tag{
    position:static;left:auto!important;right:auto!important;
    font-size:.68rem;padding:7px 12px;white-space:normal;
  }
  .converge h2{font-size:clamp(1.8rem,7.5vw,2.6rem)}
}

/* ============ CASE STUDIES ============ */
/* hero float badges over the truck photo */
.cs-hero-truck{position:relative}
.cs-hero-truck>img{width:100%;height:auto;display:block;border-radius:12px}
.cs-badge{
  position:absolute;background:#fff;color:var(--navy);
  font-family:var(--display);font-weight:800;font-size:clamp(.72rem,1vw,.92rem);
  padding:10px 16px;border-radius:4px;box-shadow:0 16px 34px -18px rgba(12,24,32,.5);
  white-space:nowrap;z-index:2;
}
.cs-badge.b1{top:10%;left:6%}
.cs-badge.b2{top:46%;right:-4%}
.cs-badge.b3{bottom:6%;left:-2%}
@media(max-width:560px){
  .cs-badge{font-size:.66rem;padding:7px 11px}
  .cs-badge.b2{right:2%}
  .cs-badge.b3{left:2%}
}

/* "when you need proof" band */
.cs-proof{background:var(--cream);}
.cs-proof .h-sec{max-width:34ch}
.cs-proof .cy{color:var(--cyan)}
.cs-proof p{color:var(--navy);margin-top:1.2rem;max-width:78ch;line-height:1.7;font-size:clamp(1rem,1.3vw,1.15rem)}

/* company title block */
.cs-company .h-sec{margin-bottom:.2rem;white-space:nowrap;max-width:none}
@media(max-width:520px){.cs-company .h-sec{white-space:normal;font-size:clamp(1.8rem,9vw,2.6rem)}}
.cs-company .sub{font-style:italic;color:var(--grey);font-size:clamp(1rem,1.6vw,1.35rem)}

/* dark 4x stat strip */
.cs-stats{background:var(--navy);color:#fff}
.cs-stats--cyan{background:var(--cyan)}
.cs-stats .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;text-align:center;padding-block:clamp(22px,3vw,38px)}
.cs-stats .n{font-family:var(--display);font-weight:900;font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1;display:block}
.cs-stats .l{font-size:clamp(.66rem,1vw,.8rem);opacity:.85;margin-top:.35rem;display:block}
.cs-stats--cyan .n,.cs-stats--cyan .l{color:var(--navy)}
@media(max-width:680px){.cs-stats .wrap{grid-template-columns:repeat(2,1fr);gap:18px}}

/* detailed case study block (Intro / Challenge / How / Benefits + quote) */
.cs-detail{position:relative}
.cs-detail.dark{background:var(--navy);color:#fff}
.cs-detail.dark .cs-h{color:#fff}
.cs-detail.dark .cy{color:var(--cyan)}
.cs-detail.dark .cs-body{color:rgba(255,255,255,.82)}
.cs-detail.dark .cs-quote{color:#fff}
.cs-lead-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.cs-photo{position:relative}
.cs-photo>img{width:100%;height:auto;display:block;border-radius:10px;background:#e4e8ea;min-height:280px;object-fit:cover}
.cs-photo .cs-badge{font-size:clamp(.68rem,.95vw,.85rem)}
.cs-photo .p1{top:6%;left:2%}
.cs-photo .p2{top:42%;right:0}
.cs-photo .p3{bottom:6%;left:6%}
.cs-h{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.15rem,1.7vw,1.5rem);color:var(--navy);margin-bottom:.5rem;letter-spacing:.01em}
.cs-body{font-size:.95rem;line-height:1.65;color:rgba(27,44,57,.8)}
.cs-body+.cs-body{margin-top:1rem}
.cs-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);margin-top:clamp(2.4rem,4vw,3.6rem)}
.cs-block h3.cs-h{margin-top:1.6rem}
.cs-block h3.cs-h:first-child{margin-top:0}
.cs-quote{font-size:1rem;line-height:1.7;font-style:italic;color:var(--navy)}
.cs-quote b,.cs-quote strong{font-style:normal;font-weight:700}
.cs-quote+.cs-quote{margin-top:1.2rem}
.cs-attrib{display:flex;gap:20px;align-items:center;margin-top:clamp(2rem,4vw,3rem)}
.cs-attrib img.ph{width:120px;height:135px;object-fit:cover;object-position:center 30%;border-radius:6px;flex:none;background:#d9dee0}
.cs-attrib .who{font-size:.95rem;line-height:1.5;color:inherit}
.cs-attrib .who b{font-weight:700}
.cs-attrib .logo{margin-left:auto;max-width:200px;height:auto}
@media(max-width:600px){
  /* badges leave the absolute overlay and become tidy chips under the photo */
  .cs-photo{margin-bottom:1.4rem;display:flex;flex-direction:column;gap:10px;width:100%;max-width:100%}
  .cs-photo>img{min-height:0;order:-1;width:100%;max-width:100%}
  .cs-photo .cs-badge{
    position:static;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
    display:inline-flex;align-self:flex-start;white-space:normal;box-shadow:0 6px 16px -10px rgba(12,24,32,.4);
  }
  .cs-detail.dark .cs-photo .cs-badge{background:rgba(255,255,255,.1);color:#fff}
}
@media(max-width:820px){
  .cs-lead-grid,.cs-cols{grid-template-columns:1fr}
  .cs-photo{margin-bottom:2.4rem}
  .cs-photo .p2{right:2%}
  .cs-attrib{flex-wrap:wrap}
  .cs-attrib .logo{margin-left:0;flex-basis:100%;max-width:180px}
}

/* more case studies cards */
.more-cs{background:#fff}
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,32px);margin-top:clamp(2rem,3.4vw,3rem)}
.mcs-card{display:flex;flex-direction:column}
.mcs-card>img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:#dfe3e4;min-height:180px}
.mcs-body{background:var(--cyan);padding:clamp(20px,1.8vw,26px);flex:1;display:flex;flex-direction:column}
.mcs-body .q{color:var(--navy);font-size:.95rem;line-height:1.5}
.mcs-body .ceo{color:var(--navy);font-weight:600;margin:1rem 0 1.2rem}
.mcs-body .btn{align-self:flex-start;margin-top:auto}
.mcs-card .foot-stat{margin-top:1rem;color:rgba(27,44,57,.78);font-size:.95rem;line-height:1.5}
.mcs-body .btn--ghost::before{background:var(--cyan);box-shadow:inset 0 0 0 1.5px var(--navy)}
@media(max-width:820px){.more-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

/* ===========================================================
   v32 — ABOUT PAGE (rebuilt to the 4 wireframes)
   Hero "Built for you" (chevron system) · intro + stat ribbon ·
   Your process two-col · Built from experience (dark + founder) ·
   Ian quote band · thinking cards · partnership (cyan + truck) ·
   CoolVan + Ready-to-get-started contact form.
   =========================================================== */

/* intro paragraphs under hero */
.ab-intro .wrap{max-width:920px}
.ab-intro p{font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.7;color:rgba(27,44,57,.82)}
.ab-intro p+p{margin-top:1.1rem}
.ab-intro strong{color:var(--navy)}

/* YOUR PROCESS. two-column */
.ab-process{position:relative}
.ab-proc-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,80px);align-items:start}
.ab-proc-left h2{font-family:var(--display);font-weight:900;font-stretch:var(--hd-stretch);text-transform:uppercase;font-size:clamp(2.4rem,5vw,4rem);line-height:.95;color:var(--navy)}
.ab-proc-left h2 .cy{color:var(--cyan)}
.ab-proc-left p{margin-top:1.2rem;color:rgba(27,44,57,.78);font-size:1rem;line-height:1.6;max-width:34ch}
.ab-proc-right>p{font-size:1rem;line-height:1.65;color:rgba(27,44,57,.82)}
.ab-qs{list-style:none;margin:1.4rem 0;display:grid;gap:.7rem}
.ab-qs li{display:flex;gap:12px;align-items:flex-start;font-weight:600;color:var(--navy);font-size:1.02rem}
.ab-qs li::before{content:"?";flex:none;width:26px;height:26px;border-radius:50%;background:var(--cyan);color:var(--navy);display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:.85rem}
.ab-proc-right .ab-cap{margin-top:1.4rem;color:rgba(27,44,57,.82);line-height:1.65}
@media(max-width:820px){.ab-proc-grid{grid-template-columns:1fr;gap:28px}.ab-proc-left p{max-width:none}}

/* BUILT FROM EXPERIENCE — dark, text + founder card */
.ab-exp{background:var(--navy);color:#fff}
.ab-exp-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.ab-exp h2{font-family:var(--display);font-weight:800;font-stretch:var(--hd-stretch);text-transform:uppercase;font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.05;margin-bottom:1.2rem}
.ab-exp h2 .cy{color:var(--cyan)}
.ab-exp p{color:rgba(255,255,255,.82);line-height:1.7;font-size:1rem}
.ab-exp p+p{margin-top:1rem}
.ab-founder{text-align:center}
.ab-founder img{width:100%;max-width:320px;height:auto;border-radius:12px;display:block;margin:0 auto;background:#2a3644;aspect-ratio:4/5;object-fit:cover}
.ab-founder .name{font-family:var(--display);font-weight:800;text-transform:uppercase;margin-top:1.1rem;font-size:1.1rem;letter-spacing:.03em}
.ab-founder .role{color:rgba(255,255,255,.7);font-size:.88rem;margin-top:.25rem}
@media(max-width:820px){.ab-exp-grid{grid-template-columns:1fr;gap:32px}.ab-founder img{max-width:260px}}

/* Ian quote band (cyan) */
.ab-quote{background:var(--cyan)}
.ab-quote .wrap{max-width:960px;text-align:center}
.ab-quote blockquote{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.2rem,2.4vw,2rem);line-height:1.12;color:var(--navy)}
.ab-quote .attrib{margin-top:1.2rem;color:rgba(27,44,57,.72);font-size:.95rem;font-weight:600}

/* THINKING cards (3) */
.ab-think .lead{max-width:64ch;margin:1.1rem auto 0;text-align:center;color:rgba(27,44,57,.78);line-height:1.65}
.ab-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,40px);margin-top:clamp(2.4rem,4vw,3.4rem)}
.ab-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:clamp(24px,2.4vw,34px);transition:transform .3s var(--ease),box-shadow .3s}
.ab-card:hover{transform:translateY(-5px);box-shadow:0 26px 52px -28px rgba(12,24,32,.35)}
.ab-card .bar{width:44px;height:4px;background:var(--cyan);margin-bottom:1rem;clip-path:polygon(0 0,80% 0,100% 100%,20% 100%)}
.ab-card h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.15rem;color:var(--navy);letter-spacing:.02em}
.ab-card p{margin-top:.7rem;font-size:.95rem;line-height:1.6;color:rgba(27,44,57,.75)}
@media(max-width:820px){.ab-cards{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}

/* PARTNERSHIP band (cyan, truck) */
.ab-partner{background:var(--cyan);position:relative;overflow:hidden}
.ab-partner-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,5vw,64px);align-items:center}
.ab-partner h2{font-family:var(--display);font-weight:900;font-stretch:var(--hd-stretch);text-transform:uppercase;font-size:clamp(2rem,4vw,3.2rem);line-height:.98;color:var(--navy)}
.ab-partner .tagline{font-family:var(--display);font-weight:700;font-size:clamp(1rem,1.6vw,1.3rem);color:var(--navy);margin:.6rem 0 1.2rem;font-style:italic}
.ab-partner p{color:rgba(27,44,57,.82);line-height:1.7;font-size:1rem;max-width:44ch}
.ab-partner .truck{width:100%;height:auto;display:block;filter:drop-shadow(0 24px 40px rgba(4,26,30,.28))}
@media(max-width:820px){.ab-partner-grid{grid-template-columns:1fr;gap:28px}.ab-partner p{max-width:none}}

/* CoolVan band on About page */
.ab-coolvan{background:var(--navy);color:#fff}
.ab-coolvan .wrap{display:flex;align-items:center;gap:18px 28px;flex-wrap:wrap}
.ab-coolvan img{height:clamp(44px,6vw,66px);width:auto;display:block}
.ab-coolvan .sub{color:rgba(255,255,255,.7);font-size:.85rem}
.ab-coolvan .tag{font-style:italic;color:rgba(255,255,255,.85);margin-left:auto;font-size:.95rem;max-width:34ch}
@media(max-width:600px){.ab-coolvan .tag{margin-left:0;flex-basis:100%}}

/* extra contact-form fields (build volume select, consent) reuse .contact-form */
.contact-form .cf-consent{flex-direction:row;align-items:flex-start;gap:10px;font-weight:500;font-size:.85rem;color:rgba(27,44,57,.8)}
.contact-form .cf-consent input{width:auto;margin-top:3px}

/* ===========================================================
   v33 — INSIGHTS PAGE (rebuilt to the 2 wireframes)
   Hero "For smoother, safer builds" (navy + VCA portal shot) ·
   Real challenges band · 3 insight cards (image + cyan body +
   date + link) · Want-to-see contact form.
   =========================================================== */

/* HERO — navy, split copy + VCA portal screenshot */
.in-hero{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.in-hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,72px);align-items:center}
.in-hero .eyebrow{color:var(--cyan);font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;margin-bottom:1rem;display:block}
.in-hero h1{font-family:var(--display);font-weight:900;font-stretch:var(--hd-stretch);text-transform:uppercase;font-size:clamp(2.6rem,5.4vw,4.6rem);line-height:.95;color:#fff}
.in-hero h1 .cy{color:var(--cyan)}
.in-hero p{margin-top:1.4rem;color:rgba(255,255,255,.82);line-height:1.65;font-size:1.02rem;max-width:46ch}
.in-hero .in-cta{margin-top:1.8rem;display:flex;gap:12px;flex-wrap:wrap}
.in-portal{border-radius:14px;overflow:hidden;box-shadow:0 34px 70px -22px rgba(0,0,0,.6);background:#fff}
.in-portal img{width:100%;height:auto;display:block}
@media(max-width:860px){.in-hero-grid{grid-template-columns:1fr;gap:32px}.in-hero p{max-width:none}}

/* REAL CHALLENGES band (navy) */
.in-band{background:var(--navy-2);color:#fff}
.in-band .wrap{max-width:960px}
.in-band h2{font-family:var(--display);font-weight:900;font-stretch:var(--hd-stretch);text-transform:uppercase;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.05}
.in-band h2 .cy{color:var(--cyan)}
.in-band p{margin-top:1.2rem;color:rgba(255,255,255,.82);line-height:1.7;font-size:1.02rem}

/* INSIGHT CARDS (image + cyan body) */
.in-cards-sec .lead{text-align:center;max-width:56ch;margin:1.1rem auto 0;color:rgba(27,44,57,.78);line-height:1.6}
.in-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,34px);margin-top:clamp(2.4rem,4vw,3.4rem)}
.in-card{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;box-shadow:0 20px 44px -26px rgba(12,24,32,.35);transition:transform .3s var(--ease),box-shadow .3s}
.in-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -28px rgba(12,24,32,.45)}
.in-card>img{width:100%;height:200px;object-fit:cover;display:block;background:#dfe3e4}
.in-card__body{background:var(--cyan);padding:clamp(22px,2vw,30px);flex:1;display:flex;flex-direction:column}
.in-card__h{font-family:var(--display);font-weight:900;font-stretch:var(--hd-stretch);text-transform:uppercase;font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.05;color:var(--navy)}
.in-card__body p{margin-top:.9rem;font-size:.92rem;line-height:1.55;color:rgba(20,40,44,.86)}
.in-card__foot{margin-top:auto;padding-top:1.4rem;display:flex;align-items:center;justify-content:space-between;gap:12px}
.in-card__date{font-size:.82rem;color:rgba(20,40,44,.7);font-weight:600}
.in-card__link{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:.82rem;letter-spacing:.02em;color:var(--navy);white-space:nowrap;border-bottom:2px solid var(--navy);padding-bottom:2px;transition:opacity .2s}
.in-card__link:hover{opacity:.6}
@media(max-width:860px){.in-cards{grid-template-columns:1fr;max-width:440px;margin-inline:auto}}

/* ===========================================================
   v34 — ABOUT PAGE corrections to match wireframes:
   hero mechanic photo · "We start with your process" photo-left
   two-col · 6-card checkerboard thinking grid · cyan logo strip
   marquee (replaces the broken single navy CoolVan band).
   =========================================================== */

/* hero: large mechanic photo next to the copy (About only) —
   explicit vertical centring so it sits properly beside the text. */
.about-page .hero--build .hero-build__art{
  width:min(46vw,560px)!important;right:auto!important;left:52%!important;
  top:50%!important;bottom:auto!important;height:auto!important;
  transform:translateY(-50%)!important;
  display:block!important;
}
.about-page .hero--build .hero-build__art img{
  width:100%!important;height:auto!important;aspect-ratio:16/12;object-fit:cover!important;
  border-radius:16px;box-shadow:0 34px 70px -24px rgba(4,26,30,.5);
}
@media(max-width:900px){
  .about-page .hero--build .hero-build__art{position:relative!important;width:min(82vw,460px)!important;left:auto!important;right:auto!important;top:auto!important;transform:none!important;margin:1.5rem auto 0!important}
}

/* WE START WITH YOUR PROCESS — photo left, text right */
.ab-proc-photo{width:100%;height:auto;display:block;border-radius:12px;background:#dfe3e4;aspect-ratio:3/2;object-fit:cover}
@media(max-width:820px){.ab-proc-grid .ab-proc-photo{margin-bottom:1.4rem}}

/* THINKING — 6 cards, cyan/navy checkerboard */
.ab-cards6{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(2.4rem,4vw,3.4rem);border-radius:16px;overflow:hidden}
.ab-cell{padding:clamp(26px,2.6vw,40px);min-height:clamp(180px,15vw,230px);display:flex;flex-direction:column;justify-content:flex-start;position:relative;transition:transform .35s var(--ease),box-shadow .35s var(--ease),filter .35s var(--ease);cursor:default}
.ab-cell:hover{transform:translateY(-6px);box-shadow:0 24px 48px -22px rgba(12,24,32,.5);z-index:2;filter:brightness(1.04)}
.ab-cell h3{position:relative;display:inline-block}
.ab-cell h3::after{content:"";position:absolute;left:0;bottom:-6px;height:3px;width:0;background:currentColor;transition:width .35s var(--ease)}
.ab-cell:hover h3::after{width:38px}
.ab-cell.cy{background:var(--cyan)}
.ab-cell.nv{background:var(--navy)}
.ab-cell h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1rem,1.3vw,1.2rem);letter-spacing:.02em;line-height:1.1}
.ab-cell p{margin-top:.8rem;font-size:.92rem;line-height:1.55}
.ab-cell.cy h3{color:var(--navy)}.ab-cell.cy p{color:rgba(20,40,44,.82)}
.ab-cell.nv h3{color:var(--cyan)}.ab-cell.nv p{color:rgba(255,255,255,.82)}
.ab-cards6-cta{display:flex;gap:14px;justify-content:center;margin-top:clamp(2rem,3vw,2.6rem);flex-wrap:wrap}
@media(max-width:820px){.ab-cards6{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ab-cards6{grid-template-columns:1fr}}

/* CYAN LOGO STRIP — static, centred: CoolVan · Solomon · CoolVan */
.ab-logos{background:var(--cyan);overflow:hidden;padding:clamp(20px,3vw,34px) 0}
.ab-logos-row{display:flex;align-items:center;justify-content:center;gap:clamp(40px,7vw,110px);flex-wrap:wrap}
.ab-logos-item{display:flex;align-items:center;flex:0 0 auto}
.ab-logos-item img{height:clamp(42px,5vw,62px);width:auto;display:block}
.ab-logos-item .solomon-box{background:#fff;border-radius:10px;padding:12px 22px;display:flex;align-items:center;box-shadow:0 10px 26px -14px rgba(4,26,30,.35)}
.ab-logos-item .solomon-box img{height:clamp(34px,4vw,48px)}