/* ==========================================================================
   The Greene Escape — 985 Greene Avenue, Brooklyn
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand */
  --green-900: #0C2A1E;
  --green-800: #123726;
  --green-700: #1B4D39;
  --green-600: #2A6B4F;
  --green-300: #8FC0A9;

  --brass-600: #96762F;
  --brass-500: #B08D3F;
  --brass-400: #C9A85C;
  --brass-300: #E0C98D;

  /* Neutrals */
  --ivory:  #FBF8F3;
  --sand:   #F2ECE1;
  --sand-2: #E7DECD;
  --ink:    #14201A;
  --muted:  #5E6E65;
  --line:   #DED5C6;

  /* Roles */
  --bg:        var(--ivory);
  --bg-tint:   var(--sand);
  --surface:   #FFFFFF;
  --text:      var(--ink);
  --text-soft: var(--muted);
  --border:    var(--line);
  --accent:    var(--brass-600);

  /* Type */
  --display: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --body: "Jost", ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Scale */
  --shell: 1240px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --section-y: clamp(4.5rem, 10vw, 9rem);
  --radius: 3px;

  --shadow-sm: 0 1px 2px rgba(12, 42, 30, .05), 0 4px 16px rgba(12, 42, 30, .05);
  --shadow-md: 0 8px 40px rgba(12, 42, 30, .11);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  /* The page must never pan sideways. Clipping body alone is not enough:
     on iOS the scrolling element is html, so body-only clipping leaks and
     the page rubber-bands horizontally on a phone while looking fine in
     Chrome. hidden first as the fallback, then clip — clip does the same
     job without turning the element into a scroll container, which is what
     silently breaks position: sticky. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--brass-500);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--green-900);
  color: var(--ivory);
  padding: .85rem 1.4rem;
  text-decoration: none;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- 3. Typography ---------- */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.005em;
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--body);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.1rem;
}
.eyebrow-light { color: var(--brass-300); }

.section-title {
  font-size: clamp(2.15rem, 1.4rem + 3.1vw, 3.9rem);
  margin-bottom: 1.4rem;
}
.section-title em { font-style: italic; color: var(--accent); }

.section-lede {
  font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
  color: var(--text-soft);
  max-width: 56ch;
}

p + p { margin-top: 1.1rem; }

.inline-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--brass-400);
  text-underline-offset: 4px;
  transition: color .2s var(--ease);
}
.inline-link:hover { color: var(--brass-300); }

/* ---------- 4. Layout ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell-narrow { max-width: 860px; }

.section { padding-block: var(--section-y); }

.section-head { max-width: 62ch; margin-bottom: clamp(2.75rem, 6vw, 4.5rem); }
.section-head .section-lede { margin-top: 1.25rem; }

.section-tint { background: var(--bg-tint); }

.section-dark {
  background: var(--green-900);
  color: var(--ivory);
}
.section-dark .section-lede { color: rgba(251, 248, 243, .72); }
.section-dark .section-title em { color: var(--brass-300); }

/* ---------- 5. Buttons ---------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.75rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { --btn-bg: var(--green-800); --btn-fg: var(--ivory); --btn-bd: var(--green-800); }
.btn-primary:hover { --btn-bg: var(--brass-600); --btn-bd: var(--brass-600); }

/* On green backgrounds the green button all but vanishes — go brass instead. */
.section-dark .btn-primary,
.stats .btn-primary {
  --btn-bg: var(--brass-400);
  --btn-fg: var(--green-900);
  --btn-bd: var(--brass-400);
}
.section-dark .btn-primary:hover,
.stats .btn-primary:hover {
  --btn-bg: var(--brass-300);
  --btn-bd: var(--brass-300);
}

.btn-outline { --btn-fg: var(--green-800); --btn-bd: var(--border); }
.btn-outline:hover { --btn-bg: var(--green-800); --btn-fg: var(--ivory); --btn-bd: var(--green-800); }

.btn-ghost { --btn-fg: var(--ivory); --btn-bd: rgba(251,248,243,.45); }
.btn-ghost:hover { --btn-bg: var(--ivory); --btn-fg: var(--green-900); --btn-bd: var(--ivory); }

.btn-lg { padding: 1.05rem 2.4rem; font-size: .82rem; }
.btn-block { display: flex; width: 100%; }

/* ---------- 6. Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding-block: 1.35rem;
  transition: padding .3s var(--ease), background-color .3s var(--ease),
              box-shadow .3s var(--ease);
}
.site-header.is-stuck {
  padding-block: .7rem;
  background: rgba(251, 248, 243, .93);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--border);
}

.scroll-progress {
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--brass-400);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--ivory);
  transition: color .3s var(--ease);
}
.site-header.is-stuck .brand { color: var(--green-900); }

.brand-mark { display: block; flex: none; width: auto; }
/* The artwork is detailed, so it needs real height to read as a mark rather
   than as noise. Shrinks once the header condenses on scroll. */
.brand-mark img {
  display: block;
  height: 62px;
  width: auto;
  transition: height .3s var(--ease);
}
.site-header.is-stuck .brand-mark img { height: 46px; }

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: var(--display);
  font-size: 1.42rem;
  font-weight: 500;
  letter-spacing: .01em;
}
.brand-sub {
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: .68;
}

.site-nav { display: flex; align-items: center; gap: 2.25rem; }
.site-nav ul {
  display: flex;
  gap: 1.9rem;
  list-style: none;
  padding: 0;
}
.site-nav a {
  position: relative;
  color: var(--ivory);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: .35rem;
  transition: color .25s var(--ease);
}
.site-header.is-stuck .site-nav a { color: var(--green-900); }

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--brass-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.site-nav a:hover::after,
.site-nav a.is-active::after { transform: scaleX(1); }
.site-nav a.is-active { color: var(--brass-300); }
.site-header.is-stuck .site-nav a.is-active { color: var(--brass-600); }

.nav-cta { padding: .7rem 1.4rem; font-size: .72rem; }
.site-header:not(.is-stuck) .nav-cta {
  background: transparent;
  border-color: rgba(251, 248, 243, .5);
  color: var(--ivory);
}
.site-header:not(.is-stuck) .nav-cta:hover {
  background: var(--ivory);
  border-color: var(--ivory);
  color: var(--green-900);
}

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 11px 9px;
  flex-direction: column;
  justify-content: space-between;
}
.nav-toggle span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--ivory);
  transition: transform .3s var(--ease), opacity .2s var(--ease),
              background-color .3s var(--ease);
}
.site-header.is-stuck .nav-toggle span { background: var(--green-900); }
.nav-toggle[aria-expanded="true"] span { background: var(--green-900); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); }

/* --- Inner pages (faq.html) ---
   The header is fixed and, on the homepage, sits over a dark hero — so its
   default state is light-on-dark and it only turns solid once scrolled. An
   inner page has no hero underneath it, so the header takes its scrolled
   appearance from the start and the first section clears the fixed bar. */
.page-inner .site-header {
  padding-block: .7rem;
  background: rgba(251, 248, 243, .93);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--border);
}
.page-inner .site-header .brand,
.page-inner .site-header .site-nav a { color: var(--green-900); }
.page-inner .site-header .nav-toggle span { background: var(--green-900); }
.page-inner .site-header .site-nav a[aria-current="page"] { color: var(--accent); }

.page-top { padding-top: calc(var(--section-y) + 4.5rem); }

.faq-back {
  padding-bottom: var(--section-y);
  display: flex;
  justify-content: center;
}

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: 8rem clamp(4rem, 9vw, 7rem);
  isolation: isolate;
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--green-900) url("../images/hero.jpg") center 42% / cover no-repeat;
  animation: heroDrift 26s var(--ease) forwards;
}
@keyframes heroDrift {
  from { transform: scale(1.09); }
  to   { transform: scale(1); }
}

.hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* The room is mostly white marble and white ceiling, so the scrim has to do
     real work to keep the ivory headline readable. */
  background:
    linear-gradient(180deg, rgba(10,32,22,.62) 0%, rgba(10,32,22,.22) 34%, rgba(10,32,22,.82) 94%),
    linear-gradient(100deg, rgba(10,32,22,.91) 0%, rgba(10,32,22,.72) 43%, rgba(10,32,22,.14) 76%);
}

.hero-inner { position: relative; max-width: 44rem; margin-left: max(0px, calc((100vw - var(--shell)) / 2)); }

.hero-reel {
  position: absolute;
  z-index: 1;
  top: clamp(7.5rem, 15vh, 10rem);
  right: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
  width: clamp(15rem, 25vw, 22rem);
  height: min(62vh, 38rem);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(251,248,243,.45);
  border-radius: 999px 999px 4px 4px;
  background: var(--green-900);
  box-shadow: 0 24px 70px rgba(4,16,10,.42);
}
.hero-reel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(5,18,12,.68));
}
.hero-reel video { width: 100%; height: 100%; object-fit: cover; }
.hero-reel-label {
  position: absolute;
  z-index: 2;
  left: 1.25rem;
  bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--ivory);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero-reel-label span { width: .42rem; height: .42rem; border-radius: 50%; background: var(--brass-300); box-shadow: 0 0 0 5px rgba(224,201,141,.18); }
.hero-video-toggle {
  position: absolute;
  z-index: 3;
  right: 1rem;
  bottom: .85rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(251,248,243,.55);
  border-radius: 50%;
  background: rgba(10,32,22,.42);
  backdrop-filter: blur(8px);
}
.pause-icon::before,
.pause-icon::after { content: ""; position: absolute; top: .78rem; width: 2px; height: .85rem; background: var(--ivory); }
.pause-icon::before { left: 1rem; }
.pause-icon::after { right: 1rem; }
.hero-video-toggle.is-paused .pause-icon::before { top: .72rem; left: 1rem; width: 0; height: 0; border-top: .48rem solid transparent; border-bottom: .48rem solid transparent; border-left: .72rem solid var(--ivory); background: transparent; }
.hero-video-toggle.is-paused .pause-icon::after { display: none; }

.hero-title {
  font-size: clamp(3.4rem, 1.4rem + 8.6vw, 8rem);
  font-weight: 400;
  line-height: .94;
  color: var(--ivory);
  margin-bottom: 1.6rem;
}
.hero-title em {
  display: block;
  font-style: italic;
  color: var(--brass-300);
}

.hero-lede {
  font-size: clamp(1.05rem, .97rem + .4vw, 1.28rem);
  color: rgba(251, 248, 243, .88);
  max-width: 40ch;
  margin-bottom: 2.5rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; }

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  translate: -50% 0;
  width: 1px;
  height: 54px;
  overflow: hidden;
  background: rgba(251, 248, 243, .28);
}
.hero-scroll span {
  display: block;
  width: 100%;
  height: 40%;
  background: var(--brass-300);
  animation: scrollHint 2.1s var(--ease) infinite;
}
@keyframes scrollHint {
  0%   { transform: translateY(-100%); }
  60%, 100% { transform: translateY(250%); }
}

/* ---------- 8. Stats ---------- */
.stats {
  background: var(--green-900);
  color: var(--ivory);
  padding-block: clamp(2.75rem, 5vw, 3.75rem);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(224, 201, 141, .22);
  border-block: 1px solid rgba(224, 201, 141, .22);
}
.stat {
  background: var(--green-900);
  padding: 1.6rem 1rem;
  text-align: center;
}
.stat-num {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.4rem);
  line-height: 1;
  color: var(--brass-300);
  margin-bottom: .45rem;
}
.stat-label {
  display: block;
  font-size: .7rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: rgba(251, 248, 243, .68);
}

/* ---------- 9. About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

.check-list {
  list-style: none;
  padding: 0;
  margin-top: 2rem;
  display: grid;
  gap: .8rem;
}
.check-list li {
  position: relative;
  padding-left: 1.85rem;
  color: var(--text-soft);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 9px; height: 9px;
  border: 1px solid var(--brass-500);
  transform: rotate(45deg);
}

.about-media { position: relative; }
.about-fig { margin: 0; overflow: hidden; border-radius: var(--radius); }
.about-fig img {
  width: 100%;
  transition: transform 1.1s var(--ease);
}
.about-fig:hover img { transform: scale(1.045); }

.about-fig-lg { box-shadow: var(--shadow-md); }
.about-fig-sm {
  position: absolute;
  right: -1.5rem;
  bottom: -3.25rem;
  width: 52%;
  border: 8px solid var(--bg);
  box-shadow: var(--shadow-md);
}

/* ---------- 10. Amenities ---------- */
/* Borders live on the cells, not on a background behind the gaps, so a
   partial last row doesn't leave a stray block of colour. */
.amenity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.amenity {
  background: var(--bg-tint);
  padding: clamp(1.75rem, 3vw, 2.4rem);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: background-color .3s var(--ease);
}
.amenity:hover { background: var(--surface); }
.amenity-ico {
  display: block;
  width: 28px;
  color: var(--brass-500);
  margin-bottom: 1.15rem;
}
.amenity-ico svg {
  width: 100%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.amenity h3 {
  font-size: 1.45rem;
  margin-bottom: .6rem;
}
.amenity p { color: var(--text-soft); font-size: .96rem; line-height: 1.68; }

/* ---------- 11. Gallery ---------- */
.gallery-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(22rem, .8fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.gallery-intro .section-head { margin-bottom: 0; }
.gallery-intro .section-title { margin-bottom: 1.15rem; }
.gallery-intro .section-title em { color: var(--brass-300); }
.gallery-controls { padding-bottom: .35rem; }
.gallery-kicker {
  margin-bottom: .9rem;
  color: var(--brass-300);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: 1rem;
}
.filter {
  padding: .6rem 1.35rem;
  border: 1px solid rgba(224, 201, 141, .32);
  border-radius: 100px;
  color: rgba(251, 248, 243, .78);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease);
}
.filter:hover { border-color: var(--brass-300); color: var(--ivory); }
.filter.is-active {
  background: var(--brass-300);
  border-color: var(--brass-300);
  color: var(--green-900);
}
.gallery-status {
  color: rgba(251,248,243,.52);
  font-size: .76rem;
  letter-spacing: .06em;
}
.gallery-status span { color: var(--brass-400); margin-inline: .35rem; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(190px, 15vw, 230px);
  grid-auto-flow: dense;
  gap: 14px;
  list-style: none;
  padding: 0;
}
.shot { grid-column: span 1; grid-row: span 1; }
.shot-wide { grid-column: span 2; }
.shot-tall { grid-row: span 2; }

.shot[hidden] { display: none; }

.shot-btn {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: 5px;
  background: var(--green-800);
  box-shadow: 0 0 0 1px rgba(224,201,141,.08);
  transition: transform .4s var(--ease), box-shadow .45s var(--ease);
}
.gallery-swipe { display: none; }
/* Full opacity — dimming these just made the room look grey against the green. */
.shot-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}

/* Scrim carries the caption; without it the text sits on marble and vanishes. */
.shot-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(7, 24, 16, .90) 0%,
              rgba(7, 24, 16, .34) 42%,
              rgba(7, 24, 16, 0) 72%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}

.shot-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1rem 1.15rem 1.1rem;
  color: var(--ivory);
  font-size: .82rem;
  letter-spacing: .03em;
  line-height: 1.38;
  text-align: left;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s var(--ease), transform .45s var(--ease);
  pointer-events: none;
}
.shot-cap::before {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: var(--brass-400);
  margin-bottom: .6rem;
}

/* Small corner cue that these open larger. */
.shot-btn::after {
  content: "";
  position: absolute;
  top: .85rem;
  right: .85rem;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(251, 248, 243, .55);
  border-radius: 50%;
  background:
    linear-gradient(var(--ivory), var(--ivory)) center / 11px 1px no-repeat,
    linear-gradient(var(--ivory), var(--ivory)) center / 1px 11px no-repeat;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  pointer-events: none;
}

@media (hover: hover) {
  .shot-btn:hover,
  .shot-btn:focus-visible {
    transform: translateY(-2px);
    box-shadow:
      0 0 0 1px rgba(224,201,141,.62),
      0 0 24px rgba(201,168,92,.24),
      0 14px 34px rgba(3,14,9,.32);
  }

  .shot-btn:hover img,
  .shot-btn:focus-visible img { transform: scale(1.07); }

  .shot-btn:hover .shot-scrim,
  .shot-btn:focus-visible .shot-scrim { opacity: 1; }

  .shot-btn:hover .shot-cap,
  .shot-btn:focus-visible .shot-cap { opacity: 1; transform: none; }

  .shot-btn:hover::after,
  .shot-btn:focus-visible::after { opacity: 1; transform: scale(1); }
}

/* Touch devices never hover, so the caption is simply always on. The scrim is
   pulled tighter to the bottom — with every tile showing it at once, the wider
   desktop gradient greys the whole grid. */
@media (hover: none) {
  .shot-btn {
    box-shadow:
      0 0 0 1px rgba(224,201,141,.28),
      0 8px 20px rgba(3,14,9,.2);
  }
  .shot-scrim {
    opacity: 1;
    background: linear-gradient(to top,
                rgba(7, 24, 16, .88) 0%,
                rgba(7, 24, 16, .30) 26%,
                rgba(7, 24, 16, 0) 50%);
  }
  .shot-cap { opacity: 1; transform: none; }
  .shot-btn::after { display: none; }   /* no hover, so no hover cue */
}

/* ---------- 12. Uses ---------- */
.uses { background: var(--bg-tint); }

.use-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.5rem;
}

.use-card {
  position: relative;
  overflow: hidden;
  padding: 2rem 1.9rem 2.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.use-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--brass-500), var(--brass-300));
  transform: scaleX(.18);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.use-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--brass-400);
}
.use-card:hover::before { transform: scaleX(1); }

.use-num {
  display: block;
  font-family: var(--body);
  font-size: .7rem;
  letter-spacing: .24em;
  color: var(--accent);
  margin-bottom: 1rem;
}
/* A short brass rule under the number, the same cue the gallery captions use */
.use-num::after {
  content: "";
  display: block;
  width: 26px;
  height: 1px;
  margin-top: .7rem;
  background: var(--brass-500);
}

.use-card h3 {
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1.22;
  font-weight: 400;
  margin: 0 0 .6rem;
}
.use-card p {
  margin: 0;
  font-size: .93rem;
  line-height: 1.62;
  color: var(--text-soft);
}

/* ---------- 13. Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(8, 26, 19, .96);
  backdrop-filter: blur(6px);
  animation: fadeIn .28s var(--ease);
}
.lightbox[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.lb-figure { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.lb-figure img {
  max-width: 100%;
  max-height: 82svh;
  width: auto;
  margin-inline: auto;
  border-radius: var(--radius);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
}
.lb-figure figcaption {
  margin-top: 1.1rem;
  color: rgba(251, 248, 243, .74);
  font-size: .85rem;
  letter-spacing: .06em;
}

.lb-close, .lb-nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  color: var(--ivory);
  border: 1px solid rgba(251, 248, 243, .22);
  border-radius: 50%;
  background: rgba(12, 42, 30, .55);
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.lb-close:hover, .lb-nav:hover {
  background: var(--brass-600);
  border-color: var(--brass-600);
}
.lb-close {
  top: clamp(.75rem, 2vw, 1.75rem);
  right: clamp(.75rem, 2vw, 1.75rem);
  width: 46px; height: 46px;
  font-size: 1.7rem;
  line-height: 1;
}
.lb-nav {
  top: 50%;
  translate: 0 -50%;
  width: 52px; height: 52px;
  font-size: 2rem;
  line-height: 1;
  padding-bottom: 5px;
}
.lb-prev { left: clamp(.5rem, 2vw, 1.75rem); }
.lb-next { right: clamp(.5rem, 2vw, 1.75rem); }

body.lb-open { overflow: hidden; }

/* ---------- 15. FAQ ---------- */
.faq-list { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.45rem 0;
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: color .25s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }

.faq-item summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--brass-500);
  border-bottom: 1.5px solid var(--brass-500);
  rotate: 45deg;
  translate: 0 -3px;
  transition: rotate .3s var(--ease), translate .3s var(--ease);
}
.faq-item[open] summary::after { rotate: 225deg; translate: 0 3px; }

.faq-body { padding-bottom: 1.6rem; max-width: 68ch; }
.faq-body p { color: var(--text-soft); }

/* ---------- 16. Location ---------- */
.location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.location-address {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.3rem + .8vw, 1.95rem);
  font-style: normal;
  line-height: 1.34;
  color: var(--green-800);
  margin-bottom: 1.35rem;
}

.location-facts {
  margin: 2.1rem 0;
  display: grid;
  gap: 1.1rem;
}
.location-facts dt {
  font-size: .68rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .2rem;
}
.location-facts dd { margin: 0; color: var(--text-soft); }

.location-media { margin: 0; }
.location-media img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.location-media figcaption {
  margin-top: .9rem;
  font-size: .8rem;
  letter-spacing: .07em;
  color: var(--text-soft);
}

/* --- The map band --- */
.map-band { margin-top: clamp(3rem, 6vw, 4.5rem); }

/* A header strip above the map, so the embed reads as a component of this
   site rather than a Google rectangle dropped into the page. */
.map-shell {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--surface);
}

.map-head {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .95rem clamp(1rem, 2.5vw, 1.6rem);
  border-bottom: 1px solid var(--border);
}
.map-head-pin {
  flex: none;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
}
.map-head-addr {
  margin: 0;
  font-size: .8rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text);
}
.map-head-addr span { color: var(--border); margin: 0 .2rem; }

.map-head-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex: none;
  font-size: .72rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), gap .25s var(--ease);
}
.map-head-link svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.map-head-link:hover { border-bottom-color: var(--accent); gap: .65rem; }

.map-frame {
  position: relative;
  aspect-ratio: 16 / 7;
  min-height: 300px;
}

.map-embed {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* Google's map is a cool grey against a warm ivory page. A light wash
     settles it onto the palette; anything stronger muddies the labels. */
  filter: saturate(.88) sepia(.07);
  /* Inert until unlocked — see the note in index.html. */
  pointer-events: none;
}
.map-frame.is-live .map-embed { pointer-events: auto; }

/* The tap target that wakes the map up */
.map-unlock {
  position: absolute;
  inset: 0;
  width: 100%;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: linear-gradient(to bottom, rgba(12, 42, 30, .14), rgba(12, 42, 30, .26));
  transition: opacity .3s var(--ease);
}
.map-frame.is-live .map-unlock { opacity: 0; pointer-events: none; }

.map-unlock-pill {
  display: inline-flex;
  align-items: center;
  padding: .72rem 1.5rem;
  background: var(--ivory);
  color: var(--green-900);
  border-radius: 999px;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.map-unlock:hover .map-unlock-pill { transform: translateY(-2px); background: #fff; }
.map-unlock:focus-visible { outline: 2px solid var(--brass-400); outline-offset: -4px; }

/* ---------- 17. Form ---------- */
.form { display: grid; gap: 1.35rem; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.35rem;
}

.field { display: grid; gap: .5rem; }
.field label {
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(251, 248, 243, .78);
}
.req { color: var(--brass-300); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .95rem 1.1rem;
  background: rgba(251, 248, 243, .06);
  border: 1px solid rgba(224, 201, 141, .26);
  border-radius: var(--radius);
  color: var(--ivory);
  font-size: 1rem;
  font-weight: 300;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(251, 248, 243, .38); }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: rgba(224, 201, 141, .5); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: rgba(251, 248, 243, .1);
  border-color: var(--brass-300);
}

.field select { appearance: none; cursor: pointer; }
.field select option { background: var(--green-900); color: var(--ivory); }

/* Keep the native date picker legible on dark */
.field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: .6;
  cursor: pointer;
}

.field.has-error input,
.field.has-error select { border-color: #E8927C; }

.field-error {
  min-height: 0;
  font-size: .78rem;
  color: #F0AC99;
}
.field-error:empty { display: none; }

.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-status {
  text-align: center;
  font-size: .92rem;
  min-height: 1.4em;
}
.form-status.is-ok { color: var(--brass-300); }
.form-status.is-bad { color: #F0AC99; }

.form-fine {
  text-align: center;
  font-size: .78rem;
  color: rgba(251, 248, 243, .5);
}

/* ---------- 18. Footer ---------- */
.site-footer {
  background: var(--green-900);
  color: rgba(251, 248, 243, .8);
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
  font-size: .93rem;
}

.mobile-booking-bar { display: none; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  padding-bottom: 3.25rem;
}
.footer-logo { display: block; margin-bottom: 1.15rem; }
.footer-logo img {
  display: block;
  width: 100%;
  max-width: 190px;
  height: auto;
}
.footer-tag { max-width: 30ch; color: rgba(251, 248, 243, .6); }

.footer-col h3 {
  font-family: var(--body);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass-300);
  margin-bottom: 1.05rem;
}
.footer-col address { font-style: normal; line-height: 1.75; }
.footer-hours { margin-top: .6rem; color: rgba(251, 248, 243, .6); }

.footer-links { list-style: none; padding: 0; display: grid; gap: .55rem; }
.footer-links a {
  text-decoration: none;
  transition: color .25s var(--ease);
}
.footer-links a:hover { color: var(--brass-300); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem;
  padding-block: 1.6rem;
  border-top: 1px solid rgba(224, 201, 141, .18);
  font-size: .8rem;
  color: rgba(251, 248, 243, .5);
}

/* ---------- 19. Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- 20. Responsive ---------- */
@media (max-width: 1080px) {
  .hero-inner { max-width: 37rem; }
  .hero-reel { width: clamp(14rem, 27vw, 18rem); }
  .gallery-intro { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 76px; }

  .site-header { padding-block: 1rem; }
  .site-header.is-stuck {
    padding-block: .65rem;
    /* backdrop-filter creates a containing block for fixed descendants in
       WebKit/Chromium. That trapped the full-screen menu inside the sticky
       header after scrolling. An opaque surface is safer on small screens. */
    background: rgba(251, 248, 243, .98);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .brand,
  .nav-toggle { position: relative; z-index: 2; }

  .nav-toggle {
    display: flex;
    flex: none;
    border-radius: 50%;
    transition: background-color .25s var(--ease);
  }
  .nav-toggle:hover { background: rgba(251,248,243,.1); }

  .site-nav {
    position: fixed;
    z-index: 1;
    inset: 0;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2.75rem;
    padding: clamp(8.5rem, 22vh, 11rem) var(--gutter) 3rem;
    overflow-y: auto;
    background:
      radial-gradient(circle at 92% 8%, rgba(176,141,63,.16), transparent 30%),
      var(--green-900);
    translate: 0 -100%;
    visibility: hidden;
    transition: translate .38s var(--ease), visibility .38s;
  }
  .site-nav.is-open { translate: 0 0; visibility: visible; }

  .site-nav ul {
    width: 100%;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid rgba(224,201,141,.24);
  }
  .site-nav li { border-bottom: 1px solid rgba(224,201,141,.24); }
  .site-nav a,
  .site-header.is-stuck .site-nav a {
    display: flex;
    align-items: center;
    min-height: 4.5rem;
    color: var(--ivory);
    font-family: var(--display);
    font-size: clamp(1.85rem, 8vw, 2.45rem);
    letter-spacing: 0;
    text-transform: none;
  }
  .site-nav a::after { display: none; }
  .site-nav a.is-active,
  .site-header.is-stuck .site-nav a.is-active { color: var(--brass-300); }

  .nav-cta,
  .site-header:not(.is-stuck) .nav-cta {
    width: 100%;
    min-height: 3.5rem;
    justify-content: center;
    background: var(--brass-400);
    border-color: var(--brass-400);
    color: var(--green-900);
    padding: .9rem 1.4rem;
    font-family: var(--body);
    font-size: .74rem;
    letter-spacing: .13em;
    text-transform: uppercase;
  }

  body.nav-open { overflow: hidden; }
  body.nav-open .site-header.is-stuck { background: transparent; box-shadow: none; }
  body.nav-open .brand { color: var(--ivory); }
  body.nav-open .nav-toggle span { background: var(--ivory); }

  .hero-reel {
    display: none;
  }
  .hero-inner { margin-left: 0; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  .about-grid,
  .location-grid { grid-template-columns: 1fr; }

  .map-frame { aspect-ratio: 4 / 3; min-height: 0; }

  /*
    Keep the overlapping composition on small screens rather than stacking the
    two photos as equal rectangles — flattening them reads as two files dropped
    on the page. The lead image takes a taller crop so it carries the section,
    and the second overhangs its corner with an ivory border to lift it off.
  */
  .about-media {
    order: -1;
    position: relative;
    margin-bottom: 4.25rem;      /* room for the overhang below */
  }
  .about-fig-lg img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
  .about-fig-sm {
    position: absolute;
    right: 0;
    bottom: -3rem;
    width: 60%;
    margin-top: 0;
    border: 6px solid var(--bg);
  }

  .gallery-intro { grid-template-columns: 1fr; gap: 2rem; }
  .gallery-controls { padding-bottom: 0; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .shot-wide { grid-column: span 2; }
  .shot-tall { grid-row: span 1; }
}

@media (max-width: 620px) {
  .header-inner { gap: .5rem; }
  .brand { gap: .5rem; min-width: 0; }
  .brand-mark img,
  .site-header.is-stuck .brand-mark img { height: 48px; }
  .brand-name { font-size: clamp(1.05rem, 5.2vw, 1.28rem); white-space: nowrap; }
  .brand-sub { font-size: .5rem; letter-spacing: .2em; }
  .nav-toggle { width: 42px; height: 42px; }

  .mobile-booking-bar {
    position: fixed;
    z-index: 90;
    left: 1rem;
    right: 1rem;
    bottom: max(1rem, env(safe-area-inset-bottom));
    display: block;
    opacity: 0;
    translate: 0 calc(100% + 2rem);
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s var(--ease), translate .4s var(--ease), visibility .4s;
  }
  .mobile-booking-bar.is-visible { opacity: 1; translate: 0 0; visibility: visible; pointer-events: auto; }
  .mobile-booking-bar a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 4rem;
    padding: .7rem .85rem .7rem 1rem;
    border: 1px solid rgba(224,201,141,.75);
    border-radius: 6px;
    background: rgba(251,248,243,.96);
    color: var(--green-900);
    box-shadow: 0 14px 40px rgba(4,16,10,.3);
    backdrop-filter: blur(12px);
    text-decoration: none;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .14em;
    line-height: 1.25;
    text-transform: uppercase;
  }
  .mobile-booking-bar small {
    display: block;
    margin-bottom: .18rem;
    color: var(--brass-600);
    font-size: .58rem;
    font-weight: 500;
    letter-spacing: .12em;
  }
  .mobile-booking-bar svg {
    width: 2.45rem;
    height: 2.45rem;
    padding: .68rem;
    border-radius: 50%;
    background: var(--green-900);
    fill: none;
    stroke: var(--ivory);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  body.nav-open .mobile-booking-bar { opacity: 0; translate: 0 calc(100% + 2rem); visibility: hidden; pointer-events: none; }

  .hero { min-height: 92svh; }
  .hero-actions .btn { flex: 1 1 100%; }
  /* Stacked full-width buttons leave no room for it. */
  .hero-scroll { display: none; }
  .hero-title { font-size: clamp(3.6rem, 18vw, 5.25rem); }
  .hero-lede { max-width: 31ch; }

  .gallery { padding-bottom: clamp(4.5rem, 15vw, 6rem); }
  .gallery-intro { gap: 2rem; margin-bottom: 1.5rem; }
  .gallery-intro .section-title { font-size: clamp(2.65rem, 13vw, 3.55rem); }
  .gallery-intro .section-title br { display: none; }
  .gallery-kicker { display: none; }
  .gallery-controls {
    margin-inline: calc(var(--gutter) * -1);
    overflow: hidden;
  }
  .gallery-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-inline: var(--gutter);
    padding-bottom: .25rem;
    scrollbar-width: none;
  }
  .gallery-filters::-webkit-scrollbar { display: none; }
  .filter { flex: 0 0 auto; padding: .66rem 1.2rem; }
  .gallery-status { padding-inline: var(--gutter); font-size: .7rem; }

  .field-row { grid-template-columns: 1fr; }

  /*
    Gallery becomes a swipeable filmstrip on phones. Stacking 17 photos
    vertically buries the rest of the page under a very long scroll.

    Runs edge-to-edge: the negative margin cancels .shell's padding, and the
    matching padding keeps the first and last card aligned to the text above.
  */
  .gallery-grid {
    display: flex;
    grid-template-columns: none;
    grid-auto-rows: auto;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;      /* don't trigger the back gesture */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: .5rem;
    scrollbar-width: none;
  }
  .gallery-grid::-webkit-scrollbar { display: none; }

  /* One generous card plus a visible next-card edge makes the swipe direction
     obvious without shrinking the room photography. */
  .shot,
  .shot-wide,
  .shot-tall {
    flex: 0 0 86%;
    height: clamp(285px, 78vw, 340px);
    grid-column: auto;
    grid-row: auto;
    scroll-snap-align: center;
  }
  .shot-btn { border-radius: 4px; }
  .shot-cap { padding: 1.15rem 1.2rem 1.25rem; font-size: .87rem; }
  .gallery-swipe {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .85rem;
    margin-top: 1.15rem;
    color: rgba(251,248,243,.62);
    font-size: .64rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .gallery-swipe-line { height: 1px; overflow: hidden; background: rgba(251,248,243,.2); }
  .gallery-swipe-line i {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--brass-300);
    transform: scaleX(.059);
    transform-origin: left;
    transition: transform .2s linear;
  }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-logo { margin-bottom: .85rem; }
  .footer-logo img { max-width: 120px; }
  .footer-base { flex-direction: column; }

  .lb-nav { width: 44px; height: 44px; font-size: 1.6rem; }
  .map-frame { aspect-ratio: 1 / 1; }
  .map-unlock-pill { font-size: .66rem; padding: .6rem 1.1rem; }
  /* The address and the link stop fitting on one line */
  .map-head { flex-wrap: wrap; row-gap: .55rem; }
  .map-head-addr { font-size: .72rem; letter-spacing: .1em; }
  .map-head-link { margin-left: 0; width: 100%; }
}

/* ---------- 21. Dark scheme ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0A1F16;
    --bg-tint:   #0E2A1E;
    --surface:   #123526;
    --text:      #EDF3EF;
    --text-soft: #9FB6A9;
    --border:    #1E4634;
    --accent:    var(--brass-300);
  }

  .section-dark { background: #071810; }
  .stats { background: #071810; }
  .stat { background: #071810; }

  .site-header.is-stuck {
    background: rgba(10, 31, 22, .93);
    box-shadow: 0 1px 0 var(--border);
  }
  .site-header.is-stuck .brand,
  .site-header.is-stuck .site-nav a { color: var(--text); }
  .page-inner .site-header { background: rgba(10, 31, 22, .93); box-shadow: 0 1px 0 var(--border); }
  .page-inner .site-header .brand,
  .page-inner .site-header .site-nav a { color: var(--text); }
  .page-inner .site-header .nav-toggle span { background: var(--text); }
  .page-inner .site-header .site-nav a[aria-current="page"] { color: var(--brass-300); }
  .site-header.is-stuck .nav-toggle span { background: var(--text); }

  .btn-primary { --btn-bg: var(--brass-600); --btn-bd: var(--brass-600); --btn-fg: #071810; }
  .btn-primary:hover { --btn-bg: var(--brass-400); --btn-bd: var(--brass-400); }
  .btn-outline { --btn-fg: var(--text); }
  .btn-outline:hover { --btn-bg: var(--brass-600); --btn-bd: var(--brass-600); --btn-fg: #071810; }

  .location-address { color: var(--brass-300); }

  /* Google serves a light map whatever the page does. Left alone it glares
     against the dark green, so it is dimmed a little — not inverted, which
     turns the parks magenta and the water orange. */
  .map-embed { filter: saturate(.8) brightness(.88); }
  .map-unlock-pill { background: var(--surface); color: var(--text); }
  .map-unlock:hover .map-unlock-pill { background: #16402D; }
  .uses .use-card { background: var(--surface); }
  .use-card:hover { border-color: var(--brass-600); }
  .use-num::after { background: var(--brass-600); }
  .amenity { background: var(--bg-tint); }
  .amenity:hover { background: var(--surface); }
  .site-footer { background: #071810; }

  .about-fig-sm { border-color: var(--bg); }

  @media (max-width: 900px) {
    .site-nav { background: var(--bg-tint); }
    .site-nav a,
    .site-header.is-stuck .site-nav a { color: var(--text); }
    .nav-toggle[aria-expanded="true"] span { background: var(--text); }
  }
}

/* ---------- 22. Motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
  .map-unlock, .map-unlock-pill, .map-head-link { transition: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-media { animation: none; }
  .hero-reel video { display: none; }
  .hero-video-toggle { display: none; }
}

@media print {
  .site-header, .hero-scroll, .gallery-filters, .mobile-booking-bar,
  .lightbox, .nav-toggle, .form { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
  .reveal { opacity: 1; transform: none; }
}