/* ==========================================================================
   Edge RCM — Core Stylesheet
   Luxury healthcare design system
   Author: Edge RCM
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --color-primary: #004aad;
  --color-primary-600: #003d8f;
  --color-primary-700: #0a2450;
  --color-primary-800: #06183a;
  --color-primary-050: #eef4ff;
  --color-primary-100: #dbe7fb;
  --color-primary-200: #b8cef6;

  --color-accent: #ffc918;
  --color-accent-600: #e6b30d;
  --color-accent-050: #fff8e2;
  --color-accent-100: #fff0bf;

  /* Logo red. Used for small highlights only - bullets, dots, rules, borders.
     Buttons stay yellow. #ff3131 is the exact logo colour but fails contrast
     as text on white, so -600 is the text-safe shade. */
  --color-brand-red: #ff3131;
  --color-brand-red-600: #d92020;
  --color-brand-red-700: #b81a1a;
  --color-brand-red-050: #fff1f1;
  --color-brand-red-100: #ffdcdc;

  --color-bg: #ffffff;
  --color-bg-alt: #f7f9fc;
  --color-bg-deep: #eef2f9;

  --color-text: #1f2937;
  --color-muted: #566175;
  --color-soft: #7c8698;
  --color-line: #e4e9f2;
  --color-line-soft: #eef1f7;

  --color-success: #0f9d6f;
  --color-success-bg: #e8f7f1;
  --color-white: #ffffff;

  /* Gradients */
  --grad-primary: linear-gradient(135deg, #004aad 0%, #0a5fd0 55%, #1a7ae8 100%);
  --grad-primary-deep: linear-gradient(150deg, #0a2450 0%, #004aad 48%, #17439f 100%);
  --grad-accent: linear-gradient(135deg, #ffc918 0%, #ffd956 100%);
  --grad-soft: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
  --grad-glass: linear-gradient(140deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .06) 100%);

  /* Typography */
  --font-sans: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Sora", "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  --fs-xs: .78rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.1875rem;
  --fs-xl: 1.375rem;
  --fs-h4: clamp(1.15rem, 1rem + .5vw, 1.375rem);
  --fs-h3: clamp(1.35rem, 1.1rem + .8vw, 1.75rem);
  --fs-h2: clamp(1.8rem, 1.35rem + 1.7vw, 2.85rem);
  --fs-h1: clamp(2.2rem, 1.5rem + 3vw, 4rem);
  --fs-display: clamp(2.6rem, 1.6rem + 4vw, 4.6rem);

  /* Spacing */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 3.5rem;
  --space-9: 4.5rem;
  --space-10: 6rem;

  --section-y: clamp(3.75rem, 2rem + 6vw, 7rem);
  --container: 1200px;
  --container-wide: 1360px;
  --container-pad: clamp(1.15rem, .6rem + 2vw, 2.25rem);

  /* Radii */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 74, 173, .06);
  --shadow-sm: 0 4px 14px rgba(0, 74, 173, .07);
  --shadow: 0 12px 34px rgba(0, 74, 173, .09);
  --shadow-lg: 0 26px 64px rgba(0, 74, 173, .14);
  --shadow-accent: 0 14px 34px rgba(255, 201, 24, .34);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .6);

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .18s;
  --dur: .32s;
  --dur-slow: .6s;

  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.72;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "kern" 1, "liga" 1;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-primary-800);
  margin: 0 0 var(--space-4);
  line-height: 1.16;
  letter-spacing: -.02em;
  font-weight: 700;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: 650; }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--color-primary-600); }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25rem; }
li { margin-bottom: .4rem; }

strong, b { font-weight: 650; color: var(--color-primary-800); }

hr {
  border: 0;
  border-top: 1px solid var(--color-line);
  margin: var(--space-6) 0;
}

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--color-accent);
  color: var(--color-primary-800);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 1200;
  background: var(--color-primary);
  color: #fff;
  padding: .8rem 1.4rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: 880px; }

.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--color-bg-alt); }
.section--deep { background: var(--grad-primary-deep); color: rgba(255, 255, 255, .88); }
.section--deep h2,
.section--deep h3,
.section--deep h4 { color: #fff; }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.section--seam { border-top: 1px solid var(--color-line-soft); }

.grid { display: grid; gap: clamp(1.1rem, .6rem + 1.4vw, 2rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 1rem + 3.4vw, 4.5rem);
  align-items: center;
}
.split--reverse .split__media { order: -1; }

.stack-sm > * + * { margin-top: var(--space-3); }
.stack > * + * { margin-top: var(--space-5); }

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mb-0 { margin-bottom: 0; }
.lead {
  font-size: var(--fs-lg);
  color: var(--color-muted);
  line-height: 1.7;
}
.section--deep .lead { color: rgba(255, 255, 255, .82); }
.muted { color: var(--color-muted); }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. Section headings
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-050);
  border: 1px solid var(--color-primary-100);
  padding: .45rem 1rem;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-brand-red);
  box-shadow: 0 0 0 3px rgba(255, 49, 49, .2);
}
.section--deep .eyebrow {
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .22);
}

.section-head {
  max-width: 760px;
  margin-bottom: clamp(2rem, 1.2rem + 2vw, 3.5rem);
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--color-muted); font-size: var(--fs-lg); }
.section--deep .section-head p { color: rgba(255, 255, 255, .82); }
.section-head h2 { margin-bottom: var(--space-3); }

.title-accent { color: var(--color-primary); }
.title-underline {
  background: linear-gradient(180deg, transparent 62%, rgba(255, 49, 49, .28) 62%);
  padding: 0 .12em;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--color-primary);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.7rem;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 650;
  letter-spacing: .01em;
  line-height: 1.2;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 55%);
  transform: translateX(-110%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.btn:hover::after { transform: translateX(0); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--grad-primary);
  box-shadow: 0 12px 28px rgba(0, 74, 173, .28);
  color: #fff;
}
.btn--primary:hover { box-shadow: 0 18px 40px rgba(0, 74, 173, .34); color: #fff; }

.btn--accent {
  background: var(--grad-accent);
  color: var(--color-primary-800);
  box-shadow: var(--shadow-accent);
  font-weight: 700;
}
.btn--accent:hover { color: var(--color-primary-800); box-shadow: 0 18px 42px rgba(255, 201, 24, .42); }

.btn--ghost {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary-200);
}
.btn--ghost:hover {
  background: var(--color-primary-050);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn--light {
  background: #fff;
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.btn--light:hover { color: var(--color-primary-600); }

.btn--outline-light {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
  backdrop-filter: blur(6px);
}
.btn--outline-light:hover { background: rgba(255, 255, 255, .16); color: #fff; }

.btn--sm { padding: .68rem 1.25rem; font-size: var(--fs-sm); }
.btn--lg { padding: 1.1rem 2.1rem; font-size: var(--fs-md); }
.btn--block { display: flex; width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.btn-row--center { justify-content: center; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 650;
  font-size: var(--fs-sm);
  color: var(--color-primary);
}
.link-arrow svg {
  width: 16px; height: 16px;
  transition: transform var(--dur) var(--ease);
}
.link-arrow:hover svg { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, .92);
    /* backdrop-filter moved to ::before below (fixes mobile menu containing-block bug) */
    border-bottom: 1px solid var(--color-line-soft);
  transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.site-header::before {
      content: "";
        position: absolute;
          inset: 0;
            z-index: -1;
              pointer-events: none;
                backdrop-filter: saturate(160%) blur(14px);
                  -webkit-backdrop-filter: saturate(160%) blur(14px);
}
.site-header.is-stuck {
  box-shadow: 0 10px 30px rgba(0, 74, 173, .08);
  background: rgba(255, 255, 255, .97);
}

.topbar {
  background: var(--grad-primary-deep);
  color: rgba(255, 255, 255, .9);
  font-size: var(--fs-xs);
  letter-spacing: .02em;
}
.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 40px;
  flex-wrap: wrap;
}
.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: rgba(255, 255, 255, .92);
  font-weight: 550;
  white-space: nowrap;
}
.topbar__item:hover { color: var(--color-accent); }
.topbar__item svg { width: 14px; height: 14px; color: var(--color-accent); }
.topbar__spacer { margin-left: auto; }
.topbar__note {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: rgba(255, 255, 255, .74);
}
.topbar__note b { color: var(--color-accent); font-weight: 650; }

.navbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  flex: none;
  color: var(--color-primary-800);
}
.brand__mark {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 13px;
  background: var(--grad-primary);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px rgba(0, 74, 173, .26);
  transition: transform var(--dur) var(--ease);
}
.brand:hover .brand__mark { transform: rotate(-6deg) scale(1.04); }
.brand__mark svg { width: 26px; height: 26px; color: #fff; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: -.02em;
  color: var(--color-primary-800);
}
.brand__tag {
  font-size: .66rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 600;
}

.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: .15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list li { margin: 0; }
.nav__link {
  position: relative;
  display: block;
  padding: .6rem .78rem;
  font-size: .93rem;
  font-weight: 600;
  color: var(--color-text);
  border-radius: var(--radius-xs);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: .78rem;
  right: .78rem;
  bottom: .34rem;
  height: 2px;
  border-radius: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover { color: var(--color-primary); background: var(--color-primary-050); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--color-primary); }

/* Drawer-only elements: revealed by responsive.css below 1080px */
.nav__mobile-cta,
.nav__mobile-contact { display: none; }

.nav__actions {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: none;
}
.icon-btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: #fff;
  color: var(--color-primary);
  transition: all var(--dur) var(--ease);
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.nav__toggle {
  display: none;
  position: relative; z-index: 1002; /* stay above full-screen mobile menu so close (X) icon is visible */
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-line);
  background: #fff;
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.nav__toggle span {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary-800);
  transition: background-color var(--dur-fast) var(--ease);
}
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary-800);
  transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after { top: 6px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 24, 58, .45);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
  z-index: 990;
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 1.6rem + 6vw, 6.5rem) clamp(3.5rem, 2rem + 6vw, 7rem);
  background:
    radial-gradient(1100px 620px at 88% -8%, rgba(255, 201, 24, .16), transparent 60%),
    radial-gradient(900px 540px at 6% 8%, rgba(0, 74, 173, .1), transparent 62%),
    var(--grad-soft);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 74, 173, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 74, 173, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 72%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: clamp(2rem, 1rem + 3.5vw, 4.5rem);
  align-items: center;
}
.hero h1 { margin-bottom: var(--space-5); }
.hero h1 .hero__accent {
  display: block;
  background: linear-gradient(100deg, var(--color-primary) 0%, #1a7ae8 55%, #004aad 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__sub {
  font-size: clamp(1rem, .95rem + .3vw, 1.2rem);
  color: var(--color-muted);
  max-width: 56ch;
  margin-bottom: var(--space-6);
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-xs);
  border-radius: var(--radius-pill);
  padding: .45rem .9rem .45rem .5rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-primary-800);
  margin-bottom: var(--space-5);
}
.hero__badge i {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--grad-accent);
  color: var(--color-primary-800);
  font-style: normal;
}
.hero__badge i svg { width: 15px; height: 15px; }

.hero__points {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem 1.4rem;
}
.hero__points li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.hero__points svg {
  width: 19px; height: 19px;
  flex: none;
  color: var(--color-primary);
}

.hero__media { position: relative; }
.hero__media img,
.hero__media svg { width: 100%; }

.hero__floating {
  position: absolute;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: .85rem 1.05rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.hero__floating i {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--color-primary-050);
  color: var(--color-primary);
  font-style: normal;
  flex: none;
}
.hero__floating i svg { width: 20px; height: 20px; }
.hero__floating b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.1;
  color: var(--color-primary-800);
}
.hero__floating span {
  font-size: var(--fs-xs);
  color: var(--color-muted);
  font-weight: 550;
}
.hero__floating--one { top: 8%; left: -4%; }
.hero__floating--two { bottom: 12%; right: -3%; }
.hero__floating--three { bottom: -3%; left: 6%; }

/* Page hero (interior pages) */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--grad-primary-deep);
  color: rgba(255, 255, 255, .88);
  padding-block: clamp(3rem, 2rem + 4.5vw, 5.75rem);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(760px 420px at 82% 12%, rgba(255, 201, 24, .22), transparent 62%),
    radial-gradient(620px 420px at 8% 88%, rgba(26, 122, 232, .38), transparent 62%);
  pointer-events: none;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(circle at 70% 40%, #000, transparent 74%);
  -webkit-mask-image: radial-gradient(circle at 70% 40%, #000, transparent 74%);
  pointer-events: none;
}
.page-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: center;
}
.page-hero h1 { color: #fff; margin-bottom: var(--space-4); }
.page-hero p { color: rgba(255, 255, 255, .84); font-size: var(--fs-lg); max-width: 60ch; }
.page-hero .btn-row { margin-top: var(--space-6); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .68);
}
.breadcrumb li { margin: 0; display: inline-flex; align-items: center; gap: .5rem; }
.breadcrumb li + li::before { content: "/"; color: rgba(255, 255, 255, .35); }
.breadcrumb a { color: rgba(255, 255, 255, .84); font-weight: 600; }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb [aria-current] { color: var(--color-accent); font-weight: 600; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.hero-stats__item b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  color: #fff;
  line-height: 1.1;
}
/* Direct child only. Without the ">" this also caught the .counter span that
   sits inside the <b>, shrinking the number to label size while the unit
   ("%", "h") kept the large size - so "98.6%" rendered with a tiny 98.6 and a
   huge percent sign. */
.hero-stats__item > span {
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 1rem + 1vw, 2.1rem);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  overflow: hidden;
  height: 100%;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--grad-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary-100);
}
.card:hover::before { transform: scaleX(1); }
.card h3 { font-size: var(--fs-h4); margin-bottom: var(--space-3); }
.card p { color: var(--color-muted); font-size: var(--fs-base); }
.card--alt { background: var(--color-bg-alt); border-color: transparent; }

.card-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 17px;
  background: var(--color-primary-050);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.card-icon svg { width: 28px; height: 28px; }
.card:hover .card-icon {
  background: var(--grad-primary);
  color: #fff;
  transform: translateY(-3px) rotate(-5deg);
}
.card-icon--accent { background: var(--color-accent-050); color: var(--color-accent-600); }
.card:hover .card-icon--accent { background: var(--grad-accent); color: var(--color-primary-800); }

/* Service card with link */
.service-card {
  display: flex;
  flex-direction: column;
  color: inherit;
}
.service-card:hover { color: inherit; }
.service-card__list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 var(--space-5);
  display: grid;
  gap: .45rem;
}
.service-card__list li {
  position: relative;
  padding-left: 1.55rem;
  font-size: var(--fs-sm);
  color: var(--color-muted);
  margin: 0;
}
.service-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-brand-red);
  box-shadow: 0 0 0 3px rgba(255, 49, 49, .18);
}
.service-card .link-arrow { margin-top: auto; }

.card-number {
  position: absolute;
  top: 1.1rem;
  right: 1.4rem;
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary-050);
  pointer-events: none;
  transition: color var(--dur) var(--ease);
}
.card:hover .card-number { color: var(--color-accent-050); }

/* Glass card */
.glass-card {
  background: var(--grad-glass);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 1rem + 1vw, 2.1rem);
  color: rgba(255, 255, 255, .88);
  box-shadow: 0 20px 50px rgba(4, 18, 46, .28);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
  height: 100%;
}
.glass-card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .14); }
.glass-card h3, .glass-card h4 { color: #fff; }
.glass-card p { color: rgba(255, 255, 255, .8); font-size: var(--fs-base); }
.glass-card .card-icon {
  background: rgba(255, 255, 255, .14);
  color: var(--color-accent);
}

/* Feature tile */
.tile {
  display: flex;
  gap: var(--space-4);
  padding: clamp(1.1rem, .8rem + .8vw, 1.6rem);
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--color-line);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  height: 100%;
}
.tile:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: var(--color-primary-100);
}
.tile__icon {
  flex: none;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--color-primary-050);
  color: var(--color-primary);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tile__icon svg { width: 22px; height: 22px; }
.tile:hover .tile__icon { background: var(--grad-primary); color: #fff; }
.tile h4,
.tile h3.tile__heading { margin-bottom: .35rem; }
.tile p { font-size: var(--fs-sm); color: var(--color-muted); margin: 0; }
.tile--alt { background: var(--color-bg-alt); border-color: transparent; }

/* Check list */
.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .85rem;
}
.check-list li {
  position: relative;
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  margin: 0;
  font-size: var(--fs-base);
}
.check-list svg {
  flex: none;
  width: 22px; height: 22px;
  color: var(--color-primary);
  margin-top: .18em;
}
.check-list--accent svg { color: var(--color-accent-600); }
.section--deep .check-list li { color: rgba(255, 255, 255, .85); }
.section--deep .check-list svg { color: var(--color-accent); }
.check-list b { display: block; }

/* Pill list */
.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pill-list li { margin: 0; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem 1rem;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid var(--color-line);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
  transition: all var(--dur) var(--ease);
}
.pill:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-xs);
}
.pill--accent { background: var(--color-accent-050); border-color: var(--color-accent-100); }
.section--deep .pill {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .2);
  color: #fff;
}

/* --------------------------------------------------------------------------
   9. Stats / counters
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, .5rem + 1.4vw, 2rem);
}
.stat {
  position: relative;
  text-align: center;
  padding: clamp(1.4rem, 1rem + 1vw, 2.2rem) 1rem;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.stat:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2vw, 3.1rem);
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary);
  letter-spacing: -.03em;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .05em;
}
.stat__value .stat__suffix { color: var(--color-accent-600); }
.stat__label {
  margin-top: .6rem;
  font-size: var(--fs-sm);
  color: var(--color-muted);
  font-weight: 600;
}
.stats--on-deep .stat {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none;
}
.stats--on-deep .stat__value { color: #fff; }
.stats--on-deep .stat__value .stat__suffix { color: var(--color-accent); }
.stats--on-deep .stat__label { color: rgba(255, 255, 255, .74); }

/* --------------------------------------------------------------------------
   10. Trust bar / logos
   -------------------------------------------------------------------------- */
.trustbar {
  padding-block: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  border-block: 1px solid var(--color-line-soft);
  background: var(--color-bg-alt);
}
.trustbar__grid {
  display: grid;
  /* Six items, so the column count must divide six: 6 / 3 / 2. auto-fit used
     to settle on five columns at desktop width, which dropped the sixth item
     onto a row of its own and looked like a mistake. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-4) clamp(.6rem, 1.4vw, 1.5rem);
  align-items: center;
}

@media (max-width: 1080px) {
  .trustbar__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .trustbar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.trustbar__item {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--color-primary-800);
}
.trustbar__item svg {
  width: 26px; height: 26px;
  color: var(--color-primary);
  flex: none;
}

/* --------------------------------------------------------------------------
   11. One-stop / value visual
   -------------------------------------------------------------------------- */
.onestop {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, .6rem + 1vw, 1.5rem);
}
.onestop__item {
  position: relative;
  padding: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
  color: rgba(255, 255, 255, .84);
  display: block;
}
.onestop__item:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .92);
}
.onestop__item h3 { font-size: var(--fs-h4); color: #fff; margin-bottom: .5rem; }
.onestop__item p { font-size: var(--fs-sm); color: rgba(255, 255, 255, .78); margin: 0; }
.onestop__item .card-icon {
  background: rgba(255, 255, 255, .13);
  color: var(--color-accent);
  width: 50px; height: 50px;
  border-radius: 15px;
  margin-bottom: var(--space-3);
}
.onestop__item .card-icon svg { width: 24px; height: 24px; }

.hub {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}
.hub__core {
  position: relative;
  z-index: 3;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
  background: var(--grad-primary);
  color: #fff;
  box-shadow: 0 24px 60px rgba(0, 74, 173, .4);
  border: 6px solid rgba(255, 255, 255, .14);
}
.hub__core b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1rem, .8rem + .8vw, 1.5rem);
  line-height: 1.15;
}
/* The markup is .hub__core > span > (b + span). Targeting bare "span" caught
   the wrapper too, which tinted the brand name yellow as well. Only the inner
   span - the "ONE PARTNER" line - should be accent coloured. */
.hub__core span span {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-top: .3rem;
  font-weight: 700;
}

/* Brand name inside the hub is always white, whatever the wrapper inherits. */
.hub__core b {
  color: #fff;
}
.hub__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(0, 74, 173, .22);
}
.hub__ring--1 { inset: 12%; }
.hub__ring--2 { inset: 0; border-style: solid; border-color: rgba(0, 74, 173, .1); }
.hub__node {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem .9rem;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow);
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--color-primary-800);
  white-space: nowrap;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hub__node:hover { transform: scale(1.05); box-shadow: var(--shadow-lg); }
.hub__node svg { width: 18px; height: 18px; color: var(--color-primary); }
.hub__node--n { top: 2%; left: 50%; transform: translateX(-50%); }
.hub__node--n:hover { transform: translateX(-50%) scale(1.05); }
.hub__node--e { top: 50%; right: -2%; transform: translateY(-50%); }
.hub__node--e:hover { transform: translateY(-50%) scale(1.05); }
.hub__node--s { bottom: 2%; left: 50%; transform: translateX(-50%); }
.hub__node--s:hover { transform: translateX(-50%) scale(1.05); }
.hub__node--w { top: 50%; left: -2%; transform: translateY(-50%); }
.hub__node--w:hover { transform: translateY(-50%) scale(1.05); }

/* --------------------------------------------------------------------------
   12. Process / workflow timeline
   -------------------------------------------------------------------------- */
.flow {
  position: relative;
  padding-left: 0;
  list-style: none;
  margin: 0;
  counter-reset: flow;
}
.flow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--color-line);
  border-radius: 2px;
}
.flow__progress {
  position: absolute;
  left: 50%;
  top: 0;
  width: 4px;
  margin-left: -2px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--color-primary), var(--color-accent));
  height: 0;
  transition: height .18s linear;
  z-index: 1;
}
.flow__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 88px 1fr;
  align-items: center;
  margin: 0 0 var(--space-5);
  counter-increment: flow;
}
.flow__item:last-child { margin-bottom: 0; }
.flow__card {
  grid-column: 1;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.15rem, .9rem + .7vw, 1.6rem);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  text-align: right;
}
.flow__item:nth-child(even) .flow__card { grid-column: 3; text-align: left; }
.flow__card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: var(--color-primary-100);
}
.flow__step {
  display: inline-block;
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-brand-red-600);
  margin-bottom: .35rem;
}
.flow__card h3 { font-size: 1.12rem; margin-bottom: .45rem; }
.flow__card p { font-size: var(--fs-sm); color: var(--color-muted); margin: 0; }
.flow__dot {
  grid-column: 2;
  justify-self: center;
  position: relative;
  z-index: 2;
  width: 62px;
  height: 62px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-sm);
  color: var(--color-primary);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
              color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.flow__dot svg { width: 26px; height: 26px; }
.flow__item:hover .flow__dot,
.flow__item.is-active .flow__dot {
  background: var(--grad-primary);
  color: #fff;
  border-color: transparent;
  transform: scale(1.08);
}
.flow__arrow {
  position: absolute;
  left: 50%;
  bottom: calc(var(--space-5) * -1);
  transform: translateX(-50%);
  height: var(--space-5);
  display: grid;
  place-items: center;
  color: var(--color-primary-200);
  z-index: 2;
}
.flow__arrow svg { width: 16px; height: 16px; }

/* Compact horizontal steps */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-4);
  counter-reset: step;
}
.step {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 1.4rem;
  counter-increment: step;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  height: 100%;
}
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.step__num {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--grad-primary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: .85rem;
}
.step h4,
.step h3.step__heading { margin-bottom: .35rem; font-size: 1.05rem; }
.step p { font-size: var(--fs-sm); color: var(--color-muted); margin: 0; }

/* --------------------------------------------------------------------------
   13. Tabs
   -------------------------------------------------------------------------- */
.tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .45rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-6);
  justify-content: center;
}
.tabs__btn {
  border: 0;
  background: transparent;
  padding: .7rem 1.3rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--color-muted);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.tabs__btn:hover { color: var(--color-primary); }
.tabs__btn[aria-selected="true"] {
  background: var(--grad-primary);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 74, 173, .24);
}
.tabs__panel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   14. Testimonials
   -------------------------------------------------------------------------- */
.quote-card {
  position: relative;
  /* <figure> carries a 40px left/right margin by default in every browser,
     which would stop the card filling its grid column. */
  margin: 0;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.1rem + 1vw, 2.2rem);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.quote-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.quote-card__mark {
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: .8;
  color: var(--color-accent);
  margin-bottom: .5rem;
}
.quote-card p {
  font-size: var(--fs-base);
  color: var(--color-text);
  margin-bottom: var(--space-5);
}
.quote-card__stars {
  display: flex;
  gap: .18rem;
  margin-bottom: var(--space-4);
  color: var(--color-accent);
}
.quote-card__stars svg { width: 18px; height: 18px; }
.quote-card__person {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line-soft);
}
.avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grad-primary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  flex: none;
}
.quote-card__person b { display: block; line-height: 1.3; }

/* Nested span only - the role/location line. Matching bare "span" here also
   hit the .avatar circle, overriding its white initials with muted grey on a
   blue background, so the initials all but disappeared. */
.quote-card__person span span { font-size: var(--fs-sm); color: var(--color-muted); }

/* Belt and braces: the avatar keeps its own type no matter what wraps it. */
.quote-card__person .avatar {
  color: #fff;
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   15. Accordion / FAQ
   -------------------------------------------------------------------------- */
.accordion {
  display: grid;
  gap: .85rem;
}
.acc-item {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.acc-item.is-open {
  border-color: var(--color-primary-200);
  box-shadow: var(--shadow-sm);
}
.acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem clamp(1rem, .8rem + .6vw, 1.6rem);
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 650;
  color: var(--color-primary-800);
  line-height: 1.4;
  transition: color var(--dur-fast) var(--ease);
}
.acc-btn:hover { color: var(--color-primary); }
.acc-btn__icon {
  flex: none;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-primary-050);
  color: var(--color-primary);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.acc-btn__icon svg { width: 16px; height: 16px; }
.acc-item.is-open .acc-btn__icon {
  transform: rotate(180deg);
  background: var(--grad-primary);
  color: #fff;
}
.acc-panel {
  overflow: hidden;
  height: 0;
  transition: height var(--dur) var(--ease);
}
.acc-panel__inner {
  padding: 0 clamp(1rem, .8rem + .6vw, 1.6rem) 1.3rem;
  color: var(--color-muted);
  font-size: var(--fs-base);
}

/* --------------------------------------------------------------------------
   16. CTA bands
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--grad-primary-deep);
  color: #fff;
  padding: clamp(2rem, 1.4rem + 3vw, 4rem);
  box-shadow: var(--shadow-lg);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(520px 320px at 88% 20%, rgba(255, 201, 24, .3), transparent 62%),
    radial-gradient(460px 300px at 4% 92%, rgba(26, 122, 232, .45), transparent 60%);
  pointer-events: none;
}
.cta-band__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: var(--space-6);
  align-items: center;
}
.cta-band h2 { color: #fff; margin-bottom: .75rem; }
.cta-band p { color: rgba(255, 255, 255, .82); margin: 0; max-width: 60ch; }
.cta-band .btn-row { justify-content: flex-end; }

.cta-strip {
  background: var(--grad-accent);
  color: var(--color-primary-800);
  padding-block: clamp(1.6rem, 1rem + 2vw, 2.5rem);
}
.cta-strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.cta-strip b,
.cta-strip__title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + .8vw, 1.7rem);
  color: var(--color-primary-800);
  display: block;
  line-height: 1.25;
}
.cta-strip span { color: rgba(31, 41, 55, .8); font-size: var(--fs-sm); }
.cta-strip .btn--primary { box-shadow: 0 14px 30px rgba(10, 36, 80, .28); }

/* --------------------------------------------------------------------------
   17. Forms
   -------------------------------------------------------------------------- */
.form-card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.75rem);
  box-shadow: var(--shadow-lg);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.field { display: flex; flex-direction: column; gap: .45rem; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--color-primary-800);
}
.field label .req { color: #d92d20; }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .9rem 1.05rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  font-size: var(--fs-base);
  color: var(--color-text);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.field textarea { min-height: 148px; resize: vertical; }
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23566175' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(0, 74, 173, .12);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--color-soft); }
.field .hint { font-size: var(--fs-xs); color: var(--color-soft); }
.field .error-msg {
  font-size: var(--fs-xs);
  color: #d92d20;
  font-weight: 600;
  min-height: 0;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: #d92d20;
  background: #fef3f2;
}
.field.has-error .error-msg { min-height: 1.1em; }

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: var(--fs-sm);
  color: var(--color-muted);
}
.checkbox input {
  width: 20px; height: 20px;
  flex: none;
  margin-top: .18em;
  accent-color: var(--color-primary);
}
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

.form-note {
  font-size: var(--fs-xs);
  color: var(--color-soft);
  margin-top: var(--space-3);
}
.form-alert {
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--space-5);
  display: flex;
  gap: .7rem;
  align-items: flex-start;
}
.form-alert svg { width: 20px; height: 20px; flex: none; margin-top: .1em; }
.form-alert--success {
  background: var(--color-success-bg);
  color: #0b6f4f;
  border: 1px solid #bfe8d8;
}
.form-alert--error {
  background: #fef3f2;
  color: #b42318;
  border: 1px solid #fbd3ce;
}
/* Used when the form has no backend behind it — the offline preview folder.
   Deliberately calm, not red: nothing has gone wrong. */
.form-alert--notice {
  background: #eff5ff;
  color: var(--color-primary-800);
  border: 1px solid #cfe0fb;
}
.form-alert[hidden] { display: none; }

/* --------------------------------------------------------------------------
   18. Contact info blocks
   -------------------------------------------------------------------------- */
.contact-card {
  display: flex;
  gap: 1rem;
  padding: 1.3rem;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  height: 100%;
}
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.contact-card__icon {
  flex: none;
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--grad-primary);
  color: #fff;
}
.contact-card__icon svg { width: 22px; height: 22px; }
.contact-card h4 { margin-bottom: .2rem; font-size: 1rem; }
.contact-card p, .contact-card a {
  font-size: var(--fs-sm);
  color: var(--color-muted);
  margin: 0;
  word-break: break-word;
}
.contact-card a:hover { color: var(--color-primary); }

/* --------------------------------------------------------------------------
   19. Map / licensing
   -------------------------------------------------------------------------- */
.map-wrap {
  position: relative;
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, #ffffff 0%, #f2f6fd 100%);
  border: 1px solid var(--color-line);
  padding: clamp(1.2rem, .8rem + 1.5vw, 2.4rem);
  box-shadow: var(--shadow);
}
.map-wrap__badge {
  position: absolute;
  top: clamp(1rem, .6rem + 1vw, 1.8rem);
  right: clamp(1rem, .6rem + 1vw, 1.8rem);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: .7rem 1.1rem;
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.map-wrap__badge b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-primary);
  line-height: 1;
}
.map-wrap__badge span {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-muted);
  font-weight: 650;
}
.state-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.state-grid li {
  margin: 0;
  padding: .5rem .4rem;
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 650;
  color: var(--color-muted);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xs);
  transition: all var(--dur) var(--ease);
}
.state-grid li:hover {
  color: var(--color-primary);
  border-color: var(--color-primary-200);
  background: var(--color-primary-050);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   20. Portfolio grid (Healthcare IT)
   -------------------------------------------------------------------------- */
.portfolio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.1rem, .7rem + 1.2vw, 1.8rem);
}
.folio {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  background: #fff;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.folio:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.folio__visual {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--grad-primary-deep);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.folio__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px 240px at 78% 12%, rgba(255, 201, 24, .28), transparent 60%);
}
.folio__visual img, .folio__visual svg {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.folio:hover .folio__visual img,
.folio:hover .folio__visual svg { transform: scale(1.05); }
.folio__tag {
  position: absolute;
  z-index: 2;
  top: 1rem; left: 1rem;
  background: rgba(255, 255, 255, .92);
  color: var(--color-primary-800);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .35rem .75rem;
  border-radius: var(--radius-pill);
}
.folio__body { padding: clamp(1.2rem, 1rem + .6vw, 1.7rem); display: flex; flex-direction: column; flex: 1; }
.folio__body h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.folio__body p { font-size: var(--fs-sm); color: var(--color-muted); }
.folio__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: auto;
  padding-top: var(--space-4);
}
.chip {
  font-size: var(--fs-xs);
  font-weight: 650;
  padding: .3rem .7rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-050);
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   21. Comparison / table
   -------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  background: #fff;
  box-shadow: var(--shadow-xs);
  -webkit-overflow-scrolling: touch;
}
table.data {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  font-size: var(--fs-sm);
}
table.data caption {
  text-align: left;
  padding: 1.1rem 1.4rem 0;
  color: var(--color-muted);
  font-size: var(--fs-sm);
}
table.data th,
table.data td {
  padding: 1rem 1.3rem;
  text-align: left;
  border-bottom: 1px solid var(--color-line-soft);
  vertical-align: top;
}
table.data thead th {
  background: var(--color-bg-alt);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--color-primary-800);
  white-space: nowrap;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr { transition: background-color var(--dur-fast) var(--ease); }
table.data tbody tr:hover { background: var(--color-primary-050); }
table.data td b { color: var(--color-primary-800); }

/* --------------------------------------------------------------------------
   22. KPI / result strip
   -------------------------------------------------------------------------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}
.kpi {
  padding: 1.4rem;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-brand-red);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  height: 100%;
}
.kpi:hover { transform: translateX(4px); box-shadow: var(--shadow-sm); }
.kpi b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--color-primary);
  line-height: 1.1;
}
.kpi span { font-size: var(--fs-sm); color: var(--color-muted); font-weight: 600; }

/* --------------------------------------------------------------------------
   23. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--color-primary-800);
  color: rgba(255, 255, 255, .72);
  padding-top: clamp(3rem, 2rem + 3vw, 5rem);
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(680px 380px at 88% 0%, rgba(26, 122, 232, .32), transparent 60%),
    radial-gradient(420px 300px at 6% 100%, rgba(255, 201, 24, .12), transparent 62%);
  pointer-events: none;
}
.site-footer > * { position: relative; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: clamp(1.6rem, 1rem + 2vw, 3rem);
  padding-bottom: clamp(2rem, 1.4rem + 2vw, 3.5rem);
}
.site-footer h3 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: var(--space-4);
  letter-spacing: -.01em;
}
.site-footer p { font-size: var(--fs-sm); line-height: 1.75; }
.footer-brand .brand__name { color: #fff; }
.footer-brand .brand__tag { color: rgba(255, 255, 255, .5); }
.footer-brand .brand__mark {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: none;
}
.footer-brand .brand { margin-bottom: var(--space-4); }

.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .6rem;
}
.footer-list a {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .72);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.footer-list a::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: .5;
  transition: opacity var(--dur-fast) var(--ease);
}
.footer-list a:hover { color: #fff; transform: translateX(4px); }
.footer-list a:hover::before { opacity: 1; }

.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  display: grid;
  gap: .9rem;
}
.footer-contact li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: var(--fs-sm);
  margin: 0;
}
.footer-contact svg {
  width: 18px; height: 18px;
  color: var(--color-accent);
  flex: none;
  margin-top: .22em;
}
.footer-contact a { color: rgba(255, 255, 255, .82); }
.footer-contact a:hover { color: var(--color-accent); }

.social {
  display: flex;
  gap: .55rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.social li { margin: 0; }
.social a {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .85);
  transition: all var(--dur) var(--ease);
}
.social a svg { width: 18px; height: 18px; }
.social a:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary-800);
  transform: translateY(-3px);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-block: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--fs-sm);
}
.footer-bottom nav {
  display: flex;
  gap: 1.3rem;
  flex-wrap: wrap;
}
.footer-bottom a { color: rgba(255, 255, 255, .72); }
.footer-bottom a:hover { color: var(--color-accent); }

.footer-disclaimer {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .5);
  padding-bottom: 1.5rem;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   24. Floating actions
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 0;
  background: var(--grad-primary);
  color: #fff;
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: all var(--dur) var(--ease);
}
.to-top svg { width: 20px; height: 20px; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* --------------------------------------------------------------------------
   25. Legal pages
   -------------------------------------------------------------------------- */
.legal {
  max-width: 860px;
}
.legal h2 {
  font-size: var(--fs-h3);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}
.legal h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.legal h3 { font-size: 1.12rem; margin-top: var(--space-5); }
.legal ul { color: var(--color-muted); }
.legal li { margin-bottom: .55rem; }
.legal p { color: var(--color-muted); }
.legal-meta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-primary-050);
  border-radius: var(--radius-pill);
  padding: .45rem 1rem;
  margin-bottom: var(--space-6);
}

/* Table of contents */
.toc {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  margin-bottom: var(--space-7);
}
.toc h2 {
  font-size: 1rem;
  margin: 0 0 .8rem;
  border: 0;
  padding: 0;
}
.toc ol { margin: 0; padding-left: 1.2rem; column-gap: 2rem; }
.toc li { font-size: var(--fs-sm); }


/* --------------------------------------------------------------------------
   Edge RCM brand details
   The logo pairs a strong blue with a single red. Red appears here only in
   small doses - rules, markers and dividers - so the yellow call-to-action
   buttons keep all of the visual priority.
   -------------------------------------------------------------------------- */
.footer-list a::before { background: var(--color-brand-red); }

.section-head h2 .title-accent { color: var(--color-primary); }

.brand__logo {
  height: 46px;
  width: auto;
  flex: none;
  transition: transform var(--dur) var(--ease);
}
.brand:hover .brand__logo { transform: scale(1.04); }

.brand__name .brand__name-rcm { color: var(--color-brand-red); }

.site-footer .brand__name .brand__name-rcm { color: var(--color-brand-red); }

.cta-strip { border-top: 4px solid var(--color-brand-red); }

.quote-card__mark { color: var(--color-brand-red); }

.stat::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 34px;
  height: 3px;
  margin-left: -17px;
  border-radius: 3px 3px 0 0;
  background: var(--color-brand-red);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.stat:hover::after { opacity: 1; }


/* --------------------------------------------------------------------------
   Full Edge RCM logo used on its own in the header and footer
   -------------------------------------------------------------------------- */
.brand__logo-full {
  height: 56px;
  width: auto;
  flex: none;
  display: block;
  transition: transform var(--dur) var(--ease);
}
.brand:hover .brand__logo-full { transform: scale(1.03); }

.site-footer .brand__logo-full { height: 62px; }

@media (max-width: 1080px) { .brand__logo-full { height: 50px; } }
@media (max-width: 640px)  { .brand__logo-full { height: 44px; } }
@media (max-width: 420px)  { .brand__logo-full { height: 40px; } }


/* --------------------------------------------------------------------------
   Header balance (desktop only)
   The brand is now a single logo rather than a wide mark-plus-text lockup, so
   pushing the menu to the right edge left an awkward void beside it. The menu
   now sits next to the logo with a deliberate gap, and the call-to-action
   anchors to the right edge where visitors expect it.
   Below 1080px the menu becomes a drawer, so none of this applies there.
   -------------------------------------------------------------------------- */
@media (min-width: 1081px) {
  /* Equal auto margins on both sides make the menu sit exactly halfway
     between the logo and the call-to-action, so the gap on its left always
     matches the gap on its right - regardless of how wide the logo or the
     button happen to be. The inline padding guarantees breathing room even
     at 1081px, where the free space is smallest. */
  .navbar__inner .nav {
    margin-left: auto;
    margin-right: auto;
    padding-inline: 1.25rem;
  }

  /* Eight menu items no longer fit between the logo and the button on a
     narrow laptop - the call-to-action was pushed past the right edge and the
     whole page gained a horizontal scrollbar. Tightening the link padding and
     the menu's own inline padding in this band buys back the ~60px needed,
     without moving the breakpoint and taking the desktop menu away from
     1100px screens altogether. */
  @media (max-width: 1200px) {
    .navbar__inner .nav { padding-inline: .35rem; }
    .navbar__inner .nav__link { padding-inline: .5rem; font-size: .9rem; }
    .navbar__inner .nav__list { gap: 0; }
  }
  .navbar__inner .nav__actions {
    margin-left: 0;
  }
  .brand__logo-full { height: 60px; }

  /* The phone and email icon buttons repeat what the top bar already shows in
     full, and their weight was unbalancing the header. Hiding them on desktop
     leaves the call-to-action standing alone, which is where we want the eye
     to land. They stay visible below 1081px, where the top bar is condensed
     and one-tap calling matters. */
  .navbar__inner .nav__actions .icon-btn { display: none; }
}


/* ==========================================================================
   TRUST BAR (replaces the old phone/email announcement strip)
   --------------------------------------------------------------------------
   Phone and email were removed because they already appear in the navbar call
   button, the contact page and the footer. This strip now carries the reasons
   a practice should trust Edge RCM.

   Wide screens show every trust signal at once - with 1200px available that is
   strictly better than rotating, because nothing is hidden and nothing has to
   be waited for. Rotation only kicks in below 861px, where a single line is
   all that fits.
   ========================================================================== */

.topbar {
  background: var(--grad-primary-deep);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-size: .78rem;
}

.topbar .topbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  gap: 0;
}

.topbar__facts {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
}

.topbar__fact {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  padding: 0 clamp(.65rem, 1.3vw, 1.25rem);
  font-weight: 550;
  letter-spacing: .015em;
  color: rgba(255, 255, 255, .82);
  white-space: nowrap;
}

/* hairline dot between items */
.topbar__fact + .topbar__fact::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 50%;
  width: 3px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
}

.topbar__fact svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--color-accent);
}

.topbar__short { display: none; }

/* The one conversion path in the bar */
.topbar__fact--cta a {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  color: #fff;
  font-weight: 650;
  border-bottom: 1px solid rgba(255, 201, 24, .45);
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.topbar__fact--cta a:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}
.topbar__fact--cta svg {
  width: 12px;
  height: 12px;
  color: currentColor;
  transition: transform var(--dur) var(--ease);
}
.topbar__fact--cta a:hover svg { transform: translateX(3px); }

/* Between 861 and 1240px all five still fit, but only in their short form. */
@media (max-width: 1240px) and (min-width: 861px) {
  .topbar__long  { display: none; }
  .topbar__short { display: inline; }
}

/* --------------------------------------------------------------------------
   Below 861px only one message fits, so they fade through one at a time.
   Five items x 4s = a 20s cycle. Pure CSS, no JavaScript.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .topbar__long  { display: none; }
  .topbar__short { display: inline; }

  .topbar .topbar__inner { min-height: 38px; }

  .topbar__facts {
    position: relative;
    display: block;
    width: 100%;
    height: 20px;
  }

  .topbar__fact {
    position: absolute;
    inset: 0;
    justify-content: center;
    padding: 0;
    opacity: 0;
    animation: topbarCycle 20s ease-in-out infinite;
  }
  .topbar__fact + .topbar__fact::before { display: none; }

  .topbar__fact:nth-child(1) { animation-delay: 0s;  }
  .topbar__fact:nth-child(2) { animation-delay: 4s;  }
  .topbar__fact:nth-child(3) { animation-delay: 8s;  }
  .topbar__fact:nth-child(4) { animation-delay: 12s; }
  .topbar__fact:nth-child(5) { animation-delay: 16s; }
}

@keyframes topbarCycle {
  0%    { opacity: 0; transform: translateY(5px); }
  1.5%  { opacity: 1; transform: translateY(0); }
  18%   { opacity: 1; transform: translateY(0); }
  20%   { opacity: 0; transform: translateY(-5px); }
  100%  { opacity: 0; transform: translateY(-5px); }
}

/* Anyone who has asked their device to reduce motion sees the first message,
   held still. Nothing moves, nothing is lost. */
@media (prefers-reduced-motion: reduce) {
  .topbar__fact { animation: none !important; }
  @media (max-width: 860px) {
    .topbar__fact { opacity: 0 !important; }
    .topbar__fact:first-child { opacity: 1 !important; }
  }
}


/* --------------------------------------------------------------------------
   Bold text on dark surfaces
   The global "strong, b" rule paints bold text deep navy, which is correct on
   white but invisible on the dark blue sections, the hub circle, glass cards
   and the CTA bands. On those surfaces bold text simply takes the colour of
   whatever it sits in.
   -------------------------------------------------------------------------- */
.section--deep b,  .section--deep strong,
.glass-card b,     .glass-card strong,
.cta-band b,       .cta-band strong,
.onestop__item b,  .onestop__item strong,
.hub__core b,      .hub__core strong,
.site-footer b,    .site-footer strong {
  color: inherit;
}


/* ==========================================================================
   PRICING CARDS
   Every selector here is class-based on purpose. Bare descendant selectors
   like ".price-card span" are exactly what caused the avatar and hub bugs.
   ========================================================================== */

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.1rem, .7rem + 1.2vw, 1.8rem);
}
@media (max-width: 980px) { .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .price-grid { grid-template-columns: 1fr; } }

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 1rem + 1vw, 2rem);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  height: 100%;
  overflow: hidden;
}
.price-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--grad-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.price-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary-100);
}
.price-card:hover::before { transform: scaleX(1); }

.price-card--featured {
  border-color: var(--color-primary-200);
  box-shadow: var(--shadow);
}
.price-card--featured::before { transform: scaleX(1); }

.price-card__badge {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary-800);
  background: var(--grad-accent);
  padding: .3rem .7rem;
  border-radius: var(--radius-pill);
}

.price-card__icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: var(--color-primary-050);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.price-card__icon svg { width: 24px; height: 24px; }
.price-card:hover .price-card__icon { background: var(--grad-primary); color: #fff; }

.price-card__title {
  font-size: 1.12rem;
  margin-bottom: .15rem;
}

.price-card__prefix {
  display: block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  color: var(--color-soft);
  margin-top: .9rem;
}

.price-card__value {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.35rem + 1.2vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--color-primary);
}
.price-card__symbol {
  font-size: .58em;
  font-weight: 700;
  color: var(--color-brand-red);
  margin-left: .06em;
}
.price-card__unit {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-muted);
  margin-top: .2rem;
}
.price-card__note {
  font-size: var(--fs-xs);
  color: var(--color-soft);
  margin: .55rem 0 0;
}

.price-card__list {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 var(--space-5);
  display: grid;
  gap: .6rem;
}
.price-card__list li {
  position: relative;
  padding-left: 1.6rem;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-muted);
  line-height: 1.6;
}
.price-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-brand-red);
  box-shadow: 0 0 0 3px rgba(255, 49, 49, .16);
}

.price-card__cta { margin-top: auto; }

/* Reassurance strip under the pricing grids */
.price-assurance {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-7);
}
@media (max-width: 860px) { .price-assurance { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .price-assurance { grid-template-columns: 1fr; } }

.price-assurance__item {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: 1.1rem 1.2rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius);
}
.price-assurance__item svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--color-primary);
  margin-top: .15em;
}
.price-assurance__label {
  display: block;
  font-weight: 650;
  color: var(--color-primary-800);
  font-size: var(--fs-sm);
}
.price-assurance__text {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-muted);
  line-height: 1.6;
}


/* Bold text inside a page-hero paragraph. The global "strong, b" rule paints
   it deep navy, which disappears against the dark hero. Scoped to "p" so the
   large white figures in .hero-stats keep their own colour. */
.page-hero p strong,
.page-hero p b {
  color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   HTML SITEMAP (/sitemap/)
   The human-readable site index. /sitemap.xml stays untouched for crawlers.
   -------------------------------------------------------------------------- */
.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}
.sitemap-group {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.75rem 1.5rem;
  box-shadow: var(--shadow-sm);
}
.sitemap-group h3 {
  font-size: var(--fs-h4);
  margin: .35rem 0 1.1rem;
  color: var(--color-primary-800);
}
.sitemap-list { list-style: none; margin: 0; padding: 0; }
.sitemap-list li {
  padding: .8rem 0;
  border-top: 1px solid var(--color-line);
}
.sitemap-list li:first-child { border-top: 0; padding-top: 0; }
.sitemap-list a {
  display: inline-block;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
}
.sitemap-list a:hover,
.sitemap-list a:focus-visible { text-decoration: underline; }
.sitemap-list span {
  display: block;
  margin-top: .2rem;
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

/* The blog list is a flat run of many items, so it reads better in columns
   than as one long single-file column. */
.sitemap-list--posts {
  columns: 2;
  column-gap: var(--space-6);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-sm);
}
.sitemap-list--posts li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

.sitemap-xml-note {
  margin: var(--space-6) 0 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-muted);
}
.sitemap-xml-note a { color: var(--color-primary); font-weight: 600; }

@media (max-width: 860px) {
  .sitemap-grid { grid-template-columns: 1fr; }
  .sitemap-list--posts { columns: 1; }
}

/* --------------------------------------------------------------------------
   TESTIMONIALS — photo avatars and the click-to-play video facade
   -------------------------------------------------------------------------- */

/* A real client photo in place of the initials block. */
.avatar--photo {
  object-fit: cover;
  padding: 0;
  background: var(--color-bg-deep);
}

/* The facade is what makes many video testimonials cheap: it is only an image
   and a button until the visitor presses play, at which point script.js swaps
   in the real player. Nothing is requested from the video host before that. */
.video-facade {
  position: relative;
  display: block;
  margin: -1.9rem -1.9rem 1.3rem;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  background: var(--color-primary-800);
  aspect-ratio: 16 / 9;
}
.video-facade__poster,
.video-facade iframe,
.video-facade video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}
.video-facade__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--color-primary);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(6, 20, 48, .35);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.video-facade__play svg { width: 28px; height: 28px; margin-left: 3px; }
.video-facade__play:hover,
.video-facade__play:focus-visible {
  transform: translate(-50%, -50%) scale(1.08);
  background: #fff;
}
.video-facade__badge {
  position: absolute;
  top: .7rem;
  left: .7rem;
  padding: .2rem .6rem;
  border-radius: var(--radius-pill);
  background: rgba(6, 20, 48, .72);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* Once playing, the poster and chrome are gone and the player fills the frame. */
.video-facade.is-playing .video-facade__play,
.video-facade.is-playing .video-facade__badge,
.video-facade.is-playing .video-facade__poster { display: none; }

/* The card keeps its normal padding; the negative margins above are what pull
   the facade out to the card's edges. Zeroing the padding here as well would
   pull it clean off the top of the card. */
.quote-card--video { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .video-facade__play { transition: none; }
  .video-facade__play:hover,
  .video-facade__play:focus-visible { transform: translate(-50%, -50%); }
}

/* --------------------------------------------------------------------------
   FOOTER — mobile compaction
   The footer ran to 1800px on a 375px screen, roughly 2.2 screens of scrolling
   past the end of the page. Below 760px the two link columns collapse into
   tap-to-open panels and the contact block becomes tappable rows. Every link
   stays in the HTML: Google indexes the mobile rendering, so removing them
   would quietly cost sixteen internal links.
   -------------------------------------------------------------------------- */

/* On desktop a <details> must look and behave exactly like the <div> it
   replaced - no marker, no pointer, nothing clickable. */
.footer-acc { border: 0; }
.footer-acc > summary {
  list-style: none;
  cursor: default;
  display: block;
}
.footer-acc > summary::-webkit-details-marker { display: none; }
.footer-acc > summary::marker { content: ""; }
.footer-acc > summary > h3,
.footer-acc > summary > h4 { margin: 0 0 var(--space-4); }

@media (max-width: 760px) {
  .site-footer { padding-top: clamp(2.25rem, 1.5rem + 2vw, 3rem); }

  .footer-grid {
    gap: 0;
    padding-bottom: var(--space-6);
  }

  /* Brand blurb: kept for the words it carries, tightened so it stops being a
     wall of text nobody reads at the bottom of a phone screen. */
  .footer-brand p {
    font-size: var(--fs-xs);
    line-height: 1.65;
    margin-bottom: var(--space-4);
  }
  .footer-brand { margin-bottom: var(--space-2); }
  .footer-brand .brand__logo-full { height: 46px; width: auto; }

  /* ---- collapsed link panels ---- */
  .footer-acc {
    border-top: 1px solid rgba(255, 255, 255, .12);
  }
  .footer-acc > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .95rem 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .footer-acc > summary > h3,
  .footer-acc > summary > h4 {
    margin: 0;
    font-size: var(--fs-base);
  }
  /* Chevron drawn in CSS rather than shipped as another SVG. */
  .footer-acc > summary::after {
    content: "";
    width: 9px;
    height: 9px;
    flex: none;
    border-right: 2px solid var(--color-accent);
    border-bottom: 2px solid var(--color-accent);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--dur-fast) var(--ease);
  }
  .footer-acc[open] > summary::after {
    transform: rotate(225deg) translate(-2px, -2px);
  }
  .footer-acc .footer-list { padding: 0 0 1.05rem; gap: .8rem; }

  /* ---- contact block ---- */
  .footer-grid > div:last-of-type { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 1rem; }
  .footer-grid > div:last-of-type > h3,
  .footer-grid > div:last-of-type > h4 { font-size: var(--fs-base); margin-bottom: .85rem; }

  .footer-contact { gap: .5rem; margin-bottom: var(--space-4); }

  /* Phone and email are the two things a provider actually taps, so they get
     the size and the target area of buttons rather than sitting in a list. */
  .footer-contact li:nth-child(2),
  .footer-contact li:nth-child(3) {
    align-items: center;
    gap: .65rem;
    padding: .7rem .85rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .06);
  }
  .footer-contact li:nth-child(2) svg,
  .footer-contact li:nth-child(3) svg { margin-top: 0; }
  .footer-contact li:nth-child(2) a,
  .footer-contact li:nth-child(3) a {
    color: #fff;
    font-weight: 700;
    font-size: var(--fs-md);
    letter-spacing: -.01em;
  }
  /* Address and opening hours are reference, not actions. */
  .footer-contact li:nth-child(1),
  .footer-contact li:nth-child(4) { font-size: var(--fs-xs); opacity: .82; }
  .footer-contact li:nth-child(1) svg,
  .footer-contact li:nth-child(4) svg { width: 15px; height: 15px; }

  .footer-grid > div:last-of-type .btn { width: 100%; justify-content: center; }

  /* ---- small print ---- */
  /* Kept: it is what backs the published timelines. Just no longer the loudest
     thing in the footer. */
  .site-footer .footer-disclaimer {
    font-size: 11px;
    line-height: 1.55;
    opacity: .62;
    margin: var(--space-4) 0 0;
    padding-bottom: var(--space-4);
  }
  .footer-bottom { padding-block: var(--space-4); gap: .5rem; }
  .footer-bottom p, .footer-bottom a { font-size: var(--fs-xs); }
}

/* Above the breakpoint the footer must never depend on the open attribute. If a
   resize, a stale state or a browser that ignores the script leaves a panel
   closed, the links still have to be there - this is the site's internal
   navigation, not a nicety. */
@media (min-width: 761px) {
  .footer-acc:not([open]) > .footer-list { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  .footer-acc > summary::after { transition: none; }
}

/* --------------------------------------------------------------------------
   CASE STUDIES
   -------------------------------------------------------------------------- */

/* ---- Search and filter bar ---- */
.cs-filters { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.cs-filters__search { position: relative; flex: 1 1 260px; display: flex; align-items: center; }
.cs-filters__search svg {
  position: absolute;
  left: .9rem;
  width: 18px; height: 18px;
  color: var(--color-soft);
  pointer-events: none;
}
.cs-filters__search input { padding-left: 2.6rem !important; width: 100%; }
.cs-filters input,
.cs-filters select {
  height: 46px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 0 .9rem;
  font-size: var(--fs-sm);
  font-family: inherit;
  color: var(--color-text);
}
.cs-filters select { min-width: 150px; }
.cs-filters input:focus,
.cs-filters select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(0, 74, 173, .12);
}
.cs-filters .btn { height: 46px; }
.cs-filters__clear { font-size: var(--fs-sm); font-weight: 600; color: var(--color-primary); }
.cs-filters__count { margin: 1rem 0 0; font-size: var(--fs-sm); color: var(--color-muted); }

/* ---- Grid card ---- */
.cs-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.cs-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--color-primary-100); }
.cs-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-deep);
  overflow: hidden;
}
.cs-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-card__placeholder {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--color-primary-200);
}
.cs-card__placeholder svg { width: 46px; height: 46px; }
.cs-card__cat {
  position: absolute;
  top: .8rem; left: .8rem;
  padding: .25rem .7rem;
  border-radius: var(--radius-pill);
  background: rgba(6, 24, 58, .78);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
}
.cs-card__body { padding: 1.3rem 1.35rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.cs-card__meta {
  list-style: none;
  margin: 0 0 .7rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  font-size: var(--fs-xs);
  color: var(--color-soft);
  font-weight: 600;
}
.cs-card__meta li { display: inline-flex; align-items: center; gap: .3rem; }
.cs-card__meta svg { width: 13px; height: 13px; color: var(--color-primary-200); }
.cs-card__title { font-size: var(--fs-h4); line-height: 1.3; margin: 0 0 .55rem; }
.cs-card__title a { color: var(--color-primary-800); text-decoration: none; }
.cs-card__title a:hover { color: var(--color-primary); }
.cs-card__summary { font-size: var(--fs-sm); line-height: 1.6; color: var(--color-muted); margin: 0 0 1.1rem; flex: 1; }
.cs-card__more {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--fs-sm); font-weight: 700; color: var(--color-primary);
}
.cs-card__more svg { width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease); }
.cs-card:hover .cs-card__more svg { transform: translateX(3px); }

/* ---- Featured treatment ---- */
.cs-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.cs-feature__media { position: relative; display: block; background: var(--color-bg-deep); min-height: 340px; }
.cs-feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-feature__body {
  padding: clamp(1.6rem, 1.1rem + 1.6vw, 2.8rem);
  display: flex; flex-direction: column; justify-content: center;
}
.cs-feature__title { font-size: var(--fs-h3); line-height: 1.25; margin: .4rem 0 .8rem; }
.cs-feature__title a { color: var(--color-primary-800); text-decoration: none; }
.cs-feature__title a:hover { color: var(--color-primary); }
.cs-feature__body p { color: var(--color-muted); margin-bottom: 1.2rem; }
.cs-feature__metrics { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-bottom: 1.5rem; }
.cs-mini-metric b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--color-primary);
  line-height: 1.1;
}
.cs-mini-metric span {
  font-size: var(--fs-xs); color: var(--color-soft); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
}
.cs-feature__body .btn { align-self: flex-start; }

/* ---- Single study ---- */
.cs-hero__meta {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 2.4rem;
}
.cs-hero__meta span {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  font-weight: 600;
  margin-bottom: .2rem;
}
.cs-hero__meta b { font-family: var(--font-display); font-size: var(--fs-lg); color: #fff; }

.cs-services { margin-top: var(--space-6); }
.cs-services__label {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-soft);
  margin-bottom: .6rem;
}
.cs-services ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; }
.cs-services a {
  display: inline-block;
  padding: .45rem 1rem;
  border: 1px solid var(--color-primary-200);
  border-radius: var(--radius-pill);
  background: var(--color-primary-050);
  color: var(--color-primary);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}
.cs-services a:hover { background: var(--color-primary-100); }

.cs-block { margin-bottom: var(--space-8); }
.cs-block__head { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.1rem; }
.cs-block__head h2, .cs-block__head h3 { margin: 0; font-size: var(--fs-h3); }
.cs-block__icon {
  width: 48px; height: 48px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 15px;
  background: var(--color-primary-050);
  color: var(--color-primary);
}
.cs-block__icon svg { width: 23px; height: 23px; }
.cs-block--challenge .cs-block__icon { background: var(--color-brand-red-050); color: var(--color-brand-red-600); }
.cs-block--results .cs-block__icon { background: var(--color-success-bg); color: var(--color-success); }

.cs-takeaway {
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem);
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--color-bg-alt);
}

/* ---- Before / after metric cards ---- */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, .6rem + 1vw, 1.5rem);
}
.metric-card {
  padding: 1.5rem 1.4rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, .16);
  background: var(--grad-glass);
  text-align: center;
}
.metric-card__label {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 1rem;
}
.metric-card__pair { display: flex; align-items: center; justify-content: center; gap: .9rem; }
.metric-card__side span {
  display: block;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  font-weight: 700;
  margin-bottom: .2rem;
}
.metric-card__side b {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + .7vw, 1.8rem);
  color: rgba(255, 255, 255, .72);
  line-height: 1.1;
}
.metric-card__side--after b { color: var(--color-accent); }
.metric-card__arrow { color: rgba(255, 255, 255, .4); }
.metric-card__arrow svg { width: 20px; height: 20px; }
.metric-card__delta {
  display: inline-block;
  margin-top: .9rem;
  padding: .2rem .7rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 201, 24, .16);
  color: var(--color-accent);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.cs-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.cs-gallery figure { margin: 0; }
.cs-gallery img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
  border-radius: var(--radius); border: 1px solid var(--color-line);
}
.cs-gallery figcaption { font-size: var(--fs-xs); color: var(--color-soft); margin-top: .5rem; }

.cs-service-card { text-decoration: none; display: block; }
.cs-service-card h3 { color: var(--color-primary-800); }
.cs-service-card__more {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .8rem;
  font-size: var(--fs-sm); font-weight: 700; color: var(--color-primary);
}
.cs-service-card__more svg { width: 15px; height: 15px; }

.cs-tags { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: var(--space-6); }
.cs-tag {
  padding: .3rem .8rem;
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-muted);
}

.pagination { display: flex; justify-content: center; gap: .45rem; margin-top: var(--space-7); }
.pagination__link {
  min-width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-text);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-decoration: none;
}
.pagination__link:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagination__link.is-current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

@media (max-width: 1080px) {
  .cs-feature { grid-template-columns: minmax(0, 1fr); }
  /* min-height plus aspect-ratio makes the browser derive the WIDTH from the
     height (240 x 16/9 = 427px), which overflowed a 343px card. Dropping the
     minimum lets the width lead and the height follow, as intended. */
  .cs-feature__media { min-height: 0; width: 100%; aspect-ratio: 16 / 9; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cs-filters { flex-direction: column; align-items: stretch; }
  .cs-filters select, .cs-filters .btn { width: 100%; }
  .metric-grid { grid-template-columns: 1fr; }
  .cs-gallery { grid-template-columns: 1fr; }
  .cs-hero__meta { gap: 1rem 1.6rem; }
}