/* ═══════════════════════════════════════════════
   THE WAY AGENCY — Design System
   Brand: Blue #3097D3, Cyan #20BCEE, Green #65C5B3, Navy #173358
   Type: Montserrat Semi Bold (headings) + Montserrat Light (body)
   ═══════════════════════════════════════════════ */

:root {
  --blue: #3097D3;
  --blue-dark: #2680B5;
  --blue-light: #4AABDE;
  --cyan: #20BCEE;
  --cyan-light: #5FD0F3;
  --green: #65C5B3;
  --green-light: #8AD4C7;
  --navy: #173358;
  --navy-dark: #0F2240;
  --navy-light: #1E4470;
  --charcoal: #1A1A1A;
  --slate: #555555;
  --gray: #888888;
  --border: #D8DDE3;
  --light-bg: #F4F7FA;
  --white: #FFFFFF;
  --black: #000000;
  --error: #D94040;
  --success: #2EAD6B;

  --font-heading: 'Montserrat', 'Segoe UI', sans-serif;
  --font-body: 'Montserrat', 'Segoe UI', sans-serif;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem;
  --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem;
  --text-hero: clamp(2.5rem, 5vw, 4rem);

  --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem;
  --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem;
  --space-3xl: 4rem; --space-4xl: 6rem;
  --space-section: clamp(3rem, 6vw, 6rem);

  --max-width: 1200px; --max-width-narrow: 800px;
  --nav-height: 76px; --border-radius: 6px; --border-radius-lg: 10px;
  --shadow-sm: 0 1px 3px rgba(23,51,88,.06);
  --shadow-md: 0 4px 14px rgba(23,51,88,.08);
  --shadow-lg: 0 8px 30px rgba(23,51,88,.1);
  --shadow-card: 0 2px 10px rgba(23,51,88,.06);
  --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-body);font-weight:300;font-size:var(--text-base);line-height:1.7;color:var(--charcoal);background:var(--white);overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none;transition:color var(--transition-fast)}
a:hover{color:var(--navy)}
ul,ol{list-style:none}

h1,h2,h3,h4,h5{font-family:var(--font-heading);font-weight:600;line-height:1.2;color:var(--navy)}
h1{font-size:var(--text-hero);margin-bottom:var(--space-lg);letter-spacing:-0.01em}
h2{font-size:var(--text-4xl);margin-bottom:var(--space-lg)}
h3{font-size:var(--text-2xl);margin-bottom:var(--space-md)}
h4{font-size:var(--text-xl);margin-bottom:var(--space-sm)}
p{margin-bottom:var(--space-md);max-width:72ch}
strong{font-weight:600}

.text-center{text-align:center} .text-sm{font-size:var(--text-sm)}
.text-lg{font-size:var(--text-lg);line-height:1.8}
.text-slate{color:var(--slate)} .text-white{color:var(--white)}

.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 var(--space-xl)}
.container--narrow{max-width:var(--max-width-narrow)}
.section{padding:var(--space-section) 0}
.section--light{background:var(--light-bg)}
.section--navy{background:var(--navy);color:var(--white)}
.section--navy h2,.section--navy h3{color:var(--white)}

.grid{display:grid;gap:var(--space-xl)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:768px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}
@media(min-width:769px) and (max-width:1024px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}}