/* ==========================================================================
   Bryan Zagury, brand system. Loaded on every page, after style.css.

   The original stylesheet already routes almost everything through custom
   properties, so the fastest and least destructive way to carry the 2026
   direction across the whole site is to redefine the tokens and then correct
   the handful of components that hardcode a card, a pill or a shadow.

   Rules of the system
     - One typeface: Inter Tight. No serif anywhere.
     - Cool neutral surfaces, ivory text, one cobalt accent for interaction.
     - Square corners. No shadows. No cards. Separation comes from spacing,
       scale, hairlines and photography.
     - Photographs keep their own nightlife colour; the grade only holds the
       set together.
   ========================================================================== */

:root {
  /* Surfaces */
  --bg: #090909;
  --bg-soft: #151515;
  --bg-card: #151515;
  --ink: #090909;
  --graphite: #151515;
  --paper: #f2f2ee;

  /* Text */
  --text: #f2f2ee;
  --bone: #f2f2ee;
  --white: #ffffff;
  --text-muted: rgba(242, 242, 238, 0.68);
  --muted: rgba(242, 242, 238, 0.68);
  --faint: rgba(242, 242, 238, 0.58);

  /* One accent, cool, used for interaction rather than decoration. */
  --accent: #4360ff;
  --accent-hover: #8296ff;
  --accent-lift: #8296ff;
  --accent-soft: rgba(67, 96, 255, 0.16);

  /* Hairlines and translucency, recomputed for the ivory ink. */
  --line: rgba(242, 242, 238, 0.14);
  --rule: rgba(242, 242, 238, 0.14);
  --rule-soft: rgba(242, 242, 238, 0.09);
  --hairline-1: rgba(242, 242, 238, 0.05);
  --hairline-2: rgba(242, 242, 238, 0.09);
  --hairline-3: rgba(242, 242, 238, 0.13);
  --hairline-4: rgba(242, 242, 238, 0.22);
  --surface-1: rgba(242, 242, 238, 0.05);
  --surface-2: rgba(242, 242, 238, 0.09);
  --scrim-1: rgba(0, 0, 0, 0.3);

  /* One family does the whole site. */
  --font-display: "Inter Tight", "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-body: "Inter Tight", "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --sans: var(--font-body);

  /* Square. */
  --card-radius: 0px;
  --radius: 0px;

  /* Fluid gutters and a real ceiling for ultrawide. */
  --gutter: clamp(22px, 5vw, 96px);
  --container: 1720px;
  --maxw: 1720px;
  --header-height: 76px;
  --section-space: clamp(72px, 8vw, 148px);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  letter-spacing: -0.006em;
}

/* Every page gets the same edge-to-edge gutter rather than a centred box. */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Film grain, one plate, page wide. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5,
.section h1, .section h2, .section h3,
.simple-section h1, .simple-section h2, .simple-section h3,
.hero h1,
.footer-brand-block h2,
.footer-links-col h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-transform: none;
  font-style: normal;
}

.section h1,
.simple-section h1,
.section-heading h1 {
  font-size: clamp(2.3rem, 4.6vw, 4.4rem);
}

.section h2,
.simple-section h2,
.section-heading h2,
.split-copy h2,
.footer-brand-block h2 {
  font-size: clamp(2rem, 3.8vw, 3.6rem);
}

.section h3,
.simple-section h3 {
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.022em;
}

.section p,
.section-copy,
.simple-section p,
.split-copy p,
.footer-brand-block p {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.008em;
  color: var(--text-muted);
}

/* The old kickers were tiny uppercase labels in the accent colour. They stay
   as structure but read as quiet meta rather than decoration. */
.hero-eyebrow,
.section-kicker {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--faint);
}

.section-heading h1,
.section-heading h2 {
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */

.btn {
  min-height: 52px;
  padding: 0 clamp(22px, 2vw, 30px);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.006em;
  box-shadow: none;
}

.btn:hover {
  transform: none;
  box-shadow: none;
}

.btn-primary {
  background: var(--paper);
  border: 1px solid var(--paper);
  color: var(--ink);
}

.btn-primary:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--text);
  backdrop-filter: none;
}

.btn-secondary:hover {
  background: transparent;
  border-color: var(--paper);
  color: var(--paper);
}

/* Text links carry a hairline that fills in with the accent on hover. */
.text-link {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.006em;
  text-transform: none;
  color: var(--text);
  border-bottom: 0;
}

.text-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--rule);
}

.text-link::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 0;
  height: 1px;
  background: var(--accent-lift);
  transition: width 280ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.text-link:hover {
  color: var(--text);
}

.text-link:hover::before {
  width: 100%;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent-lift);
  outline-offset: 3px;
}

.skip-link {
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Header and navigation
   -------------------------------------------------------------------------- */

.site-header {
  height: var(--header-height);
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
}

.site-header.header-scrolled {
  background: rgba(9, 9, 9, 0.86);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--rule-soft);
}

/* Pages without a hero need a readable bar from the first paint. */
body:not(.has-hero) .site-header {
  background: rgba(9, 9, 9, 0.86);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--rule-soft);
}

.header-inner {
  width: 100%;
  max-width: none;
  padding-inline: var(--gutter);
}

/* Bryan's signature, the brand mark for the whole site. */
.brand-signature {
  display: block;
  width: auto;
  height: clamp(40px, 3.6vw, 54px);
}

.menu-toggle {
  width: 44px;
  height: 44px;
  border-radius: 0;
  border-color: var(--rule);
  background: transparent;
}

.menu-toggle:hover {
  background: var(--surface-1);
  transform: none;
}

.menu-toggle span {
  background: var(--text);
}

@media (min-width: 901px) {
  .site-nav {
    gap: clamp(18px, 1.9vw, 30px);
  }

  .site-nav a {
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: -0.004em;
    text-transform: none;
    color: var(--text-muted);
  }

  .site-nav a:hover,
  .site-nav a.is-active {
    color: var(--text);
  }

  .nav-actions {
    margin-left: clamp(4px, 0.8vw, 14px);
  }

  .site-nav .nav-cta {
    min-height: 42px;
    padding: 0 20px;
    border-radius: 0;
    background: var(--paper);
    border: 1px solid var(--paper);
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.004em;
    text-transform: none;
    box-shadow: none;
  }

  .site-nav .nav-cta:hover {
    background: #fff;
    color: var(--ink);
    transform: none;
    box-shadow: none;
  }

  /* The inquiry form leads, texting sits beside it as an outline. Call is
     reachable from the mobile overlay and the footer. */
  .site-nav .nav-cta-secondary {
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--text);
  }

  .site-nav .nav-cta-secondary:hover {
    background: transparent;
    border-color: var(--paper);
    color: var(--paper);
  }
}

/* Mobile menu: a designed overlay rather than a compressed drawer. */
@media (max-width: 900px) {
  .site-nav {
    width: 100vw;
    padding: 92px var(--gutter) calc(24px + env(safe-area-inset-bottom));
    background: var(--ink);
    backdrop-filter: none;
    border-left: 0;
    gap: 0;
    justify-content: flex-start;
  }

  .site-nav a {
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.028em;
    text-transform: none;
    padding: 17px 0;
    border-bottom: 1px solid var(--rule-soft);
    color: var(--text);
    opacity: 1;
  }

  .site-nav a:hover {
    transform: none;
  }

  .nav-social {
    display: flex;
    gap: 26px;
    padding-top: 22px;
  }

  .nav-social a {
    font-size: 0.9375rem;
    font-weight: 500;
    padding: 0;
    border-bottom: 0;
    color: var(--text-muted);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .site-nav .nav-actions {
    margin-top: auto;
    padding-top: 20px;
    gap: 10px;
  }

  .site-nav .nav-cta {
    min-height: 54px;
    border-radius: 0;
    background: var(--paper);
    border: 1px solid var(--paper);
    color: var(--ink);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.006em;
    text-transform: none;
    box-shadow: none;
  }

  .site-nav .nav-cta-secondary {
    background: transparent;
    border-color: var(--rule);
    color: var(--text);
    box-shadow: none;
  }
}

/* The social row only belongs in the overlay. */
@media (min-width: 901px) {
  .nav-social {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Cards become open surfaces
   -------------------------------------------------------------------------- */

.venue-card-link,
.venues-hero-panel,
.booking-info-card,
.booking-form,
.trust-notes div,
.venue-note,
.final-cta,
.service-card,
.timeline-card,
.testimonial-card,
.contact-card,
.response-card {
  border-radius: 0;
  box-shadow: none;
}

/* A venue in a directory is a photograph with a name under it, not a panel. */
.venue-card-link {
  border: 0;
  background: transparent;
  padding: 0;
}

.venue-card-link:hover {
  transform: none;
  box-shadow: none;
  background: transparent;
}

.venue-card-body {
  padding: 18px 0 0;
}

.venue-card-media {
  overflow: hidden;
}

.venue-art {
  border-radius: 0;
}

.venue-art-ring {
  display: none;
}

.venue-art-photo {
  transition: transform 700ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.venue-card-link:hover .venue-art-photo {
  transform: scale(1.02);
}

.venue-card-badge {
  border-radius: 0;
  background: rgba(9, 9, 9, 0.72);
  border: 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text);
}

.venue-property {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--faint);
}

.venue-card-body h3 {
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.024em;
}

.venue-card-cta {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}

.service-card,
.timeline-card,
.trust-notes div,
.booking-info-card,
.venue-note,
.contact-card,
.response-card {
  border: 0;
  border-top: 1px solid var(--rule-soft);
  background: transparent;
  padding-inline: 0;
}

.venues-hero-panel,
.booking-form {
  border: 0;
  background: transparent;
}

/* The closing band is a full-bleed photograph with CONTAINED copy on top.
   Stripping the card must not strip the page gutter with it: .final-cta is
   also a .container, so it keeps the same horizontal inset as every other
   block on the page. */
.final-cta {
  border: 0;
  background: transparent;
  padding-inline: var(--gutter);
}

.split-media,
.split-media img,
.services-hero-media,
.services-hero-media img {
  border-radius: 0;
}

.split-media:hover img {
  transform: scale(1.02);
}

/* One grade so a phone photo and a press photo read as the same site. */
.split-media img,
.services-hero-media img,
.venue-art-photo,
.ig-card-media img {
  filter: saturate(0.92) contrast(1.06) brightness(0.97);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-row label {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}

.form-row input,
.form-row select,
.form-row textarea {
  border-radius: 0;
  border: 1px solid var(--rule);
  background: var(--surface-1);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  letter-spacing: -0.006em;
  box-shadow: none;
}

.form-row input::placeholder,
.form-row textarea::placeholder {
  color: var(--faint);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--accent-lift);
  background: var(--surface-2);
  box-shadow: none;
}

.form-status,
.venue-form-status,
.form-direct-note {
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--graphite);
  border-top: 1px solid var(--rule-soft);
  padding-block: clamp(40px, 4vw, 60px) clamp(20px, 2vw, 28px);
}

.footer-wordmark {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--text);
  white-space: nowrap;
}

.footer-brand-block h2,
.footer-brand-block p,
.footer-cta-row {
  display: none;
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 80px);
  align-items: start;
}

.footer-links-wrap {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: clamp(32px, 5vw, 96px);
  justify-content: start;
}

.footer-links-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer-links-col h3 {
  margin-bottom: 4px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--faint);
}

.footer-links-col a,
.footer-entity {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.006em;
  color: var(--text-muted);
  transition: color 200ms ease;
}

.footer-links-col a:hover {
  color: var(--text);
}

.footer-entity {
  margin-top: 4px;
  color: var(--faint);
}

.footer-bottom {
  margin-top: clamp(32px, 3.4vw, 52px);
  padding-top: clamp(16px, 1.6vw, 22px);
  border-top: 1px solid var(--rule-soft);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}

.footer-bottom p,
.footer-bottom a {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--faint);
}

.footer-bottom a:hover {
  color: var(--text);
}

.footer-bottom-links {
  display: flex;
  gap: 22px;
}

/* --------------------------------------------------------------------------
   Sticky phone bar
   -------------------------------------------------------------------------- */

/* A deliberate fixed control, not two buttons floating over the page.

   The bar has to be a visible PLATE, which on this site is the whole
   difficulty: the page is #090909 and --ink is the same #090909, so a bar
   painted in it is invisible and all a phone shows is two pills hovering
   over whatever text happens to be underneath. Opacity was never the
   problem; contrast was. --graphite (#151515) is the section surface and
   only reaches 1.11:1 against the page, still too close to read as an edge,
   so a floating control gets its own slightly lighter surface. Measured
   against the rendered pixels, not against the token: 1.21:1 with the rule
   and the shadow, which is what makes the plate legible.

   No blur and no glass. The separation is a solid surface, one clear top
   rule, and an upward shadow that darkens the content passing beneath it. */
.mobile-sticky-cta {
  /* Lighter than --graphite on purpose: a bar floating over the page needs
     more separation than a section sitting in it. */
  --bar-surface: #1c1c1c;

  grid-template-columns: 1.32fr 1fr;
  gap: 10px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--bar-surface);
  border-top: 1px solid var(--hairline-4);
  box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.6);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.mobile-sticky-cta .btn {
  min-height: 50px;
  padding-inline: 10px;
  border-radius: 0;
  font-size: 0.875rem;
  white-space: nowrap;
}

.mobile-sticky-cta .btn-primary {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

/* Transparent so it reads as an outline button ON the plate. Filling it with
   --ink made it darker than the bar, so it looked like a hole punched in it. */
.mobile-sticky-cta .btn-secondary {
  background: transparent;
  border-color: var(--hairline-4);
  color: var(--text);
}

/* The bar covers the bottom of the document, so the page has to end above
   it rather than behind it. The room is taken inside the footer, which owns
   the background down there, so nothing shows through as a seam. The bar is
   50px of button plus 10px above and its own safe-area inset below. */
@media (max-width: 640px) {
  .site-footer {
    padding-bottom: calc(28px + 61px + env(safe-area-inset-bottom, 0px));
  }

  /* The inquiry page hides the bar so it never sits on the submit button;
     without a bar there is nothing to make room for. */
  body.page-inquiry .site-footer {
    padding-bottom: 28px;
  }
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.u-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) {
  /* Text links and the wordmark are only as tall as their type. The box
     grows to a 44px target with the extra height taken above the text, so
     nothing moves and the underline stays where it was. */
  .text-link,
  .brand,
  .back-link,
  .footer-links-col a,
  .footer-bottom-links a,
  .vt__body h3 a {
    display: inline-flex;
    align-items: flex-end;
    min-height: 44px;
  }

  /* The venue name is a link sitting on its own line, so it needs a real
     target rather than the height of its type. */
  .vt__body h3 a {
    align-items: center;
  }

  .vx-props a {
    min-height: 56px;
  }

  .brand {
    align-items: center;
  }

  .footer-links-col {
    gap: 0;
  }

  .footer-links-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

@media (max-width: 640px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .text-link::before,
  .venue-art-photo,
  .split-media img {
    transition: none;
  }

  .venue-card-link:hover .venue-art-photo,
  .split-media:hover img {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Inner-page components that still drew themselves as panels
   -------------------------------------------------------------------------- */

/* Panels become sections separated by a hairline and space. */
.info-panel,
.booking-panel,
.response-card,
.faq-item,
.venue-note,
.booking-info-card {
  border: 0;
  border-top: 1px solid var(--rule-soft);
  background: none;
  border-radius: 0;
  padding: clamp(24px, 2.4vw, 34px) 0 clamp(20px, 2vw, 30px);
}

/* Sits in the same group but keeps its gutter: see the note above. It also
   has a photograph behind it, so it takes no hairline. */
.final-cta {
  border: 0;
  background: none;
  border-radius: 0;
  padding: clamp(40px, 5vw, 64px) var(--gutter) clamp(36px, 4.5vw, 56px);
}

.faq-item {
  padding-inline: 0;
}

.faq-item h3,
.faq-item summary {
  font-size: clamp(1.0625rem, 1.2vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Filters read as a row of type with an underline for the active one, not a
   set of coloured pills. */
.venue-filter {
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--text-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.006em;
  text-transform: none;
}

.venue-filter:hover,
.venue-filter.is-active {
  background: none;
  color: var(--text);
  border-bottom-color: var(--paper);
  transform: none;
}

.venue-filter-bar {
  gap: clamp(18px, 2vw, 32px);
}

/* Big numerals, quiet labels. */
.venue-stats-panel strong {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.05em;
}

.venue-stats-panel span {
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--faint);
}

/* Decorative glyph rows are not part of this system. */
.service-glyph {
  display: none;
}

/* Step markers keep their shape but pick up the accent. */
.timeline-dot,
.check-list li::before {
  background: var(--accent);
  box-shadow: none;
}

.timeline-line {
  background: var(--rule-soft);
}

.timeline-label,
.venue-card-badge,
.step-num,
.steps-grid .step-num {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* The old dot navigations. */
.hero-dot,
.partners-dot {
  box-shadow: none;
  background: var(--surface-2);
}

.hero-dot.is-active,
.partners-dot.is-active {
  background: var(--paper);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Residual red

   The original palette's accent is written out as literal rgba in a handful
   of places, so redefining the token alone leaves red edges and warm tinted
   panels behind. These are the remaining spots, moved onto the cool accent
   or onto plain hairlines.
   -------------------------------------------------------------------------- */

.form-direct-note,
.direct-contact-card,
.venue-note,
.venue-form-status {
  border: 0;
  border-left: 2px solid var(--accent);
  border-radius: 0;
  background: var(--surface-1);
  padding: clamp(18px, 1.8vw, 26px);
}

.venue-note,
.direct-contact-card {
  border-top: 0;
}

.direct-contact-card h3 {
  font-size: clamp(1.15rem, 1.4vw, 1.4rem);
  font-weight: 500;
  letter-spacing: -0.022em;
}

.back-link {
  border-bottom: 1px solid var(--rule);
  color: var(--text-muted);
}

.back-link:hover {
  border-bottom-color: var(--paper);
  color: var(--text);
}

.venue-card-link:hover {
  border-color: transparent;
}

.timeline-line {
  background: linear-gradient(180deg, var(--accent), rgba(67, 96, 255, 0.1));
}

.venues-hero,
.page-intro {
  background: var(--bg);
}

.form-row textarea:focus,
.form-row input:focus,
.form-row select:focus {
  border-color: var(--accent-lift);
  box-shadow: none;
}

::selection {
  background: rgba(67, 96, 255, 0.42);
  color: var(--paper);
}

/* ==========================================================================
   Reveal safety

   Both reveal systems hide content with opacity and rely on JavaScript to
   put it back. On a wide viewport, a slow connection, a blocked script or a
   missed IntersectionObserver callback that left whole sections and the
   venue strip invisible in production. The hide now only applies when the
   root carries .js, and main.js also force-reveals everything on a timer.
   ========================================================================== */

.reveal,
body.home-2026 .hz-reveal {
  opacity: 1;
  transform: none;
  filter: none;
}

html.js .reveal {
  opacity: 0;
  transform: translateY(34px);
  filter: blur(6px);
}

html.js body.home-2026 .hz-reveal {
  opacity: 0;
  transform: translateY(18px);
}

html.js .reveal.is-visible,
html.js body.home-2026 .hz-reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ==========================================================================
   Stock backgrounds retired

   .final-cta-section and .booking-hero were painted with Unsplash frames.
   The closing band now uses the same authorised Marquee photograph the home
   page ends on; the inquiry hero drops its picture entirely because that
   page is now the form.
   ========================================================================== */

.final-cta-section {
  background:
    linear-gradient(to right, rgba(6, 6, 6, 0.9) 0%, rgba(6, 6, 6, 0.6) 46%, rgba(6, 6, 6, 0.3) 100%),
    linear-gradient(to bottom, rgba(6, 6, 6, 0.5) 0%, rgba(6, 6, 6, 0.16) 44%, rgba(6, 6, 6, 0.62) 100%),
    url("../media/venues/photos/marquee-1.jpg") center 58% / cover no-repeat;
}

.booking-hero {
  background: var(--bg);
  min-height: 0;
}

/* ==========================================================================
   Mobile header: it belongs to the hero, not to the viewport

   A fixed header meant the hero video slid underneath a lingering bar on
   iOS, and Safari's collapsing browser chrome made it jump. Below 900px the
   header is absolutely positioned at the top of the document instead, so it
   scrolls away with the hero and nothing is left behind. Desktop keeps the
   approved fixed behaviour.
   ========================================================================== */

@media (max-width: 900px) {
  body {
    position: relative;
  }

  .site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    min-height: var(--header-height);
    padding-top: env(safe-area-inset-top, 0px);
    transform: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    border-bottom-color: transparent !important;
    transition: none;
  }

  /* The drawer is the one part that may pin itself to the viewport. */
  .site-nav {
    position: fixed;
    padding-top: calc(92px + env(safe-area-inset-top, 0px));
  }

  /* Scroll lock keeps the visitor's place instead of jumping to the top. */
  body.menu-open {
    position: fixed;
    width: 100%;
    overflow: hidden;
  }

  body.menu-open .site-header {
    position: fixed;
    z-index: 1300;
  }
}

/* ==========================================================================
   Inquiry form

   Used on the contact page and inside every venue page. The form is the
   conversion point, so it gets real estate, big targets and persistent
   labels rather than placeholder-only fields.
   ========================================================================== */

.inq-page {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  grid-template-areas:
    "head  aside"
    "form  aside";
  align-items: start;
  column-gap: clamp(40px, 6vw, 120px);
  padding: calc(var(--header-height) + clamp(40px, 5vw, 76px)) var(--gutter) clamp(72px, 8vw, 130px);
  max-width: var(--maxw);
  margin-inline: auto;
}

.inq-page__head { grid-area: head; }
.inq-page__form { grid-area: form; }
.inq-page__aside { grid-area: aside; }

.inq-page__head h1 {
  font-size: clamp(2.3rem, 4.6vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.inq-page__head p {
  margin-top: 14px;
  max-width: 42ch;
  font-size: clamp(1.0625rem, 1.15vw, 1.25rem);
  line-height: 1.5;
  color: var(--text-muted);
}

.inq-page__form {
  margin-top: clamp(28px, 3vw, 44px);
}

.inq-page__aside {
  margin-top: clamp(28px, 3vw, 44px);
  padding-left: clamp(0px, 2vw, 32px);
  border-left: 1px solid var(--rule-soft);
}

.inq-page__aside h2 {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.inq-steps {
  margin-top: 18px;
  list-style: none;
  display: grid;
  gap: 16px;
}

.inq-steps li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.inq-steps span {
  font-weight: 600;
  color: var(--faint);
}

.inq-page__note {
  margin: 22px 0 18px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--faint);
}

/* --------------------------------------------------------------------------
   The form itself
   -------------------------------------------------------------------------- */

.inq {
  display: grid;
  gap: clamp(20px, 2.2vw, 28px);
  max-width: 46rem;
}

.inq__status {
  padding: 16px 18px;
  border-left: 2px solid var(--accent);
  background: var(--surface-1);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text);
}

.inq__status--ok { border-left-color: #3ddc97; }
.inq__status--err { border-left-color: #ff6b6b; }

.inq__errors {
  padding: 14px 18px;
  border-left: 2px solid #ff6b6b;
  background: var(--surface-1);
  font-size: 0.9375rem;
  color: var(--text);
}

.inq__errors ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--text-muted);
}

.inq__types {
  border: 0;
  padding: 0;
}

.inq__types legend {
  padding: 0 0 12px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-muted);
}

.inq__choices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

/* A row of real, obvious choices rather than a select menu. */
.inq-choice {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 10px;
  border: 1px solid var(--rule);
  color: var(--text-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}

.inq-choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.inq-choice:hover {
  border-color: var(--hairline-4);
  color: var(--text);
}

.inq-choice:has(input:checked) {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

.inq-choice:has(input:focus-visible) {
  outline: 2px solid var(--accent-lift);
  outline-offset: 3px;
}

.inq__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 22px);
}

.inq__field {
  display: grid;
  gap: 8px;
  align-content: start;
}

/* A class selector beats the user-agent rule for [hidden], so the
   conditional fields need this or they never actually hide. */
.inq__field[hidden],
.inq [hidden] {
  display: none;
}

.inq__field--full { grid-column: 1 / -1; }

.inq__field label {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}

.inq__field input,
.inq__field textarea {
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--surface-1);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  letter-spacing: -0.006em;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.inq__field textarea {
  min-height: 96px;
  resize: vertical;
  padding-top: 14px;
}

.inq__field input::placeholder,
.inq__field textarea::placeholder {
  color: var(--faint);
}

.inq__field input:focus,
.inq__field textarea:focus {
  outline: none;
  border-color: var(--accent-lift);
  background: var(--surface-2);
}

.inq__field input[aria-invalid="true"] {
  border-color: #ff6b6b;
}

.inq__field input[readonly] {
  color: var(--text-muted);
  background: var(--hairline-1);
}

/* Safari renders an empty date input as blank; this keeps it legible. */
.inq__field input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
}

.inq__field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.6;
  cursor: pointer;
}

.inq__field input:disabled {
  opacity: 0.45;
}

.inq__hint {
  font-size: 0.8125rem;
  color: var(--faint);
}

.inq__flex {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-muted);
  cursor: pointer;
}

.inq__flex input {
  width: 20px;
  height: 20px;
  min-height: 0;
  accent-color: var(--accent);
}

.inq__more {
  border-top: 1px solid var(--rule-soft);
  padding-top: clamp(16px, 1.8vw, 22px);
}

.inq__more summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.inq__more summary::-webkit-details-marker { display: none; }

.inq__more summary::before {
  content: "+";
  font-size: 1.125rem;
  color: var(--faint);
}

.inq__more[open] summary::before { content: "\2212"; }

.inq__grid--more { margin-top: 8px; }

.inq__context {
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.inq__context strong { color: var(--text); }

.inq__submit {
  width: 100%;
  min-height: 58px;
  font-size: 1rem;
}

.inq__submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

.inq__alt {
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .inq-page {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "form" "aside";
  }

  .inq-page__aside {
    margin-top: clamp(40px, 6vw, 64px);
    padding-left: 0;
    padding-top: clamp(24px, 3vw, 34px);
    border-left: 0;
    border-top: 1px solid var(--rule-soft);
  }
}

@media (max-width: 640px) {
  .inq-page {
    padding-top: calc(var(--header-height) + 28px);
  }

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

  .inq__grid {
    grid-template-columns: 1fr;
  }

  /* The sticky bar must never sit on the submit button. */
  body.page-inquiry .mobile-sticky-cta {
    display: none;
  }
}

/* ==========================================================================
   Venue detail template

   One layout for all 24 venues. Sections are optional in the markup, so the
   spacing has to hold whether a venue renders eight blocks or four.
   ========================================================================== */

.vd-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(520px, 66vh, 760px);
  padding: calc(var(--header-height) + clamp(40px, 5vw, 72px)) var(--gutter) clamp(44px, 5vw, 72px);
  overflow: hidden;
  background: var(--graphite);
}

.vd-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  filter: saturate(0.92) contrast(1.06) brightness(0.92);
}

.vd-hero.has-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(6, 6, 6, 0.9) 0%, rgba(6, 6, 6, 0.62) 48%, rgba(6, 6, 6, 0.34) 100%),
    linear-gradient(to bottom, rgba(6, 6, 6, 0.6) 0%, rgba(6, 6, 6, 0.2) 40%, rgba(6, 6, 6, 0.72) 100%);
}

.vd-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
}

.vd-hero .back-link {
  display: inline-block;
  margin-bottom: clamp(24px, 3vw, 40px);
  font-size: 0.875rem;
}

.vd-hero__logo {
  display: block;
  width: auto;
  height: clamp(34px, 3.4vw, 52px);
  max-width: min(100%, 220px);
  margin-bottom: clamp(16px, 1.6vw, 22px);
  object-fit: contain;
  object-position: left bottom;
}

.vd-hero h1 {
  font-size: clamp(2.6rem, 5.6vw, 5rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.vd-hero__line {
  margin-top: 14px;
  max-width: 46ch;
  font-size: clamp(1.0625rem, 1.2vw, 1.25rem);
  line-height: 1.5;
  color: var(--text-muted);
}

.vd-facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3vw, 56px);
  margin-top: clamp(24px, 2.6vw, 36px);
  padding-top: clamp(20px, 2vw, 26px);
  border-top: 1px solid var(--rule-soft);
}

.vd-facts dt {
  font-size: 0.8125rem;
  color: var(--faint);
}

.vd-facts dd {
  margin-top: 4px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
}

/* A verified operator note, not decoration. */
.vd-note {
  padding: clamp(20px, 2.2vw, 30px) var(--gutter);
  background: var(--graphite);
}

.vd-note p {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-left: 16px;
  border-left: 2px solid var(--accent);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Shared section rhythm
   -------------------------------------------------------------------------- */

.vd-fit,
.vd-expect,
.vd-plan,
.vd-inquiry,
.vd-faq {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(56px, 6.5vw, 110px) var(--gutter) 0;
}

.vd-faq {
  padding-bottom: clamp(56px, 6.5vw, 110px);
}

.vd-fit h2,
.vd-expect h2,
.vd-plan h2,
.vd-inquiry h2,
.vd-faq h2 {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: clamp(24px, 2.8vw, 40px);
}

.vd-fit__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 72px);
}

.vd-fit__cols h3 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.vd-list {
  list-style: none;
  display: grid;
  gap: 10px;
}

.vd-list li {
  position: relative;
  padding-left: 22px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
}

.vd-list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 500;
}

.vd-list--yes li::before { content: "+"; color: var(--accent-lift); }
.vd-list--no li::before { content: "\2212"; color: var(--faint); }
.vd-list--no li { color: var(--text-muted); }

/* Full-bleed second photograph, when the venue has one. */
.vd-media {
  margin-top: clamp(56px, 6.5vw, 110px);
}

.vd-media img {
  width: 100%;
  height: clamp(280px, 42vw, 620px);
  object-fit: cover;
  object-position: center 50%;
  filter: saturate(0.92) contrast(1.06) brightness(0.97);
}

.vd-rows {
  border-top: 1px solid var(--rule-soft);
}

.vd-row {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 56px);
  padding: clamp(20px, 2.2vw, 30px) 0;
  border-bottom: 1px solid var(--rule-soft);
}

.vd-row dt {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
}

.vd-row dd {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.vd-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 56px);
  border-top: 1px solid var(--rule-soft);
}

.vd-steps li {
  padding-top: clamp(20px, 2.2vw, 30px);
}

.vd-steps span {
  display: block;
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--faint);
}

.vd-steps p {
  margin-top: 14px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* The form gets its own ground so it reads as the point of the page. */
.vd-inquiry {
  max-width: none;
  margin-top: clamp(56px, 6.5vw, 110px);
  padding-bottom: clamp(56px, 6.5vw, 110px);
  background: var(--graphite);
}

.vd-inquiry__head,
.vd-inquiry .inq {
  max-width: var(--maxw);
  margin-inline: auto;
}

.vd-inquiry .inq {
  max-width: 46rem;
  margin-inline: 0;
}

.vd-inquiry__head p {
  margin-top: -18px;
  margin-bottom: clamp(24px, 2.8vw, 36px);
  max-width: 46ch;
  font-size: 1.0625rem;
  color: var(--text-muted);
}

.vd-faq__list {
  border-top: 1px solid var(--rule-soft);
}

.vd-faq__item {
  border-bottom: 1px solid var(--rule-soft);
}

.vd-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 16px 0;
  font-size: clamp(1rem, 1.15vw, 1.1875rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.vd-faq__item summary::-webkit-details-marker { display: none; }

.vd-faq__item summary::after {
  content: "+";
  font-size: 1.25rem;
  color: var(--faint);
}

.vd-faq__item[open] summary::after { content: "\2212"; }

.vd-faq__item p {
  padding-bottom: 22px;
  max-width: 70ch;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.vd-close {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(320px, 38vw, 520px);
  padding: clamp(56px, 6vw, 100px) var(--gutter);
  overflow: hidden;
  background: var(--ink);
}

.vd-close__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  filter: saturate(0.9) contrast(1.06) brightness(0.85);
}

.vd-close.has-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(6, 6, 6, 0.9) 0%, rgba(6, 6, 6, 0.6) 50%, rgba(6, 6, 6, 0.34) 100%),
    linear-gradient(to bottom, rgba(6, 6, 6, 0.45) 0%, rgba(6, 6, 6, 0.2) 45%, rgba(6, 6, 6, 0.6) 100%);
}

.vd-close__inner {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
}

.vd-close__inner h2 {
  max-width: 16ch;
  font-size: clamp(2rem, 3.8vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

@media (max-width: 900px) {
  .vd-fit__cols,
  .vd-steps {
    grid-template-columns: 1fr;
  }

  .vd-steps li {
    border-top: 1px solid var(--rule-soft);
  }

  .vd-steps li:first-child {
    border-top: 0;
  }

  .vd-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

@media (max-width: 640px) {
  .vd-hero {
    min-height: 0;
    padding-top: calc(var(--header-height) + 32px);
  }

  .vd-hero__bg {
    object-position: center 42%;
  }

  .vd-facts {
    gap: 20px 32px;
  }

  .vd-hero .hz-actions .btn,
  .vd-close .hz-actions .btn {
    flex: 1 1 46%;
    padding-inline: 12px;
  }
}

/* ==========================================================================
   Venues directory
   ========================================================================== */

.vx-hero {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: calc(var(--header-height) + clamp(48px, 6vw, 96px)) var(--gutter) clamp(48px, 5vw, 80px);
}

.vx-hero h1 {
  max-width: 16ch;
  font-size: clamp(2.5rem, 5.4vw, 4.8rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.vx-hero p {
  margin-top: 18px;
  max-width: 54ch;
  font-size: clamp(1.0625rem, 1.2vw, 1.25rem);
  line-height: 1.5;
  color: var(--text-muted);
}

.vx-counts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 72px);
  margin-top: clamp(32px, 3.4vw, 52px);
  padding-top: clamp(22px, 2.2vw, 30px);
  border-top: 1px solid var(--rule-soft);
}

.vx-counts dt {
  font-size: 0.875rem;
  color: var(--faint);
}

.vx-counts dd {
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text);
}

.vx-group {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(48px, 5vw, 84px) var(--gutter) 0;
}

.vx-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px clamp(20px, 3vw, 40px);
  padding-bottom: clamp(20px, 2.2vw, 30px);
  margin-bottom: clamp(24px, 2.6vw, 38px);
  border-bottom: 1px solid var(--rule-soft);
}

.vx-group__head h2 {
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.vx-group__head p {
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* Three across on a standard desktop, never five slivers. */
.vx-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 2.6vw, 44px) clamp(20px, 2.2vw, 36px);
}

/* The first venue in each group earns a wider frame. */
.vt--featured {
  grid-column: span 2;
}

.vt__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--graphite);
}

.vt--featured .vt__media {
  aspect-ratio: 16 / 9;
}

.vt__media img:not(.vt__logo) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.06) brightness(0.95);
  transition: transform 700ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.vt__media:hover img:not(.vt__logo) {
  transform: scale(1.02);
}

.vt__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 52%;
  background: linear-gradient(to top, rgba(6, 6, 6, 0.8) 0%, rgba(6, 6, 6, 0) 100%);
  pointer-events: none;
}

.vt__logo {
  position: absolute;
  z-index: 1;
  left: clamp(14px, 1.2vw, 20px);
  bottom: clamp(14px, 1.2vw, 20px);
  width: auto;
  height: clamp(20px, 1.7vw, 26px);
  max-width: min(60%, 150px);
  object-fit: contain;
  object-position: left bottom;
}

/* A venue with no authorised photography of its own gets its logo on a plain
   ground rather than someone else's room. */
.vt--nophoto .vt__media {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule-soft);
}

.vt--nophoto .vt__media::after { display: none; }

.vt--nophoto .vt__logo {
  position: static;
  height: clamp(26px, 2.2vw, 34px);
  max-width: 60%;
}

.vt__body {
  padding-top: 16px;
}

.vt__body h3 {
  font-size: clamp(1.0625rem, 1.3vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.024em;
}

.vt__prop {
  margin-top: 3px;
  font-size: 0.875rem;
  color: var(--faint);
}

.vt__desc {
  margin-top: 10px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.vt__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(18px, 2vw, 28px);
  margin-top: 14px;
}

.vt__actions .text-link {
  font-size: 0.875rem;
}

/* Properties: logos and names, no borrowed photography. */
.vx-props {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(28px, 4vw, 72px);
  border-top: 1px solid var(--rule-soft);
}

.vx-props li {
  border-bottom: 1px solid var(--rule-soft);
}

.vx-props a {
  display: grid;
  grid-template-columns: clamp(96px, 10vw, 148px) minmax(0, 12rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  padding: clamp(16px, 1.8vw, 24px) 0;
  transition: opacity 200ms ease;
}

.vx-props a:hover { opacity: 0.72; }

.vx-props img {
  width: auto;
  height: clamp(18px, 1.5vw, 24px);
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

.vx-props__name {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
}

.vx-props__desc {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.page-venues .final-cta-section {
  margin-top: clamp(64px, 7vw, 120px);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .vx-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vt--featured {
    grid-column: span 2;
  }

  .vx-props a {
    grid-template-columns: clamp(88px, 14vw, 120px) minmax(0, 1fr);
  }

  .vx-props__desc { display: none; }
}

@media (max-width: 720px) {
  .vx-props {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  /* One deliberate column, with the lead venue still reading larger. */
  .vx-grid {
    grid-template-columns: 1fr;
  }

  .vt--featured {
    grid-column: span 1;
  }

  .vt__media,
  .vt--featured .vt__media {
    aspect-ratio: 4 / 3;
  }

  .vx-group__head {
    display: block;
  }

  .vx-group__head p {
    margin-top: 6px;
  }
}

/* ==========================================================================
   Services, About and Partners

   These three share the homepage's rhythm: a typographic hero, full-bleed
   media only where a real photograph exists, and hairline-separated rows
   instead of panels.
   ========================================================================== */

.sv-hero,
.ab-hero,
.pt-hero {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: calc(var(--header-height) + clamp(48px, 6vw, 100px)) var(--gutter) clamp(48px, 5vw, 84px);
}

.sv-hero h1,
.ab-hero h1,
.pt-hero h1 {
  max-width: 15ch;
  font-size: clamp(2.6rem, 5.6vw, 5rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.sv-hero p,
.ab-hero p,
.pt-hero p {
  margin-top: 18px;
  max-width: 52ch;
  font-size: clamp(1.0625rem, 1.2vw, 1.25rem);
  line-height: 1.5;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */

.sv-index {
  padding-top: clamp(16px, 2vw, 32px);
}

/* --------------------------------------------------------------------------
   The pair of primary actions

   Same story as the index below: this only existed under body.home-2026, so
   on services, about, partners, venues and every venue page the two buttons
   were a bare block. They sat flush against the paragraph above them with a
   single word-space between them, which is what made those pages read as a
   desktop layout squeezed onto a phone. One definition, every page.
   -------------------------------------------------------------------------- */

.hz-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: clamp(28px, 2.6vw, 40px);
}

/* --------------------------------------------------------------------------
   The numbered services index

   Shared by the home page and the services page. It used to live only in
   home.css under body.home-2026, so the services page rendered the same
   markup with no styling at all: number, name and description ran together
   as one paragraph against the left edge of the screen. It belongs here,
   unscoped; home.css still carries the home page's own tuning on top.

   The row is full bleed so its hairline reaches both edges, and the gutter
   is taken inside the row, which is what keeps the number on the same
   vertical line as every heading on the page.
   -------------------------------------------------------------------------- */

.hz-index {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule-soft);
}

.hz-item {
  border-bottom: 1px solid var(--rule-soft);
}

.hz-item__link {
  position: relative;
  display: grid;
  grid-template-columns: clamp(58px, 6vw, 108px) minmax(0, 1fr) minmax(0, 34ch);
  align-items: center;
  gap: clamp(16px, 2vw, 40px);
  padding: clamp(30px, 3.4vw, 54px) var(--gutter);
  transition: background-color 300ms ease;
}

.hz-item__num {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--faint);
  transition: color 260ms ease;
}

.hz-item__name {
  font-size: clamp(1.6rem, 3.1vw, 3rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--text);
  transition: transform 380ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.hz-item__desc {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.006em;
  color: var(--muted);
}

/* Supporting media is a pointer affordance only. A phone never renders it. */
.hz-item__media {
  display: none;
}

@media (hover: hover) and (pointer: fine) and (min-width: 1000px) {
  .hz-item__link:hover {
    background: var(--graphite);
  }

  .hz-item__link:hover .hz-item__num {
    color: var(--accent-lift);
  }

  .hz-item__link:hover .hz-item__name {
    transform: translateX(10px);
  }

  .hz-item__media {
    display: block;
    position: absolute;
    right: var(--gutter);
    top: 50%;
    z-index: 3;
    height: calc(100% + 30px);
    width: auto;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-50%) scale(0.97);
    transition: opacity 340ms ease, transform 480ms cubic-bezier(0.2, 0.7, 0.3, 1);
    pointer-events: none;
  }

  .hz-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hz-item__link:hover .hz-item__media {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }

  .hz-item__desc {
    transition: opacity 240ms ease;
  }

  .hz-item__link:hover .hz-item__desc {
    opacity: 0;
  }
}

/* One column on a phone: the description sits under the name instead of
   being squeezed into a third track. */
@media (max-width: 860px) {
  .hz-item__link {
    grid-template-columns: clamp(46px, 12vw, 58px) minmax(0, 1fr);
    gap: 4px clamp(12px, 3vw, 20px);
    align-content: center;
    padding-block: 22px;
    min-height: 88px;
  }

  .hz-item__num {
    grid-row: 1 / span 2;
  }

  .hz-item__name {
    font-size: clamp(1.5rem, 6vw, 1.9rem);
  }

  .hz-item__desc {
    font-size: 0.9375rem;
  }
}

.sv-proof {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  padding: clamp(64px, 7vw, 120px) 0;
}

.sv-proof__media {
  grid-column: 1 / span 6;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.sv-proof__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: saturate(0.9) contrast(1.06) brightness(0.94);
}

.sv-proof__copy {
  grid-column: 8 / span 4;
  padding-right: var(--gutter);
}

.sv-proof__copy h2 {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.04;
}

.sv-proof__copy p {
  margin-top: 16px;
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.sv-proof__copy .text-link {
  margin-top: 24px;
}

.sv-venues {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--gutter);
}

.sv-venues__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: clamp(18px, 2vw, 26px);
  margin-bottom: clamp(20px, 2.2vw, 30px);
  border-bottom: 1px solid var(--rule-soft);
}

.sv-venues__head h2 {
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.sv-venues__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
}

.sv-venue {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--graphite);
}

.sv-venue > img:not(.sv-venue__logo) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.06) brightness(0.92);
  transition: transform 700ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.sv-venue:hover > img:not(.sv-venue__logo) {
  transform: scale(1.02);
}

.sv-venue::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(to top, rgba(6, 6, 6, 0.82) 0%, rgba(6, 6, 6, 0) 100%);
}

.sv-venue__logo {
  position: absolute;
  z-index: 1;
  left: clamp(14px, 1.2vw, 20px);
  bottom: clamp(14px, 1.2vw, 20px);
  width: auto;
  height: clamp(20px, 1.6vw, 26px);
  max-width: 62%;
  object-fit: contain;
  object-position: left bottom;
}

.sv-process {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(64px, 7vw, 120px) var(--gutter);
}

.sv-process h2 {
  max-width: 16ch;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.04;
  margin-bottom: clamp(28px, 3vw, 44px);
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */

.ab-proof {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  padding-bottom: clamp(56px, 6vw, 100px);
}

.ab-proof__media {
  grid-column: 1 / span 6;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.ab-proof__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  filter: saturate(0.92) contrast(1.06) brightness(0.97);
}

.ab-proof__copy {
  grid-column: 8 / span 4;
  padding-right: var(--gutter);
}

.ab-proof__copy h2 {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.04;
}

.ab-proof__copy p {
  margin-top: 16px;
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.ab-does,
.pt-why {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(56px, 6vw, 100px);
}

.ab-does h2,
.pt-why h2 {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-bottom: clamp(24px, 2.8vw, 40px);
}

.ab-does__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 72px);
}

.ab-does__cols h3 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.ab-lang {
  background: var(--graphite);
  padding: clamp(56px, 6vw, 100px) var(--gutter);
}

.ab-lang__inner {
  max-width: var(--maxw);
  margin-inline: auto;
}

.ab-lang h2 {
  max-width: 18ch;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.ab-lang p {
  margin-top: 16px;
  max-width: 50ch;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.ab-lang__entity {
  color: var(--faint);
  font-size: 0.9375rem;
}

.ab-lang .hz-signature {
  width: clamp(130px, 11vw, 168px);
  height: auto;
  margin-top: clamp(28px, 3vw, 40px);
  opacity: 0.78;
}

/* --------------------------------------------------------------------------
   Partners
   -------------------------------------------------------------------------- */

.pt-why__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 56px);
  border-top: 1px solid var(--rule-soft);
}

.pt-why__cols > div {
  padding-top: clamp(20px, 2.2vw, 30px);
}

.pt-why__cols h3 {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
}

.pt-why__cols p {
  margin-top: 10px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.pt-logos {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(56px, 6vw, 100px);
}

.pt-logos__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: clamp(18px, 2vw, 26px);
  margin-bottom: clamp(24px, 2.6vw, 36px);
  border-bottom: 1px solid var(--rule-soft);
}

.pt-logos__head h2 {
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.pt-logos__head p {
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.pt-logos__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
}

.pt-logos__grid li {
  background: var(--ink);
}

.pt-logos__grid a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(88px, 9vw, 128px);
  padding: 18px;
  transition: background-color 220ms ease;
}

.pt-logos__grid a:hover {
  background: var(--graphite);
}

.pt-logos__grid img {
  width: auto;
  height: clamp(20px, 1.8vw, 28px);
  max-width: 100%;
  object-fit: contain;
  opacity: 0.86;
  transition: opacity 220ms ease;
}

.pt-logos__grid a:hover img { opacity: 1; }

.pt-logos__name {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-muted);
}

.pt-logos__note {
  margin-top: clamp(20px, 2.2vw, 28px);
  max-width: 70ch;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--faint);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .sv-proof,
  .ab-proof {
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 48px);
  }

  .sv-proof__media,
  .ab-proof__media {
    grid-column: 1 / -1;
    aspect-ratio: 3 / 2;
  }

  .sv-proof__copy,
  .ab-proof__copy {
    grid-column: 1 / -1;
    padding-inline: var(--gutter);
  }

  .pt-why__cols,
  .ab-does__cols {
    grid-template-columns: 1fr;
  }

  .pt-why__cols > div {
    border-top: 1px solid var(--rule-soft);
  }

  .pt-why__cols > div:first-child { border-top: 0; }

  .pt-logos__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sv-venues__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .sv-hero .hz-actions .btn,
  .ab-hero .hz-actions .btn,
  .pt-hero .hz-actions .btn {
    flex: 1 1 46%;
    padding-inline: 12px;
  }

  .pt-logos__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sv-proof__media,
  .ab-proof__media {
    aspect-ratio: 4 / 5;
  }
}