/* =========================================================
   2026-10-16 (site-layout): styles.css is /css/site.css, admin.css is /admin/css/admin.css, pw-eye.js and renew.js are in /admin/js/; links carry ?v=20261016.
   AURORA SOL — styles.css (cleaned + organized + deduped)
   Version: 1.5 (2026-10-01)
   v1.5 - .stripe-return layout for stripe-return.asp (centred card, no site chrome).
          Loaded as ?v=20261001.
   v1.4 - Footer columns 50% / 25% / 25% (info / nav / map) instead of equal
          thirds; small logo icon before the footer brand name.
          Loaded as ?v=20260930.
   v1.3 - Homepage hero stacks on desktop too: the two-column split left the
          gallery 504x320 at 1440 wide. It now spans the content width at 3:2
          (1084px), height capped at min(640px, 100vh - 360px) so it stays
          above the fold. Loaded as ?v=20260922.
   v1.2 - F-050: gallery pause control, keyboard focus ring and reduced-motion
          slide transitions. Loaded as ?v=20260918-public.
   v1.1 - picture{display:contents} at the end of the file, for the
          AVIF/WebP/JPEG <picture> images. Loaded as ?v=20260917.
   v1.0 - As found (loaded as ?v=20260324).
   ========================================================= */

/* =========================
   CSS Variables
   ========================= */
:root{
  --navy:#0A2140;
  --offwhite:#FDFCF8;
  --charcoal:#2B2E34;
  --stone:#E6E2DA;
  --champagne:#C8B58A;

  --max:1120px;
  --r:18px;

  /* Layout gutter (MUST match .wrap padding) */
  --gutter:18px;

  --shadow: 0 12px 30px rgba(10,33,64,.10);
  --hair: 1px solid rgba(10,33,64,.12);
  --hair2: 1px solid rgba(10,33,64,.18);
}

/* =========================
   Base / Reset
   ========================= */
*,
*::before,
*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

body{
  margin:0;
  background:var(--offwhite);
  color:var(--charcoal);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:16px;
  line-height:1.6;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }

/* Layout container */
.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* Skip link */
.skip{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip:focus{
  left:var(--gutter);
  top:18px;
  width:auto;
  height:auto;
  padding:10px 12px;
  background:var(--offwhite);
  border:var(--hair2);
  border-radius:12px;
  z-index:9999;
}

/* =========================
   Header / Navigation
   ========================= */

/* 1) Default: do NOT make all headers sticky (prevents hero header conflicts) */
header{ position:static; }

/* 2) Ensure the page hero header is never sticky */
header.page-header-full{
  position:relative;
  top:auto;
  z-index:1;
}

/* 3) Desktop sticky NAV (robust)
      We make .nav sticky (not the whole header) so it works regardless of
      inc-header wrapper markup. We also rebuild the full-width background. */
@media (min-width: 860px){

  .nav{
    position:sticky;
    top:0;
    z-index:2000;
  }

  /* Full-width background behind the sticky nav even though .nav is inside .wrap */
  .nav::before{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:0;
    bottom:0;
    width:100vw;
    background: rgba(230,226,218,.92);
    backdrop-filter: saturate(150%) blur(10px);
    border-bottom: var(--hair);
    z-index:-1;
  }
}

/* Nav layout */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  gap:14px;
  position:relative; /* required for ::before background layer */
}
/* Nav background (ALL viewports, including mobile) */
.nav{
  background: rgba(230,226,218,.92);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: var(--hair);
}


/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.brandmark{
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:transparent;
  box-shadow:0 10px 24px rgba(10,33,64,.14);
}
.brandmark img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Wordmark */
.brandname{
  font-family:"Cinzel Decorative", serif;
  font-weight:700;
  letter-spacing:.045em;
  text-transform:uppercase;
  color:var(--navy);
  font-size:28px;
  white-space:nowrap;
}

/* Desktop nav links */
.navlinks{
  display:none;
  align-items:center;
  gap:18px;
  font-weight:500;
}
.navlinks a{ opacity:.9; }
.navlinks a:hover{ opacity:1; }

/* CTA area */
.navcta{
  display:flex;
  align-items:center;
  gap:10px;
}

/* =========================
   Buttons
   ========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius:999px;
  font-weight:600;
  border:1px solid transparent;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }

.btn-primary{
  background:var(--navy);
  color:var(--offwhite);
  box-shadow:0 14px 28px rgba(10,33,64,.18);
  min-width:200px;
}
.btn-primary:hover{ border-color:var(--champagne); }

.btn-secondary{
  background:var(--stone);
  color:var(--navy);
  border-color:rgba(10,33,64,.10);
}
.btn-secondary:hover{ border-color:var(--champagne); }

.btn-block{ width:100%; }

/* =========================
   Hamburger + Drawer (Mobile)
   ========================= */
.iconbtn{
  width:44px;
  height:44px;
  padding:0;
  border-radius:999px;
  background:transparent;
  border:var(--hair2);
  display:flex;
  align-items:center;
  justify-content:center;
}
.iconbtn:hover{ border-color:rgba(10,33,64,.28); }

.hamburger{
  width:18px;
  height:14px;
  position:relative;
  display:block;
}
.hamburger i{
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:var(--navy);
  border-radius:2px;
  opacity:.9;
}
.hamburger i:nth-child(1){ top:0; }
.hamburger i:nth-child(2){ top:6px; }
.hamburger i:nth-child(3){ top:12px; }

.drawer{
  position:fixed;
  inset:0;
  background:rgba(10,33,64,.42);
  display:none;
  z-index:200;
}
.drawer.open{ display:block; }

.drawerpanel{
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:min(92vw, 380px);
  background:var(--offwhite);
  border-left:var(--hair);
  box-shadow:-24px 0 60px rgba(10,33,64,.22);
  padding:0;
}

.drawerhead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 18px;
  background: rgba(230,226,218,.92);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid rgba(10,33,64,.12);
}

.drawerbrand{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.drawerbrand-name{
  font-family:"Cinzel Decorative", serif;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:14px;
  color:var(--navy);
}
.drawerbrand-meta{
  font-family:Inter, system-ui, sans-serif;
  font-weight:600;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(10,33,64,.55);
  margin-top:4px;
}

.drawerlinks,
.drawerfoot{ padding:10px 16px; }

.drawerlinks{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.drawerlinks a{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid transparent;
}
.drawerlinks a:hover{
  border-color:rgba(10,33,64,.14);
  background:rgba(230,226,218,.35);
}

.drawerfoot{ border-top:var(--hair); }
.drawerbtn{ margin-top:12px; text-align:center; }
.muted{ opacity:.82; }

/* =========================
   Sections / Helpers
   ========================= */
section{ padding:34px 0; }

.section-warm{ background:var(--stone); }
.section-navy{ background:var(--navy); color:var(--offwhite); }

.stack{ display:grid; gap:14px; }
.stack-tight{ display:grid; gap:10px; }
.grid{ display:grid; gap:16px; }
.grid-2{ display:grid; gap:16px; }

.card{
  background:rgba(253,252,248,.92);
  border:var(--hair);
  border-radius:var(--r);
  box-shadow:var(--shadow);
}
.card.card-elevated{
  box-shadow:0 18px 40px rgba(10,33,64,.14);
}

.pad16{ padding:16px; }
.spacer14{ height:14px; }
.ink-navy{ color:rgba(10,33,64,.92); }

/* =========================
   Typography
   ========================= */
h1,h2,h3{ margin:0; }

h1{
  font-family:Cinzel, serif;
  font-weight:600;
  color:var(--navy);
  letter-spacing:.01em;
  line-height:1.15;
  font-size:clamp(28px, 4.6vw, 42px);
}
h2{
  font-family:Cinzel, serif;
  font-weight:600;
  color:var(--navy);
  letter-spacing:.01em;
  line-height:1.2;
  font-size:clamp(22px, 3.6vw, 30px);
}
.section-navy h1{ color:var(--offwhite); }
.section-navy h2{ color:var(--offwhite); }
.page-hero h1,
.confirm-hero h1{ color:var(--offwhite); }

p{ margin:0; }
.lead{ font-size:16px; line-height:1.6; opacity:.92; }

.kicker{
  font-weight:600;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(10,33,64,.72);
  font-size:14px;
  white-space:normal;
  overflow-wrap:anywhere;
}
@media (min-width: 860px){
  .kicker{
    font-size:15px;
  }
}
.section-navy .kicker{ color:rgba(253,252,248,.85); }

.underline{
  width:72px;
  height:2px;
  background:var(--champagne);
  border-radius:2px;
  margin-top:10px;
}

.small{ font-size:14px; opacity:.82; }

/* Pills */
.pillrow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
  justify-content:center;
}
.pill{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  border:var(--hair);
  background:rgba(253,252,248,.78);
  font-size:13px;
  color:rgba(10,33,64,.92);
}
.section-navy .pill{
  background:rgba(253,252,248,.10);
  border-color:rgba(253,252,248,.16);
  color:rgba(253,252,248,.92);
}

/* =========================
   Hero
   ========================= */
.hero{ padding:22px 0 18px; }

.heroinner{
  display:grid;
  gap:18px;
}

.hero-top{
  display:grid;
  gap:10px;
  padding:18px 0 0;
  text-align:center;
  justify-items:center;
}

.hero h1{ font-size:2.25rem; }

.hero .subline{
  font-size:16px;
  color:rgba(43,46,52,.92);
  max-width:36rem;
}
.hero .micro{
  font-size:.9rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6b7280;
  margin-top:.35rem;
  max-width:40rem;
}

.hero-media{
  width:100%;
  max-width:100%;
  justify-self:stretch;
  align-self:start;
  display:grid;
  gap:14px;
}
.hero-media .hero-ctas{
  display:flex;
  justify-content:center;
}

.hero .hero-ctas{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.hero .hero-ctas .hero-link{
  display:block;
  font-size:.9rem;
  color:var(--navy);
  opacity:.9;
  padding:2px 4px;
}
.hero .hero-ctas .hero-link:hover{ text-decoration:underline; }
.hero-link{ margin-top:14px; }

/* =========================
   Slider
   ========================= */

.sliderwrap,
.slider{
  touch-action: pan-y;
}

.sliderwrap{
  width:100%;
  max-width:100%;
  margin:0;
  overflow:hidden;
  justify-self:stretch;
}

.slider{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  min-height:240px;
  overflow:hidden;
  border-radius:var(--r);
}

/* Slides */

.slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .35s ease;
  background:var(--navy);
}

.slide.active{
  opacity:1;
}

.slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.02);
}

@media (max-width: 600px){
  .slide img{
    transform:none;
  }
}

/* HUD (badge + arrows) */

.sliderhud{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  pointer-events:auto;
  max-width:calc(100% - 24px);
}

/* Caption badge */

.sliderbadge{
  display:inline-flex;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(253,252,248,.90);
  border:1px solid rgba(10,33,64,.14);
  color:var(--navy);
  font-weight:600;
  font-size:13px;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 6px 18px rgba(10,33,64,.12);
  backdrop-filter: blur(6px);
}

/* Controls */

.slidercontrols{
  display:flex;
  gap:8px;
  margin-left:auto;
}

/* Arrows */

.arrow{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(10,33,64,.14);
  background:rgba(253,252,248,.90);
  display:grid;
  place-items:center;
}

.arrow:hover{
  border-color:rgba(10,33,64,.28);
}

.sliderpause{
  width:auto;
  min-width:64px;
  padding:0 12px;
  color:var(--navy);
  font:600 13px/1 Inter, sans-serif;
  cursor:pointer;
}

.slidercontrols button:focus-visible,
.xp-slider-ui button:focus-visible{
  outline:3px solid var(--navy);
  outline-offset:3px;
  box-shadow:0 0 0 6px var(--offwhite);
}

@media (prefers-reduced-motion: reduce){
  .slide, .xp-slide{ transition:none !important; }
}

.arrow svg{
  width:18px;
  height:18px;
  stroke:var(--navy);
}

/* =========================
   Features (Included list)
   ========================= */
.features{ display:grid; gap:12px; }

.feat{
  border:var(--hair);
  border-radius:14px;
  padding:14px;
  background:#fff;
  display:flex;
  gap:12px;
  align-items:flex-start;
  box-shadow:
    0 1px 1px rgba(10,33,64,.04),
    0 6px 18px rgba(10,33,64,.08);
}
.feat .t{
  font-weight:600;
  color:var(--navy);
  margin-bottom:2px;
}
.feat .d{ font-size:14px; opacity:.9; }

/* =========================
   CTA Band (Booking)
   ========================= */
.ctaband{
  border-radius:24px;
  padding:18px;
  border:1px solid rgba(253,252,248,.14);
  background:rgba(253,252,248,.06);
}
.ctaband .row{ display:grid; gap:12px; }
.ctaband p{ opacity:.92; }

/* =========================
   PRICING (full-width band)
   ========================= */
#pricing.sol-card{
  background:#F6F4EF;
  border-top:1px solid rgba(10,33,64,.08);
  border-bottom:1px solid rgba(10,33,64,.06);
  padding:56px 0;
  margin:0;
}

#pricing.sol-card > h2,
#pricing.sol-card > p,
#pricing.sol-card > .sol-price-grid,
#pricing.sol-card > .underline,
#pricing.sol-card > .sol-pricing-callout,
#pricing.sol-card > .pricing-cta{
  max-width:var(--max);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

#pricing h2{
  font-size:clamp(1.6rem, 2.5vw, 2.1rem);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--navy);
}

#pricing.sol-card > .underline{
  width:100%;
  height:2px;
  margin:10px auto 14px;
  background:transparent;
}
#pricing.sol-card > .underline::before{
  content:"";
  display:block;
  width:72px;
  height:2px;
  background:var(--champagne);
  border-radius:2px;
}

#pricing p{ max-width:760px; color:#444; }

.sol-price-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  margin-top:56px;
}

@media(min-width:1024px){
  .sol-price-grid{
    grid-template-columns:repeat(4,1fr);
    gap:20px;
  }
}

/* Price cards */
.sol-price-card{
  background:#fff;
  border:1px solid rgba(10,33,64,.12);
  border-radius:14px;
  padding:32px 28px 36px;
  text-align:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
.sol-price-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 36px rgba(10,33,64,.12);
}
.sol-price-title{
  font-size:1.1rem;
  font-weight:600;
  letter-spacing:.04em;
  margin-bottom:6px;
  color:var(--navy);
}
.sol-price-guests{
  font-size:.9rem;
  color:#666;
  margin-bottom:18px;
}
.sol-price-amount{
  font-size:1.9rem;
  font-weight:600;
  color:var(--navy);
  margin-bottom:4px;
}
.sol-price-duration{
  font-size:.9rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#777;
  margin-bottom:22px;
}
.sol-price-list{
  list-style:none;
  padding:0;
  margin:0;
  text-align:left;
}
.sol-price-list li{
  position:relative;
  padding-left:22px;
  margin-bottom:10px;
  font-size:.92rem;
  color:#333;
}
.sol-price-list li::before{
  content:"•";
  position:absolute;
  left:0;
  top:0;
  color:var(--navy);
  font-weight:600;
}

.sol-price-card-featured{
  border:2px solid var(--navy);
  box-shadow:0 18px 44px rgba(10,33,64,.18);
}
.sol-price-card-featured .sol-price-title{ font-size:1.15rem; }
.sol-price-card-featured::after{
  content:"Most Popular";
  display:inline-block;
  margin-top:18px;
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--navy);
}

/* Pricing callout */
.sol-price-badge{
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);
  background:var(--champagne);
  color:var(--navy);
  font-size:9px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:3px 10px;
  border-radius:999px;
  white-space:nowrap;
}
.sol-price-card{ position:relative; }
.sol-pricing-callout{
  display:block;
  width:100%;
  text-align:center;
  margin:22px auto 0;
  padding:12px 16px;
  font-size:1.05rem;
  font-weight:500;
  color:var(--navy);
  border-top:1px solid rgba(10,33,64,.12);
}

/* Pricing CTA */
.pricing-cta{
  margin-top:32px;
  display:flex;
  justify-content:center;
}

/* =========================
   Questions + FAQ (sol-qa)
   ========================= */
.sol-qa{
  background:#F1F4F8; /* Quiet Navy Tint */
  border-top:1px solid rgba(10,33,64,.08);
  border-bottom:1px solid rgba(10,33,64,.08);
  padding:56px 0;
}

.sol-qa-inner{
  display:grid;
  gap:18px;
}

/* Header: full-width & left aligned */
.sol-qa-head{
  text-align:left;
  display:grid;
  gap:10px;
  justify-items:start;
  max-width:none;
  margin:0;
}

.sol-qa-ctas{
  display:flex;
  justify-content:center;
  width:100%;
  margin-top:6px;
}

.sol-qa-faq{
  width:100%;
  max-width:46rem;
  margin:0 auto;
  display:grid;
  gap:10px;
}

.sol-qa-subtitle{
  font-size:.95rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.7;
  margin:14px 0 2px;
}

/* Accordion */
.sol-faq{
  border:1px solid rgba(10,33,64,.12);
  border-radius:14px;
  background:#ffffff;
  overflow:hidden;
}
.sol-faq > summary{
  cursor:pointer;
  list-style:none;
  padding:14px 14px;
  font-weight:600;
  color:var(--navy);
}
.sol-faq > summary::-webkit-details-marker{ display:none; }
.sol-faq[open] > summary{
  border-bottom:1px solid rgba(10,33,64,.10);
}
.sol-faq-body{
  padding:12px 14px 14px;
  color:rgba(43,46,52,.92);
  line-height:1.55;
}
.sol-faq-cta{ margin-top:12px; text-align:center; }

/* Mobile FAQ separators */
@media (max-width: 860px){
  .sol-qa-faq{ gap:0; }
  .sol-faq{
    border-radius:0;
    border-left:none;
    border-right:none;
  }
  .sol-faq + .sol-faq{
    border-top:1px solid rgba(10,33,64,.12);
  }
}

/* =========================
   Footer
   ========================= */
footer{
  background:#ECE6DC;
  padding:56px 0 40px;
  border-top:1px solid rgba(10,33,64,.12);
  position:relative;
}
footer,
footer a{ color:#3A3A3A; }
footer a:hover{ color:var(--navy); }

footer::before{
  content:"";
  position:absolute;
  top:-24px;
  left:0;
  right:0;
  height:24px;
  background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.04));
}

/* =========================
   Footer layout: 4-col grid, info spans 2 (50% / 25% / 25%)
   ========================= */
.footgrid{
  display:grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap:48px;
  align-items:start;
}

/* -------------------------
   Left: company info
   ------------------------- */
.footleft{
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:left;
}

.footbrand{
  font-family:"Cinzel Decorative", serif;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--navy);
  text-transform:uppercase;
  font-size:1.25rem;
  display:flex;
  align-items:center;
  gap:10px;
}
.footbrand-icon{
  width:32px;
  height:32px;
  flex:none;
}

.backtotop{
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(200,181,138,.7);
}

/* -------------------------
   Center: navigation (CENTERED)
   ------------------------- */
.footnav{
  display:flex;
  justify-content:center;   /* center nav block within column */
  gap:48px;
  width:100%;
}

.footnav-group{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;       /* center link text */
  text-align:center;
}

.footnav-title{
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#0A2140;
  opacity:.55;
  margin-bottom:6px;
  text-align:center;
}

.footnav a{
  font-size:.9rem;
  color:#0A2140;
  opacity:.75;
  line-height:1.35;
}
.footnav a:hover{
  opacity:1;
  text-decoration:underline;
}

/* -------------------------
   Right: map (CENTERED)
   ------------------------- */
.footmap{
  max-width:220px;
  opacity:.9;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.footmap a{ display:block; }
.footmap img{
  width:100%;
  height:auto;
  border-radius:6px;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  transition: box-shadow .2s ease, transform .2s ease, opacity .2s ease;
}

.footmap-hint{
  margin-top:6px;
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#0A2140;
  opacity:.45;
  text-align:center;
}

@media (hover: hover){
  .footmap a:hover img{
    opacity:1;
    box-shadow:0 12px 32px rgba(10,33,64,.35);
    transform:translateY(-2px);
  }
  .footmap a:hover .footmap-hint{ opacity:.7; }
}

/* =========================
   Mobile: show map, hide nav
   ========================= */
@media (max-width: 720px){
  .footgrid{
    grid-template-columns: 1fr;
    gap:18px;
    justify-items:center;
  }
  .footnav{ display:none; }
  .footmap{
    display:block;
    max-width:260px;
    margin-top:8px;
    text-align:center;
  }
  .footmap img{
    box-shadow:0 6px 20px rgba(10,33,64,.28);
  }
  .footmap-hint{ font-size:.65rem; }
}

/* -------------------------
   Footer trust line
   ------------------------- */
.footer-trust{
  margin-top:18px;
  padding-top:12px;
  text-align:center;
  font-size:.9rem;
  color:#0A2140;
  opacity:.7;
  border-top:1px solid rgba(10,33,64,.12);
}

@media (max-width: 720px){
  .footbrand{
    font-size:1.25rem;
  }
}

/* =========================
   Sticky-anchor offset
   ========================= */
#pricing,
#questions,
#why,
#included,
#availability{
  scroll-margin-top:64px;
}
@media (min-width: 860px){
  #pricing,
  #questions,
  #why,
  #included,
  #availability{
    scroll-margin-top:25px;
  }
}

/* =========================
   Responsive – Desktop
   ========================= */
@media (min-width: 860px){
  .navlinks{ display:flex; }
  .iconbtn{ display:none; }

  /* Hero stays stacked on desktop: headline block on top, gallery full
     width below. 360px is the header plus the headline block, so the cap
     keeps the gallery and its controls above the fold down to 768px tall. */
  .heroinner{ gap:22px; }
  .hero{ padding:34px 0 22px; }
  .slider{
    aspect-ratio:3/2;
    min-height:320px;
    max-height:min(640px, calc(100vh - 360px));
  }
  section{ padding:54px 0; }

  .features{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:14px;
  }

  .grid-2{
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:22px;
  }

  .ctaband .row{
    grid-template-columns:1.25fr .75fr;
    align-items:center;
    gap:16px;
  }

  .hero h1{ font-size:2.4rem; }
}

/* =========================
   Responsive – Mobile
   ========================= */
@media (max-width: 860px){
  .navcta > .btn-primary{ display:none; }

  header .nav{ position:relative; }

  .brandname-wrap{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    pointer-events:none;
    max-width:calc(100% - 120px);
    overflow:hidden;
  }
  .brandname{
    font-size:26px;
    text-align:center;
  }

  .brandmark{ box-shadow:0 6px 14px rgba(10,33,64,.10); }
  #sliderCaption{ display:none; }

  .sol-price-card-featured{ transform:none; }
}

@media(max-width:540px){
  .sol-price-grid{
    grid-template-columns:1fr;
    gap:16px;
  }
}

@media (max-width: 420px){
  .hero h1{ font-size:2.05rem; }
}

/* =========================
   SEO Statement — Nautical Divider with Center Star
   ========================= */

.seo-statement{
  padding:64px 0;
  position:relative;
}

.seo-statement .wrap{
  max-width:900px;
  text-align:center;
}

/* Divider container (top + bottom) */
.seo-statement .divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;                  /* whitespace around star */
  margin:0 auto;
  flex-wrap:nowrap;          /* CRITICAL: prevents line collapse */
  min-height:18px;           /* ensures pseudo-elements render */
}

/* Line segments (left + right of star) */
.seo-statement .divider::before,
.seo-statement .divider::after{
  content:"";
  display:block;
  height:2px;
  width:70px;                /* desktop length */
  background:var(--navy);    /* true navy */
  opacity:.85;               /* unmistakably navy */
  border-radius:2px;
  flex:0 0 auto;             /* prevents shrinking */
}

/* Center star */
.seo-statement .divider span{
  display:inline-block;      /* keeps it inline in flex row */
  font-size:14px;
  color:var(--navy);
  opacity:.6;                /* slightly softer than lines */
  line-height:1;
}

/* Spacing */
.seo-statement .divider.top{ margin-bottom:26px; }
.seo-statement .divider.bottom{ margin-top:30px; }

/* Headline */
.seo-statement h2{
  font-size:clamp(1.45rem, 2.8vw, 1.85rem);
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* Supporting copy */
.seo-statement .lead{
  max-width:720px;
  margin:16px auto 0;
  font-size:1rem;
  opacity:.92;
}

/* =========================
   Mobile reinforcement
   ========================= */

@media (max-width: 860px){
  .seo-statement{
    padding:52px 0;
  }

  .seo-statement .divider{
    gap:14px;                /* tighter on small screens */
  }

  .seo-statement .divider::before,
  .seo-statement .divider::after{
    width:92px;              /* longer so lines are visible on mobile */
  }

  .seo-statement .divider span{
    font-size:13px;
  }
}

/* =========================
   Page header (match index)
   ========================= */

.page-header{
  margin-top:48px;           /* matches index hero spacing */
  margin-bottom:32px;
}

.page-title{
  font-size:clamp(2rem, 4vw, 2.6rem);
  font-weight:500;
  letter-spacing:.04em;
  margin:0 0 12px 0;
  text-transform:uppercase;
}

.page-rule{
  display:block;
  width:64px;
  height:2px;
  background:#0A2140;
  margin-bottom:18px;
}

.page-lead{
  max-width:720px;
  font-size:1.05rem;
  line-height:1.55;
  opacity:.85;
}
/* Mobile hamburger button refinements */
@media (max-width: 860px){

  /* Soft white background for hamburger */
  .iconbtn{
    background: var(--offwhite);
    border: var(--hair);
  }

  /* Give the nav some right breathing room */
  .nav{
    padding-right: calc(var(--gutter) + 6px);
  }
}
/* Mobile: add left padding to Aurora brand icon (mirror hamburger spacing) */
@media (max-width: 860px){
  .brand{
    padding-left: calc(var(--gutter) + 6px);
  }
}

/* ---- Responsive image formats -------------------------------------------
   Photos are served as <picture> with AVIF and WebP sources and a JPEG <img>
   fallback. display:contents removes the <picture> box from layout entirely,
   so every existing `.slide img`, `.hx-media img` etc. rule keeps working as
   though the img were still a direct child. Built by
   _x-site-docs/build_images.py; .avif/.webp MIME types are in web.config.   */
picture{ display:contents; }

/* ---- stripe-return.asp: the Stripe return page has no site chrome ------
   One centred card in the site's card look (see .card); buttons use .btn.   */
.stripe-return{
  max-width:36rem;
  width:calc(100% - 2 * var(--gutter));
  margin:48px auto;
  padding:28px var(--gutter);
  text-align:center;
  background:rgba(253,252,248,.92);
  border:var(--hair);
  border-radius:var(--r);
  box-shadow:var(--shadow);
}
.stripe-return h1{ margin-top:0; }
.stripe-return .btn{ margin-top:6px; }