/* ==========================================================================
   MNS Homez visual theme: navy from the logo, teal light, photo backgrounds,
   liquid-glass surfaces. Loaded after components.css and pages.css.
   ========================================================================== */
:root {
  --brand: #0B2A45;
  --brand-deep: #061B2E;
  --glow: #38B6E0;
  --glow-soft: rgba(56, 182, 224, 0.28);
  --grad-brand: linear-gradient(135deg, #0B2A45 0%, #003C5C 55%, #0A6E96 100%);
  --grad-btn: linear-gradient(135deg, #003C5C 0%, #0A6E96 100%);
  --grad-page: radial-gradient(1200px 520px at 85% -10%, rgba(56,182,224,0.14), transparent 60%), radial-gradient(900px 480px at -10% 20%, rgba(176,141,87,0.10), transparent 55%), linear-gradient(180deg, #F7F4EF 0%, #FFFFFF 100%);
  --glass-bg: rgba(255, 255, 255, 0.66);
  --glass-bg-strong: rgba(255, 255, 255, 0.82);
  --glass-dark: rgba(8, 30, 50, 0.42);
  --glass-line: rgba(255, 255, 255, 0.55);
  --glass-shadow: 0 10px 40px rgba(6, 27, 46, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --glass-blur: blur(20px) saturate(160%);
}

/* ---------- Page canvas ---------- */
body { background: #fff; }
.section--sand { background: var(--grad-page); }
.section--glow { position: relative; background: var(--grad-brand); color: #E8F1F6; overflow: hidden; }
.section--glow::before { content: ""; position: absolute; inset: -20% -10% auto; height: 70%; background: radial-gradient(closest-side, var(--glow-soft), transparent 70%); pointer-events: none; }
.section--glow h1, .section--glow h2, .section--glow h3, .section--glow h4 { color: #fff; line-height: 1.25; }
.section--glow .eyebrow { color: #9FD3EA; }
.section--glow a:not(.btn) { color: #9FD3EA; }
.section--glow p, .section--glow .lead, .section--glow .section-head p { color: #E8F1F6; }

/* ---------- Header: glass ---------- */
.site-header { background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom-color: rgba(11, 31, 46, 0.06); }
.site-header.is-scrolled { background: rgba(255, 255, 255, 0.86); box-shadow: 0 6px 24px rgba(6, 27, 46, 0.08); height: var(--header-h); }
.site-header .btn--primary { background: var(--grad-btn); border: 0; box-shadow: 0 6px 18px rgba(10, 110, 150, 0.28); }
.nav-panel { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: rgba(255,255,255,0.7); box-shadow: var(--glass-shadow); }
.sheet { background: linear-gradient(180deg, #fff 0%, #F3F7FA 100%); }

/* ---------- Buttons ---------- */
.btn--primary { background: var(--grad-btn); border: 0; box-shadow: 0 8px 22px rgba(10, 110, 150, 0.26); }
.btn--primary:hover { background: linear-gradient(135deg, #002A41 0%, #0A6E96 100%); box-shadow: 0 10px 26px rgba(10, 110, 150, 0.34); transform: translateY(-1px); }
.btn--light { background: #fff; color: var(--brand); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18); }
.btn--outline-light { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.55); }
.btn--outline-light:hover { background: rgba(255,255,255,0.22); }
.btn { transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease); }

/* ---------- Surfaces: glass only over a photo or gradient ---------- */
.card, .kpi, .chart-card, .area-card, .callout, .form-card, .tool-inputs, .table-wrap, .path-step {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid rgba(11, 31, 46, 0.08);
  box-shadow: 0 1px 2px rgba(11,31,46,.04), 0 12px 32px rgba(6, 27, 46, 0.08);
}
.glass, .offer-panel, .hero .trust, .insight, .page-head .callout, .page-head .path-chip, .next-band .container, .site-header {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.offer-panel {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow);
  padding: 22px;
  color: #001B2B;
}
.offer-panel h2, .offer-panel label, .offer-panel .lbl, .offer-panel p { color: #001B2B; }
.offer-panel h2 { margin: 0 0 12px; font-size: 1.35rem; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr); gap: 28px; align-items: center; width: 100%; }
.hero-grid h1 { max-width: none; }
@media (max-width: 899px) { .hero-grid { grid-template-columns: 1fr; } }
.field .lbl { display: block; font-weight: 600; font-size: var(--fs-sm); margin-bottom: 6px; }

/* ---------- Home hero offer panel ----------
   Roomier rhythm, even segmented controls, themed sliders. Scoped to
   #home-offer so the tool pages keep their compact form layout. */
#home-offer { padding: var(--s6); }
#home-offer h2 { margin: 0 0 var(--s5); font-size: 1.5rem; line-height: 1.25; }
#home-offer .field { gap: var(--s3); margin-bottom: var(--s5); }
#home-offer .field > label,
#home-offer .field > .lbl { margin: 0; line-height: 1.35; }
#home-offer .field .help { margin-top: var(--s2); line-height: 1.5; }
#home-offer .field:has(> .help) { margin-bottom: var(--s6); }
#home-offer .grid.g2 { gap: 0 var(--s5); align-items: start; }

/* Segmented controls fill their row; every button shares the width evenly. */
#home-offer .seg { display: flex; flex-wrap: nowrap; width: 100%; gap: var(--s1); padding: var(--s1); }
#home-offer .seg button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
}

/* Goal pills sit in an even grid so they never wrap ragged.
   Four across only when this panel is actually wide (hero stacked).
   In the desktop two-column hero the panel is ~530px, so two by two stays even. */
#home-offer .goal-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) and (max-width: 899px) {
  #home-offer .goal-pills { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Desktop hero column: give the 3-way status control more room than the bedroom select.
   Rent and service charge stay paired; the note runs under both, full width. */
@media (min-width: 1200px) {
  #home-offer .grid.g2:has([data-seg="hstatus"]) {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  }
  #home-offer .grid.g2:has(#ho-sc) { row-gap: var(--s3); margin-bottom: var(--s6); }
  #home-offer .grid.g2:has(#ho-sc) > .field { display: contents; }
  #home-offer .grid.g2:has(#ho-sc) > .field:first-child > label { grid-column: 1; grid-row: 1; align-self: end; }
  #home-offer .grid.g2:has(#ho-sc) > .field:first-child > .input-unit { grid-column: 1; grid-row: 2; }
  #home-offer .grid.g2:has(#ho-sc) > .field:last-child > label { grid-column: 2; grid-row: 1; align-self: end; }
  #home-offer .grid.g2:has(#ho-sc) > .field:last-child > .input-unit { grid-column: 2; grid-row: 2; }
  #home-offer .grid.g2:has(#ho-sc) > .field:last-child > .help { grid-column: 1 / -1; grid-row: 3; margin-top: 0; }
}

/* Narrow two-column hero: stack the paired fields so segments keep full width. */
@media (min-width: 900px) and (max-width: 1199px) {
  #home-offer .grid.g2 { grid-template-columns: 1fr; }
}

/* Sliders match the theme instead of the browser default. */
#home-offer input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: var(--s2) 0 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
#home-offer input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--sand-200); }
#home-offer input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: #fff; border: 2px solid var(--teal); box-shadow: 0 1px 4px rgba(11,31,46,.25); }
#home-offer input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--sand-200); }
#home-offer input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--teal); box-shadow: 0 1px 4px rgba(11,31,46,.25); }

/* One clear full-width action, a quiet secondary, then the footnote. */
#home-offer .btn--primary { display: flex; width: 100%; margin-top: var(--s2); }
#home-offer .btn--ghost { display: flex; width: 100%; margin-top: var(--s3); }
#home-offer .note { margin: var(--s4) 0 0; text-align: center; line-height: 1.5; color: var(--muted); }

@media (max-width: 599px) { #home-offer { padding: var(--s5) var(--s4); } }
.lights { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 799px) { .lights { grid-template-columns: 1fr 1fr; } }
@media (max-width: 479px) { .lights { grid-template-columns: 1fr; } }
.light { background: #fff; border: 1px solid rgba(11,31,46,.08); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--ink); }
.light i { width: 10px; height: 10px; border-radius: 50%; background: #9aa; display: inline-block; }
.light.green { background: color-mix(in srgb, var(--positive) 13%, #fff); border-color: color-mix(in srgb, var(--positive) 28%, #fff); }
.light.yellow { background: color-mix(in srgb, var(--gold-soft) 20%, #fff); border-color: color-mix(in srgb, var(--gold-soft) 38%, #fff); }
.light.red { background: color-mix(in srgb, var(--negative) 12%, #fff); border-color: color-mix(in srgb, var(--negative) 26%, #fff); }
.light.blank { background: #fff; border-color: rgba(11,31,46,.08); }
.light.green i { background: var(--positive); }
.light.yellow i { background: var(--gold-soft); }
.light.red i { background: var(--negative); }
.light.blank i { background: #C5CDD4; }
.otp-boxes { display: flex; gap: 8px; margin: 8px 0 12px; }
.otp-box { width: 44px; height: 52px; text-align: center; font-size: 1.25rem; }
.reason-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.reason-list p { margin: 4px 0 0; }
.callout { background: rgba(230, 242, 247, 0.75); }
.callout--risk { background: rgba(247, 244, 239, 0.85); }
.card:hover, a.card:hover, .area-card:hover { box-shadow: 0 2px 4px rgba(11,31,46,.06), 0 18px 44px rgba(6, 27, 46, 0.14), inset 0 1px 0 rgba(255,255,255,0.8); }
.glass--dark { background: var(--glass-dark); border-color: rgba(255,255,255,0.22); color: #fff; box-shadow: var(--glass-shadow); }
.glass--dark .kpi-label, .glass--dark .kpi-src, .glass--dark .kpi-src a, .glass--dark .kpi-period { color: var(--on-dark-muted); }
.glass--dark .kpi-value, .glass--dark h3 { color: #fff; }
.kpi { border-top: 3px solid transparent; border-image: linear-gradient(90deg, #003C5C, #38B6E0) 1; border-image-slice: 1 0 0 0; border-radius: var(--r-md); }
.kpi-value { background: linear-gradient(135deg, #0B2A45, #0A6E96); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi--dark .kpi-value { background: none; color: #fff; }

/* ---------- Home hero ---------- */
.hero { min-height: min(92vh, 860px); display: flex; flex-direction: column; justify-content: center; overflow: visible; background: var(--brand-deep); }
.hero picture { overflow: hidden; }
.hero::after { background: linear-gradient(100deg, rgba(6,27,46,.86) 0%, rgba(11,42,69,.62) 42%, rgba(11,42,69,.22) 72%, rgba(6,27,46,.35) 100%), radial-gradient(900px 500px at 80% 20%, rgba(56,182,224,.22), transparent 65%); pointer-events: none; }
.hero .container { width: 100%; padding-block: 96px 148px; }
.hero h1 { font-size: clamp(2.5rem, 5.2vw, 4.25rem); max-width: 16ch; line-height: 1.25; text-shadow: 0 6px 30px rgba(0,0,0,.35); color: #fff; }
.hero .lead { color: #E8F1F6; font-size: 1.25rem; max-width: 52ch; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.hero .eyebrow { color: #9FD3EA !important; }
.hero .trust { background: var(--glass-dark); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255,255,255,0.22); border-radius: var(--r-md); padding: 14px 18px; display: inline-flex; box-shadow: var(--glass-shadow); color: #E8F1F6; }
.hero .trust .ph { background: rgba(255,214,102,.22); color: #FFE08A; }
.snapshot { margin-top: 0; background: #fff; display: flow-root; position: relative; z-index: 2; color: var(--ink); }
.snapshot > .container { display: flow-root; }
#home-kpis { margin-top: -112px; position: relative; z-index: 1; }
.snapshot .kpi { background: rgba(255,255,255,0.78); border: 1px solid rgba(255,255,255,0.85); box-shadow: 0 24px 60px rgba(6,27,46,0.22), inset 0 1px 0 rgba(255,255,255,0.9); }
.snapshot-foot, #snap-asof { color: var(--ink); }
.snapshot-foot { background: #fff; }
.snapshot-foot a { color: var(--teal); }
#path { background: #fff; overflow: visible; padding-block: var(--section-y); }
#path .eyebrow, #path h2 { overflow: visible; line-height: 1.25; }
@media (max-width: 899px) {
  .hero { min-height: auto; justify-content: flex-start; }
  .hero .container { padding-block: 72px 104px; }
  .hero::after { background: linear-gradient(180deg, rgba(6,27,46,.80) 0%, rgba(11,42,69,.72) 100%); }
  #home-kpis { margin-top: -64px; }
}

/* ---------- Investor path ---------- */
.path { position: relative; }
.path-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s4); counter-reset: p; }
@media (max-width: 1023px) { .path-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 599px) { .path-grid { grid-template-columns: 1fr; } }
.path-step { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px; border-radius: var(--r-lg); text-decoration: none; color: inherit; counter-increment: p; transition: transform .16s var(--ease), box-shadow .16s var(--ease); }
.path-step:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(6,27,46,0.14), inset 0 1px 0 rgba(255,255,255,.9); color: inherit; }
.path-step::before { content: counter(p, decimal-leading-zero); font: 600 .8125rem var(--font-sans); letter-spacing: .08em; color: var(--teal); }
.path-step .icon { width: 44px; height: 44px; border-radius: 12px; background: var(--grad-btn); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 18px rgba(10,110,150,.28); }
.path-step .icon svg { width: 22px; height: 22px; }
.path-step h3 { margin: 4px 0 0; font-size: 1.125rem; }
.path-step p { margin: 0; color: var(--muted); font-size: var(--fs-sm); flex: 1; }
.path-step .more { color: var(--teal); font-weight: 600; font-size: var(--fs-sm); display: inline-flex; gap: 4px; align-items: center; }
.path-step .more svg { width: 16px; height: 16px; }
.path-step.is-current { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ---------- Insights strip (dark, on photo) ---------- */
.insights { position: relative; color: #E8F1F6; overflow: hidden; background: var(--brand-deep); padding-block: calc(var(--section-y) + 4px); }
.insights picture, .insights picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.insights::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,27,46,.82), rgba(11,42,69,.88)); }
.insights .container { position: relative; z-index: 1; }
.insights h2, .insights h3 { color: #fff; }
.insights .section-head p { color: var(--on-dark-muted); }
.insight { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: var(--r-lg); background: var(--glass-dark); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255,255,255,0.2); box-shadow: var(--glass-shadow); min-height: 100%; }
.insight .big { font: 600 2.25rem/1 var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.insight .big small { display: block; font: 500 .8125rem/1.3 var(--font-sans); color: var(--on-dark-muted); margin-top: 6px; letter-spacing: 0; }
.insight .what { font-size: var(--fs-sm); color: #E8F1F6; margin: 0; flex: 1; }
.insight .so { font-size: var(--fs-sm); margin: 0; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.18); color: #fff; }
.insight .so strong { color: #9FD3EA; }
.insight .src { font-size: var(--fs-micro); color: var(--on-dark-muted); margin: 0; }
.insight .src a { color: var(--on-dark-muted); }
.insight .bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
.insight .bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #38B6E0, #7EB8D4); }
.insight .bar i.neg { background: linear-gradient(90deg, #E08B6F, #B4462F); }
@media (max-width: 599px) { .insights .grid.g4 { grid-template-columns: 1fr; } }
@media (min-width: 600px) and (max-width: 1023px) { .insights .grid.g4 { grid-template-columns: 1fr 1fr; } }

/* ---------- Areas at a glance ---------- */
.glance { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s4); }
@media (max-width: 899px) { .glance { grid-template-columns: 1fr; } }
.glance .area-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.glance .area-card .area-metrics dd { font-size: 1rem; }
.glance .area-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,27,46,0) 40%, rgba(6,27,46,.55) 100%); }
.glance .area-thumb .tag { z-index: 1; }
.rank-list { display: grid; gap: 10px; }
.rank-row { display: grid; grid-template-columns: minmax(0, 190px) 1fr auto; gap: 12px; align-items: center; font-size: var(--fs-sm); text-decoration: none; }
.rank-row:hover .name { color: var(--teal); }
@media (max-width: 599px) { .rank-row { grid-template-columns: minmax(0, 36%) 1fr auto; } .rank-row .v { min-width: 52px; } }
.rank-row .name { font-weight: 600; color: var(--navy-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row .track { height: 10px; border-radius: 5px; background: rgba(11,31,46,.08); overflow: hidden; }
.rank-row .fill { display: block; height: 100%; border-radius: 5px; background: var(--grad-btn); }
.rank-row .v { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 64px; text-align: end; }

/* ---------- Inner page heads with photo ---------- */
.page-head { position: relative; overflow: hidden; color: #E8F1F6; background: var(--brand-deep); border-bottom: 0; padding-block: 92px 80px; }
.page-head > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-head::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(6,27,46,.90) 0%, rgba(11,42,69,.72) 50%, rgba(11,42,69,.40) 100%); }
.page-head .container { position: relative; z-index: 1; }
.page-head h1 { color: #fff; text-shadow: 0 4px 22px rgba(0,0,0,.35); }
.page-head .lead { color: #E8F1F6; }
.page-head .eyebrow { color: #9FD3EA; display: block; }
.page-head a { color: #fff; }
.page-head .callout { background: var(--glass-dark); border-color: rgba(255,255,255,.22); color: #fff; box-shadow: var(--glass-shadow); }
.page-head .callout h2, .page-head .callout h3 { color: #fff; }
.page-head .callout li { color: #E8F1F6; }
.page-head .badge--source { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.3); }
.page-head .badge--date { background: #fff; color: var(--brand); }
.page-head .crumbs, .page-head .crumbs a { color: #C9D8E2; }
.page-head .crumbs li + li::before { color: rgba(255,255,255,.4); }
.page-head .ph { background: rgba(255,214,102,.22); color: #FFE08A; }
.page-head .path-chip { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .04em; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); margin-bottom: 14px; }
.page-head .path-chip b { color: #9FD3EA; }
.kpi-row { margin-top: 0; background: #fff; display: flow-root; position: relative; z-index: 2; }
.kpi-row > .container { display: flow-root; }
.kpi-row .grid { margin-top: -44px; position: relative; }
.kpi-row .kpi { box-shadow: 0 24px 60px rgba(6,27,46,0.18), inset 0 1px 0 rgba(255,255,255,0.9); }
@media (max-width: 899px) { .page-head { padding-block: 60px 64px; } .page-head::after { background: linear-gradient(180deg, rgba(6,27,46,.86), rgba(11,42,69,.82)); } .kpi-row .grid { margin-top: -28px; } }

/* ---------- Area hero ---------- */
.area-hero { min-height: 380px; }
.area-hero::after { background: linear-gradient(0deg, rgba(6,27,46,.92) 0%, rgba(6,27,46,.5) 60%, rgba(6,27,46,.3) 100%); }

/* ---------- Next-step band on photo ---------- */
.next-band { position: relative; overflow: hidden; background: var(--brand-deep); color: #E8F1F6; padding-block: 92px; }
.next-band::before { content: ""; position: absolute; inset: 0; background: url("/assets/img/night-card-1024.webp") center / cover no-repeat; opacity: .55; }
.next-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(6,27,46,.92) 0%, rgba(11,42,69,.78) 55%, rgba(10,110,150,.55) 100%); }
.next-band .container { position: relative; z-index: 1; padding: 36px 40px; border-radius: var(--r-lg); background: var(--glass-dark); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255,255,255,.22); box-shadow: var(--glass-shadow); width: calc(100% - 48px); }
@media (max-width: 599px) { .next-band .container { padding: 24px 20px; width: calc(100% - 32px); } }

/* ---------- Footer ---------- */
.site-footer { background: #061B2E; }

/* ---------- Charts ---------- */
.chart-card { background: #fff; }
.chart-insight { background: #E6F2F7; border-inline-start: 3px solid var(--teal); }

/* ---------- Tool pages ---------- */
.read-box { background: #E6F2F7; border: 1px solid rgba(11,31,46,.08); box-shadow: 0 12px 32px rgba(6,27,46,.08); }
.results-kpis .kpi { background: #fff; }

/* ---------- Motion ---------- */
.insight.skeleton, .kpi--dark.skeleton { background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.06) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .reveal.is-in { opacity: 1; transform: none; }
  .hero picture img { animation: kenburns 20s ease-in-out infinite alternate; transform-origin: center; }
}
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .kpi, .card, .chart-card, .area-card, .callout, .form-card, .tool-inputs, .table-wrap, .path-step { background: #fff; }
  .glass--dark, .insight, .hero .trust, .next-band .container, .page-head .callout { background: rgba(6,27,46,.82); }
  .site-header { background: #fff; }
}
.area-hero img.generic { opacity: .55; filter: saturate(.8); }

/* Text on dark photo / glass stays light. Offer panel stays dark on its light glass. */
.insights,
.page-head,
.area-hero,
.hero,
.next-band { color: #E8F1F6; }
.insights h1, .insights h2, .insights h3, .insights h4,
.page-head h1, .page-head h2, .page-head h3, .page-head h4,
.area-hero h1, .area-hero h2, .area-hero h3,
.hero h1,
.next-band h1, .next-band h2, .next-band h3, .next-band h4 {
  color: #fff;
  line-height: 1.25;
  overflow: visible;
}
.page-head h1,
.insights h2,
.next-band h2,
.area-hero h1 { padding-top: 0.06em; }
.insights .eyebrow,
.page-head .eyebrow,
.area-hero .eyebrow,
.hero .eyebrow,
.next-band .eyebrow { color: #9FD3EA; }
.insights .lead,
.insights .section-head p,
.page-head .lead,
.area-hero p,
.hero .lead,
.hero .trust { color: #E8F1F6; }
.next-band h2 { color: #fff; }
.next-band p { color: #C9D8E2; }
.insights a:not(.btn),
.page-head a:not(.btn),
.area-hero a:not(.btn),
.next-band a:not(.btn) { color: #9FD3EA; }
.insights .src,
.insights .src a,
.insight .src,
.insight .src a,
.insight .big small,
.page-head .crumbs,
.page-head .crumbs a,
.area-hero .crumbs,
.area-hero .crumbs a { color: #C9D8E2; }
.hero .trust,
.insight,
.page-head .callout,
.page-head .path-chip,
.next-band .container { color: #E8F1F6; }
.page-head .callout h2,
.page-head .callout h3,
.page-head .callout li { color: #E8F1F6; }
.page-head .callout h2,
.page-head .callout h3 { color: #fff; }
.page-head .path-chip b,
.insight .so strong { color: #9FD3EA; }
.hero .trust .ph,
.page-head .ph { color: #FFE08A; }
.offer-panel,
.offer-panel h2,
.offer-panel h3,
.offer-panel label,
.offer-panel .lbl,
.offer-panel p { color: #001B2B; }
.offer-panel .btn--ghost { color: var(--teal); }
.offer-panel .btn--ghost:hover { color: var(--navy); }
.offer-panel .btn--primary,
.offer-panel .btn--primary:hover { color: #fff; }
.kpi--dark .kpi-value { background: none; -webkit-text-fill-color: #fff; color: #fff; }

/* Card text stays inside the padding. Flex children shrink so words wrap;
   source underlines follow each line of text instead of the full row. */
.kpi,
.light,
.insight,
.callout,
.form-card,
.offer-panel,
.chart-card,
.path-step,
.stat-row > * {
  min-width: 0;
}
.kpi > *,
.light > *,
.insight > *,
.callout > *,
.chart-card header > * {
  min-width: 0;
  max-width: 100%;
}
.kpi-value small {
  display: inline-block;
  vertical-align: baseline;
}
.kpi-src,
.insight .src,
.callout .src,
.light .src,
.chart-caption {
  overflow-wrap: break-word;
  text-wrap: pretty;
}
/* Narrow metric cards: slightly smaller type so the department name stays
   on one line. Wider cards balance so "(Ejari)" does not sit on its own line. */
.kpi { container-type: inline-size; }
@container (max-width: 200px) {
  .kpi-src { font-size: 11.5px; text-wrap: pretty; }
}
@container (min-width: 201px) {
  .kpi-src { text-wrap: balance; }
}
.kpi-src a,
.insight .src a,
.callout .src a,
.light .src a,
.chart-caption a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: 1px;
}

/* Each goal is its own button. Selected stays the white pill, with a firmer edge. */
#home-offer .goal-pills button[data-goal] {
  border: 1px solid color-mix(in srgb, var(--ink) 16%, var(--sand));
  border-radius: var(--r-sm);
}
#home-offer .goal-pills button[data-goal][aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--ink) 28%, var(--sand));
}
#home-offer .goal-pills button[data-goal] {
  white-space: normal;
}

/* ---------- Full-screen sections ----------
   The first screen fills the window under the sticky header (and above the
   mobile bar). Further scrolling snaps to the next major section. A section
   taller than the window keeps its size and can be scrolled through.
   The home offer form scrolls inside its panel so the hero stays one screen. */
:root {
  --snap-pad-top: var(--header-h);
  --snap-pad-bottom: 0px;
  --snap-h: calc(100svh - var(--snap-pad-top) - var(--snap-pad-bottom));
}
@supports (height: 100dvh) {
  :root { --snap-h: calc(100dvh - var(--snap-pad-top) - var(--snap-pad-bottom)); }
}
@media (max-width: 899px) {
  :root { --snap-pad-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

html {
  scroll-padding-top: var(--snap-pad-top);
  scroll-padding-bottom: var(--snap-pad-bottom);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-snap-type: y mandatory; }
  /* A focused link or field must stay on screen. Buttons keep mandatory snap. */
  html:has(a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible) {
    scroll-snap-type: y proximity;
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
}
html:has(body.no-scroll) {
  overflow: hidden;
  scroll-snap-type: none;
}

/* scroll-padding already clears the header, so extra scroll-margin would double it. */
[id],
.chart-card,
.service-section,
main > section,
.next-band,
.page-head {
  scroll-margin-top: 0;
  scroll-margin-bottom: 0;
}

/* One screen each. Taller content scrolls inside the section, so mandatory
   snap cannot skip the middle of a long chapter, chart block, or tool. */
main > section:not(:has(.guide-layout)),
.next-band {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  height: var(--snap-h);
  min-height: var(--snap-h);
  max-height: var(--snap-h);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  overflow-x: clip;
  overflow-y: auto;
  scroll-padding-block: 16px;
}
main > section > * {
  min-width: 0;
  max-width: 100%;
  flex: 0 0 auto;
}
main > section[hidden],
[hidden] {
  scroll-snap-align: none;
  scroll-snap-stop: normal;
  height: 0;
  min-height: 0;
  max-height: 0;
  overflow: hidden;
}

/* Buying guide: snap each chapter, not the wrapper and not each FAQ row. */
main > section:has(.guide-layout) {
  scroll-snap-align: none;
  scroll-snap-stop: normal;
  height: auto;
  min-height: 0;
  max-height: none;
  display: block;
  overflow: visible;
}
.guide-layout .toc {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.guide-layout .service-section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  height: var(--snap-h);
  min-height: var(--snap-h);
  max-height: var(--snap-h);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  overflow-x: clip;
  overflow-y: auto;
  scroll-padding-block: 16px;
}

.site-footer { scroll-snap-align: end; }

/* Tool forms stick inside the section scroller, which already sits under the header. */
main > section .tool-inputs { top: 16px; }

/* KPI strips used to hang out of the previous screen. They now sit inside their own. */
#home-kpis,
.kpi-row .grid { margin-top: 0; }

main > section.area-hero {
  flex-direction: column;
  justify-content: safe flex-end;
  align-items: stretch;
}
.next-band { align-items: center; }

/* Home hero is exactly one screen. The offer panel scrolls inside it. */
main > section.hero {
  justify-content: flex-start;
  overflow: hidden;
}
.hero .container {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-width: var(--container);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 20px 24px;
}
.hero-grid {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  align-items: stretch;
}
.hero-grid > :first-child { align-self: center; overflow: auto; }
.hero-grid > * { min-width: 0; min-height: 0; max-height: 100%; }
#home-offer {
  height: 100%;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-padding-block: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(11, 31, 46, 0.4) transparent;
}
@media (max-width: 899px) {
  .hero { justify-content: flex-start; }
  .hero .container { padding-block: 16px 12px; }
  .hero-grid {
    align-items: stretch;
    grid-template-rows: auto minmax(160px, 1fr);
  }
  .hero-grid > :first-child {
    max-height: 42%;
    overflow: auto;
    align-self: start;
  }
  #home-offer { max-height: none; height: 100%; align-self: stretch; }
}
@media (max-height: 820px) and (min-width: 900px) {
  .hero h1 { font-size: clamp(2.15rem, 4.2vw, 3.25rem); }
  .hero .lead { font-size: 1.0625rem; }
}