/* ============================================================
   CASA NOVA — THE CASA NOVA CLUB (Loyalty Landing Page Stylesheet)
   ------------------------------------------------------------
   Template: page-casa-nova-club.php
   Inherits base brand tokens, fonts, and global button system from:
   assets/css/global-brand.css

   Section rhythm (background alternation):
     hero .............. deep olive
     rewards ........... cream   (--cnc-bg)
     early access ...... surface (--cnc-surface)
     why join .......... cream   (--cnc-bg)
     locations ......... peach   (global .cnc-homes)
     join .............. deep olive
     terms ............. surface (--cnc-surface)
   ============================================================ */

.cnc-page {
  /* ---- Scoped Brand Tokens ---- */
  --cnc-accent: var(--global-palette1, #C74C05);
  --cnc-accent-deep: var(--global-palette2, #A63F04);
  --cnc-secondary: #F9CEB3;
  --cnc-peach-soft: #FBE7D8;
  --cnc-ink: var(--global-palette3, #2D2D2D);
  /* Dark brand ink for headings matching other pages */
  --cnc-ink-soft: #5B5B53;
  /* Standard secondary / paragraph text */
  --cnc-text: #5B5B53;
  --cnc-muted: var(--global-palette5, #6D7570);
  --cnc-line: var(--global-palette6, #E6DDCF);
  --cnc-surface: var(--global-palette7, #F3ECE2);
  --cnc-bg: var(--global-palette8, #FAF6F0);
  --cnc-white: var(--global-palette9, #FFFFFF);
  --cnc-gold: #A98A4B;
  --cnc-gold-light: #C4A86A;
  --cnc-olive: #2c3819;
  --cnc-olive-deep: #1d2511;

  /* ---- Type Tokens ---- */
  --cnc-font-display: "Bebas Neue", var(--global-heading-font-family, sans-serif);
  --cnc-font-body: "Montserrat", var(--global-body-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --cnc-font-script: "Vintage Goods", "Brush Script MT", cursive;

  /* ---- Scale & Rhythm ---- */
  --cnc-max: 1200px;
  --cnc-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --cnc-section-pad: clamp(4rem, 8vw, 7.5rem);
  --cnc-radius-btn: 3px;
  --cnc-radius-box: 10px;
  --cnc-radius: 10px;
  --cnc-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- Elevation ---- */
  --cnc-shadow-xs: 0 3px 12px rgba(45, 45, 45, 0.04);
  --cnc-shadow-sm: 0 6px 20px rgba(45, 45, 45, 0.06);
  --cnc-shadow-md: 0 18px 42px -18px rgba(45, 45, 45, 0.22);

  /* Clearance for in-page anchors under the sticky Kadence header */
  --cnc-anchor-offset: 120px;

  background: var(--cnc-bg);
  color: var(--cnc-ink-soft);
  font-family: var(--cnc-font-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Scoped Reset */
.cnc-page *,
.cnc-page *::before,
.cnc-page *::after {
  box-sizing: border-box;
  margin: 0;
}

.cnc-page img {
  display: block;
  max-width: 100%;
  height: auto;
}

.cnc-page :focus-visible {
  outline: 3px solid var(--cnc-accent);
  outline-offset: 3px;
  border-radius: var(--cnc-radius-btn);
}

/* Anchor targets clear the sticky header instead of hiding beneath it */
.cnc-page [id] {
  scroll-margin-top: var(--cnc-anchor-offset);
}

/* ============================================================
   PARAGRAPH TYPE — why !important appears below

   global-brand.css sets font-family / font-size / line-height /
   colour on EVERY paragraph in this page through
   .cnc-page p:not(.cnc-eyebrow):not(.cnc-homes__eyebrow) — a (0,3,1)
   selector — and paints paragraphs inside the dark sections white via
   .cnc-hero p / .cnc-join p { color: ... !important }.

   Both outrank ordinary single-class component rules, so every classed
   paragraph on this page (card brand, reward hook, section ledes, fine
   print) was being flattened to 16px Montserrat in the generic body
   colour, and the OpenTable note was rendering white on white.

   Those four properties are therefore marked !important wherever a
   component needs its own value. Nothing else in this file should.
   ============================================================ */

/* ============================================================
   LAYOUT PRIMITIVES & HEADINGS
   ============================================================ */
.cnc-container {
  width: min(var(--cnc-max), calc(100% - (var(--cnc-gutter) * 2)));
  max-width: var(--cnc-max);
  margin-inline: auto;
  box-sizing: border-box;
}

.cnc-section {
  padding-block: var(--cnc-section-pad);
  box-sizing: border-box;
}

.cnc-section__head {
  max-width: 52ch;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.cnc-section__head--centred {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}

.cnc-eyebrow,
.cnc-homes__eyebrow {
  display: block;
  width: fit-content;
  font-family: var(--cnc-font-script, "Vintage Goods", cursive);
  font-size: var(--cn-fs-eyebrow, clamp(1.35rem, 2.4vw, 28px));
  line-height: 1.25;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--cnc-accent);
  margin-bottom: 0.5rem;
}

.cnc-h2 {
  font-family: var(--cnc-font-display);
  font-size: var(--cn-fs-h2, clamp(1.8rem, 3.6vw, 2.7rem));
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--cnc-ink);
  text-wrap: balance;
}

.cnc-h2 em,
.cnc-page h2 em,
.cnc-page h3 em {
  font-style: normal;
  color: #F76A0C;
}

/* ============================================================
   HERO — deep, warm, with the membership card as focal point
   ============================================================ */
.cnc-hero {
  position: relative;
  background: var(--cnc-olive);
  color: var(--cnc-white);
  padding-top: 200px;
  padding-bottom: clamp(4.5rem, 8vw, 6.5rem);
  overflow: hidden;
  isolation: isolate;
}

.cnc-hero__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* warm key light behind the card */
    radial-gradient(58% 62% at 76% 34%, rgba(199, 76, 5, 0.42) 0%, transparent 68%),
    /* soft peach fill, bottom left */
    radial-gradient(48% 58% at 8% 88%, rgba(249, 206, 179, 0.16) 0%, transparent 70%),
    /* scrim so the transparent site header stays legible */
    linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0) 34%),
    /* grounding vignette into the next section */
    linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0) 26%);
}

.cnc-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

/* ---- Social Proof Badge ---- */
.cnc-proof-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  width: fit-content;
  max-width: 100%;
  padding: 0.4rem 0.95rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 1.25rem;
  font-family: var(--cnc-font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.02em;
  line-height: 1.35;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.cnc-proof-badge--light {
  background: rgba(199, 76, 5, 0.08);
  border-color: rgba(199, 76, 5, 0.22);
  color: var(--cnc-accent);
  box-shadow: none;
}

.cnc-proof-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 10px #4ADE80;
  animation: cncPulse 2s infinite ease-in-out;
  flex-shrink: 0;
}

.cnc-proof-badge--light .cnc-proof-badge__dot {
  background: var(--cnc-accent);
  box-shadow: 0 0 8px var(--cnc-accent);
}

@keyframes cncPulse {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.2);
    opacity: 1;
    filter: brightness(1.2);
  }

  100% {
    transform: scale(0.95);
    opacity: 0.8;
  }
}

.cnc-hero .cnc-hero__eyebrow {
  display: block;
  width: fit-content;
  font-family: var(--cnc-font-script, "Vintage Goods", cursive);
  font-size: var(--cn-fs-eyebrow, clamp(1.35rem, 2.4vw, 28px));
  line-height: 1.25;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--cnc-secondary) !important;
  margin-bottom: 0.5rem;
}

.cnc-hero__title {
  font-family: var(--cnc-font-display);
  font-weight: 400;
  font-size: var(--cn-fs-hero, clamp(2.8rem, 6.5vw, 5rem));
  line-height: 1.04;
  letter-spacing: normal;
  text-transform: uppercase;
  color: #ffffff !important;
  max-width: 16ch;
  text-wrap: balance;
}

.cnc-hero__title em {
  font-style: normal;
  color: var(--cnc-secondary) !important;
}

.cnc-page .cnc-hero__lede {
  max-width: 52ch;
  margin-top: 1.5rem;
  font-family: var(--cnc-font-body) !important;
  font-size: var(--cn-fs-lead, clamp(1.05rem, 1.4vw, 1.2rem)) !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

.cnc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.25rem;
}

/* ---- The membership card (Signature Element — Keeps Gold Accent) ---- */
.cnc-hero__card-stage {
  perspective: 1100px;
  display: grid;
  place-items: center;
  width: 100%;
}

.cnc-card {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1.586 / 1;
  /* ISO/IEC 7810 ID-1 standard ratio */
  border-radius: 14px;
  padding: 1.5px;
  /* luxury gold frame */
  background: linear-gradient(145deg,
      rgba(212, 186, 128, 1) 0%,
      rgba(169, 138, 75, 0.35) 42%,
      rgba(212, 186, 128, 0.9) 100%);
  box-shadow:
    0 36px 70px -18px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  transform-style: preserve-3d;
  transition: transform 0.5s var(--cnc-ease);
  will-change: transform;
  overflow: hidden;
}

.cnc-card__inner {
  position: relative;
  height: 100%;
  border-radius: 13px;
  padding: clamp(1.2rem, 3vw, 1.95rem);
  background:
    radial-gradient(circle at 88% 12%, rgba(199, 76, 5, 0.32) 0%, transparent 58%),
    radial-gradient(circle at 12% 92%, rgba(169, 138, 75, 0.20) 0%, transparent 55%),
    linear-gradient(150deg, #222c13 0%, #161d0c 55%, #1c2410 100%);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  color: var(--cnc-bg);
  overflow: hidden;
}

/* Embossed monogram — depth without another asset to load */
.cnc-card__inner::after {
  content: "CN";
  position: absolute;
  top: 50%;
  right: -0.12em;
  translate: 0 -58%;
  font-family: var(--cnc-font-display);
  font-size: clamp(4.5rem, 11vw, 7.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(196, 168, 106, 0.06);
  pointer-events: none;
  user-select: none;
}

.cnc-card__sheen {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: 14px;
  background: linear-gradient(105deg,
      transparent 35%,
      rgba(255, 255, 255, 0.16) 48%,
      transparent 62%);
  transform: translateX(-35%);
  transition: transform 0.6s var(--cnc-ease);
}

.cnc-card:hover .cnc-card__sheen {
  transform: translateX(35%);
}

.cnc-page .cnc-card__brand {
  font-family: var(--cnc-font-display) !important;
  font-size: clamp(1.4rem, 2.8vw, 1.8rem) !important;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff !important;
  line-height: 1 !important;
}

.cnc-page .cnc-card__club {
  font-family: var(--cnc-font-script) !important;
  font-size: clamp(1.4rem, 2.5vw, 1.7rem) !important;
  font-weight: 400;
  color: var(--cnc-gold-light) !important;
  letter-spacing: 0.04em;
  margin-top: 0.2rem;
  line-height: 1 !important;
}

.cnc-card__rewards {
  position: relative;
  z-index: 1;
  list-style: none;
  padding: 0;
  align-self: end;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1rem;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.35;
}

.cnc-card__rewards li {
  position: relative;
  padding-left: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
}

.cnc-card__rewards li::before {
  content: "\2726";
  position: absolute;
  left: 0;
  font-size: 0.65rem;
  color: var(--cnc-gold-light);
  top: 0.15em;
}

.cnc-card__foot {
  position: relative;
  z-index: 1;
  margin-top: 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(196, 168, 106, 0.4);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cnc-secondary);
  opacity: 0.9;
}

/* ============================================================
   REWARDS
   ============================================================ */
.cnc-rewards {
  background: var(--cnc-bg);
}

/* Four cards read as a balanced 2 x 2 block — an auto-fit track
   leaves a single orphan card on a 1200px container. */
.cnc-rewards__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.cnc-reward {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cnc-white);
  border: 1px solid var(--cnc-line);
  border-radius: var(--cnc-radius-box);
  padding: clamp(1.75rem, 3vw, 2.4rem);
  overflow: hidden;
  box-shadow: var(--cnc-shadow-xs);
  transition: transform 0.35s var(--cnc-ease), box-shadow 0.35s var(--cnc-ease), border-color 0.35s var(--cnc-ease);
}

/* Accent rule sweeps across on hover instead of a static top border */
.cnc-reward::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--cnc-secondary);
  transition: background 0.35s var(--cnc-ease);
}

.cnc-reward::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  height: 3px;
  width: 0;
  background: var(--cnc-accent);
  transition: width 0.45s var(--cnc-ease);
}

.cnc-reward:hover {
  transform: translateY(-5px);
  box-shadow: var(--cnc-shadow-md);
  border-color: var(--cnc-secondary);
}

.cnc-reward:hover::after {
  width: 100%;
}

.cnc-reward__badge {
  display: inline-block;
  font-family: var(--cnc-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cnc-accent);
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.cnc-reward__title {
  font-family: var(--cnc-font-display);
  font-weight: 400;
  font-size: var(--cn-fs-h3, clamp(1.25rem, 2.2vw, 1.5rem));
  line-height: 1.15;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--cnc-ink);
  margin-bottom: 0.65rem;
  text-wrap: balance;
}

.cnc-page .cnc-reward__hook {
  font-weight: 600;
  font-size: 1.02rem !important;
  line-height: 1.45 !important;
  color: var(--cnc-accent) !important;
  margin-bottom: 0.85rem;
}

.cnc-page .cnc-reward__body {
  font-size: 0.96rem !important;
  line-height: 1.65 !important;
  color: var(--cnc-ink-soft) !important;
  margin-bottom: 1.5rem;
}

.cnc-page .cnc-reward__terms {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px dashed var(--cnc-line);
  font-size: 0.8rem !important;
  line-height: 1.5 !important;
  color: var(--cnc-muted) !important;
  font-style: italic;
}

.cnc-rewards__cta {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  text-align: center;
}

/* ============================================================
   EARLY ACCESS — "Be First to Know"
   ============================================================ */
.cnc-early-access {
  background: var(--cnc-surface);
  border-block: 1px solid var(--cnc-line);
}

.cnc-early-access__head {
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

/* Centred on its own line — as an inline-flex element it used to sit
   beside the script eyebrow. */
.cnc-early-access__head .cnc-eyebrow {
  margin-inline: auto;
}

.cnc-early-access__icon-wrap {
  display: flex;
  width: 58px;
  height: 58px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: var(--cnc-white);
  border: 1px solid var(--cnc-line);
  color: var(--cnc-accent);
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(199, 76, 5, 0.12);
  transition: transform 0.3s var(--cnc-ease);
}

.cnc-early-access__icon-wrap:hover {
  transform: rotate(-8deg) scale(1.06);
}

.cnc-page .cnc-early-access__lede {
  margin-top: 1rem;
  font-size: clamp(1rem, 1.3vw, 1.12rem) !important;
  line-height: 1.6 !important;
  color: var(--cnc-ink-soft) !important;
  font-weight: 500;
}

.cnc-early-access__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2vw, 1.75rem);
}

.cnc-access-card {
  display: flex;
  align-items: flex-start;
  gap: 1.15rem;
  background: var(--cnc-white);
  border: 1px solid var(--cnc-line);
  border-radius: var(--cnc-radius-box);
  padding: clamp(1.35rem, 2.5vw, 1.75rem);
  box-shadow: var(--cnc-shadow-xs);
  transition: transform 0.3s var(--cnc-ease), box-shadow 0.3s var(--cnc-ease), border-color 0.3s var(--cnc-ease);
}

.cnc-access-card:hover {
  transform: translateY(-4px);
  border-color: var(--cnc-secondary);
  box-shadow: var(--cnc-shadow-md);
}

.cnc-access-card__icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--cnc-peach-soft);
  color: var(--cnc-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.25s var(--cnc-ease), color 0.25s var(--cnc-ease);
}

.cnc-access-card:hover .cnc-access-card__icon-badge {
  background: var(--cnc-accent);
  color: #ffffff;
}

.cnc-access-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.cnc-access-card__title {
  font-family: var(--cnc-font-display);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--cnc-ink);
  line-height: 1.2;
}

.cnc-page .cnc-access-card__desc {
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  color: var(--cnc-ink-soft) !important;
}

/* ============================================================
   WHY JOIN TODAY (Urgency & Benefits)
   ============================================================ */
.cnc-why-join {
  background: var(--cnc-bg);
  border-block: 1px solid var(--cnc-line);
}

.cnc-why-join__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.cnc-why-join__copy .cnc-proof-badge {
  display: flex;
  margin-bottom: 1.25rem;
}

.cnc-page .cnc-why-join__lede {
  margin-top: 1.15rem;
  font-size: clamp(1rem, 1.3vw, 1.12rem) !important;
  color: var(--cnc-ink-soft) !important;
  max-width: 44ch;
  line-height: 1.6 !important;
}

.cnc-why-join__cta {
  margin-top: 2rem;
}

.cnc-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.95rem;
}

.cnc-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  background: var(--cnc-white);
  border: 1px solid var(--cnc-line);
  border-radius: var(--cnc-radius-box);
  padding: 1.1rem 1.35rem;
  box-shadow: var(--cnc-shadow-xs);
  transition: transform 0.25s var(--cnc-ease), box-shadow 0.25s var(--cnc-ease), border-color 0.25s var(--cnc-ease);
}

.cnc-checklist__item:hover {
  transform: translateY(-2px);
  border-color: var(--cnc-accent);
  box-shadow: 0 8px 24px rgba(199, 76, 5, 0.1);
}

.cnc-checklist__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cnc-accent);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.15rem;
  box-shadow: 0 3px 8px rgba(199, 76, 5, 0.25);
}

.cnc-checklist__content {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.cnc-checklist__content strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cnc-ink);
  line-height: 1.35;
}

.cnc-checklist__content span {
  font-size: 0.85rem;
  color: var(--cnc-ink-soft);
  line-height: 1.45;
}

/* ============================================================
   LOCATIONS — overrides for the shared "Five Homes" section
   ============================================================ */
.cnc-page .cnc-homes__text {
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: var(--cnc-ink-soft) !important;
}

.cnc-homes__cta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  align-items: stretch;
  margin-top: auto;
  padding-top: 1.5rem;
}

/* The two calls to action are a matched pair: solid primary,
   outlined secondary, identical box metrics. */
.cnc-homes__join-btn,
.cnc-page .cnc-homes__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.6rem 0.75rem;
  min-height: 40px;
  border-radius: var(--cnc-radius-btn);
  font-family: var(--cnc-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s var(--cnc-ease), border-color 0.25s var(--cnc-ease),
    color 0.25s var(--cnc-ease), transform 0.25s var(--cnc-ease);
}

.cnc-homes__join-btn {
  background: var(--cnc-accent);
  border: 1px solid var(--cnc-accent);
  color: #ffffff !important;
}

.cnc-homes__join-btn:hover,
.cnc-homes__join-btn:focus-visible {
  background: var(--cnc-accent-deep);
  border-color: var(--cnc-accent-deep);
  color: #ffffff !important;
  text-decoration: none;
  transform: translateY(-2px);
}

.cnc-page .cnc-homes__link {
  background: transparent;
  border: 1px solid var(--cnc-accent);
  color: var(--cnc-accent) !important;
}

.cnc-page .cnc-homes__link:hover,
.cnc-page .cnc-homes__link:focus-visible {
  background: var(--cnc-accent);
  border-color: var(--cnc-accent);
  color: #ffffff !important;
  text-decoration: none;
  transform: translateY(-2px);
}

/* ============================================================
   JOIN — branch sign-up via OpenTable
   ============================================================ */
.cnc-join {
  background: var(--cnc-olive);
  color: var(--cnc-bg);
  overflow: hidden;
}

.cnc-join__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.cnc-join .cnc-eyebrow {
  color: var(--cnc-secondary);
}

.cnc-join .cnc-h2 {
  color: var(--cnc-white);
}

.cnc-join .cnc-h2 em {
  color: var(--cnc-secondary);
}

.cnc-join__intro p {
  margin-top: 1.25rem;
  max-width: 44ch;
  color: rgba(255, 255, 255, 0.88) !important;
}

/* Social Proof Callout in Join Section */
.cnc-join__proof-callout {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.75rem;
  padding: 0.65rem 1.15rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--cnc-radius-btn);
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cnc-join__proof-callout svg {
  color: var(--cnc-secondary);
  flex-shrink: 0;
}

/* ---- Branch Join Cards ---- */
.cnc-join__branches-wrapper {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.cnc-join__branches {
  background: #ffffff;
  color: var(--cnc-ink);
  border-radius: var(--cnc-radius-box);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  box-sizing: border-box;
}

.cnc-join__branches-title {
  font-family: var(--cnc-font-display);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  color: var(--cnc-ink);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 400;
}

.cnc-join__grid {
  display: grid;
  gap: 0.85rem;
}

.cnc-branch-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
  padding: 0.9rem 1.15rem;
  background: var(--cnc-bg);
  border: 1px solid var(--cnc-line);
  border-radius: var(--cnc-radius-btn);
  transition: background 0.25s var(--cnc-ease), border-color 0.25s var(--cnc-ease),
    box-shadow 0.25s var(--cnc-ease), transform 0.25s var(--cnc-ease);
}

.cnc-branch-card:hover {
  background: #ffffff;
  border-color: var(--cnc-accent);
  box-shadow: 0 6px 18px rgba(199, 76, 5, 0.12);
  transform: translateY(-2px);
}

.cnc-branch-card__info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.cnc-branch-card__name {
  font-family: var(--cnc-font-display);
  font-size: 1.25rem;
  line-height: 1.15;
  color: var(--cnc-ink);
  margin: 0;
  text-transform: uppercase;
  font-weight: 400;
}

.cnc-branch-card__suburb {
  font-family: var(--cnc-font-body);
  font-size: 0.82rem;
  color: var(--cnc-muted);
  font-weight: 500;
}

/* A fixed-width button keeps the five rows aligned on one edge. */
.cnc-branch-card__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto;
  gap: 0.5rem !important;
  width: 8.75rem;
  max-width: 100%;
  padding: 0.7rem 1rem !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.1em !important;
  min-height: auto !important;
  text-decoration: none !important;
}

.cnc-branch-card__btn svg {
  transition: transform 0.2s ease;
}

.cnc-branch-card__btn:hover svg {
  transform: translate(2px, -2px);
}

.cnc-page .cnc-join__note {
  margin: 0.25rem 0 0;
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
  /* .cnc-join p is painted white !important globally, invisible here. */
  color: var(--cnc-muted) !important;
  font-style: italic;
  text-align: center;
}

/* ============================================================
   TERMS
   ============================================================ */
.cnc-terms {
  background: var(--cnc-surface);
  padding-block: clamp(3rem, 6vw, 5rem);
}

.cnc-terms__box {
  border: 1px solid var(--cnc-line);
  border-radius: var(--cnc-radius-box);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--cnc-white);
  box-shadow: var(--cnc-shadow-xs);
}

.cnc-terms__title {
  font-family: var(--cnc-font-display);
  font-weight: 400;
  font-size: var(--cn-fs-h3, clamp(1.25rem, 2.2vw, 1.5rem));
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--cnc-ink);
  margin-bottom: 1.25rem;
}

.cnc-terms ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.85rem;
  font-size: 0.92rem;
  color: var(--cnc-ink-soft);
}

.cnc-terms li {
  position: relative;
  padding-left: 1.6rem;
  line-height: 1.6;
  color: var(--cnc-ink-soft);
}

.cnc-terms li::before {
  content: "\2726";
  position: absolute;
  left: 0;
  color: var(--cnc-accent);
  font-size: 0.75rem;
  top: 0.32em;
}

/* ============================================================
   REVEAL STATES (GSAP & IntersectionObserver support)
   ============================================================ */
.cnc-js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
}

.cnc-js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s var(--cnc-ease), transform 0.8s var(--cnc-ease);
}

.cnc-js [data-hero-seq] {
  opacity: 0;
}

/* The script adds .is-revealed on its reduced-motion path; without a
   matching rule the hero stayed permanently invisible. */
.cnc-js [data-hero-seq].is-revealed {
  opacity: 1;
  transform: none;
}

/* ============================================================
   RESPONSIVE LAYOUTS  (ordered widest to narrowest)
   ============================================================ */
@media (max-width: 1024px) {

  .cnc-page {
    --cnc-anchor-offset: 96px;
  }

  .cnc-hero__inner,
  .cnc-why-join__inner,
  .cnc-join__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .cnc-early-access__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cnc-hero__card-stage {
    margin-top: 1.5rem;
  }

  .cnc-hero__title {
    max-width: none;
  }

  .cnc-join__intro p {
    max-width: none;
  }

  .cnc-page .cnc-why-join__lede {
    max-width: none;
  }
}

@media (max-width: 900px) {

  .cnc-card {
    max-width: 380px;
  }

  .cnc-card__inner {
    padding: 1.15rem 1.35rem;
  }

  .cnc-page .cnc-card__brand {
    font-size: 1.5rem !important;
  }

  .cnc-page .cnc-card__club {
    font-size: 1.35rem !important;
  }

  .cnc-card__rewards {
    gap: 0.35rem 0.75rem;
    font-size: 0.72rem;
  }
}

@media (max-width: 768px) {

  .cnc-hero {
    padding-top: 150px;
    padding-bottom: 3.5rem;
  }
}

@media (max-width: 680px) {

  .cnc-rewards__grid {
    grid-template-columns: 1fr;
  }
}

/* Branch rows stack before the button and the venue name collide. */
@media (max-width: 620px) {

  .cnc-early-access__grid {
    grid-template-columns: 1fr;
  }

  .cnc-branch-card {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
  }

  .cnc-branch-card__btn {
    width: 100%;
  }

  .cnc-join__proof-callout {
    width: 100%;
  }
}

@media (max-width: 560px) {

  /* Full-width CTAs, with the type tightened so the longest label
     ("Join Free — Unlock Your Rewards") still sets on one line. */
  .cnc-hero__actions .cnc-btn,
  .cnc-rewards__cta .cnc-btn,
  .cnc-why-join__cta .cnc-btn {
    flex: 1 1 100%;
    width: 100%;
    padding-inline: 1rem;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
  }

  .cnc-access-card {
    gap: 0.95rem;
  }
}

@media (max-width: 480px) {

  .cnc-hero__card-stage {
    width: 100%;
    padding-inline: 0.25rem;
  }

  .cnc-card {
    width: 100%;
    max-width: 340px;
    border-radius: 12px;
  }

  .cnc-card__inner {
    padding: 0.95rem 1.1rem;
    border-radius: 11px;
    gap: 0.45rem;
  }

  .cnc-page .cnc-card__brand {
    font-size: 1.25rem !important;
  }

  .cnc-page .cnc-card__club {
    font-size: 1.15rem !important;
    margin-top: 0.1rem;
  }

  .cnc-card__rewards {
    gap: 0.25rem 0.5rem;
    font-size: 0.65rem;
  }

  .cnc-card__rewards li {
    padding-left: 0.75rem;
  }

  .cnc-card__rewards li::before {
    font-size: 0.55rem;
  }

  .cnc-card__foot {
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    padding-top: 0.5rem;
  }

  .cnc-terms ul {
    font-size: 0.88rem;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

  .cnc-page *,
  .cnc-page *::before,
  .cnc-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .cnc-js [data-reveal],
  .cnc-js [data-hero-seq] {
    opacity: 1;
    transform: none;
  }

  .cnc-card {
    transform: none !important;
  }
}