/* ============ 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?v=134') 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}
}
/* --- 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}
}
/* --- v118 — admin section switches -----------------------------------------
/admin writes assets/site-flags.js, which is loaded synchronously in
and puts one class per switch on : .flag-on-pricing / .flag-off-pricing
and so on. Anything carrying a matching data-flag then disappears.
Loading it in the head rather than at the end of the body is deliberate —
a hidden section must never paint and then vanish. There is no flash.
Adding a switch later: add the row to flag_definitions() in admin/lib.php,
add its selector to the list below, and put data-flag="the-key" on the
markup. Nothing else.
-------------------------------------------------------------------------- */
.flag-off-pricing [data-flag~="pricing"],
.flag-off-coolvan-case [data-flag~="coolvan-case"],
.flag-off-more-case-studies [data-flag~="more-case-studies"],
.flag-off-insight-blogs [data-flag~="insight-blogs"],
.flag-off-partner-logos [data-flag~="partner-logos"]{display:none!important}
/* The nav is a flex row with a gap; a display:none child collapses cleanly,
so no extra spacing rules are needed. This is only here as a reminder that
hiding a nav item must not leave a phantom gap — verified at every width. */
/* --- v118 — article pages --------------------------------------------------
Two new pages hang off Insights: blog-ecoc.html and
blog-conformity-of-production.html. They reuse the existing cyan page hero
and the navy contact band, so the only new work here is the prose column.
Measure is capped at 68ch — long-form body copy at the full 1200px wrap is
unreadable, and the rest of the site has no prose column to inherit from.
-------------------------------------------------------------------------- */
.art-hero__in{max-width:56ch}
.art-kicker{font-family:var(--display);font-weight:800;font-size:.72rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--navy);opacity:.72;margin:0 0 1rem}
.art-kicker a{color:var(--navy);text-decoration:none;border-bottom:1px solid rgba(33,46,60,.35)}
.art-kicker a:hover{border-bottom-color:var(--navy)}
.art-kicker span{opacity:.5;margin:0 .35em}
.art-title{font-size:clamp(2rem,4.6vw,3.5rem)}
.art-lead{max-width:52ch}
.art-meta{margin-top:1.4rem;font-size:.85rem;color:rgba(33,46,60,.62);font-weight:600}
.art{padding-top:clamp(2.6rem,5vw,4.4rem)}
/* The article column lines up with the hero text rather than centring in
its own narrower wrap — otherwise the body copy starts ~170px to the
right of the headline above it and the page reads as two layouts. */
.art-wrap{max-width:var(--wrap)}
.art-body{font-size:clamp(1rem,1.15vw,1.08rem);line-height:1.72;color:#33414e}
.art-body>*{max-width:68ch}
.art-body p{margin:0 0 1.15rem}
.art-body h2{font-size:clamp(1.25rem,2.1vw,1.6rem);line-height:1.25;margin:2.4rem 0 .9rem;color:var(--navy)}
.art-body h2:first-child{margin-top:0}
.art-stand{font-size:clamp(1.1rem,1.5vw,1.28rem);line-height:1.55;color:var(--navy);
font-weight:600;border-left:4px solid var(--cyan);padding-left:1.1rem;margin-bottom:2rem!important}
.art-list{margin:0 0 1.4rem;padding:0;list-style:none}
.art-list li{position:relative;padding-left:1.6rem;margin-bottom:.6rem}
.art-list li:before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;
background:var(--cyan);border-radius:2px}
.art-list--tick li:before{content:"\2713";background:none;width:auto;height:auto;top:0;
color:var(--cyan-deep,#05C5B2);font-weight:800}
.art-quote{margin:2rem 0;padding:1.5rem 1.7rem;background:var(--cream,#F9FBF0);
border-radius:14px;border:1px solid rgba(33,46,60,.08)}
.art-quote p{margin:0;font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.5;
color:var(--navy);font-weight:600}
.art-cta{margin-top:3rem;padding:clamp(1.6rem,3vw,2.2rem);background:var(--navy);
border-radius:16px;color:#fff;max-width:68ch}
.art-cta h2{margin:0 0 .6rem;color:#fff;font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.25}
.art-cta p{margin:0 0 1.3rem;color:rgba(255,255,255,.78);line-height:1.6}
.art-back{margin-top:2.2rem}
@media(max-width:600px){
.art-body>*{max-width:none}
.art-stand{padding-left:.9rem}
}
/* v118b — extra article furniture the supplied eCoC copy needs */
.art-body h3.art-subh{font-size:clamp(1.05rem,1.6vw,1.22rem);margin:2rem 0 .8rem;color:var(--navy)}
.art-dates{margin:0 0 1.6rem;border:1px solid rgba(33,46,60,.12);border-radius:12px;overflow:hidden;max-width:68ch}
.art-dates__row{display:flex;gap:0;border-bottom:1px solid rgba(33,46,60,.1)}
.art-dates__row:last-child{border-bottom:0}
.art-dates__row .w{flex:0 0 34%;padding:.85rem 1.1rem;font-weight:700;color:var(--navy);
background:rgba(1,222,208,.08);font-size:.95rem}
.art-dates__row .d{flex:1;padding:.85rem 1.1rem;font-size:.95rem}
.art-dates__row--key .w{background:var(--cyan);color:var(--navy)}
.art-dates__row--key .d{font-weight:600;color:var(--navy)}
@media(max-width:520px){
.art-dates__row{flex-direction:column}
.art-dates__row .w{flex:none;padding-bottom:.3rem}
.art-dates__row .d{padding-top:.3rem}
}
.art-steps{margin:0 0 1.5rem;padding:0;list-style:none;counter-reset:s;max-width:68ch}
.art-steps li{position:relative;padding-left:2.6rem;margin-bottom:1rem;counter-increment:s}
.art-steps li:before{content:counter(s);position:absolute;left:0;top:.05em;width:1.85rem;height:1.85rem;
border-radius:50%;background:var(--cyan);color:var(--navy);font-weight:800;font-size:.85rem;
display:flex;align-items:center;justify-content:center}
.art-steps li b{color:var(--navy)}
/* Links inside long-form prose are navy with a cyan underline rather than
cyan text. The site's cyan-deep on white is 2.18:1 — fine for a headline
accent, too weak for a link buried in a paragraph. Navy on white is 12.4:1
and the cyan underline keeps it obviously a link. */
.art-body a,.art-back a{color:var(--navy);font-weight:600;
text-decoration:underline;text-decoration-color:var(--cyan);
text-decoration-thickness:2px;text-underline-offset:3px}
.art-body a:hover,.art-back a:hover{text-decoration-color:var(--navy)}
/* v118c — insight cards now link out --------------------------------------
The three card images are wrapped in anchors, so .in-card>img no longer
matches. Restore the image rule through the wrapper and keep the wrapper
itself layout-neutral.
Note the two different flag attributes on this page. The "Find out more"
text link carries data-flag, so it disappears with the switch. The image
wrapper carries data-flag-link instead: hiding the image would blow a hole
in the card, so when the switch is off the anchor is simply made inert and
the picture stays exactly where it was.
------------------------------------------------------------------------ */
.in-card>.in-card__img{display:block;width:100%}
.in-card>.in-card__img img{width:100%;height:200px;object-fit:cover;display:block;background:#dfe3e4}
.flag-off-insight-blogs [data-flag-link~="insight-blogs"]{pointer-events:none;cursor:default}
/* v118d — partner logo strip ------------------------------------------------
Two real partner logos replace the placeholder row (which was the CoolVan
logo twice with a photo of a Solomon truck between them).
The two supplied files need opposite treatment. Solomon's is a WHITE
wordmark, so the existing white card would have made it invisible — it gets
a navy card instead. Burgess's is dark blue line art, which reads fine on
the cyan band, so it gets a white card to match the strip's card rhythm
without inverting the artwork.
------------------------------------------------------------------------ */
.ab-logos-item .solomon-box,
.ab-logos-item .coolvan-box,
.ab-logos-item .burgess-box{
display:flex;align-items:center;justify-content:center;
border-radius:10px;padding:14px 26px;
box-shadow:0 10px 26px -14px rgba(4,26,30,.35);
transition:transform .25s var(--ease,ease),box-shadow .25s;
}
.ab-logos-item .solomon-box,
.ab-logos-item .coolvan-box{background:var(--navy)}
.ab-logos-item .burgess-box{background:#fff}
.ab-logos-item .solomon-box:hover,
.ab-logos-item .burgess-box:hover{transform:translateY(-3px);box-shadow:0 16px 34px -16px rgba(4,26,30,.45)}
.ab-logos-item .solomon-box img,
.ab-logos-item .coolvan-box img,
.ab-logos-item .burgess-box img{height:clamp(30px,3.6vw,44px);width:auto;display:block}
@media(max-width:520px){
.ab-logos-item .solomon-box,
.ab-logos-item .coolvan-box,
.ab-logos-item .burgess-box{padding:12px 20px}
}
/* v118e — tap targets on the new article pages ------------------------------
The breadcrumb and the "All insights" link measured 13px and 21px tall at
390px, well under a comfortable thumb target. Padding only — nothing moves
visually, the hit area just grows around the text.
-------------------------------------------------------------------------- */
@media(max-width:760px){
.art-kicker a{display:inline-block;padding:9px 2px;margin:-9px 0}
.art-back a{display:inline-block;padding:10px 2px;margin:-10px 0}
}
/* --- v118d — eCoC readiness heading: "How ready are you?" on one line -------
Kyle: the question was breaking as "HOW READY ARE / YOU? ANSWER A FEW…".
A plain
does not fix it. Measured with a hidden probe span at the
heading's own computed font: the phrase needs 761px where the heading box is
738px at 1440 — it is 3% too wide to fit on one line by itself, at EVERY
width. So it gets its own line AND a small size reduction, sized from the
measurements rather than guessed.
Above 520px the shortfall is tiny and constant (worst case 0.954 at 1024),
so 0.94em clears it everywhere with margin to spare.
Below 520px the site's own clamp has bottomed out at 30.4px while the
container keeps shrinking, so the gap widens fast — 0.72 needed at 390,
0.58 at 320. That needs a width-tracking value, not a fixed em:
the phrase renders ~15.9x its font-size, and the container is roughly
viewport minus 40px, so calc(5.8vw - 2px) tracks it with a safety margin.
Verified 320-1600.
Only this one heading is affected — .ecoc-tool__h exists nowhere else.
-------------------------------------------------------------------------- */
.ecoc-tool__h .rq{display:block;white-space:nowrap;font-size:.93em}
@media(max-width:520px){
.ecoc-tool__h .rq{font-size:calc(5.8vw - 2px)}
}
/* v120 — two more switch targets */
.flag-off-home-collage-tags [data-flag~="home-collage-tags"]{display:none!important}
/* v121 — eCoC readiness: details step before the result --------------------
FIXED: v120 styled this for a navy panel — white labels, white input text,
translucent white fill. The .wizard card is actually WHITE, so the whole
form was white on white and effectively invisible. The section behind the
wizard is navy, which is what misled me; the card sitting on it is not.
Now matched to the light card it actually sits on: navy text, light border,
cyan focus ring — the same language as the answer buttons above it.
-------------------------------------------------------------------------- */
.lead-f{margin-bottom:14px}
.lead-f label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px;color:var(--navy)}
.lead-f input{width:100%;padding:12px 14px;border:1.5px solid rgba(27,44,57,.18);border-radius:10px;
font:inherit;background:#fff;color:var(--navy)}
.lead-f input::placeholder{color:rgba(27,44,57,.42)}
.lead-f input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(1,222,208,.22)}
.lead-f input.is-bad{border-color:#c0432a;background:#fff7f5}
.lead-err{color:#a8331c;font-size:.9rem;margin:.4rem 0 0;font-weight:600}
#ecocLead .wizard__nav{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
#leadGo[disabled]{opacity:.6;cursor:progress}
/* v121 — eCoC outcome: tier badge, breakdown, booking ----------------------
Styling stays in the Xspect language Kyle signed off — navy panel, cyan
accents, Akira headings. Only the traffic-light tier colours come from the
reference build, because a readiness result has to read at a glance.
-------------------------------------------------------------------------- */
.out-tier{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;
font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:6px 16px;border-radius:99px;
margin-bottom:.9rem}
.out-tier--green{background:rgba(74,222,128,.18);color:#2f7d4f;border:1px solid rgba(47,125,79,.3)}
.out-tier--amber{background:rgba(251,191,36,.2);color:#8a5a06;border:1px solid rgba(138,90,6,.28)}
.out-tier--red{background:rgba(248,113,113,.18);color:#9c2b2b;border:1px solid rgba(156,43,43,.28)}
.out-breakdown{margin-top:2rem;text-align:left;max-width:640px;margin-inline:auto}
.out-breakdown__h{font-family:var(--display);font-weight:800;font-size:.72rem;letter-spacing:.14em;
text-transform:uppercase;color:rgba(27,44,57,.6);margin:0 0 .8rem}
.fnd{display:flex;gap:13px;padding:15px 16px;background:#fff;border:1px solid rgba(27,44,57,.1);
border-radius:12px;margin-bottom:9px}
.fnd__i{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;
font-weight:800;font-size:.9rem;flex:none}
.fnd__i--ok{background:#dcfce7;color:#166534}
.fnd__i--warn{background:#fef3c7;color:#92400e}
.fnd__i--fail{background:#fee2e2;color:#991b1b}
.fnd b{display:block;font-size:.92rem;color:var(--navy);margin-bottom:3px}
.fnd span span{display:block;font-size:.86rem;line-height:1.5;color:rgba(27,44,57,.72)}
.out-cta{margin-top:2rem;padding:clamp(1.6rem,3vw,2.2rem);border-radius:16px;
background:linear-gradient(135deg,var(--navy),var(--navy-2,#283849));color:#fff;
max-width:640px;margin-inline:auto}
.out-cta h4{font-family:var(--display);font-weight:900;font-size:clamp(1.1rem,1.9vw,1.4rem);
line-height:1.2;margin:0 0 .6rem;color:#fff}
.out-cta p{margin:0 0 1.2rem;color:rgba(255,255,255,.78);font-size:.95rem;line-height:1.6}
.out-cta__sub{font-size:.76rem;color:rgba(255,255,255,.5);margin:1rem 0 0!important}
#bookWrap .meetings-iframe-container{background:#fff;border-radius:12px;overflow:hidden;min-height:560px}
@media(max-width:560px){#bookWrap .meetings-iframe-container{min-height:680px}}
/* --- v122 — About page, two mobile fixes -----------------------------------
1. THE HERO IMAGE WAS 97px OFF THE RIGHT EDGE AT 390px.
Cause is a specificity trap worth understanding, because the same shape will
catch the next person. The v107 block ends with:
.about-page .hero--build .hero-build__art{ left:52% … } (0,3,0)
@media(max-width:880px){
.hero--build .hero-build__art{ left:auto … } (0,2,0)
}
The mobile override is LESS specific than the About rule, so it loses — even
though it is inside a media query, and even though both use !important.
Media queries do not add specificity. Home has no page-scoped rule, so the
override works there; About kept its desktop positioning at every width.
Measured before: 179px wide, left edge at 308px in a 390px viewport, right
edge at 487px — 97px off-screen — and lifted by translateY(-50%), which is
the "up to the right" Kyle described.
Fixed with a page-scoped mobile rule so it actually outranks the desktop one.
Sized to match the other headers: Home renders 312px at 390, this now renders
the same.
-------------------------------------------------------------------------- */
@media(max-width:880px){
.about-page .hero--build .hero-build__art{
position:relative!important;
left:auto!important;
right:auto!important;
top:auto!important;
width:min(80vw,440px)!important;
transform:none!important;
margin:1.4rem auto 0!important;
}
}
/* 2. Adam Taylor centred on mobile.
An earlier rule deliberately left-aligned this block below 880px
(.ab-founder{text-align:left} with margin:0 on the image). Kyle wants the
portrait and the name/role under it centred instead. */
@media(max-width:880px){
.ab-founder{text-align:center}
.ab-founder img{margin-inline:auto}
}
/* --- v123 — About hero on mobile: image between the copy and the buttons ----
Kyle: "the other headers have the image between the text and buttons and
this one looks different."
He was right, and v122 only fixed half of it. The image was correctly sized
and on-screen, but it still rendered FIRST — above the heading — because in
the markup .hero-build__art is a sibling of .hero-build__inner and comes
before it. Every other page header runs heading, lead, then artwork.
The art element is now inside .hero-build__copy, sitting between the lead
paragraph and the CTA row. Desktop is unaffected: there the art is
position:absolute and .hero-build__copy is static, so its containing block is
still .hero-build__frame. Measured identical before and after — 471px at
x532 at 1024, 560px at x749 at 1440.
Second half of the fix: the nav was being cleared TWICE. The frame carries
padding-top:calc(var(--navh) + 12px) and .hero-build__inner adds another
calc(var(--navh) + 26px) on top. With the art previously sitting in that
band nobody noticed; once it moved down, ~196px of empty cyan opened up
above the heading. The frame's own padding already does the job.
-------------------------------------------------------------------------- */
@media(max-width:880px){
.about-page .hero--build .hero-build__inner{padding-top:0!important}
.about-page .hero--build .hero-build__art{margin:1.5rem auto 1.7rem!important}
}
/* --- v124 — CoolVan added to the About partner strip -----------------------
Third card in the strip. Like the Solomon wordmark, the CoolVan artwork is
PURE WHITE with transparency — every opaque pixel is rgb(255,255,255) —
so it gets the navy card. On the white card it would be invisible, and on
the cyan band directly it would be barely legible.
The strip has no hover lift on this one because it is not a link: no URL was
supplied for CoolVan. Wrap it in an when there is
one and the existing hover rule picks it up.
Its aspect is 300x133 against 300x90 and 258x97 for the other two, so the
shared `height` on .ab-logos-item img is what keeps the three optically
level rather than any per-logo tweak.
-------------------------------------------------------------------------- */
.ab-logos-item .coolvan-box{cursor:default}
@media(max-width:640px){
.ab-logos-row{gap:22px 28px}
}
/* --- v125 — "How does Xspect fit into my business" readability -------------
Kyle: "I'm finding the white box hard to read. Line height is spaced out but
should be a different font at this size... Can the boxes above this be in a
different colour, it blends into the background."
Both measured before changing anything.
1. THE STEP CARD HEADINGS. They were Akira Expanded at 16.32px on a 25.3px
line-height with no letter-spacing. Akira is a display face — it is
drawn for 40px+ headlines, and at 16px the wide letterforms and tight
apertures fight each other while the 1.55 line-height pulls the two lines
apart. He asked for a different font at this size if possible, so they
move to DM Sans at 700, which is the body face already used everywhere
else on the card. Line-height tightened to 1.3 to match.
2. THE TAB BAR. The inactive tab was rgb(46,58,71) on a rgb(33,46,60)
section — a contrast ratio of 1.19. It is genuinely invisible as a
separate object, exactly as he said. It now sits on a lighter panel with
a visible edge, so the pair reads as a two-position switch.
-------------------------------------------------------------------------- */
/* NOTE the !important: line 2454 carries
`h1,h2,h3,h4,.h-sec,.pg-title{font-family:var(--display)!important}`
— a (0,0,1) selector with !important, which beats any plain rule however
specific. Matching it is the only way to change a heading font on this site. */
.fitsec .fit-step h4{
font-family:var(--body)!important;
font-weight:700;
font-size:1.05rem;
line-height:1.3;
letter-spacing:-.01em;
text-transform:none;
}
/* Tabs: the inactive half was #2E3A47 on a #212E3C section — 1.19:1, which is
why it read as background rather than as a control. That colour came from
Home.svg, so it is the Figma value, not a mistake — but it does not survive
contact with a real screen. Lifted to #46586B (2.15:1 against the section)
and given the pair a visible outer edge so it reads as a two-position switch.
Specificity note: the rule that sets the old colour is
`.fitsec--v104 .fit-tabs--v104 .fit-tab` at (0,3,0). Anything less loses. */
.fitsec--v104 .fit-tabs--v104{
border:1px solid rgba(255,255,255,.18);
box-shadow:0 10px 30px -18px rgba(0,0,0,.5);
}
.fitsec--v104 .fit-tabs--v104 .fit-tab{
background:#46586B;
color:#fff;
}
.fitsec--v104 .fit-tabs--v104 .fit-tab b{opacity:.8}
.fitsec--v104 .fit-tabs--v104 .fit-tab:not(.active):hover{background:#54687D}
.fitsec--v104 .fit-tabs--v104 .fit-tab.active{background:var(--cyan);color:var(--navy)}
/* --- v125 — new SVG logos --------------------------------------------------
Three files, one lockup, all 1663.4 x 602.9 (2.76:1):
logo-before-scroll.svg navy + white -> transparent hero header
logo-after-scroll.svg cyan + navy -> white scrolled/solid header
logo-footer.svg all white -> cyan footer
The old dark PNG was a different, wider lockup (4.6:1 at 175x38). The old
light SVG was already 2.77:1, so the transparent state is unchanged in size
and only the scrolled state needs a height that keeps the two states looking
like the same logo rather than two different ones.
Footer note: the supplied footer file is pure white and the footer band is
cyan, which measures 1.70:1 — the same ratio as the site's established
white-on-cyan headline treatment. Consistent with the brand, but it IS the
low-contrast look, not an oversight on my part. Swap to
logo-before-scroll.svg (navy wordmark, 8.1:1 on cyan) if that is preferred.
-------------------------------------------------------------------------- */
.site-head .brand-logo--dark{height:52px;width:auto}
.site-head.scrolled .brand-logo--dark,
.site-head--solid .brand-logo--dark{height:52px}
@media(max-width:1100px){.site-head .brand-logo--dark{height:42px}}
@media(max-width:560px){.site-head .brand-logo--dark{height:38px}}
.foot-brand .foot-logo{height:clamp(38px,3.8vw,50px);width:auto}
/* --- v125 — Platform QC: the accent bars leant the wrong way ---------------
Kyle: "can the lines above the headings slant the other way so they look
similar to the direction all the buttons go?"
He is right, and they were mirror images. The buttons are
polygon(var(--cap) 0, 100% 0, calc(100% - var(--cap)) 100%, 0 100%)
— top edge shifted RIGHT of the bottom edge, so the shape leans like "/".
The bars were
polygon(0 0, 80% 0, 100% 100%, 20% 100%)
— top shifted LEFT, leaning "\", the opposite.
Flipped to match the buttons exactly.
-------------------------------------------------------------------------- */
.mcard .mbar{clip-path:polygon(20% 0,100% 0,80% 100%,0 100%)}
/* --- v125 — Case Studies hero callouts, per the client's reference image ----
Was: three small white pills with the whole phrase on one line.
Now: the number carried big in white, the label beneath it in navy caps —
the treatment in the artwork Kyle sent.
No box behind them. The reference has the figures sitting directly on the
cyan, which is what makes them read as part of the image rather than as UI
stuck on top of it. A soft shadow keeps the white legible where it crosses
the lighter chevron bands; without it the "40%" disappears into them.
The label is navy, not white: navy on cyan is 8.1:1, white on cyan is 1.7:1.
The big number can carry the brand's white-on-cyan look because it is 60px+
and shadowed — the small label cannot.
-------------------------------------------------------------------------- */
.cs-stat{
position:absolute;z-index:3;display:flex;flex-direction:column;
line-height:1;white-space:nowrap;pointer-events:none;
}
.cs-stat b{
font-family:var(--display);font-weight:900;
font-size:clamp(2.1rem,4.4vw,4rem);
color:#fff;letter-spacing:-.01em;
text-shadow:0 10px 30px rgba(9,40,44,.28);
}
.cs-stat i{
font-family:var(--display);font-weight:800;font-style:normal;
font-size:clamp(.7rem,1.05vw,.95rem);
letter-spacing:.08em;text-transform:uppercase;
color:var(--navy);margin-top:.5rem;
}
/* Placed to sit where they do in the reference: upper-left, over the body,
and low-centre. Percentages so they track the truck as it scales. */
.cs-stat.b1{top:4%;left:2%}
.cs-stat.b2{top:44%;left:34%}
.cs-stat.b3{bottom:2%;left:16%}
@media(max-width:900px){
.cs-stat.b1{top:0;left:0}
.cs-stat.b2{top:42%;left:30%}
.cs-stat.b3{bottom:0;left:8%}
}
@media(max-width:560px){
.cs-stat b{font-size:clamp(1.6rem,9vw,2.4rem)}
.cs-stat i{font-size:.62rem;letter-spacing:.06em;margin-top:.35rem}
.cs-stat.b2{left:26%}
}
/* v125b — the middle callout needed two corrections after rendering it.
1. POSITION. At top:44% the number sat on the white body but the label
dropped onto the wheels and the yellow side bar (y 372-400 against a busy
zone starting at 365) and became unreadable. Moved up to 32% so the whole
block — number AND label — sits inside the clean white panel, y 262-348
against a panel running 238-365.
2. WHITE ON WHITE. The number is white and the truck body is white. The
reference artwork solves this with a faint dark band behind the text; the
same trick here, kept soft and feathered so it reads as depth in the
photograph rather than a box stuck on top of it. */
.cs-stat.b2{top:32%}
.cs-stat.b2 b{position:relative}
.cs-stat.b2 b::before{
content:"";position:absolute;z-index:-1;
left:-6%;right:-6%;top:8%;bottom:8%;
background:radial-gradient(ellipse at center,rgba(12,34,38,.42),rgba(12,34,38,0) 72%);
filter:blur(6px);
}
@media(max-width:900px){.cs-stat.b2{top:34%}}
/* ==========================================================================
v126 — two positioning corrections requested after v125.
========================================================================== */
/* 1. CASE STUDIES — the middle callout sat across the Solomon logo.
Measured at 1440: the logo occupies y 276-308 and the callout block ran
262-349, so the number covered it completely. The trailer panel here is only
98px tall on screen (the reference artwork's truck is a much taller box), so
there is no clean strip beneath the logo to drop into — 308-350 is 42px and
the number alone is 63px.
So the block comes off the panel instead: at top:52% it starts at y 347,
just under the panel's bottom edge. The number crosses the chassis and rear
wheels, which is the darkest part of the vehicle and therefore the best
background the white can have, and the navy label lands in the clean shadow
band below the truck — 21px clear of the "700" underneath it.
Placed after the v125b rule rather than editing it, so the reasoning above
stays attached to the value. This also supersedes the 900px override, which
only existed to keep the old position clear of the yellow side bar. */
.cs-stat.b2{top:52%}
/* 2. HOME STAT RIBBON — "100,000" and its "+" split across two lines.
Three equal 1fr columns give 337px each at 1180. The counter reserves its
final width up front so the layout cannot jump mid-count, and for a
seven-character value that reservation is 7ch = 348px — 11px more than the
column, so the trailing "+" wrapped. (The ink is only 311px; it is the
reservation that overflows, which is why it looked fine until the number
changed to 100,000 in v125.)
Sizing the middle track to its content gives that column exactly the width
it needs and leaves the remainder split evenly between the other two, so the
ribbon stays symmetrical. Re-stated below the 700px rule because this file
is append-only and that rule would otherwise be overridden. */
.facts-grid{grid-template-columns:1fr auto 1fr}
@media(max-width:700px){.facts-grid{grid-template-columns:1fr}}
/* ==========================================================================
v127 — Solomon Commercials case study rebuilt from the client's document.
========================================================================== */
/* The document breaks "The benefits" into four named sub-sections, which the
old two-paragraph layout had no level for. These three small rules carry
that structure; everything else reuses .cs-h / .cs-body / .cs-quote /
.cs-attrib exactly as they already were.
.cs-sub needs !important on font-family because line 2454 sets the display
face on every h1-h4 with !important, and a plain declaration here — however
specific — cannot beat it. Akira Expanded at 16px is close to unreadable in
a paragraph stack, which is the same reason the Home fit-step headings were
moved to DM Sans in v125. */
.cs-sub{
font-family:var(--body)!important;font-weight:700;
font-size:1.02rem;line-height:1.35;letter-spacing:-.01em;text-transform:none;
color:var(--navy);margin:1.9rem 0 .5rem;
}
.cs-block .cs-sub:first-child{margin-top:0}
/* "The Benefits" sits above both columns rather than inside one, so the four
sub-sections read as one set. */
.cs-benefits-h{margin-top:clamp(2.4rem,4vw,3.6rem)}
.cs-cols--tight{margin-top:clamp(1rem,1.6vw,1.4rem)}
/* Closing testimonial: one short quote, so a two-column grid would leave half
the row empty. Full width, measure-capped so the line length stays readable. */
.cs-testimonial{margin-top:clamp(2.4rem,4vw,3.6rem);max-width:64ch}
/* The Solomon row carries five real figures now, and `repeat(5,1fr)` does not
hold them: `1fr` is `minmax(auto,1fr)`, so the widest number — "100,000+" at
~260px — refuses to shrink and takes its space from the other four. The cell
with the shortest number and the longest label, "13 / Locations tracked
across 7 sites", loses that fight and wrapped to four lines.
Sizing each column to its own content fixes it: the five natural widths add
up to ~1065px inside a 1180px wrap, so everything fits on one line with room
to spare, and space-between keeps the row spanning the full measure.
Scoped to this row so the CoolVan row (still behind its flag) is untouched. */
.cs-stats--fit .wrap{grid-template-columns:repeat(5,auto);justify-content:space-between;align-items:start}
@media(max-width:680px){.cs-stats--fit .wrap{grid-template-columns:repeat(2,1fr);justify-content:stretch}}
/* Content-sizing alone is not enough. Measured at 1440: the wrap gives 1052px
of content, 64px of that goes to the four gaps, so the five tracks share
988px — and the first four numbers alone measure 228+190+304+266 = 988px at
2.8rem. There is literally nothing left for the fifth column, which is why
it collapsed to its longest single word.
So the numbers have to come down for five figures to fit. At 2.2rem they
total ~782px, leaving 206px for a label that needs 189px — every label sits
on one line with room to spare. The minmax floor stops the last column
collapsing again in the 700-820px band, where it drops to two lines instead.
Scoped to this row; the CoolVan row keeps 2.8rem. */
.cs-stats--fit .n{font-size:clamp(1.35rem,2.45vw,2.2rem)}
.cs-stats--fit .wrap{grid-template-columns:repeat(4,auto) minmax(104px,auto)}
@media(max-width:680px){.cs-stats--fit .wrap{grid-template-columns:repeat(2,1fr)}}
/* "How Xspect helped" runs to five paragraphs against the challenge's two, so
side by side it left roughly 750px of empty column. The last three move to a
full-width block set in two text columns: the measure stays readable, the
reading order stays exactly as the document has it, and neither column is
left hanging. */
.cs-wide{margin-top:clamp(1.4rem,2.4vw,2rem);columns:2;column-gap:clamp(28px,5vw,72px)}
.cs-wide>*{break-inside:avoid}
.cs-wide .cs-body+.cs-body,.cs-wide .cs-quote{margin-top:1rem}
@media(max-width:820px){.cs-wide{columns:1}}
/* ==========================================================================
v128 — mobile buttons, hero chevrons, back-to-top
========================================================================== */
/* --- 1. PAIRED BUTTONS ON MOBILE ------------------------------------------
Every place two buttons sit next to each other now carries .btn-row. The
pairs were already flex-wrap containers, so on a phone the second button
dropped below the first and sat at its own natural width — a short button
marooned on its own line.
`flex:1 1 auto` with the default `min-width:auto` does exactly what was
asked, in one declaration: items never shrink below their label, so a pair
that fits shares the row and grows to fill it, and a pair that cannot fit
wraps — and once wrapped, each button is alone on its line and flex-grow
takes it to the full width of the column.
The padding trim is what decides which side of that line a pair falls on.
Measured at 390px, the narrowest CTA column is 310px: "Talk to us" and
"Demo" need 151px of text between them, so 4 x 42px of padding put them at
319px and they wrapped. At 32px they come to 279px and sit side by side.
The long pairs — "Book a conversation / Demo Xspect" at 417px, "Take the
readiness check / What's changing" at 478px — still cannot fit at any
sensible padding, so they stack full width, which is the intent. */
.btn-row{display:flex;flex-wrap:wrap}
@media(max-width:600px){
.btn-row{gap:10px}
.btn-row>.btn{flex:1 1 auto;padding:0 calc(var(--cap) + 12px)}
}
/* --- 2. CYAN HERO CHEVRONS ON MOBILE ---------------------------------------
The tile is 875.4 x 1200 and its chevrons run the full 1200, so the artwork
already fills its own height — the problem is the scale. `60.79% auto` on a
390px hero makes the tile 237px wide and therefore only 325px tall, and
repeat-x centres that one band in a hero 800-1000px tall. Hence "floaty":
a stripe with flat cyan above and below it.
`auto 100%` scales the tile to the hero's height instead, so the chevron
runs edge to edge with its apex still visible.
Done without a breakpoint, because a breakpoint would jump: at 820px these
heroes are 950-1075px tall, so the two values differ by 40-57% and the
switch would be plainly visible on a resize. Instead the height is
`max(100%, 83.33vw)`.
83.33vw is today's setting rewritten: the tile is 875.4 x 1200, so a tile
sized to 60.79% of the width stands 0.6079 / 0.7295 = 83.33% of the width
tall. Taking the larger of that and the hero's own height means the desktop
is bit-for-bit unchanged (at 1440 the term resolves to 1200px, which is the
tile at exactly 60.79%), and the moment a hero grows taller than the tile —
which is what happens as soon as the columns stack — the 100% term takes
over and it fills. One declaration, no discontinuity anywhere.
Needs !important to reach past the v107 rule, which set the whole
background shorthand with !important, and needs v107's full selector list:
`.about-page .hero--build` is (0,2,0) and would otherwise outrank this. */
.hero--build,.about-page .hero--build,.platform-page .hero--build,
.pg-hero--cyan,.in-hero--cyan{
background-size:auto max(100%,83.33vw)!important;
}
/* --- 3. BACK TO TOP --------------------------------------------------------
Injected by app.js rather than pasted into eleven files, so there is one
copy to maintain and no page can drift out of sync.
The ring is an SVG circle drawn inside the navy disc: the track is white at
22%, the progress arc is brand cyan, and it is rotated -90deg so it starts
filling from twelve o'clock. r=22 in a 48 viewBox puts the stroke a pixel
inside the button's own edge — present, but not a second button outline.
`visibility` is transitioned with a delay so the button is genuinely
unreachable to a pointer or the keyboard while hidden, rather than an
invisible tap target sitting over the footer. */
.totop{
position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);
width:48px;height:48px;padding:0;border:0;border-radius:50%;
background:var(--navy);color:#fff;cursor:pointer;z-index:50;
display:grid;place-items:center;-webkit-tap-highlight-color:transparent;
opacity:0;visibility:hidden;transform:translateY(10px) scale(.9);
transition:opacity .25s ease,transform .25s ease,background-color .2s ease,visibility 0s linear .25s;
box-shadow:0 10px 24px -12px rgba(9,26,34,.55);
}
.totop.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s,0s}
.totop:hover{background:var(--cyan-deep)}
.totop:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.totop__ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}
.totop__ring circle{fill:none;stroke-width:2}
.totop__track{stroke:rgba(255,255,255,.22)}
.totop__prog{stroke:var(--cyan);stroke-linecap:round}
/* the site's own chevron shape, turned to point up */
.totop__ar{
width:9.5px;height:12.8px;background:currentColor;
clip-path:polygon(0 0,60% 0,100% 50%,60% 100%,0 100%,40% 50%);
transform:rotate(-90deg);
}
@media(prefers-reduced-motion:reduce){.totop{transition:none}}
/* ###########################################################################
v135 — POST-LIVE SNAG LIST (Tom)
Authoritative block: appended last so it wins over the earlier hover set.
=========================================================================== */
/* --- ROLLOVERS (all pages) -------------------------------------------------
Tom: navy/filled buttons roll over to WHITE; the sticky-nav Demo (white/ghost)
had no rollover -> NAVY; cyan/green buttons were blending into green grounds
("See Xspect in action") -> WHITE. */
.btn:hover{transform:translateY(-2px);background:#fff;color:var(--navy)}
.btn:hover .ar{background:var(--cyan-2)}
.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:#fff;color:var(--navy)}
.btn--cyan:hover .ar{background:var(--cyan-2)}
.btn--dgreen:hover{background:#fff;color:var(--navy)}
.btn--dgreen:hover .ar{background:var(--cyan-2)}
/* --- HOME: "How does Xspect fit" second tab --------------------------------
Navy content boxes were blending into the navy/blue section background. */
.fitsec--blue .fit-val,.fitsec--navy .fit-val{
background:var(--navy-2)!important;
border:1px solid rgba(255,255,255,.14);
border-radius:12px;
box-shadow:0 18px 40px -24px rgba(0,0,0,.55);
}
.fitsec--blue .fit-val h4,.fitsec--navy .fit-val h4{color:#fff}
.fitsec--blue .fit-val p,.fitsec--navy .fit-val p{color:rgba(255,255,255,.8)}
/* "Our intelligent analysis..." was display-face and too small to read:
set to body copy. */
.fit-arrow p{
font-family:'DM Sans',var(--body)!important;
font-weight:400!important;
font-size:clamp(1rem,1.15vw,1.125rem)!important;
line-height:1.6!important;
letter-spacing:-0.01em;
}
.fit-arrow p strong{font-weight:700}
/* --- PLATFORM: System Integration — ALL hexagon titles the same size ------- */
.sint-svg text,.sint-svg text tspan,
.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,
.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:24px!important}
}