/* ════════════════════════════════════════
       RESET & TOKENS
    ════════════════════════════════════════ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
    :root {
      /* colours */
      --teal:         #2a9d8f;
      --teal-dark:    #1f7a6f;
      --teal-light:   #f0faf8;
      --teal-border:  rgba(42,157,143,0.3);
      --navy:         #0d3350;
      --navy-mid:     #1a4d6e;
      --navy-light:   #9fc9e2;
      --text:         #1a1a1a;
      --text-muted:   #5a6a74;
      --border:       #dde3e7;
      --bg:           #f7f9fb;
      --white:        #ffffff;
      --warn-bg:      #fff8ec;
      --warn-border:  #f0c040;
      --warn-text:    #6b4a00;
      --alert-red:    #c0392b;
      --link:         #1a6fa0;
 
      /* typography — single source of truth */
      --fs-base:      15px;   /* body / all content text */
      --fs-sm:        13px;   /* topbar, footer, labels */
      --fs-xs:        12px;   /* eyebrows / section labels */
      --fs-chip-sub:  13px;   /* chip subtitles */
      --fs-icon:      18px;   /* inline icons */
      --fs-icon-sm:   16px;   /* row icons */
      --lh:           1.65;
 
      /* spacing — single source of truth */
      --pad-x:        32px;   /* horizontal page padding */
      --pad-y:        36px;   /* vertical section padding */
      --pad-card:     20px;   /* card inner padding */
      --gap:          16px;   /* grid gaps */
      --radius:       8px;
      --radius-lg:    12px;
    }
 
    html { font-size: var(--fs-base); }
 
    body {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: var(--fs-base);
      color: var(--text);
      background: var(--bg);
      line-height: var(--lh);
    }
 
    a { color: inherit; text-decoration: none; }
    a:hover { text-decoration: underline; }
    img { display: block; max-width: 100%; }
 
    /* ════════════════════════════════════════
       TOP BAR
    ════════════════════════════════════════ */
    .topbar {
      background: var(--navy-mid);
      color: #cce8f7;
      font-size: var(--fs-sm);
      padding: 9px var(--pad-x);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px;
    }
    .topbar-left {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }
    .topbar-left a { color: #cce8f7; }
    .topbar-left a:hover { color: #fff; text-decoration: none; }
    .topbar-item { display: flex; align-items: center; gap: 5px; }
    .topbar-item i { font-size: var(--fs-sm); }
    .topbar-social { display: flex; align-items: center; gap: 12px; }
    .topbar-social a { color: #cce8f7; font-size: var(--fs-icon); line-height: 1; }
    .topbar-social a:hover { color: #fff; }
 
    /* ════════════════════════════════════════
       NAV
    ════════════════════════════════════════ */
    nav {
      background: var(--navy);
      padding: 0 var(--pad-x);
      display: flex;
      align-items: center;
      gap: 24px;
    }
    .nav-logo { padding: 14px 0; }
    .nav-logo img { height: 36px; width: auto; }
    nav ul { list-style: none; display: flex; gap: 4px; margin-left: auto; }
    nav ul li a {
      color: var(--navy-light);
      font-size: var(--fs-sm);
      padding: 6px 12px;
      border-radius: var(--radius);
      display: block;
      transition: background 0.15s, color 0.15s;
    }
    nav ul li a:hover,
    nav ul li a.active {
      background: rgba(255,255,255,0.1);
      color: #fff;
      text-decoration: none;
    }
 
    /* ════════════════════════════════════════
       HERO
    ════════════════════════════════════════ */
    .hero {
      position: relative;
      min-height: 320px;
      display: flex;
      align-items: flex-end;
      overflow: hidden;
    }
    .hero-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 60%;
      z-index: 0;
    }
    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to right,
        rgba(13,51,80,0.88) 0%,
        rgba(13,51,80,0.65) 55%,
        rgba(13,51,80,0.15) 100%
      );
      z-index: 1;
    }
    .hero-content {
      position: relative;
      z-index: 2;
      padding: 48px var(--pad-x);
      max-width: 560px;
    }
    .hero-eyebrow {
      font-size: var(--fs-xs);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--navy-light);
      margin-bottom: 10px;
    }
    .hero h1 {
      font-size: 30px;
      font-weight: 600;
      color: #fff;
      line-height: 1.2;
      margin-bottom: 10px;
    }
    .hero-sub {
      font-size: var(--fs-base);
      color: var(--navy-light);
      margin-bottom: 22px;
    }
    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255,255,255,0.12);
      color: #e0f0fa;
      font-size: var(--fs-sm);
      padding: 7px 16px;
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,0.18);
    }
    .hero-badge i { font-size: var(--fs-icon-sm); }
    .hero-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--teal);
      color: #fff;
      font-size: var(--fs-base);
      font-weight: 500;
      padding: 12px 24px;
      border-radius: var(--radius);
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.15s;
    }
    .hero-cta:hover { background: var(--teal-dark); text-decoration: none; color: #fff; }
    .hero-cta i { font-size: var(--fs-icon); }
 
    /* ════════════════════════════════════════
       LAYOUT CONTAINER
    ════════════════════════════════════════ */
    .container {
      max-width: 900px;
      margin: 0 auto;
      padding: var(--pad-y) var(--pad-x);
    }
 
    /* ════════════════════════════════════════
       SHARED TYPOGRAPHY
    ════════════════════════════════════════ */
    .section-label {
      font-size: var(--fs-xs);
      font-weight: 600;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 14px;
    }
 
    /* ════════════════════════════════════════
       INTRO SECTION
    ════════════════════════════════════════ */
    .intro-section {
      background: var(--white);
      border-bottom: 1px solid var(--border);
      padding: var(--pad-y) var(--pad-x);
    }
    .intro-section .container {
      padding-top: 0;
      padding-bottom: 0;
    }
    .intro-title {
      font-size: 20px;
      font-weight: 600;
      color: var(--navy);
      margin-bottom: 14px;
      line-height: 1.3;
    }
    .intro-text {
      font-size: var(--fs-base);
      color: var(--text-muted);
      line-height: var(--lh);
      max-width: 820px;
    }
 
    /* ════════════════════════════════════════
       INTRO NOTE (services disclaimer)
    ════════════════════════════════════════ */
    .intro-note {
      font-size: var(--fs-base);
      color: var(--text-muted);
      background: var(--white);
      border: 1px solid var(--border);
      border-left: 3px solid var(--teal);
      border-radius: 0 var(--radius) var(--radius) 0;
      padding: var(--pad-card);
      margin-bottom: 24px;
      line-height: var(--lh);
    }
    .intro-note strong { color: var(--text); font-weight: 500; }
 
    /* ════════════════════════════════════════
       SERVICES GRID
    ════════════════════════════════════════ */
    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 10px;
      margin-bottom: 28px;
    }
    .service-chip {
      display: flex;
      align-items: flex-start;
      gap: 11px;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: var(--pad-card) 15px;
      font-size: var(--fs-base);
      color: var(--text);
      line-height: 1.45;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .service-chip:hover {
      border-color: #aacfca;
      box-shadow: 0 1px 4px rgba(42,157,143,0.08);
    }
    .service-chip i {
      font-size: var(--fs-icon);
      color: var(--teal);
      margin-top: 2px;
      flex-shrink: 0;
    }
    .service-chip.featured {
      border-color: var(--teal-border);
      background: var(--teal-light);
    }
    .chip-sub {
      font-size: var(--fs-chip-sub);
      color: var(--text-muted);
      margin-top: 4px;
      line-height: 1.5;
    }
 
    /* ════════════════════════════════════════
       NOTICE BOX
    ════════════════════════════════════════ */
    .notice-box {
      background: var(--warn-bg);
      border: 1px solid var(--warn-border);
      border-radius: var(--radius);
      padding: var(--pad-card);
      font-size: var(--fs-base);
      color: var(--warn-text);
      line-height: var(--lh);
      margin-bottom: 32px;
    }
    .notice-box strong { font-weight: 500; }
 
    /* ════════════════════════════════════════
       BOTTOM GRID (hours / contact / notes)
    ════════════════════════════════════════ */
    .bottom-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--gap);
    }
    .info-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--pad-card);
    }
    .info-card-title {
      font-size: var(--fs-xs);
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.07em;
      margin-bottom: var(--gap);
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .info-card-title i { font-size: var(--fs-icon-sm); color: var(--teal); }
 
    /* shared row style for hours / contact / alert */
    .hours-row,
    .contact-row,
    .alert-row {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      font-size: var(--fs-base);
      padding: 7px 0;
      border-bottom: 1px solid var(--border);
      color: var(--text);
      line-height: 1.5;
    }
    .hours-row { justify-content: space-between; }
    .hours-row:last-child,
    .contact-row:last-child,
    .alert-row:last-child { border-bottom: none; }
    .hours-row .day { color: var(--text-muted); }
    .contact-row i { font-size: var(--fs-icon-sm); color: var(--teal); flex-shrink: 0; margin-top: 2px; }
    .contact-row a { color: var(--link); }
    .contact-row a:hover { text-decoration: underline; }
    .alert-row i { font-size: var(--fs-icon-sm); color: var(--alert-red); flex-shrink: 0; margin-top: 2px; }
 
    /* ════════════════════════════════════════
       FOOTER
    ════════════════════════════════════════ */
    footer {
      background: var(--navy);
      color: var(--navy-light);
      padding: var(--pad-y) var(--pad-x) 24px;
    }
    .footer-grid {
      max-width: 900px;
      margin: 0 auto 28px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
    }
    .footer-col h4 {
      font-size: var(--fs-xs);
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #fff;
      margin-bottom: 14px;
    }
    .footer-col p,
    .footer-col address {
      font-size: var(--fs-sm);
      font-style: normal;
      line-height: 1.8;
      color: var(--navy-light);
    }
    .footer-col a { color: var(--navy-light); }
    .footer-col a:hover { color: #fff; text-decoration: none; }
    .footer-col .fi {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: var(--fs-sm);
      margin-bottom: 6px;
      color: var(--navy-light);
    }
    .footer-col .fi i { font-size: var(--fs-sm); color: #6bbdd4; flex-shrink: 0; }
    .footer-social { display: flex; gap: 12px; margin-top: 8px; }
    .footer-social a { color: var(--navy-light); font-size: var(--fs-icon); transition: color 0.15s; }
    .footer-social a:hover { color: #fff; }
    .footer-bottom {
      max-width: 900px;
      margin: 0 auto;
      border-top: 1px solid rgba(255,255,255,0.1);
      padding-top: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: var(--fs-sm);
      color: rgba(255,255,255,0.4);
      flex-wrap: wrap;
      gap: 8px;
    }
    .footer-bottom a { color: rgba(255,255,255,0.4); }
    .footer-bottom a:hover { color: rgba(255,255,255,0.8); text-decoration: underline; }
 
    /* ════════════════════════════════════════
       RESPONSIVE
    ════════════════════════════════════════ */
    @media (max-width: 720px) {
      :root { --pad-x: 16px; --pad-y: 28px; }
      .hero-content { padding: 36px var(--pad-x); }
      .services-grid { grid-template-columns: 1fr 1fr; }
      .bottom-grid { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr; gap: 24px; }
    }
    @media (max-width: 440px) {
      .services-grid { grid-template-columns: 1fr; }
      .hero h1 { font-size: 22px; }
    }
    @media (prefers-reduced-motion: reduce) {
      * { transition: none !important; }
    }