/* Dubai Compass / Urban Atlas.
   Final visual layer: plain surfaces, purposeful geometry, readable wayfinding. */
:root {
  --ink: #142f36;
  --muted: #596a6e;
  --paper: #f7f5ed;
  --white: #fffef9;
  --line: #d6ded8;
  --blue: #142f36;
  --blue-dark: #25444a;
  --blue-light: #edf2e8;
  --copper: #ff7658;
  --copper-text: #9a3c27;
  --sand: #eeede4;
  --green-mid: #47636a;
  --atlas-lime: #d8f36a;
  --atlas-coral: #ff7658;
  --atlas-blue: #496aef;
  --radius: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  color: var(--ink);
}

body { background: var(--paper); }
[hidden] { display: none !important; }
::selection { background: var(--atlas-lime); color: var(--ink); }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--atlas-blue);
  outline-offset: 4px;
}
h1, h2, h3, .page-heading h1, .profile-cover h1,
.profile-cover h1 em, .profile-editor-form legend,
.project-aside h2, .profile-perspective h2,
.installation-ideas h2, .living-section-heading h3,
.living-card h3, .living-empty h3, .commute-ideas h3 {
  font-family: inherit;
  font-weight: 750;
  font-style: normal;
  color: var(--ink);
}
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.eyebrow { font-weight: 700; letter-spacing: 1.2px; color: var(--muted); }
.hint, .small-muted { color: var(--muted); }
.small-count { background: var(--atlas-lime); border: 0; color: var(--ink); border-radius: 50%; min-width: 23px; min-height: 23px; }

/* An independent wordmark and a navigation rail, rather than a dashboard bar. */
.sidebar {
  min-height: 88px;
  gap: 30px;
  padding: 14px max(32px, calc((100vw - 1280px) / 2));
  background: var(--paper);
  border-color: var(--line);
  box-shadow: none;
}
.brand { gap: 9px; letter-spacing: -.8px; }
.brand .brand-logo { display: block; width: 46px; height: 46px; flex-shrink: 0; }
.brand .brand-logo img { display: block; width: 100%; height: 100%; }
.brand .brand-wordmark { display: flex; flex-direction: column; gap: 0; font-size: 19px; line-height: .96; font-weight: 800; letter-spacing: -.7px; }
.brand .brand-wordmark > span:last-child { font-size: 16px; margin-top: 3px; letter-spacing: -.65px; }
.brand-stop { color: #a33f2a; }
.sidebar nav { gap: 3px; }
.nav-item { position: relative; padding: 12px 13px; font-size: 13px; font-weight: 600; border-radius: 40px; color: var(--muted); }
.nav-item:hover { color: var(--ink); background: #eaece3; }
.nav-item.active, .nav-item[aria-current="page"] { color: var(--ink); background: var(--atlas-lime); font-weight: 700; }
.header-tools { gap: 12px; }
.header-tools .currency { font-size: 11px; font-weight: 700; color: var(--muted); }
.header-tools .button { min-height: 42px; }
.header-tools .text-button { color: var(--ink); }
.motion-toggle, #motion-toggle {
  width: auto;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 7px 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 999px;
  color: var(--ink);
}
.motion-toggle:hover, #motion-toggle:hover { border-color: var(--ink); background: var(--atlas-lime); }
.motion-toggle[aria-pressed="true"], #motion-toggle[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.motion-toggle svg, #motion-toggle svg { width: 18px; height: 18px; }
.motion-toggle-label {font-size:11px;font-weight:700;white-space:nowrap;}
#motion-toggle[hidden]{display:none;}
.topbar { max-width: 1344px; min-height: 58px; border: 0; padding-top: 12px; padding-bottom: 8px; }
.breadcrumb { font-size: 12px; }
.breadcrumb strong { font-weight: 700; }
.breadcrumb > span { color: #829196; }
main { max-width: 1344px; padding-top: 16px; }
.workspace-strip { padding: 12px 0 20px; margin-bottom: 18px; border-color: var(--line); }
.workspace-strip .eyebrow { font-size: 10px; letter-spacing: 1px; }
.workspace-strip select { min-height: 40px; background: var(--white); border-color: var(--line); border-radius: 8px; }
.workspace-strip .text-button { font-size: 11px; }
.sync-badge { color: #4c6860; }
.sync-badge::before { background: #3f765a; width: 6px; height: 6px; }

/* Buttons retain the same vocabulary across the six working pages. */
.button { background: var(--ink); color: var(--white); border-color: var(--ink); border-radius: 40px; padding: 12px 19px; font-weight: 650; transition: background-color .18s, border-color .18s, color .18s, transform .18s; }
.button:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.button-secondary { color: var(--ink); background: transparent; border-color: #a6b3b2; }
.button-secondary:hover { color: var(--ink); background: #e9eee4; border-color: var(--ink); }
.button-light { background: var(--atlas-lime); color: var(--ink); border-color: var(--atlas-lime); }
.button-light:hover { background: #c9e75b; border-color: #c9e75b; }
.button-small { padding: 9px 14px; font-size: 12px; }
.button > span:not(.icon), .hero-link > span, .ribbon-arrow { transition: transform .22s; }
.button:hover > span:not(.icon) { transform: translate(2px, -2px); }
.text-button { color: var(--ink); font-weight: 650; text-underline-offset: 5px; }
.icon-button { border-radius: 50%; }
.icon-button:hover { color: var(--ink); background: #e8edde; }
.icon { stroke-width: 1.8; }

/* Opening spread: generous type, a cut photographic arch, a route drawn through it. */
.hero.hero-photographic {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  min-height: 545px;
  height: auto;
  isolation: isolate;
  overflow: visible;
  margin: 0 0 22px;
  padding: 0;
  gap: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}
.hero.hero-photographic .hero-photo {
  position: absolute;
  z-index: 0;
  inset: 18px 0 0 auto;
  width: 46%;
  height: calc(100% - 18px);
  object-fit: cover;
  object-position: 65% 50%;
  border-radius: 46% 46% 7px 7px;
  clip-path: polygon(0 0, 100% 0, 100% 86%, 88% 100%, 0 100%);
  background: #c5d3ce;
}
.hero-shade { display: none; }
.hero.hero-photographic .hero-copy {
  position: relative;
  z-index: 2;
  left: auto;
  bottom: auto;
  grid-column: 1;
  align-self: center;
  width: 100%;
  max-width: none;
  padding: 40px 28px 48px 0;
}
.hero.hero-photographic .eyebrow { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; }
.hero.hero-photographic h1 {
  margin: 24px 0 24px;
  font-family: inherit;
  font-size: clamp(56px, 6.1vw, 82px);
  font-weight: 800;
  line-height: .97;
  letter-spacing: -5px;
  color: var(--ink);
  max-width: 670px;
  text-wrap: normal;
}
.hero-title-line { display: block; width: fit-content; }
.hero-title-line > span { display: inline; }
.hero-title-line:nth-child(2) { box-shadow: inset 0 -.18em var(--atlas-lime); padding-right: .03em; }
.title-stop { color: #a33f2a; }
.hero-title-city { display: block; color: var(--muted); font-size: 15px; font-weight: 600; letter-spacing: -.25px; line-height: 1.6; margin-top: 22px; }
.hero.hero-photographic p { max-width: 390px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.hero.hero-photographic .hero-actions { margin-top: 27px; gap: 18px; }
.hero.hero-photographic .button { min-height: 48px; color: var(--white); background: var(--ink); border-color: var(--ink); padding: 13px 19px; }
.hero.hero-photographic .button:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.hero.hero-photographic .hero-link { color: var(--ink); font-size: 12px; font-weight: 600; text-decoration: none; border-bottom: 1px solid #afbab7; min-height: 40px; gap: 11px; }
.hero.hero-photographic .hero-link:hover { border-color: var(--ink); }
.hero-link:hover > span { transform: translateY(3px); }
.hero-photo-caption { position: absolute; bottom: 17px; right: 78px; color: var(--white); font-size: 10px; padding: 4px 8px; border-radius: 4px; background: #142f36b8; z-index: 2; }
.hero.hero-photographic :focus-visible { outline-color: var(--atlas-blue); }
.hero-orbit { position: absolute; top: 18%; left: 43%; width: 25%; height: 68%; z-index: 1; overflow: visible; pointer-events: none; }
.hero-orbit { color: var(--atlas-lime); }
.hero-orbit .orbit-route { fill: none; stroke: var(--atlas-lime); stroke-width: 2.2; stroke-linecap: round; }
.hero-orbit .orbit-marker { fill: var(--atlas-coral); stroke: var(--paper); stroke-width: 3; }
.hero-route-stamp {
  position: absolute;
  right: 5%;
  top: 3%;
  z-index: 3;
  width: 148px;
  padding: 24px 15px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--atlas-coral);
  color: var(--ink);
  clip-path: polygon(7% 0, 94% 0, 100% 84%, 81% 100%, 0 89%);
  transform: rotate(7deg);
  text-align: center;
}
.hero-route-stamp > span:first-child { font-size: 10px; line-height: 1.4; font-weight: 750; letter-spacing: 1px; }
.hero-route-stamp > strong { font-size: 24px; line-height: 1.03; font-weight: 800; letter-spacing: -.9px; }
.hero-route-stamp > span:last-child { font-size: 23px; font-weight: 650; line-height: 1; align-self: flex-end; }

/* A connected route replaces isolated feature cards. */
.journey-ribbon { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--ink); color: var(--white); margin: 0 0 36px; border-radius: 14px 14px 34px 14px; padding: 10px 12px; }
.ribbon-item { min-width: 0; position: relative; display: flex; align-items: center; gap: 13px; padding: 17px 15px; border: 0; background: transparent; text-align: left; font: inherit; border-radius: 10px; color: inherit; transition: background-color .2s; }
.ribbon-item + .ribbon-item::before { content: ""; position: absolute; left: 0; top: 21px; bottom: 21px; border-left: 1px solid #476168; }
.ribbon-item:hover { background: #2c454b; }
.ribbon-number { width: 30px; height: 30px; display: grid; place-items: center; flex-shrink: 0; color: var(--atlas-lime); font-size: 13px; font-weight: 700; border: 1px solid #657760; border-radius: 50%; }
.ribbon-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ribbon-copy strong { font-size: 14px; line-height: 1.35; font-weight: 650; }
.ribbon-copy small { font-size: 11px; line-height: 1.45; color: #c8d5d4; }
.ribbon-arrow { margin-left: auto; font-size: 21px; color: var(--atlas-lime); line-height: 1; }
.ribbon-item:hover .ribbon-arrow { transform: translate(2px, -2px); }
.ribbon-item[data-started="true"] .ribbon-number { background: var(--atlas-lime); color: var(--ink); border-color: var(--atlas-lime); }
.ribbon-item[data-started="true"] .ribbon-state { color: #e4f1cf; }

/* Small numbered photographic tabs keep the comparison above the fold. */
.visual-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 32px; }
.visual-tabs .tab { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; gap: 15px; padding: 12px 16px 12px 12px; border: 1px solid var(--line); border-radius: 14px; background: transparent; min-height: 116px; overflow: visible; }
.visual-tabs .tab::after { display: none; }
.visual-tabs .tab .category-photo { display: block; width: 78px; height: 88px; aspect-ratio: auto; border-radius: 36px 36px 8px 8px; background: #e1e7df; overflow: hidden; }
.visual-tabs .tab[data-category="visa"] .category-photo { border-radius: 8px 36px 8px 36px; }
.visual-tabs .tab[data-category="insurance"] .category-photo { border-radius: 36px 8px 36px 8px; }
.category-photo img { transition: transform .35s; }
.visual-tabs .tab:hover .category-photo img { transform: scale(1.025); }
.visual-tabs .tab .category-copy { padding: 0; }
.category-kicker { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--muted); margin-bottom: 7px; }
.category-copy strong { font-size: 16px; line-height: 1.3; letter-spacing: -.4px; font-weight: 750; }
.category-copy small { margin-top: 5px; font-size: 11px; line-height: 1.5; color: var(--muted); }
.visual-tabs .tab:hover { border-color: #9baaaa; }
.visual-tabs .tab:hover .category-copy strong { color: var(--ink); }
.visual-tabs .tab.active, .visual-tabs .tab[aria-selected="true"] { border-color: var(--ink); background: var(--white); box-shadow: inset 0 0 0 1px var(--ink); }
.visual-tabs .tab.active .category-kicker { color: var(--ink); }
.visual-tabs .tab.active .category-kicker::after { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--atlas-coral); margin-left: 7px; border-radius: 50%; }
.visual-tabs .tab:focus-visible { outline: 3px solid var(--atlas-blue); outline-offset: 4px; }

/* Form surfaces and legible boundaries are shared with the profile editor. */
input, select, textarea { border-radius: 9px; border-color: #bfcac7; background: var(--white); color: var(--ink); }
input::placeholder, textarea::placeholder { color: #697a7f; }
input:not([type="checkbox"]):not([type="radio"]), select { min-height: 44px; }
input:hover, select:hover, textarea:hover { border-color: #8fa4a3; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); }
.amount-input { border-radius: 9px; border-color: #bfcac7; background: var(--white); }
.amount-input input { border: 0; border-radius: 9px; background: transparent; }
.amount-input:focus-within { outline-color: var(--atlas-blue); }
.amount-input > span { color: var(--muted); }
.explore-layout { grid-template-columns: minmax(0, 1fr) 270px; gap: 32px; }
.profile-panel { padding: 24px; margin-bottom: 28px; border: 0; background: #ecefe3; border-radius: 14px 14px 30px 14px; }
.panel-heading h2 { font-size: 19px; font-weight: 750; letter-spacing: -.5px; }
.panel-heading .eyebrow { color: var(--muted); }
.profile-fields { margin-top: 18px; }
.profile-fields label { color: #4d6569; font-weight: 500; }
.profile-fields select { background: var(--white); border-color: #b9c6bd; }
.category-context { grid-template-columns: 86px minmax(0, 1fr); gap: 19px; padding-bottom: 22px; margin-bottom: 24px; }
#category-context-image { width: 86px; height: 80px; border-radius: 42px 42px 8px 8px; }
#category-context-title { font-size: 24px; font-weight: 750; letter-spacing: -.8px; line-height: 1.25; }
#category-context-note { font-size: 12px; max-width: 590px; color: var(--muted); }
.results-head { align-items: flex-start; }
.results-head h2 { font-size: 23px; letter-spacing: -.75px; }
.results-head p { font-size: 12px; line-height: 1.65; }
.result-controls { gap: 7px; max-width: 48%; justify-content: flex-end; }
.result-controls select { min-height: 38px; background: transparent; border-radius: 7px; max-width: 185px; font-size: 11px; }
.context-note { border-radius: 8px; background: #e8eee0; color: #425b51; line-height: 1.65; }
.directory-toolbar { gap: 10px; margin-top: 22px; }
#search-offers { min-height: 44px; background: var(--white); border-color: var(--line); border-radius: 40px; }
.directory-toolbar > label .icon { left: 15px; top: 14px; }
.directory-toolbar > label input { padding-left: 42px; }
.filter-chip { border-radius: 40px; min-height: 44px; padding: 10px 13px; background: transparent; border-color: var(--line); color: var(--ink); }
.filter-chip:hover { background: #e9efdf; }
.filter-chip[aria-pressed="true"] { background: var(--atlas-lime); border-color: var(--ink); color: var(--ink); }
.view-switch { border-radius: 40px; border-color: var(--line); background: transparent; padding: 4px; }
.view-switch button { border-radius: 50%; color: var(--muted); }
.view-switch button[aria-pressed="true"], .view-switch button.active { background: var(--ink); color: var(--paper); }
.view-switch button:hover:not([aria-pressed="true"]) { color: var(--ink); background: #e4eade; }
.results-meta { font-size: 11px; padding: 19px 0 13px; }
.legend i { background: var(--ink); }
.legend i.outline-dot { border-color: var(--muted); }

/* Offer records are restrained; price, scope, and actions keep their hierarchy. */
.offer-card { border: 1px solid var(--line); border-radius: 13px; background: var(--white); box-shadow: none; transition: border-color .2s, background-color .2s; }
.offer-card:hover { border-color: #8ca09d; box-shadow: none; }
.offer-card.selected { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.offer-card.chosen { border-color: #a4bd79; }
.offer-card.chosen.selected { border-color: var(--ink); }
.offer-mark { border-radius: 50% 50% 8px 8px; border: 0; background: #e6eddf; color: var(--ink); font-family: inherit; font-weight: 750; font-size: 20px; }
.offer-mark.dark { border: 0; background: var(--ink); color: var(--paper); }
.offer-mark.blue { border: 0; background: #e4eafb; color: #3451b7; }
.offer-mark.clay { border: 0; background: #ffe0d5; color: #933b28; }
.offer-mark.gold { border: 0; background: #edf1ce; color: #5b6425; }
.offer-header h3, .cards.list-view .offer-header h3 { font-size: 16px; font-weight: 750; letter-spacing: -.4px; }
.offer-location { font-size: 11px; }
.offer-price, .cards.list-view .offer-price { font-size: 29px; font-weight: 750; letter-spacing: -1.2px; font-variant-numeric: tabular-nums; }
.offer-price small { font-size: 11px; font-weight: 500; }
.price-context { font-size: 11px; line-height: 1.65; }
.badge, .chosen-label { color: #435e46; background: #eaf0df; border-radius: 5px; font-size: 10px; font-weight: 600; }
.badge.neutral { color: #5d6258; background: #eeeee5; }
.chosen-label { color: var(--ink); background: var(--atlas-lime); }
.feature { color: #435e66; font-size: 12px; }
.feature .icon { color: #416552; }
.offer-caution, .eligibility-note { color: #785542; font-size: 11px; line-height: 1.65; }
.offer-divider { background: var(--line); }
.match-reason { color: #415d49; background: #f0f3e5; border-radius: 6px; }
.favorite-button { border-radius: 50%; color: #64797b; }
.favorite-button:hover { color: var(--ink); background: #edf2e2; }
.favorite-button.active, .favorite-button[aria-pressed="true"] { color: #a03d29; background: #ffe2d8; }
.favorite-button.active .icon, .favorite-button[aria-pressed="true"] .icon { fill: #ff76582e; }
.compare-button { border-radius: 40px; color: var(--ink); background: transparent; border-color: #aab9b4; }
.compare-button:hover { background: var(--atlas-lime); border-color: var(--ink); }
.compare-button.selected { background: var(--ink); color: var(--white); border-color: var(--ink); }
.offer-actions .text-button { font-size: 12px; }
.cards.list-view { gap: 14px; }
.cards.list-view .offer-card { padding: 23px; grid-template-columns: minmax(175px, .85fr) minmax(190px, 1.15fr) 125px; gap: 0 19px; }
.cards.list-view .offer-actions { border-color: var(--line); padding-left: 17px; }
.cards.list-view .offer-features { gap: 9px; }
.cards.grid-view { gap: 18px; }
.no-results { border-radius: 14px; border-color: #9baead; background: #f2f4e9; }

/* A compact lime project card gives the shortlist a distinct place. */
.project-aside { position: sticky; top: 110px; border: 0; padding: 26px 23px; background: var(--atlas-lime); border-radius: 90px 90px 16px 16px; }
.project-aside .eyebrow { color: #3d532f; font-size: 10px; }
.project-snapshot h2 { font-family: inherit; font-size: 29px; font-weight: 750; letter-spacing: -1px; line-height: 1.05; }
.snapshot-heading { margin-bottom: 22px; margin-top: 19px; }
.snapshot-heading a { color: var(--ink); }
.selection-summary { border-color: #b1c759; }
.selection-row { border-color: #b1c759; }
.selection-number { color: #4d5d2d; font-family: inherit; font-size: 11px; font-weight: 700; }
.selection-row > div > span, .snapshot-budget > span { color: #4a5d35; }
.selection-row strong { color: var(--ink); font-size: 12px; }
.project-snapshot .snapshot-empty, .snapshot-empty { color: #51633f; }
.selection-row .icon-button { color: #4f653e; }
.selection-row .icon-button:hover { color: var(--ink); background: #c9e75b; }
.snapshot-budget strong { font-size: 31px; font-weight: 750; letter-spacing: -1.2px; }
.snapshot-budget p { color: #4d623a; }
.project-aside .hint { color: #425632 !important; }
.aside-note { border-color: #b1c759; color: #3d552d; }
.aside-note > .icon { color: var(--ink); }
.aside-note p { color: #425632; }
.clarity-note { border: 0; border-radius: 10px; background: #ebece3; color: var(--muted); padding: 20px; }
.clarity-note > .icon { color: var(--ink); }
.clarity-note strong { color: var(--ink); }
.clarity-note p { color: #516467; }
.next-step { border: 0; background: #e8ede1; border-radius: 15px 15px 45px 15px; margin-top: 36px; padding: 32px; }
.next-step h2 { font-size: 27px; font-weight: 750; letter-spacing: -1px; }
.next-step .eyebrow { font-size: 10px; }
.main-footer { padding-top: 28px; border-color: var(--line); }
.main-footer a { color: var(--ink); }

/* Profile: the living brief gets the same designed opening spread. */
.profile-cover { position: relative; isolation: isolate; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 42px; min-height: 440px; margin-bottom: 40px; padding: 20px 0 0; background: transparent; overflow: visible; }
.profile-cover > div { position: relative; z-index: 2; padding: 36px 0 42px; align-self: center; }
.profile-cover h1 { margin: 20px 0 22px; font-size: clamp(37px, 4.3vw, 60px); font-weight: 800; letter-spacing: -2.7px; line-height: 1.03; }
.profile-cover h1 em { font-weight: 800; color: var(--ink); }
.profile-cover p { color: var(--muted); font-size: 14px; line-height: 1.75; max-width: 445px; }
.profile-cover > img { position: relative; z-index: 0; width: 100%; height: 100%; min-height: 440px; object-fit: cover; object-position: 75% center; border-radius: 170px 12px 120px 12px; clip-path: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%); }
.profile-cover-links { gap: 24px; margin-top: 28px; font-size: 12px; line-height: 1.6; }
.profile-cover-links a { padding-bottom: 6px; border-bottom: 1px solid #a9b7b3; }
.profile-cover-links a:hover { border-color: var(--ink); }
.profile-cutout { position: absolute; left: 43%; bottom: 6%; width: 150px; height: 150px; pointer-events: none; z-index: 0; overflow: visible; color: var(--atlas-coral); }
.profile-editor-layout { grid-template-columns: minmax(0, 1fr) 295px; gap: 30px; }
.profile-editor-form fieldset { padding: 28px 30px 31px; margin-bottom: 22px; border: 1px solid var(--line); background: var(--white); border-radius: 14px; }
.profile-editor-form legend { font-size: 23px; font-weight: 750; letter-spacing: -.6px; line-height: 1.4; margin-bottom: 12px; }
.profile-editor-form legend span { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; border-radius: 50%; background: var(--atlas-lime); color: var(--ink); font-size: 11px; font-weight: 750; letter-spacing: 0; margin-right: 12px; vertical-align: 2px; }
.profile-editor-form fieldset > p { font-size: 12px; }
.profile-editor-form label { font-size: 12px; color: #415c63; font-weight: 500; gap: 8px; }
.profile-editor-form input, .profile-editor-form select { color: var(--ink); border-color: #bfcac7; background: var(--white); }
.profile-editor-form .amount-input { border-color: #bfcac7; background: var(--white); }
.profile-editor-form .hint { font-size: 11px !important; font-weight: 400; }
.profile-perspective { top: 110px; padding: 29px 25px; background: var(--ink); color: var(--paper); border-radius: 16px 16px 65px 16px; }
.profile-perspective h2 { color: var(--paper); font-family: inherit; font-size: 31px; font-weight: 750; letter-spacing: -1.2px; }
.profile-perspective .eyebrow { color: var(--atlas-lime); font-size: 10px; }
.profile-perspective > p { color: #cfdbd8; }
.profile-perspective .hint { color: #c4d4cd !important; }
.profile-perspective .text-button { color: var(--atlas-lime); }
.profile-perspective .summary-rule { background: #486269; }
.profile-allocation { color: #c8d5d4; border-color: #486269; }
.profile-allocation strong { color: var(--paper); font-size: 19px; font-weight: 700; letter-spacing: -.5px; }
.allocation-total strong { font-size: 28px; color: var(--atlas-lime); font-weight: 750; letter-spacing: -1px; }
.allocation-note.over-budget { color: #ffb39f; }
.profile-save-bar { background: var(--paper); border-color: #b9c6c0; border-radius: 40px; padding: 13px 20px; box-shadow: 0 3px 0 #142f360a; }
#profile-save-status { color: #436e51; font-size: 11px; }
#profile-save-status.draft { color: #87552c; }
.installation-ideas { margin-top: 58px; }
.installation-ideas .section-bar { padding-bottom: 26px; }
.installation-ideas h2 { font-size: 34px; letter-spacing: -1.2px; font-weight: 750; }
.living-section-heading { padding-top: 35px; max-width: 840px; }
.living-section-heading > span { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--muted); }
.living-section-heading h3 { font-size: 26px; font-weight: 750; letter-spacing: -.7px; }
.living-section-heading p { font-size: 12px; line-height: 1.75; }
.living-cards { gap: 20px; }
.living-card { position: relative; padding: 27px; border-color: var(--line); border-radius: 14px 14px 32px 14px; background: var(--white); }
.living-card:nth-child(3n + 2) { border-radius: 14px 32px 14px 14px; }
.living-card h3 { font-family: inherit; font-size: 23px; font-weight: 750; letter-spacing: -.7px; margin-top: 25px; }
.living-index { color: var(--ink); font-size: 11px; font-weight: 650; }
.living-card-head .badge { font-size: 10px; }
.living-price { font-size: 29px; letter-spacing: -1.2px; font-weight: 750; font-variant-numeric: tabular-nums; }
.living-price small { color: var(--muted); font-size: 11px; font-weight: 500; }
.living-card .small-muted { font-size: 11px; }
.living-links { font-size: 12px; gap: 13px; }
.living-links a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.living-card .living-reason { color: #48624d; }
.living-empty { background: #e9eee1; border-radius: 14px 14px 35px 14px; padding: 30px; }
.living-empty h3 { font-family: inherit; font-size: 25px; font-weight: 750; letter-spacing: -.7px; }
.suggestion-count { color: #435e51; font-size: 12px; }
.more-ideas summary { font-size: 13px; color: var(--ink); }
.commute-ideas { background: #eeefe7; padding: 30px; border: 0; border-radius: 14px; }
.commute-ideas h3 { font-family: inherit; font-size: 25px; font-weight: 750; letter-spacing: -.7px; }
#page-profil [id] { scroll-margin-top: 110px; }

/* Page titles and photographic bands form one visual family. */
.page-banner { height: 182px; margin-bottom: 25px; background: #dae5dd; border-radius: 90px 16px 16px 16px; }
#page-parcours .page-banner { border-radius: 16px 16px 90px 16px; }
#page-devis .page-banner { border-radius: 16px 90px 16px 16px; }
#page-sources .page-banner { border-radius: 90px 90px 16px 16px; }
.page-banner-image { object-position: 50% 46%; }
.page-banner-image[src*="company"] { object-position: 50% 26%; }
.page-banner-image[src*="arrival"] { object-position: 50% 40%; }
.page-heading { padding: 14px 0 34px; }
.page-heading h1 { font-family: inherit; font-size: clamp(37px, 4vw, 54px); font-weight: 800; letter-spacing: -2.2px; line-height: 1.05; margin: 17px 0; }
.page-heading h1 em { font-family: inherit; font-weight: inherit; font-style: normal; }
.page-heading > p { font-size: 14px; line-height: 1.75; max-width: 680px; }
.white-panel, .dossier-section { border-radius: 14px; border-color: var(--line); background: var(--white); }
.white-panel > h2 { font-weight: 750; font-size: 22px; letter-spacing: -.6px; }
.section-bar h2 { font-size: 22px; font-weight: 750; letter-spacing: -.6px; }
.section-bar p { line-height: 1.7; }
.budget-layout { gap: 28px; grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr); }
.budget-layout > .white-panel { padding: 30px; }
.budget-summary { border: 0; border-radius: 15px 15px 55px 15px; background: #eaf0df; top: 110px; padding: 31px; }
.budget-summary .eyebrow { color: #4f643c; }
.sum-label { color: #4f643c; font-size: 13px; }
.budget-big { font-size: clamp(42px, 4vw, 57px); font-weight: 800; letter-spacing: -2.3px; font-variant-numeric: tabular-nums; }
.budget-summary .small-muted, #budget-missing { color: #536746; }
.completion > div { color: #4e6241; }
.completion strong { color: var(--ink); }
progress, progress::-webkit-progress-bar { background: #d6ded1; border-radius: 40px; height: 6px; }
progress::-webkit-progress-value { background: var(--ink); border-radius: 40px; }
progress::-moz-progress-bar { background: var(--ink); border-radius: 40px; }
.summary-rule { background: #c7d2bd; }
.annual-view { border-color: #c7d2bd; }
.annual-view label, .annual-view p { color: #4e6649; }
.annual-view strong { font-size: 28px; font-weight: 750; letter-spacing: -1px; }
.clean-list li { color: #4b6143; }
.clean-list li::before { color: var(--ink); }
.budget-summary > .text-button { color: var(--ink); }
.budget-field label, .renewal-field label { font-weight: 650; }
.route-list { gap: 14px; }
.route-card { border-radius: 14px; padding: 25px; border-color: var(--line); background: var(--white); }
.route-step { min-width: 36px; width: 36px; height: 36px; display: grid; place-items: center; font-family: inherit; font-weight: 700; font-size: 12px; color: var(--ink); background: var(--atlas-lime); border-radius: 50%; }
.route-card.done { border-color: #b2c597; background: #ecf2e0; }
.route-card.done .route-step { background: var(--ink); color: var(--atlas-lime); }
.route-card input[type="checkbox"] { accent-color: var(--ink); }
.route-content h2 { font-weight: 750; font-size: 18px; }
.route-content a { text-decoration: underline; text-underline-offset: 4px; color: var(--ink); }
#dossier-overview .dossier-section { border-radius: 12px; border-top: 4px solid var(--atlas-lime); }
#dossier-overview .dossier-section:nth-child(2) { border-top-color: var(--atlas-coral); }
#dossier-overview .dossier-section:nth-child(3) { border-top-color: #8ba0f4; }
#dossier-overview .dossier-section:nth-child(4) { border-top-color: #9fc8ad; }
#dossier-overview h2 { font-size: 20px; font-weight: 750; letter-spacing: -.6px; }
#dossier-overview .eyebrow { color: #627775; font-size: 10px; }
.dossier-section h2 { font-size: 21px; font-weight: 750; letter-spacing: -.6px; }
.deadline-list time { color: #596f73; }
.deadline-item.deadline-soon > div > span { color: #915239; }
.danger-link { color: #a33f2a; }

/* The quote and source registries use typographic tables, not decorative cards. */
.empty-state { background: #eef1e6; border: 1px dashed #a9bcb1; border-radius: 16px 16px 55px 16px; padding: 48px 30px; }
.empty-state .empty-icon { width: 58px; height: 58px; background: var(--atlas-lime); color: var(--ink); border-radius: 50% 50% 10px 10px; }
.empty-state h2 { font-size: 24px; font-weight: 750; letter-spacing: -.6px; }
.quote-filter-bar select { border-radius: 40px; background: transparent; }
.quote-table-wrap { border-radius: 12px; border-color: var(--line); background: var(--white); scrollbar-color: #9cafaa #f1f3e9; }
.quote-table th { color: #526a6e; background: #ecf0e7; font-size: 11px; }
.quote-table tbody tr:hover { background: #f3f6ed; }
.quote-table td strong { color: var(--ink); font-weight: 750; }
.quote-status { background: #e8efd9; color: #4c6741; border-radius: 5px; }
.quote-status.expired { background: #ffe5db; color: #9a4530; }
.method-grid { gap: 20px; margin-bottom: 37px; }
.method-grid .white-panel { border: 0; background: #e9eee0; border-radius: 14px; padding: 27px; }
.method-grid .white-panel:nth-child(2) { background: #f0e6db; }
.method-grid .white-panel:nth-child(3) { background: #e7ebf6; }
.method-number { display: inline-grid; place-items: center; width: 36px; height: 36px; background: var(--ink); color: var(--paper); font-family: inherit; font-size: 12px; font-weight: 700; border-radius: 50%; margin-bottom: 24px; }
.method-grid h2 { font-size: 20px; font-weight: 750; letter-spacing: -.5px; }
.source-list { border-radius: 13px; border-color: var(--line); background: var(--white); }
.source-row { padding: 22px 26px; border-color: var(--line); }
.source-row h3 { font-size: 15px; font-weight: 750; }
.source-tag { color: #4b6754; font-size: 10px; font-weight: 700; letter-spacing: 1px; }
.source-row a { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
.privacy-panel { background: #eeefe5; border: 0; padding: 30px; }

/* Dialogs remain plain, calm, and easy to operate. */
dialog { border: 1px solid #acbbb5; background: var(--paper); border-radius: 22px; padding: 30px; box-shadow: 0 20px 90px #142f3633; }
dialog::backdrop { background: #142f3680; backdrop-filter: none; }
.modal-top { padding-bottom: 15px; border-bottom: 1px solid var(--line); margin-bottom: 25px; }
.modal-top .eyebrow { color: var(--muted); font-size: 10px; }
.modal-top .icon-button { background: #e8edde; }
.modal-title { font-size: 32px; font-weight: 750; letter-spacing: -1.1px; }
.modal-lead { font-size: 13px; }
.modal-form label, .modalForm label { color: #3f5b63; }
.detail-cell { background: var(--white); border-radius: 12px; border-color: var(--line); }
.detail-cell strong { font-weight: 650; }
.detail-list, .comparison-table { color: #455f67; }
.comparison-table thead th { background: #eaf0df; }
.comparison-table th:first-child { color: #536b70; }
.comparison-table a, .detail-source a { color: var(--ink); }
.note-inline { border-radius: 10px; color: #6e4e3d; background: #f1e6da; }
.brief-area { border-color: #bac8c2; background: var(--white); border-radius: 10px; }
.wizard-steps > span, .wizard-steps span:first-child { font-family: inherit; color: #536c72; }
.wizard-question h3, .wizard-question legend { font-family: inherit; font-size: 23px; font-weight: 750; letter-spacing: -.6px; }
.wizard-option { background: var(--white); border-color: var(--line); border-radius: 11px; }
.wizard-option:hover { background: #f0f4e8; border-color: #9eaea6; }
.wizard-option.selected, .wizard-option.active, .wizard-option[aria-pressed="true"], .wizard-option:has(input:checked) { background: #edf3da; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.wizard-result { border-color: #b8c99e; background: #edf3da; border-radius: 13px; }
.compare-tray { background: var(--ink); color: var(--paper); border: 0; border-radius: 50px; padding: 16px 24px; box-shadow: 0 7px 24px #142f3626; }
.compare-tray strong { color: var(--paper); }
.compare-tray > div:first-child span { color: #c1d2d1; }
.compare-tray .button { background: var(--atlas-lime); color: var(--ink); border-color: var(--atlas-lime); }
.compare-tray .button:hover { background: #c9e75b; border-color: #c9e75b; }
.compare-tray > .text-button { color: var(--paper); }
.tray-chip { background: #2b464c; color: var(--paper); border-color: #536f74; border-radius: 40px; }
.tray-chip button { color: var(--atlas-lime); }
.toast { background: var(--ink); border-radius: 40px; color: var(--paper); box-shadow: 0 4px 20px #142f3626; }

/* Compact desktops retain all six routes; mobile navigation remains a drawer. */
@media (min-width: 801px) and (max-width: 1230px) {
  .sidebar { gap: 16px; padding: 16px 24px; }
  .sidebar .nav-item { font-size: 12px; padding: 11px 9px; }
  .header-tools { gap: 8px; }
  .header-tools .currency { display: none; }
  .header-tools #top-brief { display: none; }
  .hero.hero-photographic { min-height: 495px; }
  .hero.hero-photographic h1 { font-size: clamp(58px, 6.1vw, 74px); letter-spacing: -4px; }
  .hero.hero-photographic .hero-copy { padding-right: 20px; }
  .hero.hero-photographic .hero-actions { gap: 11px; }
  .hero.hero-photographic .hero-link { font-size: 11px; }
  .journey-ribbon { padding: 8px; }
  .ribbon-item { gap: 10px; padding: 17px 10px; }
  .ribbon-copy strong { font-size: 13px; }
  .ribbon-copy small { font-size: 10px; }
  .ribbon-arrow { font-size: 18px; }
  .visual-tabs { gap: 12px; }
  .visual-tabs .tab { grid-template-columns: 65px minmax(0, 1fr); padding: 11px; gap: 12px; }
  .visual-tabs .tab .category-photo { width: 65px; height: 84px; }
  .category-copy strong { font-size: 14px; }
  .category-copy small { font-size: 11px; }
  .explore-layout { grid-template-columns: minmax(0, 1fr) 245px; gap: 24px; }
  .project-aside { padding: 23px 20px; }
  .project-snapshot h2 { font-size: 27px; }
  .cards.list-view .offer-card { grid-template-columns: minmax(170px, .85fr) minmax(175px, 1.15fr); gap: 0 20px; padding: 22px; }
  .cards.list-view .offer-header { grid-column: 1; grid-row: 1; padding-right: 0; }
  .cards.list-view .badge { grid-column: 1; grid-row: 2; }
  .cards.list-view .offer-price { grid-column: 1; grid-row: 3; }
  .cards.list-view .price-context { grid-column: 1; grid-row: 4; }
  .cards.list-view .offer-features { grid-column: 2; grid-row: 1 / 4; padding-right: 20px; }
  .cards.list-view .offer-caution { grid-column: 2; grid-row: 4; }
  .cards.list-view .match-reason { grid-column: 1 / 3; grid-row: 5; }
  .cards.list-view .chosen-label { grid-column: 1 / 3; grid-row: 6; }
  .cards.list-view .offer-actions { grid-column: 1 / 3; grid-row: 7; padding: 15px 0 0; margin-top: 18px; border-left: 0; border-top: 1px solid var(--line); flex-direction: row; align-items: center; justify-content: flex-end; }
  .cards.list-view .offer-actions .text-button { margin-right: auto; }
  .cards.list-view .offer-actions .compare-button { width: auto; }
  .cards.list-view .favorite-button { right: 14px; }
  .results-head { flex-direction: column; gap: 15px; }
  .result-controls { max-width: none; justify-content: flex-start; }
  .profile-editor-layout { grid-template-columns: minmax(0, 1fr) 270px; gap: 23px; }
  .profile-cover { gap: 32px; min-height: 410px; }
  .profile-cover > img { min-height: 410px; }
  .budget-layout { grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 22px; }
}

@media (min-width: 801px) and (max-width: 960px) {
  .sidebar { gap: 13px; }
  .sidebar .brand-logo { width: 39px; height: 39px; }
  .sidebar .brand-wordmark { font-size: 17px; }
  .sidebar .brand-wordmark > span:last-child { font-size: 14px; }
  .sidebar .nav-item { font-size: 11px; padding: 10px 8px; }
  .explore-layout { grid-template-columns: minmax(0, 1fr); }
  .project-aside { position: static; border-radius: 18px 18px 40px 18px; padding: 28px; }
  .snapshot-heading { margin-top: 0; margin-bottom: 17px; }
  .selection-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; border-top: 0; }
  .selection-row { border-bottom: 0; border-top: 1px solid #b1c759; }
  .project-aside .button { width: auto; }
  .profile-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero.hero-photographic h1 { font-size: 57px; letter-spacing: -3.5px; }
  .hero.hero-photographic .hero-copy { padding-right: 15px; }
  .hero.hero-photographic p { font-size: 14px; }
  .hero.hero-photographic .hero-actions { align-items: flex-start; gap: 12px; }
  .hero-route-stamp { width: 125px; right: 4%; }
  .hero-route-stamp > strong { font-size: 21px; }
  .ribbon-item { gap: 8px; }
  .ribbon-number { width: 25px; height: 25px; font-size: 11px; }
  .ribbon-copy strong { font-size: 12px; }
  .ribbon-copy small { display: none; }
  .ribbon-arrow { font-size: 16px; }
  .visual-tabs .tab { grid-template-columns: 58px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .visual-tabs .tab .category-photo { width: 58px; height: 82px; }
  .category-copy small { display: none; }
  .category-copy strong { font-size: 14px; }
  .budget-layout { grid-template-columns: 1fr; }
  .budget-summary { position: static; }
  .profile-cover h1 { font-size: 40px; letter-spacing: -1.8px; }
}

@media (max-width: 800px) {
  .sidebar { padding: 25px 20px; min-height: 100%; background: var(--paper); border-right: 1px solid #adbcb4; box-shadow: 5px 0 25px #142f3626; }
  .sidebar .brand { gap: 12px; margin-left: 9px; }
  .sidebar .brand-logo { width: 48px; height: 48px; }
  .sidebar .brand-wordmark { font-size: 21px; }
  .sidebar .brand-wordmark > span:last-child { font-size: 18px; }
  .sidebar nav { gap: 8px; }
  .sidebar .nav-item { border-radius: 40px; padding: 15px 19px; font-size: 14px; }
  .header-tools { border-color: var(--line); gap: 15px; }
  .header-tools .currency { font-size: 11px; }
  .header-tools #top-brief { display: inline-flex; }
  .motion-toggle, #motion-toggle { align-self: flex-start; }
  .topbar { background: var(--paper); border-bottom: 1px solid var(--line); min-height: 66px; padding: 12px 20px; }
  .topbar #launch-wizard { font-size: 11px; }
  main { padding: 21px 22px 0; }
  .workspace-strip { margin-bottom: 17px; padding-top: 0; padding-bottom: 20px; }
  .workspace-strip .eyebrow { font-size: 10px; }
  .hero.hero-photographic { min-height: 450px; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); margin-bottom: 23px; }
  .hero.hero-photographic h1 { font-size: clamp(47px, 7.3vw, 62px); letter-spacing: -3.3px; margin: 20px 0 21px; }
  .hero.hero-photographic .hero-copy { padding: 33px 20px 35px 0; }
  .hero.hero-photographic .hero-photo { top: 15px; height: calc(100% - 15px); width: 44%; }
  .hero.hero-photographic .eyebrow { max-width: 240px; font-size: 10px; }
  .hero.hero-photographic p { font-size: 14px; max-width: 330px; }
  .hero-title-city { font-size: 13px; letter-spacing: 0; margin-top: 20px; }
  .hero.hero-photographic .hero-actions { gap: 10px 18px; align-items: flex-start; margin-top: 23px; }
  .hero.hero-photographic .button { min-height: 44px; font-size: 12px; padding: 12px 16px; }
  .hero.hero-photographic .hero-link { font-size: 11px; }
  .hero-route-stamp { width: 116px; top: 1%; right: 3%; padding: 20px 12px 17px; }
  .hero-route-stamp > strong { font-size: 20px; }
  .hero-route-stamp > span:first-child { font-size: 9px; }
  .hero-route-stamp > span:last-child { font-size: 19px; }
  .hero-photo-caption { right: 42px; font-size: 9px; max-width: 210px; bottom: 15px; }
  .hero-orbit { left: 43%; width: 21%; top: 24%; height: 61%; }
  .journey-ribbon { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; margin-bottom: 28px; border-radius: 14px 14px 30px 14px; }
  .ribbon-item { padding: 15px 13px; }
  .ribbon-item:nth-child(3)::before { display: none; }
  .ribbon-item:nth-child(n+3) { border-top: 1px solid #476168; border-radius: 0 0 10px 10px; }
  .ribbon-item + .ribbon-item::before { top: 18px; bottom: 18px; }
  .ribbon-copy strong { font-size: 13px; }
  .ribbon-copy small { font-size: 11px; }
  .visual-tabs { gap: 12px; margin-bottom: 28px; }
  .visual-tabs .tab { display: flex; flex-direction: column; padding: 13px; align-items: stretch; gap: 12px; min-height: 0; }
  .visual-tabs .tab .category-photo { width: 100%; height: 96px; border-radius: 45px 45px 8px 8px; }
  .visual-tabs .tab[data-category="visa"] .category-photo { border-radius: 8px 40px 8px 40px; }
  .visual-tabs .tab[data-category="insurance"] .category-photo { border-radius: 40px 8px 40px 8px; }
  .category-copy strong { font-size: 14px; letter-spacing: -.25px; }
  .category-copy small { font-size: 11px; }
  .explore-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .project-aside { position: static; padding: 29px; border-radius: 18px 18px 40px 18px; }
  .snapshot-heading { margin-top: 0; margin-bottom: 17px; }
  .selection-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; border-top: 0; }
  .selection-row { border-top: 1px solid #b1c759; border-bottom: 0; }
  .project-aside .button { width: auto; }
  .profile-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .result-controls { max-width: none; flex-direction: row; justify-content: flex-start; }
  .results-head { flex-direction: column; gap: 15px; }
  .cards.list-view .offer-card { grid-template-columns: minmax(190px, .85fr) minmax(210px, 1.15fr); gap: 0 22px; padding: 24px; }
  .cards.list-view .offer-actions { border-left: 0; border-top: 1px solid var(--line); padding: 16px 0 0; margin-top: 18px; flex-direction: row; justify-content: flex-end; }
  .cards.list-view .offer-actions .text-button { margin-right: auto; }
  .cards.list-view .offer-actions .compare-button { width: auto; }
  .cards.list-view .favorite-button { right: 16px; }
  .profile-cover { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 28px; padding-top: 15px; min-height: 380px; }
  .profile-cover > div { padding: 25px 0 30px; }
  .profile-cover h1 { font-size: clamp(32px, 5.5vw, 42px); letter-spacing: -1.8px; }
  .profile-cover p { font-size: 13px; }
  .profile-cover > img { min-height: 380px; border-radius: 100px 12px 85px 12px; }
  .profile-cutout { width: 110px; height: 110px; left: 43%; }
  .profile-cover-links { font-size: 11px; gap: 13px; }
  .profile-editor-layout { grid-template-columns: 1fr; }
  .profile-perspective { position: static; border-radius: 16px 16px 50px 16px; }
  .profile-perspective h2 { max-width: 550px; }
  .profile-save-bar { border-radius: 20px; }
  .living-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
  .living-card { padding: 25px; }
  #page-profil [id], .category-context { scroll-margin-top: 85px; }
  .page-banner { height: 158px; }
  .page-heading h1 { font-size: 44px; letter-spacing: -1.9px; }
  .budget-layout { grid-template-columns: 1fr; }
  .budget-summary { position: static; }
  .method-grid .white-panel { grid-template-columns: 42px minmax(0, 1fr); gap: 7px 17px; }
  .method-number { grid-row: 1 / 3; }
  .method-grid h2 { font-size: 20px; }
  .compare-tray { border-radius: 22px; }
}

@media (max-width: 620px) {
  main { padding: 20px 16px 0; }
  .topbar { padding: 10px 12px; gap: 8px; }
  .topbar .text-button { font-size: 11px; }
  .breadcrumb { font-size: 11px; }
  .workspace-strip { gap: 13px; padding-bottom: 18px; margin-bottom: 15px; }
  .workspace-strip .eyebrow { font-size: 10px; }
  .workspace-strip select { font-size: 12px; min-height: 40px; }
  .workspace-tools { width: 100%; }
  .workspace-strip .button { border-radius: 40px; font-size: 11px; min-height: 38px; }
  .hero.hero-photographic { display: flex; flex-direction: column; min-height: 0; margin-bottom: 20px; padding-bottom: 0; gap: 0; }
  .hero.hero-photographic .hero-copy { padding: 25px 0 29px; width: 100%; max-width: none; }
  .hero.hero-photographic h1 { font-size: clamp(49px, 12vw, 69px); line-height: .98; letter-spacing: -3.1px; margin: 20px 0 19px; max-width: 100%; }
  .hero.hero-photographic .eyebrow { font-size: 10px; max-width: none; }
  .hero-title-city { font-size: 13px; margin-top: 17px; }
  .hero.hero-photographic p { font-size: 14px; max-width: 340px; line-height: 1.7; }
  .hero.hero-photographic .hero-actions { margin-top: 22px; align-items: center; gap: 14px; }
  .hero.hero-photographic .hero-link { font-size: 11px; min-height: 38px; }
  .hero.hero-photographic .hero-photo { position: relative; inset: auto; order: 2; width: 100%; height: 248px; z-index: 0; object-position: 58% 50%; border-radius: 130px 130px 10px 10px; clip-path: polygon(0 0, 100% 0, 100% 82%, 87% 100%, 0 100%); }
  .hero-photo-caption { right: 54px; bottom: 13px; max-width: 240px; font-size: 9px; }
  .hero-route-stamp { top: auto; right: 3%; bottom: 112px; width: 112px; padding: 18px 12px 15px; transform: rotate(6deg); }
  .hero-route-stamp > strong { font-size: 19px; }
  .hero-orbit { left: 3%; top: auto; bottom: 12px; width: 34%; height: 235px; }
  .journey-ribbon { margin-bottom: 26px; padding: 7px; }
  .ribbon-item { padding: 14px 9px; gap: 8px; }
  .ribbon-number { width: 25px; height: 25px; font-size: 10px; }
  .ribbon-copy strong { font-size: 12px; }
  .ribbon-copy small { display: none; }
  .ribbon-arrow { font-size: 16px; }
  .visual-tabs { grid-template-columns: minmax(0, 1fr); gap: 11px; margin-bottom: 26px; }
  .visual-tabs .tab { display: grid; grid-template-columns: 75px minmax(0, 1fr); gap: 16px; padding: 12px 16px 12px 12px; border-radius: 13px; }
  .visual-tabs .tab .category-photo { width: 75px; height: 77px; border-radius: 35px 35px 8px 8px; }
  .category-kicker { font-size: 10px; margin-bottom: 5px; }
  .category-copy strong { font-size: 16px; font-weight: 750; letter-spacing: -.4px; }
  .category-copy small { font-size: 11px; line-height: 1.45; margin-top: 5px; }
  .profile-panel { padding: 22px 20px; border-radius: 13px 13px 28px 13px; }
  .panel-heading h2 { font-size: 18px; }
  .panel-heading .eyebrow { font-size: 10px; line-height: 1.5; }
  .panel-heading .text-button { font-size: 11px; max-width: 108px; }
  .profile-fields { grid-template-columns: 1fr; gap: 15px; }
  .profile-fields label { font-size: 12px; }
  .profile-fields select { min-height: 44px; font-size: 13px; }
  .category-context { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding-bottom: 21px; }
  #category-context-image { width: 72px; height: 87px; }
  #category-context-title { font-size: 21px; letter-spacing: -.7px; }
  #category-context-note { font-size: 11px; line-height: 1.6; }
  .results-head h2 { font-size: 23px; }
  .results-head p { font-size: 12px; }
  .result-controls { gap: 7px; width: 100%; }
  .result-controls select { min-height: 40px; font-size: 11px; flex: 1 1 120px; max-width: none; }
  .directory-toolbar { margin-top: 18px; }
  .filter-chip { font-size: 11px; min-height: 42px; }
  .view-switch button { min-width: 32px; }
  .results-meta { font-size: 11px; gap: 10px; }
  .legend { font-size: 10px; }
  .cards, .cards.grid-view { grid-template-columns: 1fr; gap: 14px; }
  .offer-card, .cards.grid-view .offer-card { padding: 23px 21px; border-radius: 12px; }
  .cards.list-view .offer-card { display: flex; flex-direction: column; padding: 23px 21px; gap: 0; }
  .offer-header, .cards.list-view .offer-header { padding-right: 24px; margin-bottom: 14px; }
  .offer-header h3, .cards.list-view .offer-header h3 { font-size: 17px; letter-spacing: -.35px; }
  .offer-mark { width: 45px; height: 45px; }
  .offer-price, .cards.list-view .offer-price { font-size: 32px; }
  .cards.list-view .badge { margin-bottom: 13px; }
  .cards.list-view .offer-features { margin: 18px 0 13px; padding: 17px 0 0; border-top: 1px solid var(--line); }
  .cards.list-view .offer-caution { margin: 0; padding: 0; }
  .cards.list-view .match-reason { margin-top: 15px; }
  .cards.list-view .chosen-label { margin: 13px 0 0; }
  .cards.list-view .offer-actions { padding: 16px 0 0; margin-top: 17px; border-left: 0; border-top: 1px solid var(--line); gap: 11px; justify-content: space-between; }
  .cards.list-view .offer-actions .text-button { margin-right: auto; font-size: 12px; }
  .cards.list-view .offer-actions .compare-button { width: auto; }
  .cards.list-view .favorite-button { top: 17px; right: 14px; }
  .project-aside { padding: 27px 23px; }
  .project-snapshot h2 { font-size: 30px; }
  .selection-summary { grid-template-columns: 1fr; gap: 0; border-top: 1px solid #b1c759; }
  .selection-row { border-top: 0; border-bottom: 1px solid #b1c759; }
  .project-aside .button { width: 100%; }
  .clarity-note { padding: 19px; border-radius: 10px; gap: 10px; }
  .clarity-note p, .clarity-note strong { font-size: 11px; }
  .next-step { padding: 27px 23px; margin-top: 26px; border-radius: 14px 14px 35px 14px; }
  .next-step h2 { font-size: 25px; }
  .next-step .button { width: 100%; }
  .profile-cover { display: flex; flex-direction: column; gap: 0; min-height: 0; padding-top: 0; margin-bottom: 30px; }
  .profile-cover > div { padding: 25px 0 28px; }
  .profile-cover h1 { margin-top: 18px; font-size: 42px; line-height: 1.04; letter-spacing: -2.2px; }
  .profile-cover p { max-width: 380px; font-size: 13px; }
  .profile-cover > img { min-height: 0; height: 250px; border-radius: 95px 12px 80px 12px; object-position: 72% 52%; }
  .profile-cover-links { gap: 18px; font-size: 11px; margin-top: 22px; }
  .profile-cutout { left: auto; right: 5%; bottom: 175px; width: 105px; height: 105px; }
  .profile-editor-form fieldset { padding: 24px 20px; border-radius: 13px; margin-bottom: 18px; }
  .profile-editor-form legend { font-size: 21px; }
  .profile-editor-form legend span { width: 28px; height: 28px; margin-right: 9px; }
  .profile-editor-form .form-grid { gap: 19px; }
  .profile-save-bar { border-radius: 16px; padding: 15px; gap: 12px; }
  .profile-save-bar .button-row { gap: 10px; }
  .profile-save-bar .button { font-size: 11px; padding: 12px 15px; }
  .profile-perspective { padding: 27px 24px; }
  .profile-perspective h2 { font-size: 30px; }
  .installation-ideas { margin-top: 40px; }
  .installation-ideas h2 { font-size: 30px; letter-spacing: -1.1px; }
  .living-section-heading h3 { font-size: 25px; letter-spacing: -.7px; }
  .living-cards { grid-template-columns: 1fr; gap: 17px; }
  .living-card { padding: 26px; }
  .living-card h3 { font-size: 25px; }
  .living-price { font-size: 31px; }
  .living-empty { padding: 26px 23px; }
  .commute-ideas { padding: 26px 23px; }
  .page-banner { height: 145px; border-radius: 65px 12px 12px 12px; margin-bottom: 21px; }
  .page-heading { padding: 12px 0 28px; }
  .page-heading h1 { font-size: 40px; letter-spacing: -1.9px; }
  .page-heading > p { font-size: 13px; }
  .white-panel, .dossier-section, .budget-layout > .white-panel { padding: 24px 21px; border-radius: 13px; }
  .white-panel > h2 { font-size: 21px; }
  .budget-summary { padding: 27px 24px; border-radius: 14px 14px 45px 14px; }
  .budget-big { font-size: 48px; }
  .route-card { padding: 23px 19px; gap: 13px; }
  .route-step { width: 29px; min-width: 29px; height: 29px; font-size: 11px; }
  .route-content h2 { font-size: 17px; }
  .section-bar h2 { font-size: 22px; }
  #dossier-overview .dossier-section { padding: 23px 21px; }
  .dossier-section h2 { font-size: 21px; }
  .empty-state { padding: 40px 23px; }
  .empty-state h2 { font-size: 24px; }
  .method-grid .white-panel { padding: 25px 21px; }
  .method-number { width: 31px; height: 31px; font-size: 11px; }
  .method-grid h2 { font-size: 20px; }
  .source-row { padding: 20px; }
  .source-row h3 { font-size: 14px; }
  .source-tag { font-size: 10px; }
  .main-footer { font-size: 10px; }
  dialog { padding: 22px; border-radius: 18px; }
  .modal-top { margin-bottom: 20px; padding-bottom: 14px; }
  .modal-title { font-size: 28px; letter-spacing: -.9px; }
  .detail-cell { padding: 17px; }
  .wizard-question h3, .wizard-question legend { font-size: 21px; }
  .wizard-option { padding: 16px; }
  .compare-tray { border-radius: 18px; padding: 15px; gap: 10px; }
  .compare-tray strong { font-size: 12px; }
  .compare-tray .button { min-height: 40px; padding: 10px 13px; font-size: 12px; }
  .toast { border-radius: 22px; padding: 13px 18px; }
}

@media (max-width: 380px) {
  .hero.hero-photographic h1 { font-size: 47px; letter-spacing: -2.8px; }
  .hero.hero-photographic .hero-actions { gap: 11px; }
  .hero.hero-photographic .button { padding: 12px 14px; font-size: 11px; }
  .hero.hero-photographic .hero-link { font-size: 10px; }
  .hero.hero-photographic .hero-photo { height: 224px; }
  .hero-route-stamp { bottom: 90px; }
  .ribbon-item { padding-left: 7px; padding-right: 7px; }
  .ribbon-number { width: 23px; height: 23px; }
  .ribbon-copy strong { font-size: 11px; }
  .ribbon-arrow { font-size: 14px; }
  .visual-tabs .tab { grid-template-columns: 65px minmax(0, 1fr); gap: 13px; }
  .visual-tabs .tab .category-photo { width: 65px; }
  .profile-cover h1 { font-size: 38px; }
  .page-heading h1 { font-size: 36px; }
  .profile-save-bar .button-row { flex-direction: column; align-items: stretch; }
  .profile-save-bar .button-row .text-button { justify-content: center; }
}

/* Motion is enhancement only: content is fully visible without JavaScript. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hero-route-stamp { transform: rotate(7deg); }
}
body.motion-paused *, body.motion-paused *::before, body.motion-paused *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

@media print {
  .journey-ribbon, .hero-orbit, .hero-route-stamp, .profile-cutout, .motion-toggle, #motion-toggle { display: none !important; }
  .hero.hero-photographic, .profile-cover { display: block; background: white; min-height: 0; height: auto; }
  .hero.hero-photographic .hero-copy { position: static; padding: 0; }
  .hero.hero-photographic h1, .page-heading h1, .profile-cover h1 { color: #111; font-size: 27pt; letter-spacing: -.5px; }
  .hero-title-line:nth-child(2) { box-shadow: none; }
  .hero-title-city { color: #111; }
  .project-aside, .profile-perspective, .budget-summary { border-radius: 0; background: white; color: #111; }
  .print-content { color: #111; }
}

/* Keep the owner tools reachable on short mobile viewports. */
@media (max-width:800px) {
  .sidebar { min-height:0; height:100vh; height:100dvh; max-height:100dvh; overflow-y:auto; overscroll-behavior:contain; }
  .sidebar > .header-tools { flex-shrink:0; }
}
.cards.list-view .eligibility-note { grid-column:1 / 3; grid-row:5; margin:10px 0 0; }
.footer-brand { display:flex; align-items:center; gap:12px; }
.footer-brand > img { flex-shrink:0; }
.main-footer .footer-brand > span { margin:0; }

/* Responsive polish, checked against the working interface. */
.mobile-brand, .drawer-close, .wizard-link-short { display:none; }
.menu-backdrop { position:fixed; inset:0; z-index:110; border:0; padding:0; background:#142f3659; cursor:pointer; }
.tray-chip { min-width:0; max-width:240px; flex-shrink:0; }
.tray-chip-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tray-chip button { flex-shrink:0; min-width:28px; min-height:28px; }
.compare-tray #tray-chips { min-width:0; flex:1; flex-wrap:nowrap; overflow-x:auto; padding:4px 3px; scrollbar-width:thin; overscroll-behavior-x:contain; }
body.has-tray main { padding-bottom:var(--compare-tray-space,150px); }
.has-tray .toast { bottom:calc(var(--compare-tray-space,150px) + 12px); }
.project-aside[data-static="true"], .profile-perspective[data-static="true"] { position:static; }
@media(max-width:960px) {
  .compare-tray { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:9px 14px; }
  .compare-tray > div:first-child { grid-column:1; grid-row:1; }
  .compare-tray > .text-button { grid-column:2; grid-row:1; margin:0; }
  .compare-tray > .button { grid-column:3; grid-row:1; }
  .compare-tray #tray-chips { grid-column:1/-1; grid-row:2; display:flex; width:100%; margin:0; }
  .tray-chip { max-width:210px; }
}
@media(max-width:800px) {
  .topbar { position:sticky; top:0; z-index:50; background:var(--paper); min-height:64px; border-bottom:1px solid var(--line); }
  .topbar-left { gap:10px; }
  .topbar .breadcrumb { display:none; }
  .mobile-brand { display:inline-flex; gap:7px; align-items:center; color:var(--ink); font-size:13px; font-weight:800; line-height:1; letter-spacing:-.35px; }
  .mobile-brand img { display:block; width:32px; height:32px; flex-shrink:0; }
  .mobile-brand > span > span { color:#a33f2a; }
  .wizard-link-full { display:none; }
  .wizard-link-short { display:inline; }
  .sidebar { z-index:120; transition:none; }
  .sidebar.drawer-animate { transition:transform .18s ease-out; }
  .drawer-close { display:inline-flex; position:absolute; top:20px; right:14px; }
  body.menu-open { overflow:hidden; }
  .compare-tray { bottom:calc(12px + env(safe-area-inset-bottom,0px)); border-radius:18px; }
  .profile-save-bar { bottom:calc(8px + env(safe-area-inset-bottom,0px)); }
  .hero-route-stamp { width:105px; padding:18px 12px 15px; }
  .hero-route-stamp > strong { font-size:18px; letter-spacing:-.6px; }
  .hero-route-stamp > span:last-child { font-size:18px; }
}
@media(max-width:620px) {
  .compare-tray { gap:6px 10px; padding:12px 14px; }
  .compare-tray > div:first-child span { display:none; }
  .compare-tray strong { font-size:11px; line-height:1.5; }
  .compare-tray > .text-button { font-size:11px; }
  .compare-tray .button { min-height:40px; padding:10px 12px; font-size:11px; }
  .tray-chip { max-width:185px; }
  .hero-route-stamp { bottom:128px; }
  .profile-cover .profile-cutout { width:90px; height:90px; left:2%; bottom:22px; opacity:.9; }
}
@media(max-width:380px) { .hero-route-stamp { bottom:105px; } }
@media(min-width:961px) and (max-height:700px) { .project-aside, .profile-perspective { position:static; } }
@media(prefers-reduced-motion:reduce) { .sidebar.drawer-animate { transition:none; } }
@media print { .menu-backdrop, .mobile-brand, .drawer-close { display:none!important; } }

.profile-save-bar { position:static; }
.profile-editor-form[data-docked="true"] .profile-save-bar { position:sticky; bottom:14px; }
@media(max-width:800px) { .profile-editor-form[data-docked="true"] .profile-save-bar { bottom:calc(8px + env(safe-area-inset-bottom,0px)); } }

/* Selection labels keep the same action-row geometry at phone widths. */
@media(max-width:620px) {
  .offer-actions, .cards.list-view .offer-actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
  .offer-actions .text-button, .cards.list-view .offer-actions .text-button { margin-right:0; font-size:11px; gap:4px; }
  .offer-actions .compare-button, .cards.list-view .offer-actions .compare-button { width:100%; min-width:0; padding:10px 8px; font-size:11px; gap:5px; white-space:nowrap; }
}

.budget-summary[data-static="true"] { position:static; }
@media(min-width:1231px) { .hero.hero-photographic { min-height:520px; } }

/* Native selects must not set the minimum width of a budget grid. */
.budget-layout, .budget-layout > *, .budget-layout select, .budget-summary { min-width:0; }
.budget-layout select { width:100%; max-width:100%; }
.amount-input input { min-width:0; }
@media(max-width:960px) { .budget-layout { grid-template-columns:minmax(0,1fr); } }