:root{
  /* ground taken from their own walls: warm off-white, oak, grey herringbone */
  --paper:#F7F5F2; --surface:#FFFFFF; --sunk:#EFEBE5;
  --ink:#16211F; --ink-2:#4A5957; --ink-3:#7A8785;
  --line:#E4DFD7; --line-2:#CFC8BD;
  --marine:#05706C;      /* functional teal, 5.4:1 on paper */
  --teal:#07AFA8;        /* brand teal — dark grounds only */
  --teal-hi:#3FE3DA;
  --rose:#B32B5C;        /* tenant track */
  --rose-hi:#F0709E;
  --oak:#B5813F;
  --night:#0C1416; --night-2:#14201F;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --ui:"Montserrat",ui-sans-serif,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --sp:clamp(64px,9vw,132px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance;line-height:1.04;letter-spacing:-.028em}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%}
:focus-visible{outline:2px solid var(--marine);outline-offset:3px;border-radius:2px}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.lede{font-size:clamp(17px,2vw,21px);line-height:1.55;color:var(--ink-2);max-width:60ch}
.lede b{color:var(--ink);font-weight:600}

/* ---------------- header ---------------- */
.hdr{position:fixed;inset:0 0 auto;z-index:60;transition:background .35s,border-color .35s,padding .35s;
  border-bottom:1px solid transparent;padding:18px 0}
.hdr-in{display:flex;align-items:center;gap:clamp(16px,3vw,38px)}
.hdr.solid{background:rgba(247,245,242,.92);backdrop-filter:blur(12px);border-color:var(--line);padding:12px 0}
.logo{display:flex;align-items:center;gap:11px;flex:none}
.logo svg{width:22px;height:22px;flex:none}
.logo svg path{fill:#fff;transition:fill .35s}
.hdr.solid .logo svg path{fill:var(--ink)}
.logo b{font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.01em;line-height:1.15;
  text-transform:uppercase;max-width:112px;display:block;color:#fff;transition:color .35s}
.hdr.solid .logo b{color:var(--ink)}
.nav{display:flex;gap:clamp(14px,2vw,28px);margin-left:8px}
.nav a{font-size:13.5px;font-weight:500;color:rgba(255,255,255,.86);transition:color .35s}
.hdr.solid .nav a{color:var(--ink-2)}
.nav a:hover{color:#fff}.hdr.solid .nav a:hover{color:var(--marine)}
.hdr .tel{margin-left:auto;font-family:var(--mono);font-size:13px;color:rgba(255,255,255,.8);transition:color .35s}
.hdr.solid .tel{color:var(--ink-2)}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.11em;text-transform:uppercase;font-weight:600;padding:12px 18px;border:1px solid;
  transition:background .2s,color .2s,border-color .2s;cursor:pointer;background:none}
.btn-line{border-color:rgba(255,255,255,.5);color:#fff}
.hdr.solid .btn-line{border-color:var(--marine);color:var(--marine)}
.btn-line:hover{background:#fff;color:var(--ink);border-color:#fff}
.hdr.solid .btn-line:hover{background:var(--marine);color:#fff}
.btn-fill{background:var(--marine);border-color:var(--marine);color:#fff}
.btn-fill:hover{background:var(--ink);border-color:var(--ink)}
.btn-rose{background:var(--rose);border-color:var(--rose);color:#fff}
.btn-rose:hover{background:var(--ink);border-color:var(--ink)}
.btn-ghost{border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff}

/* ---------------- hero walkthrough ---------------- */
/* Track length is what sets how many scroll pixels each frame of the walkthrough
   gets. At 660vh the transit frames had roughly 12px each on desktop and 8px on a
   phone — less than one wheel notch — so the camera appeared to teleport between
   stations. 920vh puts it near 25px a frame, which reads as walking. */
.track{position:relative;height:var(--track,920vh);background:var(--night)}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--night)}
.plate{position:absolute;inset:0;opacity:0;will-change:opacity,transform}
.plate img{width:100%;height:100%;object-fit:cover;display:block}
.film{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;opacity:0}
.film.on{opacity:1}
.stage::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(100deg,rgba(8,14,15,.90) 0%,rgba(8,14,15,.60) 32%,rgba(8,14,15,0) 62%),
             linear-gradient(0deg,rgba(8,14,15,.72) 0%,rgba(8,14,15,0) 34%),
             linear-gradient(180deg,rgba(8,14,15,.55) 0%,rgba(8,14,15,0) 18%),
             radial-gradient(120% 90% at 50% 45%,transparent 46%,rgba(0,0,0,.40) 100%)}
.panels{position:absolute;inset:0;pointer-events:none;z-index:5}
.pnl{position:absolute;left:clamp(20px,4vw,48px);bottom:clamp(104px,18vh,168px);
  max-width:min(590px,74vw);opacity:0;will-change:opacity}
.pnl[data-i="5"]{bottom:auto;top:clamp(104px,21vh,208px);max-width:min(400px,60vw)}
.pnl[data-i="5"] p{max-width:30ch}
.pnl .kick{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal-hi);margin-bottom:13px}
.pnl.warm .kick{color:var(--rose-hi)}
.pnl h1,.pnl h2{font-weight:800;line-height:1.01;font-size:clamp(2rem,5vw,3.5rem);color:#fff}
.pnl p{margin:16px 0 0;color:rgba(240,246,244,.82);font-size:clamp(14.5px,1.6vw,16.5px);line-height:1.55;max-width:38ch}
.pnl .meta{font-family:var(--mono);font-size:11.5px;color:rgba(240,246,244,.5);letter-spacing:.06em;margin-top:16px}
.choice{position:absolute;left:0;right:0;bottom:clamp(56px,11vh,110px);z-index:6;
  display:flex;gap:clamp(10px,2vw,22px);justify-content:center;padding:0 20px;
  opacity:0;pointer-events:none;transition:opacity .4s}
.choice.on{opacity:1;pointer-events:auto}
.door{flex:0 1 268px;border:1px solid rgba(255,255,255,.22);background:rgba(10,17,18,.72);
  backdrop-filter:blur(10px);padding:19px 22px;transition:transform .3s,border-color .25s,background .25s}
.door{flex:0 1 300px}
.door .t{font-family:var(--display);font-weight:700;font-size:1.09rem;letter-spacing:-.02em;text-wrap:balance}
.door .t .ar{display:inline-block;transition:transform .25s}
.door:hover .t .ar{transform:translateX(4px)}
.door .s{display:block;font-size:12.5px;color:rgba(240,246,244,.66);margin-top:6px;line-height:1.45}
.door .lab .k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:rgba(240,246,244,.55);margin-bottom:5px}
.door.landlord{border-color:rgba(7,175,168,.55)}.door.landlord .t{color:var(--teal-hi)}
.door.tenant{border-color:rgba(204,51,102,.55)}.door.tenant .t{color:var(--rose-hi)}
.door:hover{transform:translateY(-4px)}
.door.landlord:hover{background:rgba(7,175,168,.18);border-color:var(--teal)}
.door.tenant:hover{background:rgba(204,51,102,.18);border-color:var(--rose-hi)}
.rail{position:absolute;right:clamp(14px,2vw,30px);top:50%;transform:translateY(-50%);z-index:7;
  display:flex;flex-direction:column;gap:13px;padding:9px 3px;border-radius:22px;
  background:rgba(8,14,15,.28);backdrop-filter:blur(6px)}
.rail button{width:26px;height:26px;padding:0;background:none;border:0;cursor:pointer;display:grid;place-items:center}
.rail i{display:block;width:7px;height:7px;border:1px solid rgba(255,255,255,.62);border-radius:50%;
  background:rgba(255,255,255,.14);
  transition:background .25s,border-color .25s,transform .25s}
.rail button[aria-current="true"] i{background:var(--teal-hi);border-color:var(--teal-hi);transform:scale(1.5)}
.cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:6;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.42);
  transition:opacity .4s;pointer-events:none;white-space:nowrap}
.cue.gone{opacity:0}
/* The walkthrough is AI-generated footage of a house the company does not manage
   (hence the class name), so the page has to say so — but a boxed notice reads as
   a warning and pulls focus from the one thing the hero is for. This is a credit
   line, not a banner: same size, weight, case and opacity as the scroll cue below
   it, so it sits at the site's existing "quiet furniture" level. Bottom right,
   where the stage gradient is darkest and nothing else lives; the text shadow is
   insurance for the brightest frames. Wording states the material fact — it is
   not one of their properties — rather than how the picture was made; if that
   ever needs to be more explicit, "computer-generated" is the property trade's
   own convention for the same thing. */
.aidisc{position:absolute;right:clamp(20px,4vw,48px);bottom:26px;z-index:6;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.42);text-shadow:0 1px 2px rgba(0,0,0,.45);
  pointer-events:none;transition:opacity .4s}
.aidisc.gone{opacity:0}
/* Below ~558px the centred cue and this right-aligned credit would meet on the
   same line, so from the mobile breakpoint the credit steps up above it. Depends
   on the cue staying one line, which is why .cue is nowrap — at 320px it used to
   wrap to two and would have run straight into this. */
@media (max-width:820px){.aidisc{right:14px;bottom:52px}}
/* On a phone the full line runs nearly edge to edge, and a line that wide is
   loud however faint it is — louder than the cue under it, which defeats the
   point. The qualifier drops and the material half stays. */
@media (max-width:560px){.aidisc span{display:none}}
@media (max-height:470px) and (orientation:landscape){.aidisc{display:none}}

/* ---------------- sections ---------------- */
section{padding:var(--sp) 0}
.sec-head{max-width:70ch;margin-bottom:clamp(38px,5vw,64px)}
.sec-head .eyebrow{margin-bottom:16px;display:block}
.sec-head h2{font-size:clamp(1.9rem,4.2vw,3.1rem);font-weight:600}
.sec-head p{margin-top:20px}

/* numbers */
.figures{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.fig{padding:clamp(28px,4vw,44px) clamp(18px,2.4vw,32px);border-right:1px solid var(--line)}
.fig:last-child{border-right:0}
.fig .n{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,5vw,3.6rem);
  letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;color:var(--marine)}
.fig .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin-top:14px;line-height:1.5}

/* the split — two doors as a chooser */
.split{background:var(--night);color:#fff}
.split .sec-head h2{color:#fff}
.split .sec-head p{color:rgba(240,246,244,.72)}
.split .eyebrow{color:rgba(240,246,244,.45)}
.tracks{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(16px,2.4vw,28px)}
.tcard{position:relative;border:1px solid rgba(255,255,255,.14);padding:clamp(28px,3.4vw,44px);
  overflow:hidden;transition:border-color .3s,transform .3s;display:flex;flex-direction:column}
.tcard::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;transition:width .35s}
.tcard.l::before{background:var(--teal)}
.tcard.r::before{background:var(--rose)}
.tcard:hover{transform:translateY(-5px)}
.tcard.l:hover{border-color:rgba(7,175,168,.5)}
.tcard.r:hover{border-color:rgba(204,51,102,.5)}
.tcard:hover::before{width:6px}
.tcard .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;margin-bottom:18px}
.tcard.l .k{color:var(--teal-hi)}.tcard.r .k{color:var(--rose-hi)}
.tcard h3{font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:700;margin-bottom:16px}
.tcard>p{color:rgba(240,246,244,.74);font-size:15.5px;line-height:1.6}
.tlist{list-style:none;padding:0;margin:26px 0 30px;display:flex;flex-direction:column;gap:12px}
.tlist li{display:grid;grid-template-columns:18px 1fr;gap:12px;font-size:14.5px;color:rgba(240,246,244,.8);line-height:1.5}
.tlist svg{width:13px;height:13px;margin-top:5px}
.tcard.l .tlist svg path{stroke:var(--teal-hi)}
.tcard.r .tlist svg path{stroke:var(--rose-hi)}
.tcard .go{margin-top:auto}

/* service cards */
.svcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.svc{background:var(--surface);padding:clamp(24px,2.8vw,34px);display:flex;flex-direction:column}
.svc .n{font-family:var(--mono);font-size:10.5px;color:var(--marine);letter-spacing:.13em;margin-bottom:16px}
.svc h3{font-size:1.22rem;font-weight:600;margin-bottom:11px}
.svc p{font-size:14.5px;color:var(--ink-2);line-height:1.6}
.svc .tag{margin-top:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}

/* compliance strip */
.comply{background:var(--sunk);border:1px solid var(--line);padding:clamp(28px,4vw,52px);margin-top:clamp(20px,3vw,36px)}
.comply-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:clamp(18px,2.4vw,30px);margin-top:30px}
.comply-grid div{border-top:2px solid var(--marine);padding-top:14px}
.comply-grid b{font-family:var(--display);font-weight:600;font-size:1rem;display:block;margin-bottom:6px}
.comply-grid p{font-size:13.5px;color:var(--ink-2);line-height:1.5}

/* calculator */
.calc{display:grid;grid-template-columns:minmax(280px,1fr) minmax(300px,1.1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:8px}
.calc-in,.calc-out{background:var(--surface);padding:clamp(26px,3.2vw,40px)}
.calc-out{background:var(--night);color:#fff}
.field{margin-bottom:26px}
.field label{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.field label span{font-family:var(--display);font-size:1.15rem;font-weight:700;color:var(--ink);letter-spacing:-.02em}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;background:transparent;height:22px;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--line-2)}
input[type=range]::-moz-range-track{height:3px;background:var(--line-2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;background:var(--marine);
  border-radius:50%;margin-top:-7px}
input[type=range]::-moz-range-thumb{width:17px;height:17px;background:var(--marine);border:0;border-radius:50%}
.calc-out .row{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.12)}
.calc-out .row:last-of-type{border-bottom:0}
.calc-out .row .k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(240,246,244,.55)}
.calc-out .row .v{font-family:var(--display);font-weight:700;font-size:1.32rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.calc-out .row.big .v{font-size:2.1rem;color:var(--teal-hi)}
.calc-note{font-size:12.5px;color:rgba(240,246,244,.5);margin-top:22px;line-height:1.5}

/* rooms */
.rooms-bar{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:28px;align-items:center}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  padding:9px 15px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);cursor:pointer;
  transition:all .2s}
.chip:hover{border-color:var(--ink-3)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.rooms-bar .count{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(292px,1fr));gap:clamp(14px,1.8vw,22px)}
.room{background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;
  transition:transform .3s,box-shadow .3s,border-color .3s}
.room:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 14px 34px -20px rgba(22,33,31,.35)}
.room .ph{aspect-ratio:4/3;background:var(--sunk);position:relative;overflow:hidden;
  display:grid;place-items:center;border-bottom:1px solid var(--line)}
.room .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.94)}
/* the "Illustrative" stamp is gone: these are now the client's own property
   photographs, served from their management system, not generated stand-ins */
.room .ph .badge{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.11em;text-transform:uppercase;background:rgba(255,255,255,.94);padding:6px 10px;font-weight:600}
.room .ph .badge.now{background:var(--marine);color:#fff}
.room .ph .badge.offer{left:auto;right:12px;background:var(--rose);color:#fff}
.room .bd{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.room h3{font-size:1.06rem;font-weight:600;line-height:1.28;margin-bottom:10px;min-height:2.56em}
.room .loc{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.room .price{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.03em;
  margin-top:auto;padding-top:8px;color:var(--ink);font-variant-numeric:tabular-nums}
.room .price span{font-family:var(--ui);font-size:12.5px;font-weight:500;color:var(--ink-3);letter-spacing:0}
.room .feat{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.room .feat i{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;border:1px solid var(--line);padding:5px 8px;color:var(--ink-3)}
.room .go{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.room .go a{color:var(--marine)}
.room .go a:hover{color:var(--ink);text-decoration:underline}
.room .go .go-enq{color:var(--rose)}

/* included */
.incl{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:clamp(24px,3vw,40px)}
.incl div{background:var(--surface);padding:22px 20px;text-align:center}
.incl b{font-family:var(--display);font-weight:600;font-size:.98rem;display:block}
.incl p{font-size:12px;color:var(--ink-3);margin-top:5px}

/* team */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:clamp(18px,2.4vw,30px)}
.mem .ph{aspect-ratio:4/5;background:var(--sunk);border:1px solid var(--line);display:grid;place-items:center;
  margin-bottom:20px;position:relative}
.mem .ph em{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);font-style:normal;text-align:center;padding:0 20px;line-height:1.6}
/* Monogram stands in for a portrait. The only staff photographs in existence are
   283px square, which cannot carry a 4:5 card, so the card commits to type instead
   of stretching a thumbnail. Replace with real headshots when they arrive. */
.mem .ph .mono-i{font-family:var(--display);font-style:normal;font-weight:800;
  font-size:clamp(2.6rem,5vw,3.6rem);letter-spacing:-.04em;color:var(--line-2);
  line-height:1;-webkit-user-select:none;user-select:none}
.mem .ph{background:linear-gradient(160deg,var(--sunk),var(--paper))}

/* On the record: three verified claims, given the weight of statements rather
   than the styling of cards. Rules, not boxes. */
.rec{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:clamp(22px,3vw,44px)}
.rec article{border-top:2px solid var(--accent);padding-top:20px}
.rec .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px}
.rec h3{font-size:1.1rem;font-weight:600;line-height:1.32;margin-bottom:12px;text-wrap:balance}
.rec p{font-size:14.5px;color:var(--ink-2);line-height:1.62}
.mem h3{font-size:1.24rem;font-weight:600}
.mem .role{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--marine);margin-top:7px}
.mem p{font-size:14.5px;color:var(--ink-2);line-height:1.6;margin-top:14px}

/* proof / placeholder */
.ph-block{border:1px dashed var(--line-2);background:var(--sunk);padding:clamp(26px,3.6vw,44px);text-align:center}
.ph-block .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--oak);margin-bottom:14px}
.ph-block h3{font-size:1.35rem;font-weight:600;margin-bottom:12px}
.ph-block p{font-size:14.5px;color:var(--ink-2);max-width:56ch;margin:0 auto;line-height:1.6}

/* enquiry */
.enq{background:var(--night);color:#fff}
.enq .sec-head h2{color:#fff}
.enq .sec-head p{color:rgba(240,246,244,.72)}
.enq .eyebrow{color:rgba(240,246,244,.45)}
.picker{display:flex;gap:10px;margin-bottom:34px;flex-wrap:wrap}
.picker button{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  padding:14px 22px;border:1px solid rgba(255,255,255,.24);background:none;color:rgba(240,246,244,.72);
  cursor:pointer;font-weight:600;transition:all .25s}
.picker button[aria-pressed="true"]{background:#fff;color:var(--ink);border-color:#fff}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:20px}
.form .full{grid-column:1/-1}
.form label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(240,246,244,.55);margin-bottom:9px}
.form input,.form select,.form textarea{width:100%;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.18);color:#fff;font-family:var(--ui);font-size:15px;
  padding:13px 15px;border-radius:0}
.form textarea{min-height:112px;resize:vertical}
.form input:focus,.form select,.form textarea:focus{outline-color:var(--teal-hi)}
.form select option{background:var(--night);color:#fff}
.form .sub{grid-column:1/-1;display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.form .sub small{font-size:12.5px;color:rgba(240,246,244,.5);line-height:1.5}
.done{display:none;border:1px solid rgba(7,175,168,.5);background:rgba(7,175,168,.1);padding:26px 28px}
.done b{font-family:var(--display);font-size:1.2rem;font-weight:700;display:block;margin-bottom:8px;color:var(--teal-hi)}
.done p{color:rgba(240,246,244,.78);font-size:14.5px}
.enq.sent .form{display:none}.enq.sent .picker{display:none}.enq.sent .done{display:block}

/* footer */
.ftr{background:var(--ink);color:rgba(240,246,244,.72);padding:clamp(48px,6vw,76px) 0 40px}
.ftr-top{display:grid;grid-template-columns:minmax(220px,1.4fr) repeat(auto-fit,minmax(140px,1fr));
  gap:clamp(26px,3vw,44px);padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.13)}
.ftr .logo b{color:#fff}.ftr .logo svg path{fill:#fff}
.ftr h3,.ftr h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(240,246,244,.42);margin-bottom:16px;font-weight:600}
.ftr ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.ftr a:hover{color:#fff}
.ftr .co{font-size:13px;line-height:1.65;margin-top:20px;color:rgba(240,246,244,.5);max-width:38ch}
/* Was .ftr-bot while the markup has always said ftr-btm, so none of this had ever
   applied and the bottom row was rendering as bare body text. */
.ftr-btm{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px;padding-top:26px;
  font-family:var(--mono);font-size:11px;color:rgba(240,246,244,.42)}
/* Studio credit, far right of the bottom row. Deliberately quieter than the client's
   own footer furniture — it is a signature, not a second brand on their site. */
.ftr-btm .credit{margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  color:rgba(240,246,244,.42);transition:color .2s,opacity .2s}
/* 32px is the floor at which the lockup's letterspaced wordmark still resolves; below
   that it turns into grey dashes. The logo is already near-white, so it sits at a lower
   opacity than the text beside it and still reads brighter — thin strokes always do. */
.ftr-btm .credit svg,.ftr-btm .credit img{height:32px;width:auto;display:block;opacity:.55;
  transition:opacity .2s}
.ftr-btm .credit b{font-weight:600;color:rgba(240,246,244,.62)}
.ftr-btm .credit:hover{color:rgba(240,246,244,.72)}
.ftr-btm .credit:hover b{color:#fff}
.ftr-btm .credit:hover svg,.ftr-btm .credit:hover img{opacity:1}
@media (max-width:600px){.ftr-btm .credit{margin-left:0}}
.accs{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.accs i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.22);padding:7px 11px;color:rgba(240,246,244,.62)}

/* reveal */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.js .rv.in{opacity:1;transform:none}

@media (max-width:820px){
  .nav,.hdr .tel{display:none}
  .rail{display:none}
  .calc{grid-template-columns:1fr}
  .pnl{bottom:clamp(128px,22vh,200px)}
  /* column flex makes flex-basis the HEIGHT, so the desktop basis must be reset here
     or the cards inflate to 300px tall and swallow the screen */
  .choice{flex-direction:column;align-items:stretch;gap:10px;
    max-width:min(340px,calc(100% - 32px));margin:0 auto;bottom:max(26px,env(safe-area-inset-bottom))}
  .door{flex:0 0 auto;padding:15px 17px}
  .door .t{font-size:1.02rem}
  .door .s{font-size:12px;margin-top:4px}
  /* the last station carries two cards as well as the copy, so it gets a tighter set */
  .pnl[data-i="5"]{top:clamp(84px,13vh,132px);max-width:none;right:clamp(20px,4vw,48px)}
  .pnl[data-i="5"] h2{font-size:clamp(1.85rem,8.4vw,2.6rem)}
  .pnl[data-i="5"] p{max-width:26ch;font-size:14px}
  .fig{border-right:0;border-bottom:1px solid var(--line)}
}
/* Portrait phones: the picture fills the screen and the copy sits over it, which is
   the original treatment and the one that works. Only the last station is different —
   the camera pulls back there to get both door plates on screen (see fit() in site.js),
   and --bandend tells us where the picture now ends so the buttons can live below it. */
@media (max-width:820px) and (orientation:portrait){
  /* Shorter than desktop because a phone viewport is tall relative to its width, so
     the same fraction of a screen is more thumb travel — but not so short that the
     transit frames get starved again. 760vh lands near 18px a frame. */
  .track{--track:760vh}
  .stage::after{
    background:linear-gradient(180deg,rgba(8,14,15,.52) 0%,rgba(8,14,15,0) 24%,
      rgba(8,14,15,0) 40%,rgba(8,14,15,.72) 72%,rgba(8,14,15,.93) 100%)}
  .pnl{bottom:clamp(96px,15vh,150px);top:auto;
    left:clamp(20px,5vw,30px);right:clamp(20px,5vw,30px);max-width:none}
  .pnl h1,.pnl h2{font-size:clamp(1.9rem,8.6vw,2.7rem)}
  .pnl p{max-width:none;margin-top:12px;font-size:14.5px}
  .pnl .meta{display:none}
  /* the doors: copy tucks under the pulled-back picture, buttons under that */
  /* the buttons live on the doors now, so the copy just sits under the picture */
  /* the buttons are on the doors now, so this station's copy sits where every other
     station's does — near the bottom, over the dark floor the pull-back opens up */
  .pnl[data-i="5"]{top:auto;bottom:clamp(64px,11vh,120px);justify-content:flex-end;padding:0}
  .pnl[data-i="5"] p{display:none}
  .pnl[data-i="5"] h2{font-size:clamp(1.7rem,7.6vw,2.3rem)}
  .choice{flex-direction:column;align-items:stretch;gap:10px;
    max-width:min(340px,calc(100% - 32px));margin:0 auto;
    bottom:max(24px,env(safe-area-inset-bottom))}
  .door{flex:0 0 auto;padding:14px 16px}
  .door .t{font-size:1.02rem}
  .door .s{font-size:12px;margin-top:4px}
  .cue{color:rgba(255,255,255,.55)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms!important}
}

/* ================= WORLDS =================
   The two-door concept only means something if the two halves of the site look
   and behave like different places. Everything audience-specific keys off --accent,
   so a page declares its world once on <body> and the whole page follows. */
:root{--accent:var(--marine);--accent-hi:var(--teal-hi);--accent-soft:rgba(5,112,108,.10)}
body[data-world="landlord"]{--accent:var(--marine);--accent-hi:var(--teal-hi);--accent-soft:rgba(5,112,108,.10)}
body[data-world="tenant"]{--accent:var(--rose);--accent-hi:var(--rose-hi);--accent-soft:rgba(179,43,92,.09)}

body[data-world]:not([data-world="neutral"]) .eyebrow{color:var(--accent)}
body[data-world="tenant"] .btn-fill{background:var(--rose);border-color:var(--rose)}
body[data-world="tenant"] .btn-fill:hover{background:var(--ink);border-color:var(--ink)}
body[data-world="tenant"] .svc .n,body[data-world="tenant"] .steps .n{color:var(--rose)}

/* header nav gets an accent rule so you always know which half you are in */
body[data-world]:not([data-world="neutral"]) .nav a{position:relative}
body[data-world]:not([data-world="neutral"]) .nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;
  height:2px;background:var(--accent-hi);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.hdr.solid .nav a::after{background:var(--accent)}
body[data-world]:not([data-world="neutral"]) .nav a:hover::after{transform:scaleX(1)}

/* the homepage header carries the two doors themselves rather than a menu */
.nav-doors{display:flex;gap:22px;font-size:14px}
.nav-doors a{padding-bottom:3px;border-bottom:2px solid transparent;transition:border-color .25s,color .25s}
.nav-doors .d-l:hover{border-color:var(--teal-hi);color:var(--teal-hi)}
.nav-doors .d-t:hover{border-color:var(--rose-hi);color:var(--rose-hi)}
.hdr.solid .nav-doors .d-l:hover{border-color:var(--marine);color:var(--marine)}
.hdr.solid .nav-doors .d-t:hover{border-color:var(--rose);color:var(--rose)}

/* ---- hub headers ---- */
.hub{padding:clamp(112px,14vw,180px) 0 clamp(40px,5vw,64px);background:var(--surface);
  border-bottom:1px solid var(--line)}
.hub h1{font-size:clamp(2.4rem,6.2vw,4.6rem);font-weight:800;margin:16px 0 20px;max-width:17ch}
.hub .lede{max-width:56ch}
.hub-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hub.neutral h1{max-width:20ch}

/* ---- one-line positioning strip on the homepage ---- */
.oneline{padding:clamp(48px,7vw,88px) 0 clamp(30px,4vw,48px)}
.oneline p{font-family:var(--display);font-weight:500;letter-spacing:-.022em;
  font-size:clamp(1.35rem,3.1vw,2.35rem);line-height:1.22;max-width:24ch;color:var(--ink)}
.oneline b{font-weight:800}

/* ---- the two doors repeated below the walkthrough ---- */
.doors{background:var(--night);color:#fff;padding:var(--sp) 0}
.doors .sec-head h2{color:#fff}
.doors .tcard{display:block;background:var(--night-2);border:1px solid rgba(255,255,255,.12);
  padding:clamp(26px,3.4vw,40px);transition:transform .3s,border-color .25s,background .25s}
.doors .tcard:hover{transform:translateY(-4px)}
.doors .tcard.l{border-color:rgba(7,175,168,.34)}
.doors .tcard.l:hover{border-color:var(--teal);background:rgba(7,175,168,.07)}
.doors .tcard.r{border-color:rgba(240,112,158,.34)}
.doors .tcard.r:hover{border-color:var(--rose-hi);background:rgba(179,43,92,.10)}
.doors .tcard .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;margin-bottom:14px}
.doors .tcard.l .k{color:var(--teal-hi)}.doors .tcard.r .k{color:var(--rose-hi)}
.doors .tcard h3{font-size:clamp(1.5rem,2.7vw,2.05rem);font-weight:700;color:#fff;margin-bottom:12px}
.doors .tcard p{color:rgba(240,246,244,.74);font-size:15.5px}
.doors .tlist{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:9px}
.doors .tlist li{display:block;position:relative;padding-left:20px;font-size:14.5px;line-height:1.5;color:rgba(240,246,244,.66)}
.doors .tlist li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%}
.doors .tcard.l .tlist li::before{background:var(--teal)}
.doors .tcard.r .tlist li::before{background:var(--rose-hi)}
.doors .go{margin-top:26px}
.doors .btn-line{border-color:rgba(255,255,255,.34);color:#fff}
.doors .tcard.l:hover .btn-line{border-color:var(--teal-hi);color:var(--teal-hi)}
.doors .tcard.r:hover .btn-line{border-color:var(--rose-hi);color:var(--rose-hi)}

/* ---- the escape hatch: one calm way back to the other half ---- */
.switch-wrap{padding:clamp(44px,6vw,80px) 0}
.switch-wrap.two{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));padding-top:0}
.switch{display:block;border:1px solid var(--line-2);background:var(--surface);
  padding:clamp(22px,2.6vw,30px);transition:transform .28s,border-color .25s,background .25s}
.switch:hover{transform:translateY(-3px)}
.switch .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:9px}
.switch b{font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,2.2vw,1.5rem);
  letter-spacing:-.02em;display:block}
.switch .s{display:block;margin-top:7px;font-size:14px;color:var(--ink-2)}
.switch.landlord:hover{border-color:var(--marine);background:rgba(5,112,108,.05)}
.switch.landlord b{color:var(--marine)}
.switch.tenant:hover{border-color:var(--rose);background:rgba(179,43,92,.045)}
.switch.tenant b{color:var(--rose)}
.enq .switch{background:var(--night-2);border-color:rgba(255,255,255,.16)}
.enq .switch .k{color:rgba(240,246,244,.5)}
.enq .switch .s{color:rgba(240,246,244,.66)}
.enq .switch.landlord b{color:var(--teal-hi)}
.enq .switch.tenant b{color:var(--rose-hi)}

/* ---- how it works ---- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));border:1px solid var(--line)}
.steps li{background:var(--surface);padding:clamp(24px,3vw,34px)}
.steps .n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--accent);display:block;margin-bottom:14px}
.steps h3{font-size:1.18rem;font-weight:700;margin-bottom:9px}
.steps p{font-size:14.5px;color:var(--ink-2);line-height:1.6}

@media (max-width:820px){
  .nav-doors{display:flex}
  .hdr .nav:not(.nav-doors){display:none}
}

/* Only the homepage opens on a dark hero, so only there should the header start
   transparent with white type. Everywhere else it is solid from the first pixel. */
body:not([data-hero="dark"]) .hdr{background:rgba(247,245,242,.92);backdrop-filter:blur(12px);
  border-color:var(--line);padding:12px 0}
body:not([data-hero="dark"]) .hdr .logo svg path{fill:var(--ink)}
body:not([data-hero="dark"]) .hdr .logo b,
body:not([data-hero="dark"]) .hdr .nav a,
body:not([data-hero="dark"]) .hdr .tel{color:var(--ink)}
body:not([data-hero="dark"]) .hdr .btn-line{border-color:var(--accent);color:var(--accent)}
body:not([data-hero="dark"]) .hdr .btn-line:hover{background:var(--accent);color:#fff}

@media (max-width:820px){
  /* the footer's auto-fit columns can't fit their 140px minimum at 390px wide */
  .ftr-top{grid-template-columns:1fr 1fr}
  .ftr-top>:first-child{grid-column:1 / -1}
  .hub h1{font-size:clamp(2.05rem,9.2vw,3rem)}
  .hub{padding-top:clamp(96px,20vw,140px)}
  .switch-wrap.two{grid-template-columns:1fr}
}
@media (max-width:440px){
  .ftr-top{grid-template-columns:1fr}
  /* keep the header to logo + one action at very small widths */
  .nav-doors{gap:14px;font-size:13px}
  .hdr .btn-line{padding:9px 12px;font-size:10px}
}

@media (max-width:560px){ .hide-sm{display:none} }

/* Landscape phones are wider than the mobile breakpoint but far too short for the
   full copy block and two cards at once. */
@media (max-height:470px) and (orientation:landscape){
  .pnl{bottom:auto;top:clamp(72px,15vh,96px);max-width:min(420px,46vw)}
  .pnl[data-i="5"]{top:clamp(72px,15vh,96px)}
  .pnl h1,.pnl h2{font-size:clamp(1.5rem,4.4vw,2.1rem)}
  .pnl p{font-size:13.5px;margin-top:8px}
  .pnl[data-i="5"] p{display:none}
  .pnl .meta{display:none}
  .choice{bottom:14px;gap:10px}
  .door{flex:0 1 240px;padding:12px 14px}
  .door .t{font-size:.98rem}
  .door .s{font-size:11.5px;margin-top:3px}
  .rail{display:none}
}

@media (max-width:820px) and (orientation:portrait) and (max-height:820px){
  .pnl[data-i="5"] h2{font-size:clamp(1.5rem,6.6vw,1.95rem)}
  .pnl h1,.pnl h2{font-size:clamp(1.6rem,7.2vw,2.2rem)}
  .pnl p{font-size:13.5px}
}

@media (max-width:820px) and (orientation:portrait) and (max-height:720px){
  .pnl[data-i="5"] .kick{display:none}
  .pnl[data-i="5"] h2{font-size:clamp(1.32rem,6.2vw,1.6rem)}
  .door{padding:12px 14px}
  .door .s{font-size:11.5px}
}

/* backdrop-filter over a canvas that repaints every frame is one of the most
   expensive things a phone GPU can be asked to do — the blurred region has to be
   recomposited on every paint. Drop it on touch devices and use a solid ground. */
@media (max-width:820px){
  .hdr.solid,
  body:not([data-hero="dark"]) .hdr{backdrop-filter:none;background:rgba(247,245,242,.97)}
  .door{backdrop-filter:none;background:rgba(10,17,18,.88)}
  .rail{backdrop-filter:none}
}
@media (hover:none) and (pointer:coarse){
  .hdr.solid,
  body:not([data-hero="dark"]) .hdr{backdrop-filter:none;background:rgba(247,245,242,.97)}
  .door{backdrop-filter:none;background:rgba(10,17,18,.88)}
}

/* ---- the doors ARE the buttons ----
   When the canvas is driving the picture, each link is positioned over its own door
   (site.js projects the measured rectangles through the draw transform). The label
   sits low on the door where the wood is plain, and the door lights in its audience
   colour on hover or focus. Without the canvas the stacked cards above still apply. */
.choice.on-doors{position:absolute;inset:0;bottom:0;display:block;padding:0;max-width:none;margin:0}
.choice.on-doors .door{position:absolute;flex:none;padding:0;border:0;background:none;
  backdrop-filter:none;display:flex;align-items:flex-end;justify-content:center;
  border-radius:3px;overflow:hidden;transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.choice.on-doors .door::before{content:"";position:absolute;inset:0;border-radius:3px;
  box-shadow:inset 0 0 0 2px transparent, 0 0 0 0 transparent;
  transition:box-shadow .28s,background .28s}
/* The approach frames cannot be trusted: the video's own lettering on the two signage
   plates garbles and doubles right up until the sharp still takes over, and the still
   cannot be brought in any earlier without cutting to a shot the camera has not
   reached yet. So each door carries a veil over its whole face while that is true,
   and dissolves it off exactly as the sharp plate lands. --veil is driven from the
   scroll loop; it is 1 through the approach and 0 once the doors shot has settled,
   so at rest this is invisible and the plates read normally. Sits under .lab (z 2),
   so the button text stays legible the whole way through. */
.choice.on-doors .door::after{content:"";position:absolute;inset:0;z-index:1;
  border-radius:3px;pointer-events:none;opacity:var(--veil,0);
  background:linear-gradient(180deg,rgba(8,14,15,.97) 0%,rgba(8,14,15,.96) 38%,rgba(8,14,15,.80) 100%)}
.choice.on-doors .door .s{display:none}
.choice.on-doors .door .lab{position:relative;z-index:2;width:100%;text-align:center;
  padding:clamp(10px,1.4vw,16px) clamp(6px,1vw,12px) clamp(12px,1.8vw,20px);
  background:linear-gradient(180deg,rgba(8,14,15,0) 0%,rgba(8,14,15,.62) 42%,rgba(8,14,15,.86) 100%)}
.choice.on-doors .door .k{display:block;font-family:var(--mono);
  font-size:clamp(8px,.62vw,10px);letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-bottom:5px}
.choice.on-doors .door .t{display:block;font-family:var(--display);font-weight:700;
  letter-spacing:-.02em;line-height:1.15;font-size:clamp(12px,1.15vw,17px);color:#fff}
.choice.on-doors .door .ar{display:inline-block;transition:transform .25s}
.choice.on-doors .door:hover,.choice.on-doors .door:focus-visible{transform:translateY(-3px)}
.choice.on-doors .door:hover .ar,.choice.on-doors .door:focus-visible .ar{transform:translateX(4px)}
.choice.on-doors .door.tenant:hover::before,.choice.on-doors .door.tenant:focus-visible::before{
  box-shadow:inset 0 0 0 2px var(--rose-hi), 0 12px 40px rgba(179,43,92,.5);
  background:rgba(179,43,92,.16)}
.choice.on-doors .door.landlord:hover::before,.choice.on-doors .door.landlord:focus-visible::before{
  box-shadow:inset 0 0 0 2px var(--teal-hi), 0 12px 40px rgba(7,175,168,.45);
  background:rgba(7,175,168,.16)}
.choice.on-doors .door:focus-visible{outline:none}
.choice.on-doors .door.tenant .t{color:var(--rose-hi)}
.choice.on-doors .door.landlord .t{color:var(--teal-hi)}

@media (max-width:820px) and (orientation:portrait){
  /* on a phone the doors are smaller, so the label tightens up */
  .choice.on-doors .door .lab{padding:8px 4px 10px}
  .choice.on-doors .door .k{font-size:8px;letter-spacing:.12em;margin-bottom:3px}
  .choice.on-doors .door .t{font-size:clamp(11px,3.1vw,13px)}
}

/* ---------------- legal / long-form text pages ---------------- */
.legal{padding:clamp(40px,6vw,72px) 0 clamp(80px,10vw,120px)}
.legal .wrap{max-width:760px}
.legal .updated{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:8px}
.legal h2{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:700;margin:44px 0 14px;letter-spacing:-.02em}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-family:var(--ui);font-size:1rem;font-weight:600;margin:26px 0 8px;color:var(--ink)}
.legal p{margin:0 0 16px;color:var(--ink-2);max-width:66ch}
.legal p:last-child{margin-bottom:0}
.legal ul,.legal ol{margin:0 0 16px;padding-left:22px;color:var(--ink-2)}
.legal li{margin-bottom:7px;max-width:64ch}
.legal a{color:var(--marine);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--ink)}
.legal strong{color:var(--ink);font-weight:600}
.legal .toc{background:var(--surface);border:1px solid var(--line);border-radius:4px;
  padding:18px 22px;margin-bottom:12px}
.legal .toc p{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:10px}
.legal .toc ol{margin:0;padding-left:18px;columns:2;column-gap:28px}
.legal .toc li{margin-bottom:5px;font-size:14px}
.legal .toc a{color:var(--ink-2);text-decoration:none}
.legal .toc a:hover{color:var(--marine);text-decoration:underline}
.legal table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14px}
.legal table caption{caption-side:top;text-align:left;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.legal th{text-align:left;font-weight:600;color:var(--ink);border-bottom:2px solid var(--line-2);
  padding:9px 14px 9px 0;font-size:13px}
.legal td{border-bottom:1px solid var(--line);padding:11px 14px 11px 0;color:var(--ink-2);vertical-align:top}
.legal .note{background:var(--sunk);border-left:3px solid var(--marine);padding:14px 18px;
  border-radius:0 4px 4px 0;margin:0 0 20px;font-size:14.5px;color:var(--ink-2)}
.legal .contact-block{background:var(--surface);border:1px solid var(--line);border-radius:4px;
  padding:22px 24px;margin-top:32px}
.legal .contact-block p{margin-bottom:6px;font-size:14.5px}
@media (max-width:600px){.legal .toc ol{columns:1}
  .legal table{display:block;overflow-x:auto;white-space:nowrap}}

/* ---------------- property detail: per-room availability ---------------- */
.pdetail{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:clamp(24px,3.5vw,48px);align-items:start}
.pd-photo img{width:100%;height:auto;display:block;border:1px solid var(--line);background:var(--sunk);
  aspect-ratio:4/3;object-fit:cover;filter:saturate(.94)}
.pd-offer{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;background:var(--rose);color:#fff;padding:5px 10px;margin-bottom:14px}
.pd-rooms{min-width:0}
.pd-rooms .sec-head{margin-bottom:16px}
.rmtable{border:1px solid var(--line);background:var(--surface)}
.rmrow{display:grid;grid-template-columns:1fr auto auto auto;gap:16px;align-items:center;
  padding:15px 18px;border-bottom:1px solid var(--line)}
.rmrow:last-child{border-bottom:0}
.rmrow.unavail{color:var(--ink-3)}
.rm-n{font-weight:600;font-size:.96rem;color:var(--ink)}
.rm-s{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line);padding:5px 9px;color:var(--ink-3);white-space:nowrap;justify-self:start}
.rm-s.now{background:var(--marine);color:#fff;border-color:var(--marine)}
.rm-r{font-family:var(--display);font-weight:700;font-size:1.05rem;white-space:nowrap;color:var(--ink)}
.rm-r span{font-family:var(--ui);font-size:11.5px;font-weight:500;color:var(--ink-3)}
.rm-d{font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap}
@media (max-width:720px){
  .pdetail{grid-template-columns:1fr}
  .pd-photo{max-width:320px}
  .rmrow{grid-template-columns:1fr 1fr;row-gap:8px}
  .rm-d{grid-column:1/-1}
}