/* RDK Real Estate — public listing.
 *
 * Follows rdk.ae/Listing: a dark masthead, a large hero over cream, a filter bar,
 * and the inventory as a table rather than as cards. A table because rent, size and
 * view are compared down a column — cards make somebody hold six numbers in their
 * head to answer "which is cheapest".
 *
 * One typeface throughout, at several weights. The palette is the portal's, so a
 * tenant who enquires here and is then sent an onboarding link recognises where
 * they have arrived.
 */

:root {
  --brand:          #1b2f52;
  --brand-strong:   #101f39;
  --brand-tint:     #f2f0ea;

  --ink:            #1a1c1f;
  --ink-soft:       #4a4f57;
  --ink-muted:      #85868d;

  --surface:        #ffffff;
  --canvas:         #f7f5f1;

  /* The search band. A half-step warmer and darker than the page, which is all
     it needs: it is a strip of controls, not a section of its own, and a border
     round it made it read as a card floating on the page. Sampled from the
     design rather than guessed. */
  --band:           #f5f1ea;
  --line:           #e2dcd1;
  --line-soft:      #efeae1;

  /* The brand navy. The masthead and the footer are the only places it grounds a
     whole surface, and everything else on them is derived from it below. */
  --header:         #001B3A;
  --header-ink:     #ffffff;

  /* Tints of white rather than a grey. A warm grey on a blue ground goes muddy,
     and a tint of white reads as the ground itself, one step quieter. At 66% it
     lands at 8:1 — the small print on a masthead is still text somebody has to
     read. */
  --header-dim:     rgb(255 255 255 / .66);
  --header-line:    rgb(255 255 255 / .22);

  /* The accent beside the mark, back to the one sampled from RDK's own header.
     It sits at 7:1 on this navy; it only had to be lightened when the ground was
     the mid-blue, where it fell under the 4.5:1 that 20px text needs. */
  --header-accent:  #84aad0;

  --ok:             #3f6b4c;
  --later:          #8a6100;
  --error:          #9c2b30;
  --error-tint:     #f9ecec;

  /* Two families, each doing one job. Marcellus is for names — the property, the
     page, the price — because a name is read once and should feel like a place;
     Jost is for everything that has to be scanned: labels, figures in a column,
     controls, and it is the closest thing in type to the geometry of the mark.
     Mixing them within a line is what looks like a mistake, so nothing here does.

     Marcellus ships one weight and no italic. Every rule using it therefore sets
     weight 400 and never italic — ask a browser for either and it invents one,
     which is the difference between typography and a slanted approximation of it.
     Emphasis in a display line is carried by colour and a little tracking; see
     .hero h1 em. */
  --font-display: "Marcellus", Georgia, "Times New Roman", serif;
  --font: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* A second serif, for the one line that turns into italic. EB Garamond has a
     real italic - cursive letterforms, not the same roman sheared over - which
     is the whole point of using it there; Marcellus has none, and the note above
     explains why we do not ask a browser to invent one.

     It is the face the exported PDF and JPEG already set their text in, so the
     masthead and the document a visitor downloads from it now agree.

     Both weights of one family, so the roman and the italic in that line are
     drawn by the same hand. */
  --font-mast: "EB Garamond", Georgia, "Times New Roman", serif;

  /* Nothing is loaded for this: it is the tracked-out label face, and every
     system has a monospace that suits a line of five words in capitals. */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* The page fills the screen. This is an inventory of ninety units with nine
     columns, and the room a wide monitor offers is room the table can use —
     fewer wrapped cells, fewer rows off the bottom.

     Capped all the same: past about 1920 the extra width stops helping and the
     eye has to travel the width of a desk to get from a unit number to its rent. */
  --wrap: 120rem;
  --radius: 3px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.75rem;
}

a { color: var(--brand); text-underline-offset: 2px; }
a:hover { color: var(--brand-strong); }

.muted { color: var(--ink-muted); }

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

/* Masthead --------------------------------------------------------------- */

.masthead { background: var(--header); color: var(--header-ink); }

.masthead-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; min-height: 6rem;
  padding-block: 1rem;
}

/* The two pages on the left, the mark on the right, and the space between them
   left as space. */
.mainnav {
  display: flex; align-items: center;
  gap: 2rem;
}

.mainnav a {
  position: relative;
  color: var(--header-dim); text-decoration: none;
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  padding-block: .35rem;
  white-space: nowrap;
  transition: color .15s ease;
}

.mainnav a:hover { color: var(--header-ink); }

/* The page you are on, underlined in the accent. A colour change alone is not
   enough on its own — it asks a reader to compare two greys to find out where
   they are. */
.mainnav-on { color: var(--header-ink); }

.mainnav-on::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--header-accent);
}



.social { display: flex; align-items: center; gap: .5rem; }

/* Circles rather than words, in the footer beside the email and the two phone
   numbers. The footer is the same near-black as the masthead, so these need no
   second set of colours. */
.social a {
  display: grid; place-items: center;
  width: 1.875rem; height: 1.875rem;
  border: 1px solid var(--header-line);
  border-radius: 50%;
  color: var(--header-dim);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}

.social a:hover { color: var(--header-ink); border-color: var(--header-dim); }

/* The mark, and the two lines beside it, divided by a rule. The whole thing is
   the link home: a reader looks for the name in the corner before they look for
   a menu, and this site has no menu precisely because the name is enough. */
.brand {
  display: flex; align-items: center;
  gap: 1.25rem;
  text-decoration: none;
  flex: none;
}

/* Sized by height, with the width left to follow. A logo pinned to a width
   changes height when the artwork is re-exported, and then every other thing on
   the bar moves. */
.brand-logo {
  display: block;
  height: 2rem; width: auto;
}

/* The rule between the mark and the words lives on the text block rather than in
   the markup — one less element for a line that is pure decoration. */
.brand-text {
  display: flex; flex-direction: column;
  align-items: flex-end;
  gap: .25rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--header-line);
  line-height: 1.2;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 400;
  letter-spacing: .02em;
  color: var(--header-accent);
}

.brand-sub {
  color: var(--header-dim);
  font-size: .625rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
}

.brand:hover .brand-name { color: var(--header-ink); }

/* Hero ------------------------------------------------------------------- */

.hero {
  background: var(--canvas);
  padding-block: 4.5rem 3rem;
  border-bottom: 1px solid var(--line);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  font-weight: 400; line-height: 1.06;
  letter-spacing: -0.005em;
  margin: 0 0 1.125rem;
  max-width: 20ch;
}

/* The turn in the sentence, marked by colour and a little air rather than by a
   slant. Marcellus has no italic, and a browser asked for one invents an oblique:
   the same letters leaning, with none of the cursive forms a real italic has. A
   deliberate change of colour says "this word" more clearly than a fake does. */
.hero h1 em {
  font-style: normal;
  color: var(--brand);
  letter-spacing: .04em;
}

.lede {
  color: var(--ink-soft);
  font-size: 1.0625rem;
  margin: 0; max-width: 56ch;
}

/* The front page's opening sentence, let out to the full width of the page.
   Defined after .lede rather than with a heavier selector, so the one that wins
   is the one written last — which is the rule anybody editing this can see.

   The extra leading is not decoration. A line this long is hard to track back
   from the end of one to the start of the next, and loosening the lines is what
   makes a wide measure readable. */
.lede-wide {
  max-width: none;
  line-height: 1.8;
}

main { padding-bottom: 5rem; }

/* Filters ---------------------------------------------------------------- */

/* Full width, edge to edge, so the controls read as a band across the page
   rather than a card sitting on it. The section carries the colour; the wrap
   inside it keeps the fields lined up with the table below. */
.filterband {
  background: var(--band);
  border-bottom: 1px solid var(--line);
}

.filters {
  padding-block: 1.5rem;
  margin: 0;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 1.125rem;
  align-items: end;
}

.field { display: flex; flex-direction: column; gap: .375rem; }

.field label {
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-muted);
}

input, select, textarea {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .5rem .625rem;
  width: 100%;
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

textarea { resize: vertical; }

.hint { font-size: .8125rem; color: var(--ink-muted); }
.optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-muted); }

.filter-actions { display: flex; align-items: center; gap: 1.125rem; }

button, .btn {
  display: inline-block;
  font: inherit; font-weight: 600;
  font-size: .9375rem;
  background: var(--brand); color: #fff;
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  padding: .5rem 1.25rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

button:hover, .btn:hover {
  background: var(--brand-strong); border-color: var(--brand-strong); color: #fff;
}



/* Reset is a button, not a footnote.
   It was an underlined link beside a filled Search, which read as fine print
   rather than as the other half of a pair. Outlined rather than filled, because
   the two are not equals: Search is what you came to press, and clearing the
   form is the way back. */
.reset {
  display: inline-block;
  font: inherit; font-weight: 600;
  font-size: .9375rem;
  background: var(--surface);
  color: var(--brand);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .5rem 1.25rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.reset:hover {
  background: var(--brand-tint);
  border-color: var(--brand);
  color: var(--brand);
  text-decoration: none;
}

.reset:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Inventory -------------------------------------------------------------- */

/* The count on the left, the downloads on the right, dropping to two lines on a
   narrow screen rather than squeezing the count into one word per line. */
.inventory-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin: 1.75rem 0 .75rem;
}

/* The two downloads. Quiet by default: they are useful to the handful of people
   who send this list on, and furniture to everyone else, so they read as tools
   rather than as the page's call to action. */
.exports { display: flex; gap: .5rem; }

.export {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--brand);
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}

.export:hover {
  border-color: var(--brand); background: var(--brand); color: #fff;
  text-decoration: none;
}

.export:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.count { margin: 0; color: var(--ink-soft); font-size: .9375rem; }

.empty {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.5rem;
  color: var(--ink-soft);
  text-align: center;
  margin: 0;
}

/* Wide content scrolls inside its own box rather than pushing the page sideways.
   No ground, no border and no corners: the rows sit on the page itself and are
   separated by hairlines, which is what makes ninety of them read as a list
   rather than as a panel with a list inside it. */
.table-wrap { overflow-x: auto; }

table.listings { width: 100%; border-collapse: collapse; min-width: 64rem; }

/* A navy rule under the header rather than a navy ground behind it.
   A filled band gave the table a heavy lid; the rule does the same job of
   closing the top of the list while leaving the page one continuous colour. */
.listings th {
  text-align: left;
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-muted);
  padding: .75rem 1.125rem;
  border-bottom: 2px solid var(--header);
  white-space: nowrap;
}

/* Tight rows on purpose. A list of eleven flats that shows five of them is a
   list you scroll rather than compare, and comparing is the whole job of a
   table — so the padding and the leading are both pulled in, and the thumbnail
   sized to sit inside the two lines of text beside it rather than setting the
   height of the row on its own. */
.listings td {
  padding: .625rem 1.125rem;
  line-height: 1.35;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.listings tbody tr:last-child td { border-bottom: 0; }
.listings tbody tr:hover { background: var(--brand-tint); }

.listings .num { text-align: right; font-variant-numeric: tabular-nums; }

.listings .rent {
  font-size: 1.0625rem; font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.listings .nowrap { white-space: nowrap; }

.sub { display: block; font-size: .8125rem; color: var(--ink-muted); margin-top: 2px; }

/* In the table the gap is doing nothing the leading does not already do, and
   two pixels on every row is a row of its own over eleven units. */
.listings .sub { margin-top: 1px; }

/* Unit page --------------------------------------------------------------- */

.unit-page { padding-top: 2.5rem; }

.backlink { margin: 0 0 1.5rem; font-size: .9375rem; }

/* No rule at rest, one on hover.
   The chevron and the wording already read as a way out; an underline sitting
   there permanently competes with the unit number right beneath it. The target
   is the whole thing, chevron included, rather than the words alone. */
.backlink a {
  display: inline-flex; align-items: center; gap: .375rem;
  font-weight: 600;
  text-decoration: none;
}

.backlink a:hover { text-decoration: underline; text-underline-offset: 3px; }

.backlink a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.unit-head {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  align-items: flex-start; justify-content: space-between;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.75rem;
}

.unit-head h1 {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 3.2vw, 2.375rem);
  font-weight: 400; line-height: 1.12;
  letter-spacing: -0.022em;
  margin: 0 0 .25rem;
}

.price { text-align: right; }

.price .amount {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* The rate and its two marks on one line.
   The buttons are the same .act squares the listing row uses, so a visitor
   moving between the table and a unit meets one control, not two. */
.price-line {
  display: flex; align-items: center; justify-content: flex-end;
  gap: .75rem;
}

@media (max-width: 40rem) {
  /* Stacked, the price block is left-aligned like everything else on the page. */
  .price { text-align: left; }
  .price-line { justify-content: flex-start; }
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem;
  margin: 0 0 2rem;
}

.facts div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .9375rem 1.125rem;
}

.facts dt {
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: .25rem;
}

.facts dd { margin: 0; font-size: 1.0625rem; }

.description, .plan, .enquire {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}

.description h2, .plan h2, .enquire h2 {
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 .75rem;
}

.description p { margin: 0; max-width: 62ch; color: var(--ink-soft); }

.enquire form { display: grid; gap: 1rem; max-width: 32rem; }
.enquire .privacy { font-size: .8125rem; color: var(--ink-muted); margin: 0; }

/* The form and the plan, side by side ---------------------------------------

   Somebody deciding whether to enquire reads the plan while they type. Above the
   form it is a thing they have already scrolled past; beside it, it is still on
   screen when they reach the send button.

   The form takes the larger share because it is what the page is for, and both
   cards start at the same line rather than stretching to match — a floor plan
   pulled to the height of a five-field form is a floor plan with a lot of white
   space under it. */
/* Equal halves, the plan on the left. The order comes from the markup, so a
   stacked screen gets the same sequence without a reversal trick.

   minmax(0, 1fr) rather than a bare 1fr: a grid column's default minimum is the
   width of its content, so a wide drawing or a long unbroken word would push its
   half past fifty per cent and take the other half's room with it. */
.ask {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 1.5rem;
}

/* Cancels the stacking margin the cards carry when they are full width. */
.ask > * { margin-bottom: 0; }

/* The card is a column so the drawing can take whatever height is left after the
   heading and the link — which is what makes it finish level with the form
   beside it rather than stopping halfway down. */
.plan { display: flex; flex-direction: column; }

/* flex-basis 0 rather than auto, so the box takes the height the card has left
   instead of the height the drawing would like. With basis auto a portrait plan
   made the box taller, the card taller, and — because the two stretch together —
   the enquiry form taller as well, leaving it with a hand's depth of white space
   under the send button. The drawing is the passenger here, not the driver.

   overflow hidden is the belt to that brace: whatever the image's proportions,
   nothing escapes the box. */
.plan-sheet {
  flex: 1 1 0;
  min-height: 18rem;
  overflow: hidden;
  padding: .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

/* The image fills the box and the box decides the shape.
   contain, not cover: a floor plan cropped to fill a box is a floor plan with a
   room missing, and the room it loses is whichever one was at the edge. A wide
   drawing gets bands above and below, a tall one gets them at the sides, and
   neither is stretched. White ground, because a drawing on cream looks like a
   scan somebody forgot to clean up. */
.plan-sheet img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
}

.plan-sheet:hover { border-color: var(--brand); }

.plan-note { margin: .75rem 0 0; font-size: .8125rem; color: var(--ink-muted); }

@media (max-width: 60rem) {
  /* One column, form first. The plan is the reference; the form is the point.
     Stacked there is nothing to match heights with, so the drawing gets a box of
     its own size rather than one stretched to somebody else's. */
  .ask { grid-template-columns: minmax(0, 1fr); }
  .ask > * { margin-bottom: 1.5rem; }

  /* flex, not just height. In a column flex container flex-basis decides the
     main size and height is ignored, so setting height alone left the box at
     basis 0 with nothing to grow into - a 26px sliver with the drawing squashed
     out of existence. Side by side the card is stretched by the grid and there
     is height to take; stacked there is none, so the box has to carry its own. */
  .plan-sheet { flex: 0 0 auto; min-height: 0; height: 20rem; }
}

.sent { color: var(--ok); }
.sent p { margin: 0 0 .5rem; }
.sent p:last-child { color: var(--ink-soft); }

.error {
  background: var(--error-tint);
  border-left: 3px solid var(--error);
  color: var(--error);
  padding: .75rem 1rem;
  margin: 0 0 1rem;
}

/* The honeypot. Off-screen rather than display:none, because some form fillers
   skip anything not rendered — which would defeat the point of it. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Footer ------------------------------------------------------------------ */

.footer {
  background: var(--header);
  color: var(--header-ink);
  padding-block: 2.5rem 1.75rem;
}

.footer-inner {
  display: flex; flex-wrap: wrap; gap: 2.5rem 4rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--header-line);
}

.footer-block { display: flex; flex-direction: column; gap: .25rem; }

.footer-label {
  font-size: .6875rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--header-dim);
}

.footer-block a {
  color: var(--header-ink); text-decoration: none;
  font-size: 1.0625rem;
}

.footer-block a:hover { color: var(--header-ink); text-decoration: underline; }

.footer-fine {
  margin: 1.25rem 0 0;
  font-size: .8125rem;
  color: var(--header-dim);
}

@media (max-width: 52rem) {
  .hero { padding-block: 3rem 2.25rem; }
  .unit-head { flex-direction: column; }
  .price { text-align: left; }
}

/* The floor plan icon ------------------------------------------------------
   A link whose whole content is an icon needs a target big enough to hit and a
   name of its own; both are here rather than left to the 20px glyph. */
.listings .mid { text-align: center; }

.planlink {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--brand);
}

.planlink:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

.planlink:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* The three ways to get in touch, on each row ---------------------------------
   Same square as the floor plan icon beside them, so the last two columns read
   as one set of controls rather than two conventions meeting. */

.reach { display: flex; gap: .375rem; justify-content: flex-end; }

.act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--brand);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.act:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

.act:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* The enquiry form is the filled one: it is the only one of the three that
   reaches the portal as an enquiry and comes back with a reference. The other
   two are as good as whoever is holding the phone. */
.act-solid { background: var(--brand); border-color: var(--brand); color: #fff; }

.act-solid:hover { background: var(--brand-strong); border-color: var(--brand-strong); }

/* WhatsApp's own green, and only on hover. Three coloured buttons in a row is a
   row nobody reads; the colour is there to confirm what you are about to open,
   at the moment you are about to open it. */
.act-whatsapp:hover { background: #1fa855; border-color: #1fa855; color: #fff; }

@media (max-width: 52rem) {
  .reach { justify-content: flex-start; }
}

/* The front page ----------------------------------------------------------
   Properties as cards, because at this point a visitor is choosing between six
   buildings rather than comparing forty rents — the job the table does badly and
   this does well. The table is one click away, already filtered. */

.hero-actions { margin: 2rem 0 0; }

.pagehead {
  background: var(--canvas);
  padding-block: 3rem 2rem;
  border-bottom: 1px solid var(--line);
}

.pagehead h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 400; line-height: 1.08;
  letter-spacing: -0.024em;
  margin: 0 0 .625rem;
}

.crumb {
  margin: 0 0 .875rem;
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-muted);
}

.crumb a { color: var(--ink-muted); text-decoration: none; }

/* The listing masthead ------------------------------------------------------
   Centred, with the title carrying a shift into italic on its second word and
   a small letterspaced line under it naming what the band below filters on.

   The gradient runs across rather than down: a horizontal wash reads as paper
   catching the light, while a vertical one reads as a banner sitting on the
   page - and this is meant to be the top of the page, not an object placed at
   the top of it. */
.pagehead-centred {
  text-align: center;
  padding-block: 3.5rem 2.25rem;
  background: linear-gradient(100deg, var(--canvas) 0%, #f2f1ee 52%, #eceae6 100%);
}

.pagehead-centred h1 {
  font-family: var(--font-mast);
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  letter-spacing: -0.005em;
  margin: 0 0 .75rem;
}

/* The brand colour on the italic half only. Both halves in navy made the line
   one long word; the colour is what separates them, and the italic is what
   stops the colour looking arbitrary. */
.pagehead-centred h1 em {
  font-style: italic;
  color: var(--brand);
}

.headrule {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

@media (max-width: 40rem) {
  /* The tracking is what makes this line elegant at full size and unreadable at
     phone width, where it wraps mid-phrase. Tightened rather than dropped. */
  .headrule { letter-spacing: .12em; font-size: .6875rem; }
}
.crumb a:hover { color: var(--brand); }

/* The heading and the instruction on one line, because they are one thought: this
   is what these are, and this is what to do with them. */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  margin: 3.5rem 0 1.5rem;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 400; line-height: 1.1;
  letter-spacing: 0;
  margin: 0;
}

.section-title em { font-style: normal; color: var(--brand); letter-spacing: .04em; }

.section-hint {
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}

/* The emirates, as links. Square rather than round, to sit with the table and the
   filter bar rather than with the amenity marks. */
.chips {
  display: flex; flex-wrap: wrap;
  gap: .625rem;
  margin-bottom: 2rem;
}

.chip {
  display: inline-block;
  padding: .625rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}

.chip:hover { border-color: var(--brand); color: var(--brand); }

.chip-on {
  background: var(--brand); border-color: var(--brand);
  color: #fff;
}

.chip-on:hover { color: #fff; }

.properties {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 1.25rem;
}

/* The property card: a photograph, a name and place, four counted numbers, the
   amenities as icons, and the way in. A card rather than a row because this is the
   first thing a stranger sees and a picture of a building does more work here than
   any number; the numbers get their own table on the next page. */
.property {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.property:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgb(16 31 57 / .07);
}

/* A fixed ratio, so a row of cards lines up whatever shape was uploaded. */
.property-shot {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--brand-tint);
  overflow: hidden;
}

.property-shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.property:hover .property-shot img { transform: scale(1.03); }

.property-shot:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* The stand-in where no photograph has been uploaded: the initial, large and quiet.
   A considered blank rather than a broken image. */
.property-initial {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 4rem; font-weight: 400;
  color: rgb(27 47 82 / .18);
}

/* Top right, over the photograph. How many plans a building has is the one number
   that belongs on the picture rather than under it: it says how much there is to
   look at before a reader has committed to looking. */
.property-badge {
  position: absolute; right: .875rem; top: .875rem;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .7rem;
  border-radius: var(--radius);
  background: rgb(27 47 82 / .92);
  color: #fff;
  font-size: .625rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  backdrop-filter: blur(2px);
}

.property-badge strong { font-weight: 700; }

.property-body {
  display: flex; flex-direction: column;
  flex: 1;
  padding: 1.375rem 1.5rem 1.5rem;
}

/* Above the name, not below it. Where a building is narrows what a reader is
   looking at before they read what it is called, which is the order somebody
   scanning a page of twelve actually wants. */
.property-place {
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 .5rem;
}

.property-name {
  font-family: var(--font-display);
  font-size: 1.375rem; font-weight: 400;
  letter-spacing: 0;
  line-height: 1.15;
  margin: 0 0 1rem;
}

.property-name a { color: inherit; text-decoration: none; }
.property-name a:hover { color: var(--brand); }

/* The counted numbers, as four short phrases on one line: the figure, then what it
   counts. Written this way rather than stacked in a grid because "12 available" is
   how somebody says it out loud, and four of those wrap on a narrow card into two
   tidy lines instead of a ragged one.

   The pairs are flex rows with the value ordered first, so the markup can keep the
   label as the term and the number as its value — which is what they are. */
.property-stats {
  display: flex; flex-wrap: wrap;
  gap: .5rem 1rem;
  margin: 0 0 1.125rem;
  padding: .875rem 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.property-stats div {
  display: flex; align-items: baseline;
  gap: .3rem;
  min-width: 0;
}

.property-stats dt {
  order: 2;
  font-size: .5938rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-muted);
}

.property-stats dd {
  order: 1;
  margin: 0;
  font-size: 1rem; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand);
  white-space: nowrap;
}

.property-types {
  font-size: .875rem; color: var(--ink-soft);
  margin: 0 0 1.125rem;
}

/* The amenities. Icons at one size in one colour, wrapping rather than scrolling —
   twelve of them on a narrow card should make a second row, not a hidden one. */
.amenities {
  display: flex; flex-wrap: wrap;
  gap: .625rem;
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.amenities li {
  display: grid; place-items: center;
  width: 2.125rem; height: 2.125rem;
  background: var(--brand-tint);
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  color: var(--brand);
}

/* "and four more". The same circle as the icons so the row stays a row. */
.amenities .amenity-more {
  font-size: .75rem; font-weight: 600;
  color: var(--ink-muted);
  background: var(--brand-tint);
  border-color: transparent;
}

.amenity-icon { display: block; }

/* The map link is the card's only button, and it sits at the bottom of every card
   whatever the name above it did. Only one, deliberately: the card is already a
   link to the units, and a card with two buttons asks a reader to choose before
   they know enough to choose.

   Pushed down by the auto margin, so a two-line name and a one-line name still
   line the buttons up across a row. */
.maplink {
  display: flex; align-items: center; gap: .625rem;
  margin-top: auto;
  padding: .875rem 1rem;
  background: var(--brand-tint);
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--brand);
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}

.maplink:hover { background: var(--surface); border-color: var(--brand); }

.maplink span:first-of-type { flex: 1; }

.maplink-pin { flex: none; }

/* The corner arrow: this one leaves the site, which is worth knowing before the
   click rather than after it. */
.maplink-out { flex: none; color: var(--ink-muted); }

.maplink:hover .maplink-out { color: var(--brand); }

.property-count { font-size: .875rem; color: var(--ink-soft); }

.property-from { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }

.from-label, .from-per {
  font-size: .625rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-muted);
}

.from-amount { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; }

@media (max-width: 52rem) {
  /* The bar stacks, mark first: it says what the site is before it says where
     else you can go. Ordered in CSS rather than reordered in the markup, so the
     reading order stays the one that makes sense on a wide screen too. */
  .masthead-inner {
    flex-direction: column; align-items: flex-start;
    gap: 1rem;
    min-height: 0;
  }

  .brand { order: 1; }
  .mainnav { order: 2; gap: 1.5rem; flex-wrap: wrap; }
}

/* Photographs ---------------------------------------------------------------

   One at a time, in a track that snaps.

   Everything here works with scripting off: the track is an ordinary horizontal
   scroller, the arrows are links to the neighbouring frames, and the dots are
   links to a frame. On a phone it is a swipe and the arrows are beside the point.
   The script on the page only smooths the movement and lights the right dot. */

.gallery { margin-bottom: 2rem; }

/* The display picture large, the next three beside it.
   The column is a third of the width and stands exactly as tall as a 16:9 frame,
   which is what fixes the thumbnails at three: a fourth would be too small to
   tell one room from another. */
.gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: .5rem;
  align-items: stretch;
}

.frames {
  position: relative;
  display: flex;

  /* The box is 16:9, not the picture inside it. With the ratio on the image the
     frame's height stayed indefinite, height:100% on the image fell back to its
     intrinsic size, and the picture sat in a taller box with a band of cream
     under it. Fixing the container settles the height of the whole row, which is
     also what the thumbnail column measures itself against. */
  aspect-ratio: 16 / 9;

  /* A grid item with a ratio can be sized the wrong way round: given a definite
     height it derives its *width* from it, which put a 1364px frame in an 890px
     column and slid a third of the photograph under the thumbnails. The
     thumbnails no longer force a height (see .thumb-shot img), and this is the
     guard that stops it happening again whatever else changes. */
  max-width: 100%;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: var(--radius);
  background: var(--brand-tint);

  /* The scrollbar is the one piece of plumbing worth hiding: the thumbnails and
     the count already say where you are, and a grey bar under a photograph reads
     as a mistake rather than as a control. */
  scrollbar-width: none;
}

.frames::-webkit-scrollbar { display: none; }

.frames:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.frame {
  position: relative;
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: center;
}

.frame img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

.frame figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1rem .875rem;
  color: #fff; font-size: .875rem;
  background: linear-gradient(to top, rgb(9 16 28 / .72), rgb(9 16 28 / 0));
}

/* The arrows sit on the photograph, so they carry their own ground rather than
   borrowing the page's cream — which would vanish against a bright facade. */
.glide {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: rgb(9 16 28 / .5);
  border: 1px solid rgb(255 255 255 / .28);
  color: #fff;
  backdrop-filter: blur(3px);
  transition: background .14s ease, border-color .14s ease;
}

.glide:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

.glide:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.glide-back { left: .875rem; }
.glide-on { right: .875rem; }

/* The three small boxes. */
.thumbs {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: .5rem;
}

.thumb-shot {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--brand-tint);
}

/* Out of flow on purpose. Left in flow the three photographs' own heights are
   what the row measures, and the tall column then dictates the height of the
   picture beside it instead of the other way round. Taken out, the boxes have
   no height of their own and simply divide whatever the lead picture's 16:9
   gives them. */
.thumb-shot img {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity .14s ease;
}

.thumb-shot:hover img { opacity: .88; }

/* The one you are looking at. A ring rather than a tint, because a tint on a
   photograph looks like a fault in the photograph. */
.thumb-on { outline: 2px solid var(--brand); outline-offset: -2px; }

.thumb-shot:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* How many there are in total, over the last of the three — the job the count
   line used to do, in the corner where people look for it. */
.thumb-more {
  position: absolute; right: .625rem; bottom: .625rem;
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .3rem .6rem;
  border-radius: 999px;
  background: rgb(9 16 28 / .62);
  color: #fff;
  font-size: .75rem; font-weight: 600;
  backdrop-filter: blur(3px);
}

.tally {
  margin: .625rem 0 0;
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-muted);
}

@media (max-width: 52rem) {
  /* Stacked: the picture full width, the three boxes in a row beneath it. */
  .gallery-grid { grid-template-columns: 1fr; }
  .thumbs { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); }
  .thumb-shot { aspect-ratio: 4 / 3; }
}

@media (max-width: 40rem) {
  /* On a phone this is a swipe. The arrows would cover a sixth of the picture
     each to do a job the thumb already does. */
  .glide { display: none; }
}

/* The thumbnail column in the results table. Fixed size so rows stay level
   whatever shape the photograph is. */
.listings .thumbcell { width: 4.5rem; padding-right: 0; }

.thumb { display: block; width: 3.5rem; }

/* 40px tall, which is what the property name and its emirate come to together.
   Any taller and the picture, not the text, is what decides how tall a row is. */
.thumb img {
  display: block; width: 3.5rem; height: 2.5rem;
  object-fit: cover; border-radius: var(--radius);
  background: var(--brand-tint);
}

.thumb-empty {
  width: 3.5rem; height: 2.5rem;
  border-radius: var(--radius);
  background: var(--line-soft);
}