@import url('./fonts.css');

/* ==========================================================================
   TAL - THE AWARENESS LAB
   EXACT 1:1 FIGMA DESIGN STYLESHEET
   ========================================================================== */

/* Modern Reset */
*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background-color: #FFF9ED;
  color: #2B2B2B;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Custom Color Tokens matching Figma */
:root {
  --tal-cream: #FFF9ED;
  --tal-dark: #2B2B2B;
  --tal-darker: #1B1918;
  --tal-brown: #3B221D;
  --tal-brown-card: #2D1C18;
  --tal-sand: #D3B39C;
  --tal-rose: #CBA69E;
  --tal-terracotta: #A96B5E;
  --tal-terracotta-dark: #8C4E42;
  --tal-pink-subtle: #F1E1DE;
  --tal-teal: #123A39;
  --tal-olive: #484B29;
  --tal-accent-teal: #15BCAF;
}

/* Font Families */
.font-bebas {
  font-family: 'Bebas Kai', 'Bebas Neue', sans-serif;
}

.font-heading {
  font-family: 'Hatcher', 'Playfair Display', 'Cormorant Garamond', serif;
}

.font-serif {
  font-family: 'Baskerville', 'Libre Baskerville', serif;
}

.font-sans {
  font-family: 'Space Grotesk', sans-serif;
}

.font-script {
  font-family: 'Barcelony', 'Caveat', cursive;
}

.font-stat {
  font-family: 'Josefin Sans', sans-serif;
}

.font-form {
  font-family: 'Lexend', sans-serif;
}

/* Color Utilities */
.bg-tal-cream {
  background-color: #FFF9ED;
}

.bg-tal-dark {
  background-color: #2B2B2B;
}

.bg-tal-darker {
  background-color: #1B1918;
}

.bg-tal-brown {
  background-color: #3B221D;
}

.bg-tal-brown-card {
  background-color: #2D1C18;
}

.bg-tal-sand {
  background-color: #D3B39C;
}

.bg-tal-rose {
  background-color: #CBA69E;
}

.bg-tal-terracotta {
  background-color: #A96B5E;
}

.bg-tal-olive {
  background-color: #484B29;
}

.bg-tal-teal {
  background-color: #123A39;
}

.text-tal-cream {
  color: #FFF9ED;
}

.text-tal-dark {
  color: #2B2B2B;
}

.text-tal-brown {
  color: #3B221D;
}

.text-tal-sand {
  color: #D3B39C;
}

.text-tal-rose {
  color: #CBA69E;
}

.text-tal-terracotta {
  color: #A96B5E;
}

.text-tal-teal {
  color: #123A39;
}

.text-tal-offwhite {
  color: #ECE1DF;
}

/* Custom Buttons strictly matching Figma height 57px, letter spacing 5px */
.tal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  min-height: 57px;
  padding: 0.75rem 2.25rem;
  border-radius: 9999px;
  font-family: 'Bebas Kai', 'Bebas Neue', sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.tal-btn-outline {
  border: 1.5px solid #CBA69E;
  color: #CBA69E;
  background: transparent;
}

.tal-btn-outline:hover {
  background-color: #CBA69E;
  color: #1B1918;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(203, 166, 158, 0.3);
}

.tal-btn-dark {
  border: 1.5px solid #3B221D;
  color: #3B221D;
  background: transparent;
}

.tal-btn-dark:hover {
  background-color: #3B221D;
  color: #FFF9ED;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(59, 34, 29, 0.3);
}

.tal-btn-white {
  border: 1.5px solid #FFF9ED;
  color: #FFF9ED;
  background: transparent;
}

.tal-btn-white:hover {
  background-color: #FFF9ED;
  color: #484B29;
  transform: translateY(-2px);
}

/* Handwritten & Signature Badges for Khushboo Gupta Section matching Figma */
.floating-badge {
  position: absolute;
  color: #FFF9ED;
  pointer-events: auto;
  user-select: none;
  transition: transform 0.3s ease, color 0.3s ease;
  z-index: 20;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.floating-badge:hover {
  transform: scale(1.1) translateY(-2px);
  color: #FFFFFF;
}

.floating-badge-script {
  font-family: 'Barcelony', 'Caveat', cursive;
  font-size: 1.65rem;
  line-height: 1.1;
}

.floating-badge-bebas {
  font-family: 'Bebas Kai', 'Bebas Neue', sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}


/* Underline Form Input Styling */
.tal-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid #2B2B2B;
  padding: 0.75rem 0;
  font-family: 'Lexend', sans-serif;
  font-size: 1.05rem;
  color: #2B2B2B;
  outline: none;
  transition: border-color 0.3s ease;
}

.tal-input:focus {
  border-bottom-color: #A96B5E;
}

.tal-input::placeholder {
  color: rgba(43, 43, 43, 0.45);
  font-family: 'Lexend', sans-serif;
}

/* Hero Frame matching Figma Rectangle 116 (w:416px, h:545px, r:50px, stroke: #CBA69E) */
.hero-frame {
  width: 416px;
  height: 545px;
  border: 1px solid rgba(203, 166, 158, 0.6);
  border-radius: 50px;
  position: relative;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.hero-frame-icon-wrap {
  position: absolute;
  top: 147px;
  left: 215px;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}

.hero-frame-icon {
  width: 120px;
  height: 120px;
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.35));
}

.hero-frame-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  text-align: center;
  font-family: 'Bebas Kai', 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 0.12em;
  color: #ECE1DF;
  text-transform: uppercase;
  margin: 0;
  padding: 0 1rem;
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .hero-section {
    height: 100vh;
    min-height: 780px;
    max-height: 1080px;
    position: relative;
    overflow: hidden;
  }

  .hero-bg-wrap {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  .hero-bg-inner {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
  }

  .hero-bg-inner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: right bottom !important;
  }

  .hero-canvas {
    max-width: 1920px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
  }

  .hero-content-col {
    position: absolute !important;
    left: clamp(48px, 15.83vw, 304px) !important;
    top: clamp(200px, 26vh, 280px) !important;
    max-width: min(580px, 42vw) !important;
    width: 100% !important;
  }

  .hero-frame-col {
    display: block !important;
    position: absolute !important;
    right: clamp(24px, 4.8vw, 92px) !important;
    top: clamp(230px, 29vh, 315px) !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 10;
  }

  .hero-frame {
    width: clamp(340px, 21.66vw, 416px);
    height: clamp(480px, 52vh, 550px);
    border-radius: clamp(36px, 2.6vw, 50px);
    border: 1px solid rgba(203, 166, 158, 0.65);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.25);
  }

  .hero-frame-icon-wrap {
    position: absolute !important;
    top: clamp(24px, 6%, 36px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
  }

  .hero-frame-icon {
    width: clamp(90px, 6.25vw, 120px) !important;
    height: clamp(90px, 6.25vw, 120px) !important;
  }
}

/* =========================================================================
   Banner / Hero Section Mobile & Tablet Responsive (< 1024px)
   Strictly scoped to < 1024px so Desktop (>= 1024px / 1920px) is 100% UNTOUCHED
   ========================================================================= */
@media (max-width: 1023px) {
  .hero-section {
    height: auto !important;
    min-height: auto !important;
    padding-bottom: 36px !important;
    overflow: hidden;
    position: relative;
  }

  .hero-bg-wrap {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    pointer-events: none;
  }

  .hero-bg-inner {
    width: 100% !important;
    height: 100% !important;
  }

  .hero-bg-inner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 25% top !important;
    opacity: 0.35 !important;
  }

  .hero-bg-inner {
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(180deg, #180F0D 0%, #241410 40%, #150A08 100%) !important;
  }

  .hero-section header {
    padding-top: 28px !important;
    padding-bottom: 16px !important;
    padding-left: clamp(20px, 5vw, 36px) !important;
    padding-right: clamp(20px, 5vw, 36px) !important;
    position: relative;
    z-index: 20;
  }

  .hero-canvas {
    display: flex !important;
    flex-direction: column !important;
    position: relative;
    height: auto !important;
  }

  .hero-content-col {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 16px 20px 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box;
    z-index: 10;
  }

  .hero-content-col h1 {
    font-size: clamp(38px, 9vw, 54px) !important;
    line-height: 1.08 !important;
    margin: 0 !important;
  }

  .hero-content-col p {
    font-size: clamp(19px, 4.8vw, 22px) !important;
    line-height: 1.60 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .hero-content-col .tal-btn {
    width: 100% !important;
    max-width: 351px !important;
    height: 54px !important;
    box-sizing: border-box;
  }

  /* Reveal Luxury Frosted Glass Hero Frame on Mobile/Tablet */
  .hero-frame-col {
    display: flex !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    justify-content: center !important;
    margin-top: 24px !important;
    padding: 0 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    z-index: 10;
  }

  .hero-frame {
    width: min(360px, calc(100vw - 32px)) !important;
    height: auto !important;
    border-radius: 36px !important;
    border: 1px solid rgba(203, 166, 158, 0.45) !important;
    border-top: 1px solid rgba(255, 235, 225, 0.6) !important;
    background: linear-gradient(165deg, rgba(46, 23, 19, 0.82) 0%, rgba(24, 12, 10, 0.94) 100%) !important;
    backdrop-filter: blur(32px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(170%) !important;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.65), 0 0 40px rgba(169, 107, 94, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    padding: 28px 18px 24px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease !important;
  }

  .hero-frame:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.75), 0 0 50px rgba(169, 107, 94, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  }

  .hero-frame-icon-wrap {
    position: relative !important;
    width: 110px !important;
    height: 110px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
  }

  .hero-frame-icon-wrap::before {
    content: '' !important;
    position: absolute !important;
    width: 140px !important;
    height: 140px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(226, 209, 204, 0.3) 0%, rgba(169, 107, 94, 0.12) 50%, transparent 72%) !important;
    pointer-events: none !important;
    animation: talRopeHaloPulse 4.8s ease-in-out infinite !important;
  }

  @keyframes talRopeHaloPulse {

    0%,
    100% {
      transform: scale(0.95);
      opacity: 0.75;
    }

    50% {
      transform: scale(1.08);
      opacity: 1;
    }
  }

  .hero-frame-icon {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100px !important;
    height: 100px !important;
    cursor: pointer !important;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 16px rgba(226, 209, 204, 0.75)) !important;
  }

  .hero-frame-photo {
    width: 100% !important;
    height: 200px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    position: relative !important;
    border: 1px solid rgba(203, 166, 158, 0.35) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), inset 0 0 18px rgba(0, 0, 0, 0.3) !important;
    margin-bottom: 20px !important;
  }

  .hero-frame-photo-inner {
    width: 100% !important;
    height: 100% !important;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, transparent 45%, rgba(0, 0, 0, 0.45) 100%), url('../images/hero-bg.webp') !important;
    background-size: 320% auto !important;
    background-position: 86% 75% !important;
    background-repeat: no-repeat !important;
    transition: transform 0.6s ease !important;
  }

  .hero-frame:hover .hero-frame-photo-inner {
    transform: scale(1.04) !important;
  }

  .hero-frame-text {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    font-size: clamp(14px, 3.9vw, 17px) !important;
    letter-spacing: clamp(0.08em, 2.2vw, 0.13em) !important;
    color: #ECE1DF !important;
    text-align: center !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    padding: 0 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 380px) {
  .hero-frame {
    width: calc(100vw - 24px) !important;
    padding: 24px 14px 20px 14px !important;
    border-radius: 28px !important;
  }

  .hero-frame-icon-wrap {
    width: 95px !important;
    height: 95px !important;
    margin-bottom: 16px !important;
  }

  .hero-frame-icon {
    width: 90px !important;
    height: 90px !important;
  }

  .hero-frame-photo {
    height: 180px !important;
    border-radius: 18px !important;
    margin-bottom: 16px !important;
  }

  .hero-frame-text {
    font-size: 14.5px !important;
    letter-spacing: 0.08em !important;
  }
}

/* =========================================================================
   Global Narrative Paragraph Typography for Mobile & Tablet (< 1024px)
   Enforces uniform, crystal-clear readability across every single section
   ========================================================================= */
@media (max-width: 1023px) {

  .hero-content-col p,
  .therapy-main-card .therapy-body,
  .therapy-main-card .therapy-body p,
  .minute-body,
  .minute-body p,
  .feelings-narrative,
  .feelings-narrative p,
  .navigating-intro,
  .navigating-benefit-item,
  .coaching-narrative p,
  .corporate-narrative p,
  .about-narrative p,
  .testimonial-text,
  .faq-answer,
  .contact-header-desc {
    font-size: clamp(19px, 4.8vw, 22px) !important;
    line-height: 1.62 !important;
  }
}

/* Therapy Section Exact Layout matching Figma and User Reference media_1790678730546.png */
.therapy-section-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  gap: clamp(20px, 2.5vw, 48px);
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
}

.therapy-main-card {
  flex: 1 1 54%;
  min-width: 0;
  height: auto;
  min-height: clamp(620px, 44vw, 837px);
  border-radius: clamp(24px, 2.1vw, 40px);
  background: rgba(38, 25, 20, 0.40);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(36px, 3.5vw, 60px) clamp(32px, 3.5vw, 60px) clamp(36px, 3.5vw, 60px) clamp(36px, 4vw, 72px);
  box-sizing: border-box;
}

.therapy-toggle-pill {
  position: absolute;
  top: clamp(24px, 2.5vw, 48px);
  right: clamp(24px, 2.5vw, 48px);
  height: 44px;
  padding-left: 6px;
  padding-right: 22px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.therapy-toggle-knob {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: #E5DDD5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}

.therapy-grid-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 33px) clamp(16px, 2vw, 38px);
  flex: 0 0 clamp(400px, 38vw, 686px);
  width: clamp(400px, 38vw, 686px);
  height: auto;
  min-height: clamp(620px, 44vw, 837px);
  box-sizing: border-box;
  flex-shrink: 0;
}

.therapy-terracotta-card {
  width: 100%;
  height: 100%;
  min-height: clamp(240px, 20vw, 402px);
  border-radius: clamp(20px, 1.7vw, 32px);
  background: linear-gradient(180deg, rgba(162, 86, 70, 0.88) 0%, rgba(105, 48, 38, 0.92) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  padding: clamp(24px, 2.2vw, 44px) clamp(18px, 1.7vw, 32px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.therapy-frosted-card {
  width: 100%;
  height: 100%;
  min-height: clamp(240px, 20vw, 402px);
  border-radius: clamp(20px, 1.7vw, 32px);
  background: linear-gradient(180deg, rgba(145, 120, 110, 0.46) 0%, rgba(95, 75, 70, 0.56) 100%);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
  padding: clamp(24px, 2.1vw, 40px) clamp(18px, 1.7vw, 32px) clamp(20px, 1.9vw, 36px) clamp(18px, 1.7vw, 32px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.therapy-frosted-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.38);
}

.therapy-frosted-card .therapy-rope-icon {
  width: clamp(68px, 6.4vw, 124px);
  height: clamp(68px, 6.4vw, 124px);
  object-fit: contain;
}

/* Explicit Typography for Therapy Section */
.therapy-main-card .therapy-subtitle {
  font-family: 'Bebas Kai', 'Bebas Neue', sans-serif;
  font-size: clamp(16px, 1.05vw, 20px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #D3B39C;
  display: block;
}

.therapy-main-card .therapy-title {
  font-family: 'Hatcher', 'Playfair Display', serif;
  font-size: clamp(44px, 3.75vw, 72px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #FFF9ED;
  margin-top: 12px;
  margin-bottom: clamp(14px, 1.25vw, 24px);
}

.therapy-main-card .therapy-body {
  font-family: 'Baskerville', 'Libre Baskerville', serif;
  font-size: clamp(16px, 1vw, 19px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  max-width: 880px;
  width: 100%;
}

.therapy-main-card .therapy-body p {
  margin-bottom: 16px;
}

.therapy-main-card .therapy-body p:last-child {
  margin-bottom: 0;
}

.therapy-terracotta-card p {
  font-family: 'Bebas Kai', 'Bebas Neue', sans-serif;
  font-size: clamp(18px, 1.56vw, 30px);
  line-height: 1.20;
  letter-spacing: 0.04em;
  color: #FFF9ED;
  text-transform: uppercase;
  margin: 0;
  text-align: left;
}

.therapy-card-title {
  font-family: 'Bebas Kai', 'Bebas Neue', sans-serif;
  font-size: clamp(18px, 1.56vw, 30px);
  line-height: 1.08;
  letter-spacing: 0.04em;
  color: #FFF9ED;
  text-transform: uppercase;
  margin: 0;
  padding-bottom: 4px;
}

/* =========================================================================
   EXTRAORDINARY STYLISH ROPE / AWARENESS KNOT ANIMATIONS
   ========================================================================= */
.tal-rope-anim {
  transform-origin: 50% 50%;
  will-change: transform, filter;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    filter 0.45s ease;
}

/* 1. Hero Frame Rope: Majestic 3D Floating Canyon Drift */
.tal-rope-hero {
  animation: talHeroRopeFloat 6.4s ease-in-out infinite;
}

.hero-frame-icon:hover {
  transform: perspective(600px) translateY(-10px) scale(1.12) rotate(3deg);
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 22px rgba(226, 209, 204, 0.85));
}

@keyframes talHeroRopeFloat {

  0%,
  100% {
    transform: perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(0px) scale(1);
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 2px rgba(226, 209, 204, 0.2));
  }

  25% {
    transform: perspective(600px) rotateX(7deg) rotateY(-8deg) rotateZ(2.5deg) translateY(-8px) scale(1.03);
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 14px rgba(226, 209, 204, 0.6));
  }

  50% {
    transform: perspective(600px) rotateX(-4deg) rotateY(6deg) rotateZ(-2deg) translateY(-3px) scale(0.98);
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25)) drop-shadow(0 0 6px rgba(226, 209, 204, 0.35));
  }

  75% {
    transform: perspective(600px) rotateX(6deg) rotateY(7deg) rotateZ(1.5deg) translateY(-10px) scale(1.04);
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.32)) drop-shadow(0 0 18px rgba(226, 209, 204, 0.7));
  }
}

/* 2. Card 2: Relationships Knot - Undulating Figure-8 Harmonic Drift */
.tal-rope-relationships {
  animation: talRopeRelationships 5.4s ease-in-out infinite;
}

@keyframes talRopeRelationships {

  0%,
  100% {
    transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(0px) scale(1);
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 2px rgba(255, 249, 237, 0.2));
  }

  25% {
    transform: perspective(500px) rotateX(8deg) rotateY(7deg) rotateZ(-3deg) translateY(-7px) scale(1.04);
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 15px rgba(255, 249, 237, 0.65));
  }

  50% {
    transform: perspective(500px) rotateX(-6deg) rotateY(-5deg) rotateZ(2deg) translateY(-2px) scale(0.97);
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 5px rgba(255, 249, 237, 0.3));
  }

  75% {
    transform: perspective(500px) rotateX(5deg) rotateY(-8deg) rotateZ(3.5deg) translateY(-9px) scale(1.03);
    filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.32)) drop-shadow(0 0 18px rgba(255, 249, 237, 0.7));
  }
}

/* 3. Card 3: Understand Yourself - Cognitive Synaptic Expansion Pulse */
.tal-rope-understand {
  animation: talRopeUnderstand 4.8s ease-in-out infinite;
}

@keyframes talRopeUnderstand {

  0%,
  100% {
    transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(0px) scale(1);
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 2px rgba(255, 249, 237, 0.2));
  }

  30% {
    transform: perspective(500px) rotateX(-7deg) rotateY(8deg) rotateZ(-2.5deg) translateY(-8px) scale(1.05);
    filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.32)) drop-shadow(0 0 16px rgba(255, 249, 237, 0.75));
  }

  65% {
    transform: perspective(500px) rotateX(6deg) rotateY(-6deg) rotateZ(2deg) translateY(-4px) scale(0.96);
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.22)) drop-shadow(0 0 6px rgba(255, 249, 237, 0.35));
  }
}

/* 4. Card 4: Life Changing - Dynamic Spring & Ribbon Wave Drift */
.tal-rope-life {
  animation: talRopeLifeChanging 5.6s ease-in-out infinite;
}

@keyframes talRopeLifeChanging {

  0%,
  100% {
    transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(0px) scale(1);
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 2px rgba(255, 249, 237, 0.2));
  }

  28% {
    transform: perspective(500px) rotateX(9deg) rotateY(-9deg) rotateZ(4deg) translateY(-9px) scale(1.05);
    filter: drop-shadow(0 14px 25px rgba(0, 0, 0, 0.32)) drop-shadow(0 0 18px rgba(255, 249, 237, 0.7));
  }

  55% {
    transform: perspective(500px) rotateX(-5deg) rotateY(4deg) rotateZ(-1.5deg) translateY(-2px) scale(0.98);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 5px rgba(255, 249, 237, 0.3));
  }

  80% {
    transform: perspective(500px) rotateX(4deg) rotateY(8deg) rotateZ(-3deg) translateY(-7px) scale(1.03);
    filter: drop-shadow(0 11px 20px rgba(0, 0, 0, 0.28)) drop-shadow(0 0 14px rgba(255, 249, 237, 0.6));
  }
}

/* Card Hover Elevation for Therapy Ropes */
.therapy-frosted-card:hover .therapy-rope-icon {
  transform: perspective(500px) translateY(-10px) scale(1.12) rotate(2.5deg);
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 22px rgba(255, 249, 237, 0.85));
}

/* =========================================================================
   Section 3: Take A Minute For Yourself matching Figma & User Screenshot
   ========================================================================= */
.minute-section-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: clamp(24px, 3.1vw, 60px);
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
}

.minute-lotus-card {
  flex: 1 1 48%;
  max-width: 792px;
  width: auto;
  min-height: clamp(440px, 34vw, 658px);
  height: auto;
  border-radius: clamp(28px, 2.6vw, 50px);
  background-color: #FFFFFF;
  border: 1px solid #CBA69E;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 2.5vw, 48px);
  box-sizing: border-box;
  box-shadow: 0 10px 30px rgba(185, 138, 128, 0.08);
}

.minute-lotus-card img {
  max-width: min(580px, 100%);
  max-height: min(520px, 80%);
  width: 100%;
  height: auto;
  object-fit: contain;
}

.minute-text-card {
  flex: 1 1 52%;
  max-width: 872px;
  width: auto;
  min-height: clamp(440px, 34vw, 658px);
  height: auto;
  border-radius: clamp(28px, 2.6vw, 50px);
  background-color: #F1E1DE;
  border: 1px solid #CBA69E;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(36px, 3.5vw, 60px) clamp(36px, 4.5vw, 96px);
  box-sizing: border-box;
  box-shadow: 0 10px 30px rgba(185, 138, 128, 0.08);
}

.minute-subtitle {
  font-family: 'Bebas Kai', 'Bebas Neue', sans-serif;
  font-size: clamp(16px, 1.05vw, 20px);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #B98A80;
  display: block;
  margin-bottom: clamp(12px, 1vw, 18px);
}

.minute-title {
  font-family: 'Hatcher', 'Playfair Display', serif;
  font-size: clamp(38px, 3.65vw, 70px);
  line-height: 1.06;
  letter-spacing: 0.04em;
  color: #A96B5E;
  margin: 0 0 clamp(18px, 1.8vw, 34px) 0;
}

.minute-body {
  font-family: 'Baskerville', 'Libre Baskerville', serif;
  font-size: clamp(16px, 1.05vw, 20px);
  line-height: 1.55;
  color: #2B2B2B;
  max-width: 680px;
}

.minute-body p {
  margin-bottom: 18px;
}

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

@media (max-width: 1023px) {
  #take-a-minute {
    padding-top: clamp(40px, 6vw, 60px) !important;
    padding-bottom: clamp(40px, 6vw, 60px) !important;
  }

  .minute-section-container {
    flex-direction: column !important;
    gap: 28px !important;
  }

  .minute-lotus-card,
  .minute-text-card {
    width: 100% !important;
    max-width: 792px !important;
    min-height: auto !important;
    height: auto !important;
  }

  #therapy {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    padding-top: clamp(60px, 8vw, 100px) !important;
    padding-bottom: clamp(60px, 8vw, 110px) !important;
  }

  .therapy-section-container {
    flex-direction: column !important;
    align-items: center !important;
    gap: 40px !important;
    max-width: 867px !important;
    margin: 0 auto !important;
  }

  .therapy-main-card {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    padding: clamp(36px, 5vw, 60px) clamp(28px, 4.5vw, 60px) !important;
    border-radius: 36px !important;
  }

  .therapy-grid-container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    gap: 24px !important;
    flex: 1 1 100% !important;
  }

  .therapy-terracotta-card,
  .therapy-frosted-card {
    width: 100% !important;
    height: auto !important;
    min-height: 340px !important;
  }
}

@media (max-width: 768px) {
  #therapy {
    padding-top: 40px !important;
    padding-bottom: 44px !important;
  }

  .therapy-section-container {
    gap: 22px !important;
  }

  .therapy-main-card {
    padding: 32px 22px 34px 22px !important;
    border-radius: 28px !important;
    justify-content: flex-start !important;
    background: linear-gradient(165deg, rgba(46, 23, 19, 0.88) 0%, rgba(26, 13, 11, 0.94) 100%) !important;
    backdrop-filter: blur(36px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(36px) saturate(170%) !important;
    border: 1px solid rgba(255, 235, 225, 0.22) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5) !important;
  }

  .therapy-toggle-pill {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    align-self: flex-start !important;
    margin-bottom: 24px !important;
    background: rgba(0, 0, 0, 0.42) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  }

  .therapy-main-card .therapy-subtitle {
    font-size: clamp(15px, 4vw, 18px) !important;
    letter-spacing: 0.14em !important;
    line-height: 1.3 !important;
    color: #E2BC9E !important;
    font-weight: 500 !important;
  }

  .therapy-main-card .therapy-title {
    font-size: clamp(42px, 10vw, 58px) !important;
    margin-top: 10px !important;
    margin-bottom: 18px !important;
    line-height: 1.05 !important;
    color: #FFF9ED !important;
  }

  .therapy-main-card .therapy-body {
    font-size: clamp(19px, 4.8vw, 22px) !important;
    line-height: 1.62 !important;
    max-width: 100% !important;
    color: #FAF5EF !important;
  }

  .therapy-main-card .therapy-body p {
    color: #FAF5EF !important;
    margin-bottom: 15px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
  }

  .therapy-grid-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, auto) !important;
    gap: clamp(10px, 3vw, 16px) !important;
    width: 100% !important;
  }

  .therapy-terracotta-card {
    width: 100% !important;
    height: 100% !important;
    min-height: clamp(210px, 50vw, 250px) !important;
    padding: clamp(20px, 4.5vw, 26px) clamp(14px, 3.2vw, 20px) !important;
    border-radius: clamp(18px, 4vw, 24px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    background: linear-gradient(180deg, #A85746 0%, #763226 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
  }

  .therapy-terracotta-card br {
    display: none !important;
  }

  .therapy-terracotta-card p {
    font-size: clamp(16px, 4.2vw, 20px) !important;
    line-height: 1.25 !important;
    letter-spacing: 0.03em !important;
    color: #FFFFFF !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) !important;
    margin: 0 !important;
  }

  .therapy-frosted-card {
    width: 100% !important;
    height: 100% !important;
    min-height: clamp(210px, 50vw, 250px) !important;
    padding: clamp(20px, 4.5vw, 26px) clamp(10px, 2.5vw, 16px) clamp(18px, 4vw, 22px) !important;
    border-radius: clamp(18px, 4vw, 24px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    background: linear-gradient(180deg, rgba(62, 38, 32, 0.82) 0%, rgba(36, 20, 16, 0.92) 100%) !important;
    backdrop-filter: blur(28px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
    border: 1px solid rgba(255, 235, 225, 0.25) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
  }

  .therapy-frosted-card>div:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    flex: 1 !important;
    padding-top: 0 !important;
  }

  .therapy-frosted-card .therapy-rope-icon {
    width: clamp(56px, 14vw, 72px) !important;
    height: clamp(56px, 14vw, 72px) !important;
    object-fit: contain !important;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 10px rgba(226, 209, 204, 0.6)) !important;
  }

  .therapy-card-title {
    font-size: clamp(16px, 4vw, 19.5px) !important;
    line-height: 1.15 !important;
    letter-spacing: 0.03em !important;
    color: #FFFFFF !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7) !important;
    text-align: center !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
  }
}

/* Container Width - Exactly matches the header container (max-w-[1920px] mx-auto px-12 xl:px-20) */
.container-tal {
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (max-width: 480px) {
  .container-tal {
    padding-left: clamp(12px, 3.8vw, 18px);
    padding-right: clamp(12px, 3.8vw, 18px);
  }
}

@media (min-width: 768px) {
  .container-tal {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

@media (min-width: 1280px) {
  .container-tal {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

/* =========================================================================
   Section 4: Impact / Journey So Far matching Figma & User Screenshot
   ========================================================================= */
.impact-section {
  position: relative;
  width: 100%;
  min-height: clamp(280px, 20vw, 388px);
  background: linear-gradient(180deg, #A05548 0%, #3A1F1A 100%);
  border-radius: clamp(32px, 2.6vw, 50px) clamp(32px, 2.6vw, 50px) 0 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: clamp(40px, 3.5vw, 60px) 0 clamp(60px, 5.7vw, 110px) 0;
  box-sizing: border-box;
}

.impact-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.impact-title-group {
  max-width: clamp(260px, 25vw, 480px);
  flex-shrink: 0;
}

.impact-subtitle {
  font-family: 'Bebas Kai', 'Bebas Neue', sans-serif;
  font-size: clamp(16px, 1.05vw, 20px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF;
  display: block;
  margin-bottom: 8px;
}

.impact-title {
  font-family: 'Hatcher', 'Playfair Display', serif;
  font-size: clamp(42px, 3.65vw, 70px);
  line-height: 1.05;
  color: #D3B39C;
  margin: 0;
  white-space: nowrap;
}

.impact-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3.1vw, 60px);
  flex-grow: 1;
  max-width: 1060px;
  margin-left: clamp(32px, 4.1vw, 80px);
}

.impact-stat-item {
  display: flex;
  flex-direction: column;
}

.impact-stat-line {
  width: 100%;
  max-width: 241px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.45);
  margin-bottom: clamp(12px, 1vw, 20px);
}

.impact-stat-number {
  font-family: 'Hatcher', 'Playfair Display', serif;
  font-size: clamp(42px, 3.65vw, 70px);
  line-height: 1;
  color: #FFFFFF;
  margin-bottom: clamp(6px, 0.6vw, 12px);
}

.impact-stat-label {
  font-family: 'Josefin Sans', sans-serif;
  font-size: clamp(18px, 1.45vw, 28px);
  line-height: 1.2;
  color: #D3B39C;
  font-weight: 400;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .impact-section {
    min-height: auto !important;
    padding-top: 48px !important;
    padding-bottom: 64px !important;
  }

  .impact-container {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }

  .impact-title {
    font-size: 48px;
    white-space: normal;
  }

  .impact-stats-grid {
    grid-template-columns: 1fr !important;
    margin-left: 0 !important;
    width: 100% !important;
    gap: 22px !important;
  }

  .impact-stat-line {
    margin-bottom: 12px !important;
  }

  .impact-stat-number {
    font-size: 52px;
    margin-bottom: 6px !important;
  }

  .impact-stat-label {
    font-size: 22px;
  }
}

/* =========================================================================
   Section 5: What Are You Feeling Right Now? matching Figma & User Screenshot
   ========================================================================= */
.feelings-section {
  position: relative;
  width: 100%;
  margin-top: -64px;
  z-index: 5;
  background-color: transparent;
  overflow: visible;
}

.feelings-banner {
  position: relative;
  width: 100%;
  height: clamp(400px, 29vw, 556px);
  border-radius: clamp(32px, 2.6vw, 50px) clamp(32px, 2.6vw, 50px) 0 0;
  overflow: hidden;
}

.feelings-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.feelings-bg-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.35) 45%, transparent 75%);
  pointer-events: none;
}

.feelings-banner-content {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(28px, 2.5vw, 48px);
}

.feelings-header-block {
  max-width: 720px;
}

.feelings-subtitle {
  font-family: 'Bebas Kai', 'Bebas Neue', sans-serif;
  font-size: clamp(16px, 1.05vw, 20px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF;
  display: block;
  margin-bottom: 12px;
}

.feelings-title {
  font-family: 'Hatcher', 'Playfair Display', serif;
  font-size: clamp(42px, 3.65vw, 70px);
  line-height: 1.05;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: 0.02em;
}

.feelings-lower {
  position: relative;
  width: 100%;
  background-color: #FFF9ED;
  padding: clamp(40px, 3.1vw, 60px) 0 clamp(60px, 4.7vw, 90px) 0;
  min-height: clamp(240px, 16.6vw, 320px);
}

.feelings-lower-content {
  position: relative;
  z-index: 10;
}

.feelings-narrative {
  max-width: clamp(440px, 34vw, 650px);
  font-family: 'Baskerville', 'Libre Baskerville', serif;
  font-size: clamp(16px, 1.05vw, 20px);
  line-height: 1.55;
  color: #2B2B2B;
}

.feelings-narrative p {
  margin-bottom: clamp(16px, 1.25vw, 24px);
}

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

/* Floating Feelings Wheel overlapping the photo and cream sections */
.feelings-wheel-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 20;
}

.feelings-wheel-inner {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.feelings-wheel-container {
  pointer-events: auto;
  margin-top: clamp(130px, 10.3vw, 198px);
  margin-right: clamp(20px, 2vw, 40px);
  width: clamp(340px, 29.9vw, 574px);
  height: clamp(340px, 29.9vw, 574px);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: none;
  background-color: transparent;
  flex-shrink: 0;
}

.feelings-wheel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  transform-origin: 50% 50%;
  animation: talSpinWheel 28s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@keyframes talSpinWheel {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media (max-width: 1023px) {
  .feelings-wheel-wrapper {
    position: static;
    height: auto;
  }

  .feelings-wheel-inner {
    justify-content: center;
    padding: 30px 0;
  }

  .feelings-wheel-container {
    margin-top: 0;
    margin-right: 0;
    width: clamp(260px, 68vw, 420px);
    height: clamp(260px, 68vw, 420px);
  }
}

@media (max-width: 768px) {
  .feelings-section {
    margin-top: -44px !important;
  }

  .feelings-banner {
    height: clamp(320px, 58vw, 380px) !important;
  }

  .feelings-banner-content {
    padding-bottom: 28px !important;
  }

  .feelings-title {
    font-size: 46px;
  }

  .feelings-lower {
    padding: 36px 0 32px 0 !important;
    min-height: auto !important;
  }

  .feelings-wheel-inner {
    padding: 24px 0 !important;
  }

  .feelings-wheel-container {
    width: clamp(260px, 68vw, 320px) !important;
    height: clamp(260px, 68vw, 320px) !important;
  }

  .feelings-narrative {
    font-size: clamp(19px, 4.8vw, 22px) !important;
    line-height: 1.62 !important;
  }

  .feelings-narrative p {
    margin-bottom: 16px !important;
  }
}

/* ==========================================================================
   6. EMOTION CARDS (LEFT) & NAVIGATING YOUR FEELINGS (RIGHT)
   ========================================================================== */
.navigating-section {
  background-color: #FFF9ED;
  padding-top: clamp(48px, 4.2vw, 80px);
  padding-bottom: clamp(60px, 6.25vw, 120px);
}

.navigating-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  /* justify-content: space-between; */
  gap: clamp(28px, 3vw, 56px);
  width: 100%;
}

/* Left Grid of 6 Cards */
.emotion-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 40px);
  row-gap: clamp(24px, 2.5vw, 48px);
  flex: 1 1 64%;
  max-width: 1028px;
}

.emotion-card-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 316px;
}

.emotion-card-box {
  position: relative;
  width: 100%;
  max-width: 316px;
  aspect-ratio: 316 / 392;
  height: auto;
  border-radius: clamp(20px, 1.8vw, 36px);
  overflow: hidden;
  background-color: transparent;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.emotion-card-box:hover {
  transform: translateY(-6px);
}

.emotion-card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  pointer-events: none;
}

.emotion-card-num {
  position: absolute;
  top: clamp(18px, 1.8vw, 36px);
  left: clamp(16px, 1.7vw, 33px);
  font-family: 'Bebas Kai', sans-serif;
  font-size: clamp(24px, 2vw, 40px);
  line-height: 1;
  color: #FFF9ED;
  pointer-events: none;
  user-select: none;
}

.emotion-card-caption {
  font-family: 'Bebas Kai', sans-serif;
  font-size: clamp(14px, 1.05vw, 20px);
  line-height: 1.15;
  color: #2B2B2B;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-top: clamp(8px, 0.7vw, 14px);
  padding-left: clamp(6px, 0.9vw, 18px);
}

/* Right Narrative Column */
.navigating-narrative {
  flex: 0 0 clamp(300px, 30vw, 514px);
  width: 100%;
  max-width: 514px;
}

.navigating-subtitle {
  font-family: 'Bebas Kai', sans-serif;
  font-size: clamp(16px, 1.05vw, 20px);
  line-height: 1;
  color: #2B2B2B;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
  display: block;
}

.navigating-title {
  font-family: 'Hatcher', serif;
  font-size: clamp(42px, 3.65vw, 70px);
  line-height: 1;
  color: #123A39;
  margin-bottom: clamp(20px, 1.9vw, 36px);
}

@media (max-width: 1023px) {
  .navigating-layout {
    flex-direction: column !important;
    gap: 36px !important;
  }

  .emotion-cards-grid {
    width: 100% !important;
    max-width: 100% !important;
  }

  .navigating-narrative {
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }
}

@media (max-width: 768px) {
  .navigating-section {
    padding-top: 24px !important;
    padding-bottom: 48px !important;
  }

  .navigating-layout {
    gap: 32px !important;
  }

  .navigating-title {
    font-size: 48px;
    line-height: 52px;
    margin-bottom: 20px !important;
  }

  .navigating-intro {
    font-size: clamp(19px, 4.8vw, 22px) !important;
    line-height: 1.62 !important;
    margin-bottom: 18px !important;
  }

  .navigating-benefits-list {
    gap: 14px !important;
  }

  .navigating-benefit-item {
    font-size: clamp(18.5px, 4.6vw, 21px) !important;
    line-height: 1.58 !important;
  }

  /* 2 Cards Per Row on Mobile */
  .emotion-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(14px, 3.5vw, 24px) clamp(10px, 2.5vw, 18px) !important;
    width: 100% !important;
  }

  .emotion-card-item {
    max-width: 100% !important;
    width: 100% !important;
  }

  .emotion-card-box {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 316 / 392 !important;
    border-radius: clamp(18px, 4.5vw, 26px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
  }

  .emotion-card-num {
    top: clamp(12px, 3.2vw, 20px) !important;
    left: clamp(12px, 3.2vw, 20px) !important;
    font-size: clamp(22px, 5.5vw, 32px) !important;
  }

  .emotion-card-caption {
    font-size: clamp(13px, 3.4vw, 16px) !important;
    line-height: 1.20 !important;
    margin-top: 10px !important;
    padding-left: clamp(4px, 1.5vw, 10px) !important;
    letter-spacing: 0.02em !important;
  }

  .emotion-card-caption br {
    display: none !important;
  }
}

.navigating-intro {
  font-family: 'Baskerville', serif;
  font-size: 20px;
  line-height: 1.4;
  color: #2B2B2B;
  margin-bottom: 24px;
}

.navigating-benefits-list {
  list-style-type: disc;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.navigating-benefit-item {
  font-family: 'Baskerville', serif;
  font-size: 19px;
  line-height: 1.45;
  color: #2B2B2B;
}

.navigating-benefit-item strong {
  font-family: 'Baskerville', serif;
  font-weight: 700;
  color: #2B2B2B;
}

/* ==========================================================================
   7. COACHING SECTION (PANORAMIC BANNER + BELOW CONTENT)
   ========================================================================== */
.coaching-section {
  background-color: #FFF9ED;
  position: relative;
  width: 100%;
}

.coaching-banner {
  position: relative;
  width: 100%;
  height: clamp(380px, 29vw, 556px);
  border-radius: clamp(32px, 2.6vw, 50px) clamp(32px, 2.6vw, 50px) 0 0;
  overflow: hidden;
}

.coaching-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.coaching-banner-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
}

.coaching-banner-content {
  position: absolute;
  bottom: clamp(28px, 2.9vw, 56px);
  left: 0;
  right: 0;
  z-index: 10;
}

.coaching-banner-inner {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0;
}

.coaching-subtitle {
  font-family: 'Bebas Kai', sans-serif;
  font-size: clamp(16px, 1.05vw, 20px);
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  display: block;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.coaching-title {
  font-family: 'Hatcher', serif;
  font-size: clamp(42px, 3.65vw, 70px);
  line-height: 1;
  color: #FFFFFF;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Lower Narrative & Pill Button */
.coaching-lower {
  padding-top: clamp(36px, 3.1vw, 60px);
  padding-bottom: clamp(48px, 5.2vw, 100px);
}

.coaching-lower-inner {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(32px, 3.5vw, 60px);
}

.coaching-narrative {
  flex: 1 1 auto;
  max-width: 783px;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.1vw, 22px);
}

.coaching-narrative p {
  font-family: 'Baskerville', serif;
  font-size: clamp(16px, 1.05vw, 20px);
  line-height: 1.5;
  color: #2B2B2B;
  margin: 0;
}

.coaching-btn-wrapper {
  flex-shrink: 0;
  margin-bottom: 4px;
}

.coaching-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(210px, 13.2vw, 254px);
  height: 57px;
  border-radius: 67px;
  border: 2px solid #582C24;
  background-color: transparent;
  color: #582C24;
  font-family: 'Bebas Kai', sans-serif;
  font-size: 20px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.coaching-btn:hover {
  background-color: #582C24;
  color: #FFF9ED;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(88, 44, 36, 0.2);
}

@media (max-width: 1023px) {
  .coaching-lower-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 32px !important;
  }
}

@media (max-width: 768px) {
  .coaching-banner {
    height: clamp(300px, 55vw, 360px) !important;
  }

  .coaching-title {
    font-size: 48px !important;
  }

  .coaching-banner-content {
    bottom: 28px !important;
  }

  .coaching-lower {
    padding-top: 36px !important;
    padding-bottom: 44px !important;
  }

  .coaching-narrative {
    gap: 16px !important;
  }
}

/* ==========================================================================
   8. CORPORATE SOLUTIONS SECTION (PANORAMIC BANNER + BELOW CONTENT)
   ========================================================================== */
.corporate-section {
  background-color: #FFF9ED;
  position: relative;
  width: 100%;
}

.corporate-banner {
  position: relative;
  width: 100%;
  height: clamp(380px, 29vw, 556px);
  border-radius: clamp(32px, 2.6vw, 50px) clamp(32px, 2.6vw, 50px) 0 0;
  overflow: hidden;
}

.corporate-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.corporate-banner-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 40%, transparent 70%);
  pointer-events: none;
}

.corporate-banner-content {
  position: absolute;
  bottom: clamp(32px, 3.2vw, 64px);
  left: 0;
  right: 0;
  z-index: 10;
}

.corporate-banner-inner {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0;
}

.corporate-subtitle {
  font-family: 'Bebas Kai', sans-serif;
  font-size: clamp(16px, 1.05vw, 20px);
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  display: block;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.corporate-title {
  font-family: 'Hatcher', serif;
  font-size: clamp(44px, 4vw, 72px);
  line-height: 0.98;
  color: #FFFFFF;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* Lower Area on Cream */
.corporate-lower {
  padding-top: clamp(36px, 3.2vw, 64px);
  padding-bottom: clamp(60px, 6vw, 110px);
}

.corporate-lower-inner {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(24px, 2.5vw, 36px);
}

.corporate-narrative {
  max-width: 540px;
  width: 100%;
  margin-bottom: 0;
}

.corporate-narrative p {
  font-family: 'Baskerville', serif;
  font-size: clamp(17px, 1.1vw, 20px);
  line-height: 1.48;
  color: #2B2B2B;
  margin: 0;
}

.corporate-action-row {
  display: flex;
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
  flex-shrink: 0;
}

.corporate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(210px, 13.2vw, 254px);
  height: 56px;
  border-radius: 67px;
  border: 1.5px solid #582C24;
  background-color: transparent;
  color: #582C24;
  font-family: 'Bebas Kai', sans-serif;
  font-size: 20px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.corporate-btn:hover {
  background-color: #582C24;
  color: #FFF9ED;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(88, 44, 36, 0.2);
}

@media (max-width: 768px) {
  .corporate-banner {
    height: clamp(300px, 55vw, 360px) !important;
  }

  .corporate-title {
    font-size: 48px !important;
  }

  .corporate-banner-content {
    bottom: 28px !important;
  }

  .corporate-lower {
    padding-top: 32px !important;
    padding-bottom: 44px !important;
  }

  .corporate-narrative {
    margin-bottom: 12px !important;
  }

  .corporate-action-row {
    gap: 24px !important;
  }
}

/* Stylish Looping Animation for Corporate Solutions Teal Circle matching Figma & Screenshot */
.corporate-teal-dot {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid rgba(21, 188, 175, 0.35);
  background: rgba(21, 188, 175, 0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
}

.corporate-teal-dot::after {
  content: '';
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5cfde8 0%, #15BCAF 52%, #0a655e 100%);
  box-shadow: 0 2px 14px rgba(21, 188, 175, 0.5), 0 4px 10px rgba(10, 101, 94, 0.28);
  animation: talTealBreathe 3.2s ease-in-out infinite;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.corporate-teal-dot::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1.5px solid rgba(21, 188, 175, 0.5);
  pointer-events: none;
  animation: talTealRipple 3.2s cubic-bezier(0.15, 0.85, 0.35, 1) infinite;
}

.corporate-teal-dot:hover {
  transform: scale(1.08);
  border-color: rgba(21, 188, 175, 0.6);
}

.corporate-teal-dot:hover::after {
  transform: scale(1.1);
  box-shadow: 0 0 24px rgba(78, 253, 232, 0.8), 0 6px 18px rgba(10, 101, 94, 0.4);
}

@keyframes talTealBreathe {

  0%,
  100% {
    transform: scale(1) translateY(0);
    box-shadow: 0 2px 14px rgba(21, 188, 175, 0.5), 0 4px 10px rgba(10, 101, 94, 0.28);
  }

  50% {
    transform: scale(1.06) translateY(-2px);
    box-shadow: 0 4px 22px rgba(78, 253, 232, 0.7), 0 6px 16px rgba(10, 101, 94, 0.35);
  }
}

@keyframes talTealRipple {
  0% {
    transform: scale(1);
    opacity: 0.85;
  }

  50% {
    opacity: 0.45;
  }

  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* ==========================================================================
   9. GIFT THERAPY SECTION (EXACT 1:1 FIGMA & USER SCREENSHOT SPEC)
   ========================================================================== */
/* Figma 2342:4 at 1920: 1108px tall, 50px top radius, photo mirrored and bottom-aligned */
.gift-therapy-section {
  position: relative;
  width: 100%;
  min-height: clamp(600px, 57.71vw, 1108px);
  background-color: #806F36;
  border-radius: clamp(32px, 2.6vw, 50px) clamp(32px, 2.6vw, 50px) 0 0;
  overflow: hidden;
  box-sizing: border-box;
}

.gift-therapy-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.gift-therapy-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  transform: scaleX(-1);
  display: block;
}

/* Copy block starts 282px down at 1920 (centred above the 38px musings overlap) */
.gift-therapy-content-wrapper {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: clamp(40px, 3.44vw, 66px);
  box-sizing: border-box;
}

.gift-therapy-layout {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

/* Text column starts at x=1190 of 1920 (63.07% of the 1760px container) */
.gift-therapy-box {
  flex: 0 1 470px;
  min-width: 0;
  margin-left: 63.07%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.gift-therapy-subtitle {
  font-family: 'Bebas Kai', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 10px;
  display: block;
}

.gift-therapy-title {
  font-family: 'Hatcher', serif;
  font-size: clamp(48px, 3.65vw, 70px);
  font-weight: 400;
  line-height: 1;
  color: #FFFFFF;
  letter-spacing: 0;
  margin: 0 0 clamp(28px, 3.18vw, 61px);
}

.gift-therapy-narrative {
  font-family: 'Baskerville', serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.15;
  color: #FFFFFF;
  max-width: 428px;
  margin-bottom: 52px;
  display: flex;
  flex-direction: column;
  gap: 23px;
}

.gift-therapy-narrative p {
  margin: 0;
}

/* Figma 2342:8: 351x57 white outline pill. Self-contained so it renders the same
   whether or not the shared .tal-btn classes are on the element */
.gift-therapy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 351px;
  max-width: 100%;
  height: 57px;
  padding: 0 32px;
  border: 1.5px solid #FFFFFF;
  border-radius: 9999px;
  background: transparent;
  color: #FFFFFF;
  font-family: 'Bebas Kai', 'Bebas Neue', sans-serif;
  font-size: 18.4px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gift-therapy-btn.tal-btn-outline {
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.gift-therapy-btn:hover,
.gift-therapy-btn.tal-btn-outline:hover {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: #74632E;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
}

.gift-therapy-btn svg {
  flex-shrink: 0;
}

@media (min-width: 769px) and (max-width: 1100px) {
  .gift-therapy-section {
    min-height: 600px;
  }

  .gift-therapy-bg-img {
    object-position: right 70%;
  }

  .gift-therapy-box {
    max-width: 420px;
    margin-left: auto;
    margin-right: 20px;
    background: rgba(120, 102, 46, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 24px 28px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
}

@media (max-width: 768px) {
  .gift-therapy-section {
    min-height: auto !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 28px 28px 0 0 !important;
  }

  .gift-therapy-bg {
    position: relative !important;
    height: clamp(300px, 75vw, 420px) !important;
    width: 100% !important;
  }

  .gift-therapy-bg-img {
    object-position: right 36% !important;
    height: 100% !important;
  }

  .gift-therapy-content-wrapper {
    padding-top: 24px !important;
    padding-bottom: 60px !important;
    position: relative !important;
  }

  .gift-therapy-layout {
    justify-content: center !important;
    align-items: center !important;
  }

  .gift-therapy-box {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-items: center !important;
    text-align: center !important;
  }

  .gift-therapy-title {
    font-size: clamp(38px, 10vw, 48px) !important;
    margin-bottom: 18px !important;
  }

  .gift-therapy-narrative {
    max-width: 100% !important;
    font-size: 20px !important;
    line-height: 1.62 !important;
    margin-bottom: 24px !important;
    text-align: center !important;
  }

  .gift-therapy-btn {
    width: 100% !important;
    max-width: 351px !important;
  }
}

/* ==========================================================================
   10. ON MY MIND / MY MUSINGS SECTION (EXACT 1:1 FIGMA & USER SCREENSHOT SPEC)
   ========================================================================== */
/* Figma 2469:579 at 1920: 282px band, overlaps the gift photo by 38px */
.musings-section {
  position: relative;
  z-index: 20;
  width: 100%;
  min-height: clamp(180px, 14.69vw, 282px);
  margin-top: calc(-1 * clamp(20px, 1.98vw, 38px));
  border-radius: clamp(32px, 2.6vw, 50px) clamp(32px, 2.6vw, 50px) 0 0;
  overflow: hidden;
  background: linear-gradient(180deg, #A05548 0%, #3A1F1A 100%);
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
}

.musings-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  padding-top: clamp(40px, 3.39vw, 65px);
  padding-bottom: clamp(40px, 3.39vw, 65px);
  width: 100%;
  box-sizing: border-box;
}

/* Quote starts at x=746 of 1920 (37.84% of the 1760px container) */
.musings-title-group {
  flex: 0 0 37.84%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.musings-subtitle {
  font-family: 'Bebas Kai', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0;
  display: block;
}

.musings-title {
  font-family: 'Hatcher', serif;
  font-size: clamp(46px, 3.65vw, 70px);
  font-weight: 400;
  line-height: 1;
  color: #D3B39C;
  margin: 0;
  white-space: nowrap;
  letter-spacing: 0;
}

.musings-quote-wrapper {
  padding-top: 17px;
  flex: 1 1 auto;
  max-width: 1021px;
}

@media (max-width: 1279px) {
  .musings-quote br {
    display: none;
  }
}

.musings-quote {
  font-family: 'Baskerville', serif;
  font-size: clamp(18px, 1.5625vw, 30px);
  font-weight: 400;
  line-height: 1.15;
  color: #ECE1DF;
  margin: 0;
}

@media (max-width: 1023px) {
  .musings-container {
    flex-direction: column !important;
    gap: 20px !important;
    padding-top: 36px !important;
    padding-bottom: 40px !important;
  }

  .musings-quote-wrapper {
    padding-top: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  .musings-section {
    min-height: auto !important;
    margin-top: -20px !important;
    border-radius: 28px 28px 0 0 !important;
  }

  .musings-title {
    font-size: clamp(38px, 9vw, 52px) !important;
  }

  .musings-quote {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
}

/* ==========================================================================
   11. ABOUT KHUSHBOO GUPTA SECTION
   ========================================================================== */
.about-section {
  position: relative;
  width: 100%;
  background-color: #FFF9ED;
  padding-top: clamp(60px, 5.7vw, 110px);
  padding-bottom: clamp(60px, 6.25vw, 120px);
}

.about-layout {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* justify-content: space-between; */
  gap: clamp(36px, 5.5vw, 106px);
  width: 100%;
}

.about-card-wrapper {
  flex: 1 1 52%;
  width: 52%;
  max-width: 866px;
  flex-shrink: 0;
}

.about-card-img {
  width: 100%;
  height: auto;
  aspect-ratio: 866 / 760;
  border-radius: clamp(36px, 4.2vw, 82px);
  display: block;
  object-fit: cover;
}

.about-content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 45%;
  width: 45%;
  max-width: 675px;
  gap: clamp(20px, 1.8vw, 36px);
}

.about-narrative {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.1vw, 22px);
}

.about-narrative p {
  font-family: 'Baskerville', serif;
  font-size: clamp(15.5px, 1.05vw, 20px);
  line-height: 1.45;
  color: #262626;
  margin: 0;
}

.about-logos-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2vw, 38px);
  padding-top: 8px;
}

.about-logo-tiss {
  height: clamp(44px, 3.5vw, 68px);
  width: auto;
  object-fit: contain;
}

.about-logo-beck {
  height: clamp(24px, 1.9vw, 36px);
  width: auto;
  object-fit: contain;
}

.about-logo-emdr {
  height: clamp(44px, 3.5vw, 68px);
  width: auto;
  object-fit: contain;
}

.about-logo-icfai {
  height: clamp(38px, 3.1vw, 60px);
  width: auto;
  object-fit: contain;
}

.about-logo-yaronziv {
  height: clamp(32px, 2.5vw, 48px);
  width: auto;
  object-fit: contain;
}

@media (max-width: 1023px) {
  .about-layout {
    flex-direction: column !important;
    gap: 36px !important;
  }

  .about-card-wrapper {
    width: 100% !important;
    max-width: 600px !important;
  }

  .about-content-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  .about-section {
    padding-top: 40px !important;
    padding-bottom: 48px !important;
  }

  .about-card-img {
    border-radius: 32px !important;
  }

  .about-narrative {
    gap: 16px !important;
  }

  .about-logos-row {
    gap: 16px !important;
  }
}

/* =========================================================================
   12. REAL STORIES / TESTIMONIALS SECTION (TRUE FULL WIDTH SWIPER SLIDER)
   ========================================================================= */
.testimonials-section {
  background-color: #FFF9ED;
  position: relative;
  padding-top: 60px;
  padding-bottom: 90px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.testimonials-fullwidth {
  position: relative;
  width: 100%;
  max-width: 100%;
  /* padding: 0 clamp(12px, 1.6vw, 24px); */
  box-sizing: border-box;
}

/* Swiper Carousel */
.testimonials-swiper {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  padding-top: 65px;
  padding-bottom: 62px;
}

.testimonials-swiper .swiper-wrapper {
  align-items: stretch;
  height: auto !important;
}

.testimonials-swiper .swiper-slide {
  height: auto !important;
  box-sizing: border-box;
  width: 100%;
}

.testimonials-slide-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 clamp(16px, 2.5vw, 60px);
  box-sizing: border-box;
  gap: clamp(40px, 5.2vw, 100px);
}

/* Row 1: Header + Surgeon */
.testimonials-row-top {
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: 100%;
}

@media (min-width: 1024px) {
  .testimonials-row-top {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: clamp(20px, 3vw, 40px);
    width: 100%;
    margin: 0;
  }
}

/* Section Header: Aligns above Founder Card narrative */
.testimonials-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .testimonials-header {
    margin-left: clamp(40px, 8vw, 180px);
    margin-bottom: 8px;
  }
}

@media (min-width: 1280px) {
  .testimonials-header {
    margin-left: clamp(80px, 12vw, 240px);
    margin-bottom: 10px;
  }
}

@media (min-width: 1536px) {
  .testimonials-header {
    margin-left: clamp(120px, 15vw, 280px);
    margin-bottom: 12px;
  }
}

.testimonials-subtitle {
  font-family: 'Bebas Kai', sans-serif;
  font-size: 20px;
  line-height: 20px;
  color: #2B2B2B;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.testimonials-title {
  font-family: 'Hatcher', serif;
  font-size: clamp(48px, 4vw, 70px);
  line-height: 1;
  color: #123A39;
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .testimonials-title {
    font-size: 46px;
    white-space: normal;
  }
}

/* Row 2: Founder + Lawyer */
.testimonials-row-bottom {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
}

@media (min-width: 1024px) {
  .testimonials-row-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: clamp(16px, 2.5vw, 40px);
    width: 100%;
  }
}

/* Base Testimonial Unit & Card */
.testimonial-unit {
  position: relative;
}

.testimonial-card {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  box-sizing: border-box;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.05);
}

.testimonial-text-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.testimonial-text {
  font-family: 'Baskerville', serif;
  font-size: 20px;
  line-height: 1.45;
  color: #2B2B2B;
  margin: 0;
}

@media (max-width: 768px) {
  .testimonial-text {
    font-size: clamp(18.5px, 4.6vw, 21.5px) !important;
    line-height: 1.58 !important;
  }
}

/* Read More / Read Less: text clamps to 4 lines (height set in js/main.js) */
.testimonial-clamp {
  overflow: hidden;
  transition: max-height 0.45s ease;
}

.testimonial-clamp .testimonial-text + .testimonial-text {
  margin-top: 14px;
}

.testimonial-toggle-btn {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  margin-top: 10px;
  font-family: 'Baskerville', serif;
  font-size: 20px;
  line-height: 1.45;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: #2B2B2B;
  cursor: pointer;
  transition: color 0.2s ease;
}

.testimonial-toggle-btn:hover {
  color: #123A39;
}

.testimonial-toggle-btn:focus-visible {
  outline: 2px solid #123A39;
  outline-offset: 3px;
  border-radius: 2px;
}

.testimonial-toggle-btn[hidden] {
  display: none !important;
}

.testimonial-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 24px;
}

.testimonial-stat-num {
  font-family: 'Hatcher', serif;
  font-size: 30px;
  line-height: 1;
  color: #262626;
  font-weight: 700;
}

.testimonial-stat-role {
  font-family: 'Bebas Kai', sans-serif;
  font-size: 20px;
  line-height: 1.1;
  color: #262626;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Photo Wrapper Base */
.testimonial-photo-wrap {
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 6px 14px 32px rgba(0, 0, 0, 0.22);
  background-color: #E2D7CC;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
}

.testimonial-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* FLIPPED IMAGE: Right 3rd image is flipped horizontally */
.photo-lawyer .testimonial-photo,
.photo-lawyer img,
.testimonial-lawyer .testimonial-photo {
  transform: scaleX(-1);
}

/* =========================================================================
   Unit Alignments: Desktop Full-Width (>= 1280px)
   Spans edge-to-edge across the screen matching reference design
   ========================================================================= */

/* 1. Surgeon (Top-Right) */
@media (min-width: 1280px) {
  .testimonial-surgeon {
    position: relative;
    flex: 0 0 auto;
    width: clamp(620px, 48vw, 820px);
    max-width: 50vw;
    margin-left: auto;
    margin-right: 0;
    display: flex;
    align-items: center;
  }

  .photo-surgeon {
    position: absolute;
    left: 0;
    top: -30px;
    width: clamp(230px, 16vw, 275px);
    height: clamp(310px, 22vw, 365px);
    transform: rotate(-7.2deg);
    z-index: 5;
  }

  .card-surgeon {
    position: relative;
    margin-left: clamp(80px, 6.5vw, 110px);
    width: calc(100% - clamp(80px, 6.5vw, 110px));
    min-height: 310px;
    padding: 38px 44px 34px clamp(150px, 11vw, 185px);
    z-index: 2;
  }

  .testimonial-surgeon:hover .photo-surgeon {
    transform: rotate(-5deg) translateY(-4px) scale(1.02);
    box-shadow: 8px 18px 36px rgba(0, 0, 0, 0.28);
  }
}

@media (min-width: 1536px) {
  .testimonial-surgeon {
    width: clamp(700px, 48vw, 860px);
  }

  .photo-surgeon {
    top: -35px;
  }

  .card-surgeon {
    min-height: 325px;
    padding: 42px 48px 36px clamp(165px, 12vw, 200px);
  }
}

/* 2. Startup Founder (Bottom-Left) */
@media (min-width: 1280px) {
  .testimonial-founder {
    position: relative;
    flex: 1;
    width: calc(50% - 15px);
    max-width: calc(50% - 15px);
    display: flex;
    align-items: center;
  }

  .photo-founder {
    position: absolute;
    left: 0;
    top: -45px;
    width: clamp(270px, 19vw, 335px);
    height: clamp(370px, 26vw, 445px);
    transform: rotate(-7.2deg);
    z-index: 5;
  }

  .card-founder {
    position: relative;
    margin-left: clamp(90px, 7.5vw, 125px);
    width: calc(100% - clamp(90px, 7.5vw, 125px));
    min-height: 390px;
    padding: 42px 38px 36px clamp(175px, 12.5vw, 225px);
    z-index: 2;
  }

  .testimonial-founder:hover .photo-founder {
    transform: rotate(-5deg) translateY(-4px) scale(1.02);
    box-shadow: 8px 18px 36px rgba(0, 0, 0, 0.28);
  }
}

@media (min-width: 1536px) {
  .photo-founder {
    top: -50px;
  }

  .card-founder {
    min-height: 410px;
    padding: 46px 44px 40px clamp(190px, 13vw, 240px);
  }
}

/* 3. Lawyer (Bottom-Right) */
@media (min-width: 1280px) {
  .testimonial-lawyer {
    position: relative;
    flex: 1;
    width: calc(50% - 15px);
    max-width: calc(50% - 15px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
  }

  .card-lawyer {
    position: relative;
    margin-right: clamp(90px, 7.5vw, 125px);
    width: calc(100% - clamp(90px, 7.5vw, 125px));
    min-height: 390px;
    padding: 42px clamp(175px, 12.5vw, 225px) 36px 40px;
    z-index: 2;
  }

  .photo-lawyer {
    position: absolute;
    right: 0;
    top: -25px;
    width: clamp(260px, 18vw, 325px);
    height: clamp(360px, 25vw, 435px);
    transform: rotate(7.2deg);
    z-index: 5;
  }

  .testimonial-lawyer:hover .photo-lawyer {
    transform: rotate(5deg) translateY(-4px) scale(1.02);
    box-shadow: 8px 18px 36px rgba(0, 0, 0, 0.28);
  }
}

@media (min-width: 1536px) {
  .photo-lawyer {
    top: -30px;
  }

  .card-lawyer {
    min-height: 410px;
    padding: 46px clamp(190px, 13vw, 240px) 40px 46px;
  }
}

/* =========================================================================
   Medium Screens (1024px - 1279px)
   ========================================================================= */
@media (min-width: 1024px) and (max-width: 1279px) {
  .testimonial-surgeon {
    position: relative;
    width: 580px;
    max-width: 55%;
    margin-left: auto;
  }

  .photo-surgeon {
    position: absolute;
    left: 0;
    top: -20px;
    width: 210px;
    height: 290px;
    transform: rotate(-6deg);
    z-index: 5;
  }

  .card-surgeon {
    margin-left: 80px;
    width: calc(100% - 80px);
    min-height: 290px;
    padding: 32px 30px 28px 145px;
  }

  .testimonial-founder,
  .testimonial-lawyer {
    position: relative;
    width: calc(50% - 18px);
  }

  .photo-founder {
    position: absolute;
    left: 0;
    top: -20px;
    width: 240px;
    height: 330px;
    transform: rotate(-6deg);
    z-index: 5;
  }

  .card-founder {
    margin-left: 85px;
    width: calc(100% - 85px);
    min-height: 380px;
    padding: 34px 28px 30px 165px;
  }

  .card-lawyer {
    margin-right: 85px;
    width: calc(100% - 85px);
    min-height: 380px;
    padding: 34px 165px 30px 28px;
  }

  .photo-lawyer {
    position: absolute;
    right: 0;
    top: -20px;
    width: 230px;
    height: 320px;
    transform: rotate(6deg);
    z-index: 5;
  }
}

/* =========================================================================
   Mobile & Tablet (<= 1023px)
   ========================================================================= */
@media (max-width: 1023px) {
  .testimonials-section {
    padding-top: 32px !important;
    padding-bottom: 8px !important;
  }

  /* Centered Real Stories Header for Mobile */
  .testimonials-mobile-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-bottom: 20px !important;
    gap: 8px !important;
    padding: 0 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .testimonials-mobile-header .testimonials-subtitle {
    font-family: 'Bebas Kai', sans-serif !important;
    font-size: 20px !important;
    line-height: 20px !important;
    color: #2B2B2B !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-align: center !important;
    display: block !important;
  }

  .testimonials-mobile-header .testimonials-title {
    font-family: 'Hatcher', serif !important;
    font-size: clamp(42px, 10vw, 54px) !important;
    line-height: 1 !important;
    color: #123A39 !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  /* Hide Desktop Swiper (which has 3 cards per slide) on mobile */
  .testimonials-swiper {
    display: none !important;
  }

  /* Show Mobile Swiper (1 card per slide) */
  .testimonials-swiper-mobile {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 6px 0 2px 0 !important;
    box-sizing: border-box !important;
  }

  .testimonials-swiper-mobile .swiper-wrapper {
    align-items: flex-start !important;
    /* CRITICAL: Never stretch slides to tallest slide! */
  }

  .testimonials-swiper-mobile .swiper-slide {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  .testimonial-surgeon,
  .testimonial-founder,
  .testimonial-lawyer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }

  .testimonial-photo-wrap {
    position: relative !important;
    width: clamp(200px, 48vw, 240px) !important;
    height: clamp(250px, 58vw, 290px) !important;
    margin-bottom: -46px !important;
    z-index: 5 !important;
  }

  .photo-surgeon {
    transform: rotate(-4deg) !important;
  }

  .photo-founder {
    transform: rotate(-4deg) !important;
  }

  .photo-lawyer {
    transform: rotate(4deg) !important;
  }

  .card-surgeon,
  .card-founder,
  .card-lawyer {
    margin: 0 !important;
    width: 100% !important;
    padding: 64px clamp(18px, 4.5vw, 26px) 22px clamp(18px, 4.5vw, 26px) !important;
    min-height: auto !important;
    height: auto !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .testimonial-text-wrapper {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .testimonial-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 10px !important;
    margin-bottom: 4px !important;
    color: #123A39 !important;
    font-family: 'Bebas Kai', sans-serif !important;
    font-size: 17px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    transition: color 0.2s ease, opacity 0.2s ease !important;
  }

  .testimonial-toggle-btn:hover {
    color: #A05548 !important;
  }

  .testimonial-meta {
    margin-top: 14px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(43, 43, 43, 0.12) !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    box-sizing: border-box !important;
  }

  .testimonial-stat-num {
    font-size: 28px !important;
    line-height: 1 !important;
    color: #262626 !important;
  }

  .testimonial-stat-role {
    font-size: 18px !important;
    line-height: 1.1 !important;
    color: #262626 !important;
  }

  .testimonials-mobile-pagination {
    position: relative !important;
    bottom: auto !important;
    margin-top: clamp(22px, 6vw, 32px) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 10 !important;
  }

  .testimonials-mobile-pagination .swiper-pagination-bullet {
    width: 9px !important;
    height: 9px !important;
    background: rgba(18, 58, 57, 0.25) !important;
    opacity: 1 !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    margin: 0 3px !important;
  }

  .testimonials-mobile-pagination .swiper-pagination-bullet-active {
    background: #123A39 !important;
    width: 26px !important;
    border-radius: 6px !important;
  }
}

@media (min-width: 1024px) {
  .testimonials-mobile-header {
    display: none !important;
  }

  .testimonials-swiper-mobile {
    display: none !important;
  }
}

/* =========================================================================
   Floating Cursor Follower (Sonodyne Left/Right Movement Arrow Function)
   ========================================================================= */
.testimonials-cursor-follower {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.4);
  transition: opacity 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform, left, top;
}

.testimonials-cursor-follower.is-active {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1);
}

.testimonials-cursor-follower.is-down {
  transform: translate3d(-50%, -50%, 0) scale(0.88);
}

.cursor-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid rgba(18, 58, 57, 0.5);
  box-shadow: 0 4px 16px rgba(18, 58, 57, 0.14), 0 1px 4px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #123A39;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.cursor-arrow-icon {
  width: 18px;
  height: 18px;
  display: block;
  stroke: #123A39;
}

.testimonials-cursor-follower.is-hovering-link {
  opacity: 0.35;
  transform: translate3d(-50%, -50%, 0) scale(0.65);
}

/* Default / Right side: Show Next arrow */
.testimonials-cursor-follower.is-next .cursor-arrow-next {
  display: block;
}

.testimonials-cursor-follower.is-next .cursor-arrow-prev {
  display: none;
}

/* Left side: Show Prev arrow */
.testimonials-cursor-follower.is-prev .cursor-arrow-prev {
  display: block;
}

.testimonials-cursor-follower.is-prev .cursor-arrow-next {
  display: none;
}

/* Hide default cursor on desktop hover devices so the follower shines */
@media (hover: hover) and (pointer: fine) {
  .testimonials-swiper {
    cursor: none;
  }

  .testimonials-swiper a,
  .testimonials-swiper button {
    cursor: pointer;
  }
}

/* =========================================================================
   13. FAQS SECTION
   ========================================================================= */
.faqs-section {
  background-color: #FFF9ED;
  position: relative;
  padding-top: 100px;
  padding-bottom: 130px;
  width: 100%;
}

.faqs-inner {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
}

.faqs-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 48px;
}

.faqs-subtitle {
  font-family: 'Bebas Kai', sans-serif;
  font-size: 20px;
  line-height: 1.1;
  color: #2B2B2B;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.faqs-title {
  font-family: 'Hatcher', serif;
  font-size: 70px;
  line-height: 1;
  color: #123A39;
  margin: 0;
}

.faqs-accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.faq-item {
  border-bottom: 1px solid rgba(43, 43, 43, 0.16);
  background: transparent;
  transition: border-color 0.2s ease;
}

.faq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  padding: 22px 0;
  cursor: pointer;
  text-align: left;
  transition: color 0.2s ease;
}

.faq-question {
  font-family: 'Bebas Kai', sans-serif;
  font-size: 20px;
  line-height: 1.2;
  color: #2B2B2B;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color 0.2s ease;
}

.faq-header:hover .faq-question {
  color: #123A39;
}

.faq-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: rgba(43, 43, 43, 0.55);
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.faq-header:hover .faq-icon {
  color: #123A39;
}

.faq-icon-svg {
  display: block;
}

.faq-line-v {
  transition: opacity 0.2s ease;
}

/* When active: minus state (vertical line hidden, clean em-dash remains) */
.faq-item.active .faq-line-v {
  display: none;
}

/* Expanded divider below question header */
.faq-item.active .faq-header {
  border-bottom: 1px solid rgba(43, 43, 43, 0.16);
}

.faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.faq-item.active .faq-content {
  grid-template-rows: 1fr;
}

.faq-content-inner {
  overflow: hidden;
  padding: 0;
  transition: padding 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.faq-item.active .faq-content-inner {
  padding: 24px 0 28px 0;
}

.faq-answer {
  font-family: 'Baskerville', serif;
  font-size: 20px;
  line-height: 1.55;
  color: #2B2B2B;
  max-width: 1220px;
  margin: 0;
}

@media (max-width: 1023px) {
  .faqs-section {
    padding-top: 12px !important;
    padding-bottom: 16px !important;
  }

  .faqs-header {
    margin-bottom: 18px !important;
    gap: 6px !important;
  }

  .faqs-title {
    font-size: clamp(38px, 9vw, 52px) !important;
  }

  .faq-header {
    padding: 14px 0 !important;
  }

  .faq-question {
    font-size: clamp(16px, 4vw, 18px) !important;
  }

  .faq-answer {
    font-size: clamp(18.5px, 4.6vw, 21px) !important;
    line-height: 1.60 !important;
  }
}

@media (max-width: 767px) {
  .faqs-section {
    padding-top: 10px !important;
    padding-bottom: 14px !important;
  }

  .faqs-title {
    font-size: 38px !important;
  }

  .faq-header {
    padding: 12px 0 !important;
  }

  .faq-question {
    font-size: 16.5px !important;
  }

  .faq-answer {
    font-size: clamp(18.5px, 4.6vw, 21px) !important;
    line-height: 1.60 !important;
  }
}

/* =========================================================================
   14. CONTACT SECTION ("LET'S TALK")
   ========================================================================= */
.contact-section {
  background-color: #FFF9ED;
  position: relative;
  padding-top: clamp(60px, 6vw, 100px);
  padding-bottom: clamp(70px, 7.5vw, 130px);
  width: 100%;
}

.contact-inner {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 40px);
  box-sizing: border-box;
}

/* Top Row: CONTACT Heading + Narrative Paragraph */
.contact-header-row {
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 3.5vw, 65px);
  margin-bottom: clamp(40px, 5vw, 105px);
  padding-left: clamp(20px, 8vw, 195px);
}

.contact-title {
  font-family: 'Hatcher', serif;
  font-size: clamp(48px, 4.5vw, 68px);
  line-height: 1;
  color: #2B2B2B;
  letter-spacing: 0.02em;
  margin: 0;
  flex-shrink: 0;
}

.contact-header-desc {
  font-family: 'Baskerville', serif;
  font-size: clamp(17px, 1.25vw, 21px);
  line-height: 1.45;
  color: #2B2B2B;
  max-width: 650px;
  margin: 0;
  padding-top: 4px;
}

/* Main Row: 3 Columns (Photo, Info, Form) */
.contact-main-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.25fr) minmax(200px, 0.95fr) minmax(240px, 1fr);
  justify-content: space-between;
  align-items: stretch;
  gap: clamp(20px, 3vw, 70px);
  width: 100%;
}

/* Col 1: Hands Photo */
.contact-image-col {
  width: 100%;
  display: flex;
}

.contact-image-wrap {
  width: 100%;
  aspect-ratio: 604 / 530;
  border-radius: clamp(36px, 3.5vw, 60px);
  overflow: hidden;
  background-color: #1A2E26;
}

.contact-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.contact-image-wrap:hover .contact-image {
  transform: scale(1.03);
}

/* Col 2: LET'S TALK Info */
.contact-info-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.contact-talk-title {
  font-family: 'Hatcher', serif;
  font-size: clamp(46px, 4.2vw, 68px);
  line-height: 1;
  color: #2B2B2B;
  margin: 0;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.contact-info-bottom {
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.contact-talk-note {
  font-family: 'Bebas Kai', sans-serif;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: 0.04em;
  color: #2B2B2B;
  text-transform: uppercase;
  margin: 0 0 clamp(30px, 3vw, 45px) 0;
}

.contact-talk-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-phone {
  font-family: 'Baskerville', serif;
  font-size: 19px;
  line-height: 1.35;
  color: #2B2B2B;
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-phone:hover {
  color: #123A39;
}

.contact-email {
  font-family: 'Baskerville', serif;
  font-weight: 700;
  font-size: clamp(19px, 1.4vw, 21px);
  line-height: 1.35;
  color: #2B2B2B;
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-email:hover {
  color: #123A39;
}

/* Col 3: Form Fields */
.contact-form-col {
  width: 100%;
  display: flex;
}

.contact-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.contact-form-group {
  position: relative;
  width: 100%;
  margin-bottom: 2px;
}

.contact-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(43, 43, 43, 0.18);
  padding: 14px 0 8px 0;
  font-family: 'Baskerville', serif;
  font-size: 17.5px;
  font-weight: 400;
  color: #2B2B2B;
  outline: none;
  border-radius: 0;
  box-sizing: border-box;
  transition: border-color 0.25s ease;
}

.contact-input::placeholder {
  font-family: 'Baskerville', serif;
  font-size: 17.5px;
  font-weight: 400;
  color: #8C8479;
  opacity: 1;
}

.contact-input:focus {
  border-bottom-color: #2B2B2B;
}

/* Horizontal line before button */
.contact-form-divider {
  width: 100%;
  height: 1px;
  background-color: rgba(43, 43, 43, 0.18);
  margin-top: auto;
  margin-bottom: 24px;
}

.contact-form-action {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.contact-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px 34px;
  border-radius: 50px;
  border: 1.5px solid #CBA69E;
  background: transparent;
  color: #CBA69E;
  font-family: 'Bebas Kai', sans-serif;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-submit-btn:hover {
  background-color: #CBA69E;
  color: #FFFFFF;
  border-color: #CBA69E;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(203, 166, 158, 0.3);
}

.btn-arrow {
  font-size: 18px;
  transition: transform 0.25s ease;
}

.contact-submit-btn:hover .btn-arrow {
  transform: translateX(4px);
}

.form-success-msg {
  font-family: 'Baskerville', serif;
  font-size: 16px;
  color: #123A39;
  margin-top: 16px;
  padding: 12px 18px;
  background: rgba(18, 58, 57, 0.08);
  border-radius: 8px;
}

.form-success-msg.hidden,
.contact-form .hidden {
  display: none !important;
}

/* =========================================================================
   Responsive Breakpoints for Section 14
   ========================================================================= */
@media (max-width: 1023px) {
  .contact-section {
    padding-top: 24px !important;
    padding-bottom: 40px !important;
  }

  .contact-header-row {
    flex-direction: column;
    gap: 12px !important;
    margin-bottom: 24px !important;
    padding-left: 0 !important;
  }

  .contact-title {
    font-size: clamp(42px, 9vw, 56px) !important;
  }

  .contact-header-desc {
    font-size: clamp(19px, 4.8vw, 22px) !important;
    line-height: 1.62 !important;
  }

  .contact-main-row {
    grid-template-columns: 1fr;
    gap: 28px !important;
  }

  .contact-image-col {
    grid-column: span 1;
    max-width: 100%;
  }

  .contact-talk-title {
    margin-bottom: 14px !important;
    white-space: normal;
  }

  .contact-talk-note {
    margin-bottom: 14px !important;
  }

  .contact-info-bottom {
    margin-top: 0;
  }

  .contact-form-divider {
    margin-top: 24px !important;
    padding-top: 0;
  }
}

/* =========================================================================
   STYLISH BACK TO TOP BUTTON WITH SCROLL PROGRESS RING
   ========================================================================= */
.back-to-top {
  position: fixed;
  right: clamp(20px, 3vw, 36px);
  bottom: clamp(20px, 3vw, 36px);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: rgba(255, 249, 237, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: none;
  cursor: pointer;
  z-index: 990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 8px 24px rgba(18, 58, 57, 0.16), 0 2px 6px rgba(0, 0, 0, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.85);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.35s,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.back-to-top:hover {
  background-color: #123A39;
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 12px 30px rgba(18, 58, 57, 0.28), 0 4px 10px rgba(0, 0, 0, 0.1);
}

.progress-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  transform-origin: center;
  pointer-events: none;
}

.progress-ring-bg {
  stroke: rgba(18, 58, 57, 0.12);
  transition: stroke 0.25s ease;
}

.back-to-top:hover .progress-ring-bg {
  stroke: rgba(255, 255, 255, 0.15);
}

.progress-ring-fill {
  stroke: #123A39;
  stroke-linecap: round;
  stroke-dasharray: 138.23;
  stroke-dashoffset: 138.23;
  transition: stroke-dashoffset 0.12s ease-out, stroke 0.25s ease;
}

.back-to-top:hover .progress-ring-fill {
  stroke: #D3B39C;
}

.back-to-top-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #123A39;
  transition: color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}

.back-to-top-icon svg {
  display: block;
  stroke: currentColor;
  transition: transform 0.25s ease;
}

.back-to-top:hover .back-to-top-icon {
  color: #FFF9ED;
}

.back-to-top:hover .back-to-top-icon svg {
  transform: translateY(-3px);
}

@media (max-width: 767px) {
  .back-to-top {
    width: 46px;
    height: 46px;
    right: 18px;
    bottom: 20px;
  }
}

/* =========================================================================
   PROFESSIONAL BIDIRECTIONAL SCROLL ANIMATIONS (SCROLL UP & DOWN)
   ========================================================================= */
.tal-scroll-anim {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* Variant: Scale reveal for large focal cards */
.tal-scroll-anim.tal-scale {
  transform: translateY(24px) scale(0.96);
}

/* Variant: Left/Right directional entrance */
.tal-scroll-anim.tal-from-left {
  transform: translateX(-32px);
}

.tal-scroll-anim.tal-from-right {
  transform: translateX(32px);
}

/* Active State when in viewport */
.tal-scroll-anim.is-inview {
  opacity: 1;
  transform: none;
}

/* Stagger delay classes for grouped items */
.tal-delay-1 {
  transition-delay: 0.08s;
}

.tal-delay-2 {
  transition-delay: 0.16s;
}

.tal-delay-3 {
  transition-delay: 0.24s;
}

.tal-delay-4 {
  transition-delay: 0.32s;
}

.tal-delay-5 {
  transition-delay: 0.40s;
}

.tal-delay-6 {
  transition-delay: 0.48s;
}

.tal-delay-7 {
  transition-delay: 0.56s;
}

.tal-delay-8 {
  transition-delay: 0.64s;
}

.tal-delay-9 {
  transition-delay: 0.72s;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .tal-scroll-anim {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .feelings-wheel-img,
  .corporate-teal-dot,
  .corporate-teal-dot::before,
  .corporate-teal-dot::after,
  .tal-rope-anim {
    animation: none !important;
  }
}

/* ==========================================================================
   TAL THERAPY & COACHING PAGE STYLES (tal-therapy.html)
   ========================================================================== */

/* 1. Therapy Hero Section */
.therapy-hero-section {
  position: relative;
  width: 100%;
  height: 1080px;
  min-height: 1080px;
  overflow: hidden;
  background-color: #1B1918;
  color: #FFFFFF;
}

@media (max-width: 1023px) {
  .therapy-hero-section {
    height: auto;
    min-height: 680px;
    padding-bottom: 80px;
  }
}

.therapy-hero-bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.therapy-hero-bg-inner {
  position: relative;
  width: 1920px;
  height: 1080px;
  flex-shrink: 0;
}

.therapy-hero-bg-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.therapy-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.35) 42%, rgba(0, 0, 0, 0.08) 64%, rgba(0, 0, 0, 0) 100%);
}

.therapy-hero-content-col {
  position: absolute;
  left: clamp(40px, 8.2vw, 158px);
  top: clamp(160px, 19vw, 215px);
  max-width: clamp(480px, 32vw, 550px);
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 1.8vw, 30px);
  z-index: 10;
}

@media (max-width: 1023px) {
  .therapy-hero-content-col {
    position: relative;
    left: auto;
    top: auto;
    margin: 40px auto 0;
    padding: 0 24px;
    max-width: 100%;
  }
}

.therapy-hero-title {
  font-family: 'Hatcher', serif;
  font-size: clamp(56px, 4.3vw, 76px);
  line-height: 1.02;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  margin: 0;
}

.therapy-hero-narrative {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.4vw, 8px);
}

.therapy-hero-narrative p {
  font-family: 'Baskerville', serif;
  font-size: clamp(16.5px, 1.08vw, 19.5px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
}

.therapy-hero-quote {
  font-family: 'Bebas Kai', sans-serif;
  font-size: clamp(18px, 1.2vw, 22px);
  letter-spacing: 0.06em;
  line-height: 1.25;
  color: #FFFFFF;
  text-transform: uppercase;
  margin: 0;
  padding-top: 2px;
}

.therapy-hero-btn-wrap {
  padding-top: 4px;
}

.therapy-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: clamp(290px, 20vw, 340px);
  padding: 13px 30px;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-family: 'Bebas Kai', sans-serif;
  font-size: clamp(16px, 1.05vw, 19px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.therapy-hero-btn:hover {
  background: #FFFFFF;
  color: #123A39;
  border-color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

.therapy-btn-arrow {
  font-size: 1.25em;
  transition: transform 0.25s ease;
}

.therapy-hero-btn:hover .therapy-btn-arrow {
  transform: translateX(5px);
}

/* 2. Coaching & Labs Section (Dark Textured Autumn Background with Overlay) */
.coaching-labs-section {
  position: relative;
  width: 100%;
  background-color: #120A07;
  overflow: hidden;
  padding-top: clamp(80px, 6.5vw, 130px);
  padding-bottom: clamp(90px, 7.5vw, 145px);
  border-radius: 0 !important;
  margin-top: 0 !important;
  z-index: 10;
}

.coaching-labs-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.coaching-labs-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.92;
}

.coaching-labs-bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(18, 9, 7, 0.26);
}

.coaching-labs-container {
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 80px);
  position: relative;
  z-index: 10;
  box-sizing: border-box;
}

.coaching-labs-grid {
  display: grid;
  grid-template-columns: minmax(0, 809fr) minmax(0, 769fr);
  gap: clamp(32px, 3.8vw, 72px);
  align-items: stretch;
  width: 100%;
}

@media (max-width: 1023px) {
  .coaching-labs-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.coaching-glass-card {
  width: 100%;
  box-sizing: border-box;
  min-height: clamp(650px, 44vw, 837px);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: clamp(20px, 1.3vw, 24px);
  padding: clamp(36px, 3.6vw, 64px) clamp(34px, 3.4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
}

@media (max-width: 1023px) {
  .coaching-glass-card {
    min-height: auto;
  }
}

.coaching-card-header {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-bottom: clamp(20px, 2.2vw, 36px);
}

.coaching-toggle-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.2);
  border: 1.2px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  padding: 5px 6px 5px 18px;
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.2);
}

.coaching-toggle-text {
  font-family: 'Bebas Kai', sans-serif;
  font-size: clamp(14px, 1.05vw, 17px);
  letter-spacing: 0.14em;
  color: #FFFFFF;
  text-transform: uppercase;
  line-height: 1;
}

.coaching-toggle-knob {
  width: clamp(18px, 1.3vw, 22px);
  height: clamp(18px, 1.3vw, 22px);
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.coaching-glass-main-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-top: auto;
}

.coaching-glass-title {
  font-family: 'Hatcher', serif;
  font-size: clamp(56px, 5vw, 84px);
  line-height: 1;
  color: #FFFFFF;
  margin-bottom: clamp(28px, 2.6vw, 42px);
  letter-spacing: 0.02em;
}

.coaching-glass-desc {
  font-family: 'Baskerville', serif;
  font-size: clamp(16.5px, 1.18vw, 20.5px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.6vw, 24px);
  margin: 0;
}

.coaching-right-col {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.4vw, 46px);
  justify-content: space-between;
}

.coaching-terracotta-card {
  width: 100%;
  box-sizing: border-box;
  min-height: clamp(380px, 26vw, 488px);
  background: linear-gradient(180deg, #BA6B52 0%, #7E3E2F 100%);
  border-radius: clamp(20px, 1.3vw, 24px);
  padding: clamp(36px, 3.4vw, 54px) clamp(34px, 3.2vw, 48px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.35);
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

@media (max-width: 1023px) {
  .coaching-terracotta-card {
    min-height: auto;
  }
}

.coaching-terracotta-title {
  font-family: 'Bebas Kai', sans-serif;
  font-size: clamp(26px, 2.3vw, 35px);
  letter-spacing: 0.06em;
  color: #FFFFFF;
  margin-bottom: clamp(22px, 2.2vw, 30px);
  text-transform: uppercase;
  line-height: 1.1;
}

.coaching-terracotta-sub {
  font-family: 'Bebas Kai', sans-serif;
  font-size: clamp(15px, 1.1vw, 18px);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: clamp(12px, 1.2vw, 16px);
  text-transform: uppercase;
  line-height: 1.1;
}

.coaching-topics-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.65vw, 10px);
}

.coaching-topics-list li {
  font-family: 'Bebas Kai', sans-serif;
  font-size: clamp(15.5px, 1.15vw, 19px);
  letter-spacing: 0.05em;
  color: #FFFFFF;
  text-transform: uppercase;
  line-height: 1.4;
}

.coaching-labs-row {
  width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.3vw, 20px);
}

@media (max-width: 640px) {
  .coaching-labs-row {
    grid-template-columns: 1fr;
  }
}

.coaching-lab-card {
  width: 100%;
  box-sizing: border-box;
  height: clamp(240px, 16vw, 303px);
  min-height: clamp(240px, 16vw, 303px);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: clamp(20px, 1.3vw, 24px);
  padding: clamp(26px, 2.2vw, 36px) clamp(18px, 1.6vw, 26px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.35s ease;
}

@media (max-width: 640px) {
  .coaching-lab-card {
    height: auto;
    min-height: 180px;
  }
}

.coaching-lab-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 26px 55px rgba(0, 0, 0, 0.38);
}

.coaching-lab-icon {
  width: clamp(64px, 5.5vw, 92px);
  height: clamp(64px, 5.5vw, 92px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 20px;
}

.coaching-lab-icon svg,
.coaching-lab-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.coaching-lab-title {
  font-family: 'Bebas Kai', sans-serif;
  font-size: clamp(21px, 1.6vw, 27px);
  line-height: 1.15;
  letter-spacing: 0.06em;
  color: #FFFFFF;
  text-transform: uppercase;
  margin: 0;
}

/* 3. Awareness Arc Section */
.awareness-arc-section {
  position: relative;
  width: 100%;
  background-color: #FFF9ED;
  padding-top: clamp(80px, 7vw, 130px);
  padding-bottom: clamp(90px, 8vw, 140px);
}

.awareness-arc-header {
  text-align: center;
  margin-bottom: clamp(40px, 4vw, 70px);
}

.awareness-arc-subtitle {
  font-family: 'Bebas Kai', sans-serif;
  font-size: clamp(16px, 1.2vw, 20px);
  letter-spacing: 0.14em;
  color: #2B2B2B;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}

.awareness-arc-title {
  font-family: 'Hatcher', serif;
  font-size: clamp(46px, 4.4vw, 74px);
  color: #123A39;
  margin: 0;
}

.awareness-arc-diagram-wrap {
  position: relative;
  max-width: 1100px;
  margin: 0 auto clamp(50px, 4.5vw, 80px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.awareness-arc-diagram-wrap img,
.awareness-arc-diagram-wrap svg {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
}

.awareness-steps-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(10px, 1.2vw, 20px);
  align-items: stretch;
}

@media (max-width: 1023px) {
  .awareness-steps-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .awareness-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.awareness-step-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  padding: clamp(20px, 1.8vw, 28px) clamp(16px, 1.4vw, 22px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.awareness-step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  border-color: #B85D43;
}

.awareness-step-card.active {
  background: #FFFFFF;
  border: 1.5px solid #B85D43;
  box-shadow: 0 12px 32px rgba(184, 93, 67, 0.15);
  grid-column: span 1;
}

@media (min-width: 1024px) {
  .awareness-step-card.active {
    grid-column: span 2;
    align-items: flex-start;
    text-align: left;
    padding: clamp(24px, 2.2vw, 36px);
  }
}

.awareness-step-title {
  font-family: 'Hatcher', serif;
  font-size: clamp(26px, 2vw, 34px);
  color: #123A39;
  text-transform: capitalize;
  margin: 0;
}

.awareness-step-desc {
  font-family: 'Baskerville', serif;
  font-size: clamp(14.5px, 1.05vw, 17px);
  line-height: 1.48;
  color: #2B2B2B;
  margin-top: 10px;
}

/* 4. How It Works Section */
.how-it-works-section {
  position: relative;
  width: 100%;
  background-color: #FFF9ED;
  padding-top: clamp(60px, 5.5vw, 100px);
  padding-bottom: clamp(80px, 7vw, 130px);
}

.how-it-works-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 5vw, 90px);
  align-items: center;
}

@media (max-width: 1023px) {
  .how-it-works-grid {
    grid-template-columns: 1fr;
  }
}

.how-it-works-subtitle {
  font-family: 'Bebas Kai', sans-serif;
  font-size: clamp(16px, 1.2vw, 20px);
  letter-spacing: 0.14em;
  color: #2B2B2B;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}

.how-it-works-title {
  font-family: 'Hatcher', serif;
  font-size: clamp(46px, 4.4vw, 74px);
  color: #123A39;
  margin-bottom: clamp(24px, 2.5vw, 38px);
}

.how-it-works-convo-title {
  font-family: 'Bebas Kai', sans-serif;
  font-size: clamp(22px, 1.8vw, 28px);
  letter-spacing: 0.05em;
  color: #123A39;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.how-it-works-desc {
  font-family: 'Baskerville', serif;
  font-size: clamp(17px, 1.25vw, 22px);
  line-height: 1.5;
  color: #2B2B2B;
  margin-bottom: clamp(28px, 3vw, 44px);
}

.how-it-works-steps-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 1.5vw, 24px);
}

.how-it-works-step-pill {
  font-family: 'Hatcher', serif;
  font-size: clamp(18px, 1.3vw, 22px);
  color: #B85D43;
  background: rgba(184, 93, 67, 0.08);
  border: 1px solid rgba(184, 93, 67, 0.25);
  border-radius: 999px;
  padding: 8px 22px;
}

.how-it-works-photo-wrap {
  width: 100%;
  border-radius: clamp(28px, 3vw, 44px);
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12);
}

.how-it-works-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 5. Coaching Packages Section */
.coaching-packages-section {
  position: relative;
  width: 100%;
  background-color: #FFF9ED;
  padding-bottom: clamp(90px, 8vw, 150px);
}

.packages-banner {
  position: relative;
  width: 100%;
  height: clamp(340px, 32vw, 520px);
  border-radius: clamp(32px, 3.2vw, 54px) clamp(32px, 3.2vw, 54px) 0 0;
  overflow: hidden;
}

.packages-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.packages-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: clamp(24px, 3vw, 48px);
}

.packages-pricing-note {
  font-family: 'Bebas Kai', sans-serif;
  font-size: clamp(15px, 1.1vw, 19px);
  letter-spacing: 0.1em;
  color: #FFFFFF;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.packages-cards-wrap {
  position: relative;
  margin-top: clamp(-100px, -9vw, -160px);
  z-index: 10;
}

.packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 36px);
  align-items: stretch;
}

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

.package-card {
  background: linear-gradient(180deg, #A05548 0%, #3E1E19 100%);
  border-radius: clamp(24px, 2.5vw, 38px);
  padding: clamp(36px, 3.2vw, 52px) clamp(28px, 2.5vw, 40px);
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.25);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.package-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.32);
}

.package-tag {
  font-family: 'Hatcher', serif;
  font-size: clamp(24px, 1.8vw, 30px);
  color: #F8D9CE;
  margin-bottom: 8px;
}

.package-tagline {
  font-family: 'Bebas Kai', sans-serif;
  font-size: clamp(14px, 1.05vw, 17px);
  letter-spacing: 0.08em;
  color: #E8D5B5;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.package-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  margin-bottom: 24px;
}

.package-title {
  font-family: 'Hatcher', serif;
  font-size: clamp(40px, 3.5vw, 56px);
  line-height: 1.05;
  color: #FFFFFF;
  margin-bottom: 18px;
  text-transform: capitalize;
}

.package-desc {
  font-family: 'Bebas Kai', sans-serif;
  font-size: clamp(18px, 1.35vw, 23px);
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: #ECE1DF;
  text-transform: uppercase;
  margin: 0;
}

/* 6. Book a Discovery Call Section */
.discovery-call-section {
  position: relative;
  width: 100%;
  background-color: #FFF9ED;
  padding-top: clamp(60px, 5vw, 100px);
  padding-bottom: clamp(70px, 6vw, 110px);
  text-align: center;
}

.discovery-call-inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.discovery-call-subtitle {
  font-family: 'Bebas Kai', sans-serif;
  font-size: clamp(16px, 1.2vw, 20px);
  letter-spacing: 0.14em;
  color: #2B2B2B;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}

.discovery-call-title {
  font-family: 'Hatcher', serif;
  font-size: clamp(46px, 4.4vw, 72px);
  color: #123A39;
  line-height: 1.05;
  margin-bottom: clamp(24px, 2.2vw, 36px);
}

.discovery-call-desc {
  font-family: 'Baskerville', serif;
  font-size: clamp(17px, 1.2vw, 21px);
  line-height: 1.55;
  color: #2B2B2B;
  margin-bottom: clamp(32px, 3vw, 48px);
}

.discovery-call-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: transparent;
  color: #123A39;
  border: 1.5px solid #123A39;
  border-radius: 999px;
  padding: 14px 38px;
  font-family: 'Bebas Kai', sans-serif;
  font-size: clamp(17px, 1.15vw, 21px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s ease;
}

.discovery-call-btn:hover {
  background-color: #123A39;
  color: #FFF9ED;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(18, 58, 57, 0.2);
}
/* ==========================================================================
   INNER PAGES (about.html, contact.html, blog.html)
   ========================================================================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Cream header with dark brown nav (Figma: Bebas Kai 20px, #3B221D) */
.inner-header-section {
  position: relative;
  width: 100%;
  background-color: #FFF9ED;
  color: #3B221D;
}

.inner-nav {
  color: #3B221D;
}

.inner-nav a {
  transition: color 0.3s ease, border-color 0.3s ease;
}

.inner-nav a:hover {
  color: #A05A44;
}

.inner-nav a.is-active {
  border-bottom: 2px solid #3B221D;
  padding-bottom: 2px;
}

.inner-menu-btn {
  color: #3B221D;
}

.inner-menu-btn:hover {
  color: #A05A44;
}

/* Extra top spacing for the first section under the inner header */
.about-section.inner-page-first {
  padding-top: clamp(40px, 5.5vw, 105px);
}

/* ==========================================================================
   BLOG LISTING PAGE (Figma 2275:543)
   ========================================================================== */
.blog-section {
  background-color: #FFF9ED;
  width: 100%;
  padding-top: clamp(32px, 5vw, 110px);
  padding-bottom: clamp(48px, 5vw, 100px);
}

.blog-inner {
  width: 100%;
  max-width: 1533px;
  margin: 0 auto;
}

/* Header row: BLOGS title (x:459) + intro paragraph (x:739, w:857) */
.blog-header-row {
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 2.7vw, 52px);
  padding-left: clamp(0px, 13.8vw, 265px);
  margin-bottom: clamp(48px, 7.5vw, 144px);
}

.blog-title {
  font-family: 'Hatcher', serif;
  font-size: clamp(48px, 3.65vw, 70px);
  line-height: 1;
  color: #2B2B2B;
  text-transform: uppercase;
  margin: 0;
  flex-shrink: 0;
}

.blog-header-desc {
  font-family: 'Baskerville', serif;
  font-size: clamp(18px, 1.56vw, 30px);
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: #2B2B2B;
  max-width: 857px;
  margin: 0;
}

/* 2-column card grid (cards 643px wide, 244px column gap) */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 643px));
  justify-content: space-between;
  column-gap: clamp(32px, 6vw, 244px);
  row-gap: clamp(40px, 3.5vw, 64px);
}

.blog-card {
  display: flex;
  flex-direction: column;
}

.blog-card-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 643 / 272;
  overflow: hidden;
  background-color: #2B2B2B;
}

.blog-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-card:hover .blog-card-img {
  transform: scale(1.04);
}

/* Dark number tab (45x56) at top-left of image */
.blog-card-num {
  position: absolute;
  top: 0;
  left: 21px;
  width: 45px;
  height: 56px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 8px;
  background-color: #2B2B2B;
  color: #FFFFFF;
  font-family: 'Bebas Kai', sans-serif;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}

.blog-card-readtime {
  position: absolute;
  right: 24px;
  bottom: 14px;
  color: #FFFFFF;
  font-family: 'Bebas Kai', sans-serif;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.blog-card-title {
  font-family: 'Hatcher', serif;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #2B2B2B;
  margin: clamp(32px, 3.1vw, 60px) 0 0;
}

.blog-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.blog-card-title a:hover {
  color: #A05A44;
}

.blog-card-meta {
  font-family: 'Bebas Kai', sans-serif;
  font-size: 14px;
  line-height: 1.3;
  color: #9F8260;
  margin: 20px 0 0;
}

.blog-card-excerpt {
  font-family: 'Baskerville', serif;
  font-size: 14px;
  line-height: 1.5;
  color: #2B2B2B;
  margin: 14px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 31px;
}

.blog-card-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 206px;
  height: 57px;
  margin-top: auto;
  border: 1.5px solid #2B2B2B;
  border-radius: 67px;
  color: #2B2B2B;
  font-family: 'Bebas Kai', sans-serif;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s ease;
}

.blog-card-btn:hover {
  background-color: #2B2B2B;
  color: #FFF9ED;
  transform: translateY(-2px);
}

.blog-card-btn:hover .btn-arrow {
  transform: translateX(4px);
}

/* Pagination: 244px rule, then << 1 2 3 >> (Bebas 30px, 50% opacity) */
.blog-pagination {
  width: 244px;
  margin-top: clamp(32px, 2vw, 36px);
  padding-top: 32px;
  border-top: 1px solid #000000;
  display: flex;
  align-items: center;
  gap: 18px;
}

.blog-page-link {
  font-family: 'Bebas Kai', sans-serif;
  font-size: 30px;
  line-height: 1.25;
  color: rgba(43, 43, 43, 0.5);
  text-decoration: none;
  transition: color 0.3s ease;
}

.blog-page-link.is-arrow {
  font-family: 'Space Grotesk', sans-serif;
}

.blog-page-link:hover,
.blog-page-link[aria-current="page"] {
  color: #2B2B2B;
}

@media (max-width: 1023px) {
  .blog-header-row {
    flex-direction: column;
    gap: 14px;
    padding-left: 0;
  }

  .blog-header-desc {
    font-size: clamp(18px, 4.6vw, 22px);
    line-height: 1.5;
  }
}

@media (max-width: 767px) {
  .blog-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .blog-card-title {
    margin-top: 24px;
  }

  .blog-card-btn {
    width: auto;
    height: 52px;
    padding: 0 28px;
  }

  .blog-card-excerpt {
    margin-bottom: 24px;
  }
}

/* ==========================================================================
   SOLUTIONS PAGE (Figma 2415:2)
   ========================================================================== */
/* Hero: reuses .therapy-hero-* structure; text sits on the right (Figma x:1240) */
.sol-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.38) 38%, rgba(0, 0, 0, 0.08) 62%, rgba(0, 0, 0, 0) 100%);
}

.sol-hero-content {
  position: absolute;
  left: calc(50% + 280px);
  top: 385px;
  width: min(693px, calc(50% - 300px));
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.sol-hero-title {
  font-family: 'Hatcher', serif;
  font-size: clamp(48px, 3.65vw, 70px);
  line-height: 1.1;
  letter-spacing: 0.06em;
  color: #FFFFFF;
  margin: 0;
}

.sol-hero-desc {
  font-family: 'Baskerville', serif;
  font-size: clamp(17px, 1.05vw, 20px);
  line-height: 1.15;
  color: #FFFFFF;
  max-width: 465px;
  margin: clamp(32px, 5vw, 99px) 0 0;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.sol-hero-content .therapy-hero-btn {
  min-width: 236px;
  margin-top: 55px;
  align-self: flex-start;
}

@media (max-width: 1279px) {
  .sol-hero-content {
    left: auto;
    right: clamp(24px, 5vw, 80px);
    width: min(560px, 50%);
    top: clamp(220px, 26vw, 385px);
  }
}

@media (max-width: 1023px) {
  .sol-hero-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.6) 100%);
  }

  .sol-hero-content {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    margin: clamp(80px, 22vw, 200px) 0 0;
    padding: 0 24px;
  }
}

/* Shared Solutions typography */
.sol-label {
  display: block;
  font-family: 'Bebas Kai', sans-serif;
  font-size: 20px;
  line-height: 1;
  color: #123A39;
  text-transform: uppercase;
  margin-bottom: 23px;
}

.sol-heading {
  font-family: 'Hatcher', serif;
  font-size: clamp(44px, 3.65vw, 70px);
  line-height: 1;
  color: #123A39;
  text-transform: uppercase;
  margin: 0;
}

.sol-heading.is-spaced {
  letter-spacing: 0.06em;
}

.sol-body p {
  font-family: 'Baskerville', serif;
  font-size: clamp(17px, 1.05vw, 20px);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #000000;
  margin: 0 0 1em;
}

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

.sol-media {
  width: 100%;
  aspect-ratio: 779 / 679;
  border-radius: clamp(28px, 2.6vw, 50px);
  overflow: hidden;
}

.sol-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Split rows: text column + 779x679 image (sections 2, 4 and 5) */
.sol-split-section {
  background-color: #FFF9ED;
  padding: clamp(60px, 8.3vw, 160px) 0 0;
}

.sol-split {
  display: grid;
  grid-template-columns: minmax(0, 653fr) minmax(0, 779fr);
  align-items: start;
  gap: clamp(32px, 5.7vw, 109px);
  max-width: 1541px;
  margin: 0 0 0 auto;
}

.sol-split.is-reversed {
  grid-template-columns: minmax(0, 779fr) minmax(0, 759fr);
  max-width: 1648px;
  margin: 0 auto 0 0;
}

.sol-split-text {
  padding-top: clamp(0px, 4.4vw, 85px);
}

.sol-split-text .sol-heading {
  margin-bottom: clamp(28px, 4vw, 76px);
}

.sol-split.is-reversed .sol-split-text {
  padding-top: clamp(0px, 2.4vw, 47px);
}

.sol-split.is-matters {
  grid-template-columns: minmax(0, 593fr) minmax(0, 779fr);
  gap: clamp(32px, 8.4vw, 161px);
  max-width: 1533px;
}

.sol-split.is-matters .sol-split-text {
  padding-top: clamp(0px, 9.8vw, 189px);
}

.sol-split.is-matters .sol-body p {
  line-height: 1.15;
  letter-spacing: 0;
}

/* Ways We Can Work Together list */
.sol-ways-list {
  margin: 0;
}

.sol-ways-list dt {
  font-family: 'Bebas Kai', sans-serif;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #000000;
  text-transform: uppercase;
}

.sol-ways-list dd {
  font-family: 'Baskerville', serif;
  font-size: clamp(17px, 1.05vw, 20px);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #000000;
  margin: 0 0 14px;
}

/* Section 3: Areas of focus (focus list + card + image on terracotta panel) */
.sol-focus-section {
  position: relative;
  background-color: #FFF9ED;
  padding: clamp(60px, 10vw, 194px) 0 0;
  overflow: hidden;
}

.sol-focus-panel {
  position: absolute;
  top: clamp(40px, 3.5vw, 66px);
  left: 34.5%;
  right: 0;
  height: min(830px, 80%);
  background-color: #A45A4C;
  border-radius: clamp(36px, 4.3vw, 82px) 0 0 clamp(36px, 4.3vw, 82px);
  z-index: 0;
}

.sol-focus-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 330fr) minmax(0, 468fr) minmax(0, 805fr);
  align-items: start;
  max-width: 1635px;
  margin: 0 0 0 auto;
}

.sol-focus-tabs {
  list-style: none;
  margin: 0;
  padding: clamp(0px, 8.6vw, 167px) 0 0;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.sol-focus-tab {
  display: flex;
  align-items: flex-start;
  gap: 49px;
  font-family: 'Hatcher', serif;
  font-size: 22px;
  line-height: 1;
  color: #908B8B;
  text-transform: uppercase;
  min-height: 62px;
  padding-left: 97px;
}

.sol-focus-tab.is-active {
  color: #123A39;
  padding-left: 0;
}

.sol-focus-icon {
  flex-shrink: 0;
  width: 48px;
  height: 47px;
  color: #123A39;
}

.sol-focus-card {
  position: relative;
  z-index: 2;
  margin-top: clamp(0px, 6vw, 116px);
  margin-right: -54px;
  min-height: 598px;
  padding: 58px 54px 40px 69px;
  background-color: #FFF9ED;
  border-radius: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

.sol-focus-intro {
  font-family: 'Baskerville', serif;
  font-size: 22px;
  line-height: 1;
  color: #000000;
  margin: 0 0 54px;
}

.sol-focus-card-label {
  font-family: 'Bebas Kai', sans-serif;
  font-size: 22px;
  line-height: 1.2;
  color: #123A39;
  margin: 0 0 10px;
}

.sol-focus-points {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sol-focus-points li {
  font-family: 'Baskerville', serif;
  font-size: clamp(22px, 1.56vw, 30px);
  line-height: 1.13;
  color: #123A39;
  margin-bottom: 14px;
}

.sol-focus-media-col .sol-media {
  aspect-ratio: 805 / 567;
}

.sol-focus-supports {
  display: grid;
  grid-template-columns: 48px minmax(0, 532px);
  column-gap: 27px;
  margin: 34px 0 0 109px;
}

.sol-focus-supports .sol-focus-icon {
  grid-row: span 2;
}

.sol-focus-supports h3 {
  font-family: 'Bebas Kai', sans-serif;
  font-size: 22px;
  line-height: 1;
  color: #000000;
  margin: 0 0 21px;
  font-weight: 400;
}

.sol-focus-supports p {
  font-family: 'Baskerville', serif;
  font-size: 22px;
  line-height: 1;
  color: #000000;
  margin: 0;
}

/* Section 6: Discovery conversation - reuses .discovery-call-* */
.sol-discovery .discovery-call-inner {
  max-width: 1311px;
}

.sol-discovery .discovery-call-subtitle {
  color: #123A39;
  letter-spacing: 0;
}

.sol-discovery .discovery-call-title {
  text-transform: uppercase;
  line-height: 1;
}

.sol-discovery .discovery-call-desc {
  line-height: 1.2;
  letter-spacing: 0.04em;
}

@media (max-width: 1279px) {
  .sol-focus-tab {
    padding-left: 0;
    gap: 20px;
  }

  .sol-focus-tab:not(.is-active)::before {
    content: '';
    width: 48px;
    flex-shrink: 0;
  }

  .sol-focus-card {
    padding: 40px 36px 32px;
  }

  .sol-focus-supports {
    margin-left: 24px;
  }
}

@media (max-width: 1023px) {
  .sol-split,
  .sol-split.is-reversed,
  .sol-split.is-matters {
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
  }

  .sol-split-text,
  .sol-split.is-reversed .sol-split-text,
  .sol-split.is-matters .sol-split-text {
    padding-top: 0;
  }

  .sol-split.is-reversed .sol-media {
    order: 2;
  }

  .sol-focus-panel {
    left: 0;
    top: auto;
    bottom: 0;
    height: 46%;
    border-radius: 36px 36px 0 0;
  }

  .sol-focus-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin: 0;
  }

  .sol-focus-tabs {
    padding-top: 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 18px;
  }

  .sol-focus-tab {
    min-height: 0;
    gap: 10px;
    font-size: 18px;
    align-items: center;
  }

  .sol-focus-tab:not(.is-active)::before {
    display: none;
  }

  .sol-focus-tab .sol-focus-icon {
    width: 32px;
    height: 31px;
  }

  .sol-focus-card {
    margin: 0;
    min-height: 0;
  }

  .sol-focus-supports {
    margin: 24px 0 40px;
  }

  .sol-focus-supports .sol-focus-icon {
    color: #FFF9ED;
  }

  .sol-focus-supports h3,
  .sol-focus-supports p {
    color: #FFF9ED;
  }
}

@media (max-width: 767px) {
  .sol-focus-card {
    padding: 28px 22px;
    border-radius: 24px;
  }

  .sol-focus-intro {
    font-size: 19px;
    line-height: 1.2;
    margin-bottom: 28px;
  }

  .sol-focus-supports {
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 14px;
  }

  .sol-focus-supports .sol-focus-icon {
    width: 36px;
    height: 35px;
  }

  .sol-focus-supports p {
    font-size: 18px;
    line-height: 1.3;
  }
}

/* ==========================================================================
   BLOG ARTICLE PAGE (Figma 2315:27)
   ========================================================================== */
.article-banner {
  width: 100%;
  height: clamp(220px, 29vw, 556px);
  border-radius: clamp(28px, 2.6vw, 50px) clamp(28px, 2.6vw, 50px) 0 0;
  overflow: hidden;
  margin-top: clamp(16px, 3.1vw, 60px);
}

.article-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.article-section {
  background-color: #FFF9ED;
  padding: clamp(48px, 7.2vw, 139px) 0 clamp(40px, 4vw, 80px);
}

.article-inner {
  max-width: 1494px;
  margin: 0 auto;
}

.article-header {
  display: grid;
  grid-template-columns: minmax(0, 771fr) minmax(0, 663fr);
  gap: clamp(28px, 4.1vw, 77px);
  align-items: start;
  margin-bottom: clamp(56px, 6.7vw, 128px);
}

.article-title {
  font-family: 'Hatcher', serif;
  font-size: clamp(40px, 3.65vw, 70px);
  line-height: 1;
  letter-spacing: -0.05em;
  color: #2B2B2B;
  text-transform: uppercase;
  margin: 0;
}

.article-meta {
  display: block;
  font-family: 'Bebas Kai', sans-serif;
  font-size: 16px;
  color: #9F8260;
  margin-top: 20px;
}

.article-text p {
  font-family: 'Baskerville', serif;
  font-size: clamp(17px, 1.05vw, 20px);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #2B2B2B;
  margin: 0 0 1em;
}

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

.article-text p.is-short {
  margin-bottom: 0.15em;
}

.article-text h2 {
  font-family: 'Bebas Kai', sans-serif;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: 0.1em;
  color: #2B2B2B;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0 0 31px;
}

/* Alternating image / text rows (592x495 images, radius 82) */
.article-row {
  display: grid;
  grid-template-columns: minmax(0, 592fr) minmax(0, 758fr);
  gap: clamp(32px, 7.5vw, 144px);
  align-items: center;
  margin-bottom: clamp(56px, 6vw, 115px);
}

.article-row.is-reversed {
  grid-template-columns: minmax(0, 691fr) minmax(0, 592fr);
  gap: clamp(32px, 7.4vw, 141px);
  padding-left: 16px;
}

.article-row.is-full {
  display: block;
  padding-left: 16px;
}

.article-media {
  width: 100%;
  aspect-ratio: 592 / 495;
  border-radius: clamp(36px, 4.3vw, 82px);
  overflow: hidden;
}

.article-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.article-back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Bebas Kai', sans-serif;
  font-size: 20px;
  letter-spacing: 0.2em;
  color: #2B2B2B;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.article-back:hover {
  color: #A05A44;
}

@media (max-width: 1023px) {
  .article-header,
  .article-row,
  .article-row.is-reversed {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 0;
  }

  .article-row.is-full {
    padding-left: 0;
  }

  .article-row.is-reversed .article-media {
    order: -1;
  }

  .article-media {
    max-width: 592px;
  }
}

/* ==========================================================================
   GIFT THERAPY PAGE (Figma 2351:85)
   ========================================================================== */
/* Hero: reuses .therapy-hero-* + .sol-hero-*; text at Figma x:1190, y:319 */
.gift-hero-content {
  left: calc(50% + 230px);
  top: 319px;
  width: min(534px, calc(50% - 250px));
}

.gift-hero-label {
  font-family: 'Bebas Kai', sans-serif;
  font-size: 20px;
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.gift-hero-content .sol-hero-title {
  line-height: 1;
}

.gift-hero-text {
  margin-top: 23px;
}

.gift-hero-text p {
  font-family: 'Baskerville', serif;
  font-size: clamp(17px, 1.05vw, 20px);
  line-height: 1.15;
  color: #FFFFFF;
  margin: 0 0 1.15em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.gift-hero-text p.is-lead {
  font-weight: 700;
  margin-bottom: 0.4em;
}

@media (max-width: 1279px) {
  .gift-hero-content {
    left: auto;
    top: clamp(200px, 22vw, 319px);
    width: min(534px, 50%);
  }
}

@media (max-width: 1023px) {
  .gift-hero-content {
    top: auto;
    width: 100%;
  }
}

/* Testimonial band: gradient strip overlapping the hero bottom */
.gift-story {
  position: relative;
  z-index: 20;
  margin-top: -50px;
  background: linear-gradient(180deg, #A05548 0%, #3A1F1A 100%);
  border-radius: clamp(28px, 2.6vw, 50px) clamp(28px, 2.6vw, 50px) 0 0;
  color: #FFFFFF;
}

.gift-story-inner {
  display: grid;
  grid-template-columns: minmax(0, 540px) 300px minmax(0, 836px);
  column-gap: 0;
  align-items: start;
  max-width: 1760px;
  margin: 0 auto;
  min-height: 388px;
}

.gift-story-header {
  padding-top: 65px;
}

.gift-story-label {
  display: block;
  font-family: 'Bebas Kai', sans-serif;
  font-size: clamp(16px, 1.05vw, 20px);
  letter-spacing: 0.14em;
  color: #FFFFFF;
  margin-bottom: 8px;
}

.gift-story-title {
  font-family: 'Hatcher', serif;
  font-size: clamp(40px, 3.65vw, 70px);
  line-height: 1.05;
  color: #D3B39C;
  margin: 0;
  white-space: nowrap;
}

/* Tilted photo card that fits inside the 388px strip */
.gift-story-photo {
  width: 255px;
  height: 340px;
  margin-top: 10px;
  border-radius: 30px;
  overflow: hidden;
  margin-left: 22px;
  transform: rotate(-8deg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.gift-story-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gift-story-quote {
  padding-top: 94px;
  padding-bottom: 40px;
  padding-left: clamp(24px, 4.9vw, 94px);
}

.gift-story-quote p {
  font-family: 'Baskerville', serif;
  font-size: clamp(17px, 1.05vw, 20px);
  line-height: 1.15;
  color: #FFFFFF;
  margin: 0;
}

.gift-story-quote a {
  color: #FFFFFF;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gift-story-quote a:hover {
  color: #E8D5B5;
}

.gift-story-meta {
  margin-top: 26px;
}

.gift-story-age {
  display: block;
  font-family: 'Hatcher', serif;
  font-size: 30px;
  line-height: 1;
}

.gift-story-role {
  display: block;
  font-family: 'Bebas Kai', sans-serif;
  font-size: 20px;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Text + image rows */
.gift-section {
  background-color: #FFF9ED;
  padding-top: clamp(56px, 6.6vw, 127px);
}

.gift-row {
  display: grid;
  grid-template-columns: minmax(0, 877fr) minmax(0, 592fr);
  gap: clamp(32px, 7.9vw, 153px);
  align-items: start;
  max-width: 1633px;
  margin: 0 auto 0 0;
  padding-left: clamp(0px, 5.5vw, 106px);
}

.gift-row.is-reversed {
  grid-template-columns: minmax(0, 620fr) minmax(0, 877fr);
  gap: clamp(32px, 6.5vw, 126px);
  max-width: 1676px;
  padding-left: clamp(0px, 2.8vw, 53px);
}

.gift-row .gift-text {
  padding-top: clamp(0px, 3.7vw, 72px);
}

.gift-row.is-reversed .gift-text {
  padding-top: clamp(0px, 2.9vw, 55px);
}

.gift-heading {
  font-family: 'Hatcher', serif;
  font-size: clamp(30px, 2.1vw, 40px);
  line-height: 1;
  letter-spacing: 0.06em;
  color: #123A39;
  margin: 0 0 clamp(20px, 1.8vw, 32px);
}

.gift-text p {
  font-family: 'Baskerville', serif;
  font-size: clamp(17px, 1.05vw, 20px);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #2B2B2B;
  margin: 0;
}

.gift-text p + p {
  margin-top: 0.5em;
}

.gift-text .discovery-call-btn {
  margin-top: 40px;
}

.gift-media {
  width: 100%;
  aspect-ratio: 592 / 495;
  border-radius: clamp(28px, 2.6vw, 50px);
  overflow: hidden;
}

.gift-row.is-reversed .gift-media {
  aspect-ratio: 620 / 519;
}

.gift-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* How it works */
.gift-how {
  background-color: #FFF9ED;
  padding: clamp(64px, 14vw, 270px) 0 clamp(48px, 4vw, 80px);
}

.gift-how-layout {
  display: grid;
  grid-template-columns: minmax(0, 559fr) minmax(0, 951fr);
  gap: clamp(32px, 4.5vw, 88px);
  align-items: start;
  max-width: 1598px;
  margin: 0 auto 0 0;
  padding-left: clamp(0px, 4.7vw, 91px);
}

.gift-how-art {
  width: 100%;
  aspect-ratio: 559 / 350;
  margin-top: clamp(0px, 7.8vw, 150px);
  color: #123A39;
}

.gift-how-art svg,
.gift-how-art img {
  width: 100%;
  height: 100%;
  display: block;
}

.gift-how .sol-heading {
  text-transform: none;
  letter-spacing: 0.06em;
  margin-bottom: clamp(24px, 3vw, 58px);
}

.gift-how .gift-text p {
  margin-top: 0;
}

.gift-how .gift-text p + p {
  margin-top: 0.6em;
}

.gift-how .gift-text h3 {
  font-family: 'Baskerville', serif;
  font-size: clamp(17px, 1.05vw, 20px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #2B2B2B;
  margin: 1.4em 0 0;
}

.gift-how .gift-text .gift-signoff {
  margin-top: 0.6em;
  font-style: italic;
}

@media (max-width: 1279px) {
  .gift-story-inner {
    grid-template-columns: 300px minmax(0, 1fr);
    column-gap: 40px;
    padding-bottom: 40px;
  }

  .gift-story-header {
    grid-column: 1 / -1;
    padding-top: 48px;
    margin-bottom: 28px;
  }

  .gift-story-photo {
    margin-left: 22px;
  }

  .gift-story-quote {
    padding-top: 0;
    padding-left: 0;
  }
}

@media (max-width: 1023px) {
  .gift-row,
  .gift-row.is-reversed,
  .gift-how-layout {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 0;
    margin: 0;
  }

  .gift-row .gift-text,
  .gift-row.is-reversed .gift-text {
    padding-top: 0;
  }

  .gift-media {
    max-width: 620px;
  }

  .gift-how-art {
    margin-top: 0;
    max-width: 460px;
  }
}

@media (max-width: 767px) {
  .gift-story-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .gift-story-title {
    white-space: normal;
  }

  .gift-story-photo {
    width: 70%;
    max-width: 255px;
    height: auto;
    aspect-ratio: 255 / 340;
    margin: 0 0 32px 16px;
    transform: rotate(-5deg);
  }
}

/* ==========================================================================
   TAL-THERAPY PAGE - EXACT FIGMA LAYOUT (Figma 2374:2, 1920 canvas)
   All desktop measurements are Figma px x --u, so the layout is exact at
   1920px and scales down proportionally to 1024px. Below 1024px it stacks.
   ========================================================================== */
.tt-page {
  --u: min(1px, calc(100vw / 1920));
}

.tt-canvas {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.tt-label {
  display: block;
  font-family: 'Bebas Kai', sans-serif;
  font-size: max(16px, calc(20 * var(--u)));
  line-height: 1;
  color: #123A39;
  text-transform: uppercase;
}

.tt-heading {
  font-family: 'Hatcher', serif;
  font-size: max(40px, calc(70 * var(--u)));
  line-height: 1;
  color: #123A39;
  text-transform: uppercase;
  margin: 0;
}

/* Frosted glass card: gradient + grain texture at 20%, backdrop blur 80, shadow 15 */
.tt-glass {
  position: relative;
  isolation: isolate;
  border-radius: calc(20 * var(--u));
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.04) 100%);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  border: 0;
  overflow: hidden;
}

.tt-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('../images/glass-texture.jpg') center / cover;
  opacity: 0.2;
  pointer-events: none;
}

/* --- 1. Hero (scoped tweaks on the shared .therapy-hero-* markup) --- */
.tt-page .therapy-hero-overlay {
  display: none;
}

.tt-page .therapy-hero-content-col {
  left: calc(300 * var(--u));
  top: calc(205 * var(--u));
  max-width: none;
  width: calc(700 * var(--u));
  gap: 0;
}

.tt-page .therapy-hero-title {
  font-size: max(48px, calc(70 * var(--u)));
  line-height: 1;
  letter-spacing: 0.06em;
}

.tt-page .therapy-hero-narrative {
  width: calc(509 * var(--u));
  margin-top: calc(43 * var(--u));
  gap: 0;
}

.tt-page .therapy-hero-narrative p {
  font-size: max(16px, calc(20 * var(--u)));
  line-height: 1.15;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.tt-page .therapy-hero-quote {
  margin-top: calc(14 * var(--u));
  padding: 0;
  font-size: max(16px, calc(20 * var(--u)));
  line-height: 1;
  letter-spacing: 0.06em;
}

.tt-page .therapy-hero-btn-wrap {
  margin-top: calc(29 * var(--u));
  padding: 0;
}

.tt-page .therapy-hero-btn,
.tt-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  height: max(48px, calc(57 * var(--u)));
  border: 2px solid #CBA69E;
  border-radius: 67px;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #CBA69E;
  font-family: 'Bebas Kai', sans-serif;
  font-size: max(16px, calc(20 * var(--u)));
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.tt-page .therapy-hero-btn {
  width: max(300px, calc(351 * var(--u)));
  min-width: 0;
  padding: 0 calc(26 * var(--u)) 0 calc(28 * var(--u));
}

.tt-page .therapy-hero-btn:hover,
.tt-pill-btn:hover {
  background: #CBA69E;
  color: #1B1918;
  border-color: #CBA69E;
  transform: translateY(-2px);
  box-shadow: none;
}

/* --- 2. Coaching & labs (1080 tall, #5A322A + photo at 40%) --- */
.tt-labs {
  position: relative;
  overflow: hidden;
  background-color: #5A322A;
}

.tt-labs-bg {
  position: absolute;
  inset: 0;
}

.tt-labs-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.tt-labs-inner {
  display: flex;
  align-items: flex-start;
  gap: calc(72 * var(--u));
  padding: calc(116 * var(--u)) 0 calc(127 * var(--u)) calc(159 * var(--u));
}

.tt-page .tt-coaching-card {
  flex: none;
  width: calc(809 * var(--u));
  height: calc(837 * var(--u));
  display: block;
  min-height: 0;
  padding: calc(353 * var(--u)) calc(88 * var(--u)) 0 calc(100 * var(--u));
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.03) 100%);
  box-sizing: border-box;
  border-radius: calc(20 * var(--u));
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

.tt-toggle {
  position: absolute;
  left: calc(581 * var(--u));
  top: calc(52 * var(--u));
  width: calc(189 * var(--u));
  height: calc(41 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(7 * var(--u)) 0 calc(12 * var(--u));
  box-sizing: border-box;
  border-radius: calc(20 * var(--u));
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

.tt-toggle-text {
  font-family: 'Bebas Kai', sans-serif;
  font-size: max(12px, calc(20 * var(--u)));
  line-height: 1;
  letter-spacing: 0.14em;
  color: #FFFFFF;
}

.tt-toggle-knob {
  width: calc(35 * var(--u));
  height: calc(31 * var(--u));
  border-radius: 50%;
  background: #D9D9D9;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.tt-coaching-title {
  font-family: 'Hatcher', serif;
  font-size: max(40px, calc(70 * var(--u)));
  line-height: 1;
  color: #FFF9ED;
  text-transform: uppercase;
  margin: 0;
}

.tt-coaching-desc {
  width: calc(622 * var(--u));
  margin-top: calc(47 * var(--u));
}

.tt-coaching-desc p {
  font-family: 'Baskerville', serif;
  font-size: max(15px, calc(20 * var(--u)));
  line-height: 1.15;
  color: #FFFFFF;
  margin: 0;
}

.tt-labs-right {
  flex: none;
  width: calc(769 * var(--u));
}

.tt-page .tt-growth-card {
  width: calc(518 * var(--u));
  height: calc(488 * var(--u));
  padding: calc(63 * var(--u)) calc(40 * var(--u)) 0 calc(67 * var(--u));
  box-sizing: border-box;
  border: 0;
  border-radius: calc(20 * var(--u));
  background: linear-gradient(180deg, #BA6B52 25%, #9A5240 52%, #7E3E2F 100%);
  box-shadow: none;
}

.tt-growth-title {
  font-family: 'Bebas Kai', sans-serif;
  font-size: max(20px, calc(30 * var(--u)));
  line-height: 1.07;
  letter-spacing: -0.02em;
  color: #FFF9ED;
  margin: 0;
  font-weight: 400;
}

.tt-growth-list {
  list-style: none;
  margin: calc(41 * var(--u)) 0 0;
  padding: 0;
}

.tt-growth-list li {
  font-family: 'Bebas Kai', sans-serif;
  font-size: max(14px, calc(20 * var(--u)));
  line-height: 1.65;
  letter-spacing: 0.03em;
  color: #FFF9ED;
}

.tt-labs-row {
  display: flex;
  gap: calc(35 * var(--u));
  margin-top: calc(46 * var(--u));
}

.tt-page .tt-lab {
  flex: none;
  width: calc(215 * var(--u));
  height: calc(303 * var(--u));
  padding: 0;
  box-sizing: border-box;
}

.tt-page .tt-lab-connection {
  width: calc(268 * var(--u));
}

.tt-lab-icon {
  position: absolute;
  height: auto;
}

.tt-lab-transition .tt-lab-icon { left: calc(43 * var(--u)); top: calc(75 * var(--u)); width: calc(119 * var(--u)); }
.tt-lab-connection .tt-lab-icon { left: calc(36 * var(--u)); top: calc(58 * var(--u)); width: calc(128 * var(--u)); }
.tt-lab-clarity .tt-lab-icon { left: calc(24 * var(--u)); top: calc(65 * var(--u)); width: calc(114 * var(--u)); }

.tt-lab-title {
  position: absolute;
  left: calc(34 * var(--u));
  top: calc(211 * var(--u));
  font-family: 'Bebas Kai', sans-serif;
  font-size: max(18px, calc(30 * var(--u)));
  line-height: 1.07;
  letter-spacing: -0.02em;
  color: #FFF9ED;
  margin: 0;
  font-weight: 400;
}

.tt-lab-connection .tt-lab-title { left: calc(36 * var(--u)); }
.tt-lab-clarity .tt-lab-title { left: calc(35 * var(--u)); }

/* --- 3. Awareness Arc (1213 tall) --- */
.tt-arc {
  background-color: #FFF9ED;
  overflow: hidden;
}

.tt-arc-inner {
  height: calc(1213 * var(--u));
}

.tt-arc-header {
  position: absolute;
  left: calc(159 * var(--u));
  top: calc(220 * var(--u));
  z-index: 2;
}

.tt-arc-header .tt-heading {
  margin-top: calc(23 * var(--u));
}

/* Diagram box covers Figma x 540-1800, y 2237-3060 (1260 x 823) */
.tt-arc-diagram {
  position: absolute;
  left: calc(540 * var(--u));
  top: calc(77 * var(--u));
  width: calc(1260 * var(--u));
  aspect-ratio: 1260 / 823;
}

/* The arc vector (2408:408) is mirrored and turned in Figma: place its own (0,0) at the Figma point
   (1729.2, 2530.4) and apply the same matrix, so it runs from SEE (left) up to EMBODY (right) */
.tt-arc-line {
  position: absolute;
  left: calc((1729.2054 - 540) / 1260 * 100%);
  top: calc((2530.3923 - 2237) / 823 * 100%);
  width: calc(1074 / 1260 * 100%);
  height: auto;
  transform-origin: 0 0;
  transform: matrix(-0.9573, -0.2891, -0.1923, 0.9813, 0, 0);
}

/* --x/--y are Figma frame coordinates (y relative to 2000) */
.tt-arc-walker {
  position: absolute;
  left: calc((var(--x) - 540) / 1260 * 100%);
  top: calc((var(--y) + 2000 - 2237) / 823 * 100%);
  width: calc(var(--w) / 1260 * 100%);
  height: auto;
}

.tt-arc-label {
  position: absolute;
  left: calc((var(--x) - 540) / 1260 * 100%);
  top: calc((var(--y) + 2000 - 2237) / 823 * 100%);
  font-family: 'Bebas Kai', sans-serif;
  font-size: max(11px, calc(20 * var(--u)));
  line-height: 1;
  color: #123A39;
  text-transform: uppercase;
  white-space: nowrap;
}

.tt-arc-cards {
  position: absolute;
  left: calc(80 * var(--u));
  top: calc(686 * var(--u));
  height: calc(365 * var(--u));
  display: flex;
  align-items: flex-end;
  gap: calc(61 * var(--u));
}

.tt-page .awareness-step-card {
  flex: none;
  width: calc(242 * var(--u));
  height: calc(125 * var(--u));
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.55) 100%);
  transition: height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.3s ease;
}

.tt-page .awareness-step-card:hover {
  transform: translateY(-3px);
}

.tt-page .awareness-step-card:focus-visible {
  outline: 2px solid #A45A4C;
  outline-offset: 3px;
}

.tt-page .awareness-step-title {
  font-family: 'Hatcher', serif;
  font-size: max(18px, calc(30 * var(--u)));
  line-height: 1;
  color: #123A39;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
}

.tt-page .awareness-step-card.active {
  height: calc(365 * var(--u));
  align-items: flex-start;
  justify-content: flex-start;
  padding: calc(56 * var(--u)) calc(26 * var(--u)) 0 calc(39 * var(--u));
  border: 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

.tt-page .awareness-step-card.active .awareness-step-title {
  text-align: left;
}

.tt-page .awareness-step-desc {
  font-family: 'Baskerville', serif;
  font-size: max(12px, calc(20 * var(--u)));
  line-height: 1.15;
  color: #000000;
  margin: calc(28 * var(--u)) 0 0;
  max-width: none;
}

/* --- 4. How it works (image 745x649 at x1092) --- */
.tt-how {
  background-color: #FFF9ED;
}

.tt-how-inner {
  height: calc(849 * var(--u));
}

.tt-how-text {
  position: absolute;
  left: calc(228 * var(--u));
  top: calc(203 * var(--u));
  width: calc(864 * var(--u));
}

.tt-how-text .tt-heading {
  margin-top: calc(23 * var(--u));
}

.tt-how-desc {
  font-family: 'Baskerville', serif;
  font-size: max(16px, calc(24 * var(--u)));
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #000000;
  margin: calc(83 * var(--u)) 0 0;
}

.tt-how-steps {
  list-style: none;
  margin: calc(180 * var(--u)) 0 0;
  padding: 0;
  display: flex;
}

.tt-how-icon {
  position: absolute;
  left: calc(-76 * var(--u));
  top: calc(-4 * var(--u));
  width: calc(48 * var(--u));
  height: calc(47 * var(--u));
  color: #123A39;
}

.tt-how-photo {
  position: absolute;
  left: calc(1092 * var(--u));
  top: calc(100 * var(--u));
  width: calc(745 * var(--u));
  height: calc(649 * var(--u));
  border-radius: calc(50 * var(--u));
  overflow: hidden;
}

.tt-how-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- 5. Packages (full-bleed 556 banner, cards overlap it by 433) --- */
.tt-packages {
  background-color: #FFF9ED;
  padding-top: calc(160 * var(--u));
}

.tt-packages-banner {
  position: relative;
  width: 100%;
  height: calc(556 * var(--u));
  border-radius: calc(50 * var(--u)) calc(50 * var(--u)) 0 0;
  overflow: hidden;
  margin: 0;
}

/* Pre-cropped to the Figma band (48.5%-70.2% of the portrait photo) and
   stretched to the 1920x556 frame like Figma STRETCH */
.tt-packages-banner img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

.tt-pricing-note {
  position: absolute;
  left: calc(1646 / 1920 * 100%);
  top: calc(67 * var(--u));
  font-family: 'Bebas Kai', sans-serif;
  font-size: max(14px, calc(20 * var(--u)));
  line-height: 1;
  color: #ECE1DF;
  text-transform: uppercase;
  white-space: nowrap;
}

.tt-packages-cards {
  display: flex;
  align-items: flex-end;
  gap: calc(80 * var(--u));
  padding-left: calc(130 * var(--u));
  margin-top: calc(-165 * var(--u));
  box-sizing: border-box;
}

.tt-page .tt-package {
  position: relative;
  flex: none;
  display: block;
  width: calc(495 * var(--u));
  height: calc(686 * var(--u));
  padding: calc(99 * var(--u)) calc(60 * var(--u)) 0 calc(75 * var(--u));
  box-sizing: border-box;
  border: 0;
  border-radius: calc(20 * var(--u));
  background: linear-gradient(180deg, #C87D54 25%, #A55E40 52%, #5F3527 100%);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  box-shadow: none;
}

.tt-package.is-featured .tt-package-desc {
  max-width: calc(369 * var(--u));
}

.tt-page .tt-package.is-featured {
  height: calc(728 * var(--u));
  padding-top: calc(141 * var(--u));
}

.tt-package-tag {
  display: block;
  font-family: 'Hatcher', serif;
  font-size: max(18px, calc(30 * var(--u)));
  line-height: 1;
  color: #ECE1DF;
  text-transform: uppercase;
}

.tt-package-tagline {
  display: block;
  margin-top: calc(135 * var(--u));
  padding-left: calc(2 * var(--u));
  font-family: 'Bebas Kai', sans-serif;
  font-size: max(13px, calc(20 * var(--u)));
  line-height: 1;
  color: #ECE1DF;
  text-transform: uppercase;
}

.tt-package-title {
  margin: calc(23 * var(--u)) 0 0;
  padding-left: calc(2 * var(--u));
  min-height: calc(120 * var(--u));
  font-family: 'Hatcher', serif;
  font-size: max(30px, calc(60 * var(--u)));
  line-height: 1;
  color: #FFF9ED;
  text-transform: uppercase;
  font-weight: 400;
}

.tt-package-rule {
  display: block;
  width: calc(135 * var(--u));
  height: 3px;
  margin: calc(28 * var(--u)) 0 0 calc(7 * var(--u));
  background-color: #9F8260;
}

.tt-package-desc {
  max-width: calc(338 * var(--u));
  margin: calc(39 * var(--u)) 0 0;
  font-family: 'Bebas Kai', sans-serif;
  font-size: max(18px, calc(30 * var(--u)));
  line-height: 1.2;
  color: #FFFFFF;
  text-transform: uppercase;
}

/* --- 6. Discovery call --- */
.tt-page .tt-discovery {
  padding: calc(235 * var(--u)) 0 0;
}

.tt-page .tt-discovery .discovery-call-inner {
  max-width: 1311px;
}

.tt-discovery .tt-heading {
  margin-top: calc(19 * var(--u));
  text-align: center;
}

.tt-discovery-desc {
  font-family: 'Baskerville', serif;
  font-size: max(16px, calc(20 * var(--u)));
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: #2B2B2B;
  margin: calc(47 * var(--u)) 0 0;
}

.tt-discovery-btn {
  justify-content: center;
  width: max(170px, calc(194 * var(--u)));
  margin-top: calc(73 * var(--u));
  border-color: #123A39;
  color: #123A39;
}

.tt-discovery-btn:hover {
  background: #123A39;
  color: #FFF9ED;
  border-color: #123A39;
}

/* --- Tablet & mobile: stack everything --- */
@media (max-width: 1279px) {
  .tt-page .therapy-hero-content-col {
    left: auto;
    top: auto;
    width: auto;
  }

  .tt-page .therapy-hero-title {
    font-size: clamp(40px, 11vw, 56px);
    letter-spacing: 0.03em;
  }

  .tt-page .therapy-hero-narrative {
    width: auto;
    margin-top: 28px;
  }

  .tt-page .therapy-hero-quote {
    margin-top: 18px;
  }

  .tt-page .therapy-hero-btn-wrap {
    margin-top: 24px;
  }

  .tt-labs-inner {
    flex-direction: column;
    gap: 24px;
    padding: 56px 24px;
  }

  .tt-page .tt-coaching-card {
    width: 100%;
    height: auto;
    padding: 88px 28px 36px;
    border-radius: 20px;
  }

  .tt-toggle {
    left: auto;
    right: 20px;
    top: 20px;
    width: 160px;
    height: 36px;
    border-radius: 20px;
  }

  .tt-toggle-knob {
    width: 28px;
    height: 26px;
  }

  .tt-coaching-desc {
    width: auto;
    margin-top: 24px;
  }

  .tt-coaching-desc p + p {
    margin-top: 0.8em;
  }

  .tt-labs-right {
    width: 100%;
  }

  .tt-page .tt-growth-card {
    width: 100%;
    height: auto;
    padding: 32px 28px;
    border-radius: 20px;
  }

  .tt-growth-list {
    margin-top: 20px;
  }

  .tt-labs-row {
    gap: 12px;
    margin-top: 24px;
  }

  .tt-page .tt-lab,
  .tt-page .tt-lab-connection {
    flex: 1 1 0;
    width: auto;
    height: 200px;
    border-radius: 20px;
  }

  .tt-lab .tt-lab-icon {
    left: 16px;
    top: 20px;
    width: 72px;
  }

  .tt-lab .tt-lab-title {
    left: 16px;
    top: auto;
    bottom: 18px;
  }

  .tt-arc-inner,
  .tt-how-inner {
    height: auto;
    padding: 56px 24px;
  }

  .tt-arc-header,
  .tt-arc-diagram,
  .tt-arc-cards,
  .tt-how-text,
  .tt-how-photo {
    position: relative;
    left: auto;
    top: auto;
  }

  .tt-arc-diagram {
    width: 100%;
    margin-top: 24px;
  }

  .tt-arc-cards {
    height: auto;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    margin-top: 24px;
  }

  .tt-page .awareness-step-card {
    width: calc(50% - 6px);
    height: 90px;
    border-radius: 16px;
  }

  .tt-page .awareness-step-card.active {
    width: 100%;
    height: auto;
    padding: 24px 22px;
    order: -1;
  }

  .tt-page .awareness-step-desc {
    margin-top: 14px;
  }

  .tt-how-text {
    width: auto;
  }

  .tt-how-desc {
    margin-top: 24px;
  }

  .tt-how-steps {
    margin-top: 32px;
    padding-left: 60px;
    flex-wrap: wrap;
    row-gap: 24px;
  }

  .tt-how-icon {
    left: -52px;
    width: 36px;
    height: 35px;
  }

  .tt-how-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 745 / 649;
    margin-top: 32px;
    border-radius: 28px;
  }

  .tt-packages {
    padding-top: 0;
  }

  .tt-packages-banner img {
    object-fit: cover;
    object-position: 50% 30%;
  }

  .tt-packages-banner {
    height: 280px;
    border-radius: 28px 28px 0 0;
  }

  .tt-pricing-note {
    left: auto;
    right: 20px;
    top: 20px;
  }

  .tt-packages-cards {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 0 24px;
    margin-top: -60px;
  }

  .tt-page .tt-package,
  .tt-page .tt-package.is-featured {
    width: 100%;
    height: auto;
    padding: 36px 28px 40px;
    border-radius: 20px;
  }

  .tt-package-tagline {
    margin-top: 28px;
  }

  .tt-package-title {
    min-height: 0;
    margin-top: 12px;
  }

  .tt-package-rule {
    margin-top: 20px;
  }

  .tt-package-desc,
  .tt-package.is-featured .tt-package-desc {
    max-width: none;
    margin-top: 20px;
  }

  .tt-page .tt-discovery {
    padding-top: 64px;
  }

  .tt-discovery-desc {
    margin-top: 24px;
  }

  .tt-discovery-btn {
    margin-top: 32px;
  }

}

/* --- tal-therapy fixes: button text on one line, left-aligned arc header --- */
.tt-page .therapy-hero-btn span,
.tt-pill-btn {
  white-space: nowrap;
}

.tt-page .tt-arc-header {
  text-align: left;
}

.tt-discovery-break {
  display: none;
}

@media (min-width: 1024px) {
  .tt-discovery-break {
    display: inline;
  }
}

/* ==========================================================================
   SITE-WIDE MOTION & INTERACTION (inner pages)
   Builds on the home page system: .tal-scroll-anim + .is-inview (main.js)
   ========================================================================== */

/* Keep the reveal fade working on elements that define their own transitions */
.tt-page .awareness-step-card.tal-scroll-anim {
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tt-page .tt-package.tal-scroll-anim,
.blog-card.tal-scroll-anim {
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s ease;
}

/* Variant: tilted card that lands at its resting -8deg angle */
.tal-scroll-anim.tal-tilt {
  transform: translateY(40px) rotate(2deg) scale(0.94);
}

.tal-scroll-anim.tal-tilt.is-inview {
  transform: rotate(-8deg);
}

@media (max-width: 767px) {
  .tal-scroll-anim.tal-tilt.is-inview {
    transform: rotate(-5deg);
  }
}

/* Variant: Awareness Arc draws itself left to right, figures appear as it passes */
.tal-scroll-anim.tal-draw {
  opacity: 1;
  transform: none;
}

/* Hiding is instant; only the reveal is animated and staggered */
.tal-draw .tt-arc-line {
  /* mirrored image: its right edge is the SEE end, so the reveal starts there */
  clip-path: inset(0 0 0 100%);
}

.tal-draw.is-inview .tt-arc-line {
  clip-path: inset(0 0 0 0);
  transition: clip-path 2.2s cubic-bezier(0.45, 0, 0.2, 1);
}

.tal-draw .tt-arc-walker,
.tal-draw .tt-arc-label {
  opacity: 0;
  transition: color 0.3s ease, filter 0.3s ease;
}

.tal-draw.is-inview .tt-arc-walker,
.tal-draw.is-inview .tt-arc-label {
  opacity: 1;
  transition: opacity 0.6s ease calc((var(--x) - 540) / 1260 * 1.8s + 0.2s), color 0.3s ease, filter 0.3s ease;
}

/* Walking figures bob gently; the selected stage is highlighted */
.tt-arc-diagram .tt-arc-walker,
.tt-arc-diagram .tt-arc-label {
  cursor: pointer;
}

.tt-arc-walker {
  transform-origin: 50% 100%;
  animation: talWalkerBob 3.6s ease-in-out infinite;
  animation-delay: calc(var(--x) / 1920 * -3.6s);
}

@keyframes talWalkerBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-4%) rotate(-2deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(-3%) rotate(2deg); }
}

.tt-arc-walker.is-active {
  filter: drop-shadow(0 0 6px rgba(164, 90, 76, 0.75)) drop-shadow(0 6px 10px rgba(164, 90, 76, 0.35));
}

.tt-arc-label.is-active {
  color: #A45A4C;
}

.tt-arc-walker:hover {
  filter: drop-shadow(0 0 5px rgba(18, 58, 57, 0.45));
}

/* "How it works" steps as tabs */
.tt-how-steps {
  list-style: none;
}

.tt-how-step {
  position: relative;
  width: calc(202 * var(--u));
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: 'Hatcher', serif;
  font-size: max(15px, calc(22 * var(--u)));
  line-height: 1;
  color: #908B8B;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.tt-how-step:hover,
.tt-how-step.is-active {
  color: #123A39;
}

.tt-how-step span {
  position: relative;
}

.tt-how-step span::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 0;
  height: 2px;
  background: #A45A4C;
  transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tt-how-step.is-active span::after {
  width: 100%;
}

.tt-how-step:focus-visible {
  outline: 2px solid #A45A4C;
  outline-offset: 6px;
}

@media (max-width: 1023px) {
  .tt-how-step {
    width: 110px;
  }
}

/* Lab icons float like the home page therapy icons */
.tt-lab:hover .tt-lab-icon {
  filter: drop-shadow(0 0 18px rgba(255, 249, 237, 0.7));
}

/* Package cards lift on hover */
.tt-page .tt-package:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(59, 34, 29, 0.35);
}

/* Hero photos settle in with a slow zoom on load */
.therapy-hero-bg-inner img {
  animation: talHeroSettle 2.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes talHeroSettle {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}

/* Article banner and section photos ease from a slight zoom when revealed */
.article-banner img,
.gift-media img,
.sol-media img,
.tt-how-photo img {
  transform: scale(1.06);
  transition: transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.article-banner.is-inview img,
.gift-media.is-inview img,
.sol-media.is-inview img,
.tal-scroll-anim.is-inview .sol-media img,
.tt-how-photo.is-inview img {
  transform: scale(1);
}

/* Gift envelope floats */
.gift-how-art-float {
  width: 100%;
  height: 100%;
  animation: talEnvelopeFloat 5.2s ease-in-out infinite;
}

@keyframes talEnvelopeFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(-1.5deg); }
}

/* Blog pagination: pages without posts are disabled */
.blog-page-link.is-disabled {
  opacity: 0.25;
  pointer-events: none;
  cursor: default;
}

.blog-card[hidden] {
  display: none;
}

/* Contact form validation */
.contact-field-error {
  display: block;
  margin-top: 6px;
  font-family: 'Lexend', sans-serif;
  font-size: 12px;
  line-height: 1.3;
  color: #A45A4C;
}

.contact-form-group.is-invalid .contact-input {
  border-bottom-color: #A45A4C;
}

.contact-submit-btn:disabled {
  cursor: wait;
}

/* Reduced motion: no ambient or entrance animation */
@media (prefers-reduced-motion: reduce) {
  .tt-arc-walker,
  .gift-how-art-float,
  .therapy-hero-bg-inner img {
    animation: none !important;
  }

  .tal-draw .tt-arc-line,
  .tal-draw .tt-arc-walker,
  .tal-draw .tt-arc-label {
    clip-path: none !important;
    opacity: 1 !important;
    transition: none !important;
  }

  .article-banner img,
  .gift-media img,
  .sol-media img,
  .tt-how-photo img {
    transform: none !important;
    transition: none !important;
  }

  .tal-scroll-anim.tal-tilt {
    transform: rotate(-8deg) !important;
  }
}

/* ==========================================================================
   INNER PAGES - RESPONSIVE REFINEMENTS (all pages except index.html)
   Breakpoints: phone <=767, tablet 768-1023, small desktop 1024-1279, desktop 1280+
   ========================================================================== */

/* Header: seven menu items need ~1140px, so use the hamburger below 1280 */
@media (max-width: 1279px) {
  .inner-page header nav.lg\:flex {
    display: none !important;
  }

  .inner-page #mobileMenuBtn {
    display: block !important;
  }
}

@media (max-width: 767px) {
  .inner-page header {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 28px;
  }
}

/* Buttons never wider than a small phone */
@media (max-width: 480px) {
  .inner-page .therapy-hero-btn,
  .inner-page .contact-submit-btn,
  .inner-page .discovery-call-btn,
  .inner-page .blog-card-btn {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    letter-spacing: 0.14em;
  }

  .inner-page .therapy-hero-btn,
  .inner-page .contact-submit-btn {
    justify-content: space-between;
  }

  .inner-page .discovery-call-btn,
  .inner-page .blog-card-btn {
    justify-content: center;
  }

  .inner-page .contact-form-action {
    width: 100%;
  }
}

/* --- tal-therapy: keep the desktop hero between 1024 and 1279 --- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .tt-page .therapy-hero-content-col {
    left: calc(300 * var(--u));
    top: calc(205 * var(--u));
    width: max(560px, calc(700 * var(--u)));
  }

  .tt-page .therapy-hero-title {
    font-size: max(48px, calc(70 * var(--u)));
    letter-spacing: 0.06em;
  }

  .tt-page .therapy-hero-narrative {
    width: max(440px, calc(509 * var(--u)));
    margin-top: 32px;
  }

  .tt-page .therapy-hero-quote {
    margin-top: 16px;
  }

  .tt-page .therapy-hero-btn-wrap {
    margin-top: 26px;
  }
}

/* --- tal-therapy: tablet & small desktop section layouts (768-1279) --- */
@media (min-width: 768px) and (max-width: 1279px) {
  .tt-labs-inner,
  .tt-arc-inner,
  .tt-how-inner {
    padding-left: 48px;
    padding-right: 48px;
  }

  .tt-labs-inner {
    max-width: 1100px;
  }

  .tt-arc-diagram {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }

  .tt-page .awareness-step-card {
    width: calc((100% - 24px) / 3);
  }

  .tt-how-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
  }

  .tt-how-photo {
    margin-top: 0;
  }

  .tt-packages-cards {
    flex-direction: row;
    align-items: stretch;
    gap: 16px;
    padding: 0 32px;
  }

  .tt-page .tt-package,
  .tt-page .tt-package.is-featured {
    flex: 1 1 0;
    width: auto;
    padding: 32px 22px 36px;
  }

  .tt-page .tt-package.is-featured {
    margin-top: -24px;
  }

  .tt-package-title {
    font-size: clamp(26px, 3.2vw, 40px);
  }

  .tt-package-desc {
    font-size: clamp(16px, 2vw, 22px);
  }

  .tt-packages-banner {
    height: clamp(280px, 36vw, 420px);
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .tt-labs-inner {
    flex-direction: row;
    align-items: flex-start;
    margin: 0 auto;
  }

  .tt-page .tt-coaching-card {
    width: 55%;
  }

  .tt-labs-right {
    width: 45%;
  }
}

/* --- coaching.html: focus area section stacks below 1280 --- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .sol-focus-panel {
    left: 0;
    top: auto;
    bottom: 0;
    height: 46%;
    border-radius: 36px 36px 0 0;
  }

  .sol-focus-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    margin: 0;
  }

  .sol-focus-tabs {
    grid-column: 1 / -1;
    padding-top: 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px 28px;
  }

  .sol-focus-tab {
    min-height: 0;
    gap: 10px;
    align-items: center;
  }

  .sol-focus-tab:not(.is-active)::before {
    display: none;
  }

  .sol-focus-tab .sol-focus-icon {
    width: 32px;
    height: 31px;
  }

  .sol-focus-card {
    margin: 0;
    min-height: 0;
  }

  .sol-focus-supports {
    margin: 24px 0 48px;
  }

  .sol-focus-supports .sol-focus-icon {
    color: #FFF9ED;
  }

  .sol-focus-supports h3,
  .sol-focus-supports p {
    color: #FFF9ED;
  }
}

/* Phones & tablets: soft overlay keeps the tal-therapy hero text readable */
@media (max-width: 1023px) {
  .tt-page .therapy-hero-overlay {
    display: block;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.25) 55%, rgba(0, 0, 0, 0.45) 100%);
  }
}

/* Selected Awareness Arc card reads left-aligned at every size */
.tt-page .awareness-step-card.active,
.tt-page .awareness-step-card.active .awareness-step-desc {
  text-align: left;
}

/* Contact intro: let the text wrap naturally on phones */
@media (max-width: 767px) {
  .inner-page .contact-header-desc br {
    display: none;
  }
}

/* Active menu item on dark (photo) headers - independent of the Tailwind build */
.nav-active {
  color: #E8D5B5;
  border-bottom: 2px solid #E8D5B5;
  padding-bottom: 2px;
}

/* ==========================================================================
   COACHING PAGE - FOCUS AREA TABS (functional)
   ========================================================================== */
/* Panels slot their card + media straight into the 3-column focus grid */
.sol-focus-pane {
  display: contents;
}

.sol-focus-pane[hidden] {
  display: none;
}

/* Re-shown panels fade in (animation restarts whenever display comes back) */
.sol-focus-pane:not([hidden]) .sol-focus-card,
.sol-focus-pane:not([hidden]) .sol-focus-media-col {
  animation: talFocusIn 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.sol-focus-pane:not([hidden]) .sol-focus-media-col {
  animation-delay: 0.08s;
}

@keyframes talFocusIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* Tabs are buttons; every tab keeps the same indent so the moving icon never shifts text */
.sol-focus-tabs .sol-focus-tab {
  position: relative;
  padding: 0 0 0 97px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s ease;
}

.sol-focus-tabs .sol-focus-tab::before {
  display: none !important;
}

.sol-focus-tabs .sol-focus-tab:hover {
  color: #123A39;
}

.sol-focus-tabs .sol-focus-tab.is-active {
  color: #123A39;
  padding-left: 97px;
}

.sol-focus-tabs .sol-focus-tab:focus-visible {
  outline: 2px solid #A45A4C;
  outline-offset: 6px;
  border-radius: 4px;
}

.sol-focus-tabs .sol-focus-tab .sol-focus-icon {
  position: absolute;
  left: 0;
  top: -2px;
}

.sol-focus-tabs .sol-focus-tab span {
  position: relative;
  display: inline-block;
}

/* Small terracotta bar under the active tab name */
.sol-focus-tabs .sol-focus-tab span::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 0;
  height: 2px;
  background: #A45A4C;
  transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sol-focus-tabs .sol-focus-tab.is-active span::after {
  width: 36px;
}

@media (max-width: 1279px) {
  .sol-focus-tabs .sol-focus-tab,
  .sol-focus-tabs .sol-focus-tab.is-active {
    padding-left: 0;
  }

  .sol-focus-tabs .sol-focus-tab.is-active {
    padding-left: 42px;
  }

  .sol-focus-tabs .sol-focus-tab .sol-focus-icon {
    width: 32px;
    height: 31px;
    top: calc(50% - 16px);
  }
}

@media (max-width: 767px) {
  .sol-focus-tabs {
    gap: 14px 20px;
  }

  .sol-focus-tabs .sol-focus-tab {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sol-focus-pane:not([hidden]) .sol-focus-card,
  .sol-focus-pane:not([hidden]) .sol-focus-media-col {
    animation: none;
  }
}

/* Room below the focus card so its rounded corners and shadow are not clipped */
.sol-focus-section {
  padding-bottom: clamp(32px, 3vw, 56px);
}

/* Phones: focus tabs on one line, swipeable, scrollbar hidden */
@media (max-width: 767px) {
  .sol-focus-tabs {
    flex-wrap: nowrap;
    gap: 0 26px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 6px 4px 16px;
    /* fade the edges to hint that the row continues */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent 100%);
  }

  .sol-focus-tabs.is-scrolled {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 36px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 36px), transparent 100%);
  }

  .sol-focus-tabs.is-at-end {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 100%);
  }

  .sol-focus-tabs::-webkit-scrollbar {
    display: none;
  }

  .sol-focus-tabs .sol-focus-tab {
    flex: none;
    white-space: nowrap;
    scroll-snap-align: start;
  }
}

/* ==========================================================================
   MOBILE SIDEBAR MENU (all pages) - slides in from the right
   ========================================================================== */
.tal-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  visibility: hidden;
  pointer-events: none;
  /* stay visible until the closing slide has finished */
  transition: visibility 0s linear 0.55s;
}

.tal-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s linear 0s;
}

.tal-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 14, 12, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.45s ease;
  cursor: pointer;
}

.tal-drawer.is-open .tal-drawer-backdrop {
  opacity: 1;
}

.tal-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(88vw, 400px);
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 26px 28px calc(26px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: #ECE1DF;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(160, 85, 72, 0.35) 0%, rgba(160, 85, 72, 0) 60%),
    linear-gradient(180deg, #241D1B 0%, #1B1918 55%, #161312 100%);
  border-radius: 28px 0 0 28px;
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.35);
  transform: translateX(104%);
  transition: transform 0.55s cubic-bezier(0.77, 0, 0.18, 1);
}

.tal-drawer.is-open .tal-drawer-panel {
  transform: translateX(0);
}

/* Head: logo + round close button */
.tal-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(236, 225, 223, 0.12);
}

.tal-drawer-close {
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(232, 213, 181, 0.35);
  background: rgba(255, 255, 255, 0.04);
  color: #E8D5B5;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tal-drawer-close span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 1.5px;
  margin: -0.75px 0 0 -9px;
  background: currentColor;
  border-radius: 2px;
  transform: rotate(45deg);
}

.tal-drawer-close span + span {
  transform: rotate(-45deg);
}

.tal-drawer-close:hover {
  background: rgba(232, 213, 181, 0.12);
  border-color: rgba(232, 213, 181, 0.7);
  transform: rotate(90deg);
}

.tal-drawer-close:focus-visible,
.tal-drawer-nav a:focus-visible,
.tal-drawer-foot a:focus-visible {
  outline: 2px solid #E8D5B5;
  outline-offset: 3px;
}

.tal-drawer-label {
  display: block;
  margin: 26px 0 6px;
  font-family: 'Bebas Kai', sans-serif;
  font-size: 13px;
  letter-spacing: 0.28em;
  color: rgba(203, 166, 158, 0.75);
  text-transform: uppercase;
}

/* Links: large Bebas, staggered slide-in */
.tal-drawer-nav {
  display: flex;
  flex-direction: column;
}

.tal-drawer-nav .mobile-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  font-family: 'Bebas Kai', sans-serif;
  font-size: clamp(24px, 7vw, 30px);
  line-height: 1.1;
  letter-spacing: 0.08em;
  color: #ECE1DF;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(236, 225, 223, 0.08);
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.35s ease, transform 0.35s ease, color 0.25s ease, padding-left 0.3s ease;
}

.tal-drawer.is-open .tal-drawer-nav .mobile-nav-link {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease calc(0.18s + var(--i) * 0.045s),
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) calc(0.18s + var(--i) * 0.045s),
    color 0.25s ease, padding-left 0.3s ease;
}

.tal-drawer-arrow {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  color: #E8D5B5;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.25s ease, transform 0.3s ease;
}

.tal-drawer-nav .mobile-nav-link:hover {
  color: #E8D5B5;
  padding-left: 8px;
}

.tal-drawer-nav .mobile-nav-link:hover .tal-drawer-arrow {
  opacity: 1;
  transform: none;
}

/* Active page: sand colour, underline and a leading bar */
.tal-drawer-nav .mobile-nav-link.is-active {
  color: #E8D5B5;
  padding-left: 18px;
  text-decoration: none;
}

.tal-drawer-nav .mobile-nav-link.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: #A05A44;
  box-shadow: 0 0 0 4px rgba(160, 90, 68, 0.25);
}

.tal-drawer-nav .mobile-nav-link.is-active > span:first-child {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Foot: CTA + contact */
.tal-drawer-foot {
  margin-top: auto;
  padding-top: 28px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.tal-drawer.is-open .tal-drawer-foot {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease 0.45s, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.45s;
}

.tal-drawer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  padding: 0 24px;
  border: 1.5px solid #CBA69E;
  border-radius: 67px;
  font-family: 'Bebas Kai', sans-serif;
  font-size: 17px;
  letter-spacing: 0.2em;
  color: #CBA69E;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.tal-drawer-cta:hover {
  background: #CBA69E;
  color: #1B1918;
}

.tal-drawer-contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 20px;
}

.tal-drawer-contact a {
  font-family: 'Baskerville', serif;
  font-size: 16px;
  color: rgba(236, 225, 223, 0.85);
  text-decoration: none;
  transition: color 0.25s ease;
}

.tal-drawer-contact a:hover {
  color: #E8D5B5;
}

.tal-drawer-copy {
  margin: 18px 0 0;
  font-family: 'Bebas Kai', sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: rgba(203, 166, 158, 0.6);
  text-transform: uppercase;
}

/* Hamburger button: subtle press feedback */
#mobileMenuBtn {
  transition: color 0.25s ease, transform 0.2s ease;
}

#mobileMenuBtn:active {
  transform: scale(0.92);
}

@media (max-width: 360px) {
  .tal-drawer-panel {
    width: 92vw;
    padding-left: 22px;
    padding-right: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tal-drawer,
  .tal-drawer-backdrop,
  .tal-drawer-panel,
  .tal-drawer-nav .mobile-nav-link,
  .tal-drawer.is-open .tal-drawer-nav .mobile-nav-link,
  .tal-drawer-foot,
  .tal-drawer.is-open .tal-drawer-foot {
    transition: none !important;
  }
}

/* Sidebar "Explore" group: smaller shortcuts below the main menu */
.tal-drawer-label-sub {
  margin-top: 24px;
}

.tal-drawer-nav-sub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 18px;
}

.tal-drawer-nav-sub .mobile-nav-link.is-sub {
  padding: 9px 0;
  font-size: clamp(16px, 4.6vw, 19px);
  letter-spacing: 0.1em;
  color: rgba(236, 225, 223, 0.78);
}

.tal-drawer-nav-sub .mobile-nav-link.is-sub {
  white-space: nowrap;
  justify-content: flex-start;
}

.tal-drawer-nav-sub .mobile-nav-link.is-sub .tal-drawer-arrow {
  display: none;
}

.tal-drawer-nav-sub .mobile-nav-link.is-sub.is-active {
  color: #E8D5B5;
  padding-left: 16px;
}

.tal-drawer-nav-sub .mobile-nav-link.is-sub.is-active::before {
  width: 6px;
  height: 6px;
  margin-top: -3px;
  box-shadow: 0 0 0 3px rgba(160, 90, 68, 0.25);
}

@media (max-width: 340px) {
  .tal-drawer-nav-sub {
    grid-template-columns: 1fr;
  }
}

/* Elements waiting to slide in (translateX) must never widen the page on phones */
html,
body {
  overflow-x: hidden;
  overflow-x: clip;
}


/* ==========================================================================
   HOMEPAGE RESPONSIVE - mobile (<=767) and tablet (768-1023)
   ========================================================================== */
@media (max-width: 1023px) {
  /* Looped icon kept its desktop left/top offset and sat outside the card */
  .hero-frame-icon-wrap {
    left: auto !important;
    top: auto !important;
  }

  /* Hand-placed desktop line breaks read as broken lines on small screens */
  .minute-body br,
  .musings-quote br,
  .gift-therapy-narrative br,
  .contact-header-desc br {
    display: none;
  }
}

/* -------------------------- TABLET 768-1023 -------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Hero: line the copy up with the logo and the page container */
  .hero-section header {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

  .hero-content-col {
    padding: 28px 48px 0 !important;
  }

  .hero-content-col h1 {
    font-size: 64px !important;
  }

  .hero-content-col p {
    max-width: 620px !important;
  }

  .hero-section {
    padding-bottom: 64px !important;
  }

  .hero-frame-col {
    margin-top: 48px !important;
  }

  .hero-frame {
    width: 440px !important;
    padding: 34px 26px 28px !important;
  }

  .hero-frame-photo {
    height: 250px !important;
  }

  /* Therapy: give the four focus cards a shorter, balanced height */
  .therapy-terracotta-card,
  .therapy-frosted-card {
    min-height: 260px !important;
  }

  /* Take a minute: lotus and text side by side */
  .minute-section-container {
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 24px !important;
  }

  .minute-lotus-card {
    flex: 0 0 40% !important;
    width: 40% !important;
    padding: 24px !important;
  }

  .minute-text-card {
    flex: 1 1 0 !important;
    width: auto !important;
    padding: 36px 32px !important;
  }

  .minute-title {
    font-size: 40px;
  }

  /* Journey so far: heading on top, three stats in a row */
  .impact-section {
    padding-top: 64px !important;
    padding-bottom: 72px !important;
  }

  .impact-container {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 36px !important;
  }

  .impact-title-group {
    max-width: none;
  }

  .impact-title {
    font-size: 56px;
    white-space: normal;
  }

  .impact-title br {
    display: none;
  }

  .impact-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px !important;
    margin-left: 0 !important;
    width: 100% !important;
  }

  .impact-stat-number {
    font-size: 52px;
  }

  .impact-stat-label {
    font-size: 20px;
    white-space: normal;
  }

  /* Feelings: wheel floats to the right of the copy, overlapping the photo */
  .feelings-section {
    position: relative;
  }

  .feelings-banner {
    height: 440px !important;
  }

  .feelings-lower {
    padding: 44px 0 56px !important;
    min-height: 300px !important;
  }

  .feelings-narrative {
    max-width: calc(100% - 330px) !important;
  }

  .feelings-wheel-wrapper {
    position: absolute !important;
    top: 330px !important;
    left: 0;
    right: 0;
    height: auto !important;
  }

  .feelings-wheel-inner {
    justify-content: flex-end !important;
    padding: 0 48px !important;
  }

  .feelings-wheel-container {
    width: 290px !important;
    height: 290px !important;
  }

  /* Emotion cards: three per row */
  .emotion-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px 20px !important;
  }

  .emotion-card-item,
  .emotion-card-box {
    max-width: 100% !important;
    width: 100% !important;
  }

  .emotion-card-box {
    height: auto !important;
    aspect-ratio: 316 / 392 !important;
  }

  /* Coaching / Workplace copy: comfortable reading width */
  .coaching-narrative,
  .corporate-narrative {
    max-width: 640px !important;
  }

  /* Musings: title and quote side by side */
  .musings-container {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 40px !important;
  }

  .musings-title {
    font-size: 48px !important;
  }

  .musings-quote {
    font-size: 18px !important;
  }

  /* About: photo beside the opening of the story */
  body:not(.inner-page) .about-card-wrapper {
    max-width: 560px !important;
    margin: 0 auto;
  }

  body:not(.inner-page) .about-logos-row {
    flex-wrap: wrap;
  }
}

/* Contact block (shared by every page): photo on top, details + form side by side */
@media (min-width: 768px) and (max-width: 1023px) {
  .contact-main-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 32px 40px !important;
  }

  .contact-image-col {
    grid-column: 1 / -1 !important;
  }

  .contact-image-wrap {
    height: 320px !important;
    aspect-ratio: auto !important;
  }

  .contact-info-col {
    justify-content: flex-start !important;
  }

  .contact-form-divider {
    margin-top: 12px !important;
  }
}

/* --------------------------- PHONE <=767 --------------------------- */
@media (max-width: 767px) {
  .hero-frame-col {
    margin-top: 32px !important;
  }

  /* Journey so far: compact two-up stats with the last one full width */
  .impact-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 20px !important;
  }

  .impact-stat-number {
    font-size: 46px;
  }

  .impact-stat-label {
    font-size: 19px;
    white-space: normal;
  }

  body:not(.inner-page) .about-logos-row {
    flex-wrap: wrap;
    row-gap: 12px !important;
  }
}

@media (max-width: 380px) {
  .impact-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Homepage tablet follow-ups */
@media (min-width: 768px) and (max-width: 1023px) {
  .minute-lotus-card img {
    width: 100% !important;
    max-width: 320px !important;
    max-height: none !important;
    height: auto !important;
    transform: scale(1.3);
  }

  .minute-lotus-card {
    overflow: hidden;
  }

  .minute-title {
    font-size: 36px;
  }

  .minute-title br {
    display: none;
  }

  .contact-submit-btn {
    width: 100%;
    white-space: nowrap;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 18px;
    letter-spacing: 0.12em;
  }
}

/* Coaching hero: photo is mirrored as in Figma (people left, copy right).
   Below desktop the copy stacks over the photo, so favour its quieter right side. */
@media (max-width: 1023px) {
  .therapy-hero-bg-inner.coach-hero-bg {
    width: 100%;
    height: 100%;
  }

  .coach-hero-bg img {
    object-position: 82% center !important;
  }
}

/* ==========================================================================
   INNER PAGE HERO BANNERS (Therapy, Coaching, Gift Therapy)
   The photo scales with the screen instead of a fixed 1920x1080 crop, and
   the banner keeps the photo's 16:9 shape on desktop.
   ========================================================================== */
.therapy-hero-bg-inner {
  width: 100%;
  height: 100%;
}

@media (min-width: 1024px) {
  .therapy-hero-section {
    height: clamp(620px, 56.25vw, 1080px);
    min-height: 0;
  }

  /* Text tops follow the banner height (Figma y at 1920) */
  .sol-hero-content {
    top: clamp(180px, 20.05vw, 385px);
  }

  .gift-hero-content {
    top: clamp(150px, 16.6vw, 319px);
  }

  .sol-hero-desc {
    margin-top: clamp(24px, 5.15vw, 99px);
  }

  .sol-hero-content .therapy-hero-btn {
    margin-top: clamp(28px, 2.85vw, 55px);
  }
}

/* Phones & tablets: banner is as tall as its content */
@media (max-width: 1023px) {
  .therapy-hero-section {
    min-height: 0;
    padding-bottom: 56px;
  }

  .sol-hero-content {
    margin-top: clamp(28px, 6vw, 56px);
  }

  /* Gift: the story band overlaps the banner bottom by 50px */
  .therapy-hero-section:has(.gift-hero-content) {
    padding-bottom: 106px;
  }

  /* Keep each photo's subject in view */
  .tt-page .therapy-hero-bg-inner img {
    object-position: 55% center;
  }

  .therapy-hero-bg-inner img[src$="gift-hero.webp"] {
    object-position: 30% center;
  }
}

/* Hero banners, small desktop (1024-1279): keep copy clear of logo and subjects */
@media (min-width: 1024px) {
  .tt-page .therapy-hero-content-col {
    top: max(150px, calc(205 * var(--u)));
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .sol-hero-content {
    right: 36px;
    width: 44%;
  }

  .coach-hero-bg img,
  .therapy-hero-bg-inner img[src$="gift-hero.webp"] {
    object-position: 0% center;
  }
}

/* Gift, phones & tablets: show the quiet olive side so the copy stays readable */
@media (max-width: 1023px) {
  .therapy-hero-bg-inner img[src$="gift-hero.webp"] {
    object-position: 88% center;
  }
}

/* ==========================================================================
   HOMEPAGE HERO - PHONES & TABLETS (<=1023)
   Full-bleed canyon photo, copy on a soft gradient, slim glass tagline strip.
   About one screen tall instead of a long stacked column.
   ========================================================================== */
@media (max-width: 1023px) {
  .hero-section {
    min-height: clamp(660px, 100svh, 860px) !important;
    /* room for the tagline strip so the copy never runs under it */
    padding-bottom: 104px !important;
  }

  .hero-canvas {
    min-height: inherit;
  }

  /* Photo at full strength, framed on the woman sitting on the rock */
  .hero-bg-inner {
    background: #180F0D !important;
  }

  .hero-bg-inner img {
    opacity: 1 !important;
    object-position: 88% center !important;
    animation: talHomeHeroZoom 14s ease-out both;
  }

  @keyframes talHomeHeroZoom {
    from { transform: scale(1.12); }
    to { transform: scale(1); }
  }

  /* Dark at the top for the copy, clear in the middle, dark again at the base */
  .hero-bg-inner > div {
    background: linear-gradient(180deg,
      rgba(16, 9, 7, 0.88) 0%,
      rgba(16, 9, 7, 0.72) 34%,
      rgba(16, 9, 7, 0.18) 62%,
      rgba(16, 9, 7, 0.10) 74%,
      rgba(16, 9, 7, 0.78) 100%) !important;
  }

  .hero-section header {
    padding-top: 22px !important;
    padding-bottom: 8px !important;
  }

  /* Copy */
  .hero-content-col {
    padding: 22px 22px 0 !important;
  }

  .hero-content-col > * + * {
    margin-top: 0 !important;
  }

  .hero-content-col > span {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    font-size: 13px !important;
    letter-spacing: 0.24em !important;
    color: #E8D5B5 !important;
  }

  .hero-content-col > span::before {
    content: '';
    width: 26px;
    height: 1px;
    background: currentColor;
    opacity: 0.8;
  }

  .hero-content-col h1 {
    margin-top: 14px !important;
    font-size: clamp(40px, 11.6vw, 50px) !important;
    line-height: 1.02 !important;
    letter-spacing: 0.03em !important;
    text-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  }

  .hero-content-col p {
    margin-top: 16px !important;
    padding-top: 0 !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    color: rgba(255, 249, 237, 0.88) !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  }

  .hero-content-col > div {
    margin-top: 22px !important;
    padding-top: 0 !important;
  }

  .hero-content-col .tal-btn {
    max-width: none !important;
    height: 52px !important;
    padding: 0 22px 0 26px !important;
    background: rgba(232, 213, 181, 0.08);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .hero-content-col .tal-btn span {
    font-size: 15px;
    letter-spacing: 0.2em !important;
  }

  /* Glass tagline strip pinned to the bottom of the banner */
  .hero-frame-col {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 22px !important;
    top: auto !important;
    margin: 0 !important;
    padding: 0 16px !important;
  }

  .hero-frame {
    width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px;
    padding: 12px 18px 12px 12px !important;
    border-radius: 999px !important;
    background: rgba(24, 12, 10, 0.42) !important;
    border: 1px solid rgba(232, 213, 181, 0.28) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  }

  .hero-frame:hover {
    transform: none !important;
  }

  .hero-frame-photo {
    display: none !important;
  }

  .hero-frame-icon-wrap {
    flex: none;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    border-radius: 50%;
    background: rgba(232, 213, 181, 0.10);
    border: 1px solid rgba(232, 213, 181, 0.25);
  }

  .hero-frame-icon-wrap::before {
    width: 64px !important;
    height: 64px !important;
  }

  .hero-frame-icon {
    width: 34px !important;
    height: 34px !important;
  }

  .hero-frame-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal !important;
    text-align: left !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.14em !important;
    color: #F4E9E2 !important;
  }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .hero-bg-inner img {
    animation: none;
  }
}


/* Homepage hero, phones & tablets: height includes the strip room; strip pins to the banner */
@media (max-width: 1023px) {
  .hero-section {
    box-sizing: border-box !important;
  }

  .hero-canvas {
    position: static !important;
    min-height: 0 !important;
  }
}

@media (max-width: 359px) {
  .hero-content-col > span {
    font-size: 12px !important;
    letter-spacing: 0.16em !important;
  }

  .hero-content-col > span::before {
    display: none;
  }

  .hero-frame-text {
    font-size: 13px !important;
    letter-spacing: 0.1em !important;
  }
}

/* Homepage hero, tablets (768-1023): same design, tablet scale */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-section {
    min-height: clamp(720px, 100svh, 940px) !important;
    padding-bottom: 130px !important;
  }

  .hero-section header {
    padding-top: 32px !important;
  }

  .hero-content-col {
    padding: 56px 48px 0 !important;
    max-width: 680px !important;
    margin: 0 !important;
  }

  .hero-content-col > span {
    font-size: 15px !important;
  }

  .hero-content-col > span::before {
    width: 36px;
  }

  .hero-content-col h1 {
    margin-top: 18px !important;
    font-size: 68px !important;
  }

  .hero-content-col p {
    margin-top: 22px !important;
    font-size: 19px !important;
    line-height: 1.6 !important;
    max-width: 600px !important;
  }

  .hero-content-col > div {
    margin-top: 32px !important;
  }

  .hero-content-col .tal-btn {
    width: 360px !important;
    height: 56px !important;
  }

  .hero-content-col .tal-btn span {
    font-size: 16px;
  }

  .hero-frame-col {
    left: 48px !important;
    right: auto !important;
    bottom: 40px !important;
    width: auto !important;
    padding: 0 !important;
    justify-content: flex-start !important;
  }

  .hero-frame {
    width: auto !important;
    padding: 14px 28px 14px 14px !important;
  }

  .hero-frame-icon-wrap {
    width: 56px !important;
    height: 56px !important;
  }

  .hero-frame-icon {
    width: 40px !important;
    height: 40px !important;
  }

  .hero-frame-text {
    font-size: 16px !important;
    white-space: nowrap !important;
  }

  /* Photo: lighter top shade on the wider canvas */
  .hero-bg-inner > div {
    background: linear-gradient(180deg,
      rgba(16, 9, 7, 0.85) 0%,
      rgba(16, 9, 7, 0.62) 40%,
      rgba(16, 9, 7, 0.12) 66%,
      rgba(16, 9, 7, 0.08) 78%,
      rgba(16, 9, 7, 0.7) 100%) !important;
  }
}

/* ==========================================================================
   FLOATING HEADER (phones & tablets - wherever the hamburger is used)
   Glass pill that drops in once the page header scrolls away.
   ========================================================================== */
.tal-float-nav {
  display: none;
}

@media (max-width: 1023px) {
  .tal-float-nav {
    display: block;
  }
}

@media (max-width: 1279px) {
  .inner-page .tal-float-nav {
    display: block;
  }
}

.tal-float-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 55;
  padding: calc(10px + env(safe-area-inset-top)) 12px 0;
  pointer-events: none;
}

.tal-float-nav-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 760px;
  height: 62px;
  margin: 0 auto;
  padding: 0 8px 0 18px;
  box-sizing: border-box;
  border-radius: 999px;
  overflow: hidden;
  color: #ECE1DF;
  background: linear-gradient(120deg, rgba(36, 29, 27, 0.78) 0%, rgba(27, 25, 24, 0.72) 60%, rgba(64, 36, 30, 0.72) 100%);
  border: 1px solid rgba(232, 213, 181, 0.18);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 18px 40px rgba(20, 12, 10, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(calc(-100% - 28px)) scale(0.94);
  transition:
    transform 0.6s cubic-bezier(0.22, 1.2, 0.36, 1),
    opacity 0.35s ease,
    height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    max-width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.4s ease;
}

.tal-float-nav.is-shown .tal-float-nav-bar {
  opacity: 1;
  transform: none;
}

/* Scrolling down: the bar tightens; scrolling up: it relaxes again */
.tal-float-nav.is-compact .tal-float-nav-bar {
  height: 52px;
  max-width: 600px;
  box-shadow: 0 10px 26px rgba(20, 12, 10, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Out of the way while the sidebar is open */
.tal-menu-open .tal-float-nav.is-shown .tal-float-nav-bar,
.tal-menu-open .tal-float-nav-bar {
  opacity: 0;
  transform: translateY(calc(-100% - 28px)) scale(0.94);
}

.tal-float-logo {
  display: flex;
  align-items: center;
  flex: none;
}

.tal-float-logo img {
  display: block;
  width: auto;
  height: 34px;
  transition: height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tal-float-nav.is-compact .tal-float-logo img {
  height: 29px;
}

/* Current page name, with a small terracotta dot */
.tal-float-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-family: 'Bebas Kai', 'Bebas Neue', sans-serif;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.22em;
  color: #E8D5B5;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease 0.15s, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s;
}

.tal-float-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #A05A44;
  box-shadow: 0 0 0 3px rgba(160, 90, 68, 0.28);
}

.tal-float-nav.is-shown .tal-float-label {
  opacity: 1;
  transform: none;
}

/* Round menu button with animated lines */
.tal-float-burger {
  position: relative;
  flex: none;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(232, 213, 181, 0.3);
  border-radius: 50%;
  background: rgba(232, 213, 181, 0.1);
  color: #E8D5B5;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease, width 0.45s ease, height 0.45s ease;
}

.tal-float-nav.is-compact .tal-float-burger {
  width: 40px;
  height: 40px;
}

.tal-float-burger span {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 1.6px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), margin 0.35s ease;
}

.tal-float-burger span:nth-child(1) { width: 18px; margin-top: -6px; }
.tal-float-burger span:nth-child(2) { width: 12px; margin-left: 3px; }
.tal-float-burger span:nth-child(3) { width: 18px; margin-top: 6px; }

.tal-float-burger:hover span:nth-child(2),
.tal-float-burger:focus-visible span:nth-child(2) {
  width: 18px;
  margin-left: 0;
}

.tal-float-burger:hover {
  background: rgba(232, 213, 181, 0.2);
}

.tal-float-burger:active {
  transform: scale(0.92);
}

.tal-float-burger:focus-visible,
.tal-float-logo:focus-visible {
  outline: 2px solid #E8D5B5;
  outline-offset: 3px;
}

/* Reading progress along the bottom edge */
.tal-float-progress {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: rgba(232, 213, 181, 0.1);
  overflow: hidden;
}

.tal-float-progress::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #A05A44 0%, #CBA69E 55%, #E8D5B5 100%);
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
}

@media (max-width: 359px) {
  .tal-float-label {
    display: none;
  }

  .tal-float-burger {
    margin-left: auto;
  }
}

@media (min-width: 768px) {
  .tal-float-nav {
    padding-top: calc(16px + env(safe-area-inset-top));
  }

  .tal-float-nav-bar {
    height: 66px;
    padding: 0 10px 0 24px;
  }

  .tal-float-logo img {
    height: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tal-float-nav-bar,
  .tal-float-label,
  .tal-float-logo img,
  .tal-float-burger,
  .tal-float-burger span {
    transition: opacity 0.2s ease !important;
  }
}

/* ==========================================================================
   HOMEPAGE "JOURNEY SO FAR" - PHONES (<=767)
   One frosted glass panel; each stat is a row: big number left, label right.
   ========================================================================== */
@media (max-width: 767px) {
  .impact-section {
    padding: 52px 0 64px !important;
  }

  /* Soft warm glow behind the panel */
  .impact-section::before {
    content: '';
    position: absolute;
    right: -120px;
    top: 40px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 213, 181, 0.22) 0%, rgba(232, 213, 181, 0) 70%);
    pointer-events: none;
  }

  .impact-container {
    position: relative;
    gap: 26px !important;
  }

  .impact-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    letter-spacing: 0.26em;
    color: #E8D5B5;
    margin-bottom: 12px;
  }

  .impact-subtitle::before {
    content: '';
    width: 26px;
    height: 1px;
    background: currentColor;
    opacity: 0.8;
  }

  .impact-title {
    font-size: clamp(40px, 12vw, 52px) !important;
    line-height: 1 !important;
  }

  .impact-stats-grid {
    display: flex !important;
    flex-direction: column;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 6px 20px;
    box-sizing: border-box;
    border-radius: 26px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 40px rgba(30, 14, 10, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }

  .impact-stat-item {
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
  }

  .impact-stat-item + .impact-stat-item {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .impact-stat-line {
    display: none;
  }

  .impact-stat-number {
    margin: 0 !important;
    font-size: clamp(40px, 12vw, 50px) !important;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  }

  .impact-stat-label {
    flex: 0 1 45%;
    font-family: 'Bebas Kai', 'Bebas Neue', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: right;
    white-space: normal !important;
    color: #E8D5B5;
  }

  /* Small terracotta dot before each label */
  .impact-stat-label::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 8px 2px 0;
    border-radius: 50%;
    background: #E8D5B5;
    box-shadow: 0 0 0 3px rgba(232, 213, 181, 0.2);
    vertical-align: middle;
  }
}

@media (max-width: 767px) {
  .impact-title {
    text-wrap: balance;
  }

  .impact-stat-label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }

  .impact-stat-label::before {
    flex: none;
    margin: 0;
  }
}

@media (max-width: 767px) {
  .impact-stat-label {
    display: block;
    flex-basis: 50%;
  }

  .impact-stat-label::before {
    display: none;
  }
}

/* ==========================================================================
   HOMEPAGE "WHAT ARE YOU FEELING" - PHONES & TABLETS (<=1023)
   Photo banner with a bottom shade, copy in a white card overlapping it,
   and a ringed feelings wheel with a caption.
   ========================================================================== */
@media (max-width: 1023px) {
  .feelings-bg-gradient {
    background: linear-gradient(180deg, rgba(14, 10, 8, 0.15) 0%, rgba(14, 10, 8, 0.2) 40%, rgba(14, 10, 8, 0.82) 100%) !important;
  }

  .feelings-banner-content {
    padding-bottom: 64px !important;
  }

  .feelings-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    letter-spacing: 0.26em;
    color: #E8D5B5;
  }

  .feelings-subtitle::before {
    content: '';
    width: 26px;
    height: 1px;
    background: currentColor;
    opacity: 0.8;
  }

  .feelings-title {
    text-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  }

  /* Copy card */
  .feelings-lower {
    padding-top: 0 !important;
  }

  .feelings-narrative {
    position: relative;
    z-index: 15;
    margin-top: -44px;
    padding: 26px 24px 24px;
    box-sizing: border-box;
    border-radius: 26px;
    background: #FFFFFF;
    border: 1px solid rgba(203, 166, 158, 0.45);
    box-shadow: 0 22px 44px rgba(90, 50, 40, 0.12);
  }

  /* Short terracotta tab on the card's top edge */
  .feelings-narrative::before {
    content: '';
    position: absolute;
    left: 24px;
    top: -1px;
    width: 44px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: #A96B5E;
  }

  .feelings-narrative p {
    margin-bottom: 14px !important;
    font-size: 16.5px !important;
    line-height: 1.6 !important;
    color: #4A4340;
  }

  .feelings-narrative p:first-child {
    font-size: 19px !important;
    line-height: 1.5 !important;
    color: #123A39;
  }

  .feelings-narrative p:last-child {
    margin: 18px 0 0 !important;
    padding-top: 16px;
    border-top: 1px solid rgba(203, 166, 158, 0.4);
    font-family: 'Bebas Kai', 'Bebas Neue', sans-serif;
    font-size: 18px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #A96B5E;
  }

  /* Wheel: white ring + caption */
  .feelings-wheel-inner {
    flex-direction: column;
    align-items: center !important;
    gap: 18px;
  }

  .feelings-wheel-container {
    box-shadow: 0 0 0 8px #FFFFFF, 0 0 0 9px rgba(203, 166, 158, 0.55), 0 26px 50px rgba(90, 50, 40, 0.18) !important;
  }

  .feelings-wheel-inner::after {
    content: 'The Feelings Wheel';
    font-family: 'Bebas Kai', 'Bebas Neue', sans-serif;
    font-size: 14px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #A96B5E;
  }
}

/* Phones */
@media (max-width: 767px) {
  .feelings-banner {
    height: clamp(300px, 82vw, 360px) !important;
  }

  .feelings-title {
    font-size: clamp(36px, 10.5vw, 44px) !important;
    line-height: 1.04 !important;
  }

  .feelings-lower {
    padding-bottom: 8px !important;
  }

  .feelings-wheel-inner {
    padding: 36px 0 52px !important;
  }

  .feelings-wheel-container {
    width: clamp(240px, 72vw, 300px) !important;
    height: clamp(240px, 72vw, 300px) !important;
  }
}

/* Tablets: card on the left, wheel floating on the right */
@media (min-width: 768px) and (max-width: 1023px) {
  .feelings-banner {
    height: 420px !important;
  }

  .feelings-narrative {
    margin-top: -56px;
    padding: 32px 30px 28px;
    max-width: calc(100% - 340px) !important;
  }

  .feelings-wheel-wrapper {
    top: 300px !important;
  }

  .feelings-wheel-inner {
    align-items: flex-end !important;
    padding: 0 56px !important;
  }

  .feelings-wheel-inner::after {
    align-self: flex-end;
    width: 290px;
    text-align: center;
  }

  .feelings-lower {
    min-height: 360px !important;
    padding-bottom: 64px !important;
  }
}

/* Feelings: stop the card's negative margin collapsing so it truly overlaps the photo */
@media (max-width: 1023px) {
  .feelings-lower {
    display: flow-root;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .feelings-wheel-wrapper {
    top: 372px !important;
  }
}

@media (max-width: 767px) {
  .feelings-bg-gradient {
    background: linear-gradient(180deg, rgba(14, 10, 8, 0.2) 0%, rgba(14, 10, 8, 0.5) 35%, rgba(14, 10, 8, 0.88) 100%) !important;
  }
}

/* ==========================================================================
   FOOTER - PHONES & TABLETS (<=1023), all pages
   ========================================================================== */
.site-footer-cta {
  display: none;
}

@media (max-width: 1023px) {
  .site-footer {
    position: relative;
    overflow: hidden;
    padding-top: 52px !important;
    padding-bottom: 28px !important;
    border-top: 0 !important;
    border-radius: 32px 32px 0 0;
    background:
      radial-gradient(90% 50% at 100% 0%, rgba(160, 85, 72, 0.32) 0%, rgba(160, 85, 72, 0) 70%),
      linear-gradient(180deg, #221C1A 0%, #1B1918 60%, #151211 100%) !important;
  }

  .site-footer > .container-tal > * + * {
    margin-top: 32px !important;
  }

  /* Top row: logo + socials */
  .site-footer > .container-tal > div:first-child {
    align-items: center !important;
    gap: 22px !important;
    padding-bottom: 28px !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }

  .site-footer > .container-tal > div:first-child > img {
    height: 44px !important;
  }

  .site-footer > .container-tal > div:first-child > div {
    padding: 12px 22px;
    border-radius: 999px;
    border: 1px solid rgba(232, 213, 181, 0.18);
    background: rgba(255, 255, 255, 0.04);
  }

  .site-footer > .container-tal > div:first-child > div img {
    height: 22px !important;
    opacity: 0.9 !important;
  }

  /* Conversation card */
  .site-footer-cta {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 92px 24px 24px;
    border-radius: 26px;
    color: #FFF9ED;
    text-decoration: none;
    background: linear-gradient(135deg, #A05548 0%, #7A3B30 55%, #4A2620 100%);
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
  }

  .site-footer-cta:hover,
  .site-footer-cta:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 28px 52px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  .site-footer-cta:focus-visible {
    outline: 2px solid #E8D5B5;
    outline-offset: 3px;
  }

  .site-footer-cta-label {
    font-family: 'Bebas Kai', 'Bebas Neue', sans-serif;
    font-size: 13px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #E8D5B5;
  }

  .site-footer-cta-title {
    font-family: 'Hatcher', 'Playfair Display', serif;
    font-size: clamp(26px, 7.4vw, 34px);
    line-height: 1.05;
    letter-spacing: 0.02em;
  }

  .site-footer-cta-arrow {
    position: absolute;
    right: 22px;
    top: 50%;
    width: 52px;
    height: 52px;
    margin-top: -26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 249, 237, 0.45);
    background: rgba(255, 249, 237, 0.1);
    font-size: 22px;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s ease;
  }

  .site-footer-cta:hover .site-footer-cta-arrow {
    transform: translateX(4px);
    background: rgba(255, 249, 237, 0.2);
  }

  /* Link columns */
  .site-footer .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 34px 22px !important;
  }

  .site-footer .grid > div > * + * {
    margin-top: 14px !important;
  }

  .site-footer .grid h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    font-family: 'Bebas Kai', 'Bebas Neue', sans-serif;
    font-weight: 400 !important;
    font-size: 16px !important;
    letter-spacing: 0.22em !important;
    color: #E8D5B5 !important;
  }

  .site-footer .grid h4::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #A05548;
    box-shadow: 0 0 0 3px rgba(160, 85, 72, 0.28);
  }

  .site-footer .grid ul > li + li {
    margin-top: 10px !important;
  }

  .site-footer .grid ul a {
    display: inline-block;
    font-size: 15px;
    color: rgba(236, 225, 223, 0.8);
    transition: color 0.25s ease, transform 0.3s ease;
  }

  .site-footer .grid ul a:hover {
    color: #E8D5B5;
    transform: translateX(3px);
  }

  /* Insights: full width, links as pills */
  .site-footer .grid > div:nth-child(3) {
    grid-column: 1 / -1;
  }

  .site-footer .grid > div:nth-child(3) ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .site-footer .grid > div:nth-child(3) ul > li + li {
    margin-top: 0 !important;
  }

  .site-footer .grid > div:nth-child(3) ul a {
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid rgba(232, 213, 181, 0.22);
    background: rgba(255, 255, 255, 0.03);
  }

  .site-footer .grid > div:nth-child(3) ul a:hover {
    transform: none;
    border-color: rgba(232, 213, 181, 0.5);
  }

  /* Contact: glass card, phone numbers as tap pills */
  .site-footer .grid > div:nth-child(4) {
    grid-column: 1 / -1;
    padding: 22px 22px 24px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
  }

  .site-footer .grid > div:nth-child(4) > p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .site-footer .grid > div:nth-child(4) > div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px !important;
  }

  .site-footer .grid > div:nth-child(4) > div > p {
    margin: 0 !important;
  }

  .site-footer .grid > div:nth-child(4) > div a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(232, 213, 181, 0.3);
    background: rgba(232, 213, 181, 0.08);
    font-size: 15px;
    letter-spacing: 0.02em;
    color: #FFF9ED;
    transition: background-color 0.3s ease, border-color 0.3s ease;
  }

  .site-footer .grid > div:nth-child(4) > div a::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #E8D5B5;
  }

  .site-footer .grid > div:nth-child(4) > div a:hover {
    background: rgba(232, 213, 181, 0.18);
    border-color: rgba(232, 213, 181, 0.6);
  }

  /* Bottom bar */
  .site-footer > .container-tal > div:last-child {
    flex-direction: column-reverse !important;
    align-items: center !important;
    gap: 14px !important;
    padding-top: 24px !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    text-align: center;
    font-size: 12.5px !important;
    letter-spacing: 0.03em;
  }

  .site-footer > .container-tal > div:last-child > div:last-child {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px !important;
  }

  .site-footer > .container-tal > div:last-child > div:last-child a {
    color: rgba(236, 225, 223, 0.75);
  }
}

/* Phones: logo above a centred socials pill */
@media (max-width: 767px) {
  .site-footer > .container-tal > div:first-child {
    flex-direction: column !important;
  }
}

/* Tablets: three link columns, contact card spread across */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-footer .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .site-footer .grid > div:nth-child(3) {
    grid-column: auto;
  }

  .site-footer .grid > div:nth-child(3) ul {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer .grid > div:nth-child(4) {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 28px;
  }

  .site-footer .grid > div:nth-child(4) > h4 {
    grid-column: 1 / -1;
  }

  .site-footer .grid > div:nth-child(4) > div {
    flex-direction: column;
    margin-top: 0 !important;
  }

  .site-footer-cta {
    padding: 30px 110px 30px 32px;
  }

  .site-footer-cta-title {
    font-size: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer-cta,
  .site-footer-cta-arrow,
  .site-footer .grid ul a {
    transition: none;
  }
}

/* ==========================================================================
   BLOG DETAILS PAGE (blog-details.html)
   ========================================================================== */
.bd-hero {
  position: relative;
  padding: clamp(36px, 4.5vw, 80px) 0 clamp(32px, 3.4vw, 56px);
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(241, 225, 222, 0.85) 0%, rgba(241, 225, 222, 0) 72%),
    #FFF9ED;
  overflow: hidden;
}

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

.bd-crumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 10px;
  font-family: 'Bebas Kai', 'Bebas Neue', sans-serif;
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #B98A80;
}

.bd-crumbs a {
  color: #8E6A62;
  text-decoration: none;
  transition: color 0.25s ease;
}

.bd-crumbs a:hover {
  color: #123A39;
}

.bd-crumbs [aria-current] {
  color: #123A39;
}

.bd-cat {
  display: inline-block;
  margin-top: clamp(22px, 2.4vw, 36px);
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid #CBA69E;
  background: #FFFFFF;
  font-family: 'Bebas Kai', 'Bebas Neue', sans-serif;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #A96B5E;
}

.bd-title {
  margin: clamp(16px, 1.6vw, 26px) auto 0;
  max-width: 900px;
  font-family: 'Hatcher', 'Playfair Display', serif;
  font-size: clamp(40px, 5.2vw, 88px);
  line-height: 1.02;
  letter-spacing: 0.02em;
  color: #123A39;
  text-wrap: balance;
}

.bd-deck {
  margin: clamp(16px, 1.6vw, 26px) auto 0;
  max-width: 700px;
  font-family: 'Baskerville', 'Libre Baskerville', serif;
  font-size: clamp(18px, 1.35vw, 24px);
  font-style: italic;
  line-height: 1.5;
  color: #5A4D48;
  text-wrap: balance;
}

/* Byline, date, share */
.bd-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
  margin-top: clamp(26px, 2.6vw, 44px);
  padding-top: clamp(22px, 2vw, 30px);
  border-top: 1px solid rgba(203, 166, 158, 0.5);
}

.bd-author-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  text-decoration: none;
  color: #2B2B2B;
}

.bd-author-chip img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 0 1px #CBA69E;
}

.bd-author-chip strong {
  display: block;
  font-family: 'Bebas Kai', 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 0.08em;
  color: #123A39;
}

.bd-author-chip small {
  display: block;
  font-family: 'Baskerville', serif;
  font-size: 14px;
  color: #8E6A62;
}

.bd-meta-list {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: 'Bebas Kai', 'Bebas Neue', sans-serif;
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8E6A62;
}

.bd-meta-list li + li::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 14px 3px 0;
  border-radius: 50%;
  background: #A96B5E;
  vertical-align: middle;
}

.bd-share {
  display: flex;
  gap: 8px;
}

.bd-share-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #CBA69E;
  background: #FFFFFF;
  color: #A96B5E;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bd-share-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.bd-share-btn:hover,
.bd-share-btn:focus-visible {
  background: #A96B5E;
  color: #FFFFFF;
  transform: translateY(-2px);
}

.bd-share-btn:focus-visible {
  outline: 2px solid #123A39;
  outline-offset: 3px;
}

.bd-copy-toast {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  padding: 6px 12px;
  border-radius: 8px;
  background: #123A39;
  color: #FFF9ED;
  font-family: 'Bebas Kai', sans-serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity 0.25s ease, transform 0.3s ease;
  pointer-events: none;
}

.bd-copy-toast:empty {
  display: none;
}

.bd-share-btn.is-copied .bd-copy-toast {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Featured image */
.bd-feature {
  max-width: 1400px;
  margin: 0 auto;
}

.bd-feature-media {
  border-radius: clamp(26px, 3vw, 56px);
  overflow: hidden;
  aspect-ratio: 1286 / 544;
  background: #EBD9CF;
  box-shadow: 0 30px 60px rgba(90, 50, 40, 0.16);
}

.bd-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.06);
  transition: transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bd-feature.is-inview .bd-feature-media img {
  transform: scale(1);
}

.bd-feature figcaption {
  margin: 16px auto 0;
  max-width: 720px;
  text-align: center;
  font-family: 'Baskerville', serif;
  font-size: 15px;
  font-style: italic;
  color: #8E6A62;
}

/* Body: sticky contents + article */
.bd-body {
  padding: clamp(48px, 5.5vw, 100px) 0 clamp(56px, 6vw, 110px);
}

.bd-layout {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 760px);
  justify-content: center;
  gap: clamp(40px, 5vw, 100px);
}

.bd-toc {
  position: relative;
}

.bd-toc-card {
  position: sticky;
  top: 32px;
  padding: 26px 24px 22px;
  border-radius: 26px;
  border: 1px solid rgba(203, 166, 158, 0.55);
  background: #FFFFFF;
  box-shadow: 0 18px 40px rgba(90, 50, 40, 0.07);
}

.bd-toc-label {
  display: block;
  margin-bottom: 14px;
  font-family: 'Bebas Kai', 'Bebas Neue', sans-serif;
  font-size: 15px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #A96B5E;
}

.bd-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.bd-toc li {
  counter-increment: toc;
}

.bd-toc a {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 10px 0 10px 14px;
  border-left: 2px solid rgba(203, 166, 158, 0.35);
  font-family: 'Baskerville', serif;
  font-size: 15.5px;
  line-height: 1.35;
  color: #5A4D48;
  text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease, padding-left 0.3s ease;
}

.bd-toc a::before {
  content: counter(toc, decimal-leading-zero);
  flex: none;
  font-family: 'Bebas Kai', sans-serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  line-height: 1.6;
  color: #CBA69E;
  transition: color 0.25s ease;
}

.bd-toc a:hover {
  color: #123A39;
}

.bd-toc a.is-active {
  color: #123A39;
  border-left-color: #A96B5E;
  padding-left: 18px;
}

.bd-toc a.is-active::before {
  color: #A96B5E;
}

.bd-toc-progress {
  height: 3px;
  margin-top: 18px;
  border-radius: 3px;
  background: rgba(203, 166, 158, 0.3);
  overflow: hidden;
}

.bd-toc-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #A05548, #CBA69E);
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
}

/* Article typography */
.bd-article {
  font-family: 'Baskerville', 'Libre Baskerville', serif;
  font-size: clamp(18px, 1.15vw, 21px);
  line-height: 1.75;
  color: #2E2A28;
}

.bd-article > * + * {
  margin-top: 1.1em;
}

.bd-article h2 {
  margin-top: 1.9em;
  font-family: 'Hatcher', 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(30px, 2.4vw, 44px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: #123A39;
  scroll-margin-top: 110px;
}

.bd-article h2 + p {
  margin-top: 0.7em;
}

.bd-lead {
  font-size: 1.15em;
  line-height: 1.65;
  color: #123A39;
}

/* Drop cap on the opening line */
.bd-lead::first-letter {
  float: left;
  margin: 0.08em 0.12em 0 0;
  font-family: 'Hatcher', serif;
  font-size: 4.1em;
  line-height: 0.8;
  color: #A96B5E;
}

.bd-article em {
  color: #A96B5E;
}

.bd-article ul:not(.bd-tags),
.bd-article ol {
  padding-left: 0;
  list-style: none;
}

.bd-article > ul li {
  position: relative;
  padding-left: 30px;
}

.bd-article > ul li + li {
  margin-top: 0.6em;
}

.bd-article > ul li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.72em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #A96B5E;
}

/* In brief */
.bd-keypoints {
  margin-top: 2em !important;
  padding: 26px 28px;
  border-radius: 24px;
  background: #123A39;
  color: #ECE1DF;
}

.bd-keypoints-label {
  font-family: 'Bebas Kai', sans-serif;
  font-size: 15px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #E8D5B5;
}

.bd-keypoints ul {
  margin: 12px 0 0;
}

.bd-keypoints li {
  position: relative;
  padding-left: 28px;
  font-size: 0.92em;
  line-height: 1.55;
}

.bd-keypoints li + li {
  margin-top: 10px;
}

.bd-keypoints li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 14px;
  height: 2px;
  background: #E8D5B5;
}

/* Pull quote */
.bd-quote {
  position: relative;
  margin: 2em 0 !important;
  padding: 34px 32px 32px 88px;
  border-radius: 28px;
  background: linear-gradient(135deg, #A05548 0%, #6E3429 100%);
  color: #FFF9ED;
  box-shadow: 0 24px 48px rgba(110, 52, 41, 0.22);
}

.bd-quote::before {
  content: '\201C';
  position: absolute;
  left: 26px;
  top: 6px;
  font-family: 'Hatcher', serif;
  font-size: 110px;
  line-height: 1;
  color: #E8D5B5;
  opacity: 0.85;
}

.bd-quote p {
  margin: 0;
  font-family: 'Hatcher', serif;
  font-size: clamp(24px, 1.9vw, 32px);
  line-height: 1.3;
  letter-spacing: 0.01em;
}

/* Exercise card */
.bd-exercise {
  margin-top: 2.2em !important;
  padding: clamp(28px, 2.6vw, 44px);
  border-radius: 30px;
  background: #F1E1DE;
  border: 1px solid #CBA69E;
  scroll-margin-top: 110px;
}

.bd-exercise-label {
  font-family: 'Bebas Kai', sans-serif;
  font-size: 15px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #A96B5E;
}

.bd-exercise h2 {
  margin-top: 6px;
  color: #A96B5E;
}

.bd-exercise > p {
  margin-top: 10px;
}

.bd-exercise ol {
  margin: 22px 0 0;
  counter-reset: step;
  display: grid;
  gap: 14px;
}

.bd-exercise li {
  counter-increment: step;
  position: relative;
  padding: 16px 18px 16px 70px;
  border-radius: 18px;
  background: #FFFFFF;
  font-size: 0.95em;
  line-height: 1.55;
}

.bd-exercise li::before {
  content: counter(step);
  position: absolute;
  left: 16px;
  top: 50%;
  width: 38px;
  height: 38px;
  margin-top: -19px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #A96B5E;
  color: #FFFFFF;
  font-family: 'Bebas Kai', sans-serif;
  font-size: 19px;
}

.bd-exercise li strong {
  color: #123A39;
}

/* Tags + CTA */
.bd-article-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 2.6em !important;
  padding-top: 28px;
  border-top: 1px solid rgba(203, 166, 158, 0.5);
}

.bd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bd-tags li {
  padding: 7px 16px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid rgba(203, 166, 158, 0.7);
  font-family: 'Bebas Kai', sans-serif;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8E6A62;
}

.bd-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1.5px solid #123A39;
  font-family: 'Bebas Kai', sans-serif;
  font-size: 17px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #123A39;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.bd-cta-link:hover {
  background: #123A39;
  color: #FFF9ED;
}

/* Author card */
.bd-author-section {
  padding: 0 0 clamp(56px, 6vw, 110px);
}

.bd-author-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(200px, 340px) 1fr;
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(22px, 2.6vw, 44px);
  border-radius: clamp(28px, 3vw, 50px);
  overflow: hidden;
  color: #ECE1DF;
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(160, 85, 72, 0.45) 0%, rgba(160, 85, 72, 0) 70%),
    linear-gradient(160deg, #2A1F1C 0%, #1B1918 100%);
  box-shadow: 0 30px 60px rgba(27, 25, 24, 0.25);
}

.bd-author-photo {
  border-radius: clamp(22px, 2.4vw, 38px);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #C9A08E;
}

.bd-author-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
}

.bd-author-label {
  font-family: 'Bebas Kai', sans-serif;
  font-size: 15px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #CBA69E;
}

.bd-author-name {
  margin: 8px 0 0;
  font-family: 'Hatcher', serif;
  font-weight: 400;
  font-size: clamp(38px, 3.4vw, 60px);
  line-height: 1;
  color: #E8D5B5;
}

.bd-author-role {
  margin: 10px 0 0;
  font-family: 'Bebas Kai', sans-serif;
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ECE1DF;
}

.bd-author-bio {
  margin: 18px 0 0;
  max-width: 560px;
  font-family: 'Baskerville', serif;
  font-size: clamp(17px, 1.15vw, 20px);
  line-height: 1.65;
  color: rgba(236, 225, 223, 0.85);
}

.bd-author-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.bd-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 54px;
  padding: 0 26px;
  border-radius: 999px;
  font-family: 'Bebas Kai', sans-serif;
  font-size: 17px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.bd-btn-solid {
  background: #E8D5B5;
  color: #1B1918;
}

.bd-btn-solid:hover {
  background: #FFF9ED;
}

.bd-btn-ghost {
  border: 1.5px solid rgba(232, 213, 181, 0.55);
  color: #E8D5B5;
}

.bd-btn-ghost:hover {
  border-color: #E8D5B5;
  background: rgba(232, 213, 181, 0.1);
}

/* Related reads */
.bd-related {
  padding: clamp(56px, 6vw, 110px) 0;
  background: #F1E1DE;
  border-radius: clamp(32px, 2.6vw, 50px) clamp(32px, 2.6vw, 50px) 0 0;
}

.bd-related-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto clamp(28px, 3vw, 52px);
}

.bd-related-label {
  font-family: 'Bebas Kai', sans-serif;
  font-size: 16px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #A96B5E;
}

.bd-related-title {
  margin: 6px 0 0;
  font-family: 'Hatcher', serif;
  font-weight: 400;
  font-size: clamp(38px, 3.65vw, 70px);
  line-height: 1;
  color: #123A39;
}

.bd-related-all {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
  font-family: 'Bebas Kai', sans-serif;
  font-size: 17px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #123A39;
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 4px;
}

.bd-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 36px);
  max-width: 1400px;
  margin: 0 auto;
}

.bd-rel-card {
  display: flex;
  flex-direction: column;
  padding: 14px 14px 24px;
  border-radius: 30px;
  background: #FFFFFF;
  border: 1px solid rgba(203, 166, 158, 0.55);
  text-decoration: none;
  color: #2E2A28;
  box-shadow: 0 16px 34px rgba(90, 50, 40, 0.08);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
}

.bd-rel-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 48px rgba(90, 50, 40, 0.16);
}

.bd-rel-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  overflow: hidden;
}

.bd-rel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bd-rel-card:hover .bd-rel-media img {
  transform: scale(1.06);
}

.bd-rel-time {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(27, 25, 24, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: 'Bebas Kai', sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: #FFF9ED;
}

.bd-rel-cat {
  margin: 20px 10px 0;
  font-family: 'Bebas Kai', sans-serif;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #A96B5E;
}

.bd-rel-title {
  margin: 8px 10px 0;
  font-family: 'Hatcher', serif;
  font-size: clamp(22px, 1.6vw, 28px);
  line-height: 1.15;
  color: #123A39;
}

.bd-rel-more {
  margin: auto 10px 0;
  padding-top: 18px;
  font-family: 'Bebas Kai', sans-serif;
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #123A39;
}

.bd-rel-more span {
  display: inline-block;
  transition: transform 0.3s ease;
}

.bd-rel-card:hover .bd-rel-more span {
  transform: translateX(5px);
}

/* Desktop reading progress along the top of the window */
.bd-read-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 3px;
  pointer-events: none;
}

.bd-read-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #A05548, #CBA69E, #E8D5B5);
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
}

/* --- Small desktop / tablet --- */
@media (max-width: 1279px) {
  .bd-read-progress {
    display: none;
  }
}

@media (max-width: 1023px) {
  .bd-layout {
    grid-template-columns: minmax(0, 720px);
    gap: 32px;
  }

  /* Contents sits as a card above the article */
  .bd-toc-card {
    position: static;
  }

  .bd-toc ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
  }

  .bd-toc-progress {
    display: none;
  }

  .bd-author-card {
    grid-template-columns: 240px 1fr;
  }

  .bd-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bd-related-grid > :last-child {
    display: none;
  }
}

/* --- Phones --- */
@media (max-width: 767px) {
  .bd-hero-inner {
    text-align: left;
  }

  .bd-crumbs {
    justify-content: flex-start;
    font-size: 13px;
  }

  .bd-title {
    font-size: clamp(36px, 10.5vw, 46px);
  }

  .bd-deck {
    font-size: 18px;
  }

  .bd-meta {
    justify-content: flex-start;
    gap: 16px 20px;
  }

  .bd-meta-list {
    font-size: 15px;
  }

  .bd-feature-media {
    aspect-ratio: 4 / 3;
    border-radius: 26px;
  }

  .bd-toc ol {
    grid-template-columns: 1fr;
  }

  .bd-article {
    font-size: 17.5px;
    line-height: 1.72;
  }

  .bd-quote {
    padding: 64px 22px 26px;
  }

  .bd-quote::before {
    left: 20px;
    top: 0;
    font-size: 90px;
  }

  .bd-keypoints {
    padding: 22px 20px;
  }

  .bd-exercise {
    padding: 24px 18px;
  }

  .bd-exercise li {
    padding: 14px 14px 14px 62px;
  }

  .bd-exercise li::before {
    left: 12px;
    width: 34px;
    height: 34px;
    margin-top: -17px;
    font-size: 17px;
  }

  .bd-article-foot {
    flex-direction: column;
    align-items: stretch;
  }

  .bd-cta-link {
    justify-content: space-between;
  }

  .bd-author-card {
    grid-template-columns: 1fr;
    padding: 16px 16px 26px;
  }

  .bd-author-photo {
    aspect-ratio: 5 / 4;
  }

  .bd-author-body {
    padding: 0 8px;
  }

  .bd-author-actions .bd-btn {
    width: 100%;
    justify-content: space-between;
  }

  .bd-related-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .bd-related-grid {
    grid-template-columns: 1fr;
  }

  .bd-related-grid > :last-child {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bd-feature-media img,
  .bd-rel-card,
  .bd-rel-media img,
  .bd-share-btn {
    transition: none;
  }
}

/* =========================================================================
   NAVIGATING YOUR FEELINGS: GSAP motion (js/main.js initNavigatingGsap)
   ========================================================================= */
/* Words and letters split by js/main.js (splitWords / splitChars) */
.nav-word,
.nav-char {
  display: inline-block;
  white-space: nowrap;
}

/* Home GSAP drives these transforms (incl. the hover lift); a CSS transform transition would make them lag */
/* Large layers that GSAP scales or moves on scroll: keep them on their own GPU layer so the
   browser composites them instead of re-rasterising the photo every frame */
.home-gsap .hero-bg-inner,
.home-gsap .feelings-bg-img,
.home-gsap .coaching-banner,
.home-gsap .coaching-bg-img,
.home-gsap .corporate-bg-img,
.home-gsap .gift-therapy-bg,
.home-gsap #take-a-minute .minute-lotus-card img,
.home-gsap .wp-curtain {
  will-change: transform;
}

/* Workplace banner curtains (js/main.js): cream panels over the photo, under the title */
.wp-curtain {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 50.5%;
  z-index: 5;
  background: #FFF9ED;
  pointer-events: none;
}

.wp-curtain.is-left {
  left: 0;
}

.wp-curtain.is-right {
  right: 0;
}

/* Parallax background must stay inside the section (it is not clipped below 1280px) */
.home-gsap #therapy > .absolute:first-child {
  overflow: hidden;
}

.home-gsap #therapy .therapy-frosted-card:not(.therapy-flip-face) {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* GSAP sets transforms and shadows inline; CSS transitions would make them lag */
.navigating-section.is-gsap .emotion-card-box,
.navigating-section.is-gsap .emotion-card-img {
  transition: none;
  will-change: transform;
}

.navigating-section.is-gsap .emotion-card-box {
  transform-style: preserve-3d;
}

.emotion-card-glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(255, 249, 237, 0.38) 0%, rgba(255, 249, 237, 0.12) 28%, rgba(255, 249, 237, 0) 60%);
  mix-blend-mode: soft-light;
}

.emotion-card-num {
  z-index: 3;
}

/* Soft sand highlight that sweeps under each benefit heading */
.navigating-benefit-item strong {
  background-image: linear-gradient(rgba(203, 166, 158, 0.45), rgba(203, 166, 158, 0.45));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 38%;
}


/* ============================================================
   HOME HERO: rotating word ("Life can feel <word>")
   Magic UI "Word Rotate": each word drops in from above and leaves downwards,
   clipped by this mask. Padding + matching negative margin give the glyphs room
   without changing the line height.
   ============================================================ */
.word-rotate {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  white-space: nowrap;
  padding: 0.12em 0.1em 0.22em 0;
  margin: -0.12em -0.1em -0.22em 0;
}

.word-rotate-item {
  display: inline-block;
  will-change: transform, opacity;
}


/* ============================================================
   THERAPY / COACHING CARDS (.tal-focus: home #therapy + tal-therapy #coaching): flip cards (front = frosted icon + headline, back = terracotta text)
   Each face rotates on its own (no preserve-3d on the wrapper): Chrome drops
   backdrop-filter inside a preserve-3d parent, which would kill the frosted glass.
   Flips on hover (mouse), keyboard focus, or a tap (.is-flipped, set in main.js).
   ============================================================ */
.tal-focus .therapy-flip-card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: clamp(20px, 1.7vw, 32px);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.tal-focus .therapy-flip-card > .therapy-flip-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.8s cubic-bezier(0.45, 0.05, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.tal-focus .therapy-flip-card > .therapy-flip-front {
  position: relative;
  transform: perspective(1400px) rotateY(0deg);
}

.tal-focus .therapy-flip-card > .therapy-flip-back {
  position: absolute;
  inset: 0;
  min-height: 0;
  transform: perspective(1400px) rotateY(180deg);
}

.tal-focus .therapy-flip-card.is-flipped > .therapy-flip-front,
.tal-focus .therapy-flip-card:focus-visible > .therapy-flip-front {
  transform: perspective(1400px) rotateY(-180deg);
}

.tal-focus .therapy-flip-card.is-flipped > .therapy-flip-back,
.tal-focus .therapy-flip-card:focus-visible > .therapy-flip-back {
  transform: perspective(1400px) rotateY(0deg);
}

@media (hover: hover) and (pointer: fine) {
  .tal-focus .therapy-flip-card:hover > .therapy-flip-front {
    transform: perspective(1400px) rotateY(-180deg);
  }

  .tal-focus .therapy-flip-card:hover > .therapy-flip-back {
    transform: perspective(1400px) rotateY(0deg);
  }

  /* Lift (GSAP does this on the home page, since it leaves an inline transform on the wrapper) */
  body:not(.home-gsap) .tal-focus .therapy-flip-card {
    transition: transform 0.35s ease;
  }

  body:not(.home-gsap) .tal-focus .therapy-flip-card:hover {
    transform: translateY(-6px);
  }
}

.tal-focus .therapy-flip-card:focus-visible > .therapy-flip-face {
  border-color: rgba(255, 249, 237, 0.7);
}

/* The back's text reads well when the card is short (tablet / phone) */
.tal-focus .therapy-flip-back p {
  overflow-wrap: break-word;
}

@media (max-width: 1023px) {
  .tal-focus .therapy-flip-back {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .tal-focus .therapy-flip-back {
    text-align: left;
  }

  .tal-focus .therapy-flip-back p {
    font-size: clamp(15px, 3.9vw, 19px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tal-focus .therapy-flip-card > .therapy-flip-face {
    transition: none;
  }
}


/* ============================================================
   THERAPY / COACHING: Personal / Professional switch (main.js 8f swaps the content)
   Professional = knob on the right, label on the left (as on tal-therapy.html)
   ============================================================ */
.tal-focus .therapy-toggle-pill[role="switch"] {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.tal-focus .therapy-toggle-pill[role="switch"]:hover {
  border-color: rgba(255, 255, 255, 0.4);
}

.tal-focus .therapy-toggle-pill[role="switch"]:focus-visible {
  border-color: rgba(255, 249, 237, 0.85);
  box-shadow: 0 0 0 3px rgba(255, 249, 237, 0.25), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.tal-focus .therapy-toggle-pill.is-on {
  flex-direction: row-reverse;
  padding-left: 22px;
  padding-right: 6px;
}

/* Professional card 1 back: the Leadership & Growth list */
.tal-focus .therapy-flip-back .therapy-flip-kicker {
  font-size: clamp(13px, 0.95vw, 19px);
  margin-bottom: 0.4em;
  opacity: 0.85;
}

.tal-focus .therapy-flip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: 'Bebas Kai', 'Bebas Neue', sans-serif;
  font-size: clamp(13px, 0.95vw, 19px);
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: #FFF9ED;
  text-transform: uppercase;
}

.tal-focus .therapy-flip-list li + li {
  margin-top: 0.25em;
}

@media (max-width: 768px) {
  .tal-focus .therapy-flip-list {
    font-size: clamp(11.5px, 3.1vw, 14px);
    line-height: 1.12;
  }

  .tal-focus .therapy-flip-list li + li {
    margin-top: 0.15em;
  }

  .tal-focus .therapy-flip-back .therapy-flip-kicker {
    font-size: clamp(11.5px, 3.1vw, 14px) !important;
    margin-bottom: 0.3em !important;
  }
}


/* ============================================================
   TAL-THERAPY: Coaching section uses the home therapy card layout
   (keeps its own autumn-forest background from .tt-labs / .tt-labs-bg)
   ============================================================ */
.tt-labs.tal-focus {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(60px, 6.3vw, 121px) 0;
}

.tt-labs.tal-focus > .container-tal {
  position: relative;
  z-index: 1;
}

@media (max-width: 1023px) {
  .tt-labs.tal-focus {
    padding: clamp(60px, 8vw, 100px) 0 clamp(60px, 8vw, 110px);
  }
}

@media (max-width: 768px) {
  .tt-labs.tal-focus {
    padding: 40px 0 44px;
  }
}


/* ============================================================
   HOME FEELINGS WHEEL: white back cover behind the wheel on desktop
   (the wheel's gaps show white instead of the photo, as on phones/tablets
   where the wheel sits on the light section background)
   ============================================================ */
@media (min-width: 1024px) {
  .feelings-wheel-container {
    background-color: #FFFFFF;
    /* 2px white border, drawn outside the circle so the wheel keeps its size */
    box-shadow: 0 0 0 2px #FFFFFF;
  }
}


/* ============================================================
   HOME FEELINGS WHEEL: interactive SVG wheel (main.js 8g)
   ============================================================ */
.feelings-wheel-svg .fw-seg {
  stroke: #FFFFFF;
  stroke-width: 3.2;
  stroke-linejoin: round;
  cursor: pointer;
  outline: none;
  transition: fill 0.25s ease, opacity 0.2s ease;
}

.feelings-wheel-svg .fw-labels text {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  fill: #1A1A1A;
  pointer-events: none;
  transition: fill 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .feelings-wheel-svg .fw-seg:hover {
    opacity: 0.82;
  }

  /* Hold still while someone is reading or aiming */
  .feelings-wheel-container:hover .feelings-wheel-img {
    animation-play-state: paused;
  }
}

.feelings-wheel-container.has-selection .feelings-wheel-img,
.feelings-wheel-container:focus-within .feelings-wheel-img {
  animation-play-state: paused;
}

.feelings-wheel-svg .fw-seg.is-selected {
  fill: #123A39;
  opacity: 1;
}

.feelings-wheel-svg .fw-labels text.is-selected {
  fill: #FFF9ED;
}

.feelings-wheel-svg .fw-seg:focus-visible {
  stroke: #123A39;
  stroke-width: 6;
}

/* "You're feeling" list */
.feelings-picked {
  pointer-events: auto; /* on phones it sits in the wheel wrapper, which ignores the pointer */
  max-width: clamp(440px, 34vw, 650px);
  margin-top: clamp(24px, 2vw, 36px);
  padding-top: clamp(18px, 1.4vw, 24px);
  border-top: 1px solid rgba(169, 107, 94, 0.3);
}

.feelings-picked-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.feelings-picked-title {
  font-family: 'Bebas Kai', 'Bebas Neue', sans-serif;
  font-size: clamp(16px, 1.05vw, 20px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #A96B5E;
}

.feelings-picked-clear {
  font-family: 'Bebas Kai', 'Bebas Neue', sans-serif;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #123A39;
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0 0 1px;
  cursor: pointer;
}

.feelings-picked-clear[hidden],
.feelings-picked-hint[hidden] {
  display: none;
}

.feelings-picked-hint {
  margin: 8px 0 0;
  font-family: 'Baskerville', 'Libre Baskerville', serif;
  font-style: italic;
  font-size: clamp(15px, 0.95vw, 18px);
  color: rgba(43, 43, 43, 0.65);
}

.feelings-picked-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.feelings-picked-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(169, 107, 94, 0.18);
}

.feelings-picked-list li:last-child {
  border-bottom: 0;
}

.feelings-picked-dot {
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--fw-color);
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px rgba(169, 107, 94, 0.35);
}

.feelings-picked-text {
  flex: 1;
  min-width: 0;
}

.feelings-picked-text strong {
  font-family: 'Bebas Kai', 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 1.2vw, 22px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #123A39;
}

.feelings-picked-core {
  margin-left: 10px;
  font-family: 'Bebas Kai', 'Bebas Neue', sans-serif;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #A96B5E;
}

.feelings-picked-core::before {
  content: '\00B7\00A0';
}

.feelings-picked-text p {
  margin: 2px 0 0;
  font-family: 'Baskerville', 'Libre Baskerville', serif;
  font-size: clamp(15px, 0.95vw, 18px);
  line-height: 1.5;
  color: #2B2B2B;
}

.feelings-picked-remove {
  flex: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #A96B5E;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.feelings-picked-remove:hover,
.feelings-picked-remove:focus-visible {
  background: rgba(169, 107, 94, 0.14);
  color: #123A39;
}

/* Tablets: the intro is a card beside the wheel; the list keeps the same width */
@media (min-width: 768px) and (max-width: 1023px) {
  .feelings-picked {
    max-width: calc(100% - 340px);
  }
}

/* Phones: the list sits under the wheel (main.js moves it there), above the caption */
@media (max-width: 767px) {
  .feelings-picked {
    order: 1;
    width: 100%;
    max-width: none;
    margin-top: 6px;
    padding: 16px clamp(14px, 4.5vw, 22px) 0;
    box-sizing: border-box;
  }

  .feelings-wheel-inner::after {
    order: 0;
  }
}


/* ============================================================
   HOME NAVIGATING YOUR FEELINGS: selectable step cards (main.js 8h)
   ============================================================ */
.navigating-section .emotion-card-item[role="button"] {
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.35s ease;
}

/* Selected card:
   - outer teal ring with a cream gap and a soft teal glow
   - a thin cream frame that draws itself round the inside of the card (once, ~0.9s)
   - a check badge that pops into the top-right corner
   - the caption turns teal and an underline sweeps in under it
   Everything settles after the first second, so nothing keeps repainting. */
@property --nav-frame {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}

.navigating-section .emotion-card-box::before {
  content: '';
  position: absolute;
  inset: clamp(8px, 0.75vw, 14px);
  z-index: 3;
  border-radius: calc(clamp(20px, 1.8vw, 36px) - clamp(8px, 0.75vw, 14px));
  padding: 1.5px;
  background: conic-gradient(from 200deg, #FFF9ED var(--nav-frame), transparent 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.navigating-section .emotion-card-box::after {
  content: '';
  position: absolute;
  top: clamp(14px, 1.2vw, 22px);
  right: clamp(14px, 1.2vw, 22px);
  z-index: 4;
  width: clamp(30px, 2.1vw, 40px);
  height: clamp(30px, 2.1vw, 40px);
  border-radius: 50%;
  background: #FFF9ED url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123A39' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 58% no-repeat;
  box-shadow: 0 6px 16px rgba(18, 58, 57, 0.35);
  opacity: 0;
  transform: scale(0.3) rotate(-90deg);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.25s ease;
}

.navigating-section .emotion-card-item.is-selected .emotion-card-box {
  /* !important: phones give every card box its own shadow with !important */
  box-shadow: 0 0 0 4px #FFF9ED, 0 0 0 6px #123A39, 0 26px 50px -10px rgba(18, 58, 57, 0.55) !important;
}

.navigating-section .emotion-card-item.is-selected .emotion-card-box::before {
  opacity: 1;
  animation: navFrameDraw 0.9s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.navigating-section .emotion-card-item.is-selected .emotion-card-box::after {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  transition: opacity 0.2s ease 0.15s, transform 0.5s cubic-bezier(0.34, 1.7, 0.5, 1) 0.15s;
}

@keyframes navFrameDraw {
  from { --nav-frame: 0%; }
  to { --nav-frame: 100%; }
}

.navigating-section .emotion-card-caption {
  position: relative;
  transition: color 0.3s ease;
}

.navigating-section .emotion-card-caption::after {
  content: '';
  position: absolute;
  left: clamp(6px, 0.9vw, 18px);
  bottom: -8px;
  width: 44px;
  height: 2px;
  border-radius: 2px;
  background: #123A39;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.35s ease;
}

.navigating-section .emotion-card-item.is-selected .emotion-card-caption {
  color: #123A39;
}

.navigating-section .emotion-card-item.is-selected .emotion-card-caption::after {
  transform: scaleX(1);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}

@media (prefers-reduced-motion: reduce) {
  .navigating-section .emotion-card-item.is-selected .emotion-card-box::before {
    animation: none;
  }

  .navigating-section .emotion-card-box::after,
  .navigating-section .emotion-card-caption::after {
    transition: none !important;
  }
}

.navigating-section .emotion-card-item:focus-visible .emotion-card-box {
  box-shadow: 0 0 0 3px #FFF9ED, 0 0 0 5px rgba(18, 58, 57, 0.6);
}

/* While a step is open the other cards step back a little */
.navigating-section.has-step .emotion-card-item:not(.is-selected) {
  opacity: 0.55;
}

.navigating-section.has-step .emotion-card-item:not(.is-selected):hover,
.navigating-section.has-step .emotion-card-item:not(.is-selected):focus-visible {
  opacity: 1;
}

.navigating-back {
  margin-top: clamp(22px, 1.9vw, 34px);
  padding: 0 0 2px;
  font-family: 'Bebas Kai', 'Bebas Neue', sans-serif;
  font-size: clamp(15px, 1vw, 18px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #123A39;
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
}

.navigating-back:hover {
  color: #A96B5E;
}

/* Desktop: the text stays in view while the second row of cards is clicked */
@media (min-width: 1024px) {
  .navigating-narrative {
    position: sticky;
    top: clamp(32px, 4vw, 72px);
  }
}


/* Phones / tablets: when a card is tapped the page scrolls to the text; stop below the floating header */
@media (max-width: 1023px) {
  .navigating-narrative {
    scroll-margin-top: 96px;
  }
}


/* ============================================================
   TAL-THERAPY: How it works - one text panel per step (tabs in main.js 7b)
   All panels share one grid cell, so the box is as tall as the longest
   text and the step tabs below never jump when the text changes.
   ============================================================ */
.tt-how-panels {
  display: grid;
}

.tt-how-panels > .tt-how-desc {
  grid-area: 1 / 1;
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.tt-how-panels > .tt-how-desc[hidden] {
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .tt-how-panels > .tt-how-desc {
    transition: none;
  }
}