/* ──────────────────────────────────────────────────────────────────
   Enviro-Smart — Installations gallery (Direction A: dark media wall)
   Palette + type from the live staging design tokens (es-tokens / theme):
   deep green #1e3d14, gold #e8a020, cream #f8f5ec, Bitter + Georgia.
   Dark forest-green ground for max thumbnail contrast.
   ────────────────────────────────────────────────────────────────── */

:root {
  /* dark forest ground */
  --bg:        #102108;
  --bg-2:      #16290f;
  --surface:   #1b3413;
  --surface-2: #20401a;
  --thumb:     #0c1707;
  --border:    #2c5320;
  --border-2:  rgba(245, 241, 230, 0.10);

  /* brand */
  --green-light: #4caf35;
  --green-bar:   #5cb85c;
  --green-mid:   #3a8a2a;
  --gold:        #e8a020;
  --gold-dark:   #c8880e;
  --gold-light:  #f8e29a;
  --red:         #c0392b;
  --like:        #e0584f;

  /* text on dark */
  --cream:     #f5f1e6;
  --cream-dim: #cdddc0;
  --muted:     #93ab86;
  --muted-2:   #708a64;

  --font-display: 'Bitter', Georgia, 'Times New Roman', serif;
  --font-body: Georgia, 'Times New Roman', serif;
  --font-ui: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --r-sm: 6px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;

  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.30);
  --shadow-lift: 0 16px 38px rgba(0, 0, 0, 0.45);

  --maxw: 1320px;
  --side-w: 244px;
  --topbar-h: 120px;
}

.esv2 img{ display: block; max-width: 100%; }
.esv2 button{ font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
.esv2 a{ color: inherit; }
.esv2 ::selection{ background: rgba(76, 175, 53, 0.3); }

.esv2 .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }

/* ── Top bar ─────────────────────────────────────────────── */
.esv2 .topbar{
  position: sticky; top: 0; z-index: 50; height: var(--topbar-h);
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid var(--border);
}
.esv2 .topbar-inner{ display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; }
.esv2 .brand-lockup{ display: flex; align-items: center; gap: 12px; text-decoration: none; }
.esv2 .brand-mark{
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--green-light), var(--green-mid));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.esv2 .brand-mark svg{ width: 20px; height: 20px; }
.esv2 .brand-text{ font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--cream); }
.esv2 .brand-text .tm{ color: var(--gold); }
.esv2 .topbar-phone{
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-ui); font-weight: 600; font-size: 14px; text-decoration: none; color: var(--cream);
  padding: 9px 17px; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); transition: border-color .14s ease, background .14s ease;
}
.esv2 .topbar-phone:hover{ border-color: var(--green-light); background: var(--surface-2); }
.esv2 .topbar-phone .dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--green-bar); box-shadow: 0 0 0 3px rgba(92,184,92,0.18); }

/* ── Header ──────────────────────────────────────────────── */
.esv2 .header{ padding: clamp(38px, 6vw, 76px) 0 clamp(26px, 3.5vw, 38px); }
.esv2 .eyebrow{
  font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 16px;
}
.esv2 .header h1{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(36px, 6vw, 66px); line-height: 1.03; letter-spacing: -0.02em;
  margin: 0; max-width: 16ch; color: var(--cream);
}
.esv2 .header .lede{
  margin: 20px 0 0; max-width: 62ch; font-family: var(--font-body);
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; color: var(--cream-dim); text-wrap: pretty;
}
.esv2 .ror{ font-family: var(--font-display); font-style: italic; font-weight: 600; color: var(--gold-light); }

/* ── Shell: sidebar + content ────────────────────────────── */
.esv2 .shell{ display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: start; padding-bottom: 70px; }

/* Sidebar */
.esv2 .side{ position: sticky; top: calc(var(--topbar-h) + 18px); display: flex; flex-direction: column; gap: 22px; }
.esv2 .side-toggle{
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill);
}
.esv2 .side-toggle button{
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--cream-dim);
  padding: 9px 8px; border-radius: var(--r-pill); transition: background .14s, color .14s;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.esv2 .side-toggle button svg{ width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.esv2 .side-toggle button.on{ background: var(--green-light); color: #0c1a06; box-shadow: 0 2px 8px rgba(76,175,53,0.3); }

.esv2 .facet{ border-top: 1px solid var(--border-2); padding-top: 18px; }
.esv2 .facet:first-of-type{ border-top: none; padding-top: 0; }
.esv2 .facet-label{
  font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted-2); margin: 0 0 10px; padding: 0 4px;
}
.esv2 .facet-list{ display: flex; flex-direction: column; gap: 2px; }
.esv2 .facet-item{
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 11px; border-radius: var(--r-md); font-family: var(--font-ui);
  font-size: 14px; font-weight: 500; color: var(--cream-dim);
  transition: background .12s ease, color .12s ease;
}
.esv2 .facet-item:hover:not(.on):not(:disabled){ background: var(--surface); color: var(--cream); }
.esv2 .facet-item.on{ background: var(--surface-2); color: var(--cream); font-weight: 600; box-shadow: inset 2px 0 0 var(--green-light); }
.esv2 .facet-item:disabled{ opacity: 0.4; cursor: default; }
.esv2 .facet-dot{ width: 9px; height: 9px; border-radius: 3px; flex: none; }
.esv2 .facet-name{ flex: 1; }
.esv2 .facet-n{ font-size: 12px; font-weight: 600; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.esv2 .facet-item.on .facet-n{ color: var(--gold); }
.esv2 .facet-soon{ font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
.esv2 .side-clear{
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--gold);
  padding: 8px 4px 0; text-align: left; display: inline-flex; align-items: center; gap: 7px;
}
.esv2 .side-clear:hover{ color: var(--gold-light); }
.esv2 .side-clear svg{ width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

/* content header (result count + sort) */
.esv2 .content-bar{ display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; min-height: 26px; flex-wrap: wrap; }
.esv2 .content-count{ font-family: var(--font-ui); font-size: 13.5px; color: var(--muted); }
.esv2 .content-count strong{ color: var(--cream); font-weight: 700; }

/* mobile filter trigger (hidden on desktop) */
.esv2 .mfilter{ display: none; }

/* ── Collection grid + cards ─────────────────────────────── */
.esv2 .grid{ display: grid; gap: clamp(16px, 1.8vw, 22px); grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); }

.esv2 .card{
  position: relative; text-align: left; width: 100%; padding: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; transition: border-color .15s ease, box-shadow .18s ease, transform .18s ease;
}
.esv2 .card:hover{ border-color: var(--green-light); box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.esv2 .card:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(76,175,53,0.4); }
.esv2 .card.is-collection::before, .esv2 .card.is-collection::after{
  content: ""; position: absolute; left: 9px; right: 9px; top: -6px; height: 12px;
  border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--surface-2);
  border: 1px solid var(--border); border-bottom: none; z-index: -1;
}
.esv2 .card.is-collection::after{ left: 18px; right: 18px; top: -11px; opacity: 0.6; }

.esv2 .cover{ position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--thumb); }
.esv2 .cover img, .esv2 .cover video{ width: 100%; height: 100%; object-fit: cover; display: block; }
.esv2 .cover .media-el{ transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.esv2 .card:hover .cover .media-el, .esv2 .tile:hover .cover .media-el{ transform: scale(1.06); }
.esv2 .cover::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(8,14,6,0.5)); pointer-events: none; }

.esv2 .play{
  position: absolute; left: 12px; bottom: 12px; z-index: 2; width: 42px; height: 42px; border-radius: 50%;
  background: var(--gold); display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4); transition: transform .16s ease, background .16s ease;
}
.esv2 .play.sm{ width: 32px; height: 32px; }
.esv2 .play.sm.hide{ opacity: 0; transform: scale(0.8); pointer-events: none; }
.esv2 .play.hide{ opacity: 0; }
.esv2 .card:hover .play, .esv2 .tile:hover .play{ transform: scale(1.08); background: var(--gold-light); }
.esv2 .play svg{ width: 20px; height: 20px; fill: #1a1306; margin-left: 2px; }
.esv2 .play.sm svg{ width: 16px; height: 16px; }

.esv2 .count{
  position: absolute; right: 11px; top: 11px; z-index: 2; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--r-pill); background: rgba(8,14,6,0.72);
  backdrop-filter: blur(4px); color: #fff; font-family: var(--font-ui); font-size: 12px; font-weight: 600;
}
.esv2 .count svg{ width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
.esv2 .badge-type{
  position: absolute; right: 11px; top: 11px; z-index: 2; padding: 4px 9px; border-radius: var(--r-sm);
  background: rgba(8,14,6,0.68); backdrop-filter: blur(4px); color: #fff;
  font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
}
/* Duration pill — top right, sits where YOUTUBE badge would, for self-hosted Stream items */
.esv2 .badge-duration{
  position: absolute; right: 11px; top: 11px; z-index: 2;
  padding: 4px 9px; border-radius: var(--r-sm);
  background: rgba(8,14,6,0.78); backdrop-filter: blur(4px); color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
}

/* like (heart + count) — media only */
.esv2 .likebtn{ display: inline-flex; align-items: center; gap: 5px; color: var(--cream); background: none; border: none; padding: 0; cursor: pointer; }
.esv2 .likebtn svg{ stroke: currentColor; fill: none; stroke-width: 2; }
.esv2 .likebtn .like-n{ font-family: var(--font-ui); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.esv2 .likebtn.on{ color: var(--like); }
.esv2 .likebtn.on svg{ fill: var(--like); stroke: var(--like); }
.esv2 .tile-like{
  position: absolute; left: 11px; top: 11px; z-index: 3; padding: 5px 11px 5px 9px; border-radius: var(--r-pill);
  background: rgba(8,14,6,0.62); backdrop-filter: blur(4px); color: #fff;
  transition: background .14s ease, transform .14s ease, color .14s ease; opacity: 0.92;
}
.esv2 .tile-like:hover{ background: rgba(8,14,6,0.85); transform: scale(1.06); }
.esv2 .tile-like svg{ width: 15px; height: 15px; }
.esv2 .tile-like.on{ color: #fff; opacity: 1; }
.esv2 .tile-like.on svg{ fill: var(--like); stroke: var(--like); }

.esv2 .card-body{ padding: 14px 15px 16px; }
.esv2 .card-body h3{ font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.16; letter-spacing: -0.01em; margin: 0; color: var(--cream); }
.esv2 .card-meta{ margin: 6px 0 0; font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
.esv2 .tagrow{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.esv2 .tag{
  font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap;
  background: rgba(76,175,53,0.14); color: #c4e8b3; border: 1px solid rgba(76,175,53,0.3);
}
.esv2 .tag.gold{ background: rgba(232,160,32,0.14); color: var(--gold-light); border-color: rgba(232,160,32,0.34); }

/* ── Media-wall tiles (All media view) ───────────────────── */
.esv2 .mwall{ display: grid; gap: clamp(14px, 1.6vw, 20px); grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
.esv2 .tile{
  position: relative; text-align: left; width: 100%; padding: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; transition: border-color .15s ease, box-shadow .18s ease, transform .18s ease;
}
.esv2 .tile:hover{ border-color: var(--green-light); box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.esv2 .tile:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(76,175,53,0.4); }
.esv2 .tile .cover{ aspect-ratio: 16 / 10; }
.esv2 .tile-body{ padding: 11px 13px 13px; }
.esv2 .tile-col{ font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green-bar); margin: 0; }
.esv2 .tile-cap{ font-family: var(--font-display); font-weight: 600; font-size: 14.5px; line-height: 1.22; letter-spacing: -0.01em; color: var(--cream); margin: 5px 0 0; }
.esv2 .tile-tags{ display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.esv2 .tile-tag{ font-family: var(--font-ui); font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; padding: 2px 8px; border-radius: var(--r-pill); background: rgba(76,175,53,0.13); color: #c4e8b3; border: 1px solid rgba(76,175,53,0.28); white-space: nowrap; }

/* mute pill (self-hosted video hover preview) */
.esv2 .mute-pill{
  position: absolute; right: 11px; top: 11px; z-index: 3; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; border-radius: var(--r-pill); cursor: pointer;
  background: rgba(8,14,6,0.66); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.16);
  color: #fff; font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
  transition: background .14s ease, color .14s ease;
}
.esv2 .mute-pill:hover{ background: rgba(8,14,6,0.85); }
.esv2 .mute-pill.on{ color: var(--gold-light); border-color: rgba(232,160,32,0.4); }
.esv2 .mute-pill svg{ width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

/* grey category pill, bottom-right on the image */
.esv2 .cat-pills{ position: absolute; right: 10px; bottom: 10px; z-index: 2; display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; max-width: 72%; }
.esv2 .cat-pill{
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
  padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap;
  background: rgba(20,28,22,0.8); backdrop-filter: blur(4px); color: #e6ede1; border: 1px solid rgba(255,255,255,0.14);
}

/* empty state */
.esv2 .empty{ padding: 70px 20px; text-align: center; color: var(--muted); font-family: var(--font-ui); }
.esv2 .empty h3{ font-family: var(--font-display); color: var(--cream-dim); font-size: 22px; margin: 0 0 8px; }

/* ── Detail overlay ──────────────────────────────────────── */
.esv2 .detail{
  position: fixed; inset: 0; z-index: 60; overflow-y: auto;
  background:
    radial-gradient(1000px 500px at 80% -6%, rgba(76,175,53,0.10), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  animation: fadein .2s ease;
}
@keyframes fadein { .esv2 from{ opacity: 0; } .esv2 to{ opacity: 1; } }
.esv2 .detail-head{ padding: clamp(22px, 3.5vw, 40px) 0 clamp(18px, 2.5vw, 28px); }
.esv2 .back{
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px;
  padding: 9px 16px 9px 12px; border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--surface); font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  color: var(--cream); transition: border-color .12s, background .12s;
}
.esv2 .back:hover{ border-color: var(--green-light); background: var(--surface-2); }
.esv2 .back svg{ width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.esv2 .detail-head h2{ font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4.6vw, 52px); line-height: 1.04; letter-spacing: -0.02em; margin: 0; max-width: 18ch; color: var(--cream); }
.esv2 .detail-region{ margin: 11px 0 0; font-family: var(--font-ui); font-size: 14.5px; color: var(--muted); font-weight: 500; }
.esv2 .detail-blurb{ margin: 16px 0 0; max-width: 64ch; font-family: var(--font-body); font-size: 17px; line-height: 1.55; color: var(--cream-dim); text-wrap: pretty; }
.esv2 .detail-head .tagrow{ margin-top: 18px; }

.esv2 .scopebar{ display: flex; align-items: center; gap: 10px; margin: 22px 0 4px; flex-wrap: wrap; }
.esv2 .scopebar .lbl{ font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
.esv2 .scope-chip{
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface); font-family: var(--font-ui);
  font-size: 13px; font-weight: 600; color: var(--cream-dim); transition: all .12s;
}
.esv2 .scope-chip:hover{ border-color: var(--green-light); }
.esv2 .scope-chip.on{ background: var(--green-light); border-color: var(--green-light); color: #0c1a06; }
.esv2 .scope-chip .scope-n{ font-size: 11px; opacity: 0.8; }

/* dedicated-page shell: sibling rail + main */
.esv2 .detail-shell{ display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: start; padding-bottom: 80px; }
.esv2 .detail-shell .detail-head{ padding: 0 0 4px; }
.esv2 .detail-rail{ position: sticky; top: calc(var(--topbar-h) + 18px); }
.esv2 .rail-head{ display: flex; justify-content: space-between; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 10px; padding: 0 4px; }
.esv2 .rail-head span{ color: var(--muted); }
.esv2 .rail-list{ display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - var(--topbar-h) - 70px); overflow-y: auto; padding-right: 4px; }
.esv2 .rail-item{ display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 8px 10px; border-radius: var(--r-md); font-family: var(--font-ui); font-size: 13.5px; font-weight: 500; color: var(--cream-dim); transition: background .12s ease, color .12s ease; }
.esv2 .rail-item:hover:not(.on){ background: var(--surface); color: var(--cream); }
.esv2 .rail-item.on{ background: var(--surface-2); color: var(--cream); font-weight: 600; box-shadow: inset 2px 0 0 var(--gold); }
.esv2 .rail-name{ flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esv2 .rail-n{ font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; }

/* single-item feature embed */
.esv2 .feature{ margin-top: 6px; }
.esv2 .feature-frame{ position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-card); background: #000; }
.esv2 .feature-frame iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.esv2 .feature-video, .esv2 .feature-img{ width: 100%; border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--shadow-card); display: block; background: #000; }
.esv2 .feature-img{ max-height: 70vh; object-fit: contain; }
.esv2 .feature-cap{ margin-top: 16px; }
.esv2 .feature-cap h4{ font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--cream); margin: 0; letter-spacing: -0.01em; }
.esv2 .feature-cap p{ font-family: var(--font-ui); font-size: 14px; color: var(--muted); margin: 6px 0 0; }

/* hero: slideshow + colony info */
.esv2 .hero{ position: relative; min-height: 460px; margin: 2px 0 clamp(28px, 4vw, 44px); border-radius: var(--r-lg); overflow: hidden; }

.esv2 .hero-info{
  position: relative; z-index: 3;
  display: flex; flex-direction: column;
  margin-left: auto;
  max-width: min(46%, 520px);
  padding: 28px 30px;
  background: linear-gradient(95deg, rgba(16,33,8,0) 0%, rgba(16,33,8,0.58) 40%, rgba(12,23,7,0.82) 100%);
  border-radius: var(--r-lg);
  min-height: inherit;
}
@media (max-width: 780px) {
  .esv2 .hero-info{ max-width: 100%; background: linear-gradient(180deg, rgba(16,33,8,0.4), rgba(12,23,7,0.92)); }
}
.esv2 .hero-info .tagrow{ margin: 0 0 12px; }
.esv2 .hero-name{ font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3vw, 40px); line-height: 1.05; letter-spacing: -0.02em; margin: 0; color: var(--cream); }
.esv2 .hero-region{ font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--green-bar); letter-spacing: 0.02em; margin: 9px 0 0; }
.esv2 .hero-blurb{ font-family: var(--font-body); font-size: 15.5px; line-height: 1.55; color: var(--cream-dim); margin: 14px 0 0; text-wrap: pretty; }
.esv2 .hero-facts{ display: flex; gap: 10px; margin: 20px 0 0; }
.esv2 .fact{ flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 8px; text-align: center; }
.esv2 .fact-n{ display: block; font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--gold-light); line-height: 1; }
.esv2 .fact-l{ display: block; font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }

/* hero share action */
.esv2 .hero-actions{ margin-top: 18px; }
.esv2 .hero-share{ display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--cream); cursor: pointer; transition: border-color .14s ease, background .14s ease; }
.esv2 .hero-share:hover{ border-color: var(--green-light); background: var(--surface-2); }
.esv2 .hero-share svg{ width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.esv2 .hero-info .hero-facts,
.esv2 .hero-info .hero-actions{
  max-width: min(620px, 58vw);
}

/* slideshow */
.esv2 .slideshow{ position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background: var(--thumb); cursor: pointer; box-shadow: var(--shadow-card); }
.esv2 .slide{ position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.esv2 .slide.on{ opacity: 1; }
.esv2 .slide img, .esv2 .slide video{ width: 100%; height: 100%; object-fit: cover; display: block; }
.esv2 .slide-grad{ position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,14,6,0.62) 0%, transparent 26%, transparent 72%, rgba(8,14,6,0.5) 100%); pointer-events: none; }
.esv2 .hero-play{ left: 18px; bottom: 18px; width: 54px; height: 54px; }
.esv2 .hero-play svg{ width: 24px; height: 24px; }
.esv2 .slide-cap{ position: absolute; left: 18px; top: 16px; right: 72px; z-index: 2; }
.esv2 .slide-kind{ position: absolute; top: 16px; right: 18px; z-index: 2; font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: rgba(8,14,6,0.6); backdrop-filter: blur(4px); padding: 4px 9px; border-radius: var(--r-sm); }
.esv2 .slide-cap p{ font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.2; color: #fff; margin: 0; text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
.esv2 .slide-nav{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%; background: rgba(8,14,6,0.55); border: 1px solid rgba(245,241,230,0.2); display: grid; place-items: center; transition: background .14s; }
.esv2 .slideshow:hover .slide-nav{ background: rgba(8,14,6,0.78); }
.esv2 .slide-nav:hover{ background: var(--gold) !important; border-color: var(--gold); }
.esv2 .slide-nav svg{ width: 20px; height: 20px; stroke: var(--cream); stroke-width: 2; fill: none; }
.esv2 .slide-nav:hover svg{ stroke: #1a1306; }
.esv2 .slide-nav.prev{ left: 14px; } .esv2 .slide-nav.next{ right: 14px; }
.esv2 .slide-dots{ position: absolute; right: 16px; bottom: 18px; z-index: 3; display: flex; gap: 6px; }
.esv2 .slide-dots .dot{ width: 7px; height: 7px; border-radius: 50%; background: rgba(245,241,230,0.4); transition: background .14s, transform .14s; }
.esv2 .slide-dots .dot.on{ background: var(--gold); transform: scale(1.25); }

/* section head above media grid */
.esv2 .section-head{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px 0 0; padding-top: clamp(8px, 1.5vw, 16px); border-top: 1px solid var(--border-2); }
.esv2 .section-head h3{ font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2vw, 23px); letter-spacing: -0.01em; color: var(--cream); margin: 0; }
.esv2 .section-head .scopebar{ margin: 0; }

/* sort control */
.esv2 .sortctl{ display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px; }
.esv2 .sortctl-lbl{ font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); padding: 0 8px 0 10px; }
.esv2 .sortctl button{ font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--cream-dim); padding: 6px 13px; border-radius: var(--r-pill); transition: background .12s, color .12s; }
.esv2 .sortctl button.on{ background: var(--green-light); color: #0c1a06; }

.esv2 .detail-grid{ display: grid; gap: clamp(15px, 1.8vw, 20px); padding: 18px 0 0; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.esv2 .detail-grid .tile .cover{ aspect-ratio: 16 / 11; }
.esv2 .tile-sub{ font-family: var(--font-ui); font-size: 12px; color: var(--muted); margin: 5px 0 0; line-height: 1.4; }

/* related links (Featured in) */
.esv2 .related{ margin-top: clamp(28px, 4vw, 44px); padding-top: clamp(20px, 3vw, 30px); border-top: 1px solid var(--border-2); }
.esv2 .related h3{ font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2vw, 23px); letter-spacing: -0.01em; color: var(--cream); margin: 0 0 16px; }
.esv2 .related-list{ display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.esv2 .related-card{ display: flex; align-items: center; gap: 14px; padding: 15px 16px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); text-decoration: none; transition: border-color .14s ease, background .14s ease, transform .14s ease; }
.esv2 .related-card:hover{ border-color: var(--green-light); background: var(--surface-2); transform: translateY(-2px); }
.esv2 .related-icon{ flex: none; width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--bg); border: 1px solid var(--border); }
.esv2 .related-icon svg{ width: 18px; height: 18px; stroke: var(--gold); fill: none; stroke-width: 2; }
.esv2 .related-text{ display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.esv2 .related-kind{ font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
.esv2 .related-title{ font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1.25; color: var(--cream); }
.esv2 .related-go{ flex: none; }
.esv2 .related-go svg{ width: 17px; height: 17px; stroke: var(--muted); fill: none; stroke-width: 2; transition: stroke .14s ease; }
.esv2 .related-card:hover .related-go svg{ stroke: var(--green-bar); }

/* ── Lightbox ────────────────────────────────────────────── */
.esv2 .lightbox{ position: fixed; inset: 0; z-index: 2147483600; display: grid; grid-template-rows: auto 1fr auto; background: radial-gradient(ellipse at center, rgba(22,41,15,0.94), rgba(8,16,5,0.97) 70%); backdrop-filter: blur(14px); animation: fadein .18s ease; }
.esv2 .lb-stage{ display: grid; grid-template-columns: clamp(52px, 7vw, 88px) minmax(0, 1fr) clamp(52px, 7vw, 88px); align-items: center; min-height: 0; padding: clamp(12px, 2vw, 24px) clamp(8px, 2vw, 24px); }
.esv2 .lb-side{ display: grid; place-items: center; }
.esv2 .lb-center{ display: grid; place-items: center; min-width: 0; min-height: 0; }
.esv2 .lb-media{ max-width: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center; }
.esv2 .lb-media img{ max-width: 100%; max-height: 80vh; width: auto; height: auto; border-radius: var(--r-md); box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.esv2 .lb-media video{ max-width: 100%; max-height: 80vh; border-radius: var(--r-md); background: #000; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.esv2 .lb-frame{ position: relative; width: 100%; max-width: 1180px; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.esv2 .lb-frame iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.esv2 .lb-close{ width: 44px; height: 44px; border-radius: 50%; background: rgba(245,241,230,0.12); border: 1px solid rgba(245,241,230,0.2); display: grid; place-items: center; transition: background .14s; flex-shrink: 0; }
.esv2 .lb-close:hover{ background: rgba(245,241,230,0.24); }
.esv2 .lb-close svg{ width: 20px; height: 20px; stroke: var(--cream); stroke-width: 2; fill: none; }
.esv2 .lb-nav{ width: clamp(44px, 5vw, 56px); height: clamp(44px, 5vw, 56px); border-radius: 50%; background: rgba(245,241,230,0.1); border: 1px solid rgba(245,241,230,0.18); display: grid; place-items: center; transition: background .14s, border-color .14s; }
.esv2 .lb-nav:hover{ background: var(--gold); border-color: var(--gold); }
.esv2 .lb-nav svg{ width: 24px; height: 24px; stroke: var(--cream); stroke-width: 2; fill: none; }
.esv2 .lb-nav:hover svg{ stroke: #1a1306; }
.esv2 .lb-cap{ padding: 16px clamp(16px, 4vw, 54px) 26px; color: var(--cream); text-align: center; }
.esv2 .lb-cap .lb-col{ font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-bar); margin: 0 0 6px; }
.esv2 .lb-cap h4{ margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2.4vw, 24px); letter-spacing: -0.01em; }
.esv2 .lb-cap p{ margin: 6px 0 0; font-family: var(--font-ui); font-size: 14px; color: var(--cream-dim); opacity: 0.8; }
.esv2 .lb-actions{ display: flex; gap: 10px; justify-content: center; margin: 14px 0 0; }
.esv2 .lb-actions .likebtn, .esv2 .lb-share{ display: inline-flex; align-items: center; gap: 8px; padding: 9px 17px; border-radius: var(--r-pill); border: 1px solid rgba(245,241,230,0.2); background: rgba(245,241,230,0.08); color: var(--cream); font-family: var(--font-ui); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .14s ease, border-color .14s ease, color .14s ease; }
.esv2 .lb-actions .likebtn:hover, .esv2 .lb-share:hover{ background: rgba(245,241,230,0.16); }
.esv2 .lb-actions .likebtn.on{ color: var(--like); border-color: rgba(224,88,79,0.55); }
.esv2 .lb-actions .likebtn svg, .esv2 .lb-share svg{ width: 16px; height: 16px; }
.esv2 .lb-share svg{ stroke: currentColor; fill: none; stroke-width: 2; }
.esv2 .lb-counter{ margin: 10px 0 0; font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }


/* ── Lightbox top bar (added in v18 restyle) ────────────────────────── */
.esv2 .lb-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 18px clamp(16px, 3vw, 32px) 6px;
  color: var(--cream);
  border-bottom: 1px solid rgba(245,241,230,0.08);
}
.esv2 .lb-top-info { min-width: 0; flex: 1; }
.esv2 .lb-top-info .lb-col {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-light, #6fb13b);
  margin: 0 0 4px;
}
.esv2 .lb-top-info h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--cream);
}
.esv2 .lb-top-info .lb-sub {
  margin: 4px 0 0;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--cream-dim, rgba(245,241,230,0.7));
  opacity: 0.85;
}
.esv2 .lb-top-actions {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.esv2 .lb-top-actions .likebtn,
.esv2 .lb-top-actions .lb-share {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--r-pill);
  border: 1px solid rgba(245,241,230,0.2);
  background: rgba(245,241,230,0.08);
  color: var(--cream);
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background .14s, border-color .14s;
}
.esv2 .lb-top-actions .likebtn:hover,
.esv2 .lb-top-actions .lb-share:hover {
  background: rgba(245,241,230,0.16);
  border-color: rgba(245,241,230,0.32);
}
.esv2 .lb-top-actions .likebtn.on {
  color: var(--like, #e0584f);
  border-color: rgba(224,88,79,0.55);
}
.esv2 .lb-top-actions .likebtn svg,
.esv2 .lb-top-actions .lb-share svg { width: 16px; height: 16px; }
.esv2 .lb-top-actions .lb-share svg { stroke: currentColor; fill: none; stroke-width: 2; }

.esv2 .lb-counter {
  margin: 0; padding: 12px 0 18px; text-align: center;
  font-family: var(--font-ui); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted, rgba(245,241,230,0.5)); font-weight: 600;
}
@media (max-width: 640px) {
  .esv2 .lb-top { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px 8px; }
  .esv2 .lb-top-actions { justify-content: flex-end; }
}

/* toast */
.esv2 .es-toast{ position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(12px); z-index: 100; background: var(--surface-2); border: 1px solid var(--green-light); color: var(--cream); font-family: var(--font-ui); font-size: 14px; font-weight: 600; padding: 12px 20px; border-radius: var(--r-pill); box-shadow: var(--shadow-lift); opacity: 0; transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.esv2 .es-toast.show{ opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Lower sections + footer ─────────────────────────────── */
.esv2 .section-divider{ border: none; border-top: 1px solid var(--border); margin: 0; }
.esv2 .lower{ padding: clamp(46px, 6vw, 80px) 0; }
.esv2 .lower-grid{ display: grid; gap: clamp(28px, 5vw, 60px); grid-template-columns: 1fr 1fr; align-items: start; }
.esv2 .lower h2{ font-family: var(--font-display); font-weight: 700; font-size: clamp(25px, 3vw, 34px); line-height: 1.1; letter-spacing: -0.02em; margin: 0; color: var(--cream); }
.esv2 .lower p{ margin: 15px 0 0; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--cream-dim); max-width: 52ch; text-wrap: pretty; }
.esv2 .lower .note{ margin-top: 20px; padding: 15px 17px; border-radius: var(--r-md); border: 1px dashed var(--border); background: rgba(255,255,255,0.02); font-family: var(--font-ui); font-size: 14px; color: var(--muted); }
.esv2 .btn-row{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.esv2 .btn{ display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: var(--r-pill); font-family: var(--font-ui); font-size: 15px; font-weight: 700; text-decoration: none; transition: background .14s ease, border-color .14s ease, transform .14s ease; }
.esv2 .btn svg{ width: 17px; height: 17px; }
.esv2 .btn-gold{ background: var(--gold); color: #1a1306; border: 1px solid var(--gold); }
.esv2 .btn-gold:hover{ background: var(--gold-light); }
.esv2 .btn-gold svg{ stroke: #1a1306; fill: none; stroke-width: 2; }
.esv2 .btn-green{ background: var(--green-light); color: #0c1a06; border: 1px solid var(--green-light); }
.esv2 .btn-green:hover{ background: var(--green-bar); }
.esv2 .btn-green svg{ stroke: #0c1a06; fill: none; stroke-width: 2; }
.esv2 .btn-ghost{ background: var(--surface); color: var(--cream); border: 1px solid var(--border); }
.esv2 .btn-ghost:hover{ border-color: var(--green-light); background: var(--surface-2); }
.esv2 .btn-ghost svg{ stroke: currentColor; fill: none; stroke-width: 2; }

.esv2 .foot{ border-top: 1px solid var(--border); background: rgba(0,0,0,0.18); }
.esv2 .foot-inner{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 28px 0; }
.esv2 .foot .tagline{ font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 16px; color: var(--cream); }
.esv2 .foot .tagline span{ color: var(--muted); }
.esv2 .foot .legal{ font-family: var(--font-ui); font-size: 13px; color: var(--muted); }
.esv2 .foot a.fphone{ font-weight: 700; text-decoration: none; color: var(--cream-dim); }

/* ── Mobile filter sheet ─────────────────────────────────── */
.esv2 .sheet-scrim{ position: fixed; inset: 0; z-index: 70; background: rgba(6,11,4,0.6); backdrop-filter: blur(3px); animation: fadein .18s ease; }
.esv2 .sheet{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; max-height: 82vh; overflow-y: auto; background: var(--bg-2); border-top: 1px solid var(--border); border-radius: 20px 20px 0 0; padding: 14px 20px 30px; animation: sheetup .26s cubic-bezier(.2,.8,.2,1); }
@keyframes sheetup { .esv2 from{ transform: translateY(100%); } .esv2 to{ transform: translateY(0); } }
.esv2 .sheet-grab{ width: 40px; height: 4px; border-radius: 999px; background: var(--border); margin: 4px auto 16px; }
.esv2 .sheet-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.esv2 .sheet-head h3{ font-family: var(--font-display); font-weight: 700; font-size: 20px; margin: 0; color: var(--cream); }
.esv2 .sheet-done{ font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--gold); padding: 8px 4px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 880px) {
  .esv2 .shell{ grid-template-columns: 1fr; }
  .esv2 .side{ display: none; }
  .esv2 .detail-shell{ grid-template-columns: 1fr; }
  .esv2 .detail-rail{ display: none; }
  .esv2 .hero{ grid-template-columns: 1fr; }
  .esv2 .mfilter{
    display: flex; align-items: center; gap: 10px; position: sticky; top: calc(var(--topbar-h)); z-index: 28;
    margin: 0 0 16px; padding: 12px 0;
  }
  .esv2 .mfilter-btn{ display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); font-family: var(--font-ui); font-weight: 600; font-size: 14px; color: var(--cream); }
  .esv2 .mfilter-btn svg{ width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
  .esv2 .mfilter-btn .badge{ min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--green-light); color: #0c1a06; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
  .esv2 .mtoggle{ display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); }
  .esv2 .mtoggle button{ font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--cream-dim); padding: 8px; border-radius: var(--r-pill); }
  .esv2 .mtoggle button.on{ background: var(--green-light); color: #0c1a06; }
}
@media (max-width: 620px) {
  .esv2 .grid{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .esv2 .mwall{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .esv2 .detail-grid{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .esv2 .card-body h3{ font-size: 16px; }
  .esv2 .lower-grid{ grid-template-columns: 1fr; }
  .esv2 .brand-text{ font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .esv2 *{ animation: none !important; transition: none !important; } }


/* ── Wrapper: scopes the dark gallery + breaks out of WP content width ── */
.esv2 {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--cream);
  background:
    radial-gradient(1200px 600px at 78% -8%, rgba(76, 175, 53, 0.10), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(232, 160, 32, 0.06), transparent 55%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  -webkit-font-smoothing: antialiased;
  min-height: 80vh;
  /* break out of WP content width so the dark canvas runs edge-to-edge */
  position: relative;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  width: 100vw; max-width: 100vw;
  padding: 0 0 32px;
}
.esv2 *, .esv2 *::before, .esv2 *::after { box-sizing: border-box; }
.esv2 a { color: inherit; text-decoration: none; }
.esv2 img { display: block; max-width: 100%; }
.esv2 button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.esv2 h1, .esv2 h2, .esv2 h3, .esv2 h4, .esv2 p { margin: 0; }

/* Page body — dark forest paint behind .esv2 so any gaps fall back to dark, not white */
body.page-id-207 {
  background:
    radial-gradient(1200px 600px at 78% -8%, rgba(76, 175, 53, 0.08), transparent 60%),
    linear-gradient(180deg, #16290f 0%, #102108 100%);
  background-attachment: fixed;
}

/* Make GeneratePress's container chrome transparent on the installations page so the
   body dark-green paint shows continuously from nav to gallery. */
body.page-id-207 #page,
body.page-id-207 .site-content,
body.page-id-207 .content-area,
body.page-id-207 .site-main,
body.page-id-207 .entry-content,
body.page-id-207 article.page,
body.page-id-207 .inside-article,
body.page-id-207 .inside-content,
body.page-id-207 #primary {
  background: transparent !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* The .entry-content often has horizontal padding from "separate-containers" — kill it so esv2 reaches edges */
body.page-id-207 .entry-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ── Collapsible facet sections ───────────────────────────── */
.esv2 .facet-head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 6px 4px 8px;
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2);
  cursor: pointer; transition: color .15s ease;
  margin: 0;
}
.esv2 .facet-head:hover { color: var(--cream-dim); }
.esv2 .facet-head .facet-label { margin: 0; padding: 0; }
.esv2 .facet-head .facet-hint {
  margin-left: auto; margin-right: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: none;
  color: var(--gold); white-space: nowrap;
}
.esv2 .facet-chev { transition: transform .18s ease; opacity: 0.7; flex-shrink: 0; }
.esv2 .facet-chev.is-open { transform: rotate(180deg); opacity: 1; }
.esv2 .facet.is-closed .facet-list {
  max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
  transition: max-height .2s ease, opacity .15s ease;
}
.esv2 .facet.is-open .facet-list {
  max-height: 720px; opacity: 1; transition: max-height .25s ease, opacity .2s ease .05s;
}

/* Push the detail page's hero below the sticky WP nav so the title isn't clipped */
.esv2 .detail { padding-top: calc(var(--topbar-h) + 24px); }
/* When the browser auto-scrolls (anchor jumps, scrollIntoView), respect the WP nav */
html { scroll-padding-top: var(--topbar-h); }

/* ── Vintage aerial map backdrop on detail hero ─────────────── */
.esv2 .hero { position: relative; overflow: hidden; border-radius: var(--r-lg); }
.esv2 .hero-aerial {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  /* Vintage look is baked into the JPG by the generator; just tune presence */
  opacity: 0.65;
}
.esv2 .hero-media { position: relative; z-index: 1; }
.esv2 .hero-info  { position: relative; z-index: 2; background: linear-gradient(180deg, rgba(16,33,8,0.85), rgba(16,33,8,0.95)); padding: 24px 26px; border-radius: var(--r-lg); }

/* Long-form colony description block */
.esv2 .detail-desc {
  margin: 28px 0 32px;
  padding: 24px 26px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--cream-dim);
}
.esv2 .detail-desc p { margin: 0; }
.esv2 .detail-desc p + p { margin-top: 12px; }

/* ── Ambient photo overlay — left-side soft fade over the aerial map ──
   Photos drift in/out at low opacity, masked diagonally so the aerial
   dominates the right side and the photo dominates the left third. */
.esv2 .hero-ambient {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  -webkit-mask-image: linear-gradient(105deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 33%, rgba(0,0,0,0.6) 58%, rgba(0,0,0,0) 82%);
  mask-image:        linear-gradient(105deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 33%, rgba(0,0,0,0.6) 58%, rgba(0,0,0,0) 82%);
}
.esv2 .hero-ambient__slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 2.8s cubic-bezier(.4,.0,.2,1);
  filter: saturate(0.78) contrast(0.95) brightness(0.85);
}
.esv2 .hero-ambient__slide.is-active { opacity: 0.62; }
.esv2 .hero-ambient video.hero-ambient__slide { display: block; }


/* Date badge on media tile + sort dropdown */
.esv2 .tile-date {
  margin: 6px 0 0;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-light);
  opacity: 0.85;
}
.esv2 .sortbar {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: auto;
  font-family: var(--font-ui);
  font-size: 12px;
}
.esv2 .sort-label {
  color: var(--cream-dim);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
}
.esv2 .sort-select {
  padding: 6px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--cream);
  font-family: var(--font-ui);
  font-size: 13px;
  cursor: pointer;
}
.esv2 .section-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Orphan virtual-collection hero: blurred + dimmed first-item thumb instead of aerial */
.esv2 .hero-aerial-orphan {
  filter: blur(8px) brightness(0.55) saturate(0.85);
  transform: scale(1.1);
}

/* Single-item feature section (one media item shown prominently in detail body) */
.esv2 .detail-single { margin: clamp(20px, 3vw, 32px) 0; }
.esv2 .detail-single .feature { background: #000; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.esv2 .detail-single .feature-frame { position: relative; aspect-ratio: 16/9; }
.esv2 .detail-single .feature-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.esv2 .detail-single .feature-img { width: 100%; height: auto; display: block; }
.esv2 .detail-single .feature-video { width: 100%; aspect-ratio: 16/9; display: block; border: 0; }
.esv2 .detail-single-cap { margin: 14px 0 4px; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--cream); }
.esv2 .detail-single-sub { margin: 0; font-family: var(--font-ui); font-size: 14px; color: var(--cream-dim); opacity: 0.85; }

/* Rich link card with OG image + description */
.esv2 .related-card.related-rich {
  display: grid;
  grid-template-columns: 180px 1fr 36px;
  gap: 16px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color .14s, transform .14s;
  text-decoration: none;
  color: var(--cream);
  align-items: stretch;
}
.esv2 .related-card.related-rich:hover {
  border-color: var(--green-light);
  transform: translateY(-2px);
}
.esv2 .related-card.related-rich .related-img {
  width: 180px;
  height: 110px;
  background-size: cover;
  background-position: center;
  background-color: #000;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.esv2 .related-card.related-rich .related-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  justify-content: center;
}
.esv2 .related-card.related-rich .related-kind {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-light);
}
.esv2 .related-card.related-rich .related-site {
  color: var(--cream-dim);
  font-weight: 500;
}
.esv2 .related-card.related-rich .related-live {
  color: var(--gold, #d4a544);
  font-weight: 600;
}
.esv2 .related-card.related-rich.is-live {
  /* Subtle indicator that this is fetched live (vs. stored OG snapshot) */
  position: relative;
}
.esv2 .related-card.related-rich .related-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  color: var(--cream);
}
.esv2 .related-card.related-rich .related-desc {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.4;
  color: var(--cream-dim);
  opacity: 0.85;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.esv2 .related-card.related-rich .related-go {
  align-self: center;
  color: var(--green-light);
}
@media (max-width: 640px) {
  .esv2 .related-card.related-rich {
    grid-template-columns: 120px 1fr;
  }
  .esv2 .related-card.related-rich .related-img { width: 120px; height: 80px; }
  .esv2 .related-card.related-rich .related-go { display: none; }
}

/* Cloudflare Stream iframe sizing */
.esv2 iframe.feature-video { width: 100%; aspect-ratio: 16/9; display: block; border: 0; border-radius: var(--r-md); }
.esv2 .lb-media iframe.lb-stream-iframe {
  width: min(92vw, 1280px);
  height: min(72vh, 720px);
  border: 0;
  border-radius: var(--r-md);
  background: #000;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
/* On portrait videos (phones), reverse the proportions */
@media (max-aspect-ratio: 1/1) {
  .esv2 .lb-media iframe.lb-stream-iframe {
    width: min(96vw, 480px);
    height: min(75vh, 854px);
  }
}

/* Portal-rendered lightbox: gets its own .esv2 wrapper so design tokens apply */
.esv2-portal { position: fixed; inset: 0; z-index: 2147483600; pointer-events: none; }
.esv2-portal .lightbox { pointer-events: auto; }

/* Date + brand pills row at bottom of tile body */
.esv2 .tile-meta-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin: 8px 0 0; min-height: 18px;
}
.esv2 .tile-meta-row .tile-date {
  margin: 0; /* override the standalone .tile-date margin */
}
.esv2 .tile-date-spacer { flex: 0 0 1px; }
.esv2 .tile-brands {
  display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end;
}
.esv2 .tile-brand {
  font-family: var(--font-ui);
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 9px;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: #fff; line-height: 1.4;
}
.esv2 .tile-brand.brand-reflect-o-ray { background: #1565c0; }
.esv2 .tile-brand.brand-faroex        { background: #f5c518; color: #000; }
.esv2 .tile-brand.brand-omega-ii      { background: #6b7280; }
.esv2 .tile-brand.brand-mgh           { background: #dc2626; }

/* ───────── Like button (session incrementor, never "on") ─────────
   Override the older .likebtn.on { color: red } styling so the button stays
   outline-only regardless of state. Pulse animation gives tactile feedback. */
.esv2 .likebtn.on,
.esv2 .likebtn.on svg,
.esv2 .lb-actions .likebtn.on { color: var(--cream); fill: none !important; stroke: currentColor; border-color: rgba(245,241,230,0.2); }
.esv2 .likebtn.is-pulsing { animation: es-like-pulse 320ms ease-out; }
.esv2 .likebtn.is-pulsing .like-n { animation: es-like-bump 320ms ease-out; }
@keyframes es-like-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.25); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
@keyframes es-like-bump {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}


/* ───── Apply dark theme to ALL pages that host the React installations app ─────
   Modern :has() selector — every install page has .esv2 in its content. */
body:has(.esv2),
body:has(.esv2) #page,
body:has(.esv2) .site-content,
body:has(.esv2) .content-area,
body:has(.esv2) .site-main,
body:has(.esv2) .entry-content,
body:has(.esv2) article.page,
body:has(.esv2) .inside-article,
body:has(.esv2) .inside-content,
body:has(.esv2) #primary,
body:has(.esv2) .site,
body:has(.esv2) .hfeed {
  background: transparent !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
body:has(.esv2) {
  background:
    radial-gradient(1200px 600px at 78% -8%, rgba(76, 175, 53, 0.08), transparent 60%),
    linear-gradient(180deg, #16290f 0%, #102108 100%) !important;
  background-attachment: fixed !important;
}

/* ───── Minimal mobile polish — no risky bleeds, no absolute hero ─────
   Just: 1-per-row cards on small screens, non-sticky filter bar. */
@media (max-width: 880px) {
  .esv2 .mfilter { position: static !important; padding: 8px 0 14px !important; margin: 0 0 12px !important; }
}
@media (max-width: 620px) {
  .esv2 .grid       { grid-template-columns: 1fr !important; gap: 14px !important; }
  .esv2 .mwall      { grid-template-columns: 1fr !important; gap: 14px !important; }
  .esv2 .detail-grid{ grid-template-columns: 1fr !important; gap: 14px !important; }
}

/* ═══════════ Lightbox: full rebuild after Codex cleanup wiped CSS ═══════════
   This single block restores everything we built recently:
   - Single-row top bar [♡ Share Counter] [X] with matched pill heights
   - Title row below the bar — fades after 5s
   - Edge-to-edge mobile player + transparent backdrop
   - Persistent arrow buttons w/ sticky-tap fix
*/

/* Lightbox shell — full viewport, simple stage layout */
.esv2 .lightbox { min-height: 100dvh; }
.esv2 .lightbox iframe,
.esv2 .lightbox .lb-frame,
.esv2 .lightbox .lb-stream-iframe,
.esv2 .lightbox .lb-media,
.esv2 .lightbox .lb-media img,
.esv2 .lightbox .lb-media video,
.esv2 .lightbox .lb-center,
.esv2 .lightbox .lb-stage,
.esv2 .lightbox .lb-top { border: 0 !important; outline: 0 !important; }
.esv2 .lightbox iframe { display: block !important; background: transparent !important; }

/* lb-top: column with bar (row 1) + info (row 2) */
.esv2 .lb-top {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: 100%;
}
.esv2 .lb-top-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
}
.esv2 .lb-top-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap;
}

/* All four top-bar pills (Like, Share, Counter, Close) — uniform pill style */
.esv2 .lb-top-actions .likebtn,
.esv2 .lb-top-actions .lb-share,
.esv2 .lb-top-actions .lb-counter,
.esv2 .lb-close-inline {
  height: 32px !important;
  padding: 0 12px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--font-ui);
  font-size: 12px !important;
  font-weight: 700;
  color: var(--cream) !important;
  background: rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(245,241,230,0.18) !important;
  border-radius: var(--r-pill) !important;
  box-sizing: border-box !important;
  cursor: pointer;
}
.esv2 .lb-top-actions .likebtn svg,
.esv2 .lb-top-actions .lb-share svg,
.esv2 .lb-close-inline svg {
  width: 14px !important; height: 14px !important;
  stroke: var(--cream); fill: none; stroke-width: 2;
}
.esv2 .lb-counter {
  position: static !important; transform: none !important;
  top: auto !important; bottom: auto !important; left: auto !important; right: auto !important;
  margin: 0 !important;
}

/* Title info — fades only */
.esv2 .lb-top-info {
  text-align: left !important;
  margin: 0 !important;
  transition: opacity 380ms ease, transform 380ms ease;
}
.esv2 .lightbox.is-title-hidden .lb-top-info {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}

/* Buttons + arrows stay always visible */
.esv2 .lightbox .lb-top-actions,
.esv2 .lightbox .lb-close-inline,
.esv2 .lightbox .lb-nav {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ───── Mobile ───── */
@media (max-width: 700px) {
  /* Top bar: no gradient, just pills floating */
  .esv2 .lb-top {
    background: transparent !important;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 16px !important;
  }
  /* Slightly tighter pill padding on small screens */
  .esv2 .lb-top-actions .likebtn,
  .esv2 .lb-top-actions .lb-share,
  .esv2 .lb-top-actions .lb-counter,
  .esv2 .lb-close-inline {
    height: 30px !important;
    padding: 0 11px !important;
    font-size: 11.5px !important;
  }

  /* Stage fills viewport, iframe fills stage */
  .esv2 .lb-stage {
    grid-template-columns: 1fr !important;
    padding: 0 !important;
    height: 100dvh;
    position: relative;
  }
  .esv2 .lb-center { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
  .esv2 .lb-media { width: 100%; max-height: 100dvh; }
  .esv2 .lb-media iframe, .esv2 .lb-stream-iframe { width: 100% !important; min-height: 100dvh !important; }
  .esv2 .lb-frame, .esv2 .lb-media img, .esv2 .lb-media video, .esv2 .lb-stream-iframe {
    border-radius: 0 !important; box-shadow: none !important;
  }

  /* Nav arrows: floating, semi-transparent, padded in from edge, no sticky-tap */
  .esv2 .lb-side { display: contents; }
  .esv2 .lb-nav {
    position: absolute !important;
    top: 50%; transform: translateY(-50%);
    z-index: 5;
    width: 40px !important; height: 40px !important;
    background: rgba(0,0,0,0.35) !important;
    color: var(--cream) !important;
    border: 1px solid rgba(245,241,230,0.14) !important;
    border-radius: 50% !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .esv2 .lb-prev { left: 12px; }
  .esv2 .lb-next { right: 12px; }
  .esv2 .lb-nav svg { width: 20px !important; height: 20px !important; stroke: var(--cream) !important; fill: none !important; }
  .esv2 .lb-nav:hover, .esv2 .lb-nav:focus, .esv2 .lb-nav:focus-visible {
    background: rgba(0,0,0,0.35) !important; color: var(--cream) !important;
  }
  .esv2 .lb-nav:hover svg, .esv2 .lb-nav:focus svg, .esv2 .lb-nav:focus-visible svg {
    stroke: var(--cream) !important;
  }
  .esv2 .lb-nav:active { background: rgba(0,0,0,0.55) !important; }
  .esv2 .lb-nav:active svg { stroke: var(--cream) !important; }
}

/* ───── Make lb-top OVERLAY the player on mobile (don't push it down) ─────
   Restores the "title floats over the media" behavior. Player fills the
   whole viewport; title block sits on top, then fades to invisible after 5s. */
@media (max-width: 700px) {
  .esv2 .lightbox { position: relative; }
  .esv2 .lb-top {
    position: absolute !important;
    top: 0; left: 0; right: 0;
    z-index: 10 !important;
  }
}

/* ═══════════ MOBILE DETAIL GUTTER + HERO EDGE FIX ═══════════
   Keep the page gutter for content/cards, but let only the hero break out. */
@media (max-width: 880px) {
  .esv2 .detail {
    --page-gutter: 18px;
  }

  .esv2 .detail .wrap {
    padding-left: var(--page-gutter) !important;
    padding-right: var(--page-gutter) !important;
  }

  .esv2 .detail-main {
    min-width: 0 !important;
  }
}

@media (max-width: 700px) {
  .esv2 .detail-main .hero {
    margin-left: calc(-1 * var(--page-gutter)) !important;
    margin-right: calc(-1 * var(--page-gutter)) !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 0 0 20px 20px !important;
  }

  .esv2 .detail-desc,
  .esv2 .section-head,
  .esv2 .detail-grid,
  .esv2 .related,
  .esv2 .feature,
  .esv2 .feature-cap {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ═══════════ FINAL INSTALL DETAIL HERO OVERRIDES ═══════════
   Restore a map-first hero with no ambient slideshow, mobile full-bleed,
   desktop left-aligned content, and the back button split by breakpoint. */
.esv2 .detail {
  padding-top: var(--topbar-h) !important;
}

.esv2 .detail-shell {
  gap: clamp(18px, 2.6vw, 32px) !important;
}

.esv2 .detail .detail-rail {
  position: sticky !important;
  top: calc(var(--topbar-h) + 8px) !important;
  align-self: start !important;
}

.esv2 .detail .rail-back {
  display: inline-flex !important;
  position: static !important;
  margin: 0 0 18px !important;
  z-index: auto !important;
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

.esv2 .detail .back-mobile {
  display: none !important;
  position: absolute !important;
  top: 12px !important;
  left: 16px !important;
  z-index: 5 !important;
  margin: 0 !important;
  background: rgba(12,23,7,0.74) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-color: rgba(245,241,230,0.22) !important;
}

.esv2 .detail .rail-list {
  max-height: calc(100vh - var(--topbar-h) - 116px) !important;
}

.esv2 .detail .hero {
  position: relative !important;
  min-height: 520px !important;
  margin: 0 0 clamp(28px, 4vw, 44px) !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
}

.esv2 .detail .hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg,
      rgba(7,16,4,0.12) 0%,
      rgba(7,16,4,0.18) 22%,
      rgba(7,16,4,0.46) 66%,
      rgba(7,16,4,0.82) 100%) !important;
}

.esv2 .detail .hero-aerial {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  opacity: 0.9 !important;
  background-size: cover !important;
  background-position: center !important;
  filter: saturate(0.96) contrast(1.02) brightness(0.98) !important;
}

.esv2 .detail .hero-ambient {
  display: none !important;
}

.esv2 .detail .hero-info {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  margin-left: 0 !important;
  max-width: min(54%, 580px) !important;
  min-height: inherit !important;
  padding: 30px 34px 34px !important;
  background: none !important;
  border-radius: 0 !important;
}

.esv2 .detail .hero-info .hero-facts,
.esv2 .detail .hero-info .hero-actions {
  max-width: min(620px, 58vw) !important;
}

@media (max-width: 880px) {
  .esv2 .detail .wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .esv2 .detail-shell {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding-bottom: 48px !important;
  }

  .esv2 .detail .detail-rail,
  .esv2 .detail .rail-back {
    display: none !important;
  }

  .esv2 .detail .back-mobile {
    display: inline-flex !important;
  }

  .esv2 .detail .hero {
    min-height: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 0 22px !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 0 20px 20px !important;
  }

  .esv2 .detail .hero::before {
    background:
      linear-gradient(180deg,
        rgba(7,16,4,0.08) 0%,
        rgba(7,16,4,0.16) 20%,
        rgba(7,16,4,0.46) 54%,
        rgba(7,16,4,0.92) 100%) !important;
  }

  .esv2 .detail .hero-info {
    max-width: 100% !important;
    padding: 82px 18px 22px !important;
  }
}

/* ───── Keep lightbox position:fixed — don't break full-viewport coverage ─────
   Earlier I set .lightbox { position: relative } which overrode the original
   position:fixed; inset:0 and made the lightbox collapse to content width.
   .lb-top { position: absolute } already positions relative to the fixed parent. */
.esv2 .lightbox {
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 100dvh;
}

/* ───── Restore: .detail uses window scroll so iOS chrome can auto-hide ─────
   The original rule (line 274) makes .detail position:fixed with its own
   overflow-y:auto — a nested scroll container that iOS Safari doesn't
   recognize for chrome auto-hide. The JSX no longer renders Detail as an
   overlay (gallery is unmounted when openCol is set), so .detail can be
   normal page flow. */
.esv2 .detail {
  position: static !important;
  inset: auto !important;
  overflow: visible !important;
  padding-top: 0 !important;
  min-height: 100dvh;
}

/* And re-pad the back button on mobile so it clears the WP nav */
@media (max-width: 700px) {
  .esv2 .detail .back { margin-top: 84px !important; }
}

/* ───── Mobile hero: full-bleed map at top, title overlay at bottom ─────
   - .detail: position:relative (NOT fixed) — keeps window scroll for iOS chrome
   - Back button: absolute over the top-left of the hero (clears WP nav at ~80px)
   - Hero: breaks out of wrap padding via negative margins, 4:5 aspect strip
   - Map: full opacity, edge to edge, sits behind everything
   - Title block: absolute at bottom of hero, gradient bleeds into page bg
*/
@media (max-width: 700px) {
  /* relative (positioned ancestor) — but NOT fixed, NOT overflow:auto.
     Window still scrolls; iOS chrome still auto-hides. */
  .esv2 .detail {
    position: relative !important;
    inset: auto !important;
    overflow: visible !important;
    padding-top: 0 !important;
    min-height: 100dvh;
  }

  /* Back button overlays the top-left of the map, sitting just below WP nav */
  .esv2 .detail .back {
    position: absolute !important;
    top: 80px !important;
    left: 14px !important;
    z-index: 5 !important;
    margin: 0 !important;
    background: rgba(12,23,7,0.66) !important;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border-color: rgba(245,241,230,0.22) !important;
  }

  /* Hero: edge-to-edge full-bleed, tall enough to dominate the top of the page */
  .esv2 .detail-main .hero {
    position: relative;
    margin: 0 calc(50% - 50vw) 16px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 5 !important;        /* tall strip; map dominates */
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  /* Map fills the entire hero box, full opacity */
  .esv2 .hero-aerial {
    position: absolute !important;
    inset: 0 !important;
    opacity: 1 !important;
    background-size: cover !important;
    background-position: center !important;
  }

  /* Ambient photo overlay would compete with the map — hide on mobile */
  .esv2 .hero-ambient { display: none !important; }

  /* Title block overlays the BOTTOM of the hero; gradient bleeds into the dark page bg */
  .esv2 .hero-info {
    position: absolute !important;
    left: 0; right: 0; bottom: 0;
    z-index: 4;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(8,14,6,0.45) 28%,
      rgba(12,23,7,0.90) 65%,
      rgba(16,33,8,1) 100%) !important;
    padding: 80px 18px 20px !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
  }
  .esv2 .hero-name   { font-size: 26px !important; line-height: 1.06 !important; }
  .esv2 .hero-region { margin-top: 6px !important; }
  .esv2 .hero-blurb  { font-size: 14px !important; margin-top: 10px !important; }
  .esv2 .hero-facts  { margin-top: 12px !important; gap: 8px !important; }
  .esv2 .hero-actions{ margin-top: 12px !important; }
  .esv2 .hero-share  { padding: 9px 16px !important; font-size: 13px !important; }
  .esv2 .hero-info .tagrow { margin: 0 0 10px !important; }
}

/* ───── Kill horizontal overflow that makes the page width "bounce" on mobile ─────
   Common cause: hero with width:100vw + negative margins can introduce a
   horizontal scroll if a child overflows. Clamp the body/main. */
html, body { overflow-x: hidden; }
.esv2, .esv2 .wrap, .esv2 .detail, .esv2 .detail-main, .esv2 main { max-width: 100vw; overflow-x: clip; }

/* ───── Mobile hero: more breathing room, softer gradient ───── */
@media (max-width: 700px) {
  /* Back button: nudge UP a touch so it doesn't crowd the title pills */
  .esv2 .detail .back { top: 70px !important; }

  /* Hero a bit taller so back button + title block have visible separation */
  .esv2 .detail-main .hero { aspect-ratio: 3 / 4 !important; }

  /* Softer gradient — map fades out more gradually so more aerial shows */
  .esv2 .hero-info {
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(8,14,6,0.10) 18%,
      rgba(8,14,6,0.55) 48%,
      rgba(12,23,7,0.94) 82%,
      rgba(16,33,8,1) 100%) !important;
    padding: 130px 18px 22px !important;   /* push title content lower so it sits well clear of back btn */
  }
}

/* ───── Restore desktop sidebar stickiness ─────
   overflow-x:clip on .detail/.wrap broke position:sticky on .detail-rail.
   Sticky requires every ancestor to have overflow:visible. Limit the bounce
   fix to html/body only and let inner containers stay overflow:visible. */
.esv2,
.esv2 .wrap,
.esv2 .detail,
.esv2 .detail-main,
.esv2 main {
  overflow: visible !important;
  max-width: none !important;
}
/* html + body keep overflow-x hidden to prevent horizontal page scroll from the hero bleed */
html, body { overflow-x: hidden; }

/* Explicitly re-state .detail-rail sticky in case the wipe nuked it */
@media (min-width: 881px) {
  .esv2 .detail-rail { position: sticky !important; top: calc(var(--topbar-h, 0px) + 18px) !important; align-self: start; }
}

/* ───── Desktop hero: map as a prominent base layer ─────
   Bump map opacity from 0.65 → 0.92 so the aerial reads clearly.
   This sets up the next step (overlay images at 1/2 or 3/4 with gradient). */
@media (min-width: 881px) {
  .esv2 .hero {
    min-height: 520px !important;          /* taller so the map breathes */
  }
  .esv2 .hero-aerial {
    opacity: 0.92 !important;
    background-size: cover !important;
    background-position: center !important;
  }
  /* Soften the hero-info gradient so it doesn't crush the map underneath */
  .esv2 .hero-info {
    background: linear-gradient(180deg,
      rgba(16,33,8,0.30) 0%,
      rgba(16,33,8,0.80) 50%,
      rgba(12,23,7,0.95) 100%) !important;
  }
}

/* ───── Remove the body overflow-x that was breaking sticky WP nav ─────
   overflow-x:hidden on html/body makes them scroll containers in iOS Safari,
   which breaks position:sticky on the GeneratePress nav (#masthead).
   The hero's negative-margin bleed trick is exact (no actual overflow), so
   we don't need overflow-x clamping at all. */
html, body { overflow-x: visible !important; }

/* ───── Mobile hero: cleaner map-to-title transition ─────
   - Hero-info covers ONLY the bottom 55% of hero (map shows in top 45%)
   - Gradient: transparent at top → progressive dark fade
   - Title content sits near the top of the overlay (not pushed to bottom)
*/
@media (max-width: 700px) {
  .esv2 .detail-main .hero {
    aspect-ratio: 4 / 5 !important;       /* a bit taller so there's room */
  }
  .esv2 .hero-info {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 45% !important;                  /* covers bottom 55% — map shows above */
    bottom: 0 !important;
    z-index: 4 !important;
    padding: 50px 18px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(8,14,6,0.35) 18%,
      rgba(8,14,6,0.78) 45%,
      rgba(12,23,7,0.95) 72%,
      rgba(16,33,8,1) 100%) !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
  }
}

/* ───── Mobile hero: text overlays the map (matches the trash-folder mockup) ─────
   - Map fills the entire hero (not just top portion)
   - Title content sits in the bottom half, OVER the map, with a subtle
     vignette gradient + text-shadow so it stays readable
   - Hero uses exact-math bleed (no 100vw — eliminates sub-pixel overflow)
*/
@media (max-width: 700px) {
  .esv2 .detail-main .hero {
    /* Bleed the hero past wrap padding using exact math — no 100vw */
    margin: 0 calc(-1 * var(--page-gutter)) 16px !important;
    width: calc(100% + 2 * var(--page-gutter)) !important;
    max-width: none !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 5 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* Map fills entire hero, full opacity */
  .esv2 .hero-aerial {
    position: absolute !important;
    inset: 0 !important;
    opacity: 1 !important;
    background-size: cover !important;
    background-position: center !important;
  }

  /* Title content overlays the BOTTOM 55% of the hero ON TOP of the map.
     Subtle vignette — map still visible, text still readable. */
  .esv2 .hero-info {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 38% !important;
    bottom: 0 !important;
    z-index: 4 !important;
    padding: 40px 18px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(8,14,6,0.15) 25%,
      rgba(8,14,6,0.50) 60%,
      rgba(12,23,7,0.78) 100%) !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
  }

  /* Text-shadow for readability over any map */
  .esv2 .hero-name,
  .esv2 .hero-region,
  .esv2 .hero-blurb {
    text-shadow: 0 1px 8px rgba(0,0,0,0.7);
  }
  .esv2 .hero-info .tagrow .tag {
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  }
}

/* ═══════════ DEFINITIVE MOBILE HERO RULES (wins cascade — last block) ═══════════ */
@media (max-width: 700px) {

  /* Hero: edge-to-edge via exact-math negative margin */
  .esv2 .detail-main .hero {
    position: relative !important;
    margin: 0 calc(-1 * var(--page-gutter)) 16px !important;
    width: calc(100% + 2 * var(--page-gutter)) !important;
    max-width: none !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 5 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  /* Map: edge-to-edge, fully visible */
  .esv2 .hero-aerial {
    position: absolute !important;
    inset: 0 !important;
    opacity: 1 !important;
    background-size: cover !important;
    background-position: center !important;
  }

  /* Back button: raised to top:50px so it sits high (clears WP nav by a few px) */
  .esv2 .detail .back {
    position: absolute !important;
    top: 50px !important;
    left: 14px !important;
    z-index: 5 !important;
    margin: 0 !important;
    background: rgba(12,23,7,0.72) !important;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-color: rgba(245,241,230,0.22) !important;
  }

  /* Title content overlays bottom of map. Strong gradient at bottom hides
     Google Maps watermarks/attribution and bleeds into page bg. */
  .esv2 .hero-info {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 30% !important;             /* covers bottom 70% — Reflect-O-Ray pill higher */
    bottom: 0 !important;
    z-index: 4 !important;
    padding: 60px 18px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(8,14,6,0.20) 18%,
      rgba(8,14,6,0.65) 45%,
      rgba(12,23,7,0.95) 75%,
      #102108 100%) !important;             /* fully opaque at bottom — hides map watermarks */
    -webkit-mask-image: none !important;
            mask-image: none !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
  }

  /* Text readability */
  .esv2 .hero-name,
  .esv2 .hero-region,
  .esv2 .hero-blurb {
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
  }
  .esv2 .hero-info .tagrow .tag {
    box-shadow: 0 2px 8px rgba(0,0,0,0.45);
  }
}

/* ═══════════ FINAL FINAL MOBILE DETAIL TUNE-UP ═══════════
   Keep hero full-bleed, but restore comfortable gutters below it and
   pull the text block higher with a shorter hero. */
@media (max-width: 700px) {
  .esv2 .detail {
    --page-gutter: 18px;
  }

  .esv2 .detail .wrap {
    padding-left: var(--page-gutter) !important;
    padding-right: var(--page-gutter) !important;
  }

  .esv2 .detail-main .hero {
    margin-left: calc(-1 * var(--page-gutter)) !important;
    margin-right: calc(-1 * var(--page-gutter)) !important;
    width: auto !important;
    aspect-ratio: 1 / 1.06 !important;
    margin-bottom: 18px !important;
    border-radius: 0 0 18px 18px !important;
  }

  .esv2 .detail .back-mobile {
    top: 14px !important;
    left: 14px !important;
  }

  .esv2 .detail .hero-info {
    top: 18% !important;
    bottom: 0 !important;
    padding: 82px 18px 24px !important;
    justify-content: flex-start !important;
    background: linear-gradient(180deg,
      rgba(8,14,6,0) 0%,
      rgba(8,14,6,0.14) 18%,
      rgba(8,14,6,0.52) 42%,
      rgba(12,23,7,0.84) 72%,
      #102108 100%) !important;
  }

  .esv2 .detail .hero-name {
    font-size: 24px !important;
    line-height: 1.04 !important;
  }

  .esv2 .detail .hero-region {
    margin-top: 6px !important;
  }

  .esv2 .detail .hero-blurb {
    margin-top: 12px !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
  }

  .esv2 .detail .hero-facts {
    margin-top: 14px !important;
    gap: 8px !important;
  }

  .esv2 .detail .fact {
    padding: 10px 6px !important;
  }

  .esv2 .detail .hero-actions {
    margin-top: 14px !important;
  }

  .esv2 .detail-desc {
    margin: 0 0 20px !important;
    padding: 20px 18px !important;
    border-radius: 18px !important;
  }

  .esv2 .section-head {
    margin: 0 !important;
    padding-top: 14px !important;
  }

  .esv2 .section-head h3,
  .esv2 .sortbar,
  .esv2 .sortctl,
  .esv2 .sortctl-lbl,
  .esv2 .sortctl button,
  .esv2 .sort-select {
    max-width: 100% !important;
  }

  .esv2 .detail-grid {
    padding-top: 14px !important;
    gap: 14px !important;
  }
}

/* ═══════════ MOBILE HERO FADE POLISH ═══════════
   Keep the mobile hero layout as-is, but make the aerial fade land on the
   same green as the page background instead of drifting into a muddy near-black. */
@media (max-width: 700px) {
  .esv2 .detail-main .hero {
    background: var(--bg-2) !important;
  }

  .esv2 .detail .hero-info {
    background: linear-gradient(180deg,
      rgba(8,14,6,0) 0%,
      rgba(8,14,6,0.08) 10%,
      rgba(8,14,6,0.24) 24%,
      rgba(8,14,6,0.54) 42%,
      rgba(12,23,7,0.86) 60%,
      var(--bg-2) 76%,
      var(--bg-2) 100%) !important;
  }
}

/* ═══════════ DESKTOP HERO FADE POLISH ═══════════
   Let the desktop map hero dissolve into the page green instead of reading
   like a rounded media card with a visible lower edge. */
@media (min-width: 881px) {
  .esv2 .detail .hero {
    border-radius: 0 !important;
    background: var(--bg) !important;
  }

  .esv2 .detail .hero::before {
    background:
      linear-gradient(180deg,
        rgba(7,16,4,0.03) 0%,
        rgba(7,16,4,0.10) 14%,
        rgba(7,16,4,0.24) 30%,
        rgba(7,16,4,0.46) 50%,
        rgba(7,16,4,0.72) 68%,
        rgba(7,16,4,0.92) 82%,
        var(--bg) 92%,
        var(--bg) 100%) !important;
  }
}