/* ============================================================
   SAPA RESIDENCES — Dubai Creek Harbour
   Liquid-glass project page · accent #725C3E
   ============================================================ */

:root{
  /* accent palette derived from #725C3E */
  --accent:      #725C3E;
  --accent-dk:   #5B4A32;
  --accent-lt:   #B1A595;
  --accent-bg:   #F1EDE6;
  --line:        rgba(114,92,62,.16);
  --line-2:      rgba(114,92,62,.32);
  --band:        #201810;

  /* constant neutrals */
  --ink:   #2A2520;
  --ink-2: #5C5249;
  --ink-3: #7D7165; /* darkened from spec's #8B7F73 to pass WCAG AA on white */
  --cream: #FFFFFF;
  --white: #FFFFFF;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --r-sm:12px; --r-md:18px; --r-lg:28px; --r-xl:36px;

  --shadow-sm: 0 10px 30px rgba(170,145,128,.14);
  --shadow-md: 0 18px 50px rgba(170,145,128,.20);
  --shadow-lg: 0 30px 80px rgba(170,145,128,.28);

  --ease: cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  font-weight:300;
  color:var(--ink);
  background:var(--cream);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--accent);color:#fff}

/* ---------- ambient glow ---------- */
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ambient::before,.ambient::after{
  content:"";position:absolute;border-radius:50%;
}
.ambient::before{
  width:64vw;height:64vw;top:-22vw;right:-18vw;
  background:radial-gradient(circle, rgba(177,165,149,.34) 0%, rgba(177,165,149,.12) 45%, transparent 70%);
}
.ambient::after{
  width:58vw;height:58vw;bottom:-20vw;left:-18vw;
  background:radial-gradient(circle, rgba(114,92,62,.18) 0%, rgba(114,92,62,.07) 45%, transparent 70%);
}

/* ---------- layout shells ---------- */
.wrap{max-width:1280px;margin:0 auto;padding:7rem 40px}
section{position:relative}

/* ---------- eyebrow / H2 / lead ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.75rem;
  font-size:.65rem;font-weight:700;letter-spacing:.35em;text-transform:uppercase;
  color:var(--accent-dk);margin-bottom:1.4rem;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--line-2)}
.eyebrow.on-dark{color:var(--accent-lt)}
.eyebrow.on-dark::before{background:rgba(255,255,255,.35)}

.section-h2{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(2.3rem,4.6vw,3.4rem);
  line-height:1.08;letter-spacing:-.01em;margin-bottom:1.4rem;
}
.section-h2 i{font-style:normal;color:var(--accent)}
.on-dark .section-h2 i, .section-h2 i.lt{color:var(--accent-lt)}

.lead{font-size:.95rem;font-weight:300;color:var(--ink-2);max-width:520px}

/* ---------- buttons ---------- */
.btn-pill{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.85rem 1.9rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.78);
  background:linear-gradient(155deg,rgba(255,255,255,.64),rgba(255,255,255,.28));
  color:var(--ink);
  -webkit-backdrop-filter:blur(20px) saturate(165%);backdrop-filter:blur(20px) saturate(165%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 34px -18px rgba(42,37,32,.38);
  font-family:var(--sans);font-size:.8rem;font-weight:500;letter-spacing:.05em;
  transition:color .35s,transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;
}
.btn-pill::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(135deg,#9A835F,var(--accent) 52%,var(--accent-dk));
  opacity:0;transform:scale(1.06);transition:opacity .45s,transform .55s var(--ease);
}
.btn-pill:hover,.btn-pill:focus-visible{color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:rgba(255,255,255,.35)}
.btn-pill:hover::before,.btn-pill:focus-visible::before{opacity:1;transform:scale(1)}
.btn-pill.accent{background:linear-gradient(155deg,rgba(255,255,255,.68),rgba(255,255,255,.30))}
.btn-pill.glass{
  background:rgba(255,255,255,.55);color:var(--ink);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid var(--line-2);
}
.btn-pill.glass:hover{background:#fff;color:var(--ink)}
.hero .btn-pill{
  color:#fff;border-color:rgba(255,255,255,.36);
  background:linear-gradient(155deg,rgba(255,255,255,.2),rgba(255,255,255,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 14px 34px -16px rgba(0,0,0,.38);
}
.btn-glass-white{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.85rem 1.9rem;border-radius:999px;
  background:rgba(255,255,255,.14);color:#fff;
  border:1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  font-size:.8rem;font-weight:500;letter-spacing:.05em;
  transition:all .45s var(--ease);
}
.btn-glass-white:hover{background:rgba(255,255,255,.92);color:var(--ink)}

/* ---------- glass card primitive ---------- */
.glass{
  background:rgba(255,255,255,.58);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  backdrop-filter:blur(24px) saturate(160%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.7);
}

/* ============================================================
   1 · HERO   (no fixed header — the page opens full-bleed)
   ============================================================ */
.hero{height:100vh;height:100svh;min-height:640px;position:relative;overflow:hidden}
.hero img.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(20,15,8,.18) 0%, transparent 32%, transparent 55%, rgba(20,15,8,.45) 100%);
}
.hero-card{
  position:absolute;left:60px;bottom:56px;z-index:2;
  padding:1.8rem 2.1rem;border-radius:var(--r-lg);
  background:rgba(28,21,12,.34);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  backdrop-filter:blur(24px) saturate(160%);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 20px 60px rgba(10,8,4,.28), inset 0 1px 0 rgba(255,255,255,.25);
  color:#fff;max-width:430px;
}
.hero-card .hc-label{
  font-size:.62rem;font-weight:700;letter-spacing:.35em;text-transform:uppercase;
  color:rgba(255,255,255,.85);margin-bottom:.6rem;
}
.hero-card h1{
  font-family:var(--serif);font-weight:500;font-size:clamp(2.4rem,4vw,3.2rem);
  line-height:1.02;margin-bottom:.9rem;letter-spacing:.01em;
}
.hero-card h1 i{font-style:normal;color:var(--accent-lt)}
.hero-card p{font-size:.85rem;font-weight:300;color:rgba(255,255,255,.85);margin-bottom:1.3rem}
.hero-cta{display:flex;gap:.6rem;flex-wrap:wrap}
.hero-scroll{
  position:absolute;right:60px;bottom:56px;z-index:2;color:#fff;
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;opacity:.85;
}
.hero-scroll::after{
  content:"";width:1px;height:56px;background:linear-gradient(#fff,transparent);
  animation:drip 2.4s var(--ease) infinite;
}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============================================================
   2 · DOWNLOADS
   ============================================================ */
.downloads{background:linear-gradient(180deg,var(--accent-bg),rgba(241,237,230,.35))}
.downloads .wrap{padding-top:4.5rem;padding-bottom:4.5rem}
.dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.dl-card{
  display:flex;align-items:center;gap:1.2rem;
  padding:1.5rem 1.7rem;border-radius:var(--r-md);
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.dl-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.dl-icon{
  flex:0 0 46px;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;background:var(--accent-bg);
  color:var(--accent-dk);transition:all .4s var(--ease);
}
.dl-card:hover .dl-icon{background:var(--accent);color:#fff}
.dl-meta small{
  display:block;font-size:.6rem;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.15rem;
}
.dl-meta strong{font-size:.95rem;font-weight:600;color:var(--ink)}

/* ============================================================
   3 · ABOUT
   ============================================================ */
.about-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:5rem;align-items:center}
.about-img{
  aspect-ratio:4/5;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);
}
.about-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.about-img:hover img{transform:scale(1.045)}
.about-copy p{font-size:.95rem;color:var(--ink-2);margin-bottom:1.2rem;max-width:560px}
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;
  margin-top:2.6rem;padding-top:2.2rem;border-top:1px solid var(--line);
}
.stat b{
  display:block;font-family:var(--serif);font-weight:500;
  font-size:2.5rem;line-height:1;color:var(--accent-dk);margin-bottom:.45rem;
}
.stat span{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* ============================================================
   4 · FEATURE STRIP
   ============================================================ */
.feature{height:70vh;min-height:520px;position:relative;overflow:hidden;display:flex;align-items:center}
.feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg, rgba(18,13,7,.78) 0%, rgba(18,13,7,.45) 42%, rgba(18,13,7,.05) 75%);
}
.feature-copy{position:relative;z-index:2;color:#fff;max-width:560px;margin-left:max(60px, calc((100vw - 1280px)/2 + 40px));padding-right:40px}
.feature-copy p{font-size:.95rem;font-weight:300;color:rgba(255,255,255,.88)}

/* ============================================================
   GALLERY — focus-peek slider  (§5 exteriors · §8 amenities · §9 interiors)
   ============================================================ */
.gallery-section .wrap{padding-bottom:5.5rem}
.gallery-head{
  max-width:1280px;margin:0 auto;padding:0 40px 2.6rem;
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
}
.gallery-head .lead{margin-top:.2rem}
.gallery-ctrl{display:flex;align-items:center;gap:1.1rem;flex-shrink:0}
.g-counter{font-size:.85rem;font-weight:400;letter-spacing:.12em;color:var(--ink-3);white-space:nowrap}
.g-counter b{font-weight:600;color:var(--accent)}
.g-arrow{
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line-2);background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  display:grid;place-items:center;color:var(--ink);
  transition:all .4s var(--ease);
}
.g-arrow:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#fff}
.g-arrow:disabled{opacity:.32;cursor:default}
.gallery-shell{overflow:hidden;width:100%}
.gallery-track{
  display:flex;gap:26px;will-change:transform;
  transition:transform .8s var(--ease);
}
.g-item{
  flex:0 0 min(72vw,1040px);aspect-ratio:16/9;
  border-radius:var(--r-lg);overflow:hidden;position:relative;
  opacity:.35;transform:scale(.985);
  transition:opacity .8s var(--ease), filter .8s var(--ease), transform .8s var(--ease);
}
.g-item img{width:100%;height:100%;object-fit:cover}
.g-item.peek{filter:blur(2px)}
.g-item.active{opacity:1;filter:none;transform:scale(1);box-shadow:var(--shadow-lg)}
.g-cap{
  position:absolute;left:22px;bottom:20px;
  padding:.5rem 1.1rem;border-radius:999px;
  background:rgba(20,15,8,.5);color:#fff;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.22);
  font-size:.72rem;font-weight:500;letter-spacing:.12em;
  opacity:0;transform:translateY(8px);transition:all .6s var(--ease) .15s;
}
.g-item.active .g-cap{opacity:1;transform:none}
.g-progress-rail{
  max-width:1280px;margin:2.2rem auto 0;padding:0;
  height:2px;background:var(--line);border-radius:2px;
  margin-left:max(40px, calc((100vw - 1280px)/2 + 40px));
  margin-right:max(40px, calc((100vw - 1280px)/2 + 40px));
  overflow:hidden;
}
.g-progress{height:100%;width:0;background:var(--accent);border-radius:2px;transition:width .8s var(--ease)}

/* ============================================================
   6 · SIGNATURE SPLIT
   ============================================================ */
.split-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:5rem;align-items:center}
.split-img{aspect-ratio:5/4;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg)}
.split-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.split-img:hover img{transform:scale(1.045)}
.split-copy p{font-size:.95rem;color:var(--ink-2);max-width:520px}

/* ============================================================
   7 · AMENITIES GRID
   ============================================================ */
.amen-head{text-align:center;max-width:620px;margin:0 auto 3.6rem}
.amen-head .eyebrow{justify-content:center}
.amen-head .lead{margin:0 auto}
.amen-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
.amen-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.05rem;
  padding:2rem 1.2rem 1.7rem;border-radius:var(--r-md);
  background:rgba(255,255,255,.58);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.amen-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.amen-icon{
  width:66px;height:66px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent-bg);color:var(--accent-dk);
  border:1px solid var(--line);
  transition:all .45s var(--ease);
}
.amen-card:hover .amen-icon{background:var(--accent);color:#fff;border-color:var(--accent)}
.amen-icon svg{width:30px;height:30px}
.amen-card h3{font-family:var(--sans);font-size:.86rem;font-weight:600;letter-spacing:.02em;color:var(--ink)}

/* ============================================================
   10 · PAYMENT PLAN
   ============================================================ */
.pay-head{text-align:center;max-width:640px;margin:0 auto 3.4rem}
.pay-head .eyebrow{justify-content:center}
.pay-head .lead{margin:0 auto}
.pay-row{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr 1fr 1.4fr;gap:1rem}
.pay-card{
  padding:1.9rem 1.3rem;border-radius:var(--r-md);text-align:center;
  background:rgba(255,255,255,.58);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.8);
  display:flex;flex-direction:column;justify-content:center;gap:.55rem;
  transition:transform .5s var(--ease);
}
.pay-card:hover{transform:translateY(-4px)}
.pay-card b{font-family:var(--serif);font-weight:500;font-size:2.35rem;line-height:1;color:var(--accent-dk)}
.pay-card span{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);line-height:1.5}
.pay-card.featured{
  background:linear-gradient(160deg, var(--accent), var(--accent-dk));
  border-color:transparent;box-shadow:var(--shadow-md);
}
.pay-card.featured b{color:#fff}
.pay-card.featured span{color:rgba(255,255,255,.8)}
.pay-note{
  text-align:center;margin-top:2.2rem;font-size:.78rem;color:var(--ink-3);letter-spacing:.04em;
}

/* ============================================================
   11 · LOCATION — interactive landmark map
   ============================================================ */
.loc-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:4.5rem;align-items:start}
.loc-list{list-style:none;margin-top:2.4rem;border-top:1px solid var(--line)}
.loc-item{
  width:100%;display:flex;align-items:center;gap:1.4rem;text-align:left;
  padding:1.05rem .9rem;border:none;border-bottom:1px solid var(--line);
  background:transparent;border-radius:var(--r-sm);
  transition:background .4s var(--ease), padding .4s var(--ease);
}
.loc-item:hover{background:rgba(255,255,255,.6)}
.loc-item .mins{
  flex:0 0 84px;display:flex;align-items:baseline;gap:.35rem;
}
.loc-item .mins b{
  font-family:var(--serif);font-weight:500;font-size:2.15rem;line-height:1;
  color:var(--ink-3);transition:color .4s var(--ease);
}
.loc-item .mins small{font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.loc-item .dest{font-size:.9rem;font-weight:500;color:var(--ink-2);transition:color .4s}
.loc-item .go{
  margin-left:auto;width:34px;height:34px;border-radius:50%;flex:0 0 34px;
  border:1px solid var(--line-2);display:grid;place-items:center;color:var(--ink-3);
  transition:all .4s var(--ease);
}
.loc-item.active{background:rgba(255,255,255,.72);box-shadow:var(--shadow-sm)}
.loc-item.active .mins b{color:var(--accent-dk)}
.loc-item.active .dest{color:var(--ink);font-weight:600}
.loc-item.active .go{background:var(--accent);border-color:var(--accent);color:#fff}

.map-panel{
  border-radius:var(--r-xl);overflow:hidden;position:sticky;top:40px;
  background:rgba(255,255,255,.58);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.85);
  padding:14px;
}
.map-frame{border-radius:calc(var(--r-xl) - 12px);overflow:hidden;background:#F3EEE5}
.map-frame svg{display:block;width:100%;height:auto}
.map-foot{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem .8rem .45rem;
}
.map-foot .mf-label{font-size:.62rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-3)}
.map-eta{font-size:.8rem;font-weight:500;color:var(--ink-2)}
.map-eta b{font-family:var(--serif);font-size:1.35rem;font-weight:500;color:var(--accent-dk)}
.eta-note{margin-top:1rem;font-size:.72rem;line-height:1.55;color:var(--ink-3);max-width:460px}

/* svg map internals */
.lm-pin{cursor:pointer;pointer-events:bounding-box}
.lm-pin circle.dot{fill:#fff;stroke:var(--ink-3);stroke-width:1.5;transition:all .4s var(--ease)}
.lm-pin circle.halo{fill:rgba(114,92,62,0);transition:fill .4s var(--ease)}
.lm-pin text{
  font-family:var(--sans);font-size:11.5px;font-weight:600;fill:#6d6357;
  letter-spacing:.02em;transition:fill .4s var(--ease);
}
.lm-pin.active circle.dot{fill:var(--accent);stroke:var(--accent-dk)}
.lm-pin.active circle.halo{fill:rgba(114,92,62,.14)}
.lm-pin.active text{fill:var(--accent-dk);font-weight:700}
.route{
  fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;
  opacity:0;
}
.route.on{opacity:.85}
.eta-chip{opacity:0;transition:opacity .5s var(--ease) .55s;pointer-events:none}
.eta-chip.on{opacity:1}
.eta-chip rect{fill:var(--ink);opacity:.92}
.eta-chip text{font-family:var(--sans);font-size:11px;font-weight:600;fill:#fff;letter-spacing:.06em}
.proj-pin .pulse{
  fill:none;stroke:var(--accent);stroke-width:2;
  animation:pulse 2.6s var(--ease) infinite;transform-origin:center;transform-box:fill-box;
}
@keyframes pulse{0%{transform:scale(.45);opacity:.9}80%{transform:scale(1.6);opacity:0}100%{opacity:0}}

/* ============================================================
   12 · COMPLETION BAND
   ============================================================ */
.completion{
  background:var(--band);position:relative;overflow:hidden;text-align:center;
  padding:6.5rem 40px;color:#fff;
}
.completion::before{
  content:"";position:absolute;left:50%;top:-40%;width:900px;height:600px;transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(177,165,149,.16), transparent 65%);
}
.completion h2{
  position:relative;font-family:var(--sans);font-size:.72rem;font-weight:700;
  letter-spacing:.4em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:1.6rem;
}
.completion .date{
  position:relative;font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(3.6rem,8vw,6rem);line-height:1;color:var(--accent-lt);
}

/* ============================================================
   13 · FAQ
   ============================================================ */
.faq-wrap{max-width:820px;margin:0 auto}
.faq-head{text-align:center;margin-bottom:3rem}
.faq-head .eyebrow{justify-content:center}
.faq-item{
  border-radius:var(--r-md);margin-bottom:.9rem;overflow:hidden;
  background:rgba(255,255,255,.58);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .4s var(--ease);
}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.35rem 1.7rem;background:transparent;border:none;text-align:left;
  font-family:var(--sans);font-size:.95rem;font-weight:500;color:var(--ink);
}
.faq-q .fx{
  flex:0 0 30px;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line-2);display:grid;place-items:center;
  color:var(--accent-dk);font-weight:400;font-size:1.1rem;line-height:1;
  transition:all .45s var(--ease);
}
.faq-a{max-height:0;overflow:hidden;transition:max-height .6s var(--ease)}
.faq-a p{padding:0 1.7rem 1.5rem;font-size:.9rem;color:var(--ink-2);max-width:660px}
.faq-item.open{box-shadow:var(--shadow-md)}
.faq-item.open .fx{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(45deg)}

/* ============================================================
   14 · CONTACT
   ============================================================ */
.contact{position:relative;overflow:hidden;display:grid;grid-template-columns:1.1fr 1fr;min-height:680px}
.contact-visual{position:relative;display:flex;align-items:flex-end;padding:5rem;overflow:hidden}
.contact-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.contact-visual::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(200deg, rgba(18,13,7,.25) 0%, rgba(18,13,7,.62) 52%, rgba(18,13,7,.94) 100%);
}
.contact-copy{text-shadow:0 2px 26px rgba(10,7,3,.5)}
.contact-copy{position:relative;z-index:2;color:#fff;max-width:460px}
.contact-copy p{font-size:.92rem;color:rgba(255,255,255,.85)}
.contact-form-side{
  background:linear-gradient(180deg, var(--accent-bg), #fff);
  display:flex;align-items:center;justify-content:center;padding:5rem 4rem;
}
.enq-form{
  width:100%;max-width:460px;padding:2.6rem;border-radius:var(--r-lg);
  background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.9);
}
.enq-form h3{font-family:var(--serif);font-weight:500;font-size:1.7rem;margin-bottom:1.6rem}
.enq-form h3 i{font-style:normal;color:var(--accent)}
.field{margin-bottom:1.1rem}
.field label{
  display:block;font-size:.62rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.45rem;
}
.field input,.field select,.field textarea{
  width:100%;padding:.85rem 1.1rem;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:rgba(255,255,255,.75);
  font-family:var(--sans);font-size:.88rem;font-weight:300;color:var(--ink);
  outline:none;transition:border-color .3s, box-shadow .3s;
  -webkit-appearance:none;appearance:none;
}
.field textarea{resize:vertical;min-height:96px}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C5249' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:14px;
  padding-right:2.6rem;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(114,92,62,.12);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.enq-form .btn-pill{width:100%;justify-content:center;margin-top:.4rem}
.form-ok{display:none;text-align:center;padding:2rem 0 1rem;color:var(--accent-dk);font-weight:500}

/* ============================================================
   15 · FOOTER
   ============================================================ */
.footer{background:var(--band);color:rgba(255,255,255,.72);padding:5rem 40px 2.4rem}
.footer-grid{
  max-width:1280px;margin:0 auto;display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;gap:3rem;padding-bottom:3.4rem;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer .f-logo{font-family:var(--serif);font-size:1.6rem;font-weight:600;letter-spacing:.22em;color:#fff;margin-bottom:1rem}
.footer .f-logo span{color:var(--accent-lt)}
.footer p{font-size:.85rem;max-width:320px}
.footer h4{
  font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:1.2rem;
}
.footer ul{list-style:none}
.footer li{margin-bottom:.65rem}
.footer li a{font-size:.85rem;color:rgba(255,255,255,.72);transition:color .3s}
.footer li a:hover{color:#fff}
.footer-base{
  max-width:1280px;margin:0 auto;padding-top:2.2rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.75rem;color:rgba(255,255,255,.45);
}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease), transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- keyboard focus ---------- */
.btn-pill:focus-visible,.btn-glass-white:focus-visible,.g-arrow:focus-visible,
.loc-item:focus-visible,.faq-q:focus-visible,.dl-card:focus-visible,
.footer a:focus-visible{
  outline:2px solid var(--accent-dk);outline-offset:3px;
}
.lm-pin:focus{outline:none}
.lm-pin:focus-visible circle.halo{fill:rgba(114,92,62,.16);stroke:var(--accent-dk);stroke-width:2}

/* ---------- no-backdrop-filter fallback ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .hero-card{background:rgba(28,21,12,.8)}
  .g-cap{background:rgba(20,15,8,.74)}
  .enq-form,.dl-card,.amen-card,.pay-card,.faq-item,.map-panel{background:rgba(255,255,255,.94)}
  .btn-pill{background:rgba(255,255,255,.92)}
  .hero .btn-pill{background:rgba(28,21,12,.62)}
  .btn-glass-white{background:rgba(28,21,12,.5)}
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .gallery-track,.g-item,.route,.eta-chip{transition:none}
  .proj-pin .pulse,.hero-scroll::after{animation:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .amen-grid{grid-template-columns:repeat(4,1fr)}
  .pay-row{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:980px){
  .wrap{padding:5rem 20px}
  .hero{height:90vh;height:90svh}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2.4rem}
  .hero-card{left:20px;right:20px;bottom:32px}
  .hero-scroll{display:none}
  .about-grid,.split-grid,.loc-grid{grid-template-columns:1fr;gap:2.8rem}
  .split-grid .split-copy{order:2}
  .amen-grid{grid-template-columns:repeat(3,1fr)}
  .pay-row{grid-template-columns:repeat(2,1fr)}
  .feature-copy{margin-left:20px;padding-right:20px}
  .contact{grid-template-columns:1fr}
  .contact-visual{min-height:420px;padding:3rem 20px}
  .contact-form-side{padding:3.5rem 20px}
  .g-item{flex-basis:min(84vw,720px)}
  .gallery-head{padding:0 20px 2rem;flex-direction:column;align-items:flex-start}
  .g-progress-rail{margin-left:20px;margin-right:20px}
  .map-panel{position:static}
  .dl-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .amen-grid{grid-template-columns:repeat(2,1fr)}
  .dl-grid,.pay-row,.stats,.field-row{grid-template-columns:1fr}
  .g-item{flex-basis:min(88vw,340px)}
  .loc-item .dest{font-size:.82rem}
}

/* small screens: the SVG map scales down ~0.5×, so in-map labels become
   unreadable — hide them (the list + footer readout carry the same info)
   and enlarge the pins to keep tap targets ≥24px */
@media (max-width:700px){
  .lm-pin text,.eta-chip,.map-plate,.map-frame svg > text{display:none}
  .lm-pin circle.halo{r:26px}
  .lm-pin circle.dot{r:9px;stroke-width:2px}
  .proj-pin .core{r:12px}
  .proj-pin .eye{r:4px}
  .proj-pin .pulse{r:22px}
}