:root {
  --accent:#0e819b;
  --red:#c4161c;
  --muted:#444;
  --text:#222;
  --border:#ddd;
  --brand:#23267c;
}

/* ================== GLOBAL ================== */
body {
  margin:0;
  font-family:'Inter', Arial, sans-serif;
  background:#fff;
  color:var(--text);
  line-height:1.6;
}

/* Container */
.container {
  max-width:1200px;
  margin:0 auto;
  padding:40px 20px;
}

/* Page titles */
.page-title {
  text-align:center;
  font-size:36px;
  color:#114d5f;
  margin-bottom:50px;
}

/* Links */
a {
  color:#0077cc;
  text-decoration:none;
  transition:0.2s ease-in-out;
}
a:hover {
  text-decoration:underline;
}/* Make 🔍 button behave exactly like other nav links */
.icon-btn {
  border: none;                 /* remove border so width matches links */
  background: transparent;
  color: #23267c;
  font-size: 16px;
  padding: 4px 0;               /* same vertical padding as nav links */
  margin: 0;                    /* remove extra spacing */
  cursor: pointer;
  line-height: 1.4;             /* match alignment */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* Buttons (primary CTAs) */
.btn, .cta {
  background:var(--accent);
  color:#fff;
  padding:10px 20px;
  border-radius:6px;
  font-weight:600;
  text-decoration:none;
  display:inline-block;
  transition:0.2s ease-in-out;
}
.btn:hover, .cta:hover {
  background:#0b6a81;
}

/* ================== HEADER ================== */
.site-header {
  height:72px;
  position:sticky;
  top:0;
  z-index:50;
  background:#fff;
  border-bottom:1px solid var(--border);
}

.site-header .header-wrap {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
  gap:24px;
}

.site-header .container {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-left:16px;
  padding-right:24px;
  flex-wrap:nowrap;
}
html {
  overflow-y: scroll; /* Always reserve space for scrollbar */
}
/* Brand */
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  line-height:1;
}
.logo {
  height:72px;
  width:auto;
  object-fit:contain;
}
.brand-name {
  font-family:Lora, serif;
  font-size:20px;
  font-weight:300;
  color:var(--brand);
  margin-top:2px;
}

/* Nav */
.nav {
  display:flex;
  align-items:center;
  gap:22px;
}
.nav a {
  color:var(--brand);
  font-size:15.5px;
  text-decoration:none;
  opacity:.95;
  padding:4px 0;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.nav a:hover {
  opacity:1;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:2px;
}
.nav a.active {
  border-bottom-color:var(--accent);
}

/* ================== FOOTER ================== */
.site-footer {
  background:#f5f5f5;
  padding:30px 20px;
  text-align:center;
  color:#333;
  border-top:1px solid var(--border);
}

.footer-buttons {
  margin-bottom:15px;
}
.footer-buttons a {
  display:inline-block;
  background:#1e5d87;
  color:#fff;
  padding:8px 18px;
  margin:5px;
  border-radius:6px;
  font-weight:600;
  text-decoration:none;
}
.footer-buttons a:hover {
  background:#15405d;
}

.footer-address {
  margin:10px 0;
  font-size:15px;
  color:#222;
}

.footer-disclaimer {
  font-size:13px;
  color:#b00;
  margin:10px auto 20px;
  max-width:820px;
  line-height:1.6;
}

.footer-social {
  margin:15px 0;
}
.footer-social a img {
  width:30px;
  margin:0 8px;
  transition:transform .2s;
}
.footer-social a img:hover {
  transform:scale(1.15);
}

.footer-cta {
  display:inline-block;
  margin:20px 0;
  padding:10px 22px;
  background:#1e5d87;
  color:#fff;
  border-radius:6px;
  font-weight:700;
  text-decoration:none;
}
.footer-cta:hover {
  background:#15405d;
}

.footer-copy {
  margin-top:12px;
  font-size:14px;
  color:#444;
}

/* ================== RESPONSIVE ================== */
@media(max-width:1220px) {
  .nav { gap:16px; }
}
@media(max-width:1080px) {
  .nav { gap:12px; }
  .brand-name { font-size:16px; }
}
@media(max-width:900px) {
  .site-header .container {
    flex-wrap:wrap;
    height:auto;
    padding-top:8px;
    padding-bottom:8px;
  }
  .nav {
    width:100%;
    justify-content:center;
    gap:16px;
    margin-top:8px;
  }
}
/* ================== MOBILE NAV ================== */
.menu-toggle {
  display: none;
  font-size: 26px;
  background: none;
  border: none;
  color: #23267c;
  cursor: pointer;
}

@media(max-width: 900px) {
  .nav {
    display: none; /* hide menu by default */
    flex-direction: column;
    width: 100%;
    background: #fff;
    border-top: 1px solid var(--border);
    padding: 12px 0;
  }
  .nav a {
    padding: 10px 20px;
    border: none;
    font-size: 16px;
    text-align: center;
  }
  .menu-toggle {
    display: block; /* show hamburger */
  }
  .nav.active {
    display: flex; /* show menu when toggled */
  }
}
/* ================== SLIDE-IN MOBILE MENU ================== */
@media(max-width: 900px) {
  .nav {
    position: fixed;
    top: 0;
    right: -100%; /* hidden off-screen */
    height: 100%;
    width: 260px;
    background: #fff;
    box-shadow: -2px 0 12px rgba(0,0,0,0.15);
    flex-direction: column;
    align-items: flex-start;
    padding: 80px 20px 20px; /* push down below header */
    transition: right 0.3s ease-in-out;
    z-index: 1000;
  }

  .nav a {
    display: block;
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    color: #23267c;
    font-size: 16px;
    text-align: left;
  }

  .nav.active {
    right: 0; /* slide in */
  }

  .menu-toggle {
    display: block;
    font-size: 28px;
    background: none;
    border: none;
    cursor: pointer;
    color: #23267c;
    z-index: 1100;
  }
}

/* Hide mobile elements by default */
.menu-btn, .mobile-nav, .mobile-overlay { display: none; }

/* Mobile Hamburger */
.menu-btn {
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  display: none;
  color: #23267c;
}

/* Mobile Nav Drawer */
.mobile-nav {
  position: fixed;
  top: 0; right: 0;
  width: 75%;
  max-width: 320px;
  height: 100vh;
  background: #fff;
  box-shadow: -2px 0 8px rgba(0,0,0,0.15);
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  z-index: 200;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mobile-nav.active { transform: translateX(0); }
.mobile-nav a {
  font-size: 16px;
  color: #23267c;
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.mobile-nav a:hover { color: var(--accent); }
.mobile-nav .close-btn {
  align-self: flex-end;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 10px;
}

/* Overlay */
.mobile-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.3);
  z-index: 150;
  display: none;
}
.mobile-overlay.active { display: block; }

/* Responsive */
@media(max-width: 900px) {
  .desktop-nav { display: none; }
  .menu-btn { display: block; }
}
/* ======= MOBILE NAV USING CHECKBOX ======= */

/* Hide checkbox */
#menu-toggle {
  display: none;
}

/* Show overlay and mobile nav when checked */
#menu-toggle:checked ~ .mobile-nav {
  transform: translateX(0);
}
#menu-toggle:checked ~ .mobile-overlay {
  display: block;
}

/* Show hamburger on small screens */
@media (max-width: 900px) {
  .menu-btn {
    display: block;
  }

  .desktop-nav {
    display: none;
  }
}