/* Bitsy Displays — site layer. Tokens come from assets/styles.css (Organic design system). */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.hero,.pagehero{overflow:hidden}
img{max-width:100%}
a{color:var(--color-accent-700);text-decoration:none}
a:hover{color:var(--color-accent-600);text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:var(--font-heading-weight);line-height:1.08;letter-spacing:-.012em;margin:0}
p{margin:0}
ul{margin:0;padding:0}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
/* Page width (23 Oct 2026, on request: "reduce the left right space for the full website"). Was max-width 1260px (1320px on the home page) with 32px side padding; now about 4% of the screen on each side at any desktop width, like the reference image. One place to change it: these two tokens. */
:root{--page-max:1880px;--page-pad:clamp(32px,2.8vw,64px)}
.wrap{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad)}
.sec{padding:76px 0 0}
.kicker{font-size:12.5px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--color-accent-700);margin-bottom:10px}
.lede{font-size:18px;line-height:1.55;color:var(--color-neutral-800);text-wrap:pretty}
.h1{font-size:58px}
.h2{font-size:40px}
.h3{font-size:24px}
.stack{display:grid}
.row{display:flex;flex-wrap:wrap;align-items:center}
/* strip + nav */
.strip{background:var(--color-accent-900);color:var(--color-accent-200);font-size:14px;font-weight:600;text-align:center;padding:9px 20px}
.strip b{color:var(--color-accent-300);font-weight:800}
.hdr{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--color-bg) 93%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-divider)}
.hdr-in{display:flex;align-items:center;gap:26px;padding:12px 32px;max-width:1260px;margin:0 auto}
.hdr-logo img{height:40px;width:auto;display:block}
.mainnav{display:flex;gap:22px;font-size:15px;font-weight:700;margin-left:12px}
.mainnav a{color:var(--color-neutral-800)}
.mainnav a:hover,.mainnav a[aria-current=page]{color:var(--color-accent-700);text-decoration:none}
.hdr-act{display:flex;align-items:center;gap:12px;margin-left:auto}
.tel{display:flex;align-items:center;gap:9px;font-weight:800;font-size:15px;color:var(--color-text)}
.tel:hover{text-decoration:none;color:var(--color-accent-700)}
.tel i{display:grid;place-items:center;width:34px;height:34px;border-radius:999px;background:var(--color-accent-2-200);color:var(--color-accent-2-800)}
.navtoggle{display:none;border:0;background:none;padding:6px;cursor:pointer;color:var(--color-text)}
/* hero */
.hero{position:relative}
.hero .blob1{position:absolute;top:-150px;right:-170px;width:540px;height:540px;border-radius:999px;background:var(--color-accent-200);opacity:.5;pointer-events:none}
.hero .blob2{position:absolute;top:340px;left:-190px;width:400px;height:400px;border-radius:999px;background:var(--color-accent-2-200);opacity:.45;pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:46px;align-items:start;padding:42px 0 54px}
.hero h1{margin-bottom:18px;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--color-accent-700)}
.taglist{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.ticks{list-style:none;display:grid;gap:12px;margin:26px 0 30px}
.ticks li{display:flex;gap:12px;font-size:16.5px;font-weight:600;color:var(--color-neutral-900);line-height:1.4}
.ticks svg{flex:0 0 auto;width:24px;height:24px;padding:5px;border-radius:999px;background:var(--color-accent-2-500);color:#fff;margin-top:2px}
.logostrip{border-top:1px solid var(--color-divider);padding-top:22px}
.logostrip p{margin-bottom:14px;font-size:12.5px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--color-neutral-600)}
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.logos img{height:30px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.7}
/* form card */
.formwrap{position:sticky;top:92px}
.formcard{background:var(--color-neutral-100);border:1px solid var(--color-neutral-300);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.formcard-hd{background:var(--color-accent-900);padding:20px 26px;display:flex;align-items:center;gap:15px}
.formcard-hd img{width:52px;height:52px;border-radius:999px;background:#fff;padding:4px;flex:0 0 auto;object-fit:contain}
.formcard-hd h2{font-size:21px;line-height:1.15;color:var(--color-accent-100)}
.formcard-hd span{display:block;margin-top:3px;font-size:13.5px;font-weight:700;color:var(--color-accent-300)}
.formcard form{padding:24px 26px 26px;display:grid;gap:13px}
.formcard.plain{box-shadow:var(--shadow-md)}
.req{color:var(--color-accent-700)}
select.input{appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 16px center;background-size:18px;padding-right:44px}
textarea.input{resize:vertical;font-family:var(--font-body);border-radius:var(--radius-md)}
.cta-big{font-size:17.5px;font-weight:800;padding-top:15px;padding-bottom:15px;margin-top:4px;animation:pulse 3s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(198,113,57,.5)}60%{box-shadow:0 0 0 14px rgba(198,113,57,0)}}
.privacy{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:600;color:var(--color-neutral-600)}
.altact{border-top:1px solid var(--color-neutral-300);margin-top:6px;padding-top:14px;display:flex;gap:10px}
.altact .btn{flex:1;font-weight:700;font-size:14.5px;justify-content:center}
.badges{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:16px;flex-wrap:wrap}
.badges img{height:40px;width:auto;object-fit:contain;border-radius:var(--radius-sm);opacity:.9}
.errbox{margin:0;font-size:14px;font-weight:700;color:var(--color-accent-800);background:var(--color-accent-100);border-radius:var(--radius-sm);padding:10px 12px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
/* stats band */
.statband{background:var(--color-accent-2-800);color:var(--color-accent-2-100)}
.statband .g{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:34px 0}
.statband b{display:block;font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:40px;line-height:1;color:#fff}
.statband span{display:block;margin-top:8px;font-size:15px;font-weight:600;line-height:1.4;color:var(--color-accent-2-200)}
/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cards .card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.cards .card .washed{border-radius:0;overflow:hidden}
.cards .card img{width:100%;height:190px;object-fit:cover;display:block}
.cardbody{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.cardbody h3{font-size:23px;line-height:1.15;margin-bottom:10px}
.apps{font-size:14.5px;line-height:1.5;color:var(--color-neutral-700);margin-bottom:14px}
.mini{font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent-2-700);margin-bottom:8px}
.dots{list-style:none;display:grid;gap:7px;margin-bottom:20px}
.dots li{display:flex;gap:9px;font-size:14.5px;font-weight:500;color:var(--color-neutral-800);line-height:1.4}
.dots li::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:999px;background:var(--color-accent-400);margin-top:7px}
.cardbody .btn{margin-top:auto;align-self:flex-start;font-weight:700;font-size:14.5px}
/* cta band */
.ctaband{background:var(--color-accent-500);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:40px 44px;display:grid;grid-template-columns:1.4fr auto;gap:32px;align-items:center}
.ctaband h2{font-size:34px;line-height:1.1;color:#fff;margin-bottom:10px;text-wrap:balance}
.ctaband p{font-size:17.5px;line-height:1.5;color:var(--color-accent-100);max-width:34em}
.ctaband .acts{display:flex;flex-direction:column;gap:10px;min-width:220px}
.ctaband .acts .btn{justify-content:center;font-weight:800;font-size:16.5px}
.btn-ink{background:var(--color-accent-900);color:var(--color-accent-100)}
.btn-ink:hover{background:var(--color-accent-800);color:#fff}
.btn-cream{background:rgba(255,255,255,.92);color:var(--color-accent-800)}
.btn-cream:hover{background:#fff;color:var(--color-accent-900)}
.btn-sage{background:var(--color-accent-2-500);color:#fff}
.btn-sage:hover{background:var(--color-accent-2-600);color:#fff}
/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.split.narrow-left{grid-template-columns:.85fr 1.15fr;align-items:start}
.split.narrow-right{grid-template-columns:1.2fr .8fr;align-items:start}
/* height:100% here used to create a circular sizing dependency with the
grid row's auto height (row wants to size to content, content wants to
size to row), which some browsers resolve by freezing the row at the
shorter column's height and letting this image overflow past it.
aspect-ratio breaks that circularity: the image sizes from its own
rendered width, independent of the row's resolved height. */
.split img.shot{width:100%;aspect-ratio:4/3;height:auto;min-height:360px;object-fit:cover;display:block}
.split .washed{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.prose p{font-size:17.5px;line-height:1.6;color:var(--color-neutral-800);margin-bottom:16px;text-wrap:pretty}
.prose h3{font-size:26px;margin:30px 0 12px}
.prose ul{list-style:none;display:grid;gap:10px;margin-bottom:20px}
.prose ul li{display:flex;gap:10px;font-size:17px;line-height:1.5;color:var(--color-neutral-800)}
.prose ul li::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:999px;background:var(--color-accent-400);margin-top:9px}
.steps{list-style:none;display:grid;gap:14px}
.steps li{display:flex;gap:12px;font-size:16px;font-weight:600;color:var(--color-neutral-900);line-height:1.45}
.steps li b{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;border-radius:999px;background:var(--color-accent-200);color:var(--color-accent-800);font-size:13px;font-weight:900}
/* quotes */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.quotes blockquote{margin:0;padding:28px 30px;display:flex;flex-direction:column;gap:16px}
.stars{display:flex;gap:3px;color:var(--color-accent-500)}
.quotes p{font-size:17px;line-height:1.55;color:var(--color-neutral-900);font-weight:500;text-wrap:pretty}
.quotes footer{margin-top:auto;padding-top:6px;border-top:1px solid var(--color-divider)}
.quotes footer b{display:block;margin:12px 0 2px;font-size:15.5px;font-weight:800}
.quotes footer span{font-size:14px;color:var(--color-neutral-600);line-height:1.4}
/* clients panel */
.panel{background:var(--color-surface);border-radius:var(--radius-lg);padding:44px}
.panel .logos img{height:44px;opacity:.75}
/* faq */
.faqs{display:grid;gap:12px}
.faqs details{background:var(--color-neutral-100);border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);padding:18px 22px}
.faqs summary{cursor:pointer;font-size:17px;font-weight:800;line-height:1.35;color:var(--color-neutral-900);list-style:none}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary::after{content:"+";float:right;color:var(--color-accent-700);font-weight:900}
.faqs details[open] summary::after{content:"–"}
.faqs p{margin-top:12px;font-size:16px;line-height:1.6;color:var(--color-neutral-800);text-wrap:pretty}
/* final cta */
.finalcta{background:var(--color-accent-900);border-radius:var(--radius-lg);padding:56px 48px;text-align:center}
.finalcta h2{font-size:42px;color:var(--color-accent-100);margin:0 auto 14px;max-width:24em;text-wrap:balance}
.finalcta p{margin:0 auto 28px;font-size:18.5px;line-height:1.55;color:var(--color-accent-300);max-width:40em}
.finalcta .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.finalcta .btn{font-size:17px;font-weight:800}
/* page hero (inner) */
.pagehero{position:relative;padding:44px 0 40px;border-bottom:1px solid var(--color-divider);overflow:hidden}
.pagehero .blob{position:absolute;top:-160px;right:-120px;width:460px;height:460px;border-radius:999px;background:var(--color-accent-200);opacity:.45;pointer-events:none}
.pagehero-in{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.pagehero h1{font-size:48px;margin-bottom:16px;text-wrap:balance}
.crumbs{font-size:13.5px;font-weight:600;color:var(--color-neutral-600);margin-bottom:16px}
.crumbs a{color:var(--color-neutral-700)}
.pagehero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
/* gallery */
/* .grid3 is the shared 3-up grid used for card/image rows across many pages. */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid3 .washed{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.grid3 img{width:100%;height:240px;object-fit:cover;display:block}
/* Gallery page only: masonry (CSS columns) so mixed-ratio photos keep their own height. */
.gallery-masonry{column-count:3;column-gap:20px}
.gallery-masonry .washed{display:inline-block;width:100%;margin:0 0 20px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);break-inside:avoid}
.gallery-masonry img{width:100%;height:auto;display:block;object-fit:cover}
@media (max-width:1024px){.gallery-masonry{column-count:2}}
@media (max-width:767px){.gallery-masonry{column-count:1}}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.clientcard{background:var(--color-neutral-100);border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);height:110px;display:grid;place-items:center;padding:20px}
.clientcard img{max-height:52px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.78}
/* team */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.teamcard{background:var(--color-surface);border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);padding:26px 20px;text-align:center}
.teamcard img{width:88px;height:88px;border-radius:999px;object-fit:cover;margin:0 auto 16px;display:block;border:3px solid var(--color-accent-100)}
.teamcard h3{font-size:16.5px;margin-bottom:2px}
.teamcard .role{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent-700);margin-bottom:10px}
.teamcard p{font-size:13.5px;line-height:1.55;color:var(--color-neutral-700);margin-bottom:14px}
.teamcard .mail{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;background:var(--color-accent-100);color:var(--color-accent-700)}
.teamcard .mail:hover{background:var(--color-accent);color:var(--color-bg)}
/* footer */
.ftr{margin-top:76px;background:var(--color-neutral-900);color:var(--color-neutral-300);padding:54px 0 0}
.ftr-g{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:40px}
.ftr h2{font-size:26px;color:#fff;margin-bottom:14px}
.ftr p{font-size:14.5px;line-height:1.6;margin-bottom:14px}
.ftr .lbl{font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--color-neutral-500);margin-bottom:14px}
.ftr ul{list-style:none;display:grid;gap:8px;font-size:14.5px}
.ftr a{color:var(--color-neutral-300)}
.ftr a:hover{color:var(--color-accent-300)}
.ftr .accent a{color:var(--color-accent-300)}
.ftr .certs{display:flex;flex-wrap:wrap;gap:10px}
.ftr .certs img{height:42px;width:auto;object-fit:contain;border-radius:var(--radius-sm);background:#fff}
.ftr-btm{border-top:1px solid var(--color-neutral-800);font-size:13.5px;color:var(--color-neutral-500);padding:18px 0 24px}
/* mobile action bar */
.mobbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:60;grid-template-columns:1fr 1fr 1.2fr;gap:8px;padding:10px 12px;background:color-mix(in srgb,var(--color-neutral-100) 96%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--color-neutral-300)}
.mobbar .btn{font-weight:800;font-size:14.5px;justify-content:center}
.mobspacer{display:none;height:72px}
@media (max-width:980px){
.wrap{padding:0 20px}
.hdr-in{padding:12px 20px}
.hero-grid,.split,.split.narrow-left,.split.narrow-right,.pagehero-in,.quotes,.g2{grid-template-columns:1fr}
.cards,.grid3{grid-template-columns:1fr}
.grid4,.statband .g,.team{grid-template-columns:1fr 1fr}
.ftr-g{grid-template-columns:1fr 1fr}
.ctaband{grid-template-columns:1fr}
.h1,.hero h1{font-size:36px}
.h2,.pagehero h1{font-size:29px}
.finalcta h2{font-size:30px}
.finalcta{padding:40px 24px}
.panel{padding:28px 22px}
.mainnav,.tel{display:none}
.mainnav.open{display:grid;position:absolute;top:100%;left:0;right:0;background:var(--color-neutral-100);border-bottom:1px solid var(--color-neutral-300);padding:18px 20px;gap:16px;margin:0}
.navtoggle{display:block;order:9}
.hdr{position:relative}
.formwrap{position:static}
.mobbar{display:grid}
.mobspacer{display:block}
.sec{padding:52px 0 0}
}
/* dropdown offerings menu */
.hasmega{position:relative;display:inline-flex;align-items:center}
.mainnav a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.mega{position:absolute;top:calc(100% + 14px);left:-18px;z-index:50;display:none;grid-template-columns:repeat(3,minmax(190px,1fr));gap:8px 26px;background:var(--color-neutral-100);border:1px solid var(--color-neutral-300);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:22px 26px}
.hasmega:hover .mega,.hasmega:focus-within .mega{display:grid}
.hasmega::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px}
.mega ul{list-style:none;display:grid;gap:9px}
.mega a{font-size:14.5px;font-weight:600;color:var(--color-neutral-800)}
.mega a:hover{color:var(--color-accent-700);text-decoration:none}
.mainnav{align-items:center;flex-wrap:wrap}
@media (max-width:1180px){
.mainnav{gap:16px;font-size:14px}
.tel{display:none}
}
@media (max-width:980px){
.mega{position:static;display:grid;grid-template-columns:1fr;box-shadow:none;border:0;background:transparent;padding:8px 0 0}
.hasmega{display:block}
.hasmega>a{margin-bottom:4px}
.mainnav.open{gap:14px}
}
/* ===== Brand layer: Bitsy logo colours + Lato ===================== */
:root{
--font-heading:'Lato',system-ui,sans-serif;
--font-body:'Lato',system-ui,sans-serif;
--font-heading-weight:900;
--color-bg:#f7f8fa;
--color-surface:#edf0f5;
--color-text:#14203a;
--color-divider:#e0e4eb;
--color-neutral-100:#ffffff;--color-neutral-200:#f6f7f9;--color-neutral-300:#e6e9ee;
--color-neutral-400:#cfd4dd;--color-neutral-500:#a7aebb;--color-neutral-600:#5f6878;
--color-neutral-700:#5a6373;--color-neutral-800:#3a4252;--color-neutral-900:#141b2b;
--color-accent:#e0492a;
--color-accent-100:#fdece7;--color-accent-200:#fbd5c9;--color-accent-300:#f6b09b;
--color-accent-400:#ef8464;--color-accent-500:#e0492a;--color-accent-600:#c73f22;
--color-accent-700:#a5341c;--color-accent-800:#7d2715;--color-accent-900:#4a170c;
--color-accent-2:#2c4573;
--color-accent-2-100:#eaeff7;--color-accent-2-200:#ccd7e9;--color-accent-2-300:#9dafcf;
--color-accent-2-400:#6180ad;--color-accent-2-500:#2c4573;--color-accent-2-600:#23385e;
--color-accent-2-700:#1b2c4b;--color-accent-2-800:#14213a;--color-accent-2-900:#0c1526;
--radius-sm:6px;--radius-md:10px;--radius-lg:18px;
}
h1,h2,h3,h4,.h1,.h2,.h3{letter-spacing:-.02em}
.kicker,.mini,.lbl{letter-spacing:.14em}
/* dark bands in brand navy rather than deep red */
.strip{background:var(--color-accent-2-800);color:var(--color-accent-2-200)}
.strip b{color:#fff}
.formcard-hd{background:var(--color-accent-2-800)}
.formcard-hd h2{color:#fff}
.formcard-hd span{color:var(--color-accent-2-300)}
.statband{background:var(--color-accent-2-700);color:var(--color-accent-2-100)}
.statband span{color:var(--color-accent-2-200)}
.finalcta{background:var(--color-accent-2-800)}
.finalcta h2{color:#fff}
.finalcta p{color:var(--color-accent-2-200)}
.btn-ink{background:var(--color-accent-2-800);color:#fff}
.btn-ink:hover{background:var(--color-accent-2-900);color:#fff}
.ctaband{background:var(--color-accent-500)}
.ctaband p{color:var(--color-accent-100)}
.btn-cream{background:#fff;color:var(--color-accent-700)}
.btn-sage{background:var(--color-accent-2-500)}
.btn-sage:hover{background:var(--color-accent-2-600)}
.hero .blob1{background:var(--color-accent-200);opacity:.55}
.hero .blob2{background:var(--color-accent-2-200);opacity:.5}
.pagehero .blob{background:var(--color-accent-200);opacity:.5}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(224,73,42,.5)}60%{box-shadow:0 0 0 14px rgba(224,73,42,0)}}
.logogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.logogrid .clientcard{height:96px;padding:14px;background:#fff;border-radius:var(--radius-md)}
.logogrid .clientcard img{max-height:56px;filter:grayscale(1);opacity:.8;transition:filter .2s,opacity .2s}
.logogrid .clientcard:hover img{filter:none;opacity:1}
@media (max-width:640px){.logogrid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}}
/* elaborated solutions mega menu */
.mega{left:-24px;width:min(1180px,92vw);grid-template-columns:1fr;gap:0;padding:0;overflow:hidden}
.megatop{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;padding:16px 26px;background:var(--color-accent-2-800);color:#fff}
.megatop a{display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:15.5px;font-weight:900;letter-spacing:-.01em}
.megatop a:hover{color:var(--color-accent-300);text-decoration:none}
.megatop span{font-size:13.5px;font-weight:600;color:var(--color-accent-2-200)}
.megagrid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr)) minmax(240px,.9fr);gap:24px 28px;padding:22px 26px 26px}
.megah{font-size:11.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent-700);margin-bottom:12px}
.megacol ul{list-style:none;display:grid;gap:10px}
.megacol a{display:grid;gap:1px;padding:6px 8px;margin:-6px -8px;border-radius:var(--radius-sm)}
.megacol a b{font-size:14.5px;font-weight:800;color:var(--color-neutral-900)}
.megacol a span{font-size:12.5px;font-weight:500;color:var(--color-neutral-600);line-height:1.35}
.megacol a:hover{background:var(--color-accent-100);text-decoration:none}
.megacol a:hover b{color:var(--color-accent-700)}
.megafeat{border-left:1px solid var(--color-neutral-300);padding-left:24px}
.megafeat .washed{border-radius:var(--radius-md);overflow:hidden;margin-bottom:14px}
.megafeat img{width:100%;height:110px;object-fit:cover;display:block}
.megafeat p:not(.megah){font-size:13px;line-height:1.5;color:var(--color-neutral-700);margin-bottom:14px}
@media (max-width:1180px){.mega{left:0;width:min(920px,94vw)}.megagrid{grid-template-columns:repeat(2,1fr)}.megafeat{border-left:0;padding-left:0;border-top:1px solid var(--color-neutral-300);padding-top:18px;grid-column:1/-1}.megafeat .washed{display:none}}
@media (max-width:980px){.mega{width:auto}.megatop{border-radius:var(--radius-md)}.megagrid{grid-template-columns:1fr;padding:16px 0 0}.megafeat{display:none}}
/* label + description tables (replaces ragged definition lists) */
.deftable{width:100%;border-collapse:collapse;margin:0 0 22px}
.deftable th,.deftable td{text-align:left;vertical-align:top;padding:12px 0;border-bottom:1px solid var(--color-divider)}
.deftable tr:last-child th,.deftable tr:last-child td{border-bottom:0}
.deftable th{width:34%;padding-right:22px;font-size:15.5px;font-weight:900;color:var(--color-neutral-900);line-height:1.35}
.deftable td{font-size:16px;font-weight:400;color:var(--color-neutral-800);line-height:1.55}
.prose .deftable td{font-size:16.5px}
@media (max-width:620px){
.deftable th,.deftable td{display:block;width:auto;padding:0}
.deftable th{padding-top:14px}
.deftable td{padding-bottom:14px;border-bottom:1px solid var(--color-divider)}
.deftable tr:last-child td{border-bottom:0}
}
/* sticky side rails */
.rail{position:fixed;top:50%;transform:translateY(-50%);z-index:55;display:grid;gap:10px}
.rail-left{left:0}
.rail-right{right:0}
.railbtn{display:grid;place-items:center;gap:8px;padding:14px 10px;font-size:12.5px;font-weight:900;letter-spacing:.02em;line-height:1.2;text-decoration:none;box-shadow:var(--shadow-md);transition:filter .15s,padding .15s}
.railbtn span{writing-mode:vertical-rl;text-orientation:mixed}
.rail-left .railbtn{border-radius:0 var(--radius-md) var(--radius-md) 0}
.rail-right .railbtn{border-radius:var(--radius-md) 0 0 var(--radius-md)}
.rail-right .railbtn span{transform:rotate(180deg)}
.rail-right .railbtn svg{transform:rotate(180deg)}
.railbtn-call{background:var(--color-accent-2-800);color:#fff}
.railbtn-wa{background:#25d366;color:#0b3d1e}
.railbtn-cta{background:var(--color-accent-500);color:#fff}
.railbtn:hover{filter:brightness(1.08);text-decoration:none;color:#fff}
.railbtn-wa:hover{color:#0b3d1e}
.railbtn:focus-visible{outline:2px solid var(--color-accent-2-800);outline-offset:2px}
@media (max-width:1280px){.railbtn{padding:12px 8px;font-size:11.5px}}
@media (max-width:980px){.rail{display:none}}
/* sticky chat + whatsapp cluster */
.fab{position:fixed;right:22px;bottom:22px;z-index:70;display:grid;gap:12px;justify-items:end}
.fabbtn{width:56px;height:56px;border:0;border-radius:999px;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-lg);position:relative;transition:transform .15s}
.fabbtn:hover{transform:translateY(-2px)}
.fabbtn-wa{background:#25d366;color:#fff}
.fabbtn-chat{background:var(--color-accent-500);color:#fff}
.fabdot{position:absolute;top:4px;right:4px;width:12px;height:12px;border-radius:999px;background:#fff;border:3px solid var(--color-accent-500)}
.fab.open .fabdot{display:none}
.fabpanel{width:min(320px,86vw);background:var(--color-neutral-100);border:1px solid var(--color-neutral-300);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.fabpanel-hd{position:relative;background:var(--color-accent-2-800);color:#fff;padding:16px 44px 16px 20px}
.fabpanel-hd p{font-size:16.5px;font-weight:900;margin:0}
.fabpanel-hd span{display:block;margin-top:3px;font-size:12.5px;font-weight:600;color:var(--color-accent-2-200)}
.fabclose{position:absolute;top:12px;right:12px;width:28px;height:28px;border:0;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer}
.fabclose:hover{background:rgba(255,255,255,.28)}
.fabpanel-bd{padding:16px 18px 18px;display:grid;gap:8px}
.fabq{font-size:13px;font-weight:700;color:var(--color-neutral-600);margin:0 0 2px}
.faboption{display:grid;gap:2px;padding:11px 13px;border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);background:#fff}
.faboption b{font-size:14.5px;font-weight:800;color:var(--color-neutral-900)}
.faboption span{font-size:12.5px;color:var(--color-neutral-600);line-height:1.35}
.faboption:hover{border-color:var(--color-accent-400);background:var(--color-accent-100);text-decoration:none}
.faboption:hover b{color:var(--color-accent-700)}
@media (max-width:980px){.fab{right:14px;bottom:86px;gap:10px}.fabbtn{width:50px;height:50px}}
/* home page column fillers */
.factgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:30px 0 22px}
.factgrid div{background:var(--color-neutral-100);border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);padding:16px 14px}
.factgrid b{display:block;font-size:26px;font-weight:900;line-height:1;color:var(--color-accent-700)}
.factgrid span{display:block;margin-top:6px;font-size:12.5px;font-weight:600;line-height:1.3;color:var(--color-neutral-700)}
.credrow{border-top:1px solid var(--color-divider);padding-top:18px}
.credlogos{display:flex;gap:12px;flex-wrap:wrap}
.credlogos img{height:44px;width:auto;object-fit:contain;background:#fff;border-radius:var(--radius-sm);padding:4px;border:1px solid var(--color-neutral-300)}
.minquote{margin:26px 0 0;padding:22px 24px;display:grid;gap:12px}
.minquote p{font-size:16px;line-height:1.55;font-weight:500;color:var(--color-neutral-900);margin:0}
.minquote footer b{display:block;font-size:14.5px;font-weight:800}
.minquote footer span{font-size:13px;color:var(--color-neutral-600);line-height:1.35}
.briefnote{margin-top:20px;background:var(--color-surface);border-radius:var(--radius-md);padding:18px 20px}
.briefnote p:not(.mini){font-size:14.5px;line-height:1.55;color:var(--color-neutral-700);margin:0}
@media (max-width:620px){.factgrid{grid-template-columns:repeat(2,1fr)}}
/* lead magnet band */
.magnet{background:var(--color-accent-2-800);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);display:grid;grid-template-columns:.42fr .58fr;gap:36px;align-items:center;padding:40px 44px;overflow:hidden}
.magnet-cover{display:grid;place-items:center}
.magnet-cover img{max-width:260px;width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}
.magnet-body h2{font-size:34px;line-height:1.12;color:#fff;margin:6px 0 12px;text-wrap:balance}
.magnet-body h2 em{font-style:normal;color:var(--color-accent-400)}
.magnet-lede{font-size:16.5px;line-height:1.55;color:var(--color-accent-2-200);margin:0 0 22px;max-width:40em}
.magnet-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:10px}
.magnet-form .input{background:#fff;border-color:transparent}
.magnet-note{margin:12px 0 0;font-size:12.5px;font-weight:600;color:var(--color-accent-2-300)}
@media (max-width:980px){
.magnet{grid-template-columns:1fr;padding:28px 22px;gap:22px}
.magnet-cover img{max-width:190px}
.magnet-body h2{font-size:26px}
.magnet-form{grid-template-columns:1fr}
}
.logos img{max-width:120px}
.panel .logos{gap:18px 30px}
.railbtn-mail{background:var(--color-neutral-900);color:#fff}
.railbtn-brief{background:var(--color-accent-2-500);color:#fff}
/* keep the mega panel inside the viewport (positioned to the header, not the nav item) */
.hdr-in{position:relative}
.hasmega{position:static}
.hasmega::after{content:none}
.mega{left:20px;right:20px;width:auto;max-width:none;top:calc(100% + 10px)}
.mega::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.megagrid{grid-template-columns:repeat(3,minmax(160px,1fr)) minmax(220px,.85fr)}
@media (max-width:1180px){
.mega{left:16px;right:16px}
.megagrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
.hdr-in{position:static}
.mega{position:static;left:auto;right:auto;top:auto}
.mega::before{content:none}
}
/* bigger, brighter booklet cover in the lead magnet band */
.magnet{grid-template-columns:.46fr .54fr;padding:44px 48px}
.magnet-cover{position:relative;place-items:center;padding:6px 0}
.magnet-cover::before{content:"";position:absolute;width:min(420px,100%);aspect-ratio:1;border-radius:999px;background:radial-gradient(circle,rgba(224,73,42,.55) 0%,rgba(224,73,42,0) 68%)}
.magnet-cover img{position:relative;max-width:none;width:min(400px,100%);height:auto;transform:rotate(-3deg) scale(1.06);filter:drop-shadow(0 26px 46px rgba(0,0,0,.5)) saturate(1.08) contrast(1.06);transition:transform .25s}
.magnet-cover img:hover{transform:rotate(-1deg) scale(1.1)}
@media (max-width:980px){
.magnet{grid-template-columns:1fr;padding:30px 22px}
.magnet-cover img{width:min(300px,80%);transform:rotate(-2deg)}
.magnet-cover::before{width:min(320px,90%)}
}
/* header fades to translucent glass once the page is scrolled */
.hdr{transition:background .25s,box-shadow .25s,border-color .25s}
.hdr.scrolled{background:color-mix(in srgb,var(--color-bg) 62%,transparent);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border-bottom-color:transparent;box-shadow:0 6px 22px rgba(20,33,58,.07)}
.hdr.scrolled .hdr-logo img{opacity:.94}
@media (max-width:980px){.hdr.scrolled{background:color-mix(in srgb,var(--color-bg) 88%,transparent)}}
.hdr.scrolled{background:color-mix(in srgb,var(--color-bg) 38%,transparent);backdrop-filter:blur(20px) saturate(1.25);-webkit-backdrop-filter:blur(20px) saturate(1.25)}
@media (max-width:980px){.hdr.scrolled{background:color-mix(in srgb,var(--color-bg) 72%,transparent)}}
/* final CTA with a square image on the left */
.finalcta{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:center;text-align:left;padding:44px 48px}
.finalcta-shot .washed{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.finalcta-shot img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.finalcta-body h2{margin:0 0 14px;max-width:22em}
.finalcta-body p{margin:0 0 26px;max-width:44em}
.finalcta .acts{justify-content:flex-start}
@media (max-width:980px){
.finalcta{grid-template-columns:1fr;gap:26px;text-align:center;padding:32px 22px}
.finalcta-shot{max-width:260px;margin:0 auto}
.finalcta-body h2,.finalcta-body p{margin-left:auto;margin-right:auto}
.finalcta .acts{justify-content:center}
}
/* ============ mobile pass: conversion order, tap targets, safe areas ============ */
@media (max-width:980px){
/* form first on phones: the CTA should be the first thing after the H1 */
.hero-grid{display:flex;flex-direction:column;gap:26px}
.hero-grid > div:first-child{display:flex;flex-direction:column}
.hero-grid .formwrap{order:-1}
.hero-grid > div:first-child > h1{order:-3}
.hero-grid > div:first-child > .taglist{order:-4}
.hero-grid > div:first-child > .lede{order:-2}
.pagehero-in{display:flex;flex-direction:column;gap:24px}
.pagehero-in .formwrap{order:-1}
/* tap targets: nothing below 48px on touch */
.btn{min-height:48px;padding-top:12px;padding-bottom:12px}
.input,select.input{min-height:48px;font-size:16px}
textarea.input{min-height:110px;font-size:16px}
.mainnav a{min-height:44px;display:flex;align-items:center}
.navtoggle{min-width:48px;min-height:48px;display:grid;place-items:center}
.faqs summary{min-height:44px;display:flex;align-items:center;gap:10px}
.megacol a{min-height:44px;align-content:center}
/* mobile nav becomes a scrollable sheet rather than an endless column */
.mainnav.open{max-height:78vh;overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:var(--shadow-lg)}
/* sticky bars respect the iOS home indicator */
.mobbar{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.mobspacer{height:calc(72px + env(safe-area-inset-bottom))}
.fab{bottom:calc(88px + env(safe-area-inset-bottom))}
/* calmer motion and lighter decoration on small screens */
.cta-big{animation:none}
.hero .blob1,.hero .blob2,.pagehero .blob{display:none}
.sec{padding-top:44px}
.h1,.hero h1{font-size:32px;line-height:1.12}
.lede{font-size:16.5px}
.magnet-body h2{font-size:24px}
.ctaband{padding:26px 22px}
.ctaband h2{font-size:26px}
.quotes blockquote,.card{border-radius:var(--radius-md)}
}
@media (max-width:760px){
/* label + description tables stack into readable pairs sooner */
.deftable th,.deftable td{display:block;width:auto;padding:0}
.deftable th{padding-top:14px;font-size:15px}
.deftable td{padding:4px 0 14px;border-bottom:1px solid var(--color-divider)}
.deftable tr:last-child td{border-bottom:0}
.grid4,.statband .g,.factgrid{grid-template-columns:1fr 1fr}
.team{grid-template-columns:1fr}
.ftr-g{grid-template-columns:1fr}
.finalcta-shot{max-width:220px}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}
/* ================= animation layer (transform + opacity only) ================= */
/* progressive enhancement: hidden states apply only once JS is running */
.anim .rise{opacity:0;transform:translate3d(0,16px,0);will-change:opacity,transform}
.anim .rise.in{opacity:1;transform:none;transition:opacity .55s cubic-bezier(.22,.61,.36,1) var(--d,0ms),transform .55s cubic-bezier(.22,.61,.36,1) var(--d,0ms)}
.anim .rise.in{will-change:auto}
/* hero: no reveal (protects LCP), just a soft settle on the form card */
.formcard{animation:cardIn .6s cubic-bezier(.22,.61,.36,1) both}
@keyframes cardIn{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
.hero .blob1,.hero .blob2{animation:float 14s ease-in-out infinite alternate}
.hero .blob2{animation-duration:18s;animation-delay:-4s}
@keyframes float{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(0,26px,0) scale(1.05)}}
/* micro interactions */
.card,.clientcard,.faboption{transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s,border-color .2s}
.cards .card:hover,.grid3 .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.logogrid .clientcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.btn{transition:transform .16s cubic-bezier(.22,.61,.36,1),background .18s,color .18s,box-shadow .18s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.mainnav > a,.hasmega > a{position:relative}
.mainnav > a::after,.hasmega > a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--color-accent-500);transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.22,.61,.36,1)}
.mainnav > a:hover::after,.hasmega:hover > a::after,.mainnav > a[aria-current=page]::after{transform:scaleX(1)}
.mega{transform-origin:top center;animation:megaIn .18s ease-out}
@keyframes megaIn{from{opacity:0;transform:translate3d(0,-6px,0)}to{opacity:1;transform:none}}
.faqs details[open] p{animation:faqIn .28s ease-out}
@keyframes faqIn{from{opacity:0;transform:translate3d(0,-4px,0)}to{opacity:1;transform:none}}
.logos img,.credlogos img{transition:filter .25s,opacity .25s,transform .25s}
.logos img:hover{filter:none;opacity:1;transform:scale(1.06)}
.washed img{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.grid3 .washed:hover img,.split .washed:hover img{transform:scale(1.04)}
.railbtn,.fabbtn{transition:transform .18s cubic-bezier(.22,.61,.36,1),filter .18s}
.rail-left .railbtn:hover{transform:translateX(3px)}
.rail-right .railbtn:hover{transform:translateX(-3px)}
.fabbtn-chat:hover{transform:translateY(-3px) rotate(-6deg)}
.fabdot{animation:dotPulse 2.4s ease-in-out infinite}
@keyframes dotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.statband b,.factgrid b{font-variant-numeric:tabular-nums}
@media (max-width:980px){
.anim .rise{transform:translate3d(0,10px,0)}
.hero .blob1,.hero .blob2{animation:none}
.btn:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
.anim .rise{opacity:1;transform:none}
.formcard{animation:none}
}
/* ===================== hero banners =====================
The banner photo itself is set inline per page as a literal
background-image (not a CSS custom property holding url()) so the
browser resolves it against the page, same as ![]()
. A custom
property here only ever holds a url()-free gradient, which is safe
to keep in an external stylesheet regardless of deploy path depth. */
.pagehero.banner{
--hero-overlay:linear-gradient(100deg,rgba(20,33,58,.94) 0%,rgba(20,33,58,.86) 42%,rgba(20,33,58,.62) 100%);
border-bottom:0;
background-size:cover,cover;background-position:center,center;background-repeat:no-repeat;
padding:64px 0 60px;
}
.pagehero.banner .blob{display:none}
.pagehero.banner .pagehero-in{grid-template-columns:minmax(0,1fr) minmax(0,.82fr)}
.pagehero.banner h1{color:#fff}
.pagehero.banner .lede{color:var(--color-accent-2-200)}
.pagehero.banner .crumbs{color:var(--color-accent-2-300)}
.pagehero.banner .crumbs a{color:#fff}
.pagehero.banner .ticks li{color:#fff}
.pagehero.banner .ticks a{color:#fff;text-decoration:underline}
.pagehero.banner .tag-outline{border-color:rgba(255,255,255,.45);color:#fff;background:transparent}
.pagehero.banner .tag-accent-2{background:var(--color-accent-500);color:#fff}
.pagehero.banner .btn-secondary{background:rgba(255,255,255,.94);color:var(--color-accent-2-800);border-color:transparent}
.pagehero.banner .btn-secondary:hover{background:#fff;color:var(--color-accent-800)}
.pagehero.banner .formcard{box-shadow:0 26px 60px rgba(8,15,30,.45)}
.pagehero.banner .badges img{background:rgba(255,255,255,.9);padding:3px}
/* home: same banner language, kept light so the copy and form stay high contrast */
.hero.banner-light{
--hero-overlay:linear-gradient(180deg,rgba(247,248,250,.93) 0%,rgba(247,248,250,.97) 55%,var(--color-bg) 100%);
background-size:cover,cover;background-position:center,center 22%;background-repeat:no-repeat;
}
.hero.banner-light .hero-grid{padding-top:52px}
@media (max-width:980px){
.pagehero.banner{padding:38px 0 34px;--hero-overlay:linear-gradient(180deg,rgba(20,33,58,.93),rgba(20,33,58,.9))}
.hero.banner-light{--hero-overlay:linear-gradient(180deg,rgba(247,248,250,.95),var(--color-bg) 70%)}
}
/* video sections (click to load, nothing streams until asked) */
.videogrid{gap:22px}
.ytlite{position:relative;margin:0;border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;box-shadow:var(--shadow-sm);background:var(--color-neutral-900)}
.ytlite img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.22,.61,.36,1),opacity .3s}
.ytlite:hover img{transform:scale(1.04);opacity:.88}
.ytplay{position:absolute;top:calc(50% - 32px);left:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:999px;background:var(--color-accent-500);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-md);transition:transform .2s}
.ytlite:hover .ytplay{transform:translate(-50%,-50%) scale(1.08)}
.ytlite figcaption{padding:14px 16px 16px;font-size:14.5px;font-weight:700;color:#fff;background:var(--color-neutral-900)}
.ytlite.playing{aspect-ratio:16/9}
.ytlite.playing iframe{width:100%;height:100%;border:0;display:block}
.ytlite:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
.videoband{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center}
.videoframe{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);background:var(--color-neutral-900)}
.videoframe video{width:100%;height:auto;aspect-ratio:16/9;display:block;object-fit:cover}
@media (max-width:980px){.videoband{grid-template-columns:1fr;gap:24px}.ytplay{width:52px;height:52px}}
/* form in the first fold on every page */
.pagehero.banner .pagehero-in{align-items:start;gap:40px}
.pagehero.banner .formwrap{position:static}
.pagehero.banner .lede,.pagehero.banner .lede[style]{color:var(--color-accent-2-200)}
.pagehero.banner .badges{margin-top:14px}
.pagehero.banner .badges img{height:34px}
.whycard{padding:26px 28px;align-self:start}
.whycard .dots{margin-bottom:20px}
.whycard .altact{margin-top:12px}
@media (max-width:980px){
.pagehero.banner .pagehero-in{display:flex;flex-direction:column}
.pagehero.banner .formwrap{order:-1;width:100%}
}
/* certification badges: bigger and more prominent everywhere */
.badges{gap:14px;margin-top:20px}
.badges img,.pagehero.banner .badges img{height:66px;padding:8px 12px;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);opacity:1}
.pagehero.banner .badges img{box-shadow:0 10px 26px rgba(8,15,30,.28)}
.ftr .certs{gap:14px}
.ftr .certs img{height:64px;padding:8px 12px;background:#fff;border-radius:var(--radius-md)}
.credlogos{gap:14px}
.credlogos img{height:68px;padding:8px 12px}
@media (max-width:620px){
.badges img,.pagehero.banner .badges img,.ftr .certs img,.credlogos img{height:54px;padding:6px 10px}
}
/* compact proof row inside the home first fold */
.herostats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:0 0 28px;padding:20px 0;border-top:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider)}
.herostats b{display:block;font-size:30px;font-weight:900;line-height:1;letter-spacing:-.02em;color:var(--color-accent-700);font-variant-numeric:tabular-nums}
.herostats span{display:block;margin-top:7px;font-size:12.5px;font-weight:600;line-height:1.3;color:var(--color-neutral-700)}
@media (max-width:980px){.herostats{grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px}.herostats b{font-size:26px}}
/* proof row on dark banners */
.pagehero.banner .herostats{border-color:rgba(255,255,255,.22);margin:26px 0 0}
.pagehero.banner .herostats b{color:#fff}
.pagehero.banner .herostats span{color:var(--color-accent-2-200)}
@media (max-width:980px){.pagehero.banner .herostats{margin-top:20px}}
/* new brand mark */
.hdr-logo img{height:54px;width:auto}
.ftr-logo{display:inline-block;margin-bottom:16px}
.ftr-logo img{height:74px;width:auto;display:block}
@media (max-width:980px){.hdr-logo img{height:44px}.ftr-logo img{height:64px}}
@media (max-width:980px){
.hero-grid,.pagehero.banner .pagehero-in{align-items:stretch}
.hero-grid > *,.pagehero.banner .pagehero-in > *{width:100%;min-width:0}
.hero-grid > div:first-child{align-items:stretch}
}
/* footer credit */
.ftr-btm-in{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.credit{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--color-neutral-500)}
.credit img{height:20px;width:auto;opacity:.85;transition:opacity .2s}
.credit:hover{color:var(--color-accent-300);text-decoration:none}
.credit:hover img{opacity:1}
@media (max-width:620px){.ftr-btm-in{justify-content:flex-start}}
.credit img{margin-right:1px}
.regmark{font-size:9px;line-height:1;font-weight:700;align-self:flex-start;margin-top:2px;color:var(--color-neutral-500)}
.credit:hover .regmark{color:var(--color-accent-300)}
/* keep the solutions panel open while the pointer travels from the link to the panel */
.hasmega{display:inline-flex;align-items:center;padding:20px 4px;margin:-20px -4px}
.mega::before{content:"";position:absolute;top:-28px;left:0;right:0;height:28px}
.mega{top:calc(100% + 6px)}
.mega:hover{display:grid}
@media (max-width:980px){
.hasmega{display:block;padding:0;margin:0}
.mega::before{content:none}
}
/* JS controlled open state: survives the pointer travelling between trigger and panel */
.mega{display:none}
.hasmega:hover .mega,.hasmega:focus-within .mega{display:none}
.hasmega.open .mega{display:grid}
.mega{pointer-events:auto}
@media (max-width:980px){
.hasmega.open .mega,.hasmega .mega{display:grid}
}
/* Infographic-style images that must show in full, uncropped. */
.split img.shot.natural{aspect-ratio:auto;height:auto;min-height:0;object-fit:contain}
/* Video thumbnails keep their native 16:9 (the shared .grid3 img height would crop them). */
.videogrid .ytlite img{height:auto;aspect-ratio:16/9}
/* "How it works" step cards */
.stepgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.stepgrid .stepcard{grid-column:span 2}
.stepgrid .stepcard:nth-child(n+4){grid-column:span 3}
@media (max-width:900px){.stepgrid{grid-template-columns:1fr 1fr}.stepgrid .stepcard,.stepgrid .stepcard:nth-child(n+4){grid-column:auto}.stepgrid .stepcard:last-child{grid-column:1/-1}}
@media (max-width:560px){.stepgrid{grid-template-columns:1fr}}
.stepcard{padding:26px 26px 28px;position:relative}
.stepcard h3{font-size:20px;line-height:1.2;margin:14px 0 8px}
.stepcard p{margin:0;font-size:15.5px;line-height:1.55;color:var(--color-neutral-700)}
.stepnum{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:999px;background:var(--color-accent-100);color:var(--color-accent-700);font-weight:900;font-size:15px}
/* Info cards without a number badge, and a 2-up variant of the step grid. */
.stepcard h3:first-child{margin-top:0}
.stepgrid.cols2{grid-template-columns:repeat(2,1fr)}
.stepgrid.cols2 .stepcard,.stepgrid.cols2 .stepcard:nth-child(n+4){grid-column:auto}
@media (max-width:760px){.stepgrid.cols2{grid-template-columns:1fr}}
/* Before / after comparison (industry blocks on the E-Ink page). */
.vsrow{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch}
.vsrow .vscard{padding:22px 24px 26px;display:flex;flex-direction:column;gap:16px}
.vsrow .vscard img{width:100%;aspect-ratio:3/2;object-fit:contain;display:block;border-radius:var(--radius-md);background:#fff}
.vsrow .vscard .dots{margin:0}
.vsbadge{display:grid;place-items:center}
.vsbadge img{width:56px;height:56px}
@media (max-width:760px){.vsrow{grid-template-columns:1fr}.vsbadge{margin:-6px 0}}
/* Labels over the before / after cards. */
.vstag{align-self:flex-start;padding:5px 12px;border-radius:999px;background:var(--color-neutral-300,#dfe4ec);color:var(--color-neutral-800,#2b3345);font-size:12.5px;font-weight:800;letter-spacing:.04em}
.vstag-on{background:var(--color-accent-100);color:var(--color-accent-700)}
/* Large stat pair (E-Ink page, next to the "No Maintenance" banner). */
.bigstats{display:flex;gap:36px;flex-wrap:wrap}
.bigstat{display:grid;gap:6px}
.bigstat b{font-size:58px;line-height:1;font-weight:900;color:var(--color-accent-700)}
.bigstat span{font-size:17px;font-weight:700;color:var(--color-neutral-800)}
@media (max-width:980px){.split[style*="grid-template-columns:.8fr"]{grid-template-columns:1fr!important}}
/* Home: credibility strip + partner brand scroller */
.credstrip{padding:40px 0 8px}
.credgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.credcard{display:flex;align-items:center;gap:12px;padding:16px 16px;background:#fff;border:1px solid var(--color-neutral-300,#e3e7ee);border-radius:var(--radius-lg,16px);box-shadow:var(--shadow-sm,0 1px 3px rgba(20,33,61,.08));transition:transform .2s,box-shadow .2s}
.credcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-md,0 8px 24px rgba(20,33,61,.12))}
.credicon{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--color-accent-100);color:var(--color-accent)}
.credicon svg{width:24px;height:24px}
.credcard b{display:block;font-size:15px;line-height:1.25}
.credcard span:not(.credicon){display:block;margin-top:2px;font-size:12.5px;line-height:1.35;color:var(--color-neutral-600)}
.brandscroll{margin-top:34px;padding:22px 0 8px}
.brandscroll-label{text-align:center;margin:0 0 16px;font-size:12.5px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--color-neutral-600)}
.brandmask{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.brandtrack{display:flex;width:max-content;animation:brandscroll 70s linear infinite}
.brandtrack:hover{animation-play-state:paused}
.brandtrack ul{display:flex;align-items:center;gap:14px;list-style:none;margin:0;padding:4px 7px}
.brandtrack li{white-space:nowrap;padding:13px 26px;background:#fff;border:1px solid var(--color-neutral-300,#e3e7ee);border-radius:999px;font-size:17px;font-weight:800;letter-spacing:.02em;color:var(--color-neutral-700,#44506a);transition:color .2s,border-color .2s}
.brandtrack li:hover{color:var(--color-accent);border-color:currentColor}
@keyframes brandscroll{to{transform:translateX(-50%)}}
@media (max-width:1100px){.credgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.credgrid{grid-template-columns:1fr 1fr}.credcard{flex-direction:column;align-items:flex-start;gap:10px}}
@media (prefers-reduced-motion:reduce){.brandtrack{animation:none;width:auto}.brandmask{-webkit-mask-image:none;mask-image:none}.brandtrack ul[aria-hidden]{display:none}.brandtrack ul{flex-wrap:wrap;justify-content:center}}
.clientscroll .brandtrack{animation-duration:90s}
.clientscroll .brandtrack ul{gap:18px}
.clientscroll .brandtrack li{display:grid;place-items:center;width:150px;height:76px;padding:10px 14px;border-radius:14px}
.clientscroll .brandtrack li img{width:100%;height:100%;object-fit:contain;/*filter:grayscale(1);opacity:.75;*/transition:filter .25s,opacity .25s}
.clientscroll .brandtrack li:hover img{filter:none;opacity:1}
@media (prefers-reduced-motion:reduce){.clientscroll .brandtrack li{width:130px}}
.clientscroll .brandtrack li{position:relative;box-sizing:border-box;padding:0;overflow:hidden}
.clientscroll .brandtrack li img{position:absolute;inset:8px 12px;width:calc(100% - 24px);height:calc(100% - 16px)}
.clientscroll .brandtrack li{width:172px;height:90px}
.partnerscroll{margin-top:10px;padding-top:6px}
.partnerscroll .brandtrack{animation-direction:reverse;animation-duration:80s}
/* ===== Home hero: video background, dark overlay, copy left + form right ===== */
.hero.hero-video{position:relative;isolation:isolate;color:#fff;background-color:#0b1424;background-size:cover;background-position:center}
.hero-video .blob1,.hero-video .blob2{display:none}
.hero-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(8,15,30,.92) 0%,rgba(8,15,30,.78) 45%,rgba(8,15,30,.5) 100%),linear-gradient(0deg,rgba(8,15,30,.55),transparent 35%)}
.hero-video .hero-grid{padding:72px 0 80px;align-items:center}
.hero-video h1{color:#fff;font-size:clamp(36px,4.4vw,58px);line-height:1.06;letter-spacing:-.02em}
.hero-video h1 em{color:#ffc93c}
.hero-video .lede{color:rgba(255,255,255,.86)}
.hero-video .ticks li{color:#fff}
.hero-video .ticks svg{background:var(--color-accent-500)}
.hero-video .tag-outline{border-color:rgba(255,255,255,.5);color:#fff;background:transparent}
.hero-video .tag-neutral{background:rgba(255,255,255,.14);color:#fff}
.hero-video .tag-accent-2{background:var(--color-accent-500);color:#fff}
.hero-video .herostats{border-color:rgba(255,255,255,.22)}
.hero-video .herostats b{color:#fff}
.hero-video .herostats span{color:rgba(255,255,255,.75)}
.hero-video .formcard{background:rgba(255,255,255,.96);border-color:rgba(255,255,255,.4);box-shadow:0 30px 70px rgba(0,0,0,.5);backdrop-filter:blur(10px)}
.hero-video .badges img{background:rgba(255,255,255,.95)}
@media (max-width:767px){.hero-bg-video{display:none}.hero-video .hero-grid{padding:36px 0 44px}}
@media (prefers-reduced-motion:reduce){.hero-bg-video{display:none}}
/* ===== Hero form: glassmorphism ===== */
.hero-video .formcard{
background:linear-gradient(145deg,rgba(255,255,255,.20),rgba(255,255,255,.07));
border:1px solid rgba(255,255,255,.32);
box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.4);
-webkit-backdrop-filter:blur(10px) saturate(1.5);backdrop-filter:blur(10px) saturate(1.5);
}
.hero-video .formcard-hd{background:rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.2)}
.hero-video .formcard-hd h2{color:#fff}
.hero-video .formcard-hd span{color:rgba(255,255,255,.78)}
.hero-video .formcard label{color:rgba(255,255,255,.92)}
.hero-video .formcard .req{color:#ffb199}
.hero-video .formcard .input{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);color:#fff}
.hero-video .formcard .input::placeholder{color:rgba(255,255,255,.62)}
.hero-video .formcard .input:focus{background:rgba(255,255,255,.22);border-color:#fff;outline:0;box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.hero-video .formcard select.input{background-repeat:no-repeat;background-position:right 16px center;background-size:18px;background-image:url("data:image/svg+xml;utf8,")}
.hero-video .formcard select.input option{color:#14213d;background:#fff}
.hero-video .formcard .privacy{color:rgba(255,255,255,.78)}
.hero-video .formcard .errbox{background:rgba(255,255,255,.9)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hero-video .formcard{background:rgba(20,33,58,.85)}}
/* Mega menu: three columns, no descriptions or feature column */
.mega{width:min(860px,92vw)}
.megagrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.megacol ul{gap:6px}
@media (max-width:1180px){.mega{width:min(860px,94vw)}.megagrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:980px){.mega{width:auto}.megagrid{grid-template-columns:1fr}}
/* Mega menu spacing pass (three columns, names only) */
.mega{width:min(900px,92vw);border-radius:var(--radius-lg)}
.megatop{padding:18px 32px}
.megagrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px;padding:28px 32px 32px}
.megacol .megah{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--color-neutral-300)}
.megacol ul{gap:2px}
.megacol a{display:block;padding:10px 14px;margin:0 -14px;border-radius:var(--radius-md);transition:background .15s,transform .15s}
.megacol a b{font-size:15px;font-weight:700;line-height:1.3}
.megacol a:hover{transform:translateX(3px)}
@media (max-width:980px){.megagrid{padding:12px 0 0}.megacol{margin-bottom:18px}}
/* Home hero: spacing after the pointers were removed */
.hero-video .taglist{margin-bottom:26px}
.hero-video h1{margin-bottom:22px}
.hero-video .lede{margin-bottom:0;max-width:30em;line-height:1.5}
.hero-video .herostats{margin:38px 0 0;padding:26px 0;gap:22px;border-top:1px solid rgba(255,255,255,.22);border-bottom:0}
.hero-video .herostats b{font-size:34px}
.hero-video .herostats span{margin-top:9px;font-size:13px}
@media (max-width:980px){.hero-video .herostats{margin-top:26px;padding:20px 0}}
/* ===== Chatbot (robot icon, contrasting teal-blue) ===== */
.fabbtn-bot{background:linear-gradient(135deg,#00c2d6 0%,#2563eb 100%);color:#fff;width:60px;height:60px;box-shadow:0 10px 26px rgba(37,99,235,.45)}
.fabbtn-bot::before{content:"";position:absolute;inset:-6px;border-radius:999px;border:2px solid rgba(0,194,214,.55);animation:botpulse 2.4s ease-out infinite}
.fabbtn-bot .fabdot{background:#5ff3ff;border-color:#fff;top:5px;right:5px}
.fabbtn-bot .boteye{animation:botblink 4.5s infinite;transform-origin:center;transform-box:fill-box}
@keyframes botpulse{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.35);opacity:0}}
@keyframes botblink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.botpanel{width:min(350px,90vw);background:#fff;border-radius:var(--radius-lg);box-shadow:0 24px 60px rgba(8,15,30,.35);overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--color-neutral-300)}
.botpanel[hidden]{display:none}
.bothd{position:relative;display:flex;align-items:center;gap:12px;padding:14px 48px 14px 16px;background:linear-gradient(135deg,#0b2a4a,#1d4ed8);color:#fff}
.bothd p{margin:0;font-size:16px;font-weight:900}
.bothd span:not(.botavatar){display:flex;align-items:center;gap:6px;margin-top:2px;font-size:12px;font-weight:600;color:rgba(255,255,255,.8)}
.botavatar{flex:none;width:42px;height:42px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(135deg,#00c2d6,#2563eb);box-shadow:0 0 0 3px rgba(255,255,255,.2)}
.botlive{width:8px;height:8px;border-radius:999px;background:#3ddc84;box-shadow:0 0 0 3px rgba(61,220,132,.3)}
.botpanel .fabclose{top:50%;transform:translateY(-50%)}
.botlog{height:min(340px,52vh);overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:#f4f7fb}
.botmsg{max-width:86%;padding:10px 14px;border-radius:16px 16px 16px 4px;background:#fff;border:1px solid #e3e9f2;font-size:14.5px;line-height:1.45;color:var(--color-neutral-900);animation:botin .25s ease both}
.botmsg a{color:#1d4ed8}
.botmsg.me{align-self:flex-end;border-radius:16px 16px 4px 16px;background:linear-gradient(135deg,#00a8c4,#2563eb);border-color:transparent;color:#fff}
.botmsg.typing{display:flex;gap:4px;padding:13px 14px}
.botmsg.typing i{width:7px;height:7px;border-radius:999px;background:#9db2d1;animation:botdot 1s infinite}
.botmsg.typing i:nth-child(2){animation-delay:.15s}.botmsg.typing i:nth-child(3){animation-delay:.3s}
@keyframes botdot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
@keyframes botin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.botchips{display:flex;flex-wrap:wrap;gap:8px;animation:botin .25s ease both}
.botchip{padding:8px 14px;border-radius:999px;border:1.5px solid #2563eb;background:#fff;color:#1d4ed8;font:700 13.5px/1.2 inherit;font-family:inherit;cursor:pointer;text-decoration:none;transition:background .15s,color .15s}
.botchip:hover{background:#2563eb;color:#fff;text-decoration:none}
.botform{display:flex;gap:8px;padding:10px 12px;border-top:1px solid #e3e9f2;background:#fff}
.botform input{flex:1;min-width:0;border:1px solid #d5deec;border-radius:999px;padding:10px 14px;font:inherit;font-size:14.5px}
.botform input:focus{outline:2px solid #2563eb;outline-offset:1px}
.botform button{flex:none;width:42px;height:42px;border:0;border-radius:999px;background:linear-gradient(135deg,#00c2d6,#2563eb);color:#fff;display:grid;place-items:center;cursor:pointer}
@media (max-width:980px){.fabbtn-bot{width:54px;height:54px}}
@media (prefers-reduced-motion:reduce){.fabbtn-bot::before,.fabbtn-bot .boteye{animation:none}}
/* ===== Home: What is CTS video ===== */
.ctssec{padding-top:56px;padding-bottom:8px}
.ctsband{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center;padding:28px;background:#fff;border:1px solid var(--color-neutral-300);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.ctsthumb{position:relative;display:block;width:100%;padding:0;border:0;border-radius:var(--radius-md);overflow:hidden;cursor:pointer;background:#000;aspect-ratio:16/9;box-shadow:0 14px 36px rgba(8,15,30,.25)}
.ctsthumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.ctsthumb:hover img{transform:scale(1.04)}
.ctsplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:999px;background:var(--color-accent-500);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 10px rgba(255,255,255,.28),0 10px 30px rgba(0,0,0,.35);transition:transform .2s}
.ctsplay svg{margin-left:3px}
.ctsthumb:hover .ctsplay{transform:translate(-50%,-50%) scale(1.08)}
.ctslen{position:absolute;left:14px;bottom:14px;padding:6px 12px;border-radius:999px;background:rgba(8,15,30,.78);color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.02em}
.ctscopy .h2{margin-bottom:12px}
.ctscopy .lede{margin-bottom:22px}
.ctsbtn{display:inline-flex;align-items:center;gap:10px;font-weight:800}
.vmodal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;background:rgba(6,12,24,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vmodal[hidden]{display:none}
.vmodal-box{position:relative;width:min(960px,100%)}
.vmodal-frame{aspect-ratio:16/9;background:#000;border-radius:var(--radius-md);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.vmodal-frame iframe{width:100%;height:100%;border:0;display:block}
.vmodal-x{position:absolute;top:-46px;right:0;width:38px;height:38px;border:0;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;cursor:pointer}
.vmodal-x:hover{background:rgba(255,255,255,.3)}
@media (max-width:900px){.ctsband{grid-template-columns:1fr;gap:24px;padding:18px}.ctsplay{width:60px;height:60px}.vmodal{padding:14px}}
/* ===== Floating "What is CTS?" video (bottom left) ===== */
.ctsfloat{position:fixed;left:22px;bottom:22px;z-index:65;width:196px;background:#fff;border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);box-shadow:0 14px 36px rgba(8,15,30,.3);animation:ctsin .5s .8s cubic-bezier(.22,.61,.36,1) both}
.ctsfloat[hidden]{display:none}
@keyframes ctsin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ctsfloat-btn{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;font:inherit;border-radius:inherit;overflow:hidden}
.ctsfloat-img{position:relative;display:block;aspect-ratio:16/9;background:#000;overflow:hidden}
.ctsfloat-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.ctsfloat-btn:hover .ctsfloat-img img{transform:scale(1.06)}
.ctsfloat .ctsplay{width:38px;height:38px;box-shadow:0 0 0 5px rgba(255,255,255,.3),0 6px 16px rgba(0,0,0,.35)}
.ctsfloat .ctsplay svg{margin-left:2px}
.ctsfloat-cap{display:block;padding:8px 12px 10px}
.ctsfloat-cap b{display:block;font-size:14px;font-weight:900;color:var(--color-neutral-900);line-height:1.2}
.ctsfloat-cap span{display:block;margin-top:1px;font-size:12px;font-weight:600;color:var(--color-neutral-600)}
.ctsfloat-x{position:absolute;top:-10px;right:-10px;z-index:2;width:24px;height:24px;border:0;border-radius:999px;background:var(--color-neutral-900);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.35)}
.ctsfloat-x:hover{background:var(--color-accent-500)}
@media (max-width:980px){.ctsfloat{left:12px;bottom:84px;width:150px}.ctsfloat-cap{padding:6px 9px 8px}.ctsfloat-cap b{font-size:12.5px}.ctsfloat .ctsplay{width:32px;height:32px}}
@media (prefers-reduced-motion:reduce){.ctsfloat{animation:none}}
/* ===== Styled dropdowns (assets/js/custom-select.js) ===== */
.cselect{position:relative;display:block;width:100%}
.cselect-native{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.cselect-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;cursor:pointer;position:relative;padding-right:44px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 16px center;background-size:18px;transition:border-color .15s,box-shadow .15s}
.cselect-btn.is-placeholder .cselect-txt{color:var(--color-neutral-600);opacity:.85}
.cselect-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cselect.open .cselect-btn{border-color:var(--color-accent-500);box-shadow:0 0 0 3px rgba(224,73,42,.18)}
.cselect.open .cselect-btn{background-image:url("data:image/svg+xml;utf8,")}
.cselect-btn:disabled{opacity:.6;cursor:not-allowed}
.cselect-list{position:absolute;z-index:80;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;max-height:270px;overflow-y:auto;background:#fff;border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);box-shadow:0 18px 44px rgba(8,15,30,.22);animation:csin .14s ease-out}
.cselect-list[hidden]{display:none}
.cselect.up .cselect-list{top:auto;bottom:calc(100% + 6px)}
@keyframes csin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.cselect-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;font-size:14.5px;font-weight:600;line-height:1.3;color:var(--color-neutral-900);cursor:pointer}
.cselect-opt.is-placeholder{color:var(--color-neutral-600);font-weight:500}
.cselect-opt.is-active{background:var(--color-accent-100);color:var(--color-accent-700)}
.cselect-opt.is-selected{font-weight:800}
.cselect-opt.is-selected::after{content:"";flex:none;width:16px;height:16px;background:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.cselect-opt[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.cselect-list::-webkit-scrollbar{width:8px}.cselect-list::-webkit-scrollbar-thumb{background:var(--color-neutral-300);border-radius:8px}
/* glass hero form */
.hero-video .formcard .cselect-btn{color:#fff;background-image:url("data:image/svg+xml;utf8,")}
.hero-video .formcard .cselect-btn.is-placeholder .cselect-txt{color:rgba(255,255,255,.72)}
.hero-video .formcard .cselect.open .cselect-btn{border-color:#fff;background-color:rgba(255,255,255,.22);box-shadow:0 0 0 3px rgba(255,255,255,.25);background-image:url("data:image/svg+xml;utf8,")}
@media (max-width:980px){.cselect-btn{min-height:48px;font-size:16px}.cselect-opt{padding:12px;font-size:16px}}
@media (prefers-reduced-motion:reduce){.cselect-list{animation:none}}
.hero-video .formcard .cselect-btn{background-repeat:no-repeat;background-position:right 16px center;background-size:18px}
/* let dropdown lists escape the form card */
.formcard{overflow:visible}
.formcard-hd{border-radius:var(--radius-lg) var(--radius-lg) 0 0}
/* dropdowns: lighter, cleaner type */
.cselect-btn,.cselect-txt{font-weight:500}
.cselect-list{padding:5px}
.cselect-opt{font-size:14px;font-weight:400;letter-spacing:0;padding:9px 12px;color:var(--color-neutral-800)}
.cselect-opt.is-selected{font-weight:600;color:var(--color-neutral-900)}
.cselect-opt.is-active{font-weight:500;color:var(--color-accent-700)}
.cselect-opt.is-placeholder{font-weight:400}
.cselect-opt.is-selected::after{width:15px;height:15px}
/* ===== Home: "The Bitsy stack" (grouped solutions) ===== */
.gradtext{background:linear-gradient(90deg,#e0492a,#ff9a3c);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.pill{display:inline-block;padding:7px 16px;border-radius:999px;border:1px solid var(--color-accent-300);background:var(--color-accent-100);color:var(--color-accent-700);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
.stacksec{padding-top:64px;padding-bottom:16px}
.stackintro{text-align:center;max-width:46em;margin:0 auto 44px}
.stackintro .h2{font-size:clamp(30px,3.6vw,46px);line-height:1.1;margin-bottom:14px;text-wrap:balance}
.stackintro .lede{margin:0 auto}
.stackgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.stackcard{position:relative;display:flex;flex-direction:column;padding:28px 26px 26px;background:#fff;border:1px solid var(--color-neutral-300);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.stackcard::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,#e0492a,#ff9a3c);opacity:.9}
.stackcard::after{content:"";position:absolute;right:-70px;top:-70px;width:200px;height:200px;border-radius:999px;background:radial-gradient(closest-side,rgba(224,73,42,.14),transparent);pointer-events:none}
.stackcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--color-accent-300)}
.stackhd{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.stackico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#e0492a,#ff9a3c);color:#fff;box-shadow:0 10px 22px rgba(224,73,42,.35)}
.stackico svg{width:26px;height:26px}
.stacknum{font-size:14px;font-weight:800;letter-spacing:.12em;color:var(--color-neutral-400,#aab2c0)}
.stackcard h3{font-size:24px;line-height:1.15;margin-bottom:8px}
.stackcard p{color:var(--color-neutral-700);margin-bottom:20px}
.stackbig{display:flex;align-items:baseline;gap:10px;padding:14px 0;margin-bottom:18px;border-block:1px solid var(--color-divider)}
.stackbig b{font-size:46px;line-height:1;font-weight:900;letter-spacing:-.03em;background:linear-gradient(90deg,#e0492a,#ff9a3c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stackbig span{font-size:14px;font-weight:700;color:var(--color-neutral-600)}
.stackchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.stackchips a{padding:7px 13px;border-radius:999px;background:var(--color-neutral-100);border:1px solid var(--color-neutral-300);font-size:13px;font-weight:600;color:var(--color-neutral-800);transition:background .15s,color .15s,border-color .15s}
.stackchips a:hover{background:var(--color-accent-500);border-color:var(--color-accent-500);color:#fff;text-decoration:none}
.stacklink{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--color-accent-700)}
.stacklink svg{transition:transform .2s}
.stacklink:hover svg{transform:translateX(4px)}
.stacklink:hover{text-decoration:none}
@media (max-width:1000px){.stackgrid{grid-template-columns:1fr}.stackcard{padding:24px 20px}}
/* ===== Home: process + why ===== */
.procsec{padding-top:56px;padding-bottom:8px}
.procgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;position:relative;counter-reset:p}
.procgrid::before{content:"";position:absolute;left:12%;right:12%;top:27px;height:2px;background:repeating-linear-gradient(90deg,var(--color-accent-300) 0 8px,transparent 8px 16px)}
.procstep{position:relative;text-align:center;padding:0 8px}
.procnum{position:relative;z-index:1;width:56px;height:56px;margin:0 auto 18px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(135deg,#e0492a,#ff9a3c);color:#fff;font-size:22px;font-weight:900;box-shadow:0 10px 24px rgba(224,73,42,.35),0 0 0 6px var(--color-bg,#f7f8fa)}
.procstep h3{font-size:19px;margin-bottom:8px}
.procstep p{font-size:14.5px;color:var(--color-neutral-700);line-height:1.5}
.whysec{padding-top:56px;padding-bottom:16px}
.whygrid2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.whycard2{position:relative;padding:30px 28px;background:#fff;border:1px solid var(--color-neutral-300);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .25s,box-shadow .25s}
.whycard2:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.whycard2 b{display:block;font-size:56px;line-height:1;font-weight:900;letter-spacing:-.03em;margin-bottom:14px;background:linear-gradient(90deg,#e0492a,#ff9a3c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.whycard2 h3{font-size:20px;margin-bottom:8px}
.whycard2 p{color:var(--color-neutral-700);line-height:1.55}
@media (max-width:1000px){.procgrid{grid-template-columns:1fr 1fr;gap:30px 18px}.procgrid::before{display:none}.whygrid2{grid-template-columns:1fr}}
@media (max-width:560px){.procgrid{grid-template-columns:1fr}}
/* ===== Home: restyle of the existing content sections (text unchanged) ===== */
body:has(.hero-video) .btn-primary{background:linear-gradient(135deg,#e0492a,#ff7a3c);border-color:transparent;box-shadow:0 10px 24px rgba(224,73,42,.28);transition:transform .2s,box-shadow .2s,filter .2s}
body:has(.hero-video) .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(224,73,42,.38);filter:brightness(1.05)}
.solsec{padding-top:72px}
.solsec .kicker{display:inline-block;padding:7px 16px;border-radius:999px;border:1px solid var(--color-accent-300);background:var(--color-accent-100);color:var(--color-accent-700);letter-spacing:.14em;margin-bottom:16px}
.solsec>.wrap>.h2{font-size:clamp(30px,3.6vw,44px)!important;line-height:1.1;text-wrap:balance}
.solsec .cards .card{position:relative;border-radius:22px;border:1px solid var(--color-neutral-300);box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.solsec .cards .card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;z-index:2;background:linear-gradient(90deg,#e0492a,#ff9a3c);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.solsec .cards .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--color-accent-300)}
.solsec .cards .card:hover::before{transform:scaleX(1)}
.solsec .cards .card h3{font-size:21px}
.solsec .cards .btn-secondary{border-radius:999px;font-weight:800;border-color:var(--color-accent-300);color:var(--color-accent-700);background:#fff;transition:background .2s,color .2s}
.solsec .cards .btn-secondary:hover{background:linear-gradient(135deg,#e0492a,#ff7a3c);border-color:transparent;color:#fff}
/* long-form SEO sections: airy two-column layout, framed images */
.contentsec{padding-top:72px;padding-bottom:72px}
.contentsec.alt{background:linear-gradient(180deg,rgba(255,255,255,0),rgba(234,239,247,.7) 18%,rgba(234,239,247,.7) 82%,rgba(255,255,255,0))}
.contentsec .split{align-items:center;gap:64px}
.contentsec .prose .h2,.contentsec .h2{font-size:clamp(28px,3vw,38px)!important;line-height:1.12;text-wrap:balance;margin-bottom:22px!important;position:relative;padding-bottom:18px}
.contentsec .prose .h2::after,.contentsec .split>div>.h2::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:4px;border-radius:4px;background:linear-gradient(90deg,#e0492a,#ff9a3c)}
.contentsec .prose p{font-size:16.5px;line-height:1.75;color:var(--color-neutral-700)}
.contentsec .prose strong{color:var(--color-neutral-900)}
.contentsec .washed{border-radius:28px!important;box-shadow:0 26px 54px rgba(8,15,30,.2),18px 18px 0 0 rgba(224,73,42,.14)!important;transition:transform .4s}
.contentsec .split>.washed:hover{transform:translateY(-4px)}
.contentsec .washed img{transition:transform .6s}
.contentsec .washed:hover img{transform:scale(1.03)}
.indsec{padding-top:72px}
.indsec .kicker{display:inline-block;padding:7px 16px;border-radius:999px;border:1px solid var(--color-accent-300);background:var(--color-accent-100);color:var(--color-accent-700);letter-spacing:.14em;margin-bottom:16px}
.indsec .h2{font-size:clamp(28px,3.4vw,42px)!important}
.indsec .grid3{counter-reset:ind}
.indsec .grid3>.card{position:relative;counter-increment:ind;border-radius:20px;padding-top:56px!important;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.indsec .grid3>.card::before{content:counter(ind,decimal-leading-zero);position:absolute;top:18px;left:28px;font-size:13px;font-weight:900;letter-spacing:.12em;background:linear-gradient(90deg,#e0492a,#ff9a3c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.indsec .grid3>.card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#e0492a,#ff9a3c);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.indsec .grid3>.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--color-accent-300)}
.indsec .grid3>.card:hover::after{transform:scaleX(1)}
.quotesec{padding-top:72px}
.quotesec .h2{font-size:clamp(28px,3.4vw,42px)!important;text-align:center}
.quotesec .quotes blockquote{position:relative;border-radius:24px;padding-top:44px;transition:transform .25s,box-shadow .25s}
.quotesec .quotes blockquote::before{content:"\201C";position:absolute;top:8px;right:24px;font-size:96px;line-height:1;font-family:Georgia,serif;font-weight:900;background:linear-gradient(135deg,#e0492a,#ff9a3c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:.28}
.quotesec .quotes blockquote:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.faqsec{padding-top:72px}
.faqsec .h2{font-size:clamp(28px,3.2vw,40px)!important}
.faqsec .faqs details{border-radius:18px;transition:box-shadow .2s,border-color .2s}
.faqsec .faqs details[open]{border-color:var(--color-accent-300);box-shadow:var(--shadow-md)}
.faqsec .faqs summary{font-weight:700}
@media (max-width:980px){.contentsec{padding-top:44px;padding-bottom:44px}.contentsec .split{gap:30px}.contentsec .washed{box-shadow:0 18px 38px rgba(8,15,30,.2),10px 10px 0 0 rgba(224,73,42,.14)!important}.solsec,.indsec,.quotesec,.faqsec{padding-top:48px}}
/* hero glass dropdown: keep the chevron when focused / open (the :focus background shorthand reset it) */
.hero-video .formcard .cselect-btn:focus,.hero-video .formcard .cselect.open .cselect-btn{background-repeat:no-repeat;background-position:right 16px center;background-size:18px}
.hero-video .formcard .cselect-btn:focus{background-image:url("data:image/svg+xml;utf8,")}
/* ===== Home: offering cards, cleaner palette (white cards, relevant photos) ===== */
.solsec{background:radial-gradient(900px 420px at 88% 0,rgba(255,154,60,.10),transparent 62%),radial-gradient(700px 380px at 0 40%,rgba(224,73,42,.06),transparent 60%),#fff}
.solsec .cards{gap:28px}
.solsec .cards .card{background:#fff;border:1px solid #edeef2;box-shadow:0 2px 6px rgba(20,33,61,.05),0 18px 40px -18px rgba(20,33,61,.18)}
.solsec .cards .card .washed{position:relative;background:#0b1424}
.solsec .cards .card .washed img{height:220px}
.solsec .cards .card .washed::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,15,30,0) 55%,rgba(8,15,30,.45));pointer-events:none}
.solsec .cards .card:hover .washed img{transform:scale(1.06)}
.solsec .cards .cardbody{padding:24px 24px 26px}
.solsec .cards .cardbody h3{font-size:22px;color:var(--color-neutral-900)}
.solsec .cards .apps{color:var(--color-neutral-600);font-size:14px;line-height:1.5;margin-bottom:16px}
.solsec .cards .mini{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent-700);margin-bottom:10px}
.solsec .cards .dots{margin-bottom:22px}
.solsec .cards .dots li{font-size:14.5px;color:var(--color-neutral-800)}
.solsec .cards .btn-secondary{background:#fff;border:1.5px solid var(--color-accent-300);padding:11px 20px}
@media (max-width:1000px){.solsec .cards .card .washed img{height:200px}}
/* ===== Home: trust bar (overlaps the hero) + clean client logo scroller ===== */
.credstrip{position:relative;z-index:5;margin-top:-56px;padding-top:0}
.credgrid{gap:0;padding:6px;background:#fff;border:1px solid #edeef2;border-radius:24px;box-shadow:0 30px 70px -24px rgba(8,15,30,.4),0 2px 6px rgba(8,15,30,.05)}
.credcard{padding:20px 22px;border:0;border-radius:18px;background:transparent;box-shadow:none;transition:background .2s}
.credcard+.credcard{position:relative}
.credcard+.credcard::before{content:"";position:absolute;left:-1px;top:22%;bottom:22%;width:1px;background:#e7e9ef}
.credcard:hover{transform:none;box-shadow:none;background:var(--color-accent-100)}
.credcard:hover+.credcard::before,.credcard:hover::before{opacity:0}
.credcard b{font-size:15.5px}
.credicon{background:linear-gradient(135deg,#e0492a,#ff9a3c);color:#fff;box-shadow:0 8px 18px rgba(224,73,42,.28)}
.clientscroll{margin-top:56px}
.clientscroll .brandscroll-label{display:flex;align-items:center;justify-content:center;gap:18px;font-size:12px;letter-spacing:.16em;color:var(--color-neutral-600);margin-bottom:22px}
.clientscroll .brandscroll-label::before,.clientscroll .brandscroll-label::after{content:"";flex:1;max-width:160px;height:1px;background:linear-gradient(90deg,transparent,#d7dbe4)}
.clientscroll .brandscroll-label::after{transform:scaleX(-1)}
.clientscroll .brandtrack ul{gap:10px}
.clientscroll .brandtrack li{background:transparent;border:0;box-shadow:none;width:168px;height:84px;border-radius:0}
/*.clientscroll .brandtrack li img{ filter:grayscale(1) contrast(1.05);opacity:.72;mix-blend-mode:multiply}*/
.clientscroll .brandtrack li:hover img{filter:none;opacity:1;mix-blend-mode:normal}
@media (max-width:1100px){.credstrip{margin-top:-36px}.credgrid{gap:2px}.credcard+.credcard::before{display:none}}
@media (max-width:640px){.credstrip{margin-top:-24px}.credcard{padding:16px 14px}.clientscroll{margin-top:40px}.clientscroll .brandscroll-label{font-size:11px;letter-spacing:.1em;padding:0 14px;text-align:center}.clientscroll .brandscroll-label::before,.clientscroll .brandscroll-label::after{display:none}}
/* =====================================================================
SITE-WIDE THEME LAYER (same look as the homepage, applied to every page)
===================================================================== */
.btn-primary{background:linear-gradient(135deg,#e0492a,#ff7a3c);border-color:transparent;box-shadow:0 10px 24px rgba(224,73,42,.28);transition:transform .2s,box-shadow .2s,filter .2s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(224,73,42,.38);filter:brightness(1.05)}
.sec .kicker{display:inline-block;padding:7px 16px;border-radius:999px;border:1px solid var(--color-accent-300);background:var(--color-accent-100);color:var(--color-accent-700);letter-spacing:.14em;margin-bottom:16px}
.sec>.wrap>.h2{font-size:clamp(28px,3.4vw,42px)!important;line-height:1.1;text-wrap:balance}
/* two-column copy + image sections */
.sec .split{align-items:center;gap:64px}
.sec .split .prose .h2,.sec .split>div>.h2{font-size:clamp(26px,2.8vw,36px)!important;line-height:1.12;text-wrap:balance;margin-bottom:22px!important;position:relative;padding-bottom:18px}
.sec .split .prose .h2::after,.sec .split>div>.h2::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:4px;border-radius:4px;background:linear-gradient(90deg,#e0492a,#ff9a3c)}
.sec .split.narrow-left>div>.h2::after,.sec .split.narrow-right>div>.h2::after{display:none}
.sec .split.narrow-left>div>.h2,.sec .split.narrow-right>div>.h2{padding-bottom:0}
.sec .split .prose p{font-size:16.5px;line-height:1.75;color:var(--color-neutral-700)}
.sec .split .prose strong{color:var(--color-neutral-900)}
.sec .split>.washed,.sec .split>div>.washed{border-radius:28px!important;box-shadow:0 26px 54px rgba(8,15,30,.2),18px 18px 0 0 rgba(224,73,42,.14)!important;transition:transform .4s}
.sec .split>.washed:hover{transform:translateY(-4px)}
.sec .split .washed img{transition:transform .6s}
.sec .split .washed:hover img{transform:scale(1.03)}
/* cards */
.sec .cards{gap:28px}
.sec .cards .card{position:relative;background:#fff;border:1px solid #edeef2;border-radius:22px;box-shadow:0 2px 6px rgba(20,33,61,.05),0 18px 40px -18px rgba(20,33,61,.18);overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.sec .cards .card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;z-index:2;background:linear-gradient(90deg,#e0492a,#ff9a3c);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.sec .cards .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--color-accent-300)}
.sec .cards .card:hover::before{transform:scaleX(1)}
.sec .cards .card .washed{position:relative;background:#0b1424}
.sec .cards .card .washed img{height:220px}
.sec .cards .card .washed::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,15,30,0) 55%,rgba(8,15,30,.45));pointer-events:none}
.sec .cards .card:hover .washed img{transform:scale(1.06)}
.sec .cards .cardbody{padding:24px 24px 26px}
.sec .cards .cardbody h3{font-size:22px;color:var(--color-neutral-900)}
.sec .cards .apps{color:var(--color-neutral-600);font-size:14px;line-height:1.5;margin-bottom:16px}
.sec .cards .mini{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent-700);margin-bottom:10px}
.sec .cards .btn-secondary{border-radius:999px;font-weight:800;border:1.5px solid var(--color-accent-300);color:var(--color-accent-700);background:#fff;padding:11px 20px;transition:background .2s,color .2s}
.sec .cards .btn-secondary:hover{background:linear-gradient(135deg,#e0492a,#ff7a3c);border-color:transparent;color:#fff}
/* step cards, comparison cards, big stats, tables */
.stepcard{background:#fff;border:1px solid #edeef2;border-radius:22px;box-shadow:0 2px 6px rgba(20,33,61,.05),0 16px 36px -18px rgba(20,33,61,.16);overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.stepcard::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,#e0492a,#ff9a3c);opacity:.9}
.stepcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--color-accent-300)}
.stepnum{width:40px;height:40px;background:linear-gradient(135deg,#e0492a,#ff9a3c);color:#fff;font-size:16px;box-shadow:0 8px 18px rgba(224,73,42,.3)}
.vscard{border-radius:22px;overflow:hidden}
.bigstat b{background:linear-gradient(90deg,#e0492a,#ff9a3c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.deftable tr{transition:background .15s}
.deftable tr:hover th,.deftable tr:hover td{background:var(--color-accent-100)}
/* videos + gallery */
.videogrid .ytlite{border-radius:20px;overflow:hidden;box-shadow:0 18px 40px -18px rgba(20,33,61,.35);transition:transform .25s}
.videogrid .ytlite:hover{transform:translateY(-4px)}
.grid3>.washed{border-radius:20px;overflow:hidden;box-shadow:0 14px 34px -16px rgba(20,33,61,.3);transition:transform .25s,box-shadow .25s}
.grid3>.washed:hover{transform:translateY(-4px);box-shadow:0 22px 44px -14px rgba(20,33,61,.38)}
/* FAQs and quotes */
.faqs details{background:#fff;border-radius:18px;transition:box-shadow .2s,border-color .2s}
.faqs details[open]{border-color:var(--color-accent-300);box-shadow:var(--shadow-md)}
.faqs summary{font-weight:700}
.quotes blockquote{position:relative;border-radius:24px;padding-top:44px;transition:transform .25s,box-shadow .25s}
.quotes blockquote::before{content:"\201C";position:absolute;top:8px;right:24px;font-size:96px;line-height:1;font-family:Georgia,serif;font-weight:900;background:linear-gradient(135deg,#e0492a,#ff9a3c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:.28}
.quotes blockquote:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
/* call-to-action band */
.ctaband{position:relative;overflow:hidden;background:linear-gradient(120deg,#d8401f 0%,#e0492a 40%,#ff7a3c 100%);box-shadow:0 26px 60px -22px rgba(224,73,42,.6)}
.ctaband::before{content:"";position:absolute;right:-80px;top:-120px;width:380px;height:380px;border-radius:999px;background:radial-gradient(closest-side,rgba(255,255,255,.28),transparent)}
.ctaband>*{position:relative}
/* inner-page hero: glass form + stronger headline */
.pagehero.banner h1{font-size:clamp(34px,4vw,54px);line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
.pagehero.banner .formcard{background:linear-gradient(145deg,rgba(255,255,255,.20),rgba(255,255,255,.07));border:1px solid rgba(255,255,255,.32);box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.4);-webkit-backdrop-filter:blur(15px) saturate(1.5);backdrop-filter:blur(15px) saturate(1.5)}
.pagehero.banner .formcard-hd{background:rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.2)}
.pagehero.banner .formcard-hd h2{color:#fff}
.pagehero.banner .formcard-hd span{color:rgba(255,255,255,.78)}
.pagehero.banner .formcard label{color:rgba(255,255,255,.92)}
.pagehero.banner .formcard .req{color:#ffb199}
.pagehero.banner .formcard .input{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);color:#fff}
.pagehero.banner .formcard .input::placeholder{color:rgba(255,255,255,.62)}
.pagehero.banner .formcard .input:focus{background:rgba(255,255,255,.22);border-color:#fff;outline:0;box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.pagehero.banner .formcard .privacy{color:rgba(255,255,255,.78)}
.pagehero.banner .formcard .cselect-btn{color:#fff;background-repeat:no-repeat;background-position:right 16px center;background-size:18px;background-image:url("data:image/svg+xml;utf8,")}
.pagehero.banner .formcard .cselect-btn:focus{background-image:url("data:image/svg+xml;utf8,")}
.pagehero.banner .formcard .cselect-btn.is-placeholder .cselect-txt{color:rgba(255,255,255,.72)}
.pagehero.banner .formcard .cselect.open .cselect-btn{border-color:#fff;background-color:rgba(255,255,255,.22);box-shadow:0 0 0 3px rgba(255,255,255,.25);background-repeat:no-repeat;background-position:right 16px center;background-size:18px;background-image:url("data:image/svg+xml;utf8,")}
@media (max-width:980px){.sec .split{gap:30px}.sec .split>.washed,.sec .split>div>.washed{box-shadow:0 18px 38px rgba(8,15,30,.2),10px 10px 0 0 rgba(224,73,42,.14)!important}}
/* ===== Site-wide theme layer, part 2: remove the grey surfaces ===== */
:root{--color-bg:#fafbfc}
.card{background:#fff;border:1px solid #edeef2;box-shadow:0 2px 6px rgba(20,33,61,.05),0 16px 36px -18px rgba(20,33,61,.16)}
.panel{background:#fff;border:1px solid #edeef2;border-radius:28px;box-shadow:0 2px 6px rgba(20,33,61,.05),0 24px 54px -26px rgba(20,33,61,.22)}
.teamcard{position:relative;background:#fff;border:1px solid #edeef2;border-radius:22px;box-shadow:0 2px 6px rgba(20,33,61,.05),0 16px 36px -18px rgba(20,33,61,.16);overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.teamcard::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,#e0492a,#ff9a3c);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.teamcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--color-accent-300)}
.teamcard:hover::before{transform:scaleX(1)}
.teamcard img{border:3px solid #fff;box-shadow:0 0 0 3px var(--color-accent-200),0 10px 22px rgba(20,33,61,.18)}
.clientcard{background:#fff;border:1px solid #edeef2;border-radius:18px;transition:transform .25s,box-shadow .25s,border-color .25s}
.clientcard:hover{transform:translateY(-4px);box-shadow:0 18px 36px -16px rgba(20,33,61,.3);border-color:var(--color-accent-300)}
.clientcard:hover img{filter:none;opacity:1}
.card:hover{border-color:var(--color-accent-200)}
/* ===== FAQ section: sticky help card on the left, no empty space ===== */
.sec .split.narrow-left:has(.faqs){align-items:start;gap:48px;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr)}
.sec .split.narrow-left:has(.faqs)>div:first-child{position:sticky;top:112px;padding:34px 30px 32px;background:#fff;border:1px solid #edeef2;border-radius:26px;box-shadow:0 2px 6px rgba(20,33,61,.05),0 24px 54px -26px rgba(20,33,61,.28);overflow:hidden}
.sec .split.narrow-left:has(.faqs)>div:first-child::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,#e0492a,#ff9a3c)}
.sec .split.narrow-left:has(.faqs)>div:first-child::after{content:"?";position:absolute;right:-6px;top:-30px;font-size:190px;line-height:1;font-weight:900;color:rgba(224,73,42,.08);pointer-events:none}
.sec .split.narrow-left:has(.faqs)>div:first-child>*{position:relative}
.sec .split.narrow-left:has(.faqs)>div:first-child .h2{margin-bottom:14px!important;font-size:clamp(24px,2.4vw,32px)!important}
.sec .split.narrow-left:has(.faqs)>div:first-child .lede{font-size:16.5px;line-height:1.6;margin-bottom:24px!important}
.sec .split.narrow-left:has(.faqs)>div:first-child .btn{width:100%;justify-content:center;padding:14px 20px;border-radius:999px;font-size:16px;color:#fff;background:linear-gradient(135deg,#e0492a,#ff7a3c);border-color:transparent;box-shadow:0 10px 24px rgba(224,73,42,.28)}
.sec .split.narrow-left:has(.faqs)>div:first-child .btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(224,73,42,.38);color:#fff}
.faqs{counter-reset:faq}
.faqs details{counter-increment:faq}
.faqs summary{display:flex;align-items:flex-start;gap:14px;padding-right:8px}
.faqs summary::before{content:counter(faq,decimal-leading-zero);flex:none;font-size:13px;font-weight:900;letter-spacing:.08em;padding-top:3px;background:linear-gradient(90deg,#e0492a,#ff9a3c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.faqs summary::after{margin-left:auto;float:none;flex:none;width:28px;height:28px;border-radius:999px;display:grid;place-items:center;background:var(--color-accent-100);transition:background .2s,color .2s}
.faqs details[open] summary::after{background:linear-gradient(135deg,#e0492a,#ff7a3c);color:#fff}
.faqs details p{padding-left:34px}
@media (max-width:980px){.sec .split.narrow-left:has(.faqs){grid-template-columns:1fr}.sec .split.narrow-left:has(.faqs)>div:first-child{position:static}}
/* =====================================================================
CLIENT CORRECTIONS (10/10): yellow CTAs, live-style form, scrollers,
robot bubble, hero video crop, tablet / mobile responsiveness
===================================================================== */
/* ---- call-to-action buttons: brand orange gradient (yellow variant kept in later-features) ---- */
.btn-primary,body:has(.hero-video) .btn-primary{background:linear-gradient(135deg,#e0492a,#ff7a3c);color:#fff;border:0;font-weight:800;box-shadow:0 10px 24px rgba(224,73,42,.32),inset 0 -2px 0 rgba(0,0,0,.12);text-shadow:none}
.btn-primary:hover,body:has(.hero-video) .btn-primary:hover{background:linear-gradient(135deg,#d8401f,#ff8a4c);color:#fff;transform:translateY(-2px);box-shadow:0 14px 30px rgba(224,73,42,.42),inset 0 -2px 0 rgba(0,0,0,.12);filter:none}
.btn-primary:active{transform:translateY(0);box-shadow:0 4px 12px rgba(224,73,42,.35)}
.btn-primary:focus-visible{outline:3px solid #111a2e;outline-offset:2px}
.btn-primary svg{color:#fff}
.ctslogo{width:26px;height:26px;border-radius:999px;background:#fff;padding:2px;object-fit:contain;flex:none;margin-right:10px;vertical-align:middle;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.btn .ctslogo{display:inline-block}
.btn-primary:has(.ctslogo){display:inline-flex;align-items:center;justify-content:center}
.cta-big .ctslogo{width:32px;height:32px}
.hdr-act .btn-primary{white-space:nowrap}
.hdr-act .btn-primary .ctslogo{width:24px;height:24px;margin-right:8px}
/* ---- hero: padding bug on tablets (shorthand had zeroed the side padding), video caption crop ---- */
.hero-video .hero-grid{padding-top:72px;padding-bottom:84px;padding-left:32px;padding-right:32px}
.hero-bg-video{top:0;height:120%;object-position:center top}
.hero-shade{background:linear-gradient(100deg,rgba(8,15,30,.92) 0%,rgba(8,15,30,.78) 45%,rgba(8,15,30,.5) 100%),linear-gradient(0deg,rgba(8,15,30,.92) 0,rgba(8,15,30,.35) 14%,transparent 34%)}
@media (max-width:980px){.hero-video .hero-grid{padding-left:24px;padding-right:24px}}
@media (max-width:767px){.hero-video .hero-grid{padding:36px 20px 44px}}
@media (max-width:420px){.hero-video .hero-grid{padding-left:16px;padding-right:16px}}
/* ---- form: same format as the current website (underlined fields, short labels) ---- */
.hero-video .formcard,.pagehero.banner .formcard{background:linear-gradient(160deg,rgba(9,14,28,.62),rgba(9,14,28,.38));border:1px solid rgba(255,255,255,.22);box-shadow:0 30px 80px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}
.hero-video .formcard-hd,.pagehero.banner .formcard-hd{background:transparent;border:0;padding:26px 28px 4px;justify-content:center;text-align:center}
.hero-video .formcard-hd h2,.pagehero.banner .formcard-hd h2{font-size:26px;color:#fff;letter-spacing:-.01em}
.hero-video .formcard form,.pagehero.banner .formcard form{padding:14px 28px 26px;gap:16px}
.hero-video .formcard label,.pagehero.banner .formcard label{font-size:14px;font-weight:700;color:#fff;letter-spacing:.01em}
.hero-video .formcard .input,.pagehero.banner .formcard .input,.hero-video .formcard .cselect-btn,.pagehero.banner .formcard .cselect-btn{background-color:transparent;border:0;border-bottom:2px solid rgba(255,255,255,.55);border-radius:0;padding:9px 2px;min-height:44px;color:#fff;box-shadow:none}
.hero-video .formcard .input::placeholder,.pagehero.banner .formcard .input::placeholder{color:rgba(255,255,255,.55)}
.hero-video .formcard .input:focus,.pagehero.banner .formcard .input:focus,.hero-video .formcard .cselect.open .cselect-btn,.pagehero.banner .formcard .cselect.open .cselect-btn{background-color:transparent;border-bottom-color:#ffd21f;box-shadow:none;outline:0}
.hero-video .formcard select.input,.pagehero.banner .formcard select.input{padding-left:2px}
.phonefield{display:flex;align-items:center;gap:12px;border-bottom:2px solid rgba(255,255,255,.55)}
.phonefield:focus-within{border-bottom-color:#ffd21f}
.phonefield .cc{font-weight:800;color:#ffd21f;font-size:15px;white-space:nowrap;padding:9px 0 9px 2px}
.phonefield .input{border:0!important;flex:1;min-width:0;padding-left:0!important}
.hero-video .formcard .privacy,.pagehero.banner .formcard .privacy{font-size:12.5px}
.hero-video .formcard .cta-big,.pagehero.banner .formcard .cta-big{margin-top:6px;padding:15px 22px;border-radius:999px;font-size:17px}
/* ---- scrollers: sector groups, separators, original logo colours ---- */
.clientscroll .brandtrack ul,.partnerscroll .brandtrack ul{gap:14px;align-items:center}
.clientscroll .brandtrack li.tile,.partnerscroll .brandtrack li.tile{width:170px;height:84px;border-radius:16px;background:#fff;border:1px solid #edeef2;box-shadow:0 2px 6px rgba(20,33,61,.05);display:grid;place-items:center;padding:0;overflow:hidden;position:relative;opacity:1}
.clientscroll .brandtrack li.logo img,.partnerscroll .brandtrack li.logo img{position:absolute;inset:10px 14px;width:calc(100% - 28px);height:calc(100% - 20px);object-fit:contain;filter:none!important;opacity:1!important;mix-blend-mode:normal!important}
.clientscroll .brandtrack li.logo:hover img{transform:scale(1.05)}
.brandtrack li.txt{padding:0 12px}
.brandtrack li.txt span{font-size:15.5px;font-weight:800;line-height:1.2;color:var(--color-neutral-800);text-align:center;letter-spacing:.01em}
.partnerscroll .brandtrack li.txt{width:auto;min-width:150px;padding:0 26px;border-radius:999px;height:60px}
.partnerscroll .brandtrack li.txt span{font-size:17px;white-space:nowrap}
.clientscroll .brandtrack li.sep{width:2px;height:64px;margin:0 18px;border-radius:2px;background:linear-gradient(180deg,transparent,var(--color-accent-400),transparent);flex:none;padding:0;border:0;box-shadow:none;background-color:transparent}
.clientscroll .brandtrack li.grp{flex:none;width:auto;height:auto;border:0;background:none;box-shadow:none;padding:0 4px 0 0;display:block}
.clientscroll .brandtrack li.grp span{display:inline-block;padding:9px 18px;border-radius:999px;background:linear-gradient(135deg,#e0492a,#ff7a3c);color:#fff;font-size:12.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;box-shadow:0 8px 18px rgba(224,73,42,.3)}
.clientscroll .brandtrack{animation-duration:150s}
.partnerscroll .brandtrack{animation-duration:110s}
.alliancesec{padding-top:56px;padding-bottom:20px}
.clientscroll .brandscroll-label,.partnerscroll .brandscroll-label{margin-bottom:24px}
.partnerscroll .brandscroll-label{font-size:13px}
/* ---- robot: "Let's chat" bubble ---- */
.botbubble{position:absolute;right:76px;bottom:12px;max-width:none;padding:11px 18px;border:0;border-radius:18px 18px 4px 18px;background:#ffd21f;color:#111a2e;font:800 15.5px/1 inherit;font-family:inherit;white-space:nowrap;cursor:pointer;box-shadow:0 10px 26px rgba(255,199,0,.55),0 0 0 3px rgba(255,255,255,.9);opacity:0;transform:translateX(10px) scale(.9);pointer-events:none;transition:opacity .35s,transform .35s;animation:bubbleBob 2.2s ease-in-out infinite}
.botbubble.show{opacity:1;transform:none;pointer-events:auto}
.botbubble.gone{display:none}
.botbubble::after{content:"";position:absolute;right:-7px;bottom:7px;width:14px;height:14px;background:#ffd21f;transform:rotate(45deg);border-radius:3px;box-shadow:2px -2px 0 rgba(255,255,255,.9)}
@keyframes bubbleBob{0%,100%{translate:0 0}50%{translate:0 -5px}}
.fab.open .botbubble{display:none}
@media (prefers-reduced-motion:reduce){.botbubble{animation:none}}
/* ---- short "talk to us" form (replaces the long brief) ---- */
.talksec{padding-top:72px}
.talkband{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center;padding:48px;border-radius:32px;background:linear-gradient(135deg,#0f1b33 0%,#1b2f57 100%);box-shadow:0 34px 70px -28px rgba(15,27,51,.6);position:relative;overflow:hidden}
.talkband::before{content:"";position:absolute;right:-120px;top:-140px;width:420px;height:420px;border-radius:999px;background:radial-gradient(closest-side,rgba(255,210,31,.28),transparent)}
.talkband>*{position:relative}
.talkcopy .kicker{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#ffd21f}
.talkcopy .h2{color:#fff;font-size:clamp(28px,3.2vw,42px)!important;line-height:1.1;margin-bottom:16px!important}
.talkcopy .lede{color:rgba(255,255,255,.82);font-size:18px;margin-bottom:22px}
.talkpts{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.talkpts li{position:relative;padding-left:30px;color:#fff;font-weight:600;line-height:1.45}
.talkpts li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:999px;background:#ffd21f url("data:image/svg+xml;utf8,") center/12px no-repeat}
.talkform{margin:0;padding:30px 30px 28px;background:#fff!important;border-radius:24px;box-shadow:0 24px 50px -20px rgba(0,0,0,.55)}
.talkform form{padding:0;display:grid;gap:16px}
.talkform .g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.talkform label{font-size:13.5px;font-weight:700;color:var(--color-neutral-800)}
.talkform .opt{font-weight:500;color:var(--color-neutral-500,#8b93a6)}
.talkform textarea.input{min-height:84px}
.talkform .cta-big{border-radius:999px;padding:15px 22px;font-size:17px}
@media (max-width:980px){.talkband{grid-template-columns:1fr;gap:30px;padding:34px 28px}.talkform{padding:24px 22px}}
@media (max-width:560px){.talkband{padding:26px 18px;border-radius:24px}.talkform .g2{grid-template-columns:1fr}}
/* ---- tablet + mobile: hero, stats, layout ---- */
@media (max-width:1100px){
.hero-video .hero-grid{grid-template-columns:1fr;gap:34px;max-width:820px;margin-left:auto;margin-right:auto}
.hero-video .hero-grid>div:first-child{align-items:flex-start}
.hero-video .formwrap{width:100%;max-width:560px;order:0}
.hero-grid .formwrap{order:0}
.hero-grid>div:first-child>h1{order:0}.hero-grid>div:first-child>.taglist{order:0}.hero-grid>div:first-child>.lede{order:0}
.hero-video h1{font-size:clamp(34px,6vw,52px)}
.hero-video .herostats{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:767px){
.hero-video .herostats{grid-template-columns:1fr 1fr;gap:18px 12px}
.hero-video .formwrap{max-width:none}
.hero-video .formcard-hd h2{font-size:23px}
}
.hero-video .herostats{margin-top:30px}
.hero-video .herostats span{font-size:13px;line-height:1.3}
@media (max-width:1100px){:root{--page-pad:28px}.wrap{padding-left:28px;padding-right:28px}}
@media (max-width:767px){:root{--page-pad:20px}.wrap{padding-left:20px;padding-right:20px}}
@media (max-width:420px){:root{--page-pad:16px}.wrap{padding-left:16px;padding-right:16px}}
/* ---- header: 8 nav items need more room; hamburger up to 1180px ---- */
.hdr-in{max-width:var(--page-max);padding-left:var(--page-pad);padding-right:var(--page-pad);gap:22px}
.mainnav{gap:20px;flex-wrap:nowrap}
.tel{white-space:nowrap}
.hero-bg-video{height:150%}
@media (max-width:1320px){.tel{display:none}}
@media (max-width:1180px){
.hdr{position:relative}
.mainnav{display:none}
.mainnav.open{display:grid;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--color-neutral-300);padding:18px 24px;gap:14px;margin:0;max-height:78vh;overflow-y:auto;box-shadow:var(--shadow-lg);z-index:60}
.navtoggle{display:block;order:9}
.mega{position:static;display:grid;grid-template-columns:1fr;box-shadow:none;border:0;background:transparent;padding:8px 0 0;width:auto;transform:none}
.hasmega{display:block}
.hasmega>a{margin-bottom:4px}
.megagrid{grid-template-columns:1fr;padding:6px 0 0;gap:18px}
.megatop{background:transparent;color:var(--color-neutral-900);padding:0 0 8px}
.megatop a{color:var(--color-accent-700)}
}
.brandscroll-label{padding-left:24px;padding-right:24px}
/* inner-page hero: headline first, form below, on tablet and mobile */
@media (max-width:1100px){
.pagehero.banner .pagehero-in{display:flex;flex-direction:column;gap:30px}
.pagehero.banner .pagehero-in>div:first-child{order:0}
.pagehero.banner .formwrap,.pagehero-in .formwrap{order:1;width:100%;max-width:560px}
.pagehero.banner{padding:48px 0 44px}
}
@media (max-width:767px){.pagehero.banner .formwrap,.pagehero-in .formwrap{max-width:none}.pagehero.banner{padding:34px 0 36px}}
@media (min-width:600px) and (max-width:1100px){.pagehero.banner .herostats{grid-template-columns:repeat(4,1fr)}}
/* mobile bar: two buttons now (Call + Ask CTS expert) */
.mobbar{grid-template-columns:minmax(0,.7fr) minmax(0,1.5fr);box-sizing:border-box}
.mobbar .btn{white-space:nowrap;min-width:0;padding-left:10px;padding-right:10px}
.mobbar .ctslogo{width:22px;height:22px;margin-right:8px}
@media (max-width:560px){.hdr-act .btn-primary{padding:9px 14px;font-size:14px;min-height:0}.hdr-act .btn-primary .ctslogo{width:20px;height:20px;margin-right:6px}.hdr-in{gap:12px}}
/* sector pills + separators in the clients scroller: no clipped (rectangular) edges */
.clientscroll .brandtrack li.grp,.clientscroll .brandtrack li.sep{overflow:visible;background:none!important;border:0!important;box-shadow:none!important;border-radius:0;width:auto;height:auto}
.clientscroll .brandtrack li.grp{padding:14px 8px 18px 0}
.clientscroll .brandtrack li.grp span{box-shadow:0 6px 14px rgba(224,73,42,.25)}
.clientscroll .brandtrack li.sep{width:2px;height:64px;padding:0;background:linear-gradient(180deg,transparent,var(--color-accent-400),transparent)!important}
/* ===== definition tables: soft rows with padding, rounded hover (no edge-to-edge strips) ===== */
.deftable{border-collapse:separate;border-spacing:0 6px;margin:0 0 26px;width:100%}
.deftable th,.deftable td{padding:18px 24px;border-bottom:0;background:transparent;box-shadow:inset 0 -1px 0 #eceef3;transition:background .22s,box-shadow .22s}
.deftable th{border-radius:16px 0 0 16px;width:32%;padding-right:26px;font-size:16px;color:var(--color-neutral-900)}
.deftable td{border-radius:0 16px 16px 0;color:var(--color-neutral-700);line-height:1.65}
.deftable tr:last-child th,.deftable tr:last-child td{box-shadow:none}
.deftable tr:hover th,.deftable tr:hover td{background:rgba(224,73,42,.06);box-shadow:none}
.deftable tr:hover th{color:var(--color-accent-700)}
@media (max-width:767px){
.deftable,.deftable tbody,.deftable tr,.deftable th,.deftable td{display:block;width:100%}
.deftable{border-spacing:0}
.deftable tr{margin:0 0 10px;border-radius:16px;box-shadow:inset 0 0 0 1px #eceef3;overflow:hidden}
.deftable th{border-radius:0;box-shadow:none;padding:16px 18px 4px;width:100%}
.deftable td{border-radius:0;box-shadow:none;padding:0 18px 16px}
.deftable tr:hover th,.deftable tr:hover td{background:rgba(224,73,42,.05)}
}
.deftable th,.deftable td{box-shadow:none!important;background-image:linear-gradient(#eceef3,#eceef3);background-size:100% 1px;background-position:center bottom;background-repeat:no-repeat}
.deftable tr:last-child th,.deftable tr:last-child td{background-image:none}
.deftable tr:hover th,.deftable tr:hover td{background-image:none}
/* ===== section rhythm: every section gets breathing room below its last element ===== */
.sec{padding-top:72px;padding-bottom:32px}
.solsec{padding-bottom:84px}
.solsec .row{margin-top:44px!important;gap:14px!important}
.solsec .row .btn{min-height:50px}
.alliancesec{padding-top:12px;padding-bottom:48px}
.contentsec{padding-bottom:72px}
.talksec{padding-bottom:40px}
.faqsec{padding-bottom:56px}
.calcsec{padding-bottom:72px}
.row{display:flex;flex-wrap:wrap;align-items:center}
@media (max-width:767px){
.sec{padding-top:48px;padding-bottom:20px}
.solsec{padding-bottom:56px}
.solsec .row{margin-top:32px!important}
.contentsec{padding-bottom:44px}
.alliancesec{padding-bottom:32px}
}
.sec:has(+ footer),.sec:last-of-type{padding-bottom:72px}
/* ===== right-hand tab: "Let's discuss your need" (horizontal text rotated, so the apostrophe renders correctly) ===== */
.rail-right .railbtn{display:block;position:relative;width:46px;height:236px;padding:0;border-radius:16px 0 0 16px;background:linear-gradient(180deg,#e0492a,#ff7a3c);box-shadow:-6px 10px 26px rgba(224,73,42,.35)}
.rail-right .railbtn svg{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:20px;height:20px}
.rail-right .railbtn span{position:absolute;left:50%;top:calc(50% - 14px);writing-mode:horizontal-tb;white-space:nowrap;transform:translate(-50%,-50%) rotate(-90deg);font-size:14px;font-weight:800;letter-spacing:.02em;color:#fff}
.rail-right .railbtn:hover{transform:translateX(-4px);filter:brightness(1.06)}
@media (max-width:1280px){.rail-right .railbtn{width:42px;height:222px}.rail-right .railbtn span{font-size:13px}}
/* client / brand logos keep their own colours everywhere (no grayscale, no hover reveal) */
.logos img,.clientcard img,.credlogos img,.panel .logos img,.clientscroll img,.partnerscroll img,.logostrip img{filter:none!important;opacity:1!important;mix-blend-mode:normal!important}
.logos img:hover,.clientcard:hover img{filter:none!important;opacity:1!important}
/* ghost / text-style buttons: real padding so the hover tint never hugs the text */
.btn-ghost{padding:12px 24px;min-height:46px;border-radius:999px;color:var(--color-accent-700);font-weight:700;border:1.5px solid transparent;transition:background .2s,border-color .2s,color .2s}
.btn-ghost:hover{background:var(--color-accent-100);border-color:var(--color-accent-300);color:var(--color-accent-800);text-decoration:none}
.btn-ghost:active{background:var(--color-accent-200)}
/* ===== Foundations (redesign pass): landmarks, media, accessibility ===================
Every rule here is additive. Specificity is kept at zero (:where) wherever a rule must
not beat the component styles above it. */
.skip-link{position:absolute;left:12px;top:-64px;z-index:100;background:var(--color-accent-2-800);color:#fff;padding:11px 18px;border-radius:var(--radius-md);font-weight:800;font-size:15px;text-decoration:none;transition:top .15s ease}
.skip-link:focus{top:12px;color:#fff;text-decoration:none;outline:3px solid var(--color-accent);outline-offset:2px}
main{display:block}
main:focus{outline:none}
[id]{scroll-margin-top:96px}
/* Images now carry width/height so the browser reserves their space; height:auto keeps the ratio when CSS sets only the width. */
:where(img){height:auto}
/* Text contrast: small grey labels move one step darker so they clear 4.5:1 on white and on the page tint. */
.brandscroll-label,.clientscroll .brandscroll-label{color:var(--color-neutral-700)}
.ctsfloat-cap span{color:var(--color-neutral-700)}
/* Touch targets: footer contact links get a 24px+ hit area. */
.ftr .accent a{display:inline-block;padding:4px 0;min-height:24px}
/* ===== 404 page ===== */
.notfound{padding:96px 0 112px}
.notfound .lede{max-width:34em;margin-top:16px}
.notfound-links{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:64px;padding-top:40px;border-top:1px solid var(--color-divider)}
.notfound-links ul{list-style:none;display:grid;gap:2px;margin-top:12px}
.notfound-links a{display:inline-block;padding:7px 0;font-weight:700}
@media (max-width:767px){.notfound{padding:56px 0 72px}.notfound-links{grid-template-columns:1fr;gap:28px;margin-top:40px}}
/* ===== Homepage case studies: three groups, three layouts (bento, swipe rail, wide pair) ===================
Card visuals come from the .solsec .cards rules above; this block only changes layout. */
.solgroup{margin-top:72px}
.solsec .lede + .solgroup{margin-top:8px}
.solgroup + .solgroup{padding-top:56px;border-top:1px solid var(--color-divider)}
.solgroup-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px}
.solgroup-title{font-size:clamp(25px,2.5vw,32px);line-height:1.12;color:var(--color-neutral-900);letter-spacing:-.02em}
.solgroup-hd p{margin-top:8px;max-width:44em;font-size:16.5px;line-height:1.5;color:var(--color-neutral-700)}
.solsec .cardbody h4{font-size:22px;line-height:1.15;margin-bottom:10px;color:var(--color-neutral-900)}
/* "Before you buy" checklist: a native disclosure, so the text stays in the page and works without JavaScript */
.checklist{margin:auto 0 18px}
.checklist summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-top:1px solid var(--color-divider);font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-700)}
.checklist summary::-webkit-details-marker{display:none}
.checklist summary::after{content:"";flex:none;width:8px;height:8px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.checklist[open] summary::after{transform:rotate(225deg) translateY(-1px)}
.checklist summary:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:4px}
.checklist .dots{margin:6px 0 2px}
.solsec .cards .card .checklist + .btn{margin-top:0}
/* Group 1: bento. One large card on the left (2 columns x 2 rows) and four compact cards fill the rest, no empty cell. */
.solsec .cards.sg-bento{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.sg-bento .card-feature{grid-column:1 / span 2;grid-row:1 / span 2}
.sg-bento .card-feature .washed{flex:1 1 auto;min-height:320px}
.solsec .cards.sg-bento .card-feature .washed img{height:100%}
.sg-bento .card-feature .cardbody{flex:none;padding:28px 30px 30px}
.sg-bento .card-feature h4{font-size:30px}
.sg-bento .card-feature .apps{font-size:15.5px}
.solsec .cards.sg-bento .card:not(.card-feature) .washed img{height:170px}
.sg-bento .card:not(.card-feature) .cardbody{padding:20px 20px 22px}
.sg-bento .card:not(.card-feature) h4{font-size:20px}
.sg-bento .card:not(.card-feature) .apps{font-size:13.5px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
/* Group 2: swipe rail. Native scroll snapping, arrow buttons for the mouse, arrow keys when the rail has focus. */
.solsec .sg-track{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;margin:0 -32px;padding:12px 32px 30px;scrollbar-width:thin;scrollbar-color:var(--color-neutral-400) transparent}
.solsec .sg-track:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px;border-radius:14px}
.solsec .cards.sg-rail{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(300px,340px);gap:24px;width:max-content}
.sg-rail .card{scroll-snap-align:start}
.sg-nav{display:flex;gap:10px;flex:none}
.sg-btn{width:46px;height:46px;border-radius:999px;border:1.5px solid var(--color-accent-300);background:#fff;color:var(--color-accent-700);display:grid;place-items:center;cursor:pointer;transition:background .2s ease,color .2s ease,transform .15s ease}
.sg-btn:hover:not(:disabled){background:var(--color-accent-700);border-color:var(--color-accent-700);color:#fff}
.sg-btn:active:not(:disabled){transform:scale(.95)}
.sg-btn:disabled{opacity:.4;cursor:default}
.sg-btn:focus-visible{outline:3px solid var(--color-accent-2-800);outline-offset:2px}
/* Group 3: a wide pair, image beside the copy. */
.solsec .cards.sg-duo{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.sg-duo .card{flex-direction:row}
.sg-duo .card .washed{flex:0 0 40%}
.solsec .cards.sg-duo .card .washed img{height:100%;min-height:280px}
.sg-duo .card .cardbody{min-width:0}
@media (max-width:1100px){
.solsec .cards.sg-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
.sg-bento .card-feature{grid-column:1 / -1;grid-row:auto;flex-direction:row}
.sg-bento .card-feature .washed{flex:0 0 46%;min-height:0}
.sg-bento .card-feature .cardbody{flex:1}
.solsec .cards.sg-duo{grid-template-columns:1fr}
}
@media (max-width:767px){
.solgroup{margin-top:52px}
.solgroup + .solgroup{padding-top:40px}
.solgroup-hd{flex-direction:column;align-items:flex-start;gap:16px}
.solsec .cards.sg-bento{grid-template-columns:1fr}
.sg-bento .card-feature{flex-direction:column}
.sg-bento .card-feature .washed{flex:none;min-height:0}
.solsec .cards.sg-bento .card-feature .washed img{height:220px}
.sg-bento .card-feature h4{font-size:25px}
.sg-bento .card:not(.card-feature) .apps{-webkit-line-clamp:unset;line-clamp:unset;display:block}
.solsec .sg-track{margin:0 -20px;padding:12px 20px 26px}
.solsec .cards.sg-rail{grid-auto-columns:min(84vw,340px)}
.sg-duo .card{flex-direction:column}
.sg-duo .card .washed{flex:none}
.solsec .cards.sg-duo .card .washed img{height:210px;min-height:0}
}
@media (prefers-reduced-motion:reduce){.solsec .sg-track{scroll-behavior:auto}.checklist summary::after,.sg-btn{transition:none}}
.solsec .sg-track{scroll-padding:0 32px}
@media (max-width:767px){.solsec .sg-track{scroll-padding:0 20px}}
/* ===== Long-read: product copy as one article with a sticky index ===================================== */
.longread{padding:96px 0 40px}
.longread-grid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:72px;align-items:start}
.longread-toc{position:sticky;top:108px}
.longread-toc p{margin:0 0 14px;font-size:12.5px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--color-neutral-700)}
.longread-toc ol{list-style:none;display:grid;border-left:2px solid var(--color-divider)}
.longread-toc a{display:block;margin-left:-2px;padding:10px 16px;border-left:2px solid transparent;font-size:15px;font-weight:700;line-height:1.35;color:var(--color-neutral-800);transition:color .2s ease,border-color .2s ease,background-color .2s ease}
.longread-toc a:hover{color:var(--color-accent-700);text-decoration:none;background:var(--color-accent-100)}
.longread-toc a[aria-current=true]{color:var(--color-accent-700);border-left-color:var(--color-accent);background:var(--color-accent-100)}
.lr-article + .lr-article,.lr-article + .lr-figure,.lr-figure + .lr-article{margin-top:64px}
.lr-article h2{font-size:clamp(27px,2.7vw,36px)!important;line-height:1.12;margin:0 0 20px!important;padding:0!important;text-wrap:balance;color:var(--color-neutral-900)}
.lr-article h2::after{content:none!important}
.lr-article .prose{max-width:46rem}
.lr-article .prose p{font-size:17px;line-height:1.75;color:var(--color-neutral-700)}
.lr-article .prose strong{color:var(--color-neutral-900)}
.lr-article .prose h3{font-size:23px;margin:34px 0 12px;color:var(--color-neutral-900)}
.lr-figure{margin-left:0;margin-right:0}
.lr-figure img{display:block;width:100%;max-height:440px;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
@media (max-width:1100px){.longread-grid{grid-template-columns:1fr;gap:36px}.longread-toc{position:static}.longread-toc ol{border-left:0;display:flex;flex-wrap:wrap;gap:8px}.longread-toc a{margin:0;padding:9px 16px;border:1.5px solid var(--color-neutral-300);border-radius:999px;font-size:14px}.longread-toc a[aria-current=true]{border-color:var(--color-accent)}}
@media (max-width:767px){.longread{padding:56px 0 24px}.lr-article + .lr-article,.lr-article + .lr-figure,.lr-figure + .lr-article{margin-top:44px}.lr-figure img{max-height:260px}}
/* ===== Industries: tabs with a real photo and the solutions used in that sector ======================= */
.indtabs{display:grid;grid-template-columns:290px minmax(0,1fr);gap:40px;align-items:start}
.indtabs:not(.is-tabs){grid-template-columns:1fr}
.indtabs:not(.is-tabs) .indtabs-list{display:none}
.indtabs:not(.is-tabs) .indtabs-panels{display:grid;gap:28px}
.indtabs-list{display:grid;gap:6px}
.indtabs-list [role=tab]{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:17px 20px;border:0;border-radius:var(--radius-md);background:transparent;font-family:inherit;font-size:18px;font-weight:800;line-height:1.25;text-align:left;color:var(--color-neutral-800);cursor:pointer;transition:background-color .2s ease,color .2s ease}
.indtabs-list [role=tab]::after{content:"";flex:none;width:8px;height:8px;border-top:2.5px solid currentColor;border-right:2.5px solid currentColor;transform:rotate(45deg);opacity:0;transition:opacity .2s ease,transform .2s ease}
.indtabs-list [role=tab]:hover{background:var(--color-accent-100);color:var(--color-accent-800)}
.indtabs-list [role=tab][aria-selected=true]{background:var(--color-accent-2-800);color:#fff}
.indtabs-list [role=tab][aria-selected=true]::after{opacity:1}
.indtabs-list [role=tab]:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}
.indpanel{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);overflow:hidden;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--color-neutral-300);box-shadow:var(--shadow-sm)}
.indpanel[hidden]{display:none}
.indpanel img{display:block;width:100%;height:100%;min-height:360px;object-fit:cover}
.indpanel-copy{display:flex;flex-direction:column;padding:34px 36px 36px}
.indpanel-copy h3{font-size:28px;margin-bottom:12px;color:var(--color-neutral-900)}
.indpanel-copy p{font-size:17px;line-height:1.6;color:var(--color-neutral-700)}
.indpanel-copy .indlinks-title{margin-top:auto;padding-top:26px;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-700)}
.indlinks{list-style:none;display:grid;margin-top:8px}
.indlinks a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--color-divider);font-size:16.5px;font-weight:800;color:var(--color-neutral-900);transition:color .2s ease}
.indlinks li:last-child a{border-bottom:0}
.indlinks a::after{content:"\2192";color:var(--color-accent-700);transition:transform .2s ease}
.indlinks a:hover{color:var(--color-accent-700);text-decoration:none}
.indlinks a:hover::after{transform:translateX(4px)}
@media (max-width:1000px){
.indtabs{grid-template-columns:1fr;gap:20px}
.indtabs-list{display:flex;gap:8px;overflow-x:auto;margin:0 -20px;padding:2px 20px 8px;scrollbar-width:none}
.indtabs-list::-webkit-scrollbar{display:none}
.indtabs-list [role=tab]{width:auto;flex:none;padding:12px 18px;border:1.5px solid var(--color-neutral-300);border-radius:999px;font-size:15.5px;white-space:nowrap}
.indtabs-list [role=tab]::after{display:none}
.indtabs-list [role=tab][aria-selected=true]{border-color:var(--color-accent-2-800)}
}
@media (max-width:767px){.indpanel{grid-template-columns:1fr}.indpanel img{min-height:0;height:210px}.indpanel-copy{padding:24px 22px 26px}.indpanel-copy h3{font-size:24px}}
@media (prefers-reduced-motion:reduce){.indtabs-list [role=tab],.indtabs-list [role=tab]::after,.indlinks a,.indlinks a::after{transition:none}}
/* ===== Contrast pass =========================================================================
Orange stays the single accent. Anything that carries text on it is now dark enough for AA
(white on the old #e0492a to #ff7a3c gradient measured 4.1:1 at best and 2.6:1 at the light end). */
:root{--cta-from:#bf3a1d;--cta-to:#d2431f}
.btn-primary,body:has(.hero-video) .btn-primary{background:linear-gradient(135deg,var(--cta-from),var(--cta-to))}
.btn-primary:hover,body:has(.hero-video) .btn-primary:hover{background:linear-gradient(135deg,#a93318,var(--cta-from))}
.solsec .cards .btn-secondary:hover,.sec .cards .btn-secondary:hover,.faqs details[open] summary::after{background:linear-gradient(135deg,var(--cta-from),var(--cta-to));color:#fff}
.rail-right .railbtn{background:linear-gradient(180deg,var(--cta-from),var(--cta-to))}
/* Numerals and labels that were filled with a fading gradient become solid brand colour (readable, and calmer) */
.gradtext,.stackbig b,.whycard2 b,.bigstat b,.faqs summary::before{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--color-accent-700);-webkit-text-fill-color:currentColor}
.quotes blockquote::before,.quotesec .quotes blockquote::before{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--color-accent-200);-webkit-text-fill-color:currentColor}
/* Form text on light panels */
.input::placeholder,textarea.input::placeholder{color:var(--color-neutral-700);opacity:1}
.talkform .opt{color:var(--color-neutral-700)}
.cselect-btn.is-placeholder .cselect-txt,.cselect-opt.is-placeholder{color:var(--color-neutral-700);opacity:1}
/* ===== Chatbot in the brand palette (navy structure, orange accent) - replaces the off-brand teal/blue ===== */
.fabbtn-bot{background:linear-gradient(135deg,var(--color-accent-2-600),var(--color-accent-2-800));box-shadow:0 0 0 3px #fff,0 10px 26px rgba(20,33,58,.42)}
.fabbtn-bot::before{border-color:rgba(224,73,42,.6)}
.fabbtn-bot .fabdot{background:var(--color-accent);border-color:#fff}
.bothd{background:linear-gradient(135deg,var(--color-accent-2-800),var(--color-accent-2-600))}
.botavatar{background:linear-gradient(135deg,var(--cta-from),var(--cta-to))}
.botmsg a{color:var(--color-accent-700)}
.botmsg.me{background:var(--color-accent-2-700);border-color:transparent;color:#fff}
.botchip{border-color:var(--color-accent-300);color:var(--color-accent-700)}
.botchip:hover{background:var(--color-accent-700);border-color:var(--color-accent-700);color:#fff}
.botform input:focus{outline-color:var(--color-accent-2-600)}
.botform button{background:linear-gradient(135deg,var(--cta-from),var(--cta-to))}
/* ===== Offering pages: "At a glance" band under the hero ======================================= */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.glance{padding:0;background:#fff;border-bottom:1px solid var(--color-divider)}
.glance-grid{display:grid;grid-template-columns:1.05fr 1.15fr 1fr;gap:0;align-items:stretch}
.glance-grid>div{padding:34px 36px 36px 0}
.glance-grid>div + div{padding-left:36px;border-left:1px solid var(--color-divider)}
.glance h3{margin:0 0 16px;font-size:13px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-700)}
.glance .chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.glance .chips li{padding:8px 14px;border-radius:999px;border:1.5px solid var(--color-neutral-300);background:var(--color-neutral-200);font-size:14.5px;font-weight:700;color:var(--color-neutral-800)}
.glance .dots{margin:0;gap:9px}
.glance .dots li{font-size:15.5px}
.glance-act{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:18px}
.glance-act p{font-size:16px;line-height:1.55;color:var(--color-neutral-700);max-width:26em}
@media (max-width:1100px){.glance-grid{grid-template-columns:1fr 1fr}.glance-grid>div,.glance-grid>div + div{padding:28px 0;border-left:0}.glance-grid>div + div{padding-left:0}.glance-check{padding-left:32px!important;border-left:1px solid var(--color-divider)!important}.glance-act{grid-column:1 / -1;border-top:1px solid var(--color-divider);flex-direction:row!important;align-items:center;justify-content:space-between;gap:24px}}
@media (max-width:767px){.glance-grid{grid-template-columns:1fr}.glance-check{padding-left:0!important;border-left:0!important;border-top:1px solid var(--color-divider)}.glance-grid>div,.glance-grid>div + div{padding:24px 0}.glance-act{flex-direction:column!important;align-items:flex-start!important;gap:16px}}
/* Long text beside a single photo: the photo stays in view while the copy scrolls (offering pages) */
@media (min-width:1101px){.sec .split>.washed:not(.rise),.sec .split>.washed{align-self:start}.pagehero ~ .sec .split{align-items:start}.pagehero ~ .sec .split>.washed{position:sticky;top:104px}}
/* ===== Gallery image viewer (assets/js/lightbox.js) ============================================== */
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#fff;overflow:hidden}
.lb:not([open]){display:none}
.lb::backdrop{background:rgba(8,15,30,.9)}
.lb-fig{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:64px 72px 28px;pointer-events:none}
.lb-img{max-width:min(94vw,1500px);max-height:calc(100vh - 150px);width:auto;height:auto;object-fit:contain;border-radius:var(--radius-md);box-shadow:0 24px 70px rgba(0,0,0,.5);pointer-events:auto}
.lb-cap{max-width:min(90vw,900px);font-size:15px;line-height:1.4;text-align:center;color:rgba(255,255,255,.88);white-space:pre-line}
.lb-btn{position:absolute;z-index:2;display:grid;place-items:center;width:48px;height:48px;border:1.5px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(20,33,58,.7);color:#fff;cursor:pointer;transition:background-color .2s ease,border-color .2s ease}
.lb-btn:hover{background:var(--color-accent-700);border-color:var(--color-accent-700)}
.lb-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.lb-close{top:16px;right:16px}
.lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.lb-next{right:16px;top:50%;transform:translateY(-50%)}
@media (max-width:767px){.lb-fig{padding:64px 12px 20px}.lb-prev,.lb-next{top:auto;bottom:16px;transform:none}.lb-prev{left:calc(50% - 58px)}.lb-next{right:calc(50% - 58px)}.lb-cap{margin-bottom:56px}}
@media (prefers-reduced-motion:no-preference){.lb[open] .lb-img{animation:lbin .22s ease both}}
@keyframes lbin{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lb-btn{transition:none}}
/* Escape closes the mega menu while the Solutions link keeps focus (see includes/footer.php) */
.hasmega.mega-off .mega{display:none!important}
/* Phones: the "What is CTS?" video preview shrinks to a 62px round thumbnail so it no longer covers form fields */
@media (max-width:767px){
.ctsfloat{width:auto;left:12px;bottom:92px;background:transparent;border:0;box-shadow:none;border-radius:999px}
.ctsfloat-btn{width:62px;height:62px;border:3px solid #fff;border-radius:999px;box-shadow:0 8px 22px rgba(8,15,30,.35);overflow:hidden}
.ctsfloat-img{width:100%;height:100%;aspect-ratio:1/1}
.ctsfloat-cap{display:none}
.ctsfloat .ctsplay{width:30px;height:30px;box-shadow:none}
.ctsfloat-x{top:-8px;right:-8px}
}
/* ===== Mobile menu: the three solution groups fold up, and the floating widgets step aside while it is open ===== */
@media (max-width:1180px){
.megacol .megah[role=button]{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;min-height:44px;margin-bottom:0;padding:10px 0}
.megacol .megah[role=button]::after{content:"";flex:none;width:9px;height:9px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.megacol .megah[aria-expanded=true]::after{transform:rotate(225deg) translateY(-1px)}
.megacol .megah[role=button]:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:4px}
.megacol.is-fold:not(.open) ul{display:none}
.megacol.is-fold.open ul{margin-top:8px;margin-bottom:12px}
body:has(.mainnav.open) .ctsfloat,body:has(.mainnav.open) .fab,body:has(.mainnav.open) .mobbar{display:none}
}
@media (prefers-reduced-motion:reduce){.megacol .megah[role=button]::after{transition:none}}
/* Links inside running text are underlined so they do not rely on colour alone */
.prose a:not(.btn),.lr-article a:not(.btn),.contentsec a:not(.btn),.faqs p a:not(.btn){text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.prose a:not(.btn):hover,.lr-article a:not(.btn):hover,.contentsec a:not(.btn):hover,.faqs p a:not(.btn):hover{text-decoration-thickness:2.5px}
/* Header and footer-credit links get a 24px+ hit area without moving anything (padding is cancelled by the negative margin) */
@media (min-width:1181px){
.mainnav > a,.hasmega > a{padding:6px 0;margin-top:-6px;margin-bottom:-6px}
.mainnav > a::after,.hasmega > a::after{bottom:0}
}
.credit,.credit a{min-height:24px}
.credit a{display:inline-flex;align-items:center}
.pagehero.banner .tag-accent-2,.hero-video .tag-accent-2{background:var(--color-accent-600);color:#fff}