.landing-seo .home-hero{background:#112f42;color:white;border-radius:28px;padding:48px;margin-top:34px;grid-template-columns:1.15fr 1fr}
.landing-seo .home-hero h1{font-size:clamp(38px,4.7vw,66px);line-height:1.08;letter-spacing:-.055em}
.landing-seo .home-hero h1 span{color:#81d4df}
.landing-seo .home-hero .lead,.landing-seo .hero-note{color:#d9e8ed}
.landing-seo .home-hero .primary-button{background:#a8e6dd;color:#102f43;font-weight:700}
.landing-seo .home-hero .outline-button{color:#17374b}
.landing-seo .hero-map{color:#17374b;padding:20px;background:#e9f3f3}
.landing-seo .facts{margin-top:30px}
.commune-directory>p:not(.eyebrow){max-width:780px;margin:18px 0;color:var(--muted)}
.commune-links{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:24px}
.commune-links a{display:flex;align-items:center;justify-content:space-between;gap:8px;background:white;border:1px solid var(--line);border-radius:10px;padding:15px;font-size:14px}
.commune-links a:hover{border-color:var(--accent);background:#eaf3f6}
.landing-history-image{float:right;width:42%;margin:0 0 20px 30px}
.landing-history-image img{display:block;width:100%;height:auto;border-radius:12px}
.landing-history-image figcaption{font-size:12px;color:#d1e0e7;padding-top:8px}
.landing-seo .history-home::after{content:'';display:block;clear:both}
.landing-faq{max-width:900px;margin:55px auto}
.landing-faq h2{margin-bottom:24px}
.landing-faq details{background:white;border:1px solid var(--line);border-radius:12px;padding:20px 24px;margin-bottom:12px}
.landing-faq summary{font-size:17px;font-weight:600}
.landing-faq details p{margin-top:16px;color:var(--muted)}
@media(max-width:850px){.landing-seo .home-hero{padding:28px;grid-template-columns:1fr}.commune-links{grid-template-columns:repeat(2,1fr)}.landing-history-image{float:none;width:100%;margin:24px 0}.landing-seo .home-hero h1{font-size:42px}}
@media(max-width:420px){.commune-links{grid-template-columns:1fr}.landing-seo .home-hero{padding:22px}.landing-seo .home-hero h1{font-size:36px}}

/* Keep the requested heading on two lines at every viewport width. */
.landing-seo .home-hero>div:first-child{container-type:inline-size;min-width:0}
.landing-seo .home-hero h1{font-size:clamp(1rem,9cqi,3.25rem);line-height:1.15}
.landing-seo .home-hero h1 span{white-space:nowrap}

.population-spotlight{background:#e9f3f3;color:#17374b;border-radius:20px;padding:28px;min-width:0}.population-spotlight h2{font-size:clamp(1.6rem,2.5vw,2.2rem);line-height:1.15;margin:14px 0}.population-spotlight p{line-height:1.55}.population-bars{list-style:none;padding:0;margin:24px 0}.population-bars li{margin:17px 0}.population-bars a{display:flex;justify-content:space-between;gap:12px;color:inherit;text-decoration:none;font-size:.95rem}.population-bars a:hover{text-decoration:underline}.population-track{display:block;background:#d3e2e5;height:10px;border-radius:8px;margin-top:7px;overflow:hidden}.population-track i{display:block;height:100%;background:#216978;border-radius:8px}.population-spotlight .source-link,.population-spotlight .text-link{display:block;margin-top:12px}@media(max-width:420px){.population-spotlight{padding:20px}.population-bars a{font-size:.85rem}}