/* ==========================================================================
   Llanidloes.com - css/2026.css
   Shares the visual identity built for llanidloestowncouncil.gov.wales:
   Georgian stone, oak woodland, the Severn, and a touch of Welsh red.
   Newsreader for display type, Public Sans for body copy, IBM Plex Mono
   for dates, categories and eyebrows. The arch motif nods to the open
   stone arcade of the Old Market Hall.

   This file also adds a small set of components needed for the ~100
   listing pages on llanidloes.com (organisations, shops, accommodation,
   places to eat) that were not needed on the Council site: a header
   search field, a listing info strip, a two column listing layout, and
   reuse of the existing card and contact styles.
   ========================================================================== */

:root{
  --ink:        #16241C;
  --forest:     #26402F;
  --forest-2:   #2F4A3A;
  --stone:      #F4EFE4;
  --stone-2:    #ECE4D2;
  --paper:      #FFFFFF;
  --river:      #2E6E86;
  --river-dark: #204F61;
  --dragon:     #A63A2E;
  --gold:       #B9873B;
  --gold-text:  #8A611A;
  --line:       #DCD3BE;
  --ink-soft:   #4A5850;

  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body:    "Public Sans", -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --maxw: 1120px;
  --radius: 4px;
  --shadow: 0 12px 30px -18px rgba(22,36,28,0.45);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; overflow-x: hidden; }

body{
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--stone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }
iframe{ max-width: 100%; }

a{ color: var(--river-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover{ color: var(--dragon); }

:focus-visible{
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 .5em;
}

.eyebrow{
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--river-dark);
}

.wrap{
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px;
}

section[id]{ scroll-margin-top: 90px; }

/* Skip link ---------------------------------------------------------- */
.skip-link{
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  z-index: 200;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus{ left: 0; }

/* Header / nav --------------------------------------------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink);
  border-bottom: 3px solid var(--gold);
}
.site-header .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 10px;
}
.header-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;
}
.brand{
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--paper);
  text-decoration: none;
}
.brand img{ height: 60px; width: auto; }
.brand-text{
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--paper);
}
.brand-text small{
  display: block;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #C9D6CB;
  font-weight: 400;
}

.nav-toggle{
  display: none;
  background: none;
  border: 1px solid #445947;
  color: var(--paper);
  padding: 8px 12px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .9rem;
}

.primary-nav ul{
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
  flex-wrap: wrap;
}
.primary-nav a{
  display: inline-block;
  color: #E7E3D6;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: var(--radius);
}
.primary-nav a:hover,
.primary-nav a:focus-visible{
  background: rgba(255,255,255,0.08);
  color: var(--paper);
}
.primary-nav li.active a{
  color: var(--paper);
  position: relative;
}
.primary-nav li.active a::after{
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 2px;
  background: var(--gold);
}

/* Hero ------------------------------------------------------------------ */
.hero{
  position: relative;
  min-height: 62vh;
  background: var(--forest);
  overflow: hidden;
}
.hero img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22,36,28,0) 0%, rgba(22,36,28,0) 55%, rgba(18,28,21,0.35) 100%);
}
/* hero-content fills the full hero height. The eyebrow sits in normal
   flow from the top (padding-top controls its distance from the photo
   top), and the tag line box is pushed to the bottom with margin-top:
   auto, so it holds its position regardless of how much padding sits
   above the eyebrow. */
.hero-content{
  position: absolute;
  inset: 0;
  z-index: 2;
  color: var(--paper);
  display: flex;
  flex-direction: column;
  padding-block: 64px 56px;
}
.hero .eyebrow{ color: #F4EFE4; text-shadow: 0 1px 8px rgba(0,0,0,0.55); }
.hero h1{
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  color: var(--paper);
  max-width: 15ch;
  margin-block: .2em .3em;
  text-shadow: 0 2px 14px rgba(0,0,0,0.5);
}
.hero-panel{
  display: inline-block;
  margin-top: auto;
  background: rgba(18,28,21,0.72);
  backdrop-filter: blur(2px);
  border-left: 3px solid var(--gold);
  padding: 16px 20px;
  border-radius: var(--radius);
}
.hero-panel h1{
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  color: var(--paper);
  max-width: 24ch;
  margin: 0 0 .3em;
  text-shadow: none;
}
.hero-panel p{
  max-width: 52ch;
  color: var(--paper);
  font-size: 1.05rem;
  margin: 0;
}

/* Hero variant for listing pages: the title sits inside the opaque tag
   line box rather than loose over the photo, since across ~100 hero
   images plain text on the photo is not reliably legible. The box stays
   in the same place, so there is still a visible gap of image above it,
   and the hero itself runs on another 50px below the box before the
   next section starts. */
.hero-listing{ min-height: calc(40vh + 165px); }
.hero-listing .hero-content{ padding-block: 40px 201px; }

/* Arch motif divider ----------------------------------------------------- */
.arch-divider{
  display: block;
  width: 100%;
  height: 22px;
  color: var(--stone);
  background: var(--forest);
}

/* Meeting strip (Council) / info strip (listing pages) -------------------- */
.meeting-strip, .info-strip{
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.meeting-strip .wrap, .info-strip .wrap{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding-block: 22px;
}
.meeting-badge, .info-badge{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--forest);
  color: var(--paper);
  padding: 8px 12px;
  border-radius: var(--radius);
  white-space: nowrap;
}
.meeting-detail, .info-detail{
  font-family: var(--font-mono);
  font-size: .95rem;
  color: var(--ink);
}
.meeting-detail strong, .info-detail strong{ color: var(--river-dark); }
.meeting-cta, .info-cta{
  white-space: nowrap;
}
.info-strip-simple .wrap{ grid-template-columns: 1fr auto; }

/* Buttons ------------------------------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .92rem;
  padding: 11px 20px;
  border-radius: var(--radius);
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
}
.btn-icon{ width: 16px; height: 16px; flex-shrink: 0; }
.btn-primary{ background: var(--dragon); color: var(--paper); }
.btn-primary:hover{ background: #8C3025; color: var(--paper); }
.btn-outline{ border-color: var(--ink); color: var(--ink); }
.btn-outline:hover{ background: var(--ink); color: var(--paper); }
.btn-light{ background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-light:hover{ background: #24382A; border-color: #24382A; color: var(--paper); }

/* Section rhythm --------------------------------------------------------- */
.section{ padding-block: 64px; }
.section-forest{ background: var(--forest); color: var(--stone); }
.section-forest .section-header h2{ color: var(--paper); }
.section-forest .eyebrow{ color: #C9D6CB; }
.section-header{ max-width: 62ch; margin-bottom: 34px; }
.section-header h2{ font-size: clamp(1.7rem, 3vw, 2.3rem); }
.lede{ font-size: 1.08rem; color: var(--ink-soft); }
.section-forest .lede{ color: #DAE2DA; }

/* Intro / history block --------------------------------------------------- */
.history{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: start;
}
.history figure{ margin: 0 0 22px; }
.history figure img{
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.history figcaption{
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--ink-soft);
  margin-top: 10px;
}
.history p{ margin: 0 0 1em; color: var(--ink-soft); }
.history p:last-child{ margin-bottom: 0; }

/* Listing layout: wider content column, narrower detail sidebar,
   used for organisation / shop / accommodation pages */
.listing-layout{
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 48px;
  align-items: start;
}
.listing-layout > *{ min-width: 0; }

.gallery-viewer{ margin-top: 8px; min-width: 0; max-width: 100%; }

/* Feature pair (attend / concerns) --------------------------------------- */
.feature-pair{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.feature-card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
}
.feature-card .glyph{
  width: 34px; height: 34px;
  color: var(--river);
  margin-bottom: 14px;
}
.feature-card h3{ font-size: 1.2rem; }
.feature-card p{ color: var(--ink-soft); margin: 0; }
.feature-card .chamber-photo{
  margin-top: 16px;
  width: 100%;
  max-width: 280px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Services grid ------------------------------------------------------------ */
.services-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.service-card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.service-card .glyph{
  width: 28px; height: 28px;
  color: var(--gold);
}
.service-card h3{ font-size: 1.05rem; margin-bottom: 0; }
.service-card p{ color: var(--ink-soft); font-size: .95rem; margin: 0; flex: 1; }
.service-card .badge-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--river-dark);
  text-decoration: none;
  margin-top: 4px;
}
.badge-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--river-dark);
  text-decoration: none;
}
.badge-link svg{ width: 15px; height: 15px; }
.service-card .badge-link img{ height: 22px; width: auto; }
.services-grid-4{ grid-template-columns: repeat(4, 1fr); }

/* Tags (categories) -------------------------------------------------------- */
.council-tags, .listing-tags{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tag{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  background: var(--stone);
}
.tag-ward, .tag-primary{ border-color: var(--gold); color: var(--ink); background: rgba(185,135,59,0.14); }

/* Plan your visit: four image led cards linking to the main site
   sections, used near the bottom of every listing page */
.plan-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.plan-card{
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow);
}
.plan-card img{
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  transition: transform .35s ease;
}
.plan-card:hover img{ transform: scale(1.05); }
.plan-card-body{ padding: 16px 18px 20px; }
.plan-card-body h3{
  font-size: 1.05rem;
  margin-bottom: .2em;
  color: var(--ink);
}
.plan-card:hover .plan-card-body h3{ color: var(--dragon); }
.plan-card-body p{
  margin: 0;
  font-size: .9rem;
  color: var(--ink-soft);
}

/* Hub/directory pages: flexible thumbnail grid for paid listings (any
   count), and a plain text style for free/unpaid listings */
.plan-grid-flow{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 20px;
}
.free-listing-label{
  font-family: var(--font-mono);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
  margin: 26px 0 8px;
}
.free-listing{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.free-listing a{
  font-size: .93rem;
  color: var(--river-dark);
  text-decoration: none;
}
.free-listing a:hover{ color: var(--dragon); text-decoration: underline; }

/* CTA band ------------------------------------------------------------- */
.cta-band{
  background: var(--river-dark);
  color: var(--paper);
  padding-block: 48px;
}
.cta-band .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-band h2{ color: var(--paper); font-size: 1.6rem; margin-bottom: .2em; }
.cta-band p{ color: #D8E6EB; margin: 0; max-width: 46ch; }
.cta-actions{ display: flex; gap: 12px; flex-wrap: wrap; }

/* Contact / details card (address, phone, hours, links) -------------------- */
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.contact-col{
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.card-image{
  width: 100%;
  border-radius: var(--radius);
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.visit-card p{ margin: 0 0 .6em; color: var(--ink-soft); }
.visit-card p:last-child{ margin-bottom: 0; }
.visit-card strong{ color: var(--ink); }
.visit-card .glyph-row{ display: flex; align-items: flex-start; gap: 10px; margin: 0 0 .8em; }
.visit-card .glyph-row svg{ width: 18px; height: 18px; color: var(--river); flex-shrink: 0; margin-top: 3px; }
.visit-card .glyph-row p{ min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.visit-card .glyph-row:last-child{ margin-bottom: 0; }

.map-frame{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.map-frame iframe{ display: block; width: 100%; }

/* Footer ----------------------------------------------------------------- */
.site-footer{
  position: relative;
  background: url("https://www.llanidloes.com/gifs/glaslyn2023.jpg") center / cover no-repeat;
  color: #C9D6CB;
  padding-block: 48px 28px;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 36px;
}
.footer-brand{ display: flex; gap: 14px; align-items: flex-start; }
.footer-brand img{ height: 40px; }
.footer-brand h2{ color: var(--paper); font-size: 1.15rem; margin-bottom: .3em; }
.footer-brand address{ font-style: normal; color: #C9D6CB; font-size: .93rem; line-height: 1.7; }
.footer-brand a{ color: #E7E3D6; }
.site-footer h4{
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.footer-links ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-links a{ color: #C9D6CB; text-decoration: none; font-size: .93rem; }
.footer-links a:hover{ color: var(--paper); text-decoration: underline; }
.footer-social{ display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.footer-social svg{ width: 22px; height: 22px; color: #C9D6CB; flex-shrink: 0; }
.footer-social a{ color: #E7E3D6; text-decoration: none; font-size: .93rem; }
.footer-social a:hover{ color: var(--paper); text-decoration: underline; }
.footer-bottom{
  border-top: 1px solid #2C4032;
  margin-top: 36px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .84rem;
  color: #8FA394;
}
.footer-bottom a{ color: #8FA394; }
.footer-bottom .credit{ margin: 0; }

/* Search field (header and dark sections) --------------------------------- */
.nav-search, .doc-search{
  max-width: 460px;
  position: relative;
}
.nav-search{ margin: 0; width: 220px; }
.nav-search-btn{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #C9D6CB;
}
.nav-search-btn:hover{ color: var(--paper); }
.nav-search-btn svg, .doc-search svg{
  width: 17px;
  height: 17px;
  color: inherit;
}
.doc-search svg{
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #C9D6CB;
  pointer-events: none;
}
.nav-search input, .doc-search input{
  width: 100%;
  padding: 10px 14px 10px 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.08);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: .9rem;
}
.nav-search input::placeholder, .doc-search input::placeholder{ color: #C9D6CB; }
.nav-search input:focus-visible, .doc-search input:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  background: rgba(255,255,255,0.14);
}

/* Cookie bar --------------------------------------------------------------- */
.cookie-bar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 300;
  background: var(--ink);
  border-top: 3px solid var(--gold);
  color: var(--paper);
  padding: 14px 24px;
}
.cookie-bar .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 0;
}
.cookie-bar p{ margin: 0; font-size: .88rem; color: #E7E3D6; }
.cookie-bar a{ color: var(--paper); }
.cookie-bar .btn{ padding: 8px 16px; font-size: .82rem; }

/* Page header (inner pages) ------------------------------------------------ */
.page-header{
  background: var(--forest);
  color: var(--stone);
  padding-block: 52px 46px;
}
.page-header .eyebrow{ color: #C9D6CB; }
.page-header h1{ color: var(--paper); font-size: clamp(2rem, 4vw, 2.7rem); margin-bottom: .3em; }
.page-header p{ color: #DAE2DA; max-width: 60ch; margin: 0; font-size: 1.05rem; }

/* Long-form readable content (about text, policy pages) -------------------- */
.policy-body{ max-width: 74ch; }
.policy-body h3{
  font-size: 1.15rem;
  margin-top: 2.2em;
  padding-top: 1.4em;
  border-top: 1px solid var(--line);
  scroll-margin-top: 90px;
}
.policy-body h3:first-of-type{ margin-top: 0; padding-top: 0; border-top: none; }
.policy-body p{ margin: 0 0 1em; color: var(--ink-soft); }
.policy-body ul{ margin: 0 0 1em; padding-left: 22px; color: var(--ink-soft); }
.policy-body li{ margin-bottom: 8px; }
.policy-body li:last-child{ margin-bottom: 0; }
.policy-body a{ color: var(--river-dark); }

@media (max-width: 600px){
  .policy-toc ol{ columns: 1; }
}

/* Photo gallery (main stage, thumbnail strip, lightbox) -------------------- */

.gv-stage{
  position: relative;
  min-width: 0;
  background: var(--stone-2);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gv-stage img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  background: var(--stone-2);
}
.gv-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(22,36,28,0.55);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.gv-arrow:hover{ background: rgba(22,36,28,0.8); }
.gv-arrow svg{ width: 20px; height: 20px; }
.gv-prev{ left: 14px; }
.gv-next{ right: 14px; }

.gv-expand{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  border: none;
  background: rgba(22,36,28,0.55);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.gv-expand:hover{ background: rgba(22,36,28,0.8); }
.gv-expand svg{ width: 17px; height: 17px; }

.gv-caption{
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 14px;
}
.gv-count{
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.gv-caption-text{ font-size: .98rem; color: var(--ink); margin: 0; }

.gv-thumbs{
  display: flex;
  min-width: 0;
  gap: 8px;
  overflow-x: auto;
  padding: 18px 2px 4px;
  scrollbar-width: thin;
}
.gv-thumb{
  flex-shrink: 0;
  width: 84px;
  height: 60px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  background: var(--stone-2);
}
.gv-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.gv-thumb.active{ border-color: var(--gold); }
.gv-thumb:hover{ border-color: var(--river); }

.gv-lightbox{
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(15,22,17,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.gv-lightbox[hidden]{ display: none; }
.gv-lightbox-img{
  max-width: 100%;
  max-height: calc(100vh - 140px);
  object-fit: contain;
}
.gv-lightbox-caption{
  position: absolute;
  left: 0; right: 0; bottom: 24px;
  text-align: center;
  color: #E7E3D6;
  font-size: .92rem;
  padding: 0 60px;
}
.gv-lightbox-close{
  position: absolute;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.1);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.gv-lightbox-close:hover{ background: rgba(255,255,255,0.2); }
.gv-lightbox-close svg{ width: 18px; height: 18px; }
.gv-lightbox .gv-arrow{ background: rgba(255,255,255,0.1); }
.gv-lightbox .gv-arrow:hover{ background: rgba(255,255,255,0.2); }
.gv-lightbox .gv-prev{ left: 24px; }
.gv-lightbox .gv-next{ right: 24px; }

@media (max-width: 700px){
  .gv-stage{ aspect-ratio: 4 / 3; }
  .gv-arrow{ width: 38px; height: 38px; }
  .gv-lightbox{ padding: 20px; }
  .gv-lightbox-caption{ padding: 0 20px; bottom: 14px; }
}

/* 404 page ---------------------------------------------------------------- */
.error-hero{
  background: var(--forest);
  color: var(--stone);
  padding-block: 90px 64px;
  text-align: center;
}
.error-hero .wrap{ display: flex; flex-direction: column; align-items: center; }
.error-hero .eyebrow{ color: #C9D6CB; }
.error-code{
  font-family: var(--font-mono);
  font-size: clamp(3.4rem, 9vw, 5.5rem);
  color: var(--gold);
  line-height: 1;
  margin: .3em 0 .15em;
}
.error-hero h1{
  color: var(--paper);
  font-size: clamp(1.7rem, 3.6vw, 2.3rem);
  margin-bottom: .5em;
}
.error-hero .lede{
  color: #DAE2DA;
  max-width: 50ch;
  margin: 0 auto 30px;
}
.error-actions{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.error-links{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.error-links a{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 26px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 500;
}
.error-links a:hover{ border-color: var(--river); background: var(--stone-2); color: var(--river-dark); }
.error-links svg{ width: 26px; height: 26px; color: var(--river); }

@media (max-width: 700px){
  .error-links{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px){
  .history{ grid-template-columns: 1fr; }
  .listing-layout{ grid-template-columns: 1fr; }
  .feature-pair{ grid-template-columns: 1fr; }
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
  .services-grid-4{ grid-template-columns: repeat(2, 1fr); }
  .plan-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-brand{ grid-column: 1 / -1; }
  .contact-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 700px){
  .nav-toggle{ display: inline-block; }
  .header-row{ width: 100%; }
  .primary-nav{ display: none; width: 100%; }
  .primary-nav.open{ display: block; }
  .primary-nav ul{ flex-direction: column; gap: 0; padding-bottom: 10px; }
  .site-header .wrap{ flex-wrap: wrap; }
  .nav-search{ width: 100%; margin-bottom: 10px; }
  .meeting-strip .wrap, .info-strip .wrap{ grid-template-columns: 1fr; text-align: left; }
  .services-grid{ grid-template-columns: 1fr; }
  .services-grid-4{ grid-template-columns: 1fr; }
  .plan-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .cta-band .wrap{ flex-direction: column; align-items: flex-start; }
}