/* ============================================================================
   HAYES COUNTRY CLUB — components.css
   Buttons, the header and drawer, the footer, cards, forms, modals, toasts,
   the photography plaque, and the booking controls.
   ========================================================================== */

/* ==========================================================================
   BUTTONS
   One primary button per view: ivory on deep green. Everything else is quieter
   than it, on purpose.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.9rem 1.85rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: background-color 200ms var(--ease), color 200ms var(--ease),
              border-color 200ms var(--ease);
}

.btn--primary {
  background: var(--hcc-green);
  color: var(--hcc-ivory);
  border-color: var(--hcc-green);
}
.btn--primary:hover { background: var(--hcc-green-deep); border-color: var(--hcc-green-deep); }

.btn--ghost {
  background: transparent;
  color: var(--hcc-ivory);
  border-color: rgba(251, 248, 241, 0.55);
}
.btn--ghost:hover { background: rgba(251, 248, 241, 0.1); border-color: var(--hcc-ivory); }

.btn--ghost-green {
  background: transparent;
  color: var(--hcc-green);
  border-color: var(--hcc-green);
}
.btn--ghost-green:hover { background: var(--hcc-green); color: var(--hcc-ivory); }
.band--green .btn--ghost-green,
.footer .btn--ghost-green { color: var(--hcc-ivory); border-color: rgba(251,248,241,.55); }
.band--green .btn--ghost-green:hover,
.footer .btn--ghost-green:hover { background: var(--hcc-ivory); color: var(--hcc-green-deep); }

/* On deep green the ivory fill is the higher-contrast primary (14:1). */
.band--green .btn--primary,
.hero .btn--primary,
.footer .btn--primary {
  background: var(--hcc-ivory);
  color: var(--hcc-green-deep);
  border-color: var(--hcc-ivory);
}
.band--green .btn--primary:hover,
.hero .btn--primary:hover,
.footer .btn--primary:hover { background: var(--hcc-gold-light); border-color: var(--hcc-gold-light); }

/* A gold hairline sweeps under secondary buttons on hover. */
.btn--quiet {
  min-height: 44px;
  padding: 0.55rem 0.25rem;
  color: var(--hcc-ink-soft);
  letter-spacing: 0.12em;
}
.btn--quiet::after {
  content: "";
  position: absolute;
  left: 0.25rem; right: 0.25rem; bottom: 0.35rem;
  height: 1px;
  background: var(--hcc-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease);
}
.btn--quiet:hover { color: var(--hcc-ink); }
.btn--quiet:hover::after { transform: scaleX(1); }

.btn--small { min-height: 44px; padding: 0.6rem 1.15rem; font-size: 0.7rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}
.u-center .btn-row { justify-content: center; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease),
              box-shadow 200ms var(--ease);
  border-bottom: 1px solid transparent;
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 84px;
  padding-block: 0.6rem;
}
.header__crest { display: flex; align-items: center; text-decoration: none; flex: none; }
.header__crest img { height: 52px; width: auto; transition: opacity 200ms var(--ease); }
.header__crest .u-visually-hidden { position: absolute; }

.header__nav { display: none; }
@media (min-width: 1000px) {
  .header__nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.2vw, 2rem);
  }
}
.header__link {
  position: relative;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--hcc-ivory);
  padding-block: 0.75rem;
  transition: color 200ms var(--ease);
}
.header__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.35rem;
  height: 1px;
  background: var(--hcc-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 220ms var(--ease);
}
.header__link:hover::after,
.header__link[data-active="true"]::after { transform: scaleX(1); }

.header__cta { display: none; }
@media (min-width: 1000px) { .header__cta { display: inline-flex; } }

.header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  color: var(--hcc-ivory);
  margin-right: -0.6rem;
}
@media (min-width: 1000px) { .header__toggle { display: none; } }
.header__bars { display: block; width: 24px; height: 12px; position: relative; }
.header__bars::before, .header__bars::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform 220ms var(--ease);
}
.header__bars::before { top: 0; }
.header__bars::after { bottom: 0; }
[aria-expanded="true"] .header__bars::before { transform: translateY(5.25px) rotate(45deg); }
[aria-expanded="true"] .header__bars::after { transform: translateY(-5.25px) rotate(-45deg); }

/* Over a hero the header is transparent; past 80px it becomes ivory. */
.header[data-solid="true"] {
  background: var(--hcc-ivory);
  border-bottom-color: var(--hcc-rule);
}
.header[data-solid="true"] .header__link,
.header[data-solid="true"] .header__toggle { color: var(--hcc-green); }
.header[data-solid="true"] .header__crest .crest--reversed { display: none; }
.header[data-solid="false"] .header__crest .crest--standard { display: none; }
.header[data-header="solid"] .header__crest .crest--reversed { display: none; }

/* The reversed crest sits in an ivory plaque, because the crest artwork is
   green-and-gold on transparency and would disappear on green. */
.crest-plaque {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hcc-ivory);
  border: 1px solid rgba(216, 155, 44, 0.55);
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius);
}
.crest-plaque img { display: block; }

/* ==========================================================================
   MOBILE DRAWER
   ========================================================================== */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--hcc-ivory);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(-1.25rem);
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
  overflow-y: auto;
}
.drawer[data-open="true"] { opacity: 1; transform: none; }
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 84px;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--hcc-rule);
}
.drawer__close {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--hcc-green);
  font-size: 1.5rem; line-height: 1;
  margin-right: -0.6rem;
}
.drawer__crest img { height: 44px; width: auto; }
.drawer__body { flex: 1 1 auto; padding-block: clamp(1.5rem, 5vw, 2.5rem); }
.drawer__list > li + li { border-top: 1px solid var(--hcc-rule); }
.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding-block: 0.75rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--hcc-green);
  text-decoration: none;
}
.drawer__link[data-active="true"] { color: var(--hcc-gold-deep); }
.drawer__link span[aria-hidden] { color: var(--hcc-gold); font-size: 1rem; }
.drawer__foot {
  padding-block: clamp(1.25rem, 4vw, 2rem);
  padding-bottom: calc(clamp(1.25rem, 4vw, 2rem) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--hcc-rule);
}
.drawer__meta {
  margin-top: 1rem;
  text-align: center;
  font-size: var(--step--1);
  color: var(--hcc-ink-soft);
}

/* ==========================================================================
   STICKY MOBILE CTA
   ========================================================================== */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--hcc-green-deep);
  color: var(--hcc-ivory);
  padding: 0.75rem var(--gutter);
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--hcc-gold);
  transform: translateY(110%);
  transition: transform 280ms var(--ease);
}
.sticky-cta[data-visible="true"] { transform: none; }
@media (min-width: 1000px) { .sticky-cta { display: none; } }

/* The bar is fixed, so the last of the footer would sit underneath it. Give the
   page a floor tall enough to clear the bar plus the phone's home indicator.
   Only below 1000px, where the bar actually exists, and only on pages that
   carry one — booking.html has no bar and needs no floor. */
@media (max-width: 999px) {
  body:has(.sticky-cta) .footer { padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); }
}
/* Fallback for browsers without :has() — harmless extra space at the very
   bottom of the footer on small screens. */
@supports not selector(:has(*)) {
  @media (max-width: 999px) {
    .footer { padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); }
  }
}
.sticky-cta__link {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--hcc-ivory);
}
.sticky-cta__dismiss {
  flex: none;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(251, 248, 241, 0.7);
  font-size: 1.15rem; line-height: 1;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  background: var(--hcc-green-deep);
  color: rgba(251, 248, 241, 0.82);
  padding-top: clamp(4.5rem, 8vw, 7rem);
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
  margin-top: auto;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 1.15fr 1fr;
  gap: clamp(2.25rem, 4vw, 3.75rem);
  align-items: start;
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}
.footer__tagline {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-style: italic;
  line-height: 1.4;
  color: rgba(251, 248, 241, 0.9);
  margin: 0;
}

.footer__h {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hcc-gold-light);
  margin: 0 0 1.15rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(216, 155, 44, 0.28);
}

.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: 0.6rem; }
.footer__list a {
  color: rgba(251, 248, 241, 0.82);
  text-decoration: none;
  font-size: var(--step--1);
  border-bottom: 1px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}
.footer__list a:hover { color: var(--hcc-ivory); border-bottom-color: var(--hcc-gold); }
.footer__list--contact { margin-top: 1.25rem; }

.footer__note {
  font-size: var(--step--1);
  line-height: 1.6;
  color: rgba(251, 248, 241, 0.7);
  margin: 0 0 0.85rem;
  max-width: 34ch;
}
.footer__place {
  color: var(--hcc-ivory);
  font-weight: 500;
}
.footer__spec {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--hcc-ivory);
  margin: 0 0 1.35rem;
}
.footer__cta .btn { margin-top: 0.25rem; }

/* A single thin gold rule closes the footer. No oversized ornament. */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: clamp(1.5rem, 2.5vw, 2rem);
  border-top: 1px solid rgba(216, 155, 44, 0.32);
}
.footer__bottom p {
  margin: 0;
  font-size: var(--step--1);
  color: rgba(251, 248, 241, 0.62);
}
.footer__est {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.66rem !important;
}

@media (max-width: 900px) {
  .footer__top { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__cta { grid-column: 1 / -1; }
  .footer__cta .btn { max-width: 22rem; }
}
@media (max-width: 560px) {
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
}

.badge {
  display: inline-block;
  border: 1px solid rgba(216, 155, 44, 0.5);
  padding: 0.3rem 0.7rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hcc-gold-light);
}

/* ==========================================================================
   PHOTOGRAPHY — the frame and the plaque that stands in for a missing photo.
   ========================================================================== */
.shot {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--hcc-green-deep);
  margin: 0;
}
.shot__img { width: 100%; height: 100%; object-fit: cover; }

/* Deliberate crops, not arbitrary rectangles. Each is matched to the
   orientation of the photograph that sits in it. */
.shot--ratio-cine   { aspect-ratio: 16 / 9; }   /* cinematic room shots */
.shot--ratio-wide   { aspect-ratio: 16 / 10; }
.shot--ratio-three2 { aspect-ratio: 3 / 2; }    /* lifestyle */
.shot--ratio-tall   { aspect-ratio: 4 / 5; }    /* portraits and details */
.shot--ratio-square { aspect-ratio: 1 / 1; }
.shot--ratio-ultra  { aspect-ratio: 21 / 9; }   /* transitional strips */
.shot--fill { position: absolute; inset: 0; aspect-ratio: auto; }

/* Photography lives inside the brand world: a whisper of warmth and a very
   slight desaturation so nothing fights the green and gold. */
.shot__img {
  filter: saturate(0.94) contrast(1.02);
  transition: transform 900ms cubic-bezier(.16,1,.3,1);
}
/* An understated push-in on hover. Never a bounce. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  a:hover > .shot-frame .shot__img,
  .shot-frame:hover .shot__img { transform: scale(1.028); }
}

/* A small editorial annotation set beside a large photograph. */
.shot-caption {
  margin: 0.9rem 0 0;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--hcc-ink-soft);
  max-width: 34ch;
}
.band--green .shot-caption { color: rgba(251, 248, 241, 0.72); }

/* The plaque: deep green field, gold hairline inside a rule, the crest, and
   the brief for the photograph that belongs here. */
.plaque {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  background:
    radial-gradient(120% 90% at 50% 30%, #0A3D22 0%, var(--hcc-green-deep) 70%);
  text-align: center;
}
.plaque__frame {
  position: absolute;
  inset: clamp(0.65rem, 2vw, 1.15rem);
  border: 1px solid rgba(216, 155, 44, 0.42);
}
.plaque__frame::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(216, 155, 44, 0.18);
}
.plaque__crest {
  width: clamp(56px, 16%, 120px);
  height: auto;
  opacity: 0.9;
  filter: brightness(0) saturate(100%) invert(92%) sepia(9%) saturate(420%) hue-rotate(347deg) brightness(103%) contrast(94%);
}

.shot--quiet .plaque__crest { opacity: 0.13; width: clamp(120px, 34%, 300px); }
.shot--quiet .plaque__frame { border-color: rgba(216, 155, 44, 0.18); }
.shot--quiet .plaque__frame::before { border-color: rgba(216, 155, 44, 0.08); }

/* ==========================================================================
   CARDS AND LISTS
   ========================================================================== */
.included {
  display: grid;
  gap: 0.9rem 2.5rem;
  text-align: left;
}
@media (min-width: 640px) { .included { grid-template-columns: 1fr 1fr; } }
.included__item, .drink, .benefit {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--step-0);
}
.included__mark, .drink__mark, .benefit__mark {
  flex: none;
  width: 0.85rem; height: 1.13rem;
  margin-top: 0.35em;
  color: var(--hcc-gold);
}
.included__mark .orn--fleur,
.drink__mark .orn--fleur,
.benefit__mark .orn--fleur { width: 100%; height: 100%; }

.amenities {
  display: grid;
  gap: 1px;
  background: var(--hcc-rule);
  border: 1px solid var(--hcc-rule);
}
@media (min-width: 620px) { .amenities { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .amenities { grid-template-columns: repeat(3, 1fr); } }
.amenity { background: var(--hcc-ivory); }
.band--cream .amenity { background: var(--hcc-cream); }
.amenity__inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  min-height: 100%;
  position: relative;
}
.amenity__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.2;
  color: var(--hcc-green);
}
.amenity__copy { font-size: var(--step--1); color: var(--hcc-ink-soft); line-height: 1.6; }

/* The one tile that expands. */
.amenity--egg .amenity__inner { cursor: pointer; overflow: hidden; }
.amenity__plus {
  position: absolute;
  right: clamp(1.25rem, 3vw, 1.75rem);
  bottom: clamp(1.25rem, 3vw, 1.75rem);
  width: 26px; height: 26px;
  border: 1px solid var(--hcc-gold);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--hcc-gold-deep);
  font-size: 0.95rem; line-height: 1;
  transition: background-color 220ms var(--ease), color 220ms var(--ease),
              transform 220ms var(--ease);
}
.amenity--egg [data-open="true"] .amenity__plus {
  background: var(--hcc-gold);
  color: var(--hcc-green-deep);
  transform: rotate(45deg);
}
.amenity__reveal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  background: var(--hcc-green-deep);
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms var(--ease), visibility 260ms var(--ease);
}
.amenity--egg [data-open="true"] .amenity__reveal { opacity: 1; visibility: visible; }
.amenity__revealtext {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--hcc-ivory);
  text-align: center;
  max-width: 26ch;
}

.usecases {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 560px) { .usecases { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .usecases { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .usecases { grid-template-columns: repeat(4, 1fr); } }
.usecase { display: flex; flex-direction: column; gap: 0.4rem; }
.usecase__rule { display: block; height: 1px; background: var(--hcc-gold); width: 2.25rem; margin-bottom: 0.6rem; }
.usecase__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--hcc-green);
  line-height: 1.2;
}
.usecase__copy { font-size: var(--step--1); color: var(--hcc-ink-soft); line-height: 1.6; }

/* ==========================================================================
   FORMS
   ========================================================================== */
.field { display: block; }
.field + .field { margin-top: 1.35rem; }
.field__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hcc-green);
  margin-bottom: 0.5rem;
}
.field__req { color: var(--hcc-gold-deep); }
.field__hint { font-size: var(--step--1); color: var(--hcc-ink-soft); margin-bottom: 0.75rem; }
.field__control {
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 1rem;
  background: var(--hcc-paper);
  border: 1px solid var(--hcc-rule);
  border-radius: var(--radius);
  color: var(--hcc-ink);
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
textarea.field__control { min-height: 120px; resize: vertical; line-height: 1.6; }
.field__control:hover { border-color: #C8BEA9; }
.field__control:focus-visible { border-color: var(--hcc-green); outline-offset: 1px; }
.field[data-invalid="true"] .field__control { border-color: #9A2B1E; }
.field__error {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-size: var(--step--1);
  color: #8E271B;
}
.field__error::before { content: "!"; font-weight: 700; }

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  font-size: var(--step--1);
  color: var(--hcc-ink-soft);
  line-height: 1.6;
}
.check input {
  flex: none;
  width: 22px; height: 22px;
  margin: 0.15rem 0 0;
  accent-color: var(--hcc-green);
}

/* ==========================================================================
   NOTICES, PILLS, TAGS
   ========================================================================== */
.notice {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--hcc-ink-soft);
  border-left: 2px solid var(--hcc-gold);
  padding-left: 1rem;
}
.notice--quiet { border-left-color: var(--hcc-rule); margin-top: 1.5rem; }
.band--green .notice { color: rgba(251,248,241,.8); border-left-color: var(--hcc-gold); }

.poc-block {
  border: 1px dashed var(--hcc-gold-deep);
  background: rgba(215, 151, 31, 0.07);
  padding: clamp(1.1rem, 3vw, 1.6rem);
  margin-top: 1.75rem;
  text-align: left;
}
.poc-block__label { color: var(--hcc-gold-deep); margin-bottom: 0.5rem; }
.poc-block__copy { font-size: var(--step--1); color: var(--hcc-ink-soft); line-height: 1.6; margin: 0; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--hcc-green);
}
.pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.pill[data-status="full"], .pill[data-status="cancelled"] { color: var(--hcc-reserved); }
.pill[data-status="waitlisted"], .pill[data-status="modified"] { color: var(--hcc-gold-deep); }
.pill[data-status="in"] { color: var(--hcc-green); background: var(--hcc-green-mist); }

.demo-label {
  display: inline-block;
  border: 1px solid var(--hcc-gold-deep);
  color: var(--hcc-gold-deep);
  padding: 0.4rem 0.85rem;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ==========================================================================
   MODALS
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  opacity: 0;
  transition: opacity 240ms var(--ease);
}
.modal[data-open="true"] { opacity: 1; }
.modal__scrim { position: absolute; inset: 0; background: rgba(5, 46, 25, 0.72); }
.modal__panel {
  position: relative;
  width: min(680px, 100%);
  max-height: min(86vh, 900px);
  overflow-y: auto;
  background: var(--hcc-ivory);
  border: 1px solid var(--hcc-gold);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  transform: translateY(1rem);
  transition: transform 240ms var(--ease);
}
.modal[data-open="true"] .modal__panel { transform: none; }
.modal__close {
  position: absolute;
  top: 0.5rem; right: 0.5rem;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--hcc-ink-soft);
  font-size: 1.35rem; line-height: 1;
}
.modal__close:hover { color: var(--hcc-green); }

/* The photography lightbox is wider and sits on a darker scrim. */
.modal--lightbox .modal__panel {
  width: min(1080px, 100%);
  background: var(--hcc-green-deep);
  padding: clamp(1rem, 3vw, 1.75rem);
}
.lightbox__stage { position: relative; aspect-ratio: 16 / 10; background: #04220F; }
.lightbox__stage .shot, .lightbox__stage .plaque { position: absolute; inset: 0; }
.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  color: var(--hcc-ivory);
}
.lightbox__caption { font-size: var(--step--1); color: rgba(251,248,241,.85); }
.lightbox__counter { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hcc-gold-light); }
.lightbox__nav { display: flex; gap: 0.5rem; }
.lightbox__btn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(251,248,241,.4);
  color: var(--hcc-ivory);
}
.lightbox__btn:hover { border-color: var(--hcc-gold); color: var(--hcc-gold-light); }

/* ==========================================================================
   TOASTS
   ========================================================================== */
.toast-host {
  position: fixed;
  z-index: 190;
  right: var(--gutter);
  bottom: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  pointer-events: none;
  width: min(360px, calc(100% - var(--gutter) * 2));
}
@media (max-width: 999px) {
  .toast-host {
    left: var(--gutter); right: var(--gutter);
    bottom: calc(var(--gutter) + 72px + env(safe-area-inset-bottom, 0px));
    width: auto;
  }
}
.toast {
  display: flex;
  gap: 0.9rem;
  background: var(--hcc-paper);
  border: 1px solid var(--hcc-rule);
  padding: 0.9rem 1.1rem;
  box-shadow: 0 12px 32px rgba(5, 46, 25, 0.16);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 280ms var(--ease), transform 280ms var(--ease);
}
.toast[data-visible="true"] { opacity: 1; transform: none; }
.toast__rule { flex: none; width: 2px; background: var(--hcc-gold); border-radius: 1px; }
.toast__body { display: flex; flex-direction: column; gap: 0.2rem; }
.toast__title {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hcc-green);
}
.toast__text { font-size: var(--step--1); color: var(--hcc-ink-soft); line-height: 1.5; }

/* ==========================================================================
   ACCORDION
   ========================================================================== */
.faqsec + .faqsec { margin-top: clamp(2.5rem, 6vw, 4rem); }
.faqsec__h {
  font-size: var(--step-2);
  color: var(--hcc-green);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--hcc-gold);
  margin-bottom: 0.5rem;
}
.faqsec__list { border-bottom: 1px solid var(--hcc-rule); }
.qa { border-top: 1px solid var(--hcc-rule); }
.qa:first-child { border-top: 0; }
.qa__h { font: inherit; margin: 0; }
.qa__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  min-height: 64px;
  padding-block: 1.15rem;
  text-align: left;
}
.qa__q {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.3;
  color: var(--hcc-green);
}
.qa__icon {
  flex: none;
  position: relative;
  width: 16px; height: 16px;
}
.qa__icon::before, .qa__icon::after {
  content: "";
  position: absolute;
  background: var(--hcc-gold-deep);
  transition: transform 240ms var(--ease), opacity 240ms var(--ease);
}
.qa__icon::before { top: 7.5px; left: 0; right: 0; height: 1.5px; }
.qa__icon::after { left: 7.5px; top: 0; bottom: 0; width: 1.5px; }
[aria-expanded="true"] .qa__icon::after { transform: scaleY(0); opacity: 0; }
.qa__panel { padding-bottom: 1.35rem; }
.qa__panel p { max-width: 66ch; color: var(--hcc-ink-soft); font-size: var(--step-0); }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.quotes {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 900px) { .quotes { grid-template-columns: repeat(2, 1fr); gap: 2rem 3rem; } }
.quote { display: flex; flex-direction: column; gap: 0.9rem; }
.quote__text {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  line-height: 1.5;
  color: var(--hcc-green);
  margin: 0;
  max-width: 40ch;
}
.quote__by { color: var(--hcc-ink-soft); }
/* Between stacked quotes on narrow screens, the fleur does the dividing. */
.quote__div {
  display: flex;
  justify-content: center;
  color: var(--hcc-gold);
  padding-block: 0.5rem;
}
.quote__div .orn--fleur { width: 0.95rem; height: 1.27rem; }
@media (min-width: 900px) { .quote__div { display: none; } }