/* ==========================================================================
   Big Happy — pet-friendly place directory
   Design tokens, layout, components. No external dependencies.
   ========================================================================== */

:root{
  --ink:#1E1B16;
  --ink-2:#3B352C;
  --muted:#6E6455;
  --hint:#93887A;
  --paper:#FFFFFF;
  --cream:#FBF8F3;
  --cream-2:#F5F0E6;
  --line:#E7E0D3;
  --line-2:#D8CFBE;

  --brand:#1F6F5C;
  --brand-dark:#14503F;
  --brand-tint:#E7F2EE;
  --accent:#C97A16;
  --accent-tint:#FBF0DC;
  --danger:#B03A2E;

  --radius-s:8px;
  --radius:14px;
  --radius-l:22px;
  --shadow-s:0 1px 2px rgba(30,27,22,.05);
  --shadow:0 6px 22px rgba(30,27,22,.08);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

  --wrap:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block; height:auto}
a{color:var(--brand-dark); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.25; margin:0 0 .5em; letter-spacing:-.01em}
h1{font-size:2.4rem}
h2{font-size:1.65rem}
h3{font-size:1.15rem}
p{margin:0 0 1em}
hr{border:0; border-top:1px solid var(--line); margin:2rem 0}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:4px}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}
.section{padding:64px 0}
.section--tight{padding:40px 0}
.section-head{max-width:640px; margin-bottom:28px}
.section-head p{color:var(--muted); margin:0}
.eyebrow{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand); font-weight:700; margin:0 0 .6em
}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:200}
.skip:focus{left:0}

/* ---------- header ---------- */
.notice-bar{
  background:var(--accent-tint); border-bottom:1px solid #EEDCBB; color:#6A4405;
  font-size:.82rem; padding:9px 0; text-align:center
}
.notice-bar .wrap{display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap}
.notice-bar b{font-weight:600}
.notice-bar button{
  background:none;border:0;font:inherit;color:#6A4405;cursor:pointer;
  text-decoration:underline;padding:0
}
.site-header{
  position:sticky; top:0; z-index:60; background:rgba(251,248,243,.92);
  backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line)
}
.site-header .wrap{display:flex; align-items:center; gap:26px; height:66px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:1.22rem; color:var(--ink); font-weight:600}
.brand:hover{text-decoration:none}
.brand svg{flex:none}
.brand small{display:block; font-family:var(--font); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--hint); font-weight:600; margin-top:-3px}
.nav{display:flex; gap:22px; margin-left:auto; font-size:.94rem}
.nav a{color:var(--ink-2); padding:6px 0; border-bottom:2px solid transparent}
.nav a:hover{text-decoration:none; color:var(--brand-dark); border-bottom-color:var(--brand)}
.nav a[aria-current="page"]{color:var(--brand-dark); border-bottom-color:var(--brand)}
.header-cta{display:flex; align-items:center; gap:10px}
.menu-btn{display:none; background:var(--paper); border:1px solid var(--line-2); border-radius:var(--radius-s); padding:8px 11px; cursor:pointer}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--brand); color:#fff; border:1px solid var(--brand);
  padding:12px 20px; border-radius:999px; font-size:.95rem; font-weight:600;
  cursor:pointer; font-family:inherit; transition:background .15s
}
.btn:hover{background:var(--brand-dark); border-color:var(--brand-dark); text-decoration:none; color:#fff}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn--ghost:hover{background:var(--paper); color:var(--ink); border-color:var(--ink-2)}
.btn--light{background:#fff; color:var(--brand-dark); border-color:#fff}
.btn--light:hover{background:#fff; color:var(--brand-dark); border-color:#fff; opacity:.9}
.btn--sm{padding:8px 15px; font-size:.86rem}

/* ---------- hero ---------- */
.hero{position:relative; color:#fff; overflow:hidden; background:#2A3A34}
.hero img{position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; object-fit:cover; opacity:.62}
.hero::after{content:""; position:absolute; top:0; right:0; bottom:0; left:0; background:linear-gradient(180deg, rgba(16,28,24,.35) 0%, rgba(16,28,24,.72) 100%)}
.hero-inner{position:relative; z-index:2; padding:96px 0 84px; max-width:720px}
.hero h1{font-size:3.05rem; margin-bottom:.35em; color:#fff}
.hero p{font-size:1.12rem; color:#EAF0EC; max-width:560px}
.hero .eyebrow{color:#A8D8C8}

.searchbar{
  display:flex; gap:8px; background:#fff; border-radius:999px; padding:7px;
  box-shadow:var(--shadow); max-width:560px; margin:26px 0 16px
}
.searchbar input{
  flex:1; border:0; background:transparent; padding:11px 16px; font:inherit;
  color:var(--ink); min-width:0
}
.searchbar input:focus{outline:none}
.hero-chips{display:flex; gap:8px; flex-wrap:wrap; align-items:center; font-size:.86rem}
.hero-chips span{color:#CFE0D8}
.chip-link{
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.32); color:#fff;
  padding:5px 13px; border-radius:999px; font-size:.84rem
}
.chip-link:hover{background:rgba(255,255,255,.24); text-decoration:none}
.hero-stats{display:flex; gap:34px; margin-top:34px; flex-wrap:wrap}
.hero-stats div strong{display:block; font-family:var(--serif); font-size:1.7rem}
.hero-stats div span{font-size:.82rem; color:#CFE0D8}

/* ---------- grids & cards ---------- */
.grid{display:grid; gap:22px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}

/* ---------- cities by region ---------- */
.area-block{padding:26px 0 6px}
.area-block + .area-block{border-top:1px solid var(--line)}
.area-head{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:18px}
.area-head h2{font-size:1.42rem; margin:0}
.area-head p{margin:0; color:var(--muted); font-size:.93rem}
.area-count{
  margin-left:auto; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); background:var(--cream-2); border-radius:999px; padding:5px 12px
}
.region-jump{display:flex; gap:9px; flex-wrap:wrap}
.region-chip{
  display:inline-flex; align-items:center; gap:7px; font-size:.86rem;
  background:var(--cream-2); border:1px solid var(--line); border-radius:999px;
  padding:7px 14px; color:var(--ink)
}
.region-chip b{font-weight:600; color:var(--muted)}
.region-chip:hover{background:var(--brand-tint); border-color:var(--brand); text-decoration:none}
.area-block{scroll-margin-top:90px}
@media (max-width:760px){ .area-count{margin-left:0} }

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; transition:transform .16s, box-shadow .16s
}
/* :hover styles that MOVE an element are gated to real pointers. On touch the
   hover fires at touchstart, the card shifts mid-tap, and the browser's
   synthesised click then lands on whatever slid under the finger — on listing
   cards that was the "Source" link directly under the title, so tapping a
   listing on a phone opened the venue's site (or nothing) instead of the
   listing page. */
@media (hover:hover){
  .card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
}
/* padding-top instead of aspect-ratio: works on much older mobile browsers */
.card-media{position:relative; padding-top:62.5%; background:var(--cream-2); overflow:hidden}
.card-media img{position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; object-fit:cover}
.photo-credit{
  position:absolute; right:8px; bottom:8px; z-index:2; max-width:78%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  background:rgba(14,24,20,.74); color:#EAF3EE; font-size:.66rem; line-height:1.5;
  padding:3px 9px; border-radius:999px; text-decoration:none
}
.photo-credit:hover,.photo-credit:focus-visible{background:rgba(14,24,20,.92); text-decoration:none; color:#fff}
.card-body{padding:16px 17px 18px; display:flex; flex-direction:column; flex:1}
.card-title{font-size:1.06rem; margin:0 0 4px; font-family:var(--serif)}
.card-title a{color:var(--ink)}
/* Whole-card link: the title anchor stretches an invisible layer across the card,
   so the photograph and the body text are both part of the same link. */
.card{position:relative}
.card-link::after{content:""; position:absolute; top:0; right:0; bottom:0; left:0; z-index:1; border-radius:var(--radius)}
.card-link:focus-visible{outline:none}
.card-link:focus-visible::after{outline:3px solid var(--brand); outline-offset:-3px}
.card:hover .card-link{text-decoration:underline}
/* Anything else interactive stays above that layer and keeps working.
   .photo-credit is deliberately excluded: it is an absolutely positioned overlay
   on the image, and this rule would otherwise out-specify it, pull it into the
   flow and make photo cards taller than illustration cards. */
.card .src-link,.card button,.card a:not(.card-link):not(.photo-credit){position:relative; z-index:2}
.card-media .photo-credit{position:absolute; right:8px; bottom:8px; z-index:2}
.no-photo{
  position:absolute; left:11px; bottom:11px; z-index:2; pointer-events:none;
  background:rgba(255,255,255,.9); color:var(--muted);
  font-size:.72rem; font-weight:600; padding:4px 11px; border-radius:999px
}
.card-media .tag{pointer-events:none}
.card-meta{font-size:.82rem; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:9px}
.card-text{font-size:.9rem; color:var(--muted); margin:0 0 13px; flex:1}
.card-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.82rem; border-top:1px solid var(--line); padding-top:11px}
.tag{
  position:absolute; top:11px; left:11px; z-index:2;
  background:rgba(255,255,255,.94); color:var(--ink); font-size:.74rem; font-weight:600;
  padding:4px 11px; border-radius:999px; letter-spacing:.02em
}
.rating{display:inline-flex; align-items:center; gap:5px; font-weight:600; color:var(--ink); font-size:.85rem}
.rating svg{color:var(--accent)}
.src-link{display:inline-flex; align-items:center; gap:4px; font-weight:600; font-size:.85rem; color:var(--brand-dark); text-decoration:none; border-bottom:1px solid transparent}
.src-link:hover,.src-link:focus-visible{border-bottom-color:currentColor}
.side-card .kv a{color:var(--brand-dark)}
.pill{
  display:inline-block; background:var(--cream-2); color:var(--ink-2);
  border:1px solid var(--line); font-size:.75rem; padding:3px 10px; border-radius:999px; margin:0 5px 5px 0
}
.pill--brand{background:var(--brand-tint); border-color:#CBE3DA; color:var(--brand-dark)}
.price{color:var(--ink-2); font-weight:600}
/* Right-hand cluster on listing cards: price + the decorative "More"
   affordance (the card itself is the link). */
.card-foot-cta{display:flex; align-items:center; gap:12px; flex-shrink:0}
.card-foot-cta .btn{white-space:nowrap}
@media (max-width:480px){
  .card-foot{flex-wrap:wrap}
  .card-foot > div:first-child{flex:1 1 100%}
  .card-foot-cta{width:100%; justify-content:space-between}
}

.city-card{position:relative; border-radius:var(--radius); overflow:hidden; display:block; color:#fff; padding-top:75%; border:1px solid var(--line)}
.city-card img{position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; object-fit:cover; transition:transform .35s}
@media (hover:hover){ .city-card:hover img{transform:scale(1.05)} }
.city-card::after{content:""; position:absolute; top:0; right:0; bottom:0; left:0; background:linear-gradient(180deg, rgba(16,28,24,.08) 30%, rgba(16,28,24,.78) 100%)}
.city-card:hover{text-decoration:none}
.city-card-body{position:absolute; top:0; right:0; bottom:0; left:0; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; padding:18px}
.city-card-body strong{font-family:var(--serif); font-size:1.22rem; display:block}
.city-card-body span{font-size:.82rem; color:#DCE7E1}

.cat-tile{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 18px; display:flex; flex-direction:column; gap:8px; color:var(--ink)
}
.cat-tile:hover{text-decoration:none; border-color:var(--brand); box-shadow:var(--shadow-s)}
.cat-tile svg{color:var(--brand)}
.cat-tile strong{font-size:.98rem}
.cat-tile span{font-size:.8rem; color:var(--muted)}

/* ---------- filter bar ---------- */
.filters{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; position:sticky; top:78px; z-index:40
}
.filter-row{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end}
.field{display:flex; flex-direction:column; gap:5px; min-width:150px; flex:1}
.field label{font-size:.78rem; font-weight:600; color:var(--ink-2)}
.field input,.field select{
  font:inherit; font-size:.92rem; padding:9px 12px; border:1px solid var(--line-2);
  border-radius:var(--radius-s); background:var(--cream); color:var(--ink); width:100%
}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.chip{
  font:inherit; font-size:.84rem; cursor:pointer; background:var(--cream-2);
  border:1px solid var(--line); color:var(--ink-2); padding:6px 14px; border-radius:999px
}
.chip:hover{border-color:var(--line-2)}
.chip[aria-pressed="true"]{background:var(--brand); border-color:var(--brand); color:#fff}
.filter-foot{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:14px; padding-top:13px; border-top:1px solid var(--line); flex-wrap:wrap}
.filter-foot p{margin:0; font-size:.86rem; color:var(--muted)}
.linkish{background:none;border:0;font:inherit;font-size:.86rem;color:var(--brand-dark);cursor:pointer;text-decoration:underline;padding:0}

.results-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:30px 0 16px; flex-wrap:wrap}
.results-head h2{margin:0; font-size:1.35rem}
.results-head p{margin:0; color:var(--muted); font-size:.88rem}
.empty{
  background:var(--paper); border:1px dashed var(--line-2); border-radius:var(--radius);
  padding:52px 24px; text-align:center; color:var(--muted)
}

/* ---------- detail page ---------- */
.crumbs{font-size:.84rem; color:var(--muted); padding:20px 0 0; display:flex; gap:8px; flex-wrap:wrap}
.crumbs a{color:var(--muted)}
.detail-hero{margin:14px 0 0; border-radius:var(--radius-l); overflow:hidden; border:1px solid var(--line); position:relative; padding-top:42.857%; background:var(--cream-2)}
.detail-hero img{position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; object-fit:cover}
.detail-credit{margin:10px 0 0; font-size:.78rem; color:var(--muted)}
.detail-credit a{color:var(--muted)}
.detail-grid{display:grid; grid-template-columns:1fr 340px; gap:34px; align-items:start; margin-top:30px}
.detail-head h1{margin-bottom:.3em}
.detail-meta{display:flex; gap:10px; flex-wrap:wrap; align-items:center; color:var(--muted); font-size:.92rem; margin-bottom:14px}
.detail-body h2{font-size:1.3rem; margin-top:34px}
.detail-body h3{font-size:1.02rem; margin-top:26px}
.detail-body li{margin:6px 0}
.callout{background:var(--brand-tint); border:1px solid #CBE3DA; border-radius:var(--radius); padding:16px 18px; margin:22px 0}
.callout h3{margin:0 0 6px; font-size:.95rem; color:var(--brand-dark)}
.callout p:last-child{margin-bottom:0}
.warn{background:var(--accent-tint); border:1px solid #EEDCBB; border-radius:var(--radius); padding:16px 18px; margin:22px 0}
.warn h3{margin:0 0 6px; font-size:.95rem; color:#7A4E08}

.side-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:20px; position:sticky; top:90px}
.side-card h3{margin-top:0; font-size:1rem}
.kv{display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); font-size:.88rem}
.kv:last-of-type{border-bottom:0}
.kv dt{color:var(--muted); margin:0; flex:none}
.kv dd{margin:0; text-align:right; font-weight:600; color:var(--ink-2)}
.side-actions{display:flex; flex-direction:column; gap:9px; margin-top:16px}

/* ---------- prose (about / legal) ---------- */
.prose{max-width:760px}
.prose h1{margin-bottom:.4em}
.prose h2{font-size:1.25rem; margin-top:38px; padding-top:6px}
.prose h3{font-size:1.02rem; margin-top:24px}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin:7px 0}
.prose table{width:100%; border-collapse:collapse; font-size:.9rem; margin:18px 0; background:var(--paper)}
.prose th,.prose td{border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top}
.prose th{background:var(--cream-2); font-weight:600}
.prose code{background:var(--cream-2); border-radius:4px; padding:1px 5px; font-size:.88em}
.meta-line{color:var(--hint); font-size:.86rem; margin-bottom:26px}
.toc{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:18px 22px; margin:26px 0}
.toc ol{margin:0; padding-left:20px; font-size:.92rem}

/* ---------- contact ---------- */
.form-note{font-size:.82rem; color:var(--muted)}
/* ---------- contact form ----------
   The site's only POST form (the hero search is a GET, everything else is a
   mailto:). It posts to Formspree, which relays the message by email; there is
   still no backend of our own. Styled from the same tokens as the filter bar. */
.cform{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; display:grid; gap:16px
}
.cform[hidden]{display:none}
.cform .field{min-width:0; flex:none; gap:6px}
.cform textarea{
  font:inherit; font-size:.93rem; padding:10px 12px; border:1px solid var(--line-2);
  border-radius:var(--radius-s); background:var(--cream); color:var(--ink);
  width:100%; min-height:136px; resize:vertical
}
.field-hint{font-size:.78rem; color:var(--hint)}
.cform .consent{
  display:flex; gap:10px; align-items:flex-start; font-size:.84rem;
  line-height:1.55; color:var(--ink-2)
}
.cform .consent input{margin:2px 0 0; width:17px; height:17px; flex:none}
.cform .consent a{color:var(--brand-dark)}
.cform-actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
/* Honeypot for Formspree: invisible to people and to screen readers, not to the
   naive bots that fill in every field they find. Hidden with a class rather than
   an inline style so it is harder to fingerprint. */
.bot-trap{opacity:0; position:absolute; top:0; left:-9999px; width:0; height:0; overflow:hidden; z-index:-1}
.form-status{font-size:.86rem; margin:0; color:var(--muted)}
.form-status--ok{color:var(--brand-dark); font-weight:600}
.form-status--err{color:var(--danger); font-weight:600}
.form-done{background:var(--brand-tint); border:1px solid var(--brand); border-radius:var(--radius); padding:24px}
.form-done[hidden]{display:none}
.form-done h3{margin:0 0 6px; font-size:1.15rem}
.form-done p{margin:0 0 8px; font-size:.93rem; color:var(--ink-2)}
.form-done p:last-child{margin-bottom:0}
.mail-list{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px}
.mail-list a{
  display:block; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 17px; color:var(--ink); font-weight:600; transition:border-color .16s, transform .16s
}
.mail-list a::after{content:"\2197"; float:right; color:var(--brand); font-weight:400}
@media (hover:hover){ .mail-list a:hover{border-color:var(--brand); text-decoration:none; transform:translateX(2px)} }
.mail-list a:focus-visible{border-color:var(--brand); text-decoration:none}
.mail-list a span{display:block; font-weight:400; font-size:.84rem; color:var(--muted); margin-top:3px; padding-right:22px}
.contact-split{display:grid; grid-template-columns:1fr 320px; gap:40px; align-items:start}
.info-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.info-card h3{margin-top:0; font-size:1rem}

/* ---------- newsletter / CTA band ---------- */
.band{background:var(--brand-dark); color:#fff; border-radius:var(--radius-l); padding:44px; display:grid; grid-template-columns:1.1fr 1fr; gap:36px; align-items:center}
.band h2{color:#fff; margin-bottom:.3em}
.band p{color:#CDE3DA; margin:0}
.band form{display:flex; gap:8px; background:#fff; border-radius:999px; padding:6px}

/* ---------- footer ---------- */
.site-footer{background:#17231F; color:#B9C7C1; margin-top:70px; padding:56px 0 26px; font-size:.9rem}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:32px}
.site-footer h4{color:#fff; font-family:var(--font); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; margin:0 0 14px}
.site-footer ul{list-style:none; margin:0; padding:0}
.site-footer li{margin:8px 0}
.site-footer a{color:#B9C7C1}
.site-footer a:hover{color:#fff}
.footer-brand{max-width:290px}
.footer-brand p{margin:14px 0 0; font-size:.85rem; color:#8FA39B}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); margin-top:40px; padding-top:20px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.8rem; color:#8FA39B}
.footer-legal{display:flex; gap:16px; flex-wrap:wrap}
.footer-disclaimer,.footer-notice{border-top:1px solid rgba(255,255,255,.12); margin-top:22px; padding-top:18px}
.footer-disclaimer h4,.footer-notice h4{margin:0 0 8px}
.footer-disclaimer p,.footer-notice p{margin:0; font-size:.78rem; line-height:1.62; color:#7C8F88; max-width:900px}
.footer-disclaimer b,.footer-notice b{color:#B9C7C1; font-weight:600}

/* ---------- cookie banner ---------- */
.cookie{
  position:fixed; left:18px; right:18px; bottom:18px; z-index:120; max-width:760px; margin:0 auto;
  background:var(--paper); border:1px solid var(--line-2); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px 20px; display:none; gap:16px; align-items:center; flex-wrap:wrap
}
.cookie.is-open{display:flex}
.cookie p{margin:0; font-size:.86rem; color:var(--muted); flex:1; min-width:240px}
.cookie-actions{display:flex; gap:9px; flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .detail-grid{grid-template-columns:1fr}
  .side-card{position:static}
  .contact-split{grid-template-columns:1fr}
  .band{grid-template-columns:1fr; padding:32px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero h1{font-size:2.45rem}
}
@media (max-width:720px){
  body{font-size:15px}
  .nav{display:none}
  .nav.is-open{
    display:flex; flex-direction:column; gap:2px; position:absolute; left:0; right:0; top:66px;
    background:var(--paper); border-bottom:1px solid var(--line); padding:12px 22px 18px; margin:0
  }
  .menu-btn{display:inline-flex; margin-left:auto}
  .header-cta .btn{display:none}
  .grid--3,.grid--4,.grid--2{grid-template-columns:1fr}
  .hero-inner{padding:66px 0 58px}
  .hero h1{font-size:2rem}
  .hero-stats{gap:22px}
  .searchbar{flex-direction:column; border-radius:var(--radius); padding:10px}
  .searchbar .btn{width:100%}
  .section{padding:44px 0}
  .filters{position:static}
  .detail-hero{padding-top:62.5%}
  .footer-grid{grid-template-columns:1fr}
}

@media print{
  .site-header,.site-footer,.cookie,.notice-bar,.band,.side-actions{display:none}
  body{background:#fff}
  .prose{max-width:none}
  a{color:#000}
}