:root { --cream:#F7F1E6; --paper:#FFFCF6; --tile:#1F3F7A; --tile-d:#152C57; --terra:#B84A2A; --terra-d:#963A1F; --ochre:#E3A43A; --ink:#1B1A17; --soft:#5F5A52; --line:#E4D9C6; --green:#3E6B48; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--cream); color:var(--ink); font:17px/1.62 'Onest',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; } img { max-width:100%; height:auto; display:block; }
h1, h2, h3 { font-variant-numeric:lining-nums; font-family:'Boska',Georgia,serif; font-weight:600; line-height:1.02; letter-spacing:-.015em; text-wrap:balance; }
h1 em, h2 em { font-style:italic; color:var(--terra); font-weight:500; }
.wrap { max-width:1200px; margin:0 auto; padding:0 24px; }
.skip { position:absolute; left:-999px; } .skip:focus { left:8px; top:8px; background:var(--tile); color:#fff; padding:8px; z-index:99; }
:focus-visible { outline:3px solid var(--ochre); outline-offset:3px; }
[hidden] { display:none !important; }

/* header */
.top { position:sticky; top:0; z-index:20; background:rgba(247,241,230,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.top .wrap { display:flex; align-items:center; gap:24px; height:72px; }
.logo { display:flex; align-items:flex-start; text-decoration:none; color:var(--tile); }
.logo img { width:38px; height:38px; margin-right:2px; }
.logo span { display:flex; flex-direction:column; }
.logo b { font:600 30px/1 'Boska',serif; letter-spacing:-.01em; margin-top:7px; }
.logo small { font:500 12.5px/1 'Onest'; letter-spacing:.06em; color:var(--terra); margin-top:3px; white-space:nowrap; }
.top nav { display:flex; gap:22px; margin-left:auto; align-items:center; }
.top nav a { text-decoration:none; font-weight:500; font-size:15.5px; color:var(--soft); padding:6px 0; border-bottom:2px solid transparent; }
.top nav a:hover, .top nav a[aria-current] { color:var(--ink); border-color:var(--terra); }
.top nav a.lang { border:1.5px solid var(--line); border-radius:999px; padding:5px 12px; }
.cta { text-decoration:none; font-weight:600; font-size:15px; background:var(--tile); color:#fff; padding:10px 18px; border-radius:8px; white-space:nowrap; }
.cta:hover { background:var(--tile-d); }

/* common */
.btn { display:inline-block; background:var(--terra); color:#fff; font-weight:600; text-decoration:none; padding:14px 22px; border-radius:8px; border:0; font-size:16px; cursor:pointer; font-family:inherit; }
.btn:hover { background:var(--terra-d); } .btn.line { background:transparent; color:inherit; box-shadow:inset 0 0 0 1.5px currentColor; }
.sec { padding:96px 0; } .sec h2 { font-size:clamp(38px,4.6vw,66px); margin:0 0 16px; }
.sec.alt { background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sec.dark { background:var(--tile-d); color:#E7ECF5; } .sec.dark h2 em { color:var(--ochre); } .sec.dark .lede { color:#B7C3DB; }
.lede { font-size:clamp(18px,1.5vw,20.5px); color:var(--soft); max-width:38em; margin:0 0 36px; }
.src { font-size:13.5px; color:var(--soft); margin-top:16px; }
.page-intro { padding:72px 0 30px; } .page-intro h1 { font-size:clamp(46px,6vw,88px); margin:0 0 18px; max-width:15ch; }
.page-intro p { font-size:clamp(18px,1.5vw,21px); color:var(--soft); max-width:36em; margin:0; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.photo { margin:0; border-radius:6px; overflow:hidden; position:relative; }
.photo img { width:100%; height:100%; object-fit:cover; }
.photo figcaption { position:absolute; left:12px; bottom:10px; font-size:12.5px; color:#fff; background:rgba(0,0,0,.45); padding:3px 8px; border-radius:4px; }

/* hero */
.hero { position:relative; min-height:min(calc(100vh - 72px),760px); display:grid; align-items:end; color:#fff; overflow:hidden; }
.hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; animation:drift 26s ease-in-out infinite alternate; }
.hero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(14,24,48,.05) 20%,rgba(14,24,48,.78) 100%); }
.hero .wrap { position:relative; z-index:1; padding-bottom:64px; width:100%; }
.hero h1 { font-size:clamp(52px,7.6vw,118px); margin:0 0 18px; max-width:12ch; }
.hero h1 em { color:#F3C987; }
.hero p { font-size:clamp(18px,1.6vw,22px); max-width:32em; margin:0 0 28px; color:#EEF1F6; }
.hero .btn.line { color:#fff; }
.hero small { position:absolute; right:16px; bottom:10px; z-index:1; font-size:12px; color:rgba(255,255,255,.75); }
@keyframes drift { from { transform:scale(1.04) translateX(0); } to { transform:scale(1.1) translateX(-1.5%); } }
@media (prefers-reduced-motion:reduce) { .hero > img { animation:none; } }

/* facts strip */
.facts { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); background:var(--paper); }
.facts div { padding:28px 24px; border-right:1px solid var(--line); }
.facts div:last-child { border-right:0; }
.facts b { display:block; font:600 40px/1 'Boska'; color:var(--tile); margin-bottom:8px; }
.facts span { font-size:15px; color:var(--soft); }

/* budget tool */
.bt { display:grid; grid-template-columns:330px 1fr; gap:22px 40px; }
.bt-ctl { display:grid; gap:18px; align-content:start; position:sticky; top:96px; }
.bt-b span { display:block; font-weight:600; }
.bt-b output { display:block; font:600 52px/1.1 'Boska'; color:var(--tile); margin:4px 0 8px; }
.bt-b input { width:100%; accent-color:var(--terra); }
.tick { display:flex; gap:10px; align-items:flex-start; font-size:15.5px; cursor:pointer; }
.tick input { width:18px; height:18px; margin:3px 0 0; accent-color:var(--terra); flex:none; }
.seg { display:inline-flex; border:1.5px solid var(--line); border-radius:8px; overflow:hidden; justify-self:start; }
.seg button { font:500 14.5px 'Onest'; background:none; border:0; padding:8px 14px; cursor:pointer; color:var(--soft); }
.seg button[aria-pressed=true] { background:var(--tile); color:#fff; }
.bt-city { margin:0; color:var(--soft); font-size:15px; }
.bars { list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.bars li { display:grid; grid-template-columns:170px 1fr 86px; gap:14px; align-items:center; font-size:15px; }
.bars .bar { height:22px; background:#EDE4D3; border-radius:3px; overflow:hidden; }
.bars .bar i { display:block; height:100%; width:var(--w); background:linear-gradient(90deg,var(--terra),#D0703F); border-radius:3px; transition:width .45s cubic-bezier(.2,.8,.2,1); }
.bars b { font:600 21px 'Boska'; text-align:right; } .bars small { font:500 13px 'Onest'; color:var(--soft); }
.bt > .src { grid-column:2; margin:4px 0 0; }

/* cost calculator */
.cc { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.cc-ctl, .cc-out { background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:26px; }
.cc-ctl { display:grid; gap:16px; }
.cc fieldset { border:0; padding:0; margin:0; display:grid; gap:8px; }
.cc legend, .fld { font-weight:600; }
.radio { display:flex; gap:10px; align-items:center; font-size:15.5px; border:1.5px solid var(--line); border-radius:8px; padding:10px 12px; cursor:pointer; }
.radio:has(input:checked) { border-color:var(--tile); background:#EEF2FA; }
.radio input { accent-color:var(--tile); width:17px; height:17px; margin:0; }
.fld { display:grid; gap:6px; font-size:15.5px; }
.fld input { font:500 20px 'Onest'; padding:11px 13px; border:1.5px solid var(--line); border-radius:8px; background:#fff; width:100%; color:var(--ink); }
.fld input:focus { border-color:var(--tile); outline:none; }
.only-resale { display:grid; gap:12px; }
.hint { font-size:14px; color:var(--soft); margin:0; }
.cc-out { position:sticky; top:96px; }
.cc-big { display:grid; grid-template-columns:1fr auto; align-items:end; border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:10px; }
.cc-big span { font-weight:600; grid-column:1 / -1; }
.cc-big b { font:600 clamp(48px,6vw,68px)/1 'Boska'; color:var(--terra); }
.cc-big small { font-size:15px; color:var(--soft); }
.cc-out table { width:100%; border-collapse:collapse; margin:4px 0 14px; font-size:15.5px; }
.cc-out th { text-align:left; font-weight:500; padding:7px 0; } .cc-out td { text-align:right; font-variant-numeric:tabular-nums; }
.cc-out tr.muted { color:var(--soft); }
.cc-out tr.tot th, .cc-out tr.tot td { border-top:1px solid var(--line); font-weight:700; padding-top:11px; }
.cc-out p { font-size:15px; margin:0 0 10px; }
.warn { background:#FBEBD2; border-left:3px solid var(--ochre); padding:10px 12px; border-radius:4px; }

/* districts table */
.dt { width:100%; border-collapse:collapse; font-size:16px; }
.dt th, .dt td { padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); }
.dt thead th { border-bottom:2px solid var(--ink); }
.dt thead button { font:600 14px 'Onest'; background:none; border:0; padding:0; cursor:pointer; color:var(--ink); }
.dt thead th[aria-sort=ascending] button::after { content:' ↑'; } .dt thead th[aria-sort=descending] button::after { content:' ↓'; }
.dt tbody th { font-weight:500; }
.dt td:nth-child(2), .dt td:nth-child(3) { font-variant-numeric:tabular-nums; white-space:nowrap; }
.dt .up { color:var(--green); } .dt .dn { color:var(--terra); }
.dt .vis { width:38%; } .dt .vis span { display:block; height:12px; width:var(--w); background:var(--tile); border-radius:2px; opacity:.85; }
.dt tfoot th, .dt tfoot td { font-weight:700; border-bottom:0; border-top:2px solid var(--ink); }

/* district cards */
.dcards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.dcard { background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:20px 22px; }
.dcard h3 { font-size:27px; margin:0 0 4px; display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.dcard h3 small { font:600 14px 'Onest'; color:var(--tile); letter-spacing:0; white-space:nowrap; }
.dcard p { margin:0; font-size:15.5px; color:var(--soft); }

/* steps */
.steps { list-style:none; margin:0; padding:0; counter-reset:s; display:grid; gap:0; }
.steps > li { counter-increment:s; display:grid; grid-template-columns:76px 1fr; gap:22px; padding:26px 0; border-top:1px solid var(--line); }
.steps > li::before { content:counter(s); font:600 54px/1 'Boska'; color:var(--terra); }
.steps h3 { font-size:30px; margin:0 0 8px; } .steps p { margin:0 0 8px; max-width:44em; } .steps p:last-child { margin-bottom:0; }
.cards3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cards3 a, .cards3 div { display:block; text-decoration:none; background:var(--paper); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.cards3 img { aspect-ratio:4/3; object-fit:cover; width:100%; }
.cards3 .c { padding:18px 20px 22px; } .cards3 h3 { font-size:28px; margin:0 0 6px; } .cards3 p { margin:0; color:var(--soft); font-size:15.5px; }
.cards3 a:hover h3 { color:var(--terra); }
.sec.dark .cards3 div { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); padding:22px; } .sec.dark .cards3 p { color:#B7C3DB; }

/* faq */
.faq { max-width:840px; }
.faq details { border-top:1px solid var(--line); padding:18px 0; }
.faq details:last-child { border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; font:600 23px/1.25 'Boska'; list-style:none; display:flex; justify-content:space-between; gap:18px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; font:400 26px/1 'Onest'; color:var(--terra); transition:transform .2s; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { margin:12px 0 0; color:var(--soft); max-width:44em; }

/* contact */
.ask { display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:start; }
.ask ul { padding-left:20px; } .ask li { margin-bottom:8px; }
.mail { display:inline-block; font:600 clamp(22px,2.6vw,32px) 'Boska'; color:var(--tile); word-break:break-all; }

/* footer */
.foot { background:var(--ink); color:#D9D3C7; font-size:14.5px; padding:52px 0 36px; }
.foot-g { display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; }
.foot-b { font:600 24px 'Boska'; color:#fff; margin:0 0 8px; } .foot-h { font-weight:600; color:#fff; margin:0 0 10px; }
.foot-g a { display:block; text-decoration:none; color:#BDB6A8; margin-bottom:6px; } .foot-g a:hover { color:#fff; }
.foot-g p { margin:0; max-width:34em; }
.foot .fine { color:#948D80; margin:34px 0 0; padding-top:20px; border-top:1px solid #34312B; }

@media (max-width:1020px) {
  .top nav a:not(.lang) { display:none; }
  .two, .cc, .ask { grid-template-columns:1fr; gap:32px; }
  .bt { grid-template-columns:1fr; } .bt-ctl, .cc-out { position:static; } .bt > .src { grid-column:auto; }
  .facts { grid-template-columns:1fr 1fr; } .facts div:nth-child(2) { border-right:0; } .facts div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .dcards, .cards3 { grid-template-columns:1fr 1fr; } .foot-g { grid-template-columns:1fr 1fr; } .foot-g > div:first-child { grid-column:1 / -1; }
}
@media (max-width:620px) {
  body { font-size:16.5px; } .sec { padding:64px 0; } .wrap { padding:0 18px; }
  .cta { display:none; } .logo b { font-size:26px; } .logo img { width:34px; height:34px; }
  .facts b { font-size:32px; } .facts div { padding:20px 18px; }
  .bars li { grid-template-columns:118px 1fr 64px; gap:8px; font-size:13.5px; } .bars b { font-size:18px; }
  .dcards, .cards3 { grid-template-columns:1fr; }
  .dt { font-size:14.5px; } .dt th, .dt td { padding:9px 6px; } .dt .vis { display:none; }
  .steps > li { grid-template-columns:44px 1fr; gap:12px; } .steps > li::before { font-size:40px; } .steps h3 { font-size:25px; }
  .hero .wrap { padding-bottom:44px; }
}
.facts b, .bt-b output, .bars b, .cc-big b, .steps > li::before, .dcard h3, .foot-b { font-variant-numeric:lining-nums; }
.hero h1, .hero p { text-shadow:0 2px 18px rgba(10,18,40,.45); }