/* ============================================================
CLARITY DIAGNOSTICS — WEBSITE STYLES
Standalone CSS. No build step required.
============================================================
ICON PACK
---------
This design uses Tabler Icons (free, open source, MIT license).
Add ONE line to the of your HTML:
Then icons render like:
Browse all icons: https://tabler.io/icons
FONT
----
Inter (free, Google Fonts). Add to :
============================================================ */
:root {
/* ---- Color palette ---- */
--navy: #293f6f; /* brand navy — CMYK 100-87-42-05; primary CTA, accents, headings */
--navy-dark: #0a1929; /* video hero / contact hero backgrounds */
--navy-line: #1a3a5c; /* divider on navy backgrounds */
--portal-blue: #e8f0fb; /* text on navy buttons */
--muted-blue: #9bb8db; /* icons on navy backgrounds */
/* ---- Brand palette (2026) ---- */
--silver: #d4d7db; /* silver — light, faintly cool metallic tone (logo strip) */
--sky: #68b1e4; /* brand light blue — PANTONE 2985 U; accent pop */
--periwinkle: #90a8dc; /* brand periwinkle — CMYK 44-25-00-01 */
--bg-primary: #ffffff; /* page + card background */
--bg-secondary: #f5f6f8; /* off-white surfaces, image placeholders */
--text-primary: #1a1a1a; /* headings + body */
--text-secondary: #6b7280; /* muted text, subtitles */
--border: #e5e7eb; /* all hairline borders */
--border-strong: #d1d5db; /* hover borders, input borders */
--success-bg: #e8f5ed; /* confirmation checkmark bg */
--success-fg: #1a7c3e; /* confirmation checkmark */
--required: #c53030; /* required field asterisk */
/* ---- Radii ---- */
--radius-md: 8px; /* buttons, inputs */
--radius-lg: 12px; /* cards, panels */
/* ---- Font ---- */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-display: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: var(--font-sans);
color: var(--text-primary);
background: var(--bg-primary);
line-height: 1.6;
position: relative;
}
/* Subtle paper-grain texture overlay — barely perceptible, adds tactile depth.
SVG turbulence inlined as data URI so no extra HTTP request. */
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1000;
opacity: 0.035;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
background-size: 200px 200px;
}
.sr-only {
position: absolute; width: 1px; height: 1px;
overflow: hidden; clip: rect(0,0,0,0);
}
/* ---------- NAV (silver liquid glass) ---------- */
.nav {
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px;
padding: 18px 32px;
/* Silver liquid glass: a translucent brushed-silver tint frosting the content that
scrolls beneath the sticky bar. Layer 1 is a diagonal specular streak (the wet-glass
sheen); layer 2 is the silver body — bright top edge cooling to a deeper silver base. */
background:
linear-gradient(125deg, rgba(255, 255, 255, .38) 0%, rgba(255, 255, 255, 0) 40%),
linear-gradient(180deg, rgba(245, 246, 248, .74) 0%, rgba(212, 215, 219, .62) 55%, rgba(196, 200, 206, .66) 100%);
-webkit-backdrop-filter: blur(22px) saturate(155%);
backdrop-filter: blur(22px) saturate(155%);
border-bottom: 1px solid rgba(255, 255, 255, .45);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .85), /* top specular highlight edge */
inset 0 -1px 0 rgba(15, 39, 68, .07), /* thin inner base shadow */
0 1px 2px rgba(15, 39, 68, .05),
0 16px 32px -16px rgba(15, 39, 68, .20); /* soft floating depth */
position: sticky; top: 0; z-index: 50;
}
.logo { font-size: 20px; font-weight: 600; letter-spacing: .12em; cursor: pointer; flex-shrink: 0; text-decoration: none; color: var(--navy); }
.logo-img { flex-shrink: 0; display: flex; align-items: center; }
.logo-img .custom-logo-link { display: inline-flex; align-items: center; line-height: 0; }
.logo-img .custom-logo { height: 36px; width: auto; display: block; }
/* 3-zone header: logo left, nav centered, search + CTA right */
.nav > .logo, .nav > .logo-img { justify-self: start; }
.nav-actions { justify-self: end; display: flex; align-items: center; gap: 24px; min-width: 0; }
.nav-links { display: flex; gap: 32px; font-size: 15px; font-weight: 500; color: var(--text-primary); flex-shrink: 0; justify-self: center; }
.nav-links a { cursor: pointer; padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none; color: inherit; transition: color .15s, border-color .15s; }
.nav-links a:hover { color: var(--navy); }
.nav-links a.active { color: var(--navy); border-bottom: 2px solid var(--navy); }
/* Mega menu — hover state on Products opens a full-width panel */
.nav-has-mega { position: relative; display: inline-flex; align-items: center; }
.nav-has-mega > a { display: inline-flex; align-items: center; cursor: pointer; padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none; color: inherit; font: inherit; transition: color .15s, border-color .15s; }
.nav-has-mega > a:hover { color: var(--navy); }
.nav-has-mega > a.active { color: var(--navy); border-bottom: 2px solid var(--navy); }
.nav-mega {
position: fixed; top: 70px; left: 0; right: 0;
/* Opaque panel — the nav bar itself stays translucent/glass, but the open
menu must be solid so content behind it doesn't bleed through. */
background: #ffffff;
border-top: 1px solid rgba(255, 255, 255, .6);
border-bottom: 1px solid rgba(15, 39, 68, .08);
box-shadow: 0 24px 48px -16px rgba(15, 39, 68, .18);
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: opacity .18s ease, transform .18s ease, visibility .18s;
z-index: 49;
}
.nav-has-mega:hover .nav-mega,
.nav-has-mega:focus-within .nav-mega { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-mega-inner { max-width: 1040px; margin: 0 auto; padding: 36px 36px 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.nav-mega-col { padding-right: 48px; }
.nav-mega-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 22px; }
.nav-mega-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 28px; }
.nav-mega-list a { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: var(--radius-md); color: var(--text-primary); text-decoration: none; font-size: 14px; font-weight: 500; transition: background .12s, color .12s; }
.nav-mega-list a:hover { background: rgba(15, 39, 68, .05); color: var(--navy); }
.nav-mega-list a i { font-size: 18px; color: var(--navy); width: 24px; text-align: center; flex-shrink: 0; }
.nav-mega-feature { display: flex; flex-direction: column; justify-content: flex-start; gap: 16px; min-width: 0; border-left: 1px solid var(--border); padding-left: 36px; }
.nav-links .nav-mega-card { display: flex; flex-direction: column; gap: 10px; padding: 28px 30px; border-radius: var(--radius-lg); background: var(--navy); color: var(--portal-blue); text-decoration: none; transition: opacity .15s, transform .15s; min-width: 0; max-width: 100%; white-space: normal; border-bottom: 0; }
.nav-links .nav-mega-card-sub { white-space: normal; }
.nav-mega-card-sub, .nav-mega-card-title { min-width: 0; overflow-wrap: break-word; word-break: normal; }
.nav-mega-card:hover { opacity: .94; transform: translateY(-1px); }
.nav-mega-card-title { font-size: 16px; font-weight: 600; color: #fff; }
.nav-mega-card-sub { font-size: 13px; line-height: 1.5; color: rgba(232, 240, 251, .75); }
.nav-mega-card-cta { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff; display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; }
.nav-mega-card-cta i { font-size: 14px; }
.nav-links .nav-mega-card-ghost { background: rgba(15, 39, 68, .04); color: var(--text-primary); }
.nav-links .nav-mega-card-ghost .nav-mega-card-title { color: var(--navy); }
.nav-links .nav-mega-card-ghost .nav-mega-card-sub { color: var(--text-secondary); }
.nav-links .nav-mega-product { display: flex; align-items: center; gap: 18px; padding: 12px; border-radius: var(--radius-md); background: transparent; text-decoration: none; transition: background .15s; max-width: 500px; white-space: normal; }
.nav-links .nav-mega-product:hover { background: rgba(15, 39, 68, .04); }
.nav-mega-product-img { flex-shrink: 0; width: 140px; height: 132px; display: flex; align-items: center; justify-content: center; }
.nav-mega-product-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.nav-mega-product-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nav-mega-product-cat { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.nav-mega-product-title { font-size: 17px; font-weight: 600; color: var(--navy); line-height: 1.3; }
.nav-mega-product-cta { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; }
.nav-mega-product-cta i { font-size: 13px; }
@media (max-width: 900px) {
.nav-mega { display: none; }
}
.nav-search { flex: 0 1 300px; max-width: 300px; position: relative; }
.nav-search input {
width: 100%; padding: 11px 14px 11px 38px; font-size: 14px;
border: 1px solid rgba(10, 25, 41, .12); border-radius: var(--radius-md);
background: rgba(255, 255, 255, .92); color: var(--text-primary); outline: none;
transition: border-color .15s, background .15s;
}
.nav-search input:focus { border-color: var(--navy); background: #fff; }
.nav-search input::placeholder { color: var(--text-secondary); }
.nav-search .si { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--text-secondary); pointer-events: none; }
.nav-dropdown {
position: absolute; top: calc(100% + 6px); left: 0; right: 0;
background: var(--bg-primary); border: 1px solid var(--border-strong);
border-radius: var(--radius-lg); z-index: 100; display: none;
max-height: 320px; overflow-y: auto;
box-shadow: 0 8px 24px rgba(15, 39, 68, .08);
}
.nav-dropdown.show { display: block; }
.nd-item { padding: 12px 16px; font-size: 14px; cursor: pointer; border-bottom: 1px solid var(--border); }
.nd-item:last-child { border-bottom: none; }
.nd-item:hover { background: var(--bg-secondary); }
.nd-item-name { font-weight: 500; color: var(--text-primary); }
.nd-item-cat { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.nd-item { display: block; text-decoration: none; }
.nd-empty { cursor: default; color: var(--text-secondary); }
.nd-empty:hover { background: transparent; }
.nav-cta {
background: var(--navy); color: var(--portal-blue);
font-size: 14px; font-weight: 600; padding: 11px 22px;
border-radius: var(--radius-md); cursor: pointer; border: 1px solid var(--navy);
flex-shrink: 0; white-space: nowrap; text-decoration: none;
display: inline-flex; align-items: center; transition: opacity .15s;
}
.nav-cta:hover { opacity: .92; }
/* ---------- MOBILE NAV (hamburger + slide-in drawer) ---------- */
.nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: none; background: transparent; color: var(--navy); cursor: pointer; border-radius: var(--radius-md); }
.nav-toggle:hover { background: rgba(15, 39, 68, .06); }
.nav-toggle i { font-size: 27px; }
.nav-mobile { position: fixed; inset: 0; z-index: 45; background: var(--bg-primary); padding: 82px 22px 40px; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; }
.nav-mobile[hidden] { display: none; }
.nav-mobile-search { flex: none; width: 100%; max-width: none; margin-bottom: 14px; }
.nav-mobile-nav { display: flex; flex-direction: column; }
.nav-mobile-nav > a { padding: 15px 6px; font-size: 17px; font-weight: 600; color: var(--text-primary); text-decoration: none; border-bottom: 1px solid var(--border); }
.nav-mobile-nav > a.active { color: var(--navy); }
.nav-mobile-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 10px 0 14px; }
.nav-mobile-cats a { display: flex; align-items: center; gap: 10px; padding: 11px 8px; font-size: 14px; font-weight: 500; color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-md); }
.nav-mobile-cats a i { font-size: 19px; color: var(--navy); flex-shrink: 0; }
.nav-mobile-cats a:hover, .nav-mobile-cats a:active { background: rgba(15, 39, 68, .05); color: var(--navy); }
.nav-mobile-cta { margin-top: 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 22px; background: var(--navy); color: var(--portal-blue); border-radius: var(--radius-md); font-size: 15px; font-weight: 600; text-decoration: none; }
body.nav-open { overflow: hidden; }
@media (min-width: 901px) { .nav-mobile { display: none !important; } }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--text-secondary); margin-bottom: 12px; text-transform: uppercase; }
@media (max-width: 900px) {
.nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; padding: 14px 20px; gap: 14px; }
.nav > .nav-links, .nav > .nav-actions { display: none; }
.nav-toggle { display: inline-flex; }
}
/* ---------- VIDEO HERO ---------- */
.hero-video {
position: relative;
width: 100%;
height: 360px;
background: var(--navy-dark);
overflow: hidden;
}
.hero-video video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hero-scrim {
position: absolute; inset: 0;
background: linear-gradient(to bottom, rgba(10,25,41,.35), rgba(10,25,41,.15) 50%, rgba(10,25,41,.45));
z-index: 1; pointer-events: none;
}
.hero-text {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
padding: 0 20px;
z-index: 2; pointer-events: none;
}
.hero-text-wrap {
position: relative;
width: 100%;
max-width: 900px;
height: 1.3em;
font-size: 36px;
font-weight: 500;
color: #fff;
letter-spacing: .01em;
text-align: center;
line-height: 1.3;
text-shadow: 0 2px 14px rgba(10,25,41,.55);
}
.hero-line {
position: absolute;
left: 0; right: 0;
opacity: 0;
animation: hero-cycle 21s infinite;
}
.hero-line:nth-child(1) { animation-delay: 0s; }
.hero-line:nth-child(2) { animation-delay: 3.5s; }
.hero-line:nth-child(3) { animation-delay: 7s; }
.hero-line:nth-child(4) { animation-delay: 10.5s; }
.hero-line:nth-child(5) { animation-delay: 14s; }
.hero-line:nth-child(6) { animation-delay: 17.5s; }
@keyframes hero-cycle {
0% { opacity: 0; transform: translateY(10px); }
3% { opacity: 1; transform: translateY(0); }
14% { opacity: 1; transform: translateY(0); }
17% { opacity: 0; transform: translateY(-10px); }
100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.hero-line { animation: none; }
.hero-line:nth-child(6) { opacity: 1; }
}
@media (max-width: 768px) {
.hero-text-wrap { font-size: 22px; }
}
/* ---------- HERO (SPLIT, McKesson-style) ----------
2-column split: text + CTAs left, brand video in rounded card right.
Subtle light-blue → white → off-blue gradient. Collapses to single column under 900px. */
.hero-split { background: linear-gradient(135deg, var(--portal-blue) 0%, #ffffff 50%, #eef3f9 100%); border-bottom: 1px solid var(--border); padding: 72px 24px; position: relative; overflow: hidden; }
/* Decorative dot pattern — upper-right light-blue accent behind the video panel */
.hero-split::before {
content: '';
position: absolute;
top: 36px;
right: 36px;
width: 180px;
height: 180px;
background-image: radial-gradient(circle, rgba(155, 184, 219, .55) 1.4px, transparent 1.8px);
background-size: 14px 14px;
pointer-events: none;
z-index: 0;
}
/* Decorative dot pattern — lower-left navy accent under text column */
.hero-split::after {
content: '';
position: absolute;
bottom: 36px;
left: 36px;
width: 140px;
height: 140px;
background-image: radial-gradient(circle, rgba(15, 39, 68, .22) 1.4px, transparent 1.8px);
background-size: 14px 14px;
pointer-events: none;
z-index: 0;
}
.hero-split-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr); gap: 56px; align-items: center; position: relative; z-index: 1; }
@media (max-width: 900px) {
.hero-split::before, .hero-split::after { display: none; }
}
.hero-split-text { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.hero-split-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--navy); text-transform: uppercase; }
.hero-split-headline { font-family: var(--font-display); font-size: 56px; line-height: 1.05; font-weight: 800; color: var(--navy); letter-spacing: -0.025em; margin: 0; position: relative; }
/* Single hero headline — show only first line, no rotation */
.hero-split-rotator { display: block; }
.hero-split-line { display: block; opacity: 1; }
.hero-split-line:nth-child(n+2) { display: none; }
.hero-split-body { font-size: 16px; line-height: 1.6; color: var(--text-secondary); max-width: 540px; margin: 0; }
.hero-split-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.hero-trust-strip { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(15, 39, 68, .1); font-size: 13px; font-weight: 500; color: var(--text-secondary); letter-spacing: 0; }
.hero-trust-strip i { font-size: 16px; color: var(--navy); }
.btn-primary { background: var(--navy); color: var(--portal-blue); font-size: 14px; font-weight: 600; padding: 14px 24px; border-radius: var(--radius-md); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: opacity .15s, transform .15s; border: 1px solid var(--navy); }
.btn-primary:hover { opacity: .92; transform: translateY(-1px); }
.btn-primary i { font-size: 16px; }
.btn-ghost { background: transparent; color: var(--navy); font-size: 14px; font-weight: 600; padding: 14px 24px; border-radius: var(--radius-md); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border-strong); transition: border-color .15s, background .15s; }
.btn-ghost:hover { border-color: var(--navy); background: rgba(15, 39, 68, .03); }
.hero-split-media { min-width: 0; display: flex; align-items: center; justify-content: center; }
.hero-split-video { width: 100%; aspect-ratio: 16 / 10; border-radius: 24px; overflow: hidden; background: var(--navy-dark); box-shadow: 0 24px 64px -16px rgba(15, 39, 68, .25); position: relative; }
.hero-split-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transform: scale(1.45); transform-origin: center; }
@media (max-width: 900px) {
.hero-split { padding: 48px 20px; }
.hero-split-inner { grid-template-columns: 1fr; gap: 32px; }
.hero-split-headline { font-size: 36px; }
.hero-split-video { aspect-ratio: 16 / 10; border-radius: 16px; }
}
/* ---------- LOGO STRIP (Trusted by partners) ----------
Dark navy band with a label + a continuously-scrolling row of white logos. */
/* Brushed-metal silver plate behind the scrolling partner logos */
.logo-strip-wrap {
background:
repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, rgba(20, 30, 48, .022) 1px 3px),
linear-gradient(180deg, #9aa0a8 0%, #c4c9d1 14%, #eef1f5 34%, #fbfcfd 46%, #dfe3e8 58%, #b4bac2 80%, #c9ced5 92%, #a7adb5 100%);
padding: 16px 0;
border-bottom: 1px solid rgba(20, 30, 48, .14);
box-shadow: inset 0 -2px 4px rgba(20, 30, 48, .08);
overflow: hidden;
position: relative;
}
/* Thin light-blue accent strip — flush across the very top of the band (its top cap). */
.logo-strip-wrap::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--sky); pointer-events: none; z-index: 1; }
.logo-strip-inner { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.logo-strip-label { font-size: 12px; font-weight: 600; letter-spacing: .14em; color: rgba(41, 63, 111, .65); text-transform: uppercase; }
.logo-strip-grid {
width: 100%;
display: flex;
overflow: hidden;
gap: 0;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.logo-strip-track {
display: flex;
align-items: center;
gap: 80px;
flex-shrink: 0;
padding-right: 80px;
animation: logo-scroll 60s linear infinite;
}
/* Logos keep scrolling even on hover (no pause) */
.logo-strip-grid:hover .logo-strip-track { animation-play-state: running; }
@keyframes logo-scroll {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.logo-strip-item { display: inline-flex; align-items: center; justify-content: center; opacity: .88; transition: opacity .2s ease; flex-shrink: 0; }
.logo-strip-item:hover { opacity: 1; }
.logo-strip-item img { max-height: 32px; width: auto; max-width: 140px; display: block; filter: brightness(0) saturate(100%) invert(20%) sepia(34%) saturate(1000%) hue-rotate(188deg) brightness(95%) contrast(92%); }
/* Cardinal Health is a compact logo; at the shared 32px row height it reads much
smaller than the wide wordmarks (Henry Schein, McKesson). Give it a larger
optical height so it carries comparable visual weight. (0,2,1) beats both
.logo-strip-item img and Elementor's .elementor img.) */
.logo-strip-item img[alt="Cardinal Health"] { max-height: 46px; }
@media (prefers-reduced-motion: reduce) {
.logo-strip-track { animation: none; }
}
@media (max-width: 900px) {
.logo-strip-wrap { padding: 14px 0; }
.logo-strip-track { gap: 48px; padding-right: 48px; }
.logo-strip-item img { max-height: 26px; max-width: 110px; }
.logo-strip-item img[alt="Cardinal Health"] { max-height: 37px; }
}
/* ---------- TRUST BAR / STAT STRIP (recognition card + stats) ----------
Full-bleed dark navy band (matches the page's other full-width sections:
1200px content, 24px gutters). The first item ("featured") renders as a
gold-accented recognition card (icon + eyebrow + title + pill); the rest
render as eyebrow -> big value -> description stat columns, separated by
hairline dividers. Gold accent is scoped here (no global token). */
.trust-bar-wrap { background: linear-gradient(180deg, #1c2d4d 0%, #14223c 100%); padding: 40px 24px; border-bottom: none; --trust-gold: #d4a857; }
.trust-bar-heading { font-family: var(--font-display); max-width: 1200px; margin: 0 auto 24px; text-align: center; font-size: 30px; font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1.15; }
.trust-bar {
max-width: 1200px; margin: 0 auto; background: transparent;
display: grid; grid-template-columns: 1.12fr 1fr 1fr 1fr;
align-items: stretch; gap: 0;
}
.trust-item { padding: 4px 32px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; color: #fff; min-width: 0; }
.trust-bar > .trust-item:first-child:not(.trust-item--featured) { padding-left: 0; }
/* hairline dividers between columns */
.trust-bar > .trust-item + .trust-item { border-left: 1px solid rgba(255, 255, 255, .08); }
/* shared eyebrow / kicker */
.trust-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .42); line-height: 1; }
/* ---- featured recognition card ---- */
.trust-item--featured { background: rgba(255, 255, 255, .025); border: 1px solid rgba(212, 168, 87, .28); border-radius: 12px; padding: 22px 24px; justify-content: center; }
.trust-feat-top { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.trust-feat-icon { font-size: 17px; color: var(--trust-gold); }
.trust-item--featured .trust-eyebrow { color: var(--trust-gold); }
.trust-feat-title { font-family: var(--font-display); font-size: 27px; font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; color: #fff; }
.trust-pill { display: inline-flex; align-items: center; align-self: flex-start; margin-top: 16px; padding: 6px 13px; border: 1px solid rgba(212, 168, 87, .55); border-radius: 999px; background: rgba(212, 168, 87, .08); color: var(--trust-gold); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
/* ---- stat columns ---- */
.trust-value { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 37px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: #fff; margin-top: 13px; }
.trust-value-mark { font-size: 21px; font-weight: 400; color: rgba(255, 255, 255, .62); }
.trust-desc { font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .55); margin-top: 12px; max-width: 215px; }
@media (max-width: 980px) {
.trust-bar-wrap { padding: 32px 24px; }
.trust-bar { grid-template-columns: 1fr 1fr; row-gap: 8px; }
.trust-bar > .trust-item { padding: 18px 20px; }
.trust-bar > .trust-item:nth-child(odd) { border-left: none; }
.trust-bar > .trust-item:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .08); }
}
@media (max-width: 560px) {
.trust-bar-wrap { padding: 28px 16px; }
.trust-bar { grid-template-columns: 1fr; }
.trust-bar > .trust-item { padding: 18px 8px; border-left: none; }
.trust-bar > .trust-item + .trust-item { border-top: 1px solid rgba(255, 255, 255, .08); }
.trust-bar-heading { font-size: 24px; }
}
/* ---------- TESTIMONIALS (navy-gradient carousel) ----------
Big quote-mark circle on left, rotating quotes on right with attribution.
CSS-only auto-rotate. */
.testimonials-wrap { background: linear-gradient(120deg, #1f3157 0%, var(--navy) 58%, #35527f 100%); padding: 40px 24px; color: #fff; position: relative; overflow: hidden; }
/* subtle Clarity-style dot accent to echo the hero pattern */
.testimonials-wrap::before {
content: '';
position: absolute;
top: 32px;
right: 32px;
width: 160px;
height: 160px;
background-image: radial-gradient(circle, rgba(155, 184, 219, .25) 1.4px, transparent 1.8px);
background-size: 14px 14px;
pointer-events: none;
}
.testimonials-wrap::after {
content: '';
position: absolute;
bottom: 32px;
left: 32px;
width: 120px;
height: 120px;
background-image: radial-gradient(circle, rgba(155, 184, 219, .2) 1.4px, transparent 1.8px);
background-size: 14px 14px;
pointer-events: none;
}
.testimonials-inner { position: relative; z-index: 1; }
.testimonials-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 40px; align-items: center; }
.testimonials-mark { width: 150px; height: 150px; border-radius: 50%; background: rgba(255, 255, 255, .12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.testimonials-mark i { font-size: 70px; color: var(--sky); }
.testimonials-slides { position: relative; min-height: 150px; }
.testimonial-slide { position: absolute; top: 0; left: 0; right: 0; opacity: 0; animation: testimonial-rotate var(--t-duration, 18s) ease-in-out infinite; }
.testimonial-slide[data-index="0"] { animation-delay: 0s; }
.testimonial-slide[data-index="1"] { animation-delay: calc(var(--t-duration, 18s) / var(--t-count, 3) * 1); }
.testimonial-slide[data-index="2"] { animation-delay: calc(var(--t-duration, 18s) / var(--t-count, 3) * 2); }
.testimonial-slide[data-index="3"] { animation-delay: calc(var(--t-duration, 18s) / var(--t-count, 3) * 3); }
.testimonial-slide[data-index="4"] { animation-delay: calc(var(--t-duration, 18s) / var(--t-count, 3) * 4); }
@keyframes testimonial-rotate {
0% { opacity: 0; transform: translateY(8px); }
4% { opacity: 1; transform: translateY(0); }
30% { opacity: 1; transform: translateY(0); }
35% { opacity: 0; transform: translateY(-8px); }
100% { opacity: 0; transform: translateY(-8px); }
}
.testimonial-quote { font-family: var(--font-display); font-size: 26px; line-height: 1.45; font-weight: 500; margin: 0 0 24px; color: #fff; letter-spacing: -0.015em; quotes: "\201C" "\201D"; }
.testimonial-quote::before { content: open-quote; margin-right: 2px; }
.testimonial-quote::after { content: close-quote; margin-left: 2px; }
.testimonial-author { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .9); }
.testimonial-role { font-weight: 400; color: rgba(255, 255, 255, .65); margin-left: 4px; }
.testimonial-role::before { content: ", "; }
@media (prefers-reduced-motion: reduce) {
.testimonial-slide { animation: none; }
.testimonial-slide[data-index="0"] { opacity: 1; }
}
@media (max-width: 900px) {
.testimonials-wrap { padding: 56px 20px; }
.testimonials-inner { grid-template-columns: 1fr; gap: 24px; text-align: center; }
.testimonials-mark { width: 120px; height: 120px; margin: 0 auto; }
.testimonials-mark i { font-size: 56px; }
.testimonial-quote { font-size: 19px; }
.testimonials-slides { min-height: 240px; }
}
/* ---------- ACTION TILES (McKesson-style 3-tile row) ----------
Three cards: icon, title, body, CTA. Each tile gets a top accent border
accent border-top is uniform Clarity navy. */
.action-tiles-wrap { background: var(--bg-secondary); padding: 0; }
.action-tiles { max-width: 1200px; margin: 0 auto; padding: 80px 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.action-tile { background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 28px 28px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; transition: border-color .15s, transform .15s, box-shadow .15s; color: var(--navy); text-decoration: none; }
a.action-tile:hover { border-color: currentColor; transform: translateY(-2px); box-shadow: 0 4px 24px rgba(15, 39, 68, .06); }
/* Top accent stripe removed for cleaner look — kept commented for easy restore */
/* .action-tile::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: currentColor; } */
.action-tile-icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: rgba(15, 39, 68, .04); display: flex; align-items: center; justify-content: center; color: currentColor; flex-shrink: 0; }
.action-tile-icon i { font-size: 24px; }
.action-tile-title { font-size: 22px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.2; margin: 0; }
.action-tile-body { font-size: 14px; color: var(--text-secondary); line-height: 1.55; flex: 1; margin: 0; }
.action-tile-cta { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: currentColor; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; transition: gap .15s; }
a.action-tile:hover .action-tile-cta { gap: 10px; }
.action-tile-cta i { font-size: 16px; }
/* Clarity palette — uniform navy for all action tile accents */
.action-tile { color: var(--navy); }
@media (max-width: 900px) {
.action-tiles { grid-template-columns: 1fr; gap: 16px; padding: 32px 20px; }
.action-tile { padding: 28px 22px 22px; }
.action-tile-title { font-size: 20px; }
}
/* ---------- DIFFERENTIATOR STRIP ---------- */
.diff-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--border); }
.diff-item { padding: 20px 22px; display: flex; align-items: center; gap: 14px; border-right: 1px solid var(--border); }
.diff-item:last-child { border-right: none; }
.dicon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--bg-secondary); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dicon i { font-size: 19px; color: var(--navy); }
.dtitle { font-size: 15px; font-weight: 500; margin-bottom: 2px; }
.dsub { font-size: 12px; color: var(--text-secondary); }
/* ---------- FEATURED PRODUCTS ---------- */
/* Wrap section provides the soft blue wash; inner section keeps content max-width. */
.featured-wrap { background: linear-gradient(180deg, #e8f0fb 0%, #d9e6f6 100%); border-top: 1px solid rgba(15, 39, 68, .06); border-bottom: 1px solid rgba(15, 39, 68, .06); }
.featured-section { max-width: 1200px; margin: 0 auto; padding: 48px 24px; }
.featured-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; gap: 24px; }
.featured-title { font-family: var(--font-display); font-size: 36px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; margin-bottom: 6px; line-height: 1.15; }
.featured-sub { font-size: 16px; color: var(--text-secondary); line-height: 1.5; }
.view-all { font-size: 14px; color: var(--navy); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; text-decoration: none; white-space: nowrap; padding-bottom: 6px; transition: gap .15s; }
.view-all:hover { gap: 10px; }
.featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.feat-card { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(165deg, #ffffff 0%, #eaf1fa 100%); box-shadow: 0 10px 30px -14px rgba(41, 63, 111, .18); transition: border-color .15s, box-shadow .15s, transform .15s; position: relative; display: flex; flex-direction: column; }
.feat-card:hover { border-color: var(--navy); box-shadow: 0 4px 24px rgba(15, 39, 68, .06); transform: translateY(-2px); }
.feat-tag { position: absolute; top: 14px; left: 14px; background: var(--navy); color: var(--portal-blue); font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: var(--radius-md); letter-spacing: .06em; z-index: 2; }
.feat-img { background: var(--bg-secondary); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border); cursor: pointer; padding: 16px; }
.feat-img img { width: 100%; height: 100%; object-fit: contain; } /* real product photos drop in here */
.feat-img i { font-size: 48px; color: var(--text-secondary); } /* placeholder only */
.feat-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.feat-cat { font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--text-secondary); margin-bottom: 6px; text-transform: uppercase; }
.feat-name { font-size: 18px; font-weight: 600; margin-bottom: 4px; line-height: 1.25; cursor: pointer; color: var(--text-primary); text-decoration: none; letter-spacing: -0.01em; min-height: calc(2 * 1.25em); display: flex; align-items: flex-start; }
.feat-name:hover { color: var(--navy); }
.feat-sku { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; flex: 1; }
.feat-actions { display: flex; gap: 8px; }
.feat-btn-primary { flex: 1; padding: 12px 16px; background: var(--navy); color: var(--portal-blue); border: 1px solid var(--navy); border-radius: var(--radius-md); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; text-align: center; transition: opacity .15s; }
.feat-btn-primary:hover { opacity: .92; }
.feat-btn-ghost { flex: 1; padding: 12px 16px; background: transparent; color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: var(--radius-md); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; text-align: center; transition: border-color .15s; }
.feat-btn-ghost:hover { border-color: var(--navy); color: var(--navy); }
@media (max-width: 900px) {
.featured-section { padding: 56px 20px; }
.featured-header { flex-direction: column; align-items: flex-start; margin-bottom: 28px; }
.featured-title { font-size: 24px; }
.featured-grid { grid-template-columns: 1fr; gap: 16px; }
}
/* ---------- CATEGORY GRID (products page) ---------- */
.prod-section { padding: 24px 20px; }
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cat-card { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-primary); transition: border-color .15s; }
.cat-card:hover { border-color: var(--navy); }
.cat-img { background: var(--bg-secondary); aspect-ratio: 5/3; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border); cursor: pointer; }
.cat-img i { font-size: 28px; color: var(--text-secondary); }
.cat-body { padding: 10px 12px; }
.cat-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; cursor: pointer; }
.cat-name:hover { color: var(--navy); }
.cat-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.cat-view { font-size: 11px; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; gap: 3px; }
.cat-view:hover { color: var(--navy); }
/* ---------- PRODUCT LIST (inside a category) ---------- */
.inline-search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-primary); margin-bottom: 16px; }
.inline-search i { font-size: 15px; color: var(--text-secondary); }
.inline-search input { border: none; outline: none; flex: 1; font-size: 13px; background: transparent; color: var(--text-primary); }
.inline-search input::placeholder { color: var(--text-secondary); }
.prod-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.prod-card { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-primary); transition: border-color .15s; }
.prod-card:hover { border-color: var(--navy); }
.prod-card-img { background: var(--bg-secondary); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border); cursor: pointer; }
.prod-card-img i { font-size: 24px; color: var(--text-secondary); }
.prod-card-body { padding: 10px 12px; }
.prod-card-name { font-size: 12px; font-weight: 500; margin-bottom: 3px; cursor: pointer; }
.prod-card-name:hover { color: var(--navy); }
.prod-card-sku { font-size: 10px; color: var(--text-secondary); margin-bottom: 8px; }
.prod-card-actions { display: flex; gap: 6px; margin-top: 6px; }
.prod-card-btn { flex: 1; padding: 6px 0; font-size: 10px; font-weight: 500; border-radius: var(--radius-md); cursor: pointer; text-align: center; }
.prod-card-btn-primary { background: var(--navy); color: var(--portal-blue); border: none; }
.prod-card-btn-ghost { background: transparent; color: var(--text-primary); border: 1px solid var(--border-strong); }
/* ---------- PRODUCT DETAIL: YouTube video ---------- */
.pd-video { margin: 40px 0 0; }
.pd-video-frame { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; background: var(--navy-dark); box-shadow: 0 24px 56px -16px rgba(15, 39, 68, .25); }
.pd-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* ---------- PRODUCT DETAIL: Documents band (dark navy, white doc cards) ---------- */
.pd-docs-band { background: var(--navy-dark); padding: 64px 24px; margin-top: 56px; color: #fff; }
.pd-docs-inner { max-width: 1200px; margin: 0 auto; }
.pd-docs-header { margin-bottom: 32px; }
.pd-docs-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; color: rgba(232, 240, 251, .65); text-transform: uppercase; margin-bottom: 10px; }
.pd-docs-title { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: #fff; letter-spacing: -0.015em; line-height: 1.2; margin: 0; }
.pd-docs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pd-doc-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: #fff; border-radius: var(--radius-lg); text-decoration: none; color: var(--text-primary); transition: transform .15s ease, box-shadow .15s ease; }
.pd-doc-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, .15); }
.pd-doc-icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: rgba(15, 39, 68, .06); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pd-doc-icon i { font-size: 24px; color: var(--navy); }
.pd-doc-text { min-width: 0; flex: 1; }
.pd-doc-title { font-size: 15px; font-weight: 600; color: var(--text-primary); line-height: 1.3; margin-bottom: 4px; }
.pd-doc-meta { font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 4px; }
.pd-doc-meta i { font-size: 12px; }
.pd-wrap-tail { margin-top: 56px; }
@media (max-width: 900px) {
.pd-docs-band { padding: 48px 20px; }
.pd-docs-title { font-size: 22px; }
.pd-docs-grid { grid-template-columns: 1fr; gap: 12px; }
}
/* ---------- PRODUCT DETAIL ---------- */
.prod-detail-wrap { padding: 20px; }
.prod-detail-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.prod-detail-img-panel { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-primary); }
.prod-detail-img-main { background: var(--bg-secondary); aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border); }
.prod-detail-img-main i { font-size: 56px; color: var(--text-secondary); }
.prod-detail-img-thumbs { display: flex; gap: 8px; padding: 12px; }
.thumb { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--bg-secondary); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.thumb.active { border-color: var(--navy); }
.prod-detail-info { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; background: var(--bg-primary); }
.prod-detail-cat { font-size: 10px; font-weight: 500; letter-spacing: .1em; color: var(--text-secondary); margin-bottom: 6px; text-transform: uppercase; }
.prod-detail-name { font-size: 17px; font-weight: 500; margin-bottom: 4px; line-height: 1.3; }
.prod-detail-sku { font-size: 11px; color: var(--text-secondary); margin-bottom: 14px; }
.pd-divider { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
.prod-detail-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 14px; }
.field-label { font-size: 11px; font-weight: 500; color: var(--text-secondary); margin-bottom: 5px; }
.field-input { width: 100%; padding: 8px 10px; font-size: 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-secondary); color: var(--text-primary); outline: none; margin-bottom: 12px; }
.qty-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.qty-btn { width: 30px; height: 30px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-secondary); color: var(--text-primary); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.qty-val { font-size: 14px; font-weight: 500; min-width: 28px; text-align: center; }
.spec-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.spec-row:last-child { border-bottom: none; }
.spec-key { font-size: 11px; color: var(--text-secondary); }
.spec-val { font-size: 11px; font-weight: 500; }
.inquiry-btn { width: 100%; padding: 11px; background: var(--navy); color: var(--portal-blue); border: none; border-radius: var(--radius-md); font-size: 13px; font-weight: 500; cursor: pointer; margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; }
/* ---------- QUOTE PAGE ---------- */
.quote-page { padding: 20px; }
.qp-hero { background: var(--navy-dark); border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 16px; }
.qp-eyebrow { font-size: 9px; font-weight: 500; letter-spacing: .12em; color: rgba(232,240,251,.5); margin-bottom: 6px; text-transform: uppercase; }
.qp-h { font-size: 18px; font-weight: 500; color: #fff; margin-bottom: 5px; }
.qp-sub { font-size: 12px; color: rgba(232,240,251,.65); line-height: 1.6; }
.qp-prefill { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-md); padding: 10px 12px; margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.qp-prefill-icon { width: 28px; height: 28px; border-radius: var(--radius-md); background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qp-prefill-icon i { font-size: 14px; color: var(--muted-blue); }
.qp-prefill-label { font-size: 9px; color: rgba(232,240,251,.5); letter-spacing: .08em; font-weight: 500; margin-bottom: 1px; text-transform: uppercase; }
.qp-prefill-val { font-size: 12px; color: #fff; font-weight: 500; }
.qp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fblock { margin-bottom: 14px; }
.flabel { font-size: 11px; font-weight: 500; margin-bottom: 5px; display: flex; align-items: center; gap: 4px; }
.frequired { color: var(--required); }
.fdesc { font-size: 10px; color: var(--text-secondary); margin-bottom: 6px; line-height: 1.5; }
.fin { width: 100%; padding: 9px 11px; font-size: 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-secondary); color: var(--text-primary); outline: none; }
.fin:focus { border-color: var(--navy); background: #fff; }
.fin::placeholder { color: var(--text-secondary); }
.frow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fta { width: 100%; padding: 9px 11px; font-size: 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-secondary); color: var(--text-primary); outline: none; height: 80px; resize: none; font-family: inherit; }
.product-summary { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; margin-bottom: 14px; }
.ps-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ps-title { font-size: 12px; font-weight: 500; }
.ps-edit { font-size: 10px; color: var(--navy); cursor: pointer; font-weight: 500; }
.ps-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.ps-item:last-child { border-bottom: none; padding-bottom: 0; }
.ps-img { width: 42px; height: 42px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ps-img i { font-size: 18px; color: var(--text-secondary); }
.ps-info { flex: 1; }
.ps-name { font-size: 12px; font-weight: 500; margin-bottom: 2px; }
.ps-meta { font-size: 10px; color: var(--text-secondary); }
.ps-qty { font-size: 11px; color: var(--text-secondary); align-self: center; background: var(--bg-primary); padding: 3px 8px; border-radius: var(--radius-md); border: 1px solid var(--border); }
.timeline-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; margin-bottom: 14px; }
.tc-title { font-size: 12px; font-weight: 500; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.tc-title i { color: var(--navy); }
.tc-step { display: flex; gap: 10px; padding: 6px 0; font-size: 11px; color: var(--text-secondary); line-height: 1.5; }
.tc-step-num { width: 20px; height: 20px; border-radius: 50%; background: var(--bg-primary); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 500; color: var(--navy); flex-shrink: 0; }
.submit-row { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--border); margin-top: 8px; }
.submit-note { font-size: 10px; color: var(--text-secondary); }
.submit-btn { background: var(--navy); color: var(--portal-blue); font-size: 13px; font-weight: 500; padding: 11px 26px; border-radius: var(--radius-md); border: none; cursor: pointer; display: flex; align-items: center; gap: 6px; }
/* ---------- RESOURCES ---------- */
.res-page { padding: 20px; }
.res-tabs { display: flex; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 20px; }
.rtab { padding: 8px 0; font-size: 12px; font-weight: 500; color: var(--text-secondary); border-right: 1px solid var(--border); cursor: pointer; background: var(--bg-primary); flex: 1; text-align: center; }
.rtab:last-child { border-right: none; }
.rtab.on { background: var(--navy); color: var(--portal-blue); }
.rtab-content { display: none; }
.rtab-content.on { display: block; }
.rcard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.rcard { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; background: var(--bg-primary); }
.rcard i { font-size: 18px; color: var(--text-secondary); margin-bottom: 8px; display: block; }
.rcard-name { font-size: 13px; font-weight: 500; margin-bottom: 3px; }
.rcard-sub { font-size: 11px; color: var(--text-secondary); }
.news-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ncard { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-primary); }
.ncard-img { background: var(--bg-secondary); height: 70px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border); }
.ncard-img i { font-size: 20px; color: var(--text-secondary); }
.ncard-body { padding: 10px 12px; }
.ncard-date { font-size: 10px; color: var(--text-secondary); margin-bottom: 3px; }
.ncard-title { font-size: 12px; font-weight: 500; line-height: 1.4; }
/* ---------- CONTACT ---------- */
.contact-page { padding: 20px; }
.contact-hero { background: var(--navy-dark); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 16px; }
.contact-hero h2 { font-size: 18px; font-weight: 500; color: #fff; margin-bottom: 4px; }
.contact-hero p { font-size: 12px; color: rgba(232,240,251,.6); line-height: 1.6; }
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
.ccard { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; background: var(--bg-primary); }
.ccard-icon { width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--bg-secondary); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.ccard-icon i { font-size: 16px; color: var(--navy); }
.ccard-title { font-size: 12px; font-weight: 500; margin-bottom: 6px; }
.ccard-detail { font-size: 11px; color: var(--text-secondary); line-height: 1.9; }
.form-wrap { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; background: var(--bg-primary); }
.form-title { font-size: 14px; font-weight: 500; margin-bottom: 14px; }
.quote-note { padding: 10px 12px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 14px; font-size: 11px; color: var(--text-secondary); line-height: 1.5; }
.quote-note a { color: var(--navy); font-weight: 500; cursor: pointer; }
.map-mock { border: 1px solid var(--border); border-radius: var(--radius-lg); height: 200px; background: var(--bg-secondary); margin-top: 12px; }
/* Production: replace .map-mock with an embedded Google Map iframe. */
/* ---------- RESOURCES PAGE ---------- */
.resources-page { background: linear-gradient(180deg, #f4f8fc 0%, #ffffff 60%); }
.res-hero { padding: 80px 24px 64px; background: linear-gradient(135deg, var(--portal-blue) 0%, #ffffff 60%, #eef3f9 100%); border-bottom: 1px solid var(--border); }
.res-hero-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.res-hero-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--navy); text-transform: uppercase; margin-bottom: 16px; }
.res-hero-title { font-family: var(--font-display); font-size: 52px; font-weight: 800; line-height: 1.05; color: var(--navy); letter-spacing: -0.025em; margin: 0 0 20px; }
.res-hero-sub { font-size: 18px; line-height: 1.55; color: var(--text-secondary); max-width: 720px; margin: 0 auto 32px; }
.res-hero-nav { display: inline-flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 6px; background: rgba(255, 255, 255, .75); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-radius: 999px; border: 1px solid rgba(255, 255, 255, .9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 4px 12px rgba(15, 39, 68, .06); }
.res-hero-nav a { padding: 8px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-primary); text-decoration: none; transition: background .15s, color .15s; }
.res-hero-nav a:hover { background: var(--navy); color: #fff; }
.res-section { padding: 80px 24px; }
.res-section-alt { background: linear-gradient(160deg, #314a7d 0%, var(--navy) 55%, #20335a 100%); border-top: none; border-bottom: none; }
.res-section-alt .res-section-title { color: #fff; }
.res-section-alt .res-section-eyebrow { color: var(--sky); }
.res-section-alt .res-section-sub { color: rgba(255, 255, 255, .7); }
.res-section-alt .res-empty { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .72); }
.res-section-alt .res-empty i { color: var(--sky); opacity: .7; }
.res-section-alt .res-empty code { background: rgba(255, 255, 255, .12); color: #fff; }
.res-section-inner { max-width: 1200px; margin: 0 auto; }
.res-section-header { text-align: center; margin-bottom: 48px; }
.res-section-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 10px; }
.res-section-title { font-family: var(--font-display); font-size: 36px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 12px; }
.res-section-sub { font-size: 16px; line-height: 1.55; color: var(--text-secondary); max-width: 600px; margin: 0 auto; }
.res-section-tint { background: var(--bg-secondary); }
/* Full Product Catalog — lead section: the first, biggest thing on Resources */
.res-catalog { padding: 72px 24px; background: linear-gradient(160deg, #314a7d 0%, var(--navy) 55%, #20335a 100%); border-bottom: none; }
.res-catalog-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 56px; align-items: center; }
.res-catalog-cover { display: block; line-height: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .5); transition: transform .2s ease; }
.res-catalog-cover:hover { transform: translateY(-4px); }
.res-catalog-cover img { width: 100%; height: auto; display: block; }
.res-catalog-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--sky); text-transform: uppercase; margin-bottom: 14px; }
.res-catalog-title { font-family: var(--font-display); font-size: 46px; font-weight: 800; line-height: 1.04; color: #fff; letter-spacing: -0.025em; margin: 0 0 18px; }
.res-catalog-sub { font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, .72); max-width: 520px; margin: 0 0 28px; }
.res-catalog-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.res-catalog-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background: #fff; color: var(--navy); border-radius: var(--radius-md); font-size: 15px; font-weight: 600; text-decoration: none; border: 1px solid #fff; transition: opacity .15s, transform .15s; }
.res-catalog-btn:hover { opacity: .92; transform: translateY(-1px); }
.res-catalog-btn i { font-size: 18px; }
.res-catalog-btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.res-catalog-btn-ghost:hover { background: rgba(255, 255, 255, .1); }
/* Brochure/document grid */
.res-doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.res-doc-card { display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none; color: var(--text-primary); transition: transform .15s, border-color .15s, box-shadow .15s; }
.res-doc-card:hover { transform: translateY(-2px); border-color: var(--navy); box-shadow: 0 12px 28px -8px rgba(15, 39, 68, .12); }
.res-doc-icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--portal-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.res-doc-icon i { font-size: 26px; color: var(--navy); }
.res-doc-body { flex: 1; min-width: 0; }
.res-doc-title { font-size: 15px; font-weight: 600; color: var(--text-primary); line-height: 1.3; margin-bottom: 6px; }
.res-doc-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 8px; }
.res-doc-meta { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 4px; text-transform: uppercase; }
.res-doc-meta i { font-size: 12px; }
/* Brochures grouped by category — a light heading + divider above each grid (navy "alt" section). */
.res-doc-group { margin-top: 44px; }
.res-doc-group:first-child { margin-top: 0; }
.res-section-alt .res-doc-cat { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 19px; font-weight: 700; color: #fff; letter-spacing: -0.01em; margin: 0 0 22px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.res-section-alt .res-doc-cat i { font-size: 21px; color: var(--sky); }
/* Video grid */
.res-video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.res-video-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.res-video-frame { position: relative; aspect-ratio: 16/9; background: var(--navy-dark); }
.res-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.res-video-meta { padding: 20px 24px; }
.res-video-title { font-size: 16px; font-weight: 600; color: var(--text-primary); line-height: 1.3; margin-bottom: 6px; }
.res-video-sub { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }
.res-video-grid--collapsed .res-video-card:nth-child(n+7) { display: none; }
.res-more-wrap { text-align: center; margin-top: 32px; }
.res-more-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 26px; background: transparent; border: 1.5px solid var(--navy); color: var(--navy); border-radius: var(--radius-md); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.res-more-btn:hover { background: var(--navy); color: #fff; }
/* Category browser: tiles -> drill-in panel (Videos + Brochures) */
.res-cat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.res-cat-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 26px 24px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; text-align: left; font-family: inherit; transition: transform .15s, border-color .15s, box-shadow .15s; }
.res-cat-tile:hover { transform: translateY(-3px); border-color: var(--navy); box-shadow: 0 14px 30px -10px rgba(15, 39, 68, .16); }
.res-cat-tile-icon { width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--portal-blue); display: flex; align-items: center; justify-content: center; }
.res-cat-tile-icon i { font-size: 28px; color: var(--navy); }
.res-cat-tile-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; line-height: 1.2; }
.res-cat-tile-count { font-size: 13px; color: var(--text-secondary); }
.res-cat-back { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; padding: 0; margin-bottom: 22px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--navy); }
.res-cat-back:hover { text-decoration: underline; }
.res-cat-back i { font-size: 16px; }
.res-cat-panel-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; margin: 0 0 26px; }
.res-cat-panel-title i { font-size: 24px; color: var(--navy); }
/* Category tiles are white cards in BOTH the Videos and Brochures sections.
Scoping to .res-section (0,2,0) overrides Elementor's global Kit button rule
(.elementor-kit-5 button { background: var(--e-global-color-primary) = #254169 }),
which otherwise paints these