/* Design System Tokens */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');

:root {
  /* Brand Color Palette */
  --color-midnight-navy: #17324D;
  --color-cool-mist: #EAF0EF;
  --color-muted-teal: #5C857C;
  --color-harbor-blue: #78A9BF;
  --color-white: #FFFFFF;
  --color-ink: #102333;
  --color-ink-light: #2A455E;
  --color-slate-subtle: #D8E2E1;
  --color-success: #2E6B55;
  --color-warning: #8A6328;
  --color-error: #A33B3B;

  /* Elevated Surface Tokens */
  --color-bg-primary: #EAF0EF;
  --color-bg-surface: #FFFFFF;
  --color-bg-navy: #17324D;
  --color-bg-dark-surface: #102333;
  --color-bg-accent-soft: rgba(120, 169, 191, 0.12);

  /* Text Color Tokens */
  --color-text-main: #102333;
  --color-text-muted: #3D5A73;
  --color-text-light: #EAF0EF;
  --color-text-light-muted: #B2CBD4;

  /* Border Tokens */
  --color-border: #CEDCD9;
  --color-border-hover: #5C857C;
  --color-border-dark: #2C4A66;

  /* Typography Tokens */
  --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  
  /* Type Scale */
  --text-xs: 0.75rem;   /* 12px */
  --text-sm: 0.875rem;  /* 14px */
  --text-base: 1rem;    /* 16px */
  --text-lg: 1.125rem;  /* 18px */
  --text-xl: 1.25rem;   /* 20px */
  --text-2xl: 1.5rem;   /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem;  /* 36px */
  --text-5xl: 3rem;     /* 48px */
  --text-6xl: 3.75rem;  /* 60px */

  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* UI Geometry */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(16, 35, 51, 0.08);
  --shadow-md: 0 4px 12px rgba(16, 35, 51, 0.1);
  --shadow-lg: 0 12px 32px rgba(23, 50, 77, 0.14);
  --shadow-glow: 0 0 24px rgba(120, 169, 191, 0.25);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Max Widths */
  --max-width-site: 1280px;
  --max-width-content: 800px;
  --max-width-narrow: 640px;
}

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

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-family); color: var(--color-text-main); background: var(--color-bg-primary); font-size: var(--text-base); line-height: 1.6; }
img { max-width: 100%; height: auto; }
a { color: var(--color-midnight-navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-muted-teal); }
h1,h2,h3,h4 { color: var(--color-midnight-navy); line-height: 1.15; margin: 0 0 var(--space-4); }
h1 { font-size: clamp(2.25rem, 5vw, var(--text-5xl)); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-xl); } p { margin: 0 0 var(--space-4); }
.container { width: min(calc(100% - 2rem), var(--max-width-site)); margin-inline: auto; }
.container-narrow { max-width: var(--max-width-narrow); }.text-center { text-align: center; }.section { padding: var(--space-20) 0; }.section-sm { padding: var(--space-6) 0; }.section-white { background: var(--color-white); }.lead { color: var(--color-text-muted); font-size: var(--text-lg); }
.utility-strip { background: var(--color-midnight-navy); color: var(--color-text-light); font-size: var(--text-sm); }.utility-inner { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--color-border); }.header-logo { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-midnight-navy); text-decoration: none; font-weight: 700; white-space: nowrap; }.header-logo img { width: 44px; height: 44px; }.brand-name { font-size: var(--text-lg); }.header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }.header-logo img { display: block; max-height: 44px; }.nav-links { list-style: none; display: flex; gap: var(--space-5); padding: 0; margin: 0; }.nav-link { color: var(--color-text-main); text-decoration: none; font-weight: 600; }.nav-link.active { color: var(--color-muted-teal); }.header-actions { display: flex; align-items: center; gap: var(--space-3); }
.btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--radius-sm); padding: .72rem 1rem; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: var(--transition-fast); }.btn-primary { color: white; background: var(--color-midnight-navy); }.btn-primary:hover { background: var(--color-muted-teal); color: white; }.btn-outline { border-color: var(--color-midnight-navy); }.btn-sm { font-size: var(--text-sm); padding: .55rem .8rem; }.mobile-nav-toggle { display: none; background: none; border: 0; color: var(--color-midnight-navy); }
.hero { padding: var(--space-20) 0; background: linear-gradient(135deg, var(--color-cool-mist), #fff); }.hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: var(--space-16); }.hero-title { margin-bottom: var(--space-5); }.hero-subtitle { color: var(--color-text-muted); font-size: var(--text-xl); }.hero-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: .35rem .7rem; margin-bottom: var(--space-4); border-radius: var(--radius-full); background: var(--color-bg-accent-soft); color: var(--color-midnight-navy); font-size: var(--text-sm); font-weight: 700; }.address-quick-form { display: flex; gap: var(--space-2); margin-top: var(--space-6); }.address-quick-form input, .form-input, .form-select { width: 100%; padding: .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; }.form-group { margin-bottom: var(--space-4); }.form-label { display:block; font-weight: 700; margin-bottom: var(--space-2); }.form-error { color: var(--color-error); font-size: var(--text-sm); }
.glass-panel,.card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }.card { padding: var(--space-6); display: flex; flex-direction: column; }.card-title { margin-bottom: var(--space-3); }.card-text { color: var(--color-text-muted); }.card-link { margin-top: auto; font-weight: 700; }.grid-3,.grid-4 { display:grid; gap: var(--space-5); }.grid-3 { grid-template-columns:repeat(3,1fr); }.grid-4 { grid-template-columns:repeat(4,1fr); }.trust-bar { background: var(--color-midnight-navy); color: var(--color-text-light); padding: var(--space-6) 0; }.trust-flex { display:flex; justify-content:space-between; gap:var(--space-4); }.trust-item { display:flex; align-items:center; gap:var(--space-2); font-weight:600; }.trust-icon { width:24px; height:24px; flex:none; }.site-footer { background: var(--color-bg-dark-surface); color: var(--color-text-light); padding: var(--space-16) 0 var(--space-8); }.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--space-8); }.footer-title { color:var(--color-white); font-size:var(--text-base); }.footer-links { list-style:none; padding:0; margin:0; }.footer-links li { margin-bottom:var(--space-2); }.footer-links a { color:var(--color-text-light-muted); }.comparison-table-wrapper { overflow-x:auto; }.comparison-table { width:100%; border-collapse:collapse; }.comparison-table th,.comparison-table td { padding:var(--space-3); border:1px solid var(--color-border); text-align:left; vertical-align:top; }.comparison-table th { background:var(--color-cool-mist); }.accordion-item { border-bottom:1px solid var(--color-border); }.accordion-header { width:100%; display:flex; justify-content:space-between; gap:var(--space-4); padding:var(--space-4) 0; background:none; border:0; font:inherit; font-weight:700; text-align:left; cursor:pointer; }.accordion-body { display:none; padding-bottom:var(--space-4); }.accordion-item.open .accordion-body { display:block; }.accordion-icon { transition:var(--transition-fast); }.accordion-item.open .accordion-icon { transform:rotate(180deg); }.skip-link { position:absolute; left:-10000px; }.skip-link:focus { left:1rem; top:1rem; z-index:30; background:#fff; padding:1rem; }
@media (max-width: 900px) { .hero-grid,.footer-grid { grid-template-columns:1fr; }.grid-3 { grid-template-columns:repeat(2,1fr); }.grid-4 { grid-template-columns:repeat(2,1fr); }.nav-links { display:none; }.nav-links.open { display:flex; position:absolute; top:76px; left:0; right:0; padding:var(--space-5); background:#fff; flex-direction:column; border-bottom:1px solid var(--color-border); }.mobile-nav-toggle { display:block; }.trust-flex { flex-wrap:wrap; }.utility-inner { padding:var(--space-2) 0; } }
@media (max-width: 560px) { .section,.hero { padding:var(--space-12) 0; }.grid-3,.grid-4 { grid-template-columns:1fr; }.address-quick-form { flex-direction:column; }.utility-inner { justify-content:center; text-align:center; }.utility-inner span:last-child,.header-actions .btn { display:none; } }