/* =========================================================
   1. VARIABLES & RESET
   "Wine & Ivory" palette — a deeper, richer red (not stock
   template crimson), a warm near-black instead of flat black,
   and a supporting ivory/gold tone for premium accents.
   One place to change the whole site's theme if needed.
   ========================================================= */
:root {
  --bg: #0a0809;            /* page background (base) */
  --bg-elevated: #14100f;   /* section background, one step up */
  --surface: #1c1614;       /* card / panel background */
  --surface-2: #241c19;     /* hover state of a panel */

  --accent: #7c1d2e;        /* deep wine red — tags, borders, badges, decorative glows */
  --accent-text: #c2465a;   /* lighter wine-rose — used for text/links on dark backgrounds so it stays legible */
  --accent-dim: #4a1119;    /* darkest wine — text on light surfaces (badges) */
  --accent-btn: #9c2038;    /* punchier wine — button fills only */
  --accent-btn-hover: #b92944;

  --ivory: #efe6d8;         /* supporting accent — premium highlights, glows, borders */
  --ivory-soft: rgba(239, 230, 216, 0.12);

  --white: #f5f3ef;         /* warm off-white used as primary text color */
  --ink-muted: #a69c92;     /* warm muted gray for secondary/body copy */
  --hairline: rgba(239, 230, 216, 0.09);

  --font-heading: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  /* Guaranteed glyph coverage for non-Latin characters (e.g. the
     Armenian Dram sign, ֏) that Space Grotesk / Inter don't include. */
  --font-safe: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Arial, sans-serif;

  --max-width: 1180px;
  --radius: 10px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--white);
  /* Subtle gradient + soft color glows instead of flat solid black —
     gives the dark background depth without looking "textured" or busy. */
  background:
    radial-gradient(1100px 650px at 12% -8%, rgba(124, 29, 46, 0.12), transparent 60%),
    radial-gradient(900px 560px at 100% 4%, rgba(239, 230, 216, 0.05), transparent 55%),
    linear-gradient(180deg, #120d0d 0%, #0a0809 45%, #060505 100%);
  background-attachment: fixed;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* the diagonal stripes can bleed slightly at the edge */
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  line-height: 1.15;
  font-weight: 600;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
}

.section {
  padding: 124px 0;
  position: relative;
}

.section-tag {
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-bottom: 16px;
}

.section-title {
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 600;
  line-height: 1.08;
  margin-bottom: 20px;
  letter-spacing: -1px;
}

.section-desc {
  max-width: 580px;
  color: var(--ink-muted);
  margin-bottom: 64px;
  font-size: 1.1rem;
  line-height: 1.7;
}

/* Alternate background bands so sections read as distinct, not one
   continuous slab of black */
.classes, .about { background: var(--bg-elevated); }
.pricing, .contact { background: var(--bg); }
.class-details { background: var(--bg); }

/* Cohesive photography grade — the single most unifying move. Every
   content photo is pulled toward the same slightly-desaturated, higher-
   contrast register so a set of separate stock shots reads as one
   campaign shot for this brand. (Decorative/near-invisible images like
   the pricing background are intentionally excluded.) */
.hero-media img,
.card-media img,
.detail-media img,
.cta-media img,
.about-image img {
  filter: saturate(0.68) contrast(1.06) brightness(0.95);
}

/* =========================================================
   2. SCROLL-REVEAL ANIMATION
   Elements tagged data-reveal start faded/lowered, then a tiny
   bit of JS adds .is-visible when they scroll into view.
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Container-level reveals that cascade their children in with a gentle
   stagger, rather than moving as one big block (which reads as "already
   there" by the time you scroll down to it). The container itself stays
   put; its children fade/slide in one after another. Used by the hero
   and each class-detail block. */
.hero-inner[data-reveal],
.detail-block[data-reveal] {
  opacity: 1;
  transform: none;
}

.hero-inner > *,
.detail-block .detail-media,
.detail-block .detail-text > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease),
              color 0.25s var(--ease);
}

.hero-inner.is-visible > *,
.detail-block.is-visible .detail-media,
.detail-block.is-visible .detail-text > * {
  opacity: 1;
  transform: none;
}

/* Stagger: each item starts a beat after the one before it */
.hero-inner.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.hero-inner.is-visible > *:nth-child(2) { transition-delay: 0.15s; }
.hero-inner.is-visible > *:nth-child(3) { transition-delay: 0.25s; }
.hero-inner.is-visible > *:nth-child(4) { transition-delay: 0.35s; }

.detail-block.is-visible .detail-media { transition-delay: 0.05s; }
.detail-block.is-visible .detail-text > *:nth-child(1) { transition-delay: 0.10s; }
.detail-block.is-visible .detail-text > *:nth-child(2) { transition-delay: 0.16s; }
.detail-block.is-visible .detail-text > *:nth-child(3) { transition-delay: 0.22s; }
.detail-block.is-visible .detail-text > *:nth-child(4) { transition-delay: 0.28s; }
.detail-block.is-visible .detail-text > *:nth-child(5) { transition-delay: 0.34s; }
.detail-block.is-visible .detail-text > *:nth-child(6) { transition-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .hero-inner > *,
  .detail-block .detail-media,
  .detail-block .detail-text > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html { scroll-behavior: auto; }
}

/* =========================================================
   3. BUTTONS
   ========================================================= */
.btn {
  display: inline-block;
  padding: 15px 34px;
  border-radius: 999px; /* pill-shaped, site-wide */
  font-weight: 600;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  /* Explicit line-height so every button is the same height in every
     section — without it, .btn inherited different line-heights (e.g. the
     pricing/contact buttons rendered ~5px shorter than the hero/detail ones). */
  line-height: 1.5;
  letter-spacing: 0.2px;
  text-align: center;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
              color 0.25s var(--ease), box-shadow 0.25s var(--ease),
              border-color 0.25s var(--ease), filter 0.25s var(--ease);
}

.btn-primary {
  background: var(--accent-btn);
  color: var(--ivory);
  box-shadow: 0 0 0 0 rgba(156, 32, 56, 0.5);
}

.btn-primary:hover {
  background: var(--accent-btn-hover);
  /* Primary CTAs are the clear main action, so they get a more noticeable
     lift + slight scale + a soft wine glow (secondary/outline buttons keep
     the restrained lift, so the primary always reads as the stronger cue). */
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 16px 34px -10px rgba(156, 32, 56, 0.55),
              0 0 0 1px rgba(239, 230, 216, 0.12);
}

/* Frosted-glass secondary button — sits on photos and dark surfaces
   throughout, so a translucent blur reads better than a solid box. */
.btn-outline {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--white);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn-outline:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

/* Hero's secondary CTA sits on a busy photo, so a clean transparent
   hairline reads better here than the frosted-glass fill. Scoped to the
   hero only — the outline buttons elsewhere keep their frosted style. */
.hero-actions .btn-outline {
  background: transparent;
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hero-actions .btn-outline:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.4);
}

/* =========================================================
   4. HEADER / NAVIGATION
   Turns into a blurred "glass" bar once you scroll past the hero.
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  /* Translucent + blurred from the start so the bar reads as floating
     over the page, not a solid strip — gets a touch more opaque on scroll. */
  background: rgba(15, 15, 15, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), backdrop-filter 0.35s var(--ease);
}

.site-header.scrolled {
  background: rgba(15, 15, 15, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--hairline);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.logo {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--white);
  letter-spacing: 0.3px;
  transition: transform 0.25s var(--ease), text-shadow 0.25s var(--ease);
}

.logo span {
  color: var(--accent-text);
}

/* Clickable brand mark gets the same lift + soft wine glow as the primary
   CTAs, so its hover language is consistent with the main buttons. */
.logo:hover {
  transform: translateY(-1px);
  text-shadow: 0 6px 20px rgba(156, 32, 56, 0.5);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.main-nav ul {
  display: flex;
  gap: 2.75rem;
}

.main-nav ul li a {
  position: relative;
  color: var(--white);
  font-weight: 500;
  font-size: 0.93rem;
  padding-bottom: 4px;
}

.main-nav ul li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--accent-text);
  transition: width 0.25s var(--ease);
}

.main-nav ul li a:hover::after {
  width: 100%;
}

.nav-cta {
  padding: 10px 22px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  width: 30px;
  height: 30px;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--white);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}

/* =========================================================
   5. HERO
   Full-bleed photo with a dark scrim so the headline stays
   readable, plus the diagonal "cut" stripe marking the seam.
   ========================================================= */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: 160px 0 120px;
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  /* Directional fade: strong (85%) on the left where the headline sits,
     down to light (30%) on the right so the photo's own detail and
     lighting show through instead of a flat dark block. */
  background: linear-gradient(90deg, rgba(10,8,9,0.85) 0%, rgba(10,8,9,0.6) 42%, rgba(10,8,9,0.3) 100%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.eyebrow {
  color: var(--accent-text);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 500;
  font-size: 0.8rem;
  opacity: 0.8;
  margin-bottom: 20px;
}

.hero h1 {
  font-size: clamp(2.5rem, 6.2vw, 4.25rem);
  font-weight: 700;
  line-height: 1.04;
  margin-bottom: 26px;
  letter-spacing: -1.5px;
}

.hero-sub {
  font-size: 1.14rem;
  line-height: 1.7;
  color: #d7d0c9;
  max-width: 500px;
  margin: 0 0 44px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* =========================================================
   6. CLASSES / SERVICES
   Each card is now a full <a> — the whole card is clickable and
   scrolls to a detailed section further down the page.
   ========================================================= */
.card-grid {
  display: grid;
  /* Four even columns so every card carries equal weight in one row —
     no single card stranded alone on a second row. */
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

/* 4 across on desktop → a balanced 2x2 on tablets → single column on phones */
@media (max-width: 1040px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

.card {
  display: block;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 44px -18px rgba(0, 0, 0, 0.6);
}

.card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.card:hover .card-media img {
  transform: scale(1.08);
}

.card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,8,9,0) 40%, rgba(10,8,9,0.9) 100%);
}

.card-body {
  padding: 24px 24px 28px;
}

/* Numbered index that mirrors the "01 — Weightlifting" markers on the
   detail sections below, tying the card grid to those anchors as one
   sequence rather than four unrelated tiles. */
.card-index {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 2px;
  color: var(--accent-text);
  margin-bottom: 9px;
}

.card-body h3 {
  font-size: 1.2rem;
  letter-spacing: -0.2px;
  margin-bottom: 10px;
}

.card-body p {
  color: var(--ink-muted);
  font-size: 0.94rem;
}

.card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--accent-text);
}

.card-cta svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s var(--ease);
}

.card:hover .card-cta svg {
  transform: translateX(4px);
}

/* =========================================================
   8. MID-PAGE CTA BAND
   ========================================================= */
.cta-band {
  position: relative;
  z-index: 1;
}

.cta-media {
  position: absolute;
  inset: 0;
}

.cta-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.cta-scrim {
  position: absolute;
  inset: 0;
  /* Vignette instead of a flat top-to-bottom scrim — lets the photo
     read clearly through the center, darkening only toward the edges. */
  background: radial-gradient(ellipse at center, rgba(10,8,9,0.32) 0%, rgba(10,8,9,0.72) 65%, rgba(10,8,9,0.92) 100%);
}

.cta-inner {
  position: relative;
  z-index: 1;
  padding: 100px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
}

.cta-inner .quote {
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.3;
  letter-spacing: 0.5px;
  max-width: 820px;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

/* =========================================================
   9. CLASS DETAILS
   Anchored sections the class cards scroll down to. Alternating
   media/text layout, separated by hairlines, echoing the About
   section's grid so it feels like the same design system.
   ========================================================= */
.class-details .container {
  padding-top: 8px;
}

.detail-block {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 64px;
  align-items: center;
  padding: 68px 0;
  scroll-margin-top: 100px;
}

.detail-block:not(:first-child) {
  border-top: 1px solid var(--hairline);
}

.detail-block.reverse {
  grid-template-columns: 1.05fr 0.95fr;
}

.detail-block.reverse .detail-media {
  order: 2;
}

.detail-block.reverse .detail-text {
  order: 1;
}

.detail-media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--hairline);
}

.detail-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-muted);
  margin-bottom: 20px;
  transition: color 0.25s var(--ease);
}

.detail-back:hover {
  color: var(--accent-text);
}

.detail-text .section-tag {
  margin-bottom: 12px;
}

.detail-text h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-bottom: 16px;
  letter-spacing: -0.4px;
}

.detail-text > p {
  color: var(--ink-muted);
  max-width: 520px;
  margin-bottom: 24px;
}

.detail-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-bottom: 30px;
}

.detail-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 0.95rem;
  color: #ddd6cd;
}

/* Small accent chevron marker — echoes the "→" arrow used on the class
   cards, so the benefit lists feel intentional rather than punctuated
   with a stray em-dash. */
.detail-list li .detail-bullet {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-right: 1.6px solid var(--accent-text);
  border-bottom: 1.6px solid var(--accent-text);
  transform: rotate(-45deg);
}

.detail-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Match the pair to the same width so "Book This Class" and "See Pricing"
   read as an even set (they already share height/padding/font; only the
   label lengths differed). */
.detail-actions .btn {
  min-width: 190px;
}

/* =========================================================
   10. PRICING
   Featured plan is now distinguished with a refined
   gradient-line border + soft glow, not a full color block.
   ========================================================= */
.pricing {
  position: relative;
  overflow: hidden;
}

.pricing-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.pricing-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.12;
}

.pricing-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(10,8,9,0.85) 50%, var(--bg) 100%);
}

.pricing .container {
  position: relative;
  z-index: 1;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 30px;
  align-items: stretch;
}

.price-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 42px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}

/* Soft colored glow that expands in from behind the card on hover —
   sits behind everything via z-index:-1, independent of the featured
   card's gradient-line border (::before). */
.price-card::after {
  content: '';
  position: absolute;
  inset: -20px;
  z-index: -1;
  border-radius: calc(var(--radius) + 20px);
  background: radial-gradient(circle at 50% 35%, rgba(124, 29, 46, 0.5), transparent 70%);
  opacity: 0;
  transform: scale(0.92);
  filter: blur(20px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  pointer-events: none;
}

.price-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(239, 230, 216, 0.06);
  border-color: rgba(239, 230, 216, 0.18);
}

.price-card:hover::after {
  opacity: 1;
  transform: scale(1.06);
}

.price-card.featured {
  background: var(--surface);
  border-color: rgba(239, 230, 216, 0.3);
  transform: scale(1.04);
  box-shadow:
    0 0 0 1px rgba(239, 230, 216, 0.05),
    0 30px 60px -20px rgba(124, 29, 46, 0.4),
    0 0 46px -12px rgba(239, 230, 216, 0.18);
}

/* Thin gradient-line border wrapped around the featured card —
   the "highlight, not a color block" treatment. */
.price-card.featured::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(239, 230, 216, 0.55), rgba(124, 29, 46, 0.45) 55%, rgba(239, 230, 216, 0.15));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.price-card.featured:hover {
  transform: scale(1.04) translateY(-8px);
  box-shadow:
    0 0 0 1px rgba(239, 230, 216, 0.08),
    0 34px 68px -18px rgba(124, 29, 46, 0.5),
    0 0 54px -10px rgba(239, 230, 216, 0.24);
}

.badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ivory);
  color: var(--accent-dim);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  padding: 6px 16px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5);
}

.plan-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-muted);
  margin-bottom: 16px;
}

.price-card h3 {
  font-size: 1.25rem;
  margin-bottom: 16px;
}

.price-card .price {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 28px;
  letter-spacing: -1px;
  color: var(--ivory);
}

/* Isolates the Armenian Dram sign in a font stack with verified glyph
   coverage — Space Grotesk doesn't include Armenian characters, and
   without this it was silently falling back to a mismatched glyph. */
.price-card .price .currency {
  font-family: var(--font-safe);
  font-weight: 600;
}

.price-card .price span:not(.currency) {
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink-muted);
  font-family: var(--font-body);
}

.price-card ul {
  margin-bottom: 32px;
  flex-grow: 1;
  text-align: left;
}

.price-card ul li {
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.92rem;
  color: #d8d2c9;
}

.price-card.featured ul li {
  border-bottom-color: rgba(239, 230, 216, 0.14);
}

/* =========================================================
   11. ABOUT
   ========================================================= */
.about-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}

.about-text p {
  color: var(--ink-muted);
  max-width: 52ch;
  margin-bottom: 18px;
}

.stats {
  display: flex;
  margin-top: 48px;
  flex-wrap: wrap;
}

.stat {
  display: flex;
  flex-direction: column;
  padding: 0 40px;
  border-left: 1px solid rgba(239, 230, 216, 0.16);
}

.stat:first-child {
  padding-left: 0;
  border-left: none;
}

.stat-num {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 4.2vw, 3.1rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1.5px;
  color: var(--ivory);
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 0.73rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 10px;
}

.about-image {
  position: relative;
  /* Stretch to match the text column's natural height instead of forcing
     a fixed portrait ratio, so the two sides line up cleanly. The image
     is absolutely positioned so it fills that height without dictating it. */
  align-self: stretch;
  min-height: 320px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--hairline);
}

.about-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   12. CONTACT
   A dark, translucent glass card with borderless, bottom-line-only
   inputs. Submitting swaps the form for a thank-you confirmation panel.
   ========================================================= */
.contact-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
}

.contact-form-wrap {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--hairline);
  color: var(--white);
  padding: 40px;
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
  position: relative;
}

.contact-form {
  display: flex;
  flex-direction: column;
}

.contact-form[hidden] {
  display: none;
}

.contact-form label {
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 7px;
  margin-top: 18px;
}

.contact-form label:first-child {
  margin-top: 0;
}

.contact-form input,
.contact-form textarea {
  font-family: var(--font-body);
  background: transparent;
  color: var(--white);
  padding: 13px 4px;
  border: none;
  border-bottom: 1.5px solid rgba(239, 230, 216, 0.2);
  border-radius: 0;
  font-size: 0.95rem;
  resize: vertical;
  transition: border-color 0.25s var(--ease);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--ink-muted);
  opacity: 1;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-bottom-color: var(--accent-btn);
}

.contact-form button {
  margin-top: 26px;
  align-self: flex-start;
}

/* Inline submission error — sits above the button, sharing the wine
   accent so it reads as part of the form, not a jarring browser alert. */
.form-error {
  margin-top: 20px;
  padding: 12px 16px;
  border: 1px solid rgba(194, 70, 90, 0.4);
  border-left: 3px solid var(--accent-text);
  border-radius: 6px;
  background: rgba(124, 29, 46, 0.12);
  color: #eab4bd;
  font-size: 0.9rem;
  line-height: 1.5;
}

.form-error[hidden] {
  display: none;
}

.form-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 424px;
  gap: 14px;
}

.form-success[hidden] {
  display: none;
}

.form-success-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(124, 29, 46, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 4px;
}

.form-success-icon svg {
  width: 26px;
  height: 26px;
}

.form-success h3 {
  font-size: 1.4rem;
  font-weight: 600;
}

.form-success p {
  color: var(--ink-muted);
  max-width: 400px;
}

.form-success .btn {
  margin-top: 12px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.info-block h3 {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  color: var(--accent-text);
  font-weight: 500;
}

.info-block p {
  color: var(--ink-muted);
  font-size: 0.98rem;
  line-height: 1.7;
}

.info-block a {
  color: var(--ink-muted);
  transition: color 0.25s var(--ease);
}

.info-block a:hover {
  color: var(--white);
}

/* =========================================================
   13. FOOTER
   Expanded into a full site map: brand + tagline + social,
   quick links, visit info, and hours — instead of a single line.
   ========================================================= */
.site-footer {
  background: linear-gradient(180deg, #0d0a0a 0%, #060505 100%);
  color: var(--white);
  padding-top: 76px;
  border-top: 1px solid var(--hairline);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
}

.footer-brand .logo {
  display: inline-block;
  margin-bottom: 16px;
}

.footer-tagline {
  color: var(--ink-muted);
  font-size: 0.95rem;
  max-width: 300px;
  margin-bottom: 26px;
}

.footer-social {
  display: flex;
  gap: 12px;
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
              transform 0.3s var(--ease), background 0.3s var(--ease);
}

.social-icon svg {
  width: 18px;
  height: 18px;
}

.social-icon:hover {
  color: var(--ivory);
  border-color: rgba(239, 230, 216, 0.4);
  background: rgba(239, 230, 216, 0.06);
  transform: translateY(-3px);
}

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent-text);
  margin-bottom: 18px;
  font-weight: 500;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.footer-col ul a {
  /* Block so each link's box hugs its own 0.93rem line-height. As inline
     text the links inherited the <li>'s 16px line-box and rendered ~4px
     lower than the paragraph text in the other footer columns. */
  display: block;
  color: var(--ink-muted);
  font-size: 0.93rem;
  transition: color 0.25s var(--ease);
}

.footer-col ul a:hover {
  color: var(--white);
}

.footer-col p {
  color: var(--ink-muted);
  font-size: 0.93rem;
  margin-bottom: 10px;
}

.footer-col p a {
  color: var(--ink-muted);
  transition: color 0.25s var(--ease);
}

.footer-col p a:hover {
  color: var(--white);
}

.footer-bottom {
  border-top: 1px solid var(--hairline);
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom p {
  color: #6b6360;
  font-size: 0.82rem;
  font-family: var(--font-mono);
}

/* Footer-bottom links (the Privacy Policy link and the designer credit) —
   a muted register a touch brighter than the copyright text, lifting to
   white on hover so they read as quiet, tappable links. */
.footer-bottom a {
  color: var(--ink-muted);
  transition: color 0.25s var(--ease);
}

.footer-bottom a:hover {
  color: var(--white);
}

/* =========================================================
   PRIVACY / LEGAL PAGE
   A simple, readable prose column that reuses the site's type
   scale and wine accent so the standalone page feels native.
   ========================================================= */
.legal-inner {
  max-width: 760px;
}

.legal-updated {
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  margin-top: -6px;
  margin-bottom: 40px;
}

.legal-body p {
  color: var(--ink-muted);
  line-height: 1.75;
  margin-bottom: 18px;
  max-width: 68ch;
}

.legal-body strong {
  color: var(--white);
  font-weight: 600;
}

.legal-body h2 {
  font-size: 1.25rem;
  letter-spacing: -0.3px;
  margin-top: 40px;
  margin-bottom: 14px;
}

.legal-body a {
  color: var(--accent-text);
  transition: color 0.25s var(--ease);
}

.legal-body a:hover {
  color: var(--white);
}

.legal-list {
  margin: 0 0 18px;
}

.legal-list li {
  position: relative;
  padding-left: 22px;
  color: var(--ink-muted);
  line-height: 1.9;
}

/* Same small accent chevron used by the class-detail lists */
.legal-list li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-right: 1.6px solid var(--accent-text);
  border-bottom: 1.6px solid var(--accent-text);
  transform: rotate(-45deg);
}

/* =========================================================
   SIGNUP / INQUIRY MODAL
   Opened from the pricing plan buttons; posts to the same
   Formspree endpoint as the contact form.
   ========================================================= */
body.modal-open {
  overflow: hidden;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal[hidden] {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 5, 5, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: modalFade 0.25s var(--ease);
}

.modal-dialog {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: linear-gradient(180deg, #17110f 0%, #100c0b 100%);
  border: 1px solid rgba(239, 230, 216, 0.14);
  border-radius: 14px;
  padding: 42px 40px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8);
  animation: modalRise 0.3s var(--ease);
}

@keyframes modalFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modalRise {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}

.modal-close:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
}

.modal-close svg {
  width: 18px;
  height: 18px;
}

.modal-panel > .section-tag {
  margin-bottom: 10px;
}

.modal-dialog h3 {
  font-size: 1.5rem;
  letter-spacing: -0.4px;
  margin-bottom: 10px;
}

.modal-sub {
  color: var(--ink-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 26px;
}

.modal-form {
  display: flex;
  flex-direction: column;
}

.modal-form label {
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 7px;
  margin-top: 16px;
}

.modal-form label:first-of-type {
  margin-top: 0;
}

.modal-form input,
.modal-form select {
  font-family: var(--font-body);
  background: transparent;
  color: var(--white);
  padding: 12px 4px;
  border: none;
  border-bottom: 1.5px solid rgba(239, 230, 216, 0.2);
  border-radius: 0;
  font-size: 0.95rem;
  transition: border-color 0.25s var(--ease);
}

.modal-form select option {
  background: #17110f;
  color: var(--white);
}

.modal-form input::placeholder {
  color: var(--ink-muted);
  opacity: 1;
}

.modal-form input:focus,
.modal-form select:focus {
  outline: none;
  border-bottom-color: var(--accent-btn);
}

.modal-form .form-error {
  margin-top: 18px;
}

.modal-form button[type="submit"] {
  margin-top: 26px;
  width: 100%;
}

.modal-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.modal-success[hidden] {
  display: none;
}

.modal-success h3 {
  font-size: 1.35rem;
}

.modal-success p {
  color: var(--ink-muted);
}

.modal-success .btn {
  margin-top: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .modal-backdrop,
  .modal-dialog {
    animation: none;
  }
}

/* =========================================================
   14. RESPONSIVE / MOBILE
   ========================================================= */
@media (max-width: 900px) {
  .about-inner,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .about-image {
    order: -1;
    aspect-ratio: 16 / 10;
    min-height: 0;
  }

  .detail-block,
  .detail-block.reverse {
    grid-template-columns: 1fr;
  }

  .detail-block .detail-media,
  .detail-block.reverse .detail-media {
    order: -1;
  }

  .nav-toggle {
    display: flex;
  }

  .main-nav {
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    background: rgba(10, 8, 9, 0.98);
    backdrop-filter: blur(14px);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    /* No vertical padding or visible border while collapsed, so the box
       is truly 0px tall and nothing (e.g. the first "Home" link) peeks
       out below the header until the menu is opened. */
    padding: 0 28px;
    max-height: 0;
    overflow: hidden;
    border-bottom: 1px solid transparent;
    transition: max-height 0.35s var(--ease), padding 0.35s var(--ease),
                border-color 0.35s var(--ease);
  }

  .main-nav.open {
    max-height: 420px;
    padding-top: 10px;
    padding-bottom: 26px;
    border-bottom-color: var(--hairline);
  }

  .main-nav ul {
    flex-direction: column;
    width: 100%;
    gap: 0;
  }

  .main-nav ul li {
    width: 100%;
    border-bottom: 1px solid var(--hairline);
  }

  .main-nav ul a {
    display: block;
    padding: 14px 0;
  }

  .nav-cta {
    margin-top: 16px;
  }

  .nav-toggle.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle.open span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .section {
    padding: 72px 0;
  }

  .modal {
    padding: 16px;
  }

  .modal-dialog {
    padding: 34px 22px;
  }

  .hero {
    min-height: unset;
    padding: 140px 0 80px;
  }

  .cta-inner {
    padding: 72px 24px;
  }

  .price-card.featured {
    transform: none;
  }

  .price-card.featured:hover {
    transform: translateY(-6px);
  }

  .hero-actions,
  .detail-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .stats {
    flex-direction: column;
    gap: 24px;
  }

  .stat {
    padding: 0 !important;
    border-left: none !important;
  }

  .detail-block {
    padding: 48px 0;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}