/* ─── Design Tokens ────────────────────────────────────── */
:root {
  /* Colors */
  --color-primary: #052e28;      /* Dark teal (brand primary) */
  --color-primary-alt: #052c2e;  /* Dark teal variant */
  --color-accent: #1d7c80;       /* Teal accent */
  --color-accent-dark: #08373a;  /* Dark teal accent */
  --color-highlight: #f9fa8d;    /* Yellow highlight */
  --color-white: #ffffff;
  --color-bg-light: #f7f7f7;     /* Page background */
  --color-bg-gray: #f5f5f5;      /* Card backgrounds */
  --color-bg-teal: #f5feff;      /* Teal tint */

  /* Spacing scale (8px base) */
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 20px;
  --space-lg: 24px;
  --space-xl: 28px;
  --space-2xl: 32px;
  --space-3xl: 36px;
  --space-4xl: 40px;
  --space-5xl: 48px;
  --space-6xl: 56px;
  --space-7xl: 72px;
  --space-8xl: 80px;

  /* Typography */
  --font-sans: 'Geist', sans-serif;
  --font-display: 'Oceanic';

  /* Border radius */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;

  /* Browser support: Chrome/Firefox/Safari last 2 versions. No IE11. */
}

/* ─── Oceanic (local) ─────────────────────────────────── */
@font-face {
  font-family: 'Oceanic';
  src: url('../Fonts/Oceanic-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ─── Video modal ─────────────────────────────────────── */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.video-modal.is-open {
  opacity: 1;
  pointer-events: all;
}

.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 28, 30, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.video-modal-box {
  position: relative;
  width: 100%;
  max-width: 1080px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  background: #000;
}

.video-modal.is-open .video-modal-box {
  transform: translateY(0) scale(1);
}

.video-modal-player {
  display: block;
  width: 100%;
  max-height: 80vh;
  background: #000;
}

.video-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1a1a1a;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  z-index: 10;
  transition: background 0.2s ease;
}

.video-modal-close:hover {
  background: #333333;
}

/* ─── Scroll reveal ───────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ─── Reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
}

html, body {
  background: var(--color-bg-light);
  font-family: 'Geist', sans-serif;
  color: var(--color-primary-alt);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Page wrapper – keeps all content ≤ 1728 px, centred on wide screens */
.page {
  max-width: 1728px;
  margin: 0 auto;
}

/*
  ── Reference canvas: 1728 px wide ───────────────────────
  Side margins: 116 px = 6.713 %
  Content area: 1496 px = 86.574 %
*/

/* ══════════════════════════════════════════════════════════
   HEADER
   – pill floats 8 px from top, 116 px from each side
   – height 72 px, radius 24 px
   – Logo at 176 px from canvas left = 60 px from pill left
   – Nav slightly right-of-centre (25.5 px offset per Figma)
   – CTA right-edge ≈ 18 px from pill right
══════════════════════════════════════════════════════════ */
.header-shell {
  position: fixed;
  top: 0;
  left: 50%;
  width: calc(100% - 232px);
  max-width: 1496px;
  z-index: 100;
  padding: 8px 0 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(0);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-shell.is-hidden {
  transform: translateX(-50%) translateY(calc(-100% - 8px));
}

header {
  pointer-events: all;
  background: var(--color-white);
  border-radius: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.header-main-row {
  height: 72px;
  /* 3-column grid: logo | nav | cta – nav centred in middle col */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 12px 0 36px;
}

/* Mobile-only elements hidden on desktop */
.mob-menu-btn  { display: none; }
.mob-menu-panel { display: none; }

.logo-img {
  /* SVG viewBox 56 × 20 — fix width at 56 px (natural unit width), height scales auto */
  width: 56px;
  height: auto;
  display: block;
  flex-shrink: 0;
}

nav {
  display: flex;
  align-items: center;
  /* Figma link gap: links at 608, 794, 992.5, 1188 px (canvas).
     Δ between starts ≈ 186–199 px at 15 px font ≈ ~100–120 px wide each,
     so gap ≈ 70–80 px.  Using 72 px feels right. */
  gap: clamp(28px, 4.17vw, 72px);
}

nav a {
  font-weight: 500;
  font-size: 15px;
  line-height: 32px;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease;
  border-radius: 4px;
  outline: 2px solid transparent;
  outline-offset: 4px;
  transition: color 0.18s ease, outline-color 0.18s ease;
}
nav a:hover { color: #1d7c80; }
nav a:focus-visible {
  outline-color: var(--color-accent);
  color: var(--color-accent);
}

.header-cta {
  display: flex;
  justify-content: flex-end;
}

.btn-contact {
  display: inline-flex;
  align-items: center;
  background: var(--color-primary);
  color: #f7f7f7;
  border: none;
  border-radius: 16px;
  /* Figma: pt-12 pr-26 pb-12 pl-25 */
  padding: 12px 26px 12px 25px;
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
  white-space: nowrap;
  outline: 3px solid transparent;
  outline-offset: 2px;
  transition: background 0.22s ease, color 0.22s ease, outline-color 0.22s ease;
}
.btn-contact:hover { background: #08373a; color: #f9fa8d; }
.btn-contact:focus-visible {
  outline-color: var(--color-highlight);
}


/* ══════════════════════════════════════════════════════════
   HERO
   – Canvas coords: title top 234 px, subtitle top 402 px, CTA top 530 px
   – Header bottom = 8 + 72 = 80 px → padding-top = 234 − 80 = 154 px
   – Subtitle: margin-top = 402 − 234 − title_height
       title height ≈ 2 lines × 72 px line-height = 144 px → gap = 24 px
   – CTA: margin-top = 530 − 402 − subtitle_height
       subtitle ≈ 3 lines × 32 px = 96 px → gap = 32 px
   – Hock image top = 706 px, CTA bottom ≈ 586 px → padding-bottom = 120 px
══════════════════════════════════════════════════════════ */
.hero {
  padding: 234px 6.713% 120px;
  text-align: center;
}

.hero-headline {
  font-weight: 400;
  font-size: clamp(36px, 4.167vw, 72px);
  /* Figma: leading-[72px] on both lines */
  line-height: clamp(40px, 4.167vw, 72px);
  color: var(--color-primary-alt);
  /* Figma title width: 670 px */
  max-width: min(670px, 90%);
  margin: 0 auto;
}

.hero-headline .primary-care {
  font-family: 'Oceanic', sans-serif;
  font-weight: 400;
  /* Figma: 74 px */
  font-size: clamp(37px, 4.282vw, 74px);
  color: #1d7c80;
}

.hero-sub {
  margin: 24px auto 32px;
  max-width: min(617px, 88%);
  font-weight: 300;
  font-size: clamp(15px, 1.157vw, 20px);
  line-height: 32px;
  color: var(--color-primary-alt);
  opacity: 0.8;
}

.btn-demo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-primary-alt);
  color: #f7f7f7;
  border: none;
  border-radius: 16px;
  height: 56px;
  /* Figma: pt 15, pr 23, pb 17, pl 24 */
  padding: 15px 23px 17px 24px;
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
  outline: 3px solid transparent;
  outline-offset: 2px;
  transition: background 0.22s ease, color 0.22s ease, outline-color 0.22s ease;
}
.btn-demo:hover {
  background: #08373a;
  color: #f9fa8d;
}
.btn-demo:hover .arrow path {
  stroke: #f9fa8d;
}
.btn-demo:focus-visible {
  outline-color: var(--color-highlight);
}
/* Arrow icon — slide-out-right / slide-in-from-left on hover */
.btn-demo-icon {
  position: relative;
  width: 13px;
  height: 12px;
  overflow: hidden;
  flex-shrink: 0;
  display: block;
}

.btn-demo-arrow {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Clone starts off to the left, invisible */
.btn-demo-arrow--in {
  transform: translateX(-130%);
  opacity: 0;
}

/* On hover: original exits right + fades out, clone enters + fades in */
.btn-demo:hover .btn-demo-arrow--out {
  transform: translateX(130%);
  opacity: 0;
}
.btn-demo:hover .btn-demo-arrow--in {
  transform: translateX(0);
  opacity: 1;
}


/* ══════════════════════════════════════════════════════════
   HOCK BLOCK  (hero image + text overlay + demo card)
   Canvas: left 117, top 706, width 1496, height 821 px

   TEXT OVERLAY – exact positions converted to % of image dims:
     left  84/1496 = 5.615 %
     top  548/821  = 66.747 %   (line-1 top from image top)
     line-height = 76/64 = 1.1875 em  (matches 76 px gap at 64 px font)

   DEMO CARD – exact positions:
     card left  1160 px → from img left: 1043/1496 = 69.719 %
     card top   1205 px → from img top:  499/821  = 60.779 %
     card right 1528 px → from img right: 85/1496 = 5.682 %  ← used
     card bot   1453 px → from img bot:   74/821  = 9.013 %  ← used
     card size  368 × 248 px → width 368/1496 = 24.599 %

   DEMO CTA within card:
     right  17/368  = 4.620 %
     bottom 16/248  = 6.452 %
     width  208/368 = 56.522 %
     aspect 208/60  = 3.4667

   GRADIENT: linear-gradient(to top, #052c2e 7.779%, transparent 75.297%)
══════════════════════════════════════════════════════════ */
.hock {
  padding: 0 6.713%;
}

.hock-frame {
  position: relative;
  /* 1496 × 821 */
  aspect-ratio: 1496 / 821;
  border-radius: 24px;
  overflow: hidden;
  background: var(--color-primary-alt);
}

.hock-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Three-line text overlay */
.hock-text {
  position: absolute;
  bottom: 72px;
  left: 5.615%;   /* 84/1496 */
}

.hock-text p {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  /* Figma: 64 px at 1728 px ref */
  font-size: clamp(22px, 3.704vw, 64px);
  /* line-height = 76/64 ensures 76 px gap between tops at 64 px font */
  line-height: 1.1875;
  color: var(--color-white);
  white-space: nowrap;
}

/* Oceanic accent (Zero, 24/7.) */
.hock-text .oc {
  font-family: 'Oceanic', sans-serif;
  color: #f9fa8d;
}

/* Demo card */
.demo-card {
  position: absolute;
  /* Exact from-image-edge measurements */
  right: 5.682%;    /* 85/1496 */
  bottom: 9.013%;   /* 74/821  */
  width: 24.599%;   /* 368/1496 */
  /* height governed by aspect-ratio so card always stays proportional */
  aspect-ratio: 368 / 248;
  border-radius: 23px;
  overflow: hidden;
}

/* Image fills the full card — border-radius + overflow:hidden clips the corners */
.demo-img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* "Watch the demo" — real iOS glass CTA pill
   Layers (bottom → top):
   1. backdrop-filter  : blur + vibrancy (the frosted glass engine)
   2. base tint        : semi-transparent warm dark fill
   3. specular sheen   : subtle top-to-transparent gradient (light hitting glass)
   4. border           : bright top edge  /  dim sides & bottom (specular rim)
   5. box-shadow       : outer depth  +  inner inset highlight/shadow
   6. ::before         : SVG fractalNoise grain (frosted-glass tactility)
*/
.demo-cta {
  position: absolute;
  right: 4.620%;    /* 17/368 */
  bottom: 6.855%;   /* 17/248 — equal px to right */
  width: 58.522%;
  aspect-ratio: 208 / 60;

  /* Layered glass background:
     – top: specular sheen fades to transparent at 45 %
     – base: warm dark tint, low opacity so blur bleeds through  */
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.13)  0%,
      rgba(255, 255, 255, 0.04) 40%,
      rgba(255, 255, 255, 0.00) 100%
    ),
    rgba(16, 11, 4, 0.52);

  /* iOS glass engine: strong blur + vibrancy (saturate) */
  backdrop-filter: blur(22px) saturate(180%) brightness(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(180%) brightness(1.08);

  /* Single hairline border — uniform, smooth at every corner */
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;

  /* Depth stack:
     outer ambient + soft drop  /  inner top highlight  /  inner bottom crease */
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.30),
    0 1px  6px rgba(0, 0, 0, 0.18),
    inset 0  1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0,   0,   0,   0.18);

  display: flex;
  align-items: center;
  gap: 5.288%;
  padding: 0 4.808%;
  cursor: pointer;

  /* reset browser button defaults */
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;

  /* stacking context so ::before can go under flex content */
  isolation: isolate;

  transition:
    background   0.22s ease,
    box-shadow   0.22s ease,
    transform    0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Frosted grain — SVG fractalNoise at low opacity gives frosted-glass tactility */
.demo-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.040;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.demo-cta:hover {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.17)  0%,
      rgba(255, 255, 255, 0.06) 40%,
      rgba(255, 255, 255, 0.00) 100%
    ),
    rgba(20, 14, 5, 0.50);
  box-shadow:
    0 6px 28px rgba(0, 0, 0, 0.34),
    0 2px  8px rgba(0, 0, 0, 0.22),
    inset 0  1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(0,   0,   0,   0.16);
}

.demo-cta:active {
  transform: scale(0.965);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.07)  0%,
      rgba(255, 255, 255, 0.02) 40%,
      rgba(255, 255, 255, 0.00) 100%
    ),
    rgba(12, 8, 2, 0.60);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.26),
    0 1px  4px rgba(0, 0, 0, 0.16),
    inset 0  1px 0 rgba(255, 255, 255, 0.10),
    inset 0  2px 5px rgba(0, 0, 0, 0.22);
  transition:
    transform    0.08s ease,
    background   0.10s ease,
    box-shadow   0.10s ease;
}

/* Play icon — fills close to the full inner height of the pill */
.demo-cta .play-icon {
  /* 32/208 = 15.385 % of pill width ≈ full inner height at 208×60 ratio */
  width: 15.385%;
  aspect-ratio: 1;
  display: block;
  flex-shrink: 0;
}

.demo-cta span {
  font-weight: 500;
  font-size: clamp(10px, 1.042vw, 18px);
  color: #f9fa8d;
  white-space: nowrap;
  letter-spacing: 0.01em;
}


/* ══════════════════════════════════════════════════════════
   STATS SECTION
   Canvas: section content top 1543 px, height 380 px
   Dark panel: 1535 px wide (bleeds 20 px left, 19 px right of content)

   All positions as % of content width (1496 px) and section height (380 px):

   Description:  left 88/1496=5.882%,  top 143/380=37.632%,  w 428/1496=28.610%
   Divider 1:    left 660/1496=44.118%, top 143/380=37.632%,  h 106/380=27.895%
   Stat-1 num:   left 700/1496=46.791%, top 126/380=33.158%
   Stat-1 lbl:   left 700/1496=46.791%, top 202/380=53.158%  (126+72+4=202)
   Divider 2:    left 1068/1496=71.390%,top 143/380=37.632%,  h 106/380=27.895%
   Stat-2 num:   left 1108/1496=74.064%,top 126/380=33.158%
   Stat-2 lbl:   left 1108/1496=74.064%,top 202/380=53.158%

   Height of stats panel: 380 px at 1728 px ref = 22.0 vw  (380/1728)
══════════════════════════════════════════════════════════ */
.stats-outer {
  padding: 16px 6.713% 0;
}

.stats-panel {
  position: relative;
  /* scales proportionally: 380/1728 ≈ 22.0 vw */
  height: clamp(240px, 22.0vw, 380px);
  /* green-stats-bg.jpg IS the background – teal gradient with glow */
  background: url('../Assets/green-stats-bg.jpg') center / cover no-repeat;
  border-radius: 24px;
  overflow: hidden;
}

/* ── Description text ── */
.stats-desc {
  position: absolute;
  left: 5.882%;    /* 88/1496  */
  top: 37.632%;    /* 143/380  */
  width: 28.610%;  /* 428/1496 */
  font-weight: 300;
  font-size: clamp(13px, 1.389vw, 24px);
  /* Figma: 32 px line-height; scale to 1.333 em for proportional rendering */
  line-height: 1.333;
  color: var(--color-white);
}

/* ── Vertical dividers ── */
.stats-div {
  position: absolute;
  top: 37.632%;     /* 143/380  */
  width: 1px;
  height: 27.895%;  /* 106/380  */
  background: rgba(255, 255, 255, 0.25);
}
.stats-div-1 { left: 44.118%; }  /* 660/1496 */
.stats-div-2 { left: 71.390%; }  /* 1068/1496 */

/* ── Stat items ── */
.stat-num {
  position: absolute;
  top: 33.158%;    /* 126/380  */
  font-weight: 500;
  font-size: clamp(22px, 3.241vw, 56px);
  line-height: clamp(36px, 4.167vw, 72px);
  color: var(--color-white);
  white-space: nowrap;
}
.stat-lbl {
  position: absolute;
  top: 53.158%;    /* 202/380  */
  font-weight: 400;
  font-size: clamp(11px, 1.157vw, 20px);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.70);
  max-width: 153px;
}

/* Stat 1 – "7-14 min" */
.stat-1-num { left: 46.791%; }   /* 700/1496 */
.stat-1-lbl { left: 46.791%; }

/* Stat 2 – "$400k+" */
.stat-2-num { left: 74.064%; }   /* 1108/1496 */
.stat-2-lbl { left: 74.064%; }

/* stat-item and row wrappers are transparent at desktop — only used on mobile */
.stat-item { display: contents; }
.stats-row-mobile { display: contents; }


/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

/* ── Tablet (≤1024px) ─────────────────────────────────── */
@media (max-width: 1024px) {

  /* ── Header (mobile: hamburger replaces nav) ── */
  .header-shell { width: calc(100% - 32px); padding: 12px 0 0; }

  header { border-radius: 24px; }

  .header-main-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    padding: 0 12px 0 20px;
    grid-template-columns: unset;
  }

  nav         { display: none; }
  .header-cta { display: none; }

  .mob-menu-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 49px;
    height: 48px;
    background: var(--color-bg-light);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color 0.2s;
  }

  .mob-menu-btn:focus-visible {
    outline-color: var(--color-accent);
  }

  .mob-bar {
    display: block;
    width: 19px;
    height: 2px;
    background: var(--color-primary);
    border-radius: 40px;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity   0.25s ease;
  }

  header.is-open .mob-bar:nth-child(1) { transform: translateY(7px)  rotate(45deg); }
  header.is-open .mob-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
  header.is-open .mob-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mob-menu-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    max-height: 0;
    padding: 0 24px;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                padding    0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  header.is-open .mob-menu-panel {
    max-height: 400px;
    padding: 8px 24px 20px;
  }

  .mob-nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    background: var(--color-bg-light);
    border-radius: 16px;
    font-family: 'Geist', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 32px;
    color: var(--color-primary);
    text-decoration: none;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: background 0.18s ease, outline-color 0.2s;
  }
  .mob-nav-item:hover,
  .mob-nav-item:active { background: #e8e8e8; }
  .mob-nav-item:focus-visible {
    outline-color: var(--color-accent);
    background: #e8e8e8;
  }

  .mob-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    width: 100%;
    margin-top: 12px;
    background: var(--color-primary);
    color: #f7f7f7;
    border: none;
    border-radius: 16px;
    font-family: 'Geist', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: background 0.22s ease, outline-color 0.2s;
  }
  .mob-contact:hover { background: #08373a; }
  .mob-contact:focus-visible {
    outline-color: var(--color-highlight);
  }

  .hock-text p { white-space: normal; }
}

/* ── Mobile (≤768px) ──────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Hero ── */
  .hero {
    padding: 180px 6% 72px;
    text-align: center;
  }

  .hero-headline {
    font-size: clamp(36px, 6vw, 60px);
    line-height: clamp(40px, 6.5vw, 64px);
  }

  .hero-headline .primary-care {
    font-size: clamp(38px, 6.3vw, 62px);
  }

  .hero-sub {
    font-size: clamp(16px, 2.5vw, 20px);
    line-height: 28px;
    margin: 20px auto 28px;
  }

  /* ── Hock: standalone layout — no photo, text + demo card stacked ── */
  .hock { padding: 0 4%; }

  .hock-frame {
    aspect-ratio: unset;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 32px);
  }

  .hock-photo { display: none; }

  .hock-text {
    position: static;
    bottom: auto;
    left: auto;
    padding: 0 2%;
  }

  .hock-text p {
    color: var(--color-primary-alt);
    font-size: clamp(28px, 4.5vw, 40px);
    line-height: 1.35;
    white-space: normal;
  }

  .hock-text .oc { color: #1d7c80; }

  .demo-card {
    display: block;
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    aspect-ratio: 370 / 248;
    border-radius: 20px;
  }

  /* Demo CTA — fixed Figma size, works across all portable widths */
  .demo-cta {
    width: 208px;
    height: 60px;
    aspect-ratio: unset;
    border-radius: 16px;
    right: 17px;
    bottom: 16px;
    padding: 0 17px 0 14px;
    gap: 12px;
  }

  .demo-cta span { font-size: 18px; }

  .demo-cta .play-icon { width: 32px; }

  /* ── Stats ── */
  .stats-outer { padding: 12px 4% 40px; }

  .stats-panel {
    height: auto;
    padding: 32px 6% 36px;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  /* Override absolute positioning — panel becomes a flex column */
  .stats-desc,
  .stats-div,
  .stats-row-mobile,
  .stat-item,
  .stat-num,
  .stat-lbl {
    position: static;
    left: auto;
    top: auto;
    width: auto;
  }

  .stats-desc {
    font-size: clamp(14px, 3.5vw, 18px);
    max-width: 100%;
  }

  /* Vertical dividers hidden; no bottom line */
  .stats-div         { display: none; }
  .stats-panel::after { display: none; }

  /* Row wrapper becomes an actual flex row */
  .stats-row-mobile {
    display: flex;
    gap: 48px;
  }

  /* Each stat item stacks num above label, left border accent */
  .stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-left: 1.5px solid rgba(255, 255, 255, 0.3);
    padding-left: 20px;
  }

  .stat-num {
    font-size: clamp(24px, 6.5vw, 48px);
    line-height: 1.15;
    white-space: nowrap;
  }

  .stat-lbl {
    font-size: clamp(12px, 2.8vw, 16px);
    line-height: 1.4;
    max-width: none;
  }
}

/* ── Small mobile (≤480px) ─────────────────────────────── */
@media (max-width: 480px) {

  /* ── Hero — pixel-perfect Figma overrides (402 px ref) ── */
  .hero {
    padding: 180px 6% 72px;
    text-align: center;
  }

  .hero-headline {
    font-size: 40px;
    line-height: 1.1;
  }

  .hero-headline .primary-care {
    font-size: 42px;
  }

  .hero-sub {
    font-size: 18px;
    line-height: 28px;
    margin: 20px auto 28px;
    max-width: 370px;
  }

  .btn-demo {
    height: 56px;
    font-size: 16px;
    padding: 15px 24px 15px 28px;
  }

  /* ── Hock — gap override ── */
  .hock-frame { gap: 24px; }

  /* ── Stats ── */
  .stats-outer { padding: 16px 4% 40px; }

  .stats-panel {
    padding: 32px 8% 36px;
    border-radius: 24px;
    background: var(--color-primary-alt);   /* solid colour — no bg image on mobile */
  }

  .stats-panel::after { display: none; } /* remove the bottom divider line */

  .stats-desc {
    font-size: 20px;
    line-height: 28px;
  }

  /* Stack stats vertically */
  .stats-row-mobile {
    flex-direction: column;
    gap: 28px;
  }

  /* Left border accent line per stat */
  .stat-item {
    border-left: 1.5px solid rgba(255,255,255,0.3);
    padding-left: 20px;
  }

  .stat-num {
    font-size: 56px;
    line-height: 1.1;
  }

  .stat-lbl {
    font-size: 20px;
    opacity: 0.7;
  }
}


/* ══════════════════════════════════════════════════════════
   CLINICAL INTELLIGENCE SECTION
   Reference canvas: 1728 px
   Side margins: 204 px = 11.806 %  (cards are inset further than hero/stats)
   Card width: 1320 px
   Card height: 644 px = 37.27 vw
   Grid split: 552 px left (41.818%) | 752 px right (1fr)
   Right panel inset: 16 px on all sides except card-left edge
   Card gap: 40 px
══════════════════════════════════════════════════════════ */
.ci-section {
  padding: 200px 0 220px;
}

/* ── Title area ────────────────────────────────────────── */
.ci-title-area {
  padding: 0 6.713%;
  text-align: center;
  /* subtitle bottom → first card = 88 px at reference */
  margin-bottom: clamp(48px, 5.093vw, 88px);
}

.ci-label {
  font-weight: 500;
  font-size: 13px;
  line-height: 32px;
  letter-spacing: 3px;
  color: var(--color-primary);
  opacity: 0.6;
  text-transform: uppercase;
  /* label bottom → headline top: 268 − 252 = 16 px */
  margin-bottom: 16px;
}

.ci-headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  /* headline bottom → subtitle top: 454 − 428 = 26 px */
  margin-bottom: 26px;
}

.ci-hl-oceanic {
  font-family: 'Oceanic', sans-serif;
  font-weight: 400;
  font-size: clamp(32px, 3.935vw, 68px);
  line-height: clamp(40px, 4.630vw, 80px);
  color: #1d7c80;
}

.ci-hl-regular {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 3.704vw, 64px);
  line-height: clamp(36px, 4.630vw, 80px);
  color: var(--color-primary);
}

.ci-subtitle {
  font-weight: 300;
  font-size: clamp(15px, 1.157vw, 20px);
  line-height: 1.6;
  color: var(--color-primary);
  max-width: min(714px, 88%);
  margin: 0 auto;
}

/* ── Cards container ───────────────────────────────────── */
.ci-cards {
  padding: 0 11.806%;  /* 204/1728 */
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 5.787vw, 100px);
}

/* ── Single card ───────────────────────────────────────── */
.ci-card {
  background: var(--color-white);
  border-radius: 32px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  height: clamp(420px, 37.27vw, 644px);
  display: grid;
  grid-template-columns: 41.818% 1fr;  /* 552/1320 | rest */
  overflow: hidden;
  position: sticky;
}

/* Card 1 – anchors first; cards 2 & 3 stack 10 px lower each */
.ci-card:nth-child(1) { top: 90px;  z-index: 1; }
.ci-card:nth-child(2) { top: 110px; z-index: 2; }
.ci-card:nth-child(3) { top: 130px; z-index: 3; }

/* ── Card left – text content ──────────────────────────── */
.ci-card-left {
  padding: clamp(28px, 2.778vw, 48px) 32px clamp(28px, 2.778vw, 48px) clamp(28px, 2.778vw, 48px);
  display: flex;
  flex-direction: column;
}

/* Icon sits at the top */
.ci-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
}

.ci-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Save icon: "notes being written" loop animation ── */
.ci-save-icon {
  display: block;
}

@keyframes ci-icon-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-3px); }
}

.ci-save-line1,
.ci-save-line2 {
  stroke-dasharray: 7.72;
  stroke-dashoffset: 7.72;
}

.ci-save-line1 {
  animation: ci-line-write 1.86s ease-in-out infinite;
}

.ci-save-line2 {
  animation: ci-line-write 1.86s ease-in-out infinite 0.2s;
}

@keyframes ci-line-write {
  0%   { stroke-dashoffset: 7.72; opacity: 1; }
  13%  { stroke-dashoffset: 0;    opacity: 1; }
  63%  { stroke-dashoffset: 0;    opacity: 1; }
  76%  { stroke-dashoffset: 0;    opacity: 0; }
  77%  { stroke-dashoffset: 7.72; opacity: 0; }
  100% { stroke-dashoffset: 7.72; opacity: 0; }
}

/* ── Routine icon sequence (4.5s cycle) ──────────────────────
   0  – 28%  (0    – 1.26s): arc draws
   28 – 37%  (1.26 – 1.67s): arrowhead draws
   37 – 43%  (1.67 – 1.94s): card fades in
   43 – 50%  (1.94 – 2.25s): line 1 draws
   50 – 57%  (2.25 – 2.57s): line 2 draws
   57 – 65%  (2.57 – 2.93s): hold all visible
   76 – 84%  (3.42 – 3.78s): arc + arrow fade out
   84 – 99%  (3.78 – 4.46s): card + lines fade out
   99 – 100% (4.46 – 4.50s): reset dashoffsets, loop immediately     */

.ci-routine-icon {
  display: block;
}

/* Arc: draws, holds, fades out, immediately resets and draws again */
.ci-routine-arc {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: ci-routine-arc-seq 2.835s ease-in-out infinite;
}

@keyframes ci-routine-arc-seq {
  0%   { stroke-dashoffset: 48; opacity: 1; }  /* draw starts   */
  33%  { stroke-dashoffset: 0;  opacity: 1; }  /* draw done     */
  76%  { stroke-dashoffset: 0;  opacity: 1; }  /* hold          */
  84%  { stroke-dashoffset: 0;  opacity: 0; }  /* fade out      */
  85%  { stroke-dashoffset: 48; opacity: 0; }  /* reset, hidden */
  100% { stroke-dashoffset: 48; opacity: 0; }
}

/* Arrowhead: draws after arc, fades out, stays hidden during second draw */
.ci-routine-arrow {
  stroke-dasharray: 12;
  stroke-dashoffset: 12;
  animation: ci-routine-arrow-seq 2.835s ease-in-out infinite;
}

@keyframes ci-routine-arrow-seq {
  0%   { stroke-dashoffset: 12; opacity: 0; }  /* hidden             */
  33%  { stroke-dashoffset: 12; opacity: 0; }  /* wait for arc       */
  44%  { stroke-dashoffset: 0;  opacity: 1; }  /* draw done          */
  76%  { stroke-dashoffset: 0;  opacity: 1; }  /* hold               */
  84%  { stroke-dashoffset: 0;  opacity: 0; }  /* fade out           */
  85%  { stroke-dashoffset: 12; opacity: 0; }  /* reset, stay hidden */
  100% { stroke-dashoffset: 12; opacity: 0; }
}

/* Card: fades in after arrowhead, fades out while arc redraws */
.ci-routine-card {
  opacity: 0;
  animation: ci-routine-card-seq 2.835s ease-in-out infinite;
}

@keyframes ci-routine-card-seq {
  0%   { opacity: 0; }
  44%  { opacity: 0; }
  51%  { opacity: 1; }
  76%  { opacity: 1; }
  99%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Lines: draw one after another, fade out while arc redraws */
.ci-routine-line1 {
  stroke-dasharray: 4.4;
  stroke-dashoffset: 4.4;
  animation: ci-routine-line1-seq 2.835s ease-in-out infinite;
}

.ci-routine-line2 {
  stroke-dasharray: 7.4;
  stroke-dashoffset: 7.4;
  animation: ci-routine-line2-seq 2.835s ease-in-out infinite;
}

@keyframes ci-routine-line1-seq {
  0%   { stroke-dashoffset: 4.4; opacity: 0; }
  51%  { stroke-dashoffset: 4.4; opacity: 0; }
  59%  { stroke-dashoffset: 0;   opacity: 1; }
  76%  { stroke-dashoffset: 0;   opacity: 1; }
  99%  { stroke-dashoffset: 0;   opacity: 0; }
  100% { stroke-dashoffset: 4.4; opacity: 0; }
}

@keyframes ci-routine-line2-seq {
  0%   { stroke-dashoffset: 7.4; opacity: 0; }
  59%  { stroke-dashoffset: 7.4; opacity: 0; }
  67%  { stroke-dashoffset: 0;   opacity: 1; }
  76%  { stroke-dashoffset: 0;   opacity: 1; }
  99%  { stroke-dashoffset: 0;   opacity: 0; }
  100% { stroke-dashoffset: 7.4; opacity: 0; }
}

/* ── Escalation icon: bump → circle CCW → diagonal up → arms ── */

/* Total cycle: 5s
   0  –  10% ( 0   – 0.5s): dot bump + ping ring
   10 –  38% ( 0.5 – 1.9s): circle draws counterclockwise
   38 –  52% ( 1.9 – 2.6s): diagonal draws bottom-left → top-right
   52 –  60% ( 2.6 – 3.0s): arms spread from arrowhead tip
   60 –  87% ( 3.0 – 4.35s): hold
   87 –  95% ( 4.35– 4.75s): fade out
   95 – 100% ( 4.75– 5.0s): hidden / reset                         */

.ci-esc-icon {
  display: block;
}

/* Dot: bump at start, stay visible, fade at end */
.ci-esc-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: ci-esc-dot-bump 3.15s ease-in-out infinite;
}

@keyframes ci-esc-dot-bump {
  0%   { transform: scale(1);    opacity: 1; }
  5%   { transform: scale(1.45); opacity: 1; }
  10%  { transform: scale(1);    opacity: 1; }
  87%  { transform: scale(1);    opacity: 1; }
  95%  { transform: scale(1);    opacity: 0; }
  100% { transform: scale(1);    opacity: 0; }
}

/* Ping ring: expands outward on the bump, then stays gone */
.ci-esc-ping {
  transform-box: fill-box;
  transform-origin: center;
  animation: ci-esc-ping-ring 3.15s ease-out infinite;
}

@keyframes ci-esc-ping-ring {
  0%   { transform: scale(1);   opacity: 0.65; }
  10%  { transform: scale(2.6); opacity: 0;    }
  11%  { transform: scale(1);   opacity: 0;    }
  100% { transform: scale(1);   opacity: 0;    }
}

/* Circle: waits for bump, then draws counterclockwise */
.ci-esc-circle-path {
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  animation: ci-esc-circle-draw 3.15s ease-in-out infinite;
}

@keyframes ci-esc-circle-draw {
  0%   { stroke-dashoffset: 70; opacity: 1; }
  10%  { stroke-dashoffset: 70; opacity: 1; }
  38%  { stroke-dashoffset: 0;  opacity: 1; }
  87%  { stroke-dashoffset: 0;  opacity: 1; }
  95%  { stroke-dashoffset: 0;  opacity: 0; }
  96%  { stroke-dashoffset: 70; opacity: 0; }
  100% { stroke-dashoffset: 70; opacity: 0; }
}

/* Diagonal: starts when circle finishes, draws from dot up to arrowhead tip */
.ci-esc-diag {
  stroke-dasharray: 21;
  stroke-dashoffset: 21;
  animation: ci-esc-diag-seq 3.15s ease-in-out infinite;
}

@keyframes ci-esc-diag-seq {
  0%   { stroke-dashoffset: 21; opacity: 1; }
  38%  { stroke-dashoffset: 21; opacity: 1; }
  52%  { stroke-dashoffset: 0;  opacity: 1; }
  87%  { stroke-dashoffset: 0;  opacity: 1; }
  95%  { stroke-dashoffset: 0;  opacity: 0; }
  96%  { stroke-dashoffset: 21; opacity: 0; }
  100% { stroke-dashoffset: 21; opacity: 0; }
}

/* Arms: spread from arrowhead tip once diagonal arrives */
.ci-esc-v,
.ci-esc-h {
  stroke-dasharray: 4.9;
  stroke-dashoffset: 4.9;
}

.ci-esc-v {
  animation: ci-esc-arm-seq 3.15s ease-out infinite;
}

.ci-esc-h {
  animation: ci-esc-arm-seq 3.15s ease-out infinite 0.05s;
}

@keyframes ci-esc-arm-seq {
  0%   { stroke-dashoffset: 4.9; opacity: 1; }
  52%  { stroke-dashoffset: 4.9; opacity: 1; }
  60%  { stroke-dashoffset: 0;   opacity: 1; }
  87%  { stroke-dashoffset: 0;   opacity: 1; }
  95%  { stroke-dashoffset: 0;   opacity: 0; }
  96%  { stroke-dashoffset: 4.9; opacity: 0; }
  100% { stroke-dashoffset: 4.9; opacity: 0; }
}


/* ── Patient icon: heart draw (CW) + heartbeat ───────────
   0  – 35%: heart draws clockwise
   35 – 60%: lub-dub heartbeat (two pulses)
   60 – 82%: hold visible
   82 – 92%: fade out
   92 – 100%: reset, loop immediately                      */

.pa-heart-path {
  stroke-dasharray: 72;
  stroke-dashoffset: 72;
  transform-box: fill-box;
  transform-origin: center;
  animation: pa-heart-seq 3s ease-in-out infinite;
}

@keyframes pa-heart-seq {
  0%   { stroke-dashoffset: 72; transform: scale(1);    opacity: 0.7; }
  35%  { stroke-dashoffset: 0;  transform: scale(1);    opacity: 0.7; } /* draw done    */
  42%  { stroke-dashoffset: 0;  transform: scale(1.15); opacity: 0.7; } /* lub peak     */
  47%  { stroke-dashoffset: 0;  transform: scale(0.93); opacity: 0.7; } /* rebound      */
  52%  { stroke-dashoffset: 0;  transform: scale(1.1);  opacity: 0.7; } /* dub peak     */
  60%  { stroke-dashoffset: 0;  transform: scale(1);    opacity: 0.7; } /* settle       */
  82%  { stroke-dashoffset: 0;  transform: scale(1);    opacity: 0.7; } /* hold         */
  92%  { stroke-dashoffset: 0;  transform: scale(1);    opacity: 0;   } /* fade out     */
  93%  { stroke-dashoffset: 72; transform: scale(1);    opacity: 0; } /* reset hidden */
  100% { stroke-dashoffset: 72; transform: scale(1);    opacity: 0; }

}

/* Text block pushed to bottom of card via auto top margin */
.ci-card-text {
  margin-top: auto;
  display: flex;
  flex-direction: column;
}

.ci-card-title {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 2.315vw, 40px);
  line-height: 1.2;
  color: var(--color-primary);
}

.ci-card-body {
  font-weight: 300;
  font-size: clamp(14px, 1.042vw, 18px);
  line-height: clamp(22px, 1.620vw, 28px);
  color: var(--color-primary);
  margin-top: clamp(10px, 0.926vw, 16px);
  max-width: 412px;
}

.ci-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  font-size: 13px;
  line-height: 24px;
  color: var(--color-primary);
  text-decoration: none;
  margin-top: clamp(16px, 2.315vw, 40px);
  transition: color 0.22s ease;
}
.ci-card-cta:hover { color: #1d7c80; }

.cta-arrow {
  display: block;
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ci-card-cta:hover .cta-arrow {
  transform: translateX(3px);
}

/* ── Card right – illustration panel ──────────────────── */
.ci-card-right {
  /* 16 px inset on top/right/bottom; card-left column handles the left edge */
  padding: 16px 16px 16px 0;
}

.ci-panel {
  background: #f5f5f5;
  border-radius: 18px;
  height: 100%;
  overflow: hidden;
  position: relative;
}

/*
  PNGs are @3x exports of the illustration group only (no gray bg).
  CSS display size = PNG px ÷ 3.  All % are relative to .ci-panel (752 × 612 px at reference).

  save_tine  1589×1559 → 530×520 CSS px
    White card at canvas (917,683), panel origin (756,622)
    → panel-relative: left 161 px (21.41%), top 61 px (9.97%)
    → squiggle extends right to 686 px; group width 525 px ≈ 530 px @3x

  routine    1179×960  → 393×320 CSS px
    Patient list at canvas (937,1454), panel origin (756,1306)
    → panel-relative: left 181 px (24.07%), top 148 px (24.18%)

  escalation 1536×1053 → 512×351 CSS px
    Two groups at canvas (878,2130) & (1156,2130), panel origin (756,1990)
    → panel-relative: left 122 px (16.22%), top 140 px (22.88%)
    → combined span 508 px ≈ 512 px @3x; both groups centred (122 px L+R margin)
*/
.ci-illustration {
  position: absolute;
  display: block;
  height: auto;
}

/* Card 1 – save_tine */
.ci-card:nth-child(1) .ci-illustration {
  top:   9.97%;    /* 61 / 612  */
  left:  21.41%;   /* 161 / 752 */
  width: 70.48%;   /* 530 / 752 */
}

/* Card 2 – routine */
.ci-card:nth-child(2) .ci-illustration {
  top:   24.18%;   /* 148 / 612 */
  left:  24.07%;   /* 181 / 752 */
  width: 52.26%;   /* 393 / 752 */
}

/* Card 3 – escalation */
.ci-card:nth-child(3) .ci-illustration {
  top:   22.88%;   /* 140 / 612 */
  left:  16.22%;   /* 122 / 752 */
  width: 68.09%;   /* 512 / 752 */
}


/* ══════════════════════════════════════════════════════════
   CLINICAL INTELLIGENCE — RESPONSIVE
══════════════════════════════════════════════════════════ */

/* ── Tablet (≤1024px) ── */
@media (max-width: 1024px) {
  .ci-cards { padding: 0 6.713%; }
}

/* ── Mobile (≤768px) ── */
@media (max-width: 768px) {

  .ci-section { padding: 56px 0 72px; }

  .ci-title-area { margin-bottom: 48px; }

  .ci-label { margin-bottom: 16px; }

  .ci-hl-oceanic { font-size: clamp(32px, 5.5vw, 52px); line-height: 1.2; }
  .ci-hl-regular  { font-size: clamp(28px, 5vw,   48px); line-height: 1.2; }
  .ci-subtitle    { font-size: clamp(16px, 2.5vw,  20px); }

  .ci-cards {
    padding: 0 4%;
    gap: 16px;
  }

  .ci-card {
    grid-template-columns: 1fr;
    height: auto;
    border-radius: 24px;
  }

  /* Illustration panel: proportional height, no clipping */
  .ci-card-right {
    order: -1;
    padding: 16px 16px 0 16px;
    height: auto;
  }

  .ci-panel {
    border-radius: 14px;
    height: auto;
    padding: 28px 10%;
  }

  /* Illustrations flow naturally — no absolute positioning on mobile */
  .ci-card:nth-child(1) .ci-illustration,
  .ci-card:nth-child(2) .ci-illustration,
  .ci-card:nth-child(3) .ci-illustration {
    position: static;
    width: 100%;
    height: auto;
    object-fit: unset;
    object-position: unset;
    display: block;
  }

  .ci-card-left {
    padding: 24px 24px 28px;
  }

  /* Remove auto margin — text flows directly below icon */
  .ci-card-text { margin-top: 20px; }

  .ci-card-title { font-size: clamp(20px, 5vw, 32px); }

  .ci-card-cta { margin-top: 20px; }
}

/* ── Small mobile (≤480px) ── */
@media (max-width: 480px) {
  .ci-section { padding: 44px 0 120px; }
  .ci-cards { padding: 0 3%; gap: 12px; }
  .ci-card { border-radius: 20px; }
  .ci-card-right { height: auto; padding: 12px 12px 0 12px; }
  .ci-panel { padding: 20px 8%; }
  .ci-card-left { padding: 20px 20px 24px; }
}


/* ══════════════════════════════════════════════════════════
   PATIENT ACCESS & EXPERIENCE
   Reference canvas: 1728 px
   Side margins: 204 px = 11.806 %
   Main card: 1320 × 700 px
   Bottom cards: 640 × 437 px each, 40 px gap
   Left/right split: 552 / 768 px = 41.818 % / rest
══════════════════════════════════════════════════════════ */
.pa-section {
  position: relative;
  background: var(--color-primary-alt);
  /* top space 220 px at 1728 ref = 12.73 vw */
  padding: clamp(80px, 12.73vw, 220px) 0 clamp(100px, 12.85vw, 222px);
  overflow: hidden;
}

/* Gradient overlay – img tag fills the full section */
.pa-bg-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  z-index: 0;
}

/* Noise grain overlay */
.pa-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  background-repeat: repeat;
}

/* Floating flashlight overlay */
.pa-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: soft-light;
  background: radial-gradient(circle 800px at 50% 50%, rgba(255,255,255,0.45) 0%, transparent 70%);
}

/* Ensure inner content sits above the overlays */
.pa-inner { position: relative; z-index: 3; }

/* ── Title area ─────────────────────────────────────────── */
.pa-title-area {
  position: relative;
  text-align: center;
  padding: 0 6.713%;
  /* space from subtitle bottom to first card = 88 px at ref */
  margin-bottom: clamp(48px, 5.093vw, 88px);
}

.pa-label {
  font-weight: 500;
  font-size: 13px;
  line-height: 32px;
  letter-spacing: 3px;
  color: var(--color-white);
  opacity: 0.6;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.pa-headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* headline bottom → subtitle top ≈ 17 px */
  margin-bottom: 17px;
}

/* "Every patient gets " – yellow Oceanic */
.pa-hl-oceanic {
  font-family: 'Oceanic', sans-serif;
  font-weight: 400;
  font-size: clamp(36px, 3.935vw, 68px);
  line-height: clamp(44px, 4.514vw, 78px);
  color: #f9fa8d;
}

/* "a five star experience." – white Geist */
.pa-hl-regular {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 3.704vw, 64px);
  line-height: clamp(38px, 4.514vw, 78px);
  color: var(--color-white);
}

.pa-subtitle {
  font-weight: 300;
  font-size: clamp(15px, 1.157vw, 20px);
  line-height: 1.6;
  color: var(--color-white);
  opacity: 0.9;
  max-width: min(594px, 88%);
  margin: 0 auto;
}

/* ── Inner content container (mirrors .page) ────────────── */
.pa-inner {
  position: relative;
  max-width: 1728px;
  margin: 0 auto;
}

/* ── Cards wrapper ──────────────────────────────────────── */
.pa-cards {
  position: relative;
  padding: 0 11.806%;   /* 204 / 1728 */
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.315vw, 40px);
}

/* ── Main card ──────────────────────────────────────────── */
.pa-main-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 32px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  /* 700 / 1728 ≈ 40.51 vw */
  height: clamp(400px, 40.51vw, 700px);
  display: grid;
  grid-template-columns: 41.818% 1fr;   /* 552 / 1320 */
  overflow: hidden;
}

/* Left column – text */
.pa-main-left {
  padding: clamp(28px, 2.778vw, 48px);
  display: flex;
  flex-direction: column;
}

.pa-icon {
  width: 56px;
  height: 56px;
  display: block;
  flex-shrink: 0;
}

/* Text block floats to card bottom */
.pa-main-text {
  margin-top: auto;
  display: flex;
  flex-direction: column;
}

.pa-main-title {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 2.315vw, 40px);
  line-height: 1.2;
  color: var(--color-white);
}

.pa-main-body {
  font-weight: 300;
  font-size: clamp(14px, 1.042vw, 18px);
  line-height: clamp(22px, 1.620vw, 28px);
  color: var(--color-white);
  opacity: 0.8;
  margin-top: clamp(10px, 0.926vw, 16px);
  max-width: 454px;
}

.pa-main-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  font-size: 13px;
  line-height: 24px;
  color: var(--color-white);
  text-decoration: none;
  margin-top: clamp(16px, 2.315vw, 40px);
  transition: color 0.22s ease;
}
.pa-main-cta:hover { color: rgba(255, 255, 255, 0.6); }
.pa-main-cta:hover .cta-arrow { transform: translateX(3px); }

/* Right column – padded shell, mirrors ci-card-right */
.pa-main-right {
  padding: 16px 16px 16px 0;
}

/* Photo panel – inset rounded container */
.pa-photo-panel {
  position: relative;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
}

.pa-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* ── Chat bubbles (positioned inside .pa-photo-panel) ───── */
.pa-bubble {
  position: absolute;
  background: var(--color-white);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);
  padding: clamp(10px, 0.926vw, 16px) clamp(12px, 1.042vw, 18px);
  width: clamp(150px, 14.236vw, 220px);
}

/* Kelly: left-center of photo  (canvas: ~14 % from panel left, ~40 % from top) */
.pa-bubble-kelly {
  left: 6%;
  top: 40%;
  transform: translateY(-50%);
}

/* Jiva: right-of-center, below Kelly  (canvas: ~64 % from panel left, ~62 % from top) */
.pa-bubble-jiva {
  left: 55%;
  top: 64%;
  transform: translateY(-50%);
  width: clamp(170px, 16.088vw, 248px);
}

.pa-bubble-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.pa-bubble-row + .pa-bubble-msg { margin-top: 5px; }

.pa-bubble-row-tag { margin-top: 4px; }

.pa-bubble-name {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: clamp(10px, 0.810vw, 14px);
  color: var(--color-primary-alt);
}

.pa-bubble-time {
  font-weight: 300;
  font-size: clamp(7px, 0.556vw, 9.6px);
  color: var(--color-primary-alt);
  opacity: 0.5;
}

.pa-bubble-msg {
  font-weight: 300;
  font-size: clamp(9px, 0.810vw, 14px);
  line-height: 1.4;
  color: var(--color-primary-alt);
  margin-bottom: 6px;
}

.pa-bubble-tags { display: flex; flex-direction: column; }

.pa-meta-lbl {
  font-weight: 300;
  font-size: clamp(8px, 0.752vw, 13px);
  color: var(--color-primary-alt);
  opacity: 0.6;
  white-space: nowrap;
  flex-shrink: 0;
}

.pa-meta-lbl-sm { display: block; margin-bottom: 4px; }

.pa-bubble-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 5px;
  font-weight: 500;
  font-size: clamp(7px, 0.609vw, 10.5px);
  letter-spacing: 0.44px;
  text-transform: uppercase;
  white-space: nowrap;
}

.pa-tag-neutral  { background: #f5f5f5; color: var(--color-primary-alt); }
.pa-tag-urgent   { background: rgba(217, 45, 32, 0.15); color: #d92d20; }
.pa-tag-green    { background: #c9eddf; color: #359b5a; }

.pa-tone-row {
  display: flex;
  gap: 6px;
}

/* ── Bottom row ─────────────────────────────────────────── */
.pa-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.315vw, 40px);
}

/* ── Sub-cards ──────────────────────────────────────────── */
.pa-sub-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 32px;
  /* 437 / 1728 ≈ 25.29 vw */
  height: clamp(280px, 25.29vw, 437px);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.315vw, 40px);
}

/* Illustration floats in upper portion of card */
.pa-sub-illo {
  position: absolute;
  /* 58 / 437 ≈ 13.3 % from card top */
  top: 13.3%;
  left: 50%;
  transform: translateX(-50%);
  /* 441 / 640 ≈ 69 % of card width */
  width: 69%;
  pointer-events: none;
}

.pa-sub-illo img {
  width: 100%;
  height: auto;
  display: block;
}

/* Text anchored to card bottom */
.pa-sub-text {
  margin-top: auto;
}

.pa-sub-title {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 1.852vw, 32px);
  line-height: 1.25;
  color: var(--color-white);
}

.pa-sub-body {
  font-weight: 300;
  font-size: clamp(13px, 1.042vw, 18px);
  line-height: clamp(20px, 1.620vw, 28px);
  color: var(--color-white);
  opacity: 0.9;
  margin-top: clamp(8px, 0.694vw, 12px);
}


/* ══════════════════════════════════════════════════════════
   PATIENT ACCESS — RESPONSIVE
══════════════════════════════════════════════════════════ */

/* ── Tablet (≤1024px) ── */
@media (max-width: 1024px) {
  .pa-cards { padding: 0 6.713%; }

  .pa-bubble-kelly { left: 4%; }
  .pa-bubble-jiva  { left: 48%; }
}

/* ── Mobile (≤768px) ── */
@media (max-width: 768px) {

  .pa-section { padding: 56px 0 72px; }

  .pa-title-area { margin-bottom: 40px; }

  .pa-hl-oceanic { font-size: clamp(32px, 5.5vw, 52px); line-height: 1.2; }
  .pa-hl-regular  { font-size: clamp(28px, 5vw,   48px); line-height: 1.2; }
  .pa-subtitle    { font-size: clamp(16px, 2.5vw,  20px); }

  .pa-cards { padding: 0 4%; }

  /* Stack main card vertically */
  .pa-main-card {
    grid-template-columns: 1fr;
    height: auto;
    border-radius: 24px;
  }

  /* Photo panel: natural photo proportions, no clipping */
  .pa-main-right {
    order: -1;
    height: auto;
    padding: 12px 12px 0 12px;
  }

  .pa-photo-panel {
    height: auto;
    aspect-ratio: unset;
  }

  .pa-photo {
    position: static;
    width: 100%;
    height: auto;
    display: block;
    object-fit: unset;
    object-position: unset;
  }

  .pa-main-left { padding: 24px 24px 28px; }
  .pa-main-text { margin-top: 16px; }

  .pa-main-title { font-size: clamp(20px, 5vw, 32px); }
  .pa-main-cta   { margin-top: 20px; }

  /* Stack bottom cards */
  .pa-bottom-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Sub-card illustrations: static flow, no clipping */
  .pa-sub-card {
    height: auto;
    min-height: unset;
    border-radius: 24px;
  }

  .pa-sub-illo {
    position: static;
    width: 85%;
    left: auto;
    top: auto;
    transform: none;
    margin: 0 auto;
  }

  .pa-sub-text { margin-top: 20px; }
}

/* ── Small mobile (≤480px) ── */
@media (max-width: 480px) {
  .pa-section  { padding: 120px 0 120px; }
  .pa-cards    { padding: 0 3%; gap: 12px; }
  .pa-main-card  { border-radius: 20px; }
  .pa-photo-panel { height: auto; aspect-ratio: unset; }
  .pa-sub-card   { border-radius: 20px; min-height: unset; }
  .pa-sub-illo   { width: 90%; }
  .pa-main-left  { padding: 20px 20px 24px; }
}


/* ══════════════════════════════════════════════════════════
   SECURITY & COMPLIANCE
   Reference canvas: 1728 px
   Side margins: 116 px = 6.713 %
   Ticker: full-bleed at top, y = 100 px from section top
   Title: left-aligned, y = 342 px  →  220 px below ticker
   Cards: 3-col equal grid, 472 × 433 px, 40 px gap
   Text below cards: 41 px gap, title 32 px / body 18 px
══════════════════════════════════════════════════════════ */
.sc-section {
  /* top: 100 px ticker gap at 1728 ref = 5.787 vw */
  padding: clamp(40px, 5.787vw, 100px) 0 220px;
  overflow: hidden;
  background: var(--color-white);
}

/* ── Ticker ─────────────────────────────────────────────── */
.sc-ticker-wrap {
  overflow: hidden;
  /* 220 px gap from ticker bottom to title at ref */
  margin-bottom: clamp(80px, 12.73vw, 220px);
}

.sc-ticker-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: sc-scroll 36s linear infinite;
}

/* Half 1 and Half 2 are identical – animate exactly -50% */
@keyframes sc-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.sc-ticker-item {
  display: inline-flex;
  align-items: center;
  /* icon ↔ label gap: matches Figma 12 px between icon right and text left */
  gap: 10px;
  /* 20 px per side at 1728 px ref = 1.157 vw → 40 px between adjacent items */
  padding: 0 clamp(12px, 1.157vw, 20px);
  font-weight: 500;
  font-size: clamp(13px, 0.926vw, 16px);
  color: var(--color-primary);
  opacity: 0.7;
  white-space: nowrap;
}

/* Filled shield icon */
.sc-shield {
  width: 16px;
  height: 18px;
  flex-shrink: 0;
  display: block;
}

/* ── Inner content (mirrors .page centering) ────────────── */
.sc-inner {
  max-width: 1728px;
  margin: 0 auto;
  padding: 0 6.713%;   /* 116 / 1728 */
}

/* ── Title area ─────────────────────────────────────────── */
.sc-title-area {
  /* subtitle bottom → first card = 88 px at ref */
  margin-bottom: clamp(40px, 5.093vw, 88px);
}

.sc-label {
  font-weight: 500;
  font-size: 13px;
  line-height: 32px;
  letter-spacing: 3px;
  color: var(--color-primary);
  opacity: 0.6;
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* Left-aligned two-line headline */
.sc-headline {
  display: flex;
  flex-direction: column;
  margin-bottom: 26px;
}

.sc-hl-oceanic {
  font-family: 'Oceanic', sans-serif;
  font-weight: 400;
  font-size: clamp(36px, 3.935vw, 68px);
  line-height: clamp(44px, 4.630vw, 80px);
  color: #1d7c80;
}

.sc-hl-regular {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 3.704vw, 64px);
  line-height: clamp(38px, 4.630vw, 80px);
  color: var(--color-primary);
}

.sc-subtitle {
  font-weight: 300;
  font-size: clamp(15px, 1.157vw, 20px);
  line-height: 1.6;
  color: var(--color-primary);
  /* 945 / 1496 = 63.17 % of content at ref */
  max-width: min(945px, 100%);
}

/* ── Cards grid ─────────────────────────────────────────── */
.sc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2.315vw, 40px);
}

.sc-card {
  display: flex;
  flex-direction: column;
}

/* Illustration panel – full card area */
.sc-card-panel {
  background: #f0f0f0;
  border-radius: 32px;
  /* 433 / 1728 = 25.06 vw */
  height: clamp(240px, 25.06vw, 433px);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /*
    Figma offsets (card 472 × 433 px):
      sides  88 px = 88/1728 = 5.093 vw
      top    60 px avg = 60/1728 = 3.472 vw
  */
  padding: clamp(24px, 3.472vw, 60px) clamp(32px, 5.093vw, 88px) 0;
}

/* Cards 1 & 2: illustration centred vertically */
.sc-card:nth-child(1) .sc-card-panel,
.sc-card:nth-child(2) .sc-card-panel,
.sc-card:nth-child(3) .sc-card-panel {
  align-items: center;
  padding: clamp(24px, 3.472vw, 60px) clamp(32px, 5.093vw, 88px);
}

.sc-card-panel img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center top;
}

/* Text below panel */
.sc-card-text {
  /* 41 px gap from panel bottom at ref */
  padding-top: clamp(20px, 2.373vw, 41px);
  flex: 1;
}

.sc-card-title {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 1.852vw, 32px);
  line-height: clamp(24px, 2.315vw, 40px);
  color: var(--color-primary);
  margin-bottom: clamp(8px, 0.694vw, 12px);
}

.sc-card-body {
  font-weight: 300;
  font-size: clamp(13px, 1.042vw, 18px);
  line-height: clamp(20px, 1.620vw, 28px);
  color: var(--color-primary);
  opacity: 0.8;
}


/* ══════════════════════════════════════════════════════════
   SECURITY — RESPONSIVE
══════════════════════════════════════════════════════════ */

/* ── Tablet (≤1024px) ── */
@media (max-width: 1024px) {
  .sc-cards { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .sc-ticker-item { padding: 0 14px; }
}

/* ── Mobile (≤768px) ── */
@media (max-width: 768px) {
  .sc-section { padding: 40px 0 64px; }
  .sc-ticker-wrap { margin-bottom: 80px; }

  .sc-hl-oceanic { font-size: clamp(32px, 5.5vw, 52px); line-height: 1.2; }
  .sc-hl-regular  { font-size: clamp(28px, 5vw,   48px); line-height: 1.2; }
  .sc-subtitle    { font-size: clamp(16px, 2.5vw,  20px); }

  .sc-cards {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .sc-card-panel {
    border-radius: 24px;
    height: auto;
    padding: 28px 48px;
  }
}

/* ── Small mobile (≤480px) ── */
@media (max-width: 480px) {
  .sc-section { padding: 48px 0 88px; }
  .sc-card-panel { border-radius: 20px; height: auto; padding: 20px 36px; }
}


/* ══════════════════════════════════════════════════════════
   PROACTIVE CARE SECTION
   Reference canvas: 1728 px
   Side margins: 116 px = 6.713 %
   Stats: 3 cards, gap 36 px, card ~416 × 130 px
   Feature rows: illustration left 640 px, text right, gap 80 px
   Between feature rows: 88 px
══════════════════════════════════════════════════════════ */
.pc-section {
  background: var(--color-bg-light);
  padding: 200px 0 clamp(80px, 8.102vw, 140px);
}

.pc-inner {
  max-width: 1728px;
  margin: 0 auto;
  padding: 0 6.713%;
}

/* ── Header ─────────────────────────────────────────────── */
.pc-header {
  text-align: center;
  margin-bottom: clamp(56px, 8.333vw, 144px);
}

.pc-label {
  font-weight: 500;
  font-size: 13px;
  line-height: 32px;
  letter-spacing: 3px;
  color: var(--color-primary);
  opacity: 0.6;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.pc-headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-bottom: 26px;
}

.pc-hl-oceanic {
  font-family: 'Oceanic', sans-serif;
  font-weight: 400;
  font-size: clamp(32px, 3.935vw, 68px);
  line-height: clamp(40px, 4.630vw, 80px);
  color: #1d7c80;
}

.pc-hl-regular {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 3.704vw, 64px);
  line-height: clamp(36px, 4.630vw, 80px);
  color: var(--color-primary);
}

.pc-subtitle {
  font-weight: 300;
  font-size: clamp(15px, 1.157vw, 20px);
  line-height: 1.6;
  color: var(--color-primary);
  max-width: min(809px, 90%);
  margin: 0 auto;
}

/* ── Stats row ───────────────────────────────────────────── */
.pc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.083vw, 36px);
  margin-bottom: clamp(56px, 6.944vw, 120px);
}

.pc-stat-card {
  background: var(--color-white);
  border-radius: clamp(16px, 1.389vw, 24px);
  padding: clamp(20px, 1.852vw, 32px) clamp(24px, 2.315vw, 40px);
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.157vw, 20px);
  min-height: clamp(90px, 7.523vw, 130px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.pc-stat-num {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(32px, 3.241vw, 56px);
  line-height: 1;
  color: #1d7c80;
  white-space: nowrap;
  flex-shrink: 0;
}

.pc-stat-label {
  font-weight: 300;
  font-size: clamp(14px, 1.157vw, 20px);
  line-height: 1.5;
  color: var(--color-primary-alt);
  opacity: 0.7;
}

/* ── Feature rows ────────────────────────────────────────── */
.pc-features {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5.093vw, 88px);
}

.pc-feature-row {
  display: grid;
  grid-template-columns: 640px 1fr;
  gap: clamp(32px, 4.630vw, 80px);
  align-items: center;
}

.pc-feature-img-wrap {
  background: #ebebeb;
  border-radius: clamp(16px, 1.157vw, 20px);
  overflow: hidden;
  height: clamp(180px, 17.361vw, 300px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pc-feature-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pc-feature-text {
  max-width: 640px;
}

.pc-feature-title {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 1.852vw, 32px);
  line-height: 1.25;
  color: var(--color-primary);
  margin-bottom: clamp(12px, 0.926vw, 16px);
}

.pc-feature-body {
  font-weight: 300;
  font-size: clamp(15px, 1.042vw, 18px);
  line-height: 1.7;
  color: var(--color-primary);
  opacity: 0.8;
}

/* ── Proactive Care — responsive ────────────────────────── */
@media (max-width: 1024px) {
  .pc-stats { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .pc-feature-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .pc-section { padding: 64px 0 80px; }
  .pc-stats { grid-template-columns: 1fr; gap: 12px; }
  .pc-stat-card { min-height: 80px; }
  .pc-feature-row { grid-template-columns: 1fr; gap: 24px; }
  .pc-feature-img-wrap { height: auto; }
  .pc-feature-img-wrap img { width: 100%; height: auto; object-fit: unset; }
  .pc-hl-oceanic { font-size: clamp(32px, 5.5vw, 52px); line-height: 1.2; }
  .pc-hl-regular  { font-size: clamp(28px, 5vw,   48px); line-height: 1.2; }
  .pc-subtitle    { font-size: clamp(16px, 2.5vw,  20px); }
}

@media (max-width: 480px) {
  .pc-section { padding: 106px 0 64px; }
}


/* ══════════════════════════════════════════════════════════
   FOOTER BANNER
   Reference canvas: 1728 px
   Background: #052c2e + footer-bg.jpg overlay
   Title: 88 px (Geist white + Oceanic yellow)
   Subtitle: 24 px Geist Light, #f5feff, max-width 523 px
   CTA: 56 px height, #f9fa8d bg, border-radius 16 px
   Footer row: copyright left, links right
══════════════════════════════════════════════════════════ */
.fb-section {
  position: relative;
  background: var(--color-primary-alt);
  overflow: hidden;
  margin: 0 20px;
  border-radius: 32px;
}

/* Grain + flashlight */
.fb-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  background-repeat: repeat;
}

.fb-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: soft-light;
  background: radial-gradient(circle 800px at 50% 50%, rgba(255,255,255,0.45) 0%, transparent 70%);
}

.fb-bg-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
  opacity: 0.55;
}

.fb-inner {
  position: relative;
  z-index: 3;
  max-width: 1728px;
  margin: 0 auto;
  min-height: clamp(560px, 59.028vw, 1020px);
  display: flex;
  flex-direction: column;
  padding: 0 6.713% clamp(60px, 5.787vw, 100px);
}

.fb-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: clamp(80px, 17.071vw, 295px);
}

.fb-title {
  display: block;
  margin-bottom: 24px;
  line-height: 1.05;
}

.fb-title-white {
  display: block;
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(36px, 5.093vw, 88px);
  line-height: clamp(42px, 5.671vw, 98px);
  color: var(--color-white);
}

.fb-title-yellow {
  display: block;
  font-family: 'Oceanic', sans-serif;
  font-weight: 400;
  font-size: clamp(36px, 5.093vw, 88px);
  line-height: clamp(42px, 5.671vw, 98px);
  color: #f9fa8d;
}

.fb-subtitle {
  font-weight: 300;
  font-size: clamp(16px, 1.389vw, 24px);
  line-height: 1.6;
  color: #f5feff;
  max-width: min(523px, 90%);
  margin-bottom: clamp(28px, 2.778vw, 48px);
  opacity: 0.85;
}

.fb-cta {
  height: 56px;
  padding: 0 24px 0 28px;
  background: #f9fa8d;
  color: var(--color-primary-alt);
  border: none;
  border-radius: 16px;
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: clamp(15px, 1.042vw, 18px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background 0.22s ease, color 0.22s ease;
}

.fb-cta:hover { background: var(--color-white); color: var(--color-primary-alt); }

/* Arrow icon */
.fb-cta-icon {
  position: relative;
  width: 13px;
  height: 12px;
  overflow: hidden;
  flex-shrink: 0;
  display: block;
}

.fb-cta-arrow {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.fb-cta-arrow--in {
  transform: translateX(-130%);
  opacity: 0;
}

.fb-cta:hover .fb-cta-arrow--out {
  transform: translateX(130%);
  opacity: 0;
}
.fb-cta:hover .fb-cta-arrow--in {
  transform: translateX(0);
  opacity: 1;
}

/* ── Footer row (outside banner box) ────────────────────── */
.fb-footer-row {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(24px, 2vw, 40px) 20px;
  gap: 24px;
  flex-wrap: wrap;
}

.fb-copy {
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: 13px;
  color: var(--color-primary);
  opacity: 0.5;
}

.fb-links {
  display: flex;
  gap: clamp(16px, 1.852vw, 32px);
}

.fb-links a {
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: 13px;
  color: #000;
  text-decoration: none;
  border-radius: 4px;
  padding: 8px 4px;
  outline: 2px solid transparent;
  outline-offset: 4px;
  transition: color 0.2s, outline-color 0.2s;
}

.fb-links a:hover { color: #1D7C80; }
.fb-links a:focus-visible {
  outline-color: var(--color-accent);
  color: var(--color-accent);
}

/* ── Footer Banner — responsive ─────────────────────────── */
@media (max-width: 768px) {
  .fb-inner { padding-bottom: 40px; }
  .fb-footer-row { justify-content: center; flex-direction: column; text-align: center; gap: 16px; }
}

@media (max-width: 480px) {
  .fb-content { padding-top: 80px; }
  .fb-cta { height: 50px; font-size: 15px; }
}