/* datist.ch - red, black, white. Structure follows the parkito house
   style: sticky nav, section-title + section-line, stats band, count pills,
   striped footer. One stylesheet, one font, no framework. */
:root{
  --red:#e01a24;             /* the accent, on black */
  --red-ink:#b3121b;         /* red that still passes AA on white */
  --red-soft:#fdecec;
  --red-line:#f6c9cb;
  --black:#0b0b0c;
  --black-2:#15161a;
  --black-3:#22242a;
  --ink:#111318; --ink-2:#3c414b; --muted:#697180;
  --line:#e6e8ec; --bg:#fff; --bg-2:#f7f9fa;
  --radius:14px; --radius-lg:20px;
  --shadow:0 1px 2px rgba(11,11,12,.04), 0 10px 26px rgba(11,11,12,.07);
  --shadow-lg:0 24px 60px rgba(11,11,12,.16);
  --wrap:1200px;
  --font:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font:16px/1.65 var(--font); -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{line-height:1.18; margin:0 0 .5em; letter-spacing:-.02em; font-weight:700}
h1{font-size:clamp(2rem,4.3vw,3.2rem); font-weight:800}
h2{font-size:clamp(1.45rem,2.5vw,2rem)}
h3{font-size:1.05rem}
p{margin:0 0 1rem}
a{color:inherit}
img,video{max-width:100%}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px; width:100%}
:focus-visible{outline:3px solid var(--red); outline-offset:3px; border-radius:6px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:99; background:#fff; padding:12px 16px; border-radius:10px; box-shadow:var(--shadow-lg); font-weight:700}

/* ---------- nav ---------- */
.site-head{position:sticky; top:0; z-index:300; background:rgba(11,11,12,.93); backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.08)}
.head-in{display:flex; align-items:center; gap:20px; min-height:70px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; font-weight:800; letter-spacing:-.02em; font-size:1.08rem}
.brand-mark{display:grid; place-items:center}
.brand-tld{color:#7d8492; font-weight:600}
.main-nav{display:flex; gap:24px; margin-left:auto; flex-wrap:wrap}
.main-nav a{text-decoration:none; color:#c6cad2; font-size:.93rem; font-weight:600; padding:8px 0; border-bottom:2px solid transparent; transition:color .15s, border-color .15s}
.main-nav a:hover{color:#fff}
.main-nav a[aria-current]{color:#fff; border-bottom-color:var(--red)}
.lang-pick{display:flex; gap:2px; background:rgba(255,255,255,.08); border-radius:999px; padding:3px}
.lang-pick a{text-decoration:none; font-size:.72rem; font-weight:800; color:#98a0ae; padding:6px 10px; border-radius:999px; letter-spacing:.05em}
.lang-pick a:hover{color:#fff}
.lang-pick a.on{background:var(--red); color:#fff}

/* ---------- hero with video ---------- */
.hero{position:relative; background:var(--black); color:#fff; padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,64px);
  min-height:100vh; min-height:100svh; display:flex; align-items:center}
.hero > .wrap{width:100%}
.hero-media{position:absolute; inset:0; overflow:hidden; z-index:0; border-radius:inherit}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.78; filter:saturate(.9)}
.hero::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:
  radial-gradient(760px 420px at 78% 8%, rgba(224,26,36,.16), transparent 62%),
  linear-gradient(180deg, rgba(11,11,12,.28) 0%, rgba(11,11,12,.62) 70%, var(--black) 100%)}
.hero .wrap{position:relative; z-index:30}
.hero-eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#ffb3b7; background:rgba(224,26,36,.14); border:1px solid rgba(224,26,36,.38); padding:7px 14px; border-radius:999px; margin:0 0 20px}
.hero h1{color:#fff; max-width:19ch; text-shadow:0 2px 18px rgba(0,0,0,.55)}
.hero h1 em{font-style:normal; color:var(--red)}
.hero-lead{font-size:clamp(.9rem,1.05vw,1rem); line-height:1.65; color:#dfe3e8; max-width:70ch; text-shadow:0 1px 12px rgba(0,0,0,.6)}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin:26px 0 0}
.hero .hero-cta{margin:26px 0 4px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:50px; text-decoration:none; font-weight:700; font-size:.96rem; padding:13px 26px; border-radius:12px; transition:transform .14s, box-shadow .14s, background .14s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--red); color:#fff; box-shadow:0 10px 28px rgba(224,26,36,.30)}
.btn-primary:hover{background:#43e0b3}
.btn-ghost{background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.2)}
.btn-ghost:hover{background:rgba(255,255,255,.15)}

/* stat band under the hero */
.stats{position:relative; z-index:1; background:var(--black-2); border-top:1px solid rgba(255,255,255,.07)}
.stats-inner{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:26px 0}
.stat{padding-left:16px; border-left:3px solid var(--red)}
.stat b{display:block; font-size:1.65rem; font-weight:800; color:#fff; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.stat span{font-size:.85rem; color:#98a0ae}

/* ---------- sections ---------- */
.section{padding:clamp(48px,6vw,80px) 0}
.section-alt{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.section-title{margin:0 0 12px}
.section-line{width:56px; height:4px; border-radius:2px; background:var(--red); margin:0 0 22px}
.section-intro{color:var(--muted); max-width:64ch; margin:0 0 30px}
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap}
.sec-more{text-decoration:none; font-weight:700; font-size:.92rem; color:var(--red-ink); white-space:nowrap}
.sec-more:hover{text-decoration:underline}

/* count pills (parkito citypills) */
.pills{display:flex; flex-wrap:wrap; gap:10px}
.pills a{display:inline-flex; align-items:center; gap:9px; text-decoration:none; background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 16px; font-size:.92rem; font-weight:600; color:var(--ink); transition:border-color .14s, transform .14s, box-shadow .14s}
.pills a:hover{border-color:var(--red); transform:translateY(-2px); box-shadow:var(--shadow)}
.pills a span{font-size:.76rem; font-weight:800; color:var(--red-ink); background:var(--red-soft); border-radius:999px; padding:2px 9px; font-variant-numeric:tabular-nums}

/* card grids */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); transition:transform .14s, box-shadow .14s, border-color .14s}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--red-line)}
.card p{margin:0; color:var(--muted); font-size:.93rem}
.card-ico{display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--red-soft); border:1px solid var(--red-line); color:var(--red-ink); font-weight:800; margin-bottom:14px}

/* dataset list */
.ds-list{display:grid; gap:14px}
.ds{display:block; text-decoration:none; background:#fff; border:1px solid var(--line); border-left:4px solid var(--red); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow); transition:transform .14s, box-shadow .14s}
.ds:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg)}
.ds h3{margin:0 0 6px; font-size:1.02rem}
.ds p{margin:0 0 10px; color:var(--muted); font-size:.9rem}
.ds-meta{display:flex; gap:8px; flex-wrap:wrap; align-items:center; font-size:.74rem; color:var(--muted)}
.tag{display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.05em; padding:3px 9px; border-radius:6px; background:var(--bg-2); border:1px solid var(--line); color:var(--ink-2)}
.tag-accent{background:var(--red-soft); border-color:var(--red-line); color:var(--red-ink)}

/* steps */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; list-style:none; margin:0; padding:0}
.steps li{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}
.steps .num{display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--black); color:var(--red); font-weight:800; margin-bottom:14px}
.steps p{margin:0; color:var(--muted); font-size:.93rem}

/* page head */
.page-head{position:relative; isolation:isolate; color:#fff; padding:clamp(40px,5.5vw,72px) 0;
  background:var(--black) url('/assets/img/title.avif') center/cover no-repeat}
.page-head::before{content:""; position:absolute; inset:0; z-index:-1; background:
  linear-gradient(90deg, rgba(8,14,11,.94) 0%, rgba(8,14,11,.80) 48%, rgba(8,14,11,.60) 100%)}
.page-head h1{color:#fff; max-width:26ch}
.page-head .lead{color:#b6bcc6; max-width:66ch; font-size:1.04rem; margin-bottom:0}
.crumbs{font-size:.82rem; color:#8b92a0; margin-bottom:14px; display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.crumbs a{color:#b6bcc6; text-decoration:none}
.crumbs a:hover{color:var(--red)}
.head-badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
.head-badges .tag{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:#dfe3e9}

/* prose + tables */
.prose{max-width:74ch}
.prose h2{margin-top:2em; font-size:1.22rem}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--ink-2)}
.dtable{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.dtable th,.dtable td{text-align:left; padding:12px 16px; border-bottom:1px solid var(--line); font-size:.92rem}
.dtable th{background:var(--bg-2); font-weight:700; width:34%; color:var(--ink-2)}
.dtable tr:last-child td,.dtable tr:last-child th{border-bottom:0}
.table-scroll{overflow-x:auto}

/* pagination */
.pager{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:34px}
.pager a,.pager span{display:inline-grid; place-items:center; min-width:42px; height:42px; padding:0 12px; border-radius:10px; border:1px solid var(--line); background:#fff; text-decoration:none; font-weight:700; font-size:.9rem}
.pager a:hover{border-color:var(--red)}
.pager .on{background:var(--black); color:#fff; border-color:var(--black)}

/* faq */
.faq-list{max-width:78ch}
.faq-list details{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 22px; margin-bottom:12px; box-shadow:var(--shadow)}
.faq-list details[open]{border-color:var(--red-line)}
.faq-list summary{cursor:pointer; font-weight:700; list-style:none; display:flex; justify-content:space-between; gap:16px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+"; color:var(--red-ink); font-weight:800; font-size:1.2rem}
.faq-list details[open] summary::after{content:"\2212"}
.faq-list p{margin:14px 0 0; color:var(--muted)}

/* contact */
.contact-card{background:#fff; border:1px solid var(--line); border-top:4px solid var(--red); border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow); max-width:60ch}
.ct-label{font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 8px}
.ct-mail a{font-size:1.35rem; font-weight:800; color:var(--red-ink); text-decoration:none; word-break:break-word}

/* source note */
.srcnote{background:var(--red-soft); border:1px solid var(--red-line); border-radius:var(--radius); padding:16px 20px; font-size:.88rem; color:var(--ink-2)}
.srcnote a{color:var(--red-ink); font-weight:700}

/* ---------- footer (parkito stripe pattern) ---------- */
.footer-stripe{height:5px; background:linear-gradient(90deg,var(--red) 0%, var(--black-3) 50%, var(--red) 100%)}
.site-foot{background:var(--black); color:#a4abb8; padding:52px 0 26px}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px}
.site-foot .brand-txt{color:#fff; font-weight:800; font-size:1.1rem}
.foot-brand p{margin:12px 0 0; font-size:.89rem; max-width:36ch}
.foot-mail a{color:var(--red); text-decoration:none; font-weight:700}
.site-foot h2{font-size:.73rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#79808e; margin-bottom:13px}
.site-foot ul{list-style:none; margin:0; padding:0}
.site-foot li{margin-bottom:8px}
.site-foot li a{color:#a4abb8; text-decoration:none; font-size:.9rem}
.site-foot li a:hover{color:var(--red)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.11); margin-top:38px; padding-top:20px}
.foot-bottom p{font-size:.81rem; color:#79808e; margin:0 0 6px}

@media (max-width:1000px){
  .grid-3,.grid-4,.steps{grid-template-columns:repeat(2,1fr)}
  .stats-inner{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .head-in{flex-wrap:wrap; gap:10px; padding:12px 0}
  .main-nav{order:3; width:100%; margin:0; gap:14px; justify-content:space-between; border-top:1px solid rgba(255,255,255,.08); padding-top:8px; overflow-x:auto}
  .main-nav a{font-size:.84rem; white-space:nowrap}
  .lang-pick{margin-left:auto}
  .grid-3,.grid-4,.steps,.stats-inner{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .btn{width:100%}
  .dtable th{width:42%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .hero-video{display:none}
}

/* icons */
.section-title i{color:var(--red-ink); margin-right:10px; font-size:.86em}
.main-nav a i{margin-right:6px; opacity:.75; font-size:.9em}
.steps .num i{font-size:.95rem}
.card-ico i{font-size:1.05rem}
.btn i{font-size:.9em}
.page-head h1 i{color:var(--red); margin-right:10px}

/* brand mark reads AZ, no wordmark in the nav */
.brand-mark{width:auto; min-width:44px; height:34px; padding:0 11px; font-size:15px; letter-spacing:.06em}
.site-head .brand{gap:0}

/* ---------- nav, parkito pattern ---------- */
.navbar{padding:0}
.navbar-in{display:flex; align-items:center; gap:16px; min-height:70px; flex-wrap:wrap}
.navbar-brand{display:inline-flex; align-items:center; text-decoration:none}
.navbar-toggler{display:none; margin-left:auto; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  color:#fff; width:46px; height:42px; border-radius:10px; font-size:1.05rem; cursor:pointer}
.navbar-toggler:hover{background:rgba(255,255,255,.16)}
.navbar-collapse{margin-left:auto}
.navbar-nav{display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0}
.nav-item{position:relative}
.nav-link{display:inline-flex; align-items:center; gap:7px; text-decoration:none; color:#c6cad2; background:none; border:0;
  font:600 .92rem/1 var(--font); padding:11px 13px; border-radius:9px; cursor:pointer; white-space:nowrap;
  transition:color .15s, background .15s}
.nav-link i{opacity:.8; font-size:.92em}
.nav-link:hover{color:#fff; background:rgba(255,255,255,.07)}
.nav-link.active{color:#fff; background:rgba(224,26,36,.16)}
.nav-link.active i{color:var(--red); opacity:1}
.dropdown-toggle::after{content:"\f107"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:.8em; opacity:.7; margin-left:2px}
.dropdown-menu{display:none; position:absolute; right:0; top:calc(100% + 8px); min-width:186px; background:#fff;
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg); padding:7px; z-index:80; list-style:none; margin:0}
.dropdown-menu.show{display:block}
.dropdown-item{display:block; padding:10px 13px; border-radius:8px; text-decoration:none; color:var(--ink); font-size:.92rem; font-weight:600}
.dropdown-item:hover{background:var(--bg-2)}
.dropdown-item.active{background:var(--red-soft); color:var(--red-ink)}

@media (max-width:900px){
  .navbar-toggler{display:inline-grid; place-items:center}
  .navbar-collapse{display:none; width:100%; margin:0 0 12px}
  .navbar-collapse.show{display:block}
  .navbar-nav{flex-direction:column; align-items:stretch; gap:2px}
  .nav-link{width:100%; padding:13px 12px; font-size:.96rem}
  .nav-item.dropdown{border-top:1px solid rgba(255,255,255,.1); margin-top:6px; padding-top:6px}
  .dropdown-menu{position:static; width:100%; margin-top:6px}
}

/* ---------- dataset page layout ---------- */
.ds-layout{display:grid; grid-template-columns:1.55fr .95fr; gap:34px; align-items:start}
.ds-tags{margin-top:18px; display:flex; gap:8px; flex-wrap:wrap}
@media (max-width:900px){
  .ds-layout{grid-template-columns:1fr; gap:26px}
  .ds-layout aside{order:-1}
}
@media (max-width:560px){
  .dtable th,.dtable td{display:block; width:100%; padding:10px 14px}
  .dtable th{border-bottom:0; padding-bottom:2px; font-size:.76rem; text-transform:uppercase; letter-spacing:.05em}
  .head-badges .tag{max-width:100%; overflow-wrap:anywhere}
  .page-head h1{font-size:1.65rem; overflow-wrap:anywhere}
  .ds h3{overflow-wrap:anywhere}
}

/* text wordmark in the nav */
.navbar-brand{display:inline-flex; align-items:center; gap:9px; text-decoration:none}
.brand-mark{color:var(--red); font-size:1.3rem; line-height:1}
@media (max-width:640px){ .brand-mark{font-size:1.15rem} }
.wordmark{font-weight:800; font-size:1.22rem; letter-spacing:-.025em; color:#fff; line-height:1}
.wordmark::first-letter{color:var(--red)}
@media (max-width:640px){ .wordmark{font-size:1.1rem} }

/* maps */
.map-box{height:440px; border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow); background:var(--bg-2); z-index:1}
.leaflet-container{border-radius:var(--radius); font:inherit}
.pin{background:var(--red); border:2px solid #fff; border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,.35)}
@media (max-width:640px){ .map-box{height:320px} }

/* teardrop pins with an icon per inventory type */
.pin{display:grid; place-items:center; width:34px; height:34px; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg); background:var(--pin,#e01a24); border:2px solid #fff;
  box-shadow:0 4px 10px rgba(11,11,12,.35); transition:transform .12s}
.pin i{transform:rotate(45deg); color:#fff; font-size:14px; text-shadow:0 1px 1px rgba(0,0,0,.25)}
.leaflet-marker-icon:hover .pin{transform:rotate(-45deg) scale(1.12)}
.leaflet-popup-content-wrapper{border-radius:12px; box-shadow:var(--shadow-lg)}
.leaflet-popup-content{margin:12px 15px; font:inherit}
.pop{display:flex; flex-direction:column; gap:3px; min-width:150px}
.pop-t{font-weight:800; color:var(--ink); text-decoration:none; font-size:.96rem}
a.pop-t:hover{color:var(--red-ink); text-decoration:underline}
.pop-s{font-size:.76rem; color:var(--muted); font-weight:600}
.pop-a{font-size:.76rem; color:var(--red-ink); font-weight:800}

/* hero search with suggestions */
.hero-search{position:relative; z-index:200; display:flex; align-items:center; gap:10px; max-width:620px; margin:26px 0 0;
  background:rgba(255,255,255,.97); border-radius:14px; padding:7px 7px 7px 16px; box-shadow:var(--shadow-lg)}
.hero-search > i{color:var(--muted); font-size:.95rem}
.hero-search input{flex:1; border:0; outline:0; background:none; font:600 1rem var(--font); color:var(--ink); min-width:0; padding:12px 0}
.hero-search input::placeholder{color:#9aa2ae; font-weight:500}
.hero-search button{border:0; cursor:pointer; background:var(--black); color:#fff; font:700 .92rem var(--font);
  padding:12px 20px; border-radius:10px; white-space:nowrap}
.hero-search button:hover{background:#26262a}
.hero-search.light{border:1px solid var(--line); box-shadow:var(--shadow); margin:0}
.suggest{position:absolute; top:calc(100% + 8px); left:0; right:0; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow-lg); list-style:none; margin:0; padding:6px; z-index:200; max-height:360px; overflow:auto}
.suggest a{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:11px 13px;
  border-radius:9px; text-decoration:none; color:var(--ink)}
.suggest a:hover,.suggest a.on{background:var(--red-soft)}
.sg-n{font-weight:700; font-size:.95rem}
.sg-t{font-size:.74rem; font-weight:700; color:var(--red-ink); white-space:nowrap}
.pop-btn{display:inline-block; margin-top:8px; background:var(--red); color:#fff !important; font-weight:800;
  font-size:.78rem; padding:7px 13px; border-radius:8px; text-decoration:none; text-align:center}
.pop-btn:hover{background:#43e0b3}
@media (max-width:560px){ .hero-search{flex-wrap:wrap} .hero-search button{width:100%} }

/* A to Z bar: keeps every place three clicks from the homepage */
.azbar{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 4px}
.azbar a{display:grid; place-items:center; min-width:38px; height:38px; padding:0 10px; border-radius:9px;
  border:1px solid var(--line); background:#fff; text-decoration:none; font-weight:800; font-size:.86rem; color:var(--ink)}
.azbar a:hover{border-color:var(--red); color:var(--red-ink)}
.azbar a.on{background:var(--black); color:#fff; border-color:var(--black)}
.azbar a.all{min-width:auto; color:var(--red-ink); font-weight:700}

/* header breadcrumb + count, the parkito hierarchy read */
.crumbs{font-size:.83rem; color:#cbd3cd; margin-bottom:16px; display:flex; gap:9px; flex-wrap:wrap; align-items:center}
.crumbs a{color:#fff; text-decoration:none; font-weight:600; opacity:.85}
.crumbs a:hover{opacity:1; color:var(--red)}
.crumbs span[aria-hidden]{opacity:.45}
.page-head .lead{color:#dde5df}
.head-count{color:var(--red); font-weight:800}
.head-cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px}
.head-cta .btn{min-height:44px; padding:11px 20px; font-size:.9rem}

/* suggestion rows: distinguish same-named sites */
.sg-l{display:flex; flex-direction:column; gap:1px; min-width:0}
.sg-n{font-weight:700; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sg-m{font-size:.74rem; color:var(--muted); font-weight:600}
.sg-r{display:flex; align-items:center; gap:8px; flex-shrink:0}
.sg-i{width:24px; height:24px; border-radius:7px; display:grid; place-items:center; color:#fff; font-size:11px}

/* place imagery */
.place-fig{margin:0 0 22px}
.place-fig img{width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow); display:block}
.place-fig figcaption{font-size:.8rem; color:var(--muted); margin-top:8px}
.place-intro{font-size:1.02rem; color:var(--ink-2); margin-bottom:22px}
.place-intro b{color:var(--ink)}

/* country map view */
.bigmap{height:calc(100vh - 210px); min-height:480px; margin-top:22px; border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow); z-index:1}
.cl{display:grid; place-items:center; width:100%; height:100%; border-radius:50%;
  background:rgba(224,26,36,.92); color:#fff; font-weight:800; font-size:.86rem;
  border:3px solid #fff; box-shadow:0 4px 14px rgba(11,11,12,.3)}
.maplegend{display:flex; flex-wrap:wrap; gap:14px; margin-top:18px}
.lg{display:inline-flex; align-items:center; gap:7px; font-size:.82rem; color:var(--ink-2); font-weight:600}
.lg i{font-size:.9rem}
@media (max-width:640px){ .bigmap{height:calc(100vh - 300px); min-height:380px} }

/* city key facts, parkito's pk-facts equivalent */
.factgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.fact{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.fact b{display:block; font-size:1.7rem; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.fact b.sm{font-size:1rem; line-height:1.3}
.fact span{font-size:.82rem; color:var(--muted)}
@media (max-width:900px){ .factgrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .factgrid{grid-template-columns:1fr} }

/* full screen control */
.leaflet-fs{display:grid !important; place-items:center; width:34px; height:34px; background:#fff;
  color:var(--ink); font-size:14px; border-radius:4px}
.leaflet-fs:hover{background:#f4f4f4; color:var(--red-ink)}
.map-box:fullscreen,.bigmap:fullscreen{height:100% !important; width:100% !important; border-radius:0; border:0}

/* A to Z hubs at the foot of an inventory listing. Deliberately quieter than
   the old top filter bar: this is a crawl path and an occasional convenience,
   not the primary way to browse. */
.azfoot{display:flex; flex-wrap:wrap; gap:5px; padding-top:22px; border-top:1px solid var(--line)}
.azfoot a{display:grid; place-items:center; min-width:32px; height:32px; padding:0 8px; border-radius:8px;
  font-size:.83rem; font-weight:600; color:var(--ink-3); background:var(--bg-2); border:1px solid var(--line); text-decoration:none}
.azfoot a:hover{border-color:var(--red); color:var(--red-ink)}
.azfoot a.on{background:var(--black); color:#fff; border-color:var(--black)}
.azfoot a.all{min-width:auto; color:var(--red-ink)}

/* Map band on the homepage: one clear invitation to the map, on the forest
   tone so it reads as a break between the browse sections. */
.mapband{max-width:760px}
.mapband .btn{margin-top:4px}



/* the FAQ question is an h2 for search engines, but it must still look like a summary line */
.faq-list summary h2.faq-q{display:inline; margin:0; font-size:1rem; font-weight:700; font-family:var(--font); letter-spacing:0; line-height:inherit; color:inherit}
.pills-rel a{font-weight:600}

/* the hero fills the viewport, but not on a short landscape phone where that
   would push the search box itself off the screen */
@media (max-height:520px){ .hero{min-height:auto} }

/* map lightbox */
.place-fig img:focus-visible{outline:3px solid var(--red); outline-offset:3px}
.lb{position:fixed; inset:0; z-index:2000; background:rgba(6,10,9,.94); display:flex; flex-direction:column; align-items:center; justify-content:center}
.lb[hidden]{display:none}
.lb-stage{flex:1; width:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action:none}
.lb-stage img{max-width:96vw; max-height:82vh; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.6); transform-origin:center center; will-change:transform; user-select:none; -webkit-user-drag:none}
.lb-cap{color:#c2c7d0; font-size:.9rem; padding:14px 20px 22px; text-align:center; max-width:70ch}
.lb-x{position:absolute; top:16px; right:16px; z-index:2; width:46px; height:46px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.12); color:#fff; font-size:1.1rem}
.lb-x:hover{background:rgba(255,255,255,.22)}

/* hero fill height: full screen on phones, a little shorter on desktop */
@media (min-width:900px){ .hero{min-height:82vh; min-height:82svh} }

/* map credit: small and quiet, but still legible (the tile licence needs it visible) */
.leaflet-control-attribution{font-size:9.5px; line-height:1.35; padding:1px 6px;
  background:rgba(255,255,255,.72); color:var(--ink-3, #6b7a83)}
.leaflet-control-attribution a{color:var(--ink-3, #6b7a83); text-decoration:none}
.leaflet-control-attribution a:hover{text-decoration:underline}


/* Entry actions: directions, the town, WhatsApp. Each carries its own colour so
   none of them depends on the outline button style. */
.act-row{display:flex; flex-wrap:wrap; gap:12px}
.act-row .btn{flex:0 0 auto; border:0; color:#fff}
.act-row .btn:hover{filter:brightness(1.08); color:#fff}
.act-row .btn i{color:#fff}
.btn-dir{background:#1a73e8}
.btn-city{background:var(--red, var(--mint, #e01a24))}
.btn-wa{background:#25d366}
@media(max-width:560px){.act-row .btn{flex:1 1 100%; justify-content:center}}
/* Search without a submit button: the suggestion list is the control. */
.hero-search button[type=submit]{display:none}
.hero-search input[type=search]{padding-right:18px}

/* The town map is a landing surface, so it gets parkito's height. */
.map-box.map-city{height:calc(100vh - 210px); min-height:480px}
@media (max-width:640px){ .map-box.map-city{height:calc(100vh - 300px); min-height:380px} }