/* Demo website: Sirocco Residences / Layla Roshan (fictional).

   Third visual register in the demo set. The plumber is utilitarian light, the
   gym is brutalist dark, this is editorial luxury: warm neutrals, a serif
   display face, wide margins, images framed rather than filled.

   The display face is the system serif stack — ui-serif resolves to New York on
   Apple platforms and Georgia elsewhere. It costs zero font bytes and still
   reads as expensive, which is the whole argument the page is making.

   Still no JavaScript: floor-plan tabs are radio inputs and :has(), the
   schedule and reveals are animation-timeline, all behind @supports and all
   switched off under prefers-reduced-motion.

   Prefixed .re- so it cannot collide with the other demos on this origin. */

*, *::before, *::after { box-sizing: border-box; }

@property --re-n { syntax: "<integer>"; initial-value: 0; inherits: false; }

:root {
  --re-bone: #f6f3ee;
  --re-paper: #fffdfa;
  --re-sand: #ebe5db;
  --re-ink: #1d1b17;
  --re-body: #4a4640;
  --re-muted: #8b8479;
  --re-line: #ddd5c8;
  --re-brass: #c9a24a;
  --re-brass-deep: #a5822f;
  --re-serif: ui-serif, "New York", Georgia, "Iowan Old Style", "Palatino Linotype", serif;
}

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

body {
  margin: 0;
  background: var(--re-bone);
  color: var(--re-body);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.72;
  overflow-x: hidden;
}

p { margin: 0 0 1.1rem; }
a { color: var(--re-brass-deep); }
:focus-visible { outline: 2px solid var(--re-brass-deep); outline-offset: 3px; }

.re-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.re-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--re-ink); color: var(--re-bone); padding: .85rem 1.3rem;
  font-weight: 700; text-decoration: none;
}
.re-skip:focus { left: 0; }

.re-wrap { width: min(1220px, 100% - 2.8rem); margin-inline: auto; }
.re-narrow { width: min(720px, 100% - 2.8rem); }

/* ------------------------------------------------------------- typography */
.re-eyebrow {
  font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--re-brass-deep); margin: 0 0 1rem;
}
.re-h2 {
  font-family: var(--re-serif); font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.12;
  letter-spacing: -.015em; color: var(--re-ink); margin: 0 0 1.1rem;
}
.re-intro { color: var(--re-muted); max-width: 62ch; margin-bottom: 3rem; }
.re-body { color: var(--re-body); max-width: 58ch; }
.re-muted { color: var(--re-muted); font-size: .94rem; max-width: 58ch; }
.re-note { color: var(--re-muted); font-size: .84rem; margin-top: 2rem; }
.re-inline-link {
  font-family: var(--re-serif); font-size: 1.35rem; color: var(--re-ink);
  text-decoration: none; border-bottom: 1px solid var(--re-brass);
  display: inline-block; padding-block: .5rem;
}

/* --------------------------------------------------------- scroll progress */
.re-progress {
  position: fixed; inset-block-start: 0; inset-inline-start: 0; height: 2px;
  width: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: var(--re-brass); z-index: 60;
}
@supports (animation-timeline: scroll()) {
  .re-progress { animation: re-progress linear; animation-timeline: scroll(root block); }
}
@keyframes re-progress { to { transform: scaleX(1); } }

/* ----------------------------------------------------------------- chrome */
.re-demobar {
  position: sticky; top: 0; z-index: 50;
  background: var(--re-ink); color: #cfc8bb; font-size: .76rem;
}
.re-demobar-in {
  width: min(1220px, 100% - 1.5rem); margin-inline: auto;
  display: flex; align-items: center; justify-content: center; text-align: center;
  gap: .3rem .9rem; flex-wrap: wrap; padding: .45rem 0; line-height: 1.35;
}
.re-demobar p { margin: 0; }
.re-demobar strong { color: #fff; font-weight: 600; }
.re-demobar span { opacity: .6; }
.re-demobar a {
  color: var(--re-brass); font-weight: 700; text-decoration: none;
  white-space: nowrap; padding-block: .78rem; border-bottom: 1px solid rgba(201,162,74,.5);
}

.re-head {
  position: sticky; top: 0; z-index: 45;
  background: rgba(246,243,238,.9); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--re-line);
}
.re-head-in { display: flex; align-items: center; gap: 1.6rem; padding: .8rem 0; }
.re-brand { text-decoration: none; display: flex; flex-direction: column; min-height: 48px; justify-content: center; }
.re-brand-name {
  font-family: var(--re-serif); font-size: 1.15rem; color: var(--re-ink); line-height: 1.1;
}
.re-brand-sub {
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--re-muted);
}
.re-nav { display: none; gap: 1.7rem; margin-inline-start: auto; }
.re-nav a {
  color: var(--re-body); text-decoration: none; font-size: .84rem;
  letter-spacing: .04em; padding-block: .9rem; transition: color .2s;
}
.re-nav a:hover { color: var(--re-brass-deep); }
.re-head-cta {
  display: none; align-items: center; min-height: 44px; padding: .55rem 1.2rem;
  border: 1px solid var(--re-ink); color: var(--re-ink); text-decoration: none;
  font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  transition: background-color .2s, color .2s;
}
.re-head-cta:hover { background: var(--re-ink); color: var(--re-bone); }

/* ------------------------------------------------------------ image slots */
.re-shot {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: var(--re-ratio, 4 / 3); background: var(--re-sand);
}
.re-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.re-shot-empty {
  display: grid; place-content: center; gap: .5rem; text-align: center;
  background:
    repeating-linear-gradient(135deg, rgba(29,27,23,.035) 0 14px, transparent 14px 28px),
    var(--re-sand);
  border: 1px solid var(--re-line);
}
.re-shot-label {
  font-family: var(--re-serif); color: var(--re-ink); font-size: 1rem; padding-inline: 1.2rem;
}
.re-shot-hint {
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--re-brass-deep);
}

/* ------------------------------------------------------------------- hero */
.re-hero { position: relative; }
.re-hero-media { position: relative; }
.re-shot-hero { aspect-ratio: 16 / 9; }
.re-hero-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(29,27,23,.18) 0%, transparent 38%, rgba(29,27,23,.55) 100%);
}
/* The copy block overlaps the image but keeps its own bone ground. Dark text
   laid directly over a photograph is a gamble on a photograph nobody has taken
   yet — this way the overlap still reads as editorial and the text stays
   legible whatever eventually lands in the slot. */
.re-hero-in {
  position: relative; margin-top: -7rem; padding: 2.8rem 2.4rem 3.5rem;
  background: var(--re-bone);
  width: min(1220px, 100% - 2.8rem);
}
.re-title {
  font-family: var(--re-serif); font-weight: 400; margin: 0 0 1.2rem;
  font-size: clamp(3.2rem, 11vw, 7.5rem); line-height: .95; letter-spacing: -.03em;
  color: var(--re-ink);
}
.re-title span, .re-title em { display: block; }
.re-title em { font-style: italic; color: var(--re-brass-deep); }
.re-hero .re-eyebrow { color: var(--re-ink); }
.re-lede { color: var(--re-body); font-size: 1.1rem; max-width: 50ch; margin-bottom: 2rem; }
.re-cta-row { display: flex; flex-wrap: wrap; gap: .8rem; }

.re-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: .85rem 1.8rem; text-decoration: none;
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--re-ink); cursor: pointer; font-family: inherit;
  transition: background-color .2s, color .2s;
}
.re-btn-solid { background: var(--re-ink); color: var(--re-bone); }
.re-btn-solid:hover { background: var(--re-brass-deep); border-color: var(--re-brass-deep); }
.re-btn-line { background: transparent; color: var(--re-ink); }
.re-btn-line:hover { background: var(--re-ink); color: var(--re-bone); }

/* ------------------------------------------------------------------ facts */
.re-facts { border-block: 1px solid var(--re-line); background: var(--re-paper); }
.re-facts dl {
  margin: 0; display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.re-facts div {
  padding: 1.6rem .6rem; text-align: center;
  border-inline-start: 1px solid var(--re-line);
}
.re-facts div:first-child { border-inline-start: 0; }
.re-facts dt {
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--re-muted); margin-bottom: .45rem;
}
.re-facts dd {
  margin: 0; font-family: var(--re-serif); font-size: 1.5rem; color: var(--re-ink); line-height: 1;
}

/* --------------------------------------------------------------- sections */
.re-section { padding: 5.5rem 0; }
.re-alt { background: var(--re-paper); }
.re-dark { background: var(--re-ink); color: #cdc6b9; }
.re-dark .re-h2 { color: var(--re-bone); }
.re-dark .re-eyebrow { color: var(--re-brass); }
.re-dark .re-intro { color: #a49c8f; }
.re-dark .re-note { color: #8d857a; }

.re-split { display: grid; gap: 3.5rem; align-items: start; }
.re-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.re-points li { display: grid; gap: .3rem; padding-top: 1.3rem; border-top: 1px solid var(--re-line); }
.re-points strong { font-family: var(--re-serif); font-size: 1.15rem; font-weight: 400; color: var(--re-ink); }
.re-points span { font-size: .94rem; color: var(--re-muted); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .re-reveal, .re-points li, .re-milestone {
      animation: re-reveal linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 24%;
    }
  }
}
@keyframes re-reveal { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- gallery */
.re-gallery { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.re-gal-item { margin: 0; }
.re-gal-item figcaption {
  margin-top: .7rem; font-size: .78rem; letter-spacing: .06em;
  color: var(--re-muted); text-transform: uppercase;
}
.re-gal-item:has(.re-shot-empty) figcaption { display: none; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .re-shot-parallax img {
      scale: 1.12;
      animation: re-parallax linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes re-parallax { from { translate: 0 -4%; } to { translate: 0 4%; } }

/* ----------------------------------------------------- floor plan selector */
.re-plans { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.re-plan-tabs {
  display: grid; gap: 0; margin-bottom: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border: 1px solid var(--re-line);
}
.re-plan-tabs label {
  display: flex; flex-direction: column; gap: .2rem; justify-content: center;
  min-height: 76px; padding: 1rem 1.2rem; cursor: pointer;
  border-inline-start: 1px solid var(--re-line);
  background: var(--re-paper); transition: background-color .2s, color .2s;
}
.re-plan-tabs label:first-of-type { border-inline-start: 0; }
.re-plan-tabs strong {
  font-family: var(--re-serif); font-size: 1.08rem; font-weight: 400; color: var(--re-ink);
}
.re-plan-tabs span { font-size: .78rem; color: var(--re-muted); }
.re-plan-tabs label:hover { background: var(--re-sand); }

.re-plan-panel { display: none; }
.re-plans:has(#re-a:checked) [data-plan="a"],
.re-plans:has(#re-b:checked) [data-plan="b"],
.re-plans:has(#re-c:checked) [data-plan="c"],
.re-plans:has(#re-p:checked) [data-plan="p"] { display: grid; }

.re-plans:has(#re-a:checked) label[for="re-a"],
.re-plans:has(#re-b:checked) label[for="re-b"],
.re-plans:has(#re-c:checked) label[for="re-c"],
.re-plans:has(#re-p:checked) label[for="re-p"] { background: var(--re-ink); }
.re-plans:has(#re-a:checked) label[for="re-a"] strong,
.re-plans:has(#re-b:checked) label[for="re-b"] strong,
.re-plans:has(#re-c:checked) label[for="re-c"] strong { color: var(--re-bone); }
.re-plans:has(#re-p:checked) label[for="re-p"] strong { color: var(--re-bone); }
.re-plans:has(#re-a:checked) label[for="re-a"] span,
.re-plans:has(#re-b:checked) label[for="re-b"] span,
.re-plans:has(#re-c:checked) label[for="re-c"] span,
.re-plans:has(#re-p:checked) label[for="re-p"] span { color: var(--re-brass); }

/* The radio is visually hidden, so the ring has to be drawn on the label. */
.re-plans:has(#re-a:focus-visible) label[for="re-a"],
.re-plans:has(#re-b:focus-visible) label[for="re-b"],
.re-plans:has(#re-c:focus-visible) label[for="re-c"],
.re-plans:has(#re-p:focus-visible) label[for="re-p"] {
  outline: 2px solid var(--re-brass-deep); outline-offset: -3px;
}

.re-plan-panel { gap: 3rem; align-items: start; animation: re-fade .3s ease both; }
@keyframes re-fade { from { opacity: 0; transform: translateY(10px); } }
.re-plan-info h3 {
  font-family: var(--re-serif); font-weight: 400; font-size: 1.9rem;
  color: var(--re-ink); margin: 0 0 .3rem; line-height: 1.15;
}
.re-plan-price {
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--re-brass-deep); margin-bottom: 1.6rem;
}
.re-plan-meta { margin: 0 0 1.6rem; display: grid; gap: .7rem; }
.re-plan-meta div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-bottom: .7rem; border-bottom: 1px solid var(--re-line);
}
.re-plan-meta dt { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--re-muted); }
.re-plan-meta dd { margin: 0; color: var(--re-ink); font-size: .94rem; text-align: end; }
.re-plan-spec { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .5rem; }
.re-plan-spec li { position: relative; padding-inline-start: 1.3rem; font-size: .94rem; }
.re-plan-spec li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .68em;
  width: 6px; height: 6px; background: var(--re-brass);
}

/* ---------------------------------------------------------- payment plan */
.re-schedule { list-style: none; margin: 0 0 2.5rem; padding: 0; counter-reset: none; }
.re-milestone {
  display: grid; gap: .2rem 1.4rem; align-items: center;
  grid-template-columns: auto 1fr auto;
  padding: 1.4rem 0; border-bottom: 1px solid rgba(255,255,255,.12);
}
.re-milestone:first-child { border-top: 1px solid rgba(255,255,255,.12); }
.re-ms-pct {
  font-family: var(--re-serif); font-size: 2rem; color: var(--re-brass);
  line-height: 1; min-width: 3.6rem;
}
.re-ms-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.re-ms-body strong { color: var(--re-bone); font-weight: 600; font-size: 1rem; }
.re-ms-when { font-size: .82rem; color: #a49c8f; letter-spacing: .06em; }
.re-ms-note { font-size: .8rem; color: #8d857a; }
.re-ms-amount {
  font-family: var(--re-serif); font-size: 1.15rem; color: var(--re-bone);
  white-space: nowrap; text-align: end;
}

.re-extras { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.re-extras div { padding: 1.3rem 0 0; border-top: 1px solid rgba(255,255,255,.12); }
.re-extras dt {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: #8d857a; margin-bottom: .35rem;
}
.re-extras dd { margin: 0; color: var(--re-bone); font-size: .96rem; }

/* --------------------------------------------------------------- location */
.re-places { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 0; }
.re-places li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .85rem 0; border-bottom: 1px solid var(--re-line); font-size: .95rem;
}
.re-places li span:last-child { color: var(--re-muted); white-space: nowrap; }

/* ------------------------------------------------------------------ agent */
.re-creds { list-style: none; margin: 1.6rem 0; padding: 0; display: grid; gap: .5rem; }
.re-creds li { position: relative; padding-inline-start: 1.3rem; font-size: .93rem; color: var(--re-body); }
.re-creds li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .68em;
  width: 6px; height: 6px; background: var(--re-brass);
}

/* -------------------------------------------------------------------- faq */
.re-faq { display: grid; }
.re-faq details { border-bottom: 1px solid var(--re-line); }
.re-faq details:first-child { border-top: 1px solid var(--re-line); }
.re-faq summary {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  justify-content: space-between; gap: 1.2rem; min-height: 60px; padding: 1.2rem 0;
  font-family: var(--re-serif); font-size: 1.15rem; color: var(--re-ink);
}
.re-faq summary::-webkit-details-marker { display: none; }
.re-faq summary i { flex: none; position: relative; width: 13px; height: 13px; }
.re-faq summary i::before, .re-faq summary i::after {
  content: ""; position: absolute; background: var(--re-brass-deep); transition: transform .22s;
}
.re-faq summary i::before { inset-block-start: 6px; inset-inline: 0; height: 1px; }
.re-faq summary i::after { inset-inline-start: 6px; inset-block: 0; width: 1px; }
.re-faq details[open] summary i::after { transform: scaleY(0); }
.re-faq details div { padding: 0 0 1.4rem; }
.re-faq details p { margin: 0; color: var(--re-muted); font-size: .96rem; max-width: 68ch; }

/* ---------------------------------------------------------------- enquire */
.re-enquire { padding: 5.5rem 0 6rem; background: var(--re-paper); border-top: 1px solid var(--re-line); }
.re-form { display: grid; gap: 1.2rem; grid-template-columns: 1fr 1fr; margin-top: 2.4rem; }
.re-field { display: grid; gap: .45rem; margin: 0; }
.re-field-wide, .re-btn-submit { grid-column: 1 / -1; }
.re-field label {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--re-muted);
}
.re-field input, .re-field textarea, .re-field select {
  font: inherit; font-size: 16px;   /* 16px keeps iOS from zooming on focus */
  color: var(--re-ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--re-line); border-radius: 0;
  padding: .7rem 0; min-height: 50px; width: 100%;
}
.re-field textarea { min-height: 92px; resize: vertical; }
.re-field select { appearance: none; }
.re-field input:focus, .re-field textarea:focus, .re-field select:focus {
  border-bottom-color: var(--re-brass-deep); outline: none;
}
.re-reassure { color: var(--re-muted); font-size: .86rem; margin-top: 1.3rem; }

/* ----------------------------------------------------------------- footer */
.re-foot { background: var(--re-ink); color: #a49c8f; padding: 3.6rem 0 0; font-size: .92rem; }
.re-foot-in { display: grid; gap: 2.4rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.re-foot .re-brand-name { color: var(--re-bone); display: block; margin-bottom: .8rem; }
.re-foot h3 {
  color: var(--re-bone); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; margin: 0 0 .9rem; font-weight: 600;
}
.re-foot p { margin: 0 0 .45rem; }
.re-foot a { color: var(--re-brass); padding-block: .8rem; display: inline-block; }
.re-licence { color: #8d857a; font-size: .84rem; }
.re-hours, .re-foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.re-hours li { display: flex; justify-content: space-between; gap: 1rem; font-size: .87rem; }
.re-foot-bottom {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 3rem; padding: 1.3rem 0;
  font-size: .82rem; color: #8d857a;
}
.re-foot-bottom p { margin: 0; }

/* ------------------------------------------------------------- responsive */
@media (min-width: 820px) {
  .re-nav { display: flex; }
  .re-head-cta { display: inline-flex; }
  .re-split { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .re-split-narrow { grid-template-columns: .8fr 1.2fr; }
  .re-plan-panel { grid-template-columns: 1.1fr .9fr; }
  .re-gallery { grid-template-columns: repeat(4, 1fr); }
  .re-gal-tall { grid-row: span 2; grid-column: span 2; }
  .re-gal-wide { grid-column: span 2; }
  .re-shot-hero { aspect-ratio: 21 / 9; }
}
@media (max-width: 819px) {
  .re-hero-in { margin-top: -2.4rem; padding: 2rem 1.4rem 2.6rem; }
  .re-cta-row .re-btn { width: 100%; }
  .re-form { grid-template-columns: 1fr; }
  .re-section { padding: 3.6rem 0; }
  .re-milestone { grid-template-columns: auto 1fr; }
  .re-ms-amount { grid-column: 2; text-align: start; font-size: 1rem; }
  .re-facts div { border-inline-start: 0; border-top: 1px solid var(--re-line); }
}
@media (max-width: 620px) {
  .re-demobar span { display: none; }
}

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