/* Plant Centre Map - THEME 08 "hero + service-first" (plant-centre-map.txt §1, §8). Prefix pm- (BEM).
   Radius 4px, no shadows (1px Sage Grey borders), system fonts only. */
:root {
	--pm-green: #12664f;      /* primary Botanical Green: buttons, links */
	--pm-sage: #6a9c78;       /* secondary: icons, badges, review rule */
	--pm-lime: #c7db63;       /* accent Yellow Green: highlights, current tab */
	--pm-ever: #12372a;       /* dark Evergreen: hero overlay, header, footer, headings */
	--pm-mint: #f4f9f6;       /* page background */
	--pm-paper: #ffffff;
	--pm-soft: #e3f0e6;       /* highlight Soft Sage: alternate zones, today row */
	--pm-ink: #26372f;        /* text Dark Slate */
	--pm-rule: #cfddd3;       /* border Sage Grey */
	--pm-yes: #2e8b57;
	--pm-no: #b03a2e;
	--pm-star: #e5a823;
	--pm-width: 1200px;
	--pm-r: 4px;
	--pm-1: 8px;
	--pm-2: 16px;
	--pm-3: 24px;
	--pm-4: 40px;
	--pm-5: 64px;
	--pm-head: "Gill Sans", "Gill Sans MT", "Trebuchet MS", Calibri, sans-serif;
	--pm-text: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 64px; }
body { margin: 0; background: var(--pm-mint); color: var(--pm-ink); font: 16px/1.65 var(--pm-text); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--pm-green); text-underline-offset: 2px; }
a:hover { color: var(--pm-ever); }
h1, h2, h3 { font-family: var(--pm-head); font-weight: 600; color: var(--pm-ever); margin: 0; }
p { margin: 0 0 var(--pm-2); }
:focus-visible { outline: 2px solid var(--pm-lime); outline-offset: 2px; }

.pm-skiplink { position: absolute; top: -60px; left: var(--pm-2); background: var(--pm-lime); color: var(--pm-ever); padding: var(--pm-1) var(--pm-2); border-radius: var(--pm-r); z-index: 200; }
.pm-skiplink:focus { top: var(--pm-1); }
.pm-wrap { max-width: var(--pm-width); margin: 0 auto; padding-left: var(--pm-3); padding-right: var(--pm-3); }
/* zones and heroes centre their own content (no inner wrapper): the background stays full width */
.pm-zone, .pm-hero { --pm-gutter: max(var(--pm-3), calc((100% - var(--pm-width)) / 2 + var(--pm-3))); padding-left: var(--pm-gutter); padding-right: var(--pm-gutter); }

/* ---- header: Evergreen, white logo left, white menu right */
.pm-bar { background: var(--pm-ever); color: var(--pm-paper); position: relative; z-index: 30; }
.pm-bar__row { display: flex; align-items: center; justify-content: space-between; gap: var(--pm-3); min-height: 64px; }
.pm-logo { color: var(--pm-paper); text-decoration: none; display: inline-flex; align-items: baseline; gap: var(--pm-1); flex-wrap: wrap; }
.pm-logo:hover { color: var(--pm-lime); }
.pm-logo__img { height: 40px; width: auto; }
.pm-logo__word { font-family: var(--pm-head); font-weight: 600; font-size: 1.25rem; }
.pm-logo__line { font-size: 0.8rem; color: rgba(255, 255, 255, 0.72); }
.pm-menu { display: flex; gap: var(--pm-3); }
.pm-menu__link { color: var(--pm-paper); text-decoration: none; font-size: 0.95rem; padding: var(--pm-1) 0; border-bottom: 2px solid transparent; }
.pm-menu__link:hover, .pm-menu__link--on { color: var(--pm-paper); border-bottom-color: var(--pm-lime); }
.pm-burger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; padding: 0 9px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: var(--pm-r); cursor: pointer; }
.pm-burger__line { display: block; height: 2px; background: var(--pm-paper); }

/* ---- hero */
.pm-hero { position: relative; display: block; color: var(--pm-paper); background: var(--pm-ever); overflow: hidden; padding-top: var(--pm-4); padding-bottom: var(--pm-4); }
.pm-hero > :not(.pm-hero__photo) { position: relative; z-index: 2; }
.pm-hero--lined { background: repeating-linear-gradient(135deg, var(--pm-ever) 0 14px, var(--pm-green) 14px 15px); }
.pm-hero--solid { background: var(--pm-ever); }
.pm-hero--photo { min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end; }
.pm-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pm-hero--photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(18, 55, 42, 0.85) 0%, rgba(18, 55, 42, 0.3) 100%); }
.pm-hero__name { color: var(--pm-paper); font-size: clamp(1.8rem, 1.3rem + 2vw, 2.7rem); line-height: 1.15; }
.pm-hero__intro { margin-top: var(--pm-2); color: rgba(255, 255, 255, 0.9); }
.pm-hero__intro p:last-child { margin: 0; }
.pm-hero__now { margin: var(--pm-2) 0 0; }
.pm-path { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--pm-2); font-size: 0.85rem; }
.pm-path__to { color: var(--pm-lime); }
.pm-path__to:hover { color: var(--pm-paper); }
.pm-path__sep, .pm-path__at { color: rgba(255, 255, 255, 0.75); }
.pm-facts { display: flex; flex-wrap: wrap; gap: var(--pm-2) var(--pm-4); margin: var(--pm-3) 0 0; }
.pm-facts__item { min-width: 0; }
.pm-facts__key { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pm-lime); }
.pm-facts__val { margin: 2px 0 0; }
.pm-facts__tel { color: var(--pm-paper); }

/* ---- sticky section bar under the hero */
.pm-secbar { position: sticky; top: 0; z-index: 20; background: var(--pm-paper); border-bottom: 1px solid var(--pm-rule); }
.pm-secbar__track { display: flex; gap: var(--pm-3); overflow-x: auto; scrollbar-width: thin; }
.pm-secbar__to { flex: none; padding: 14px 0 12px; color: var(--pm-ink); text-decoration: none; font-family: var(--pm-head); font-weight: 600; font-size: 0.9rem; border-bottom: 3px solid transparent; }
.pm-secbar__to:hover { color: var(--pm-green); }
.pm-secbar__to--here { border-bottom-color: var(--pm-lime); color: var(--pm-ever); }

/* ---- stacked full-width zones, white / Soft Sage, small uppercase H2 label + rule */
.pm-body { display: block; }
.pm-zone { padding-top: var(--pm-4); padding-bottom: var(--pm-4); background: var(--pm-paper); }
.pm-zone--tint { background: var(--pm-soft); }
.pm-label { font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; padding-bottom: var(--pm-1); margin-bottom: var(--pm-3); border-bottom: 1px solid var(--pm-rule); }
/* long text blocks (About, reviews, hero intros, static pages): the full content width of their section, as wide as
   the rule under the H2; pm-screens.css sets 17px / 1.75 from 992px */
.pm-copy { max-width: none; }
.pm-copy p:last-child { margin: 0; }

/* ---- buttons */
.pm-action { display: inline-block; padding: 10px 20px; border-radius: var(--pm-r); background: var(--pm-green); color: var(--pm-paper); border: 1px solid var(--pm-green); font: 600 0.95rem var(--pm-head); text-decoration: none; cursor: pointer; }
.pm-action:hover { background: var(--pm-ever); border-color: var(--pm-ever); color: var(--pm-paper); }

/* ---- ratings, stars, open/closed */
.pm-ratebar { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* one element per rating: grey stars underneath, gold stars clipped to --pm-fill (score x 20%) */
.pm-starset { position: relative; display: inline-block; font-size: 0.95em; line-height: 1; letter-spacing: 1px; white-space: nowrap; }
.pm-starset::before { content: "★★★★★"; color: var(--pm-rule); }
.pm-starset::after { content: "★★★★★"; position: absolute; top: 0; left: 0; width: var(--pm-fill, 0%); overflow: hidden; color: var(--pm-star); }
.pm-ratebar__num { font-weight: 700; }
.pm-ratebar__n { font-size: 0.88em; opacity: 0.85; }
.pm-state { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.9rem; }
.pm-state:empty { display: none; }
.pm-state__flag { display: inline-block; padding: 1px 8px; border-radius: var(--pm-r); font-weight: 700; font-size: 0.8rem; color: var(--pm-paper); }
.pm-state__flag--yes { background: var(--pm-yes); }
.pm-state__flag--no { background: var(--pm-no); }
.pm-state--chip .pm-state__flag { font-size: 0.9rem; padding: 4px 12px; }
.pm-state--chip .pm-state__more { color: var(--pm-paper); }

/* ---- Garden & Outdoor Services: tabs (no JS: every category stacked, with its H3) */
.pm-tabs__keys { display: flex; flex-wrap: wrap; gap: var(--pm-1); margin-bottom: var(--pm-3); }
.pm-tabs__keys[hidden] { display: none; }
.pm-tabs__key { padding: 8px 16px; border: 1px solid var(--pm-rule); border-radius: var(--pm-r); background: var(--pm-paper); color: var(--pm-ink); font: 600 0.9rem var(--pm-head); cursor: pointer; }
.pm-tabs__key[aria-selected="true"] { background: var(--pm-ever); border-color: var(--pm-ever); color: var(--pm-paper); box-shadow: inset 0 -3px 0 var(--pm-lime); }
.pm-tabs__panel + .pm-tabs__panel { margin-top: var(--pm-3); }
.pm-tabs.is-live .pm-tabs__panel + .pm-tabs__panel { margin-top: 0; }
.pm-tabs.is-live .pm-tabs__heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pm-tabs__heading { font-size: 1.05rem; margin-bottom: var(--pm-1); }
.pm-prices { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.pm-prices__row { display: flex; gap: var(--pm-2); justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--pm-rule); }
.pm-prices__cost { font-weight: 700; color: var(--pm-green); white-space: nowrap; }

/* ---- Plan Your Visit: 2 columns >= 782px */
.pm-visit { display: grid; gap: var(--pm-3); }
.pm-visit__title { grid-column: 1 / -1; }
.pm-visit__title .pm-label { margin-bottom: 0; }
.pm-visit__cap { margin-bottom: var(--pm-1); color: var(--pm-ever); }
.pm-visit__now { margin-bottom: var(--pm-3); }
/* hours as a description list: one row per day (dt day, dd hours); today Soft Sage + Botanical Green left rule */
.pm-hourlist { max-width: 520px; margin: 0; }
.pm-hourlist__day { display: flex; justify-content: space-between; gap: var(--pm-2); padding: 9px 12px; border-bottom: 1px solid var(--pm-rule); border-left: 3px solid transparent; }
.pm-hourlist__d, .pm-hourlist__t { margin: 0; }
.pm-hourlist__t { text-align: right; }
.pm-hourlist__day.is-now { background: var(--pm-soft); border-left-color: var(--pm-green); font-weight: 700; }

/* ---- Access, Payments & On-site Features: 3 / 2 / 1 columns, sage dot */
.pm-features__group { margin: var(--pm-3) 0 var(--pm-1); color: var(--pm-ever); }
.pm-features__group:first-of-type { margin-top: 0; }
.pm-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 6px var(--pm-3); }
.pm-features__it { position: relative; padding-left: 18px; }
.pm-features__it::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--pm-sage); }

/* ---- See the Location: horizontal strip, 3:2 frames 240px high */
.pm-strip { display: flex; gap: var(--pm-2); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--pm-1); }
.pm-strip__frame { flex: none; height: 240px; aspect-ratio: 3 / 2; border-radius: var(--pm-r); overflow: hidden; scroll-snap-align: start; border: 1px solid var(--pm-rule); background: var(--pm-soft); }
.pm-strip__img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Reviews: vertical list, sage left rule, no cards */
.pm-voices { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pm-3); }
.pm-voices__one { border-left: 3px solid var(--pm-sage); padding-left: var(--pm-2); }
.pm-voices__who { margin-bottom: 4px; font-weight: 700; color: var(--pm-ever); }
.pm-voices__said { margin: 0; }

/* ---- Get in Touch */
.pm-reach__list { list-style: none; margin: 0 0 var(--pm-3); padding: 0; display: grid; gap: var(--pm-1); }
.pm-reach__k { display: inline-block; min-width: 96px; font-weight: 700; color: var(--pm-ever); }
.pm-reach__map { display: block; width: 100%; height: 380px; border: 1px solid var(--pm-rule); border-radius: var(--pm-r); }

/* ---- Brand rows (Nearby / Home / City): image left 200px 3:2 */
.pm-listings { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pm-2); }
/* the whole row is one link (li > a) */
.pm-listing { display: block; }
.pm-listing__go { display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-areas: "pic name" "pic sub" "pic line" "pic where"; grid-template-rows: auto auto auto 1fr; column-gap: var(--pm-3); align-content: start; padding: var(--pm-2); background: var(--pm-paper); border: 1px solid var(--pm-rule); border-radius: var(--pm-r); color: var(--pm-ink); text-decoration: none; }
.pm-listing__go:hover { border-color: var(--pm-green); color: var(--pm-ink); }
.pm-listing__go:hover .pm-listing__name { color: var(--pm-green); text-decoration: underline; }
.pm-listing__go:focus-visible { outline: 2px solid var(--pm-green); outline-offset: 2px; }
.pm-listing__go:focus-visible .pm-listing__name { text-decoration: underline; }
.pm-listing__pic { grid-area: pic; display: block; width: 200px; aspect-ratio: 3 / 2; border-radius: var(--pm-r); overflow: hidden; background: var(--pm-soft); }
.pm-listing__img { width: 100%; height: 100%; object-fit: cover; }
.pm-listing__pic--none { display: flex; align-items: center; justify-content: center; }
.pm-listing__letter { font: 600 2.6rem var(--pm-head); color: var(--pm-green); }
.pm-listing__name { grid-area: name; font-size: 1.12rem; margin-bottom: 4px; color: var(--pm-ever); }
.pm-listing__sub { grid-area: sub; display: flex; flex-wrap: wrap; gap: 4px var(--pm-2); margin-bottom: 6px; font-size: 0.9rem; }
.pm-listing__kind { color: var(--pm-green); font-weight: 600; }
.pm-listing__line { grid-area: line; display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--pm-2); margin-bottom: 6px; font-size: 0.9rem; }
.pm-listing__where { grid-area: where; font-size: 0.9rem; opacity: 0.9; }

/* ---- Location tiles (Home / City): text only, 3 columns >= 992px */
.pm-spots { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pm-2); grid-template-columns: 1fr; }
.pm-spot__go { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px var(--pm-2); padding: var(--pm-2) var(--pm-3); background: var(--pm-paper); border: 1px solid var(--pm-rule); border-radius: var(--pm-r); text-decoration: none; color: var(--pm-ink); }
.pm-spot__go:hover { border-color: var(--pm-green); }
.pm-spot__name { font: 600 1.05rem var(--pm-head); color: var(--pm-ever); }
.pm-spot__many { font-size: 0.88rem; }
.pm-spot__to { font-weight: 400; }
.pm-spot__many { grid-column: 1; }
.pm-spot__to { grid-column: 2; grid-row: 1 / span 2; color: var(--pm-green); font-size: 1.3rem; }

/* ---- pagination */
.pm-pages { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--pm-3); }
.pm-pages__num, .pm-pages__step { display: inline-block; min-width: 38px; padding: 6px 12px; text-align: center; border: 1px solid var(--pm-rule); border-radius: var(--pm-r); background: var(--pm-paper); text-decoration: none; }
.pm-pages__num--here { background: var(--pm-ever); border-color: var(--pm-ever); color: var(--pm-paper); }

/* ---- pages, contact form */
/* static pages: text uses the full content width; the contact form keeps a form width */
.pm-mailform { max-width: 820px; }
.pm-doc h2 { font-size: 1.3rem; margin: var(--pm-4) 0 var(--pm-2); }
.pm-doc > :first-child { margin-top: 0; }
.pm-mailform { margin-top: var(--pm-3); padding: var(--pm-3); border: 1px solid var(--pm-rule); border-radius: var(--pm-r); background: var(--pm-mint); }
.pm-mailform__form { display: grid; gap: var(--pm-2); }
.pm-mailform__pair { display: grid; gap: var(--pm-2); }
.pm-mailform__name { display: grid; gap: 4px; font-weight: 600; color: var(--pm-ever); }
.pm-mailform__control { font: inherit; color: var(--pm-ink); padding: 9px 12px; border: 1px solid var(--pm-rule); border-radius: var(--pm-r); background: var(--pm-paper); }
.pm-mailform__control:focus { outline: 2px solid var(--pm-lime); border-color: var(--pm-green); }
.pm-mailform__control[aria-invalid="true"] { border-color: var(--pm-no); }
.pm-mailform__control--long { resize: vertical; }
.pm-mailform__done { margin: 0; padding: var(--pm-2); background: var(--pm-soft); border-left: 3px solid var(--pm-green); }

/* ---- footer: Evergreen */
.pm-foot { background: var(--pm-ever); color: rgba(255, 255, 255, 0.85); padding: var(--pm-5) 0 var(--pm-3); }
.pm-foot__cols { display: grid; gap: var(--pm-4); grid-template-columns: 1fr; }
.pm-foot__col { display: flex; flex-direction: column; gap: 6px; }
.pm-foot__site { font: 600 1.15rem var(--pm-head); color: var(--pm-paper); margin: 0; }
.pm-foot__title { margin: 0 0 4px; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pm-lime); }
.pm-foot__link { color: var(--pm-paper); text-decoration: none; }
.pm-foot__link:hover { color: var(--pm-lime); }
.pm-foot__legal { margin-top: var(--pm-4); padding-top: var(--pm-2); border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.85rem; }

/* ---- Back to top (THEME 08): square, radius 4px, Evergreen, Yellow Green border, arrow + "Top" */
.pm-rise { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 52px; height: 52px; padding: 0; border: 2px solid var(--pm-lime); border-radius: 4px; background: #12372a; color: var(--pm-paper); font: 600 0.7rem var(--pm-head); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
.pm-rise[hidden] { display: none; }
.pm-rise.is-shown { opacity: 1; visibility: visible; transition: opacity .2s ease; }
.pm-rise:hover { background: var(--pm-green); }
.pm-rise:focus-visible { outline: 3px solid var(--pm-paper); outline-offset: 2px; }
.pm-rise__arrow { width: 10px; height: 10px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; transform: translateY(3px) rotate(45deg); }

/* ---- viewer (viewer.js) */
.pm-viewer { position: fixed; inset: 0; z-index: 300; display: grid; grid-template-rows: auto 1fr auto; background: rgba(18, 55, 42, 0.96); color: var(--pm-paper); }
.pm-viewer[hidden] { display: none; }
.pm-viewer__top { display: flex; justify-content: space-between; align-items: center; padding: var(--pm-1) var(--pm-2); }
.pm-viewer__count { font-size: 0.9rem; }
.pm-viewer__stage { display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 var(--pm-2); }
.pm-viewer__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.pm-viewer__nav { display: flex; justify-content: center; gap: var(--pm-2); padding: var(--pm-2); }
.pm-viewer__btn { padding: 8px 16px; border: 1px solid var(--pm-lime); border-radius: var(--pm-r); background: transparent; color: var(--pm-paper); font: 600 0.9rem var(--pm-head); cursor: pointer; }
.pm-viewer__btn:hover { background: var(--pm-green); }
body.pm-locked { overflow: hidden; }