:root{
  --cream:#f4ede1;
  --paper:#faf6ee;
  --ink:#231f1a;
  --ink-soft:#4a4238;
  --walnut:#3f2e22;
  --ochre:#c08a2e;
  --ochre-deep:#a5721f;
  --terracotta:#a8583c;
  --sage:#75816a;
  --line:#ded2bd;
  --green:#4f6a4a;
  --owner-green:#1f8a52;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, "Palatino Linotype", serif;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(35,25,15,0.04), 0 10px 28px -8px rgba(35,25,15,0.10);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family: var(--sans);
  line-height:1.65;
  text-align:center;
  -webkit-font-smoothing:antialiased;
}
.sans{ font-family: var(--sans); }

.wrap{ max-width:1080px; margin:0 auto; padding:0 32px; }
@media (max-width:600px){ .wrap{ padding:0 20px; } }

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  background:#111 url("../images/hero_penthouse.jpg") center center/cover no-repeat;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,16,12,0.15) 0%, rgba(20,16,12,0.35) 55%, rgba(20,16,12,0.86) 100%);
}
.hero-inner{ position:relative; z-index:1; color:#f4ede1; padding:80px 0 56px; width:100%; }
.eyebrow{
  font-family: var(--sans);
  text-transform:uppercase; letter-spacing:.18em; font-size:12px;
  color:#e6cfa0; margin-bottom:20px; font-weight:600;
}
.hero h1{
  font-family: var(--serif);
  font-size:clamp(36px, 6vw, 68px);
  font-weight:500;
  letter-spacing:-0.015em;
  line-height:1.06;
  max-width:820px;
  margin:0 auto 20px;
}
.hero p.sub{ font-size:18.5px; max-width:560px; color:#e9ddc7; margin-left:auto; margin-right:auto; line-height:1.6; }
.hero .byline{
  margin-top:38px; font-family: var(--sans);
  font-size:12.5px; letter-spacing:.03em; color:#cbb98f;
  display:flex; gap:28px; flex-wrap:wrap; justify-content:center;
}
.hero .byline strong{ color:#f4ede1; display:block; font-size:13.5px; margin-bottom:3px; font-weight:600; }

/* ---------- CONTENTS / STICKY HEADER MENU ---------- */
.toc{
  position:sticky; top:0; z-index:100;
  background:var(--cream); border-bottom:1px solid var(--line); padding:16px 0;
  box-shadow:0 2px 12px rgba(35,25,15,0.06);
}
.toc-list{ list-style:none; display:flex; flex-wrap:wrap; gap:7px 22px; justify-content:center; font-family: var(--sans); font-size:12px; font-weight:500; }
.toc-list a{ color:var(--ink-soft); text-decoration:none; border-bottom:1px solid transparent; transition:color .15s ease, border-color .15s ease; white-space:nowrap; }
.toc-list a:hover{ color:var(--terracotta); border-bottom-color:var(--terracotta); }
.toc-list span{ color:var(--ochre-deep); font-weight:700; margin-right:5px; }
@media (max-width:900px){ .toc-list{ font-size:11.5px; gap:6px 14px; } }
@media (max-width:600px){
  .toc .wrap{ padding:0 20px; }
  .toc-list{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
  .toc-list li{ flex-shrink:0; }
}

/* ---------- UNIT PAGE HEADER / NAV ---------- */
.unit-nav{ background:var(--cream); border-bottom:1px solid var(--line); padding:16px 0; }
.unit-nav .wrap{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.unit-nav a{ font-family: var(--sans); font-size:13px; font-weight:500; color:var(--ink-soft); text-decoration:none; transition:color .15s ease; }
.unit-nav a:hover{ color:var(--terracotta); }
.unit-nav .prevnext{ display:flex; gap:20px; }
.page-header{ padding:68px 0 44px; background:var(--walnut); color:#efe6d6; }
.page-header .unit-num{ color:#e0a94f; }
.page-header h1{ font-family: var(--serif); font-size:clamp(30px,5vw,46px); font-weight:500; letter-spacing:-0.01em; color:#f4ede1; margin:12px auto 14px; max-width:760px; line-height:1.12; }
.page-header p{ color:#d8c8ad; max-width:640px; margin:0 auto; font-size:16.5px; line-height:1.6; }

/* ---------- SECTIONS ---------- */
section{ padding:100px 0; scroll-margin-top:64px; }
section.tight{ padding:64px 0; }
.section-label{
  font-family: var(--sans);
  text-transform:uppercase; letter-spacing:.16em; font-size:11.5px; font-weight:700;
  color:var(--ochre-deep); margin-bottom:18px;
}
h2{ font-family: var(--serif); font-size:clamp(28px,4vw,40px); font-weight:500; letter-spacing:-0.01em; color:var(--walnut); max-width:760px; margin:0 auto 22px; line-height:1.18; }
h3{ font-family: var(--serif); font-size:22px; font-weight:500; color:var(--walnut); line-height:1.25; }
.lede{ font-size:18px; color:var(--ink-soft); max-width:700px; margin:0 auto 12px; line-height:1.6; }
p{ margin:0 auto 16px; max-width:700px; color:var(--ink-soft); font-size:16.5px; }
.divider{ border:none; border-top:1px solid var(--line); margin:0; }

/* photo grid */
.grid{ display:grid; gap:14px; margin-top:40px; }
.grid.two{ grid-template-columns:1fr 1fr; }
.grid.three{ grid-template-columns:repeat(3,1fr); }
.grid.four{ grid-template-columns:repeat(4,1fr); }
@media (max-width:760px){
  .grid.three, .grid.four{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){
  .grid.two, .grid.three, .grid.four{ grid-template-columns:1fr; }
}
figure{ position:relative; overflow:hidden; border-radius:var(--radius-sm); background:#e9dfc9; }
figure img{ width:100%; height:100%; object-fit:cover; display:block; }
figure.tall img{ aspect-ratio: 3/4; }
figure.wide img{ aspect-ratio: 4/3; }
figcaption{
  font-family: var(--sans);
  font-size:12.5px; color:var(--ink-soft); margin-top:9px; line-height:1.45; text-align:center;
}

/* two column layout */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
@media (max-width:760px){ .split{ grid-template-columns:1fr; gap:32px; } }

/* designer cards */
.designers{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:36px; }
@media (max-width:760px){ .designers{ grid-template-columns:1fr; } }
.designer-card{ border-top:3px solid var(--ochre); padding-top:20px; }
.designer-card h3{ margin-bottom:5px; }
.designer-card .years{ font-family: var(--sans); font-size:12.5px; color:var(--ochre-deep); letter-spacing:.04em; margin-bottom:14px; display:block; font-weight:500;}
.designer-card p{ font-size:15.5px; margin-left:auto; margin-right:auto; }
.note{ font-family: var(--sans); font-size:13px; color:var(--sage); font-style:normal; }

/* palette swatches */
.palette{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin:36px 0 8px; }
.swatch{ width:128px; font-family: var(--sans); }
.swatch .chip{ width:100%; height:82px; border-radius:var(--radius-sm); margin-bottom:9px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);}
.swatch .name{ font-size:13px; font-weight:600; color:var(--ink); }
.swatch .hex{ font-size:11.5px; color:var(--ink-soft); }

/* case blocks / tags */
.tag{
  font-family: var(--sans);
  display:inline-block; font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; font-weight:700;
  color:#fff; background:var(--terracotta); padding:5px 12px; border-radius:20px; margin-bottom:14px;
}

/* dark section */
.dark{ background:var(--walnut); color:#efe6d6; }
.dark h2, .dark h3{ color:#f4ede1; }
.dark .lede, .dark p{ color:#d8c8ad; }
.dark .section-label{ color:#e0a94f; }

/* steps */
.steps{ counter-reset: step; margin-top:32px; }
.step{ display:grid; grid-template-columns:56px 1fr; gap:20px; padding:24px 0; border-top:1px solid rgba(255,255,255,0.14); text-align:center; }
.step:first-child{ border-top:none; }
.step .num{
  counter-increment: step; font-family: var(--serif); font-size:27px; font-weight:500; color:#e0a94f;
}
.step .num::before{ content: counter(step); }
.step h4{ font-family: var(--serif); font-size:18.5px; font-weight:500; color:#f4ede1; margin-bottom:7px; }
.step p{ color:#d8c8ad; font-size:15.5px; max-width:600px; margin:0 auto;}

/* ---------- UNIT BLOCKS (index page cards) ---------- */
.unit-block{ padding:56px 0; border-top:1px solid var(--line); }
.unit-block:first-of-type{ border-top:none; }
.unit-block-link{ display:block; text-decoration:none; color:inherit; transition:opacity .15s ease; }
.unit-block-link:hover{ opacity:0.82; }
.view-link{
  font-family: var(--sans);
  font-size:12.5px; color:var(--terracotta); font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  margin-top:14px; display:inline-block; text-decoration:none; transition:color .15s ease;
}
.view-link:hover{ color:var(--ochre-deep); }
.unit-block h3 a, .fee-block h3 a{ color:inherit; text-decoration:none; border-bottom:2px solid transparent; padding-bottom:2px; transition:color .15s ease, border-color .15s ease; }
.unit-block h3 a:hover, .fee-block h3 a:hover{ color:var(--terracotta); border-bottom-color:var(--terracotta); }
.unit-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:9px; flex-wrap:wrap; justify-content:center; }
.unit-num{ font-family: var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ochre-deep); }
.unit-body{ display:grid; grid-template-columns:320px 1fr; gap:36px; margin-top:24px; align-items:start; text-align:center; }
@media (max-width:800px){ .unit-body{ grid-template-columns:1fr; } }
.montage{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:4px; width:320px; aspect-ratio:1/1; margin:0 auto; border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow); }
.montage figure{ margin:0; }
.montage img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:800px){ .montage{ width:100%; max-width:320px; } }
.scope-list{ list-style:none; margin:0 auto 20px; padding:0; max-width:520px; }
.scope-list li{ font-size:15px; color:var(--ink-soft); margin-bottom:9px; line-height:1.55; }
.scope-list li::before{ content:"— "; color:var(--terracotta); }

/* ---------- BEFORE / AFTER COMPARISON (unit pages) ---------- */
.compare{ margin-top:40px; }
.compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:640px){ .compare-grid{ grid-template-columns:1fr; } }
.compare-col{ text-align:center; }
.compare-label{
  font-family: var(--sans);
  font-size:11px; text-transform:uppercase; letter-spacing:.1em; font-weight:700;
  color:var(--ochre-deep); margin-bottom:10px; display:block;
}
.compare-col.after .compare-label{ color:var(--terracotta); }
.compare-col figure{ aspect-ratio:3/4; background:var(--cream); }
.compare-col figure img{ object-fit:contain; }
.moodboard{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:36px; }
@media (max-width:760px){ .moodboard{ grid-template-columns:repeat(2,1fr); } }
.moodboard figure{ aspect-ratio:1/1; background:#fff; box-shadow:var(--shadow); }
.moodboard figure img{ object-fit:contain; padding:10px; }
.moodboard figcaption{ font-weight:400; color:var(--ink-soft); }
.moodboard figcaption strong{ font-weight:700; color:var(--ink); }
.dark .moodboard figcaption{ color:#d8c8ad; }
.dark .moodboard figcaption strong{ color:#f4ede1; }
.compare-caption{ font-family: var(--sans); font-size:13px; color:var(--sage); margin:36px auto 0; max-width:640px; }
.ai-note{
  font-family: var(--sans);
  font-size:11.5px; color:var(--sage); margin-top:44px; padding-top:20px; border-top:1px solid var(--line);
  max-width:640px; margin-left:auto; margin-right:auto;
}

/* price table */
table.price{ width:100%; border-collapse:collapse; font-family: var(--sans); font-size:13.5px; margin:6px auto 0; }
table.price th{ text-align:center; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; font-weight:700; color:var(--ochre-deep); padding:7px 8px 9px; border-bottom:1px solid var(--line); }
table.price td{ padding:9px 8px; border-bottom:1px solid var(--line); color:var(--ink-soft); vertical-align:middle; text-align:center; }
table.price td.num{ white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--ink); text-align:center; font-weight:500; }
table.price tr.subtotal td{ border-top:2px solid var(--walnut); border-bottom:none; font-weight:700; color:var(--ink); padding-top:11px; }
.conf{ display:inline-block; font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; padding:3px 7px; border-radius:4px; font-weight:700; white-space:nowrap; }
.conf.confirmed{ background:#e4ead9; color:var(--green); }
.conf.estimate{ background:#f1e6d3; color:var(--ochre-deep); }
.dark table.price th{ color:#e0a94f; border-bottom-color:rgba(255,255,255,0.16); }
.dark table.price td{ color:#d8c8ad; border-bottom-color:rgba(255,255,255,0.16); }
.dark table.price td.num{ color:#f4ede1; }
.dark table.price tr.subtotal td{ border-top-color:#e0a94f; color:#f4ede1; }
.dark .conf.confirmed{ background:rgba(228,234,217,0.15); color:#b9d19f; }
.dark .conf.estimate{ background:rgba(224,169,79,0.15); color:#e0a94f; }

.caveat{ font-family: var(--sans); font-size:12.5px; color:var(--sage); margin-top:10px; max-width:600px; margin-left:auto; margin-right:auto; line-height:1.55; }
.dark .caveat{ color:#a9b89e; }

/* budget rollup */
table.rollup{ width:100%; border-collapse:collapse; font-family: var(--sans); font-size:14.5px; margin-top:28px; text-align:center; }
table.rollup th{ text-align:center; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; font-weight:700; color:var(--ochre-deep); padding:9px 8px; border-bottom:1px solid var(--line); }
table.rollup td{ padding:11px 8px; border-bottom:1px solid var(--line); text-align:center; }
table.rollup td.num{ font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:500; }
table.rollup tr.total td{ border-top:2px solid var(--walnut); border-bottom:none; font-weight:700; font-size:17.5px; padding-top:17px; }

/* fee blocks */
.fee-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:28px; align-items:stretch; }
.fee-grid .fee-block{ margin-top:0; }
@media (max-width:760px){ .fee-grid{ grid-template-columns:1fr; } }

/* ---------- TIER CARDS (3 fee options) ---------- */
.tier-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px; align-items:stretch; }
@media (max-width:900px){ .tier-grid{ grid-template-columns:1fr; } }
.tier-grid .fee-block{ margin-top:0; display:flex; flex-direction:column; }
.tier-grid .fee-block.recommended{ border-color:var(--ochre-deep); border-width:2px; }
.tier-scope{ font-size:14.5px; min-height:66px; }
.tier-viz{ margin-top:18px; text-align:left; }
.tier-bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.tier-bar-label{ font-family: var(--sans); font-size:10px; text-transform:uppercase; letter-spacing:.06em; font-weight:600; color:var(--sage); width:38px; flex-shrink:0; }
.tier-bar-track{ flex:1; height:18px; background:var(--line); border-radius:5px; }
.tier-bar-fill{ height:18px; border-radius:0 5px 5px 0; }
.tier-bar-value{ font-family: var(--sans); font-size:12.5px; font-weight:700; color:var(--ink); white-space:nowrap; margin-left:8px; min-width:74px; }
.tier-rate{ font-family: var(--sans); font-size:12.5px; color:var(--sage); margin-top:8px; padding-top:12px; border-top:1px solid var(--line); }
.tier-rate strong{ color:var(--ink); }

/* ---------- SPLIT/STACKED BAR (revenue split) ---------- */
.season-card{ background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); padding:30px; margin-top:24px; text-align:left; box-shadow:var(--shadow); }
.season-card h4{ font-family: var(--serif); font-size:20px; font-weight:500; color:var(--walnut); margin-bottom:5px; text-align:center; }
.season-card .season-sub{ font-family: var(--sans); font-size:12.5px; color:var(--sage); text-align:center; margin-bottom:18px; }
.split-bar{ display:flex; gap:2px; height:40px; background:var(--paper); border-radius:6px; overflow:hidden; }
.split-bar .seg{ height:100%; }
.split-bar .seg.owner{ color:#fff; font-weight:700; font-size:13px; font-family: var(--sans); display:flex; align-items:center; justify-content:center; white-space:nowrap; }
.split-legend{ display:flex; gap:18px; justify-content:center; margin-top:14px; flex-wrap:wrap; font-family: var(--sans); }
.split-legend .item{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-soft); }
.split-legend .swatch{ width:11px; height:11px; border-radius:3px; flex-shrink:0; }
.dark .split-legend .item{ color:#d8c8ad; }
.dark .season-card h4{ color:var(--walnut); }
.dark .season-card .season-sub{ color:var(--sage); }
.fee-block{ background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); padding:34px; margin-top:28px; text-align:center; box-shadow:var(--shadow); }
.fee-block h3{ margin-bottom:11px; }
.fee-block p{ margin-left:auto; margin-right:auto; }
.fee-figure{ font-family: var(--sans); font-size:32px; font-weight:700; letter-spacing:-0.01em; color:var(--walnut); margin:14px auto 4px; }
.fee-sub{ font-family: var(--sans); font-size:13px; color:var(--sage); max-width:640px; margin:0 auto; line-height:1.55; }

/* closing */
.closing{ text-align:center; }
.closing .quote{ font-family: var(--serif); font-size:clamp(23px,3vw,31px); font-weight:500; color:var(--walnut); max-width:760px; margin:0 auto 32px; line-height:1.42; }
.sign{ font-family: var(--sans); }
.sign .name{ font-size:19px; color:var(--ink); font-weight:700; }
.sign .role{ font-size:13.5px; color:var(--ink-soft); margin-top:3px; }
.sign .contact{ font-size:13px; color:var(--ochre-deep); margin-top:11px; }

footer{ padding:36px 0 60px; font-family: var(--sans); font-size:12px; color:#b7a98a; text-align:center; }