:root {
  --forest: #0649a6;
  --leaf: #e6f0ff;
  --sun: #e0a12f;
  --paper: #f6f9fe;
  --ink: #122a4c;
  --muted: #63718a;
  --line: #d7e1f0;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "DM Sans", sans-serif; }
a { color: inherit; }
.site-header, main, footer { max-width: 1180px; margin: 0 auto; }
.site-header { min-height: 82px; display: flex; justify-content: space-between; align-items: center; padding: 16px 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--forest); text-decoration: none; font-size: 14px; font-weight: 700; letter-spacing: .08em; }
.brand img { width: 30px; height: 30px; }
.intro { background: var(--forest); color: white; min-height: 360px; padding: 66px 8.5%; position: relative; overflow: hidden; }
.intro::after { content: ""; position: absolute; width: 470px; height: 470px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; right: -150px; top: -235px; }
.eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--sun); }
h1, h2 { font-family: "Playfair Display", serif; margin: 0; font-weight: 600; letter-spacing: 0; }
h1 { max-width: 700px; font-size: 52px; line-height: 1.15; position: relative; z-index: 1; }
.intro > p:last-child { max-width: 500px; margin: 20px 0 0; color: #dfeaff; line-height: 1.65; position: relative; z-index: 1; }
.availability { padding: 72px 28px 84px; }
.section-heading { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 30px; }
.section-heading .eyebrow { color: var(--forest); }
h2 { font-size: 36px; }
.availability-count { color: var(--muted); margin: 0; white-space: nowrap; }
.availability-controls { display: grid; gap: 14px; margin: -10px 0 26px; }.homestay-date-range { display: flex; flex-wrap: wrap; gap: 12px; }.availability-controls label { display: grid; gap: 6px; width: min(100%, 210px); color: var(--muted); font-size: 13px; font-weight: 700; }.availability-controls [hidden] { display: none; }.availability-controls input { min-height: 38px; border: 1px solid var(--line); background: #fff; color: var(--ink); padding: 7px 10px; font: inherit; }.property-filter { display: flex; flex-wrap: wrap; gap: 8px; }.property-filter button { border: 1px solid var(--line); background: #fff; color: var(--muted); padding: 9px 12px; cursor: pointer; font: 700 13px "DM Sans", sans-serif; }.property-filter button:hover, .property-filter button.active { color: #fff; border-color: var(--forest); background: var(--forest); }
.apartment-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.apartment-card { border: 1px solid var(--line); border-top: 4px solid var(--sun); background: white; padding: 24px; min-height: 210px; display: flex; flex-direction: column; animation: arrive .35s ease both; }
.apartment-image { width: calc(100% + 48px); height: 150px; margin: -24px -24px 22px; object-fit: cover; border-bottom: 1px solid var(--line); }
.apartment-card:nth-child(2) { animation-delay: .05s; }.apartment-card:nth-child(3) { animation-delay: .1s; }
.card-tag { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--forest); margin-bottom: 28px; }
.apartment-card h3 { margin: 0; font-family: "Playfair Display", serif; font-size: 26px; font-weight: 600; }
.apartment-card address { margin: 8px 0 0; color: var(--muted); font-style: normal; line-height: 1.45; }
.apartment-description { margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.card-detail { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.card-detail strong { color: var(--ink); }
.stay-calendar { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }.stay-calendar > strong { display: block; margin-bottom: 10px; color: var(--ink); font-size: 13px; }.stay-date-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }.stay-date { display: grid; gap: 2px; padding: 5px 2px; border: 1px solid var(--line); text-align: center; line-height: 1.2; }.stay-date b { font-size: 11px; }.stay-date.available { background: #e8f5ec; border-color: #9dccaa; color: #176b38; }.stay-date.booked { background: #f8e8e7; border-color: #e4aaa6; color: #9d332b; }
.state-message { grid-column: 1 / -1; margin: 0; padding: 42px 0; text-align: center; color: var(--muted); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.state-message.error { color: #a6332a; }
.service-band, .about-band, .cost-band, .contact-band { padding: 76px 8.5%; }
.service-band { background: #e7f0ff; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 54px; }
.service-band h2, .about-band h2, .cost-band h2, .contact-band h2 { font-size: 36px; line-height: 1.22; }
.service-listing { display: grid; gap: 0; border-top: 1px solid #b9cce8; }
.service-listing article { display: grid; grid-template-columns: 42px 1fr; column-gap: 16px; padding: 20px 0; border-bottom: 1px solid #b9cce8; }
.service-listing span { grid-row: 1 / span 2; color: var(--forest); font-weight: 700; }
.service-listing h3 { margin: 0; font: 600 19px "Playfair Display", serif; }
.service-listing p { margin: 7px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.about-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(350px, .8fr); align-items: start; gap: 64px; background: #fff; }
.about-copy > p:last-child { max-width: 610px; color: var(--muted); line-height: 1.7; }
.reason-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--line); }
.reason-list li { min-height: 98px; display: grid; align-content: center; gap: 7px; padding: 12px 15px 12px 0; border-bottom: 1px solid var(--line); }
.reason-list b { color: var(--sun); font-size: 13px; }.reason-list span { font-size: 14px; font-weight: 700; line-height: 1.35; }
.cost-band { color: #fff; background: #08295a; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 52px; }.cost-band .eyebrow { color: #f4c66e; }.cost-band ul { margin: 0; padding-left: 20px; color: #d9e8ff; line-height: 1.65; }.cost-band li + li { margin-top: 12px; }
.contact-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .7fr); gap: 52px; background: #f6f9fe; }.contact-band address { display: grid; gap: 10px; font-style: normal; color: var(--muted); line-height: 1.5; }.contact-band address strong, .contact-band a { color: var(--forest); }.contact-band a { font-weight: 700; text-decoration: none; }
footer { border-top: 1px solid var(--line); display: flex; justify-content: space-between; padding: 26px 28px; font-size: 13px; color: var(--muted); }
footer span { color: var(--forest); font-weight: 700; letter-spacing: .08em; } footer a { color: var(--forest); }
@keyframes arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 720px) { .site-header { padding: 14px 20px; }.brand { font-size: 12px; }.intro { min-height: 330px; padding: 56px 28px; } h1 { font-size: 38px; }.availability { padding: 52px 20px 64px; }.section-heading { display: block; }.availability-count { margin-top: 12px; }.property-filter { margin-top: 20px; } h2, .service-band h2, .about-band h2, .cost-band h2, .contact-band h2 { font-size: 31px; }.apartment-grid { grid-template-columns: 1fr; }.service-band, .about-band, .cost-band, .contact-band { grid-template-columns: 1fr; gap: 32px; padding: 52px 20px; }.reason-list { grid-template-columns: 1fr 1fr; } footer { padding: 22px 20px; } }