/* Hallmark · shape: Index-First adapted to Counter · genre: modern-minimal · theme: Coral · deal: 1/3 seed swedish-b2b-corporate-moving-beb4 · draw: 02f96e · posture: restrained · axes: light/grotesk-sans/warm · hero: Counter · nav: grouped navigation · footer: statement · signature: photographic office and packing scenes with original F mark · revision: bilingual site and adaptive theme 2026-11-05 · modes: light+dark · finish-review: ship, 4 resolved · gap: none · v2.0.0 */
/* critique: add English and Swedish page pairs and two colour modes, keeping the Coral identity, content, photo crops and working navigation. */
/* Hallmark · waive 44c · Render evidence: office photograph spans y185–835 at 1440×900 · The checker isolates the English hero copy. The photograph fills the rest of the photographic hero. */
/* Hallmark · waive 79 · The 650px hero photograph extends below the copy column · The supposed English empty band is occupied by the office photograph in the same split hero. */
/* Hallmark · dismissed 25 · Short leads, service summaries and footer captions deliberately use 35 to 40ch; article prose has 72ch. */
/* Hallmark · answered F15 · The common page container stays 1440px; diagram objects alone are capped at 960px. Column gaps follow existing section and article spacing tokens. */
/* Hallmark · answered F20 · The guide finder deliberately has one full-width heading followed by four equal destinations; no destination is orphaned. */
@import url('./tokens.css');
@import url('./base.css');

.js-only { display: none; }
.js .js-only { display: block; }
.js .nojs { display: none; }
.site-header { background: var(--color-paper); }
.nav-bar { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.wordmark { font-size: 25px; letter-spacing: -0.04em; font-weight: 600; text-decoration: none; white-space: nowrap; }
.wordmark span { color: var(--color-muted); }
.nav-bar nav { display: flex; align-items: center; gap: var(--space-xl); font-size: var(--text-sm); }
.nav-bar nav a { text-decoration: none; padding-block: var(--space-sm); }
.nav-bar nav a:hover { text-decoration: underline; text-decoration-color: var(--color-accent-2); }
.nav-action { border-bottom: 1px solid var(--color-ink); }
.skip-link { position: absolute; left: var(--space-lg); top: var(--space-xs); padding: var(--space-sm); background: var(--color-cotton); color: var(--color-ink); transform: translateY(-180%); z-index: var(--z-tooltip); }
.skip-link:focus-visible { transform: translateY(0); }
.hero { background: var(--color-desk); color: var(--color-ink); padding-block: var(--space-2xl) var(--space-xl); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; min-height: 520px; }
.hero-copy h1 { max-width: 12ch; }
.hero-copy .lead { max-width: 30ch; margin-top: var(--space-lg); }
.hero-copy .text-link { display: inline-block; margin-top: var(--space-xl); }
.quote-sheet { background: var(--color-cotton); color: var(--color-print); padding: var(--space-xl); border-radius: var(--radius-card); box-shadow: var(--edge-stock), var(--cast-stock); scroll-margin-top: var(--space-lg); }
.quote-sheet h2 { font-size: var(--text-title); max-width: 20ch; margin-bottom: var(--space-lg); }
.quote-form label { display: block; font-size: var(--text-sm); margin-bottom: var(--space-xs); font-weight: 500; }
.quote-form select { display: block; min-height: 52px; width: 100%; padding: var(--space-sm); margin-bottom: var(--space-lg); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-cotton); color: var(--color-ink); cursor: pointer; }
.quote-form select:hover { border-color: var(--color-ink); }
.quote-form select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.destination { font-size: var(--text-sm); min-height: 2lh; margin-bottom: var(--space-sm); color: var(--color-muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: var(--space-sm) var(--space-lg); border: 0; border-radius: var(--radius-stock); background: var(--color-action); color: var(--color-action-type); font-weight: 500; line-height: 1.35; text-align: center; text-decoration: none; box-shadow: var(--cast-stock); cursor: pointer; transition: transform var(--dur-micro) var(--ease-out); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.quote-form .btn { width: 100%; }
.form-note { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-md); }
.fallback-link { display: block; padding-block: var(--space-sm); }
.hero-foot { display: flex; justify-content: space-between; gap: var(--space-lg); padding-top: var(--space-2xl); font-size: var(--text-sm); color: var(--color-muted); }
.text-link { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: var(--color-accent-2); font-weight: 500; }
.text-link:hover { text-decoration-thickness: 2px; }
.section { padding-block: var(--section-gap-s); }
.section-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.section-head h2 { max-width: 18ch; }
.section-head p { color: var(--color-muted); font-size: var(--text-lead); max-width: 35ch; }
.planning-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; }
.planning-grid > div { padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-2); }
dt { font-weight: 500; }
.planning-grid dt { font-size: var(--text-title); line-height: 1.25; max-width: 15ch; }
dd { margin: var(--space-md) 0 0; color: var(--color-muted); }
.scope { background: var(--color-board); color: var(--color-board-type); }
.scope-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); gap: var(--gap-columns); }
.scope h2 { max-width: 15ch; }
.scope .lead { margin-top: var(--space-lg); max-width: 26ch; }
.service-index a { display: block; border-bottom: 1px solid var(--color-muted); padding-block: var(--space-lg); text-decoration: none; }
.service-index a:first-child { padding-top: 0; }
.service-index a:hover .index-label { text-decoration-thickness: 2px; }
.service-index p { margin-top: var(--space-sm); max-width: 40ch; }
.index-label { display: inline-block; margin-top: var(--space-lg); font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 0.3em; }
.price-rows { margin: 0 0 var(--space-xl); }
.price-rows > div { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--gap-columns); padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule-2); }
.price-rows dt { font-size: var(--text-title); }
.price-rows dt { font-variant-numeric: tabular-nums; }
.price-rows dd { margin: 0; }
.guides { background: var(--color-paper-2); }
.guide-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.guide-grid > a { display: flex; flex-direction: column; align-items: start; gap: var(--space-lg); min-height: 300px; padding: var(--space-xl); text-decoration: none; }
.guide-lead { background: var(--color-cotton); color: var(--color-print); box-shadow: var(--edge-stock), var(--cast-stock); border-radius: var(--radius-card); }
.guide-lead h3 { font-size: var(--text-section); max-width: 15ch; }
.guide-side h3 { font-size: var(--text-title); max-width: 20ch; }
.guide-grid .text-link { margin-top: auto; font-size: var(--text-sm); }
.guide-grid > a:hover .text-link { text-decoration-thickness: 2px; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--gap-columns); }
.faq h2 { max-width: 12ch; }
details { border-bottom: 1px solid var(--color-rule-2); }
summary { padding-block: var(--space-lg); cursor: pointer; font-size: var(--text-lead); font-weight: 500; }
summary:hover { text-decoration: underline; text-decoration-color: var(--color-accent-2); }
details p { padding-bottom: var(--space-lg); color: var(--color-muted); }
.closing { padding-block: var(--space-2xl); background: var(--color-paper-3); }
.closing-grid { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); }
.closing h2 { max-width: 18ch; }
.closing .btn { flex-shrink: 0; }
.site-footer { padding-block: var(--space-2xl) var(--space-xl); }
.footer-top { display: flex; align-items: start; justify-content: space-between; gap: var(--gap-columns); padding-bottom: var(--space-2xl); }
.footer-top p { max-width: 36ch; }
.footer-bottom { padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-2); display: flex; justify-content: space-between; gap: var(--gap-columns); font-size: var(--text-sm); color: var(--color-muted); }
.footer-bottom p { max-width: 40ch; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.article { padding-block: var(--space-xl) var(--section-gap-s); }
.back-link { display: inline-block; padding-block: var(--space-sm); margin-bottom: var(--space-xl); font-size: var(--text-sm); }
.article-head { max-width: 1000px; padding-bottom: var(--space-2xl); }
.article-head h1 { max-width: 19ch; font-size: var(--text-display-s); }
.article-head .lead { margin-top: var(--space-lg); }
.article-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 0.8fr); gap: var(--space-2xl); align-items: start; }
.article-body { max-width: 72ch; line-height: 1.7; }
.article-body h2 { font-size: var(--text-section); margin: var(--space-2xl) 0 var(--space-lg); }
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { margin: var(--space-xl) 0 var(--space-md); }
.article-body p + p { margin-top: var(--space-md); }
.article-body ul, .article-body ol { padding-left: var(--space-lg); }
.article-body li { margin-bottom: var(--space-md); padding-left: var(--space-xs); }
.article-aside { position: sticky; top: var(--space-xl); background: var(--color-paper-2); color: var(--color-ink); padding: var(--space-lg); }
.article-aside h2 { font-size: var(--text-title); }
.article-aside p { margin-block: var(--space-lg); }
.article-aside a { display: block; margin-top: var(--space-lg); }
.checklist { list-style: none; padding: 0 !important; }
.checklist li { border-bottom: 1px solid var(--color-rule-2); margin: 0; padding: 0; }
.checklist label { display: flex; align-items: start; gap: var(--space-md); padding-block: var(--space-lg); cursor: pointer; }
.checklist input { accent-color: var(--color-ink); width: 22px; height: 22px; flex-shrink: 0; margin-top: var(--space-2xs); }
.checklist input:checked + span { color: var(--color-muted); }
.checklist strong { font-weight: 500; display: block; }
.checklist label:hover strong { text-decoration: underline; }
.checklist-tools { margin-block: var(--space-xl); }
.checklist-tools p { margin-block: var(--space-md); }
.checklist-status { min-height: 1lh; color: var(--color-muted); font-size: var(--text-sm); }
.guide-finder .guide-route { display: block; padding-block: var(--space-lg); border-top: 1px solid var(--color-rule-2); text-decoration: none; }
.guide-route strong { display: block; font-weight: 500; font-size: var(--text-lead); line-height: 1.3; }
.guide-route span { display: block; margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.guide-route:hover strong { text-decoration: underline; text-decoration-color: var(--color-accent-2); }
.guide-finder .btn { margin-top: var(--space-lg); width: 100%; }
.commercial-note { margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }
.source-note { margin-top: var(--space-xl); color: var(--color-muted); font-size: var(--text-sm); }
.directory-list { display: grid; grid-template-columns: minmax(0, 1fr); }
.directory-list > a { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: start; padding-block: var(--space-xl); border-top: 1px solid var(--color-rule-2); text-decoration: none; }
.directory-list h2 { font-size: var(--text-title); }
.directory-list p { color: var(--color-muted); }
.directory-list .text-link { grid-column: 2; font-size: var(--text-sm); }
.directory-list > a:hover .text-link { text-decoration-thickness: 2px; }
@media (min-width: 90rem) { .hero { padding-top: var(--space-3xl); } .hero-grid { min-height: 590px; } }
@media (max-width: 70rem) { .nav-bar nav { gap: var(--space-lg); } .hero-grid { gap: var(--gap-columns); } .quote-sheet { padding: var(--space-lg); } }
@media (max-width: 60rem) {
  .nav-bar { min-height: 80px; flex-wrap: wrap; padding-block: var(--space-md); gap: var(--space-sm); }
  .nav-bar nav { width: 100%; justify-content: space-between; gap: var(--space-md); font-size: var(--text-sm); }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
  .hero-copy h1 { font-size: var(--text-display-s); }
  .hero-foot { padding-top: var(--space-xl); }
  .planning-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .guide-grid > a { padding: var(--space-lg); }
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .article-aside { position: static; max-width: 72ch; }
  .footer-bottom { flex-direction: column; }
}
@media (max-width: 40rem) {
  .wordmark { font-size: 23px; }
  .nav-bar nav { font-size: var(--text-sm); gap: var(--space-xs); }
  .nav-bar nav a { padding-block: var(--space-xs); }
  .hero { padding-block: var(--space-lg); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .hero-copy h1 { max-width: 14ch; font-size: var(--text-display); }
  .hero-copy .lead { margin-top: var(--space-md); max-width: 28ch; }
  .hero-copy .text-link { margin-top: var(--space-md); }
  .quote-sheet h2 { margin-bottom: var(--space-md); }
  .quote-form select { min-height: 48px; margin-bottom: var(--space-md); }
  .quote-form .btn { min-height: 48px; }
  .destination { min-height: 1lh; }
  .guide-finder .guide-route { padding-block: var(--space-md); }
  .guide-finder .btn { margin-top: var(--space-md); }
  .directory-list > a { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .directory-list .text-link { grid-column: 1; }
  .hero-foot { flex-direction: column; gap: var(--space-md); }
  .section-head, .scope-grid, .faq-grid, .guide-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .section-head { margin-bottom: var(--space-xl); }
  .planning-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .planning-grid dt { max-width: none; }
  .planning-grid dd { margin-top: var(--space-xs); max-width: 35ch; }
  .price-rows > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .guide-grid { margin-top: var(--space-xl); }
  .guide-grid > a { min-height: 250px; }
  .closing-grid, .footer-top { flex-direction: column; align-items: start; }
  .closing-grid .btn { width: 100%; }
  .footer-top { padding-bottom: var(--space-xl); }
  .footer-bottom nav { flex-direction: column; align-items: start; gap: var(--space-md); }
  .article-head { padding-bottom: var(--space-xl); }
}
@media print {
  .site-header, .site-footer, .article-aside, .checklist-tools, .back-link { display: none; }
  .article { padding: 0; }
  .article-layout { display: block; }
  .article-body h2 { break-after: avoid; }
  .checklist li { break-inside: avoid; }
}

:root { --nav-height: 88px; --nav-panel-width: 360px; }
.site-header { position: sticky; top: 0; z-index: var(--z-sticky-nav); border-bottom: 1px solid var(--color-rule); }
.site-header .nav-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; min-height: var(--nav-height); gap: var(--gap-columns); padding-block: 0; }
.site-header #primary-nav { display: flex; align-items: center; gap: var(--space-xs); width: auto; font-size: var(--text-sm); }
.nav-bar #primary-nav > a, .nav-group > summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: var(--space-sm) var(--space-md); gap: var(--space-sm); border-radius: var(--radius-input); font-weight: 500; line-height: 1.4; text-decoration: none; cursor: pointer; }
.nav-bar #primary-nav > a:hover, .nav-group > summary:hover { background: var(--color-paper-2); text-decoration: none; }
.nav-bar #primary-nav a:active, .nav-group > summary:active, .menu-toggle:active { transform: translateY(1px); }
.nav-bar #primary-nav a[aria-current], .nav-group > summary.is-current { text-decoration: underline; text-underline-offset: 0.3em; }
.nav-bar #primary-nav .nav-checklist { margin-left: var(--space-sm); border: 1px solid var(--color-muted); }
.nav-group { position: relative; border: 0; }
.nav-group > summary { list-style: none; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::marker { content: ''; }
.nav-chevron { display: block; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--dur-micro) var(--ease-out); margin-right: var(--space-2xs); }
.nav-group[open] > summary .nav-chevron { transform: rotate(225deg); }
.nav-dropdown { position: absolute; top: calc(100% + var(--space-sm)); left: 0; display: grid; width: var(--nav-panel-width); padding: var(--space-xs); background: var(--color-cotton); color: var(--color-ink); border-radius: var(--radius-card); box-shadow: var(--edge-stock), var(--cast-stock); }
.nav-group:nth-of-type(2) .nav-dropdown { left: auto; right: 0; }
.nav-bar .nav-dropdown a { display: block; min-height: 64px; padding: var(--space-md); border-radius: var(--radius-input); text-decoration: none; }
.nav-bar .nav-dropdown a:hover { background: var(--color-paper-2); text-decoration: none; }
.nav-dropdown strong { display: block; font-size: var(--text-md); font-weight: 500; line-height: 1.35; }
.nav-dropdown span { display: block; margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); line-height: 1.4; }
.menu-toggle { display: none; align-items: center; justify-content: center; gap: var(--space-sm); min-height: 48px; min-width: 96px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); cursor: pointer; }
.menu-toggle:hover { background: var(--color-paper-2); }
.menu-symbol { position: relative; display: block; width: 18px; height: 12px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
.menu-symbol::after { content: ''; position: absolute; inset: 50% 0 auto; height: 1.5px; background: currentColor; }
.site-header[data-menu-open="true"] .menu-symbol { border: 0; }
.site-header[data-menu-open="true"] .menu-symbol::after { transform: rotate(45deg); }
.site-header[data-menu-open="true"] .menu-symbol::before { content: ''; position: absolute; inset: 50% 0 auto; height: 1.5px; background: currentColor; transform: rotate(-45deg); }
.article-showcase { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--gap-columns); }
.article-feature { display: flex; flex-direction: column; align-items: start; gap: var(--space-lg); padding: var(--space-xl); background: var(--color-cotton); color: var(--color-ink); border-radius: var(--radius-card); box-shadow: var(--edge-stock), var(--cast-stock); text-decoration: none; }
.article-feature h3 { font-size: var(--text-section); max-width: 15ch; }
.article-feature p { max-width: 35ch; font-size: var(--text-lead); }
.article-feature .text-link { margin-top: auto; }
.article-stack > a { display: block; padding-block: var(--space-lg); border-top: 1px solid var(--color-rule-2); text-decoration: none; }
.article-stack > a:first-child { padding-top: 0; border-top: 0; }
.article-stack h3 { max-width: 24ch; }
.article-stack p { margin-top: var(--space-sm); color: var(--color-muted); }
.article-stack .text-link { display: inline-block; margin-top: var(--space-md); font-size: var(--text-sm); }
.article-showcase a:hover .text-link { text-decoration-thickness: 2px; }
.articles-section { background: var(--color-paper-2); color: var(--color-ink); }
.articles-section .section-head > a { justify-self: end; }
@media (max-width: 70rem) and (min-width: 60.01rem) {
  .site-header #primary-nav { gap: var(--space-2xs); }
  .nav-bar #primary-nav > a, .nav-group > summary { padding-inline: var(--space-sm); }
  .site-header .wordmark { font-size: 23px; }
}
@media (max-width: 72rem) {
  :root { --nav-height: 80px; }
  .site-header .nav-bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: var(--nav-height) auto; row-gap: 0; }
  .js .menu-toggle { display: inline-flex; }
  .site-header #primary-nav { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2xs); padding-block: var(--space-md) var(--space-lg); width: 100%; max-height: calc(100dvh - var(--nav-height) - var(--space-lg)); overflow-y: auto; border-top: 1px solid var(--color-rule); font-size: var(--text-md); }
  .js .site-header[data-menu-open="false"] #primary-nav { display: none; }
  .nav-bar #primary-nav > a, .nav-group > summary { min-height: 48px; padding: var(--space-sm) var(--space-md); }
  .nav-bar #primary-nav .nav-checklist { margin: var(--space-sm) 0 0; justify-content: center; }
  .nav-dropdown, .nav-group:nth-of-type(2) .nav-dropdown { position: static; width: auto; padding: 0 0 var(--space-md) var(--space-md); background: var(--color-paper); color: var(--color-ink); border-radius: 0; box-shadow: none; }
  .nav-bar .nav-dropdown a { min-height: 64px; }
  .article-feature { padding: var(--space-lg); }
}
@media (max-width: 40rem) {
  .site-header .wordmark { font-size: 22px; }
  .site-header .nav-bar { column-gap: var(--space-sm); }
  .menu-toggle { min-width: 88px; }
  .article-showcase { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .article-feature { min-height: 300px; }
  .articles-section .section-head > a { justify-self: start; }
}
@media print { .site-header { display: none; } }

.article-stack > a:hover h3 { text-decoration: underline; text-decoration-color: var(--color-accent-2); text-underline-offset: 0.15em; }

.article-feature { min-height: 520px; }
.article-stack { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); }
.article-stack > a { display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 40rem) { .article-feature { min-height: 300px; } .article-stack { display: block; } }
.nav-group > summary { font-size: inherit; }

.wordmark { display: inline-flex; width: 232px; max-width: 100%; flex-shrink: 0; }
.wordmark .brand-logo { display: block; width: 100%; height: auto; }
.site-footer .wordmark { width: 282px; }
.site-illustration { margin: 0; width: 100%; min-width: 0; }
.site-illustration .art-scene { display: block; width: 100%; height: auto; max-width: 100%; }
.hero-copy h1 { font-size: clamp(2.75rem, 4.2vw + 0.5rem, 4.5rem); }
.hero-copy .text-link { margin-top: var(--space-lg); }
.hero-copy > .site-illustration { margin-top: var(--space-lg); max-width: 560px; }
.hero-copy > .site-illustration svg { max-height: 180px; }
.planning .container > .site-illustration, .price .container > .site-illustration { max-width: 960px; margin: 0 auto var(--space-2xl); }
.planning .container > .site-illustration svg, .price .container > .site-illustration svg { max-height: 380px; }
.scope-grid > div > .site-illustration { margin-top: var(--space-xl); background: var(--color-scope-art); color: var(--color-ink); border-radius: var(--radius-card); }
.articles-section .container > .site-illustration { max-width: 640px; margin: 0 0 var(--space-xl); }
.articles-section .container > .site-illustration svg { max-height: 230px; }
.article-feature > .site-illustration { margin-bottom: var(--space-sm); }
.article-feature > .site-illustration svg { max-height: 250px; }
.article-stack > a { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr); column-gap: var(--gap-columns); align-content: center; align-items: center; }
.article-stack > a > .site-illustration { grid-row: 1 / 3; }
.article-stack > a > p { margin: var(--space-xs) 0 0; }
.faq-grid > div > .site-illustration { margin-top: var(--space-xl); max-width: 460px; }
.closing-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) auto; gap: var(--gap-columns); }
.closing-grid > .site-illustration svg { max-height: 190px; }
.footer-bottom { align-items: center; }
.footer-bottom > .site-illustration { max-width: 320px; }
.footer-bottom > .site-illustration svg { max-height: 150px; }
.illustrated-page-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: center; max-width: none; }
.illustrated-page-head > .site-illustration svg { max-height: 360px; }
.article-content-section + .article-content-section { margin-top: var(--space-2xl); }
.article-content-section h2 { margin-top: 0; }
.article-content-section > .site-illustration { margin: var(--space-lg) 0; }
.article-content-section > .site-illustration svg { max-height: 290px; }
.article-aside > .site-illustration { margin-bottom: var(--space-lg); }
.article-aside > .site-illustration svg { max-height: 180px; }
.directory-list > a { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
.directory-list > a > .site-illustration { grid-row: 1 / 3; }
.directory-list > a > .site-illustration svg { max-height: 170px; }
.directory-list .text-link { grid-column: 2 / -1; }
[data-visual-section="not-found"] .container > .site-illustration { max-width: 640px; margin-bottom: var(--space-xl); }
@media (max-width: 60rem) {
  .wordmark { width: 216px; }
  .illustrated-page-head { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .illustrated-page-head > .site-illustration { max-width: 640px; }
  .closing-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
  .closing-grid > .btn { grid-column: 1 / -1; justify-self: start; }
  .footer-bottom { align-items: start; }
}
@media (max-width: 40rem) {
  .site-header .wordmark { width: 176px; }
  .site-footer .wordmark { width: 252px; }
  .hero-copy h1 { font-size: var(--text-display); }
  .hero-copy > .site-illustration svg { max-height: 125px; }
  .planning .container > .site-illustration, .price .container > .site-illustration { margin-bottom: var(--space-xl); }
  .articles-section .container > .site-illustration svg { max-height: 180px; }
  .article-stack > a { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr); column-gap: var(--space-md); }
  .article-stack > a > .site-illustration svg { max-height: 140px; }
  .article-stack h3 { font-size: var(--text-lead); }
  .closing-grid { grid-template-columns: minmax(0, 1fr); }
  .closing-grid > .site-illustration { max-width: 320px; }
  .illustrated-page-head > .site-illustration svg { max-height: 250px; }
  .article-content-section > .site-illustration svg { max-height: 230px; }
  .directory-list > a { grid-template-columns: minmax(0, 1fr); }
  .directory-list > a > .site-illustration { grid-row: auto; max-width: 440px; }
  .directory-list > a > .site-illustration svg { max-height: 200px; }
  .directory-list .text-link { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) { .art-scene, .art-scene * { animation: none !important; transition: none !important; } }
@media print { .site-illustration { break-inside: avoid; } .art-scene, .art-scene * { animation: none !important; } }

/* Photography complements the original planning diagrams throughout the site. */
.site-photo { margin: 0; min-width: 0; width: 100%; background: var(--color-paper-3); border-radius: var(--radius-card); overflow: clip; outline: 1px solid var(--color-rule); outline-offset: -1px; }
.site-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.65) contrast(0.97) sepia(0.08); }
.hero-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.hero-grid > .site-photo { height: clamp(520px, calc(100svh - 250px), 780px); }
.hero-copy > .site-illustration { max-width: 400px; margin-top: var(--space-xl); }
.hero-copy > .site-illustration svg { max-height: 140px; }
.guide-shortcuts { background: var(--color-cotton); padding-block: var(--space-xl); border-bottom: 1px solid var(--color-rule); }
.guide-shortcuts .guide-finder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); padding: 0; border-radius: 0; box-shadow: none; }
.guide-shortcuts .guide-finder h2 { grid-column: 1 / -1; margin: 0; }
.guide-shortcuts .guide-route { padding: var(--space-md) 0 0; }
.guide-shortcuts .guide-finder .btn { margin: 0; align-self: center; }
.planning-media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: center; margin-bottom: var(--space-2xl); }
.planning-media > .site-photo { height: 400px; }
.planning-media > .site-illustration svg { max-height: 340px; }
.illustrated-page-head { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: var(--space-xl); padding-bottom: var(--space-xl); }
.illustrated-page-head h1 { max-width: 18ch; }
.illustrated-page-head > .site-photo { height: 470px; }
.illustrated-page-head .btn { margin-top: var(--space-xl); }
.page-plan { max-width: 960px; margin: 0 auto var(--space-2xl); }
.page-plan > .site-illustration svg { max-height: 220px; }
.article-photo { height: 380px; margin-block: var(--space-2xl); }
.article-feature > .site-photo { height: 310px; }
.article-feature > .site-illustration { max-width: 220px; margin: 0; }
.article-feature > .site-illustration svg { max-height: 110px; }
.article-stack > a { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); row-gap: var(--space-xs); }
.article-stack > a > .site-photo { grid-column: 1; grid-row: 1 / 3; height: 170px; }
.article-stack > a > h3 { grid-column: 2; grid-row: 1; align-self: end; }
.article-stack > a > p { grid-column: 2; grid-row: 2 / 4; align-self: start; }
.article-stack > a > .site-illustration { grid-column: 1; grid-row: 3; }
.article-stack > a > .site-illustration svg { max-height: 75px; }
.directory-list > a { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); row-gap: var(--space-md); }
.directory-visual { grid-column: 1; grid-row: 1 / 4; }
.directory-visual > .site-photo { height: 240px; }
.directory-visual > .site-illustration { margin-top: var(--space-md); }
.directory-visual > .site-illustration svg { max-height: 100px; }
.directory-list h2, .directory-list p, .directory-list .text-link { grid-column: 2; }
.directory-list h2 { align-self: end; }
.directory-list p { max-width: 40ch; }
.photo-credits { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-xl); max-width: 85ch; }
@media (max-width: 60rem) {
  .hero-grid { gap: var(--space-lg); }
  .hero-grid > .site-photo { height: 450px; }
  .guide-shortcuts .guide-finder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .illustrated-page-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); }
  .illustrated-page-head > .site-photo { height: 390px; }
  .planning-media > .site-photo { height: 320px; }
  .article-stack > a > .site-photo { height: 150px; }
  .article-stack > a > .site-illustration svg { max-height: 60px; }
}
@media (max-width: 40rem) {
  .hero { padding-top: var(--space-xl); }
  .hero-grid, .illustrated-page-head, .planning-media { grid-template-columns: minmax(0, 1fr); }
  .hero-copy h1 { font-size: clamp(2.6rem, 10.8vw, 3.8rem); max-width: 12ch; }
  .hero-copy > .site-illustration { margin-top: var(--space-lg); max-width: 300px; }
  .hero-copy > .site-illustration svg { max-height: 85px; }
  .hero-grid > .site-photo { height: 300px; }
  .hero-foot { flex-wrap: wrap; row-gap: var(--space-xs); }
  .guide-shortcuts .guide-finder { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .planning-media > .site-photo { height: 290px; }
  .planning-media > .site-illustration svg { max-height: 240px; }
  .illustrated-page-head > .site-photo { height: 290px; }
  .illustrated-page-head h1 { font-size: clamp(2.1rem, 8.5vw, 3rem); }
  .page-plan { margin-bottom: var(--space-xl); }
  .page-plan > .site-illustration svg { max-height: 160px; }
  .article-photo { height: 270px; margin-block: var(--space-xl); }
  .article-feature > .site-photo { height: 235px; }
  .article-stack > a { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); row-gap: var(--space-xs); }
  .article-stack > a > .site-photo { height: 140px; }
  .article-stack > a > .site-illustration svg { max-height: 65px; }
  .directory-list > a { grid-template-columns: minmax(0, 1fr); }
  .directory-visual { grid-column: 1; grid-row: auto; }
  .directory-visual > .site-photo { height: 240px; }
  .directory-visual > .site-illustration { max-width: 260px; }
  .directory-list h2, .directory-list p, .directory-list .text-link { grid-column: 1; }
}
@media print { .site-photo { max-height: 180px; break-inside: avoid; } .guide-shortcuts { display: none; } }

/* The wordmark and original diagrams keep their geometry in both palettes. */
.wordmark .brand-logo text { fill: var(--color-logo-type); }
.wordmark .brand-logo .logo-domain { fill: var(--color-logo-domain); }
.site-illustration .art-scene {
  --art-ink: var(--art-site-ink); --art-muted: var(--art-site-muted);
  --art-paper: var(--art-site-paper); --art-stock: var(--art-site-stock); --art-warm: var(--art-site-warm);
  --art-accent: var(--art-site-accent); --art-accent-soft: var(--art-site-accent-soft);
}
:root[data-mode="dark"] body { font-weight: 350; }
@media (prefers-color-scheme: dark) { :root:not([data-mode]) body { font-weight: 350; } }

.header-controls { display: flex; align-items: center; gap: var(--space-xs); }
.language-toggle, .mode-toggle { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 44px; min-block-size: 44px; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule-2); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-sm); font-weight: 500; text-decoration: none; cursor: pointer; }
.language-toggle:hover, .mode-toggle:hover { background: var(--color-paper-2); }
.header-controls :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.mode-toggle { display: none; padding-inline: var(--space-xs); }
.js .mode-toggle { display: inline-flex; }
.language-code, .mode-icon--sun, .mode-toggle[data-current-mode="dark"] .mode-icon--moon { display: none; }
.mode-toggle[data-current-mode="dark"] .mode-icon--sun { display: block; }
@media (max-width: 72rem) {
  .header-controls { grid-column: 2; }
  .site-header #primary-nav { grid-row: 2; }
}
@media (max-width: 40rem) {
  .header-controls { gap: var(--space-2xs); }
  .language-name { display: none; }
  .language-code { display: inline; }
  .language-toggle { padding-inline: var(--space-xs); }
  .header-controls .menu-toggle { min-width: 92px; min-height: 44px; padding-inline: var(--space-xs); gap: var(--space-xs); white-space: nowrap; }
}
@media (max-width: 23rem) {
  .header-controls .menu-toggle { min-width: 44px; }
  .header-controls [data-menu-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Service and locality guides use the same editorial palette and photo treatment. */
.geo-hero { padding-block: var(--space-xl) var(--space-2xl); }
.geo-hero-grid { padding: 0; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: var(--space-xl); }
.geo-hero-grid h1 { font-size: var(--text-display-s); max-width: 19ch; overflow-wrap: anywhere; }
.geo-hero-grid .lead { margin-top: var(--space-lg); max-width: 42ch; }
.geo-hero-copy .back-link { margin-bottom: var(--space-md); }
.geo-hero-copy .geo-kicker { display: block; }
.geo-hero-grid .btn { margin: 0; }
.geo-hero-grid > .site-photo { height: clamp(390px, calc(100svh - 180px), 710px); }
.geo-kicker { margin: 0 0 var(--space-md); color: var(--color-muted); font-size: var(--text-sm); font-weight: 600; }
.geo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-lg); }
.geo-section { padding-block: var(--space-2xl); border-top: 1px solid var(--color-rule); }
.geo-band { background: var(--color-paper-2); }
.geo-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: var(--space-2xl); align-items: start; }
.geo-split h2 { max-width: 17ch; }
.geo-split p:not(.geo-kicker) { max-width: 53ch; margin-top: var(--space-md); }
.geo-split .site-illustration { max-width: 480px; }
.geo-split > div > .site-illustration { margin-top: var(--space-xl); }
.geo-split .site-illustration svg { max-height: 210px; }
.geo-steps { display: grid; gap: var(--space-lg); }
.geo-steps > div { border-bottom: 1px solid var(--color-rule); padding-bottom: var(--space-lg); }
.geo-steps a { display: inline-block; margin-top: var(--space-sm); }
.geo-index-head { align-items: center; margin-bottom: var(--space-xl); }
.geo-index-head a { display: inline-block; margin-top: var(--space-md); }
.geo-filter { display: grid; grid-template-columns: minmax(0, 320px) 1fr; align-items: center; gap: var(--space-xs) var(--space-lg); margin-bottom: var(--space-lg); }
.geo-filter label { grid-column: 1 / -1; font-weight: 600; }
.geo-filter input { min-width: 0; min-height: 48px; padding: var(--space-sm) var(--space-md); font: inherit; color: var(--color-ink); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-cotton); }
.geo-filter p { color: var(--color-muted); font-size: var(--text-sm); }
.geo-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); padding: 0; margin: 0; list-style: none; }
.geo-list a { display: grid; min-height: 76px; grid-template-columns: 3ch minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-xs); border-top: 1px solid var(--color-rule); text-decoration: none; }
.geo-list a:hover, .geo-list a:focus-visible { background: var(--color-paper-2); }
.geo-list a:hover strong { text-decoration: underline; }
.geo-rank, .geo-population, .geo-facts dd, .geo-related > li > span:last-child { font-variant-numeric: tabular-nums; }
.geo-rank, .geo-population, .geo-place-name > span, .geo-source { color: var(--color-muted); font-size: var(--text-sm); }
.geo-population { white-space: nowrap; }
.geo-place-name strong { font-weight: 600; }
.geo-place-name { display: grid; gap: var(--space-2xs); min-width: 0; overflow-wrap: anywhere; }
.geo-map { margin: 0; border: 1px solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; background: var(--color-paper-2); }
.geo-map svg { display: block; width: 100%; height: auto; background: var(--color-cotton); }
.geo-gridline { stroke: var(--color-rule); stroke-width: 0.45px; }
.geo-outline { fill: color-mix(in oklch, var(--color-accent) 38%, var(--color-cotton)); stroke: var(--color-accent-2); stroke-width: 1.15px; stroke-linejoin: round; }
.geo-map.is-playing .geo-outline { animation: geo-reveal 620ms var(--ease-out) both; }
.geo-map.is-paused .geo-outline { animation-play-state: paused; }
.geo-north { stroke: var(--color-muted); stroke-width: 1.2px; stroke-linecap: round; stroke-linejoin: round; }
.geo-map text { fill: var(--color-muted); font: 9px var(--font-body); }
.geo-map figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2xs) var(--space-md); padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); }
.geo-map figcaption span { color: var(--color-muted); }
.geo-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); padding-block: var(--space-md); margin: var(--space-md) 0 0; border-block: 1px solid var(--color-rule); }
.geo-facts dt { color: var(--color-muted); font-size: var(--text-sm); }
.geo-facts dd { margin: var(--space-2xs) 0 0; font-size: var(--text-lg); font-weight: 600; }
.geo-related-title { margin-top: var(--space-lg); }
.geo-related { padding: 0; margin: var(--space-sm) 0 0; list-style: none; }
.geo-related li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); }
.geo-related li > span:last-child { white-space: nowrap; color: var(--color-muted); }
@keyframes geo-reveal { from { opacity: 0.25; } to { opacity: 1; } }

@media (min-width: 72.01rem) { .nav-dropdown { max-height: calc(100svh - 7rem); overflow-y: auto; } }
@media (max-width: 60rem) {
  .geo-hero-grid, .geo-split, .geo-list { gap: var(--space-lg); }
  .geo-hero-grid > .site-photo { height: 390px; }
  .geo-list { row-gap: 0; }
}
@media (max-width: 40rem) {
  .geo-hero, .geo-section { padding-block: var(--space-xl); }
  .geo-hero-grid, .geo-split, .geo-list, .geo-filter { grid-template-columns: minmax(0, 1fr); }
  .geo-hero-grid h1 { font-size: clamp(2.1rem, 8.5vw, 3rem); }
  .geo-hero-grid .lead { margin-top: var(--space-md); }
  .geo-hero-grid > .site-photo { height: 260px; }
  .geo-split .site-illustration svg { max-height: 160px; }
  .geo-list a { gap: var(--space-sm); }
  .geo-facts dd { font-size: var(--text-md); }
}
@media (prefers-reduced-motion: reduce), print { .geo-map.is-playing .geo-outline { animation: none; } }