/* ============================================================
   erikalenz.com — Global Styles
   Design philosophy: warm, approachable, credible, minimal.
   Mobile-first. WCAG 2.1 AA compliant.
   ============================================================ */

/* --- Custom Properties (Design Tokens) --- */
:root {
  /* Warm neutral palette — kitchen-table warmth, not corporate cold */
  --color-cream:       #FAF7F2;
  --color-warm-white:  #FFFFFF;
  --color-sand:        #E8E0D4;
  --color-clay:        #C4B5A2;
  --color-walnut:      #5C4A3A;
  --color-espresso:    #3A2E25;
  --color-charcoal:    #2C2420;

  /* Accent — a grounded teal-green, not techy-blue */
  --color-sage:        #6B8F71;
  --color-sage-dark:   #4E7054;
  --color-sage-light:  #E8F0E9;
  --color-sage-bright: #A9CDB1; /* luminous sage for text on dark backgrounds */
  --color-marigold:    #E8A33D; /* warm, bright accent for announcement banners */
  --color-marigold-dark: #D6922E;

  /* Functional */
  --color-text:        var(--color-espresso);
  --color-text-light:  var(--color-walnut);
  --color-bg:          var(--color-cream);
  --color-bg-alt:      var(--color-warm-white);
  --color-border:      var(--color-sand);
  --color-accent:      var(--color-sage);
  --color-accent-hover:var(--color-sage-dark);

  /* Typography — Libre Baskerville for warmth + credibility,
     Source Sans 3 for clean readability */
  --font-heading: 'Libre Baskerville', 'Georgia', serif;
  --font-body:    'Source Sans 3', 'Segoe UI', sans-serif;

  /* Spacing scale */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  /* Layout */
  --max-width: 68rem;
  --max-width-narrow: 42rem;

  /* Transitions */
  --transition: 0.25s ease;
}


/* --- Reset & Base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Mobile: slightly smaller base font for better readability */
@media (max-width: 40rem) {
  body {
    font-size: 1rem;
  }
}

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

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition);
}

a:hover,
a:focus-visible {
  color: var(--color-accent-hover);
}

a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}


/* --- Typography --- */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-charcoal);
  line-height: 1.25;
  font-weight: 400;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  margin-bottom: var(--space-md);
}

h3 {
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  margin-bottom: var(--space-sm);
}

p {
  margin-bottom: var(--space-sm);
}

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

.lead {
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--color-text-light);
}

strong {
  font-weight: 600;
  color: var(--color-charcoal);
}

blockquote {
  border-left: 3px solid var(--color-sage);
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-md) 0;
  font-style: italic;
  color: var(--color-text-light);
  background-color: var(--color-sage-light);
  border-radius: 0 6px 6px 0;
}

blockquote cite {
  display: block;
  margin-top: var(--space-xs);
  font-style: normal;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-charcoal);
}


/* --- Layout --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.container--narrow {
  max-width: var(--max-width-narrow);
}

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

section + section {
  border-top: 1px solid var(--color-border);
}

.section-alt {
  background-color: var(--color-bg-alt);
}

/* Mobile: reduce section padding */
@media (max-width: 40rem) {
  section {
    padding: var(--space-lg) 0;
  }

  .container {
    padding: 0 var(--space-sm);
  }
}


/* --- Navigation --- */
.site-nav {
  padding: var(--space-sm) 0;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-nav .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}

.site-nav__name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-charcoal);
  text-decoration: none;
  font-weight: 400;
}

.site-nav__name:hover {
  color: var(--color-accent);
}

.site-nav__links {
  display: flex;
  gap: var(--space-sm);
  list-style: none;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.site-nav__links a {
  text-decoration: none;
  color: var(--color-text-light);
  font-size: 0.85rem;
  font-weight: 400;
  transition: color var(--transition);
  padding: 0.25rem 0.5rem;
}

.site-nav__links a:hover,
.site-nav__links a:focus-visible {
  color: var(--color-accent);
}

/* --- Mobile Menu Toggle --- */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.75rem;
  cursor: pointer;
  z-index: 101;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.mobile-menu-toggle:active {
  opacity: 0.7;
}

.hamburger {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-charcoal);
  position: relative;
  transition: background-color 0.3s ease;
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 2px;
  background-color: var(--color-charcoal);
  transition: transform 0.3s ease;
}

.hamburger::before {
  top: -7px;
}

.hamburger::after {
  top: 7px;
}

/* Animate to X when menu is open */
.mobile-menu-toggle[aria-expanded="true"] .hamburger {
  background-color: transparent;
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger::before {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger::after {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile navigation */
@media (max-width: 40rem) {
  .mobile-menu-toggle {
    display: block;
  }

  .site-nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    gap: 0;
    padding: var(--space-sm) 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .site-nav__links.is-open {
    display: flex;
  }

  .site-nav__links li {
    text-align: center;
    border-bottom: 1px solid var(--color-border);
  }

  .site-nav__links li:last-child {
    border-bottom: none;
  }

  .site-nav__links a {
    display: block;
    padding: var(--space-sm);
    font-size: 1rem;
  }
}


/* --- Hero --- */
.hero {
  padding: var(--space-2xl) 0;
  border-top: none;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
}

.hero__content {
  max-width: 40rem;
}

.hero__tagline {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-sage);
  margin-bottom: var(--space-sm);
}

.hero h1 {
  margin-bottom: var(--space-md);
  max-width: 28ch;
  text-wrap: balance;
}

.hero .lead {
  margin-bottom: var(--space-lg);
}

.hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.hero__image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero__image img {
  width: 100%;
  max-width: 14rem;
  border-radius: 12px;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  background-color: var(--color-sand);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Mobile: stack vertically, center content */
@media (max-width: 40rem) {
  .hero {
    padding: var(--space-lg) 0;
  }

  .hero__inner {
    gap: var(--space-md);
  }

  .hero__image img {
    max-width: 12rem;
  }
}

/* Desktop: side-by-side layout */
@media (min-width: 52rem) {
  .hero__inner {
    grid-template-columns: 1fr 16rem;
    gap: var(--space-xl);
  }

  .hero__image {
    justify-content: flex-end;
  }

  .hero__image img {
    max-width: 16rem;
  }
}


/* --- Buttons --- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  padding: 0.85rem 2rem;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition);
  border: 2px solid transparent;
  line-height: 1.2;
  text-align: center;
}

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

.btn--primary {
  background-color: var(--color-sage);
  color: var(--color-warm-white);
  border-color: var(--color-sage);
}

.btn--primary:hover {
  background-color: var(--color-sage-dark);
  border-color: var(--color-sage-dark);
  color: var(--color-warm-white);
}

.btn--secondary {
  background-color: transparent;
  color: var(--color-sage);
  border-color: var(--color-sage);
}

.btn--secondary:hover {
  background-color: var(--color-sage);
  color: var(--color-warm-white);
}

/* Mobile: full-width buttons for better touch targets */
@media (max-width: 40rem) {
  .btn {
    display: block;
    width: 100%;
    padding: 1rem;
  }
}


/* --- Problem / Value Section --- */
.value-section p + p {
  margin-top: var(--space-sm);
}

.value-section h2 {
  margin-bottom: var(--space-md);
}


/* --- Stats / Evidence Row --- */
.evidence-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.evidence-card {
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-md);
}

.evidence-card__stat {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: var(--color-sage);
  line-height: 1;
  margin-bottom: var(--space-xs);
}

.evidence-card__text {
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 1.5;
}

.evidence-card__source {
  font-size: 0.8rem;
  color: var(--color-clay);
  margin-top: var(--space-xs);
}

@media (min-width: 40rem) {
  .evidence-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 60rem) {
  .evidence-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* --- Approach / Methodology --- */
.approach-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.approach-card {
  padding: var(--space-md);
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg);
}

.approach-card__icon {
  font-size: 1.75rem;
  margin-bottom: var(--space-xs);
}

.approach-card h3 {
  font-size: 1.1rem;
  margin-bottom: var(--space-xs);
}

.approach-card p {
  font-size: 1rem;
  color: var(--color-text-light);
}

@media (min-width: 52rem) {
  .approach-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* --- About / Credibility --- */
.about-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: start;
}

.about-layout__image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.about-layout__image img {
  width: 100%;
  max-width: 20rem;
  border-radius: 12px;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  background-color: var(--color-sand);
}

/* Mobile: smaller images in about section */
@media (max-width: 40rem) {
  .about-layout__image img {
    max-width: 14rem;
  }
}

@media (min-width: 52rem) {
  .about-layout {
    grid-template-columns: 0.4fr 0.6fr;
  }

  .about-layout__image {
    gap: var(--space-lg);
  }
}


/* --- Kitchen Table AI Layout --- */
.kta-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: start;
}

.kta-layout__image {
  display: flex;
  justify-content: center;
}

.kta-layout__image img {
  width: 100%;
  max-width: 22rem;
  border-radius: 12px;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  background-color: var(--color-sand);
}

@media (max-width: 40rem) {
  .kta-layout__image img {
    max-width: 14rem;
  }
}

@media (min-width: 52rem) {
  .kta-layout {
    grid-template-columns: 0.6fr 0.4fr;
  }
}


/* --- Approach Section Intro Layout --- */
.approach-intro-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: start;
  margin-bottom: var(--space-xl);
}

.approach-intro-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.approach-intro-image img {
  width: 100%;
  max-width: 24rem;
  height: auto;
  border-radius: 12px;
  object-fit: contain;
}

@media (min-width: 52rem) {
  .approach-intro-layout {
    grid-template-columns: 0.6fr 0.4fr;
    gap: var(--space-xl);
    align-items: center;
  }
}


/* --- Testimonials --- */
.testimonial {
  max-width: var(--max-width-narrow);
  margin: 0 auto;
  text-align: center;
  padding: var(--space-lg) 0;
}

.testimonial blockquote {
  border-left: none;
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.65;
  background: none;
  padding: 0;
}

.testimonial blockquote::before {
  content: "\201C";
  display: block;
  font-family: var(--font-heading);
  font-size: 4rem;
  color: var(--color-sage);
  line-height: 0.8;
  margin-bottom: var(--space-xs);
}


/* --- Workshop Testimonials (workshops.html) --- */
.workshop-testimonials {
  padding: var(--space-xl) 0;
  background: var(--color-warm-white);
}

.workshop-testimonials__heading {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.workshop-testimonials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  max-width: 58rem;
  margin: 0 auto;
}

@media (min-width: 52rem) {
  .workshop-testimonials__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.workshop-testimonial-card {
  background: var(--color-cream);
  border-radius: 1rem;
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.workshop-testimonial-card__rating {
  margin-bottom: var(--space-sm);
  line-height: 1;
}

.workshop-testimonial-card__rating .rating-number {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--color-sage);
}

.workshop-testimonial-card__rating .rating-separator {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  color: var(--color-clay);
  margin: 0 0.15em;
  vertical-align: 0.4em;
}

.workshop-testimonial-card__rating .rating-total {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-clay);
  vertical-align: 0.4em;
}

.workshop-testimonial-card blockquote {
  border-left: none;
  background: none;
  padding: 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-light);
  font-style: italic;
}

.workshop-testimonial-card blockquote p {
  margin: 0;
}


/* --- Client Logos --- */
.logos-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

.logos-strip img {
  height: 2.5rem;
  width: auto;
  opacity: 0.55;
  filter: grayscale(100%);
  transition: opacity var(--transition), filter var(--transition);
}

.logos-strip img:hover {
  opacity: 0.85;
  filter: grayscale(0%);
}

/* Mobile: smaller logos and tighter spacing */
@media (max-width: 40rem) {
  .logos-strip {
    gap: var(--space-sm);
  }

  .logos-strip img {
    height: 1.8rem;
  }
}

/* Placeholder logos (remove when real logos added) */
.logo-placeholder {
  height: 2.5rem;
  width: 7rem;
  background-color: var(--color-sand);
  border-radius: 4px;
  opacity: 0.5;
}


/* --- CTA Banner --- */
.cta-banner {
  text-align: center;
  background-color: var(--color-charcoal);
  color: var(--color-cream);
  padding: var(--space-xl) 0;
  border-top: none;
}

.cta-banner h2 {
  color: var(--color-cream);
  margin-bottom: var(--space-sm);
}

.cta-banner p {
  color: var(--color-clay);
  font-size: 1.1rem;
  margin-bottom: var(--space-lg);
}

.cta-banner .btn--primary {
  font-size: 1.1rem;
  padding: 1rem 2.5rem;
}


/* --- Footer --- */
.site-footer {
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--color-border);
  font-size: 0.9rem;
  color: var(--color-text-light);
}

.site-footer .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: center;
  text-align: center;
}

.site-footer a {
  color: var(--color-text-light);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-accent);
}

/* LinkedIn link styling */
.site-footer .linkedin-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.site-footer .linkedin-icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

.site-footer .linkedin-link:hover .linkedin-icon {
  transform: translateY(-2px);
}

@media (min-width: 40rem) {
  .site-footer .container {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-xl);
    text-align: left;
  }
}


/* --- Utility: Screen-reader only --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* --- Animations (subtle, purposeful per design principles) --- */
@media (prefers-reduced-motion: no-preference) {
  .fade-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respects users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fade-in {
    opacity: 1;
    transform: none;
  }
}


/* ============================================================
   Kitchen Table AI Pages - Specific Styles
   ============================================================ */

/* Announcement banner — sits above the sticky nav, scrolls away
   normally; the nav takes over the top-of-viewport position once
   the reader scrolls past it. */
.ktai-announcement-banner {
  display: block;
  background: var(--color-marigold);
  color: var(--color-espresso);
  text-align: center;
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  transition: background var(--transition);
}

.ktai-announcement-banner:hover,
.ktai-announcement-banner:focus-visible {
  background: var(--color-marigold-dark);
}

.ktai-announcement-banner p {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
}

.ktai-announcement-banner strong {
  color: inherit;
}

/* When the banner sits directly under the header, close the header's
   bottom margin and hide its decorative underline (which would
   otherwise poke out over the banner's top edge) so the two sit flush. */
.ktai-header:has(+ .ktai-announcement-banner) {
  margin-bottom: 0;
}

.ktai-header:has(+ .ktai-announcement-banner)::after {
  display: none;
}

/* Kitchen Table Header with Decorative Underline */
.ktai-header {
  text-align: center;
  padding: var(--space-xl) var(--space-md) var(--space-lg);
  background: linear-gradient(135deg, var(--color-walnut) 0%, var(--color-clay) 100%);
  color: var(--color-cream);
  margin-bottom: var(--space-lg);
  position: relative;
}

.ktai-header::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: var(--color-sage);
}

.ktai-header h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 2.8rem);
  margin-bottom: var(--space-xs);
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--color-cream);
}

.ktai-header .tagline {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-style: italic;
  opacity: 0.9;
}

/* Intro Section with Accent Border */
.ktai-intro {
  background: var(--color-warm-white);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  border-left: 6px solid var(--color-sage);
  /* New block formatting context so the section wraps the floated photo */
  display: flow-root;
}

.ktai-intro p {
  font-size: 1.1rem;
  margin-bottom: var(--space-sm);
  line-height: 1.7;
}

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

.ktai-intro-photo {
  float: right;
  width: 45%;
  max-width: 260px;
  height: auto;
  margin: 0 0 var(--space-sm) var(--space-md);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

@media (max-width: 40rem) {
  .ktai-intro-photo {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0 0 var(--space-sm);
  }
}

/* Two Column Grid for Photo + Details */
.ktai-two-column {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

@media (min-width: 52rem) {
  .ktai-two-column {
    grid-template-columns: 1fr 1fr;
  }
}

/* Photo Section */
.ktai-photo {
  background: var(--color-warm-white);
  padding: var(--space-md);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  text-align: center;
}

.ktai-photo img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: var(--space-sm);
  border-radius: 8px;
}

.ktai-photo-caption {
  font-style: italic;
  color: var(--color-text-light);
  font-size: 0.9rem;
}

/* Details Section */
.ktai-details {
  background: var(--color-warm-white);
  padding: var(--space-lg);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.ktai-details h2 {
  color: var(--color-walnut);
  margin-bottom: var(--space-md);
  font-size: 1.8rem;
  font-weight: 400;
}

.ktai-detail-item {
  position: relative;
  padding: var(--space-sm) 0 var(--space-sm) 6.5rem;
  border-bottom: 1px solid var(--color-border);
}

.ktai-detail-item:last-child {
  border-bottom: none;
}

.ktai-detail-item strong {
  color: var(--color-walnut);
  /* Label column: out of flow so the value text (and its wrapped lines)
     all start at the item's 6.5rem left padding */
  position: absolute;
  left: 0;
}

/* Payment buttons within detail items */
.payment-button {
  display: inline-block;
  margin-top: var(--space-xs);
  padding: 0.65rem 1.5rem;
  background-color: var(--color-sage);
  color: var(--color-warm-white);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 6px;
  transition: all var(--transition);
  border: 2px solid var(--color-sage);
}

.payment-button:hover {
  background-color: var(--color-sage-dark);
  border-color: var(--color-sage-dark);
  color: var(--color-warm-white);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(107, 143, 113, 0.3);
}

.payment-button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

@media (max-width: 40rem) {
  .payment-button {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: var(--space-sm);
  }
}

/* Topics Section - Dark Background */
.ktai-topics {
  background: var(--color-charcoal);
  color: var(--color-cream);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.ktai-topics h2 {
  color: var(--color-cream);
  margin-bottom: var(--space-md);
  font-size: 1.8rem;
  font-weight: 400;
}

.ktai-topics p {
  margin-bottom: var(--space-sm);
  line-height: 1.8;
}

.ktai-topics strong {
  color: inherit;
}

.ktai-topics .ktai-thesis {
  font-size: 1.15rem;
  color: var(--color-sage-bright);
}

/* Considerations/Important Notes */
.ktai-considerations {
  background: var(--color-sage-light);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  border: 2px solid var(--color-sage);
}

.ktai-considerations h2 {
  color: var(--color-walnut);
  margin-bottom: var(--space-md);
  font-size: 1.8rem;
  font-weight: 400;
}

.ktai-considerations p {
  margin-bottom: var(--space-sm);
  padding-left: 25px;
  position: relative;
}

.ktai-considerations p::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-sage);
  font-size: 1.5em;
  line-height: 1;
}

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

/* Subscription-format sections (What's Changing / Outcomes / The Deal) */
.ktai-changes,
.ktai-outcomes,
.ktai-deal {
  background: var(--color-warm-white);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.ktai-deal {
  border-left: 6px solid var(--color-sage);
}

.ktai-changes h2,
.ktai-outcomes h2,
.ktai-deal h2 {
  color: var(--color-walnut);
  margin-bottom: var(--space-md);
  font-size: 1.8rem;
  font-weight: 400;
}

.ktai-changes p,
.ktai-outcomes p,
.ktai-deal p {
  margin-bottom: var(--space-sm);
  line-height: 1.7;
}

.ktai-changes p:last-child,
.ktai-outcomes p:last-child,
.ktai-deal p:last-child {
  margin-bottom: 0;
}

.ktai-changes ul,
.ktai-outcomes ul,
.ktai-topics ul {
  margin: 0 0 var(--space-sm);
  padding-left: 1.4rem;
}

.ktai-changes li,
.ktai-outcomes li,
.ktai-topics li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

.ktai-changes li::marker,
.ktai-outcomes li::marker,
.ktai-topics li::marker {
  color: var(--color-sage);
}

.ktai-changes ul ul {
  margin: 0.5rem 0 0;
}

.ktai-same-table {
  font-style: italic;
  color: var(--color-walnut);
}

/* Decorative callout for the meeting cadence + session agenda */
.ktai-agenda-box {
  background: var(--color-sage-light);
  border: 2px solid var(--color-sage);
  border-radius: 8px;
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-sm) 0 var(--space-md);
  /* New block formatting context so the box's border/background wraps the float */
  display: flow-root;
}

.ktai-agenda-cadence {
  margin: 0 0 var(--space-sm);
  line-height: 1.7;
}

.ktai-agenda-box h3 {
  color: var(--color-walnut);
  font-size: 1.15rem;
  font-weight: 400;
  margin: 0 0 0.5rem;
}

.ktai-agenda-box ul {
  margin: 0;
  padding-left: 1.4rem;
}

.ktai-agenda-box li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

.ktai-agenda-box li:last-child {
  margin-bottom: 0;
}

.ktai-agenda-box li::marker {
  color: var(--color-sage-dark);
}

.ktai-subscribe-again {
  text-align: center;
  margin-bottom: var(--space-lg);
}

/* Fit the shared testimonial component into KTAI's card rhythm — on
   workshops.html this section provides its own full-bleed container;
   here it's nested inside the page's single outer .container, so it
   just needs the same shadowed-card treatment as its sibling sections. */
.ktai-testimonials-card {
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  margin-bottom: var(--space-lg);
  border-radius: 4px;
}

/* Content Agreement page */
.agreement-text {
  background: var(--color-warm-white);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  border-left: 6px solid var(--color-sage);
}

.agreement-text h2 {
  color: var(--color-walnut);
  font-size: 1.4rem;
  font-weight: 400;
  margin: var(--space-md) 0 var(--space-xs);
}

.agreement-text h2:first-child {
  margin-top: 0;
}

.agreement-text p {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

.agreement-text h3 {
  color: var(--color-walnut);
  font-size: 1.1rem;
  font-weight: 600;
  margin: var(--space-sm) 0 var(--space-xs);
}

.agreement-text ul {
  margin: 0 0 var(--space-sm);
  padding-left: 1.4rem;
}

.agreement-text li {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 0.5rem;
}

.agreement-text li::marker {
  color: var(--color-sage);
}

.agreement-closing {
  font-style: italic;
  color: var(--color-walnut);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-sm);
  margin-top: var(--space-md) !important;
}

.agreement-meta {
  font-size: 0.85rem;
  color: var(--color-text-light);
  margin-bottom: 0 !important;
}

.agreement-form-section {
  background: var(--color-warm-white);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.agreement-form-section h2 {
  color: var(--color-walnut);
  font-size: 1.8rem;
  font-weight: 400;
  margin-bottom: var(--space-sm);
}

.agreement-privacy-link {
  margin: 0 0 var(--space-sm);
  font-size: 0.95rem;
}

.agreement-form-intro {
  margin-bottom: var(--space-lg);
  color: var(--color-text-light);
}

.agreement-date-display {
  font-size: 1rem;
  color: var(--color-text);
  margin: 0;
  padding: 0.6rem 0;
}

.signature-field {
  margin-bottom: var(--space-xs);
}

.signature-pad-wrapper {
  position: relative;
  max-width: 30rem;
  border: 2px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-warm-white);
  overflow: hidden;
}

.signature-pad-wrapper canvas {
  display: block;
  width: 100%;
  height: 150px;
  cursor: crosshair;
  /* "Sign here" baseline */
  border-bottom: 2px solid var(--color-clay);
}

.signature-clear-btn {
  display: block;
  margin-top: var(--space-xs);
  padding: 0.4rem 0.9rem;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-light);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--transition);
}

.signature-clear-btn:hover {
  border-color: var(--color-sage);
  color: var(--color-sage-dark);
}

/* Form Section */
.ktai-form {
  background: var(--color-warm-white);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.ktai-form h2 {
  color: var(--color-walnut);
  margin-bottom: var(--space-sm);
  font-size: 1.8rem;
  font-weight: 400;
}

.ktai-form-intro {
  margin-bottom: var(--space-lg);
  font-style: italic;
  color: var(--color-text-light);
}

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

.ktai-form label {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--color-walnut);
  font-weight: 600;
  font-family: var(--font-body);
}

.ktai-form input[type="text"],
.ktai-form input[type="email"],
.ktai-form input[type="tel"],
.ktai-form textarea,
.ktai-form select {
  width: 100%;
  padding: var(--space-sm);
  border: 2px solid var(--color-border);
  background: var(--color-warm-white);
  font-size: 1rem;
  font-family: var(--font-body);
  transition: border-color var(--transition);
  border-radius: 4px;
}

.ktai-form input[type="text"]:focus,
.ktai-form input[type="email"]:focus,
.ktai-form input[type="tel"]:focus,
.ktai-form textarea:focus,
.ktai-form select:focus {
  outline: none;
  border-color: var(--color-sage);
}

.ktai-form textarea {
  min-height: 120px;
  resize: vertical;
}

.ktai-form button {
  background: var(--color-sage);
  color: var(--color-warm-white);
  padding: var(--space-sm) var(--space-xl);
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background var(--transition);
  font-family: var(--font-body);
  letter-spacing: 1px;
  font-weight: 600;
  border-radius: 6px;
}

.ktai-form button:hover {
  background: var(--color-sage-dark);
}

.ktai-form button:active {
  transform: translateY(1px);
}

/* Success/Error Messages */
.ktai-success-message {
  background: var(--color-sage-light);
  color: var(--color-sage-dark);
  padding: var(--space-sm);
  margin-bottom: var(--space-md);
  border: 1px solid var(--color-sage);
  border-radius: 4px;
  display: none;
}

.ktai-error-message {
  background: #f8d7da;
  color: #721c24;
  padding: var(--space-sm);
  margin-bottom: var(--space-md);
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  display: none;
}

/* Google Form Embed Container */
.google-form-container {
  width: 100%;
  max-width: 100%;
  margin-top: var(--space-md);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  background: var(--color-warm-white);
}

.google-form-container iframe {
  display: block;
  border: none;
  width: 100%;
  min-height: 1000px;
}

/* Platform Sections */
.ktai-platform {
  background: var(--color-warm-white);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.ktai-platform h2 {
  color: var(--color-walnut);
  margin-bottom: var(--space-md);
  font-size: 2rem;
  font-weight: 400;
  padding-bottom: var(--space-sm);
  border-bottom: 3px solid var(--color-sage);
}

.ktai-device {
  margin-bottom: var(--space-xl);
}

.ktai-device:last-child {
  margin-bottom: 0;
}

.ktai-device h3 {
  color: var(--color-sage);
  font-size: 1.4rem;
  margin-bottom: var(--space-sm);
  font-weight: 400;
}

/* Custom Numbered Lists */
.ktai-steps {
  padding-left: 0;
  list-style: none;
  counter-reset: step-counter;
}

.ktai-steps li {
  counter-increment: step-counter;
  position: relative;
  padding-left: 45px;
  margin-bottom: var(--space-sm);
  line-height: 1.8;
}

.ktai-steps li::before {
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: 0;
  background: var(--color-sage);
  color: var(--color-warm-white);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.9rem;
}

/* Phone Options Grid */
.ktai-phone-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

@media (min-width: 52rem) {
  .ktai-phone-options {
    grid-template-columns: 1fr 1fr;
  }
}

.ktai-phone-option {
  background: var(--color-cream);
  padding: var(--space-md);
  border: 2px solid var(--color-border);
  border-radius: 8px;
}

.ktai-phone-option h4 {
  color: var(--color-walnut);
  margin-bottom: var(--space-sm);
  font-size: 1.2rem;
  font-weight: 400;
}

/* Help Section */
.ktai-help {
  background: var(--color-charcoal);
  color: var(--color-cream);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  text-align: center;
}

.ktai-help h2 {
  color: var(--color-cream);
  margin-bottom: var(--space-sm);
  font-size: 1.8rem;
  font-weight: 400;
}

.ktai-help p {
  font-size: 1.1rem;
  line-height: 1.8;
}

.ktai-help a {
  color: var(--color-sage-light);
  text-decoration: underline;
}

.ktai-help a:hover {
  color: var(--color-cream);
}

/* Footer for KTAI Pages */
.ktai-footer {
  text-align: center;
  padding: var(--space-lg);
  color: var(--color-text-light);
  font-size: 0.9rem;
  border-top: 2px solid var(--color-border);
  margin-top: var(--space-lg);
}

/* Mobile Adjustments for KTAI */
@media (max-width: 40rem) {
  .ktai-steps li {
    padding-left: 40px;
  }

  .ktai-steps li::before {
    width: 26px;
    height: 26px;
    font-size: 0.85rem;
  }
}


/* ============================================================
   Workshops Page Styles
   ============================================================ */

/* Page Header */
.page-header {
  padding: var(--space-xl) 0 var(--space-lg) 0;
  text-align: center;
  background-color: var(--color-bg);
}

.page-header h1 {
  margin-bottom: var(--space-sm);
}

.page-header .lead {
  max-width: 50rem;
  margin: 0 auto;
}

/* Workshop Card - Horizontal Layout */
.workshop-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  background: var(--color-warm-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: var(--space-xl);
  transition: box-shadow var(--transition);
}

.workshop-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

@media (min-width: 52rem) {
  .workshop-card {
    grid-template-columns: 20rem 1fr;
  }
}

.workshop-card__image {
  position: relative;
  overflow: hidden;
  background: var(--color-sand);
}

.workshop-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

@media (min-width: 52rem) {
  .workshop-card__image img {
    aspect-ratio: auto;
    min-height: 100%;
  }
}

.workshop-card__content {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.workshop-card__header h2 {
  margin-bottom: var(--space-xs);
  color: var(--color-charcoal);
}

.workshop-card__tagline {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text-light);
  font-style: italic;
  margin-bottom: 0;
}

.workshop-card__details {
  flex-grow: 1;
}

.workshop-card__details p {
  margin-bottom: var(--space-sm);
  line-height: 1.7;
}

.workshop-card__meta {
  background: var(--color-sage-light);
  padding: var(--space-md);
  border-radius: 6px;
  margin-top: var(--space-md);
}

.workshop-meta-item {
  margin-bottom: var(--space-xs);
  font-size: 0.95rem;
}

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

.workshop-meta-item strong {
  color: var(--color-sage-dark);
}

.workshop-card__actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Workshop Placeholder */
.workshop-placeholder {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  background: var(--color-sage-light);
  border-radius: 8px;
  border: 2px dashed var(--color-sage);
}

.workshop-placeholder__text {
  font-size: 1.1rem;
  color: var(--color-text-light);
  margin: 0;
}

.workshop-placeholder__text a {
  color: var(--color-sage-dark);
  font-weight: 600;
}

/* Active nav link */
.site-nav__links a.active {
  color: var(--color-sage-dark);
  font-weight: 600;
}

/* ============================================================
   Workshop Filters & Grid System
   ============================================================ */

/* Workshop Filters Section */
.workshop-filters-section {
  padding: var(--space-lg) 0 var(--space-md) 0;
  background: var(--color-bg);
}

.filter-heading {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-charcoal);
  margin-bottom: var(--space-md);
  text-align: center;
}

.workshop-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-bottom: var(--space-md);
}

.filter-btn {
  background: var(--color-warm-white);
  border: 2px solid var(--color-border);
  color: var(--color-text);
  padding: var(--space-xs) var(--space-md);
  border-radius: 24px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}

.filter-btn:hover {
  border-color: var(--color-sage);
  background: var(--color-sage-light);
  color: var(--color-sage-dark);
}

.filter-btn.active {
  background: var(--color-sage);
  border-color: var(--color-sage);
  color: var(--color-warm-white);
}

.filter-results {
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-light);
  font-style: italic;
}

/* Workshop Grid Layout */
.workshop-grid-section {
  padding: var(--space-lg) 0;
}

.workshop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

@media (min-width: 48rem) {
  .workshop-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 68rem) {
  .workshop-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Compact Workshop Card */
.workshop-card-compact {
  display: flex;
  flex-direction: column;
  background: var(--color-warm-white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all var(--transition);
  height: 100%;
}

.workshop-card-compact:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

.workshop-card-compact__image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-sand);
}

.workshop-card-compact__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.workshop-card-compact__tags {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.workshop-tag {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.workshop-tag--location {
  color: var(--color-sage-dark);
  border: 1px solid var(--color-sage);
}

.workshop-tag--level {
  color: var(--color-walnut);
  border: 1px solid var(--color-clay);
}

.coming-soon-badge {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  background: var(--color-walnut);
  color: var(--color-warm-white);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
}

.workshop-card-compact__content {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.workshop-card-compact__content h3 {
  font-size: 1.3rem;
  margin-bottom: var(--space-xs);
  color: var(--color-charcoal);
  line-height: 1.3;
}

.workshop-card-compact__tagline {
  font-size: 0.9rem;
  color: var(--color-text-light);
  font-style: italic;
  margin-bottom: var(--space-sm);
}

.workshop-card-compact__description {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text);
  margin-bottom: var(--space-md);
  flex-grow: 1;
}

.workshop-card-compact__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--color-text-light);
}

.meta-icon {
  color: var(--color-sage);
  flex-shrink: 0;
}

.workshop-card-compact .btn {
  width: 100%;
  text-align: center;
  margin-top: auto;
}

/* Small button variant */
.btn--small {
  padding: var(--space-xs) var(--space-md);
  font-size: 0.95rem;
}

/* Coming soon state */
.workshop-card-compact--coming-soon {
  opacity: 0.85;
}

.workshop-card-compact--coming-soon:hover {
  transform: translateY(0);
}

.workshop-card-compact--coming-soon .workshop-card-compact__image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(92, 74, 58, 0.15);
}

/* No results message */
.no-results {
  text-align: center;
  padding: var(--space-xl);
  background: var(--color-sage-light);
  border-radius: 8px;
  border: 2px dashed var(--color-sage);
}

.no-results p {
  font-size: 1.1rem;
  color: var(--color-text-light);
  margin-bottom: var(--space-sm);
}

/* Mobile adjustments */
@media (max-width: 40rem) {
  .workshop-filters {
    justify-content: flex-start;
  }

  .filter-btn {
    font-size: 0.85rem;
    padding: 6px var(--space-sm);
  }

  .workshop-card-compact__content h3 {
    font-size: 1.15rem;
  }
}


/* ============================================================
   Waitlist Modal
   ============================================================ */

.waitlist-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.waitlist-modal.is-open {
  display: block;
  opacity: 1;
}

.waitlist-modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(44, 36, 32, 0.7);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.waitlist-modal__content {
  position: relative;
  max-width: 32rem;
  margin: 5vh auto;
  background: var(--color-warm-white);
  border-radius: 12px;
  padding: var(--space-xl);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
}

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

.waitlist-modal__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: transparent;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: var(--color-text-light);
  cursor: pointer;
  padding: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background var(--transition), color var(--transition);
}

.waitlist-modal__close:hover {
  background: var(--color-sage-light);
  color: var(--color-sage-dark);
}

.waitlist-modal__content h2 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  color: var(--color-charcoal);
  margin-bottom: var(--space-sm);
}

.waitlist-modal__workshop-name {
  font-size: 1rem;
  color: var(--color-sage-dark);
  font-weight: 600;
  margin-bottom: var(--space-lg);
  padding: var(--space-sm);
  background: var(--color-sage-light);
  border-radius: 6px;
  text-align: center;
}

/* Form styles */
.waitlist-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.waitlist-form .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.waitlist-form label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
}

.waitlist-form input[type="text"],
.waitlist-form input[type="email"],
.waitlist-form textarea {
  padding: var(--space-sm);
  border: 2px solid var(--color-border);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-warm-white);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.waitlist-form textarea {
  min-height: 80px;
  resize: vertical;
  font-family: var(--font-body);
}

.waitlist-form input[type="text"]:focus,
.waitlist-form input[type="email"]:focus,
.waitlist-form textarea:focus {
  outline: none;
  border-color: var(--color-sage);
  box-shadow: 0 0 0 3px var(--color-sage-light);
}

.waitlist-form .btn {
  margin-top: var(--space-sm);
  width: 100%;
}

/* Success message */
.waitlist-modal__success {
  display: none;
  text-align: center;
  padding: var(--space-lg) 0;
}

.waitlist-modal__success.is-visible {
  display: block;
  animation: fadeIn 0.3s ease;
}

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

.success-icon {
  color: var(--color-sage);
  margin: 0 auto var(--space-md);
}

.waitlist-modal__success p {
  font-size: 1.125rem;
  color: var(--color-text);
  line-height: 1.6;
}

/* Mobile adjustments */
@media (max-width: 40rem) {
  .waitlist-modal__content {
    max-width: calc(100% - 2rem);
    margin: 2vh 1rem;
    padding: var(--space-lg);
  }

  .waitlist-modal__content h2 {
    font-size: 1.5rem;
  }
}


/* ============================================================
   Kitchen Table AI Registration Form
   ============================================================ */

.kitchen-table-registration-form {
  max-width: var(--max-width-narrow);
  margin: 0 auto;
}

/* Form rows and layout */
.form-row {
  margin-bottom: var(--space-md);
}

.form-row--two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

@media (max-width: 40rem) {
  .form-row--two-col {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
}

/* Form groups */
.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--color-walnut);
  font-weight: 600;
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"] {
  width: 100%;
  padding: var(--space-sm);
  border: 2px solid var(--color-border);
  background: var(--color-warm-white);
  font-size: 1rem;
  font-family: var(--font-body);
  transition: border-color var(--transition);
  border-radius: 4px;
  color: var(--color-text);
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus {
  outline: none;
  border-color: var(--color-sage);
  box-shadow: 0 0 0 3px var(--color-sage-light);
}

.form-group input::placeholder {
  color: var(--color-clay);
  opacity: 0.8;
}

/* Checkbox groups */
.checkbox-group {
  border: 2px solid var(--color-border);
  border-radius: 6px;
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  background: var(--color-warm-white);
}

.checkbox-group legend {
  font-weight: 600;
  color: var(--color-walnut);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0 var(--space-xs);
  margin-bottom: var(--space-sm);
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  padding: var(--space-xs) 0;
  cursor: pointer;
  transition: background-color var(--transition);
  border-radius: 4px;
  padding-left: var(--space-xs);
  padding-right: var(--space-xs);
}

.checkbox-label:hover {
  background-color: var(--color-sage-light);
}

.checkbox-label input[type="checkbox"] {
  margin-right: var(--space-sm);
  margin-top: 0.25rem;
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: var(--color-sage);
}

.checkbox-label span {
  user-select: none;
  line-height: 1.5;
  color: var(--color-text);
}

/* Text inputs within checkbox groups (for "Other" fields) */
.checkbox-group .form-group {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

.checkbox-group .form-group label {
  font-size: 0.9rem;
  color: var(--color-text-light);
}

.checkbox-group .form-group input {
  font-size: 0.95rem;
}

/* Success and error messages */
.form-success,
.form-error {
  padding: var(--space-md);
  border-radius: 6px;
  margin-top: var(--space-md);
  text-align: center;
  font-weight: 500;
  line-height: 1.6;
}

.form-success {
  background-color: var(--color-sage-light);
  color: var(--color-sage-dark);
  border: 2px solid var(--color-sage);
}

.form-success p {
  margin: 0;
}

.form-error {
  background-color: #FEE;
  color: #C33;
  border: 2px solid #FAA;
}

.form-error p {
  margin: 0;
}

.form-error a {
  color: #C33;
  text-decoration: underline;
  font-weight: 600;
}

.form-error a:hover {
  color: #A22;
}

/* Submit button - inherits from .btn and .btn--primary */
.kitchen-table-registration-form button[type="submit"] {
  margin-top: var(--space-sm);
}

/* Mobile optimizations for checkbox groups */
@media (max-width: 40rem) {
  .checkbox-group {
    padding: var(--space-sm);
  }

  .checkbox-label {
    padding: var(--space-sm) var(--space-xs);
  }

  .checkbox-label span {
    font-size: 0.95rem;
  }
}


/* ============================================================
   Feedback Form — Anonymous, hidden page at /fb
   ============================================================ */

.feedback-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg) var(--space-sm);
}

.feedback-card {
  max-width: 36rem;
  width: 100%;
  background: var(--color-warm-white);
  border-radius: 12px;
  padding: var(--space-xl) var(--space-lg);
  box-shadow: 0 2px 20px rgba(58, 46, 37, 0.08);
}

.feedback-card h1 {
  font-family: var(--font-heading);
  color: var(--color-espresso);
  font-size: 1.8rem;
  margin-bottom: var(--space-md);
}

.feedback-intro {
  margin-bottom: var(--space-lg);
  line-height: 1.8;
}

.feedback-intro p {
  margin-bottom: var(--space-sm);
}

.feedback-signoff {
  font-style: italic;
  color: var(--color-walnut);
}

/* Likert scale */
.likert-group {
  border: 2px solid var(--color-border);
  border-radius: 6px;
  padding: var(--space-md);
  background: var(--color-warm-white);
}

.likert-group legend {
  font-weight: 600;
  color: var(--color-walnut);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0 var(--space-xs);
  margin-bottom: var(--space-sm);
}

.likert-scale {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding-top: var(--space-xs);
  max-width: 100%;
}

.likert-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 0.25rem;
}

.likert-label-end {
  font-size: 0.8rem;
  color: var(--color-clay);
  white-space: nowrap;
  text-align: center;
  font-style: italic;
}

.likert-options {
  display: flex;
  gap: 0.3rem;
  justify-content: center;
  flex-wrap: nowrap;
}

.likert-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  flex-shrink: 1;
  min-width: 0;
}

.likert-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.likert-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-walnut);
  background: var(--color-warm-white);
  transition: all var(--transition);
  user-select: none;
}

.likert-option:hover span {
  border-color: var(--color-sage);
  background: var(--color-sage-light);
}

.likert-option input[type="radio"]:checked + span {
  background: var(--color-sage);
  border-color: var(--color-sage);
  color: white;
}

.likert-option input[type="radio"]:focus-visible + span {
  outline: 2px solid var(--color-sage);
  outline-offset: 2px;
}

/* Textarea styles */
.form-group textarea {
  width: 100%;
  padding: var(--space-sm);
  border: 2px solid var(--color-border);
  background: var(--color-warm-white);
  font-size: 1rem;
  font-family: var(--font-body);
  line-height: 1.6;
  transition: border-color var(--transition);
  border-radius: 4px;
  color: var(--color-text);
  resize: vertical;
}

.form-group textarea:focus {
  outline: none;
  border-color: var(--color-sage);
  box-shadow: 0 0 0 3px var(--color-sage-light);
}

.form-group textarea::placeholder {
  color: var(--color-clay);
  opacity: 0.8;
}

/* Feedback form row spacing */
.feedback-card .form-row {
  margin-bottom: var(--space-md);
}

.feedback-card button[type="submit"] {
  width: 100%;
}

/* Mobile adjustments for likert */
@media (max-width: 40rem) {
  .feedback-card {
    padding: var(--space-lg) var(--space-md);
  }

  .likert-scale {
    gap: 0.2rem;
  }

  .likert-label-end {
    font-size: 0.7rem;
  }

  .likert-options {
    gap: 0.2rem;
  }

  .likert-option span {
    width: 2rem;
    height: 2rem;
    font-size: 0.8rem;
  }
}


/* ============================================================
   CTA Banner — Multi-button layout + dark variant
   ============================================================ */

.cta-banner__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-bottom: var(--space-md);
}

.cta-banner__reassurance {
  font-size: 0.95rem;
  color: var(--color-clay);
  font-style: italic;
  margin-top: var(--space-sm);
}

/* Secondary button on dark backgrounds */
.btn--on-dark {
  color: var(--color-cream);
  border-color: var(--color-cream);
}

.btn--on-dark:hover {
  background-color: var(--color-cream);
  color: var(--color-charcoal);
}


/* ============================================================
   Consulting Waitlist Modal — Subtitle
   ============================================================ */

.consulting-modal__subtitle {
  font-size: 1rem;
  color: var(--color-text-light);
  margin-bottom: var(--space-lg);
  line-height: 1.6;
}


/* ============================================================
   Services Page Styles
   ============================================================ */

.service-tier-section {
  padding: var(--space-xl) 0;
}

.service-tier {
  max-width: var(--max-width-narrow);
  margin: 0 auto;
}

.service-tier__header {
  margin-bottom: var(--space-lg);
}

.service-tier__header h2 {
  margin-bottom: var(--space-xs);
}

.service-tier__subhead {
  font-size: 1.2rem;
  color: var(--color-text-light);
  font-style: italic;
  margin-bottom: var(--space-md);
}

.service-tier__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
}

.service-tier__duration {
  display: inline-block;
  background: var(--color-sage-light);
  color: var(--color-sage-dark);
  padding: var(--space-xs) var(--space-sm);
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 600;
}

.service-tier__price {
  font-size: 0.95rem;
  color: var(--color-text-light);
  font-weight: 600;
}

.service-tier__body p {
  margin-bottom: var(--space-sm);
  line-height: 1.7;
}

.service-tier__body h3 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
  font-size: 1.15rem;
}

.service-tier__includes {
  list-style: none;
  padding: 0;
}

.service-tier__includes li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: var(--space-xs);
  line-height: 1.6;
}

.service-tier__includes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 8px;
  height: 8px;
  background-color: var(--color-sage);
  border-radius: 50%;
}

.service-tier__note {
  margin-top: var(--space-md);
  font-style: italic;
  color: var(--color-text-light);
  font-size: 0.95rem;
}

/* Mobile adjustments for services */
@media (max-width: 40rem) {
  .service-tier__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }
}


/* --- Partner Page: Stat Callout --- */

.partner-stat {
  background-color: var(--color-sage-light);
  border-left: 4px solid var(--color-sage);
  border-radius: 6px;
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
}

.partner-stat__number {
  font-family: var(--font-heading);
  font-size: 4rem;
  font-weight: 700;
  font-style: normal;
  color: var(--color-sage-dark);
  line-height: 1;
  margin-bottom: var(--space-xs);
}

.partner-stat__text {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.partner-stat__source {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-light);
  font-style: normal;
  margin-top: var(--space-xs);
}


/* --- Partner Page: Program Footer --- */

.partner-program-footer {
  text-align: center;
  padding: var(--space-lg) 0;
  background-color: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  font-size: 0.95rem;
  color: var(--color-text-light);
}

.partner-program-footer p + p {
  margin-top: var(--space-xs);
}


/* --- Workshop Hero Photo --- */

.workshop-hero-photo {
  padding: 0 0 var(--space-lg);
  background-color: var(--color-bg);
}

.workshop-hero-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.workshop-hero-photo__caption {
  text-align: center;
  font-style: italic;
  color: var(--color-text-light);
  font-size: 0.9rem;
  margin-top: var(--space-sm);
}


/* --- Inline Waitlist Form (on dark CTA banners) --- */

.waitlist-form--inline {
  max-width: 28rem;
  margin: var(--space-md) auto 0;
  text-align: left;
}

.waitlist-form--inline label {
  color: var(--color-clay);
}

.waitlist-form--inline input[type="text"],
.waitlist-form--inline input[type="email"] {
  background: rgba(255, 255, 255, 0.95);
}

.waitlist-form--inline .btn {
  text-align: center;
}

.field-ready-waitlist-success {
  text-align: center;
  padding: var(--space-md) 0;
}

.field-ready-waitlist-success .success-icon {
  color: var(--color-sage-light);
  margin-bottom: var(--space-sm);
}

.field-ready-waitlist-success p {
  color: var(--color-cream);
  font-size: 1.15rem;
}