/* ===== Header background image ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Remove the old glass background so the photo shows */
  background: none;
  border-bottom: 1px solid var(--border);
}

/* Create the photo + subtle dark overlay */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.30)),
    url("assets/header.jpg") center/cover no-repeat; /* <-- update path if you used .jpeg */
}

/* Give the header enough height to reveal the image */
.header-inner {
  padding: 36px 0;                  /* more vertical space */
}

/* Make buttons and text readable on the photo */
.site-header .brand { 
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.site-header .btn { 
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
}

/* =====================
   Theme
===================== */
:root{
  --brand-dark:#0A1C2B;
  --brand-light:#0F2940;
  --accent:#36C1FF;
  --text:#e6edf7;
  --muted:#9fb0c6;
  --border:#1f3550;
}

body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#0A1C2B; /* fallback */
  background:linear-gradient(180deg,var(--brand-dark),var(--brand-light));
  color:var(--text);
  line-height:1.5;
}

.container{width:90%;max-width:1100px;margin:auto;}
.section{padding:3rem 0;}
.accent{color:var(--accent);}
.muted{color:var(--muted);}
.tiny{font-size:.8rem;}

/* Buttons */
.btn{
  padding:.6rem 1rem;border-radius:10px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--text);text-decoration:none;display:inline-block;cursor:pointer
}
.btn:hover{background:rgba(255,255,255,.12)}
.btn-accent{background:var(--accent);color:#0b1220}
.btn-accent:hover{filter:brightness(.95)}
.w-full{width:100%}

/* Header with background image */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
assets/img/hcl-header.jpeg     ← (rename your file to this if possible)
  /* overlay + image (switch to the escaped path if you kept spaces) */
  background:
    linear-gradient(180deg, rgba(10,28,43,.72), rgba(10,28,43,.38)),
    url('assets/img/hcl-header.jpeg') center/cover no-repeat;

  border-bottom: 1px solid var(--border);
}

/* Give the header enough height to show the image */
.header-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;

  min-height: 88px;        /* desktop banner height */
  padding: .6rem 0;
  position: relative;      /* for z-index stacking over bg */
}

/* Make brand/action text pop over the photo */
.site-header .brand,
.site-header .btn { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.35); }

/* Optional: tighter header on small screens */
@media (max-width: 720px){
  .header-inner { min-height: 72px; }
}
/* =====================
   Hero
===================== */
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero-ctas{justify-content:center}
}
.hero h1{font-size:clamp(28px,5vw,56px);margin:0}
.hero p{margin-top:.8rem;color:var(--muted)}
.hero-ctas{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.6rem}
.media-frame{position:relative;border:1px solid var(--border);border-radius:14px;overflow:hidden}
.media-frame .hero-video{display:block;width:100%;height:auto}

/* Hide the big hero image if you want a cleaner top */
.hero-media{display:none;}

/* =====================
   Spotlights (vertical swiper)
===================== */
#spotlights.section{padding:0;}

.spotlight-vertical{
  height:100svh;
  overflow:hidden; overscroll-behavior:contain;
  position:relative;
}
.spotlight-vertical .swiper-wrapper,
.spotlight-vertical .swiper-slide{height:100%}
.spotlight-vertical .swiper-slide{
  display:flex;align-items:center;justify-content:center;
}

/* 9:16 video box with 16:9 iframe center-cropped */
.spotlight-video{
  position:relative;
  width:min(420px,56vw);
  height:calc(min(420px,56vw) * 16 / 9); /* vertical frame for 16:9 source */
  max-height:80svh;
  border:1px solid var(--border);
  border-radius:16px;overflow:hidden;background:#000;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
@media (max-width:900px){
  .spotlight-video{
    width:min(92vw,440px);
    height:calc(min(92vw,440px) * 16 / 9);
    max-height:78svh;border-radius:0;
  }
}
.spotlight-video iframe{
  position:absolute;inset:0;margin:auto;border:0;display:block;
  height:100%;width:calc(100% * 16 / 9);
  left:50%;transform:translateX(-50%);
}

/* TikTok-style overlay */
.spotlight-overlay{
  position:absolute;left:0;right:0;bottom:0;
  padding:14px 14px 18px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));
  color:#fff;
}
.spotlight-title{font-weight:700;font-size:clamp(18px,2.4vw,28px);margin:0 0 6px}
.spotlight-caption{opacity:.9;font-size:clamp(13px,1.4vw,16px)}

/* Mobile actions on video */
.spotlight-actions{
  position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;gap:8px;
}
.spotlight-actions .btn{background:rgba(0,0,0,.6);border-color:rgba(255,255,255,.25)}
@media(min-width:901px){.spotlight-actions{display:none}}

/* Offer panel (desktop) */
.offer-aside{display:block;padding:24px 16px;border-left:1px solid var(--border)}
@media(max-width:900px){.offer-aside{display:none}}
.offer-aside .offer-card{
  background:rgba(255,255,255,.05);border:1px solid var(--border);
  border-radius:12px;padding:16px;
}
.offer-aside .offer-card h3{margin:0 0 6px}
.offer-aside .offer-card p{margin:8px 0;color:var(--muted)}

/* Swiper arrows */
.spotlight-vertical .swiper-button-prev,
.spotlight-vertical .swiper-button-next{
  width:44px;height:44px;border-radius:999px;
  background:rgba(0,0,0,.45);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.spotlight-vertical .swiper-button-prev::after,
.spotlight-vertical .swiper-button-next::after{font-size:18px;font-weight:800}
.spotlight-vertical .swiper-button-prev{left:8px}
.spotlight-vertical .swiper-button-next{right:8px}
@media(max-width:900px){
  .spotlight-vertical .swiper-button-prev{left:6px}
  .spotlight-vertical .swiper-button-next{right:6px}
}

/* =====================
   Map
===================== */
#map{
  height:420px;border-radius:14px;margin-top:1rem;
  border:1px solid var(--border);overflow:hidden;
}

/* =====================
   Offers
===================== */
.offers-grid{
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.offer-card{
  background:rgba(255,255,255,.05);border:1px solid var(--border);
  border-radius:12px;padding:1rem;
}
.actions-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}

/* Apple Wallet button */
.wallet-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.55rem .9rem;border-radius:10px;border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  color:#fff;text-decoration:none;font-weight:600;
  box-shadow:0 2px 6px rgba(0,0,0,.25) inset;
}
.wallet-btn:hover{background:rgba(255,255,255,.14)}
.wallet-icon{
  width:18px;height:18px;display:inline-block;border-radius:4px;
  background:
    linear-gradient(45deg,#ffcc00 0 50%, transparent 50%) top/100% 50%,
    linear-gradient(45deg,#34c759 0 50%, #5856d6 50%) bottom/100% 50%;
  background-repeat:no-repeat;
}

/* =====================
   Starter Packs (cards) – optional
===================== */
.packs-grid{
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:1rem;
}
.pack-card{
  background:rgba(255,255,255,.05);border:1px solid var(--border);
  border-radius:14px;padding:1rem;display:flex;flex-direction:column;justify-content:space-between;
}
.pack-card header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.5rem}
.pack-card h3{margin:0}
.price-tag{font-weight:700;padding:.15rem .5rem;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.06)}
.pack-features{list-style:none;padding:0;margin:.25rem 0 1rem}
.pack-features li{margin:.25rem 0;color:var(--muted)}
.pack-cta{width:100%}

/* ===== Lead Form (Responsive & No-Overflow) ===== */
.form-shell{
  max-width: 980px;
  margin: 0 auto;
}

.form-card{
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem;
}

.form-header h2{ margin: 0 0 .35rem; }
.form-header p { margin: 0 0 .75rem; }

/* Grid that never overflows */
.form-grid{
  display: grid;
  grid-template-columns: 1fr;     /* mobile: single column */
  gap: .9rem;
}

/* 2 columns starting at tablet/desktop */
@media (min-width: 820px){
  .form-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
    row-gap: 1rem;
  }
  .form-actions{ grid-column: 1 / -1; }  /* actions full width row */
}

/* prevent children from expanding grid and causing overflow */
.form-field{ display: grid; gap: .35rem; min-width: 0; }
.form-field label{ font-size: .9rem; color: var(--muted); }

/* inputs that never overflow their cell */
.form-field input{
  width: 100%;
  min-width: 0;                /* key to stop overflow */
  box-sizing: border-box;
  padding: .7rem .8rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #0b1a2a;
  color: var(--text);
  outline: none;
  transition: box-shadow .2s, border-color .2s, background-color .2s;
}

.form-field input::placeholder{ color:#8aa1bc; opacity:.7; }
.form-field input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(54,193,255,.15);
}
.form-field input.invalid{
  border-color:#ff6b6b;
  box-shadow:0 0 0 3px rgba(255,107,107,.22);
}
.form-field .error{ min-height:1em; color:#ffb3b3; font-size:.8rem; }

/* Actions row */
.form-actions{
  display:flex; align-items:center; gap:.75rem;
  flex-wrap: wrap;
}
.form-actions .privacy{ margin-left:.25rem; }

/* Button & spinner */
.form-submit{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; min-height:44px; padding:.75rem 1rem;
  border-radius:12px; font-weight:600;
}
.form-submit[disabled]{ opacity:.75; cursor:not-allowed; }
.btn-spinner{
  display:none; width:16px; height:16px;
  border:2px solid #0b1220; border-top-color:transparent;
  border-radius:50%; animation:spin .9s linear infinite;
}
.form-submit.sending .btn-spinner{ display:inline-block; }
@keyframes spin{ to{ transform: rotate(360deg); } }

.form-success{
  margin-top:.9rem; padding:.75rem .9rem;
  border-radius:12px; border:1px solid #1e3b55;
  background:rgba(54,193,255,.10); color:var(--text);
}

/* =====================
   Footer
===================== */
.site-footer{
  border-top:1px solid var(--border);
  padding:2rem 0;text-align:center;color:var(--muted);
}