@font-face {
    font-family: "Fraunces Variable"; font-style: normal; font-weight: 100 900;
    font-display: swap;
    src: url(/buurt/assets/fonts/fraunces-latin-wght-normal.woff2) format("woff2-variations");
  }
  @font-face {
    font-family: "Nunito Variable"; font-style: normal; font-weight: 200 1000;
    font-display: swap;
    src: url(/buurt/assets/fonts/nunito-latin-wght-normal.woff2) format("woff2-variations");
  }

  /* Huiswys tokens — mirrored from web/src/index.css. Light-only by design. */
  :root {
    --sand-50:#fdfaf5; --sand-100:#faf4ea; --sand-200:#f1e7d6;
    --sand-300:#e6d6bd; --sand-400:#d4bd99; --sand-500:#bda074;
    --brick-300:#e09478; --brick-400:#d2724f; --brick-500:#c45b3c;
    --brick-600:#a8482e; --brick-700:#863724;
    --canal-50:#eef5f2; --canal-100:#d6e8e1; --canal-200:#aacec1;
    --canal-300:#74ad99; --canal-400:#4c8d77; --canal-500:#3f7a6d;
    --canal-600:#335f56; --canal-700:#284a43; --canal-800:#1d3630;
    --canal-900:#142723;
    --ochre-300:#f0cb87; --ochre-400:#e6b35c; --ochre-500:#d9993a;
    --ink:#2b2622; --ink-soft:#5b5249; --focus:#4a6d8c;
    --radius-card:1.25rem;
    --sans:"Nunito Variable",ui-rounded,"Segoe UI",system-ui,sans-serif;
    --display:"Fraunces Variable",ui-serif,Georgia,serif;
  }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
  body {
    margin:0; background:var(--sand-50); color:var(--ink);
    font-family:var(--sans); font-size:16.5px; line-height:1.62;
    -webkit-font-smoothing:antialiased;
  }
  /* content links only — scoped to main so the shared chrome's own
   * (layered, Tailwind) colors always win in header and footer; an
   * unscoped rule here outranks every layered rule and was tinting
   * the chrome's links green */
  main a { color:var(--canal-600); text-underline-offset:3px; }
  :focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:4px; }
  /* content frame = the SPA's Container (max-w-6xl, px-4/6/8) —
   * the header/footer carry their own wide (88rem) frame from
   * chrome.css */
  .wrap { max-width:72rem; margin:0 auto; padding:0 1rem; }
  @media (min-width:640px) { .wrap { padding:0 1.5rem; } }
  @media (min-width:1024px) { .wrap { padding:0 2rem; } }
  /* the buurt pages' extra fine-print line inside the shared footer
   * (chrome.mjs footer(extraFine)); aligned to the footer's wide
   * Container frame */
  .chromeFine { max-width:88rem; margin:-1.5rem auto 0;
    padding:0 1rem 2.75rem; font-size:.75rem;
    color:rgb(241 231 214 / .6); }
  @media (min-width:640px) { .chromeFine { padding-inline:1.5rem; } }
  @media (min-width:1024px) { .chromeFine { padding-inline:2rem; } }

  .crumbs { padding:13px 0 4px; font-size:.85rem; color:var(--ink-soft); }
  .crumbs a { color:var(--ink-soft); text-decoration:none; }
  .crumbs a:hover { color:var(--canal-700); text-decoration:underline; }
  .crumbs .sep { margin:0 6px; color:var(--sand-500); }
  .crumbs strong { color:var(--ink); font-weight:800; }

  .concept-tag {
    position:fixed; top:12px; right:12px; z-index:60; background:var(--ink);
    color:var(--sand-100); font-size:.68rem; font-weight:800; letter-spacing:.12em;
    text-transform:uppercase; padding:5px 11px; border-radius:999px; opacity:.85;
  }

  /* ── title ── */
  .titleRow { padding:16px 0 18px; }
  .eyebrow {
    font-size:.72rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
    color:var(--brick-600); margin:0 0 3px;
  }
  h1 {
    font-family:var(--display); font-weight:620; font-size:clamp(2rem,4.4vw,2.9rem);
    line-height:1.05; margin:0 0 8px; text-wrap:balance;
  }
  .verdict { margin:0 0 12px; color:var(--ink-soft); font-size:1.05rem; text-wrap:pretty; }
  .chipRow { display:flex; flex-wrap:wrap; gap:8px; font-size:.8rem; }
  .chip {
    background:var(--sand-100); border:1px solid var(--sand-300); color:var(--ink-soft);
    border-radius:999px; padding:3px 11px; font-weight:700; font-variant-numeric:tabular-nums;
  }
  .chip.live { border-color:var(--canal-200); color:var(--canal-700); background:var(--canal-50); }

  /* ── the map stage ── */
  .mapCard {
    position:relative; border-radius:var(--radius-card); overflow:hidden;
    border:1px solid var(--sand-300); background:#f3ecdc;
    box-shadow:0 26px 64px -34px rgba(43,38,34,.35);
    touch-action:none; cursor:grab;
  }
  .mapCard.dragging { cursor:grabbing; }
  .mapCard svg { display:block; width:100%; height:auto; }
  .pand { vector-effect:non-scaling-stroke; }
  .pand.hit:hover { filter:brightness(1.16) saturate(1.12); stroke:var(--ochre-400); stroke-width:1.8; cursor:pointer; }

  /* find-an-address utility — above the map, deliberately not a CTA */
  .findBar {
    display:flex; gap:8px; align-items:center; justify-content:flex-end;
    margin:0 0 10px; flex-wrap:wrap;
  }
  .findBar .msg {
    font-size:.78rem; font-weight:700; color:var(--brick-600); display:none;
  }
  .findBar input {
    flex:0 1 330px; min-width:0; font:inherit; font-size:.92rem;
    padding:9px 16px; border:1.5px solid var(--sand-300); border-radius:999px;
    background:#fffdf9; color:var(--ink);
  }
  .findBar input:focus { outline:none; border-color:var(--canal-300); }
  .findBar button {
    font:inherit; font-weight:800; font-size:.9rem; padding:9px 17px;
    background:#fffdf9; border:1.5px solid var(--sand-300); color:var(--ink-soft);
    border-radius:999px; cursor:pointer; display:flex; gap:7px; align-items:center;
  }
  .findBar button:hover { border-color:var(--canal-300); color:var(--canal-700); }
  @media (max-width:640px){ .findBar input { flex:1; } }

  .hint {
    position:absolute; bottom:12px; left:14px; z-index:10;
    background:rgba(253,250,245,.85); border:1px solid var(--sand-300);
    color:var(--ink-soft); font-size:.74rem; font-weight:700;
    padding:4px 12px; border-radius:999px; pointer-events:none;
  }
  .zoomCtl {
    position:absolute; right:12px; bottom:12px; display:flex; flex-direction:column;
    gap:6px; z-index:20;
  }
  .zoomCtl button {
    width:36px; height:36px; border-radius:10px; border:1px solid var(--sand-300);
    background:rgba(253,250,245,.95); color:var(--ink); font-size:1.15rem;
    font-weight:800; cursor:pointer; line-height:1;
    display:flex; align-items:center; justify-content:center;
  }
  .zoomCtl button:hover { background:var(--sand-100); }

  /* the in-map address popover — the page's single purchase CTA */
  @keyframes popIn {
    from { opacity:0; transform:translateY(7px) scale(.965); }
    to { opacity:1; transform:none; }
  }
  .pop {
    position:absolute; z-index:30; width:316px;
    background:var(--sand-50); border:1px solid var(--sand-300);
    border-radius:16px; padding:15px 17px 13px;
    box-shadow:0 24px 54px -18px rgba(43,38,34,.4),
               0 4px 14px -6px rgba(43,38,34,.18);
    display:none; animation:popIn .16s ease-out;
  }
  @media (prefers-reduced-motion: reduce){ .pop { animation:none; } }
  .pop .caret {
    position:absolute; bottom:-7.5px; width:13px; height:13px;
    background:var(--sand-50); border:1px solid var(--sand-300);
    border-top:none; border-left:none; transform:rotate(45deg);
  }
  .pop.below .caret {
    bottom:auto; top:-7.5px; border:1px solid var(--sand-300);
    border-bottom:none; border-right:none;
  }
  .pop .close {
    position:absolute; top:6px; right:9px; border:none; background:none;
    font-size:1.05rem; color:var(--ink-soft); cursor:pointer; padding:2px 5px;
  }
  .pop .head { display:flex; gap:12px; align-items:center; padding-right:14px; }
  .pop .icon {
    flex:none; width:48px; height:48px; border-radius:13px;
    background:var(--sand-100); border:1px solid var(--sand-200);
    display:flex; align-items:center; justify-content:center;
  }
  .pop .addr { font-family:var(--display); font-weight:620; font-size:1.13rem; line-height:1.15; }
  .pop .meta { font-size:.78rem; color:var(--ink-soft); margin-top:2px; }
  .pop .pl-t {
    font-size:.64rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
    color:var(--ink-soft); margin:12px 0 7px;
  }
  .pop ul {
    list-style:none; margin:0 0 11px; padding:0;
    display:grid; grid-template-columns:1fr 1fr; gap:6px 12px;
  }
  .pop li {
    position:relative; padding-left:20px; font-size:.79rem; color:var(--ink);
    font-weight:700; white-space:nowrap; line-height:1.25;
  }
  .pop li::before {
    content:"✓"; position:absolute; left:0; top:.1em; width:14px; height:14px;
    border-radius:50%; background:var(--canal-100); color:var(--canal-700);
    font-size:.58rem; font-weight:900; display:flex;
    align-items:center; justify-content:center;
  }
  .pop li.off { color:var(--ink-soft); font-weight:600; }
  .pop li.off::before { content:"—"; background:var(--sand-200); color:var(--ink-soft); }
  .pop .rule {
    height:3px; border-radius:2px; margin:0 0 11px; opacity:.65;
    background:linear-gradient(90deg,var(--ochre-300),var(--brick-300) 55%,var(--canal-300));
  }
  .pop .buy {
    display:block; text-align:center; background:var(--canal-500); color:#fff;
    text-decoration:none; font-weight:800; font-size:.97rem; padding:11px 12px;
    border-radius:11px; box-shadow:0 2px 0 var(--canal-700);
    transition:transform .1s ease, box-shadow .1s ease, background .1s ease;
  }
  .pop .buy:hover { background:var(--canal-600); transform:translateY(-1px);
    box-shadow:0 3px 0 var(--canal-700); }
  .pop .buy:active { transform:translateY(0); box-shadow:0 1px 0 var(--canal-700); }
  @media (prefers-reduced-motion: reduce){ .pop .buy { transition:none; } }
  .pop .links { font-size:.74rem; color:var(--ink-soft); text-align:center; margin-top:8px; white-space:nowrap; }

  .legend {
    display:flex; flex-wrap:wrap; gap:6px 14px; padding:10px 4px 0; font-size:.75rem;
    color:var(--ink-soft); align-items:center;
  }
  .legend strong { color:var(--ink); font-weight:800; margin-right:2px; }
  .legend .note { margin-left:auto; color:var(--sand-500); }
  .lg { display:inline-flex; align-items:center; gap:5px; }
  .lg i { width:11px; height:11px; border-radius:3px; display:inline-block; }

  /* ── stat strip: type, not boxes ── */
  .strip {
    display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:26px 0 4px;
  }
  @media (max-width:760px){ .strip { grid-template-columns:1fr 1fr; row-gap:20px; } }
  .stat { padding:2px 22px; border-left:1px solid var(--sand-300); }
  .stat:first-child { border-left:none; padding-left:2px; }
  @media (max-width:760px){ .stat:nth-child(3){ border-left:none; padding-left:2px; } }
  .stat .sl { font-size:.7rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); }
  .stat .sv {
    font-family:var(--display); font-weight:580; font-size:1.65rem; line-height:1.2;
    color:var(--canal-700); font-variant-numeric:tabular-nums;
  }
  .stat .sv small { font-size:.85rem; color:var(--ink-soft); font-family:var(--sans); font-weight:700; }
  .stat .sc { font-size:.78rem; color:var(--ink-soft); }

  /* ── portrait ── */
  section { padding:36px 0 6px; }
  .center { max-width:720px; margin:0 auto; }
  h2.sec { font-family:var(--display); font-weight:600; font-size:1.5rem; margin:0 0 10px; text-wrap:balance; }
  .prose p { margin:0 0 14px; }
  .portGrid { display:grid; grid-template-columns:1.5fr 1fr; gap:8px 68px; align-items:start; }
  @media (max-width:860px){ .portGrid { grid-template-columns:1fr; } }
  .portGrid .prose { max-width:62ch; }
  .kort { border-left:1px solid var(--sand-300); padding-left:30px; }
  @media (max-width:860px){ .kort { border-left:none; padding-left:0; border-top:1px solid var(--sand-300); padding-top:18px; } }
  .kort .kt {
    font-size:.7rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
    color:var(--ink-soft); margin:4px 0 14px;
  }
  .kort .ki { margin-bottom:14px; }
  .kort .kv { font-weight:800; color:var(--ink); font-size:.96rem; line-height:1.35; }
  .kort .kd { font-size:.8rem; color:var(--ink-soft); }
  .kort .erow { display:flex; height:13px; border-radius:5px; overflow:hidden; margin:7px 0 5px; }
  .kort .erow span {
    border-right:1.5px solid var(--sand-50); display:flex; align-items:center;
    justify-content:center; font-size:.54rem; font-weight:800;
  }
  .kort .erow span:last-child { border-right:none; }
  .doorCard {
    margin:34px 0 0; background:var(--sand-100); border:1px solid var(--sand-200);
    border-radius:var(--radius-card); padding:30px clamp(22px,4vw,44px) 24px;
    text-align:center;
  }
  .doorCard p {
    margin:0 auto 18px; font-size:1.04rem; font-weight:700; color:var(--ink);
    max-width:88ch; text-wrap:balance;
  }
  .doorPill {
    display:flex; align-items:center; gap:6px; max-width:640px; margin:0 auto;
    background:#fff; border:1.5px solid var(--sand-300); border-radius:999px;
    padding:6px 6px 6px 18px; box-shadow:0 10px 28px -18px rgba(43,38,34,.35);
  }
  .doorPill:focus-within { border-color:var(--canal-300); }
  .doorPill svg { flex:none; color:var(--sand-500); }
  .doorPill input {
    flex:1; min-width:0; font:inherit; font-size:1rem; padding:9px 8px;
    border:none; background:transparent; color:var(--ink);
  }
  .doorPill input:focus { outline:none; }
  .doorPill button {
    font:inherit; font-weight:800; font-size:.95rem; padding:10px 22px;
    background:var(--canal-500); border:none; color:#fff; border-radius:999px;
    cursor:pointer; white-space:nowrap;
  }
  .doorPill button:hover { background:var(--canal-600); }
  @media (max-width:520px){
    .doorPill { flex-wrap:wrap; border-radius:22px; padding:8px; }
    .doorPill button { flex:1 1 100%; }
  }
  .doorSub { font-size:.8rem; color:var(--ink-soft); margin-top:10px; }
  .doorSub .msg { color:var(--brick-600); font-weight:700; display:none; }

  /* ── sales band ── */
  .band {
    background:var(--sand-100); border:1px solid var(--sand-200);
    border-radius:var(--radius-card); padding:32px clamp(22px,4vw,44px) 30px;
    margin:10px 0 0; display:grid; grid-template-columns:1.15fr 1fr;
    gap:20px 52px; align-items:center;
  }
  @media (max-width:860px){ .band { grid-template-columns:1fr; } }
  .band h2 { font-family:var(--display); font-weight:610; font-size:1.4rem; margin:0 0 6px; }
  .band .intro { margin:0 0 16px; color:var(--ink-soft); font-size:.95rem; }
  .efig { background:#fffdf9; border:1px solid var(--sand-200); border-radius:12px; padding:14px 16px 12px; margin-bottom:16px; }
  .efig .tl { font-size:.7rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:7px; }
  .erow { display:flex; height:18px; border-radius:6px; overflow:hidden; }
  .erow span { border-right:1.5px solid #fffdf9; display:flex; align-items:center; justify-content:center; font-size:.64rem; font-weight:800; }
  .erow span:last-child { border-right:none; }
  .efig .tc { font-size:.78rem; color:var(--ink-soft); margin-top:6px; }
  .checks {
    list-style:none; margin:16px 0 0; padding:0;
    display:grid; grid-template-columns:1fr 1fr; gap:9px 18px;
  }
  @media (max-width:560px){ .checks { grid-template-columns:1fr; } }
  .checks li {
    position:relative; padding-left:22px; font-size:.9rem; color:var(--ink);
    font-weight:700; line-height:1.3;
  }
  .checks li::before {
    content:"✓"; position:absolute; left:0; top:.12em; width:15px; height:15px;
    border-radius:50%; background:var(--canal-100); color:var(--canal-700);
    font-size:.6rem; font-weight:900; display:flex;
    align-items:center; justify-content:center;
  }
  .anchorNote {
    font-size:.79rem; color:var(--ink-soft); margin-top:12px;
    font-style:italic; text-wrap:pretty;
  }
  .bandCta { text-align:center; }
  .bandCta a.btn {
    display:inline-block; background:var(--canal-500); color:#fff; text-decoration:none;
    font-weight:800; font-size:1.02rem; padding:13px 28px; border-radius:11px;
  }
  .bandCta a.btn:hover { background:var(--canal-600); }
  .bandCta .sub { font-size:.8rem; color:var(--ink-soft); margin-top:9px; }

  /* next portraits */
  .nextGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  @media (max-width:820px){ .nextGrid { grid-template-columns:1fr; } }
  .next {
    display:block; background:var(--sand-100); border:1px solid var(--sand-200);
    border-radius:var(--radius-card); padding:20px 22px 18px;
    text-decoration:none; color:var(--ink);
    transition:transform .12s ease, border-color .12s ease;
  }
  .next:hover { border-color:var(--canal-200); transform:translateY(-2px); }
  @media (prefers-reduced-motion: reduce){ .next { transition:none; }
    .next:hover { transform:none; } }
  .next .sil { display:block; margin-bottom:10px; }
  .next .sil path {
    fill:var(--sand-200); stroke:var(--ochre-500); stroke-width:1.4;
    stroke-dasharray:3 2; stroke-linejoin:round;
  }
  .next .nn { font-family:var(--display); font-weight:620; font-size:1.12rem; }
  .next .ng { font-size:.76rem; color:var(--ink-soft); margin:1px 0 8px; }
  .next p { font-size:.86rem; color:var(--ink-soft); margin:0 0 12px; text-wrap:pretty; }
  .next .arrow { font-size:.82rem; font-weight:800; color:var(--canal-700); }
  .alsoLine { font-size:.85rem; color:var(--ink-soft); margin:16px 2px 0; }
  .alsoLine a { color:var(--canal-600); font-weight:700; }