/* Northbay — real estate. Reference pattern: 53 West 53 (huge light uppercase statements, room-type tabs, amenities). */
:root {
  --bg: #efece5; --fg: #1d2026; --muted: #555960; --surface: #e4dfd4; --card: #f8f6f1; --line: #cfc9bc;
  --accent: #1d2026; --accent-fg: #efece5; --brass: #7f5a24;
  --font-head: "Manrope", system-ui, sans-serif; --font-body: "Manrope", system-ui, sans-serif;
  --h-weight: 300; --h-track: -0.02em; --radius: 2px;
}
.eyebrow { color: var(--brass); font-weight: 600; }
.caps-title { font: 300 clamp(2rem, 1.2rem + 3vw, 3.75rem)/1 var(--font-head); text-transform: uppercase; letter-spacing: .01em; margin-bottom: 1.25rem; }

/* Hero */
.hero { position: relative; display: flex; flex-direction: column; min-height: calc(100svh - 2.5rem); color: #fff; overflow: hidden; isolation: isolate; }
.hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 115%; object-fit: cover; transform: translateY(calc(var(--py, 0px) * -.35)); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(15 17 22 / .5), transparent 28%, transparent 50%, rgb(15 17 22 / .65)); }
.nav__brand { letter-spacing: .3em; font-weight: 600; font-size: 1rem; }
.hero .btn--line { color: #fff; border-color: rgb(255 255 255 / .7); }
.hero__copy { margin-top: auto; padding-bottom: clamp(2rem, 1rem + 4vw, 4.5rem); }
.hero__kicker { font-size: .8125rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1rem; }
.hero__title { font: 300 clamp(3.5rem, 1rem + 10vw, 10rem)/.88 var(--font-head); text-transform: uppercase; letter-spacing: -.01em; }

/* Statement */
.statement__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: end; }
.statement .caps-title { margin: 0; }
.text-link { display: inline-block; margin-top: 1.5rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .8125rem; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .25rem; }

/* Design */
.design__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.design__img { aspect-ratio: 4 / 5; }
.design__facts { display: flex; gap: 3rem; margin-top: 2rem; }
.design__facts b { display: block; font: 300 3rem/1 var(--font-head); }
.design__facts span { font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* Rooms tabs */
.rooms__tabs { display: flex; flex-wrap: wrap; gap: 0 2rem; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; }
.rooms__tabs [role="tab"] {
  padding: .9rem 0; margin-bottom: -1px; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  font: 600 .8125rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.rooms__tabs [role="tab"][aria-selected="true"] { color: var(--fg); border-bottom-color: var(--brass); }
.rooms__tabs [role="tab"]:hover { color: var(--fg); }
.rooms__panel { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: 2rem; align-items: end; }
.rooms__panel[hidden] { display: none; }
.rooms__panel img { aspect-ratio: 3 / 2; border-radius: var(--radius); }
.rooms__panel p { color: var(--muted); border-top: 1px solid var(--line); padding-top: 1rem; }
.motion .rooms__panel:not([hidden]) img { animation: room-in 600ms cubic-bezier(.16, 1, .3, 1); }
@keyframes room-in { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: none; } }

/* Configurations */
.table-wrap { overflow-x: auto; }
.configs { width: 100%; min-width: 520px; border-collapse: collapse; }
.configs th, .configs td { padding: 1.1rem 1rem 1.1rem 0; text-align: left; border-bottom: 1px solid var(--line); }
.configs thead th { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.configs tbody th { font: 300 1.5rem/1.2 var(--font-head); }
.status { display: inline-block; padding: .3rem .6rem; border: 1px solid var(--line); font-size: .8125rem; font-weight: 600; }
.status--few { border-color: var(--brass); color: var(--brass); }
.small-note { margin-top: 1rem; font-size: .8125rem; }

/* Amenities */
.amenities { position: relative; display: grid; align-items: end; min-height: min(90vh, 760px); isolation: isolate; overflow: hidden; padding-block: 3rem; }
.amenities__img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.amenities__card { width: auto; max-width: 30rem; margin-left: var(--gutter); padding: 2rem; background: var(--card); }
.amen-list li { padding-block: .7rem; border-top: 1px solid var(--line); }

/* Progress */
.progress li { display: grid; grid-template-columns: 8rem 1fr 5rem; gap: 1rem; padding-block: 1.1rem; border-top: 1px solid var(--line); align-items: center; }
.progress em { font-style: normal; font-size: .875rem; color: var(--muted); text-align: right; }
.bar { height: 6px; background: var(--line); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--brass); }
.bar--100 span { width: 100%; } .bar--70 span { width: 70%; } .bar--35 span { width: 35%; } .bar--0 span { width: 3%; }

/* Visit */
.visit { background: var(--accent); color: var(--accent-fg); }
.visit .muted { color: #b9bcc2; }
.visit .demo-note { background: transparent; border-color: rgb(239 236 229 / .3); }
.visit a { color: #e2c08a; }

@media (max-width: 860px) {
  .statement__grid, .design__grid, .rooms__panel { grid-template-columns: 1fr; }
  .progress li { grid-template-columns: 1fr 4rem; }
  .progress li .bar { grid-column: 1 / -1; grid-row: 2; }
  .amenities__card { margin-inline: var(--gutter); }
}