/* ============================================================
   INSOMNIA — Bar & Night Club
   Pixel-faithful build of Figma node 248:708 (1920 × 5364)
   Sizing system: 1rem = 10 design-px, fluid below 1920px.
   ============================================================ */

:root {
  --yellow: #f0c91b;
  --bg: #171717;
  --ink: #171717;
  --white: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  /* 1rem = 10px at 1920w, and scales PROPORTIONALLY at every width (no upper
     cap). The layout is an absolutely-positioned 1920px design, so a cap would
     freeze every offset in place above 1920 and shove the nav/footer content to
     one side. Pure vw scaling keeps the whole page centred and balanced at any
     width — it just grows or shrinks like a zoom. */
  font-size: calc(100vw / 192);
  /* no CSS smooth-scroll: it fights Lenis (double-smoothing = lag);
     JS falls back to scrollIntoView({behavior:'smooth'}) when Lenis is absent */
}

body {
  background: var(--bg);
  color: var(--white);
  font-family: "Lato", sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ---------- shared type ---------- */
.kicker {
  font-size: 2rem;
  line-height: 1.2;
  color: var(--white);
  text-align: center;
  text-transform: uppercase;
}

.lead {
  font-size: 2rem;
  line-height: 1.2;
  text-align: center;
  color: var(--white);
}

/* script headings occupy the design's exact 82px line box */
.script {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 8.2rem;
}
.script img { width: auto; }

.sec-head { display: flex; flex-direction: column; align-items: center; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Lato", sans-serif;
  font-size: 2rem;
  line-height: 1.2;
  transition: background-color .35s ease, color .35s ease, box-shadow .35s ease, transform .35s ease;
}

.btn--nav {
  width: 19.8rem;
  height: 5.6rem;
  border: 1px solid var(--yellow);
  color: var(--yellow);
}
.btn--nav:hover {
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 0 0 3rem rgba(240, 201, 27, .35);
}

.btn--solid {
  width: 29.2rem;
  height: 5.6rem;
  background: var(--yellow);
  border: 1px solid var(--yellow);
  color: var(--ink);
  text-transform: uppercase;
}
.btn--solid:hover {
  background: transparent;
  color: var(--yellow);
}

.btn--outline {
  width: 25.5rem;
  height: 5.6rem;
  border: 1px solid var(--yellow);
  color: var(--yellow);
  text-transform: uppercase;
}
.btn--outline:hover {
  background: var(--yellow);
  color: var(--ink);
}

/* ============================================================
   NAV — 1920 × 134
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: 13.4rem;
  background: rgba(23, 23, 23, .92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  display: flex;
  align-items: center;
}

.nav__logo {
  position: absolute;
  left: 23.5rem;
  top: 2.1rem;
}
.nav__logo img { width: 7.46rem; height: 9.2rem; object-fit: contain; }

.nav__links {
  position: absolute;
  left: 68.9rem;
  display: flex;
  align-items: center;
  gap: 5.8rem;
}

.nav__link {
  position: relative;
  font-size: 2rem;
  line-height: 1.2;
  color: var(--white);
  transition: color .3s ease;
  padding-bottom: .4rem;
}
.nav__link:hover { color: var(--yellow); }

.nav__underline {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  bottom: -1rem;
  width: 5.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  transition: transform .35s ease;
}
.nav__dots { width: 5.94rem; height: .4rem; }
.nav__bar { width: 5.3rem; height: .3rem; background: var(--yellow); }

.nav__link.is-active { color: var(--yellow); font-weight: 700; text-transform: uppercase; }
.nav__link.is-active .nav__underline,
.nav__link:hover .nav__underline { transform: translateX(-50%) scaleX(1); }

/* nav CTA group (two buttons side by side) */
.nav__cta {
  position: absolute;
  right: 6rem;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.nav__cta .btn--nav {
  width: auto;
  padding: 0 2rem;
  white-space: nowrap;
}

/* filled (solid yellow) button variant */
.btn--filled {
  background: var(--yellow);
  color: var(--ink);
}
.btn--filled:hover {
  background: transparent;
  color: var(--yellow);
}

/* burger (hidden on desktop) */
.nav__burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
}
.nav__burger span {
  display: block;
  width: 26px; height: 2px;
  background: var(--yellow);
  transition: transform .3s ease, opacity .3s ease;
}
.nav__burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* mobile slide-in menu */
.mmenu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(23, 23, 23, .98);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.mmenu.is-open { opacity: 1; pointer-events: auto; }
.mmenu__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
}
.mmenu__links a {
  font-size: 22px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mmenu__links a:hover { color: var(--yellow); }

/* ============================================================
   HERO — collage 0→841 below nav
   ============================================================ */
.hero {
  position: relative;
  margin-top: 13.4rem;
  height: 84.1rem;
  overflow: hidden;
  background: #0b0b0b;
}

.hero__collage { position: absolute; inset: 0; }

.hero__img {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
}
.hero__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
.hero__img--left  { left: 0;        width: 36.2%; }
.hero__img--mid   { left: 36.2%;    width: 47.65%; }
.hero__img--right { left: 83.85%;   width: 16.15%; }

/* left photo: exact Figma node render — design shows the right
   695px of the 1022px node (left 327px off-canvas) */
.hero__img--left img {
  position: absolute;
  right: 0;
  width: 147.1%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* glass title panel — 1058×413.6 @ x431.7 y194.2 */
.hero__glass {
  position: absolute;
  left: 22.48%;
  top: 19.42rem;
  width: 55.1%;
  height: 41.36rem;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero__title img {
  width: 80.6rem; /* intrinsic glyph span at the design's 76.8px size */
  height: auto;
  margin: 0 auto;
}

.hero__line {
  display: block;
  width: 82.2rem;
  height: .126rem;
  background: var(--white);
  margin: 3.4rem 0 2.6rem;
}

.hero__sub {
  font-size: 2.52rem;
  line-height: 1.2;
  letter-spacing: .62em;
  word-spacing: .35em;
  text-transform: uppercase;
  text-align: center;
  margin-right: -.62em; /* optical centering vs letter-spacing */
  white-space: nowrap;
}

/* ============================================================
   UPCOMING PARTIES
   ============================================================ */
.parties { padding-top: 5rem; }

.parties .kicker { margin-bottom: 1.5rem; }
.parties .script img { width: 47.5rem; height: auto; }
.parties .lead {
  max-width: 68.3rem;
  margin: 0 auto;
  margin-top: .1rem;
}

.parties__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5rem;
  row-gap: 4rem;
  margin-top: 4.6rem;
  /* 4 cards + 3 gaps = 4*32.1 + 3*5 = 143.4rem; +2rem slack so rounding
     never bumps the 4th card to a new row. Caps row 1 at 4, wraps the rest. */
  max-width: 145.4rem;
  margin-left: auto;
  margin-right: auto;
}

/* dedicated Events page — .parties.evpage (2 classes) beats the base
   .parties padding-top inside the responsive media queries */
.parties.evpage { padding-top: 22rem; padding-bottom: 6rem; }
@media (max-width: 1024px) { .parties.evpage { padding-top: 18rem; } }
@media (max-width: 640px) {
  .parties.evpage { padding-top: 13rem; padding-bottom: 4rem; }
}

/* ---------- past events ---------- */
.parties--past { padding-top: 8rem; padding-bottom: 10rem; }
.parties--past[hidden] { display: none; }
.script--past {
  font-family: "Anton", sans-serif;
  font-size: 5.6rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--yellow);
  line-height: 1.1;
}

/* past cards read as archive: muted until hovered, and not clickable.
   doubled class (.pcard.pcard--past) so these outrank the base .pcard
   hover/cursor rules, which are defined further down this file */
.pcard.pcard--past { cursor: default; }
.pcard--past .pcard__img img { filter: grayscale(1); opacity: .5; transition: filter .5s ease, opacity .5s ease; }
.pcard.pcard--past:hover { translate: none; box-shadow: none; }
.pcard.pcard--past:hover .pcard__img img { filter: grayscale(.35); opacity: .78; transform: none; }
.pcard--past .pcard__bar { background: #4a4633; }
.pcard--past .pcard__info h3,
.pcard--past .pcard__info p,
.pcard--past .pcard__date { color: #d8d2b8; }

.pcard__flag {
  position: absolute;
  top: 1.2rem; left: 1.2rem;
  z-index: 2;
  background: rgba(0, 0, 0, .78);
  color: var(--yellow);
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .5rem .9rem;
  border: 1px solid var(--yellow);
}

.pcard__empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #9b9b9b;
  font-size: 1.6rem;
}

/* ---------- rotating reserve badge ---------- */
.rbadge {
  position: fixed;
  right: 2.6rem;
  bottom: 2.6rem;
  z-index: 60;
  width: 11.4rem;
  height: 11.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 1rem 2.8rem rgba(0, 0, 0, .5);
  transition: scale .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
.rbadge:hover { scale: 1.07; box-shadow: 0 1.4rem 3.4rem rgba(0, 0, 0, .62); }
.rbadge:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.rbadge__ring {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  animation: rbadge-spin 12s linear infinite;
}
.rbadge__text {
  font-family: "Lato", sans-serif;
  font-size: 8.6px;   /* px: sits in the SVG's 100-unit viewBox, not the rem scale */
  font-weight: 900;
  letter-spacing: .12em;
  fill: var(--ink);
  text-transform: uppercase;
}
.rbadge__core {
  position: relative;
  display: grid;
  place-items: center;
  width: 5rem; height: 5rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--yellow);
}
.rbadge__core svg { width: 2.2rem; height: 2.2rem; }
.rbadge:hover .rbadge__core svg { transform: translateX(2px); transition: transform .3s ease; }

@keyframes rbadge-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .rbadge__ring { animation: none; }
}

@media (max-width: 640px) {
  .rbadge { right: 1.4rem; bottom: 1.4rem; width: 8.8rem; height: 8.8rem; }
  .rbadge__core { width: 3.8rem; height: 3.8rem; }
  .rbadge__core svg { width: 1.7rem; height: 1.7rem; }
  .parties--past { padding-top: 5.6rem; padding-bottom: 7rem; }
  .script--past { font-size: 3.4rem; }
}

.pcard {
  position: relative;
  /* upcoming cards render as <a> (WhatsApp booking), past ones as <article> */
  display: block;
  text-decoration: none;
  color: inherit;
  width: 32.1rem;
  /* height follows the poster: 4:5 image box + the bar underneath, so the
     artwork is never cropped and the bar never covers it */
  height: auto;
  cursor: pointer;
  /* hover lift uses the `translate` property (not `transform`) so it never
     collides with GSAP's per-frame transform writes during the entrance reveal */
  transition: translate .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease;
}
.pcard:hover {
  translate: 0 -1.2rem;
  box-shadow: 0 2.4rem 5rem rgba(0, 0, 0, .55);
}

/* posters are authored at 1080x1350 — matching the box to 4/5 means `cover`
   fills it with zero crop */
.pcard__img {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.pcard__img img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.pcard:hover .pcard__img img { transform: scale(1.07); }

.pcard__bar {
  position: relative;
  min-height: 10.6rem;
  background: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.4rem 1.7rem;
}

.pcard__info { min-width: 0; }
.pcard__info h3 {
  font-size: 2.77rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink);
}
.pcard__info p {
  font-size: 1.54rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  margin-top: .6rem;
}

.pcard__date {
  font-family: "Anton", sans-serif;
  font-size: 3.6rem;
  line-height: 1.5;
  color: #000;
  letter-spacing: .02em;
  flex-shrink: 0; /* the name wraps instead of running under the date */
}

/* ============================================================
   MARQUEE — 110px strip
   ============================================================ */
.marquee {
  margin-top: 12.3rem;
  height: 11rem;
  background: var(--bg);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
}
.marquee__track img {
  height: 5.2rem;
  width: auto;
  margin-right: 4rem;
  flex-shrink: 0;
}

/* ============================================================
   ABOUT — 525 tall block
   ============================================================ */
.about { padding: 12.6rem 0 0; }
.about .kicker { margin-bottom: 2.3rem; }
.about .script img { width: 40.3rem; height: auto; }
.about__lead {
  max-width: 85.3rem;
  margin: 0 auto;
  margin-top: .2rem;
}

/* ============================================================
   SERVICES
   ============================================================ */
.services { padding-top: 15.5rem; }
.services .kicker { margin-bottom: 0; }
.services .script img { width: 28.9rem; height: auto; }

.serv {
  margin-top: 1.5rem;
  overflow: hidden;
  cursor: grab;
}
.serv:active { cursor: grabbing; }

.serv__track {
  display: flex;
  gap: 1.2rem;
  width: max-content;
  will-change: transform;
}

.scard {
  position: relative;
  width: var(--w, 45rem);
  height: 47.6rem;
  overflow: hidden;
  flex-shrink: 0;
}
.scard__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.scard:hover .scard__img { transform: scale(1.05); }

.scard__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--lh, 19.8rem);
  /* no backdrop-filter here: blurring under a strip that moves every frame
     forces constant GPU re-rasterization (the old scroll-jank source).
     The design's frosted band is baked into each card image instead
     (serv_*_b.jpg / serv_host_blur.jpg) — zero runtime cost. */
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 0 2.2rem 3rem;
}
.scard__icon { width: 12rem; height: 12rem; object-fit: contain; }
.scard__label h3 {
  font-size: 3.6rem;
  font-weight: 400;
  line-height: 1.2;
  max-width: 24rem;
  margin-top: .4rem;
}

/* ============================================================
   GALLERY — 4×250 grid, rows 200, gaps 10/8
   ============================================================ */
.gallery { padding-top: 8.2rem; }
.gallery .kicker { margin-bottom: 1.5rem; }
.gallery .script img { width: 36.4rem; height: auto; }

.gal {
  width: 103rem;
  margin: 3.3rem auto 0;
  display: grid;
  grid-template-columns: repeat(4, 25rem);
  grid-template-rows: repeat(3, 20rem);
  column-gap: 1rem;
  row-gap: .8rem;
}

.gal__item { overflow: hidden; position: relative; }
.gal__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease, filter .6s ease;
}
.gal__item:hover img { transform: scale(1.08); filter: brightness(1.15); }

.g1 { grid-column: 1; grid-row: 1; }
.g2 { grid-column: 2; grid-row: 1; }
.g3 { grid-column: 3; grid-row: 1 / span 2; }
.g4 { grid-column: 4; grid-row: 1 / span 2; }
.g5 { grid-column: 1; grid-row: 2 / span 2; }
.g6 { grid-column: 2; grid-row: 2; }
.g7 { grid-column: 2 / span 2; grid-row: 3; }
.g8 { grid-column: 4; grid-row: 3; }

/* ============================================================
   FIND US / MAP
   ============================================================ */
.findus { padding-top: 12rem; }
.findus .kicker { margin-bottom: .6rem; }
.findus__title {
  font-family: "Anton", sans-serif;
  font-size: 5.6rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 4.4rem;
}
/* two-column: building photo (left) + map with Get Directions button (right) */
.findus__grid {
  width: 90rem;
  max-width: calc(100% - 8rem);
  margin: 0 auto;
  display: flex;
  gap: 1.8rem;
  align-items: stretch;
  flex-wrap: wrap;
}
.findus__photo {
  flex: 0 0 34%;
  min-width: 18rem;
  border-radius: 1.4rem;
  overflow: hidden;
  min-height: 24rem;
  border: 1px solid rgba(240, 201, 27, .35);
}
.findus__photo img {
  width: 100%;
  height: 100%;
  min-height: 24rem;
  object-fit: cover;
  display: block;
}
.findus__side {
  flex: 1 1 58%;
  min-width: 22rem;
  display: flex;
  flex-direction: column;
  border-radius: 1.4rem;
  overflow: hidden;
  min-height: 24rem;
  border: 1px solid rgba(240, 201, 27, .35);
  box-shadow: 0 1.6rem 4.4rem rgba(0, 0, 0, .45);
}
.findus__map { flex: 1; min-height: 0; }
.findus__map iframe {
  width: 100%;
  height: 100%;
  min-height: 19rem;
  border: 0;
  display: block;
}
.findus__dir {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--yellow);
  color: var(--ink);
  font-family: "Lato", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 1.8rem;
  padding: 2rem 2.2rem;
  text-decoration: none;
  transition: background .25s ease, color .25s ease;
}
.findus__dir:hover { background: #fff; color: var(--ink); }
.findus__dir svg { width: 2rem; height: 2rem; flex-shrink: 0; }

@media (max-width: 1024px) {
  .findus { padding-top: 8rem; }
  .findus__title { font-size: 4.2rem; margin-bottom: 3.2rem; }
  .findus__grid { max-width: calc(100% - 6.4rem); }
}
@media (max-width: 767px) {
  .findus { padding-top: 6.4rem; }
  .findus__title { font-size: 3rem; }
  .findus__grid { max-width: calc(100% - 4.8rem); flex-direction: column; gap: 1.6rem; }
  /* map first, small building photo strip below */
  .findus__side { order: 1; min-height: 32rem; }
  .findus__photo { order: 2; height: 8rem; min-height: 8rem; }
  .findus__photo img { height: 100%; min-height: 0; object-position: center 35%; }
  .findus__map iframe { min-height: 22rem; }
}

/* ============================================================
   CTA — 418 tall banner
   ============================================================ */
.cta {
  position: relative;
  margin-top: 8.2rem;
  height: 41.8rem;
  overflow: hidden;
  background: var(--bg);
}
/* exact Figma render already carries the 33% opacity baked in;
   parallax is a gentle scale so no edges are ever revealed */
.cta__bg { position: absolute; inset: 0; }
.cta__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* will-change toggled in JS only while this element is in the scroll
     viewport, instead of promoting it to its own layer for the whole
     page lifetime */
}

.cta__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cta__title {
  font-family: "Anton", sans-serif;
  font-size: 4.75rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-align: center;
  margin-right: -.3em; /* optical centering vs letter-spacing */
}

.cta__lead {
  max-width: 81.8rem;
  margin-top: 2.6rem;
}

.cta__btns {
  display: flex;
  gap: 2.5rem;
  margin-top: 3.6rem;
}

/* ============================================================
   FOOTER — 944 tall
   ============================================================ */
.footer {
  position: relative;
  /* grid 45.7 + wordmark margin 10 + wordmark box 38 — keep these three in
     sync or the wordmark stops sitting flush with the footer's bottom edge */
  height: 93.7rem;
  overflow: hidden;
}

.footer__grid { position: relative; height: 45.7rem; }

.footer__logo {
  position: absolute;
  left: 21.2rem;
  top: 13.3rem;
  width: 18rem;
  height: 22.2rem;
  object-fit: contain;
}

.footer__col { position: absolute; top: 14rem; }
.footer__col--touch  { left: 49rem;  top: 14rem; }
.footer__col--hours  { left: 86.3rem; top: 15.3rem; }
.footer__col--social { left: 133.5rem; top: 15.5rem; }

.footer__col h4 {
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: 3.6rem;
}

.footer__col ul { display: flex; flex-direction: column; gap: 1.6rem; }
.footer__col li {
  display: flex;
  gap: 1.2rem;
  font-size: 1.6rem;
  line-height: 1.2;
}
.footer__col a { transition: color .3s ease; }
.footer__col a:hover { color: var(--yellow); }

.ficon { width: 2rem; height: 2rem; object-fit: contain; flex-shrink: 0; }

.hours li { display: flex; gap: 1.5rem; }
.hours li span:first-child { width: 13rem; }

.footer__note {
  position: absolute;
  left: 154.5rem;
  top: 14.5rem;
  font-size: 1.6rem;
  color: #2a2a2a;
}

.footer__line {
  border: none;
  border-top: 1px solid var(--white);
  width: 135.3rem;
  margin: 0 auto;
  margin-top: 0;
}

.footer__wordmark {
  margin-top: 10rem;  /* was 16rem — sits closer to the divider */
  height: 38rem;      /* clips the wordmark's tail against the footer edge */
  display: flex;
  justify-content: center;
  /* without this, flex's default stretch overrides the img's height:auto and
     squashes the box — the SVG then letterboxes itself inside and `width`
     below stops having any real effect */
  align-items: flex-start;
  overflow: hidden;
}
.footer__wordmark img {
  width: 172rem;      /* was 155.7rem */
  height: auto;
  /* will-change toggled in JS only while this element is in the scroll
     viewport, instead of promoting it to its own layer for the whole
     page lifetime */
}

/* ============================================================
   REVEAL DEFAULTS (JS toggles; keep visible without JS)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   RESPONSIVE — TABLET (641px – 1024px)
   1rem = 10px on a 768px grid
   ============================================================ */
@media (max-width: 1024px) {
  html { font-size: calc(100vw / 76.8); }

  /* --- nav: burger + CTA, hide inline links --- */
  .nav {
    height: 8rem;
    padding: 0 2.4rem;
    justify-content: space-between;
  }
  .nav__logo { position: static; display: flex; align-items: center; }
  .nav__logo img { width: 4.6rem; height: 5.6rem; }
  .nav__links { display: none; }
  /* both CTAs collapse into the burger menu on tablet & below */
  .nav__cta { display: none; }
  .nav__burger { display: flex; margin-left: auto; }

  /* --- hero --- */
  .hero { margin-top: 8rem; height: 62rem; }
  .hero__glass {
    left: 8%;
    width: 84%;
    top: 50%;
    transform: translateY(-50%);
    height: auto;
    padding: 5rem 2.4rem;
  }
  .hero__title img { width: min(64rem, 86%); }
  .hero__line { width: min(66rem, 88%); margin: 3rem 0 2.2rem; }
  .hero__sub { font-size: 2rem; letter-spacing: .5em; margin-right: -.5em; }

  /* --- type --- */
  .kicker { font-size: 1.8rem; }
  .lead { font-size: 1.8rem; line-height: 1.45; padding: 0 3.2rem; }

  /* --- parties: 2 × 2 grid --- */
  .parties { padding-top: 7.2rem; }
  .parties__cards {
    flex-wrap: wrap;
    gap: 3.2rem;
    margin-top: 5.4rem;
    padding: 0 3.2rem;
  }
  .pcard { width: 32.1rem; height: auto; }

  /* --- marquee --- */
  .marquee { margin-top: 8rem; height: 9.6rem; }
  .marquee__track img { height: 4.4rem; margin-right: 3.2rem; }

  /* --- about --- */
  .about { padding-top: 8rem; }
  .about__lead { max-width: 64rem; }

  /* --- services --- */
  .services { padding-top: 8rem; }
  .scard { height: 42rem; }
  .scard[style] { --w: 38rem !important; }
  .scard--wide[style] { --w: 62rem !important; }
  .scard__icon { width: 10rem; height: 10rem; }
  .scard__label h3 { font-size: 3rem; }
  .scard__label { padding: 0 0 2rem 2.4rem; height: min(var(--lh, 19.8rem), 60%); }
  .scard--blurall .scard__label { height: 100%; }

  /* --- gallery: same mosaic, fluid width --- */
  .gallery { padding-top: 7.2rem; }
  .gal {
    width: calc(100% - 6.4rem);
    max-width: 72rem;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 15rem);
    column-gap: .8rem;
    row-gap: .8rem;
  }

  /* --- cta --- */
  .cta { margin-top: 7.2rem; height: auto; padding: 7.2rem 3.2rem; }
  .cta__title { font-size: 3.6rem; letter-spacing: .22em; margin-right: -.22em; }
  .cta__lead { max-width: 60rem; }
  .cta__btns { margin-top: 3.2rem; }

  /* --- footer: 3-column flow grid --- */
  .footer { height: auto; }
  .footer__grid {
    height: auto;
    display: grid;
    grid-template-columns: auto 1fr 1fr 1fr;
    align-items: start;
    gap: 4rem;
    padding: 6.4rem 3.2rem 0;
  }
  .footer__logo { position: static; width: 12rem; height: 14.8rem; }
  .footer__col { position: static; }
  .footer__col h4 { margin-bottom: 2.4rem; }
  .footer__note {
    position: static;
    grid-column: 2 / -1;
    margin-top: -2.4rem;
    color: #4a4a4a;
  }
  .footer__line { width: calc(100% - 6.4rem); margin-top: 4.8rem; }
  /* at width:100% the wordmark is 24.45vw tall (1558x381) — a 22vw box keeps
     the same ~10% tail bleed the desktop layout has */
  .footer__wordmark { margin-top: 4.5rem; height: 22vw; }
  .footer__wordmark img { width: 100%; }
}

/* ============================================================
   RESPONSIVE — MOBILE (≤ 640px)
   1rem = 10px on a 430px grid
   ============================================================ */
@media (max-width: 640px) {
  html { font-size: calc(100vw / 43); }

  /* --- nav --- */
  .nav { height: 7.2rem; padding: 0 2rem; }
  .nav__logo img { width: 4rem; height: 5rem; }
  .nav__cta { display: none; }

  /* --- hero --- */
  .hero { margin-top: 7.2rem; height: 52rem; }
  .hero__img--left  { left: 0;   width: 30%; }
  .hero__img--mid   { left: 30%; width: 55%; }
  .hero__img--right { left: 85%; width: 15%; }
  .hero__glass { left: 5%; width: 90%; padding: 4rem 2rem; }
  .hero__title img { width: 86%; }
  .hero__line { width: 86%; margin: 2.4rem 0 1.8rem; }
  .hero__sub { font-size: 1.3rem; letter-spacing: .3em; margin-right: -.3em; white-space: normal; padding: 0 1rem; }

  /* --- type --- */
  .kicker { font-size: 1.6rem; }
  .lead { font-size: 1.6rem; padding: 0 2.4rem; }
  .script { height: 7rem; }
  .parties .script img { width: min(34rem, 84vw); }
  .about .script img,
  .services .script img,
  .gallery .script img { max-width: 84vw; }

  /* --- parties: 2 cards per row on mobile --- */
  .parties { padding-top: 6.4rem; }
  .parties__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    row-gap: 1.6rem;
    margin-top: 4rem;
    padding: 0 1.6rem;
    max-width: none;
  }
  .pcard { width: auto; min-width: 0; height: auto; }
  .pcard__bar { min-height: 7rem; padding: .8rem .9rem; gap: .6rem; }
  .pcard__info h3 { font-size: 1.45rem; overflow-wrap: anywhere; }
  .pcard__info p { font-size: 1.05rem; margin-top: .2rem; white-space: nowrap; }
  .pcard__date { font-size: 1.7rem; line-height: 1.1; white-space: nowrap; }

  /* --- marquee --- */
  .marquee { margin-top: 6.4rem; height: 8rem; }
  .marquee__track img { height: 3.6rem; margin-right: 2.4rem; }

  /* --- about --- */
  .about { padding-top: 6.4rem; }

  /* --- services --- */
  .services { padding-top: 6.4rem; }
  .scard { height: 36rem; }
  .scard[style] { --w: 30rem !important; }
  .scard--wide[style] { --w: 42rem !important; }
  .scard__icon { width: 8rem; height: 8rem; }
  .scard__label h3 { font-size: 2.4rem; }
  .scard__label { padding: 0 0 1.8rem 2rem; }

  /* --- gallery: 2-column remix --- */
  .gallery { padding-top: 6.4rem; }
  .gal {
    width: calc(100% - 4.8rem);
    max-width: none;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, 14rem);
    gap: .8rem;
  }
  .g1 { grid-column: 1; grid-row: 1; }
  .g2 { grid-column: 2; grid-row: 1; }
  .g3 { grid-column: 1; grid-row: 2 / span 2; }
  .g4 { grid-column: 2; grid-row: 2 / span 2; }
  .g5 { grid-column: 1; grid-row: 4 / span 2; }
  .g6 { grid-column: 2; grid-row: 4; }
  .g7 { grid-column: 2; grid-row: 5; }
  .g8 { grid-column: 1 / span 2; grid-row: 6; }

  /* --- cta --- */
  .cta { margin-top: 6.4rem; padding: 6.4rem 2.4rem; }
  .cta__title { font-size: 2.6rem; letter-spacing: .14em; margin-right: -.14em; }
  .cta__btns { flex-direction: column; gap: 1.6rem; margin-top: 3rem; width: 100%; align-items: center; }
  .btn--solid, .btn--outline { width: min(29.2rem, 100%); }

  /* --- footer: single column --- */
  .footer__grid {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    padding: 6.4rem 2.4rem 0;
  }
  .footer__logo { width: 9rem; height: 11rem; }
  .footer__col h4 { margin-bottom: 2rem; }
  .footer__note { margin-top: -2.4rem; }
  .footer__line { width: calc(100% - 4.8rem); margin-top: 4rem; }
  .footer__wordmark { margin-top: 3.8rem; height: 22vw; }
  .footer__wordmark img { width: 100%; }
}