/* new.kalwanis.com — the estate map.
   Layout: a full-bleed map that owns the first screen, with the reading panel
   docked right on a desktop and rising as a sheet from the bottom on a phone.
   Everything below the map is ordinary page content. */

/* ONE THEME, DELIBERATELY DARK. The ground is black-and-white satellite, so the
   chrome is dark too: light panels over grey imagery glare, and every scrap of
   colour on screen is reserved for the group's own plots and logos. There is no
   light variant to drift out of step. */
:root {
  --bg:      #0E0F11;
  --surface: #17191C;   /* panel ground, used at ~92% over the map */
  --raised:  #1F2226;
  --fg:      #EDEFF2;
  --muted:   #9AA0A8;
  --accent:  #4DD6C4;
  --line:    #2A2E34;
  --sold:    #6B7076;
  --shadow:  0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.45);

  --ff-display: "Familjen Grotesk", "Trebuchet MS", system-ui, sans-serif;
  --ff-body: Archivo, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --bar-h: 56px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--fg);
  font-family: var(--ff-body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3 { font-family: var(--ff-display); margin: 0; font-weight: 600; text-wrap: balance; }
h2 { font-size: clamp(1.4rem, 3.4vw, 2rem); letter-spacing: -.015em; }
h3 { font-size: 1.02rem; }
p { margin: 0; }
a { color: inherit; }
.eyebrow {
  font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.num { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; }

/* ---------- top bar ---------- */
.bar {
  position: sticky; top: 0; z-index: 30; height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brandmark { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.mark { width: 20px; height: 20px; border-radius: 3px; background: var(--accent); flex: none; }
.names { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.names b { font-family: var(--ff-display); font-size: .95rem; font-weight: 600;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.names i { font-style: normal; font-family: var(--ff-mono); font-size: .64rem;
           letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.barnav { display: flex; gap: 18px; }
.barnav a { font-size: .88rem; color: var(--muted); text-decoration: none; white-space: nowrap; }
.barnav a:hover { color: var(--fg); }
@media (max-width: 720px) { .barnav { display: none; } }

/* ---------- map ---------- */
/* overflow:hidden contains the closed panel, which is parked off to the right
   with a transform and otherwise stretches the document so the whole page
   scrolls sideways. */
.mapwrap { position: relative; height: calc(100svh - var(--bar-h)); min-height: 440px; overflow: hidden; }
#map { position: absolute; inset: 0; }
.maplibregl-ctrl-attrib { font-size: 10px; }

/* The overlay strips must not eat the map. Without pointer-events:none the
   empty space beside the buttons swallows drags across the whole top of the
   map, and the filter row sits on top of the zoom control so neither + nor -
   can be pressed at all. */
.overlay { position: absolute; z-index: 10; display: flex; gap: 6px; flex-wrap: wrap;
           pointer-events: none; }
.overlay > * { pointer-events: auto; }
.overlay.top {
  top: 12px;
  left: max(12px, env(safe-area-inset-left, 0px));
  right: max(58px, env(safe-area-inset-right, 0px));   /* clear of the zoom control */
}
.overlay.places {
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  left: max(12px, env(safe-area-inset-left, 0px));
}
.brands { display: flex; gap: 6px; flex-wrap: wrap; pointer-events: none; }
.brands > * { pointer-events: auto; }

/* On a phone the filters wrapped onto seven rows and covered a third of the
   map. One scrolling row instead: the map keeps the screen, the filters stay
   reachable with a thumb. */
@media (max-width: 760px) {
  .brands, .overlay.places {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px;
  }
  .brands::-webkit-scrollbar, .overlay.places::-webkit-scrollbar { display: none; }
  .overlay.top { right: max(12px, env(safe-area-inset-right, 0px)); top: 56px; }
  .overlay.places {
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .maplibregl-ctrl-top-right { top: 4px; }
}

.chip, .brandbtn {
  font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .02em;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid var(--line); color: var(--fg);
  padding: 6px 10px; border-radius: 3px; cursor: pointer;
  backdrop-filter: blur(8px); box-shadow: var(--shadow);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.chip:hover, .brandbtn:hover { border-color: var(--accent); }
.brandbtn[aria-pressed="true"] { border-color: var(--accent); background: var(--raised); }
.brandbtn .sw { width: 9px; height: 9px; border-radius: 1px; flex: none; }
.brandbtn .n { color: var(--muted); }

/* The legend used to sit bottom-right, where it covered the ground switcher and
   MapLibre's own scale bar. The right-hand corner belongs to the map's controls;
   the legend stacks above the place chips on the left instead. */
.legend {
  position: absolute; z-index: 10;
  bottom: 58px;
  left: max(12px, env(safe-area-inset-left, 0px));
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid var(--line); border-radius: 3px; padding: 8px 10px;
  font-family: var(--ff-mono); font-size: .66rem; color: var(--muted);
  backdrop-filter: blur(8px); box-shadow: var(--shadow); display: grid; gap: 4px;
}
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; border-radius: 1px; display: inline-block; }
.maphint {
  position: absolute; z-index: 9; left: 50%; transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  font-family: var(--ff-mono); font-size: .66rem; color: var(--muted);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--line); border-radius: 3px; padding: 5px 10px;
  backdrop-filter: blur(6px); pointer-events: none; transition: opacity .4s;
}
@media (max-width: 760px) { .legend, .maphint { display: none; } }

/* ---------- the reading panel ---------- */
.sheet {
  position: absolute; z-index: 20;
  top: 64px; right: max(12px, env(safe-area-inset-right, 0px));
  width: min(330px, calc(100vw - 24px));
  max-height: calc(100% - 140px); overflow-y: auto;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: 1px solid var(--line); border-radius: 4px;
  box-shadow: var(--shadow); backdrop-filter: blur(10px);
  padding: 16px; transform: translateX(calc(100% + 24px));
  transition: transform .26s cubic-bezier(.2,.7,.3,1); opacity: 0;
}
.sheet.open { transform: none; opacity: 1; }
.sheetclose {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px;
  border: 1px solid var(--line); background: var(--raised); color: var(--muted);
  border-radius: 3px; cursor: pointer; font-size: 17px; line-height: 1;
}
@media (max-width: 760px) {
  .sheet {
    top: auto; left: 0; right: 0; bottom: 0; width: auto;
    max-height: 62%; border-radius: 12px 12px 0 0; border-bottom: none;
    transform: translateY(calc(100% + 24px));
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .sheet.open { transform: none; }
}

.sheet .ttl { font-family: var(--ff-display); font-size: 1.2rem; font-weight: 600; padding-right: 30px; }
.sheet .sub { font-family: var(--ff-mono); font-size: .7rem; color: var(--muted); margin-top: 2px; }
.tag { display: inline-block; font-family: var(--ff-mono); font-size: .62rem;
       letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px;
       border-radius: 2px; margin-top: 10px; }
.tag.held { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.tag.sold { background: color-mix(in srgb, var(--sold) 30%, transparent); color: var(--muted); }
.sheet dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 12px 0 0; }
.sheet dt { font-family: var(--ff-mono); font-size: .68rem; color: var(--muted); }
.sheet dd { margin: 0; font-size: .88rem; font-family: var(--ff-mono); font-variant-numeric: tabular-nums; }
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 12px; }
.shots img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 2px; display: block; background: var(--raised); }
.sheet .note { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
               font-size: .78rem; color: var(--muted); }

/* ---------- page bands ---------- */
.band { padding-block: 56px; }
.band.alt { background: var(--raised); }
.band .inner {
  max-width: 1120px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.band.stats { padding-block: 0; background: var(--surface); border-bottom: 1px solid var(--line); }
.band.stats dl {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  margin: 0; gap: 1px; background: var(--line);
}
.band.stats .st { background: var(--surface); padding: 16px 18px; min-width: 0; }
.band.stats dt { font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .12em;
                 text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.band.stats dd { margin: 0; font-family: var(--ff-mono); font-size: 1.3rem; font-variant-numeric: tabular-nums; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 20px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 18px; min-width: 0; }
.card h3 { margin-bottom: 7px; }
.card p { font-size: .9rem; color: var(--muted); }
.grid.logos .card { display: flex; flex-direction: column; gap: 10px; }
.grid.logos img { max-height: 44px; width: auto; max-width: 160px; object-fit: contain; align-self: flex-start; }

.logowall {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px; margin-top: 20px; align-items: center;
}
.logowall img {
  width: 100%; height: 56px; object-fit: contain; background: var(--surface);
  border: 1px solid var(--line); border-radius: 3px; padding: 8px;
}

.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 20px; }
.contact .row { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 16px; }
.contact dt { font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .12em;
              text-transform: uppercase; color: var(--muted); }
.contact dd { margin: 4px 0 0; font-size: .95rem; word-break: break-word; }

.foot { border-top: 1px solid var(--line); padding-block: 24px 40px; }
.foot .inner { max-width: 1120px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.foot p { font-size: .8rem; color: var(--muted); }
.attrib { margin-top: 6px; font-size: .7rem; }

.banner {
  background: #8a5a12; color: #fff; font-family: var(--ff-mono); font-size: .7rem;
  text-align: center; padding: 5px 12px; letter-spacing: .04em;
}
@media (prefers-reduced-motion: reduce) { .sheet { transition: none; } }

/* the ground switcher sits opposite the place chips, bottom-right of the map */
.overlay.grounds {
  bottom: 42px;                                       /* clear of MapLibre's scale bar */
  right: max(12px, env(safe-area-inset-right, 0px));
}
@media (max-width: 760px) {
  .overlay.grounds { bottom: 58px; }
}

/* facilities management: its own state, its own colour */
.tag.managed { background: rgba(242,194,48,.20); color: #F2C230; }

/* the plot's own latest drone capture, ahead of the marketing photographs */
.sheet .hero { margin: 12px 0 0; }
.sheet .hero img { width: 100%; aspect-ratio: 16/10; object-fit: cover;
                   border-radius: 3px; display: block; background: var(--raised); }
.sheet .hero figcaption { font-family: var(--ff-mono); font-size: .64rem;
                          color: var(--muted); margin-top: 5px; letter-spacing: .04em; }

/* two selectors, one row each: companies, then activities */
.selectors { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; pointer-events: none; }
.selectors > * { pointer-events: auto; }
.selgroup { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.sellabel { font-family: var(--ff-mono); font-size: .6rem; letter-spacing: .14em;
            text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.selbtn {
  font-family: var(--ff-mono); font-size: .71rem;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid var(--line); color: var(--fg);
  padding: 6px 10px; border-radius: 3px; cursor: pointer;
  backdrop-filter: blur(8px); box-shadow: var(--shadow);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.selbtn:hover { border-color: var(--accent); }
.selbtn[aria-pressed="true"] { border-color: var(--accent); background: var(--raised); }
.selbtn .sw { width: 9px; height: 9px; border-radius: 1px; flex: none; }
.selbtn .n { color: var(--muted); }
.tag.act { background: rgba(77,214,196,.16); color: var(--accent); margin-right: 4px; }
@media (max-width: 760px) {
  .selectors { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .selectors::-webkit-scrollbar { display: none; }
  .sellabel { display: none; }
}

/* ---- stepping inside a building ---- */
.enterbtn {
  margin-top: 12px; width: 100%;
  font-family: var(--ff-mono); font-size: .76rem; letter-spacing: .04em;
  background: var(--accent); border: none; color: #0B1512;
  padding: 10px 12px; border-radius: 3px; cursor: pointer; font-weight: 500;
}
.enterbtn:hover { filter: brightness(1.08); }
/* `display:flex` on a class BEATS the browser's own [hidden]{display:none},
   so without this the closed theatre stayed laid out over the whole map at
   z-index 40 and silently ate every click on the estate. No error, no visible
   panel - just a map that had stopped responding. */
.theatre[hidden] { display: none !important; }
.theatre { position: absolute; inset: 0; z-index: 40; background: var(--bg); display: flex; flex-direction: column; }
.theatre canvas { flex: 1; width: 100%; display: block; touch-action: none; cursor: grab; min-height: 0; }
.theatre-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px max(14px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--line); background: var(--surface);
}
.theatre-ttl { font-family: var(--ff-display); font-size: 1.05rem; font-weight: 600; }
.theatre-facts { font-family: var(--ff-mono); font-size: .72rem; color: var(--muted); min-width: 0; flex: 1; }
.theatre-facts .src { display: block; margin-top: 3px; font-size: .64rem; opacity: .8; }
.theatre-bar .btn {
  font-family: var(--ff-mono); font-size: .72rem; background: var(--raised);
  border: 1px solid var(--line); color: var(--fg); padding: 8px 12px;
  border-radius: 3px; cursor: pointer;
}
@media (max-width: 760px) { .theatre-facts { flex-basis: 100%; order: 3; } }