/*
  site.css - hand-written component CSS consuming tokens.css custom
  properties exclusively (no restated hex/px outside tokens.css). This
  file replaces the old Tailwind build; it is authored per-component,
  the same way design-reference/treysanders-revamp.html is, not
  generated from utility classes.

  Scope of this pass: base reset + nav + hero only (per DESIGN.md
  Step 2). Everything below the hero is untouched this pass.

  Class names below match the ORIGINAL site markup (.navbar, .hero-text,
  .profile-photo-wrapper, etc.) rather than the reference file's naming -
  those hooks are load-bearing: main.js's mobile-nav builder and every
  hero entrance/glow animation targets them by name, and none of that JS
  is being touched.
*/

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--type-body-md-font-family);
  color: var(--color-ink);
  background: var(--color-canvas);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--color-primary);
  color: var(--color-ink);
}

img {
  max-width: 100%;
  height: auto;
}

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

.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

/* ---------------------------------------------------------------- */
/* NAV                                                                */
/* ---------------------------------------------------------------- */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(var(--color-canvas-rgb), 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-hairline);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}

.logo a {
  font-family: var(--type-nav-link-font-family);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  position: relative;
}

.logo a::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: navDotBlink 1.8s infinite;
}

@keyframes navDotBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: var(--space-lg);
}

.nav-links a {
  font-family: var(--type-nav-link-font-family);
  font-size: var(--type-nav-link-font-size);
  letter-spacing: var(--type-nav-link-letter-spacing);
  color: var(--color-ink-70);
  position: relative;
  padding-bottom: 2px;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-primary-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav-links a:hover {
  color: var(--color-primary-deep);
}

.nav-links a:hover::after {
  transform: scaleX(1);
}

.nav-links .cta-btn {
  font-size: 13px;
  padding: 9px 18px;
}

.nav-links .cta-btn::after {
  display: none;
}

.hamburger {
  display: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}

.hamburger span {
  display: block;
  width: 25px;
  height: 2px;
  background-color: var(--color-ink);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.hamburger.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav panel - injected by js/main.js's createEnhancedMobileNav() */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-canvas);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-nav.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-nav .nav-links {
  flex-direction: column;
  gap: var(--space-lg);
}

.mobile-nav .nav-links a {
  font-size: 18px;
}

body.no-scroll {
  overflow: hidden;
}

@media (max-width: 860px) {
  .navbar .nav-links:not(.mobile-nav .nav-links) {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .navbar {
    border-bottom-width: 2px;
  }
}

/* ---------------------------------------------------------------- */
/* HERO                                                               */
/* ---------------------------------------------------------------- */

.hero-section {
  position: relative;
  padding: 140px 0 var(--space-huge);
  overflow: hidden;
  border-bottom: 1px solid var(--color-hairline);
}

.hero-section::before {
  content: '';
  position: absolute;
  top: -220px;
  left: 50%;
  transform: translateX(-50%);
  width: 1400px;
  height: 700px;
  background:
    radial-gradient(circle at 30% 30%, var(--color-primary-15), transparent 45%),
    radial-gradient(circle at 70% 20%, var(--color-primary-08), transparent 40%),
    radial-gradient(circle at 50% 60%, rgba(var(--color-cream-rgb), 0.9), transparent 60%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* Profile photo - kept exactly as the original animation logic
   (rotating gradient ring + pulse + fade-in), only recolored. */
.profile-container {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-lg);
}

.profile-photo-wrapper {
  position: relative;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  padding: 8px;
  background: linear-gradient(45deg, var(--color-primary), var(--color-cream), var(--color-primary-soft), var(--color-cream));
  background-size: 400% 400%;
  animation: rotateGradient 8s linear infinite, profilePulse 3s ease-in-out infinite;
}

@keyframes rotateGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes profilePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.profile-photo-wrapper::after {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border-radius: 50%;
  border: 1px solid var(--color-primary-25);
  animation: pulseRing 2s ease-out infinite;
}

@keyframes pulseRing {
  0% { transform: scale(0.95); opacity: 0.7; }
  50% { transform: scale(1); opacity: 0.3; }
  100% { transform: scale(0.95); opacity: 0.7; }
}

.profile-photo {
  width: 92%;
  height: 92%;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 50%;
  border: 2px solid var(--color-canvas);
  animation: fadeInOnly 1s ease;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

.headline {
  font-family: var(--type-display-hero-font-family);
  font-style: var(--type-display-hero-font-style);
  font-weight: var(--type-display-hero-font-weight);
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  letter-spacing: var(--type-display-hero-letter-spacing);
  line-height: 1;
  color: var(--color-ink);
  margin-bottom: var(--space-sm);
  animation: fadeInUp 1s ease both;
}

.subheadline {
  font-family: var(--type-body-lede-font-family);
  font-weight: var(--type-body-lede-font-weight);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  color: var(--color-ink-70);
  margin-bottom: var(--space-md);
  animation: fadeInUp 1s ease 0.15s both;
}

.subheadline .glow-text {
  color: var(--color-primary-deep);
  animation: glowFlash 5s ease-in-out infinite;
}

@keyframes glowFlash {
  0%, 100% { color: var(--color-primary-deep); text-shadow: none; }
  50% { color: var(--color-primary); text-shadow: 0 0 10px var(--color-primary-25); }
}

.hero-text {
  font-family: var(--type-body-md-font-family);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-ink-70);
  max-width: 640px;
  margin: 0 auto var(--space-sm);
  animation: fadeInUp 1s ease 0.3s both;
}

.hero-text .stat-inline {
  font-family: var(--type-stat-value-font-family);
  font-variant-numeric: tabular-nums;
  color: var(--color-primary-deep);
}

.hero-subtext {
  display: inline-block;
  position: relative;
  font-family: var(--type-body-md-font-family);
  font-weight: 500;
  font-size: 15px;
  color: var(--color-primary-deep);
  margin-bottom: var(--space-lg);
  animation: fadeInUp 1s ease 0.45s both;
  white-space: nowrap;
}

.hero-subtext::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-primary);
  animation: lineGrowShrink 3s ease-in-out infinite;
}

@keyframes lineGrowShrink {
  0% { width: 0; left: 0; }
  25% { width: 100%; left: 0; }
  50% { width: 0; left: 100%; }
  75% { width: 100%; left: 0; }
  100% { width: 0; left: 0; }
}

@media (max-width: 576px) {
  .hero-subtext {
    font-size: 11px;
  }
}

/* "Old soul meets new school" - real bio content, restyled from a
   glassmorphic rounded card to a hairline-bordered block (sharp
   radius, no shadow, no blur) per DESIGN.md's anti-generic-card rule. */
.tagline {
  margin: var(--space-xl) auto 0;
  max-width: 700px;
  animation: fadeInUp 1s ease 0.6s both;
}

.tagline-main {
  font-family: var(--type-display-hero-font-family);
  font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin-bottom: var(--space-md);
}

.tagline-main .lead {
  color: var(--color-ink);
  font-weight: 500;
}

.tagline-main .accent {
  color: var(--color-primary-deep);
  font-style: italic;
  font-weight: 300;
}

.tagline-sub {
  font-family: var(--type-body-md-font-family);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-ink-70);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  animation: fadeInUp 1s ease 0.75s both;
}

/* ==================================================================
   BUTTONS - DESIGN.md's button-primary-pill / button-ghost tokens,
   built out with full interaction states (not just base styling) so
   every pill/ghost button on the site behaves identically. Applied via
   these shared selector groups rather than one-off per-page styles -
   .primary-btn/.nav-links .cta-btn/.for-you-btn/.submit-btn
   are all the same primary-pill component; .secondary-btn is the ghost.
   ================================================================== */

.primary-btn,
.nav-links .cta-btn,
.for-you-btn,
.submit-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--type-button-font-family);
  font-weight: var(--type-button-font-weight);
  font-size: var(--type-button-font-size);
  padding: 14px 28px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-primary-deep);
  color: var(--color-canvas);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(var(--color-ink-rgb), 0.06), 0 4px 12px rgba(var(--color-primary-rgb), 0.25);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.primary-btn:hover,
.nav-links .cta-btn:hover,
.for-you-btn:hover,
.submit-btn:hover {
  background: var(--color-primary);
  color: var(--color-canvas);
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(var(--color-ink-rgb), 0.08), 0 8px 20px rgba(var(--color-primary-rgb), 0.35);
}

.primary-btn:active,
.nav-links .cta-btn:active,
.for-you-btn:active,
.submit-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(var(--color-ink-rgb), 0.06), 0 2px 8px rgba(var(--color-primary-rgb), 0.2);
}

.primary-btn:focus-visible,
.nav-links .cta-btn:focus-visible,
.for-you-btn:focus-visible,
.submit-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.primary-btn:disabled,
.nav-links .cta-btn[aria-disabled="true"],
.for-you-btn[aria-disabled="true"],
.submit-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.secondary-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--type-button-font-family);
  font-weight: var(--type-button-font-weight);
  font-size: var(--type-button-font-size);
  padding: 13px 27px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink-70);
  border: 1px solid var(--color-hairline-gold);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.secondary-btn:hover {
  color: var(--color-primary-deep);
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--color-ink-rgb), 0.08);
}

.secondary-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.secondary-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.secondary-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------- */
/* STAT STRIP - real numbers already in hero-text (70% / $0.20),      */
/* pulled into their own hairline-divided row per the reference       */
/* pattern (nothing invented, same two facts stated twice).           */
/* ---------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.stat {
  padding: var(--space-md) var(--page-gutter);
  border-right: 1px solid var(--color-hairline);
  text-align: center;
}

.stat:last-child {
  border-right: none;
}

.stat-label {
  font-family: var(--type-stat-label-font-family);
  font-size: var(--type-stat-label-font-size);
  letter-spacing: var(--type-stat-label-letter-spacing);
  color: var(--color-ink-45);
  margin-bottom: 8px;
}

.stat-value {
  font-family: var(--type-stat-value-font-family);
  font-weight: var(--type-stat-value-font-weight);
  font-size: var(--type-stat-value-font-size);
  font-variant-numeric: var(--type-stat-value-font-variant-numeric);
  color: var(--color-ink);
}

/* ==================================================================
   BELOW THE HERO - About / banners / for-you / skills / contact / footer
   ================================================================== */

section {
  padding: var(--space-huge) 0;
}

/* Scroll-reveal - targeted by main.js's IntersectionObserver on
   .section-title, .section-subtitle, .for-you-card, .contact-method,
   .contact-form-container (adds .animate then .show on scroll). */
.animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.animate.show {
  opacity: 1;
  transform: translateY(0);
}

.section-title {
  font-family: var(--type-display-section-font-family);
  font-style: var(--type-display-section-font-style);
  font-weight: var(--type-display-section-font-weight);
  font-size: var(--type-display-section-font-size);
  letter-spacing: var(--type-display-section-letter-spacing);
  color: var(--color-ink);
  display: inline-block;
  margin-bottom: 0;
}

/* Standardized section-header divider - a short, solid hairline-gold
   rule, not the old full-width gradient fade. Width/height/spacing
   are fixed per DESIGN.md; alignment follows the section-head's own
   text-align (centered by default, left when nested in a left-aligned
   header) via margin-left/right. */
.section-divider {
  width: 40px;
  height: 1px;
  background: var(--color-hairline-gold);
  margin: 16px auto;
}

.section-head {
  text-align: center;
  margin-bottom: var(--space-xxl);
}

.section-subtitle {
  display: block;
  text-align: center;
  font-family: var(--type-body-md-font-family);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-ink-70);
  max-width: 680px;
  margin: 0 auto 0;
}

.section-subtitle + .section-subtitle {
  margin-top: var(--space-md);
}

/* ---- emphasis-word text effects (consolidated, recolored gold) ---- */

.emphasis-word {
  position: relative;
  font-weight: 600;
}

.emphasis-fade {
  display: inline-block;
  color: var(--color-primary-deep);
  animation: emphasisDisappearReappear 3.5s ease-in-out infinite;
}

@keyframes emphasisDisappearReappear {
  0%, 30% { opacity: 1; transform: scale(1); filter: blur(0); }
  40% { opacity: 0.3; transform: scale(0.95); filter: blur(1px); }
  50% { opacity: 0; transform: scale(0.9); filter: blur(2px); }
  60% { opacity: 0.3; transform: scale(0.95); filter: blur(1px); }
  70%, 100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

.emphasis-shimmer {
  color: var(--color-primary-deep);
  animation: emphasisFade 2.4s ease-in-out infinite;
}

@keyframes emphasisFade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.emphasis-performance,
.emphasis-glow-on-photo {
  color: var(--color-primary-soft);
  animation: emphasisGlow 2.6s ease-in-out infinite;
}

@keyframes emphasisGlow {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50% { text-shadow: 0 0 12px var(--color-primary-25); }
}

.emphasis-zoom {
  display: inline-block;
  color: var(--color-primary-deep);
  animation: emphasisZoom 1.8s ease-in-out infinite;
}

@keyframes emphasisZoom {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

/* Money-green highlight - the one deliberate departure from the gold/ink
   palette for this single word pairing, same exception class as the
   Instagram gradient: a universally-read color cue (green = money)
   that gold can't substitute for. */
.emphasis-money {
  font-weight: 600;
  background-image: linear-gradient(90deg,
    #0f6b3a 0%, #17914c 20%, #4ade80 40%, #17914c 60%, #0f6b3a 80%, #17914c 100%);
  background-size: 250% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: emphasisMoneyGradient 3s linear infinite;
}

@keyframes emphasisMoneyGradient {
  0% { background-position: 0% 50%; }
  100% { background-position: -150% 50%; }
}

.emphasis-bounce {
  display: inline-block;
  color: var(--color-primary-deep);
  animation: emphasisBounce 1.6s ease-in-out infinite;
}

@keyframes emphasisBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.emphasis-wink .wink-emoji,
.wink-emoji {
  display: inline-block;
  animation: emphasisWink 2.2s ease-in-out infinite;
}

@keyframes emphasisWink {
  0%, 80%, 100% { transform: rotate(0deg); }
  90% { transform: rotate(-15deg); }
}

.emphasis-hammer .hammer-icon,
.hammer-icon {
  display: inline-block;
  animation: emphasisHammer 1.4s ease-in-out infinite;
}

@keyframes emphasisHammer {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-20deg); }
}

/* ---- About ---- */

#about {
  position: relative;
  overflow: hidden;
}

#about::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 1400px;
  height: 700px;
  background:
    radial-gradient(circle at 30% 30%, var(--color-primary-15), transparent 45%),
    radial-gradient(circle at 70% 20%, rgba(var(--color-primary-soft-rgb), 0.12), transparent 40%),
    radial-gradient(circle at 50% 60%, rgba(var(--color-cream-rgb), 0.9), transparent 60%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}

.about-content {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
}

#about .section-label {
  font-family: var(--type-eyebrow-font-family);
  font-size: var(--type-eyebrow-font-size);
  color: var(--color-primary-deep);
  letter-spacing: var(--type-eyebrow-letter-spacing);
  margin-bottom: 10px;
}

#about .section-title {
  display: block;
  text-align: left;
  margin-bottom: var(--space-xxl);
}

.chapter {
  margin-bottom: var(--space-xxl);
}

.chapter-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--type-eyebrow-font-family);
  font-size: 11px;
  color: var(--color-primary-deep);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-sm);
}

.chapter-tag::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--color-primary-25);
}

.chapter p {
  font-family: var(--type-body-md-font-family);
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-ink-70);
  margin-bottom: var(--space-md);
}

.chapter p:last-child {
  margin-bottom: 0;
}

.chapter-proof-shot {
  margin: var(--space-lg) 0 var(--space-md);
}

.chapter-proof-shot img {
  display: block;
  width: 100%;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sharp);
}

.chapter-proof-shot figcaption {
  font-family: var(--type-body-md-font-family);
  font-size: 13px;
  font-style: italic;
  color: var(--color-ink-45);
  text-align: center;
  margin-top: var(--space-xs);
}

.pullquote {
  margin: var(--space-xxl) 0;
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
  text-align: center;
}

.pullquote p {
  font-family: var(--type-display-card-font-family);
  font-weight: var(--type-display-card-font-weight);
  font-size: clamp(1.5rem, 3.6vw, 2.2rem);
  color: var(--color-primary-deep);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
}

.pullquote .mark {
  display: block;
  font-family: var(--type-eyebrow-font-family);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--color-ink-25);
  margin-top: var(--space-sm);
}

.cta-row {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-hairline);
  text-align: center;
}

/* ---- Lifestyle banners ---- */

.lifestyle-banner {
  position: relative;
  height: 42vh;
  min-height: 300px;
  max-height: 440px;
  padding: 0;
  display: flex;
  background-size: cover;
  overflow: hidden;
}

/* Wide desktop viewports stretch a short, full-bleed banner into a much
   wider aspect ratio than the source photos were shot at, so
   background-size: cover crops far more aggressively than it does on
   mobile/tablet. Taller box on desktop keeps the crop reasonable
   without going back to the original "too large" mobile height. */
@media (min-width: 1024px) {
  .lifestyle-banner {
    height: 62vh;
    max-height: 680px;
  }
}

.lifestyle-banner-1 {
  background-image: linear-gradient(0deg, rgba(var(--color-ink-rgb), 0.55), rgba(var(--color-ink-rgb), 0.1) 55%), url('images/car-photo.jpg');
  background-position: center 30%;
  align-items: flex-end;
}

.lifestyle-banner-2 {
  background-image: linear-gradient(180deg, rgba(var(--color-ink-rgb), 0.5), rgba(var(--color-ink-rgb), 0.05) 55%), url('images/personal-photo2.jpg');
  background-position: 58% 42%;
  align-items: flex-start;
}

.banner-overlay {
  width: 100%;
}

.lifestyle-banner .container {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.banner-content {
  max-width: 640px;
}

.lifestyle-banner-2 .banner-content {
  margin-left: auto;
  text-align: right;
}

.banner-title {
  font-family: var(--type-display-section-font-family);
  font-weight: var(--type-display-section-font-weight);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  color: var(--color-canvas);
  margin-bottom: var(--space-xs);
}

.banner-subtitle {
  font-family: var(--type-body-lede-font-family);
  font-size: 16px;
  color: rgba(var(--color-canvas-rgb), 0.85);
}

/* ---- Am I For You ---- */

.fit-check-head {
  text-align: left;
  max-width: 560px;
  margin-bottom: var(--space-xxl);
}

.fit-check-head .section-divider {
  margin-left: 0;
  margin-right: 0;
}

.fit-check-head .section-subtitle {
  text-align: left;
  margin: 0;
}

.fit-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1px;
  background: var(--color-hairline);
  border: 1px solid var(--color-hairline);
  margin-bottom: 1px;
}

.fit-card {
  background: var(--color-canvas);
  padding: var(--space-lg);
  position: relative;
}

.fit-card.tall {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
}

.fit-card-tag {
  font-family: var(--type-eyebrow-font-family);
  font-size: 11px;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}

.fit-card h3 {
  font-family: var(--type-display-card-font-family);
  font-weight: var(--type-display-card-font-weight);
  font-size: 24px;
  line-height: 1.25;
  margin-bottom: var(--space-sm);
}

.fit-card p {
  font-family: var(--type-body-md-font-family);
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-ink-70);
  margin-bottom: var(--space-md);
}

.fit-highlight {
  color: var(--color-ink);
  font-weight: 600;
}

.fit-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: auto;
}

.fit-tag {
  font-family: var(--type-tag-font-family);
  font-size: var(--type-tag-font-size);
  padding: 5px 11px;
  border-radius: var(--radius-sharp);
  background: var(--color-primary-04);
  border: 1px solid var(--color-primary-15);
  color: var(--color-primary-deep);
}

.fit-card-cta {
  margin-top: var(--space-lg);
}

.fit-rowlist {
  border: 1px solid var(--color-hairline);
  border-top: none;
  margin-bottom: var(--space-huge);
}

.fit-rowitem {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-hairline);
}

.fit-rowitem:last-child {
  border-bottom: none;
}

.fit-rowitem-title {
  font-family: var(--type-display-card-font-family);
  font-weight: var(--type-display-card-font-weight);
  font-size: 18px;
}

.fit-rowitem-sub {
  font-family: var(--type-body-md-font-family);
  font-size: 13px;
  color: var(--color-ink-45);
  margin-top: 4px;
}

.fit-rowitem-arrow {
  font-family: var(--type-eyebrow-font-family);
  font-size: 12px;
  color: var(--color-primary-deep);
  white-space: nowrap;
}

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

  .fit-card.tall {
    grid-row: auto;
  }

  .fit-rowitem {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }
}

.still-confused-section {
  max-width: none;
  margin: var(--space-huge) 0 0;
  padding: var(--space-xxl) var(--space-xl);
  background: var(--color-ink);
  border-radius: var(--radius-sharp);
  text-align: center;
}

.still-confused-title {
  font-family: var(--type-display-card-font-family);
  font-weight: var(--type-display-card-font-weight);
  font-size: 28px;
  color: var(--color-canvas);
  margin-bottom: var(--space-lg);
}

.still-confused-text p {
  font-family: var(--type-body-md-font-family);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(var(--color-primary-soft-rgb), 0.75);
  max-width: 640px;
  margin: 0 auto var(--space-sm);
}

.emphasis-text {
  color: rgba(var(--color-canvas-rgb), 0.9);
}

.still-confused-cta {
  margin-top: var(--space-lg);
  font-family: var(--type-eyebrow-font-family);
  font-size: 13px;
}

.still-confused-cta a {
  color: var(--color-primary-soft);
  border-bottom: 1px solid var(--color-primary-25);
  padding-bottom: 3px;
}

.still-confused-cta a:hover {
  color: var(--color-canvas);
  border-color: var(--color-primary-soft);
}

/* ---- Skills ---- */

.cap-head {
  text-align: left;
  max-width: 600px;
  margin-bottom: var(--space-xxl);
}

.cap-head .section-divider {
  margin-left: 0;
  margin-right: 0;
}

.cap-head .section-subtitle {
  text-align: left;
  margin: 0;
}

.cap-grid-top {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1px;
  background: var(--color-hairline);
  border: 1px solid var(--color-hairline);
  margin-bottom: 1px;
}

.cap-card {
  background: var(--color-canvas);
  padding: var(--space-lg);
  position: relative;
}

.cap-card.tall {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
}

.cap-stack-right {
  display: grid;
  grid-template-rows: auto auto;
  gap: 1px;
  background: var(--color-hairline);
}

.cap-card-icon {
  font-size: 20px;
  color: var(--color-primary-deep);
  margin-bottom: var(--space-md);
}

.cap-card-tag {
  font-family: var(--type-eyebrow-font-family);
  font-size: 11px;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.cap-card h3 {
  font-family: var(--type-display-card-font-family);
  font-weight: var(--type-display-card-font-weight);
  font-size: 24px;
  line-height: 1.25;
  margin-bottom: var(--space-sm);
}

.cap-card p {
  font-family: var(--type-body-md-font-family);
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-ink-70);
  margin-bottom: var(--space-md);
}

.cap-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: auto;
}

.cap-tag {
  font-family: var(--type-tag-font-family);
  font-size: var(--type-tag-font-size);
  padding: 5px 11px;
  border-radius: var(--radius-sharp);
  background: var(--color-primary-04);
  border: 1px solid var(--color-primary-15);
  color: var(--color-primary-deep);
}

/* Instagram's own brand gradient (blue -> purple -> magenta -> pink ->
   red -> orange) — the one deliberate departure from the gold/ink
   palette in the whole system, reserved for this single card. */
.cap-card.viral {
  background: linear-gradient(135deg, #405de6 0%, #5b51d8 12%, #833ab4 30%, #c13584 50%, #e1306c 68%, #fd1d1d 82%, #f77737 100%);
  color: #ffffff;
}

.cap-card.viral .cap-card-icon {
  color: #ffffff;
}

.cap-card.viral .cap-card-tag {
  color: rgba(var(--color-canvas-rgb), 0.85);
}

.cap-card.viral h3 {
  color: #ffffff;
}

.cap-card.viral p {
  color: rgba(var(--color-canvas-rgb), 0.9);
}

.cap-card .stat-inline {
  font-family: var(--type-stat-value-font-family);
  color: var(--color-primary-deep);
}

.cap-rowlist {
  border: 1px solid var(--color-hairline);
  border-top: none;
  margin-bottom: 1px;
}

.cap-rowitem {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-hairline);
}

.cap-rowitem:last-child {
  border-bottom: none;
}

.cap-rowitem-icon {
  font-size: 16px;
  color: var(--color-primary-deep);
}

.cap-rowitem-title {
  font-family: var(--type-display-card-font-family);
  font-weight: var(--type-display-card-font-weight);
  font-size: 18px;
}

.cap-rowitem-sub {
  font-family: var(--type-body-md-font-family);
  font-size: 13px;
  color: var(--color-ink-45);
  margin-top: 4px;
}

.cap-rowitem-arrow {
  font-family: var(--type-eyebrow-font-family);
  font-size: 12px;
  color: var(--color-primary-deep);
  white-space: nowrap;
}

.cap-manifesto {
  background: var(--color-ink);
  color: var(--color-primary-soft);
  padding: var(--space-xxl) var(--space-xl);
  text-align: center;
  border-radius: var(--radius-sharp);
  margin-top: var(--space-xxl);
}

.cap-manifesto-tag {
  font-family: var(--type-eyebrow-font-family);
  font-size: 11px;
  color: var(--color-primary);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-md);
}

.cap-manifesto h3 {
  font-family: var(--type-display-card-font-family);
  font-weight: var(--type-display-card-font-weight);
  font-size: 28px;
  color: var(--color-canvas);
  margin-bottom: var(--space-lg);
}

.cap-manifesto ul {
  list-style: none;
  max-width: 560px;
  margin: 0 auto var(--space-lg);
  text-align: left;
}

.cap-manifesto li {
  font-family: var(--type-body-md-font-family);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(var(--color-primary-soft-rgb), 0.85);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-primary-15);
}

.cap-manifesto li:last-child {
  border-bottom: none;
}

@media (max-width: 860px) {
  .cap-grid-top {
    grid-template-columns: 1fr;
  }

  .cap-card.tall {
    grid-row: auto;
  }

  .cap-rowitem {
    grid-template-columns: 24px 1fr;
  }

  .cap-rowitem-arrow {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 4px;
  }
}

/* ---- Contact ---- */

.commitment-card {
  max-width: 780px;
  margin: var(--space-xl) auto 0;
  padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-xl);
  border-left: 2px solid var(--color-primary);
  border-top: 1px solid var(--color-hairline);
  border-right: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
}

.commitment-card h3 {
  font-family: var(--type-body-md-font-family);
  font-weight: 600;
  font-size: 17px;
  color: var(--color-ink);
  margin-bottom: var(--space-sm);
}

.commitment-card p {
  font-family: var(--type-body-md-font-family);
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-ink-70);
}

.contact-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  max-width: 900px;
  margin: var(--space-xxl) auto 0;
}

.contact-form-container {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sharp);
  padding: var(--space-lg);
}

.form-group {
  margin-bottom: var(--space-md);
}

.form-group label {
  display: block;
  font-family: var(--type-body-md-font-family);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 6px;
}

.form-group input {
  width: 100%;
  font-family: var(--type-body-md-font-family);
  font-size: 15px;
  color: var(--color-ink);
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline-gold);
  border-radius: var(--radius-sharp);
  padding: 10px 14px;
}

.form-group input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.submit-btn {
  width: 100%;
}

.contact-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--color-hairline);
  border: 1px solid var(--color-hairline);
}

.contact-method {
  background: var(--color-canvas);
  padding: var(--space-md);
  text-align: center;
}

.contact-method i {
  color: var(--color-primary-deep);
  font-size: 18px;
  margin-bottom: var(--space-xs);
}

.contact-method h3 {
  font-family: var(--type-body-md-font-family);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-ink);
  margin-bottom: 4px;
}

.contact-method p {
  font-family: var(--type-nav-link-font-family);
  font-size: 12px;
}

.contact-method a {
  color: var(--color-ink-45);
}

.contact-method a:hover {
  color: var(--color-primary-deep);
}

@media (max-width: 860px) {
  .contact-content {
    grid-template-columns: 1fr;
  }

  .contact-info {
    grid-template-columns: 1fr;
  }

  .lifestyle-banner-2 .banner-content {
    text-align: left;
    margin-left: 0;
  }
}

/* ---- Footer ---- */

.footer {
  background: var(--color-canvas);
  color: var(--color-ink);
  border-top: 1px solid var(--color-hairline);
  padding: var(--space-xxl) 0 var(--space-xl);
}

/* When the block directly above the footer already carries its own
   hairline border (CTA blocks, last section, etc.), drop it so only
   the footer's single border-top renders - otherwise two hairlines
   stack with zero gap and read as one thick/mismatched line. These
   classes keep their border everywhere else they're used mid-page. */
.aff-cta-block:has(+ .footer),
.mindset-cta-section:has(+ .footer),
.tl-cta:has(+ .footer),
.sc-section:has(+ .footer),
.blog-index:has(+ .footer) {
  border-top: none;
  border-bottom: none;
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-hairline);
}

.footer-logo a {
  font-family: var(--type-nav-link-font-family);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-ink);
}

.footer-social {
  display: flex;
  gap: var(--space-sm);
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-hairline-gold);
  border-radius: 50%;
  color: var(--color-ink-70);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.footer-social a:hover {
  background: var(--color-primary);
  color: var(--color-ink);
  border-color: var(--color-primary);
}

.footer-verse {
  text-align: center;
  margin: var(--space-lg) 0;
}

/* font-weight must be explicit: pages that load General Sans 300+500
   (affiliate/timeline/showcase, for badge elements) resolve an
   unspecified 400 UPWARD to the 500 face, rendering the verse bold. */
.bible-verse {
  font-family: var(--type-display-card-font-family);
  font-style: normal;
  font-weight: var(--type-display-card-font-weight);
  font-size: 18px;
  color: var(--color-ink-70);
  margin-bottom: 6px;
}

.verse-reference {
  font-family: var(--type-nav-link-font-family);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--color-primary-deep);
  text-transform: uppercase;
}

.footer-bottom {
  text-align: center;
  font-family: var(--type-nav-link-font-family);
  font-size: 11px;
  color: var(--color-ink-45);
}

/* ==================================================================
   MINDSET PAGE
   ================================================================== */

.mindset-hero {
  position: relative;
  padding: 160px 0 var(--space-huge);
  border-bottom: 1px solid var(--color-hairline);
  overflow: hidden;
}

.mindset-hero::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 1400px;
  height: 700px;
  background:
    radial-gradient(circle at 30% 30%, var(--color-primary-15), transparent 45%),
    radial-gradient(circle at 70% 20%, rgba(var(--color-primary-soft-rgb), 0.12), transparent 40%),
    radial-gradient(circle at 50% 60%, rgba(var(--color-cream-rgb), 0.9), transparent 60%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}

.mindset-hero-content {
  position: relative;
  z-index: 1;
  max-width: 780px;
}

.mindset-hero .section-label {
  font-family: var(--type-eyebrow-font-family);
  font-size: 12px;
  color: var(--color-primary-deep);
  letter-spacing: var(--type-eyebrow-letter-spacing);
  margin-bottom: var(--space-md);
}

.mindset-headline {
  font-family: var(--type-display-hero-font-family);
  font-weight: var(--type-display-hero-font-weight);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: var(--space-lg);
}

.mindset-subtext {
  font-family: var(--type-body-lede-font-family);
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-ink-70);
  margin-bottom: var(--space-md);
  max-width: 620px;
}

.mindset-intro {
  font-family: var(--type-body-md-font-family);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-ink-45);
  max-width: 620px;
}

.phil-container {
  max-width: 780px;
}

.phil-card {
  padding-top: var(--space-xxl);
  padding-bottom: var(--space-xxl);
  border-bottom: 1px solid var(--color-hairline);
}

.phil-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.phil-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.phil-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-hairline-gold);
  border-radius: var(--radius-sharp);
  color: var(--color-primary-deep);
  font-size: 16px;
}

.phil-card-tag {
  font-family: var(--type-eyebrow-font-family);
  font-size: 11px;
  color: var(--color-primary);
  letter-spacing: 0.06em;
}

.phil-card h2 {
  font-family: var(--type-display-section-font-family);
  font-weight: var(--type-display-section-font-weight);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: var(--space-md);
}

.phil-lead {
  font-family: var(--type-display-card-font-family);
  font-weight: var(--type-display-card-font-weight);
  font-size: 22px;
  line-height: 1.4;
  color: var(--color-ink);
  margin-bottom: var(--space-md);
}

.phil-highlight {
  color: var(--color-primary-deep);
  font-style: italic;
}

.phil-card > p {
  font-family: var(--type-body-md-font-family);
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-ink-70);
  margin-bottom: var(--space-md);
}

.phil-callout {
  margin: var(--space-lg) 0;
  padding: var(--space-lg);
  border-left: 2px solid var(--color-primary);
  border-top: 1px solid var(--color-hairline);
  border-right: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
}

.phil-callout h4 {
  font-family: var(--type-body-md-font-family);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-ink);
  margin-bottom: var(--space-sm);
}

.phil-callout h5 {
  font-family: var(--type-body-md-font-family);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-ink);
  margin: var(--space-md) 0 var(--space-sm);
}

.phil-callout p {
  font-family: var(--type-body-md-font-family);
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-ink-70);
  margin-bottom: var(--space-sm);
}

.phil-callout p:last-child {
  margin-bottom: 0;
}

.phil-list {
  list-style: none;
}

.phil-list li {
  position: relative;
  padding-left: 16px;
  font-family: var(--type-body-md-font-family);
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-ink-70);
  margin-bottom: var(--space-sm);
}

.phil-list li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: var(--color-primary);
}

.phil-code {
  margin: var(--space-lg) 0;
}

.phil-code h4 {
  font-family: var(--type-body-md-font-family);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-ink);
  margin-bottom: var(--space-sm);
}

.phil-code p {
  font-family: var(--type-body-md-font-family);
  font-size: 14px;
  color: var(--color-ink-70);
  margin-bottom: var(--space-md);
}

.code-block {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sharp);
  overflow: hidden;
  background: var(--color-ink);
}

.code-block-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid rgba(var(--color-primary-soft-rgb), 0.15);
}

.code-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(var(--color-canvas-rgb), 0.2);
}

.code-block-title {
  font-family: var(--type-nav-link-font-family);
  font-size: 11px;
  color: rgba(var(--color-canvas-rgb), 0.4);
  margin-left: var(--space-sm);
}

.code-block-body {
  margin: 0;
  padding: var(--space-md) var(--space-lg);
  font-family: var(--type-nav-link-font-family);
  font-size: 13px;
  line-height: 1.8;
  overflow-x: auto;
}

.code-selector { color: var(--color-primary-soft); }
.code-bracket { color: rgba(var(--color-canvas-rgb), 0.5); }
.code-property { color: var(--color-primary); }
.code-colon,
.code-semi { color: rgba(var(--color-canvas-rgb), 0.5); }
.code-value { color: var(--color-primary-soft); }

.mindset-cta-section {
  text-align: center;
  border-top: 1px solid var(--color-hairline);
}

.mindset-cta-content {
  max-width: 640px;
}

.mindset-cta-content .section-subtitle {
  margin: 0 auto var(--space-xl);
}

.mindset-cta-buttons {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
}

/* ==================================================================
   BLOG PAGE
   ================================================================== */

.blog-header {
  position: relative;
  padding: 160px 0 var(--space-xl);
  text-align: center;
  border-bottom: 1px solid var(--color-hairline);
  overflow: hidden;
}

.blog-header::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 1400px;
  height: 700px;
  background:
    radial-gradient(circle at 30% 30%, var(--color-primary-15), transparent 45%),
    radial-gradient(circle at 70% 20%, rgba(var(--color-primary-soft-rgb), 0.12), transparent 40%),
    radial-gradient(circle at 50% 60%, rgba(var(--color-cream-rgb), 0.9), transparent 60%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}

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

.blog-header__title {
  font-family: var(--type-display-hero-font-family);
  font-weight: var(--type-display-hero-font-weight);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: var(--space-sm);
}

.blog-header__subtitle {
  font-family: var(--type-body-lede-font-family);
  font-size: 17px;
  color: var(--color-ink-70);
}

.blog-header .section-label {
  font-family: var(--type-eyebrow-font-family);
  font-size: 12px;
  color: var(--color-primary-deep);
  letter-spacing: var(--type-eyebrow-letter-spacing);
  margin-bottom: var(--space-md);
}

/* ---- Blog index: featured post + excerpt grid ---- */

.blog-index {
  padding: var(--space-xxl) 0;
  border-bottom: 1px solid var(--color-hairline);
}

.blog-featured {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-lg);
  align-items: start;
  padding: var(--space-xl);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sharp);
  margin-bottom: var(--space-xxl);
  color: inherit;
  transition: border-color 0.2s ease;
}

.blog-featured:hover {
  border-color: var(--color-hairline-gold);
}

.blog-featured__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.blog-featured__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-featured__tag {
  font-family: var(--type-eyebrow-font-family);
  font-size: 11px;
  color: var(--color-primary-deep);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-sm);
}

.blog-featured h2 {
  font-family: var(--type-display-hero-font-family);
  font-weight: var(--type-display-hero-font-weight);
  font-size: 28px;
  line-height: 1.2;
  color: var(--color-ink);
  margin-bottom: var(--space-sm);
}

.blog-featured p {
  font-family: var(--type-body-md-font-family);
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-ink-70);
  max-width: 600px;
  margin-bottom: var(--space-md);
}

.blog-featured__meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.blog-featured__date {
  font-family: var(--type-eyebrow-font-family);
  font-size: 12px;
  color: var(--color-ink-45);
}

.blog-read-link {
  font-family: var(--type-body-md-font-family);
  font-weight: 500;
  font-size: 13px;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-primary-25);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.blog-featured:hover .blog-read-link {
  color: var(--color-primary-deep);
  border-color: var(--color-primary-deep);
}

.blog-index .section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-lg);
  padding: 0 4px;
}

.blog-index-label {
  font-family: var(--type-eyebrow-font-family);
  font-size: 12px;
  color: var(--color-primary-deep);
  letter-spacing: 0.05em;
}

.blog-index-count {
  font-family: var(--type-eyebrow-font-family);
  font-size: 12px;
  color: var(--color-ink-25);
}

.blog-index-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-hairline);
  border: 1px solid var(--color-hairline);
}

.blog-index-card {
  background: var(--color-canvas);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  color: inherit;
  transition: background-color 0.2s ease;
}

.blog-index-card:hover {
  background: var(--color-cream);
}

.blog-index-card__date {
  font-family: var(--type-eyebrow-font-family);
  font-size: 11px;
  color: var(--color-ink-25);
  margin-bottom: var(--space-md);
}

.blog-index-card h3 {
  font-family: var(--type-display-hero-font-family);
  font-weight: var(--type-display-hero-font-weight);
  font-size: 18px;
  line-height: 1.3;
  color: var(--color-ink);
  margin-bottom: var(--space-sm);
}

.blog-index-card p {
  font-family: var(--type-body-md-font-family);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-ink-45);
  margin-bottom: var(--space-md);
  flex: 1;
}

.blog-index-card__read {
  font-family: var(--type-eyebrow-font-family);
  font-size: 11px;
  color: var(--color-primary-deep);
  margin-top: auto;
}

@media (max-width: 900px) {
  .blog-index-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .blog-index-grid {
    grid-template-columns: 1fr;
  }

  .blog-featured {
    grid-template-columns: 1fr;
  }
}

.blog-feed {
  padding: var(--space-xxl) 0 var(--space-huge);
}

.blog-feed--single {
  padding-top: var(--space-xl);
}

.blog-post-page {
  padding: 140px 0 0;
}

.blog-back-link {
  display: inline-block;
  font-family: var(--type-eyebrow-font-family);
  font-size: 12px;
  color: var(--color-ink-45);
  transition: color 0.2s ease;
}

.blog-back-link:hover {
  color: var(--color-primary-deep);
}

.blog-latest-teaser {
  padding: var(--space-xl) 0 var(--space-xxl);
  border-top: 1px solid var(--color-hairline);
  margin-top: var(--space-xxl);
}

.blog-latest-card {
  display: block;
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-lg);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sharp);
  color: inherit;
  transition: border-color 0.2s ease;
}

.blog-latest-card:hover {
  border-color: var(--color-hairline-gold);
}

.blog-latest-card__label {
  font-family: var(--type-eyebrow-font-family);
  font-size: 11px;
  color: var(--color-primary-deep);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-sm);
}

.blog-latest-card h3 {
  font-family: var(--type-display-hero-font-family);
  font-weight: var(--type-display-hero-font-weight);
  font-size: 20px;
  line-height: 1.3;
  color: var(--color-ink);
  margin-bottom: var(--space-sm);
}

.blog-latest-card p {
  font-family: var(--type-body-md-font-family);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-ink-70);
  margin-bottom: var(--space-md);
}

.blog-latest-card:hover .blog-read-link {
  color: var(--color-primary-deep);
  border-color: var(--color-primary-deep);
}

.blog-feed__wrapper {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-huge);
}

.blog-post {
  padding-bottom: var(--space-huge);
  border-bottom: 1px solid var(--color-hairline);
}

.blog-post:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.blog-post__header {
  margin-bottom: var(--space-lg);
}

.blog-post__author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.blog-post__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.blog-post__author-name {
  font-family: var(--type-body-md-font-family);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-ink);
}

.blog-post__date {
  display: block;
  font-family: var(--type-eyebrow-font-family);
  font-size: 11px;
  color: var(--color-ink-45);
  letter-spacing: 0.03em;
  margin-top: 2px;
}

.blog-post__title {
  font-family: var(--type-display-section-font-family);
  font-weight: var(--type-display-section-font-weight);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: var(--space-lg);
}

.blog-post__body p {
  font-family: var(--type-body-md-font-family);
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-ink-70);
  margin-bottom: var(--space-md);
}

.blog-post__body p strong {
  color: var(--color-ink);
  font-weight: 600;
}

.blog-post__body h3 {
  font-family: var(--type-display-card-font-family);
  font-weight: var(--type-display-card-font-weight);
  font-size: 20px;
  color: var(--color-ink);
  margin: var(--space-lg) 0 var(--space-sm);
}

.blog-post__intro {
  font-size: 18px !important;
  color: var(--color-ink) !important;
}

.blog-post__highlight {
  padding: var(--space-md) var(--space-lg) !important;
  border-left: 2px solid var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.04);
  color: var(--color-ink) !important;
  font-weight: 500;
}

.blog-post__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-hairline);
}

.blog-post__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.blog-post__tag {
  font-family: var(--type-tag-font-family);
  font-size: var(--type-tag-font-size);
  padding: 5px 11px;
  border-radius: var(--radius-sharp);
  background: var(--color-primary-04);
  border: 1px solid var(--color-primary-15);
  color: var(--color-primary-deep);
}

.blog-post__share {
  display: flex;
  gap: var(--space-xs);
}

.blog-post__share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-hairline-gold);
  border-radius: 50%;
  background: transparent;
  color: var(--color-ink-45);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.blog-post__share-btn:hover {
  color: var(--color-primary-deep);
  border-color: var(--color-primary);
}

.blog-post__video-container {
  margin: var(--space-lg) 0;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sharp);
  overflow: hidden;
}

.blog-post__video-container video {
  width: 100%;
  display: block;
}

.blog-post__video-caption {
  font-family: var(--type-body-md-font-family) !important;
  font-size: 13px !important;
  font-style: italic;
  color: var(--color-ink-45) !important;
  text-align: center;
  margin: var(--space-sm) var(--space-md) !important;
}

.blog-post__link {
  color: var(--color-primary-deep);
  font-weight: 600;
  border-bottom: 1px solid var(--color-primary-25);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.blog-post__link:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* ==================================================================
   SHOWCASE PAGE — the mockups below intentionally break from the
   gold/ink palette: each one represents a DIFFERENT client's brand
   (burgundy barbershop, blue/yellow tech startup, pink/red event promo),
   so their colors are literal by design, not a token-discipline lapse.
   Only the page chrome around the mockups (header, section labels,
   tags, metrics) uses our real tokens.
   ================================================================== */

.sc-header {
  position: relative;
  padding: 160px 32px 64px;
  text-align: center;
  overflow: hidden;
}

.sc-header::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 1400px;
  height: 700px;
  background:
    radial-gradient(circle at 30% 30%, var(--color-primary-15), transparent 45%),
    radial-gradient(circle at 70% 20%, rgba(var(--color-primary-soft-rgb), 0.12), transparent 40%),
    radial-gradient(circle at 50% 60%, rgba(var(--color-cream-rgb), 0.9), transparent 60%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}

.sc-header > * {
  position: relative;
  z-index: 1;
}

.sc-title {
  font-family: var(--type-display-hero-font-family);
  font-weight: var(--type-display-hero-font-weight);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin: var(--space-md) 0 var(--space-md);
}

.sc-subtitle {
  font-family: var(--type-body-md-font-family);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-ink-70);
  max-width: 620px;
  margin: 0 auto var(--space-lg);
}

.sc-value-prop {
  font-family: var(--type-body-md-font-family);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-ink-45);
  max-width: 520px;
  margin: 0 auto;
}

.sc-lead {
  font-weight: 500;
  color: var(--color-ink);
}

.sc-accent {
  font-style: italic;
  color: var(--color-primary-deep);
}

.sc-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: var(--space-xl);
}

.sc-tab {
  font-family: var(--type-eyebrow-font-family);
  font-size: 12px;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-hairline);
  background: var(--color-canvas);
  color: var(--color-ink-45);
}

.sc-tab-barber {
  border-color: rgba(122, 46, 46, 0.35);
  color: #7a2e2e;
}

.sc-tab-tech {
  border-color: rgba(27, 58, 107, 0.4);
  color: #1b3a6b;
}

.sc-tab-events {
  border-color: rgba(225, 48, 108, 0.35);
  color: #c13584;
}

.sc-section {
  padding: var(--space-huge) 0;
  border-top: 1px solid var(--color-hairline);
}

.sc-section-label {
  font-family: var(--type-eyebrow-font-family);
  font-size: 12px;
  color: var(--color-primary-deep);
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.sc-section-title {
  font-family: var(--type-display-section-font-family);
  font-weight: var(--type-display-section-font-weight);
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  color: var(--color-ink);
}

.sc-featured-card {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sharp);
  overflow: hidden;
  margin-bottom: var(--space-xl);
}

.sc-featured-card:last-child {
  margin-bottom: 0;
}

/* Browser chrome */
.sc-browser-frame {
  background: #efede7;
}

.sc-browser-frame.sc-frame-tech {
  background: #e1e5ec;
}

.sc-browser-frame.sc-frame-tech .sc-browser-bar {
  background: #d3d9e3;
}

.sc-browser-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: #e5e2d8;
  border-bottom: 1px solid rgba(8, 8, 8, 0.06);
}

.sc-browser-dots {
  display: flex;
  gap: 8px;
}

.sc-browser-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.sc-browser-dots span:nth-child(1) { background: #ff5f57; }
.sc-browser-dots span:nth-child(2) { background: #febc2e; }
.sc-browser-dots span:nth-child(3) { background: #28c840; }

.sc-browser-url {
  font-family: var(--type-eyebrow-font-family);
  font-size: 11px;
  color: var(--color-ink-45);
  background: #ffffff;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  flex: 1;
  max-width: 280px;
}

/* Barber mockup — burgundy + ivory */
.sc-mock-site.sc-theme-barber {
  background: #2a0e10;
  text-align: center;
  padding: 48px 32px;
}

.sc-barber-wordmark {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 28px;
  color: #f4eadd;
  margin-bottom: 6px;
}

.sc-barber-sub {
  font-family: var(--type-body-md-font-family);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(244, 234, 221, 0.4);
  margin-bottom: 28px;
}

.sc-barber-rule {
  width: 60px;
  height: 1px;
  background: rgba(244, 234, 221, 0.25);
  margin: 0 auto 32px;
}

.sc-barber-menu {
  max-width: 320px;
  margin: 0 auto 32px;
  text-align: left;
}

.sc-barber-menu-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px dotted rgba(244, 234, 221, 0.15);
}

.sc-svc {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 16px;
  color: #f4eadd;
  white-space: nowrap;
}

.sc-leader {
  flex: 1;
  border-bottom: 1px dotted rgba(244, 234, 221, 0.2);
  transform: translateY(-4px);
}

.sc-price {
  font-family: var(--type-eyebrow-font-family);
  font-size: 14px;
  color: #c97b6b;
  white-space: nowrap;
}

.sc-barber-cta {
  display: inline-block;
  font-family: var(--type-body-md-font-family);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 12px 32px;
  border-radius: var(--radius-sharp);
  background: #7a2e2e;
  color: #f4eadd;
  margin-bottom: 32px;
}

.sc-barber-proof {
  color: rgba(244, 234, 221, 0.6);
  font-size: 12px;
  font-style: italic;
  max-width: 340px;
  margin: 0 auto;
  line-height: 1.6;
}

.sc-barber-proof .sc-stars {
  color: #c97b6b;
  font-style: normal;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 8px;
}

.sc-barber-proof .sc-who {
  display: block;
  font-family: var(--type-eyebrow-font-family);
  font-size: 10px;
  font-style: normal;
  opacity: 0.6;
  margin-top: 6px;
}

/* Tech mockup — electric blue/yellow */
.sc-mock-site.sc-theme-tech {
  background: #0b1e3d;
}

.sc-mock-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  border-bottom: 1px solid rgba(255, 200, 0, 0.12);
}

.sc-mock-logo {
  font-family: var(--type-body-md-font-family);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffc800;
}

.sc-mock-links {
  display: flex;
  gap: 24px;
  align-items: center;
}

.sc-mock-links a {
  font-family: var(--type-body-md-font-family);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

.sc-mock-cta {
  background: #ffc800;
  color: #0b1e3d;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  font-family: var(--type-body-md-font-family);
  font-size: 12px;
}

.sc-mock-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-xl);
  padding: 56px 32px;
  align-items: center;
}

.sc-mock-hero h3 {
  font-family: var(--type-display-hero-font-family);
  font-style: italic;
  font-weight: 300;
  font-size: 32px;
  color: #ffffff;
  margin: 0 0 14px;
  line-height: 1.15;
}

.sc-mock-hero p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin: 0 0 var(--space-lg);
  max-width: 340px;
}

.sc-mock-btns {
  display: flex;
  gap: var(--space-sm);
}

.sc-mock-btn-primary {
  font-family: var(--type-body-md-font-family);
  font-size: 12px;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  background: #ffc800;
  color: #0b1e3d;
}

.sc-mock-btn-ghost {
  font-family: var(--type-body-md-font-family);
  font-size: 12px;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 200, 0, 0.35);
  color: #ffc800;
}

.sc-mock-visual {
  height: 160px;
  border-radius: var(--radius-sharp);
  background: linear-gradient(135deg, rgba(255, 200, 0, 0.14), rgba(255, 255, 255, 0.03));
  display: flex;
  align-items: center;
  justify-content: center;
}

.sc-mock-visual i {
  font-size: 40px;
  color: rgba(255, 200, 0, 0.5);
}

.sc-mock-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.06);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sc-mock-card {
  background: #0b1e3d;
  padding: 24px;
  text-align: center;
}

.sc-mock-card h4 {
  font-family: var(--type-display-hero-font-family);
  font-weight: 300;
  font-size: 18px;
  color: #ffffff;
  margin: 0 0 6px;
}

.sc-mock-card span {
  font-family: var(--type-eyebrow-font-family);
  font-size: 12px;
  color: #ffc800;
}

.sc-mock-proof {
  padding: 22px 32px;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.65);
}

.sc-mock-proof .sc-stars {
  font-size: 11px;
  letter-spacing: 2px;
  flex-shrink: 0;
  color: #ffc800;
}

.sc-mock-proof p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  font-style: italic;
}

.sc-mock-proof .sc-who {
  font-family: var(--type-eyebrow-font-family);
  font-size: 10px;
  opacity: 0.5;
  margin-top: 4px;
  font-style: normal;
  display: block;
}

/* Events mockup — pink/red/violet flyer */
.sc-flyer-frame {
  background: linear-gradient(160deg, #0d0d0d, #1a0d1f);
  padding: 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.sc-flyer-frame::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(225, 48, 108, 0.22), transparent 60%);
  pointer-events: none;
}

.sc-flyer-frame::after {
  content: '';
  position: absolute;
  bottom: -120px;
  right: 10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(90, 169, 255, 0.16), transparent 60%);
  pointer-events: none;
}

.sc-flyer-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  border-bottom: 1px solid rgba(225, 48, 108, 0.15);
  position: relative;
}

.sc-flyer-navlogo {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 15px;
  color: #ffffff;
  letter-spacing: 0.04em;
}

.sc-flyer-navlogo span,
.sc-flyer-logo span {
  color: #e1306c;
}

.sc-flyer-navlinks {
  display: flex;
  gap: 22px;
  align-items: center;
}

.sc-flyer-navlinks a {
  font-family: var(--type-body-md-font-family);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}

.sc-flyer-cta-pill {
  background: linear-gradient(90deg, #c13584, #e1306c);
  color: #ffffff;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  font-family: var(--type-body-md-font-family);
  font-size: 12px;
}

.sc-flyer-hero {
  padding: 48px 32px 32px;
  position: relative;
}

.sc-flyer-logo {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 32px;
  color: #ffffff;
  letter-spacing: 0.03em;
  position: relative;
}

.sc-flyer-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(240, 180, 210, 0.85);
  margin: 18px 0 16px;
  position: relative;
}

.sc-flyer-meta {
  font-family: var(--type-eyebrow-font-family);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 2;
  position: relative;
}

.sc-flyer-cta {
  margin-top: var(--space-md);
  position: relative;
}

.sc-flyer-cta span {
  font-family: var(--type-body-md-font-family);
  font-weight: 500;
  font-size: 13px;
  background: linear-gradient(90deg, #c13584, #e1306c);
  color: #ffffff;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  display: inline-block;
}

.sc-flyer-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(225, 48, 108, 0.1);
  border-top: 1px solid rgba(225, 48, 108, 0.1);
  position: relative;
}

.sc-flyer-stat {
  background: #0d0d0d;
  padding: 22px;
  text-align: center;
}

.sc-flyer-stat .sc-num {
  font-family: var(--type-eyebrow-font-family);
  font-size: 20px;
  font-weight: 500;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.sc-flyer-stat .sc-lbl {
  font-family: var(--type-eyebrow-font-family);
  font-size: 10px;
  color: #e1306c;
  letter-spacing: 0.03em;
  display: block;
  margin-top: 4px;
}

.sc-flyer-lineup {
  padding: 24px 32px;
  border-top: 1px solid rgba(225, 48, 108, 0.12);
  position: relative;
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.sc-flyer-lineup span {
  font-family: 'Orbitron', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.03em;
}

.sc-flyer-lineup span.sc-headliner {
  color: rgba(255, 255, 255, 0.85);
}

/* Info panel below each mockup */
.sc-fc-info {
  padding: var(--space-xl);
  background: var(--color-canvas);
}

.sc-industry-name {
  font-family: var(--type-display-hero-font-family);
  font-weight: 300;
  font-size: 22px;
  color: var(--color-ink);
  margin: 0 0 14px;
}

.sc-challenge-solve {
  font-family: var(--type-body-md-font-family);
  font-size: 13px;
  color: var(--color-ink-45);
  line-height: 1.6;
  margin-bottom: 18px;
}

.sc-challenge-solve strong {
  color: var(--color-ink-70);
}

.sc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: 22px;
}

.sc-tag {
  font-family: var(--type-tag-font-family);
  font-size: var(--type-tag-font-size);
  padding: 5px 11px;
  border-radius: var(--radius-sharp);
  background: var(--color-primary-04);
  border: 1px solid var(--color-primary-15);
  color: var(--color-primary-deep);
}

.sc-accent-barber .sc-tag { background: rgba(122, 46, 46, 0.06); border-color: rgba(122, 46, 46, 0.22); color: #7a2e2e; }
.sc-accent-barber .sc-metric-value { color: #7a2e2e; }

.sc-accent-tech .sc-tag { background: rgba(255, 200, 0, 0.08); border-color: rgba(255, 200, 0, 0.3); color: #1b3a6b; }
.sc-accent-tech .sc-metric-value { color: #1b3a6b; }

.sc-accent-events .sc-tag { background: rgba(225, 48, 108, 0.06); border-color: rgba(225, 48, 108, 0.22); color: #c13584; }
.sc-accent-events .sc-metric-value { color: #c13584; }

.sc-metrics {
  display: flex;
  gap: var(--space-xl);
  padding-top: 18px;
  border-top: 1px solid var(--color-hairline);
}

.sc-metric-value {
  font-family: var(--type-eyebrow-font-family);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.sc-metric-label {
  font-family: var(--type-eyebrow-font-family);
  font-size: 10px;
  color: var(--color-ink-45);
  letter-spacing: 0.03em;
  display: block;
  margin-top: 4px;
}

/* Compact row list — 6 remaining industries */
.sc-rowlist {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sharp);
}

.sc-rowitem {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-hairline);
}

.sc-rowitem:last-child {
  border-bottom: none;
}

.sc-logo-badge {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sharp);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}

.sc-badge-realestate { background: #1b2a4a; color: #c9cdd6; font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600; }
.sc-badge-restaurant { background: #a65a34; color: #fff; font-family: 'DM Serif Display', serif; font-style: italic; }
.sc-badge-fitness { background: #e63946; color: #fff; font-family: 'Bebas Neue', sans-serif; }
.sc-badge-construction { background: #2b2622; color: #e88a2e; font-family: 'Bebas Neue', sans-serif; }
.sc-badge-cleaning { background: #4fb3e8; color: #fff; font-family: var(--type-display-hero-font-family); font-weight: 500; }
.sc-badge-lawncare { background: #3f7d4a; color: #fff; font-family: var(--type-display-hero-font-family); font-weight: 500; }

.sc-name {
  font-family: var(--type-display-hero-font-family);
  font-weight: 300;
  font-size: 19px;
  color: var(--color-ink);
}

.sc-challenge {
  font-family: var(--type-body-md-font-family);
  font-size: 12px;
  color: var(--color-ink-45);
  margin-top: 4px;
  max-width: 340px;
}

.sc-mini-metric {
  font-family: var(--type-eyebrow-font-family);
  font-size: 14px;
  text-align: right;
  white-space: nowrap;
}

.sc-mm-realestate { color: #1b2a4a; }
.sc-mm-restaurant { color: #a65a34; }
.sc-mm-fitness { color: #e63946; }
.sc-mm-construction { color: #b85f1f; }
.sc-mm-cleaning { color: #2c93c4; }
.sc-mm-lawncare { color: #3f7d4a; }

.sc-lbl2 {
  display: block;
  font-size: 9px;
  color: var(--color-ink-25);
  margin-top: 2px;
}

.sc-view {
  font-family: var(--type-eyebrow-font-family);
  font-size: 11px;
  color: var(--color-ink-45);
  border: 1px solid var(--color-hairline);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.sc-view:hover {
  color: var(--color-primary-deep);
  border-color: var(--color-primary);
}

@media (max-width: 600px) {
  .sc-featured-card {
    margin-left: -14px;
    margin-right: -14px;
  }
}

@media (max-width: 860px) {
  .sc-mock-hero {
    grid-template-columns: 1fr;
    padding: 40px 24px;
  }

  .sc-mock-hero h3 {
    font-size: 26px;
  }

  .sc-mock-nav {
    padding: 16px 20px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .sc-mock-links {
    gap: 14px;
    flex-wrap: wrap;
  }

  .sc-mock-links a {
    display: none;
  }

  .sc-mock-cards {
    grid-template-columns: 1fr;
  }

  .sc-browser-url {
    max-width: 160px;
  }

  .sc-flyer-nav {
    padding: 16px 20px;
  }

  .sc-flyer-navlinks a {
    display: none;
  }

  .sc-flyer-hero {
    padding: 36px 20px 24px;
  }

  .sc-flyer-title {
    font-size: 12px;
  }

  .sc-flyer-stats {
    grid-template-columns: 1fr;
  }

  .sc-rowitem {
    grid-template-columns: 40px 1fr;
    gap: 10px;
  }

  .sc-mini-metric {
    text-align: left;
    grid-column: 2;
  }

  .sc-view {
    grid-column: 2;
    justify-self: start;
  }
}

/* ==================================================================
   TIMELINE PAGE
   ================================================================== */

.tl-header {
  position: relative;
  padding: 160px 32px 64px;
  text-align: center;
  overflow: hidden;
}

.tl-header::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 1400px;
  height: 700px;
  background:
    radial-gradient(circle at 30% 30%, var(--color-primary-15), transparent 45%),
    radial-gradient(circle at 70% 20%, rgba(var(--color-primary-soft-rgb), 0.12), transparent 40%),
    radial-gradient(circle at 50% 60%, rgba(var(--color-cream-rgb), 0.9), transparent 60%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}

.tl-header > * {
  position: relative;
  z-index: 1;
}

.tl-header .section-label {
  font-family: var(--type-eyebrow-font-family);
  font-size: 12px;
  color: var(--color-primary-deep);
  letter-spacing: var(--type-eyebrow-letter-spacing);
  margin-bottom: var(--space-md);
}

.tl-title {
  font-family: var(--type-display-hero-font-family);
  font-weight: var(--type-display-hero-font-weight);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: var(--space-sm);
}

.tl-subtitle-lead {
  font-family: var(--type-display-card-font-family);
  font-style: italic;
  font-weight: 300;
  font-size: 19px;
  color: var(--color-primary-deep);
  margin-bottom: var(--space-lg);
}

.tl-header p:not(.tl-subtitle-lead) {
  font-family: var(--type-body-md-font-family);
  font-size: 14px;
  line-height: 1.75;
  color: var(--color-ink-70);
  max-width: 620px;
  margin: 0 auto var(--space-sm);
  text-align: left;
}

.tl-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 32px;
}

.tl-timeline {
  position: relative;
  padding: 20px 0 60px;
}

.tl-line {
  --fill: 0%;
  position: absolute;
  left: 52px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(to bottom, var(--color-primary-deep) 0%, var(--color-primary-deep) var(--fill), var(--color-hairline) var(--fill), var(--color-hairline) 100%);
}

.tl-item {
  position: relative;
  padding-left: 104px;
  margin-bottom: var(--space-xxl);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.tl-item.in-view {
  opacity: 1;
  transform: translateY(0);
}

.tl-item:last-child {
  margin-bottom: 0;
}

.tl-year {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  background: var(--color-primary-deep);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sharp);
  font-family: var(--type-eyebrow-font-family);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transform: scale(0.7);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tl-item.in-view .tl-year {
  transform: scale(1);
}

.tl-item h3 {
  font-family: var(--type-display-card-font-family);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.25;
  color: var(--color-ink);
  margin: 2px 0 var(--space-sm);
}

.tl-item > p {
  font-family: var(--type-body-md-font-family);
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-ink-70);
  margin-bottom: var(--space-md);
}

.tl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.tl-tag {
  font-family: var(--type-tag-font-family);
  font-size: var(--type-tag-font-size);
  padding: 5px 11px;
  border-radius: var(--radius-sharp);
  background: var(--color-primary-04);
  border: 1px solid var(--color-primary-15);
  color: var(--color-primary-deep);
}

.tl-cta {
  text-align: center;
  padding: var(--space-xxl) 32px;
  border-top: 1px solid var(--color-hairline);
  margin-top: var(--space-xl);
}

.tl-cta h3 {
  font-family: var(--type-display-hero-font-family);
  font-weight: var(--type-display-hero-font-weight);
  font-size: 26px;
  color: var(--color-ink);
  margin-bottom: var(--space-md);
}

.tl-cta p {
  font-family: var(--type-body-md-font-family);
  font-size: 14px;
  color: var(--color-ink-45);
  max-width: 440px;
  margin: 0 auto var(--space-xl);
  line-height: 1.6;
}

@media (max-width: 600px) {
  .tl-header {
    text-align: left;
  }

  .tl-subtitle-lead {
    text-align: left;
  }

  .tl-line {
    left: 36px;
  }

  .tl-item {
    padding-left: 64px;
  }

  .tl-year {
    width: 32px;
    height: 32px;
    font-size: 10px;
  }
}

/* ==================================================================
   AFFILIATE MARKETING PAGE
   ================================================================== */

.aff-header {
  position: relative;
  padding: 160px 32px 20px;
  text-align: center;
  overflow: hidden;
}

.aff-header::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 1400px;
  height: 700px;
  background:
    radial-gradient(circle at 30% 30%, var(--color-primary-15), transparent 45%),
    radial-gradient(circle at 70% 20%, rgba(var(--color-primary-soft-rgb), 0.12), transparent 40%),
    radial-gradient(circle at 50% 60%, rgba(var(--color-cream-rgb), 0.9), transparent 60%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}

.aff-header > * {
  position: relative;
  z-index: 1;
}

.aff-header .section-label {
  font-family: var(--type-eyebrow-font-family);
  font-size: 12px;
  color: var(--color-primary-deep);
  letter-spacing: var(--type-eyebrow-letter-spacing);
  margin-bottom: var(--space-md);
}

.aff-title {
  font-family: var(--type-display-hero-font-family);
  font-weight: var(--type-display-hero-font-weight);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: var(--space-md);
}

.aff-subtitle {
  font-family: var(--type-body-md-font-family);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-ink-45);
  max-width: 560px;
  margin: 0 auto;
}

.aff-story {
  max-width: 680px;
  margin: var(--space-xxl) auto var(--space-xxl);
  padding: 0 32px;
}

.aff-chapter-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--type-eyebrow-font-family);
  font-size: 11px;
  color: var(--color-primary-deep);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-md);
}

.aff-chapter-tag::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--color-primary-25);
}

.aff-story p {
  font-family: var(--type-body-md-font-family);
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-ink-70);
}

.aff-pullquote {
  margin: var(--space-xl) auto;
  padding: var(--space-lg) 32px;
  max-width: 680px;
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
  text-align: center;
}

.aff-pullquote p {
  font-family: var(--type-display-hero-font-family);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  color: var(--color-primary-deep);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.aff-mark {
  display: block;
  font-family: var(--type-eyebrow-font-family);
  font-size: 11px;
  color: var(--color-ink-25);
  letter-spacing: 0.05em;
  margin-top: var(--space-md);
}

.aff-hero-ctas {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  margin-top: var(--space-xl);
  flex-wrap: wrap;
}

.aff-btn-ghost {
  font-family: var(--type-eyebrow-font-family);
  font-size: 13px;
  color: var(--color-ink-70);
  display: inline-flex;
  align-items: center;
  padding: 13px 4px;
  border-bottom: 1px solid var(--color-primary-25);
  transition: color 0.2s ease;
}

.aff-btn-ghost:hover {
  color: var(--color-primary-deep);
}

.aff-section {
  padding: var(--space-huge) 0;
  border-top: 1px solid var(--color-hairline);
}

.aff-section-head {
  max-width: 600px;
  margin-bottom: var(--space-xxl);
}

.aff-label {
  font-family: var(--type-eyebrow-font-family);
  font-size: 12px;
  color: var(--color-primary-deep);
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.aff-section-head h2 {
  font-family: var(--type-display-section-font-family);
  font-weight: var(--type-display-section-font-weight);
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  color: var(--color-ink);
  margin-bottom: var(--space-sm);
}

.aff-section-head p {
  font-family: var(--type-body-md-font-family);
  font-size: 14px;
  color: var(--color-ink-45);
  line-height: 1.6;
}

/* Experience rows */
.aff-rowlist {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sharp);
}

.aff-rowitem {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-bottom: 1px solid var(--color-hairline);
}

.aff-rowitem:last-child {
  border-bottom: none;
}

.aff-age {
  font-family: var(--type-eyebrow-font-family);
  font-size: 12px;
  color: var(--color-ink-45);
  padding-top: 3px;
}

.aff-rowitem h3 {
  font-family: var(--type-display-card-font-family);
  font-style: italic;
  font-weight: 300;
  font-size: 19px;
  color: var(--color-ink);
  margin-bottom: var(--space-sm);
}

.aff-rowitem p {
  font-family: var(--type-body-md-font-family);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-ink-70);
  margin-bottom: var(--space-sm);
}

.aff-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.aff-tag {
  font-family: var(--type-tag-font-family);
  font-size: var(--type-tag-font-size);
  padding: 5px 11px;
  border-radius: var(--radius-sharp);
  background: var(--color-primary-04);
  border: 1px solid var(--color-primary-15);
  color: var(--color-primary-deep);
}

/* Services - tiered grid */
.aff-services-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1px;
  background: var(--color-hairline);
  border: 1px solid var(--color-hairline);
}

.aff-scard {
  background: var(--color-canvas);
  padding: var(--space-xl);
}

.aff-scard-tall {
  grid-row: span 3;
  display: flex;
  flex-direction: column;
}

.aff-scard-tag {
  font-family: var(--type-eyebrow-font-family);
  font-size: 11px;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}

.aff-scard h3 {
  font-family: var(--type-display-section-font-family);
  font-weight: var(--type-display-section-font-weight);
  font-size: 22px;
  color: var(--color-ink);
  margin-bottom: var(--space-sm);
}

.aff-scard p {
  font-family: var(--type-body-md-font-family);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-ink-70);
  margin-bottom: var(--space-md);
}

.aff-badge {
  font-family: var(--type-eyebrow-font-family);
  font-size: 10px;
  color: #ffffff;
  background: var(--color-primary-deep);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  display: inline-block;
  margin-top: auto;
  align-self: flex-start;
}

/* Niches - featured + compact */
.aff-niche-featured {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-hairline);
  border: 1px solid var(--color-hairline);
  margin-bottom: 1px;
}

.aff-ncard {
  background: var(--color-canvas);
  padding: var(--space-lg);
}

.aff-nicon {
  font-size: 20px;
  color: var(--color-primary-deep);
  margin-bottom: var(--space-md);
}

.aff-ncard h3 {
  font-family: var(--type-display-section-font-family);
  font-weight: var(--type-display-section-font-weight);
  font-size: 18px;
  color: var(--color-ink);
  margin-bottom: var(--space-sm);
}

.aff-ncard p {
  font-family: var(--type-body-md-font-family);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-ink-70);
  margin-bottom: var(--space-sm);
}

.aff-angle {
  font-family: var(--type-body-md-font-family);
  font-size: 12px;
  color: var(--color-primary-deep);
  line-height: 1.5;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-hairline);
}

.aff-angle strong {
  font-family: var(--type-eyebrow-font-family);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: block;
  margin-bottom: 4px;
  color: var(--color-ink-45);
}

.aff-niche-rows {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sharp);
}

.aff-nrow {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-hairline);
}

.aff-nrow:last-child {
  border-bottom: none;
}

.aff-emoji {
  font-size: 16px;
  color: var(--color-primary-deep);
}

.aff-name {
  font-family: var(--type-display-section-font-family);
  font-weight: var(--type-display-section-font-weight);
  font-size: 16px;
  color: var(--color-ink);
}

.aff-angle-tag {
  font-family: var(--type-eyebrow-font-family);
  font-size: 11px;
  color: var(--color-primary-deep);
  white-space: nowrap;
}

/* AI vs Creative split panel */
.aff-vs-panel {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sharp);
  overflow: hidden;
}

.aff-vs-side {
  padding: var(--space-xl);
}

.aff-vs-side.aff-vs-human {
  background: var(--color-ink);
  color: #ffffff;
}

.aff-vs-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  background: var(--color-canvas);
}

.aff-vs-divider span {
  font-family: var(--type-eyebrow-font-family);
  font-size: 11px;
  color: var(--color-ink-25);
  writing-mode: vertical-rl;
  letter-spacing: 0.1em;
}

.aff-vs-side h3 {
  font-family: var(--type-display-section-font-family);
  font-weight: var(--type-display-section-font-weight);
  font-size: 18px;
  color: inherit;
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.aff-vs-side.aff-vs-human h3 {
  color: #ffffff;
}

.aff-vs-side ul {
  list-style: none;
}

.aff-vs-side li {
  font-family: var(--type-body-md-font-family);
  font-size: 13px;
  line-height: 1.6;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-hairline);
}

.aff-vs-side.aff-vs-human li {
  border-bottom-color: rgba(var(--color-primary-rgb), 0.15);
  color: rgba(var(--color-primary-soft-rgb), 0.85);
}

.aff-vs-side:not(.aff-vs-human) li {
  color: var(--color-ink-45);
}

.aff-vs-side li:last-child {
  border-bottom: none;
}

/* CTA + stats */
.aff-cta-block {
  text-align: center;
  padding: var(--space-huge) 32px;
  border-top: 1px solid var(--color-hairline);
}

.aff-cta-block h2 {
  font-family: var(--type-display-section-font-family);
  font-weight: var(--type-display-section-font-weight);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: var(--color-ink);
  margin-bottom: var(--space-md);
}

.aff-cta-block > p {
  font-family: var(--type-body-md-font-family);
  font-size: 14px;
  color: var(--color-ink-45);
  max-width: 480px;
  margin: 0 auto var(--space-xxl);
  line-height: 1.6;
}

.aff-stats {
  display: flex;
  justify-content: center;
  gap: 1px;
  background: var(--color-hairline);
  border: 1px solid var(--color-hairline);
  max-width: 600px;
  margin: 0 auto var(--space-xxl);
}

.aff-stat {
  flex: 1;
  padding: var(--space-lg);
  background: var(--color-canvas);
  text-align: center;
}

.aff-stat-value {
  display: block;
  font-family: var(--type-eyebrow-font-family);
  font-size: 24px;
  font-weight: 500;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.aff-stat-label {
  display: block;
  font-family: var(--type-eyebrow-font-family);
  font-size: 10px;
  color: var(--color-ink-45);
  margin-top: 6px;
  line-height: 1.4;
}

@media (max-width: 860px) {
  .aff-services-grid {
    grid-template-columns: 1fr;
  }

  .aff-scard-tall {
    grid-row: auto;
  }

  .aff-niche-featured {
    grid-template-columns: 1fr;
  }

  .aff-vs-panel {
    grid-template-columns: 1fr;
  }

  .aff-vs-divider {
    padding: 12px;
  }

  .aff-vs-divider span {
    writing-mode: horizontal-tb;
  }

  .aff-stats {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .aff-header {
    padding: 140px 24px 16px;
  }

  .aff-story {
    padding: 0 24px;
    margin: var(--space-xl) auto var(--space-xl);
  }

  .aff-section > .container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .aff-rowitem {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
    padding: var(--space-lg);
  }

  .aff-age {
    padding-top: 0;
  }

  .aff-nrow {
    grid-template-columns: 24px 1fr;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
  }

  .aff-angle-tag {
    grid-column: 2;
    font-size: 10px;
    margin-top: 2px;
  }

  .aff-vs-side {
    padding: var(--space-lg);
  }

  .aff-scard {
    padding: var(--space-lg);
  }

  .aff-ncard {
    padding: var(--space-lg);
  }

  .aff-cta-block {
    padding: var(--space-xxl) 24px;
  }

  .aff-stat {
    padding: var(--space-md);
  }

  .aff-stat-value {
    font-size: 22px;
  }
}

/* ---------------------------------------------------------------- */
/* BOOKED (currently-fully-booked page)                              */
/* ---------------------------------------------------------------- */

.booked-section {
  padding-bottom: var(--space-huge);
}

.booked-hero-wrap {
  position: relative;
  padding-top: calc(var(--space-huge) + 60px);
  overflow: hidden;
}

.booked-hero-wrap::before {
  content: '';
  position: absolute;
  top: -220px;
  left: 50%;
  transform: translateX(-50%);
  width: 1400px;
  height: 700px;
  background:
    radial-gradient(circle at 30% 30%, var(--color-primary-15), transparent 45%),
    radial-gradient(circle at 70% 20%, var(--color-primary-08), transparent 40%),
    radial-gradient(circle at 50% 60%, rgba(var(--color-cream-rgb), 0.9), transparent 60%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}

.booked-container {
  position: relative;
  z-index: 1;
  max-width: 680px;
  text-align: center;
}

.booked-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--type-eyebrow-font-family);
  font-size: 12px;
  color: var(--color-primary-deep);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-md);
}

.booked-eyebrow::before {
  content: '';
  width: 16px;
  height: 1px;
  background: var(--color-primary-deep);
}

.booked-title {
  font-family: var(--type-display-section-font-family);
  font-weight: var(--type-display-section-font-weight);
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--color-ink);
  margin-bottom: var(--space-sm);
}

.booked-subtitle {
  font-family: var(--type-body-lede-font-family);
  font-size: 17px;
  color: var(--color-ink-70);
  margin-bottom: var(--space-md);
}

.booked-message {
  font-family: var(--type-body-md-font-family);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-ink-70);
  margin-bottom: var(--space-xxl);
}

.booked-message strong {
  color: var(--color-ink);
  font-weight: 600;
}

.booked-commitment-head {
  text-align: left;
  border-top: 1px solid var(--color-hairline);
  padding-top: var(--space-lg);
  margin-bottom: 0;
}

.booked-section-label {
  font-family: var(--type-eyebrow-font-family);
  font-size: 12px;
  color: var(--color-primary-deep);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
}

.booked-commitment-head p {
  font-family: var(--type-body-md-font-family);
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-ink-70);
}

.booked-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
  max-width: var(--content-max-width);
  margin: var(--space-lg) auto var(--space-huge);
}

.booked-stat {
  padding: var(--space-md) var(--page-gutter);
  border-right: 1px solid var(--color-hairline);
  text-align: left;
}

.booked-stat:last-child {
  border-right: none;
}

.booked-stat-index {
  font-family: var(--type-eyebrow-font-family);
  font-size: 11px;
  color: var(--color-primary);
  margin-bottom: 10px;
}

.booked-stat-desc {
  font-family: var(--type-body-md-font-family);
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-ink-70);
}

.booked-next-steps {
  margin-bottom: var(--space-xl);
  text-align: center;
}

.booked-next-steps .booked-section-label {
  text-align: center;
}

.booked-next-steps h3 {
  font-family: var(--type-display-card-font-family);
  font-weight: var(--type-display-card-font-weight);
  font-size: 22px;
  color: var(--color-ink);
  margin-bottom: var(--space-sm);
}

.booked-next-steps > p {
  font-family: var(--type-body-md-font-family);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-ink-70);
  margin-bottom: var(--space-lg);
}

.booked-cta-buttons {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

.booked-availability-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  border: 1px solid var(--color-hairline-gold);
  border-radius: var(--radius-sharp);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--type-body-md-font-family);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-ink-70);
  background: var(--color-primary-04);
}

.booked-availability-note i {
  color: var(--color-primary-deep);
  margin-top: 2px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .booked-section {
    padding-bottom: var(--space-xxl);
  }

  .booked-hero-wrap {
    padding-top: calc(var(--space-xxl) + 50px);
  }

  .booked-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .booked-stat:nth-child(2) {
    border-right: none;
  }

  .booked-stat:nth-child(3),
  .booked-stat:nth-child(4) {
    border-top: 1px solid var(--color-hairline);
  }

  .booked-cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .booked-cta-buttons a {
    justify-content: center;
  }
}

/* ---------------------------------------------------------------- */
/* QUESTIONNAIRE (qz - quick questions flow)                         */
/* ---------------------------------------------------------------- */

.qz-section {
  padding: calc(var(--space-huge) + 60px) 0 var(--space-huge);
  min-height: 100vh;
}

.qz-container {
  max-width: 640px;
}

.qz-card {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sharp);
  padding: var(--space-xl);
  background: var(--color-canvas);
  position: relative;
  overflow: hidden;
}

.qz-progress-bar {
  width: 100%;
  height: 4px;
  background: var(--color-hairline);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: var(--space-xl);
}

.qz-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  transition: width 0.5s ease;
}

.qz-title {
  font-family: var(--type-display-card-font-family);
  font-weight: var(--type-display-card-font-weight);
  font-size: 26px;
  color: var(--color-ink);
  margin-bottom: var(--space-xs);
  text-align: center;
}

.qz-subtitle {
  font-family: var(--type-body-md-font-family);
  font-size: 14px;
  color: var(--color-ink-45);
  text-align: center;
  margin-bottom: var(--space-xl);
}

.qz-question {
  display: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.qz-question.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.qz-question-title {
  font-family: var(--type-body-lede-font-family);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.4;
  color: var(--color-ink);
  margin-bottom: var(--space-lg);
}

.qz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qz-option {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--type-body-md-font-family);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-ink-70);
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sharp);
  padding: 14px var(--space-md);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.qz-option strong {
  color: var(--color-ink);
  font-weight: 600;
}

.qz-option:hover {
  border-color: var(--color-hairline-gold);
  background: var(--color-primary-04);
}

.qz-option.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-08);
}

.qz-thanks {
  display: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  text-align: center;
}

.qz-thanks.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.qz-thanks-title {
  font-family: var(--type-display-card-font-family);
  font-weight: var(--type-display-card-font-weight);
  font-size: 26px;
  color: var(--color-ink);
  margin-bottom: var(--space-sm);
}

.qz-thanks-message {
  font-family: var(--type-body-md-font-family);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-ink-70);
  margin-bottom: var(--space-lg);
}

.qz-summary {
  text-align: left;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sharp);
  padding: var(--space-md);
  background: var(--color-cream);
  margin-bottom: var(--space-lg);
}

.qz-summary h4 {
  font-family: var(--type-eyebrow-font-family);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
  margin-bottom: 10px;
}

.qz-summary p {
  font-family: var(--type-body-md-font-family);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-ink-70);
  margin-bottom: 6px;
}

.qz-summary p strong {
  color: var(--color-ink);
  font-weight: 600;
}

.qz-redirect {
  font-family: var(--type-eyebrow-font-family);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--color-ink-45);
}

.qz-loading-dots::after {
  content: '';
  animation: qzLoadingDots 1.2s steps(4, end) infinite;
}

@keyframes qzLoadingDots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
  100% { content: ''; }
}

@media (max-width: 768px) {
  .qz-section {
    padding: calc(var(--space-xxl) + 50px) 0 var(--space-xxl);
  }

  .qz-card {
    padding: var(--space-lg);
  }

  .qz-title {
    font-size: 22px;
  }

  .qz-question-title {
    font-size: 17px;
  }
}