/* ==========================================================================
INFINITI TECHNOLOGY CONSULTING — Design System
Senior technology leadership for growing businesses.
========================================================================== */
/* Sora loads via the Google Fonts in each page's --
one font family sitewide (weights 400-800 carry the full display/
body/mono-label hierarchy), per Dave's Sep 2026 review call: "not
mixing three or four fonts... it's going to be a font family."
Replaces the earlier Fraunces + Public Sans + IBM Plex Mono set
(Fraunces read as an editorial/Times-New-Roman-ish serif on
review) and the original Montserrat-only system before that. The
old self-hosted files can be deleted from assets/fonts/
(Montserrat-Variable.ttf, Montserrat-Italic-Variable.ttf) whenever
convenient; nothing references them anymore. */
:root{
/* --- Color: deep navy/void base, electric blue + turquoise accents --- */
--void: #05070f;
--navy: #090e21;
--navy-2: #0d1430;
--navy-3: #121b3c;
--navy-t: rgba(9,14,33,.86);
--hairline: rgba(255,255,255,.09);
--hairline-2: rgba(255,255,255,.15);
--blue: #2f7dfa;
--blue-light: #6fb4ff;
--blue-deep: #123a8f;
--turquoise: #22d3c5;
--turquoise-2: #0ea99d;
--ink: #f3f6fc;
--ink-soft: #d7deee;
--slate: #aeb9d6;
--slate-dim: #7c88a8;
--amber: #f2a93c;
--red: #ef5a5a;
--green: #22d3c5;
/* --- Type --- */
--font-display: 'Sora', system-ui, -apple-system, sans-serif;
--font-body: 'Sora', system-ui, -apple-system, sans-serif;
--font-mono: 'Sora', ui-monospace, monospace;
/* --- Motion: intentional easing, not generic ease-in-out --- */
--ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-power3-out: cubic-bezier(0.215, 0.61, 0.355, 1);
/* --- Layout --- */
--maxw: 1240px;
--pad: clamp(20px, 5vw, 64px);
--radius: 14px;
--radius-sm: 8px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
*,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
margin:0;
background:var(--void);
color:var(--ink-soft);
font-family:var(--font-body);
font-size:16px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--turquoise); outline-offset:3px; }
h1,h2,h3,h4{
font-family:var(--font-display);
color:var(--ink);
font-weight:600;
line-height:1.12;
margin:0 0 .5em;
letter-spacing:-.01em;
text-wrap:balance;
}
h1{ font-size:clamp(2.4rem, 5vw, 4rem); font-weight:600; }
h2{ font-size:clamp(1.9rem, 3.4vw, 2.8rem); }
h3{ font-size:clamp(1.25rem, 2vw, 1.5rem); }
p{ margin:0 0 1em; }
.lede{ font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--slate); }
.container{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
/* On large monitors the fixed 1240px container leaves big dead margins on
both sides of every section. Let content breathe out further on wide
screens instead of pooling in the middle. */
@media (min-width:1600px){ :root{ --maxw:1400px; } }
@media (min-width:1920px){ :root{ --maxw:1560px; } }
.section{ padding:clamp(64px,9vw,120px) 0; position:relative; }
.section-tight{ padding:clamp(40px,6vw,72px) 0; }
/* --- Infinity-loop eyebrow: the recurring signature divider --- */
.eyebrow{
display:flex; align-items:center; gap:12px;
font-family:var(--font-mono);
text-transform:uppercase;
letter-spacing:.12em;
font-size:.92rem;
font-weight:600;
color:var(--turquoise);
margin-bottom:18px;
}
.eyebrow svg{ width:38px; height:19px; flex:none; }
.eyebrow-center{ justify-content:center; }
/* Section headers are centered by default sitewide (matches the page-hero
treatment on interior pages) rather than requiring an opt-in .center
modifier -- this was previously inconsistent: about.html and part of
index.html used .section-head.center, while every service page and the
rest of index.html used plain .section-head, which read as randomly
left-margined "hero copy" instead of a deliberate layout. */
.section-head{ max-width:720px; margin:0 auto 48px; text-align:center; }
.section-head .eyebrow{ justify-content:center; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head p{ margin-top:14px; }
/* --- Buttons --- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
padding:17px 32px;
border-radius:8px;
font-weight:600;
font-size:1rem;
letter-spacing:.002em;
border:1px solid transparent;
transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
white-space:nowrap;
}
.btn-primary{
background:var(--blue);
color:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(5,7,15,.4);
}
.btn-primary:hover{ background:var(--blue-light); transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 4px 12px -2px rgba(5,7,15,.5); }
.btn-ghost{
background:transparent;
border-color:var(--hairline-2);
color:var(--ink);
}
.btn-ghost:hover{ border-color:var(--turquoise); color:var(--turquoise); background:rgba(34,211,197,.06); }
.btn-block{ width:100%; }
.btn-sm{ padding:12px 22px; font-size:.88rem; border-radius:7px; }
/* ==========================================================================
HEADER / NAV
========================================================================== */
.site-header{
position:fixed; top:0; left:0; right:0; z-index:200;
padding:26px 0;
background:rgba(5,7,15,0);
border-bottom:1px solid transparent;
transition:background .3s cubic-bezier(.4,0,.2,1), border-color .3s cubic-bezier(.4,0,.2,1), padding .3s cubic-bezier(.4,0,.2,1);
}
.site-header.is-scrolled{
background:rgba(5,7,15,.86);
backdrop-filter:blur(14px);
border-color:var(--hairline);
padding:16px 0;
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:17px; flex:none; }
.brand img.brand-mark, .brand svg.brand-mark{ height:36px; width:auto; display:block; }
.brand-word{ font-family:var(--font-display); font-weight:500; font-size:1.32rem; color:var(--ink); letter-spacing:.005em; line-height:1.1; }
.brand-word .brand-accent{ color:var(--blue-light); }
.brand-word small{ display:block; font-family:var(--font-mono); font-weight:400; font-size:.72rem; letter-spacing:.15em; color:var(--slate); text-transform:uppercase; margin-top:3px;}
/* Wordmark reads as one solid white color everywhere the logo appears (header + footer) */
.site-header .brand-word .brand-accent, .site-footer .brand-word .brand-accent{ color:var(--ink); }
.site-header .brand-word small, .site-footer .brand-word small{ color:var(--ink); }
.site-footer .brand-mark{ height:30px; }
.nav-main{ display:flex; align-items:center; gap:4px; }
.nav-main > li{ position:relative; }
.nav-link{
display:flex; align-items:center; gap:6px;
padding:10px 14px;
font-size:.92rem; font-weight:500; color:var(--ink-soft);
border-radius:999px;
white-space:nowrap;
transition:color .24s cubic-bezier(.4,0,.2,1), background .24s cubic-bezier(.4,0,.2,1);
}
.nav-link:hover, .nav-link[aria-expanded="true"]{ color:#fff; background:rgba(255,255,255,.06); }
.nav-link .chev{ width:10px; height:10px; transition:transform .2s ease; opacity:.7; }
.nav-link[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.dropdown{
position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(-6px);
width:340px;
background:var(--navy-2);
border:1px solid var(--hairline);
border-radius:var(--radius);
padding:10px;
box-shadow:0 24px 60px -20px rgba(0,0,0,.7);
opacity:0; visibility:hidden; pointer-events:none;
transition:opacity .26s cubic-bezier(.4,0,.2,1), transform .26s cubic-bezier(.4,0,.2,1), visibility .26s cubic-bezier(.4,0,.2,1);
}
/* Invisible hover bridge: fills the 10px gap between the nav trigger and the
panel so the mouse never leaves a hoverable area on the way down. Without
this, crossing the gap drops :hover on the parent , which -- mid fade
-- can leave the panel still visible (opacity still animating out) but
already non-interactive (pointer-events reverted), which read as "the
dropdown shows but the links aren't clickable until you click Services." */
.dropdown::before{
content:"";
position:absolute; top:-10px; left:0; right:0; height:10px;
visibility:visible; pointer-events:auto;
}
.nav-main > li:hover .dropdown,
.dropdown.is-open{
opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.dropdown a{
display:flex; flex-direction:column; gap:2px;
padding:11px 14px; border-radius:var(--radius-sm);
font-size:.88rem; font-weight:600; color:var(--ink);
}
.dropdown a span{ font-family:var(--font-body); font-weight:400; font-size:.78rem; color:var(--slate); }
.dropdown a:hover{ background:rgba(47,125,250,.14); color:var(--blue-light); }
.nav-cta{ display:flex; align-items:center; gap:16px; }
.nav-phone{ display:flex; flex-direction:column; align-items:flex-end; font-family:var(--font-mono); font-size:.8rem; color:var(--slate); line-height:1.3; }
.nav-phone strong{ color:var(--ink); font-size:.92rem; }
.btn-call{
padding:10px 20px;
border-color:rgba(255,255,255,.2);
transition:border-color .22s cubic-bezier(.4,0,.2,1), background .22s cubic-bezier(.4,0,.2,1);
}
.btn-call:hover{ border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.05); }
.btn-call .call-number{ font-size:1rem; font-weight:600; font-family:var(--font-mono); letter-spacing:.02em; color:var(--ink-soft); }
.nav-toggle{ display:none; background:none; border:1px solid var(--hairline-2); border-radius:10px; width:42px; height:42px; align-items:center; justify-content:center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
content:''; display:block; width:18px; height:2px; background:var(--ink); position:relative; transition:.2s;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }
@media (max-width: 1400px){
.nav-main{ display:none; }
.nav-toggle{ display:flex; }
.nav-cta{ gap:8px; }
.brand img.brand-mark{ height:26px; width:auto; }
.brand-word{ font-size:1.05rem; }
.brand-word small{ font-size:.6rem; }
.btn-call{ padding:8px 14px; }
.btn-call .call-number{ font-size:.82rem; }
.mobile-panel{
position:fixed; inset:0; top:0; z-index:199;
background:var(--void); padding:96px 24px 40px;
transform:translateX(100%); transition:transform .3s ease;
overflow-y:auto;
}
.mobile-panel.is-open{ transform:translateX(0); }
.mobile-panel a{ display:block; padding:16px 4px; font-size:1.2rem; font-family:var(--font-display); font-weight:600; color:var(--ink); border-bottom:1px solid var(--hairline); }
.mobile-panel .mob-sub{ padding-left:16px; }
.mobile-panel .mob-sub a{ font-size:.95rem; font-family:var(--font-body); font-weight:500; color:var(--slate); border-bottom:none; padding:10px 4px; }
.mobile-only-cta{ margin-top:24px; display:flex; flex-direction:column; gap:12px; }
}
@media (max-width: 640px){
.nav-cta .btn-primary{ display:none; }
}
@media (max-width: 480px){
.brand-word small{ display:none; }
.btn-call{ padding:7px 10px; }
.btn-call .call-number{ font-size:.74rem; }
.nav-row{ gap:8px; }
}
@media (max-width: 340px){
.brand img.brand-mark{ height:22px; }
.brand-word{ font-size:.95rem; }
.nav-cta{ gap:6px; }
}
@media (min-width:1401px){ .mobile-panel{ display:none; } }
/* ==========================================================================
HOMEPAGE-ONLY HEADER VARIANT — centered infinity + wordmark lockup with
split navigation either side, floating transparently over the black
hero/site canvas. Scoped entirely under .site-header--centered so the
14 interior pages keep their existing left-logo header untouched.
========================================================================== */
.site-header--centered{ background:rgba(5,7,15,0); border-bottom-color:transparent; }
.site-header--centered.is-scrolled{
background:rgba(5,7,15,0);
backdrop-filter:none;
border-bottom-color:transparent;
padding:26px 0;
}
.nav-row--split{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; }
.nav-row--split .nav-left{ justify-self:start; }
.nav-row--split .brand-center{ justify-self:center; }
.nav-row--split .nav-right-wrap{ justify-self:end; display:flex; align-items:center; gap:16px; }
.brand-center{ display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; }
.brand-mark-center{ height:32px; width:auto; display:block; }
.brand-word-center{
font-family:var(--font-display); font-weight:600; font-size:.9rem;
letter-spacing:.16em; color:var(--ink); line-height:1.2; text-transform:uppercase;
}
.brand-word-center small{
display:block; font-family:var(--font-mono); font-weight:400; font-size:.56rem;
letter-spacing:.14em; color:var(--slate); text-transform:uppercase; margin-top:4px;
}
@media (max-width:980px){
.nav-row--split{ display:flex; justify-content:space-between; }
.brand-center{ flex-direction:row; align-items:center; gap:10px; text-align:left; }
.brand-mark-center{ height:26px; }
.brand-word-center{ font-size:.8rem; letter-spacing:.1em; }
.brand-word-center small{ display:none; }
.nav-right-wrap{ gap:8px; }
}
.hero{
position:relative;
padding:190px 0 64px;
overflow:hidden;
background:
radial-gradient(ellipse 900px 500px at 18% -10%, rgba(0,69,201,.14), transparent 60%),
radial-gradient(ellipse 700px 500px at 100% 10%, rgba(111,180,255,.08), transparent 60%);
}
/* --- Hero photo background treatment (Dave's photo) --- */
.hero-photo-stage{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.hero-glow-ring{
position:absolute; right:-6%; top:48%; transform:translateY(-50%);
width:min(56vw,880px);
opacity:.26;
filter: grayscale(1) brightness(.42) contrast(1.2) blur(11px);
-webkit-mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,0) 88%);
mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,0) 88%);
}
.hero-sheen{ position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(115deg, transparent 42%, rgba(180,210,255,.06) 50%, transparent 58%); background-size: 260% 260%; animation: sheenSweep 9s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes sheenSweep{ 0%{ background-position: 130% -10%; } 50%{ background-position: -30% 110%; } 100%{ background-position: 130% -10%; } }
@media (prefers-reduced-motion: reduce){ .hero-sheen{ animation:none; } }
.hero-photo-ground{
position:absolute; right:15.5%; bottom:86px;
width:min(30vw,480px); height:2px;
background:linear-gradient(90deg, transparent, rgba(111,180,255,.7) 18%, rgba(34,211,197,.95) 50%, rgba(111,180,255,.7) 82%, transparent);
border-radius:999px; z-index:1; pointer-events:none;
box-shadow: 0 0 30px 8px rgba(34,211,197,.32), 0 0 70px 22px rgba(47,125,250,.16);
}
@media (max-width:900px){ .hero-photo-ground{ display:none; } }
.hero-photo-img{ position:absolute; right:17%; bottom:86px; height:100%; max-height:600px; width:auto; z-index:1; -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100%); }
.hero-photo-fade{ position:absolute; inset:0; z-index:2; pointer-events:none; background: linear-gradient(90deg, var(--void) 0%, var(--void) 8%, rgba(5,7,15,.55) 38%, rgba(5,7,15,0) 62%); }
@media (max-width: 980px){
.hero-photo-img{ display:none; }
.hero-glow-ring{ opacity:.22; width:80vw; right:-26%; }
.hero-photo-fade{ background:none; }
}
.hero-inner{ position:relative; z-index:2; }
.hero-badge{
display:inline-flex; align-items:center; gap:8px;
padding:7px 16px 7px 8px; border-radius:999px;
background:rgba(34,211,197,.08); border:1px solid rgba(34,211,197,.3);
font-family:var(--font-mono); font-size:.74rem; letter-spacing:.08em; color:var(--turquoise);
margin-bottom:26px;
}
.hero-badge .dot{ width:22px; height:22px; border-radius:50%; background:rgba(34,211,197,.16); display:flex; align-items:center; justify-content:center; }
.hero-badge .dot i{ width:6px; height:6px; border-radius:50%; background:var(--turquoise); display:block; }
.hero h1{ max-width:820px; font-family:var(--font-display); font-weight:500; line-height:1.1; letter-spacing:-.012em; }
.hero .lede{ max-width:570px; margin-top:24px; font-family:var(--font-body); font-weight:400; line-height:1.62; color:var(--ink-soft); }
.hero .hero-ctas{ display:flex; flex-wrap:wrap; gap:20px; margin-top:44px; align-items:center; }
.hero .hero-ctas .btn-primary{ padding:20px 40px; font-size:1.06rem; box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 2px 6px rgba(5,7,15,.4); }
.hero .hero-ctas .btn-primary:hover{ transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 6px 16px -4px rgba(5,7,15,.5); }
.hero .hero-ctas .btn-ghost{ padding:20px 34px; font-size:1.06rem; }
@media (max-width:640px){
.hero .hero-ctas{ flex-direction:column; align-items:stretch; gap:14px; }
.hero .hero-ctas .btn{ width:100%; white-space:normal; text-align:center; }
.hero .hero-ctas .btn-primary,
.hero .hero-ctas .btn-ghost{ padding:16px 22px; font-size:.98rem; }
}
.hero-stats{ display:flex; flex-wrap:wrap; margin-top:40px; padding-top:28px; border-top:1px solid rgba(255,255,255,.08); }
.hero-stat{ padding:2px clamp(22px,3.2vw,44px) 2px 0; margin-right:clamp(22px,3.2vw,44px); border-right:1px solid rgba(255,255,255,.08); }
.hero-stat:last-child{ border-right:none; margin-right:0; padding-right:0; }
.hero-stat b{
display:block; font-family:var(--font-display); font-weight:700;
font-size:clamp(2.76rem, 3.8vw, 3.71rem); letter-spacing:-.015em; line-height:1;
background:linear-gradient(135deg, var(--blue-light), var(--turquoise) 85%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
font-variant-numeric:tabular-nums;
opacity:0; transform:translateY(10px);
transition:opacity .5s ease, transform .5s ease;
}
.hero-stat b.is-in{ opacity:1; transform:translateY(0); }
.hero-stat b.is-glowing{ animation:heroStatGlow 3.4s ease-in-out infinite; }
.hero-stat span{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.05em; text-transform:uppercase; color:var(--slate); margin-top:10px; display:block; max-width:130px; line-height:1.35; }
/* Magnetic CTA buttons: transform is driven by JS on desktop pointer
devices; this transition is what makes the pull and the return smooth. */
.hero-ctas .btn{ transition:transform .25s var(--ease-power3-out), box-shadow .25s ease; }
@keyframes heroStatGlow{
0%, 100% { filter:drop-shadow(0 0 0 rgba(111,180,255,0)); }
50% { filter:drop-shadow(0 0 16px rgba(111,180,255,.6)); }
}
@media (prefers-reduced-motion: reduce){
.hero-stat b{ opacity:1; transform:none; transition:none; }
.hero-stat b.is-glowing{ animation:none; }
}
@media (max-width:640px){
.hero-stats{ display:grid; grid-template-columns:1fr 1fr; gap:24px 20px; }
.hero-stat{ padding:0; margin-right:0; border-right:none; }
}
/* page hero (interior pages) — shorter */
.page-hero{
position:relative; overflow:hidden;
padding:168px 0 76px;
background:
radial-gradient(ellipse 800px 420px at 85% -20%, rgba(47,125,250,.24), transparent 60%);
border-bottom:1px solid var(--hairline);
}
.page-hero .crumb{ font-family:var(--font-mono); font-size:.76rem; color:var(--slate-dim); letter-spacing:.06em; margin-bottom:18px; }
.page-hero .crumb a:hover{ color:var(--turquoise); }
.page-hero h1{ max-width:920px; text-wrap:balance; }
.page-hero .lede{ max-width:600px; }
.page-hero > .container{ position:relative; z-index:2; text-align:center; }
.page-hero h1{ margin-left:auto; margin-right:auto; }
.page-hero .lede{ margin-left:auto; margin-right:auto; }
.page-hero .hero-ctas{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-top:8px; }
@media (max-width:640px){
.page-hero .hero-ctas{ flex-direction:column; align-items:stretch; gap:14px; }
.page-hero .hero-ctas .btn{ width:100%; white-space:normal; text-align:center; }
}
/* ==========================================================================
CARDS / GRIDS
========================================================================== */
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.industries-grid{ grid-template-columns:repeat(5,1fr); }
@media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }
@media (max-width:980px){ .industries-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .industries-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px){ .industries-grid{ grid-template-columns:1fr; } }
.card{
background:linear-gradient(180deg, var(--navy-2), var(--navy));
border:1px solid var(--hairline);
border-radius:var(--radius);
padding:30px;
transition:border-color .2s ease, transform .2s ease;
}
.card:hover{ border-color:rgba(47,125,250,.4); transform:translateY(-3px); }
.card-icon{
width:46px; height:46px; border-radius:12px;
background:rgba(47,125,250,.12); border:1px solid rgba(47,125,250,.28);
display:flex; align-items:center; justify-content:center; margin-bottom:20px; flex:none;
color:var(--blue-light);
}
.card-icon svg{ width:22px; height:22px; }
.card h3{ margin-bottom:10px; }
.card p{ color:var(--slate); font-size:.94rem; margin-bottom:16px; }
.card-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.tag{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.03em; padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.05); color:var(--slate); }
.card-link{ display:inline-flex; align-items:center; gap:6px; font-size:.88rem; font-weight:600; color:var(--blue-light); }
.card-link svg{ width:14px; height:14px; transition:transform .18s ease; }
.card:hover .card-link svg{ transform:translateX(3px); }
.card-roomy{ padding:42px 38px; }
.card-icon-red{ background:rgba(239,90,90,.12); border-color:rgba(239,90,90,.28); color:#ef5a5a; }
/* A longer intro paragraph under a centered section title reads as prose,
left-aligned at a normal reading measure, instead of being force-centered
into a jagged, narrow column. */
.section-copy{ max-width:700px; margin:20px auto 0; text-align:left; }
.section-copy + .section-copy{ margin-top:16px; }
/* Full-width two-column comparison table (break-fix vendor vs. Fractional
IT Director, etc.) -- spreads a "vs." comparison across the whole
container instead of squeezing it into half a two-col row. */
.compare-table{
display:grid; grid-template-columns:1fr 1fr;
border:1px solid var(--hairline); border-radius:var(--radius);
overflow:hidden; background:var(--navy-2);
}
.compare-col + .compare-col{ border-left:1px solid var(--hairline); }
.compare-col-good{ background:linear-gradient(180deg, rgba(34,211,197,.07), transparent); }
.compare-head{
display:flex; align-items:center; gap:10px;
padding:26px 34px; font-family:var(--font-mono); font-size:.78rem;
text-transform:uppercase; letter-spacing:.08em; font-weight:600;
border-bottom:1px solid var(--hairline);
}
.compare-col-bad .compare-head{ color:var(--slate); }
.compare-col-good .compare-head{ color:var(--ink); }
.compare-dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.compare-dot-red{ background:var(--red); }
.compare-dot-turquoise{ background:var(--turquoise); }
.compare-col ul{ display:flex; flex-direction:column; }
.compare-col li{
display:flex; align-items:flex-start; gap:14px;
padding:20px 34px; font-size:.95rem; line-height:1.5;
border-bottom:1px solid var(--hairline);
}
.compare-col li:last-child{ border-bottom:none; }
.compare-col-bad li{ color:var(--slate); }
.compare-col-good li{ color:var(--ink-soft); }
.compare-col li svg{ flex:none; margin-top:3px; }
@media (max-width:760px){
.compare-table{ grid-template-columns:1fr; }
.compare-col + .compare-col{ border-left:none; border-top:1px solid var(--hairline); }
}
/* Outcome-group cards (Protect / Keep / Lead / Prepare) */
.outcome-card{ position:relative; padding-top:34px; }
.outcome-card .num{ position:absolute; top:26px; right:28px; font-family:var(--font-mono); font-size:.75rem; color:var(--slate-dim); }
.outcome-card ul{ margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.outcome-card li{ display:flex; gap:10px; font-size:.88rem; color:var(--slate); align-items:flex-start; }
.outcome-card li svg{ width:15px; height:15px; flex:none; margin-top:3px; color:var(--turquoise); }
/* Layer list (security layers) */
.layer-list{ display:flex; flex-direction:column; border:1px solid var(--hairline); border-radius:var(--radius); overflow:hidden; }
.layer-row{ display:flex; gap:18px; align-items:flex-start; padding:20px 24px; border-bottom:1px solid var(--hairline); }
.layer-row:last-child{ border-bottom:none; }
.layer-row:nth-child(odd){ background:rgba(255,255,255,.014); }
.layer-check{ width:26px; height:26px; border-radius:50%; background:rgba(34,211,197,.14); border:1px solid rgba(34,211,197,.4); display:flex; align-items:center; justify-content:center; flex:none; margin-top:2px; }
.layer-check svg{ width:13px; height:13px; color:var(--turquoise); }
.layer-row h4{ font-family:var(--font-body); font-weight:600; color:var(--ink); font-size:1rem; margin:0 0 4px; }
.layer-row p{ margin:0; font-size:.88rem; color:var(--slate); }
.layer-row .stack{ font-family:var(--font-mono); font-size:.72rem; color:var(--turquoise-2); margin-top:6px; display:block; }
.layer-addon .layer-check{ background:rgba(242,169,60,.14); border-color:rgba(242,169,60,.4); }
.layer-addon .layer-check svg{ color:var(--amber); }
.addon-flag{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; color:var(--amber); border:1px solid rgba(242,169,60,.35); padding:2px 8px; border-radius:999px; margin-left:8px; }
/* Numbered process -- capped to a readable measure and centered under the
(now-centered) section header instead of stretching the full container
width, which read as a stray "long sentence" with numbers off to the side. */
.process-row{ display:grid; grid-template-columns:80px 1fr; gap:20px; padding:28px 0; border-top:1px solid var(--hairline); max-width:760px; margin-left:auto; margin-right:auto; text-align:left; }
.process-row:last-child{ border-bottom:1px solid var(--hairline); }
.process-num{
font-family:var(--font-display); font-size:1.8rem; font-weight:700;
background:linear-gradient(135deg, var(--blue-light), var(--turquoise) 85%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
}
@media (max-width:640px){ .process-row{ grid-template-columns:44px 1fr; } .process-num{ font-size:1.3rem; } }
/* FAQ accordion -- centered, readable measure to match the section header
above instead of stretching full-width. */
.faq{ border-top:1px solid var(--hairline); max-width:820px; margin-left:auto; margin-right:auto; }
.faq-item{ border-bottom:1px solid var(--hairline); }
.faq-q{
width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
background:none; border:none; text-align:left; padding:24px 4px; color:var(--ink);
font-family:var(--font-display); font-size:1.02rem; font-weight:550;
}
.faq-q .plus{ position:relative; width:20px; height:20px; flex:none; }
.faq-q .plus::before,.faq-q .plus::after{ content:''; position:absolute; background:var(--turquoise); border-radius:2px; transition:transform .25s ease, opacity .25s ease; }
.faq-q .plus::before{ width:100%; height:2px; top:9px; left:0; }
.faq-q .plus::after{ width:2px; height:100%; left:9px; top:0; }
.faq-item.is-open .plus::after{ transform:rotate(90deg); opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a-inner{ padding:0 4px 26px; color:var(--slate); font-size:.94rem; max-width:800px; }
/* CTA band */
.cta-band{
position:relative; overflow:hidden; border-radius:24px;
padding:clamp(40px,6vw,72px);
background:linear-gradient(135deg, var(--navy-3), var(--navy) 60%);
border:1px solid var(--hairline);
text-align:center;
}
.cta-band::before{
content:''; position:absolute; inset:-40%; z-index:0;
background:radial-gradient(circle at 30% 30%, rgba(47,125,250,.22), transparent 55%), radial-gradient(circle at 80% 70%, rgba(34,211,197,.16), transparent 50%);
}
.cta-band > *{ position:relative; z-index:1; }
.cta-band h2{ max-width:680px; margin-left:auto; margin-right:auto; }
.cta-band .lede{ max-width:560px; margin-left:auto; margin-right:auto; }
.cta-band .hero-ctas{ justify-content:center; }
/* --- Value strip (Protect / Reduce Risk / Focus on Clients band) --- */
.value-strip{
display:flex; align-items:stretch; justify-content:center; flex-wrap:wrap;
background:linear-gradient(90deg, rgba(13,20,48,.75), rgba(18,27,60,.9));
border:1px solid var(--hairline);
border-radius:var(--radius);
padding:8px clamp(12px,3vw,28px);
}
.value-item{ display:flex; align-items:center; padding:28px clamp(20px,3vw,36px); flex:1; min-width:230px; justify-content:flex-start; }
.value-text{ font-family:var(--font-display); font-size:1.1rem; line-height:1.35; color:var(--ink-soft); }
.value-text strong{ display:block; font-weight:600; font-size:1.4rem; letter-spacing:-.01em; color:#fff; margin-bottom:2px; }
.value-divider{ width:1px; align-self:stretch; background:var(--hairline-2); margin:6px 0; }
@media (max-width:820px){ .value-divider{ display:none; } .value-strip{ flex-direction:column; padding:6px 20px; } .value-item{ border-bottom:1px solid var(--hairline); padding:16px 4px; } .value-item:last-child{ border-bottom:none; } }
/* --- Tagline strap (brand line: Strategy. Security. Peace of Mind.) --- */
.hero .tagline-strap{ font-family:var(--font-body); font-weight:500; font-size:.98rem; letter-spacing:.002em; color:var(--ink-soft); margin-top:14px; }
.hero .tagline-strap b{ color:var(--ink); font-weight:600; }
.hero .tagline-strap .accent, .hero .tagline-strap .accent b{
color:var(--blue-light);
background:linear-gradient(90deg, var(--blue-light), var(--turquoise));
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
/* Stat / score ring */
.ring-wrap{ display:flex; align-items:center; gap:28px; }
.ring{ width:132px; height:132px; flex:none; }
/* Testimonial */
.quote-card{ padding:34px; }
.stars{ display:flex; gap:3px; margin-bottom:16px; color:var(--amber); }
.stars svg{ width:16px; height:16px; }
.quote-card p{ color:var(--ink-soft); font-size:1rem; }
.quote-by{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.quote-avatar{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:#fff; font-size:.9rem; }
.quote-by b{ display:block; color:var(--ink); font-size:.88rem; }
.quote-by span{ font-size:.78rem; color:var(--slate-dim); }
/* --- Testimonial marquee (real Google reviews) --- */
.reviews-meta{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:-8px; margin-bottom:40px; }
.reviews-meta .stars{ margin-bottom:0; }
.reviews-meta b{ color:var(--ink); font-size:1.05rem; font-family:var(--font-display); }
.reviews-meta span{ color:var(--slate-dim); font-size:.9rem; }
.reviews-meta a{ color:var(--blue-light); font-size:.9rem; font-weight:600; margin-left:6px; }
.reviews-meta a:hover{ color:var(--turquoise); }
.testimonial-marquee{
position:relative; overflow:hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.testimonial-track{
display:flex; gap:24px; width:max-content;
padding:4px clamp(20px,5vw,64px) 12px;
animation: testimonialScroll 62s linear infinite;
}
.testimonial-marquee:hover .testimonial-track,
.testimonial-marquee:focus-within .testimonial-track{ animation-play-state:paused; }
.quote-card.marquee-item{ width:340px; flex:none; display:flex; flex-direction:column; }
.quote-card.marquee-item p{ flex:1; }
@keyframes testimonialScroll{
0%{ transform:translateX(0); }
100%{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
.testimonial-track{ animation:none; overflow-x:auto; scroll-snap-type:x proximity; }
.quote-card.marquee-item{ scroll-snap-align:start; }
}
@media (max-width:640px){ .quote-card.marquee-item{ width:270px; } }
/* ==========================================================================
FOOTER
========================================================================== */
.site-footer{ border-top:1px solid var(--hairline); padding:72px 0 32px; background:var(--navy-t); }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:52px; }
@media (max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } }
.footer-brand p{ color:var(--slate); font-size:.88rem; max-width:280px; margin-top:14px; }
.footer-col h4{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate-dim); margin-bottom:16px; }
.footer-col a{ display:block; font-size:.88rem; color:var(--slate); padding:6px 0; transition:color .15s ease; }
.footer-col a:hover{ color:var(--turquoise); }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; padding-top:28px; border-top:1px solid var(--hairline); font-size:.78rem; color:var(--slate-dim); }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:34px; height:34px; border:1px solid var(--hairline-2); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.footer-social a:hover{ border-color:var(--turquoise); color:var(--turquoise); }
.footer-social svg{ width:15px; height:15px; }
.footer-legal-links{ display:flex; gap:18px; flex-wrap:wrap; }
.disclaimer-strip{ font-size:.76rem; color:var(--slate-dim); border-top:1px solid var(--hairline); margin-top:24px; padding-top:20px; line-height:1.7; }
/* ==========================================================================
UTILITIES / REVEAL ANIMATION
========================================================================== */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.08s; } .reveal-delay-2{ transition-delay:.16s; } .reveal-delay-3{ transition-delay:.24s; } .reveal-delay-4{ transition-delay:.32s; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
@media (max-width:860px){ .two-col{ grid-template-columns:1fr; gap:40px; } }
.two-col.reverse{ direction:rtl; } .two-col.reverse > *{ direction:ltr; }
.badge-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.badge-row .tag{ background:rgba(255,255,255,.04); border:1px solid var(--hairline); }
.divider-loop{ width:52px; height:26px; margin:0 auto 20px; opacity:.7; }
.center{ text-align:center; }
.muted{ color:var(--slate); }
.small{ font-size:.85rem; }
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.figure-frame{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--hairline); position:relative; }
.figure-frame img{ width:100%; height:100%; object-fit:cover; }
.figure-frame::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 60%, rgba(5,7,15,.5)); pointer-events:none; }
.industry-card{ position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--hairline); aspect-ratio:3/4; display:block; transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.industry-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.industry-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(5,7,15,.55) 78%, rgba(5,7,15,.9) 100%); pointer-events:none; transition:background .35s ease; }
.industry-card .industry-label{ position:absolute; left:0; right:0; bottom:0; padding:20px 18px; z-index:2; transform:translateY(6px); transition:transform .35s ease; }
.industry-card .industry-label h3{ margin:0; font-size:1.05rem; color:var(--ink); }
.industry-card:hover{ transform:translateY(-5px); border-color:rgba(111,180,255,.5); box-shadow:0 18px 40px rgba(5,7,15,.45); }
.industry-card:hover img{ transform:scale(1.08); }
.industry-card:hover .industry-label{ transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
.industry-card, .industry-card img, .industry-card .industry-label{ transition:none; }
}
.skip-link{ position:absolute; left:-999px; top:0; background:var(--blue); color:#fff; padding:10px 16px; border-radius:8px; z-index:999; }
.skip-link:focus{ left:16px; top:16px; }
@media print{
.site-header, .site-footer, .no-print, .site-bg, .hero-bg-canvas{ display:none !important; }
body{ background:#fff; color:#0d1430; }
/* The site's palette is tuned for light text on a dark background. Printed
to paper (or saved as a PDF) that leaves headings and muted copy nearly
white-on-white -- barely legible. Re-map the same custom properties to
print-safe, readable values instead of touching every selector that
consumes them; everything built on var(--ink), var(--slate), var(--hairline)
etc. (cards, badges, links, the Risk Review report) picks this up for free. */
:root{
--void:#fff; --navy:#fff; --navy-2:#f6f7fb; --navy-3:#eef1f7; --navy-t:rgba(255,255,255,.95);
--hairline:rgba(13,20,48,.14); --hairline-2:rgba(13,20,48,.24);
--blue:#1a56c4; --blue-light:#2f6fe0; --blue-deep:#0f2d6e;
--turquoise:#0ea99d; --turquoise-2:#0b8177;
--ink:#0d1430; --ink-soft:#1c2540; --slate:#3a4562; --slate-dim:#5b6684;
--amber:#a8691a; --red:#c23a3a; --green:#0ea99d;
}
.card{ box-shadow:none; }
.card:hover{ transform:none; }
/* Risk Review score ring: the number and track are hardcoded SVG colors
tuned for the dark theme (near-white fill, 8%-white track), so they need
their own print override rather than inheriting the variables above. */
#rr-score-ring circle:not(#rr-score-arc){ stroke:rgba(13,20,48,.16) !important; }
#rr-score-num{ fill:#0d1430 !important; }
#rr-score-ring text:not(#rr-score-num){ fill:#5b6684 !important; }
}