/* MAR Real Estate — "Architectural Noir" design system
   Layout: 12-column editorial grid (max 1320px), dark architectural chrome with warm "paper" reading sections.
   Gold is an accent (actions, hairlines), never a fill for large areas. */
@font-face{font-family:'Jost';font-style:normal;font-weight:300 600;font-display:swap;src:url(/fonts/Jost-400.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/PlayfairDisplay-600.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 700;font-display:swap;src:url(/fonts/PlayfairDisplay-500i.woff2) format('woff2')}
@font-face{font-family:'PF Fallback';src:local('Georgia'),local('Times New Roman'),local('Noto Serif'),local('Liberation Serif');size-adjust:105.4%;ascent-override:90%;descent-override:22%}
@font-face{font-family:'Jost Fallback';src:local('Arial'),local('Helvetica'),local('Roboto'),local('Liberation Sans');size-adjust:95.6%;ascent-override:104%;descent-override:30%}

:root{
  --ink:#08090b; --ink-1:#0e1014; --ink-2:#15181e; --ink-3:#1d2129;
  --bone:#f3eee4; --stone:#c9bfae; --muted:#a59e92; --line:rgba(201,191,174,.16); --line-2:rgba(201,191,174,.28);
  --gold:#d6b46a; --gold-2:#ead19a; --gold-ink:#1a1408;
  --paper:#f5f1ea; --paper-2:#ebe5da; --paper-ink:#17181b; --paper-muted:#5d5850; --paper-line:rgba(23,24,27,.12);
  --plate-bg:#0f1216; --ok:#7fbf8e; --err:#e58b7a;
  --display:'Playfair Display','PF Fallback',Georgia,serif; --body:'Jost','Jost Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1320px; --gut:clamp(16px,4vw,48px); --sec:clamp(72px,10vw,148px);
  --ease:cubic-bezier(.2,.7,.1,1); --r:2px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--ink);color:var(--bone);font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:var(--gold-2);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#fff}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.08;margin:0;letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--bone);color:var(--ink);padding:10px 14px}.skip:focus{left:12px}
.num{font-variant-numeric:tabular-nums lining-nums}
.muted{color:var(--muted)}.small{font-size:14px}
.eyebrow{font:500 12px/1.3 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.eyebrow--light{color:var(--gold-2)}
.display{font-size:clamp(46px,8.4vw,118px);line-height:.98;letter-spacing:-.02em}
.h1{font-size:clamp(38px,6vw,76px);line-height:1.02}
.h2{font-size:clamp(30px,4.2vw,54px)}
.h3{font-size:clamp(22px,2.4vw,30px)}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--stone);max-width:62ch}
.link-arrow{display:inline-flex;align-items:center;gap:10px;color:var(--gold-2);text-decoration:none;font-weight:500;letter-spacing:.02em}
.link-arrow::after{content:"";width:28px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.link-arrow:hover::after{width:44px}

/* Buttons */
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.btns--stack{flex-direction:column}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border:1px solid transparent;border-radius:var(--r);font-weight:500;letter-spacing:.04em;text-decoration:none;cursor:pointer;transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease)}
.btn--gold{background:var(--gold);color:var(--gold-ink)}.btn--gold:hover{background:var(--gold-2);color:var(--gold-ink)}
.btn--ghost{border-color:var(--line-2);color:var(--bone)}.btn--ghost:hover{border-color:var(--gold);color:var(--gold-2)}
.btn--sm{min-height:40px;padding:0 16px;font-size:14px}.btn--block{width:100%}
.dot{width:7px;height:7px;border-radius:50%;background:#2fbf71;box-shadow:0 0 0 3px rgba(47,191,113,.2)}

/* Header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:rgba(8,9,11,.86);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line);transition:background .4s}
.hdr--overlay{position:fixed;left:0;right:0;background:linear-gradient(180deg,rgba(8,9,11,.65),rgba(8,9,11,0));border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.hdr--overlay.is-solid{background:rgba(8,9,11,.9);border-color:var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.hdr__in{max-width:1480px;margin:0 auto;padding:12px var(--gut);display:flex;align-items:center;gap:24px;min-height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand img{width:auto;height:37px}.brand__text{display:flex;flex-direction:column;gap:5px}.brand__text img{height:20px}
.brand__tag{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.nav{margin-left:auto}
.nav__list{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav__item{position:relative;display:flex;align-items:center}
.nav__link{display:block;padding:10px 6px 10px 12px;color:var(--bone);text-decoration:none;font-size:15px;letter-spacing:.01em}
.nav__link[aria-current]{color:var(--gold-2)}
.nav__toggle{width:24px;height:32px;display:grid;place-items:center;background:none;border:0;color:var(--muted);cursor:pointer;padding:0}.nav__toggle svg{width:10px}
.nav__panel{position:absolute;top:100%;left:0;min-width:260px;padding:10px;background:var(--ink-1);border:1px solid var(--line-2);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .25s,transform .25s var(--ease),visibility .25s}
.nav__panel ul{list-style:none;margin:0;padding:0}
.nav__panel a{display:block;padding:9px 12px;color:var(--stone);text-decoration:none;font-size:15px}
.nav__panel a:hover,.nav__panel a:focus-visible{color:var(--bone);background:var(--ink-2)}
.nav__item:hover .nav__panel,.nav__item.is-open .nav__panel,.nav__item:focus-within .nav__panel{opacity:1;visibility:visible;transform:none}
.hdr__cta{display:flex;align-items:center;gap:10px;flex:none}
.burger{display:none;width:46px;height:46px;border:1px solid var(--line-2);background:none;cursor:pointer;position:relative}
.burger span{position:absolute;left:12px;right:12px;height:1px;background:var(--bone);transition:transform .3s var(--ease)}
.burger span:first-child{top:18px}.burger span:last-child{top:27px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)}.burger[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
.mnav{position:fixed;inset:72px 0 0;z-index:55;background:var(--ink);overflow-y:auto;padding:16px var(--gut) calc(100px + env(safe-area-inset-bottom,0px))}
.mnav__group{border-bottom:1px solid var(--line)}
.mnav__group summary{list-style:none;cursor:pointer;padding:18px 0;font-family:var(--display);font-size:26px;display:flex;justify-content:space-between}
.mnav__group summary::-webkit-details-marker{display:none}.mnav__group summary::after{content:"+";color:var(--gold)}.mnav__group[open] summary::after{content:"–"}
.mnav__group ul{list-style:none;margin:0 0 16px;padding:0}.mnav__group a{display:block;padding:10px 0;color:var(--stone);text-decoration:none}
.mnav__link{display:block;padding:18px 0;font-family:var(--display);font-size:26px;color:var(--bone);text-decoration:none;border-bottom:1px solid var(--line);margin-bottom:24px}
@media (max-width:1180px){.nav{display:none}.burger{display:block}.hdr__cta{margin-left:auto}}
@media (max-width:640px){.hide-sm{display:none}.brand__tag{display:none}.brand__text img{height:17px}.hdr__in{min-height:64px}.mnav{inset:64px 0 0}}

/* Mobile action bar */
.mbar{display:none}
@media (max-width:860px){
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:repeat(3,1fr);background:rgba(8,9,11,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line-2);padding-bottom:env(safe-area-inset-bottom,0px)}
  .mbar a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;min-height:58px;color:var(--bone);text-decoration:none;font-size:12.5px;letter-spacing:.04em}
  .mbar a:first-child{color:var(--gold-2)}.mbar svg{width:20px;height:20px}
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}
}

/* Hero (home) */
.hero{position:relative;min-height:max(640px,min(100svh,980px));display:flex;align-items:flex-end;overflow:clip;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hero__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,9,11,.55) 0%,rgba(8,9,11,.15) 35%,rgba(8,9,11,.55) 68%,var(--ink) 100%),linear-gradient(90deg,rgba(8,9,11,.6),rgba(8,9,11,0) 60%)}
.hero__in{padding-top:140px;padding-bottom:clamp(40px,6vw,72px)}
.hero__lead{margin-top:22px;color:#e9e3d7}
.hero__scroll{position:absolute;right:var(--gut);bottom:32px;width:1px;height:64px;background:var(--line-2);overflow:hidden}
.hero__scroll span{position:absolute;inset:0;background:var(--gold);transform:translateY(-100%);animation:drip 2.4s var(--ease) infinite}
@keyframes drip{60%,100%{transform:translateY(100%)}}
@media (max-width:860px){.hero__scroll{display:none}}

/* Search */
.search{margin-top:36px;max-width:980px;background:rgba(14,16,20,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line-2)}
.search__tabs{display:flex;border:0;margin:0;padding:0;border-bottom:1px solid var(--line)}
.search__tabs label{flex:1 1 0;cursor:pointer}
.search__tabs input{position:absolute;opacity:0}
.search__tabs span{display:block;text-align:center;padding:14px 10px;color:var(--stone);letter-spacing:.06em;border-bottom:2px solid transparent;transition:color .3s,border-color .3s}
.search__tabs input:checked+span{color:var(--bone);border-color:var(--gold)}
.search__tabs input:focus-visible+span{outline:2px solid var(--gold-2);outline-offset:-4px}
.search__fields{display:grid;grid-template-columns:1.6fr 1fr 1fr auto;gap:0}
.search__f{display:flex;flex-direction:column;padding:12px 18px;border-right:1px solid var(--line);min-width:0}
.search__f span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.search__f input,.search__f select{background:transparent;border:0;padding:6px 0 2px;color:var(--bone);font-size:16px;outline:none;min-width:0}
.search__f select option{background:var(--ink-1)}
.search__go{border-radius:0;min-height:auto;padding:0 34px}
@media (max-width:760px){.search__fields{grid-template-columns:1fr 1fr}.search__f:first-child{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--line)}.search__go{grid-column:1/-1;min-height:52px}}

/* Section heads & grids */
section{position:relative}
.section-head{margin-bottom:clamp(28px,4vw,52px);max-width:900px}
.section-head .lead{margin-top:18px}
.section-head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;max-width:none;flex-wrap:wrap}
.grid{display:grid;gap:clamp(16px,2vw,28px)}
.grid--cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.grid--areas{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.grid--links{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.grid--mini{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.grid--svc{grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:0;border-top:1px solid var(--line)}

/* Paths */
.paths{padding-block:var(--sec)}
.paths__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;perspective:1400px}
.path{position:relative;display:flex;flex-direction:column;min-height:520px;overflow:hidden;text-decoration:none;color:var(--bone);border:1px solid var(--line);transform-style:preserve-3d;transition:transform .6s var(--ease),border-color .4s}
.path__media{position:absolute;inset:0}.path__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);filter:saturate(.85)}
.path::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,11,.05) 20%,rgba(8,9,11,.92) 78%)}
.path__body{position:relative;z-index:1;margin-top:auto;padding:28px;display:flex;flex-direction:column;gap:10px;transform:translateZ(30px)}
.path__n{font-family:var(--display);color:var(--gold);font-size:15px}
.path__title{font-family:var(--display);font-size:clamp(24px,2.2vw,30px);line-height:1.1}
.path__text{color:var(--stone);font-size:15.5px}
.path:hover{border-color:var(--gold)}.path:hover .path__media img{transform:scale(1.06)}
@media (max-width:1100px){.paths__grid{grid-template-columns:repeat(2,1fr)}.path{min-height:420px}}
@media (max-width:600px){.paths__grid{grid-template-columns:1fr}.path{min-height:340px}}

/* Property cards & rail */
.pcard{position:relative;display:flex;flex-direction:column;background:var(--ink-1);border:1px solid var(--line);transition:border-color .4s,transform .5s var(--ease)}
.pcard:hover{border-color:var(--line-2);transform:translateY(-4px)}
.pcard__media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--ink-2)}
.pcard__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.pcard:hover .pcard__media img{transform:scale(1.05)}
.badge{position:absolute;left:14px;top:14px;padding:5px 10px;background:rgba(8,9,11,.78);color:var(--gold-2);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.pcard__note{position:absolute;right:10px;bottom:10px;padding:3px 8px;background:rgba(8,9,11,.72);color:var(--stone);font-size:11px;letter-spacing:.06em}
.pcard__body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard__body .eyebrow{margin:0;font-size:11px}
.pcard__title{font-size:22px;line-height:1.2}.pcard__title a{color:var(--bone);text-decoration:none}.pcard__title a::after{content:"";position:absolute;inset:0}
.pcard__facts{color:var(--muted);font-size:14.5px}
.pcard__price{margin-top:auto;padding-top:10px;font-family:var(--display);font-size:24px;color:var(--gold-2)}.pcard__price small{font-family:var(--body);font-size:13px;color:var(--muted);margin-right:4px}
.rail-section{padding-block:var(--sec) 24px}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(82vw,400px);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--gut) 20px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;overscroll-behavior-x:contain}
.rail>.pcard{scroll-snap-align:start}
@media (min-width:1400px){.rail{padding-left:calc((100vw - var(--wrap))/2 + var(--gut))}}

/* Area cards */
.areas-feature{padding-block:var(--sec)}
.acard{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;text-decoration:none;color:var(--bone);border:1px solid var(--line);background:var(--plate-bg)}
.acard__media,.acard__media picture,.acard__media img,.acard__media svg{position:absolute;inset:0;width:100%;height:100%}
.acard__media img{object-fit:cover;transition:transform 1.2s var(--ease)}
.acard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,11,0) 35%,rgba(8,9,11,.92))}
.acard__body{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:22px;display:flex;flex-direction:column;gap:6px}
.acard__name{font-family:var(--display);font-size:26px;line-height:1.1}
.acard__line{color:var(--stone);font-size:14.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.acard:hover img{transform:scale(1.06)}.acard:hover{border-color:var(--gold)}
.plate{color:var(--gold-2)}.plate-lines{transition:transform 1.2s var(--ease)}.acard:hover .plate-lines{transform:translateY(-6px)}

/* Story (sticky storytelling) */
.story{padding-block:var(--sec);background:var(--ink-1);border-block:1px solid var(--line)}
.story__grid{display:grid;grid-template-columns:1fr;gap:32px}
.story__visual{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line)}
.story__shot{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease)}.story__shot.is-on{opacity:1}
.story__shot img{width:100%;height:100%;object-fit:cover}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{position:relative;padding:30px 0 30px 64px;border-top:1px solid var(--line);counter-increment:s;transition:opacity .4s}
.steps li::before{content:"0" counter(s);position:absolute;left:0;top:32px;font-family:var(--display);color:var(--gold);font-size:20px}
.steps h3{font-size:clamp(22px,2vw,28px)}.steps p{color:var(--stone);margin-top:10px;max-width:52ch}.steps .link-arrow{margin-top:14px;font-size:15px}
@media (min-width:900px){.story__grid{grid-template-columns:1fr 1fr;gap:72px}.story__visual{position:sticky;top:110px;align-self:start}.steps li{min-height:46vh}}
.story--compact .steps li{min-height:auto}

/* Off-plan depth stage (CSS 3D) */
.depth{padding-block:var(--sec)}
.depth__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.stage{position:relative;aspect-ratio:1/1;display:grid;place-items:center;perspective:1500px;border:1px solid var(--line);background:radial-gradient(70% 55% at 50% 70%,rgba(214,180,106,.12),transparent 70%),var(--ink-1);overflow:hidden}
.tower{position:relative;width:min(48%,300px);aspect-ratio:1;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(calc(-38deg + var(--p,.5) * 56deg))}
.tower i{position:absolute;inset:0;border:1px solid rgba(234,209,154,.6);background:rgba(214,180,106,calc(.03 + var(--i) * .006));transform:translateZ(calc(var(--i) * 24px * var(--rise,1)));transition:opacity .5s}
.stage__legend{position:absolute;left:18px;right:18px;bottom:14px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
@media (max-width:860px){.depth__grid{grid-template-columns:1fr}.stage{aspect-ratio:4/3}}

/* Paper (light editorial) sections */
.paper{background:var(--paper);color:var(--paper-ink);--line:var(--paper-line);--line-2:rgba(23,24,27,.22)}
.paper .eyebrow{color:#8a6a2a}
.paper .lead,.paper .muted{color:var(--paper-muted)}
.paper a{color:#6d5220}.paper a:hover{color:var(--paper-ink)}
.paper .link-arrow{color:#6d5220}
.paper .btn--ghost{color:var(--paper-ink);border-color:rgba(23,24,27,.3)}
.paper .btn--ghost:hover{border-color:#8a6a2a;color:#6d5220}
.guides-feature{padding-block:var(--sec)}
.tools-strip{margin-top:56px;padding-top:28px;border-top:1px solid var(--paper-line)}
.tools-strip__row{display:flex;flex-wrap:wrap;gap:10px}
.tools-strip__row a{padding:12px 18px;border:1px solid var(--paper-line);text-decoration:none;color:var(--paper-ink);background:#fff}
.tools-strip__row a:hover{border-color:#8a6a2a}

/* Link cards */
.lcard{display:flex;flex-direction:column;gap:10px;padding:26px;border:1px solid var(--line);text-decoration:none;color:inherit;background:rgba(255,255,255,.015);transition:border-color .3s,transform .4s var(--ease),background .3s;min-height:100%}
.lcard:hover{border-color:var(--gold);transform:translateY(-3px)}
.paper .lcard{background:#fff}.paper .lcard:hover{border-color:#8a6a2a}
.lcard .eyebrow{margin:0;font-size:11px}
.lcard__title{font-family:var(--display);font-size:22px;line-height:1.2}
.lcard__text{color:var(--muted);font-size:15px;line-height:1.55}.paper .lcard__text{color:var(--paper-muted)}
.lcard__more{margin-top:auto;padding-top:8px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}.paper .lcard__more{color:#8a6a2a}

/* Principles */
.principles{padding-block:var(--sec)}
.principles__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.principles__grid>div{padding:28px 28px 8px 0;border-right:1px solid var(--line);margin-right:28px}
.principles__grid>div:last-child{border-right:0;margin-right:0}
.principles__grid h3{font-size:22px;margin-bottom:12px}.principles__grid p{color:var(--stone);font-size:15.5px}
@media (max-width:980px){.principles__grid{grid-template-columns:1fr 1fr}.principles__grid>div:nth-child(2){border-right:0;margin-right:0}}
@media (max-width:600px){.principles__grid{grid-template-columns:1fr}.principles__grid>div{border-right:0;margin-right:0;border-bottom:1px solid var(--line)}}

/* CTA band */
.ctaband{position:relative;min-height:min(78vh,720px);display:flex;align-items:center;overflow:clip;isolation:isolate}
.ctaband__media{position:absolute;inset:0;z-index:-1}.ctaband__media picture,.ctaband__media img{width:100%;height:100%;object-fit:cover}
.ctaband::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(8,9,11,.88),rgba(8,9,11,.35))}
.ctaband__in{position:relative;z-index:1;padding-block:var(--sec)}
.ctaband .lead{margin-top:18px;color:#e5dfd3}

/* Page hero */
.phero{position:relative;padding-block:clamp(36px,6vw,80px) clamp(40px,6vw,72px);border-bottom:1px solid var(--line);overflow:clip;isolation:isolate}
.phero--media{min-height:min(72vh,680px);display:flex;align-items:flex-end}
.phero__media{position:absolute;inset:0;z-index:-2}.phero__media picture,.phero__media img,.phero__media svg{width:100%;height:100%;object-fit:cover}
.phero--media::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,9,11,.35),rgba(8,9,11,.5) 45%,rgba(8,9,11,.96))}
.phero--plate::before{background:linear-gradient(180deg,rgba(8,9,11,.1),rgba(8,9,11,.4) 50%,rgba(8,9,11,.95))}
.phero__in{position:relative}
.phero .h1{max-width:18ch}
.phero__lead{margin-top:20px}
.phero--listing{min-height:auto}
.crumbs{margin-bottom:26px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px 10px;list-style:none;margin:0;padding:0;font-size:13.5px;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:10px;color:var(--line-2)}
.crumbs a{color:var(--stone);text-decoration:none}.crumbs a:hover{color:var(--bone)}
.mask{display:block;overflow:clip;padding-bottom:.08em;margin-bottom:-.08em}.mask>span{display:inline-block}

/* Listings page */
.listings{padding-block:clamp(28px,4vw,48px) var(--sec)}
.filters{margin-bottom:28px;border:1px solid var(--line);background:var(--ink-1)}
.filters summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;cursor:pointer;font-weight:500}
.filters summary::-webkit-details-marker{display:none}
.filters summary span:first-child::before{content:"";display:inline-block;width:14px;height:10px;margin-right:12px;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);vertical-align:middle}
.filters__count{color:var(--muted);font-weight:400}
.filters__form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:14px;padding:4px 20px 20px}
.filters__form label{display:flex;flex-direction:column;gap:6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.filters__form input,.filters__form select{background:var(--ink);border:1px solid var(--line-2);padding:12px 12px;color:var(--bone);font-size:16px;letter-spacing:0;text-transform:none;border-radius:var(--r)}
.filters__btns{display:flex;gap:10px;align-items:flex-end}
@media (min-width:900px){.filters:not([open])>summary{cursor:pointer}}
.empty{padding:clamp(28px,4vw,48px);border:1px dashed var(--line-2);background:var(--ink-1)}
.empty h3{font-size:26px;margin-bottom:10px}
.chips-wrap{margin-top:44px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{padding:9px 14px;border:1px solid var(--line-2);color:var(--stone);text-decoration:none;font-size:14.5px;border-radius:999px;transition:border-color .3s,color .3s}
.chips a:hover,.chips a[aria-current]{border-color:var(--gold);color:var(--bone)}
.paper .chips a{color:var(--paper-ink);background:#fff;border-color:var(--paper-line)}
.chips--sticky{position:sticky;top:72px;z-index:5;padding:14px 0;background:var(--paper);margin-bottom:24px;flex-wrap:nowrap;overflow-x:auto}

/* Article */
.article{padding-block:clamp(48px,7vw,96px)}
.article__grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(32px,5vw,80px)}
.article__side{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:28px}
.article__main{max-width:780px;min-width:0}
@media (max-width:980px){.article__grid{grid-template-columns:1fr}.article__side{position:static;order:2}.side-cta{display:none}}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--paper-line)}
.toc li a{display:block;padding:7px 0 7px 16px;margin-left:-1px;border-left:1px solid transparent;color:var(--paper-muted);text-decoration:none;font-size:14.5px;line-height:1.4}
.toc li a:hover,.toc li a.is-active{color:var(--paper-ink);border-color:#8a6a2a}
.answer{padding:26px 28px;background:#fff;border-left:2px solid #b08d45;margin-bottom:32px}
.answer .eyebrow{margin-bottom:8px}
.answer__text{font-size:19px;line-height:1.6;color:var(--paper-ink)}
.answer__meta{margin-top:12px;font-size:13px;color:var(--paper-muted)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:0;margin:0 0 40px;border-top:1px solid var(--line)}
.facts>div{padding:16px 18px 16px 0;border-bottom:1px solid var(--line)}
.facts dt{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}.paper .facts dt{color:var(--paper-muted)}
.facts dd{margin:6px 0 0;font-size:16.5px;line-height:1.45}
.facts--wide{margin-block:40px}
.prose{font-size:18px;line-height:1.75}
.prose-sec{margin-bottom:44px;scroll-margin-top:100px}
.prose h2{font-size:clamp(26px,3vw,36px);margin-bottom:18px}
.prose h3{font-size:22px;margin:28px 0 10px}
.prose p{margin:0 0 1.05em}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.2em}.prose li{margin-bottom:.45em}
.prose blockquote{margin:24px 0;padding:6px 0 6px 22px;border-left:2px solid #b08d45;font-family:var(--display);font-size:22px;font-style:italic}
.tablewrap{margin:8px 0 40px}
.tablescroll{overflow-x:auto;border:1px solid var(--paper-line);background:#fff}
table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.5}
caption{caption-side:top;text-align:left;padding:0 0 12px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-muted)}
th,td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--paper-line)}
thead th{background:var(--paper-2);font-weight:600;font-size:14px}
tbody th{font-weight:600}
.faq{margin:56px 0 40px}
.faq .h2{margin-bottom:20px}
.faq details{border-top:1px solid var(--line)}.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;font-family:var(--display);font-size:21px;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:30px;width:12px;height:12px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(-135deg);top:34px}
.faq__a{padding:0 0 22px;font-size:17px;line-height:1.7}.paper .faq__a{color:#2c2c2c}
.sources{margin-top:40px;padding:22px 24px;border:1px solid var(--paper-line)}
.sources ul{margin:0 0 10px;padding-left:1.1em}
.related{padding-top:clamp(48px,6vw,80px)}.related .h2{margin-bottom:28px}
.inline-sec{margin:48px 0}.inline-sec .h3{margin-bottom:20px}
.notice{padding:16px 18px;border:1px solid var(--paper-line);background:var(--paper-2);font-size:15px;margin-bottom:28px}
.side-cta .eyebrow{margin-bottom:10px}

/* Services */
.pm-services{padding-block:var(--sec)}
.svc{display:flex;flex-direction:column;gap:8px;padding:28px 24px 30px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--bone);transition:color .3s}
.svc__n{font-family:var(--display);color:var(--gold);font-size:15px}
.svc__t{font-family:var(--display);font-size:24px;line-height:1.15}
.svc__d{color:var(--muted);font-size:15px}
.svc:hover .svc__t{color:var(--gold-2)}
.pm-siblings{padding-block:56px}.pm-siblings .h2{margin-bottom:22px}
.hub-kids{padding-block:clamp(40px,6vw,72px)}
.areas-index{padding-block:clamp(40px,6vw,72px)}.areas-index .h2{margin-bottom:28px}
.guide-cat{padding-top:48px;scroll-margin-top:140px}.guide-cat .h2{margin-bottom:22px;font-size:clamp(26px,3vw,38px)}

/* Contact */
.contact-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px;padding-block:48px}
.ccard{display:flex;flex-direction:column;gap:6px;padding:26px;border:1px solid var(--line);text-decoration:none;color:var(--bone)}
.ccard__t{font-family:var(--display);font-size:26px}.ccard__d{color:var(--stone);overflow-wrap:anywhere}
a.ccard:hover{border-color:var(--gold)}

/* Enquiry */
.enquire{padding-block:var(--sec);background:var(--ink-1);border-top:1px solid var(--line);scroll-margin-top:72px}
.enquire__in{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,6vw,96px);align-items:start}
.enquire__copy .lead{margin-top:18px}
.ticks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:28px;color:var(--stone)}.paper .ticks li{color:var(--paper-ink)}
.ticks li::before{content:"";position:absolute;left:2px;top:.55em;width:12px;height:6px;border-left:1px solid var(--gold);border-bottom:1px solid var(--gold);transform:rotate(-45deg)}
.ticks--cols{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;background:var(--ink);border:1px solid var(--line-2);border-radius:var(--r);padding:14px 14px;font-size:16px;color:var(--bone);transition:border-color .3s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);outline:none}
.field [aria-invalid="true"]{border-color:var(--err)}
.field--full{grid-column:1/-1}
.form__err{color:var(--err)}.form__ok{color:var(--ok)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:860px){.enquire__in{grid-template-columns:1fr}.form{grid-template-columns:1fr}}

/* Property detail */
.prop .crumbs{padding-top:28px;margin-bottom:20px}
.prop__top{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);padding-bottom:clamp(40px,6vw,72px);align-items:start}
.gallery__main{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink-2);border:1px solid var(--line)}
.gallery__slide{margin:0;position:absolute;inset:0}.gallery__slide img{width:100%;height:100%;object-fit:cover}
.gallery__nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:1px solid var(--line-2);background:rgba(8,9,11,.7);color:var(--bone);font-size:24px;cursor:pointer}
.gallery__nav--prev{left:14px}.gallery__nav--next{right:14px}
.gallery__count{position:absolute;right:14px;top:14px;padding:4px 10px;background:rgba(8,9,11,.75);font-size:13px}
.gallery__thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-top:10px}
.gallery__thumbs button{padding:0;border:1px solid transparent;background:none;cursor:pointer;aspect-ratio:4/3;overflow:hidden;opacity:.6;transition:opacity .3s}
.gallery__thumbs button[aria-current="true"],.gallery__thumbs button:hover{opacity:1;border-color:var(--gold)}
.gallery__thumbs img{width:100%;height:100%;object-fit:cover}
.prop__panel{position:sticky;top:96px;padding:28px;border:1px solid var(--line);background:var(--ink-1)}
.prop__title{font-size:clamp(28px,3vw,40px);margin-bottom:8px}
.prop__price{margin-top:22px;font-family:var(--display);font-size:clamp(30px,3vw,40px);color:var(--gold-2);display:flex;flex-direction:column}
.prop__price small{font-family:var(--body);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.permit{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.prop__body{padding-block:clamp(48px,6vw,80px)}.prop__main{max-width:860px}
.facts--spec{margin-bottom:48px}
.plan{counter-reset:p;list-style:none;padding:0;display:grid;gap:10px}.plan li{padding:14px 16px;background:#fff;border:1px solid var(--paper-line)}
.related-props{padding-block:var(--sec)}.related-props .h2{margin-bottom:28px}
@media (max-width:960px){.prop__top{grid-template-columns:1fr}.prop__panel{position:static}}

/* Tools */
.tool{margin-bottom:40px;padding:28px;background:#fff;border:1px solid var(--paper-line)}
.tool__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}
.tool label{display:flex;flex-direction:column;gap:6px;font-size:13px;letter-spacing:.06em;color:var(--paper-muted)}
.tool input{background:var(--paper);border:1px solid var(--paper-line);padding:13px 12px;font-size:17px;color:var(--paper-ink);border-radius:var(--r);font-variant-numeric:tabular-nums}
.tool__out{display:block;margin:22px 0 12px;padding:20px 22px;background:var(--ink);color:var(--bone)}
.tool__out dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px 20px;margin:0}
.tool__out dt{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.tool__out dd{margin:4px 0 0;font-family:var(--display);font-size:26px;color:var(--gold-2);font-variant-numeric:tabular-nums}

/* Footer */
.ftr{padding-block:72px 32px;border-top:1px solid var(--line);background:var(--ink)}
.ftr__grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:36px}
.ftr__sig{font-family:var(--display);font-style:italic;color:var(--gold-2);margin:18px 0 10px;font-size:19px}
.ftr__h{font:500 12px/1.3 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ftr a{color:var(--stone);text-decoration:none;font-size:15px}.ftr a:hover{color:var(--bone)}
.ftr__legal{margin-top:56px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ftr__legal p{max-width:820px}
.socials{display:flex;gap:12px;margin-top:16px}.socials img{opacity:.7;filter:invert(85%) sepia(15%) saturate(400%) hue-rotate(5deg)}
@media (max-width:980px){.ftr__grid{grid-template-columns:1fr 1fr}.ftr__brand{grid-column:1/-1}}
@media (max-width:520px){.ftr__grid{grid-template-columns:1fr}}

/* ---------------- Motion tiers (html[data-motion] set before paint) ---------------- */
html:not([data-motion="off"]) [data-reveal="mask"]{clip-path:inset(0 0 0 0)}
html:not([data-motion="off"]) [data-reveal="mask"].will-reveal{clip-path:inset(0 0 100% 0)}
html:not([data-motion="off"]) [data-reveal="mask"].in{clip-path:inset(0 0 0 0);transition:clip-path 1s var(--ease) calc(var(--d,0) * 70ms)}
html:not([data-motion="off"]) [data-reveal="wipe"].will-reveal{clip-path:inset(10% 10% 10% 10%)}
html:not([data-motion="off"]) [data-reveal="wipe"].in{clip-path:inset(0);transition:clip-path 1.2s var(--ease)}
html:not([data-motion="off"]) .mask>span{animation:rise 1s var(--ease) both}
html:not([data-motion="off"]) .mask+.mask>span{animation-delay:.09s}
@keyframes rise{from{transform:translateY(108%)}to{transform:none}}
html[data-motion="full"] .hero__media img{transform:scale(calc(1.02 + var(--hp,0) * .05)) translateY(calc(var(--hp,0) * 4%));transition:transform .1s linear}
html[data-motion="full"] [data-hero-copy]{transform:translateY(calc(var(--hp,0) * -60px));opacity:calc(1 - var(--hp,0) * 1.1)}
html[data-motion="full"] .phero__media{transform:translateY(calc(var(--pp,0) * 8%)) scale(1.03)}
html[data-motion="full"] .rail-section.is-pinned{height:var(--rail-h,auto);padding-bottom:0;overflow-x:clip}
html[data-motion="full"] .rail-section.is-pinned .rail-sticky{position:sticky;top:88px;padding-bottom:32px}
html[data-motion="full"] .rail-section.is-pinned .rail{overflow:visible;scroll-snap-type:none;transform:translate3d(calc(var(--rx,0) * -1px),0,0)}
html[data-motion="full"] .steps li:not(.is-on){opacity:.36}
html[data-motion="full"] [data-tilt]{transform:rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg))}
html[data-motion="lite"] .tower{--rise:.85}
html[data-motion="off"] .tower{--p:.5}
/* Reduced motion is respected unless the visitor explicitly chose a tier via #motion-full / #motion-lite (stored; #motion-auto resets). */
@media (prefers-reduced-motion: reduce){html:not([data-motion-forced]) *,html:not([data-motion-forced]) *::before,html:not([data-motion-forced]) *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* --- fixes after visual QA --- */
.path__media picture,.pcard__media picture,.phero__media picture,.hero__media picture,.story__shot picture,.ctaband__media picture{height:100%}
.path__media picture img,.pcard__media picture img{height:100%}
.section-head--row>div{flex:1 1 520px;min-width:0}
@media (max-width:760px){
  .hero{min-height:auto}
  .hero__media img{object-position:62% 35%}
  .hero__shade{background:linear-gradient(180deg,rgba(8,9,11,.45) 0%,rgba(8,9,11,.25) 30%,rgba(8,9,11,.7) 62%,rgba(8,9,11,.96) 100%)}
  .hero__in{padding-top:120px}
}
.phero--media::before{background:linear-gradient(90deg,rgba(8,9,11,.82),rgba(8,9,11,.35) 70%),linear-gradient(180deg,rgba(8,9,11,.2),rgba(8,9,11,.92) 96%)}
.phero--plate .phero__media{opacity:.55}
.phero--plate::before{background:linear-gradient(90deg,rgba(8,9,11,.9),rgba(8,9,11,.3) 75%)}
.phero__lead{max-width:60ch}
.paper .eyebrow{color:#76591f}
.paper .pcard,.paper .empty{color:var(--bone);--line:rgba(201,191,174,.16);--line-2:rgba(201,191,174,.28)}
.paper .pcard .eyebrow{color:var(--gold)}
.paper .pcard a,.paper .empty a:not(.btn){color:var(--bone)}
.paper .pcard__facts,.paper .empty .muted{color:var(--muted)}
.paper .empty .btn--ghost{color:var(--bone);border-color:var(--line-2)}
.paper .btn--gold,.paper .btn--gold:hover{color:var(--gold-ink)}
/* Performance: no live backdrop blur on scrolling surfaces (measured: halves frame time on scroll). */
.hdr,.hdr--overlay.is-solid{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(8,9,11,.95)}
.hdr--overlay{background:linear-gradient(180deg,rgba(8,9,11,.7),rgba(8,9,11,0))}
.mbar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(8,9,11,.97)!important}
.search{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(12,14,18,.9)}
html[data-motion="full"] .hero__media img{transition:none;will-change:transform}
html[data-motion="full"] .rail-section.is-pinned .rail{will-change:transform}

/* ================= Motion v2: clearly visible on every tier except "off" =================
   Rules: transform / opacity / clip-path only (compositor-friendly), no scroll-jacking,
   prefers-reduced-motion and data-motion="off" disable everything (see the global reduce rule above). */
@property --p{syntax:'<number>';inherits:true;initial-value:.5}
@keyframes ur-zoom{from{transform:scale(1.1)}to{transform:scale(1)}}
@keyframes ur-up{from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:none}}
@keyframes ur-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ur-head{from{transform:translateY(-100%)}to{transform:none}}

/* 1. Page entrance: header drops in, hero photo settles from a slow zoom, copy rises in sequence */
html:not([data-motion="off"]) .hdr{animation:ur-head .9s var(--ease) both}
html:not([data-motion="off"]) .hero__pic,
html:not([data-motion="off"]) .phero__media>picture,
html:not([data-motion="off"]) .phero__media>img{display:block;animation:ur-zoom 2.8s cubic-bezier(.2,.7,.1,1) both;transform-origin:50% 60%}
html:not([data-motion="off"]) .hero__in>:not(h1),
html:not([data-motion="off"]) .phero__in>:not(h1){animation:ur-up .9s var(--ease) both}
html:not([data-motion="off"]) .hero__in>:nth-child(1),html:not([data-motion="off"]) .phero__in>:nth-child(1){animation-delay:.1s}
html:not([data-motion="off"]) .hero__in>:nth-child(3),html:not([data-motion="off"]) .phero__in>:nth-child(3){animation-delay:.35s}
html:not([data-motion="off"]) .hero__in>:nth-child(4),html:not([data-motion="off"]) .phero__in>:nth-child(4){animation-delay:.5s}
html:not([data-motion="off"]) .hero__in>:nth-child(5),html:not([data-motion="off"]) .phero__in>:nth-child(5){animation-delay:.62s}
html:not([data-motion="off"]) .mask>span{animation-duration:1.25s;animation-delay:.15s}
html:not([data-motion="off"]) .mask+.mask>span{animation-delay:.3s}

/* 2. Community ticker (home): a slow, decorative loop; pauses on hover and stops for reduced motion */
.ticker{position:relative;overflow:hidden;border-block:1px solid var(--line);background:var(--ink-1);padding-block:20px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker__track{display:flex;width:max-content;gap:56px;padding-right:56px}
.ticker__track span{font-family:var(--serif,'Playfair Display',Georgia,serif);font-size:clamp(22px,3vw,34px);color:var(--bone);white-space:nowrap;display:inline-flex;align-items:center;gap:56px}
.ticker__track span::after{content:"";width:8px;height:8px;background:var(--gold);transform:rotate(45deg)}
.ticker__track span:nth-child(even){color:transparent;-webkit-text-stroke:1px rgba(234,209,154,.75)}
html:not([data-motion="off"]) .ticker__track{animation:ur-tick 60s linear infinite}
html:not([data-motion="off"]) .ticker:hover .ticker__track{animation-play-state:paused}
@keyframes ur-tick{to{transform:translate3d(-50%,0,0)}}

/* 3. Scroll-driven motion (runs off the main thread where supported; phones and tablets included) */
@supports (animation-timeline: view()){
  @keyframes ur-sd-rise{from{transform:translate3d(0,56px,0)}to{opacity:1;transform:none}}
  @keyframes ur-sd-card{from{transform:translate3d(0,70px,0) scale(.92)}to{transform:none}}
  @keyframes ur-sd-plx{from{transform:translate3d(0,-3%,0) scale(1.07)}to{transform:translate3d(0,3%,0) scale(1.07)}}
  @keyframes ur-sd-wide{from{clip-path:inset(0 7% 0 7% round 6px)}to{clip-path:inset(0 0 0 0 round 0)}}
  @keyframes ur-sd-p{from{--p:0}to{--p:1}}
  html:not([data-motion="off"]) :is(.section-head,.prose>h2,.article h2,.ctaband h2){animation:ur-sd-rise linear backwards;animation-timeline:view();animation-range:entry 0% entry 75%}
  @keyframes ur-sd-lift{from{transform:translate3d(0,48px,0)}to{transform:none}}
  html:not([data-motion="off"]) :is(.pcard,.acard){animation:ur-sd-card linear backwards;animation-timeline:view();animation-range:entry 0% entry 85%}
  html:not([data-motion="off"]) :is(.pcard__media,.acard__media,.path__media,.story__visual,.ctaband__media)>picture{display:block;height:100%;animation:ur-sd-plx linear both;animation-timeline:view();animation-range:cover}
  html:not([data-motion="off"]) :is(.story__visual,.stage,.gallery__main,.ctaband){animation:ur-sd-wide linear backwards;animation-timeline:view();animation-range:entry 0% cover 35%}
  html[data-motion="lite"] .stage.stage{animation:ur-sd-wide linear backwards,ur-sd-p linear both;animation-timeline:view(),view();animation-range:entry 0% cover 35%,cover}
  html[data-motion="lite"] .tower{--rise:1}
}

/* 4. Full tier (desktop, fine pointer): pointer spotlight on cards */
html[data-motion="full"] :is(.pcard,.acard,.path,.lcard){--mx:50%;--my:50%}
html[data-motion="full"] :is(.acard__media,.path__media,.lcard)::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(234,209,154,.18),transparent 60%);opacity:0;transition:opacity .4s}
html[data-motion="full"] :is(.acard:hover .acard__media,.path:hover .path__media,.lcard:hover)::after{opacity:1}
html[data-motion="full"] .lcard{position:relative}

/* 5. Cross-page transitions (Chromium); other browsers simply navigate */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:.28s ease both ur-vt-out}
  ::view-transition-new(root){animation:.45s cubic-bezier(.2,.7,.1,1) both ur-vt-in}
}
@keyframes ur-vt-out{to{opacity:0;transform:translateY(-14px)}}
@keyframes ur-vt-in{from{opacity:0;transform:translateY(22px)}}
html[data-motion="off"] *{animation:none!important}
/* Caption on placeholder (illustrative) photography */
.illus-tag{position:absolute;right:10px;bottom:10px;z-index:2;padding:4px 9px;font:500 10.5px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#f3ead7;background:rgba(8,9,11,.72);border:1px solid rgba(234,209,154,.3);pointer-events:none}
.illus-tag--hero{top:96px;bottom:auto;right:var(--gut,16px)}
.acard .illus-tag{top:10px;bottom:auto}
@media (max-width:760px){.illus-tag--hero{top:36px}}
/* LCP-safe: the hero intro text (often the LCP element) slides but never starts transparent */
@keyframes ur-slide{from{transform:translate3d(0,28px,0)}to{transform:none}}
html:not([data-motion="off"]) :is(.hero__in,.phero__in)>:is(.hero__lead,.phero__lead){animation-name:ur-slide;animation-delay:.1s}

/* ================= Interactive 3D city ================= */
.d3{position:relative;padding-top:clamp(56px,8vw,110px);background:linear-gradient(180deg,var(--ink-0,#08090b),#08090b)}
.d3__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.d3__hint{max-width:46ch;color:var(--stone);font-size:15px;line-height:1.6;margin:0}
.d3__hint .muted{display:block;font-size:13px;color:var(--muted)}
.d3__stage{position:relative;height:min(80vh,780px);min-height:440px;margin-top:32px;overflow:hidden;border-block:1px solid var(--line);background:#08090b;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.d3.is-dragging .d3__stage{cursor:grabbing}
.d3--compact{padding-top:clamp(40px,6vw,80px)}
.d3--compact .d3__stage{height:min(62vh,580px);min-height:380px}
.d3__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .9s ease}
.d3--ready .d3__poster{opacity:0;pointer-events:none}
.d3__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.d3__labels{position:absolute;inset:0;pointer-events:none}
.d3__label{position:absolute;left:0;top:0;pointer-events:auto;padding:7px 11px;font:500 12px/1 var(--body);letter-spacing:.06em;color:var(--bone);background:rgba(8,9,11,.74);border:1px solid rgba(234,209,154,.38);text-decoration:none;white-space:nowrap;transition:background .25s,color .25s,border-color .25s,opacity .25s;will-change:transform}
.d3__label::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:16px;background:linear-gradient(rgba(234,209,154,.7),transparent)}
.d3__label.is-hot,.d3__label.is-focus,.d3__label:hover,.d3__label:focus-visible{background:var(--gold);color:#1a1408;border-color:var(--gold);z-index:2}
.d3__label.is-out{visibility:hidden}
.d3:not(.d3--ready) .d3__labels{display:flex;flex-wrap:wrap;align-content:flex-end;gap:8px;padding:18px var(--gut,16px)}
.d3:not(.d3--ready) .d3__label{position:static;transform:none!important}
.d3:not(.d3--ready) .d3__label::after{display:none}
@media (max-width:760px){.d3__stage{height:72vh;min-height:420px}.d3__label{font-size:11px;padding:6px 8px}.d3--ready .d3__label:not(.is-hot):not(.is-focus){opacity:.85}}
.d3__stage{background:radial-gradient(90% 70% at 50% 42%,rgba(214,180,106,.13),transparent 62%),radial-gradient(120% 90% at 50% 100%,#0c1016,#08090b 70%)}

/* ================= Advanced motion layer ================= */
/* Word-by-word headline reveal */
.h2.words .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.h2.words .w>span{display:inline-block;transform:translate3d(0,105%,0) rotate(4deg);transform-origin:0 100%;transition:transform 1s cubic-bezier(.2,.75,.1,1) calc(var(--i) * 55ms)}
.h2.words.words-in .w>span{transform:none}
/* Gold curtain wipes off photos as they enter (scroll-driven) */
@supports (animation-timeline: view()){
  @keyframes ur-curtain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
  html:not([data-motion="off"]) :is(.pcard__media,.path__media,.story__visual)::after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(90deg,#b8954d,#d6b46a 60%,#ead19a);transform-origin:right;pointer-events:none;animation:ur-curtain linear both;animation-timeline:view();animation-range:entry 5% entry 70%}
}
/* Custom cursor (full tier, fine pointer) */
.cursor{display:none}
html[data-motion="full"] .cursor{display:block;position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:0;transition:opacity .3s}
html[data-motion="full"] .cursor.on{opacity:1}
.cursor i,.cursor b{position:absolute;left:0;top:0;border-radius:50%;will-change:transform}
.cursor i{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--gold)}
.cursor b{width:36px;height:36px;margin:-18px 0 0 -18px;border:1px solid rgba(214,180,106,.6);transition:width .3s,height .3s,margin .3s,background .3s,border-color .3s}
.cursor.big b{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(214,180,106,.12);border-color:rgba(214,180,106,.9)}
.cursor.drag b::after{content:"DRAG";position:absolute;inset:0;display:grid;place-items:center;font:600 10px/1 var(--body);letter-spacing:.2em;color:var(--gold)}
html[data-motion="full"] .btn--gold{transition:background .3s,color .3s,border-color .3s,transform .5s cubic-bezier(.2,.8,.2,1)}
/* Reduced motion: no movement; photos (never text) still fade in gently so pages feel alive */
@media (prefers-reduced-motion: reduce){
  @supports (animation-timeline: view()){
    @keyframes ur-fade{from{opacity:.0}to{opacity:1}}
    html:not([data-motion-forced]) :is(.pcard__media,.acard__media,.path__media,.story__visual,.ctaband__media) img{animation:ur-fade linear both!important;animation-timeline:view()!important;animation-range:entry 0% entry 55%!important}
  }
}

/* ================= Floating WhatsApp button ================= */
.wa-float{position:fixed;right:24px;bottom:24px;z-index:60;display:flex;align-items:center;gap:0;height:60px;min-width:60px;padding:0 17px;border-radius:30px;background:#1fa855;color:#fff;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08) inset;transition:gap .35s,padding .35s,background .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.wa-float svg{width:26px;height:26px;flex:none}
.wa-float__label{max-width:0;overflow:hidden;white-space:nowrap;font:500 14.5px/1 var(--body);letter-spacing:.02em;transition:max-width .4s cubic-bezier(.2,.8,.2,1)}
.wa-float:hover,.wa-float:focus-visible{gap:10px;padding-right:22px;background:#178a45}
.wa-float:hover .wa-float__label,.wa-float:focus-visible .wa-float__label{max-width:180px}
.wa-float:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wa-float__pulse{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
@keyframes wa-in{from{transform:translateY(90px) scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes wa-pulse{0%{box-shadow:0 0 0 0 rgba(31,168,85,.55)}70%,100%{box-shadow:0 0 0 18px rgba(31,168,85,0)}}
html:not([data-motion="off"]) .wa-float{animation:wa-in .7s cubic-bezier(.2,.8,.2,1) 1.2s both}
html:not([data-motion="off"]) .wa-float__pulse{animation:wa-pulse 2.6s ease-out 2.2s infinite}
@media (max-width:860px){.wa-float{right:14px;bottom:calc(76px + env(safe-area-inset-bottom,0px));height:54px;min-width:54px;padding:0 14px}.wa-float svg{width:24px;height:24px}}
.ty-page .wa-float{display:none}

/* ================= Thank-you page ================= */
.ty{position:relative;overflow:hidden;min-height:calc(100vh - 80px);display:grid;place-items:center;padding-block:clamp(48px,8vw,110px);isolation:isolate}
.ty__glow{position:absolute;left:50%;top:22%;width:min(900px,120vw);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(214,180,106,.22),rgba(214,180,106,.06) 55%,transparent);z-index:-1}
.ty__in{text-align:center;max-width:880px}
.ty__check{width:clamp(96px,14vw,128px);height:auto;margin:0 auto 26px;display:block;overflow:visible}
.ty__ring{fill:none;stroke:var(--gold);stroke-width:3;stroke-dasharray:330;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:center}
.ty__tick{fill:none;stroke:var(--gold-2,#ead19a);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:80;stroke-dashoffset:0}
.ty__h{margin:6px 0 18px}
.ty__lead{margin:0 auto;max-width:60ch}
.ty__steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left}
.ty__steps li{padding:24px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.ty__steps .num{color:var(--gold);font-size:13px;letter-spacing:.2em}
.ty__steps h2{font:600 20px/1.25 var(--display,'Playfair Display',serif);margin:10px 0 8px;color:var(--bone)}
.ty__steps p{margin:0;color:var(--stone);font-size:15px;line-height:1.55}
.ty__btns{justify-content:center;margin-top:36px}
.ty__more{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.ty__more .eyebrow{width:100%;margin:0 0 4px}
.ty__more a{color:var(--bone);text-decoration:underline;text-decoration-color:rgba(214,180,106,.5);text-underline-offset:4px}
.ty__burst{position:absolute;left:50%;top:clamp(110px,15vw,170px);width:0;height:0;z-index:-1}
.ty__burst i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;background:var(--gold);transform:rotate(var(--a)) translateX(0) rotate(45deg);opacity:0}
@media (max-width:760px){.ty__steps{grid-template-columns:1fr}}
/* Animation sequence: ring draws, tick draws, burst, then text and steps rise in */
@keyframes ty-draw-ring{from{stroke-dashoffset:330}to{stroke-dashoffset:0}}
@keyframes ty-draw-tick{from{stroke-dashoffset:80}to{stroke-dashoffset:0}}
@keyframes ty-pop{0%{transform:scale(.7)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes ty-burst{0%{opacity:1;transform:rotate(var(--a)) translateX(0) rotate(45deg) scale(1)}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) rotate(45deg) scale(.4)}}
@keyframes ty-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes ty-glow{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
/* Drawing the tick is not movement across the screen, so it also plays for reduced-motion visitors */
html .ty .ty__ring{animation:ty-draw-ring 1s cubic-bezier(.6,0,.2,1) .2s both!important}
html .ty .ty__tick{animation:ty-draw-tick .55s cubic-bezier(.6,0,.2,1) 1.05s both!important}
html .ty :is(.ty__eyebrow,.ty__lead,.ty__steps li,.ty__btns,.ty__more){animation:ty-fade .7s ease both!important}
@keyframes ty-fade{from{opacity:0}to{opacity:1}}
html .ty .ty__eyebrow{animation-delay:1.3s!important}html .ty .ty__lead{animation-delay:1.6s!important}
html .ty .ty__steps li:nth-child(1){animation-delay:1.8s!important}html .ty .ty__steps li:nth-child(2){animation-delay:1.95s!important}html .ty .ty__steps li:nth-child(3){animation-delay:2.1s!important}
html .ty .ty__btns{animation-delay:2.3s!important}html .ty .ty__more{animation-delay:2.5s!important}
html:not([data-motion="off"]) .ty .ty__check{animation:ty-pop .6s cubic-bezier(.2,.8,.2,1) 1.05s both}
html:not([data-motion="off"]) .ty .ty__burst i{animation:ty-burst 1s cubic-bezier(.1,.7,.2,1) calc(1.15s + var(--t)) both}
html:not([data-motion="off"]) .ty .ty__glow{animation:ty-glow 5s ease-in-out 1.2s infinite}
html:not([data-motion="off"]) .ty :is(.ty__steps li,.ty__btns){animation-name:ty-rise!important}
html:not([data-motion="off"]) .ty .ty__h .mask>span{animation-delay:1.25s}

/* ================= Hero: cinematic layer ================= */
.hero__sweep{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero__sweep::before{content:"";position:absolute;top:-20%;bottom:-20%;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(234,209,154,.16) 45%,rgba(255,240,200,.22) 50%,rgba(234,209,154,.16) 55%,transparent);transform:translateX(-60%) skewX(-12deg);opacity:0}
.hero__dust{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero__dust i{position:absolute;left:var(--x);bottom:-10px;width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle,#f3dfa8,rgba(214,180,106,0) 70%);opacity:0}
.hero__roll{display:inline-block;height:1.3em;overflow:hidden;vertical-align:bottom;margin-left:.6em;padding-left:.6em;border-left:1px solid rgba(234,209,154,.5);color:var(--bone)}
.hero__roll>span{display:flex;flex-direction:column}
.hero__roll>span>span{height:1.3em;line-height:1.3em}
.hero__roll>span>span:last-child{display:none}
.hero h1 .mask+.mask>span{background:linear-gradient(100deg,var(--bone) 0%,var(--bone) 35%,#f0d48f 48%,#fff5dc 52%,var(--bone) 65%,var(--bone) 100%);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__facts{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 40px}
.hero__facts li{display:flex;align-items:baseline;gap:10px;color:var(--stone);font-size:14px;letter-spacing:.02em}
.hero__facts b{font:600 clamp(26px,3vw,36px)/1 var(--display);color:var(--gold-2,#ead19a);font-variant-numeric:tabular-nums;min-width:1.4em}
@media (max-width:760px){.hero__facts{gap:10px 24px}.hero__facts li{font-size:12.5px}.hero__roll{display:block;margin:6px 0 0;padding:0;border:0}}
@keyframes hero-sweep{0%{transform:translateX(-60%) skewX(-12deg);opacity:0}8%{opacity:1}35%{transform:translateX(560%) skewX(-12deg);opacity:0}100%{transform:translateX(560%) skewX(-12deg);opacity:0}}
@keyframes hero-dust{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:.9}80%{opacity:.6}100%{transform:translate3d(var(--w),-105vh,0);opacity:0}}
@keyframes hero-roll{0%,18%{transform:translateY(0)}25%,43%{transform:translateY(-1.3em)}50%,68%{transform:translateY(-2.6em)}75%,93%{transform:translateY(-3.9em)}100%{transform:translateY(-5.2em)}}
@keyframes hero-shine{0%,30%{background-position:100% 0}60%,100%{background-position:0 0}}
@keyframes hero-kb{from{transform:scale(1)}to{transform:scale(1.05) translate3d(-1%,-.8%,0)}}
html:not([data-motion="off"]) .hero__sweep::before{animation:hero-sweep 9s cubic-bezier(.4,0,.2,1) 2.2s infinite}
html:not([data-motion="off"]) .hero__dust i{animation:hero-dust var(--d) linear var(--t) infinite}
html:not([data-motion="off"]) .hero__roll>span>span:last-child{display:block}
html:not([data-motion="off"]) .hero__roll>span{animation:hero-roll 10s cubic-bezier(.7,0,.2,1) 1.5s infinite}
html:not([data-motion="off"]) .hero h1 .mask+.mask>span{animation:rise 1.25s var(--ease) .3s both,hero-shine 4.5s ease-in-out 1.8s 2}
html:not([data-motion="off"]) .hero__media{animation:hero-kb 26s ease-in-out 3s infinite alternate}
html[data-motion="full"] .hero__media img{translate:var(--hx,0) var(--hy,0)}
html[data-motion="full"] .hero__dust{translate:calc(var(--hx,0) * -1.6) calc(var(--hy,0) * -1.6)}
@media (max-width:760px){html:not([data-motion="off"]) .hero__dust i:nth-child(n+14){display:none}}

/* ================= Area cards: rich hover ================= */
.grid--areas{perspective:1400px}
.acard{transition:transform .6s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .6s}
.acard::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(214,180,106,.26),rgba(214,180,106,.05) 45%,transparent 70%);opacity:0;transition:opacity .5s}
.acard__media img{transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .6s}
.acard__frame{position:absolute;inset:12px;z-index:2;pointer-events:none;background:linear-gradient(var(--gold),var(--gold)) left top/0 1px no-repeat,linear-gradient(var(--gold),var(--gold)) right top/1px 0 no-repeat,linear-gradient(var(--gold),var(--gold)) right bottom/0 1px no-repeat,linear-gradient(var(--gold),var(--gold)) left bottom/1px 0 no-repeat;transition:background-size .7s cubic-bezier(.6,0,.2,1)}
.acard__body{z-index:3;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.acard__name{transition:color .4s}
.acard__go{display:inline-flex;align-items:center;gap:10px;max-height:0;opacity:0;overflow:hidden;color:var(--gold-2,#ead19a);font-size:13px;letter-spacing:.14em;text-transform:uppercase;transition:max-height .5s,opacity .4s .05s,margin .5s}
.acard__go svg{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.acard:hover,.acard:focus-visible{border-color:var(--gold);box-shadow:0 34px 70px -24px rgba(0,0,0,.85),0 0 40px -10px rgba(214,180,106,.35)}
.acard:hover::before,.acard:focus-visible::before{opacity:1}
.acard:hover .acard__media img,.acard:focus-visible .acard__media img{transform:scale(1.12);filter:brightness(1.08) saturate(1.15)}
.acard:hover .acard__frame,.acard:focus-visible .acard__frame{background-size:100% 1px,1px 100%,100% 1px,1px 100%}
.acard:hover .acard__body,.acard:focus-visible .acard__body{transform:translateY(-6px)}
.acard:hover .acard__name,.acard:focus-visible .acard__name{color:#fff6e0}
.acard:hover .acard__go,.acard:focus-visible .acard__go{max-height:24px;opacity:1;margin-top:8px}
.acard:hover .acard__go svg{transform:translateX(6px)}
html[data-motion="full"] .acard[data-tilt]:hover{transform:translateY(-8px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg))}
/* Smaller, quieter "illustrative" note on cards (still visible, as the photos are not of the named place) */
.acard .illus-tag{top:10px;right:10px;bottom:auto;padding:3px 7px;font-size:9.5px;letter-spacing:.14em;background:rgba(8,9,11,.5);border-color:transparent;opacity:.8;transition:opacity .4s}
.acard:hover .illus-tag{opacity:.35}
/* Reduced motion: keep hover feedback as colour/light changes (no movement) */
@media (prefers-reduced-motion: reduce){html:not([data-motion-forced]) .acard :is(*,::before),html:not([data-motion-forced]) .acard::before{transition-property:opacity,background-size,color,filter,box-shadow!important;transition-duration:.45s!important}html:not([data-motion-forced]) .acard{transition-property:border-color,box-shadow!important;transition-duration:.45s!important}html:not([data-motion-forced]) .acard:hover .acard__media img{transform:none}html:not([data-motion-forced]) .acard:hover .acard__body{transform:none}}

/* ================= Off-plan tower (WebGL) ================= */
.tw{display:flex;flex-direction:column;border:1px solid var(--line);background:radial-gradient(70% 60% at 50% 60%,rgba(214,180,106,.12),transparent 70%),var(--ink-1)}
.tw__stage{position:relative;aspect-ratio:1/1;max-height:640px;overflow:hidden;touch-action:pan-y;cursor:grab}
.tw__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .8s}
.tw--ready .tw__poster{opacity:0}
.tw__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.tw__ui{padding:18px 20px 20px;border-top:1px solid var(--line)}
.tw__phases{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;counter-reset:ph}
.tw__phases li{position:relative;padding-top:12px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .4s}
.tw__phases li::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--line-2,rgba(255,255,255,.12))}
.tw__phases li::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--gold);transition:width .5s}
.tw__phases li.is-past::after,.tw__phases li.is-on::after{width:100%}
.tw__phases li.is-on,.tw__phases li.is-past{color:var(--gold-2,#ead19a)}
.tw__range{display:block}
.tw__range>span{display:flex;justify-content:space-between;font-size:13px;color:var(--stone);margin-bottom:8px}
.tw__range b{color:var(--gold-2,#ead19a);font-variant-numeric:tabular-nums}
.tw__range input{width:100%;accent-color:var(--gold);height:28px;cursor:pointer}
.tw__note{margin:10px 0 0;font-size:13px;line-height:1.55;color:var(--muted)}
@media (max-width:860px){.tw__phases li{font-size:10px;letter-spacing:.08em}}

/* ================= Hero: layered cinematic depth (desktop/tablet), lighter on phones ================= */
.hero__fg,.hero__flare,.hero__bars{display:none}
@media (min-width:761px){
  .hero__fg{display:block;position:absolute;inset:0;z-index:-2;pointer-events:none;-webkit-mask-image:linear-gradient(to top,#000 0%,#000 30%,transparent 58%);mask-image:linear-gradient(to top,#000 0%,#000 30%,transparent 58%)}
  .hero__fg picture,.hero__fg img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
  .hero__fg img{transform:scale(1.06)}
  .hero__flare{display:block;position:absolute;z-index:-1;top:-20%;right:-10%;width:70vw;height:90vh;pointer-events:none;background:radial-gradient(closest-side,rgba(255,214,150,.22),rgba(255,190,110,.06) 55%,transparent);opacity:.7}
}
@keyframes hero-fg{0%{transform:scale(1.02) translate3d(1.4%,.5%,0)}100%{transform:scale(1.05) translate3d(-1.4%,-.4%,0)}}
@keyframes hero-bg-pan{0%{transform:scale(1.02) translate3d(-1%,0,0)}100%{transform:scale(1.07) translate3d(1.2%,-.6%,0)}}
@keyframes hero-flare{0%{transform:translate3d(0,0,0) scale(1);opacity:.55}50%{opacity:.95}100%{transform:translate3d(-14vw,8vh,0) scale(1.15);opacity:.6}}
@keyframes hero-bars{from{transform:scaleY(1)}to{transform:scaleY(0)}}
@keyframes hero-focus{from{filter:blur(10px) brightness(.7)}to{filter:none}}
html:not([data-motion="off"]) .hero__media{animation:hero-bg-pan 28s ease-in-out 1.6s infinite alternate}
html:not([data-motion="off"]) .hero__fg{animation:hero-fg 22s ease-in-out 1.6s infinite alternate;will-change:transform}
html:not([data-motion="off"]) .hero__flare{animation:hero-flare 18s ease-in-out infinite alternate}
html[data-motion="full"] .hero__fg{translate:calc(var(--hx,0) * 2.4) calc(var(--hy,0) * 1.6)}
.hero__fg img{transform:none}
@media (min-width:761px){
  html:not([data-motion="off"]) .hero__bars{display:block;position:absolute;inset:0;z-index:2;pointer-events:none}
  html:not([data-motion="off"]) .hero__bars::before,html:not([data-motion="off"]) .hero__bars::after{content:"";position:absolute;left:0;right:0;height:13vh;background:#08090b;animation:hero-bars 1.5s cubic-bezier(.7,0,.2,1) .15s both}
  html:not([data-motion="off"]) .hero__bars::before{top:0;transform-origin:top}
  html:not([data-motion="off"]) .hero__bars::after{bottom:0;transform-origin:bottom}
}

/* ================= Property cards: premium hover ================= */
.pcard{transition:border-color .45s,transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s}
.pcard__media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(8,9,11,.82),rgba(8,9,11,.15) 55%,transparent);opacity:0;transition:opacity .5s}
.pcard__media img{transition:transform 1.4s cubic-bezier(.2,.8,.2,1),filter .6s}
.pcard__cta{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(8,9,11,.6);border:1px solid rgba(234,209,154,.55);color:var(--gold-2,#ead19a);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;opacity:0;transform:translateY(16px);transition:opacity .4s,transform .55s cubic-bezier(.2,.8,.2,1),background .3s}
.pcard__cta svg{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.pcard__frame{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(var(--gold),var(--gold)) left top/0 1px no-repeat,linear-gradient(var(--gold),var(--gold)) right top/1px 0 no-repeat,linear-gradient(var(--gold),var(--gold)) right bottom/0 1px no-repeat,linear-gradient(var(--gold),var(--gold)) left bottom/1px 0 no-repeat;transition:background-size .8s cubic-bezier(.6,0,.2,1)}
.pcard__price{transition:color .4s,letter-spacing .5s,transform .5s cubic-bezier(.2,.8,.2,1);transform-origin:left bottom}
.pcard__title a{transition:color .35s}
.pcard .badge{transition:transform .5s cubic-bezier(.2,.8,.2,1),background .3s}
.pcard:hover,.pcard:focus-within{border-color:rgba(214,180,106,.5);transform:translateY(-10px);box-shadow:0 40px 70px -30px rgba(0,0,0,.9),0 0 46px -14px rgba(214,180,106,.35)}
.pcard:hover .pcard__media img,.pcard:focus-within .pcard__media img{transform:scale(1.1) translate3d(-1.5%,-1%,0);filter:brightness(1.06) saturate(1.12)}
.pcard:hover .pcard__media::before,.pcard:focus-within .pcard__media::before{opacity:1}
.pcard:hover .pcard__cta,.pcard:focus-within .pcard__cta{opacity:1;transform:none}
.pcard:hover .pcard__cta svg{transform:translateX(5px)}
.pcard:hover .pcard__frame,.pcard:focus-within .pcard__frame{background-size:100% 1px,1px 100%,100% 1px,1px 100%}
.pcard:hover .pcard__price,.pcard:focus-within .pcard__price{color:#f6e2b0;transform:scale(1.06)}
.pcard:hover .pcard__title a{color:#fff6e0}
.pcard:hover .badge{transform:translateY(-2px);background:var(--gold);color:#1a1408}
html[data-motion="full"] .pcard[data-tilt]:hover{transform:translateY(-10px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg))}
.rail,.grid--cards{perspective:1600px}
@media (hover:none){.pcard__cta{opacity:1;transform:none;background:rgba(8,9,11,.5);padding:9px 12px;font-size:11px}.pcard__media::before{opacity:.6}}

/* ================= Buttons & links: micro-interactions ================= */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn--gold::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg) translateX(0);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.btn--gold:hover::after{transform:skewX(-18deg) translateX(420%)}
.btn--ghost::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(214,180,106,.12);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.btn--ghost:hover::before{transform:scaleX(1)}
.btn:active{transform:scale(.97)}

/* ================= Section craft: eyebrow rules, guide cards, CTA band, story ================= */
.section-head .eyebrow,.d3__head .eyebrow,.depth__copy>.eyebrow{display:flex;align-items:center;gap:14px}
.section-head .eyebrow::before,.d3__head .eyebrow::before,.depth__copy>.eyebrow::before{content:"";width:40px;height:1px;background:currentColor;transform-origin:left;flex:none}
.lcard{position:relative;overflow:hidden}
.lcard::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:linear-gradient(90deg,var(--gold),#f3dfa8);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.lcard:hover::before{transform:scaleX(1)}
.story__shot{clip-path:inset(0 0 0 100%);transition:opacity .7s var(--ease),clip-path 1.1s cubic-bezier(.7,0,.2,1)}
.story__shot.is-on{clip-path:inset(0)}
.story__shot img{transition:transform 6s ease-out}.story__shot.is-on img{transform:scale(1.06)}
@supports (animation-timeline: view()){
  @keyframes ur-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes ur-band{from{transform:scale(1.12)}to{transform:scale(1)}}
  @keyframes ur-band-in{from{transform:translate3d(-40px,0,0)}to{transform:none}}
  html:not([data-motion="off"]) .ctaband__media{animation:ur-band linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  html:not([data-motion="off"]) .ctaband__in>*{animation:ur-band-in linear both;animation-timeline:view();animation-range:entry 15% entry 70%}
}
@media (max-width:760px){html[data-motion] .pcard:hover{transform:translateY(-4px)}}
.pcard__note{z-index:2;transition:opacity .3s}
.pcard:hover .pcard__note,.pcard:focus-within .pcard__note{opacity:0}
@media (hover:none){.pcard__note{top:10px;bottom:auto}}

/* Inner page heroes: same cinematic treatment, lighter */
@keyframes phero-pan{0%{transform:scale(1.03) translate3d(-.8%,0,0)}100%{transform:scale(1.08) translate3d(.8%,-.5%,0)}}
html:not([data-motion="off"]) .phero--media .phero__media img{animation:phero-pan 26s ease-in-out 2.8s infinite alternate}
html:not([data-motion="off"]) .phero--media .phero__in .h1 .mask>span{animation-duration:1.4s}
/* Footer: gold hairline draws across as it enters */
footer{position:relative}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);transform-origin:center}
.link-arrow{min-height:28px}
/* "In short" box: entity, audience, review date and sources at a glance */
.answer__meta{display:flex;flex-wrap:wrap;gap:6px 18px;padding-top:12px;border-top:1px solid var(--paper-line,rgba(0,0,0,.1))}
.answer__meta b{font-weight:600;color:#6d5220;letter-spacing:.08em;text-transform:uppercase;font-size:11px;margin-right:6px}

/* ================= Maintenance request ================= */
.mr{padding-block:clamp(40px,6vw,80px)}
.mr__grid{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:start}
@media (max-width:900px){.mr__grid{grid-template-columns:1fr;gap:28px}}
.mr__side{position:sticky;top:110px;display:grid;gap:20px}
@media (max-width:900px){.mr__side{position:static}}
.mr__sos{padding:18px 20px;border:1px solid #c9583f;background:#fff4f1;color:#5a1f12;font-size:14.5px;line-height:1.6}
.mr__sos .eyebrow{color:#a8402a!important;margin-bottom:6px}
.mr__how{list-style:none;margin:0;padding:0;counter-reset:mr}
.mr__how li{counter-increment:mr;position:relative;padding:0 0 18px 44px;border-left:1px solid var(--paper-line);margin-left:15px}
.mr__how li::before{content:counter(mr);position:absolute;left:-16px;top:-2px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--paper);border:1px solid #8a6a2a;color:#6d5220;font-size:13px}
.mr__how b{display:block;color:var(--paper-ink)}.mr__how span{color:var(--paper-muted);font-size:14px}
.mr__form{background:#fff;border:1px solid var(--paper-line);padding:clamp(20px,3vw,36px);display:grid;gap:22px}
.mr__set{border:0;margin:0;padding:0 0 22px;border-bottom:1px solid var(--paper-line);display:grid;gap:14px}
.mr__set legend{display:flex;align-items:center;gap:10px;font:600 20px/1.2 var(--display);color:var(--paper-ink);margin-bottom:14px;padding:0}
.mr__set legend .num{font:500 12px/1 var(--body);letter-spacing:.16em;color:#8a6a2a}
.mr__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.mr__row{grid-template-columns:1fr}}
.mr .field{display:grid;gap:6px;font-size:14px;color:var(--paper-ink)}
.mr .field input,.mr .field select,.mr .field textarea{font:inherit;font-size:16px;padding:12px 14px;border:1px solid rgba(23,24,27,.25);background:#fff;color:var(--paper-ink);border-radius:2px;min-height:48px}
.mr .field input:focus,.mr .field select:focus,.mr .field textarea:focus{outline:2px solid #8a6a2a;outline-offset:1px;border-color:#8a6a2a}
.mr .field [aria-invalid="true"]{border-color:#b3261e}
.mr__urg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:640px){.mr__urg{grid-template-columns:1fr}}
.mr__urg label{position:relative;cursor:pointer}
.mr__urg input{position:absolute;opacity:0;inset:0}
.mr__urg span{display:block;height:100%;padding:14px 16px;border:1px solid rgba(23,24,27,.2);font-size:13.5px;line-height:1.45;color:var(--paper-muted);transition:border-color .25s,background .25s,box-shadow .25s}
.mr__urg b{display:block;font-size:15px;color:var(--paper-ink);margin-bottom:4px}
.mr__urg input:checked+span{border-color:#8a6a2a;background:#fbf6ea;box-shadow:inset 0 0 0 1px #8a6a2a}
.mr__urg input[value="Emergency"]:checked+span{border-color:#b3261e;background:#fff4f1;box-shadow:inset 0 0 0 1px #b3261e}
.mr__urg input:focus-visible+span{outline:2px solid #8a6a2a;outline-offset:2px}
.mr__thumbs{display:flex;gap:10px;flex-wrap:wrap}
.mr__thumbs img{width:88px;height:88px;object-fit:cover;border:1px solid var(--paper-line)}
.mr .check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--paper-ink)}
.mr .check input{width:20px;height:20px;margin-top:2px;accent-color:#8a6a2a}
.mr__go{justify-self:start}
.mr__done{grid-column:2;background:#fff;border:1px solid var(--paper-line);padding:clamp(28px,4vw,48px);text-align:center;color:var(--paper-ink)}
.mr__done .ty__check{width:96px;margin:0 auto 18px;display:block}
.mr__done .lead{color:var(--paper-muted);max-width:52ch;margin:12px auto 0}
.mr__done .btns{justify-content:center;margin-top:26px}
@media (max-width:900px){.mr__done{grid-column:1}}
.mr__done:not([hidden]) .ty__ring{animation:ty-draw-ring 1s cubic-bezier(.6,0,.2,1) .1s both!important}
.mr__done:not([hidden]) .ty__tick{animation:ty-draw-tick .55s cubic-bezier(.6,0,.2,1) .9s both!important}
.mr .mr__form{grid-template-columns:1fr!important}
.mr [hidden]{display:none!important}
.mr .mr__set{grid-column:1/-1}
.tenant-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-block:32px;padding:20px 24px;border:1px solid var(--line);background:rgba(214,180,106,.06)}
.tenant-strip p{margin:0;color:var(--stone)}.tenant-strip b{color:var(--bone)}
.ty__dl{margin-top:30px;padding:22px;border:1px solid rgba(214,180,106,.4);display:inline-flex;flex-direction:column;align-items:center;gap:10px}
.ty .ty__dl{animation:ty-fade .7s ease 1.7s both!important}

/* ================= Print (also used to produce the downloadable landlord guide PDF) ================= */
@media print{
  .hdr,.mbar,.wa-float,.cursor,.ftr,.enquire,.ctaband,.related,.article__side,.chips,.d3,.tenant-strip,.hero__scroll,.phero__media,.illus-tag,.illus-tag--hero,.crumbs,nav[aria-label="Breadcrumb"],.side-cta,.pm-siblings,.skip{display:none!important}
  html,body,main,section,.paper{background:#fff!important;color:#17181b!important}
  :root{--ink:#fff;--ink-1:#fff;--ink-2:#fff;color-scheme:light!important}
  *{animation:none!important;transition:none!important;box-shadow:none!important}
  .phero{background:#fff!important;color:#17181b!important;padding:0 0 14px!important;min-height:0!important;border:0!important}
  .phero::before{display:none!important}
  .phero .h1,.phero .h1 span,.phero .eyebrow,.phero__lead{color:#17181b!important;background:none!important;-webkit-text-fill-color:#17181b}
  .phero .eyebrow{color:#76591f!important}
  .paper,.article{background:#fff!important;padding-top:0!important}
  .article__grid{display:block!important}
  .answer{break-inside:avoid;border-left:3px solid #8a6a2a}
  .prose h2{break-after:avoid;margin-top:22px}
  .facts,.faq details,table{break-inside:avoid}
  .faq details{display:block}.faq details>*{display:block}
  a{color:#17181b!important}
  .wrap{max-width:none!important;padding-inline:0!important}
}

/* Maintenance form v2 + confirmation card */
.mr__times{margin:0;padding:16px 18px;border:1px solid var(--paper-line);background:#fff;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:13.5px}
.mr__times dt{font-weight:600;color:#6d5220}.mr__times dd{margin:0;color:var(--paper-muted)}
.mr__emerg{margin:0;padding:12px 14px;border-left:3px solid #b3261e;background:#fff4f1;color:#5a1f12;font-size:14px}
.mr__vid{display:inline-flex;align-items:center;padding:0 12px;height:88px;border:1px solid var(--paper-line);font-size:13px;color:var(--paper-ink);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrd .ty__in{max-width:640px}
.mrd__h{font-size:clamp(40px,6vw,72px)}
.mrd__card{margin:26px auto 0;max-width:520px;text-align:left;background:#fbf8f1;color:#17181b;border:1px solid #d9c9a3;border-top:4px solid var(--gold);padding:24px 26px 20px;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.mrd__brand{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid #e6dcc5}
.mrd__brand img{width:36px;height:36px;object-fit:contain;background:#08090b;padding:4px}
.mrd__brand b{display:block;font:600 15px/1.2 var(--display);letter-spacing:.06em}.mrd__brand small{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#76591f}
.mrd__title{margin:16px 0 4px;font:600 22px/1.2 var(--display);color:#17181b}
.mrd__ref{margin:10px 0 14px;padding:12px 14px;background:#17181b;color:#f6e2b0;display:flex;flex-direction:column;gap:2px}
.mrd__ref small{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#c9b98f}
.mrd__ref b{font:600 clamp(22px,4.6vw,28px)/1.1 var(--body);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.mrd__rows{margin:0;display:grid;gap:0}
.mrd__rows>div{display:grid;grid-template-columns:130px 1fr;gap:10px;padding:8px 0;border-bottom:1px dashed #e0d4b8;font-size:15px}
.mrd__rows dt{color:#76591f;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding-top:2px}.mrd__rows dd{margin:0;color:#17181b;font-weight:500}
.mrd__contact dd{color:#17181b}
.mrd__prio{display:inline-block;padding:2px 10px;border:1px solid #8a6a2a;font-size:13px}
.mrd__prio.is-urgent{border-color:#c77a14;color:#8a4b00;background:#fff3df}.mrd__prio.is-emergency{border-color:#b3261e;color:#fff;background:#b3261e}
.mrd__note{margin:12px 0 0;font-size:12.5px;color:#6b6457}
.mrd__shot{margin:22px auto 0;max-width:46ch;color:var(--bone);font-size:16px}
.mrd__wa{background:#1fa855;border-color:#1fa855;color:#fff}.mrd__wa:hover{background:#178a45;color:#fff}
.mrd__delay{margin:34px auto 0;max-width:620px;text-align:left;padding:20px 22px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.mrd__delay p{margin:0 0 10px;color:var(--stone);font-size:14.5px;line-height:1.65}.mrd__delay p:last-child{margin:0}
.mrd__delay .eyebrow{color:var(--gold);margin-bottom:10px}
@media (max-width:520px){.mrd__rows>div{grid-template-columns:1fr;gap:2px}}
html .ty .mrd__card{animation:ty-rise .8s cubic-bezier(.2,.8,.2,1) 1.3s both}
html .ty :is(.mrd__shot,.mrd__delay){animation:ty-fade .7s ease 1.9s both!important}
@media (prefers-reduced-motion: reduce){html:not([data-motion-forced]) .ty .mrd__card{animation:ty-fade .6s ease 1.1s both!important}}
/* Maintenance Service Acknowledgement */
.mr .mr__ack{grid-column:1/-1;display:grid;gap:10px}
.mr__ack details{border:1px solid var(--paper-line);background:rgba(138,106,42,.05)}
.mr__ack summary{cursor:pointer;padding:14px 16px;font-weight:600;color:var(--paper-ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}.mr__ack summary .muted{font-weight:400}
.mr__ack summary::-webkit-details-marker{display:none}
.mr__ack summary::after{content:"+";font-size:20px;line-height:1;color:#8a6a2a;transition:transform .25s ease}
.mr__ack details[open] summary::after{transform:rotate(45deg)}
.mr__ack summary:focus-visible{outline:2px solid #8a6a2a;outline-offset:2px}
.mr__ackbody{padding:0 16px 14px;font-size:14.5px;line-height:1.6;color:var(--paper-ink);max-height:360px;overflow-y:auto}
.mr__ackbody ol{margin:6px 0 12px;padding-left:20px;display:grid;gap:6px}
.mr__ackemerg{margin:0 0 10px;padding:10px 12px;border-left:3px solid #b3261e;background:#fff4f1;color:#5a1f12}
.mr .mr__ackbox{font-weight:500}
.mr .mr__ackbox input[aria-invalid=true]{outline:2px solid #b3261e;outline-offset:2px}
.mr__ack #mr-ack-hint{margin:-4px 0 0}
@media (prefers-reduced-motion:reduce){.mr__ack summary::after{transition:none}}
/* Developer "book shelf": each developer is a book; the cover turns open like a page to reveal the details. */
.devbook{padding-block:clamp(56px,8vw,96px);border-block:1px solid var(--line);background:linear-gradient(180deg,var(--ink-1),var(--ink))}
.devbook__hint{color:var(--muted);margin:10px 0 0;font-size:15px}
.devbook__shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:clamp(18px,2.4vw,30px);margin-top:clamp(28px,4vw,44px)}
.dbook{position:relative;aspect-ratio:3/4;perspective:1400px;border-radius:2px 6px 6px 2px}
.dbook::after{content:"";position:absolute;inset:auto 6% -14px;height:14px;background:radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 70%);pointer-events:none}
.dbook__page{position:absolute;inset:0;padding:22px 20px 20px 26px;background:linear-gradient(90deg,#e9e1d1 0,#f6f1e7 12%,#f8f4ec);color:#1b1a17;border-radius:2px 6px 6px 2px;display:flex;flex-direction:column;gap:8px;overflow:auto;box-shadow:inset 8px 0 14px -10px rgba(0,0,0,.45),0 18px 40px -22px rgba(0,0,0,.8)}
.dbook__name{font-size:22px;color:#14120e}
.dbook__badge{display:inline-block;align-self:flex-start;margin:0;padding:3px 9px;font:600 11px/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#5b4310;background:#efdcae;border:1px solid #c9a457}
.dbook__note{margin:0;font-size:14px;color:#4a4033}
.dbook__about{margin:0;font-size:14.5px;line-height:1.55;color:#2b2722}
.dbook__links{margin:auto 0 0;display:flex;flex-direction:column;gap:6px;font-size:14.5px}
.dbook__links a{color:#6d4f12;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.dbook__links a:hover{color:#2b1f05}
.dbook__links a:focus-visible{outline:2px solid #6d4f12;outline-offset:3px}
.dbook__cover{position:absolute;inset:0;transform-origin:left center;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.75,.25,1);cursor:pointer;z-index:2}
.dbook__front,.dbook__inside{position:absolute;inset:0;border-radius:2px 6px 6px 2px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.dbook__front{display:grid;place-items:center;padding:24px 18px 24px 30px;background:radial-gradient(120% 90% at 30% 10%,#26221a 0,#141210 55%,#0c0b09 100%);border:1px solid rgba(214,180,106,.35);box-shadow:inset 14px 0 0 -8px rgba(214,180,106,.22),inset 18px 0 22px -14px rgba(0,0,0,.9),0 18px 40px -22px rgba(0,0,0,.9)}
.dbook__front::before{content:"";position:absolute;inset:12px 12px 12px 22px;border:1px solid rgba(214,180,106,.35);pointer-events:none}
.dbook__title{font-family:var(--display);font-size:clamp(22px,2.2vw,28px);color:var(--gold-2);text-align:center;line-height:1.15}
.dbook__plate{display:grid;place-items:center;width:84%;aspect-ratio:16/9;background:#f6f1e7;padding:12px;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.dbook__plate img{max-width:100%;max-height:100%;object-fit:contain}
.dbook__ribbon{position:absolute;top:-4px;right:18px;padding:16px 8px 10px;background:var(--gold);color:var(--gold-ink);font:600 10px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;writing-mode:vertical-rl;clip-path:polygon(0 0,100% 0,100% 100%,50% 88%,0 100%)}
.dbook__open{position:absolute;bottom:18px;left:0;right:0;text-align:center;font:500 11px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:rgba(234,209,154,.6)}
.dbook__inside{transform:rotateY(180deg);background:linear-gradient(90deg,#d9cfbd,#efe8db);display:grid;place-items:center}
.dbook__inside span{font-family:var(--display);font-size:42px;color:rgba(110,84,30,.25)}
.dbook.is-open .dbook__cover,.dbook:focus-within .dbook__cover{transform:rotateY(-158deg)}
@media (hover:hover) and (pointer:fine){.dbook:hover .dbook__cover{transform:rotateY(-158deg)}}
.dbook.is-open,.dbook:focus-within{z-index:3}
html:not([data-motion="off"]) .devbook.riffle .dbook__cover{animation:dbook-riffle 1.5s cubic-bezier(.3,.7,.3,1) calc(var(--i,0) * 110ms) 1 both}
@keyframes dbook-riffle{0%{transform:none}45%{transform:rotateY(-48deg)}100%{transform:none}}
.devbook.riffle .dbook.is-open .dbook__cover,.devbook.riffle .dbook:hover .dbook__cover{animation:none}
html[data-motion="off"] .dbook__cover{transition:opacity .3s ease,visibility 0s .3s}
html[data-motion="off"] .dbook.is-open .dbook__cover,html[data-motion="off"] .dbook:focus-within .dbook__cover{transform:none;opacity:0;visibility:hidden}
@media (hover:hover) and (pointer:fine){html[data-motion="off"] .dbook:hover .dbook__cover{transform:none;opacity:0;visibility:hidden}}
@media (max-width:640px){.devbook__shelf{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:68%;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 24px;margin-inline:-4px;scrollbar-width:none}.devbook__shelf::-webkit-scrollbar{display:none}.dbook{scroll-snap-align:start}}
/* Developer page card */
.devcard{display:flex;gap:22px;align-items:center;flex-wrap:wrap;padding:20px;margin:0 0 24px;border:1px solid var(--line-2);background:var(--ink-1)}
.devcard{color:var(--bone)}.devcard a{color:var(--gold-2)}.devcard a:hover{color:#fff}.devcard--partner{border-color:rgba(214,180,106,.55)}
.devcard__logo{width:180px;aspect-ratio:16/9;display:grid;place-items:center;background:#f6f1e7;padding:12px}
.devcard__logo img{max-width:100%;max-height:100%;object-fit:contain}.devcard__logo span{font-family:var(--display);font-size:22px;color:#14120e}
.devcard p{margin:0 0 8px}.devcard p:last-child{margin:0}
/* Our partners */
.partners{padding-block:clamp(48px,7vw,80px) 0}
.partners__grid{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.pcardx{padding:20px;border:1px solid rgba(214,180,106,.5);background:var(--ink-1);display:flex;flex-direction:column;gap:10px}
.pcardx h3{font-size:22px}.pcardx p{margin:0;color:var(--stone)}.pcardx .devcard__logo{width:100%}
.pcardx__links{display:flex;flex-wrap:wrap;gap:14px}.pcardx__links a{color:var(--gold-2)}
.partners__empty{margin:16px 0 0;max-width:720px;color:var(--stone);font-size:17px;line-height:1.6;padding:18px 20px;border-left:3px solid var(--gold);background:var(--ink-1)}
/* Payment plan offers */
.pcard__offer{position:absolute;left:0;bottom:16px;z-index:2;max-width:68%;padding:8px 14px 8px 12px;background:linear-gradient(90deg,var(--gold),var(--gold-2));color:var(--gold-ink);font:600 12.5px/1.2 var(--body);letter-spacing:.04em;box-shadow:0 8px 22px -8px rgba(0,0,0,.7);clip-path:polygon(0 0,100% 0,calc(100% - 8px) 50%,100% 100%,0 100%)}
.planoffer{margin:0 0 32px;padding:22px 24px;border:1px solid rgba(138,106,42,.35);background:linear-gradient(135deg,#fbf6ea,#f3ead6)}
.planoffer .eyebrow{color:#8a6a2a}
.planoffer__head{font-family:var(--display);font-size:clamp(24px,3vw,32px);line-height:1.15;margin:6px 0 12px;color:#14120e}
.planoffer__tags{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.planoffer__tags li{padding:5px 12px;border:1px solid #c9a457;background:#fff;font-size:13.5px;color:#4a3a14}
.planoffer__tags a{color:#5b4310;text-decoration:underline;text-underline-offset:3px}
.planbar{display:flex;height:46px;overflow:hidden;border-radius:3px;margin:0 0 12px;background:#e8dfcb}
.planbar__seg{flex:var(--w) 0 0;display:grid;place-items:center;min-width:42px;color:#fff;font-size:14px;transform-origin:left;border-right:2px solid #fbf6ea}
.planbar__seg:last-child{border-right:0}
.planbar__seg--0{background:#14120e}.planbar__seg--1{background:#6d4f12}.planbar__seg--2{background:#c9a457;color:#1a1408}.planbar__seg--3{background:#3d6b57}
html:not([data-motion="off"]) .planbar__seg{animation:planbar-in .9s cubic-bezier(.2,.8,.2,1) both}
html:not([data-motion="off"]) .planbar__seg:nth-child(2){animation-delay:.12s}html:not([data-motion="off"]) .planbar__seg:nth-child(3){animation-delay:.24s}html:not([data-motion="off"]) .planbar__seg:nth-child(4){animation-delay:.36s}
@keyframes planbar-in{from{transform:scaleX(0)}to{transform:none}}
.planbar__legend{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:6px 20px;font-size:14px;color:#2b2722}
.planbar__dot{display:inline-block;width:11px;height:11px;margin-right:7px;vertical-align:-1px;border-radius:2px}

/* ===== MAR logo in 3D (markup: logo3d() in lib.php; pointer tilt: site.js). Site colours unchanged.
   A warm sun glow with slowly turning rays sits behind the logo so the navy and red artwork reads on the dark
   header and footer. The logo's blue and red layers are stacked in depth, each backed by darker slices, so it
   shows real thickness as it turns. ===== */
@property --lz{syntax:'<number>';inherits:true;initial-value:9}
.logo3d{--lz:9;--lt:.55;position:relative;display:block;height:50px;aspect-ratio:400/310;perspective:520px;flex:none;isolation:isolate;transition:--lz .5s var(--ease)}
.logo3d__in,.logo3d__sway,.logo3d__tilt,.logo3d__grp{position:absolute;inset:0;transform-style:preserve-3d}
.logo3d__tilt{transition:transform .6s var(--ease)}
.logo3d .logo3d__l{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none}
/* each plane sits at --z px; the matching scale cancels the perspective growth so all planes line up exactly at rest */
.logo3d__l,.logo3d__shine{--z:0;transform:translateZ(calc(var(--z) * 1px)) scale(calc(1 - var(--z) / 520))}
.logo3d__grp--blue .logo3d__x{--z:calc(0 - var(--ld) * var(--lt))}
.logo3d__grp--red .logo3d__l,.logo3d__grp--red .logo3d__shine{--z:calc(var(--lz) - var(--ld, 0) * var(--lt))}
.logo3d__x{filter:brightness(.42) saturate(1.2)}
.logo3d__shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%) no-repeat 160% 0/260% 100%;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.logo3d__shine--blue{--m:url(/assets/mar-logo-blue.png)}.logo3d__shine--red{--m:url(/assets/mar-logo-red.png)}
/* sun behind the logo */
.logo3d__sun{position:absolute;left:50%;top:50%;width:250%;height:220%;translate:-50% -50%;pointer-events:none;z-index:-1}
.logo3d__glow,.logo3d__rays{position:absolute;inset:0;border-radius:50%}
.logo3d__glow{background:radial-gradient(closest-side,rgba(255,253,246,.98) 0%,rgba(255,249,234,.95) 36%,rgba(248,233,196,.74) 52%,rgba(214,180,106,.32) 68%,rgba(214,180,106,.1) 84%,rgba(214,180,106,0) 100%)}
.logo3d__rays{background:repeating-conic-gradient(from 0deg,rgba(255,232,178,.62) 0deg 2.5deg,rgba(255,232,178,0) 2.5deg 11deg);-webkit-mask:radial-gradient(closest-side,transparent 34%,#000 50%,rgba(0,0,0,.45) 72%,transparent 97%);mask:radial-gradient(closest-side,transparent 34%,#000 50%,rgba(0,0,0,.45) 72%,transparent 97%)}
/* star glint on the tip of the Burj Khalifa in the logo */
.logo3d__glint{position:absolute;left:74.7%;top:1.6%;width:36%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;transform:scale(0);background:radial-gradient(circle,#fff 0 7%,rgba(255,255,255,.75) 11%,transparent 28%),linear-gradient(90deg,transparent 48.5%,#fff 50%,transparent 51.5%),linear-gradient(0deg,transparent 48.5%,#fff 50%,transparent 51.5%);-webkit-mask:radial-gradient(circle,#000 18%,transparent 68%);mask:radial-gradient(circle,#000 18%,transparent 68%)}
.logo3d.is-hover{--lz:22}.logo3d.is-hover .logo3d__tilt{transition:transform .18s linear}
.logo3d.is-hover .logo3d__sway{animation-play-state:paused}
@keyframes logo3d-sunrise{from{opacity:0;scale:.2}to{opacity:1;scale:1}}
@keyframes logo3d-breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.85}}
@keyframes logo3d-spin{to{transform:rotate(360deg)}}
@keyframes logo3d-in{from{opacity:0;transform:rotateY(-120deg) rotateX(18deg) scale(.5)}to{opacity:1;transform:none}}
@keyframes logo3d-pop{from{--lz:90;opacity:0}to{opacity:1}}
@keyframes logo3d-sway{0%,100%{transform:none}25%{transform:rotateY(18deg) rotateX(-5deg)}75%{transform:rotateY(-18deg) rotateX(6deg)}}
@keyframes logo3d-shine{0%,58%{background-position:160% 0}88%,100%{background-position:-60% 0}}
@keyframes logo3d-glint{0%,80%,100%{transform:scale(0) rotate(0);opacity:0}87%{transform:scale(1) rotate(45deg);opacity:1}94%{transform:scale(.35) rotate(90deg);opacity:.5}}
html:not([data-motion="off"]) .logo3d__sun{animation:logo3d-sunrise 1.7s cubic-bezier(.16,1,.3,1) backwards}
html:not([data-motion="off"]) .logo3d__glow{animation:logo3d-breathe 5s ease-in-out 1.7s infinite}
html:not([data-motion="off"]) .logo3d__rays{animation:logo3d-spin 48s linear infinite}
html:not([data-motion="off"]) .logo3d__in{animation:logo3d-in 1.6s cubic-bezier(.16,1,.3,1) .15s backwards}
html:not([data-motion="off"]) .logo3d__grp--red{animation:logo3d-pop 1.2s cubic-bezier(.16,1,.3,1) .8s backwards}
html:not([data-motion="off"]) .logo3d__sway{animation:logo3d-sway 10s ease-in-out 1.8s infinite}
html:not([data-motion="off"]) .logo3d__shine{animation:logo3d-shine 6.5s ease-in-out 2s infinite}
html:not([data-motion="off"]) .logo3d__shine--red{animation-delay:2.4s}
html:not([data-motion="off"]) .logo3d__glint{animation:logo3d-glint 6.5s ease-in-out 2.6s infinite}
.logo3d--hdr{height:50px;margin-inline:18px 8px}
@media (max-width:640px){.logo3d--hdr{height:42px;margin-inline:14px 4px}}
.ftr__logo{display:inline-block;text-decoration:none}
.logo3d--ftr{--lz:13;--lt:.9;height:92px;margin:18px 40px 26px}.logo3d--ftr.is-hover{--lz:28}

/* printed pages and the landlord-guide PDF carry the MAR logo (the screen header is hidden in print) */
.print-brand{display:none}
@media print{.print-brand{display:flex!important;align-items:flex-end;justify-content:space-between;margin:0 0 18px;padding-bottom:12px;border-bottom:2px solid #d6b46a}.print-brand img{width:130px;height:auto}.print-brand span{font:500 12px/1 var(--body);letter-spacing:.12em;color:#8a6a2a}}
@page{size:A4;margin:14mm 14mm 16mm}