/* ==========================================================================
   Kiwi Pools — shared design system
   Consolidated from the 8 page mockups. All pages link this one file
   instead of duplicating ~180 lines of CSS each.
   ========================================================================== */

:root{
  --navy:#0A2942; --navy-deep:#071B2C; --teal:#0FA9C4; --cyan:#4DD3EC; --green:#57C24B;
  --white:#FFFFFF; --ink:#0E1116; --mist:#F4F9FA; --line:rgba(10,41,66,0.12);
  --max:1120px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --mist:#0F2333; --white:#101C28; --ink:#F2F6F7; --line:rgba(255,255,255,0.14); }
}
:root[data-theme="dark"]{ --mist:#0F2333; --white:#101C28; --ink:#F2F6F7; --line:rgba(255,255,255,0.14); }

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:'Plus Jakarta Sans',-apple-system,sans-serif;background:var(--white);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,.disp{font-family:'Unbounded','Plus Jakarta Sans',sans-serif;font-weight:700;line-height:1.1;margin:0;letter-spacing:-0.01em;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}
.wrap-narrow{max-width:880px;}
.wrap-narrower{max-width:760px;}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:16px 30px;border-radius:100px;font-weight:700;font-size:1rem;border:2px solid transparent;cursor:pointer;transition:transform .18s ease, box-shadow .18s ease;font-family:'Plus Jakarta Sans',sans-serif;white-space:nowrap;}
.btn:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;}
.btn-primary{background:linear-gradient(100deg,var(--teal),var(--green));color:#fff;box-shadow:0 10px 24px -10px rgba(15,169,196,0.55);}
.btn-primary:hover{transform:translateY(-2px);}
.btn-primary:disabled{opacity:0.4;cursor:not-allowed;transform:none;}
.btn-outline{background:transparent;border-color:rgba(255,255,255,0.55);color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,0.12);}
.btn-dark-outline{background:transparent;border-color:var(--line);color:var(--navy);}
.btn-dark-outline:hover{background:var(--mist);}
.btn-block{width:100%;}
.btn-sm{padding:11px 20px;font-size:0.88rem;}

/* Header
   Colors here are intentionally fixed (#fff / #0A2942 / #F4F9FA) instead of
   the var(--white)/var(--mist) tokens used elsewhere on the page. Those
   tokens flip to dark values under prefers-color-scheme:dark, which left
   header text (a fixed dark navy) sitting on a dark background — the
   "dark on dark" problem. The header chrome now looks the same, with
   guaranteed contrast, on every page regardless of the visitor's OS theme. */
header{position:fixed;top:0;left:0;right:0;z-index:100;padding:16px 0;}
header.static-header{background:#FFFFFF;box-shadow:0 2px 20px rgba(7,27,44,0.08);padding:14px 0;}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1400px;}
.brand img{height:40px;width:auto;}
.header-actions{display:flex;align-items:center;gap:22px;}
.call-pill{display:flex;align-items:center;gap:8px;font-weight:700;font-size:0.9rem;color:#0A2942;margin-right:2px;white-space:nowrap;}
.call-pill svg{width:16px;height:16px;}

/* Main site nav (all 8 pages, in workflow order) */
.main-nav{display:flex;align-items:center;gap:16px;}
.main-nav a{font-size:0.85rem;font-weight:600;color:#0A2942;opacity:0.65;white-space:nowrap;transition:opacity .15s ease,color .15s ease;}
.main-nav a:hover{opacity:1;}
.main-nav a.active{opacity:1;color:var(--teal);}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;margin:-6px;}
.nav-toggle svg{width:24px;height:24px;stroke:#0A2942;display:block;}
.nav-toggle .icon-close{display:none;}
.nav-toggle.open .icon-menu{display:none;}
.nav-toggle.open .icon-close{display:block;}

@media (max-width:1400px){
  .main-nav{
    display:none;position:fixed;top:64px;left:0;right:0;bottom:0;
    background:#FFFFFF;flex-direction:column;align-items:stretch;gap:0;
    padding:8px 24px 24px;overflow-y:auto;z-index:99;
    box-shadow:0 12px 24px rgba(7,27,44,0.12);
  }
  .main-nav.open{display:flex;}
  .main-nav a{font-size:1.05rem;padding:14px 0;border-bottom:1px solid var(--line);opacity:0.85;color:#0A2942;}
  .nav-toggle{display:flex;align-items:center;justify-content:center;}
}
@media (min-width:1401px){
  header .nav-toggle{display:none !important;}
}

/* Collapsing header: full bar at the top of the page, smoothly collapsing
   into a small rounded pill anchored top-right once the visitor scrolls,
   then reopening back into the full bar on the way back to the top. Same
   behavior, same timing, on every page (toggled by js/nav.js). */
/* Fade the logo and the phone/CTA/hamburger cluster individually, not
   their shared .wrap — .main-nav is also a child of .wrap, and opacity
   on an ancestor can't be undone by a descendant, which would take the
   full-screen nav dropdown down with it if .wrap itself were faded. */
header.static-header .brand,
header.static-header .header-actions{
  transition:opacity .45s cubic-bezier(.22,1,.36,1);
}
body.header-collapsed header.static-header .brand,
body.header-collapsed header.static-header .header-actions{
  opacity:0; pointer-events:none;
}
.collapsed-pill{
  position:fixed; top:14px; right:24px; z-index:110;
  display:flex; align-items:center; gap:10px;
  background:#FFFFFF; border:1px solid var(--line);
  border-radius:100px; padding:8px 10px 8px 8px;
  box-shadow:0 10px 28px rgba(7,27,44,0.18);
  opacity:0; transform:translateX(26px) scale(0.9);
  pointer-events:none; cursor:pointer;
  transition:opacity .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1);
}
.collapsed-pill img{height:26px;width:26px;border-radius:50%;object-fit:cover;}
.collapsed-pill svg{width:20px;height:20px;stroke:#0A2942;display:block;}
body.header-collapsed .collapsed-pill{
  opacity:1; transform:translateX(0) scale(1); pointer-events:auto;
}
@media (prefers-reduced-motion: reduce){
  header.static-header .wrap, .collapsed-pill{ transition:opacity .15s linear; }
}

/* One-time entrance on page load: the header slides down into place, then
   the nav links cascade in one after another for a premium first-impression
   feel. This runs once on load only — the collapse-on-scroll behavior above
   is a separate opacity transition and is unaffected by it.
   IMPORTANT: the header's animation must NOT use fill-mode "forwards"/"both"
   — any transform value other than "none" (even a completed translateY(0))
   creates a new containing block for position:fixed descendants, which
   would hijack the mobile full-screen nav dropdown (.main-nav.open is
   position:fixed) into positioning itself relative to the header instead
   of the viewport. Without "forwards", the transform reverts to "none"
   as soon as the animation finishes, so this never lingers. Nav links
   only animate position (not opacity), so even if the animation fails to
   run for any reason, the links are never at risk of staying invisible —
   their opacity always comes from the normal (non-animated) rules below. */
@keyframes headerSlideIn{
  from{ transform:translateY(-100%); }
  to{ transform:translateY(0); }
}
@keyframes navItemIn{
  from{ transform:translateY(-8px); }
  to{ transform:translateY(0); }
}
header.static-header{ animation:headerSlideIn .6s cubic-bezier(.22,1,.36,1); }
header.static-header .main-nav a{
  animation:navItemIn .5s cubic-bezier(.22,1,.36,1) backwards;
}
header.static-header .main-nav a:nth-child(1){animation-delay:250ms;}
header.static-header .main-nav a:nth-child(2){animation-delay:310ms;}
header.static-header .main-nav a:nth-child(3){animation-delay:370ms;}
header.static-header .main-nav a:nth-child(4){animation-delay:430ms;}
header.static-header .main-nav a:nth-child(5){animation-delay:490ms;}
header.static-header .main-nav a:nth-child(6){animation-delay:550ms;}
header.static-header .main-nav a:nth-child(7){animation-delay:610ms;}
header.static-header .main-nav a:nth-child(8){animation-delay:670ms;}
@media (prefers-reduced-motion: reduce){
  header.static-header, header.static-header .main-nav a{ animation:none; }
}

/* Animated brand-color glow behind primary (green/teal gradient) CTA
   buttons — a slow, subtle color bloom, not a hard rainbow cycle. */
.btn-primary{position:relative;isolation:isolate;}
.btn-primary::before{
  content:'';position:absolute;inset:-10px;z-index:-1;border-radius:inherit;
  background:
    radial-gradient(circle at 30% 35%, var(--cyan) 0%, transparent 60%),
    radial-gradient(circle at 70% 65%, var(--green) 0%, transparent 60%),
    radial-gradient(circle at 50% 50%, var(--teal) 0%, transparent 70%);
  background-size:180% 180%;
  filter:blur(14px);
  opacity:0.55;
  animation:btnGlow 8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes btnGlow{
  0%,100%{ background-position:20% 30%, 80% 70%, 50% 50%; transform:scale(1); }
  33%{ background-position:65% 15%, 25% 85%, 60% 35%; transform:scale(1.06); }
  66%{ background-position:30% 75%, 75% 25%, 40% 65%; transform:scale(0.96); }
}
@media (prefers-reduced-motion: reduce){
  .btn-primary::before{ animation:none; }
}
.cart-btn{position:relative;background:#F4F9FA;border:1px solid var(--line);color:#0A2942;border-radius:100px;padding:10px 16px;display:flex;align-items:center;gap:8px;font-weight:700;font-size:0.9rem;cursor:pointer;}
.cart-btn svg{width:18px;height:18px;stroke:#0A2942;}
.cart-count{background:var(--green);color:#fff;font-size:0.72rem;font-weight:700;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;}

/* Generic page hero (Packages / Extras / Schedule / Reviews / Giveaway list style) */
.pg-hero{position:relative;padding:150px 0 36px;text-align:center;background:var(--mist);overflow:hidden;}
.pg-hero.with-photo{padding:150px 0 34px;color:#fff;background-size:cover;background-position:center 60%;}
.pg-hero.with-photo::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,27,44,0.55),rgba(7,27,44,0.75));z-index:0;}
.pg-hero .wrap{position:relative;z-index:1;}
.pg-hero h1{font-size:clamp(1.9rem,5vw,2.6rem);color:var(--navy);}
.pg-hero.with-photo h1{color:#fff;}
.pg-hero p{max-width:480px;margin:14px auto 0;opacity:0.72;font-size:1rem;line-height:1.55;}
.pg-hero.with-photo p{opacity:0.9;}
.route-note{background:rgba(255,255,255,0.85);backdrop-filter:blur(4px);border:1px solid var(--line);border-radius:16px;padding:18px 22px;font-size:0.9rem;line-height:1.55;opacity:0.9;max-width:560px;margin:22px auto 0;text-align:left;}
.route-note b{color:var(--navy);}

section{padding:64px 0;}
.kicker{color:var(--teal);font-weight:700;font-size:0.9rem;display:block;margin-bottom:8px;}
.section-head{text-align:center;max-width:560px;margin:0 auto 40px;}
.section-head h2{font-size:clamp(1.5rem,3.4vw,2rem);}

/* Home hero */
.hero{position:relative;min-height:94vh;display:flex;align-items:center;background-size:cover;background-position:center 65%;padding:130px 0 60px;text-align:center;}
.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,27,44,0.35),rgba(7,27,44,0.65));}
.hero .wrap{position:relative;}
.hero-inner{max-width:680px;margin:0 auto;}
.hero h1{color:#fff;font-size:clamp(2.3rem,7vw,3.6rem);margin-bottom:32px;}
.hero h1 .grad{background:linear-gradient(100deg,var(--cyan),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero p{color:rgba(255,255,255,0.9);font-size:1.1rem;line-height:1.55;max-width:440px;margin:18px auto 30px;}
.hero-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.area-strip{margin-top:34px;color:rgba(255,255,255,0.75);font-size:0.85rem;}

/* Reels / video placeholders */
.reels{background:var(--navy);color:#fff;}
.reels .kicker{color:var(--cyan);}
.reel-row{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;-webkit-overflow-scrolling:touch;}
.reel-row::-webkit-scrollbar{height:6px;}
.reel-card{position:relative;flex:0 0 220px;height:390px;border-radius:20px;overflow:hidden;scroll-snap-align:start;background:#000;}
.reel-card img{width:100%;height:100%;object-fit:cover;opacity:0.85;}
.reel-card .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer;background:none;border:none;padding:0;}
.reel-card .play span{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,0.22);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.5);}
.reel-card .play svg{width:20px;height:20px;fill:#fff;margin-left:3px;}
.reel-card .badge{position:absolute;top:14px;left:14px;right:14px;background:linear-gradient(100deg,var(--teal),var(--green));color:#fff;font-size:0.72rem;font-weight:700;padding:8px 10px;border-radius:10px;text-align:center;}
.reel-card .cap{position:absolute;left:14px;bottom:14px;right:14px;font-size:0.82rem;font-weight:600;}
.reels-note{text-align:center;font-size:0.8rem;color:rgba(255,255,255,0.5);margin-top:18px;}
.intro-video{margin-top:44px;display:flex;align-items:center;gap:30px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.14);border-radius:20px;padding:20px;flex-wrap:wrap;}
.intro-video-media{position:relative;flex:0 0 240px;width:240px;height:150px;border-radius:14px;overflow:hidden;cursor:pointer;background:none;border:none;padding:0;}
.intro-video-media img{width:100%;height:100%;object-fit:cover;opacity:0.8;}
.intro-video-txt{flex:1;min-width:200px;}
.intro-video-txt h3{color:#fff;font-size:1.15rem;margin:4px 0 8px;}
.intro-video-txt p{font-size:0.88rem;color:rgba(255,255,255,0.65);margin:0;line-height:1.5;}

/* Full-page reel grid (content.html) */
.reel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.reel-grid .reel-card{flex:none;height:auto;aspect-ratio:9/16;}
.ig-cta{text-align:center;margin-top:44px;}
.ig-cta p{opacity:0.65;font-size:0.9rem;margin:0 0 16px;}

/* Packages */
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start;}
.pkg{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:32px 26px;position:relative;transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, background-color .35s ease, border-color .35s ease;}
.pkg:hover{
  transform:translateY(-10px);
  background-color:rgba(15,169,196,0.07);
  border-color:var(--teal);
  box-shadow:0 0 0 1px var(--teal), 0 0 10px 1px rgba(15,169,196,0.55), 0 25px 45px -18px rgba(7,27,44,0.25);
}
.pkg:hover .btn-dark-outline{border-color:var(--teal);}
.pkg .btn-dark-outline, .cross-link .btn-dark-outline{background:var(--navy);color:#fff;border-color:var(--navy);}
.pkg .btn-dark-outline:hover, .cross-link .btn-dark-outline:hover{background:var(--navy-deep);}
.cross-link:hover .btn-dark-outline{
  border-color:var(--teal);
  box-shadow:0 0 0 1px var(--teal), 0 0 10px 1px rgba(15,169,196,0.55);
}
.pkg h3{font-size:1.6rem;}
.pkg h3.t-bronze{color:#B0723A;}
.pkg h3.t-silver{color:#9AA4AC;}
.pkg h3.t-gold{color:#C79A2E;}
.pkg.featured h3.t-silver{color:#D7DEE3;}
.pkg .price{font-family:'Unbounded',sans-serif;font-size:2rem;font-weight:700;color:var(--navy);margin:14px 0 2px;}
.pkg .price span{font-size:0.9rem;font-weight:500;opacity:0.6;}
.pkg .from{font-size:0.75rem;opacity:0.55;margin-bottom:18px;}
.pkg ul{list-style:none;padding:0;margin:0 0 24px;}
.pkg li{display:flex;align-items:flex-start;gap:8px;font-size:0.9rem;padding:6px 0;opacity:0.85;}
.pkg li.off{opacity:0.35;text-decoration:line-through;}
.pkg li svg{width:16px;height:16px;flex:0 0 16px;margin-top:2px;stroke:var(--green);}
.pkg li.off svg{stroke:#9aa5ad;}
.pkg.featured{background:var(--navy);color:#fff;border-color:var(--navy);transform:scale(1.06);box-shadow:0 25px 50px -20px rgba(7,27,44,0.45);}
.pkg.featured:hover{transform:scale(1.06) translateY(-10px);box-shadow:0 32px 55px -18px rgba(7,27,44,0.55);background-color:var(--navy-deep);border-color:var(--teal);}
.pkg.featured:hover .btn-primary{box-shadow:0 14px 34px -8px rgba(15,169,196,0.85);}
.pkg.featured .price{color:#fff;}
.pkg.featured li{opacity:0.92;}
.ribbon{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:linear-gradient(100deg,var(--green),var(--teal));color:#fff;font-size:0.72rem;font-weight:700;padding:6px 16px;border-radius:100px;white-space:nowrap;}
.pkg-note{text-align:center;font-size:0.82rem;opacity:0.6;margin-top:24px;}
@media (prefers-reduced-motion: reduce){
  .pkg, .pkg.featured{ transition:none; }
}
.addons{margin-top:56px;border-top:1px solid var(--line);padding-top:44px;}
.addon-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.addon-card{border:1px solid var(--line);border-radius:16px;padding:20px 20px 22px;background:var(--mist);}
.addon-card h4{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.98rem;font-weight:700;margin:0 0 6px;}
.addon-card p{font-size:0.85rem;opacity:0.68;margin:0;line-height:1.5;}
.emergency-card{margin-top:22px;border:2px solid var(--navy);border-radius:20px;padding:26px 30px;display:grid;grid-template-columns:220px 1fr auto;align-items:center;gap:20px;}
.emergency-card .ec-head{min-width:0;}
.emergency-card .tag{font-size:0.75rem;font-weight:700;color:var(--teal);display:block;margin-bottom:6px;}
.emergency-card h3{font-size:1.2rem;margin:0;}
.emergency-card p{font-size:0.88rem;opacity:0.7;margin:0;}
.emergency-card > .btn{justify-self:end;white-space:nowrap;}
.cross-link{background:var(--mist);border-radius:22px;padding:36px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.cross-link h3{font-size:1.2rem;margin-bottom:6px;}
.cross-link p{font-size:0.9rem;opacity:0.68;margin:0;max-width:380px;}

/* Extras page */
.extra-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.extra-card{border:2px solid var(--line);border-radius:20px;padding:26px;cursor:pointer;transition:border-color .2s, background .2s;background:none;text-align:left;width:100%;font:inherit;color:inherit;}
.extra-card.sel{border-color:var(--teal);background:rgba(15,169,196,0.06);}
.extra-card h3{font-size:1.1rem;margin-bottom:8px;}
.extra-card p{font-size:0.88rem;opacity:0.68;line-height:1.5;margin:0 0 10px;}
.extra-price{font-size:0.85rem;font-weight:700;color:var(--teal);margin-bottom:16px;}
.extra-check{display:flex;align-items:center;gap:8px;font-size:0.85rem;font-weight:700;color:var(--teal);}
.extra-check .box{width:20px;height:20px;border-radius:6px;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;}
.extra-card.sel .box{background:var(--teal);border-color:var(--teal);}
.extra-check svg{width:12px;height:12px;stroke:#fff;display:none;}
.extra-card.sel .extra-check svg{display:block;}
.sticky-bar{position:fixed;left:0;right:0;bottom:0;background:var(--white);border-top:1px solid var(--line);padding:16px 0;box-shadow:0 -6px 24px rgba(7,27,44,0.08);z-index:90;}
.sticky-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.sticky-bar .count{font-size:0.9rem;font-weight:700;}

/* Schedule / calendar */
.cal-wrap{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:26px;}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.cal-head h3{font-size:1.15rem;}
.cal-head button{background:var(--mist);border:1px solid var(--line);border-radius:50%;width:34px;height:34px;cursor:pointer;font-size:1rem;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center;}
.cal-grid .dow{font-size:0.72rem;font-weight:700;opacity:0.5;padding-bottom:6px;}
.cal-day{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border-radius:12px;font-size:0.9rem;font-weight:600;background:none;border:2px solid transparent;font-family:inherit;}
.cal-day.empty{visibility:hidden;}
.cal-day.route{background:rgba(15,169,196,0.1);color:var(--teal);cursor:pointer;}
.cal-day.route:hover{border-color:var(--teal);}
.cal-day.route.sel{background:linear-gradient(100deg,var(--teal),var(--green));color:#fff;}
.cal-day.off{opacity:0.28;}
.legend{display:flex;gap:18px;justify-content:center;margin-top:16px;font-size:0.8rem;opacity:0.65;}
.legend span{display:inline-flex;align-items:center;gap:6px;}
.legend .dot{width:10px;height:10px;border-radius:3px;background:rgba(15,169,196,0.3);}
.confirm-box{margin-top:20px;text-align:center;}
.confirm-box p{font-size:0.95rem;margin:0 0 16px;}
.field{margin-bottom:14px;text-align:left;}
.field label{font-size:0.85rem;font-weight:600;display:block;margin-bottom:6px;}
.field input, .field select{width:100%;padding:13px 14px;border-radius:10px;border:1px solid var(--line);font-family:inherit;font-size:0.95rem;}
.booking-form{margin-top:20px;background:var(--white);border:1px solid var(--line);border-radius:22px;padding:28px;}

/* Responders / CRM form */
.responders{background:var(--navy);color:#fff;}
.responders .wrap{display:flex;gap:40px;align-items:center;flex-wrap:wrap;}
.responders-txt{flex:1;min-width:260px;}
.responders-txt .kicker{color:var(--cyan);}
.responders-txt h2{font-size:clamp(1.4rem,3vw,1.9rem);color:#fff;}
.responders-txt p{font-size:0.95rem;opacity:0.78;margin:12px 0 0;line-height:1.55;max-width:44ch;}
.responders-form{flex:1;min-width:280px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.16);border-radius:18px;padding:26px;}
.responders-form .field label{color:#fff;}
.responders-form .field input, .responders-form .field select{background:rgba(255,255,255,0.9);border:none;}

/* Giveaway */
.giveaway{padding-top:0;}
.giveaway-card{background:linear-gradient(100deg,var(--teal),var(--green));border-radius:22px;padding:34px 30px;text-align:center;color:#fff;}
.giveaway-card .tag{font-size:0.78rem;font-weight:700;letter-spacing:0.02em;opacity:0.85;}
.giveaway-card h2{font-size:clamp(1.3rem,3vw,1.7rem);margin:10px 0 8px;color:#fff;}
.giveaway-card p{font-size:0.9rem;opacity:0.9;margin:0 0 20px;max-width:420px;margin-left:auto;margin-right:auto;}
.giveaway-card .btn{background:#fff;color:var(--navy);}
.give-hero{padding:150px 0 70px;text-align:center;color:#fff;background:linear-gradient(120deg, var(--navy), #0C3752);position:relative;overflow:hidden;}
.give-hero::before{content:'';position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle, rgba(87,194,75,0.28), transparent 65%); top:-220px;right:-160px;}
.give-hero .wrap{position:relative;}
.give-hero h1{font-size:clamp(1.8rem,5vw,2.6rem);color:#fff;}
.prize-box{background:rgba(255,255,255,0.08);border:1px dashed rgba(255,255,255,0.35);border-radius:20px;padding:26px;margin:28px auto 0;max-width:480px;}
.prize-box .tag{font-size:0.75rem;font-weight:700;color:var(--green);}
.prize-box h2{font-size:1.3rem;margin:8px 0 6px;color:#fff;}
.prize-box p{font-size:0.88rem;opacity:0.75;margin:0;}
.countdown{display:flex;justify-content:center;gap:14px;margin-top:34px;flex-wrap:wrap;}
.cd-unit{background:rgba(255,255,255,0.1);border-radius:16px;padding:16px 18px;min-width:76px;}
.cd-unit .num{font-family:'Unbounded',sans-serif;font-size:1.8rem;font-weight:700;}
.cd-unit .lbl{font-size:0.7rem;opacity:0.7;text-transform:lowercase;margin-top:2px;}
.entries-box{background:var(--mist);border-radius:22px;padding:40px;max-width:440px;margin:0 auto;text-align:center;}
.entries-box .num{font-family:'Unbounded',sans-serif;font-size:2.6rem;font-weight:700;color:var(--navy);}
.entries-box .lbl{font-size:0.9rem;opacity:0.65;margin-top:4px;}
.entries-box .earn{margin-top:22px;font-size:0.9rem;opacity:0.75;}

/* Merch shop */
.shop-hero{position:relative;padding:210px 0 90px;text-align:center;overflow:hidden;background-size:cover;background-position:center 60%;}
.shop-hero::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 55% 35% at 30% 100%, rgba(255,150,60,0.22), transparent 72%),radial-gradient(ellipse 45% 30% at 68% 100%, rgba(255,110,40,0.2), transparent 72%);}
.shop-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,27,44,0.45),rgba(7,27,44,0.7));z-index:0;}
.shop-hero .wrap{position:relative;z-index:1;}
.shop-hero h1{font-size:clamp(2.1rem,5.5vw,3.2rem);color:#fff;}
.shop-hero p{max-width:460px;margin:14px auto 0;color:rgba(255,255,255,0.85);font-size:1.05rem;line-height:1.55;}
.points-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.14);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.3);padding:9px 18px;border-radius:100px;font-size:0.85rem;font-weight:700;margin-top:20px;color:#fff;}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.prod-card{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--white);}
.prod-media{aspect-ratio:1/1;background:linear-gradient(135deg,var(--navy),#0C3752);display:flex;align-items:center;justify-content:center;position:relative;}
.prod-media svg{width:46%;height:46%;stroke:rgba(255,255,255,0.92);fill:none;}
.prod-media .ph-tag{position:absolute;bottom:10px;left:10px;right:10px;font-size:0.68rem;color:rgba(255,255,255,0.55);text-align:center;}
.prod-body{padding:20px;}
.prod-body h3{font-size:1.05rem;}
.prod-price{font-family:'Unbounded',sans-serif;font-weight:700;color:var(--navy);margin:8px 0 2px;font-size:1.15rem;}
.prod-pts{font-size:0.78rem;color:var(--teal);font-weight:700;margin-bottom:14px;}
.prod-card .btn-dark-outline{background:var(--navy);color:#fff;border-color:var(--navy);}
.prod-card .btn-dark-outline:hover{background:var(--navy-deep);}
.prod-row{display:flex;gap:8px;margin-bottom:12px;}
.prod-row select{flex:1;padding:10px 10px;border-radius:10px;border:1px solid var(--line);font-family:inherit;font-size:0.88rem;}

/* Cart drawer */
.cart-overlay{position:fixed;inset:0;background:rgba(7,27,44,0.5);z-index:200;display:none;}
.cart-overlay.open{display:block;}
.cart-panel{position:fixed;top:0;right:0;bottom:0;width:100%;max-width:400px;background:var(--white);z-index:201;transform:translateX(100%);transition:transform .3s ease;display:flex;flex-direction:column;padding:26px;}
.cart-panel.open{transform:translateX(0);}
.cart-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.cart-head h3{font-size:1.2rem;}
.cart-close{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:none;cursor:pointer;}
.cart-items{flex:1;overflow-y:auto;}
.cart-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:0.9rem;}
.cart-item .rm{background:none;border:none;color:var(--teal);font-weight:700;cursor:pointer;font-size:0.8rem;}
.cart-empty{opacity:0.55;text-align:center;padding:40px 0;font-size:0.9rem;}
.cart-foot{border-top:1px solid var(--line);padding-top:18px;margin-top:10px;}
.cart-foot .row{display:flex;justify-content:space-between;font-size:0.92rem;margin-bottom:8px;}
.cart-foot .row.pts{color:var(--teal);font-weight:700;}

/* Google Places autocomplete dropdown — forced above everything (cart panel,
   checkout modal) since it's appended to <body> at click time and would
   otherwise render behind whichever overlay is open. */
.pac-container{z-index:9999 !important;}

/* Generic modal (merch checkout / home responders modal, etc.) */
.modal-overlay{position:fixed;inset:0;background:rgba(7,27,44,0.6);backdrop-filter:blur(3px);z-index:220;display:none;align-items:center;justify-content:center;padding:20px;}
.modal-overlay.open{display:flex;}
.modal{background:var(--white);border-radius:24px;max-width:480px;width:100%;max-height:88vh;overflow-y:auto;padding:32px;position:relative;}
.modal-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.m-step{display:none;}
.m-step.active{display:block;}
.m-step h3{font-size:1.2rem;margin-bottom:16px;}
.confirm{text-align:center;padding:10px 0;}
.confirm .check{width:64px;height:64px;border-radius:50%;background:rgba(87,194,75,0.15);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
.confirm svg{width:30px;height:30px;stroke:var(--green);}

/* Credentials / reviews */
.cred-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.cred-card{border:1px solid var(--line);border-radius:18px;padding:24px;text-align:center;}
.cred-card .ico{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,rgba(15,169,196,0.14),rgba(87,194,75,0.14));display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.cred-card svg{width:22px;height:22px;stroke:var(--teal);}
.cred-card h3{font-size:0.98rem;margin-bottom:6px;}
.cred-card p{font-size:0.85rem;opacity:0.62;margin:0;}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.review-card{border:1px solid var(--line);border-radius:18px;padding:26px;background:var(--white);position:relative;}
.example-tag{position:absolute;top:14px;right:14px;font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:rgba(10,41,66,0.4);background:var(--mist);padding:3px 9px;border-radius:100px;}
.review-card .stars{color:var(--green);font-size:1rem;margin-bottom:12px;letter-spacing:2px;}
.review-card p{font-size:0.95rem;line-height:1.6;opacity:0.55;font-style:italic;}
.review-card .who{margin-top:16px;font-weight:700;font-size:0.88rem;opacity:0.5;}
.reviews-cta{margin-top:32px;text-align:center;}

/* Info block / final CTA */
.infoblock{background:var(--mist);}
.info-card{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:44px;display:flex;align-items:center;gap:36px;flex-wrap:wrap;}
.info-card .txt{flex:1;min-width:240px;}
.info-card h2{font-size:clamp(1.4rem,3vw,1.8rem);}
.info-card p{font-size:0.98rem;opacity:0.72;margin:12px 0 22px;line-height:1.55;}
.info-card .icon{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,rgba(15,169,196,0.14),rgba(87,194,75,0.14));display:flex;align-items:center;justify-content:center;flex:0 0 64px;}
.info-card .icon svg{width:30px;height:30px;stroke:var(--teal);}
.final-cta .cta-box{background:var(--navy);border-radius:28px;padding:56px 30px;text-align:center;color:#fff;background-image:radial-gradient(circle at 15% 20%,rgba(15,169,196,0.35),transparent 45%),radial-gradient(circle at 85% 80%,rgba(87,194,75,0.3),transparent 45%);}
.cta-box h2{color:#fff;font-size:clamp(1.6rem,3.6vw,2.2rem);}
.cta-box p{color:rgba(255,255,255,0.78);margin:14px auto 26px;max-width:420px;}

/* Snapshot strip */
.snap{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:14px;height:340px;}
.snap img{width:100%;height:100%;object-fit:cover;border-radius:18px;}

/* Floating social icon bar (homepage only) — a trendy, modern alternative to
   only having icons in the footer. Sticks to the edge of the screen and
   follows the visitor as they scroll. */
.social-rail{
  position:fixed; left:20px; top:50%; transform:translateY(-50%); z-index:60;
  display:flex; flex-direction:column; gap:12px;
}
.social-rail a{
  width:42px; height:42px; border-radius:50%;
  background:#FFFFFF; box-shadow:0 6px 18px rgba(7,27,44,0.18);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.social-rail a:hover{ transform:translateX(4px) scale(1.08); box-shadow:0 8px 22px rgba(7,27,44,0.28); }
.social-rail svg{ width:18px; height:18px; stroke:#0A2942; }
@media (max-width:900px){ .social-rail{ display:none; } }

/* Footer */
footer{background:var(--navy-deep);color:rgba(255,255,255,0.75);padding:48px 0 24px;text-align:center;}
/* Note: the logo file has a solid (non-transparent) background, so the
   brightness/invert trick the original mockup used here rendered as a
   solid white box instead of a white logo mark. Showing it at normal
   size without the invert avoids that; swap in a transparent-background
   logo file later if a true white silhouette is wanted here. */
footer img{height:40px;margin:0 auto 16px;border-radius:8px;}
.foot-links{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;font-size:0.88rem;margin-bottom:18px;}
.foot-social{display:flex;justify-content:center;gap:12px;margin-bottom:22px;}
.foot-social a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,0.25);display:flex;align-items:center;justify-content:center;}
.foot-social svg{width:15px;height:15px;stroke:#fff;}
footer .fine{font-size:0.78rem;opacity:0.55;}

/* Responsive */
@media (max-width:900px){
  .pkg-grid{grid-template-columns:1fr;}
  .pkg.featured{transform:none;order:-1;}
  .snap{grid-template-columns:1fr 1fr;height:auto;}
  .snap img{height:180px;}
  .snap a:first-child{grid-column:1/3;}
  .snap a:first-child img{height:220px;}
  .info-card{flex-direction:column;text-align:center;}
  .extra-grid{grid-template-columns:1fr;}
  .addon-row{grid-template-columns:1fr;}
  .emergency-card{grid-template-columns:1fr;text-align:left;}
  .emergency-card > .btn{justify-self:start;margin-top:6px;}
  .cred-grid{grid-template-columns:1fr;}
  .reviews-grid{grid-template-columns:1fr;}
  .prod-grid{grid-template-columns:repeat(2,1fr);}
  .reel-grid{grid-template-columns:repeat(2,1fr);}
  .call-pill{display:none;}
}
@media (max-width:560px){
  section{padding:56px 0;}
  .hero{padding:110px 0 50px;min-height:88vh;}
  .cal-day{font-size:0.8rem;}
  .prod-grid{grid-template-columns:1fr;}
  .shop-hero{padding:130px 0 34px;}
}