:root {
  --ink: #000;
  --paper: #fff;
  --gray-on-dark: #9b9b9b;
  --gray-on-light: #5c5c5c;
  --rule-dark: #262626;
  --rule-light: #e4e4e4;

  --font: "Archivo", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1280px;
  --section-pad: clamp(72px, 10vw, 140px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, dl, dd { margin: 0; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--paper); color: var(--ink); padding: 10px 16px;
}
.skip:focus { top: 8px; }

/* ---------- Type ---------- */
.h2 {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  font-weight: 800;
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px;
  border: 2px solid transparent; border-radius: 999px;
  font-weight: 700; font-size: 1rem; text-decoration: none; white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn--sm { min-height: 42px; padding: 0 20px; font-size: .9375rem; }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: transparent; color: var(--paper); border-color: var(--paper); }
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost-light { border-color: rgba(255,255,255,.4); color: var(--paper); }
.btn--ghost-light:hover { border-color: var(--paper); }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid var(--rule-dark);
}
.topbar__inner { display: flex; align-items: center; gap: 32px; height: 72px; }

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__mark { width: 40px; height: auto; mix-blend-mode: screen; }
.brand__name {
  font-weight: 800; font-size: 1.0625rem;
  font-variation-settings: "wdth" 125; letter-spacing: -0.01em;
}

.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a { text-decoration: none; color: var(--gray-on-dark); font-weight: 500; }
.nav a:hover { color: var(--paper); }

.menu-toggle {
  display: none; width: 44px; height: 44px; margin-left: 4px;
  background: none; border: 0; color: var(--paper); cursor: pointer; position: relative;
}
.menu-toggle span {
  position: absolute; left: 10px; right: 10px; height: 2px; background: currentColor;
  transition: transform .2s;
}
.menu-toggle span:first-child { top: 17px; }
.menu-toggle span:last-child { top: 25px; }
.nav-open .menu-toggle span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-open .menu-toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  overflow: clip;
  --hero-fs: min(calc((100vw - 2 * var(--gutter)) / 8.6), 8.6rem);
  position: relative; padding-top: clamp(40px, 7vw, 88px);
}
.hero .wrap { position: relative; }

.hero__title {
  font-weight: 900;
  font-variation-settings: "wdth" 125;
  font-size: var(--hero-fs);
  line-height: .9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: .04em; will-change: transform; }
.hero__title .line > span { display: inline-block; animation: rise .9s cubic-bezier(.2,.7,.1,1) both; }
.hero__title .line:nth-child(2) > span { animation-delay: .08s; }
.hero__title .line:nth-child(3) > span { animation-delay: .16s; }
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }

.hero__mark {
  position: absolute;
  right: var(--gutter);
  top: calc(var(--hero-fs) * 1.05);
  width: calc(var(--hero-fs) * 2.4);
  height: auto;
  mix-blend-mode: screen;
  animation: fade 1.2s .4s both;
  will-change: transform;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.hero__body { display: grid; gap: 12px; justify-items: start; margin-top: clamp(32px, 5vw, 56px); }
.hero__lead { font-size: clamp(1.25rem, 2.2vw, 1.625rem); font-weight: 600; }
.hero__text { max-width: 36ch; color: var(--gray-on-dark); font-size: 1.125rem; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

.facts { margin-top: clamp(48px, 7vw, 96px); border-top: 1px solid var(--rule-dark); }
.facts__inner { display: grid; grid-template-columns: repeat(3, 1fr); }
.facts p {
  padding: 22px 0; color: var(--gray-on-dark); font-size: .9375rem;
  display: flex; flex-direction: column; gap: 2px;
}
.facts p + p { padding-left: 24px; border-left: 1px solid var(--rule-dark); }
.facts strong { color: var(--paper); font-weight: 700; font-size: 1.0625rem; }

/* ---------- Sections ---------- */
.section { padding: var(--section-pad) 0; }
.section--light { background: var(--paper); color: var(--ink); }
.section--dark { background: var(--ink); color: var(--paper); }

.section__head {
  display: flex; justify-content: space-between; align-items: end; gap: 24px 48px; flex-wrap: wrap;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.section__head p { max-width: 40ch; color: var(--gray-on-dark); }

/* ---------- Services menu ---------- */
.services { display: grid; grid-template-columns: 5fr 7fr; gap: 48px clamp(48px, 7vw, 120px); align-items: start; }
.services__intro { position: sticky; top: 120px; display: grid; gap: 24px; justify-items: start; }
.services__intro p { color: var(--gray-on-light); max-width: 36ch; }

.menu__list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.menu__item { padding: 26px 0 24px; border-bottom: 1px solid var(--rule-light); }
.menu__row { display: flex; align-items: baseline; gap: 14px; }
.menu__name {
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 800; font-variation-settings: "wdth" 112; letter-spacing: -0.015em;
}
.menu__leader { flex: 1; min-width: 24px; border-bottom: 2px dotted #b5b5b5; transform: translateY(-6px); }
.menu__price {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 900; font-variation-settings: "wdth" 125; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.menu__price--small { font-size: 1.0625rem; font-weight: 700; font-variation-settings: "wdth" 100; letter-spacing: 0; }
.menu__desc { margin-top: 6px; color: var(--gray-on-light); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.menu__item--feature {
  background: var(--ink); color: var(--paper);
  margin: 0 -24px; padding-left: 24px; padding-right: 24px; border-bottom-color: var(--ink);
}
.menu__item--feature .menu__desc { color: var(--gray-on-dark); }
.menu__item--feature .menu__leader { border-color: #555; }
.tag {
  display: inline-block; padding: 2px 10px; border: 1px solid currentColor; border-radius: 999px;
  font-size: .8125rem; font-weight: 600; color: var(--paper);
}

.menu__subhead { margin: 56px 0 0; padding-bottom: 14px; font-size: 1.0625rem; font-weight: 700; }
.menu__list--included { border-top-width: 1px; }
.menu__list--included .menu__name { font-size: 1.25rem; }

/* ---------- Scrolling text band ---------- */
.band {
  overflow: clip; padding: clamp(40px, 6vw, 80px) 0;
  background: var(--ink); color: var(--paper);
  display: grid; gap: clamp(4px, 1vw, 12px);
}
.band__row {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 40px);
  width: max-content; white-space: nowrap; will-change: transform;
  font-size: clamp(3rem, 9vw, 8.5rem); font-weight: 900; font-variation-settings: "wdth" 125;
  letter-spacing: -0.03em; line-height: 1; text-transform: uppercase;
}
.band__row img { height: .6em; width: auto; mix-blend-mode: screen; flex: none; }
.band .outline { color: transparent; -webkit-text-stroke: 1.5px var(--paper); }

/* ---------- Gallery ---------- */
.band + .section { padding-top: clamp(24px, 4vw, 48px); }
.gallery {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(180px, 22vw, 300px); grid-auto-flow: dense; gap: 12px;
}
.tile {
  position: relative; overflow: hidden; border-radius: 6px;
  background: #161616; border: 0; padding: 0; color: var(--paper); cursor: zoom-in;
  font: inherit;
}
.tile--tall { grid-row: span 2; }
.tile img, .tile video {
  position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; object-position: center 35%;
  transform: translateY(var(--shift, 0px)); will-change: transform;
}
.tile:hover img, .tile:hover video { transform: translateY(var(--shift, 0px)) scale(1.03); transition: transform .5s; }
.tile__caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 14px 12px; text-align: left;
  background: linear-gradient(transparent, rgba(0,0,0,.75)); font-size: .9375rem; font-weight: 600;
}
.tile__play {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,0,0,.6);
}
.tile__play::after {
  content: ""; position: absolute; left: 12px; top: 9px;
  border-left: 9px solid var(--paper); border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.tile--empty {
  cursor: default; display: grid; place-content: center; justify-items: center; gap: 10px;
  color: #6d6d6d; font-size: .875rem;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,.03) 14px 28px) 0 var(--shift, 0px) / 100% 200%,
    #111111;
  border: 1px dashed #333;
}
.tile--empty svg, .socials svg {
  width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.gallery__more { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }

/* Lightbox */
.lightbox {
  padding: 0; border: 0; background: transparent; max-width: 92vw; max-height: 92vh; overflow: visible;
}
.lightbox::backdrop { background: rgba(0,0,0,.92); }
.lightbox__media img, .lightbox__media video { max-width: 92vw; max-height: 84vh; border-radius: 6px; }
.lightbox__media p { color: var(--paper); margin-top: 12px; text-align: center; }
.lightbox__close {
  position: fixed; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4); background: #000; color: #fff; font-size: 1.75rem; cursor: pointer;
}

/* ---------- Promise ---------- */
.promise .h2 { margin-bottom: clamp(32px, 5vw, 56px); }
.promise__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
.promise__list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.promise__list li {
  display: flex; align-items: center; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--rule-light);
  font-size: clamp(1.25rem, 2.2vw, 1.625rem); font-weight: 800; font-variation-settings: "wdth" 112;
}
.promise__list svg {
  flex: none; width: 36px; height: 36px; padding: 7px; border-radius: 50%; background: var(--ink);
  fill: none; stroke: var(--paper); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
.loyalty { border: 2px solid var(--ink); border-radius: 6px; padding: clamp(24px, 3vw, 36px); }
.loyalty h3 { font-size: 1.375rem; font-weight: 800; font-variation-settings: "wdth" 112; margin-bottom: 8px; }
.loyalty p { color: var(--gray-on-light); max-width: 36ch; }

.loyalty { position: relative; }
.loyalty.is-shake { animation: shake .35s; }
@keyframes shake {
  0%, 100% { transform: none; }
  20% { transform: translate(-3px, 2px) rotate(-.4deg); }
  40% { transform: translate(3px, -2px) rotate(.4deg); }
  60% { transform: translate(-2px, 1px); }
  80% { transform: translate(1px, -1px); }
}

.punch { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; perspective: 500px; cursor: pointer; }
.punch__hole {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  border: 2px dashed #b5b5b5; color: #9b9b9b;
  display: grid; place-items: center; font-size: .8125rem; font-weight: 700;
}
/* the punched hole */
.punch__hole::before {
  content: ""; position: absolute; inset: 10px; border-radius: 50%;
  background: var(--ink); transform: scale(0);
}
/* the paper dot that falls out */
.punch__hole::after {
  content: ""; position: absolute; left: 10px; top: 10px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--paper); border: 1px solid #cfcfcf; opacity: 0; pointer-events: none;
}
.punch__hole.is-punched { border: 2px solid var(--ink); color: transparent; animation: squish .4s; }
.punch__hole.is-punched::before { transform: scale(1); animation: hole .35s cubic-bezier(.3,1.6,.5,1); }
.punch__hole.is-punched::after { animation: chad .9s ease-in forwards; }
@keyframes squish { 0% { transform: scale(1); } 35% { transform: scale(.8); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes hole { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes chad {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(16px, 70px) rotate(160deg) scale(.7); }
}

/* the free one */
.punch__word { display: none; }
.punch__hole--free::before, .punch__hole--free::after {
  width: auto; height: auto; inset: -2px;
  background: none; border: 2px solid var(--ink); transform: none; opacity: 0;
}
.punch__hole--free.is-free {
  background: var(--ink); border: 2px solid var(--ink); color: var(--paper);
  font-size: .75rem; font-weight: 900;
  animation: flip .6s ease-in-out, flip-face .6s steps(1) forwards;
}
.punch__hole--free.is-free .punch__num { display: none; }
.punch__hole--free.is-free .punch__word { display: block; animation: pop-in .6s steps(1); }
.punch__hole--free.is-free::before { animation: ring .8s .3s ease-out; }
.punch__hole--free.is-free::after { animation: ring .8s .45s ease-out; }
@keyframes flip {
  0% { transform: rotateY(0) scale(1); }
  50% { transform: rotateY(90deg) scale(1.25); }
  100% { transform: rotateY(0) scale(1); }
}
@keyframes flip-face {
  0% { background: var(--paper); border-style: dashed; border-color: #b5b5b5; color: #9b9b9b; }
  50% { background: var(--ink); border-style: solid; border-color: var(--ink); color: var(--paper); }
}
@keyframes pop-in { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes ring {
  0% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.4); }
}

/* counter, then the stamp */
.punch__status { position: relative; height: 56px; margin-top: 18px; display: flex; align-items: center; }
.punch__count {
  color: var(--gray-on-light); font-weight: 600; font-variant-numeric: tabular-nums;
  transition: opacity .2s, transform .2s;
}
.is-done .punch__count { opacity: 0; transform: translateY(-10px); }
.stamp {
  position: absolute; left: -4px; top: 50%;
  padding: 6px 14px 7px; border: 3px solid var(--ink); border-radius: 6px;
  font-size: 1.375rem; font-weight: 900; font-variation-settings: "wdth" 125;
  letter-spacing: -0.01em; text-transform: uppercase; line-height: 1; white-space: nowrap;
  transform: translateY(-50%) rotate(-6deg); opacity: 0;
}
.is-done .stamp { opacity: 1; animation: slam .45s cubic-bezier(.25,.9,.35,1.15); }
@keyframes slam {
  0% { opacity: 0; transform: translateY(-50%) rotate(-20deg) scale(2.8); }
  55% { opacity: 1; transform: translateY(-50%) rotate(-5deg) scale(.92); }
  100% { opacity: 1; transform: translateY(-50%) rotate(-6deg) scale(1); }
}

/* ---------- Offer ---------- */
.offer { padding: clamp(56px, 7vw, 96px) 0; border-top: 1px solid var(--rule-dark); }
.offer__inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.offer__text { margin-top: 12px; color: var(--gray-on-dark); font-size: 1.125rem; }
.offer__text strong { color: var(--paper); }
.offer__actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.code {
  display: inline-flex; align-items: center; gap: 16px; min-height: 52px; padding: 0 8px 0 22px;
  border: 2px dashed rgba(255,255,255,.55); border-radius: 999px; background: none;
  color: var(--paper); font: inherit; cursor: pointer;
}
.code:hover { border-color: var(--paper); }
.code__value { font-weight: 900; font-variation-settings: "wdth" 125; font-size: 1.125rem; letter-spacing: .02em; }
.code__label {
  background: #222; border-radius: 999px; padding: 8px 14px; font-size: .875rem; font-weight: 600;
  min-width: 96px; text-align: center;
}

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 48px clamp(48px, 6vw, 96px); align-items: stretch; }
.contact__info { display: grid; gap: 40px; align-content: start; justify-items: start; }
.contact__list { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; width: 100%; }
.contact__list dt { color: var(--gray-on-light); font-size: .9375rem; margin-bottom: 4px; }
.contact__list dd { font-weight: 700; font-size: 1.125rem; overflow-wrap: anywhere; }
.contact__list a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .2s; }
.contact__list a:hover { background-size: 100% 2px; }
.socials { display: grid; gap: 8px; }
.socials a { display: inline-flex; align-items: center; gap: 8px; width: max-content; }
.socials svg { width: 20px; height: 20px; stroke-width: 2; }
.socials svg .fill { fill: currentColor; stroke: none; }
.contact__map { min-height: 380px; border-radius: 6px; overflow: hidden; border: 1px solid var(--rule-light); }
.contact__map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; filter: grayscale(1) contrast(1.05); }

/* ---------- Footer ---------- */
.footer { padding: 40px 0; border-top: 1px solid var(--rule-dark); }
.footer__inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer p { color: var(--gray-on-dark); font-size: .9375rem; }

.bookbar { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .services, .contact { grid-template-columns: 1fr; }
  .services__intro { position: static; }
  .promise__grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .nav {
    position: fixed; inset: 72px 0 auto 0; flex-direction: column; gap: 0;
    background: var(--ink); border-bottom: 1px solid var(--rule-dark);
    padding: 8px var(--gutter) 20px;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  .nav a { padding: 14px 0; font-size: 1.25rem; color: var(--paper); border-bottom: 1px solid var(--rule-dark); }
  .nav-open .nav { transform: none; opacity: 1; visibility: visible; }
  .topbar__book { margin-left: auto; }
  .menu-toggle { display: block; }
  .topbar__inner { gap: 12px; }

  .hero__body { justify-items: stretch; }
  .hero__actions .btn { flex: 1; }
  .facts__inner { grid-template-columns: 1fr; }
  .facts p { padding: 16px 0; }
  .facts p + p { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule-dark); }

  .menu__item--feature { margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); }
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 44vw; gap: 8px; }
  .contact__list { grid-template-columns: 1fr; }
  .contact__map, .contact__map iframe { min-height: 300px; }

  .bookbar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    background: rgba(0,0,0,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--rule-dark);
  }
  .bookbar .btn { width: 100%; }
  .footer { padding-bottom: 110px; }
}

@media (max-width: 400px) {
  .brand__name { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}