/* =============================================================================
   FONT DECLARATIONS
   ============================================================================= */

/* Cal Sans - Headlines and display text */
@font-face {
  font-family: 'Cal Sans';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/CalSans-Regular.ttf') format('truetype');
}

@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/InterDisplay-Light.woff2") format("woff2"); }
@font-face { font-family: "Inter Display"; font-style: italic; font-weight: 300; font-display: swap; src: url("/fonts/InterDisplay-LightItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/InterDisplay-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter Display"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/InterDisplay-Italic.woff2") format("woff2"); }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/InterDisplay-Bold.woff2") format("woff2"); }
@font-face { font-family: "Inter Display"; font-style: italic; font-weight: 800; font-display: swap; src: url("/fonts/InterDisplay-BoldItalic.woff2") format("woff2"); }


/* =============================================================================
   CSS CUSTOM PROPERTIES
   ============================================================================= */

:root {
  /* FONT SIZES */
  --step--2: clamp(0.7035rem, 0.8083rem + -0.1353vw, 0.7813rem);
  --step--1: clamp(0.9375rem, 0.9374rem + 0.0004vw, 0.9377rem);
  --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.24rem + 0.55vw, 1.6663rem);
  --step-2: clamp(1.62rem, 1.4109rem + 1.0454vw, 2.2211rem);
  --step-3: clamp(1.944rem, 1.5904rem + 1.7682vw, 2.9607rem);
  --step-4: clamp(2.3328rem, 1.7715rem + 2.8067vw, 3.9467rem);
  --step-5: clamp(2.7994rem, 1.9432rem + 4.281vw, 5.2609rem);

  /* SPACING */
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);
  
  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.2038rem + 0.5435vw, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vw, 0.9375rem);
  --space-xs-s: clamp(0.875rem, 0.7446rem + 0.6522vw, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vw, 1.875rem);
  --space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vw, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vw, 3.75rem);
  --space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vw, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vw, 7.5rem);
  
  /* Custom pairs */
  --space-s-l: clamp(1.125rem, 0.6467rem + 2.3913vw, 2.5rem);

  /* PRIMARY PURPLE PALETTE */
  --color-primary: oklch(37.924% 0.18298 304.178); /* Brand primary #59118E */
  --color-primary-50: oklch(0.96 0.02 304.18);
  --color-primary-100: oklch(0.91 0.04 304.18);
  --color-primary-200: oklch(0.82 0.08 304.18);
  --color-primary-300: oklch(0.71 0.12 304.18);
  --color-primary-400: oklch(0.58 0.15 304.18);
  --color-primary-500: oklch(0.3792 0.1829 304.18);
  --color-primary-600: oklch(0.33 0.17 304.18);
  --color-primary-700: oklch(0.28 0.15 304.18);
  --color-primary-800: oklch(0.22 0.12 304.18);
  --color-primary-900: oklch(0.15 0.08 304.18);
  --color-primary-950: oklch(0.10 0.05 304.18);

  /* SECONDARY BLUE PALETTE */
  --color-blue: oklch(0.7596 0.14305 224.32); /* Brand blue #00C3F4 */
  --color-blue-50: oklch(0.97 0.02 224.32);
  --color-blue-100: oklch(0.93 0.04 224.32);
  --color-blue-200: oklch(0.86 0.08 224.32);
  --color-blue-300: oklch(0.78 0.11 224.32);
  --color-blue-400: oklch(0.70 0.13 224.32);
  --color-blue-500: oklch(0.7596 0.14305 224.32);
  --color-blue-600: oklch(0.65 0.13 224.32);
  --color-blue-700: oklch(0.55 0.12 224.32);
  --color-blue-800: oklch(0.45 0.10 224.32);
  --color-blue-900: oklch(0.35 0.08 224.32);
  --color-blue-950: oklch(0.25 0.05 224.32);

  /* SECONDARY RED PALETTE */
  --color-red: oklch(0.6475 0.243 11.32);     /* Brand red #FE2568 */
  --color-red-50: oklch(0.97 0.02 11.32);
  --color-red-100: oklch(0.93 0.05 11.32);
  --color-red-200: oklch(0.86 0.10 11.32);
  --color-red-300: oklch(0.78 0.15 11.32);
  --color-red-400: oklch(0.70 0.20 11.32);
  --color-red-500: oklch(0.6475 0.243 11.32);
  --color-red-600: oklch(0.58 0.22 11.32);
  --color-red-700: oklch(0.50 0.20 11.32);
  --color-red-800: oklch(0.42 0.17 11.32);
  --color-red-900: oklch(0.32 0.13 11.32);
  --color-red-950: oklch(0.22 0.08 11.32);

  /* NEUTRAL GRAYSCALE PALETTE */
  --color-neutral-0: oklch(1.00 0 0);
  --color-neutral-50: oklch(0.98 0 0);
  --color-neutral-100: oklch(0.95 0 0);
  --color-neutral-200: oklch(0.90 0 0);
  --color-neutral-300: oklch(0.83 0 0);
  --color-neutral-400: oklch(0.74 0 0);
  --color-neutral-500: oklch(0.65 0 0);
  --color-neutral-600: oklch(0.55 0 0);
  --color-neutral-700: oklch(0.45 0 0);
  --color-neutral-800: oklch(0.35 0 0);
  --color-neutral-900: oklch(0.25 0 0);
  --color-neutral-950: oklch(0.15 0 0);
  --color-neutral-1000: oklch(0.05 0 0);
}

/* =============================================================================
   CSS RESET
   ============================================================================= */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2, h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img, picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* =============================================================================
   BASE TYPOGRAPHY
   ============================================================================= */

body {
  font-family: 'Inter Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: var(--step-0);
  color: var(--color-neutral-800);
  background-color: var(--color-neutral-0);}

/* Heading font assignments */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cal Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-weight: 700;
  color: var(--color-neutral-900);
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
h5 { font-size: var(--step-0); }
h6 { font-size: var(--step--1); }

/* =============================================================================
   ACCESSIBILITY & INTERACTION STATES
   ============================================================================= */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus states for interactive elements */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Remove default focus styles when focus-visible is supported */
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible),
a:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
  outline: none;
}

/* =============================================================================
   PRINT STYLES
   ============================================================================= */

@media print {
  /* Optimize colors for print */
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Ensure good contrast for links */
  a,
  a:visited {
    text-decoration: underline;
    color: black !important;
  }

  /* Show URLs after links */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }

  /* Don't show URLs for fragment identifiers or javascript */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }

  /* Improve typography for print */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    page-break-inside: avoid;
  }

  p,
  blockquote {
    orphans: 3;
    widows: 3;
  }

  blockquote,
  pre {
    page-break-inside: avoid;
  }

  /* Ensure images fit on page */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Hide non-essential elements */
  nav,
  aside,
  .no-print {
    display: none !important;
  }

  /* Use system fonts for better print rendering */
  body {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 12pt;
    line-height: 1.4;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: Arial, Helvetica, sans-serif;
  }
}


/* =============================================================================
           CONTAINER SYSTEM
           ============================================================================= */
        
        /**
         * Main wrapper container with responsive max-widths
         * Provides consistent horizontal margins and breakpoint-based sizing
         */
        .container {
            width: 100%;
            margin: 0 auto;
            padding: 0 var(--space-xs);
        }
        
        /* Responsive container widths */
        @media (min-width: 576px) {
            .container {
                padding: 0 1.25rem;
            }
        }
        
        @media (min-width: 1200px) {
            .container {
                max-width: 100vw; /* 1240px */
                padding: 0 var(--space-3xl);
            }
        }
        
        @media (min-width: 1920px) {
            .container {
                max-width: 98.25rem; /* 1572px */
            }
        }
        
        /**
         * Section wrapper for vertical spacing and background management
         * Use for major page sections
         */
        .section {
            position: relative;
            padding: 1.25rem 0;
        }
        
        .section--sm { padding: var(--space-m) 0 }
        .section--md { padding: var(--space-l) 0 }
        .section--lg { padding: var(--space-xl) 0 }
        .section--xl { padding: var(--space-2xl) 0 }
        
        
      
        
        /**
         * Grid Layout System
         * Flexible grid that adapts from single column to multi-column layouts
         */
        .grid {
            display: grid;
            gap: var(--space-s);
            grid-template-columns: 1fr;
        }
        
        /* Two column grid - stacks on mobile, side-by-side on larger screens */
        .grid--two-col {
            grid-template-columns: 1fr;
            margin-bottom: var(--space-s);;
        }
        
        @media (min-width: 1200px) {
            .grid--two-col {
                grid-template-columns: 1fr 1fr;
                gap: var(--space-s);
            }
            
            .grid--two-col .grid__item:first-child {
                margin-right: 0.625rem;
            }
            
            .grid--two-col .grid__item:last-child {
                margin-left: 0.625rem;
            }
        }
        
        /* Asymmetric two column - 60/40 split */
        .grid--asymmetric {
            grid-template-columns: 1fr;
        }
        
        @media (min-width: 1200px) {
            .grid--asymmetric {
                grid-template-columns: 1.2fr 3fr;
                gap: var(--space-s);
            }
        }
        
        /* Three column grid */
        .grid--three-col {
            grid-template-columns: 1fr;
            gap: var(--space-s);
        }
        
        @media (min-width: 768px) {
            .grid--three-col {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (min-width: 1200px) {
            .grid--three-col {
                grid-template-columns: repeat(3, 1fr);
                gap: var(--space-s);
            }
        }
        
        /* Auto-fit grid - responsive card layout */
        .grid--auto-fit {
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: var(--space-s);
        }
        
        @media (min-width: 768px) {
            .grid--auto-fit {
                gap: var(--space-s);
            }
        }
        
        /**
         * Grid Items
         * Individual grid items with optional styling
         */
        .grid__item {
            position: relative;
        }
        
        /* Full width item that spans all columns */
        .grid__item--full {
            grid-column: 1 / -1;
        }
        
        /* Item that spans two columns in multi-column layouts */
        .grid__item--span-2 {
            grid-column: span 1;
        }
        
        @media (min-width: 768px) {
            .grid__item--span-2 {
                grid-column: span 2;
            }
        }
        
        /**
         * Flex Layout Utilities
         * For header/navigation layouts and content alignment
         */
        .flex {
            display: flex;
            gap: var(--space-s);
        }
        
        .flex--center {
            align-items: center;
            justify-content: center;
        }
        
        .flex--between {
            align-items: center;
            justify-content: space-between;
        }
        
        .flex--column {
            flex-direction: column;
        }
        
        @media (min-width: 768px) {
            .flex--row-lg {
                flex-direction: row;
            }
        }
        
        /**
         * Spacing Utilities
         * Consistent margin and padding classes
         */
        .mt-0 { margin-top: 0; }
        .mt-1 { margin-top: 0.625rem; }
        .mt-2 { margin-top: 1.25rem; }
        .mt-3 { margin-top: 2.5rem; }
        .mt-4 { margin-top: 3.75rem; }
        .mt-5 { margin-top: 5rem; }
        
        .mb-0 { margin-bottom: 0; }
        .mb-1 { margin-bottom: 0.625rem; }
        .mb-2 { margin-bottom: 1.25rem; }
        .mb-3 { margin-bottom: 2.5rem; }
        .mb-4 { margin-bottom: 3.75rem; }
        .mb-5 { margin-bottom: 5rem; }
        
        /**
         * Content Area Utilities
         * For centering content and managing text flow
         */
        .content-center {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        
        .content-start {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
        }
        
        @media (min-width: 1440px) {
            .content-start-lg {
                align-items: flex-start;
                text-align: left;
            }
        }

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

/**
 * RESPONSIVE VISIBILITY UTILITIES
 * Show/hide elements based on screen size
 */

/* Mobile-only: visible on screens smaller than 768px */
.mobile-only { display: block; }
@media (min-width: 48em) { /* 768px */
  .mobile-only { display: none !important; }
}

/* Desktop-only: visible on screens 768px and larger */
.desktop-only { display: none; }
@media (min-width: 48em) { /* 768px */
  .desktop-only { display: block; }
}

/* Tablet and up: visible on screens 640px and larger */
.tablet-up { display: none; }
@media (min-width: 40em) { /* 640px */
  .tablet-up { display: block; }
}

/* Large desktop only: visible on screens 1024px and larger */
.large-desktop-only { display: none; }
@media (min-width: 64em) { /* 1024px */
  .large-desktop-only { display: block; }
}

/* Hide on mobile: hidden on screens smaller than 768px */
.hide-mobile { display: block; }
@media (max-width: 47.9375em) { /* 767px */
  .hide-mobile { display: none !important; }
}

/* Hide on desktop: hidden on screens 768px and larger */
.hide-desktop { display: block; }
@media (min-width: 48em) { /* 768px */
  .hide-desktop { display: none !important; }
}