/* =======================================================
   HM logo word-swap
   - Cross-fades the eyebrow + first title word with new copy.
   - Subtitle fades out, no replacement.
   - Lines, frame, and rest of the page are untouched.
   ======================================================= */

/* Make the eyebrow + first-line wrapper a positioning container so the
   swap text can overlay the original exactly. */
.hero-badge {
  position: relative;
}
.neon-frame .hm-line1 {
  position: relative;
  display: inline-block;
}

/* Original copy — visible by default, fades UP and OUT on swap-on.
   Mirrors the reverse direction of the original site's fadeUp keyframe. */
.hero-badge .hm-orig,
.neon-frame .hm-line1 .hm-orig,
.neon-frame .hero-subtitle {
  display: inline-block;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 720ms ease,
    transform 800ms cubic-bezier(.2, .7, .25, 1);
}

body.hm-swap-on .hero-badge .hm-orig,
body.hm-swap-on .neon-frame .hm-line1 .hm-orig,
body.hm-swap-on .neon-frame .hero-subtitle {
  opacity: 0 !important;
  transform: translateY(-24px);
  animation: none !important;       /* override the original site's fadeUp */
  pointer-events: none;
}

/* New copy — sits on top of the original, hidden until swap-on.
   Fades UP and IN with the same easing the originals used. */
.hero-badge .hm-swap,
.neon-frame .hm-line1 .hm-swap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: inherit;
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  /* Inherit color/font from parent so it matches the original look exactly. */
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
  transition:
    opacity 760ms ease 380ms,
    transform 880ms cubic-bezier(.2, .7, .22, 1) 380ms;
}

/* Eyebrow swap inherits the eyebrow's letter-spacing + uppercase. */
.hero-badge .hm-swap {
  text-transform: inherit;
  font-weight: inherit;
}

/* Title-line swap centers under the original (so "The" lines up over "Hustler's"). */
.neon-frame .hm-line1 .hm-swap {
  left: 50%;
  right: auto;
  transform: translate(-50%, 24px);
}

body.hm-swap-on .hero-badge .hm-swap,
body.hm-swap-on .neon-frame .hm-line1 .hm-swap {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
body.hm-swap-on .neon-frame .hm-line1 .hm-swap {
  transform: translate(-50%, 0);
}

/* === Location boxes → login box swap.
       The two .hero-option boxes collapse, a single login box grows down
       in their place. Width is inherited from the .hero-right column so
       it spans the same horizontal space the two boxes occupied combined. === */
.hero-options {
  transition:
    opacity 480ms ease,
    max-height 760ms cubic-bezier(.2, .7, .22, 1) 120ms,
    margin 760ms cubic-bezier(.2, .7, .22, 1) 120ms;
  max-height: 220px;
  overflow: hidden;
}
body.hm-swap-on .hero-options {
  opacity: 0 !important;
  pointer-events: none;
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.hm-login-box {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 clamp(1rem, 2.5vw, 1.6rem);
  border: 1px solid rgba(198, 153, 62, 0);
  background: rgba(198, 153, 62, 0);
  transition:
    max-height 920ms cubic-bezier(.2, .7, .22, 1),
    opacity 600ms ease,
    padding 920ms cubic-bezier(.2, .7, .22, 1),
    border-color 600ms ease,
    background 600ms ease,
    margin 760ms cubic-bezier(.2, .7, .22, 1);
  margin-top: 0;
}
body.hm-swap-on .hm-login-box {
  max-height: 560px;
  opacity: 1;
  padding: clamp(1.2rem, 2.5vw, 1.6rem) clamp(1rem, 2.5vw, 1.6rem) clamp(1.2rem, 2.5vw, 1.6rem);
  border-color: rgba(198, 153, 62, .55);
  background: rgba(198, 153, 62, .03);
  margin-top: 1rem;
  transition:
    max-height 1080ms cubic-bezier(.2, .7, .22, 1) 540ms,
    opacity 760ms ease 600ms,
    padding 1080ms cubic-bezier(.2, .7, .22, 1) 540ms,
    border-color 760ms ease 540ms,
    background 760ms ease 540ms,
    margin 760ms ease 540ms;
}
/* Collapse the login box once the user is authenticated. */
body.hm-swap-on.hm-swap-unlocked .hm-login-box {
  max-height: 0 !important;
  opacity: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  margin-top: 0 !important;
  transition:
    max-height 800ms cubic-bezier(.2, .7, .22, 1),
    opacity 500ms ease,
    padding 800ms cubic-bezier(.2, .7, .22, 1),
    border-color 500ms ease,
    background 500ms ease,
    margin 600ms ease;
}

.hm-login-box__eyebrow {
  margin: 0 0 .35rem;
  font-family: 'Libre Franklin', sans-serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-dark, #a47b2c);
}
.hm-login-box__title {
  margin: 0 0 1rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  color: #1a1a1a;
}
.hm-login-box__form {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.hm-login-box__input {
  width: 100%;
  padding: .8rem 0;
  border: none;
  border-bottom: 1px solid rgba(164, 123, 44, .35);
  background: transparent;
  border-radius: 0;
  color: #1a1a1a;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  outline: none;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.hm-login-box__input::placeholder {
  color: rgba(164, 123, 44, .55);
  font-style: italic;
}
.hm-login-box__input:focus {
  border-bottom-color: var(--gold-dark, #a47b2c);
  box-shadow: 0 1px 0 0 rgba(164, 123, 44, .5);
}
.hm-login-box__btn {
  margin-top: .8rem;
  padding: .85em 1.4em;
  border: 1px solid var(--gold-dark, #a47b2c);
  background: var(--gold-dark, #a47b2c);
  color: #fff;
  cursor: pointer;
  font-family: 'Libre Franklin', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: background .2s ease, border-color .2s ease;
}
.hm-login-box__btn:hover {
  background: #8a661f;
  border-color: #8a661f;
}

/* === Sections that collapse out of the way during swap-on so the page
       focuses on the hero swap + house menu. Includes the about section
       AND everything beneath the services menu (portfolio, process,
       tagline, contact, footer). === */
section.about,
section.portfolio,
section.process,
section.tagline-section,
section.contact,
.site-footer,
footer {
  transition:
    opacity 720ms ease,
    max-height 920ms cubic-bezier(.2, .7, .22, 1) 80ms,
    padding 920ms cubic-bezier(.2, .7, .22, 1) 80ms,
    margin 720ms cubic-bezier(.2, .7, .22, 1) 80ms;
  max-height: 4000px;
  overflow: hidden;
}
body.hm-swap-on section.about,
body.hm-swap-on section.portfolio,
body.hm-swap-on section.process,
body.hm-swap-on section.tagline-section,
body.hm-swap-on section.contact,
body.hm-swap-on .site-footer,
body.hm-swap-on footer {
  opacity: 0 !important;
  pointer-events: none;
  max-height: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* === Client profile circle — fixed top-right, raised above the page chrome.
       Hidden by default; only visible when admin sets a real image src
       (toggled via the .hm-client-photo--has-image class from JS).
       Only visible during swap-on AND when an image is present. === */
.hm-client-photo {
  position: fixed;
  top: clamp(0.6rem, 1.6vw, 1rem);
  right: clamp(4.5rem, 8vw, 6rem);  /* clear of hamburger nav on the far right */
  z-index: 99;
  display: none;                    /* hidden by default — clients see nothing */
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  opacity: 0;
  transform: translateY(-12px) scale(.92);
  pointer-events: none;
  transition:
    opacity 620ms ease,
    transform 720ms cubic-bezier(.2, .7, .22, 1);
}
/* Show only when admin has dropped in a photo. */
.hm-client-photo.hm-client-photo--has-image {
  display: flex;
}
/* And only animate visible while the curtain is swapped on. */
body.hm-swap-on .hm-client-photo.hm-client-photo--has-image {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition:
    opacity 720ms ease 700ms,
    transform 820ms cubic-bezier(.2, .7, .22, 1) 700ms;
}

.hm-client-photo__ring {
  position: relative;
  width: clamp(54px, 7vw, 78px);
  height: clamp(54px, 7vw, 78px);
  border-radius: 50%;
  border: 2px solid var(--gold-dark, #a47b2c);
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(164, 123, 44, .25);
  background: #f7f3ea;
  overflow: hidden;
}
.hm-client-photo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.hm-client-photo__label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--gold-dark, #a47b2c);
}

/* === Services grid swap.
       Original .services-grid fades out + collapses, .hm-services-grid
       fades up in its place with the new lineup. === */
.services-grid {
  transition:
    opacity 720ms ease,
    max-height 920ms cubic-bezier(.2, .7, .22, 1) 120ms,
    margin 720ms cubic-bezier(.2, .7, .22, 1) 120ms;
  max-height: 4000px;
  overflow: hidden;
}
body.hm-swap-on .services-grid {
  opacity: 0 !important;
  pointer-events: none;
  max-height: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.hm-services-grid {
  display: none;
  flex-direction: column;
  gap: 12px;
  max-width: min(680px, 92%);
  margin-inline: auto;
}
body.hm-swap-on.hm-swap-unlocked .hm-services-grid {
  display: flex;
  animation: hm-services-grid-in 760ms cubic-bezier(.2, .7, .22, 1) both;
}
@keyframes hm-services-grid-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Keep the rest of the original swap-on rule for now to avoid breaking the
   block — these properties become no-ops since display:flex above wins. */
body.hm-swap-on.hm-swap-unlocked .hm-services-grid--legacy {
  max-height: 4000px;
  opacity: 1;
  transform: translateY(0);
  transition:
    max-height 1080ms cubic-bezier(.2, .7, .22, 1) 540ms,
    opacity 760ms ease 600ms,
    transform 880ms cubic-bezier(.2, .7, .22, 1) 600ms;
}

.hm-service-card {
  position: relative;
  padding: clamp(1.1rem, 2.2vw, 1.4rem) clamp(1.25rem, 2.4vw, 1.6rem);
  border: 1px solid #e8e4df;
  background: #fff;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name action"
    "desc action";
  column-gap: 1.2rem;
  row-gap: .15rem;
  align-items: center;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
  outline: none;
}
.hm-service-card:focus-visible { box-shadow: 0 0 0 2px rgba(164,123,44,.3); }
.hm-service-card--selected {
  border-color: var(--gold-dark, #a47b2c);
  background: linear-gradient(180deg, #fff 0%, #fdf9ef 100%);
}
.hm-service-card--selected .hm-service-card__radio {
  background: var(--gold-dark, #a47b2c);
  border-color: var(--gold-dark, #a47b2c);
}
.hm-service-card--selected .hm-service-card__radio::after {
  opacity: 1;
}

.hm-service-card__action {
  grid-area: action;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: .35rem;
}

.hm-service-card__radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #cfc8be;
  background: #fff;
  position: relative;
  margin-top: .25rem;
  transition: background .2s ease, border-color .2s ease;
}
.hm-service-card__radio::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translate(-55%, -65%) rotate(45deg);
  opacity: 0;
  transition: opacity .2s ease;
}
.hm-service-card__name {
  grid-area: name;
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}
.hm-service-card__desc { grid-area: desc; margin-bottom: 0; }
.hm-service-card__price { margin-top: 0; white-space: nowrap; }

.hm-service-card__deposit {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: .82rem;
  color: #6b6258;
  white-space: nowrap;
  margin-top: -.2rem;
}

/* Apple Pay button — black pill, Apple logo + Pay · {verb}. Prototype only;
   real implementation routes through Stripe Apple Pay or PaymentRequest API. */
.hm-apple-pay {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 6px 12px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
}
.hm-apple-pay:hover { background: #1a1a1a; transform: translateY(-1px); }
.hm-apple-pay:active { transform: translateY(0); }
.hm-apple-pay svg {
  width: 13px;
  height: 15px;
  margin-top: -1px;
}
.hm-apple-pay__pay { font-weight: 500; }
.hm-apple-pay__verb {
  font-weight: 400;
  opacity: .85;
}
/* Bottom action bar — sticky pay button with selection summary.
   Only shown after the house-client login is submitted. */
.hm-pay-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1.4rem auto 0;
  padding: clamp(.9rem, 2vw, 1.2rem) clamp(1rem, 2.4vw, 1.5rem);
  border: 1px solid #e8e4df;
  background: #fff;
  max-width: min(680px, 92%);
  position: sticky;
  bottom: 12px;
  z-index: 4;
  box-shadow: 0 -4px 24px rgba(0,0,0,.04);
}
body.hm-swap-on.hm-swap-unlocked .hm-pay-bar { display: flex; }
.hm-pay-bar__summary {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: #6b6258;
  font-style: italic;
}
.hm-pay-bar__svc {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: normal;
  font-weight: 700;
  color: #1a1a1a;
  font-size: 1.05rem;
}
.hm-pay-bar__detail {
  font-size: .9rem;
  color: #6b6258;
}

.hm-apple-pay--bar {
  padding: 14px 22px;
  font-size: .92rem;
  border-radius: 8px;
}
.hm-apple-pay--bar svg { width: 16px; height: 18px; }
.hm-apple-pay:disabled {
  background: #cfc8be;
  cursor: not-allowed;
  opacity: .7;
}
.hm-apple-pay:disabled:hover { background: #cfc8be; transform: none; }

/* "By request" tag — small pill next to the service name. */
.hm-service-card__tag {
  display: inline-block;
  padding: .15em .55em;
  border: 1px solid rgba(164, 123, 44, .45);
  border-radius: 999px;
  font-family: 'Libre Franklin', sans-serif;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-dark, #a47b2c);
  background: rgba(212, 175, 90, .08);
}

/* Request cards use a softer hint of gold so they read as "different." */
.hm-service-card--request {
  background: linear-gradient(180deg, #fff 0%, #fdf9ef 100%);
  border-color: rgba(164, 123, 44, .35);
}
.hm-service-card--request .hm-service-card__price {
  color: var(--gold-dark, #a47b2c);
  font-style: italic;
}
.hm-service-card:hover {
  border-color: var(--gold-dark, #a47b2c);
  transform: translateY(-2px);
}
.hm-service-card--feature {
  border-color: var(--gold-dark, #a47b2c);
  border-width: 1.5px;
}
.hm-service-card__name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: #1a1a1a;
  line-height: 1.15;
}
.hm-service-card__desc {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  color: #6b6258;
  line-height: 1.35;
  margin-bottom: auto;
}
.hm-service-card__price {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--gold-dark, #a47b2c);
  margin-top: .35rem;
}

/* === Toggle trigger — gold pill bottom-right. Visible for testing. === */
#hm-secret-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--gold, #c6993e);
  border: none;
  color: #fff;
  cursor: pointer;
  font-family: 'Libre Franklin', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: 0 6px 20px rgba(198, 153, 62, .35);
  z-index: 100;
  transition: transform .2s ease, box-shadow .2s ease;
}
#hm-secret-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(198, 153, 62, .5);
}

/* When swapped, mute the trigger color so the gold doesn't fight the moment. */
body.hm-swap-on #hm-secret-btn {
  background: transparent;
  color: var(--gold-dark, #a47b2c);
  border: 1px solid var(--gold-dark, #a47b2c);
  box-shadow: none;
}
body.hm-swap-on #hm-secret-btn:hover {
  background: rgba(164, 123, 44, .08);
}

/* === Referral punch card.
       Sits below the pay bar in the house-client view. Looks like a real
       paper card with three punch slots. Each successful booking lands a
       punch. On the third punch, the card tips into a velvet drop-box and
       an "On the House" voucher slides up out of the slot. === */
.hm-punch-wrap {
  max-width: min(680px, 92%);
  margin: 1.6rem auto 2.4rem;
  display: none;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 760ms ease,
    transform 880ms cubic-bezier(.2,.7,.22,1);
}
body.hm-swap-on.hm-swap-unlocked .hm-punch-wrap {
  display: block;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 760ms ease 720ms,
    transform 880ms cubic-bezier(.2,.7,.22,1) 720ms;
  animation: hm-punch-wrap-in 0ms;
}
@keyframes hm-punch-wrap-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hm-punch-stage {
  position: relative;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .85rem;
  perspective: 1100px;
  overflow: hidden;       /* clips card going into box and voucher rising out */
  padding-bottom: 92px;   /* room for the box at the bottom */
}

/* The card itself — credit-card sized, cream stock with grain, gold double border,
   two-panel layout (main message + tear-stub with code) divided by a perforated line. */
.hm-punch-card {
  position: relative;
  width: min(420px, 92%);
  aspect-ratio: 1.586 / 1;
  display: grid;
  grid-template-columns: 1fr 6px 33%;
  border-radius: 9px;
  background:
    /* paper grain */
    radial-gradient(circle at 20% 15%, rgba(164,123,44,.06) 0%, transparent 30%),
    radial-gradient(circle at 80% 85%, rgba(164,123,44,.05) 0%, transparent 35%),
    radial-gradient(circle at 60% 40%, rgba(255,255,255,.5) 0%, transparent 40%),
    /* faint horizontal fibers */
    repeating-linear-gradient(0deg, rgba(164,123,44,.025) 0 1px, transparent 1px 5px),
    /* warm cream gradient */
    linear-gradient(160deg, #fcf7eb 0%, #f3e9cf 100%);
  border: 1px solid rgba(164,123,44,.6);
  box-shadow:
    0 1px 0 #fff inset,
    0 0 0 3px #fbf6ea inset,
    0 0 0 4px rgba(164,123,44,.32) inset,
    0 14px 32px rgba(0,0,0,.14),
    0 4px 10px rgba(0,0,0,.06);
  overflow: hidden;
  transform-origin: 50% 100%;
  transition: transform 520ms cubic-bezier(.4,.05,.25,1.05), opacity 320ms ease;
  font-family: 'Libre Franklin', sans-serif;
}

/* Faint HM monogram bleeding across the card behind everything else. */
.hm-punch-card__monogram {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(8rem, 22vw, 12rem);
  color: rgba(164,123,44,.06);
  letter-spacing: -0.02em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

/* Left panel: copy + punches + brand strip */
.hm-punch-card__main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(.7rem, 2.2vw, .95rem) clamp(.85rem, 2.6vw, 1.05rem) clamp(.45rem, 1.6vw, .65rem);
  gap: .35rem;
}
.hm-punch-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.hm-punch-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding-top: .35rem;
}
.hm-punch-card__brand-strip {
  margin-top: .2rem;
  padding-top: .35rem;
  border-top: 1px solid rgba(164,123,44,.3);
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(164,123,44,.65);
  text-align: center;
}

/* Perforated divider between main and stub. */
.hm-punch-card__perf {
  position: relative;
  z-index: 1;
  width: 6px;
  background:
    radial-gradient(circle at center, transparent 0 1.5px, rgba(164,123,44,.45) 1.5px 2px, transparent 2px) center / 6px 8px repeat-y;
  /* small notches at top and bottom edges */
}
.hm-punch-card__perf::before,
.hm-punch-card__perf::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(164,123,44,.5);
  transform: translateX(-50%);
}
.hm-punch-card__perf::before { top: -6px; }
.hm-punch-card__perf::after { bottom: -6px; }

.hm-punch-card__eyebrow {
  font-family: 'Libre Franklin', sans-serif;
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold-dark, #a47b2c);
  margin: 0;
  position: relative;
  display: inline-block;
  padding-right: .4rem;
}
.hm-punch-card__eyebrow::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  width: 28px;
  height: 1px;
  background: rgba(164,123,44,.5);
  transform: translateY(-50%);
}
.hm-punch-card__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 3.4vw, 1.3rem);
  color: #1a1a1a;
  margin: .2rem 0 0;
  line-height: 1.05;
  letter-spacing: -.01em;
}
/* Right stub: code panel — slightly different paper tone, vertical center. */
.hm-punch-card__code {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  margin: 0;
  padding: clamp(.55rem, 1.8vw, .75rem) clamp(.4rem, 1.4vw, .6rem);
  background:
    repeating-linear-gradient(0deg, rgba(164,123,44,.04) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #f6ecd0 0%, #ecdfb8 100%);
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  text-align: center;
  transition: background .2s ease;
}
.hm-punch-card__code:hover {
  background:
    repeating-linear-gradient(0deg, rgba(164,123,44,.05) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #f9f1da 0%, #f1e6c2 100%);
}
.hm-punch-card__code-label {
  font-family: 'Libre Franklin', sans-serif;
  font-size: .48rem;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold-dark, #a47b2c);
  opacity: .8;
}
.hm-punch-card__code-value {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: clamp(1.15rem, 3.6vw, 1.45rem);
  letter-spacing: .12em;
  color: #1a1a1a;
  margin: 0;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.hm-punch-card__code-action {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-family: 'Libre Franklin', sans-serif;
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-dark, #a47b2c);
  margin-top: .1rem;
}
.hm-punch-card__code-icon {
  width: 11px;
  height: 11px;
  display: inline-block;
}
.hm-punch-card__code.is-copied {
  background:
    repeating-linear-gradient(0deg, rgba(164,123,44,.07) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #f1e2b6 0%, #e6d199 100%);
}
.hm-punch-card__code.is-copied .hm-punch-card__code-action {
  color: #1a1a1a;
}

.hm-punch-card__row {
  display: flex;
  gap: clamp(.45rem, 2.2vw, .8rem);
  padding: 0;
}
.hm-punch-hole {
  width: clamp(30px, 7.4vw, 38px);
  height: clamp(30px, 7.4vw, 38px);
  border-radius: 50%;
  border: 1.5px dashed rgba(164,123,44,.55);
  position: relative;
  background:
    radial-gradient(circle at 50% 50%, rgba(164,123,44,.06) 0%, transparent 70%),
    rgba(255,255,255,.15);
  transition: transform 360ms cubic-bezier(.34,1.56,.64,1), background 320ms ease, border-color 320ms ease;
}
/* Faint chad/scissor marks at compass points */
.hm-punch-hole::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 0%, rgba(164,123,44,.4) 0 .5px, transparent 1px),
    radial-gradient(circle at 0% 50%, rgba(164,123,44,.4) 0 .5px, transparent 1px),
    radial-gradient(circle at 100% 50%, rgba(164,123,44,.4) 0 .5px, transparent 1px),
    radial-gradient(circle at 50% 100%, rgba(164,123,44,.4) 0 .5px, transparent 1px);
  pointer-events: none;
}
.hm-punch-hole.is-punched {
  border: 1.5px solid #0a0a0a;
  background:
    radial-gradient(circle at 38% 32%, #2a2a2a 0%, #0a0a0a 60%, #000 100%);
  box-shadow:
    inset 0 5px 10px rgba(0,0,0,.95),
    inset 0 -1px 1px rgba(255,255,255,.04),
    /* chad rip — subtle outer ring of paper */
    0 0 0 1px rgba(164,123,44,.25),
    /* indented look on the card */
    0 1px 2px rgba(0,0,0,.15);
  animation: hm-punch-pop 520ms cubic-bezier(.34,1.56,.64,1);
}
.hm-punch-hole.is-punched::before { opacity: .6; }
@keyframes hm-punch-pop {
  0%   { transform: scale(.6); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.hm-punch-card__share {
  display: block;
  margin: 0 auto;
  padding: .75em 1.5em;
  background: #1a1a1a;
  border: 1px solid #1a1a1a;
  color: #fbf6ea;
  cursor: pointer;
  font-family: 'Libre Franklin', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}
.hm-punch-card__share:hover {
  background: var(--gold-dark, #a47b2c);
  border-color: var(--gold-dark, #a47b2c);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(164,123,44,.25);
}
.hm-punch-card__note {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  color: #6b6258;
  font-size: .85rem;
  text-align: center;
}

.hm-punch-card__count {
  font-family: 'Libre Franklin', sans-serif;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .14em;
  font-size: .72rem;
  text-transform: uppercase;
  color: var(--gold-dark, #a47b2c);
}

/* Drop-box — matte black with a thin gold trim, hinged lid that opens once
   to swallow the card and closes behind it. Sits at the bottom of the stage. */
.hm-punch-box {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  width: min(300px, 72%);
  height: 78px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 360ms ease;
  perspective: 600px;
}
.hm-punch-box.is-visible { opacity: 1; }
.hm-punch-box__shadow {
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 88%;
  height: 12px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.45) 0%, transparent 70%);
  filter: blur(2px);
}
.hm-punch-box__body {
  position: absolute;
  inset: 16px 0 0 0;
  background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
  border: 1px solid #050505;
  border-top: none;
  border-radius: 2px 2px 6px 6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 8px 14px rgba(0,0,0,.6),
    0 6px 16px rgba(0,0,0,.35);
}
.hm-punch-box__slot-inner {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,.85) 0%, rgba(0,0,0,.2) 35%, transparent 70%);
}
.hm-punch-box__slot {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 5px;
  background: #000;
  border-radius: 3px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.04),
    inset 0 2px 3px rgba(0,0,0,.95);
  z-index: 3;
}
.hm-punch-box__lid {
  position: absolute;
  inset: 0 0 auto 0;
  height: 18px;
  background: linear-gradient(180deg, #232323 0%, #121212 100%);
  border: 1px solid #050505;
  border-radius: 6px 6px 2px 2px;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  z-index: 4;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 2px 4px rgba(0,0,0,.4);
}
/* Thin gold trim along the lid, on-brand. */
.hm-punch-box__lid-trim {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 3px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold, #c6993e) 30%, var(--gold, #c6993e) 70%, transparent 100%);
  opacity: .6;
}

/* === Card drop sequence ===
   Anticipate (tip back) · plunge straight to slot · squish flat into slot.
   Transform-origin is bottom-center so the final scale flattens the card
   into a thin line at the slot, then it fades. */
.hm-punch-stage.is-dropping .hm-punch-card {
  animation: hm-card-drop 1400ms cubic-bezier(.55,.05,.65,.15) forwards;
  z-index: 2;
}
@keyframes hm-card-drop {
  0%   { transform: rotate(0deg)    translateY(0)     scale(1, 1);     opacity: 1; }
  14%  { transform: rotate(-3deg)   translateY(-6px)  scale(1, 1);     opacity: 1; }
  30%  { transform: rotate(1.5deg)  translateY(18px)  scale(1, 1);     opacity: 1; }
  60%  { transform: rotate(0deg)    translateY(120px) scale(1, 1);     opacity: 1; }
  80%  { transform: rotate(0deg)    translateY(150px) scale(.85, .25); opacity: .95; }
  92%  { transform: rotate(0deg)    translateY(160px) scale(.6,  .05); opacity: .6; }
  100% { transform: rotate(0deg)    translateY(165px) scale(.4,  0);   opacity: 0; }
}

/* Lid timing — closed at start, snaps open just before the card lands,
   stays open during the squish, slams shut after the card is "in". */
.hm-punch-stage.is-dropping .hm-punch-box__lid {
  animation: hm-lid-open 1400ms cubic-bezier(.45,.05,.55,.95) forwards;
}
@keyframes hm-lid-open {
  0%   { transform: rotateX(0deg); }
  35%  { transform: rotateX(0deg); }
  50%  { transform: rotateX(-105deg); }
  82%  { transform: rotateX(-105deg); }
  92%  { transform: rotateX(-12deg); }
  100% { transform: rotateX(0deg); }
}

/* Box settles after the lid slams — quick squash, then back. */
.hm-punch-stage.is-dropping .hm-punch-box {
  animation: hm-box-settle 420ms cubic-bezier(.34,1.56,.64,1) 1400ms;
}
@keyframes hm-box-settle {
  0%   { transform: translateX(-50%) scale(1); }
  40%  { transform: translateX(-50%) scale(1.05, .9); }
  100% { transform: translateX(-50%) scale(1); }
}

/* The voucher — luxury comp-ticket: black w/ gold foil edge, perforated stub
   on the left bearing the serial, main body with title/meta/redeem button. */
.hm-punch-voucher {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translate(-50%, 360px);
  width: min(420px, 92%);
  display: grid;
  grid-template-columns: 56px 6px 1fr;
  background:
    radial-gradient(circle at 30% 20%, rgba(198,153,62,.18) 0%, transparent 55%),
    linear-gradient(160deg, #1c1c1c 0%, #080808 100%);
  border: 1px solid var(--gold, #c6993e);
  border-radius: 6px;
  color: #fbf6ea;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(198,153,62,.4) inset,
    0 0 28px rgba(198,153,62,.22),
    0 18px 36px rgba(0,0,0,.5);
}
/* Perforated stub on the left holding the serial — runs vertically. */
.hm-punch-voucher__stub {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(198,153,62,.08) 0%, transparent 60%),
    linear-gradient(180deg, #141414 0%, #050505 100%);
  border-right: none;
}
.hm-punch-voucher__serial {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'Libre Franklin', sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .35em;
  color: var(--gold, #c6993e);
}
/* Vertical perforation between stub and main body. */
.hm-punch-voucher::before {
  content: '';
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  background:
    radial-gradient(circle at center, transparent 0 1.5px, rgba(198,153,62,.5) 1.5px 2px, transparent 2px) center / 6px 9px repeat-y;
}
.hm-punch-voucher__main {
  padding: 1.05rem 1.2rem 1rem;
  text-align: left;
  position: relative;
}
/* Subtle gold corner ornament top-right of main panel. */
.hm-punch-voucher__main::after {
  content: '★';
  position: absolute;
  top: .55rem;
  right: .8rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: .8rem;
  color: var(--gold, #c6993e);
  opacity: .55;
}
.hm-punch-voucher__eyebrow {
  font-family: 'Libre Franklin', sans-serif;
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold, #c6993e);
  opacity: .85;
  margin: 0 0 .35rem;
}
.hm-punch-voucher__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: clamp(1.5rem, 4.2vw, 1.95rem);
  letter-spacing: .02em;
  margin: 0 0 .15rem;
  color: #fbf6ea;
  line-height: 1.05;
  text-shadow: 0 0 14px rgba(198,153,62,.3);
}
.hm-punch-voucher__sub {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: .95rem;
  color: rgba(251,246,234,.72);
  margin: 0 0 .65rem;
  line-height: 1.25;
}
.hm-punch-voucher__meta {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  font-family: 'Libre Franklin', sans-serif;
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(251,246,234,.55);
  margin-bottom: .85rem;
  padding-top: .55rem;
  border-top: 1px solid rgba(198,153,62,.2);
}
.hm-punch-voucher__meta em {
  font-style: normal;
  font-weight: 600;
  color: var(--gold, #c6993e);
  margin-right: .4em;
}
.hm-punch-voucher__btn {
  padding: .8em 1.6em;
  background: var(--gold, #c6993e);
  border: 1px solid var(--gold-dark, #a47b2c);
  color: #1a1a1a;
  cursor: pointer;
  font-family: 'Libre Franklin', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
  box-shadow: 0 6px 14px rgba(0,0,0,.3);
}
.hm-punch-voucher__btn:hover {
  background: #d6a94f;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(198,153,62,.3);
}

/* Voucher rises out of the slot. Starts hidden inside the box (clipped by
   stage overflow:hidden), rises smoothly to where the card was, with a
   small overshoot + settle so it reads as printed paper, not a digital toast. */
.hm-punch-stage.is-dropping .hm-punch-voucher {
  animation: hm-voucher-rise 1200ms cubic-bezier(.18,.7,.22,1) 1900ms forwards;
}
@keyframes hm-voucher-rise {
  0%   { transform: translate(-50%, 360px) rotate(-1.6deg); opacity: 0; pointer-events: none; }
  8%   { opacity: 1; }
  72%  { transform: translate(-50%, -8px)  rotate(.6deg); }
  100% { transform: translate(-50%, 0)     rotate(0deg);   opacity: 1; pointer-events: auto; }
}

.hm-punch-stage.is-claimed .hm-punch-card,
.hm-punch-stage.is-claimed .hm-punch-card__share,
.hm-punch-stage.is-claimed .hm-punch-card__note { display: none; }
.hm-punch-stage.is-dropping .hm-punch-card__share,
.hm-punch-stage.is-dropping .hm-punch-card__note {
  opacity: 0;
  transition: opacity 360ms ease;
  pointer-events: none;
}
.hm-punch-stage.is-claimed .hm-punch-voucher {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.hm-punch-stage.is-claimed .hm-punch-box { display: none; }