/* ==========================================================================
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
-------------------------------------------------------------------------- */
*,*::before,*::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{
background:var(--bg);
color:var(--txt);
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;
}
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);
}
h2{font-size:clamp(31px,4.2vw,58px)}
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}
/* 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. Mirrors
app.css - this file is the homepage's own separately-bundled copy of
the same nav styles (see the note above .dropdown). */
.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 (see app.css for why). */
.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;height:80px;padding:12px 28px;
border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}
.pacc img{height:100%;width:auto;max-width:220px;object-fit:contain}
/* --------------------------------------------------------------------------
11. TWO PLAYBOOKS
-------------------------------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:58px;align-items:stretch}
.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)}
/* Shared CTA below both cards, replacing the two per-card buttons. */
.segments-cta{display:flex;justify-content:center;margin-top:36px}
/* --------------------------------------------------------------------------
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:19px}
.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);
}
.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 ----
1140px, not 900px: the 5-up grid squeezes "Debt Recovery Strategy" (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. */
@media (max-width:1140px){
.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}
.final h2{max-width:30ch;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)}
}
@media (max-width:1080px){
.why-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
.why-grid{grid-template-columns:1fr}
}
@media (max-width:1080px){
.solve-grid{grid-template-columns:repeat(2,1fr)}
.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 / 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(--purple-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(--purple-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(--purple-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(--purple);
background:var(--panel);border-radius:0 var(--radius) var(--radius) 0;color:var(--txt);
}
.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}
.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(--purple);color:var(--txt)}
/* Post navigation + pagination. */
.post-navigation,.posts-navigation,.pagination{margin-top:clamp(40px,6vw,64px)}
.post-navigation .nav-links{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.post-navigation a{color:var(--mute)}
.post-navigation a:hover{color:var(--txt)}
.post-navigation .nav-label{display:block;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute-2);margin-bottom:4px}
.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)}
/* -------------------------------------------------------------------------
FORMS — native, search, comments, Contact Form 7, WPForms
Rounded fields, dark surfaces, premium spacing, purple focus glow.
------------------------------------------------------------------------- */
.kollecta-form,.contact-info,.contact-map{max-width:640px;margin:36px auto 0;text-align:left}
.contact-map{margin-top:44px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line)}
.contact-map iframe{display:block;width:100%;min-height:340px;border:0}
.contact-info{color:var(--mute);text-align:center}
input[type=text],input[type=email],input[type=url],input[type=tel],
input[type=number],input[type=search],input[type=date],input[type=password],
textarea,select,
.wpforms-field input,.wpforms-field textarea,.wpforms-field select,
.wpcf7-form input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.wpcf7-form textarea,.wpcf7-form select{
width:100%;padding:14px 16px;background:var(--panel-2);color:var(--txt);
border:1px solid var(--line-2);border-radius:var(--radius);
font-family:inherit;font-size:15px;line-height:1.4;
transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--mute-2)}
input:focus,textarea:focus,select:focus,
.wpcf7-form input:focus,.wpcf7-form textarea:focus,.wpforms-field input:focus,.wpforms-field textarea:focus{
outline:none;border-color:var(--purple);background:var(--panel-3);
box-shadow:0 0 0 3px rgba(143,0,238,.28);
}
input:hover:not(:focus),textarea:hover:not(:focus),select:hover:not(:focus){border-color:var(--line-3)}
label{display:block;margin-bottom:8px;color:var(--txt);font-weight:600;font-size:14px}
textarea{min-height:140px;resize:vertical}
.search-form{display:flex;gap:10px;width:100%;max-width:460px}
.search-form .search-field{flex:1}
.search-form .search-submit{white-space:nowrap}
/* Submit buttons across native + plugin forms adopt the brand button. */
input[type=submit],button[type=submit],
.wpcf7-form input[type=submit],.wpforms-submit,.search-submit{
display:inline-flex;align-items:center;justify-content:center;
padding:14px 26px;border:0;border-radius:999px;cursor:pointer;
background:var(--purple);color:#fff;font-family:inherit;font-weight:600;font-size:15px;
transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),filter .3s;
}
input[type=submit]:hover,button[type=submit]:hover,
.wpcf7-form input[type=submit]:hover,.wpforms-submit:hover,.search-submit:hover{
transform:translateY(-2px);box-shadow:0 12px 30px rgba(143,0,238,.35);filter:brightness(1.06);
}
/* Plugin field spacing + validation states. */
.wpcf7-form p,.wpforms-field{margin-bottom:18px}
.wpcf7 form .wpcf7-response-output,.wpforms-error-container{
margin:18px 0 0;padding:12px 16px;border-radius:var(--radius);
border:1px solid var(--line-2);color:var(--mute);background:var(--panel)
}
.wpcf7-not-valid-tip,.wpforms-error{color:var(--red);font-size:13px;margin-top:6px}
.wpcf7-not-valid{border-color:var(--red) !important}
.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.unaccepted .wpcf7-response-output{border-color:var(--amber)}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--emerald);color:var(--txt)}
/* Comments. */
.comments-area{margin-top:clamp(48px,7vw,72px);padding-top:clamp(32px,4vw,44px);border-top:1px solid var(--line)}
.comments-title,.comment-reply-title{
font-family:"Red Hat Display",sans-serif;font-weight:700;color:var(--txt);
font-size:clamp(20px,2.2vw,26px);margin-bottom:24px
}
.comment-list{list-style:none;margin:0;padding:0}
.comment-list .comment{margin-bottom:24px}
.comment-body{padding:20px 22px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg)}
.comment-list .children{list-style:none;margin:20px 0 0;padding-left:clamp(16px,3vw,32px)}
.comment-author{display:flex;align-items:center;gap:12px}
.comment-author .fn{color:var(--txt);font-weight:600;font-style:normal}
.comment-metadata,.comment-metadata a{color:var(--mute-2);font-size:13px}
.comment-content{margin-top:12px;color:var(--mute);line-height:1.7}
.comment-content a{color:var(--purple-soft)}
.comment-respond{margin-top:32px}
.comment-form{display:grid;gap:16px}
.comment-form-cookies-consent{display:flex;align-items:flex-start;gap:8px}
.comment-form-cookies-consent input{width:auto}
.comment-form-cookies-consent label{margin:0;font-weight:400;color:var(--mute)}
/* Widgets. */
.widget{margin-bottom:28px}
.widget-title{font-family:"Red Hat Display",sans-serif;color:var(--txt);font-size:15px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px}
.widget ul{list-style:none;margin:0;padding:0}
.widget li{margin:8px 0}
.widget a{color:var(--mute)}
.widget a:hover{color:var(--txt)}
@media (prefers-reduced-motion:reduce){
.post-card,.post-card-media img{transition:none}
}
/* ==========================================================================
14. INTERIOR PAGE TEMPLATES (Service / Industry / Story / Contact / Divi)
Reuses the design tokens so every page matches the cinematic front page.
========================================================================== */
/* Clear the fixed nav on interior pages that open with a text hero. */
.page-hero-sec{padding-top:clamp(160px,20vh,230px)}
@media (max-width:600px){.page-hero-sec{padding-top:clamp(140px,24vh,190px)}}
.divi-canvas{padding-top:76px}
.divi-canvas .et-l--post,.divi-canvas .et_builder_inner_content{min-height:1px}
/* Featured / wide media block. */
.page-media{margin:0;border-radius:var(--radius-lg);overflow:hidden}
.page-media img{display:block;width:100%;height:auto}
/* --- Story pages (About / Technology): alternating copy + media rows ------ */
.story-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.story-row.is-flip .story-copy{order:2}
.story-row.is-flip .story-media{order:1}
.story-row--solo{grid-template-columns:1fr;max-width:820px;margin-inline:auto;text-align:center}
.story-copy h2{
font-family:"Red Hat Display",sans-serif;font-weight:800;letter-spacing:-.025em;
font-size:clamp(26px,3.4vw,44px);line-height:1.06;color:var(--txt);margin-bottom:18px;
}
.story-media{border-radius:var(--radius-lg);overflow:hidden}
.story-media img{display:block;width:100%;height:auto}
@media (max-width:840px){
.story-row{grid-template-columns:1fr;gap:28px}
.story-row.is-flip .story-copy,.story-row.is-flip .story-media{order:0}
.story-row--solo{text-align:left}
}
/* --- Contact page: form + aside ------------------------------------------ */
.contact-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.contact-aside{display:grid;gap:24px}
.contact-details h3,.contact-details h4{font-family:"Red Hat Display",sans-serif;color:var(--txt)}
.contact-details a{color:var(--purple-soft)}
@media (max-width:860px){.contact-layout{grid-template-columns:1fr}}
/* HubSpot embedded form -> dark theme.
HubSpot injects its own markup (.hs-form, .hs-input, .hs-button). These
overrides align it with the theme without touching HubSpot itself. */
.hs-form-frame{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(20px,3vw,34px)}
.hs-form-frame .hs-form-field{margin-bottom:18px}
.hs-form-frame label,.hs-form-frame .hs-form-field > label{color:var(--txt);font-weight:600;font-size:14px;margin-bottom:8px;display:block}
.hs-form-frame .hs-field-desc{color:var(--mute-2);font-size:13px;margin-bottom:8px}
.hs-form-frame input[type=text],
.hs-form-frame input[type=email],
.hs-form-frame input[type=tel],
.hs-form-frame input[type=number],
.hs-form-frame textarea,
.hs-form-frame select,
.hs-form-frame .hs-input{
width:100%;padding:14px 16px;background:var(--panel-2);color:var(--txt);
border:1px solid var(--line-2);border-radius:var(--radius);font-family:inherit;font-size:15px;
transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
}
.hs-form-frame .hs-input:focus{outline:none;border-color:var(--purple);background:var(--panel-3);box-shadow:0 0 0 3px rgba(143,0,238,.28)}
.hs-form-frame .hs-input::placeholder{color:var(--mute-2)}
.hs-form-frame ul.inputs-list{list-style:none;margin:0;padding:0}
.hs-form-frame .hs-error-msg,.hs-form-frame .hs-error-msgs label{color:var(--red);font-size:13px}
.hs-form-frame .hs-button,
.hs-form-frame input[type=submit]{
display:inline-flex;align-items:center;justify-content:center;
padding:14px 28px;border:0;border-radius:999px;cursor:pointer;
background:var(--purple);color:#fff;font-family:inherit;font-weight:600;font-size:15px;
transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),filter .3s;
}
.hs-form-frame .hs-button:hover,.hs-form-frame input[type=submit]:hover{
transform:translateY(-2px);box-shadow:0 12px 30px rgba(143,0,238,.35);filter:brightness(1.06);
}
.hs-form-frame .legal-consent-container,.hs-form-frame .hs-richtext{color:var(--mute);font-size:13px}
.hs-form-frame .hs-richtext a{color:var(--purple-soft)}
/* HubSpot's newer "Forms Component" embed (hsfc-* classes) is what every
real form on the site actually renders as - the rules above target an
older HubSpot embed style and no longer match anything live. Unscoped
rather than tied to one wrapper class: this raw embed shows up inside
.hs-form-frame and, via the separate kollecta-popups plugin, inside
.kp-popup__form-body too (the CTA bar's "Refer a business" popup) -
every context it's used in on this site is one of this theme's dark
panels. Brand lime submit button, not the purple used above - mirrors
app.css. The required-field asterisk
(.hsfc-FieldLabel__RequiredIndicator) keeps its own red, since that rule
targets it directly and wins over inheritance from its parent label
regardless of !important here. */
.hsfc-FieldLabel,
.hsfc-RichText{color:#fff!important}
.hsfc-Form input::placeholder,
.hsfc-Form textarea::placeholder{color:var(--mute-2)!important}
.hsfc-Button{
background:var(--lime)!important;border-color:var(--lime)!important;color:var(--black)!important;
}
/* --------------------------------------------------------------------------
CONSUMER vs COMMERCIAL (.split/.pbook "This includes" block)
-------------------------------------------------------------------------- */
.pbook-incl{margin-top:26px;border-top:1px solid var(--line);padding-top:20px}
.pbook-lead{display:block;font-size:14px;color:var(--mute);margin-bottom:10px}
.pbook-incl .pbook-list{margin-top:0;border-top:0;padding-top:0}
.pbook-incl .pbook-list svg{width:7px;height:7px;margin-top:8px;color:var(--blue-soft)}
/* --------------------------------------------------------------------------
THE CHALLENGE — $902B stat + decision
-------------------------------------------------------------------------- */
.challenge{overflow:hidden}
.challenge::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
background-image:linear-gradient(var(--line) 1px,transparent 1px),
linear-gradient(90deg,var(--line) 1px,transparent 1px);
background-size:64px 64px;
-webkit-mask-image:radial-gradient(120% 90% at 22% 42%,#000,transparent 70%);
mask-image:radial-gradient(120% 90% at 22% 42%,#000,transparent 70%);
}
.challenge .eyebrow{margin-bottom:clamp(34px,4vw,54px)}
.challenge-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.challenge-fig{
font-family:"Red Hat Display",sans-serif;font-weight:900;letter-spacing:-.045em;line-height:.86;
font-size:clamp(84px,13vw,208px);color:var(--txt);
}
.challenge-fig span{color:var(--blue)}
.challenge-stat p{margin-top:clamp(20px,2.4vw,30px);color:var(--mute);font-size:16px;line-height:1.62;max-width:440px}
.challenge-choice h2{
font-family:"Red Hat Display",sans-serif;font-weight:800;letter-spacing:-.025em;line-height:1.04;
font-size:clamp(28px,3.6vw,46px);color:var(--txt);margin-bottom:clamp(20px,2.4vw,30px);
}
.challenge-row{
display:flex;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);
color:var(--mute);font-size:clamp(15px,1.5vw,18px);
}
.challenge-ico{
width:34px;height:34px;flex:none;border-radius:50%;border:1px solid var(--line-2);
display:flex;align-items:center;justify-content:center;color:var(--blue-soft);
}
.challenge-ico svg{width:16px;height:16px}
.challenge-note{
margin-top:clamp(22px,2.4vw,30px);font-family:"Red Hat Display",sans-serif;font-weight:800;
font-size:clamp(17px,1.7vw,21px);color:var(--txt);
}
@media (max-width:860px){
.challenge-grid{grid-template-columns:1fr;gap:clamp(30px,7vw,48px)}
.challenge-stat p{max-width:none}
}
/* ==========================================================================
15. TECHNOLOGY PAGE (page-templates/tech.php)
========================================================================== */
/* Feature split: image + copy with checklist blocks. */
.tech-feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.tech-feature-media{margin:0;border-radius:var(--radius-lg);overflow:hidden}
.tech-feature-media img{display:block;width:100%;height:auto}
.tech-feature-copy--solo{max-width:820px;margin-inline:auto}
.tech-feature-copy > h2{
font-family:"Red Hat Display",sans-serif;font-weight:800;letter-spacing:-.025em;line-height:1.05;
font-size:clamp(28px,3.4vw,44px);color:var(--txt);margin-bottom:18px;
}
.tech-feature-copy > .lede{color:var(--mute);font-size:clamp(16px,1.4vw,18px);line-height:1.6}
.tech-block{margin-top:clamp(28px,3.2vw,40px)}
.tech-block h3{font-family:"Red Hat Display",sans-serif;font-weight:700;font-size:clamp(18px,1.9vw,22px);color:var(--txt);margin-bottom:12px}
.tech-block > p{color:var(--mute);font-size:15.5px;line-height:1.62;margin-bottom:16px}
.tech-checks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.tech-checks li{display:flex;gap:12px;align-items:flex-start;color:var(--mute);font-size:15px;line-height:1.5}
.tech-checks svg{width:20px;height:20px;flex:none;margin-top:1px;color:var(--blue-soft)}
@media (max-width:860px){
.tech-feature{grid-template-columns:1fr;gap:28px}
.tech-feature-media{order:-1}
}
/* Core technology infrastructure: partner cards. */
.tech-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.6vw,22px);margin-top:clamp(40px,5vw,60px)}
.techcard{
background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
padding:clamp(22px,2.4vw,30px);transition:border-color .4s var(--ease),transform .5s var(--ease-out);
}
.techcard:hover{border-color:var(--line-2);transform:translateY(-6px)}
.techcard-logo{
display:flex;align-items:center;justify-content:center;height:70px;margin-bottom:22px;
background:#fff;border-radius:var(--radius);padding:14px 16px;
}
.techcard-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.techcard h3{font-family:"Red Hat Display",sans-serif;font-weight:700;font-size:18px;color:var(--txt);margin-bottom:10px}
.techcard p{color:var(--mute);font-size:14.5px;line-height:1.56}
@media (max-width:1000px){.tech-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.tech-grid{grid-template-columns:1fr}}
.intake-lede{color:var(--mute);font-size:15px;line-height:1.6;margin-top:14px;max-width:560px}
/* Problems cards: static layout so the row never "jumps" on hover, and every
heading/description aligns consistently (was a hover-reveal that grew the row). */
.solve-grid .scard{min-height:0;padding:28px 26px 30px}
.solve-grid .scard .scard-ico{margin-top:22px;opacity:1;transform:none}
.solve-grid .scard:hover .scard-ico,.solve-grid .scard:focus-within .scard-ico{opacity:1;transform:none}
.solve-grid .scard h3{margin:20px 0 0}
.solve-grid .scard .scard-sol{max-height:none;opacity:1;overflow:visible;margin-top:12px}
.solve-grid .scard .peek{display:none}