/* KATSURA MAP — scoped component styles. No changes to the site's global CSS.
   The botanical pattern and K are the client's supplied artwork. */
.km-section { padding-block: clamp(56px, 7vw, 110px); }
.km-section .km-section-inner { width: min(1320px, calc(100% - var(--gutter, 32px) * 2)); margin-inline: auto; }
.km-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 34px; }
.km-section-heading h2 { font-family: var(--serif, Georgia, serif); font-size: clamp(38px, 4.5vw, 65px); line-height: 1.02; font-weight: 400; letter-spacing: -.035em; margin: 12px 0 0; }
.km-section-heading .km-intro { max-width: 340px; font: 400 14px/1.8 var(--sans, Arial, sans-serif); color: #5d665c; }
.km-section-heading .km-intro p { margin: 0 0 12px; }
.km-section-heading address { font-style: normal; font-size: 12px; color: #26392d; }
.km-root {
  --km-paper: #fbfaf7; --km-white: #fff; --km-ink: #242b24; --km-muted: #5d665c;
  --km-forest: #26392d; --km-line: #d8ddd4; --km-sage: #edf0e8;
  --km-sans: var(--sans, "Helvetica Neue", Arial, sans-serif);
  --km-serif: var(--serif, Baskerville, Georgia, serif);
  font: 400 13px/1.6 var(--km-sans); color: var(--km-ink); position: relative;
  isolation: isolate; text-align: left; overflow-wrap: anywhere;
}
.km-root *, .km-root *::before, .km-root *::after { box-sizing: border-box; }
.km-root button, .km-root input { font: inherit; }
.km-root button { -webkit-appearance: none; appearance: none; cursor: pointer; color: inherit; }
.km-root [hidden] { display: none !important; }
.km-root p { margin: 0; }
.km-root .km-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.km-root :where(button, input, a, [tabindex]):focus-visible { outline: 2px solid #426449; outline-offset: 3px; }
.km-shell { display: grid; grid-template-columns: 332px minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); grid-template-areas: "controls map" "results map"; height: 680px; border: 1px solid var(--km-line); background: var(--km-white); box-shadow: 0 16px 46px rgb(27 43 33 / 6%); }
.km-controls { grid-area: controls; padding: 27px 26px 22px; min-width: 0; border-right: 1px solid var(--km-line); }
.km-kicker { font-size: 9px; font-weight: 700; line-height: 1.5; letter-spacing: .2em; text-transform: uppercase; color: var(--km-muted); }
.km-root .km-title { font: 400 31px/1.15 var(--km-serif); letter-spacing: -.035em; margin: 8px 0 17px; }
.km-search-wrap { display: flex; align-items: center; border: 1px solid var(--km-line); background: #fff; padding: 0 12px; min-height: 45px; gap: 9px; }
.km-search-wrap:focus-within { outline: 2px solid #426449; outline-offset: 2px; }
.km-search-wrap input { border: 0; border-radius: 0; background: transparent; outline: none !important; min-width: 0; width: 100%; padding: 11px 0; color: var(--km-ink); font-size: 12px; }
.km-search-wrap input::placeholder { color: #626b62; opacity: 1; }
.km-icon { width: 19px; height: 19px; display: block; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.km-filter-label { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .13em; font-weight: 700; margin: 21px 0 10px; }
.km-filters { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.km-filter { display: flex; align-items: center; gap: 7px; min-height: 44px; border: 1px solid var(--km-line); border-radius: 0; background: #fff; padding: 9px 10px; text-align: left; font-size: 11px !important; line-height: 1.3 !important; transition: background .15s, border-color .15s; }
.km-filter:first-child { grid-column: 1 / -1; }
.km-filter:hover { background: var(--km-sage); border-color: #b6c0b2; }
.km-filter[aria-pressed="true"] { background: var(--km-forest); color: #fff; border-color: var(--km-forest); }
.km-filter .km-icon { width: 16px; height: 16px; color: var(--km-category, #26392d); }
.km-filter[aria-pressed="true"] .km-icon { color: inherit; }
.km-count { margin-left: auto; font-size: 10px; font-variant-numeric: tabular-nums; opacity: .8; }
.km-results { grid-area: results; min-width: 0; min-height: 0; border-top: 1px solid var(--km-line); border-right: 1px solid var(--km-line); display: flex; flex-direction: column; background: #fff; }
.km-results-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 26px 11px; gap: 10px; font-size: 10px; color: var(--km-muted); }
.km-results-toggle { display: none; background: transparent; border: 0; padding: 7px; min-height: 40px; font-size: 11px !important; text-decoration: underline; text-underline-offset: 3px; }
.km-results-scroll { overflow: auto; flex: 1; min-height: 0; scrollbar-width: thin; scrollbar-color: #b7c0b2 #f6f7f4; overscroll-behavior: contain; }
.km-list { margin: 0; padding: 0; list-style: none; }
.km-list li { margin: 0; border-top: 1px solid #ecede9; }
.km-list li:first-child { border-top: 0; }
.km-place { display: grid; width: 100%; grid-template-columns: 28px minmax(0,1fr) 16px; align-items: start; gap: 11px; padding: 18px 24px; text-align: left; border: 0; border-left: 3px solid transparent; border-radius: 0; background: #fff; }
.km-place:hover { background: #f4f6f0; }
.km-place[aria-pressed="true"] { border-left-color: var(--km-forest); background: var(--km-sage); }
.km-place-number { border: 1px solid var(--km-category, #26392d); color: var(--km-category, #26392d); border-radius: 50%; display: grid; place-items: center; width: 26px; height: 26px; font-size: 10px; font-weight: 600; }
.km-place-name { display: block; color: var(--km-ink); font-size: 12px; font-weight: 600; line-height: 1.5; }
.km-place-address { display: block; margin-top: 4px; color: var(--km-muted); font-size: 11px; line-height: 1.55; }
.km-place-kind { display: block; margin-top: 7px; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--km-category, #26392d); }
.km-place > .km-icon { width: 15px; height: 15px; margin-top: 6px; }
.km-empty { padding: 20px 26px 28px; color: var(--km-muted); font-size: 12px; line-height: 1.75; }
.km-empty strong { display: block; color: var(--km-ink); font-weight: 600; margin-bottom: 5px; }
.km-inline-detail { padding: 0 25px 21px 66px; font-size: 12px; line-height: 1.7; }
.km-inline-detail .km-links { gap: 16px; margin-top: 9px; }
.km-viewport { grid-area: map; position: relative; overflow: hidden; min-width: 0; min-height: 0; background: #eef1e9 url("../images/bg.jpg") center/620px; }
.km-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.km-map-tools { display: flex; align-items: center; flex-wrap: wrap; position: absolute; z-index: 3; top: 18px; left: 18px; right: 60px; gap: 7px; pointer-events: none; }
.km-tool { pointer-events: auto; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #d0d7cb; padding: 9px 13px; border-radius: 0; background: #fff; box-shadow: 0 3px 14px rgb(28 41 27 / 7%); min-height: 44px; font-size: 11px !important; }
.km-tool:hover { background: #f1f4ec; }
.km-tool img { width: 17px; height: 20px; object-fit: contain; }
.km-tool .km-icon { width: 15px; height: 15px; }
.km-tool:disabled { opacity: .55; cursor: not-allowed; }
.km-gate { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 35px; background: linear-gradient(125deg, rgb(245 247 242 / 70%), rgb(255 255 255 / 90%)); text-align: center; }
.km-gate-inner { max-width: 360px; display: flex; align-items: center; flex-direction: column; }
.km-badge { position: relative; width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; background: var(--km-forest); box-shadow: 0 0 0 9px rgb(38 57 45 / 5%); margin-bottom: 28px; }
.km-badge::after { position: absolute; content: ""; inset: 6px; border: 1px solid rgb(255 255 255 / 30%); border-radius: inherit; }
.km-badge img { width: 37px; height: 42px; object-fit: contain; filter: brightness(0) invert(1); }
.km-root .km-gate-title { font: 400 36px/1.15 var(--km-serif); letter-spacing: -.035em; margin: 0 0 13px; color: var(--km-ink); }
.km-gate-copy { font-size: 12px; line-height: 1.8; color: var(--km-muted); }
.km-primary { margin-top: 20px; padding: 13px 23px; min-height: 46px; border: 1px solid var(--km-forest); border-radius: 0; color: #fff !important; background: var(--km-forest); font-size: 10px !important; text-transform: uppercase; letter-spacing: .13em; }
.km-primary:hover { background: #1b2b21; }
.km-gate .km-external { font-size: 11px; margin-top: 16px; color: #26392d; text-underline-offset: 4px; }
.km-loading .km-badge::after { animation: km-breathe 1.5s ease-in-out infinite; }
.km-map-notice { position: absolute; z-index: 3; left: 15px; right: 15px; bottom: 45px; background: rgb(255 255 255 / 97%); border: 1px solid var(--km-line); padding: 10px 13px; font-size: 11px; line-height: 1.55; box-shadow: 0 2px 12px #26392d0a; }
/* Marker positioning transforms belong to Mapbox. Animate inner elements only. */
.km-root .km-marker { background: none; border: 0; margin: 0; padding: 4px; width: 44px; height: 44px; display: grid; place-items: center; overflow: visible; }
.km-marker-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--km-category, #26392d); color: #fff; border: 2px solid #fff; box-shadow: 0 2px 8px rgb(24 38 26 / 25%); font: 600 11px/1 var(--km-sans); transition: transform .15s, box-shadow .15s; }
.km-marker:hover .km-marker-dot, .km-marker[aria-pressed="true"] .km-marker-dot { transform: scale(1.15); box-shadow: 0 0 0 4px #ffffffb3, 0 3px 10px #26392d38; }
.km-marker[aria-pressed="true"] { z-index: 6 !important; }
.km-root .km-property-marker { display: block; width: 72px; height: 86px; border: 0; padding: 0; margin: 0; background: transparent; overflow: visible; z-index: 5; }
.km-property-disc { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 72px; height: 72px; background: var(--km-forest); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 3px 14px #26392d3b; }
.km-property-disc::after { content: ""; position: absolute; inset: 5px; border: 1px solid #c3cbb78c; border-radius: 50%; }
.km-property-disc img { width: 33px; height: 38px; object-fit: contain; filter: brightness(0) invert(1); }
.km-property-marker::before { content: ""; position: absolute; bottom: 0; left: 28px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 20px solid var(--km-forest); }
.km-property-label { position: absolute; top: 93px; left: 50%; transform: translateX(-50%); padding: 5px 9px; background: rgb(255 255 255 / 96%); color: #26392d; font: 700 9px/1.2 var(--km-sans); letter-spacing: .17em; white-space: nowrap; box-shadow: 0 2px 7px #26392d17; border: 1px solid #d5ddd0; }
.km-root .mapboxgl-popup { z-index: 10; max-width: min(285px, calc(100vw - 55px)) !important; font: 400 12px/1.6 var(--km-sans); }
.km-root .mapboxgl-popup-content { border-radius: 0; padding: 24px; box-shadow: 0 8px 32px #26392d2e; color: var(--km-ink); }
.km-root .mapboxgl-popup-close-button { padding: 0; border: 0; border-radius: 0; top: 2px; right: 2px; width: 36px; height: 36px; font-size: 24px; line-height: 1; color: var(--km-muted); }
.km-popup-kind { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; color: var(--km-category, #627455); padding-right: 15px; margin-bottom: 8px !important; }
.km-root .km-popup-title { font: 400 28px/1.12 var(--km-serif); letter-spacing: -.02em; margin: 0 0 10px; }
.km-popup-address, .km-popup-description { font-size: 11px; line-height: 1.7; color: var(--km-muted); margin-top: 7px !important; }
.km-links { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 16px; }
.km-links a { color: #26392d; font-size: 10px; font-weight: 600; text-underline-offset: 4px; padding-block: 7px; min-height: 32px; }
.km-root .mapboxgl-ctrl-top-right { top: 8px; right: 8px; }
.km-root .mapboxgl-ctrl-group { border-radius: 0; border: 1px solid #d0d7cb; box-shadow: 0 3px 14px #26392d12; }
.km-root .mapboxgl-ctrl-group button { width: 40px; height: 44px; }
/* Attribution and the Mapbox logo stay visible and unmodified. */
.km-root .mapboxgl-ctrl-logo { max-width: none; }
.km-footnote { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-top: 16px; color: var(--km-muted); font-size: 10px; line-height: 1.7; }
.km-footnote p { max-width: 650px; }
.km-footnote a { color: #26392d; white-space: nowrap; text-underline-offset: 4px; }
@keyframes km-breathe { 50% { opacity: .25; } }
@media (max-width: 1050px) {
  .km-shell { grid-template-columns: 296px minmax(0,1fr); }
  .km-controls { padding: 23px 20px 20px; }
  .km-filter { padding-inline: 8px; gap: 5px; }
  .km-place { padding-inline: 18px; }
  .km-results-head { padding-inline: 20px; }
}
@media (max-width: 760px) {
  .km-section .km-section-inner { width: calc(100% - 36px); }
  .km-section-heading { display: block; margin-bottom: 25px; }
  .km-section-heading .km-intro { max-width: none; margin-top: 22px; }
  .km-shell { height: auto; grid-template-columns: minmax(0,1fr); grid-template-rows: auto 430px auto; grid-template-areas: "controls" "map" "results"; }
  .km-controls { border-right: 0; border-bottom: 1px solid var(--km-line); padding: 21px 20px; }
  .km-root .km-title { font-size: 29px; margin-bottom: 14px; }
  .km-filters { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  .km-filter:first-child { grid-column: 1 / -1; }
  .km-filter { font-size: 11px !important; }
  .km-filter-label { margin-top: 16px; }
  .km-results { border-right: 0; }
  .km-results-head { padding-block: 8px; min-height: 53px; }
  .km-results-toggle { display: inline-flex; align-items: center; gap: 8px; }
  .km-results-toggle .km-icon { width: 15px; height: 15px; transition: transform .15s; }
  .km-results-toggle[aria-expanded="false"] .km-icon { transform: rotate(-90deg); }
  .km-results-scroll { max-height: 280px; }
  .km-root[data-list-collapsed="true"] .km-results-scroll { display: none; }
  .km-footnote { display: block; }
  .km-footnote a { display: inline-block; margin-top: 9px; }
  .km-map-tools { left: 12px; top: 12px; gap: 5px; right: 53px; }
  .km-tool { font-size: 10px !important; padding-inline: 9px; }
  .km-root .mapboxgl-ctrl-top-right { top: 2px; right: 2px; }
  .km-gate { padding: 25px; }
  .km-root .km-gate-title { font-size: 32px; }
}
@media (max-width: 380px) {
  .km-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .km-filter:first-child { grid-column: 1 / -1; }
  .km-shell { grid-template-rows: auto 390px auto; }
  .km-controls { padding-inline: 16px; }
  .km-tool { gap: 5px; padding-inline: 7px; }
  .km-property-disc { width: 64px; height: 64px; left: 4px; top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .km-root *, .km-root *::before, .km-root *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .km-shell { display: block; height: auto; }
  .km-viewport { height: 350px; }
  .km-controls { display: none; }
  .km-results-scroll { max-height: none; overflow: visible; }
}