/* v3 clean — modelled on fourseasons.com: two grounds, capital serif heads, centred narrow text, plain rectangles */
:root{--cream:#dddbc9;--paper:#e6e4d4;--char:#2d302d;--ink:#1f211f;--olive:#6f6749;--sage:#a7ac8a;--ease:cubic-bezier(.22,.61,.36,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--char);font-family:Montserrat,Arial,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased}
body.loading{overflow:hidden}
a{color:inherit;text-decoration:none}
.cream{background:var(--cream);color:var(--char)}.char{background:var(--char);color:var(--cream)}
.caps{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;text-transform:uppercase;letter-spacing:.06em;line-height:1.12;margin:0;text-wrap:balance}
.display{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:300;line-height:1.3}
.eyebrow{font-family:Montserrat,sans-serif;font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
p{font-size:15px;line-height:1.85;margin:0 0 1.1em}
section h2.caps{font-size:clamp(28px,3vw,42px);margin:22px auto 34px;max-width:900px}

.btn{display:inline-block;font:500 11px Montserrat,sans-serif;letter-spacing:.2em;text-transform:uppercase;padding:15px 28px;border:1px solid currentColor;cursor:pointer;transition:background .35s,color .35s,border-color .35s}
.btn.solid{background:var(--char);border-color:var(--char);color:var(--cream)}
.btn.solid:hover{background:transparent;color:var(--char)}
.char .btn.solid{background:var(--cream);border-color:var(--cream);color:var(--char)}
.char .btn.solid:hover{background:transparent;color:var(--cream)}
.btn.light{color:#fff;border-color:#fff;background:transparent}.btn.light:hover{background:#fff;color:var(--char)}

/* intro */
#intro{position:fixed;inset:0;background:var(--char);z-index:100;display:flex;align-items:center;justify-content:center;transition:opacity 1s var(--ease),visibility 1s}
#intro .intro-logo{width:min(380px,66vw);color:var(--cream);opacity:0;animation:fade 1.6s var(--ease) .2s forwards}
#intro svg,.nav-logo svg,.f-logo svg{width:100%;height:auto;display:block}
@keyframes fade{to{opacity:1}}
body:not(.loading) #intro{opacity:0;visibility:hidden}

/* nav: transparent over the hero, solid charcoal bar after */
#nav{position:fixed;top:0;left:0;right:0;z-index:50;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:40px;padding:22px 48px;color:#fff;transition:background .5s,padding .5s}
#nav.solid{background:var(--char);padding:12px 48px;color:var(--cream)}
.nav-logo{width:150px;transition:width .5s var(--ease)}
#nav.solid .nav-logo{width:118px}
.nav-m{display:flex;gap:34px;justify-content:center}
.nav-m a{font:500 11px Montserrat,sans-serif;letter-spacing:.2em;text-transform:uppercase;padding:6px 0;border-bottom:1px solid transparent;transition:border-color .3s}
.nav-m a:hover{border-color:currentColor}
#nav .nav-cta{background:#fff;border-color:#fff;color:var(--char);padding:12px 22px}
#nav .nav-cta:hover{background:transparent;color:#fff}
#nav.solid .nav-cta{background:var(--cream);border-color:var(--cream)}
#nav.solid .nav-cta:hover{background:transparent;color:var(--cream)}
.burger{display:none;background:none;border:0;width:30px;height:18px;position:relative;color:inherit;cursor:pointer}
.burger span{position:absolute;left:0;right:0;height:1px;background:currentColor}
.burger span:first-child{top:4px}.burger span:last-child{bottom:4px}
#menu{position:fixed;inset:0;z-index:49;background:var(--char);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;opacity:0;visibility:hidden;transition:opacity .4s}
#menu a{font-family:'Cormorant Garamond',serif;text-transform:uppercase;letter-spacing:.08em;font-size:26px;color:var(--cream)}
body.menu-open #menu{opacity:1;visibility:visible}

/* hero */
.hero{position:relative;height:100vh;min-height:600px;overflow:hidden;color:#fff}
.hero-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.05) 40%,rgba(0,0,0,.55) 100%)}
.hero-c{position:absolute;left:48px;bottom:13vh;max-width:1100px}
.hero-c h1{font-size:clamp(38px,5vw,74px);line-height:1.04;letter-spacing:.04em}
.hero-p{margin:24px 0 32px;max-width:460px;opacity:.9}
.hero-c>*{opacity:0;transform:translateY(14px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
body.ready .hero-c>*{opacity:1;transform:none}
body.ready .hero-c>*:nth-child(2){transition-delay:.15s}body.ready .hero-c>*:nth-child(3){transition-delay:.3s}

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

/* centred sections */
.intro,.values,.residences,.mews,.quote,.care,.interiors,.viewing{text-align:center;padding:130px 48px}
.intro .body{max-width:640px;margin:0 auto}
.sign{font-size:24px;margin-top:30px}

.band{height:70vh;background-size:cover;background-position:center}

/* features: image + text, alternating (the "A world that knows you" block) */
.feature{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:80px;padding:110px 48px 0}
.feature.rev{padding-bottom:130px}
.feature.rev .f-img{order:2}
.f-img{aspect-ratio:4/3;background-size:cover;background-position:center}
.f-txt{max-width:460px}
.f-txt h2.caps{margin:18px 0 24px;font-size:clamp(26px,2.4vw,36px)}

/* values */
.v-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:1240px;margin:50px auto 0}
.vcol{padding:0 30px;border-left:1px solid rgba(221,219,201,.2)}
.vcol:first-child{border-left:0}
.vcol h3{font-size:24px;margin-bottom:16px}
.vcol p{font-size:14px;opacity:.82}

/* residences carousel: big photo, white card over it, 1 / 5 counter */
.residences{padding-bottom:100px}
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 30px;margin:0 auto 50px}
.tab{background:none;border:0;border-bottom:1px solid transparent;color:inherit;font:500 11px Montserrat,sans-serif;letter-spacing:.2em;text-transform:uppercase;padding:8px 0;cursor:pointer;opacity:.6;transition:opacity .3s,border-color .3s}
.tab.on,.tab:hover{opacity:1;border-color:currentColor}
.carousel{position:relative;height:min(78vh,720px);max-width:1440px;margin:0 auto}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s var(--ease),visibility .9s}
.slide.on{opacity:1;visibility:visible}
.slide-img{position:absolute;inset:0;background-size:cover;background-position:center}
.slide-card{position:absolute;left:50%;bottom:60px;transform:translateX(-50%);width:min(560px,86%);background:var(--paper);color:var(--char);padding:40px 44px 44px;text-align:center}
.slide-card h3{font-size:40px;margin:14px 0 20px}
.slide-card ul{list-style:none;margin:0 0 28px;padding:0;text-align:left}
.slide-card li{padding:12px 0;border-top:1px solid rgba(45,48,45,.18)}
.slide-card li:last-child{border-bottom:1px solid rgba(45,48,45,.18)}
.slide-card .u{display:block;font-family:'Cormorant Garamond',serif;font-size:19px;margin-bottom:2px}
.slide-card .d{font-size:12px;letter-spacing:.04em;opacity:.8}
.ctrl{display:flex;align-items:center;justify-content:center;gap:26px;margin-top:30px}
.ctrl button{background:none;border:0;color:inherit;font-size:30px;line-height:1;cursor:pointer;padding:0 6px;opacity:.75}
.ctrl button:hover{opacity:1}
.count{font:500 12px Montserrat,sans-serif;letter-spacing:.2em}

/* map */
.mews{padding-bottom:90px}
.map{max-width:1300px;margin:10px auto 0}.map svg{width:100%;height:auto;display:block}
.note{margin-top:14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.6}

/* quote */
.quote{padding-top:40px;max-width:900px;margin:0 auto}
.qm{font-family:'Cormorant Garamond',serif;font-size:70px;line-height:.6;color:var(--sage)}
.quote blockquote{font-size:clamp(34px,4vw,56px);margin:16px 0 30px}
.quote p{max-width:620px;margin:20px auto 0}
section.quote{max-width:none}

/* market: two text columns */
.market{display:grid;grid-template-columns:1fr 1fr;gap:100px;padding:130px 10vw}
.m-col h2.caps{font-size:clamp(24px,2.2vw,32px);margin:18px 0 26px}
.m-col p{font-size:14px;opacity:.85}

/* care cards */
.p-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;max-width:1340px;margin:20px auto 0;text-align:left}
.pimg{aspect-ratio:3/4;background-size:cover;background-position:center;margin-bottom:24px}
.pcard h3{font-size:22px;margin-bottom:12px}.pcard p{font-size:14px}

/* interiors */
.interiors{padding-top:20px}
.i-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:300px 300px;gap:16px;max-width:1340px;margin:20px auto 0}
.i-grid>div{background-size:cover;background-position:center}
.i1{grid-row:span 2}

/* story (Clapham): full-bleed photo, dark wash, centred text */
.story{position:relative;min-height:90vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:120px 48px;background:linear-gradient(rgba(25,26,25,.76),rgba(25,26,25,.76)),var(--img) center/cover}
.story-c{max-width:720px}

/* viewing */
.vform{max-width:780px;margin:20px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:28px 40px;text-align:left}
.vform label span{display:block;font:500 10px Montserrat,sans-serif;letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px;opacity:.7}
.vform input,.vform select,.vform textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(45,48,45,.35);padding:10px 0;font:300 16px Montserrat,sans-serif;color:var(--char);outline:none;border-radius:0;-webkit-appearance:none;appearance:none}
.vform input:focus,.vform select:focus,.vform textarea:focus{border-color:var(--char)}
.vform .wide{grid-column:1/-1}
.vform .btn{grid-column:1/-1;justify-self:center;margin-top:16px}

/* footer */
footer{padding:90px 48px 70px;text-align:center}
.f-logo{width:180px;margin:0 auto 60px;color:var(--cream)}
.f-cols{display:grid;grid-template-columns:repeat(3,1fr);max-width:860px;margin:0 auto;text-align:left;gap:30px}
.f-cols .eyebrow{font-family:'Cormorant Garamond',serif;font-style:italic;text-transform:none;letter-spacing:0;font-size:17px;font-weight:300;margin-bottom:16px}
.f-cols a,.f-cols span{display:block;font:500 11px Montserrat,sans-serif;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;opacity:.85}
.f-cols a:hover{opacity:1}

/* ---- v3.1 enhance: clean, with a few signature moments ---- */
.orn{display:block;width:44px;height:8px;margin:0 auto 18px;color:var(--olive);opacity:.8}
.char .orn{color:var(--sage)}
.hero-v{transform:scale(1.08);animation:kb 22s ease-out forwards}
@keyframes kb{to{transform:scale(1)}}
.hero::after{content:"";position:absolute;left:48px;right:48px;bottom:5vh;height:1px;background:rgba(255,255,255,.35)}
/* image wipe: frame opens top-down, photo settles from 1.12 */
.wipe{position:relative;overflow:hidden;clip-path:inset(0 0 100% 0);transition:clip-path 1.5s var(--ease)}
.wipe>div{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.12);transition:transform 2.4s var(--ease)}
.wipe.in{clip-path:inset(0 0 0 0)}.wipe.in>div{transform:scale(1)}
.wipe.in:hover>div{transform:scale(1.04);transition-duration:1.4s}
.f-img.arch{border-radius:999px 999px 0 0;aspect-ratio:4/4.4;max-width:560px;justify-self:center;width:100%}
.f-img.arch.in{clip-path:inset(0 0 0 0 round 999px 999px 0 0)}
.framed{overflow:visible;clip-path:none!important}.framed>div{opacity:0;transition:opacity 1.6s var(--ease),transform 2.4s var(--ease)}.framed.in>div{opacity:1}.framed::after{content:"";position:absolute;inset:-14px 14px 14px -14px;border:1px solid rgba(111,103,73,.45);pointer-events:none;z-index:-1}
.feature{position:relative;z-index:0}
/* band with one line of italic */
.band{position:relative;height:80vh;background:linear-gradient(rgba(20,20,18,.42),rgba(20,20,18,.42)),var(--img) center/cover fixed;display:flex;align-items:center;justify-content:center}
.band-t{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.35);font-size:clamp(36px,5.2vw,80px);text-align:center;padding:0 24px}
/* numerals */
.rn{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px;color:var(--sage);margin-bottom:10px}
.cream .rn{color:var(--olive)}
.vcol h3{font-size:28px}
/* carousel: slow zoom on the live slide, progress line, locator in the card */
.slide .slide-img{transform:scale(1.06);transition:transform 7s linear}
.slide.on .slide-img{transform:scale(1)}
.slide-card{bottom:50px;padding:34px 44px 38px}
.slide-card ul{margin-bottom:18px}
.loc{margin:0 auto 22px;max-width:380px;opacity:.95}.loc svg{width:100%;height:auto;display:block}
.prog{display:block;width:120px;height:1px;background:rgba(221,219,201,.25);position:relative;overflow:hidden}
.prog i{position:absolute;left:0;top:0;bottom:0;width:20%;background:var(--cream);transition:transform .6s var(--ease)}
/* market: hairline between columns, big quote marks */
.market{position:relative}.market::before{content:"";position:absolute;left:50%;top:130px;bottom:130px;width:1px;background:rgba(221,219,201,.2)}
.quote .qm{font-size:110px}
.i-grid>div{position:relative}
.story{background:linear-gradient(rgba(25,26,25,.76),rgba(25,26,25,.76)),var(--img) center/cover fixed}
.pimg{position:relative}
.pcard h3{margin-top:2px}

@media (max-width:980px){
  .band,.story{background-attachment:scroll}.band{height:60vh}
  .market::before{display:none}
  .framed::after{inset:-8px 8px 8px -8px}
  .hero::after{left:20px;right:20px}
  .loc{display:none}
  .v-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.vcol h3{font-size:19px;letter-spacing:.03em}
  .p-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.pcard h3{font-size:17px}

  #nav,#nav.solid{grid-template-columns:1fr auto;padding:16px 20px}
  .nav-m,#nav .nav-cta{display:none}.burger{display:block}
  .nav-logo{width:120px}#nav.solid .nav-logo{width:104px}
  .hero-c{left:20px;right:20px;bottom:10vh}
  .intro,.values,.residences,.mews,.quote,.care,.interiors,.viewing{padding:90px 20px}
  .feature{grid-template-columns:1fr;gap:34px;padding:80px 20px 0}.feature.rev .f-img{order:0}.feature.rev{padding-bottom:90px}
  .v-grid{grid-template-columns:1fr 1fr;gap:40px 0}.vcol{padding:0 14px}.vcol:nth-child(3){border-left:0}
  .carousel{height:auto}.slide{position:relative;display:none}.slide.on{display:block}
  .slide-img{position:relative;height:56vh}
  .slide-card{position:relative;left:auto;bottom:auto;transform:none;width:auto;margin:-50px 14px 0;padding:30px 22px}
  .market{grid-template-columns:1fr;gap:60px;padding:90px 20px}
  .p-grid{grid-template-columns:1fr 1fr;gap:30px 16px}
  .i-grid{grid-template-columns:1fr;grid-template-rows:280px 200px 200px}.i1{grid-row:auto}
  .story{padding:90px 20px}
  .vform{grid-template-columns:1fr}
  footer{padding:70px 20px 50px}.f-cols{grid-template-columns:1fr;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.hero-c>*{opacity:1;transform:none}
}