/* ============================================================
   A HOT PARTY — components.css
   Buttons · Cards · Forms · Reviews · Stats · Footer
   ============================================================ */

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: .95rem 2.4rem;
  border-radius: var(--r-full);
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--t-smooth), box-shadow var(--t-smooth);
  text-decoration: none;
  white-space: nowrap;
}
.btn i { font-size: .9rem; }

/* Shimmer overlay on hover */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,rgba(255,255,255,.2),transparent);
  opacity: 0;
  transition: opacity var(--t-fast);
}
.btn:hover::before { opacity: 1; }

/* Primary — Gold */
.btn-primary {
  background: var(--grad-gold);
  color: var(--black);
  box-shadow: 0 4px 20px rgba(212,175,55,.4);
}
.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 40px rgba(212,175,55,.6);
  color: var(--black);
}

/* Secondary — Red */
.btn-secondary {
  background: var(--grad-red);
  color: var(--white);
  box-shadow: 0 4px 20px rgba(196,30,58,.3);
}
.btn-secondary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 40px rgba(196,30,58,.5);
}

/* Outline — Gold */
.btn-outline {
  background: transparent;
  color: var(--gold);
  border: 1.5px solid var(--gold);
  box-shadow: none;
}
.btn-outline:hover {
  background: var(--gold);
  color: var(--black);
  transform: translateY(-2px);
  box-shadow: var(--sh-gold);
}

/* Outline White */
.btn-outline-white {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,.4);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,.1);
  border-color: var(--white);
  transform: translateY(-2px);
}

/* Sizes */
.btn-sm  { padding: .6rem 1.4rem; font-size: .72rem; }
.btn-lg  { padding: 1.15rem 3rem;  font-size: .85rem; }
.btn-xl  { padding: 1.3rem 3.5rem; font-size: .9rem;  }
.btn-full { width: 100%; }

/* ── Stat Cards ────────────────────────────────────────────── */
.stats-section {
  padding: 4rem 0;
  background: var(--dark);
  position: relative;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}
.stat-card {
  padding: 2.5rem 1.5rem;
  text-align: center;
  border: 1px solid rgba(212,175,55,.15);
  border-radius: var(--r-lg);
  background: var(--grad-card);
  transition: transform var(--t-smooth), border-color var(--t-smooth), box-shadow var(--t-smooth);
}
.stat-card:hover {
  transform: translateY(-6px);
  border-color: rgba(212,175,55,.4);
  box-shadow: var(--sh-gold);
}
.stat-icon {
  font-size: 2rem;
  color: var(--gold);
  margin-bottom: 1rem;
  display: block;
}
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2rem,4vw,3.5rem);
  font-weight: 900;
  line-height: 1;
  margin-bottom: .5rem;
  display: block;
}
.stat-label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Service Cards (3D) ────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1.5rem;
}
/* 3-up variant (casino page) — centred rather than left-aligned in a 4-col row */
.services-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 320px));
  justify-content: center;
}
.service-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  cursor: pointer;
  text-decoration: none;
  transition: transform .55s cubic-bezier(.4,0,.2,1), box-shadow .55s ease;
}
.service-card:hover {
  transform: rotateY(4deg) rotateX(-2deg) translateZ(15px) scale(1.02);
  box-shadow: 0 20px 60px rgba(0,0,0,.8), var(--sh-gold);
}
.service-card-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .6s ease;
}
.service-card:hover .service-card-bg { transform: scale(1.08); }
.service-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.75) 0%, rgba(0,0,0,.25) 45%, transparent 75%);
}
.service-card-body {
  position: relative; z-index: 2;
  padding: 1.75rem;
  display: flex;
  align-items: center;
  gap: .9rem;
}
.service-card-icon {
  width: 48px; height: 48px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(212,175,55,.15);
  border: 1px solid rgba(212,175,55,.35);
  border-radius: var(--r-md);
  color: var(--gold);
  font-size: 1.2rem;
  transform: translateZ(30px);
}
.service-card h3 {
  font-size: 1.35rem;
  margin: 0;
  color: var(--white);
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
}

/* ── Performer Cards ───────────────────────────────────────── */
.performer-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1.5rem;
}
.performer-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
  cursor: pointer;
}
.performer-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.performer-card:hover img { transform: scale(1.1); }
.performer-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.9) 0%, transparent 60%);
  opacity: .7;
  transition: opacity .3s ease;
}
.performer-card:hover .performer-card-overlay { opacity: 1; }
.performer-card-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.5rem 1.25rem;
  text-align: center;
  transition: transform .3s ease;
}
.performer-card:hover .performer-card-info { transform: translateY(-4px); }
.performer-card h3 {
  font-size: 1.35rem;
  line-height: 1.2;
  margin: 0;
  color: var(--white);
  font-weight: 700;
  letter-spacing: .01em;
  text-shadow: 0 2px 12px rgba(0,0,0,.75);
  transition: color .3s ease;
}
.performer-card:hover h3 { color: var(--gold); }

/* ── Theme Cards ───────────────────────────────────────────── */
.themes-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.5rem;
}
.theme-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
}
.theme-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.theme-card:hover img { transform: scale(1.1); }
/* Scrim darkens both ends: category chip sits top, title sits bottom */
.theme-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,.72) 0%,
    rgba(0,0,0,.22) 26%,
    rgba(0,0,0,.35) 58%,
    rgba(0,0,0,.9) 100%);
  transition: background .3s ease;
}
.theme-card:hover .theme-card-overlay {
  background: linear-gradient(to bottom,
    rgba(0,0,0,.75) 0%,
    rgba(139,0,0,.35) 34%,
    rgba(139,0,0,.6) 70%,
    rgba(0,0,0,.94) 100%);
}
/* body spans the card so the tag can pin top and the title bottom */
.theme-card-body {
  position: absolute;
  inset: 0;
  padding: 1.15rem 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 2;
}
.theme-card h3 {
  font-size: 1.08rem;
  line-height: 1.3;
  margin: 0;
  color: var(--white);
  font-weight: 700;
  /* layered shadow keeps the title readable over bright artwork */
  text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 3px 14px rgba(0,0,0,.85);
}

/* ── Homepage themes wall (16 cards, title on top) ─────────── */
.themes-home-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1.25rem;
}
.theme-card-top { display: block; text-decoration: none; }
/* Flip the caption to the top and the gradient with it */
.theme-card-top .theme-card-body {
  top: 0; bottom: auto;
  padding: 1.15rem 1.25rem;
}
.theme-card-top .theme-card-overlay {
  /* Strong, short scrim: several theme images are bright right at the top,
     so the caption needs real contrast without hiding the artwork below. */
  background: linear-gradient(to bottom,
    rgba(0,0,0,.92) 0%,
    rgba(0,0,0,.78) 22%,
    rgba(0,0,0,.35) 42%,
    transparent 62%);
}
.theme-card-top:hover .theme-card-overlay {
  background: linear-gradient(to bottom, rgba(139,0,0,.88) 0%, rgba(0,0,0,.35) 60%, transparent 100%);
}
.theme-card-top .theme-card-body .tag { margin-bottom: .4rem; display: inline-block; }
.theme-card-top h3 {
  font-size: .98rem;
  line-height: 1.3;
  margin-bottom: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,.85);
}

/* ── Review Cards ──────────────────────────────────────────── */
.reviews-grid {
  columns: 3;
  column-gap: 1.5rem;
}
.review-card {
  break-inside: avoid;
  margin-bottom: 1.5rem;
  padding: 1.75rem;
  background: var(--dark-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: transform var(--t-smooth), border-color var(--t-smooth);
}
.review-card:hover {
  transform: translateY(-4px);
  border-color: rgba(212,175,55,.2);
}
.review-stars {
  display: flex; gap: .2rem;
  margin-bottom: .75rem;
  color: #FFD700;
  font-size: .9rem;
}
.review-text {
  font-size: .9rem;
  color: var(--text);
  line-height: 1.75;
  margin-bottom: 1.25rem;
  font-style: italic;
}
.review-author {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.review-avatar {
  width: 40px; height: 40px;
  border-radius: var(--r-full);
  background: var(--grad-gold);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: .85rem;
  color: var(--black);
  flex-shrink: 0;
}
.review-name  { font-size: .85rem; font-weight: 600; color: var(--white); display: block; }
.review-date  { font-size: .75rem; color: var(--muted); }
.review-category-tag {
  margin-top: .75rem;
}

/* Google badge */
.google-badge {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 2rem;
  justify-content: center;
}
.google-logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
}
.google-logo span:nth-child(1) { color: #4285F4; }
.google-logo span:nth-child(2) { color: #EA4335; }
.google-logo span:nth-child(3) { color: #FBBC05; }
.google-logo span:nth-child(4) { color: #4285F4; }
.google-logo span:nth-child(5) { color: #34A853; }
.google-logo span:nth-child(6) { color: #EA4335; }
.google-rating {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--white);
}
.google-stars { display: flex; gap: .2rem; color: #FFD700; font-size: 1.1rem; }

/* ── CTA Banner ────────────────────────────────────────────── */
.cta-banner {
  position: relative;
  padding: 6rem 2rem;
  text-align: center;
  overflow: hidden;
}
.cta-banner-bg {
  position: absolute; inset: -10%;
  background-size: cover;
  background-position: center;
  filter: blur(2px);
}
.cta-banner-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.82);
}
.cta-banner-content {
  position: relative; z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}
.cta-banner h2 {
  font-family: var(--font-accent);
  font-size: clamp(1.4rem,3vw,2.2rem);
  font-weight: 400;
  font-style: italic;
  color: var(--white);
  margin-bottom: 1rem;
  line-height: 1.5;
}
.cta-banner h2 a { color: var(--gold); text-decoration: none; }
.cta-banner p { color: var(--muted); margin-bottom: 2rem; font-size: 1.05rem; }
.cta-banner-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── Awards Section ────────────────────────────────────────── */
.awards-section {
  position: relative;
  background: var(--dark);
  overflow: hidden;
}
/* Twin flame spotlights — logo red on one side, orange on the other */
.awards-glow {
  position: absolute;
  top: -20%; left: 50%;
  width: min(1100px, 120%);
  height: 680px;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 46% 60% at 28% 42%, rgba(204,3,10,.20) 0%, rgba(204,3,10,.06) 45%, transparent 72%),
    radial-gradient(ellipse 46% 60% at 74% 52%, rgba(253,107,4,.16) 0%, rgba(253,107,4,.05) 45%, transparent 72%),
    radial-gradient(ellipse at center, rgba(212,175,55,.09) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.awards-section > .container { position: relative; z-index: 1; }

/* ── Headline award ────────────────────────────────────────── */
.award-feature {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  padding: 2.75rem 3rem;
  margin-bottom: 1.5rem;
  border-radius: var(--r-lg);
  border: 1px solid rgba(253,107,4,.35);
  background:
    linear-gradient(135deg, rgba(204,3,10,.22) 0%, rgba(247,60,3,.10) 32%, rgba(253,131,4,.05) 55%, transparent 78%),
    var(--grad-card);
  box-shadow: var(--sh-card);
  position: relative;
  overflow: hidden;
  transition: transform var(--t-smooth), box-shadow var(--t-smooth), border-color var(--t-smooth);
}
.award-feature::after {
  /* flame rule along the top edge, straight from the logo */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-flame);
}
.award-feature:hover {
  transform: translateY(-4px);
  border-color: rgba(253,107,4,.6);
  box-shadow: var(--sh-deep), 0 0 34px rgba(247,60,3,.28), 0 0 64px rgba(204,3,10,.14);
}
/* Poker-chip medallion — flame ring echoing the logo mark */
.award-feature-laurel {
  flex-shrink: 0;
  width: 104px; height: 104px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 2.6rem;
  color: var(--white);
  background:
    radial-gradient(circle at 50% 38%, rgba(253,131,4,.30), rgba(204,3,10,.28) 62%, rgba(153,3,6,.20) 100%),
    var(--grad-flame);
  border: 2px solid rgba(253,131,4,.55);
  box-shadow:
    inset 0 2px 10px rgba(255,255,255,.20),
    inset 0 -6px 18px rgba(153,3,6,.45),
    0 0 30px rgba(247,60,3,.35), 0 0 60px rgba(204,3,10,.18);
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.award-feature-body { min-width: 0; }
.award-rank {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--grad-flame);
  padding: .35rem .85rem;
  border-radius: var(--r-full);
  margin-bottom: .85rem;
  box-shadow: 0 2px 14px rgba(247,60,3,.4);
}
.award-feature h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.2;
  color: var(--white);
  margin-bottom: .5rem;
}
.award-feature-org {
  font-size: .9rem;
  font-weight: 600;
  color: var(--flame-amber);
  margin-bottom: .6rem;
}
.award-feature-note {
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 60ch;
}

/* ── Interactive Add-Ons (entertainment page) ──────────────── */
.addons-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.25rem;
}
/* A few source images are product shots on white; a subtle darkening keeps
   them sitting with the photographic tiles instead of glaring against them. */
.addons-grid .theme-card img { filter: brightness(.88) saturate(1.05); }
.addons-grid .theme-card:hover img { filter: brightness(1) saturate(1.1); }

/* ── Inquiry + FAQ combined section ────────────────────────── */
.inquiry-faq-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
.inquiry-faq-side {
  background: var(--grad-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 2rem 1.75rem;
}
.inquiry-faq-heading {
  font-size: 1.15rem;
  color: var(--white);
  margin-bottom: 1rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid rgba(212,175,55,.25);
}
/* the shared .faq-container caps width for a standalone page; unset here */
.inquiry-faq-side .faq-container { max-width: none; margin: 0; }
.inquiry-faq-side .faq-question { font-size: .88rem; padding: 1.05rem 0; }
.inquiry-faq-side .faq-answer p { font-size: .84rem; }
.inquiry-faq-side .faq-item:last-child { border-bottom: 0; }

/* ── Notable Clients ───────────────────────────────────────── */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.75rem;
  align-items: stretch;   /* equal-height cards regardless of list length */
}
.client-card {
  --accent: var(--gold);
  --accent-fg: var(--gold-light);
  position: relative;
  padding: 2rem 1.75rem;
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 55%),
    var(--grad-card);
  box-shadow: var(--sh-card);
  overflow: hidden;
  transition: transform var(--t-smooth), border-color var(--t-smooth), box-shadow var(--t-smooth);
}
/* Flame rule across the top of each card */
.client-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 20%, transparent));
}
.client-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: var(--sh-deep), 0 0 28px color-mix(in srgb, var(--accent) 28%, transparent);
}
.client-card-head {
  display: flex;
  align-items: center;
  gap: .95rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}
.client-icon {
  flex-shrink: 0;
  width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  font-size: 1.25rem;
  color: var(--accent-fg);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  transition: background var(--t-smooth), color var(--t-smooth), box-shadow var(--t-smooth);
}
.client-card:hover .client-icon {
  background: var(--accent);
  color: var(--white);
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 55%, transparent);
}
.client-card h3 {
  font-size: 1.15rem;
  color: var(--white);
  margin-bottom: .15rem;
  line-height: 1.2;
}
.client-count {
  font-size: .74rem;
  color: var(--muted);
  letter-spacing: .02em;
}
/* Bullet list */
.client-list { list-style: none; margin: 0; padding: 0; }
.client-list li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .88rem;
  color: var(--text);
  line-height: 1.5;
  padding: .42rem 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: color var(--t-fast), transform var(--t-fast);
}
.client-list li:last-child { border-bottom: 0; }
.client-list li i {
  flex-shrink: 0;
  margin-top: .22rem;
  font-size: .68rem;
  color: var(--accent-fg);
}
.client-list li:hover {
  color: var(--white);
  transform: translateX(3px);
}
/* Per-category accents drawn from the logo flame palette */
.client-card-corporate { --accent: var(--flame-red);    --accent-fg: #FF6B5E; }
.client-card-celebrity { --accent: var(--gold);         --accent-fg: var(--gold-light); }
.client-card-nonprofit { --accent: var(--flame-orange); --accent-fg: #FFA23D; }

/* ── Award Items ───────────────────────────────────────────── */
.awards-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.5rem;
}
.award-item {
  padding: 2.5rem 2rem;
  text-align: center;
  border: 1px solid rgba(212,175,55,.15);
  border-radius: var(--r-lg);
  background: var(--grad-card);
  transition: transform var(--t-smooth), border-color var(--t-smooth), box-shadow var(--t-smooth);
}
.award-item:hover {
  transform: translateY(-5px);
  border-color: rgba(212,175,55,.4);
  box-shadow: var(--sh-gold);
}
.award-icon {
  font-size: 2.5rem;
  color: var(--gold);
  margin-bottom: 1rem;
  display: block;
}
.award-item h3 {
  font-size: 1rem;
  margin-bottom: .4rem;
  color: var(--white);
}
.award-item p {
  font-size: .8rem;
  color: var(--muted);
}

/* Homepage awards wall — richer row layout, scoped so the shared
   .award-item blocks on about/fundraisers keep their centered style.
   Each tile sets its own --accent, cycling through the logo flame hues. */
.awards-section .award-item {
  --accent: var(--flame-orange);
  --accent-fg: #FFA23D;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.6rem 1.5rem;
  text-align: left;
  height: 100%;   /* equal-height tiles across each row */
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}
/* Flame bar down the leading edge */
.awards-section .award-item::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: var(--accent);
  opacity: .75;
  transition: opacity var(--t-smooth), width var(--t-smooth);
}
.awards-section .award-item:hover::before { opacity: 1; width: 5px; }
.awards-section .award-item:hover {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 12px 34px rgba(0,0,0,.55),
              0 0 26px color-mix(in srgb, var(--accent) 32%, transparent);
}
/* Cycle the flame palette across the wall.
   --accent drives the edge bar / fills; --accent-fg is the readable text
   tint, since the deeper logo reds fail contrast on a near-black card. */
.awards-section .award-item:nth-child(1) { --accent: var(--flame-red);     --accent-fg: #FF6B5E; }
.awards-section .award-item:nth-child(2) { --accent: var(--flame-scarlet); --accent-fg: #FF8A4C; }
.awards-section .award-item:nth-child(3) { --accent: var(--gold);          --accent-fg: var(--gold-light); }
.awards-section .award-item:nth-child(4) { --accent: var(--flame-orange);  --accent-fg: #FFA23D; }
.awards-section .award-item:nth-child(5) { --accent: var(--flame-crimson); --accent-fg: #FF7A6E; }
.awards-section .award-item:nth-child(6) { --accent: var(--flame-amber);   --accent-fg: #FFB74D; }
.awards-section .awards-grid { grid-auto-rows: 1fr; }
.awards-section .award-icon {
  flex-shrink: 0;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 0;
  color: var(--accent-fg);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: var(--r-md);
  transition: background var(--t-smooth), color var(--t-smooth), box-shadow var(--t-smooth);
}
.awards-section .award-item:hover .award-icon {
  background: var(--accent);
  color: var(--white);
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 55%, transparent);
}
.award-item-text { flex: 1; min-width: 0; }
.awards-section .award-item h3 {
  font-size: .95rem;
  line-height: 1.35;
  margin-bottom: .25rem;
}
.award-org {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.5;
}
.award-badge {
  flex-shrink: 0;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-fg);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-fg) 45%, transparent);
  border-radius: var(--r-full);
  padding: .28rem .6rem;
  white-space: nowrap;
  transition: background var(--t-smooth), color var(--t-smooth);
}
.awards-section .award-item:hover .award-badge {
  background: var(--accent);
  color: var(--white);
}
/* Final tile doubles as a link out to the story */
.awards-section .award-item-cta {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 14%, transparent), rgba(26,26,26,.92));
}
.award-link {
  flex-shrink: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-fg);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast);
}
.award-link:hover { filter: brightness(1.25); }
.award-link i { margin-left: .35rem; transition: transform var(--t-fast); }
.award-item-cta:hover .award-link i { transform: translateX(3px); }

/* ── Team Cards ────────────────────────────────────────────── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1.5rem;
}
.team-card {
  text-align: center;
  padding: 2rem 1.5rem;
  background: var(--grad-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: transform var(--t-smooth), border-color var(--t-smooth);
}
.team-card:hover {
  transform: translateY(-5px);
  border-color: rgba(212,175,55,.3);
}
.team-avatar {
  width: 80px; height: 80px;
  border-radius: var(--r-full);
  background: var(--grad-red);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--white);
  margin: 0 auto 1rem;
  border: 2px solid rgba(212,175,55,.3);
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
/* Photo variant — same circle, filled with a headshot instead of an initial */
.team-avatar-photo {
  width: 110px; height: 110px;
  padding: 0;
  overflow: hidden;
  background: var(--dark-card);
}
.team-avatar-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform var(--t-smooth);
}
.team-card:hover .team-avatar-photo img { transform: scale(1.06); }
.team-card h3 { font-size: 1.05rem; margin-bottom: .25rem; }
.team-card p  { font-size: .8rem; color: var(--gold); font-weight: 500; }

/* ── Decor Cards ───────────────────────────────────────────── */
.decor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  gap: 1.5rem;
}
.decor-card {
  padding: 2rem 1.5rem;
  text-align: center;
  background: var(--grad-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: transform var(--t-smooth), border-color var(--t-smooth);
}
.decor-card:hover {
  transform: translateY(-5px);
  border-color: rgba(212,175,55,.4);
  box-shadow: var(--sh-gold);
}
.decor-icon {
  font-size: 2rem;
  color: var(--gold);
  margin-bottom: 1rem;
  display: block;
}
.decor-card h3 { font-size: .95rem; margin-bottom: .5rem; }
.decor-card p  { font-size: .82rem; color: var(--muted); line-height: 1.65; }

/* ── Forms ─────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: .4rem; }
.form-group label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.form-control {
  width: 100%;
  padding: .9rem 1.2rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-md);
  color: var(--white);
  font-family: var(--font-body);
  font-size: .9rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  outline: none;
  -webkit-appearance: none;
}
.form-control::placeholder { color: var(--muted-dark); }
.form-control:focus {
  border-color: var(--gold);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 3px rgba(212,175,55,.12);
}
.form-control:hover { border-color: rgba(255,255,255,.2); }

select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 120px; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.form-grid .full-width { grid-column: 1 / -1; }

.form-disclaimer {
  font-size: .75rem;
  color: var(--muted);
  text-align: center;
  margin-top: .75rem;
}
.form-submit-wrap { text-align: center; margin-top: 2rem; }

/* ── Blog Cards ────────────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.5rem;
}
.blog-card {
  background: var(--dark-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-smooth), border-color var(--t-smooth);
}
.blog-card:hover {
  transform: translateY(-5px);
  border-color: rgba(212,175,55,.25);
}
.blog-card-img {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.blog-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.blog-card:hover .blog-card-img img { transform: scale(1.08); }
.blog-card-category {
  position: absolute;
  top: .75rem; left: .75rem;
}
.blog-card-content { padding: 1.5rem; }
.blog-card-meta {
  display: flex;
  gap: 1rem;
  font-size: .75rem;
  color: var(--muted);
  margin-bottom: .75rem;
}
.blog-card h2 {
  font-size: 1.1rem;
  margin-bottom: .5rem;
  color: var(--white);
  line-height: 1.4;
}
.blog-card p {
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: 1.25rem;
  line-height: 1.65;
}

/* ── FAQ Accordion ─────────────────────────────────────────── */
.faq-container { max-width: 800px; margin: 0 auto; }
.faq-category { margin-bottom: 2.5rem; }
.faq-category-title {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(212,175,55,.2);
}
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question {
  width: 100%;
  padding: 1.4rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  gap: 1rem;
  transition: color var(--t-fast);
}
.faq-question:hover, .faq-item.active .faq-question { color: var(--gold); }
.faq-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(212,175,55,.1);
  border-radius: var(--r-full);
  color: var(--gold);
  font-size: .8rem;
  transition: transform .35s ease, background var(--t-fast);
}
.faq-item.active .faq-icon {
  transform: rotate(45deg);
  background: var(--gold);
  color: var(--black);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s ease, padding .3s ease;
}
.faq-item.active .faq-answer { max-height: 500px; padding-bottom: 1.5rem; }
.faq-answer p {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.8;
}

/* ── Video Section ─────────────────────────────────────────── */
.video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--dark);
  cursor: pointer;
  box-shadow: var(--sh-deep);
}
.video-wrapper iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: none;
}
.video-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity .3s ease;
}
.video-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 80px; height: 80px;
  background: var(--grad-gold);
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  color: var(--black);
  font-size: 1.8rem;
  box-shadow: 0 0 50px rgba(212,175,55,.5);
  transition: transform var(--t-smooth), box-shadow var(--t-smooth);
  z-index: 2;
  border: none;
  cursor: pointer;
  pointer-events: none;
}
.video-wrapper:hover .video-play-btn {
  transform: translate(-50%,-50%) scale(1.1);
  box-shadow: var(--sh-gold);
}
.video-wrapper.loaded .video-poster,
.video-wrapper.loaded .video-play-btn,
.video-wrapper.loaded .video-label { display: none; }

/* ── Hero background video ─────────────────────────────────── */
/* The shared .overlay-hero scrim is tuned for still photos. Behind moving
   footage it buries the video, so the homepage hero gets a lighter one:
   dark at the top for the nav, dark at the bottom for the scroll cue, and
   only a soft pool behind the headline. The hero type carries its own
   text-shadow, which is what makes this much scrim enough. */
.hero > .overlay-hero {
  background:
    radial-gradient(ellipse 68% 56% at 50% 46%,
      rgba(6,6,6,.60) 0%, rgba(6,6,6,.40) 58%, rgba(6,6,6,.16) 100%),
    linear-gradient(180deg,
      rgba(10,10,10,.85) 0%, rgba(10,10,10,.28) 28%,
      rgba(10,10,10,.30) 68%, rgba(10,10,10,.88) 100%);
}

/* The header is fixed, so it sits over the hero rather than pushing it
   down. Reserving its height as top padding means the hero centres its
   content in the space *below* the nav — otherwise on short or wide
   viewports the first line rides up underneath the menu. The scroll cue
   is pinned to the bottom, so it gets matching room of its own. */
.hero {
  --header-h: 120px;                 /* 44px top bar + ~76px nav row */
  box-sizing: border-box;
  padding-top: var(--header-h);
  padding-bottom: 4rem;
}
/* Once scrolled the top bar collapses, but the hero is at the top of the
   page then anyway — the static reserve above is what matters. */
@media (max-width: 900px) {
  .hero { --header-h: 108px; }
}
@media (max-width: 480px) {
  .hero { --header-h: 96px; padding-bottom: 3rem; }
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;                       /* revealed once it can actually play */
  transition: opacity 1.1s ease;
  pointer-events: none;
  z-index: 0;
}
.hero-video.playing { opacity: 1; }

/* WCAG 2.2.2 — anything moving for more than five seconds needs a pause. */
.hero-video-toggle {
  position: absolute;
  bottom: 1.75rem; right: 1.75rem;
  z-index: 3;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(10,10,10,.55);
  backdrop-filter: blur(8px);
  color: rgba(255,255,255,.9);
  font-size: .8rem;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.hero-video-toggle:hover {
  background: rgba(10,10,10,.8);
  border-color: var(--gold);
  color: var(--gold);
}
@media (max-width: 768px) {
  .hero-video-toggle { bottom: 1rem; right: 1rem; width: 38px; height: 38px; }
}

/* ── Video grid (theme + variety act reels) ────────────────── */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  text-align: left;
}
.video-grid .video-wrapper {
  box-shadow: var(--sh-card);
  border: 1px solid var(--border);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.video-grid .video-wrapper:hover {
  border-color: rgba(212,175,55,.45);
  box-shadow: var(--sh-gold);
}
.video-grid .video-play-btn { width: 54px; height: 54px; font-size: 1.05rem; }

.video-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.25rem .9rem .8rem;
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, transparent 100%);
  color: var(--white);
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
}

/* ── Sticky Mobile CTA ─────────────────────────────────────── */
.sticky-mobile-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9990;
  box-shadow: 0 -4px 20px rgba(0,0,0,.5);
}
.sticky-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .82rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .06em;
  transition: filter var(--t-fast);
}
.sticky-btn:hover { filter: brightness(1.1); }
.sticky-btn i { font-size: 1.1rem; }
.sticky-call      { background: var(--red); color: var(--white); }
.sticky-whatsapp  { background: #25D366;    color: var(--white); }

/* ── Gallery Grid ──────────────────────────────────────────── */
.gallery-grid {
  columns: 4;
  column-gap: 1rem;
}
.gallery-item {
  break-inside: avoid;
  margin-bottom: 1rem;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.gallery-item img {
  width: 100%;
  display: block;
  transition: transform .5s ease;
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity var(--t-smooth);
}
.gallery-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-item-overlay i { font-size: 1.5rem; color: var(--gold); }

/* ── Lightbox ──────────────────────────────────────────────── */
.lightbox-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.96);
  z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  padding: 2rem;
}
.lightbox-overlay.active { opacity: 1; visibility: visible; }
.lightbox-img {
  max-width: 90vw; max-height: 88vh;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: var(--sh-deep);
  transform: scale(.93);
  transition: transform .35s ease;
}
.lightbox-overlay.active .lightbox-img { transform: scale(1); }
.lightbox-close {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  width: 48px; height: 48px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.lightbox-close:hover { background: var(--red); color: var(--white); }
.lightbox-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.lightbox-nav:hover { background: var(--gold); color: var(--black); }
.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }

/* ── Site Footer ───────────────────────────────────────────── */
.site-footer {
  background: #080808;
  border-top: 1px solid var(--border);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* Gold hairline along the very top edge, brightest in the middle — reads as a
   deliberate seam between the page and the footer rather than a plain border. */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(212,175,55,.15) 18%, var(--gold) 50%,
    rgba(212,175,55,.15) 82%, transparent 100%);
  z-index: 2;
}
/* Texture wash: the card-suit tile used elsewhere on the site, plus warm
   flame/gold blooms rising from the lower corners. Static by design — see the
   note on .tex-suits in global.css about repaint cost on large layers. */
.site-footer::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23D4AF37' fill-opacity='0.16'%3E%3Cpath d='M30 18c-6 7-12 11-12 17a7 7 0 0 0 11 6l-2 7h6l-2-7a7 7 0 0 0 11-6c0-6-6-10-12-17z'/%3E%3Cpath d='M90 78c-6 7-12 11-12 17a7 7 0 0 0 11 6l-2 7h6l-2-7a7 7 0 0 0 11-6c0-6-6-10-12-17z'/%3E%3C/g%3E%3Cg fill='%23C41E3A' fill-opacity='0.18'%3E%3Cpath d='M90 20c-3-4-9-3-9 2 0 5 6 9 9 13 3-4 9-8 9-13 0-5-6-6-9-2z'/%3E%3Cpath d='M30 80c-3-4-9-3-9 2 0 5 6 9 9 13 3-4 9-8 9-13 0-5-6-6-9-2z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 150px 150px;
  background-repeat: repeat;
  opacity: .3;
  /* Hold the tile back behind the link columns and let it re-emerge toward the
     edges, so it reads as texture rather than wallpaper behind the text. */
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 42%, transparent 18%, #000 88%);
          mask-image: radial-gradient(ellipse 78% 62% at 50% 42%, transparent 18%, #000 88%);
}
/* Warm flame/gold blooms rising from the lower corners, on their own layer so
   the tile mask above doesn't erase them. */
.site-footer > .footer-inner:first-child::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 100vw;
  height: 100%;
  margin-left: -50vw;
  pointer-events: none;
  z-index: -1;
  background-image:
    radial-gradient(ellipse 60% 80% at 8% 118%, rgba(204,3,10,.20) 0%, transparent 60%),
    radial-gradient(ellipse 55% 75% at 92% 118%, rgba(253,107,4,.16) 0%, transparent 58%),
    radial-gradient(ellipse 85% 60% at 50% -18%, rgba(212,175,55,.07) 0%, transparent 62%);
}
/* Keep real footer content above the texture layer. */
.site-footer > * { position: relative; z-index: 1; }
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
  gap: 3rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 5rem 2rem 3rem;
}
/* Sitemap-style footer: two narrow service columns plus two wide link
   directories (themes / acts) that flow into sub-columns like the original. */
.footer-directory {
  grid-template-columns: 1fr 1.1fr 2.2fr 2.2fr;
  gap: 2.5rem;
  align-items: start;
}
.footer-directory .footer-col-wide ul {
  display: block;
  columns: 2;
  column-gap: 2rem;
}
.footer-directory .footer-col-wide ul li {
  break-inside: avoid;
  margin-bottom: .5rem;
}
.footer-directory .footer-col ul a { font-size: .8rem; }

/* Headings get a short gold underline that widens on column hover. */
.footer-directory .footer-heading {
  position: relative;
  padding-bottom: .6rem;
  margin-bottom: 1rem;
}
.footer-directory .footer-heading::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 28px; height: 2px;
  border-radius: 2px;
  background: var(--grad-flame);
  transition: width var(--t-smooth);
}
.footer-directory .footer-col:hover .footer-heading::after { width: 56px; }

/* Links slide off a gold bullet that fades in on hover, instead of the plain
   colour swap used by the compact footer. */
.footer-directory .footer-col ul a {
  position: relative;
  display: inline-block;
  padding-left: 0;
  transition: color var(--t-fast), padding-left var(--t-fast), transform var(--t-fast);
}
.footer-directory .footer-col ul a::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 4px; height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  transform: scale(.4);
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.footer-directory .footer-col ul a:hover {
  color: var(--gold-light);
  padding-left: 12px;
}
.footer-directory .footer-col ul a:hover::before { opacity: 1; transform: scale(1); }
/* Brand + contact strip sitting between the directory and the legal bar. */
.footer-brandbar {
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.022), transparent 70%);
}
.footer-brandbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
/* Positioning line above the descriptive tagline. */
.footer-tagline-main {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--gold);
  margin-bottom: .5rem;
}
/* Sister-brand cross-promo column. */
.footer-partners .footer-partner-q {
  font-size: .85rem;
  color: var(--text-secondary);
  margin: 1rem 0 .35rem;
}
.footer-partners .footer-partner-q:first-of-type { margin-top: 0; }
.footer-partners a {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--gold);
  text-decoration: none;
  transition: color var(--t-fast);
}
.footer-partners a:hover { color: var(--white); }
.footer-partner-note {
  display: block;
  font-size: .74rem;
  color: var(--muted);
  margin-top: .2rem;
}
@media (max-width: 900px) {
  .footer-brandbar-inner { grid-template-columns: 1fr; gap: 2rem; }
}
.footer-brandbar .footer-contact p { margin-bottom: .5rem; font-size: .85rem; color: var(--muted); }
.footer-brandbar .footer-contact i { color: var(--gold); width: 1.1rem; }
.footer-brandbar .footer-contact .btn { margin-top: 1rem; }
/* Contact rows warm up on hover so the block feels interactive, not static. */
.footer-brandbar .footer-contact p { transition: color var(--t-fast); }
.footer-brandbar .footer-contact p:hover { color: var(--text); }

/* Social icons lift into a gold glow rather than a flat colour change. */
.site-footer .footer-social a {
  position: relative;
  overflow: hidden;
  transition: color var(--t-fast), border-color var(--t-fast),
              transform var(--t-fast), box-shadow var(--t-fast);
}
.site-footer .footer-social a::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--grad-flame);
  opacity: 0;
  transition: opacity var(--t-fast);
}
.site-footer .footer-social a i { position: relative; z-index: 1; }
.site-footer .footer-social a:hover {
  color: var(--white);
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(204,3,10,.35);
}
.site-footer .footer-social a:hover::before { opacity: 1; }

/* Award chips read as small medallions instead of loose text. */
.footer-awards span {
  padding: .3rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: rgba(255,255,255,.02);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.footer-awards span:hover { border-color: rgba(212,175,55,.45); color: var(--gold); }
.footer-logo { height: 55px; width: auto; margin-bottom: 1.25rem; }
.footer-brand p {
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.footer-social { display: flex; gap: .75rem; }
.footer-social a {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  color: var(--muted);
  font-size: .9rem;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.footer-social a:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(212,175,55,.06);
}
.footer-heading {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: .5rem; }
.footer-col ul a {
  font-size: .85rem;
  color: var(--muted);
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.footer-col ul a:hover { color: var(--text); padding-left: 4px; }
.footer-contact p {
  display: flex; align-items: center; gap: .6rem;
  font-size: .85rem; color: var(--muted);
  margin-bottom: .6rem;
}
.footer-contact p i { color: var(--gold); width: 16px; text-align: center; }
.footer-contact a { color: var(--muted); transition: color var(--t-fast); }
.footer-contact a:hover { color: var(--gold); }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 1.5rem 2rem;
}
.footer-bottom-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.footer-awards {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  font-size: .72rem; color: var(--muted-dark);
}
.footer-awards span { display: flex; align-items: center; gap: .3rem; }
.footer-copy  { font-size: .78rem; color: var(--muted-dark); }
.footer-credit {
  font-size: .78rem;
  color: var(--muted-dark);
  text-align: right;
}
.footer-credit strong { color: var(--gold); }

/* Filter tabs */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-bottom: 2.5rem;
}
.filter-tab {
  padding: .55rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--t-fast);
}
.filter-tab:hover { border-color: var(--gold); color: var(--gold); }
.filter-tab.active {
  background: var(--grad-gold);
  border-color: transparent;
  color: var(--black);
}

/* Filter tabs sitting inside the page hero */
.hero-filter-label {
  margin: 2rem 0 .9rem;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}
.hero-filter-tabs { margin-bottom: 0; }
.hero-filter-tabs .filter-tab {
  border-color: rgba(255,255,255,.35);
  color: var(--white);
  background: rgba(0,0,0,.3);
  backdrop-filter: blur(4px);
  font-size: .8rem;
  padding: .7rem 1.7rem;
}
.hero-filter-tabs .filter-tab:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.hero-filter-tabs .filter-tab.active {
  background: var(--grad-gold);
  border-color: transparent;
  color: var(--black);
}

/* Second-level sub-filters, revealed once a parent category is chosen.
   Sticks below the fixed header so the tabs stay reachable while scrolling
   the long act grid. --header-h and the body.has-sticky-subnav overflow fix
   are defined in the sticky sub-nav block near the end of this file. */
.subfilter-bar {
  position: sticky;
  top: var(--header-h, 88px);
  z-index: 40;
  background: rgba(10,10,10,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 1rem 0;
  /* scrollIntoView would otherwise park the bar underneath the fixed header. */
  scroll-margin-top: var(--header-h, 88px);
}
.subfilter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem 1.25rem;
}
/* `display:flex` above would otherwise defeat the `hidden` attribute. */
.subfilter-bar[hidden],
.subfilter-group[hidden] { display: none; }
.subfilter-label {
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.subfilter-tabs { margin-bottom: 0; }
.subfilter-tab {
  font-size: .68rem;
  padding: .45rem 1.1rem;
}

/* Narrow screens: wrapping to 3-4 rows would swallow the viewport once the bar
   is stuck, so scroll the tabs on one line instead. */
@media (max-width: 768px) {
  .subfilter-bar { padding: .7rem 0; }
  .subfilter-group {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: .5rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .subfilter-group::-webkit-scrollbar { display: none; }
  .subfilter-label { flex: 0 0 auto; }
  .subfilter-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .subfilter-tab { flex: 0 0 auto; white-space: nowrap; }
}

/* Map wrapper */
.map-wrapper {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--sh-deep);
}
.map-wrapper iframe { display: block; }

/* ═══════════════════════════════════════════════════════════
   DECOR PAGE — intro, before/after sliders, category galleries
   ═══════════════════════════════════════════════════════════ */

/* ── Intro copy + facts ────────────────────────────────────── */
.decor-intro { max-width: 900px; margin: 0 auto; text-align: center; }
.decor-intro p { margin-bottom: 1.25rem; }
.decor-facts {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}
.decor-fact {
  padding: 1.5rem 1rem;
  border: 1px solid rgba(212,175,55,.2);
  border-radius: var(--r-lg);
  background: var(--grad-card);
  transition: transform var(--t-smooth), border-color var(--t-smooth);
}
.decor-fact:hover { transform: translateY(-4px); border-color: rgba(212,175,55,.5); }
.decor-fact-num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1;
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: .4rem;
}
.decor-fact-label { font-size: .74rem; color: var(--muted); letter-spacing: .04em; }

/* ── Before / after comparison ─────────────────────────────── */
.ba-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.5rem;
}
.ba-item figcaption {
  margin-top: .85rem;
  font-size: .82rem;
  color: var(--muted);
  text-align: center;
}
.ba-wrap {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 3/2;
  cursor: ew-resize;
  touch-action: pan-y;
  box-shadow: var(--sh-card);
  border: 1px solid rgba(212,175,55,.22);
  user-select: none;
}
.ba-wrap > img,
.ba-before-pane img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
}
/* The before pane is clipped to the slider position, revealing after behind it.
   Its image stays sized to the wrapper so both halves stay in register. */
.ba-before-pane {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 50%;
  overflow: hidden;
  will-change: width;
}
.ba-before-pane img { width: var(--ba-w, 100%); }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px;
  background: var(--grad-gold);
  transform: translateX(-1px);
  pointer-events: none;
  box-shadow: 0 0 14px rgba(212,175,55,.7);
}
.ba-handle i {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--grad-gold);
  color: var(--black);
  font-size: .8rem;
  box-shadow: 0 4px 18px rgba(0,0,0,.6);
}
.ba-tag {
  position: absolute; top: .75rem;
  font-size: .62rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .3rem .6rem;
  border-radius: var(--r-full);
  background: rgba(0,0,0,.72);
  color: var(--white);
  pointer-events: none;
  z-index: 3;
}
.ba-tag-before { left: .75rem; }
.ba-tag-after  { right: .75rem; color: var(--gold); }
/* Transparent range input keeps the slider keyboard-accessible */
.ba-range {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  margin: 0;
  cursor: ew-resize;
  z-index: 2;
}
.ba-range:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* ── Category cards ────────────────────────────────────────── */
.decor-cats {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1.25rem;
}
/* The gallery tile is a <button>, so the request button can't nest inside
   it — the cell stacks the two as siblings instead. */
.decor-cat-cell {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.decor-cat-cell .decor-cat { flex: 1 1 auto; }
.decor-cat-cell .cart-btn { width: 100%; justify-content: center; }
.decor-cat {
  position: relative;
  display: block;
  padding: 0;
  border: 1px solid rgba(212,175,55,.18);
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  cursor: pointer;
  background: var(--dark-card);
  text-align: left;
  font: inherit;
  color: inherit;
  transition: transform var(--t-smooth), border-color var(--t-smooth), box-shadow var(--t-smooth);
}
.decor-cat:hover, .decor-cat:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(253,107,4,.6);
  box-shadow: var(--sh-deep), 0 0 30px rgba(247,60,3,.25);
  outline: none;
}
.decor-cat img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.decor-cat:hover img { transform: scale(1.08); }
/* Caption sits at the top, so the scrim runs downward from the top edge */
.decor-cat-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.92) 0%, rgba(0,0,0,.72) 26%, rgba(0,0,0,.3) 48%, transparent 72%);
  transition: background var(--t-smooth);
}
.decor-cat:hover .decor-cat-overlay {
  background: linear-gradient(to bottom, rgba(0,0,0,.94) 0%, rgba(153,3,6,.5) 34%, rgba(0,0,0,.25) 62%, transparent 85%);
}
.decor-cat-body {
  position: absolute; inset: 0 0 auto 0;
  z-index: 2;
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem .8rem;
}
.decor-cat-icon {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  background: rgba(212,175,55,.16);
  border: 1px solid rgba(212,175,55,.4);
  color: var(--gold-light);
  font-size: .95rem;
  transition: background var(--t-smooth), color var(--t-smooth);
}
.decor-cat:hover .decor-cat-icon { background: var(--grad-gold); color: var(--black); }
.decor-cat h3 {
  flex: 1;
  min-width: 0;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--white);
  margin: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,.9);
}
.decor-cat-count {
  flex-basis: 100%;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.decor-cat-count i { margin-left: .3rem; transition: transform var(--t-fast); }
.decor-cat:hover .decor-cat-count i { transform: translateX(4px); }

/* ── Lightbox ──────────────────────────────────────────────── */
.decor-lightbox {
  position: fixed; inset: 0;
  z-index: 9999;
  background: rgba(6,6,6,.97);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 1rem 1rem;
}
.decor-lightbox[hidden] { display: none; }
.dlb-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: 100%;
}
.dlb-stage img {
  max-width: min(1100px, 92vw);
  max-height: calc(100vh - 16rem);
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: 0 24px 70px rgba(0,0,0,.8);
}
.dlb-stage figcaption {
  margin-top: .9rem;
  font-size: .82rem;
  color: var(--muted);
  text-align: center;
}
.dlb-stage figcaption span:first-child { color: var(--gold); font-weight: 600; }
.dlb-close, .dlb-nav {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(212,175,55,.35);
  color: var(--white);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.dlb-close:hover, .dlb-nav:hover {
  background: var(--grad-gold);
  color: var(--black);
  transform: scale(1.08);
}
.dlb-close { top: 1.1rem; right: 1.1rem; width: 44px; height: 44px; font-size: 1.1rem; }
.dlb-nav   { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; font-size: 1.15rem; }
.dlb-nav:hover { transform: translateY(-50%) scale(1.08); }
.dlb-prev { left: 1.1rem; }
.dlb-next { right: 1.1rem; }
.dlb-thumbs {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  max-width: 100%;
  padding: .85rem .25rem .25rem;
  scrollbar-width: thin;
}
.dlb-thumbs button {
  flex-shrink: 0;
  width: 78px; height: 56px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: .45;
  transition: opacity var(--t-fast), border-color var(--t-fast);
}
.dlb-thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dlb-thumbs button:hover { opacity: .85; }
.dlb-thumbs button.active { opacity: 1; border-color: var(--gold); }

/* ═══════════════════════════════════════════════════════════
   INDIVIDUAL THEME PAGES
   ═══════════════════════════════════════════════════════════ */
.tp-intro {
  text-align: center;
  font-size: 1.02rem;
  line-height: 1.9;
  color: var(--text);
  max-width: 62ch;
  margin: 0 auto;
}

/* ── Photo grid ────────────────────────────────────────────── */
.tp-gallery {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: .9rem;
}
.tp-shot {
  position: relative;
  padding: 0;
  border: 1px solid rgba(212,175,55,.16);
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--dark-card);
  cursor: pointer;
  transition: transform var(--t-smooth), border-color var(--t-smooth), box-shadow var(--t-smooth);
}
.tp-shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.tp-shot:hover, .tp-shot:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(253,107,4,.6);
  box-shadow: 0 12px 32px rgba(0,0,0,.6), 0 0 22px rgba(247,60,3,.22);
  outline: none;
}
.tp-shot:hover img { transform: scale(1.08); }

/* ── Sample proposal ───────────────────────────────────────── */
.tp-proposal {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 1.1rem;
  max-width: 1000px;
  margin: 0 auto;
}
.tp-prop-block {
  padding: 1.5rem 1.6rem;
  border-radius: var(--r-lg);
  border: 1px solid rgba(212,175,55,.2);
  background: var(--grad-card);
  transition: border-color var(--t-smooth), transform var(--t-smooth);
}
.tp-prop-block:hover {
  border-color: rgba(212,175,55,.45);
  transform: translateY(-3px);
}
.tp-prop-block h4 {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .6rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(212,175,55,.2);
}
.tp-prop-block p {
  font-size: .86rem;
  line-height: 1.8;
  color: var(--text);
  margin: 0;
}

/* ── Act detail pages ──────────────────────────────────────── */
.act-breadcrumb {
  background: var(--dark);
  border-bottom: 1px solid var(--border);
  padding: .9rem 0;
  font-family: var(--font-body);
  font-size: .75rem;
  letter-spacing: .04em;
}
.act-breadcrumb a { color: var(--muted); text-decoration: none; transition: color var(--t-fast); }
.act-breadcrumb a:hover { color: var(--gold); }
.act-breadcrumb span { color: var(--muted); margin: 0 .35rem; }
.act-breadcrumb .current { color: var(--gold); margin: 0; }

.act-copy p {
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--muted);
  margin-bottom: 1.15rem;
}
.act-copy p:last-child { margin-bottom: 0; }

/* Make the whole performer card a link without altering its look */
a.performer-card { display: block; text-decoration: none; }

/* ── Pricing Guide ─────────────────────────────────────────── */

/* The site header is position:fixed and folds its top-bar away past 60px of
   scroll, so it measures ~140px at rest and ~88px once collapsed. The jump-bar
   is only ever stuck in that collapsed state, so it parks against that height. */
:root { --header-h: 88px; }

/* global.css sets overflow-x:hidden on <html> to stop sideways drift on mobile,
   but that makes <html> a scroll container, which silently kills position:sticky
   for descendants. Clipping on <body> instead restores sticky and still contains
   the overflow. Scoped to this page so the other 90-odd pages keep the original
   behaviour the global rule was tuned for. */
body.has-sticky-subnav { overflow-x: clip; }
html:has(body.has-sticky-subnav) { overflow-x: clip; }

/* Sticky category jump-bar — comes to rest below the fixed header, not at top:0. */
.pricing-jump {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: rgba(10,10,10,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.pricing-jump-inner {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding: .85rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
  scrollbar-width: none;
}
.pricing-jump-inner::-webkit-scrollbar { display: none; }
.pricing-jump a {
  flex: 0 0 auto;
  padding: .5rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  color: var(--muted);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.pricing-jump a:hover,
.pricing-jump a.is-active {
  color: var(--gold);
  border-color: rgba(212,175,55,.5);
  background: rgba(212,175,55,.08);
}

/* Category block */
.pricing-category { margin-bottom: 4rem; }
.pricing-category:last-child { margin-bottom: 0; }
/* Anchor jumps must clear both the fixed header and the sticky jump-bar,
   or the heading lands underneath them. scroll-margin does this natively —
   a negative-offset spacer span mis-measures once the bar is stuck. */
.pricing-category-anchor {
  display: block;
  scroll-margin-top: calc(var(--header-h, 140px) + 80px);
}
.pricing-category-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(212,175,55,.25);
}
.pricing-category-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--white);
}
.pricing-category-head h2 span {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pricing-category-count {
  font-family: var(--font-body);
  font-size: .72rem;
  color: var(--muted-dark);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-left: auto;
  white-space: nowrap;
}

/* Act cards */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.25rem;
}
.pricing-card {
  display: flex;
  flex-direction: column;
  background: var(--grad-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.5rem 1.35rem;
  transition: border-color var(--t-smooth), transform var(--t-smooth), box-shadow var(--t-smooth);
}
.pricing-card:hover {
  border-color: rgba(212,175,55,.4);
  transform: translateY(-4px);
  box-shadow: var(--sh-card);
}
/* Act photo. The card carries its own padding, so the media band cancels it
   with negative margins to sit flush against the border instead of nesting
   every card's copy in an extra wrapper. */
.pricing-card-media {
  position: relative;
  display: block;
  margin: -1.6rem -1.5rem 1.1rem;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
  background: var(--dark-card);
}
.pricing-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
  transition: transform var(--t-smooth);
}
.pricing-card:hover .pricing-card-media img { transform: scale(1.06); }
/* Keeps the card title legible where a photo runs bright at the bottom edge. */
.pricing-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0) 45%, rgba(10,10,10,.75) 100%);
  pointer-events: none;
}
/* Starting price stamped on the photo so the figure is scannable before the
   eye ever reaches the rate rows. */
.pricing-card-tag {
  position: absolute;
  left: .85rem;
  bottom: .8rem;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  padding: .35rem .7rem;
  border-radius: var(--r-sm);
  background: rgba(10,10,10,.72);
  border: 1px solid rgba(212,175,55,.45);
  backdrop-filter: blur(6px);
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
}
.pricing-card-tag span {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.pricing-card-head {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .6rem;
}
.pricing-card-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: rgba(212,175,55,.1);
  color: var(--gold);
  font-size: .85rem;
}
.pricing-card h3 {
  font-family: var(--font-display);
  font-size: 1.13rem;
  line-height: 1.3;
  color: var(--white);
}
.pricing-card h3 a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
.pricing-card h3 a:hover { color: var(--gold); }
/* The description absorbs the slack so cards of differing copy length still
   line their price blocks up against a common baseline. */
.pricing-card-desc {
  flex: 1 0 auto;
  font-size: .87rem;
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: 1.1rem;
}

/* Price rows — the primary figure, then any add-on rates */
.pricing-rates {
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.pricing-rate {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .3rem 0;
}
.pricing-rate-label {
  font-family: var(--font-body);
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted-dark);
}
.pricing-rate-value {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--gold);
  white-space: nowrap;
}
.pricing-rate-sub .pricing-rate-value {
  font-size: .92rem;
  font-weight: 600;
  color: var(--text);
}
/* Package deals and optional extras */
.pricing-note {
  margin-top: .75rem;
  padding: .6rem .75rem;
  border-radius: var(--r-sm);
  background: rgba(212,175,55,.07);
  border-left: 2px solid rgba(212,175,55,.45);
  font-size: .78rem;
  line-height: 1.55;
  color: var(--text);
}
.pricing-note strong { color: var(--gold); font-weight: 600; }
.pricing-note a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }

/* ── Price block on an individual act page ──────────────────────────
   Reuses .pricing-rate / .pricing-note from the guide so the numbers
   read identically in both places; only the container differs. */
.act-pricing-card {
  max-width: 560px;
  margin: 0 auto;
  background: var(--dark-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 2rem;
}
/* A page selling two distinct packages stacks a card per package. */
.act-pricing-card + .act-pricing-card { margin-top: 1.25rem; }
.act-pricing-variant {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  color: var(--white);
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}
.act-pricing-card .pricing-rates {
  padding-top: 0;
  border-top: 0;
}
.act-pricing-terms {
  margin-top: 1.25rem;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--muted);
}
.act-pricing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem;
}
.act-pricing-actions .cart-btn,
.act-pricing-actions .btn { flex: 1 1 auto; justify-content: center; }

@media (max-width: 480px) {
  .act-pricing-card { padding: 1.5rem; }
  .act-pricing-actions { flex-direction: column; }
}

.pricing-card-actions {
  display: flex;
  gap: .5rem;
  margin-top: 1rem;
}
.pricing-card-actions .cart-btn { flex: 1; justify-content: center; }
.pricing-card-link {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--muted);
  text-decoration: none;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.pricing-card-link:hover { color: var(--gold); border-color: rgba(212,175,55,.5); }

/* Terms / fine print */
.pricing-terms {
  background: var(--grad-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2rem 1.85rem;
}
.pricing-terms h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--white);
  margin-bottom: 1.15rem;
}
.pricing-terms ul { list-style: none; }
.pricing-terms li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .8rem;
  font-size: .88rem;
  line-height: 1.7;
  color: var(--muted);
}
.pricing-terms li:last-child { margin-bottom: 0; }
.pricing-terms li::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  top: .15rem;
  font-size: .72rem;
  color: var(--gold);
}
.pricing-terms strong { color: var(--text); font-weight: 600; }