/* =============================================
   BEAR IT HEALTH — Main Stylesheet
   Mobile-first, clean, premium fitness feel
   ============================================= */

/* 1. CUSTOM PROPERTIES
   ============================================= */
:root {
  /* Primary palette — dark green (sampled from the wellness wheel).
     Variable names are legacy; --green now holds the green accent. */
  --green:          #336352;   /* dark green — primary accent */
  --green-dark:     #24483B;   /* deeper green — hover/darks */
  --green-light:    #4E8271;   /* lighter green */
  --green-pale:     #EAF1EE;   /* barely-there green bg */
  /* Accent */
  --gold:           #336352;   /* accent text, stars */
  --gold-light:     #A9C3B8;   /* pale green — on dark backgrounds */
  /* Backgrounds */
  --bg:             #FFFFFF;
  --bg-alt:         #F4F7F5;   /* whisper green — alternating sections */
  --bg-dark:        #000000;   /* black */
  --bg-dark-2:      #1A1A1A;   /* near-black */
  --white:          #FFFFFF;
  /* Text */
  --text:           #111827;
  --text-muted:     #6B7280;
  --text-light:     #9CA3AF;
  /* Borders */
  --border:         #E5E7EB;
  --border-light:   #F3F4F6;
  /* Typography */
  --font-serif:     'Playfair Display', Georgia, serif;
  --font-sans:      'Inter', system-ui, -apple-system, sans-serif;
  /* Layout */
  --max-w:          1200px;
  --nav-h:          72px;
  --radius-sm:      8px;
  --radius:         16px;
  --radius-lg:      28px;
  /* Shadows — neutral */
  --shadow-sm:      0 2px 8px rgba(17,24,39,.06);
  --shadow:         0 4px 24px rgba(17,24,39,.10);
  --shadow-lg:      0 12px 48px rgba(17,24,39,.14);
  --t:              all 0.3s ease;
  --t-slow:         all 0.5s ease;
}

/* 2. RESET & BASE
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, textarea, select { font: inherit; }

/* 3. TYPOGRAPHY
   ============================================= */
h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  line-height: 1.2;
  color: var(--text);
  font-weight: 700;
}
h1 { font-size: clamp(2.2rem, 6vw, 4rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
h4 { font-size: 1.1rem; font-weight: 600; }
p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
.lead {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  line-height: 1.7;
  color: var(--text-muted);
}
.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
}
.eyebrow-light { color: var(--gold-light); }

/* 4. LAYOUT UTILITIES
   ============================================= */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 2rem;
}
@media (min-width: 768px) { .container { padding: 0 2rem; } }
@media (min-width: 1200px) { .container { padding: 0 2.5rem; } }

.section { padding: clamp(64px, 10vw, 120px) 0; }
/* Tighten the run-up to the client-stories grid on mobile only (64px -> 45px).
   Desktop keeps the full clamp value. */
@media (max-width: 767px) {
  .client-stories { padding-top: 45px; }
}
/* Tighten the heading-only sections on desktop only (120px -> 72px). At these
   widths the clamp above resolves to its 120px ceiling, which left a band of
   dead space above and below the section header. Mobile keeps the clamp. */
@media (min-width: 768px) {
  .testimonials-section,
  .approach-section,
  .client-stories {
    padding-top: 72px;
    padding-bottom: 72px;
  }
}
.section-sm { padding: clamp(40px, 6vw, 72px) 0; }
.section-header { text-align: center; max-width: 680px; margin: 0 auto 3rem; }
.section-header h2 { margin-bottom: 1rem; }
.section-header .lead { margin: 0; }

.grid-2 { display: grid; gap: 1.5rem; }
.grid-3 { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }

.text-center { text-align: center; }
.text-white { color: var(--white); }
.bg-alt { background: var(--bg-alt); }
.bg-dark { background: var(--bg-dark); }
.bg-green { background: var(--green); }

/* 5. NAVIGATION
   ============================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 1000;
  background: #FFFFFF;
  box-shadow: 0 1px 0 var(--border), 0 2px 12px rgba(17,24,39,0.06);
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
}
.nav-inner {
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.2;
}
.nav-wordmark {
  width: auto;
  height: 32px;
  flex-shrink: 0;
}
.nav-logo span {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.nav-links {
  display: none;
  align-items: center;
  gap: 2rem;
}
.nav-links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.25s ease;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: var(--gold);
  transition: width 0.3s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }
.nav-links a:hover { color: var(--green); }

.nav-cta {
  display: none;
  padding: 0.5rem 1.25rem;
  background: var(--gold);
  color: var(--white) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  border-radius: 100px;
  transition: var(--t) !important;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover { background: var(--green) !important; transform: translateY(-1px); }

.hamburger {
  width: 40px; height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: var(--radius-sm);
  transition: background 0.25s;
}
.hamburger:hover { background: rgba(17,24,39,0.06); }
.hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: var(--t);
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  background: var(--white);
  border-top: 1px solid var(--border);
  z-index: 999;
  padding: 1.5rem 1.5rem 2rem;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0.35s;
  box-shadow: var(--shadow-lg);
}
.mobile-menu.open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0s;
}
.mobile-menu a {
  display: block;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text);
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s;
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a:hover { color: var(--green); }
.mobile-menu .menu-cta {
  display: block;
  text-align: center;
  margin-top: 1.25rem;
  padding: 1rem;
  background: var(--green);
  color: var(--white);
  font-weight: 600;
  border-radius: var(--radius-sm);
  font-size: 1rem;
}

@media (min-width: 768px) {
  .nav { padding: 0 2rem; }
  .nav-links, .nav-cta { display: flex; }
  .hamburger { display: none; }
  .mobile-menu { display: none; }
}

/* 6. BUTTONS
   ============================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 2rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 100px;
  transition: var(--t);
  white-space: nowrap;
  min-height: 52px;
}
.btn-primary {
  background: linear-gradient(135deg, #336352 0%, #4E8271 100%);
  color: var(--white);
  box-shadow: 0 4px 20px rgba(51,99,82,0.32);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #24483B 0%, #336352 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(51,99,82,0.45);
}
.btn-outline {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.7);
}
.btn-outline:hover {
  background: rgba(255,255,255,0.12);
  border-color: var(--white);
  transform: translateY(-2px);
}
.btn-outline-dark {
  background: transparent;
  color: var(--green);
  border: 2px solid var(--green);
}
.btn-outline-dark:hover {
  background: var(--green);
  color: var(--white);
  transform: translateY(-2px);
}
.btn-gold {
  background: #FFFFFF;
  color: var(--green);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.btn-gold:hover {
  background: var(--green-pale);
  color: var(--green-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.16);
}
.btn-lg { padding: 1.1rem 2.5rem; font-size: 1rem; min-height: 58px; }
.btn-sm { padding: 0.6rem 1.4rem; font-size: 0.8rem; min-height: 40px; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Floating sticky CTA */
.sticky-cta {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 900;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.sticky-cta.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.sticky-cta { display: none; }

/* 7. HERO SECTIONS
   ============================================= */
.hero {
  position: relative;
  min-height: 50svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--nav-h);
  background: var(--bg-dark);
}
/* Brand lockup — white-on-black artwork, sits directly on the black hero */
.hero-lockup {
  width: 520px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 2rem;
}
@media (max-width: 600px) {
  .hero-lockup { width: 260px; }
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  transition: transform 8s ease;
}
.hero-bg.loaded { transform: scale(1); }
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0,0,0,0.78) 0%,
    rgba(51,99,82,0.28) 100%
  );
}
.hero-content {
  position: relative;
  z-index: 1;
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: center;
  /* .hero is a flex container; without this the item refuses to shrink below
     its min-content width and the content is clipped by .hero's overflow. */
  min-width: 0;
}
.hero-content h1 {
  color: var(--white);
  margin-bottom: 1.25rem;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.hero-content .lead {
  color: rgba(255,255,255,0.85);
  max-width: 540px;
  margin-bottom: 2.5rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  align-items: center;
  justify-content: center;
}
/* Desktop-only breathing room inside the black hero. Two things kept the group
   tight against the hero's edges: .hero-content is also a .container, and the
   .container rule at the foot of this file re-declares the padding shorthand
   inside a min-width:768px query — so it wins on source order and zeroes the
   vertical padding. The descendant selector below outranks it on specificity.
   Mobile is untouched: it never matched that query in the first place. */
@media (min-width: 768px) {
  .hero .hero-content {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
  .hero .hero-lockup { margin-bottom: 3rem; }
  .hero .hero-content h1 { margin-bottom: 2.25rem; }
}
.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.6);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero-scroll-line {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50%       { opacity: 1;   transform: scaleY(1.1); }
}

.page-hero {
  position: relative;
  padding: calc(var(--nav-h) + 4rem) 0 4rem;
  background: var(--bg-dark);
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--bg-dark) 60%, var(--green-dark) 100%);
  opacity: 0.9;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 { color: var(--white); margin-bottom: 1rem; }
.page-hero .lead { color: rgba(255,255,255,0.75); max-width: 560px; }

/* 8. SECTIONS
   ============================================= */

/* Trust bar */
.trust-bar {
  background: var(--green);
  padding: 1.25rem 0;
  overflow: hidden;
}
.trust-items {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.9);
  font-size: 0.825rem;
  font-weight: 500;
}
.trust-item svg { color: var(--gold-light); flex-shrink: 0; }

/* Stats strip */
.stats-strip {
  background: var(--bg-dark);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  text-align: center;
}
@media (min-width: 640px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-num {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.4rem;
}
.stat-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* What makes Dominick different */
.pillars-grid {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 640px) { .pillars-grid { grid-template-columns: repeat(3, 1fr); } }
.pillar-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  transition: var(--t);
}
.pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--green-pale);
}
.pillar-icon {
  width: 72px; height: 72px;
  background: transparent;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  color: var(--green);
}
.pillar-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
}
.pillar-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
}

/* 9. TESTIMONIALS
   ============================================= */
.featured-quote {
  background: var(--bg-dark);
  padding: clamp(60px, 8vw, 100px) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.featured-quote::before {
  content: '"';
  position: absolute;
  top: -0.2em;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-size: clamp(12rem, 25vw, 22rem);
  color: rgba(51,99,82,0.15);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.featured-quote blockquote {
  position: relative;
  z-index: 1;
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3.5vw, 2.4rem);
  font-weight: 400;
  color: var(--white);
  line-height: 1.45;
  max-width: 860px;
  margin: 0 auto 2rem;
  font-style: italic;
}
.featured-quote-meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.featured-quote-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--gold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.featured-quote-title {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
}

/* Photo testimonial carousel */
.testimonials-section { overflow: hidden; }
.carousel-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.5rem 0.25rem 1.5rem;
  cursor: grab;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track.grabbing { cursor: grabbing; }

.tcard {
  /* Subtract the .container's 2rem side padding (64px total) so a card fits
     inside the track's visible width on narrow screens instead of being
     clipped on the right. Caps at 360px, so desktop layout is unchanged. */
  flex: 0 0 min(90vw - 64px, 360px);
  scroll-snap-align: start;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  transition: var(--t);
  display: flex;
  flex-direction: column;
}
.tcard:hover {
  box-shadow: var(--shadow);
  border-color: var(--green-pale);
  transform: translateY(-4px);
}
/* Photo card — image only, no card frame. Keeps .tcard's flex sizing (which is
   what stops slides being clipped on mobile) but drops the white background,
   border and padding. Images keep their natural aspect and are fitted, never
   cropped; the 4/5 box keeps every slide the same height, and the letterbox
   area is transparent so the section behind shows through. */
.pcard {
  background: transparent;
  border: none;
  padding: 0;
}
.pcard:hover { box-shadow: none; }
.pcard img {
  display: block;
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: contain;
}
.tcard-photo {
  width: 180px; height: 180px;
  border-radius: 24px;
  object-fit: cover;
  margin-bottom: 1.25rem;
  border: 3px solid var(--green-pale);
  flex-shrink: 0;
}
.tcard-photo-placeholder {
  width: 180px; height: 180px;
  border-radius: 24px;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}
.tcard-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 0.875rem;
  color: var(--gold);
}
.tcard-stars svg { width: 16px; height: 16px; }
.tcard-quote {
  font-style: italic;
  color: var(--text);
  font-size: 0.925rem;
  line-height: 1.7;
  flex-grow: 1;
  margin-bottom: 1.25rem;
}
.tcard-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.1rem;
}
.tcard-meta {
  font-size: 0.775rem;
  color: var(--text-light);
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.carousel-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: var(--t);
  cursor: pointer;
}
.carousel-dot.active {
  background: var(--green);
  width: 24px;
  border-radius: 4px;
}
.carousel-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: var(--t);
  background: var(--white);
}
.carousel-btn:hover {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}
.carousel-btn svg { width: 18px; height: 18px; }

/* Testimonial grid */
.tgrid {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 640px)  { .tgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .tgrid { grid-template-columns: repeat(3, 1fr); } }

.tgrid-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: var(--t);
  position: relative;
}
.tgrid-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.tgrid-card::before {
  content: '"';
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-family: var(--font-serif);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--green-pale);
  font-weight: 700;
}
.tgrid-card .tcard-quote { margin-bottom: 1rem; font-size: 0.9rem; }
.tgrid-card .tcard-name { font-size: 0.825rem; font-weight: 700; }
.tgrid-card .tcard-meta { font-size: 0.75rem; }

/* Result highlight strip */
.result-strip {
  background: var(--green);
  padding: 1.3125rem 0;
  overflow: hidden;
}
.result-strip-inner {
  display: flex;
  gap: 3rem;
  animation: marquee 28s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.result-strip-inner span {
  color: rgba(255,255,255,0.9);
  font-size: 0.825rem;
  font-weight: 500;
}
.result-strip-inner span.dot {
  color: var(--gold-light);
  font-weight: 700;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 10. ABOUT PAGE
   ============================================= */
.about-body {
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 768px) {
  .about-body { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .about-body.reverse .about-img { order: 2; }
  .about-body.reverse .about-text { order: 1; }
}
.about-img {
  position: relative;
}
.about-img img {
  width: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
  aspect-ratio: 4/5;
}
.about-img-badge {
  position: absolute;
  bottom: -1rem;
  right: -0.75rem;
  background: var(--green);
  color: var(--white);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow);
  text-align: center;
  min-width: 120px;
}
.about-img-badge strong {
  display: block;
  font-size: 1.6rem;
  font-family: var(--font-serif);
}
.about-img-badge span {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.8);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.about-text h2 { margin-bottom: 1.25rem; }
.about-text .lead { margin-bottom: 1.5rem; }
/* CTA sits inside .about-text on desktop; below the image on mobile.
   .about-cta-mobile is a wrapper, not the button: as a direct child of the
   .about-body grid it would be blockified and stretched to the full column,
   so the anchor lives inside it and keeps its own inline-flex sizing. */
.about-cta-mobile { display: none; }
@media (max-width: 767px) {
  .about-cta-desktop { display: none; }
  .about-cta-mobile { display: block; text-align: center; }
}
.creds-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.5rem 0 2rem;
}
.cred-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.cred-icon {
  width: 32px; height: 32px;
  background: var(--green-pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  flex-shrink: 0;
}
.cred-icon svg { width: 15px; height: 15px; }

/* 11. WORK 1-ON-1 PAGE
   ============================================= */
.offer-grid {
  display: grid;
  gap: 1.5rem;
  align-items: stretch;
}
@media (min-width: 768px) { .offer-grid { grid-template-columns: repeat(2, 1fr); } }

.offer-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  transition: var(--t);
}
.offer-card:hover {
  border-color: var(--green);
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}
.offer-card.featured {
  border-color: var(--green);
  background: linear-gradient(135deg, var(--green-pale), var(--white));
  position: relative;
}
.offer-badge {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--green);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 1rem;
  border-radius: 100px;
  white-space: nowrap;
}
.offer-card h3 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.offer-price {
  font-size: 2rem;
  font-weight: 700;
  color: var(--green);
  line-height: 1;
  margin: 1rem 0 0.25rem;
}
.offer-price span {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-muted);
}
.offer-desc {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}
.offer-features {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 2rem;
}
.offer-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.offer-feature svg {
  width: 18px; height: 18px;
  color: var(--green);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Who it's for */
.for-grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 640px) { .for-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .for-grid { grid-template-columns: repeat(3, 1fr); } }

.for-card {
  background: var(--bg-alt);
  border-radius: var(--radius);
  padding: 1.5rem;
  border-left: 4px solid var(--green);
  transition: var(--t);
}
.for-card:hover { background: var(--white); box-shadow: var(--shadow-sm); }
.for-card h4 { margin-bottom: 0.4rem; font-size: 0.95rem; }
.for-card p { font-size: 0.85rem; color: var(--text-muted); margin: 0; }

/* 12. CONTACT PAGE
   ============================================= */
/* Single-column now that the info sidebar is gone — centre the form and hold
   it to a readable width instead of letting it span the full container. */
.contact-layout {
  display: grid;
  gap: 3rem;
  max-width: 680px;
  margin-inline: auto;
}

.contact-info { display: block; }
.contact-info h2 { margin-bottom: 1rem; }
.contact-info .lead { margin-bottom: 2rem; }
.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.contact-detail-icon {
  width: 44px; height: 44px;
  background: var(--green-pale);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  flex-shrink: 0;
}
.contact-detail-text strong {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}
.contact-detail-text a, .contact-detail-text span {
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 500;
}
.contact-detail-text a:hover { color: var(--green); }

.contact-form-wrap {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  box-shadow: var(--shadow-sm);
}
.contact-form-wrap h3 {
  font-size: 1.3rem;
  font-family: var(--font-serif);
  margin-bottom: 0.5rem;
}
.contact-form-wrap .lead {
  font-size: 0.875rem;
  margin-bottom: 2rem;
}
.form-group {
  margin-bottom: 1.25rem;
}
.form-row {
  display: grid;
  gap: 1rem;
}
@media (min-width: 500px) { .form-row { grid-template-columns: 1fr 1fr; } }

.form-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.4rem;
  letter-spacing: 0.02em;
}
.form-input {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  transition: var(--t);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.form-input:focus {
  border-color: var(--green);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(51,99,82,0.18);
}
.form-input::placeholder { color: var(--text-light); }
.form-input.error { border-color: #e05555; box-shadow: 0 0 0 3px rgba(224,85,85,0.1); }
textarea.form-input { resize: vertical; min-height: 140px; line-height: 1.6; }
.form-error {
  font-size: 0.775rem;
  color: #e05555;
  margin-top: 0.35rem;
  display: none;
}
.form-error.visible { display: block; }

.form-submit {
  width: 100%;
  margin-top: 0.5rem;
  position: relative;
}
.form-submit .spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: none;
}
.form-submit.loading .btn-text { display: none; }
.form-submit.loading .spinner { display: block; }

@keyframes spin { to { transform: rotate(360deg); } }

.form-success {
  display: none;
  text-align: center;
  padding: 2rem;
}
.form-success.visible { display: block; }
.form-success-icon {
  width: 64px; height: 64px;
  background: var(--green-pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  color: var(--green);
}
.form-success h3 { margin-bottom: 0.5rem; }
.form-success p { color: var(--text-muted); font-size: 0.9rem; margin: 0; }

/* 13. FOOTER
   ============================================= */
.footer {
  background: var(--bg-dark);
  color: var(--white);
  padding: 3.5rem 0 2rem;
}
.footer-grid {
  display: grid;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr auto; } }
.footer-logo {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.75rem;
}
/* Brand lockup — white-on-black artwork, sits directly on the black footer */
.footer-lockup {
  width: 180px;
  height: auto;
  margin-bottom: 1rem;
}
/* Centre the lockup on mobile only; vertical spacing and desktop unchanged.
   639px matches the .footer-grid breakpoint below. */
@media (max-width: 639px) {
  .footer-lockup { margin-inline: auto; }
}
.footer-tagline {
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.footer-email {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--gold-light);
  transition: color 0.2s;
}
.footer-email:hover { color: var(--gold); }
/* All pages: on mobile the email sits below the Pages list, under the Contact
   link and directly above the divider, instead of directly under the lockup.
   Two copies rather than `order`, because the email is nested inside a grid
   cell and can't reorder against a sibling cell's children — same approach as
   .about-cta-mobile. Only one copy is ever visible, so the duplicate mailto is
   hidden from the accessibility tree by display:none, not just visually.
   639px matches the .footer-grid breakpoint below. Desktop is unchanged. */
.footer-email-mobile { display: none; }
@media (max-width: 639px) {
  .footer-email-desktop { display: none; }
  .footer-email-mobile { display: inline-flex; margin-top: 1.25rem; }
}
.footer-nav-heading {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 1rem;
}
.footer-nav-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.footer-nav-links a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.65);
  transition: color 0.2s;
}
.footer-nav-links a:hover { color: var(--white); }
.footer-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: 0 0 1.5rem;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.775rem;
  color: rgba(255,255,255,0.4);
}

/* 14. ANIMATIONS & SCROLL REVEALS
   ============================================= */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* 15. UTILITY EXTRAS
   ============================================= */
.divider-gold {
  width: 48px; height: 3px;
  background: var(--gold);
  border-radius: 2px;
  margin: 0.75rem auto 1.5rem;
}
.divider-gold-left { margin: 0.75rem 0 1.5rem; }

.img-overlay-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.img-overlay-wrap img { width: 100%; display: block; }
.img-placeholder {
  background: linear-gradient(135deg, var(--green-pale), var(--bg-alt));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-align: center;
  padding: 2rem;
  border-radius: var(--radius-lg);
  aspect-ratio: 4/3;
}

.show-more-btn {
  display: block;
  margin: 2rem auto 0;
  background: none;
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.75rem 1.75rem;
  border-radius: 100px;
  cursor: pointer;
  transition: var(--t);
}
.show-more-btn:hover {
  border-color: var(--green);
  color: var(--green);
}

/* CTA Band */
.cta-band {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  text-align: center;
  padding: clamp(60px, 8vw, 100px) 0;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(ellipse at 60% 40%, rgba(255,255,255,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.cta-band h2, .cta-band p { color: var(--white); }
.cta-band h2 { margin-bottom: 1rem; }
.cta-band p { opacity: 0.8; max-width: 520px; margin: 0 auto 2rem; }
.cta-band .btn-group {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

@media (min-width: 768px) { .container { padding: 0 2rem; } }

/* ── SOCIAL LINKS (footer) ───────────────────────────────────── */

/* ── FORM CHECKBOXES ─────────────────────────────────────────── */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.25rem;
}
.checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}
.checkbox-item input[type="checkbox"] {
  width: 18px; height: 18px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  accent-color: var(--green);
  cursor: pointer;
  flex-shrink: 0;
}
.checkbox-item label {
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
  line-height: 1.4;
}

/* ── APPLY PAGE ──────────────────────────────────────────────── */
.apply-form-wrap {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  box-shadow: var(--shadow-sm);
  max-width: 720px;
  margin: 0 auto;
}
.apply-form-wrap h3 {
  font-size: 1.3rem;
  font-family: var(--font-serif);
  margin-bottom: 0.4rem;
}
.apply-form-wrap > .lead { font-size: 0.875rem; margin-bottom: 2rem; }
.form-section {
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  margin-top: 1.5rem;
}
/* ── TGRID CARD PHOTOS ───────────────────────────────────────── */
.tgrid-photo {
  width: 180px; height: 180px;
  border-radius: 24px;
  object-fit: cover;
  margin-bottom: 1.25rem;
  border: 3px solid var(--green-pale);
  flex-shrink: 0;
}
.tgrid-photo-placeholder {
  width: 180px; height: 180px;
  border-radius: 24px;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.form-section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  background: var(--green);
  color: var(--white);
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}