/* ==========================================================================
KOLLECTA — Dark edition
Brand & Voice Playbook v3.0. Black-dominant per client direction:
~70% Best Black base, ~30% white structure + purple / lime / yellow accents.
========================================================================== */
/* --------------------------------------------------------------------------
01. TOKENS
-------------------------------------------------------------------------- */
:root{
/* Primary */
--black:#070707;
--white:#FDFDFD;
/* Base scale (the 70%) */
--bg:#050505;
--bg-2:#0A0A0A;
--panel:#0D0D0D;
--panel-2:#131313;
--panel-3:#191919;
--line:rgba(253,253,253,.09);
--line-2:rgba(253,253,253,.17);
--line-3:rgba(253,253,253,.28);
/* Type (part of the 30%) */
--txt:#F6F6F4;
--mute:rgba(246,246,244,.62);
--mute-2:rgba(246,246,244,.56); /* .44 failed 4.5:1 on the black base */
/* Secondary brand accents.
Blue is now the primary accent site-wide (client: "more blue on entire
page"). --purple/--purple-soft are kept defined but no longer referenced,
so the accent can be dialed back toward purple in one place if needed. */
--blue:#1B62D6; /* playbook sapphire — primary accent */
--blue-soft:#4D8BF0;
--purple:#8F00EE;
--purple-soft:#B65CFF;
--lime:#C6FF00;
--lime-deep:#B2E600;
--yellow:#F4F06A;
/* Tertiary, functional, product UI only */
--emerald:#2E9357;
--red:#D11933;
--amber:#E8A33D;
--sapphire:#1B62D6;
--stardust:#A09F9F;
--radius:10px;
--radius-sm:6px;
--radius-lg:16px;
--maxw:1728px;
--gutter:34px;
--ease:cubic-bezier(.22,.61,.36,1);
--ease-out:cubic-bezier(.16,1,.3,1);
--ease-io:cubic-bezier(.65,.05,.36,1);
}
/* --------------------------------------------------------------------------
02. RESET & BASE
-------------------------------------------------------------------------- */
.page-tmpl,.page-tmpl *,.page-tmpl *::before,.page-tmpl *::after{box-sizing:border-box;margin:0;padding:0}
/* overflow-x:clip, not hidden: `hidden` on html/body makes them scroll
containers, which breaks the position:sticky hero stage. `clip` contains
the pre-reveal translateX(38px) of data-reveal="right" elements without
that side effect. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px;background:var(--bg);overflow-x:clip;scrollbar-gutter:stable}
body{
font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
font-size:16px;line-height:1.5;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
overflow-x:clip;
}
/* KDC_DIVI_CHROME_TEMPLATE keeps a real Divi Builder layout under our nav/
footer chrome; that layout sets its own colors, so it must not inherit
the dark canvas below. */
body:not(.kollecta-chrome-only){background:var(--bg);color:var(--txt)}
body.is-loading{overflow:hidden;height:100vh}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input{font-family:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--lime);color:var(--black)}
h1,h2,h3,h4,h5{
font-family:"Red Hat Display",system-ui,sans-serif;
font-weight:800;line-height:1.05;letter-spacing:-.025em;color:var(--txt);
}
/* balance avoids a lone orphan word stranding itself on its own second
line when a heading wraps - the browser picks a more even break instead
of greedily filling line 1. */
h2{font-size:clamp(31px,4.2vw,58px);text-wrap:balance}
h3{font-size:clamp(20px,2.1vw,27px);line-height:1.18}
p{text-wrap:pretty}
/* Film grain: the awwwards-standard way to stop a flat black reading as dead */
.grain{
position:fixed;inset:-120%;z-index:1;pointer-events:none;opacity:.05;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
animation:grainshift 7s steps(6) infinite;
}
@keyframes grainshift{
0%{transform:translate(0,0)}20%{transform:translate(-6%,3%)}40%{transform:translate(4%,-5%)}
60%{transform:translate(-3%,6%)}80%{transform:translate(5%,2%)}100%{transform:translate(0,0)}
}
/* --------------------------------------------------------------------------
03. LAYOUT PRIMITIVES
-------------------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2}
.section{padding:clamp(84px,10vw,150px) 0;position:relative}
.section--panel{background:var(--bg-2)}
.section--purple{background:var(--blue)}
.section--purple h2,.section--purple h3{color:var(--white)}
.sec-head{max-width:820px;position:relative}
.sec-head.center{margin:0 auto;text-align:center}
/* Not p-tag-qualified: an intro field can now be wysiwyg (multiple
paragraphs), rendered as -
color/size/line-height still reach every inner through inheritance. */
.sec-head .lede{margin-top:22px;font-size:clamp(16px,1.35vw,18px);color:var(--mute);line-height:1.62}
.sec-head .lede > * + *{margin-top:1em}
.section--purple .sec-head .lede{color:rgba(253,253,253,.84)}
/* These two headings' copy runs long enough that the default 820px measure
wraps them to 3 lines; widen just these sections so they hold 2. */
#approach .sec-head{max-width:1180px}
/* The sitewide h2 clamp tops out at 58px; at that size this heading's
admin-edited copy ("Your Collection Agency Represents Your Brand" and
similar) needs more width than even the widened 1180px measure above
gives it, so it wraps into a long line plus a single orphaned word -
worse than the un-widened default, because it's centered. Cap the size
here so typical edits of this heading hold one line down to ~1280px
viewports; text-wrap:balance (set on the base h2 rule) is not relied on
alone since it is unsupported in some browsers still in use. */
#approach .sec-head h2{font-size:clamp(28px,3.4vw,42px)}
#why .sec-head{max-width:960px}
/* "Explore related content by topic" needs 836px at this font; 820px was
16px short and wrapped it to 2 lines for one straggling word. */
.blog-topics .sec-head{max-width:900px}
/* Service/Industry section headings are admin-editable and routinely run
long enough to wrap the 820px measure to 3-4 lines; widen the column and
trim the top of the size clamp slightly so even the longest current
titles hold 2 lines. */
.page-service .sec-head,.page-industry .sec-head{max-width:1200px}
/* Trimmed further than the sitewide h2: these section headings are
admin-editable and often long enough that even the balanced 2-line wrap
above still leaves a short, lonely-looking second line; the smaller cap
holds more of the current titles to one line outright. */
.page-service .sec-head h2,.page-industry .sec-head h2{font-size:clamp(28px,3.8vw,48px)}
/* Section index, a small awwwards habit that adds structure */
.sec-index{
position:absolute;top:4px;right:0;font-size:12px;font-weight:700;
letter-spacing:.14em;color:var(--mute-2);
}
.eyebrow{
display:inline-flex;align-items:center;gap:11px;
font-weight:700;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--txt);margin-bottom:24px;
}
.eyebrow.center{justify-content:center}
/* Lime highlight behind a single word. Black type on lime, never white. */
.hl{position:relative;display:inline-block;color:var(--black);padding:0 .16em;isolation:isolate}
.hl::before{
content:"";position:absolute;inset:.1em -.02em .06em;background:var(--lime);z-index:-1;
transform:scaleX(0);transform-origin:left center;transition:transform .75s var(--ease-out) .25s;
}
.is-in .hl::before,.hl.is-in::before{transform:scaleX(1)}
.hl--yellow::before{background:var(--yellow)}
/* --------------------------------------------------------------------------
04. BUTTONS
-------------------------------------------------------------------------- */
.btn{
position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
padding:16px 28px;border-radius:var(--radius);
font-weight:700;font-size:15px;letter-spacing:-.01em;
border:1.5px solid transparent;overflow:hidden;isolation:isolate;
transition:color .25s var(--ease),border-color .25s var(--ease),transform .4s var(--ease-out);
will-change:transform;
}
.btn .arrow{transition:transform .3s var(--ease-out)}
.btn:hover .arrow{transform:translateX(4px)}
/* Wipe fill on hover */
.btn::before{
content:"";position:absolute;inset:0;z-index:-1;transform:scaleY(0);transform-origin:bottom;
transition:transform .42s var(--ease-out);
}
.btn:hover::before{transform:scaleY(1)}
.btn--primary{background:var(--lime);color:var(--black);border-color:var(--lime)}
.btn--primary::before{background:var(--white)}
.btn--primary:hover{border-color:var(--white)}
.btn--secondary{border-color:var(--line-3);color:var(--txt);background:transparent}
.btn--secondary::before{background:var(--white)}
.btn--secondary:hover{color:var(--black);border-color:var(--white)}
.btn--dark{background:transparent;color:var(--txt);border-color:var(--line-3)}
.btn--dark::before{background:var(--blue)}
.btn--dark:hover{color:var(--white);border-color:var(--blue)}
.btn--text{padding:0;border:0;color:var(--txt);font-size:15px;font-weight:700;border-radius:0;overflow:visible}
.btn--text::before{display:none}
.btn--text:hover{color:var(--lime)}
.btn--sm{padding:11px 19px;font-size:13.5px}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{
outline:2px solid var(--lime);outline-offset:3px;
}
/* --------------------------------------------------------------------------
05. PRELOADER
-------------------------------------------------------------------------- */
#loader{
position:fixed;inset:0;z-index:9000;background:var(--black);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
}
#loader.is-done{transform:translateY(-100%);transition:transform 1.05s var(--ease-io) .15s}
.loader-mark{overflow:hidden}
.loader-mark img{height:34px;filter:invert(1);transform:translateY(110%);transition:transform .9s var(--ease-out) .1s}
#loader.is-ready .loader-mark img{transform:none}
.loader-bar{width:min(280px,52vw);height:2px;background:rgba(253,253,253,.14);overflow:hidden}
.loader-bar i{display:block;height:100%;width:0;background:var(--lime)}
.loader-pct{
font-family:"Red Hat Display",sans-serif;font-weight:900;font-size:13px;
letter-spacing:.16em;color:var(--mute);font-variant-numeric:tabular-nums;
}
.loader-tag{
position:absolute;bottom:38px;font-size:11.5px;font-weight:700;letter-spacing:.2em;
text-transform:uppercase;color:var(--mute-2);
}
/* --------------------------------------------------------------------------
07. SCROLL PROGRESS + NAV
-------------------------------------------------------------------------- */
#progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--lime);z-index:200}
.nav{
position:fixed;top:14px;left:0;right:0;z-index:150;
transition:transform .45s var(--ease),top .4s var(--ease);
}
/* WP CTA Bar. Gated on the bar's own DOM presence (:has()) rather than the
plugin's JS-driven body.cta-has-top/--cta-h, because two independent
settings combinations were found where that JS never adds the class -
or not soon enough to matter:
(1) the plugin's own frontend.css hardcodes
#wp-cta-bar-wrap.cta-position-top{position:relative} (id+class),
which beats its own settings-driven inline rule (a bare
#wp-cta-bar-wrap, id only) meant to switch it to fixed when Sticky
on Scroll is on - the toggle silently loses on specificity;
(2) "Show bar after scroll" with Scroll Offset set to exactly 0 hits a
`parseInt(cfg.scrollOffset,10) || 300` fallback in the plugin's JS -
0 is falsy, so it silently requires 300px of real scroll before
ever measuring the bar, on every load, regardless of that setting.
Matching on the bar's own markup sidesteps both: it's correct the
instant the bar exists, independent of whichever of those quirks the
current settings happen to trigger. --cta-h is still used first when
the plugin's JS does manage to set it (a precise, live-measured
height); the pixel fallback matches this bar's current font-size +
padding and only drifts if that config changes without a matching edit
here. :not(.cta-dismissed) drops the offset the instant the bar's own
close button is clicked, same as the plugin's intended behaviour.
.is-scroll-hidden (nav.js/main.js) is this theme's own addition, not the
plugin's: the header pill stays visible at all times per kollecta.ai,
but the bar itself hides once the page leaves the very top and only
reappears back at the top - so the header/progress/drawer offsets drop
the instant it does, same as a genuine dismiss, while the bar's own
position:fixed is untouched (it just slides off-screen, ready to slide
back). !important on the bar's own transform matches the specificity
the plugin's .cta-bar-visible rule needs beating - see its own CSS. */
body:has(#wp-cta-bar-wrap.cta-position-top:not(.cta-dismissed)) #wp-cta-bar-wrap.cta-position-top{position:fixed}
body:has(#wp-cta-bar-wrap.cta-position-bottom:not(.cta-dismissed)) #wp-cta-bar-wrap.cta-position-bottom{position:fixed}
body:has(#wp-cta-bar-wrap.cta-position-top:not(.cta-dismissed):not(.is-scroll-hidden)) #progress{top:var(--cta-h,64px)}
body:has(#wp-cta-bar-wrap.cta-position-top:not(.cta-dismissed):not(.is-scroll-hidden)) .nav{top:calc(14px + var(--cta-h,64px))}
body:has(#wp-cta-bar-wrap.cta-position-top:not(.cta-dismissed):not(.is-scroll-hidden)) .mobile-menu{inset:calc(90px + var(--cta-h,64px)) 0 0}
#wp-cta-bar-wrap.is-scroll-hidden{transform:translateY(-110%)!important;pointer-events:none!important}
/* Floating white pill (ref: Farmio header) */
.nav-inner{
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
max-width:min(var(--maxw),calc(100% - 2*var(--gutter)));margin:0 auto;
background:#fff;border-radius:999px;padding:10px 12px 10px 20px;
box-shadow:0 12px 34px rgba(0,0,0,.30);
transition:box-shadow .3s var(--ease);
}
.nav.is-stuck .nav-inner{box-shadow:0 16px 40px rgba(0,0,0,.42)}
.brand{display:flex;align-items:center;gap:11px;flex:none;justify-self:start}
.brand img{height:22px;width:auto;filter:none}
.nav-links{display:flex;align-items:center;gap:2px;justify-self:center}
.nav-item{position:relative}
.nav-item>a{
display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;
font-size:14px;font-weight:600;color:#242926;transition:color .2s,background .2s;
}
.nav-item>a:hover,.nav-item>a:focus-visible{color:var(--bg);background:rgba(0,0,0,.06)}
.nav-item>a.is-active{color:var(--bg)}
.nav-item .caret{width:9px;height:9px;transition:transform .25s var(--ease)}
.nav-item:hover .caret,.nav-item:focus-within .caret{transform:rotate(180deg)}
.dropdown{
position:absolute;top:calc(100% + 16px);left:0;min-width:300px;
background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:var(--radius);
box-shadow:0 30px 70px rgba(0,0,0,.28);padding:10px;
opacity:0;visibility:hidden;transform:translateY(-8px);
transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s;
}
.dropdown::before{content:"";position:absolute;top:-18px;left:0;right:0;height:18px}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:block;padding:11px 15px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;color:#4a524d;transition:.18s}
.dropdown a small{display:block;font-weight:500;font-size:12.5px;color:#8b938d;margin-top:3px}
.dropdown a:hover{background:rgba(0,0,0,.05);color:var(--bg)}
.dropdown a:hover small{color:#5a625c}
.dropdown.cols{min-width:560px;display:grid;grid-template-columns:1fr 1fr;left:auto;right:0}
/* A dropdown item that is itself a parent (e.g. Industries > Healthcare >
its own sub-industries): stays a normal link to its own page, and opens
a nested flyout listing its children on hover/focus. Positioned
out-of-flow (absolute) so it never stretches the parent .dropdown grid's
row height the way an always-visible inline sub-list would. */
.nav-subitem{position:relative}
.nav-subitem>a{display:flex;align-items:center;justify-content:space-between;gap:10px}
/* Higher specificity than .nav-item:hover/:focus-within .caret (which would
otherwise win and rotate this the same 180deg as the top-level dropdown's
own caret, since it's a descendant of that hovered/focused .nav-item too):
this one always points right, a static "opens sideways" affordance rather
than an open/closed toggle indicator. */
.nav-item .nav-subitem>a .caret{transform:rotate(-90deg)}
.subdropdown{
position:absolute;top:-10px;left:calc(100% + 6px);min-width:240px;
background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:var(--radius);
box-shadow:0 30px 70px rgba(0,0,0,.28);padding:10px;
opacity:0;visibility:hidden;transform:translateX(-8px);
transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.nav-subitem:hover .subdropdown,.nav-subitem:focus-within .subdropdown{opacity:1;visibility:visible;transform:translateX(0)}
.nav-actions{display:flex;align-items:center;gap:10px;flex:none;justify-self:end;grid-column:3}
/* Lime pill CTA (ref: Farmio "Contact us") */
.btn--pill{
display:inline-flex;align-items:center;gap:8px;
background:var(--lime);color:var(--bg);
padding:11px 12px 11px 20px;border-radius:999px;
font-size:14px;font-weight:700;line-height:1;
transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s var(--ease);
}
.btn--pill .arw{width:16px;height:16px;flex:none}
.btn--pill:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(198,255,0,.32);filter:brightness(1.04)}
.nav-burger{display:none;width:44px;height:44px;border-radius:var(--radius-sm);align-items:center;justify-content:center}
.nav-burger span{display:block;width:20px;height:2px;background:var(--bg);position:relative;transition:.3s var(--ease)}
.nav-burger span::before,.nav-burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--bg);transition:.3s var(--ease)}
.nav-burger span::before{top:-6px}.nav-burger span::after{top:6px}
.nav-burger.is-open span{background:transparent}
.nav-burger.is-open span::before{top:0;transform:rotate(45deg)}
.nav-burger.is-open span::after{top:0;transform:rotate(-45deg)}
.mobile-menu{
position:fixed;inset:90px 0 0;background:var(--bg);z-index:140;
padding:26px var(--gutter) 48px;overflow-y:auto;
transform:translateY(-8px);opacity:0;visibility:hidden;transition:.3s var(--ease);
}
.mobile-menu.is-open{transform:none;opacity:1;visibility:visible}
.mobile-menu details{border-bottom:1px solid var(--line)}
.mobile-menu summary{padding:17px 2px;font-weight:700;font-size:17px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;color:var(--txt)}
.mobile-menu summary::-webkit-details-marker{display:none}
.mobile-menu details a{display:block;padding:10px 2px 10px 16px;font-size:15px;color:var(--mute)}
/* A nested details (e.g. Healthcare's own sub-industries) inside a
top-level one: no border of its own (the outer details already has
one), and both its summary and links get extra indent so the two
nesting levels stay visually distinct. */
.mobile-menu details .nav-subitem-mobile{border-bottom:none;padding-left:16px}
.mobile-menu details .nav-subitem-mobile summary{padding:13px 2px;font-weight:600;font-size:15px;color:var(--mute)}
.mobile-menu details .nav-subitem-mobile a{padding-left:16px;font-size:14px}
.mobile-menu>a:not(.btn){display:block;padding:17px 2px;font-weight:700;font-size:17px;border-bottom:1px solid var(--line);color:var(--txt)}
.mobile-menu .btn{width:100%;margin-top:26px}
/* --------------------------------------------------------------------------
08. REVEALS
-------------------------------------------------------------------------- */
html.js [data-reveal]{
opacity:0;transform:translateY(30px);
transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
transition-delay:var(--d,0ms);
}
html.js [data-reveal].is-in{opacity:1;transform:none}
html.js [data-reveal="fade"]{transform:none}
html.js [data-reveal="left"]{transform:translateX(-38px)}
html.js [data-reveal="right"]{transform:translateX(38px)}
html.js [data-reveal="scale"]{transform:scale(.95)}
html.js [data-reveal="clip"]{opacity:1;clip-path:inset(0 100% 0 0);transform:none;transition:clip-path 1.1s var(--ease-out)}
html.js [data-reveal="clip"].is-in{clip-path:inset(0 0 0 0)}
/* Word-by-word headline reveal */
.split-line{display:block;overflow:hidden}
.split-line>span{display:inline-block;transform:translateY(110%);transition:transform .95s var(--ease-out)}
.is-in .split-line>span{transform:none}
.is-in .split-line:nth-child(2)>span{transition-delay:.09s}
.is-in .split-line:nth-child(3)>span{transition-delay:.18s}
@media (prefers-reduced-motion:reduce){
*{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
html.js [data-reveal]{opacity:1 !important;transform:none !important;clip-path:none !important}
.split-line>span{transform:none !important}
.grain{display:none}
}
/* ==========================================================================
09. HERO - VIDEO STACK
Three video panels pinned to the viewport. Later panels rise from the
bottom to cover the one before, and the copy changes with each. The JS
driver (main.js block 3) sets transform + --dim per scroll progress.
========================================================================== */
.hero{position:relative;height:340vh;background:var(--bg)}
.hero-pin{position:sticky;top:0;height:100svh;height:100vh;overflow:hidden}
.hero-slide{
position:absolute;inset:0;z-index:1;overflow:hidden;
background:var(--bg);transform-origin:50% 50%;will-change:transform;
}
.hero-slide[data-slide="1"]{z-index:2}
.hero-slide[data-slide="2"]{z-index:3}
/* Incoming panels wait below the fold; the driver raises them. */
html.js .hero-slide[data-slide="1"],
html.js .hero-slide[data-slide="2"]{transform:translateY(100%)}
.hero-media{position:absolute;inset:0}
/* Cinematic "plate": the graded fallback shown when no footage is present,
and the tint that sits behind the when it is. */
.hero-slide::before{
content:"";position:absolute;inset:0;z-index:0;
background:var(--plate);background-size:cover;background-position:center;
}
.plate--warm{--plate:radial-gradient(120% 92% at 68% 18%,#5c4a28 0%,#2a2416 46%,#0b0a06 100%)}
.plate--cold{--plate:radial-gradient(120% 92% at 60% 28%,#274b57 0%,#153039 46%,#070f12 100%)}
.plate--night{--plate:radial-gradient(125% 100% at 50% 18%,#2b3050 0%,#141a2f 46%,#06070f 100%)}
.hero-vid{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;background:transparent}
/* Legibility gradient (top + bottom) over the footage. */
.hero-shade{position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(180deg,rgba(5,5,5,.52) 0%,rgba(5,5,5,.14) 26%,rgba(5,5,5,.30) 60%,rgba(5,5,5,.82) 100%);
}
/* Driver-controlled darken of a panel as the next one covers it. */
.hero-slide::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:#050505;opacity:var(--dim,0)}
/* --- Copy layer: pill + title + CTAs (left), description (right), and a
compliance row pinned to the bottom (ref: vidmo layout). --- */
.hero-face{
position:absolute;inset:0;z-index:4;
max-width:1440px;margin:0 auto;
padding:clamp(92px,12vh,132px) var(--gutter) clamp(30px,5vh,52px);
display:flex;flex-direction:column;justify-content:flex-end;
pointer-events:none;
}
.hero-face > *{pointer-events:auto}
.hero-main{
display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(28px,5vw,80px);
align-items:end;margin-bottom:clamp(26px,5vh,58px);
}
.hero-lead{align-self:end;min-width:0}
.hero-pill{
display:inline-flex;align-items:center;gap:9px;margin-bottom:22px;max-width:100%;
padding:8px 15px;border-radius:999px;
background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--txt);
}
.hero-title{
font-family:"Red Hat Display",sans-serif;font-weight:900;text-transform:uppercase;
font-size:clamp(36px,6vw,96px);line-height:.94;letter-spacing:-.03em;color:var(--txt);
text-shadow:0 10px 46px rgba(0,0,0,.5);max-width:16ch;text-wrap:balance;
}
.hero-lead .hero-ctas{margin-top:clamp(24px,3.2vh,38px)}
.hero-desc{align-self:end;text-align:left;max-width:460px}
.hero-blurb{font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:var(--txt);opacity:.92}
.hero-compliance{
display:flex;flex-wrap:wrap;gap:14px clamp(20px,3vw,50px);
padding-top:20px;border-top:1px solid rgba(255,255,255,.18);
}
.hcomp{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:rgba(246,246,244,.9)}
.hcomp svg{width:16px;height:16px;color:var(--lime);flex:none}
/* --- Progress dots + scroll cue --- */
.hero-dots{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;gap:11px}
.hero-dots b{width:2px;height:24px;background:rgba(255,255,255,.28);display:block;transition:background .4s var(--ease),height .4s var(--ease)}
.hero-dots b.on{background:var(--lime);height:38px}
.hero-cue{
position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:6;
display:flex;flex-direction:column;align-items:center;gap:9px;
font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(246,246,244,.75);
transition:opacity .5s var(--ease);
}
.hero-cue.is-gone{opacity:0}
.hero-cue i{width:1px;height:36px;background:linear-gradient(var(--lime),transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}
/* --- Copy entrance: each panel animates its copy in when it becomes active --- */
html.js .hero-slide .hero-pill,
html.js .hero-slide .hero-title,
html.js .hero-slide .hero-ctas,
html.js .hero-slide .hero-blurb,
html.js .hero-slide .hero-compliance{
opacity:0;transform:translateY(42px);
transition:opacity .8s var(--ease-out),transform .95s var(--ease-out);
}
.hero-slide.is-active .hero-pill{transition-delay:.04s}
.hero-slide.is-active .hero-title{transition-delay:.14s}
.hero-slide.is-active .hero-blurb{transition-delay:.22s}
.hero-slide.is-active .hero-ctas{transition-delay:.30s}
.hero-slide.is-active .hero-compliance{transition-delay:.38s}
html.js .hero-slide.is-active .hero-pill,
html.js .hero-slide.is-active .hero-title,
html.js .hero-slide.is-active .hero-ctas,
html.js .hero-slide.is-active .hero-blurb,
html.js .hero-slide.is-active .hero-compliance{opacity:1;transform:none}
/* Shared base (also used by the final CTA: .final .hero-ctas) */
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
/* No-JS / reduced-motion: fall back to a readable static full-screen stack. */
html:not(.js) .hero{height:auto}
html:not(.js) .hero-pin{position:static;height:auto}
html:not(.js) .hero-slide{position:relative;height:100vh}
@media (prefers-reduced-motion:reduce){
.hero{height:auto}
.hero-pin{position:static;height:auto}
.hero-slide{position:relative;height:100vh;transform:none !important}
html.js .hero-slide .hero-pill,
html.js .hero-slide .hero-title,
html.js .hero-slide .hero-ctas,
html.js .hero-slide .hero-blurb,
html.js .hero-slide .hero-compliance{opacity:1;transform:none}
.hero-dots,.hero-cue{display:none}
}
/* --------------------------------------------------------------------------
10. TICKER + COMPLIANCE STRIP
-------------------------------------------------------------------------- */
.ticker{border-block:1px solid var(--line);padding:20px 0;overflow:hidden;background:var(--bg-2);position:relative;z-index:2}
.ticker-mask{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ticker-track{display:flex;gap:0;width:max-content;animation:slide 40s linear infinite}
.ticker-mask:hover .ticker-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.ticker-item{
display:inline-flex;align-items:center;gap:16px;padding:0 26px;
font-family:"Red Hat Display",sans-serif;font-weight:800;font-size:15px;
letter-spacing:-.01em;color:var(--mute);white-space:nowrap;
}
/* Partners: two simple scrolling logo marquees (technology partners,
accreditations). Logos render in their real brand colors on a white
chip so full-color marks stay legible against the dark section. */
.pwr{display:flex;flex-direction:column;align-items:center;padding-top:22px}
.pwr-title{font-family:"Red Hat Display",sans-serif;font-weight:800;font-size:clamp(17px,1.9vw,22px);letter-spacing:-.01em;text-align:center;color:var(--txt)}
.pwr-title--sub{margin-top:48px}
.pmarq{position:relative;width:100%;margin-top:24px;overflow:hidden;
-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.pmarq-track{display:flex;gap:16px;width:max-content;animation:pmarq 36s linear infinite}
.pmarq:hover .pmarq-track{animation-play-state:paused}
@keyframes pmarq{to{transform:translateX(-50%)}}
.pacc{flex:none;display:flex;align-items:center;justify-content:center;height:56px;padding:10px 22px;
border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}
.pacc img{height:100%;width:auto;max-width:120px;object-fit:contain}
/* --------------------------------------------------------------------------
11. TWO PLAYBOOKS
-------------------------------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:58px}
.pbook{
position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);
background:var(--panel);padding:40px 36px 36px;display:flex;flex-direction:column;isolation:isolate;
transition:border-color .4s var(--ease),transform .55s var(--ease-out);
}
.pbook::before{
content:"";position:absolute;inset:0;z-index:-1;opacity:0;
background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),rgba(27,98,214,.16),transparent 60%);
transition:opacity .45s var(--ease);
}
.pbook::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--lime);transform:scaleY(0);transform-origin:top;transition:transform .55s var(--ease-out)}
.pbook:hover{transform:translateY(-7px);border-color:var(--line-2)}
.pbook:hover::before{opacity:1}
.pbook:hover::after{transform:scaleY(1)}
.pbook-tag{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:20px}
.pbook h3{margin-bottom:15px}
.pbook p{color:var(--mute);font-size:15.5px;line-height:1.62}
.pbook-list{margin-top:28px;border-top:1px solid var(--line);padding-top:16px}
.pbook-list li{
display:flex;gap:12px;align-items:flex-start;padding:10px 0;font-size:15px;color:var(--mute);
opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.pbook.is-in .pbook-list li,html:not(.js) .pbook-list li{opacity:1;transform:none}
.pbook-list li:nth-child(1){transition-delay:.08s}
.pbook-list li:nth-child(2){transition-delay:.16s}
.pbook-list li:nth-child(3){transition-delay:.24s}
.pbook-list li:nth-child(4){transition-delay:.32s}
.pbook-list svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--lime)}
.pbook .btn{margin-top:30px;align-self:flex-start}
/* --------------------------------------------------------------------------
12. SIMULATOR
-------------------------------------------------------------------------- */
.sim{margin-top:50px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);overflow:hidden}
.sim-head{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;padding:19px clamp(30px,3.4vw,46px);border-bottom:1px solid var(--line);background:var(--panel-2)}
.sim-head .t{font-family:"Red Hat Display",sans-serif;font-weight:800;font-size:15px}
.sim-head .hint{font-size:12.5px;font-weight:600;color:var(--mute);display:inline-flex;align-items:center;gap:9px}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}
.sim-body{display:grid;grid-template-columns:1.1fr 1fr}
.sim-controls{padding:clamp(30px,3.4vw,46px);border-right:1px solid var(--line)}
.sim-label{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:30px}
.sim-track{position:relative}
.sim-range{-webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;cursor:grab;display:block;position:relative;z-index:3}
.sim-range:active{cursor:grabbing}
.sim-range::-webkit-slider-runnable-track{height:6px;border-radius:100px;background:transparent}
.sim-range::-moz-range-track{height:6px;border-radius:100px;background:transparent}
.sim-range::-webkit-slider-thumb{
-webkit-appearance:none;width:26px;height:26px;margin-top:-10px;border-radius:50%;
background:var(--lime);border:4px solid var(--bg);box-shadow:0 0 0 1.5px var(--lime),0 6px 20px rgba(198,255,0,.3);
transition:transform .2s var(--ease);
}
.sim-range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--lime);border:4px solid var(--bg);box-shadow:0 0 0 1.5px var(--lime)}
.sim-range:hover::-webkit-slider-thumb{transform:scale(1.14)}
.sim-rail{position:absolute;left:0;right:0;top:14px;height:6px;border-radius:100px;background:var(--panel-3);pointer-events:none;z-index:1}
.sim-zone{position:absolute;top:14px;height:6px;left:32%;width:40%;border-radius:100px;z-index:2;background:repeating-linear-gradient(90deg,rgba(198,255,0,.5) 0 7px,rgba(198,255,0,.12) 7px 14px);pointer-events:none}
.sim-fill{position:absolute;left:0;top:14px;height:6px;border-radius:100px;z-index:2;background:rgba(253,253,253,.34);pointer-events:none;transition:width .1s linear}
.sim-ticks{display:flex;justify-content:space-between;margin-top:11px}
.sim-ticks span{font-size:13px;font-weight:600;color:var(--mute);transition:color .3s}
.sim-ticks span.is-active{color:var(--lime);font-weight:700}
.sim-readout{
margin-top:36px;border-radius:var(--radius);padding:21px 23px;background:var(--panel-2);
border-left:3px solid var(--blue);display:flex;gap:14px;align-items:flex-start;
transition:border-color .35s var(--ease);
}
.sim-readout svg{width:20px;height:20px;flex:none;margin-top:1px}
.sim-readout p{font-size:15.5px;line-height:1.55;color:var(--txt);font-weight:600}
.sim-readout[data-zone="balanced"]{border-left-color:var(--lime)}
.sim-readout[data-zone="patient"]{border-left-color:var(--stardust)}
.sim-readout[data-zone="aggressive"]{border-left-color:var(--yellow)}
.sim-out{padding:clamp(30px,3.4vw,46px);display:flex;flex-direction:column;justify-content:center;gap:38px}
.gauge-label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:13px;gap:16px}
.gauge-label span{font-size:14px;font-weight:700;color:var(--mute)}
.gauge-label b{font-family:"Red Hat Display",sans-serif;font-size:clamp(32px,3.8vw,50px);font-weight:900;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.gauge-bar{height:10px;border-radius:100px;background:var(--panel-3);overflow:hidden}
.gauge-bar i{display:block;height:100%;border-radius:100px;transition:width .16s var(--ease)}
.gauge--rev .gauge-bar i{background:var(--lime)}
.gauge--ret .gauge-bar i{background:var(--blue-soft)}
.gauge-foot{margin-top:10px;font-size:12.5px;color:var(--mute)}
.sim-note{font-size:12.5px;color:var(--mute);padding:16px clamp(30px,3.4vw,46px);border-top:1px solid var(--line);background:var(--panel-2)}
/* --------------------------------------------------------------------------
13. APPROACH
-------------------------------------------------------------------------- */
.approach{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:58px}
.acard{
position:relative;border-radius:var(--radius);padding:clamp(34px,3.4vw,48px);
background:var(--panel);border:1px solid var(--line);overflow:hidden;isolation:isolate;
transition:transform .55s var(--ease-out),border-color .4s;
}
.acard::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;background:radial-gradient(560px circle at var(--mx,50%) var(--my,50%),rgba(27,98,214,.18),transparent 62%);transition:opacity .45s var(--ease)}
.acard:hover{transform:translateY(-7px);border-color:var(--line-2)}
.acard:hover::before{opacity:1}
.acard .num{font-family:"Red Hat Display",sans-serif;font-weight:900;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--lime);margin-bottom:26px;display:block}
.acard-ico{width:58px;height:58px;border-radius:15px;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;margin-bottom:28px;transition:.5s var(--ease)}
.acard-ico svg{width:26px;height:26px;color:var(--blue-soft);transition:color .4s}
.acard:hover .acard-ico{border-color:var(--blue);background:rgba(27,98,214,.12);transform:scale(1.06) rotate(-4deg)}
.acard h3{font-size:clamp(21px,2.2vw,29px);margin-bottom:15px}
.acard p{color:var(--mute);font-size:15.5px;line-height:1.62}
/* --------------------------------------------------------------------------
14. CHALLENGES WE SOLVE
-------------------------------------------------------------------------- */
.solve-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:58px}
.scard{
border:1px solid var(--line);
/* Height reserves the HOVERED size so revealing the description never
resizes the grid row and shunts the rest of the page down. Values are
the tallest expanded card measured at the narrowest viewport for each
column count; re-measure if this copy changes. */
position:relative;background:var(--panel);padding:28px 26px 58px;min-height:306px;
display:flex;flex-direction:column;overflow:hidden;cursor:default;
transition:background .45s var(--ease),border-color .4s var(--ease);
}
.scard:hover,.scard:focus-within{background:var(--panel-3);border-color:var(--line-2)}
.scard .idx{font-size:11.5px;font-weight:700;color:var(--mute);letter-spacing:.12em}
/* Icon shown at rest; it fades out on hover as the description reveals. */
.scard-ico{width:36px;height:36px;margin-top:22px;color:var(--blue-soft);transition:opacity .4s var(--ease),transform .45s var(--ease)}
.scard-ico svg{width:100%;height:100%;display:block}
.scard:hover .scard-ico,.scard:focus-within .scard-ico{opacity:0;transform:translateY(-8px) scale(.9)}
.scard h3{font-size:18px;font-weight:800;line-height:1.24;margin:auto 0 0;font-family:"Red Hat Display",sans-serif}
.scard-sol{font-size:14.5px;line-height:1.55;color:var(--mute);max-height:0;opacity:0;overflow:hidden;transition:max-height .55s var(--ease-out),opacity .4s var(--ease),margin-top .55s var(--ease-out)}
.scard:hover .scard-sol,.scard:focus-within .scard-sol{max-height:230px;opacity:1;margin-top:15px}
.scard .peek{position:absolute;right:22px;bottom:22px;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--mute);transition:.45s var(--ease)}
.scard .peek svg{width:13px;height:13px}
.scard:hover .peek,.scard:focus-within .peek{background:var(--lime);border-color:var(--lime);color:var(--black);transform:rotate(45deg)}
/* --------------------------------------------------------------------------
15. BIG IDEA — the one purple field
-------------------------------------------------------------------------- */
.bigidea{text-align:center;max-width:1000px;margin:0 auto}
.bigidea h2{font-size:clamp(30px,4.4vw,60px);margin-bottom:28px;color:var(--white)}
.bigidea p{font-size:clamp(16px,1.5vw,19px);line-height:1.6;color:rgba(253,253,253,.86);max-width:770px;margin:0 auto}
.pullquote{margin-top:54px;padding-top:46px;border-top:1px solid rgba(253,253,253,.26);font-family:"Red Hat Display",sans-serif;font-weight:700;font-size:clamp(21px,2.8vw,36px);line-height:1.26;letter-spacing:-.022em;color:var(--white)}
/* --------------------------------------------------------------------------
16. COMPARISON
-------------------------------------------------------------------------- */
.compare{margin-top:58px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel)}
.compare-row{display:grid;grid-template-columns:.85fr 1.2fr 1.2fr;border-bottom:1px solid var(--line);transition:background .3s var(--ease)}
.compare-row:last-child{border-bottom:0}
.compare-row:not(.is-head):hover{background:var(--panel-3)}
.compare-row>div{padding:21px 28px;font-size:15px;line-height:1.5}
.compare-row.is-head>div{background:var(--panel-2);font-family:"Red Hat Display",sans-serif;font-weight:800;font-size:14.5px;padding:17px 28px;color:var(--mute)}
.compare-row.is-head .col-k{color:var(--lime);display:flex;align-items:center;gap:10px}
.compare .col-what{font-weight:700;color:var(--txt)}
.compare .col-trad{color:var(--mute)}
.compare .col-k{color:var(--txt);font-weight:600;border-left:1px solid var(--line);position:relative}
.compare-row:not(.is-head) .col-k::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--lime);transform:scaleY(0);transition:transform .35s var(--ease-out)}
.compare-row:not(.is-head):hover .col-k::before{transform:scaleY(1)}
.compare .m-label{display:none}
/* --------------------------------------------------------------------------
17. WHY KOLLECTA
-------------------------------------------------------------------------- */
/* Simple bordered grid of 6 cards; simple hover transitions. */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(44px,5vw,58px)}
.wcard{position:relative;background:var(--panel);border:1px solid var(--line);padding:clamp(30px,3vw,42px);transition:background .4s var(--ease),border-color .4s var(--ease)}
/* Match the reveal's specificity so its opacity/transform transitions stay,
and add the background transition for the hover. */
html.js .wcard{transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),background .4s var(--ease),border-color .4s var(--ease)}
.wcard:hover{background:var(--panel-3);border-color:var(--line-2)}
.wcard .n{font-family:"Red Hat Display",sans-serif;font-weight:900;font-size:14px;color:var(--lime);display:block;margin-bottom:22px}
.wcard h3{font-size:18px;font-weight:800;font-family:"Red Hat Display",sans-serif;margin-bottom:13px;line-height:1.24;transition:transform .35s var(--ease)}
.wcard:hover h3{transform:translateX(5px)}
.wcard p{font-size:15px;color:var(--mute);line-height:1.6}
/* --------------------------------------------------------------------------
18. CLIENT PORTAL — product UI, the only home for the tertiary palette
-------------------------------------------------------------------------- */
.portal{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(38px,5vw,74px);align-items:center;margin-top:54px}
.portal-list li{display:flex;gap:17px;padding:17px 0;border-bottom:1px solid var(--line);transition:padding-left .35s var(--ease);cursor:default}
.portal-list li:hover{padding-left:9px}
.portal-list .n{font-size:13px;font-weight:800;color:var(--lime);flex:none;width:26px;font-family:"Red Hat Display",sans-serif;padding-top:2px}
.portal-list h3{font-size:16px;font-weight:800;font-family:"Red Hat Display",sans-serif;margin-bottom:5px}
.portal-list p{font-size:14.5px;color:var(--mute);line-height:1.5}
.ui{border-radius:var(--radius-lg);background:var(--panel);border:1px solid var(--line-2);box-shadow:0 50px 110px rgba(0,0,0,.7);overflow:hidden}
.ui-bar{display:flex;align-items:center;gap:8px;padding:14px 17px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.ui-bar .dot{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.ui-bar .title{margin-left:11px;font-size:12px;font-weight:600;color:var(--mute)}
.ui-bar .live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#5FCB8C}
.ui-bar .live i{width:6px;height:6px;border-radius:50%;background:var(--emerald);animation:blip 1.6s infinite}
.ui-kpis{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.ui-kpi{padding:22px;border-right:1px solid var(--line)}
.ui-kpi:last-child{border-right:0}
.ui-kpi .k{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.ui-kpi .v{font-family:"Red Hat Display",sans-serif;font-weight:900;font-size:clamp(23px,2.4vw,31px);margin-top:9px;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.ui-kpi .d{font-size:12px;margin-top:7px;color:#5FCB8C;font-weight:600}
.ui-rows{padding:4px 0}
.ui-row{display:grid;grid-template-columns:1.4fr .9fr .9fr auto;gap:12px;align-items:center;padding:14px 22px;font-size:13px;border-bottom:1px solid rgba(253,253,253,.055);transition:background .25s var(--ease)}
.ui-row:last-child{border-bottom:0}
.ui-row:hover{background:rgba(253,253,253,.04)}
.ui-row .acct{font-weight:600}
.ui-row .meta{color:var(--mute);font-variant-numeric:tabular-nums}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:100px;font-size:11.5px;font-weight:700;white-space:nowrap}
.pill svg{width:12px;height:12px;flex:none}
.pill--ok{background:color-mix(in srgb,var(--emerald) 82%,var(--black));color:var(--white)}
.pill--warn{background:var(--amber);color:var(--black)}
.pill--err{background:var(--red);color:var(--white)}
.pill--info{background:var(--sapphire);color:var(--white)}
.pill--idle{background:var(--stardust);color:var(--black)}
.ui-foot{padding:13px 22px;border-top:1px solid var(--line);font-size:11.5px;color:var(--mute);background:var(--bg-2)}
/* --------------------------------------------------------------------------
19. INTAKE STEPPER
-------------------------------------------------------------------------- */
/* Base = a readable static stack (no-JS, reduced-motion, touch, and the
fallback if the loop driver never activates). The pinned + scroll-wrapped
"infinite loop" is layered on only via .intake--loop (added by the driver
on desktop pointer devices). */
.intake{position:relative;background:var(--bg)}
.intake-hud{max-width:1440px;margin:0 auto;padding:clamp(58px,9vh,104px) var(--gutter) 26px}
.intake-head{max-width:640px}
.intake-title{font-size:clamp(27px,3.5vw,46px);line-height:1.05;margin-top:16px;max-width:21ch}
.intake-nav{display:none}
.intake-count{font-family:"Red Hat Display",sans-serif;font-weight:800;font-size:14px;color:var(--mute);letter-spacing:.04em}
.intake-count b{color:var(--txt);font-size:16px}
.intake-dots{display:flex;gap:8px}
.intake-dots b{width:26px;height:3px;border-radius:2px;background:var(--line-2);transition:width .4s var(--ease),background .4s var(--ease)}
.intake-dots b.on{background:var(--lime);width:40px}
.intake-skip{
display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;
border:1px solid var(--line-2);background:rgba(10,10,10,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
font-size:13px;font-weight:700;color:var(--txt);transition:border-color .2s var(--ease),color .2s var(--ease);cursor:pointer;
}
.intake-skip svg{width:15px;height:15px}
.intake-skip:hover{border-color:var(--lime);color:var(--lime)}
/* ---- Horizontal timeline: numbered nodes on a connecting rail ----
Steps carry no blue (client): the resting node, dot, number and connector are
--lime-deep, and .istep.is-lit lifts to full --lime as the scroll beam
arrives, so the lit transition still reads. This is the only component that
moved off the blue accent; the rest of the site keeps it. */
.itimeline{
--tl-node:40px;
position:relative;list-style:none;
max-width:1440px;margin:0 auto;padding:8px var(--gutter) clamp(58px,9vh,104px);
display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(18px,2.4vw,40px);
}
/* faint guide rail through every node centre; the lit lime beam draws over it on scroll */
.itimeline::before{content:"";position:absolute;z-index:0;
top:calc(8px + var(--tl-node) / 2);height:2px;
left:var(--gutter);right:var(--gutter);
background:color-mix(in srgb,var(--lime) 20%,transparent);
}
/* no-Motion / reduced-motion fallback: show the full lime line at rest */
html:not(.motion) .itimeline::before{background:color-mix(in srgb,var(--lime) 80%,transparent)}
/* the scroll-drawn beam (traceBeam, horizontal) sits on the rail, behind the nodes */
.itimeline .mo-beam{top:calc(8px + var(--tl-node) / 2 - 1px);left:var(--gutter);right:var(--gutter);width:auto;z-index:0;
background:var(--lime);box-shadow:0 0 16px -1px color-mix(in srgb,var(--lime) 60%,transparent)}
.istep{position:relative;z-index:1}
.istep-node{
display:grid;place-items:center;position:relative;
width:var(--tl-node);height:var(--tl-node);border-radius:50%;
border:1.5px solid var(--lime-deep);background:var(--bg);
box-shadow:0 0 0 4px color-mix(in srgb,var(--lime-deep) 12%,transparent);
transition:border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.istep-node::before{content:"";width:14px;height:14px;border-radius:50%;border:1.5px solid var(--lime-deep);transition:border-color .4s var(--ease)}
.istep-node::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--lime-deep);transition:background .4s var(--ease)}
/* node lights lime as the beam reaches it */
.istep.is-lit .istep-node{border-color:var(--lime);box-shadow:0 0 0 4px color-mix(in srgb,var(--lime) 16%,transparent)}
.istep.is-lit .istep-node::before{border-color:var(--lime)}
.istep.is-lit .istep-node::after{background:var(--lime)}
.istep-num{display:block;margin:26px 0 12px;font-family:"Red Hat Display",sans-serif;font-weight:900;
font-size:13px;letter-spacing:.22em;color:var(--lime-deep)}
.istep-title{font-size:clamp(17px,1.5vw,20px);line-height:1.15;margin-bottom:12px}
.istep-desc{font-size:clamp(14px,1.1vw,15px);line-height:1.6;color:var(--mute);max-width:24ch}
/* ---- Stack to a vertical timeline on narrow viewports ----
1180px, not 900px: the 5-up grid squeezes the longest step title to 3
lines below that width, so it hands off to the stacked layout (which
already gives titles a generous 38ch) before that happens. Matches the
same 1180px handoff used by .why-grid--auto/.solve-grid--auto for the
same reason. */
@media (max-width:1180px){
.itimeline{grid-template-columns:1fr;gap:0;padding-top:0}
.itimeline::before,.itimeline .mo-beam{display:none}
.istep{padding:0 0 34px calc(var(--tl-node) + 26px)}
.istep:last-child{padding-bottom:0}
.istep-node{position:absolute;top:2px;left:0}
/* per-step vertical connector */
.istep::before{content:"";position:absolute;z-index:0;top:calc(var(--tl-node) + 2px);bottom:-2px;
left:calc(var(--tl-node) / 2 - 1px);width:2px;
background:linear-gradient(180deg,var(--lime-deep),color-mix(in srgb,var(--lime-deep) 45%,transparent))}
.istep:last-child::before{display:none}
.istep-num{margin-top:8px}
.istep-desc{max-width:38ch}
}
/* --------------------------------------------------------------------------
20. SERVICES
-------------------------------------------------------------------------- */
/* Sticky-stack services: a pinned heading on the left, cards that slide in
from the right and then pin and stack over one another on scroll.
(Reference: originl / daemon "how we work" sections.) */
.svc-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(40px,5vw,84px);align-items:start;margin-top:58px}
.svc-head{position:sticky;top:132px}
.svc-head .eyebrow{margin-bottom:22px}
.svc-head h2{max-width:none}
/* Above 1080px the heading sits in the narrow sticky left column (see the
.svc-layout column split below); the default h2 size wraps this copy to
4 lines there, so it steps down to hold 2 in that column width. */
@media (min-width:1081px){
.svc-head h2{font-size:clamp(28px,2.6vw,34px)}
}
.svc-head-lede{margin-top:22px;max-width:34ch;font-size:clamp(15px,1.3vw,17px);line-height:1.62;color:var(--mute)}
.services.svc-stack{display:block;margin-top:0}
.svc{
position:sticky;top:calc(132px + var(--i,0) * 26px);z-index:calc(var(--i,0) + 1);
border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
padding:36px 32px 32px;display:flex;flex-direction:column;overflow:hidden;min-height:300px;
transition:border-color .4s,box-shadow .55s var(--ease-out);
box-shadow:0 30px 60px -30px rgba(0,0,0,.9);
}
.svc:not(:first-child){margin-top:26px}
.svc::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-out)}
.svc:hover{border-color:var(--line-2);box-shadow:0 36px 74px -26px rgba(0,0,0,.96)}
.svc:hover::before{transform:scaleX(1)}
.svc-ico{width:46px;height:46px;border-radius:12px;background:var(--panel-3);display:flex;align-items:center;justify-content:center;margin-bottom:26px;transition:.45s var(--ease)}
.svc-ico svg{width:22px;height:22px;color:var(--mute);transition:color .45s var(--ease)}
.svc:hover .svc-ico{background:var(--lime)}
.svc:hover .svc-ico svg{color:var(--black)}
.svc h3{font-size:21px;margin-bottom:13px}
.svc p{font-size:15px;color:var(--mute);line-height:1.6;margin-bottom:28px}
.svc .btn--text{margin-top:auto;align-self:flex-start}
/* --------------------------------------------------------------------------
21. INDUSTRIES
-------------------------------------------------------------------------- */
/* Card grid: each industry is a card with an icon tile, name, and corner arrow.
Blue-forward accent (brand sapphire) with a calm, minimal hover. */
.ind-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.4vw,20px);
margin-top:clamp(40px,5vw,60px);
}
.ind{
display:flex;align-items:center;gap:clamp(16px,1.4vw,20px);
padding:clamp(18px,1.6vw,24px) clamp(20px,1.6vw,26px);
border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:var(--txt);
transition:border-color .2s var(--ease),background .2s var(--ease);
}
.ind-ico{
width:52px;height:52px;flex:none;border-radius:12px;display:grid;place-items:center;
background:var(--panel-3);color:var(--blue-soft);
transition:background .2s var(--ease),color .2s var(--ease);
}
.ind-ico svg{width:24px;height:24px}
.ind-name{
flex:1;min-width:0;font-family:"Red Hat Display",sans-serif;font-weight:800;
font-size:clamp(15px,1.15vw,17px);line-height:1.2;letter-spacing:-.01em;
}
.ind .arr{width:18px;height:18px;flex:none;color:var(--mute);
transition:color .2s var(--ease),transform .2s var(--ease)}
/* minimal hover: blue border, icon tile fills blue, arrow ticks out in blue */
.ind:hover,.ind:focus-visible{border-color:var(--lime);background:var(--panel-2)}
.ind:hover .ind-ico,.ind:focus-visible .ind-ico{background:var(--lime);color:var(--black)}
.ind:hover .arr,.ind:focus-visible .arr{color:var(--lime);transform:translate(2px,-2px)}
@media (max-width:900px){
.ind-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
.ind-grid{grid-template-columns:1fr}
}
/* --------------------------------------------------------------------------
22. COMPLIANCE + UNIVERSITY
-------------------------------------------------------------------------- */
/* Audit trail: a scroll-drawn tracing beam lights each checkpoint (scroll.js). */
.comp-trail{position:relative;margin-top:clamp(40px,5vw,60px)}
.comp-trail::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:var(--line);border-radius:2px}
.comp-trail .mo-beam{left:21px;top:22px;bottom:22px;height:auto}
.comp-item{position:relative;display:grid;grid-template-columns:44px 1fr;gap:clamp(16px,2.2vw,28px);align-items:start;padding:clamp(22px,2.6vw,30px) 0;border-bottom:1px solid var(--line)}
.comp-item:first-child{padding-top:0}
.comp-item:last-child{padding-bottom:0;border-bottom:0}
.comp-node{
width:44px;height:44px;border-radius:50%;background:var(--panel);border:1px solid var(--line-2);
display:grid;place-items:center;color:var(--mute);position:relative;z-index:4;
transition:border-color .45s var(--ease),color .45s var(--ease),box-shadow .45s var(--ease);
}
.comp-node svg{width:21px;height:21px}
.comp-item.is-lit .comp-node{border-color:var(--lime);color:var(--lime);box-shadow:0 0 0 4px rgba(198,255,0,.09)}
.comp-body{padding-top:5px}
.comp-body h3{font-size:clamp(18px,1.5vw,21px);font-weight:800;font-family:"Red Hat Display",sans-serif;margin-bottom:9px}
.comp-body p{font-size:15px;color:var(--mute);line-height:1.62;max-width:62ch}
.uni{margin-top:clamp(22px,3vw,34px);background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--radius);padding:clamp(34px,4vw,50px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,58px);align-items:center}
.uni-head .eyebrow{margin-bottom:16px}
.uni h3{font-size:clamp(23px,2.6vw,33px);margin-bottom:15px}
.uni p{color:var(--mute);font-size:15.5px;line-height:1.62}
.uni-tags{display:flex;flex-wrap:wrap;gap:10px}
.utag{padding:10px 16px;border:1px solid var(--line-2);border-radius:100px;font-size:13.5px;font-weight:600;color:var(--mute);transition:.35s var(--ease)}
/* --------------------------------------------------------------------------
23. FAQ
-------------------------------------------------------------------------- */
.faq{max-width:920px;margin:54px auto 0;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:26px;padding:28px 4px;text-align:left;font-family:"Red Hat Display",sans-serif;font-weight:800;font-size:clamp(17px,1.8vw,22px);letter-spacing:-.018em;line-height:1.3;transition:color .25s var(--ease)}
.faq-q:hover{color:var(--lime)}
.faq-icon{position:relative;width:20px;height:20px;flex:none}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:2px;transform:translate(-50%,-50%);transition:transform .4s var(--ease-out),opacity .3s}
.faq-icon::before{width:16px;height:2px}
.faq-icon::after{width:2px;height:16px}
.faq-item.is-open .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq-item.is-open .faq-q{color:var(--lime)}
.faq-a{overflow:hidden;height:0;transition:height .45s var(--ease-out)}
.faq-a-in{padding:0 4px 30px;max-width:780px}
.faq-a-in p{font-size:15.5px;line-height:1.68;color:var(--mute)}
.faq-a-in p+p{margin-top:13px}
.faq-a-in ul{margin-top:15px;display:flex;flex-wrap:wrap;gap:8px}
.faq-a-in ul li{padding:8px 14px;background:var(--panel-2);border-radius:100px;font-size:13.5px;font-weight:600;color:var(--mute)}
/* --------------------------------------------------------------------------
24. FINAL CTA + FOOTER
-------------------------------------------------------------------------- */
.final{position:relative;overflow:hidden;text-align:center;background:var(--bg)}
.final-glow{position:absolute;width:min(1000px,130vw);aspect-ratio:1;border-radius:50%;left:50%;bottom:-66%;transform:translateX(-50%);background:radial-gradient(circle,rgba(27,98,214,.32) 0%,transparent 62%);pointer-events:none}
/* Wide enough that the site-wide default title ("Ready to Recover More
Outstanding Debt?" - the fallback used wherever a page never overrides
the closing CTA) holds one line; a shorter custom title just renders at
its own natural width regardless, so this is never a regression for one. */
.final h2{max-width:1240px;margin:0 auto 26px;letter-spacing:-.04em}
.final p{max-width:660px;margin:0 auto;color:var(--mute);font-size:clamp(16px,1.5vw,18px);line-height:1.62}
.final .hero-ctas{position:static;transform:none;justify-content:center;margin-top:40px;display:flex}
.site-footer{background:var(--bg-2);padding:78px 0 34px;border-top:1px solid var(--line)}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:46px;padding-bottom:50px;border-bottom:1px solid var(--line)}
.foot-brand img{height:26px;width:auto;aspect-ratio:auto;filter:invert(1);margin-bottom:22px}
.foot-brand p{color:var(--mute);font-size:15px;line-height:1.6;max-width:330px}
/* The no-widget fallback (plain .foot-brand, not .foot-brand.foot-widget)
needs the same flush-left guarantee as the widget variant below - an
inline-level child (img, or a custom logo's / with auto margins) from however it was
inserted. Force it back to flush-left so it matches the rest of the
footer regardless of that setting. */
.foot-brand.foot-widget{text-align:left}
.foot-brand.foot-widget img,
.foot-brand.foot-widget figure{margin-left:0!important;margin-right:auto!important}
/* Contact rows (address / email / phone), used by the "Kollecta: Contact
details" widget and by the brand column's no-widget fallback. */
.foot-contact{margin-top:26px;display:flex;flex-direction:column;gap:18px}
.foot-contact-row{display:flex;align-items:flex-start;gap:14px}
.foot-contact-ico{
flex:none;width:38px;height:38px;border-radius:var(--radius-sm);
background:var(--panel-2);border:1px solid var(--line-2);color:var(--txt);
display:flex;align-items:center;justify-content:center;
}
.foot-contact-ico svg{width:18px;height:18px}
.foot-contact-text{display:flex;flex-direction:column;gap:3px;padding-top:2px}
.foot-contact-label{font-size:14.5px;font-weight:700;color:var(--txt)}
.foot-contact-value{color:var(--mute);font-size:14.5px;line-height:1.5}
a.foot-contact-value:hover{color:var(--lime)}
/* Bottom bar: the "Follow us on" label beside the social icons, and a
consistent link colour for anything a widget places here. */
.foot-social{align-items:center}
.foot-follow{font-size:13.5px;color:var(--mute)}
.foot-bot a{color:var(--mute);transition:color .22s}
.foot-bot a:hover{color:var(--lime)}
/* --------------------------------------------------------------------------
25. RESPONSIVE
-------------------------------------------------------------------------- */
@media (max-width:1180px){
.hero-main{gap:clamp(22px,4vw,46px)}
}
/* 1179px, not 1080px: matches the .why-grid--auto/.solve-grid--auto
handoff further down, so 1081-1179px doesn't fall through to these
grids' hard-coded 3/4-col base (too narrow for the longer card titles)
instead of this 2-col fallback. */
@media (max-width:1179px){
.why-grid{grid-template-columns:repeat(2,1fr)}
.solve-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
.why-grid{grid-template-columns:1fr}
}
@media (max-width:1080px){
.scard{min-height:264px} /* 2-col worst case measured 257 */
.svc-layout{grid-template-columns:1fr;gap:34px}
.svc-head{position:static;top:auto}
.svc-head-lede{max-width:46ch}
.svc{position:static;top:auto;min-height:0}
.svc:not(:first-child){margin-top:20px}
.foot-top{grid-template-columns:1fr 1fr;gap:38px}
}
@media (max-width:960px){
.nav-links{display:none}
.nav-burger{display:flex}
.nav-actions .btn{display:none}
.split,.approach,.portal,.uni{grid-template-columns:1fr}
.sim-body{grid-template-columns:1fr}
.sim-controls{border-right:0;border-bottom:1px solid var(--line)}
.ipanel-inner{grid-template-columns:1fr;gap:16px}
.ipanel-num{font-size:clamp(88px,32vw,150px)}
.intake-title{font-size:clamp(23px,6vw,32px)}
.intake-nav{gap:14px}
.intake-skip{padding:9px 13px}
.compare-row{grid-template-columns:1fr}
.compare-row>div{padding:9px 22px}
.compare-row>div:first-child{padding-top:19px}
.compare-row>div:last-child{padding-bottom:19px}
.compare-row.is-head{display:none}
.compare-row:not(.is-head){border-bottom-width:7px;border-bottom-color:var(--bg)}
.compare .col-k{border-left:0}
.compare .m-label{display:block;font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.compare .col-k .m-label{color:var(--lime)}
/* Hero video stack: the flex copy layout already reflows; just give the
top copy a little more clearance under the floating nav. */
.hero-face{padding-top:clamp(92px,13vh,120px)}
.hero-dots{display:none}
/* Stack title over description; title no longer clamped to a column. */
.hero-main{grid-template-columns:1fr;gap:20px}
.hero-title{max-width:none;font-size:clamp(34px,8.5vw,66px)}
.hero-desc{max-width:none}
}
@media (max-width:640px){
:root{--gutter:20px}
.solve-grid{grid-template-columns:1fr}
.scard{min-height:286px} /* 1-col worst case measured 279 */
.ui-kpis{grid-template-columns:1fr}
.ui-kpi{border-right:0;border-bottom:1px solid var(--line)}
.ui-row{grid-template-columns:1fr auto;row-gap:5px}
.ui-row .meta.hide-sm{display:none}
.foot-top{grid-template-columns:1fr}
.hero-desc{max-width:none}
.hero-compliance{gap:10px 22px}
.hero-cue{display:none}
}
/* Solve cards: on touch / narrow (responsive) views there is no hover to
trigger the reveal, so keep the description shown and drop the icon. */
@media (hover: none), (max-width: 1080px){
.scard-ico{display:none}
.scard-sol{max-height:none;opacity:1;margin-top:15px}
.scard{min-height:0}
}
/* ==========================================================================
26. MOTION LAYER
Styles supporting assets/js/scroll.js. Every rule below degrades to a
sensible static state when Motion is absent (html without .motion).
========================================================================== */
/* Text Reveal by Word ---------------------------------------------------- */
.mo-word{display:inline-block;will-change:opacity}
/* Tracing Beam ----------------------------------------------------------- */
.mo-beam{
position:absolute;left:0;top:0;width:2px;height:100%;
background:linear-gradient(180deg,var(--lime),var(--blue));
box-shadow:0 0 14px rgba(198,255,0,.45);
transform:scaleY(0);transform-origin:center top;
pointer-events:none;z-index:3;border-radius:2px;
}
.mo-beam--h{width:100%;height:2px;transform:scaleX(0);transform-origin:left center}
/* Comparison rows light as the beam passes ------------------------------- */
.compare-row{transition:background .45s var(--ease)}
.compare-row.is-lit .col-what{color:var(--txt)}
.compare-row.is-lit .col-k::before{transform:scaleY(1)}
.compare-row.is-lit .col-k{color:var(--txt)}
/* Container Scroll Unfold ------------------------------------------------ */
.motion [data-motion="unfold"]{will-change:transform;backface-visibility:hidden}
/* Velocity marquee ------------------------------------------------------- */
.motion .ticker-track{animation:none !important;will-change:transform}
/* Industries velocity skew ----------------------------------------------- */
/* Pause ambient CSS animations while their section is off-screen (perf).
The .offscreen class is toggled by an IntersectionObserver in main.js. */
.offscreen .ind-hub::before,
.offscreen .pmarq-track,
.offscreen .ui-bar .live i{animation-play-state:paused}
/* Drift targets ---------------------------------------------------------- */
.motion .sec-head,
.motion .pbook,.motion .acard,.motion .svc,.motion .ccard,
.motion .scard,.motion .wcard,.motion .plogo,.motion .faq-item,
.motion .portal-list li{will-change:translate}
/* Big Idea field --------------------------------------------------------- */
#bigidea{position:relative;overflow:hidden}
#bigidea::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
background:rgba(253,253,253,.5);width:var(--field,0%);
transition:width .1s linear;pointer-events:none;
}
/* Final CTA scroll scale ------------------------------------------------- */
.motion .final h2,.motion .final-glow{will-change:transform}
@media (prefers-reduced-motion:reduce){
.mo-word{opacity:1 !important}
.mo-beam{display:none}
.motion .ticker-track{animation:slide 40s linear infinite !important}
}
/* ==========================================================================
27. BIG IDEA — black field, interactive trust meter
Replaces the full-bleed purple band. Black carries the credibility here
(Playbook 04); purple and lime appear only as accents.
========================================================================== */
.bigidea-sec{position:relative;background:var(--bg);overflow:hidden}
.bigidea-glow{
position:absolute;left:50%;top:-30%;transform:translateX(-50%);
width:min(1100px,140vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgba(27,98,214,.24) 0%,rgba(27,98,214,.05) 45%,transparent 70%);
}
/* Hairline frame, echoing the grid language used elsewhere */
.bigidea-sec::before,.bigidea-sec::after{
content:"";position:absolute;left:0;right:0;height:1px;background:var(--line);
}
.bigidea-sec::before{top:0}
.bigidea-sec::after{bottom:0;width:var(--field,0%);right:auto;background:var(--lime);opacity:.55}
.bigidea{position:relative;z-index:2;text-align:center;max-width:1000px;margin:0 auto}
.bigidea h2{font-size:clamp(30px,4.4vw,60px);margin-bottom:28px;color:var(--txt)}
/* This section's own heading copy is long enough to need more than the
1000px .bigidea measure to hold 2 lines. */
#bigidea .bigidea{max-width:1150px}
.bigidea-lede{
font-size:clamp(16px,1.5vw,19px);line-height:1.6;color:var(--mute);
max-width:720px;margin:0 auto;
}
/* --- Trust meter ------------------------------------------------------- */
.trust{
margin:clamp(44px,5vw,64px) auto 0;max-width:720px;text-align:left;
border:1px solid var(--line);border-radius:var(--radius);
background:var(--panel);padding:clamp(24px,3vw,34px);
}
.trust-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.trust-label{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.trust-val{
font-family:"Red Hat Display",sans-serif;font-weight:900;
font-size:clamp(30px,3.6vw,46px);line-height:1;letter-spacing:-.035em;
font-variant-numeric:tabular-nums;color:var(--txt);transition:color .45s var(--ease);
}
.trust-bar{height:10px;border-radius:100px;background:var(--panel-3);overflow:hidden}
.trust-bar i{
display:block;height:100%;width:0;border-radius:100px;background:var(--lime);
transition:width .9s var(--ease-out),background .45s var(--ease);
}
.trust-scale{
display:flex;justify-content:space-between;margin-top:10px;
font-size:11.5px;color:var(--mute-2);
}
/* Damaged state: Star Dust, never red. Red is barred from brand surfaces. */
.trust.is-damaged .trust-bar i{background:var(--stardust)}
.trust.is-damaged .trust-val{color:var(--stardust)}
.trust.is-safe .trust-val{color:var(--lime)}
.trust.is-damaged .trust-bar i,.trust.is-safe .trust-bar i{transition:width .55s var(--ease-io),background .35s}
.trust-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.tbtn{
padding:11px 18px;border-radius:var(--radius);border:1px solid var(--line-2);
font-family:"Manrope",sans-serif;font-size:13.5px;font-weight:700;color:var(--txt);
background:transparent;transition:.28s var(--ease);
}
.tbtn:hover{border-color:var(--txt);background:rgba(253,253,253,.06)}
.tbtn--k{background:var(--lime);border-color:var(--lime);color:var(--black)}
.tbtn--k:hover{background:var(--lime-deep);border-color:var(--lime-deep);color:var(--black)}
.tbtn--ghost{color:var(--mute);border-color:var(--line)}
.tbtn--ghost:hover{color:var(--txt)}
.tbtn[aria-pressed="true"]{border-color:var(--blue)}
.trust-read{
margin-top:20px;font-size:15px;line-height:1.55;color:var(--txt);font-weight:600;
min-height:46px;
}
.trust-read b{color:var(--lime);font-weight:700}
.trust-read i{color:var(--stardust);font-style:normal;font-weight:700}
/* --- Pull quote -------------------------------------------------------- */
.bigidea .pullquote{
margin-top:clamp(44px,5vw,60px);padding-top:0;border-top:0;
font-family:"Red Hat Display",sans-serif;font-weight:700;
font-size:clamp(20px,2.6vw,34px);line-height:1.26;letter-spacing:-.022em;color:var(--txt);
max-width:900px;margin-inline:auto;
}
.bigidea .pullquote::before{
content:"";display:block;width:40px;height:2px;background:var(--blue);
margin:0 auto clamp(26px,3vw,34px);
}
@media (max-width:640px){
.trust-actions .tbtn{flex:1 1 100%;text-align:center}
.trust-scale span:nth-child(2),.trust-scale span:nth-child(4){display:none}
}
/* ==========================================================================
13. WORDPRESS TEMPLATES, FORMS & ACCESSIBILITY
Added for the WordPress theme. Reuses the design tokens above so blog,
page, search, 404, comments and plugin forms inherit the dark aesthetic.
========================================================================== */
/* Accessible skip link / screen-reader helper. */
.screen-reader-text{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.screen-reader-text:focus{
position:fixed;top:12px;left:12px;z-index:1000;width:auto;height:auto;
padding:12px 20px;margin:0;clip:auto;white-space:normal;
background:var(--panel-2);color:var(--txt);border:1px solid var(--line-2);
border-radius:var(--radius);font-weight:600;
}
/* Narrow reading column for long-form content. */
.wrap--narrow{max-width:820px}
.page-body{padding-top:clamp(120px,16vh,190px)}
/* Page hero titles are admin-editable SEO titles that often run longer than
the shared 820px reading column, wrapping the H1 to 3+ lines. Widened
sitewide for every .page-hero-sec (Industry, Blog, ROI calculator, Story,
Tech, archives, search, 404, single post …) — only the hero's own wrap is
targeted, so the narrower 820px column elsewhere (body copy, listings)
is untouched. (The Service hero no longer uses .wrap--narrow at all —
see .svc-hero-grid.) */
.page-hero-sec .wrap--narrow{max-width:1180px}
/* Page breadcrumb — sits above the eyebrow at the top of a page hero.
Centered by default (matches .page-hero); .contact-hero-copy overrides to
left-aligned since that hero isn't centered. */
.page-breadcrumb{
display:flex;flex-wrap:wrap;justify-content:center;gap:6px 8px;margin-bottom:16px;
font-size:13px;color:var(--mute-2);
}
.page-breadcrumb a{color:var(--mute);transition:color .25s var(--ease)}
.page-breadcrumb a:hover{color:var(--blue-soft)}
.contact-hero-copy .page-breadcrumb,.svc-hero-copy .page-breadcrumb{justify-content:flex-start}
/* Page / archive hero. */
.page-hero{margin-bottom:clamp(36px,5vw,60px);text-align:center}
.page-hero h1{
font-family:"Red Hat Display",sans-serif;font-weight:800;
font-size:clamp(32px,5vw,60px);line-height:1.04;letter-spacing:-.03em;color:var(--txt);
text-wrap:balance;
}
.page-hero .lede{margin-top:18px;color:var(--mute);font-size:clamp(16px,1.4vw,19px);line-height:1.65}
.page-hero-search{margin-top:26px;display:flex;justify-content:center}
/* Hero subtitles are WYSIWYG fields and can carry a list; the sitewide
ul,ol{list-style:none} reset would otherwise leave it markerless. */
.lede ul,.lede ol{margin-top:14px;padding-left:1.3em}
.lede ul{list-style:disc}
.lede ol{list-style:decimal}
.lede li{margin-top:.5em}
.lede li::marker{color:var(--lime)}
/* Post meta. */
.post-meta{
display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;
font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute-2);margin-bottom:16px;
}
.post-meta-cat a{color:var(--blue-soft)}
/* Post listing cards. */
.post-list{display:grid;gap:clamp(20px,3vw,34px)}
.post-card{
display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:clamp(18px,2.6vw,30px);
align-items:center;padding:clamp(16px,2vw,22px);
background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
transition:border-color .4s var(--ease),transform .5s var(--ease-out);
}
.post-card:hover{border-color:var(--line-2);transform:translateY(-3px)}
.post-card-media{display:block;overflow:hidden;border-radius:var(--radius);aspect-ratio:4/3}
.post-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.post-card:hover .post-card-media img{transform:scale(1.04)}
.post-card .post-meta{justify-content:flex-start}
.post-card-title{font-family:"Red Hat Display",sans-serif;font-weight:700;font-size:clamp(20px,2.2vw,26px);line-height:1.15;letter-spacing:-.02em}
.post-card-title a{color:var(--txt)}
.post-card-title a:hover{color:var(--blue-soft)}
.post-card-excerpt{margin:12px 0 16px;color:var(--mute);line-height:1.6}
@media (max-width:720px){.post-card{grid-template-columns:1fr;text-align:center}.post-card .post-meta{justify-content:center}}
/* Long-form entry content. */
.entry-media{margin:0 0 clamp(28px,4vw,44px);border-radius:var(--radius-lg);overflow:hidden}
.entry-media img{width:100%;height:auto;display:block}
.entry-content{color:var(--mute);font-size:clamp(16px,1.3vw,18px);line-height:1.75}
.entry-content > * + *{margin-top:1.15em}
.entry-content h2,.entry-content h3,.entry-content h4{
font-family:"Red Hat Display",sans-serif;color:var(--txt);letter-spacing:-.02em;
line-height:1.2;margin-top:1.8em;
}
.entry-content h2{font-size:clamp(24px,2.6vw,32px);font-weight:800}
.entry-content h3{font-size:clamp(20px,2vw,25px);font-weight:700}
.entry-content h4{font-size:19px;font-weight:700}
.entry-content a{color:var(--blue-soft);text-decoration:underline;text-underline-offset:3px}
.entry-content a:hover{color:var(--txt)}
.entry-content strong{color:var(--txt)}
.entry-content ul,.entry-content ol{padding-left:1.3em}
.entry-content li{margin-top:.5em}
.entry-content blockquote{
margin:1.6em 0;padding:18px 24px;border-left:2px solid var(--blue);
background:var(--panel);border-radius:0 var(--radius) var(--radius) 0;color:var(--txt);
}
/* Pull-quote card: a standalone callout quote inside long-form content,
distinct from the plain left-border .entry-content blockquote above.
Dropped into the classic editor as an HTML block: wrap the quote text in
inside
, with an optional
for the
attribution line. */
.entry-content .pull-quote{
position:relative;margin:2.2em 0 2.6em;padding:clamp(32px,4vw,44px) clamp(28px,3.4vw,40px);
background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius-lg);
}
.entry-content .pull-quote p{
margin:0;font-family:"Red Hat Display",sans-serif;font-weight:600;
font-size:clamp(18px,1.9vw,22px);line-height:1.5;color:var(--txt);
}
.entry-content .pull-quote::before,
.entry-content .pull-quote::after{
position:absolute;font-family:Georgia,"Times New Roman",serif;font-weight:700;
font-size:clamp(56px,6vw,76px);line-height:1;color:var(--lime);
}
.entry-content .pull-quote::before{content:"“";top:-.18em;left:clamp(16px,2.4vw,28px)}
.entry-content .pull-quote::after{content:"”";bottom:-.56em;right:clamp(16px,2.4vw,28px)}
.entry-content .pull-quote cite{
display:block;margin-top:18px;font-style:normal;font-size:13.5px;
font-weight:700;letter-spacing:.02em;color:var(--mute);
}
.entry-content .pull-quote cite::before{content:"— "}
.entry-content code,.entry-content pre{
background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius-sm);
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
}
.entry-content code{padding:.15em .45em}
.entry-content pre{padding:18px 20px;overflow-x:auto}
.entry-content pre code{border:0;padding:0;background:none}
.entry-content img{max-width:100%;height:auto;border-radius:var(--radius)}
.entry-content figure{margin:1.4em 0}
.entry-content table{width:100%;border-collapse:collapse;font-size:15px}
.entry-content th,.entry-content td{padding:12px 14px;border:1px solid var(--line);text-align:left}
/* Divi's stylesheet colours th at #555, which fails contrast on the dark
canvas, so both cell types are set explicitly here. */
.entry-content th{color:var(--txt);font-weight:700;background:var(--panel-2)}
.entry-content td{color:var(--mute)}
.entry-footer{margin-top:36px}
.entry-tags a{
display:inline-block;margin:4px 6px 0 0;padding:6px 12px;font-size:13px;
border:1px solid var(--line-2);border-radius:999px;color:var(--mute)
}
.entry-tags a:hover{border-color:var(--blue);color:var(--txt)}
/* Post navigation + pagination.
WordPress's own markup (nav.post-navigation > .nav-links > .nav-previous /
.nav-next, each a single ) is restyled into two bordered cards so the
prev/next affordance reads clearly at a glance instead of as plain text
links - no markup change needed, single.php already passes prev_text/
next_text with a .nav-label span through the_post_navigation(). */
.post-navigation,.posts-navigation,.pagination{margin-top:clamp(40px,6vw,64px)}
.post-navigation .nav-links{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.post-navigation a{
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
height:100%;padding:20px 22px;background:var(--panel);
border:1px solid var(--line);border-radius:var(--radius);
font-size:16px;font-weight:700;color:var(--txt);line-height:1.4;
transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease-out);
}
.post-navigation a:hover{border-color:var(--lime);background:var(--panel-3);transform:translateY(-2px)}
.post-navigation .nav-label{
display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.07em;
text-transform:uppercase;color:var(--lime);margin-bottom:8px;
}
.post-navigation .nav-previous .nav-label::before{content:'←'}
.post-navigation .nav-next{text-align:right}
.post-navigation .nav-next .nav-label{justify-content:flex-end}
.post-navigation .nav-next .nav-label::after{content:'→'}
@media (max-width:720px){
.post-navigation .nav-links{grid-template-columns:1fr}
.post-navigation .nav-next{text-align:left}
.post-navigation .nav-next .nav-label{justify-content:flex-start}
}
.nav-links .page-numbers,.pagination .page-numbers{
display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;
padding:0 12px;margin:0 4px;border:1px solid var(--line);border-radius:var(--radius);
color:var(--mute);transition:border-color .3s,color .3s;
}
.pagination{display:flex;justify-content:center;flex-wrap:wrap}
.page-numbers:hover{border-color:var(--line-2);color:var(--txt)}
.page-numbers.current{background:var(--txt);color:var(--black);border-color:var(--txt)}
/* --------------------------------------------------------------------------
BLOG — index, archives, search results, single post
The listing is a tile grid (image on top) rather than the horizontal
.post-card above, which the standalone theme still uses. Blue is the accent,
matching the rest of the site; lime stays reserved for the one primary
action per view, which on these pages is the closing CTA button.
-------------------------------------------------------------------------- */
/* Butts a section against the hero above it without the full section rhythm. */
.section--tight{padding-top:clamp(22px,3vw,38px)}
/* Reading column. Narrower than .wrap--narrow: long-form wants ~70 characters. */
.wrap--read{max-width:760px}
.post-grid{
display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(20px,2.4vw,30px);margin-top:clamp(34px,4vw,48px);
}
.post-tile{
background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
overflow:hidden;transition:border-color .4s var(--ease),transform .5s var(--ease-out),background .4s var(--ease);
}
/* Match the reveal's specificity so its transitions survive this override. */
html.js .post-tile{transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),border-color .4s var(--ease),background .4s var(--ease)}
.post-tile:hover{border-color:var(--line-2);background:var(--panel-2);transform:translateY(-4px)}
.post-tile-link{display:flex;flex-direction:column;height:100%}
.post-tile-media{display:block;overflow:hidden;aspect-ratio:16/10}
.post-tile-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.post-tile:hover .post-tile-media img{transform:scale(1.05)}
.post-tile-body{display:flex;flex-direction:column;flex:1;padding:clamp(22px,2.2vw,28px)}
.post-tile-cat{
display:inline-block;align-self:flex-start;margin-bottom:14px;
font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-soft);
}
.post-tile-title{
font-family:"Red Hat Display",sans-serif;font-weight:800;font-size:clamp(18px,1.7vw,21px);
line-height:1.2;letter-spacing:-.02em;color:var(--txt);transition:color .35s var(--ease);
}
.post-tile:hover .post-tile-title{color:var(--lime)}
/* Clamped to exactly 2 lines: the source text's length varies per card
(wp_html_excerpt cuts by character count, not line count), so without
this the cards in a row end up ragged, uneven heights. */
.post-tile-excerpt{
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
margin-top:12px;font-size:14.5px;line-height:1.6;color:var(--mute);
}
.post-tile-meta{
display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:20px;
font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute-2);
}
.post-meta .dot,.post-tile-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--line-3);flex:none}
/* "Read more" row on a child-page card (template-parts/child-page-card.php) —
same bottom-of-card position as .post-tile-meta, styled as a link instead. */
.post-tile-more{
display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:20px;
font-size:13px;font-weight:700;color:var(--lime);
}
.post-tile-more .arr{width:14px;height:14px;transition:transform .3s var(--ease)}
.post-tile:hover .post-tile-more .arr{transform:translate(2px,-2px)}
/* Lead story: the newest post spans the grid and lays out side by side. */
.post-tile--lead{grid-column:1 / -1}
@media (min-width:861px){
.post-tile--lead .post-tile-link{flex-direction:row}
.post-tile--lead .post-tile-media{flex:0 0 52%;align-self:stretch}
.post-tile--lead .post-tile-body{justify-content:center;padding:clamp(28px,3vw,44px)}
.post-tile--lead .post-tile-title{font-size:clamp(24px,2.6vw,34px)}
.post-tile--lead .post-tile-excerpt{font-size:16px;margin-top:16px}
}
/* Topic strip. */
.topic-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(32px,4vw,44px)}
.topic-chip{
display:inline-flex;align-items:center;gap:10px;padding:11px 18px;
border:1px solid var(--line-2);border-radius:999px;font-size:14px;font-weight:600;color:var(--mute);
transition:border-color .35s var(--ease),color .35s var(--ease),background .35s var(--ease);
}
.topic-chip:hover{border-color:var(--blue);color:var(--txt);background:rgba(27,98,214,.12)}
.topic-chip.is-current{border-color:var(--blue);background:rgba(27,98,214,.16);color:var(--txt)}
.topic-chip-n{font-size:12px;font-weight:700;color:var(--mute-2)}
.topic-chip:hover .topic-chip-n,.topic-chip.is-current .topic-chip-n{color:var(--blue-soft)}
/* Single post: the meta row sits under a centred headline. */
.page-single .post-meta{margin-top:22px;margin-bottom:0}
.page-single .entry-content h2:first-child,
.page-single .entry-content h3:first-child{margin-top:0}
.page-single .post-navigation{border-top:1px solid var(--line);padding-top:clamp(28px,4vw,40px)}
.post-grid--related{margin-top:clamp(34px,4vw,48px)}
/* --------------------------------------------------------------------------
BLOG — hero banner, action row, in-page CTA, FAQ, author card, category CTA
(inc/shortcodes/*.php). Structure ported from the live shortcodes; colors,
radii and motion now come from the design system instead of each
shortcode's own inline