/* ===========================================================================
 * Virtual PT Hawaii — Home v2 (Design #1 "Polished Direction B")
 * Standalone stylesheet for index.new.html. Does NOT touch styles.css.
 * Tokens + base classes ported from the design bundle's vpt-styles.css,
 * plus vanilla nav / mobile-menu / lightbox rules (no React).
 * Font: Inter, self-hosted via /css/typography.css (linked in the HTML).
 * ======================================================================== */

:root {
  --navy: #0A1F44;
  --navy-700: #142C5A;
  --navy-600: #1E3A6E;
  --navy-300: #6478A0;

  --sky: #00A8FF;
  --sky-700: #0085CC;
  --sky-500: #1FB6FF;
  --sky-100: #DCEFFF;
  --sky-50: #F0F8FF;

  --paper: #FFFFFF;
  --tint: #F4F8FC;
  --tint-2: #E6EFF8;
  --ink: #0E1626;
  --ink-2: #3A4459;
  --muted: #6B7689;
  --line: #E5EBF2;
  --line-2: #D5DDE8;

  --serif: 'Inter', system-ui, -apple-system, sans-serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --max: 1280px;
  --gutter: 32px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }

/* Anchor targets clear the sticky nav */
[id] { scroll-margin-top: 88px; }

/* Section */
.section { padding: 96px 0; border-top: 1px solid var(--line); }
.section.tight { padding: 64px 0; }
.section.loose { padding: 128px 0; }
.section.tint { background: var(--tint); }
.section.navy { background: var(--navy); color: #E6EAF2; }
.section.sky { background: var(--sky); color: #fff; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* Eyebrow */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sky-700);
}
.section.navy .eyebrow { color: var(--sky); }
.eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: 0.6; }

/* Headlines */
.display-1 {
  font-family: var(--serif);
  font-size: clamp(56px, 7.5vw, 104px);
  line-height: 0.96; letter-spacing: -0.035em; font-weight: 700;
  color: var(--navy); margin: 0;
}
.display-2 {
  font-family: var(--serif);
  font-size: clamp(44px, 5.2vw, 72px);
  line-height: 1.0; letter-spacing: -0.03em; font-weight: 700;
  color: var(--navy); margin: 0;
}
.display-3 {
  font-family: var(--serif);
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.05; letter-spacing: -0.02em; font-weight: 700;
  color: var(--navy); margin: 0;
}
.section.navy .display-1, .section.navy .display-2, .section.navy .display-3 { color: #fff; }
.section.sky .display-1, .section.sky .display-2, .section.sky .display-3 { color: #fff; }

.italic { font-style: normal; color: var(--sky-700); font-weight: 700; }
.section.navy .italic { color: var(--sky); }
.section.sky .italic { color: #fff; opacity: 0.85; }

.lede { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 56ch; margin: 0; }
.section.navy .lede { color: rgba(255,255,255,0.78); }
.section.sky .lede { color: rgba(255,255,255,0.92); }

p { margin: 0 0 1em; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 26px; border-radius: 999px;
  font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  border: 1.5px solid var(--navy); background: var(--navy); color: #fff;
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); background: var(--navy-700); }
.btn.ghost { background: transparent; color: var(--navy); }
.btn.ghost:hover { background: var(--navy); color: #fff; }
.btn.sky { background: var(--sky); border-color: var(--sky); color: #fff; }
.btn.sky:hover { background: var(--sky-700); border-color: var(--sky-700); }
.btn.light { background: #fff; color: var(--navy); border-color: #fff; }
.btn.light:hover { background: var(--tint); }
.btn.lg { padding: 20px 32px; font-size: 15px; }
.btn .arr { transition: transform .2s ease; }
.btn:hover .arr { transform: translateX(3px); }

/* Cards */
.card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
.card.flat { border-radius: 12px; padding: 24px; }
.card.dark { background: var(--navy); color: #fff; border-color: var(--navy); }
.card.tint-card { background: var(--tint); border-color: var(--line); }

/* Tag */
.tag {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-2);
}
.tag.sky { background: var(--sky-100); border-color: var(--sky-100); color: var(--sky-700); }
.tag.dark { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: #fff; }

/* Role badge */
.role-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--navy-300);
}
.role-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--navy-300); }
.role-badge.human { color: var(--sky-700); }
.role-badge.human::before { background: var(--sky); }
.section.navy .role-badge { color: rgba(255,255,255,0.65); }
.section.navy .role-badge.human { color: var(--sky); }

/* Misc */
.divider { height: 1px; background: var(--line); }
.text-muted { color: var(--muted); }
.text-center { text-align: center; }

/* Sticky side columns (Thesis, Insurance) — desktop only; on mobile they stack
 * (overridden to static in the max-width:768px media query). */
.sticky-col { position: sticky; top: 100px; }

/* Journey step cells must size by their grid track, not by content. Without
 * min-width:0 the Riley step's wide phone+card mock forces its track wider than
 * the container, squeezing the copy column so the row's overflow:hidden clips
 * the copy text on the right (desktop AND mobile). */
.journey-steps > div > div { min-width: 0; }

/* ───────────────────────── Nav (v2) ───────────────────────── */
.nav-v2 {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-v2 .nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px;
}
.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-logo img { height: 60px; width: auto; display: block; }
.nav-logo .nav-rule { height: 24px; width: 1px; background: var(--line); }
.nav-logo .nav-kx {
  font-size: 10px; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase;
}
.nav-logo .nav-kx b { color: var(--navy); font-weight: 700; }
.nav-links { display: flex; gap: 32px; align-items: center; font-size: 14px; color: var(--ink-2); }
.nav-links a { color: inherit; text-decoration: none; }
.nav-links a:hover { color: var(--navy); }
.nav-actions { display: flex; gap: 10px; align-items: center; }
.nav-phone { font-size: 13px; font-weight: 600; color: var(--navy); text-decoration: none; }
.btn.vpt-rx { background: transparent; border: 2px solid var(--sky); color: var(--sky); }
.btn.vpt-rx:hover { background: var(--sky); color: #fff; }
.nav-hamburger {
  display: none; background: transparent; border: none; padding: 8px; cursor: pointer; color: var(--navy);
}

/* Below 1024px: collapse to hamburger */
@media (max-width: 1023px) {
  .nav-links, .nav-actions { display: none !important; }
  .nav-hamburger { display: flex; }
}

/* ───────────────────────── Mobile menu overlay ───────────────────────── */
.mobile-overlay {
  position: fixed; inset: 0; background: var(--navy); z-index: 9999;
  display: flex; flex-direction: column; animation: slideIn .3s ease-out;
}
.mobile-overlay[hidden] { display: none; }
.mobile-overlay__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 24px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.mobile-overlay__head img { height: 40px; }
.mobile-overlay__close { background: transparent; border: none; padding: 8px; cursor: pointer; color: #fff; }
.mobile-overlay__nav {
  flex: 1; display: flex; flex-direction: column; padding: 32px 24px; gap: 4px; overflow: auto;
}
.mobile-overlay__nav a {
  color: #fff; font-size: 20px; font-weight: 600; padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08); text-decoration: none; transition: color .2s;
}
.mobile-overlay__nav a:hover { color: var(--sky); }
/* "Areas served" expandable (native <details>, no JS) */
.mobile-overlay__nav details.m-areas { border-bottom: 1px solid rgba(255,255,255,0.08); }
.mobile-overlay__nav details.m-areas > summary {
  color: #fff; font-size: 20px; font-weight: 600; padding: 16px 0; cursor: pointer;
  list-style: none; display: flex; align-items: center; justify-content: space-between;
}
.mobile-overlay__nav details.m-areas > summary::-webkit-details-marker { display: none; }
.mobile-overlay__nav details.m-areas > summary::after { content: '+'; color: var(--sky); font-size: 26px; font-weight: 400; line-height: 1; }
.mobile-overlay__nav details.m-areas[open] > summary::after { content: '\2013'; }
.m-areas__body { padding: 2px 0 18px; }
.m-areas__islands { color: rgba(255,255,255,0.85); font-size: 15px; line-height: 1.7; }
.m-areas__tag { color: var(--sky); font-style: italic; font-size: 14px; margin-top: 8px; }
.mobile-overlay__nav a.m-areas__link { display: inline-block; margin-top: 14px; padding: 0; border-bottom: none; color: var(--sky); font-size: 15px; font-weight: 600; text-decoration: none; }
.mobile-overlay__actions {
  padding: 24px; border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-direction: column; gap: 12px;
}
.mobile-overlay__actions a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: 8px; font-size: 15px; font-weight: 600; text-decoration: none;
}
.m-call { background: transparent; border: 2px solid var(--sky); color: var(--sky); }
.m-pdf { background: transparent; border: 2px solid rgba(255,255,255,0.3); color: #fff; }
.m-kai { background: var(--sky); color: var(--navy); font-weight: 700; padding: 16px 24px; font-size: 16px; }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* ───────────────────────── Stats strip ───────────────────────── */
.stats-strip {
  margin-top: 80px; padding: 40px 48px; background: var(--navy); color: #fff;
  border-radius: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}

/* ───────────────────────── Avatar lightbox ───────────────────────── */
[data-agent], [data-person] { cursor: zoom-in; transition: transform .15s ease, box-shadow .15s ease; }
[data-agent]:hover, [data-person]:hover { transform: scale(1.06); }
.lb-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10,22,38,0.82); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 40px;
  animation: lbFade 180ms ease-out;
}
.lb-backdrop[hidden] { display: none; }
.lb-modal {
  background: #fff; border-radius: 24px; max-width: 920px; width: 100%; max-height: 88vh;
  overflow: hidden; display: grid; grid-template-columns: 1fr 1fr;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4); position: relative;
  animation: lbScale 220ms cubic-bezier(.16,1,.3,1);
}
.lb-close {
  position: absolute; top: 16px; right: 16px; z-index: 2; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(6px); border: 1px solid var(--line);
  cursor: pointer; font-size: 18px; color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
}
.lb-photo { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; }
.lb-photo.agent { background: linear-gradient(135deg, var(--tint), var(--tint-2)); padding: 24px; }
.lb-photo.person { background: #0A1F44; padding: 0; }
.lb-photo img { width: 100%; height: 100%; display: block; }
.lb-photo.agent img { object-fit: contain; object-position: center; }
.lb-photo.person img { object-fit: cover; object-position: center top; }
.lb-detail { padding: 40px 36px; display: flex; flex-direction: column; }
.lb-name { font-weight: 700; font-size: 36px; line-height: 1.05; letter-spacing: -0.02em; color: var(--navy); margin-bottom: 6px; }
.lb-role { font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.lb-summary { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; flex: 1; }
.lb-nav { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.lb-arrow { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.lb-dots { display: flex; gap: 6px; }
.lb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); border: none; cursor: pointer; padding: 0; }
.lb-dot.active { background: var(--navy); }
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lbScale { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

/* ───────────────────────── Responsive (from design) ───────────────────────── */
@media (max-width: 1024px) {
  :root { --gutter: 24px; }
  .section { padding: 72px 0; }
  .section.loose { padding: 96px 0; }
  [style*="grid-template-columns: repeat(4, 1fr)"],
  .stats-strip { grid-template-columns: 1fr 1fr !important; }
  [style*="grid-template-columns: repeat(3, 1fr)"] { gap: 14px !important; }
}

@media (max-width: 768px) {
  :root { --gutter: 20px; }
  .section { padding: 56px 0; }
  .section.loose { padding: 64px 0; }
  .section.tight { padding: 40px 0; }
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 32px !important; }
  .stats-strip { grid-template-columns: 1fr 1fr !important; }
  .display-1 { font-size: clamp(40px, 11vw, 56px) !important; }
  .display-2 { font-size: clamp(34px, 9vw, 44px) !important; }
  .display-3 { font-size: clamp(26px, 7vw, 34px) !important; }
  .lede { font-size: 16px; }
  .hero-stage { height: auto !important; min-height: 380px; }
  .hero-floating { display: none !important; }
  /* Mobile: 2x2 stat grid. Drop the single-column top-border/padding hack that
   * pushed the 2nd cell (24/7) down out of line; align all four numbers at cell top. */
  .stats-strip { padding: 28px !important; gap: 28px 24px !important; align-items: start !important; }
  .stats-strip > div { border-left: none !important; border-top: none !important; padding-left: 0 !important; padding-top: 0 !important; }

  /* Mobile: lay the insurance payers out as a tidy 3-column grid instead of a
   * messy center-wrap. Desktop keeps the centered flex row (unchanged). */
  .ins-banner { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; padding: 24px 20px !important; }
  .ins-banner > div { text-align: center; }
  .btn.lg { padding: 16px 22px; font-size: 14px; }
  .card { padding: 22px !important; }
  .lb-modal { grid-template-columns: 1fr; max-height: 92vh; overflow: auto; }
  .lb-photo { aspect-ratio: 16/10; }

  /* Mobile: side columns (Thesis, Insurance) must not stay pinned — pinned,
   * they overlap the now-stacked content below. Return them to normal flow. */
  .sticky-col { position: static !important; top: auto !important; }

  /* Mobile: Journey steps always stack the copy (agent intro) BEFORE the
   * screen visual, overriding the desktop zig-zag order so e.g. Nora/Brian/
   * Riley are introduced before their screenshot. (copy is first in source.) */
  .journey-steps > div > div { order: 0 !important; }

  /* Mobile: the Riley step's phone + Atlas-card mock is wider than a phone
   * screen — scale it to fit instead of running off the right edge. */
  .riley-mock { transform: scale(0.78); transform-origin: top center; }

  /* Mobile: opaque nav so scrolled content never ghosts through it. */
  .nav-v2 { background: #fff !important; }

  /* Mobile: hide the "powered by KinematiX" tag + divider so the enlarged logo has room. */
  .nav-logo .nav-kx, .nav-logo .nav-rule { display: none !important; }

  /* Mobile: the final CTA heading is a fixed 52px with tight 0.98 line-height,
   * which crowds/overlaps its wrapped lines on a phone — relax it. */
  #start h2 { font-size: 32px !important; line-height: 1.12 !important; }
}

@media (max-width: 420px) {
  .display-1 { font-size: 38px !important; }
  .display-2 { font-size: 30px !important; }
}

/* Hero mobile reorder (Batch 1): copy -> photo/quote -> buttons.
   Desktop keeps the 2-col grid (copy+buttons left, stage right). On mobile the
   hero becomes a flex column; .hero-left dissolves via display:contents so its
   copy/actions children can be ordered around the stage. */
@media (max-width: 768px) {
  .hero-grid { display: flex !important; flex-direction: column; gap: 32px; }
  .hero-left { display: contents; }
  .hero-copy { order: 1; }
  .hero-stage { order: 2; }
  .hero-actions { order: 3; }
}

@keyframes reviewFade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }