/* ==========================================================================
   EliteSingles AU - Main Stylesheet
   Converted from Tailwind CSS to vanilla CSS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
  /* Colors - Primary */
  --color-primary: #005138;
  --color-on-primary: #ffffff;
  --color-primary-container: #146b4d;
  --color-on-primary-container: #99e9c3;
  --color-inverse-primary: #87d6b2;
  --color-primary-fixed: #a3f3cd;
  --color-primary-fixed-dim: #87d6b2;
  --color-on-primary-fixed: #002114;
  --color-on-primary-fixed-variant: #005138;

  /* Colors - Secondary */
  --color-secondary: #54615b;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #d8e6de;
  --color-on-secondary-container: #5a6761;
  --color-secondary-fixed: #d8e6de;
  --color-secondary-fixed-dim: #bccac2;
  --color-on-secondary-fixed: #121e19;
  --color-on-secondary-fixed-variant: #3d4a44;

  /* Colors - Tertiary */
  --color-tertiary: #5a430e;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #735b24;
  --color-on-tertiary-container: #f6d491;
  --color-tertiary-fixed: #ffdf9f;
  --color-tertiary-fixed-dim: #e3c281;
  --color-on-tertiary-fixed: #261a00;
  --color-on-tertiary-fixed-variant: #5a430e;

  /* Colors - Surface */
  --color-surface: #fbf9f3;
  --color-surface-dim: #dcdad4;
  --color-surface-bright: #fbf9f3;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f5f3ee;
  --color-surface-container: #f0eee8;
  --color-surface-container-high: #eae8e2;
  --color-surface-container-highest: #e4e2dd;
  --color-surface-variant: #e4e2dd;
  --color-surface-tint: #146b4d;
  --color-inverse-surface: #30312d;
  --color-inverse-on-surface: #f2f1eb;

  /* Colors - On Surface */
  --color-on-surface: #1b1c19;
  --color-on-surface-variant: #3f4943;
  --color-on-background: #1b1c19;

  /* Colors - Outline */
  --color-outline: #6f7a73;
  --color-outline-variant: #bec9c1;

  /* Colors - Error */
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  /* Colors - Brand */
  --color-ivory-base: #FAF8F2;
  --color-deep-forest: #0B3D2C;
  --color-muted-gold: #C8A96A;
  --color-charcoal-text: #1F2933;
  --color-background: #fbf9f3;

  /* Typography */
  --font-headline: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Font Sizes */
  --text-headline-xl: 48px;
  --text-headline-xl-lh: 56px;
  --text-headline-xl-ls: -0.02em;
  --text-headline-xl-weight: 700;
  --text-headline-xl-mobile: 36px;
  --text-headline-xl-mobile-lh: 44px;

  --text-headline-lg: 32px;
  --text-headline-lg-lh: 40px;
  --text-headline-lg-weight: 600;

  --text-headline-lg-mobile: 28px;
  --text-headline-lg-mobile-lh: 36px;

  --text-headline-md: 24px;
  --text-headline-md-lh: 32px;
  --text-headline-md-weight: 600;
  --text-headline-md-mobile: 22px;
  --text-headline-md-mobile-lh: 30px;

  --text-body-lg: 18px;
  --text-body-lg-lh: 28px;
  --text-body-lg-weight: 400;

  --text-body-md: 16px;
  --text-body-md-lh: 24px;
  --text-body-md-weight: 400;

  --text-label-md: 14px;
  --text-label-md-lh: 20px;
  --text-label-md-ls: 0.05em;
  --text-label-md-weight: 600;

  --text-label-sm: 12px;
  --text-label-sm-lh: 16px;
  --text-label-sm-weight: 500;

  /* Spacing */
  --space-unit: 8px;
  --space-gutter: 24px;
  --space-margin-mobile: 20px;
  --space-margin-desktop: 40px;
  --container-max: 1140px;

  /* Border Radius */
  --radius-sm: 0.125rem;
  --radius-default: 0.25rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-editorial: 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-editorial-lg: 0 12px 32px -4px rgba(20, 107, 77, 0.04);
  --shadow-editorial-xl: 0 12px 40px -12px rgba(20, 107, 77, 0.08);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-slower: 700ms ease;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: var(--text-body-md-weight);
  line-height: var(--text-body-md-lh);
  color: var(--color-on-surface);
  background-color: var(--color-ivory-base);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::selection {
  background-color: var(--color-primary-fixed);
  color: var(--color-on-primary-fixed);
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* --------------------------------------------------------------------------
   3. Typography Utilities
   -------------------------------------------------------------------------- */
.font-headline { font-family: var(--font-headline); }
.font-body { font-family: var(--font-body); }

/* Headline XL */
.headline-xl {
  font-family: var(--font-headline);
  font-size: var(--text-headline-xl);
  line-height: var(--text-headline-xl-lh);
  letter-spacing: var(--text-headline-xl-ls);
  font-weight: var(--text-headline-xl-weight);
}

/* Headline LG */
.headline-lg {
  font-family: var(--font-headline);
  font-size: var(--text-headline-lg);
  line-height: var(--text-headline-lg-lh);
  font-weight: var(--text-headline-lg-weight);
}

/* Headline MD */
.headline-md {
  font-family: var(--font-headline);
  font-size: var(--text-headline-md);
  line-height: var(--text-headline-md-lh);
  font-weight: var(--text-headline-md-weight);
}

/* Body LG */
.body-lg {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg-lh);
  font-weight: var(--text-body-lg-weight);
}

/* Body MD */
.body-md {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--text-body-md-lh);
  font-weight: var(--text-body-md-weight);
}

/* Label MD */
.label-md {
  font-family: var(--font-body);
  font-size: var(--text-label-md);
  line-height: var(--text-label-md-lh);
  letter-spacing: var(--text-label-md-ls);
  font-weight: var(--text-label-md-weight);
}

/* Label SM */
.label-sm {
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  line-height: var(--text-label-sm-lh);
  font-weight: var(--text-label-sm-weight);
}

/* Text styles */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.font-normal { font-weight: 400; }

.italic { font-style: italic; }
.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }

.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }
.tracking-tighter { letter-spacing: -0.05em; }
.tracking-normal { letter-spacing: 0; }

.leading-tight { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }
.leading-none { line-height: 1; }

.underline { text-decoration: underline; }
.no-underline { text-decoration: none; }
.decoration-muted-gold { text-decoration-color: var(--color-muted-gold); }
.underline-offset-4 { text-underline-offset: 4px; }

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.first-letter\:text-5xl::first-letter {
  font-size: 3rem;
  font-family: var(--font-headline);
  color: var(--color-primary);
  margin-right: 0.75rem;
  float: left;
}

.text-4xl { font-size: 2.25rem; }
.text-3xl { font-size: 1.875rem; }
.text-2xl { font-size: 1.5rem; }
.text-xl { font-size: 1.25rem; }
.text-lg { font-size: 1.125rem; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-\[10px\] { font-size: 10px; }
.text-\[20px\] { font-size: 20px; }
.text-\[16px\] { font-size: 16px; }

/* --------------------------------------------------------------------------
   4. Color Utilities - Text
   -------------------------------------------------------------------------- */
.text-primary { color: var(--color-primary); }
.text-on-primary { color: var(--color-on-primary); }
.text-on-primary-container { color: var(--color-on-primary-container); }
.text-on-primary-fixed { color: var(--color-on-primary-fixed); }
.text-on-primary-fixed-variant { color: var(--color-on-primary-fixed-variant); }
.text-inverse-primary { color: var(--color-inverse-primary); }

.text-secondary { color: var(--color-secondary); }
.text-on-secondary { color: var(--color-on-secondary); }
.text-on-secondary-container { color: var(--color-on-secondary-container); }

.text-tertiary { color: var(--color-tertiary); }
.text-on-tertiary { color: var(--color-on-tertiary); }
.text-on-tertiary-container { color: var(--color-on-tertiary-container); }

.text-surface { color: var(--color-surface); }
.text-on-surface { color: var(--color-on-surface); }
.text-on-surface-variant { color: var(--color-on-surface-variant); }

.text-outline { color: var(--color-outline); }
.text-outline-variant { color: var(--color-outline-variant); }

.text-muted-gold { color: var(--color-muted-gold); }
.text-deep-forest { color: var(--color-deep-forest); }
.text-charcoal-text { color: var(--color-charcoal-text); }
.text-ivory-base { color: var(--color-ivory-base); }

.text-primary-fixed { color: var(--color-primary-fixed); }
.text-primary-fixed-dim { color: var(--color-primary-fixed-dim); }

.text-error { color: var(--color-error); }
.text-on-error { color: var(--color-on-error); }

.text-white { color: #ffffff; }
.text-black { color: #000000; }

/* --------------------------------------------------------------------------
   5. Color Utilities - Background
   -------------------------------------------------------------------------- */
.bg-primary { background-color: var(--color-primary); }
.bg-on-primary { background-color: var(--color-on-primary); }
.bg-primary-container { background-color: var(--color-primary-container); }
.bg-primary-fixed { background-color: var(--color-primary-fixed); }
.bg-primary-fixed-dim { background-color: var(--color-primary-fixed-dim); }

.bg-secondary { background-color: var(--color-secondary); }
.bg-secondary-container { background-color: var(--color-secondary-container); }
.bg-secondary-fixed { background-color: var(--color-secondary-fixed); }

.bg-tertiary { background-color: var(--color-tertiary); }
.bg-tertiary-container { background-color: var(--color-tertiary-container); }

.bg-surface { background-color: var(--color-surface); }
.bg-surface-bright { background-color: var(--color-surface-bright); }
.bg-surface-container { background-color: var(--color-surface-container); }
.bg-surface-container-low { background-color: var(--color-surface-container-low); }
.bg-surface-container-lowest { background-color: var(--color-surface-container-lowest); }
.bg-surface-container-high { background-color: var(--color-surface-container-high); }
.bg-surface-container-highest { background-color: var(--color-surface-container-highest); }
.bg-surface-dim { background-color: var(--color-surface-dim); }
.bg-surface-variant { background-color: var(--color-surface-variant); }
.bg-inverse-surface { background-color: var(--color-inverse-surface); }

.bg-ivory-base { background-color: var(--color-ivory-base); }
.bg-deep-forest { background-color: var(--color-deep-forest); }
.bg-muted-gold { background-color: var(--color-muted-gold); }
.bg-charcoal-text { background-color: var(--color-charcoal-text); }

.bg-error { background-color: var(--color-error); }
.bg-error-container { background-color: var(--color-error-container); }

.bg-white { background-color: #ffffff; }
.bg-transparent { background-color: transparent; }

/* --------------------------------------------------------------------------
   6. Color Utilities - Border
   -------------------------------------------------------------------------- */
.border-primary { border-color: var(--color-primary); }
.border-on-primary { border-color: var(--color-on-primary); }
.border-outline { border-color: var(--color-outline); }
.border-outline-variant { border-color: var(--color-outline-variant); }
.border-muted-gold { border-color: var(--color-muted-gold); }
.border-deep-forest { border-color: var(--color-deep-forest); }
.border-secondary-container { border-color: var(--color-secondary-container); }
.border-charcoal-text { border-color: var(--color-charcoal-text); }
.border-error { border-color: var(--color-error); }

/* --------------------------------------------------------------------------
   7. Spacing Utilities - Margin
   -------------------------------------------------------------------------- */
.m-0 { margin: 0; }
.m-auto { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.mb-10 { margin-bottom: 40px; }
.mb-12 { margin-bottom: 48px; }
.mb-16 { margin-bottom: 64px; }

.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mt-10 { margin-top: 40px; }
.mt-12 { margin-top: 48px; }
.mt-16 { margin-top: 64px; }
.mt-20 { margin-top: 80px; }
.mt-24 { margin-top: 96px; }
.mt-32 { margin-top: 128px; }

.mr-3 { margin-right: 12px; }
.ml-4 { margin-left: 16px; }

.mt-\[72px\] { margin-top: 72px; }

/* --------------------------------------------------------------------------
   8. Spacing Utilities - Padding
   -------------------------------------------------------------------------- */
.p-0 { padding: 0; }
.p-1 { padding: 4px; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.p-5 { padding: 20px; }
.p-6 { padding: 24px; }
.p-8 { padding: 32px; }
.p-10 { padding: 40px; }
.p-12 { padding: 48px; }
.p-16 { padding: 64px; }

.px-2 { padding-left: 8px; padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.px-6 { padding-left: 24px; padding-right: 24px; }
.px-8 { padding-left: 32px; padding-right: 32px; }
.px-10 { padding-left: 40px; padding-right: 40px; }
.px-12 { padding-left: 48px; padding-right: 48px; }

.py-1 { padding-top: 4px; padding-bottom: 4px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-2\.5 { padding-top: 10px; padding-bottom: 10px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.py-5 { padding-top: 20px; padding-bottom: 20px; }
.py-6 { padding-top: 24px; padding-bottom: 24px; }
.py-8 { padding-top: 32px; padding-bottom: 32px; }
.py-12 { padding-top: 48px; padding-bottom: 48px; }
.py-16 { padding-top: 64px; padding-bottom: 64px; }
.py-24 { padding-top: 96px; padding-bottom: 96px; }
.py-32 { padding-top: 128px; padding-bottom: 128px; }

.pt-2 { padding-top: 8px; }
.pt-4 { padding-top: 16px; }
.pt-8 { padding-top: 32px; }
.pt-12 { padding-top: 48px; }
.pt-20 { padding-top: 80px; }
.pt-24 { padding-top: 96px; }
.pt-32 { padding-top: 128px; }

.pb-1 { padding-bottom: 4px; }
.pb-2 { padding-bottom: 8px; }
.pb-4 { padding-bottom: 16px; }
.pb-6 { padding-bottom: 24px; }
.pb-8 { padding-bottom: 32px; }
.pb-12 { padding-bottom: 48px; }
.pb-16 { padding-bottom: 64px; }
.pb-24 { padding-bottom: 96px; }

.pr-4 { padding-right: 16px; }
.pl-4 { padding-left: 16px; }
.pl-8 { padding-left: 32px; }
.pl-12 { padding-left: 48px; }

/* Section padding */
.section-padding {
  padding-top: 80px;
  padding-bottom: 80px;
}

/* Responsive horizontal padding helpers */
.px-margin-mobile,
.px-margin-desktop {
  padding-left: var(--space-margin-mobile);
  padding-right: var(--space-margin-mobile);
}

/* --------------------------------------------------------------------------
   9. Layout Utilities
   -------------------------------------------------------------------------- */

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-margin-mobile);
  padding-right: var(--space-margin-mobile);
}

/* Display */
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.inline-flex { display: inline-flex; }
.hidden { display: none; }

/* Flex */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.flex-grow { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }

.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }

.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }

.gap-1 { gap: 4px; }
.gap-1\.5 { gap: 6px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.gap-12 { gap: 48px; }
.gap-16 { gap: 64px; }
.gap-gutter { gap: var(--space-gutter); }

/* Grid */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

.col-span-1 { grid-column: span 1 / span 1; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-7 { grid-column: span 7 / span 7; }
.col-span-8 { grid-column: span 8 / span 8; }

/* Width */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-1 { width: 4px; }
.w-1\.5 { width: 6px; }
.w-2 { width: 8px; }
.w-10 { width: 40px; }
.w-12 { width: 48px; }
.w-16 { width: 64px; }
.w-20 { width: 80px; }
.w-24 { width: 96px; }
.w-32 { width: 128px; }
.w-64 { width: 256px; }
.w-72 { width: 288px; }
.w-96 { width: 384px; }

.max-w-sm { max-width: 384px; }
.max-w-md { max-width: 448px; }
.max-w-lg { max-width: 512px; }
.max-w-xl { max-width: 576px; }
.max-w-2xl { max-width: 672px; }
.max-w-3xl { max-width: 768px; }
.max-w-4xl { max-width: 896px; }
.max-w-\[200px\] { max-width: 200px; }
.max-w-\[320px\] { max-width: 320px; }
.max-w-\[480px\] { max-width: 480px; }
.max-w-\[500px\] { max-width: 500px; }
.max-w-\[700px\] { max-width: 700px; }
.max-w-\[800px\] { max-width: 800px; }
.max-w-container-max { max-width: var(--container-max); }

/* Height */
.h-full { height: 100%; }
.h-1 { height: 4px; }
.h-1\.5 { height: 6px; }
.h-2 { height: 8px; }
.h-10 { height: 40px; }
.h-12 { height: 48px; }
.h-16 { height: 64px; }
.h-24 { height: 96px; }
.h-32 { height: 128px; }
.h-48 { height: 192px; }
.h-56 { height: 224px; }
.h-64 { height: 256px; }
.h-\[400px\] { height: 400px; }
.h-\[500px\] { height: 500px; }

.min-h-screen { min-height: 100vh; }
.min-h-\[200px\] { min-height: 200px; }
.min-h-\[716px\] { min-height: 716px; }
.min-h-\[870px\] { min-height: 870px; }

/* Aspect Ratio */
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-\[4\/5\] { aspect-ratio: 4 / 5; }

/* Order */
.order-1 { order: 1; }
.order-2 { order: 2; }

/* Self */
.self-end { align-self: flex-end; }

/* --------------------------------------------------------------------------
   10. Positioning
   -------------------------------------------------------------------------- */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }

.top-0 { top: 0; }
.top-1\/2 { top: 50%; }
.top-24 { top: 96px; }
.right-0 { right: 0; }
.right-3 { right: 12px; }
.right-4 { right: 16px; }
.bottom-0 { bottom: 0; }
.bottom-4 { bottom: 16px; }
.bottom-6 { bottom: 24px; }
.left-0 { left: 0; }
.left-1\/2 { left: 50%; }
.left-4 { left: 16px; }

.-top-4 { top: -16px; }
.-top-8 { top: -32px; }
.-left-4 { left: -16px; }
.-left-8 { left: -32px; }
.-right-6 { right: -24px; }
.-bottom-6 { bottom: -24px; }

.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }

.-translate-x-1\/2 { transform: translateX(-50%); }
.-translate-y-1\/2 { transform: translateY(-50%); }
.translate-y-20 { transform: translateY(80px); }

/* --------------------------------------------------------------------------
   11. Overflow
   -------------------------------------------------------------------------- */
.overflow-hidden { overflow: hidden; }
.overflow-x-hidden { overflow-x: hidden; }

/* --------------------------------------------------------------------------
   12. Borders & Border Radius
   -------------------------------------------------------------------------- */
.border { border: 1px solid; }
.border-0 { border: 0; }
.border-t { border-top: 1px solid; }
.border-b { border-bottom: 1px solid; }
.border-l { border-left: 1px solid; }
.border-r { border-right: 1px solid; }
.border-l-2 { border-left-width: 2px; }
.border-l-4 { border-left-width: 4px; }
.border-b-2 { border-bottom-width: 2px; }
.border-8 { border-width: 8px; }
.border-\[24px\] { border-width: 24px; }

.rounded { border-radius: var(--radius-default); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: 12px; }
.rounded-2xl { border-radius: 16px; }
.rounded-3xl { border-radius: 24px; }
.rounded-\[2\.5rem\] { border-radius: 2.5rem; }
.rounded-full { border-radius: var(--radius-full); }
.rounded-none { border-radius: 0; }

/* --------------------------------------------------------------------------
   13. Shadows
   -------------------------------------------------------------------------- */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }
.shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.editorial-shadow { box-shadow: var(--shadow-editorial); }

/* --------------------------------------------------------------------------
   14. Effects / Filters
   -------------------------------------------------------------------------- */
.opacity-0 { opacity: 0; }
.opacity-5 { opacity: 0.05; }
.opacity-10 { opacity: 0.1; }
.opacity-20 { opacity: 0.2; }
.opacity-30 { opacity: 0.3; }
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-75 { opacity: 0.75; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }
.opacity-100 { opacity: 1; }

.grayscale { filter: grayscale(100%); }
.grayscale-\[0\.2\] { filter: grayscale(0.2); }

.mix-blend-overlay { mix-blend-mode: overlay; }

/* Matte image filter */
.matte-image {
  filter: contrast(0.95) brightness(1.02) saturate(0.9);
}

/* --------------------------------------------------------------------------
   15. Transitions & Animations
   -------------------------------------------------------------------------- */
.transition-all { transition: all var(--transition-base); }
.transition-colors { transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base); }
.transition-transform { transition: transform var(--transition-base); }
.transition-opacity { transition: opacity var(--transition-base); }

.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }
.duration-700 { transition-duration: 700ms; }
.duration-1000 { transition-duration: 1000ms; }

.ease-out { transition-timing-function: ease-out; }

.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* --------------------------------------------------------------------------
   16. Hover & Focus States
   -------------------------------------------------------------------------- */
.hover\:opacity-80:hover { opacity: 0.8; }
.hover\:opacity-90:hover { opacity: 0.9; }
.hover\:underline:hover { text-decoration: underline; }
.hover\:border-primary:hover { border-color: var(--color-primary); }
.hover\:bg-primary:hover { background-color: var(--color-primary); }
.hover\:bg-primary-container\/5:hover { background-color: rgba(20, 107, 77, 0.05); }
.hover\:bg-primary-container:hover { background-color: var(--color-primary-container); }
.hover\:bg-surface-container:hover { background-color: var(--color-surface-container); }
.hover\:bg-surface-container-low:hover { background-color: var(--color-surface-container-low); }
.hover\:bg-surface-container-high:hover { background-color: var(--color-surface-container-high); }
.hover\:bg-deep-forest:hover { background-color: var(--color-deep-forest); }
.hover\:bg-white:hover { background-color: #ffffff; }
.hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, 0.1); }
.hover\:bg-on-primary-container:hover { background-color: var(--color-on-primary-container); }
.hover\:bg-primary-fixed\/10:hover { background-color: rgba(163, 243, 205, 0.1); }
.hover\:bg-primary-fixed-dim:hover { background-color: var(--color-primary-fixed-dim); }
.hover\:bg-primary-container\/10:hover { background-color: rgba(20, 107, 77, 0.1); }

.hover\:text-primary:hover { color: var(--color-primary); }
.hover\:text-white:hover { color: #ffffff; }
.hover\:text-deep-forest:hover { color: var(--color-deep-forest); }

.hover\:grayscale-0:hover { filter: grayscale(0); }

.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:scale-110:hover { transform: scale(1.1); }

.active\:scale-95:active { transform: scale(0.95); }
.active\:scale-\[0\.98\]\:active { transform: scale(0.98); }

.focus\:border-primary:focus { border-color: var(--color-primary); }
.focus\:ring-0:focus { box-shadow: none; }
.focus\:ring-1:focus { box-shadow: 0 0 0 1px; }
.focus\:ring-primary:focus { --tw-ring-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.focus\:outline-none:focus { outline: none; }

/* --------------------------------------------------------------------------
   17. Group Hover Utilities
   -------------------------------------------------------------------------- */
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
.group:hover .group-hover\:scale-110 { transform: scale(1.1); }
.group:hover .group-hover\:text-primary { color: var(--color-primary); }
.group:hover .group-hover\:translate-x-1 { transform: translateX(4px); }
.group:hover .group-hover\:gap-2 { gap: 8px; }

.group[open] .group-open\:rotate-180 { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   18. Object Fit
   -------------------------------------------------------------------------- */
.object-cover { object-fit: cover; }
.object-center { object-position: center; }
.object-top { object-position: top; }

/* --------------------------------------------------------------------------
   19. Pointer Events
   -------------------------------------------------------------------------- */
.pointer-events-none { pointer-events: none; }

/* --------------------------------------------------------------------------
   20. Whitespace
   -------------------------------------------------------------------------- */
.whitespace-nowrap { white-space: nowrap; }

/* --------------------------------------------------------------------------
   21. Word Break
   -------------------------------------------------------------------------- */
.break-words { word-wrap: break-word; }

/* ==========================================================================
   22. COMPONENT STYLES
   ========================================================================== */

/* --------------------------------------------------------------------------
   Navigation Bar
   -------------------------------------------------------------------------- */
.site-nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 50;
  background-color: rgba(250, 248, 242, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 16px var(--space-margin-mobile);
  max-width: var(--container-max);
  margin: 0 auto;
}

.nav-brand {
  font-family: var(--font-headline);
  font-size: var(--text-headline-md);
  line-height: var(--text-headline-md-lh);
  font-weight: 700;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-links {
  display: none;
  align-items: center;
  gap: 32px;
}

.nav-link {
  font-family: var(--font-body);
  font-size: var(--text-label-md);
  line-height: var(--text-label-md-lh);
  letter-spacing: var(--text-label-md-ls);
  font-weight: 600;
  color: var(--color-on-surface-variant);
  transition: color var(--transition-base);
}

.nav-link:hover {
  color: var(--color-primary);
}

.nav-link.active {
  color: var(--color-primary);
  font-weight: 700;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 4px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--text-label-md);
  line-height: var(--text-label-md-lh);
  letter-spacing: var(--text-label-md-ls);
  font-weight: 600;
  padding: 12px 24px;
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
  cursor: pointer;
  border: none;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

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

.btn-primary:active {
  transform: scale(0.95);
}

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

.btn-secondary:hover {
  background-color: rgba(20, 107, 77, 0.05);
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-on-surface-variant);
}

.btn-ghost:hover {
  color: var(--color-primary);
}

.btn-login {
  color: var(--color-on-surface-variant);
  font-family: var(--font-body);
  font-size: var(--text-label-md);
  font-weight: 600;
  padding: 8px 16px;
  transition: color var(--transition-base);
}

.btn-login:hover {
  color: var(--color-primary);
}

.btn-large {
  padding: 16px 40px;
}

.btn-xl {
  padding: 20px 48px;
}

.btn-full {
  width: 100%;
}

.btn-icon {
  padding: 8px;
  border-radius: var(--radius-lg);
}

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

.btn-white:hover {
  opacity: 0.9;
}

.btn-gold {
  background-color: var(--color-muted-gold);
  color: var(--color-deep-forest);
}

.btn-gold:hover {
  background-color: #ffffff;
}

.btn-outline-white {
  border: 1px solid rgba(163, 243, 205, 0.3);
  color: var(--color-primary-fixed);
  background: transparent;
}

.btn-outline-white:hover {
  background-color: rgba(163, 243, 205, 0.1);
}

.btn-deep-forest {
  background-color: var(--color-deep-forest);
  color: #ffffff;
}

.btn-deep-forest:hover {
  background-color: var(--color-primary);
}

/* Pill buttons (category filters) */
.btn-pill {
  padding: 10px 24px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-label-md);
  font-weight: 600;
  transition: all var(--transition-base);
}

.btn-pill.active {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.btn-pill:not(.active) {
  background-color: var(--color-surface-container);
  color: var(--color-on-surface-variant);
}

.btn-pill:not(.active):hover {
  background-color: var(--color-secondary-container);
}

/* App store buttons */
.btn-store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
}

.btn-store-dark {
  background-color: var(--color-deep-forest);
  color: #ffffff;
}

.btn-store-dark:hover {
  background-color: var(--color-primary);
}

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

.btn-store-outline:hover {
  background-color: var(--color-surface-container);
}

.app-badge-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.app-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 190px;
  min-height: 76px;
  padding: 14px 18px;
  border-radius: 16px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
}

.app-badge:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.32);
}

.app-badge-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  flex-shrink: 0;
}

.app-badge-icon .material-symbols-outlined {
  font-size: 24px;
}

.app-badge-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-badge-label {
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.app-badge-name {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
  color: #ffffff;
}

@media (min-width: 640px) {
  .app-badge {
    width: auto;
    flex: 1 1 220px;
  }
}

/* Download button (app page CTA) */
.btn-download {
  background-color: var(--color-primary-fixed);
  color: var(--color-on-primary-fixed);
  padding: 16px 48px;
  border-radius: var(--radius-lg);
  font-family: var(--font-headline);
  font-size: var(--text-headline-md);
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-base);
}

.btn-download:hover {
  background-color: #ffffff;
  transform: translateY(-2px);
}

.btn-download:active {
  transform: scale(0.95);
}

/* Pagination */
.btn-page {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-outline-variant);
  color: var(--color-on-surface-variant);
  font-weight: 500;
  transition: all var(--transition-base);
  background: transparent;
}

.btn-page.active {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
  border-color: var(--color-primary);
}

.btn-page:hover:not(.active) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
  background-color: var(--color-surface);
  padding: 32px;
  border-radius: var(--radius-default);
  border: 1px solid rgba(190, 201, 193, 0.3);
  transition: all var(--transition-base);
}

.card:hover {
  border-color: var(--color-primary);
}

.card-white {
  background-color: #ffffff;
  border: 1px solid rgba(190, 201, 193, 0.3);
  box-shadow: var(--shadow-editorial);
}

.card-feature {
  background-color: #ffffff;
  padding: 40px;
  border: 1px solid rgba(190, 201, 193, 0.3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-editorial);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.card-feature-icon {
  width: 64px;
  height: 64px;
  background-color: var(--color-secondary-container);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: 32px;
}

/* Blog card */
.blog-card {
  background-color: #ffffff;
  border: 1px solid rgba(190, 201, 193, 0.3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-editorial);
  transition: transform 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
}

.blog-card-image {
  height: 224px;
  overflow: hidden;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

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

.blog-card-body {
  padding: 24px;
}

/* City card */
.city-card {
  background-color: #ffffff;
  padding: 24px;
  border: 1px solid rgba(190, 201, 193, 0.3);
  box-shadow: var(--shadow-editorial);
  transition: all var(--transition-base);
  cursor: pointer;
}

.city-card:hover {
  border-color: var(--color-primary);
}

.city-card-image {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-bottom: 24px;
}

.city-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slower);
}

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

/* Testimonial card */
.testimonial {
  border-left: 4px solid var(--color-muted-gold);
  padding-left: 32px;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* FAQ card */
.faq-item {
  background-color: var(--color-surface);
  padding: 24px;
  border-radius: var(--radius-default);
  border: 1px solid rgba(190, 201, 193, 0.3);
  cursor: pointer;
}

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-label-md);
  font-weight: 700;
  color: var(--color-on-surface);
  list-style: none;
}

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

/* --------------------------------------------------------------------------
   Feature Cards (Why Choose Us)
   -------------------------------------------------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.feature-card {
  background-color: var(--color-surface);
  padding: 32px;
  border-radius: var(--radius-default);
  border: 1px solid rgba(190, 201, 193, 0.3);
  transition: all var(--transition-base);
}

.feature-card:hover {
  border-color: var(--color-primary);
}

.feature-card .icon {
  color: var(--color-primary);
  font-size: 2.25rem;
  margin-bottom: 24px;
  transition: transform var(--transition-base);
}

.feature-card:hover .icon {
  transform: scale(1.1);
}

/* --------------------------------------------------------------------------
   Hero Section
   -------------------------------------------------------------------------- */
.hero-section {
  position: relative;
  min-height: 870px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg-tile {
  position: absolute;
  inset: 0;
  background-image: url("../images/unnamed.webp"), url("/images/unnamed.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.18;
  filter: none;
}

.hero-bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(250, 248, 242, 0.8), rgba(250, 248, 242, 0.4), transparent);
}

.hero-overlay-soft {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(250, 248, 242, 0.18), rgba(250, 248, 242, 0.08), transparent);
}

.hero-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
}

.hero-mask-strong {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
}

.hero-content {
  position: relative;
  z-index: 10;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-margin-mobile);
  width: 100%;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

.hero-signup-card {
  background-color: var(--color-surface-bright);
  padding: 32px;
  border-radius: var(--radius-default);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(190, 201, 193, 0.3);
  max-width: 384px;
  margin-left: auto;
}

/* City hero overlay */
.hero-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(11, 61, 44, 0.4), rgba(11, 61, 44, 0.8));
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--color-surface-container-low);
  border-top: 1px solid rgba(190, 201, 193, 0.3);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-gutter);
  padding: 64px var(--space-margin-mobile);
  max-width: var(--container-max);
  margin: 0 auto;
}

.footer-brand {
  font-family: var(--font-headline);
  font-size: var(--text-headline-md);
  line-height: var(--text-headline-md-lh);
  font-weight: 700;
  color: var(--color-deep-forest);
  margin-bottom: 16px;
}

.footer-section h4,
.footer-section h5,
.footer-section h6 {
  font-family: var(--font-body);
  font-size: var(--text-label-md);
  font-weight: 700;
  color: var(--color-on-surface);
  margin-bottom: 24px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-link {
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  color: var(--color-on-surface-variant);
  transition: color var(--transition-base);
}

.footer-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-muted-gold);
  text-underline-offset: 4px;
}

.footer-bottom {
  padding: 32px var(--space-margin-mobile);
  border-top: 1px solid rgba(190, 201, 193, 0.1);
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.footer-bottom p {
  font-size: var(--text-label-sm);
  color: var(--color-on-surface-variant);
}

.footer-social {
  display: flex;
  gap: 24px;
}

.footer-social a {
  color: var(--color-on-surface-variant);
  transition: color var(--transition-base);
}

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

/* --------------------------------------------------------------------------
   Form Elements
   -------------------------------------------------------------------------- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.form-label {
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  color: var(--color-on-surface-variant);
  margin-bottom: 4px;
  display: block;
}

.form-label-md {
  font-family: var(--font-body);
  font-size: var(--text-label-md);
  color: var(--color-on-surface-variant);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 12px 16px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-default);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  color: var(--color-on-surface);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  outline: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.form-input::placeholder {
  color: var(--color-on-surface-variant);
  opacity: 0.6;
}

.form-input-icon {
  position: relative;
}

.form-input-icon .material-symbols-outlined {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-outline);
  font-size: 20px;
}

/* Global input icon wrapper — used in contact, login, and other forms */
.input-wrapper {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-outline);
  font-size: 20px;
  pointer-events: none;
  z-index: 1;
}

.form-input-icon input {
  padding-left: 48px;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236f7a73' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 20px;
  padding-right: 40px;
}

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

.form-checkbox {
  accent-color: var(--color-primary);
}

.form-error {
  border-color: var(--color-error) !important;
}

.form-hint {
  font-size: var(--text-label-sm);
  color: var(--color-on-surface-variant);
  margin-top: 4px;
}

.form-inline {
  display: flex;
  gap: 8px;
}

/* --------------------------------------------------------------------------
   Media Logos Bar
   -------------------------------------------------------------------------- */
.media-bar {
  background-color: var(--color-surface-container-low);
  padding: 32px 0;
  border-bottom: 1px solid rgba(190, 201, 193, 0.2);
}

.media-bar-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-margin-mobile);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 32px;
  opacity: 0.5;
  filter: grayscale(100%);
}

/* --------------------------------------------------------------------------
   Blog Layout
   -------------------------------------------------------------------------- */
.blog-page-main {
  padding-top: 120px;
  padding-bottom: 96px;
}

.blog-page-hero {
  margin-bottom: 56px;
}

.blog-page-filters {
  margin-bottom: 56px;
}

.blog-page-featured {
  margin-bottom: 72px;
}

.blog-page-content {
  gap: 64px;
}

.blog-page-sidebar {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.blog-page-featured-copy {
  padding: 48px;
}

.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.blog-sidebar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

/* Featured article */
.featured-article {
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
  border: 1px solid rgba(190, 201, 193, 0.3);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-editorial);
  display: flex;
  flex-direction: column;
}

.featured-article-image {
  overflow: hidden;
}

.featured-article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slower);
}

.featured-article:hover .featured-article-image img {
  transform: scale(1.05);
}

.featured-article-body {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Article Content (Blog Detail)
   -------------------------------------------------------------------------- */
.article-header {
  max-width: 800px;
  margin: 0 auto 64px;
  text-align: center;
}

.article-body {
  max-width: 700px;
  margin: 0 auto;
}

.article-body h2 {
  font-family: var(--font-headline);
  font-size: var(--text-headline-md);
  color: var(--color-deep-forest);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.article-body p {
  margin-bottom: 1.5rem;
  line-height: 1.75;
}

.article-body blockquote {
  margin: 48px 0;
  border-left: 4px solid var(--color-muted-gold);
  padding: 8px 0 8px 32px;
  font-style: italic;
  font-family: var(--font-headline);
  font-size: var(--text-headline-md);
  color: rgba(11, 61, 44, 0.8);
}

.prose-custom p {
  margin-bottom: 1.5rem;
}

.prose-custom h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

/* Table of Contents */
.toc {
  background-color: var(--color-surface-container-low);
  padding: 32px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(190, 201, 193, 0.3);
  margin-bottom: 48px;
}

.toc h3 {
  font-family: var(--font-body);
  font-size: var(--text-label-md);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.toc nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.toc a {
  color: var(--color-on-surface-variant);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color var(--transition-base);
}

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

.toc-dot {
  width: 6px;
  height: 6px;
  background-color: var(--color-muted-gold);
  border-radius: var(--radius-full);
}

/* Author bio */
.author-bio {
  margin-top: 80px;
  padding: 32px;
  background-color: var(--color-surface-container);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  border: 1px solid rgba(190, 201, 193, 0.2);
}

.author-bio img {
  width: 128px;
  height: 128px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Legal Pages
   -------------------------------------------------------------------------- */
.legal-layout {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.legal-sidebar {
  width: 100%;
  flex-shrink: 0;
}

.legal-content {
  flex: 1;
  max-width: 672px;
}

.legal-nav-btn {
  width: 100%;
  text-align: left;
  padding: 8px 16px;
  border-left: 2px solid var(--color-outline-variant);
  color: var(--color-on-surface-variant);
  transition: all var(--transition-base);
  background: none;
  cursor: pointer;
}

.legal-nav-btn:hover {
  color: var(--color-primary);
  border-left-color: var(--color-primary);
}

.legal-nav-btn.active-toc {
  color: var(--color-primary);
  font-weight: 600;
  border-left-color: var(--color-primary);
}

.prose-legal h2 {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: var(--color-primary);
}

.prose-legal p {
  margin-bottom: 1.25rem;
  color: var(--color-on-surface-variant);
  line-height: 1.75;
}

.prose-legal ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
  color: var(--color-on-surface-variant);
}

.prose-legal li {
  margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------------------
   CTA Section
   -------------------------------------------------------------------------- */
.cta-section {
  padding: 80px 0;
  background-color: var(--color-deep-forest);
  text-align: center;
}

.cta-section-inner {
  max-width: 672px;
  margin: 0 auto;
  padding: 0 var(--space-margin-mobile);
}

.cta-card {
  background-color: var(--color-surface);
  border: 1px solid rgba(190, 201, 193, 0.3);
  padding: 64px;
  border-radius: 16px;
  box-shadow: var(--shadow-editorial);
  max-width: 896px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Login Page Specific
   -------------------------------------------------------------------------- */
.login-container {
  position: relative;
  z-index: 20;
  width: 100%;
  max-width: 480px;
}

.login-card {
  background-color: var(--color-surface-container-lowest);
  box-shadow: var(--shadow-editorial-xl);
  border: 1px solid rgba(190, 201, 193, 0.3);
  border-radius: var(--radius-lg);
  padding: 40px;
}

.login-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.login-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(250, 248, 242, 0.9) 0%, rgba(216, 230, 222, 0.85) 100%);
  z-index: 10;
}

.login-bg-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 1s;
}

.login-divider {
  position: relative;
  margin: 40px 0;
}

.login-divider-line {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

.login-divider-line::before {
  content: '';
  width: 100%;
  border-top: 1px solid rgba(190, 201, 193, 0.3);
}

.login-divider-text {
  position: relative;
  display: flex;
  justify-content: center;
  font-size: var(--text-label-sm);
}

.login-divider-text span {
  background-color: var(--color-surface-container-lowest);
  padding: 0 16px;
  color: var(--color-on-surface-variant);
}

.login-trust-badges {
  margin-top: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  opacity: 0.6;
  filter: grayscale(100%);
  transition: all var(--transition-slow);
}

.login-trust-badges:hover {
  filter: grayscale(0);
}

.login-trust-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-label-sm);
}

/* --------------------------------------------------------------------------
   Login Page Redesign
   -------------------------------------------------------------------------- */
.login-page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.login-page-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 20px var(--space-margin-desktop);
  background-color: rgba(250, 248, 242, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.login-page-header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.login-page-main {
  flex: 1;
  display: flex;
  align-items: stretch;
  padding-top: 80px;
  min-height: 100vh;
}

/* Two-column split layout */
.login-split {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 48px var(--space-margin-desktop);
  gap: 48px;
}

/* Left brand panel */
.login-brand-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 0;
}

.login-brand-panel .brand-badge {
  display: inline-block;
  padding: 6px 16px;
  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 24px;
}

.login-brand-panel h1 {
  font-family: var(--font-headline);
  font-size: 44px;
  line-height: 52px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-deep-forest);
  margin-bottom: 16px;
}

.login-brand-panel .brand-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg-lh);
  color: var(--color-on-surface-variant);
  margin-bottom: 40px;
  max-width: 440px;
}

.login-brand-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 48px;
  max-width: 380px;
}

.login-brand-feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.login-brand-feature .feature-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  background-color: rgba(0, 81, 56, 0.08);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-brand-feature .feature-icon .material-symbols-outlined {
  font-size: 20px;
}

.login-brand-feature .feature-text h4 {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: 600;
  color: var(--color-on-surface);
  margin-bottom: 2px;
}

.login-brand-feature .feature-text p {
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  color: var(--color-on-surface-variant);
  line-height: 1.5;
}

.login-brand-testimonial {
  border-left: 3px solid var(--color-muted-gold);
  padding-left: 20px;
  padding-top: 4px;
  padding-bottom: 4px;
  max-width: 400px;
}

.login-brand-testimonial p {
  font-family: var(--font-headline);
  font-size: 18px;
  font-style: italic;
  color: var(--color-on-surface-variant);
  line-height: 1.6;
  margin-bottom: 8px;
}

.login-brand-testimonial span {
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  color: var(--color-on-surface-variant);
  opacity: 0.7;
}

/* Right form panel */
.login-form-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-form-card {
  width: 100%;
  max-width: 440px;
  background-color: var(--color-surface-container-lowest);
  border: 1px solid rgba(190, 201, 193, 0.3);
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.03);
}

.login-form-card .form-header {
  margin-bottom: 32px;
}

.login-form-card .form-header h2 {
  font-family: var(--font-headline);
  font-size: var(--text-headline-md);
  font-weight: 600;
  color: var(--color-deep-forest);
  margin-bottom: 8px;
}

.login-form-card .form-header p {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  color: var(--color-on-surface-variant);
}

.login-form-card .form-field {
  margin-bottom: 20px;
}

.login-form-card .form-field label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  font-weight: 600;
  color: var(--color-on-surface);
  margin-bottom: 6px;
}

.login-form-card .form-field .input-wrapper {
  position: relative;
}

.login-form-card .form-field .input-wrapper .input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-outline);
  font-size: 20px;
  pointer-events: none;
}

.login-form-card .form-field input {
  width: 100%;
  padding: 13px 14px 13px 44px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  color: var(--color-on-surface);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.login-form-card .form-field input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 81, 56, 0.08);
}

.login-form-card .form-field input::placeholder {
  color: var(--color-on-surface-variant);
  opacity: 0.5;
}

.login-form-card .form-field input.input-error {
  border-color: var(--color-error);
}

.login-form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  color: var(--color-on-surface-variant);
  cursor: pointer;
}

.login-remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.login-forgot-link {
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.login-forgot-link:hover {
  color: var(--color-deep-forest);
}

.login-submit-btn {
  width: 100%;
  padding: 14px;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: var(--text-label-md);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 8px rgba(0, 81, 56, 0.15);
}

.login-submit-btn:hover {
  background-color: var(--color-deep-forest);
  box-shadow: 0 4px 16px rgba(0, 81, 56, 0.25);
  transform: translateY(-1px);
}

.login-submit-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0, 81, 56, 0.1);
}

.login-divider-new {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 28px 0;
}

.login-divider-new::before,
.login-divider-new::after {
  content: '';
  flex: 1;
  border-top: 1px solid rgba(190, 201, 193, 0.4);
}

.login-divider-new span {
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  color: var(--color-on-surface-variant);
  opacity: 0.6;
  white-space: nowrap;
}

.login-social-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 28px;
}

.login-social-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  background-color: transparent;
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  font-weight: 500;
  color: var(--color-on-surface);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.login-social-btn:hover {
  background-color: var(--color-surface-container);
  border-color: var(--color-outline);
}

.login-social-btn img {
  width: 20px;
  height: 20px;
}

.login-signup-prompt {
  text-align: center;
  margin-top: 8px;
}

.login-signup-prompt p {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  color: var(--color-on-surface-variant);
  margin-bottom: 8px;
}

.login-signup-prompt a {
  font-family: var(--font-body);
  font-size: var(--text-label-md);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.login-signup-prompt a:hover {
  color: var(--color-deep-forest);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* FAQ Section on Login Page */
.login-faq-section {
  padding: 80px var(--space-margin-desktop);
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
}

.login-faq-section .faq-header {
  text-align: center;
  margin-bottom: 48px;
}

.login-faq-section .faq-header h2 {
  font-family: var(--font-headline);
  font-size: var(--text-headline-lg);
  font-weight: 600;
  color: var(--color-deep-forest);
  margin-bottom: 12px;
}

.login-faq-section .faq-header p {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  color: var(--color-on-surface-variant);
}

.login-faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}

.login-faq-item {
  background-color: var(--color-surface);
  border: 1px solid rgba(190, 201, 193, 0.3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.login-faq-item:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.login-faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: 600;
  color: var(--color-on-surface);
  list-style: none;
  cursor: pointer;
  user-select: none;
}

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

.login-faq-item summary .faq-icon {
  flex-shrink: 0;
  color: var(--color-on-surface-variant);
  transition: transform var(--transition-base);
  font-size: 20px;
}

.login-faq-item[open] summary .faq-icon {
  transform: rotate(180deg);
  color: var(--color-primary);
}

.login-faq-item .faq-answer {
  padding: 0 24px 20px 24px;
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: 1.7;
  color: var(--color-on-surface-variant);
}

.login-faq-item .faq-answer a {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.login-faq-item .faq-answer a:hover {
  color: var(--color-deep-forest);
}

/* Login page footer */
.login-page-footer {
  background-color: var(--color-surface-container-low);
  border-top: 1px solid rgba(190, 201, 193, 0.2);
  padding: 28px var(--space-margin-desktop);
}

.login-page-footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Login page responsive */
@media (max-width: 767px) {
  .login-split {
    padding: 24px var(--space-margin-mobile);
    gap: 32px;
  }

  .login-brand-panel {
    text-align: center;
    align-items: center;
    padding: 10px 0;
  }

  .login-brand-panel h1 {
    font-size: 36px;
    line-height: 44px;
  }

  .login-brand-panel .brand-subtitle {
    font-size: 17px;
    margin-bottom: 28px;
  }

  .login-brand-features {
    align-items: center;
    text-align: left;
    margin-bottom: 32px;
  }

  .login-brand-testimonial {
    text-align: left;
  }

  .login-form-card {
    padding: 28px 24px;
    max-width: 100%;
  }

  .login-faq-section {
    padding: 56px var(--space-margin-mobile);
  }

  .login-social-buttons {
    flex-direction: column;
  }

  .login-page-header {
    padding: 16px var(--space-margin-mobile);
  }
}

@media (min-width: 768px) {
  .login-split {
    flex-direction: row;
    gap: 64px;
  }

  .login-brand-panel {
    padding: 40px 0;
  }

  .login-form-panel {
    align-items: flex-start;
    padding-top: 40px;
  }

  .login-faq-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .login-page-footer-inner {
    flex-direction: row;
    justify-content: space-between;
  }
}

@media (min-width: 1024px) {
  .login-split {
    gap: 80px;
  }

  .login-brand-panel h1 {
    font-size: 52px;
    line-height: 60px;
  }

  .login-form-card {
    padding: 48px;
  }
}

/* --------------------------------------------------------------------------
   Contact Page
   -------------------------------------------------------------------------- */

/* Hero */
.contact-hero {
  padding: 140px var(--space-margin-desktop) 72px;
  max-width: var(--container-max);
  margin: 0 auto;
  text-align: center;
}

.contact-hero-inner {
  max-width: 680px;
  margin: 0 auto;
}

.contact-hero-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg-lh);
  color: var(--color-on-surface-variant);
  max-width: 600px;
  margin: 0 auto;
}

/* Form section — full width, generous spacing */
.contact-form-section {
  max-width: 800px;
  margin: 0 auto 80px;
  padding: 0 var(--space-margin-desktop);
}

.contact-form-wrapper {
  width: 100%;
}

.contact-form-card {
  background-color: var(--color-surface-container-lowest);
  border: 1px solid rgba(190, 201, 193, 0.25);
  border-radius: 16px;
  padding: 48px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02);
}

.contact-form-header {
  margin-bottom: 40px;
}

/* Form row: name + email side by side */
.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 28px;
}

/* Individual form field spacing */
.contact-form .form-field {
  margin-bottom: 28px;
}

.contact-form .form-field label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  font-weight: 600;
  color: var(--color-on-surface);
  margin-bottom: 8px;
}

.contact-form .form-field input,
.contact-form .form-field select {
  width: 100%;
  padding: 14px 16px 14px 46px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  color: var(--color-on-surface);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-form .form-field input:focus,
.contact-form .form-field select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 81, 56, 0.08);
}

.contact-form .form-field input::placeholder,
.contact-form .form-field select::placeholder {
  color: var(--color-on-surface-variant);
  opacity: 0.45;
}

/* Submit row */
.contact-form-submit-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 8px;
}

.contact-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 40px;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: var(--text-label-md);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 12px rgba(0, 81, 56, 0.18);
  white-space: nowrap;
}

.contact-submit-btn:hover {
  background-color: var(--color-deep-forest);
  box-shadow: 0 6px 20px rgba(0, 81, 56, 0.28);
  transform: translateY(-1px);
}

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

.contact-form-trust {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  color: var(--color-on-surface-variant);
  opacity: 0.6;
}

/* Textarea in contact form */
.contact-form .form-field textarea {
  width: 100%;
  padding: 14px 16px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  color: var(--color-on-surface);
  outline: none;
  resize: vertical;
  min-height: 150px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-form .form-field textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 81, 56, 0.08);
}

.contact-form .form-field textarea::placeholder {
  color: var(--color-on-surface-variant);
  opacity: 0.45;
}

/* Select wrapper */
.select-wrapper select {
  padding-right: 48px;
  cursor: pointer;
  appearance: none;
}

.select-chevron {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-outline);
  font-size: 20px;
  pointer-events: none;
}

/* Info cards section */
.contact-info-section {
  max-width: var(--container-max);
  margin: 0 auto 80px;
  padding: 0 var(--space-margin-desktop);
}

/* Info card — now a vertical card, not just flex row */
.contact-info-card {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  background-color: var(--color-surface-container-lowest);
  border: 1px solid rgba(190, 201, 193, 0.25);
  border-radius: 16px;
  box-shadow: var(--shadow-editorial);
  transition: all var(--transition-fast);
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.contact-info-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.contact-info-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.contact-info-icon .material-symbols-outlined {
  font-size: 24px;
}

.contact-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--text-label-md);
  font-weight: 600;
  color: var(--color-primary);
  margin-top: auto;
  transition: color var(--transition-fast);
}

.contact-card-link:hover {
  color: var(--color-deep-forest);
}

/* Quick links */
.quick-link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  color: var(--color-on-surface-variant);
  transition: color var(--transition-fast);
  text-decoration: none;
}

.quick-link:hover {
  color: var(--color-primary);
}

@media (max-width: 767px) {
  .contact-hero {
    padding: 120px var(--space-margin-mobile) 48px;
  }

  .contact-hero-subtitle {
    font-size: 17px;
  }

  .contact-form-section {
    padding: 0 var(--space-margin-mobile);
    margin-bottom: 56px;
  }

  .contact-form-card {
    padding: 28px 20px;
  }

  .contact-form-header {
    margin-bottom: 28px;
  }

  .contact-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .contact-form .form-field {
    margin-bottom: 20px;
  }

  .contact-form-submit-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .contact-submit-btn {
    width: 100%;
  }

  .contact-info-section {
    padding: 0 var(--space-margin-mobile);
    margin-bottom: 56px;
  }

  .contact-info-card {
    padding: 24px 20px;
  }

  .contact-info-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
  }
}

/* --------------------------------------------------------------------------
   Bento Grid (About page)
   -------------------------------------------------------------------------- */
.bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-gutter);
}

.bento-card {
  border: 1px solid rgba(190, 201, 193, 0.3);
  border-radius: var(--radius-xl);
  padding: 40px;
  transition: all var(--transition-base);
}

.bento-card-dark {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.bento-card-dark:hover {
  background-color: var(--color-primary-container);
}

/* --------------------------------------------------------------------------
   Process Steps (How It Works)
   -------------------------------------------------------------------------- */
.process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

.process-step {
  position: relative;
}

.process-step-header {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.step-line {
  height: 1px;
  flex-grow: 1;
  background-color: rgba(190, 201, 193, 0.3);
  display: none;
}

/* --------------------------------------------------------------------------
   City Grid (Home & Local Dating)
   -------------------------------------------------------------------------- */
.city-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.city-hero-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-default);
  height: 256px;
  display: block;
}

.city-hero-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

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

.city-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 61, 44, 0.8), transparent);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
}

.city-hero-overlay h4 {
  color: var(--color-on-primary);
  font-family: var(--font-headline);
  font-size: var(--text-headline-md);
}

.city-hero-overlay p {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--text-label-sm);
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */
.sidebar-section {
  margin-bottom: 48px;
}

.sidebar-section h4 {
  font-family: var(--font-body);
  font-size: var(--text-label-md);
  color: var(--color-deep-forest);
  margin-bottom: 16px;
}

.search-box {
  position: relative;
}

.search-box input {
  width: 100%;
  padding: 12px 40px 12px 16px;
  background-color: #ffffff;
  border: 1px solid rgba(190, 201, 193, 0.5);
  border-radius: var(--radius-lg);
  outline: none;
  font-size: var(--text-body-md);
  transition: border-color var(--transition-base);
}

.search-box input:focus {
  border-color: var(--color-primary);
}

.search-box button {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-on-surface-variant);
  background: none;
  border: none;
  cursor: pointer;
}

/* Popular list */
.popular-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.popular-item {
  display: flex;
  gap: 16px;
  cursor: pointer;
}

.popular-item .num {
  font-family: var(--font-headline);
  font-size: var(--text-headline-md);
  color: var(--color-muted-gold);
  opacity: 0.3;
}

.popular-item:hover .num {
  opacity: 0.5;
}

.popular-item h5 {
  font-size: var(--text-label-md);
  color: var(--color-deep-forest);
  transition: color var(--transition-base);
}

.popular-item:hover h5 {
  color: var(--color-primary);
}

/* Tag cloud */
.tag-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.tag {
  background-color: #ffffff;
  border: 1px solid rgba(190, 201, 193, 0.3);
  padding: 8px 12px;
  text-align: center;
  border-radius: var(--radius-default);
  font-size: var(--text-label-sm);
  transition: border-color var(--transition-base);
}

.tag:hover {
  border-color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Newsletter (Blog Sidebar)
   -------------------------------------------------------------------------- */
.newsletter-card {
  background-color: var(--color-deep-forest);
  padding: 32px;
  border-radius: var(--radius-lg);
  color: #ffffff;
}

.newsletter-card h4 {
  font-family: var(--font-headline);
  font-size: var(--text-headline-md);
  margin-bottom: 16px;
}

.newsletter-card p {
  font-size: var(--text-body-md);
  color: var(--color-on-primary-container);
  margin-bottom: 24px;
}

.newsletter-card input {
  width: 100%;
  padding: 12px 16px;
  background-color: rgba(20, 107, 77, 0.2);
  border: 1px solid rgba(153, 233, 195, 0.3);
  border-radius: var(--radius-lg);
  color: #ffffff;
  outline: none;
  margin-bottom: 16px;
}

.newsletter-card input::placeholder {
  color: var(--color-on-primary-container);
}

.newsletter-card input:focus {
  border-color: var(--color-primary-fixed);
}

.newsletter-card button {
  width: 100%;
  background-color: var(--color-primary-fixed);
  color: var(--color-on-primary-fixed);
  font-weight: 700;
  padding: 12px;
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
  border: none;
  cursor: pointer;
}

.newsletter-card button:hover {
  background-color: var(--color-primary-fixed-dim);
}

/* --------------------------------------------------------------------------
   Material Symbols Base
   -------------------------------------------------------------------------- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}

.material-symbols-outlined.fill {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* --------------------------------------------------------------------------
   Scroll-triggered animations
   -------------------------------------------------------------------------- */
.animate-on-scroll {
  transition: all 1s ease-out;
  opacity: 0;
  transform: translateY(40px);
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-on-scroll-sm {
  transition: all 0.7s ease-out;
  opacity: 0;
  transform: translateY(32px);
}

.animate-on-scroll-sm.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Misc Utilities
   -------------------------------------------------------------------------- */
.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;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-none {
  list-style-type: none;
}

.appearance-none {
  appearance: none;
}

.resize-none {
  resize: none;
}

.select-none {
  user-select: none;
}

.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

/* Blur effects */
.blur-3xl { filter: blur(64px); }

/* Backdrop blur */
.backdrop-blur-md {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Decorative accent square */
.accent-square {
  position: absolute;
  top: -16px;
  left: -16px;
  width: 96px;
  height: 96px;
  background-color: rgba(200, 169, 106, 0.1);
  z-index: -10;
}

/* Border with opacity variants */
.border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
.border-on-primary\/20 { border-color: rgba(255, 255, 255, 0.2); }
.border-on-primary\/30 { border-color: rgba(255, 255, 255, 0.3); }
.border-outline\/20 { border-color: rgba(111, 122, 115, 0.2); }
.border-outline-variant\/10 { border-color: rgba(190, 201, 193, 0.1); }
.border-outline-variant\/20 { border-color: rgba(190, 201, 193, 0.2); }
.border-outline-variant\/30 { border-color: rgba(190, 201, 193, 0.3); }
.border-outline-variant\/50 { border-color: rgba(190, 201, 193, 0.5); }
.border-primary\/10 { border-color: rgba(0, 81, 56, 0.1); }
.border-primary-fixed\/30 { border-color: rgba(163, 243, 205, 0.3); }
.border-tertiary-container\/20 { border-color: rgba(115, 91, 36, 0.2); }

/* Background opacity variants */
.bg-primary\/5 { background-color: rgba(0, 81, 56, 0.05); }
.bg-primary\/10 { background-color: rgba(0, 81, 56, 0.1); }
.bg-primary\/40 { background-color: rgba(0, 81, 56, 0.4); }
.bg-on-primary\/20 { background-color: rgba(255, 255, 255, 0.2); }
.bg-white\/5 { background-color: rgba(255, 255, 255, 0.05); }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.bg-deep-forest\/80 { background-color: rgba(11, 61, 44, 0.8); }
.bg-muted-gold\/10 { background-color: rgba(200, 169, 106, 0.1); }
.bg-primary-container\/20 { background-color: rgba(20, 107, 77, 0.2); }
.bg-tertiary\/10 { background-color: rgba(90, 67, 14, 0.1); }
.bg-tertiary-container\/10 { background-color: rgba(115, 91, 36, 0.1); }
.bg-secondary-container\/30 { background-color: rgba(216, 230, 222, 0.3); }

/* Opacity variants for text */
.text-on-primary\/80 { color: rgba(255, 255, 255, 0.8); }
.text-on-primary-container\/60 { color: rgba(153, 233, 195, 0.6); }
.text-on-surface-variant\/60 { color: rgba(63, 73, 67, 0.6); }
.text-on-surface-variant\/70 { color: rgba(63, 73, 67, 0.7); }
.text-deep-forest\/80 { color: rgba(11, 61, 44, 0.8); }
.text-on-secondary-container { color: var(--color-on-secondary-container); }

/* Background position/size */
.bg-cover { background-size: cover; }
.bg-center { background-position: center; }

/* Gradient backgrounds */
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-ivory-base\/80 { --tw-gradient-from: rgba(250, 248, 242, 0.8); }
.via-ivory-base\/40 { --tw-gradient-via: rgba(250, 248, 242, 0.4); }
.to-transparent { --tw-gradient-to: transparent; }
.from-deep-forest\/80 { --tw-gradient-from: rgba(11, 61, 44, 0.8); }

/* ==========================================================================
   23. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* sm: 640px */
@media (min-width: 640px) {
  .sm\:block { display: block; }
  .sm\:flex-row { flex-direction: row; }
  .sm\:w-auto { width: auto; }
}

@media (max-width: 767px) {
  .headline-xl {
    font-size: var(--text-headline-xl-mobile);
    line-height: var(--text-headline-xl-mobile-lh);
  }

  .headline-lg {
    font-size: var(--text-headline-lg-mobile);
    line-height: var(--text-headline-lg-mobile-lh);
  }

  .headline-md {
    font-size: var(--text-headline-md-mobile);
    line-height: var(--text-headline-md-mobile-lh);
  }

  .body-lg {
    font-size: 17px;
    line-height: 28px;
  }

  .section-padding {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .py-24 {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .py-32 {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .pt-24 { padding-top: 72px; }
  .pt-32 { padding-top: 88px; }
  .pb-24 { padding-bottom: 72px; }
  .mt-24 { margin-top: 56px; }
  .mt-32 { margin-top: 72px; }

  .gap-12 { gap: 32px; }
  .gap-16 { gap: 40px; }

  .min-h-\[716px\] {
    min-height: 560px;
  }

  .min-h-\[870px\] {
    min-height: 700px;
  }

  .hero-section {
    min-height: 700px;
  }

  .hero-grid {
    gap: 32px;
  }

  .card,
  .card-feature,
  .feature-card,
  .featured-article-body,
  .toc,
  .author-bio,
  .cta-card,
  .login-card,
  .newsletter-card,
  .bento-card,
  .faq-item {
    padding: 24px;
  }

  .city-card,
  .city-hero-overlay {
    padding: 20px;
  }

  .city-hero-card {
    height: 220px;
  }

  .testimonial {
    padding-left: 20px;
  }

  .footer-grid {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .blog-page-main {
    padding-top: 96px;
    padding-bottom: 72px;
  }

  .blog-page-hero,
  .blog-page-filters {
    margin-bottom: 40px;
  }

  .blog-page-featured {
    margin-bottom: 48px;
  }

  .blog-page-content {
    gap: 40px;
  }

  .blog-page-featured-copy {
    padding: 24px;
  }
}

/* md: 768px */
@media (min-width: 768px) {
  .container {
    padding-left: var(--space-margin-desktop);
    padding-right: var(--space-margin-desktop);
  }

  .px-margin-desktop {
    padding-left: var(--space-margin-desktop);
    padding-right: var(--space-margin-desktop);
  }

  .nav-container {
    padding-left: var(--space-margin-desktop);
    padding-right: var(--space-margin-desktop);
  }

  .hero-content {
    padding-left: var(--space-margin-desktop);
    padding-right: var(--space-margin-desktop);
  }

  .footer-grid {
    padding-left: var(--space-margin-desktop);
    padding-right: var(--space-margin-desktop);
  }

  .footer-bottom {
    padding-left: var(--space-margin-desktop);
    padding-right: var(--space-margin-desktop);
  }

  .media-bar-inner {
    padding-left: var(--space-margin-desktop);
    padding-right: var(--space-margin-desktop);
  }

  .cta-section-inner {
    padding-left: var(--space-margin-desktop);
    padding-right: var(--space-margin-desktop);
  }

  .md\:block { display: block; }
  .md\:flex { display: flex; }
  .md\:hidden { display: none; }

  .md\:flex-row { flex-direction: row; }
  .md\:flex-col { flex-direction: column; }

  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .md\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

  .md\:col-span-1 { grid-column: span 1 / span 1; }
  .md\:col-span-4 { grid-column: span 4 / span 4; }
  .md\:col-span-8 { grid-column: span 8 / span 8; }

  .md\:w-1\/2 { width: 50%; }
  .md\:w-3\/5 { width: 60%; }
  .md\:w-2\/5 { width: 40%; }
  .md\:w-64 { width: 256px; }
  .md\:w-auto { width: auto; }

  .md\:order-1 { order: 1; }
  .md\:order-2 { order: 2; }

  .md\:text-left { text-align: left; }
  .md\:text-right { text-align: right; }

  .md\:mt-0 { margin-top: 0; }
  .md\:px-0 { padding-left: 0; padding-right: 0; }
  .md\:p-12 { padding: 48px; }
  .md\:px-margin-desktop { padding-left: var(--space-margin-desktop); padding-right: var(--space-margin-desktop); }

  .md\:gap-16 { gap: 64px; }

  .process-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-bottom { flex-direction: row; justify-content: space-between; }

  .nav-links { display: flex; }
  .step-line { display: block; }

  .blog-grid { grid-template-columns: repeat(2, 1fr); }

  .featured-article { flex-direction: row; }
  .featured-article-image { width: 60%; }

  .bento-grid { grid-template-columns: repeat(12, 1fr); }

  .legal-layout { flex-direction: row; }
  .legal-sidebar { width: 256px; }

  .author-bio { flex-direction: row; }
  .login-card { padding: 48px; }

  .city-grid { grid-template-columns: repeat(3, 1fr); }
}

/* lg: 1024px */
@media (min-width: 1024px) {
  .lg\:block { display: block; }
  .lg\:flex { display: flex; }
  .lg\:hidden { display: none; }

  .lg\:flex-row { flex-direction: row; }

  .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

  .lg\:col-span-1 { grid-column: span 1 / span 1; }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:col-span-5 { grid-column: span 5 / span 5; }
  .lg\:col-span-7 { grid-column: span 7 / span 7; }
  .lg\:col-span-8 { grid-column: span 8 / span 8; }

  .lg\:w-1\/2 { width: 50%; }
  .lg\:w-96 { width: 384px; }

  .lg\:justify-end { justify-content: flex-end; }

  .lg\:py-32 { padding-top: 128px; padding-bottom: 128px; }
  .lg\:pt-48 { padding-top: 192px; }

  .lg\:translate-y-32 { transform: translateY(128px); }

  .hero-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(4, 1fr); }
  .blog-sidebar-grid { grid-template-columns: repeat(12, 1fr); }
  .city-grid { grid-template-columns: repeat(4, 1fr); }
}

/* 2xl: 1280px */
@media (min-width: 1280px) {
  .\32xl\:mx-auto { margin-left: auto; margin-right: auto; }
}

/* --------------------------------------------------------------------------
   FAQ Page
   -------------------------------------------------------------------------- */
.faq-page-hero {
  padding: 120px var(--space-margin-desktop) 64px;
  max-width: var(--container-max);
  margin: 0 auto;
  text-align: center;
}

.faq-page-hero .faq-badge {
  display: inline-block;
  padding: 6px 18px;
  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
  border-radius: var(--radius-full);
  font-size: var(--text-label-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}

.faq-page-hero h1 {
  font-family: var(--font-headline);
  font-size: var(--text-headline-xl);
  line-height: var(--text-headline-xl-lh);
  letter-spacing: var(--text-headline-xl-ls);
  font-weight: var(--text-headline-xl-weight);
  color: var(--color-deep-forest);
  margin-bottom: 16px;
}

.faq-page-hero .faq-hero-sub {
  font-size: var(--text-body-lg);
  color: var(--color-on-surface-variant);
  max-width: 560px;
  margin: 0 auto 32px;
}

.faq-search-wrapper {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
}

.faq-search-wrapper input {
  width: 100%;
  padding: 15px 20px 15px 50px;
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-xl);
  font-size: var(--text-body-md);
  color: var(--color-on-surface);
  outline: none;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}

.faq-search-wrapper input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 2px 16px rgba(0, 81, 56, 0.08);
}

.faq-search-wrapper input::placeholder {
  color: var(--color-on-surface-variant);
  opacity: 0.5;
}

.faq-search-wrapper .search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-outline);
  font-size: 22px;
  pointer-events: none;
}

/* FAQ Categories */
.faq-categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: var(--container-max);
  margin: 0 auto 48px;
  padding: 0 var(--space-margin-desktop);
}

.faq-cat-btn {
  padding: 10px 22px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-outline-variant);
  background-color: transparent;
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  font-weight: 600;
  color: var(--color-on-surface-variant);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.faq-cat-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background-color: rgba(0, 81, 56, 0.03);
}

.faq-cat-btn.active {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}

/* FAQ Content Area */
.faq-page-content {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--space-margin-desktop) 80px;
}

.faq-category-group {
  margin-bottom: 48px;
}

.faq-category-group:last-child {
  margin-bottom: 0;
}

.faq-category-group .cat-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-secondary-container);
}

.faq-category-group .cat-title .cat-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  background-color: rgba(0, 81, 56, 0.08);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.faq-category-group .cat-title .cat-icon .material-symbols-outlined {
  font-size: 22px;
}

.faq-category-group .cat-title h3 {
  font-family: var(--font-headline);
  font-size: var(--text-headline-md);
  font-weight: 600;
  color: var(--color-deep-forest);
}

.faq-category-group .cat-counter {
  margin-left: auto;
  font-size: var(--text-label-sm);
  color: var(--color-on-surface-variant);
  opacity: 0.6;
}

/* FAQ accordion items on FAQ page */
.faq-page-item {
  background-color: var(--color-surface);
  border: 1px solid rgba(190, 201, 193, 0.3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.faq-page-item + .faq-page-item {
  margin-top: 10px;
}

.faq-page-item:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.faq-page-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: 600;
  color: var(--color-on-surface);
  list-style: none;
  cursor: pointer;
  user-select: none;
}

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

.faq-page-item summary .faq-chevron {
  flex-shrink: 0;
  color: var(--color-on-surface-variant);
  transition: transform var(--transition-base);
  font-size: 20px;
  margin-left: 16px;
}

.faq-page-item[open] summary .faq-chevron {
  transform: rotate(180deg);
  color: var(--color-primary);
}

.faq-page-item[open] summary {
  color: var(--color-primary);
}

.faq-page-item .faq-answer {
  padding: 0 24px 20px 24px;
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: 1.7;
  color: var(--color-on-surface-variant);
}

.faq-page-item .faq-answer a {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.faq-page-item .faq-answer a:hover {
  color: var(--color-deep-forest);
}

.faq-page-item .faq-answer ul {
  list-style: disc;
  padding-left: 20px;
  margin: 8px 0;
}

.faq-page-item .faq-answer ul li {
  margin-bottom: 6px;
}

/* FAQ CTA */
.faq-cta-card {
  max-width: 860px;
  margin: 0 auto 80px;
  padding: 0 var(--space-margin-desktop);
}

.faq-cta-inner {
  background-color: var(--color-deep-forest);
  border-radius: 16px;
  padding: 48px;
  text-align: center;
  color: #ffffff;
}

.faq-cta-inner h3 {
  font-family: var(--font-headline);
  font-size: var(--text-headline-md);
  margin-bottom: 12px;
}

.faq-cta-inner p {
  font-size: var(--text-body-md);
  color: var(--color-on-primary-container);
  max-width: 500px;
  margin: 0 auto 24px;
  line-height: 1.6;
}

.faq-cta-inner .cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.faq-cta-inner .btn-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background-color: var(--color-primary-fixed);
  color: var(--color-on-primary-fixed);
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: var(--text-label-md);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.faq-cta-inner .btn-cta-primary:hover {
  background-color: #ffffff;
  transform: translateY(-1px);
}

.faq-cta-inner .btn-cta-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: var(--text-label-md);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.faq-cta-inner .btn-cta-outline:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

/* FAQ no results */
.faq-no-results {
  display: none;
  text-align: center;
  padding: 40px 20px;
}

.faq-no-results.visible {
  display: block;
}

.faq-no-results .material-symbols-outlined {
  font-size: 48px;
  color: var(--color-outline-variant);
  margin-bottom: 16px;
}

.faq-no-results h4 {
  font-family: var(--font-headline);
  font-size: var(--text-headline-md);
  color: var(--color-on-surface);
  margin-bottom: 8px;
}

.faq-no-results p {
  color: var(--color-on-surface-variant);
}

/* FAQ responsive */
@media (max-width: 767px) {
  .faq-page-hero {
    padding: 100px var(--space-margin-mobile) 48px;
  }

  .faq-page-hero h1 {
    font-size: var(--text-headline-xl-mobile);
    line-height: var(--text-headline-xl-mobile-lh);
  }

  .faq-categories {
    padding: 0 var(--space-margin-mobile);
    gap: 8px;
    margin-bottom: 32px;
  }

  .faq-cat-btn {
    padding: 8px 16px;
    font-size: 12px;
  }

  .faq-page-content {
    padding: 0 var(--space-margin-mobile) 56px;
  }

  .faq-cta-card {
    padding: 0 var(--space-margin-mobile);
    margin-bottom: 56px;
  }

  .faq-cta-inner {
    padding: 32px 24px;
  }

  .faq-page-item summary {
    padding: 16px 20px;
  }

  .faq-page-item .faq-answer {
    padding: 0 20px 16px 20px;
  }
}

@media (min-width: 768px) {
  .faq-page-item summary {
    padding: 20px 28px;
  }

  .faq-page-item .faq-answer {
    padding: 0 28px 24px 28px;
  }
}

/* ==========================================================================
   24. PRINT STYLES
   ========================================================================== */
@media print {
  .site-nav,
  .site-footer,
  .no-print {
    display: none;
  }

  body {
    background: #ffffff;
    color: #000000;
  }
}