/* ==========================================================================
   EDITING THIS STYLESHEET                          (guide: README.md)

   SAFE TO EDIT - the brand:
     :root { ... }                 colours, fonts, spacing, shadows (light theme)
     [data-theme="dark"] { ... }   the same tokens for dark mode

   Change a token and every component follows. Both blocks must define the
   same names, or the dark theme falls back to a light value.

   EDIT WITH CARE - the components below the tokens are shared by every page
   and by all seven languages. Widths use logical properties
   (margin-inline, padding-block) so the layout would still work right-to-left.

   Ships to the browser as-is; there is no CSS build step.
   ========================================================================== */

/* ==========================================================================
   Al Masriya for Housing and Touristic Development
   Design system v2 — "Alabaster, Emerald & Brass"
   A richer, more luxurious pass: ivory ground, deep emerald and brass
   (both drawn from the company logo), a high-contrast serif display face,
   full-bleed imagery and hairline detailing.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --paper:      #FBF8F2;
  --paper-2:    #F3ECE0;
  --paper-3:    #EDE3D3;
  --surface:    #FFFFFF;
  --ink:        #0F1A18;
  --ink-2:      #35443F;
  --muted:      #6E7A74;
  --line:       #E3D9C8;
  --line-soft:  #EFE7D9;

  --sea:        #0B4A44;
  --sea-2:      #07332F;
  --sea-3:      #052623;
  --sea-soft:   #E6EEEB;

  --brass:      #A9873C;
  --brass-2:    #8A6D2C;
  --brass-soft: #F5EBD5;

  --ok:         #1E6E52;
  --alert:      #A8452A;

  --on-dark:    #F6F1E7;
  --on-dark-2:  rgba(246,241,231,.72);

  --shadow-sm:  0 1px 2px rgba(15,26,24,.04), 0 8px 24px -16px rgba(15,26,24,.24);
  --shadow:     0 2px 4px rgba(15,26,24,.05), 0 24px 56px -28px rgba(15,26,24,.30);
  --shadow-lg:  0 4px 8px rgba(15,26,24,.06), 0 48px 96px -40px rgba(15,26,24,.38);

  --display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --wrap: 1280px;
  --gut: clamp(20px, 4.5vw, 68px);
  --r: 2px;
  --r-lg: 3px;
  --step: clamp(72px, 10vw, 150px);

  --ease: cubic-bezier(.22,.68,.28,1);
}

[data-theme="dark"] {
  --paper:      #0A100F;
  --paper-2:    #101A18;
  --paper-3:    #16221F;
  --surface:    #121E1B;
  --ink:        #F3EDE2;
  --ink-2:      #CBD4CF;
  --muted:      #8E9A94;
  --line:       #24312E;
  --line-soft:  #1A2422;

  --sea:        #63CDB9;
  --sea-2:      #93E2D2;
  --sea-3:      #071211;
  --sea-soft:   #0F2E29;

  --brass:      #D6B570;
  --brass-2:    #E7CE96;
  --brass-soft: #241C0F;

  --ok:         #56C296;
  --alert:      #E08A63;

  --shadow-sm:  0 1px 2px rgba(0,0,0,.45), 0 8px 24px -16px rgba(0,0,0,.7);
  --shadow:     0 2px 4px rgba(0,0,0,.45), 0 24px 56px -28px rgba(0,0,0,.75);
  --shadow-lg:  0 4px 8px rgba(0,0,0,.5), 0 48px 96px -40px rgba(0,0,0,.85);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--display); font-weight: 400; line-height: 1.04;
  letter-spacing: -.018em; margin: 0; overflow-wrap: break-word;
}
h2 { font-size: clamp(30px, 4.2vw, 54px); }
h3 { font-size: 21px; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
/* Author display rules otherwise beat the UA [hidden] rule. */
[hidden] { display: none !important; }
/* Keep in-page anchors clear of the sticky header. */
[id] { scroll-margin-top: 110px; }

::selection { background: var(--brass); color: #fff; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; inset-inline-start: -9999px; top: 8px; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: var(--r);
}
.skip:focus { inset-inline-start: 12px; }

/* Text for screen readers only. Unlike .skip it never becomes visible, so it is
   safe inside a link whose visible label repeats across several cards. */
.vis-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: var(--step); }
.section--tight { padding-block: calc(var(--step) * .55); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Micro-label: uppercase, wide-tracked, brass */
.eyebrow {
  font-family: var(--body);
  font-size: 11.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--brass); display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 30px; height: 1px; background: currentColor; display: block; }

.mono-label {
  font-family: var(--body); font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}

.section-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 28px var(--gut); align-items: end;
  padding-bottom: 30px; margin-bottom: 56px; border-bottom: 1px solid var(--line);
}
.section-head > * { min-width: 0; }
.section-head h2 { font-size: clamp(32px, 5vw, 62px); margin-top: 20px; }
.section-head p { color: var(--muted); font-size: 16.5px; max-width: 46ch; }
@media (max-width: 820px) { .section-head { grid-template-columns: 1fr; align-items: start; } }

.lede { font-size: clamp(17.5px, 1.7vw, 21px); line-height: 1.62; color: var(--ink-2); }
.muted { color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 30px; border-radius: var(--r); border: 1px solid transparent;
  font-family: var(--body); font-weight: 600; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; background: none;
  transition: background-color .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease);
}
.btn--primary { background: var(--sea); color: var(--on-dark); }
.btn--primary:hover { background: var(--sea-2); }
[data-theme="dark"] .btn--primary { color: #05201C; }
.btn--ghost { border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--brass); color: var(--brass); }
.btn--clay { background: var(--brass); color: #fff; }
.btn--clay:hover { background: var(--brass-2); }
[data-theme="dark"] .btn--clay { color: #1E1608; }
.btn--sm { padding: 12px 20px; font-size: 11px; letter-spacing: .14em; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: var(--body); font-weight: 600; font-size: 11.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sea);
  padding-bottom: 4px; border-bottom: 1px solid var(--line);
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
[data-theme="dark"] .link-arrow { color: var(--sea-2); }
.link-arrow:hover { border-color: var(--brass); color: var(--brass); }
.link-arrow .arw { transition: transform .35s var(--ease); }
.link-arrow:hover .arw { transform: translateX(5px); }

/* ---------- Header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper); /* fallback where color-mix is unsupported */
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--line-soft);
}
.head-inner { display: flex; align-items: center; gap: 22px; min-height: 84px; }
.brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; margin-inline-end: auto; flex: none; }
.brand-mark { flex: none; display: flex; align-items: center; }
.brand-mark img { height: 36px; width: auto; }
.only-dark { display: none; }
[data-theme="dark"] .only-light { display: none; }
[data-theme="dark"] .only-dark { display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; max-width: 250px; }
.brand-text strong { font-family: var(--display); font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
.brand-text em {
  font-style: normal; font-size: 9.5px; letter-spacing: .17em;
  text-transform: uppercase; color: var(--muted); margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  text-decoration: none; padding: 10px 14px; border-radius: var(--r);
  font-size: 13.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap;
  position: relative; transition: color .3s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1px;
  background: var(--brass); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.head-tools { display: flex; align-items: center; gap: 8px; }
.tool {
  height: 38px; min-width: 38px; padding: 0 10px; border-radius: var(--r);
  border: 1px solid var(--line); background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--body); font-size: 11.5px; font-weight: 600; letter-spacing: .12em;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.tool:hover { border-color: var(--brass); color: var(--brass); }
.tool select { border: 0; background: none; cursor: pointer; font-size: 11.5px; font-weight: 600; font-family: var(--body); letter-spacing: .12em; }
.tool--select { padding-inline: 12px 8px; }
.burger { display: none; }
.icon { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-sun { display: none; }
.icon-moon { display: block; }
[data-theme="dark"] .icon-sun { display: block; }
[data-theme="dark"] .icon-moon { display: none; }

@media (max-width: 1180px) {
  .nav {
    position: fixed; inset: 84px 0 auto 0; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 8px var(--gut) 28px; box-shadow: var(--shadow-lg);
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .nav[data-open="true"] { transform: none; opacity: 1; pointer-events: auto; }
  .nav a { padding: 16px 4px; border-bottom: 1px solid var(--line-soft); font-size: 17px; white-space: normal; }
  .nav a::after { display: none; }
  .burger { display: inline-flex; }
}
@media (max-width: 620px) {
  .brand-text em { display: none; }
  .head-inner { gap: 10px; min-height: 68px; }
  .brand { gap: 9px; }
  .brand-mark img { height: 30px; }
  .head-tools { gap: 5px; }
  .tool { height: 34px; min-width: 34px; padding: 0 8px; font-size: 11px; }
  .tool--select { padding-inline: 9px 5px; }
  .nav { inset-block-start: 68px; }
}
@media (max-width: 430px) { .brand-text { display: none; } }

/* ---------- Hero: full-bleed image with overlaid type ---------- */
.hero { position: relative; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--sea-3); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* Weighted to the lower left, where the headline sits, so the pool and the
   architecture on the right stay legible instead of being veiled flat. */
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(4,26,24,.58) 0%, rgba(4,26,24,.14) 26%, rgba(4,26,24,.66) 68%, rgba(4,26,24,.93) 100%),
    linear-gradient(96deg, rgba(4,26,24,.82) 0%, rgba(4,26,24,.48) 38%, rgba(4,26,24,.10) 72%, transparent 100%);
}
.hero-inner {
  min-height: clamp(560px, 86vh, 900px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: clamp(96px, 13vh, 150px) clamp(46px, 6vh, 78px);
  color: var(--on-dark);
}
.hero-inner .eyebrow { color: #DFC48F; }
.hero h1 {
  font-size: clamp(42px, 8.2vw, 112px); line-height: .98; letter-spacing: -.028em;
  margin-block: 28px 26px; max-width: 15ch; color: var(--on-dark); font-weight: 300;
}
.hero h1 .accent { font-style: italic; color: #DFC48F; }
/* The company name, opening the hero above the headline. Set in the display
   face at roughly a third of the headline, so it reads as the masthead it is
   while the headline still carries the page. The h1's own top margin sets the
   gap below it. */
.hero-company {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(24px, 3vw, 40px); line-height: 1.15; letter-spacing: -.015em;
  color: var(--on-dark); margin-block: 22px 0;
  /* It sits high in the hero now, where the scrim is at its lightest and the
     building behind it is bright; the same soft shadow the interior heroes use
     keeps it legible without darkening the photograph. */
  text-shadow: 0 2px 24px rgba(4, 26, 24, .55);
}
.hero .lede { color: var(--on-dark-2); max-width: 46ch; }
.hero .btn-row { margin-top: 38px; }
.hero .btn--primary { background: var(--brass); color: #fff; }
.hero .btn--primary:hover { background: var(--brass-2); }
.hero .btn--ghost { border-color: rgba(246,241,231,.42); color: var(--on-dark); }
.hero .btn--ghost:hover { border-color: var(--on-dark); color: var(--on-dark); background: rgba(246,241,231,.09); }

/* Project card, bottom right of the hero. Glass rather than a solid panel, so
   the photograph reads through it, and a link rather than dead text. */
.hero-card {
  position: absolute; z-index: 2; inset-inline-end: var(--gut); bottom: clamp(46px, 6vh, 78px);
  width: min(322px, 82vw); text-decoration: none; display: block;
  background: rgba(9, 34, 31, .58); backdrop-filter: blur(9px) saturate(1.1);
  border: 1px solid rgba(246, 241, 231, .2); border-top: 2px solid var(--brass);
  padding: 20px 22px 20px; color: var(--on-dark);
  transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.hero-card:hover { transform: translateY(-4px); background: rgba(9, 34, 31, .74); border-color: rgba(246, 241, 231, .34); }
.hero-card .mono-label { display: block; margin-bottom: 8px; color: var(--brass-2); }
.hero-card b {
  font-family: var(--display); font-size: 21px; font-weight: 400; display: block;
  letter-spacing: -.01em; color: var(--on-dark);
}
.hero-card p { font-size: 13px; color: rgba(246, 241, 231, .74); margin-top: 8px; line-height: 1.55; }
.hero-card-go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass-2);
}
.hero-card:hover .hero-card-go svg { transform: translateX(4px); }
.hero-card-go svg { transition: transform .35s var(--ease); }
[dir="rtl"] .hero-card-go svg { transform: scaleX(-1); }

@media (max-width: 1080px) {
  .hero-card {
    position: static; width: auto; margin: 0 var(--gut); transform: none;
    background: var(--surface); border-color: var(--line); backdrop-filter: none;
    color: var(--ink);
  }
  .hero-card:hover { transform: none; background: var(--surface); }
  .hero-card b { color: var(--ink); }
  .hero-card p { color: var(--muted); }
  .hero-card .mono-label, .hero-card-go { color: var(--brass); }
}

/* Facts band under the hero */
.hero-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  border-bottom: 1px solid var(--line);
}
.hero-facts li { padding: 42px 34px 42px 0; border-inline-end: 1px solid var(--line); }
.hero-facts li:last-child { border-inline-end: 0; }
.hero-facts b {
  display: block; font-family: var(--display); font-size: clamp(34px, 4.4vw, 58px);
  font-weight: 300; letter-spacing: -.03em; line-height: 1; color: var(--sea);
}
[data-theme="dark"] .hero-facts b { color: var(--sea-2); }
.hero-facts span {
  display: block; margin-top: 14px; font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted);
}

/* ---------- Marquee strip ---------- */
.strip { border-block: 1px solid var(--line); background: var(--paper-2); overflow: hidden; }
.strip-track { display: flex; padding-block: 18px; white-space: nowrap; animation: slide 48s linear infinite; }
.strip-track li {
  font-family: var(--body); font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); display: inline-flex; align-items: center; gap: 52px; padding-inline-end: 52px;
}
.strip-track li::after { content: "\2726"; color: var(--brass); font-size: 10px; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .strip-track { animation: none; } }

/* ---------- Ledger (project index) ---------- */
.ledger { border-top: 1px solid var(--line); }
.ledger-row {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) 170px 160px max-content;
  gap: 24px; align-items: center; padding: 30px 0;
  border-bottom: 1px solid var(--line); text-decoration: none;
  transition: background-color .4s var(--ease), padding-inline .4s var(--ease);
}
.ledger-row > * { min-width: 0; }
.ledger-row:hover { background: var(--paper-2); padding-inline: 22px; }
.ledger-row .yr {
  font-family: var(--body); font-size: 11.5px; font-weight: 600;
  letter-spacing: .18em; color: var(--brass);
}
.ledger-row .nm {
  font-family: var(--display); font-size: clamp(21px, 2.5vw, 33px); font-weight: 400;
  letter-spacing: -.02em; line-height: 1.1;
}
.ledger-row .loc, .ledger-row .cnt { font-size: 13.5px; color: var(--muted); }

/* The badge is a grid item, so by default it stretches to fill its column and
   the tracked-out label spills past the border. Size it by its own content.
   .tag carries .18em of letter-spacing, which also leaves a gap after the last
   letter: trim the same amount off the end padding so the word sits optically
   centred between the two borders. */
.ledger-row .tag {
  display: inline-flex; justify-self: start; width: auto; white-space: nowrap;
  padding-inline: 13px calc(13px - .18em);
}

/* The head above the ledger closes with a rule and the ledger opens with one,
   which reads as two lines with a gap. The head's rule serves as the ledger's
   top line, so the ledger drops its own. */
.section-head + .ledger { border-top: 0; }

@media (max-width: 980px) {
  .ledger-row { grid-template-columns: 74px minmax(0, 1fr) max-content; row-gap: 8px; }
  .ledger-row .loc, .ledger-row .cnt { grid-column: 2 / -1; }
  .ledger-row .tag { grid-column: 3; grid-row: 1; justify-self: end; }
  /* The fixed WhatsApp button stands about 72px off the bottom edge; hold that
     much space under the last row so its badge cannot end up behind it. */
  .ledger { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* Phones: a fixed year column costs a third of the width, so the year becomes
   a caption above the title and the row runs full width. The body's 1.7 line
   height is set for paragraphs and leaves too much air around single lines, so
   the row's own parts are tightened to sit closer together. */
@media (max-width: 600px) {
  .ledger-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px; padding-block: 14px;
  }
  .ledger-row .loc, .ledger-row .cnt { grid-column: 1; line-height: 1.35; }
  .ledger-row .yr { line-height: 1.3; }
  .ledger-row .tag { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 5px; }
}

/* ---------- Tags ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px;
  font-family: var(--body); font-size: 10px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; border: 1px solid var(--line); color: var(--muted);
  white-space: nowrap; border-radius: var(--r);
}
.tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.tag--done { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.tag--build { color: var(--brass); border-color: color-mix(in srgb, var(--brass) 38%, transparent); background: var(--brass-soft); }
.tag--sold { color: var(--muted); }
.tag--avail { color: var(--sea); border-color: color-mix(in srgb, var(--sea) 32%, transparent); background: var(--sea-soft); }
[data-theme="dark"] .tag--avail { color: var(--sea-2); }

/* ---------- Cards: portrait image, title over the photo ---------- */
.grid { display: grid; gap: 28px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--brass); }
.card-art { aspect-ratio: 4 / 5; position: relative; overflow: hidden; background: var(--paper-3); }
.card-art > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.card:hover .card-art > img { transform: scale(1.05); }
.card-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,32,29,.34) 0%, transparent 32%, rgba(5,32,29,.08) 56%, rgba(5,32,29,.80) 100%);
}
.card-art .badge {
  position: absolute; top: 18px; inset-inline-start: 18px; z-index: 2;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(8px);
}
.card-art .card-title {
  position: absolute; z-index: 2; inset-inline: 22px; bottom: 20px;
  font-family: var(--display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 400;
  color: var(--on-dark); letter-spacing: -.015em; line-height: 1.1;
}
.card-body { padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.card-body h3 { font-size: 24px; }
.card-body p { font-size: 14.5px; color: var(--muted); line-height: 1.65; }
.card-foot {
  margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.card-foot .now { font-family: var(--display); font-size: 23px; font-weight: 400; color: var(--sea); letter-spacing: -.02em; }
[data-theme="dark"] .card-foot .now { color: var(--sea-2); }

.specs { display: flex; flex-wrap: wrap; gap: 8px; }
.spec {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  background: var(--paper-2); font-size: 12px; color: var(--ink-2); border-radius: var(--r);
}
.spec b { font-weight: 600; color: var(--ink); }

/* ---------- Price ---------- */
.price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.price .was { font-size: 14px; color: var(--muted); text-decoration: line-through; }
.price .now {
  font-family: var(--display); font-size: clamp(26px, 2.8vw, 38px); font-weight: 400;
  letter-spacing: -.025em; color: var(--sea); line-height: 1;
}
[data-theme="dark"] .price .now { color: var(--sea-2); }
.price .off {
  font-family: var(--body); font-size: 10px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; background: var(--brass); color: #fff; padding: 5px 10px; border-radius: var(--r);
}
[data-theme="dark"] .price .off { color: #1E1608; }
.price-note { font-size: 12.5px; color: var(--muted); line-height: 1.6; }

/* ---------- Unit rows ---------- */
.units-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.unit-row {
  display: grid; grid-template-columns: 140px minmax(0, 1fr) minmax(0, 280px);
  gap: 10px 36px; padding: 40px 0; border-bottom: 1px solid var(--line); align-items: start;
  transition: background-color .4s var(--ease), padding-inline .4s var(--ease);
}
.unit-row > * { min-width: 0; }
.unit-row:hover { background: var(--paper-2); padding-inline: 22px; }
.unit-id {
  font-family: var(--body); font-size: 11px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brass); padding-top: 10px;
}
.unit-main h3 { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 16px; }
.unit-main p { font-size: 14.5px; color: var(--muted); margin-block: 14px 12px; }
.unit-buy { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
@media (max-width: 900px) {
  .unit-row { grid-template-columns: 1fr; gap: 16px; }
  .unit-id { padding-top: 0; }
}

/* ---------- Split feature ---------- */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: clamp(32px, 6vw, 88px); align-items: center; }
.split > * { min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }

.value-list { display: grid; border-top: 1px solid var(--line); }
.value-list li { display: grid; grid-template-columns: 52px 1fr; gap: 22px; padding: 28px 0; border-bottom: 1px solid var(--line); align-items: start; }
.value-list .n { font-family: var(--body); font-size: 11px; font-weight: 600; color: var(--brass); letter-spacing: .18em; padding-top: 7px; }
.value-list h3 { font-size: 22px; margin-bottom: 8px; }
.value-list p { font-size: 14.5px; color: var(--muted); }

/* ---------- Stats: numerals on hairlines, no boxes ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); border-top: 1px solid var(--line); }
.stats li { padding: 40px 32px 40px 0; border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats li:last-child { border-inline-end: 0; }
.stats b {
  display: block; font-family: var(--display); font-size: clamp(36px, 4.6vw, 62px);
  font-weight: 300; letter-spacing: -.035em; line-height: 1; color: var(--sea);
}
[data-theme="dark"] .stats b { color: var(--sea-2); }
.stats b.na { color: var(--muted); font-size: clamp(16px, 1.8vw, 20px); font-family: var(--body); font-weight: 500; letter-spacing: 0; line-height: 1.45; }
.stats span { display: block; margin-top: 14px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 700px) { .stats li { border-inline-end: 0; } }

/* ---------- Notes / panels ---------- */
.note {
  border-inline-start: 2px solid var(--brass); background: var(--brass-soft);
  padding: 22px 26px; font-size: 14.5px; color: var(--ink-2); line-height: 1.7;
}
.note b { font-family: var(--display); font-weight: 500; }

.panel { background: var(--surface); border: 1px solid var(--line); padding: clamp(28px, 4vw, 52px); }
.panel--sea { background: var(--sea); color: var(--on-dark); border-color: transparent; }
.panel--sea .eyebrow { color: var(--brass-2); }
.panel--sea h2 { color: var(--on-dark); }
.panel--sea p { color: var(--on-dark-2); }
.panel--sea .btn--clay { background: var(--brass); color: #fff; }
.panel--sea .btn--clay:hover { background: var(--brass-2); }
.panel--sea .btn--ghost { border-color: rgba(246,241,231,.42); color: var(--on-dark); }
.panel--sea .btn--ghost:hover { border-color: var(--on-dark); background: rgba(246,241,231,.09); }
[data-theme="dark"] .panel--sea { background: var(--paper-3); }
[data-theme="dark"] .panel--sea h2 { color: var(--ink); }
[data-theme="dark"] .panel--sea p { color: var(--muted); }
[data-theme="dark"] .panel--sea .btn--ghost { border-color: var(--line); color: var(--ink); }

/* ---------- Accordion (FAQ) ---------- */
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  cursor: pointer; list-style: none; padding-block: 30px; padding-inline: 0 52px; position: relative;
  font-family: var(--display); font-size: clamp(19px, 2vw, 25px); font-weight: 400; letter-spacing: -.015em;
  transition: color .3s var(--ease);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--brass); }
.acc summary::after {
  content: "+"; position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--body); font-size: 22px; font-weight: 300; color: var(--brass); line-height: 1;
}
.acc details[open] summary::after { content: "\2013"; }
.acc details[open] summary { color: var(--sea); }
[data-theme="dark"] .acc details[open] summary { color: var(--sea-2); }
.acc .acc-body { padding-block: 0 32px; padding-inline: 0 52px; color: var(--muted); font-size: 15.5px; max-width: 74ch; line-height: 1.75; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 22px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 22px; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field > label { font-family: var(--body); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: 15px 16px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r); font-size: 15.5px;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
[data-theme="dark"] .field input, [data-theme="dark"] .field select, [data-theme="dark"] .field textarea { background: var(--paper-2); }
.field textarea { resize: vertical; min-height: 160px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px var(--brass-soft);
}
.field .err { font-size: 12.5px; color: var(--alert); }
.field[data-invalid="true"] input, .field[data-invalid="true"] select, .field[data-invalid="true"] textarea { border-color: var(--alert); }
.form-status { font-size: 14.5px; padding: 16px 20px; border-radius: var(--r); display: none; line-height: 1.6; }
.form-status[data-state="ok"] { display: block; background: var(--sea-soft); color: var(--sea); }
[data-theme="dark"] .form-status[data-state="ok"] { color: var(--sea-2); }
.form-status[data-state="err"] { display: block; background: var(--brass-soft); color: var(--alert); }

/* ---------- Contact list ---------- */
/* An email and a phone number are single unbreakable tokens, so the row has to
   make room for them rather than the text give way. The label sits beside the
   value while a whole email still fits next to it and moves above it the moment
   it does not - flex-wrap decides that from the width this list actually has,
   so it holds in the FAQ side panel and in the sales-office column alike, at
   every viewport. The fixed `150px 1fr` it replaces could not: in the side
   panel it left the value column 26px. */
.contact-list {
  display: grid; border-top: 1px solid var(--line);
  /* The longest value on the site, almasria.developments@gmail.com, sets 277px
     at the body size; rounded up, this is the room a value wants before it is
     worth keeping on the label's line. Deliberately not a container query: the
     sales-office column is sized shrink-to-fit, and `container-type` would take
     this list's own width out of that calculation. */
  --contact-value: 280px;
}
.contact-list li {
  padding: 24px 0; border-bottom: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: 24px; row-gap: 6px;
}
/* Enough to keep the values aligned down the list in every language - the
   longest label is Polish "Siedziba glowna" - without capping a longer one. */
.contact-list li > .mono-label { flex: 0 0 auto; min-width: 130px; }
.contact-list li > :not(.mono-label) { flex: 1 1 var(--contact-value); min-width: 0; }
.contact-list a { text-decoration: none; border-bottom: 1px solid var(--line); transition: color .3s var(--ease), border-color .3s var(--ease); }
.contact-list a:hover { color: var(--brass); border-color: var(--brass); }

/* ---------- Empty state (blog) ---------- */
.empty-state { text-align: center; padding: clamp(56px, 9vw, 110px) 24px; border: 1px solid var(--line); background: var(--surface); }
.empty-state h3 { font-size: clamp(24px, 3.2vw, 34px); margin-bottom: 16px; }
.empty-state p { color: var(--muted); max-width: 58ch; margin-inline: auto; }

/* ---------- Page head ---------- */
.page-head { padding-block: clamp(56px, 8vw, 120px) clamp(36px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(38px, 7vw, 92px); letter-spacing: -.028em; margin-block: 26px 26px; font-weight: 300; }
.page-head .lede { max-width: 62ch; }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 26px; }
.crumbs a { text-decoration: none; transition: color .3s var(--ease); }
.crumbs a:hover { color: var(--brass); }

/* ---------- Photography ---------- */
.hero-art { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-3); }
.hero-art > img, .art > img { width: 100%; height: 100%; object-fit: cover; }
.art { position: relative; overflow: hidden; background: var(--paper-3); }
.art--wide { aspect-ratio: 16 / 9; }
.art-note { font-size: 12.5px; color: var(--muted); margin-top: 12px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 20px; margin-top: 20px; }
.gallery figure { margin: 0; overflow: hidden; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.1s var(--ease); }
.gallery figure:hover img { transform: scale(1.05); }

/* ---------- Footer: deep, brass-ruled ---------- */
.site-foot { background: var(--sea-3); color: var(--on-dark); margin-top: var(--step); }
[data-theme="dark"] .site-foot { background: var(--paper-2); border-top: 1px solid var(--line); }
.site-foot .brand-text strong { color: var(--on-dark); }
.site-foot .brand-text em { color: var(--on-dark-2); }
[data-theme="dark"] .site-foot .brand-text strong { color: var(--ink); }
[data-theme="dark"] .site-foot .brand-text em { color: var(--muted); }
/* the footer sits on a dark ground in both themes, so always use the light logo */
.site-foot .only-light { display: none; }
.site-foot .only-dark { display: block; }
/* The last column carries the email - one 243px token at this size - so it is
   sized to its content and the three flexible columns share what is left. An
   even 1fr split gave it 212px and broke the address across two lines. */
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)) minmax(0, max-content); gap: 48px var(--gut); padding-block: clamp(56px, 7vw, 92px) 48px; }
.foot-grid h2 { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-2); margin-bottom: 20px; font-weight: 600; font-family: var(--body); }
[data-theme="dark"] .foot-grid h2 { color: var(--brass); }
.foot-grid ul { display: grid; gap: 12px; }
.foot-grid a { text-decoration: none; font-size: 14.5px; color: var(--on-dark-2); transition: color .3s var(--ease); }
.foot-grid a:hover { color: var(--brass-2); }
.foot-grid .muted { color: var(--on-dark-2); }
.foot-brand p { font-size: 14.5px; color: var(--on-dark-2); max-width: 42ch; margin-top: 18px; line-height: 1.7; }
.foot-logo { padding-bottom: 30px; }
.foot-logo img { width: min(440px, 70%); height: auto; opacity: .95; }
.foot-base {
  display: flex; flex-wrap: wrap; gap: 14px 32px; justify-content: space-between;
  padding-block: 26px 36px; border-top: 1px solid rgba(246,241,231,.15);
  font-size: 12.5px; color: var(--on-dark-2);
}
[data-theme="dark"] .foot-base { border-top-color: var(--line); }
@media (max-width: 1000px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Two columns stop being wide enough for the email at around 620px. */
@media (max-width: 620px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- WhatsApp FAB ---------- */
.fab {
  position: fixed; inset-inline-end: 22px; bottom: 22px; z-index: 90;
  display: inline-flex; align-items: center; gap: 11px; padding: 14px 20px;
  background: #1FA855; color: #fff; border-radius: 999px; text-decoration: none;
  font-family: var(--body); font-weight: 600; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 12px 34px -12px rgba(31,168,85,.75);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.fab:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -14px rgba(31,168,85,.85); }
.fab svg { width: 20px; height: 20px; fill: currentColor; }
@media (max-width: 560px) { .fab .fab-txt { display: none; } .fab { padding: 15px; } }

/* ---------- Reveal ---------- */
/* Scoped to .js so that without JavaScript every section is simply visible. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ==========================================================================
   Projects portfolio — responsive card grid with an in-card image carousel
   3 columns desktop / 2 tablet / 1 mobile. Direction-aware (LTR + RTL).
   ========================================================================== */
.portfolio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
@media (max-width: 1100px) { .portfolio { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } }
@media (max-width: 700px)  { .portfolio { grid-template-columns: 1fr; gap: 24px; } }

.pcard {
  --r-card: 16px;
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--brass) 55%, var(--line)); }

/* ---- media / carousel ---- */
.pcard-media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--paper-3); touch-action: pan-y;
}
.pcard-track {
  display: flex; height: 100%; will-change: transform;
  transition: transform .55s var(--ease);
}
.pcard-track[data-dragging="true"] { transition: none; }
.pcard-slide { flex: 0 0 100%; height: 100%; margin: 0; position: relative; }
.pcard-slide img {
  width: 100%; height: 100%; object-fit: cover;
  /* the leading edge of the card is rounded, the image must follow it */
  user-select: none; -webkit-user-drag: none;
}
.pcard-media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 42%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(4,26,24,.55));
}

/* arrows: semi-transparent, revealed on hover, always present on touch */
.pcard-nav {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 3;
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer; padding: 0;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(8px); color: var(--ink);
  opacity: 0; transition: opacity .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}
.pcard-nav svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pcard-nav--prev { inset-inline-start: 12px; }
.pcard-nav--next { inset-inline-end: 12px; }
.pcard:hover .pcard-nav, .pcard-nav:focus-visible { opacity: 1; }
.pcard-nav:hover { background: var(--surface); transform: scale(1.06); }
[dir="rtl"] .pcard-nav svg { transform: scaleX(-1); }
@media (hover: none) { .pcard-nav { opacity: .92; } }

/* pagination dots */
.pcard-dots {
  position: absolute; z-index: 3; inset-inline: 0; bottom: 14px;
  display: flex; justify-content: center; align-items: center; gap: 7px;
}
.pcard-dot {
  width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.55); transition: width .35s var(--ease), background-color .35s var(--ease);
}
.pcard-dot:hover { background: rgba(255,255,255,.85); }
.pcard-dot[aria-current="true"] { width: 20px; background: #fff; }

.pcard-badges {
  position: absolute; z-index: 3; top: 14px; inset-inline-start: 14px;
  display: flex; flex-wrap: wrap; gap: 8px; max-width: calc(100% - 28px);
}
.pcard-badges .tag {
  border-radius: 999px; background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(8px); border-color: transparent;
}

/* ---- body ---- */
.pcard-body { padding: 24px 22px 26px; display: flex; flex-direction: column; gap: 14px; flex: 1; min-width: 0; }
.pcard-meta { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.pcard-body h3 { font-size: clamp(22px, 2vw, 27px); line-height: 1.15; letter-spacing: -.02em; }
.pcard-desc {
  font-size: 14.5px; line-height: 1.6; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.pcard-specs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  padding-block: 18px; margin-top: 2px;
  border-block: 1px solid var(--line-soft);
}
.pcard-spec { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.pcard-spec svg { width: 16px; height: 16px; flex: none; margin-top: 3px; stroke: var(--brass); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pcard-spec b { display: block; font-family: var(--body); font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; white-space: nowrap; }
.pcard-spec span { display: block; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-top: 3px; line-height: 1.35; }

.pcard-cta { margin-top: auto; padding-top: 4px; }
.pcard-cta .btn { width: 100%; border-radius: 999px; }

/* screen-reader-only live region for the carousel position */
.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;
}

/* ==========================================================================
   Journal — index cards and long-form article layout
   ========================================================================== */

/* ---- index ---- */
.post-featured {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 64px); align-items: center;
  padding-bottom: clamp(40px, 6vw, 72px); margin-bottom: clamp(40px, 6vw, 72px);
  border-bottom: 1px solid var(--line);
}
.post-featured > * { min-width: 0; }
.post-featured .post-media { aspect-ratio: 4 / 3; }
.post-featured h2 { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.06; margin-block: 18px 18px; }
.post-featured .post-excerpt { -webkit-line-clamp: 4; line-clamp: 4; font-size: 16px; }
@media (max-width: 900px) { .post-featured { grid-template-columns: 1fr; } }

.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 1100px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } }
@media (max-width: 700px)  { .post-grid { grid-template-columns: 1fr; } }

.post-card { display: flex; flex-direction: column; min-width: 0; text-decoration: none; }
.post-media {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--paper-3); border-radius: var(--r-lg); margin-bottom: 20px;
}
.post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.post-card:hover .post-media img, .post-featured a:hover .post-media img { transform: scale(1.04); }

.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.post-meta .cat { color: var(--brass); font-weight: 600; }
.post-meta .sep { opacity: .5; }

.post-card h3 {
  font-size: clamp(20px, 1.9vw, 25px); line-height: 1.18; letter-spacing: -.018em;
  margin-block: 12px 10px; transition: color .3s var(--ease);
}
.post-card:hover h3, .post-featured a:hover h2 { color: var(--brass); }
.post-excerpt {
  font-size: 14.5px; line-height: 1.65; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-card .link-arrow { margin-top: 16px; align-self: flex-start; }

/* ---- article ---- */
.article-head { padding-block: clamp(44px, 6vw, 90px) 0; }
.article-head h1 {
  font-size: clamp(34px, 5.6vw, 68px); font-weight: 300; letter-spacing: -.028em;
  line-height: 1.03; margin-block: 22px 24px; max-width: 20ch;
}
.article-head .lede { max-width: 60ch; }
.article-hero { margin-top: clamp(36px, 5vw, 60px); aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-3); }
.article-hero img { width: 100%; height: 100%; object-fit: cover; }

.article-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: clamp(32px, 5vw, 80px); align-items: start; padding-block: clamp(48px, 6vw, 84px); }
@media (max-width: 940px) { .article-body { grid-template-columns: 1fr; } }
/* A grid track is min-content wide by default, so the price table below could
   push the whole article wider than the screen. */
.article-body > * { min-width: 0; }

.prose { max-width: 68ch; font-size: 17px; line-height: 1.78; color: var(--ink-2); }
.prose > * + * { margin-top: 1.35em; }
.prose h2 { font-size: clamp(24px, 2.6vw, 34px); color: var(--ink); margin-top: 2em; line-height: 1.15; }
.prose h3 { font-size: clamp(19px, 1.8vw, 22px); color: var(--ink); margin-top: 1.7em; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--sea); text-decoration: none; border-bottom: 1px solid var(--line); transition: border-color .3s var(--ease), color .3s var(--ease); }
[data-theme="dark"] .prose a { color: var(--sea-2); }
.prose a:hover { color: var(--brass); border-color: var(--brass); }
.prose ul { display: grid; gap: .6em; }
.prose ul li { position: relative; padding-inline-start: 26px; }
.prose ul li::before {
  content: ""; position: absolute; inset-inline-start: 4px; top: .72em;
  width: 6px; height: 1px; background: var(--brass);
}
.prose blockquote {
  border-inline-start: 2px solid var(--brass); padding: 4px 0 4px 26px; margin-block: 1.8em;
  font-family: var(--display); font-size: clamp(20px, 2.2vw, 27px); font-weight: 300;
  line-height: 1.35; color: var(--ink); font-style: italic;
}
.prose figure { margin: 2.2em 0; }
.prose figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.prose figcaption { font-size: 12.5px; color: var(--muted); margin-top: 12px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.prose th, .prose td { text-align: start; padding: 13px 14px 13px 0; border-bottom: 1px solid var(--line); }
.prose th { font-family: var(--body); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.prose td strong { white-space: nowrap; }
/* Four columns of prices, and the figures must not break mid-number. On a phone
   that is simply wider than the screen, so the table scrolls in its own box
   instead of widening the article. It stays a full-width table above this. */
@media (max-width: 620px) {
  .prose table { display: block; overflow-x: auto; }
}

.article-aside { position: sticky; top: 108px; display: grid; gap: 26px; }
@media (max-width: 940px) { .article-aside { position: static; } }
.keyfacts { border-top: 2px solid var(--brass); background: var(--paper-2); padding: 24px 24px 26px; }
.keyfacts h2 { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-family: var(--body); font-weight: 600; margin-bottom: 18px; }
.keyfacts dl { display: grid; gap: 14px; margin: 0; }
.keyfacts dt { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.keyfacts dd { margin: 3px 0 0; font-family: var(--display); font-size: 19px; color: var(--ink); line-height: 1.25; }
.keyfacts dd small { font-family: var(--body); font-size: 13px; color: var(--muted); display: block; margin-top: 2px; letter-spacing: 0; text-transform: none; }

.article-foot { border-top: 1px solid var(--line); padding-block: clamp(40px, 5vw, 64px); }
.related h2 { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-family: var(--body); font-weight: 600; margin-bottom: 34px; }
.related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 700px) { .related-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Statistics band — elevated panel, brass rule, icon + numeral + sub-note
   ========================================================================== */
.statband {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--line); border-top: 2px solid var(--brass);
  box-shadow: var(--shadow);
}
/* lifts over the foot of the hero image on large screens */
.statband--float { margin-bottom: clamp(40px, 5vw, 76px); }
@media (min-width: 1081px) { .statband--float { margin-top: -52px; position: relative; z-index: 3; } }

.statband li {
  position: relative; padding: 34px 30px 32px; min-width: 0;
  border-inline-end: 1px solid var(--line-soft);
  transition: background-color .45s var(--ease);
}
.statband li::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: var(--brass); transform: scaleX(0); transform-origin: inline-start;
  transition: transform .5s var(--ease);
}
.statband li:hover { background: var(--paper-2); }
.statband li:hover::after { transform: scaleX(1); }
.statband li:last-child { border-inline-end: 0; }

.stat-ico { width: 19px; height: 19px; color: var(--brass); stroke: var(--brass); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 20px; }
.statband b {
  display: block; font-family: var(--display); font-weight: 300;
  font-size: clamp(32px, 3.6vw, 52px); letter-spacing: -.035em; line-height: 1;
  color: var(--sea); font-variant-numeric: lining-nums tabular-nums;
}
[data-theme="dark"] .statband b { color: var(--sea-2); }
.statband .stat-label { display: block; margin-top: 14px; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; }
.statband .stat-note { display: block; margin-top: 7px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* quieter variant for use inside a section rather than against an image */
.statband--plain { background: var(--paper-2); box-shadow: none; }

@media (max-width: 980px) {
  .statband { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statband li:nth-child(2n) { border-inline-end: 0; }
  .statband li:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
}
@media (max-width: 560px) {
  .statband { grid-template-columns: 1fr; }
  .statband li { border-inline-end: 0; padding: 26px 24px 24px; }
  .statband li:not(:last-child) { border-bottom: 1px solid var(--line-soft); }
  .stat-ico { margin-bottom: 14px; }
}

/* ---- unit rows with a layout drawing (AQUA ORGWAN) ---- */
.unit-row--media { grid-template-columns: 264px minmax(0, 1fr) minmax(0, 260px); }
.unit-plan { margin: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--paper-3); }
.unit-plan img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.unit-avail {
  font-family: var(--body); font-size: 10.5px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brass); margin-bottom: 12px;
}
.unit-avail b { font-size: 13px; }
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 6px; margin-inline-start: 9px;
  border-radius: 999px; font-size: 10px; letter-spacing: .04em;
  background: color-mix(in srgb, currentColor 14%, transparent);
}
@media (max-width: 900px) {
  .unit-row--media { grid-template-columns: 1fr; }
  .unit-plan { max-width: 340px; }
}

/* caption under a unit photograph / layout drawing */
.unit-plan figcaption {
  font-size: 12px; line-height: 1.5; color: var(--muted);
  padding: 10px 12px 12px; background: var(--paper-2);
}

/* unit code sits inside the detail column once a photo takes the first column */
.unit-main .unit-id { padding-top: 0; margin-bottom: 12px; }

/* a unit's media may be a single drawing or a carousel of photographs */
.unit-plan > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.unit-plan .pcard-media { aspect-ratio: 4 / 3; border-radius: 0; }
.unit-plan .pcard-slide img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.unit-plan:hover .pcard-nav, .unit-plan .pcard-nav:focus-visible { opacity: 1; }
.unit-plan .pcard-nav { width: 32px; height: 32px; }
.unit-plan .pcard-nav--prev { inset-inline-start: 8px; }
.unit-plan .pcard-nav--next { inset-inline-end: 8px; }
.unit-plan .pcard-dots { bottom: 10px; }

/* ---- Russian: Fraunces has no Cyrillic, so give headings a deliberate
       Cyrillic serif rather than an accidental fallback ---- */
:root:lang(ru) { --display: Georgia, "PT Serif", "Times New Roman", serif; }
:lang(ru) h1, :lang(ru) h2, :lang(ru) h3, :lang(ru) .statband b, :lang(ru) .price .now {
  font-weight: 400; letter-spacing: -.012em;
}
:lang(ru) .hero h1, :lang(ru) .page-head h1, :lang(ru) .article-head h1 { line-height: 1.06; }

/* ------------------------------------------------------------------ *
 * AQUA ORGWAN — project detail
 * ------------------------------------------------------------------ */

/* A full-bleed dark band. Used once, to break the run of pale sections and give
   the payment choice the weight it deserves. */
.band { padding: clamp(56px, 7vw, 96px) 0; }
.band--sea { background: var(--sea); color: var(--on-dark); }
.band--sea .eyebrow { color: var(--brass-2); }
.band--sea .eyebrow::before { background: var(--brass-2); }
.band--sea h2 { color: var(--on-dark); }
.band--sea .section-head { border-color: rgba(255, 255, 255, .16); }

/* Image beside text: the picture leads on wide screens, stacks above the copy
   on narrow ones. */
.editorial {
  display: grid; gap: clamp(24px, 3.4vw, 46px);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
}
.editorial--flip .editorial-art { order: 2; }
.editorial-art { position: relative; overflow: hidden; background: var(--paper-3); }
.editorial-art img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.editorial-body { display: flex; flex-direction: column; gap: 20px; }
.editorial-body .lede { max-width: none; }
@media (max-width: 860px) {
  .editorial { grid-template-columns: 1fr; }
  .editorial--flip .editorial-art { order: 0; }
}

/* Headline project figures: hairlines, not boxes, so the numerals carry it. */
.figgrid {
  list-style: none; margin-top: clamp(28px, 3.6vw, 46px);
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.figgrid li {
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 22px 20px 24px; display: flex; flex-direction: column; gap: 7px;
}
.figgrid b {
  font-family: var(--display); font-weight: 400; font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1; color: var(--sea); letter-spacing: -.02em;
}
.figgrid span {
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; line-height: 1.45;
}
@media (max-width: 960px) { .figgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .figgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Five types, one row: the set reads as a family rather than a wrapped grid. */

/* Payment routes, on the dark band */
.paygrid { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .paygrid { grid-template-columns: 1fr; } }
.paycard { border: 1px solid rgba(255, 255, 255, .18); padding: 28px 28px 30px; display: flex; flex-direction: column; }
.paycard--lead { border-color: var(--brass-2); background: rgba(255, 255, 255, .045); }
.paycard-opt { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-2); }
.paycard-figure {
  display: block; font-family: var(--display); font-size: clamp(40px, 4.6vw, 56px);
  line-height: 1; color: var(--brass-2); letter-spacing: -.03em; margin: 14px 0 12px;
}
.paycard h3 { font-size: 22px; margin-bottom: 10px; color: var(--on-dark); }
.paycard p { font-size: 14.5px; color: var(--on-dark-2); line-height: 1.65; }
.paycard-foot {
  margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: 12.5px; letter-spacing: .05em; color: var(--on-dark);
}

/* Floor plans: named tabs beat anonymous dots when each slide is a level. */
.plan-wrap { max-width: 720px; margin-inline: auto; }
.plan-tabs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 18px; }
.plan-tab {
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  font-family: var(--body); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; padding: 9px 14px; cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.plan-tab:hover { color: var(--ink); border-color: var(--brass); }
.plan-tab[aria-selected="true"] { background: var(--sea); border-color: var(--sea); color: var(--paper); }
.pcard-media--plan { aspect-ratio: 89 / 100; background: var(--paper); border: 1px solid var(--line); }
.pcard-media--plan::after { content: none; }
.pcard-media--plan .pcard-slide img { object-fit: contain; padding: 10px; }
.plan-legend { margin-top: 16px; font-size: 12.5px; color: var(--muted); text-align: center; line-height: 1.7; }

/* Travel times: the duration leads, the place follows. */
.loclist { list-style: none; border-top: 1px solid var(--line); }
.loclist li { display: flex; align-items: baseline; gap: 22px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.loc-time {
  flex: 0 0 108px; font-family: var(--display); font-size: 21px; color: var(--brass);
  letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums;
}
.loc-place { font-size: 15px; color: var(--ink); }
@media (max-width: 480px) { .loc-time { flex-basis: 88px; font-size: 18px; } }

/* In dark mode --sea is a light mint, so the band swaps to a dark surface, the
   same way .panel--sea already does. */
[data-theme="dark"] .band--sea { background: var(--paper-3); }
[data-theme="dark"] .band--sea h2 { color: var(--ink); }
[data-theme="dark"] .band--sea .section-head { border-color: var(--line); }
[data-theme="dark"] .paycard { border-color: var(--line); }
[data-theme="dark"] .paycard--lead { border-color: var(--brass); background: rgba(255, 255, 255, .03); }
[data-theme="dark"] .paycard h3 { color: var(--ink); }
[data-theme="dark"] .paycard p, [data-theme="dark"] .paycard-opt { color: var(--muted); }
[data-theme="dark"] .paycard-foot { color: var(--ink); border-top-color: var(--line); }

/* ---------- Unit page hero ----------
   The page head becomes a hero when there is a render worth showing behind it.
   Reuses .hero-media / .hero-scrim from the homepage so the treatment matches. */
.page-head--hero {
  position: relative; isolation: isolate; color: var(--on-dark);
  border-bottom: 0;
  padding-block: clamp(96px, 12vw, 190px) clamp(48px, 6vw, 84px);
}
.page-head--hero h1 { color: var(--on-dark); }
.page-head--hero .lede { color: var(--on-dark); max-width: 58ch; text-shadow: 0 1px 18px rgba(4, 26, 24, .55); }
.page-head--hero h1 { text-shadow: 0 2px 26px rgba(4, 26, 24, .45); }
.page-head--hero .crumbs { color: rgba(246, 241, 231, .68); }
.page-head--hero .crumbs a { color: rgba(246, 241, 231, .68); }
.page-head--hero .crumbs a:hover { color: var(--brass-2); }
.page-head--hero .spec {
  border-color: rgba(246, 241, 231, .28); color: var(--on-dark-2); background: rgba(4, 26, 24, .28);
}
.page-head--hero .spec b { color: var(--on-dark); }

/* The homepage scrim is tuned for a headline plus buttons; here the render is
   part of the point, so the veil is lighter and weighted to the lower left. */
.page-head--hero .hero-scrim {
  background:
    linear-gradient(180deg, rgba(4,26,24,.52) 0%, rgba(4,26,24,.10) 32%, rgba(4,26,24,.70) 76%, rgba(4,26,24,.90) 100%),
    linear-gradient(100deg, rgba(4,26,24,.74) 0%, rgba(4,26,24,.40) 42%, rgba(4,26,24,.06) 76%, transparent 100%);
}

/* A <select> takes the width of its widest option; cap it so a long label can
   never push the header tools past the viewport on a phone. */
.tool--select select { max-width: 9ch; }

/* Contact values wrap as a last resort, never as the first one. `anywhere`
   used to be set here on the row and the link together, which reads as "let the
   email wrap" but also zeroes the value's min-content contribution - that is
   what let the FAQ side panel's value track collapse to one character per line,
   and what snapped the email mid-word in the sales-office column whenever the
   column was a few pixels short. The order is now: fit, then stack (the row is
   laid out for that above), then shrink, and only then break. */
.contact-list a[href^="tel:"], .foot-grid a[href^="tel:"] { white-space: nowrap; }

/* Shrink before breaking. On a phone the FAQ panel is narrower than a whole
   email at body size, so the address scales with the panel rather than snapping
   in half. Where no ancestor is a container - the contact page's own list -
   100cqi falls back to the viewport, which is always wide enough to land on the
   16.5px cap, so this changes nothing there. 17 is the address's width-to-font-
   size ratio, with a little margin. */
.contact-list a[href^="mailto:"] { font-size: clamp(12.5px, 100cqi / 17, 16.5px); }

/* And break only if even that will not fit. break-word, not anywhere: it is
   `anywhere` that collapses a track to one character per line. */
.foot-grid li, .foot-grid a,
.contact-list li, .contact-list a { overflow-wrap: break-word; }

/* Unit types. One card per type: the cash price is what a buyer acts on, so it
   leads; the full price and the instalment terms sit under it in that order. */
.typegrid { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .typegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .typegrid { grid-template-columns: 1fr; } }

.typecard {
  border: 1px solid var(--line); border-top: 2px solid var(--sea);
  background: var(--paper-2); padding: 22px 22px 24px;
  display: flex; flex-direction: column;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.typecard:hover { border-color: var(--brass); box-shadow: var(--shadow); transform: translateY(-3px); }
.typecard-count {
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.typecard-count b { color: var(--ink); font-weight: 700; }
.typecard h3 {
  font-family: var(--display); font-weight: 400; font-size: 21px;
  line-height: 1.2; margin-top: 12px; letter-spacing: -.01em;
  /* "Studio" is one line where the others wrap to two; reserving both keeps the
     price rows on the same baseline across the row of cards. */
  min-height: 2.4em;
}
@media (max-width: 520px) { .typecard h3 { min-height: 0; } }
.typecard-area { font-size: 13.5px; color: var(--muted); margin-top: 6px; }
.typecard-from {
  margin-top: 20px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.typecard-price { margin-top: 7px; display: flex; flex-direction: column; gap: 5px; }
.typecard-price strong {
  font-family: var(--display); font-weight: 400; font-size: clamp(27px, 2.6vw, 33px);
  line-height: 1; color: var(--sea); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.typecard-was { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; font-size: 13px; }
.typecard-was s { color: var(--muted); text-decoration-thickness: 1px; font-variant-numeric: tabular-nums lining-nums; }
.typecard-was em {
  font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brass);
}

/* Instalment terms, as a small ledger at the foot of the card. */
.typecard-terms { margin-top: auto; padding-top: 18px; }
.typecard-terms > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--line);
}
.typecard-terms dt { font-size: 11.5px; letter-spacing: .08em; color: var(--muted); }
.typecard-terms dd {
  font-size: 14px; color: var(--ink); font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
}

.tablenote { font-size: 13.5px; color: var(--muted); line-height: 1.7; max-width: 78ch; margin-top: 18px; }

/* Honeypot: off-screen for people, irresistible to bots. Not display:none,
   which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------------ *
 * Lightbox — full-screen photo viewer
 * ------------------------------------------------------------------ */
.zoomable { cursor: zoom-in; }
.zoomable img { cursor: zoom-in; }
.zoomable img:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* Stop the page behind from scrolling while the viewer is open */
.lb-open, .lb-open body { overflow: hidden; }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(4, 26, 24, .94);
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 56px);
}
/* The backdrop is never animated: an entrance that starts at opacity 0 would
   leave the whole viewer invisible if the animation did not run. Only the
   content moves. */
.lightbox-stage { animation: lb-rise .24s var(--ease); }
@keyframes lb-rise { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .lightbox-stage { animation: none; } }

.lightbox-stage {
  margin: 0; max-width: 100%; max-height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.lightbox-stage img {
  max-width: 100%; max-height: calc(100vh - clamp(96px, 14vw, 168px));
  width: auto; height: auto; object-fit: contain; display: block;
  background: var(--sea-3);
}
.lightbox-stage figcaption {
  color: rgba(246, 241, 231, .78); font-size: 13px; line-height: 1.55;
  text-align: center; max-width: 68ch;
}

.lightbox-close, .lightbox-nav {
  position: absolute; z-index: 1;
  border: 1px solid rgba(246, 241, 231, .3); background: rgba(4, 26, 24, .5);
  color: var(--on-dark); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.lightbox-close:hover, .lightbox-nav:hover {
  background: rgba(246, 241, 231, .16); border-color: var(--on-dark);
}
.lightbox-close { inset: 18px 18px auto auto; width: 42px; height: 42px; }
.lightbox-close::before, .lightbox-close::after {
  content: ""; position: absolute; width: 17px; height: 1.5px; background: currentColor;
}
.lightbox-close::before { transform: rotate(45deg); }
.lightbox-close::after { transform: rotate(-45deg); }

.lightbox-nav { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; }
.lightbox-nav--prev { inset-inline-start: 14px; }
.lightbox-nav--next { inset-inline-end: 14px; }
[dir="rtl"] .lightbox-nav svg { transform: scaleX(-1); }

.lightbox-count {
  position: absolute; inset: auto 0 20px 0; text-align: center;
  color: rgba(246, 241, 231, .7);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
}

@media (max-width: 560px) {
  .lightbox-nav { width: 40px; height: 40px; }
  .lightbox-nav--prev { inset-inline-start: 6px; }
  .lightbox-nav--next { inset-inline-end: 6px; }
}

/* Opens the hero photograph, which is otherwise unreachable behind the scrim.
   Top-right: the bottom-right corner already holds the WhatsApp button and,
   on the homepage, the hero card. */
.hero-zoom {
  position: absolute; inset: 22px 22px auto auto; z-index: 3;
  width: 40px; height: 40px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(246, 241, 231, .34); background: rgba(4, 26, 24, .42);
  color: var(--on-dark); backdrop-filter: blur(2px);
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.hero-zoom:hover { background: rgba(246, 241, 231, .18); border-color: var(--on-dark); }
@media (max-width: 620px) { .hero-zoom { inset: 14px 14px auto auto; width: 36px; height: 36px; } }

/* ------------------------------------------------------------------ *
 * Payment choice (AQUA ORGWAN listings)
 * ------------------------------------------------------------------ */
.paypick {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line);
}
.paypick-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  font-family: var(--body); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; padding: 9px 14px; cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.paypick-btn:hover { color: var(--ink); border-color: var(--brass); }
.paypick-btn.is-on { background: var(--sea); border-color: var(--sea); color: var(--paper); }
.paypick-btn .pill {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  padding: 2px 7px; background: var(--paper-3); color: var(--muted);
}
.paypick-btn.is-on .pill { background: rgba(255, 255, 255, .16); color: var(--paper); }

/* The instalment view: deposit leads, the monthly figure sits under it. */
.price--plan { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.price--plan .paylabel {
  font-size: 10.5px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}
.price--plan .permonth { font-size: 13.5px; color: var(--ink); margin-top: 6px; }
.price--plan .permonth b {
  font-family: var(--display); font-weight: 400; font-size: 17px; color: var(--brass);
  font-variant-numeric: tabular-nums lining-nums;
}
@media (max-width: 860px) { .price--plan { align-items: flex-start; } }

/* ------------------------------------------------------------------ *
 * Brochure download
 * ------------------------------------------------------------------ */
.brochure {
  display: grid; gap: clamp(22px, 3vw, 42px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  align-items: start; margin-top: clamp(36px, 5vw, 60px);
  border: 1px solid var(--line); border-top: 2px solid var(--brass);
  background: var(--paper-2); padding: clamp(24px, 3.4vw, 40px);
}
@media (max-width: 860px) { .brochure { grid-template-columns: 1fr; } }
.brochure-copy h2 { font-size: clamp(22px, 2.6vw, 30px); margin-block: 12px 12px; }
.brochure-copy p { font-size: 14.5px; color: var(--muted); line-height: 1.7; max-width: 46ch; }
.brochure-form { display: flex; flex-direction: column; gap: 14px; }
.brochure-form .field { display: flex; flex-direction: column; gap: 6px; }
.brochure-form .label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.brochure-form input[type="text"], .brochure-form input[type="email"] {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-family: var(--body); font-size: 14.5px; padding: 11px 13px; width: 100%;
  transition: border-color .25s var(--ease);
}
.brochure-form input:focus { outline: none; border-color: var(--brass); }
.brochure-form button { align-self: flex-start; margin-top: 4px; }
.brochure-note { font-size: 12px; color: var(--muted); line-height: 1.6; }

/* ------------------------------------------------------------------ *
 * Construction updates
 * ------------------------------------------------------------------ */
.progress-entry { padding-block: clamp(26px, 3.6vw, 44px); border-top: 1px solid var(--line); }
.progress-entry:first-of-type { border-top: 0; padding-top: 0; }
.progress-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.progress-head time {
  font-family: var(--display); font-size: clamp(22px, 2.6vw, 30px);
  color: var(--sea); letter-spacing: -.01em;
}
.progress-count {
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.progress-count::after { content: " photos"; }
.progress-note { font-size: 15px; color: var(--muted); line-height: 1.7; max-width: 68ch; margin-bottom: 20px; }
.progress-shots { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.progress-shots figure { margin: 0; }
.progress-shots img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.progress-empty {
  font-size: 15.5px; color: var(--muted); line-height: 1.8; max-width: 62ch;
  padding: clamp(24px, 3.4vw, 40px); border: 1px dashed var(--line); background: var(--paper-2);
}

/* ------------------------------------------------------------------ *
 * Shortlist
 * ------------------------------------------------------------------ */
.shortlist-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-bottom: 20px; padding: 12px 16px;
  border: 1px solid var(--brass); background: var(--paper-3);
}
.shortlist-count {
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.shortlist-count b { font-size: 15px; color: var(--ink); }
.save-btn {
  margin-top: 12px; width: 34px; height: 34px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.save-btn:hover { color: var(--brass); border-color: var(--brass); }
.save-btn[aria-pressed="true"] { color: var(--brass); border-color: var(--brass); background: rgba(169,135,60,.12); }
.save-btn[aria-pressed="true"] svg { fill: currentColor; }
.unit-row[data-saved="true"] { background: rgba(169,135,60,.05); }

/* ------------------------------------------------------------------ *
 * Budget finder — sits above the listings
 * ------------------------------------------------------------------ */
.finder {
  border: 1px solid var(--line); border-top: 2px solid var(--sea);
  background: var(--paper-2); padding: clamp(22px, 3vw, 34px);
  margin-bottom: 28px;
}
.finder-head h2 { font-size: clamp(21px, 2.4vw, 28px); margin-block: 10px 10px; }
.finder-head p { font-size: 14px; color: var(--muted); line-height: 1.7; max-width: 66ch; }
.finder-controls {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-top: 22px;
}
.finder .paypick { margin: 0; padding: 0; border: 0; }
.budget-field { display: flex; flex-direction: column; gap: 7px; min-width: 220px; }
.budget-field .label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}
.budget-field input {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-family: var(--body); font-size: 15px; padding: 10px 12px; width: 100%;
  font-variant-numeric: tabular-nums lining-nums;
}
.budget-field input:focus { outline: none; border-color: var(--brass); }
.finder-result {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 14.5px; color: var(--ink); line-height: 1.65;
}

/* Units outside the budget drop out of the list; the type filter and the
   shortlist keep working independently of this. */
.unit-row[data-budget="out"] { display: none !important; }

/* ------------------------------------------------------------------ *
 * Resort section — mosaic and amenities
 * ------------------------------------------------------------------ */
.mosaic {
  display: grid; gap: 14px; margin-top: clamp(26px, 3.4vw, 40px);
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.mosaic figure { margin: 0; overflow: hidden; background: var(--paper-3); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease); }
.mosaic figure:hover img { transform: scale(1.04); }
.mosaic-lead { grid-row: span 2; }
.mosaic-lead img { aspect-ratio: 4 / 3; }
.mosaic figure:not(.mosaic-lead) img { aspect-ratio: 16 / 11; }
@media (max-width: 860px) {
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; }
  .mosaic-lead { grid-row: auto; grid-column: span 2; }
}

.amenities {
  list-style: none; display: grid; gap: 0; margin-top: clamp(26px, 3.4vw, 40px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
@media (max-width: 820px) { .amenities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .amenities { grid-template-columns: 1fr; } }
.amenity {
  display: flex; align-items: center; gap: 14px; padding: 20px 22px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 14.5px; color: var(--ink); line-height: 1.45;
}
.amenity svg { flex: none; color: var(--brass); }

/* ------------------------------------------------------------------ *
 * Why buy here — the investment case
 * ------------------------------------------------------------------ */
.investgrid {
  list-style: none; display: grid; gap: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(28px, 3.6vw, 44px);
  border-top: 1px solid var(--line);
}
@media (max-width: 900px) { .investgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .investgrid { grid-template-columns: 1fr; } }
.investgrid li {
  padding: 22px 24px 26px; border-inline-start: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.investgrid li:first-child { border-inline-start: 0; }
@media (max-width: 900px) {
  .investgrid li:nth-child(odd) { border-inline-start: 0; }
}
.invest-n {
  display: block; font-family: var(--display); font-size: 13px; font-weight: 400;
  color: var(--brass); letter-spacing: .08em; margin-bottom: 12px;
}
.investgrid h3 { font-size: 16.5px; font-weight: 400; line-height: 1.3; margin-bottom: 9px; }
.investgrid p { font-size: 13.5px; color: var(--muted); line-height: 1.6; }

.invest-service {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px; margin-top: clamp(26px, 3.4vw, 40px);
  border: 1px solid var(--line); border-inline-start: 2px solid var(--brass);
  background: var(--paper-2); padding: clamp(20px, 2.6vw, 30px);
}
.invest-service h3 { font-size: 19px; font-weight: 400; margin-bottom: 8px; }
.invest-service p { font-size: 14px; color: var(--muted); line-height: 1.65; max-width: 62ch; }

/* The homepage hero photograph puts the pool in its lower half, and the hero is
   wider than the source, so centring the crop cuts the water out. */
.hero .hero-media img { object-position: 50% 62%; }

/* Two ways to enquire about a unit: the form, or WhatsApp. */
.unit-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.unit-actions .btn { flex: 1 1 auto; justify-content: center; }
.btn--wa {
  display: inline-flex; align-items: center; gap: 8px;
  background: #1FA855; color: #fff; border: 1px solid #1FA855;
}
.btn--wa:hover { background: #178a45; border-color: #178a45; color: #fff; }
.btn--wa svg { flex: none; }
@media (max-width: 420px) { .unit-actions { flex-direction: column; } .unit-actions .btn { width: 100%; } }

/* A nightly rate reads as a rate, not a purchase price. */
.per-night {
  display: block; margin-top: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}

/* The jump link at the top of a long project page. The arrow nudges down on
   hover so it reads as "further down this page", not "somewhere else". */
.btn--jump .jump-arw { transition: transform .35s var(--ease); }
.btn--jump:hover .jump-arw { transform: translateY(3px); }
@media (prefers-reduced-motion: reduce) { .btn--jump:hover .jump-arw { transform: none; } }

/* ---------------------------------------------------------------- *
 * Project & office locations   (projects.html #locations)
 *
 * Every development sits in the same stretch of coast, so the section
 * opens with a plain orientation strip — El Gouna, Al Ahyaa, Hurghada —
 * rather than a map: the site loads no map library and no third-party
 * embed, and the company has not published exact pins. Each card links
 * out to a Google Maps search instead. Generated by
 * scripts/build-locations.py.
 * ---------------------------------------------------------------- */
.loc-strip {
  display: grid; align-items: center; gap: 0 14px;
  grid-template-columns: auto 1fr auto 1fr auto;
  border: 1px solid var(--line); background: var(--paper-2);
  padding: 18px clamp(16px, 3vw, 30px); margin-bottom: 26px;
}
.loc-stop { display: flex; align-items: center; gap: 10px; min-width: 0; }
.loc-stop b {
  font-family: var(--display); font-weight: 500; font-size: 15px;
  color: var(--ink); white-space: nowrap;
}
.loc-stop span { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.loc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.loc-stop--here .loc-dot {
  width: 12px; height: 12px; background: var(--brass);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brass) 22%, transparent);
}
.loc-leg { height: 1px; background: var(--line); min-width: 20px; }

/* Stacked on a phone: the connecting legs turn vertical so the order
   still reads north to south. */
@media (max-width: 720px) {
  .loc-strip { grid-template-columns: 1fr; justify-items: start; gap: 0; }
  .loc-leg { width: 1px; height: 18px; min-width: 0; margin-inline-start: 5px; }
  .loc-stop--here .loc-leg { margin-inline-start: 7px; }
}

/* The enquiry form beside the office details. The two columns are deliberately
   uneven, so this cannot use the intrinsic auto-fit the rest of the site does;
   it collapses on a breakpoint instead. Without that the narrow second column
   kept its share of a phone screen and pushed the page sideways. */
.contact-grid {
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(32px, 5vw, 72px);
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* FAQ: the questions beside a standing enquiry panel. The panel carries a
   contact list, so the column has to stay wide enough for a whole email once
   the panel's own padding is taken off, and it collapses at the same width the
   contact page does rather than being squeezed. It was 300px and set inline on
   the page, which left no breakpoint at all - the panel was still 190px wide,
   two columns, on a 320px phone. */
.faq-grid {
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: clamp(32px, 5vw, 72px);
}
/* minmax(0, ...), not 1fr: stacked, the panel and the questions share one
   track, and a bare 1fr would take its floor from the panel's min-content -
   the width of a whole email plus the panel's padding - and push a 320px
   phone sideways by 46px. */
@media (max-width: 860px) { .faq-grid { grid-template-columns: minmax(0, 1fr); } }

/* Full panel padding would spend 104px of that 360px column on air. The
   container is what lets the address below scale on a narrow phone; this panel
   is a fixed grid track, never sized from its own contents, so containing it
   costs nothing. */
.panel:has(.contact-list) { padding: clamp(24px, 3vw, 36px); container-type: inline-size; }

.loc-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}
.loc-card {
  background: var(--surface); border: 1px solid var(--line);
  padding: 24px 22px; display: flex; flex-direction: column; gap: 12px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease),
              border-color .5s var(--ease);
}
.loc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); border-color: var(--brass); }
.loc-head { display: flex; align-items: flex-start; gap: 11px; }
.loc-head > svg { flex: none; color: var(--brass); margin-top: 3px; }
.loc-card h3 {
  font-family: var(--display); font-weight: 500;
  font-size: 19px; line-height: 1.25; min-width: 0; overflow-wrap: break-word;
}
.loc-area {
  color: var(--muted); font-size: 14px; line-height: 1.65;
  flex: 1 1 auto; overflow-wrap: break-word;
}
/* Touch target stays at 44px even though the label is a small caps button. */
.loc-card .btn { align-self: flex-start; min-height: 44px; }

/* The office is the one address a visitor may actually travel to, so it sits
   below the grid as its own band, carrying the brass fill the rest of the site
   reserves for emphasis. Keeping it out of the grid also stops a seventh card
   from stranding itself alone on a fourth row. */
.loc-card--office {
  border-color: var(--brass); background: var(--brass-soft); margin-top: 22px;
}
.loc-card--office:hover { border-color: var(--brass-2); }
.loc-card--office .loc-area { color: var(--ink-2); }
.loc-card--office .loc-addr { color: var(--ink-2); font-size: 14px; line-height: 1.65; }

@media (min-width: 780px) {
  .loc-card--office {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; column-gap: clamp(24px, 4vw, 56px); row-gap: 8px;
    padding: 28px 30px;
  }
  .loc-card--office > :not(.btn) { grid-column: 1; }
  .loc-card--office .btn { grid-column: 2; grid-row: 1 / -1; align-self: center; }
}

@media (max-width: 560px) {
  .loc-card .btn { align-self: stretch; width: 100%; }
}

/* The same pair of actions on the contact page, beside the office details. */
.loc-cta .btn { min-height: 44px; }
@media (max-width: 560px) {
  .loc-cta { flex-direction: column; align-items: stretch; }
  .loc-cta .btn { width: 100%; }
}