/* —— Brand palette (tuned to new logo) —— */
:root{
  --primary:#0E3554; --primary-600:#0C2E49; --primary-700:#0A273E;
  --accent:#1F8CF5; --accent-2:#2AB0FF;
  --ink:#0f172a; --muted:#344454; --text:#1f2937;
  --bg:#fff; --bg-subtle:#F5F8FC; --card:#fff; --border:#e5e7eb; --ring:rgba(14,53,84,.22);
  --radius:14px; --shadow-1:0 10px 25px rgba(2,6,23,.08); --shadow-2:0 20px 40px rgba(2,6,23,.10);
  --maxw:1200px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Utility */
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:14px 18px;border-radius:12px;border:1px solid transparent;text-decoration:none;font-weight:600;transition:all .18s ease}
.btn.primary{background:var(--primary);color:#fff;box-shadow:0 8px 20px rgba(14,53,84,.18)}
.btn.primary:hover{background:var(--primary-600);transform:translateY(-1px);box-shadow:0 12px 28px rgba(14,53,84,.22)}
.btn.ghost{background:transparent;color:var(--primary);border-color:rgba(14,53,84,.25)}
.btn.ghost:hover{background:rgba(14,53,84,.06)}



/* Ghost button variant for dark hero */
.hero .btn.ghost{color:#fff;border:1px solid rgba(255,255,255,.5)}
.hero .btn.ghost:hover{background:rgba(255,255,255,.12);}

/* Hero primary button -> VIDEOBOLT cyan */
.hero .btn.primary {
  background: #2ab0ff;
  box-shadow: 0 8px 20px rgba(42, 176, 255, .25);
}
.hero .btn.primary:hover {
  background: #189fe9; /* slightly darker on hover */
  box-shadow: 0 12px 28px rgba(42, 176, 255, .35);
}

.pill{display:inline-flex;align-items:center;gap:.5rem;padding:6px 12px;border-radius:999px;background:rgba(31,140,245,.10);color:var(--primary);font-weight:600;font-size:.9rem}

/* Pill variant for dark hero */
.hero .pill{background:rgba(255,255,255,.16);color:#fff}

/* extra space under the pill in the hero */
.hero .pill {
  margin-bottom: 24px;   /* try 12–16px */
}

/* =========================
   BHHS top banner
   ========================= */
.bhhs-banner{
  background:#0E3554; color:#fff; text-align:center;
  padding:15px 0; font-size:.95rem; font-weight:500;
  border-bottom:3px solid #26a4ef; /* thin separator line */
}
.bhhs-banner a{color:#2AB0FF; font-weight:600; text-decoration:none}
.bhhs-banner a:hover{text-decoration:underline}

/* =========================
   Header / Navigation
   ========================= */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(8px);
  background:color-mix(in oklab, white 85%, transparent);
  border-bottom:1px solid var(--border);
  overflow:visible;
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:120px;                 /* compact header */
  overflow:visible;
}
.brand{display:flex; align-items:center; text-decoration:none; line-height:0}
.brand-img{
  height:64px;                 /* balanced desktop size */
  width:auto; display:block; margin:0;
  image-rendering:-webkit-optimize-contrast;
}
.brand-text{position:absolute; left:-9999px}
.nav-links{display:flex; gap:18px; align-items:center}
.nav-links a{padding:12px 14px; text-decoration:none; color:var(--muted); font-weight:600; border-radius:10px}
.nav-links a:hover{background:var(--bg-subtle); color:var(--ink)}

/* =========================
   Hero (with background image + overlay)
   ========================= */
.hero{
  position:relative; isolation:isolate;
  /* Image + overlay for contrast */
  background:
	linear-gradient(90deg, rgba(14,53,84,.80) 0%, rgba(14,53,84,.65) 45%, rgba(14,53,84,.40) 100%),
	url("https://videobolt.com/img/hero-image.png") center/cover no-repeat;
  border-bottom:1px solid var(--border);
}
.hero-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;padding:72px 0 60px;align-items:center}
.hero h1{
  color:#fff;
  font-size:clamp(2rem,3.6vw + 1rem,3.4rem);
  line-height:1.05; letter-spacing:-.02em; margin:0 0 18px;
  text-shadow:0 2px 6px rgba(0,0,0,.18);
}
.hero p{
  color:rgba(255,255,255,.9);
  font-size:clamp(1rem,.6vw + .9rem,1.25rem);
  margin:0 0 28px;
  text-shadow:0 1px 3px rgba(0,0,0,.16);
}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px}

.hero-card{
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(120%) blur(2px);
  backdrop-filter:saturate(120%) blur(2px);
  border:1px solid rgba(255,255,255,.75);
  border-radius:20px; padding:22px;
  box-shadow:var(--shadow-1);
  display:grid; gap:12px;
}
.hero-card .row{display:flex;gap:12px;align-items:center}
.dot{width:10px;height:10px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 6px rgba(31,140,245,.12)}
.stat{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}
.stat strong{font-size:1.1rem;color:var(--primary-700)}
.small{font-size:.9rem;color:#6b7a88}

/* =========================
   Logo strip
   ========================= */
.logos{padding:26px 0;background:#fbfcfe;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.logos .row{display:flex;flex-wrap:wrap;gap:28px;opacity:.8;align-items:center;justify-content:center}
.logos img,.logo-pill{height:28px;filter:grayscale(1) contrast(1.1);opacity:.9}
.logo-pill{display:flex;align-items:center;justify-content:center;padding:10px 16px;border:1px dashed #cbd5e1;border-radius:999px;font-weight:600;color:#64748b}

/* =========================
   Sections / Cards
   ========================= */
.section{padding:72px 0}
.section h2{font-size:clamp(1.6rem,2.2vw + .6rem,2.2rem);margin:0 0 14px;color:var(--primary-700)}
.section p.lead{color:var(--muted);max-width:780px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:30px}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:22px;box-shadow:var(--shadow-1);transition:transform .18s, box-shadow .18s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.icon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:rgba(31,140,245,.10);color:var(--primary);font-weight:800}
.card h3{margin:12px 0 8px;color:var(--primary-700)}
.card p{color:var(--muted)}

/* =========================
   Audience routing
   ========================= */
.aud{background:var(--bg-subtle);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.aud-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:28px}
.aud-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:22px;box-shadow:var(--shadow-1);display:grid;gap:14px}
.aud-card h3{margin:4px 0 4px;color:var(--primary-700)}
.aud-card p{color:var(--muted);margin:0 0 8px}
.aud-card .btn{justify-content:center}

/* =========================
   Use cases
   ========================= */
.use-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:28px}
.use{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-1);border:1px solid var(--border);background:linear-gradient(180deg,#f8fbff,#eef5fb);padding:20px;min-height:220px;display:grid;align-content:flex-end}
.use h4{margin:0;color:var(--primary-700)}
.use p{margin:6px 0 0;color:var(--muted)}

/* =========================
   Testimonial
   ========================= */
.quote{background:linear-gradient(180deg,#f7fbff,#eef4fa);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.quote .bubble{background:#fff;border:1px solid var(--border);border-radius:20px;padding:22px;box-shadow:var(--shadow-1)}

/* =========================
   Footer
   ========================= */
footer{padding:48px 0;background:#0B2F4E;color:#dce7f3}
footer a{color:#fff;text-decoration:none;opacity:.95}
.fgrid{display:grid;grid-template-columns:1.2fr .8fr .8fr .8fr;gap:24px}
.fgrid h5{margin:0 0 10px;font-size:1rem;color:#e7f1fb;letter-spacing:.02em}
.fgrid ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}

/* =========================
   Responsive
   ========================= */
@media (max-width:1024px){
  .brand-img{height:56px}
  .hero-inner{grid-template-columns:1fr;padding:56px 0}
  .cards{grid-template-columns:repeat(2,1fr)}
  .use-grid{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .nav-links{display:none}
  .brand-img{height:48px}
  .cards{grid-template-columns:1fr}
  .use-grid{grid-template-columns:1fr}
  .aud-grid{grid-template-columns:1fr}
}

/* Motion safe */
@media (prefers-reduced-motion:reduce){
  .btn.primary:hover,.card:hover{transform:none}
}

.nowrap { white-space: nowrap; }

/* Force a 2-line layout on wider screens, allow natural wrapping on small */
.h1-lines span { white-space: nowrap; }   /* keep each line together */
.br-xl { display: none; }                 /* hide the manual break by default */

@media (min-width: 900px) {
  .br-xl { display: inline; }             /* show the break on desktop+ */
}

/* (optional) fine-tune spacing since the white box is gone */
.hero h1.h1-lines { margin-bottom: 18px; }

.partner-logos.grid {
  background: #fff;
  padding: 36px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.partner-logos.grid ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 logos per row */
  gap: 32px 40px; /* row gap / column gap */
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-items: center;
}

.partner-logos.grid img {
  height: 40px;      /* standard height */
  width: auto;
  max-width: 160px;
  object-fit: contain;
}

/* Responsive: fewer per row on small screens */
@media (max-width: 1024px) {
  .partner-logos.grid ul {
	grid-template-columns: repeat(3, 1fr); /* 3 logos per row on tablets */
  }
}
@media (max-width: 640px) {
  .partner-logos.grid ul {
	grid-template-columns: repeat(2, 1fr); /* 2 logos per row on mobile */
  }
}

/* Uniform on-brand icons for solution cards */
.card .card-icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: rgba(14,53,84,.08);     /* soft navy tint */
  color: var(--primary-700);          /* icon stroke color */
  display: grid; place-items: center;
  margin-bottom: 10px;
}
.card .card-icon svg {
  width: 24px; height: 24px;
}

.hero-partner {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.8);
}

.hero-partner img {
  height: 28px;   /* keeps it modest but visible */
  width: auto;
  object-fit: contain;
}

/* Pill with SVG icon (for Audience Routing) */
.pill-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(14,53,84,.08);   /* match brand tint used elsewhere */
  color: var(--primary-700);
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .02em;
}

.pill-with-icon svg {
  width: 16px; height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Keep spacing consistent with your cards */
.aud-card .pill-with-icon { margin-bottom: 8px; }

/* Make Audience icons match the Solutions icons */
.card .card-icon,
.aud-card .card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(14,53,84,.08);
  color: var(--primary-700);
  display: grid;
  place-items: center;
  margin-bottom: 10px;
}
.card .card-icon svg,
.aud-card .card-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Optional: align content nicely and pin the CTA at the bottom */
.aud-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto; /* icon, h3, paragraph grows, button */
  transition: transform .18s ease, box-shadow .18s ease;
}
.aud-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.aud-card h3 { margin-top: 4px; }

/* --- HERO RESPONSIVE FIXES --- */

/* 1) Allow natural wrapping by default (mobile/tablet) */
.h1-lines span { white-space: normal; }
.h1-lines { word-break: break-word; hyphens: auto; }

/* 2) Keep the 2-line layout on desktop and prevent awkward wraps */
@media (min-width: 900px) {
  .br-xl { display: inline; }
  .h1-lines span { white-space: nowrap; }
}

/* 3) Add a touch more side padding in the hero, honoring iOS safe areas */
.hero .container {
  padding-inline: max(24px, calc(20px + env(safe-area-inset-left)));
}

/* 4) Cap the text column width so buttons/partner row don’t run to edges */
.hero-inner > div:first-child {
  max-width: 720px;              /* adjust 660–760 if you like */
}

/* Optional: a bit more breathing room below the CTA row and partner line */
.hero .cta-row { margin-bottom: 16px; }
.hero-partner { margin-top: 16px; }

/* — No hyphenation anywhere in the hero — */
.hero h1,
.hero p,
.h1-lines {
  hyphens: none !important;
  -webkit-hyphens: none !important; /* iOS/Safari */
  -ms-hyphens: none !important;
  word-break: normal;               /* don’t break inside words */
  overflow-wrap: normal;            /* wrap at spaces only */
}

/* Hamburger button — hidden on desktop, shown on mobile */
.nav-toggle, .nav-close {
  appearance: none; border: 0; background: transparent; padding: 10px;
  border-radius: 10px; color: var(--muted); cursor: pointer;
}
.nav-toggle:hover, .nav-close:hover { background: var(--bg-subtle); }
.nav-toggle { display: none; }
@media (max-width: 640px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-links { display: none; } /* you already hide this; keeps it explicit */
}

/* Mobile menu overlay */
.mobile-menu {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(2,6,23,.45); /* dimmed backdrop */
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}

/* Slide-down sheet */
.mobile-menu__sheet {
  position: absolute; left: 0; right: 0;
  top: calc(92px + env(safe-area-inset-top, 0px)); /* below sticky header on most phones */
  background: #fff; color: var(--ink);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 14px 30px rgba(2,6,23,.16);
  border-radius: 0 0 14px 14px;
  padding: 8px 16px 18px;
  transform: translateY(-12px);
  transition: transform .2s ease;
}

/* If BHHS banner exists, offset a bit more on tiny screens */
@media (max-width: 640px) {
  .mobile-menu__sheet { top: calc(92px + 48px + env(safe-area-inset-top, 0px)); } /* header + approx banner */
}

/* Header row inside the sheet */
.mobile-menu__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 4px 8px; font-weight: 700; color: var(--primary-700);
}

/* Links */
.mobile-menu__links {
  display: grid; gap: 10px; padding: 6px 4px 0;
}
.mobile-menu__links a {
  display: block; padding: 12px 10px; border-radius: 10px;
  text-decoration: none; color: var(--ink); font-weight: 600;
  border: 1px solid transparent;
}
.mobile-menu__links a:hover { background: var(--bg-subtle); border-color: var(--border); }
.mobile-menu__links a.login {
  background: var(--primary); color:#fff; text-align:center;
  box-shadow: 0 8px 20px rgba(14,53,84,.18);
}
.mobile-menu__links a.login:hover { background: var(--primary-600); }

/* Open state */
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu.open .mobile-menu__sheet { transform: translateY(0); }

/* Prevent body scroll when menu is open */
body.no-scroll { overflow: hidden; }

/* Center hamburger and add thin divider (mobile only) */
@media (max-width: 640px) {
  .nav-toggle {
	display: flex;                 /* already set to inline-flex; ensure full-width bar */
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 10px 0;               /* bar height */
	margin: 0;                     /* remove any existing margins */
	border-top: 1px solid rgba(14,53,84,.15);  /* thin divider above */
	background: transparent;
	color: var(--primary-700);
  }
  .nav-toggle:hover { background: rgba(14,53,84,.04); } /* subtle hover */
}

.btn.primary:hover{
  background: var(--primary-600);
  color: #fff;                 /* keep text white on hover */
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(14,53,84,.22);
}

/* ========== About page additions ========== */

/* Simple page hero variant (keeps brand look, lighter than homepage hero) */
.page-hero {
  padding: 56px 0 42px;
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(42,176,255,.14), transparent 60%),
    linear-gradient(180deg, #F8FBFF 0%, #F2F6FB 100%);
  border-bottom: 1px solid var(--border);
}
.page-hero h1 { margin: 0 0 10px; color: var(--primary-700); }
.page-hero .lead { max-width: 820px; color: var(--muted); }

/* Two-column split for “What we do now” */
.about-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
}
@media (max-width: 1024px) { .about-grid { grid-template-columns: 1fr; } }

/* Checklist bullets */
.checklist { margin: 18px 0 20px; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.checklist li {
  position: relative; padding-left: 26px; color: var(--muted);
}
.checklist li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 10px; height: 10px; border-radius: 999px;
  background: rgba(31,140,245,.25); box-shadow: 0 0 0 4px rgba(31,140,245,.10);
}

/* LMC callout card */
.lmc-card {
  background: #0E3554; color: #eaf3fb; border-radius: 16px;
  padding: 18px; border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 10px 24px rgba(2,6,23,.12);
}
.lmc-card .lmc-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  color: #cfe7fb; font-weight: 600; font-size: .95rem;
}
.lmc-card .lmc-head img { height: 24px; width: auto; display: block; }
.lmc-card p { color: #d7e7f6; }
.lmc-card .lmc-points { list-style: none; padding: 0; margin: 12px 0 14px; display: grid; gap: 8px; }
.lmc-card .lmc-points li { position: relative; padding-left: 18px; }
.lmc-card .lmc-points li::before {
  content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 999px; background: #2AB0FF;
}
.lmc-card .btn.ghost { border-color: rgba(255,255,255,.35); color: #fff; }
.lmc-card .btn.ghost:hover { background: rgba(255,255,255,.12); }

/* Section alt background */
.section.alt { background: #F5F8FC; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* Timeline */
.timeline {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: grid; gap: 16px;
}
.timeline li {
  display: grid; grid-template-columns: 90px 1fr; gap: 16px;
  align-items: start; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px;
  box-shadow: var(--shadow-1);
}
.timeline .t-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 40px; border-radius: 10px;
  background: rgba(14,53,84,.08); color: var(--primary-700); font-weight: 700;
}
.timeline .t-body h3 { margin: 2px 0 6px; color: var(--primary-700); font-size: 1.05rem; }
.timeline .t-body p  { margin: 0; color: var(--muted); }
@media (max-width: 640px) { .timeline li { grid-template-columns: 1fr; } .timeline .t-badge { width: 64px; } }

/* Clients list (simple, compact) */
.client-list { list-style: none; padding: 0; margin: 18px 0 8px; display: grid; gap: 8px; }
.client-list li { color: var(--muted); }
.client-list strong { color: var(--primary-700); }

/* Utility */
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }

/* Clients grid */
.clients-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:22px;
  margin-top: 22px;
}
@media (max-width:1024px){ .clients-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:640px){  .clients-grid{ grid-template-columns: 1fr; } }

/* Card */
.client-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  box-shadow: var(--shadow-1);
  display:grid;
  grid-template-rows: 160px auto; /* image height + body */
  transition: transform .18s ease, box-shadow .18s ease;
}
.client-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-2); }

/* Image area */
.client-card .cc-media{
  background:#f4f7fb;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.client-card .cc-media img{
  width:100%; height:100%;
  object-fit: cover;               /* swap to 'contain' if you upload true logos */
}

/* Body */
.client-card .cc-body{
  padding:16px;
}
.client-card .cc-body h3{
  margin:0 0 6px;
  font-size:1.02rem;
  color: var(--primary-700);
}
.client-card .cc-body p{
  margin:0;
  color: var(--muted);
}

/* ======= Global CTA (full width) ======= */
.site-cta{
  position: relative;
  isolation: isolate;
  padding: 56px 0;
  text-align: center;
  color: #fff;
  /* brandy gradient + subtle accents to match the hero aesthetic */
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(42,176,255,.22), transparent 60%),
    radial-gradient(700px 360px at 10% 120%, rgba(14,53,84,.30), transparent 55%),
    linear-gradient(180deg, #0E3554 0%, #0A273E 100%);
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.site-cta h2{
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 1.6rem + 1vw, 2.2rem);
  letter-spacing: -.01em;
}

.site-cta .lead{
  margin: 0 auto 18px;
  max-width: 820px;
  color: rgba(255,255,255,.92);
}

.site-cta .btn.primary{
  background: #2ab0ff;
  box-shadow: 0 8px 20px rgba(42,176,255,.28);
}
.site-cta .btn.primary:hover{
  background: #189fe9;
  color: #fff; /* keep text white on hover */
  box-shadow: 0 12px 28px rgba(42,176,255,.38);
}

@media (max-width:640px){
  .site-cta{ padding: 44px 0; }
}

/* --- Fix client logos on mobile without affecting desktop --- */
@media (max-width: 640px){
  /* shorter media row on phones */
  .client-card{ grid-template-rows: 100px auto; }

  /* give logos breathing room and keep them intact */
  .client-card .cc-media{
    background: #fff;
    padding: 10px;
  }
  .client-card .cc-media img{
    object-fit: contain;        /* prevent cropping */
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;             /* avoid inline-img baseline gaps on iOS */
  }
}

/* --- Clients: force logos to display correctly on mobile --- */
@media (max-width: 640px){
  /* keep the card layout, but give the logo row a bit more room */
  .client-card { grid-template-rows: 120px auto; }

  /* give logos padding + a light backdrop for white-on-white marks */
  .client-card .cc-media {
    background: #f6f8fb;
    padding: 12px;
  }

  /* critical: override earlier 'cover' and sizing */
  .client-card .cc-media img {
    object-fit: contain !important;  /* ensure it wins over prior rule */
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;                  /* center the logo */
  }
}

/* --- Clients: reliable mobile logo rendering (final override) --- */
@media (max-width: 640px){
  /* Give the logo row enough space on phones */
  .client-card{
    grid-template-rows: 140px auto !important;
  }

  /* Use flex so the image can size naturally and stay centered */
  .client-card .cc-media{
    background: #fff;
    padding: 12px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;            /* keeps things tidy if a logo is odd-sized */
  }

  /* Logos: never crop; scale down to fit the box */
  .client-card .cc-media img{
    object-fit: contain !important;  /* defeat any earlier 'cover' */
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block;
    margin: 0 auto;
    image-rendering: -webkit-optimize-contrast;
  }
}

/* --- Clients: enlarge logos on small screens --- */

/* Tablet tweak: a little bigger without breaking layout */
@media (max-width: 1024px) and (min-width: 641px){
  .client-card { grid-template-rows: 170px auto; }     /* was 160px */
  .client-card .cc-media { padding: 12px; }
  .client-card .cc-media img{
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
  }
}

/* Phone: increase logo bay and let images grow more */
@media (max-width: 640px){
  .client-card{ grid-template-rows: 180px auto !important; }  /* was 140px */
  .client-card .cc-media{
    padding: 8px;                    /* less padding = more logo area */
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #fff;
  }
  .client-card .cc-media img{
    object-fit: contain !important;
    width: auto !important;
    height: auto !important;
    max-width: 95% !important;       /* allow logo to fill the bay */
    max-height: 95% !important;
    display: block;
  }
}

/* Hero Layout */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.hero-visual img {
  max-width: 100%;
  height: auto;
}

/* Features Grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.feature-card {
  background: #f8f9fb;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: box-shadow 0.2s ease;
}

.feature-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Use Case Cards */
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.usecase-card {
  background: #ffffff;
  border: 1px solid #e0e6ed;
  border-radius: 6px;
  padding: 1.25rem;
  transition: border-color 0.2s ease;
}

.usecase-card:hover {
  border-color: #2ab0ff;
}

/* LMC Card improvements (optional) */
.lmc-card {
  margin-top: 3rem;
  padding: 2rem;
  border-radius: 12px;
  background: #052c50;
  color: #ffffff;
}

.lmc-card .btn {
  margin-top: 1rem;
}

/* Grid Styles */
.feature-grid, .usecase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.feature-card, .usecase-card {
  background: #f8f9fb;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: all 0.2s ease;
}

.feature-card:hover, .usecase-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.cta-section {
  background: #f2f4f5;
  padding: 3rem 0;
}

.cta-section .btn {
  margin: 0.5rem;
}

/* USE CASES GRID */
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

/* INDIVIDUAL CARD */
.usecase-card {
  background: #f8f9fb;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}

.usecase-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.usecase-card h3 {
  margin-top: 1rem;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  color: #005596;
}

.usecase-card p {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #333;
}

/* CARD ICON */
.usecase-card .card-icon {
  width: 40px;
  height: 40px;
  color: #008fc8;
}

.usecase-card .card-icon svg {
  width: 100%;
  height: 100%;
}

/* RESPONSIVE TWEAK */
@media (max-width: 768px) {
  .usecase-grid {
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
  }
}

/* Reduce spacing above Use Cases specifically */
#use-cases.section {
  margin-top: 1.5rem;
}

.service-grid {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.lmc-card {
  margin-bottom: 1.5rem;  /* reduce space under card */
  padding-bottom: 1.5rem; /* only if needed */
}

/* Reduce extra space below the LMC card */
.service-grid {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.lmc-card {
  margin-bottom: 0rem !important;
  padding-bottom: 2rem !important;
}

#use-cases {
  padding-top: 2rem !important;  /* default may be 4rem or more */
}

/* Anchor Navigation Bar (Not Sticky) */
.sticky-nav {
  background: #f8f9fb;
  padding: 1.5rem 0;
  border-bottom: 1px solid #e5e5e5;
  border-top: 1px solid #e5e5e5;
}

.sticky-nav ul {
  display: flex;
  flex-wrap: wrap;
justify-content: flex-start;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sticky-nav ul li a {
  text-decoration: none;
  color: #005596;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.sticky-nav ul li a:hover {
  background: #eaf4ff;
  text-decoration: none;
  color: #004d99;
}

/* Optional: add slight underline for current section (if JS applied later) */
.sticky-nav ul li a.active {
  border-bottom: 2px solid #2ab0ff;
  font-weight: 600;
}

/* Trusted By Logos */
.client-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.client-logos img {
  max-height: 50px;
  width: auto;
  opacity: 0.85;
}

/* Audience Cards */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.audience-card {
  background: #f8f9fb;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  text-align: center;
}
.audience-card .card-icon {
  height: 40px;
  margin-bottom: 1rem;
  color: #008fc8;
}
.audience-card .card-icon svg {
  width: 40px;
  height: 40px;
}

/* Real Results */
.results-metrics {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.metric {
  background: #f2f4f5;
  padding: 1.5rem;
  border-radius: 8px;
  min-width: 180px;
  text-align: center;
}
.metric strong {
  display: block;
  font-size: 1.4rem;
  color: #005596;
}
.metric span {
  font-size: 0.95rem;
  color: #333;
}

.client-name-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem 2rem;
  margin-top: 1.5rem;
  justify-items: start;
}

.client-name-grid span {
  display: block;
  font-size: 1.05rem;
  font-weight: 500;
  color: #1a1a1a;
  background: #f2f4f5;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: background 0.2s ease;
}

.client-name-grid span:hover {
  background: #eaf4ff;
  color: #005596;
}

/* ====== Media Slider (Full-Width Cards, Auto-Scroll, Dots) ====== */

.media-slider-wrapper {
  position: relative;
  overflow: hidden;
}

.media-slider {
  display: flex;
  width: 100%;
  transition: transform 0.5s ease;
  will-change: transform;
}

/* Individual Slide */
.media-card {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border-radius: 12px;
  padding: 2rem;
  min-height: 180px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease;
}

.media-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.media-card .card-left h3 {
  font-size: 2rem;
  color: #005596;
  margin: 0;
}

.media-card .card-right img {
  max-height: 50px;
  max-width: 160px;
  object-fit: contain;
}

/* Responsive: stack content vertically on mobile */
@media (max-width: 768px) {
  .media-card {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .media-card .card-right img {
    max-height: 40px;
    max-width: 120px;
  }
}

/* Dot navigation below the slider */
.slider-dots {
  text-align: center;
  margin-top: 1rem;
}

.slider-dots .dot {
  display: inline-block;
  height: 10px;
  width: 10px;
  margin: 0 6px;
  background-color: #ccc;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.slider-dots .dot.active {
  background-color: #005596;
}

.results-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 2rem;
  column-gap: 1.5rem; /* adds space BETWEEN cards only */
}

.results-metrics .metric {
  width: calc(25% - 1.125rem); /* 1.5rem gap / 4 cards = 1.125rem loss per card */
  padding: 1.5rem;
  text-align: center;
  background: #f8f9fb;
  border-radius: 8px;
  box-sizing: border-box;
}

@media (max-width: 992px) {
  .results-metrics .metric {
    width: calc(50% - 0.75rem); /* 1.5rem gap / 2 cards */
  }
}
@media (max-width: 600px) {
  .results-metrics .metric {
    width: 100%; /* full width on mobile */
  }
}

/* PRICING GRID */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.price-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #e5e5e5;
  position: relative;
}

.price-card .badge {
  position: absolute;
  top: -12px;
  left: 20px;
  background: #005596;
  color: #fff;
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 6px;
}

.price-card.highlighted {
  border: 2px solid #005596;
  background: #eaf4ff;
}

.price-header h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: #111;
}

.price {
  font-size: 2rem;
  font-weight: bold;
  color: #005596;
  margin: 0.5rem 0;
}

.price .per {
  font-size: 0.95rem;
  font-weight: normal;
  color: #555;
}

.total {
  font-size: 0.9rem;
  color: #777;
}

.price-body ul {
  list-style: none;
  padding-left: 0;
  margin: 1rem 0;
  font-size: 0.95rem;
  color: #333;
}

.price-body ul li {
  margin-bottom: 0.5rem;
}

.btn.primary {
  display: inline-block;
  background: #005596;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  padding: 10px 16px;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.btn.primary:hover {
  background: #003e80;
}

.disclaimer {
  font-size: 0.95rem;
  color: #555;
  max-width: 720px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .price {
    font-size: 1.5rem;
  }

  .price-card .badge {
    top: -10px;
    left: 10px;
  }
}

.retail-disclaimer p {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 100%;
  text-align: center;
}

#video-pricing {
  padding-top: 2rem; /* reduced spacing after hero */
}

.fractional-cvo-card {
  background-color: #f9fafc;
  padding: 3rem 0;
  margin-top: 2rem;
}

.cvo-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  gap: 2rem;
}

.cvo-card-left {
  flex: 1;
  min-width: 250px;
}

.cvo-card-left h2 {
  font-size: 1.75rem;
  color: #005596;
  margin-bottom: 1rem;
}

.cvo-card-left p {
  font-size: 1rem;
  color: #333;
  margin-bottom: 1rem;
}

.cvo-card-right {
  flex-shrink: 0;
}

.cvo-card-right img {
  max-width: 240px;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .cvo-card {
    flex-direction: column;
    text-align: center;
  }

  .cvo-card-right img {
    max-width: 100%;
    margin-top: 1.5rem;
  }
}

.services-table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  margin-top: 2rem;
}

.table-row {
  display: table-row;
}

.table-row.header {
  background: #005596;
  color: #fff;
  font-weight: 600;
}

.cell {
  display: table-cell;
  padding: 1rem;
  border: 1px solid #e0e0e0;
  vertical-align: top;
}

.table-row.header .cell {
  border-color: #004b8c;
}

@media (max-width: 768px) {
  .services-table {
    display: block;
  }

  .table-row {
    display: block;
    margin-bottom: 1rem;
  }

  .cell {
    display: block;
    padding: 0.75rem 1rem;
    border: none;
    border-bottom: 1px solid #ddd;
  }

  .table-row.header {
    display: none;
  }
}

.contact-section .contact-card {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
  background: #ffffff;
  padding: 2.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.contact-form {
  flex: 1 1 60%;
}

.contact-sidebar {
  flex: 1 1 35%;
  background: #f8f9fb;
  padding: 1.5rem;
  border-radius: 10px;
  font-size: 0.95rem;
  color: #333;
}

.contact-sidebar h3 {
  margin-top: 0;
  color: #005596;
  font-size: 1.25rem;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group.full {
  grid-column: span 2;
}

.form-group label {
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea {
  padding: 0.75rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: #005596;
  outline: none;
}

.form-footer {
  margin-top: 2rem;
  text-align: right;
}

.btn.primary {
  background-color: #005596;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

.btn.primary:hover {
  background-color: #003e73;
}

/* Mobile */
@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .contact-section .contact-card {
    flex-direction: column;
    padding: 1.5rem;
  }

  .contact-sidebar {
    order: -1;
  }
}

form select,
.form-select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 20 55 L 70 105 L 120 55' stroke='%23555' stroke-width='20' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
}

form select:focus,
.form-select:focus {
  outline: none;
  border-color: #005596;
  box-shadow: 0 0 0 3px rgba(0, 85, 150, 0.15);
}

/* Style the dropdown to match text inputs */
.contact-form select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  font-size: 1rem;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23555' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1em;
}

.contact-form select:focus {
  outline: none;
  border-color: #005596;
  box-shadow: 0 0 0 2px rgba(0, 85, 150, 0.15);
}

.contact-form select {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-family: inherit;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23555' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1em;
}

.contact-form select:focus {
  border-color: #005596;
  box-shadow: 0 0 0 2px rgba(0, 85, 150, 0.15);
  outline: none;
}

.login-card {
  max-width: 480px;
  margin: 0 auto;
  background: #fff;
  padding: 2rem 2rem 2.5rem;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}

.login-card .form-title {
  text-align: center;
  font-size: 1.75rem;
  color: #005596;
  margin-bottom: 1.5rem;
}

.login-card .form-group {
  margin-bottom: 1rem;
}

.login-card label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
}

.login-card input[type="email"],
.login-card input[type="password"] {
  width: 100%;
  padding: 0.75rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 1rem;
}

.login-card .form-footer {
  text-align: center;
  margin-top: 1.5rem;
}

.login-card .text-small {
  text-align: center;
  font-size: 0.9rem;
  color: #555;
}

.tool-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 3rem;
}

.tool-card {
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tool-card h3 {
  font-size: 1.5rem;
  color: #005596;
  margin-bottom: 0.5rem;
}

.tool-card p {
  font-size: 1rem;
  color: #444;
  margin-bottom: 1.25rem;
}

.tool-card .btn {
  margin-top: auto;
}

.privacy-content h2 {
  font-size: 1.4rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: #222;
}

.terms-content h2 {
  font-size: 1.375rem; /* About 22px */
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
  color: #222;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.video-card {
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  text-align: center;
}

.video-card video {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.video-card h3 {
  font-size: 1.1rem;
  color: #005596;
  margin-bottom: 0.3rem;
}

.video-card p {
  font-size: 0.9rem;
  color: #555;
}

/* ===== Page hero variants ===== */

/* Light default (you already have) */
.page-hero {
  padding: 56px 0 42px;
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(42,176,255,.14), transparent 60%),
    linear-gradient(180deg, #F8FBFF 0%, #F2F6FB 100%);
  border-bottom: 1px solid var(--border);
}
.page-hero h1 { margin: 0 0 10px; color: var(--primary-700); }
.page-hero .lead { max-width: 820px; color: var(--muted); }

/* DARK image hero variant — matches homepage hero aesthetics
   Usage: add class "page-hero--image" to the section.
   Optional: override the image per-page using --page-hero-img inline style. */
.page-hero--image {
  position: relative;
  isolation: isolate;
  padding: 64px 0 50px;
  background:
    linear-gradient(90deg, rgba(14,53,84,.80) 0%, rgba(14,53,84,.65) 45%, rgba(14,53,84,.40) 100%),
    var(--page-hero-img, url("https://videobolt.com/img/hero-image.png")) center/cover no-repeat;
  border-bottom: 1px solid var(--border);
}

/* Typography for dark hero */
.page-hero--image h1 {
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.page-hero--image .lead {
  max-width: 820px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 3px rgba(0,0,0,.16);
}

/* Optional: slim divider below dark hero (like homepage vibe) */
.page-hero--image::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: rgba(255,255,255,.08);
}

/* Mobile spacing */
@media (max-width: 640px){
  .page-hero--image { padding: 48px 0 36px; }
}

/* Dark image hero variant — ensure this is AFTER the .page-hero rule */
.page-hero.page-hero--image {
  position: relative;
  isolation: isolate;
  padding: 64px 0 50px;
  background:
    linear-gradient(90deg, rgba(14,53,84,.80) 0%, rgba(14,53,84,.65) 45%, rgba(14,53,84,.40) 100%),
    var(--page-hero-img, url("/img/hero-image.png")) center/cover no-repeat !important;
  border-bottom: 1px solid var(--border);
}

.page-hero.page-hero--image h1 {
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.page-hero.page-hero--image .lead {
  max-width: 820px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 3px rgba(0,0,0,.16);
}