/* ============================================
   Grace Capital Management — Main Stylesheet
   Navy (#0a1628) & Gold (#C9A84C) — canonical brand palette
   Avenue5 Residential-Inspired Redesign
   ============================================ */

:root {
  --navy: #0a1628;
  --navy-dark: #0a1628;
  --navy-light: #2a3f54;
  --navy-lighter: #3a526b;
  --gold: #C9A84C;
  --gold-light: #e6c65a;
  --gold-dark: #8a6c14;
  --gold-subtle: #f8f3e3;
  --white: #ffffff;
  --off-white: #f8f9fa;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --text: #1f2937;
  --text-light: #6b7280;
  --text-muted: #9ca3af;
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  --radius: 8px;
  --radius-lg: 12px;
  --transition: 0.3s ease;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  line-height: 1.7;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--navy);
  line-height: 1.2;
  font-weight: 700;
}

h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.25rem; }

p { margin-bottom: 1rem; }

a {
  color: var(--navy);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--gold-dark); }

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

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ============ HEADER / NAV (Avenue5 Minimal Style) ============ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

.site-header.header-scrolled {
  background: rgba(15, 26, 38, 0.97);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.nav-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  z-index: 1001;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-ctas {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
}

.nav-ctas li a {
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  transition: all var(--transition);
  text-decoration: none;
  position: relative;
}

.nav-ctas li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 0.3s ease, left 0.3s ease;
}

.nav-ctas li a:hover::after {
  width: 80%;
  left: 10%;
}

.nav-ctas li a:hover {
  color: var(--white);
}

.nav-ctas li a.btn-gold {
  background: var(--gold);
  color: var(--navy-dark) !important;
  font-size: 0.85rem;
  padding: 0.45rem 1rem !important;
  font-weight: 600;
  border-radius: var(--radius);
}

.nav-ctas li a.btn-gold::after { display: none; }

.nav-ctas li a.btn-gold:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
}

/* Mega Menu Toggle (Hamburger) */
.mega-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--white);
  z-index: 1001;
}

.mega-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.mega-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 26px;
}

.mega-icon span {
  display: block;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.mega-icon span:nth-child(1) { width: 26px; }
.mega-icon span:nth-child(2) { width: 20px; }
.mega-icon span:nth-child(3) { width: 14px; }

.mega-toggle:hover .mega-icon span { width: 26px; }

/* ============ MEGA MENU (Full-Screen Slide-In) ============ */
.mega-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 10000;
  pointer-events: none;
  visibility: hidden;
}

.mega-menu::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.mega-menu.open {
  pointer-events: auto;
  visibility: visible;
}

.mega-menu.open::before {
  opacity: 1;
}

.mega-menu-inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(300px, 75vw) !important;
  max-width: 300px !important;
  background: var(--navy-dark);
  padding: 4rem 2rem 2rem;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
}

.mega-menu.open .mega-menu-inner {
  transform: translateX(0);
}

.mega-close {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 2.5rem;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
  font-weight: 300;
}

.mega-close:hover {
  color: var(--gold);
}

.mega-columns {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.mega-col h4 {
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 1.25rem;
}

.mega-col ul {
  list-style: none;
}

.mega-col li {
  margin-bottom: 0.75rem;
}

.mega-col a {
  color: rgba(255,255,255,0.7);
  font-size: 1.05rem;
  font-weight: 500;
  transition: all 0.2s;
  display: inline-block;
  position: relative;
}

.mega-col a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.3s ease;
}

.mega-col a:hover {
  color: var(--white);
}

.mega-col a:hover::after {
  width: 100%;
}

.mega-contact p {
  color: rgba(255,255,255,0.6);
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.mega-contact a {
  color: var(--gold);
  font-size: 1rem;
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 2rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all var(--transition);
  border: none;
  text-decoration: none;
  font-family: var(--font-body);
}

.btn-primary {
  background: var(--gold);
  color: var(--navy-dark);
}

.btn-primary:hover {
  background: var(--gold-light);
  color: var(--navy-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
}

.btn-outline {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.4);
}

.btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}

.btn-navy {
  background: var(--navy);
  color: var(--white);
}

.btn-navy:hover {
  background: var(--navy-light);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-lg {
  padding: 1rem 2.5rem;
  font-size: 1.05rem;
}

/* ============ FULL-SCREEN HERO (Avenue5 Style) ============ */
.hero-fullscreen {
  position: relative;
  height: 100vh;
  min-height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.1);
  z-index: 0;
}

.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 18, 30, 0.55);
  z-index: 1;
}

.hero-fullscreen-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
  padding: 0 2rem;
}

.hero-fullscreen-content .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: var(--gold);
  padding: 0.4rem 1.25rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 2rem;
  backdrop-filter: blur(8px);
}

.hero-fullscreen-content h1 {
  color: var(--white);
  font-size: clamp(2.5rem, 6vw, 5rem);
  margin-bottom: 0;
  line-height: 1.1;
}

.hero-fullscreen-content .hero-accent {
  color: var(--gold);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-family: var(--font-heading);
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.hero-fullscreen-content .hero-accent .accent {
  color: var(--gold);
}

.hero-fullscreen-content .hero-text {
  color: rgba(255,255,255,0.8);
  font-size: 1.15rem;
  line-height: 1.8;
  margin-bottom: 2.5rem;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

.hero-fullscreen-content .hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Hero Stats Bar (bottom of hero) */
.hero-stats-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(15, 26, 38, 0.85);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(212, 175, 55, 0.2);
}

.hero-stats-bar .hero-stat {
  padding: 1.5rem 1rem;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.08);
}

.hero-stats-bar .hero-stat:last-child {
  border-right: none;
}

.hero-stat-number {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gold);
  display: block;
  line-height: 1;
  margin-bottom: 0.35rem;
}

.hero-stat-label {
  color: rgba(255,255,255,0.6);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Scroll Indicator */
.scroll-indicator {
  position: absolute !important;
  bottom: 35px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  z-index: 10;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.4s ease;
  text-decoration: none;
  margin: 0 !important;
  padding: 0;
  float: none !important;
  align-self: auto !important;
}

.scroll-indicator:hover {
  opacity: 1;
}

.scroll-indicator span {
  color: #ffffff;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 300;
}

.scroll-arrow {
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50% { transform: rotate(45deg) translateY(8px); }
}

/* ============ LEGACY HERO (for non-homepage pages) ============ */
.hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  background: linear-gradient(rgba(10,20,35,0.7), rgba(10,20,35,0.85)), url('/images/generated/hero-bg.jpg') center/cover no-repeat;
  overflow: hidden;
  padding-top: 80px;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(transparent, var(--white));
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: var(--gold);
  padding: 0.4rem 1rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.hero h1 {
  color: var(--white);
  margin-bottom: 1.5rem;
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
}

.hero h1 span {
  color: var(--gold);
}

.hero-text {
  color: rgba(255,255,255,0.8);
  font-size: 1.15rem;
  line-height: 1.8;
  margin-bottom: 2rem;
  max-width: 540px;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.hero-stat {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  text-align: center;
  backdrop-filter: blur(10px);
}

/* ============ SECTIONS ============ */
.section {
  padding: 6rem 0;
  position: relative;
}

.section-alt {
  background: var(--gray-50);
}

.section-navy {
  background: var(--navy);
  color: var(--white);
}

.section-navy h2,
.section-navy h3,
.section-navy h4 {
  color: var(--white);
}

/* Diagonal Section Dividers */
.section-diagonal {
  clip-path: polygon(0 4vw, 100% 0, 100% calc(100% - 4vw), 0 100%);
  padding-top: calc(6rem + 4vw);
  padding-bottom: calc(6rem + 4vw);
}

.section-angled-top {
  position: relative;
}

.section-angled-top::before {
  content: '';
  position: absolute;
  top: -4vw;
  left: 0;
  right: 0;
  height: 4vw;
  background: inherit;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem;
}

.section-header .overline {
  display: block;
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.section-header h2 {
  margin-bottom: 1rem;
}

.section-header p {
  color: var(--text-light);
  font-size: 1.1rem;
  line-height: 1.75;
}

/* ============ SCROLL ANIMATIONS ============ */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-section {
  opacity: 1;
}

.fade-section .section-header {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-section.visible .section-header {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger animations for grids */
.fade-section.visible .fade-up:nth-child(1) { transition-delay: 0s; }
.fade-section.visible .fade-up:nth-child(2) { transition-delay: 0.1s; }
.fade-section.visible .fade-up:nth-child(3) { transition-delay: 0.2s; }
.fade-section.visible .fade-up:nth-child(4) { transition-delay: 0.3s; }
.fade-section.visible .fade-up:nth-child(5) { transition-delay: 0.4s; }
.fade-section.visible .fade-up:nth-child(6) { transition-delay: 0.5s; }
.fade-section.visible .fade-up:nth-child(7) { transition-delay: 0.6s; }

/* ============ THREE-CARD FEATURE SECTION ============ */
.feature-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}

.feature-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 400px;
  transform: rotate(-1deg);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
}

.feature-card:nth-child(2) { transform: rotate(0.5deg); }
.feature-card:nth-child(3) { transform: rotate(-0.5deg); }

.feature-card:hover {
  transform: rotate(0) translateY(-8px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.feature-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.feature-card:hover img {
  transform: scale(1.05);
}

.feature-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 26, 38, 0.9) 0%, rgba(26, 43, 60, 0.4) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
}

.feature-card-overlay h3 {
  color: var(--white);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.feature-card-overlay .feature-link {
  color: var(--gold);
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.feature-card-overlay .feature-link::after {
  content: '→';
  transition: transform 0.3s ease;
}

.feature-card:hover .feature-link::after {
  transform: translateX(5px);
}

/* ============ "MORE" TYPOGRAPHY SECTION ============ */
.more-section {
  padding: 8rem 0;
  text-align: center;
}

.more-heading {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: var(--navy);
  line-height: 1.5;
  max-width: 700px;
  margin: 0 auto;
}

.more-heading .accent {
  color: var(--gold);
}

/* ============ SERVICE CARDS ============ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.section-navy .service-card {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
}

.section-navy .service-card h3 {
  color: var(--white);
}

.section-navy .service-card p {
  color: rgba(255,255,255,0.65);
}

.section-navy .service-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--gold);
}

.service-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 1px solid var(--gray-200);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}

a.service-card:hover { color: inherit; }

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform var(--transition);
}

.service-card:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
}

.service-card:hover::before {
  transform: scaleX(1);
}

.service-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: var(--gold-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  font-size: 1.5rem;
}

.section-navy .service-icon {
  background: rgba(212, 175, 55, 0.15);
}

.service-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
}

.service-card p {
  color: var(--text-light);
  font-size: 0.95rem;
  line-height: 1.65;
  margin-bottom: 1rem;
}

.service-card .learn-more,
.learn-more {
  color: var(--gold-dark);
  font-weight: 500;
  font-size: 0.95rem;
  display: inline-block;
  text-decoration: none;
  border-bottom: 1px solid var(--gold-dark);
  padding-bottom: 4px;
  letter-spacing: 0.3px;
  transition: opacity var(--transition), border-color var(--transition);
}

.service-card .learn-more::after,
.learn-more::after {
  content: ' →';
  transition: transform var(--transition);
}

.service-card:hover .learn-more,
.learn-more:hover {
  opacity: 0.85;
  border-bottom-color: rgba(201, 169, 78, 0.5);
}

/* ============ TRUST SECTION ============ */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}

.trust-item {
  padding: 1.5rem;
}

.trust-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.trust-item h4 {
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
}

.trust-item p {
  color: var(--text-light);
  font-size: 0.9rem;
}

/* ============ CTA BANNER ============ */
.cta-banner {
  background: linear-gradient(rgba(10,20,35,0.8), rgba(10,20,35,0.85)), url('/images/generated/cta-banner.jpg') center/cover no-repeat;
  border-radius: var(--radius-lg);
  padding: 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.08);
}

.cta-banner h2 {
  color: var(--white);
  margin-bottom: 1rem;
  position: relative;
}

.cta-banner p {
  color: rgba(255,255,255,0.7);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto 2rem;
  position: relative;
}

/* ============ PAGE HERO ============ */
.page-hero {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
  background-size: cover;
  background-position: center;
  padding: 10rem 0 5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 50vh;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10,20,35,0.7);
  pointer-events: none;
}

.page-hero > * {
  position: relative;
  z-index: 1;
}

.page-hero h1 {
  color: var(--white);
  margin-bottom: 1rem;
}

.page-hero p {
  color: rgba(255,255,255,0.7);
  font-size: 1.15rem;
  max-width: 600px;
  margin: 0 auto;
}

.page-hero .overline {
  display: block;
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

/* Page-specific hero images — ONLY for pages WITHOUT video heroes */
/* Pages WITH video: wealth, 1031, investments, about, services, homepage — use background: none */
.page-hero-about       { background: none; } /* has video */
.page-hero-wealth      { background: none; } /* has video */
.page-hero-1031        { background: none; } /* has video */
.page-hero-investments { background: none; } /* has video */
.page-hero-idc         { background: none; } /* has video */
/* Pages WITHOUT video — keep fallback images */
.page-hero-contact     { background-image: url('/images/generated/contact.jpg'); }
.page-hero-resources   { background-image: url('/images/generated/resources.jpg'); }
.page-hero-tools       { background-image: url('/images/generated/tools-hero.jpg'); }
.page-hero-tools::before { background: rgba(10,20,35,0.45); }
.page-hero-oz          { background-image: url('/images/generated/opportunity-zones.jpg'); }
.page-hero-dev         { background-image: url('/images/generated/development-deals.jpg'); }
.page-hero-tlh         { background-image: url('/images/generated/tax-loss-harvest.jpg'); }
/* tools gradient removed — using image from line 1094 */

/* ============ PAGE CONTENT ============ */
.page-content {
  padding: 4rem 0;
}

.page-content .container {
  max-width: 900px;
}

.page-content h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-200);
}

.page-content h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.page-content h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.page-content ul, .page-content ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.page-content li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

/* ============ TEAM SECTION — Navy Cards with Oval Photos ============ */
.team-grid-avenue {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin: 3rem auto;
  max-width: 1100px;
}
.team-grid-avenue .team-card-avenue {
  width: calc(33.333% - 1.34rem);
}

.team-card-avenue {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: all 0.4s ease;
  display: grid;
  grid-template-rows: auto 1fr;
}

.team-card-avenue:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.team-navy-card {
  background: var(--navy);
  color: #fff;
  padding: 2.5rem 2rem 2rem;
}

.team-photo-container {
  margin: 0 auto 1.5rem;
  width: 180px;
  height: 240px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--gold);
  box-shadow: 0 8px 25px rgba(0,0,0,0.2), inset 0 0 10px rgba(0,0,0,0.1);
}

.team-photo-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.4s ease;
}

.team-card-avenue:hover .team-photo-container img {
  transform: scale(1.05);
}

.team-header-info {
  text-align: center;
  padding: 0 1rem;
}

.team-header-info h3 {
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  margin: 0 0 0.25rem;
  color: #fff;
}

.team-title {
  color: var(--gold);
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0 0 1rem;
  letter-spacing: 0.05em;
}

.team-contact {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.85);
  margin: 0;
  text-align: center;
  font-family: 'Playfair Display', Georgia, serif;
}

.team-contact a {
  color: var(--gold-light);
  text-decoration: none;
}

.team-contact a:hover {
  color: #fff;
}

.team-bio-box {
  background: var(--white);
  padding: 1.75rem 2rem;
  border-top: 1px solid var(--gray-200);
  flex: 1;
}

.team-bio {
  color: var(--text);
  line-height: 1.7;
  font-size: 0.95rem;
  margin: 0 0 0.8rem 0;
  text-align: left;
  text-indent: 1.5em;
}
.team-bio:last-child {
  margin-bottom: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .team-grid-avenue {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .team-grid-avenue {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .team-navy-card {
    padding: 2rem 1.5rem 1.5rem;
  }
  .team-photo-container {
    width: 160px;
    height: 210px;
  }
}

/* Legacy team grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  margin: 3rem 0;
}

.team-card {
  text-align: center;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow);
}

.team-title {
  color: var(--gold-dark);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.team-card p {
  color: var(--text-light);
  font-size: 0.95rem;
}

/* Real team headshot photos */
.team-photo-img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 15%;
  margin: 0 auto 1.5rem;
  display: block;
  border: 4px solid var(--gold);
  box-shadow: 0 4px 20px rgba(26,43,60,0.25);
}

/* ============ SERVICES PAGE ============ */
.service-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  padding: 3rem 0;
  border-bottom: 1px solid var(--gray-200);
}

.service-detail:last-child {
  border-bottom: none;
}

.service-detail.reverse {
  direction: rtl;
}

.service-detail.reverse > * {
  direction: ltr;
}

.service-detail-content h3 {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.service-detail-content p {
  color: var(--text-light);
  line-height: 1.75;
}

.service-detail-visual {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 1px solid var(--gray-200);
}

/* ============ TIMELINE ============ */
.timeline {
  position: relative;
  padding: 2rem 0;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gold);
  transform: translateX(-50%);
}

.timeline-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 2rem;
  position: relative;
}

.timeline-item:nth-child(odd) {
  padding-right: calc(50% + 2rem);
  text-align: right;
}

.timeline-item:nth-child(even) {
  padding-left: calc(50% + 2rem);
}

.timeline-dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--white);
  box-shadow: var(--shadow);
  z-index: 1;
}

.timeline-content {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--gray-200);
}

.timeline-content h4 {
  color: var(--gold-dark);
  margin-bottom: 0.5rem;
}

.timeline-content p {
  color: var(--text-light);
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* Simple timeline */
.timeline-simple {
  position: relative;
  padding-left: 2rem;
}

.timeline-simple::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--gold), var(--gold-dark));
  border-radius: 2px;
}

.timeline-step {
  position: relative;
  padding: 0 0 2.5rem 2rem;
}

.timeline-step:last-child { padding-bottom: 0; }

.timeline-step::before {
  content: '';
  position: absolute;
  left: -1.5rem;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--white);
  box-shadow: var(--shadow);
}

.timeline-step .step-label {
  display: inline-block;
  background: var(--gold-subtle);
  color: var(--gold-dark);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.15rem 0.6rem;
  border-radius: 4px;
  margin-bottom: 0.4rem;
  letter-spacing: 0.03em;
}

.timeline-step h4 {
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}

.timeline-step p {
  color: var(--text-light);
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* ============ FAQ ============ */
.faq-list { max-width: 800px; margin: 0 auto; }

.faq-item {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
  overflow: hidden;
  background: var(--white);
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 1.25rem 1.5rem;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background var(--transition);
}

.faq-question:hover { background: var(--gray-50); }

.faq-question::after {
  content: '+';
  font-size: 1.5rem;
  color: var(--gold);
  font-weight: 300;
  transition: transform var(--transition);
  flex-shrink: 0;
  margin-left: 1rem;
}

.faq-item.active .faq-question::after { content: '−'; }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-item.active .faq-answer { max-height: 500px; }

.faq-answer-inner {
  padding: 0 1.5rem 1.25rem;
  color: var(--text-light);
  line-height: 1.75;
}

/* ============ CONTACT ============ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.contact-form {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--gray-200);
}

.form-group { margin-bottom: 1.25rem; }

.form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  color: var(--navy);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  background: var(--white);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

.form-group textarea { min-height: 140px; resize: vertical; }

.contact-info { padding: 1rem 0; }

.contact-info-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.contact-info-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--gold-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.contact-info-item h4 { font-size: 1rem; margin-bottom: 0.25rem; }

.contact-info-item p {
  color: var(--text-light);
  font-size: 0.95rem;
  margin-bottom: 0;
}

.map-placeholder {
  background: var(--gray-100);
  border-radius: var(--radius-lg);
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border: 1px solid var(--gray-200);
  margin-top: 2rem;
}

.calendly-placeholder {
  background: var(--gray-50);
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius-lg);
  padding: 3rem;
  text-align: center;
  color: var(--text-light);
  margin-top: 2rem;
}

/* ============ RESOURCES / BLOG ============ */
.resources-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.resource-card-v2 {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.resource-card-v2:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  color: inherit;
}

.resource-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
  z-index: 0;
}

.resource-card-v2:hover .resource-card-bg {
  transform: scale(1.06);
}

.resource-card-overlay {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  background: linear-gradient(to top, rgba(10, 18, 30, 0.92) 0%, rgba(10, 18, 30, 0.6) 50%, rgba(10, 18, 30, 0.2) 100%);
  padding: 1.75rem;
}

.resource-icon-v2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 10px;
  backdrop-filter: blur(8px);
  flex-shrink: 0;
}

.resource-card-bottom {
  margin-top: auto;
}

.resource-meta-v2 {
  display: flex;
  gap: 1rem;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.resource-card-v2 h3 {
  font-size: 1.35rem;
  color: var(--white);
  margin-bottom: 0.6rem;
  line-height: 1.3;
  font-family: var(--font-heading);
}

.resource-excerpt-v2 {
  color: rgba(255,255,255,0.65);
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.resource-read-more-v2 {
  color: var(--gold-dark);
  font-weight: 500;
  font-size: 0.9rem;
  display: inline-block;
  text-decoration: none;
  border-bottom: 1px solid var(--gold-dark);
  padding-bottom: 4px;
  letter-spacing: 0.3px;
  transition: opacity 0.3s ease, border-color 0.3s ease;
}

.resource-read-more-v2::after {
  content: ' →';
}

.resource-card-v2:hover .resource-read-more-v2 {
  opacity: 0.85;
  border-bottom-color: rgba(201, 169, 78, 0.5);
}

@media (max-width: 768px) {
  .resources-grid {
    grid-template-columns: 1fr;
  }
  .resource-card-v2 {
    min-height: 300px;
  }
}

/* ============ ARTICLE ============ */
.article-content {
  max-width: 780px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

.article-content h2 { margin-top: 2.5rem; }

.article-content blockquote {
  border-left: 4px solid var(--gold);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  background: var(--gold-subtle);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
  color: var(--navy);
}

/* ============ DISCLAIMER BOX ============ */
.disclaimer-box {
  background: var(--gold-subtle);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  font-size: 0.85rem;
  color: var(--gray-600);
  line-height: 1.65;
}

.disclaimer-box strong { color: var(--navy); }

/* ============ FOOTER (Avenue5 Multi-Column) ============ */
.site-footer {
  background: var(--navy-dark);
  color: rgba(255,255,255,0.7);
}

.footer-main {
  padding: 5rem 0 4rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
}

.footer-logo {
  text-decoration: none;
  display: inline-flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.footer-desc {
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  transition: all 0.3s ease;
}

.social-link:hover {
  background: var(--gold);
  color: var(--navy-dark);
}

.footer-contact-info p {
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}

.footer-contact-info a {
  color: var(--gold);
}

.footer-links h4 {
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1.25rem;
}

.footer-links ul {
  list-style: none;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-links a {
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
  transition: color var(--transition);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--gold);
}

.footer-team-list li {
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}

.footer-team-list li strong {
  color: rgba(255,255,255,0.7);
}

.license-list li {
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
}

.footer-compliance {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 2rem 0;
}

.footer-compliance-inner {
  text-align: center;
}

.footer-licenses {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-bottom: 1rem;
}

.footer-licenses span {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
}

.footer-compliance p {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.7;
  max-width: 900px;
  margin: 0 auto;
}

.footer-copy {
  margin-top: 0.75rem !important;
  color: rgba(255,255,255,0.3) !important;
}

/* ============ TESTIMONIAL ============ */
.testimonial-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-md);
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid var(--gray-200);
}

.testimonial-quote {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--navy);
  font-style: italic;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  position: relative;
}

.testimonial-quote::before {
  content: '"';
  font-size: 4rem;
  color: var(--gold);
  font-family: var(--font-heading);
  line-height: 1;
  display: block;
  margin-bottom: -0.5rem;
}

.testimonial-author { font-weight: 600; color: var(--navy); }
.testimonial-role { color: var(--text-light); font-size: 0.9rem; }

/* ============ INLINE CONTENT ============ */
.content-image {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  object-fit: cover;
}

.image-text-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  margin: 3rem 0;
}

.image-text-row.reverse .image-text-image { order: 2; }
.image-text-row.reverse .image-text-content { order: 1; }

.image-text-image img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

.image-text-content h3 {
  font-size: 1.5rem;
  color: var(--navy);
  margin-bottom: 1rem;
}

.image-text-content p {
  color: var(--text-light);
  line-height: 1.8;
  font-size: 1.05rem;
}

/* Video Section */
.video-section {
  background: var(--navy);
  padding: 5rem 0;
}

.video-section .section-header h2 { color: #fff; }
.video-section .section-header p { color: rgba(255,255,255,0.7); }
.video-section .overline { color: var(--gold); }

.video-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.3);
  border: 2px solid var(--gold);
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Inline Photo Strip */
.inline-photo {
  position: relative;
  width: 100%;
  height: clamp(300px, 25vw, 500px);
  overflow: hidden;
  margin: 0;
}

.inline-photo img {
  width: 100%;
  height: 120%;
  object-fit: cover;
  display: block;
  transition: transform 0.1s linear;
}

.inline-photo::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(26,43,60,0.15), rgba(26,43,60,0.3));
  pointer-events: none;
}

.inline-photo-caption {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 500;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  z-index: 1;
  white-space: nowrap;
}

/* About Story Image */
.story-image-wrapper {
  margin: 2.5rem 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

.story-image-wrapper img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}

/* CTA with Image */
.cta-image-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.cta-image-section .cta-image-side { min-height: 300px; }

.cta-image-section .cta-image-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cta-image-section .cta-content-side {
  background: var(--navy);
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cta-image-section .cta-content-side h2 { color: #fff; margin-bottom: 1rem; }

.cta-image-section .cta-content-side p {
  color: rgba(255,255,255,0.75);
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

/* Featured Image */
.featured-image {
  margin: -2rem auto 2rem;
  max-width: 900px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

.featured-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}

/* Contact Image */
.contact-hero-image {
  margin-bottom: 2rem;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.contact-hero-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .hero-content { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-stats { grid-template-columns: repeat(4, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .service-detail { grid-template-columns: 1fr; }
  .service-detail.reverse { direction: ltr; }
  .team-grid-avenue { grid-template-columns: repeat(2, 1fr); }
  .feature-cards { grid-template-columns: repeat(2, 1fr); }
  .feature-card:nth-child(3) { grid-column: span 2; max-width: 500px; margin: 0 auto; }
  .mega-columns { flex-direction: column; gap: 1.5rem; }
}

@media (max-width: 768px) {
  /* Nav mobile */
  .nav-ctas { display: none; }
  
  .mega-menu-inner {
    width: 100%;
    padding: 4rem 2rem 2rem;
  }
  
  .mega-columns {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  /* Hero mobile */
  .hero-fullscreen {
    height: auto !important;
    min-height: auto !important;
    padding: 6rem 1.5rem 0 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
  }
  
  .hero-fullscreen-content {
    padding: 0 0 2rem !important;
    position: relative !important;
    z-index: 2 !important;
    text-align: center !important;
  }
  
  .hero-fullscreen-content h1 {
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
  }
  
  .hero-fullscreen-content .hero-accent {
    font-size: 1.4rem !important;
  }
  
  .hero-fullscreen-content .hero-text {
    font-size: 0.95rem !important;
    padding: 0 !important;
  }
  
  .hero-fullscreen-content .hero-buttons {
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }
  .hero-fullscreen-content .hero-buttons .btn {
    width: 100% !important;
    text-align: center !important;
  }
  
  .hero-stats-bar {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 2 !important;
  }
  
  .hero-stats-bar .hero-stat {
    padding: 0.75rem 0.5rem !important;
  }
  
  .hero-stat-number { font-size: 1.1rem !important; }
  .hero-stat-label { font-size: 0.65rem !important; }
  
  .scroll-indicator { bottom: 20px; }
  
  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .hero-buttons .btn {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
  
  /* Sections */
  .section { padding: 4rem 0; }
  .section-diagonal {
    clip-path: polygon(0 2vw, 100% 0, 100% calc(100% - 2vw), 0 100%);
    padding-top: calc(4rem + 2vw);
    padding-bottom: calc(4rem + 2vw);
  }
  
  .services-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .resources-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .team-grid-avenue { grid-template-columns: 1fr; }
  
  .team-card-photo { height: 280px; }
  
  .values-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .feature-cards { grid-template-columns: 1fr; }
  .feature-card,
  .feature-card:nth-child(2),
  .feature-card:nth-child(3) {
    transform: none;
    max-width: 100%;
    grid-column: auto;
  }
  
  .cta-banner { padding: 2.5rem 1.5rem; }
  .page-hero { padding: 8rem 0 3rem; }
  
  .image-text-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .image-text-row.reverse .image-text-image,
  .image-text-row.reverse .image-text-content {
    order: unset;
  }
  .image-text-image img { height: 250px; }
  .inline-photo { height: 200px; }
  .cta-image-section { grid-template-columns: 1fr; }
  .cta-image-section .cta-image-side { min-height: 200px; }
  .featured-image img { height: 250px; }
  .video-container { border-radius: 8px; }
  .story-image-wrapper img { height: 200px; }
  
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    padding-left: 2.5rem;
    padding-right: 0;
    text-align: left;
  }
  .timeline::before { left: 10px; }
  .timeline-dot { left: 10px; }
  
  .team-photo-img { width: 140px; height: 140px; }
  
  .footer-licenses { gap: 0.75rem; }
}

@media (max-width: 480px) {
  .hero-fullscreen-content h1 { font-size: 1.85rem; }
  .hero-fullscreen-content .hero-accent { font-size: 1.5rem; }
  .hero-stats-bar { grid-template-columns: 1fr 1fr; }
  .hero-stat { padding: 1rem; }
  .hero-stat-number { font-size: 1.25rem; }
  .trust-grid { grid-template-columns: 1fr; }
}

/* ============ AVENUE5 INNER PAGE REDESIGN ============ */

/* Full-Viewport Page Hero */
.page-hero-fullvh {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10rem 2rem 6rem;
  position: relative;
  overflow: hidden;
}

.page-hero-fullvh .hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
}

.page-hero-fullvh .hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 18, 30, 0.55);
  z-index: 1;
}

.page-hero-fullvh > div {
  position: relative;
  z-index: 2;
}

.page-hero-fullvh h1 {
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
}

.page-hero-fullvh p {
  font-size: 1.2rem;
  max-width: 650px;
  margin: 0 auto;
}

/* Gold accent spans in headings */
.accent {
  color: var(--gold);
}

.section-navy .accent {
  color: var(--gold);
}

/* Diagonal Dividers */
.diagonal-divider {
  height: 5vw;
  min-height: 40px;
  max-height: 80px;
  position: relative;
  z-index: 1;
  margin-top: -1px;
  margin-bottom: -1px;
}

.diagonal-divider-gray {
  background: var(--white);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
}

.diagonal-divider-gray + .section-alt {
  padding-top: 4rem;
}

.diagonal-divider-white {
  background: var(--gray-50);
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
}

.diagonal-divider-white + .section {
  padding-top: 4rem;
}

.diagonal-divider-alt {
  background: var(--white);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
}

/* Editorial Two-Column Layout */
.editorial-two-col {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 4rem;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.editorial-text .overline {
  display: block;
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.editorial-text h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  margin-bottom: 1.5rem;
}

.editorial-lead {
  font-size: 1.15rem;
  line-height: 1.85;
  color: var(--text);
  margin-bottom: 1.25rem;
}

.editorial-text p {
  color: var(--text-light);
  line-height: 1.8;
  font-size: 1.05rem;
}

.editorial-image img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

/* ============ VALUES GRID — Avenue5 ============ */
.values-grid-avenue {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.value-card-avenue {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2.25rem 1.75rem;
  border: 1px solid var(--gray-200);
  text-align: center;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.value-card-avenue::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform var(--transition);
}

.value-card-avenue:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gold);
}

.value-card-avenue:hover::before {
  transform: scaleX(1);
}

.value-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  background: var(--gold-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  font-size: 1.5rem;
}

.value-card-avenue h3 {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.value-card-avenue p {
  color: var(--text-light);
  font-size: 0.92rem;
  line-height: 1.65;
  margin-bottom: 0;
}

/* ============ TIMELINE — Avenue5 ============ */
.timeline-avenue {
  position: relative;
  padding-left: 0;
  max-width: 700px;
  margin: 0 auto;
}

.timeline-avenue::before {
  display: none;
}

.timeline-avenue-step {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin-bottom: 3rem;
  position: relative;
}

.timeline-avenue-step:last-child {
  margin-bottom: 0;
}

.timeline-avenue-number {
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 15px rgba(26, 43, 60, 0.3);
}

.timeline-avenue-content {
  padding-top: 0.75rem;
}

.timeline-avenue-content .step-label {
  display: inline-block;
  background: var(--gold-subtle);
  color: var(--gold-dark);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.15rem 0.6rem;
  border-radius: 4px;
  margin-bottom: 0.4rem;
  letter-spacing: 0.03em;
}

.timeline-avenue-content h4 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.timeline-avenue-content p {
  color: var(--text-light);
  font-size: 0.98rem;
  line-height: 1.7;
  margin-bottom: 0;
}

/* ============ INVESTMENT CARDS GRID ============ */
.investment-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.investment-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 380px;
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.investment-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  color: inherit;
}

.investment-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}

.investment-card:hover .investment-card-bg {
  transform: scale(1.08);
}

.investment-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 26, 38, 1) 0%, rgba(15, 26, 38, 0.98) 35%, rgba(15, 26, 38, 0.5) 45%, rgba(15, 26, 38, 0.05) 55%, rgba(15, 26, 38, 0) 60%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem 2rem 1rem;
}

.investment-card-overlay .overline {
  display: block;
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.investment-card-overlay h3 {
  color: var(--white);
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.investment-card-overlay p {
  color: rgba(255,255,255,0.7);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.investment-card-link {
  color: var(--gold-dark);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 1px solid var(--gold-dark);
  padding-bottom: 3px;
  letter-spacing: 0.3px;
  transition: opacity 0.3s ease, border-color 0.3s ease;
  display: inline-block;
  margin-left: auto;
}

.investment-card-overlay .investment-card-link {
  align-self: flex-end;
}

.investment-card-link::after {
  content: ' \2192';
}

.investment-card:hover .investment-card-link {
  opacity: 0.85;
  border-bottom-color: rgba(201, 169, 78, 0.5);
}

/* ============ CONTACT — Avenue5 ============ */
.contact-grid-avenue {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 3rem;
  align-items: start;
}

.contact-form-avenue {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 3rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray-200);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.contact-sidebar {
  position: sticky;
  top: 100px;
}

.contact-info-card {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 1px solid var(--gray-200);
  margin-bottom: 1.5rem;
}

/* ============ OVERLINE IN CONTENT ============ */
.image-text-content .overline,
.service-detail-content .overline {
  display: block;
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

/* ============ RESPONSIVE — INNER PAGES ============ */
@media (max-width: 1024px) {
  .editorial-two-col {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .values-grid-avenue {
    grid-template-columns: repeat(2, 1fr);
  }
  .contact-grid-avenue {
    grid-template-columns: 1fr;
  }
  .contact-sidebar {
    position: static;
  }
}

@media (max-width: 768px) {
  .page-hero-fullvh {
    min-height: 70vh;
    padding: 8rem 1.5rem 4rem;
  }
  .page-hero-fullvh h1 {
    font-size: 2rem;
  }
  .page-hero-fullvh p {
    font-size: 1rem;
  }
  .diagonal-divider {
    height: 3vw;
    min-height: 20px;
  }
  .editorial-two-col {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .editorial-image img {
    height: 280px;
  }
  .values-grid-avenue {
    grid-template-columns: 1fr;
  }
  .timeline-avenue::before {
    left: 25px;
  }
  .timeline-avenue-number {
    width: 50px;
    height: 50px;
    font-size: 1.15rem;
  }
  .timeline-avenue-step {
    gap: 1.25rem;
    margin-bottom: 2rem;
  }
  .investment-cards-grid {
    grid-template-columns: 1fr;
  }
  .investment-card {
    height: 320px;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .contact-form-avenue {
    padding: 2rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .page-hero-fullvh {
    min-height: 60vh;
    padding: 7rem 1rem 3rem;
  }
  .page-hero-fullvh h1 {
    font-size: 1.75rem;
  }
  .investment-card {
    height: 280px;
  }
  .investment-card-overlay {
    padding: 1.5rem;
  }
  .investment-card-overlay h3 {
    font-size: 1.25rem;
  }
}

/* ===== FIX: Gold-subtle background text contrast (global) ===== */
.cta-banner[style*="gold-subtle"],
.cta-banner[style*="f8f3e3"],
div[style*="gold-subtle"],
div[style*="f8f3e3"] {
  color: var(--navy) !important;
}
.cta-banner[style*="gold-subtle"] h3,
.cta-banner[style*="gold-subtle"] p,
.cta-banner[style*="f8f3e3"] h3,
.cta-banner[style*="f8f3e3"] p,
div[style*="gold-subtle"] h3,
div[style*="gold-subtle"] p,
div[style*="f8f3e3"] h3,
div[style*="f8f3e3"] p {
  color: var(--navy) !important;
}
.cta-banner[style*="gold-subtle"] p[style*="italic"],
div[style*="gold-subtle"] p[style*="italic"] {
  color: var(--text-light) !important;
}

/* ===== FIX: Scenario/example boxes with gold-subtle bg ===== */
.cta-banner[style*="border-left"] {
  color: var(--navy) !important;
}
.cta-banner[style*="border-left"] h3 {
  color: var(--navy) !important;
}
.cta-banner[style*="border-left"] p {
  color: var(--text) !important;
}
.cta-banner[style*="border-left"] p[style*="italic"] {
  color: var(--text-light) !important;
}

/* ============================================================
   COMPREHENSIVE MOBILE RESPONSIVENESS — Grace Capital
   Single authoritative block. Overrides all earlier queries.
   ============================================================ */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
}

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

  /* --- NAVIGATION --- */
  .desktop-only,
  ul.nav-ctas,
  .nav-ctas {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  .nav-right {
    display: flex !important;
    align-items: center !important;
  }
  .mega-toggle {
    display: flex !important;
  }
  .site-header .nav-container {
    padding: 0 1rem !important;
  }

  /* --- MEGA MENU (full-screen mobile overlay) --- */
  .mega-menu {
    width: 100% !important;
    height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    position: fixed !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 !important;
  }
  .mega-menu-inner {
    width: min(300px, 85vw) !important;
    max-width: 300px !important;
    padding: 4rem 1.5rem 2rem !important;
  }
  .mega-columns {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
  .mega-col {
    padding: 0 !important;
  }
  .mega-close {
    top: 1rem !important;
    right: 1rem !important;
    font-size: 2rem !important;
  }

  /* --- HOMEPAGE HERO (fullscreen variant) --- */
  .hero-fullscreen {
    height: auto !important;
    min-height: auto !important;
    padding: 6rem 0 0 !important;
  }
  .hero-fullscreen-content {
    padding: 0 1.5rem 2rem !important;
  }
  .hero-fullscreen-content h1 {
    font-size: clamp(1.6rem, 6vw, 2.5rem) !important;
    line-height: 1.2 !important;
  }
  .hero-fullscreen-content .hero-accent {
    font-size: clamp(1.3rem, 5vw, 2rem) !important;
  }
  .hero-fullscreen-content .hero-text {
    font-size: 0.95rem !important;
    padding: 0 0.5rem !important;
  }
  .hero-badge {
    font-size: 0.8rem !important;
    margin-left: 0 !important;
    left: auto !important;
  }

  /* --- HERO STATS BAR --- */
  .hero-stats-bar,
  .hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 1rem !important;
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin-top: 1.5rem !important;
  }
  .hero-stats-bar .hero-stat,
  .hero-stat {
    min-width: 0 !important;
    padding: 0.75rem !important;
  }
  .hero-stat-number {
    font-size: 1rem !important;
  }
  .hero-stat-label {
    font-size: 0.7rem !important;
  }

  /* --- HERO BUTTONS --- */
  .hero-buttons {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
    width: 100% !important;
    padding: 0 1rem !important;
  }
  .hero-buttons .btn {
    width: 100% !important;
    max-width: 320px !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* --- HERO VIDEO --- */
  .hero-video, .hero video {
    min-height: 100% !important;
    object-fit: cover !important;
  }

  /* Wealth hero on mobile: fill the whole hero box with the video using a GENTLE
     crop. The hero is content-sized (~340px), so cover here shows ~2/3 of the
     frame width — far less zoomed than the default tall-hero crop, and with no
     navy letterbox gap. Navy bg kept as a safe fallback behind the video. */
  .page-hero-fullvh.page-hero-wealth {
    background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%) !important;
  }
  .page-hero-fullvh.page-hero-wealth .hero-video {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
  }

  /* --- SCROLL INDICATOR --- */
  .scroll-indicator {
    bottom: 15px;
  }

  /* --- GENERIC HERO (.hero class) --- */
  .hero {
    padding: 6rem 1.5rem 3rem !important;
    text-align: center !important;
    min-height: auto !important;
  }
  .hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 1rem !important;
    max-width: 100% !important;
  }
  .hero-left, .hero-right {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  /* --- PAGE HEROES (inner pages) --- */
  .page-hero {
    padding: 6rem 1.5rem 3rem !important;
    min-height: auto !important;
  }
  .page-hero h1 {
    font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
  }
  .page-hero p {
    font-size: 0.95rem !important;
    padding: 0 0.5rem !important;
  }

  /* --- FULLVH PAGE HERO (inner pages with video) --- */
  .page-hero-fullvh {
    min-height: 65vh !important;
    padding: 7rem 1.5rem 3rem !important;
  }
  .page-hero-fullvh h1 {
    font-size: clamp(1.6rem, 5vw, 2.25rem) !important;
  }
  .page-hero-fullvh p {
    font-size: 0.95rem !important;
  }

  /* --- TYPOGRAPHY --- */
  h1 {
    font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
  }
  h2 {
    font-size: clamp(1.25rem, 4vw, 2rem) !important;
  }
  h3 {
    font-size: clamp(1.1rem, 3.5vw, 1.5rem) !important;
  }
  p, li, td, th, blockquote, .editorial-lead, .editorial-text p {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }

  /* --- SECTIONS & CONTAINERS --- */
  .section {
    padding: 3rem 0 !important;
  }
  .container {
    padding: 0 1.25rem !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* --- ALL GRIDS → SINGLE COLUMN --- */
  .services-grid,
  .trust-grid,
  .investment-cards-grid,
  .team-grid,
  .team-grid-avenue,
  .values-grid,
  .values-grid-avenue,
  .footer-grid,
  .contact-grid,
  .contact-grid-avenue,
  .editorial-two-col,
  .intro-grid,
  .attractions-grid,
  .amenities-grid,
  .amenities-detail-grid,
  .resources-grid,
  .feature-cards {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Image-text rows → stack */
  .image-text-row {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
  .image-text-row.reverse .image-text-image,
  .image-text-row.reverse .image-text-content {
    order: unset !important;
  }
  .image-text-image img {
    height: 220px !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  /* --- INVESTMENT CARDS --- */
  .investment-card {
    height: 260px !important;
    min-height: 200px !important;
  }
  .investment-card-overlay {
    padding: 1.5rem !important;
  }
  .investment-card-overlay h3 {
    font-size: 1.25rem !important;
  }
  .investment-card-overlay p {
    font-size: 0.9rem !important;
  }

  /* --- SERVICE CARDS --- */
  .service-card {
    width: 100% !important;
    padding: 1.5rem !important;
  }
  .service-detail {
    grid-template-columns: 1fr !important;
  }
  .service-detail.reverse {
    direction: ltr !important;
  }

  /* --- TEAM CARDS --- */
  .team-card {
    width: 100% !important;
    padding: 1.5rem !important;
  }
  .team-card-photo {
    height: 250px !important;
    width: 100% !important;
  }
  .team-photo-img {
    width: 120px !important;
    height: 120px !important;
  }

  /* --- FEATURE CARDS --- */
  .feature-card,
  .feature-card:nth-child(2),
  .feature-card:nth-child(3) {
    transform: none !important;
    max-width: 100% !important;
    grid-column: auto !important;
  }

  /* --- CONTACT PAGE --- */
  .contact-form-avenue {
    padding: 1.5rem 1.25rem !important;
  }
  .form-row {
    grid-template-columns: 1fr !important;
  }
  .contact-sidebar {
    position: static !important;
  }

  /* --- EDITORIAL --- */
  .editorial-image img {
    height: 240px !important;
  }

  /* --- TIMELINE (original) --- */
  .timeline::before {
    left: 10px !important;
  }
  .timeline-dot {
    left: 10px !important;
  }
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    padding-left: 2.5rem !important;
    padding-right: 0 !important;
    text-align: left !important;
  }

  /* --- TIMELINE (Avenue5 variant) --- */
  .timeline-avenue::before {
    left: 22px !important;
  }
  .timeline-avenue-number {
    width: 45px !important;
    height: 45px !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important;
  }
  .timeline-avenue-step {
    gap: 1rem !important;
    margin-bottom: 2rem !important;
  }
  .timeline-avenue-content h4 {
    font-size: 1.05rem !important;
  }

  /* --- CTA SECTIONS --- */
  .cta-banner {
    padding: 2rem 1.25rem !important;
  }
  .cta-image-section {
    grid-template-columns: 1fr !important;
  }
  .cta-image-section .cta-image-side {
    min-height: 180px !important;
  }

  /* --- MEDIA ITEMS --- */
  .inline-photo {
    height: 180px !important;
  }
  .featured-image img {
    height: 220px !important;
  }
  .video-container {
    border-radius: 8px !important;
  }
  .story-image-wrapper img {
    height: 180px !important;
  }

  /* --- DIAGONAL DIVIDERS — flatten to prevent overflow --- */
  .section-diagonal {
    clip-path: none !important;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .section-diagonal::before,
  .section-angled-top::before {
    clip-path: none !important;
  }
  .diagonal-divider {
    height: 2vw !important;
    min-height: 12px !important;
    max-height: 30px !important;
  }

  /* --- FOOTER --- */
  .footer-licenses {
    gap: 0.75rem !important;
  }

  /* --- SCENARIO/EXAMPLE BOXES (gold-subtle bg) --- */
  .cta-banner[style*="border-left"] h3,
  .cta-banner[style*="border-left"] p {
    text-align: left !important;
    color: var(--navy) !important;
  }
}

/* ---------- SMALL PHONES (≤480px) ---------- */
@media (max-width: 480px) {

  /* Tighter hero text */
  .hero-fullscreen-content h1,
  .hero h1, .hero-content h1 {
    font-size: 1.5rem !important;
  }
  .hero-fullscreen-content .hero-accent,
  .hero h2, .hero-content h2 {
    font-size: 1.25rem !important;
  }

  /* Page heroes */
  .page-hero-fullvh {
    min-height: 55vh !important;
    padding: 6rem 1rem 2.5rem !important;
  }
  .page-hero-fullvh h1 {
    font-size: 1.5rem !important;
  }
  .page-hero {
    padding: 5.5rem 1rem 2.5rem !important;
  }

  /* Stats stay 2-col but tighter */
  .hero-stats-bar,
  .hero-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    padding: 0.75rem !important;
  }
  .hero-stat {
    padding: 0.5rem !important;
  }
  .hero-stat-number {
    font-size: 0.9rem !important;
  }

  /* Trust grid single on tiny screens */
  .trust-grid {
    grid-template-columns: 1fr !important;
  }

  /* Smaller investment cards */
  .investment-card {
    height: 230px !important;
  }
  .investment-card-overlay {
    padding: 1.25rem !important;
  }
  .investment-card-overlay h3 {
    font-size: 1.1rem !important;
  }

  /* Tighter containers */
  .container {
    padding: 0 1rem !important;
  }

  /* Sections */
  .section {
    padding: 2.5rem 0 !important;
  }

  /* CTA */
  .cta-banner {
    padding: 1.75rem 1rem !important;
  }

  /* Team photos */
  .team-card-photo {
    height: 200px !important;
  }
  .team-photo-img {
    width: 100px !important;
    height: 100px !important;
  }

  /* Timeline numbers */
  .timeline-avenue-number {
    width: 38px !important;
    height: 38px !important;
    font-size: 0.9rem !important;
  }
}

/* Team photos — circular, mobile responsive */
@media (max-width: 768px) {
  .team-card-photo {
    width: 160px !important;
    height: 160px !important;
  }
  .team-grid-avenue {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

/* Ken Burns animations for cinematic background sections */
@keyframes kenBurns1 {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.15) translate(-3%, -2%); }
}
@keyframes kenBurns2 {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.12) translate(2%, -1.5%); }
}

/* ============================================
   Service Directory — Wealth Management
   ============================================ */

.service-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.service-item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 1.75rem;
  border-bottom: 1px solid var(--gray-200);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease;
  border-radius: 0;
}

.service-item:first-child {
  border-top: 1px solid var(--gray-200);
}

.service-item:hover {
  background: var(--gold-subtle);
}

.service-item:hover .service-arrow {
  transform: translateX(4px);
}

.service-item:hover .service-item-number {
  color: var(--gold);
}

.service-item-number {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-300);
  min-width: 40px;
  transition: color 0.25s ease;
  line-height: 1;
}

.service-item-body {
  flex: 1;
  min-width: 0;
}

.service-item-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

.service-item-desc {
  font-size: 0.95rem;
  color: var(--text-light);
  line-height: 1.5;
  margin: 0;
}

.service-item-link {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gold-dark);
  white-space: nowrap;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  border-bottom: 1px solid var(--gold-dark);
  padding-bottom: 2px;
  transition: opacity 0.3s ease, border-color 0.3s ease;
}

.service-item:hover .service-item-link {
  opacity: 0.85;
  border-bottom-color: rgba(201, 169, 78, 0.5);
}

.service-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}

/* ============================================
   Independent Advantage — Clean Grid
   ============================================ */

.advantage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-top: 2.5rem;
}

.advantage-item {
  text-align: center;
  padding: 2rem 1.5rem;
}

.advantage-icon {
  color: var(--gold);
  margin-bottom: 1.25rem;
  display: flex;
  justify-content: center;
}

.advantage-item h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--navy);
  margin-bottom: 0.75rem;
}

.advantage-item p {
  font-size: 0.95rem;
  color: var(--text-light);
  line-height: 1.65;
}

/* ============================================
   Service Modal Overlay
   ============================================ */

.service-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  visibility: hidden;
}

.service-modal.open {
  pointer-events: auto;
  visibility: visible;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 43, 60, 0.65);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.service-modal.open .modal-backdrop {
  opacity: 1;
}

.modal-panel {
  position: relative;
  width: 100%;
  max-width: 680px;
  height: 100%;
  background: var(--white);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15);
  z-index: 1;
}

.service-modal.open .modal-panel {
  transform: translateX(0);
}

.modal-close {
  position: sticky;
  top: 0;
  float: right;
  margin: 1.25rem 1.25rem 0 0;
  width: 44px;
  height: 44px;
  border: none;
  background: var(--gray-100);
  border-radius: 50%;
  font-size: 1.5rem;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
  z-index: 2;
  line-height: 1;
}

.modal-close:hover {
  background: var(--navy);
  color: var(--white);
}

.modal-content {
  padding: 2rem 3rem 3rem;
}

.modal-content .modal-overline {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 0.75rem;
}

.modal-content h2 {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  color: var(--navy);
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.modal-content p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text);
  margin-bottom: 1.25rem;
}

.modal-content h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--navy);
  margin: 2rem 0 1rem;
}

.modal-content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}

.modal-content ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.65rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
}

.modal-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}

.modal-content .modal-divider {
  border: none;
  border-top: 1px solid var(--gray-200);
  margin: 2rem 0;
}

.modal-content .modal-cta {
  display: inline-block;
  padding: 0.85rem 2rem;
  background: var(--gold);
  color: var(--navy-dark);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: var(--radius);
  letter-spacing: 0.03em;
  transition: background 0.2s ease, transform 0.15s ease;
  text-transform: uppercase;
}

.modal-content .modal-cta:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
}

/* ============================================
   Service Modal & Directory — Responsive
   ============================================ */

@media (max-width: 768px) {
  .service-item {
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1.25rem 1rem;
  }

  .service-item-number {
    font-size: 1.25rem;
    min-width: 32px;
  }

  .service-item-link {
    width: 100%;
    padding-left: calc(32px + 0.75rem);
    margin-top: -0.25rem;
  }

  .service-item-desc {
    font-size: 0.9rem;
  }

  .advantage-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .modal-panel {
    max-width: 100%;
  }

  .modal-content {
    padding: 1.5rem 1.5rem 2rem;
  }

  .modal-content h2 {
    font-size: 1.5rem;
  }
}

/* Service list on dark/navy backgrounds */
.service-list-dark .service-item {
  border-color: rgba(255,255,255,0.1);
}

.service-list-dark .service-item:hover {
  background: rgba(255,255,255,0.05);
}

.service-list-dark .service-item-number {
  color: rgba(255,255,255,0.2);
}

.service-list-dark .service-item:hover .service-item-number {
  color: var(--gold);
}

.service-list-dark .service-item-info h3,
.service-list-dark .service-item-title {
  color: var(--white);
}

.service-list-dark .service-item-info p,
.service-list-dark .service-item-desc {
  color: rgba(255,255,255,0.6);
}

.service-list-dark .service-item-link {
  color: var(--gold);
}

.service-list-dark .service-item-link:hover {
  color: var(--gold-light);
}

/* Print styles */
@media print {
  .newsletter-bar,
  .site-header,
  .mega-menu { display: none !important; }
}

/* Gold lead labels in dark navy list sections (Risk Factors, Wash Sale, etc.) */
.section-navy ul li > strong:first-child,
.section-navy ol li > strong:first-child {
  color: var(--gold);
}

/* ============ CALCULATOR / TOOL PAGE ENHANCEMENTS ============ */

/* Form card polish — subtle top gold accent bar */
.page-hero-tools ~ .section .fade-up[style*="background:#fff"] {
  border-top: 3px solid var(--gold);
}

/* Better select styling */
.form-group select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230a1628' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

/* Animated focus glow on inputs */
.form-group input:focus,
.form-group select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15), 0 2px 8px rgba(212, 175, 55, 0.08);
}

/* Custom range slider (IDC page and global) */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: linear-gradient(to right, var(--gold) 0%, var(--gold) var(--range-progress, 50%), var(--gray-200) var(--range-progress, 50%), var(--gray-200) 100%);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  margin: 8px 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2), 0 0 0 1px rgba(212,175,55,0.3);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25), 0 0 0 4px rgba(212,175,55,0.15);
}
input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2), 0 0 0 1px rgba(212,175,55,0.3);
  cursor: pointer;
}
input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 4px;
  background: var(--gray-200);
}

/* Navy angled strip action buttons — CSS hover (replaces inline JS) */
.calc-action-btn {
  padding: 0.85rem 2rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.3s ease;
  min-width: 200px;
  flex: 1;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.calc-action-btn-primary {
  border: 2px solid var(--gold);
  background: transparent;
  color: var(--gold);
}
.calc-action-btn-primary:hover {
  background: var(--gold);
  color: var(--navy-dark);
}
.calc-action-btn-secondary {
  border: 2px solid rgba(255,255,255,0.3);
  background: transparent;
  color: rgba(255,255,255,0.85);
}
.calc-action-btn-secondary:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* Quiz option button — enhanced hover state */
.quiz-opt {
  position: relative;
  overflow: hidden;
}
.quiz-opt::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gold);
  transform: scaleY(0);
  transition: transform 0.2s ease;
}
.quiz-opt:hover::before {
  transform: scaleY(1);
}

/* Result grid cells — subtle hover lift */
[style*="background:rgba(255,255,255,0.05)"] {
  transition: transform 0.2s ease, background 0.2s ease;
}

/* Disclaimer box — standardized */
.disclaimer-box-inline {
  background: var(--gold-subtle);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  font-size: 0.85rem;
  color: var(--gray-600);
  line-height: 1.65;
}
.disclaimer-box-inline strong { color: var(--navy); }

/* Direct indexing infographic — mobile responsive */
@media (max-width: 768px) {
  /* Stack ETF vs Direct Index comparison vertically */
  [style*="grid-template-columns:1fr 60px 1fr"] {
    display: flex !important;
    flex-direction: column;
    gap: 1rem;
  }
  /* Rotate arrow on mobile */
  [style*="grid-template-columns:1fr 60px 1fr"] > div:nth-child(2) svg {
    transform: rotate(90deg);
  }
  /* Stack harvest mechanism steps */
  [style*="grid-template-columns:1fr 40px 1fr 40px 1fr"] {
    display: flex !important;
    flex-direction: column;
    gap: 1rem;
  }
  [style*="grid-template-columns:1fr 40px 1fr 40px 1fr"] > div:nth-child(even) svg {
    transform: rotate(90deg);
  }
  /* Stack dual objective goals */
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   Lead Capture Gate Modal
   ============================================ */
@keyframes lead-gate-spin {
  to { transform: rotate(360deg); }
}

.lead-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 22, 40, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lead-gate-overlay.active {
  opacity: 1;
  visibility: visible;
}

.lead-gate-container {
  position: relative;
  width: 90%;
  max-width: 480px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
  padding: 40px 36px 32px;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.3s ease;
}

.lead-gate-overlay.active .lead-gate-container {
  transform: translateY(0) scale(1);
}

.lead-gate-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 28px;
  color: var(--gray-400);
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color 0.2s, background 0.2s;
  line-height: 1;
}

.lead-gate-close:hover {
  color: var(--navy);
  background: var(--gray-100);
}

.lead-gate-header {
  text-align: center;
  margin-bottom: 28px;
}

.lead-gate-icon {
  margin-bottom: 16px;
}

.lead-gate-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}

.lead-gate-subtitle {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-light);
  font-weight: 400;
}

.lead-gate-form label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.lead-gate-req {
  color: var(--gold);
}

.lead-gate-optional {
  font-weight: 400;
  color: var(--gray-400);
  text-transform: none;
  font-size: 0.78rem;
}

.lead-gate-field {
  margin-bottom: 16px;
}

.lead-gate-field input[type="text"],
.lead-gate-field input[type="email"],
.lead-gate-field input[type="tel"] {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.lead-gate-field input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
}

.lead-gate-field input::placeholder {
  color: var(--gray-300);
}

.lead-gate-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.lead-gate-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 20px 0 24px;
}

.lead-gate-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--navy);
  cursor: pointer;
}

.lead-gate-checkbox label {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--gray-600);
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

.lead-gate-submit {
  width: 100%;
  padding: 14px 24px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s, transform 0.1s;
  letter-spacing: 0.01em;
}

.lead-gate-submit:hover:not(:disabled) {
  background: #162a4a;
}

.lead-gate-submit:active:not(:disabled) {
  transform: scale(0.98);
}

.lead-gate-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.lead-gate-error {
  text-align: center;
  color: #e53935;
  font-size: 0.85rem;
  margin-top: 12px;
  font-family: var(--font-body);
}

.lead-gate-disclaimer {
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--gray-400);
  margin-top: 16px;
  line-height: 1.5;
}

/* Mobile responsive */
@media (max-width: 520px) {
  .lead-gate-container {
    width: 95%;
    padding: 28px 20px 24px;
    border-radius: 12px;
  }
  .lead-gate-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .lead-gate-title {
    font-size: 1.3rem;
  }
}

/* ============================================================
   JUNE 9 DESIGN-SYSTEM AUDIT FIXES
   Palette consolidation, WCAG AA contrast, font, components.
   This block is authoritative and intentionally placed last.
   ============================================================ */

/* ---- Headings & hero commit to Playfair Display (Design #4) ---- */
h1, h2, h3, h4, h5, h6,
.hero-fullscreen-content h1,
.hero-fullscreen-content .hero-accent,
.hero h1,
.page-hero h1,
.page-hero-fullvh h1,
.more-heading {
  font-family: var(--font-heading);
}

/* ---- text-wrap: balance on hero/section headlines (Design #7) ---- */
.hero-fullscreen-content h1,
.hero-fullscreen-content .hero-accent,
.hero h1,
.page-hero h1,
.page-hero-fullvh h1,
.section-header h2,
.more-heading {
  text-wrap: balance;
}

/* ---- HERO OVERLAY contrast reinforcement (Design #2) ----
   The homepage hero gradient is set inline (top stop rgba(10,22,40,.35),
   too pale for the white headline). We cannot edit the inline style, so we
   add a supplemental top-down darkening layer + a protective text-shadow on
   the headline so white text passes AA over the pale-sky photo.
   Target ≈ effective top overlay of rgba(10,22,40,.55). */
#home-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1; /* above bg/inline overlay, below content (z-index:2) */
  pointer-events: none;
  background: linear-gradient(180deg,
              rgba(10, 22, 40, 0.30) 0%,
              rgba(10, 22, 40, 0.12) 40%,
              rgba(10, 22, 40, 0.20) 100%);
}
.hero-fullscreen-content h1,
.hero-fullscreen-content .hero-accent,
.hero h1 {
  text-shadow: 0 2px 18px rgba(10, 22, 40, 0.55);
}

/* The .hero-overlay solid layer is already rgba(10,18,30,.55) — leave intact. */

/* ---- ACTIVATE UNUSED COMPONENTS (Design #1, #7, #8) ---- */

/* Make sure hero CTAs are never hidden and are obviously clickable */
.hero-buttons,
.hero-fullscreen-content .hero-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  opacity: 1;
  visibility: visible;
}

/* High-contrast hero buttons */
.hero-buttons .btn-primary,
.btn-primary {
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(10, 22, 40, 0.25);
}
.hero-buttons .btn-primary:hover,
.btn-primary:hover {
  background: var(--gold-light);
  color: var(--navy);
}

/* Outline button: brighter border + text for clear affordance on pale hero */
.hero-buttons .btn-outline,
.btn-outline {
  background: rgba(10, 22, 40, 0.25);
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.85);
  font-weight: 600;
}
.hero-buttons .btn-outline:hover,
.btn-outline:hover {
  background: rgba(10, 22, 40, 0.45);
  border-color: var(--gold);
  color: var(--gold);
}

/* Header CTA pill — ensure visible & high contrast (gold pill, navy text).
   Sized to sit inline/proportionate with the other nav links. */
.nav-ctas li a.btn-gold {
  display: inline-block;
  opacity: 1;
  visibility: visible;
  background: var(--gold);
  color: var(--navy) !important;
  font-size: 0.85rem;
  padding: 0.45rem 1rem !important;
  font-weight: 600;
}
.nav-ctas li a.btn-gold:hover {
  background: var(--gold-light);
  color: var(--navy) !important;
}

/* Hero credential strip — horizontal on desktop, stacks on mobile (Design #1).
   On the homepage the strip's direct children are bare <span> credentials
   (not .hero-stat wrappers), so style those too. */
.hero-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  opacity: 1;
  visibility: visible;
  background: var(--navy);
  border-top: 1px solid rgba(201, 168, 76, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.hero-stats-bar > span {
  padding: 1.1rem 1rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-stats-bar > span:last-child {
  border-right: none;
}
@media (max-width: 768px) {
  .hero-stats-bar {
    grid-template-columns: 1fr 1fr;
  }
  .hero-stats-bar .hero-stat,
  .hero-stats-bar > span {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* ---- MOBILE HYBRID-SPLIT (Design #5) ----
   Traditional / Alternatives two-column block. Side-by-side on desktop;
   single column at <=768px. Gold divider hides/rotates on mobile.
   Replaces the broken inline [style*="display: flex"] media query. */
.hybrid-split {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  align-items: stretch;
  margin: 2rem auto 0;
  max-width: 900px;
}
.hybrid-split > div {
  flex: 1;
}
/* The gold vertical divider is the 1px middle child */
.hybrid-split > div[style*="width: 1px"],
.hybrid-split > div[style*="width:1px"] {
  flex: 0 0 1px;
  align-self: stretch;
}
@media (max-width: 768px) {
  .hybrid-split {
    flex-direction: column;
    gap: 1.5rem;
  }
  .hybrid-split > div {
    padding: 1rem 0 !important;
  }
  /* Divider becomes a thin horizontal rule between the stacked columns */
  .hybrid-split > div[style*="width: 1px"],
  .hybrid-split > div[style*="width:1px"] {
    width: 100% !important;
    height: 1px;
    flex: 0 0 1px;
    background: linear-gradient(to right, transparent, var(--gold) 20%, var(--gold) 80%, transparent) !important;
  }
}

/* ---- ABOUT HERO STACK (Design #6) ----
   Vertical flow so heading, quote card and logo no longer overlap. */
.about-hero-stack {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: center;
  gap: 2.5rem;
  position: relative;
}
.about-hero-stack > * {
  position: relative; /* defeat any absolute positioning on children */
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
}

/* ---- FOOTER FIXES (Design #2 & #3) ----
   The footer markup (.gcm-footer) carries an inline <style> block we cannot
   edit. Its text colors fail WCAG AA and it references an unloaded
   'Source Sans 3' font. We override here with higher-specificity selectors
   (tag.class .class) so these rules win the cascade despite the later
   inline <style>. Map the dead font to the loaded Inter, unify the duller
   #bfa35a footer gold to the canonical brand gold, and raise text contrast. */

/* Font: 'Source Sans 3' is never loaded -> use the loaded Inter body font */
footer.gcm-footer {
  font-family: var(--font-body) !important;
}

/* Unify footer gold (#bfa35a, duller) with the button gold */
footer.gcm-footer .footer-col h4,
footer.gcm-footer .footer-contact h4,
footer.gcm-footer .footer-team h4,
footer.gcm-footer .footer-social a {
  color: var(--gold) !important;
}
footer.gcm-footer .footer-social a {
  border-color: rgba(201, 168, 76, 0.45) !important;
}
footer.gcm-footer .footer-social a:hover {
  background: rgba(201, 168, 76, 0.15) !important;
  border-color: var(--gold) !important;
}

/* Regulatory legal text — worst on site: #4b5563 on #0f1923 = 2.35:1.
   Raise to #aab0b8 (≈7:1) for this 50+, regulatory copy. */
footer.gcm-footer .footer-legal p,
footer.gcm-footer .footer-copyright,
footer.gcm-footer .footer-legal p strong {
  color: #aab0b8 !important;
}

/* Footer body/nav/contact text: #8b929a (≈5.6:1) is the floor; keep nav/contact
   readable and team role spans (#6b7280 = 3.67:1) raised to >=4.5:1. */
footer.gcm-footer .footer-brand p,
footer.gcm-footer .footer-col a,
footer.gcm-footer .footer-contact p,
footer.gcm-footer .footer-contact a {
  color: #9aa1a9 !important;  /* ≈6:1 on #0f1923 */
}
footer.gcm-footer .footer-team-member span {
  color: #9aa1a9 !important;  /* was #6b7280 (3.67:1) -> ≈6:1 */
}

/* Newsletter bar (separate section above footer) — raise muted copy & link.
   .newsletter-bar p was rgba(255,255,255,0.6) ≈3.07:1 and link ≈4.12:1. */
.newsletter-bar p {
  color: rgba(255, 255, 255, 0.82) !important;  /* ≈ >=4.5:1 on navy */
}
.newsletter-bar a {
  color: #d8b85e !important;  /* gold-on-navy link, ≈ >=4.5:1 */
  text-decoration: underline;
}
.newsletter-bar a:hover {
  color: #ffffff !important;
}

/* ===== MOBILE HARDENING (authoritative) — 2026-06-19 =====
   Last block in the file so its !important rules win ties against the
   patchwork of earlier media queries and inline styles. Scope is strictly
   mobile (<=768px) so desktop is untouched. Goals: kill empty voids from
   vh/fixed-height + background-attachment:fixed sections, force the team
   grid to a single readable column, tame oversized hero logos/watermarks,
   stop blurry blown-up parallax bands, and guarantee no horizontal scroll. */
@media (max-width: 768px) {

  /* ---- 0. Global overflow safety net (also fix real sources below) ---- */
  html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  /* ---- 1. EMPTY VOIDS: collapse vh/fixed-height heroes & decorative bands ----
     Many sections carry height:100vh / min-height:85vh/65vh/50vh/680px either
     in CSS or INLINE. On mobile, content should drive height. Inline styles
     are beaten with !important. Mega-menu overlay (height:100vh) is excluded
     because it is position:fixed and intentionally full-screen. */
  .hero-fullscreen,
  .hero,
  .page-hero,
  .page-hero-fullvh,
  .about-hero-stack,
  section[style*="min-height: 100vh"]:not(#home-hero),
  section[style*="min-height:100vh"]:not(#home-hero),
  section[style*="100vh"]:not(.mega-menu):not(#home-hero),
  .about-hero-stack[style*="100vh"] {
    min-height: 0 !important;
    height: auto !important;
  }

  /* The homepage video hero (#home-hero) is an INTENTIONAL full-screen section
     whose headline/body/tagline are all position:absolute. Collapsing it makes
     that content pile up under the header. Keep it full-height and reflow the
     absolutely-positioned layers into a normal centered stack on mobile so
     nothing overlaps on tall, narrow phones. */
  #home-hero {
    min-height: 100vh !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.75rem !important;
    padding: 7rem 1.5rem 5rem !important;
    text-align: center !important;
  }
  #home-hero > div[style*="absolute"]:not([style*="inset"]) {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #home-hero .scroll-indicator { display: none !important; }

  /* Home "Why Grace Capital" cinematic band — kill background-attachment:fixed
     ghost-void and let content size it. Cap the Ken Burns layer to content. */
  .trust-cinematic {
    min-height: 0 !important;
    background-attachment: scroll !important;
  }
  .trust-cinematic > div[style*="inset"] {
    background-attachment: scroll !important;
  }
  /* Any element still asking the browser to pin a fixed background -> scroll. */
  [style*="background-attachment: fixed"],
  [style*="background-attachment:fixed"] {
    background-attachment: scroll !important;
  }

  /* ---- 2. INTERIOR HERO: full-viewport heroes -> compact, content-driven ----
     page-hero-fullvh stays a clean navy block sized to its text, with top
     padding clearing the fixed 64px logo (header ~ 96px tall). */
  .page-hero-fullvh,
  .page-hero {
    min-height: 0 !important;
    padding: 7rem 1.25rem 3rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  /* Investments hero positions its content absolutely (bottom:200px) which
     tucks the headline under the logo. Neutralise absolute positioning so it
     flows inside the padded hero. */
  .page-hero-investments > div[style*="position:absolute"],
  .page-hero-investments > div[style*="position: absolute"],
  .page-hero > div[style*="bottom:200px"],
  .page-hero > div[style*="bottom: 200px"] {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
  }

  /* About hero: outer section + inner stack both carry inline min-height:100vh.
     Let them breathe to content height with comfortable padding instead. */
  .about-hero-stack {
    padding: 7rem 1.25rem 3rem !important;
    gap: 1.75rem !important;
  }

  /* ---- 3. OVERSIZED HERO LOGO / WATERMARK ----
     Contact hero ships a 150px gcm-logo-light.png that competes with the
     headline. Shrink decorative hero logos on mobile. (Header logo handled
     separately and stays.) */
  .page-hero img[src*="gcm-logo-light"],
  .about-hero-stack img[src*="gcm-logo-light"] {
    height: 64px !important;
    width: auto !important;
  }

  /* ---- 4. TEAM GRID: bullet-proof single column ----
     Root cause: .team-grid-avenue is display:flex and each
     .team-card-avenue has width:calc(33.333% - 1.34rem), so the earlier
     grid-template-columns:1fr rules were inert. Force flex column + full
     width so nothing is clipped or truncated. */
  .team-grid-avenue {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 2rem !important;
    max-width: 100% !important;
    margin: 2rem auto !important;
  }
  .team-grid-avenue .team-card-avenue,
  .team-card-avenue {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }
  .team-card-avenue h3,
  .team-card-avenue .team-title,
  .team-card-avenue .team-contact {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  .team-photo-container {
    width: 160px !important;
    height: 200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .team-photo-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* ---- 5. BLURRY / BLOWN-UP PARALLAX IMAGES ----
     .inline-photo img is height:120% for a JS parallax effect; on mobile this
     upscales low-res images and crops faces. Cap band height, neutralise the
     parallax overscale, and use a sensible crop. */
  .inline-photo,
  .inline-photo.parallax-photo {
    height: 180px !important;
  }
  .inline-photo img,
  .parallax-photo img {
    height: 100% !important;
    transform: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
  /* Caption used white-space:nowrap -> horizontal overflow. Let it wrap. */
  .inline-photo-caption {
    white-space: normal !important;
    max-width: 90% !important;
    text-align: center !important;
  }
  /* Puzzle / hybrid-model diagram and other content images never exceed width. */
  .hybrid-split img,
  .section img,
  .editorial-image img {
    max-width: 100% !important;
    height: auto;
  }

  /* ---- 6. LOW-CONTRAST DISCLAIMER / CAPTION TEXT OVER PHOTOS ----
     About hero Swensen disclaimer was rgba(255,255,255,0.35) over video.
     Raise opacity for legibility/Lighthouse contrast. */
  .about-hero-stack p[style*="rgba(255,255,255,0.35)"],
  .about-hero-stack p[style*="rgba(255, 255, 255, 0.35)"] {
    color: rgba(255,255,255,0.78) !important;
  }

  /* ---- 7. INVESTMENTS TOGGLE PILLS ----
     The investments template (investments/list.html) owns the authoritative
     mobile rules for #strategy-bar and #audience-toggle: it WRAPS the strategy
     chips into centered rows, hides the sliding indicator and paints the active
     chip gold, and stacks the audience toggle into a full-width column so
     switchView()'s mobile slider-highlight lands correctly. An earlier global
     override here forced both into a single nowrap horizontally-scrolling row,
     which pushed "Dev Deals" off-screen and clipped the role toggle on both
     edges. That override is removed so the template's design wins. */
  /* Any wide grid that used inline repeat(2,1fr)/repeat(3,1fr) -> one column. */
  .container div[style*="grid-template-columns: repeat(2"],
  .container div[style*="grid-template-columns:repeat(2"],
  .container div[style*="grid-template-columns: repeat(3"],
  .container div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* CTA button pairs (e.g. home "Free Tool" calculators) ship as an inline
     flex with flex-shrink:0 + long nowrap labels -> they overrun 390px and get
     clipped by overflow-x:hidden. Force the group full width, stacked, and let
     each button shrink and wrap its label. */
  .container div[style*="flex-shrink:0"][style*="display:flex"]:has(> a),
  .container div[style*="flex-shrink:0"][style*="display:flex"]:has(> button),
  .container div[style*="flex-shrink: 0"][style*="display: flex"]:has(> a),
  .container div[style*="flex-shrink: 0"][style*="display: flex"]:has(> button) {
    flex-shrink: 1 !important;
    flex-direction: column !important;
    width: 100% !important;
    align-items: stretch !important;
  }
  .container .btn,
  .section .btn {
    white-space: normal !important;
    max-width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
  /* ---- 8. SCROLL INDICATOR on interior heroes ----
     Interior heroes (.page-hero / .page-hero-fullvh) are now content-sized on
     mobile, so the absolutely-positioned "SCROLL" cue + down-arrow lands ON TOP
     of the hero subtitle (e.g. DST: "...eliminate — capital gains tax." with
     SCROLL stamped through it). It adds no value on touch devices. Hide it on
     all interior heroes; the homepage video hero already hides its own. */
  .page-hero .scroll-indicator,
  .page-hero-fullvh .scroll-indicator,
  .page-hero-investments .scroll-indicator {
    display: none !important;
  }

  /* ---- 9. HEADER LOGO oversized on mobile ----
     The fixed header ships gcm-logo-light.png at inline height:64px. On a 390px
     viewport the gold "GCM" monogram + "GRACE CAPITAL MANAGEMENT" wordmark
     lockup eats ~60% of the bar and the monogram visually crowds the wordmark.
     Scale the lockup down so it reads cleanly and leaves room for the Menu
     button. Tighten the nav bar height to match. */
  .site-header .logo img {
    height: 42px !important;
    width: auto !important;
  }
  .site-header .nav-container {
    height: 64px !important;
  }
}


/* ============================================================
   401(k) page (sandboxed — feature/401k-tab)
   ============================================================ */
.k-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 0 auto 2rem; max-width: 760px; }
.k-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 2rem 1.75rem; text-align: center; }
.k-card-after { border-color: rgba(201,168,76,0.5); background: rgba(201,168,76,0.08); }
.k-card-tag { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 0.75rem; }
.k-card-tag-gold { color: var(--gold); }
.k-card-figure { font-family: Georgia, 'Times New Roman', serif; font-size: 2.6rem; font-weight: 700; color: #fff; line-height: 1; }
.k-card-figure span { font-size: 1rem; font-weight: 400; color: rgba(255,255,255,0.6); }
.k-card-figure-gold { color: var(--gold); }
.k-card-note { color: rgba(255,255,255,0.65); font-size: 0.88rem; margin: 0.9rem 0 0; line-height: 1.5; }
.k-savings { text-align: center; max-width: 620px; margin: 0 auto; padding-top: 0.5rem; }
.k-savings-amount { font-family: Georgia, 'Times New Roman', serif; font-size: 3.4rem; font-weight: 700; color: var(--gold); line-height: 1; }
.k-savings-label { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.8rem; color: rgba(255,255,255,0.7); margin-top: 0.4rem; }
.k-savings-sub { color: rgba(255,255,255,0.7); font-size: 0.95rem; line-height: 1.6; margin-top: 1rem; }
.k-savings-sub strong { color: #fff; }
.k-table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid rgba(10,22,40,0.1); }
.k-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; background: #fff; }
.k-table th { text-align: left; background: var(--navy); color: #fff; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.85rem 1.1rem; }
.k-table th:last-child, .k-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.k-table td { padding: 0.85rem 1.1rem; border-top: 1px solid rgba(10,22,40,0.08); color: var(--navy); }
.k-row-best td { background: rgba(31,157,87,0.09); color: #167a42; font-weight: 700; }
.k-row-worst td { background: rgba(180,60,60,0.08); color: #b43c3c; font-weight: 700; }
.k-table-bars td:nth-child(1), .k-table-bars th:nth-child(1), .k-table-bars td:nth-child(3), .k-table-bars th:nth-child(3) { white-space: nowrap; }
.k-table-bars td:nth-child(2), .k-table-bars th:nth-child(2) { width: 56%; padding-left: 0.35rem; padding-right: 0.35rem; }
.k-table-bars th:nth-child(2) { text-align: center; }
.k-bar { position: relative; display: block; width: 100%; min-width: 90px; height: 16px; border-radius: 5px; overflow: hidden; background-color: rgba(10,22,40,0.06); background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(28.5714% - 1px), rgba(10,22,40,0.20) calc(28.5714% - 1px), rgba(10,22,40,0.20) 28.5714%); }
.k-bar::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(28.5714% - 1px), rgba(255,255,255,0.40) calc(28.5714% - 1px), rgba(255,255,255,0.40) 28.5714%); }
.k-bar-fill { display: block; height: 100%; border-radius: 5px; }
.k-bar-red { background: #b43c3c; }
.k-bar-blue { background: var(--navy); }
.k-bar-green { background: #1f9d57; }
.k-pill { display: inline-block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.12rem 0.5rem; border-radius: 999px; background: var(--gold); color: var(--navy); margin-left: 0.45rem; vertical-align: middle; }
.k-pill-warn { background: #b43c3c; color: #fff; }
.k-table-cap { font-size: 0.82rem; color: #5a6473; line-height: 1.6; margin-top: 1rem; }
/* Share-class table — mobile: stack each row so the expense ratio stays visible
   (default 3-col layout pushes the % column off-screen on phones). */
@media (max-width: 600px) {
  .k-table-wrap { border: 0; overflow-x: visible; }
  .k-table-bars { font-size: 0.92rem; }
  .k-table-bars thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .k-table-bars tbody, .k-table-bars tr, .k-table-bars td { display: block; }
  .k-table-bars tr { padding: 0.7rem 0.95rem; border-top: 1px solid rgba(10,22,40,0.08); }
  .k-table-bars tr:first-child { border-top: 0; }
  .k-table-bars tr.k-row-worst { background: rgba(180,60,60,0.08); }
  .k-table-bars tr.k-row-best { background: rgba(31,157,87,0.09); }
  .k-table-bars .k-row-worst td, .k-table-bars .k-row-best td { background: transparent; }
  .k-table-bars td { padding: 0; border-top: 0; }
  .k-table-bars td:nth-child(1) { white-space: normal; width: auto; margin-bottom: 0.5rem; line-height: 1.35; }
  .k-table-bars td:nth-child(2) { display: inline-block; vertical-align: middle; width: calc(100% - 60px); padding: 0; }
  .k-table-bars td:nth-child(3) { display: inline-block; vertical-align: middle; width: 56px; text-align: right; white-space: nowrap; font-weight: 700; padding-left: 4px; }
  .k-bar { min-width: 0; }
}
/* How We Add Value — value cards */
.kv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 3rem; }
.kv-card { position: relative; background: #fff; border: 1px solid rgba(10,22,40,0.08); border-radius: 16px; padding: 1.9rem 1.6rem 1.7rem; overflow: hidden; box-shadow: 0 2px 10px rgba(10,22,40,0.04); transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; }
.kv-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease; }
.kv-card:hover { transform: translateY(-7px); box-shadow: 0 22px 48px rgba(10,22,40,0.13); border-color: rgba(201,168,76,0.45); }
.kv-card:hover::before { transform: scaleX(1); }
.kv-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.kv-icon { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; background: rgba(201,168,76,0.13); color: var(--navy); transition: background 0.28s ease, color 0.28s ease; }
.kv-icon svg { width: 25px; height: 25px; }
.kv-card:hover .kv-icon { background: var(--navy); color: var(--gold); }
.kv-num { font-family: 'Playfair Display', Georgia, serif; font-size: 1.85rem; font-weight: 700; line-height: 1; color: rgba(10,22,40,0.13); transition: color 0.28s ease; }
.kv-card:hover .kv-num { color: rgba(201,168,76,0.6); }
.kv-card h3 { font-size: 1.12rem; margin: 0 0 0.55rem; color: var(--navy); line-height: 1.3; }
.kv-card p { font-size: 0.92rem; color: #5a6473; line-height: 1.6; margin: 0; }
@media (max-width: 860px) { .kv-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
@media (max-width: 560px) { .kv-grid { grid-template-columns: 1fr; } }
.k-value-grid { grid-template-columns: repeat(3, 1fr); }
.k-faq-item { border: 1px solid rgba(10,22,40,0.12); border-radius: 10px; margin-bottom: 0.75rem; background: #fff; overflow: hidden; }
.k-faq-item summary { cursor: pointer; padding: 1.05rem 1.3rem; font-weight: 600; color: var(--navy); list-style: none; position: relative; padding-right: 2.6rem; }
.k-faq-item summary::-webkit-details-marker { display: none; }
.k-faq-item summary::after { content: '+'; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); color: var(--gold); font-size: 1.4rem; font-weight: 400; }
.k-faq-item[open] summary::after { content: '\2212'; }
.k-faq-item p { padding: 0 1.3rem 1.2rem; margin: 0; color: #44505f; line-height: 1.65; font-size: 0.95rem; }
@media (max-width: 720px) { .k-compare { grid-template-columns: 1fr; } .k-value-grid { grid-template-columns: 1fr; } }

/* ── 401(k) hero with embedded explainer video ───────────────────── */
.k-hero { padding: 8.5rem 0 4rem; min-height: 0; }
.k-hero-inner { position: relative; z-index: 2; max-width: 920px; margin: 0 auto; padding: 0 1.25rem; }
.k-hero-inner h1 { margin-bottom: 0.85rem; }
.k-hero-inner p { max-width: 640px; margin: 0 auto 2.2rem; }
.k-hero-video {
  max-width: 880px; margin: 0 auto; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(201,168,76,0.45);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  background: #050b16;
}
/* 4:3 viewport that clips the navy pillarbox bands baked into the source video.
   The slide content occupies the centre 1440x1080 (4:3) of the 1920x1080 frame,
   with a 240px navy band on each side. Scaling the video to 133.333% width
   (1920/1440) and centring it pushes the bands outside the viewport, where
   overflow:hidden clips them. Height stays at 100% (3/4 of width) so the
   aspect ratio is preserved and the content is NOT distorted. */
.k-hero-video-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #0a1628; }
.k-hero-video video {
  display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 133.3333%; height: 100%; object-fit: fill; background: #0a1628;
}
.k-hero-video-cap {
  display: block; padding: 0.7rem 1rem; font-size: 0.82rem; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.78); background: rgba(10,22,40,0.9);
  border-top: 1px solid rgba(201,168,76,0.25); text-align: center;
}
.k-hero-video-switch {
  display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap;
  padding: 0.75rem 1rem 0.95rem; background: rgba(10,22,40,0.9);
  border-top: 1px solid rgba(201,168,76,0.18);
}
.k-vsw {
  cursor: pointer; padding: 0.5rem 0.95rem; border-radius: 999px;
  font: 600 0.78rem/1 inherit; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.78); background: transparent;
  border: 1px solid rgba(201,168,76,0.45);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.k-vsw:hover { color: #fff; border-color: rgba(201,168,76,0.8); }
.k-vsw.is-active { background: #C9A84C; color: #0a1628; border-color: #C9A84C; }
@media (max-width: 720px) {
  .k-hero { padding: 7rem 0 3rem; }
  .k-hero-video-cap { font-size: 0.74rem; }
  .k-vsw { font-size: 0.72rem; padding: 0.45rem 0.8rem; }
}

/* ── 401(k) hero — interactive keynote deck embed ─────────────────── */
.k-hero--deck { padding: 0; min-height: 0; overflow: hidden; }
.k-hero--deck::before { display: none; }
.k-deck-wrap {
  width: 100%;
  padding: calc(96px + 0.75rem) 0 1.5rem;   /* clear the fixed header */
  display: flex; justify-content: center; align-items: center;
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
}
.k-deck-frame {
  display: block; border: 0;
  width: min(100%, calc((100vh - 150px) * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #0a1628;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
@media (max-width: 720px) {
  .k-deck-wrap { padding: calc(72px + 0.5rem) 0 1rem; }
  /* On phones a 16:9 frame collapses to ~190px tall and squishes the deck
     (its slides are 100dvh internally). Give it a tall portrait frame so the
     deck's own mobile layout has room and slides don't clip. */
  .k-deck-frame {
    width: 100%;
    aspect-ratio: auto;
    height: min(86svh, 760px);
  }
}