/*
Theme Name: KC Primary Care
Theme URI: https://kcprimarycare.com
Author: KC Primary Care
Description: Custom native WordPress theme for KC Primary Care — concierge primary care in Leawood, Kan. Navy liquid-glass design system, DM Serif Display + DM Sans.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: kcpc
*/

/* ═══════════════════════════════════════════════════════════
   KC PRIMARY CARE — SHARED DESIGN SYSTEM
   One stylesheet, every page. Page-specific tweaks live in a
   small <style> block at the top of each page file, never here.
═══════════════════════════════════════════════════════════ */

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

:root {
  --navy:       #0C2340;
  --navy-mid:   #1A3A5C;
  --navy-deep:  #07161F;
  --blue:       #378ADD;
  --blue-light: rgba(181,212,244,0.8);
  --green:      #639922;
  --green-dk:   #4A7A18;
  --purple:     #7F77DD;
  --amber:      #BA7517;
  --cream:      #FAFAF8;
  --cream-2:    #F1EFE8;
  --cream-3:    #EEECEA;
  --ink:        #1A1916;
  --ink-2:      #2C2C2A;
  --muted:      #5F5E5A;
  --border:     rgba(0,0,0,0.08);
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; }
body {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
  width: 100%;
  position: relative;
}
img, svg { max-width: 100%; }
iframe { max-width: 100%; }
a { color: inherit; }

/* Any two-column layout in page content must use these classes, never raw
   inline grid-template-columns — inline grids skip every media query below
   and are what caused the horizontal-scroll bug on mobile. */
.kcpc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.kcpc-grid-2.sidebar-300 { grid-template-columns: 300px 1fr; align-items: center; }
@media (max-width: 960px) {
  .kcpc-grid-2, .kcpc-grid-2.sidebar-300 { grid-template-columns: 1fr; gap: 28px; }
  .kcpc-grid-2.sidebar-300 img { max-width: 320px; margin: 0 auto; }
}
.kcpc-intro-split { display: flex; align-items: center; gap: 52px; }
@media (max-width: 960px) { .kcpc-intro-split { flex-direction: column; gap: 24px; } }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }

  /* Exception: slow ambient background motion (photo zoom, drifting color
     shapes, moving background pattern) is exempted from the kill-switch
     above. Unlike scroll-triggered or parallax animation — the actual
     category prefers-reduced-motion exists to protect people from — this
     is a fixed, slow, non-scroll-linked ambient effect, closer to a lava
     lamp than a vestibular trigger. Higher specificity (class selectors)
     beats the universal `*` rule above even with matching !important. */
  .service-immersive-media { animation-duration: 22s !important; animation-iteration-count: infinite !important; }
  .service-immersive-shape.shape-a { animation-duration: 18s !important; animation-iteration-count: infinite !important; }
  .service-immersive-shape.shape-b { animation-duration: 24s !important; animation-iteration-count: infinite !important; }
  .service-immersive-shape.shape-c { animation-duration: 20s !important; animation-iteration-count: infinite !important; }
  .turn-glow::before { animation-duration: 4s !important; animation-iteration-count: infinite !important; }
}

/* ════════════════════════════════
   NAV — Liquid Glass (every page)
════════════════════════════════ */
.nav {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  width: calc(100% - 48px); max-width: 1120px; z-index: 200;
  background: rgba(6, 14, 38, 0.42);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px; padding: 0 28px; height: 58px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.36), 0 6px 18px rgba(0,0,0,0.22),
    inset 0 1.5px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.14);
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.nav::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 35%, transparent 65%);
  pointer-events: none; z-index: 0;
}
.nav::after {
  content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  pointer-events: none; z-index: 0;
}
.nav > * { position: relative; z-index: 1; }
.nav-logo {
  font-family: 'DM Serif Display', serif; font-style: normal !important;
  font-size: 21px; color: #fff; text-decoration: none; letter-spacing: -0.01em;
  text-shadow: 0 1px 12px rgba(55,138,221,0.25); white-space: nowrap; flex-shrink: 0;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.nav-links { display: flex; align-items: center; gap: 24px; list-style: none; flex: 1; justify-content: center; }
.nav-links > li { position: relative; }
.nav-links li { position: relative; }
.nav-links li::after {
  content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 12px;
}
.nav-links a { font-size: 13px; font-weight: 400; color: rgba(181,212,244,0.65); text-decoration: none; letter-spacing: 0.02em; transition: color 0.3s ease; white-space: nowrap; }
.nav-links a:hover, .nav-links a.active, .nav-links li:hover > a,
.nav-links > li.current-menu-item > a, .nav-links > li.current_page_item > a, .nav-links > li.current-menu-ancestor > a { color: #fff; }
.nav-links > li.current-menu-item > a::after, .nav-links > li.current_page_item > a::after, .nav-links > li.current-menu-ancestor > a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -9px; height: 2px; background: var(--blue); border-radius: 2px;
}
.nav.nav-on-light .nav-links > li.current-menu-item > a, .nav.nav-on-light .nav-links > li.current_page_item > a, .nav.nav-on-light .nav-links > li.current-menu-ancestor > a { color: var(--navy); }

/* Dropdown — desktop only, opens on hover, closes when the pointer leaves.
   Text color matches the top-level nav links exactly (rgba(181,212,244,0.65),
   white on hover) so the whole menu — top-level and dropdown alike — reads
   consistently against the frosted glass, regardless of any row tint behind
   it. Motion uses a gentle overshoot-settle curve (a "back ease") rather
   than a flat ease-out, closer to how Apple's Liquid Glass surfaces settle
   into place instead of snapping — plus a soft inner highlight at the top
   edge for the sense of a lit glass surface, per Apple's own glass-lift
   guidance (inner highlight, not just a drop shadow). */
.nav-links .sub-menu {
  list-style: none; position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(-10px) scale(0.96);
  min-width: 220px; padding: 14px 8px 8px; background: rgba(6, 14, 38, 0.92);
  backdrop-filter: blur(28px) saturate(190%); -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(255,255,255,0.10); border-radius: 12px;
  box-shadow: 0 20px 48px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.16);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform-origin: top center;
  transition: opacity 0.3s cubic-bezier(0.34, 1.4, 0.64, 1), transform 0.36s cubic-bezier(0.34, 1.4, 0.64, 1), visibility 0s linear 0.36s;
}
.nav-links li:hover > .sub-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1);
  transition: opacity 0.3s cubic-bezier(0.34, 1.4, 0.64, 1), transform 0.36s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.nav-links .sub-menu a { display: block; padding: 9px 12px; border-radius: 7px; font-size: 12.5px; color: #fff; transition: background 0.28s cubic-bezier(0.34, 1.2, 0.64, 1), color 0.22s; }
.nav-links .sub-menu a:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* Per-service row tint — matched by POSITION in the Services dropdown,
   not URL slug. This site uses plain permalinks (?page_id=), so slugs
   never appear in the actual href — position is the only reliable hook.
   Target order (matches the Services page): 1 Primary Care, 2 Medical
   Weight Management, 3 Peptide Therapy, 4 Hormone Therapy, 5 Ketamine
   Therapy. This must be the actual order set in Appearance > Menus —
   if that ever changes, these five rules need updating to match. */
.nav-links .sub-menu li:nth-child(1) a:hover { background: rgba(30,64,110,0.55); color: #fff; }
.nav-links .sub-menu li:nth-child(2) a:hover { background: rgba(99,153,34,0.34); color: #fff; }
.nav-links .sub-menu li:nth-child(3) a:hover { background: rgba(55,138,221,0.34); color: #fff; }
.nav-links .sub-menu li:nth-child(4) a:hover { background: rgba(186,117,23,0.38); color: #fff; }
.nav-links .sub-menu li:nth-child(5) a:hover { background: rgba(127,119,221,0.38); color: #fff; }
/* Active service in the dropdown — same highlight color as hover, shown
   permanently instead of the top-level underline treatment, which wasn't
   designed for a vertical dropdown list. */
.nav-links .sub-menu li:nth-child(1).current-menu-item a { background: rgba(30,64,110,0.55); color: #fff; }
.nav-links .sub-menu li:nth-child(2).current-menu-item a { background: rgba(99,153,34,0.34); color: #fff; }
.nav-links .sub-menu li:nth-child(3).current-menu-item a { background: rgba(55,138,221,0.34); color: #fff; }
.nav-links .sub-menu li:nth-child(4).current-menu-item a { background: rgba(186,117,23,0.38); color: #fff; }
.nav-links .sub-menu li:nth-child(5).current-menu-item a { background: rgba(127,119,221,0.38); color: #fff; }
.nav-links .sub-menu li + li a { margin-top: 3px; }

.nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav-btn-portal {
  display: inline-flex; align-items: center; background: var(--blue);
  border: 1px solid var(--blue); color: #fff;
  font-size: 12px; font-weight: 500; padding: 7px 15px; border-radius: 8px;
  text-decoration: none; letter-spacing: 0.03em; transition: background 0.18s, border-color 0.18s; white-space: nowrap;
}
.nav-btn-portal:hover { background: #2c74bd; border-color: #2c74bd; color: #fff; }
.nav-btn-join {
  display: inline-flex; align-items: center; background: rgba(99,153,34,0.88);
  border: 1px solid rgba(99,153,34,0.5); color: #fff; font-size: 12.5px; font-weight: 500;
  padding: 8px 18px; border-radius: 8px; text-decoration: none; letter-spacing: 0.04em;
  transition: background 0.2s, box-shadow 0.2s; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 8px rgba(0,0,0,0.18);
}
.nav-btn-join:hover { background: var(--green); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 16px rgba(99,153,34,0.3); }

/* Hamburger — mobile only */
.nav-burger {
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 36px; height: 36px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px; cursor: pointer; flex-shrink: 0;
}
.nav-burger span { width: 16px; height: 1.5px; background: #fff; border-radius: 1px; transition: transform 0.2s var(--ease), opacity 0.2s var(--ease); }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Adaptive light-glass mode — toggled by JS (kcpc-behaviors.js) based on
   what's actually rendered behind the nav at scroll time. Same structure,
   inverted palette: light frosted glass instead of dark, navy text instead
   of pale blue/white, so contrast holds over plain white/cream page body
   sections instead of only looking right over dark hero/header imagery. */
.nav.nav-on-light {
  background: rgba(255,255,255,0.48);
  border-color: rgba(12,35,64,0.10);
  box-shadow: 0 20px 48px rgba(12,35,64,0.14), 0 6px 16px rgba(12,35,64,0.08),
    inset 0 1.5px 0 rgba(255,255,255,0.7), inset 0 -1px 0 rgba(12,35,64,0.05);
}
.nav.nav-on-light .nav-logo { color: var(--navy); text-shadow: none; }
.nav.nav-on-light .nav-links > li > a { color: rgba(12,35,64,0.6); }
.nav.nav-on-light .nav-links > li > a:hover,
.nav.nav-on-light .nav-links > li > a.active,
.nav.nav-on-light .nav-links > li:hover > a { color: var(--navy); }
.nav.nav-on-light .nav-burger { background: rgba(12,35,64,0.06); border-color: rgba(12,35,64,0.16); }
.nav.nav-on-light .nav-burger span { background: var(--navy); }

/* Mobile menu panel */
.mobile-menu {
  position: fixed; top: 82px; left: 12px; right: 12px; z-index: 199;
  background: rgba(6, 14, 38, 0.96); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.10); border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.32s var(--ease), opacity 0.24s var(--ease);
}
.mobile-menu.open { max-height: 80vh; opacity: 1; overflow-y: auto; }
.mobile-menu-inner { padding: 18px; }
.mobile-menu-links { list-style: none; }
.mobile-menu-links > li { border-bottom: 1px solid rgba(255,255,255,0.08); }
.mobile-menu-links > li:last-child { border-bottom: none; }
.mobile-menu-links a { display: flex; align-items: center; justify-content: space-between; padding: 14px 6px; color: rgba(181,212,244,0.85); text-decoration: none; font-size: 14.5px; font-weight: 500; }
.mobile-menu-links .sub-menu { list-style: none; max-height: 0; overflow: hidden; transition: max-height 0.28s var(--ease); padding-left: 14px; }
.mobile-menu-links li.sub-open > .sub-menu { max-height: 400px; }
.mobile-menu-links .sub-menu a { font-size: 13px; font-weight: 400; padding: 11px 6px; color: rgba(181,212,244,0.65); }
.mobile-menu-links .menu-item-has-children > a::after { content: '+'; font-size: 16px; font-weight: 300; color: rgba(181,212,244,0.5); transition: transform 0.2s; }
.mobile-menu-links li.sub-open > a::after { transform: rotate(45deg); }
.mobile-menu-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08); }
.mobile-menu-actions .btn-join { justify-content: center; }
.mobile-menu-backdrop {
  position: fixed; inset: 0; z-index: 198; background: rgba(0,0,0,0.35);
  opacity: 0; visibility: hidden; transition: opacity 0.24s var(--ease);
}
.mobile-menu-backdrop.open { opacity: 1; visibility: visible; }

[id] { scroll-margin-top: 84px; }

/* ════════════════════════════════
   PAGE HEADER (inner pages — replaces the big photo hero)
   Used on: About, Services, FAQ, Blog, Contact, service detail, legal
════════════════════════════════ */
.page-header {
  background: var(--navy);
  padding: 176px 64px 72px;
  position: relative;
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute; right: -80px; top: -100px;
  width: 420px; height: 420px; border-radius: 50%;
  border: 1px solid rgba(55,138,221,0.10); pointer-events: none;
}
.page-header-crumb {
  font-size: 11.5px; font-weight: 400; color: rgba(181,212,244,0.45);
  letter-spacing: 0.02em; margin-bottom: 18px; position: relative;
}
.page-header-crumb a { text-decoration: none; color: rgba(181,212,244,0.45); transition: color 0.18s; }
.page-header-crumb a:hover { color: #fff; }
.page-header-eyebrow {
  font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--eyebrow-accent, var(--green)); margin: 0 0 8px 0 !important; position: relative;
}
.page-header-breadcrumb a { color: inherit; text-decoration: none; }
.page-header-breadcrumb a:hover { text-decoration: underline; }
.page-header-breadcrumb .crumb-sep { opacity: 0.55; letter-spacing: 0; }
.page-header-title {
  font-family: 'DM Serif Display', serif; font-style: normal;
  font-size: clamp(34px, 4.5vw, 52px); color: #fff; line-height: 1.08;
  max-width: 960px; position: relative; margin: 0 0 0 0 !important;
}
.page-header-title em { font-style: normal; color: var(--blue); }
.page-header-sub {
  font-size: 14.5px; font-weight: 300; color: rgba(181,212,244,0.65);
  line-height: 1.75; max-width: 780px; margin-top: 18px; position: relative;
}

/* ════════════════════════════════
   SHARED SECTION SYSTEM
════════════════════════════════ */
.page-section { padding: 76px 64px; }
.page-section.alt { background: var(--cream-2); }
.page-section.dark { background: var(--navy); }
.page-section.tight { padding-top: 56px; }

.section-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green); margin: 0 0 2px 0 !important; line-height: 1; }
.section-eyebrow.light { color: rgba(181,212,244,0.45); }
.section-title { font-family: 'DM Serif Display', serif; font-size: clamp(28px, 3.5vw, 40px); line-height: 1.1; color: var(--ink); margin: 0 0 10px 0 !important; }
.section-title.light { color: #fff; }
.section-sub { font-size: 14px; font-weight: 300; color: var(--muted); line-height: 1.72; max-width: 560px; }
.section-sub.light { color: rgba(181,212,244,0.60); }

.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--blue); text-decoration: none; letter-spacing: 0.02em; transition: gap 0.18s, color 0.18s; }
.link-arrow:hover { gap: 10px; color: var(--green); }
.link-arrow svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.link-arrow.on-dark { color: rgba(181,212,244,0.75); }
.link-arrow.on-dark:hover { color: var(--green); }

/* Buttons (shared across hero/CTA contexts) */
.btn-join { display: inline-flex; align-items: center; background: var(--green); color: #fff !important; font-size: 13.5px; font-weight: 500; padding: 13px 28px; border-radius: 8px; text-decoration: none; letter-spacing: 0.03em; transition: filter 0.18s, box-shadow 0.18s; box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 4px 16px rgba(99,153,34,0.28); border: none; cursor: pointer; }
.btn-join:hover { filter: brightness(0.87); }
.btn-ghost { display: inline-flex; align-items: center; background: rgba(255,255,255,0.07); color: rgba(181,212,244,0.85) !important; font-size: 13.5px; font-weight: 400; padding: 12px 28px; border-radius: 8px; text-decoration: none; border: 1px solid rgba(181,212,244,0.18); letter-spacing: 0.02em; transition: background 0.18s; }
.btn-ghost:hover { background: rgba(255,255,255,0.13); }
.btn-outline { display: inline-flex; align-items: center; background: transparent; color: var(--navy) !important; font-size: 13.5px; font-weight: 500; padding: 12px 26px; border-radius: 8px; text-decoration: none; border: 1px solid var(--navy); letter-spacing: 0.02em; transition: background 0.18s, color 0.18s; }
.btn-outline:hover { background: var(--navy); color: #fff !important; }
.btn-portal { display: inline-flex; align-items: center; justify-content: center; background: var(--blue); border: 1px solid var(--blue); color: #fff !important; font-size: 13.5px; font-weight: 500; padding: 12px 26px; border-radius: 8px; text-decoration: none; letter-spacing: 0.02em; transition: background 0.18s, border-color 0.18s; }
.btn-portal:hover { background: #2c74bd; border-color: #2c74bd; }

/* Benefit / checklist rows (reused: concierge page, service pages, FAQ intro) */
.benefit-list { display: flex; flex-direction: column; gap: 14px; }
.benefit-item { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--ink-2); }
.benefit-item.light { color: rgba(181,212,244,0.75); }
.benefit-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); flex-shrink: 0; margin-top: 7px; opacity: 0.7; }

/* Pull-quote (Dr. Kapur bio, testimonials) */
.pullquote { padding: 18px 22px; border-left: 3px solid var(--blue); background: rgba(55,138,221,0.05); border-radius: 0 8px 8px 0; }
.callout-emphasis { padding: 14px 18px; border-left: 3px solid var(--amber); background: rgba(186,117,23,0.06); border-radius: 0 8px 8px 0; font-weight: 500; color: var(--ink); margin-top: 14px; }
.pullquote p { font-family: 'DM Serif Display', serif; font-size: 17px; color: var(--navy); line-height: 1.45; font-style: italic; }
.pullquote cite { display: block; font-size: 11px; font-weight: 500; font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }

/* Service / feature cards (grid on Services index + home) */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.service-card { border-radius: 10px; border: 1px solid var(--border); padding: 24px 22px 26px; background: var(--cream); transition: box-shadow 0.22s, border-color 0.22s, transform 0.22s; }
.service-card:hover { box-shadow: 0 6px 28px rgba(0,0,0,0.08); border-color: rgba(55,138,221,0.22); transform: translateY(-2px); }
.service-pip { width: 7px; height: 7px; border-radius: 50%; margin-bottom: 16px; }
.pip-blue { background: var(--blue); } .pip-green { background: var(--green); } .pip-purple { background: var(--purple); } .pip-amber { background: var(--amber); } .pip-navy { background: var(--navy); }
.service-name { font-size: 14.5px; font-weight: 500; color: var(--ink); margin-bottom: 7px; }
.service-desc { font-size: 12.5px; font-weight: 300; color: var(--muted); line-height: 1.65; margin-bottom: 14px; }
.service-link { font-size: 11.5px; font-weight: 500; color: var(--blue); text-decoration: none; letter-spacing: 0.04em; transition: color 0.18s; }
.service-link:hover { color: var(--navy); }

/* Info cards (used on explainer + contact + service detail) */
.info-card { background: rgba(55,138,221,0.06); border: 1px solid rgba(55,138,221,0.12); border-radius: 10px; padding: 20px 22px; }
.info-card-title { font-size: 13px; font-weight: 500; color: rgba(181,212,244,0.90); margin-bottom: 6px; }
.info-card-body { font-size: 12.5px; font-weight: 300; color: rgba(181,212,244,0.55); line-height: 1.65; }
.info-card.on-light { background: var(--cream-2); border-color: var(--border); }
.info-card.on-light .info-card-title { color: var(--ink); }
.info-card.on-light .info-card-body { color: var(--muted); }

/* ════════════════════════════════
   ACCORDION (signature element — FAQ)
════════════════════════════════ */
.accordion { border-top: 1px solid var(--border); }
.accordion-item { border-bottom: 1px solid var(--border); }
.accordion-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: none; border: none; text-align: left; cursor: pointer;
  padding: 24px 4px; font-family: 'DM Sans', sans-serif;
}
.accordion-trigger-text { font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.4; }
.accordion-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; position: relative; transition: background 0.2s, border-color 0.2s; }
.accordion-icon::before, .accordion-icon::after { content: ''; position: absolute; background: var(--navy); transition: transform 0.28s var(--ease); }
.accordion-icon::before { width: 10px; height: 1.5px; }
.accordion-icon::after { width: 1.5px; height: 10px; }
.accordion-item[data-open="true"] .accordion-icon::after { transform: scaleY(0); }
.accordion-item[data-open="true"] .accordion-icon { background: var(--navy); border-color: var(--navy); }
.accordion-item[data-open="true"] .accordion-icon::before { background: #fff; }
.accordion-panel { height: 0; overflow: hidden; transition: height 0.32s var(--ease); }
.accordion-panel-inner { padding: 0 4px 26px; font-size: 13.5px; font-weight: 300; color: var(--muted); line-height: 1.75; max-width: 640px; }

/* ════════════════════════════════
   BLOG — cards + long-form post type
════════════════════════════════ */
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.blog-grid.index { grid-template-columns: repeat(3, 1fr); }
.blog-card { border-radius: 10px; border: 1px solid var(--border); overflow: hidden; background: #fff; transition: box-shadow 0.22s, transform 0.22s; text-decoration: none; color: inherit; display: block; }
.blog-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.09); transform: translateY(-2px); }
.blog-thumb { width: 100%; height: 190px; display: flex; align-items: flex-end; padding: 18px 20px; position: relative; overflow: hidden; background: linear-gradient(135deg, #0D2645 0%, #1A3A5C 60%, #1A3A2A 100%); background-size: cover; background-position: center; }
.blog-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.35) 100%); }
.blog-thumb-tag { font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(181,212,244,0.7); background: rgba(55,138,221,0.2); border: 1px solid rgba(55,138,221,0.25); border-radius: 4px; padding: 3px 10px; position: relative; z-index: 1; }
.blog-body { padding: 22px 22px 24px; }
.blog-date { font-size: 11px; font-weight: 400; color: var(--muted); letter-spacing: 0.04em; margin-bottom: 8px; }
.blog-title { font-size: 15.5px; font-weight: 500; color: var(--ink); line-height: 1.4; margin-bottom: 10px; }
.blog-excerpt { font-size: 12.5px; font-weight: 300; color: var(--muted); line-height: 1.65; margin-bottom: 16px; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 40px; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; border-radius: 8px; font-size: 12.5px; font-weight: 500; text-decoration: none; color: var(--muted); border: 1px solid var(--border); }
.pagination a:hover { border-color: var(--blue); color: var(--blue); }
.pagination .current { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Long-form post body */
.post-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: rgba(181,212,244,0.55); margin-top: 20px; position: relative; }
.post-meta-sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(181,212,244,0.3); }
.post-body { max-width: 680px; margin: 0 auto; font-size: 15px; font-weight: 300; color: var(--ink-2); line-height: 1.85; }
.content-wrap-wide .post-body { max-width: none; margin: 0; }
.post-body p { margin-bottom: 22px; }
.post-body h2 { font-family: 'DM Serif Display', serif; font-size: 26px; color: var(--ink); margin: 44px 0 16px; line-height: 1.25; }
.post-body h3 { font-size: 16px; font-weight: 500; color: var(--ink); margin: 32px 0 12px; }
.post-body ul, .post-body ol { margin: 0 0 22px 20px; }
.post-body li { margin-bottom: 8px; }
.post-body strong { font-weight: 500; color: var(--ink); }
.post-body a { color: var(--blue); text-decoration: underline; text-decoration-color: rgba(55,138,221,0.3); text-underline-offset: 3px; }
/* ═══════════════════════════════════════════════════════
   RICH CONTENT COMPONENTS — glyphs, motion, pattern
   For designed service-page bodies (Custom HTML content)
═══════════════════════════════════════════════════════ */

/* Icon pop-in — triggers off the existing .aos/.visible scroll-reveal system */
@keyframes iconPop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
.aos.visible .feature-icon, .aos.visible .icon-row-badge { animation: iconPop 0.55s var(--ease) both; }

/* Feature row — same restrained badge + text pattern as icon-row, used as a repeatable list
   instead of bordered/shadowed "cards." No box, no hover-lift — quiet by design. */
.feature-row { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--border); }
.feature-row:last-child { border-bottom: none; }
.feature-list-2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.feature-list-2col .feature-row:nth-last-child(2) { border-bottom: none; }
@media (max-width: 960px) { .feature-list-2col { grid-template-columns: 1fr; } .feature-list-2col .feature-row:nth-last-child(2) { border-bottom: 1px solid var(--border); } .feature-list-2col .feature-row:last-child { border-bottom: none; } }
.feature-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.feature-icon svg { width: 20px; height: 20px; stroke-width: 1.6; fill: none; }
.feature-icon.blue { background: rgba(55,138,221,0.12); } .feature-icon.blue svg { stroke: var(--blue); }
.feature-icon.green { background: rgba(99,153,34,0.12); } .feature-icon.green svg { stroke: var(--green); }
.feature-icon.purple { background: rgba(127,119,221,0.12); } .feature-icon.purple svg { stroke: var(--purple); }
.feature-icon.amber { background: rgba(186,117,23,0.12); } .feature-icon.amber svg { stroke: var(--amber); }
.feature-title { font-size: 14.5px; font-weight: 500; color: var(--ink); margin-bottom: 5px; }
.feature-desc { font-size: 12.5px; font-weight: 300; color: var(--muted); line-height: 1.65; }

/* Editorial stat — large serif numeral treatment instead of a dashboard gauge */
.stat-editorial-value { font-family: 'DM Serif Display', serif; font-size: clamp(52px, 6vw, 76px); color: var(--navy); line-height: 1; }
.stat-editorial-rule { width: 44px; height: 2px; background: var(--green); margin: 18px 0 12px; border: none; }
.stat-editorial-label { font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }

/* Editorial numbered step — oversized ghost numeral beside each step, no nodes/connectors */
.step-editorial { display: flex; gap: 22px; align-items: flex-start; }

/* Step timeline — connected vertical line with numbered nodes, consistent
   left alignment throughout. Replaces the earlier alternating-side attempt,
   which read as scattered rather than organized for this kind of content. */
.step-timeline { position: relative; }
.step-timeline-item { position: relative; padding-left: 56px; padding-bottom: 32px; }
.step-timeline-item:last-child { padding-bottom: 0; }
.step-timeline-item::before {
  content: ''; position: absolute; left: 19px; top: 40px; bottom: -32px; width: 2px;
  background: rgba(55,138,221,0.22);
}
.step-timeline-item:last-child::before { display: none; }
.step-timeline-node {
  position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: 'DM Serif Display', serif; font-size: 16px; box-shadow: 0 6px 16px rgba(12,35,64,0.2); z-index: 1;
}
.step-timeline-title { font-size: 15px; font-weight: 500; color: var(--ink); margin-bottom: 6px; padding-top: 8px; }
.step-timeline-desc { font-size: 13.5px; font-weight: 300; color: var(--muted); line-height: 1.65; }
.step-editorial-num { font-family: 'DM Serif Display', serif; font-style: italic; font-size: 52px; color: var(--blue); opacity: 0.24; line-height: 1; flex-shrink: 0; width: 58px; }
.step-editorial-title { font-size: 14.5px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.step-editorial-desc { font-size: 13px; font-weight: 300; color: var(--muted); line-height: 1.7; }

/* Service grid — 2-column on desktop, 1-column on mobile, with the 5th
   (odd, last) tile spanning full width as a closing feature tile. Each
   card keeps its color-blend tint, drifting shapes, shade, and Ken Burns
   zoom — just contained in a rounded grid cell instead of a full-bleed
   band, so five tiles read as a gallery, not five stacked page-headers. */
/* Services page background — on-brand navy base with a soft aurora
   borealis effect: three overlapping brand-color glows (blue, purple,
   green). Positions are driven entirely by JavaScript (see kcpc-behaviors.js)
   via CSS custom properties, not a @keyframes animation — this is
   deliberate: if a caching/CSS-optimization tool is stripping @keyframes
   rules, a JS-driven approach can't be affected by that at all. */
.services-page-bg {
  background-color: var(--navy);
  background-image:
    radial-gradient(circle at var(--ax1, 20%) var(--ay1, 20%), rgba(55,138,221,0.5), transparent 48%),
    radial-gradient(circle at var(--ax2, 80%) var(--ay2, 30%), rgba(127,119,221,0.45), transparent 48%),
    radial-gradient(circle at var(--ax3, 50%) var(--ay3, 85%), rgba(99,153,34,0.4), transparent 48%);
}

.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.service-grid .service-immersive:last-child:nth-child(odd) { grid-column: 1 / -1; }

.service-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 22px; }
@media (max-width: 900px) { .service-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .service-grid-4 { grid-template-columns: 1fr; } }
.service-grid-4 .service-immersive { min-height: 300px; padding: 30px; }
.service-grid-4 .service-immersive-name { font-size: clamp(20px, 1.8vw, 26px); }
.service-grid-4 .service-immersive-desc { font-size: 12.5px; }

.service-immersive-feature { min-height: 380px; }
.service-immersive-feature .service-immersive-content { max-width: 640px; }
.service-immersive-feature .service-immersive-name { font-size: clamp(34px, 4vw, 52px); }
.service-immersive-feature .service-immersive-desc { font-size: 15px; max-width: 520px; }

.service-immersive {
  position: relative; overflow: hidden; min-height: 380px; border-radius: 20px;
  display: flex; align-items: flex-end; justify-content: flex-start;
  text-decoration: none; color: #fff; padding: 40px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  /* Safari has a known bug where an animated/transformed child inside a
     rounded overflow:hidden box stops being clipped correctly once the
     parent itself gets a transform (e.g. on hover) — square corners leak
     through. Forcing mask-based clipping instead of overflow-clipping
     fixes it reliably; border-radius:inherit on each layer below is a
     second, redundant safety net for the same bug. */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
}
.service-immersive:hover { transform: translateY(-4px); box-shadow: 0 24px 56px rgba(0,0,0,0.28); }
.service-immersive.reverse { justify-content: flex-end; }
.service-immersive.reverse .service-immersive-content { text-align: right; }
.service-immersive.reverse .service-immersive-desc { margin-left: auto; }
.service-immersive.reverse .service-immersive-cta { flex-direction: row-reverse; }
.service-immersive-media {
  position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center;
  border-radius: inherit; animation: kenBurns 22s ease-in-out infinite alternate;
}
.service-immersive-tint { position: absolute; inset: 0; z-index: 1; border-radius: inherit; mix-blend-mode: color; }
.service-immersive-shape { position: absolute; border-radius: 50%; filter: blur(60px); z-index: 2; mix-blend-mode: screen; pointer-events: none; opacity: 0.55; }
.service-immersive-shade {
  position: absolute; inset: 0; z-index: 3; border-radius: inherit;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.05) 100%);
}
.service-immersive-content { position: relative; z-index: 4; max-width: 480px; }
.service-immersive-num { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.24em; opacity: 0.65; margin-bottom: 14px; }
.service-immersive-name { font-family: 'DM Serif Display', serif; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.08; margin-bottom: 12px; }
.service-immersive-desc { font-size: 14px; font-weight: 300; line-height: 1.65; opacity: 0.88; margin-bottom: 22px; max-width: 420px; }
.service-immersive-cta {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500;
  padding: 11px 22px; border-radius: 8px; background: rgba(255,255,255,0.16); backdrop-filter: blur(8px);
  transition: background 0.25s var(--ease), gap 0.25s var(--ease);
}
.service-immersive-cta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.service-immersive:hover .service-immersive-cta { background: rgba(255,255,255,0.28); gap: 12px; }

@keyframes kenBurns { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes shapeDriftA { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(45px, -32px) scale(1.18); } }
@keyframes shapeDriftB { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-38px, 28px) scale(0.88); } }
@keyframes shapeDriftC { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(22px, 38px) scale(1.12); } }
.shape-a { animation: shapeDriftA 18s ease-in-out infinite; }
.shape-b { animation: shapeDriftB 24s ease-in-out infinite; }
.shape-c { animation: shapeDriftC 20s ease-in-out infinite; }

@media (max-width: 960px) {
  .service-grid { grid-template-columns: 1fr; gap: 16px; }
  .service-grid .service-immersive:last-child:nth-child(odd) { grid-column: auto; }
  .service-immersive { padding: 32px; min-height: 340px; }
  .service-immersive-content { max-width: 100%; }
  .service-immersive.reverse { justify-content: flex-start; }
  .service-immersive.reverse .service-immersive-content { text-align: left; }
  .service-immersive.reverse .service-immersive-desc { margin-left: 0; }
  .service-immersive.reverse .service-immersive-cta { flex-direction: row; }
}

/* Contact modal — opened by any [data-modal-trigger="contact"] button */
.kcpc-modal-backdrop {
  position: fixed; inset: 0; z-index: 300; background: rgba(7,15,25,0.55); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease);
}
.kcpc-modal-backdrop.open { opacity: 1; visibility: visible; }
.kcpc-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -46%);
  width: min(520px, calc(100% - 40px)); max-height: 88vh; max-height: 88svh; overflow-y: auto;
  background: #fff; border-radius: 16px; padding: 32px;
  box-shadow: 0 40px 90px rgba(0,0,0,0.35); z-index: 301;
  opacity: 0; visibility: hidden; transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.kcpc-modal.open { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }

/* Sticky wrapper — zero height, so it doesn't push modal content down, but
   stays anchored to the top of the scrollable modal as content scrolls
   beneath it, instead of scrolling away with the rest of the form. */
.kcpc-modal-close-wrap { position: sticky; top: 0; z-index: 20; height: 0; }
html.apple-platform .kcpc-modal-close-wrap { height: 44px; }

.kcpc-modal-close {
  position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5); font-size: 18px; line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); cursor: pointer; transition: background 0.18s, color 0.18s;
  background: rgba(255,255,255,0.65); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.kcpc-modal-close:hover { background: rgba(255,255,255,0.9); color: var(--ink); }
.modal-close-stoplight { display: none; }

/* Apple platform (Mac/iOS) — macOS-style stoplight, top-left, instead of the
   default X button, top-right. All other platforms keep the default style. */
html.apple-platform .kcpc-modal-close {
  top: 16px; left: 16px; right: auto; width: auto; height: auto; border: none; padding: 6px 8px;
  border-radius: 20px; background: rgba(255,255,255,0.55); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 4px 14px rgba(0,0,0,0.10);
}
html.apple-platform .kcpc-modal-close:hover { background: rgba(255,255,255,0.8); }
html.apple-platform .modal-close-x { display: none; }
html.apple-platform .modal-close-stoplight { display: flex; align-items: center; gap: 8px; }
html.apple-platform .modal-close-stoplight .dot {
  width: 12px; height: 12px; border-radius: 50%; position: relative;
  border: 0.5px solid rgba(0,0,0,0.12);
}
html.apple-platform .modal-close-stoplight .dot.red { background: #FF5F57; }
html.apple-platform .modal-close-stoplight:hover .dot.red::before {
  content: '\00d7'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 9px; line-height: 1; color: rgba(0,0,0,0.5); font-weight: 700;
}
@media (max-width: 960px) {
  html.apple-platform .modal-close-stoplight .dot.red { width: 18px; height: 18px; }
  /* No hover on touch devices — show the X permanently instead of only on hover */
  html.apple-platform .modal-close-stoplight .dot.red::before {
    content: '\00d7'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 12px; line-height: 1; color: rgba(0,0,0,0.5); font-weight: 700;
  }
}
.kcpc-modal-header { margin-bottom: 20px; }

/* GHL form embed container — width/height flow naturally so GHL's own
   form_embed.js script can dynamically resize the iframe via postMessage.
   min-height only prevents an empty-box flash before that script runs;
   it does not lock or fight the real sizing. */
.kcpc-ghl-form-wrap { width: 100%; }
.kcpc-ghl-form-wrap iframe { display: block; width: 100%; min-height: 500px; border: none; border-radius: 8px; }
@media (max-width: 960px) {
  .kcpc-modal { padding: 22px; max-height: 92vh; max-height: 92svh; }
  .kcpc-modal-header { margin-bottom: 14px; }
  .kcpc-modal-header .section-title, .kcpc-modal-header h2 { font-size: 24px !important; }
  .form-row { gap: 5px; margin-bottom: 12px; }
  .form-row input, .form-row textarea, .form-row select { padding: 10px 12px; font-size: 16px; }
  .form-row textarea { height: 70px; }
}

/* Footer LTW link — constant, every page, under the KCPC logo/tagline */
.footer-ltw-link {
  display: inline-flex; align-items: center; padding: 14px 18px; border-radius: 10px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(155,124,166,0.55);
  transition: background 0.22s var(--ease), border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.footer-ltw-link:hover { background: rgba(255,255,255,0.13); border-color: rgba(155,124,166,0.9); transform: translateY(-2px); }
.footer-ltw-logo { height: 46px; width: auto; display: block; }

/* Comparison table — sequential items auto-pair into rows in a 2-col grid,
   so a row's height always matches on both sides regardless of text wrap,
   keeping every divider line aligned left-to-right. */
.compare-table { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.compare-table-header { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; }
.compare-table-cell { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--muted); padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.compare-table-cell.accent { color: var(--ink-2); font-weight: 400; border-bottom-color: rgba(99,153,34,0.2); }
.compare-table-cell.last { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
@media (max-width: 960px) { .compare-table { grid-template-columns: 1fr; } }


/* Team feature cards — full-width, alternating sides, replacing the
   small 3-col avatar grid. Photo/avatar takes real width instead of a
   small circle, giving each person the visual weight of an actual
   feature rather than a thin grid tile. */
.team-feature { display: flex; border-radius: 16px; overflow: hidden; background: var(--cream-2); margin-bottom: 28px; }
.team-feature:last-child { margin-bottom: 0; }
.team-feature.reverse { flex-direction: row-reverse; }
.team-feature-visual { width: 34%; flex-shrink: 0; position: relative; min-height: 260px; }
.team-feature-visual img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; display: block; }
.team-feature-avatar {
  width: 100%; height: 100%; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Serif Display', serif; font-size: 68px; color: #fff;
}
.team-feature-content { padding: 40px 44px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.team-feature-name { font-family: 'DM Serif Display', serif; font-size: 25px; color: var(--ink); margin-bottom: 4px; }
.team-feature-role { font-size: 12px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--blue); margin-bottom: 16px; }
.team-feature-bio { font-size: 14px; font-weight: 300; color: var(--ink-2); line-height: 1.75; max-width: 480px; }
@media (max-width: 800px) {
  .team-feature, .team-feature.reverse { flex-direction: column; }
  .team-feature-visual { width: 100%; height: 220px; }
  .team-feature-content { padding: 32px 28px; }
}

/* Splinter cards — the "fragmented experience" section. Slight alternating
   rotation gives a scattered, fractured feel without being gimmicky. */
.splinter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.splinter-card { background: var(--paper); border: 1px solid var(--border); border-left: 3px solid var(--amber); border-radius: 10px; padding: 22px; transition: transform 0.3s var(--ease); }
.splinter-card:nth-child(3n+1) { transform: rotate(-0.6deg); }
.splinter-card:nth-child(3n+2) { transform: rotate(0.4deg); }
.splinter-card:nth-child(3n+3) { transform: rotate(-0.3deg); }
.splinter-card:hover { transform: rotate(0deg) translateY(-3px); }
.splinter-title { font-size: 14.5px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.splinter-desc { font-size: 13px; font-weight: 300; color: var(--muted); line-height: 1.6; }
@media (max-width: 900px) { .splinter-grid { grid-template-columns: 1fr; } .splinter-card { transform: none !important; } }

/* Simplified tier preview — headline benefits only, not the full feature grid */
.tier-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tier-preview-card { border-radius: 14px; overflow: hidden; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.tier-preview-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.12); }
.tier-preview-head { padding: 22px 24px 18px; color: #fff; position: relative; }
.tier-preview-head.core { background: var(--navy); }
.tier-preview-head.premiere { background: var(--green-dk); }
.tier-preview-head.vip { background: #211C3D; }
.tier-preview-popular { position: absolute; top: 16px; right: 16px; background: #fff; color: var(--green-dk); font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; }
.tier-preview-name { font-family: 'DM Serif Display', serif; font-size: 21px; }
.tier-preview-tag { font-size: 12px; opacity: 0.75; margin-top: 4px; }
.tier-preview-body { padding: 22px 24px; background: var(--cream-2); height: 100%; }
.tier-preview-body li { font-size: 13px; font-weight: 300; color: var(--ink-2); line-height: 1.6; margin-bottom: 10px; padding-left: 18px; position: relative; }
.tier-preview-body li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; }
.tier-preview-card.core .tier-preview-body li::before { background: var(--blue); }
.tier-preview-card.premiere .tier-preview-body li::before { background: var(--green); }
.tier-preview-card.vip .tier-preview-body li::before { background: var(--purple); }
@media (max-width: 900px) { .tier-preview-grid { grid-template-columns: 1fr; } }

/* Reveal section — soft color glows behind the dark band, same proven
   technique as the Services page background, scaled down for this section */
.membership-reveal { position: relative; overflow: hidden; }
.membership-reveal::before {
  content: ''; position: absolute; top: -60px; right: -80px; width: 320px; height: 320px;
  border-radius: 50%; background: radial-gradient(circle, rgba(55,138,221,0.28), transparent 70%);
  pointer-events: none;
}
.membership-reveal::after {
  content: ''; position: absolute; bottom: -90px; left: -60px; width: 260px; height: 260px;
  border-radius: 50%; background: radial-gradient(circle, rgba(127,119,221,0.20), transparent 70%);
  pointer-events: none;
}

/* The Turn — a soft pulsing glow behind the pivot statement for extra weight */
.turn-glow { position: relative; display: inline-block; }
.turn-glow::before {
  content: ''; position: absolute; inset: -30px -60px; z-index: -1; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(55,138,221,0.14), transparent 72%);
  animation: turnPulse 4s ease-in-out infinite;
}
@keyframes turnPulse { 0%, 100% { opacity: 0.6; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.04); } }

/* Back-to-top button — appears once scrolled 25% down any page */
.back-to-top {
  position: fixed; bottom: 28px; right: 28px; z-index: 150;
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(99,153,34,0.32);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s, filter 0.18s;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.back-to-top:hover { filter: brightness(1.15); }
@media (max-width: 960px) { .back-to-top { bottom: 20px; right: 16px; width: 44px; height: 44px; } }

.post-hero-wrap { max-width: 900px; margin: -20px auto 0; padding: 0 64px; }
.post-hero-image { width: 100%; aspect-ratio: 16/8; object-fit: cover; border-radius: 16px; display: block; box-shadow: 0 20px 48px rgba(0,0,0,0.12); }
@media (max-width: 960px) { .post-hero-wrap { padding: 0 20px; } .post-hero-image { aspect-ratio: 4/3; } }

.post-wrap { max-width: 780px; margin: 0 auto; }
.content-wrap-wide { max-width: 1200px; margin: 0 auto; }
/* Team photo placeholder — swap the inner content for a real <img> once
   a photo exists; sized and positioned to match where the real photo will go. */
.team-photo-slot {
  width: 100%; aspect-ratio: 21/9; border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, #1c3f66 55%, var(--blue) 130%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; position: relative;
}
.team-photo-slot svg { opacity: 0.55; }
.team-photo-slot-label { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.75); }
@media (max-width: 700px) { .team-photo-slot { aspect-ratio: 4/3; } }

/* Accent shape behind the About opener — soft, decorative, not data */
.about-opener { position: relative; overflow: hidden; border-radius: 16px; padding: 48px 44px; }
.about-opener::before {
  content: ''; position: absolute; top: -80px; right: -100px; width: 340px; height: 340px;
  border-radius: 50%; background: radial-gradient(circle, rgba(55,138,221,0.16), transparent 70%);
  pointer-events: none;
}
.about-opener::after {
  content: ''; position: absolute; bottom: -100px; left: -60px; width: 260px; height: 260px;
  border-radius: 50%; background: radial-gradient(circle, rgba(99,153,34,0.13), transparent 70%);
  pointer-events: none;
}

.content-block { margin-top: 64px; }
.content-block:first-child { margin-top: 0; }
@media (max-width: 960px) { .content-block { margin-top: 44px; } }

/* Animated stat counter — reusable anywhere a number should count up on scroll-into-view */
.stat-highlight { display: flex; align-items: center; gap: 22px; background: rgba(55,138,221,0.06); border: 1px solid rgba(55,138,221,0.14); border-radius: 12px; padding: 24px 28px; }
.stat-counter-value { font-family: 'DM Serif Display', serif; font-size: 42px; color: var(--navy); line-height: 1; white-space: nowrap; }
.stat-highlight-label { font-size: 13px; font-weight: 300; color: var(--muted); line-height: 1.6; }

/* Photo placeholder — used until real photography replaces it; styled so it never looks broken */
.photo-placeholder {
  position: relative; width: 100%; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden;
  background: linear-gradient(135deg, #0C2340 0%, #1A3A5C 55%, #163A2C 100%);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.photo-placeholder-inner { padding: 24px; }
.photo-placeholder svg { width: 34px; height: 34px; stroke: rgba(181,212,244,0.55); fill: none; stroke-width: 1.5; margin-bottom: 10px; }
.photo-placeholder-label { font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(181,212,244,0.55); }

/* Small continuous pulse accent — used sparingly as a single decorative motion element */
.pulse-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.pulse-dot::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--green);
  animation: pulseRing 2.2s ease-out infinite;
}
@keyframes pulseRing { 0% { transform: scale(0.6); opacity: 0.8; } 100% { transform: scale(1.8); opacity: 0; } }

/* Icon row — "Who This Is For" style two-up feature rows */
.icon-row { display: flex; gap: 16px; align-items: flex-start; }
.icon-row-badge { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: rgba(55,138,221,0.10); display: flex; align-items: center; justify-content: center; }
.icon-row-badge svg { width: 20px; height: 20px; stroke: var(--blue); fill: none; stroke-width: 1.8; }

/* ════════════════════════════════
   CONTACT LAYOUT
════════════════════════════════ */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: start; }
.contact-form-shell { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 32px; }
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.form-row label { font-size: 12px; font-weight: 500; color: var(--ink); letter-spacing: 0.02em; }
.form-row input, .form-row textarea, .form-row select {
  font-family: 'DM Sans', sans-serif; font-size: 13.5px; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--cream); color: var(--ink);
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus { outline: none; border-color: var(--blue); background: #fff; }
.contact-side { display: flex; flex-direction: column; gap: 18px; }
.contact-map { width: 100%; height: 220px; border-radius: 10px; border: 1px solid var(--border); overflow: hidden; }
.contact-map iframe { width: 100%; height: 100%; border: 0; }

/* ════════════════════════════════
   FOOTER (every page)
════════════════════════════════ */
.footer { background: var(--navy-deep); padding: 32px 64px; display: flex; justify-content: space-between; align-items: stretch; gap: 48px; }
.footer-brand-col { flex-shrink: 0; max-width: 300px; }
.footer-right-group { display: flex; gap: 64px; }
.footer-logo { font-family: 'DM Serif Display', serif; font-style: normal !important; font-size: 18px; color: #fff; margin-bottom: 10px; }
.footer-tagline { font-size: 12.5px; font-weight: 300; color: rgba(181,212,244,0.65); line-height: 1.7; }
.footer-heading { font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(181,212,244,0.50); margin-bottom: 14px; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 13px; font-weight: 400; color: rgba(181,212,244,0.72); text-decoration: none; transition: color 0.18s; }
.footer-links a:hover { color: #fff; }
.footer-contact-item { font-size: 13px; font-weight: 400; color: rgba(181,212,244,0.72); line-height: 1.7; margin-bottom: 6px; }
.footer-contact-item a { color: inherit; text-decoration: none; transition: color 0.18s; }
.footer-contact-item a:hover { color: #fff; }

/* Address-as-link — tap opens a small chooser between Google Maps / Apple Maps */
.address-link { position: relative; display: inline-block; cursor: pointer; border-bottom: 1px dotted rgba(181,212,244,0.4); }
.address-link:hover { color: #fff; }
.maps-popover {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 20; min-width: 190px;
  background: rgba(6, 14, 38, 0.97); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 6px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
}
.maps-popover.open { opacity: 1; visibility: visible; transform: translateY(0); }

/* Footer phone popover specifically opens downward, not upward — it sits
   below the Contact heading and address in the footer, so the default
   upward-opening style would cover that content instead of clearing it. */
.footer-phone-popover { bottom: auto; top: calc(100% + 8px); transform: translateY(-4px); }
.footer-phone-popover.open { transform: translateY(0); }
.footer-address-popover { bottom: auto; top: calc(100% + 8px); transform: translateY(-4px); }
.footer-address-popover.open { transform: translateY(0); }
.maps-popover a { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 400; color: rgba(181,212,244,0.85); text-decoration: none; }
.maps-popover a svg { flex-shrink: 0; opacity: 0.75; }
.maps-popover a:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* Nav phone icon — tap opens a small chooser between Call / Text */
.nav-phone-link {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  color: rgba(181,212,244,0.85); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
  transition: background 0.18s, color 0.18s;
}
.nav-phone-link:hover, .nav-phone-link:focus-visible { background: rgba(255,255,255,0.13); color: #fff; }
.nav.nav-on-light .nav-phone-link { color: var(--navy); background: rgba(12,35,64,0.06); border-color: rgba(12,35,64,0.14); }
.nav-phone-popover {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 20; min-width: 190px;
  background: rgba(6, 14, 38, 0.97); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 6px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
}
.nav-phone-popover.open { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-phone-popover a { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 400; color: rgba(181,212,244,0.85); text-decoration: none; white-space: nowrap; }
.nav-phone-popover a svg { flex-shrink: 0; opacity: 0.75; }
.nav-phone-popover a:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* Footer phone — Call/Text popover trigger, same behavior on all screen sizes */
.footer-phone-mobile { position: relative; cursor: pointer; border-bottom: 1px dotted rgba(181,212,244,0.4); }
.footer-phone-mobile:hover { color: #fff; }

.footer-bottom { background: #040D18; padding: 14px 64px; display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: rgba(181,212,244,0.70); font-weight: 400; flex-wrap: wrap; gap: 6px; }
.footer-bottom a { color: inherit; text-decoration: none; transition: color 0.18s; }
.footer-bottom a:hover { color: #fff; }

/* ════════════════════════════════
   CTA BAND (every page — closing)
════════════════════════════════ */
.cta-band { background: var(--navy); padding: 72px 64px; text-align: center; position: relative; overflow: hidden; }
.cta-band::before { content: ''; position: absolute; right: -60px; top: -60px; width: 360px; height: 360px; border-radius: 50%; border: 1px solid rgba(55,138,221,0.08); pointer-events: none; }
.cta-band::after { content: ''; position: absolute; left: -40px; bottom: -50px; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(55,138,221,0.06); pointer-events: none; }
.cta-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.20em; text-transform: uppercase; color: rgba(181,212,244,0.40); margin-bottom: 14px; position: relative; }
.cta-title { font-family: 'DM Serif Display', serif; font-size: clamp(30px, 4vw, 46px); color: #fff; font-style: italic; margin-bottom: 14px; line-height: 1.1; position: relative; }
.cta-title em { font-style: normal; color: var(--blue); }
.cta-sub { font-size: 14px; font-weight: 300; color: rgba(181,212,244,0.60); line-height: 1.7; margin-bottom: 36px; max-width: 460px; margin-left: auto; margin-right: auto; position: relative; }
.cta-actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; position: relative; }

/* ════════════════════════════════
   ANIMATIONS + SCROLL-REVEAL
════════════════════════════════ */
@keyframes navExpand { 0% { transform: translateX(-50%) scaleX(0.04); border-radius: 100px; opacity: 0; } 10% { opacity: 1; } 62% { transform: translateX(-50%) scaleX(1); border-radius: 100px; } 82% { transform: translateX(-50%) scaleX(1); border-radius: 14px; } 100% { transform: translateX(-50%) scaleX(1); border-radius: 14px; opacity: 1; } }
@keyframes navContentIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes hFadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.nav { animation: navExpand 1.05s cubic-bezier(0.34,1.3,0.64,1) 0.15s both; }
.nav-logo { animation: navContentIn 0.5s ease-out 0.82s both; }
.nav-links { animation: navContentIn 0.5s ease-out 0.96s both; }
.nav-actions { animation: navContentIn 0.5s ease-out 1.08s both; }

.aos { opacity: 0; transform: translateY(28px); transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); }
.aos.from-left { transform: translateX(-28px); }
.aos.from-right { transform: translateX(28px); }
.aos.visible { opacity: 1; transform: none; }
.d1 { transition-delay: 0.05s !important; } .d2 { transition-delay: 0.12s !important; } .d3 { transition-delay: 0.19s !important; }
.d4 { transition-delay: 0.26s !important; } .d5 { transition-delay: 0.33s !important; } .d6 { transition-delay: 0.40s !important; }

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */
@media (max-width: 960px) {
  .nav { padding: 0 16px; width: calc(100% - 24px); top: 10px; border-radius: 12px; }
  .nav-links { display: none; }
  .nav-btn-portal { display: none; }
  .nav-btn-join { display: none; }
  .nav-burger { display: flex; }
  .mobile-menu { top: 68px; }
  .page-header { padding: 128px 28px 52px; }
  .page-section { padding: 56px 28px; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .blog-grid, .blog-grid.index { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer { flex-direction: column; padding: 36px 28px; gap: 32px; }
  .footer-right-group { flex-direction: column; gap: 32px; }
  .footer-bottom { padding: 14px 28px; flex-direction: column; text-align: center; }
  .cta-band { padding: 56px 28px; }
}
@media (max-width: 520px) {
  .services-grid { grid-template-columns: 1fr; }
  .cta-actions { flex-direction: column; }
}