@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css";
@import "https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;1,9..144,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap";

:root {
  --ink: #1c1e21;
  --ink-2: #44474d;
  --ink-3: #71757e;
  --ink-4: #a1a5ae;
  --cream: #f8f5f0;
  --cream-2: #f0ebe3;
  --cream-3: #e2dbd0;
  --terra: #b85a3f;
  --terra-hover: #a04e36;
  --terra-muted: rgba(184,90,63,0.08);
  --white: #ffffff;
  --content: 1080px;
  --narrow: 680px;
  --serif: "Fraunces", "Georgia", serif;
  --sans: "Plus Jakarta Sans", system-ui, sans-serif;
}

/* ── Base ── */
* { margin: 0; }
body {
  font-family: var(--sans); color: var(--ink); background: var(--cream);
  line-height: 1.65; -webkit-font-smoothing: antialiased;
}
h1, h2 { font-family: var(--serif); font-weight: 400; line-height: 1.2; text-wrap: balance; }
h3 { font-weight: 600; line-height: 1.25; font-size: 1.125rem; }
h1 { font-size: clamp(2.6rem, 5.5vw, 3.8rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 3.8vw, 2.6rem); }
p { color: var(--ink-2); }
a { color: var(--terra); }
img { display: block; max-inline-size: 100%; block-size: auto; }

/* ── Fade-in on scroll ── */
@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
main > section { animation: rise 0.6s var(--ease-3) both; }
main > section:nth-child(2) { animation-delay: 0.08s; }
main > section:nth-child(3) { animation-delay: 0.16s; }
main > section:nth-child(4) { animation-delay: 0.24s; }
main > section:nth-child(5) { animation-delay: 0.32s; }

/* ── Header ── */
body > header {
  position: sticky; inset-block-start: 0; z-index: 100;
  background: rgba(248,245,240,0.9); backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--cream-3);
}
body > header > nav {
  max-inline-size: var(--content); margin-inline: auto;
  padding-inline: var(--size-5); block-size: 56px;
  display: flex; align-items: center; justify-content: space-between;
}
body > header [aria-label="Home"] {
  font-family: var(--serif); font-size: 1.25rem; color: var(--ink);
  text-decoration: none;
}
body > header [aria-label="Home"] span { color: var(--terra); }
body > header ul {
  display: flex; gap: var(--size-5); list-style: none; padding: 0;
  margin: 0; align-items: center;
}
body > header ul a {
  text-decoration: none; color: var(--ink-3); font-size: 0.8125rem;
  font-weight: 500; letter-spacing: 0.02em; transition: color 0.15s;
}
body > header ul a:hover,
body > header ul a[aria-current="page"] { color: var(--ink); }
body > header ul a[role="button"] {
  background: var(--terra); color: var(--cream); padding: 7px 18px;
  border-radius: 100px; font-size: 0.8125rem; font-weight: 600;
  transition: background 0.15s;
}
body > header ul a[role="button"]:hover { background: var(--terra-hover); color: var(--cream); }
body > header button[aria-label="Menu"] {
  display: none; background: none; border: none; cursor: pointer; color: var(--ink);
  padding: 4px;
}
@media (width < 768px) {
  body > header ul {
    display: none; position: absolute; inset-block-start: 56px; inset-inline: 0;
    flex-direction: column; background: var(--cream); padding: var(--size-5);
    border-block-end: 1px solid var(--cream-3); gap: var(--size-3);
  }
  body > header ul.open { display: flex; }
  body > header button[aria-label="Menu"] { display: block; }
}

/* ── Buttons ── */
a[role="button"], button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 30px; border-radius: 100px;
  font-size: 0.875rem; font-weight: 600; font-family: var(--sans);
  text-decoration: none; border: none; cursor: pointer;
  background: var(--terra); color: var(--cream);
  transition: all 0.2s var(--ease-2);
  letter-spacing: 0.01em;
}
a[role="button"]:hover, button[type="submit"]:hover {
  background: var(--terra-hover);
  box-shadow: 0 6px 20px rgba(184,90,63,0.2);
  transform: translateY(-1px);
}
a[role="button"][data-variant="outline"] {
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--cream-3);
}
a[role="button"][data-variant="outline"]:hover {
  border-color: var(--ink-3); background: transparent; box-shadow: none;
  transform: none;
}

/* ── HERO ── */
[aria-labelledby="hero"] {
  max-inline-size: var(--content); margin-inline: auto;
  padding: var(--size-9) var(--size-5) var(--size-8);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-8);
  align-items: start;
}
[aria-labelledby="hero"] > div:first-child > p:first-child {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--terra); margin-block-end: var(--size-3);
}
[aria-labelledby="hero"] h1 { margin-block-end: var(--size-4); }
[aria-labelledby="hero"] h1 em { font-style: italic; color: var(--terra); }
[aria-labelledby="hero"] > div:first-child > p:nth-child(3) {
  font-size: 1.0625rem; line-height: 1.75; margin-block-end: var(--size-7);
  max-inline-size: 34em;
}
[aria-labelledby="hero"] nav { display: flex; gap: var(--size-3); flex-wrap: wrap; }

/* Hero images — offset duo */
[data-hero-images] {
  display: grid; grid-template-columns: 1fr 0.7fr; gap: var(--size-3);
  align-items: end;
}
[data-hero-images] figure:first-child img {
  aspect-ratio: 3/4; object-fit: cover; border-radius: 12px;
}
[data-hero-images] figure:last-child img {
  aspect-ratio: 1/1; object-fit: cover; border-radius: 12px;
}
[data-hero-images] figure:last-child {
  transform: translateY(-2rem);
}

@media (width < 768px) {
  [aria-labelledby="hero"] { grid-template-columns: 1fr; gap: var(--size-6); padding-block: var(--size-7); }
  [data-hero-images] { max-inline-size: 480px; }
  [data-hero-images] figure:last-child { transform: translateY(-1rem); }
}

/* ── TRUST BAR ── */
[aria-label="Trust indicators"] {
  border-block: 1px solid var(--cream-3);
  padding: var(--size-6) var(--size-5);
}
[aria-label="Trust indicators"] dl {
  max-inline-size: var(--content); margin-inline: auto;
  display: flex; justify-content: center; gap: var(--size-9); flex-wrap: wrap;
  text-align: center;
}
[aria-label="Trust indicators"] dt {
  font-size: 0.75rem; color: var(--ink-3); margin-block-start: 2px;
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500;
}
[aria-label="Trust indicators"] dd {
  font-family: var(--serif); font-size: 2.2rem; color: var(--ink);
  margin: 0; line-height: 1;
}

/* ── PROBLEM SECTION ── */
[aria-labelledby="problem"] {
  background: var(--ink); color: var(--cream);
  padding: var(--size-9) var(--size-5);
}
[data-split] {
  max-inline-size: var(--content); margin-inline: auto;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--size-9);
  align-items: start;
}
[data-split] h2 { color: var(--cream); font-size: clamp(1.6rem, 3vw, 2.2rem); }
[data-split] p { color: var(--ink-4); font-size: 1.0625rem; line-height: 1.8; margin-block-end: var(--size-4); }
@media (width < 768px) {
  [data-split] { grid-template-columns: 1fr; gap: var(--size-5); }
}

/* ── HOW IT WORKS ── */
[aria-labelledby="how"] {
  padding: var(--size-9) var(--size-5);
}
[aria-labelledby="how"] > header {
  max-inline-size: var(--content); margin-inline: auto;
  margin-block-end: var(--size-7);
}
[aria-labelledby="how"] > header h2 { margin-block-end: 0; }
[data-steps] {
  max-inline-size: var(--content); margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  list-style: none; padding: 0; counter-reset: step;
}
[data-steps] li {
  counter-increment: step; padding: var(--size-6) var(--size-5);
  border-inline-start: 1px solid var(--cream-3);
}
[data-steps] li:first-child { border-inline-start: none; padding-inline-start: 0; }
[data-steps] li:last-child { padding-inline-end: 0; }
[data-steps] li::before {
  content: counter(step);
  display: flex; align-items: center; justify-content: center;
  inline-size: 36px; block-size: 36px; border-radius: 50%;
  border: 1.5px solid var(--cream-3); margin-block-end: var(--size-4);
  font-size: 0.875rem; font-weight: 600; color: var(--ink-3);
}
[data-steps] li h3 { margin-block-end: var(--size-2); }
[data-steps] li p { font-size: 0.9375rem; line-height: 1.7; }
@media (width < 768px) {
  [data-steps] { grid-template-columns: 1fr; }
  [data-steps] li { border-inline-start: none; border-block-start: 1px solid var(--cream-3); padding-inline: 0; }
  [data-steps] li:first-child { border-block-start: none; }
}

/* ── TESTIMONIALS ── */
[aria-labelledby="quotes"] {
  padding: var(--size-9) var(--size-5);
  border-block: 1px solid var(--cream-3);
}
[aria-labelledby="quotes"] > h2 { display: none; }
[data-testimonial-grid] {
  max-inline-size: var(--content); margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--size-5);
}
[data-testimonial-grid] blockquote {
  padding: var(--size-5); background: var(--white); border-radius: 12px;
  display: flex; flex-direction: column; justify-content: space-between;
}
[data-testimonial-grid] blockquote p {
  font-family: var(--serif); font-size: 1.0625rem;
  color: var(--ink); line-height: 1.5; margin-block-end: var(--size-4);
}
[data-testimonial-grid] blockquote::before {
  content: "\201C"; font-family: var(--serif);
  font-size: 2.5rem; line-height: 1; color: var(--cream-3);
  margin-block-end: var(--size-2);
}
[data-testimonial-grid] cite {
  font-style: normal; font-size: 0.8125rem; color: var(--ink-3);
  letter-spacing: 0.02em;
}
@media (width < 768px) {
  [data-testimonial-grid] { grid-template-columns: 1fr; max-inline-size: 480px; }
}

/* Single testimonial (for-clinics, legacy) */
[aria-labelledby="quote"] {
  padding: var(--size-10) var(--size-5);
  border-block: 1px solid var(--cream-3);
}
[aria-labelledby="quote"] blockquote {
  max-inline-size: var(--narrow); margin-inline: auto; text-align: center;
}
[aria-labelledby="quote"] blockquote p {
  font-family: var(--serif); font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  color: var(--ink); line-height: 1.4; margin-block-end: var(--size-5);
}
[aria-labelledby="quote"] blockquote::before {
  content: "\201C"; display: block; font-family: var(--serif);
  font-size: 4rem; line-height: 1; color: var(--cream-3);
  margin-block-end: var(--size-3);
}
[aria-labelledby="quote"] cite {
  font-style: normal; font-size: 0.875rem; color: var(--ink-3);
  letter-spacing: 0.02em;
}

/* ── CITIES ── */
[aria-labelledby="cities"] {
  padding: var(--size-9) var(--size-5);
}
[aria-labelledby="cities"] > header {
  max-inline-size: var(--content); margin-inline: auto;
  margin-block-end: var(--size-7);
}
[data-city-grid] {
  max-inline-size: var(--content); margin-inline: auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--size-4);
}
[data-city-grid] article {
  position: relative; overflow: hidden; border-radius: 12px;
}
[data-city-grid] article img {
  inline-size: 100%; aspect-ratio: 3/4; object-fit: cover;
  transition: transform 0.4s var(--ease-3);
}
[data-city-grid] article:hover img { transform: scale(1.03); }
[data-city-grid] article > div {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  padding: var(--size-5); color: var(--cream);
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
}
[data-city-grid] article h3 { color: var(--cream); font-size: 1.25rem; margin-block-end: 2px; }
[data-city-grid] article p { color: rgba(255,255,255,0.75); font-size: 0.8125rem; }
@media (width < 768px) {
  [data-city-grid] { grid-template-columns: 1fr 1fr; gap: var(--size-3); }
  [data-city-grid] article img { aspect-ratio: 3/4; }
}
@media (width < 400px) {
  [data-city-grid] { grid-template-columns: 1fr; max-inline-size: 400px; }
  [data-city-grid] article img { aspect-ratio: 16/10; }
}

/* ── CTA ── */
[aria-labelledby="cta"] {
  background: var(--white); border-block-start: 1px solid var(--cream-3);
  padding: var(--size-10) var(--size-5);
}
[aria-labelledby="cta"] > div {
  max-inline-size: 460px; margin-inline: auto; text-align: center;
}
[aria-labelledby="cta"] h2 { margin-block-end: var(--size-3); }
[aria-labelledby="cta"] > div > p {
  margin-inline: auto; margin-block-end: var(--size-6);
  font-size: 1rem;
}
[aria-labelledby="cta"] form {
  display: flex; gap: var(--size-2); max-inline-size: 380px; margin-inline: auto;
}
[aria-labelledby="cta"] input[type="email"] {
  flex: 1; padding: 13px 20px; border: 1.5px solid var(--cream-3);
  border-radius: 100px; font-size: 0.875rem; font-family: var(--sans);
  background: var(--cream); transition: border-color 0.15s;
}
[aria-labelledby="cta"] input[type="email"]:focus { border-color: var(--terra); outline: none; }
[aria-labelledby="cta"] input[type="email"]::placeholder { color: var(--ink-4); }
/* Success message after form submit */
[data-form-success] {
  padding: var(--size-4) var(--size-5); background: var(--terra-muted);
  border-radius: 12px; font-size: 0.9375rem; color: var(--ink);
  animation: rise 0.4s var(--ease-3) both;
}
@media (width < 480px) { [aria-labelledby="cta"] form { flex-direction: column; } }

/* ── Apartments listing ── */
[aria-labelledby="apartments"] {
  max-inline-size: var(--content); margin-inline: auto;
  padding: var(--size-8) var(--size-5) var(--size-9);
}
[aria-labelledby="apartments"] > header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-block-end: var(--size-6); flex-wrap: wrap; gap: var(--size-3);
}
[data-search-bar] {
  display: flex; gap: var(--size-3); flex-wrap: wrap; align-items: flex-end;
  padding: var(--size-5); background: var(--white); border-radius: 12px;
  border: 1px solid var(--cream-3); margin-block-end: var(--size-6);
}
[data-field-group] { display: flex; flex-direction: column; gap: 4px; }
[data-field-group] label {
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-3);
}
[data-search-bar] input[type="date"],
[data-search-bar] select {
  padding: 10px 16px; border-radius: 100px; border: 1.5px solid var(--cream-3);
  font-family: var(--sans); font-size: 0.8125rem; background: var(--cream);
  cursor: pointer; font-weight: 500; color: var(--ink-2);
}
[data-search-bar] input[type="date"]:focus,
[data-search-bar] select:focus { border-color: var(--terra); outline: none; }
[data-search-bar] [data-field-group]:first-child { flex: 1; min-inline-size: 200px; }
[data-search-bar] [data-field-group]:first-child select { inline-size: 100%; }
@media (width < 768px) {
  [data-search-bar] { flex-direction: column; align-items: stretch; }
  [data-search-bar] select, [data-search-bar] input[type="date"] { inline-size: 100%; }
}
[aria-labelledby="apartments"] > div {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: var(--size-5);
}
[aria-labelledby="apartments"] article {
  border-radius: 12px; overflow: hidden; background: var(--white);
  transition: transform 0.2s var(--ease-2), box-shadow 0.2s var(--ease-2);
}
[aria-labelledby="apartments"] article:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(28,30,33,0.06);
}
[aria-labelledby="apartments"] article img {
  inline-size: 100%; aspect-ratio: 3/2; object-fit: cover;
}
[aria-labelledby="apartments"] article > div {
  padding: var(--size-4) var(--size-4) var(--size-5);
}
[aria-labelledby="apartments"] article h3 { font-size: 1.0625rem; margin-block-end: 4px; }
[aria-labelledby="apartments"] article h3 a { color: var(--ink); text-decoration: none; }
[aria-labelledby="apartments"] article h3 a:hover { color: var(--terra); }
[aria-labelledby="apartments"] article > a { display: block; }
[aria-labelledby="apartments"] article > div > p { font-size: 0.8125rem; color: var(--ink-3); }
[aria-labelledby="apartments"] article footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-block-start: var(--size-3); padding-block-start: var(--size-3);
  border-block-start: 1px solid var(--cream-2); font-size: 0.8125rem;
}
[aria-labelledby="apartments"] article footer strong { font-size: 1.25rem; color: var(--ink); }
[aria-labelledby="apartments"] article footer span { color: var(--ink-3); }
[aria-labelledby="apartments"] [aria-label="Tags"] {
  display: flex; gap: 6px; margin-block-start: var(--size-3); flex-wrap: wrap;
}
[aria-labelledby="apartments"] [aria-label="Tags"] span {
  padding: 3px 10px; border-radius: 100px; font-size: 0.6875rem;
  font-weight: 500; color: var(--ink-3); border: 1px solid var(--cream-3);
}
[data-results-count] {
  grid-column: 1 / -1; font-size: 0.8125rem; color: var(--ink-3);
  margin-block-end: var(--size-1);
}
[data-no-results] {
  grid-column: 1 / -1; text-align: center; padding: var(--size-9) 0;
  font-size: 1.0625rem; color: var(--ink-3);
}

/* ── Apartment Detail ── */
[aria-labelledby="apt-name"] {
  max-inline-size: var(--content); margin-inline: auto;
  padding: var(--size-6) var(--size-5) var(--size-9);
}

/* Breadcrumb */
[aria-label="Breadcrumb"] {
  display: flex; gap: var(--size-2); align-items: center;
  font-size: 0.8125rem; color: var(--ink-3); margin-block-end: var(--size-5);
}
[aria-label="Breadcrumb"] a { color: var(--ink-3); text-decoration: none; }
[aria-label="Breadcrumb"] a:hover { color: var(--ink); }
[aria-label="Breadcrumb"] span:last-child { color: var(--ink); font-weight: 500; }

/* Hero: gallery + info */
[data-apt-hero] {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--size-6);
  align-items: start; margin-block-end: var(--size-8);
}
[data-apt-info] {
  position: sticky; inset-block-start: 72px;
}
[data-apt-gallery] {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-2);
}
[data-apt-gallery] figure:first-child {
  grid-column: 1 / -1;
}
[data-apt-gallery] img {
  inline-size: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px;
}
[data-apt-gallery] figure:first-child img {
  aspect-ratio: 16/10;
}
[data-apt-info] h1 {
  font-size: clamp(1.6rem, 3vw, 2.2rem); margin-block-end: var(--size-2);
}
[data-apt-location] { font-size: 1rem; color: var(--ink-2); margin-block-end: var(--size-2); }
[data-apt-rating] {
  display: flex; gap: var(--size-2); font-size: 0.875rem; color: var(--ink-3);
  margin-block-end: var(--size-4);
}
[data-apt-price] { margin-block-end: var(--size-5); }
[data-apt-price] strong {
  font-size: 1.75rem; color: var(--ink); font-weight: 600;
}
[data-apt-price] span { font-size: 0.9375rem; color: var(--ink-3); }
[data-apt-desc] {
  font-size: 1rem; line-height: 1.75; margin-block-end: var(--size-6);
}
[data-apt-info] a[role="button"] { inline-size: 100%; justify-content: center; }

/* Pricing block */
[data-apt-pricing] {
  padding: var(--size-4); background: var(--white); border-radius: 10px;
  border: 1px solid var(--cream-3); margin-block-end: var(--size-5);
}
[data-apt-pricing] [data-apt-price] { margin-block-end: 2px; }
[data-apt-breakdown] { font-size: 0.875rem; color: var(--ink-3); margin: 0; }
[data-apt-dates] { font-size: 0.8125rem; color: var(--ink-4); margin: 0; margin-block-start: var(--size-1); }

/* Booking form */
[data-booking-form] {
  padding: var(--size-5); background: var(--white); border-radius: 12px;
  border: 1px solid var(--cream-3);
}
[data-booking-form] h3 {
  font-size: 1rem; margin-block-end: var(--size-4);
}
[data-booking-form] form {
  display: flex; flex-direction: column; gap: var(--size-3);
}
[data-booking-form] input,
[data-booking-form] select,
[data-booking-form] textarea {
  padding: 12px 16px; border: 1.5px solid var(--cream-3);
  border-radius: 8px; font-family: var(--sans); font-size: 0.875rem;
  background: var(--cream); transition: border-color 0.15s;
}
[data-booking-form] input:focus,
[data-booking-form] select:focus,
[data-booking-form] textarea:focus { border-color: var(--terra); outline: none; }
[data-booking-form] textarea { resize: vertical; min-block-size: 60px; }
[data-booking-form] button[type="submit"] {
  margin-block-start: var(--size-2);
}
@media (width < 768px) {
  [data-apt-hero] { grid-template-columns: 1fr; }
}

/* Details: amenities + recovery */
[data-apt-details] {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-7);
  padding-block: var(--size-7); border-block: 1px solid var(--cream-3);
}
[data-apt-details] h2 {
  font-size: 1.125rem; font-family: var(--sans); font-weight: 600;
  margin-block-end: var(--size-4);
}
[data-apt-amenities] ul {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-2);
}
[data-apt-amenities] li {
  font-size: 0.9375rem; color: var(--ink-2);
  padding-inline-start: var(--size-4);
  position: relative;
}
[data-apt-amenities] li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.5em;
  inline-size: 6px; block-size: 6px; border-radius: 50%;
  background: var(--cream-3);
}
[data-apt-recovery] dl {
  display: flex; flex-direction: column; gap: var(--size-3);
}
[data-apt-recovery] dl > div {
  display: flex; justify-content: space-between; gap: var(--size-3);
  padding-block-end: var(--size-3); border-block-end: 1px solid var(--cream-3);
}
[data-apt-recovery] dl > div:last-child { border: none; }
[data-apt-recovery] dt { font-size: 0.875rem; color: var(--ink-3); }
[data-apt-recovery] dd { font-size: 0.875rem; color: var(--ink); font-weight: 500; margin: 0; text-align: end; }
@media (width < 768px) { [data-apt-details] { grid-template-columns: 1fr; } }

/* Reviews */
[data-apt-reviews] {
  padding-block: var(--size-7);
}
[data-apt-reviews] h2 {
  font-size: 1.125rem; font-family: var(--sans); font-weight: 600;
  margin-block-end: var(--size-5);
}
[data-apt-reviews] blockquote {
  padding: var(--size-5); background: var(--white); border-radius: 10px;
  margin-block-end: var(--size-3);
}
[data-apt-reviews] blockquote p {
  font-size: 0.9375rem; line-height: 1.7; margin-block-end: var(--size-3);
  color: var(--ink);
}
[data-apt-reviews] cite {
  font-style: normal; font-size: 0.8125rem;
}
[data-apt-reviews] cite strong { color: var(--ink); }
[data-apt-reviews] cite span { color: var(--ink-3); margin-inline-start: var(--size-2); }

/* Not found */
[data-not-found] {
  max-inline-size: var(--content); margin-inline: auto;
  padding: var(--size-10) var(--size-5); text-align: center;
}
[data-not-found] h1 { margin-block-end: var(--size-3); }
[data-not-found] p { margin-inline: auto; margin-block-end: var(--size-6); }

/* ── Legal pages ── */
[data-legal] {
  max-inline-size: var(--narrow); margin-inline: auto;
  padding: var(--size-8) var(--size-5) var(--size-10);
}
[data-legal] > header {
  margin-block-end: var(--size-7);
  padding-block-end: var(--size-5);
  border-block-end: 1px solid var(--cream-3);
}
[data-legal] > header h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
[data-legal] > header p { font-size: 0.875rem; color: var(--ink-3); margin-block-start: var(--size-2); }
[data-legal] > section {
  margin-block-end: var(--size-6);
}
[data-legal] h2 {
  font-family: var(--sans); font-weight: 600; font-size: 1.0625rem;
  margin-block-end: var(--size-3);
}
[data-legal] p {
  font-size: 0.9375rem; line-height: 1.75; margin-block-end: var(--size-3);
}
[data-legal] ul {
  padding-inline-start: var(--size-5); margin-block-end: var(--size-3);
}
[data-legal] li {
  font-size: 0.9375rem; line-height: 1.75; margin-block-end: var(--size-1);
}

/* ── About — mission ── */
[aria-labelledby="mission"] {
  max-inline-size: var(--content); margin-inline: auto;
  padding: var(--size-9) var(--size-5);
}
[aria-labelledby="mission"] > div {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-9); align-items: start;
}
[aria-labelledby="mission"] img {
  aspect-ratio: 3/4; object-fit: cover; border-radius: 12px;
}
[aria-labelledby="mission"] small {
  display: block; font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--terra); margin-block-end: var(--size-3);
}
[aria-labelledby="mission"] h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.2rem); margin-block-end: var(--size-5);
}
[aria-labelledby="mission"] p { font-size: 1.0625rem; line-height: 1.75; margin-block-end: var(--size-4); }
@media (width < 768px) { [aria-labelledby="mission"] > div { grid-template-columns: 1fr; } }

/* ── Values ── */
[aria-labelledby="values"] {
  background: var(--white); border-block: 1px solid var(--cream-3);
  padding: var(--size-9) var(--size-5);
}
[aria-labelledby="values"] > header {
  text-align: center; max-inline-size: 520px; margin-inline: auto;
  margin-block-end: var(--size-7);
}
[aria-labelledby="values"] > header small {
  display: block; font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--terra); margin-block-end: var(--size-2);
}
[aria-labelledby="values"] > div {
  max-inline-size: var(--content); margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--size-7);
}
[aria-labelledby="values"] article h3 { margin-block-end: var(--size-2); }
[aria-labelledby="values"] article p { font-size: 0.9375rem; line-height: 1.7; }
@media (width < 768px) { [aria-labelledby="values"] > div { grid-template-columns: 1fr; } }

/* ── Clinic page ── */
[data-clinic-hero] {
  max-inline-size: var(--content); margin-inline: auto;
  padding: var(--size-9) var(--size-5) var(--size-8);
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--size-8);
  align-items: start;
}
[data-clinic-hero] img {
  aspect-ratio: 3/4; object-fit: cover; border-radius: 12px;
}
[data-clinic-hero] h2 { font-size: clamp(2rem, 4.5vw, 2.8rem); margin-block-end: var(--size-5); }
[data-clinic-hero] p {
  font-size: 1.0625rem; line-height: 1.75; margin-block-end: var(--size-4);
}
[data-clinic-hero] p + a[role="button"] { margin-block-start: var(--size-3); }
@media (width < 768px) {
  [data-clinic-hero] { grid-template-columns: 1fr; }
}

/* ── Clinic benefits with icons ── */
[aria-labelledby="clinic-benefits"] {
  background: var(--white); border-block: 1px solid var(--cream-3);
  padding: var(--size-9) var(--size-5);
}
[aria-labelledby="clinic-benefits"] > header {
  max-inline-size: var(--content); margin-inline: auto;
  margin-block-end: var(--size-7);
}
[aria-labelledby="clinic-benefits"] > header small {
  display: block; font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--terra); margin-block-end: var(--size-2);
}
[aria-labelledby="clinic-benefits"] ul {
  max-inline-size: var(--content); margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--size-6);
  list-style: none; padding: 0;
}
[aria-labelledby="clinic-benefits"] li {
  padding: var(--size-5); background: var(--cream); border-radius: 10px;
}
[aria-labelledby="clinic-benefits"] li [data-icon] {
  display: flex; align-items: center; justify-content: center;
  inline-size: 40px; block-size: 40px; border-radius: 10px;
  background: var(--terra-muted); margin-block-end: var(--size-3);
  font-size: 1.25rem;
}
[aria-labelledby="clinic-benefits"] li h3 { margin-block-end: var(--size-1); }
[aria-labelledby="clinic-benefits"] li p { font-size: 0.9375rem; line-height: 1.7; }
@media (width < 768px) { [aria-labelledby="clinic-benefits"] ul { grid-template-columns: 1fr; } }

/* ── Stats ── */
[aria-label="Statistics"] {
  padding: var(--size-9) var(--size-5);
}
[aria-label="Statistics"] dl {
  max-inline-size: var(--content); margin-inline: auto;
  display: flex; justify-content: center; gap: var(--size-10); flex-wrap: wrap;
  text-align: center;
}
[aria-label="Statistics"] dt { font-size: 0.8125rem; color: var(--ink-3); margin-block-start: var(--size-1); }
[aria-label="Statistics"] dd {
  font-family: var(--serif); font-size: 2.8rem; color: var(--ink);
  margin: 0; line-height: 1;
}

/* ── Process (how-it-works page) ── */
[aria-labelledby="process"] {
  padding: var(--size-9) var(--size-5);
}
[aria-labelledby="process"] > header {
  max-inline-size: var(--content); margin-inline: auto;
  margin-block-end: var(--size-8);
}
[aria-labelledby="process"] > header h2 { margin-block-end: var(--size-3); }
[aria-labelledby="process"] > header p { font-size: 1.0625rem; line-height: 1.7; }
[aria-labelledby="process"] > header small {
  display: block; font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--terra); margin-block-end: var(--size-2);
}
[aria-labelledby="process"] > div {
  max-inline-size: var(--content); margin-inline: auto;
  display: flex; flex-direction: column; gap: var(--size-10);
}
[aria-labelledby="process"] article {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-8); align-items: center;
}
[aria-labelledby="process"] article:nth-child(even) { direction: rtl; }
[aria-labelledby="process"] article:nth-child(even) > * { direction: ltr; }
[aria-labelledby="process"] article img {
  aspect-ratio: 4/3; object-fit: cover; border-radius: 12px;
}
[aria-labelledby="process"] article small {
  display: block; font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--terra); margin-block-end: var(--size-2);
}
[aria-labelledby="process"] article h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
}
[aria-labelledby="process"] article p {
  font-size: 1rem; margin-block-start: var(--size-3); line-height: 1.75;
}
@media (width < 768px) {
  [aria-labelledby="process"] article,
  [aria-labelledby="process"] article:nth-child(even) {
    grid-template-columns: 1fr; direction: ltr;
  }
}

/* ── FAQ ── */
[aria-labelledby="faq"] {
  background: var(--white); border-block: 1px solid var(--cream-3);
  padding: var(--size-9) var(--size-5);
}
[aria-labelledby="faq"] > header {
  max-inline-size: var(--narrow); margin-inline: auto;
  text-align: center; margin-block-end: var(--size-7);
}
[aria-labelledby="faq"] > header small {
  display: block; font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--terra); margin-block-end: var(--size-2);
}
[aria-labelledby="faq"] > div {
  max-inline-size: var(--narrow); margin-inline: auto;
}
[aria-labelledby="faq"] details {
  border-block-end: 1px solid var(--cream-3);
}
[aria-labelledby="faq"] summary {
  font-weight: 500; font-size: 1.0625rem; cursor: pointer;
  padding-block: var(--size-4); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--size-3);
}
[aria-labelledby="faq"] summary::after {
  content: "+"; font-size: 1.25rem; color: var(--ink-4); flex-shrink: 0;
  transition: transform 0.2s var(--ease-2);
}
[aria-labelledby="faq"] details[open] summary::after { transform: rotate(45deg); }
[aria-labelledby="faq"] details > p {
  font-size: 0.9375rem; padding-block-end: var(--size-4); line-height: 1.75;
}

/* ── Footer ── */
body > footer {
  border-block-start: 1px solid var(--cream-3);
  padding: var(--size-8) var(--size-5) var(--size-6);
}
body > footer > div:first-child {
  max-inline-size: var(--content); margin-inline: auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--size-6);
}
body > footer [aria-label="Home"] {
  display: block; margin-block-end: var(--size-3);
  font-family: var(--serif); font-size: 1.25rem; color: var(--ink); text-decoration: none;
}
body > footer [aria-label="Home"] span { color: var(--terra); }
body > footer > div:first-child > div:first-child p { font-size: 0.8125rem; color: var(--ink-3); }
body > footer h4 {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-4); margin-block-end: var(--size-3); font-weight: 600;
}
body > footer ul { list-style: none; padding: 0; }
body > footer ul a {
  text-decoration: none; color: var(--ink-2); font-size: 0.875rem;
  display: block; padding-block: 3px;
}
body > footer ul a:hover { color: var(--ink); }
body > footer > small {
  display: flex; justify-content: space-between;
  max-inline-size: var(--content); margin-inline: auto;
  padding-block-start: var(--size-5); margin-block-start: var(--size-6);
  border-block-start: 1px solid var(--cream-3); font-size: 0.75rem; color: var(--ink-4);
}
@media (width < 768px) { body > footer > div:first-child { grid-template-columns: 1fr 1fr; } }
@media (width < 480px) { body > footer > div:first-child { grid-template-columns: 1fr; } }

/* ── Included grid (how-it-works page) ── */
[data-included-grid] {
  max-inline-size: var(--content); margin-inline: auto;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--cream-3);
}
[data-included-grid] > div {
  padding: var(--size-6); background: var(--cream);
}
[data-included-grid] h3 { margin-block-end: var(--size-2); }
[data-included-grid] p { font-size: 0.9375rem; line-height: 1.7; }
@media (width < 768px) { [data-included-grid] { grid-template-columns: 1fr; } }

/* ── Included section header ── */
[aria-labelledby="included"] {
  background: var(--white); border-block: 1px solid var(--cream-3);
  padding: var(--size-9) var(--size-5);
}
[aria-labelledby="included"] > header {
  max-inline-size: var(--content); margin-inline: auto;
  margin-block-end: var(--size-7);
}

/* ── How-it-works-clinic steps ── */
[aria-labelledby="how-it-works-clinic"] {
  padding: var(--size-9) var(--size-5);
}
[aria-labelledby="how-it-works-clinic"] > header {
  max-inline-size: var(--content); margin-inline: auto;
  margin-block-end: var(--size-8);
}
[aria-labelledby="how-it-works-clinic"] > header small {
  display: block; font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--terra); margin-block-end: var(--size-2);
}

/* ── About approach (dark split) ── */
[aria-labelledby="approach"] {
  background: var(--ink); color: var(--cream);
  padding: var(--size-9) var(--size-5);
}
[aria-labelledby="approach"] [data-split] h2 { color: var(--cream); }
[aria-labelledby="approach"] [data-split] p { color: var(--ink-4); }

/* ── Team section ── */
[aria-labelledby="team"] {
  padding: var(--size-9) var(--size-5);
}
[aria-labelledby="team"] > header {
  max-inline-size: var(--narrow); margin-inline: auto;
}
[aria-labelledby="team"] p {
  font-size: 1.0625rem; line-height: 1.75; margin-block-start: var(--size-4);
}

/* ── Clinic hero extended ── */
[aria-labelledby="clinic-hero"] p + p {
  margin-block-end: var(--size-7);
}

/* ── Portal (Owner / Admin) ── */
[data-portal-body] {
  background: var(--cream); min-block-size: 100dvh;
}
[data-portal-topbar] {
  display: flex; align-items: center; gap: var(--size-5);
  padding: var(--size-3) var(--size-5);
  background: var(--ink); color: var(--white);
  position: sticky; inset-block-start: 0; z-index: 100;
}
[data-portal-logo] {
  font-family: var(--serif); font-size: 1.125rem; font-weight: 700;
  color: var(--white); text-decoration: none; margin-inline-end: var(--size-4);
}
[data-portal-topbar] nav {
  display: flex; gap: var(--size-4); flex: 1;
}
[data-portal-link] {
  color: var(--cream-3); text-decoration: none; font-size: 0.8125rem;
  font-weight: 500; padding: 4px 0; border-block-end: 2px solid transparent;
  transition: all 0.15s;
}
[data-portal-link]:hover { color: var(--white); border-color: var(--terra); }
[data-portal-user] {
  font-size: 0.8125rem; color: var(--cream-3); margin-inline-start: auto;
}
[data-portal] {
  max-inline-size: 1000px; margin-inline: auto;
  padding: var(--size-7) var(--size-5);
}
[data-portal] h1 {
  font-family: var(--serif); font-size: 1.75rem;
  margin-block-end: var(--size-5);
}
[data-portal] h2 {
  font-family: var(--serif); font-size: 1.25rem;
  margin-block-start: var(--size-6); margin-block-end: var(--size-4);
}

/* Stats grid */
[data-stats-grid] {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--size-4); margin-block-end: var(--size-7);
}
[data-stat-card] {
  padding: var(--size-5); background: var(--white); border-radius: 10px;
  border: 1px solid var(--cream-3); text-align: center;
}
[data-stat-value] {
  display: block; font-family: var(--serif); font-size: 2rem;
  font-weight: 700; color: var(--ink);
}
[data-stat-label] {
  display: block; font-size: 0.8125rem; color: var(--ink-3);
  margin-block-start: 2px; text-transform: uppercase; letter-spacing: 0.05em;
}

/* Property cards (owner/admin) */
[data-property-list] {
  display: flex; flex-direction: column; gap: var(--size-4);
}
[data-property-card] {
  display: flex; gap: var(--size-5); padding: var(--size-4);
  background: var(--white); border-radius: 10px;
  border: 1px solid var(--cream-3); align-items: start;
}
[data-property-card] img {
  inline-size: 120px; block-size: 90px; object-fit: cover;
  border-radius: 8px; flex-shrink: 0;
}
[data-property-card] h3 {
  font-family: var(--serif); font-size: 1.125rem; margin: 0 0 4px;
}
[data-property-card] p {
  font-size: 0.875rem; color: var(--ink-3); margin: 0 0 4px;
}

/* Status badges */
[data-status-badge] {
  display: inline-block; padding: 2px 10px; border-radius: 99px;
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.03em;
}
[data-status-badge="approved"], [data-status-badge="confirmed"], [data-status-badge="completed"] {
  background: #e8f5e9; color: #2e7d32;
}
[data-status-badge="submitted"], [data-status-badge="requested"] {
  background: #fff3e0; color: #e65100;
}
[data-status-badge="declined"], [data-status-badge="cancelled"], [data-status-badge="suspended"] {
  background: #fce4ec; color: #c62828;
}
[data-status-badge="expired"] {
  background: #f5f5f5; color: #757575;
}
[data-status-badge="checked_in"], [data-status-badge="checked_out"] {
  background: #e3f2fd; color: #1565c0;
}

/* Reservation cards */
[data-reservations-list] {
  display: flex; flex-direction: column; gap: var(--size-3);
}
[data-reservation-card] {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--size-4) var(--size-5); background: var(--white);
  border-radius: 10px; border: 1px solid var(--cream-3); gap: var(--size-4);
}
[data-reservation-card] > div:first-child {
  display: flex; flex-direction: column; gap: 4px;
}
[data-reservation-card] strong { font-size: 1rem; }
[data-reservation-card] span { font-size: 0.8125rem; color: var(--ink-3); }

[data-reservation-actions] {
  display: flex; gap: var(--size-2); flex-shrink: 0;
}
[data-btn-confirm] {
  padding: 8px 20px; background: #2e7d32; color: white;
  border: none; border-radius: 6px; font-weight: 600;
  font-size: 0.8125rem; cursor: pointer;
}
[data-btn-confirm]:hover { background: #1b5e20; }
[data-btn-decline] {
  padding: 8px 20px; background: transparent; color: #c62828;
  border: 1.5px solid #c62828; border-radius: 6px; font-weight: 600;
  font-size: 0.8125rem; cursor: pointer;
}
[data-btn-decline]:hover { background: #fce4ec; }

/* Admin table */
[data-reservations-table] {
  inline-size: 100%; border-collapse: collapse; font-size: 0.875rem;
}
[data-reservations-table] th {
  text-align: left; padding: 8px 12px; font-size: 0.6875rem;
  text-transform: uppercase; color: var(--ink-4); letter-spacing: 0.05em;
  border-block-end: 1.5px solid var(--cream-3);
}
[data-reservations-table] td {
  padding: 10px 12px; border-block-end: 1px solid var(--cream-2);
}
[data-reservations-table] tbody tr:hover { background: var(--cream); }

/* Portal section */
[data-portal-section] { margin-block-end: var(--size-7); }
[data-portal-section] h2 {
  font-family: var(--serif); font-size: 1.25rem;
  margin-block-end: var(--size-4);
}

[data-empty] {
  text-align: center; color: var(--ink-3); padding: var(--size-8);
  font-size: 0.9375rem;
}
[data-empty-state] {
  text-align: center; padding: var(--size-9) var(--size-5);
  background: var(--white); border-radius: 12px; border: 1.5px dashed var(--cream-3);
}
[data-empty-state] h2 {
  font-family: var(--serif); font-size: 1.25rem; margin-block-end: var(--size-2);
}
[data-empty-state] p {
  color: var(--ink-3); font-size: 0.9375rem; max-inline-size: 400px;
  margin-inline: auto;
}
[data-special-needs] {
  font-style: italic; color: var(--ink-2);
}
[data-reservation-info] {
  display: flex; flex-direction: column; gap: 4px;
}

@media (max-width: 600px) {
  [data-reservation-card] { flex-direction: column; align-items: stretch; }
  [data-reservation-actions] { justify-content: flex-end; }
  [data-property-card] { flex-direction: column; }
  [data-property-card] img { inline-size: 100%; block-size: 160px; }
  [data-reservations-table] { font-size: 0.75rem; }
  [data-reservations-table] th, [data-reservations-table] td { padding: 6px 8px; }
}