/* ============ v59 — BRAND FONTS: Akira Expanded (H1-H4) + DM Sans (body) ============ */
@font-face{
font-family:'Plus Jakarta Sans';
src:url('fonts/plus-jakarta-sans.woff2') format('woff2');
font-weight:200 800;font-style:normal;font-display:swap;
}
@font-face{
font-family:'Akira Expanded';
src:url('fonts/akira-expanded.woff2') format('woff2');
font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
font-family:'DM Sans';
src:url('fonts/dmsans.woff2') format('woff2');
font-weight:100 1000;font-style:normal;font-display:swap;
}
@font-face{
font-family:'DM Sans';
src:url('fonts/dmsans-italic.woff2') format('woff2');
font-weight:100 1000;font-style:italic;font-display:swap;
}
/* ===========================================================
XSPECT — shared stylesheet
Brand: green #01DED0 · dark-green #05C5B2 · navy #212E3C · secondary-navy #283849 · grey #EBE5E5 · cream #F9FBF0 · body #222222
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:#01DED0;
--cyan-2:#05C5B2;
--cyan-deep:#05C5B2;
--navy:#212E3C;
--navy-2:#283849;
--ink:#0c1820;
--cream:#F9FBF0;
--cream-2:#F9FBF0;
--paper:#ffffff;
--grey:#8a99a2;
--grey-brand:#EBE5E5;
--body-ink:#222222;
--line:rgba(27,44,57,.12);
--amber:#f5871f;
--wrap:1180px;
--pad:clamp(20px,5vw,64px);
--display:'Akira Expanded',system-ui,sans-serif;
--body:'DM Sans',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:100%; /* real expanded font now — no synthetic stretching */
}
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}
/* ===========================================================
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}
/* 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 ) */
.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:.95;letter-spacing:-.02em;font-style:italic;display:block}
/* ===========================================================
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}
}
@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}
}
/* ===========================================================
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%,var(--cyan) 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
-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
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 calc(100% - var(--rv,100%)) 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(5,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:52px;margin-top:clamp(1.8rem,3vw,2.8rem)}
.prail-line{position:absolute;left:10%;right:10%;top:50%;height:3px;background:rgba(27,44,57,.15);translate:0 -50%;border-radius:3px}
.prail-fill{position:absolute;left:10%;top:50%;height:3px;background:var(--cyan);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,var(--cyan));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-card .foot-stat{margin-top:1rem;color:rgba(27,44,57,.78);font-size:.95rem;line-height:1.5}
@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)}
/* v42 — HubSpot embedded forms (replaces the native .contact-form on all pages) */
.hs-form-card{background:#fff;border-radius:16px;padding:clamp(18px,2.2vw,30px);box-shadow:0 30px 60px -30px rgba(4,26,30,.5);min-height:380px}
.hs-form-card .hs-form-frame{min-height:320px}
/* v42 — pricing hero: tablet dashboard replaces the doc-stack illustration */
.pg-tab{background:#0d1922;border-radius:20px;padding:clamp(8px,1vw,14px);box-shadow:0 34px 70px -18px rgba(4,26,30,.5)}
.pg-tab img{width:100%;height:auto;display:block;border-radius:12px}
/* v44 — fit-tabs: chevron arrow between tabs + gentle pulse on the Grow tab */
.fit-arrow{font-family:var(--display);font-weight:900;color:var(--cyan);font-size:1.4rem;letter-spacing:-.05em;align-self:center;padding:0 .4rem;user-select:none}
@keyframes fitPulse{0%,100%{box-shadow:0 0 0 0 rgba(24,222,210,.55)}55%{box-shadow:0 0 0 10px rgba(24,222,210,0)}}
.fit-tab--pulse:not(.active){animation:fitPulse 2.4s ease-out infinite}
@media(prefers-reduced-motion:reduce){.fit-tab--pulse{animation:none}}
/* v44 — introducing chevron visibility on navy */
.introducing .chv--navy{color:rgba(255,255,255,.06)}
/* v44 — How we roll: numbered icon chips replace the van */
.hstep-ic{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:var(--cyan);color:var(--navy);font-size:1.5rem;font-weight:900;margin-bottom:1rem;box-shadow:0 14px 30px -16px rgba(4,26,30,.4)}
/* v44 — What changes: step numbers over the chevrons */
.wc-num{display:block;font-family:var(--display);font-weight:900;font-size:clamp(1.2rem,1.8vw,1.7rem);color:var(--cyan);margin-bottom:.35rem}
.mlq-sum{display:block;text-align:center;max-width:62ch;margin:clamp(2.2rem,4vw,3.6rem) auto 0}
.para-link{display:inline-block;font-family:var(--display);font-weight:900;color:var(--cyan);font-size:1.3rem;letter-spacing:-.04em;margin:.6rem 0;transform:rotate(90deg);transform-origin:center center}
/* v47 — YouTube demo overlay on the Active Inspections dashboard */
.bigdash{position:relative}
.yt-play{position:absolute;left:61%;top:52%;transform:translate(-50%,-50%);display:flex;filter:drop-shadow(0 10px 24px rgba(0,0,0,.45));transition:transform .3s var(--ease-out)}
.yt-play:hover{transform:translate(-50%,-50%) scale(1.12)}
@keyframes ytPulse{0%,100%{filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))}50%{filter:drop-shadow(0 10px 30px rgba(255,0,0,.55))}}
.yt-play{animation:ytPulse 2.8s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.yt-play{animation:none}}
/* v47 — partnership section: white variant, centred copy (differentiates from the cyan quote above) */
.ab-partner--alt{background:#fff !important;color:var(--navy)}
.ab-partner--alt h2, .ab-partner--alt .tagline{color:var(--navy)}
.ab-partner--alt h2 .cy{color:var(--cyan-deep)}
.ab-partner--alt .ab-partner-grid>div:first-child{text-align:center}
.ab-partner--alt p{margin-inline:auto}
/* v47 — insights hero chevrons */
.in-hero .chv--navy{color:rgba(255,255,255,.05)}
/* v47 — legal pages + cookie settings modal */
.legal-page{padding-top:120px}
.legal-page h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.05rem;color:var(--navy);margin:1.6rem 0 .5rem}
.legal-page p{color:rgba(27,44,57,.8);line-height:1.7;margin-bottom:.6rem}
.legal-updated{font-size:.85rem;color:rgba(27,44,57,.55)}
.ck-modal{position:fixed;inset:0;z-index:99998;display:none;align-items:center;justify-content:center;background:rgba(12,24,32,.55)}
.ck-modal.open{display:flex}
.ck-box{background:#fff;border-radius:16px;max-width:460px;width:calc(100% - 40px);padding:26px;box-shadow:0 40px 90px -30px rgba(0,0,0,.5)}
.ck-box h3{font-family:var(--display);font-weight:900;text-transform:uppercase;color:var(--navy);margin-bottom:.6rem}
.ck-box p{font-size:.92rem;color:rgba(27,44,57,.75);line-height:1.55;margin-bottom:1rem}
.ck-row{display:flex;align-items:center;justify-content:space-between;padding:.7rem 0;border-top:1px solid rgba(27,44,57,.1)}
.ck-row label{font-weight:700;color:var(--navy);font-size:.92rem}
.ck-row .sub{display:block;font-weight:400;font-size:.8rem;color:rgba(27,44,57,.55)}
.ck-actions{display:flex;gap:10px;margin-top:1.2rem;flex-wrap:wrap}
/* v48 — converge pills: hover lift + neighbours jiggle */
.tagcloud{pointer-events:auto}
.tagcloud .tag{pointer-events:auto;cursor:default;transition:transform .3s var(--ease-out),background .3s,color .3s,box-shadow .3s}
.tagcloud .tag:hover{background:var(--cyan);color:var(--navy);transform:translateY(-5px) scale(1.06);box-shadow:0 16px 30px -14px rgba(4,26,30,.35);z-index:2}
@media(prefers-reduced-motion:reduce){.tagcloud .tag,.tagcloud:has(.tag:hover) .tag{animation:none;transform:none}}
/* v48 — eCoC page: comparison + usp cards */
.ecoc-compare{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch;margin-top:1.8rem}
.ecc-col{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px}
.ecc-col h4{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:.78rem;letter-spacing:.06em;margin-bottom:.8rem;color:var(--navy)}
.ecc-col ul{list-style:none;display:grid;gap:.55rem}
.ecc-col li{font-size:.92rem;line-height:1.5;color:rgba(27,44,57,.8);padding-left:1.1em;position:relative}
.ecc-col li::before{content:"›";position:absolute;left:0;color:var(--cyan-deep);font-weight:900}
.ecc-col--req{background:var(--navy);border-color:var(--navy)}
.ecc-col--req h4{color:var(--cyan)}
.ecc-col--req li{color:rgba(255,255,255,.85)}
.ecc-col--req li::before{color:var(--cyan)}
.ecc-arrow{align-self:center;font-family:var(--display);font-weight:900;color:var(--cyan-deep);font-size:1.5rem;letter-spacing:-.06em}
.ecoc-usp{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:1.6rem;max-width:1040px}
.usp-card{background:var(--cyan);border-radius:12px;padding:22px}
.usp-card h4{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:.95rem;color:var(--navy);margin-bottom:.5rem}
.usp-card p{font-size:.92rem;line-height:1.6;color:rgba(27,44,57,.85)}
@media(max-width:880px){.ecoc-compare{grid-template-columns:1fr}.ecc-arrow{transform:rotate(90deg);justify-self:center}.ecoc-usp{grid-template-columns:1fr}}
/* ===========================================================
v50 — snag round: logo truck · progressive build · sysint fixes ·
dark insights hero · badges outside cs image · demo clip fix ·
proof overlap · about alignment · mobile safety
=========================================================== */
/* ---- Live Progress Tracking: trucks BUILD THEMSELVES bottom-up.
Ghost = faint outline; fill reveals upward per stage (--rv),
landing progressively darker (existing --op steps kept). ---- */
.ptruck .ghost{opacity:.10;filter:grayscale(1)}
.pstage .ptruck .fill{
clip-path:inset(100% 0 0 0);
transition:clip-path 1.1s var(--ease-out,cubic-bezier(.2,.7,.2,1));
}
.pstage.on .ptruck .fill{clip-path:inset(calc(100% - var(--rv,100%)) 0 0 0)}
.pstage:nth-child(1).on .ptruck .fill{transition-delay:.05s}
.pstage:nth-child(2).on .ptruck .fill{transition-delay:.2s}
.pstage:nth-child(3).on .ptruck .fill{transition-delay:.35s}
.pstage:nth-child(4).on .ptruck .fill{transition-delay:.5s}
.pstage:nth-child(5).on .ptruck .fill{transition-delay:.65s}
.pstage:nth-child(6).on .ptruck .fill{transition-delay:.8s}
/* ---- System Integration: text inside hexagon bounds + organic line flow ---- */
.sint-svg text{font-size:24px;font-weight:800}
.sint-svg text tspan{font-size:24px}
.sint-svg .hexg:nth-of-type(4) text,.sint-svg .hexg:nth-of-type(4) text tspan{font-size:21px} /* Custom Integrations */
.sint-svg .hexg:nth-of-type(3) text tspan,.sint-svg .hexg:nth-of-type(5) text tspan{font-size:22px}
/* varied speeds so dashed links visibly move in all directions */
.sint-svg .hlink:nth-of-type(1){animation-duration:3.2s}
.sint-svg .hlink:nth-of-type(2){animation-duration:4.1s}
.sint-svg .hlink:nth-of-type(3){animation-duration:3.6s}
.sint-svg .hlink:nth-of-type(4){animation-duration:4.4s}
.sint-svg .hlink:nth-of-type(5){animation-duration:3.4s}
.sint-svg .hlink:nth-of-type(6){animation-duration:4.0s}
.sint-svg .hlink:nth-of-type(7){animation-duration:4.6s}
.sint-svg .hlink:nth-of-type(8){animation-duration:3.8s}
.sint-svg .hlink:nth-of-type(9){animation-duration:4.2s}
.sint-svg .hlink:nth-of-type(10){animation-duration:3.5s}
.sint-svg .hlink:nth-of-type(11){animation-duration:4.3s}
.sint-svg .hlink:nth-of-type(12){animation-duration:3.9s}
/* ---- How we roll: logo-truck icons ---- */
.hstep-ic--truck{display:grid;place-items:center;width:64px;height:58px;margin:0 auto 1rem}
.hstep-ic--truck img{width:100%;height:auto;display:block}
/* ---- Case-studies hero: badges OUTSIDE the image ---- */
.cs-hero-truck--out{position:relative}
.cs-hero-truck--out img{width:100%;height:auto;display:block;border-radius:12px}
.cs-hero-truck--out .cs-badge{position:static;transform:none}
.cs-badges-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.cs-badges-row .cs-badge{
background:#fff;color:var(--navy);font-family:var(--display);font-weight:800;
font-size:.78rem;padding:.55rem .95rem;border-radius:12px;white-space:nowrap;
box-shadow:0 14px 30px -12px rgba(9,20,28,.35);
}
/* ---- Insights dark hero ---- */
.in-hero--dark{background:var(--navy);position:relative;overflow:hidden}
.in-hero--dark .in-hero-iso{
position:absolute;right:-6%;bottom:-12%;width:min(52vw,640px);height:auto;
opacity:.5;z-index:1;pointer-events:none;
}
.in-hero--dark .in-hero-grid{grid-template-columns:1fr;max-width:640px;margin-right:auto}
/* ---- Demo button hover clipped by section (platform + case studies + insights heroes) ---- */
.pg-cta,.in-cta,.hero-build__cta{padding-bottom:10px;position:relative;z-index:5}
.pg-hero,.in-hero{overflow:visible}
/* v51: removed clip-path:inset(0) override — it flattened the chevron shapes into rectangles */
/* ---- Proof: stop "Vehicles ✓" overlapping / cutting off ---- */
.proof-art{gap:clamp(14px,2.4vw,30px)}
.proof-art .eyebrow{white-space:nowrap;text-align:right}
.proof-art .bignum{font-size:clamp(3.4rem,11vw,9.5rem)}
.proofband .wrap{overflow:visible}
/* ---- About: founder photo level with heading + centred attribution ---- */
.ab-exp-grid{align-items:start}
.ab-founder{margin-top:.4rem}
.ab-quote .wrap{text-align:center}
.ab-quote blockquote{margin-inline:auto}
.ab-quote .attrib{text-align:center}
/* ===========================================================
v50 — MOBILE SAFETY PASS (targeted, non-destructive)
=========================================================== */
@media(max-width:880px){
html,body{overflow-x:hidden}
/* ptrack: 2-up grid so trucks stay readable */
.ptrack-grid{grid-template-columns:repeat(2,1fr);gap:18px}
.prail{display:none} /* rail dots meaningless when grid wraps */
/* sysint svg scales */
.sint-svgwrap{max-width:100%;overflow:hidden}
.sint-svg{width:100%;height:auto}
.sint-svg text,.sint-svg text tspan{font-size:30px} /* readable when scaled down */
/* how we roll already 2-col; centre icons */
.hstep-ic--truck{width:54px}
/* case-studies hero stacks; badges wrap */
.pg-hero__grid{grid-template-columns:1fr;gap:26px}
.cs-badges-row .cs-badge{font-size:.7rem;padding:.5rem .8rem}
/* insights dark hero */
.in-hero--dark .in-hero-iso{width:78vw;opacity:.3;right:-18%}
/* proof stacks + centres */
.proofband > .wrap{grid-template-columns:1fr!important;text-align:center}
.proof-art{justify-content:center!important}
.proof-art .eyebrow{text-align:center}
/* built-for collage + intro stack: single column */
.bf-collage,.bf-nophone{grid-template-columns:1fr 1fr}
/* footer + contact grids */
.contact-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
.ptrack-grid{grid-template-columns:repeat(2,1fr)}
.hroll-grid{grid-template-columns:1fr}
}
/* ===========================================================
v50.1 — About founder block: collapse at the site-wide 880px
(was 820 — left a band where photo sat beside text), rounded
corners enforced, clear spacing around image + captions
=========================================================== */
@media(max-width:880px){
.ab-exp-grid{grid-template-columns:1fr!important;gap:30px}
.ab-founder{margin-top:.6rem}
.ab-founder img{max-width:300px}
}
.ab-founder img{border-radius:14px!important;overflow:hidden}
.ab-founder .name{margin-top:1.2rem}
.ab-exp{padding-bottom:clamp(48px,6vw,84px)}
.ab-exp-grid > .reveal p:last-child{margin-bottom:.4rem}
/* ===========================================================
v51 — HOME hero chevron treatment on ALL page heroes
(case studies / pricing / ecoc / insights), exactly the home
colours on the home cyan. + About founder mobile layout.
=========================================================== */
.pg-hero--cyan,.in-hero--cyan{
background:#05C5B2;position:relative;overflow:hidden;color:var(--navy);
}
.pg-hero--cyan .hero-chev,.in-hero--cyan .hero-chev{top:0;bottom:0;height:100%}
.pg-hero--cyan > .wrap,.in-hero--cyan > .wrap{position:relative;z-index:2}
/* keep headline/copy legible on cyan, same as home */
.pg-hero--cyan .pg-title,.in-hero--cyan h1{color:var(--navy)}
.pg-hero--cyan .pg-lead,.in-hero--cyan p{color:rgba(15,35,46,.85)}
.pg-hero--cyan .eyebrow,.in-hero--cyan .eyebrow{color:var(--navy)}
/* demo/CTA hover never clipped: room at the hero foot */
.pg-hero--cyan .pg-cta,.in-hero--cyan .in-cta{padding-bottom:12px}
.pg-hero--cyan{padding-bottom:clamp(40px,5vw,72px)}
.in-hero--cyan{padding-bottom:clamp(40px,5vw,72px)}
.in-hero--cyan .in-hero-grid{grid-template-columns:1fr;max-width:680px;margin-right:auto}
/* ---- About founder: mobile = left aligned, smaller, breathing room ---- */
@media(max-width:880px){
.ab-founder{text-align:left;margin-top:1.6rem;margin-bottom:.4rem}
.ab-founder img{margin:0;max-width:240px}
.ab-founder .name{margin-top:1rem}
.ab-exp{padding-bottom:56px}
.ab-exp-grid{gap:34px}
}
/* ===========================================================
v52 — hero text WHITE on cyan · equal nav buttons ·
truck icons no tile · intro stack mobile fix
=========================================================== */
/* 1) white headline/copy on the cyan page heroes (green-on-green fix) */
.pg-hero--cyan .pg-title,.pg-hero--cyan h1{color:#fff!important}
.pg-hero--cyan .pg-title .cy,.pg-hero--cyan h1 .cy{color:#fff!important}
.pg-hero--cyan .pg-lead,.pg-hero--cyan p{color:rgba(255,255,255,.92)!important}
.pg-hero--cyan .eyebrow{color:#fff!important;opacity:.9}
/* 3) insights now uses pg-title sizing via markup (no extra rule needed);
kill the old oversized in-hero h1 in case of cached class */
.in-hero h1{font-size:var(--fs-hero)}
/* 4) How we roll: logo truck on NO tile — fully visible */
.hstep-ic--truck{background:transparent!important;box-shadow:none!important;border-radius:0!important;width:74px;height:64px}
.hstep-ic--truck img{width:100%;height:auto}
/* 5) Introducing Xspect images: never off-screen on mobile */
@media(max-width:880px){
.intro-stack{position:relative!important;padding-bottom:0!important;display:flex!important;flex-direction:column;gap:14px}
.intro-stack img{position:static!important;width:100%!important;left:auto!important;top:auto!important}
.intro-dash{max-width:100%;overflow:hidden}
}
/* ===========================================================
v53 — hero text: BLACK base, ONLY the green spans white ·
truly equal header buttons · insights hero dashboard
=========================================================== */
/* revert my over-reach: base headline + small text back to navy/black */
.pg-hero--cyan .pg-title,.pg-hero--cyan h1{color:var(--navy)!important}
.pg-hero--cyan .pg-title .cy,.pg-hero--cyan h1 .cy{color:#fff!important} /* the green-on-green fix, and only that */
.pg-hero--cyan .pg-lead,.pg-hero--cyan p{color:rgba(15,30,40,.88)!important}
.pg-hero--cyan .eyebrow{color:var(--navy)!important;opacity:1}
/* insights hero dashboard image */
.in-hero-dash img{width:100%;height:auto;display:block;border-radius:14px;box-shadow:0 30px 70px -30px rgba(9,20,28,.5)}
.in-hero-dash{position:relative;z-index:2}
@media(max-width:880px){.in-hero-dash{max-width:520px;margin-inline:auto}}
/* ===========================================================
v55 — insights dashboard: transparent, floating, NO box
(my radius+shadow drew a rectangle behind the transparent
PNG — that was the "green background"). + equal-size CTA
buttons in ALL headers (hero pairs, not just the nav).
=========================================================== */
.in-hero-dash img{border-radius:0!important;box-shadow:none!important;background:transparent!important}
/* v57 — proof section: "Vehicle Checks" text above the decorative chevron */
.proof-art > div,.proof-art .eyebrow,.proof-art .proof-check{position:relative;z-index:2}
/* ===========================================================
v58 — "How does Xspect fit" : dark navy + chevrons + truck,
text inverted to white (per client)
=========================================================== */
.fitsec--navy{background:var(--navy);position:relative;overflow:hidden}
.fitsec--navy .fit-truck{
position:absolute;right:3%;bottom:4%;width:min(22vw,230px);height:auto;
z-index:0;pointer-events:none;opacity:.95;
}
/* inverted text */
.fitsec--navy .h-sec{color:#fff}
.fitsec--navy .fit-lead{color:rgba(255,255,255,.82)}
.fitsec--navy .eyebrow{color:var(--cyan)}
.fitsec--navy .fit-kicker{color:#fff}
.fitsec--navy .fit-sub{color:rgba(255,255,255,.7)}
.fitsec--navy .fit-step .n,.fitsec--navy .fit-val .n{color:var(--cyan)}
.fitsec--navy .fit-step h4,.fitsec--navy .fit-val h4{color:#fff}
.fitsec--navy .fit-step p,.fitsec--navy .fit-val p{color:rgba(255,255,255,.75)}
.fitsec--navy .fit-promise .q{color:#fff}
.fitsec--navy .fit-promise .t{color:var(--cyan)}
/* tabs on navy: active flips to cyan (navy-on-navy would vanish) */
.fitsec--navy .fit-tab{background:rgba(255,255,255,.92);color:var(--navy)}
.fitsec--navy .fit-tab.active{background:var(--cyan);color:var(--navy)}
.fitsec--navy .fit-tab.active b{color:var(--navy);opacity:.75}
.fitsec--navy .fit-tab:not(.active):hover{background:#fff}
.fitsec--navy .fit-arrow{color:var(--cyan)}
@media(max-width:880px){
.fitsec--navy .fit-truck{width:120px;opacity:.35;right:2%;bottom:2%}
}
/* v59 — all h1–h4 in Akira Expanded (overrides any body-font headings) */
h1,h2,h3,h4,.h-sec,.pg-title{font-family:var(--display)!important}
.fit-tab b{font-family:'Plus Jakarta Sans',var(--body)!important;font-weight:400!important;font-size:.72rem!important;text-transform:none!important} /* nav pair slightly smaller to fit 132px */
/* v61 — fit steps are WHITE cards: text inside must be dark
(my v58 inversion wrongly whitened card interiors) */
.fitsec--navy .fit-step h4{color:var(--navy)!important}
.fitsec--navy .fit-step p{color:rgba(27,44,57,.78)!important}
.fitsec--navy .fit-step .n{color:var(--cyan-2,#0aa79b)!important}
/* promise strip is cyan — navy text stays; navy .fit-val cards keep white */
.fitsec--navy .fit-promise .q{color:var(--navy)!important}
.fitsec--navy .fit-promise .t{color:var(--navy)!important;opacity:.75}
/* platform hero: long headline sized for Akira Expanded's width */
.h1--long{font-size:clamp(1.7rem,3.4vw,3rem)!important;line-height:1.08!important;letter-spacing:-.01em}
.hero--build .hero-build__copy{max-width:52%}
.h1--long .line-mask{display:block;overflow:visible}
@media(max-width:880px){
.h1--long{font-size:clamp(1.4rem,6vw,2rem)!important}
.hero--build .hero-build__copy{max-width:100%}
}
/* ===========================================================
v64 — Akira-width audit fixes:
small labels revert to DM Sans (Akira is a headline face and
overflows pill-sized containers) + procworks line spacing
=========================================================== */
/* 1) Built-for collage callout pills — text was outside the pills */
.bf-tag{font-family:'DM Sans',var(--body)!important;font-weight:700!important;line-height:1.3;letter-spacing:0}
/* 2) "Your process works" — tighter two-line heading, sized so
line 2 fits Akira's width, minimal gap between the lines */
.procworks .h-sec{
font-size:clamp(1.15rem,2.5vw,2.15rem)!important;
line-height:1.06!important;
}
.procworks .h-sec .cy{display:block!important;margin:0 0 .1em!important;line-height:1.06!important}
/* 3) hero compliance ticks (VCA aligned etc) — fit the row */
.tick h4{font-size:.78rem!important;letter-spacing:0!important}
/* 4) case-studies hero badges — DM Sans so they stay pill-sized */
.cs-badges-row .cs-badge{font-family:'DM Sans',var(--body)!important;font-weight:700!important}
/* 5) fit promise quote — Akira at quote length needs a size down */
.fit-promise .q{font-size:clamp(.95rem,1.5vw,1.15rem)!important}
/* ===========================================================
v65 — Driven by Quality: navy+truck bg, full-width alignment ·
procworks TRUE line-height fix at proper size · buttons bold
+ longer + mobile width-lock killed
=========================================================== */
/* Driven by Quality (about) */
.ab-intro--navy{background:var(--navy);position:relative;overflow:hidden}
.ab-intro--navy .wrap{max-width:var(--wrap)!important} /* inline with the rest of the page */
.ab-intro--navy p{color:rgba(255,255,255,.85)!important}
.ab-intro--navy strong{color:#fff!important}
.ab-intro--navy .fit-truck{position:absolute;right:3%;bottom:6%;width:min(20vw,210px);height:auto;z-index:0;opacity:.95;pointer-events:none}
@media(max-width:880px){.ab-intro--navy .fit-truck{width:110px;opacity:.3}}
/* procworks: full size restored, lines genuinely tight */
.procworks .h-sec{
font-size:clamp(1.5rem,2.9vw,2.4rem)!important;
line-height:1!important;
}
.procworks .h-sec .cy{display:block!important;margin:0!important;line-height:1!important;padding-bottom:.08em}
/* ===========================================================
v66 — phantom line killed (markup) · iso-build.svg as the
background art on Driven-by-Quality + How-does-Xspect-fit ·
counter jitter fix · challenges band alignment
=========================================================== */
/* iso build scene as section background art (both navy sections) */
.ab-intro--navy .iso-bg,.fitsec--navy .iso-bg{
position:absolute;right:-4%;bottom:-10%;width:min(36vw,430px);height:auto;
z-index:0;opacity:.45;pointer-events:none;
}
@media(max-width:880px){
.ab-intro--navy .iso-bg,.fitsec--navy .iso-bg{width:64vw;opacity:.22;right:-14%}
}
/* counters: no layout jump while counting (home + platform 5,897) */
.proof-art .bignum,[data-count]{
font-variant-numeric:tabular-nums lining-nums;
}
.proof-art .bignum{display:inline-block;min-width:5.4ch;text-align:center}
/* challenges band: align with the standard page container */
.in-band .wrap{max-width:var(--wrap)!important;padding-inline:var(--pad)!important}
.in-band h2{margin-left:0!important}
.hero-build__cta,.pg-cta,.in-cta{flex-wrap:wrap}
/* platform hero: sized so each of the 2 lines fits Akira */
.h1--long{font-size:clamp(1.5rem,2.9vw,2.6rem)!important;line-height:1.1!important}
/* ############################################################
v69 — THE ONE BUTTON BLOCK. Single source of truth.
Every historical .btn rule has been deleted from this file.
############################################################ */
.btn{
--cap:20px;
position:relative;display:inline-flex;align-items:center;justify-content:center;
gap:10px;height:56px;width:max-content;min-width:184px;max-width:none;
padding:0 calc(var(--cap) + 32px);
font-family:'DM Sans',system-ui,sans-serif;font-weight:800;font-size:18px;
line-height:1;letter-spacing:-0.03em;text-transform:none;
border:0;cursor:pointer;white-space:nowrap;text-decoration:none;
background:var(--navy);color:#fff;
clip-path:polygon(var(--cap) 0,100% 0,calc(100% - var(--cap)) 100%,0 100%);
transition:transform .18s ease,filter .18s ease;
overflow:visible;
}
.btn::before,.btn::after{content:none}
.btn{transition:transform .18s ease,background-color .22s ease,color .22s ease}
/* hover colourways — from the Figma component (frames 38-40):
navy -> dark green · white -> navy · cyan -> navy */
.btn:hover{transform:translateY(-2px);background:#05C5B2;color:#fff}
.btn:hover .ar{background:var(--navy)}
.btn--ghost:hover,.btn--ghostwhite:hover{background:var(--navy);color:#fff}
.btn--ghost:hover .ar,.btn--ghostwhite:hover .ar{background:var(--cyan)}
.btn--cyan:hover{background:var(--navy);color:#fff}
.btn--cyan:hover .ar{background:var(--cyan)}
.btn--dgreen:hover{background:var(--navy);color:#fff}
.btn--dgreen:hover .ar{background:var(--cyan)}
.btn span{display:inline-flex;align-items:center;gap:10px;transform:none;overflow:visible;position:static;width:auto}
.btn .ar{
transition:background-color .22s ease;
font-size:0;line-height:0;width:8.4px;height:12.5px;display:inline-block;flex:none;
clip-path:polygon(0 0,55% 0,100% 50%,55% 100%,0 100%,45% 50%);
background:var(--cyan);
}
.btn--ghost,.btn--ghostwhite{background:#fff;color:var(--navy);box-shadow:none}
.btn--ghost .ar,.btn--ghostwhite .ar{background:var(--cyan)}
.btn--cyan{background:var(--cyan);color:var(--navy)}
.btn--cyan .ar{background:#fff}
.btn--dgreen{background:#05C5B2;color:#fff}
.btn--dgreen .ar{background:var(--navy)}
.nav-cta .btn{height:44px;--cap:16px;font-size:15px;min-width:132px}
.hero-build__cta,.pg-cta,.in-cta{flex-wrap:wrap}
@media(max-width:560px){
.btn{height:50px;font-size:16px;min-width:0;padding:0 calc(var(--cap) + 22px)}
}
@media(prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}
/* ===========================================================
v72 — built-for bubbles: pill always wraps its own text
(active .bf-nophone rules forced nowrap against a 9rem cap)
=========================================================== */
.bf-tag,.bf-nophone .bf-tag{
white-space:normal!important;
max-width:11rem!important;
width:max-content!important; /* pill hugs the text... */
line-height:1.3!important;
overflow-wrap:break-word;
}
/* ===========================================================
v73 — header: cyan at top (matches hero), white on scroll,
text + logo invert for visibility on each ground
=========================================================== */
.site-head{background:transparent}
.site-head .nav-links a{color:#fff;transition:color .3s}
.site-head .nav-links a:hover{color:var(--navy)}
/* logo swap: white version on cyan, full colour on white */
.brand-logo--light{display:block}
.brand-logo--dark{display:none}
.site-head.scrolled{background:#fff;box-shadow:0 10px 30px -18px rgba(9,20,28,.25)}
.site-head.scrolled .nav-links a{color:var(--navy)}
.site-head.scrolled .nav-links a:hover{color:var(--cyan-2,#0aa79b)}
.site-head.scrolled .brand-logo--light{display:none}
.site-head.scrolled .brand-logo--dark{display:block}
/* nav buttons per ground: ghost Demo is white-on-cyan at top;
on the white scrolled bar it flips to cyan so it stays visible */
.site-head.scrolled .nav-cta .btn--ghost{background:var(--cyan);color:var(--navy)}
.site-head.scrolled .nav-cta .btn--ghost .ar{background:#fff}
/* ===========================================================
v75 — platform hero art: anchored beside the text (was pinned
to the viewport edge and drifted right on wide screens)
=========================================================== */
@media(min-width:901px){
.phero-art{
right:auto!important;
left:55%!important;
width:min(36vw,520px)!important;
}
}
@media(min-width:1500px){
.phero-art{left:calc(50% + 40px)!important;width:480px!important}
}
/* ===========================================================
v77 — heroes extend UNDER the transparent bar (sticky header
reserves its own white slice; pulling the hero up fills it
with the chevrons). Plain pages get a solid bar.
=========================================================== */
:root{--navh:72px}
.hero--build,.pg-hero--cyan{
margin-top:calc(-1*var(--navh));
padding-top:var(--navh);
}
/* pages without a cyan hero keep a readable solid bar */
.site-head--solid{background:#fff!important;box-shadow:0 10px 30px -18px rgba(9,20,28,.15)}
.site-head--solid .nav-links a{color:var(--navy)}
.site-head--solid .brand-logo--light{display:none}
.site-head--solid .brand-logo--dark{display:block}
/* v78 — platform hero: transparent dashboard floats with NO frame
(no background square, no shadow box behind transparency) */
.phero-art .ptab:not(.ptab--b){background:transparent!important;padding:0!important;box-shadow:none!important;border-radius:0!important}
.phero-art .ptab:not(.ptab--b) img{border-radius:0!important}
/* ===========================================================
v79 — NO backgrounds/shadows on transparent artwork (home
Confidence + See-in-action + Introducing stack) · about hover
lines centred · transparent header on ALL pages + breathing
room · menu logo + #212E3C links before scroll
=========================================================== */
/* transparent artwork floats clean — nothing behind it, ever */
.cdev--a{background:transparent!important;padding:0!important;box-shadow:none!important;border-radius:0!important}
.cdev--a img{border-radius:0!important}
.bigdash{background:transparent!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important}
.bigdash img{box-shadow:none!important;border-radius:0!important}
.intro-stack img{box-shadow:none!important;border:0!important;border-radius:0!important;background:transparent!important}
/* about "how we think" cards: hover line centred under the title */
.ab-cell h3{display:block;text-align:center}
.ab-cell h3::after{left:50%!important;transform:translateX(-50%)}
.ab-cell p{text-align:center}
/* transparent header on every page, with space under the menu */
.hero--build,.pg-hero--cyan{
margin-top:calc(-1*var(--navh))!important;
padding-top:calc(var(--navh) + 26px)!important;
}
/* menu before scroll: navy links + navy/white horizontal logo */
.site-head .nav-links a{color:#212E3C}
.site-head .nav-links a:hover{color:#fff}
.brand-logo--light{height:36px;width:auto}
/* v80 — platform sub-hero strip: no line under the 4 processes */
.pstrip{border-bottom:0!important}
/* v81 — pre-scroll logo (navy/white horizontal) doubled */
.brand-logo--light{height:72px!important;width:auto}
@media(max-width:880px){.brand-logo--light{height:54px!important}}
/* v82 — header height re-measured for the doubled logo:
hero pull matches (kills the white strip) + nav never wraps */
:root{--navh:100px} /* 72px logo + 28px padding */
@media(max-width:880px){:root{--navh:82px}} /* 54px logo on mobile */
.nav-links{flex-wrap:nowrap}
.nav-links a{white-space:nowrap}
.nav{gap:clamp(12px,1.8vw,26px)}
.brand{flex:none}
@media(max-width:1100px){
.brand-logo--light{height:56px!important}
:root{--navh:84px}
}
/* ===========================================================
v84 — home/platform/about heroes: chevrons reach the very top
behind the transparent menu (the frame now covers the pulled
area; menu clearance moves INSIDE the frame)
=========================================================== */
.hero--build{
margin-top:calc(-1*var(--navh))!important;
padding-top:0!important;
}
.hero--build .hero-build__frame{
height:calc(min(100vh - 96px,740px) + var(--navh))!important;
min-height:calc(540px + var(--navh))!important;
}
/* content clears the menu + breathing space, chevrons don't */
.hero--build .hero-build__inner{padding-top:calc(var(--navh) + 26px)}
.hero--build .hero-build__art{bottom:5rem}
@media(max-width:880px){
.hero--build{margin-top:calc(-1*var(--navh))!important;padding-top:0!important}
.hero--build .hero-build__inner{padding-top:calc(var(--navh) + 16px)}
}
/* ===========================================================
v85 — System Integration: hexagon labels in DM Sans (they had
inherited Akira Expanded — headline face, burst the hexes),
sizes reduced, copy centre-aligned
=========================================================== */
.sint-svg text,.sint-svg text tspan{
font-family:'DM Sans',var(--body)!important;
font-weight:700!important;
font-size:20px!important;
letter-spacing:0!important;
}
.sint-svg .hexg:nth-of-type(3) text,.sint-svg .hexg:nth-of-type(3) text tspan,
.sint-svg .hexg:nth-of-type(4) text,.sint-svg .hexg:nth-of-type(4) text tspan,
.sint-svg .hexg:nth-of-type(5) text,.sint-svg .hexg:nth-of-type(5) text tspan{font-size:18px!important}
@media(max-width:880px){
.sint-svg text,.sint-svg text tspan{font-size:24px!important}
}
/* centre the section copy */
.sint-intro,.sint-close{text-align:center;margin-inline:auto!important;max-width:62ch}
/* ###########################################################################
HOME PAGE SNAG ROUND — v87
=========================================================================== */
/* ---- TASK 4: hero ticks larger / more accessible (Tom) ---- */
.hero-ticks{gap:.7rem 1.6rem}
.hero-ticks li{font-family:var(--body);font-weight:600;font-size:clamp(.95rem,1.25vw,1.15rem);letter-spacing:0}
.hero-ticks .tk{width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;font-size:.8rem}
/* ---- TASK 5: Introducing — iPad-framed dashboards with soft shadow ---- */
.intro-pads{display:grid;gap:22px}
.ipad{
position:relative;margin:0;background:#0f1720;border-radius:26px;
padding:14px 12px;box-shadow:0 30px 60px -28px rgba(0,0,0,.55);
border:1px solid rgba(255,255,255,.08);
}
.ipad::before{content:"";position:absolute;top:50%;left:6px;width:5px;height:34px;transform:translateY(-50%);
background:rgba(255,255,255,.14);border-radius:3px}
.ipad img{display:block;width:100%;height:auto;border-radius:12px}
.ipad--1{transform:rotate(-1.5deg)}
.ipad--2{transform:rotate(1deg) translateX(6%);margin-top:-6px}
.ipad--3{transform:rotate(-1deg);margin-top:-6px}
/* ---- TASK 9: Confidence composite (dashboard + phone + notification) ---- */
.conf-composite{position:relative;min-height:420px}
.conf-composite .cc-dash{
width:100%;height:auto;display:block;border-radius:14px;
box-shadow:0 24px 60px -30px rgba(9,20,28,.4);border:1px solid var(--line);
}
.conf-composite .cc-phone{
position:absolute;left:-4%;bottom:-8%;width:34%;height:auto;
border-radius:22px;box-shadow:0 26px 50px -22px rgba(9,20,28,.5);
}
.conf-composite .cc-note{
position:absolute;right:-3%;top:-6%;width:40%;height:auto;
filter:drop-shadow(0 18px 34px rgba(9,20,28,.32));
}
@media(max-width:880px){
.conf-composite{min-height:0}
.conf-composite .cc-phone{position:static;width:46%;margin-top:14px}
.conf-composite .cc-note{position:static;width:70%;margin-top:12px}
}
/* ---- TASK 10: fit section BLUE (Adam) ---- */
.fitsec--blue{background:#212E3C;position:relative;overflow:hidden}
.fitsec--blue .h-sec,.fitsec--blue .fit-lead{color:#fff}
.fitsec--blue .fit-lead{color:rgba(255,255,255,.82)}
/* Grow-smarter made obvious: cyan pulse pill + bright arrow */
.fitsec--blue .fit-tab{background:rgba(255,255,255,.9);color:var(--navy)}
.fitsec--blue .fit-tab.active{background:var(--cyan);color:var(--navy)}
.fitsec--blue .fit-tab--pulse{box-shadow:0 0 0 0 rgba(1,222,208,.7);animation:growpulse 2s infinite}
.fitsec--blue .fit-arrow{color:var(--cyan);font-family:var(--display);font-size:1.6rem;animation:arrownudge 1.4s ease-in-out infinite}
@keyframes growpulse{0%{box-shadow:0 0 0 0 rgba(1,222,208,.6)}70%{box-shadow:0 0 0 14px rgba(1,222,208,0)}100%{box-shadow:0 0 0 0 rgba(1,222,208,0)}}
@keyframes arrownudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
.fitsec--blue .fit-step h4{color:var(--navy)}
.fitsec--blue .fit-step p{color:rgba(27,44,57,.78)}
.fitsec--blue .fit-step .n{color:var(--cyan-2)}
.fitsec--blue .fit-val h4{color:#fff}
.fitsec--blue .fit-val p{color:rgba(255,255,255,.75)}
.fitsec--blue .fit-val .n{color:var(--cyan)}
.fitsec--blue .fit-promise .q{color:#fff}
.fitsec--blue .fit-promise .t{color:var(--cyan)}
/* ---- TASK 11: See-in-action cream + off-white chevron ---- */
.sec-cream-soft{background:var(--cream)}
.chv--offwhite{color:#EDEBE6}
/* ---- TASK 8: Built-for lozenge — text stays inside pill ---- */
.bf-tag,.bf-nophone .bf-tag{white-space:normal!important;max-width:12rem!important;width:max-content!important;line-height:1.3!important}
/* ###########################################################################
PLATFORM SNAG ROUND + HOME SHADOW FIX — v88
=========================================================================== */
/* ---- GRADIENT SHADOWS, never solid borders (home + platform) ---- */
/* home: iPad frames + confidence composite */
.ipad{border:0!important}
.conf-composite .cc-dash{border:0!important;box-shadow:0 30px 70px -30px rgba(9,20,28,.45)}
.ipad{box-shadow:0 40px 70px -34px rgba(0,0,0,.5)}
/* platform: analytics cards + hero tablets — soft gradient shadow, no border */
.dcard{border:0!important;box-shadow:0 30px 60px -28px rgba(9,20,28,.45)!important}
.ptab{border:0!important;box-shadow:0 34px 70px -30px rgba(9,20,28,.5)!important}
/* ---- How we roll: bespoke SVG line icons ---- */
.hstep-ic--svg{
display:grid;place-items:center;width:64px;height:64px;margin:0 auto 1rem;
border-radius:16px;background:rgba(1,222,208,.12);color:var(--cyan-2);
}
.hstep-ic--svg .hs-svg{width:34px;height:34px}
.sec-navy .hstep-ic--svg{background:rgba(1,222,208,.16);color:var(--cyan)}
/* ---- System Integration: lines flow FORWARD (Tom: not backwards) ---- */
.sint-svg .hlink.rev{animation-direction:normal!important}
/* ---- Real-time analytics: reduce card padding to match insights header ---- */
.dcard{padding:5px!important}
.dcard img{border-radius:10px}
/* ---- One platform connecting: tablets float ---- */
.phero-art .ptab{animation:floatA 6s ease-in-out infinite}
.phero-art .ptab--b{animation:floatB 7s ease-in-out infinite}
@keyframes floatA{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(-1deg)}}
@keyframes floatB{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(12px) rotate(3deg)}}
@media(prefers-reduced-motion:reduce){.phero-art .ptab,.phero-art .ptab--b{animation:none}}
/* ---- Live Progress Tracking: start blank, appear distinctly per stage
(Adam: fade too subtle — blank then appear) ---- */
.ptruck .ghost{opacity:0!important}
.pstage .ptruck .fill{clip-path:inset(100% 0 0 0);opacity:0;transition:clip-path 1s var(--ease-out),opacity .5s ease}
.pstage.on .ptruck .fill{clip-path:inset(calc(100% - var(--rv,100%)) 0 0 0);opacity:1}
/* ###########################################################################
v89 — hero small tablet nudge · "One platform connecting" animation ·
=========================================================================== */
/* 1) hero smaller tablet slightly right so it clears "in one place" */
.phero-art .ptab--b{left:2%!important}
@media(max-width:900px){.phero-art .ptab--b{left:4%!important}}
/* ###########################################################################
v96 — case-studies hero: transparent truck + floating callout badges
=========================================================================== */
.cs-hero-truck--float{position:relative;background:transparent!important;overflow:visible!important;padding:22% 4% 20%}
.cs-hero-truck--float img{width:100%;height:auto;display:block;border-radius:0;filter:drop-shadow(0 24px 40px rgba(9,20,28,.28))}
/* badges hover at three points around the truck, each with a gentle offset float */
.cs-badge--f{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:6px;box-shadow:0 18px 38px -18px rgba(12,24,32,.5);
white-space:nowrap;z-index:3}
.cs-badge--f.b1{top:0;left:2%;animation:csFloat1 5.5s ease-in-out infinite}
.cs-badge--f.b2{top:46%;right:-6%;animation:csFloat2 6.5s ease-in-out infinite}
.cs-badge--f.b3{bottom:0;left:14%;animation:csFloat3 6s ease-in-out infinite}
@keyframes csFloat1{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes csFloat2{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@keyframes csFloat3{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media(max-width:560px){
.cs-badge--f{font-size:.66rem;padding:7px 11px}
.cs-badge--f.b1{left:0}.cs-badge--f.b2{right:0}.cs-badge--f.b3{left:4%}
}
@media(prefers-reduced-motion:reduce){
.cs-badge--f{animation:none!important}
}
/* ###########################################################################
v98 — about page snags
=========================================================================== */
/* 3. bullets: ticks, not question marks */
.ab-qs li::before{content:"✓"!important}
/* 5. partner text left-aligned + tagline not italic */
.ab-partner--alt .ab-partner-grid>div:first-child{text-align:left!important}
.ab-partner .tagline--plain{font-style:normal!important;text-align:left!important}
.ab-partner--alt .ab-partner-grid>div:first-child h2,
.ab-partner--alt .ab-partner-grid>div:first-child p{margin-left:0!important;margin-right:auto!important;text-align:left!important}
/* 4. single testimonial (no slider): centre the card, hide slider chrome */
.testi-d--single{display:flex;justify-content:center;padding-block:clamp(48px,7vw,96px)}
.testi-d--single .dia{max-width:760px;margin:0 auto;text-align:center}
.testi-d--single .testi-arrow,.testi-d--single .testi-dots{display:none}
/* v100 — about quote: static (non-clickable) green chevrons either side */
.testi-d--single{position:relative}
.testi-chev{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none;z-index:2}
.testi-chev.l{left:2%}
.testi-chev.r{right:2%}
.testi-chev .chv{position:static;width:clamp(28px,3.4vw,46px);color:var(--cyan)}
.testi-chev.l .chv{transform:scaleX(-1)}
@media(max-width:600px){.testi-chev{display:none}}
/* ###########################################################################
v101 — "What changes" animated chevron strip (desktop top + mobile per-card)
replaces the chunky background chevron and per-card arrow
=========================================================================== */
.chev-row{display:flex;gap:14px;align-items:center;justify-content:center;padding:0 8px}
.chev-row .cx{flex:1;height:30px;background:#e2e7e8;
clip-path:polygon(0 0,58% 0,100% 50%,58% 100%,0 100%,42% 50%);
animation:chevGlow 5.4s linear infinite}
.chev-row .cx:nth-child(1){animation-delay:0s}.chev-row .cx:nth-child(2){animation-delay:.35s}
.chev-row .cx:nth-child(3){animation-delay:.7s}.chev-row .cx:nth-child(4){animation-delay:1.05s}
.chev-row .cx:nth-child(5){animation-delay:1.4s}.chev-row .cx:nth-child(6){animation-delay:1.75s}
.chev-row .cx:nth-child(7){animation-delay:2.1s}.chev-row .cx:nth-child(8){animation-delay:2.45s}
.chev-row .cx:nth-child(9){animation-delay:2.8s}
@keyframes chevGlow{0%,100%{background:#e2e7e8}9%{background:var(--cyan)}22%{background:#e2e7e8}}
.chev-row--top{max-width:760px;margin:34px auto 30px}
.chev-row--card{margin:16px auto;display:flex;max-width:88%}
@media(prefers-reduced-motion:reduce){.chev-row .cx{animation:none}}
/* ###########################################################################
v103 — "One platform connecting" callouts: animate in on scroll (staggered
rise+fade), hover = colour only (jiggle removed)
=========================================================================== */
.converge .tagcloud .tag{opacity:0;transform:translateY(22px);
transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1),background .3s,color .3s,box-shadow .3s}
.converge .tagcloud.in .tag,.converge .reveal.in .tag{opacity:1;transform:translateY(0)}
.converge .tagcloud .tag:nth-child(1){transition-delay:0s}
.converge .tagcloud .tag:nth-child(2){transition-delay:.12s}
.converge .tagcloud .tag:nth-child(3){transition-delay:.24s}
.converge .tagcloud:nth-of-type(2) .tag:nth-child(1){transition-delay:.30s}
.converge .tagcloud:nth-of-type(2) .tag:nth-child(2){transition-delay:.42s}
.converge .tagcloud:nth-of-type(2) .tag:nth-child(3){transition-delay:.54s}
.converge .tagcloud .tag:hover{background:var(--cyan);color:var(--navy);box-shadow:0 16px 30px -14px rgba(4,26,30,.35);z-index:2}
.converge .tagcloud.in .tag:hover{transform:translateY(-4px)}
@media(prefers-reduced-motion:reduce){.converge .tagcloud .tag{opacity:1!important;transform:none!important}}
/* ###########################################################################
v104 — HOME PAGE, matched to Tom's Figma (Xspect.zip / Home.svg)
Authoritative block. Geometry taken from the SVG source, not the render.
Hero rect = 1440 x 840; van image box = x541.78 y0 w996 h664.
=========================================================================== */
/* --- HERO: chevrons as a background (NOT elements — they lose the z-index
race against the old .hero-chev{z-index:0!important} patches) -------- */
.hero--build{
background:#01DED0 url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDg0MCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiPjxyZWN0IHdpZHRoPSIxNDQwIiBoZWlnaHQ9Ijg0MCIgZmlsbD0iIzAxREVEMCIvPjxwYXRoIGQ9Ik0tMjMxLjA3OSAtMjU4Ljk0TDE2MS42MzIgMzk3LjE0NEMxNjEuNjMyIDM5Ny4xNDQgMTYyLjAyMyAzOTguNzA5IDE2MS42MzIgMzk5LjQ5MUwtMjM4LjkxIDEwMTguNDFDLTIzOC45MSAxMDE4LjQxIC0yMzguOTEgMTAyMS41NCAtMjM2Ljk1MiAxMDIxLjkzTDE3Ni4xMTkgMTAxMi45M0MyMTEuMzU3IDEwMTQuMTEgMjQ0LjYzOCA5OTcuNjc0IDI2Mi42NDggOTY5Ljg5N0w2MzkuMzA3IDQxNS4xNEM2MzkuMzA3IDQxNS4xNCA2MzkuNjk4IDQxMy41NzUgNjM5LjMwNyA0MTIuNzkzTDI3MC44NzEgLTIwMS44MjFDMjUzLjI1MiAtMjMxLjE2MyAyMTkuOTcxIC0yNDkuNTUxIDE4My41NTggLTI1MC43MjVMLTIyOC43MyAtMjYyLjA3Qy0yMjguNzMgLTI2Mi4wNyAtMjMxLjg2MiAtMjYwLjExNCAtMjMxLjA3OSAtMjU4Ljk0WiIgZmlsbD0iIzA1QzVCMiIvPjxwYXRoIGQ9Ik02NDQuMzE2IC0yMzYuMjZMMTAzNy4wMyA0MTkuODI0QzEwMzcuMDMgNDE5LjgyNCAxMDM3LjQyIDQyMS4zODkgMTAzNy4wMyA0MjIuMTcxTDYzNi40ODUgMTA0MS4wOUM2MzYuNDg1IDEwNDEuMDkgNjM2LjQ4NSAxMDQ0LjIyIDYzOC40NDMgMTA0NC42MUwxMDUxLjUxIDEwMzUuNjFDMTA4Ni43NSAxMDM2Ljc5IDExMjAuMDMgMTAyMC4zNSAxMTM4LjA0IDk5Mi41NzdMMTUxNC43IDQzNy44MkMxNTE0LjcgNDM3LjgyIDE1MTUuMDkgNDM2LjI1NSAxNTE0LjcgNDM1LjQ3M0wxMTQ2LjI3IC0xNzkuMTQyQzExMjguNjUgLTIwOC40ODMgMTA5NS4zNyAtMjI2Ljg3MSAxMDU4Ljk1IC0yMjguMDQ1TDY0Ni42NjUgLTIzOS4zOUM2NDYuNjY1IC0yMzkuMzkgNjQzLjUzMyAtMjM3LjQzNCA2NDQuMzE2IC0yMzYuMjZaIiBmaWxsPSIjMDVDNUIyIi8+PC9zdmc+") center/cover no-repeat!important;
}
.hero--build .hero-chev{display:none!important}
/* NOTE: the v84 rule `.hero--build .hero-build__frame` already resolves to
740px + var(--navh) = 840px on desktop, which is the Figma hero height.
We only need to beat its specificity on mobile, where it clips the CTAs. */
/* van art box: the van's own bounds, at the exact Figma position.
Figma subject lands x 750.0->1262.2, y 237.0->593.9 in the 1440x840 hero. */
.hero--build .hero-build__art{
position:absolute!important;
left:52.08%!important; right:auto!important;
top:28.22%!important; bottom:auto!important;
transform:none!important;
width:35.57%!important; height:auto!important;
padding:0!important; margin:0!important; /* kill the old 3vw right padding */
z-index:1!important; display:block!important;
}
.hero--build .hero-build__art > img{
width:100%!important; height:auto!important; display:block;
position:static!important; inset:auto!important;
aspect-ratio:auto!important; /* never crop the keyed van */
object-fit:fill!important;
border-radius:0!important;
box-shadow:none!important; /* NO grounding shadow — Figma is flat #05C5B2 */
background:none!important;
}
/* badges: % of the van box, so they travel with it. Top-left anchored,
matching the Figma rect origins exactly. */
.hero--build .hero-build__art .hb{
left:var(--x)!important; top:var(--y)!important;
transform:none!important;
font-size:clamp(.5rem,.9vw,.82rem)!important;
}
@media(max-width:880px){
/* .hero--build .hero-build__frame (v84) forces 740px + navh here, which cuts
the hero CTAs off — this was already broken in v103. Let it grow instead. */
.hero--build .hero-build__frame{
height:auto!important;min-height:0!important;
padding:calc(var(--navh) + 12px) 0 3.2rem!important;
}
.hero--build .hero-build__art{
position:relative!important; left:auto!important; top:auto!important;
width:min(80vw,440px)!important; margin:1.6rem auto 0!important; z-index:4!important;
}
.hero--build .hero-build__art .hb{font-size:clamp(.46rem,2.4vw,.68rem)!important}
.hero--build .hero-build__art .hb--free{display:flex!important}
}
/* --- INTRODUCING XSPECT: one tablet composite (was 3 stacked iPads) ------- */
.intro-dash--v104{position:relative}
.intro-dash--v104 img{
width:100%;height:auto;display:block;
border-radius:0!important;box-shadow:none!important;background:none!important;
}
/* --- CONFIDENCE: cream band + #F1F4E4 chevrons, single composite --------- */
.confidence--v104{background:var(--cream)!important}
.chv--cream104{color:#F1F4E4}
.conf-composite--v104{position:relative;display:block}
.conf-composite--v104 img{
width:100%;height:auto;display:block;
border-radius:0!important;box-shadow:none!important;background:none!important;
}
/* --- HOW DOES XSPECT FIT: joined full-width tab bar (Tom's new layout) ---- */
.fitsec--v104 .fit-tabs--v104{
display:grid;grid-template-columns:1fr 1fr;gap:0;
margin:2rem 0 2.4rem;border-radius:10px;overflow:hidden;flex-wrap:nowrap;
}
.fitsec--v104 .fit-tabs--v104 .fit-tab{
border:0;border-radius:0;margin:0;width:100%;
padding:.95rem 1.4rem;text-align:center;
display:flex;align-items:center;justify-content:center;gap:.7em;
background:#2E3A47;color:#fff; /* sampled from Home.svg */
transform:none!important;transition:background .25s,color .25s;
}
.fitsec--v104 .fit-tabs--v104 .fit-tab b{opacity:.62}
.fitsec--v104 .fit-tabs--v104 .fit-tab.active{background:#01DED0;color:var(--navy)}
.fitsec--v104 .fit-tabs--v104 .fit-tab.active b{color:var(--navy);opacity:.62}
.fitsec--v104 .fit-tabs--v104 .fit-tab:not(.active):hover{background:#3A4857}
@media(max-width:640px){
.fitsec--v104 .fit-tabs--v104{grid-template-columns:1fr}
}
/* --- SEE XSPECT IN ACTION: cream band, #F1F4E4 chevrons, keyline, no shadow
Figma: rect 1060x526.48 rx15, stroke black 8px. ------------------------ */
.sec-cream-soft{background:var(--cream)!important}
.sec-cream-soft .chv--offwhite{color:#F1F4E4}
.bigdash--v104{
border:8px solid #000!important;border-radius:19px!important;
overflow:hidden!important;box-shadow:none!important;background:#fff!important;
}
.bigdash--v104 img{border-radius:0!important;box-shadow:none!important;display:block;width:100%;height:auto}
/* --- PROOF NUMBER: white background --------------------------------------- */
.proofband--v104{background:#fff!important}
.proofband--v104 .chv--offwhite{color:#EBE5E5}
/* --- CONTACT BAND: build imagery to the left of the form ------------------ */
.contact-sec--v104{position:relative;overflow:hidden}
.contact-sec--v104 .contact-grid{position:relative;z-index:1;align-items:stretch}
/* left column becomes a flex column so the art can pin to the bottom of the row */
.contact-sec--v104 .contact-grid > :first-child{display:flex;flex-direction:column}
.contact-art-slot{margin-top:auto;padding-top:clamp(2rem,5vw,4.5rem)}
.contact-art{
position:relative;
margin-left:-11.80%; /* (194 - 138.946) / 466.9 : breaks out left */
width:165.60%; /* 773.207 / 466.9 : wider than the column */
aspect-ratio:773.207/367.803;
pointer-events:none;
}
.contact-sec--v104 .hs-form-card{position:relative;z-index:2}
.contact-art__truck{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center; /* Figma crops top/bottom, never squashes */
display:block;border-radius:0;box-shadow:none;background:none;
}
.contact-art__phone{
position:absolute;left:49.41%;top:14.99%;width:18.21%;height:auto;
display:block;border-radius:0;box-shadow:none;background:none;
}
.contact-art .hb{
position:absolute;opacity:1;transform:none;
font-size:clamp(.5rem,.9vw,.82rem);
}
.contact-art__b1{left:4.66%;top:16.08%}
.contact-art__b2{left:21.33%;top:63.89%}
@media(max-width:980px){
.contact-sec--v104 .contact-grid > :first-child{display:block}
.contact-art-slot{padding-top:2rem}
.contact-art{width:100%;margin-left:0}
}
@media(max-width:560px){
.contact-art .hb{font-size:.5rem}
}
/* --- FOOTER: "Built by", credit lives inside the teal (no white strip) ---- */
.credit--in-foot{
text-align:left;padding:14px 0 0;margin:0;
font-size:.78rem;color:rgba(33,46,60,.62);background:none;
}
.credit--in-foot a{color:var(--navy);font-weight:700}
/* ###########################################################################
v105 — INTERIOR PAGES, matched to the Figma page SVGs
(About.svg · Platform.svg · CAse Studies.svg · Insights.svg)
Every number below was measured off the SVG source, not guessed.
=========================================================================== */
/* --- ALL CYAN HEROES: the same chevron system as home ---------------------
Every page SVG re-uses the identical two chevron paths on a #01DED0 base;
only the hero rect height differs (Home/About/Platform 840, Insights 654.34,
Case Studies 594.45) and the art is clipped from the TOP. So: size by width,
anchor top-left, and let the base colour fill anything below. ------------ */
.pg-hero--cyan,.in-hero--cyan{
background:#01DED0 url("img/hero-chev-tile-thin.svg?v=106") left top/100% auto no-repeat!important;
}
.pg-hero--cyan .hero-chev,.in-hero--cyan .hero-chev,
.hero--build .hero-chev{display:none!important}
/* --- INTERIOR HERO TITLES ------------------------------------------------
Figma sizes @1440 (Home is unchanged at 57.6/67.7 — verified pixel-exact):
Insights 40.7px / 47px leading (k 0.707)
About 40.6px / 47px (k 0.706)
Platform 42.0px / 47px (k 0.729)
Case Studies 47.7px / 50px (k 0.828) <- "Title Smaller"
------------------------------------------------------------------------ */
.insights-page .pg-hero--cyan .pg-title{
font-size:clamp(1.6rem,2.83vw,2.55rem)!important;line-height:1.155!important}
.cs-page .pg-hero--cyan .pg-title{
font-size:clamp(1.8rem,3.31vw,2.98rem)!important;line-height:1.05!important}
.platform-page .hero--build .hero-build__copy h1{
font-size:clamp(1.6rem,2.92vw,2.63rem)!important;line-height:1.12!important}
.about-page .hero--build .hero-build__copy h1{
font-size:clamp(1.6rem,2.82vw,2.54rem)!important;line-height:1.157!important}
/* --- INSIGHTS ------------------------------------------------------------ */
/* hero art: flat tablet composite, no 3D tilt, no shadow (Figma) */
.in-hero-dash--v105{transform:none!important}
.in-hero-dash--v105 img{
width:100%;height:auto;display:block;
border-radius:0!important;box-shadow:none!important;background:none!important;
}
/* article cards: "Remove line under button" (Link annotation) */
.in-card__link{border-bottom:0!important;padding-bottom:0!important}
/* --- PLATFORM ----------------------------------------------------------- */
/* hero art: single flat tablet composite (was two tilted .ptab frames) */
.phero-art--v105{
position:absolute;right:0;top:50%;translate:0 -50%;
width:min(46vw,660px);z-index:2;
}
.phero-art--v105 img{
width:100%;height:auto;display:block;
border-radius:0!important;box-shadow:none!important;background:none!important;
}
@media(max-width:880px){
.phero-art--v105{position:relative;right:auto;top:auto;translate:none;
width:min(92%,540px);margin:1.6rem auto 0}
}
/* P3 Compliance Management: "Cream Background" */
.sec-cream-v105{background:var(--cream)!important}
.sec-cream-v105 .chv--grey{color:#F1F4E4}
/* P6 How we roll: "New Icons to match the branding" (Tim's branded SVGs).
No tile/plate behind them — they are full-colour artwork, not glyphs. */
.hstep-ic--v105{
display:flex;align-items:flex-end;justify-content:center; /* Figma bottom-aligns them */
width:100%;height:107px; /* tallest icon (go-live) */
background:none!important;box-shadow:none!important;border-radius:0!important;
margin:0 0 1.1rem;padding:0;
}
.hstep-ic--v105 img{ /* SVGs carry their own intrinsic size */
width:auto;height:auto;max-width:100%;max-height:100%;display:block;
}
@media(max-width:880px){
.hstep-ic--v105{height:88px}
}
/* big dashboard: "Remove drop shadow - add keyline around image" (rx 15 in Figma) */
.platform-page .dashband img{
border-radius:15px!important;box-shadow:none!important;
border:1px solid rgba(33,46,60,.18)!important;
}
/* --- ABOUT -------------------------------------------------------------- */
/* "Driven by quality": Enlarge BKG Image */
.about-page .ab-intro--navy .iso-bg{
width:min(46vw,660px)!important;right:-3%!important;bottom:-8%!important;
opacity:.55!important;
}
@media(max-width:880px){
.about-page .ab-intro--navy .iso-bg{width:78vw!important;opacity:.24!important;right:-14%!important}
}
/* About hero photo: Figma rect has NO corner radius and no shadow */
.about-page .hero--build .hero-build__art img{
border-radius:0!important;box-shadow:none!important;
}
/* ###########################################################################
v106 — Kyle's review round 1
1. chevrons rebuilt as a seamless tile so thickness and scale are separate
2. home hero van 40% smaller (was crowding the "Mobile first" tick)
3. proof-number background chevron much larger
=========================================================================== */
/* --- 1. CHEVRON BACKGROUNDS ----------------------------------------------
hero-chev-tile.svg / -thin.svg are seamless one-period tiles generated from
the Figma path geometry (period 875.395, arms dx/dy 0.599, apex mid-height);
only the band thickness differs (320 vs 230, was 477).
`auto 100% repeat-x` = the tile always fits the hero HEIGHT, so the chevron
apex is visible on every page instead of being cropped to a bare diagonal. */
.hero--build{
background:#01DED0 url("img/hero-chev-tile.svg?v=106") center/auto 100% repeat-x!important;
}
.about-page .hero--build,
.platform-page .hero--build,
.pg-hero--cyan,.in-hero--cyan{
background:#01DED0 url("img/hero-chev-tile-thin.svg?v=106") center/auto 100% repeat-x!important;
}
/* --- 2. HOME HERO VAN: 40% smaller --------------------------------------
width 35.57% -> 21.34% of the frame. Re-centred in the space right of the
copy so the leftmost callout clears the "Mobile first" tick (938px vs 840px
at a 1440 viewport). Callouts scale with it. */
.hero--build .hero-build__art{
left:65.70%!important;
top:37.26%!important;
width:21.34%!important;
}
.hero--build .hero-build__art .hb{
font-size:clamp(.42rem,.68vw,.62rem)!important;
}
/* About keeps its own art rules (.about-page ... wins on specificity) —
restate them so the smaller-van numbers above can never leak onto it. */
.about-page .hero--build .hero-build__art{
left:52%!important;top:50%!important;width:min(46vw,560px)!important;
transform:translateY(-50%)!important;
}
@media(max-width:880px){
.hero--build .hero-build__art{
left:auto!important;top:auto!important;width:min(80vw,440px)!important;
}
.hero--build .hero-build__art .hb{font-size:clamp(.46rem,2.4vw,.68rem)!important}
}
/* --- 3. PROOF NUMBER: background chevron ~2.35x (matches the Figma: 307x417
against the old 131x177). Colour back to the Figma's #EDEBE6. -------- */
.proofband--v104 .chv--offwhite{color:#EDEBE6}
.proofband--v104 .proof-art .chv{
height:clamp(190px,29vw,417px)!important;
width:auto!important;
top:50%!important;bottom:auto!important;
transform:translateY(-50%)!important;
}
.proofband--v104 .proof-art{overflow:visible}
/* v106b — with the van 40% smaller the four callouts no longer fit at their
Figma-relative Y positions (3 and 4 collided). The HTML keeps the original
Figma percentages as the record; these even out the vertical spread.
Figma was: 6.92 · 29.78 · 52.64 · 67.89 */
.hero--build .hero-build__art .hb:nth-of-type(1){top:0%!important}
.hero--build .hero-build__art .hb:nth-of-type(2){top:28%!important}
.hero--build .hero-build__art .hb:nth-of-type(3){top:56%!important}
.hero--build .hero-build__art .hb:nth-of-type(4){top:84%!important}
.about-page .hero--build .hero-build__art .hb{top:var(--y)!important}
/* ###########################################################################
v107 — Kyle review round 2
1. ONE chevron tile for every header, two apexes visible, band 400 (was 477
in the Figma, 320/230 in v106 which was too thin and showed one point)
2. home hero van a tiny bit bigger (21.34% -> 25.5%)
=========================================================================== */
/* --- 1. CHEVRONS -----------------------------------------------------------
`background-position: left top` is load-bearing. With `center` (v106) a
1440 box fits 1.646 tiles and the centring pushed both neighbouring apexes
off-screen, leaving a single big point — "only one chevron, way too pointy".
Left-anchored, the tile's apex at x=162 and its repeat at x=1037.4 land
exactly where the Figma has them. `auto 100%` keeps the tile fitted to the
hero height, so every header shows the same two chevrons. */
.hero--build,
.about-page .hero--build,
.platform-page .hero--build,
.pg-hero--cyan,.in-hero--cyan{
background:#01DED0 url("img/hero-chev-tile.svg?v=108") left center/60.79% auto repeat-x!important;
}
/* --- 2. HOME HERO VAN: nudged back up ------------------------------------
35.57% (Figma) -> 21.34% (v106, too small) -> 25.5% now.
Callouts back up to .78vw to match, spread still 0/28/56/84%. */
.hero--build .hero-build__art{
left:64%!important;
top:34.76%!important;
width:25.5%!important;
}
.hero--build .hero-build__art .hb{
font-size:clamp(.46rem,.78vw,.7rem)!important;
}
.about-page .hero--build .hero-build__art{
left:52%!important;top:50%!important;width:min(46vw,560px)!important;
transform:translateY(-50%)!important;
}
@media(max-width:880px){
.hero--build .hero-build__art{
left:auto!important;top:auto!important;width:min(80vw,440px)!important;
}
.hero--build .hero-build__art .hb{font-size:clamp(.46rem,2.4vw,.68rem)!important}
}
/* ###########################################################################
v108 — Kyle review round 3: "the third one down looks perfect, transfer that
to the other headers". The home arrangement is now driven by VIEWPORT WIDTH
instead of hero height, so every header gets the identical two chevrons.
60.79% of 1440 = 875.4px = exactly one period, so 1440 always fits 1.64
tiles -> two apexes, at x=162 and x=1037.4, on every page.
v107 used `auto 100%` (height-driven), which made the short heroes scale the
tile DOWN and fit 2.25-2.38 across -> the three chevrons Kyle spotted on
Insights and Case Studies.
The tile canvas is 1200 tall (heroes run 580-879) so `center` never leaves a
flat strip; the apex lands on the hero's vertical centre every time.
=========================================================================== */
/* ###########################################################################
v110 — Kyle review round 5
1. Platform "One platform connecting…" — glass callouts overlapping the heading
2. Platform "See Xspect in action" — iso-build art fills the whole background
=========================================================================== */
/* --- 1. GLASS CALLOUTS ---------------------------------------------------
backdrop-filter blurs what is BEHIND the pill (the heading, the chevrons);
the pill's own label stays perfectly crisp. Negative margins pull the two
rows in so they sit over the top and bottom of the H2. */
.converge .wrap{position:relative}
.converge h2{position:relative;z-index:1}
.converge .tagcloud{z-index:3}
.converge .tagcloud:first-of-type{margin-bottom:-3.3rem!important}
.converge .tagcloud:nth-of-type(2){margin-top:-1.4rem!important}
.converge .tagcloud .tag{
background:rgba(255,255,255,.55)!important;
-webkit-backdrop-filter:blur(9px) saturate(1.5);
backdrop-filter:blur(9px) saturate(1.5);
border:1px solid rgba(255,255,255,.75)!important;
box-shadow:0 8px 26px -14px rgba(12,24,32,.35),inset 0 1px 0 rgba(255,255,255,.6)!important;
color:var(--navy);
}
.converge .tagcloud .tag:hover{
background:rgba(1,222,208,.72)!important;
-webkit-backdrop-filter:blur(9px) saturate(1.5);
backdrop-filter:blur(9px) saturate(1.5);
border-color:rgba(255,255,255,.9)!important;
}
/* no backdrop-filter support (older Safari/Firefox): fall back to a solid-ish pill
so the label never sits on unreadable transparency */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.converge .tagcloud .tag{background:rgba(255,255,255,.92)!important}
}
@media(max-width:760px){
/* mobile stacks the clouds into a flex row — no overlap, keep them clear of the H2 */
.converge .tagcloud:first-of-type{margin-bottom:.9rem!important}
.converge .tagcloud:nth-of-type(2){margin-top:.9rem!important}
}
/* --- 2. "SEE XSPECT IN ACTION": iso art fills the background -------------- */
.demo .bgart{
right:auto!important;left:50%!important;top:50%!important;
translate:-50% -50%!important;
width:100%!important;min-width:1100px;max-width:none!important;height:auto!important;
opacity:.16!important;
}
@media(max-width:760px){
.demo .bgart{width:170%!important;min-width:0;max-width:none!important;opacity:.13!important}
}
/* --- 3. CASE STUDIES HERO TRUCK (v110) -----------------------------------
Swapped to `soloman vehichle.png` from Tim's Images folder (882x404), which
carries a real baked-in ground shadow (50.8% soft-alpha along the bottom,
against 2.3% on the old cs-hero-truck.png — measured, not eyeballed).
The old CSS drop-shadow has to come off: it traces the truck's silhouette
rather than sitting under the wheels, so on top of a baked-in shadow it
double-shadows. Also §0a: never add a shadow behind a transparent image. */
.cs-hero-truck--float img{filter:none!important}
/* --- v111 — glass callouts, round 2 ---------------------------------------
Kyle: "the top 3 don't seem transparent, they can overlay the text a little
more and be glass transparent look."
Cause: the top row overlapped the H2's BOX by 13px, but with font-size 67.2
on line-height 69 there is ~10px of leading above the caps — so only ~3px of
actual letterform sat behind the pill and there was nothing to blur. Pushed
to ~34px of box overlap (~24px of real glyph) and dropped the fill opacity
so the blurred letters read through. */
.converge .tagcloud:first-of-type{margin-bottom:-4.6rem!important}
.converge .tagcloud .tag{
background:rgba(255,255,255,.42)!important;
-webkit-backdrop-filter:blur(12px) saturate(1.6);
backdrop-filter:blur(12px) saturate(1.6);
border:1px solid rgba(255,255,255,.65)!important;
box-shadow:0 8px 26px -14px rgba(12,24,32,.30),inset 0 1px 0 rgba(255,255,255,.55)!important;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.converge .tagcloud .tag{background:rgba(255,255,255,.92)!important}
}
@media(max-width:760px){
.converge .tagcloud:first-of-type{margin-bottom:.9rem!important}
}
/* --- v112 — Kyle review round 7 -------------------------------------------
1. Callouts scattered rather than sitting in two neat rows. The vertical
offsets are inline `top` values on each .tag in platform.html so they are
easy to re-nudge; kept within +14/-17px so every pill still overlaps the
heading glyphs (the whole point of the glass). `position:static` on
mobile means the inline `top` is simply ignored there.
2. About "Driven by Quality" — iso art full-bleed, same treatment Kyle
approved on Platform's "See Xspect in action".
------------------------------------------------------------------------ */
.about-page .ab-intro--navy .iso-bg{
right:auto!important;left:50%!important;top:auto!important;bottom:-8%!important;
translate:-50% 0!important;
width:100%!important;min-width:1100px;max-width:none!important;height:auto!important;
opacity:.16!important;
}
/* NOTE the vertical anchor. iso-build.svg is 1070x790, so at width:100% it renders
1063px tall while this band is only 581px. Centring it (as on Platform's taller
941px demo band) crops straight through the middle and the VAN — the thing Kyle
actually wants to see — falls off the bottom. Bottom-anchored, the visible slice
is the lower 55% of the scene, which is where the vehicle sits. */
@media(max-width:880px){
.about-page .ab-intro--navy .iso-bg{
width:170%!important;min-width:0;max-width:none!important;opacity:.13!important;
}
}
/* --- v113 — invisible text in the Home "How does Xspect fit" section --------
`.fit-kicker`/`.fit-sub` are styled dark for a light background, and the
white overrides only ever existed for `.fitsec--navy`. Home's section is
`.fitsec--blue` (#212E3C), so the kicker rendered rgb(33,46,60) on
rgb(33,46,60) — contrast ratio 1.00, literally invisible. Same for the sub
at 1.04. Both panels affected (Start familiar AND Grow smarter).
Kyle reported these two.
------------------------------------------------------------------------ */
.fitsec--blue .fit-kicker{color:#fff}
.fitsec--blue .fit-sub{color:rgba(255,255,255,.72)}
/* A contrast sweep of the whole section turned up a THIRD one Kyle hadn't
spotted: `.fitsec--blue .fit-promise .t` sets the label to var(--cyan) but
the promise band's background IS cyan — #01DED0 on #01DED0, ratio 1.00.
Navy is what the rest of the site uses for text on cyan (cf. .fit-tab.active). */
.fitsec--blue .fit-promise .t{color:var(--navy)}
/* --- v114 — floating glass callouts (Platform) -----------------------------
Animates the independent `translate` property, NOT `transform`. That matters:
`.converge .tagcloud .tag` already uses transform for its reveal
(translateY(22px) -> 0) and for the hover lift (translateY(-4px)). Animating
transform here would clobber both. `translate` composites separately, so the
reveal, the hover lift and the float all coexist untouched.
Amplitude/duration/delay are per-tag custom properties set inline in
platform.html; the six durations are non-harmonic (5.6/7.1/6.3/6.8/5.9/7.4s)
so they drift permanently out of phase instead of syncing up.
The delays (1.5-2.5s) start the float only AFTER the reveal transition has
finished (max transition-delay .54s + .7s duration = 1.24s).
------------------------------------------------------------------------ */
@keyframes tagfloat{0%,100%{translate:0 0}50%{translate:0 var(--fl,-6px)}}
.converge .tagcloud.in .tag,
.converge .reveal.in .tag{
animation:tagfloat var(--fd,6s) ease-in-out var(--fdelay,1.6s) infinite;
}
@media(prefers-reduced-motion:reduce){
.converge .tagcloud .tag{animation:none!important;translate:none!important}
}
/* --- v115 — Kyle: drop the hover jump, let the float do the moving ---------
"remove the jump or move when hovered over and rather have the vertical
movements, floating effect as they cover the background text too much and
if they randomly move up and down slowly it will look much better"
1. Hover no longer translates — the float is the only vertical motion now.
(Hover keeps its glass tint; these are aria-hidden decorative pills.)
2. Overlap of the heading cut ~35%: resting glyph-behind was 36/18/27 and
30/16/23, now ~21/16/17 and ~16/12/14. Still above the ~10px the blur
needs to read, but far less of the headline is obscured.
3. Float slowed to 9.2-12.3s periods (was 5.6-7.4), still non-harmonic.
With the pills now sitting closer together vertically, the FLOAT is what
supplies the randomness rather than the static offsets.
------------------------------------------------------------------------ */
.converge .tagcloud.in .tag:hover,
.converge .reveal.in .tag:hover{transform:none}
/* --- v116 — callout collisions ---------------------------------------------
Kyle: "the last two poles at the top are kind of overlapping, maybe the one
can be a bit more towards the end of the platform word."
At 1440 "Operational reporting" ended at x858 and "Evidence capture" started
at x846 — a real 12px OVERLAP, not just a tight gap. Moved 62% -> 64.8%, so
it now ends at x1092, just past the end of "PLATFORM" (which ends at x1084),
and clears its neighbour by 18px.
That measurement also exposed a pre-existing responsive fault: the pills are
positioned by PERCENTAGE but their widths are fixed by the label at a fixed
font-size, so as the container narrows the gaps close and they overlap. It
was -19px at 1024, -49px at 900, -74px at 800. Two fixes:
1. fluid tag font-size, so label widths shrink with the container
2. reflow to the centred flex row at 960px instead of 760px, which removes
the worst part of the absolute-positioned band entirely
Breakpoint chosen by measurement: the worst gap is 18px at 961px and above,
but drops to 6px by 901px, so the band has to end above that.
------------------------------------------------------------------------ */
.converge .tagcloud .tag{font-size:clamp(.62rem,1.05vw,.8rem)}
@media(max-width:960px){
.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;top:auto!important;
font-size:.68rem;padding:7px 12px;white-space:normal;
}
/* no overlap of the heading once they are in flow */
.converge .tagcloud:first-of-type{margin-bottom:.9rem!important}
.converge .tagcloud:nth-of-type(2){margin-top:.9rem!important}
}
/* --- v116b — legal-page header overflow ------------------------------------
Found during the width sweep, pre-existing since v103: privacy.html and
terms.html show the DARK logo (logo-full.png, 175px wide at height 38) where
every other page shows the LIGHT one (155px at height 56). That extra 20px
pushed .nav-cta 10px past the viewport between 901px (where the burger takes
over) and ~1044px, giving those two pages a horizontal scrollbar.
Trimming the dark logo to 33px in that band brings it to ~152px and clears
the edge with room to spare.
------------------------------------------------------------------------ */
@media(min-width:901px) and (max-width:1060px){
.site-head .brand-logo--dark{height:33px}
}
/* --- v116c — desktop nav overflowed between 901px and 1024px ----------------
The width sweep found this on EVERY page, pre-existing since v103. The nav
is brand + 5 links + 2 CTA buttons, all nowrap: at 901px that needs ~919px
of content in an 811px content box, so the header pushed 93px past the
viewport and every page got a horizontal scrollbar. The burger only took
over at 900px, one pixel below the worst case.
Fix: move the burger handover to 1024px. Markup and JS are unchanged — this
just extends the existing mobile nav rules up one breakpoint.
------------------------------------------------------------------------ */
@media(min-width:901px) and (max-width:1024px){
.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;color:var(--navy)}
}
/* --- v116d — "More case studies" grid overflowed at 821-980px ---------------
.more-grid is 3 columns down to 820px, but grid items default to
min-width:auto, so the cards refused to shrink past their min-content width
(~277px). Three of those plus gaps needs 877px inside an 810px content box,
so case-studies.html scrolled sideways in that band.
Two columns from 980px down, and min-width:0 so the tracks can actually
shrink rather than push the grid wider than its container.
------------------------------------------------------------------------ */
.more-grid>*{min-width:0}
@media(max-width:980px){
.more-grid{grid-template-columns:repeat(2,1fr);max-width:760px;margin-inline:auto}
}
/* --- v117 — bigger, less regular float -------------------------------------
Kyle: "more movement in the floating callouts, and more random. Maybe a 20px
difference from what it is now."
v114/v115 floated each pill 5-6px in one direction from rest. Total travel is
now 24-26px per pill — about 20px more, as asked.
Two changes make it read as random rather than as six things bobbing:
1. The float is no longer one-directional. Each pill has its own --up and
--dn, so it swings THROUGH its resting position instead of lifting off it.
2. A small horizontal component (--dx, 2-3px, sign alternating) turns the
path from a straight line into a slow ellipse. Direction of travel differs
per pill, so no two ever look synchronised.
The up/down split is DELIBERATELY ASYMMETRIC and mirrored between the rows:
top row --up -16..-21, --dn +5..+8 (biased AWAY from the headline)
bottom row --up -5..-9, --dn +17..+20 (also biased away — it sits below)
Moving a pill toward the headline is what buried the text at v114, so the
extra travel is spent moving OFF it. Worst-case extra coverage is +9px, which
keeps the whole cycle inside the band Kyle signed off at v115.
Periods 9.2 / 13.7 / 11.1 / 12.6 / 10.3 / 14.2s with delays 0.4-3.4s — no
two share a common multiple inside a couple of minutes, so the arrangement
never resolves into a pattern.
------------------------------------------------------------------------ */
@keyframes tagfloat{
0%,100%{translate:0 var(--up,-8px)}
25% {translate:var(--dx,0px) calc((var(--up,-8px) + var(--dn,8px)) / 2)}
50% {translate:0 var(--dn,8px)}
75% {translate:calc(var(--dx,0px) * -1) calc((var(--up,-8px) + var(--dn,8px)) / 2)}
}
/* Reflowed layout: the pills are in normal flow and only ~14px from the
headline, so the desktop travel would collide. Damp it and open the gaps. */
@media(max-width:960px){
.converge .tagcloud .tag{--up:-5px;--dn:5px;--dx:0px}
.converge .tagcloud:first-of-type{margin-bottom:1.3rem!important}
.converge .tagcloud:nth-of-type(2){margin-top:1.3rem!important}
}