/* ============================================================
   Twelve — twelve residences, one per floor

   One photograph of one building, fixed behind the page.
   Scrolling descends it, floor by floor, and each floor is the
   home or the shared room you are reading about.
   ============================================================ */

@property --ss{ syntax:"<number>"; inherits:false; initial-value:0.4; }

:root{
  --ink:        #0d1420;
  --paper:      #f6fafe;
  --paper-dim:  #d3e0ec;
  --paper-mute: #93a8bc;

  --line:       rgba(255,255,255,.22);
  --line-soft:  rgba(255,255,255,.13);

  --sun:        #ffd08a;
  --glass-tint: #bfe0f5;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --gut: clamp(22px, 5vw, 82px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --split: 50%;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }
.skip{ position:absolute; left:-9999px; top:0; z-index:1000; background:var(--sun); color:var(--ink); padding:12px 18px; font-size:13px; }
.skip:focus{ left:12px; top:12px; }
:focus-visible{ outline:2px solid var(--sun); outline-offset:3px; }

/* ============================================================
   THE BUILDING
   Geometry is owned by app.js — it centres each floor of the
   photograph in its own section. These are the no-JS fallbacks.
   ============================================================ */

.tower{
  position:fixed; inset:0; z-index:0;
  background-image:url("img/tower.webp");
  background-repeat:no-repeat;
  background-size:var(--tw, 165vh) auto;
  background-position:50% var(--ty, 0px);
  background-color:var(--ink);
}

/* the same building as delivered — the left half of the compare floor */
.tower--shell{
  z-index:1;
  /* one tile only — the same kitchen floor, bare. Drawn at the same
     scale as the strip and parked exactly over its band, so every
     other floor stays untouched behind it. */
  background-image:url("img/kitchen-shell.webp");
  background-size:var(--tw, 165vh) auto;
  background-position:50% var(--sy, -9999px);
  background-repeat:no-repeat;
  clip-path:inset(0 calc(100% - var(--split)) 0 0);
  opacity:0;
  transition:opacity .55s var(--ease);
}
body.is-comparing .tower--shell{ opacity:1; }

/* ============================================================
   THE COMPARE SPLIT — live on the mirror floor only
   ============================================================ */

.compare{
  position:fixed; inset:0; z-index:4;
  opacity:0; pointer-events:none;
  transition:opacity .55s var(--ease);
}
body.is-comparing .compare{ opacity:1; }
body.is-comparing .compare__handle{ pointer-events:auto; }
.compare__handle{
  position:absolute; top:0; bottom:0; left:var(--split);
  width:2px; margin-left:-1px;
  background:rgba(255,252,244,.95);
  box-shadow:0 0 34px rgba(255,220,160,.5);
  cursor:ew-resize;
}
.compare__grip{
  position:absolute; top:50%; left:50%;
  width:60px; height:60px; margin:-30px 0 0 -30px;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:grid; place-items:center;
}
.compare__grip::before{ content:"‹ ›"; font-size:17px; letter-spacing:.16em; color:#fff; }
.compare__tag{
  position:absolute; bottom:32px;
  font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(255,255,255,.92); text-shadow:0 2px 14px rgba(0,0,0,.85);
}
.compare__tag--l{ left:var(--gut); }
.compare__tag--r{ right:var(--gut); }

/* ============================================================
   THE LIFT
   ============================================================ */

.lift{
  position:fixed; z-index:400;
  right:clamp(10px,1.5vw,22px); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:clamp(7px,1vh,13px);
  align-items:flex-end; pointer-events:none;
}
.lift a{
  pointer-events:auto; display:flex; align-items:center; gap:8px;
  text-decoration:none;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  color:rgba(255,255,255,.4);
  text-shadow:0 1px 10px rgba(0,0,0,.9);
  transition:color .4s var(--ease);
}
.lift a i{ display:block; width:12px; height:1px; background:currentColor; opacity:.7;
  transition:width .4s var(--ease); }
.lift a span{ min-width:1.4em; text-align:right; }
.lift a:hover{ color:rgba(255,255,255,.85); }
.lift a.is-on{ color:var(--sun); }
.lift a.is-on i{ width:28px; opacity:1; }
@media (max-height:520px){ .lift{ display:none; } }

/* ============================================================
   STOREYS
   ============================================================ */

.storey{
  position:relative; z-index:3;
  min-height:100svh;
  display:flex; align-items:center;
  padding:clamp(70px,9vh,120px) var(--gut);
}
.storey:nth-of-type(even) .pane{ margin-left:auto; }

/* ---- the glass panel ---- */
.pane{
  position:relative;
  width:100%; max-width:min(520px,100%);
  padding:clamp(24px,2.8vw,40px);
  border-radius:2px;
  background:linear-gradient(140deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.07) 55%, rgba(255,255,255,.10) 100%);
  backdrop-filter:blur(22px) saturate(1.35);
  -webkit-backdrop-filter:blur(22px) saturate(1.35);
  border:1px solid var(--line);
  box-shadow:
    0 28px 70px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 0 60px rgba(255,255,255,.05);
}
.pane--wide{ max-width:min(720px,100%); }
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .pane{ background:rgba(20,32,48,.9); }
}

.pane__no{
  margin:0 0 16px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sun);
  display:flex; align-items:baseline; gap:10px;
}
.pane__no span{ font-family:var(--sans); letter-spacing:.24em; color:rgba(255,255,255,.62); }
.pane__no::after{ content:""; flex:1; height:1px; background:var(--line-soft); }

.pane h2{
  margin:0 0 16px;
  font-size:clamp(25px,3.1vw,40px); line-height:1.08;
  font-weight:500; letter-spacing:-.03em;
}
.pane h2 em{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.005em; color:var(--glass-tint); }
.pane__lede{ margin:0 0 16px; color:var(--paper-dim); font-size:clamp(14px,1.05vw,16px); }
.pane__lede:last-child{ margin-bottom:0; }

.pane__cue{
  margin:18px 0 0;
  font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--sun); display:flex; align-items:center; gap:10px;
  transition:opacity .6s var(--ease);
}
.pane__cue::before{
  content:""; width:16px; height:16px; border-radius:50%;
  border:1px solid currentColor;
}
.pane__cue.is-done{ opacity:.35; }

.spec{ margin:18px 0 0; display:flex; gap:26px; flex-wrap:wrap; padding-top:16px; border-top:1px solid var(--line-soft); }
.spec div{ display:flex; flex-direction:column; gap:3px; }
.spec dt{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--paper-mute); }
.spec dd{ margin:0; font-family:var(--mono); font-size:13px; color:var(--paper); }

.ticks{ margin:18px 0 0; padding:16px 0 0; list-style:none; border-top:1px solid var(--line-soft); }
.ticks li{ position:relative; padding-left:22px; margin-bottom:8px; color:var(--paper-dim); font-size:14.5px; }
.ticks li::before{ content:"—"; position:absolute; left:0; color:var(--sun); }
.ticks li:last-child{ margin-bottom:0; }

/* ============================================================
   THE ROOF — nav on the clouds
   ============================================================ */

.storey--roof{ flex-direction:column; justify-content:space-between; align-items:stretch; }

.sky-nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  padding-top:clamp(6px,2vh,26px);
}
.sky-nav ul{ display:flex; align-items:center; gap:clamp(14px,2.2vw,34px); list-style:none; margin:0; padding:0; }
.sky-nav a{
  text-decoration:none; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.9); text-shadow:0 1px 14px rgba(10,20,40,.6);
  transition:color .3s var(--ease);
}
.sky-nav a:hover{ color:var(--sun); }
.sky-nav__cta{
  border:1px solid rgba(255,255,255,.45); padding:8px 16px; border-radius:2px;
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.sky-nav__cta:hover{ background:var(--sun); border-color:var(--sun); color:#1e1608 !important; }

.mark{
  display:inline-flex; text-decoration:none;
  border:1px solid currentColor;
  font-size:13px; line-height:1; letter-spacing:.02em; font-weight:400;
  color:#fff; text-shadow:0 1px 12px rgba(10,20,40,.7);
}
.mark span{ padding:6px 7px 7px; border-right:1px solid currentColor; }
.mark span:last-child{ border-right:0; }
.mark--sm{ font-size:11px; }

.roof__line{ padding-bottom:clamp(20px,6vh,70px); max-width:min(680px,100%); }
.roof__line h1{
  margin:0 0 14px;
  font-size:clamp(38px,6.6vw,88px); line-height:.95;
  font-weight:500; letter-spacing:-.035em;
  text-shadow:0 4px 44px rgba(10,20,40,.55);
}
.roof__line h1 em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--sun); }
.roof__line p{ margin:0; font-size:clamp(14px,1.2vw,17px); color:rgba(255,255,255,.9);
  text-shadow:0 2px 18px rgba(10,20,40,.7); }

@media (max-width:760px){
  .sky-nav ul li:not(:last-child){ display:none; }
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; cursor:pointer; font-family:inherit;
  font-size:12px; letter-spacing:.15em; text-transform:uppercase; font-weight:500;
  padding:13px 24px; border-radius:2px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--paper);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover{ background:rgba(255,255,255,.22); transform:translateY(-1px); }
.btn--lg{ padding:16px 30px; }
.btn--solid{ background:var(--sun); border-color:var(--sun); color:#1e1608; }
.btn--solid:hover{ background:#fff0d2; border-color:#fff0d2; }

/* ============================================================
   PRICES
   ============================================================ */

.freq{ display:flex; flex-wrap:wrap; gap:7px; margin:4px 0 22px; }
.freq__btn{
  appearance:none; cursor:pointer; font-family:inherit;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  padding:11px 16px; border-radius:2px;
  border:1px solid var(--line-soft);
  background:rgba(255,255,255,.07);
  color:var(--paper-dim);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.freq__btn em{ font-style:normal; font-family:var(--mono); letter-spacing:0; opacity:.7; margin-left:5px; }
.freq__btn:hover{ color:var(--paper); border-color:var(--line); }
.freq__btn.is-on{ background:rgba(255,255,255,.9); color:#152130; border-color:rgba(255,255,255,.9); }

.price{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-soft); }
.price li{ display:flex; align-items:baseline; gap:12px; padding:14px 0 12px; border-bottom:1px solid var(--line-soft); }
.price__name{ display:flex; flex-direction:column; gap:2px; font-size:clamp(15px,1.25vw,17px); }
.price__name em{ font-style:normal; font-size:12px; color:var(--paper-mute); }
.price__dots{ flex:1; border-bottom:1px dotted var(--line-soft); transform:translateY(-4px); min-width:16px; }
.price__fig{ font-family:var(--mono); font-size:clamp(15px,1.35vw,18px); color:var(--sun);
  font-variant-numeric:tabular-nums; white-space:nowrap; transition:opacity .2s var(--ease); }
.price__fig.is-swapping{ opacity:0; }
.price__note{ margin:16px 0 0; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--glass-tint); }
@media (max-width:520px){ .price li{ flex-wrap:wrap; } .price__dots{ display:none; } .price__fig{ margin-left:auto; } }

/* ============================================================
   AREAS
   ============================================================ */

.checker{ margin:20px 0 20px; }
.checker__label{ display:block; margin-bottom:10px; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--paper-mute); }
.checker__row{ display:flex; gap:8px; flex-wrap:wrap; }
.checker__in{
  flex:1 1 200px; border-radius:2px;
  border:1px solid var(--line-soft); background:rgba(255,255,255,.08);
  color:var(--paper); font-family:inherit; font-size:15px; padding:13px 15px;
}
.checker__in::placeholder{ color:var(--paper-mute); }
.checker__in:focus{ outline:0; border-color:var(--sun); }
.checker__out{ margin:12px 0 0; font-size:14px; min-height:1.4em; color:var(--paper-dim); }
.checker__out.is-yes{ color:var(--sun); }

.chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:7px; }
.chips li{
  border:1px solid var(--line-soft); border-radius:2px;
  background:rgba(255,255,255,.06);
  padding:7px 13px; font-size:12px; color:var(--paper-dim);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.chips li.is-hit{ background:var(--sun); color:#1e1608; border-color:var(--sun); }

/* ============================================================
   BOOKING
   ============================================================ */

.form{ display:grid; gap:16px 20px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin-top:6px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field--wide{ grid-column:1/-1; }
.field label{ font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--paper-mute); }
.field input, .field select, .field textarea{
  border:0; border-bottom:1px solid var(--line-soft); border-radius:0;
  background:rgba(255,255,255,.06);
  color:var(--paper); font-family:inherit; font-size:15px; font-weight:300;
  padding:10px 10px; resize:vertical;
}
.field select{ appearance:none; cursor:pointer; }
.field select option{ background:#16232f; color:var(--paper); }
.field input::placeholder, .field textarea::placeholder{ color:rgba(147,168,188,.75); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:0; border-bottom-color:var(--sun); }
.field.is-bad input{ border-bottom-color:#ff9b8a; }

.form__est{ grid-column:1/-1; margin:2px 0 0; font-size:13px; color:var(--paper-dim); min-height:1.4em; }
.form__est b{ font-family:var(--mono); font-weight:400; font-size:16px; color:var(--sun); margin-right:7px; }
.form__est em{ font-style:normal; color:var(--paper-mute); }
.form__actions{ grid-column:1/-1; display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.form__out{ grid-column:1/-1; margin:0; font-size:13.5px; color:var(--glass-tint); min-height:1.4em; }

/* ============================================================
   FOOTER — inside the entrance panel
   ============================================================ */

.foot{
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin-top:34px; padding-top:26px;
  border-top:1px solid var(--line-soft);
}
.foot h4{ margin:0 0 8px; font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--paper-mute); font-weight:400; }
.foot p{ margin:0; font-size:13.5px; color:var(--paper-dim); }
.foot a{ text-decoration:none; transition:color .3s var(--ease); }
.foot a:hover{ color:var(--sun); }
.foot > div:first-child p{ margin-top:14px; }
.foot__base{
  margin:22px 0 0; padding-top:16px;
  border-top:1px solid var(--line-soft);
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--paper-mute);
}

/* ============================================================
   REVEALS
   ============================================================ */

.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.no-obs .reveal{ opacity:1; transform:none; transition:none; }

@media (max-width:760px){
  .pane, .storey:nth-of-type(even) .pane{ max-width:none; margin-left:0; }
  .lift{ right:6px; gap:6px; }
  .lift a{ font-size:9px; }
  .lift a i{ width:8px; }
  .lift a.is-on i{ width:16px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ============================================================
   TWELVE — the pieces this site adds
   ============================================================ */

.roof__eyebrow{
  margin:0 0 14px;
  font-size:10.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--sun);
  text-shadow:0 1px 12px rgba(10,20,40,.8);
}
.roof__line .btn{ margin-top:24px; }

/* status tags in the floor number line */
.tag{
  font-family:var(--sans); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  padding:4px 9px; border-radius:2px;
  border:1px solid var(--line-soft);
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.7);
}
.tag--avail{ border-color:rgba(255,208,138,.5); background:rgba(255,208,138,.14); color:var(--sun); }

/* availability list */
.filt{
  appearance:none; cursor:pointer; font-family:inherit;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  padding:11px 16px; border-radius:2px;
  border:1px solid var(--line-soft);
  background:rgba(255,255,255,.07);
  color:var(--paper-dim);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.filt em{ font-style:normal; font-family:var(--mono); letter-spacing:0; opacity:.7; margin-left:6px; }
.filt:hover{ color:var(--paper); border-color:var(--line); }
.filt.is-on{ background:rgba(255,255,255,.9); color:#152130; border-color:rgba(255,255,255,.9); }

.units{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-soft); }
.units li{
  display:flex; align-items:baseline; gap:14px;
  padding:13px 0 11px; border-bottom:1px solid var(--line-soft);
  transition:opacity .4s var(--ease);
}
.units li.is-hidden{ display:none; }
.units li[data-state="sold"]{ opacity:.5; }
.unit__no{
  font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  color:var(--sun); min-width:2.2em;
}
.units li[data-state="sold"] .unit__no{ color:var(--paper-mute); }
.unit__d{ flex:1; display:flex; flex-direction:column; gap:2px; font-size:clamp(14px,1.2vw,16px); }
.unit__d em{ font-style:normal; font-size:12px; color:var(--paper-mute); }
.unit__p{ font-family:var(--mono); font-size:clamp(13px,1.2vw,16px); color:var(--sun); white-space:nowrap; }
.unit__p--muted{ color:var(--paper-mute); }

/* the person selling it */
.agent{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin:22px 0 26px; padding:18px 20px;
  border:1px solid var(--line-soft); border-radius:2px;
  background:rgba(255,255,255,.07);
}
.agent__name{ margin:0; font-size:17px; font-weight:500; letter-spacing:-.01em; }
.agent__role{ margin:3px 0 0; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--paper-mute); }
.agent__contact{ margin:0; font-size:14px; color:var(--paper-dim); text-align:right; }
.agent__contact a{ text-decoration:none; }
.agent__contact a:hover{ color:var(--sun); }
@media (max-width:520px){ .agent__contact{ text-align:left; } }

/* ============================================================
   THE GROUND FLOOR
   The descent is over by the time you reach it, so this stops
   being a pane of glass on the building and becomes a solid
   surface that rises over it.
   ============================================================ */

.storey--ground{
  align-items:flex-start;
  padding-top:0;
  padding-bottom:clamp(50px,7vh,90px);
  background:linear-gradient(180deg,
    rgba(10,16,26,0) 0,
    rgba(10,16,26,.86) 6%,
    #0b121c 16%,
    #0b121c 100%);
}
.storey--ground .pane{
  max-width:900px; margin:0 auto;
  padding:clamp(56px,9vh,110px) clamp(6px,2vw,28px) 0;
  background:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border:0;
  box-shadow:none;
  border-radius:0;
}
.storey--ground .pane h2{ font-size:clamp(30px,4vw,52px); }
.storey--ground .pane__lede{ max-width:56ch; }

/* the agent card is the only thing left that should look like glass */
.storey--ground .agent{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.14);
}
.storey--ground .field input,
.storey--ground .field select,
.storey--ground .field textarea{ background:rgba(255,255,255,.05); }

/* ============================================================
   NARROW SCREENS
   On a phone the panel cannot float in the middle of the glass —
   it fills the screen and the building disappears behind it. So
   the panels drop to the foot of the window and the building
   keeps the top two thirds to itself.
   ============================================================ */

@media (max-width:760px){

  .storey{
    align-items:flex-end;
    padding:0 var(--gut) clamp(16px,3.5vh,30px);
  }

  .pane, .pane--wide{
    max-width:none; margin:0;
    padding:18px 17px 20px;
    background:linear-gradient(150deg, rgba(13,21,33,.86), rgba(13,21,33,.74));
    border-color:rgba(255,255,255,.16);
    box-shadow:0 18px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.3);
  }
  .pane__no{ margin-bottom:11px; }
  .pane h2{ font-size:22px; line-height:1.12; margin-bottom:9px; }
  .pane__lede{ font-size:13.5px; line-height:1.5; margin-bottom:11px; }
  .spec{ gap:16px; margin-top:12px; padding-top:11px; }
  .spec dd{ font-size:12px; }
  .ticks{ margin-top:12px; padding-top:11px; }
  .ticks li{ font-size:13px; margin-bottom:6px; padding-left:18px; }

  /* the roof — the headline belongs in the sky, not across the parapet */
  .storey--roof{ justify-content:flex-start; align-items:stretch; padding-bottom:0; }
  .roof__line{ margin-top:4vh; padding-bottom:0; }
  .roof__eyebrow{ margin-bottom:10px; font-size:9.5px; }
  .roof__line h1{ font-size:clamp(29px,8.6vw,42px); margin-bottom:10px; }
  .roof__line p{ font-size:13.5px; }
  .roof__line .btn{ margin-top:16px; }

  /* the lift crowds a phone screen and the sky nav already carries the CTA */
  .lift{ display:none; }

  /* the compare floor keeps the upper screen clear, so the split
     runs across the building rather than through the copy */
  [data-floor="compare"] .pane{ max-height:44vh; overflow:hidden; }
  .compare__grip{ top:26%; width:48px; height:48px; margin:-24px 0 0 -24px; }
  .compare__grip::before{ font-size:14px; }
  .compare__tag{ bottom:auto; top:13%; font-size:9px; letter-spacing:.2em; }

  /* availability gets long — let it breathe */
  .units li{ padding:11px 0 9px; gap:10px; }
  .unit__d{ font-size:13.5px; }
  .unit__d em{ font-size:11px; }
  .unit__p{ font-size:12.5px; }
  .filt{ padding:9px 12px; font-size:10px; }

  /* the ground floor is a solid section, so it scrolls normally */
  .storey--ground{ align-items:flex-start; padding-inline:var(--gut); }
  .storey--ground .pane{
    max-height:none; background:none; border:0; box-shadow:none; padding:44px 0 0;
  }
  .agent{ padding:14px 15px; }
  .form{ gap:14px 16px; }
}

@media (max-width:760px){
  /* the availability list is twelve rows deep — taller than a phone.
     It grows and scrolls with the page instead of being pinned. */
  #f07{ align-items:flex-start; padding-top:13vh; padding-bottom:8vh; }
  #f07 .pane{ max-height:none; }
  #f07 .freq{ margin-bottom:16px; }
}

/* the split handle has to own the touch gesture, or the browser
   reads the drag as a scroll and the slider never moves */
.compare__handle{ touch-action:none; }
.compare__handle::before{
  content:""; position:absolute; top:0; bottom:0; left:-22px; right:-22px;
}
.compare__grip{ touch-action:none; }

@media (max-width:760px){
  /* whole floors are shorter on a phone, so the storeys are too —
     the page ends up meaningfully shorter */
  .storey{ min-height:78svh; }
  .compare__handle::before{ left:-30px; right:-30px; }
}