@charset "UTF-8";
/* ==========================================================================
   BADRI INFRA PROJECTS — RESIDENCES LANDING PAGE
   --------------------------------------------------------------------------
   Theme tokens are taken verbatim from the existing badriinfraprojects.com
   stylesheet. Build is MOBILE-FIRST: the base rules target 360–430px, then
   min-width queries at 700px and 1024px scale up. There are no max-width
   overrides fighting a desktop layout.

   CONTENTS
     1.  Tokens
     2.  Base / reset
     3.  Typography
     4.  Buttons
     5.  Boxes, pills, pictures
     6.  Header & navigation
     7.  Split hero
     8.  Banner strip
     9.  About
     10. Project chapter opener
     11. Fact strip
     12. Gallery
     13. Amenities
     14. Floor plans
     15. Location
     16. Construction status
     17. CTA band
     18. Why Badri
     19. Contact & form
     20. Footer
     21. Floating actions
     22. Lightbox
     23. Reveal animation
     24. Tablet   ≥ 700px
     25. Desktop  ≥ 1024px
     26. Reduced motion & print
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  /* Brand — do not change without a brand decision */
  --bg:#0a0b0d;
  --bg-soft:#111317;
  --bg-card:#151820;
  --gold:#d7b56d;
  --gold-soft:#f0d899;
  --gold-dark:#8d6a2c;
  --text:#f7f3e9;
  --muted:#c7bda8;
  --line:rgba(215,181,109,.22);
  --white-soft:rgba(255,255,255,.82);
  --shadow:0 18px 60px rgba(0,0,0,.35);

  /* Shape */
  --radius:22px;
  --r-sm:16px;
  --container:1240px;

  /* Type */
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Layout */
  --top:62px;          /* header height — JS and scroll offsets rely on this */
  --gutter:16px;
}

/* ------------------------------------------------------------ 2. BASE/RESET */
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-weight:300;
  font-size:15.5px;
  line-height:1.8;
  color:var(--text);
  background:
    radial-gradient(circle at top left,rgba(215,181,109,.10),transparent 32%),
    radial-gradient(circle at 90% 10%,rgba(215,181,109,.08),transparent 25%),
    linear-gradient(180deg,#090a0c 0%,#0d1015 55%,#0a0b0d 100%);
  background-attachment:fixed;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:rgba(215,181,109,.16);
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

/* anchored sections clear the sticky header */
[id]{scroll-margin-top:calc(var(--top) + 16px)}

.skip-link{
  position:absolute; left:-9999px; top:8px; z-index:300;
  background:var(--gold-soft); color:#1c160d; padding:12px 18px; border-radius:999px; font-weight:600;
}
.skip-link:focus{left:16px}

.container{width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter)}
.section{padding:52px 0; position:relative}
.section.tight{padding:30px 0}
.section.flush{padding-top:0}

/* ---------------------------------------------------------- 3. TYPOGRAPHY */
h1,h2,h3,h4,h5{margin:0; font-family:var(--serif); font-weight:600; line-height:1.06; text-wrap:balance}
.section-title{font-size:clamp(27px,7.4vw,58px); letter-spacing:.02em; line-height:1}
.section-title.sm{font-size:clamp(23px,6vw,40px)}
.h-sub{font-size:clamp(19px,5vw,26px)}
.gold{color:var(--gold-soft)}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--gold-soft); font-family:var(--sans); font-size:11px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; margin-bottom:14px;
}
.eyebrow::before{
  content:""; flex:0 0 30px; width:30px; height:1px;
  background:linear-gradient(to right,transparent,var(--gold));
}
.section-text{color:var(--muted); font-size:15px; line-height:1.9; max-width:70ch; margin:0}
.section-text.lede{margin-top:14px}
.note{margin:14px 0 0; font-size:12.5px; color:rgba(199,189,168,.75); line-height:1.75}

/* ------------------------------------------------------------- 4. BUTTONS */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:14px 24px;
  border:1px solid transparent; border-radius:999px;
  font-family:var(--sans); font-weight:600; font-size:14.5px; text-align:center; cursor:pointer;
  transition:transform .25s ease,background .25s ease,border-color .25s ease,color .25s ease;
}
.btn svg{flex:0 0 19px; width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.btn-gold{
  background:linear-gradient(135deg,#f0d899 0%,#d7b56d 45%,#9b7434 100%);
  color:#1c160d; box-shadow:0 12px 28px rgba(215,181,109,.18);
}
.btn-gold:hover{transform:translateY(-2px)}
.btn-outline{border-color:rgba(215,181,109,.28); color:var(--text); background:rgba(255,255,255,.02)}
.btn-outline:hover{border-color:var(--gold); color:var(--gold-soft)}
.btn-block{width:100%}
.btn-row{display:grid; gap:10px; margin-top:22px}

/* --------------------------------------------- 5. SURFACES, PILLS, MEDIA */
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 13px; border-radius:999px;
  border:1px solid rgba(215,181,109,.2); background:rgba(255,255,255,.02);
  font-size:12.5px; color:rgba(247,243,233,.88); white-space:nowrap;
}
.pill.gold{color:var(--gold-soft); border-color:rgba(215,181,109,.36)}
.dot{
  flex:0 0 7px; width:7px; height:7px; border-radius:50%;
  background:var(--gold); animation:pulse 2.6s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(215,181,109,.6)}
  70%{box-shadow:0 0 0 8px rgba(215,181,109,0)}
  100%{box-shadow:0 0 0 0 rgba(215,181,109,0)}
}

/* .ph is the shared picture box. Put it on any <img> and the picture gets a
   fixed shape and rounded corners. Add one of the shape classes below to
   change the shape. Because the shape is fixed in CSS, the page never jumps
   about while the pictures are still loading. */
.ph{
  --ar:16/10;
  width:100%; aspect-ratio:var(--ar);
  border-radius:var(--r-sm); overflow:hidden;
}
img.ph{height:100%; object-fit:cover; border:1px solid rgba(215,181,109,.16); background:#12151b}

.ph.tall{--ar:3/4}
.ph.wide{--ar:16/9}
.ph.sq{--ar:1}
.ph.free{aspect-ratio:auto}

/* Floor plans and maps must NOT be cropped — a cut-off plan is useless.
   "natural" shows the whole picture at its own shape, whatever shape it is. */
.ph.natural{aspect-ratio:auto}
img.ph.natural{height:auto; object-fit:contain}

/* ------------------------------------------------- 6. HEADER & NAVIGATION */
header{
  position:sticky; top:0; z-index:100; height:var(--top);
  background:rgba(10,11,13,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(215,181,109,.1);
}
.nav{height:100%; display:flex; align-items:center; gap:12px}
.brand{display:flex; align-items:center; gap:11px; margin-right:auto; min-width:0; padding:5px 0}
.brand-logo{
  flex:0 0 44px; width:44px; height:44px; padding:5px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(215,181,109,.08));
  border:1px solid rgba(215,181,109,.18);
}
.brand-logo img{width:100%; height:100%; object-fit:contain}
.brand-text strong{
  display:block; font-family:var(--sans); font-size:13.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; line-height:1.15;
}
.brand-text span{
  display:block; margin-top:3px; color:var(--muted);
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
}
.nav-links{
  display:none; position:absolute; top:100%; left:0; right:0;
  flex-direction:column; align-items:stretch;
  padding:6px var(--gutter) 16px;
  background:rgba(10,11,13,.98);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(215,181,109,.14);
}
.nav-links.open{display:flex}
.nav-links a{
  display:flex; align-items:center; min-height:52px;
  font-size:14.5px; color:var(--white-soft);
  border-bottom:1px solid rgba(215,181,109,.08);
}
.nav-links .btn{margin-top:14px; border-bottom:0}
.nav-toggle{
  flex:0 0 46px; width:46px; height:46px; border-radius:14px; cursor:pointer;
  border:1px solid rgba(215,181,109,.28); background:rgba(255,255,255,.02);
  color:var(--text); font-size:18px;
}
.nav-cta{display:none}

/* ----------------------------------------------------------- 7. SPLIT HERO */
.hero{display:flex; flex-direction:column; background:#08090c}
.hero-panel{position:relative; display:flex; align-items:flex-end; min-height:56svh; overflow:hidden}
.hero-art{position:absolute; inset:0}
.hero-art img,.hero-art .ph{position:absolute; inset:0; width:100%; height:100%; border-radius:0; border:0}
.hero-art img{object-fit:cover}
/* large watermark monogram sits behind the artwork */
.hero-art::before{
  content:attr(data-monogram);
  position:absolute; inset:0; z-index:0;
  display:grid; place-items:center;
  font-family:var(--serif); font-weight:600; font-size:clamp(150px,42vw,300px);
  line-height:1; color:rgba(215,181,109,.10);
}
.hero-panel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,9,12,.25) 0%,rgba(8,9,12,.55) 52%,rgba(10,11,13,.95) 100%);
}
.hero-panel .content{position:relative; z-index:2; width:100%; padding:26px var(--gutter) 30px}
.hero-kicker{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:16px;
  padding:8px 14px; border-radius:999px;
  border:1px solid rgba(215,181,109,.25); background:rgba(255,255,255,.06);
  color:var(--gold-soft); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
}
.hero-title{font-family:var(--serif); font-size:clamp(34px,10vw,64px); font-weight:600; line-height:.94}
.hero-title span{display:block; color:var(--gold-soft)}
.hero-meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.hero-divider{height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* -------------------------------------------------------- 8. BANNER STRIP */
.banner-box{
  display:grid; grid-template-columns:1fr; gap:1px;
  border:1px solid rgba(215,181,109,.12); border-radius:var(--radius); overflow:hidden;
  background:rgba(215,181,109,.12);
}
.banner-item{background:rgba(13,16,21,.95); padding:22px 20px}
.banner-item strong{
  display:block; margin-bottom:9px; color:var(--gold-soft);
  font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
}
.banner-item span{color:var(--muted); font-size:13.5px; line-height:1.75}

/* ---------------------------------------------------------------- 9. ABOUT */
.about-grid{display:grid; gap:22px; align-items:center}
.about-card{padding:26px 22px}
.about-card p{margin:0 0 16px; color:var(--muted); line-height:1.95}
.about-card p.first{margin-top:18px}
.image-card{padding:14px}
.image-stack{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.image-stack .lead-img{grid-column:span 2}
.stack-right{display:grid; gap:12px}

/* ------------------------------------------- 10. PROJECT CHAPTER OPENER */
.chapter{position:relative; display:flex; align-items:flex-end; min-height:56svh; overflow:hidden}
.chapter-art{position:absolute; inset:0}
.chapter-art img,.chapter-art .ph{position:absolute; inset:0; width:100%; height:100%; border-radius:0; border:0}
.chapter-art img{object-fit:cover}
.chapter-art::before{
  content:attr(data-monogram);
  position:absolute; inset:0; z-index:0;
  display:grid; place-items:center;
  font-family:var(--serif); font-weight:600; font-size:clamp(130px,34vw,280px);
  line-height:1; color:rgba(215,181,109,.09);
}
.chapter::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,9,12,.42),rgba(10,11,13,.96));
}
.chapter-inner{position:relative; z-index:2; padding-block:40px 32px}
.chapter-index{
  display:inline-flex; align-items:center; gap:12px; margin-bottom:16px;
  color:var(--gold-soft); font-family:var(--sans); font-size:11px;
  letter-spacing:.28em; text-transform:uppercase;
}
.chapter-index::after{content:""; width:52px; height:1px; background:linear-gradient(to right,var(--gold),transparent)}
.chapter-intro{margin-top:18px}

/* ------------------------------------------------------------ 11. FACTS */
.facts{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:rgba(215,181,109,.12);
  border:1px solid rgba(215,181,109,.12);
  border-radius:var(--radius); overflow:hidden;
}
.fact{background:rgba(13,16,21,.95); padding:18px 16px}
/* an odd final cell fills the row rather than leaving a dead square */
.fact:last-child:nth-child(odd){grid-column:1/-1}
.fact .l{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft)}
.fact .v{
  margin-top:8px; font-family:var(--serif); font-size:19px; font-weight:600;
  line-height:1.25; overflow-wrap:anywhere;
}
.fact .v small{
  display:block; margin-top:5px; letter-spacing:0;
  font-family:var(--sans); font-size:11.5px; font-weight:300; line-height:1.55; color:var(--muted);
}

/* ---------------------------------------------------------- 12. GALLERY */
.gal{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:24px}
.gal>*{min-width:0}
.gal .t2{grid-column:span 2}

/* -------------------------------------------------------- 13. AMENITIES */
.amen-wrap{display:grid; gap:22px; align-items:center; margin-top:24px}
.amen{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.amen .item{
  display:flex; flex-direction:column; gap:11px;
  padding:16px 14px; border-radius:var(--r-sm);
  border:1px solid rgba(215,181,109,.14); background:rgba(255,255,255,.02);
  transition:transform .3s ease,border-color .3s ease;
}
.amen .item:hover{transform:translateY(-3px); border-color:rgba(215,181,109,.4)}
.amen svg{width:25px; height:25px; fill:none; stroke:var(--gold-soft); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round}
.amen .n{font-size:13.5px; line-height:1.5; color:var(--white-soft)}

/* ------------------------------------------------------ 14. FLOOR PLANS */
.tabs{
  display:flex; gap:8px; overflow-x:auto;
  margin:22px calc(var(--gutter) * -1) 0; padding:0 var(--gutter) 6px;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:0 0 auto; min-height:44px; padding:11px 17px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(215,181,109,.2); background:rgba(255,255,255,.02);
  color:rgba(247,243,233,.86); font-size:13px; white-space:nowrap;
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.tab:hover{border-color:var(--gold)}
.tab.active{
  background:linear-gradient(135deg,#f0d899 0%,#d7b56d 45%,#9b7434 100%);
  color:#1c160d; border-color:transparent; font-weight:600;
}
.plan-panel{display:none; gap:20px; align-items:start; margin-top:18px}
.plan-panel.active{display:grid}
.plan-panel>*{min-width:0}
.plan-sheet{position:relative}
.plan-sheet .zoomable{cursor:zoom-in; background:#f6f2ea}
.zoom-hint{
  position:absolute; right:14px; top:14px;
  padding:7px 13px; border-radius:999px;
  background:rgba(10,11,13,.72); border:1px solid rgba(215,181,109,.3);
  color:var(--gold-soft); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  pointer-events:none;
}
.plan-side{padding:22px 20px}
.spec{margin-top:14px}
.srow{
  display:flex; justify-content:space-between; gap:14px;
  padding:11px 0; border-bottom:1px solid rgba(215,181,109,.12); font-size:14px;
}
.srow:last-child{border-bottom:0}
.srow .k{color:var(--muted)}
.srow .v{text-align:right; font-variant-numeric:tabular-nums}

/* --------------------------------------------------------- 15. LOCATION */
.loc{display:grid; gap:22px; align-items:center; margin-top:24px}
.loc>*{min-width:0}
.loc-map{padding:12px; margin:0}
.loc-groups{display:grid; gap:22px}
.loc-group h4{
  display:flex; align-items:center; gap:10px; margin:0 0 12px;
  font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft);
}
.loc-group svg{flex:0 0 18px; width:18px; height:18px; fill:none; stroke:var(--gold); stroke-width:1.3}
.loc-group ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.loc-group li{
  display:flex; justify-content:space-between; gap:14px;
  padding-bottom:9px; border-bottom:1px solid rgba(215,181,109,.1);
  font-size:13.5px; color:var(--white-soft);
}
.loc-group li b{font-weight:400; color:var(--gold-soft); white-space:nowrap}

/* ---------------------------------------------- 16. CONSTRUCTION STATUS */
.chip-row{margin-top:14px}
.demo-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:999px;
  border:1px dashed rgba(215,181,109,.4);
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(247,243,233,.6);
}
.prog{display:grid; gap:22px; align-items:start; margin-top:24px}
.prog>*{min-width:0}
.meter{padding:24px 20px}
.meter .k{font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft)}
.meter .pct{
  margin-top:8px; font-family:var(--serif); font-weight:600;
  font-size:clamp(48px,13vw,74px); line-height:1;
  color:var(--gold-soft); font-variant-numeric:tabular-nums;
}
.meter .pct span{font-size:.4em}
.meter .asof{font-size:12.5px; color:var(--muted)}
.meter .spec{margin-top:20px}
.bar{height:6px; margin:18px 0 9px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden}
.bar i{
  display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,var(--gold-dark),var(--gold-soft));
  transition:width 1.4s cubic-bezier(.22,.7,.2,1);
}
.tl{list-style:none; margin:0; padding:0; position:relative}
.tl::before{content:""; position:absolute; left:7px; top:10px; bottom:10px; width:1px; background:rgba(215,181,109,.2)}
.tl li{position:relative; padding:0 0 22px 32px}
.tl li:last-child{padding-bottom:0}
.tl li::before{
  content:""; position:absolute; left:0; top:5px; width:15px; height:15px; border-radius:50%;
  background:#0f1218; border:1px solid rgba(215,181,109,.35);
}
.tl li.done::before{background:linear-gradient(135deg,var(--gold-soft),var(--gold-dark)); border-color:transparent}
.tl li.now::before{background:var(--gold-soft); border-color:transparent; box-shadow:0 0 0 5px rgba(215,181,109,.14)}
.tl .st{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft)}
.tl .h{margin:4px 0 3px; font-family:var(--serif); font-weight:600; font-size:19px}
.tl p{margin:0; font-size:13.5px; line-height:1.75; color:var(--muted)}
.photo-slots{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:22px}

/* -------------------------------------------------------- 17. CTA BAND */
.cta-wrap{padding:26px 22px; position:relative; overflow:hidden}
.cta-wrap::before{
  content:""; position:absolute; right:-120px; top:-150px;
  width:320px; height:320px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(215,181,109,.13),transparent 65%);
}
.cta-copy h3{margin-bottom:10px; font-size:clamp(23px,6vw,36px)}
.cta-copy p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.85}

/* -------------------------------------------------------- 18. WHY BADRI */
.why-grid{display:grid; gap:12px; margin-top:24px}
.why-card{padding:22px 20px}
.why-number{
  display:grid; place-items:center;
  width:52px; height:52px; margin-bottom:16px; border-radius:50%;
  border:1px solid rgba(215,181,109,.2); background:rgba(255,255,255,.02);
  font-family:var(--serif); font-size:24px; font-weight:600; color:var(--gold-soft);
}
.why-card h3{margin-bottom:9px; font-size:21px}
.why-card p{margin:0; color:var(--muted); font-size:14px; line-height:1.8}

/* --------------------------------------------------- 19. CONTACT & FORM */
.connect-grid{display:grid; gap:22px; align-items:start; margin-top:24px}
.form-card,.contact-card{padding:24px 20px}
.form-card h3,.contact-card h3{margin-bottom:16px; font-size:27px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}  /* honeypot */
.form-group{margin-bottom:14px}
.form-group label{
  display:block; margin-bottom:8px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft);
}
.form-control{
  width:100%; min-height:52px; padding:14px 15px;
  border:1px solid rgba(215,181,109,.16); border-radius:14px;
  background:rgba(255,255,255,.03); color:var(--text);
  font-family:inherit; font-size:16px; font-weight:300;  /* 16px stops iOS zoom */
  outline:none; transition:border-color .25s ease,box-shadow .25s ease;
  -webkit-appearance:none; appearance:none;
}
.form-control::placeholder{color:rgba(199,189,168,.45)}
.form-control:focus{border-color:rgba(215,181,109,.48); box-shadow:0 0 0 3px rgba(215,181,109,.08)}
.form-control.invalid{border-color:#e8a76a}
select.form-control{
  padding-right:42px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7b56d' stroke-width='1.6'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px;
}
select.form-control option{background:#12151b; color:var(--text)}
textarea.form-control{min-height:110px; resize:vertical}
.consent{
  display:flex; align-items:flex-start; gap:11px; margin:4px 0 16px;
  font-size:12px; line-height:1.6; color:var(--muted); cursor:pointer;
}
.consent input{
  flex:0 0 22px; width:22px; height:22px; margin:1px 0 0; position:relative; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  border:1px solid rgba(215,181,109,.4); border-radius:6px; background:rgba(255,255,255,.03);
  transition:background .2s ease,border-color .2s ease;
}
.consent input:checked{background:linear-gradient(135deg,#f0d899,#d7b56d); border-color:transparent}
.consent input:checked::after{
  content:""; position:absolute; left:7px; top:3px; width:6px; height:11px;
  border-right:2px solid #1c160d; border-bottom:2px solid #1c160d; transform:rotate(42deg);
}
.contact-list{display:grid; gap:12px; margin-top:20px}
.contact-item{
  padding:16px 18px; border-radius:18px;
  border:1px solid rgba(215,181,109,.14); background:rgba(255,255,255,.02);
}
.contact-item b{
  display:block; margin-bottom:7px; color:var(--gold-soft);
  font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
}
.contact-item span{color:var(--white-soft); font-size:14.5px; line-height:1.7}
.contact-item a{
  display:inline-flex; align-items:center; min-height:40px;
  color:var(--white-soft); font-size:14.5px;
}
.contact-item a:hover{color:var(--gold-soft)}

/* ---------------------------------------------------------- 20. FOOTER */
footer{border-top:1px solid rgba(215,181,109,.1); padding:34px 0 100px}
.foot-grid{display:grid; gap:26px}
footer h5{
  margin:0 0 14px; color:var(--gold-soft);
  font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
}
footer ul{list-style:none; margin:0; padding:0; display:grid; gap:2px; font-size:14px}
footer ul li,footer ul a{display:flex; align-items:center; min-height:40px; color:var(--muted)}
footer ul a:hover{color:var(--gold-soft)}
.foot-brand{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.foot-brand .brand-logo{flex:0 0 52px; width:52px; height:52px}
.foot-tagline{font-size:13.5px}
.disclaimer{margin:26px 0 0; font-size:11px; line-height:1.8; color:rgba(199,189,168,.5)}
.foot-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 18px;
  margin-top:22px; padding-top:18px;
  border-top:1px solid rgba(215,181,109,.1);
  font-size:12px; color:var(--muted);
}

/* ------------------------------------------------ 21. FLOATING ACTIONS */
.floaters{
  position:fixed; right:14px; bottom:calc(14px + env(safe-area-inset-bottom,0px));
  z-index:95; display:grid; gap:10px;
}
.fab{
  display:grid; place-items:center; width:56px; height:56px; border-radius:50%;
  box-shadow:0 16px 32px rgba(0,0,0,.4); transition:transform .25s ease;
}
.fab:hover{transform:translateY(-3px)}
.fab svg{width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.fab-wa{background:linear-gradient(135deg,#29d466,#18a24a); color:#04240f}
.fab-call{background:linear-gradient(135deg,#f0d899,#9b7434); color:#1c160d}

/* ------------------------------------------------------- 22. LIGHTBOX */
.lb{position:fixed; inset:0; z-index:200; display:none; place-items:center; padding:16px; background:rgba(6,7,9,.96)}
.lb.open{display:grid}
.lb-inner{margin:0; width:100%; max-width:1100px}
.lb-inner img{width:100%; max-height:82svh; object-fit:contain; border-radius:14px; background:#f6f2ea}
.lb-inner figcaption{
  margin-top:14px; text-align:center; color:var(--gold-soft);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
}
.lb-x{
  position:absolute; top:14px; right:14px; width:46px; height:46px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid rgba(215,181,109,.3); color:var(--text); font-size:20px;
}

/* ------------------------------------------------------- 23. REVEAL */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s ease,transform .8s ease}
.reveal.active{opacity:1; transform:none}

/* ==========================================================================
   24. TABLET  ≥ 700px
   ========================================================================== */
@media (min-width:700px){
  :root{--gutter:28px}
  body{font-size:16px}
  .section{padding:70px 0}

  .btn-row{display:flex; flex-wrap:wrap; gap:14px}
  .btn-block{width:auto}

  .banner-box{grid-template-columns:1fr 1fr}
  .facts{grid-template-columns:repeat(3,1fr)}

  .gal{grid-template-columns:repeat(4,1fr); gap:14px}
  .gal .t2{grid-column:span 2}
  .gal .r2{grid-row:span 2}

  .amen{grid-template-columns:repeat(3,1fr)}
  .why-grid{grid-template-columns:1fr 1fr}
  .photo-slots{grid-template-columns:repeat(4,1fr)}
  .loc-groups{grid-template-columns:1fr 1fr}

  .image-stack{grid-template-columns:1.2fr .8fr}
  .image-stack .lead-img{grid-column:auto; grid-row:span 2}

  .hero-panel .content{padding:34px var(--gutter) 38px}
  .about-card,.form-card,.contact-card{padding:32px}
  .cta-wrap{padding:34px}
  .foot-grid{grid-template-columns:1fr 1fr}
}

/* ==========================================================================
   25. DESKTOP  ≥ 1024px
   ========================================================================== */
@media (min-width:1024px){
  :root{--top:88px}
  .section{padding:90px 0}

  .brand-logo{flex:0 0 66px; width:66px; height:66px; padding:8px; border-radius:18px}
  .brand-text strong{font-size:17px}
  .brand-text span{font-size:11px}

  .nav-toggle{display:none}
  .nav-links{
    display:flex; position:static; flex-direction:row; align-items:center; gap:26px;
    margin-right:20px; padding:0; background:none; border:0; backdrop-filter:none;
  }
  .nav-links a{position:relative; min-height:auto; padding-block:4px; border:0; font-size:14px}
  .nav-links a::after{
    content:""; position:absolute; left:0; bottom:-5px; width:0; height:1px;
    background:var(--gold); transition:width .35s ease;
  }
  .nav-links a:hover::after{width:100%}
  .nav-links .btn{display:none}
  .nav-cta{display:inline-flex}

  .hero{flex-direction:row; min-height:calc(100svh - var(--top))}
  .hero-panel{flex:1 1 50%; min-height:auto; transition:flex-grow .7s cubic-bezier(.22,.7,.2,1)}
  .hero:hover .hero-panel{flex-grow:.84}
  .hero .hero-panel:hover{flex-grow:1.32}
  .hero-divider{flex:0 0 1px; width:1px; height:auto; background:linear-gradient(180deg,transparent,var(--gold),transparent)}
  .hero-panel .content{padding:44px}

  .banner-box{grid-template-columns:repeat(4,1fr)}
  .facts{grid-template-columns:repeat(5,1fr)}
  .about-grid{grid-template-columns:1.05fr .95fr; gap:36px}
  .amen-wrap{grid-template-columns:1.45fr .9fr; gap:30px}
  .plan-panel.active{grid-template-columns:1.5fr .9fr; gap:30px}
  .loc{grid-template-columns:1fr 1.05fr; gap:34px}
  .prog{grid-template-columns:.95fr 1.1fr; gap:30px}
  .why-grid{grid-template-columns:repeat(3,1fr); gap:22px}
  .connect-grid{grid-template-columns:1fr .95fr; gap:30px}
  .foot-grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr}

  .cta-wrap{display:flex; align-items:center; justify-content:space-between; gap:30px}
  .cta-wrap .btn-row{flex:0 0 auto; margin:0}

  .chapter{min-height:min(72svh,640px)}
  .chapter-inner{padding-block:70px 60px}

  .floaters{right:22px; bottom:22px}
  .fab{width:62px; height:62px}
}

/* ==========================================================================
   26. REDUCED MOTION & PRINT
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}
@media print{
  header,.floaters,.lb,.btn,.nav-links{display:none !important}
  body{background:#fff; color:#000}
  .card,.fact,.banner-item{border-color:#ccc; box-shadow:none}
}