/* ============================================
   MAIN STYLES — Aesha Design
   ============================================ */

html {
  color-scheme: light;
  font-size: var(--font-size-base);
}
@supports (color: color(display-p3 1 1 1)) {
  :root {
    --white: color(display-p3 1 1 1);
  }
}
body {
  background: var(--white, #ffffff);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  background-color: var(--color-white);
}
::selection {
  color: white;
  background: var(--color-ochre);
}
.body-pattern {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  background-image: radial-gradient(rgba(12, 12, 12, 0.171) 2px, transparent 0);
  background-size: 30px 30px;
  background-position: -5px -5px;
}
/* --- AVORY I PE FONT --- */
@font-face {
  font-family: 'Avory I PE';
  src: url('../fonts/Avory 1 PE/Avory_I_PE_Rg.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avory I PE';
  src: url('../fonts/Avory 1 PE/Avory_I_PE_Me.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avory I PE';
  src: url('../fonts/Avory 1 PE/Avory_I_PE_Bd.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi-Light';
  src: url('../fonts/Satoshi/Satoshi-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi-Regular';
  src: url('../fonts/Satoshi/Satoshi-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi-Medium';
  src: url('../fonts/Satoshi/Satoshi-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi-Bold';
  src: url('../fonts/Satoshi/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi-Black';
  src: url('../fonts/Satoshi/Satoshi-Black.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi-Variable';
  src: url('../fonts/Satoshi/Satoshi-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
  font-style: normal;
}
/* Reset & Base Styles */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
textarea,
select,
select option {
  padding: var(--space-sm);
}
:root {
  /* Colors - Design System */
  /* Primary */
  --color-deep-teal: #005E64;
  --color-deep-teal-light: #F9FEFA;
  --color-deep-teal-dark: #00262C;

  /* Backgrounds */
  --color-warm-white: #FFFBF3;
  --color-soft-gray: #E0E0E0;
  --color-gray-300: #d1d5db;

  /* Used by scroll progress ring bg */
  --color-white: #ffffff;

  /* Text */
  --color-charcoal: #0D0B08;
  --color-text-primary: #5B5755;
  --color-text-secondary: #5a5a5a;
  --color-text-muted: #8a8a8a;

  /* Accent */
  --color-ochre: #A36C00;
  --color-light-blue: #00B3BD;
  --color-ochre-dark: #754F1C;
  --color-dark-blue: #05173D;

  /* Semantic Colors - Alerts & Form States */
  /* Info */
  --color-info-bg: #f0f9fa;
  --color-info-border: var(--color-primary);
  --color-info-text: var(--color-primary);

  /* Success */
  --color-success-bg: #e8f5e9;
  --color-success-border: #4caf50;
  --color-success-text: #2e7d32;

  /* Warning */
  --color-warning-bg: #fff3e0;
  --color-warning-border: #ff9800;
  --color-warning-text: #e65100;

  /* Error */
  --color-error-bg: #ffebee;
  --color-error-border: #f44336;
  --color-error-text: #c62828;

  /* Transparent */
  --color-transparent: transparent;

  /* Mapped Colors (for backward compatibility) */
  --color-primary: var(--color-deep-teal);

  /* Use minimally - only for interactive elements (buttons, links, hover states) */
  --color-secondary: var(--color-text-secondary);
  --color-background: var(--color-warm-white);
  --color-text: var(--color-text-primary);

  /* Body text uses text-primary */
  /* Transitions */
  --transition-base: 0.2s ease;

  /* Spacing - 2px increments starting from 4px */
  --space-xxs: 0.25rem;

  /* 4px */
  --space-xs: 0.375rem;

  /* 6px */
  --space-sm: 0.5rem;

  /* 8px */
  --space-md: 0.625rem;

  /* 10px */
  --space-lg: 0.75rem;

  /* 12px */
  --space-xl: 0.875rem;

  /* 14px */
  --space-2xl: 1rem;

  /* 16px */
  --space-3xl: 1.125rem;

  /* 18px */
  --space-4xl: 1.25rem;

  /* 20px */
  --space-5xl: 1.375rem;

  /* 22px */
  --space-6xl: 1.5rem;

  /* 24px */
  --space-7xl: 1.625rem;

  /* 26px */
  --space-8xl: 1.75rem;

  /* 28px */
  --space-9xl: 1.875rem;

  /* 30px */
  --space-10xl: 2rem;

  /* 32px */
  --space-11xl: 2.125rem;

  /* 34px */
  --space-12xl: 2.25rem;

  /* 36px */
  --space-13xl: 2.375rem;

  /* 38px */
  --space-14xl: 2.5rem;

  /* 40px */
  --space-15xl: 2.625rem;

  /* 42px */
  --space-16xl: 2.75rem;

  /* 44px */
  --space-17xl: 2.875rem;

  /* 46px */
  --space-18xl: 3rem;

  /* 48px */
  --space-19xl: 3.125rem;

  /* 50px */
  --space-20xl: 3.25rem;

  /* 52px */
  --space-21xl: 3.375rem;

  /* 54px */
  --space-22xl: 3.5rem;

  /* 56px */
  --space-23xl: 3.625rem;

  /* 58px */
  --space-24xl: 3.75rem;

  /* 60px */
  --space-25xl: 3.875rem;

  /* 62px */
  --space-26xl: 4rem;

  /* 64px */
  --space-27xl: 4.125rem;

  /* 66px */
  --space-28xl: 4.25rem;

  /* 68px */
  --space-29xl: 4.375rem;

  /* 70px */
  --space-30xl: 4.5rem;

  /* 72px */
  --space-31xl: 4.625rem;

  /* 74px */
  --space-32xl: 4.75rem;

  /* 76px */
  --space-33xl: 4.875rem;

  /* 78px */
  --space-34xl: 5rem;

  /* 80px */
  --space-35xl: 5.125rem;

  /* 82px */
  --space-36xl: 5.25rem;

  /* 84px */
  --space-37xl: 5.375rem;

  /* 86px */
  --space-38xl: 5.5rem;

  /* 88px */
  --space-39xl: 5.625rem;

  /* 90px */
  --space-40xl: 5.75rem;

  /* 92px */
  --space-41xl: 5.875rem;

  /* 94px */
  --space-42xl: 6rem;

  /* 96px */
  --space-43xl: 6.125rem;

  /* 98px */
  --space-44xl: 6.25rem;

  /* 100px */
  --space-45xl: 6.375rem;

  /* 102px */
  --space-46xl: 6.5rem;

  /* 104px */
  --space-47xl: 6.625rem;

  /* 106px */
  --space-48xl: 6.75rem;

  /* 108px */
  --space-49xl: 6.875rem;

  /* 110px */
  --space-50xl: 7rem;

  /* 112px */
  --space-51xl: 7.125rem;

  /* 114px */
  --space-52xl: 7.25rem;

  /* 116px */
  --space-53xl: 7.375rem;

  /* 118px */
  --space-54xl: 7.5rem;

  /* 120px */
  /* Special spacing values for specific use cases */
  --space-400px: 25rem;

  /* 400px - for large image placeholders */
  /* Gap - 2px increments starting from 4px (same as spacing) */
  --gap-xxs: 0.25rem;

  /* 4px */
  --gap-xs: 0.375rem;

  /* 6px */
  --gap-sm: 0.5rem;

  /* 8px */
  --gap-md: 0.625rem;

  /* 10px */
  --gap-lg: 0.75rem;

  /* 12px */
  --gap-xl: 0.875rem;

  /* 14px */
  --gap-2xl: 1rem;

  /* 16px */
  --gap-3xl: 1.125rem;

  /* 18px */
  --gap-4xl: 1.25rem;

  /* 20px */
  --gap-5xl: 1.375rem;

  /* 22px */
  --gap-6xl: 1.5rem;

  /* 24px */
  --gap-7xl: 1.625rem;

  /* 26px */
  --gap-8xl: 1.75rem;

  /* 28px */
  --gap-9xl: 1.875rem;

  /* 30px */
  --gap-10xl: 2rem;

  /* 32px */
  --gap-11xl: 2.125rem;

  /* 34px */
  --gap-12xl: 2.25rem;

  /* 36px */
  --gap-13xl: 2.375rem;

  /* 38px */
  --gap-14xl: 2.5rem;

  /* 40px */
  --gap-15xl: 2.625rem;

  /* 42px */
  --gap-16xl: 2.75rem;

  /* 44px */
  --gap-17xl: 2.875rem;

  /* 46px */
  --gap-18xl: 3rem;

  /* 48px */
  --gap-19xl: 3.125rem;

  /* 50px */
  --gap-20xl: 3.25rem;

  /* 52px */
  --gap-21xl: 3.375rem;

  /* 54px */
  --gap-22xl: 3.5rem;

  /* 56px */
  --gap-23xl: 3.625rem;

  /* 58px */
  --gap-24xl: 3.75rem;

  /* 60px */
  --gap-25xl: 3.875rem;

  /* 62px */
  --gap-26xl: 4rem;

  /* 64px */
  --gap-27xl: 4.125rem;

  /* 66px */
  --gap-28xl: 4.25rem;

  /* 68px */
  --gap-29xl: 4.375rem;

  /* 70px */
  --gap-30xl: 4.5rem;

  /* 72px */
  --gap-31xl: 4.625rem;

  /* 74px */
  --gap-32xl: 4.75rem;

  /* 76px */
  --gap-33xl: 4.875rem;

  /* 78px */
  --gap-34xl: 5rem;

  /* 80px */
  --gap-35xl: 5.125rem;

  /* 82px */
  --gap-36xl: 5.25rem;

  /* 84px */
  --gap-37xl: 5.375rem;

  /* 86px */
  --gap-38xl: 5.5rem;

  /* 88px */
  --gap-39xl: 5.625rem;

  /* 90px */
  --gap-40xl: 5.75rem;

  /* 92px */
  --gap-41xl: 5.875rem;

  /* 94px */
  --gap-42xl: 6rem;

  /* 96px */
  --gap-43xl: 6.125rem;

  /* 98px */
  --gap-44xl: 6.25rem;

  /* 100px */
  --gap-45xl: 6.375rem;

  /* 102px */
  --gap-46xl: 6.5rem;

  /* 104px */
  --gap-47xl: 6.625rem;

  /* 106px */
  --gap-48xl: 6.75rem;

  /* 108px */
  --gap-49xl: 6.875rem;

  /* 110px */
  --gap-50xl: 7rem;

  /* 112px */
  --gap-51xl: 7.125rem;

  /* 114px */
  --gap-52xl: 7.25rem;

  /* 116px */
  --gap-53xl: 7.375rem;

  /* 118px */
  --gap-54xl: 7.5rem;

  /* 120px */
  /* Padding - 2px increments starting from 4px (same as spacing) */
  --padding-xxs: 0.25rem;

  /* 4px */
  --padding-xs: 0.375rem;

  /* 6px */
  --padding-sm: 0.5rem;

  /* 8px */
  --padding-md: 0.625rem;

  /* 10px */
  --padding-lg: 0.75rem;

  /* 12px */
  --padding-xl: 0.875rem;

  /* 14px */
  --padding-2xl: 1rem;

  /* 16px */
  --padding-3xl: 1.125rem;

  /* 18px */
  --padding-4xl: 1.25rem;

  /* 20px */
  --padding-5xl: 1.375rem;

  /* 22px */
  --padding-6xl: 1.5rem;

  /* 24px */
  --padding-7xl: 1.625rem;

  /* 26px */
  --padding-8xl: 1.75rem;

  /* 28px */
  --padding-9xl: 1.875rem;

  /* 30px */
  --padding-10xl: 2rem;

  /* 32px */
  --padding-11xl: 2.125rem;

  /* 34px */
  --padding-12xl: 2.25rem;

  /* 36px */
  --padding-13xl: 2.375rem;

  /* 38px */
  --padding-14xl: 2.5rem;

  /* 40px */
  --padding-15xl: 2.625rem;

  /* 42px */
  --padding-16xl: 2.75rem;

  /* 44px */
  --padding-17xl: 2.875rem;

  /* 46px */
  --padding-18xl: 3rem;

  /* 48px */
  --padding-19xl: 3.125rem;

  /* 50px */
  --padding-20xl: 3.25rem;

  /* 52px */
  --padding-21xl: 3.375rem;

  /* 54px */
  --padding-22xl: 3.5rem;

  /* 56px */
  --padding-23xl: 3.625rem;

  /* 58px */
  --padding-24xl: 3.75rem;

  /* 60px */
  --padding-25xl: 3.875rem;

  /* 62px */
  --padding-26xl: 4rem;

  /* 64px */
  --padding-27xl: 4.125rem;

  /* 66px */
  --padding-28xl: 4.25rem;

  /* 68px */
  --padding-29xl: 4.375rem;

  /* 70px */
  --padding-30xl: 4.5rem;

  /* 72px */
  --padding-31xl: 4.625rem;

  /* 74px */
  --padding-32xl: 4.75rem;

  /* 76px */
  --padding-33xl: 4.875rem;

  /* 78px */
  --padding-34xl: 5rem;

  /* 80px */
  --padding-35xl: 5.125rem;

  /* 82px */
  --padding-36xl: 5.25rem;

  /* 84px */
  --padding-37xl: 5.375rem;

  /* 86px */
  --padding-38xl: 5.5rem;

  /* 88px */
  --padding-39xl: 5.625rem;

  /* 90px */
  --padding-40xl: 5.75rem;

  /* 92px */
  --padding-41xl: 5.875rem;

  /* 94px */
  --padding-42xl: 6rem;

  /* 96px */
  --padding-43xl: 6.125rem;

  /* 98px */
  --padding-44xl: 6.25rem;

  /* 100px */
  --padding-45xl: 6.375rem;

  /* 102px */
  --padding-46xl: 6.5rem;

  /* 104px */
  --padding-47xl: 6.625rem;

  /* 106px */
  --padding-48xl: 6.75rem;

  /* 108px */
  --padding-49xl: 6.875rem;

  /* 110px */
  --padding-50xl: 7rem;

  /* 112px */
  --padding-51xl: 7.125rem;

  /* 114px */
  --padding-52xl: 7.25rem;

  /* 116px */
  --padding-53xl: 7.375rem;

  /* 118px */
  --padding-54xl: 7.5rem;

  /* 120px */
  /* Margin - 2px increments starting from 4px (same as spacing) */
  --margin-xxs: 0.25rem;

  /* 4px */
  --margin-xs: 0.375rem;

  /* 6px */
  --margin-sm: 0.5rem;

  /* 8px */
  --margin-md: 0.625rem;

  /* 10px */
  --margin-lg: 0.75rem;

  /* 12px */
  --margin-xl: 0.875rem;

  /* 14px */
  --margin-2xl: 1rem;

  /* 16px */
  --margin-3xl: 1.125rem;

  /* 18px */
  --margin-4xl: 1.25rem;

  /* 20px */
  --margin-5xl: 1.375rem;

  /* 22px */
  --margin-6xl: 1.5rem;

  /* 24px */
  --margin-7xl: 1.625rem;

  /* 26px */
  --margin-8xl: 1.75rem;

  /* 28px */
  --margin-9xl: 1.875rem;

  /* 30px */
  --margin-10xl: 2rem;

  /* 32px */
  --margin-11xl: 2.125rem;

  /* 34px */
  --margin-12xl: 2.25rem;

  /* 36px */
  --margin-13xl: 2.375rem;

  /* 38px */
  --margin-14xl: 2.5rem;

  /* 40px */
  --margin-15xl: 2.625rem;

  /* 42px */
  --margin-16xl: 2.75rem;

  /* 44px */
  --margin-17xl: 2.875rem;

  /* 46px */
  --margin-18xl: 3rem;

  /* 48px */
  --margin-19xl: 3.125rem;

  /* 50px */
  --margin-20xl: 3.25rem;

  /* 52px */
  --margin-21xl: 3.375rem;

  /* 54px */
  --margin-22xl: 3.5rem;

  /* 56px */
  --margin-23xl: 3.625rem;

  /* 58px */
  --margin-24xl: 3.75rem;

  /* 60px */
  --margin-25xl: 3.875rem;

  /* 62px */
  --margin-26xl: 4rem;

  /* 64px */
  --margin-27xl: 4.125rem;

  /* 66px */
  --margin-28xl: 4.25rem;

  /* 68px */
  --margin-29xl: 4.375rem;

  /* 70px */
  --margin-30xl: 4.5rem;

  /* 72px */
  --margin-31xl: 4.625rem;

  /* 74px */
  --margin-32xl: 4.75rem;

  /* 76px */
  --margin-33xl: 4.875rem;

  /* 78px */
  --margin-34xl: 5rem;

  /* 80px */
  --margin-35xl: 5.125rem;

  /* 82px */
  --margin-36xl: 5.25rem;

  /* 84px */
  --margin-37xl: 5.375rem;

  /* 86px */
  --margin-38xl: 5.5rem;

  /* 88px */
  --margin-39xl: 5.625rem;

  /* 90px */
  --margin-40xl: 5.75rem;

  /* 92px */
  --margin-41xl: 5.875rem;

  /* 94px */
  --margin-42xl: 6rem;

  /* 96px */
  --margin-43xl: 6.125rem;

  /* 98px */
  --margin-44xl: 6.25rem;

  /* 100px */
  --margin-45xl: 6.375rem;

  /* 102px */
  --margin-46xl: 6.5rem;

  /* 104px */
  --margin-47xl: 6.625rem;

  /* 106px */
  --margin-48xl: 6.75rem;

  /* 108px */
  --margin-49xl: 6.875rem;

  /* 110px */
  --margin-50xl: 7rem;

  /* 112px */
  --margin-51xl: 7.125rem;

  /* 114px */
  --margin-52xl: 7.25rem;

  /* 116px */
  --margin-53xl: 7.375rem;

  /* 118px */
  --margin-54xl: 7.5rem;

  /* 120px */
  /* Typography - Base: 16px (1rem), Ratio: 1.25 */
  --font-heading: 'Avory I PE', sans-serif;
  --font-body: 'Satoshi-Variable', 'Satoshi-Regular', 'Satoshi-Medium', 'Satoshi-Bold', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-family-base: var(--font-body);
  --font-size-base: 1rem;

  /* 16px */
  --line-height-base: 1.5;

  /* Type Scale (1.25 ratio) */
  --font-size-xs: 0.8rem;

  /* 13.6px - base / 1.25^1 */
  --font-size-sm: 0.894rem;

  /* 15.2px - base / 1.25^0.5 (intermediate) */
  --font-size-base: 1rem;

  /* 16px - base */
  --font-size-lg: 1.25rem;

  /* 21.25px - base * 1.25^1 */
  --font-size-xl: 1.563rem;

  /* 26.56px - base * 1.25^2 */
  --font-size-2xl: 1.953rem;

  /* 33.2px - base * 1.25^3 */
  --font-size-3xl: 2.441rem;

  /* 41.5px - base * 1.25^4 */
  --font-size-4xl: 3.052rem;

  /* 51.88px - base * 1.25^5 */
  --font-size-5xl: 3.815rem;

  /* 64.86px - base * 1.25^6 */
  --font-size-6xl: 4.768rem;

  /* 81.06px - base * 1.25^7 */
  /* Layout */
  --max-width: 1200px;
  --container-padding: var(--space-6xl);

  /* 32px */
  /* Dropdown Offset */
  --dropdown-offset-top: var(--space-md);

  /* 10px */
  --dropdown-offset-left: 0;
  --dropdown-offset-right: 0;
}
p {
  color: var(--color-text-primary);
}
/* Typography - Place after Tailwind base to override */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-charcoal);

  /* Headings use charcoal */
  display: block;
}
h1,
body h1,
main h1,
section h1,
.hero h1 {
  font-size: var(--font-size-6xl);

  /* display size: 4.768rem; scale starts at 5xl = 3.815rem */
  line-height: 1.2;
  letter-spacing: calc(var(--space-xxs) * -0.45);

  /* -1.8px ≈ -0.9px, using closest approximation */
}
h2,
body h2,
main h2,
section h2,
.hero h2 {
  font-size: var(--font-size-4xl);

  /* 3.052rem / 48.83px */
  line-height: 1.2;
}
h3,
body h3,
main h3,
section h3 {
  font-size: var(--font-size-3xl);

  /* 2.441rem / 39.06px */
  line-height: 1.25;
}
h4,
body h4,
main h4,
section h4 {
  font-size: var(--font-size-2xl);

  /* 1.953rem / 31.25px */
  line-height: 1.3;
}
h5,
body h5,
main h5,
section h5 {
  font-size: var(--font-size-xl);

  /* 1.563rem / 25px */
  line-height: 1.35;
}
h6,
body h6,
main h6,
section h6 {
  font-size: var(--font-size-lg);

  /* 1.25rem / 20px */
  line-height: 1.4;
}
/* Hero section - paragraphs */

.hero p {
  font-weight: 380;
  letter-spacing: 0.005em;
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
}
.hero .text-xl:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.hero .text-2xl:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-weight: 360;
  letter-spacing: 0.006em;
}
.section-intro:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.card-title:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.footer-heading:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.text-lg:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-weight: 380;
  letter-spacing: 0.005em;
}
.text-xl:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.text-2xl:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-weight: 360;
  letter-spacing: 0.006em;
}
.container-wide {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}
@media (min-width: 390px) {
  .container-wide {
    padding-left: 12px;
    padding-right: 12px;
  }
}
/* Header - Legacy styles (only for old .header class, not .site-header) */

.header:not(.site-header) {
  background-color: var(--color-background);
  border-bottom: 1px solid var(--color-soft-gray);
  padding: var(--space-md) 0;
}
.header:not(.site-header) h1 {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  color: var(--color-charcoal);

  /* Headings use charcoal */
}
header.site-header {
  background-color: transparent;
  border-bottom: none;
  padding: var(--space-xxs) 0;
  padding-bottom: calc(var(--space-xxs) + var(--space-xs));

  /* Extra space for wavy underline (4px + 6px = 10px) */
  position: relative;
  overflow: visible;

  /* Ensure wavy underline is visible */
  transition: background-color 0.3s ease, border-bottom 0.3s ease;
  z-index: 10;
}
header.site-header.header-scrolled {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-soft-gray);
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: 10;
}
.main {
  min-height: calc(100vh - var(--space-7xl) * 4.17);

  /* 200px = 12.5rem */
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
}
.hero {
  text-align: center;
  padding: var(--space-6xl) 0;
}
.top-header {
  background-color: var(--color-ochre-dark);
  color: var(--color-warm-white);
  padding: var(--space-xxs) 0;
  position: relative;
  z-index: 10;
}
.top-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-2xl);
}
.top-header-left {
  color: var(--color-warm-white);
  display: flex;
  align-items: center;
  gap: 0;
}
.social-icons-container {
  display: flex;
  align-items: center;
  gap: 0;
}
.site-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-2xl);
}
.footer-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xl);
}
@media (min-width: 768px) {
  .footer-row {
    flex-direction: row;
  }
}
.top-header-link {
  padding: var(--space-xxs);
}
.top-header-icon {
  width: var(--space-2xl);

  /* 16px */
  height: var(--space-2xl);

  /* 16px */
}
.top-header-text {
  font-size: var(--font-size-sm);
  color: var(--color-warm-white);
}
.header-logo-link {
  text-decoration: none;
}
.header-logo-img {
  height: 60px;
  width: auto;
}
.icon-16 {
  width: var(--space-2xl);

  /* 16px */
  height: var(--space-2xl);

  /* 16px */
}
.link-body {
  position: relative;
  text-decoration: none;
  color: var(--color-deep-teal);
}
.link-body:hover {
  color: var(--color-deep-teal);
}
.link-body::after {
  content: '';
  position: absolute;
  bottom: calc(var(--space-xs) * -1);

  /* -6px */
  left: 0;
  width: 0;
  height: 6px;
  background-image: url('../images/wavy-underline.svg');
  background-repeat: repeat-x;
  background-size: auto 5px;
  opacity: 0;
  transition: width var(--transition-base), opacity var(--transition-base);
}
.link-body:hover::after {
  width: 100% !important;
  opacity: 1 !important;
}
.link-body.active,
.link-body[aria-current="page"] {
  color: var(--color-deep-teal);
}
.bg-charcoal .link-body.active,
.bg-charcoal .link-body[aria-current="page"],
[style*="background-color: var(--color-charcoal)"] .link-body.active,
[style*="background-color: var(--color-charcoal)"] .link-body[aria-current="page"] {
  color: var(--color-deep-teal-light);
}
img::after,
a img::after,
a:has(img)::after {
  display: none !important;
}
.link-squiggle {
  position: relative;
  text-decoration: none;
}
.link-squiggle::after {
  content: '';
  position: absolute;
  bottom: calc(var(--space-xs) * -1);
  left: 0;
  width: 100%;
  height: 6px;
  background-image: url('../images/wavy-underline.svg');
  background-repeat: repeat-x;
  background-size: auto 5px;
  opacity: 1;
  pointer-events: none;
}
.link-clean {
  text-decoration: none;
}
.link-clean::after {
  content: none !important;
  display: none !important;
}
.nav-dropdown .link-squiggle::after {
  content: none !important;
  display: none !important;
}
/* Base button styles - can be used with Tailwind classes */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);

  /* 6px */
  padding: var(--space-xs) var(--space-4xl);
  border-radius: 9999px;
  border: none;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
*:focus:not(:focus-visible) {
  outline: none;
}
.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.btn-icon-left,
.btn-icon-right {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.btn-icon-left {
  margin-right: var(--space-xs);

  /* 6px */
}
.btn-icon-right {
  margin-left: var(--space-xs);

  /* 6px */
}
.btn svg,
.btn .icon {
  width: var(--font-size-base);
  height: var(--font-size-base);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.btn:hover svg,
.btn:hover .icon,
.btn:hover i.ph-bold {
  transform: rotate(-6deg);
}
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-background);
  border: 2px solid transparent;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: border-color 0.7s ease;
  padding: var(--space-xs) var(--space-4xl);
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-ochre);
  border-radius: 100px;
  z-index: -1;
  transform: scale(0);
  transition: transform 0.7s ease;
}
.btn-primary .btn-label {
  color: var(--color-white);
}
.btn-primary:hover {
  color: var(--color-white);
  border-color: var(--color-ochre);
}
.btn-primary:hover::before {
  transform: scale(3);
}
.btn-primary > *,
.btn-primary .btn-icon-left,
.btn-primary .btn-icon-right {
  position: relative;
  z-index: 1;
}
.btn-secondary {
  background-color: var(--color-white);
  color: var(--color-text-muted);
  border: 2px solid var(--color-text-muted);
  position: relative;
  padding: var(--space-xs) var(--space-4xl);
}
.btn-secondary .btn-label {
  color: var(--color-text-muted);
}
.btn-label {
  position: relative;
  z-index: 2;
  transition: color 0.35s ease;
}
.btn-secondary::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-text-muted);
  z-index: 1;
  border-radius: 100px;
  -webkit-mask-image: radial-gradient(circle, var(--color-charcoal) 0%, transparent 0%);
  mask-image: radial-gradient(circle, var(--color-charcoal) 0%, transparent 0%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0px;
  mask-size: 0px;
  transition: -webkit-mask-size 0.45s cubic-bezier(.4,0,.2,1),
    mask-size 0.45s cubic-bezier(.4,0,.2,1);
}
.btn-secondary:hover::before {
  -webkit-mask-size: 600px;
  mask-size: 600px;
}
.btn-secondary:hover .btn-label {
  color: var(--color-text-muted);
}
.btn-secondary:hover {
  background-color: var(--color-white);
  color: var(--color-text-muted);
}
.btn-text {
  background-color: transparent;
  color: var(--color-primary);
  border: none;
  padding: var(--space-xs) var(--space-4xl);
}
.btn-text:hover {
  color: var(--color-deep-teal-dark);
}
.btn-text::before,
.btn-text::after {
  display: none !important;
}
.btn-text .btn-icon-left,
.btn-text .btn-icon-right {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: transform 0.3s ease, color 0.3s ease;
}
.btn-text .btn-icon-left {
  margin-right: var(--space-xs);

  /* 6px */
}
.btn-text .btn-icon-right {
  margin-left: var(--space-xs);

  /* 6px */
}
.btn-text .btn-icon-left i.ph-bold,
.btn-text .btn-icon-right i.ph-bold,
.btn-text .btn-icon-left svg,
.btn-text .btn-icon-right svg {
  color: inherit;
  transition: transform 0.3s ease, color 0.3s ease;
}
.btn-text:hover .btn-icon-left i.ph-bold,
.btn-text:hover .btn-icon-right i.ph-bold,
.btn-text:hover .btn-icon-left svg,
.btn-text:hover .btn-icon-right svg {
  color: var(--color-deep-teal-dark);
  transform: rotate(-6deg);
}
.btn-text > i.ph-bold:first-child {
  margin-right: var(--space-xs);
}
.btn-text > i.ph-bold:last-child:not(:first-child) {
  margin-left: var(--space-xs);
}
.btn-text:hover > i.ph-bold {
  color: var(--color-deep-teal-dark);
  transform: rotate(-6deg);
}
.btn-sm {
  padding: var(--space-xs) var(--space-4xl);
  font-size: var(--font-size-sm);
}
.btn-lg {
  padding: var(--space-xs) var(--space-4xl);
  font-size: var(--font-size-lg);
}
.btn:has(> i.ph-bold):not(:has(.btn-label)):not(:has(span.btn-icon-left)):not(:has(span.btn-icon-right)):not(:has(span)),
.btn.btn-icon-only {
  width: var(--space-6xl);

  /* 32px - closest match, or use calc for exact 40px */
  height: var(--space-6xl);

  /* 32px - closest match, or use calc for exact 40px */
  padding: var(--space-xs);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-6xl);

  /* 32px - closest match */
}
.btn-primary:has(> i.ph-bold):not(:has(.btn-label)):not(:has(span.btn-icon-left)):not(:has(span.btn-icon-right)):not(:has(span)),
.btn-primary.btn-icon-only {
  background-color: var(--color-deep-teal);
  border: none;
}
.btn-primary:has(> i.ph-bold):not(:has(.btn-label)):not(:has(span.btn-icon-left)):not(:has(span.btn-icon-right)):not(:has(span)):hover,
.btn-primary.btn-icon-only:hover {
  background-color: var(--color-deep-teal-dark);
  transform: scale(0.95);
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.btn-secondary:has(> i.ph-bold):not(:has(.btn-label)):not(:has(span.btn-icon-left)):not(:has(span.btn-icon-right)):not(:has(span)),
.btn-secondary.btn-icon-only {
  background-color: var(--color-white);
  border: 2px solid var(--color-text-muted);
}
.btn-secondary:has(> i.ph-bold):not(:has(.btn-label)):not(:has(span.btn-icon-left)):not(:has(span.btn-icon-right)):not(:has(span)):hover,
.btn-secondary.btn-icon-only:hover {
  background-color: var(--color-white);
  border-color: var(--color-charcoal);
  transform: scale(0.95);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}
.btn:has(> i.ph-bold):not(:has(.btn-label)):not(:has(span.btn-icon-left)):not(:has(span.btn-icon-right)):not(:has(span)) i.ph-bold,
.btn.btn-icon-only i.ph-bold {
  font-size: 16px;
  color: var(--color-white);
  margin: 0;
}
.btn-secondary:has(> i.ph-bold):not(:has(.btn-label)):not(:has(span.btn-icon-left)):not(:has(span.btn-icon-right)):not(:has(span)) i.ph-bold,
.btn-secondary.btn-icon-only i.ph-bold {
  color: var(--color-text-muted);
}
.btn-secondary:has(> i.ph-bold):not(:has(.btn-label)):not(:has(span.btn-icon-left)):not(:has(span.btn-icon-right)):not(:has(span)):hover i.ph-bold,
.btn-secondary.btn-icon-only:hover i.ph-bold {
  color: var(--color-white);
  stroke: var(--color-white);
}
/* Text Inputs */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
.textarea {
  width: 100%;
  padding: var(--space-sm) !important;
  border: 1px solid var(--color-soft-gray);
  border-radius: var(--space-sm);
  background-color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  resize: vertical;
  min-height: calc(var(--space-7xl) * 2.08);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="search"]:hover,
textarea:hover {
  border-color: var(--color-primary);
}
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.radio-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  cursor: pointer;
  position: relative;
}
.radio-item input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: var(--space-4xl);

  /* 20px */
  height: var(--space-4xl);

  /* 20px */
  border: 2px solid var(--color-secondary);
  border-radius: 50%;
  background-color: var(--color-white);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.radio-item input[type="radio"]:checked {
  border-color: var(--color-primary);
  background-color: var(--color-white);
}
.radio-item input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--space-md);

  /* 10px */
  height: var(--space-md);

  /* 10px */
  border-radius: 50%;
  background-color: var(--color-primary);
}
.radio-item input[type="radio"]:hover {
  border-color: var(--color-primary);
}
.radio-item input[type="radio"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.radio-item label {
  cursor: pointer;
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
}
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.checkbox-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  cursor: pointer;
  position: relative;
}
.checkbox-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: var(--space-4xl);

  /* 20px */
  height: var(--space-4xl);

  /* 20px */
  border: 2px solid var(--color-secondary);
  border-radius: var(--space-xxs);

  /* 4px */
  background-color: var(--color-white);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.checkbox-item input[type="checkbox"]:checked {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}
.checkbox-item input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: calc(var(--space-md) * 0.5);

  /* 5px */
  height: var(--space-md);

  /* 10px */
  border: solid var(--color-white);
  border-width: 0 var(--space-xxs) var(--space-xxs) 0;

  /* 2px = 0.125rem, using --space-xxs (4px) as closest match */
}
.checkbox-item input[type="checkbox"]:hover {
  border-color: var(--color-primary);
}
.checkbox-item input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.checkbox-item label {
  cursor: pointer;
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
}
.toggle-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.toggle-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
}
.toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.toggle-switch input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 24px;
  background-color: var(--color-soft-gray);
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  transition: background-color var(--transition-base);
}
.toggle-switch input[type="checkbox"]::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: var(--color-white);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform var(--transition-base);
}
.toggle-switch input[type="checkbox"]:checked {
  background-color: var(--color-primary);
}
.toggle-switch input[type="checkbox"]:checked::before {
  transform: translateX(20px);
}
.toggle-switch input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.toggle-item label {
  cursor: pointer;
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
}
.select-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}
.select-wrapper::after {
  content: '';
  position: absolute;
  top: 50%;
  right: var(--space-sm);
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--color-secondary);
  pointer-events: none;
}
select {
  width: 100%;
  padding: var(--space-sm);
  padding-right: var(--space-xl);
  border: 1px solid var(--color-soft-gray);
  background-color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  border-radius: var(--space-sm);

  /* 8px */
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
select:focus {
  outline: none;
  border-color: var(--color-primary);
}
select:hover {
  border-color: var(--color-primary);
}
.range-wrapper {
  width: 100%;
}
.range-wrapper input[type="range"] {
  width: 100%;
  height: var(--space-xxs);

  /* 4px */
  border-radius: calc(var(--space-xxs) * 0.5);

  /* 2px = half of --space-xxs */
  background: var(--color-soft-gray);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.range-wrapper input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--space-4xl);

  /* 20px */
  height: var(--space-4xl);

  /* 20px */
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  box-shadow: 0 var(--space-xxs) var(--space-xxs) rgba(0, 0, 0, 0.2);
}
.range-wrapper input[type="range"]::-moz-range-thumb {
  width: var(--space-4xl);

  /* 20px */
  height: var(--space-4xl);

  /* 20px */
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: none;
  box-shadow: 0 var(--space-xxs) var(--space-xxs) rgba(0, 0, 0, 0.2);
}
.range-value {
  display: inline-block;
  margin-top: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-secondary);
}
.progress-bar {
  width: 100%;
  height: var(--space-sm);

  /* 8px */
  background-color: var(--color-soft-gray);
  border-radius: var(--space-xxs);

  /* 4px */
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background-color: var(--color-primary);
  border-radius: var(--space-xxs);

  /* 4px */
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-soft-gray);
  color: var(--color-text-primary);
  border-radius: var(--space-2xl);

  /* 16px */
  font-size: var(--font-size-sm);
  font-weight: 500;
}
.chip-primary {
  background-color: var(--color-primary);
  color: var(--color-background);
}
.chip-removable {
  padding-right: var(--space-xs);
}
.chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-2xl);

  /* 16px */
  height: var(--space-2xl);

  /* 16px */
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);

  /* Keeping rgba for opacity effect */
  color: currentColor;
  cursor: pointer;
  border: none;
  padding: 0;
  font-size: 12px;
  line-height: 1;
}
.chip-remove:hover {
  background-color: rgba(0, 0, 0, 0.3);

  /* Keeping rgba for opacity effect */
}
.chip-primary .chip-remove {
  background-color: rgba(255, 255, 255, 0.3);
}
.chip-primary .chip-remove:hover {
  background-color: rgba(255, 255, 255, 0.4);
}
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-xs);
  background-color: var(--color-primary);
  color: var(--color-background);
  border-radius: var(--space-md);

  /* 10px */
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1;
}
.badge-dot {
  min-width: 8px;
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
}
.card {
  background-color: var(--color-white);
  border: 1px solid var(--color-soft-gray);
  border-radius: var(--space-sm);

  /* 8px */
  padding: var(--space-lg);
}
.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.card-header {
  margin-bottom: var(--space-sm);
}
.card-title {
  font-size: var(--font-size-xl);
  font-weight: 500;
  margin-bottom: var(--space-sm);
  color: var(--color-charcoal);
}
.card-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-secondary);
}
.card-body {
  margin-bottom: var(--space-sm);
}
.card-footer {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-soft-gray);
}
.alert {
  padding: var(--space-md);
  border-radius: var(--space-xxs);

  /* 4px */
  border-left: 4px solid;
  margin-bottom: var(--space-md);
}
.alert-info {
  background-color: var(--color-info-bg);
  border-color: var(--color-info-border);
  color: var(--color-info-text);
}
.alert-success {
  background-color: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success-text);
}
.alert-warning {
  background-color: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning-text);
}
.alert-error {
  background-color: var(--color-error-bg);
  border-color: var(--color-error-border);
  color: var(--color-error-text);
}
.tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
}
.tooltip-content {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-white);
  color: var(--color-charcoal);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  border-radius: var(--space-sm);

  /* 8px */
  border: calc(var(--space-xxs) * 0.375) solid var(--color-soft-gray);

  /* 1.5px border */
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.tooltip-content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--color-white);
}
.tooltip-content::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-left: calc(var(--space-xxs) * -0.375);

  /* -1.5px, negative offset for visual alignment - keeping as is for precise tooltip positioning */
  width: 0;
  height: 0;
  border-left: calc(var(--space-2xl) * 0.46875) solid transparent;

  /* 7.5px */
  border-right: calc(var(--space-2xl) * 0.46875) solid transparent;

  /* 7.5px */
  border-top: calc(var(--space-2xl) * 0.46875) solid var(--color-soft-gray);

  /* 7.5px */
  z-index: -1;
}
.tooltip:hover .tooltip-content {
  opacity: 1;
}
.icon-xl {
  width: var(--font-size-xl);

  /* 1.96rem / 31.4px - base * 1.4^2 */
  height: var(--font-size-xl);
}
/* Divider */

.divider {
  height: 1px;
  background-color: var(--color-soft-gray);
  border: none;
  margin: var(--space-lg) 0;
}
.divider-vertical {
  width: 1px;
  height: auto;
  margin: 0 var(--space-lg);
  display: inline-block;
}
ul:not(.nav-links):not(.footer-links):not(.social-links):not(.nav-dropdown),
ol:not(.nav-links):not(.footer-links):not(.social-links):not(.nav-dropdown) {
  margin-bottom: var(--space-md);
}
ul:not(.nav-links):not(.footer-links):not(.social-links):not(.nav-dropdown) {
  list-style: none;
}
ul:not(.nav-links):not(.footer-links):not(.social-links):not(.nav-dropdown) li {
  position: relative;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  margin-bottom: 0;
  line-height: var(--line-height-base);
}
ul:not(.nav-links):not(.footer-links):not(.social-links):not(.nav-dropdown) li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: bold;
}
ol:not(.nav-links):not(.footer-links):not(.social-links):not(.nav-dropdown) {
  list-style: decimal;
  color: var(--color-text-primary);
}
ol:not(.nav-links):not(.footer-links):not(.social-links):not(.nav-dropdown) li {
  margin-bottom: var(--space-sm);
  line-height: var(--line-height-base);
  padding-left: var(--space-xs);
  padding-right: var(--space-md);
}
.label,
.chip-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6xl);
  display: block;
}
.chip-label {
  border: 1px solid var(--color-text-secondary);
  padding: var(--space-xs) var(--space-xl);
  border-radius: var(--space-15xl);
  width: fit-content;
}
.section-intro {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6xl);
}
.section {
  padding: var(--space-6xl) 0;
}
.footer {
  background-color: var(--color-background);
  border-top: 1px solid var(--color-soft-gray);
  padding: var(--space-md) 0;
  color: var(--color-secondary);
  font-size: var(--font-size-sm);
}
.text-xs {
  font-size: var(--font-size-xs);
}
.text-sm {
  font-size: var(--font-size-sm);
}
.text-base {
  font-size: var(--font-size-base);
}
.text-lg {
  font-size: var(--font-size-lg);
}
.text-xl {
  font-size: var(--font-size-xl);
}
.text-5xl {
  font-size: var(--font-size-5xl);
}
.text-6xl {
  font-size: var(--font-size-6xl);
}
.text-charcoal {
  color: var(--color-charcoal);
}
.text-text-primary {
  color: var(--color-text-primary);
}
.text-text-secondary {
  color: var(--color-text-secondary);
}
.text-text-muted {
  color: var(--color-text-muted);
}
.text-primary {
  color: var(--color-primary);
}
.text-deep-teal {
  color: var(--color-deep-teal);
}
.text-ochre {
  color: var(--color-ochre);
}
.text-white {
  color: var(--color-white);
}
/* Zero spacing */

.p-0 {
  padding: 0;
}
.m-0 {
  margin: 0;
}
.gap-0 {
  gap: 0;
}
.p-xxs {
  padding: var(--padding-xxs);
}
.px-xxs {
  padding-left: var(--padding-xxs);
  padding-right: var(--padding-xxs);
}
.py-xxs {
  padding-top: var(--padding-xxs);
  padding-bottom: var(--padding-xxs);
}
.pt-xxs {
  padding-top: var(--padding-xxs);
}
.pr-xxs {
  padding-right: var(--padding-xxs);
}
.pb-xxs {
  padding-bottom: var(--padding-xxs);
}
.pl-xxs {
  padding-left: var(--padding-xxs);
}
.m-xxs {
  margin: var(--margin-xxs);
}
.mx-xxs {
  margin-left: var(--margin-xxs);
  margin-right: var(--margin-xxs);
}
.my-xxs {
  margin-top: var(--margin-xxs);
  margin-bottom: var(--margin-xxs);
}
.gap-xxs {
  gap: var(--gap-xxs);
}
.p-xs {
  padding: var(--padding-xs);
}
.p-sm {
  padding: var(--padding-sm);
}
.p-md {
  padding: var(--padding-md);
}
.p-lg {
  padding: var(--padding-lg);
}
.p-2xl {
  padding: var(--padding-2xl);
}
.p-6xl {
  padding: var(--padding-6xl);
}
.px-6xl {
  padding-left: var(--padding-6xl);
  padding-right: var(--padding-6xl);
}
.py-6xl {
  padding-top: var(--padding-6xl);
  padding-bottom: var(--padding-6xl);
}
.pt-6xl {
  padding-top: var(--padding-6xl);
}
.pr-6xl {
  padding-right: var(--padding-6xl);
}
.pb-6xl {
  padding-bottom: var(--padding-6xl);
}
.pl-6xl {
  padding-left: var(--padding-6xl);
}
.m-xs {
  margin: var(--margin-xs);
}
.m-sm {
  margin: var(--margin-sm);
}
.m-md {
  margin: var(--margin-md);
}
.m-lg {
  margin: var(--margin-lg);
}
.m-2xl {
  margin: var(--margin-2xl);
}
.m-6xl {
  margin: var(--margin-6xl);
}
.mx-6xl {
  margin-left: var(--margin-6xl);
  margin-right: var(--margin-6xl);
}
.my-6xl {
  margin-top: var(--margin-6xl);
  margin-bottom: var(--margin-6xl);
}
.mt-6xl {
  margin-top: var(--margin-6xl);
}
.mr-6xl {
  margin-right: var(--margin-6xl);
}
.mb-6xl {
  margin-bottom: var(--margin-6xl);
}
.ml-6xl {
  margin-left: var(--margin-6xl);
}
.m-10xl {
  margin: var(--margin-10xl);
}
.gap-sm {
  gap: var(--gap-sm);
}
.gap-md {
  gap: var(--gap-md);
}
.gap-lg {
  gap: var(--gap-lg);
}
.gap-2xl {
  gap: var(--gap-2xl);
}
.gap-6xl {
  gap: var(--gap-6xl);
}
.gap-54xl {
  gap: var(--gap-54xl);
}
.p-34xl {
  padding: var(--padding-34xl);
}
.p-54xl {
  padding: var(--padding-54xl);
}
.m-34xl {
  margin: var(--margin-34xl);
}
.m-54xl {
  margin: var(--margin-54xl);
}
pre {
  margin: 0;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}
code {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.875rem;
}
.nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--space-2xl);
  align-items: center;
  overflow: visible;
}
.site-header .desktop-nav {
  display: block;
  margin-left: auto;
  margin-right: var(--space-md);
}
.site-header .desktop-nav .nav-links {
  justify-content: flex-end;
}
.site-header .mobile-nav {
  display: none;
}
.site-header .header-mobile-controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}
.site-header .header-icons {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}
.site-header .header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}
.site-header .nav-item-has-dropdown > a svg,
.nav-item-has-dropdown > a svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-left: var(--space-xs);
  transition: transform 0.3s ease;
}
.site-header .icon-link {
  display: flex;
  align-items: center;
  color: var(--color-charcoal);
  text-decoration: none;
  position: relative;
}
.site-header .icon-link:hover {
  color: var(--color-primary);
}
.site-header .icon-link::after {
  display: none !important;
}
.site-header .icon-link svg {
  width: 1.25rem;
  height: 1.25rem;
}
@media (min-width: 769px) {
  .mobile-menu-toggle {
    display: none;
  }
  header.site-header nav.desktop-nav {
    display: block;
    position: static;
  }
  header.site-header nav:not(.desktop-nav):not(.mobile-nav) {
    display: none;
  }
  .site-header .desktop-nav {
    display: block;
    margin-left: auto;
    margin-right: var(--space-md);
  }
  .site-header .desktop-nav .nav-links {
    justify-content: flex-end;
  }
  .site-header .mobile-nav {
    display: none;
  }
  .site-header .header-mobile-controls {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
  }
  .site-header .header-actions {
    display: flex;
    flex-shrink: 0;
  }
  .site-header .mobile-menu-toggle {
    display: none;
  }
}
.nav-links li {
  margin: 0;
  padding: 0;
  position: relative;
  overflow: visible;
}
header.site-header .nav-links a,
header .desktop-nav .nav-links a,
.nav-links a {
  color: var(--color-text-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  position: relative;
}
.nav-links a:hover {
  color: var(--color-primary);

  /* Hover uses primary (deep-teal) */
}
.nav-links a.active,
.nav-links a[aria-current="page"],
header.site-header .nav-links a.active,
header .desktop-nav .nav-links a.active,
header.site-header .desktop-nav .nav-links a.active,
header.site-header nav.desktop-nav .nav-links a.active {
  color: var(--color-primary);

  /* Active uses primary (deep-teal) */
}
.nav-links a.active::after,
.nav-links a[aria-current="page"]::after,
header.site-header .nav-links a.active::after,
header.site-header .nav-links a[aria-current="page"]::after,
header .desktop-nav .nav-links a.active::after,
header .desktop-nav .nav-links a[aria-current="page"]::after,
header.site-header .desktop-nav .nav-links a.active::after,
header.site-header .desktop-nav .nav-links a[aria-current="page"]::after,
header.site-header nav.desktop-nav .nav-links a.active::after,
header.site-header nav.desktop-nav .nav-links a[aria-current="page"]::after {
  content: '' !important;
  position: absolute !important;
  bottom: -6px !important;
  left: 0 !important;
  width: 100% !important;
  height: 6px !important;
  background-image: url('../images/wavy-underline.svg') !important;
  background-repeat: repeat-x !important;
  background-size: auto 5px !important;
  background-position: left bottom !important;
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
  z-index: 1 !important;
}
.nav-links a:not(.active):not([aria-current="page"]) {
  position: relative;
}
.nav-links a:not(.active):not([aria-current="page"])::after {
  content: '';
  position: absolute;
  bottom: calc(var(--space-xs) * -1);

  /* -6px */
  left: 0;
  width: 0;
  height: 6px;
  background-image: url('../images/wavy-underline.svg');
  background-repeat: repeat-x;
  background-size: auto 5px;
  transition: width var(--transition-base), opacity var(--transition-base);
  opacity: 0;
}
.nav-links a:not(.active):not([aria-current="page"]):hover::after {
  width: 100% !important;
  opacity: 1 !important;
}
.nav-links li a.active {
  position: relative;
}
.nav-links a:has(img)::after,
.nav-links a img::after {
  display: none !important;
  content: none !important;
}
header.site-header .nav-dropdown {
  padding: var(--space-lg);

  /* 12px */
}
header.site-header .nav-dropdown a,
header .desktop-nav .nav-dropdown a,
.nav-dropdown a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-charcoal);

  /* Dropdown links use charcoal */
  text-decoration: none;
  position: relative;
  gap: var(--space-xs);
}
.nav-dropdown a:not(.active):not([aria-current="page"])::after {
  content: '';
  position: absolute;
  bottom: calc(var(--space-xxs) * -0.5);

  /* -2px */
  left: var(--space-sm);
  right: var(--space-sm);
  width: 0;
  height: 6px;
  background-image: url('../images/wavy-underline.svg');
  background-repeat: repeat-x;
  background-size: auto 5px;
  opacity: 0;
  transition: width var(--transition-base), opacity var(--transition-base);
}
.nav-dropdown a:not(.active):not([aria-current="page"]):hover::after {
  width: calc(100% - calc(var(--space-sm) * 2)) !important;
  opacity: 1 !important;
}
.nav-dropdown a:not(:has(img)).active::after,
.nav-dropdown a:not(:has(img))[aria-current="page"]::after {
  content: '';
  position: absolute;
  bottom: calc(var(--space-xxs) * -0.5);

  /* -2px */
  left: var(--space-sm);
  right: var(--space-sm);
  height: 5px;
  background-image: url('../images/wavy-underline.svg');
  background-repeat: repeat-x;
  background-size: auto 5px;
  opacity: 1;
  display: block !important;
}
.top-header span:not(.top-header-text):not(.top-header-icon),
.top-header p {
  color: var(--color-warm-white);
}
.top-header a[aria-label] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-10xl);

  /* 32px */
  height: var(--space-10xl);

  /* 32px */
  border-radius: 50%;
  background-color: transparent;
  border: none;
  color: var(--color-warm-white);
  transition: all 0.3s ease;
  text-decoration: none;
  position: relative;
  padding: 0;

  /* Prevent wavy underline */
  overflow: visible;
}
.top-header a[aria-label]:hover {
  background-color: transparent;
  border: none;
  color: var(--color-warm-white);
  transform: translateY(-2px);
}
.top-header a[aria-label] .ph-bold,
.top-header a[aria-label] i.ph-bold {
  font-size: 16px;
  transition: color 0.3s ease;
  color: var(--color-warm-white);
}
.top-header a[aria-label]:hover .ph-bold,
.top-header a[aria-label]:hover i.ph-bold {
  color: var(--color-warm-white);
}
.top-header a[aria-label] svg path,
.top-header a[aria-label] svg circle,
.top-header a[aria-label] svg rect,
.top-header a[aria-label] svg polygon {
  fill: var(--color-warm-white) !important;
  stroke: none !important;
}
.top-header a[aria-label]::after,
.top-header a[aria-label]:hover::after {
  display: none !important;
  content: none !important;
}
@media (max-width: 768px) {
  :root {
    --font-size-6xl: 3.815rem;

    /* Scale down display h1 on mobile (was 4.768rem) */
    --font-size-5xl: 2.441rem;

    /* Scale down h2 on mobile - 31.25px */
    --font-size-4xl: 1.953rem;

    /* Scale down h3 on mobile - 25px */
    --font-size-3xl: 1.563rem;

    /* Scale down h4 on mobile - 20px */
    --font-size-2xl: 1.25rem;

    /* Scale down h5 on mobile - 18px */
    --font-size-xl: 1.125rem;

    /* Scale down h6 on mobile - 16px */
    --font-size-lg: 1rem;
  }
  .hero p {
    font-size: var(--font-size-base);
  }
  section {
    margin-bottom: var(--space-xl);
  }
  .mobile-menu-toggle {
    display: flex;
    z-index: 1001;
    visibility: visible;
    opacity: 1;
  }
  .mobile-menu-toggle i {
    color: var(--color-white);
    opacity: 1;
    visibility: visible;
  }
  .mobile-menu-toggle i.ph-bold,
  .mobile-menu-toggle svg {
    color: var(--color-white);
    stroke: var(--color-white);
  }
  header.site-header .mobile-menu-toggle {
    display: flex;
    visibility: visible;
    opacity: 1;
    background: var(--color-deep-teal);
  }
  header.site-header .mobile-menu-toggle i {
    color: var(--color-white);
    visibility: visible;
    opacity: 1;
  }
  header.site-header .mobile-menu-toggle i.ph-bold {
    color: var(--color-white);
    font-size: 16px;
  }
  header.site-header nav.mobile-nav {
    position: absolute;
    top: calc(100% + var(--space-xs));
    right: 0;
    left: auto;
    display: none;
    z-index: 1000;
    width: 40%;
    background-color: var(--color-white);
    border: calc(var(--space-xxs) * 0.375) solid var(--color-soft-gray);
    border-radius: var(--space-sm);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    min-width: 200px;
    padding: var(--space-lg);
  }
  header.site-header .desktop-nav {
    display: none;
  }
  header.site-header .header-mobile-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
  }
  header.site-header .header-icons {
    display: flex;
    gap: var(--space-xs);
  }
  header.site-header .header-icon-btn {
    width: var(--space-5xl);
    height: var(--space-5xl);
  }
  header.site-header .header-icon-btn i {
    font-size: var(--font-size-base);
  }
  header.site-header .header-actions {
    display: flex;
    flex-shrink: 0;
    margin-right: 0;
  }
  header.site-header .header-actions .btn {
    font-size: var(--font-size-sm);
    padding: var(--space-xs) var(--space-4xl);
  }
  header.site-header .header-actions .btn .btn-icon-left i,
  header.site-header .header-actions .btn .btn-icon-left i.ph-bold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
  }
  header.site-header .header-mobile-controls .mobile-menu-toggle {
    order: 2;
    margin-left: 0;
  }
  header.site-header nav.mobile-nav.mobile-menu-open {
    display: block;
  }
  header.site-header nav.mobile-nav::after {
    content: '';
    position: absolute;
    bottom: 100%;
    right: var(--space-sm);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--color-white);
  }
  header.site-header nav.mobile-nav::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: calc(var(--space-sm) - var(--space-xxs) * 0.375);

    /* -1.5px for visual alignment */
    width: 0;
    height: 0;
    border-left: 0.46875rem solid transparent;
    border-right: 0.46875rem solid transparent;
    border-bottom: calc(var(--space-2xl) * 0.46875) solid var(--color-soft-gray);

    /* 7.5px */
    z-index: -1;
  }
  header.site-header nav.mobile-nav.mobile-menu-open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: var(--space-sm);
    width: 100%;
    overflow: clip;
  }
  header.site-header nav.mobile-nav.mobile-menu-open .nav-links > li {
    width: 100%;
  }
  header.site-header nav.mobile-nav.mobile-menu-open .nav-links > li > a {
    display: block;
    width: 100%;
    text-align: left;
    position: relative;
    color: var(--color-charcoal);
  }
  header.site-header nav.mobile-nav.mobile-menu-open .nav-links > li > a.active,
  header.site-header nav.mobile-nav.mobile-menu-open .nav-links > li > a[aria-current="page"] {
    color: var(--color-primary);

    /* Active uses primary (deep-teal) */
  }
  /* Ensure header flex container works on mobile */
  header .container-wide > div {
    position: relative;
  }
  .nav-item-has-dropdown.active .nav-dropdown.mobile-accordion,
  header.site-header nav.mobile-nav.mobile-menu-open .nav-item-has-dropdown.active .nav-dropdown.mobile-accordion {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
  }
  .nav-item-has-dropdown.active .nav-dropdown.mobile-accordion *,
  header.site-header nav.mobile-nav.mobile-menu-open .nav-item-has-dropdown.active .nav-dropdown.mobile-accordion * {
    visibility: visible;
    opacity: 1;
  }
  header.site-header nav.mobile-nav.mobile-menu-open .nav-item-has-dropdown > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-decoration: none;
    position: relative;
    color: var(--color-charcoal);

    /* Accordion links use charcoal */
    text-align: left;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: var(--space-xs);
    min-width: 0;
    overflow: visible;
  }
  header.site-header nav.mobile-nav.mobile-menu-open .nav-item-has-dropdown {
    width: 100%;
  }
  /* Accordion chevron icon - prevent wrapping, keep on same line - scoped to .site-header */
  header.site-header nav.mobile-nav.mobile-menu-open .nav-item-has-dropdown > a .chevron-icon,
  header.site-header nav.mobile-nav.mobile-menu-open .nav-item-has-dropdown > a svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin-left: auto;
    order: 2;
  }
  header.site-header nav.mobile-nav.mobile-menu-open .nav-item-has-dropdown > a svg {
    transition: transform 0.3s ease;
  }
  header.site-header nav.mobile-nav.mobile-menu-open .nav-item-has-dropdown > a svg.rotate-180,
  header.site-header nav.mobile-nav.mobile-menu-open .nav-item-has-dropdown.active > a svg {
    transform: rotate(180deg);
  }
  header.site-header nav.mobile-nav.mobile-menu-open .nav-dropdown.mobile-accordion {
    align-items: flex-start;
    width: 100%;
  }
  header.site-header nav.mobile-nav.mobile-menu-open .nav-dropdown.mobile-accordion li {
    width: 100%;
    display: block;
    padding: var(--space-xs) 0;
    margin: 0;
    list-style: none;
    visibility: visible;
    opacity: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
  header.site-header nav.mobile-nav.mobile-menu-open .nav-dropdown.mobile-accordion a {
    text-decoration: none;
    position: relative;
    color: var(--color-charcoal);

    /* Accordion child links use charcoal */
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--space-xs) 0;
    visibility: visible;
    opacity: 1;
  }
}
.ph-bold {
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  line-height: 1;
}
.top-header .ph-bold,
.top-header i.ph-bold {
  color: var(--color-warm-white);
}
.btn .ph-bold,
.btn i.ph-bold {
  color: var(--color-white);
  transition: transform 0.3s ease;
}
.btn-secondary .ph-bold,
.btn-secondary i.ph-bold {
  color: var(--color-text-muted) !important;
}
.footer-social-link .ph-bold,
.footer-social-link i.ph-bold {
  font-size: 20px;
  color: var(--color-text-secondary);
  transition: color 0.3s ease;
}
.footer-social-link:hover .ph-bold,
.footer-social-link:hover i.ph-bold {
  color: var(--color-text-secondary);
}
.mobile-menu-toggle {
  display: none;
  background: var(--color-deep-teal);
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
  flex-direction: column;
  gap: var(--space-xxs);

  /* 4px */
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  position: relative;
  z-index: 1001;
  flex-shrink: 0;
  border-radius: 50%;
  transition: background-color 0.3s ease, transform 0.2s ease;
  visibility: visible;
  opacity: 1;
}
.mobile-menu-toggle:hover {
  background-color: var(--color-deep-teal-dark);
}
.mobile-menu-toggle:active {
  transform: scale(0.95);
}
.mobile-menu-toggle i {
  width: var(--space-2xl);

  /* 16px */
  height: var(--space-2xl);

  /* 16px */
  color: var(--color-white);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mobile-menu-toggle i.ph-bold {
  font-size: 16px;
  color: var(--color-white);
}
.mobile-menu-toggle svg {
  color: var(--color-white);
  stroke: var(--color-white);
}
.mobile-menu-toggle .menu-icon {
  display: block;
  opacity: 1;
  color: var(--color-white);
}
.mobile-menu-toggle .menu-icon svg {
  color: var(--color-white);
  stroke: var(--color-white);
}
.mobile-menu-toggle .close-icon {
  display: none;
  opacity: 0;
  color: var(--color-white);
}
.mobile-menu-toggle .close-icon svg {
  color: var(--color-white);
  stroke: var(--color-white);
}
.mobile-menu-toggle.active .menu-icon {
  display: none;
  opacity: 0;
}
.mobile-menu-toggle.active .close-icon {
  display: block;
  opacity: 1;
  color: var(--color-white);
}
.mobile-menu-toggle.active .close-icon svg {
  color: var(--color-white);
  stroke: var(--color-white);
}
.scroll-progress-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
  transition: all 0.3s ease;
  padding: 0;
}
.scroll-progress-btn.show {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.scroll-progress-btn:hover {
  transform: scale(1.1);
  box-shadow: none;
}
.scroll-progress-btn .progress-ring {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
  width: 50px;
  height: 50px;
}
.scroll-progress-btn .progress-ring-circle-bg {
  opacity: 0.3;
}
.scroll-progress-btn .progress-ring-circle {
  stroke-dasharray: 138.23;
  stroke-dashoffset: 138.23;
  transition: stroke-dashoffset 0.1s ease, stroke 0.3s ease;
  stroke-linecap: round;
  stroke: var(--color-primary);
}
.scroll-arrow-icon {
  position: relative;
  z-index: 1;
  width: var(--space-4xl);

  /* 20px */
  height: var(--space-4xl);

  /* 20px */
  color: var(--color-primary);
  transition: transform 0.3s ease;
}
.scroll-progress-btn:hover .scroll-arrow-icon {
  transform: translateY(-2px);
}
@media (max-width: 768px) {
  .scroll-progress-btn {
    bottom: 1.5rem;
    right: 1.5rem;
  }
}
#example-select {
  padding: var(--space-sm);
  padding-right: var(--space-xl);
}
.section-2 {
  padding: 0;
}
.section-2-content {
  width: 100%;
  padding: 0;
  max-width: none;
}
/* Hero Section Styles */

.hero-full-width {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  text-align: center;
  background-image: url('../images/Bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: sticky;
  top: 0;
  z-index: 0;
  width: 100%;
  margin-top: -7.5rem;

  /* -120px = -7.5rem */
}
.hero-container {
  position: relative;
  z-index: 1;
  padding-top: 7.5rem;

  /* 120px = 7.5rem */
}
.hero-text-secondary {
  color: var(--color-text-secondary);
}
.hero-buttons-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-2xl);
  margin-top: var(--space-6xl);
}
.section-full-width {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  position: sticky;
  top: 7.5rem;

  /* 120px - keeping as rem for consistency */
  z-index: 2;
  background-color: var(--color-white);
}
.container-center {
  text-align: center;
}
.container-border-bg {
  width: 100%;
  height: var(--space-4xl);

  /* 20px */
  background-image: url('../images/Border.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}
.border-spacer {
  height: var(--space-4xl);

  /* 20px */
}
/* About Preview */

.about-preview-text h2 {
  margin-bottom: var(--space-6xl);
}
.about-preview-text p {
  margin-bottom: var(--space-6xl);
}
.about-preview-text p:last-of-type {
  margin-bottom: var(--space-6xl);
}
.about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6xl);
  padding: var(--space-2xl) 0;
}
.about-preview-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
.about-preview-visual-img {
  width: 100% ;
  height: 100% ;
  object-fit: contain;
  border-radius: var(--space-sm);
}
.service-card {
  padding: var(--space-6xl);
  border: 1px solid var(--color-soft-gray);
  border-radius: var(--space-sm);

  /* 8px */
}
.service-icon {
  margin-bottom: var(--space-6xl);
}
.service-icon i {
  font-size: 32px;
  color: var(--color-primary);
}
.service-card h3 {
  margin-bottom: var(--space-6xl);
}
.service-card > p {
  margin-bottom: var(--space-6xl);
  color: var(--color-text-secondary);
}
.service-features {
  list-style: none;
  padding: 0;
}
.service-features li {
  margin-bottom: var(--space-xs);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}
.work-content > p {
  margin-bottom: var(--space-6xl);
  color: var(--color-text-secondary);
}
.work-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6xl);
  margin-bottom: var(--space-6xl);
}
.work-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-soft-gray);
  border-radius: var(--space-xxs);

  /* 4px */
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.work-tag i {
  font-size: 14px;
}
.section h2 {
  margin-bottom: var(--space-6xl);
}
.about-preview-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-20xl);
  align-items: start;
}
@media (min-width: 1024px) {
  .about-preview-content {
    grid-template-columns: 1.2fr 1fr;
  }
}
.grid.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6xl);
}
@media (min-width: 768px) {
  .grid.grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.work-item {
  background-color: var(--color-white);
  border: 1px solid var(--color-soft-gray);
  border-radius: var(--space-sm);

  /* 8px */
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.work-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.work-image {
  width: 100%;
  height: 240px;
  background-color: var(--color-soft-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.work-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-deep-teal-light) 0%, var(--color-soft-gray) 100%);
  color: var(--color-deep-teal);
  opacity: 0.6;
}
.work-image-placeholder i {
  font-size: 64px;
}
.work-content {
  padding: var(--space-6xl);
}
.work-content h3 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-sm);
}
.work-content h3 a {
  color: var(--color-charcoal);
  text-decoration: none;
}
.work-content h3 a:hover {
  color: var(--color-primary);
}
/* Timeline Component */

.timeline {
  position: relative;
  padding: var(--space-6xl) 0;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-soft-gray);
  transform: translateX(-50%);
  transform-origin: top;
  opacity: 0.3;
}
.timeline::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  background: var(--color-primary);
  transform: translateX(-50%);
  transform-origin: top;
  height: var(--timeline-height, 0%);
  transition: height 0.1s ease-out;
  z-index: 1;
}
.timeline-item {
  position: relative;
  margin-bottom: var(--space-7xl);
  display: flex;
  align-items: center;
}
.timeline-item:nth-child(odd) {
  flex-direction: row;
}
.timeline-item:nth-child(even) {
  flex-direction: row-reverse;
}
.timeline-content {
  width: 45%;
  padding: var(--space-6xl);
  background: var(--color-white);
  border: 1px solid var(--color-soft-gray);
  border-radius: var(--space-sm);
  position: relative;
}
.timeline-item:nth-child(odd) .timeline-content {
  margin-right: auto;
}
.timeline-item:nth-child(even) .timeline-content {
  margin-left: auto;
}
.timeline-dot {
  position: absolute;
  left: 50%;
  width: var(--space-7xl);

  /* 48px - increased from 24px */
  height: var(--space-7xl);

  /* 48px - increased from 24px */
  background: var(--color-primary);
  border: 4px solid var(--color-white);
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.timeline-dot i {
  color: var(--color-white);
  font-size: var(--space-4xl);

  /* 20px - increased from 16px */
}
.timeline-date {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-weight: 600;
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.timeline-content h3 {
  margin-bottom: var(--space-sm);
  color: var(--color-charcoal);
}
.timeline-content p {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6xl);
}
.slider-dot.active {
  background: var(--color-primary);
  width: var(--space-5xl);
  border-radius: var(--space-2xl);
}
.carousel-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.carousel-track {
  display: flex;
  gap: var(--space-6xl);
  transition: transform 0.5s ease;
  will-change: transform;
}
.carousel-item {
  flex: 0 0 auto;
  min-width: 300px;
  max-width: 400px;
}
.carousel-card {
  background: var(--color-white);
  border: 1px solid var(--color-soft-gray);
  border-radius: var(--space-sm);
  padding: var(--space-6xl);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.carousel-card-image {
  width: 100%;
  height: 200px;
  background: var(--color-soft-gray);
  border-radius: var(--space-sm);
  margin-bottom: var(--space-6xl);
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-card-image i {
  font-size: 48px;
  color: var(--color-text-muted);
}
.carousel-card h3 {
  margin-bottom: var(--space-sm);
  color: var(--color-charcoal);
}
.carousel-card p {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6xl);
  flex-grow: 1;
}
.carousel-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-6xl);
}
.carousel-arrow {
  background: var(--color-white);
  border: 1px solid var(--color-soft-gray);
  width: var(--space-7xl);
  height: var(--space-7xl);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-base);
  flex-shrink: 0;
}
.carousel-arrow:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}
.carousel-arrow:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - var(--space-7xl) / 2));
  }
}
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-6xl);
  justify-content: center;
}
.filter-tab {
  padding: var(--space-sm) var(--space-6xl);
  background: var(--color-white);
  border: 1px solid var(--color-soft-gray);
  border-radius: 9999px;

  /* Fully circular */
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
}
.filter-tab:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.filter-tab.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}
.filter-item {
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.filter-item.hidden {
  display: none;
}
.filter-item.fade-out {
  opacity: 0;
  transform: scale(0.95);
}
.filter-item.fade-in {
  opacity: 1;
  transform: scale(1);
}
@media (max-width: 768px) {
  .timeline::before {
    left: var(--space-5xl);
  }
  .timeline::after {
    left: var(--space-5xl);
  }
  .timeline-item {
    flex-direction: row !important;
    padding-left: var(--space-7xl);
  }
  .timeline-content {
    width: 100%;
    margin: 0 !important;
  }
  .timeline-dot {
    left: var(--space-5xl);
  }
  .carousel-item {
    min-width: 280px;
    max-width: 100%;
  }
  .filter-tabs {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: var(--space-sm);
    -webkit-overflow-scrolling: touch;
  }
  .filter-tab {
    flex-shrink: 0;
  }
}
/* Form Groups */

.form-group {
  margin-bottom: var(--space-xl);
}
.form-input {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--color-soft-gray);
  border-radius: var(--space-sm);

  /* 8px - matches card borders */
  background-color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  transition: border-color var(--transition-base);
}
.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.form-input:hover {
  border-color: var(--color-primary);
}
.form-input::placeholder {
  color: var(--color-text-muted);
}
select.form-input {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235B5755' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-sm) center;
  padding-right: var(--space-6xl);
}
@media (max-width: 768px) {
  .cart-item-image .work-image-placeholder {
    width: 100%;
    height: 200px;
  }
}