/* Self-hosted Manrope (variable, weights 300–800) — replaces the Google Fonts network request. font-display:swap shows fallback text immediately, then swaps in Manrope when it loads (no invisible-text flash). Latin + Latin-Ext subsets cover all site copy incl. accented names. */ @font-face{ font-family:'Manrope';font-style:normal;font-weight:300 800;font-display:swap; src:url(../fonts/manrope-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Manrope';font-style:normal;font-weight:300 800;font-display:swap; src:url(../fonts/manrope-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } *{box-sizing:border-box;margin:0;padding:0;} html{font-size:16px;scroll-behavior:smooth; /* Same gradient as so screens wider than the 1980px content cap fill the side gutters seamlessly instead of chopping the background. */ background:#1a1535; background:linear-gradient(180deg, #1a1535 0%, #2e1f6e 35%, #1a1535 70%, #8582c3 100%);} :root{ color-scheme: dark; /* native browser/window scrollbars + form controls render dark to match */ --gold: #dfa949; --gold-dk: #b8882e; --gold-lt: #f5e4b8; --violet: #8582c3; --violet-dk: #3919ba; --violet-deep:#2a1290; --violet-lt: #e8e8f7; --dark: #1a1535; --body: #3d3860; --white: #ffffff; --glass-bg: rgba(255,255,255,0.10); --glass-bg2: rgba(255,255,255,0.16); --glass-border: rgba(255,255,255,0.28); --glass-border-strong: rgba(255,255,255,0.45); --glass-blur: blur(18px); --glass-blur-sm: blur(10px); } /* Never allow a horizontal scrollbar on any device — clip stray overflow at the root. overflow-x:clip (not hidden) keeps position:sticky working. */ html{overflow-x:clip;} body{ font-family:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: linear-gradient(180deg, #1a1535 0%, #2e1f6e 35%, #1a1535 70%, var(--violet) 100%); min-height:100vh; max-width:1980px; width:100%; margin:0 auto; /* clip (not hidden) so the body doesn't become a scroll container — that would break the sticky header. Still prevents any horizontal scrollbar. */ overflow-x:clip; color:#fff; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a{color:inherit;} img{display:block;max-width:100%;} /* ───── THEMED SCROLLBARS (site-wide, incl. modals) ───── */ *{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.30) transparent; } ::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.24); border-radius:10px; border:2px solid transparent; background-clip:padding-box; } ::-webkit-scrollbar-thumb:hover{ background:var(--gold,#dfa949); background-clip:padding-box; } ::-webkit-scrollbar-corner{background:transparent;} /* ───── ICON SYSTEM (Font Awesome, monochromatic) ───── */ i.fa, i.fas, i.far, i.fa-solid, i.fa-regular, i.fa-brands { color: var(--gold); } .ico-circle{ width:42px;height:42px;border-radius:11px; background:rgba(223,169,73,0.12); border:1px solid rgba(223,169,73,0.35); display:inline-flex;align-items:center;justify-content:center; font-size:18px; } .ico-circle.lg{width:58px;height:58px;border-radius:15px;font-size:24px;} .ico-circle.sm{width:30px;height:30px;border-radius:8px;font-size:13px;} .ico-neutral{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.18);} .ico-neutral i{color:rgba(255,255,255,0.78);} /* ───── ANIMATION UTILITIES ───── */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1);} .reveal.in{opacity:1;transform:none;} .reveal.d1{transition-delay:.06s;} .reveal.d2{transition-delay:.12s;} .reveal.d3{transition-delay:.18s;} .reveal.d4{transition-delay:.24s;} .reveal.d5{transition-delay:.30s;} .reveal.d6{transition-delay:.36s;} @keyframes floatOrb { 0% { transform:translate(0,0) scale(1) rotate(0deg); } 25% { transform:translate(40px,-30px) scale(1.06) rotate(4deg); } 50% { transform:translate(70px,-55px) scale(1.10) rotate(8deg); } 75% { transform:translate(30px,-20px) scale(1.04) rotate(3deg); } 100% { transform:translate(0,0) scale(1) rotate(0deg); } } @keyframes floatOrb2{ 0% { transform:translate(0,0) scale(1) rotate(0deg); } 33% { transform:translate(-45px,30px) scale(1.08) rotate(-6deg); } 66% { transform:translate(-20px,60px) scale(0.94) rotate(-4deg); } 100% { transform:translate(0,0) scale(1) rotate(0deg); } } @keyframes orbPulse { 0% { transform:translate(0,0) scale(1) rotate(0deg); opacity:.95; } 50% { transform:translate(25px,35px) scale(1.16) rotate(7deg); opacity:1; } 100% { transform:translate(0,0) scale(1) rotate(0deg); opacity:.95; } } @keyframes shimmer { 0%{background-position:-200% 0;} 100%{background-position:200% 0;} } @keyframes pulseGlow{ 0%,100%{box-shadow:0 0 0 0 rgba(223,169,73,0.45);} 50%{box-shadow:0 0 0 18px rgba(223,169,73,0);} } @keyframes pulseDot { 0%{transform:scale(1);opacity:1;} 100%{transform:scale(3.2);opacity:0;} } @keyframes marqueeLeft{ from{transform:translateX(0);} to{transform:translateX(-50%);} } @keyframes spinSlow { from{transform:rotate(0);} to{transform:rotate(360deg);} } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;} .reveal{opacity:1;transform:none;} } /* ───── TOPBAR ───── */ .topbar{ background:rgba(57,25,186,0.55); backdrop-filter:var(--glass-blur-sm); border-bottom:1px solid rgba(255,255,255,0.15); text-align:center; padding:12px; font-size:14px;font-weight:600; color:rgba(255,255,255,0.9); letter-spacing:0.3px; } .topbar i{margin-right:8px;} .topbar a{color:var(--gold-lt);text-decoration:none;border-bottom:1px solid rgba(245,228,184,0.4);margin-left:6px;} /* Topbar + nav are wrapped in one sticky header so they scroll/stick together. */ .site-header{position:sticky;top:0;z-index:100;} /* ───── NAV ───── */ .nav{ display:flex;align-items:center;justify-content:space-between; padding:0 80px;height:88px; background:rgba(255,255,255,0.07); backdrop-filter:var(--glass-blur); border-bottom:1px solid var(--glass-border); } .logo{ display:inline-flex;align-items:center; padding:6px 4px; transition:transform .3s ease, opacity .3s ease; } .logo:hover{transform:translateY(-1px);opacity:.92;} .logo img{ height:53px;width:auto; filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1); } .nav-links{display:flex;align-items:center;gap:36px;} .nav-links a{font-size:14px;font-weight:700;color:rgba(255,255,255,0.82);text-decoration:none;transition:color .2s;} .nav-links a:hover{color:#fff;} .nav-badge{ background:rgba(223,169,73,0.25); border:1px solid rgba(223,169,73,0.5); color:var(--gold-lt); font-size:11px;font-weight:800; padding:2px 8px;border-radius:12px;margin-left:5px; } .nav-right{display:flex;align-items:center;gap:22px;} .nav-phone{font-size:14px;font-weight:700;color:var(--gold-lt);text-decoration:none;} .nav-phone i{margin-right:6px;} .btn-nav{ background:var(--violet-dk);color:#fff; padding:11px 24px;border-radius:8px; font-size:14px;font-weight:700;text-decoration:none; border:1px solid rgba(255,255,255,0.2); transition:transform .2s ease, box-shadow .2s ease; } .btn-nav:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(57,25,186,0.5);} /* ───── HERO ───── */ .hero{ padding:60px 80px 72px; position:relative; overflow:hidden; min-height:600px; display:grid; /* Two columns: the pitch on the left, the stats card on the right, vertically centred beside each other. Collapses to one column at ≤1280px. */ grid-template-columns:1.55fr 0.95fr; gap:60px;align-items:center; /* Deep, muted violet base. The animated rising graph + orbs are the only background layers now (the hero photo was removed). */ background-color:#110926; background-image:linear-gradient(165deg, #241458 0%, #191040 48%, #110926 100%); background-size:cover; background-position:center; background-repeat:no-repeat; } .orb{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none;z-index:1;} .orb1{width:700px;height:700px;background:rgba(214,160,76,0.20);top:-200px;right:-100px;animation:floatOrb 22s ease-in-out infinite;} .orb2{width:520px;height:520px;background:rgba(58,28,170,0.40);bottom:-150px;left:10%;animation:floatOrb2 26s ease-in-out infinite;} .orb3{width:320px;height:320px;background:rgba(120,104,196,0.30);top:100px;left:35%;animation:orbPulse 18s ease-in-out infinite;} .hero-inner{position:relative;z-index:3;max-width:none;} /* Header band spans the full hero width (across both grid columns) so the headline + subheadline get the whole section width and stay on one line on desktop. Drops back into the normal flow (wrapping) at ≤1280px. */ .hero-head{position:relative;z-index:3;grid-column:1 / -1;max-width:none;} /* Subtle, premium animated rising graph — now the hero's main backdrop. */ .hero-graph{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none; opacity:.5;mix-blend-mode:screen;animation:hgIn 1.4s ease both;} .hero-graph .hg-line{filter:drop-shadow(0 0 6px rgba(223,169,73,.45));} .hero-graph .hg-dot{filter:drop-shadow(0 0 7px rgba(245,228,184,.9));} @keyframes hgIn{from{opacity:0;}to{opacity:.5;}} @media (prefers-reduced-motion:reduce){ .hero-graph{animation:none;} } .hero-eyebrow{ display:inline-flex;align-items:center;gap:10px; background:rgba(255,255,255,0.10); backdrop-filter:var(--glass-blur-sm); border:1px solid var(--glass-border); padding:8px 20px;border-radius:30px; font-size:12.5px;font-weight:800; color:var(--gold-lt); letter-spacing:1px;text-transform:uppercase; margin-bottom:28px; } .hero-eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(223,169,73,0.6);animation:pulseGlow 2.4s ease-out infinite;} .hero-h1{ /* Fluid size so the headline scales smoothly with the viewport instead of staying fixed and reflowing at breakpoints when the window is resized. clamp range matches the old stepped sizes (28px floor … 62px cap). */ /* Continuous viewport-based scaling with a low floor so the headline keeps shrinking on narrow screens instead of hitting a fixed size and overflowing. */ font-size:clamp(22px, 5vw, 62px);line-height:1.18; color:#fff;margin-bottom:26px;font-weight:800; letter-spacing:-0.02em; max-width:none; text-wrap:balance; overflow-wrap:break-word; /* Desktop: keep the hook + subhook each on a single full-width line. The ≤1280px breakpoint restores normal wrapping (and hides the
) so it never overflows on tablet/phone. */ white-space:nowrap; } /* Second line scaled down — the hook ("Short-Staffed and Overworked?") stays large. */ .hero-h1 .hero-h1-sub{font-size:clamp(17px, 2.7vw, 34px);line-height:1.2;display:inline-block;margin-top:10px;} .hero-h1 em{ color:transparent; background:linear-gradient(120deg, #dfa949 0%, #f5e4b8 40%, #dfa949 60%, #f5e4b8 100%); background-size:200% 100%; -webkit-background-clip:text;background-clip:text; font-style:normal;font-weight:800; animation:shimmer 6s linear infinite; } .hero-sub{ font-size:clamp(13.5px, 1.6vw, 18px);color:rgba(255,255,255,0.72); line-height:1.65;max-width:none; margin-bottom:20px;font-weight:400; text-wrap:balance; overflow-wrap:break-word; } .hero-sub strong{color:#fff;font-weight:700;} /* Long pitch paragraph split into two columns to declutter the hero. */ .hero-sub-cols{ column-count:2;column-gap:38px; column-rule:1px solid rgba(255,255,255,0.10); } /* Hero pitch as a bulleted list — gold dots, kept whole within each column. */ .hero-sub-list{list-style:none;padding:0;} .hero-sub-list li{ position:relative;padding-left:22px;margin-bottom:12px; break-inside:avoid; } .hero-sub-list li:last-child{margin-bottom:0;} .hero-sub-list li::before{ content:"";position:absolute;left:0;top:9px; width:7px;height:7px;border-radius:50%; background:var(--gold); } /* Right-fit guarantee — spans the full width beneath the two columns, set off with a gold accent so it reads as the promise, not body copy. */ .hero-guarantee{ font-size:16px;line-height:1.6;color:rgba(255,255,255,0.82); margin:0 0 34px;padding:14px 18px; border-left:3px solid var(--gold); background:rgba(223,169,73,0.08); border-radius:0 10px 10px 0; } .hero-guarantee strong{color:#fff;font-weight:800;} .hero-btns{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:18px;align-items:stretch;} .hero-textlink{ display:inline-flex;align-items:center;gap:8px; font-size:14.5px;font-weight:700;color:rgba(255,255,255,0.78); text-decoration:none;margin-bottom:46px; border-bottom:1px solid rgba(255,255,255,0.22);padding-bottom:2px; transition:color .2s,border-color .2s; } .hero-textlink:hover{color:#fff;border-color:var(--gold);} .hero-textlink i{font-size:12px;color:var(--gold);} .btn-primary{ background:var(--violet-dk);color:#fff; padding:18px 36px;border-radius:10px; font-size:16px;font-weight:700;text-decoration:none; border:1px solid rgba(255,255,255,0.2); display:inline-flex;align-items:center;justify-content:center;gap:10px; transition:transform .2s ease, box-shadow .2s ease; } /* Hero pairs btn-primary with btn-glass — keep them a matched size. */ .hero-btns .btn-primary,.hero-btns .btn-glass{min-width:230px;justify-content:center;} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(57,25,186,0.55);} .btn-primary i{transition:transform .25s ease;} .btn-primary:hover i{transform:translateX(4px);} .btn-glass{ background:rgba(255,255,255,0.12); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border-strong); color:#fff; padding:18px 30px;border-radius:10px; font-size:16px;font-weight:700;text-decoration:none; display:inline-flex;align-items:center;justify-content:center;gap:10px; transition:transform .2s ease, background .25s ease; } .btn-glass:hover{transform:translateY(-2px);background:rgba(255,255,255,0.18);} .btn-glass i{color:var(--gold);} .btn-mini-note{font-size:12.5px;color:rgba(255,255,255,0.55);font-weight:600;letter-spacing:.3px;} /* All five trust items flow on one row (wrapping only when the column is too narrow); the forced 3-on-top/2-below break was removed with the hero redesign. */ .trust-row{grid-column:1 / -1;width:100%;display:flex;align-items:center;justify-content:center;gap:18px 30px;flex-wrap:wrap;margin:-24px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,0.12);} .trust-item{ display:flex;align-items:center;gap:9px; font-size:13.5px;color:rgba(255,255,255,0.78);font-weight:600; } .trust-item i{color:var(--gold);font-size:13px;} /* HIPAA-compliant trust mark — reused in header and footer */ .hipaa-badge{ display:inline-flex;align-items:center;gap:8px; padding:7px 13px;border-radius:999px;line-height:1;white-space:nowrap; background:var(--glass-bg,rgba(255,255,255,0.06)); border:1px solid var(--gold,#d4a64a); color:var(--gold,#d4a64a); font-size:11.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase; backdrop-filter:blur(var(--glass-blur,18px));-webkit-backdrop-filter:blur(var(--glass-blur,18px)); } .hipaa-badge i{font-size:14px;} .hipaa-badge-logo{height:16px;width:auto;display:block;flex:0 0 auto;} .hipaa-badge--nav{padding:6px 11px;font-size:10.5px;letter-spacing:.6px;} .hipaa-badge--nav .hipaa-badge-logo{height:14px;} .hipaa-badge--footer{margin-top:18px;} @media (max-width:980px){.hipaa-badge--nav{display:none;}} .hero-stats{ align-self:center; /* Nudge the stats card up so it sits higher than the centered pitch column. Reset to 0 at ≤1280px where it stacks below the pitch. */ margin-top:-300px; display:grid;grid-template-columns:repeat(2,1fr); background:rgba(255,255,255,0.07); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); border-radius:18px;overflow:hidden; box-shadow:0 30px 70px -34px rgba(0,0,0,0.65); } /* 2×2 grid: inner hairlines only — right border on the left column, bottom border on the top row. */ .hstat{ padding:30px 22px;text-align:center; border-right:1px solid rgba(255,255,255,0.10); border-bottom:1px solid rgba(255,255,255,0.10); } .hstat:nth-child(2n){border-right:none;} .hstat:nth-child(n+3){border-bottom:none;} .hstat-num{font-size:46px;font-weight:800;color:var(--gold);line-height:1;letter-spacing:-0.02em;} .hstat-rating{display:inline-flex;align-items:baseline;gap:4px;} .hstat-rating i{font-size:30px;} .hstat-lbl{font-size:12px;color:rgba(255,255,255,0.6);margin-top:8px;text-transform:uppercase;letter-spacing:0.7px;font-weight:700;} /* Google-review link wrappers — keep the stat/card styling, just make it clickable. */ a.hstat{text-decoration:none;color:inherit;transition:background .2s ease;} a.hstat:hover{background:rgba(255,255,255,0.04);} a.hstat:hover .hstat-lbl{color:var(--gold-lt,#f5e4b8);} .gr-link{text-decoration:none;color:inherit;cursor:pointer;transition:color .2s ease;} a.gr-link:hover{color:var(--gold-lt,#f5e4b8);} /* ───── HERO RIGHT VISUAL (photo collage) ───── */ .hero-visual{position:relative;z-index:2;height:600px;} .hv-card{ position:absolute; border-radius:24px; overflow:hidden; box-shadow:0 40px 100px rgba(0,0,0,0.45); border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.04); transition:transform .5s ease; } .hv-main{ width:480px;height:560px;top:0;right:60px; } .hv-main:hover{transform:translateY(-6px);} .hv-main img{width:100%;height:100%;object-fit:cover;} .hv-side{ width:260px;height:320px; bottom:0;left:0; } .hv-side:hover{transform:translateY(-6px);} .hv-side img{width:100%;height:100%;object-fit:cover;} .hv-chip{ position:absolute; display:inline-flex;align-items:center;gap:10px; background:rgba(20,15,55,0.85); backdrop-filter:var(--glass-blur); border:1px solid rgba(223,169,73,0.35); padding:12px 18px;border-radius:30px; font-size:13px;font-weight:700;color:#fff; box-shadow:0 18px 40px rgba(0,0,0,0.4); z-index:3; } .hv-chip i{color:var(--gold);font-size:14px;} .hv-chip.t1{top:40px;left:-40px;} .hv-chip.t2{top:240px;right:-30px;} .hv-chip.t3{bottom:60px;right:80px;} /* Subtle, organic float — each chip drifts on its own cadence (desynced via negative delays). Skipped for users who prefer reduced motion. */ @keyframes chipFloat{ 0%,100%{transform:translateY(0) translateX(0) rotate(0deg);} 50% {transform:translateY(-18px) translateX(5px) rotate(-1.4deg);} } @media (prefers-reduced-motion:no-preference){ .hv-chip{animation:chipFloat 5s ease-in-out infinite;will-change:transform;} .hv-chip.t1{animation-duration:5.2s;animation-delay:-1s;} .hv-chip.t2{animation-duration:6.2s;animation-delay:-3s;} .hv-chip.t3{animation-duration:4.6s;animation-delay:-1.8s;} /* Service-page hero chips (c1/c2) — distinct cadences too. */ .hv-chip.c1{animation-duration:5.7s;animation-delay:-1.4s;} .hv-chip.c2{animation-duration:4.9s;animation-delay:-3.3s;} } /* ───── CLIENT MARQUEE ───── */ .marquee{ position:relative;padding:34px 0; background:rgba(0,0,0,0.22); backdrop-filter:var(--glass-blur-sm); border-top:1px solid rgba(255,255,255,0.08); border-bottom:1px solid rgba(255,255,255,0.08); overflow:hidden; } .marquee-lbl{ text-align:center; font-size:11px;font-weight:800; color:rgba(255,255,255,0.45); text-transform:uppercase;letter-spacing:2.2px; margin-bottom:22px; } .marquee-lbl i{color:rgba(255,255,255,0.45);margin-right:8px;} .marquee-track-wrap{position:relative;overflow:hidden;} .marquee-track-wrap::before, .marquee-track-wrap::after{ content:"";position:absolute;top:0;bottom:0;width:240px;z-index:2;pointer-events:none; } .marquee-track-wrap::before{left:0;background:linear-gradient(to right, rgba(20,15,55,0.95), transparent);} .marquee-track-wrap::after {right:0;background:linear-gradient(to left, rgba(20,15,55,0.95), transparent);} .marquee-track{display:flex;width:max-content;gap:16px;animation:marqueeLeft 38s linear infinite;align-items:center;} .marquee:hover .marquee-track{animation-play-state:paused;} /* Same toned-down treatment + height as the In The News marquee: dimmed by default, full color + slight zoom on hover (no chip). */ .mq-logo{flex:0 0 auto;height:62px;display:flex;align-items:center;justify-content:center;} .mq-logo img{ height:100%;width:auto;max-width:220px;object-fit:contain; opacity:.55; transition:opacity .35s ease, transform .35s ease; } .mq-logo:hover img{opacity:1;transform:scale(1.06);} /* ───── NEWS MARQUEE (press logos, toned-down → full color on hover) ───── */ .news{ position:relative;padding:32px 0 36px; background:rgba(0,0,0,0.30); border-top:1px solid rgba(255,255,255,0.06); border-bottom:1px solid rgba(255,255,255,0.06); overflow:hidden; } .news-lbl{ text-align:center; font-size:11px;font-weight:800; color:rgba(255,255,255,0.45); text-transform:uppercase;letter-spacing:2.4px; margin-bottom:22px; } .news-lbl i{color:rgba(255,255,255,0.45);margin-right:8px;} .news-track-wrap{position:relative;overflow:hidden;} .news-track-wrap::before, .news-track-wrap::after{ content:"";position:absolute;top:0;bottom:0;width:220px;z-index:2;pointer-events:none; } .news-track-wrap::before{left:0;background:linear-gradient(to right, rgba(20,15,55,0.95), transparent);} .news-track-wrap::after {right:0;background:linear-gradient(to left, rgba(20,15,55,0.95), transparent);} .news-track{ display:flex;width:max-content;gap:60px; animation:marqueeRight 75s linear infinite; align-items:center; } .news:hover .news-track{animation-play-state:paused;} .news-item{ flex:0 0 auto; height:62px;display:flex;align-items:center;justify-content:center; text-decoration:none; } .news-item img{ height:100%;width:auto;max-width:220px;object-fit:contain; opacity:.55; transition:opacity .35s ease, transform .35s ease; } .news-item:hover img{ opacity:1; transform:scale(1.06); } @keyframes marqueeRight{ from{transform:translateX(-50%);} to{transform:translateX(0);} } /* ───── SECTION DEFAULTS ───── */ .sec{padding:78px 80px;position:relative;} .sec-lbl{font-size:12px;font-weight:800;color:var(--gold);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:12px;text-align:center;} .sec-lbl i{margin-right:6px;} /* Eyebrow follows its heading. Pages built on .svc-h2 (left by default, centered only via a text-align:center wrapper) and hero eyebrows above an

inherit the wrapper's alignment instead of the global centered default, so the eyebrow always lines up with the heading directly below it — center stays center, left stays left. (.sec-h2 sections keep the centered default; handled by rules above.) */ .sec-lbl:has(+ h1), .sec-lbl:has(+ .svc-h2){text-align:inherit;} .sec-h2{font-size:50px;font-weight:800;color:#fff;line-height:1.08;margin-bottom:16px;letter-spacing:-0.02em;text-wrap:balance;overflow-wrap:break-word;text-align:center;} .sec-h2 em{color:var(--gold);font-style:normal;font-weight:800;} /* ROI calculator headline must stay on ONE line at every width: nowrap + a fluid size that scales with the viewport so it shrinks to fit narrow phones rather than wrapping, and caps at the 50px design size on desktop (zoom ladder scales it further on ultra-wide). Id-scoped so it overrides the .sec-h2 breakpoints. */ #calc-h{font-size:clamp(28px,4vw,46px);overflow-wrap:break-word;} .sec-sub{font-size:18px;color:rgba(255,255,255,0.65);line-height:1.65;max-width:100%;font-weight:400;text-align:center;} /* Section headers center by default. Split / two-column layouts (guarantee strip, global map, lead bands, talent hero & match card) keep their copy left-aligned. */ .g-copy .sec-lbl, .g-copy .sec-h2, .g-copy .sec-sub, .global-l .sec-lbl, .global-l .sec-h2, .global-l .sec-sub, .lead-band-l .sec-lbl, .lead-band-l .sec-h2, .vtd-hero-text .sec-lbl, .vtd-hero-text .sec-h2, .vtd-match-l .sec-lbl, .vtd-match-l .sec-h2{text-align:left;} .lead-band-l .sec-sub{text-align:left;} /* Split / two-column layouts: let the title wrap. The global nowrap would otherwise expand the text column and squeeze the adjacent map / form / image. */ .g-copy .sec-h2,.global-l .sec-h2,.lead-band-l .sec-h2, .vtd-hero-text .sec-h2,.vtd-match-l .sec-h2{white-space:normal;} /* VT profiles header lives in a left text column beside a CTA: left-align the eyebrow, title and subheader; title uses the standard white + gold-em styling. */ #profiles .sec-lbl, #profiles .sec-h2, #profiles .sec-sub{text-align:left;} /* VT profiles header: title left, CTA right on desktop; stacks + centers on mobile. */ .prof-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:24px;} .prof-head-cta{text-align:right;} .prof-head-cta .btn-primary{font-size:15px;padding:14px 28px;} @media (max-width:768px){ .prof-head{flex-direction:column;align-items:stretch;gap:16px;} .prof-head-cta{text-align:center;} .prof-head-cta .btn-primary{display:flex;width:100%;justify-content:center;font-size:14.5px;padding:14px 22px;margin:14px 0;} } /* Compliance section keeps its h2 centered. */ .comp-section .sec-h2{text-align:center;} /* ───── ROI CALCULATOR ───── */ .calc-wrap{ padding:72px 80px 72px;position:relative; background: radial-gradient(800px 500px at 18% 0%, rgba(57,25,186,0.30), transparent 60%), radial-gradient(700px 600px at 88% 50%, rgba(223,169,73,0.22), transparent 60%); } /* The CSM callback complements the calculator — keep them visually tied, not separated by a full section gap. */ .csm-cta{padding-top:28px;} .calc-head{text-align:center;margin:0 auto 40px;max-width:820px;} .calc-head .sec-sub{max-width:660px;margin-left:auto;margin-right:auto;} .calc-badge{ display:inline-flex;align-items:center;gap:10px; background:rgba(223,169,73,0.18); border:1px solid rgba(223,169,73,0.45); color:var(--gold-lt);font-weight:800;font-size:12px; padding:8px 18px;border-radius:24px;letter-spacing:1.2px;text-transform:uppercase; margin-bottom:18px; } .calc-badge i{color:var(--gold);} /* Gradient-border: the rotating conic is the OUTER wrapper's background, and its 3px padding is the glow thickness. .calc sits on top with its own static gradient, covering the center — so the rotating glow only shows on the edge. The pulsing box-shadow (vaddGlow) blooms outward from the wrapper too. */ .calc-glow{ position:relative;max-width:760px;margin:0 auto; padding:3px;border-radius:31px; background:conic-gradient(from var(--vadd-spin), rgba(223,169,73,0.35) 0deg, rgba(245,228,184,1) 70deg, rgba(124,58,237,0.95) 150deg, rgba(57,25,186,0.60) 225deg, rgba(223,169,73,0.35) 310deg, rgba(223,169,73,0.35) 360deg); animation:vaddSpin 4.5s linear infinite, vaddGlow 5.5s ease-in-out infinite; } @media (prefers-reduced-motion:reduce){ .calc-glow{animation:none;box-shadow:0 50px 120px rgba(0,0,0,0.35), 0 0 42px -10px rgba(223,169,73,0.3);} } .calc{ position:relative; display:grid;grid-template-columns:1fr;gap:0; /* Static gradient background — the content panel never rotates. */ background:linear-gradient(150deg, #1d1547 0%, #160e34 58%, #120a2c 100%); border-radius:28px;overflow:hidden; } /* LEFT column — value-multiplier speedometer */ .calc-vadd{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px; padding:44px 38px; border-right:1px solid rgba(255,255,255,0.08); background: radial-gradient(420px 380px at 30% 12%, rgba(57,25,186,0.30), transparent 62%), radial-gradient(360px 340px at 80% 92%, rgba(223,169,73,0.16), transparent 62%), rgba(20,15,55,0.55); } .calc-vadd-h{font-size:27px;font-weight:800;color:#fff;line-height:1.12;letter-spacing:-0.02em;text-align:center;margin:0;} .calc-vadd-h em{color:var(--gold);font-style:normal;font-weight:800;} /* RIGHT column — the live calculator (slider bar on top, results below). */ .calc-main{display:flex;flex-direction:column;min-width:0;} /* Merged calculator: slider bar on top, results below. Keep the head + slider on ONE compact row — min-width:0 lets them shrink to fit the narrow right column instead of wrapping (the old 40px gap on wrap ballooned the height). The small row-gap keeps it tidy if it ever does wrap on a tight screen. */ .calc-top{ display:flex;align-items:center;gap:14px 26px;flex-wrap:wrap; padding:20px 28px; background:rgba(20,15,55,0.55); border-bottom:1px solid rgba(255,255,255,0.08); } .calc-top-head{flex:1 1 180px;min-width:0;} .calc-top-head h3{font-size:24px;font-weight:800;color:#fff;margin-bottom:6px;letter-spacing:-0.01em;} .calc-cap{font-size:13.5px;color:rgba(255,255,255,0.55);font-weight:400;line-height:1.6;margin:0;} .calc-top .calc-slider-wrap{flex:2 1 300px;min-width:0;} .calc-controls{ padding:44px 40px; background:rgba(20,15,55,0.55); border-right:1px solid rgba(255,255,255,0.08); } .calc-controls h3{font-size:24px;font-weight:800;color:#fff;margin-bottom:6px;letter-spacing:-0.01em;} .calc-controls .calc-cap{font-size:13.5px;color:rgba(255,255,255,0.55);margin-bottom:28px;font-weight:400;line-height:1.6;} .calc-field{margin-bottom:22px;} .calc-label{font-size:11px;font-weight:800;color:rgba(255,255,255,0.55);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:10px;display:block;} .calc-seg{display:flex;gap:0;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);border-radius:12px;padding:4px;} .calc-seg button{ flex:1;background:transparent;border:none;color:rgba(255,255,255,0.65); padding:11px 14px;font-size:13.5px;font-weight:700; border-radius:9px;cursor:pointer;font-family:inherit; transition:all .25s ease; } .calc-seg button:hover{color:#fff;} .calc-seg button.on{ background:linear-gradient(180deg, var(--gold) 0%, var(--gold-dk) 100%); color:#1a1535;box-shadow:0 6px 16px rgba(223,169,73,0.35); } .calc-select{ width:100%; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.15); color:#fff; padding:14px 18px;border-radius:11px; font-size:15px;font-family:inherit;font-weight:600; outline:none;cursor:pointer;appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23dfa949' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 18px center;background-size:14px; padding-right:46px; transition:border-color .2s ease, background-color .2s ease; } .calc-select:focus{border-color:rgba(223,169,73,0.6);background-color:rgba(255,255,255,0.10);} /* Native dropdowns: the browser-native popup inherits the page colors on Chrome/Edge dark themes, which produces white-on-white text. Force every