/* Removed legacy privacy notice card overrides for universal card structure */
/* Removed unused .support-accordion.section and #about.intro.section rules */

/* Universal Card Component */
.card {
  background: var(--color-surface, #fff);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 2px 8px rgba(30,30,30,0.12);
  padding: 24px;
  margin: 16px auto;
  max-width: 540px;
  border: 1px solid var(--color-card-border, #e0e0e0);
  transition: box-shadow 0.3s var(--ease-standard, ease), transform 0.3s var(--ease-standard, ease);
  overflow: hidden;
}
.card:hover {
  box-shadow: 0 8px 28px rgba(120,160,200,0.15);
  transform: translateY(-2px) scale(1.01);
}
.card-header {
  font-size: 1.2em;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--grand, #23457b);
}
.card-body {
  color: #444;
  margin-bottom: 16px;
  line-height: 1.6;
}
.card-action {
  margin-top: 8px;
}
.card-action button, 
.card-action input[type=submit] {
  background: #23457b;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.2s ease;
  font-weight: 600;
  width: 100%;
}
.card-action button:hover, 
.card-action input[type=submit]:hover {
  background: #193360;
}
  font-size: clamp(1.5rem, 5vw, 2.5rem);
}
button, input, textarea {
  font-size: 1rem;
}
@media (max-width: 600px) {
  body {
    font-size: 1.1rem;
  }
  .container {
    padding: 0.7em;
  }
  
  /* Ensure contact and newsletter sections aren't constrained by parent padding */
  .contact-section.card .container,
  .newsletter-section.card .container,
  .contact-section .main-content,
  .newsletter-section .main-content {
    padding: 0;
    margin: 0;
  }
}
/* --- Modern Mobile Menu Pattern --- */
@media (max-width: 900px) {
  .menu-toggle {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1001;
    background: #234;
    color: #fff;
    border: none;
    padding: 12px;
    font-size: 1.5rem;
    border-radius: 50%;
    cursor: pointer;
    display: block;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: background 0.2s;
  }
  .menu-toggle:active,
  .menu-toggle:focus {
    background: #3a5;
    outline: 2px solid #fff;
  }
  .mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 80vw;
    max-width: 400px;
    height: 100vh;
    background: #234;
    color: #fff;
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(.4,0,.2,1);
    padding-top: 5em;
    display: flex;
    flex-direction: column;
    box-shadow: -2px 0 16px rgba(0,0,0,0.12);
    overflow-y: auto;
  }
  .mobile-menu.open {
    transform: translateX(0);
  }
  .mobile-menu ul {
    list-style: none;
    padding: 0 2em;
    margin: 0;
  }
  .mobile-menu li {
    margin: 2em 0;
  }
  .mobile-menu a {
    color: #fff;
    font-size: 1.2rem;
    text-decoration: none;
    display: block;
    padding: 0.5em 0;
    border-radius: 4px;
    transition: background 0.2s;
    font-weight: bold;
  }
  .mobile-menu a:active,
  .mobile-menu a:focus {
    background: #3a5;
    outline: 2px solid #fff;
  }
}
@media (min-width: 901px) {
  .menu-toggle, .mobile-menu { display: none !important; }
}
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Desktop Navigation */
.main-nav {
  display: none; /* Hidden by default on mobile */
}

@media (min-width: 901px) {
  .main-nav {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    gap: 2rem;
  }
  
  .main-nav .brand {
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--color-primary, #234);
  }
  
  .main-nav a {
    text-decoration: none;
    color: var(--color-text, #333);
    font-weight: 500;
    transition: color 0.2s ease;
  }
  
  .main-nav a:hover {
    color: var(--color-primary, #c75b4a);
  }
}
/* CTA Ticker Button Styles */
.cta-ticker-btn {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 72px;       
  margin-top: 25pt;
  margin-bottom: 0; /* Remove bottom spacing */
  background: var(--sun-drenched); 
  color: #fff;
  border: none;
  border-radius: 12px; /* Increased border-radius proportionally */
  font-size: 1.3125rem; /* Increased by 50% (0.875rem × 1.5) */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center; /* Center content */
}

.cta-ticker-inner {
  display: inline-block;
  white-space: nowrap;
  padding-right: 3rem;   /* Add space between repeated text */
  animation: ticker-left 28s linear infinite;
  font-size: 1.125rem;   /* Increased by 50% (0.75rem × 1.5) */
  line-height: 1.2;
}

.cta-ticker-inner:first-child {
  padding-left: 0;    /* Start first copy on-screen */
}

@keyframes ticker-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.cta-ticker-btn:hover .cta-ticker-inner {
  animation-play-state: paused;
}

/* Blog CTA Ticker Button - Specific styling for about card */
.blog-cta-ticker {
  height: 56px;
  margin: var(--s-4) 0 0 0; /* Top margin only, no auto centering */
  font-size: 1rem;
  background: var(--nav-pink); /* Use the site's pink color */
  color: white;
}

.blog-cta-ticker .cta-ticker-inner {
  font-size: 0.9rem;
  padding-right: 2rem;
  animation-duration: 24s; /* Slightly slower for readability */
}

.blog-cta-ticker:hover {
  background: color-mix(in srgb, var(--nav-pink) 85%, black);
  transform: translateY(-1px);
  transition: all 200ms ease;
}

/* Services List - Hide bullets, keep star icons */
.services-list {
  list-style: none;
  padding-left: 0;
}

html {
  scroll-behavior: smooth;
}
:root {
  /* Primitive Color Tokens */
  --color-white: rgba(255, 255, 255, 1);
  --color-black: rgba(0, 0, 0, 1);

  /* Typography scale */
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 30px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 550;
  --font-weight-bold: 600;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --letter-spacing-tight: -0.01em;

  /* Letter-spacing tokens for consistent typography */
  --ls-tight: -0.02em;   /* compact display headings */
  --ls-heading: -0.01em; /* default heading tracking */
  --ls-normal: 0em;      /* body copy */
  --ls-wide: 0.02em;     /* loose for uppercase or small text */

  /* Modular type scale for headings (sizes + line-height ratios) */
  --type-h1-size: 2.5rem; /* 40px */
  --type-h1-line: 1.06;
  --type-h2-size: 2rem;   /* 32px */
  --type-h2-line: 1.12;
  --type-h3-size: 1.5rem; /* 24px */
  --type-h3-line: 1.2;
  --type-h4-size: 1.25rem;/* 20px */
  --type-h4-line: 1.25;
  --type-h5-size: 1rem;   /* 16px */
  --type-h5-line: 1.35;
  --type-h6-size: 0.875rem;/* 14px */
  --type-h6-line: 1.4;

  /* Spacing */
  --space-0: 0;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  /* New semantic spacing (rem-based) for consistent rhythm */
  --space-xs: 1rem;    /* 16px */
  --space-sm: 1.5rem;  /* 24px */
  --space-md: 2rem;    /* 32px */
  --space-lg: 3rem;    /* 48px */
  --space-xl: 4rem;    /* 64px */
  --space-2xl: 6rem;   /* 96px */
  --bds-footer-overlap: 56px; /* amount the about card overlaps into main */
  --bds-footer-quote-padding: 20px; /* padding above the quote (between about card and quote) */

  /* Border Radius */
  --radius-sm: 6px;
  --radius-base: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
    0 2px 4px -1px rgba(0, 0, 0, 0.02);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
    0 4px 6px -2px rgba(0, 0, 0, 0.02);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03);

  /* Animation */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  /* Base font and family fallbacks (site-wide defaults)
    - Set base to Gilda Display so body copy, forms, and lists inherit Gilda by default
    - Define a distinct heading variable for Averia so headings can reliably use it
    - Define a monospace variable for buttons/code */
  --font-family-base: 'Gilda Display', serif;
  --font-heading: 'Averia Serif Libre', serif;
  --font-family-mono: ui-monospace, 'SFMono-Regular', Menlo, Monaco, 'Courier New', monospace;
  --font-size-base: 16px;

  /* Minimal color fallbacks used across the stylesheet */
  --color-cream-50: #fffaf6;
  --color-cream-100: #fff3ec;
  /* Nav pink for improved legibility and brand warmth */
  --nav-pink: #c75b4a;
  --color-charcoal-700: #0f1720;
  --color-charcoal-800: #0b0f13;
  /* Warm earth tones to use as alternating section backgrounds */
  --earth-50: #fbf6ef;  /* very pale sand */
  --earth-100: #f3e7d8; /* pale warm beige */
  --earth-200: #e7d0b8; /* warm tan */
  --earth-300: #d6b392; /* deeper terra */
  --earth-400: #b98b63; /* warm rust accent */
}

/* Dark mode colors */
@media (prefers-color-scheme: dark) {
  :root {
    /* RGB versions for opacity control (Dark Mode) */
    --color-gray-400-rgb: 119, 124, 124;
    --color-teal-300-rgb: 50, 184, 198;
    --color-gray-300-rgb: 167, 169, 169;
    --color-gray-200-rgb: 245, 245, 245;

    /* Background color tokens (Dark Mode) */
    --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
    --bds-footer-overlap: 64px; /* amount the about card overlaps into main */
    --bds-footer-about-height: 240px; /* approximate total height of the about card (image + padding) */
    --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
    --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
    --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
    --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
    --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
    --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */

    /* Semantic Color Tokens (Dark Mode) */
    --color-background: var(--color-charcoal-700);
    --color-surface: var(--color-charcoal-800);
    --color-text: var(--color-gray-200);
    --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
    --color-primary: var(--color-teal-300);
    --color-primary-hover: var(--color-teal-400);
    --color-primary-active: var(--color-teal-800);
    --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
    --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
    --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
    --color-border: rgba(var(--color-gray-400-rgb), 0.3);
    --color-error: var(--color-red-400);
    --color-success: var(--color-teal-300);
    --color-warning: var(--color-orange-400);
    --color-info: var(--color-gray-300);
    --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
    --color-btn-primary-text: var(--color-slate-900);
    --color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
    --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
      inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    --button-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
    --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
    --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);

    /* Common style patterns - updated for dark mode */
    --focus-ring: 0 0 0 3px var(--color-focus-ring);
    --focus-outline: 2px solid var(--color-primary);
    --status-bg-opacity: 0.15;
    --status-border-opacity: 0.25;
    --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

    /* RGB versions for dark mode */
    --color-success-rgb: var(--color-teal-300-rgb);
    --color-error-rgb: var(--color-red-400-rgb);
  --color-warning-rgb: var(--color-orange-400-rgb);
  }
}

/* Data attribute for manual theme switching */
[data-color-scheme="dark"] {
  /* RGB versions for opacity control (dark mode) */
  --color-gray-400-rgb: 119, 124, 124;
  --color-teal-300-rgb: 50, 184, 198;
  --color-gray-300-rgb: 167, 169, 169;
  --color-gray-200-rgb: 245, 245, 245;

  /* Colorful background palette - Dark Mode */
  --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
  --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
  --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
  --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
  --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
  --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
  --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
  --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */

  /* Semantic Color Tokens (Dark Mode) */
  --color-background: var(--color-charcoal-700);
  --color-surface: var(--color-charcoal-800);
  --color-text: var(--color-gray-200);
  --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
  --color-primary: var(--color-teal-300);
  --color-primary-hover: var(--color-teal-400);
  --color-primary-active: var(--color-teal-800);
  --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
  --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
  --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
  --color-border: rgba(var(--color-gray-400-rgb), 0.3);
  --color-error: var(--color-red-400);
  --color-success: var(--color-teal-300);
  --color-warning: var(--color-orange-400);
  --color-info: var(--color-gray-300);
  --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
  --color-btn-primary-text: var(--color-slate-900);
  --color-card-border: rgba(var(--color-gray-400-rgb), 0.15);
  --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
  --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);

  /* Common style patterns - updated for dark mode */
  --focus-ring: 0 0 0 3px var(--color-focus-ring);
  --focus-outline: 2px solid var(--color-primary);
  --status-bg-opacity: 0.15;
  --status-border-opacity: 0.25;
  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  /* RGB versions for dark mode */
  --color-success-rgb: var(--color-teal-300-rgb);
  --color-error-rgb: var(--color-red-400-rgb);
  --color-warning-rgb: var(--color-orange-400-rgb);
  --color-info-rgb: var(--color-gray-300-rgb);
}

[data-color-scheme="light"] {
  /* RGB versions for opacity control (light mode) */
  --color-brown-600-rgb: 94, 82, 64;
  --color-teal-500-rgb: 33, 128, 141;
  --color-slate-900-rgb: 19, 52, 59;

  /* Semantic Color Tokens (Light Mode) */
  --color-background: var(--color-cream-50);
  --color-surface: var(--color-cream-100);
  --color-text: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-500);
  --color-primary: var(--color-teal-500);
  --color-primary-hover: var(--color-teal-600);
  --color-primary-active: var(--color-teal-700);
  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
  --color-btn-primary-text: var(--color-cream-50);
  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
  --color-error: var(--color-red-500);
  --color-success: var(--color-teal-500);
  --color-warning: var(--color-orange-500);
  --color-info: var(--color-slate-500);
  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);

  /* RGB versions for light mode */
  --color-success-rgb: var(--color-teal-500-rgb);
  --color-error-rgb: var(--color-red-500-rgb);
  --color-warning-rgb: var(--color-orange-500-rgb);
  --color-info-rgb: var(--color-slate-500-rgb);
}

/* Base styles */
html {
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  scroll-behavior: smooth; /* enable smooth scrolling by default */
}

/* Sticky header offset for anchor links
   - --header-height: approximate header height used for computing offsets
   - --header-offset: final offset applied for scroll-padding-top and scroll-margin-top
*/
:root {
  --header-height: 64px; /* default header height; adjust if header size changes */
  --header-offset: calc(var(--header-height) + 12px);
}

/* Make the browser scroll to leave space for the sticky header */
html {
  /* Ensure anchor scrolling leaves room for the header (updated to use header height)
     so content is not hidden beneath the sticky nav */
  scroll-padding-top: var(--header-height);
}

/* Ensure headings have a scroll margin so fragment links position visibly below the header */
h1, h2, h3, h4, h5, h6 {
  /* Use header height so fragment targets are positioned below the header */
  scroll-margin-top: calc(var(--header-height) + 8px);
}

@media (max-width: 600px) {
  :root {
    --header-height: 72px; /* slightly taller on mobile if header stacks */
    --header-offset: calc(var(--header-height) + 12px);
  }
}

body {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-tight);
}

h1 {
  font-size: var(--font-size-4xl);
}
h2 {
  font-size: var(--font-size-3xl);
}
h3 {
  font-size: var(--font-size-2xl);
}
h4 {
  font-size: var(--font-size-xl);
}
h5 {
  font-size: var(--font-size-lg);
}
h6 {
  font-size: var(--font-size-md);
}

p {
  margin: 0 0 var(--s-4) 0;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
  color: var(--color-primary-hover);
}

code,
pre {
  font-family: var(--font-family-mono);
  font-size: calc(var(--font-size-base) * 0.95);
  background-color: var(--color-secondary);
  border-radius: var(--radius-sm);
}

code {
  padding: var(--s-1) var(--s-1);
}

pre {
  padding: var(--s-4);
  margin: var(--s-4) 0;
  overflow: auto;
  border: 1px solid var(--color-border);
}

pre code {
  background: none;
  padding: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-standard);
  border: none;
  text-decoration: none;
  position: relative;
  background: var(--terra);
  color: var(--whitest-white);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Modern Card System */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--s-5);
  margin: 0 auto var(--s-4) auto; /* center cards horizontally with reduced bottom spacing */
  max-width: 540px;
  border: 1px solid var(--color-card-border);
  transition: box-shadow var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard);
}

/* Make contact and newsletter cards full-width on desktop */
.contact-section.card,
.newsletter-section.card {
  max-width: 100vw;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
}

@media (min-width: 900px) {
  .contact-section.card,
  .newsletter-section.card {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--radius-lg);
  }
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px) scale(1.005);
}

.card-header {
  font-size: 1.4em;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--grand);
}

.card-body {
  color: #444;
  margin-bottom: 8px;
  line-height: 1.6;
}

.card-action {
  margin-top: 8px;
}

.card-action button, 
.card-action input[type=submit] {
  background: #23457b;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.25s ease;
  font-weight: 600;
}

.card-action button:hover, 
.card-action input[type=submit]:hover {
  background: #193360;
}

/* About Card Slideshow */
.about-card-footer {
  position: relative;
  min-height: 120px; /* normal height since slideshow is on edge */
  padding-top: 60px; /* top padding to clear space for slideshow */
  padding-bottom: 20px; /* normal padding since slideshow doesn't take interior space */
}

.slideshow-wrapper {
  position: absolute;
  left: 25%; /* halfway between left edge (0%) and center (50%) */
  top: -76px; /* dipping into the about card by ~10% */
  transform: translateX(-50%); /* center the circle on the 25% position */
  width: 96px;
  height: 96px;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(30, 30, 30, 0.15);
  border: 3px solid rgba(255, 255, 255, 0.9);
  z-index: 10;
  background-color: #e0e0e0; /* visible background for debugging */
}

.slideshow-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  background-color: #f0f0f0; /* fallback background */
  z-index: 1; /* Default z-index for stacking */
}

.slideshow-image.active {
  opacity: 1;
  z-index: 2; /* Active image appears on top */
}

/* Responsive adjustments for slideshow */
@media (max-width: 768px) {
  .slideshow-wrapper {
    width: 80px;
    height: 80px;
    left: 25%; /* same positioning as desktop */
    top: -40px; /* half outside the top edge on mobile */
    transform: translateX(-50%); /* center the circle on the 25% position */
  }
  
  .about-card-footer {
    min-height: 110px; /* normal mobile height */
    padding-top: 50px; /* top padding for mobile slideshow clearance */
    padding-bottom: 16px; /* normal mobile padding */
  }
}

/* Responsive Card Layout */
@media (max-width: 768px) {
  .card {
    max-width: 90vw;
    margin: 16px auto;
    padding: 24px;
  }
  
  .card-header {
    font-size: 1.2em;
    margin-bottom: 12px;
  }
  
  .card-body {
    margin-bottom: 16px;
  }
  
  .card-action button, 
  .card-action input[type=submit] {
    width: 100%;
    padding: 12px 16px;
    font-size: 1em;
  }
}

.btn--primary {
  background: var(--terra);
  color: var(--whitest-white);
}

.btn--primary:hover { filter: brightness(0.96); }
.btn--primary:active { filter: brightness(0.92); }

.btn--secondary {
  background: var(--color-secondary);
  color: var(--terra);
}

.btn--secondary:hover {
  background: var(--color-secondary-hover);
}

.btn--secondary:active {
  background: var(--color-secondary-active);
}

.btn--outline {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--terra);
}

.btn--outline:hover {
  background: var(--color-secondary);
}

.btn--sm {
  padding: var(--s-1) var(--s-3);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}

.btn--lg {
  padding: var(--s-3) var(--s-5);
  font-size: var(--font-size-lg);
  border-radius: var(--radius-md);
}

.btn--full-width {
  width: 100%;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Form elements */
.form-control {
  display: block;
  width: 100%;
  padding: var(--s-2) var(--s-3);
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

textarea.form-control {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
}

select.form-control {
  padding: var(--s-2) var(--s-3);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: var(--select-caret-light);
  background-repeat: no-repeat;
  background-position: right var(--s-3) center;
  background-size: 16px;
  padding-right: var(--s-7);
}

/* Add a dark mode specific caret */
@media (prefers-color-scheme: dark) {
  select.form-control {
    background-image: var(--select-caret-dark);
  }
}

/* Also handle data-color-scheme */
[data-color-scheme="dark"] select.form-control {
  background-image: var(--select-caret-dark);
}

[data-color-scheme="light"] select.form-control {
  background-image: var(--select-caret-light);
}

.form-control:focus {
  border-color: var(--color-primary);
  outline: var(--focus-outline);
}

.form-label {
  display: block;
  margin-bottom: var(--s-2);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.form-group {
  margin-bottom: var(--s-4);
}

/* Card component */
.card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-card-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--duration-normal) var(--ease-standard);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card__body {
  padding: var(--s-3);
}

.card__header,
.card__footer {
  padding: var(--s-3);
  border-bottom: 1px solid var(--color-card-border-inner);
}

/* Status indicators - simplified with CSS variables */
.status {
  display: inline-flex;
  align-items: center;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.status--success {
  background-color: rgba(
    var(--color-success-rgb, 33, 128, 141),
    var(--status-bg-opacity)
  );
  color: var(--color-success);
  border: 1px solid
    rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));
}

.status--error {
  background-color: rgba(
    var(--color-error-rgb, 192, 21, 47),
    var(--status-bg-opacity)
  );
  color: var(--color-error);
  border: 1px solid
    rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));
}

.status--warning {
  background-color: rgba(
    var(--color-warning-rgb, 168, 75, 47),
    var(--status-bg-opacity)
  );
  color: var(--color-warning);
  border: 1px solid
    rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));
}

.status--info {
  background-color: rgba(
    var(--color-info-rgb, 98, 108, 113),
    var(--status-bg-opacity)
  );
  color: var(--color-info);
  border: 1px solid
    rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
}

/* Container layout */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--content-gutter);
  padding-left: var(--content-gutter);
}

/* When `.container` appears inside a full-bleed section, reset its max-width so
   the parent full-bleed background isn't clipped. Prefer `.full-bleed-inner` for
   the inner constrained layout. */
.full-bleed-card .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.full-bleed-card .container > * {
  /* Encourage authors to wrap content with .full-bleed-inner, but if they
     use .container directly, apply inner constraints to the immediate child. */
  max-width: var(--container-md);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--s-5);
  padding-right: var(--s-5);
}

@media (min-width: 640px) {
  .container {
    max-width: var(--container-sm);
  }
}
@media (min-width: 768px) {
  .container {
    max-width: var(--container-md);
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: var(--container-lg);
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: var(--container-xl);
  }
}

/* Utility classes */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-4 { gap: var(--s-1); }
.gap-8 { gap: var(--s-2); }
.gap-16 { gap: var(--s-4); }

.m-0 {
  margin: 0;
}
.mt-8 { margin-top: var(--s-2); }
.mb-8 { margin-bottom: var(--s-2); }
.mx-8 { margin-left: var(--s-2); margin-right: var(--s-2); }
.my-8 { margin-top: var(--s-2); margin-bottom: var(--s-2); }

.p-0 {
  padding: 0;
}
.py-8 { padding-top: var(--s-2); padding-bottom: var(--s-2); }
.px-8 { padding-left: var(--s-2); padding-right: var(--s-2); }
.py-16 { padding-top: var(--s-4); padding-bottom: var(--s-4); }
.px-16 { padding-left: var(--s-4); padding-right: var(--s-4); }

.block {
  display: block;
}
.hidden {
  display: none;
}

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

:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

/* Enhanced, visible focus styles that align with the brand palette
   - Use box-shadow focus ring token already defined in the design system
   - Apply to interactive elements commonly used across the site */
.skip-to-main {
  position: absolute;
  left: 0.5rem;
  top: -40px;
  background: var(--color-surface);
  color: var(--color-text);
  padding: 8px 12px;
  border-radius: 6px;
  z-index: 9999;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transform: translateY(0);
  transition: top 160ms var(--ease-standard), opacity 120ms var(--ease-standard);
}
.skip-to-main:focus {
  top: 12px;
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Make focus visible for all primary interactive controls using the brand focus token */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 6px;
}

/* Ensure carousel controls and custom controls get a clear visible focus */
.carousel-btn:focus-visible, .btn:focus-visible, .indicator:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Ensure form status boxes are focusable for screen reader users when shown */
.form-status[aria-hidden="false"] { display: block; }


/* Dark mode specifics */
[data-color-scheme="dark"] .btn--outline {
  border: 1px solid var(--color-border-secondary);
}

@font-face {
  font-family: 'FKGroteskNeue';
  src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2')
    format('woff2');
}

:root {
  /* Semantic Color Tokens - Mapped to warm tones from design system */
  --color-accent: var(--color-orange-400);
  --color-accent-hover: var(--color-orange-500);
  --color-accent-dark: var(--color-brown-600);
  
  /* UI Element Colors */
  --color-button-bg: var(--color-primary);
  --color-button-text: var(--color-btn-primary-text);
  --color-button-hover: var(--color-primary-hover);
  --color-card-bg: var(--color-surface);
  --color-card-border: var(--color-card-border);
  --color-badge-glow: var(--bds-footer-accent);
  
  /* Badge Animation Colors - Must be in root scope */
  --purple-pink: #e4bcc4;
  --bds-footer-accent: var(--purple-pink);
  --bds-footer-accent-rgb: 228, 188, 196;
  
  /* Typography - Using design system fonts */
  --font-body: var(--font-family-base);
  --font-heading: var(--font-family-base);
  --font-quote: var(--font-family-base);
}

/* BDS Spacing Scale & Base Rhythm
   - New semantic spacing tokens (s-0 .. s-7) mapped to existing --space-* values for
     backward compatibility. This block is intentionally low-impact and additive so
     it won't fight component-specific spacing later in the stylesheet.
*/
:root {
  --s-0: var(--space-0);
  --s-1: var(--space-xs);  /* 1rem / 16px */
  --s-2: var(--space-sm);  /* 1.5rem / 24px */
  --s-3: var(--space-md);  /* 2rem / 32px */
  --s-4: var(--space-lg);  /* 3rem / 48px */
  --s-5: var(--space-xl);  /* 4rem / 64px */
  --s-6: var(--space-2xl); /* 6rem / 96px */
  --s-7: 48px; /* larger gap useful for hero/section spacing */
  --content-gutter: var(--s-4);
  --rhythm-line-height: var(--line-height-normal);
}

/* Low-specificity spacing reset (won't override component-specific rules)
   Provides a consistent vertical rhythm baseline for headings, paragraphs and lists.
*/
:where(h1,h2,h3,h4,h5,h6,p,ul,ol,figure,blockquote,pre) {
  margin-top: 0;
  margin-bottom: var(--s-4);
}

:where(img, picture, video, iframe) {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Utility migration aliases (optional shortcuts) */
:root {
  --sp-0: var(--s-0);
  --sp-1: var(--s-1);
  --sp-2: var(--s-2);
  --sp-3: var(--s-3);
  --sp-4: var(--s-4);
  --sp-5: var(--s-5);
  --sp-6: var(--s-6);
  --sp-7: var(--s-7);
}

/* Reset and Base Styles */
* {
  box-sizing: border-box;
}

body {
  /* Body copy uses Gilda Display by default (site body font) */
  font-family: var(--font-family-base);
  background: var(--color-background);
  color: var(--color-text);
  margin: 0;
  padding: 0;
  line-height: var(--line-height-normal);
  overflow-x: hidden;
  font-size: var(--font-size-base);
}

/* Typography */
/* Headings use Averia Serif Libre per updated request */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  margin: 0;
  /* Use modular type scale and tuned letter-spacing for readability */
  line-height: 1.08; /* base; individual headings override with specific tokens */
  letter-spacing: var(--ls-heading);
}

h1 {
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-line);
  font-weight: var(--font-weight-normal);
  margin: var(--s-5) 0 var(--s-3) 0;
  text-align: center;
  color: var(--color-text);
  letter-spacing: var(--ls-tight);
}

h2 {
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  margin-bottom: var(--s-4);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--ls-heading);
}

h3 {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  margin: var(--s-5) 0 var(--s-3) 0;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--ls-heading);
}

h4 {
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-line);
  margin: var(--s-3) 0 var(--s-2) 0;
  letter-spacing: var(--ls-normal);
}

h5 {
  font-size: var(--type-h5-size);
  line-height: var(--type-h5-line);
  margin: var(--s-2) 0 var(--s-1) 0;
  letter-spacing: var(--ls-normal);
}

h6 {
  font-size: var(--type-h6-size);
  line-height: var(--type-h6-line);
  margin: var(--s-2) 0 var(--s-1) 0;
  letter-spacing: var(--ls-wide);
}

p,
ul,
ol,
li {
  /* Ensure body paragraphs and list items use Gilda Display */
  font-family: 'Gilda Display', serif;
  color: var(--color-text);
  line-height: var(--line-height-normal);
  margin: var(--s-4) 0;
}

/* Quotes and Subtitles */
.subtitle,
blockquote,
.quote,
.footer-quote,
.post-intro {
  /* Subtitles and quote-like elements use the heading font */
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--color-text-secondary);
}

/* Improve subtitle readability: use primary text color and slightly stronger weight */
.subtitle { 
  font-size: var(--font-size-xl);
  text-align: center;
  margin-bottom: var(--s-6);
  color: var(--color-text); /* higher contrast than secondary */
  font-weight: var(--font-weight-medium);
  line-height: 1.45;
}

blockquote {
  background: var(--color-surface);
  padding: var(--s-5) var(--s-6);
  margin: var(--s-6) 0;
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-lg);
}

/* Header and Navigation */
header {
  /* Start over the hero image: transparent by default */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1100;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  transition: background-color 300ms var(--ease-standard), box-shadow 300ms var(--ease-standard), border-bottom-color 300ms var(--ease-standard);
}

header nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-4) var(--content-gutter);
  max-width: var(--container-lg);
  margin: 0 auto;
  font-family: var(--font-heading);
  flex-wrap: wrap;
  gap: clamp(1rem, 2vw, 2.5rem);
  padding-left: 2vw;
  padding-right: 2vw;
  box-sizing: border-box;
}

@media (max-width: 1100px) {
  header nav {
    gap: 1.2rem;
    font-size: 1rem;
  }
  header .brand {
    font-size: 1.1rem;
  }
}


@media (max-width: 900px) {
  header nav {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (max-width: 600px) {
  header nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Transparent header state (over hero) */
header {
  color: var(--color-btn-primary-text);
}

header .brand,
header .brand,
header nav a {
  color: var(--nav-pink);
  font-weight: bold;
}

/* Solid header state when scrolled: use reversed footer palette (purple-pink bg, terra text) */
header.header--solid {
  /* When scrolled past trigger, make the header fixed to the top of viewport */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: var(--bds-footer-accent); /* purple-pink */
  /* Use the canonical nav color token so links/brand remain consistent */
  color: var(--nav-pink); /* nav text */
  border-bottom: 2px solid rgba(0,0,0,0.04);
  box-shadow: var(--shadow-md);
}

header.header--solid .brand,
header.header--solid .brand,
header.header--solid nav a {
  color: var(--nav-pink);
  font-weight: bold;
}

.brand { 
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xl);
  color: var(--color-text);
  margin-right: var(--s-4);
}

/* Match header visual style to footer when header becomes solid (scrolled state)
   but reversed: use the footer accent as background and Terra for text */
.header--solid {
  background: var(--bds-footer-accent);
  color: var(--terra);
  border-bottom: 2px solid rgba(0,0,0,0.04);
  box-shadow: 0 6px 20px rgba(16,24,32,0.06);
  transition: background-color 300ms var(--ease-standard), box-shadow 300ms var(--ease-standard), border-bottom-color 300ms var(--ease-standard);
}

.header--solid nav {
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: var(--s-3) var(--content-gutter);
  gap: var(--s-5);
}

.header--solid .brand {
  font-family: var(--font-heading);
  /* Keep brand same as nav links (nav-pink) for consistent identity */
  color: var(--nav-pink);
  font-style: italic;
}

.header--solid nav a {
  /* Use nav-pink for interactive nav items even in solid header state */
  color: var(--nav-pink);
  padding: var(--s-2) var(--s-2);
  border-bottom: 2px solid transparent;
  font-weight: var(--font-weight-medium);
}

.header--solid nav a:hover,
.header--solid nav a:focus {
  color: var(--whitest-white);
  border-bottom-color: rgba(255,255,255,0.12);
}

/* Active/aria-current state for header nav */
.header--solid nav a[aria-current="true"],
.header--solid nav a.active {
  color: var(--whitest-white);
  border-bottom-color: rgba(255,255,255,0.22);
  font-weight: var(--font-weight-bold);
}

/* Compact mobile header matching footer feel */
@media (max-width: 600px) {
  .header--solid nav {
    padding: var(--s-2) var(--s-3);
    gap: var(--s-3);
  }
  .header--solid .brand { font-size: var(--font-size-lg); }
}

/* Desktop header improvements */
@media (min-width: 1024px) {
  header nav {
    gap: var(--s-7);
    padding: var(--s-5) var(--content-gutter);
  }
  
  .header--solid nav {
    padding: var(--s-4) var(--content-gutter);
  }
  
  header nav a {
    padding: var(--s-3) var(--s-2);
    font-size: var(--font-size-base);
  }
  
  .brand {
    font-size: var(--font-size-2xl);
  }
}

header nav a {
  /* canonical header nav color: use --nav-pink for consistent identity */
  color: var(--nav-pink);
  text-decoration: none;
  transition: color var(--duration-normal) var(--ease-standard);
  padding: var(--s-2) 0;
  border-bottom: 2px solid transparent;
  font-weight: var(--font-weight-medium);
}

header nav a:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Main Layout */
main {
  max-width: var(--container-md);
  margin: 0 auto;
  padding: 0 var(--s-5);
  /* Ensure main section always sits below nav bar */
  margin-top: calc(var(--header-height, 64px) + 1rem);
  padding-top: 0;
}

/* Mobile adjustment for header height */
@media (max-width: 600px) {
  main {
    margin-top: calc(var(--header-height, 72px) + 1rem);
  }
}

/* Full-bleed card pattern
   - Use on sections below the hero to provide edge-to-edge background treatments
   - `.full-bleed-card` gives an edge-to-edge background while `.full-bleed-inner`
     constrains content for readable measure (matches intro styling)
*/
.full-bleed-card {
  width: 100vw;            /* span viewport */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;     /* push to edges */
  margin-right: -50vw;
  box-sizing: border-box;
  padding: var(--s-6) 0;   /* vertical padding for the section */
  overflow: visible;
}

.full-bleed-card::before {
  /* subtle overlay for depth (can be overridden by specific sections) */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.02));
  mix-blend-mode: normal;
  z-index: 0;
}

.full-bleed-inner {
  /* Constrain content visually while allowing background to go edge-to-edge */
  max-width: var(--container-md);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--s-5);
  padding-right: var(--s-5);
  position: relative;
  z-index: 1; /* sit above the overlay */
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}

/* Mobile-first optimizations for full-bleed cards and interactive elements */
/* Ensure no horizontal scroll introduced by negative margins and viewport-spanning elements */
html, body {
  overflow-x: hidden; /* defensive: prevent accidental horizontal scroll on small devices */
}

/* Touch targets and spacing (mobile only) */
@media (max-width: 767px) {
  /* Reduce vertical padding and tighten inner padding for mobile */
  .full-bleed-card,
  .feature-section,
  .legacy-section,
  .testimonial-section,
  .contact-section,
  .newsletter-section,
  section#tasks,
  #tasks {
    padding-top: var(--s-4);
    padding-bottom: var(--s-4);
  }

  .full-bleed-inner,
  .feature-section > .container > *,
  .legacy-section > .container > *,
  .testimonial-section > .container > *,
  .contact-section > .container > *,
  .newsletter-section > .container > * {
    padding-left: var(--s-4);
    padding-right: var(--s-4);
    gap: var(--s-3);
    max-width: 100%;
  }
  
  /* Contact and newsletter sections: remove padding for full-width cards */
  .contact-section .full-bleed-inner,
  .newsletter-section .full-bleed-inner {
    padding: 0;
    width: 100%;
  }

  /* Ensure interactive elements meet 44px minimum touch target */
  .btn,
  .btn a,
  button,
  .carousel-btn,
  .indicator,
  .status {
    min-height: 44px;
    min-width: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 12px;
    padding-right: 12px;
    line-height: 1.2;
  }

  /* Slightly reduce heading sizes on mobile for readable measure */
  :root {
    --type-h1-size: 1.9rem;
    --type-h2-size: 1.6rem;
    --type-h3-size: 1.25rem;
  }

  /* Make sure full-bleed elements don't overflow horizontally on small screens */
  .full-bleed-card,
  .feature-section,
  .legacy-section,
  .testimonial-section,
  .contact-section,
  .newsletter-section,
  section#tasks,
  #tasks {
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
    margin-right: 0;
    width: 100vw;
  }

  /* Reduce image heavy elements to avoid large repainting and cropping */
  .hero-container img, .feature-image img {
    max-width: 100%;
    height: auto;
    display: block;
  }
}

/* Smooth transitions at the requested breakpoints */
.full-bleed-card, .full-bleed-inner, .feature-section > .container > * {
  transition: padding 180ms var(--ease-standard), gap 180ms var(--ease-standard), max-width 200ms var(--ease-standard);
}

/* Wider viewports: increase inner measure at 768px and 1024px breakpoints */
@media (min-width: 768px) {
  .full-bleed-inner,
  .feature-section > .container > *,
  .legacy-section > .container > *,
  .testimonial-section > .container > *,
  .contact-section > .container > *,
  .newsletter-section > .container > * {
    max-width: var(--container-md);
    padding-left: var(--s-5);
    padding-right: var(--s-5);
    gap: var(--s-4);
  }
}

@media (min-width: 1024px) {
  .full-bleed-inner,
  .feature-section > .container > *,
  .legacy-section > .container > *,
  .testimonial-section > .container > *,
  .contact-section > .container > *,
  .newsletter-section > .container > * {
    max-width: var(--container-lg);
    padding-left: var(--s-6);
    padding-right: var(--s-6);
    gap: var(--s-5);
  }

  /* Restore slightly larger heading scale for wide screens */
  :root {
    --type-h1-size: 2.5rem;
    --type-h2-size: 2rem;
    --type-h3-size: 1.5rem;
  }
}

/* Ensure buttons that become large don't break layout by using inline-flex */
.btn, .carousel-btn { display: inline-flex; align-items: center; justify-content: center; }

/* ======= DESKTOP LAYOUT FIXES ======= */
@media (min-width: 1024px) {
  /* Prevent any horizontal overflow on desktop */
  body, html {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  /* Ensure main content stays within viewport */
  main {
    max-width: 100vw;
    overflow-x: hidden;
  }
  
  /* Fix full-bleed sections on desktop */
  .full-bleed-card,
  .feature-section,
  .legacy-section,
  .testimonial-section,
  .contact-section,
  .newsletter-section,
  section#tasks,
  #tasks {
    position: relative;
    left: 0;
    transform: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }
  
  /* Improve section spacing on desktop */
  .section {
    margin-bottom: var(--s-7);
  }
  
  /* Better button alignment */
  .cta-buttons {
    gap: var(--s-4);
  }
}

/* Apply to common site sections below the hero */
.feature-section.full-bleed-card,
.legacy-section.full-bleed-card,
.testimonial-section.full-bleed-card,
.contact-section.full-bleed-card,
.newsletter-section.full-bleed-card,
#tasks.full-bleed-card {
  padding-top: var(--s-6);
  padding-bottom: var(--s-6);
}

/* Make the common content sections below the hero full-bleed by default
   so authors don't need to add a class. These selectors will provide edge-to-edge
   backgrounds while constraining the readable content area using the
   same inner max-width/padding used by `.full-bleed-inner`. */
.feature-section,
.legacy-section,
.testimonial-section,
.contact-section,
.newsletter-section {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
  padding-top: var(--s-6);
  padding-bottom: var(--s-6);
  overflow: visible;
}

/* Overlay pseudo-element for depth on the default full-bleed sections */
.feature-section::before,
.legacy-section::before,
.testimonial-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.02));
  z-index: 0;
}

/* Remove dark overlays for contact and newsletter sections */
html body .contact-section::before,
html body .newsletter-section::before {
  display: none;
}

/* Base styling for contact and newsletter sections */
.contact-section,
.newsletter-section {
  position: relative;
  /* Default background */
  background: #dfcdb7;
  background-color: #dfcdb7;
  /* Full-width layout */
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Full-bleed sections with custom backgrounds */
body .contact-section.contact-bg-custom,
body .newsletter-section.newsletter-bg-custom {
  background-color: var(--custom-bg-color, #dfcdb7);
}

/* Ensure any immediate content is constrained similarly to .full-bleed-inner */
.feature-section > .container > *,
.legacy-section > .container > *,
.testimonial-section > .container > *,
.contact-section > .container > *,
.newsletter-section > .container > * {
  max-width: var(--container-md);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--s-5);
  padding-right: var(--s-5);
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}


/* Utility: if a section wants a softer overlay, override the pseudo-element */
.full-bleed-card.soft::before { background: #dfcdb7; }

/* Full viewport background for contact and newsletter sections */
#newsletter, #contact {
  background: #dfcdb7 !important;
  background-color: #dfcdb7 !important;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  padding: 2rem 0 !important;
  box-sizing: border-box !important;
}

/* Section Animations */
.section {
  opacity: 0; 
  transform: translateY(40px);
  transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard);
  margin-bottom: var(--s-6);
  position: relative;
}

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

/* Card hover effects consolidated with base .card definition above */

/* Buttons */
.btn, .btn.secondary {
  display: inline-block;
  padding: var(--s-3) var(--s-5);
  background: var(--terra);
  color: var(--whitest-white);
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--font-size-base);
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--ls-wide);
  margin: var(--s-2) var(--s-2) 0 0;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--duration-normal) var(--ease-standard);
  box-shadow: var(--shadow-sm);
  border: 2px solid transparent;
}

.btn:hover, .btn.secondary:hover {
  filter: brightness(0.96);
  color: var(--whitest-white);
  transform: translateY(-2px) scale(1.03);
  box-shadow: var(--shadow-md);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn.secondary {
  background: var(--color-secondary);
  color: var(--terra);
}

.btn.secondary:hover {
  background: var(--color-secondary-hover);
  color: var(--terra);
}

.btn.submit-btn {
  background: var(--sun-drenched);
  color: var(--whitest-white);
  width: 100%;
  margin-top: var(--s-4);
  padding: var(--s-4) var(--s-6);
  font-size: var(--font-size-lg);
}

.btn.submit-btn:hover { filter: brightness(0.96); transform: translateY(-2px); }

/* Hero Section */
.intro {
  text-align: center;
  padding: var(--s-6) var(--s-6) 0 var(--s-6); /* Remove bottom padding */
  margin-bottom: 0; /* Remove bottom margin */
  /* Make intro colorless/transparent so it doesn't appear as a colored block */
  background: transparent;
  background-image: none;
  background-size: none;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

/* Responsive intro image container and image cropping */
.intro-img-container {
  padding: 2rem;
  height: 50vh;
  max-height: 700px; /* Increased by 100px for 100pt taller */
  min-height: 400px; /* Also increased min-height by 100px */
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hero Slideshow Styles - Optimized for Performance */
.hero-slideshow {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 1rem;
  background-color: #f5f5f5; /* Fallback while loading */
}

/* Subtle grain overlay for organic texture */
.hero-slideshow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.015;
  background-image: 
    radial-gradient(circle at 1px 1px, rgba(0,0,0,0.15) 1px, transparent 0),
    radial-gradient(circle at 2px 3px, rgba(0,0,0,0.1) 1px, transparent 0);
  background-size: 20px 20px, 25px 25px;
  background-position: 0 0, 10px 12px;
  pointer-events: none;
  animation: grain 10s steps(8) infinite;
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  background-size: cover;
  background-position: center calc(50% - 75pt); /* Lower focal point by 75pt */
  background-repeat: no-repeat;
  /* Ken Burns effect applied to background */
  animation: kenBurns 12s ease-in-out infinite alternate;
  transform-origin: center center;
  /* Loading state */
  background-color: #f0f0f0;
  /* Subtle distortion filters for organic feel */
  filter: 
    contrast(1.02) 
    saturate(0.98) 
    brightness(0.995) 
    sepia(0.02) 
    hue-rotate(1deg) 
    grayscale(0.01);
}

.hero-slide.active {
  opacity: 1;
}

.hero-slide.loaded {
  background-color: transparent;
}

/* First slide loads immediately with custom focal point */
.hero-slide[data-bg] {
  background-image: url('images/herobds.png');
  background-position: center top; /* Beach grasses: pinned to top of slideshow */
}

/* Specific focal points for different slides */
.hero-slide:nth-child(2) {
  background-position: center center; /* bg6: centered positioning, no pinning */
}

.hero-slide:nth-child(3) {
  background-position: center calc(50% - 10pt); /* Farm life: 65pt up from default -75pt */
}

.hero-slide:nth-child(4) {
  background-position: center bottom; /* Window image: stick bottom to frame bottom */
}

/* Placeholder for loading slides */
.hero-slide:not(.loaded):not([data-bg])::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid #e0e0e0;
  border-top-color: #c75b4a;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Subtle grain animation */
@keyframes grain {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  10% { transform: translate(-1px, 1px) rotate(0.1deg); }
  20% { transform: translate(1px, 0px) rotate(-0.1deg); }
  30% { transform: translate(0px, -1px) rotate(0.1deg); }
  40% { transform: translate(-1px, -1px) rotate(-0.1deg); }
  50% { transform: translate(1px, 1px) rotate(0.1deg); }
  60% { transform: translate(0px, 1px) rotate(-0.1deg); }
  70% { transform: translate(1px, -1px) rotate(0.1deg); }
  80% { transform: translate(-1px, 0px) rotate(-0.1deg); }
  90% { transform: translate(0px, 0px) rotate(0.1deg); }
}

/* Slight variations for each slide */
.hero-slide:nth-child(1) {
  filter: 
    contrast(1.03) 
    saturate(0.97) 
    brightness(0.998) 
    sepia(0.03) 
    hue-rotate(2deg);
}

.hero-slide:nth-child(2) {
  filter: 
    contrast(1.01) 
    saturate(0.99) 
    brightness(0.997) 
    sepia(0.01) 
    hue-rotate(-1deg);
}

.hero-slide:nth-child(3) {
  filter: 
    contrast(1.02) 
    saturate(0.98) 
    brightness(0.996) 
    sepia(0.025) 
    hue-rotate(1.5deg);
}

.hero-slide:nth-child(4) {
  filter: 
    contrast(1.015) 
    saturate(0.985) 
    brightness(0.999) 
    sepia(0.015) 
    hue-rotate(-0.5deg);
}

/* Ken Burns animation variants for different slides */
.hero-slide:nth-child(1) { animation: kenBurns1 12s ease-in-out infinite alternate; }
.hero-slide:nth-child(2) { animation: kenBurns2 12s ease-in-out infinite alternate; }
.hero-slide:nth-child(3) { animation: kenBurns3 12s ease-in-out infinite alternate; }
.hero-slide:nth-child(4) { animation: kenBurns4 12s ease-in-out infinite alternate; }

/* Ken Burns keyframes - subtle movements for calming effect */
@keyframes kenBurns1 {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.08) translate(-2%, -1%); }
}

@keyframes kenBurns2 {
  0% { transform: scale(1.05) translate(1%, 1%); }
  100% { transform: scale(1) translate(-1%, 0); }
}

@keyframes kenBurns3 {
  0% { transform: scale(1) translate(-1%, 0); }
  100% { transform: scale(1.06) translate(1%, -2%); }
}

@keyframes kenBurns4 {
  0% { transform: scale(1.04) translate(0, -1%); }
  100% { transform: scale(1) translate(2%, 1%); }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    animation: none;
    transform: none;
    transition: opacity 1s ease-in-out;
  }
}

@media (max-width: 600px) {
  .intro-img-container {
    padding: 1rem;
    height: 40vh; /* Increased from 30vh for taller mobile hero */
    max-height: 500px; /* Set reasonable max on mobile */
    min-height: 250px;
  }
}

/* Ensure the intro content sits below the fixed header when header becomes solid.
   Use CSS variables that reflect the measured header height so the intro's
   top spacing adapts dynamically. We add extra breathing space for visual comfort. */
.intro {
  /* Add 50pt spacing below nav bar (main already has basic spacing) */
  padding-top: 50pt;
  transition: padding-top 220ms var(--ease-standard);
}

/* Mobile: consistent spacing */
@media (max-width: 600px) {
  .intro { 
    padding-top: 50pt; 
  }
}

.hero-container {
  margin: var(--s-6) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.hero-container img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

.hero-container:hover img {
  transform: scale(1.02);
}

/* Full-bleed hero - spans the full viewport width */
.hero-fullwidth {
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  border-radius: 0; /* remove rounded corners when full-bleed */
  box-shadow: none;
  min-height: 200px; /* Minimum height to make it visible */
  background: rgba(0, 0, 0, 0.05); /* Subtle background to see the positioning */
}

/* Alternating warm earth-tone backgrounds for sequential sections */
/* Use nth-of-type on top-level sections to keep it author-friendly */
main > section:nth-of-type(odd) {
  background: var(--earth-50);
}
main > section:nth-of-type(even) {
  background: var(--earth-100);
}

/* More pronounced alternation for deeper emphasis every 3rd section */
main > section:nth-of-type(3n) {
  background: var(--earth-200);
}

/* Specific override for support/contact to keep them distinct and guide focus */
section#support, #support {
  background: var(--honey);
  color: var(--grand);
}

/* Contact section styling with clean specificity */
section#contact.section.card.contact-section.waitlist-section,
section#contact.section.card.contact-section,
section#contact.section.contact-section.waitlist-section,
section#contact.section.card.waitlist-section,
section#contact.section.card,
section#contact.section,
section#contact,
.section.card.contact-section.waitlist-section,
.section.contact-section.waitlist-section,
.contact-section.waitlist-section,
.contact-section.card,
.contact-section,
.waitlist-section,
main > section#contact,
main > section.contact-section,
main > .section.contact-section {
  /* Default background for contact section - removable with custom classes */
  background: #dfcdb7;
  background-color: #dfcdb7;
  color: var(--color-text);
}

/* Custom background colors for contact section - higher specificity without !important */
body section#contact.contact-bg-custom,
html body section.contact-section.contact-bg-custom {
  background-color: var(--custom-bg-color, #dfcdb7);
}

/* Modern card-based accordion styles for support section */
.support-accordion {
  display: grid;
  gap: 24px; /* consistent 24px margin between cards */
  width: 100%; /* full width */
  margin: var(--s-5) auto; /* center and add vertical spacing */
  padding: 32px; /* increased padding for card structure */
  background: #ffffff; /* clean white card background */
  border-radius: 16px; /* modern card border radius */
  box-shadow: 0 2px 8px rgba(30, 30, 30, 0.12); /* modern card shadow */
  max-width: 100%; /* ensure it spans full width */
}

/* Remove any browser default styling for details elements */
.support-accordion__item details {
  border: none;
  outline: none;
}

.support-accordion__item details summary {
  border: none;
  outline: none;
}

.support-accordion__item {
  background: #fff; /* clean white card background */
  border: 1px solid #bdbdbd; /* subtle card border */
  border-radius: 8px; /* modern card border radius */
  overflow: visible;
  transition: box-shadow 400ms var(--ease-standard), transform 300ms var(--ease-standard);
  width: 100%;
  display: block;
  box-sizing: border-box;
  opacity: 1;
  transform: translateY(0);
  min-height: auto;
  height: auto;
  position: relative;
  z-index: 5;
  margin: 0 auto 16px auto; /* centered with spacing between accordion items */
  box-shadow: 0 1px 4px rgba(30, 30, 30, 0.08); /* subtle individual card shadow */
}

/* Animation states - only when parent has will-animate class */
.support-content.will-animate .support-accordion__item {
  opacity: 0;
  transform: translateY(15px);
  animation: accordionFadeIn 600ms var(--ease-standard) forwards;
}

/* Staggered animation delay for each accordion item - account for .accordion-header as first child */
.support-content.will-animate .support-accordion__item:nth-child(2) { animation-delay: 0ms; }
.support-content.will-animate .support-accordion__item:nth-child(3) { animation-delay: 150ms; }
.support-content.will-animate .support-accordion__item:nth-child(4) { animation-delay: 300ms; }
.support-content.will-animate .support-accordion__item:nth-child(5) { animation-delay: 450ms; }
.support-content.will-animate .support-accordion__item:nth-child(6) { animation-delay: 600ms; }

@keyframes accordionFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.support-accordion__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.support-accordion__summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  cursor: pointer;
  padding: 16px 24px; /* card-style padding */
  background: #f8f9fa; /* light card header background */
  color: var(--grand);
  border-radius: 8px 8px 0 0; /* rounded top corners for card look */
  transition: background-color 0.25s ease;
  font-weight: var(--font-weight-medium);
  box-sizing: border-box;
  border: none; /* remove any browser default borders */
  outline: none; /* remove focus outline that might appear as blue line */
}

.support-accordion__summary::-webkit-details-marker { display: none; }

.support-accordion__summary:hover {
  background: #e9ecef; /* subtle hover effect for card headers */
}

.support-accordion__summary:focus { 
  outline: none; 
  border: none;
  box-shadow: none; /* remove focus ring completely for clean honey background */
}

/* Remove any browser default blue accents or borders from details/summary */
.support-accordion__item,
.support-accordion__item *,
.support-accordion__summary,
.support-accordion__panel {
  border: none !important;
  outline: none !important;
}

.support-accordion__item:focus,
.support-accordion__summary:focus {
  box-shadow: none !important;
  border: none !important;
}

.support-accordion__title { 
  font-size: 1.15rem; 
  color: var(--grand);
  font-weight: var(--font-weight-semibold);
  flex: 1; /* take up available space after the icon */
  order: 2; /* ensure title appears after the icon */
}

.support-accordion__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;  /* 20% smaller than 60px */
  height: 48px; /* 20% smaller than 60px */
  border-radius: 50%;
  background: var(--terra); /* terra background for numbers */
  color: var(--honey); /* honey color for number text */
  font-weight: 700;
  font-size: 1.44rem; /* 20% smaller than 1.8rem */
  font-family: var(--font-family-mono); /* monospace for consistent number width */
  transition: background 220ms var(--ease-standard), transform 200ms var(--ease-standard);
  margin-right: var(--s-3); /* spacing between icon and title */
  flex-shrink: 0;
  order: 1; /* ensure icon appears first in flex order */
}

.support-accordion__panel {
  padding: 20px 24px; /* card body padding */
  color: #444; /* muted text color for descriptions */
  background: #ffffff; /* clean white card body background */
  transition: opacity 400ms var(--ease-standard), transform 400ms var(--ease-standard);
  transform: translateY(0);
  opacity: 1;
  min-height: auto;
  height: auto;
  overflow: visible;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
  border-radius: 0 0 8px 8px; /* rounded bottom corners for card body */
  margin-top: 0; /* no gap between header and body in card design */
  border-top: 1px solid #e9ecef; /* subtle separator between header and body */
}

/* Animation states for panels - only when animation system is active */
.support-content.will-animate .support-accordion__panel {
  opacity: 0;
  transform: translateY(-5px);
}

/* Smooth panel reveal animation when opened */
.support-accordion__item[open] .support-accordion__panel {
  opacity: 1;
  transform: translateY(0);
  animation: panelSlideIn 400ms var(--ease-standard) forwards;
}

/* Ensure opened accordion items appear above everything */
.support-accordion__item[open] {
  z-index: 15; /* higher z-index when open */
  position: relative;
}

@keyframes panelSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Open state styles */
.support-accordion__item[open] {
  box-shadow: none; /* remove shadow completely */
  border: none; /* remove all borders completely */
}

.support-accordion__item[open] .support-accordion__icon {
  background: var(--honey); /* swap colors when open */
  color: var(--terra); /* terra numbers on honey background when open */
  transform: scale(1.1); /* slight scale up when open for visual feedback */
}

/* Use numbers instead of + and - icons - account for .accordion-header as first child */
.support-accordion__item:nth-child(2) .support-accordion__icon::before {
  content: "1";
}

.support-accordion__item:nth-child(3) .support-accordion__icon::before {
  content: "2";
}

.support-accordion__item:nth-child(4) .support-accordion__icon::before {
  content: "3";
}

.support-accordion__item:nth-child(5) .support-accordion__icon::before {
  content: "4";
}

.support-accordion__item:nth-child(6) .support-accordion__icon::before {
  content: "5";
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .support-accordion__panel { transition: none; }
  .support-accordion__icon { transition: none; }
  .support-accordion__item { animation: none; transition: none; }
  .support-content, .support-image { animation: none; transition: none; opacity: 1; transform: none; }
  .support-image img { transition: none; }
}

/* Viewport entry animations - unobtrusive and respectful */
.animate-in {
  opacity: 0;
  transform: translateY(16px) scale(0.995);
  transition: opacity 420ms var(--ease-standard), transform 420ms var(--ease-standard);
}
.animate-in.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Stagger helper: apply to children (use with JS to add is-visible) */
.animate-in-stagger > * {
  opacity: 0;
  transform: translateY(10px);
}
.animate-in-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 420ms var(--ease-standard), transform 420ms var(--ease-standard);
}
.animate-in-stagger.is-visible > *:nth-child(1) { transition-delay: 60ms; }
.animate-in-stagger.is-visible > *:nth-child(2) { transition-delay: 120ms; }
.animate-in-stagger.is-visible > *:nth-child(3) { transition-delay: 180ms; }
.animate-in-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .animate-in, .animate-in-stagger > * { transition: none; transform: none; opacity: 1; }
}

/* Guide users toward contact: subtle CTA pulse on contact-section and contact button */
.contact-section .contact-cta,
#support .contact-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 420ms var(--ease-standard), box-shadow 420ms var(--ease-standard);
}
.contact-section .contact-cta.pulse,
#support .contact-cta.pulse {
  animation: cta-pulse 2200ms infinite ease-in-out 1200ms;
}
@keyframes cta-pulse {
  0% { transform: translateY(0) scale(1); box-shadow: 0 0 0 rgba(0,0,0,0); }
  50% { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 28px rgba(0,0,0,0.06); }
  100% { transform: translateY(0) scale(1); box-shadow: 0 0 0 rgba(0,0,0,0); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-section .contact-cta.pulse, #support .contact-cta.pulse { animation: none; }
}

/* Waitlist-specific styles: improved visual hierarchy, form layout, focus states, and CTA */
.waitlist-section {
  /* keep the warm section appearance while separating the form visually */
  padding-top: var(--s-6);
  padding-bottom: var(--s-6);
}

.waitlist-hero {
  text-align: center;
  margin-bottom: var(--s-5);
}
.waitlist-hero h2 {
  font-family: var(--font-heading);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  letter-spacing: var(--ls-heading);
  margin: 0 0 var(--s-2) 0;
}
.waitlist-hero .availability-note {
  color: var(--color-text-secondary);
  margin: 0 auto 0 0;
  max-width: 56ch;
}

.waitlist-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  align-items: start;
}

.waitlist-form {
  background: #ffffff; /* clean white card background */
  padding: 32px; /* modern card padding */
  border-radius: 16px; /* modern card border radius */
  box-shadow: 0 2px 8px rgba(30, 30, 30, 0.12); /* modern card shadow */
  border: 1px solid #bdbdbd; /* subtle card border */
  margin-bottom: 24px; /* spacing between cards */
  max-width: 540px; /* limit card width for readability */
}

.waitlist-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.waitlist-form .form-row.form-actions { display: flex; align-items: center; gap: var(--s-3); }

.waitlist-form .form-control {
  padding: calc(var(--s-3) - 2px) var(--s-3);
  font-size: 1rem;
  border-radius: var(--radius-base);
  border: 1px solid var(--color-border);
  background: var(--color-background);
}

.waitlist-form .form-control:focus {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--color-primary);
}

.waitlist-form textarea.form-control { resize: vertical; min-height: 88px; }

.waitlist-aside {
  display: block;
}
.waitlist-aside .contact-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-card-border-inner);
}

.form-status {
  display: none; /* JS will set display:block when needed */
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  margin-top: var(--s-2);
}
.error-message {
  color: var(--color-error);
  border-left: 4px solid var(--color-error);
  background: rgba(0,0,0,0.03);
}
.success-message {
  color: var(--color-success);
  border-left: 4px solid var(--color-success);
  background: rgba(0,0,0,0.02);
}

.waitlist-cta {
  background: #23457b; /* theme accent color */
  color: #ffffff;
  padding: 10px 24px; /* modern button padding */
  border-radius: 8px; /* modern button border radius */
  border: none;
  box-shadow: 0 2px 4px rgba(30, 30, 30, 0.1);
  transition: background 0.25s ease, box-shadow 0.25s ease;
  font-size: 1em;
  cursor: pointer;
  font-weight: 600;
}
.waitlist-cta:hover:not(:disabled) {
  background: #193360; /* darker hover state */
  box-shadow: 0 4px 8px rgba(30, 30, 30, 0.15);
}
.waitlist-cta:active:not(:disabled) { transform: translateY(-1px); }
.waitlist-cta:focus-visible { box-shadow: var(--focus-ring); outline: none; }

/* Ensure the CTA and aside layout stack nicely on larger screens */
@media (min-width: 768px) {
  .waitlist-grid { grid-template-columns: 1fr 360px; }
  .waitlist-aside { padding-left: var(--s-4); }
}

@media (max-width: 420px) {
  .waitlist-form .form-row { grid-template-columns: 1fr; }
}

/* Global refined hover & focus for interactive elements */
.btn, a, button, .carousel-btn, .indicator {
  transition: transform 220ms var(--ease-standard), box-shadow 220ms var(--ease-standard), opacity 160ms var(--ease-standard);
}

.btn:hover:not(:disabled), a:hover, button:hover:not(:disabled) {
  transform: translateY(-2px);
  text-decoration: none;
}

.btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Form control micro-animation */
.form-control {
  transition: border-color 160ms var(--ease-standard), box-shadow 160ms var(--ease-standard), background-color 220ms var(--ease-standard);
}

/* Loading spinner for buttons */
.btn-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15);
  border-top-color: rgba(255,255,255,0.9);
  margin-left: 10px;
  vertical-align: middle;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 180ms var(--ease-standard), transform 180ms var(--ease-standard);
}

.btn.loading .btn-spinner {
  opacity: 1;
  transform: scale(1);
  animation: spin 900ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* When a button is in loading state, slightly reduce label opacity */
.btn.loading .btn-label { opacity: 0.92; }

@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation: none; }
  .btn:hover { transform: none; }
}

/* Make error/success boxes keyboard focusable for screen reader visibility when shown */
.form-status[aria-hidden="false"] { display: block; }


.hero-fullwidth img,
.hero-fullwidth picture img {
  width: 100vw;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Intro two-column layout (image left, text right) */
.intro-grid {
  /* switch to a float-based layout so body copy can wrap naturally around the image */
  display: block;
  max-width: 1100px;
  margin: 0 auto 48px;
  padding: 24px 16px;
}

.intro-figure {
  float: left;
  /* increase image presence: wider so more of the layout is image */
  width: 52%; /* larger percentage so image dominates the left column */
  max-width: 760px; /* allow a wider presentation on very large screens */
  /* Make the figure visually taller so the image reads like a window.
    Use a portrait-ish aspect ratio to emphasize vertical grass detail. */
  aspect-ratio: 3 / 4; /* taller crop (width : height = 3:4) */
  /* Expose a CSS variable so heading can match the figure height */
  --intro-figure-min-height: 380px;
  min-height: var(--intro-figure-min-height); /* ensure tall appearance on medium screens */
  margin: 6px 4% 18px 0; /* gap to the right for text */
  overflow: hidden; /* crop image to the figure box */
  border-radius: 6px;
  position: relative;
  flex-shrink: 0;
  /* window-like treatment: deep outer shadow + subtle inner highlight */
  box-shadow: 0 28px 54px rgba(12,18,20,0.45), 0 6px 18px rgba(12,18,20,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.06);
  background: #f6f6f6;
}

.intro-figure img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* fill and crop the image to the figure */
  /* Focus the crop on the grassy foreground: adjust as needed to perfect focal point */
  object-position: 50% 22%; /* center horizontally, move focal point upward toward grasses */
  transform: translate3d(0,0,0); /* enable GPU layer for smoother parallax */
}

.intro-copy {
  /* ensure text flows to the right of the floated image and wraps naturally */
  overflow: hidden; /* establishes a block formatting context so floats behave */
  text-align: left;
  padding-bottom: 0; /* Remove any bottom padding that creates white space */
}

.intro-copy h1 {
  text-align: left; /* ensure left aligned per request */
  font-family: 'Gilda Display', serif;
  font-size: 2.4rem;
  line-height: 1.05;
  margin: 0 0 18px;
  /* Make the heading vertically fill the same visual height as the figure
     so it appears as a block to the right of the image. */
  display: flex;
  align-items: center; /* center the heading text vertically next to the image */
  min-height: var(--intro-figure-min-height);
  /* ensure the heading uses the full inline flow space next to the float */
  display: block; /* fallback display for better flow */
  margin-top: 0.1rem;
}
/* Make the heading occupy the area to the right of the floated image
   and ensure the first paragraph begins beneath the floated figure. */

/* Force the first paragraph to clear the floated image so body copy
   starts below the figure. This preserves the heading being beside the
   image while the paragraph begins underneath it. */
.intro-copy p {
  /* Force any paragraph in the intro copy to start below the floated image
     so the paragraphs do not wrap beside the figure. This preserves the
     heading beside the image while body paragraphs appear under it. */
  clear: left;
  margin-top: 18px;
}

/* If the image is very tall on small viewports, cap the heading height so it
   doesn't become excessively large when stacked. */
@media (max-width: 920px) {
  .intro-copy h1 { min-height: 0; display: block; align-items: normal; }
}

/* Intro subtitle: single consolidated rule */
.intro-copy .subtitle {
  text-align: left;
  margin-bottom: 18px;
  /* controlled spacing instead of a <br /> element */
  margin-top: var(--s-4);
}

/* Small screens: stack and remove float */
@media (max-width: 920px) {
  .intro-figure {
    float: none;
    width: 100%;
    /* on small screens keep a modest height but avoid huge tall crops */
    aspect-ratio: auto;
    height: auto;
    min-height: 220px;
    margin: 0 0 18px 0;
    box-shadow: var(--shadow-md);
  }

  .intro-copy h1 {
    font-size: 1.9rem;
    text-align: left;
  }
}

/* Respect reduced-motion: disable parallax transforms */
@media (prefers-reduced-motion: reduce) {
  .intro-figure img { transform: none !important; }
}

/* When the intro is active we use the .intro background-image; do not hide hero container so content stays visible */
body.intro-active .hero-container,
body.intro-active .hero-fullwidth {
  /* intentionally left visible during intro to keep content accessible */
  display: block !important;
}

/* intro background images for different breakpoints */
.intro {
  /* ensure no background image is applied */
  background-image: none;
}
@media (max-width: 1024px) {
  .intro { background-image: none; }
}
@media (max-width: 600px) {
  .intro { background-image: none; }
}

.cta-buttons {
  margin: var(--s-6) 0 0 0;
  display: flex;
  gap: var(--s-3);
  align-items: center;
  justify-content: flex-start;
}

/* (consolidated above) */

/* Scrolling CTA button */
.scrolling-cta-wrapper {
  margin: var(--s-5) 0 0 0;
  display: flex;
  justify-content: flex-start;
}

.scrolling-cta {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  padding: var(--s-3) var(--s-5);
  min-width: 260px;
}


.scrolling-viewport {
  display: block;
  width: 100%;
  max-width: 320px;
  min-width: 180px;
  overflow: hidden;
  position: relative;
  height: 2.2em;
}

.scrolling-track {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  animation: scroll-left 12s linear infinite;
  min-width: 100%;
  position: relative;
}
.scrolling-track::after {
  content: attr(data-repeat);
  white-space: pre;
  display: inline;
}

.scroll-item {
  display: inline-block;
  padding: 0 var(--s-2);
  color: var(--color-btn-primary-text);
  font-weight: var(--font-weight-medium);
}

/* Pause animation on hover and focus for accessibility */
.scrolling-cta:hover .scrolling-track,
.scrolling-cta:focus .scrolling-track,
.scrolling-cta:focus-within .scrolling-track {
  animation-play-state: paused;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .scrolling-track {
    animation: none;
  }
}

/* Badge Animation */
.credentials {
  text-align: center;
  padding: var(--s-4) 0;
  background: none;
}

.badge-wrapper {
  display: flex;
  justify-content: center;
  margin: var(--s-5) 0;
  position: relative; /* allow z-index stacking */
}

.badge-animated {
  width: 140px !important;
  height: 140px !important;
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: transparent !important;
  border: none !important;
  border-radius: var(--radius-full);
  /* Restore gentle floating animation */
  animation: floating 4s ease-in-out infinite;
  /* Subtle glow appropriate for death care */
  filter: drop-shadow(0 0 6px rgba(var(--bds-footer-accent-rgb), 0.4));
  transition: transform var(--duration-normal) var(--ease-standard);
  /* Ensure proper image rendering */
  object-fit: contain;
}

/* Floating badge: Elegant and respectful for death care context */
.badge-floating {
  display: block !important;
  position: fixed !important;
  right: 28px !important;
  bottom: 48px !important;
  z-index: 2400 !important;
  pointer-events: auto !important;
  width: 140px !important;
  height: 140px !important;
  background: transparent !important;
  border: none !important;
  /* Gentle rotation like a book award or certification */
  transform: rotate(-8deg) !important;
  /* Subtle opacity for respectful presence */
  opacity: 0.85 !important;
  visibility: visible !important;
  /* Soft drop shadow for depth */
  filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.3));
}

/* When JS adds .badge-visible, show as a fixed 'sticker' */
.badge-floating.badge-visible {
  display: block !important;
  position: fixed;
  right: 28px;
  bottom: 48px;
  /* slight counter-clockwise tilt for a sticker-like feel */
  transform: translateZ(0) rotate(-6deg);
  z-index: 2400;
  /* Keep container minimal; visual weight comes from the circular image */
  background: transparent;
  padding: 0;
  border-radius: 50%;
  box-shadow: none;
  border: 0;
}

@media (max-width: 768px) {
  .badge-floating {
    bottom: 18px !important;
    right: 18px !important;
    width: 120px !important;
    height: 120px !important;
    transform: rotate(-6deg) !important;
    opacity: 0.8 !important;
  }
  .badge-animated { 
    width: 120px !important; 
    height: 120px !important;
    filter: drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.25));
  }
}

/* Hide badge during intro to prevent premature display - DISABLED FOR TESTING */
/* body.intro-active .badge-floating { display: none !important; } */

.badge-animated:hover {
  transform: scale(1.1) rotate(5deg);
}

/* Badge Respectful Hover Effects */
.badge-animated:hover {
  transform: scale(1.05) rotate(2deg);
  filter: drop-shadow(0 0 12px rgba(var(--bds-footer-accent-rgb), 0.6));
}

.badge-floating:hover {
  opacity: 1 !important;
}

/* Fallback styles if animations fail */
@supports not (animation: floating) {
  .badge-animated {
    animation: none;
    filter: drop-shadow(0 0 15px var(--bds-footer-accent));
  }
}

/* Ensure badge image loads properly */
.badge-animated {
  object-fit: contain;
  background: transparent;
}

/* Pop-in animation for the badge when the intro finishes */
@keyframes badge-pop {
  0% { transform: scale(0.2) translateY(-6px) rotate(-8deg); opacity: 0; }
  60% { transform: scale(1.08) translateY(2px) rotate(4deg); opacity: 1; }
  80% { transform: scale(0.98) translateY(0px) rotate(-2deg); }
  100% { transform: scale(1) translateY(0) rotate(0); }
}

.badge-pop {
  animation: badge-pop 700ms cubic-bezier(.2,.9,.3,1) both;
}

@media (prefers-reduced-motion: reduce) {
  .badge-pop { animation: none; }
}

/* Attention pulse: subtle glow+scale to draw gentle focus after the pop */
@keyframes badge-attention {
  0% { 
    transform: scale(1) translateY(0); 
    filter: drop-shadow(0 0 12px rgba(var(--bds-footer-accent-rgb), 0.9)) drop-shadow(0 0 8px var(--bds-footer-accent)); 
  }
  30% { 
    transform: scale(1.06) translateY(-4px); 
    filter: drop-shadow(0 0 30px rgba(var(--bds-footer-accent-rgb), 0.9)) drop-shadow(0 0 20px var(--bds-footer-accent)); 
  }
  60% { 
    transform: scale(1.02) translateY(-2px); 
    filter: drop-shadow(0 0 20px rgba(var(--bds-footer-accent-rgb), 0.7)) drop-shadow(0 0 15px var(--bds-footer-accent)); 
  }
  100% { 
    transform: scale(1) translateY(0); 
    filter: drop-shadow(0 0 12px rgba(var(--bds-footer-accent-rgb), 0.9)) drop-shadow(0 0 8px var(--bds-footer-accent)); 
  }
}

.badge-attention {
  animation: badge-attention 900ms cubic-bezier(.2,.9,.3,1) both;
}

@media (prefers-reduced-motion: reduce) {
  .badge-attention { animation: none; }
}

/* Fallback SVG wrapper sizing and visual parity */
.badge-fallback-svg {
  width: 140px;
  height: 140px;
  display: inline-block;
}

@keyframes floating {
  0%   { transform: translateY(0px) rotate(0deg); }
  25%  { transform: translateY(-8px) rotate(1deg); }
  50%  { transform: translateY(-15px) rotate(0deg); }
  75%  { transform: translateY(-8px) rotate(-1deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes glowing {
  0%   { filter: drop-shadow(0 0 12px rgba(var(--bds-footer-accent-rgb), 0.9)) drop-shadow(0 0 8px rgba(var(--bds-footer-accent-rgb), 0.6)); }
  100% { filter: drop-shadow(0 0 28px rgba(var(--bds-footer-accent-rgb), 0.9)) drop-shadow(0 0 20px rgba(var(--bds-footer-accent-rgb), 0.7)); }
}

/* About Section */
.about-content {
  display: flex;
  align-items: flex-start;
  gap: var(--s-6);
}

.profile-img {
  border-radius: var(--radius-full);
  width: 160px; 
  height: 160px;
  object-fit: cover;
  box-shadow: var(--shadow-lg);
  flex-shrink: 0;
  transition: transform var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
}

.profile-img:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
}

.about-text {
  flex: 1;
}

/* Feature Section */
.feature-section {
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface) 100%);
}

.feature-image {
  margin: var(--s-5) 0;
  text-align: center;
}

.feature-image img {
  width: 100%;
  max-width: 600px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.support-list ul {
  list-style: none;
  padding: 0;
  margin: var(--s-5) 0;
}

.support-list li {
  background: var(--color-background);
  margin: var(--s-3) 0;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-primary);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
}

.support-list li:hover {
  transform: translateX(5px);
  box-shadow: var(--shadow-md);
}

/* Accent treatments inside Terra/support section: keep Dirt for emphasis */
#support .support-list li strong,
#support .support-list li b,
#support .support-list .service-note,
.feature-section .service-note {
  color: var(--dirt); /* accent color */
}

.service-note {
  font-family: var(--font-family-base);
  font-style: normal; /* remove italic styling */
  color: var(--grand);
  margin-top: var(--s-5);
  text-align: left;
  font-size: var(--font-size-2xl); /* increased from lg to 2xl for better grid fill */
  line-height: 1.5; /* improved readability with larger text */
  opacity: 0.9;
  padding: var(--s-4); /* increased padding for better spacing with larger text */
  border-left: none; /* remove border completely */
  background: transparent; /* transparent background to show honey */
  border-radius: var(--radius-sm);
}

/* Legacy Section */
.legacy-section {
  background: var(--color-surface);
}

.legacy-cols {
  display: flex;
  gap: var(--s-6);
  margin: var(--s-6) 0;
}

.legacy-col {
  flex: 1;
  background: var(--color-background);
  padding: var(--s-5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-normal) var(--ease-standard);
  border: 1px solid var(--color-card-border);
}

.legacy-col:hover {
  transform: translateY(-5px);
}

.legacy-diagram {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-6);
  position: relative;
}

.diagram-center {
  grid-column: 2;
  background: var(--color-primary);
  color: var(--color-btn-primary-text);
  padding: var(--s-5);
  border-radius: var(--radius-full);
  text-align: center;
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-base);
  box-shadow: var(--shadow-lg);
}

.diagram-item {
  background: var(--color-secondary);
  color: var(--color-text);
  padding: var(--s-3);
  border-radius: var(--radius-lg);
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-normal) var(--ease-standard);
}

.diagram-item:hover {
  transform: scale(1.05);
}

/* Testimonial Section */
.testimonial-section {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color: var(--color-btn-primary-text);
}

.testimonial-section h2,
.testimonial-section h3 {
  color: var(--color-btn-primary-text);
}

/* ======= MOBILE-FIRST CARD SYSTEM ======= */
/* Simple, functional card layout for all viewports */
.card, .card-legacy, .card-testimonial {
  display: block;
  margin: 24px auto;
  border-radius: 12px;
  background: var(--color-surface, #fff);
  box-shadow: 0 2px 8px rgba(30,30,30,0.12);
  max-width: 540px;
  position: static;
}

/* ======= EXISTING CAROUSEL SYSTEM (LEGACY) ======= */
/* Carousel implementation for testimonials */
.testimonial-carousel,
.legacy-carousel {
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface) 100%);
  color: var(--color-text);
}

.carousel {
  position: relative;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 500ms var(--ease-standard);
  will-change: transform;
}

.carousel-slide {
  min-width: 100%;
  box-sizing: border-box;
  padding: var(--s-5) var(--s-5);
}

.slide-heading {
  text-align: center; /* heading centered */
  font-family: var(--font-heading);
  margin-bottom: var(--s-5);
}

.slide-columns {
  display: flex;
  gap: var(--s-6);
  align-items: flex-start;
}

.slide-columns .col {
  flex: 1;
  text-align: left; /* left aligned paragraph text */
}

/* Controls centered below the content */
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-6); /* increased spacing so arrows sit further apart */
  margin-top: var(--s-5);
  min-height: 56px; /* give controls some vertical presence */
}

/* Keep controls below content on mobile and tablet */
@media (max-width: 1023px) {
  .carousel-controls {
    position: relative !important;
    transform: none !important;
    width: auto !important;
    padding: 0 !important;
    margin-top: var(--s-5) !important;
  }
}

.carousel-btn {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: var(--s-2) var(--s-3);
  border-radius: 10px;
  cursor: pointer;
  font-size: 20px;
  width: 56px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.carousel-btn:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

.carousel-indicators {
  display: flex;
  gap: var(--s-2);
  align-items: center;
}

.indicator {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  font-family: var(--font-family-mono);
}

.indicator[aria-selected="true"] {
  background: var(--color-primary);
  color: var(--color-btn-primary-text);
}

/* Responsive: stack columns on small screens */
@media (max-width: 768px) {
  .slide-columns {
    flex-direction: column;
  }
  .indicator { width: 30px; height: 30px; }
}

/* Responsive: constrain legacy and testimonial carousels to 75% of viewport width on larger screens */
@media (min-width: 1024px) {
  .testimonial-carousel,
  .legacy-carousel {
    max-width: 75vw;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: visible; /* Allow buttons to show outside the container */
  }
  
  /* Ensure carousel content stays contained while buttons are visible */
  .testimonial-carousel .carousel,
  .legacy-carousel .carousel {
    overflow: hidden; /* Hide scrolling content */
    border-radius: 12px;
  }
  
  /* Position carousel controls as overlays at the edges for desktop */
  .testimonial-carousel .carousel-controls,
  .legacy-carousel .carousel-controls {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0;
    padding: 0;
    pointer-events: none; /* Allow clicks to pass through container */
    z-index: 100; /* Higher z-index to ensure visibility */
  }
  
  .testimonial-carousel .carousel-btn,
  .legacy-carousel .carousel-btn {
    pointer-events: auto; /* Re-enable clicks on buttons */
    background: transparent;
    border: none;
    color: var(--terra);
    font-weight: normal;
    font-size: 24px;
    box-shadow: none;
    width: 40px;
    height: 40px;
    border-radius: 0;
    transition: all 200ms var(--ease-standard);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6; /* 60% opacity for subtle appearance */
  }
  
  /* Position individual buttons at the card edges */
  .testimonial-carousel .carousel-btn.prev,
  .legacy-carousel .carousel-btn.prev {
    position: absolute;
    left: 10px;
  }
  
  .testimonial-carousel .carousel-btn.next,
  .legacy-carousel .carousel-btn.next {
    position: absolute;
    right: 10px;
  }
  
  .testimonial-carousel .carousel-btn:hover,
  .legacy-carousel .carousel-btn:hover {
    opacity: 1;
    transform: scale(1.2);
  }
  
  /* Ensure carousel content stays within bounds on desktop */
  .carousel-slide {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .slide-columns {
    gap: var(--s-6);
    max-width: 100%;
  }
  
  .slide-columns .col {
    flex: 1;
    min-width: 0; /* Allow text to wrap properly */
  }
}

/* Respect reduced motion by disabling slide transform animation */
@media (prefers-reduced-motion: reduce) {
  .carousel-track {
    transition: none;
  }
}

/* Contact Section */
.contact-section {
  background: var(--color-surface);
}

.availability-note {
  text-align: center;
  color: var(--color-primary);
  font-style: italic;
  font-family: var(--font-family-base);
  margin-bottom: var(--s-7);
}

.contact-form {
  margin: var(--s-7) 0;
}

.form-row {
  display: flex;
  gap: var(--s-4);
}

.contact-form input, 
.contact-form textarea {
  width: 100%;
  border-radius: var(--radius-base);
  border: 1px solid var(--color-border);
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  margin-bottom: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--color-background);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
  color: var(--color-text);
  line-height: var(--line-height-normal);
}

.contact-form input:focus, 
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.contact-form textarea { 
  min-height: 4rem; 
  resize: vertical;
  font-family: var(--font-family-base);
}

.contact-image {
  margin-top: var(--s-7);
  text-align: center;
}

.contact-image img {
  width: 100%;
  max-width: 400px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

/* Newsletter Section */
.newsletter-section {
  /* Inherit card styling from base .card class */
  text-align: center;
}

.newsletter-note {
  color: var(--color-primary);
  font-style: italic;
  font-family: var(--font-family-base);
  margin-bottom: var(--s-6);
}

.newsletter-form {
  margin: var(--s-6) 0;
}

.newsletter-form .form-row {
  max-width: 400px;
  margin: 0 auto;
}

/* Ghost Newsletter Signup Styling */
.newsletter-section iframe {
  border-radius: 12px !important;
  overflow: hidden;
}

/* Override Ghost signup form fonts to match site - multiple selectors for better coverage */
.newsletter-section iframe,
.newsletter-section [data-ghost-signup] *,
.gh-portal-signup-form *,
.gh-signup-form * {
  font-family: var(--font-family-base) !important;
}

.newsletter-section [data-ghost-signup] h1,
.newsletter-section [data-ghost-signup] h2,
.newsletter-section [data-ghost-signup] h3,
.gh-portal-signup-form h1,
.gh-portal-signup-form h2, 
.gh-portal-signup-form h3,
.gh-signup-form h1,
.gh-signup-form h2,
.gh-signup-form h3 {
  font-family: var(--font-heading) !important;
}

/* CARD DESIGN RESTORATION - Override full-bleed styles for proper card appearance */

/* Contact & Newsletter Section Card Styling */
html body .contact-section.card,
html body .newsletter-section.card {
  width: auto;
  position: static;
  background: #dfcdb7;
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: var(--s-5);
  max-width: 540px;
  margin: 0 auto var(--s-4) auto;
  border: none;
}

/* Custom background colors */
html body .contact-section.card.contact-bg-custom,
html body .newsletter-section.card.newsletter-bg-custom {
  background: var(--custom-bg-color, #dfcdb7);
}

/* Remove pseudo-elements */
.contact-section.card::before,
.newsletter-section.card::before {
  display: none;
}

/* Reduce paragraph spacing within cards */
html body .contact-section.card p,
html body .newsletter-section.card p {
  margin-bottom: var(--s-2);
}

/* Mobile: Full width, no rounded corners */
@media (max-width: 767px) {
  html body .contact-section.card,
  html body .newsletter-section.card {
    width: 100vw !important;
    max-width: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
  }
}

/* Ensure content inside card sections is not constrained by full-bleed grid */
html body .contact-section.card > .full-bleed-inner,
html body .newsletter-section.card > .container {
  max-width: none;
  margin: 0;
  padding: 0;
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

/* Typeform Contact Form Styling */
.typeform-container {
  min-height: 50px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-following-background );

  margin: var(--s-4) auto;
 
  display: flex;
  justify-content: center;
  align-items: center;
}

.typeform-container [data-tf-live] {
  border-radius: 12px !important;
  min-height: 500px;
  width: 100%;
}

/* Override Typeform styling to match site design */
.typeform-container iframe,
.typeform-container [data-tf-live] *,
.tf-v1 * {
  font-family: var(--font-family-base) !important;
}

.typeform-container [data-tf-live] h1,
.typeform-container [data-tf-live] h2,
.typeform-container [data-tf-live] h3,
.tf-v1 h1,
.tf-v1 h2,
.tf-v1 h3 {
  font-family: var(--font-heading) !important;
}

.contact-alternative {
  margin-top: var(--s-6);
  color: var(--color-text-secondary);
}

.contact-alternative a {
  color: var(--color-primary);
  text-decoration: none;
}

/* New Contact Section Styling */
.contact-ticker {
  width: 100%;
  background: var(--color-primary);
  color: var(--grand);
  padding: 24px 0;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.ticker-content {
  display: inline-block;
  animation: scroll-ticker 160s linear infinite;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 600;
}

.ticker-text {
  display: inline-block;
  padding-right: 150px;
}

/* Style bold and italic formatting within ticker text */
.contact-ticker strong {
  font-weight: var(--font-weight-bold);
  font-style: italic;
}

.contact-ticker b {
  font-weight: var(--font-weight-bold);
}

.contact-ticker strong b,
.contact-ticker b strong {
  font-weight: var(--font-weight-bold);
  font-style: italic;
}

@keyframes scroll-ticker {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

.contact-hero h2 {
  text-align: center;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-family: var(--font-heading);
  margin: 2rem 0;
  color: var(--color-text);
}

.contact-grid {
  max-width: 600px;
  margin: 0 auto;
  
}

.contact-form .form-row {
  margin-bottom: 1.5rem;
}

.contact-form label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}

.required {
  color: var(--color-primary);
  font-weight: normal;
}

.name-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.checkbox-row {
  display: flex;
  align-items: center;
}

.checkbox-label {
  display: flex !important;
  align-items: center;
  cursor: pointer;
  font-family: var(--font-family-base) !important;
  font-weight: normal !important;
}

.checkbox-label input[type="checkbox"] {
  margin-right: 0.75rem;
  width: 18px;
  height: 18px;
}

.form-actions {
  margin: 2rem 0;
  text-align: center;
}

.privacy-notice {
  text-align: center;
  margin-top: 1rem;
  padding: 20pt 32px 50pt 32px;
  max-width: 90vw;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  overflow: visible;

}

.privacy-notice p {
  font-size: 1.2rem;
  color: var(--terra);
  font-style: italic;
  line-height: 1.5;
  word-break: normal;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  .name-inputs {
    grid-template-columns: 1fr;
  }
  
  .ticker-content {
    font-size: 0.9rem;
  }
  
  /* Contact section elements */
  .contact-hero h2 {
    font-size: 2rem;
    margin: 1.5rem 1rem;
  }
  
  .contact-hero,
  .contact-grid {
    max-width: 100%;
    padding: 0 1rem;
  }
  
  .contact-ticker {
    margin: 0;
  }
  
  .typeform-container {
    border-radius: 0 !important;
    margin: 0 !important;
  }
  
  .privacy-notice {
    padding: 0 1rem;
  }
  
  /* Newsletter section: remove all border-radius from inline styled divs */
  .newsletter-section > div,
  .newsletter-section > div[style],
  .newsletter-section div[style*="border-radius"],
  #newsletter > div,
  #newsletter > div[style] {
    border-radius: 0 !important;
    overflow: visible !important;
  }
}

.contact-alternative a:hover {
  text-decoration: underline;
}

/* Footer */
.footer-nav {
  display: flex;
  gap: var(--s-6);
  align-items: center;
  justify-content: center;
  margin-top: var(--s-6);
  font-family: 'Averia Serif Libre', var(--font-family-base);
}
.footer-nav a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--duration-normal) var(--ease-standard);
}
.footer-nav a:hover {
  color: var(--color-text);
}


.footer-nav {
  margin: var(--s-6) 0;
}

.footer-nav a {
  color: var(--bds-footer-text);
  text-decoration: none;
  margin: 0 var(--s-4);
  padding: var(--s-2) 0;
  transition: color var(--duration-fast) var(--ease-standard);
  font-weight: var(--font-weight-medium);
}

.footer-nav a:hover,
.footer-nav a:focus {
  color: var(--bds-footer-accent);
}

/* Active link styling for accessibility and cohesion */
.footer-nav a[aria-current="true"],
.footer-nav a.active {
  color: var(--bds-footer-accent);
  font-weight: var(--font-weight-bold);
}

.copyright {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin-top: var(--s-6);
}

/* Image Fade-in Animation - exclude badge images so they are not suppressed by the global fade */
img:not(.badge-animated), picture img:not(.badge-animated) {
  opacity: 0;
  animation: imgfadein 1.8s ease-in 0.4s forwards;
}

/* Ensure badge images are visible (they have their own floating/glowing animations) */
.badge-animated {
  opacity: 1;
}

@keyframes imgfadein { 
  to { opacity: 1; }
}

/* Responsive Design - Tablet */
@media (max-width: 768px) {
  main { 
    max-width: 95vw; 
    padding: 0 var(--s-4);
  }
  
  h1 { 
    font-size: var(--font-size-3xl);
  }
  
  .card {
    padding: var(--s-6) var(--s-5);
  }
  
  header nav {
    flex-wrap: wrap;
    gap: var(--s-6);
  }
  
  .about-content, 
  .legacy-cols,
  .testimonial-content {

  /* Improve readability of header links when header is transparent over varied
     hero imagery. Apply a subtle text shadow and a faint translucent backdrop
     so links remain legible on both light and dark hero images without
     changing color tokens. */
  header:not(.header--solid) nav a,
  header:not(.header--solid) .brand {
    /* prefer the canonical nav color even when header is transparent */
    color: var(--nav-pink);
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  }

  /* Add a translucent backdrop for very light hero images where text-shadow
     alone might not be sufficient. This keeps the visual effect subtle but
     improves contrast for accessibility. */
  header:not(.header--solid) nav a::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.06));
    z-index: -1;
    transform: translateZ(0);
  }

  /* Ensure positioned stacking context for the pseudo backdrop to render behind links */
  header:not(.header--solid) nav a { position: relative; }
    flex-direction: column;
    text-align: center;
  }
  
  .profile-img, 
  .testimonial-img {
    margin: 0 auto var(--s-6) auto;
  }
  
  .form-row {
    flex-direction: column;
  }
  
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .btn {
    width: 100%;
    max-width: 280px;
    text-align: center;
  }

  /* Stack CTA buttons nicely on small screens */
  .cta-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-3);
  }
  
  .legacy-diagram {
    grid-template-columns: 1fr 1fr;
  }
  
  .diagram-center {
    grid-column: 1 / -1;
    margin-bottom: var(--s-4);
  }
  
  .badge-animated {
    width: 120px;
    height: 120px;
  }
}

/* Mobile Portrait */
@media (max-width: 480px) {
  main {
    padding: 0 var(--s-2);
  }
  
  .intro {
    padding: var(--s-7) var(--s-4);
  }
  
  h1 {
    font-size: var(--font-size-2xl);
  }
  
  .subtitle {
    font-size: var(--font-size-lg);
  }
  
  header nav {
    padding: var(--s-4) var(--s-2);
    gap: var(--s-4);
  }
  
  .brand {
    font-size: var(--font-size-lg);
  }
  
  .card {
    padding: var(--s-5) var(--s-4);
  }
  
  .legacy-cols {
    gap: var(--s-4);
  }
  
  .legacy-diagram {
    gap: var(--s-2);
    grid-template-columns: 1fr;
  }
  
  .diagram-center {
    grid-column: 1;
  }
  
  .testimonial-content,
  .about-content {
    gap: var(--s-4);
  }
  
  blockquote {
    padding: var(--s-4) var(--s-5);
  }

  /* ---------- Mobile Footer Fix (≤480px) ---------- */
  /* Constrain the About card (include project-specific .bds-footer-about) */
  .about-card,
  .bds-footer-about {
    max-width: 90%;
    margin-inline: auto;
    gap: 14px;
  }

  /* Make image smaller on very small screens */
  .bds-footer-about-img {
    width: 80px;
    height: 80px;
  }

  /* Stack and center footer content on narrow viewports */
  footer,
  .footer-inner,
  .bds-footer-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Clear any legacy floats that may affect footer stacking */
  footer::after {
    content: "";
    display: table;
    clear: both;
  }
  /* ---------- End Mobile Footer Fix ---------- */
}

/* Intro overlay styles - full screen typed statement */
#intro-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.62); /* translucent so underlying content remains visible */
  backdrop-filter: blur(4px) saturate(1.02);
  -webkit-backdrop-filter: blur(4px) saturate(1.02);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 1200ms var(--ease-standard), visibility 1200ms var(--ease-standard);
}

#intro-overlay[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden;
  display: none !important;
  transform: translateX(-9999px) translateY(-9999px);
}

#intro-overlay[aria-hidden="true"] #intro-skip,
#intro-overlay[aria-hidden="true"] .intro-controls {
  display: none !important;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-9999px) translateY(-9999px);
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.intro-inner {
  max-width: 92%;
  padding: var(--s-6);
  text-align: center;
}

/* Make controls sit at the bottom of the full-screen intro overlay */
.intro-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center; /* keep heading centered vertically */
  height: 100vh; /* fill the viewport so controls can pin to bottom */
  box-sizing: border-box;
  padding-bottom: 80px; /* space for controls */
}

.intro-inner h1 {
  color: rgba(19, 52, 59, 0.98); /* dark, gentle text */
  font-family: 'Averia Serif Libre', 'Gilda Display', serif;
  font-size: clamp(28px, 6vw, 54px);
  line-height: 1.04;
  font-weight: 400;
  letter-spacing: var(--ls-normal);
  margin: 0;
  white-space: pre-wrap;
}

/* Intro overlay controls */
.intro-controls {
  margin-top: var(--s-5);
  display: flex;
  gap: var(--s-3);
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 36px; /* pinned slightly above the bottom edge */
  padding: 0 var(--s-4);
}

.intro-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: rgba(19, 52, 59, 0.85);
  font-size: var(--font-size-sm);
}

.intro-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

#intro-skip {
  background: transparent;
  border: 1px solid rgba(19,52,59,0.15);
  color: rgba(19,52,59,0.95);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-base);
}

/* Ensure skip button is completely off-screen when intro is not active */
body:not(.intro-active) #intro-skip,
body:not(.intro-active) #intro-overlay,
body:not(.intro-active) .intro-controls,
body:not(.intro-active) [id*="skip"],
body:not(.intro-active) [class*="skip"],
body:not(.intro-active) button[aria-label*="Skip"],
#intro-skip.hidden,
.intro-controls.hidden {
  display: none !important;
  position: fixed !important;
  left: -99999px !important;
  top: -99999px !important;
  transform: translateX(-99999px) translateY(-99999px) scale(0) !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: -9999 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  pointer-events: none !important;
}

#intro-skip:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Typing cursor effect using an animated pseudo-element */
.intro-typing::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1.06em;
  margin-left: 10px;
  vertical-align: middle;
  background: rgba(19, 52, 59, 0.95); /* dark cursor */
  animation: blink 1.6s steps(2,start) infinite; /* slower blink */
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/* Smooth fade class applied by JS */
.intro-fade {
  opacity: 0;
  pointer-events: none;
  transition: opacity 2000ms var(--ease-standard);
}

/* When overlay present, hide page scroll and dim underlying content slightly */
body.intro-active main,
body.intro-active header,
body.intro-active footer {
  filter: blur(0.4px) saturate(0.95);
}

/* =========================
   BDS Footer (namespaced)
   - New classes only, safe to add at end of stylesheet
   - Keeps intro animation and other site styles untouched
   ========================= */
.bds-footer-wrap {
  background: var(--bds-footer-bg); /* pale pink */
  color: var(--bds-footer-text); /* warm rust/orange for text */
  font-family: "Gilda Display", serif;
  padding: 64px 64px 80px;
  position: relative;
}

.bds-footer-grid {
  display: grid;
  /* Define explicit grid areas with a centered column for the quote */
  grid-template-columns: 1fr minmax(360px, 720px) 1fr;
  grid-template-areas: "left center right";
  align-items: start;
  justify-items: center;
  gap: 20px;
  /* Disconnect from main content with spacing and border */
  margin-top: 80px;
  padding-top: 40px;
  border-top: 1px solid rgba(155, 64, 38, 0.15);
}

/* Left column (bottom-left) */
.bds-footer-left {
  /* Pin copyright to the bottom-left inside the footer container. Use
     absolute positioning inside the footer so it remains anchored to
     the bottom-left even if center content shifts. */
  position: absolute;
  left: 24px;
  bottom: 14px;
  grid-area: left;
  display: block;
}
.bds-footer-left .bds-footer-copyright {
  margin: 0;
  color: var(--bds-footer-text);
  font-family: "Averia Serif Libre", serif;
  font-size: 16px;
}
.bds-footer-left .bds-footer-copyright a {
  color: var(--bds-footer-text);
  text-decoration: underline;
}

/* Center quote (large, italic) */
.bds-footer-center {
  grid-area: center;
  text-align: center;
  align-self: start; /* anchor near top so quote appears under about card */
  justify-self: center; /* ensure quote is centered in the grid */
  /* Remove extra padding above quote */
  padding-top: 0;
  padding-bottom: 28px;
}
.bds-footer-quote {
  margin: 0 0 6px;
  /* expose desktop size so mobile can compute 50% reliably */
  --bds-footer-quote-desktop: clamp(40px, 6vw, 72px);
  font-size: var(--bds-footer-quote-desktop);
  line-height: 0.95;
  font-style: italic;
  font-family: "Gilda Display", serif;
  color: var(--bds-footer-accent);
  letter-spacing: var(--ls-tight);
}
.bds-footer-sub {
  margin: 0;
  font-size: clamp(16px, 1.6vw, 24px);
  color: rgba(var(--bds-footer-accent-rgb),0.9);
  font-style: italic;
  font-family: "Averia Serif Libre", serif;
}

/* Right stacked brand */
.bds-footer-right {
  grid-area: right;
  align-self: end; /* pin to bottom of footer */
  justify-self: end; /* keep the brand at the right on wide screens */
  text-align: right;
}
.bds-footer-brand {
  font-family: "Gilda Display", serif;
  font-size: 28px;
  color: var(--bds-footer-accent);
  font-style: italic;
  line-height: 1.05;
  white-space: pre-line;
}

.bds-footer-about {
  /* Position inside footer, above the grid */
  position: relative;
  width: min(640px, 80%);
  max-width: 640px;
  height: auto;
  margin: 0 auto 24px auto; /* bottom margin to separate from grid content */
  overflow: visible;
  white-space: normal;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 3000; /* above everything else */
  gap: 16px;
  padding: 18px 22px;
  background: rgba(255,255,255,0.96); /* subtle card background for readability */
  box-shadow: 0 18px 48px rgba(16,24,32,0.16);
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.04);
  transition: transform 500ms cubic-bezier(.2,.9,.3,1), opacity 300ms ease, box-shadow 400ms ease;
  opacity: 0; /* JS will toggle .bds-about-visible */
}

.bds-footer-about.bds-about-visible {
  transform: translateX(-50%); /* settle into place */
  opacity: 1;
  box-shadow: 0 22px 58px rgba(16,24,32,0.18);
}

/* Reduce stacking/padding between major blocks to minimize extra bottom spacing */
.section { padding-top: 16px; padding-bottom: 8px; }
.card { margin-bottom: 16px; }

/* CSS variables to control the floating about card sizing and spacing
   - --bds-footer-overlap: how many pixels of the about card sit under the footer
   - --bds-footer-about-height: approximate visual height of the about card (used to compute spacing)
   - --bds-footer-quote-padding: extra breathing room between the visible card and the quote */
:root {
  --bds-footer-overlap: 56px;
  --bds-footer-about-height: 224px; /* adjust if card height changes */
  --bds-footer-quote-padding: 18px; /* extra space between card and quote */
}

/* main bottom padding controlled by media queries further down; keep default unchanged */

/* Spacer element used to create room above the contact section instead of negative margins
  compute height so the visible portion of the about card (above the footer)
  does not overlap the contact form */
.bds-contact-spacer { height: calc(var(--bds-footer-about-height) - var(--bds-footer-overlap) + var(--bds-footer-quote-padding) + 24px); width: 100%; display: block; }

/* Ensure footer has extra top padding so about card has room to animate into */
.bds-footer-wrap { padding-top: max(64px, calc(var(--bds-footer-about-height) - var(--bds-footer-overlap) + var(--bds-footer-quote-padding) + 12px)); }

.bds-footer-about-img {
  width: 100px;
  height: 100px;
  border-radius: 9999px;
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  display: block;
  flex-shrink: 0;
}

/* Padded container for about card content */
.about-content-container {
  padding: 24px 28px;
  width: 100%;
}

.bds-footer-about-text {
  max-width: 420px;
  color: var(--bds-footer-text);
  font-family: var(--font-heading);
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.4; /* improved readability */
}

@media (max-width: 900px) {
  /* Mobile layout: about card inside footer, above grid */
  .bds-footer-about {
    position: relative !important;
    left: auto;
    top: auto;
    transform: none !important;
    width: 100% !important; /* Full width on mobile */
    max-width: none; /* Remove max-width constraint */
    padding: 0; /* Remove padding, let about-content-container handle it */
    margin: 0 0 32px 0; /* Remove auto centering, add bottom spacing */
    z-index: 2400;
    background: rgba(255,255,255,0.96);
    box-shadow: 0 10px 30px rgba(16,24,32,0.12);
    border-radius: 0; /* Remove rounded corners on mobile */
  }
  
  .about-content-container {
    padding: 56px 20px 20px 20px; /* Top padding for slideshow, consistent side/bottom padding */
  }
  
  .bds-footer-quote { margin-top: 6px; }
  .bds-footer-wrap { padding-bottom: 24px; }
}

/* Safety rules to prevent the floating about card from covering interactive
   elements (newsletter signup / forms) on small and mid-size screens. */
@media (max-width: 900px) {
  /* Ensure newsletter section has enough bottom padding so the visible portion
     of the about card does not overlap form controls. Uses the same variables
     used to compute the contact spacer so values stay consistent. */
  .newsletter-section {
    padding-bottom: calc(var(--bds-footer-about-height) - var(--bds-footer-overlap) + var(--bds-footer-quote-padding) + 28px);
  }

  /* Keep the interactive newsletter form above the floating about card so
     focus, clicks and tooltips are never blocked. Inputs must be positioned
     to accept a z-index. */
  .newsletter-form {
    position: relative;
    z-index: 4200; /* higher than .bds-footer-about (2400) so inputs stay accessible */
  }
  .newsletter-form input,
  .newsletter-form textarea,
  .newsletter-form button {
    position: relative;
    z-index: 4201;
  }
}

/* Desktop layout adjustments */
@media (min-width: 901px) {
  /* Desktop layout: horizontal about card inside footer, above grid */
  .bds-footer-about {
    position: relative !important;
    left: auto;
    top: auto;
    transform: none !important;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 20px;
    padding: 0; /* Remove padding, let about-content-container handle it */
    width: min(720px, 85%);
    max-width: 720px;
    margin: 0 auto 40px auto; /* center and add bottom spacing */
  }
  
  .bds-footer-about-img {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
  }
  
  .about-content-container {
    padding: 24px 28px; /* Consistent padding on desktop */
  }

  .bds-footer-about-text {
    margin-top: 0;
    max-width: none;
    flex: 1;
  }
  
  .bds-footer-about-text h2 {
    margin-bottom: 8px;
    font-size: 1.5rem;
  }
  
  .bds-footer-about-text p {
    margin: 0;
    line-height: 1.4;
  }
}

/* Ensure the floating badge keeps z-order above footer */
.badge-floating {
  z-index: 15;
  display: none; /* default hidden; JS will reveal on small screens when appropriate */
  position: relative;
}

/* On larger screens, show the badge persistently as a fixed element near the footer */
@media (min-width: 901px) {
  /* On larger screens, when JS marks the badge as visible, show it as a fixed sticker */
  .badge-floating.badge-visible {
    display: block !important;
    position: fixed;
    right: 28px;
    bottom: 48px;
    z-index: 2400;
    /* Make badge container visually transparent so only the badge image shows */
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
  }
  .badge-floating.badge-visible img { display: block; width: 84px; height: auto; }
}

/* Responsive tweaks */
@media (max-width: 900px) {
  .bds-footer-wrap {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 72px 32px 48px; /* more top padding to accommodate floating about card on small screens */
    gap: 12px;
  }
  .bds-footer-left, .bds-footer-right {
    justify-self: center;
    /* Reset absolute positioning so left column participates in normal flow on small screens */
    position: static;
    left: auto;
    bottom: auto;
  }
  .bds-footer-brand {
    font-size: 22px;
  }
  .bds-footer-left .bds-footer-copyright {
    font-size: 14px;
  }
}

/* Ensure copyright stays on top of playful overlapping elements on small screens too */
@media (max-width: 900px) {
  .bds-footer-left { position: relative !important; z-index: 4100 !important; }
}

/* Nudge the floating badge up slightly on small screens so it doesn't overlap footer text */
@media (max-width: 900px) {
  .badge-floating.badge-visible {
    bottom: 84px; /* lift above footer area */
    right: 18px;
  }
}

/* -------------------------
   Mobile footer (<=768px)
   - Use flex column
   - Quote font-size = 50% of desktop
   - Copyright pinned to bottom with margin-top: auto
   - Insert visible title between quote and copyright with padding
   - Ensure vertical spacing and centered alignment
   ------------------------- */
@media (max-width: 900px) {
  /* Make footer a simple vertical flex container for predictable stacking */
  .bds-footer-wrap {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0 20px 28px; /* Remove top padding, let about-content-container handle it */
    gap: 12px;
    text-align: center;
  }
  
  /* Remove extra spacing from footer grid on mobile */
  .bds-footer-grid {
    margin-top: 40px;
    padding-top: 20px;
    border-top: none; /* Remove border on mobile for cleaner look */
  }

  /* Stack order: About (floating) remains absolute, center content stacks next */
  .bds-footer-center,
  .bds-footer-right,
  .bds-footer-left {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    grid-area: unset;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Reduce quote to 50% of desktop variable and ensure readable line-height */
  .bds-footer-quote {
    font-size: calc(var(--bds-footer-quote-desktop) * 0.5) !important;
    line-height: 1.05;
    margin: 0 0 8px;
    padding: 0 6px;
  }

  .bds-footer-sub {
    margin-bottom: 8px;
  }

  /* Insert visible title between quote and copyright by styling existing brand
     and ensuring it appears after the quote in the flow */
  .bds-footer-brand {
    order: 2;
    padding: 1rem 0;
    font-size: 20px;
    text-align: center;
  }

  /* Make sure copyright sits at the bottom of the footer area */
  .bds-footer-left {
    order: 3;
    margin-top: auto; /* push to bottom of footer container */
    padding-top: 12px;
  }

  .bds-footer-left .bds-footer-copyright {
    font-size: 13px;
    margin: 0;
  }

  /* Ensure the floating about card doesn't push layout; keep it centered and scaled */
  .bds-footer-about {
    left: 50%;
    transform: translate(-50%, -40%);
    width: calc(100% - 32px);
    max-width: 520px;
    padding: 12px 14px;
  }

  /* Tighten spacing for small screens */
  .bds-footer-wrap .bds-footer-sub,
  .bds-footer-wrap .bds-footer-quote,
  .bds-footer-wrap .bds-footer-brand {
    margin-left: auto;
    margin-right: auto;
  }

  /* Ensure the badge doesn't obscure the copyright on very small viewports */
  .badge-floating.badge-visible { bottom: 120px; }
}

/* =========================
   Uniform Spacing Utilities
   - Small, non-invasive rules appended to harmonize vertical rhythm
   - Uses existing --space-* variables and introduces a compact scale alias
   ========================= */

:root {
  /* Compact spacing aliases for utilities and rhythm */
  --s-0: var(--space-0);
  --s-1: var(--space-4);
  --s-2: var(--space-8);
  --s-3: var(--space-12);
  --s-4: var(--space-16);
  --s-5: var(--space-20);
  --s-6: var(--space-24);
  --s-7: var(--space-32);
  /* Footer palette variables (used by footer and header solid state) */
  /* Project palette (light mode) */
  --whitest-white: #f9f9f7; /* "Whitest white" / Linen */
  --linen: #f9f9f7;
  --sun-drenched: #febc99;
  --purple-pink: #e4bcc4;
  --honey: #f4c380;
  --honey-rgb: 244, 195, 128; /* RGB values for honey color */
  --terra: #9b4026;
  --dirt: #895140;
  --amber-glow: #e88e5a; /* same as terra / amber */
  --bds-black: #0c0d0d;
  --bds-grey: #1f2121;
  --grand: #16363d; /* deep blue for 'about me' text */

  /* Map semantic tokens to the project palette (Light Mode defaults) */
  --bds-footer-bg: var(--linen);
  --bds-footer-text: var(--dirt);
  --bds-footer-accent: var(--purple-pink);
  --bds-footer-accent-rgb: 228,188,196;

  /* Site-wide semantic overrides to implement the requested look */
  --color-background: var(--bds-grey); /* main body background should be grey */
  --color-text: var(--whitest-white); /* default text: whitest white */
  --color-text-hover: var(--amber-glow);
  --color-btn-primary-text: var(--bds-grey); /* button text: grey */
  --color-hero-bg: var(--bds-black);
  --color-support-bg: var(--terra);
  --color-following-bg: var(--honey);
  --color-about-bg: var(--whitest-white);
  --color-about-text: var(--grand);
}

/* Apply palette to high-level components (light mode) */
header, .bds-footer-wrap, footer {
  background: var(--bds-footer-bg);
  color: var(--bds-footer-text);
}

.bds-footer-wrap .brand,
.bds-footer-wrap nav a,
.footer-nav a,
.bds-footer-left .bds-footer-copyright {
  color: var(--bds-footer-text);
}

/* When header becomes solid (sticky), use the footer accent as background
   and swap text color to Terra so it visually echoes the footer but reversed */
.header--solid {
  background: var(--bds-footer-accent); /* purple-pink */
  /* keep header text consistent with nav color token */
  color: var(--nav-pink);
  border-bottom: 2px solid rgba(0,0,0,0.04);
  box-shadow: 0 6px 20px rgba(16,24,32,0.06);
  transition: background-color 300ms var(--ease-standard), box-shadow 300ms var(--ease-standard), border-bottom-color 300ms var(--ease-standard);
}

.header--solid .brand,
.header--solid nav a {
  color: var(--nav-pink);
}

.header--solid nav a:hover {
  color: var(--whitest-white);
  border-bottom-color: rgba(255,255,255,0.12);
}

/* Ensure body and typographic elements use the requested text color */
body, p, h1, h2, h3, h4, h5, h6, .card, .section {
  color: var(--color-text);
  background-color: transparent; /* sections get explicit backgrounds below */
}

/* Links and interactive text hover to amber glow */
a, header nav a, .footer-nav a {
  transition: color 180ms var(--ease-standard);
}
a:hover, header nav a:hover, .footer-nav a:hover {
  color: var(--color-text-hover);
}

/* Remove block/hero background so intro appears colorless and does not force white text */
.intro, .hero-container {
  background: transparent;
  background-image: none !important;
  color: inherit;
}
.intro h1, .intro p, .hero-container h1, .hero-container p {
  color: inherit;
}

/* Buttons: primary color uses Terra with whitest-white text */
.btn, .btn.secondary, .btn.secondary, .btn--primary, .btn.submit-btn {
  /* Buttons use a monospace/typewriter-style stack to read like a typewriter */
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Monaco, 'Courier New', monospace;
  background: var(--terra);
  color: var(--whitest-white);
  border-color: transparent;
}

/* Header colors consolidated earlier to use --nav-pink; remove temporary !important override */
.btn:hover, .btn.secondary:hover, .btn--primary:hover {
  filter: brightness(0.96);
}

/* Support section uses Terra */
#support, .feature-section {
  background: var(--color-support-bg);
  color: var(--whitest-white);
}

/* Make the support card use a honey background (lighter, warm) with dark text for readability.
   Use a ::before pseudo-element to create a full-bleed background while keeping the
   section's content constrained and centered. This avoids layout shifts from negative
   viewport margins and works well with existing grid/container systems. */
#support {
  position: relative;
  z-index: 0;
  /* text color stays dark for readability on the honey background */
  color: var(--grand);
  /* keep padding and layout from the .section/.card rules above */
  padding-top: calc(var(--s-6) + 24px); /* extra breathing room above the support card */
}

#support::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 100vw; /* full viewport width */
  background: var(--honey);
  z-index: -1; /* sit behind the content */
}

/* Some global .card or .section rules may add a background, border-radius, or
   overflow hidden which can clip the pseudo-element — force honey background and
   visible overflow for the #support section so the ::before can reach edge-to-edge. */
section#support, section#support.card, #support.card {
  background: var(--honey) !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* Ensure the pseudo-element doesn't inherit rounding — keep full-bleed edges */
#support::before {
  border-radius: 0 !important;
}



/* Support content and image styling */
.support-content {
  opacity: 1;
  transform: translateY(0);
}

.support-image {
  opacity: 1;
  transform: translateX(0);
  display: flex;
  align-items: center; /* center the text vertically in the grid space */
  justify-content: center; /* center text horizontally */
  height: 100%; /* fill the available height */
  min-height: 400px; /* ensure adequate vertical space */
}

.support-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.support-image:hover img {
  transform: scale(1.02);
}

/* ======= SIMPLIFIED SUPPORT SECTION LAYOUT ======= */

/* Support section: Use simple, predictable layout */
section#support,
#support {
  /* Simple container - no complex positioning */
  background: var(--honey) !important; /* force honey background */
  color: var(--grand);
  padding: var(--s-6) 0;
  margin: 0 auto;
  max-width: 100vw;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

/* Mobile: stack layout */
@media (max-width: 767px) {
  .support-content-wrapper {
    display: block; /* disable grid on mobile */
    max-width: 90vw; /* responsive mobile width */
    margin: 0 auto; /* center content */
    min-height: unset; /* remove min-height constraint on mobile */
  }
  
  .service-note-intro,
  .service-note-outro {
    grid-area: unset; /* remove grid areas on mobile */
    align-self: unset; /* remove grid alignment on mobile */
    margin: var(--s-4) 0; /* add consistent margins */
  }
  
  .support-accordion {
    grid-area: unset; /* remove grid area on mobile */
    margin: 16px auto; /* card-style margins */
    position: static; /* disable sticky on mobile */
    z-index: unset; /* reset z-index on mobile */
    max-height: unset; /* remove height constraint on mobile */
    overflow-y: unset; /* remove scroll on mobile */
    max-width: 90vw; /* ensure mobile responsiveness */
  }
  
  .support-accordion__item {
    margin-bottom: 12px; /* tighter spacing on mobile */
  }
  
  .support-accordion__summary {
    padding: 12px 16px; /* smaller padding on mobile */
  }
  
  .support-accordion__panel {
    padding: 16px; /* smaller padding on mobile */
  }
}

/* Cross-browser compatibility for card system */
.card {
  /* Fallback for older browsers */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  
  /* Safari shadow fix */
  -webkit-box-shadow: 0 2px 8px rgba(30, 30, 30, 0.12);
  -moz-box-shadow: 0 2px 8px rgba(30, 30, 30, 0.12);
  box-shadow: 0 2px 8px rgba(30, 30, 30, 0.12);
  
  /* Ensure proper rendering */
  display: block;
  position: relative;
  width: 100%;
}

.card-action button, 
.card-action input[type=submit] {
  /* Cross-browser button reset */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
  /* Consistent focus styles */
  outline: none;
  
  /* Touch target size for mobile */
  min-height: 44px;
  min-width: 44px;
}

.card-action button:focus-visible, 
.card-action input[type=submit]:focus-visible {
  outline: 2px solid #23457b;
  outline-offset: 2px;
}

/* Prevent content overflow in all browsers */
.card * {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Safari flexbox fixes */
.card-header,
.card-body,
.card-action {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

/* Tablet: adjust grid for medium screens */
@media (min-width: 768px) and (max-width: 1023px) {
  .support-content-wrapper {
    grid-template-columns: 1fr 380px; /* smaller accordion column */
    gap: var(--s-5);
  }
}

/* Desktop: enhanced grid layout */
@media (min-width: 1024px) {
  .support-content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--s-5);
    gap: var(--s-7); /* larger gap on desktop */
    grid-template-columns: 1fr 480px; /* slightly wider accordion on large screens */
  }
  
  .service-note-intro {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--s-6);
  }
  
  .service-note-outro {
    font-size: var(--font-size-2xl);
    margin-top: var(--s-6);
  }
  
  .support-accordion {
    padding: var(--s-5); /* more padding on desktop */
  }
  
  /* Larger accordion header on desktop */
  .accordion-title {
    font-size: var(--font-size-3xl);
  }
  
  .accordion-subtitle {
    font-size: var(--font-size-xl);
  }
  
}

/* New flowing text layout */
.support-content-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--s-4);
  text-align: left;
}

.service-note-intro {
  font-family: var(--font-family-base);
  font-size: var(--font-size-xl);
  line-height: 1.6;
  color: var(--grand);
  margin-bottom: var(--s-5);
  text-align: left;
  width: 75%;
  max-width: 75%;
  margin-left: auto;
  margin-right: auto;
}

.service-note-outro {
  font-family: var(--font-family-base);
  font-size: var(--font-size-xl);
  line-height: 1.6;
  color: var(--grand);
  margin-top: var(--s-5);
  text-align: left;
  width: 75%;
  max-width: 75%;
  margin-left: auto;
  margin-right: auto;
}

/* Accordion now sits within the text flow */
.support-accordion {
  margin: var(--s-5) auto; /* center the accordion */
  width: 75%; /* match text content width */
  max-width: 75%; /* ensure consistent width */
}

@media (max-width: 768px) {
  .support-accordion {
    width: 90%; /* slightly wider on mobile for better use of space */
    margin: var(--s-4) auto; /* keep centered */
  }
  
  .service-note-intro,
  .service-note-outro {
    font-size: var(--font-size-lg);
    text-align: center;
    width: 90%;
    max-width: 90%;
  }
}

/* Mid-size screen fixes */
@media (min-width: 768px) and (max-width: 1023px) {
  section#support,
  #support {
    padding: var(--s-5) 0;
    overflow-x: hidden;
    /* Reset any inherited full-bleed positioning from mobile rules */
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
}

.support-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100pt var(--s-3);
  width: 100%;
}

.support-grid {
  display: grid;
  gap: var(--s-5);
  align-items: start;
}

/* Mid-size screens: tablet layout */
@media (min-width: 768px) and (max-width: 1023px) {
  .support-grid {
    grid-template-columns: 1fr;
    gap: var(--s-5);
    max-width: 800px;
    margin: 0 auto;
  }
  
  .support-inner {
    padding: 0 var(--s-4);
    display: block;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    overflow-x: hidden;
    /* Ensure content is centered */
    box-sizing: border-box;
  }
  
  .support-image {
    max-width: 400px;
    margin: 0 auto;
  }
}

/* Desktop: side-by-side layout */
@media (min-width: 1024px) {
  .support-grid {
    grid-template-columns: 1fr 400px;
    gap: var(--s-6);
    max-width: 100%;
  }
  
  .support-inner {
    padding: 0 var(--s-4);
    display: block;
    width: 100%;
    max-width: 1200px;
  }
}

/* Large desktop: constrain width for better readability and prevent off-screen issues */
@media (min-width: 1400px) {
  .support-inner {
    max-width: 1400px;
  }
  
  .support-grid {
    grid-template-columns: 1fr 450px;
    gap: var(--s-7);
  }
}

/* Extra large screens: prevent content from becoming too wide */
@media (min-width: 1800px) {
  .support-inner {
    max-width: 1600px;
  }
}

/* Mobile: stacked layout */
@media (max-width: 767px) {
  .support-grid {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
  
  .support-image {
    order: -1; /* Image first on mobile */
  }
}

/* Desktop enhancements: better hover effects and spacing */
@media (min-width: 1024px) {
  /* Fix support section positioning */
  section#support,
  #support {
    max-width: 100vw;
    overflow-x: hidden;
    display: block;
  }
  
  .support-inner {
    padding: 0 var(--s-5);
    display: block;
    grid-template-columns: unset;
  }
  
  .support-grid {
    grid-template-columns: 1fr 450px;
    gap: var(--s-7);
  }
  
  /* Better accordion spacing on desktop */
  .support-accordion {
    gap: var(--s-4);
  }
  
  .support-accordion__item {
    transition: all 300ms var(--ease-standard);
  }
  
  .support-accordion__item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
  }
}

/* Ensure all text in support section has good contrast */
section#support .service-note,
#support .service-note {
  color: var(--grand) !important;
  background: transparent !important; /* transparent to show honey background */
  border-left: none !important; /* remove border completely */
}

/* New support content wrapper for grid layout */
.support-content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--s-4);
  display: grid;
  grid-template-columns: 1fr 450px; /* left content, right accordion */
  grid-template-areas: 
    "intro accordion"
    "outro accordion";
  gap: var(--s-6);
  align-items: start;
  min-height: 600px; /* ensure minimum height for proper layout */
}

/* Modern card header styling */
.accordion-header {
  text-align: center;
  margin-bottom: 16px; /* consistent spacing */
  padding: 0 0 16px 0;
  border-bottom: 1px solid #bdbdbd; /* subtle border for card structure */
}

.accordion-title {
  font-family: var(--font-heading);
  font-size: 1.4em; /* card header size */
  color: var(--grand);
  margin: 0 0 8px 0;
  font-weight: 700; /* bold card header */
  line-height: 1.2;
}

.accordion-subtitle {
  font-family: var(--font-family-base);
  font-size: var(--font-size-lg);
  color: #444; /* muted text color for descriptions */
  margin: 0;
  font-style: italic;
  opacity: 0.9;
  line-height: 1.4;
}

.service-note-intro {
  font-family: var(--font-family-base);
  font-size: var(--font-size-xl);
  line-height: 1.6;
  color: var(--grand);
  margin-bottom: var(--s-5);
  text-align: left;
  grid-area: intro;
  align-self: start; /* align to top of grid area */
}

.service-note-outro {
  font-family: var(--font-family-base);
  font-size: var(--font-size-xl);
  line-height: 1.6;
  color: var(--grand);
  margin-top: var(--s-5);
  text-align: left;
  grid-area: outro;
  align-self: end; /* align to bottom of grid area */
}

/* Responsive font sizes for service note to fill grid space nicely */
@media (max-width: 768px) {
  .service-note {
    font-size: var(--font-size-xl); /* slightly smaller on mobile */
    padding: var(--s-3);
    text-align: center; /* center text on mobile */
  }
  
  .support-image {
    min-height: 300px; /* reduce height on mobile */
  }
}

@media (min-width: 1024px) {
  .service-note {
    font-size: var(--font-size-3xl); /* even larger on desktop to fill the space */
    padding: var(--s-5);
    line-height: 1.4; /* tighten line height for larger text */
  }
  
  .support-image {
    min-height: 450px; /* more height on desktop */
  }
}

@media (min-width: 1400px) {
  .service-note {
    font-size: clamp(var(--font-size-3xl), 4vw, 3.5rem); /* responsive scaling on very large screens */
    padding: var(--s-6);
  }
}

section#support .support-accordion__title,
#support .support-accordion__title {
  color: var(--grand) !important;
}

section#support .support-accordion__panel,
#support .support-accordion__panel {
  color: var(--grand) !important; /* change to grand for contrast on honey */
  background: transparent !important; /* transparent to show honey background */
}

/* Ensure accordion panel paragraphs have proper spacing and are fully visible */
.support-accordion__panel p {
  margin: 0;
  padding: 0;
  line-height: 1.6; /* improved readability */
  word-wrap: break-word; /* handle long words */
  overflow-wrap: break-word; /* ensure text wraps properly */
  hyphens: auto; /* allow hyphenation for better text flow */
  width: 100%;
  box-sizing: border-box;
}

/* Subtle overlay for depth: a soft diagonal gradient and faint noise-like texture
   using CSS gradients. Kept low-contrast so text remains readable. */
#support::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 0; /* sits above the ::before background but below content */
  pointer-events: none;
  background-image: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.02) 100%);
  mix-blend-mode: multiply;
}

/* Banded variant: center a constrained honey band rather than full-bleed.
   Useful when you want the color only behind the content area. */
.support--banded {
  /* marker property so ruleset is not empty; toggles the banded styling */
  --support-banded: 1;
}
.support--banded::before {
  width: var(--measure-wide, 980px);
  left: 50%;
  transform: translateX(-50%);
  border-radius: 8px; /* optional soft corners for the band */
}

/* Full-bleed heading for the support section: spans the viewport, aligns with the
   full-bleed honey background, and remains readable. We position it outside the
   .support-inner so it can stretch, but keep padding to align with content grid. */
.support-bleed-heading {
  text-align: center;
  font-family: 'Averia Serif Libre', serif;
  font-size: clamp(1.6rem, 6vw, 2.5rem);
  line-height: 1.1;
  color: var(--grand);
  margin: 0;
  padding: 100pt var(--s-3) 0 var(--s-3);
  /* Ensure it spans full width on all screen sizes */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
}

/* Mid-size screens: balanced scaling */
@media (min-width: 768px) and (max-width: 1023px) {
  .support-bleed-heading {
    font-size: clamp(1.8rem, 5vw, 3rem);
    padding: var(--s-3) var(--s-5);
    margin-bottom: var(--s-5);
  }
}

/* Desktop: Make heading even more grand */
@media (min-width: 1024px) {
  .support-bleed-heading {
    font-size: clamp(2rem, 8vw, 4.5rem);
    padding: var(--s-4) var(--s-6);
    margin-bottom: var(--s-6);
  }
}

/* Large desktop: Maximum grandeur */
@media (min-width: 1200px) {
  .support-bleed-heading {
    font-size: clamp(2.5rem, 6vw, 5rem);
    padding: var(--s-5) var(--s-7);
    margin-bottom: var(--s-7);
    color: var(--whitest-white);
  }
}

/* About me: whitest white background with grand text */
.about-content, .bds-footer-about {
  background: var(--color-about-bg);
  color: var(--color-about-text);
}
.about-text, .bds-footer-about-text {
  color: var(--color-about-text);
}

/* Keep icy-blue/teal accents untouched (do not override --color-primary) */

/* Dark mode mapping per user's request */
[data-color-scheme="dark"] {
  /* Remap footer/header palette for dark mode */
  --bds-footer-bg: var(--terra); /* header & footer background -> terra */
  /* dirt on terra failed WCAG; use whitest-white for header/footer text in dark mode for accessibility */
  --bds-footer-text: var(--whitest-white);
  --bds-footer-accent: var(--purple-pink);
  --bds-footer-accent-rgb: 228,188,196;

  /* Text and background for dark mode */
  --color-text: var(--dirt); /* body text becomes dirt */
  --color-text-hover: var(--amber-glow);
  --color-background: var(--bds-grey);
  --color-hero-bg: var(--bds-black);

  /* Buttons remain purple-pink with grey text */
  --color-btn-primary-text: var(--bds-grey);

  /* Sections mapping preserved */
  --color-support-bg: var(--terra);
  --color-following-bg: var(--honey);
  --color-about-bg: var(--whitest-white);
  --color-about-text: var(--grand);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bds-footer-bg: var(--terra);
    --bds-footer-text: var(--whitest-white);
    --color-text: var(--dirt);
    --color-background: var(--bds-grey);
    --color-hero-bg: var(--bds-black);
    --color-btn-primary-text: var(--bds-grey);
  }
}

/* Vertical rhythm: ensure consistent spacing between blocks */
section,
.card,
.blog-post,
.blog-post-preview,
.testimonial-section,
.feature-section,
.contact-section,
.newsletter-section {
  margin-top: var(--s-4);
  margin-bottom: var(--s-5);
}

/* Headings: consistent top/bottom spacing tuned to type scale */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: var(--s-3);
}

h1 { margin-bottom: var(--s-4); }
h2 { margin-bottom: var(--s-3); }
h3 { margin-bottom: var(--s-2); }

/* Paragraphs and lists: predictable spacing */
p, ul, ol, blockquote, pre {
  margin-top: 0;
  margin-bottom: var(--s-3);
}

ul, ol {
  padding-left: var(--s-4);
}

/* Images: consistent flow spacing */
img, picture {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: 0;
  margin-bottom: var(--s-3);
}

/* Header / Footer spacing: ensure consistent internal padding */
header {
  padding-top: var(--s-2);
  padding-bottom: var(--s-2);
}

footer {
  padding-top: var(--s-5);
  padding-bottom: var(--s-5);
}

/* Small utility helpers (non-exhaustive) */
.mt-1 { margin-top: var(--s-1) !important; }
.mt-2 { margin-top: var(--s-2) !important; }
.mt-3 { margin-top: var(--s-3) !important; }
.mt-4 { margin-top: var(--s-4) !important; }
.mb-1 { margin-bottom: var(--s-1) !important; }
.mb-2 { margin-bottom: var(--s-2) !important; }
.mb-3 { margin-bottom: var(--s-3) !important; }
.mb-4 { margin-bottom: var(--s-4) !important; }
.px-2 { padding-left: var(--s-2) !important; padding-right: var(--s-2) !important; }
.px-3 { padding-left: var(--s-3) !important; padding-right: var(--s-3) !important; }
.py-2 { padding-top: var(--s-2) !important; padding-bottom: var(--s-2) !important; }
.py-3 { padding-top: var(--s-3) !important; padding-bottom: var(--s-3) !important; }

/* Make sure small inline elements don't introduce erratic spacing */
small, .small { display: inline-block; margin-top: 0; margin-bottom: 0; }

/* End uniform spacing utilities */

/* =========================
   Higher-specificity typography overrides
   - Safer long-term: uses class+element selectors to outrank component-level
     class-only rules without relying on !important.
   - Covers common layout containers so headings, paragraphs, and lists
     get the intended fonts site-wide.
   ========================= */

/* Headings (Averia) — target headings inside common containers using class+element selectors */
header h1, header h2, header h3, header h4, header h5, header h6,
.intro h1, .intro h2, .intro h3, .intro h4, .intro h5, .intro h6,
.intro-copy h1, .intro-copy h2, .intro-copy h3,
.intro-inner h1, .hero-container h1,
main h1, main h2, main h3, section h1, section h2, section h3,
.card h1, .card h2, .feature-section h1, .legacy-section h1,
.testimonial-section h1, .contact-section h1, .newsletter-section h1,
.bds-footer-wrap h1, .bds-footer-wrap h2, footer h1,
.slide-heading, .bds-footer-brand {
  font-family: 'Averia Serif Libre', serif;
}

/* Subtitles and small heading-like text */
.subtitle, .post-intro, .footer-quote, .slide-heading {
  font-family: 'Averia Serif Libre', serif;
}

/* Paragraphs & lists (Gilda) — target common containers and list wrappers */
.intro p, .intro-copy p, .intro-copy ul, .intro-copy ol,
main p, main ul, main ol, section p, section ul, section ol,
.card p, .card ul, .card ol, .feature-section p, .support-list li,
.legacy-section p, .testimonial-section p, .contact-section p,
.newsletter-section p, .bds-footer-wrap p, footer p,
.slide-columns p, .about-text p {
  font-family: 'Gilda Display', serif;
}

/* Generic fallback for any remaining paragraph/list elements — lower priority
   than the class+element selectors above but helps cover unexpected markup */
p, ul, ol, li {
  font-family: 'Gilda Display', serif;
}

/* Buttons: keep monospace/typewriter — use class+class where appropriate */
.cta-buttons .btn, .btn, button, input[type="button"], input[type="submit"], .btn a {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Monaco, 'Courier New', monospace;
}

/* Code blocks remain monospace */
code, pre, kbd {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Monaco, 'Courier New', monospace;
}

/* ================= Desktop Cloud Cards & Peek List Overrides ================= */
@media (min-width: 900px) {
  .cloud-section {
    flex-direction: column; /* Still stacked, but cards animate horizontally */
    align-items: center;
  }
  .cloud-card {
    position: relative;
    will-change: transform;
  }
  .card-legacy {
    animation: cloud-left-right 7s ease-in-out infinite alternate;
    left: -24px;
  }
  .card-testimonial {
    animation: cloud-right-left 7s ease-in-out infinite alternate;
    left: 24px;
  }
  @keyframes cloud-left-right {
    0%   { transform: translateX(-24px);}
    50%  { transform: translateX(24px);}
    100% { transform: translateX(-24px);}
  }
  @keyframes cloud-right-left {
    0%   { transform: translateX(24px);}
    50%  { transform: translateX(-24px);}
    100% { transform: translateX(24px);}
  }

  /* Peek list horizontal offset for prev/next */
  .peek-list {
    flex-direction: column;
    align-items: center;
    position: relative;
    min-height: 200px;
  }
  .list-item {
    position: relative;
    left: 0;
    z-index: 1;
  }
  .list-item.selected {
    left: 0;
    z-index: 2;
  }
  .list-item.prev {
    left: -60px;
    z-index: 1;
  }
  .list-item.next {
    left: 60px;
    z-index: 1;
  }
}