/* =========================================
   Root variables & base reset
========================================= */
:root{
  --primary-color:#2c3e50;
  --accent-color:#3498db;
  --border-color:#ddd;
  --background-color:#f9f9f9;
  --font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  --max-width:1200px;
  --header-height:60px;
  --footer-height:50px;
}

/* Robust box-sizing + media defaults */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  font-family:var(--font-family);
  background:var(--background-color);
  color:#111;
}

/* Media elements scale nicely */
img,svg,video,canvas{ display:block; max-width:100%; height:auto; }

/* =========================================
   Layout: fixed header + fixed footer
   main gets the exact offset space once.
========================================= */
/* .headers{
  position:fixed; inset:auto 0 auto 0; top:0;
  height:var(--header-height);
  z-index:1000;
  background:#000; color:#fff;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
}
#logoContainer{ grid-column:2; display:grid; place-items:center; height:100%; }
#logoContainer a{ display:grid; place-items:center; height:100%; width:100%; }
.logoImages{ height:40px; width:auto; } */

/* ===== HEADER ===== */
/* ===== Header shell ===== */
/* ===== Header shell ===== */
.headers{
  position: fixed; top:0; left:0; right:0; z-index:1000;
  height: var(--header-height);
  background:#000; color:#fff;
  z-index: 2000;
}

/* Desktop grid: [spacer] [LOGO centered] [NAV right] */
.header-inner{
  height:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 12px;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:12px;
}

/* Centered logo */
#logoContainer{ grid-column:2; display:grid; place-items:center; height:100%; }
#logoContainer a{ display:grid; place-items:center; height:100%; width:100%; }
.logoImages{ height:40px; width:auto; display:block; }

/* Right-side nav (desktop) */
.nav-right{
  grid-column:3; justify-self:end;
  list-style:none; margin:0; padding:0;
  display:flex; gap:18px; align-items:center;
}
.nav-link{
  color:#fff; text-decoration:none; padding:6px 4px; position:relative;
}
.nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:#fff; transform:scaleX(0); transform-origin:left;
  transition:transform .18s ease;
}
.nav-link:hover::after, .nav-link:focus::after{ transform:scaleX(1); }

/* Hamburger (hidden on desktop) */
.nav-toggle{
  grid-column:1;
  width:40px; height:40px;
  background:none; border:0; color:#fff;
  display:none; place-items:center; cursor:pointer;
    position: relative;
  z-index: 2500;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.nav-toggle-bar{ width:22px; height:2px; background:#fff; position:relative; }
.nav-toggle-bar::before, .nav-toggle-bar::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:#fff;
  transition:transform .2s ease, top .2s ease;
}
.nav-toggle-bar::before{ top:-7px; }
.nav-toggle-bar::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar{ background:transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { top:0; transform:rotate(-45deg); }

/* Mobile sheet */
.mobile-nav{
  position:fixed; top:var(--header-height); left:0; right:0;
  background:#0a0a0a; color:#fff; border-top:1px solid #222;
  transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:transform .2s ease, opacity .2s ease; z-index:1500;
}
.mobile-nav.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
.mobile-list{ list-style:none; margin:0; padding:10px; }
.mobile-link{ display:block; color:#fff; text-decoration:none; padding:12px 10px; border-radius:8px; }
.mobile-link:hover{ background:#1a1a1a; }

/* Mobile breakpoint: show hamburger, hide desktop nav, keep logo centered */
@media (max-width: 899px){
  .header-inner{ grid-template-columns: 48px 1fr 48px; } /* [☰] [LOGO] [spacer] */
  .nav-toggle{ display:grid; }
  .nav-right { display:none; }
}


/* optional subtle shimmer over the logo */
/* .logo-shimmer{ position:relative; }
.logo-shimmer::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(110deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 60%);
  mix-blend-mode:screen; filter:blur(1px);
  transform:translateX(-120%) skewX(-18deg); opacity:0;
  animation:logo-shimmer 4.2s ease-in-out infinite 1s;
}
@keyframes logo-shimmer{
  0%{opacity:0; transform:translateX(-120%) skewX(-18deg);}
  25%{opacity:.7;}
  60%{opacity:0; transform:translateX(120%) skewX(-18deg);}
  100%{opacity:0;}
}
@media (prefers-reduced-motion:reduce){ .logo-shimmer::after{ animation:none; } } */




/* Main: single source of truth for spacing */
main{
  /* top | inline | bottom */
  padding: calc(var(--header-height) + 16px) 16px calc(var(--footer-height) + 16px);
  width:100%;
  max-width:var(--max-width);
  margin-inline:auto;
}

/* Prevent first-child margin collapse nibbling into the header space */
main > :first-child{ margin-top:0; }

/* Optional home helpers */
main.home{ text-align:center; }
main.home p{ max-width:600px; margin-inline:auto; }

/* Footer */
.footers {
  position: fixed;
  inset: auto 0 0 0;
  height: var(--footer-height);
  z-index: 1000;
  background: #000;
  color: #fff;
  display: flex;                /* switch from grid to flex for easier padding */
  align-items: center;          /* vertical center */
  justify-content: center;      /* horizontal center */
  padding: 0 1rem;              /* horizontal breathing room */
  text-align: center;
  box-sizing: border-box;       /* ensures padding doesn't break layout */
}


/* Map pages can opt-out of main padding/max-width */
body.map-layout main{
  padding:0;
  max-width:none;
}

/* =========================================
   Utilities
========================================= */
.center{ text-align:center; }
.hidden{ display:none !important; }

/* =========================================
   Responsive tweaks
========================================= */
@media (max-width:640px){
  :root{
    --header-height:56px;
    --footer-height:48px;
  }
  .logoImages{ height:36px; }
}

/* =========================================
   (Optional) Globe art sizing + effect
   Safe to remove if you don't need it.
========================================= */
.home .hero-illustration{ height:200px; width:auto; margin:20px auto 0; }

.globe-wrap{ position:relative; width:fit-content; margin:20px auto 0; }
.home .hero-illustration.globe-img{ height:200px; width:auto; }

/* Tint cycle */
.globe-wrap::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(60% 60% at 50% 42%, #62b3ff 0%, #6a5acd 60%, #3a3a3a 100%);
  mix-blend-mode:overlay; opacity:.8; filter:hue-rotate(0deg);
  animation:tm-tint-hue 16s linear infinite;
}
/* Shimmer sweep */
.globe-wrap::after{
  content:""; position:absolute; inset:-12% -20%; pointer-events:none;
  background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 60%);
  transform:skewX(-18deg); filter:blur(2px); mix-blend-mode:screen; opacity:0;
  animation:tm-shimmer 3.8s ease-in-out infinite;
}
/* Subtle breathe */
.globe-img{ animation:tm-breathe 7s ease-in-out infinite alternate; }

@media (prefers-reduced-motion:reduce){
  .globe-wrap::before,.globe-wrap::after,.globe-img{ animation:none; }
}

@keyframes tm-tint-hue{ from{filter:hue-rotate(0deg);} to{filter:hue-rotate(360deg);} }
@keyframes tm-shimmer{
  0%{opacity:0; transform:translateX(-40%) skewX(-18deg);}
  35%{opacity:1;}
  70%{opacity:0;}
  100%{opacity:0; transform:translateX(40%) skewX(-18deg);}
}
@keyframes tm-breathe{ from{filter:brightness(1) contrast(1);} to{filter:brightness(1.06) contrast(1.04);} }