/* ==========================================================================
   Home page sections.

   The design system (tokens, typography, buttons, links, header, footer,
   navigation, forms, image grade, grain) lives in brand.css and is shared by
   every page. This file only holds the compositions that exist on the home
   page, scoped to body.home-2026.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared home typography
   -------------------------------------------------------------------------- */

body.home-2026 .hz-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 4.2vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -0.032em;
  color: var(--text);
  text-wrap: balance;
}

body.home-2026 .hz-lede {
  margin-top: clamp(18px, 1.8vw, 26px);
  max-width: 46ch;
  font-size: clamp(1.0625rem, 1vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.008em;
  color: var(--muted);
}

body.home-2026 .hz-meta {
  margin-top: 18px;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--faint);
}

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

/* One grade across the home page's photographs. The venue strip keeps its
   own nightlife colour, so it is graded lightly and never tinted. */
body.home-2026 .hz-proof__media img,
body.home-2026 .hz-about__media img,
body.home-2026 .hz-item__media img,
body.home-2026 .hz-vtile img,
body.home-2026 .hz-close__bg {
  filter: saturate(0.92) contrast(1.06) brightness(0.97);
}

/* --------------------------------------------------------------------------
   1. Hero
   The video keeps every behaviour it already had: source swap by
   orientation, poster fallback, reduced motion, autoplay recovery.
   -------------------------------------------------------------------------- */

/* The hero owns the whole first screen.
   Two viewport units, doing two different jobs, because on iOS they differ:
   the BOX is sized to the LARGE viewport so the picture still covers the
   screen when Safari's floating toolbar is showing and nothing from the next
   section can appear around it, while the COPY is composed inside the SMALL
   viewport so the headline and both CTAs sit above that toolbar on first
   paint. On desktop and Android the two units are equal, so this collapses
   back to exactly the approved composition. 100vh is the fallback for
   anything without the new units, and equals lvh on iOS anyway. */
body.home-2026 .hz-hero {
  min-height: 100vh;
  min-height: 100lvh;
  display: flex;
  align-items: flex-start;
  padding-bottom: 0;
}

body.home-2026 .hz-hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding-bottom: calc(clamp(48px, 7vh, 96px) + env(safe-area-inset-bottom, 0px));
}

/* Desktop: show more of the left of the frame so Bryan, centred in the shot,
   sits clear of the headline. The phone gets its own value further down. */
body.home-2026 .hero-video,
body.home-2026 .hero-slide {
  object-position: 40% center;
  background-position: 40% center;
  filter: saturate(0.94) contrast(1.05);
}

/* Directional scrim. Dense where the copy sits, gone before his face. */
body.home-2026 .hero-overlay {
  background:
    linear-gradient(to right,
      rgba(6, 6, 6, 0.88) 0%, rgba(6, 6, 6, 0.6) 26%,
      rgba(6, 6, 6, 0.16) 46%, rgba(6, 6, 6, 0) 62%),
    linear-gradient(to top,
      rgba(6, 6, 6, 0.8) 0%, rgba(6, 6, 6, 0.26) 30%, rgba(6, 6, 6, 0) 58%),
    linear-gradient(to bottom, rgba(6, 6, 6, 0.55) 0%, rgba(6, 6, 6, 0) 20%);
}

body.home-2026 .hz-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-inline: var(--gutter);
}

body.home-2026 .hz-hero__title {
  max-width: 11ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3.1rem, 7vw, 7rem);
  line-height: 0.94;
  letter-spacing: -0.042em;
  color: var(--text);
}

body.home-2026 .hz-hero__sub {
  margin-top: clamp(16px, 1.6vw, 24px);
  max-width: 34ch;
  font-size: clamp(1.125rem, 1.35vw, 1.4375rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--muted);
}

/* Entrance, reusing the existing page-loaded flag. */
body.home-2026 .hz-hero__title,
body.home-2026 .hz-hero__sub,
body.home-2026 .hz-hero .hz-actions {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 800ms ease, transform 800ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

body.home-2026.page-loaded .hz-hero__title { opacity: 1; transform: none; transition-delay: 100ms; }
body.home-2026.page-loaded .hz-hero__sub { opacity: 1; transform: none; transition-delay: 220ms; }
body.home-2026.page-loaded .hz-hero .hz-actions { opacity: 1; transform: none; transition-delay: 320ms; }

/* --------------------------------------------------------------------------
   2. Proof
   Photograph runs past the middle of the page, copy sits in a column that
   starts before the image ends.
   -------------------------------------------------------------------------- */

body.home-2026 .hz-proof {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: end;
  padding-bottom: clamp(56px, 6vw, 104px);
  background: var(--ink);
}

body.home-2026 .hz-proof__media {
  grid-column: 1 / span 7;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

body.home-2026 .hz-proof__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 36%;
}

body.home-2026 .hz-proof__copy {
  grid-column: 8 / span 5;
  padding: 0 var(--gutter) clamp(24px, 3vw, 56px) clamp(28px, 3.4vw, 64px);
}

body.home-2026 .hz-proof__copy .text-link {
  margin-top: clamp(24px, 2.4vw, 34px);
}

/* --------------------------------------------------------------------------
   3. Services, a full width index
   -------------------------------------------------------------------------- */

body.home-2026 .hz-services {
  padding: clamp(72px, 8vw, 152px) 0 clamp(24px, 3vw, 48px);
  background: var(--ink);
}

body.home-2026 .hz-services__head,
body.home-2026 .hz-venues__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-inline: var(--gutter);
  margin-bottom: clamp(40px, 4.5vw, 76px);
}

body.home-2026 .hz-services__head .hz-h2 {
  max-width: 16ch;
}

body.home-2026 .hz-index {
  list-style: none;
  border-top: 1px solid var(--rule-soft);
}

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

body.home-2026 .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;
}

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

body.home-2026 .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);
}

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

/* Supporting media, pointer devices only. */
body.home-2026 .hz-item__media {
  display: none;
}

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

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

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

  /* Sized off the row so it breaks the rule above and below but never lands
     on a neighbouring row's text. */
  body.home-2026 .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;
  }

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

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

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

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

/* --------------------------------------------------------------------------
   4. Venues, one horizontal composition
   -------------------------------------------------------------------------- */

body.home-2026 .hz-venues {
  padding-top: clamp(72px, 8vw, 152px);
  background: var(--ink);
}

body.home-2026 .hz-venues__head {
  margin-bottom: clamp(32px, 3.4vw, 56px);
}

body.home-2026 .hz-strip {
  display: flex;
  gap: 2px;
  height: clamp(400px, 54vw, 720px);
}

body.home-2026 .hz-vtile {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  background: var(--graphite);
}

body.home-2026 .hz-vtile--lg { flex: 2.05 1 0; }
body.home-2026 .hz-vtile--md { flex: 1.5 1 0; }
body.home-2026 .hz-vtile--sm { flex: 1 1 0; }

body.home-2026 .hz-vtile > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

body.home-2026 .hz-vtile:hover > img {
  transform: scale(1.02);
}

/* Only as much scrim as the caption and logo need. */
body.home-2026 .hz-vtile::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(to top, rgba(6, 6, 6, 0.86) 0%, rgba(6, 6, 6, 0) 100%);
  pointer-events: none;
}

body.home-2026 .hz-vtile__cap {
  position: absolute;
  z-index: 1;
  left: clamp(16px, 1.4vw, 26px);
  right: clamp(16px, 1.4vw, 26px);
  bottom: clamp(16px, 1.4vw, 24px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* Each venue's own mark, normalised on cap height so four very different
   lockups sit on one optical line. The logo never gets big enough to
   compete with the photograph. */
body.home-2026 .hz-vtile__logo {
  display: block;
  width: auto;
  height: clamp(20px, 1.9vw, 28px);
  max-width: min(100%, 190px);
  object-fit: contain;
  object-position: left bottom;
  opacity: 0.96;
}

/* These four lockups are built very differently: a monogram, two stacked
   marks and a single word. Matching them on raw height makes the stacked
   ones illegible, so each is set to the height that reads at the same
   optical weight. Proportions are never altered. */
body.home-2026 .hz-vtile[data-venue="xs"] .hz-vtile__logo {
  height: clamp(34px, 3.1vw, 46px);
}

body.home-2026 .hz-vtile[data-venue="encore-beach-club"] .hz-vtile__logo {
  height: clamp(28px, 2.5vw, 38px);
}

body.home-2026 .hz-vtile[data-venue="omnia"] .hz-vtile__logo {
  height: clamp(24px, 2.1vw, 32px);
}

body.home-2026 .hz-vtile__name {
  font-size: clamp(1rem, 1.15vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

body.home-2026 .hz-vtile__prop {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   5. Process
   Cool off-white reset. The numerals are the composition.
   -------------------------------------------------------------------------- */

body.home-2026 .hz-process {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(72px, 8vw, 148px) var(--gutter) clamp(64px, 7vw, 130px);
}

body.home-2026 .hz-process__title {
  max-width: 15ch;
  color: var(--ink);
  margin-bottom: clamp(48px, 5.5vw, 96px);
}

body.home-2026 .hz-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  max-width: var(--maxw);
  border-top: 1px solid rgba(9, 9, 9, 0.16);
}

body.home-2026 .hz-steps > li {
  padding: clamp(26px, 2.6vw, 40px) clamp(20px, 2.4vw, 44px) 0 clamp(20px, 2.4vw, 44px);
  border-right: 1px solid rgba(9, 9, 9, 0.16);
}

body.home-2026 .hz-steps > li:first-child {
  padding-left: 0;
}

body.home-2026 .hz-steps > li:last-child {
  border-right: 0;
}

body.home-2026 .hz-steps__num {
  display: block;
  font-size: clamp(3.4rem, 6vw, 6.5rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--ink);
}

body.home-2026 .hz-steps h3 {
  margin-top: clamp(20px, 2vw, 32px);
  font-size: clamp(1.0625rem, 1.25vw, 1.375rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}

body.home-2026 .hz-steps p {
  margin-top: 10px;
  max-width: 30ch;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(9, 9, 9, 0.66);
}

/* --------------------------------------------------------------------------
   6. About
   -------------------------------------------------------------------------- */

body.home-2026 .hz-about {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  padding: clamp(72px, 8vw, 150px) 0;
  background: var(--ink);
}

body.home-2026 .hz-about__media {
  grid-column: 1 / span 6;
  grid-row: 1;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

body.home-2026 .hz-about__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Both faces sit in the upper third of this frame. */
  object-position: 50% 22%;
}

body.home-2026 .hz-about__copy {
  grid-column: 8 / span 4;
  grid-row: 1;
  padding-right: var(--gutter);
}

body.home-2026 .hz-about__copy .text-link {
  margin-top: clamp(26px, 2.6vw, 36px);
}

body.home-2026 .hz-signature {
  width: clamp(130px, 11vw, 168px);
  height: auto;
  margin-top: clamp(28px, 2.8vw, 40px);
  opacity: 0.78;
}

/* --------------------------------------------------------------------------
   7. Closing CTA, over a named venue
   -------------------------------------------------------------------------- */

body.home-2026 .hz-close {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(440px, 52vw, 760px);
  padding: clamp(64px, 7vw, 120px) var(--gutter);
  overflow: hidden;
  background: var(--ink);
}

body.home-2026 .hz-close__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}

body.home-2026 .hz-close::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) 46%, rgba(6, 6, 6, 0.28) 100%),
    linear-gradient(to bottom, rgba(6, 6, 6, 0.5) 0%, rgba(6, 6, 6, 0.16) 44%, rgba(6, 6, 6, 0.6) 100%);
}

body.home-2026 .hz-close__inner {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
}

body.home-2026 .hz-close__inner .hz-h2 {
  max-width: 13ch;
  font-size: clamp(2.4rem, 5.4vw, 5.4rem);
}

/* Names the room rather than leaving it as anonymous atmosphere. */
body.home-2026 .hz-close__credit {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(18px, 2vw, 30px);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--faint);
}

/* --------------------------------------------------------------------------
   Reveal
   -------------------------------------------------------------------------- */

body.home-2026 .hz-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 760ms ease, transform 760ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

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

@media (prefers-reduced-motion: reduce) {
  body.home-2026 .hz-reveal,
  body.home-2026 .hz-hero__title,
  body.home-2026 .hz-hero__sub,
  body.home-2026 .hz-hero .hz-actions {
    opacity: 1;
    transform: none;
    transition: none;
  }

  body.home-2026 .hz-vtile > img,
  body.home-2026 .hz-vtile:hover > img,
  body.home-2026 .hz-item__name {
    transition: none;
    transform: none;
  }
}

/* ==========================================================================
   Ultrawide
   ========================================================================== */

@media (min-width: 1800px) {
  body.home-2026 .hz-strip {
    height: min(58vw, 780px);
  }

  body.home-2026 .hz-item__link {
    grid-template-columns: clamp(58px, 6vw, 108px) minmax(0, 1fr) minmax(0, 38ch);
  }
}

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 1100px) {
  body.home-2026 .hz-proof {
    grid-template-columns: 1fr;
    align-items: start;
    padding-bottom: clamp(48px, 6vw, 80px);
  }

  body.home-2026 .hz-proof__media {
    grid-column: 1 / -1;
    aspect-ratio: 3 / 2;
  }

  body.home-2026 .hz-proof__copy {
    grid-column: 1 / -1;
    padding: clamp(32px, 4.5vw, 56px) var(--gutter) 0;
  }

  body.home-2026 .hz-about {
    grid-template-columns: 1fr;
    gap: clamp(32px, 4.5vw, 56px);
  }

  /* Both children have to give up their desktop placement, or the explicit
     column tracks reappear and crush the copy. */
  body.home-2026 .hz-about__media,
  body.home-2026 .hz-about__copy {
    grid-column: 1 / -1;
    grid-row: auto;
    align-self: auto;
    justify-self: stretch;
  }

  body.home-2026 .hz-about__media {
    aspect-ratio: 3 / 2;
  }

  body.home-2026 .hz-about__media img {
    object-position: 50% 18%;
  }

  body.home-2026 .hz-about__copy {
    padding-inline: var(--gutter);
  }

  body.home-2026 .hz-item__link {
    grid-template-columns: clamp(46px, 7vw, 72px) minmax(0, 1fr);
    row-gap: 6px;
  }

  body.home-2026 .hz-item__desc {
    grid-column: 2;
  }
}

/* ==========================================================================
   Touch widths: the venue strip becomes a snapping swipe gallery
   ========================================================================== */

@media (max-width: 900px) {
  body.home-2026 .hz-strip {
    height: auto;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter);
    padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.home-2026 .hz-strip::-webkit-scrollbar {
    display: none;
  }

  body.home-2026 .hz-vtile--lg,
  body.home-2026 .hz-vtile--md,
  body.home-2026 .hz-vtile--sm {
    flex: 0 0 min(78%, 560px);
    scroll-snap-align: start;
    aspect-ratio: 4 / 5;
  }
}

/* ==========================================================================
   Phone
   ========================================================================== */

@media (max-width: 640px) {
  /* The vertical cut puts his face in the top third, so the copy sits low
     and the scrim only has to cover his trousers. */
  body.home-2026 .hero-video,
  body.home-2026 .hero-slide {
    object-position: center 42%;
    background-position: center 42%;
  }

  body.home-2026 .hero-overlay {
    background:
      linear-gradient(to top,
        rgba(6, 6, 6, 0.92) 0%, rgba(6, 6, 6, 0.68) 26%,
        rgba(6, 6, 6, 0.12) 50%, rgba(6, 6, 6, 0) 68%),
      linear-gradient(to bottom, rgba(6, 6, 6, 0.5) 0%, rgba(6, 6, 6, 0) 22%);
  }

  body.home-2026 .hz-hero__inner {
    padding-bottom: calc(clamp(36px, 5vh, 56px) + env(safe-area-inset-bottom, 0px));
  }

  body.home-2026 .hz-hero__title {
    max-width: 9ch;
    font-size: clamp(2.9rem, 13.5vw, 3.6rem);
  }

  body.home-2026 .hz-hero__sub {
    max-width: 30ch;
    font-size: 1.0625rem;
  }

  body.home-2026 .hz-actions .btn {
    flex: 1 1 46%;
    padding-inline: 12px;
  }

  body.home-2026 .hz-proof__media,
  body.home-2026 .hz-about__media {
    aspect-ratio: 4 / 5;
  }

  body.home-2026 .hz-about__media img {
    object-position: 50% 16%;
  }

  body.home-2026 .hz-item__link {
    padding-block: 22px;
    min-height: 88px;
    align-content: center;
  }

  body.home-2026 .hz-item__name {
    font-size: 1.75rem;
  }

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

  body.home-2026 .hz-steps {
    grid-template-columns: 1fr;
    border-top: 0;
  }

  body.home-2026 .hz-steps > li,
  body.home-2026 .hz-steps > li:first-child {
    padding: 26px 0;
    border-right: 0;
    border-top: 1px solid rgba(9, 9, 9, 0.16);
  }

  body.home-2026 .hz-steps p {
    max-width: 36ch;
  }

  body.home-2026 .hz-close {
    min-height: 0;
    padding-block: clamp(72px, 16vw, 110px) clamp(84px, 18vw, 124px);
  }

  body.home-2026 .hz-close__bg {
    object-position: center 52%;
  }

  body.home-2026 .hz-close__credit {
    left: var(--gutter);
    right: auto;
  }
}