/* === Vars & base === */
:root{
  --bg-deep:#031c14;
  --bright-green:#63ff6b;
  --bright-green-2:#b3ff84;
  --text:#eaffea;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:"Lato", Arial, sans-serif;
  color:var(--text);
  background:#000;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* ===== Nav (matches other pages) ===== */
.navbar{
  position:absolute;
  top:16px; left:0; right:0;
  width:100%; max-width:1200px; margin:0 auto;
  padding:0 clamp(16px,3vw,28px);
  display:flex; justify-content:space-between; align-items:center;
  z-index:10; /* keep above page content */
  background:transparent;
}
.logo img{height:22px; display:block; filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
.nav-menu{
  display:flex; gap:1.2rem; align-items:center;
  padding:10px 16px; border-radius:999px;
  background:linear-gradient(90deg,var(--bright-green),var(--bright-green-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 10px 24px rgba(0,0,0,.45);
}
.nav-menu a{
  color:#0b3a28; font-weight:800; text-decoration:none;
  font-size:.98rem; line-height:1; padding:8px 10px; border-radius:999px;
}

/* ===== Mobile hamburger / sidebar ===== */
.menu-toggle{
  display:none;                  /* shown on small screens */
  flex-direction:column; justify-content:space-between;
  width:26px; height:20px;
  background:transparent; border:none; cursor:pointer;
  z-index:1002; /* above overlay */
}
.menu-toggle .bar{
  height:3px; width:100%; background-color:var(--bright-green);
  border-radius:2px;
}

/* Off-canvas sidebar */
.sidebar{
  position:fixed; top:0; right:-100%;
  width:min(76vw, 320px); height:100vh;
  background:#0b1f16; /* solid, non-transparent */
  display:flex; flex-direction:column; gap:1.4rem;
  padding:80px 28px 28px;
  box-shadow:-6px 0 18px rgba(0,0,0,.5);
  transition:right .28s ease;
  z-index:1001; /* above overlay */
}
.sidebar a{
  color:var(--bright-green);
  text-decoration:none; font-weight:800; font-size:1.05rem;
}
.sidebar.active{ right:0; }

/* Overlay (immediately after .sidebar in DOM) */
.sidebar-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
  z-index:1000; /* below sidebar, above page */
}
.sidebar.active + .sidebar-overlay{
  opacity:1; pointer-events:auto;
}

/* Hide hamburger while menu is open */
body.nav-open .menu-toggle{ display:none; }

/* Close button */
.close-btn{
  position:absolute; top:18px; right:22px;
  background:none; border:none; color:var(--bright-green);
  font-size:2rem; cursor:pointer; line-height:1;
}

/* Responsive visibility of menus */
@media (max-width:900px){
  .menu-toggle{ display:flex; }
  .nav-menu{ display:none; }
}
@media (min-width:901px){
  .sidebar, .sidebar-overlay{ display:none !important; }
}

/* Prevent background scroll when open */
body.nav-open{ overflow:hidden; }

/* ===== Contact Hero ===== */
.contact-hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  background:#000;
  overflow:hidden;
}
.contact-inner{
  position:relative; 
  z-index:1;
  max-width:1200px;
  margin:0 auto;
  padding: clamp(140px, 18vh, 180px) clamp(16px,3vw,28px);
  display:grid; 
  gap: clamp(28px,6vw,80px);
  grid-template-columns: 1.05fr 0.95fr;
}

.contact-title{
  color:var(--bright-green);
  font-weight:800;
  line-height:1.08;
  letter-spacing:.01em;
  font-size: clamp(1.8rem, 1rem + 3.2vw, 3.2rem); /* smaller per your change */
  text-shadow:0 8px 24px rgba(0,0,0,.5);
  margin-bottom: clamp(12px,2vh,16px);
}

.contact-lede{
  color:#f2fff0; opacity:.96;
  line-height:1.65;
  font-size:clamp(1rem,.7rem + 1vw,1.15rem);
  max-width:56ch;
}
.contact-meta{
  list-style:none;
  margin-top: clamp(16px,3vh,24px);
  display:grid; gap:12px;
}
.contact-meta a{ color:#ecfff0; text-decoration:none }
.contact-meta a:hover{ text-decoration:underline }
.meta-icon{
  display:inline-grid; place-items:center;
  width:24px; height:24px; margin-right:8px;
  border-radius:999px; background:rgba(99,255,107,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.contact-meta li{
  display:flex; align-items:center; gap:8px;
  color:#dfffe0;
}

/* Right card */
.contact-card{
  background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 40%, rgba(0,0,0,.0) 100%),
             linear-gradient(180deg,#2a2f2c 0%, #1c201e 100%);
  border:1px solid rgba(160,255,160,.18);
  border-radius:28px;
  padding: clamp(22px,2.6vw,28px);
  box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.card-title{
  color:var(--bright-green);
  font-weight:800;
  font-size:clamp(1.3rem,.9rem + 1.4vw,1.6rem);
  margin-bottom: clamp(20px, 2.8vh, 28px); /* extra space before fields */
}

/* Form */
.contact-form{ display:grid; gap: clamp(16px,2.6vw,22px) }
.form-row{ display:grid; gap: clamp(14px,2vw,18px); grid-template-columns: 1fr 1fr }
.field{ display:grid; gap:8px }
.label{ color:#d7ffd0; font-weight:700; font-size:.95rem }

input, textarea{
  width:100%;
  color:#f1fff0; background:transparent;
  border:none; outline:none;
  border-bottom:2px solid rgba(255,255,255,.25);
  padding:.6rem .25rem .7rem;
  font-size:1rem;
}
input::placeholder, textarea::placeholder{ color:rgba(255,255,255,.45) }
input:focus, textarea:focus{
  border-bottom-color: var(--bright-green);
  box-shadow: 0 10px 28px rgba(99,255,107,.12);
}

/* Submit pill (kept identical look) */
.cta-pill {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  margin-top: clamp(20px, 2.5vh, 28px);
  padding: 1.1rem 2rem;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  font-family: "Lato", Arial, sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: #163F2A;
  background: linear-gradient(180deg, #78FF64 0%, #6BF85B 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.35),
    0 6px 0 #1C3324,
    0 10px 18px rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.cta-pill:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.4),
    0 8px 0 #1C3324,
    0 16px 28px rgba(0,0,0,.4);
}
.cta-pill:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 3px 0 rgba(0,0,0,.25),
    0 4px 0 #1C3324;
}

/* Responsive */
@media (max-width: 980px){
  .contact-inner{ grid-template-columns: 1fr; }
  .contact-card{ order: 2 }
  .contact-copy{ order: 1 }
  .form-row{ grid-template-columns: 1fr; }
}

/* ===== Footer (identical to home page) ===== */
.site-footer{
  background:#000;
  color:#fff;
  padding: clamp(40px, 7vh, 72px) 0 16px;
  font-family:"Lato", Arial, sans-serif;
}
.footer-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 clamp(16px,3vw,32px);
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr; /* brand + 3 columns */
  gap: clamp(24px, 4vw, 64px);
  align-items:start;
}

/* Brand block */
.footer-logo img{
  height:24px;
  width:auto;
  display:block;
  margin-bottom:14px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
}
.footer-address a{
  color:#cfead0;
  font-size:.95rem;
  text-decoration:underline;
}
.footer-address{ margin:12px 0 20px }
.footer-kicker{
  color:var(--bright-green);
  font-weight:800;
  margin-bottom:8px;
}
.footer-email{
  color:#e9ffe6;
  text-decoration:none;
  display:inline-block;
  margin-bottom:12px;
}
.footer-email:hover{ text-decoration:underline }

/* Social icon */
.footer-social{ display:flex; gap:10px }
.social-linkedin svg{ width:26px; height:26px; display:block }
.social-linkedin rect{ fill:var(--bright-green) }
.social-linkedin path{ fill:#052a17 }
.social-linkedin:hover rect{ filter:brightness(1.05) }

/* Columns */
.footer-columns{ display:contents } /* let .footer-col participate in grid */
.footer-col h3{
  color:var(--bright-green);
  font-size:1.05rem;
  margin:2px 0 10px;
  font-weight:800;
}
.footer-col ul{ list-style:none; padding:0; margin:0 }
.footer-col li + li{ margin-top:10px }
.footer-col a{
  color:#f1fff0;
  text-decoration:none;
  font-weight:600;
}
.footer-col a:hover{ text-decoration:underline }

/* Bottom line */
.footer-bottom{
  max-width:1200px;
  margin: 18px auto 0;
  padding: 0 clamp(16px,3vw,32px);
  display:flex;
  justify-content:flex-end;
  color:#c8e9c9;
  font-size:.9rem;
}

/* Footer link spacing fix */
.site-footer .footer-col ul{
  display:grid;
  gap: clamp(8px, 0.7rem, 12px);
}
.site-footer .footer-col li + li{ margin-top:0 !important }
.site-footer .footer-col a{
  line-height:1.55;
  padding-block:2px;
}

/* Responsive footer */
@media (max-width:980px){
  .footer-inner{ grid-template-columns: 1fr 1fr }
}
@media (max-width:680px){
  .footer-inner{ grid-template-columns: 1fr }
  .footer-bottom{ justify-content:center; text-align:center }
}

/* Contact icons (address + email) */
.contact-meta li{
  display: flex;
  align-items: center;
  gap: 12px;
}

.contact-icon{
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.3));
}