:root{
--k-navy:#000E4C;
--k-crimson:#E73451;
--k-royal:#0737E9;
--k-lilac:#8B239A;
--k-cloud:#EEEFF3;
--k-mist:#CCCFDA;
--k-text:#0F172A;
--k-lavender: #8E78C4;
}

/* Smooth behavior fallback for manual scrolls */
html { scroll-behavior: smooth; }

/* Reveal-on-scroll animation */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal.in-view {
  opacity: 1;
  transform: none;
}
/* Optional: stagger by data attribute in ms */
.reveal[data-reveal-delay] {
  transition-delay: calc(var(--reveal-delay, 0ms));
}

/* Scroll-spy active state on top nav */
nav a.active { color: var(--k-royal); opacity: 1; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}
/* Floating back-to-top button */
.to-top{
  position: fixed;
  right: auto;                 /* was: right: 20px */
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));  /* iOS safe area */
  transform: translate(-50%, 8px);
  z-index: 100;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: transparent;                 /* transparent by default */
  border: 1px solid var(--k-mist);         /* subtle ring so it’s visible */
  border-radius: 50%;
  color: var(--k-royal);
  box-shadow: 0 8px 18px rgba(0,14,76,.12);
  cursor: pointer;

  opacity: 0;                               /* hidden by default */
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, background .2s ease, border-color .2s ease;
}

.to-top:hover{
  background: rgba(255,255,255,.6);         /* slight glass on hover for contrast */
  border-color: rgba(0,0,0,.08);
  -webkit-backdrop-filter: saturate(1.2) blur(4px);
          backdrop-filter: saturate(1.2) blur(4px);
}

.to-top.show{
  opacity: 1;
  transform: translate(-50%, 0);
}

.to-top .bi{
  font-size: 20px;
  line-height: 1;
}

/* Smaller on phones */
@media (max-width:640px){
  .to-top{ right: 14px; bottom: 14px; width: 40px; height: 40px; }
}

/* Respect your global animation kill switch (if used) */
html.no-anim .to-top{ transition: none !important; }

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--k-text);background:linear-gradient(180deg,var(--k-cloud),#fff)
}
.icon-small {
  font-size: 16px;
}

.icon-medium {
  font-size: 24px;
}

.icon-large {
  font-size: 48px;
}

.me-2{
  margin-right: 6px;
}

.icon-xlarge {
  font-size: 64px;
}
.text-k-navy   { color: var(--k-navy) !important; }
.text-k-royal  { color: var(--k-royal) !important; }
.text-k-crimson{ color: var(--k-crimson) !important; }
.text-k-lilac{ color: var(--k-lilac) !important; }
.text-k-lavender{ color: var(--k-lavender) !important; }
a{
  color:inherit;
  text-decoration:none
}
.container{width:100%;
  margin:0 auto;
  padding:0 5%
}
.eyebrow.pill{
  background: linear-gradient(135deg, var(--k-royal), var(--k-lilac));
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .06em;
}

.pill.inv{
  background: rgba(255,255,255,.16);
  color:#fff; border:1px solid rgba(255,255,255,.25);
  padding:6px 10px; border-radius:999px;
  font-weight:800; letter-spacing:.06em;
}

header{position:sticky;top:0;z-index:40;background:#fff;backdrop-filter:saturate(1.2) blur(8px)}
header .bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 60px;          /* was 16px 100px — reduced so nav has more space */
  border-bottom: 1px solid var(--k-mist);
  background: #fff;    
      }
.brand{display:flex;gap:10px;align-items:center}
/*background-image: url("/media/mainlogo.png")*/
.logo{
  background-image: url('../media/mainlogo.png');

  background-size:cover;
  width:60px;
  height:60px;
  border-radius:12px;
  /*background:conic-gradient(from 210deg,var(--k-royal),var(--k-crimson),var(--k-royal));*/

  
}
.brand h1{font-size:1.15rem;font-weight:800;letter-spacing:.2px;color:var(--k-navy)}
/* Dropdown base */
.dropdown{ position:relative; display:inline-block; }

/* Create a small invisible bridge to prevent hover gap flicker */
.dropdown::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:10px;
}

/* Menu panel */
.dropdown-menu{
  display:none; position:absolute; top:50%; left:0;
  background:#fff; border:1px solid var(--k-mist); border-radius:8px;
  min-width:220px; padding:8px 0; box-shadow:0 8px 16px rgba(0,0,0,.1); z-index:60;
}
.dropdown-menu li{ list-style:none; }
.dropdown-menu a{
  display:block; padding:10px 16px; font-weight:500; color:var(--k-text); white-space:nowrap;
}
.dropdown-menu a:hover{ background:var(--k-cloud); }

/* Show on hover, focus, or programmatic open */
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu,
.dropdown.open .dropdown-menu{ display:block; }
nav{
    display: flex;
  align-items: center;
  gap: 28px;                   /* was 22px — more gap between links */
  flex-wrap: nowrap;     
  }
nav a{
  font-weight: 600;
  color: #0b1220;
  opacity: .85;
  white-space: nowrap;  
}
nav a:hover{opacity:1}
.cta{display:inline-flex;align-items:center;gap:10px;font-weight:700;padding:10px 14px;border-radius:12px;background:linear-gradient(135deg,var(--k-royal),var(--k-crimson));color:#fff;box-shadow:0 8px 18px rgba(7,55,233,.24)}
.ghost{padding:10px 14px;border-radius:12px;border:1px solid var(--k-mist);font-weight:600}
.menu-toggle{display:none;cursor:pointer;font-size:1.5rem;font-weight:700;color:var(--k-navy)}
/* Base mobile container */
.mobile-nav[hidden]{ display:none !important; }
.mobile-nav{
  display:flex; flex-direction:column; gap:6px; padding:12px 0;
}

/* Mobile brand row */
.mobile-brand{ display:flex; align-items:center; gap:10px; padding:8px 0 12px 0; }
.mobile-brand img{ height:28px; width:auto; }

/* Links */
.mobile-nav > a,
.mobile-nav .dropdown-toggle{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 20px; border-bottom:1px solid var(--k-mist);
}

/* Dropdown in mobile: stacked, not absolute */
.mobile-nav .dropdown{ width:100%; }
.mobile-nav .dropdown-menu{
  position:static; display:none; border:none; box-shadow:none;
  padding:4px 0 8px 0; background:transparent;
}
.mobile-nav .dropdown.open .dropdown-menu{ display:block; }
.mobile-nav .dropdown-menu a{ padding:10px 32px; }
.hero{position:relative;padding:88px 0 56px;background:radial-gradient(1200px 600px at 85% -10%, rgba(7,55,233,.12), transparent 60%),radial-gradient(800px 400px at 0% 0%, rgba(231,52,81,.08), transparent 60%)}
.hero .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;color:var(--k-navy);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--k-royal),var(--k-crimson))}
.hero h2{font-size:clamp(2rem,4vw,3rem);line-height:1.1;margin:14px 0 10px;color:var(--k-navy)}
.hero p{font-size:1.1rem;opacity:.9}
.hero-cta{display:flex;gap:12px;margin-top:18px}
.hero-card{
      background:#fff;
        border:1px solid var(--k-mist);
        padding:22px;
        border-radius:16px;
        box-shadow:0 18px 40px rgba(0,14,76,.06);
        text-align:center;
    }
    .hero-slider {
  position:relative;
  width:100%;
  height:260px;
  border-radius:12px;
  overflow:hidden;
}
.hero-cta { display:flex; gap:12px; flex-wrap:wrap }
.hero-tab { user-select:none }
.hero-tab.is-active { 
  background: linear-gradient(135deg,var(--k-royal),var(--k-crimson)); 
  color:#fff; 
  border: none; 
}

.hero-slider img {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1s ease-in-out;
  object-position: top center;
}

.hero-slider img.active {
  opacity:1;
}
.hero-chart{
    height:260px;border-radius:12px;
    background:conic-gradient(from 270deg, var(--k-royal), var(--k-crimson) 55%, var(--k-lilac));
    display:grid;place-items:center;
    color:#fff;
    font-weight:800;letter-spacing:.08em
  }
.stats{
  padding:24px 0 8px
}
.stats .tiles {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}
.stat{
  background:#fff;
  flex: 1 1 200px;
  max-width: 300px;
  background: #fff;
  border: 1px solid var(--k-mist);
  border-radius: 14px;
  padding: 18px 16px;
  text-align: center;
}
.stat h3{
  font-size:1.8rem;
  margin:0;
  color:var(--k-royal)
}
.stat p{margin:6px 0 0;font-weight:600;opacity:.75}
.section{padding:64px 0}
.section h3{font-size:clamp(1.4rem,2.4vw,1.8rem);color:var(--k-navy);margin:0 0 8px}
.sub{opacity:.85;margin:0 0 24px}
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feat{background:#fff;border:1px solid var(--k-mist);border-radius:16px;padding:18px;display:flex;gap:14px}

.badge{
  --icon-size: 22px;                 /* default */
  display:inline-grid; 
  place-items:center;
  width:64px; height:64px; border-radius:12px;
  background:#fff; border:1px solid var(--k-mist);
  box-shadow:0 10px 20px rgba(0,14,76,.12); line-height:0;
}
.badge .bi{ font-size: var(--icon-size); line-height:1; }

.badge.icon-large{ --icon-size: 48px; }
.badge.icon-xlarge{ --icon-size: 56px; padding: 2px;}

.feat h4{margin:4px 0 6px;font-size:1.05rem}
.feat p{margin:0;opacity:.8}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--k-mist);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform 0.3s ease}
.card:hover{animation:bounce 0.6s}
@keyframes bounce{
0%,20%,50%,80%,100%{transform:translateY(0)}
/*40%{transform:translateY(-12px)}*/
60%{transform:translateY(-6px)}
}
.card .media{
    height:160px;
    background:linear-gradient(135deg,var(--k-royal),var(--k-crimson));
    opacity:.9
  }
.card .body{padding:16px}
.card h5{margin:0 0 6px;font-size:1.05rem}
.card a{margin-top:auto;display:inline-block;font-weight:700;color:var(--k-royal)}
.cta-band{margin:40px 0;background:linear-gradient(135deg,var(--k-royal),var(--k-crimson));border-radius:20px;padding:28px;color:#fff;display:flex;justify-content:space-between;gap:18px;align-items:center}
.cta-band h4{margin:0;font-size:1.25rem}
.cta-band .btn{background:#fff;color:var(--k-navy);padding:12px 16px;border-radius:12px;font-weight:800}
/* ===========================
   PATIENTS SECTION (scoped)
   =========================== */
#patients .lead { max-width: 72ch; }
#patients .sub  { opacity:.85; margin:0 0 24px; }

/* Experience tiles */
#patients .exp-tiles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
#patients .tile{
  background:#fff;
  border:1px solid var(--k-mist);
  border-radius:16px;
  padding:18px;
  display:flex;
  gap:14px;
  align-items:flex-start;
}
#patients .tile h3{ margin:4px 0 6px; font-size:1.05rem; }
#patients .tile p{ margin:0; opacity:.82; }

/* Icon badges (use images) */
.badge-img{
  min-width:44px; height:44px; border-radius:12px;
  background:#fff center/70% no-repeat;
  border:1px solid var(--k-mist);
  box-shadow:0 10px 20px rgba(0,14,76,.12);
}
.badge-price   { background-image:url('media/icon-price.png'); }
.badge-ins     { background-image:url('media/icon-insurance.png'); }
.badge-savings { background-image:url('media/icon-savings.png'); }

/* Steps */
#patients .steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
#patients .step{
  background:#fff;
  border:1px solid var(--k-mist);
  border-radius:16px;
  padding:18px;
}
#patients .num{
  display:inline-grid; place-items:center;
  width:36px; height:36px; border-radius:10px;
  background:var(--k-navy); color:#fff; font-weight:800;
  margin-bottom:10px;
}

/* Real-time visibility band */
#patients .band{
  margin:24px 0;
  background:linear-gradient(135deg,var(--k-royal),var(--k-crimson));
  border-radius:18px; color:#fff; padding:22px;
  display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center;
}

/* Help / Contact cards */
#patients .help{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
#patients .card{
  background:#fff; border:1px solid var(--k-mist);
  border-radius:16px; padding:18px;
}
/* Patients ecosystem image */
#patients .ecosystem-figure{
  margin: 28px auto 8px;
  max-width: 1100px;          /* keeps it from getting too wide on desktop */
}
#patients .ecosystem-figure img{
  display:block;
  width:min(75%, 1100px); margin:0 auto;
  height:auto;
  border-radius:16px;
  border:1px solid var(--k-mist);
  box-shadow:0 10px 24px rgba(0,14,76,.06);
}

/* Optional caption style */
#patients .ecosystem-figure figcaption{
  margin-top:10px;
  font-size:.95rem;
  opacity:.75;
  text-align:center;
}
#patients .ecosystem-wrap{
  display:grid;
  grid-template-columns: minmax(0,1.35fr) minmax(0,1fr);
  gap: 32px;
  align-items: center;
  margin: 24px 0;
}
#patients .ecosystem-panel{
  background:#fff;
  border:1px solid var(--k-mist);
  border-radius:16px;
  padding:18px;
  box-shadow:0 6px 16px rgba(0,14,76,.04);
}
#patients .ecosystem-panel h4{
  margin:0 0 10px;
  color:var(--k-navy);
}

/* Checklist bullets */
#patients .checklist{ margin:0; padding:0; list-style:none; }
#patients .checklist li{
  position:relative;
  padding-left:26px;
  margin:10px 0;
}
#patients .checklist li::before{
  content:"✓";
  position:absolute; left:0; top:0;
  color:var(--k-royal); font-weight:800;
}

/* Responsive: stack on small screens */
@media (max-width: 980px){
  #patients .ecosystem-wrap{ grid-template-columns: 1fr; }
}

/* Make the image fill its column (overrides earlier 75% rule) */
#patients .ecosystem-wrap .ecosystem-figure{ margin:0; }


/* Mobile spacing tweak */
@media (max-width:640px){
  #patients .ecosystem-figure{ margin: 20px auto 0; }
}

/* Responsive */
@media (max-width:980px){
  #patients .exp-tiles{ grid-template-columns:1fr 1fr; }
  #patients .steps{ grid-template-columns:1fr; }
  #patients .help{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  #patients .exp-tiles{ grid-template-columns:1fr; }
  #patients .band{ grid-template-columns:1fr; }
}
/* Use the existing .ecosystem-panel box; just style the cards inside it */
#patients .how-panel h4{ margin:0 0 10px; color:var(--k-navy); }

#patients .how-cards{
  display:grid;
  grid-template-columns:1fr;   /* stack in the side panel */
  gap:12px;
}

#patients .how-card{
  position:relative;
  background:#fff;
  border:1px solid var(--k-mist);
  border-radius:14px;
  /* Card Effect
  padding:16px 14px 14px;
  box-shadow:0 6px 16px rgba(0,14,76,.06);
  */
}

/* gradient accent strip */
#patients .how-card::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:5px;
  border-radius:14px 14px 0 0;
  background:linear-gradient(135deg,var(--k-royal),var(--k-crimson));
}

/* number badge */
#patients .how-badge{
  position:absolute; top:-14px; left:12px;
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff; color:var(--k-royal); font-weight:800; font-size:.95rem;
  border:2px solid var(--k-royal);
  box-shadow:0 6px 14px rgba(7,55,233,.18);
}

#patients .how-card h5{ margin:10px 0 6px; font-size:1rem; color:var(--k-navy); }
#patients .how-card p{ margin:0; opacity:.85; }

/* ===== PHARMA (scoped) ===== */
#pharma .pharma-intro{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);
  gap:32px; align-items:center;
}
#pharma .pharma-copy .lead{ max-width:72ch; }
#pharma .benefits{ margin:14px 0 0; padding:0; list-style:none; }
#pharma .benefits li{ display:flex; gap:10px; align-items:flex-start; margin:8px 0; }
#pharma .benefits i{ font-size:1.1rem; line-height:1.4; }

/* hero image */
#pharma .pharma-hero{ margin:0; }
#pharma .pharma-hero img{
  display:block; width:100%; height:auto; border-radius:16px;
  border:1px solid var(--k-mist); box-shadow:0 10px 24px rgba(0,14,76,.06);
  object-fit:cover; object-position:center;
}

/* pillars */
#pharma .pharma-pillars{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px;
}
#pharma .tile{
  background:#fff; border:1px solid var(--k-mist); border-radius:16px;
  padding:18px; display:flex; gap:14px; align-items:flex-start;
}
#pharma .tile h4{ margin:4px 0 6px; font-size:1.05rem; color:var(--k-navy); }
#pharma .tile p{ margin:0; opacity:.82; }

/* badge images (hook to your real icons) */
.badge-img{
  min-width:44px; height:44px; border-radius:12px;
  background:#fff center/70% no-repeat; border:1px solid var(--k-mist);
  box-shadow:0 10px 20px rgba(0,14,76,.12);
}
.badge-ai{       background-image:url('media/icon-ai.png'); }
.badge-network{  background-image:url('media/icon-network.png'); }
.badge-insights{ background-image:url('media/icon-insights.png'); }

/* KPIs */
#pharma .pharma-kpis{
  margin:24px 0; display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
#pharma .kpi{
  background:#fff; border:1px solid var(--k-mist); border-radius:14px; padding:16px; text-align:center;
}
#pharma .kpi span{ display:block; font-size:1.8rem; font-weight:800; color:var(--k-royal); }
#pharma .kpi small{ display:block; margin-top:4px; font-weight:600; opacity:.75; }

/* responsive */
@media (max-width:980px){
  #pharma .pharma-intro{ grid-template-columns:1fr; }
  #pharma .pharma-pillars{ grid-template-columns:1fr 1fr; }
  #pharma .pharma-kpis{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  #pharma .pharma-pillars{ grid-template-columns:1fr; }
  #pharma .pharma-kpis{ grid-template-columns:1fr; }
}

/* ===== TELEMED — distinct look ===== */
#telemed.section-tele{
  /* soft gradient wash to distinguish from Pharma’s white */
  background:
    radial-gradient(900px 400px at 10% -10%, rgba(7,55,233,.10), transparent 60%),
    radial-gradient(800px 400px at 100% 0%, rgba(139,35,154,.10), transparent 60%);
  padding-top: 72px;
  padding-bottom: 56px;
}

/* Opposite layout: image FIRST, copy SECOND */
#telemed .tele-heroRow{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  gap: 36px;
  align-items: center;
}

/* Hero image gets a device-like card treatment */
#telemed .tele-hero{
  margin: 0;
  position: relative;
}
#telemed .tele-hero img{
  display:block; width:100%; height:auto;
  border-radius:20px;
  border:1px solid var(--k-mist);
  box-shadow: 0 18px 40px rgba(0,14,76,.10);
  object-fit: cover; object-position: center;
}
/* Small floating chip */
#telemed .tele-chip{
  position: absolute;
  bottom: 12px; left: 12px;
  background: #fff;
  border: 1px solid var(--k-mist);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .85rem; font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,14,76,.10);
}

/* Copy */
#telemed .tele-copy .eyebrow.pill{
  background: linear-gradient(135deg, var(--k-royal), var(--k-lilac));
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .06em;
}
#telemed .tele-copy .lead{ max-width: 68ch; }

/* NEW: feature pills row */
#telemed .feature-pills{
  margin: 16px 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 10px;
}
#telemed .feature-pills li{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px;
  background: #fff;
  border: 1px solid var(--k-mist);
  box-shadow: 0 6px 16px rgba(0,14,76,.06);
  font-weight: 600;
}
#telemed .feature-pills i{ font-size: 1.05rem; line-height: 1; }

/* Distinct CTA band (lilac-forward) */
#telemed .tele-cta{
  margin-top: 28px;
  display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center;
  background: linear-gradient(135deg, var(--k-lilac), var(--k-royal));
  color: #fff; border-radius: 18px; padding: 22px;
  box-shadow: 0 14px 30px rgba(0,14,76,.18);
}
#telemed .tele-cta h4{ margin: 0 0 6px; }
#telemed .tele-cta p{ margin: 0; opacity: .9; }

/* Responsive */
@media (max-width: 980px){
  #telemed .tele-heroRow{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  #telemed .feature-pills{ gap: 8px; }
  #telemed .feature-pills li{ padding: 7px 10px; font-size: .95rem; }
  #telemed .tele-cta{ grid-template-columns: 1fr; }
}

/* =========================
   PROVIDERS – DISTINCT LOOK
   ========================= */
#providers.providers-pro{
  padding: 0; /* band handles top spacing */
}

/* Gradient header band (navy → royal) */
#providers .prov-band{
  background: linear-gradient(135deg, var(--k-navy), var(--k-royal));
  color:#fff;
  padding:56px 5%;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);
  gap:32px;
  align-items:center;

  position: relative;   /* <-- needed for ::after */
  overflow: hidden;     /* keep lines inside the band */
}

#providers .prov-band::after{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    -45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 18px
  );
  z-index:0;            /* sit behind content */
  pointer-events:none;
}


/* Remove the extra padding added by .container inside this grid */
.prov-band > .container{ padding: 0; }

/* Right column: image wrapper */
.prov-band__outer{
  display: flex;
  justify-content: flex-end;        /* push image to the right edge */
}

/* Picture / image styling (card treatment that works on dark bands too) */
.prov-band__outer picture{ display:block; width:100%; }
.prov-band__outer img{
  display:block;
  width: 100%;
  max-width: 720px;                 /* cap size so it doesn't overwhelm */
  height: auto;
  max-height: clamp(420px, 38vh, 480px); /* tune these numbers */
  border-radius: 16px;
  background: #fff;                 /* for transparent PNG edges */
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  object-fit: contain;
}
/* Stack nicely on smaller screens */
@media (max-width: 980px){
  .prov-band{
    grid-template-columns: 1fr;     /* stack copy over image */
    gap: 20px;
  }
  .prov-band__outer{
    justify-content: center;
  }
  .prov-band__outer img{
    max-width: 560px;
    max-height: 560px;
  }
}
#providers .prov-band__inner h3{ margin: 10px 0 8px; color:#fff; }
#providers .prov-band__inner .lead{ opacity:.95; }

/* chips */
#providers .prov-chips{
  margin:14px 0 0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:10px;
}
#providers .prov-chips li{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; color:var(--k-navy);
  border-radius:999px; padding:8px 12px; font-weight:700;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
#providers .prov-chips i{ color: var(--k-royal); }

/* content grid */
#providers .prov-grid{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,0.8fr);
  gap:28px; align-items:start; padding: 50px 0 50px;
}

/* accent cards stack */
#providers .prov-stack{ display:grid; gap:20px; }
#providers .accent-card{
  position:relative;
  display:grid; grid-template-columns:56px 1fr; gap:12px; align-items:center;
  background:#fff; border:1px solid var(--k-mist); border-radius:16px;
  padding:16px 16px 16px 12px;
  box-shadow:0 10px 24px rgba(0,14,76,.06);
}
#providers .accent-card__stripe{
  position:absolute; inset:0 auto 0 0; width:6px; border-radius:16px 0 0 16px;
  background: linear-gradient(180deg, var(--k-royal), var(--k-crimson));
}
#providers .accent-card__glyph{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  background: #f6f8ff; /* light tint to feel different */
  border:1px solid var(--k-mist);
}
#providers .accent-card__glyph .bi{ font-size:22px; color:var(--k-royal); }
#providers .accent-card__body h4{ margin:2px 0 6px; color:var(--k-navy); font-size:1.1rem; }
#providers .accent-card__body p{ margin:0; opacity:.85; }

/* right rail */
#providers .prov-rail{ position:relative; }
#providers .prov-sticky{ position: sticky; top: 84px; display:grid; gap:16px; }
#providers .card{
  background:#fff; border:1px solid var(--k-mist); border-radius:16px; padding:18px;
  box-shadow:0 10px 24px rgba(0,14,76,.06);
}
#providers .prov-actions h4{ margin:0 0 10px; color:var(--k-navy); }
#providers .prov-actions hr{ border:0; border-top:1px solid var(--k-mist); margin:14px 0; }
#providers .prov-kpis{
  list-style:none; margin:0; padding:0; display:grid; gap:8px;
}
#providers .prov-kpis li{ display:flex; justify-content:space-between; align-items:baseline; }
#providers .prov-kpis strong{ color:var(--k-royal); font-size:1.2rem; }
#providers .prov-kpis span{ opacity:.75; }

/* compliance tile */
#providers .prov-compliance{ display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; }
#providers .prov-compliance i{ font-size:26px; color:#16a34a; } /* green check accent */
#providers .prov-compliance h5{ margin:0; color:var(--k-navy); }
#providers .prov-compliance p{ margin:0; opacity:.85; }



/* inverse eyebrow pill in band */
#providers .pill.inv{
  background: rgba(255,255,255,.16);
  color:#fff; border:1px solid rgba(255,255,255,.25);
  padding:6px 10px; border-radius:999px;
  font-weight:800; letter-spacing:.06em;
}
#providers .prov-grid{
  box-sizing: border-box;
  padding-inline: clamp(16px, 5vw, 64px);  /* L/R gutters */
}

/* (Optional) also cap its width on very large screens */
@media (min-width: 1280px){
  #providers .prov-grid{
    max-width: 1200px;
    margin-inline: auto;
  }
}

/* responsive */
@media (max-width: 980px){
  #providers .prov-grid{ grid-template-columns:1fr; }
  #providers .prov-sticky{ position:static; }
}
@media (max-width: 640px){
  #providers .prov-chips{ gap:8px; }
  #providers .prov-chips li{ padding:7px 10px; }
}


footer{padding:32px 0;border-top:1px solid var(--k-mist)}
footer .row{
  display:grid;
  grid-template-columns: 1fr auto; /* left column grows, right fits content */
  gap:18px;
  align-items:start;
}
footer p{margin:0;opacity:.7}
.foot-right{ justify-self:end; text-align:right; }
.foot-links{ display:flex; gap:14px; flex-wrap:wrap; }
.foot-links a{ opacity:.85; }
.foot-links a:hover{ opacity:1; text-decoration:underline; }
.foot-right .sep{ opacity:.4; }

.brandmark{
  height: clamp(12px, 4vw, 24px);  /* min 22px, scales with viewport, max 38px */
  padding-right: 20px;
  width: auto;
}

/* In the stacked mobile panel, keep it even smaller */
.mobile-nav .brandmark{
  height: 24px;
}

/* Optional: shrink the square logo on phones so the pair fits nicely */
/* On small screens: keep only the square logo in the header bar */
@media (max-width: 640px){
  header .brand .brandmark { display: none; }      /* hide wordmark in header */
}

/* In the mobile panel: show only the wordmark, hide the square logo */
@media (max-width: 640px){
  .mobile-nav .mobile-brand .logo { display: none; }  /* hide square */
  .mobile-nav .mobile-brand img { height: 24px; width: auto; }
}



@media (max-width: 980px){
.hero .grid{grid-template-columns:1fr}
.stats .tiles{grid-template-columns:repeat(2,1fr)}
.features, .cards{grid-template-columns:1fr 1fr}
.cta-band{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  nav{ display:none; }
  .menu-toggle{ display:block; }
  .mobile-nav{ display:flex; }
}
/* Mobile: dropdown menu in the stacked panel */
@media (max-width:640px){
  .mobile-nav .dropdown{ width:100%; }
  .mobile-nav .dropdown-menu{
    position:static; border:none; box-shadow:none; padding:4px 0 8px 0; display:none;
  }
  .mobile-nav .dropdown.open .dropdown-menu{ display:block; }
  .mobile-nav .dropdown-toggle{ display:flex; justify-content:space-between; width:100%; padding:10px 20px; }
}
@media (max-width:640px){
  footer .row{ grid-template-columns: 1fr; }
  .foot-right{ justify-self:start; text-align:left; }
}