/* ============================================================
   ASHIANA NITYA CARE HOMES — Chennai
   Assisted Living landing page
   ------------------------------------------------------------
   1.  Tokens
   2.  Base & typography
   3.  Buttons & form controls
   4.  Header (logo + single CTA)
   5.  Hero + inline enquiry form
   6.  Overview
   7.  Why choose Nitya
   8.  Living options
   9.  Amenities
   10. Life at Nitya (three-up carousel)
   11. Project details
   12. Final CTA
   13. Footer & mobile bar
   14. Enquiry modal
   15. Reveal animations
   16. Responsive
   17. Reduced motion
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  --red:#D7192D;
  --red-deep:#A5121F;
  --blush:#F7E8E7;

  --charcoal:#1B1917;
  --ink:#3A3330;
  --muted:#736A63;

  --white:#FFFFFF;
  --ivory:#FCF9F4;
  --sand:#F3ECE1;
  --sand-deep:#EAE1D3;
  --line:#E4DACB;

  --shell:1360px;
  --gutter:max(22px, (100vw - var(--shell)) / 2);

  --pad-y:clamp(78px, 9vw, 132px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --shadow-sm:0 8px 24px rgba(27,25,23,.07);
  --shadow-md:0 22px 50px rgba(27,25,23,.10);
  --shadow-lg:0 40px 90px rgba(27,25,23,.16);

  --header-h:86px;
}

/* ---------- 2. BASE & TYPOGRAPHY ---------- */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(16px,1.02vw,17.5px);
  line-height:1.72;
  font-weight:400;
  /* clip, not hidden — `hidden` would turn body into a scroll container */
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}

img{max-width:100%;display:block;height:auto}
button{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.08;letter-spacing:-.015em;font-family:var(--serif);color:var(--charcoal)}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
dl,dd,dt{margin:0}

section{scroll-margin-top:calc(var(--header-h) + 12px)}

.shell{width:min(100% - 44px, var(--shell));margin-inline:auto}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.section-title{font-size:clamp(2.05rem,3.6vw,3.35rem);line-height:1.1}
.section-title em{font-style:italic;color:var(--red)}

.eyebrow{
  font-family:var(--sans);font-size:.79rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:1.3rem;
}

.lede{font-size:1.06em;color:var(--ink)}

.rule-red{display:block;width:64px;height:2px;background:var(--red);margin:26px 0 28px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--charcoal);color:#fff;padding:14px 22px;border-radius:0 0 10px 0;
}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}

/* Typographic fallback used until images/ashiana-logo.png is in place */
.brand-wordmark{
  display:inline-block;font-family:var(--sans);font-weight:700;font-size:1.05rem;
  letter-spacing:.15em;color:var(--red);line-height:1;
}
.brand-wordmark--light{color:#fff}
.modal-head .brand-wordmark{margin-bottom:20px}

/* Photography containers keep their warm tone if an image fails to load */
.img-failed{background:linear-gradient(140deg,var(--sand) 0%,var(--sand-deep) 100%)}

/* ---------- 3. BUTTONS & FORM CONTROLS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--sans);font-size:.95rem;font-weight:600;
  padding:14px 28px;border:1px solid transparent;border-radius:999px;cursor:pointer;
  transition:background .35s var(--ease-soft), color .35s var(--ease-soft),
             border-color .35s var(--ease-soft), transform .35s var(--ease),
             box-shadow .35s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-lg{padding:17px 36px;font-size:1rem}
.btn-block{width:100%}

.btn-red{background:var(--red);color:#fff;box-shadow:0 10px 24px rgba(215,25,45,.22)}
.btn-red:hover{background:var(--red-deep);box-shadow:0 16px 32px rgba(215,25,45,.28)}

.btn-outline{background:transparent;color:var(--charcoal);border-color:var(--line)}
.btn-outline:hover{border-color:var(--charcoal);background:var(--white)}

.btn-cream{background:var(--ivory);color:var(--charcoal)}
.btn-cream:hover{background:#fff}

.btn-onred{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-onred:hover{background:rgba(255,255,255,.14);border-color:#fff}

.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:.78rem;font-weight:600;letter-spacing:.05em;color:var(--charcoal)}
.field label span{color:var(--red)}
.field input,.field select{
  width:100%;font-family:var(--sans);font-size:.95rem;color:var(--charcoal);
  padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:var(--white);
  transition:border-color .3s var(--ease-soft), box-shadow .3s var(--ease-soft);
}
.field select{cursor:pointer}
.field input::placeholder{color:#9C938B}
.field input:focus,.field select:focus{
  outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(215,25,45,.13);
}
.field input.has-error,.field select.has-error{border-color:var(--red);background:#FFF6F6}
.field-error{font-size:.78rem;color:var(--red);margin:0;line-height:1.4}

.success-mark{
  display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:var(--blush);color:var(--red);font-size:1.3rem;margin:0 auto 20px;
}

/* ---------- 4. HEADER ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:90;
  /* transparent so it sits directly on the hero photograph */
  background:transparent;
  transition:background .4s var(--ease-soft), box-shadow .4s var(--ease-soft),
             backdrop-filter .4s var(--ease-soft);
}
.site-header.is-stuck{
  background:rgba(252,249,244,.94);
  backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 1px 0 rgba(27,25,23,.07), 0 14px 34px rgba(27,25,23,.07);
}

.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:var(--header-h);transition:height .4s var(--ease-soft);
}
.site-header.is-stuck .header-inner{height:68px}

.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand-chip{
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border-radius:8px;padding:8px 13px;
  transition:padding .4s var(--ease-soft);
}
.site-header.is-stuck .brand-chip{padding:6px 11px}
.brand-logo{width:auto;height:50px;object-fit:contain;transition:height .4s var(--ease-soft)}
.site-header.is-stuck .brand-logo{height:50px}

.brand-rule{width:1px;height:30px;background:rgba(255,255,255,.34);flex:0 0 auto;transition:background .4s var(--ease-soft)}
.brand-name{
  font-family:var(--serif);font-size:1.12rem;line-height:1.05;color:#fff;
  transition:color .4s var(--ease-soft);
}
.brand-name small{
  display:block;font-family:var(--sans);font-size:.62rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.66);margin-top:3px;
  transition:color .4s var(--ease-soft);
}

.site-header.is-stuck .brand-rule{background:var(--line)}
.site-header.is-stuck .brand-name{color:var(--charcoal)}
.site-header.is-stuck .brand-name small{color:var(--muted)}
.header-cta{flex:0 0 auto;white-space:nowrap}

/* ---------- 5. HERO (full-bleed banner with arch base) ---------- */
.hero{
  position:relative;
  display:flex;align-items:center;
  min-height:min(96vh,900px);
  padding-top:calc(var(--header-h) + 46px);
  padding-bottom:clamp(54px,6vw,86px);
  background:var(--charcoal);
  /* the same arch language used on the section imagery further down */
  border-radius:0 0 clamp(28px,3vw,44px) clamp(110px,13vw,240px);
  overflow:hidden;
}

.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:60% center;will-change:transform}

.hero-veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(92deg,
    rgba(18,16,15,.90) 0%,
    rgba(18,16,15,.76) 30%,
    rgba(18,16,15,.48) 56%,
    rgba(18,16,15,.30) 82%,
    rgba(18,16,15,.34) 100%);
}

.hero-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,404px);
  gap:clamp(32px,4vw,72px);align-items:center;
}

.hero-content{min-width:0}

/* meta line above the headline, separated by hairlines */
.hero-tags{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:1.5rem}
.hero-tags li{
  font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.8);
}
.hero-tags li+li::before{
  content:"";display:inline-block;vertical-align:middle;
  width:1px;height:11px;margin:0 clamp(10px,1.2vw,18px);
  background:rgba(255,255,255,.32);
}

.hero-title{
  color:#fff;max-width:14ch;
  font-size:clamp(2.7rem,5.2vw,4.7rem);line-height:1.02;
  letter-spacing:-.028em;margin-bottom:1.2rem;
}
.hero-title em{font-style:italic;color:var(--red);display:inline-block}

.hero-lede{max-width:44ch;color:rgba(255,255,255,.8);font-size:1.02em}
.hero-meta{
  margin-top:1.4rem;font-size:.88rem;font-weight:500;line-height:1.6;
  color:rgba(255,255,255,.66);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:2rem}
.hero-signature{
  margin-top:2.4rem;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.05rem,1.5vw,1.32rem);color:rgba(255,255,255,.72);
}

/* enquiry card, sitting in the quiet right side of the photograph */
.hero-form{
  width:100%;
  background:var(--ivory);
  border-radius:22px 22px 22px 4px;
  padding:clamp(24px,2.1vw,32px);
  box-shadow:0 40px 90px rgba(0,0,0,.42);
}
.hero-form-title{font-size:1.55rem;margin-bottom:.35rem}
.hero-form-sub{font-size:.84rem;color:var(--muted);line-height:1.5;margin-bottom:18px}
.inline-form{display:flex;flex-direction:column;gap:11px}
.inline-form .btn{margin-top:5px}
.hero-form-note{font-size:.71rem;color:var(--muted);text-align:center;margin:10px 0 0;line-height:1.45}

.inline-success{text-align:center;padding:14px 0 6px}
.inline-success[hidden]{display:none}
.inline-success h3{font-size:1.24rem;margin-bottom:.5rem}
.inline-success p{font-size:.88rem;color:var(--muted);margin:0}

/* trust strip below the banner */
.trust-band{background:var(--ivory);border-bottom:1px solid var(--line)}
.trust-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px clamp(18px,3vw,40px);padding:22px 0;
}
.trust-row li{display:flex;align-items:center;gap:10px;font-size:.88rem;font-weight:600;color:var(--charcoal)}
.trust-row i{color:var(--red);font-size:1rem}

/* ---------- 6. OVERVIEW ---------- */
.overview{padding:var(--pad-y) 0;background:var(--ivory);overflow:hidden}
.overview-grid{
  display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(36px,5vw,86px);align-items:center;
}
.overview-media{position:relative}
.overview-figure{
  margin:0;overflow:hidden;border-radius:250px 24px 24px 24px;
  box-shadow:var(--shadow-md);background:var(--sand);
}
.overview-figure img{width:100%;aspect-ratio:4/5;object-fit:cover}

.overview-quote{
  position:absolute;right:-46px;bottom:-34px;max-width:290px;margin:0;
  background:var(--charcoal);color:#fff;
  padding:26px 28px;border-radius:18px 18px 4px 18px;box-shadow:var(--shadow-md);
}
.overview-quote blockquote{margin:0;font-family:var(--serif);font-size:1.16rem;line-height:1.42;font-style:italic}
.overview-quote figcaption{
  margin-top:12px;font-size:.7rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.5);
}

.overview-copy{position:relative}
.ghost-word{
  position:absolute;top:-.55em;left:-.06em;z-index:0;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(7rem,13vw,12.5rem);line-height:1;
  color:var(--sand);pointer-events:none;user-select:none;
}
.overview-copy>*:not(.ghost-word){position:relative;z-index:1}
.overview-copy p{max-width:60ch;color:var(--muted)}
.overview-copy .lede{color:var(--ink)}

.overview-highlights{display:flex;flex-wrap:wrap;gap:0 clamp(24px,3.4vw,54px);margin-top:44px}
.overview-highlights li{padding-top:16px;border-top:2px solid var(--red);min-width:150px}
.hl-label{
  display:block;font-size:.68rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px;
}
.hl-value{display:block;font-family:var(--serif);font-size:1.24rem;color:var(--charcoal);line-height:1.25}

/* ---------- 7. WHY CHOOSE NITYA ---------- */
.why{padding:var(--pad-y) 0;background:var(--sand)}
.why-head{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);
  gap:clamp(24px,4vw,72px);align-items:end;margin-bottom:clamp(46px,5.5vw,78px);
}
.why-head p{color:var(--muted);max-width:44ch;padding-bottom:.4em}

.reasons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(26px,3vw,44px) clamp(26px,3vw,48px)}
.reason{padding-top:26px;border-top:1px solid var(--sand-deep)}
.reason-icon{display:block;font-size:1.5rem;color:var(--red);margin-bottom:20px;transition:transform .45s var(--ease)}
.reason h3{font-size:1.42rem;margin-bottom:.55rem}
.reason p{font-size:.94rem;color:var(--muted);max-width:34ch;margin:0}
.reason:hover .reason-icon{transform:translateY(-4px)}

.reason--feature{
  background:var(--charcoal);border-top-color:transparent;border-radius:22px;
  padding:34px 32px 38px;margin-top:-26px;box-shadow:var(--shadow-md);
}
.reason--feature h3{color:#fff}
.reason--feature p{color:rgba(255,255,255,.62)}
.reason--feature .reason-icon{color:#fff}

@media (min-width:961px){
  .reason:nth-child(2){transform:translateY(46px)}
  .reason:nth-child(5){transform:translateY(46px)}
  .reason:nth-child(3){transform:translateY(18px)}
  .reason:nth-child(6){transform:translateY(18px)}
  .reasons{padding-bottom:56px}
}

/* ---------- 8. LIVING OPTIONS ---------- */
.options{padding:var(--pad-y) 0;background:var(--ivory)}
.options-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(24px,4vw,72px);align-items:end;margin-bottom:clamp(48px,5vw,76px);
}
.options-head p{color:var(--muted);max-width:46ch;padding-bottom:.4em}

.option{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  align-items:center;margin-bottom:clamp(46px,5vw,80px);
}
.option:last-child{margin-bottom:0}

.option-media{overflow:hidden;border-radius:24px 24px 24px 190px;background:var(--sand);box-shadow:var(--shadow-md)}
.option-media img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.1s var(--ease)}
.option:hover .option-media img{transform:scale(1.045)}

.option-body{
  position:relative;z-index:2;background:var(--white);
  margin-left:-70px;padding:clamp(34px,3.4vw,52px);
  border-radius:22px;box-shadow:var(--shadow-md);
}
.option-title{font-size:clamp(1.85rem,2.6vw,2.5rem);margin-bottom:.4rem}
.option-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:.9rem;color:var(--muted);margin-bottom:1.1rem}
.option-price strong{font-family:var(--serif);font-size:2.1rem;font-weight:400;color:var(--red);letter-spacing:-.01em}
.option-price span{font-size:.88rem}
.option-intro{color:var(--muted);font-size:.96rem;max-width:46ch}

.option-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 24px;margin:26px 0 32px}
.option-features li{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;font-weight:500;color:var(--charcoal);line-height:1.5}
.option-features i{color:var(--red);font-size:.72rem;margin-top:.42em}

.option--reverse .option-media{order:2;border-radius:24px 24px 190px 24px}
.option--reverse .option-body{order:1;margin-left:0;margin-right:-70px}

/* ---------- 9. AMENITIES ---------- */
.amenities{padding:var(--pad-y) 0;background:var(--white)}
.amenity-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:24px;overflow:hidden;
}
.amenity-intro{
  grid-column:span 2;grid-row:span 2;background:var(--sand);
  padding:clamp(32px,3.2vw,48px);display:flex;flex-direction:column;justify-content:center;
}
.amenity-intro p{color:var(--muted);max-width:38ch;margin-top:1.1rem}
.amenity-intro .section-title{font-size:clamp(1.8rem,2.5vw,2.5rem)}

.amenity{
  background:var(--ivory);padding:clamp(24px,2.3vw,32px);
  display:flex;flex-direction:column;justify-content:flex-end;gap:16px;
  min-height:164px;transition:background .4s var(--ease-soft);
}
.amenity h3{font-family:var(--sans);font-size:.96rem;font-weight:600;color:var(--charcoal);line-height:1.35}
.amenity-icon{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--blush);color:var(--red);font-size:1.02rem;
  transition:background .42s var(--ease-soft), color .42s var(--ease-soft), transform .42s var(--ease);
}
.amenity:hover{background:var(--white)}
.amenity:hover .amenity-icon{background:var(--red);color:#fff;transform:translateY(-4px) rotate(-6deg)}

/* ---------- 10. LIFE AT NITYA ----------
   Three photographs on screen at once — a dominant centre frame with a
   smaller frame tucked behind on either side. Arrows, dots, swipe and a
   gentle auto-advance all drive the same rotation. */
.life{background:var(--charcoal);color:#fff;padding:var(--pad-y) 0 clamp(56px,6vw,84px)}
.life-head{text-align:center;margin-bottom:clamp(34px,4vw,54px)}
.life-head .section-title{color:#fff}
.life-head p{color:rgba(255,255,255,.56);margin-top:.8rem;font-size:1rem}

.life-stage{position:relative;overflow:hidden;padding-block:8px}
.life-carousel{
  position:relative;margin-inline:auto;
  width:min(100% - 44px, 1400px);
  height:clamp(280px,38vw,520px);
  touch-action:pan-y;
}

.life-slide{
  position:absolute;top:50%;left:50%;margin:0;
  width:min(50vw,620px);height:100%;
  overflow:hidden;border-radius:26px;background:#2A2724;
  translate:-50% -50%;
  opacity:0;pointer-events:none;
  box-shadow:0 40px 80px rgba(0,0,0,.5);
  transition:transform .85s var(--ease), opacity .7s var(--ease-soft), border-radius .85s var(--ease);
}
.life-slide img{width:100%;height:100%;object-fit:cover}

.life-slide[data-pos="center"]{
  transform:translateX(0) scale(1);
  opacity:1;z-index:3;pointer-events:auto;border-radius:26px;
}
.life-slide[data-pos="prev"]{
  transform:translateX(-78%) scale(.7);
  opacity:.42;z-index:2;pointer-events:auto;border-radius:34px;
}
.life-slide[data-pos="next"]{
  transform:translateX(78%) scale(.7);
  opacity:.42;z-index:2;pointer-events:auto;border-radius:34px;
}
.life-slide[data-pos="prev"]:hover,
.life-slide[data-pos="next"]:hover{opacity:.62;cursor:pointer}

.life-slide figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:64px 34px 28px;
  font-family:var(--serif);font-size:1.3rem;color:#fff;
  background:linear-gradient(to top, rgba(10,9,8,.8), rgba(10,9,8,0));
  opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease-soft) .15s, transform .6s var(--ease) .15s;
}
.life-slide[data-pos="center"] figcaption{opacity:1;transform:none}

.life-controls{
  display:flex;align-items:center;justify-content:center;gap:24px;
  margin-top:clamp(28px,3vw,44px);
}
.life-arrow{
  width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(255,255,255,.24);background:transparent;color:#fff;
  cursor:pointer;display:grid;place-items:center;font-size:.9rem;
  transition:background .34s var(--ease-soft), border-color .34s var(--ease-soft), transform .34s var(--ease);
}
.life-arrow:hover{background:var(--red);border-color:var(--red);transform:translateY(-2px)}

.life-dots{display:flex;align-items:center;gap:9px}
.life-dots button{
  display:block;width:30px;height:3px;padding:0;border:0;border-radius:2px;
  background:rgba(255,255,255,.24);cursor:pointer;
  transition:background .4s var(--ease-soft), width .4s var(--ease);
}
.life-dots li.is-active button{background:var(--red);width:46px}

/* ---------- 11. PROJECT DETAILS ---------- */
.details{padding:var(--pad-y) 0;background:var(--sand)}
.details-title{max-width:16ch;margin-bottom:clamp(38px,4vw,60px)}
.details-band{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  background:var(--ivory);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-sm);
}
.detail{
  padding:clamp(26px,2.4vw,38px) clamp(18px,1.8vw,28px);
  border-left:1px solid var(--line);display:flex;flex-direction:column;gap:10px;
}
.detail:first-child{border-left:0}
.detail i{font-size:1.12rem;color:var(--red);margin-bottom:4px}
.detail dt{font-size:.68rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.detail dd{font-family:var(--serif);font-size:clamp(1.05rem,1.25vw,1.34rem);line-height:1.28;color:var(--charcoal)}

/* ---------- 12. FINAL CTA ---------- */
.final-cta{
  position:relative;overflow:hidden;
  padding:clamp(72px,7.5vw,118px) 0;
  background:var(--charcoal);
}
.cta-media{position:absolute;inset:0;z-index:0}
.cta-media img{width:100%;height:100%;object-fit:cover}
.cta-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(96deg, rgba(18,16,15,.94) 0%, rgba(18,16,15,.84) 42%, rgba(18,16,15,.6) 74%, rgba(18,16,15,.48) 100%);
}

.cta-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(34px,4.5vw,76px);align-items:center;
}
.cta-copy h2{color:#fff;font-size:clamp(2rem,3.3vw,3.1rem);line-height:1.08;margin-bottom:1rem}
.cta-copy>p{color:rgba(255,255,255,.76);max-width:42ch;font-size:1rem}
.cta-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:2rem}

.cta-points{display:flex;flex-direction:column;gap:14px;padding-left:clamp(0px,2vw,28px);border-left:1px solid rgba(255,255,255,.16)}
.cta-points li{display:flex;align-items:flex-start;gap:12px;font-size:.92rem;color:rgba(255,255,255,.82);line-height:1.5}
.cta-points i{color:var(--red);font-size:.72rem;margin-top:.45em}

/* ---------- 13. FOOTER & MOBILE BAR ---------- */
.site-footer{
  position:relative;
  background:var(--charcoal);color:rgba(255,255,255,.55);
  /* mirrors the hero arch so the page opens and closes on the same curve */
  border-radius:clamp(90px,11vw,200px) clamp(28px,3vw,44px) 0 0;
  margin-top:clamp(20px,2.6vw,38px);
}

.footer-main{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(24px,3vw,48px);flex-wrap:wrap;
  padding:clamp(30px,3.2vw,42px) 0;
}
.footer-brand{display:flex;align-items:center;gap:clamp(18px,2vw,30px)}
.footer-logo{
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border-radius:6px;padding:9px 14px;
}
.footer-logo .brand-logo{height:50px}
.footer-project{margin:0;font-size:.88rem;line-height:1.55;color:rgba(255,255,255,.82)}

.footer-meta{display:flex;align-items:center;gap:clamp(22px,3vw,56px);flex-wrap:wrap}
.footer-legal{display:flex;align-items:center}
.footer-legal li+li::before{content:"|";margin:0 14px;color:rgba(255,255,255,.24)}
.footer-legal a{font-size:.86rem;color:rgba(255,255,255,.78);transition:color .3s var(--ease-soft)}
.footer-legal a:hover{color:#fff}
.footer-disclaimer{margin:0;font-size:.76rem;line-height:1.55;color:rgba(255,255,255,.4);max-width:36ch}

.footer-base{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding:16px 0 20px;border-top:1px solid rgba(255,255,255,.1);
  font-size:.77rem;color:rgba(255,255,255,.4);
}
.footer-base p{margin:0}
.footer-credit a{color:rgba(255,255,255,.78);font-weight:600;transition:color .3s var(--ease-soft)}
.footer-credit a:hover{color:#fff}

.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(252,249,244,.94);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .45s var(--ease);
}
.mobile-bar.is-visible{transform:translateY(0)}
.mobile-bar-cta{
  width:100%;display:flex;align-items:center;justify-content:center;
  height:50px;border-radius:999px;font-size:.96rem;font-weight:600;
  background:var(--red);border:1px solid var(--red);color:#fff;cursor:pointer;
}

/* ---------- 14. ENQUIRY MODAL ---------- */
.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:22px}
.modal[hidden]{display:none}
.modal-backdrop{
  position:absolute;inset:0;background:rgba(20,18,17,.55);
  backdrop-filter:blur(7px);opacity:0;transition:opacity .38s var(--ease-soft);
}
.modal-panel{
  position:relative;width:min(100%,564px);max-height:calc(100vh - 44px);overflow-y:auto;
  background:var(--ivory);border-radius:26px;padding:clamp(28px,3vw,42px);
  box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(16px) scale(.965);
  transition:opacity .42s var(--ease), transform .42s var(--ease);
}
.modal.is-open .modal-backdrop{opacity:1}
.modal.is-open .modal-panel{opacity:1;transform:none}

.modal-close{
  position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);background:var(--white);color:var(--charcoal);cursor:pointer;
  display:grid;place-items:center;
  transition:background .3s var(--ease-soft), color .3s var(--ease-soft), transform .3s var(--ease);
}
.modal-close:hover{background:var(--charcoal);color:#fff;transform:rotate(90deg)}

.modal-head{padding-right:44px;margin-bottom:26px}
.modal-head .brand-logo{height:34px;margin-bottom:20px}
.modal-head h2{font-size:clamp(1.42rem,1.6vw,1.82rem);line-height:1.18;margin-bottom:.5rem}
.modal-head p{font-size:.92rem;color:var(--muted)}

.modal-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field--full{grid-column:1 / -1}
.modal-fineprint{font-size:.78rem;color:var(--muted);text-align:center;margin:12px 0 0}

.modal-success{text-align:center;padding:16px 0 8px}
.modal-success[hidden]{display:none}
.modal-success h3{font-size:1.5rem;margin-bottom:.7rem}
.modal-success p{color:var(--muted);font-size:.95rem;max-width:38ch;margin:0 auto 24px}

/* ---------- 15. REVEAL ANIMATIONS ---------- */
[data-reveal]{
  opacity:0;transform:translateY(20px);
  transition:opacity .82s var(--ease), transform .82s var(--ease);
}
[data-reveal].is-revealed{opacity:1;transform:translateY(0)}

.overview-figure img{transform:scale(1.07);transition:transform 1.5s var(--ease)}
.overview-figure.is-revealed img{transform:scale(1)}

@media (min-width:961px){
  .reason[data-reveal]{transform:translateY(20px)}
  .reason:nth-child(2)[data-reveal].is-revealed{transform:translateY(46px)}
  .reason:nth-child(5)[data-reveal].is-revealed{transform:translateY(46px)}
  .reason:nth-child(3)[data-reveal].is-revealed{transform:translateY(18px)}
  .reason:nth-child(6)[data-reveal].is-revealed{transform:translateY(18px)}
}

/* ---------- 16. RESPONSIVE ---------- */

/* Laptop */
@media (max-width:1280px){
  :root{--shell:1140px}
  .option-body{margin-left:-48px}
  .option--reverse .option-body{margin-right:-48px}
}

@media (max-width:1080px){
  .overview-quote{right:-20px;max-width:250px}
}

/* Tablet */
@media (max-width:960px){
  :root{--header-h:72px}

  .brand-logo{height:50px}
  .header-cta{padding:12px 22px;font-size:.9rem}

  /* hero stacks: copy over the photograph, enquiry card beneath it */
  .hero{
    min-height:0;
    padding-top:calc(var(--header-h) + 40px);
    padding-bottom:clamp(40px,6vw,64px);
    border-radius:0 0 24px clamp(70px,11vw,120px);
  }
  .hero-media img{object-position:64% center}
  .hero-veil{
    background:linear-gradient(180deg,
      rgba(18,16,15,.86) 0%,
      rgba(18,16,15,.7) 45%,
      rgba(18,16,15,.62) 100%);
  }
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-title{font-size:clamp(2.5rem,8.2vw,3.5rem);max-width:none}
  .hero-lede{max-width:52ch}
  .hero-signature{margin-top:1.8rem}
  .hero-form{max-width:520px;border-radius:20px}
  .trust-row{justify-content:flex-start;gap:10px 24px;padding:16px 0}

  /* overview */
  .overview-grid{grid-template-columns:1fr;gap:40px}
  .overview-media{max-width:540px}
  .overview-figure{border-radius:190px 20px 20px 20px}
  .overview-quote{right:-10px;bottom:-26px;max-width:260px}
  .ghost-word{font-size:clamp(6rem,20vw,9rem);top:-.4em}

  /* why */
  .why-head{grid-template-columns:1fr;gap:18px;align-items:start}
  .reasons{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
  .reason--feature{margin-top:0}

  /* options */
  .options-head{grid-template-columns:1fr;gap:18px;align-items:start}
  .option,.option--reverse{grid-template-columns:1fr;margin-bottom:56px}
  .option-media,.option--reverse .option-media{order:1;border-radius:20px 20px 20px 110px}
  .option-body,.option--reverse .option-body{order:2;margin:-46px 20px 0}

  /* amenities */
  .amenity-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .amenity-intro{grid-column:span 3;grid-row:span 1}

  /* life */
  .life-slide{width:min(62vw,460px)}
  .life-slide[data-pos="prev"]{transform:translateX(-74%) scale(.66)}
  .life-slide[data-pos="next"]{transform:translateX(74%) scale(.66)}

  /* details */
  .details-band{grid-template-columns:repeat(3,minmax(0,1fr))}
  .detail:nth-child(3n+1){border-left:0}
  .detail:nth-child(n+4){border-top:1px solid var(--line)}

  /* cta */
  .cta-grid{grid-template-columns:1fr;gap:clamp(30px,5vw,44px)}
  .cta-points{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.16);padding-top:26px}

  /* footer */
  .site-footer{border-radius:clamp(60px,10vw,110px) 20px 0 0}
  .footer-main{gap:24px}
  .footer-meta{width:100%;justify-content:space-between}

  .mobile-bar{display:block}
}

/* Mobile */
@media (max-width:640px){
  body{line-height:1.66}
  .shell{width:min(100% - 36px,var(--shell))}
  .hero{padding-top:calc(var(--header-h) + 30px);border-radius:0 0 18px clamp(52px,15vw,90px)}
  .hero-tags li{font-size:.66rem;letter-spacing:.13em}
  .hero-tags li+li::before{margin:0 10px}
  .hero-actions{gap:10px}
  .hero-actions .btn{flex:1 1 100%}
  .hero-form{padding:24px 20px}
  .trust-row{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;padding:16px 0}
  .trust-row li{font-size:.78rem;gap:8px}
  .trust-row i{font-size:.88rem}

  .overview-quote{position:static;max-width:none;margin-top:18px;border-radius:16px}
  .ghost-word{display:none}
  .overview-highlights{gap:22px;flex-direction:column}
  .overview-highlights li{width:100%}

  .reasons{grid-template-columns:1fr;gap:26px}
  .reason--feature{padding:28px 24px 30px}

  .option-body{margin:-40px 14px 0;padding:28px 22px 30px}
  .option-features{grid-template-columns:1fr;gap:9px}
  .option-media,.option--reverse .option-media{border-radius:16px 16px 16px 70px}

  .amenity-grid{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:18px}
  .amenity-intro{grid-column:span 2;padding:28px 24px}
  .amenity{min-height:0;padding:22px 18px;gap:12px}
  .amenity-icon{width:40px;height:40px;font-size:.92rem}
  .amenity h3{font-size:.9rem}

  /* life keeps its centre focus, with the side frames peeking in */
  .life-carousel{width:100%;height:clamp(250px,64vw,340px)}
  .life-slide{width:76vw;border-radius:20px}
  .life-slide[data-pos="center"]{border-radius:20px}
  .life-slide[data-pos="prev"]{transform:translateX(-68%) scale(.76);opacity:.34;border-radius:24px}
  .life-slide[data-pos="next"]{transform:translateX(68%) scale(.76);opacity:.34;border-radius:24px}
  .life-slide figcaption{font-size:1.02rem;padding:48px 20px 18px}
  .life-controls{gap:16px;margin-top:24px}
  .life-arrow{width:46px;height:46px}

  .details-band{grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail{border-left:1px solid var(--line);border-top:0}
  .detail:nth-child(odd){border-left:0}
  .detail:nth-child(n+3){border-top:1px solid var(--line)}

  .cta-actions .btn{flex:1 1 100%}

  .site-footer{border-radius:clamp(44px,14vw,80px) 14px 0 0}
  .footer-main{flex-direction:column;align-items:flex-start;gap:26px}
  .footer-brand{gap:18px}
  .footer-meta{flex-direction:column;align-items:flex-start;gap:14px}
  .footer-base{flex-direction:column;align-items:flex-start;gap:6px}

  .modal{padding:14px}
  .modal-panel{border-radius:20px;max-height:calc(100vh - 28px)}
  .modal-form{grid-template-columns:1fr}
  .modal-head .brand-logo{height:30px}
}

@media (max-width:400px){
  .brand-name{display:none}
  .brand-rule{display:none}
}

/* ---------- 17. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{opacity:1 !important;transform:none !important}
  .hero-media img,.overview-figure img{transform:none !important}
  .btn:hover{transform:none}
}

@media (min-width:961px){
  body.reduce-motion .reason:nth-child(2),
  body.reduce-motion .reason:nth-child(5),
  body.reduce-motion .reason:nth-child(3),
  body.reduce-motion .reason:nth-child(6){transform:none}
}