/* ============================================================================
   SHUKLA VEDIC - DESIGN SYSTEM & STYLE GUIDE
   ============================================================================

   Project: Shukla Vedic Website
   Description: Vedic astrology consultation practice for Ritesh Shukla
   Aesthetic: "Quiet and confident" - cream/gold/navy palette

   ============================================================================
   TABLE OF CONTENTS
   ============================================================================

   1. DESIGN SYSTEM VARIABLES (this section)
      - Brand Colors (palette tokens: --sv-navy, --sv-cream, --sv-slate)
      - Semantic Text Tokens (--sv-text-primary, --sv-text-body, etc.)
      - Section-Scoped Variables (gold + text: auto-flip in .bg-navy)
      - Typography Scale & Spacing
      - Dark Mode Variable Overrides

   2. BASE STYLES & RESET (~line 377)
   3. DARK MODE OVERRIDES (~line 409)
      - Global / element-level dark mode, utility dark patches
   4. LAYOUT / UTILITIES (~line 613)
   5. NAVIGATION & HEADER (~line 851)
   6. BUTTONS (~line 1150)
   7. HERO SECTION (~line 1290)
   8. CARDS & COMPONENTS (~line 1625)
      - Cards (~line 1625), Grids (~line 1973), Breadcrumbs (~line 2005), FAQ (~line 3517)
   9. FOOTER (~line 2083)
   10. ADDITIONAL COMPONENTS (~line 2419)
   11. ADDITIONAL STYLES FOR COMPATIBILITY (~line 2800)
   12. READABILITY & CONVERSION ENHANCEMENTS (~line 3709)
   13. HOMEPAGE SPECIFIC FIXES (~line 3832)
   14. MOBILE NAVIGATION (~line 3982)
   15. DARK MODE TOGGLE (~line 4229)
   16. READABILITY / LEGACY INLINE PATCHES (~line 4360)
       - WCAG AAA Enhancements (~line 4360)
       - Button readability enforcement in section 6 (~line 1226)
   17. STANDARDIZED UTILITY CLASSES (~line 4392)
       - Accessibility utilities (.visually-hidden), Color utilities (.sv-text-gold/cream/navy/slate), Layout utilities (.text-center, .d-flex, etc.)
       - Phase 4-6 utilities (opacity, borders, grids, sizing, box-shadow)
   18. MOBILE RESPONSIVENESS FIXES (~line 4748)

   ============================================================================
   ARCHITECTURE NOTES
   ============================================================================

   Token system:
   - Palette tokens (--sv-navy, --sv-cream, --sv-slate) = fixed brand colors
   - Semantic tokens (--sv-text-*, --sv-gold) = context-dependent
   - Section-scoped: .bg-navy redefines semantic tokens so
     child elements auto-resolve correct colors without per-element overrides

   Utility class system:
   - Inline colors migrated to .sv-text-* classes (Phase 2)
   - Inline styles migrated to ~175 utility classes (Phases 3-6)
   - All [style*="..."] selectors eliminated — dark mode is fully class-based
   - :not([class*="sv-text-"]) guards on all color rules (209 total)

   JS-generated classes (not in HTML source — added at runtime):
   - .is-resizing: Added by mobile-nav.js during window resize (disables transitions)
   - .visible: Added by scroll-progress.js to .scroll-progress-bar on scroll
   - .mobile-menu-open: Added by mobile-nav.js to <body> when hamburger menu opens
   - .theme-toggle, .theme-icon, .theme-icon-light, .theme-icon-dark: Created by theme-toggle.js
   - .theme-toggle-nav, .theme-toggle-header: Placement modifiers added by theme-toggle.js

   ============================================================================
   1. DESIGN SYSTEM VARIABLES
   ============================================================================ */

/*
   BREAKPOINT SYSTEM:
   - 480px  - Small phones (compact layout, reduced padding)
   - 400px  - Small phones (hero image constraint)
   - 600px  - Large phones / small tablets (timeline 2-column start)
   - 601px  - Tablet portrait lower bound (compound query start for hero image)
   - 768px  - Tablet portrait threshold (core mobile/tablet rules)
   - 900px  - Tablet landscape content shift (bio/timeline + CTA safe-area cap)
   - 901px  - Header/navigation desktop threshold
   - 1024px - Small desktop (desktop grid behaviors)
   - 1000px - Navigation spacing threshold (nav gap and font-size step-up)
   - 1100px - Desktop hero layout and larger logo sizing
   - 1150px - Mobile navigation upper bound
   - 1151px - Desktop navigation reset and desktop theme-toggle placement
   - 1200px - Full desktop grid expansion

   Compound queries used for precision responsive images:
   - 601-900px: tablet portrait hero image sizing
   - 900-1023px: bio image overlap constraint
   - 901-1099px: tablet landscape hero image sizing
*/

/*
   BRAND COLOR PALETTE - LIGHT MODE
   --------------------------------
   The palette is warm and sophisticated, avoiding harsh whites.
   "Quiet and confident" aesthetic.

   Primary Colors:
   - Navy (#0F1A29): Headlines, primary text, dark backgrounds
   - Gold (#D6A858): Accents, CTAs, highlights, brand identity
   - Cream (#EBE3D5): Page backgrounds, light sections

   Supporting Colors:
   - Sand (#E6D4BD): Alternate section backgrounds
   - Slate (#6B645A): Secondary/body text
   - Charcoal (#1C242B): Deep dark for gradients
*/

/*
   TYPOGRAPHY
   ----------
   Font Stack:
   - Logo: Poppins (light weight, lowercase)
   - Headings: Spectral (serif, elegant)
   - Body: Inter (clean sans-serif)

   Scale (rem-based for accessibility):
   - xs: 0.875rem (14px)
   - sm: 1rem (16px)
   - base: 1.125rem (18px) - body text
   - lg: 1.35rem (~22px)
   - xl: 1.75rem (28px)
   - 2xl: 2.25rem (36px)
   - 3xl: 3rem (48px)
   - 4xl: 4rem (64px) - hero headlines

   Line Height: 1.7 for body text (accessibility)

   IMPORTANT: No em dashes in sentences.
   Use &nbsp; to prevent orphans/widows in key phrases.
*/

/*
   SPACING & LAYOUT
   ----------------
   Max Content Width: 1140px
   Container Padding: 1.5rem (1rem on mobile)
   Section Spacing: 6rem (4rem on mobile)

   Border Radius Scale:
   - sm: 8px (cards, inputs)
   - md: 16px (larger cards, images)
   - lg: 24px (hero elements, CTAs)
   - pill: 999px (buttons, tags)
*/

/*
   BREAKPOINTS
   -----------
   Design system uses a mixed strategy: min-width (mobile-first) for layout
   progressions and max-width (desktop-first) for compact overrides, with
   inclusive/exclusive boundary pairs at key thresholds. Component-scoped media
   queries are co-located with their components; responsive utilities are
   consolidated at end of file.

   Primary scale:
   - 480px:  Small mobile (extra compact padding/font adjustments)
   - 400px:  Extra-small mobile (hero image max-width constraint)
   - 600px:  Small phone landscape (hero image, card grid collapse)
   - 601px:  Tablet portrait start (lower bound of 601-900px hero image compound query)
   - 768px:  Tablet (card grids, footer grid, table responsive, iOS zoom fix)
   - 900px:  Content layout trigger (bio-layout 2-column, timeline 4-column)
   - 901px:  Desktop navigation (header flex layout, nav visibility)
   - 1024px: Desktop grid (2/3-column grid layouts)
   - 1000px: Navigation refinement (wider nav gaps, slightly larger nav font)
   - 1200px: Large desktop (nav spacing, wide layouts)

   Navigation / chrome:
   - 1099px / 1100px: Hero layout pair (mobile → desktop hero grid)
   - 1150px / 1151px: Mobile menu toggle pair (hamburger → full nav)

   Boundary pairs (no overlap):
   - 767.98px max / 768px min: Footer mobile ↔ tablet grid (half-pixel avoids 768px overlap)
   - 900px max / 901px min:   Mobile nav padding ↔ desktop nav layout
   - 1023px max / 1024px min: Tablet grid ↔ desktop multi-column
   - 1099px max / 1100px min: Mobile hero ↔ desktop hero grid
   - 1150px max / 1151px min: Hamburger menu ↔ full desktop nav
*/

/*
   KEY CSS CLASSES
   ---------------
   Layout:
   - .sv-container: Max-width centered container (1140px)
   - .sv-container-narrow: Narrower container (800px)
   - .sv-wrapper: Main page wrapper

   Backgrounds:
   - .bg-cream: Warm cream gradient background
   - .bg-navy: Dark navy gradient (for CTAs, dark sections)

   Grid:
   - .grid-2: Two-column grid
   - .grid-3: Three-column grid
   - .bio-layout: Image + text layout (0.8fr / 1.2fr)

   Components:
   - .card: Standard content card
   - .cta-card: Call-to-action card (navy background)
   - .quote-block: Styled quotation
   - .highlight-box: Highlighted content box

   Buttons:
   - .sv-btn: Base button styles
   - .sv-btn-primary: Gold gradient button (main CTA)
   - .sv-btn-secondary: Light background button
   - .sv-btn-outline: Transparent with border

   Typography:
   - .eyebrow: Uppercase label above headings
   - .lead: Larger intro paragraph text
   - .text-center: Centered text
*/

/*
   FOOTER DETAILS
   --------------
   Tagline: "Pattern recognition. Timing awareness. Compassionate guidance."
   (Note: &nbsp; before "guidance" to prevent orphan)

   Credentials (3 lines, centered):
   - 20+ years of practice
   - Working journalist
   - Clients across multiple time zones

   Copyright: © 2025 Shukla Vedic
*/

/* Google Fonts are linked in HTML head:
   - Spectral (serif): 400, 500, 600, 700 + italic
   - Inter (sans): 400, 500, 600, 700
   - Poppins: 300 (logo only)
*/

/* ============================================================================
   CSS VARIABLES
   ============================================================================ */

:root {
  /* Brand Palette - Light Mode */
  --sv-navy: #0F1A29;
  --sv-gold-base: #D6A858;       /* Fixed palette gold — never changes per section */
  --sv-gold: #D6A858;            /* Contextual gold — section-scoped for text (see below) */
  --sv-gold-dark: #725823;       /* Bronze-gold for text on light bgs — 4.58:1+ on all creams (AA) */
  --sv-gold-light: #E5C175;      /* Lighter warm gold for emphasis on dark backgrounds */
  --sv-cream: #EBE3D5;
  --sv-cream-deep: #E0D4C3;
  --sv-slate: #6B645A;
  --sv-charcoal: #1C242B;

  /* Semantic text colors — section-scoped below for navy/dark contexts */
  --sv-text-primary: #0A1A2F;      /* Headings — near-navy (15:1 on cream) */
  --sv-text-body: #2C3E50;         /* Body text — dark blue-grey (10.5:1 on cream) */
  --sv-text-secondary: #4A5F73;    /* Secondary text — medium grey-blue (7.2:1 on cream) */
  --sv-text-muted: #5A6F85;        /* De-emphasized — muted grey-blue (5.8:1 on cream) */

  /* UI Colors */
  --sv-border: rgba(15, 26, 41, 0.08);
  --sv-surface-white: rgba(250, 246, 239, 0.7);  /* Warm cream tone instead of harsh white */
  --sv-cream-warm: #F5F0E8;                       /* Warm cream for life-section boxes */

  /* Spacing & Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --max-width: 1140px;

  /* Typography */
  --font-logo: "Poppins", sans-serif;
  --font-serif: "Spectral", Georgia, serif;
  --font-sans: "Inter", system-ui, sans-serif;

  /* Typography Scale */
  --text-sm: 1rem;
  --text-base: 1.125rem;
  --text-lg: 1.35rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3rem;
  --text-4xl: 4rem;

  /* Gradients */
  --gradient-navy: linear-gradient(135deg, var(--sv-navy) 0%, var(--sv-charcoal) 100%);
  --gradient-gold: linear-gradient(135deg, #D6A858 0%, #E5C175 100%);
  --gradient-gold-hover: linear-gradient(135deg, #E5C175 0%, #F0D599 100%);

  /* Shadows */
  --shadow-elevated: 0 10px 30px rgba(0, 0, 0, 0.1);
  --shadow-nav: 0 2px 8px rgba(10, 26, 47, 0.03);
}

/* ============================================================================
   DARK MODE VARIABLES
   ============================================================================
   WCAG AA Compliant - contrast ratios noted for each color.
   Dark mode inverts the palette to warm browns instead of cold blacks.
*/

[data-theme="dark"] {
  --sv-navy: #E8DDD0;           /* Light warm cream for headings - 10.5:1 */
  --sv-gold-base: #DDB770;      /* Fixed palette gold for dark mode */
  --sv-gold: #DDB770;           /* Softer warm gold for accents - 7.1:1 */
  --sv-gold-dark: #A08540;      /* Darker gold for dark mode light backgrounds - 4.6:1 */
  --sv-gold-light: #E5C175;     /* Lighter warm gold - 7.8:1 */
  --sv-cream: #120D08;          /* Deep warm brown - page background */
  --sv-cream-deep: #221610;     /* Slightly lighter brown */
  --sv-slate: #C8BDB1;          /* Muted warm - secondary text */
  --sv-charcoal: #E8DDD0;       /* Light for text on dark */
  --sv-border: rgba(232, 221, 208, 0.15);
  --sv-surface-white: #241A12;  /* Dark cards/surfaces */
  --sv-text-primary: #E8DDD0;    /* Headings — warm cream (10.5:1 on dark brown) */
  --sv-text-body: #D4C9BD;       /* Body text — softer warm (7.2:1) */
  --sv-text-secondary: #C8BDB1;  /* Secondary text — muted warm (6.1:1) */
  --sv-text-muted: #B8ADA1;      /* De-emphasized — deeper muted (5.5:1) */

  /* Dark mode surface tokens */
  --sv-dark-bg:             #1C1410;   /* Page-level background */
  --sv-dark-surface:        #241A12;   /* Card / panel backgrounds */
  --sv-dark-surface-raised: #2D2318;   /* Hover / elevated surfaces */
  --sv-dark-surface-hover:  #33271C;   /* Interactive hover (buttons, active states) */
  --sv-dark-surface-alt:    #1F1710;   /* Alternate surface */
  --sv-dark-cream-text:     #E8DDD0;   /* Cream text on dark (when not using --sv-navy) */
  --sv-dark-cream-muted:    #D4C9BD;   /* Muted cream text on dark */
  --sv-dark-gold:           #DDB770;   /* Gold accent on dark (when not using --sv-gold) */
  --sv-dark-slate-light:    #cbd5e1;   /* Light slate text for lists on dark surfaces */

  /* Gradients — dark mode overrides for navy gradient contexts */
  --gradient-navy-warm: linear-gradient(135deg, #2D2318 0%, #33271C 100%);
  --gradient-navy-deep: linear-gradient(135deg, #120D08 0%, #1A1108 100%);
  --shadow-elevated: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* ============================================================================
   SECTION-SCOPED VARIABLES
   ============================================================================
   Contextual tokens adjust automatically based on section background.
   - Light backgrounds (cream/white): dark text, darker gold
   - Dark backgrounds (navy): light text, bright gold
   Inline styles using var(--sv-gold) or var(--sv-text-body) inherit correctly.
   Use --sv-gold-base for fixed palette gold (backgrounds, borders, focus rings).
*/

/* Light mode: cream/white sections — dark text, muted gold */
.bg-cream,
.bg-surface-white,
.bg-white,
.bg-cream-deep {
  --sv-gold: var(--sv-gold-dark);
  /* --sv-text-* inherits :root defaults (dark text on light bg) */
}

/* Light mode: navy sections — light text, bright gold */
.bg-navy {
  --sv-gold: var(--sv-gold-base);
  --sv-text-primary: #E8DDD0;     /* Cream-white for headings on navy */
  --sv-text-body: #E8DDD0;        /* Cream-white for body on navy */
  --sv-text-secondary: #E8DDD0;   /* Full brightness — all text readable on dark bg */
  --sv-text-muted: rgba(232,221,208,0.75);  /* Slightly subdued for de-emphasized */
}

/* Dark mode: cream sections — backgrounds flip dark, so text flips light */
[data-theme="dark"] .bg-cream {
  --sv-gold: var(--sv-gold-base);
  /* --sv-text-* inherits [data-theme="dark"] defaults (light text on dark bg) */
}

/* Dark mode: navy sections — warm brown bg, warm light text */
[data-theme="dark"] .bg-navy {
  --sv-gold: var(--sv-gold-base);
  --sv-text-primary: #E8DDD0;     /* Warm cream for headings (10.5:1 on #2D2318) */
  --sv-text-body: #D4C9BD;        /* Softer warm for body (7.2:1) */
  --sv-text-secondary: #C8BDB1;   /* Muted warm for secondary (6.1:1) */
  --sv-text-muted: #B8ADA1;       /* Deep muted for de-emphasized (5.5:1) */
}

/* ============================================================================
   2. BASE STYLES & RESET
   ============================================================================ */

/* Reset for full-width sections */
html {
  margin: 0;
  padding: 0;
  /* Note: overflow-x on html/body can break position:sticky */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: var(--font-sans);
  line-height: 1.7;
  color: var(--sv-charcoal);
  background-color: var(--sv-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* overflow-x: hidden removed - breaks position: sticky on .main-nav */
}

/* Disable all transitions during window resize */
body.is-resizing * {
  transition: none !important;
}

/* Reduced motion preference — kills transitions and animations globally (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== DARK MODE COMPREHENSIVE OVERRIDES ===== */

/* Base Elements */
[data-theme="dark"] body {
  background-color: var(--sv-dark-bg);
  color: var(--sv-text-body);  /* 7.2:1 contrast ratio with background */
}

[data-theme="dark"] .sv-wrapper {
  background-color: var(--sv-dark-bg);
  color: var(--sv-text-body);
}

[data-theme="dark"] .bg-cream {
  background: linear-gradient(180deg, var(--sv-dark-bg) 0%, #261C14 100%);
}

/* Typography - ensure all headings and text are readable */
[data-theme="dark"] h1:not([class*="sv-text-"]),
[data-theme="dark"] h2:not([class*="sv-text-"]),
[data-theme="dark"] h3:not([class*="sv-text-"]),
[data-theme="dark"] h4:not([class*="sv-text-"]),
[data-theme="dark"] .sv-wrapper h1:not([class*="sv-text-"]),
[data-theme="dark"] .sv-wrapper h2:not([class*="sv-text-"]),
[data-theme="dark"] .sv-wrapper h3:not([class*="sv-text-"]),
[data-theme="dark"] .sv-wrapper h4:not([class*="sv-text-"]) {
  color: var(--sv-dark-cream-text);
}

[data-theme="dark"] p:not([class*="sv-text-"]),
[data-theme="dark"] li:not([class*="sv-text-"]),
[data-theme="dark"] .sv-wrapper p:not([class*="sv-text-"]),
[data-theme="dark"] .sv-wrapper li:not([class*="sv-text-"]) {
  color: var(--sv-dark-cream-muted);
}

/* dark mode strong: now handled by semantic --sv-text-primary auto-flip */

[data-theme="dark"] em:not([class*="sv-text-"]) {
  color: var(--sv-text-secondary);
}

[data-theme="dark"] a:not([class*="sv-text-"]) {
  color: var(--sv-gold);
}

[data-theme="dark"] a:not([class*="sv-text-"]):hover {
  color: var(--sv-gold-light);
}

/* Dark mode background overrides for utility classes
   (see also: READABILITY ENHANCEMENTS section for color overrides) */

/* Light mode: table.bg-warm-cream thead needs a dark background so
   .sv-text-cream header text is readable (cream-on-cream = 1.18:1 otherwise) */
table.bg-warm-cream thead tr {
  background: var(--sv-navy);
}

/* Dark mode overrides for .bg-warm-cream utility class */
[data-theme="dark"] .bg-warm-cream {
  background: var(--sv-dark-surface);
  border-color: var(--sv-border);
}

[data-theme="dark"] table.bg-warm-cream {
  background: var(--sv-dark-surface-alt);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

[data-theme="dark"] table.bg-warm-cream thead tr,
[data-theme="dark"] table.bg-warm-cream thead th {
  background: var(--sv-dark-surface-raised);
}
[data-theme="dark"] table.bg-warm-cream thead tr:not([class*="sv-text-"]),
[data-theme="dark"] table.bg-warm-cream thead th:not([class*="sv-text-"]) {
  color: var(--sv-text-primary);
}

[data-theme="dark"] table.bg-warm-cream tbody td:not([class*="sv-text-"]) {
  color: var(--sv-text-primary);
}

[data-theme="dark"] table.bg-warm-cream tbody td strong:not([class*="sv-text-"]) {
  color: var(--sv-text-primary);
}

[data-theme="dark"] table.bg-warm-cream tbody td p:not([class*="sv-text-"]) {
  color: var(--sv-text-secondary);
}

/* (0,3,4) beats .sv-wrapper a:where(...) at (0,1,1) and dark variant at (0,2,1) */
[data-theme="dark"] table.bg-warm-cream tbody td a:not([class*="sv-text-"]) {
  color: var(--sv-dark-gold);
}

/* Generic dark table styling — (0,2,0)+(0,2,1); no competing table/thead/th rules */
[data-theme="dark"] table {
  background: var(--sv-dark-surface-alt);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
[data-theme="dark"] thead,
[data-theme="dark"] thead tr {
  background: var(--sv-dark-surface-raised);
}
[data-theme="dark"] th:not([class*="sv-text-"]) {
  background: var(--sv-dark-surface-raised);
  color: var(--sv-text-primary);
}
/* (0,2,1) — no inline styles on td/strong elements; no competing td color rules */
[data-theme="dark"] td:not([class*="sv-text-"]) {
  color: var(--sv-text-primary);
}
[data-theme="dark"] td strong:not([class*="sv-text-"]) {
  color: var(--sv-text-primary);
}
/* (0,2,2) — beats generic [data-theme="dark"] p:not(...) at (0,2,1) by cascade order */
[data-theme="dark"] td p:not([class*="sv-text-"]) {
  color: var(--sv-text-secondary);
}
/* (0,2,2) beats .sv-wrapper a:where(...) at (0,2,1) */
[data-theme="dark"] td a:not([class*="sv-text-"]) {
  color: var(--sv-dark-gold);
}

/* Navy Sections (become warm dark in dark mode) */
[data-theme="dark"] .bg-navy {
  background: var(--gradient-navy-warm);
}

/* Dark mode strong: intentional shift from --sv-gold-light to --sv-gold */
[data-theme="dark"] .bg-navy strong:not([class*="sv-text-"]) {
  color: var(--sv-gold);
}

/* Remaining dark mode text (h2/h3, p, li, em, .lead) now handled by
   section-scoped --sv-text-* variables + !important on merged base rules. */

/* Numbered circle badges - keep text dark on gold background in dark mode.
   --sv-navy token flips to cream in dark mode, but on gold bg we need dark text.
   (0,3,0) beats .sv-text-navy (0,1,0) — no !important needed */
[data-theme="dark"] .bg-gold-accent.sv-text-navy {
  color: var(--sv-dark-bg);
}

/* Dark mode ring color for timeline circles */
[data-theme="dark"] .ring-navy {
  box-shadow: 0 0 0 4px #2D2318;
}

/* Images in dark mode - reduce brightness */
[data-theme="dark"] img {
  opacity: 0.80;
  transition: opacity 0.3s ease;
}

[data-theme="dark"] img:hover {
  opacity: 0.95;
}

/* Dark mode overrides for light-surface utility classes (.bg-white, .bg-surface-white, .bg-cream-deep) */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-surface-white {
  background: var(--sv-dark-surface);
}

/* .sv-wrapper prefix gives (0,4,1) — beats .sv-wrapper .card h4:where(:not(...)) at (0,2,2)
   and .sv-wrapper h3:where(:not(...)) at (0,1,1). h4 in .card inside .bg-surface-white
   now correctly gets muted cream in dark mode. */
[data-theme="dark"] .sv-wrapper .bg-cream-deep p:not([class*="sv-text-"]),
[data-theme="dark"] .sv-wrapper .bg-white p:not([class*="sv-text-"]),
[data-theme="dark"] .sv-wrapper .bg-surface-white p:not([class*="sv-text-"]),
[data-theme="dark"] .sv-wrapper .bg-cream-deep h3:not([class*="sv-text-"]),
[data-theme="dark"] .sv-wrapper .bg-white h3:not([class*="sv-text-"]),
[data-theme="dark"] .sv-wrapper .bg-surface-white h3:not([class*="sv-text-"]),
[data-theme="dark"] .sv-wrapper .bg-surface-white h4:not([class*="sv-text-"]) {
  color: var(--sv-text-body);
}

/* (0,3,1) beats light mode .bg-cream-deep em:not(...) at (0,2,1) */
[data-theme="dark"] .bg-cream-deep em:not([class*="sv-text-"]),
[data-theme="dark"] .bg-white em:not([class*="sv-text-"]),
[data-theme="dark"] .bg-surface-white em:not([class*="sv-text-"]) {
  color: var(--sv-text-body);
}

/* (0,3,1) beats .sv-wrapper strong:not(...) at (0,2,1) */
[data-theme="dark"] .bg-white strong:not([class*="sv-text-"]),
[data-theme="dark"] .bg-surface-white strong:not([class*="sv-text-"]) {
  color: var(--sv-text-primary);
}

/* (0,3,1) beats [data-theme="dark"] li:not(...) at (0,1,1) and .sv-wrapper li at (0,2,1) */
[data-theme="dark"] .bg-white li:not([class*="sv-text-"]),
[data-theme="dark"] .bg-surface-white li:not([class*="sv-text-"]) {
  color: var(--sv-text-body);
}

/* Add subtle border to white surface boxes in dark mode for better visibility */
[data-theme="dark"] .bg-surface-white {
  border: 1px solid var(--sv-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* --- LAYOUT / UTILITIES --- */

/* Reset & Base */
.sv-wrapper {
  font-family: var(--font-sans);
  background-color: var(--sv-cream);
  color: var(--sv-text-body);  /* Semantic token — auto-flips in dark mode (#2C3E50 light, #D4C9BD dark) */
  font-size: var(--text-base);
  line-height: 1.7;
  width: 100%;
}

.sv-wrapper h1 {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 2rem 0;
}
/* :where() drops specificity from (0,2,1) to (0,1,1) — lets .bg-navy h1, .hero-section h1,
   and other contextual heading rules override naturally without !important */
.sv-wrapper h1:where(:not([class*="sv-text-"])) {
  color: var(--sv-text-primary);  /* Section-scoped: flips for navy/dark contexts */
}

.sv-wrapper h2 {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
/* :where() lowers specificity to (0,0,1) so utility classes like .mb-25 can override */
:where(.sv-wrapper) h2 {
  margin: 2.5rem 0 1rem 0;
}
.sv-wrapper h2:where(:not([class*="sv-text-"])) {
  color: var(--sv-text-primary);  /* Section-scoped */
}

.sv-wrapper h3 {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
/* :where() lowers specificity to (0,0,1) so utility classes like .mt-0 can override */
:where(.sv-wrapper) h3 {
  margin: 2rem 0 0.75rem 0;
}
.sv-wrapper h3:where(:not([class*="sv-text-"])) {
  color: var(--sv-text-primary);  /* Section-scoped */
}

:where(.sv-wrapper) h4 {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 600;  /* Increased from 500 for better hierarchy */
  line-height: 1.4;
  margin: 1.5rem 0 0.5rem 0;  /* Reduced bottom margin for tighter visual grouping */
  letter-spacing: normal;  /* Removed excessive letter-spacing */
  text-transform: none;  /* Removed uppercase transformation for softer approach */
}
:where(.sv-wrapper) h4:where(:not([class*="sv-text-"])) {
  color: var(--sv-text-primary);  /* Section-scoped */
}

:where(.sv-wrapper) p {
  margin: 0 0 2rem 0;
  max-width: 65ch;
}

/* Global centering: paragraphs inside .text-center containers —
   :where(.sv-wrapper) p { margin: 0 0 2rem 0; } left-aligns the constrained box.
   This (0,2,1) rule auto-centres paragraphs when the parent is .text-center,
   so ONE rule handles all pages rather than per-element mx-auto classes. */
:where(.sv-wrapper) .text-center p {
  margin-left: auto;
  margin-right: auto;
}

/* :where() wraps the :not() chain to drop specificity from (0,6,1) to (0,1,1).
   This lets component/footer/nav link rules override naturally without !important.
   Functional matching is identical — buttons and sv-text-* elements are still excluded. */
.sv-wrapper a:where(:not(.sv-btn):not(.sv-btn-primary):not(.sv-btn-secondary):not(.sv-btn-outline):not([class*="sv-text-"])) {
  color: var(--sv-navy);
  text-decoration: none;
  transition: all 0.2s ease;
}
.sv-wrapper a:where(:not(.sv-btn):not(.sv-btn-primary):not(.sv-btn-secondary):not(.sv-btn-outline):not([class*="sv-text-"])):hover {
  text-decoration: underline;
}

/* Gold link hover states — class-based */
.bg-cream a.sv-text-gold:hover,
p a.sv-text-gold:hover {
  color: var(--sv-navy);
  text-decoration: underline;
}
.bg-navy a.sv-text-gold:hover {
  color: var(--sv-gold-light);
  text-decoration: underline;
}

/* :where() drops specificity from (0,2,1) to (0,1,1) — lets .hero strong, .cta-card strong,
   and dark mode strong rules override naturally without !important */
.sv-wrapper strong:where(:not([class*="sv-text-"])) {
  font-weight: 600;
  color: var(--sv-text-primary);  /* Semantic token — auto-flips in dark mode */
}

/* :where() drops specificity from (0,2,1) to (0,1,1) — lets quote/em rules
   override font-style without !important */
.sv-wrapper em:where(:not([class*="sv-text-"])) {
  font-style: italic;
  color: var(--sv-slate);
}

.sv-wrapper ul {
  padding-left: 1.5rem;
  margin-bottom: 2rem;
}
.sv-wrapper li {
  margin-bottom: 0.75rem;
  line-height: 1.7;
}

/* :where() drops specificity from (0,1,1) to (0,0,1) so utility classes
   like .max-w-250, .d-inline-block etc. can override these defaults. */
:where(.sv-wrapper) img { max-width: 100%; display: block; height: auto; }

/* --- UTILITIES --- */
.sv-container,
.header-container,
.content-wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

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

/* Reduce padding on mobile for more content space */
@media (max-width: 480px) {
  .sv-container,
  .sv-container-narrow {
    padding: 0 1rem;
  }

  /* Table responsiveness handled by @media (max-width: 768px) block in FIX #8 */

  /* Override paragraph max-width to ensure it fits within mobile viewport */
  .sv-wrapper p,
  .hero p,
  .hero-body {
    max-width: 100%;
  }
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
  color: var(--sv-gold);  /* Section-scoped: auto-adjusts for background */
  display: block;
  margin-bottom: 1rem;
}

.section-spacing {
  padding: 6rem 0;
  position: relative;
}

@media (max-width: 768px) {
  .section-spacing {
    padding: 4rem 0;
  }
}

/* Background Utilities */
.bg-cream {
  background:
    radial-gradient(circle at 20% 80%, rgba(214,168,88,0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(15,26,41,0.02) 0%, transparent 50%),
    linear-gradient(180deg, #EBE3D5 0%, #E0D4C3 100%);
  position: relative;
}

/* Noise texture overlay — shared base (SVG defined once, opacity varies per context) */
.bg-cream::after,
.card::after,
.question-card::after,
.texture-overlay::after,
details.faq-item::after,
.faq-category details::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  pointer-events: none;
}

.bg-cream::after {
  opacity: 0.025;
  z-index: 0;
}

.bg-cream > * {
  position: relative;
  z-index: 1;
}


.bg-navy {
  background: linear-gradient(135deg, var(--sv-navy) 0%, var(--sv-charcoal) 100%);
  color: var(--sv-text-body);
}

/* Navy section typography — :not() guards allow .sv-text-* overrides */
.bg-navy h2:not([class*="sv-text-"]),
.bg-navy h3:not([class*="sv-text-"]) { font-weight: 700; color: var(--sv-text-primary); }
.bg-navy h4:not([class*="sv-text-"]) { color: var(--sv-gold); font-weight: 600; }
.bg-navy p:not([class*="sv-text-"]) { color: var(--sv-text-body); }
.bg-navy strong:not([class*="sv-text-"]) { color: var(--sv-gold-light); font-weight: 600; }
/* .bg-navy .eyebrow — handled by section-scoped --sv-gold on .eyebrow */
.bg-navy li:not([class*="sv-text-"]) { color: var(--sv-text-body); }
.bg-navy em:not([class*="sv-text-"]) { color: var(--sv-text-secondary); }
.bg-navy .lead:not([class*="sv-text-"]) { color: var(--sv-text-body); }

/* --- HEADER & NAVIGATION --- */
.site-header {
  background: var(--sv-cream);
  padding: 1rem 0;
}

@media (max-width: 480px) {
  .header-container {
    padding: 0 1rem;
  }
}

/* Desktop layout - stacked: branding on top, nav below */
@media (min-width: 901px) {
  .header-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    transition: none;
  }
}

.header-branding {
  text-align: center;
  margin-bottom: 1rem;
  transition: none;
}

@media (min-width: 901px) {
  .header-branding {
    margin-bottom: 0;
    text-align: center;
  }
}

.brand-group {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: none;
}

@media (min-width: 901px) {
  .brand-group {
    flex-direction: row;
    gap: 0.625rem;
    align-items: center;
  }
}

.brand-icon {
  width: 40px;
  height: 40px;
  display: block;
  flex-shrink: 0;
}

.logo-main {
  font-family: var(--font-logo);
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: 0.005em;
  color: var(--sv-navy);
  line-height: 1.1;
  text-transform: lowercase;
}

@media (min-width: 1100px) {
  .logo-main {
    font-size: 1.55rem;
  }
}

.main-nav {
  text-align: center;
  transition: all 0.3s ease;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--sv-cream);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--sv-border);
  box-shadow: var(--shadow-nav);
}

[data-theme="dark"] .main-nav {
  background: var(--sv-dark-surface);
  border-bottom-color: var(--sv-border);
}

.nav-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

@media (max-width: 480px) {
  .nav-container {
    padding: 0 1rem;
  }
}

/* Nav sticky styles - now properly outside header */

.main-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
}

@media (min-width: 1000px) {
  .main-nav ul {
    gap: 0.75rem;
  }
}

@media (min-width: 1200px) {
  .main-nav ul {
    gap: 1.25rem;
  }
}

.main-nav a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sv-navy);
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
  padding-bottom: 4px;
  white-space: nowrap;
}

@media (min-width: 1000px) {
  .main-nav a {
    font-size: 0.925rem;
  }
}

@media (min-width: 1200px) {
  .main-nav a {
    font-size: 1rem;
  }
}

.main-nav a:hover {
  color: var(--sv-gold);
  text-decoration: none;
}

.main-nav a.sv-btn-primary:hover {
  color: var(--sv-navy);
}

.main-nav a.sv-btn-primary,
.main-nav a.sv-btn-primary:focus,
.main-nav a.sv-btn-primary:active {
  text-decoration: none;
}

.main-nav a.sv-btn-primary::after {
  display: none;
}

.main-nav a.active {
  color: var(--sv-navy);
  font-weight: 600;
}

.main-nav a.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--sv-gold-base);
  border-radius: 2px;
}

/* Dark mode: header & navigation */
[data-theme="dark"] .site-header {
  background: var(--sv-dark-surface);
  border-bottom-color: var(--sv-border);
}

[data-theme="dark"] .logo-main,
[data-theme="dark"] .main-nav a {
  color: var(--sv-text-primary);
}

/* Nav primary button dark text — handled by button readability block (~line 1226).
   a.sv-btn.sv-btn-primary (0,2,1) ties .main-nav a (0,2,1) but wins by source order. */

/* .main-nav a.active dark rule canonical at ~line 1069 */

/* Dark mode: mobile navigation */
[data-theme="dark"] .main-nav li {
  border-bottom-color: var(--sv-border);
}

[data-theme="dark"] .main-nav a:hover {
  background-color: transparent;
  color: var(--sv-gold);
}

[data-theme="dark"] .main-nav a.active {
  background-color: transparent;
  color: var(--sv-text-primary);
}

[data-theme="dark"] .hamburger-line {
  background-color: var(--sv-text-primary);
}

/* Scroll Progress Bar */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, #D6A858 0%, #E5C175 100%);
  width: 0%;
  z-index: 10001;
  box-shadow: 0 1px 3px rgba(214, 168, 88, 0.4);
  opacity: 0;
  transition: width 0.15s ease-out, opacity 0.2s ease;
}

.scroll-progress-bar.visible {
  opacity: 1;
}

[data-theme="dark"] .scroll-progress-bar {
  background: linear-gradient(90deg, #C9A456 0%, #D4B06A 100%);
  box-shadow: 0 1px 3px rgba(201, 164, 86, 0.5);
}

/* Header CTA Button */
.header-cta {
  display: none; /* Hidden on mobile */
}

@media (min-width: 901px) {
  .header-cta {
    display: inline-flex;
    margin-left: 1.5rem;
  }

  .header-cta .sv-btn {
    padding: 0.75rem 1.75rem;
    font-size: 0.95rem;
  }
}

/* Mobile Sticky Ribbon */
.mobile-cta-ribbon {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(10, 26, 47, 0.95) 0%, rgba(10, 26, 47, 0.98) 100%);
  backdrop-filter: blur(10px);
  padding: 0.875rem 1rem;
  box-shadow: 0 -4px 20px rgba(10, 26, 47, 0.3);
  z-index: 999;
  border-top: 1px solid rgba(214, 168, 88, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}

@media (min-width: 901px) {
  .mobile-cta-ribbon {
    display: none; /* Hidden on desktop since header CTA is visible */
  }
}

.mobile-cta-ribbon .sv-btn {
  flex: 1;
  max-width: 400px;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  justify-content: center;
}

/* --- BUTTONS --- */
.sv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2.5rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  text-decoration: none;
  line-height: 1.4;
  border: 1px solid transparent;
  white-space: nowrap;
}

.sv-btn:hover {
  transform: translateY(-2px);
}

.sv-btn:focus,
.sv-btn:focus-visible {
  outline: 3px solid var(--sv-gold-base);
  outline-offset: 2px;
  text-decoration: none;
}

.sv-btn:focus:not(:focus-visible) {
  outline: none;
}

.sv-btn:active {
  transform: translateY(0);
}

.sv-btn-primary {
  background: var(--gradient-gold);
  color: var(--sv-text-primary);  /* Reinforced in readability block (~line 1226) */
  border-color: var(--sv-gold-base);
  box-shadow:
    0 4px 12px rgba(214,168,88,0.3),
    0 0 0 1px rgba(214,168,88,0.2) inset;
  font-weight: 600;
}
.sv-btn-primary:hover {
  background: var(--gradient-gold-hover);
  color: var(--sv-text-primary);  /* Reinforced in readability block (~line 1226) */
  box-shadow:
    0 6px 20px rgba(214,168,88,0.4),
    0 0 0 1px rgba(214,168,88,0.3) inset;
}

.sv-btn-secondary {
  background-color: rgba(250, 246, 239, 0.7);
  color: var(--sv-navy);
  border-color: rgba(15, 26, 41, 0.2);   /* 20% navy — visible but subtle */
  box-shadow: 0 2px 8px rgba(10,26,47,0.05);
}
.sv-btn-secondary:hover {
  background-color: var(--sv-cream);
  border-color: var(--sv-navy);
  box-shadow: 0 4px 12px rgba(10,26,47,0.08);
}

.sv-btn-outline {
  background: transparent;
  border-color: var(--sv-charcoal);
  color: var(--sv-charcoal);
}
.sv-btn-outline:hover {
  background: var(--sv-charcoal);
  color: var(--sv-cream);
}

/* --- Button WCAG readability enforcement --- */
/* Must appear after base .sv-btn-primary/.sv-btn-primary:hover declarations (cascade order). */
a.sv-btn.sv-btn-primary,
a.sv-btn-primary,
.sv-btn.sv-btn-primary,
.sv-btn-primary,
.sv-btn-primary:link,
.sv-btn-primary:visited,
.sv-btn-primary:hover,
.sv-btn-primary:active,
.sv-btn-primary:focus {
  color: #0A1A2F !important;  /* Dark navy on gold - 8.5:1 ratio */
  font-weight: 600 !important;
}

/* Buttons - Toned down for dark mode (not too bright) */
[data-theme="dark"] .sv-btn-primary {
  background: var(--gradient-gold);
  color: var(--sv-text-primary);  /* Dark navy for maximum contrast - 8.5:1 ratio */
  border-color: var(--sv-gold-base);
  box-shadow: 0 4px 12px rgba(214, 168, 88, 0.35);
  font-weight: 600;  /* Slightly bolder for better readability */
}

[data-theme="dark"] .sv-btn-primary:hover {
  background: var(--gradient-gold-hover);
  color: var(--sv-text-primary);  /* Maintain dark text for contrast */
  box-shadow: 0 6px 16px rgba(214, 168, 88, 0.45);
}

/* Primary button in bg-navy sections needs extra visibility in dark mode */
[data-theme="dark"] .bg-navy .sv-btn-primary {
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 12px rgba(214, 168, 88, 0.4), 0 0 8px rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .bg-navy .sv-btn-primary:hover {
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 6px 16px rgba(214, 168, 88, 0.5), 0 0 12px rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .sv-btn-secondary {
  background-color: var(--sv-dark-surface-raised);
  color: var(--sv-text-primary);
  border-color: rgba(232, 221, 208, 0.3);
}

[data-theme="dark"] .sv-btn-secondary:hover {
  background-color: var(--sv-dark-surface-hover);
  color: var(--sv-text-primary);
  border-color: rgba(232, 221, 208, 0.5);
}

[data-theme="dark"] .sv-btn-outline {
  background: transparent;
  border-color: var(--sv-text-primary);
  color: var(--sv-text-primary);
}

[data-theme="dark"] .sv-btn-outline:hover {
  background: var(--sv-text-primary);
  color: var(--sv-dark-bg);
}

/* --- HERO SECTION --- */
.hero {
  background: var(--gradient-navy);
  color: var(--sv-cream);
  padding: 4rem 0 6rem 0;
  position: relative;
  overflow: hidden;
  min-height: 600px;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.15), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(214,168,88,0.1), transparent),
    radial-gradient(1px 1px at 50% 50%, rgba(255,255,255,0.1), transparent),
    radial-gradient(1px 1px at 80% 10%, rgba(255,255,255,0.12), transparent),
    radial-gradient(1px 1px at 90% 60%, rgba(214,168,88,0.08), transparent),
    radial-gradient(1px 1px at 15% 80%, rgba(255,255,255,0.1), transparent),
    radial-gradient(1px 1px at 40% 20%, rgba(214,168,88,0.12), transparent);
  background-size: 550px 550px, 350px 350px, 250px 250px, 450px 450px, 200px 200px, 300px 300px, 400px 400px;
  background-position: 0 0, 40px 60px, 130px 270px, 70px 100px, 150px 50px, 200px 150px, 280px 80px;
  opacity: 0.4;
  pointer-events: none;
}

.hero-grid {
  display: grid;
  gap: 3rem;
  position: relative;
  z-index: 1;
}

.hero h1 {
  font-size: clamp(2.25rem, 5vw, var(--text-4xl));
  font-weight: 600;
  margin-bottom: 1.75rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.hero h1:not([class*="sv-text-"]) {
  color: #E8DDD0;  /* Light warm cream for comfortable readability - 10.5:1 ratio */
}

.hero p.lead {
  font-size: var(--text-lg);
  font-weight: 300;
  margin-bottom: 1.5rem;
  line-height: 1.65;
}
.hero p.lead:not([class*="sv-text-"]) {
  color: var(--sv-cream);  /* Match hero text for readability */
}

.hero-body {
  margin-bottom: 2.5rem;
  font-size: var(--text-base);
  line-height: 1.8;  /* Bumped from 1.7 for readability */
  max-width: 500px;
}
.hero-body:not([class*="sv-text-"]) {
  color: var(--sv-cream);  /* Match hero text for better readability */
}

/* (0,2,1)/(0,3,2) — beats .sv-wrapper strong:not(...) at (0,2,1) by cascade order / specificity */
.hero-body strong:not([class*="sv-text-"]),
.hero p.lead strong:not([class*="sv-text-"]),
.hero strong:not([class*="sv-text-"]) {
  color: #E8DDD0;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 2.5rem;
}

/* Hero outline buttons need light text on dark background (light mode) */
.hero .sv-btn-outline {
  color: var(--sv-cream);
  border-color: rgba(245, 239, 228, 0.4);
}

.hero .sv-btn-outline:hover {
  background: rgba(245, 239, 228, 0.15);
  color: var(--sv-cream);
  border-color: rgba(245, 239, 228, 0.6);
}

/* Outline buttons on dark backgrounds — cream border/text (light mode) */
.cta-card .sv-btn-outline,
.bg-navy .sv-btn-outline {
  color: var(--sv-cream);
  border-color: rgba(232, 221, 208, 0.4);
}
/* Outline hover on dark backgrounds — consolidated from buttons + footer */
.cta-card .sv-btn-outline:hover,
.bg-navy .sv-btn-outline:hover,
.site-footer .sv-btn-outline:hover {
  background: rgba(232, 221, 208, 0.15);
  color: var(--sv-cream);
  border-color: rgba(232, 221, 208, 0.6);
}

/* Hero credentials box - left-aligned on desktop, centered on tablet/mobile */
.hero-credentials {
  margin: 1.5rem 0;
  background: rgba(0,0,0,0.3);
  padding: 1rem 1.5rem;
  border-radius: 6px;
  width: fit-content;
}

.hero-credentials-copy:not([class*="sv-text-"]) {
  color: rgba(232, 221, 208, 0.7);
}

.hero-credentials-key {
  color: #E8DDD0;
}

.hero-credentials-highlight {
  color: #D6A858;
}

/* Hero copy adjustments */
.hero-copy {
  position: relative;
  z-index: 1;
}

.hero-visual {
  padding-top: calc(4rem + 10px);
}

/* Hero image sizing — canonical breakpoint cascade
   Desktop ≥1100px: 450px (base rule below)
   Tablet landscape 901–1099px: 380px
   Tablet portrait 601–900px: auto/320px max
   ≤1023px: 100%/450px max (in hero media query below)
   Phone ≤600px: 100%/280px max
   Small phone ≤400px: 220px max */
/* Hero image — single selector (0,1,2) across all breakpoints;
   no competing selectors, no inline styles → cascade order is sufficient */
.hero-visual img {
  display: block;
  width: 450px;
  height: 450px;
  min-width: 450px;
  min-height: 450px;
  max-width: 450px;
  max-height: 450px;
  object-fit: cover;
  border: 2px solid var(--sv-gold);
  box-shadow: var(--shadow-elevated);
  border-radius: var(--radius-md);
}

/* Mobile hero — constrain width and center content */
@media (max-width: 1099px) {
  .hero-credentials {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .hero {
    padding: 3rem 0;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: 100%;
    margin: 0 auto;
  }
  .hero-copy {
    text-align: center;
  }
  .hero h1 {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .hero-body {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-buttons {
    justify-content: center;
  }
  .hero-visual {
    padding-top: 0;
    margin: 0 auto;
  }
  /* Hero image ≤1023 — see breakpoint cascade comments above */
  .hero-visual img {
    width: 100%;
    height: auto;
    min-width: auto;
    min-height: auto;
    max-width: 450px;
    margin: 0 auto;
  }
}

/* On tablet/mobile (single column), center the constrained text */
@media (max-width: 1099px) {
  .hero-copy .eyebrow,
  .hero-copy h1,
  .hero-copy .lead,
  .hero-copy .hero-body {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Responsive hero images - comprehensive breakpoints */

/* Tablet landscape / small desktop (901px - 1099px) */
@media (min-width: 901px) and (max-width: 1099px) {
  .hero-visual img {
    width: 380px;
    height: 380px;
    min-width: 380px;
    min-height: 380px;
    max-width: 380px;
    max-height: 380px;
  }
}

/* Tablet portrait (601px - 900px) */
@media (min-width: 601px) and (max-width: 900px) {
  .hero-visual img {
    width: auto;
    height: auto;
    min-width: auto;
    min-height: auto;
    max-width: 320px;
    max-height: 320px;
    margin: 0 auto;
  }
}

/* Phone (≤600px) */
@media (max-width: 600px) {
  .hero-visual img {
    width: 100%;
    max-width: 280px;
    height: auto;
    min-width: unset;
    min-height: unset;
    max-height: none;
    margin: 0 auto;
    object-fit: cover;
    object-position: top center;
  }
}

/* Small phone (≤400px) */
@media (max-width: 400px) {
  .hero-visual img {
    max-width: 220px;
  }
}

@media (min-width: 1100px) {
  .hero { padding: 6rem 0; }
  .hero-grid {
    grid-template-columns: 550px 450px;
    align-items: start;
    gap: 4rem;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
  }
  .hero h1 { font-size: 3.2rem; }
}

/* Component: base → dark mode → responsive (co-located) */
/* Dark mode: hero */
[data-theme="dark"] .hero {
  background: var(--gradient-navy-deep);
}

/* Dark mode hero: deeper text shadow for contrast on dark bg.
   Color (#E8DDD0) is already set in base .hero h1 rule. */
[data-theme="dark"] .hero h1 {
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* Dark hero text — (0,4,1) beats .hero p.lead:not(...) at (0,3,1) */
[data-theme="dark"] .sv-wrapper .hero p:not([class*="sv-text-"]),
[data-theme="dark"] .sv-wrapper .hero-body:not([class*="sv-text-"]) {
  color: var(--sv-text-body);
}

/* (0,3,1) beats .sv-wrapper strong:not(...) at (0,2,1) */
[data-theme="dark"] .hero strong:not([class*="sv-text-"]) {
  color: var(--sv-text-primary);
}

/* --- QUOTE BLOCKS --- */
.quote-block {
  padding: 1rem 1.5rem;
  margin: 1.25rem 0;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-style: italic;
  font-weight: 400;
  line-height: 1.6;
  color: var(--sv-navy);
  position: relative;
}

/* Dark mode: quote blocks */
[data-theme="dark"] .quote-block:not([class*="sv-text-"]) {
  color: var(--sv-text-body);
}

/* Dark mode: standalone quotes */
[data-theme="dark"] p > em:only-child:not([class*="sv-text-"]),
[data-theme="dark"] div > em:only-child:not([class*="sv-text-"]),
[data-theme="dark"] .quote-block em:not([class*="sv-text-"]),
[data-theme="dark"] blockquote em:not([class*="sv-text-"]) {
  color: var(--sv-text-body);
}

/* --- CARDS --- */
.card, .question-card {
  background: var(--sv-cream-deep);
  padding: 2rem 2.5rem 2.5rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(15, 26, 41, 0.08);
  box-shadow: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}


/* Override surface-white inside navy so .bg-surface-white elements get glass treatment */
.bg-navy {
  --sv-surface-white: rgba(255,255,255,0.05);
}

/* Cards inside navy sections use dark glass styling */
.bg-navy .card,
.bg-navy .question-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}

/* Testimonial component */
.testimonial {
  padding: 1.75rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
  text-align: left;
}

.testimonial:last-child {
  margin-bottom: 0;
}

.testimonial__layout {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.testimonial__content {
  flex: 1;
  min-width: 250px;
}

.testimonial--cream {
  background: var(--sv-cream-deep);
}

.testimonial--navy {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}

.testimonial--compact {
  background: var(--sv-cream-deep);
  border: 1px solid var(--sv-border);
  padding: 2rem 2.5rem 2.5rem;
}

.testimonial__quote {
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.testimonial__name {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.testimonial__title {
  font-size: var(--text-sm);
  margin-bottom: 0.5rem;
}

.testimonial__link {
  color: var(--sv-gold);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
}

.testimonial__link:hover {
  text-decoration: underline;
}

.testimonial--cream .testimonial__quote,
.testimonial--cream .testimonial__name,
.testimonial--compact .testimonial__quote,
.testimonial--compact .testimonial__name {
  color: var(--sv-navy);
}

.testimonial--cream .testimonial__title,
.testimonial--compact .testimonial__title {
  color: var(--sv-slate);
}

.testimonial--navy .testimonial__quote,
.testimonial--navy .testimonial__title {
  color: var(--sv-cream);
}

.testimonial--navy .testimonial__name,
.testimonial--navy .testimonial__link {
  color: var(--sv-gold);
}

/* Dark mode: stronger glass surface-white inside navy */
[data-theme="dark"] .bg-navy {
  --sv-surface-white: rgba(255,255,255,0.08);
}

/* Dark mode testimonial variants */
[data-theme="dark"] .testimonial--cream,
[data-theme="dark"] .testimonial--compact {
  background: var(--sv-surface-white);
  border: 1px solid var(--sv-border);
}

[data-theme="dark"] .testimonial--navy {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
}

[data-theme="dark"] .testimonial--cream .testimonial__quote,
[data-theme="dark"] .testimonial--cream .testimonial__name,
[data-theme="dark"] .testimonial--compact .testimonial__quote,
[data-theme="dark"] .testimonial--compact .testimonial__name {
  color: var(--sv-text-primary);
}

[data-theme="dark"] .testimonial--cream .testimonial__title,
[data-theme="dark"] .testimonial--compact .testimonial__title {
  color: var(--sv-text-secondary);
}

[data-theme="dark"] .testimonial--navy .testimonial__quote,
[data-theme="dark"] .testimonial--navy .testimonial__title {
  color: var(--sv-text-body);
}

.bg-navy .card h3:not([class*="sv-text-"]),
.bg-navy .card h4:not([class*="sv-text-"]) {
  color: var(--sv-gold);
}

/* Quote blocks inside navy sections — use semantic tokens for dark mode safety */
.bg-navy .quote-block {
  border-left-color: var(--sv-gold);
}
.bg-navy .quote-block:not([class*="sv-text-"]) {
  color: var(--sv-text-body);
}

/* (0,2,2) beats .sv-wrapper em:where(...) at (0,1,1) */
.bg-navy .quote-block em:not([class*="sv-text-"]) {
  color: var(--sv-text-secondary);
}

/* Dark mode: slightly stronger glass on warm brown navy backgrounds */
[data-theme="dark"] .bg-navy .card,
[data-theme="dark"] .bg-navy .question-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
}

/* Dark mode: base card surfaces */
[data-theme="dark"] .card,
[data-theme="dark"] .question-card,
[data-theme="dark"] .package-card,
[data-theme="dark"] .reading-card,
[data-theme="dark"] .insight-card,
[data-theme="dark"] .orientation-card {
  background: var(--sv-dark-surface);
  border-color: var(--sv-border);
}
[data-theme="dark"] .card:not([class*="sv-text-"]),
[data-theme="dark"] .question-card:not([class*="sv-text-"]),
[data-theme="dark"] .package-card:not([class*="sv-text-"]),
[data-theme="dark"] .reading-card:not([class*="sv-text-"]),
[data-theme="dark"] .insight-card:not([class*="sv-text-"]),
[data-theme="dark"] .orientation-card:not([class*="sv-text-"]) {
  color: var(--sv-text-body);
}

[data-theme="dark"] .card h3:not([class*="sv-text-"]),
[data-theme="dark"] .question-card h3:not([class*="sv-text-"]),
[data-theme="dark"] .reading-card h3:not([class*="sv-text-"]),
[data-theme="dark"] .package-card h3:not([class*="sv-text-"]),
[data-theme="dark"] .insight-card h3:not([class*="sv-text-"]),
[data-theme="dark"] .orientation-card h3:not([class*="sv-text-"]) {
  color: var(--sv-text-primary);
}

/* Dark mode mobile card contrast */
@media (max-width: 768px) {
  [data-theme="dark"] .card,
  [data-theme="dark"] .reading-card,
  [data-theme="dark"] .package-card {
    background: var(--sv-dark-surface-alt);
    border-color: var(--sv-border);
  }

  /* .sv-wrapper prefix gives (0,4,1)/(0,4,2) — ties dark .sv-wrapper .bg-cream-deep
     p/h3 rules at (0,4,1); cascade order (later in file) wins. */
  [data-theme="dark"] .sv-wrapper .card p:not([class*="sv-text-"]),
  [data-theme="dark"] .sv-wrapper .reading-card p:not([class*="sv-text-"]),
  [data-theme="dark"] .sv-wrapper .package-card p:not([class*="sv-text-"]) {
    color: var(--sv-text-body);
  }

  [data-theme="dark"] .sv-wrapper .card h3:not([class*="sv-text-"]),
  [data-theme="dark"] .sv-wrapper .card h4:not([class*="sv-text-"]),
  [data-theme="dark"] .sv-wrapper .reading-card h3:not([class*="sv-text-"]),
  [data-theme="dark"] .sv-wrapper .package-card h3:not([class*="sv-text-"]) {
    color: var(--sv-text-primary);
  }
}

/* --- Testimonial responsive & section-specific overrides --- */

#testimonials .testimonial--compact {
  background: var(--sv-cream-deep);
}

/* Testimonial cards inside a bg-navy section (e.g. readings.html) */
.bg-navy#testimonials .testimonial--compact .testimonial__quote {
  color: var(--sv-charcoal);
}

.bg-navy#testimonials .testimonial--compact .testimonial__name {
  color: var(--sv-navy);
}

/* Dark mode: testimonial cards */
[data-theme="dark"] #testimonials .testimonial--compact {
  background: var(--sv-surface-white);
  border-color: var(--sv-border);
}

@media (max-width: 600px) {
  #testimonials .testimonial--compact {
    padding: 1.75rem;
    font-size: 1.05rem;
  }

  #testimonials .testimonial--compact .testimonial__quote {
    line-height: 1.7;
  }
}


.card h3,
.card h4 {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

/* Card-level list normalization — browser default margin-top (~18px),
   .sv-wrapper ul { margin-bottom: 2rem }, and .bg-navy ul { margin-top: 1rem }
   all create inconsistent gaps inside cards.  Zero the top so heading→list gap
   is controlled solely by the heading's margin-bottom (0.75rem); tighten bottom
   to 1rem for compact card layouts.
   (0,2,1) — beats .sv-wrapper ul (0,1,1) AND .bg-navy ul (0,1,1). */
.sv-wrapper .card ul,
.sv-wrapper .card ol {
  margin-top: 0;
  margin-bottom: 1rem;
}
/* Mirror the existing .card p:last-child { margin-bottom: 0 } pattern */
.sv-wrapper .card ul:last-child,
.sv-wrapper .card ol:last-child {
  margin-bottom: 0;
}

.question-card h3 {
  font-size: 1.15rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--sv-cream-deep);
  padding-bottom: 0.5rem;
}
/* Card h3 heading colors — consolidated for all card variants using var(--sv-navy).
   Layout-specific rules (font-size, margin, border) remain co-located with each variant. */
.question-card h3:not([class*="sv-text-"]),
.package-card h3:not([class*="sv-text-"]),
.reading-card h3:not([class*="sv-text-"]),
.insight-card h3:not([class*="sv-text-"]) {
  color: var(--sv-navy);
}

/* Card h4 specific styling - override global h4 (specificity (0,2,1) beats .sv-wrapper h4) */
.sv-wrapper .card h4 {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  margin-top: 0;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}
/* (0,3,2) beats .sv-wrapper h4:not(...) at (0,2,1); semantic token flips in dark mode */
.sv-wrapper .card h4:not([class*="sv-text-"]) {
  color: var(--sv-text-primary);
}

/* (0,3,3) beats .sv-wrapper .card h4:not(...) at (0,3,2) by element count */
.sv-wrapper .bg-navy .card h4:not([class*="sv-text-"]) {
  color: var(--sv-gold);
}

.card p:last-child {
  margin-bottom: 0;
}

/* Noise opacity + radius for cards (base properties from shared rule ~line 806) */
.card::after, .question-card::after {
  opacity: 0.012;
  border-radius: var(--radius-md);
}

.card:hover, .question-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 4px 6px rgba(10,26,47,0.08),
    0 15px 30px rgba(10,26,47,0.06);
}

/* Navy card variant - stays navy in light mode, adapts in dark mode */
/* Navy card text - bright readable white on navy in light mode */
/* Navy card italic/em text - use gold for better readability in light mode */
/* Navy card quote text - gold color for readability */
/* Override to standard text in dark mode */
/* Navy card text - light/readable on navy in light mode, standard text in dark mode */
/* Readability override — kept at end of card section so component-local styles remain together. */
.card p:not([class*="sv-text-"]) {
  color: var(--sv-text-body);
}

/* --- GRIDS --- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

.question-card ul {
  font-size: var(--text-base);
  padding-left: 1.2rem;
  margin-top: 0;
  margin-bottom: 0;
  opacity: 0.85;
}
.question-card ul:not([class*="sv-text-"]) {
  color: var(--sv-navy);
}

.question-card ul li::marker {
  color: var(--sv-gold);
  font-weight: bold;
}

/* --- FAQ --- canonical definition at ~line 3517 */

/* --- BREADCRUMBS --- */
.breadcrumbs {
  padding: 0 0 1.5rem 0;
  font-size: 0.875rem;
}
.breadcrumbs:not([class*="sv-text-"]) {
  color: var(--sv-navy);
}

.breadcrumbs a {
  text-decoration: none;
  transition: color 0.2s;
  opacity: 0.7;
}
.breadcrumbs a:not([class*="sv-text-"]) {
  color: var(--sv-navy);
}

.breadcrumbs a:not([class*="sv-text-"]):hover {
  color: var(--sv-gold);
  opacity: 1;
}

.breadcrumbs span {
  margin: 0 0.5rem;
  opacity: 0.5;
}
.breadcrumbs span:not([class*="sv-text-"]) {
  color: var(--sv-navy);
}

/* Component: base → dark mode → responsive (co-located) */
/* Dark mode: breadcrumbs */
[data-theme="dark"] .breadcrumbs:not([class*="sv-text-"]) {
  color: var(--sv-text-muted);
}

[data-theme="dark"] .breadcrumbs a:not([class*="sv-text-"]) {
  color: var(--sv-text-muted);
}

[data-theme="dark"] .breadcrumbs span:not([class*="sv-text-"]) {
  color: var(--sv-text-muted);
}

/* Hero breadcrumbs — light text for dark hero backgrounds (both modes)
   .hero-breadcrumbs class is only applied on dark hero backgrounds,
   so the ancestor (.hero/.hero-section) selectors are unnecessary. */
.breadcrumbs.hero-breadcrumbs {
  padding: 1.5rem 0 0 0;
}
.breadcrumbs.hero-breadcrumbs:not([class*="sv-text-"]) {
  color: #E8DDD0;
}

.breadcrumbs.hero-breadcrumbs a {
  opacity: 0.85;
}
.breadcrumbs.hero-breadcrumbs a:not([class*="sv-text-"]) {
  color: #E8DDD0;
}

.breadcrumbs.hero-breadcrumbs a:not([class*="sv-text-"]):hover {
  color: var(--sv-gold);
  opacity: 1;
}

.breadcrumbs.hero-breadcrumbs span:not([class*="sv-text-"]) {
  color: #E8DDD0;
  opacity: 0.6;
}

/* Last breadcrumb item (current page) should be full opacity */
.breadcrumbs.hero-breadcrumbs > .sv-container > span:last-child,
.breadcrumbs.hero-breadcrumbs > span:last-child {
  opacity: 1;
}

/* --- FOOTER --- */
.site-footer {
  --sv-footer-link: #C5D1DC;        /* Light blue-grey — 7.8:1 on dark footer */
  --sv-footer-link-hover: #E5C175;  /* Bright gold — 8.5:1 on dark footer */
  --sv-footer-text: #C5D1DC;
  background: var(--sv-charcoal);
  color: var(--sv-slate);
  padding: 4rem 0 2rem;
  font-size: var(--text-sm);
}

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

/* Mobile footer - center everything */
@media (max-width: 767.98px) {
  .footer-col {
    text-align: center;
    flex: 1; /* Override .flex-2 on first column — equal width on mobile; cascade order wins */
    max-width: 100%;
  }

  .footer-col h3 {
    text-align: center;
  }

  .footer-col ul {
    text-align: center;
  }

  /* Ensure the tagline paragraphs are centered and constrained */
  .footer-col p {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    padding: 0 1rem; /* Add padding to prevent edge touching on very small screens */
  }
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

.footer-grid .footer-col:first-child .brand-group {
  justify-content: flex-start;
}

.site-footer .brand-icon {
  width: 48px;
  height: 48px;
}

/* Footer headings — h3 for proper h1 → h2 → h3 heading hierarchy.
   Fully specified to avoid inheriting base .sv-wrapper h3 styles. */
.footer-col h3 {
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  margin: 0 0 1rem 0;
  font-family: var(--font-logo);
  line-height: 1.4;
}
.footer-col h3:not([class*="sv-text-"]) {
  color: var(--sv-cream);
}

.footer-col p:not([class*="sv-text-"]) {
  color: var(--sv-footer-text);  /* Light blue-grey for readability - 7.8:1 ratio */
}
.footer-col p {
  line-height: 1.7;
  font-size: var(--text-sm);
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

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

.footer-col a:not([class*="sv-text-"]) {
  color: var(--sv-footer-link);
}
.footer-col a {
  transition: color 0.2s ease;
}

.footer-col a:not([class*="sv-text-"]):hover {
  color: var(--sv-footer-link-hover);
  text-decoration: none;
}

.footer-meta {
  text-align: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.85rem;
}
.footer-meta:not([class*="sv-text-"]) {
  color: var(--sv-footer-text);  /* Light text for readability */
}

.footer-meta small:not([class*="sv-text-"]) {
  color: var(--sv-footer-text);  /* Match parent for consistency */
}

/* Trust Badges / Payment Security Section */
.trust-badges {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem 0;
  margin-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.trust-badges .trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.trust-badges .trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}
.trust-badges .trust-item:not([class*="sv-text-"]) {
  color: var(--sv-footer-text);
}

.trust-badges .trust-item .stripe-logo {
  height: 2.75rem;
  width: auto;
  vertical-align: middle;
  margin-left: 0.4rem;
}

/* Lock icon SVG in trust badges — size constrained to match adjacent text */
.lock-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.payment-cards {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* SVG card icons - natural rectangle shape with subtle border */
.payment-cards img {
  height: 36px;
  width: auto;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

/* Font Awesome card icons (used on some legal pages instead of SVG) */
.payment-cards i.fab {
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 600px) {
  .trust-badges .trust-row {
    flex-direction: column;
    gap: 0.75rem;
  }
}

.footer-cta-text {
  font-size: 1.1rem;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  width: 100%;
  display: block;
}
.footer-cta-text:not([class*="sv-text-"]) {
  color: var(--sv-footer-text);  /* Light readable text */
}

/* Footer outline buttons — cream border/text on dark background */
.site-footer .sv-btn-outline {
  color: var(--sv-cream);
  border-color: rgba(232, 221, 208, 0.4);
}

/* Footer brand tagline — center beneath the logo across all pages */
.site-footer .footer-col.flex-2 > p {
  text-align: center;
}

/* Footer logo breathing room — img sits flush against "Shukla Vedic" text
   without this; 0.5rem gap feels natural without being excessive */
.site-footer .logo-main {
  margin-top: 0.5rem;
}

/* Footer paragraphs — .sv-wrapper p sets max-width: 65ch + margin: 0 0 2rem 0,
   which left-aligns constrained paragraphs.  Auto margins horizontally centre
   the block within the wider footer container.  Same specificity (0,1,1) as
   .sv-wrapper p, but later source order wins for margin-left / margin-right. */
.site-footer p {
  margin-left: auto;
  margin-right: auto;
}

/* Component: base → dark mode → responsive (co-located) */
/* Dark mode: footer */
[data-theme="dark"] .site-footer {
  --sv-footer-link: #B8ADA1;        /* Warm brown-grey for dark mode */
  --sv-footer-link-hover: var(--sv-gold);
  --sv-footer-text: #B8ADA1;
  background: var(--sv-cream);  /* --sv-cream flips to #120D08 in dark mode */
  color: var(--sv-footer-text);
}

[data-theme="dark"] .footer-col h3:not([class*="sv-text-"]) {
  color: var(--sv-text-primary);
}

[data-theme="dark"] .footer-col p:not([class*="sv-text-"]),
[data-theme="dark"] .footer-meta:not([class*="sv-text-"]),
[data-theme="dark"] .site-footer p:not([class*="sv-text-"]) {
  color: var(--sv-footer-text);
}

[data-theme="dark"] .footer-grid .logo-main {
  color: var(--sv-text-primary);
}

/* --- Footer readability & mobile overrides --- */

/* Readability override — must appear after base .footer-col p/.footer-meta text rules (cascade order). */
.site-footer p:not([class*="sv-text-"]),
.site-footer li:not([class*="sv-text-"]) {
  color: #D4C9BD;  /* Comfortable readability on dark background - 7.2:1 */
  opacity: 1;
}

/* Readability override — must appear after base .footer-col a/.footer-meta link rules (cascade order). */
.site-footer a:not([class*="sv-text-"]),
.footer-col a:not([class*="sv-text-"]),
.footer-meta a:not([class*="sv-text-"]) {
  opacity: 1;
  color: var(--sv-footer-link);
}

.site-footer a:not([class*="sv-text-"]):hover,
.footer-col a:not([class*="sv-text-"]):hover,
.footer-meta a:not([class*="sv-text-"]):hover {
  color: var(--sv-footer-link-hover);
}

/* Readability override — must appear after base .footer-meta text rules (cascade order). */
.footer-meta:not([class*="sv-text-"]),
.footer-meta small:not([class*="sv-text-"]) {
  color: var(--sv-footer-text);
}

/* -----------------------------------------------------------------------------
   FIX #7: Footer link touch targets (MEDIUM)
   Links were too close together for comfortable tapping
   ----------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .footer-col li {
    margin-bottom: 0.875rem;
  }

  .footer-col a {
    display: inline-block;
    padding: 0.35rem 0;
    min-height: 44px;
    line-height: 1.6;
  }
}

/* -----------------------------------------------------------------------------
   FIX #11: Small font size improvements (LOW)
   Increase readability of small text elements
   iOS requires 16px minimum to prevent auto-zoom on focus
   ----------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .footer-meta,
  .footer-meta small {
    font-size: 1rem; /* 16px - iOS safe */
  }
}

/* -----------------------------------------------------------------------------
   FOOTER - More compact on mobile
   ----------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .site-footer {
    padding: 2.5rem 0 1.5rem;
  }

  .footer-grid {
    gap: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .footer-col h3 {
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
  }

  .footer-col ul {
    margin-bottom: 0;
  }

  .footer-col li {
    margin-bottom: 0.25rem;
  }
}

/* --- ADDITIONAL COMPONENTS --- */

.cta-card {
  background: var(--gradient-navy);
  color: var(--sv-cream);
  padding: 3rem 3rem;
  border-radius: var(--radius-lg);
  text-align: center;
  max-width: 850px;
  margin: 0 auto;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  .cta-card {
    padding: 3rem 2rem;
  }
  .cta-card h2 {
    font-size: var(--text-2xl);
  }
}

/* -----------------------------------------------------------------------------
   FIX #12: CTA card padding reduction (LOW)
   Reduce padding on very small screens to prevent text cramping
   ----------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .cta-card {
    padding: 2rem 1.5rem;
  }
}

.cta-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(1px 1px at 30% 30%, rgba(255,255,255,0.12), transparent),
    radial-gradient(1px 1px at 70% 70%, rgba(214,168,88,0.1), transparent);
  background-size: 400px 400px, 300px 300px;
  opacity: 0.3;
  pointer-events: none;
}

.cta-card h2 {
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0,0,0,0.15);
  position: relative;
  z-index: 1;
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: var(--text-3xl);
}
.cta-card h2:not([class*="sv-text-"]) {
  color: #E8DDD0;
}

/* FIX #23: CTA heading overflow at mobile (MEDIUM)
   The base .cta-card h2 font-size (--text-3xl / 48px) appeared AFTER the 768px
   media query, overriding it by cascade order. Re-declare responsive size here. */
@media (max-width: 768px) {
  .cta-card h2 {
    font-size: var(--text-2xl);
  }
}

.cta-card p {
  position: relative;
  z-index: 1;
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.7;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
/* (0,2,2) — no equal/higher-specificity p-color competitor in light mode */
.cta-card p:not([class*="sv-text-"]) {
  color: #D4C9BD;
}

/* (0,3,1) beats .sv-wrapper a:where(...) at (0,1,1) and dark variant at (0,2,1) */
.cta-card p a:not([class*="sv-text-"]) {
  color: var(--sv-gold-light);
}

/* (0,3,1) beats .sv-wrapper strong:not(...) at (0,2,1) */
.cta-card p strong:not([class*="sv-text-"]) {
  color: var(--sv-cream);
}

/* Component: base → dark mode → responsive (co-located) */
/* Dark mode: cta card */
[data-theme="dark"] .cta-card {
  background: var(--gradient-navy-warm);
}

/* .cta-card h2 dark rule removed — base already sets #E8DDD0 */

/* (0,3,1) beats .sv-wrapper strong:not(...) at (0,2,1) and .cta-card p strong at (0,2,2) */
[data-theme="dark"] .cta-card strong:not([class*="sv-text-"]) {
  color: var(--sv-text-primary);
}

/* Dark mode: hero/cta outline buttons */
[data-theme="dark"] .hero .sv-btn-outline,
[data-theme="dark"] .cta-card .sv-btn-outline,
[data-theme="dark"] .cta-card .sv-btn-secondary {
  color: var(--sv-text-primary);
  border-color: rgba(232, 221, 208, 0.4);
  background: transparent;
}

[data-theme="dark"] .hero .sv-btn-outline:hover,
[data-theme="dark"] .cta-card .sv-btn-outline:hover,
[data-theme="dark"] .cta-card .sv-btn-secondary:hover {
  background: var(--sv-border);  /* intentionally uses border token for subtle translucent hover */
  color: var(--sv-text-primary);
  border-color: rgba(232, 221, 208, 0.6);
}

.cta-card .sv-btn,
.cta-card > div {
  position: relative;
  z-index: 1;
}

/* margin-top only for .cta-card > div, not .sv-btn — intentional separate selector */
.cta-card > div {
  margin-top: 2.5rem;
}

/* CTA card italic text — color emphasis (typography reset is shared in readability section) */
.cta-card p > em:only-child:not([class*="sv-text-"]) {
  color: var(--sv-gold-light);
}

.cta-inline {
  text-align: center;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(212, 175, 55, 0.25);
}


/* Callout components */
.callout-note {
  background: rgba(214, 168, 88, 0.08);
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-sm);
  color: var(--sv-navy);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.callout-note p {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.callout-note--compact {
  padding: 0.75rem 1.25rem;
  line-height: 1.7;
}

.callout-note--chip {
  background: rgba(214, 168, 88, 0.1);
  padding: 0.5rem 0.75rem;
  width: fit-content;
  align-self: center;
}

.callout-panel {
  background: var(--sv-cream);
  padding: 2rem 2.5rem;
  border-radius: var(--radius-md);
}

.callout-panel--warm {
  background: rgba(250, 246, 239, 0.6);
}

/* Callout panel internal spacing — applies at ALL breakpoints.
   The two <ul>s inside .grid-2 should read as one continuous list.
   Heading → subtext → bullets should flow tightly. */
.callout-panel .grid-2 {
  gap: 0 !important;
}

.callout-panel h3 {
  margin: 0 0 1rem 0 !important;
}

.callout-panel p {
  margin: 0 0 0.75rem 0 !important;
}

.callout-panel ul.check-list {
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem 2rem;
}
@media (max-width: 768px) {
  .callout-panel ul.check-list {
    grid-template-columns: 1fr;
  }
}

/* On mobile, also reduce panel padding */
@media (max-width: 768px) {
  .callout-panel {
    padding: 1.5rem 1.25rem;
  }
}

/* On navy backgrounds, the semi-transparent warm overlay composites to ~#9C9E9F
   (muddy gray) causing 1.2-2.1:1 contrast failures. Use solid cream + dark text. */
.bg-navy .callout-panel--warm {
  background: var(--sv-cream);
  color: var(--sv-charcoal);
  --sv-gold: var(--sv-gold-dark);  /* Override bright gold back to AA-safe dark gold */
}
.bg-navy .callout-panel--warm h3:not([class*="sv-text-"]),
.bg-navy .callout-panel--warm p:not([class*="sv-text-"]),
.bg-navy .callout-panel--warm strong:not([class*="sv-text-"]),
.bg-navy .callout-panel--warm li:not([class*="sv-text-"]) {
  color: var(--sv-charcoal);
}

/* Headings inside callout panels — zero top margin so the panel padding controls spacing.
   (0,1,1) matches .sv-wrapper h3 but wins by source order. */
.callout-panel h3 {
  margin-top: 0;
}

.callout-panel--accent {
  border-left: 4px solid var(--sv-gold);
}

.callout-panel--quote {
  padding: 1.5rem 2rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.callout-panel--outlined {
  padding: 2rem;
  border: 2px solid rgba(214, 168, 88, 0.2);
}

.callout-panel--gradient {
  padding: 3rem;
  border: 2px solid var(--sv-gold);
  background: linear-gradient(135deg, rgba(214, 168, 88, 0.08) 0%, rgba(214, 168, 88, 0.03) 100%);
}

.callout-panel--compact {
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-sm);
}

[data-theme="dark"] .callout-note {
  background: rgba(214, 168, 88, 0.12);
  color: var(--sv-text-body);
}

[data-theme="dark"] .callout-note--chip {
  background: rgba(214, 168, 88, 0.16);
}

[data-theme="dark"] .callout-panel {
  background: var(--sv-surface-white);
  border: 1px solid var(--sv-border);
}

[data-theme="dark"] .callout-panel--warm {
  background: rgba(45, 35, 24, 0.6);
}

[data-theme="dark"] .callout-panel--accent {
  border-left-color: var(--sv-gold);
}

[data-theme="dark"] .callout-panel--outlined {
  border-color: rgba(214, 168, 88, 0.3);
}

[data-theme="dark"] .callout-panel--gradient {
  border-color: var(--sv-gold);
  background: linear-gradient(135deg, rgba(214, 168, 88, 0.12) 0%, rgba(214, 168, 88, 0.06) 100%);
}


.bio-layout {
  display: grid;
  gap: 3rem;
}

@media (min-width: 900px) {
  .bio-layout { grid-template-columns: 0.8fr 1.2fr; align-items: center; }
  /* Ensure bio-image-ph maintains square aspect ratio on desktop grid */
  .bio-layout .bio-image-ph {
    aspect-ratio: 1/1;
    max-width: 100%;
  }
}

.bio-image-ph {
  width: 100%;
}

/* Add vertical offset for grid-2 layouts to visually center with text */
.grid-2 .bio-image-ph {
  margin-top: 6rem;
}

/* Mobile overrides moved to after Grid Systems section to ensure proper cascade */

.bio-image-ph img {
  border: 2px solid var(--sv-gold);
  box-shadow: var(--shadow-elevated);
  border-radius: var(--radius-sm);
}

/* Bio text column — paired with .bio-image-ph inside .bio-layout grid */
.bio-text {
  line-height: 1.7;
}

/* Center eyebrow + heading on mobile when bio-layout stacks to single column */
@media (max-width: 899px) {
  .bio-text > .eyebrow,
  .bio-text > h2 {
    text-align: center;
  }
}

/* Component: bio-image-ph dark mode (co-located) */
[data-theme="dark"] .bio-image-ph {
  background: transparent;
}

/* About Ritesh subheading - ensuring readability */
.about-ritesh-subheading {
  font-size: 0.95rem;
  font-weight: 500;
}
.about-ritesh-subheading:not([class*="sv-text-"]) {
  color: var(--sv-text-secondary);
}

/* Simple caption below image */
.image-caption {
  font-size: var(--text-sm);
  opacity: 0.6;
  font-style: italic;
  text-align: center;
  margin-top: 0.625rem;
  margin-bottom: 0;
  display: block;
}
.image-caption:not([class*="sv-text-"]) {
  color: var(--sv-navy);
}

/* Apply gold border to all content images (excluding brand/icons).
   Uses --sv-gold-base (fixed palette gold) rather than --sv-gold,
   because --sv-gold is section-scoped for *text* contrast — decorative
   borders should always use the bright gold regardless of section. */
section img[src*="images/learn/"],
section img[src*="images/lifestyle/"],
section img[src*="images/educational/"],
section img[src*="images/testimonials/"],
section img[src*="images/trust-signals/"],
section img[src*="images/team/"],
section img[src*="images/process/"] {
  border: 2px solid var(--sv-gold-base);
  box-shadow: var(--shadow-elevated);
}

.highlight-box {
  background: rgba(255,255,255,0.5);
  padding: 1.25rem;
  border-radius: var(--radius-sm);
  margin: 1.5rem 0 2rem 0;
  box-shadow: var(--shadow-nav);
}

.highlight-box p {
  margin-bottom: 0;
}

/* Dark mode: highlight box */
[data-theme="dark"] .highlight-box {
  background: rgba(221, 183, 112, 0.08);
}

.who-grid {
  display: grid;
  gap: 2rem;
  align-items: stretch;
}

@media (min-width: 768px) {
  .who-grid { grid-template-columns: 1fr 1fr; }
}

/* "This is for you" and "This isn't for you" component */
.who-col {
  opacity: 1;
}

.who-col h3 {
  font-size: var(--text-xl);
  border-bottom: 1px solid var(--sv-border);
  padding-bottom: 0.5rem;
  margin-bottom: 0;
}

.who-col ul {
  margin-top: 0.75rem;
  margin-bottom: 0;
}

.who-col ul li {
  font-size: var(--text-base);
  line-height: 1.7;
  margin-top: 0;
  margin-bottom: 1rem;
}

.who-col ul li:first-child {
  margin-top: 0;
}

.who-col ul li strong {
  font-weight: 600;
  margin-top: 0;
  display: inline;
}

/* Readability overrides for who-col content (inside .bg-navy) */
.who-col p:not([class*="sv-text-"]),
.who-col li:not([class*="sv-text-"]) {
  color: var(--sv-text-body);
}

/* Utility Classes */
/* === ADDITIONAL STYLES FOR COMPATIBILITY === */

/* Enhanced Typography with clamp() — bare fallbacks for content outside .sv-wrapper.
   Inside .sv-wrapper, the higher-specificity rules at ~line 649 take precedence. */
h1 { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; }
h2 { font-size: clamp(2rem, 4vw, 2.8rem); margin-top: 0; }
h3 { font-size: 1.5rem; font-weight: 600; }
h4 { font-size: 1.1rem; font-weight: 600; text-transform: none; letter-spacing: normal; }

strong { font-weight: 600; }
em { font-style: italic; }

/* Section Styling */
section { padding: 5rem 0; position: relative; }

@media (max-width: 1023px) {
  section { padding: 3rem 0; }
}

/* Noise opacity for texture-overlay (base properties from shared rule ~line 806) */
.texture-overlay::after {
  opacity: 0.02;
  z-index: 0;
}

/* Grid Systems - Mobile First */
.grid-2, .grid-3 {
  display: grid;
  grid-template-columns: 1fr; /* Single column on mobile */
  gap: 1.5rem; /* Smaller default gap for mobile */
  position: relative;
  z-index: 1;
}

/* Card wrapper flex layout — all viewports */
.grid-2 > div:has(.card),
.grid-3 > div:has(.card) {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Tablet breakpoint - 2 columns for better spacing */
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 2rem; }

  /* Center orphan card when odd number of items wraps in 2-col grid
     (e.g., 3 reading cards: 2 on top, 1 centered below) */
  .grid-3 > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 50%;
    justify-self: center;
  }
}

/* Desktop breakpoint */
@media (min-width: 1024px) {
  .grid-2 { grid-template-columns: 1fr 1fr; align-items: start; gap: 3rem; }
  .grid-2-top { align-items: flex-start; }
}

/* Large desktop - grid-3 becomes 3 columns, orphan centering not needed */
@media (min-width: 1200px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .grid-3 > :last-child:nth-child(odd) {
    grid-column: auto;
    max-width: none;
    justify-self: stretch;
  }
}

/* Mobile Responsive Overrides - Must come after grid definitions */
@media (max-width: 1023px) {
  /* Remove desktop alignment margin on mobile */
  /* Keep natural spacing for image on mobile */
  .grid-2 .bio-image-ph {
    margin-top: 0;
  }


  /* Directly target the specific structure on About page */
  .bg-cream .grid-2 > div:nth-child(2) {
    margin-top: 0;
  }

  .bg-cream .grid-2 > div:nth-child(2) > div {
    margin-top: 0;
  }

  /* Add extra bottom padding to Personal Warmth section on mobile to prevent overlap */
  .bg-cream.texture-overlay {
    padding-bottom: 4rem;
  }


  /* Reduce card padding on mobile for better content width */
  .card, .question-card {
    padding: 1.5rem;
  }

  /* Remove all card margins - let flex gap handle spacing */
  .grid-2 .card,
  .grid-3 .card {
    margin-bottom: 0;
  }

  /* Reduce grid gap since cards handle their own spacing */
  .grid-2,
  .grid-3 {
    gap: 1.5rem;
  }
}

/* Timeline Grid - Mobile First */
.timeline-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 600px) {
  .timeline-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

/* Hide timeline connection line by default (mobile);
   positioning + gradient defined here, display toggled at 900px */
.timeline-line {
  display: none;
  top: 17px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--sv-gold) 0%, var(--sv-gold) 33%, rgba(212, 175, 55, 0.3) 33%, rgba(212, 175, 55, 0.3) 100%);
  z-index: 0;
}

@media (min-width: 900px) {
  .timeline-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }

  /* Show timeline line only on desktop 4-column layout */
  .timeline-line {
    display: block;
  }
}

/* Extra small devices - phones */
@media (max-width: 480px) {
  /* Further reduce section padding on phones */
  section {
    padding: 2rem 0;
  }

  /* Tighter card padding on small phones */
  .card, .question-card {
    padding: 1.25rem;
  }

  /* Grid gap 1.5rem already set at 768px breakpoint — no need to repeat at 480px */

  /* Reduce timeline gap on phones */
  .timeline-grid {
    gap: 1.5rem;
  }

  /* Reduce check-list padding for better text flow */
  ul.check-list li {
    padding-left: 1.25rem;
  }


  /* Further reduce gap on auto-fit grids on phones */
  .grid-auto-220,
  .grid-auto-240,
  .grid-auto-280 {
    gap: 1.5rem;
  }
}


/* Section Background Classes with Spacing */

/* Lists */
ul.check-list {
  list-style: none;
  padding: 0;
  margin-bottom: 1rem;
}
ul.check-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}
ul.check-list li::before {
  content: '✓';
  color: var(--sv-gold);
  position: absolute;
  left: 0;
  font-weight: bold;
  font-size: 1.1rem;
}

/* Navy list text — semantic token (inherits section-scoped value) */
.bg-navy ul:not([class*="sv-text-"]),
.bg-navy ul li:not([class*="sv-text-"]) {
  color: var(--sv-text-body);
}

ul.star-list,
ul.arrow-list { list-style: none; padding: 0; }

ul.star-list li { position: relative; padding-left: 1.5rem; margin-bottom: 1rem; }
ul.star-list li::before {
  content: '✦';
  color: var(--sv-gold);
  position: absolute;
  left: 0;
  top: 0.45em;
  font-weight: bold;
  font-size: 1rem;
  line-height: 1;
}

ul.arrow-list li { position: relative; padding-left: 1.5rem; margin-bottom: 0.75rem; }
ul.arrow-list li::before {
  content: '→';
  color: var(--sv-gold);
  position: absolute;
  left: 0;
  font-weight: bold;
}

/* Package Grid & Cards */
.package-card {
  background: rgba(250, 246, 239, 0.6);
  backdrop-filter: blur(10px);
  border: 2px solid var(--sv-border);
  border-radius: var(--radius-md);
  padding: 2rem;
  position: relative;
  display: flex;
  flex-direction: column;
}

.package-card h3 {
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 0.5rem;
}


.package-price {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-align: center;
}
.package-price:not([class*="sv-text-"]) {
  color: var(--sv-gold);
}

/* (0,2,1) — intentionally overrides the base :where(.sv-wrapper) p rule
   and :where(.sv-wrapper) .text-center p for package-card body copy. Resets the auto-margins
   that would otherwise shrink the <p> to content-width in the flex column
   (auto margins on flex items override align-items: stretch). */
.sv-wrapper .package-card p {
  margin-bottom: 1rem;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

.package-card ul {
  list-style: none;
  padding: 0 1.5rem;
  margin-bottom: 1.5rem;
  flex-grow: 1;
  text-align: left;
}

.package-card ul li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.5rem;
}
.package-card ul li:not([class*="sv-text-"]) {
  color: var(--sv-slate);
}

.package-card ul li::before {
  content: '•';
  color: var(--sv-gold);
  position: absolute;
  left: 0;
  font-weight: bold;
}

.package-card .sv-btn {
  width: 100%;
  text-align: center;
  margin-top: auto;
}

/* Reading Cards (similar to package cards but for readings page) */
.reading-card {
  background: rgba(250, 246, 239, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid var(--sv-border);
  border-radius: var(--radius-md);
  padding: 2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.reading-card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  text-align: center;
}


.reading-card .card-intro {
  margin-bottom: 1.5rem;
  text-align: center;
}
.reading-card .card-intro:not([class*="sv-text-"]) {
  color: var(--sv-slate);
}

.reading-card ul {
  list-style: none;
  padding: 0;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.reading-card ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}
.reading-card ul li:not([class*="sv-text-"]) {
  color: var(--sv-slate);
}

.reading-card ul li::before {
  content: '✓';
  color: var(--sv-gold);
  position: absolute;
  left: 0;
  font-weight: bold;
}

.reading-card-footer {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sv-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}

.reading-price {
  font-size: 2rem;
  font-weight: 700;
  display: block;
}
.reading-price:not([class*="sv-text-"]) {
  color: var(--sv-gold);
}

/* Dark mode: pricing */
[data-theme="dark"] .reading-price:not([class*="sv-text-"]),
[data-theme="dark"] .package-price:not([class*="sv-text-"]) {
  color: var(--sv-gold);
}

.reading-card-footer .sv-btn {
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
  text-align: center;
}

/* Dark mode detailed check-list within cream sections (migrated from readings.html) */
[data-theme="dark"] .bg-cream .bg-warm-cream {
  background: rgba(45, 35, 24, 0.6);
}
/* (0,4,2) — well above any competing strong/span color rules */
[data-theme="dark"] .bg-cream .check-list li strong:not([class*="sv-text-"]) {
  color: var(--sv-text-primary);
}
[data-theme="dark"] .bg-cream .check-list li span:not([class*="sv-text-"]) {
  color: var(--sv-text-secondary);
  opacity: 1;
}

/* Insight Grid & Cards - for "What You'll Understand" section */
.insight-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 2rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .insight-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.insight-card {
  background: rgba(250, 246, 239, 0.6);
  backdrop-filter: blur(10px);
  padding: 1.5rem 2rem 2rem 2rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--sv-border);
  box-shadow: 0 2px 4px rgba(10,26,47,0.04);
}

.insight-card h3 {
  font-size: 1.35rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 1rem;
}


.insight-card p {
  margin: 0;
}
/* Card paragraph colors — consolidated for insight + orientation variants */
.insight-card p:not([class*="sv-text-"]),
.orientation-card p:not([class*="sv-text-"]) {
  color: var(--sv-slate);
}

/* Orientation Grid & Cards - for "What Drives Them" section */
.orientation-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .orientation-grid {
    grid-template-columns: 1fr;
  }
}

.orientation-card {
  background: rgba(250, 246, 239, 0.6);
  backdrop-filter: blur(10px);
  padding: 1rem 2rem 2rem 2rem;
  border-radius: var(--radius-md);
  box-shadow: 0 2px 6px rgba(10,26,47,0.06);
  display: flex;
  flex-direction: column;
}

.orientation-card h3 {
  font-size: 1.35rem;
  margin-top: 0;
  margin-bottom: 1rem;
  letter-spacing: normal;
  text-transform: none;
}
.orientation-card h3:not([class*="sv-text-"]) {
  color: var(--sv-navy);
}

.orientation-card p {
  margin-bottom: 1rem;
}


.orientation-card p:last-child {
  margin-bottom: 0;
  margin-top: auto;
}

.orientation-card strong {
  margin-top: 0;
  display: inline;
}

/* Mobile optimization */
@media (max-width: 1023px) {
  /* Reduce spacing on mobile */
  details .grid-3 {
    margin-top: 1rem;
    gap: 1.5rem;
  }
  /* Constrain standalone bio-image-ph on mobile */
  .bio-image-ph {
    max-width: 300px;
    margin: 0 auto;
    aspect-ratio: 1/1;
  }
  .bio-image-ph img {
    max-width: 300px;
    margin: 0 auto;
    display: block;
  }

}

/* Override mobile constraint for bio-layout at tablet+ (900px-1023px overlap) */
@media (min-width: 900px) and (max-width: 1023px) {
  .bio-layout .bio-image-ph {
    max-width: 100%;
    margin: 0;
    aspect-ratio: 1/1;
  }
}


/* Logic Block */
/* Lead text — canonical definition (font, color, spacing) */
.lead,
p.lead {
  font-size: var(--text-lg);
  font-weight: 300;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}
.lead:not([class*="sv-text-"]),
p.lead:not([class*="sv-text-"]) {
  color: var(--sv-text-body);
}

/* Bio Image Wrapper */
.bio-image-wrapper {
  position: relative;
}

/* Contact Box */
.contact-box, .contact-info-box {
  background: var(--sv-surface-white);
  padding: 2.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--sv-border);
  box-shadow: 0 2px 8px rgba(10,26,47,0.05);
  text-align: center;
  max-width: 600px;
  margin: 3rem auto;
}

.contact-box h2,
.contact-info-box h2,
.contact-info-box h3 {
  margin-top: 0;
  padding-top: 0;
}

/* Dark mode: contact boxes */
[data-theme="dark"] .contact-box,
[data-theme="dark"] .contact-info-box {
  background: var(--sv-dark-surface);
  border-color: var(--sv-border);
}

.response-box {
  text-align: center;
  margin-top: 2rem;
}

.response-box p {
  margin-bottom: 0;
}


/* Category Navigation */
.category-nav {
  margin-bottom: 1.5rem;
}

.category-nav h2 {
  margin-bottom: 1rem;
}

.category-nav a {
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--sv-surface-white);
  border: 1px solid var(--sv-border);
  transition: all 0.2s ease;
}

.category-nav a:hover {
  background: var(--sv-navy);
  text-decoration: none;
}
.category-nav a:not([class*="sv-text-"]):hover {
  color: var(--sv-cream);
}

/* Dark mode: category navigation */
[data-theme="dark"] .category-nav a {
  background: var(--sv-dark-surface);
  border-color: var(--sv-border);
}
[data-theme="dark"] .category-nav a:not([class*="sv-text-"]) {
  color: var(--sv-text-body);
}

[data-theme="dark"] .category-nav a:hover {
  background: var(--sv-dark-surface-raised);
  border-color: rgba(232, 221, 208, 0.3);
}
[data-theme="dark"] .category-nav a:not([class*="sv-text-"]):hover {
  color: var(--sv-text-primary);
}

/* -----------------------------------------------------------------------------
   FIX #13: Category links touch targets (LOW)
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .category-nav a {
    padding: 0.625rem 1rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Clarity Grid/Box */
.clarity-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.clarity-box {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
  background: rgba(255,255,255,0.5);
  border-radius: var(--radius-sm);
  border: 1px solid var(--sv-border);
}

.clarity-box h3 {
  margin-top: 0;
  text-align: center;
}

/* Dark mode: clarity box */
[data-theme="dark"] .clarity-box {
  background: rgba(221, 183, 112, 0.08);
  border-color: rgba(221, 183, 112, 0.2);
}

[data-theme="dark"] .clarity-box h3:not([class*="sv-text-"]) {
  color: var(--sv-text-primary);
}

[data-theme="dark"] .clarity-box li:not([class*="sv-text-"]) {
  color: var(--sv-text-body);
}

[data-theme="dark"] .clarity-box strong:not([class*="sv-text-"]) {
  color: var(--sv-text-primary);
}


/* Card Intro */
.card-intro {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--sv-border);
}

/* Contact Email */
.contact-email {
  font-size: 1.1rem;
  font-weight: 600;
}
.contact-email:not([class*="sv-text-"]) {
  color: var(--sv-gold);
}

/* Cross List - for exclusions / "not for you if" */
ul.cross-list { list-style: none; padding: 0; margin: 0; }
ul.cross-list li { position: relative; padding-left: 1.75rem; margin-bottom: 0.75rem; }
ul.cross-list li:last-child { margin-bottom: 0; }
ul.cross-list li::before {
  content: '✕';
  color: var(--sv-slate);
  opacity: 0.6;
  position: absolute;
  left: 0;
  font-weight: bold;
}
/* Cross List - on dark backgrounds (e.g., bg-navy) */
.bg-navy ul.cross-list li::before {
  color: rgba(255, 255, 255, 0.5);
  opacity: 1;
}
/* Cross List - Dark Mode */
[data-theme="dark"] ul.cross-list li::before {
  color: rgba(255, 255, 255, 0.5);
  opacity: 1;
}

/* FAQ Page Specific Styles */
.faq-category {
  margin: 0 0 3rem 0;
}

.faq-category:first-of-type {
  margin-top: 0;
}

.faq-category h2 {
  border-bottom: 2px solid var(--sv-gold);
  padding-bottom: 0.75rem;
  margin-bottom: 2rem;
}

.hero-section {
  background: var(--gradient-navy);
  color: var(--sv-cream);
  padding: 4rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 3rem;
}

.hero-section h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  margin-bottom: 1rem;
}
.hero-section h1:not([class*="sv-text-"]) {
  color: var(--sv-cream);
}

.hero-section p {
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.7;
  max-width: 750px;
  margin: 0 auto;
}
/* (0,2,1) — no higher-specificity light-mode competitor; dark override at (~line 3575) uses (0,3,2) */
.hero-section p:not([class*="sv-text-"]) {
  color: var(--sv-cream);
}

/* Dark mode: hero section variant */
[data-theme="dark"] .hero-section {
  background: var(--gradient-navy-deep);
}

[data-theme="dark"] .hero-section h1:not([class*="sv-text-"]) {
  color: var(--sv-text-primary);
}

/* (0,3,2) — beats .hero-section p:not(...) light rule at (0,2,2) by specificity */
[data-theme="dark"] .hero-section p:not([class*="sv-text-"]) {
  color: var(--sv-text-body);
}

/* FAQ Details Accordion — canonical definition
   Covers both inline .faq-item and .faq-category details on FAQ page */
details.faq-item,
.faq-category details {
  background: var(--sv-surface-white);
  border-bottom: 1px solid var(--sv-border);
  padding: 0.5rem 1rem;
  margin-bottom: 0.5rem;
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 3px rgba(10,26,47,0.03);
  position: relative;
}

/* Noise opacity + radius for FAQ items (base properties from shared rule ~line 806) */
details.faq-item::after,
.faq-category details::after {
  opacity: 0.01;
  border-radius: var(--radius-sm);
}

details.faq-item summary,
.faq-category details summary {
  padding: 1.25rem 0;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
  font-size: var(--text-lg);
  font-family: var(--font-serif);
  line-height: 1.4;
}
details.faq-item summary:not([class*="sv-text-"]),
.faq-category details summary:not([class*="sv-text-"]) {
  color: var(--sv-navy);
}

details.faq-item summary::-webkit-details-marker,
.faq-category details summary::-webkit-details-marker {
  display: none;
}

details.faq-item summary:not([class*="sv-text-"]):hover,
.faq-category details summary:not([class*="sv-text-"]):hover {
  color: var(--sv-gold);
}

details.faq-item summary::after,
.faq-category details summary::after {
  content: '+';
  font-size: 1.2rem;
  color: var(--sv-gold);
  transition: transform 0.2s ease;
}

details.faq-item[open] summary::after,
.faq-category details[open] summary::after {
  content: '−';
  transform: scale(1.1);
}

details.faq-item[open] div,
.faq-category details[open] div {
  padding-bottom: 1rem;
  position: relative;
  z-index: 1;
}
details.faq-item[open] div:not([class*="sv-text-"]),
.faq-category details[open] div:not([class*="sv-text-"]) {
  color: var(--sv-charcoal);
}

/* FAQ answer styling */
.faq-category details div p {
  margin-bottom: 1rem;
  line-height: 1.7;
  max-width: none;
}

.faq-category details div p:last-child {
  margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
   FAQ - Mobile text sizing
   Sets FAQ summary and answer font sizes for tablet/mobile viewports.
   ----------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  details.faq-item summary,
  .faq-category details summary {
    font-size: var(--text-lg);
    padding: 1rem 0;
  }

  details.faq-item div p,
  .faq-category details div p {
    font-size: var(--text-base);
  }
}

/* Dark mode: FAQ accordion */
[data-theme="dark"] details.faq-item,
[data-theme="dark"] .faq-category details {
  background: var(--sv-dark-surface);
  border-color: var(--sv-border);
}

[data-theme="dark"] details.faq-item summary:not([class*="sv-text-"]),
[data-theme="dark"] .faq-category details summary:not([class*="sv-text-"]) {
  color: var(--sv-text-primary);
}

[data-theme="dark"] details.faq-item summary:not([class*="sv-text-"]):hover,
[data-theme="dark"] .faq-category details summary:not([class*="sv-text-"]):hover {
  color: var(--sv-gold);
}

[data-theme="dark"] details.faq-item summary::after,
[data-theme="dark"] .faq-category details summary::after {
  color: var(--sv-gold);
}

[data-theme="dark"] details.faq-item[open] div:not([class*="sv-text-"]),
[data-theme="dark"] .faq-category details[open] div:not([class*="sv-text-"]) {
  color: var(--sv-text-body);
}


/* === READABILITY & CONVERSION ENHANCEMENTS === */

/* Intro Text */
.intro-text {
  font-size: var(--text-base);
  max-width: 700px;
  margin: 0 auto 3rem auto;
  color: var(--sv-slate);
  text-align: center;
}

/* --- em:only-child — shared typography reset ---
   Global rule: resets em elements used as standalone callout text
   back to sans-serif body typography. Context-specific color rules follow. */
.bg-cream-deep em,
p > em:only-child,
div > em:only-child,
.quote-block em,
blockquote em,
.cta-card p > em:only-child,
.text-center > em:only-child,
.bg-navy p > em:only-child,
.bg-navy div > em:only-child {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-style: normal;
  font-weight: 400;
  line-height: 1.7;
}

/* Quote em color — dark override beats by specificity */
p > em:only-child:not([class*="sv-text-"]),
div > em:only-child:not([class*="sv-text-"]),
.quote-block em:not([class*="sv-text-"]),
blockquote em:not([class*="sv-text-"]) {
  color: var(--sv-navy);
}

/* Centered em color — beats dark em by specificity */
.text-center > em:only-child:not([class*="sv-text-"]) {
  color: var(--sv-navy);
}

/* Cream-deep em color — dark override beats by specificity */
.bg-cream-deep em:not([class*="sv-text-"]) {
  color: var(--sv-navy);
}

/* (0,3,2) — no competing color rules at this specificity */
.bg-navy p > em:only-child:not([class*="sv-text-"]),
.bg-navy div > em:only-child:not([class*="sv-text-"]) {
  color: var(--sv-gold-light);
}

/* Link Focus States */
a:focus {
  outline: 2px solid var(--sv-gold-base);
  outline-offset: 2px;
}

a:focus-visible {
  outline: 2px solid var(--sv-gold-base);
  outline-offset: 2px;
  border-radius: 2px;
}

a:focus:not(:focus-visible) {
  outline: none;
}

/* Navy background: fix list and quote spacing */
.bg-navy ul {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 1.25rem;
}

.bg-navy ul li {
  margin-bottom: 0.6rem;
  line-height: 1.7;
}

.bg-navy ul li:last-child {
  margin-bottom: 0;
}

.bg-navy ul li:first-child {
  margin-top: 0;
}

.bg-navy > p strong:not([class*="sv-text-"]),
.bg-navy > div > p strong:not([class*="sv-text-"]) {
  color: var(--sv-gold-light);
  font-weight: 600;
}

.bg-navy > strong:not([class*="sv-text-"]) {
  margin-top: 1.25rem;
  margin-bottom: 0;
  display: inline-block;
  color: var(--sv-gold-light);
  font-weight: 600;
}


/* Naming note box — standalone component, no competing selectors */
.naming-note {
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  padding: 1.5rem 2rem;
  text-align: left;
}


.bg-navy p {
  font-weight: 400;
}

/* ===== HOMEPAGE SPECIFIC FIXES ===== */

/* Life Sections Grid
   Mobile: 2x2 grid (4 boxes)
   768px+: 3 boxes in row, note box full-width below */
.life-sections-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .life-sections-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
  }
}

/* Life Section Boxes — standalone component, no competing selectors */
.life-section-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 1rem 1.25rem;
  width: 100%;
  background: var(--sv-cream-warm);
  border-radius: var(--radius-sm);
}

@media (min-width: 768px) {
  .life-section-box {
    align-items: flex-start;
    padding: 1.25rem 1.75rem;
  }
}

.life-section-box h3 {
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 0.75rem;
}
.life-section-box h3:not([class*="sv-text-"]) {
  color: var(--sv-navy);
}

@media (min-width: 768px) {
  .life-section-box h3 {
    text-align: left;
    font-size: 1.35rem;
  }
}

.life-section-box ul {
  text-align: left;
  font-size: 0.9rem;
  line-height: 1.6;
  padding: 0;
  margin: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .life-section-box ul {
    font-size: 1rem;
  }
}

.life-section-box ul li {
  text-align: left;
  margin-bottom: 0.25rem;
}

/* Dark variant for learn.html (navy background) — wins by source order over base */
.life-section-box--dark {
  background: rgba(255, 255, 255, 0.05);
}
.life-section-box--dark h3:not([class*="sv-text-"]) {
  color: var(--sv-cream);
}
.life-section-box--dark ul:not([class*="sv-text-"]),
.life-section-box--dark ul li:not([class*="sv-text-"]) {
  color: var(--sv-dark-slate-light);
}

/* Dark mode toggle - life section boxes — (0,2,0)+ beats base (0,1,0) */
[data-theme="dark"] .life-section-box,
[data-theme="dark"] .life-sections-grid .life-section-box {
  background: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .life-section-box h3:not([class*="sv-text-"]),
[data-theme="dark"] .life-sections-grid .life-section-box h3:not([class*="sv-text-"]) {
  color: var(--sv-text-primary);
}
[data-theme="dark"] .life-section-box ul:not([class*="sv-text-"]),
[data-theme="dark"] .life-section-box ul li:not([class*="sv-text-"]),
[data-theme="dark"] .life-sections-grid .life-section-box ul:not([class*="sv-text-"]),
[data-theme="dark"] .life-sections-grid .life-section-box ul li:not([class*="sv-text-"]) {
  color: var(--sv-dark-slate-light);
}

/* "Another way to think about it" - terrain section
   (0,4,0) specificity beats any utility class */
.bg-cream-deep:not(.life-section-box):not(.naming-note):not(.testimonial) {
  padding: 1.5rem 2rem 2rem;
  text-align: center;
}

/* Testimonial content - left-aligned; excluded by :not(.testimonial) above */
.testimonial p {
  text-align: left;
}

/* .naming-note excluded from centered .bg-cream-deep p rule above */
.naming-note p {
  text-align: left;
}

/* Centered text in cream boxes — excludes .naming-note and .testimonial */
.bg-cream-deep:not(.naming-note):not(.testimonial) p {
  font-size: var(--text-base);
  line-height: 1.7;
  text-align: center;
}

/* Questions section — tighter bottom padding; the birth-time info box
   is a small element so 6rem below it feels excessive */
#questions { padding-bottom: 3rem; }

/* "What People Seek Clarity On" - center the intro text */
/* (1,1,1) — no competing font-size at this specificity */
#questions p.text-center {
  font-size: var(--text-lg);
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}

/* "Work with Ritesh" - center and improve */
/* (0,3,2) — no competing font-size at this specificity */
.section-spacing h2.text-center + p.text-center {
  font-size: var(--text-lg);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

/* ===== MOBILE NAVIGATION ===== */

/* Header Top - contains branding and hamburger */
.header-top {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* Hamburger Menu Button */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 2.5rem;
  height: 2.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 1001;
  transition: transform 0.3s ease;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.mobile-menu-toggle:hover {
  transform: translateY(-50%) scale(1.05);
}

.mobile-menu-toggle:focus {
  outline: 2px solid var(--sv-gold-base);
  outline-offset: 4px;
  border-radius: 4px;
}

.hamburger-line {
  width: 100%;
  height: 3px;
  background-color: var(--sv-navy);
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}

/* Hamburger animation when open */
.mobile-menu-toggle.active {
  transform: translateY(-50%);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: translateX(-20px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Desktop Navigation - Reset mobile styles */
@media (min-width: 1151px) {
  .header-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    position: relative;
    transition: none;
  }

  .header-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    transition: none;
    width: 100%;
  }

  .header-branding {
    transition: none;
  }

  .brand-group {
    flex-direction: row;
    transition: none;
  }

  /* Nav is now outside header, so sticky works properly */
  .main-nav {
    position: sticky;
    top: 0;
    width: 100%;
    height: auto;
    background: var(--sv-cream);
    z-index: 1000;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--sv-border);
    box-shadow: var(--shadow-nav);
    overflow-y: visible;
    transition: none;
  }

  /* Dark .main-nav handled by root-level rule at ~line 939 (same declarations, higher specificity) */

  .main-nav ul {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding: 0;
  }

  .main-nav li {
    width: auto;
    border-bottom: none;
  }

  .main-nav a {
    display: inline;
    padding: 0;
    padding-bottom: 4px;
    font-size: 1rem;
  }

  .main-nav::before {
    display: none;
  }
}

/* Mobile Navigation Styles */
@media (max-width: 1150px) {
  .mobile-menu-toggle {
    display: flex;
  }

  .header-container {
    display: block;
  }

  .header-branding {
    margin-bottom: 1rem;
  }

  .main-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: var(--sv-surface-white);
    box-shadow: -4px 0 20px rgba(10, 26, 47, 0.15);
    transition: right 0.3s ease-in-out;
    z-index: 1000;
    overflow-y: auto;
    padding-top: 5rem;
  }

  .main-nav.active {
    right: 0;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 1rem 0;
  }

  .main-nav li {
    width: 100%;
    border-bottom: 1px solid var(--sv-border);
  }

  .main-nav a {
    display: block;
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .main-nav a:hover,
  .main-nav a.active {
    background-color: rgba(214, 168, 88, 0.08);
    color: var(--sv-navy);
  }

  .main-nav a.active::after {
    display: none;
  }

  /* Overlay when menu is open */
  .main-nav::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(10, 26, 47, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: -1;
  }

  .main-nav.active::before {
    opacity: 1;
    visibility: visible;
  }

  /* Prevent body scroll when mobile menu is open */
  body.mobile-menu-open {
    overflow: hidden;
  }

  /* Dark mode mobile nav overrides */
  [data-theme="dark"] .main-nav a:hover,
  [data-theme="dark"] .main-nav a.active {
    background-color: transparent;
  }
}

/* -----------------------------------------------------------------------------
   FIX #10: Touch target improvements (LOW)
   Mobile menu toggle lives in the mobile navigation component.
   ----------------------------------------------------------------------------- */
@media (max-width: 1150px) {
  .mobile-menu-toggle {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

/* Desktop - full horizontal navigation */
/* These styles are already defined in the main header section above */

/* ===== DARK MODE TOGGLE ===== */

.theme-toggle {
  background: rgba(250, 246, 239, 0.7);
  border: 2px solid var(--sv-border);
  cursor: pointer;
  padding: 0.5rem 0.875rem;
  transition: background-color 0.2s ease;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--sv-navy);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

.theme-toggle:hover,
.theme-toggle:active {
  background: var(--sv-cream);
}

.theme-toggle:focus {
  outline: none;
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--sv-navy);
  outline-offset: 2px;
}

/* Icon visibility based on theme */
.theme-icon {
  flex-shrink: 0;
}

.theme-icon-light {
  display: block;
}

.theme-icon-dark {
  display: none;
}

[data-theme="dark"] .theme-icon-light {
  display: none;
}

[data-theme="dark"] .theme-icon-dark {
  display: block;
}

/* Dark mode button style - keep consistent appearance */
[data-theme="dark"] .theme-toggle {
  color: var(--sv-text-primary);
  background: var(--sv-surface-white);
  border-color: var(--sv-border);
}

[data-theme="dark"] .theme-toggle:hover {
  background: var(--sv-cream);
  color: var(--sv-text-primary);
}

/* Position theme toggle - inside nav container (sticks with nav) */
.theme-toggle-nav {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);  /* Vertically centered with nav items */
  z-index: 100;
}

/* Mobile - move to header area */
@media (max-width: 1150px) {
  .theme-toggle-nav {
    position: fixed;
    top: 1rem;
    right: 72px; /* 16px padding + 44px hamburger + 12px gap */
    transform: none;
    z-index: 1001;
    margin-left: 0;
  }
}

/* Defensive fallback: .theme-toggle-header is added by theme-toggle.js (line 49)
   only when .nav-container is absent from the DOM. Currently all 18 HTML pages
   include .nav-container, so the primary .theme-toggle-nav path always fires.
   Retained as a safety net for alternate page layouts or future restructuring. */
.theme-toggle-header {
  position: absolute;
  right: 60px; /* Space for hamburger on mobile */
  top: 1rem;
  z-index: 100;
}

/* On desktop - positioned in top-right corner, fixed to stay visible when scrolling */
@media (min-width: 1151px) {
  .theme-toggle-header {
    position: fixed;
    top: 1rem;
    right: 1.5rem;
    z-index: 1001;
  }
}

/* -----------------------------------------------------------------------------
   FIX #6: Theme toggle position - prevent overlap with hamburger (MEDIUM)
   Must appear after base .theme-toggle-header rule (same specificity; cascade order).
   ----------------------------------------------------------------------------- */
@media (max-width: 1150px) {
  .theme-toggle-header {
    right: 72px;
  }
}

/* -----------------------------------------------------------------------------
   FIX #10: Touch target improvements (LOW)
   Theme toggle rule stays in theme-toggle section so it appears after base .theme-toggle.
   ----------------------------------------------------------------------------- */
@media (max-width: 1150px) {
  .theme-toggle {
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
  }
}


/* ========================================
   READABILITY ENHANCEMENTS — WCAG AAA
   ========================================

   READABILITY OVERRIDES
   ~~~~~~~~~~~~~~~~~~~~~
   Component-specific color and opacity overrides for accessibility.
   Inline colors were migrated to .sv-text-* classes in Phase 2;
   inline styles migrated to utility classes in Phases 3-6.
   All [style*="..."] selectors eliminated in Round 18.
   ======================================== */


/* Navy text contrast — now handled by section-scoped --sv-text-* + merged rules above */

/* .hero h1 color + dark mode — canonical at line ~1309 and ~1555.
   These readability duplicates removed; #E8DDD0 is already set in base rule. */

/* Dark mode link color — :where() matches base rule (0,2,1) */
[data-theme="dark"] .sv-wrapper a:where(:not(.sv-btn):not(.sv-btn-primary):not(.sv-btn-secondary):not(.sv-btn-outline):not([class*="sv-text-"])) {
  color: var(--sv-gold);
}

/* Ensure all small text has sufficient weight and contrast */
small:not([class*="sv-text-"]) {
  color: var(--sv-text-secondary);
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */

/* ============================================================================
   STANDARDIZED UTILITY CLASSES
   Color utilities (Phase 2), layout/styling utilities (Phases 3-6).
   Semantic tokens auto-flip in dark mode via :root overrides.
   All [style*="..."] selectors eliminated — dark mode is fully class-based.
   ============================================================================ */

/*
   NAMING CONVENTIONS:
   - Spacing: .{property}-{value} -> .mt-2 = margin-top: 2rem
   - Compound spacing:
     - Axis utility: .p-075-125 = padding: 0.75rem 1.25rem
     - Semantic one-offs: .pad-* (e.g., .pad-card-body-lg, .pad-cta-link)
   - Fractional values use digits without dot -> .mt-075 = margin-top: 0.75rem
   - Negative values -> .mt-neg-15 = margin-top: -1.5rem
   - Borders: .border-{color}-{modifier}
     - No modifier = default weight (e.g., .border-gold)
     - {N}px = explicit width (e.g., .border-gold-3px)
     - a{N} = alpha/opacity (e.g., .border-gold-a30)
     - a{N}-{W}px = alpha + width
     - light/subtle = semantic variant (lower-opacity border variants)
   - Shadows: .shadow-{intensity} -> soft < soft-md < soft-strong < hero < elevated-deep
   - Sizing: .avatar-{px}, .h-{value}, .w-{value}, .max-w-{value}
*/

/* --- Accessibility utilities --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Accessibility: Skip to Content */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--sv-gold);
  color: var(--sv-navy);
  padding: 0.5rem 1rem;
  text-decoration: none;
  z-index: 10002;
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.skip-to-content:focus {
  top: 0;
  opacity: 1;
  transform: translateY(0);
}

/* --- Color utilities --- */
/* Gold/navy/slate tokens auto-flip in dark mode via :root overrides.
   Cream needs an explicit dark override because --sv-cream flips to
   the dark background color (#120D08), making text invisible. */
.sv-text-gold   { color: var(--sv-gold); }
.sv-text-cream  { color: var(--sv-cream); }
.sv-text-navy   { color: var(--sv-navy); }
.sv-text-slate  { color: var(--sv-slate); }

[data-theme="dark"] .sv-text-cream {
  color: var(--sv-text-body);  /* #D4C9BD — softer warm, readable on dark bg */
}

/* Brighter gold link — used on light backgrounds where .sv-text-gold
   resolves to the darker gold-dark. This uses gold-base for visual pop,
   relying on fw-600 + underline (applied via HTML) for accessibility. */
.gold-link-bright {
  color: var(--sv-gold);
}
.gold-link-bright:hover {
  color: var(--sv-navy);
}

/* Centered quote block — used in closing quote sections (.bg-navy) */
.quote-block-centered {
  text-align: center;
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.6;
  padding: 2rem 0;
  max-width: 42rem;
  margin: 0 auto;
}

/* --- Layout utilities --- */
.text-center     { text-align: center; }
.text-left       { text-align: left; }

/* --- Background utilities ---
   These set actual background colors. For section-scoped token overrides,
   see .bg-cream (~line 347) and .bg-navy (~line 353). */
.bg-cream-deep   { background: var(--sv-cream-deep); }
.bg-surface-white { background: var(--sv-surface-white); }
.bg-gold-accent  { background: var(--sv-gold); }
.bg-white        { background: white; }

[data-theme="dark"] .bg-cream-deep   { background: var(--sv-dark-surface); }
[data-theme="dark"] .bg-surface-white { background: var(--sv-dark-surface); }
[data-theme="dark"] .bg-gold-accent  { background: var(--sv-gold); }
[data-theme="dark"] .bg-white        { background: var(--sv-dark-surface); }

/* --- Font size utilities --- */
.sv-fs-xs   { font-size: 0.75rem; }
.sv-fs-sm   { font-size: var(--text-sm); }
.sv-fs-base { font-size: var(--text-base); }
.sv-fs-md   { font-size: 1.1rem; }
.sv-fs-lg   { font-size: var(--text-lg); }
.sv-fs-xl   { font-size: var(--text-xl); }
.sv-fs-095  { font-size: 0.95rem; }
.sv-fs-105  { font-size: 1.05rem; }
.sv-fs-115  { font-size: 1.15rem; }
.sv-fs-13   { font-size: 1.3rem; }
.sv-fs-14   { font-size: 1.4rem; }
.sv-fs-175  { font-size: 1.75rem; }

/* --- Margin utilities --- */
.m-0       { margin: 0; }
.mx-auto   { margin-left: auto; margin-right: auto; }
.mt-0      { margin-top: 0; }
.mt-05     { margin-top: 0.5rem; }
.mt-075    { margin-top: 0.75rem; }
.mt-1      { margin-top: 1rem; }
.mt-125    { margin-top: 1.25rem; }
.mt-15     { margin-top: 1.5rem; }
.mt-2      { margin-top: 2rem; }
.mt-25     { margin-top: 2.5rem; }
.mt-3      { margin-top: 3rem; }
.mt-4      { margin-top: 4rem; }
.mt-neg-15 { margin-top: -1.5rem; }
.mt-auto   { margin-top: auto; }
.mb-0      { margin-bottom: 0; }
.mb-025    { margin-bottom: 0.25rem; }
.mb-05     { margin-bottom: 0.5rem; }
.mb-075    { margin-bottom: 0.75rem; }
.mb-1      { margin-bottom: 1rem; }
.mb-125    { margin-bottom: 1.25rem; }
.mb-15     { margin-bottom: 1.5rem; }
.mb-2      { margin-bottom: 2rem; }
.mb-25     { margin-bottom: 2.5rem; }
.mb-3      { margin-bottom: 3rem; }
.my-1      { margin-top: 1rem; margin-bottom: 1rem; }
.my-2      { margin-top: 2rem; margin-bottom: 2rem; }

/* --- Padding utilities --- */
.p-0       { padding: 0; }
.p-1       { padding: 1rem; }
.p-125     { padding: 1.25rem; }
.p-15      { padding: 1.5rem; }
.p-2       { padding: 2rem; }
.p-25      { padding: 2.5rem; }
.p-3       { padding: 3rem; }
.p-075-125 { padding: 0.75rem 1.25rem; }
.pad-card-body-lg { padding: 2rem 2.5rem 2.5rem; }
.pad-cta-link     { padding: 1rem 2rem; }
.pt-0      { padding-top: 0; }
.pt-1      { padding-top: 1rem; }
.pt-15     { padding-top: 1.5rem; }
.pt-2      { padding-top: 2rem; }
.pt-3      { padding-top: 3rem; }
.pt-4      { padding-top: 4rem; }
.pb-0      { padding-bottom: 0; }
.pb-2px    { padding-bottom: 2px; }
.pb-2      { padding-bottom: 2rem; }
.pb-25     { padding-bottom: 2.5rem; }
.pb-3      { padding-bottom: 3rem; }
.pad-section-heading   { padding: 1.5rem 0; }
.pad-section-lead   { padding: 2.5rem 0; }

/* --- Display & Flexbox utilities --- */
.d-flex         { display: flex; }
.d-block        { display: block; }
.d-inline-block { display: inline-block; }
.d-grid         { display: grid; }
.overflow-hidden { overflow: hidden; }
.flex-col       { flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.justify-center { justify-content: center; }
.flex-1         { flex: 1; }
.flex-2         { flex: 2; }
.flex-shrink-0  { flex-shrink: 0; }

/* --- Gap utilities --- */
.gap-1     { gap: 1rem; }
.gap-15    { gap: 1.5rem; }
.gap-15-3  { gap: 1.5rem 3rem; }
.gap-2     { gap: 2rem; }
.gap-3     { gap: 3rem; }
.gap-4     { gap: 4rem; }

/* --- Width & max-width utilities --- */
.w-full    { width: 100%; }
.max-w-250 { max-width: 250px; }
.max-w-350 { max-width: 350px; }
.max-w-400 { max-width: 400px; }
.max-w-450 { max-width: 450px; }
.max-w-500 { max-width: 500px; }
.max-w-600 { max-width: 600px; }
.max-w-650 { max-width: 650px; }
.max-w-700 { max-width: 700px; }
.max-w-750 { max-width: 750px; }
.max-w-800 { max-width: 800px; }
.max-w-850 { max-width: 850px; }
.max-w-900 { max-width: 900px; }
.max-w-950 { max-width: 950px; }
.max-w-1000 { max-width: 1000px; }

/* --- Typography utilities --- */
.fw-500    { font-weight: 500; }
.fw-600    { font-weight: 600; }
.fw-700    { font-weight: 700; }
.lh-13     { line-height: 1.3; }
.lh-15     { line-height: 1.5; }
.lh-16     { line-height: 1.6; }
.lh-17     { line-height: 1.7; }
.lh-18     { line-height: 1.8; }
.fs-italic { font-style: italic; }
.ws-nowrap { white-space: nowrap; }

/* --- Visual utilities --- */
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }
.opacity-85 { opacity: 0.85; }
.opacity-90 { opacity: 0.9; }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-full { border-radius: 50%; }
.border-sv  { border: 1px solid var(--sv-border); }
.shadow-soft { box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.shadow-soft-md { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.shadow-soft-strong { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.shadow-gold-soft { box-shadow: 0 4px 12px rgba(214, 168, 88, 0.15); }
.shadow-hero { box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.shadow-elevated-deep { box-shadow: 0 20px 40px rgba(0,0,0,0.15); }

[data-theme="dark"] .shadow-soft { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
[data-theme="dark"] .shadow-soft-md { box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
[data-theme="dark"] .shadow-soft-strong { box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
[data-theme="dark"] .shadow-gold-soft { box-shadow: 0 4px 12px rgba(214, 168, 88, 0.25); }
[data-theme="dark"] .shadow-hero { box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
[data-theme="dark"] .shadow-elevated-deep { box-shadow: 0 20px 40px rgba(0,0,0,0.15); }
[data-theme="dark"] .shadow-subtle { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }

.backdrop-blur-10 { backdrop-filter: blur(10px); }

/* --- Semi-transparent background overlays --- */
.bg-white-5  { background: rgba(255,255,255,0.05); }
.bg-navy-dark { background: #0A1A2F; }
.bg-gold-15  { background: rgba(214, 168, 88, 0.15); }
.bg-sv-cream { background: var(--sv-cream); }
.bg-warm-cream { background: rgba(250, 246, 239, 0.6); }

[data-theme="dark"] .bg-white-5  { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .bg-navy-dark { background: #0A1A2F; }
[data-theme="dark"] .bg-gold-15  { background: rgba(214, 168, 88, 0.2); }
[data-theme="dark"] .bg-warm-cream { background: rgba(45, 35, 24, 0.6); }

/* --- Text decoration utilities --- */
.no-underline { text-decoration: none; }
.underline    { text-decoration: underline; }

/* --- Icon & avatar sizing --- */
.icon-sm    { width: 20px; height: 20px; }
.icon-md    { width: 35px; height: 35px; }
.icon-lg    { width: 56px; height: 56px; margin-bottom: 1rem; }
.avatar     { width: 80px; height: 80px; object-fit: cover; border: 3px solid var(--sv-gold); }
.avatar-120 { width: 120px; height: 120px; }
.avatar-140 { width: 140px; height: 140px; }
.h-50       { height: 50px; }
.h-full     { height: 100%; }
.h-400      { height: 400px; }
.h-auto     { height: auto; }
.w-auto     { width: auto; }

/* --- Additional font size utilities --- */
.sv-fs-085em { font-size: 0.85em; }
.sv-fs-08    { font-size: 0.8rem; }
.sv-fs-1     { font-size: 1rem; }
.sv-fs-12    { font-size: 1.2rem; }
.sv-fs-15    { font-size: 1.5rem; }
.sv-fs-2     { font-size: 2rem; }
.sv-fs-085   { font-size: 0.85rem; }
.sv-fs-09    { font-size: 0.9rem; }

/* --- Additional gap utilities --- */
.gap-075   { gap: 0.75rem; }

/* --- Additional padding utilities --- */
.py-3-0    { padding: 3rem 0; }
.py-05-0   { padding: 0.5rem 0; }
.py-4-0    { padding: 4rem 0; }
.p-1-125   { padding: 1rem 1.25rem; }
.py-05-px-1 { padding: 0.5rem 1rem; }
.pt-25     { padding-top: 2.5rem; }
.pl-125    { padding-left: 1.25rem; }

/* --- Additional margin utilities --- */
.my-25     { margin-top: 2.5rem; margin-bottom: 2.5rem; }
.my-3      { margin-top: 3rem; margin-bottom: 3rem; }
.mx-2-auto { margin: 2rem auto 0; }
.mx-3-auto { margin: 3rem auto 0; }

/* --- Border utilities --- */
.border-t-2  { border-top: 2px solid var(--sv-border); }
.border-t-1  { border-top: 1px solid var(--sv-border); }
.border-b-1  { border-bottom: 1px solid var(--sv-border); }
.border-b-none { border-bottom: none; }
.border-b-current-2 { border-bottom: 2px solid currentColor; }
.border-gold { border: 2px solid var(--sv-gold); }
.border-gold-a30 { border: 1px solid rgba(214,168,88,0.3); }
.border-gold-3px { border: 3px solid var(--sv-gold); }
.border-accent { border: 2px solid var(--sv-border); }
.border-current { border: 2px solid currentColor; }
.border-t-white-15 { border-top: 1px solid rgba(255,255,255,0.15); }
.border-white-10 { border: 1px solid rgba(255,255,255,0.1); }
.ring-navy  { box-shadow: 0 0 0 4px #0A1A2F; }

/* --- Transition utilities --- */
.transition-all { transition: all 0.2s ease; }

/* --- Grid column utilities --- */
.grid-cols-2   { grid-template-columns: repeat(2, 1fr); }
.grid-cols-1   { grid-template-columns: 1fr; }
.grid-auto-280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-auto-240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-auto-220 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* --- Layout utilities --- */
.d-inline-flex { display: inline-flex; }
.items-stretch { align-items: stretch; }
.justify-between { justify-content: space-between; }
.self-center   { align-self: center; }
.list-none     { list-style: none; }
.relative      { position: relative; }
.absolute      { position: absolute; }
.relative-z1   { position: relative; z-index: 1; }
.relative-z2   { position: relative; z-index: 2; }
.aspect-square { aspect-ratio: 1/1; }
.border-collapse { border-collapse: collapse; }
.uppercase     { text-transform: uppercase; }
.tracking-tight { letter-spacing: 0.05em; }
.uppercase-tracking { text-transform: uppercase; letter-spacing: 0.1em; }
.object-cover  { object-fit: cover; }
.max-w-full    { max-width: 100%; }
.shadow-lg     { box-shadow: var(--shadow-elevated); }
.shadow-subtle { box-shadow: 0 2px 8px rgba(10,26,47,0.06); }


/* ============================================================================
   MOBILE RESPONSIVENESS FIXES - January 2026 Audit
   Consolidated fixes for issues identified across multiple audits
   ============================================================================ */

/* -----------------------------------------------------------------------------
   FIX #1: Prevent horizontal overflow on mobile (HIGH)
   Re-enable overflow-x hidden specifically for mobile to prevent drift
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
  }
}

/* -----------------------------------------------------------------------------
   FIX #4: Force single column for auto-fit grids on small screens (HIGH)
   Grids with minmax(220-280px) can overflow on 320px screens
   ----------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .grid-auto-220,
  .grid-auto-240,
  .grid-auto-280 {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------------
   FIX #5: iOS input zoom prevention (MEDIUM)
   Font sizes below 16px cause iOS to zoom on focus
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* -----------------------------------------------------------------------------
   FIX #8: Extend table responsiveness to tablet (MEDIUM)
   Tables were cramped between 481-768px
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
  table {
    font-size: 1rem; /* 16px - iOS minimum to prevent zoom */
    display: block;
    overflow-x: auto;
  }

  table th,
  table td {
    padding: 0.625rem 0.75rem;
    white-space: normal; /* Allow text wrapping */
  }

  /* Ensure table container allows horizontal scroll */
  div:has(> table) {
    overflow-x: auto;
  }
}

/* "Which Reading Is For Me?" — stacked cards on mobile */
@media (max-width: 768px) {
  .reading-comparison { display: block; width: 100%; }
  .reading-comparison thead { display: none; }
  .reading-comparison tbody { display: block; }
  .reading-comparison tr {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    border-radius: 0.5rem;
    border-bottom: none !important;
  }
  .reading-comparison td { padding: 0; text-align: left; }
  .reading-comparison td:first-child { flex: 0 0 100%; }
  .reading-comparison td:nth-child(2) { margin-top: 0.75rem; }
  .reading-comparison td:nth-child(3) { margin-top: 0.75rem; white-space: nowrap; }
  .reading-comparison td:nth-child(3)::before { content: "\00a0·\00a0"; }
}

/* Improve table text readability on small phones */
@media (max-width: 480px) {
  /* table font-size: 1rem already set at 768px breakpoint (~line 4792) */

  table th,
  table td {
    padding: 0.5rem;
  }

  table td p {
    font-size: 0.9375rem; /* 15px for descriptions - near iOS threshold */
    line-height: 1.5;
  }

  table td strong {
    font-size: 1rem; /* 16px - match table base */
  }
}

/* -----------------------------------------------------------------------------
   FIX #9: Safe area insets for CTA ribbon (LOW)
   Prevents overlap with home indicator on notched iPhones
   ----------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Only add bottom padding on pages that have the fixed CTA ribbon.
     Without :has(), legal pages (no ribbon) got phantom 70px blank space. */
  body:has(.mobile-cta-ribbon) {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-cta-ribbon {
    padding-bottom: calc(0.875rem + env(safe-area-inset-bottom, 0px));
  }
}

/* -----------------------------------------------------------------------------
   Responsive line breaks - show on desktop, hide on mobile
   ----------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  br.desktop-only,
  .desktop-only {
    display: none;
  }
}

/* Mobile-only line breaks — hidden on desktop, shown on mobile */
br.mobile-only {
  display: none;
}
@media (max-width: 768px) {
  br.mobile-only {
    display: block;
  }
}

/* Oct 2026: where a desktop-only break sits right next to a mobile-only break,
   one of the two must show at every width. Between 769 and 1024px neither used
   to show, so headings ran together (About: "Meet Ritesh ShuklaJournalist."). */
@media (max-width: 1024px) {
  br.desktop-only + br.mobile-only {
    display: block;
  }
}

/* -----------------------------------------------------------------------------
   FIX #15: grid-cols-2 must stack on mobile (HIGH)
   The utility class .grid-cols-2 was always 2-column with no responsive override.
   This caused "What You Receive" on homepage and "Delegation/Love Languages"
   on about.html to overflow/cut off on mobile.
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .grid-cols-2 {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------------
   FIX #16: Center testimonial avatars on mobile (MEDIUM)
   .testimonial__layout uses flex-wrap:wrap + .testimonial__content min-width:250px.
   On narrow screens, the content wraps below the avatar, but the avatar's
   <picture> element stays left-aligned. Switch to column layout on mobile
   so the avatar centers above the quote. Bump avatar to 100px for better
   visual weight when centered above full-width text.
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .testimonial__layout {
    flex-direction: column;
    align-items: center;
  }

  .testimonial__layout > picture {
    display: flex;
    justify-content: center;
  }

  .testimonial__layout .avatar {
    width: 100px;
    height: 100px;
  }

  .testimonial__content {
    min-width: 0;
    width: 100%;
  }
}

/* -----------------------------------------------------------------------------
   FIX #16b: Add spacing below Sean's avatar on mobile (LOW)
   The circle sits too tight against the "A skeptic tried..." text below it.
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
  #why-this-site picture {
    margin-bottom: 1rem;
  }
}

/* -----------------------------------------------------------------------------
   FIX #17: Reduce excessive spacing between sections on mobile (MEDIUM)
   Multiple sections had too much vertical gap on mobile.
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
  section:not(.hero) {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .section-spacing {
    padding: 3rem 0;
  }

  .bg-white-5.border-white-10 {
    margin-top: 1.5rem;
  }

  .grid-cols-2.max-w-1000 {
    gap: 2rem;
  }
}

/* -----------------------------------------------------------------------------
   FIX #18: About page - "Personal Application" eyebrow overlapping image (HIGH)
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .bg-cream.texture-overlay .grid-2.items-center > div:first-child {
    margin-bottom: 1rem;
  }

  .grid-2.items-center > div:last-child .eyebrow {
    margin-top: 0.5rem;
  }
}

/* -----------------------------------------------------------------------------
   FIX #19: About page - Delegation/Love Languages card margins on mobile
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .mx-3-auto {
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
  }
}

/* FIX #22: Mobile text-wrap for orphan prevention (MEDIUM)
   text-wrap: balance — evens out line lengths on short text (headings, centered paragraphs)
   text-wrap: pretty — prevents single-word orphans on last lines of body text
   Both are progressive enhancement: unsupported browsers just wrap normally. */
@media (max-width: 768px) {
  /* Balanced wrapping for headings and short centered text */
  .sv-wrapper h1,
  .sv-wrapper h2,
  .sv-wrapper h3,
  .text-center p,
  .hero-copy p,
  .hero-copy .hero-body,
  .footer-meta small,
  .quote-block {
    text-wrap: balance;
  }

  /* Pretty wrapping for body paragraphs and list items — prevents orphans */
  .sv-wrapper p,
  .sv-wrapper li {
    text-wrap: pretty;
  }
}

/* FIX #20: Hero section text centering and readability on mobile (MEDIUM)
   Hero text should be centered on mobile for better visual balance and readability.
   Add extra padding to hero content on narrow screens. */
@media (max-width: 768px) {
  .hero-copy {
    text-align: center;
  }

  .hero h1 {
    line-height: 1.4;
    margin-bottom: 1.5rem;
  }

  .hero .lead {
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
  }

  .hero-body {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
  }
}

/* FIX #24: Hero h1 overflow on small phones (MEDIUM)
   At 375px the base clamp minimum (2.25rem / 36px) makes long hero headings
   overflow their container (e.g. "No Compatibility Scores." at 391px vs 343px).
   Fluid reduction: 8vw scales from ~30px at 375px up to 36px at 450px+. */
@media (max-width: 480px) {
  .hero h1 {
    font-size: clamp(1.85rem, 8vw, 2.25rem);
  }
}

/* FIX #21: Mobile section text spacing (MEDIUM)
   Containers provide edge spacing (1.5rem base, 1rem at 480px) for cards and panels.
   Direct-child text (not inside cards/panels) needs a small extra inset to
   visually align with card content, which has its own internal padding.
   Using direct-child selectors so card/panel/testimonial text is unaffected. */
@media (max-width: 768px) {
  .sv-container > h2,
  .sv-container > p,
  .sv-container-narrow > h2,
  .sv-container-narrow > p {
    padding: 0 0.5rem;
  }
}

/* FIX #22: Callout panels - better mobile readability (LOW)
   Ensure callout-panel has adequate internal padding on mobile. */
@media (max-width: 768px) {
  .callout-panel {
    padding: 1.5rem;
  }

  .callout-panel h3 {
    margin-top: 0;
  }
}

/* FIX #23: Hero buttons - stack on mobile for better spacing (LOW)
   Hero buttons should stack vertically on mobile instead of wrapping awkwardly. */
@media (max-width: 768px) {
  .hero-buttons {
    flex-direction: column;
    gap: 1rem;
  }

  .hero-buttons .sv-btn {
    width: 100%;
  }
}

/* END OF MOBILE RESPONSIVENESS FIXES */

/* ============================================================================
   QUICK WINS 27 OCT 2026 (REVIEW-PLAN-2026-10-27.md, section 2, Display)
   Added at the end on purpose; no earlier rule was edited.
   ============================================================================ */

/* FAQ: .content-wrapper sits on the cream page but inherited the bright gold,
   so gold links were about 1.7:1. Light mode only: use the AA-safe dark gold. */
:root:not([data-theme="dark"]) .content-wrapper { --sv-gold: var(--sv-gold-dark); }

/* Closed mobile menu: hide it with visibility so its 8 links leave the keyboard
   Tab order. Visible at once when opened; hidden only after the 0.3s slide-out.
   The theme toggle lives inside .main-nav but is fixed on screen at this width,
   so it is kept visible. */
@media (max-width: 1150px) {
  .main-nav {
    visibility: hidden;
    transition: right 0.3s ease-in-out, visibility 0s linear 0.3s;
  }
  .main-nav.active {
    visibility: visible;
    transition: right 0.3s ease-in-out, visibility 0s linear 0s;
  }
  .main-nav .theme-toggle {
    visibility: visible;
  }
}